Feat/extra info refactor

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