From 9c13c0cfa9f7aaec293a181cb8abc2dd292ff621 Mon Sep 17 00:00:00 2001
From: monicakochofar <monicakochofar@gmail.com>
Date: Fri, 8 Sep 2023 18:00:09 -0400
Subject: [PATCH 01/20] renaming variables

---
 app_vue/src/components/sensorMap.vue          |  6 ++--
 app_vue/src/components/sensorMapMarker.vue    |  8 +++---
 .../src/components/sensorSideBarRoutes.vue    | 28 +++++++++----------
 app_vue/src/stores/route_store.js             | 26 ++++++++---------
 app_vue/src/utils/optimizeRouteHelper.js      | 10 +++----
 5 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/app_vue/src/components/sensorMap.vue b/app_vue/src/components/sensorMap.vue
index d5e7596d..6c448bce 100644
--- a/app_vue/src/components/sensorMap.vue
+++ b/app_vue/src/components/sensorMap.vue
@@ -19,10 +19,10 @@
   const polyLineLatLngs = ref([]);
 
   const routeStore = useRouteStore();
-  const { getSensorRouteLatLong } = storeToRefs(routeStore);
+  const { getSelectedRouteLatLong } = storeToRefs(routeStore);
 
-  watch(getSensorRouteLatLong, () => {
-    polyLineLatLngs.value = routeStore.getSensorRouteLatLong;
+  watch(getSelectedRouteLatLong, () => {
+    polyLineLatLngs.value = routeStore.getSelectedRouteLatLong;
   }, { deep: true })
 
   onMounted(() => {
diff --git a/app_vue/src/components/sensorMapMarker.vue b/app_vue/src/components/sensorMapMarker.vue
index 97fbd008..7b3b227f 100644
--- a/app_vue/src/components/sensorMapMarker.vue
+++ b/app_vue/src/components/sensorMapMarker.vue
@@ -19,12 +19,12 @@
   // route store
   const routeStore = useRouteStore();
   const isAlreadyInRoute = ref(false);
-  const { getSensorRouteList } = storeToRefs(routeStore);
+  const { getSelectedRouteList } = storeToRefs(routeStore);
   
   // watch for changes in stored sensor route array (ie. when a sensor gets added or removed)
-  watch(getSensorRouteList, () => {
-    if (routeStore.getSensorRouteList.length > 0) {
-      isAlreadyInRoute.value = !!routeStore.getSensorRouteList.find(bin => bin.id === props.sensor.id);
+  watch(getSelectedRouteList, () => {
+    if (routeStore.getSelectedRouteList.length > 0) {
+      isAlreadyInRoute.value = !!routeStore.getSelectedRouteList.find(bin => bin.id === props.sensor.id);
     } else {
       isAlreadyInRoute.value = false
     }
diff --git a/app_vue/src/components/sensorSideBarRoutes.vue b/app_vue/src/components/sensorSideBarRoutes.vue
index 5975986d..d54a9bfe 100644
--- a/app_vue/src/components/sensorSideBarRoutes.vue
+++ b/app_vue/src/components/sensorSideBarRoutes.vue
@@ -7,7 +7,7 @@
   import draggable from 'vuedraggable';
 
   const routeStore = useRouteStore();
-  const { sensorRouteList, getEnableOptimizeRoute, getIsRouteOptimized } = storeToRefs(routeStore);
+  const { selectedRouteList, getEnableOptimizeRoute, getIsRouteOptimized } = storeToRefs(routeStore);
   const isOptimizeRouteEnabled = ref(true);
   const isRouteOptimized = ref(false);
   const drag = ref(false);
@@ -26,7 +26,7 @@
     routeStore.setEnableOptimizedRoute(false);
 
     // make a call to google
-    const googResponse = await getOptimizedRoute(routeStore.getSensorRouteList);
+    const googResponse = await getOptimizedRoute(routeStore.getSelectedRouteList);
     if (googResponse && googResponse.routes) {
       const routeOrder = googResponse.routes[0]?.optimizedIntermediateWaypointIndex; // [0,3,4]
       routeStore.updateWithOptimizedRoute(routeOrder); // update current route
@@ -45,7 +45,7 @@
     let csv = 'Order,Sensor Type,Fill Level,Latitude,Longitude,Manufacturer,Bin Name,Address Line 1,Address Line 2,Group,Bin Type,Material Type,Asset Tag,Bin Volume\n';
 
     // grab required data to be exported
-    const csvObjectArray = routeStore.sensorRouteList.map((sensor, index) => {
+    const csvObjectArray = routeStore.selectedRouteList.map((sensor, index) => {
       return {
         order: index + 1,
         sensor_type: sensor.sensor_type,
@@ -83,33 +83,33 @@
 <template>
   <section class="routes-list">
     <div class="text-h6 padding-b-16">Routes</div>
-    <div v-if="sensorRouteList && sensorRouteList.length !== 0" class="padding-b-16">1 route(s) found</div>
+    <div v-if="selectedRouteList && selectedRouteList.length !== 0" class="padding-b-16">1 route(s) found</div>
     <div class="py-4 px-4 routes-list__route-container">
       <!-- no route present -->
-      <span v-if="sensorRouteList && sensorRouteList.length === 0" 
+      <span v-if="selectedRouteList && selectedRouteList.length === 0" 
         class="font-italic">
         No route to be displayed yet
       </span>
       <!-- route is present -->
       <div class="w-100 h-100" v-else>
         <div tabindex="0" class="w-100 h-100 d-flex align-center justify-space-between cursor-pointer">
-          <span class="font-body">{{ sensorRouteList.length }} Bins </span>
+          <span class="font-body">{{ selectedRouteList.length }} Bins </span>
         </div>
 
         <!-- route list -->
         <section>
           <!-- route list items -->
           <draggable 
-            v-model="sensorRouteList" 
+            v-model="selectedRouteList" 
             tag="div"
             item-key="id"
             @start="drag=true"
             @end="routeOrganized">
             <template #item="{ element: sensor, index }">
-              <li class="routes-list__items" :class="{'margin-b-0' : sensorRouteList.length === 1}">
+              <li class="routes-list__items" :class="{'margin-b-0' : selectedRouteList.length === 1}">
                 <vue-feather v-if="index === 0" class="color-green" type="disc"></vue-feather>
-                <vue-feather v-if="index > 0 && index < (sensorRouteList.length - 1)" class="transform-rotate-270" type="git-commit"></vue-feather>
-                <vue-feather v-if="index === (sensorRouteList.length - 1) && index !== 0" class="color-red" type="map-pin"></vue-feather>
+                <vue-feather v-if="index > 0 && index < (selectedRouteList.length - 1)" class="transform-rotate-270" type="git-commit"></vue-feather>
+                <vue-feather v-if="index === (selectedRouteList.length - 1) && index !== 0" class="color-red" type="map-pin"></vue-feather>
                 <div class="d-flex flex-column ml-2">
                   <span>{{ sensor.address_line1 }}</span>
                   <span>{{ sensor.address_line2 }}</span>
@@ -121,11 +121,11 @@
           <!-- route call-to-actions -->
           <div class="d-flex align-center" 
             :class="{
-              'justify-space-between': sensorRouteList && sensorRouteList.length > 1, 
-              'justify-end': sensorRouteList && sensorRouteList.length <= 1
+              'justify-space-between': selectedRouteList && selectedRouteList.length > 1, 
+              'justify-end': selectedRouteList && selectedRouteList.length <= 1
             }">
-            <div v-if="sensorRouteList && sensorRouteList.length > 1">
-              <v-btn v-if="sensorRouteList.length >= 4" class="pa-0" variant="plain" :disabled="isRouteOptimized" @click="optimizeRouteClicked">
+            <div v-if="selectedRouteList && selectedRouteList.length > 1">
+              <v-btn v-if="selectedRouteList.length >= 4" class="pa-0" variant="plain" :disabled="isRouteOptimized" @click="optimizeRouteClicked">
                 {{ isRouteOptimized ? 'Optimized!' : 'Optimize route' }}
               </v-btn>
               <v-btn class="pa-0 routes-list__export" variant="plain" @click="exportRouteClicked">
diff --git a/app_vue/src/stores/route_store.js b/app_vue/src/stores/route_store.js
index ed5de58a..11a84e93 100644
--- a/app_vue/src/stores/route_store.js
+++ b/app_vue/src/stores/route_store.js
@@ -2,17 +2,17 @@ import { defineStore } from 'pinia'
 
 export const useRouteStore = defineStore('route', {
   state: () => ({
-    sensorRouteList: [], // list of sensor objects part of the route
+    selectedRouteList: [], // list of sensor objects part of the route
     enableOptimizeRoute: true, // enables optimize route button to be clicked
     isRouteOptimized: false
   }),
   getters: {
-    getSensorRouteList({sensorRouteList}) {
-      return sensorRouteList;
+    getSelectedRouteList({selectedRouteList}) {
+      return selectedRouteList;
     },
-    getSensorRouteLatLong({sensorRouteList}) {
-      if (sensorRouteList.length > 0) {
-        return sensorRouteList.map(sensor => [sensor.lat, sensor.long]);
+    getSelectedRouteLatLong({selectedRouteList}) {
+      if (selectedRouteList.length > 0) {
+        return selectedRouteList.map(sensor => [sensor.lat, sensor.long]);
       }
       return [];
     },
@@ -25,22 +25,22 @@ export const useRouteStore = defineStore('route', {
   },
   actions: {
     addSensorToRoute(sensor) {
-      this.sensorRouteList.push(sensor);
+      this.selectedRouteList.push(sensor);
       // reset
       this.enableOptimizeRoute = true;
       this.isRouteOptimized = false;
     },
     removeSensorFromRoute(sensor) {
-      const index = this.sensorRouteList.indexOf(sensor);
+      const index = this.selectedRouteList.indexOf(sensor);
       if (index > -1) {
-        this.sensorRouteList.splice(index, 1);
+        this.selectedRouteList.splice(index, 1);
       }
       // reset
       this.enableOptimizeRoute = true;
       this.isRouteOptimized = false;
     },
     clearSensorRoute() {
-      this.sensorRouteList = [];
+      this.selectedRouteList = [];
       // reset
       this.enableOptimizeRoute = true;
       this.isRouteOptimized = false;
@@ -51,11 +51,11 @@ export const useRouteStore = defineStore('route', {
     setIsRouteOptimized(value) {
       this.isRouteOptimized = value;
     },
-    // reorders intermediate points in our sensorRouteList according to a list of given indexes (routeOrder)
+    // reorders intermediate points in our selectedRouteList according to a list of given indexes (routeOrder)
     updateWithOptimizedRoute(routeOrder) {
       // assuming routeOrder looks like [originLocationSensor, midLocationSensor1...midLocationSensor4, destinationLocaitonSensor]
       // variable to hold our intermediate waypoints for update (no start/end point included)
-      const intermediates = [...this.sensorRouteList];
+      const intermediates = [...this.selectedRouteList];
       intermediates.shift(); // remove start point
       intermediates.pop(); // remove end point
 
@@ -73,7 +73,7 @@ export const useRouteStore = defineStore('route', {
       }
 
       // update saved routelist with new route order
-      this.sensorRouteList.splice(1, intermediates.length, ...intermediates);
+      this.selectedRouteList.splice(1, intermediates.length, ...intermediates);
     }
   },
 })
\ No newline at end of file
diff --git a/app_vue/src/utils/optimizeRouteHelper.js b/app_vue/src/utils/optimizeRouteHelper.js
index ee149e55..dd73e3ad 100644
--- a/app_vue/src/utils/optimizeRouteHelper.js
+++ b/app_vue/src/utils/optimizeRouteHelper.js
@@ -1,7 +1,7 @@
 import axios from 'axios';
 
-const getGoogPayload = (sensorRouteList) => {
-  const waypointArr = [...sensorRouteList]; // ensures original variable isnt modified
+const getGoogPayload = (selectedRouteList) => {
+  const waypointArr = [...selectedRouteList]; // ensures original variable isnt modified
   const origin = waypointArr.shift(); // grab first sensor in route
   const destination = waypointArr.pop(); // grab last sensor in route
   
@@ -51,16 +51,16 @@ const getGoogPayload = (sensorRouteList) => {
 
 // google api call to optimize route
 // https://developers.google.com/maps/documentation/routes/opt-way
-export const getOptimizedRoute = async (sensorRouteList) => {
+export const getOptimizedRoute = async (selectedRouteList) => {
 
-  if (sensorRouteList && sensorRouteList.length === 0) {
+  if (selectedRouteList && selectedRouteList.length === 0) {
     return;
   }
   // google headers
   const googApiKey = 'AIzaSyAgixnED4py56GFy-b2hlfYgofEyISUjSo'; //TODO: move to .env
   const googFieldMask = 'routes.duration,routes.distanceMeters,routes.optimizedIntermediateWaypointIndex';
   const URL = 'https://routes.googleapis.com/directions/v2:computeRoutes';
-  const data = getGoogPayload(sensorRouteList);
+  const data = getGoogPayload(selectedRouteList);
 
   const config = {
     headers: {

From c0c935c7b637545d73fc3180bc8fb9295bc5efdd Mon Sep 17 00:00:00 2001
From: monicakochofar <monicakochofar@gmail.com>
Date: Mon, 11 Sep 2023 13:07:38 -0400
Subject: [PATCH 02/20] route is now crafted from filtered sensors

---
 app_vue/src/components/sensorMap.vue          |  29 +--
 app_vue/src/components/sensorMapMarker.vue    |  21 ++-
 .../src/components/sensorSideBarFilters.vue   |   1 +
 .../src/components/sensorSideBarRoutes.vue    | 174 +++++++++++-------
 app_vue/src/stores/route_store.js             |  21 +--
 app_vue/src/utils/optimizeRouteHelper.js      |  95 +++++++---
 6 files changed, 212 insertions(+), 129 deletions(-)

diff --git a/app_vue/src/components/sensorMap.vue b/app_vue/src/components/sensorMap.vue
index 6c448bce..58f64edc 100644
--- a/app_vue/src/components/sensorMap.vue
+++ b/app_vue/src/components/sensorMap.vue
@@ -1,5 +1,5 @@
 <script setup>
-  import { reactive, ref, onMounted, watch } from 'vue'
+  import { reactive, onMounted, watch } from 'vue'
   import SensorMapMarker from '@/components/sensorMapMarker.vue';
   import 'leaflet/dist/leaflet.css'
   import { LMap, LTileLayer, LMarker, LControlZoom, LPolyline } from '@vue-leaflet/vue-leaflet'
@@ -8,23 +8,30 @@
   import { useRouteStore } from '@/stores/route_store';
   import { storeToRefs } from 'pinia';
 
-  const center = ref([43.7, -79.42]); // TODO: update to possibly be user's current location
-  const zoom = ref(10);
+  // stores
   const sensorStore = useSensorStore();
   const { sensors } = storeToRefs(sensorStore);
+  const routeStore = useRouteStore();
+  const { getSelectedRouteLatLong, getIsRouteOptimized } = storeToRefs(routeStore);
+
   const state = reactive({
     location: 'bottomright',
-    device: useDevice()
+    device: useDevice(),
+    isRouteOptimized: false,
+    polyLineLatLngs: [],
+    zoom: 10,
+    center: [43.7, -79.42] // TODO: update to possibly be user's current location
   });
-  const polyLineLatLngs = ref([]);
-
-  const routeStore = useRouteStore();
-  const { getSelectedRouteLatLong } = storeToRefs(routeStore);
 
   watch(getSelectedRouteLatLong, () => {
-    polyLineLatLngs.value = routeStore.getSelectedRouteLatLong;
+    state.polyLineLatLngs = routeStore.getSelectedRouteLatLong;
   }, { deep: true })
 
+  watch(getIsRouteOptimized, () => {
+    state.isRouteOptimized = routeStore.getIsRouteOptimized;
+    console.log('state.isRouteOptimized', state.isRouteOptimized)
+  })
+
   onMounted(() => {
     positionZoom();
     window.addEventListener("resize", positionZoom);
@@ -42,7 +49,7 @@
 
 <template>
   <div v-if="sensors" class="sensor-map-container">
-    <l-map ref="map" v-model:zoom="zoom" :use-global-leaflet="false" :center="center" :options="{zoomControl: false}">
+    <l-map ref="map" v-model:zoom="state.zoom" :use-global-leaflet="false" :center="state.center" :options="{zoomControl: false}">
       <l-control-zoom :position="state.location"/>
       <!-- alternative maps (for aesthetic): -->
       <!-- favourite: https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png -->
@@ -52,7 +59,7 @@
         layer-type="base"
         name="OpenStreetMap"
       ></l-tile-layer>
-      <l-polyline :lat-lngs="polyLineLatLngs"></l-polyline>
+      <l-polyline v-if="state.isRouteOptimized" :lat-lngs="state.polyLineLatLngs"></l-polyline>
 
       <l-marker
         v-for="sensor in sensors"
diff --git a/app_vue/src/components/sensorMapMarker.vue b/app_vue/src/components/sensorMapMarker.vue
index 7b3b227f..b8b649d8 100644
--- a/app_vue/src/components/sensorMapMarker.vue
+++ b/app_vue/src/components/sensorMapMarker.vue
@@ -15,19 +15,20 @@
   // set html element variables
   const fillPercent = ref(Math.round(props.sensor.fill_level || 0));
   const { iconUrl, linearProgressColor } = getIconAndProgressColor(props.sensor);
-
+  const isAlreadyInRoute = ref(false);
+  const isRouteCreated = ref(false);
+  
   // route store
   const routeStore = useRouteStore();
-  const isAlreadyInRoute = ref(false);
-  const { getSelectedRouteList } = storeToRefs(routeStore);
+  const { getSelectedRouteList, getIsRouteOptimized } = storeToRefs(routeStore);
   
   // watch for changes in stored sensor route array (ie. when a sensor gets added or removed)
   watch(getSelectedRouteList, () => {
-    if (routeStore.getSelectedRouteList.length > 0) {
-      isAlreadyInRoute.value = !!routeStore.getSelectedRouteList.find(bin => bin.id === props.sensor.id);
-    } else {
-      isAlreadyInRoute.value = false
-    }
+    isAlreadyInRoute.value = routeStore.isAlreadyInRoute(props.sensor);
+  }, { deep: true })
+
+  watch(getIsRouteOptimized, () => {
+    isRouteCreated.value = routeStore.getIsRouteOptimized;
   }, { deep: true })
 
   function addBinToRoute(sensor) {
@@ -38,7 +39,7 @@
   }
 
   function removeBinFromRoute(sensor) {
-    // only add to route if not already added
+    // only remove from route if already added
     if (isAlreadyInRoute.value === true) {
       routeStore.removeSensorFromRoute(sensor);
     }
@@ -72,7 +73,7 @@
         <span class="bin-details__tag-list-text">Tags:</span>
         <span class="bin-details__tag">{{ props.sensor.asset_tag }}</span>
       </div>
-      <div class="bin-details__cta-routes">
+      <div class="bin-details__cta-routes" v-if="isRouteCreated">
         <v-btn variant="flat"
           class="mt-2 mb-2"
           color="#191A1C"
diff --git a/app_vue/src/components/sensorSideBarFilters.vue b/app_vue/src/components/sensorSideBarFilters.vue
index 690153ec..b21643fa 100644
--- a/app_vue/src/components/sensorSideBarFilters.vue
+++ b/app_vue/src/components/sensorSideBarFilters.vue
@@ -99,6 +99,7 @@
 
   function clearFilters() {
     sensorStore.clearSelected(); // clear store of selected values
+    routeStore.clearSensorRoute(); // clear route
     // clear v-models in form
     state.selectedGroup = null;
     state.selectedAssetTag = [];
diff --git a/app_vue/src/components/sensorSideBarRoutes.vue b/app_vue/src/components/sensorSideBarRoutes.vue
index d54a9bfe..cc42d4e8 100644
--- a/app_vue/src/components/sensorSideBarRoutes.vue
+++ b/app_vue/src/components/sensorSideBarRoutes.vue
@@ -1,42 +1,51 @@
 <script setup>
-  import { ref, watch } from 'vue'
+  import { watch, reactive } from 'vue'
   import { useRouteStore } from '@/stores/route_store';
+  import { useSensorStore } from '@/stores/sensors_store';
   import { storeToRefs } from 'pinia';
   import { v4 as uuidv4 } from 'uuid';
   import { getOptimizedRoute } from '@/utils/optimizeRouteHelper';
   import draggable from 'vuedraggable';
 
+  // stores
   const routeStore = useRouteStore();
-  const { selectedRouteList, getEnableOptimizeRoute, getIsRouteOptimized } = storeToRefs(routeStore);
-  const isOptimizeRouteEnabled = ref(true);
-  const isRouteOptimized = ref(false);
-  const drag = ref(false);
-
-  // listen for status of optimize route button
-  watch(getEnableOptimizeRoute, () => {
-    isOptimizeRouteEnabled.value = routeStore.getEnableOptimizeRoute;
+  const sensorStore = useSensorStore();
+  const { selectedRouteList, getIsRouteOptimized } = storeToRefs(routeStore);
+  const { getTotalSensors } = storeToRefs(sensorStore);
+
+  const state = reactive({
+    startPoint: '6045 Mavis Rd, Mississauga, ON L5R 4G6', // hardcoded mock values
+    endPoint: '3401 Dufferin St, Toronto, ON M6A 2T9', // hardcoded mock values
+    totalSensors: 0,
+    isFindRouteButtonEnabled: true,
+    isRouteOptimized: false,
+    drag: false
+  });
+
+  // element variables
+  watch(getTotalSensors, () => {
+    state.totalSensors = sensorStore.getTotalSensors;
   })
 
   watch(getIsRouteOptimized, () => {
-    isRouteOptimized.value = routeStore.getIsRouteOptimized;
+    state.isRouteOptimized = routeStore.getIsRouteOptimized;
   })
 
-  async function optimizeRouteClicked() {
-    // button to be disabled after first click
-    routeStore.setEnableOptimizedRoute(false);
+  async function findRouteClicked() {
+    state.isFindRouteButtonEnabled = false; // button to be disabled after first click
+    routeStore.updateRouteWithSensorList(sensorStore.sensors); // store sensors into route list
 
     // make a call to google
-    const googResponse = await getOptimizedRoute(routeStore.getSelectedRouteList);
+    const googResponse = await getOptimizedRoute(routeStore.getSelectedRouteList, state.startPoint, state.endPoint);
     if (googResponse && googResponse.routes) {
       const routeOrder = googResponse.routes[0]?.optimizedIntermediateWaypointIndex; // [0,3,4]
       routeStore.updateWithOptimizedRoute(routeOrder); // update current route
       routeStore.setIsRouteOptimized(true); // set flag is optimized to true
     }
-
   }
 
   function routeOrganized() {
-    drag.value = false; // completed drag
+    state.drag = false; // completed drag
     routeStore.setIsRouteOptimized(false);
   }
 
@@ -83,64 +92,87 @@
 <template>
   <section class="routes-list">
     <div class="text-h6 padding-b-16">Routes</div>
-    <div v-if="selectedRouteList && selectedRouteList.length !== 0" class="padding-b-16">1 route(s) found</div>
-    <div class="py-4 px-4 routes-list__route-container">
-      <!-- no route present -->
-      <span v-if="selectedRouteList && selectedRouteList.length === 0" 
-        class="font-italic">
-        No route to be displayed yet
-      </span>
-      <!-- route is present -->
-      <div class="w-100 h-100" v-else>
-        <div tabindex="0" class="w-100 h-100 d-flex align-center justify-space-between cursor-pointer">
-          <span class="font-body">{{ selectedRouteList.length }} Bins </span>
-        </div>
 
-        <!-- route list -->
-        <section>
-          <!-- route list items -->
-          <draggable 
-            v-model="selectedRouteList" 
-            tag="div"
-            item-key="id"
-            @start="drag=true"
-            @end="routeOrganized">
-            <template #item="{ element: sensor, index }">
-              <li class="routes-list__items" :class="{'margin-b-0' : selectedRouteList.length === 1}">
-                <vue-feather v-if="index === 0" class="color-green" type="disc"></vue-feather>
-                <vue-feather v-if="index > 0 && index < (selectedRouteList.length - 1)" class="transform-rotate-270" type="git-commit"></vue-feather>
-                <vue-feather v-if="index === (selectedRouteList.length - 1) && index !== 0" class="color-red" type="map-pin"></vue-feather>
-                <div class="d-flex flex-column ml-2">
-                  <span>{{ sensor.address_line1 }}</span>
-                  <span>{{ sensor.address_line2 }}</span>
-                </div>
-              </li>
-            </template>
-          </draggable>
-
-          <!-- route call-to-actions -->
-          <div class="d-flex align-center" 
-            :class="{
-              'justify-space-between': selectedRouteList && selectedRouteList.length > 1, 
-              'justify-end': selectedRouteList && selectedRouteList.length <= 1
-            }">
-            <div v-if="selectedRouteList && selectedRouteList.length > 1">
-              <v-btn v-if="selectedRouteList.length >= 4" class="pa-0" variant="plain" :disabled="isRouteOptimized" @click="optimizeRouteClicked">
-                {{ isRouteOptimized ? 'Optimized!' : 'Optimize route' }}
-              </v-btn>
-              <v-btn class="pa-0 routes-list__export" variant="plain" @click="exportRouteClicked">
-                Export route
-                <vue-feather type="upload"></vue-feather>
-              </v-btn>
+    <!-- start and end point display -->
+    <section v-if="!state.isRouteOptimized">
+      <v-text-field 
+        v-model="state.startPoint"
+        disabled
+        label="Start point" 
+        variant="underlined">
+      </v-text-field>
+      <v-text-field 
+        v-model="state.endPoint"
+        disabled
+        label="End point"
+        variant="underlined">
+      </v-text-field>
+      <v-btn color="#191A1C" :disabled="state.isRouteOptimized" @click="findRouteClicked">
+        <span class="pr-1">Find Route</span>
+        <vue-feather type="search"></vue-feather>
+      </v-btn>
+    </section>
+    
+
+    <!-- route display -->
+    <section v-else>
+      <div v-if="selectedRouteList && selectedRouteList.length !== 0" class="padding-b-16">1 route(s) found</div>
+        <div class="py-4 px-4 routes-list__route-container">
+          <!-- no route present -->
+          <span v-if="selectedRouteList && selectedRouteList.length === 0" 
+            class="font-italic">
+            No route to be displayed yet
+          </span>
+          <!-- route is present -->
+          <div class="w-100 h-100" v-else>
+            <div tabindex="0" class="w-100 h-100 d-flex align-center justify-space-between cursor-pointer">
+              <span class="font-body">{{ selectedRouteList.length }} Bins </span>
             </div>
-            <v-btn class="routes-list__delete pl-0 align-self-end" variant="plain" @click="routeStore.clearSensorRoute">
-              <vue-feather type="trash-2"></vue-feather>
-            </v-btn>
-          </div>
 
-        </section>
-      </div>
-    </div>
+            <!-- route list -->
+            <section>
+              <!-- route list items -->
+              <draggable 
+                v-model="selectedRouteList" 
+                tag="div"
+                item-key="id"
+                @start="state.drag=true"
+                @end="routeOrganized">
+                <template #item="{ element: sensor, index }">
+                  <li class="routes-list__items" :class="{'margin-b-0' : selectedRouteList.length === 1}">
+                    <vue-feather v-if="index === 0" class="color-green" type="disc"></vue-feather>
+                    <vue-feather v-if="index > 0 && index < (selectedRouteList.length - 1)" class="transform-rotate-270" type="git-commit"></vue-feather>
+                    <vue-feather v-if="index === (selectedRouteList.length - 1) && index !== 0" class="color-red" type="map-pin"></vue-feather>
+                    <div class="d-flex flex-column ml-2">
+                      <span>{{ sensor.address_line1 }}</span>
+                      <span>{{ sensor.address_line2 }}</span>
+                    </div>
+                  </li>
+                </template>
+              </draggable>
+
+              <!-- route call-to-actions -->
+              <div class="d-flex align-center" 
+                :class="{
+                  'justify-space-between': selectedRouteList && selectedRouteList.length > 1, 
+                  'justify-end': selectedRouteList && selectedRouteList.length <= 1
+                }">
+                <div v-if="selectedRouteList && selectedRouteList.length > 1">
+                  <v-btn class="pa-0 routes-list__export" variant="plain" @click="exportRouteClicked">
+                    Export route
+                    <vue-feather type="upload"></vue-feather>
+                  </v-btn>
+                </div>
+                <v-btn class="routes-list__delete pl-0 align-self-end" variant="plain" @click="routeStore.clearSensorRoute">
+                  <vue-feather type="trash-2"></vue-feather>
+                </v-btn>
+              </div>
+
+            </section>
+          </div>
+        </div>
+    </section>
+    
 
   </section>
 </template>
diff --git a/app_vue/src/stores/route_store.js b/app_vue/src/stores/route_store.js
index 11a84e93..2489c1b8 100644
--- a/app_vue/src/stores/route_store.js
+++ b/app_vue/src/stores/route_store.js
@@ -3,8 +3,7 @@ import { defineStore } from 'pinia'
 export const useRouteStore = defineStore('route', {
   state: () => ({
     selectedRouteList: [], // list of sensor objects part of the route
-    enableOptimizeRoute: true, // enables optimize route button to be clicked
-    isRouteOptimized: false
+    isRouteOptimized: false // when google api has been run on the route and we want to present it
   }),
   getters: {
     getSelectedRouteList({selectedRouteList}) {
@@ -16,18 +15,17 @@ export const useRouteStore = defineStore('route', {
       }
       return [];
     },
-    getEnableOptimizeRoute({enableOptimizeRoute}) {
-      return enableOptimizeRoute;
-    },
     getIsRouteOptimized({isRouteOptimized}) {
       return isRouteOptimized;
     },
   },
   actions: {
+    updateRouteWithSensorList(sensors) {
+      this.selectedRouteList = [...sensors];
+    },
     addSensorToRoute(sensor) {
       this.selectedRouteList.push(sensor);
       // reset
-      this.enableOptimizeRoute = true;
       this.isRouteOptimized = false;
     },
     removeSensorFromRoute(sensor) {
@@ -36,21 +34,22 @@ export const useRouteStore = defineStore('route', {
         this.selectedRouteList.splice(index, 1);
       }
       // reset
-      this.enableOptimizeRoute = true;
       this.isRouteOptimized = false;
     },
     clearSensorRoute() {
       this.selectedRouteList = [];
       // reset
-      this.enableOptimizeRoute = true;
       this.isRouteOptimized = false;
     },
-    setEnableOptimizedRoute(value) {
-      this.enableOptimizeRoute = value;
-    },
     setIsRouteOptimized(value) {
       this.isRouteOptimized = value;
     },
+    isAlreadyInRoute(sensor) {
+      if (this.getSelectedRouteList.length > 0) {
+        return !!this.getSelectedRouteList.find(bin => bin.id === sensor.id);
+      }
+      return false
+    },
     // reorders intermediate points in our selectedRouteList according to a list of given indexes (routeOrder)
     updateWithOptimizedRoute(routeOrder) {
       // assuming routeOrder looks like [originLocationSensor, midLocationSensor1...midLocationSensor4, destinationLocaitonSensor]
diff --git a/app_vue/src/utils/optimizeRouteHelper.js b/app_vue/src/utils/optimizeRouteHelper.js
index dd73e3ad..8ea83655 100644
--- a/app_vue/src/utils/optimizeRouteHelper.js
+++ b/app_vue/src/utils/optimizeRouteHelper.js
@@ -1,10 +1,13 @@
 import axios from 'axios';
 
-const getGoogPayload = (selectedRouteList) => {
+const getGoogPayload = (selectedRouteList, originAddress, destinationAddress) => {
+  const origin = {
+    "address": originAddress
+  };
+  const destination = {
+    "address": destinationAddress
+  };
   const waypointArr = [...selectedRouteList]; // ensures original variable isnt modified
-  const origin = waypointArr.shift(); // grab first sensor in route
-  const destination = waypointArr.pop(); // grab last sensor in route
-  
   const intermediates = waypointArr.map(waypoint => {
     return {
       "location":{
@@ -17,23 +20,9 @@ const getGoogPayload = (selectedRouteList) => {
   });
 
   const data = {
-    "origin": { // specify starting point
-      "location":{
-        "latLng":{
-          "latitude": origin.lat,
-          "longitude": origin.long
-        }
-      }
-    },
-    intermediates,
-    "destination":{ // specify ending point
-      "location":{
-        "latLng":{
-          "latitude": destination.lat,
-          "longitude": destination.long
-        }
-      }
-    },
+    "origin": origin,
+    "intermediates": intermediates,
+    "destination": destination,
     "travelMode": "DRIVE",
     "routingPreference": "TRAFFIC_UNAWARE",
     "computeAlternativeRoutes": false,
@@ -44,24 +33,76 @@ const getGoogPayload = (selectedRouteList) => {
     },
     "languageCode": "en-US",
     "units": "IMPERIAL",
-    "optimizeWaypointOrder": "true", // note this special feature being true charges us advanced:route pricing
+    "optimizeWaypointOrder": "true",
   };
   return data;
 };
 
 // google api call to optimize route
 // https://developers.google.com/maps/documentation/routes/opt-way
-export const getOptimizedRoute = async (selectedRouteList) => {
+export const getOptimizedRoute = async (selectedRouteList, originAddress, destinationAddress) => {
 
   if (selectedRouteList && selectedRouteList.length === 0) {
     return;
   }
   // google headers
-  const googApiKey = 'AIzaSyAgixnED4py56GFy-b2hlfYgofEyISUjSo'; //TODO: move to .env
+  const googApiKey = 'AIzaSyAgixnED4py56GFy-b2hlfYgofEyISUjSo';
   const googFieldMask = 'routes.duration,routes.distanceMeters,routes.optimizedIntermediateWaypointIndex';
   const URL = 'https://routes.googleapis.com/directions/v2:computeRoutes';
-  const data = getGoogPayload(selectedRouteList);
-
+  const data = getGoogPayload(selectedRouteList, originAddress, destinationAddress);
+  // const data = {
+  //   "origin": {
+  //     "address": "McLaren+Vale,SA"
+  //   },
+  //   "intermediates": [
+  //     {
+  //       "location":{
+  //         "latLng":{
+  //           "latitude": 37.417670,
+  //           "longitude": -122.079595
+  //         }
+  //       }
+  //     },
+  //     {
+  //       "location":{
+  //         "latLng":{
+  //           "latitude": 37.419734,
+  //           "longitude": -122.0827784
+  //         }
+  //       }
+  //     }
+  //   ],
+  //   "destination": {
+  //     "address": "Adelaide,SA"
+  //   },
+  //   "travelMode": "DRIVE",
+  //   "routingPreference": "TRAFFIC_UNAWARE",
+  //   "computeAlternativeRoutes": false,
+  //   "routeModifiers": {
+  //     "avoidTolls": false,
+  //     "avoidHighways": false,
+  //     "avoidFerries": false
+  //   },
+  //   "languageCode": "en-US",
+  //   "units": "IMPERIAL",
+  //   "optimizeWaypointOrder": "true"
+  // };
+  // const data = {
+  //   "origin": {
+  //     "address": "Adelaide,SA"
+  //   },
+  //   "destination": {
+  //     "address": "Adelaide,SA"
+  //   },
+  //   "intermediates": [
+  //     {"address": "Barossa+Valley,SA"},
+  //     {"address": "Clare,SA"},
+  //     {"address": "Connawarra,SA"},
+  //     {"address": "McLaren+Vale,SA"}
+  //   ],
+  //   "travelMode": "DRIVE",
+  //   "optimizeWaypointOrder": "true"
+  //   };
   const config = {
     headers: {
       'Content-Type': 'application/json',
@@ -72,6 +113,8 @@ export const getOptimizedRoute = async (selectedRouteList) => {
 
   try {
     const response = await axios.post(URL, data, config);
+    console.log('data', data);
+    console.log('response', response);
     if (response) {
       return response.data;
     }

From afa6a46802726d0e434919f8b3553092034fe877 Mon Sep 17 00:00:00 2001
From: monicakochofar <monicakochofar@gmail.com>
Date: Mon, 11 Sep 2023 14:03:08 -0400
Subject: [PATCH 03/20] cleanup

---
 app_vue/src/data/latestReadingsMock.json |  4 +-
 app_vue/src/utils/optimizeRouteHelper.js | 71 +++---------------------
 sensational_sensors/main.py              |  4 +-
 3 files changed, 12 insertions(+), 67 deletions(-)

diff --git a/app_vue/src/data/latestReadingsMock.json b/app_vue/src/data/latestReadingsMock.json
index c7f7f217..63a05e27 100644
--- a/app_vue/src/data/latestReadingsMock.json
+++ b/app_vue/src/data/latestReadingsMock.json
@@ -133,8 +133,8 @@
       "id": "265434817",
       "sensor_type": "solid bin level",
       "fill_level": 40,
-      "lat": 43.351197,
-      "long": -79.347344,
+      "lat": 43.452197,
+      "long": -80.147244,
       "manufacturer": "Sensational Sensors",
       "bin_name": "Cherry Bin",
       "address_line1": "99473 Fruit Blvd",
diff --git a/app_vue/src/utils/optimizeRouteHelper.js b/app_vue/src/utils/optimizeRouteHelper.js
index 8ea83655..748e9cc3 100644
--- a/app_vue/src/utils/optimizeRouteHelper.js
+++ b/app_vue/src/utils/optimizeRouteHelper.js
@@ -10,8 +10,8 @@ const getGoogPayload = (selectedRouteList, originAddress, destinationAddress) =>
   const waypointArr = [...selectedRouteList]; // ensures original variable isnt modified
   const intermediates = waypointArr.map(waypoint => {
     return {
-      "location":{
-        "latLng":{
+      "location": {
+        "latLng": {
           "latitude": waypoint.lat,
           "longitude": waypoint.long
         }
@@ -19,10 +19,10 @@ const getGoogPayload = (selectedRouteList, originAddress, destinationAddress) =>
     }
   });
 
-  const data = {
-    "origin": origin,
-    "intermediates": intermediates,
-    "destination": destination,
+  return {
+    origin,
+    intermediates,
+    destination,
     "travelMode": "DRIVE",
     "routingPreference": "TRAFFIC_UNAWARE",
     "computeAlternativeRoutes": false,
@@ -33,9 +33,8 @@ const getGoogPayload = (selectedRouteList, originAddress, destinationAddress) =>
     },
     "languageCode": "en-US",
     "units": "IMPERIAL",
-    "optimizeWaypointOrder": "true",
+    "optimizeWaypointOrder": "true"
   };
-  return data;
 };
 
 // google api call to optimize route
@@ -50,59 +49,6 @@ export const getOptimizedRoute = async (selectedRouteList, originAddress, destin
   const googFieldMask = 'routes.duration,routes.distanceMeters,routes.optimizedIntermediateWaypointIndex';
   const URL = 'https://routes.googleapis.com/directions/v2:computeRoutes';
   const data = getGoogPayload(selectedRouteList, originAddress, destinationAddress);
-  // const data = {
-  //   "origin": {
-  //     "address": "McLaren+Vale,SA"
-  //   },
-  //   "intermediates": [
-  //     {
-  //       "location":{
-  //         "latLng":{
-  //           "latitude": 37.417670,
-  //           "longitude": -122.079595
-  //         }
-  //       }
-  //     },
-  //     {
-  //       "location":{
-  //         "latLng":{
-  //           "latitude": 37.419734,
-  //           "longitude": -122.0827784
-  //         }
-  //       }
-  //     }
-  //   ],
-  //   "destination": {
-  //     "address": "Adelaide,SA"
-  //   },
-  //   "travelMode": "DRIVE",
-  //   "routingPreference": "TRAFFIC_UNAWARE",
-  //   "computeAlternativeRoutes": false,
-  //   "routeModifiers": {
-  //     "avoidTolls": false,
-  //     "avoidHighways": false,
-  //     "avoidFerries": false
-  //   },
-  //   "languageCode": "en-US",
-  //   "units": "IMPERIAL",
-  //   "optimizeWaypointOrder": "true"
-  // };
-  // const data = {
-  //   "origin": {
-  //     "address": "Adelaide,SA"
-  //   },
-  //   "destination": {
-  //     "address": "Adelaide,SA"
-  //   },
-  //   "intermediates": [
-  //     {"address": "Barossa+Valley,SA"},
-  //     {"address": "Clare,SA"},
-  //     {"address": "Connawarra,SA"},
-  //     {"address": "McLaren+Vale,SA"}
-  //   ],
-  //   "travelMode": "DRIVE",
-  //   "optimizeWaypointOrder": "true"
-  //   };
   const config = {
     headers: {
       'Content-Type': 'application/json',
@@ -112,9 +58,8 @@ export const getOptimizedRoute = async (selectedRouteList, originAddress, destin
   };
 
   try {
+    // if there is an empty object returned, then there is an incorrect lat/long passed
     const response = await axios.post(URL, data, config);
-    console.log('data', data);
-    console.log('response', response);
     if (response) {
       return response.data;
     }
diff --git a/sensational_sensors/main.py b/sensational_sensors/main.py
index 5a2c11e3..4e0549b9 100644
--- a/sensational_sensors/main.py
+++ b/sensational_sensors/main.py
@@ -151,8 +151,8 @@ class Sensor(BaseModel):
         "sensor_type": SensorType.LIQUID_BIN_LEVEL,
         "fill_level": 40,
         "sim": "81kai41j8",
-        "lat": 43.351197,
-        "long": -79.347344,
+        "lat": 43.452197,
+        "long": -80.147244,
         "man": "Sensational Sensors",
         "bin_name": "Cherry Bin",
         "address_line1": "99473 Fruit Blvd",

From 9a370aa8e43f00f8b3daa239650b61316cb637a8 Mon Sep 17 00:00:00 2001
From: monicakochofar <monicakochofar@gmail.com>
Date: Mon, 11 Sep 2023 14:30:30 -0400
Subject: [PATCH 04/20] cleanup

---
 app_vue/src/components/sensorMap.vue          |  1 -
 .../src/components/sensorSideBarRoutes.vue    | 33 ++++++++++++++-----
 app_vue/src/stores/route_store.js             | 20 ++++++++---
 3 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/app_vue/src/components/sensorMap.vue b/app_vue/src/components/sensorMap.vue
index 58f64edc..04248c22 100644
--- a/app_vue/src/components/sensorMap.vue
+++ b/app_vue/src/components/sensorMap.vue
@@ -29,7 +29,6 @@
 
   watch(getIsRouteOptimized, () => {
     state.isRouteOptimized = routeStore.getIsRouteOptimized;
-    console.log('state.isRouteOptimized', state.isRouteOptimized)
   })
 
   onMounted(() => {
diff --git a/app_vue/src/components/sensorSideBarRoutes.vue b/app_vue/src/components/sensorSideBarRoutes.vue
index cc42d4e8..c0f342cc 100644
--- a/app_vue/src/components/sensorSideBarRoutes.vue
+++ b/app_vue/src/components/sensorSideBarRoutes.vue
@@ -1,5 +1,5 @@
 <script setup>
-  import { watch, reactive } from 'vue'
+  import { watch, reactive, onMounted } from 'vue'
   import { useRouteStore } from '@/stores/route_store';
   import { useSensorStore } from '@/stores/sensors_store';
   import { storeToRefs } from 'pinia';
@@ -14,14 +14,19 @@
   const { getTotalSensors } = storeToRefs(sensorStore);
 
   const state = reactive({
-    startPoint: '6045 Mavis Rd, Mississauga, ON L5R 4G6', // hardcoded mock values
-    endPoint: '3401 Dufferin St, Toronto, ON M6A 2T9', // hardcoded mock values
+    startPoint: '',
+    endPoint: '',
     totalSensors: 0,
     isFindRouteButtonEnabled: true,
     isRouteOptimized: false,
     drag: false
   });
 
+  onMounted(() => {
+    state.startPoint = routeStore.getStartPoint;
+    state.endPoint = routeStore.getEndPoint;
+  })
+
   // element variables
   watch(getTotalSensors, () => {
     state.totalSensors = sensorStore.getTotalSensors;
@@ -131,18 +136,21 @@
 
             <!-- route list -->
             <section>
-              <!-- route list items -->
+              <!-- starting point -->
+              <div class="d-flex align-center">
+                <vue-feather class="color-green" type="disc"></vue-feather>
+                <span class="routes-list__point ml-2 mt-4">{{ state.startPoint }}</span>
+              </div>
+              <!-- destinations -->
               <draggable 
                 v-model="selectedRouteList" 
                 tag="div"
                 item-key="id"
                 @start="state.drag=true"
                 @end="routeOrganized">
-                <template #item="{ element: sensor, index }">
+                <template #item="{ element: sensor }">
                   <li class="routes-list__items" :class="{'margin-b-0' : selectedRouteList.length === 1}">
-                    <vue-feather v-if="index === 0" class="color-green" type="disc"></vue-feather>
-                    <vue-feather v-if="index > 0 && index < (selectedRouteList.length - 1)" class="transform-rotate-270" type="git-commit"></vue-feather>
-                    <vue-feather v-if="index === (selectedRouteList.length - 1) && index !== 0" class="color-red" type="map-pin"></vue-feather>
+                    <vue-feather class="transform-rotate-270" type="git-commit"></vue-feather>
                     <div class="d-flex flex-column ml-2">
                       <span>{{ sensor.address_line1 }}</span>
                       <span>{{ sensor.address_line2 }}</span>
@@ -150,6 +158,11 @@
                   </li>
                 </template>
               </draggable>
+              <!-- ending point -->
+              <div class="d-flex align-center">
+                <vue-feather class="color-red" type="map-pin"></vue-feather>
+                <span class="routes-list__point ml-2 mb-4">{{ state.endPoint }}</span>
+              </div>
 
               <!-- route call-to-actions -->
               <div class="d-flex align-center" 
@@ -216,6 +229,10 @@
       cursor: pointer;
     }
 
+    &__point {
+      max-width: 174px;
+    }
+
     :deep .v-btn--size-default {
       min-width: 24px;
     }
diff --git a/app_vue/src/stores/route_store.js b/app_vue/src/stores/route_store.js
index 2489c1b8..51834a80 100644
--- a/app_vue/src/stores/route_store.js
+++ b/app_vue/src/stores/route_store.js
@@ -3,7 +3,9 @@ import { defineStore } from 'pinia'
 export const useRouteStore = defineStore('route', {
   state: () => ({
     selectedRouteList: [], // list of sensor objects part of the route
-    isRouteOptimized: false // when google api has been run on the route and we want to present it
+    isRouteOptimized: false, // when google api has been run on the route and we want to present it
+    startPoint: '6045 Mavis Rd, Mississauga, ON L5R 4G6',
+    endPoint: '3401 Dufferin St, Toronto, ON M6A 2T9'
   }),
   getters: {
     getSelectedRouteList({selectedRouteList}) {
@@ -18,8 +20,20 @@ export const useRouteStore = defineStore('route', {
     getIsRouteOptimized({isRouteOptimized}) {
       return isRouteOptimized;
     },
+    getStartPoint({startPoint}) {
+      return startPoint;
+    },
+    getEndPoint({endPoint}) {
+      return endPoint;
+    }
   },
   actions: {
+    setStartPoint(value) {
+      this.startPoint = value;
+    },
+    setEndPoint(value) {
+      this.endPoint = value;
+    },
     updateRouteWithSensorList(sensors) {
       this.selectedRouteList = [...sensors];
     },
@@ -55,8 +69,6 @@ export const useRouteStore = defineStore('route', {
       // assuming routeOrder looks like [originLocationSensor, midLocationSensor1...midLocationSensor4, destinationLocaitonSensor]
       // variable to hold our intermediate waypoints for update (no start/end point included)
       const intermediates = [...this.selectedRouteList];
-      intermediates.shift(); // remove start point
-      intermediates.pop(); // remove end point
 
       // refer to google route order and match it to our defined route
       // copy result to temp
@@ -72,7 +84,7 @@ export const useRouteStore = defineStore('route', {
       }
 
       // update saved routelist with new route order
-      this.selectedRouteList.splice(1, intermediates.length, ...intermediates);
+      this.selectedRouteList = [...intermediates];
     }
   },
 })
\ No newline at end of file

From 77b412e9d26cb736d00853dd04c9d5e2d186faa1 Mon Sep 17 00:00:00 2001
From: monicakochofar <monicakochofar@gmail.com>
Date: Mon, 11 Sep 2023 16:42:06 -0400
Subject: [PATCH 05/20] reorganizing columns and adding duration and distance
 values

---
 app_vue/README.md                             |   3 +
 .../images/{ => binMarkerIcons}/alert-bin.png | Bin
 .../{ => binMarkerIcons}/battery-bin.png      | Bin
 .../images/{ => binMarkerIcons}/empty-bin.png | Bin
 .../images/{ => binMarkerIcons}/fire-bin.png  | Bin
 .../images/{ => binMarkerIcons}/full-bin.png  | Bin
 .../{ => binMarkerIcons}/half-full-bin.png    | Bin
 app_vue/src/assets/images/feather-disc.svg    |   1 +
 app_vue/src/assets/images/feather-mappin.svg  |   1 +
 .../{ => materialTypeIcons}/cardboard.svg     |   0
 .../{ => materialTypeIcons}/compost.svg       |   0
 .../generic-material.svg                      |   0
 .../{ => materialTypeIcons}/oil-drum.svg      |   0
 .../{ => materialTypeIcons}/plastic.svg       |   0
 .../images/{ => materialTypeIcons}/trash.svg  |   0
 app_vue/src/components/sensorMap.vue          |  54 +++++--
 .../src/components/sensorSideBarRoutes.vue    | 138 ++++++++++--------
 app_vue/src/stores/route_store.js             |  25 +++-
 app_vue/src/utils/formattingHelper.js         |  18 +++
 .../src/utils/getLatLngFromAddressHelper.js   |  19 +++
 app_vue/src/utils/mapMarkerHelper.js          |  30 ++--
 21 files changed, 196 insertions(+), 93 deletions(-)
 rename app_vue/src/assets/images/{ => binMarkerIcons}/alert-bin.png (100%)
 rename app_vue/src/assets/images/{ => binMarkerIcons}/battery-bin.png (100%)
 rename app_vue/src/assets/images/{ => binMarkerIcons}/empty-bin.png (100%)
 rename app_vue/src/assets/images/{ => binMarkerIcons}/fire-bin.png (100%)
 rename app_vue/src/assets/images/{ => binMarkerIcons}/full-bin.png (100%)
 rename app_vue/src/assets/images/{ => binMarkerIcons}/half-full-bin.png (100%)
 create mode 100644 app_vue/src/assets/images/feather-disc.svg
 create mode 100644 app_vue/src/assets/images/feather-mappin.svg
 rename app_vue/src/assets/images/{ => materialTypeIcons}/cardboard.svg (100%)
 rename app_vue/src/assets/images/{ => materialTypeIcons}/compost.svg (100%)
 rename app_vue/src/assets/images/{ => materialTypeIcons}/generic-material.svg (100%)
 rename app_vue/src/assets/images/{ => materialTypeIcons}/oil-drum.svg (100%)
 rename app_vue/src/assets/images/{ => materialTypeIcons}/plastic.svg (100%)
 rename app_vue/src/assets/images/{ => materialTypeIcons}/trash.svg (100%)
 create mode 100644 app_vue/src/utils/formattingHelper.js
 create mode 100644 app_vue/src/utils/getLatLngFromAddressHelper.js

diff --git a/app_vue/README.md b/app_vue/README.md
index 909b5ff4..ba7e4590 100644
--- a/app_vue/README.md
+++ b/app_vue/README.md
@@ -49,6 +49,9 @@ bin/vueLocalDeploy.sh
 ### Vue3 Leaflet - Map Library
 - this library allows us to generate a map and place relevant markers
 
+### Google Maps Routes API
+- this is used to calculate the optimal order of bins to visit
+- note that if it returns empty object {} it is likely that your request is passing incorrect lat/long or location data
 
 ## Folder structure
 
diff --git a/app_vue/src/assets/images/alert-bin.png b/app_vue/src/assets/images/binMarkerIcons/alert-bin.png
similarity index 100%
rename from app_vue/src/assets/images/alert-bin.png
rename to app_vue/src/assets/images/binMarkerIcons/alert-bin.png
diff --git a/app_vue/src/assets/images/battery-bin.png b/app_vue/src/assets/images/binMarkerIcons/battery-bin.png
similarity index 100%
rename from app_vue/src/assets/images/battery-bin.png
rename to app_vue/src/assets/images/binMarkerIcons/battery-bin.png
diff --git a/app_vue/src/assets/images/empty-bin.png b/app_vue/src/assets/images/binMarkerIcons/empty-bin.png
similarity index 100%
rename from app_vue/src/assets/images/empty-bin.png
rename to app_vue/src/assets/images/binMarkerIcons/empty-bin.png
diff --git a/app_vue/src/assets/images/fire-bin.png b/app_vue/src/assets/images/binMarkerIcons/fire-bin.png
similarity index 100%
rename from app_vue/src/assets/images/fire-bin.png
rename to app_vue/src/assets/images/binMarkerIcons/fire-bin.png
diff --git a/app_vue/src/assets/images/full-bin.png b/app_vue/src/assets/images/binMarkerIcons/full-bin.png
similarity index 100%
rename from app_vue/src/assets/images/full-bin.png
rename to app_vue/src/assets/images/binMarkerIcons/full-bin.png
diff --git a/app_vue/src/assets/images/half-full-bin.png b/app_vue/src/assets/images/binMarkerIcons/half-full-bin.png
similarity index 100%
rename from app_vue/src/assets/images/half-full-bin.png
rename to app_vue/src/assets/images/binMarkerIcons/half-full-bin.png
diff --git a/app_vue/src/assets/images/feather-disc.svg b/app_vue/src/assets/images/feather-disc.svg
new file mode 100644
index 00000000..e20eb36a
--- /dev/null
+++ b/app_vue/src/assets/images/feather-disc.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#009E08" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-disc"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="3"></circle></svg>
\ No newline at end of file
diff --git a/app_vue/src/assets/images/feather-mappin.svg b/app_vue/src/assets/images/feather-mappin.svg
new file mode 100644
index 00000000..083acda2
--- /dev/null
+++ b/app_vue/src/assets/images/feather-mappin.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#C92828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-map-pin"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
\ No newline at end of file
diff --git a/app_vue/src/assets/images/cardboard.svg b/app_vue/src/assets/images/materialTypeIcons/cardboard.svg
similarity index 100%
rename from app_vue/src/assets/images/cardboard.svg
rename to app_vue/src/assets/images/materialTypeIcons/cardboard.svg
diff --git a/app_vue/src/assets/images/compost.svg b/app_vue/src/assets/images/materialTypeIcons/compost.svg
similarity index 100%
rename from app_vue/src/assets/images/compost.svg
rename to app_vue/src/assets/images/materialTypeIcons/compost.svg
diff --git a/app_vue/src/assets/images/generic-material.svg b/app_vue/src/assets/images/materialTypeIcons/generic-material.svg
similarity index 100%
rename from app_vue/src/assets/images/generic-material.svg
rename to app_vue/src/assets/images/materialTypeIcons/generic-material.svg
diff --git a/app_vue/src/assets/images/oil-drum.svg b/app_vue/src/assets/images/materialTypeIcons/oil-drum.svg
similarity index 100%
rename from app_vue/src/assets/images/oil-drum.svg
rename to app_vue/src/assets/images/materialTypeIcons/oil-drum.svg
diff --git a/app_vue/src/assets/images/plastic.svg b/app_vue/src/assets/images/materialTypeIcons/plastic.svg
similarity index 100%
rename from app_vue/src/assets/images/plastic.svg
rename to app_vue/src/assets/images/materialTypeIcons/plastic.svg
diff --git a/app_vue/src/assets/images/trash.svg b/app_vue/src/assets/images/materialTypeIcons/trash.svg
similarity index 100%
rename from app_vue/src/assets/images/trash.svg
rename to app_vue/src/assets/images/materialTypeIcons/trash.svg
diff --git a/app_vue/src/components/sensorMap.vue b/app_vue/src/components/sensorMap.vue
index 04248c22..9d11f2a5 100644
--- a/app_vue/src/components/sensorMap.vue
+++ b/app_vue/src/components/sensorMap.vue
@@ -1,9 +1,10 @@
 <script setup>
-  import { reactive, onMounted, watch } from 'vue'
+  import { reactive, onMounted, watch, onBeforeMount } from 'vue'
   import SensorMapMarker from '@/components/sensorMapMarker.vue';
   import 'leaflet/dist/leaflet.css'
-  import { LMap, LTileLayer, LMarker, LControlZoom, LPolyline } from '@vue-leaflet/vue-leaflet'
+  import { LMap, LTileLayer, LMarker, LControlZoom, LPolyline, LIcon } from '@vue-leaflet/vue-leaflet'
   import { useDevice, DEVICE_SIZE } from '@/utils/screenSizeHelper';
+  import { getLatLng } from '@/utils/getLatLngFromAddressHelper';
   import { useSensorStore } from '@/stores/sensors_store';
   import { useRouteStore } from '@/stores/route_store';
   import { storeToRefs } from 'pinia';
@@ -12,23 +13,27 @@
   const sensorStore = useSensorStore();
   const { sensors } = storeToRefs(sensorStore);
   const routeStore = useRouteStore();
-  const { getSelectedRouteLatLong, getIsRouteOptimized } = storeToRefs(routeStore);
+  const { 
+    getSelectedRouteLatLong, 
+    getIsRouteOptimized } = storeToRefs(routeStore);
 
   const state = reactive({
     location: 'bottomright',
     device: useDevice(),
     isRouteOptimized: false,
     polyLineLatLngs: [],
+    startPointWaypoint: [],
+    endPointWaypoint: [],
     zoom: 10,
     center: [43.7, -79.42] // TODO: update to possibly be user's current location
   });
 
-  watch(getSelectedRouteLatLong, () => {
-    state.polyLineLatLngs = routeStore.getSelectedRouteLatLong;
-  }, { deep: true })
+  const startImgUrl = 'src/assets/images/feather-disc.svg';
+  const endImgUrl = 'src/assets/images/feather-mappin.svg';
 
-  watch(getIsRouteOptimized, () => {
-    state.isRouteOptimized = routeStore.getIsRouteOptimized;
+  onBeforeMount(async () => {
+    state.startPointWaypoint = await getLatLng(routeStore.getStartPoint);
+    state.endPointWaypoint = await getLatLng(routeStore.getEndPoint);
   })
 
   onMounted(() => {
@@ -36,6 +41,20 @@
     window.addEventListener("resize", positionZoom);
   });
 
+  watch(getSelectedRouteLatLong, () => {
+    state.polyLineLatLngs = routeStore.getSelectedRouteLatLong;
+
+    // additional lines for start and end points
+    if (state.startPointWaypoint.length && state.endPointWaypoint.length) {
+      state.polyLineLatLngs.unshift(state.startPointWaypoint);
+      state.polyLineLatLngs.push(state.endPointWaypoint);
+    }
+  }, { deep: true })
+
+  watch(getIsRouteOptimized, () => {
+    state.isRouteOptimized = routeStore.getIsRouteOptimized;
+  })
+
   function positionZoom() {
     state.device = useDevice();
     if (state.device.size === DEVICE_SIZE.s || state.device.size === DEVICE_SIZE.xs) {
@@ -50,9 +69,9 @@
   <div v-if="sensors" class="sensor-map-container">
     <l-map ref="map" v-model:zoom="state.zoom" :use-global-leaflet="false" :center="state.center" :options="{zoomControl: false}">
       <l-control-zoom :position="state.location"/>
-      <!-- alternative maps (for aesthetic): -->
-      <!-- favourite: https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png -->
-      <!-- another one: https://tiles.stadiamaps.com/tiles/osm_bright/{z}/{x}/{y}{r}.png -->
+      <!-- alternative maps URLS (for aesthetic): -->
+      <!-- https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png -->
+      <!-- https://tiles.stadiamaps.com/tiles/osm_bright/{z}/{x}/{y}{r}.png -->
       <l-tile-layer
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         layer-type="base"
@@ -60,6 +79,19 @@
       ></l-tile-layer>
       <l-polyline v-if="state.isRouteOptimized" :lat-lngs="state.polyLineLatLngs"></l-polyline>
 
+      <!-- starting point marker -->
+      <l-marker v-if="state.startPointWaypoint.length"
+        :lat-lng="state.startPointWaypoint">
+        <l-icon class="color-green" :icon-size="[25, 25]" :icon-anchor="[15, 14]" :icon-url="startImgUrl" />
+      </l-marker>
+
+      <!-- ending point marker -->
+      <l-marker v-if="state.endPointWaypoint.length"
+        :lat-lng="state.endPointWaypoint">
+        <l-icon :icon-size="[25, 25]" :icon-anchor="[12, 14]" :icon-url="endImgUrl" />
+      </l-marker>
+
+
       <l-marker
         v-for="sensor in sensors"
         :key="sensor.id"
diff --git a/app_vue/src/components/sensorSideBarRoutes.vue b/app_vue/src/components/sensorSideBarRoutes.vue
index c0f342cc..4d8ebdbc 100644
--- a/app_vue/src/components/sensorSideBarRoutes.vue
+++ b/app_vue/src/components/sensorSideBarRoutes.vue
@@ -5,6 +5,7 @@
   import { storeToRefs } from 'pinia';
   import { v4 as uuidv4 } from 'uuid';
   import { getOptimizedRoute } from '@/utils/optimizeRouteHelper';
+  import { getMinutesString, getKmFromMeterString } from '@/utils/formattingHelper';
   import draggable from 'vuedraggable';
 
   // stores
@@ -17,7 +18,6 @@
     startPoint: '',
     endPoint: '',
     totalSensors: 0,
-    isFindRouteButtonEnabled: true,
     isRouteOptimized: false,
     drag: false
   });
@@ -37,21 +37,31 @@
   })
 
   async function findRouteClicked() {
-    state.isFindRouteButtonEnabled = false; // button to be disabled after first click
-    routeStore.updateRouteWithSensorList(sensorStore.sensors); // store sensors into route list
+    routeStore.updateRouteWithSensorList(sensorStore.sensors); // store current displayed sensors into route list
+    await optimizeRoute();
+  }
 
+  async function optimizeRoute() {
     // make a call to google
     const googResponse = await getOptimizedRoute(routeStore.getSelectedRouteList, state.startPoint, state.endPoint);
-    if (googResponse && googResponse.routes) {
-      const routeOrder = googResponse.routes[0]?.optimizedIntermediateWaypointIndex; // [0,3,4]
+    if (googResponse && googResponse.routes && googResponse.routes[0]) {
+      const routeOrder = googResponse.routes[0].optimizedIntermediateWaypointIndex; // [0,3,4]
       routeStore.updateWithOptimizedRoute(routeOrder); // update current route
       routeStore.setIsRouteOptimized(true); // set flag is optimized to true
+
+      if (googResponse.routes[0].duration) {
+        routeStore.setRouteDuration(googResponse.routes[0]?.duration);
+      }
+
+      if (googResponse.routes[0].distanceMeters) {
+        routeStore.setRouteDistance(googResponse.routes[0]?.distanceMeters);
+      }
+      
     }
   }
 
-  function routeOrganized() {
+  function routeDragged() {
     state.drag = false; // completed drag
-    routeStore.setIsRouteOptimized(false);
   }
 
   function exportRouteClicked() {
@@ -122,68 +132,72 @@
     <!-- route display -->
     <section v-else>
       <div v-if="selectedRouteList && selectedRouteList.length !== 0" class="padding-b-16">1 route(s) found</div>
-        <div class="py-4 px-4 routes-list__route-container">
-          <!-- no route present -->
-          <span v-if="selectedRouteList && selectedRouteList.length === 0" 
-            class="font-italic">
-            No route to be displayed yet
-          </span>
-          <!-- route is present -->
-          <div class="w-100 h-100" v-else>
-            <div tabindex="0" class="w-100 h-100 d-flex align-center justify-space-between cursor-pointer">
-              <span class="font-body">{{ selectedRouteList.length }} Bins </span>
+      <div class="py-4 px-4 routes-list__route-container">
+        <!-- route is present -->
+        <div class="w-100 h-100">
+          <div tabindex="0" class="w-100 h-100 d-flex align-center justify-space-between cursor-pointer">
+            <span class="font-body">
+              {{ selectedRouteList.length }} Bins    
+            </span>
+            <span>&#8226;</span>
+            <div class="d-flex flex-column">
+              <span> {{ getMinutesString(routeStore.getRouteDuration) }}</span>
+              <span> ({{ getKmFromMeterString(routeStore.getRouteDistance) }}km)</span>
             </div>
 
-            <!-- route list -->
-            <section>
-              <!-- starting point -->
-              <div class="d-flex align-center">
-                <vue-feather class="color-green" type="disc"></vue-feather>
-                <span class="routes-list__point ml-2 mt-4">{{ state.startPoint }}</span>
-              </div>
-              <!-- destinations -->
-              <draggable 
-                v-model="selectedRouteList" 
-                tag="div"
-                item-key="id"
-                @start="state.drag=true"
-                @end="routeOrganized">
-                <template #item="{ element: sensor }">
-                  <li class="routes-list__items" :class="{'margin-b-0' : selectedRouteList.length === 1}">
-                    <vue-feather class="transform-rotate-270" type="git-commit"></vue-feather>
-                    <div class="d-flex flex-column ml-2">
-                      <span>{{ sensor.address_line1 }}</span>
-                      <span>{{ sensor.address_line2 }}</span>
-                    </div>
-                  </li>
-                </template>
-              </draggable>
-              <!-- ending point -->
-              <div class="d-flex align-center">
-                <vue-feather class="color-red" type="map-pin"></vue-feather>
-                <span class="routes-list__point ml-2 mb-4">{{ state.endPoint }}</span>
-              </div>
 
-              <!-- route call-to-actions -->
-              <div class="d-flex align-center" 
-                :class="{
-                  'justify-space-between': selectedRouteList && selectedRouteList.length > 1, 
-                  'justify-end': selectedRouteList && selectedRouteList.length <= 1
-                }">
-                <div v-if="selectedRouteList && selectedRouteList.length > 1">
-                  <v-btn class="pa-0 routes-list__export" variant="plain" @click="exportRouteClicked">
-                    Export route
-                    <vue-feather type="upload"></vue-feather>
-                  </v-btn>
-                </div>
-                <v-btn class="routes-list__delete pl-0 align-self-end" variant="plain" @click="routeStore.clearSensorRoute">
-                  <vue-feather type="trash-2"></vue-feather>
+          </div>
+
+          <!-- route list -->
+          <section>
+            <!-- starting point -->
+            <div class="d-flex align-center">
+              <vue-feather class="color-green" type="disc"></vue-feather>
+              <span class="routes-list__point ml-2 mt-4">{{ state.startPoint }}</span>
+            </div>
+            <!-- destinations -->
+            <draggable 
+              v-model="selectedRouteList" 
+              tag="div"
+              item-key="id"
+              @start="state.drag=true"
+              @end="routeDragged">
+              <template #item="{ element: sensor }">
+                <li class="routes-list__items" :class="{'margin-b-0' : selectedRouteList.length === 1}">
+                  <vue-feather class="transform-rotate-270" type="git-commit"></vue-feather>
+                  <div class="d-flex flex-column ml-2">
+                    <span>{{ sensor.address_line1 }}</span>
+                    <span>{{ sensor.address_line2 }}</span>
+                  </div>
+                </li>
+              </template>
+            </draggable>
+            <!-- ending point -->
+            <div class="d-flex align-center">
+              <vue-feather class="color-red" type="map-pin"></vue-feather>
+              <span class="routes-list__point ml-2 mb-4">{{ state.endPoint }}</span>
+            </div>
+
+            <!-- route call-to-actions -->
+            <div class="d-flex align-center" 
+              :class="{
+                'justify-space-between': selectedRouteList && selectedRouteList.length > 1, 
+                'justify-end': selectedRouteList && selectedRouteList.length <= 1
+              }">
+              <div v-if="selectedRouteList && selectedRouteList.length > 1">
+                <v-btn class="pa-0 routes-list__export" variant="plain" @click="exportRouteClicked">
+                  Export route
+                  <vue-feather type="upload"></vue-feather>
                 </v-btn>
               </div>
+              <v-btn class="routes-list__delete pl-0 align-self-end" variant="plain" @click="routeStore.clearSensorRoute">
+                <vue-feather type="trash-2"></vue-feather>
+              </v-btn>
+            </div>
 
-            </section>
-          </div>
+          </section>
         </div>
+      </div>
     </section>
     
 
diff --git a/app_vue/src/stores/route_store.js b/app_vue/src/stores/route_store.js
index 51834a80..d7a40307 100644
--- a/app_vue/src/stores/route_store.js
+++ b/app_vue/src/stores/route_store.js
@@ -4,8 +4,10 @@ export const useRouteStore = defineStore('route', {
   state: () => ({
     selectedRouteList: [], // list of sensor objects part of the route
     isRouteOptimized: false, // when google api has been run on the route and we want to present it
-    startPoint: '6045 Mavis Rd, Mississauga, ON L5R 4G6',
-    endPoint: '3401 Dufferin St, Toronto, ON M6A 2T9'
+    startPoint: '6045 Mavis Rd Mississauga ON L5R 4G6',
+    endPoint: '3401 Dufferin St Toronto ON M6A 2T9',
+    routeDuration: '',
+    routeDistance: ''
   }),
   getters: {
     getSelectedRouteList({selectedRouteList}) {
@@ -25,6 +27,12 @@ export const useRouteStore = defineStore('route', {
     },
     getEndPoint({endPoint}) {
       return endPoint;
+    },
+    getRouteDuration({routeDuration}) {
+      return routeDuration;
+    },
+    getRouteDistance({routeDistance}) {
+      return routeDistance;
     }
   },
   actions: {
@@ -34,6 +42,12 @@ export const useRouteStore = defineStore('route', {
     setEndPoint(value) {
       this.endPoint = value;
     },
+    setRouteDuration(value) {
+      this.routeDuration = value;
+    },
+    setRouteDistance(value) {
+      this.routeDistance = value;
+    },
     updateRouteWithSensorList(sensors) {
       this.selectedRouteList = [...sensors];
     },
@@ -73,13 +87,12 @@ export const useRouteStore = defineStore('route', {
       // refer to google route order and match it to our defined route
       // copy result to temp
       let temp = [];
-      const arrLength = intermediates.length;
-      for (let i = 0; i < arrLength; i++) {
-        temp[routeOrder[i]] = intermediates[i];
+      for (let i = 0; i < routeOrder.length; i++) {
+        temp[i] = intermediates[routeOrder[i]];
       }
 
       // replace intermediate waypoint array with temp
-      for (let j = 0; j < arrLength; j++) {
+      for (let j = 0; j < routeOrder.length; j++) {
         intermediates[j] = temp[j];
       }
 
diff --git a/app_vue/src/utils/formattingHelper.js b/app_vue/src/utils/formattingHelper.js
new file mode 100644
index 00000000..f7886583
--- /dev/null
+++ b/app_vue/src/utils/formattingHelper.js
@@ -0,0 +1,18 @@
+export const getMinutesString = (stringSeconds) => {
+  let duration = stringSeconds.replace('s','');
+  console.log('duration', duration);
+
+  const hours = Math.floor(duration / 3600);
+  duration = duration % 3600;
+  const minutes = Math.floor(duration / 60);
+  const seconds = duration % 60;
+
+  const hoursString = hours ? `${hours} hrs ` : '';
+  const minutesString = minutes ? `${minutes} min ` : '';
+  const secondsString = seconds ? `${seconds} sec` : '';
+  return hoursString + minutesString + secondsString;
+};
+
+export const getKmFromMeterString = (meters) => {
+  return (meters / 1000).toFixed(0);
+};
\ No newline at end of file
diff --git a/app_vue/src/utils/getLatLngFromAddressHelper.js b/app_vue/src/utils/getLatLngFromAddressHelper.js
new file mode 100644
index 00000000..3ac55b9d
--- /dev/null
+++ b/app_vue/src/utils/getLatLngFromAddressHelper.js
@@ -0,0 +1,19 @@
+import axios from 'axios';
+
+
+// uses openstreetmap geocoding (opensource)
+// https://nominatim.openstreetmap.org/ui/search.html
+export const getLatLng = async (address) => {
+  const url = `https://nominatim.openstreetmap.org/search?format=json&limit=3&q=${address}`;
+  try {
+    const response = await axios.get(url);
+    if (response && response.data) {
+      return [response.data[0].lat, response.data[0].lon];
+    }
+    return [];
+  } catch(e) {
+    console.error('error generating lat lng', e);
+  }
+};
+
+export default getLatLng
\ No newline at end of file
diff --git a/app_vue/src/utils/mapMarkerHelper.js b/app_vue/src/utils/mapMarkerHelper.js
index 0d6907cd..0f16dc85 100644
--- a/app_vue/src/utils/mapMarkerHelper.js
+++ b/app_vue/src/utils/mapMarkerHelper.js
@@ -17,19 +17,20 @@ const getBinIconName = (sensor) => {
 }
 
 export const getMaterialTypeIconURL = (materialType) => {
+  const directory = 'src/assets/images/materialTypeIcons';
   if (!materialType) {
     return 'src/assets/images/generic-material.png';
   }
   const materialMap = {
-    'Cardboard': 'src/assets/images/cardboard.svg', //confirmed
-    'Plastic': 'src/assets/images/plastic.svg', // confirmed
-    'Compost': 'src/assets/images/compost.svg', // confirmed
-    'Diesel': 'src/assets/images/oil-drum.svg',
-    'Dyed Diesel': 'src/assets/images/oil-drum.svg',
-    'Kerosene': 'src/assets/images/oil-drum.svg',
-    'Water': 'src/assets/images/plastic.svg', // TODO: confirm water icon
-    'Gas Oil': 'src/assets/images/oil-drum.svg',
-    'Mixed waste': 'src/assets/images/trash.svg'
+    'Cardboard': `${directory}/cardboard.svg`, //confirmed
+    'Plastic': `${directory}/plastic.svg`, // confirmed
+    'Compost': `${directory}/compost.svg`, // confirmed
+    'Diesel': `${directory}/oil-drum.svg`,
+    'Dyed Diesel': `${directory}/oil-drum.svg`,
+    'Kerosene': `${directory}/oil-drum.svg`,
+    'Water': `${directory}/plastic.svg`, // TODO: confirm water icon
+    'Gas Oil': `${directory}/oil-drum.svg`,
+    'Mixed waste': `${directory}/trash.svg`
   };
   return materialMap[materialType] || 'src/assets/images/generic-material.png';
 }
@@ -44,25 +45,26 @@ export const getIconAndProgressColor = (sensor) => {
   const RED = '#C92828';
   const GREEN = 'green';
   const ORANGE = '#F07F2D';
+  const iconDirectory = 'src/assets/images/binMarkerIcons';
   switch (iconName) {
     case 'error':
-      iconUrl = 'src/assets/images/alert-bin.png';
+      iconUrl = `${iconDirectory}/alert-bin.png`;
       linearProgressColor = RED;
       break;
     case 'full':
-      iconUrl = 'src/assets/images/full-bin.png';
+      iconUrl = `${iconDirectory}/full-bin.png`;
       linearProgressColor = RED;
       break;
     case 'half-full':
-      iconUrl = 'src/assets/images/half-full-bin.png';
+      iconUrl = `${iconDirectory}/half-full-bin.png`;
       linearProgressColor = ORANGE;
       break;
     case 'empty':
-      iconUrl = 'src/assets/images/empty-bin.png';
+      iconUrl = `${iconDirectory}/empty-bin.png`;
       linearProgressColor = GREEN;
       break;
     default: // default is empty bin
-      iconUrl = 'src/assets/images/empty-bin.png';
+      iconUrl = `${iconDirectory}/empty-bin.png`;
       linearProgressColor = GREEN;
   }
   return { iconUrl, linearProgressColor };

From fc2ae0f6c06fb3c5dbee39b3d86929f328bde15e Mon Sep 17 00:00:00 2001
From: monicakochofar <monicakochofar@gmail.com>
Date: Mon, 11 Sep 2023 16:42:23 -0400
Subject: [PATCH 06/20] adding null check

---
 app_vue/src/components/sensorSideBarRoutes.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app_vue/src/components/sensorSideBarRoutes.vue b/app_vue/src/components/sensorSideBarRoutes.vue
index 4d8ebdbc..70c94ead 100644
--- a/app_vue/src/components/sensorSideBarRoutes.vue
+++ b/app_vue/src/components/sensorSideBarRoutes.vue
@@ -141,8 +141,8 @@
             </span>
             <span>&#8226;</span>
             <div class="d-flex flex-column">
-              <span> {{ getMinutesString(routeStore.getRouteDuration) }}</span>
-              <span> ({{ getKmFromMeterString(routeStore.getRouteDistance) }}km)</span>
+              <span v-if="routeStore.getRouteDuration"> {{ getMinutesString(routeStore.getRouteDuration) }}</span>
+              <span v-if="routeStore.getRouteDistance"> ({{ getKmFromMeterString(routeStore.getRouteDistance) }}km)</span>
             </div>
 
 

From a24768c17890856316e2e9f5bc925866a808a6d6 Mon Sep 17 00:00:00 2001
From: monicakochofar <monicakochofar@gmail.com>
Date: Mon, 11 Sep 2023 16:53:25 -0400
Subject: [PATCH 07/20] moving google api call to store

---
 app_vue/src/components/sensorMapMarker.vue    |  1 +
 .../src/components/sensorSideBarRoutes.vue    | 42 ++++---------------
 app_vue/src/stores/route_store.js             | 25 ++++++++---
 app_vue/src/utils/formattingHelper.js         |  5 +--
 4 files changed, 29 insertions(+), 44 deletions(-)

diff --git a/app_vue/src/components/sensorMapMarker.vue b/app_vue/src/components/sensorMapMarker.vue
index b8b649d8..404ab21a 100644
--- a/app_vue/src/components/sensorMapMarker.vue
+++ b/app_vue/src/components/sensorMapMarker.vue
@@ -35,6 +35,7 @@
     // only add to route if not already added
     if (isAlreadyInRoute.value === false) {
       routeStore.addSensorToRoute(sensor);
+      routeStore.optimizeRoute();
     }
   }
 
diff --git a/app_vue/src/components/sensorSideBarRoutes.vue b/app_vue/src/components/sensorSideBarRoutes.vue
index 70c94ead..9ee45da3 100644
--- a/app_vue/src/components/sensorSideBarRoutes.vue
+++ b/app_vue/src/components/sensorSideBarRoutes.vue
@@ -4,7 +4,6 @@
   import { useSensorStore } from '@/stores/sensors_store';
   import { storeToRefs } from 'pinia';
   import { v4 as uuidv4 } from 'uuid';
-  import { getOptimizedRoute } from '@/utils/optimizeRouteHelper';
   import { getMinutesString, getKmFromMeterString } from '@/utils/formattingHelper';
   import draggable from 'vuedraggable';
 
@@ -37,31 +36,8 @@
   })
 
   async function findRouteClicked() {
-    routeStore.updateRouteWithSensorList(sensorStore.sensors); // store current displayed sensors into route list
-    await optimizeRoute();
-  }
-
-  async function optimizeRoute() {
-    // make a call to google
-    const googResponse = await getOptimizedRoute(routeStore.getSelectedRouteList, state.startPoint, state.endPoint);
-    if (googResponse && googResponse.routes && googResponse.routes[0]) {
-      const routeOrder = googResponse.routes[0].optimizedIntermediateWaypointIndex; // [0,3,4]
-      routeStore.updateWithOptimizedRoute(routeOrder); // update current route
-      routeStore.setIsRouteOptimized(true); // set flag is optimized to true
-
-      if (googResponse.routes[0].duration) {
-        routeStore.setRouteDuration(googResponse.routes[0]?.duration);
-      }
-
-      if (googResponse.routes[0].distanceMeters) {
-        routeStore.setRouteDistance(googResponse.routes[0]?.distanceMeters);
-      }
-      
-    }
-  }
-
-  function routeDragged() {
-    state.drag = false; // completed drag
+    routeStore.updateRouteListWithSensors(sensorStore.sensors); // store current displayed sensors into route list
+    await routeStore.optimizeRoute();
   }
 
   function exportRouteClicked() {
@@ -135,17 +111,13 @@
       <div class="py-4 px-4 routes-list__route-container">
         <!-- route is present -->
         <div class="w-100 h-100">
-          <div tabindex="0" class="w-100 h-100 d-flex align-center justify-space-between cursor-pointer">
+          <div tabindex="0" class="w-100 h-100 d-flex align-center cursor-pointer">
             <span class="font-body">
               {{ selectedRouteList.length }} Bins    
             </span>
-            <span>&#8226;</span>
-            <div class="d-flex flex-column">
-              <span v-if="routeStore.getRouteDuration"> {{ getMinutesString(routeStore.getRouteDuration) }}</span>
-              <span v-if="routeStore.getRouteDistance"> ({{ getKmFromMeterString(routeStore.getRouteDistance) }}km)</span>
-            </div>
-
-
+            <span class="mx-2">&#8226;</span>
+            <span v-if="routeStore.getRouteDuration"> {{ getMinutesString(routeStore.getRouteDuration) }}</span>
+            <span class="ml-1" v-if="routeStore.getRouteDistance"> ({{ getKmFromMeterString(routeStore.getRouteDistance) }}km)</span>
           </div>
 
           <!-- route list -->
@@ -161,7 +133,7 @@
               tag="div"
               item-key="id"
               @start="state.drag=true"
-              @end="routeDragged">
+              @end="state.drag = false">
               <template #item="{ element: sensor }">
                 <li class="routes-list__items" :class="{'margin-b-0' : selectedRouteList.length === 1}">
                   <vue-feather class="transform-rotate-270" type="git-commit"></vue-feather>
diff --git a/app_vue/src/stores/route_store.js b/app_vue/src/stores/route_store.js
index d7a40307..c4a70619 100644
--- a/app_vue/src/stores/route_store.js
+++ b/app_vue/src/stores/route_store.js
@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia'
+import { getOptimizedRoute } from '@/utils/optimizeRouteHelper';
 
 export const useRouteStore = defineStore('route', {
   state: () => ({
@@ -48,21 +49,17 @@ export const useRouteStore = defineStore('route', {
     setRouteDistance(value) {
       this.routeDistance = value;
     },
-    updateRouteWithSensorList(sensors) {
+    updateRouteListWithSensors(sensors) {
       this.selectedRouteList = [...sensors];
     },
     addSensorToRoute(sensor) {
       this.selectedRouteList.push(sensor);
-      // reset
-      this.isRouteOptimized = false;
     },
     removeSensorFromRoute(sensor) {
       const index = this.selectedRouteList.indexOf(sensor);
       if (index > -1) {
         this.selectedRouteList.splice(index, 1);
       }
-      // reset
-      this.isRouteOptimized = false;
     },
     clearSensorRoute() {
       this.selectedRouteList = [];
@@ -98,6 +95,24 @@ export const useRouteStore = defineStore('route', {
 
       // update saved routelist with new route order
       this.selectedRouteList = [...intermediates];
+    },
+    async optimizeRoute() {
+      // make a call to google
+      const googResponse = await getOptimizedRoute(this.getSelectedRouteList, this.startPoint, this.endPoint);
+      if (googResponse && googResponse.routes && googResponse.routes[0]) {
+        const routeOrder = googResponse.routes[0].optimizedIntermediateWaypointIndex; // [0,3,4]
+        this.updateWithOptimizedRoute(routeOrder); // update current route
+        this.setIsRouteOptimized(true); // set flag is optimized to true
+
+        if (googResponse.routes[0].duration) {
+          this.setRouteDuration(googResponse.routes[0]?.duration);
+        }
+
+        if (googResponse.routes[0].distanceMeters) {
+          this.setRouteDistance(googResponse.routes[0]?.distanceMeters);
+        }
+        
+      }
     }
   },
 })
\ No newline at end of file
diff --git a/app_vue/src/utils/formattingHelper.js b/app_vue/src/utils/formattingHelper.js
index f7886583..3be8ec8d 100644
--- a/app_vue/src/utils/formattingHelper.js
+++ b/app_vue/src/utils/formattingHelper.js
@@ -1,16 +1,13 @@
 export const getMinutesString = (stringSeconds) => {
   let duration = stringSeconds.replace('s','');
-  console.log('duration', duration);
 
   const hours = Math.floor(duration / 3600);
   duration = duration % 3600;
   const minutes = Math.floor(duration / 60);
-  const seconds = duration % 60;
 
   const hoursString = hours ? `${hours} hrs ` : '';
   const minutesString = minutes ? `${minutes} min ` : '';
-  const secondsString = seconds ? `${seconds} sec` : '';
-  return hoursString + minutesString + secondsString;
+  return hoursString + minutesString;
 };
 
 export const getKmFromMeterString = (meters) => {

From 1c6af1fdf965b493fb1e241b00a023564f2f7bb4 Mon Sep 17 00:00:00 2001
From: monicakochofar <monicakochofar@gmail.com>
Date: Mon, 11 Sep 2023 16:58:25 -0400
Subject: [PATCH 08/20] updating formatting

---
 app_vue/src/components/sensorSideBarRoutes.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app_vue/src/components/sensorSideBarRoutes.vue b/app_vue/src/components/sensorSideBarRoutes.vue
index 9ee45da3..beb92d6d 100644
--- a/app_vue/src/components/sensorSideBarRoutes.vue
+++ b/app_vue/src/components/sensorSideBarRoutes.vue
@@ -145,9 +145,9 @@
               </template>
             </draggable>
             <!-- ending point -->
-            <div class="d-flex align-center">
-              <vue-feather class="color-red" type="map-pin"></vue-feather>
-              <span class="routes-list__point ml-2 mb-4">{{ state.endPoint }}</span>
+            <div class="d-flex align-center mb-4">
+              <vue-feather class="color-red mr-2" type="map-pin"></vue-feather>
+              <span class="routes-list__point">{{ state.endPoint }}</span>
             </div>
 
             <!-- route call-to-actions -->

From 716b8e285fef1fa41c84ec8d0859add83cce6dc9 Mon Sep 17 00:00:00 2001
From: monicakochofar <monicakochofar@gmail.com>
Date: Mon, 11 Sep 2023 17:18:58 -0400
Subject: [PATCH 09/20] making filters collapsible

---
 .../src/components/sensorSideBarFilters.vue   | 156 ++++++++++--------
 .../src/components/sensorSideBarRoutes.vue    |   7 -
 app_vue/src/components/sensorSidebar.vue      |   5 -
 3 files changed, 89 insertions(+), 79 deletions(-)

diff --git a/app_vue/src/components/sensorSideBarFilters.vue b/app_vue/src/components/sensorSideBarFilters.vue
index b21643fa..75873230 100644
--- a/app_vue/src/components/sensorSideBarFilters.vue
+++ b/app_vue/src/components/sensorSideBarFilters.vue
@@ -33,7 +33,8 @@
     binVolume: [],
     materialType: [],
     totalSensors: 0,
-    showFillLabel: false
+    showFillLabel: false,
+    isCollapsed: false
   });
 
   // watching for store state updates and updating component variables
@@ -113,75 +114,84 @@
 
 <template>
   <section class="filter-list">
-    <div class="text-h6 padding-b-30 d-flex align-center">
-      <span>Filter Sensors ({{ state.totalSensors }})</span> 
-      <span class="mx-3">|</span>
-      <v-btn variant="plain" color="#2196F3" class="pa-0 pt-1 text-capitalize" @click="clearFilters">Clear</v-btn>
+    <div class="text-h6 padding-b-30 d-flex align-center justify-space-between">
+      <div class="d-flex align-center">
+        <span class="filter-list__title">Filter Sensors ({{ state.totalSensors }})</span> 
+        <span class="mx-3">|</span>
+        <v-btn variant="plain" color="#2196F3" class="pa-0 pt-1 text-capitalize" @click="clearFilters">Clear</v-btn>
+      </div>
+
+      <v-btn variant="plain" color="#191A1C" class="pa-0" @click="state.isCollapsed = !state.isCollapsed">
+        <vue-feather :type="state.isCollapsed ? 'chevron-up' : 'chevron-down'"></vue-feather>
+      </v-btn>
     </div>
     
-    <div class="filter-list__fill-level">
-      <div class="filter-list__label color-gray-grey">Fill Level Threshold</div>
-      <v-range-slider class="filter-list__slider" 
-        v-model="state.selectedFillRange"
-        strict
-        color="#2196F3"
-        track-color="#2196F3"
-        :ticks="[0,50,100]"
-        show-ticks="always"
-        tick-size="4"
-        :step="1"
-        :max="thresholdRange[1]"
-        :min="thresholdRange[0]"
-        :thumb-label="state.showFillLabel"
-        @mouseup="state.showFillLabel = false"
-        @mousedown="state.showFillLabel = true"
-        @update:modelValue="updateFillRangeFilter">
-        <template v-slot:thumb-label="{ modelValue }">
-          {{modelValue}}%
-        </template>
-      </v-range-slider>
-    </div>
+    <section v-if="!state.isCollapsed" class="filter-list__fields">
+      <div class="filter-list__fill-level">
+        <div class="filter-list__label color-gray-grey">Fill Level Threshold</div>
+        <v-range-slider class="filter-list__slider" 
+          v-model="state.selectedFillRange"
+          strict
+          color="#2196F3"
+          track-color="#2196F3"
+          :ticks="[0,50,100]"
+          show-ticks="always"
+          tick-size="4"
+          :step="1"
+          :max="thresholdRange[1]"
+          :min="thresholdRange[0]"
+          :thumb-label="state.showFillLabel"
+          @mouseup="state.showFillLabel = false"
+          @mousedown="state.showFillLabel = true"
+          @update:modelValue="updateFillRangeFilter">
+          <template v-slot:thumb-label="{ modelValue }">
+            {{modelValue}}%
+          </template>
+        </v-range-slider>
+      </div>
+
+      <v-autocomplete class="filter-list__dropdown"
+        v-model="state.selectedGroup"
+        label="Group"
+        :items="state.group"
+        @update:modelValue="updateGroupFilter"
+      ></v-autocomplete>
+
+      <v-autocomplete class="filter-list__dropdown"
+        v-model="state.selectedAssetTag"
+        label="Asset Tag"
+        chips
+        multiple
+        :items="state.assetTag"
+        @update:modelValue="updateAssetTagFilter"
+      ></v-autocomplete>
+
+      <v-autocomplete class="filter-list__dropdown"
+        v-model="state.selectedBinType"
+        label="Bin Type"
+        chips
+        multiple
+        :items="state.binType"
+        @update:modelValue="updateBinTypeFilter"
+      ></v-autocomplete>
+
+      <v-autocomplete class="filter-list__dropdown"
+        v-model="state.selectedBinVolume"
+        label="Bin Volume"
+        :items="state.binVolume"
+        @update:modelValue="updateBinVolumeFilter"
+      ></v-autocomplete>
+
+      <v-autocomplete class="filter-list__dropdown"
+        v-model="state.selectedMaterialType"
+        label="Material Type"
+        chips
+        multiple
+        :items="state.materialType"
+        @update:modelValue="updateMaterialTypeFilter"
+      ></v-autocomplete>
+    </section>
 
-    <v-autocomplete class="filter-list__dropdown"
-      v-model="state.selectedGroup"
-      label="Group"
-      :items="state.group"
-      @update:modelValue="updateGroupFilter"
-    ></v-autocomplete>
-
-    <v-autocomplete class="filter-list__dropdown"
-      v-model="state.selectedAssetTag"
-      label="Asset Tag"
-      chips
-      multiple
-      :items="state.assetTag"
-      @update:modelValue="updateAssetTagFilter"
-    ></v-autocomplete>
-
-    <v-autocomplete class="filter-list__dropdown"
-      v-model="state.selectedBinType"
-      label="Bin Type"
-      chips
-      multiple
-      :items="state.binType"
-      @update:modelValue="updateBinTypeFilter"
-    ></v-autocomplete>
-
-    <v-autocomplete class="filter-list__dropdown"
-      v-model="state.selectedBinVolume"
-      label="Bin Volume"
-      :items="state.binVolume"
-      @update:modelValue="updateBinVolumeFilter"
-    ></v-autocomplete>
-
-    <v-autocomplete class="filter-list__dropdown"
-      v-model="state.selectedMaterialType"
-      label="Material Type"
-      chips
-      multiple
-      :items="state.materialType"
-      @update:modelValue="updateMaterialTypeFilter"
-    ></v-autocomplete>
 
   </section>
 </template>
@@ -208,6 +218,18 @@
     &__label {
       @include fontBody;
     }
+
+    &__title {
+      min-width: 164px;
+    }
+
+    .v-btn {
+      min-width: 0;
+    }
+
+    &__fields {
+      margin-bottom: 40px;
+    }
   }
 
 </style>
diff --git a/app_vue/src/components/sensorSideBarRoutes.vue b/app_vue/src/components/sensorSideBarRoutes.vue
index beb92d6d..8454b3b1 100644
--- a/app_vue/src/components/sensorSideBarRoutes.vue
+++ b/app_vue/src/components/sensorSideBarRoutes.vue
@@ -11,12 +11,10 @@
   const routeStore = useRouteStore();
   const sensorStore = useSensorStore();
   const { selectedRouteList, getIsRouteOptimized } = storeToRefs(routeStore);
-  const { getTotalSensors } = storeToRefs(sensorStore);
 
   const state = reactive({
     startPoint: '',
     endPoint: '',
-    totalSensors: 0,
     isRouteOptimized: false,
     drag: false
   });
@@ -27,10 +25,6 @@
   })
 
   // element variables
-  watch(getTotalSensors, () => {
-    state.totalSensors = sensorStore.getTotalSensors;
-  })
-
   watch(getIsRouteOptimized, () => {
     state.isRouteOptimized = routeStore.getIsRouteOptimized;
   })
@@ -190,7 +184,6 @@
   }
   
   .routes-list {
-    margin-top: 40px;
     width: 100%;
 
     &__route-container {
diff --git a/app_vue/src/components/sensorSidebar.vue b/app_vue/src/components/sensorSidebar.vue
index 276c9fcb..c5b751ac 100644
--- a/app_vue/src/components/sensorSidebar.vue
+++ b/app_vue/src/components/sensorSidebar.vue
@@ -88,11 +88,6 @@
     }
   }
 
-  .routes-list {
-    margin-top: 40px;
-    width: 100%;
-  }
-
   .map-updated {
     display: none; //TODO: switch to flex when needed
     // display: flex;

From 4e491a701039e1c7fd0bd1cd672188ad9a1594dd Mon Sep 17 00:00:00 2001
From: monicakochofar <monicakochofar@gmail.com>
Date: Mon, 11 Sep 2023 17:37:50 -0400
Subject: [PATCH 10/20] renaming variables for clarity

---
 ...feather-mappin.svg => feather-map-pin.svg} |   0
 app_vue/src/components/sensorMap.vue          |  24 +--
 app_vue/src/components/sensorRouteBlock.vue   | 203 ++++++++++++++++++
 .../src/components/sensorSideBarRoutes.vue    | 155 ++-----------
 app_vue/src/stores/route_store.js             |  18 +-
 5 files changed, 237 insertions(+), 163 deletions(-)
 rename app_vue/src/assets/images/{feather-mappin.svg => feather-map-pin.svg} (100%)
 create mode 100644 app_vue/src/components/sensorRouteBlock.vue

diff --git a/app_vue/src/assets/images/feather-mappin.svg b/app_vue/src/assets/images/feather-map-pin.svg
similarity index 100%
rename from app_vue/src/assets/images/feather-mappin.svg
rename to app_vue/src/assets/images/feather-map-pin.svg
diff --git a/app_vue/src/components/sensorMap.vue b/app_vue/src/components/sensorMap.vue
index 9d11f2a5..ac4ce522 100644
--- a/app_vue/src/components/sensorMap.vue
+++ b/app_vue/src/components/sensorMap.vue
@@ -22,18 +22,18 @@
     device: useDevice(),
     isRouteOptimized: false,
     polyLineLatLngs: [],
-    startPointWaypoint: [],
-    endPointWaypoint: [],
+    startPointLatLng: [],
+    endPointLatLng: [],
     zoom: 10,
     center: [43.7, -79.42] // TODO: update to possibly be user's current location
   });
 
   const startImgUrl = 'src/assets/images/feather-disc.svg';
-  const endImgUrl = 'src/assets/images/feather-mappin.svg';
+  const endImgUrl = 'src/assets/images/feather-map-pin.svg';
 
   onBeforeMount(async () => {
-    state.startPointWaypoint = await getLatLng(routeStore.getStartPoint);
-    state.endPointWaypoint = await getLatLng(routeStore.getEndPoint);
+    state.startPointLatLng = await getLatLng(routeStore.getStartPointAddress);
+    state.endPointLatLng = await getLatLng(routeStore.getEndPointAddress);
   })
 
   onMounted(() => {
@@ -45,9 +45,9 @@
     state.polyLineLatLngs = routeStore.getSelectedRouteLatLong;
 
     // additional lines for start and end points
-    if (state.startPointWaypoint.length && state.endPointWaypoint.length) {
-      state.polyLineLatLngs.unshift(state.startPointWaypoint);
-      state.polyLineLatLngs.push(state.endPointWaypoint);
+    if (state.startPointLatLng.length && state.endPointLatLng.length) {
+      state.polyLineLatLngs.unshift(state.startPointLatLng);
+      state.polyLineLatLngs.push(state.endPointLatLng);
     }
   }, { deep: true })
 
@@ -80,14 +80,14 @@
       <l-polyline v-if="state.isRouteOptimized" :lat-lngs="state.polyLineLatLngs"></l-polyline>
 
       <!-- starting point marker -->
-      <l-marker v-if="state.startPointWaypoint.length"
-        :lat-lng="state.startPointWaypoint">
+      <l-marker v-if="state.startPointLatLng.length"
+        :lat-lng="state.startPointLatLng">
         <l-icon class="color-green" :icon-size="[25, 25]" :icon-anchor="[15, 14]" :icon-url="startImgUrl" />
       </l-marker>
 
       <!-- ending point marker -->
-      <l-marker v-if="state.endPointWaypoint.length"
-        :lat-lng="state.endPointWaypoint">
+      <l-marker v-if="state.endPointLatLng.length"
+        :lat-lng="state.endPointLatLng">
         <l-icon :icon-size="[25, 25]" :icon-anchor="[12, 14]" :icon-url="endImgUrl" />
       </l-marker>
 
diff --git a/app_vue/src/components/sensorRouteBlock.vue b/app_vue/src/components/sensorRouteBlock.vue
new file mode 100644
index 00000000..a492b15a
--- /dev/null
+++ b/app_vue/src/components/sensorRouteBlock.vue
@@ -0,0 +1,203 @@
+<script setup>
+  import { reactive, onMounted, watch } from 'vue'
+  import { useRouteStore } from '@/stores/route_store';
+  import { v4 as uuidv4 } from 'uuid';
+  import { getMinutesString, getKmFromMeterString } from '@/utils/formattingHelper';
+  import draggable from 'vuedraggable';
+
+  const props = defineProps({
+    selectedRouteList: {
+      type: Array,
+      required: true
+    },
+    startPointAddress: {
+      type: String,
+      required: true
+    },
+    endPointAddress: {
+      type: String,
+      required: true
+    }
+  });
+
+  // stores
+  const routeStore = useRouteStore();
+
+  const state = reactive({
+    startPointAddress: '',
+    endPointAddress: '',
+    drag: false,
+    selectedRouteList: []
+  });
+
+  onMounted(() => {
+    state.startPointAddress = props.startPointAddress;
+    state.endPointAddress = props.endPointAddress;
+    state.selectedRouteList = props.selectedRouteList;
+  })
+
+  watch(() => props.selectedRouteList, (value) => {
+    state.selectedRouteList = value;
+  });
+
+  function exportRouteClicked() {
+    // columns
+    let csv = 'Order,Sensor Type,Fill Level,Latitude,Longitude,Manufacturer,Bin Name,Address Line 1,Address Line 2,Group,Bin Type,Material Type,Asset Tag,Bin Volume\n';
+
+    // grab required data to be exported
+    const csvObjectArray = state.selectedRouteList.map((sensor, index) => {
+      return {
+        order: index + 1,
+        sensor_type: sensor.sensor_type,
+        fill_level: sensor.fill_level,
+        lat: sensor.lat,
+        long: sensor.long,
+        manufacturer: sensor.manufacturer,
+        bin_name: sensor.bin_name,
+        address_line1: sensor.address_line1 || '',
+        address_line2: sensor.address_line2 ? sensor.address_line2.replace(',','') : '', // typically has a comma which will interfere with csv
+        group: sensor || '',
+        bin_type: sensor.bin_type,
+        material_type: sensor.material_type,
+        asset_tag: sensor.asset_tag,
+        bin_volume: sensor.bin_volume
+      };
+    })
+
+    // convert JSON to csv rows
+    csvObjectArray.forEach((sensor) => {
+      const csvRow = Object.values(sensor).toString(); // outputs json to a value string separated by commas
+      csv += csvRow + "\n";
+    });
+ 
+    // export
+    const anchor = document.createElement('a');
+    anchor.href = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv);
+    anchor.target = '_blank';
+    anchor.download = `Route-${uuidv4()}.csv`;
+    anchor.click();
+  }
+
+</script>
+
+<template>
+
+  <!-- route display -->
+  <section class="route-display">
+    <div v-if="state.selectedRouteList && state.selectedRouteList.length !== 0" 
+      class="padding-b-16">
+      1 route(s) found
+    </div>
+    <div class="py-4 px-4 route-display__route-container">
+      <!-- route is present -->
+      <div class="w-100 h-100">
+        <div tabindex="0" class="w-100 h-100 d-flex align-center cursor-pointer">
+          <span class="font-body">
+            {{ state.selectedRouteList.length }} Bins    
+          </span>
+          <span class="mx-2">&#8226;</span>
+          <span v-if="routeStore.getRouteDuration"> {{ getMinutesString(routeStore.getRouteDuration) }}</span>
+          <span class="ml-1" v-if="routeStore.getRouteDistance"> ({{ getKmFromMeterString(routeStore.getRouteDistance) }}km)</span>
+        </div>
+
+        <!-- route list -->
+        <section>
+          <!-- starting point -->
+          <div class="d-flex align-center">
+            <vue-feather class="color-green" type="disc"></vue-feather>
+            <span class="route-display__point ml-2 mt-4">{{ state.startPointAddress }}</span>
+          </div>
+          <!-- destinations -->
+          <draggable 
+            v-model="state.selectedRouteList" 
+            tag="div"
+            item-key="id"
+            @start="state.drag=true"
+            @end="state.drag = false">
+            <template #item="{ element: sensor }">
+              <li class="route-display__items" :class="{'margin-b-0' : state.selectedRouteList.length === 1}">
+                <vue-feather class="transform-rotate-270" type="git-commit"></vue-feather>
+                <div class="d-flex flex-column ml-2">
+                  <span>{{ sensor.address_line1 }}</span>
+                  <span>{{ sensor.address_line2 }}</span>
+                </div>
+              </li>
+            </template>
+          </draggable>
+          <!-- ending point -->
+          <div class="d-flex align-center mb-4">
+            <vue-feather class="color-red mr-2" type="map-pin"></vue-feather>
+            <span class="route-display__point">{{ state.endPointAddress }}</span>
+          </div>
+
+          <!-- route call-to-actions -->
+          <div class="d-flex align-center" 
+            :class="{
+              'justify-space-between': state.selectedRouteList && state.selectedRouteList.length > 1, 
+              'justify-end': state.selectedRouteList && state.selectedRouteList.length <= 1
+            }">
+            <div v-if="state.selectedRouteList && state.selectedRouteList.length > 1">
+              <v-btn class="pa-0 route-display__export" variant="plain" @click="exportRouteClicked">
+                Export route
+                <vue-feather type="upload"></vue-feather>
+              </v-btn>
+            </div>
+            <v-btn class="route-display__delete pl-0 align-self-end" variant="plain" @click="routeStore.clearSensorRoute">
+              <vue-feather type="trash-2"></vue-feather>
+            </v-btn>
+          </div>
+
+        </section>
+      </div>
+    </div>
+  </section>
+    
+</template>
+
+<style lang="scss" scoped>
+
+  .vue-feather {
+    width: 20px;
+    height: 20px;
+
+    &--upload {
+      margin-left: 4px;
+      width: 15px;
+      height: 15px;
+    }
+  }
+  
+  .route-display {
+    width: 100%;
+
+    &__route-container {
+      border: 1px solid $lightergrey;
+      border-radius: 20px;
+      @include fontBodySmall;;
+    }
+
+    &__route {
+      margin-bottom: 12px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    &__export {
+      display: flex;
+      align-items: center;
+    }
+
+    &__items {
+      cursor: pointer;
+    }
+
+    &__point {
+      max-width: 174px;
+    }
+
+    :deep .v-btn--size-default {
+      min-width: 24px;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/app_vue/src/components/sensorSideBarRoutes.vue b/app_vue/src/components/sensorSideBarRoutes.vue
index 8454b3b1..51820344 100644
--- a/app_vue/src/components/sensorSideBarRoutes.vue
+++ b/app_vue/src/components/sensorSideBarRoutes.vue
@@ -3,25 +3,23 @@
   import { useRouteStore } from '@/stores/route_store';
   import { useSensorStore } from '@/stores/sensors_store';
   import { storeToRefs } from 'pinia';
-  import { v4 as uuidv4 } from 'uuid';
-  import { getMinutesString, getKmFromMeterString } from '@/utils/formattingHelper';
-  import draggable from 'vuedraggable';
+  import SensorRouteBlock from './sensorRouteBlock.vue';
 
   // stores
   const routeStore = useRouteStore();
   const sensorStore = useSensorStore();
-  const { selectedRouteList, getIsRouteOptimized } = storeToRefs(routeStore);
+  const { getIsRouteOptimized } = storeToRefs(routeStore);
 
   const state = reactive({
-    startPoint: '',
-    endPoint: '',
+    startPointAddress: '',
+    endPointAddress: '',
     isRouteOptimized: false,
     drag: false
   });
 
   onMounted(() => {
-    state.startPoint = routeStore.getStartPoint;
-    state.endPoint = routeStore.getEndPoint;
+    state.startPointAddress = routeStore.getStartPointAddress;
+    state.endPointAddress = routeStore.getEndPointAddress;
   })
 
   // element variables
@@ -34,44 +32,6 @@
     await routeStore.optimizeRoute();
   }
 
-  function exportRouteClicked() {
-    // columns
-    let csv = 'Order,Sensor Type,Fill Level,Latitude,Longitude,Manufacturer,Bin Name,Address Line 1,Address Line 2,Group,Bin Type,Material Type,Asset Tag,Bin Volume\n';
-
-    // grab required data to be exported
-    const csvObjectArray = routeStore.selectedRouteList.map((sensor, index) => {
-      return {
-        order: index + 1,
-        sensor_type: sensor.sensor_type,
-        fill_level: sensor.fill_level,
-        lat: sensor.lat,
-        long: sensor.long,
-        manufacturer: sensor.manufacturer,
-        bin_name: sensor.bin_name,
-        address_line1: sensor.address_line1 || '',
-        address_line2: sensor.address_line2 ? sensor.address_line2.replace(',','') : '', // typically has a comma which will interfere with csv
-        group: sensor || '',
-        bin_type: sensor.bin_type,
-        material_type: sensor.material_type,
-        asset_tag: sensor.asset_tag,
-        bin_volume: sensor.bin_volume
-      };
-    })
-
-    // convert JSON to csv rows
-    csvObjectArray.forEach((sensor) => {
-      const csvRow = Object.values(sensor).toString(); // outputs json to a value string separated by commas
-      csv += csvRow + "\n";
-    });
- 
-    // export
-    const anchor = document.createElement('a');
-    anchor.href = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv);
-    anchor.target = '_blank';
-    anchor.download = `Route-${uuidv4()}.csv`;
-    anchor.click();
-  }
-
 </script>
 
 <template>
@@ -81,13 +41,13 @@
     <!-- start and end point display -->
     <section v-if="!state.isRouteOptimized">
       <v-text-field 
-        v-model="state.startPoint"
+        v-model="state.startPointAddress"
         disabled
         label="Start point" 
         variant="underlined">
       </v-text-field>
       <v-text-field 
-        v-model="state.endPoint"
+        v-model="state.endPointAddress"
         disabled
         label="End point"
         variant="underlined">
@@ -99,71 +59,12 @@
     </section>
     
 
-    <!-- route display -->
+    <!-- route info display -->
     <section v-else>
-      <div v-if="selectedRouteList && selectedRouteList.length !== 0" class="padding-b-16">1 route(s) found</div>
-      <div class="py-4 px-4 routes-list__route-container">
-        <!-- route is present -->
-        <div class="w-100 h-100">
-          <div tabindex="0" class="w-100 h-100 d-flex align-center cursor-pointer">
-            <span class="font-body">
-              {{ selectedRouteList.length }} Bins    
-            </span>
-            <span class="mx-2">&#8226;</span>
-            <span v-if="routeStore.getRouteDuration"> {{ getMinutesString(routeStore.getRouteDuration) }}</span>
-            <span class="ml-1" v-if="routeStore.getRouteDistance"> ({{ getKmFromMeterString(routeStore.getRouteDistance) }}km)</span>
-          </div>
-
-          <!-- route list -->
-          <section>
-            <!-- starting point -->
-            <div class="d-flex align-center">
-              <vue-feather class="color-green" type="disc"></vue-feather>
-              <span class="routes-list__point ml-2 mt-4">{{ state.startPoint }}</span>
-            </div>
-            <!-- destinations -->
-            <draggable 
-              v-model="selectedRouteList" 
-              tag="div"
-              item-key="id"
-              @start="state.drag=true"
-              @end="state.drag = false">
-              <template #item="{ element: sensor }">
-                <li class="routes-list__items" :class="{'margin-b-0' : selectedRouteList.length === 1}">
-                  <vue-feather class="transform-rotate-270" type="git-commit"></vue-feather>
-                  <div class="d-flex flex-column ml-2">
-                    <span>{{ sensor.address_line1 }}</span>
-                    <span>{{ sensor.address_line2 }}</span>
-                  </div>
-                </li>
-              </template>
-            </draggable>
-            <!-- ending point -->
-            <div class="d-flex align-center mb-4">
-              <vue-feather class="color-red mr-2" type="map-pin"></vue-feather>
-              <span class="routes-list__point">{{ state.endPoint }}</span>
-            </div>
-
-            <!-- route call-to-actions -->
-            <div class="d-flex align-center" 
-              :class="{
-                'justify-space-between': selectedRouteList && selectedRouteList.length > 1, 
-                'justify-end': selectedRouteList && selectedRouteList.length <= 1
-              }">
-              <div v-if="selectedRouteList && selectedRouteList.length > 1">
-                <v-btn class="pa-0 routes-list__export" variant="plain" @click="exportRouteClicked">
-                  Export route
-                  <vue-feather type="upload"></vue-feather>
-                </v-btn>
-              </div>
-              <v-btn class="routes-list__delete pl-0 align-self-end" variant="plain" @click="routeStore.clearSensorRoute">
-                <vue-feather type="trash-2"></vue-feather>
-              </v-btn>
-            </div>
-
-          </section>
-        </div>
-      </div>
+      <SensorRouteBlock
+        :selectedRouteList="routeStore.getSelectedRouteList"
+        :startPointAddress="routeStore.getStartPointAddress"
+        :endPointAddress="routeStore.getEndPointAddress"></SensorRouteBlock>
     </section>
     
 
@@ -185,35 +86,5 @@
   
   .routes-list {
     width: 100%;
-
-    &__route-container {
-      border: 1px solid $lightergrey;
-      border-radius: 20px;
-      @include fontBodySmall;;
-    }
-
-    &__route {
-      margin-bottom: 12px;
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-
-    &__export {
-      display: flex;
-      align-items: center;
-    }
-
-    &__items {
-      cursor: pointer;
-    }
-
-    &__point {
-      max-width: 174px;
-    }
-
-    :deep .v-btn--size-default {
-      min-width: 24px;
-    }
   }
 </style>
\ No newline at end of file
diff --git a/app_vue/src/stores/route_store.js b/app_vue/src/stores/route_store.js
index c4a70619..bdc59a44 100644
--- a/app_vue/src/stores/route_store.js
+++ b/app_vue/src/stores/route_store.js
@@ -5,8 +5,8 @@ export const useRouteStore = defineStore('route', {
   state: () => ({
     selectedRouteList: [], // list of sensor objects part of the route
     isRouteOptimized: false, // when google api has been run on the route and we want to present it
-    startPoint: '6045 Mavis Rd Mississauga ON L5R 4G6',
-    endPoint: '3401 Dufferin St Toronto ON M6A 2T9',
+    startPointAddress: '6045 Mavis Rd Mississauga ON L5R 4G6',
+    endPointAddress: '3401 Dufferin St Toronto ON M6A 2T9',
     routeDuration: '',
     routeDistance: ''
   }),
@@ -23,11 +23,11 @@ export const useRouteStore = defineStore('route', {
     getIsRouteOptimized({isRouteOptimized}) {
       return isRouteOptimized;
     },
-    getStartPoint({startPoint}) {
-      return startPoint;
+    getStartPointAddress({startPointAddress}) {
+      return startPointAddress;
     },
-    getEndPoint({endPoint}) {
-      return endPoint;
+    getEndPointAddress({endPointAddress}) {
+      return endPointAddress;
     },
     getRouteDuration({routeDuration}) {
       return routeDuration;
@@ -38,10 +38,10 @@ export const useRouteStore = defineStore('route', {
   },
   actions: {
     setStartPoint(value) {
-      this.startPoint = value;
+      this.startPointAddress = value;
     },
     setEndPoint(value) {
-      this.endPoint = value;
+      this.endPointAddress = value;
     },
     setRouteDuration(value) {
       this.routeDuration = value;
@@ -98,7 +98,7 @@ export const useRouteStore = defineStore('route', {
     },
     async optimizeRoute() {
       // make a call to google
-      const googResponse = await getOptimizedRoute(this.getSelectedRouteList, this.startPoint, this.endPoint);
+      const googResponse = await getOptimizedRoute(this.getSelectedRouteList, this.startPointAddress, this.endPointAddress);
       if (googResponse && googResponse.routes && googResponse.routes[0]) {
         const routeOrder = googResponse.routes[0].optimizedIntermediateWaypointIndex; // [0,3,4]
         this.updateWithOptimizedRoute(routeOrder); // update current route

From 2dc06b2c584564d73136d90d750f16b0c4007486 Mon Sep 17 00:00:00 2001
From: monicakochofar <monicakochofar@gmail.com>
Date: Mon, 11 Sep 2023 17:38:57 -0400
Subject: [PATCH 11/20] organizing code

---
 .../src/components/sensorSideBarRoutes.vue    | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/app_vue/src/components/sensorSideBarRoutes.vue b/app_vue/src/components/sensorSideBarRoutes.vue
index 51820344..e5765d27 100644
--- a/app_vue/src/components/sensorSideBarRoutes.vue
+++ b/app_vue/src/components/sensorSideBarRoutes.vue
@@ -38,8 +38,16 @@
   <section class="routes-list">
     <div class="text-h6 padding-b-16">Routes</div>
 
-    <!-- start and end point display -->
-    <section v-if="!state.isRouteOptimized">
+    <!-- route info display -->
+    <section v-if="state.isRouteOptimized">
+      <SensorRouteBlock
+        :selectedRouteList="routeStore.getSelectedRouteList"
+        :startPointAddress="routeStore.getStartPointAddress"
+        :endPointAddress="routeStore.getEndPointAddress"></SensorRouteBlock>
+    </section>
+
+    <!-- start and end point entry -->
+    <section v-else>
       <v-text-field 
         v-model="state.startPointAddress"
         disabled
@@ -59,13 +67,7 @@
     </section>
     
 
-    <!-- route info display -->
-    <section v-else>
-      <SensorRouteBlock
-        :selectedRouteList="routeStore.getSelectedRouteList"
-        :startPointAddress="routeStore.getStartPointAddress"
-        :endPointAddress="routeStore.getEndPointAddress"></SensorRouteBlock>
-    </section>
+    
     
 
   </section>

From af730ee00bf8185ef62e97961abc76991c0525e0 Mon Sep 17 00:00:00 2001
From: monicakochofar <monicakochofar@gmail.com>
Date: Mon, 11 Sep 2023 17:39:06 -0400
Subject: [PATCH 12/20] organizing code

---
 app_vue/src/components/sensorSideBarRoutes.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app_vue/src/components/sensorSideBarRoutes.vue b/app_vue/src/components/sensorSideBarRoutes.vue
index e5765d27..c600add8 100644
--- a/app_vue/src/components/sensorSideBarRoutes.vue
+++ b/app_vue/src/components/sensorSideBarRoutes.vue
@@ -43,7 +43,8 @@
       <SensorRouteBlock
         :selectedRouteList="routeStore.getSelectedRouteList"
         :startPointAddress="routeStore.getStartPointAddress"
-        :endPointAddress="routeStore.getEndPointAddress"></SensorRouteBlock>
+        :endPointAddress="routeStore.getEndPointAddress">
+      </SensorRouteBlock>
     </section>
 
     <!-- start and end point entry -->

From 7663edf1e7c6e0d3f91594172043f627ce42ab7d Mon Sep 17 00:00:00 2001
From: monicakochofar <monicakochofar@gmail.com>
Date: Mon, 11 Sep 2023 17:51:34 -0400
Subject: [PATCH 13/20] updating start and end point and updating generic bin
 icon

---
 .../src/assets/images/materialTypeIcons/generic-material.svg  | 4 ++--
 app_vue/src/components/sensorMap.vue                          | 3 ++-
 app_vue/src/stores/route_store.js                             | 4 ++--
 app_vue/src/utils/getLatLngFromAddressHelper.js               | 3 ++-
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/app_vue/src/assets/images/materialTypeIcons/generic-material.svg b/app_vue/src/assets/images/materialTypeIcons/generic-material.svg
index 17a8088d..b2110cbd 100644
--- a/app_vue/src/assets/images/materialTypeIcons/generic-material.svg
+++ b/app_vue/src/assets/images/materialTypeIcons/generic-material.svg
@@ -1,3 +1,3 @@
-<svg width="40" height="40" viewBox="0 0 22 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.5625 22.6563C1.5625 23.2779 1.80943 23.874 2.24897 24.3135C2.68851 24.7531 3.28465 25 3.90625 25H17.9688C18.5904 25 19.1865 24.7531 19.626 24.3135C20.0656 23.874 20.3125 23.2779 20.3125 22.6563V6.25001H1.5625V22.6563ZM14.8438 10.1563C14.8438 9.94906 14.9261 9.75034 15.0726 9.60383C15.2191 9.45732 15.4178 9.37501 15.625 9.37501C15.8322 9.37501 16.0309 9.45732 16.1774 9.60383C16.3239 9.75034 16.4062 9.94906 16.4062 10.1563V21.0938C16.4062 21.301 16.3239 21.4997 16.1774 21.6462C16.0309 21.7927 15.8322 21.875 15.625 21.875C15.4178 21.875 15.2191 21.7927 15.0726 21.6462C14.9261 21.4997 14.8438 21.301 14.8438 21.0938V10.1563ZM10.1562 10.1563C10.1562 9.94906 10.2386 9.75034 10.3851 9.60383C10.5316 9.45732 10.7303 9.37501 10.9375 9.37501C11.1447 9.37501 11.3434 9.45732 11.4899 9.60383C11.6364 9.75034 11.7188 9.94906 11.7188 10.1563V21.0938C11.7188 21.301 11.6364 21.4997 11.4899 21.6462C11.3434 21.7927 11.1447 21.875 10.9375 21.875C10.7303 21.875 10.5316 21.7927 10.3851 21.6462C10.2386 21.4997 10.1562 21.301 10.1562 21.0938V10.1563ZM5.46875 10.1563C5.46875 9.94906 5.55106 9.75034 5.69757 9.60383C5.84409 9.45732 6.0428 9.37501 6.25 9.37501C6.4572 9.37501 6.65591 9.45732 6.80243 9.60383C6.94894 9.75034 7.03125 9.94906 7.03125 10.1563V21.0938C7.03125 21.301 6.94894 21.4997 6.80243 21.6462C6.65591 21.7927 6.4572 21.875 6.25 21.875C6.0428 21.875 5.84409 21.7927 5.69757 21.6462C5.55106 21.4997 5.46875 21.301 5.46875 21.0938V10.1563ZM21.0938 1.56251H15.2344L14.7754 0.649423C14.6782 0.454215 14.5284 0.29001 14.3429 0.175281C14.1575 0.0605526 13.9437 -0.00014785 13.7256 8.5609e-06H8.14453C7.92694 -0.000827891 7.71352 0.0596463 7.52871 0.174503C7.34391 0.289359 7.19519 0.453951 7.09961 0.649423L6.64062 1.56251H0.78125C0.57405 1.56251 0.375336 1.64482 0.228823 1.79133C0.08231 1.93784 0 2.13656 0 2.34376L0 3.90626C0 4.11346 0.08231 4.31217 0.228823 4.45869C0.375336 4.6052 0.57405 4.68751 0.78125 4.68751H21.0938C21.301 4.68751 21.4997 4.6052 21.6462 4.45869C21.7927 4.31217 21.875 4.11346 21.875 3.90626V2.34376C21.875 2.13656 21.7927 1.93784 21.6462 1.79133C21.4997 1.64482 21.301 1.56251 21.0938 1.56251Z" fill="#1C274C"/>
+<svg width="40" height="40" viewBox="0 0 20 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.9904 2.64182e-05V6.26309H16.3875L9.88529 12.7653L3.42309 6.30305H6.72722V0L12.9904 2.64182e-05ZM15.8036 9.20909L14.2643 10.7218L16.8386 12.0753L9.83412 15.601L2.82533 12.0753L5.39963 10.7218L3.86036 9.20905L0.463379 11.0137V20.3555L9.83171 24.9998L9.83205 24.5846L9.83227 24.9999L19.2006 20.3555V11.0137L15.8036 9.20909Z" fill="#1C274C"/>
 </svg>
diff --git a/app_vue/src/components/sensorMap.vue b/app_vue/src/components/sensorMap.vue
index ac4ce522..746996f6 100644
--- a/app_vue/src/components/sensorMap.vue
+++ b/app_vue/src/components/sensorMap.vue
@@ -25,7 +25,7 @@
     startPointLatLng: [],
     endPointLatLng: [],
     zoom: 10,
-    center: [43.7, -79.42] // TODO: update to possibly be user's current location
+    center: [43.7, -79.42]
   });
 
   const startImgUrl = 'src/assets/images/feather-disc.svg';
@@ -34,6 +34,7 @@
   onBeforeMount(async () => {
     state.startPointLatLng = await getLatLng(routeStore.getStartPointAddress);
     state.endPointLatLng = await getLatLng(routeStore.getEndPointAddress);
+    state.center = state.startPointLatLng;
   })
 
   onMounted(() => {
diff --git a/app_vue/src/stores/route_store.js b/app_vue/src/stores/route_store.js
index bdc59a44..8fa16269 100644
--- a/app_vue/src/stores/route_store.js
+++ b/app_vue/src/stores/route_store.js
@@ -5,8 +5,8 @@ export const useRouteStore = defineStore('route', {
   state: () => ({
     selectedRouteList: [], // list of sensor objects part of the route
     isRouteOptimized: false, // when google api has been run on the route and we want to present it
-    startPointAddress: '6045 Mavis Rd Mississauga ON L5R 4G6',
-    endPointAddress: '3401 Dufferin St Toronto ON M6A 2T9',
+    startPointAddress: '6900 Airport Rd Mississauga ON',
+    endPointAddress: '6900 Airport Rd Mississauga ON',
     routeDuration: '',
     routeDistance: ''
   }),
diff --git a/app_vue/src/utils/getLatLngFromAddressHelper.js b/app_vue/src/utils/getLatLngFromAddressHelper.js
index 3ac55b9d..0b20710f 100644
--- a/app_vue/src/utils/getLatLngFromAddressHelper.js
+++ b/app_vue/src/utils/getLatLngFromAddressHelper.js
@@ -7,12 +7,13 @@ export const getLatLng = async (address) => {
   const url = `https://nominatim.openstreetmap.org/search?format=json&limit=3&q=${address}`;
   try {
     const response = await axios.get(url);
-    if (response && response.data) {
+    if (response && response.data && response.data[0]) {
       return [response.data[0].lat, response.data[0].lon];
     }
     return [];
   } catch(e) {
     console.error('error generating lat lng', e);
+    return [];
   }
 };
 

From 9128888cff735261af823d2b745e7be5346840f9 Mon Sep 17 00:00:00 2001
From: monicakochofar <monicakochofar@gmail.com>
Date: Mon, 11 Sep 2023 18:27:58 -0400
Subject: [PATCH 14/20] removing draggable for now and adding over 25 bin error
 message

---
 .../src/assets/stylesheets/_functions.scss    |  8 +++++++
 app_vue/src/components/sensorMap.vue          |  5 +++--
 app_vue/src/components/sensorMapMarker.vue    |  2 +-
 app_vue/src/components/sensorRouteBlock.vue   | 22 ++++++++++++-------
 .../src/components/sensorSideBarRoutes.vue    | 17 +++++++++-----
 app_vue/src/stores/route_store.js             | 17 ++++++++++----
 6 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/app_vue/src/assets/stylesheets/_functions.scss b/app_vue/src/assets/stylesheets/_functions.scss
index 74123136..730c5eb5 100644
--- a/app_vue/src/assets/stylesheets/_functions.scss
+++ b/app_vue/src/assets/stylesheets/_functions.scss
@@ -61,11 +61,19 @@
   color: #C92828;
 }
 
+.color-warning-bg {
+  background-color: #FFF4E5;
+}
+
 // text 
 .font-body {
   @include fontBody;
 }
 
+.font-body-small {
+  @include fontBodySmall;
+}
+
 // misc
 .cursor-pointer {
   cursor: pointer;
diff --git a/app_vue/src/components/sensorMap.vue b/app_vue/src/components/sensorMap.vue
index 746996f6..deae2d60 100644
--- a/app_vue/src/components/sensorMap.vue
+++ b/app_vue/src/components/sensorMap.vue
@@ -35,6 +35,7 @@
     state.startPointLatLng = await getLatLng(routeStore.getStartPointAddress);
     state.endPointLatLng = await getLatLng(routeStore.getEndPointAddress);
     state.center = state.startPointLatLng;
+    routeStore.setHasMappedStartEnd(true);
   })
 
   onMounted(() => {
@@ -47,8 +48,8 @@
 
     // additional lines for start and end points
     if (state.startPointLatLng.length && state.endPointLatLng.length) {
-      state.polyLineLatLngs.unshift(state.startPointLatLng);
-      state.polyLineLatLngs.push(state.endPointLatLng);
+      state.polyLineLatLngs.unshift(state.startPointLatLng); // append as first element
+      state.polyLineLatLngs.push(state.endPointLatLng); // append as last element
     }
   }, { deep: true })
 
diff --git a/app_vue/src/components/sensorMapMarker.vue b/app_vue/src/components/sensorMapMarker.vue
index 404ab21a..a471f602 100644
--- a/app_vue/src/components/sensorMapMarker.vue
+++ b/app_vue/src/components/sensorMapMarker.vue
@@ -35,7 +35,7 @@
     // only add to route if not already added
     if (isAlreadyInRoute.value === false) {
       routeStore.addSensorToRoute(sensor);
-      routeStore.optimizeRoute();
+      routeStore.googOptimizeRoute();
     }
   }
 
diff --git a/app_vue/src/components/sensorRouteBlock.vue b/app_vue/src/components/sensorRouteBlock.vue
index a492b15a..066a2ec4 100644
--- a/app_vue/src/components/sensorRouteBlock.vue
+++ b/app_vue/src/components/sensorRouteBlock.vue
@@ -3,7 +3,7 @@
   import { useRouteStore } from '@/stores/route_store';
   import { v4 as uuidv4 } from 'uuid';
   import { getMinutesString, getKmFromMeterString } from '@/utils/formattingHelper';
-  import draggable from 'vuedraggable';
+  // import draggable from 'vuedraggable'; // TODO: commenting out draggable functionality for now, remove if no longer needed
 
   const props = defineProps({
     selectedRouteList: {
@@ -40,6 +40,11 @@
     state.selectedRouteList = value;
   });
 
+  // function draggedRoute() {
+  //   state.drag = false;
+  //   routeStore.setSelectedRouteList(state.selectedRouteList);
+  // }
+
   function exportRouteClicked() {
     // columns
     let csv = 'Order,Sensor Type,Fill Level,Latitude,Longitude,Manufacturer,Bin Name,Address Line 1,Address Line 2,Group,Bin Type,Material Type,Asset Tag,Bin Volume\n';
@@ -108,13 +113,14 @@
             <span class="route-display__point ml-2 mt-4">{{ state.startPointAddress }}</span>
           </div>
           <!-- destinations -->
-          <draggable 
+          <!-- <draggable 
             v-model="state.selectedRouteList" 
             tag="div"
             item-key="id"
             @start="state.drag=true"
-            @end="state.drag = false">
-            <template #item="{ element: sensor }">
+            @end="draggedRoute"> -->
+            <!-- <template #item="{ element: sensor }"> -->
+            <template v-for="sensor in state.selectedRouteList" :key="sensor.id">
               <li class="route-display__items" :class="{'margin-b-0' : state.selectedRouteList.length === 1}">
                 <vue-feather class="transform-rotate-270" type="git-commit"></vue-feather>
                 <div class="d-flex flex-column ml-2">
@@ -123,7 +129,7 @@
                 </div>
               </li>
             </template>
-          </draggable>
+          <!-- </draggable> -->
           <!-- ending point -->
           <div class="d-flex align-center mb-4">
             <vue-feather class="color-red mr-2" type="map-pin"></vue-feather>
@@ -188,9 +194,9 @@
       align-items: center;
     }
 
-    &__items {
-      cursor: pointer;
-    }
+    // &__items {
+    //   cursor: pointer;
+    // }
 
     &__point {
       max-width: 174px;
diff --git a/app_vue/src/components/sensorSideBarRoutes.vue b/app_vue/src/components/sensorSideBarRoutes.vue
index c600add8..ce4f9678 100644
--- a/app_vue/src/components/sensorSideBarRoutes.vue
+++ b/app_vue/src/components/sensorSideBarRoutes.vue
@@ -29,7 +29,7 @@
 
   async function findRouteClicked() {
     routeStore.updateRouteListWithSensors(sensorStore.sensors); // store current displayed sensors into route list
-    await routeStore.optimizeRoute();
+    await routeStore.googOptimizeRoute();
   }
 
 </script>
@@ -61,15 +61,15 @@
         label="End point"
         variant="underlined">
       </v-text-field>
-      <v-btn color="#191A1C" :disabled="state.isRouteOptimized" @click="findRouteClicked">
+      <div class="d-flex align-center py-4 px-2 color-warning-bg mb-5" v-if="routeStore.getSelectedRouteList > 25">
+        <vue-feather class="color-red mx-3" type="alert-triangle"></vue-feather>
+        <span class="routes-list__warning-text">Note: Currently only 25 bins can be added to the route. Please deselect {{ routeStore.getSelectedRouteList - 25 }} bin(s).</span>
+      </div>
+      <v-btn color="#191A1C" :disabled="!routeStore.getHasMappedStartEnd && routeStore.getSelectedRouteList > 25" @click="findRouteClicked">
         <span class="pr-1">Find Route</span>
         <vue-feather type="search"></vue-feather>
       </v-btn>
     </section>
-    
-
-    
-    
 
   </section>
 </template>
@@ -89,5 +89,10 @@
   
   .routes-list {
     width: 100%;
+
+    &__warning-text {
+      max-width: 200px;
+      @include fontBodySmall;
+    }
   }
 </style>
\ No newline at end of file
diff --git a/app_vue/src/stores/route_store.js b/app_vue/src/stores/route_store.js
index 8fa16269..9b260524 100644
--- a/app_vue/src/stores/route_store.js
+++ b/app_vue/src/stores/route_store.js
@@ -8,7 +8,8 @@ export const useRouteStore = defineStore('route', {
     startPointAddress: '6900 Airport Rd Mississauga ON',
     endPointAddress: '6900 Airport Rd Mississauga ON',
     routeDuration: '',
-    routeDistance: ''
+    routeDistance: '',
+    hasMappedStartEnd: false
   }),
   getters: {
     getSelectedRouteList({selectedRouteList}) {
@@ -34,12 +35,18 @@ export const useRouteStore = defineStore('route', {
     },
     getRouteDistance({routeDistance}) {
       return routeDistance;
-    }
+    },
+    getHasMappedStartEnd({hasMappedStartEnd}) {
+      return hasMappedStartEnd;
+    },
   },
   actions: {
     setStartPoint(value) {
       this.startPointAddress = value;
     },
+    setHasMappedStartEnd(value) {
+      this.hasMappedStartEnd = value;
+    },
     setEndPoint(value) {
       this.endPointAddress = value;
     },
@@ -49,6 +56,9 @@ export const useRouteStore = defineStore('route', {
     setRouteDistance(value) {
       this.routeDistance = value;
     },
+    setSelectedRouteList(value) {
+      this.selectedRouteList = value;
+    },
     updateRouteListWithSensors(sensors) {
       this.selectedRouteList = [...sensors];
     },
@@ -96,8 +106,7 @@ export const useRouteStore = defineStore('route', {
       // update saved routelist with new route order
       this.selectedRouteList = [...intermediates];
     },
-    async optimizeRoute() {
-      // make a call to google
+    async googOptimizeRoute() {
       const googResponse = await getOptimizedRoute(this.getSelectedRouteList, this.startPointAddress, this.endPointAddress);
       if (googResponse && googResponse.routes && googResponse.routes[0]) {
         const routeOrder = googResponse.routes[0].optimizedIntermediateWaypointIndex; // [0,3,4]

From 21b5e9e44e31d0692506fdfd927132ca223966b3 Mon Sep 17 00:00:00 2001
From: monicakochofar <monicakochofar@gmail.com>
Date: Tue, 12 Sep 2023 10:58:01 -0400
Subject: [PATCH 15/20] adding count

---
 .../src/components/sensorSideBarFilters.vue   | 58 +++++++++++++++++--
 1 file changed, 52 insertions(+), 6 deletions(-)

diff --git a/app_vue/src/components/sensorSideBarFilters.vue b/app_vue/src/components/sensorSideBarFilters.vue
index 75873230..67fbb777 100644
--- a/app_vue/src/components/sensorSideBarFilters.vue
+++ b/app_vue/src/components/sensorSideBarFilters.vue
@@ -34,7 +34,15 @@
     materialType: [],
     totalSensors: 0,
     showFillLabel: false,
-    isCollapsed: false
+    isCollapsed: false,
+    filterEnabledMap: {
+      fillRange: false,
+      group: false,
+      assetTag: false,
+      binType: false,
+      binVolume: false,
+      matType: false
+    }
   });
 
   // watching for store state updates and updating component variables
@@ -71,31 +79,60 @@
   function updateGroupFilter() {
     sensorStore.setSelectedGroup(state.selectedGroup);
     updateSensorsShown();
+
+    state.filterEnabledMap['group'] = true;
   }
 
   function updateAssetTagFilter() {
     sensorStore.setSelectedAssetTag(state.selectedAssetTag);
     updateSensorsShown();
+
+    if (state.selectedAssetTag.length > 0) {
+      state.filterEnabledMap['assetTag'] = true;
+    } else {
+      state.filterEnabledMap['assetTag'] = false;
+    }
   }
 
   function updateBinTypeFilter() {
     sensorStore.setSelectedBinType(state.selectedBinType);
     updateSensorsShown();
+
+    if (state.selectedBinType.length > 0) {
+      state.filterEnabledMap['binType'] = true;
+    } else {
+      state.filterEnabledMap['binType'] = false;
+    }
   }
 
   function updateBinVolumeFilter() {
     sensorStore.setSelectedBinVolume(state.selectedBinVolume);
     updateSensorsShown();
+
+    state.filterEnabledMap['binVolume'] = true;
   }
 
   function updateFillRangeFilter() {
     sensorStore.setSelectedFillRange(state.selectedFillRange);
     updateSensorsShown();
+
+    const isInitial = state.selectedFillRange[0] === 0 && state.selectedFillRange[1] === 100;
+    if (isInitial) {
+      state.filterEnabledMap['fillRange'] = false;
+    } else {
+      state.filterEnabledMap['fillRange'] = true;
+    }
   }
 
   function updateMaterialTypeFilter() {
     sensorStore.setSelectedMaterialType(state.selectedMaterialType);
     updateSensorsShown();
+
+    if (state.selectedMaterialType.length > 0) {
+      state.filterEnabledMap['materialType'] = true;
+    } else {
+      state.filterEnabledMap['materialType'] = false;
+    }
   }
 
   function clearFilters() {
@@ -108,6 +145,15 @@
     state.selectedBinVolume = null;
     state.selectedFillRange = [0, 100];
     state.selectedMaterialType = [];
+
+    Object.keys(state.filterEnabledMap).forEach(key => {
+      state.filterEnabledMap[key] = false;
+    })
+  }
+
+  function getFilterCount() { // returns number of filters in use
+    const truthArr = Object.values(state.filterEnabledMap).filter(isEnabled => isEnabled);
+    return truthArr.length;
   }
 
 </script>
@@ -116,7 +162,7 @@
   <section class="filter-list">
     <div class="text-h6 padding-b-30 d-flex align-center justify-space-between">
       <div class="d-flex align-center">
-        <span class="filter-list__title">Filter Sensors ({{ state.totalSensors }})</span> 
+        <span class="filter-list__title">Filter Sensors ({{ getFilterCount() }})</span> 
         <span class="mx-3">|</span>
         <v-btn variant="plain" color="#2196F3" class="pa-0 pt-1 text-capitalize" @click="clearFilters">Clear</v-btn>
       </div>
@@ -193,6 +239,10 @@
     </section>
 
 
+    <div class="my-6">
+      <span class="font-weight-bold">Result: {{ state.totalSensors }} </span>
+      displayed on map
+    </div>
   </section>
 </template>
 
@@ -226,10 +276,6 @@
     .v-btn {
       min-width: 0;
     }
-
-    &__fields {
-      margin-bottom: 40px;
-    }
   }
 
 </style>

From 1390317d158a5c0d560ece7916515f0fcca3caaf Mon Sep 17 00:00:00 2001
From: monicakochofar <monicakochofar@gmail.com>
Date: Tue, 12 Sep 2023 11:04:53 -0400
Subject: [PATCH 16/20] fixing bug with enable find route

---
 app_vue/src/components/sensorMap.vue           |  7 ++++++-
 app_vue/src/components/sensorSideBarRoutes.vue | 13 +++++++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/app_vue/src/components/sensorMap.vue b/app_vue/src/components/sensorMap.vue
index deae2d60..7ae0115c 100644
--- a/app_vue/src/components/sensorMap.vue
+++ b/app_vue/src/components/sensorMap.vue
@@ -1,5 +1,5 @@
 <script setup>
-  import { reactive, onMounted, watch, onBeforeMount } from 'vue'
+  import { reactive, onMounted, watch, onBeforeMount, onDeactivated } from 'vue'
   import SensorMapMarker from '@/components/sensorMapMarker.vue';
   import 'leaflet/dist/leaflet.css'
   import { LMap, LTileLayer, LMarker, LControlZoom, LPolyline, LIcon } from '@vue-leaflet/vue-leaflet'
@@ -35,6 +35,7 @@
     state.startPointLatLng = await getLatLng(routeStore.getStartPointAddress);
     state.endPointLatLng = await getLatLng(routeStore.getEndPointAddress);
     state.center = state.startPointLatLng;
+
     routeStore.setHasMappedStartEnd(true);
   })
 
@@ -43,6 +44,10 @@
     window.addEventListener("resize", positionZoom);
   });
 
+  onDeactivated(() => {
+    routeStore.setHasMappedStartEnd(false);
+  })
+
   watch(getSelectedRouteLatLong, () => {
     state.polyLineLatLngs = routeStore.getSelectedRouteLatLong;
 
diff --git a/app_vue/src/components/sensorSideBarRoutes.vue b/app_vue/src/components/sensorSideBarRoutes.vue
index ce4f9678..aab68d52 100644
--- a/app_vue/src/components/sensorSideBarRoutes.vue
+++ b/app_vue/src/components/sensorSideBarRoutes.vue
@@ -3,18 +3,19 @@
   import { useRouteStore } from '@/stores/route_store';
   import { useSensorStore } from '@/stores/sensors_store';
   import { storeToRefs } from 'pinia';
-  import SensorRouteBlock from './sensorRouteBlock.vue';
+  import SensorRouteBlock from '@/components/sensorRouteBlock.vue';
 
   // stores
   const routeStore = useRouteStore();
   const sensorStore = useSensorStore();
-  const { getIsRouteOptimized } = storeToRefs(routeStore);
+  const { getIsRouteOptimized, getHasMappedStartEnd } = storeToRefs(routeStore);
 
   const state = reactive({
     startPointAddress: '',
     endPointAddress: '',
     isRouteOptimized: false,
-    drag: false
+    drag: false,
+    isMapInitialized: false
   });
 
   onMounted(() => {
@@ -27,6 +28,10 @@
     state.isRouteOptimized = routeStore.getIsRouteOptimized;
   })
 
+  watch(getHasMappedStartEnd, () => {
+    state.isMapInitialized = routeStore.getHasMappedStartEnd;
+  })
+
   async function findRouteClicked() {
     routeStore.updateRouteListWithSensors(sensorStore.sensors); // store current displayed sensors into route list
     await routeStore.googOptimizeRoute();
@@ -65,7 +70,7 @@
         <vue-feather class="color-red mx-3" type="alert-triangle"></vue-feather>
         <span class="routes-list__warning-text">Note: Currently only 25 bins can be added to the route. Please deselect {{ routeStore.getSelectedRouteList - 25 }} bin(s).</span>
       </div>
-      <v-btn color="#191A1C" :disabled="!routeStore.getHasMappedStartEnd && routeStore.getSelectedRouteList > 25" @click="findRouteClicked">
+      <v-btn color="#191A1C" :disabled="!state.isMapInitialized || routeStore.getSelectedRouteList > 25" @click="findRouteClicked">
         <span class="pr-1">Find Route</span>
         <vue-feather type="search"></vue-feather>
       </v-btn>

From b0c651acb72e21d8eab46323fe12b31ea4cb172b Mon Sep 17 00:00:00 2001
From: monicakochofar <monicakochofar@gmail.com>
Date: Tue, 12 Sep 2023 11:07:06 -0400
Subject: [PATCH 17/20] adding loading symbol:

---
 app_vue/src/components/sensorSideBarRoutes.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/app_vue/src/components/sensorSideBarRoutes.vue b/app_vue/src/components/sensorSideBarRoutes.vue
index aab68d52..35b2a16e 100644
--- a/app_vue/src/components/sensorSideBarRoutes.vue
+++ b/app_vue/src/components/sensorSideBarRoutes.vue
@@ -72,7 +72,12 @@
       </div>
       <v-btn color="#191A1C" :disabled="!state.isMapInitialized || routeStore.getSelectedRouteList > 25" @click="findRouteClicked">
         <span class="pr-1">Find Route</span>
-        <vue-feather type="search"></vue-feather>
+        <v-progress-circular v-if="!state.isMapInitialized"
+          indeterminate
+          :size="20"
+          color="#8D8D8D"
+        ></v-progress-circular>
+        <vue-feather type="search" v-else></vue-feather>
       </v-btn>
     </section>
 

From 81414b4c76146c69717d04d64cb7972843059444 Mon Sep 17 00:00:00 2001
From: monicakochofar <monicakochofar@gmail.com>
Date: Tue, 12 Sep 2023 11:07:49 -0400
Subject: [PATCH 18/20] adding comments

---
 app_vue/src/components/sensorMap.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app_vue/src/components/sensorMap.vue b/app_vue/src/components/sensorMap.vue
index 7ae0115c..4e792ed5 100644
--- a/app_vue/src/components/sensorMap.vue
+++ b/app_vue/src/components/sensorMap.vue
@@ -32,6 +32,7 @@
   const endImgUrl = 'src/assets/images/feather-map-pin.svg';
 
   onBeforeMount(async () => {
+    // processing start/end/center lat lng points
     state.startPointLatLng = await getLatLng(routeStore.getStartPointAddress);
     state.endPointLatLng = await getLatLng(routeStore.getEndPointAddress);
     state.center = state.startPointLatLng;

From 2af062ee6f8e49708412ee11e6dd41d995afaac0 Mon Sep 17 00:00:00 2001
From: monicakochofar <monicakochofar@gmail.com>
Date: Tue, 12 Sep 2023 11:14:06 -0400
Subject: [PATCH 19/20] adding loading symbol for gapi

---
 app_vue/src/components/sensorSideBarRoutes.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/app_vue/src/components/sensorSideBarRoutes.vue b/app_vue/src/components/sensorSideBarRoutes.vue
index 35b2a16e..3471fec6 100644
--- a/app_vue/src/components/sensorSideBarRoutes.vue
+++ b/app_vue/src/components/sensorSideBarRoutes.vue
@@ -15,7 +15,8 @@
     endPointAddress: '',
     isRouteOptimized: false,
     drag: false,
-    isMapInitialized: false
+    isMapInitialized: false,
+    isLoadingGoogApi: false
   });
 
   onMounted(() => {
@@ -33,8 +34,10 @@
   })
 
   async function findRouteClicked() {
+    state.isLoadingGoogApi = true;
     routeStore.updateRouteListWithSensors(sensorStore.sensors); // store current displayed sensors into route list
     await routeStore.googOptimizeRoute();
+    state.isLoadingGoogApi = false;
   }
 
 </script>
@@ -70,9 +73,9 @@
         <vue-feather class="color-red mx-3" type="alert-triangle"></vue-feather>
         <span class="routes-list__warning-text">Note: Currently only 25 bins can be added to the route. Please deselect {{ routeStore.getSelectedRouteList - 25 }} bin(s).</span>
       </div>
-      <v-btn color="#191A1C" :disabled="!state.isMapInitialized || routeStore.getSelectedRouteList > 25" @click="findRouteClicked">
+      <v-btn color="#191A1C" :disabled="!state.isMapInitialized || routeStore.getSelectedRouteList > 25 || sensorStore.getTotalSensors <= 1" @click="findRouteClicked">
         <span class="pr-1">Find Route</span>
-        <v-progress-circular v-if="!state.isMapInitialized"
+        <v-progress-circular v-if="!state.isMapInitialized || state.isLoadingGoogApi"
           indeterminate
           :size="20"
           color="#8D8D8D"

From b1e065e71fe9c328808ef7cc3d18892ea9c30e1b Mon Sep 17 00:00:00 2001
From: monicakochofar <monicakochofar@gmail.com>
Date: Tue, 12 Sep 2023 11:31:38 -0400
Subject: [PATCH 20/20] updating remove bin to also trigger goog maps api to
 get updated timing

---
 app_vue/src/components/sensorMapMarker.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app_vue/src/components/sensorMapMarker.vue b/app_vue/src/components/sensorMapMarker.vue
index a471f602..9c37c496 100644
--- a/app_vue/src/components/sensorMapMarker.vue
+++ b/app_vue/src/components/sensorMapMarker.vue
@@ -43,6 +43,7 @@
     // only remove from route if already added
     if (isAlreadyInRoute.value === true) {
       routeStore.removeSensorFromRoute(sensor);
+      routeStore.googOptimizeRoute();
     }
   }