lint

src/components/LeafletTest.vue

@@ -71,6 +71,7 @@
               :active="
                 (locationQueueData as Record<string, any>)[key]?.loc_id === currentLocation?.loc_id
               "
+              :index="index"
               :isLast="index != locationQueueOrder.length - 1"
               :start="(locationQueueData as Record<string, any>)[key]?.start ?? ''"
               :address="(locationQueueData as Record<string, any>)[key]?.address ?? ''"
@@ -191,7 +192,12 @@ import { useMarkerContextMenu } from '../composables/useMarkerContextMenu';
 import type { IRouter } from 'leaflet-routing-machine';
 
 // Types
-import type { coords, SearchControlProps, NominatimAddress } from 'components/models';
+import type {
+  coords,
+  SearchControlProps,
+  NominatimAddress,
+  routeSegments,
+} from 'components/models';
 import type { LeafletMouseEvent, Map } from 'leaflet';
 
 // Stores
@@ -200,7 +206,6 @@ import { useSocketioStore } from 'stores/socketio';
 import { useLeafletStore } from 'stores/leaflet';
 
 import { favorites } from 'constants/favorites';
-import { route } from 'quasar/wrappers';
 
 const leafletStore = useLeafletStore();
 const { zoom, center, markerLatLng, qLocDrawer, routeSet, routeSegments } =
@@ -214,14 +219,12 @@ const {
   locationQueueOrder,
   findMyUpdate,
   simulationState,
-  testMode,
 } = storeToRefs(socketStore);
 
 const $q = useQuasar();
 
 const mapRef = ref();
 const responseMessage = ref('');
-const routeLayer = ref(false);
 const miniState = ref(true);
 const loading = ref(false);
 const safeCenter = computed<[number, number]>(() => {
@@ -322,7 +325,7 @@ function routeToQueue() {
   if (routeSet.value.start && routeSet.value.end && routeSegments.value) {
     console.log('routeToQueue: start: ', routeSet.value.start);
     setLocation({ lat: routeSet.value.start.lat, lng: routeSet.value.start.lng }, 0);
-    routeSegments.value.forEach((segment: any, index: number) => {
+    routeSegments.value.forEach((segment: routeSegments) => {
       console.log('routeToQueue: segment: ', segment);
       setLocation(
         { lat: segment.toCoordinates.lat, lng: segment.toCoordinates.lng },

src/components/LocationMark.vue

@@ -3,7 +3,7 @@ import { storeToRefs } from 'pinia';
 import { useSocketioStore } from 'stores/socketio';
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 
-import { Icon, PinCirclePanel, PinStarPanel } from 'leaflet-extra-markers';
+import { Icon, PinCirclePanel } from 'leaflet-extra-markers';
 
 const socketStore = useSocketioStore();
 const { currentLocation, locationQueueOrder, simulationRunning } = storeToRefs(socketStore);
@@ -49,14 +49,15 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  index: {
+    type: Number,
+    default: 0,
+  }
 });
 
 // Define custom events that this component can emit
 const emit = defineEmits(['item-clicked']);
 
-const markerHTML = ref('');
-
-
 function itemClicked() {
   const param1 = props.loc_id;
   emit('item-clicked', param1);
@@ -108,7 +109,7 @@ const calculateDeltaT = computed(() => {
   }
   return delta;
 });
-
+/*
 const secondsToTime = computed(() => {
   const seconds = props.delay;
   const hours = Math.floor(seconds / 3600);
@@ -119,6 +120,10 @@ const secondsToTime = computed(() => {
     .padStart(2, '0')}`;
 });
 
+
+
+
+*/
 const humanReadableDateTime = (iso: string) => {
   return new Date(iso).toLocaleDateString('en-US', {
     //    year: 'numeric',
@@ -209,12 +214,14 @@ const myIndex = computed(() => {
 });
 
 const myUpdatedIndex = computed(() => {
-  return (myIndex.value - currentIndex.value)
+  return myIndex.value - currentIndex.value;
 });
 
+/*
 const markerIndex = computed(() => {
   return props.active ? '*' : myUpdatedIndex.value.toString();
 });
+ */
 
 const itemClass = computed(() => {
   if (myUpdatedIndex.value > 0) return 'future';
@@ -237,11 +244,6 @@ const iconElement = computed(() => {
   return customIcon.value.createIcon();
 });
 
-const iconHtml = computed(() => {
-  return iconElement.outerHTML;
-});
-
-
 onMounted(() => {
   const update = () => {
     currentTime.value = new Date();
@@ -268,9 +270,7 @@ onUnmounted(() => {
       <q-item-label caption lines="1" v-if="end && simulationRunning">
         end: {{ humanReadableDateTime(end) }}
       </q-item-label>
-      <q-item-label caption lines="1" v-else>
+      <q-item-label caption lines="1" v-else> delay: {{ delay }} seconds </q-item-label>
-        delay: {{ delay }} seconds
-      </q-item-label>
     </q-item-section>
     <q-item-section side>
       <q-item-label caption lines="1" v-if="simulationRunning">
@@ -282,7 +282,7 @@ onUnmounted(() => {
   <q-separator spaced inset v-if="isLast" />
 </template>
 
-<style lang="sass "scoped>
+<style lang="sass" scoped>
 .past
   color: gray
 </style>

src/components/models.ts

@@ -287,4 +287,10 @@ export interface NominatimAddress {
   country_code: string;
 }
 
-
+export interface routeSegments {
+  fromWaypoint: number;
+  toWaypoint: number,
+  distanceMeters: number,
+  timeSeconds: number,
+  toCoordinates: {lat: number, lng: number};
+}

src/layouts/MainLayout.vue

@@ -44,7 +44,6 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
-import { useRoute } from 'vue-router';
 
 import { useSocketioStore } from 'stores/socketio';