diff --git a/app_vue/package-lock.json b/app_vue/package-lock.json index c36788c..2b42b79 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/assets/base.scss b/app_vue/src/assets/base.scss index b4d84ff..e5cbdee 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 0000000..97dbe49 --- /dev/null +++ b/app_vue/src/assets/images/gmaps.svg @@ -0,0 +1,3 @@ + diff --git a/app_vue/src/components/sensorRouteBlock.vue b/app_vue/src/components/sensorRouteBlock.vue index fa61dde..4948eb5 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: { @@ -43,6 +44,17 @@ watch( } ); +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; routeStore.setSelectedRouteList(state.selectedRouteList); // update state with new route order @@ -180,23 +192,27 @@ function exportToCSV() { -