diff --git a/app_vue/src/components/sensorMap.vue b/app_vue/src/components/sensorMap.vue
index 8a5b5a8..afd74e1 100644
--- a/app_vue/src/components/sensorMap.vue
+++ b/app_vue/src/components/sensorMap.vue
@@ -8,17 +8,18 @@ import { getLatLng } from '@/utils/geoCodingHelper';
import { useSensorStore } from '@/stores/sensors_store';
import { useRouteStore } from '@/stores/route_store';
import { storeToRefs } from 'pinia';
+import { decodePolyline } from '@/utils/polylineHelper';
// stores
const sensorStore = useSensorStore();
const { getSensors } = storeToRefs(sensorStore);
const routeStore = useRouteStore();
-const { getSelectedRouteLatLong, getIsRouteGenerated, getStartPointAddress, getEndPointAddress } = storeToRefs(routeStore);
+const { getShouldDisplayRoute, getStartPointAddress, getEndPointAddress, getGoogEncodedPolyline } = storeToRefs(routeStore);
const state = reactive({
location: 'bottomright',
device: useDevice(),
- isRouteGenerated: false,
+ shouldDisplayRoute: false,
polyLineLatLngs: [],
startPointLatLng: [],
endPointLatLng: [],
@@ -53,32 +54,26 @@ watch(getSensors, () => {
state.sensors = sensorStore.getSensors;
});
-// when route updates, update the map polylines
-watch(
- getSelectedRouteLatLong,
- () => {
- state.polyLineLatLngs = routeStore.getSelectedRouteLatLong;
-
- // additional lines for start and end points
- if (state.startPointLatLng.length && state.endPointLatLng.length) {
- state.polyLineLatLngs.unshift(state.startPointLatLng); // append as first element
- state.polyLineLatLngs.push(state.endPointLatLng); // append as last element
- }
- },
- { deep: true }
-);
-
-watch(getIsRouteGenerated, () => {
- state.isRouteGenerated = routeStore.getIsRouteGenerated;
+watch(getShouldDisplayRoute, () => {
+ state.shouldDisplayRoute = routeStore.getShouldDisplayRoute;
+});
+
+watch(getGoogEncodedPolyline, async () => {
+ const encoded = routeStore.getGoogEncodedPolyline;
+ if (!encoded) {
+ return;
+ }
+ const latlngsArr = await decodePolyline(encoded);
+
+ state.polyLineLatLngs = latlngsArr;
+ state.center = latlngsArr[0];
});
// when start point gets updated
watch(getStartPointAddress, async () => {
routeStore.setHasMappedStartEnd(false);
state.startPointLatLng = await getLatLng(routeStore.getStartPointAddress); // get start point
- state.polyLineLatLngs = routeStore.getSelectedRouteLatLong; // get route polyline
- appendStartEndPolylines();
state.center = state.startPointLatLng; // update map center
routeStore.setHasMappedStartEnd(true);
});
@@ -87,19 +82,9 @@ watch(getStartPointAddress, async () => {
watch(getEndPointAddress, async () => {
routeStore.setHasMappedStartEnd(false);
state.endPointLatLng = await getLatLng(routeStore.getEndPointAddress); // get end point
- state.polyLineLatLngs = routeStore.getSelectedRouteLatLong; // get route polyline
-
- appendStartEndPolylines();
routeStore.setHasMappedStartEnd(true);
});
-function appendStartEndPolylines() {
- if (state.startPointLatLng.length && state.endPointLatLng.length) {
- state.polyLineLatLngs.unshift(state.startPointLatLng); // append as first element
- state.polyLineLatLngs.push(state.endPointLatLng); // append as last element
- }
-}
-
function positionZoom() {
state.device = useDevice();
if (state.device.size === DEVICE_SIZE.s || state.device.size === DEVICE_SIZE.xs) {
@@ -131,7 +116,7 @@ function positionZoom() {
diff --git a/app_vue/src/components/sensorMapMarker.vue b/app_vue/src/components/sensorMapMarker.vue
index 2d253af..84d3cb2 100644
--- a/app_vue/src/components/sensorMapMarker.vue
+++ b/app_vue/src/components/sensorMapMarker.vue
@@ -21,7 +21,7 @@ const isRouteCreated = ref(false);
// route store
const routeStore = useRouteStore();
-const { getSelectedRouteList, getIsRouteGenerated } = storeToRefs(routeStore);
+const { getSelectedRouteList, getShouldDisplayRoute } = storeToRefs(routeStore);
// watch for changes in stored sensor route array (ie. when a sensor gets added or removed)
watch(
@@ -33,9 +33,9 @@ watch(
);
watch(
- getIsRouteGenerated,
+ getShouldDisplayRoute,
() => {
- isRouteCreated.value = routeStore.getIsRouteGenerated;
+ isRouteCreated.value = routeStore.getShouldDisplayRoute;
},
{ deep: true }
);
diff --git a/app_vue/src/components/sensorSideBarRoutes.vue b/app_vue/src/components/sensorSideBarRoutes.vue
index 4efc6ff..fb1fb6b 100644
--- a/app_vue/src/components/sensorSideBarRoutes.vue
+++ b/app_vue/src/components/sensorSideBarRoutes.vue
@@ -10,14 +10,14 @@ import { telusUi } from '@/styles/telusUi';
// stores
const routeStore = useRouteStore();
const sensorStore = useSensorStore();
-const { getIsRouteGenerated, getHasMappedStartEnd } = storeToRefs(routeStore);
+const { getShouldDisplayRoute, getHasMappedStartEnd } = storeToRefs(routeStore);
const state = reactive({
startPointAddress: '',
endPointAddress: '',
startAddressOptions: [],
endAddressOptions: [],
- isRouteGenerated: false,
+ shouldDisplayRoute: false,
drag: false,
isMapInitialized: false,
isLoadingGoogApi: false
@@ -33,8 +33,8 @@ onMounted(() => {
});
// element variables
-watch(getIsRouteGenerated, () => {
- state.isRouteGenerated = routeStore.getIsRouteGenerated;
+watch(getShouldDisplayRoute, () => {
+ state.shouldDisplayRoute = routeStore.getShouldDisplayRoute;
});
watch(getHasMappedStartEnd, () => {
@@ -75,7 +75,7 @@ function updateEndPoint(value) {
Create Route
-
+
({
selectedRouteList: [], // list of sensor objects part of the route
- isRouteGenerated: false, // when google api has been run on the route and we want to present it
+ shouldDisplayRoute: false, // when google api has been run on the route and we want to present it
startPointAddress: '6900 Airport Rd Mississauga ON',
endPointAddress: '6135 Airport Rd Mississauga ON',
routeDuration: '',
routeDistance: 0,
- hasMappedStartEnd: false
+ hasMappedStartEnd: false,
+ googEncodedPolyline: ''
}),
getters: {
- getSelectedRouteList({selectedRouteList}) {
+ getGoogEncodedPolyline({ googEncodedPolyline }) {
+ return googEncodedPolyline;
+ },
+ getSelectedRouteList({ selectedRouteList }) {
return selectedRouteList;
},
- getSelectedRouteLatLong({selectedRouteList}) {
+ getSelectedRouteLatLong({ selectedRouteList }) {
if (selectedRouteList.length > 0) {
- return selectedRouteList.map(sensor => [sensor.lat, sensor.long]);
+ return selectedRouteList.map((sensor) => [sensor.lat, sensor.long]);
}
return [];
},
- getIsRouteGenerated({isRouteGenerated}) {
- return isRouteGenerated;
+ getShouldDisplayRoute({ shouldDisplayRoute }) {
+ return shouldDisplayRoute;
},
- getStartPointAddress({startPointAddress}) {
+ getStartPointAddress({ startPointAddress }) {
return startPointAddress;
},
- getEndPointAddress({endPointAddress}) {
+ getEndPointAddress({ endPointAddress }) {
return endPointAddress;
},
- getRouteDuration({routeDuration}) {
+ getRouteDuration({ routeDuration }) {
return routeDuration;
},
- getRouteDistance({routeDistance}) {
+ getRouteDistance({ routeDistance }) {
return routeDistance;
},
- getHasMappedStartEnd({hasMappedStartEnd}) {
+ getHasMappedStartEnd({ hasMappedStartEnd }) {
return hasMappedStartEnd;
- },
+ }
},
actions: {
+ setGoogEncodedPolyline(value) {
+ this.googEncodedPolyline = value;
+ },
setStartPoint(value) {
this.startPointAddress = value;
},
@@ -73,16 +80,16 @@ export const useRouteStore = defineStore('route', {
},
clearSensorRoute() {
this.selectedRouteList = [];
- this.isRouteGenerated = false;
+ this.shouldDisplayRoute = false;
},
setIsRouteGenerated(value) {
- this.isRouteGenerated = value;
+ this.shouldDisplayRoute = value;
},
isAlreadyInRoute(sensor) {
if (this.getSelectedRouteList.length > 0) {
- return !!this.getSelectedRouteList.find(bin => bin.id === sensor.id);
+ return !!this.getSelectedRouteList.find((bin) => bin.id === sensor.id);
}
- return false
+ return false;
},
async googUpdateRouteStats() {
const googResponse = await getOptimizedRouteData(this.getSelectedRouteList, this.startPointAddress, this.endPointAddress, false);
@@ -94,10 +101,16 @@ export const useRouteStore = defineStore('route', {
if (googResponse.routes[0].distanceMeters) {
this.setRouteDistance(googResponse.routes[0]?.distanceMeters);
}
+
+ if (googResponse.routes[0].polyline) {
+ this.setGoogEncodedPolyline(googResponse.routes[0].polyline.encodedPolyline);
+ }
+
this.setIsRouteGenerated(true);
}
},
- async googOptimizeRoute() { // updates our stored selected route state with new optimized route
+ async googOptimizeRoute() {
+ // updates our stored selected route state with new optimized route
const googResponse = await getOptimizedRouteData(this.getSelectedRouteList, this.startPointAddress, this.endPointAddress);
if (googResponse && googResponse.routes && googResponse.routes[0]) {
const newRouteIndexOrder = googResponse.routes[0].optimizedIntermediateWaypointIndex; // [0,3,4]
@@ -111,8 +124,13 @@ export const useRouteStore = defineStore('route', {
if (googResponse.routes[0].distanceMeters) {
this.setRouteDistance(googResponse.routes[0]?.distanceMeters);
}
+
+ if (googResponse.routes[0].polyline) {
+ this.setGoogEncodedPolyline(googResponse.routes[0].polyline.encodedPolyline);
+ }
+
this.setIsRouteGenerated(true);
}
}
- },
-})
+ }
+});