Fix/usability issues

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

@@ -1,5 +1,6 @@
 import orsDictionary from '@/resources/ors-dictionary'
 import {EventBus} from '@/common/event-bus'
+import Utils from '@/support/utils'
 
 export default {
   data () {
@@ -13,29 +14,46 @@ export default {
       Required: true
     }
   },
+  watch: {
+    route: {
+      handler: function (newVal, oldVal) {
+        // avoid update on map center move
+        let diff = Utils.getObjectsDiff(newVal, oldVal)
+        if (diff.different.length) {
+          this.showFromExistingSetting()
+        }
+      }
+    }
+  },
   computed: {
     /**
      * Return the array of extras or an empty array
      * @returns {Array}
      */
     routeExtras () {
+      if (this.route.properties.extras?.['steepness']) {
+        this.route.properties.extras['steepness'].summary = this.route.properties.extras['steepness'].summary.sort((a, b) => parseInt(a.value) - parseInt(b.value))
+      }
       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)
-      }
-    }
+    this.showFromExistingSetting()
   },
   methods: {
+    showFromExistingSetting() {
+      // 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)
+        }
+      }
+    },
     /**
      * Determines if a given
      * extra must be shown by
@@ -77,7 +95,7 @@ export default {
     colorValue (extraKey, index, value = null) {
       let dict = orsDictionary
       let color
-      if (value) {
+      if (value !== null) {
         color = dict.colors[extraKey][value]
       } else {
         color = dict.colors[extraKey][index]

src/fragments/map-view/MapView.vue

@@ -24,6 +24,7 @@
       :style="{height: mapHeight + 'px'}">
 
       <l-control-polyline-measure v-if="showControls && distanceMeasureToolAvailable" :options="polylineMeasureOptions"/>
+      <l-control-scale position="bottomleft" :imperial="true" :metric="true"></l-control-scale>
 
       <!-- draw tool bar is added programmatically via map-view.js setAvoidPolygonDrawingTool method -->
       <!-- <l-draw-toolbar :options="drawingOptions" position="topright"/> -->

src/fragments/map-view/components/extra-info-highlight/ExtraInfoHighlight.vue

@@ -2,14 +2,16 @@
   <div>
     <template v-if="highlightedPolylines" >
       <template v-for="(polyline, index) in highlightedPolylines">
-        <l-polyline :key="index" :lat-lngs="polyline.polylines" :weight="4" :color="polyline.color">
+        <l-polyline :lat-lngs="polyline.polylines" :weight="10" :color="'white'" :opacity="highlightedPolylines.length === 1 ? 1 : 0"></l-polyline>
+        <l-polyline :key="index" :lat-lngs="polyline.polylines" :weight="highlightedPolylines.length === 1 ? 6 : 4" :color="polyline.color">
         <l-tooltip v-html="polyline.label"></l-tooltip>
       </l-polyline>
+        <l-polyline :lat-lngs="polyline.polylines" :weight="2" :color="'white'" :opacity="highlightedPolylines.length === 1 ? 1 : 0" dash-array="1 4"></l-polyline>
       </template>
     </template>
 
     <template v-if="highlightedPolylines">
-      <v-snackbar class="segments-highlight-snack" @click.stop="" style="cursor:grab" :style="{marginLeft: $lowResolution ? '' : '405px'}"
+      <v-snackbar class="segments-highlight-snack" @click.stop="" style="cursor:grab;z-index: 1001" :style="{marginLeft: $lowResolution ? '' : '405px'}"
         v-model="highlightedPolylineSnack"
         :bottom="true"
         :auto-height="true"

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

@@ -546,7 +546,7 @@ export default {
             let summary = extra.summary[summaryKey]
             let map = {
               text: translations[extraDict[summary.value]] || extraDict[summary.value],
-              color: dict.colors[extraKey][summaryKey]
+              color: dict.colors[extraKey][summary.value]
             }
             mappings[extraKey][summary.value] = map
           }
@@ -788,6 +788,7 @@ export default {
      * @emits activeRouteIndexChanged
      */
     alternativeRouteIndexSelected (index, event) {
+      Leaflet.DomEvent.stopPropagation(event)
       event.originalEvent.stopPropagation()
       event.originalEvent.preventDefault()
       EventBus.$emit('activeRouteIndexChanged', index)
@@ -801,16 +802,6 @@ export default {
       const context = this
       this.$store.commit('activeRouteIndex', index)
 
-      // We just want to disable the showClickPopups
-      // temporarily, so we get the original state
-      // set it as false and after two seconds
-      // we restore the original value
-      const showPopupBefore = this.showClickPopups
-      this.showClickPopups = false
-      setTimeout(() => {
-        context.showClickPopups = showPopupBefore
-      }, 2000)
-
       // Force the active route polyline to render again
       // after a timeout in order to make sure it
       // is over the other polylines
@@ -1358,7 +1349,7 @@ export default {
           EventBus.$emit('mapRightClicked', data)
         }
         this.clickLatLng = { lat: event.latlng.lat, lng: event.latlng.lng }
-      } else if (this.$store.getters.isSidebarVisible) {
+      } else if (this.$store.getters.isSidebarVisible && this.$lowResolution) {
         EventBus.$emit('setSidebarStatus', false)
       }
     },

src/pages/maps/maps.js

@@ -51,7 +51,7 @@ export default {
   },
   computed: {
     showMapViewClickPopups () {
-      let show = ((!this.$store.getters.isSidebarVisible || this.$highResolution) || (this.$highResolution && this.$store.getters.leftSideBarPinned)) && !this.showBottomNav
+      let show = ((!this.$store.getters.isSidebarVisible || this.$mdAndUpResolution) || (this.$mdAndUpResolution && this.$store.getters.leftSideBarPinned)) && !this.showBottomNav
       return show
     },
     /**

src/resources/ors-dictionary.js

@@ -34,17 +34,17 @@ const orsDictionary = {
     'grassPaver' // at position 18
   ],
   steepness: {
-    '-5': '>16%',
-    '-4': '12-15%',
-    '-3': '7-11%',
-    '-2': '4-6%',
-    '-1': '1-3%',
+    '-5': '↘ >16%',
+    '-4': '↘ 12-15%',
+    '-3': '↘ 7-11%',
+    '-2': '↘ 4-6%',
+    '-1': '↘ 1-3%',
     0: '0%',
-    1: '1-3%',
-    2: '4-6%',
-    3: '7-11%',
-    4: '12-15%',
-    5: '>16%'
+    1: '↗ 1-3%',
+    2: '↗ 4-6%',
+    3: '↗ 7-11%',
+    4: '↗ 12-15%',
+    5: '↗ >16%'
   },
   tollways: {
     '0': 'no_tollway',
@@ -142,21 +142,20 @@ const orsDictionary = {
       '#228B22', // grass
       '#008000' // grassPaver
     ],
-    steepness: [
+    steepness: {
       // 11 colors accessed by index
-      '#DDA0DD',
-      '#EE82EE',
-      '#FF00FF',
-      '#9400D3',
-      '#8B008B',
-      '#FFB6C1',
-      '#FF69B4',
-      '#C71585',
-      '#FFE4E1',
-      '#8B4513',
-      '#A52A2A',
-      '#800000'
-    ],
+      '-5': '#003bd1',
+      '-4': '#3362c5',
+      '-3': '#6689b9',
+      '-2': '#99afae',
+      '-1': '#ccd6a2',
+      0: '#fffd96',
+      1: '#f4ce78',
+      2: '#e9a05a',
+      3: '#dd713c',
+      4: '#d2431e',
+      5: '#c71400'
+    },
     roadaccessrestrictions: {
       0: 'gray',
       1: 'green',