From 1b2112430a0f0a3d72fd2dab54ccca2d269bdd18 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 8 Jun 2023 23:35:57 +0200
Subject: [PATCH] =?UTF-8?q?feature:=20d=C5=82ugo=C5=9Bci=20szlak=C3=B3w=20?=
 =?UTF-8?q?po=20klikni=C4=99ciu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SceneryInfo/SceneryInfoRoutes.vue         | 31 ++++++++++++++++---
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/components/SceneryView/SceneryInfo/SceneryInfoRoutes.vue b/src/components/SceneryView/SceneryInfo/SceneryInfoRoutes.vue
index 71a1941..bab7fbf 100644
--- a/src/components/SceneryView/SceneryInfo/SceneryInfoRoutes.vue
+++ b/src/components/SceneryView/SceneryInfo/SceneryInfoRoutes.vue
@@ -4,9 +4,11 @@
       <b>{{ $t('scenery.one-way-routes') }}</b>
 
       <ul class="routes-list">
-        <li v-for="route in station.generalInfo.routes.oneWay">
+        <li v-for="route in station.generalInfo.routes.oneWay" @click="setActiveShowLength(route.name)">
           <span :class="{ 'no-catenary': !route.catenary, internal: route.isInternal }"> {{ route.name }}</span>
-          <span v-if="route.speed" class="speed">{{ route.speed }}</span>
+          <span v-if="route.speed" class="speed">
+            {{ activeShowLength.includes(route.name) ? route.length + 'm' : route.speed }}
+          </span>
           <span v-if="route.SBL" class="sbl">SBL</span>
         </li>
       </ul>
@@ -16,9 +18,11 @@
       <b>{{ $t('scenery.two-way-routes') }}</b>
 
       <ul class="routes-list">
-        <li v-for="route in station.generalInfo.routes.twoWay">
+        <li v-for="(route, i) in station.generalInfo.routes.twoWay" @click="setActiveShowLength(route.name)">
           <span :class="{ 'no-catenary': !route.catenary, internal: route.isInternal }">{{ route.name }}</span>
-          <span v-if="route.speed" class="speed">{{ route.speed }}</span>
+          <span v-if="route.speed" class="speed">
+            {{ activeShowLength.includes(route.name) ? route.length + 'm' : route.speed }}
+          </span>
           <span v-if="route.SBL" class="sbl">SBL</span>
         </li>
       </ul>
@@ -37,6 +41,19 @@ export default defineComponent({
       default: {},
     },
   },
+
+  methods: {
+    setActiveShowLength(name: string) {
+      if (this.activeShowLength.includes(name)) this.activeShowLength.splice(this.activeShowLength.indexOf(name), 1);
+      else this.activeShowLength.push(name);
+    },
+  },
+
+  data() {
+    return {
+      activeShowLength: [] as string[],
+    };
+  },
 });
 </script>
 
@@ -66,6 +83,11 @@ ul.routes-list {
 
   li {
     margin: 0.5em 0.25em;
+    cursor: pointer;
+
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
 
     span {
       padding: 0.2em 0.25em;
@@ -100,7 +122,6 @@ ul.routes-list {
 
       &:only-child {
         border-radius: 0.5em;
-
       }
     }
   }