new visitor

webapp/src/App.vue

@@ -14,9 +14,9 @@ const items = [
   { title: 'Map', icon: 'mdi-map', to: '/' },
   { 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: 'Feature Roadmap', icon: 'mdi-road-variant', to: '/roadmap' },
   { title: 'About', icon: 'mdi-information', to: '/about' },
   { title: 'Contact', icon: 'mdi-email', to: '/contact' },
+  { title: 'Feature Roadmap', icon: 'mdi-road-variant', to: '/roadmap' },
 ]
 const drawer = ref(false)
 

webapp/src/components/DFMapMarker.vue

@@ -7,7 +7,7 @@
   <l-polygon
     :lat-lngs="directionIndicatorPolygonCoordinates"
     :options="{ color: 'red' }"
-    v-if="showFov"
+    v-if="showFov && hasDirection"
   >
     <!-- TODO: use the same popup -->
     <l-popup>
@@ -34,7 +34,13 @@ const props = defineProps({
   }
 });
 
+const hasDirection = computed(() => props.alpr.tags.direction !== undefined);
+
 const directionIndicatorPolygonCoordinates = computed(() => {
+  if (!hasDirection.value) {
+    console.warn('ALPR does not have direction tag');
+    return [];
+  }
   const { lat, lon } = props.alpr;
   const direction = parseInt(props.alpr.tags.direction);
   const fov = 30; // Field of view in degrees

webapp/src/components/NewVisitor.vue

@@ -0,0 +1,91 @@
+<template>
+  <v-dialog :fullscreen="smAndDown" v-model="show" max-width="900">
+    <v-card>
+      <v-card-title class="text-center py-4 font-weight-bold">
+        <span class="headline">Welcome to DeFlock</span>
+      </v-card-title>
+        <p class="mx-8">
+          DeFlock is a tool to help you learn about Automated License Plate Readers (ALPRs) in your area. Here's how it works:
+        </p>
+      <v-container>
+        <v-row>
+
+          <v-col cols="12" sm="6">
+            <v-card flat class="pa-4">
+              <v-row class="align-center">
+                <v-col>
+                  <v-img width="140" src="/step1.png" />
+                </v-col>
+                <v-col>
+                  <h4 class="no-small">
+                    Each Circle represents an Automated License Plate Reader (ALPR).
+                  </h4>
+                </v-col>
+              </v-row>
+            </v-card>
+          </v-col>
+          
+          <v-col cols="12" sm="6">
+            <v-card flat class="pa-4">
+                <v-row class="align-center">
+                <v-col>
+                  <v-img width="140" src="/step2.png" />
+                </v-col>
+                <v-col >
+                  <h4 class="no-small">
+                    The red area extending from the ALPR show which direction the camera faces.
+                  </h4>
+                </v-col>
+              </v-row>
+            </v-card>
+          </v-col>
+
+          <v-col cols="12" sm="6">
+            <v-card flat class="pa-4">
+                <v-row class="align-center">
+                <v-col>
+                  <v-img width="140" src="/step3.png" />
+                </v-col>
+                <v-col>
+                  <h4 class="no-small">
+                    Click on an ALPR to view more information about it.
+                  </h4>
+                </v-col>
+              </v-row>
+            </v-card>
+          </v-col>
+
+        </v-row>
+      </v-container>
+      <v-card-actions>
+        <v-btn class="w-100" color="primary" variant="tonal" @click="acknowledge">Got it</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useDisplay } from 'vuetify';
+
+const { smAndDown } = useDisplay();
+
+const show = ref(false);
+
+onMounted(() => {
+  if (!localStorage.getItem('acknowledged')) {
+    show.value = true;
+  }
+});
+
+function acknowledge() {
+  show.value = false;
+  localStorage.setItem('acknowledged', 'true');
+}
+</script>
+
+<style scoped>
+.no-small {
+  min-width: 160px;
+}
+</style>

webapp/src/views/HomeView.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="map-container" @keyup="handleKeyUp">
+    <NewVisitor />
+
     <v-card class="map-notif" v-show="!canRefreshMarkers">
       <v-card-title><b>Zoom in to Refresh</b></v-card-title>
     </v-card>
@@ -65,6 +67,7 @@ import { BoundingBox } from '@/services/apiService';
 import { getALPRs, geocodeQuery } from '@/services/apiService';
 import { useDisplay, useTheme } from 'vuetify';
 import DFMapMarker from '@/components/DFMapMarker.vue';
+import NewVisitor from '@/components/NewVisitor.vue';
 import type { ALPR } from '@/types';
 
 const DEFAULT_ZOOM = 12;

webapp/src/views/WhatIsAnALPRView.vue

@@ -1,7 +1,7 @@
 <template>
   <v-container max-width="1000">
     <p>
-      <v-img max-height="350" width="100%" cover src="/flock-camera.jpeg" />
+      <v-img max-height="450" width="100%" cover src="/flock-camera.jpeg" />
     </p>
 
     <h2>What is an ALPR</h2>
@@ -28,18 +28,15 @@
 
       <h3>Potential for Abuse</h3>
       <p>Law enforcement officers or other individuals with access could misuse this data, for example, tracking ex-partners, political rivals, or targeting specific communities without oversight.</p>
-    </div>
 
-    <h2>How They've Been Abused</h2>
-    <p>
-      ALPRs have been used in a variety of ways that violate privacy and civil liberties. Here are some examples:
-    </p>
-    <ul>
-      <li><a target="_blank" href="https://www.kwch.com/2022/10/31/kechi-police-lieutenant-arrested-using-police-technology-stalk-wife/">Kechi police lieutenant arrested for using police technology to stalk wife</a></li>
-      <li><a target="_blank" href="https://www.kwch.com/2022/11/04/kechi-police-lieutenants-arrest-puts-flock-technology-under-scrutiny/">Kechi police lieutenant&apos;s arrest puts Flock technology under scrutiny</a></li>
-      <li><a target="_blank" href="https://www.koat.com/article/espanola-police-license-plate-stolen-cover-traffic-stop/45361740">License plate cover leads to traffic stop mishap</a></li>
-      <li><a href="https://apnews.com/article/handcuffed-black-girls-colorado-settlement-a7a695839b8841e56b7db0d103cc5ed1">Family of Black girls handcuffed by Colorado police, held at gunpoint reach $1.9 million settlement</a></li>
-    </ul>
+      <h4 class="mt-4">Examples of Abuse</h4>
+      <ul>
+        <li><a target="_blank" href="https://www.kwch.com/2022/10/31/kechi-police-lieutenant-arrested-using-police-technology-stalk-wife/">Kechi police lieutenant arrested for using police technology to stalk wife</a></li>
+        <li><a target="_blank" href="https://www.kwch.com/2022/11/04/kechi-police-lieutenants-arrest-puts-flock-technology-under-scrutiny/">Kechi police lieutenant&apos;s arrest puts Flock technology under scrutiny</a></li>
+        <li><a target="_blank" href="https://www.koat.com/article/espanola-police-license-plate-stolen-cover-traffic-stop/45361740">License plate cover leads to traffic stop mishap</a></li>
+        <li><a href="https://apnews.com/article/handcuffed-black-girls-colorado-settlement-a7a695839b8841e56b7db0d103cc5ed1">Family of Black girls handcuffed by Colorado police, held at gunpoint reach $1.9 million settlement</a></li>
+      </ul>
+    </div>
 
     <h2 id="not-alpr" :class="{ highlighted: route.hash === '#not-alpr' }">What They Look Like</h2>
     <v-carousel class="my-4" hide-delimiters>