diff --git a/src/components/LeafletTest.vue b/src/components/LeafletTest.vue index a3b7572..948722d 100644 --- a/src/components/LeafletTest.vue +++ b/src/components/LeafletTest.vue @@ -71,6 +71,7 @@ :active=" (locationQueueData as Record)[key]?.loc_id === currentLocation?.loc_id " + :index="index" :isLast="index != locationQueueOrder.length - 1" :start="(locationQueueData as Record)[key]?.start ?? ''" :address="(locationQueueData as Record)[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 }, diff --git a/src/components/LocationMark.vue b/src/components/LocationMark.vue index e7a8bb5..4b13990 100644 --- a/src/components/LocationMark.vue +++ b/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(() => { end: {{ humanReadableDateTime(end) }} - - delay: {{ delay }} seconds - + delay: {{ delay }} seconds @@ -282,7 +282,7 @@ onUnmounted(() => { - diff --git a/src/components/models.ts b/src/components/models.ts index f18f3de..a918adf 100644 --- a/src/components/models.ts +++ b/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}; +} diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue index 283c98e..29c6b9e 100644 --- a/src/layouts/MainLayout.vue +++ b/src/layouts/MainLayout.vue @@ -44,7 +44,6 @@