From a4d7c214f9168e20d777dbaaf8d54441a521a1b1 Mon Sep 17 00:00:00 2001
From: monicakochofar <monicakochofar@gmail.com>
Date: Fri, 6 Oct 2023 13:21:45 -0400
Subject: [PATCH 1/7] adding animation for filter collapse

---
 app_vue/src/assets/base.scss                    | 1 +
 app_vue/src/assets/images/gmaps.svg             | 3 +++
 app_vue/src/components/sensorSideBarFilters.vue | 2 ++
 3 files changed, 6 insertions(+)
 create mode 100644 app_vue/src/assets/images/gmaps.svg

diff --git a/app_vue/src/assets/base.scss b/app_vue/src/assets/base.scss
index b4d84fff..e5cbdee7 100644
--- a/app_vue/src/assets/base.scss
+++ b/app_vue/src/assets/base.scss
@@ -29,3 +29,4 @@ li {
   list-style: none;
   margin: 16px 0;
 }
+
diff --git a/app_vue/src/assets/images/gmaps.svg b/app_vue/src/assets/images/gmaps.svg
new file mode 100644
index 00000000..97dbe497
--- /dev/null
+++ b/app_vue/src/assets/images/gmaps.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.42137 15.9818C5.24148 15.9281 5.1468 15.758 4.93443 15.1069C4.62982 14.1729 4.46267 13.8205 3.95024 13.0316C3.58873 12.475 3.12776 11.8541 2.44221 11.0004C0.875021 9.04861 0.375012 8.16672 0.123079 6.91C-0.086741 5.86336 -0.0264921 4.73906 0.290046 3.79426C0.73483 2.46667 1.6981 1.3334 2.96874 0.642833C3.99117 0.0871628 5.34005 -0.128289 6.52109 0.0754298C8.69761 0.45086 10.4625 2.09722 11.0049 4.25807C11.1178 4.70801 11.1554 5.04893 11.1537 5.60653C11.1505 6.68498 10.9627 7.51578 10.5173 8.42292C10.1463 9.17857 9.83156 9.63836 8.74133 11.0174C7.13414 13.0504 6.72628 13.7207 6.26172 15.0925C6.06981 15.6592 5.9595 15.8764 5.82778 15.9469C5.7287 15.9999 5.53704 16.0164 5.42137 15.9818ZM6.12342 7.63298C6.86207 7.42937 7.4544 6.83024 7.64527 6.09365C7.72284 5.79429 7.71503 5.31009 7.62761 4.99853C7.42753 4.28547 6.8637 3.71746 6.14557 3.50549C5.82608 3.41119 5.25512 3.4171 4.95074 3.51787C4.20267 3.76551 3.64088 4.40031 3.47933 5.18051C3.27112 6.18601 3.88652 7.23849 4.88807 7.58981C5.26739 7.72287 5.73772 7.7393 6.12342 7.63298Z" fill="black"/>
+</svg>
diff --git a/app_vue/src/components/sensorSideBarFilters.vue b/app_vue/src/components/sensorSideBarFilters.vue
index c2455cb2..0c86a54f 100644
--- a/app_vue/src/components/sensorSideBarFilters.vue
+++ b/app_vue/src/components/sensorSideBarFilters.vue
@@ -283,6 +283,8 @@ function getFilterCount() {
 </template>
 
 <style lang="scss" scoped>
+@include slide-fade-in-out(-30px);
+
 // vuetify overrides
 :deep .v-field--variant-filled .v-field__overlay {
   // vue select background

From 2ce199a08f648e361f07775f0b850119999e322a Mon Sep 17 00:00:00 2001
From: monicakochofar <monicakochofar@gmail.com>
Date: Fri, 6 Oct 2023 13:45:09 -0400
Subject: [PATCH 2/7] adding animation for filter collapse

---
 app_vue/src/components/sensorSideBarFilters.vue | 4 ++--
 app_vue/src/components/sensorSideBarRoutes.vue  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app_vue/src/components/sensorSideBarFilters.vue b/app_vue/src/components/sensorSideBarFilters.vue
index 0c86a54f..5452df4f 100644
--- a/app_vue/src/components/sensorSideBarFilters.vue
+++ b/app_vue/src/components/sensorSideBarFilters.vue
@@ -283,8 +283,6 @@ function getFilterCount() {
 </template>
 
 <style lang="scss" scoped>
-@include slide-fade-in-out(-30px);
-
 // vuetify overrides
 :deep .v-field--variant-filled .v-field__overlay {
   // vue select background
@@ -316,6 +314,8 @@ function getFilterCount() {
   width: 100%;
   @include slide-fade-animation;
 
+  @include slide-fade-animation;
+
   &__fields {
     margin-bottom: 20px;
   }
diff --git a/app_vue/src/components/sensorSideBarRoutes.vue b/app_vue/src/components/sensorSideBarRoutes.vue
index 3007affa..ee7bd829 100644
--- a/app_vue/src/components/sensorSideBarRoutes.vue
+++ b/app_vue/src/components/sensorSideBarRoutes.vue
@@ -89,7 +89,7 @@ function updateEndPoint(value) {
       ></SensorRouteBlock>
     </section>
 
-    <!-- start and end point entry -->
+    <!-- start and end point entry and find routes button -->
     <section v-else>
       <PointAddressField
         v-model="state.startPointAddress"

From bf7cfef34ce421f78694864063a524fca5a6bb1e Mon Sep 17 00:00:00 2001
From: monicakochofar <monicakochofar@gmail.com>
Date: Fri, 6 Oct 2023 13:53:07 -0400
Subject: [PATCH 3/7] setting gmaps button

---
 app_vue/src/components/sensorRouteBlock.vue | 36 ++++++++++++---------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/app_vue/src/components/sensorRouteBlock.vue b/app_vue/src/components/sensorRouteBlock.vue
index fa61ddea..98b2a324 100644
--- a/app_vue/src/components/sensorRouteBlock.vue
+++ b/app_vue/src/components/sensorRouteBlock.vue
@@ -43,6 +43,8 @@ watch(
   }
 );
 
+function exportToGmaps() {}
+
 function draggedRoute() {
   state.drag = false;
   routeStore.setSelectedRouteList(state.selectedRouteList); // update state with new route order
@@ -180,15 +182,19 @@ function exportToCSV() {
           </div>
 
           <!-- route related 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">
+          <div class="d-flex flex-column align-start">
+            <v-btn
+              v-if="state.selectedRouteList && state.selectedRouteList.length > 1"
+              class="pa-0 route-display__export"
+              variant="plain"
+              @click="exportToGmaps()"
+            >
+              Open in Google Maps
+              <vue-feather type="upload"></vue-feather>
+            </v-btn>
+            <div class="d-flex align-center justify-space-between w-100">
               <v-btn
+                v-if="state.selectedRouteList && state.selectedRouteList.length > 1"
                 class="pa-0 route-display__export"
                 variant="plain"
                 @click="exportToCSV"
@@ -196,14 +202,14 @@ function exportToCSV() {
                 Export route
                 <vue-feather type="upload"></vue-feather>
               </v-btn>
+              <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>
-            <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>

From 3c946bc69f1b3b097fc54b398c28e173f448a27d Mon Sep 17 00:00:00 2001
From: monicakochofar <monicakochofar@gmail.com>
Date: Fri, 6 Oct 2023 13:56:11 -0400
Subject: [PATCH 4/7] adding svg loader

---
 app_vue/package-lock.json                   | 18 +++++++++---------
 app_vue/src/components/sensorRouteBlock.vue |  5 +++--
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/app_vue/package-lock.json b/app_vue/package-lock.json
index c36788c1..2b42b793 100644
--- a/app_vue/package-lock.json
+++ b/app_vue/package-lock.json
@@ -3318,9 +3318,9 @@
       "dev": true
     },
     "node_modules/@types/yargs": {
-      "version": "17.0.28",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.28.tgz",
-      "integrity": "sha512-N3e3fkS86hNhtk6BEnc0rj3zcehaxx8QWhCROJkqpl5Zaoi7nAic3jH8q94jVD3zu5LGk+PUB6KAiDmimYOEQw==",
+      "version": "17.0.26",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.26.tgz",
+      "integrity": "sha512-Y3vDy2X6zw/ZCumcwLpdhM5L7jmyGpmBCTYMHDLqT2IKVMYRRLdv6ZakA+wxhra6Z/3bwhNbNl9bDGXaFU+6rw==",
       "dev": true,
       "dependencies": {
         "@types/yargs-parser": "*"
@@ -4684,9 +4684,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001547",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001547.tgz",
-      "integrity": "sha512-W7CrtIModMAxobGhz8iXmDfuJiiKg1WADMO/9x7/CLNin5cpSbuBjooyoIUVB5eyCc36QuTVlkVa1iB2S5+/eA==",
+      "version": "1.0.30001546",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001546.tgz",
+      "integrity": "sha512-zvtSJwuQFpewSyRrI3AsftF6rM0X80mZkChIt1spBGEvRglCrjTniXvinc8JKRoqTwXAgvqTImaN9igfSMtUBw==",
       "dev": true,
       "funding": [
         {
@@ -5509,9 +5509,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.548",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.548.tgz",
-      "integrity": "sha512-R77KD6mXv37DOyKLN/eW1rGS61N6yHOfapNSX9w+y9DdPG83l9Gkuv7qkCFZ4Ta4JPhrjgQfYbv4Y3TnM1Hi2Q==",
+      "version": "1.4.543",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.543.tgz",
+      "integrity": "sha512-t2ZP4AcGE0iKCCQCBx/K2426crYdxD3YU6l0uK2EO3FZH0pbC4pFz/sZm2ruZsND6hQBTcDWWlo/MLpiOdif5g==",
       "dev": true
     },
     "node_modules/emittery": {
diff --git a/app_vue/src/components/sensorRouteBlock.vue b/app_vue/src/components/sensorRouteBlock.vue
index 98b2a324..f3f900cd 100644
--- a/app_vue/src/components/sensorRouteBlock.vue
+++ b/app_vue/src/components/sensorRouteBlock.vue
@@ -4,6 +4,7 @@ import { useRouteStore } from '@/stores/route_store';
 import { v4 as uuidv4 } from 'uuid';
 import { getMinutesString, getKmFromMeterString } from '@/utils/formattingHelper';
 import draggable from 'vuedraggable';
+import GmapsIcon from '@/assets/images/gmaps.svg';
 
 const props = defineProps({
   selectedRouteList: {
@@ -189,8 +190,8 @@ function exportToCSV() {
               variant="plain"
               @click="exportToGmaps()"
             >
-              Open in Google Maps
-              <vue-feather type="upload"></vue-feather>
+              <span class="mr-1">Open in Google Maps</span>
+              <GmapsIcon></GmapsIcon>
             </v-btn>
             <div class="d-flex align-center justify-space-between w-100">
               <v-btn

From 86d8909f87457beb5a9c89f4fa858dddaf603cb6 Mon Sep 17 00:00:00 2001
From: monicakochofar <monicakochofar@gmail.com>
Date: Fri, 6 Oct 2023 13:57:26 -0400
Subject: [PATCH 5/7] aligning delete button

---
 app_vue/src/components/sensorRouteBlock.vue | 36 ++++++++++-----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/app_vue/src/components/sensorRouteBlock.vue b/app_vue/src/components/sensorRouteBlock.vue
index f3f900cd..d15f0d6b 100644
--- a/app_vue/src/components/sensorRouteBlock.vue
+++ b/app_vue/src/components/sensorRouteBlock.vue
@@ -193,24 +193,24 @@ function exportToCSV() {
               <span class="mr-1">Open in Google Maps</span>
               <GmapsIcon></GmapsIcon>
             </v-btn>
-            <div class="d-flex align-center justify-space-between w-100">
-              <v-btn
-                v-if="state.selectedRouteList && state.selectedRouteList.length > 1"
-                class="pa-0 route-display__export"
-                variant="plain"
-                @click="exportToCSV"
-              >
-                Export route
-                <vue-feather type="upload"></vue-feather>
-              </v-btn>
-              <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>
+
+            <v-btn
+              v-if="state.selectedRouteList && state.selectedRouteList.length > 1"
+              class="pa-0 route-display__export"
+              variant="plain"
+              @click="exportToCSV"
+            >
+              Export route
+              <vue-feather type="upload"></vue-feather>
+            </v-btn>
+
+            <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>

From e471f4f9a5857a7fb4e085e1cc1b9f50da29b4ba Mon Sep 17 00:00:00 2001
From: monicakochofar <monicakochofar@gmail.com>
Date: Fri, 6 Oct 2023 19:08:11 -0400
Subject: [PATCH 6/7] implementing export maps and animations

---
 app_vue/src/components/sensorRouteBlock.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/app_vue/src/components/sensorRouteBlock.vue b/app_vue/src/components/sensorRouteBlock.vue
index d15f0d6b..4948eb50 100644
--- a/app_vue/src/components/sensorRouteBlock.vue
+++ b/app_vue/src/components/sensorRouteBlock.vue
@@ -44,7 +44,16 @@ watch(
   }
 );
 
-function exportToGmaps() {}
+function exportToGmaps() {
+  // everything needs to be URL-encoded
+  const apiVer = '1';
+  const origin = encodeURIComponent(state.startPointAddress);
+  const destination = encodeURIComponent(state.endPointAddress);
+  let wayPoints = state.selectedRouteList.map((route) => `${route.lat},${route.long}`).join('|');
+  wayPoints = encodeURIComponent(wayPoints);
+  const url = `https://www.google.com/maps/dir/?api=${apiVer}&origin=${origin}&destination=${destination}&travelmode=driving&waypoints=${wayPoints}`;
+  window.open(url, '_blank');
+}
 
 function draggedRoute() {
   state.drag = false;
@@ -185,7 +194,7 @@ function exportToCSV() {
           <!-- route related call-to-actions -->
           <div class="d-flex flex-column align-start">
             <v-btn
-              v-if="state.selectedRouteList && state.selectedRouteList.length > 1"
+              v-if="state.selectedRouteList && state.selectedRouteList.length > 1 && state.selectedRouteList.length <= 9"
               class="pa-0 route-display__export"
               variant="plain"
               @click="exportToGmaps()"

From 719c5a19b4594d4effcd3bc0546a85cad7b58106 Mon Sep 17 00:00:00 2001
From: monicakochofar <monicakochofar@gmail.com>
Date: Tue, 10 Oct 2023 12:18:51 -0400
Subject: [PATCH 7/7] removing dupe

---
 app_vue/src/components/sensorSideBarFilters.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app_vue/src/components/sensorSideBarFilters.vue b/app_vue/src/components/sensorSideBarFilters.vue
index 5452df4f..c2455cb2 100644
--- a/app_vue/src/components/sensorSideBarFilters.vue
+++ b/app_vue/src/components/sensorSideBarFilters.vue
@@ -314,8 +314,6 @@ function getFilterCount() {
   width: 100%;
   @include slide-fade-animation;
 
-  @include slide-fade-animation;
-
   &__fields {
     margin-bottom: 20px;
   }