osr proxy
This commit is contained in:
@@ -108,18 +108,41 @@
|
||||
:lat-lng="safeMarkerLatLng"
|
||||
@click="handleMarkerClick"
|
||||
>
|
||||
<L-Popup :options="{ closeOnClick: true }">
|
||||
<q-list dense seperator style="min-width: 150px" class="bg-grey-10">
|
||||
<q-item clickable v-close-popup @click="handleAddLocation">
|
||||
<q-item-section avatar><q-icon name="add_location" /></q-item-section>
|
||||
<L-Popup
|
||||
:options="{ closeOnClick: true, closeButton: false, className: 'marker-popup' }"
|
||||
>
|
||||
<q-list dense seperator style="min-width: 100px" class="bg-grey-10">
|
||||
<q-item clickable v-ripple @click="handleAddLocation">
|
||||
<q-item-section avatar>
|
||||
<q-avatar
|
||||
icon="add_location"
|
||||
color="primary"
|
||||
text-color="white"
|
||||
size="sm"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>Add Location</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-close-popup @click="setStartRoute">
|
||||
<q-item-section avatar><q-icon name="add_location" /></q-item-section>
|
||||
<q-item clickable v-ripple @click="setStartRoute">
|
||||
<q-item-section avatar>
|
||||
<q-avatar
|
||||
icon="add_location"
|
||||
color="primary"
|
||||
text-color="white"
|
||||
size="sm"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>Set Route Start</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-close-popup @click="setEndRoute">
|
||||
<q-item-section avatar><q-icon name="add_location" /></q-item-section>
|
||||
<q-item clickable v-ripple @click="setEndRoute">
|
||||
<q-item-section avatar>
|
||||
<q-avatar
|
||||
icon="add_location"
|
||||
color="primary"
|
||||
text-color="white"
|
||||
size="sm"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>Set Route End</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
@@ -186,7 +209,7 @@ import LRoutingMachine from 'components/LRoutingMachine.vue';
|
||||
import LocationMark from 'components/LocationMark.vue';
|
||||
import SetLocationDialog from 'components/SetLocationDialog.vue';
|
||||
import { customRouter } from 'functions/serviceURL';
|
||||
import { reverseGeocodeRateLimited } from 'functions/reverseGeocode';
|
||||
//import { reverseGeocodeRateLimited } from 'functions/reverseGeocode';
|
||||
import { useRoutingEvents } from '../composables/useRoutingEvents';
|
||||
import { useMarkerContextMenu } from '../composables/useMarkerContextMenu';
|
||||
import type { IRouter } from 'leaflet-routing-machine';
|
||||
@@ -195,8 +218,7 @@ import type { IRouter } from 'leaflet-routing-machine';
|
||||
import type {
|
||||
coords,
|
||||
SearchControlProps,
|
||||
NominatimAddress,
|
||||
routeSegments,
|
||||
// NominatimAddress,
|
||||
} from 'components/models';
|
||||
import type { LeafletMouseEvent, Map } from 'leaflet';
|
||||
|
||||
@@ -208,7 +230,7 @@ import { useLeafletStore } from 'stores/leaflet';
|
||||
import { favorites } from 'constants/favorites';
|
||||
|
||||
const leafletStore = useLeafletStore();
|
||||
const { zoom, center, markerLatLng, qLocDrawer, routeSet, routeSegments } =
|
||||
const { zoom, center, markerLatLng, qLocDrawer, routeSet, routeDirections } =
|
||||
storeToRefs(leafletStore);
|
||||
|
||||
const socketStore = useSocketioStore();
|
||||
@@ -226,7 +248,6 @@ const $q = useQuasar();
|
||||
const mapRef = ref();
|
||||
const responseMessage = ref('');
|
||||
const miniState = ref(true);
|
||||
const loading = ref(false);
|
||||
const safeCenter = computed<[number, number]>(() => {
|
||||
const lat = center.value?.[0];
|
||||
const lng = center.value?.[1];
|
||||
@@ -320,25 +341,54 @@ function updateMarker(event: LeafletMouseEvent) {
|
||||
center.value = [event.latlng.lat, event.latlng.lng];
|
||||
}
|
||||
|
||||
function routeToQueue() {
|
||||
console.log('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: routeSegments) => {
|
||||
console.log('routeToQueue: segment: ', segment);
|
||||
setLocation(
|
||||
{ lat: segment.toCoordinates.lat, lng: segment.toCoordinates.lng },
|
||||
segment.timeSeconds,
|
||||
);
|
||||
});
|
||||
console.log('routeToQueue: end: ', routeSet.value.end);
|
||||
setLocation({ lat: routeSet.value.end.lat, lng: routeSet.value.end.lng }, 0);
|
||||
function closeAllPopups() {
|
||||
if (mapRef.value) {
|
||||
// Access the Leaflet map instance directly
|
||||
mapRef.value.leafletObject.closePopup();
|
||||
}
|
||||
}
|
||||
|
||||
const delay = (ms: number) => new Promise((res) => setTimeout(res, ms));
|
||||
|
||||
async function routeToQueue() {
|
||||
if (routeSet.value.start && routeSet.value.end && routeDirections) {
|
||||
if (routeDirections.value && routeDirections.value.length > 0) {
|
||||
for (const direction of routeDirections.value) {
|
||||
if (direction.coordinates) {
|
||||
await setLocation(
|
||||
{ lat: Number(direction.coordinates.lat), lng: Number(direction.coordinates.lng) },
|
||||
direction.time,
|
||||
);
|
||||
}
|
||||
await delay(1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* function routeToQueue() {
|
||||
console.log('routeToQueue');
|
||||
if (routeSet.value.start && routeSet.value.end && routeSegments) {
|
||||
console.log('routeToQueue: start: ', routeSet.value.start);
|
||||
setLocation(
|
||||
{ lat: Number(routeSet.value.start.lat), lng: Number(routeSet.value.start.lng) },
|
||||
0,
|
||||
);
|
||||
if (routeSegments.value) {
|
||||
routeSegments.value.forEach((segment: routeSegments) => {
|
||||
console.log('routeToQueue: segment: ', segment);
|
||||
setLocation(
|
||||
{ lat: Number(segment.toCoordinates.lat), lng: Number(segment.toCoordinates.lng) },
|
||||
segment.timeSeconds,
|
||||
);
|
||||
});
|
||||
}
|
||||
console.log('routeToQueue: end: ', routeSet.value.end);
|
||||
setLocation({ lat: Number(routeSet.value.end.lat), lng: Number(routeSet.value.end.lng) }, 0);
|
||||
}
|
||||
}
|
||||
*/
|
||||
function clearRoute() {
|
||||
routeSegments.value = [];
|
||||
void leafletStore.clearRouteSegments;
|
||||
routingOptions.waypoints = [];
|
||||
routeSet.value.start = { lat: null, lng: null };
|
||||
routeSet.value.end = { lat: null, lng: null };
|
||||
@@ -362,47 +412,49 @@ const updateRoute = () => {
|
||||
const { clickedLatLng, handleMarkerClick, setStartRoute, setEndRoute } = useMarkerContextMenu(
|
||||
routeSet,
|
||||
updateRoute,
|
||||
closeAllPopups,
|
||||
);
|
||||
|
||||
function handleAddLocation() {
|
||||
if (clickedLatLng.value) {
|
||||
const latlng = clickedLatLng.value;
|
||||
closeAllPopups();
|
||||
$q.notify(`add location...${latlng.toString()}`);
|
||||
reverseGeocode(latlng.lat, latlng.lng)
|
||||
.then((data) => {
|
||||
const NomAddress = data.address as unknown as NominatimAddress;
|
||||
$q.dialog({
|
||||
component: SetLocationDialog,
|
||||
componentProps: {
|
||||
lat: Number(latlng.lat),
|
||||
lng: Number(latlng.lng),
|
||||
address: NomAddress,
|
||||
},
|
||||
})
|
||||
.onOk((delay: number) => {
|
||||
void setLocation({ lat: Number(latlng.lat), lng: Number(latlng.lng) }, delay);
|
||||
console.log(
|
||||
'Confirmed location add: latitude: ' +
|
||||
latlng.lat +
|
||||
', longitude: ' +
|
||||
latlng.lng +
|
||||
', delay: ' +
|
||||
delay,
|
||||
);
|
||||
})
|
||||
.onCancel(() => {
|
||||
console.log('Dialog cancelled');
|
||||
})
|
||||
.onDismiss(() => {
|
||||
console.log('Dialog dismissed');
|
||||
});
|
||||
// reverseGeocode(latlng.lat, latlng.lng)
|
||||
// .then((data) => {
|
||||
// const NomAddress = data.address as unknown as NominatimAddress;
|
||||
$q.dialog({
|
||||
component: SetLocationDialog,
|
||||
componentProps: {
|
||||
lat: Number(latlng.lat),
|
||||
lng: Number(latlng.lng),
|
||||
// address: NomAddress,
|
||||
},
|
||||
})
|
||||
.onOk((delay: number) => {
|
||||
void setLocation({ lat: Number(latlng.lat), lng: Number(latlng.lng) }, delay);
|
||||
console.log(
|
||||
'Confirmed location add: latitude: ' +
|
||||
latlng.lat +
|
||||
', longitude: ' +
|
||||
latlng.lng +
|
||||
', delay: ' +
|
||||
delay,
|
||||
);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error fetching reverse geocode:', error);
|
||||
.onCancel(() => {
|
||||
console.log('Dialog cancelled');
|
||||
})
|
||||
.onDismiss(() => {
|
||||
console.log('Dialog dismissed');
|
||||
});
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// console.error('Error fetching reverse geocode:', error);
|
||||
// });
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
async function reverseGeocode(lat: number, lng: number) {
|
||||
loading.value = true;
|
||||
try {
|
||||
@@ -416,29 +468,36 @@ async function reverseGeocode(lat: number, lng: number) {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
function setLocation(coords: coords, delay: number) {
|
||||
let notType: string = 'positive';
|
||||
try {
|
||||
const setCmdRsp = socketStore.simulationControl('add', delay, coords.lat, coords.lng);
|
||||
if (setCmdRsp.sts === 'error') {
|
||||
async function setLocation(coords: coords, delay: number) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let notType: string = 'positive';
|
||||
try {
|
||||
const setCmdRsp = socketStore.simulationControl('add', delay, coords.lat, coords.lng);
|
||||
if (setCmdRsp.msg) {
|
||||
responseMessage.value = setCmdRsp.msg;
|
||||
}
|
||||
if (setCmdRsp.sts === 'error') {
|
||||
notType = 'negative';
|
||||
reject(new Error(setCmdRsp.msg || 'Unknown error'));
|
||||
}
|
||||
resolve(setCmdRsp);
|
||||
} catch (error: unknown) {
|
||||
notType = 'negative';
|
||||
if (error instanceof Error) {
|
||||
console.error('Error setting location:', error.message);
|
||||
responseMessage.value = `Failed to set location: ${error.message}`;
|
||||
reject(error);
|
||||
} else {
|
||||
console.error('Error setting location:', error);
|
||||
responseMessage.value = `Failed to set location: Unknown error`;
|
||||
reject(new Error('Unknown error'));
|
||||
}
|
||||
} finally {
|
||||
$q.notify({ type: notType, message: responseMessage.value });
|
||||
}
|
||||
if (setCmdRsp.msg) {
|
||||
responseMessage.value = setCmdRsp.msg;
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
notType = 'negative';
|
||||
if (error instanceof Error) {
|
||||
console.error('Error setting location:', error.message);
|
||||
responseMessage.value = `Failed to set location: ${error.message}`;
|
||||
} else {
|
||||
console.error('Error setting location:', error);
|
||||
responseMessage.value = `Failed to set location: Unknown error`;
|
||||
}
|
||||
} finally {
|
||||
$q.notify({ type: notType, message: responseMessage.value });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function zoomToCoods(arg: string) {
|
||||
@@ -507,4 +566,9 @@ onMounted(() => {
|
||||
.leafletDrawer
|
||||
background-color: $dark
|
||||
color: $dark
|
||||
|
||||
.marker-popup .leaflet-popup-content-wrapper, .marker-popup .leaflet-popup-tip
|
||||
background-color: $dark
|
||||
.marker-popup .leaflet-popup-content
|
||||
margin: 13px 10px 13px 10px
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user