lots of changes
This commit is contained in:
3410
package-lock.json
generated
3410
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -15,7 +15,8 @@
|
||||
"postinstall": "quasar prepare"
|
||||
},
|
||||
"dependencies": {
|
||||
"@quasar/extras": "^1.16.4",
|
||||
"@lucide/vue": "^1.7.0",
|
||||
"@quasar/extras": "^1.18.0",
|
||||
"@sentry/tracing": "^7.120.4",
|
||||
"@sentry/vue": "^10.47.0",
|
||||
"@vue-leaflet/vue-leaflet": "^0.10.1",
|
||||
@@ -27,14 +28,14 @@
|
||||
"leaflet-routing-machine": "^3.2.12",
|
||||
"openrouteservice-js": "^0.4.1",
|
||||
"pinia": "^3.0.4",
|
||||
"quasar": "^2.16.0",
|
||||
"quasar": "^2.19.3",
|
||||
"socket.io-client": "^4.8.3",
|
||||
"vue": "^3.5.22",
|
||||
"vue-router": "^5.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.14.0",
|
||||
"@quasar/app-vite": "^2.1.0",
|
||||
"@quasar/app-vite": "^2.6.0",
|
||||
"@types/leaflet": "^1.9.21",
|
||||
"@types/leaflet-contextmenu": "^1.4.4",
|
||||
"@types/node": "^20.5.9",
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
style="height: 600px; max-width: 800px; width: 100vw"
|
||||
class="rounded-borders"
|
||||
>
|
||||
<q-footer :class="$q.dark.isActive ? 'bg-primary' : 'bg-black'" style="height: 48px">
|
||||
<q-footer :class="$q.dark.isActive ? 'bg-primary' : 'bg-black'" class="z-top" style="height: 48px">
|
||||
<q-toolbar>
|
||||
<q-btn
|
||||
class="q-mr-sm"
|
||||
@@ -49,9 +49,9 @@
|
||||
</q-footer>
|
||||
<q-drawer
|
||||
v-model="qLocDrawer"
|
||||
behavior="mobile"
|
||||
show-if-above
|
||||
overlay
|
||||
:width="250"
|
||||
:width="300"
|
||||
side="left"
|
||||
:breakpoint="500"
|
||||
@mouseenter="miniState = false"
|
||||
@@ -64,25 +64,48 @@
|
||||
><span class="bold">Location Queue: </span> {{ simulationState }}</q-item-label
|
||||
>
|
||||
<q-separator />
|
||||
<LocationMark
|
||||
v-for="(key, index) in locationQueueOrder"
|
||||
<div
|
||||
v-for="(key, index) in locationQueueOrderFiltered"
|
||||
:key="key"
|
||||
@contextmenu.prevent="onDrawerContextMenu($event, key)"
|
||||
>
|
||||
<LocationItem
|
||||
:loc_id="key"
|
||||
:active="
|
||||
(locationQueueData as Record<string, any>)[key]?.loc_id === currentLocation?.loc_id
|
||||
(locationQueueData as Record<string, any>)[key]?.loc_id ===
|
||||
currentLocation?.loc_id
|
||||
"
|
||||
:isCurrentDelay="
|
||||
(locationQueueData as Record<string, any>)[key]?.loc_id ===
|
||||
locationQueueOrderFiltered[index + 1]
|
||||
"
|
||||
:index="index"
|
||||
:isLast="index != locationQueueOrder.length - 1"
|
||||
:isLast="index == locationQueueOrderFiltered.length - 1"
|
||||
:start="(locationQueueData as Record<string, any>)[key]?.start ?? ''"
|
||||
:address="(locationQueueData as Record<string, any>)[key]?.address ?? ''"
|
||||
:latitude="(locationQueueData as Record<string, any>)[key]?.latitude ?? 0"
|
||||
:longitude="(locationQueueData as Record<string, any>)[key]?.longitude ?? 0"
|
||||
:delay="(locationQueueData as Record<string, any>)[key]?.delay ?? 0"
|
||||
:end="(locationQueueData as Record<string, any>)[key]?.end ?? undefined"
|
||||
@item-clicked="zoomToCoods"
|
||||
:status="(locationQueueData as Record<string, any>)[key]?.status ?? undefined"
|
||||
@item-clicked="zoomToCoords"
|
||||
/>
|
||||
</div>
|
||||
</q-list>
|
||||
</q-scroll-area>
|
||||
<q-menu ref="contextMenu" context-menu touch-position>
|
||||
<q-list>
|
||||
<q-item clickable ripple v-close-popup @click="handleDrawerContextMenu('zoom')">
|
||||
<q-item-section label="Zoom to Location"> Zoom </q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable ripple v-close-popup @click="handleDrawerContextMenu('delete')">
|
||||
<q-item-section label="Zoom to Location"> Delete </q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable ripple v-close-popup @click="handleDrawerContextMenu('gp')">
|
||||
<q-item-section label="Zoom to Location"> Go Now </q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-drawer>
|
||||
|
||||
<q-page-container>
|
||||
@@ -151,7 +174,7 @@
|
||||
</L-Layer-Group>
|
||||
<L-Layer-Group v-if="locationQueueOrder">
|
||||
<L-Marker
|
||||
v-for="locid in locationQueueOrder"
|
||||
v-for="locid in locationQueueOrderFiltered"
|
||||
:key="locid"
|
||||
:icon="getCustomIcon(locid) as any"
|
||||
:lat-lng="[
|
||||
@@ -174,12 +197,16 @@
|
||||
v-if="findMyUpdate"
|
||||
:icon="fmIcon as any"
|
||||
:lat-lng="[findMyUpdate.latitude ?? 0, findMyUpdate.longitude ?? 0]"
|
||||
></L-Marker>
|
||||
>
|
||||
<L-Tooltip>
|
||||
{{ findMyTimePast }}
|
||||
</L-Tooltip>
|
||||
</L-Marker>
|
||||
<L-Circle
|
||||
:fillOpacity="0.5"
|
||||
:lat-lng="[findMyUpdate.latitude ?? 0, findMyUpdate.longitude ?? 0]"
|
||||
:radius="findMyUpdate.horizontalAccuracy"
|
||||
color="firebrick"
|
||||
color="#f5bb39"
|
||||
fillColor="indianred"
|
||||
></L-Circle>
|
||||
</L-Layer-Group>
|
||||
@@ -193,33 +220,43 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useQuasar } from 'quasar';
|
||||
import { computed, onMounted, reactive, ref } from 'vue';
|
||||
import { computed, markRaw, onMounted, onUnmounted, reactive, ref } from 'vue';
|
||||
|
||||
// Leaflet imports
|
||||
import { GeoSearchControl, OpenStreetMapProvider } from 'leaflet-geosearch';
|
||||
import 'leaflet-routing-machine/dist/leaflet-routing-machine.css';
|
||||
import { Icon, PinCirclePanel, PinStarPanel } from 'leaflet-extra-markers';
|
||||
import {
|
||||
Icon,
|
||||
PinCirclePanel,
|
||||
PinStarPanel,
|
||||
PinTriangle,
|
||||
PinSquare,
|
||||
ChipCircle,
|
||||
} from 'leaflet-extra-markers';
|
||||
import 'leaflet-geosearch/dist/geosearch.css';
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
import { LCircle, LLayerGroup, LMap, LMarker, LPopup, LTileLayer } from '@vue-leaflet/vue-leaflet';
|
||||
import {
|
||||
LCircle,
|
||||
LLayerGroup,
|
||||
LMap,
|
||||
LMarker,
|
||||
LPopup,
|
||||
LTileLayer,
|
||||
LTooltip,
|
||||
} from '@vue-leaflet/vue-leaflet';
|
||||
import * as LeafLet from 'leaflet';
|
||||
|
||||
// Custom Components
|
||||
import LRoutingMachine from 'components/LRoutingMachine.vue';
|
||||
import LocationMark from 'components/LocationMark.vue';
|
||||
import LocationItem from 'components/LocationItem.vue';
|
||||
import SetLocationDialog from 'components/SetLocationDialog.vue';
|
||||
import { customRouter } from 'functions/serviceURL';
|
||||
//import { reverseGeocodeRateLimited } from 'functions/reverseGeocode';
|
||||
import { useRoutingEvents } from '../composables/useRoutingEvents';
|
||||
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 } from 'components/models';
|
||||
import type { LeafletMouseEvent, Map } from 'leaflet';
|
||||
|
||||
// Stores
|
||||
@@ -245,6 +282,7 @@ const {
|
||||
|
||||
const $q = useQuasar();
|
||||
|
||||
const now = ref(Date.now());
|
||||
const mapRef = ref();
|
||||
const responseMessage = ref('');
|
||||
const miniState = ref(true);
|
||||
@@ -295,11 +333,52 @@ const fmIcon = new Icon({
|
||||
svg: PinCirclePanel,
|
||||
});
|
||||
|
||||
const startIcon = new Icon({
|
||||
color: '#006838',
|
||||
accentColor: 'rgba(0,0,0,0.25)',
|
||||
content: 'S',
|
||||
contentColor: 'white',
|
||||
scale: 1,
|
||||
svg: PinTriangle,
|
||||
});
|
||||
|
||||
const endIcon = new Icon({
|
||||
color: '#a23337',
|
||||
accentColor: 'rgba(0,0,0,0.25)',
|
||||
content: 'E',
|
||||
contentColor: 'white',
|
||||
scale: 1,
|
||||
svg: PinSquare,
|
||||
});
|
||||
|
||||
const intermediateIcon = new Icon({
|
||||
color: 'cornflowerblue',
|
||||
accentColor: 'rgba(0,0,0,0.25)',
|
||||
contentColor: 'white',
|
||||
svg: ChipCircle,
|
||||
scale: 1,
|
||||
});
|
||||
|
||||
type RoutingWaypoint = {
|
||||
latLng: LeafLet.LatLng;
|
||||
};
|
||||
|
||||
const locationQueueOrderFiltered = computed(() => {
|
||||
if (locationQueueOrder.value) {
|
||||
return locationQueueOrder.value.filter(
|
||||
(loc_id) => locationQueueData.value[loc_id]?.status !== 'deleted',
|
||||
);
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
});
|
||||
|
||||
const getCustomIcon = (locid: string) => {
|
||||
const currentIndex = currentLocation.value
|
||||
? locationQueueOrder.value.indexOf(currentLocation.value.loc_id)
|
||||
? locationQueueOrderFiltered.value.indexOf(currentLocation.value.loc_id)
|
||||
: 0;
|
||||
const locationIndex = locationQueueOrder.value.indexOf(locid);
|
||||
const locationIndex = locationQueueOrderFiltered.value.indexOf(locid);
|
||||
const updatedIndex = (locationIndex - currentIndex);
|
||||
if (currentLocation.value && currentLocation.value.loc_id === locid) {
|
||||
return new Icon({
|
||||
color: 'pink',
|
||||
@@ -310,24 +389,52 @@ const getCustomIcon = (locid: string) => {
|
||||
svg: PinStarPanel,
|
||||
});
|
||||
}
|
||||
if(updatedIndex > 0) {
|
||||
return new Icon({
|
||||
color: 'blue',
|
||||
accentColor: 'firebrick',
|
||||
content: (locationIndex - currentIndex).toString(),
|
||||
content: updatedIndex.toString(),
|
||||
contentColor: 'white',
|
||||
scale: 1,
|
||||
svg: PinCirclePanel,
|
||||
});
|
||||
} else {
|
||||
return new Icon({
|
||||
color: 'black',
|
||||
accentColor: 'grey',
|
||||
content: updatedIndex.toString(),
|
||||
contentColor: 'white',
|
||||
scale: 1,
|
||||
svg: PinCirclePanel,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const routingOptions = reactive<{
|
||||
waypoints: LeafLet.LatLng[];
|
||||
router: IRouter;
|
||||
routeWhileDragging: boolean;
|
||||
createMarker: (i: number, waypoint: RoutingWaypoint, n: number) => LeafLet.Marker | false;
|
||||
}>({
|
||||
waypoints: [],
|
||||
router: customRouter as unknown as IRouter,
|
||||
createMarker: function (i, waypoint, n) {
|
||||
let icon;
|
||||
if (i === 0) {
|
||||
icon = startIcon;
|
||||
} else if (i === n - 1) {
|
||||
icon = endIcon;
|
||||
} else {
|
||||
icon = intermediateIcon;
|
||||
}
|
||||
return LeafLet.marker(waypoint.latLng, {
|
||||
draggable: true,
|
||||
icon,
|
||||
contextmenu: false,
|
||||
contextmenuItems: [],
|
||||
});
|
||||
},
|
||||
routeWhileDragging: true,
|
||||
router: markRaw(customRouter),
|
||||
waypoints: [],
|
||||
});
|
||||
|
||||
const { handleRoutesFound } = useRoutingEvents();
|
||||
@@ -355,7 +462,7 @@ async function routeToQueue() {
|
||||
if (routeDirections.value && routeDirections.value.length > 0) {
|
||||
for (const direction of routeDirections.value) {
|
||||
if (direction.coordinates) {
|
||||
await setLocation(
|
||||
await addLocation(
|
||||
{ lat: Number(direction.coordinates.lat), lng: Number(direction.coordinates.lng) },
|
||||
direction.time,
|
||||
);
|
||||
@@ -415,6 +522,45 @@ const { clickedLatLng, handleMarkerClick, setStartRoute, setEndRoute } = useMark
|
||||
closeAllPopups,
|
||||
);
|
||||
|
||||
const selectedItem = ref();
|
||||
const contextMenu = ref();
|
||||
|
||||
function onDrawerContextMenu(e: MouseEvent, item: string) {
|
||||
console.log('onDrawerContextMenu: ', item);
|
||||
selectedItem.value = item;
|
||||
}
|
||||
function handleDrawerContextMenu(command: string) {
|
||||
let notType: string = 'positive';
|
||||
let notMsg: string = '';
|
||||
switch (command) {
|
||||
case 'zoom':
|
||||
zoomTo(selectedItem.value);
|
||||
break;
|
||||
case 'delete':
|
||||
try {
|
||||
const ack = socketStore.simulationControl('delete', 0, selectedItem.value);
|
||||
if (ack.sts === 'error') {
|
||||
notType = 'negative';
|
||||
}
|
||||
if (ack.msg) {
|
||||
notMsg = ack.msg;
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
notType = 'negative';
|
||||
if (error instanceof Error) {
|
||||
console.error('Simulation Command ERROR: ', error.message);
|
||||
notMsg = `Simulation Command Error: ${error.message}`;
|
||||
} else {
|
||||
console.error('Simulation Command Error: ', error);
|
||||
notMsg = 'Simulation Command Error: Unknow error';
|
||||
}
|
||||
} finally {
|
||||
$q.notify({ type: notType, message: notMsg });
|
||||
}
|
||||
}
|
||||
$q.notify(`context menu: ${command} ${selectedItem.value}`);
|
||||
}
|
||||
|
||||
function handleAddLocation() {
|
||||
if (clickedLatLng.value) {
|
||||
const latlng = clickedLatLng.value;
|
||||
@@ -431,8 +577,8 @@ function handleAddLocation() {
|
||||
// address: NomAddress,
|
||||
},
|
||||
})
|
||||
.onOk((delay: number) => {
|
||||
void setLocation({ lat: Number(latlng.lat), lng: Number(latlng.lng) }, delay);
|
||||
.onOk(({ delay, address }) => {
|
||||
void addLocation({ lat: Number(latlng.lat), lng: Number(latlng.lng) }, delay, address);
|
||||
console.log(
|
||||
'Confirmed location add: latitude: ' +
|
||||
latlng.lat +
|
||||
@@ -470,11 +616,18 @@ async function reverseGeocode(lat: number, lng: number) {
|
||||
}
|
||||
*/
|
||||
|
||||
async function setLocation(coords: coords, delay: number) {
|
||||
async function addLocation(coords: coords, delay: number, address?: string) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let notType: string = 'positive';
|
||||
try {
|
||||
const setCmdRsp = socketStore.simulationControl('add', delay, coords.lat, coords.lng);
|
||||
const setCmdRsp = socketStore.simulationControl(
|
||||
'add',
|
||||
coords.lat,
|
||||
coords.lng,
|
||||
'',
|
||||
delay,
|
||||
address,
|
||||
);
|
||||
if (setCmdRsp.msg) {
|
||||
responseMessage.value = setCmdRsp.msg;
|
||||
}
|
||||
@@ -500,7 +653,7 @@ async function setLocation(coords: coords, delay: number) {
|
||||
});
|
||||
}
|
||||
|
||||
function zoomToCoods(arg: string) {
|
||||
function zoomToCoords(arg: string) {
|
||||
const item = locationQueueData.value[arg];
|
||||
if (!item || item.latitude == null || item.longitude == null) {
|
||||
return;
|
||||
@@ -510,6 +663,28 @@ function zoomToCoods(arg: string) {
|
||||
qLocDrawer.value = false;
|
||||
}
|
||||
|
||||
const findMyTimePast = computed(() => {
|
||||
if (findMyUpdate.value) {
|
||||
const diffInMs = Math.abs(now.value - findMyUpdate.value.timeStamp);
|
||||
const seconds = Math.floor((diffInMs / 1000) % 60);
|
||||
const minutes = Math.floor((diffInMs / (1000 * 60)) % 60);
|
||||
const hours = Math.floor((diffInMs / (1000 * 60 * 60)) % 24);
|
||||
const days = Math.floor(diffInMs / (1000 * 60 * 60 * 24));
|
||||
|
||||
if (days > 1) {
|
||||
return days + ' days, ' + hours + ' hours, ' + minutes + 'minutes, ' + seconds + 'seconds ago'
|
||||
} else if (hours > 1) {
|
||||
return hours + ' hours, ' + minutes + 'minutes, ' + seconds + 'seconds ago'
|
||||
} else if (minutes > 1) {
|
||||
return minutes + ' minutes, ' + seconds + ' seconds ago';
|
||||
} else {
|
||||
return seconds + ' seconds ago'
|
||||
}
|
||||
} else {
|
||||
return 'Find My Location not available';
|
||||
}
|
||||
});
|
||||
|
||||
function zoomTo(loc: string) {
|
||||
switch (loc) {
|
||||
case 'fmLoc':
|
||||
@@ -543,6 +718,7 @@ function zoomTo(loc: string) {
|
||||
}
|
||||
}
|
||||
|
||||
const timer = ref();
|
||||
onMounted(() => {
|
||||
if (findMyUpdate.value && findMyUpdate.value.latitude && findMyUpdate.value.longitude) {
|
||||
leafletStore.setCenter(findMyUpdate.value.latitude, findMyUpdate.value.longitude);
|
||||
@@ -551,6 +727,12 @@ onMounted(() => {
|
||||
leafletStore.setCenter(favorites.home.coords.lat, favorites.home.coords.lng);
|
||||
}
|
||||
socketStore.requestUpdate();
|
||||
timer.value = setInterval(() => {
|
||||
now.value = Date.now();
|
||||
}, 1000);
|
||||
});
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer.value);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -3,13 +3,13 @@ import { storeToRefs } from 'pinia';
|
||||
import { useSocketioStore } from 'stores/socketio';
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue';
|
||||
import type { NominatimResponse } from 'components/models';
|
||||
|
||||
import { Icon, PinCirclePanel } from 'leaflet-extra-markers';
|
||||
|
||||
import FormattedAddress from 'components/FormattedAddress.vue';
|
||||
|
||||
const socketStore = useSocketioStore();
|
||||
const { currentLocation, locationQueueOrder, simulationRunning } = storeToRefs(socketStore);
|
||||
const { currentLocation, locationQueueOrder, locationQueueData, simulationRunning } =
|
||||
storeToRefs(socketStore);
|
||||
|
||||
const props = defineProps({
|
||||
address: {
|
||||
@@ -44,6 +44,10 @@ const props = defineProps({
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isCurrentDelay: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
loc_id: {
|
||||
type: String,
|
||||
required: true,
|
||||
@@ -56,6 +60,10 @@ const props = defineProps({
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
status: {
|
||||
type: String,
|
||||
default: 'queued',
|
||||
},
|
||||
});
|
||||
|
||||
// Define custom events that this component can emit
|
||||
@@ -69,8 +77,30 @@ function itemClicked() {
|
||||
const currentTime = ref(new Date());
|
||||
let timerId: number;
|
||||
|
||||
const calculateDeltaT = computed(() => {
|
||||
let delta = '';
|
||||
function formatInAgo(seconds: number) {
|
||||
let delta;
|
||||
if (seconds === 0) {
|
||||
delta = 'now';
|
||||
}
|
||||
if (seconds > 0) {
|
||||
const minutes: number = Math.floor(seconds / 60);
|
||||
const hours: number = Math.floor(minutes / 60);
|
||||
const days: number = Math.floor(hours / 24);
|
||||
if (days > 0) {
|
||||
delta = `in ${days} day${days > 1 ? 's' : ''}`;
|
||||
} else if (hours > 0) {
|
||||
delta = `in ${hours} hour${hours > 1 ? 's' : ''}`;
|
||||
} else if (minutes > 0) {
|
||||
delta = `in ${minutes} minute${minutes > 1 ? 's' : ''}`;
|
||||
} else {
|
||||
delta = `in ${seconds} second${seconds > 1 ? 's' : ''}`;
|
||||
}
|
||||
}
|
||||
return delta;
|
||||
}
|
||||
|
||||
const calculateDeltaTime = computed(() => {
|
||||
let delta;
|
||||
if (props.active) {
|
||||
delta = 'now';
|
||||
} else if (props.end && props.end !== '') {
|
||||
@@ -85,30 +115,24 @@ const calculateDeltaT = computed(() => {
|
||||
if (days > 0) {
|
||||
delta = `${days} day${days > 1 ? 's' : ''} ago`;
|
||||
} else if (hours > 0) {
|
||||
delta = `${hours} hour${hours > 1 ? 's' : ''} ago`;
|
||||
delta = `${hours} hr${hours > 1 ? 's' : ''} ago`;
|
||||
} else if (minutes > 0) {
|
||||
delta = `${minutes} minute${minutes > 1 ? 's' : ''} ago`;
|
||||
delta = `${minutes} min${minutes > 1 ? 's' : ''} ago`;
|
||||
} else {
|
||||
delta = `${seconds} second${seconds > 1 ? 's' : ''} ago`;
|
||||
delta = `${seconds} sec${seconds > 1 ? 's' : ''} ago`;
|
||||
}
|
||||
} else {
|
||||
const futureTime: Date = new Date(props.start);
|
||||
const nowMs: number = currentTime.value.getTime();
|
||||
const futureMs: number = futureTime.getTime();
|
||||
const diffMs: number = Math.abs(nowMs - futureMs);
|
||||
const seconds: number = Math.floor(diffMs / 1000);
|
||||
const minutes: number = Math.floor(seconds / 60);
|
||||
const hours: number = Math.floor(minutes / 60);
|
||||
const days: number = Math.floor(hours / 24);
|
||||
if (days > 0) {
|
||||
delta = `in ${days} day${days > 1 ? 's' : ''}`;
|
||||
} else if (hours > 0) {
|
||||
delta = `in ${hours} hour${hours > 1 ? 's' : ''}`;
|
||||
} else if (minutes > 0) {
|
||||
delta = `in ${minutes} minute${minutes > 1 ? 's' : ''}`;
|
||||
let startSlice;
|
||||
if (currentIndex.value > 0) {
|
||||
startSlice = currentIndex.value;
|
||||
} else {
|
||||
delta = `in ${seconds} second${seconds > 1 ? 's' : ''}`;
|
||||
startSlice = 0;
|
||||
}
|
||||
const waitingFor = locationQueueOrder.value.slice(startSlice, myIndex.value + 1);
|
||||
const willWait = waitingFor.reduce((sum, loc_id) => {
|
||||
return sum + (locationQueueData.value[loc_id]?.delay || 0);
|
||||
}, 0);
|
||||
delta = formatInAgo(willWait);
|
||||
}
|
||||
return delta;
|
||||
});
|
||||
@@ -124,8 +148,20 @@ const secondsToTime = computed(() => {
|
||||
});
|
||||
|
||||
|
||||
const secondsToTime = (seconds: number) => {
|
||||
const hours = Math.floor(seconds / 3600);
|
||||
const minutes = Math.floor((seconds % 3600) / 60);
|
||||
const remainingSeconds = seconds % 60;
|
||||
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${remainingSeconds
|
||||
.toString()
|
||||
.padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
|
||||
const timeToSeconds = (timeIn: string) => {
|
||||
const a = timeIn.split(':');
|
||||
const seconds = +a[0] * 60 * 60 + +a[1] * 60 + +a[2];
|
||||
return seconds;
|
||||
};
|
||||
*/
|
||||
const humanReadableDateTime = (iso: string) => {
|
||||
return new Date(iso).toLocaleDateString('en-US', {
|
||||
@@ -234,6 +270,7 @@ const itemClass = computed(() => {
|
||||
});
|
||||
|
||||
const customIcon = computed(() => {
|
||||
if (myUpdatedIndex.value > 0) {
|
||||
return new Icon({
|
||||
color: 'blue',
|
||||
accentColor: 'firebrick',
|
||||
@@ -242,6 +279,16 @@ const customIcon = computed(() => {
|
||||
scale: 1,
|
||||
svg: PinCirclePanel,
|
||||
});
|
||||
} else {
|
||||
return new Icon({
|
||||
color: 'black',
|
||||
accentColor: 'grey',
|
||||
content: myUpdatedIndex.value.toString(),
|
||||
contentColor: 'white',
|
||||
scale: 1,
|
||||
svg: PinCirclePanel,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const iconElement = computed(() => {
|
||||
@@ -256,14 +303,70 @@ onMounted(() => {
|
||||
timerId = requestAnimationFrame(update);
|
||||
});
|
||||
|
||||
const delayValue = computed({
|
||||
get: () => props.delay,
|
||||
set: (val) => socketStore.updateLocationMark(props.loc_id, 'delay', val),
|
||||
});
|
||||
|
||||
const getDelayAttrs = computed(() => {
|
||||
if (props.delay <= 260) {
|
||||
return { units: 's', delay: props.delay, step: 10, max: 300 } as const;
|
||||
} else if (props.delay <= 3600) {
|
||||
return { units: 'm', delay: props.delay / 60, step: 60, max: 4500 } as const;
|
||||
} else {
|
||||
return { units: 'h', delay: props.delay / 3600, step: 3600, max: 21600 } as const;
|
||||
}
|
||||
});
|
||||
|
||||
const displayDelay = computed(() => {
|
||||
return props.index > currentIndex.value;
|
||||
});
|
||||
|
||||
const delayActive = computed(() => {
|
||||
return props.index === currentIndex.value + 1;
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
cancelAnimationFrame(timerId);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-item v-ripple clickable :active="active" @click="itemClicked" :class="itemClass">
|
||||
<q-item v-if="displayDelay" :active="delayActive">
|
||||
<q-item-section avatar>
|
||||
<q-icon name="access_time" color="secondary" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-knob
|
||||
show-value
|
||||
v-model="delayValue"
|
||||
size="50px"
|
||||
color="secondary"
|
||||
track-color="dark-page"
|
||||
:step="getDelayAttrs.step"
|
||||
:max="getDelayAttrs.max"
|
||||
>
|
||||
{{ getDelayAttrs.delay }} {{ getDelayAttrs.units }}
|
||||
</q-knob>
|
||||
<!--
|
||||
<q-slider
|
||||
v-model="delayValue"
|
||||
:min="0"
|
||||
:step="getDelayAttrs.step"
|
||||
:max="getDelayAttrs.max"
|
||||
label
|
||||
markers
|
||||
snap
|
||||
label-always
|
||||
:label-value="getDelayAttrs.delay + getDelayAttrs.units"
|
||||
:marker-labels="markerLabel"
|
||||
color="primary"
|
||||
/>
|
||||
-->
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-separator inset spaced v-if="displayDelay" />
|
||||
<q-item v-ripple clickable :active="active" @click="itemClicked" :class="itemClass">
|
||||
<q-item-section style="width: 70%">
|
||||
<q-item-label>
|
||||
<FormattedAddress :address="props.address" />
|
||||
<q-tooltip> {{ latitude }}, {{ longitude }} </q-tooltip>
|
||||
@@ -276,16 +379,25 @@ onUnmounted(() => {
|
||||
</q-item-label>
|
||||
<q-item-label caption lines="1" v-else> delay: {{ delay }} seconds </q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-item-section
|
||||
side
|
||||
style="
|
||||
padding: 30px 0 0 10px;
|
||||
height: 100%;
|
||||
width: 35%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<q-icon v-html="iconElement.outerHTML" />
|
||||
<q-item-label caption lines="1" v-if="simulationRunning">
|
||||
{{ calculateDeltaT }}
|
||||
{{ calculateDeltaTime }}
|
||||
</q-item-label>
|
||||
<q-icon class="q-mt-lg" v-html="iconElement.outerHTML" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-separator spaced inset v-if="isLast" />
|
||||
<q-separator spaced inset v-if="!isLast" />
|
||||
</template>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.past
|
||||
color: gray
|
||||
@@ -19,8 +19,14 @@ const leafletStore = useLeafletStore();
|
||||
const socketStore = useSocketioStore();
|
||||
const { center, markerLatLng, zoom } = storeToRefs(leafletStore);
|
||||
|
||||
const { simulationRunning, simulationState, simulationQueueLength, icloudMonitor, testMode } =
|
||||
storeToRefs(socketStore);
|
||||
const {
|
||||
simulationRunning,
|
||||
simulationState,
|
||||
simulationQueueLength,
|
||||
icloudMonitor,
|
||||
testMode,
|
||||
gpsNoise,
|
||||
} = storeToRefs(socketStore);
|
||||
|
||||
const menuOpen = ref(false);
|
||||
const favoritesMap = favorites as Record<string, unknown>;
|
||||
@@ -67,6 +73,13 @@ function handleTestToggle() {
|
||||
}
|
||||
}
|
||||
|
||||
function handleGpsNoiseToggle() {
|
||||
const response = socketStore.simulationControl('gps-noise');
|
||||
if (response.sts === 'error') {
|
||||
$q.notify({ type: 'negative', message: response.msg ?? 'Failed to toggle test mode' });
|
||||
}
|
||||
}
|
||||
|
||||
function handleControlClick(cmdAttr: ControlAction) {
|
||||
if (cmdAttr.cnfrm) {
|
||||
$q.dialog({
|
||||
@@ -216,7 +229,7 @@ function handleControlClick(cmdAttr: ControlAction) {
|
||||
@click="handleFavClick(favObj.coords)"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-avatar :icon="favObj.icon" color="primary" text-color="white" />
|
||||
<q-avatar :icon="favObj.icon" color="secondary" size="sm" text-color="black" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ favObj.name }}</q-item-label>
|
||||
@@ -224,7 +237,7 @@ function handleControlClick(cmdAttr: ControlAction) {
|
||||
</q-item>
|
||||
<q-item v-else-if="hasSubitems(favObj)" clickable v-ripple dense dark>
|
||||
<q-item-section avatar>
|
||||
<q-avatar :icon="favObj.icon" color="primary" text-color="white" />
|
||||
<q-avatar :icon="favObj.icon" color="secondary" size="sm" text-color="black" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ favObj.name }}</q-item-label>
|
||||
@@ -245,7 +258,7 @@ function handleControlClick(cmdAttr: ControlAction) {
|
||||
@click="handleFavClick(favSubObj.coords)"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-avatar :icon="favSubObj.icon" color="primary" text-color="white" />
|
||||
<q-avatar :icon="favSubObj.icon" color="secondary" size="sm" text-color="black" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ favSubObj.name }}</q-item-label>
|
||||
@@ -276,6 +289,21 @@ function handleControlClick(cmdAttr: ControlAction) {
|
||||
<q-item-label>Test Mode</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item dense dark tag="label" v-ripple>
|
||||
<q-item-section avatar>
|
||||
<q-toggle
|
||||
v-model="gpsNoise"
|
||||
size="sm"
|
||||
color="brown"
|
||||
@update:model-value="handleGpsNoiseToggle"
|
||||
dark
|
||||
dense
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>GPS Noise</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
dense
|
||||
dark
|
||||
|
||||
@@ -66,7 +66,7 @@ onMounted(async () => {
|
||||
});
|
||||
|
||||
function onOkClick() {
|
||||
onDialogOK(delay.value);
|
||||
onDialogOK({delay: delay.value, address: address.value});
|
||||
}
|
||||
</script>
|
||||
<style lang="sass" scoped>
|
||||
|
||||
@@ -48,6 +48,7 @@ watch(
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="flex flex-center col q-ma-lg q-gutter-md">
|
||||
|
||||
@@ -3,13 +3,8 @@ import { useSocketioStore } from 'stores/socketio';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
const socketioStore = useSocketioStore();
|
||||
const {
|
||||
sockConnected,
|
||||
deviceConnected,
|
||||
tunnelConnected,
|
||||
simulationRunning,
|
||||
icloudMonitor,
|
||||
} = storeToRefs(socketioStore);
|
||||
const { sockConnected, deviceConnected, tunnelConnected, simulationRunning, icloudMonitor, testMode } =
|
||||
storeToRefs(socketioStore);
|
||||
function statusDevColor(state: string | boolean): string {
|
||||
if (typeof state === 'boolean') {
|
||||
return state ? 'green' : 'red';
|
||||
@@ -29,53 +24,57 @@ function statusDevColor(state: string | boolean): string {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-toolbar class="bg-primary text-white">
|
||||
<q-toolbar :class="testMode ? 'bg-warning text-black' : 'bg-primary text-white'">
|
||||
<div class="flex col q-gutter-md align-center justify-start content-center">
|
||||
<q-space />
|
||||
<div style="width: 80vw" class="flex justify-end">
|
||||
<q-btn
|
||||
size="sm"
|
||||
rounded
|
||||
push
|
||||
size="sm"
|
||||
icon="settings"
|
||||
class="q-mr-sm"
|
||||
@click="socketioStore.toggleSock()"
|
||||
>
|
||||
<q-badge :color="statusDevColor(sockConnected)" rounded floating class="q-mr-sm" />
|
||||
</q-btn>
|
||||
<q-btn size="sm" rounded icon="phone_iphone" class="q-mr-sm">
|
||||
<q-badge
|
||||
:color="statusDevColor(deviceConnected)"
|
||||
@click="socketioStore.requestUpdate()"
|
||||
<q-btn
|
||||
rounded
|
||||
floating
|
||||
push
|
||||
size="sm"
|
||||
icon="phone_iphone"
|
||||
class="q-mr-sm"
|
||||
/>
|
||||
@click="socketioStore.requestUpdate()"
|
||||
>
|
||||
<q-badge :color="statusDevColor(deviceConnected)" rounded floating class="q-mr-sm" />
|
||||
</q-btn>
|
||||
<q-btn
|
||||
size="sm"
|
||||
@click="socketioStore.requestUpdate()"
|
||||
rounded
|
||||
push
|
||||
size="sm"
|
||||
icon="subway"
|
||||
class="q-mr-sm"
|
||||
@click="socketioStore.requestUpdate()"
|
||||
>
|
||||
<q-badge :color="statusDevColor(tunnelConnected)" rounded floating class="q-mr-sm" />
|
||||
</q-btn>
|
||||
<q-btn
|
||||
size="sm"
|
||||
@click="socketioStore.requestUpdate()"
|
||||
rounded
|
||||
push
|
||||
size="sm"
|
||||
icon="location_on"
|
||||
class="q-mr-sm"
|
||||
@click="socketioStore.requestUpdate()"
|
||||
>
|
||||
<q-badge :color="statusDevColor(simulationRunning)" rounded floating class="q-mr-sm" />
|
||||
</q-btn>
|
||||
<q-btn
|
||||
size="sm"
|
||||
@click="socketioStore.requestUpdate()"
|
||||
rounded
|
||||
push
|
||||
size="sm"
|
||||
icon="cloud"
|
||||
class="q-mr-sm"
|
||||
@click="socketioStore.icloudMonitorControl('refresh')"
|
||||
>
|
||||
<q-badge :color="statusDevColor(icloudMonitor)" rounded floating class="q-mr-sm" />
|
||||
</q-btn>
|
||||
|
||||
@@ -9,7 +9,10 @@ export type SimulationCommands =
|
||||
| 'clear'
|
||||
| 'end'
|
||||
| 'add'
|
||||
| 'test-mode';
|
||||
| 'test-mode'
|
||||
| 'delete'
|
||||
| 'next'
|
||||
| 'gps-noise';
|
||||
|
||||
export type DeviceCommands = 'start_tunnel' | 'stop_tunnel' | 'shutdown' | 'reboot';
|
||||
|
||||
@@ -43,14 +46,21 @@ export interface DevCtrlAttr {
|
||||
export interface LocationQueue {
|
||||
[key: string]: LocationMark;
|
||||
}
|
||||
export interface LocationMarkUpdateResponse {
|
||||
command_status: string;
|
||||
command: string;
|
||||
message: string;
|
||||
data: LocationMark;
|
||||
}
|
||||
|
||||
interface LocationMark {
|
||||
export interface LocationMark {
|
||||
loc_id: string;
|
||||
latitude: number | undefined | null;
|
||||
longitude: number | undefined | null;
|
||||
address?: string | undefined | null;
|
||||
delay?: number | undefined | null;
|
||||
start: string | undefined | null;
|
||||
status: string | undefined | null;
|
||||
end?: string | undefined | null;
|
||||
}
|
||||
|
||||
@@ -59,6 +69,7 @@ interface LocationMark {
|
||||
export interface ServerToClientEvents {
|
||||
noArg: () => void;
|
||||
withAck: (a: string, callback: (b: number) => void) => void;
|
||||
test_prompt: (callback: (s: string) => void) => void;
|
||||
simulation_status: (c: SimulationStatus) => void;
|
||||
status: (d: StatusUpdate) => void;
|
||||
device_status: (d: DeviceStatus) => void;
|
||||
@@ -66,6 +77,14 @@ export interface ServerToClientEvents {
|
||||
message: (e: string) => void;
|
||||
icloud_2fa_request: (callback: (e: number) => void) => void;
|
||||
fmf_update: (d: FindMyUpdate) => void;
|
||||
queue_data_update: (d: QueueData) => void;
|
||||
location_item_update: (d: LocationItemUpdate) => void;
|
||||
}
|
||||
|
||||
|
||||
export interface LocationItemUpdate {
|
||||
loc_id: string;
|
||||
data: LocationMark;
|
||||
}
|
||||
|
||||
export interface SimulationStatus {
|
||||
@@ -78,6 +97,16 @@ export interface SimulationStatus {
|
||||
next_move?: number;
|
||||
}
|
||||
|
||||
export interface QueueData {
|
||||
simulation_queue: {
|
||||
active: boolean;
|
||||
data: LocationQueue;
|
||||
order: string[];
|
||||
state: string | undefined | null;
|
||||
worker_task: string | undefined | null;
|
||||
}
|
||||
}
|
||||
|
||||
export interface StatusUpdate {
|
||||
connected_clients: { [key: string]: string };
|
||||
current_location: {
|
||||
@@ -103,6 +132,7 @@ export interface StatusUpdate {
|
||||
[key: string]: LocationMark;
|
||||
};
|
||||
order: string[];
|
||||
gps_noise: boolean;
|
||||
state: string | undefined | null;
|
||||
worker_task: string | undefined | null;
|
||||
};
|
||||
@@ -167,12 +197,15 @@ export interface FindMyUpdate {
|
||||
export interface ClientToServerEvents {
|
||||
message: (e: string, callback: (b: boolean, r: string) => void) => void;
|
||||
request_update: (callback: (response: StatusUpdate) => void) => void;
|
||||
send_test_prompt: (p: string, callback: (response: string) => void) => void;
|
||||
simulation_control: (
|
||||
args: {
|
||||
command: SimulationCommands;
|
||||
latitude?: number | null | undefined;
|
||||
longitude?: number | null | undefined;
|
||||
delay?: number | undefined;
|
||||
delay?: number | null | undefined;
|
||||
loc_id?: string | null | undefined;
|
||||
address?: string | null | undefined;
|
||||
},
|
||||
callback: (response: SimulationControlResponse) => void,
|
||||
) => void;
|
||||
@@ -196,18 +229,40 @@ export interface ClientToServerEvents {
|
||||
},
|
||||
callback?: (response: iCloudMonitorResponse) => void,
|
||||
) => void;
|
||||
location_item_update: (
|
||||
args: {
|
||||
loc_id: string;
|
||||
key: string;
|
||||
value: string | number;
|
||||
},
|
||||
callback?: (response: LocationMarkUpdateResponse) => void,
|
||||
) => void;
|
||||
}
|
||||
|
||||
export interface SimulationControlResponse {
|
||||
status: string;
|
||||
command_status: string;
|
||||
command: SimulationCommands;
|
||||
loc_id: string;
|
||||
command_class: string;
|
||||
data?: SimulationControlResponseData | undefined | null;
|
||||
simulation_noise?: boolean;
|
||||
message?: string | undefined;
|
||||
|
||||
}
|
||||
|
||||
interface SimulationControlResponseData {
|
||||
simulation_active?: boolean;
|
||||
simulation_queue_state?: string;
|
||||
loc_id?: string;
|
||||
latitude?: number | undefined | null;
|
||||
longitude?: number | undefined | null;
|
||||
delay?: number | undefined | null;
|
||||
start_time?: string | undefined | null;
|
||||
end_time?: string | undefined | null;
|
||||
status?: string | undefined | null;
|
||||
next_move?: number | undefined | null;
|
||||
address?: string | undefined | null;
|
||||
simulation_noise?: boolean;
|
||||
test_mode?: boolean;
|
||||
}
|
||||
|
||||
interface DeviceControlResponse {
|
||||
@@ -217,11 +272,13 @@ interface DeviceControlResponse {
|
||||
}
|
||||
|
||||
export interface iCloudMonitorResponse {
|
||||
status: string;
|
||||
command_status: string;
|
||||
command: string;
|
||||
command_class: string;
|
||||
icloud_monitor_enabled?: boolean | undefined | null;
|
||||
icloud_monitor_running?: boolean | undefined | null;
|
||||
message?: string | undefined | null;
|
||||
error?: string | undefined | null;
|
||||
}
|
||||
|
||||
// END CLIENT TO SERVER
|
||||
|
||||
@@ -12,14 +12,14 @@
|
||||
// to match your app's branding.
|
||||
// Tip: Use the "Theme Builder" on Quasar's documentation website.
|
||||
|
||||
$primary: #02006c;
|
||||
$secondary: #010057;
|
||||
$accent: #9c27b0;
|
||||
$primary: #161B36;
|
||||
$secondary: #8FA9BF;
|
||||
$accent: #5a728a;
|
||||
|
||||
$dark: #1d1d1d;
|
||||
$dark-page: #03002e;
|
||||
$dark-page: #0B1026;
|
||||
|
||||
$positive: #21ba45;
|
||||
$negative: #c10015;
|
||||
$info: #31ccec;
|
||||
$warning: #f2c037;
|
||||
$positive: #4CAF50;
|
||||
$negative: #EF5350;
|
||||
$info: #42A5F5;
|
||||
$warning: #FFCA28;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { Utilities } from '@vue-leaflet/vue-leaflet';
|
||||
import type { PropType } from 'vue';
|
||||
import type { IRouter, LineOptions } from 'leaflet-routing-machine';
|
||||
import type * as L from 'leaflet';
|
||||
|
||||
export interface RoutingControlProps {
|
||||
waypoints: unknown[];
|
||||
@@ -9,6 +10,9 @@ export interface RoutingControlProps {
|
||||
fitSelectedRoutes?: string | boolean;
|
||||
lineOptions?: LineOptions | undefined;
|
||||
routeLine?: ((route: unknown) => unknown) | undefined;
|
||||
createMarker?:
|
||||
| ((i: number, waypoint: { latLng: L.LatLng }, n: number) => L.Marker | false)
|
||||
| undefined;
|
||||
autoRoute?: boolean;
|
||||
routeWhileDragging?: boolean;
|
||||
routeDragInterval?: number;
|
||||
@@ -43,6 +47,12 @@ export const routingControlProps = {
|
||||
type: Function as PropType<((route: unknown) => unknown) | undefined>,
|
||||
default: undefined,
|
||||
},
|
||||
createMarker: {
|
||||
type: Function as PropType<
|
||||
((i: number, waypoint: { latLng: L.LatLng }, n: number) => L.Marker | false) | undefined
|
||||
>,
|
||||
default: undefined,
|
||||
},
|
||||
autoRoute: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
|
||||
@@ -4,7 +4,7 @@ export const customRouter = openrouteserviceV2({
|
||||
api_key: '',
|
||||
profile: 'driving-car',
|
||||
geometry_simplify: true,
|
||||
host: '/api/proxy/ors/',
|
||||
host: '/api/ors/proxy/ors',
|
||||
});
|
||||
|
||||
//export const customRouter = L.Routing.osrmv1({
|
||||
|
||||
@@ -50,8 +50,9 @@ import { useSocketioStore } from 'stores/socketio';
|
||||
import MenuBar from 'components/MenuBar.vue';
|
||||
import StatusBar from 'components/StatusBar.vue';
|
||||
|
||||
const socketioStore = useSocketioStore();
|
||||
const socketStore = useSocketioStore();
|
||||
const drawer = ref(false);
|
||||
|
||||
/*
|
||||
const route = useRoute();
|
||||
|
||||
@@ -114,7 +115,7 @@ const menuList = [
|
||||
];
|
||||
*/
|
||||
onMounted(() => {
|
||||
socketioStore.bindEvents();
|
||||
socketioStore.connect();
|
||||
socketStore.bindEvents();
|
||||
socketStore.connect();
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -20,7 +20,7 @@ const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: 'test',
|
||||
name: 'Test',
|
||||
component: () => import('pages/TestPage.vue')
|
||||
component: () => import('pages/TestPage.vue'),
|
||||
},
|
||||
{
|
||||
path: 'device-info',
|
||||
|
||||
@@ -12,6 +12,8 @@ import type {
|
||||
FindMyUpdate,
|
||||
iCloudMonitorResponse,
|
||||
SimulationStatus,
|
||||
LocationMarkUpdateResponse,
|
||||
LocationItemUpdate,
|
||||
} from 'components/models';
|
||||
|
||||
const $q = useQuasar();
|
||||
@@ -23,6 +25,7 @@ export const useSocketioStore = defineStore('socketio', {
|
||||
sockConnected: false as boolean,
|
||||
socketID: null as string | null | undefined,
|
||||
testMode: null as boolean | undefined | null,
|
||||
gpsNoise: null as boolean | undefined | null,
|
||||
deviceConnected: false as boolean,
|
||||
tunnelConnected: false as boolean,
|
||||
simulationRunning: false as boolean | string,
|
||||
@@ -152,7 +155,10 @@ export const useSocketioStore = defineStore('socketio', {
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
socket.on('location_item_update', (inData: LocationItemUpdate): void => {
|
||||
console.log('Location item update received, data: ', inData);
|
||||
this.locationQueueData[inData.loc_id] = inData.data;
|
||||
});
|
||||
socket.onAny((eventName, ...args) => {
|
||||
console.log('Event received: ', eventName, ' Args: ', args, '');
|
||||
/* if (serverToClientKnownEvents.includes(eventName)) {
|
||||
@@ -215,8 +221,8 @@ export const useSocketioStore = defineStore('socketio', {
|
||||
'icloud_monitor_control',
|
||||
{ command: 'start' },
|
||||
(response: iCloudMonitorResponse) => {
|
||||
fnctRtn.sts = response.status;
|
||||
if (response.status == 'error') {
|
||||
fnctRtn.sts = response.command_status;
|
||||
if (response.command_status == 'ERROR') {
|
||||
if (response.message) {
|
||||
if (debugLog) {
|
||||
console.log(response.message);
|
||||
@@ -227,7 +233,7 @@ export const useSocketioStore = defineStore('socketio', {
|
||||
}
|
||||
throw new Error(fnctRtn.msg);
|
||||
} else {
|
||||
fnctRtn = { sts: 'OK', msg: 'iCloud Monitor: ' + response.status };
|
||||
fnctRtn = { sts: 'OK', msg: 'iCloud Monitor: ' + response.command_status };
|
||||
this.icloudMonitor = true;
|
||||
}
|
||||
},
|
||||
@@ -248,8 +254,8 @@ export const useSocketioStore = defineStore('socketio', {
|
||||
'icloud_monitor_control',
|
||||
{ command: 'stop' },
|
||||
(response: iCloudMonitorResponse) => {
|
||||
fnctRtn.sts = response.status;
|
||||
if (response.status == 'error') {
|
||||
fnctRtn.sts = response.command_status;
|
||||
if (response.command_status == 'ERROR') {
|
||||
if (response.message) {
|
||||
if (debugLog) {
|
||||
console.log(response.message);
|
||||
@@ -260,7 +266,7 @@ export const useSocketioStore = defineStore('socketio', {
|
||||
}
|
||||
throw new Error(fnctRtn.msg);
|
||||
} else {
|
||||
fnctRtn = { sts: 'OK', msg: 'iCloud Monitor: ' + response.status };
|
||||
fnctRtn = { sts: 'OK', msg: 'iCloud Monitor: ' + response.command_status };
|
||||
this.icloudMonitor = false;
|
||||
}
|
||||
},
|
||||
@@ -270,15 +276,43 @@ export const useSocketioStore = defineStore('socketio', {
|
||||
if (debugLog) {
|
||||
console.log('socketStore: got command: icloudMonitor status');
|
||||
}
|
||||
socket.emit(
|
||||
'icloud_monitor_control',
|
||||
{ command: 'get' },
|
||||
(response: iCloudMonitorResponse) => {
|
||||
fnctRtn.sts = response.command_status;
|
||||
if (response.command_status == 'error') {
|
||||
if (response.message) {
|
||||
if (debugLog) {
|
||||
console.log('Emitting icloud_monitor_control: status');
|
||||
console.log(response.message);
|
||||
}
|
||||
fnctRtn.msg = response.message;
|
||||
} else {
|
||||
fnctRtn.msg = 'Error';
|
||||
}
|
||||
throw new Error(fnctRtn.msg);
|
||||
} else {
|
||||
fnctRtn = {
|
||||
sts: 'OK',
|
||||
msg: 'iCloud Location Requested',
|
||||
};
|
||||
}
|
||||
this.icloudMonitor = !!(
|
||||
response.icloud_monitor_enabled && response.icloud_monitor_running
|
||||
);
|
||||
},
|
||||
);
|
||||
break;
|
||||
case 'refresh':
|
||||
if (debugLog) {
|
||||
console.log('socketStore: got command: icloudMonitor refresh');
|
||||
}
|
||||
socket.emit(
|
||||
'icloud_monitor_control',
|
||||
{ command: 'status' },
|
||||
(response: iCloudMonitorResponse) => {
|
||||
fnctRtn.sts = response.status;
|
||||
if (response.status == 'error') {
|
||||
fnctRtn.sts = response.command_status;
|
||||
if (response.command_status == 'ERROR') {
|
||||
if (response.message) {
|
||||
if (debugLog) {
|
||||
console.log(response.message);
|
||||
@@ -312,9 +346,11 @@ export const useSocketioStore = defineStore('socketio', {
|
||||
},
|
||||
simulationControl(
|
||||
command: string,
|
||||
delay?: number,
|
||||
latitude?: number | null,
|
||||
longitude?: number | null,
|
||||
loc_id?: string | null,
|
||||
delay?: number,
|
||||
address?: string | null,
|
||||
) {
|
||||
let fnctRtn: { sts: string; msg?: string | undefined } = { sts: '', msg: '' };
|
||||
this.setSockStatus();
|
||||
@@ -338,14 +374,14 @@ export const useSocketioStore = defineStore('socketio', {
|
||||
'simulation_control',
|
||||
{ command: 'start', delay: 0, latitude: null, longitude: null },
|
||||
(response: SimulationControlResponse) => {
|
||||
if (response.status == 'error') {
|
||||
if (response.command_status == 'ERROR') {
|
||||
fnctRtn = { sts: 'error', msg: response.message?.toString() };
|
||||
throw new Error(response.message);
|
||||
} else {
|
||||
fnctRtn = { sts: 'OK', msg: response.message?.toString() };
|
||||
this.simulationState = response.status;
|
||||
this.simulationState = response.data?.simulation_queue_state;
|
||||
if (debugLog) {
|
||||
console.log(response.message);
|
||||
console.log('response from simulate_control_start: ', response);
|
||||
}
|
||||
// return response.message;
|
||||
}
|
||||
@@ -357,19 +393,35 @@ export const useSocketioStore = defineStore('socketio', {
|
||||
'simulation_control',
|
||||
{ command: 'test-mode' },
|
||||
(response: SimulationControlResponse) => {
|
||||
if (response.status === 'error') {
|
||||
if (response.command_status === 'ERROR') {
|
||||
throw new Error(response.message);
|
||||
} else {
|
||||
this.simulationState = response.status;
|
||||
this.simulationState = response.data?.simulation_queue_state
|
||||
if (debugLog) {
|
||||
console.log(response.message, response);
|
||||
console.log('response from simulate_control_test-mode: ', response);
|
||||
}
|
||||
return response.message;
|
||||
}
|
||||
},
|
||||
);
|
||||
break;
|
||||
case 'gps-noise':
|
||||
socket.emit(
|
||||
'simulation_control',
|
||||
{ command: 'gps-noise' },
|
||||
(response: SimulationControlResponse) => {
|
||||
if (response.command_status === 'ERROR') {
|
||||
throw new Error(response.message);
|
||||
} else {
|
||||
this.gpsNoise = response.simulation_noise;
|
||||
if (debugLog) {
|
||||
console.log('response from simulate_control_gps-noise: ', response);
|
||||
}
|
||||
return response.message;
|
||||
}
|
||||
},
|
||||
);
|
||||
break;
|
||||
|
||||
case 'pause':
|
||||
if (this.simulationState !== 'RUNNING') {
|
||||
throw new Error('Simulation is not running');
|
||||
@@ -378,12 +430,12 @@ export const useSocketioStore = defineStore('socketio', {
|
||||
'simulation_control',
|
||||
{ command: 'pause' },
|
||||
(response: SimulationControlResponse) => {
|
||||
if (response.status === 'error') {
|
||||
if (response.command_status === 'ERROR') {
|
||||
throw new Error(response.message);
|
||||
} else {
|
||||
this.simulationState = response.status;
|
||||
this.simulationState = response.data?.simulation_queue_state;
|
||||
if (debugLog) {
|
||||
console.log(response.message);
|
||||
console.log('response from simulate_control_pause: ', response);
|
||||
}
|
||||
return response.message;
|
||||
}
|
||||
@@ -395,12 +447,12 @@ export const useSocketioStore = defineStore('socketio', {
|
||||
throw new Error('Simulation is not paused');
|
||||
}
|
||||
socket.emit('simulation_control', { command: 'resume' }, (response) => {
|
||||
if (response.status == 'error') {
|
||||
if (response.command_status == 'ERROR') {
|
||||
throw new Error(response.message);
|
||||
} else {
|
||||
this.simulationState = response.status;
|
||||
this.simulationState = response.data?.simulation_queue_state;
|
||||
if (debugLog) {
|
||||
console.log(response.message);
|
||||
console.log('response from simulate_control_resume: ', response);
|
||||
}
|
||||
return response.message;
|
||||
}
|
||||
@@ -411,12 +463,12 @@ export const useSocketioStore = defineStore('socketio', {
|
||||
throw new Error('Simulation queue is empty');
|
||||
}
|
||||
socket.emit('simulation_control', { command: 'clear' }, (response) => {
|
||||
if (response.status == 'error') {
|
||||
if (response.command_status == 'ERROR') {
|
||||
throw new Error(response.message);
|
||||
} else {
|
||||
this.simulationState = response.status;
|
||||
this.simulationState = response.data?.simulation_queue_state;
|
||||
if (debugLog) {
|
||||
console.log(response.message);
|
||||
console.log('response from simulate_control_clear: ', response);
|
||||
}
|
||||
return response.message;
|
||||
}
|
||||
@@ -424,35 +476,35 @@ export const useSocketioStore = defineStore('socketio', {
|
||||
break;
|
||||
case 'end':
|
||||
if (this.simulationState == 'ENDED' || !this.simulationRunning) {
|
||||
throw new Error('Simulation is already ended');
|
||||
throw new Error('Simulation has already ended');
|
||||
}
|
||||
socket.emit('simulation_control', { command: 'end' }, (response) => {
|
||||
if (response.status == 'error') {
|
||||
if (response.command_status == 'ERROR') {
|
||||
throw new Error(response.message);
|
||||
} else {
|
||||
this.simulationState = response.status;
|
||||
this.simulationState = response.data?.simulation_queue_state;
|
||||
if (debugLog) {
|
||||
console.log(response.message);
|
||||
console.log('response from simulate_control_end: ', response);
|
||||
}
|
||||
return response.message;
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'add':
|
||||
// if (this.simulationState == 'ENDED' || !this.simulationRunning) {
|
||||
// throw new Error('Simulation is not running');
|
||||
// }
|
||||
if (!latitude || !longitude) {
|
||||
throw new Error('latitude or longitude not set');
|
||||
}
|
||||
if (!address) {
|
||||
address = "{latitude}, {longitude}"
|
||||
}
|
||||
socket.emit(
|
||||
'simulation_control',
|
||||
{ command: 'add', latitude: latitude, longitude: longitude, delay: delay },
|
||||
{ command: 'add', latitude: latitude, longitude: longitude, delay: delay, address: address },
|
||||
(response) => {
|
||||
if (response.status == 'error') {
|
||||
if (response.command_status == 'ERROR') {
|
||||
throw new Error(response.message);
|
||||
} else {
|
||||
this.simulationState = response.status;
|
||||
this.simulationState = response.data?.simulation_queue_state;
|
||||
if (debugLog) {
|
||||
console.log('response from simulate_control_add: ', response);
|
||||
}
|
||||
@@ -461,6 +513,35 @@ export const useSocketioStore = defineStore('socketio', {
|
||||
},
|
||||
);
|
||||
break;
|
||||
case 'delete':
|
||||
if (!loc_id) {
|
||||
throw new Error('loc_id not set.');
|
||||
}
|
||||
socket.emit('simulation_control', { command: 'delete', loc_id: loc_id }, (response) => {
|
||||
if (response.command_status == 'ERROR') {
|
||||
throw new Error(response.message);
|
||||
} else {
|
||||
this.simulationState = response.data?.simulation_queue_state;
|
||||
if (debugLog) {
|
||||
console.log('response from simulate_control_delete: ', response);
|
||||
}
|
||||
return response.message;
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'next':
|
||||
socket.emit('simulation_control', { command: 'next' }, (response) => {
|
||||
if (response.command_status == 'ERROR') {
|
||||
throw new Error(response.message);
|
||||
} else {
|
||||
this.simulationState = response.data?.simulation_queue_state;
|
||||
if (debugLog) {
|
||||
console.log('response from simulate_control_next: ', response);
|
||||
}
|
||||
return response.message;
|
||||
}
|
||||
});
|
||||
break;
|
||||
default:
|
||||
fnctRtn = { sts: 'error', msg: 'Invalid command' };
|
||||
throw new Error('Invalid command');
|
||||
@@ -475,6 +556,7 @@ export const useSocketioStore = defineStore('socketio', {
|
||||
digestUpdate(data: StatusUpdate): void {
|
||||
this.deviceConnected = !!(data.udid && data.tunnel);
|
||||
this.testMode = data.test_mode;
|
||||
this.gpsNoise = data.simulation_queue.gps_noise;
|
||||
this.simulationRunning = data.simulation_queue.active;
|
||||
this.simulationState = data.simulation_queue.state;
|
||||
this.simulationQueueLength = data.simulation_queue.order.length;
|
||||
@@ -493,6 +575,38 @@ export const useSocketioStore = defineStore('socketio', {
|
||||
setDeviceState(state: boolean) {
|
||||
this.deviceConnected = state;
|
||||
},
|
||||
updateLocationMark(loc_id: string, key: string, value: string | number) {
|
||||
let fnctRtn: { command_status: string, message: string } = { command_status: '', message: '' };
|
||||
if (debugLog) {
|
||||
console.log('socketStore: Update LocationMark request, loc_id: %s, key: %s, new value: %s', loc_id, key, value);
|
||||
}
|
||||
if (
|
||||
!this.locationQueueData[loc_id]
|
||||
) {
|
||||
fnctRtn = { command_status: 'error', message: 'Location Id: ' + loc_id + ' is not in the simulation queue' };
|
||||
throw new Error('loc_id ' + loc_id + 'not found');
|
||||
}
|
||||
if (debugLog) {
|
||||
console.log('Emitting LocationItem Update');
|
||||
}
|
||||
socket.emit(
|
||||
'location_item_update',
|
||||
{ loc_id: loc_id, key: key, value: value },
|
||||
(response: LocationMarkUpdateResponse) => {
|
||||
if (response.command_status == 'ERROR') {
|
||||
fnctRtn = { command_status: 'error', message: response.message?.toString() };
|
||||
throw new Error(response.message);
|
||||
} else {
|
||||
fnctRtn = { command_status: 'OK', message: response.message?.toString() };
|
||||
if (debugLog) {
|
||||
console.log('response from backend: ', response);
|
||||
}
|
||||
this.locationQueueData[loc_id] = response.data;
|
||||
}
|
||||
},
|
||||
);
|
||||
return fnctRtn;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
9
src/types/leaflet-routing-machine.d.ts
vendored
9
src/types/leaflet-routing-machine.d.ts
vendored
@@ -1,7 +1,14 @@
|
||||
declare module 'leaflet-routing-machine' {
|
||||
import type * as L from 'leaflet';
|
||||
|
||||
export type IRouter = Record<string, unknown>;
|
||||
export interface IRouter {
|
||||
route(
|
||||
waypoints: Array<{ latLng: L.LatLng }>,
|
||||
callback: (error: unknown, routes?: unknown[]) => void,
|
||||
context?: unknown,
|
||||
options?: unknown,
|
||||
): unknown;
|
||||
}
|
||||
export type IGeocoder = Record<string, unknown>;
|
||||
export type LineOptions = L.PolylineOptions;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user