renaming variables and adding route overlay on open street maps

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() {
 
       <!-- route polyline -->
       <l-polyline
-        v-if="state.isRouteGenerated"
+        v-if="state.shouldDisplayRoute"
         :lat-lngs="state.polyLineLatLngs"
       ></l-polyline>
 

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 }
 );

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) {
     <div class="text-h6 padding-b-16">Create Route</div>
 
     <!-- route info display -->
-    <section v-if="state.isRouteGenerated">
+    <section v-if="state.shouldDisplayRoute">
       <SensorRouteBlock
         :selectedRouteList="routeStore.getSelectedRouteList"
         :startPointAddress="routeStore.getStartPointAddress"

app_vue/src/stores/route_store.js

@@ -1,46 +1,53 @@
-import { defineStore } from 'pinia'
+import { defineStore } from 'pinia';
 import { getOptimizedRouteData, getNewOptimizedRoute } from '@/utils/optimizeRouteHelper';
 
 export const useRouteStore = defineStore('route', {
   state: () => ({
     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);
       }
     }
-  },
-})
+  }
+});