add EveryDoor as option to report

webapp/src/App.vue

@@ -16,8 +16,8 @@ function toggleTheme() {
 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: 'Report an ALPR', icon: 'mdi-map-marker-plus', to: '/report' },
+  { title: 'What is an ALPR?', icon: 'mdi-cctv', to: '/what-is-an-alpr' },
   { title: 'How to FOIA', icon: 'mdi-file-document', to: '/foia' },
   { title: 'Wardriving', icon: 'mdi-car-connected', to: '/wardriving' },
   // { title: 'Known Operators', icon: 'mdi-police-badge', to: '/operators' },

webapp/src/components/layout/Footer.vue

@@ -57,7 +57,7 @@
         <div>
           <p>&copy; {{ currentYear }} DeFlock. All Rights Reserved</p>
           <p>Map data © <a href="https://www.openstreetmap.org/copyright" target="_blank" style="color: unset; font-weight: normal;">OpenStreetMap contributors</a></p>
-          <p class="mt-4">v1.0.4</p>
+          <p class="mt-4">v1.0.5</p>
         </div>
         </v-col>
       </v-row>

webapp/src/components/layout/Hero.vue

@@ -1,12 +1,25 @@
 <template>
   <v-container fluid>
-    <v-row justify="center" class="hero text-center mb-4" :style="`background: url('${imageUrl}') no-repeat center center / cover;`">
+    <v-row
+      justify="center"
+      class="hero text-center mb-4"
+      :style="`background: url('${imageUrl}') no-repeat center center / cover; --hero-opacity: ${opacity};`"
+    >
       <v-col cols="12" md="8">
-      <h1 class="mb-4">{{ title }}</h1>
-      <p class="mb-4">
-        {{ description }}
-      </p>
-      <v-btn v-if="buttonText" :href="buttonHref" :to="buttonTo" :target color="rgb(18, 151, 195)" class="mt-4">{{ buttonText }}</v-btn>
+        <h1 class="mb-4">{{ title }}</h1>
+        <p class="mb-4">
+          {{ description }}
+        </p>
+        <v-btn
+          v-if="buttonText"
+          :href="buttonHref"
+          :to="buttonTo"
+          :target
+          color="rgb(18, 151, 195)"
+          class="mt-4"
+        >
+          {{ buttonText }}
+        </v-btn>
       </v-col>
     </v-row>
   </v-container>
@@ -22,9 +35,13 @@ const props = defineProps({
   buttonText: String,
   buttonTo: String,
   buttonHref: String,
+  opacity: {
+    type: Number,
+    default: 0.6,
+  },
 });
 
-const target = computed(() => 
+const target = computed(() =>
   props.buttonHref && !props.buttonHref.startsWith('#') ? '_blank' : '_self'
 );
 </script>
@@ -34,21 +51,21 @@ const target = computed(() =>
   color: white;
   padding: 100px 0 !important;
   position: relative;
-  }
+}
 
- .hero::before {
-   content: '';
-   position: absolute;
-   top: 0;
-   left: 0;
-   width: 100%;
-   height: 100%;
-   background: rgba(0, 0, 0, 0.6);
-   z-index: 1;
- }
+.hero::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, var(--hero-opacity));
+  z-index: 1;
+}
 
- .hero > * {
-   position: relative;
-   z-index: 2;
+.hero > * {
+  position: relative;
+  z-index: 2;
 }
 </style>

webapp/src/router/index.ts

@@ -52,11 +52,34 @@ const router = createRouter({
     },
     {
       path: '/report',
-      name: 'report',
-      component: () => import('../views/ReportView.vue'),
-      meta: {
-        title: 'Report an ALPR | DeFlock'
-      }
+      name: 'reportChoose',
+      component: () => import('../views/ReportBase.vue'),
+      children: [
+        {
+          path: '',
+          name: 'report',
+          component: () => import('../views/ReportChoose.vue'),
+          meta: {
+            title: 'Report an ALPR | DeFlock'
+          },
+        },
+        {
+          path: '/report/id',
+          name: 'reportID',
+          component: () => import('../views/ReportID.vue'),
+          meta: {
+            title: 'Report using iD | DeFlock'
+          }
+        },
+        {
+          path: '/report/every-door',
+          name: 'reportEveryDoor',
+          component: () => import('../views/ReportEveryDoor.vue'),
+          meta: {
+            title: 'Report using Every Door | DeFlock'
+          }
+        },
+      ]
     },
     {
       path: '/operators',

webapp/src/views/ReportBase.vue

@@ -0,0 +1,10 @@
+<template>
+  <router-view />
+
+  <Footer />
+</template>
+
+<script setup lang="ts">
+import Footer from '@/components/layout/Footer.vue';
+</script>
+

webapp/src/views/ReportChoose.vue

@@ -0,0 +1,119 @@
+<template>
+  <Hero
+    :opacity="0.53"
+    imageUrl="/pole-map.webp"
+    title="Add to Our Map" 
+    description="We need your help to complete our map!"
+  />
+
+  <v-container class="mb-16">
+    <v-row justify="center" class="mb-8">
+      <v-col cols="12" md="8">
+        <h2 class="text-center text-h4 font-weight-bold">Choose Your Reporting Method</h2>
+        <p class="text-center text-body-1 mt-4">
+          We use OpenStreetMap to source our data. Choose a method below to add to our map.
+        </p>
+        <p class="sans-serif text-center mt-2">
+          <a style="font-size: 0.85em" target="_blank" href="https://deflock.hashnode.dev/why-we-use-openstreetmap">Why do we use OSM?</a>
+        </p>
+      </v-col>
+    </v-row>
+
+    <v-row justify="center">
+      <v-col cols="12" md="5" class="pa-4">
+        <v-card
+          to="/report/every-door"
+          class="mx-auto h-100 d-flex flex-column"
+          elevation="4"
+          hover
+        >
+          <v-card-item class="bg-green-lighten-5">
+            <v-card-title class="text-h5 font-weight-bold">
+              <v-icon icon="mdi-leaf" class="me-2" color="green-darken-1"></v-icon>
+              Easy Reporting
+            </v-card-title>
+            <v-card-subtitle class="pt-2">
+              Using the <b>Every Door app</b>
+            </v-card-subtitle>
+          </v-card-item>
+
+          <v-img class="mx-auto mt-5" src="/everydoor.webp" style="width: 90%; border-radius: 8px;" />
+
+          <v-card-text class="text-body-1">
+            <p class="mb-4 sans-serif">Recommended for beginners. The Every Door app provides a simple mobile interface that's easy to use while walking around.</p>
+            <p class="sans-serif">Features:</p>
+            <ul class="ml-4">
+              <li class="my-2">Simple, intuitive interface</li>
+              <li class="my-2">Works well on mobile devices</li>
+              <li class="mt-2">Minimal learning curve</li>
+            </ul>
+          </v-card-text>
+
+          <v-card-actions class="pa-4">
+            <v-btn
+              block
+              color="green-darken-1"
+              variant="elevated"
+              to="/report/every-door"
+              size="large"
+            >
+              Choose Easy
+              <v-icon icon="mdi-arrow-right" end></v-icon>
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-col>
+
+      <v-col cols="12" md="5" class="pa-4">
+        <v-card
+          class="mx-auto h-100 d-flex flex-column"
+          elevation="4"
+          hover
+          to="/report/id"
+        >
+          <v-card-item class="bg-blue-lighten-5">
+            <v-card-title class="text-h5 font-weight-bold">
+              <v-icon icon="mdi-layers" class="me-2" color="blue-darken-1"></v-icon>
+              Advanced Reporting
+            </v-card-title>
+            <v-card-subtitle class="pt-2">
+              Using the <b>iD OSM editor</b>
+            </v-card-subtitle>
+          </v-card-item>
+
+          <v-img class="mx-auto mt-5" src="/id.webp" style="width: 90%; border-radius: 8px;" />
+
+          <v-card-text class="text-body-1">
+            <p class="mb-4 sans-serif">For users who want more control. The iD editor provides a comprehensive interface for detailed reporting.</p>
+            <p class="sans-serif">Features:</p>
+            <ul class="ml-4">
+              <li class="my-2">Full-featured editing capabilities</li>
+              <li class="my-2">More detailed attribute settings</li>
+              <li class="mt-2">Advanced mapping interface</li>
+            </ul>
+          </v-card-text>
+
+          <v-card-actions class="pa-4">
+            <v-btn
+              block
+              color="blue-darken-1"
+              variant="elevated"
+              to="/report/id"
+              size="large"
+            >
+              Choose Advanced
+              <v-icon icon="mdi-arrow-right" end></v-icon>
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import Hero from '@/components/layout/Hero.vue';
+</script>
+
+<style scoped>
+</style>

webapp/src/views/ReportEveryDoor.vue

@@ -0,0 +1,124 @@
+<template>
+  <Hero
+    imageUrl="/everydoor.webp"
+    title="Report using Every Door" 
+    description="Add ALPRs to our map using the Every Door app."
+  />
+  
+  <v-container class="mb-16">
+    <h1 class="text-center">Adding to the Map</h1>
+
+    <v-alert
+      type="warning"
+      color="#1297c3"
+      class="my-6"
+      title="Are You Sure it's an ALPR?"
+    >
+      <p>
+        Please ensure that the device you're reporting <a style="color: white; text-decoration: underline;" href="/what-is-an-alpr#photos">is actually an ALPR</a> and not a commonly mistaken traffic detection camera or other device. Adding incorrect data can lead to confusion and inaccuracies on the map.
+      </p>
+    </v-alert>
+
+    <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
+          class="transparent"
+          :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>
+
+        <v-stepper-vertical-item
+          class="transparent"
+          :complete="step > 2"
+          title="Download the Every Door App"
+          value="2"
+          editable
+        >
+          <p>
+            <a target="_blank" href="https://every-door.app/">Download the Every Door app</a> for your device.
+          </p>
+        </v-stepper-vertical-item>
+
+        <v-stepper-vertical-item
+          class="transparent"
+          :complete="step > 3"
+          title="Add the ALPR"
+          value="3"
+          editable
+        >
+          <p>
+            Make sure you're using this mode in order to add an ALPR.
+          </p>
+          <v-img max-width="450" src="/everydoor/1-view-mode.jpg" class="my-8" />
+
+          <p class="mb-8">
+            Find the location of the ALPR on the map. Once found, hit the <b>➕</b> button, verify the placement, and hit the <b>✔️</b>.
+          </p>
+
+          <p class="mb-8">
+            After placing the pin, search for <b>Surveillance Camera</b>:
+          </p>
+
+          <v-img max-width="450" src="/everydoor/3-search.png" class="my-8"></v-img>
+
+          <p class="mb-8">
+            Set the fields to the following values. Use <b>Direction</b> to set the direction the ALPR faces. If you happen to know the manufacturer of the ALPR, include it as shown in the screenshot below. For help identifying the manufacturer, <a href="/what-is-an-alpr#photos">see our vendor photos</a>.
+          </p>
+
+          <v-img max-width="450" src="/everydoor/6-all-fields.png" class="my-8"></v-img>
+
+          <p class="mb-8">
+            When finished, save your changes. You can add multiple cameras before uploading them to OSM as a single changeset.
+          </p>
+        </v-stepper-vertical-item>
+
+        <v-stepper-vertical-item
+          class="transparent"
+          :complete="step > 5"
+          title="Submit Your Changes"
+          value="5"
+          editable
+        >
+          <p>
+            Once you've added the ALPRs to the map, click the <strong>Upload</strong> button at the bottom-left corner of the app.
+          </p>
+
+          <v-img max-width="450" src="/everydoor/7-upload.jpg" class="my-8"></v-img>
+          
+          <v-alert
+              variant="tonal"
+              type="info"
+              class="my-6"
+              title="How Long Will It Take?"
+            >
+              <p>
+                We pull data from OpenStreetMap <i>hourly</i>, so it may take up to an hour 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>
+      </template>
+    </v-stepper-vertical>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+import { VStepperVerticalItem, VStepperVertical } from 'vuetify/labs/components';
+import Hero from '@/components/layout/Hero.vue';
+
+const step = ref(parseInt(localStorage.getItem('currentStepED') || '1'));
+
+onMounted(() => {
+  step.value = parseInt(localStorage.getItem('currentStepED') || '1');
+});
+
+watch(step, (newStep) => {
+  localStorage.setItem('currentStepED', newStep.toString());
+});
+</script>

webapp/src/views/ReportID.vue

@@ -1,10 +1,16 @@
 <template>
-  <v-container class="mb-16">
-    <h1 class="text-center mt-4">Report a New ALPR</h1>
+  <Hero
+    imageUrl="/id.webp"
+    title="Report using iD" 
+    description="Add and edit ALPRs using OSM's powerful web-based editor."
+  />
 
-    <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>
+  <!-- TODO: make sure the stepper saves its progress properly after the route refactoring -->
+
+  <v-container class="mb-16">
+    <h1 class="text-center">
+      Editing the Map
+    </h1>
 
     <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 }">
@@ -106,30 +112,16 @@
             </p>
           </v-alert>
         </v-stepper-vertical-item>
-
-        <v-stepper-vertical-item
-          class="transparent"
-          :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>
 
 <script setup lang="ts">
+import Hero from '@/components/layout/Hero.vue';
 import { ref, onMounted, watch } from 'vue';
 import OSMTagSelector from '@/components/OSMTagSelector.vue';
 import { VStepperVerticalItem, VStepperVertical } from 'vuetify/labs/components';
-import Footer from '@/components/layout/Footer.vue';
 
 const step = ref(parseInt(localStorage.getItem('currentStep') || '1'));