From 53db8673854b10211d8e1045ccb83db3bc37f421 Mon Sep 17 00:00:00 2001
From: Will Freeman <hohosanta@me.com>
Date: Sun, 22 Dec 2024 20:14:41 -0800
Subject: [PATCH] cleanup, restore buttons, show current location

---
 webapp/src/components/LeafletMap.vue | 81 ++++++++++++++++++++----
 webapp/src/components/NewVisitor.vue | 92 ----------------------------
 webapp/src/views/Map.vue             | 51 ++++++++++++---
 3 files changed, 110 insertions(+), 114 deletions(-)
 delete mode 100644 webapp/src/components/NewVisitor.vue

diff --git a/webapp/src/components/LeafletMap.vue b/webapp/src/components/LeafletMap.vue
index bbf15e3..c7d4cf7 100644
--- a/webapp/src/components/LeafletMap.vue
+++ b/webapp/src/components/LeafletMap.vue
@@ -1,10 +1,18 @@
 <template>
-  <div id="map"></div>
+  <div id="map">
+    <div class="topleft">
+      <slot name="topleft"></slot>
+    </div>
+
+    <div class="bottomright">
+      <slot name="bottomright"></slot>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, h, createApp, watch, type PropType } from 'vue';
-import L from 'leaflet';
+import { onMounted, h, createApp, watch } from 'vue';
+import L, { type LatLngExpression } from 'leaflet';
 
 import DFMapPopup from './DFMapPopup.vue';
 
@@ -22,12 +30,17 @@ const props = defineProps({
     type: Number,
     required: true,
   },
-  alprs: Array
+  alprs: Array,
+  currentLocation: {
+    type: Object,
+    default: null,
+  },
 });
 
 let map: L.Map;
 let circlesLayer: L.FeatureGroup;
 let clusterLayer: L.MarkerClusterGroup;
+let currentLocationLayer: L.FeatureGroup;
 
 onMounted(() => {
   initializeMap();
@@ -46,9 +59,33 @@ function initializeMap() {
   populateMap();
 }
 
+function renderCurrentLocation() {
+  if (currentLocationLayer) {
+    map.removeLayer(currentLocationLayer);
+  }
+
+  currentLocationLayer = L.featureGroup();
+  const clMarker = L.circleMarker([props.currentLocation.lat, props.currentLocation.lng], {
+    radius: 10,
+    color: '#ffffff',
+    fillColor: '#007bff',
+    fillOpacity: 1,
+    weight: 4
+  });
+
+  clMarker.bindPopup('Current Location');
+
+  currentLocationLayer.addLayer(clMarker);
+  map.addLayer(currentLocationLayer);
+}
+
 function populateMap() {
   const showFov = props.zoom >= 16;
 
+  if (props.currentLocation) {
+    renderCurrentLocation();
+  }
+
   if (clusterLayer) {
     map.removeLayer(clusterLayer);
   }
@@ -159,9 +196,10 @@ function hasCrossedZoomThreshold(oldZoom: number, newZoom: number, threshold: nu
 }
 
 function registerWatchers() {
-  watch(() => props.center, (newCenter) => {
-    if (newCenter !== props.center) // TODO: is this necessary?
-      map.setView(newCenter);
+  watch(() => props.center, (newCenter: any, oldCenter: any) => {
+    if (newCenter.lat !== oldCenter.lat || newCenter.lng !== oldCenter.lng) {
+      map.setView(newCenter as LatLngExpression);
+    }
   });
 
   watch(() => props.zoom, (newZoom, oldZoom) => {
@@ -172,6 +210,10 @@ function registerWatchers() {
       }
     }
   });
+
+  watch(() => props.currentLocation, (newLocation, oldLocation) => {
+    renderCurrentLocation();
+  });
 }
 
 
@@ -183,13 +225,28 @@ function registerWatchers() {
 @import 'leaflet.markercluster/dist/MarkerCluster.css';
 
 #map {
-  height: 100%;
+  height: calc(100dvh - 64px);
+  margin-top: 64px;
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 0;
 }
+
+.topleft {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  z-index: 1000;
+}
+
+.bottomright {
+  position: absolute;
+  bottom: 50px;
+  right: 60px;
+  z-index: 1000;
+}
 </style>
 
 <style> /* (Global) */
@@ -199,13 +256,13 @@ function registerWatchers() {
   cursor: default;
 }
 .svgMarker {
-    pointer-events: none;
-    cursor: default;
+  pointer-events: none;
+  cursor: default;
 }
 
 /* Enables clicks only on actual SVG path */
 .someSVGpath {
-    pointer-events: all;
-    cursor: pointer;
+  pointer-events: all;
+  cursor: pointer;
 }
 </style>
diff --git a/webapp/src/components/NewVisitor.vue b/webapp/src/components/NewVisitor.vue
deleted file mode 100644
index 44bcfbc..0000000
--- a/webapp/src/components/NewVisitor.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<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.
-                  </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">
-                    Zoom in to see which direction each ALPR is facing.
-                  </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">
-                    Please check our list of <a href="/operators">Known Operators</a> and report missing ALPRs near you.
-                  </h4>
-                </v-col>
-              </v-row>
-            </v-card>
-          </v-col>
-
-        </v-row>
-      </v-container>
-      <div class="text-center mx-4 mb-2">Map data from <a href="https://openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>. By using this site, you agree to our <router-link to="/legal">Terms of Service</router-link>.</div>
-      <v-card-actions>
-        <v-btn class="w-100" size="x-large" color="primary" variant="elevated" @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>
diff --git a/webapp/src/views/Map.vue b/webapp/src/views/Map.vue
index 15912d5..a753dac 100644
--- a/webapp/src/views/Map.vue
+++ b/webapp/src/views/Map.vue
@@ -1,18 +1,47 @@
 <template>
   <div class="map-container" @keyup="handleKeyUp">
-    <!-- <NewVisitor /> -->
-
     <v-card class="map-notif" v-show="isLoadingALPRs && !showClusters">
       <v-card-title><v-progress-circular indeterminate color="primary" /></v-card-title>
     </v-card>
 
-    <!-- use-global-leaflet=false is a workaround for a bug in current version of vue-leaflet -->
     <leaflet-map
       v-if="center"
       v-model:center="center"
       v-model:zoom="zoom"
+      :current-location="currentLocation"
       @update:bounds="updateBounds"
-    />
+    >
+      <!-- SEARCH -->
+      <template v-slot:topleft>
+        <form @submit.prevent="onSearch">
+          <v-text-field
+            :rounded="xs || undefined"
+            :density="xs ? 'compact' : 'default'"
+            class="map-search"
+            ref="searchField"
+            prepend-inner-icon="mdi-magnify"
+            placeholder="Search for a location"
+            single-line
+            variant="solo"
+            clearable
+            hide-details
+            v-model="searchQuery"
+            type="search"
+          >
+            <template v-slot:append-inner>
+              <v-btn :disabled="!searchQuery" variant="text" flat color="#0080BC" @click="onSearch">
+                Go<v-icon end>mdi-chevron-right</v-icon>
+              </v-btn>
+            </template>
+          </v-text-field>
+        </form>
+      </template>
+
+      <!-- CURRENT LOCATION -->
+      <template v-slot:bottomright>
+        <v-fab icon="mdi-crosshairs-gps" @click="goToUserLocation" />
+      </template>
+    </leaflet-map>
     <div v-else class="loader">
       <span class="mb-4 text-grey">Loading Map</span>
       <v-progress-circular indeterminate color="primary" />
@@ -22,7 +51,6 @@
 
 <script setup lang="ts">
 import 'leaflet/dist/leaflet.css';
-import { LMap, LTileLayer, LControl } from '@vue-leaflet/vue-leaflet';
 import { ref, onMounted, computed, watch } from 'vue';
 import { useRouter } from 'vue-router'
 import type { Ref } from 'vue';
@@ -30,12 +58,10 @@ import { BoundingBox } from '@/services/apiService';
 import type { Cluster } from '@/services/apiService';
 import { getALPRs, geocodeQuery, getClusters } from '@/services/apiService';
 import { useDisplay, useTheme } from 'vuetify';
-import DFMapMarker from '@/components/DFMapMarker.vue';
 import type { ALPR } from '@/types';
 import L from 'leaflet';
 globalThis.L = L;
 import 'leaflet/dist/leaflet.css'
-import 'vue-leaflet-markercluster/dist/style.css'
 import LeafletMap from '@/components/LeafletMap.vue';
 
 const DEFAULT_ZOOM = 12;
@@ -48,6 +74,8 @@ const center: Ref<any|null> = ref(null);
 const bounds: Ref<BoundingBox|null> = ref(null);
 const searchField: Ref<any|null> = ref(null);
 const searchQuery: Ref<string> = ref('');
+const currentLocation: Ref<any|null> = ref(null);
+
 const router = useRouter();
 const { xs } = useDisplay();
 
@@ -56,7 +84,7 @@ const mapTileUrl = computed(() =>
   theme.global.name.value === 'dark' ?
     'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png' :
     'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
-);
+); // TODO: implement dark mode in LeafletMap.vue
 
 const alprs: Ref<ALPR[]> = ref([]);
 const clusters: Ref<Cluster[]> = ref([]);
@@ -96,6 +124,7 @@ function onSearch() {
 function goToUserLocation() {
   getUserLocation()
     .then(location => {
+      console.log('User location:', location);
       center.value = { lat: location[0], lng: location[1] };
       zoom.value = DEFAULT_ZOOM;
     }).catch(error => {
@@ -108,6 +137,7 @@ function getUserLocation(): Promise<[number, number]> {
     if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(
         (position) => {
+          currentLocation.value = { lat: position.coords.latitude, lng: position.coords.longitude };
           resolve([position.coords.latitude, position.coords.longitude]);
         },
         (error) => {
@@ -223,13 +253,14 @@ onMounted(() => {
 
 .map-container {
   width: 100%;
-  height: calc(100dvh - 64px);
   overflow: auto;
 }
 
 .map-search {
   width: calc(100vw - 22px);
-  max-width: 400px;
+  @media (min-width: 600px) {
+    max-width: 320px;
+  }
   z-index: 1000;
 }