Minor Improvements

webapp/src/App.vue

@@ -16,7 +16,6 @@ const items = [
   { title: 'Home', icon: 'mdi-home', to: '/' },
   { title: 'Map', icon: 'mdi-map', to: '/map' },
   { title: 'What is an ALPR?', icon: 'mdi-cctv', to: '/what-is-an-alpr' },
-  { title: 'Dangers of ALPRs', icon: 'mdi-shield-alert', to: '/dangers' },
   { title: 'Report an ALPR', icon: 'mdi-map-marker-plus', to: '/report' },
   { title: 'Known Operators', icon: 'mdi-police-badge', to: '/operators' },
   // { title: 'About', icon: 'mdi-information', to: '/about' },

webapp/src/assets/main.css

@@ -32,6 +32,10 @@ p {
   font-family: "PT Serif", serif;
 }
 
+.sans-serif {
+  font-family: unset !important;
+}
+
 /* Prevent Scrolling Horizontally */
 html, body {
   overflow-x: hidden;

webapp/src/components/ALPRCounter.vue

@@ -12,6 +12,13 @@ import { useDisplay } from 'vuetify'
 import { getALPRCounts } from '@/services/apiService';
 import { CountUp } from 'countup.js';
 
+const props = defineProps({
+  delayMs: {
+    type: Number,
+    default: 200,
+  }
+});
+
 const counterEl: Ref<HTMLElement|null> = ref(null);
 const countupOptions = {
   useEasing: true,
@@ -33,13 +40,17 @@ const counts: Ref<Counts> = ref({
 const showFinalAnimation = ref(false);
 const { xs: isMobile } = useDisplay();
 
+let timeOfMount: number|undefined = undefined;
+
 onMounted(() => {
-  getALPRCounts().then((response) => {
-    counts.value = response;
+  timeOfMount = new Date().getTime();
+  getALPRCounts().then((countResponse) => {
+    counts.value = countResponse;
+    countUp(countResponse);
   });
 });
 
-watch(counts, (newCounts: Counts) => {
+function countUp(newCounts: Counts) {
   if (!newCounts.worldwide) return;
   if (!counterEl.value) {
     console.error('Counter element not found');
@@ -48,14 +59,23 @@ watch(counts, (newCounts: Counts) => {
 
   if (!counter) {
     counter = new CountUp(counterEl.value, newCounts.worldwide, countupOptions);
-    setTimeout(() => {
-      counter?.start();
-    }, 500);
+
+    if (timeOfMount) {
+      const timeSinceMount = new Date().getTime() - timeOfMount;
+      if (timeSinceMount < props.delayMs) {
+        setTimeout(() => {
+          counter?.start();
+        }, props.delayMs - timeSinceMount);
+      } else {
+        counter.start();
+      }
+    }
+
     setTimeout(() => {
       showFinalAnimation.value = true;
-    }, 3000);
+    }, 2500);
   }
-});
+}
 </script>
 
 <style scoped>

webapp/src/components/DFMapPopup.vue

@@ -22,7 +22,7 @@
             {{ alpr.tags.brand }}
           </span>
           <span v-else>
-            Unknown Manufacturer
+            Unspecified Manufacturer
           </span>
         </b>
       </v-list-item>
@@ -32,19 +32,14 @@
             {{ alpr.tags.operator }}
           </span>
           <span v-else>
-            Unknown Operator
+            Unspecified Operator
           </span>
         </b>
       </v-list-item>
     </v-list>
 
-    <div class="text-center text-grey-darken-1">
-
-      <v-tooltip open-delay="500" text="OSM Node ID" location="bottom">
-        <template #activator="{ props }">
-          <span style="font-size: 0.9em; cursor: default" v-bind="props">node/{{ alpr.id }}</span>
-        </template>
-      </v-tooltip>
+    <div class="text-center">
+      <v-btn target="_blank" size="x-small" :href="osmNodeLink(props.alpr.id)" variant="text" color="grey-darken-1"><v-icon start>mdi-open-in-new</v-icon>View on OSM</v-btn>
     </div>
   </v-sheet>
 </template>
@@ -53,7 +48,7 @@
 import { defineProps, computed } from 'vue';
 import type { PropType } from 'vue';
 import type { ALPR } from '@/types';
-import { VIcon, VList, VSheet, VListItem, VTooltip } from 'vuetify/components';
+import { VIcon, VList, VSheet, VListItem, VBtn } from 'vuetify/components';
 
 const props = defineProps({
   alpr: {
@@ -64,12 +59,18 @@ const props = defineProps({
 
 const isFaceRecognition = computed(() => props.alpr.tags.brand === 'Avigilon');
 
-const cardinalDirection = computed(() => 
-  props.alpr.tags.direction === undefined ? 'Unknown Direction' : degreesToCardinal(parseInt(props.alpr.tags.direction))
+const cardinalDirection = computed(() => {
+  const direction = props.alpr.tags.direction || props.alpr.tags["camera:direction"];
+  return direction === undefined ? 'Unspecified Direction' : degreesToCardinal(parseInt(direction))
+}
 );
 
 function degreesToCardinal(degrees: number): string {
   const cardinals = ['North', 'Northeast', 'East', 'Southeast', 'South', 'Southwest', 'West', 'Northwest'];
   return 'Faces ' + cardinals[Math.round(degrees / 45) % 8];
 }
+
+function osmNodeLink(id: string): string {
+  return `https://www.openstreetmap.org/node/${id}`;
+}
 </script>

webapp/src/components/LeafletMap.vue

@@ -56,7 +56,7 @@ let currentLocationLayer: FeatureGroup;
 
 // Marker Creation Utilities
 function createSVGMarker(alpr: ALPR): string {
-  const orientationDegrees = alpr.tags.direction;
+  const orientationDegrees = alpr.tags.direction || alpr.tags['camera:direction'];
   const fovPath = `
       <path class="someSVGpath" d="M215.248,221.461L99.696,43.732C144.935,16.031 198.536,0 256,0C313.464,0 367.065,16.031 412.304,43.732L296.752,221.461C287.138,209.593 272.448,202.001 256,202.001C239.552,202.001 224.862,209.593 215.248,221.461Z" style="fill:rgb(87,87,87);fill-opacity:0.46;"/>
       <path class="someSVGpath" d="M215.248,221.461L99.696,43.732C144.935,16.031 198.536,0 256,0C313.464,0 367.065,16.031 412.304,43.732L296.752,221.461C287.138,209.593 272.448,202.001 256,202.001C239.552,202.001 224.862,209.593 215.248,221.461ZM217.92,200.242C228.694,192.652 241.831,188.195 256,188.195C270.169,188.195 283.306,192.652 294.08,200.242C294.08,200.242 392.803,48.4 392.803,48.4C352.363,26.364 305.694,13.806 256,13.806C206.306,13.806 159.637,26.364 119.197,48.4L217.92,200.242Z" style="fill:rgb(137,135,135);"/>
@@ -73,7 +73,7 @@ function createSVGMarker(alpr: ALPR): string {
 }
 
 function createMarker(alpr: ALPR): Marker | CircleMarker {
-  if (hasPlottableOrientation(alpr.tags.direction)) {
+  if (hasPlottableOrientation(alpr.tags.direction || alpr.tags['camera:direction'])) {
     const icon = L.divIcon({
       className: 'leaflet-data-marker',
       html: createSVGMarker(alpr),