changes

# Conflicts:
#	src/components/LeafletTest.vue

src/components/LeafletTest.vue

@@ -1,48 +1,26 @@
 <template>
-  <div style="height:600px; width:800px">
-      <q-toolbar class="bg-primary text-white q-my-md shadow-2">
-      <q-btn flat round dense icon="menu" class="q-mr-sm" />
-      <q-separator dark vertical inset />
-      <q-btn stretch flat :icon="home.icon" @click="handleFavClick(home.coords)" />
-
-      <q-space />
-
-      <q-btn-dropdown stretch flat label="Favorites">
-        <q-list>
-          <q-item
-            v-for="fav in favorites"
-            :key="fav.id"
-            clickable
-            v-ripple
-            v-close-popup
-            @click="handleFavClick(fav.coords)"
-          >
-            <q-item-section avatar>
-              <q-avatar :icon="fav.icon" color="primary" text-color="white" />
-            </q-item-section>
-            <q-item-section>
-              <q-item-label>{{ fav.name }}</q-item-label>
-           </q-item-section>
-        </q-item>
-        </q-list>
-      </q-btn-dropdown>
-    </q-toolbar>
-    <l-map @ready="onMapReady" ref="mapRef" :zoom="zoom" :center="center" style="height: 500px; width: 100%;" @click="updateMarker">
+  <div style="height: 600px; width: 800px">
+    <l-map
+      @ready="onMapReady"
+      ref="mapRef"
+      :zoom="zoom"
+      :center="center"
+      style="height: 500px; width: 100%"
+      @click="updateMarker"
+    >
       <l-tile-layer
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         layer-type="base"
         name="OpenStreetMap"
         @click="updateMarker($event.latlng)"
       ></l-tile-layer>
-     <l-marker :lat-lng="markerLatLng" @click="handleMarkerClick"></l-marker>
+      <l-marker :lat-lng="markerLatLng" @click="handleMarkerClick"></l-marker>
     </l-map>
-     <StatusBar />
   </div>
 </template>
 
 <script setup lang="ts">
 import { useQuasar } from "quasar";
-import type { Ref} from "vue";
 import { ref } from "vue";
 import "leaflet/dist/leaflet.css";
 import { LMap, LTileLayer, LMarker } from "@vue-leaflet/vue-leaflet";
@@ -50,36 +28,19 @@ import { GeoSearchControl, OpenStreetMapProvider } from 'leaflet-geosearch';
 import "leaflet-geosearch/dist/geosearch.css";
 import "leaflet/dist/leaflet.css";
 import type { Map, LeafletMouseEvent } from 'leaflet';
+import { useLeafletStore } from "stores/leaflet";
 import SetLocationDialog from "components/SetLocationDialog.vue";
-import StatusBar from "components/StatusBar.vue"
 import { api } from "boot/axios";
+import { storeToRefs } from 'pinia';
+import type { coords, SearchControlProps } from 'src/types';
 
+const leafletStore = useLeafletStore();
+const { zoom, center, markerLatLng } = storeToRefs(leafletStore);
 const $q = useQuasar();
 const mapRef = ref(null);
-const zoom = ref(10);
-const center: Ref<[number, number]> = ref([40.71278, -74.00594]);
-const markerLatLng: Ref<[number, number]> = ref([40.71278, -74.00594]);
 const responseMessage = ref("");
 
-interface coords {
-  lat: number;
-  lng: number;
-}
 
-interface SearchControlProps {
-  provider: OpenStreetMapProvider;
-  showMarker: boolean;
-  autoClose: boolean;
-  updateMap: boolean;
-  showPopup: boolean;
-  style: 'button' | 'bar';
-  acceptAutoLoad: boolean;
-  autoComplete: boolean;
-  autoCompleteDelay: number;
-  retainZoomLevel: boolean;
-  animateZoom: boolean;
-  keepResult: boolean;
-}
 const onMapReady = (map: Map) => {
   const provider = new OpenStreetMapProvider();
   const searchOptions: SearchControlProps = {
@@ -97,7 +58,7 @@ const onMapReady = (map: Map) => {
     keepResult: true
   };
 
-  const searchControl = new GeoSearchControl(searchOptions);
+  const searchControl = GeoSearchControl(searchOptions);
   map.addControl(searchControl);
 };
 
@@ -123,10 +84,7 @@ function handleMarkerClick(event: LeafletMouseEvent) {
   });
 }
 
-function handleFavClick(coords: coords) {
-  center.value = [coords.lat, coords.lng];
-  markerLatLng.value = [coords.lat, coords.lng];
-}
+
 
 async function setLocation(coords: coords) {
   try {
@@ -153,45 +111,6 @@ async function setLocation(coords: coords) {
     $q.notify({ type: 'negative', message: responseMessage.value });
   }
 }
-
-const home = {
-  name: "Home",
-  coords: {
-    lat: 40.71278,
-    lng: -74.00594
-  },
-  icon: "home"
-};
-
-const favorites = [
-  {
-    id: 1,
-    name: "Central Park",
-    coords: {
-      lat: 40.785091,
-      lng: -73.968285
-    },
-    icon: "park"
-  },
-  {
-    id: 2,
-    name: "Times Square",
-    coords: {
-      lat: 40.758896,
-      lng: -73.985130,
-    },
-    icon: "star"
-  },
-  {
-    id: 3,
-    name: "Empire State Building",
-    coords: {
-      lat: 40.748817,
-      lng: -73.985428
-    },
-    icon: "building"
-  }
-];
 </script>
 
 <style>