From 30bd4a1a25730a4b466acd222d60a8c3de7505fb Mon Sep 17 00:00:00 2001
From: Manuel Kasper <mk@neon1.net>
Date: Tue, 9 Aug 2022 21:55:42 +0200
Subject: [PATCH] Better highlighting in case of multiple overlapping routes

---
 src/components/MapRoute.vue | 18 +++++++++++++++---
 src/views/Summit.vue        | 12 ++++++++++++
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/components/MapRoute.vue b/src/components/MapRoute.vue
index bb79b50..a651b42 100644
--- a/src/components/MapRoute.vue
+++ b/src/components/MapRoute.vue
@@ -41,6 +41,18 @@ export default {
   mixins: [tracks],
   computed: {
     trackLayer () {
+      let lineColor = '#1cd60d'
+      let lineOpacity = 0.75
+      let lineWidth = 3
+      if (this.route.highlight === true) {
+        lineColor = '#4fe005'
+        lineOpacity = 0.85
+        lineWidth = 4.5
+      } else if (this.route.highlight === false) {
+        lineColor = '#86bc6b'
+        lineOpacity = 0.25
+      }
+
       return {
         type: 'line',
         layout: {
@@ -48,9 +60,9 @@ export default {
           'line-cap': 'round'
         },
         paint: {
-          'line-color': this.route.highlight ? '#4fe005' : '#1cd60d',
-          'line-width': this.route.highlight ? 4.5 : 3,
-          'line-opacity': this.route.highlight ? 0.85 : 0.75
+          'line-color': lineColor,
+          'line-width': lineWidth,
+          'line-opacity': lineOpacity
         }
       }
     },
diff --git a/src/views/Summit.vue b/src/views/Summit.vue
index 9dba32d..5dffaa3 100644
--- a/src/views/Summit.vue
+++ b/src/views/Summit.vue
@@ -415,9 +415,21 @@ export default {
     },
     routeDetailsOpen (route) {
       this.$set(route, 'highlight', true)
+      this.routes.forEach(curRoute => {
+        if (curRoute.highlight !== true) {
+          this.$set(curRoute, 'highlight', false)
+        }
+      })
     },
     routeDetailsClose (route) {
       this.$set(route, 'highlight', false)
+
+      // If all route highlights are false, set them all to null
+      if (this.routes.every(curRoute => curRoute.highlight === false)) {
+        this.routes.forEach(curRoute => {
+          this.$set(curRoute, 'highlight', null)
+        })
+      }
     },
     mapReposition (coordinates) {
       if (coordinates) {