update report view to include Neology and Other, single code block

webapp/src/components/OSMTagSelector.vue

@@ -0,0 +1,115 @@
+<template>
+  <v-row style="align-items: center; margin-top: 1.25rem;">
+    <v-col cols="12" sm="6">
+      <!-- <v-select
+        v-model="selectedBrand"
+        return-object
+        :items="alprBrands"
+        item-title="name"
+        item-value="wikidata"
+        label="Select a company"
+        outlined
+      /> -->
+      <h2 class="text-center mb-4">Choose Brand</h2>
+      <v-row>
+        <v-col v-for="brand in alprBrands" :key="brand.wikidata" cols="6">
+          <v-card
+            @click="selectedBrand = brand"
+            class="text-center"
+            :class="{ selected: selectedBrand.wikidata === brand.wikidata }"
+            :image="brand.exampleImage"
+            min-height="180"
+          >
+            <v-card-title class="overlay">{{ brand.nickname }}</v-card-title>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-col>
+
+    <!-- <v-col cols="12" sm="4">
+      <v-img rounded cover aspect-ratio="1" width="220" :src="selectedBrand.exampleImage" />
+    </v-col> -->
+
+    <v-col cols="12" sm="6">
+      <h3 class="text-center">{{ selectedBrand.nickname }}</h3>
+      <DFCode>
+        man_made=surveillance<br>
+        surveillance:type=ALPR<br>
+        camera:mount=pole<br>
+        camera:type=fixed<br>
+        surveillance=traffic<br>
+        surveillance:zone=traffic<br>
+        brand=<span class="highlight">{{ selectedBrand.name }}</span><br>
+        brand:wikidata=<span class="highlight">{{ selectedBrand.wikidata }}</span><br>
+      </DFCode>
+
+      <v-alert
+        v-if="selectedBrand.nickname === 'Other'"
+        class="mt-4"
+        variant="tonal"
+        type="warning"
+        icon="mdi-information"
+        title="Missing a brand?"
+      >
+        Please let us know by <a href="/contact">contacting us</a> or by <a href="https://github.com/frillweeman/deflock" target="_blank">contributing</a> to the project.
+      </v-alert>
+    </v-col>
+
+  </v-row>
+</template>
+
+<script setup lang="ts">
+import DFCode from '@/components/DFCode.vue';
+import { ref, type Ref } from 'vue';
+import type { WikidataItem } from '@/types';
+
+const alprBrands: WikidataItem[] = [
+  {
+    name: 'Flock Safety',
+    nickname: 'Flock',
+    wikidata: 'Q108485435',
+    exampleImage: '/flock-1.jpg',
+  },
+  {
+    name: 'Motorola Solutions',
+    nickname: 'Motorola',
+    wikidata: 'Q634815',
+    exampleImage: '/vigilant-1.jpg',
+  },
+  {
+    name: 'Neology, Inc.',
+    nickname: 'Neology',
+    wikidata: 'Q130958232',
+    exampleImage: '/neology-1.jpg',
+  },
+  {
+    name: '(brand goes here)',
+    nickname: 'Other',
+    wikidata: '(wikidata goes here)',
+    exampleImage: '/other-1.jpeg',
+  }
+];
+const selectedBrand: Ref<WikidataItem> = ref(alprBrands[0]);
+
+</script>
+
+<style scoped>
+.highlight {
+  background-color: #0081ac;
+  padding: 0.15rem;
+  border-radius: 0.25rem;
+  font-weight: bold;
+}
+
+.overlay {
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
+  /* font-family: 'Courier New', Courier, monospace; */
+  font-weight: bold;
+  text-transform: uppercase;
+  font-size: 1.2rem;
+}
+
+.selected {
+  border: 4px solid #75ddff;
+}
+</style>

webapp/src/types.ts

@@ -5,3 +5,10 @@ export interface ALPR {
   tags: Record<string, string>;
   type: string;
 };
+
+export interface WikidataItem {
+  name: string;
+  nickname: string;
+  wikidata: string;
+  exampleImage: string|undefined;
+}

webapp/src/views/ReportView.vue

@@ -48,46 +48,11 @@
         To add the ALPR, click the <strong>Point</strong> button in the top left corner of the editor, then click on the location of the ALPR on the map. In the popup that appears, paste one of the following sets of tags based on the brand of the ALPR:
       </p>
 
-      <div class="d-flex flex-row w-100 justify-space-between">
-        <div style="flex: 1" class="mr-2">
-          <h3 class="text-center">Flock Safety</h3>
-          <DFCode>
-            man_made=surveillance<br>
-            surveillance:type=ALPR<br>
-            camera:mount=pole<br>
-            camera:type=fixed<br>
-            surveillance=traffic<br>
-            surveillance:zone=traffic<br>
-            brand=<span class="highlight">Flock Safety</span><br>
-            brand:wikidata=<span class="highlight">Q108485435</span><br>
-          </DFCode>
-        </div>
-  
-        <div style="flex: 1" class="ml-2">
-          <h3 class="text-center">Motorola Solutions</h3>
-          <DFCode>
-            man_made=surveillance<br>
-            surveillance:type=ALPR<br>
-            camera:mount=pole<br>
-            camera:type=fixed<br>
-            surveillance=traffic<br>
-            surveillance:zone=traffic<br>
-            brand=<span class="highlight">Motorola Solutions</span><br>
-            brand:wikidata=<span class="highlight">Q634815</span><br>
-          </DFCode>
-        </div>
-      </div>
+      <OSMTagSelector />
 
-      <v-alert
-        variant="tonal"
-        type="info"
-        class="my-6 mb-16"
-        title="Don't see the brand?"
-      >
-        <p>
-          If you've located an ALPR that isn't from Flock Safety or Motorola Solutions, you can still add it to OpenStreetMap. Just use the tags above and replace the brand name and Wikidata ID with the correct information.
-        </p>
-      </v-alert>
+      <p class="mt-8">
+        After copying the tags, paste them into the <strong>Tags</strong> field in the popup.
+      </p>
 
       <v-img max-width="450" class="my-8" src="/paste-tags.png" />
 
@@ -115,6 +80,7 @@
 
 <script setup lang="ts">
 import DFCode from '@/components/DFCode.vue';
+import OSMTagSelector from '@/components/OSMTagSelector.vue';
 </script>
 
 <style scoped>