allow nonstandard direction tag, link to OSM

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: {
@@ -66,7 +61,7 @@ const isFaceRecognition = computed(() => props.alpr.tags.brand === 'Avigilon');
 
 const cardinalDirection = computed(() => {
   const direction = props.alpr.tags.direction || props.alpr.tags["camera:direction"];
-  direction === undefined ? 'Unknown Direction' : degreesToCardinal(parseInt(direction))
+  return direction === undefined ? 'Unspecified Direction' : degreesToCardinal(parseInt(direction))
 }
 );
 
@@ -74,4 +69,8 @@ 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/NewVisitor.vue

@@ -12,11 +12,9 @@
 
       <v-list class="text-center">
         <v-list-item class="my-4">
-          <v-list-item-content>
-            <v-icon size="x-large" color="primary" class="mb-2">mdi-progress-pencil</v-icon>
-            <v-list-item-title class="font-weight-bold">The map is incomplete!</v-list-item-title>
-            <v-list-item-subtitle>The ALPRs displayed here are a starting point, and new locations are constantly being added.</v-list-item-subtitle>
-          </v-list-item-content>
+          <v-icon size="x-large" color="primary" class="mb-2">mdi-progress-pencil</v-icon>
+          <v-list-item-title class="font-weight-bold">The map is incomplete!</v-list-item-title>
+          <v-list-item-subtitle>The ALPRs displayed here are a starting point, and new locations are constantly being added.</v-list-item-subtitle>
         </v-list-item>
       </v-list>
 

webapp/src/components/OSMTagSelector.vue

@@ -57,25 +57,25 @@ const alprBrands: WikidataItem[] = [
     name: 'Flock Safety',
     nickname: 'Flock',
     wikidata: 'Q108485435',
-    exampleImage: '/flock-1.jpg',
+    exampleImage: '/alprs/flock-1.jpg',
   },
   {
     name: 'Motorola Solutions',
     nickname: 'Motorola/Vigilant',
     wikidata: 'Q634815',
-    exampleImage: '/vigilant-1.jpg',
+    exampleImage: '/alprs/motorola-4.jpg',
   },
   {
     name: 'Leonardo',
     nickname: 'Leonardo/ELSAG',
     wikidata: 'Q910379',
-    exampleImage: '/elsag.webp',
+    exampleImage: '/alprs/elsag-1.jpg',
   },
   {
     name: 'Neology, Inc.',
     nickname: 'Neology',
     wikidata: 'Q130958232',
-    exampleImage: '/neology-1.jpg',
+    exampleImage: '/alprs/neology-2.jpg',
   },
   {
     name: '(brand goes here)',

webapp/src/views/ReportView.vue

@@ -117,15 +117,10 @@
       </template>
     </v-stepper-vertical>
 
-    <h2 class="text-center mt-16">Edit an Existing ALPR</h2>
-    <p>
-      If you find an ALPR that's missing information and would like to update it, you can follow the same steps as above. Each ALPR on DeFlock has a Node ID that you can use to find it on OpenStreetMap.
-    </p>
-
+    <h2 class="text-center">Edit an Existing ALPR</h2>
     <p class="mb-16">
-      Simply click on the ALPR with missing information, and find the Node ID (e.g. <code>node/1237489334</code>) at the bottom of the popup. In the OSM editor search field, paste the <i>numerical portion</i> of the Node ID to find the ALPR and make your changes.
+      If you find an ALPR that's missing information and would like to update it, you can click the <b>View on OSM</b> button to edit it in the OpenStreetMap editor.
     </p>
-
   </v-container>
   <Footer />
 </template>