From 47f569640340bec7ac8769309facde866708f4df Mon Sep 17 00:00:00 2001
From: Will Freeman <hohosanta@me.com>
Date: Fri, 27 Dec 2024 13:30:44 -0700
Subject: [PATCH] Report view uses vertical stepper

---
 webapp/src/components/DFCode.vue         |   1 +
 webapp/src/components/OSMTagSelector.vue | 113 +++++++-------
 webapp/src/views/ReportView.vue          | 182 ++++++++++++-----------
 3 files changed, 152 insertions(+), 144 deletions(-)

diff --git a/webapp/src/components/DFCode.vue b/webapp/src/components/DFCode.vue
index 47be6f4..82e97d0 100644
--- a/webapp/src/components/DFCode.vue
+++ b/webapp/src/components/DFCode.vue
@@ -43,6 +43,7 @@ code {
   border-radius: 0.25rem;
   display: block;
   margin-top: 0.5rem;
+  overflow-x: scroll;
 }
 
 .copy-button {
diff --git a/webapp/src/components/OSMTagSelector.vue b/webapp/src/components/OSMTagSelector.vue
index 3d009cd..c9f54f0 100644
--- a/webapp/src/components/OSMTagSelector.vue
+++ b/webapp/src/components/OSMTagSelector.vue
@@ -1,54 +1,56 @@
 <template>
-  <v-row style="align-items: center; margin-top: 1.25rem;">
-    <v-col cols="12" sm="6">
-      <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-row class="align-center justify-center my-4">
+      <v-col cols="12" sm="6">
+        <v-select
+          color="rgb(18, 151, 195)"
+          prepend-inner-icon="mdi-factory"
+          v-model="selectedBrand"
+          :items="alprBrands"
+          item-title="nickname"
+          return-object
+          label="Manufacturer"
+          variant="solo-filled"
+          flat
+          hide-details
+        ></v-select>
+        <v-img
+          v-if="selectedBrand"
+          :src="selectedBrand.exampleImage"
+          :alt="selectedBrand.nickname"
+          max-width="100%"
+          class="my-4"
+        ></v-img>
+      </v-col>
+    
+      <v-col cols="12" sm="6">
+        <h3 class="text-center serif">Tags to Copy</h3>
+        <DFCode>
+          man_made=surveillance<br>
+          surveillance:type=ALPR<br>
+          camera:mount=pole<br>
+          camera:type=fixed<br>
+          surveillance=public<br>
+          surveillance:zone=traffic<br>
+          manufacturer=<span class="highlight">{{ selectedBrand.name }}</span><br>
+          manufacturer:wikidata=<span class="highlight">{{ selectedBrand.wikidata }}</span><br>
+        </DFCode>
 
-    <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=public<br>
-        surveillance:zone=traffic<br>
-        manufacturer=<span class="highlight">{{ selectedBrand.name }}</span><br>
-        manufacturer:wikidata=<span class="highlight">{{ selectedBrand.wikidata }}</span><br>
-      </DFCode>
+        <h5 class="text-center mt-4 serif">and if operator is known</h5>
+        <DFCode>
+          operator=<span class="highlight">(Police Dept/Owner)</span><br>
+          operator:wikidata=<span class="highlight">(WikiData ID)</span><br>
+        </DFCode>
 
-      <h5 class="text-center mt-4">and if operator is known</h5>
-      <DFCode>
-        operator=<span class="highlight">(Police Dept/Owner)</span><br>
-        operator:wikidata=<span class="highlight">(WikiData ID)</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>
+        <v-alert
+          v-if="selectedBrand.nickname === 'Other'"
+          class="mt-4"
+          variant="tonal"
+          type="info"
+        >
+          Please provide additional details about the ALPR.
+        </v-alert>
+      </v-col>
+    </v-row>
 </template>
 
 <script setup lang="ts">
@@ -65,27 +67,26 @@ const alprBrands: WikidataItem[] = [
   },
   {
     name: 'Motorola Solutions',
-    nickname: 'Motorola',
+    nickname: 'Motorola/Vigilant',
     wikidata: 'Q634815',
     exampleImage: '/vigilant-1.jpg',
   },
+  {
+    name: 'Leonardo',
+    nickname: 'Leonardo/ELSAG',
+    wikidata: 'Q910379',
+    exampleImage: '/elsag.webp',
+  },
   {
     name: 'Neology, Inc.',
     nickname: 'Neology',
     wikidata: 'Q130958232',
     exampleImage: '/neology-1.jpg',
   },
-  {
-    name: 'Leonardo',
-    nickname: 'Leonardo',
-    wikidata: 'Q910379',
-    exampleImage: '/elsag.webp',
-  },
   {
     name: '(brand goes here)',
     nickname: 'Other',
     wikidata: '(wikidata goes here)',
-    exampleImage: '/other-1.jpeg',
   }
 ];
 const selectedBrand: Ref<WikidataItem> = ref(alprBrands[0]);
diff --git a/webapp/src/views/ReportView.vue b/webapp/src/views/ReportView.vue
index c994bc5..9e18e72 100644
--- a/webapp/src/views/ReportView.vue
+++ b/webapp/src/views/ReportView.vue
@@ -1,71 +1,106 @@
 <template>
-  <v-container class="info-section" max-width="1000">
+  <v-container>
+    <h1 class="text-center">Report an ALPR</h1>
 
-    <h2>How to Report an ALPR</h2>
     <p>
       If you've spotted an ALPR in your area, you can help us track it by reporting it to OpenStreetMap, where we source our information. Here's how you can do it:
     </p>
 
-    <div class="ml-4 mt-4">
-      <h3>1. Create an OpenStreetMap Account</h3>
-      <p>
-        <a href="https://www.openstreetmap.org/user/new" target="_blank">Sign up for an OpenStreetMap account</a> in order to submit changes.
-      </p>
+    <v-stepper-vertical color="rgb(18, 151, 195)" v-model="step" flat non-linear class="my-8" edit-icon="mdi-home">
+      <template v-slot:default="{ step }: { step: any }">
+        <v-stepper-vertical-item
+          :complete="step > 1"
+          title="Create an OpenStreetMap Account"
+          value="1"
+          editable
+        >
+          <p>
+            <a href="https://www.openstreetmap.org/user/new" target="_blank">Sign up for an OpenStreetMap account</a> in order to submit changes.
+          </p>
+        </v-stepper-vertical-item>
 
-      <h3>2. Find the ALPR's Location on OpenStreetMap</h3>
-      <p>
-        <a href="https://www.openstreetmap.org" target="_blank">Launch OpenStreetMap</a> and search for the location of the ALPR. You can use the search bar at the top of the page to find the location.
-      </p>
+        <v-stepper-vertical-item
+          :complete="step > 2"
+          title="Find the ALPR's Location"
+          value="2"
+          editable
+        >
+          <p>
+            <a href="https://www.openstreetmap.org" target="_blank">Launch OpenStreetMap</a> and search for the location of the ALPR. You can use the search bar at the top of the page to find the location.
+          </p>
+        </v-stepper-vertical-item>
 
-      <h3>3. Add the ALPR to OpenStreetMap</h3>
-      <p>
-        Once you've found the location of the ALPR, click the <strong>Edit</strong> button in the top left corner of the page. This will open the OpenStreetMap editor, where you can add the ALPR to the map.
-      </p>
+        <v-stepper-vertical-item
+          :complete="step > 3"
+          title="Add the ALPR to OpenStreetMap"
+          value="3"
+          editable
+        >
+          <p>
+            Once you've found the location of the ALPR, click the <strong>Edit</strong> button in the top left corner of the page. This will open the OpenStreetMap editor, where you can add the ALPR to the map.
+          </p>
+          <v-img max-width="450" src="/edit-map.png" class="my-8 mx-auto" />
+          <p class="mt-16 mb-8">
+            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>
 
-      <v-img max-width="450" src="/edit-map.png" class="my-8" />
+          <v-divider class="my-4"><span class="serif text-grey-darken-2">Choose a Manufacturer</span></v-divider>
 
-      <p>
-        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>
+          <OSMTagSelector />
 
-      <OSMTagSelector />
+          <v-divider class="mb-4 mt-8" />
+          
+          <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 mx-auto" src="/paste-tags.png" />
+        </v-stepper-vertical-item>
 
-      <p class="mt-8">
-        After copying the tags, paste them into the <strong>Tags</strong> field in the popup.
-      </p>
+        <v-stepper-vertical-item
+          :complete="step > 4"
+          title="Adjust the Direction"
+          value="4"
+          editable
+        >
+          <v-img max-width="450" class="my-8" src="/adjust-angle.png" />
+          <p>
+            If you know the direction that the ALPR is facing, you can use the up and down arrows to set the direction it faces.
+          </p>
+        </v-stepper-vertical-item>
 
-      <v-img max-width="450" class="my-8" src="/paste-tags.png" />
+        <v-stepper-vertical-item
+          :complete="step > 5"
+          title="Submit Your Changes"
+          value="5"
+          editable
+        >
+          <p>
+            Once you've added the ALPR to the map, click the <strong>Save</strong> button in the top left corner of the editor. You'll be asked to provide a brief description of your changes. Once you've submitted your changes, the ALPR will be added to OpenStreetMap.
+          </p>
+          <v-alert
+            variant="tonal"
+            type="info"
+            class="my-6"
+            title="How Long Will It Take?"
+          >
+            <p>
+              We pull data from OpenStreetMap <i>daily</i>, so it may take up to 24 hours for your changes to appear on this site. Rest assured that your changes will be reflected here soon. As we continue to scale, we hope to reduce this delay.
+            </p>
+          </v-alert>
+        </v-stepper-vertical-item>
 
-      <h3>4. Adjust the Direction</h3>
-
-      <v-img max-width="450" class="my-8" src="/adjust-angle.png" />
-
-      <p>
-        If you know the direction that the ALPR is facing, you can use the up and down arrows to set the direction it faces.
-      </p>
-
-      <h3>5. Submit Your Changes</h3>
-      <p>
-        Once you've added the ALPR to the map, click the <strong>Save</strong> button in the top left corner of the editor. You'll be asked to provide a brief description of your changes. Once you've submitted your changes, the ALPR will be added to OpenStreetMap.
-      </p>
-
-      <v-alert
-        variant="tonal"
-        type="info"
-        class="my-6"
-        title="How Long Will It Take?"
-      >
-        <p>
-          We pull data from OpenStreetMap <i>daily</i>, so it may take up to 24 hours for your changes to appear on this site. Rest assured that your changes will be reflected here soon. As we continue to scale, we hope to reduce this delay.
-        </p>
-      </v-alert>
-
-      <h3>6. Hang a Sign</h3>
-      <p>
-        Download our <a href="/deflock-poster.pdf" target="_blank">ALPR sign</a> and hang it near the ALPR to help raise awareness about the device. Be sure to follow all local laws and regulations when hanging signs.
-      </p>
-
-    </div>
+        <v-stepper-vertical-item
+          :complete="step > 6"
+          title="Hang a Sign"
+          value="6"
+          editable
+        >
+          <p>
+            Download our <a href="/deflock-poster.pdf" target="_blank">ALPR sign</a> and hang it near the ALPR to help raise awareness about the device. Be sure to follow all local laws and regulations when hanging signs.
+          </p>
+        </v-stepper-vertical-item>
+      </template>
+    </v-stepper-vertical>
   </v-container>
   <Footer />
 </template>
@@ -73,41 +108,12 @@
 <script setup lang="ts">
 import OSMTagSelector from '@/components/OSMTagSelector.vue';
 import Footer from '@/components/layout/Footer.vue';
+import { ref } from 'vue';
+import { VStepperVertical, VStepperVerticalItem } from 'vuetify/labs/VStepperVertical';
+
+const step = ref(1);
 </script>
 
 <style scoped>
-/* TODO: put this all in one place, also in what-is view */
-h2 {
-  margin-top: 2rem;
-}
-
-h3 {
-  margin-top: 1.25rem;
-}
-
-p {
-  margin-top: 0.5rem;
-}
-
-.flex-image {
-  display: flex;
-  gap: 1rem;
-  align-items: center;
-  margin-top: 0.5rem;
-}
-
-code {
-  background-color: #f4f4f4;
-  padding: 0.5rem;
-  border-radius: 0.25rem;
-  display: block;
-  margin-top: 0.5rem;
-}
-
-.highlight {
-  background-color: #0081ac;
-  padding: 0.15rem;
-  border-radius: 0.25rem;
-  font-weight: bold;
-}
+@import url('@/assets/typography.css');
 </style>