Add Wardriving Section

webapp/src/App.vue

@@ -17,7 +17,8 @@ const items = [
   { 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: 'Known Operators', icon: 'mdi-police-badge', to: '/operators' },
+  { title: 'Wardriving', icon: 'mdi-car-connected', to: '/wardriving' },
+  // { title: 'Known Operators', icon: 'mdi-police-badge', to: '/operators' },
   // { title: 'About', icon: 'mdi-information', to: '/about' },
   // { title: 'Feature Roadmap', icon: 'mdi-road-variant', to: '/roadmap' },
 ]

webapp/src/components/DFMapPopup.vue

@@ -45,7 +45,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, computed } from 'vue';
+import { computed } from 'vue';
 import type { PropType } from 'vue';
 import type { ALPR } from '@/types';
 import { VIcon, VList, VSheet, VListItem, VBtn } from 'vuetify/components';

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.1</p>
+          <p class="mt-4">v1.0.2</p>
         </div>
         </v-col>
       </v-row>

webapp/src/components/layout/Hero.vue

@@ -0,0 +1,48 @@
+<template>
+  <v-container fluid>
+    <v-row justify="center" class="hero text-center mb-4" :style="`background: url('${imageUrl}') no-repeat center center / cover;`">
+      <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="buttonHref ? '_blank' : '_self'" color="rgb(18, 151, 195)" class="mt-4">{{ buttonText }}</v-btn>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  title: String,
+  description: String,
+  imageUrl: String,
+  buttonText: String,
+  buttonTo: String,
+  buttonHref: String,
+});
+</script>
+
+<style scoped>
+.hero {
+  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 > * {
+   position: relative;
+   z-index: 2;
+}
+</style>

webapp/src/router/index.ts

@@ -66,6 +66,14 @@ const router = createRouter({
         title: 'Operators | DeFlock'
       }
     },
+    {
+      path: '/wardriving',
+      name: 'wardriving',
+      component: () => import('../views/Wardriving.vue'),
+      meta: {
+        title: 'Wardriving | DeFlock'
+      }
+    },
     {
       path: '/contact',
       name: 'contact',

webapp/src/views/OperatorsView.vue

@@ -1,44 +1,5 @@
 <template>
   <v-container class="info-section" max-width="1000">
-    <h1>Known Operators</h1>
-    <p>
-      We regularly scrape Flock's site for cities/counties that have Flock ALPRs. Here is our current list of jurisdictions we've scraped that have ALPRs. Not every Flock operator has opted in to sharing their usage with Flock, so this list is <i>not exhaustive</i>. 
-    </p>
-
-    <v-card class="my-4">
-      <v-card-text>
-        <v-select
-          v-model="selectedState"
-          :items="distinctStates"
-          label="Filter by State"
-          outlined
-          clearable
-        />
-
-        <v-data-table
-          v-model:page="page"
-          :loading="isLoading"
-          :headers="headers"
-          :items="filteredCities"
-          :items-per-page="8"
-          :sort-by="[ { key: 'state', order: 'asc' } ]"
-        >
-          <template v-slot:item.numCameras="i: any">
-            <span v-if="i.item.numCameras">{{ i.item.numCameras }}</span>
-            <span v-else>N/A</span>
-          </template>
-
-          <template v-slot:item.transparencyReportUrl="i: any">
-            <v-btn variant="text" :href="i.item.transparencyReportUrl" target="_blank" :disabled="!i.item.transparencyReportUrl">
-              <v-icon start>mdi-eye</v-icon>
-              <span v-if="i.item.transparencyReportUrl"> View</span>
-              <span v-else> N/A</span>
-            </v-btn>
-          </template>
-        </v-data-table>
-      </v-card-text>
-    </v-card>
-
     <h2 id="community-datasets">Community Datasets</h2>
     <p>
       Here are some datasets that have been shared with us by the community through various collection methods (FOIA requests, scraping, wardriving, etc.). If you have a dataset you'd like to share, please reach out to us <router-link to="/contact">here</router-link>.

webapp/src/views/PrivacyPolicy.vue

@@ -1,15 +1,15 @@
 <template>
   <v-container class="mb-16">
     <h1>Privacy Policy</h1>
-    <p>Effective Date: <b>12/26/2024</b></p>
+    <p>Effective Date: <b>1/24/2025</b></p>
 
     <p>
       At DeFlock, we respect your privacy. This privacy policy outlines our approach to user privacy and how information may be handled when using our platform.
     </p>
 
     <h2>Information We Collect</h2>
     <p>
-      DeFlock does not collect, store, or process any personal information about our users. We use local storage in your browser to anonymously identify first-time visitors for the purpose of showing an introductory message. This data cannot be used to identify you personally. We do not use cookies, analytics, or tracking technologies on our website.
+      DeFlock does not collect, store, or process any personal information about our users. We use local storage in your browser to anonymously identify first-time visitors for the purpose of showing an introductory message as well as to persist application state. This data cannot be used to identify you personally. We do not use cookies, analytics, or tracking technologies on our website.
     </p>
 
     <h2>Third-Party Services</h2>

webapp/src/views/ReportView.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container>
+  <v-container class="mb-16">
     <h1 class="text-center mt-4">Report a New ALPR</h1>
 
     <p>
@@ -66,7 +66,11 @@
           value="4"
           editable
         >
-          <v-img max-width="450" class="my-8" src="/adjust-angle.png" />
+          <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>
@@ -80,7 +84,7 @@
           editable
         >
           <p>
-            Once you've added the ALPR to the map, click the <strong>Save</strong> button in the top right 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.
+            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"
@@ -89,7 +93,7 @@
             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.
+              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>
@@ -104,40 +108,27 @@
           <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>
-
-          <template v-slot:next>
-            <v-btn
-              color="primary"
-              disabled
-            >
-              Next
-            </v-btn>
-          </template>
         </v-stepper-vertical-item>
       </template>
     </v-stepper-vertical>
-
-    <h2 class="text-center">Edit an Existing ALPR</h2>
-    <p class="mb-16">
-      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>
 
 <script setup lang="ts">
+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';
-import { ref } from 'vue';
-import { VStepperVertical, VStepperVerticalItem } from 'vuetify/labs/VStepperVertical';
 
-const step = ref(1);
-</script>
+const step = ref(parseInt(localStorage.getItem('currentStep') || '1'));
 
-<style scoped>
-@import url('@/assets/typography.css');
+onMounted(() => {
+  step.value = parseInt(localStorage.getItem('currentStep') || '1');
+});
 
-.transparent {
-  background-color: transparent !important;
-}
-</style>
+watch(step, (newStep) => {
+  localStorage.setItem('currentStep', newStep.toString());
+});
+</script>

webapp/src/views/Wardriving.vue

@@ -0,0 +1,57 @@
+<template>
+  <Hero
+    title="Wardriving"
+    description="Learn how driving around with an Android phone can help map ALPRs!"
+    imageUrl="/wardriving.jpg"
+  />
+  <v-container class="mb-16">
+    <h2>What is Wardriving?</h2>
+    <p>
+      Wardriving is the practice of collecting data on wireless networks, Bluetooth devices, and other signals while traveling (typically in a car). For DeFlock, this technique can be a valuable way to locate Flock ALPRs and contribute to the map.
+    </p>
+
+    <h2>How is Wardriving Useful?</h2>
+    <p>
+      Flock ALPRs often use battery packs called <b>Penguin Packs</b> that emit a Bluetooth signal with names starting with <b>"Penguin-"</b>. By recording these signals while wardriving, you can identify the general location of these cameras.
+    </p>
+    <p>
+      This data can be used to identify new locations of ALPRs and verify the accuracy of existing locations. Members of the community regularly review WiGLE data to identify new ALPRs and update the map accordingly.
+    </p>
+
+    <h2>How to Get Started</h2>
+    <p>
+      Download the <a href="https://play.google.com/store/apps/details?id=net.wigle.wigleandroid" target="_blank">WiGLE WiFi Wardriving</a> app on your Android phone. This app will allow you to record the Bluetooth signals emitted by Penguin Packs.
+    </p>
+    <p>
+      By running the app while doing your daily commute or driving around town, you can help identify new ALPRs and contribute to the map.
+    </p>
+
+    <h2>How to Add WiGLE Data to the Map</h2>
+    <v-alert 
+      type="info"
+      variant="tonal"
+      icon="mdi-information"
+      class="mb-4"
+      title="WiGLE Map Layer Coming Soon"
+      text="We're working on a way to visualize WiGLE data on the map to identify unmapped areas. Until then, you can download some of our datasets and contribute to the map manually."
+    />
+    <p>
+      Even if you haven't collected WiGLE data yourself, you can still contribute to the map by downloading the data from the <router-link to="/operators">our community datasets</router-link> or by performing a <a href="https://wigle.net/search#btSearch" target="_blank">WiGLE search</a> yourself. Once you have the data, you can import the CSV to a map such as <a href="https://www.google.com/mymaps" target="_blank">Google My Maps</a>. From there, you can verify the ALPR's location, direction, and other details. Once you're confident in the data, you can submit it to OpenStreetMap for inclusion in the map.
+    </p>
+    <div class="text-center mt-12">
+      <v-btn to="/operators" color="rgb(18, 151, 195)"><v-icon start>mdi-table</v-icon>View Datasets</v-btn>
+    </div>
+
+  </v-container>
+
+  <Footer />
+</template>
+
+<script setup lang="ts">
+import Hero from '@/components/layout/Hero.vue';
+import Footer from '@/components/layout/Footer.vue';
+</script>
+
+<style scoped>
+@import url('@/assets/typography.css');
+</style>