Feat/extra info refactor (#408)

This improves the usability of the extra info toggle and makes it
working properly with alternative routes.
The state of the extra info visibility is now stored and reused for
subsequent and alternative routes.
This works for extra info sub categories as well (e.g. waytype=highway).
If the selected/new route doesn't have that sub category, it falls back
to the main extra info category (e.g. from displaying waytype=highway to
waytype)

Fixes two small issues:
- opacity check not working correctly
- active route index was kept when regenerating the route while using
alternative routes

Includes small refactoring.

src/fragments/forms/map-form/components/place-and-directions/components/route-details/RouteDetails.vue

@@ -7,11 +7,11 @@
       <print :map-view-data="mapViewData"></print>
       <h3>{{$t('routeDetails.routeDetails')}}</h3>
     </div>
-    <v-expansion-panel slot="content" class="no-shadow" v-if="hasRoutes" :value="startedPanelExtended">
+    <v-expansion-panel slot="content" class="no-shadow" v-if="hasRoutes" :value="panelExtended">
       <v-expansion-panel-content style="background: transparent;" class="routes-header" :key="routeIndex" v-for="(route, routeIndex) in parsedRoutes">
         <div slot="header">
           <h4 >{{$t('routeDetails.route')}} {{routeIndex + 1}} ({{route.summary.distance}})
-            <v-btn icon @click="changeActiveRouteIndex(routeIndex)" v-if="parsedRoutes.length > 1" :title="routeIndex === $store.getters.activeRouteIndex? $t('routeDetails.selectedRoute') : $t('routeDetails.selectRoute')">
+            <v-btn icon @click.stop="changeActiveRouteIndex(routeIndex)" v-if="parsedRoutes.length > 1" :title="routeIndex === $store.getters.activeRouteIndex? $t('routeDetails.selectedRoute') : $t('routeDetails.selectRoute')">
               <v-icon :color="routeIndex === $store.getters.activeRouteIndex? 'primary' : 'dark' " >done</v-icon>
             </v-btn>
           </h4>

src/fragments/forms/map-form/components/place-and-directions/components/route-details/components/extras/RouteExtras.vue

@@ -1,6 +1,6 @@
 <template>
 <div>
-  <v-expansion-panel v-if="showExtras()" slot="content" class="no-shadow" :value="null">
+  <v-expansion-panel v-if="showExtras()" slot="content" class="no-shadow" :value="showExtraInfoSection">
     <v-expansion-panel-content style="background: transparent;" class="extras-header" >
       <div slot="header"><h4 >{{$t('routeExtras.extraInfo')}}</h4></div>
       <div><p class="click-action-info">{{$t('routeExtras.clickToHighlightOnMap')}}</p></div>

src/fragments/forms/map-form/components/place-and-directions/components/route-details/components/extras/route-extras.js

@@ -2,6 +2,11 @@ import orsDictionary from '@/resources/ors-dictionary'
 import {EventBus} from '@/common/event-bus'
 
 export default {
+  data () {
+    return {
+      showExtraInfoSection: null
+    }
+  },
   props: {
     route: {
       Type: Object,
@@ -17,6 +22,19 @@ export default {
       return this.route.properties.extras || []
     }
   },
+  created() {
+    // get current displayed extras
+    let {key: extraKey, value: extraValue, index: index} = this.$store.getters.extraHighlight
+    if (extraKey) {
+      this.showExtraInfoSection = 0  // show extra section
+      // does the active route have the specific extraValue?
+      if (this.routeExtras[extraKey].summary.map(e => e.value).includes(extraValue)) {
+        this.showSection(extraKey, extraValue, index)
+      } else {
+        this.showAllSections(extraKey)
+      }
+    }
+  },
   methods: {
     /**
      * Determines if a given
@@ -112,6 +130,7 @@ export default {
      * @emits highlightPolylineSections (via EventBus)
      */
     showSection (extraKey, value, index) {
+      this.$store.commit('extraHighlight', {key: extraKey, value: value, index: index})
       const sectionTitle = this.$t('global.' + extraKey).toLowerCase()
       const color = this.colorValue(extraKey, index)
       const highlightData = { extraKey, sectionTitle, sections: [{ intervals: [], color }] }
@@ -130,12 +149,12 @@ export default {
      * @emits highlightPolylineSections (via EventBus)
      */
     showAllSections (extraKey) {
+      this.$store.commit('extraHighlight', {key: extraKey, value: 'all', index: 0})
       const sectionTitle = this.$t('global.' + extraKey).toLowerCase()
       const highlightData = { extraKey: extraKey, sectionTitle, sections: [] }
 
       let index = 0
-      for (const summaryKey in this.routeExtras[extraKey].summary) {
-        const summary = this.routeExtras[extraKey].summary[summaryKey]
+      for (const summary of this.routeExtras[extraKey].summary) {
         const polylineData = this.buildExtraHighlightPolylineData(extraKey, index, summary.value)
         highlightData.sections.push(polylineData)
         index++

src/fragments/forms/map-form/components/place-and-directions/components/route-details/components/extras/route-extras.store.js

@@ -0,0 +1,25 @@
+const state = {
+  extraHighlight: {}
+}
+
+const getters = {
+  extraHighlight: state => {
+    return state.extraHighlight
+  }
+}
+
+const mutations = {
+  extraHighlight: (state, extraHighlight) => {
+    state.extraHighlight = extraHighlight
+  }
+}
+
+const actions = {
+}
+
+export default {
+  state,
+  getters,
+  mutations,
+  actions
+}

src/fragments/forms/map-form/components/place-and-directions/components/route-details/route-details.js

@@ -46,19 +46,8 @@ export default {
     shareUrl () {
       return location.href
     },
-    startedPanelExtended () {
-      return this.localMapViewData.routes.length > 0 ? 0 : null
-    },
-    /**
-     * Builds and return route summary
-     * @returns {Object}
-     */
-    routeSummary () {
-      if (this.hasRoutes) {
-        let summary = Object.assign({}, this.localMapViewData.routes[this.$store.getters.activeRouteIndex].summary)
-        summary = this.getHumanizedSummary(summary, summary.unit)
-        return summary
-      }
+    panelExtended () {
+      return this.localMapViewData.routes.length > 0 ? this.$store.getters.activeRouteIndex : null
     },
     /**
      * Builds and return the routes

src/fragments/map-view/components/extra-info-highlight/extra-info-highlight.js

@@ -39,6 +39,7 @@ export default {
     removeHighlightedSegments () {
       this.highlightedPolyline = null
       this.highlightedPolylineSnack = false
+      this.$store.commit('extraHighlight', {})
       this.$emit('closed')
     },
     highlightedSectionStyle (backgroundColor) {

src/fragments/map-view/map-view.js

@@ -694,13 +694,13 @@ export default {
         clearTimeout(this.mapDataViewChangeDebounceTimeoutId)
       }
       this.mapDataViewChangeDebounceTimeoutId = setTimeout(function () {
+        let changes = Utils.getObjectsDiff(context.localMapViewData, context.mapViewData)
         // Create a new instance of MapViewData and set all the props into the local instance
         context.localMapViewData = context.mapViewData.clone()
-
-        let changes = Utils.getObjectsDiff(context.localMapViewData, context.mapViewData)
         let different = changes.different
         // Only refresh local data if the change was not only the opacity
-        if (different.length !== 1 || (different.length === 1 && different[0].indexOf('.opacity') > 0)) {
+        if (!(different.length === 1 && different[0].indexOf('.opacity') > 0)) {
+          context.setActiveRouteIndex(0)
           context.loadMapData()
           context.refreshAltitudeModal()
         }
@@ -1156,16 +1156,15 @@ export default {
       } else {
         // Add the routes coordinates to the polyline that must
         // be considered to the all features bounds
-        for (const rKey in this.localMapViewData.routes) {
-          if (this.localMapViewData.routes[rKey].geometry.coordinates) {
-            const coords = this.localMapViewData.routes[rKey].geometry.coordinates
+        for (const route of this.localMapViewData.routes) {
+          if (route.geometry.coordinates) {
+            const coords = route.geometry.coordinates
             polylineData = polylineData.concat(coords)
           }
         }
         // Add the polygons coordinates to the polyline that must
         // be considered to  the all features bounds
-        for (const pKey in this.localMapViewData.polygons) {
-          const polygon = this.localMapViewData.polygons[pKey]
+        for (const polygon of this.localMapViewData.polygons) {
           if (polygon) {
             const coords = PolygonUtils.flatCoordinates(polygon.geometry.coordinates)
             polylineData = polylineData.concat(coords)
@@ -1189,10 +1188,10 @@ export default {
       let polylineData = []
       const coordinates = this.localMapViewData.routes[this.$store.getters.activeRouteIndex].geometry.coordinates
       const highlightData = routeData.buildHighlightedPolylines(coordinates, this.extraInfo)
-      for (let key in highlightData) {
-        let polylines = highlightData[key].polylines
-        for (let plKey in polylines) {
-          polylineData = polylineData.concat(polylines[plKey])
+      for (const highlightDatum of highlightData) {
+        let polylines = highlightDatum.polylines
+        for (const polyline of polylines) {
+          polylineData = polylineData.concat(polyline)
         }
       }
       return polylineData
@@ -1440,8 +1439,7 @@ export default {
      */
     isThereAnPolygonInEditMode () {
       let polygons = this.extractAvoidPolygonsFromMap()
-      for (let key in polygons) {
-        let polygon = polygons[key]
+      for (const polygon of polygons) {
         if (polygon.editing && polygon.editing._enabled) {
           return polygon
         }

src/support/geo-utils.js

@@ -239,49 +239,26 @@ const geoUtils = {
    * @returns {Array} of 2 objects {lon:..., lat:...}
    */
   getBounds: (places = [], polyline = []) => {
-    const boundsCollection = []
-    let minLat = null
-    let maxLat = null
-    let minLng = null
-    let maxLng = null
-
-    places.forEach((place) => {
-      boundsCollection.push({
-        lat: place.lat,
-        lng: place.lng
-      })
-    })
-    if (Array.isArray(polyline)) {
-      polyline.forEach((lngLatArr) => {
-        boundsCollection.push({
-          lng: lngLatArr[0],
-          lat: lngLatArr[1]
-        })
-      })
-    }
+    let latValues = []
+    let lngValues = []
 
-    if (places.length === 1 && boundsCollection.length === 1) {
-      const place = places[0]
-      minLat = maxLat = place.lat
-      minLng = maxLng = place.lng
-    } else {
-      for (let itemKey in boundsCollection) {
-        let lngLat = boundsCollection[itemKey]
-        minLat = minLat === null || lngLat.lat < minLat ? lngLat.lat : minLat
-        minLng = minLng === null || lngLat.lng < minLng ? lngLat.lng : minLng
-        maxLat = maxLat === null || lngLat.lat > maxLat ? lngLat.lat : maxLat
-        maxLng = maxLng === null || lngLat.lng > maxLng ? lngLat.lng : maxLng
-      }
+    if (places.length) {
+      latValues.push(...places.map(p => p.lat))
+      lngValues.push(...places.map(p => p.lng))
+    }
+    if (polyline.length) {
+      latValues.push(...polyline.map(e => e[1]))
+      lngValues.push(...polyline.map(e => e[0]))
     }
 
     return [
       {
-        lon: minLng,
-        lat: minLat
+        lon: lngValues.length ? Math.min(...lngValues) : null,
+        lat: latValues.length ? Math.min(...latValues) : null
       },
       {
-        lon: maxLng,
-        lat: maxLat
+        lon: lngValues.length ? Math.max(...lngValues) : null,
+        lat: latValues.length ? Math.max(...latValues) : null
       }
     ]
   },

src/support/map-data-services/ors-response-data-extractors/route-data.js

@@ -14,17 +14,15 @@ const routeData = {
       // Build the sections
       // Each section contains a label, a color and
       // may contain multiple polylines
-      for (const key in extraInfo.sections) {
-        const section = extraInfo.sections[key]
+      for (const section of extraInfo.sections) {
         const polylineHighlighted = {
           label: section.label,
           color: section.color,
           polylines: [] // It starts empty and will be populated below
         }
         // Use the intervals data to extract the
         // polyline data for the given interval
-        for (const intervalKey in section.intervals) {
-          const interval = section.intervals[intervalKey]
+        for (const interval of section.intervals) {
           // since we are getting items from an array
           // starting with the index 0, the amount of
           // items is the final position + 1