Route is Now Created From Filters and Defined Start/End points by monicakochofar · Pull Request #63 · button-inc/iot-system-prototype

monicakochofar · 2023-09-11T21:54:39Z

Note: 15-17 of these file changes are just me organizing components and moving image icons into a different folder!

lots of refactoring to update variable names to something more meaningful and create components in preparation for future tasks
- for ex. sensorRouteList become selectedRouteList
Added new start and end points to route store
integrated openstreetmap geocoding via app_vue/src/utils/getLatLngFromAddressHelper.js to get lat lngs from address for start and end point
using new generic material type icon

function1.mov

function2.mov

monicakochofar · 2023-09-11T21:57:14Z

-        "lat": 43.351197,
-        "long": -79.347344,
+        "lat": 43.452197,
+        "long": -80.147244,


updating buggy lat lng that was causing issues with gmaps api

monicakochofar · 2023-09-12T15:15:53Z

+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 && response.data[0]) {
+      return [response.data[0].lat, response.data[0].lon];
+    }
+    return [];
+  } catch(e) {
+    console.error('error generating lat lng', e);
+    return [];
+  }
+};
+
+export default getLatLng


this is a free geocoder i found to convert the start and end point addresses to lat lng coordinates!

monicakochofar · 2023-09-12T15:16:06Z

+export const getMinutesString = (stringSeconds) => {
+  let duration = stringSeconds.replace('s','');
+
+  const hours = Math.floor(duration / 3600);
+  duration = duration % 3600;
+  const minutes = Math.floor(duration / 60);
+
+  const hoursString = hours ? `${hours} hrs ` : '';
+  const minutesString = minutes ? `${minutes} min ` : '';
+  return hoursString + minutesString;
+};
+
+export const getKmFromMeterString = (meters) => {
+  return (meters / 1000).toFixed(0);
+};


these functions help process the seconds and meters the goog api returns for the route!

monicakochofar · 2023-09-12T15:16:41Z

+  return {
+    origin,
    intermediates,
-    "destination":{ // specify ending point
-      "location":{
-        "latLng":{
-          "latitude": destination.lat,
-          "longitude": destination.long
-        }
-      }
-    },
+    destination,


we are now taking in start and end points from user input, so updated file accordingly

monicakochofar · 2023-09-12T15:17:15Z

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


google api call is now moved to route store to be called from any component as needed

monicakochofar · 2023-09-12T15:17:29Z


      // replace intermediate waypoint array with temp
-      for (let j = 0; j < arrLength; j++) {
+      for (let j = 0; j < routeOrder.length; j++) {


fixed a bug here for returning optimized route

monicakochofar · 2023-09-12T15:18:23Z

+  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;
+
+    routeStore.setHasMappedStartEnd(true);
+  })


gets start and end point lat lng and sets the center of the map to be the start point

monicakochofar · 2023-09-12T15:18:54Z

+  watch(getSelectedRouteLatLong, () => {
+    state.polyLineLatLngs = routeStore.getSelectedRouteLatLong;
+
+    // additional lines for start and end points
+    if (state.startPointLatLng.length && state.endPointLatLng.length) {
+      state.polyLineLatLngs.unshift(state.startPointLatLng); // append as first element
+      state.polyLineLatLngs.push(state.endPointLatLng); // append as last element
+    }
+  }, { deep: true })


here we are drawing the additional map polylines for the start and end points

monicakochofar · 2023-09-12T15:19:08Z

+      <!-- starting point marker -->
+      <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.endPointLatLng.length"
+        :lat-lng="state.endPointLatLng">
+        <l-icon :icon-size="[25, 25]" :icon-anchor="[12, 14]" :icon-url="endImgUrl" />
+      </l-marker>
+


places start and end point map markers

monicakochofar · 2023-09-12T15:20:39Z

@@ -0,0 +1,209 @@
+<script setup>


sensorRouteBlock.vue is a new component which simply moves some of the code from the existing sensorSideBarRoutes.vue component

monicakochofar · 2023-09-12T15:21:08Z

+    filterEnabledMap: {
+      fillRange: false,
+      group: false,
+      assetTag: false,
+      binType: false,
+      binVolume: false,
+      matType: false
+    }


used to determine enabled filter count for display

monicakochofar · 2023-09-12T15:21:24Z

-          {{modelValue}}%
-        </template>
-      </v-range-slider>
+    <section v-if="!state.isCollapsed" class="filter-list__fields">


made filter section collapsible

monicakochofar added 13 commits September 11, 2023 14:03

renaming variables

9c13c0c

route is now crafted from filtered sensors

c0c935c

cleanup

afa6a46

cleanup

9a370aa

reorganizing columns and adding duration and distance values

77b412e

adding null check

fc2ae0f

moving google api call to store

a24768c

updating formatting

1c6af1f

making filters collapsible

716b8e2

renaming variables for clarity

4e491a7

organizing code

2dc06b2

organizing code

af730ee

updating start and end point and updating generic bin icon

7663edf

monicakochofar commented Sep 11, 2023

View reviewed changes

monicakochofar marked this pull request as ready for review September 11, 2023 21:59

monicakochofar requested review from YaokunLin and mikevespi September 11, 2023 22:00

monicakochofar added 6 commits September 11, 2023 18:27

removing draggable for now and adding over 25 bin error message

9128888

adding count

21b5e9e

fixing bug with enable find route

1390317

adding loading symbol:

b0c651a

adding comments

81414b4

adding loading symbol for gapi

2af062e

monicakochofar commented Sep 12, 2023

View reviewed changes

updating remove bin to also trigger goog maps api to get updated timing

b1e065e

monicakochofar merged commit 4bcc286 into develop Sep 12, 2023

monicakochofar deleted the monica-vue-app-generate branch September 14, 2023 19:50

Navigation Menu

Uh oh!

Route is Now Created From Filters and Defined Start/End points - #63

Route is Now Created From Filters and Defined Start/End points#63
monicakochofar merged 20 commits into
developfrom
monica-vue-app-generate

monicakochofar commented Sep 11, 2023 •

edited

Loading

Uh oh!

monicakochofar Sep 11, 2023

Uh oh!

monicakochofar Sep 12, 2023

Uh oh!

monicakochofar Sep 12, 2023

Uh oh!

monicakochofar Sep 12, 2023

Uh oh!

monicakochofar Sep 12, 2023

Uh oh!

monicakochofar Sep 12, 2023

Uh oh!

monicakochofar Sep 12, 2023

Uh oh!

monicakochofar Sep 12, 2023

Uh oh!

monicakochofar Sep 12, 2023

Uh oh!

monicakochofar Sep 12, 2023

Uh oh!

monicakochofar Sep 12, 2023

Uh oh!

monicakochofar Sep 12, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

monicakochofar commented Sep 11, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

monicakochofar commented Sep 11, 2023 •

edited

Loading