From 6d22d6ee8b5bfe5dddcdf8353c2616dc9476b4ef Mon Sep 17 00:00:00 2001 From: monicakochofar Date: Mon, 4 Sep 2023 18:45:21 -0400 Subject: [PATCH 001/246] adding routestore and drawing route functionality --- .../src/assets/stylesheets/_variables.scss | 23 +------- app_vue/src/components/sensorMap.vue | 14 ++++- app_vue/src/components/sensorMapMarker.vue | 57 +++++++++++++++++-- app_vue/src/stores/route_store.js | 32 +++++++++++ app_vue/src/stores/sensors_store.js | 2 +- 5 files changed, 98 insertions(+), 30 deletions(-) create mode 100644 app_vue/src/stores/route_store.js diff --git a/app_vue/src/assets/stylesheets/_variables.scss b/app_vue/src/assets/stylesheets/_variables.scss index a4c012e4..469d9a81 100644 --- a/app_vue/src/assets/stylesheets/_variables.scss +++ b/app_vue/src/assets/stylesheets/_variables.scss @@ -1,25 +1,4 @@ $font-face: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica', 'Arial', 'sans-serif'; //color variables -$white: #FFF; -$whiteSoft: #F8F8F8; -$whiteMute: #F2F2F2; - -$black: #181818; -$blackSoft: #222222; -$blackMute: #282828; -$blackQuiet: #333333; - -$dividerLight1: rgba(60, 60, 60, 0.29); -$dividerLight2: rgba(60, 60, 60, 0.12); -$dividerDark1: rgba(84, 84, 84, 0.65); -$dividerDark2: #141414; - -$bubbleGreen: #89f693; -$bubbleGreenLight: #b8fabe; -$bubbleGreenDark: #265F46; - -$textDark1: rgba(235, 235, 235, 0.64); -$textLight1: rgba(60, 60, 60, 0.66); - -$zIndexFront: 999; +$black: #191A1C; diff --git a/app_vue/src/components/sensorMap.vue b/app_vue/src/components/sensorMap.vue index 5c05d78b..c6662868 100644 --- a/app_vue/src/components/sensorMap.vue +++ b/app_vue/src/components/sensorMap.vue @@ -1,10 +1,11 @@ @@ -192,6 +234,7 @@ height: 32px; min-width: 50px; background: #2196F3; + color: white; border-radius: 999px; padding: 0 10px; width: fit-content; @@ -211,5 +254,9 @@ margin-bottom: 6px; @include fontSubTitle2; } + + &__cta-routes button { + width: 194px; + } } diff --git a/app_vue/src/stores/route_store.js b/app_vue/src/stores/route_store.js new file mode 100644 index 00000000..7e1de586 --- /dev/null +++ b/app_vue/src/stores/route_store.js @@ -0,0 +1,32 @@ +import { defineStore } from 'pinia' + +export const useRouteStore = defineStore('route', { + state: () => ({ + sensorRouteList: [] // list of sensor objects part of the route + }), + getters: { + getSensorRoute({sensorRouteList}) { + return sensorRouteList; + }, + getSensorRouteLatLong({sensorRouteList}) { + if (sensorRouteList.length > 0) { + return sensorRouteList.map(sensor => [sensor.lat, sensor.long]); + } + return []; + } + }, + actions: { + addSensorToRoute(sensor) { + this.sensorRouteList.push(sensor); + }, + removeSensorFromRoute(sensor) { + const index = this.sensorRouteList.indexOf(sensor); + if (index > -1) { + this.sensorRouteList.splice(index, 1); + } + }, + clearSensorRoute() { + this.sensorRouteList = []; + } + }, +}) \ No newline at end of file diff --git a/app_vue/src/stores/sensors_store.js b/app_vue/src/stores/sensors_store.js index ae927c03..238de374 100644 --- a/app_vue/src/stores/sensors_store.js +++ b/app_vue/src/stores/sensors_store.js @@ -25,7 +25,7 @@ export const useSensorStore = defineStore('sensors', { }, getAllBinVolumes({ allSensors }) { return [...new Set(allSensors.flatMap(sensor => sensor.bin_volume || []))]; - }, + } }, actions: { clearSelected() { From db7d6f1ad7afea5bd7636777116e06faf7752093 Mon Sep 17 00:00:00 2001 From: monicakochofar Date: Mon, 4 Sep 2023 19:15:07 -0400 Subject: [PATCH 002/246] displaying route in sidebar --- app_vue/src/components/sensorMapMarker.vue | 8 +-- .../src/components/sensorSideBarRoutes.vue | 70 +++++++++++++++++++ app_vue/src/components/sensorSidebar.vue | 9 +-- app_vue/src/stores/route_store.js | 2 +- 4 files changed, 78 insertions(+), 11 deletions(-) create mode 100644 app_vue/src/components/sensorSideBarRoutes.vue diff --git a/app_vue/src/components/sensorMapMarker.vue b/app_vue/src/components/sensorMapMarker.vue index 63508b64..f36d397d 100644 --- a/app_vue/src/components/sensorMapMarker.vue +++ b/app_vue/src/components/sensorMapMarker.vue @@ -25,12 +25,12 @@ const routeStore = useRouteStore(); const isAlreadyInRoute = ref(false); - const { getSensorRoute } = storeToRefs(routeStore); + const { getSensorRouteList } = storeToRefs(routeStore); // watch for changes in stored sensor route array (ie. when a sensor gets added or removed) - watch(getSensorRoute, () => { - if (routeStore.getSensorRoute.length > 0) { - isAlreadyInRoute.value = !!routeStore.getSensorRoute.find(bin => bin.id === props.sensor.id); + watch(getSensorRouteList, () => { + if (routeStore.getSensorRouteList.length > 0) { + isAlreadyInRoute.value = !!routeStore.getSensorRouteList.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 new file mode 100644 index 00000000..804bfe29 --- /dev/null +++ b/app_vue/src/components/sensorSideBarRoutes.vue @@ -0,0 +1,70 @@ + + + + + diff --git a/app_vue/src/components/sensorSidebar.vue b/app_vue/src/components/sensorSidebar.vue index 42b853bc..fb191e93 100644 --- a/app_vue/src/components/sensorSidebar.vue +++ b/app_vue/src/components/sensorSidebar.vue @@ -1,5 +1,6 @@ @@ -43,7 +53,7 @@ - + Optimize route diff --git a/app_vue/src/stores/route_store.js b/app_vue/src/stores/route_store.js index 2991571a..b18f0940 100644 --- a/app_vue/src/stores/route_store.js +++ b/app_vue/src/stores/route_store.js @@ -2,7 +2,8 @@ import { defineStore } from 'pinia' export const useRouteStore = defineStore('route', { state: () => ({ - sensorRouteList: [] // list of sensor objects part of the route + sensorRouteList: [], // list of sensor objects part of the route + enableOptimizeRoute: true }), getters: { getSensorRouteList({sensorRouteList}) { @@ -13,20 +14,29 @@ export const useRouteStore = defineStore('route', { return sensorRouteList.map(sensor => [sensor.lat, sensor.long]); } return []; - } + }, + getEnableOptimizeRoute({enableOptimizeRoute}) { + return enableOptimizeRoute; + }, }, actions: { addSensorToRoute(sensor) { this.sensorRouteList.push(sensor); + this.enableOptimizeRoute = true; }, removeSensorFromRoute(sensor) { const index = this.sensorRouteList.indexOf(sensor); if (index > -1) { this.sensorRouteList.splice(index, 1); } + this.enableOptimizeRoute = true; }, clearSensorRoute() { this.sensorRouteList = []; + this.enableOptimizeRoute = true; + }, + setEnableOptimizedRoute(value) { + this.enableOptimizeRoute = value; } }, }) \ No newline at end of file From 9dda41c5c91a7471f293a38160db85c7ac49d199 Mon Sep 17 00:00:00 2001 From: monicakochofar Date: Wed, 6 Sep 2023 11:04:44 -0400 Subject: [PATCH 009/246] moving garbage bin --- .../src/components/sensorSideBarRoutes.vue | 23 +++++++++++-------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/app_vue/src/components/sensorSideBarRoutes.vue b/app_vue/src/components/sensorSideBarRoutes.vue index 8d26b5c0..f6d3e210 100644 --- a/app_vue/src/components/sensorSideBarRoutes.vue +++ b/app_vue/src/components/sensorSideBarRoutes.vue @@ -36,9 +36,6 @@
{{ sensorRouteList.length }} Bins
- - - @@ -53,12 +50,20 @@
- - Optimize route - - - Export route - +
+
+ + Optimize route + + + Export route + +
+ + + +
+ From 30fcc008ed3e5aeb057a44c9847c2ffad48b5d33 Mon Sep 17 00:00:00 2001 From: monicakochofar Date: Wed, 6 Sep 2023 11:05:08 -0400 Subject: [PATCH 010/246] updating formatting --- app_vue/src/components/sensorSideBarRoutes.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app_vue/src/components/sensorSideBarRoutes.vue b/app_vue/src/components/sensorSideBarRoutes.vue index f6d3e210..4aadfca2 100644 --- a/app_vue/src/components/sensorSideBarRoutes.vue +++ b/app_vue/src/components/sensorSideBarRoutes.vue @@ -13,7 +13,7 @@ isOptimizeRouteEnabled.value = routeStore.getEnableOptimizeRoute; }) - const optimizeRouteClicked = () => { + function optimizeRouteClicked() { // update status of optimize route button to be disabled after first click routeStore.setEnableOptimizedRoute(false); From 1ba95ca65cd1eb3e0f1233ebf4942b61e14df656 Mon Sep 17 00:00:00 2001 From: monicakochofar Date: Wed, 6 Sep 2023 11:40:17 -0400 Subject: [PATCH 011/246] adding export route to csv --- .../src/assets/stylesheets/_functions.scss | 5 + .../src/components/sensorSideBarRoutes.vue | 58 +++++- app_vue/src/stores/route_store.js | 2 +- package-lock.json | 20 +++ package.json | 5 + yarn.lock | 167 +----------------- 6 files changed, 85 insertions(+), 172 deletions(-) create mode 100644 package-lock.json create mode 100644 package.json diff --git a/app_vue/src/assets/stylesheets/_functions.scss b/app_vue/src/assets/stylesheets/_functions.scss index f5be77f6..b8c1fcc6 100644 --- a/app_vue/src/assets/stylesheets/_functions.scss +++ b/app_vue/src/assets/stylesheets/_functions.scss @@ -39,4 +39,9 @@ .color-cyan-blue { color: #2196F3; +} + +// misc +.cursor-pointer { + cursor: pointer; } \ No newline at end of file diff --git a/app_vue/src/components/sensorSideBarRoutes.vue b/app_vue/src/components/sensorSideBarRoutes.vue index 4aadfca2..fd411335 100644 --- a/app_vue/src/components/sensorSideBarRoutes.vue +++ b/app_vue/src/components/sensorSideBarRoutes.vue @@ -2,7 +2,8 @@ import { ref, watch } from 'vue' import { useRouteStore } from '@/stores/route_store'; import { storeToRefs } from 'pinia'; - + import { v4 as uuidv4 } from 'uuid'; + const routeStore = useRouteStore(); const { sensorRouteList, getEnableOptimizeRoute } = storeToRefs(routeStore); const isOpen = ref(false); @@ -20,6 +21,44 @@ // TODO: add call to google api } + 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.sensorRouteList.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.replace(',',''), // typically has a comma which will interfere with csv + group: sensor.group, + 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(); + } +