rework Menu Bar / Rework socketioStore

src/components/LeafletTest.vue

@@ -1,6 +1,6 @@
 <template>
-  <div style="height: 600px; width: 800px">
-    <l-map
+  <div style="height: 600px; width: 800px; color: #000000">
+    <L-Map
       @ready="onMapReady"
       ref="mapRef"
       :zoom="zoom"
@@ -8,38 +8,57 @@
       style="height: 500px; width: 100%"
       @click="updateMarker"
     >
-      <l-tile-layer
+      <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-map>
+      ></L-Tile-Layer>
+      <L-Marker :lat-lng="markerLatLng" @click="handleMarkerClick"></L-Marker>
+      <L-Routing-Machine
+        @routingstart="debugRoutingEvent"
+        @routesfound="debugRoutingEvent"
+        @routingerror="debugRoutingEvent"
+        :waypoints="waypoints"
+      />
+    </L-Map>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useQuasar } from "quasar";
-import { ref } from "vue";
-import "leaflet/dist/leaflet.css";
-import { LMap, LTileLayer, LMarker } from "@vue-leaflet/vue-leaflet";
+import { useQuasar } from 'quasar';
+import { ref } from 'vue';
 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 { api } from "boot/axios";
-import { storeToRefs } from 'pinia';
+import LRoutingMachine from 'components/LRoutingMachine.vue';
+import 'leaflet-geosearch/dist/geosearch.css';
+import 'leaflet/dist/leaflet.css';
+
 import type { coords, SearchControlProps } from 'src/types';
+import type { Map, LeafletMouseEvent } from 'leaflet';
+
+import { storeToRefs } from 'pinia';
+import { useSocketioStore } from 'stores/socketio';
+import { useLeafletStore } from 'stores/leaflet';
+
+import SetLocationDialog from 'components/SetLocationDialog.vue';
+import { LMap, LMarker, LTileLayer } from '@vue-leaflet/vue-leaflet';
+
+const waypoints = [
+  [ 38.7436056, -9.2304153 ],
+  [ 38.7436056, -0.131281 ],
+];
+
 
 const leafletStore = useLeafletStore();
-const { zoom, center, markerLatLng } = storeToRefs(leafletStore);
+const socketStore = useSocketioStore();
+const { zoom, center, markerLatLng } = storeToRefs(socketStore);
 const $q = useQuasar();
 const mapRef = ref(null);
-const responseMessage = ref("");
+const responseMessage = ref('');
 
+const debugRoutingEvent = (event) => {
+  console.log(`${event.type} event: `, event);
+};
 
 const onMapReady = (map: Map) => {
   const provider = new OpenStreetMapProvider();
@@ -55,7 +74,7 @@ const onMapReady = (map: Map) => {
     autoCompleteDelay: 250,
     retainZoomLevel: false,
     animateZoom: true,
-    keepResult: true
+    keepResult: true,
   };
 
   const searchControl = GeoSearchControl(searchOptions);
@@ -72,40 +91,38 @@ function handleMarkerClick(event: LeafletMouseEvent) {
     component: SetLocationDialog,
     componentProps: {
       lat: event.latlng.lat,
-      lng: event.latlng.lng
-    }
-  }).onOk(() => {
-    void setLocation({ lat: event.latlng.lat, lng: event.latlng.lng });
-    console.log("Dialog confirmed");
-  }).onCancel(() => {
-    console.log("Dialog cancelled");
-  }).onDismiss(() => {
-    console.log("Dialog dismissed");
-  });
+      lng: event.latlng.lng,
+    },
+  })
+    .onOk((delay: number) => {
+      void setLocation({ lat: event.latlng.lat, lng: event.latlng.lng }, delay);
+      console.log(
+        'Confirmed location add: latitude: ' +
+          event.latlng.lat +
+          ', longitude: ' +
+          event.latlng.lng +
+          ', delay: ' +
+          delay,
+      );
+    })
+    .onCancel(() => {
+      console.log('Dialog cancelled');
+    })
+    .onDismiss(() => {
+      console.log('Dialog dismissed');
+    });
 }
 
-
-
-async function setLocation(coords: coords) {
+function setLocation(coords: coords, delay: number) {
   try {
-    const payLoadData = {
-      latitude: coords.lat,
-      longitude: coords.lng
-    };
-    const { data } = await api({
-      method: "post",
-      url: "/set",
-      data: payLoadData
-    });
-    console.log("Location set successfully:", data.data);
-    responseMessage.value = `Location successfully set! New location: ${data.lat}, ${data.lng}`;
+    responseMessage.value = socketStore.simulationControl('add', delay, coords.lat, coords.lng);
     $q.notify({ type: 'positive', message: responseMessage.value });
   } catch (error: unknown) {
     if (error instanceof Error) {
-      console.error("Error setting location:", error.message);
+      console.error('Error setting location:', error.message);
       responseMessage.value = `Failed to set location: ${error.message}`;
     } else {
-      console.error("Error setting location:", error);
+      console.error('Error setting location:', error);
       responseMessage.value = `Failed to set location: Unknown error`;
     }
     $q.notify({ type: 'negative', message: responseMessage.value });