chore: added hiding & showing internal routes in scenery view

src/components/SceneryView/SceneryInfo/SceneryInfoRoutes.vue

@@ -1,23 +1,26 @@
 <template>
   <section class="info-routes" v-if="station.generalInfo">
     <div class="routes one-way" v-if="oneWayRoutes.length > 0">
-      <b>{{ $t('scenery.one-way-routes') }}</b>
+      <button
+        class="routes-btn"
+        @click="showInternalSingle = !showInternalSingle"
+        data-tooltip-type="BaseTooltip"
+        :data-tooltip-content="`${showInternalSingle ? $t('scenery.btn-hide-internal-routes') : $t('scenery.btn-show-internal-routes')}`"
+      >
+        <b>{{ $t('scenery.one-way-routes') }}</b>
+        <i class="fa-solid" :class="`${showInternalSingle ? 'fa-eye' : 'fa-eye-slash'}`"></i>
+      </button>
 
       <ul class="routes-list">
-        <li
-          v-for="route in oneWayRoutes"
-          :key="route.routeName"
-          @click="setActiveShowLength(route.routeName)"
-        >
+        <li v-for="route in oneWayRoutes" :key="route.routeName">
           <span :class="{ 'no-catenary': !route.isElectric, internal: route.isInternal }">
             {{ route.routeName }}</span
           >
           <span v-if="route.routeSpeed" class="speed">
-            {{
-              activeShowLength.includes(route.routeName)
-                ? route.routeLength + 'm'
-                : route.routeSpeed
-            }}
+            {{ route.routeSpeed }}
+          </span>
+          <span v-if="route.routeLength" class="length">
+            {{ (route.routeLength / 1000).toFixed(1) + 'km' }}
           </span>
           <span v-if="route.isRouteSBL" class="sbl">SBL</span>
         </li>
@@ -25,23 +28,24 @@
     </div>
 
     <div class="routes two-way" v-if="twoWayRoutes.length > 0">
-      <b>{{ $t('scenery.two-way-routes') }}</b>
+      <button
+        class="routes-btn"
+        @click="showInternalDouble = !showInternalDouble"
+        data-tooltip-type="BaseTooltip"
+        :data-tooltip-content="`${showInternalDouble ? $t('scenery.btn-hide-internal-routes') : $t('scenery.btn-show-internal-routes')}`"
+      >
+        <b>{{ $t('scenery.two-way-routes') }}</b>
+        <i class="fa-solid" :class="`${showInternalDouble ? 'fa-eye' : 'fa-eye-slash'}`"></i>
+      </button>
 
       <ul class="routes-list">
-        <li
-          v-for="route in twoWayRoutes"
-          :key="route.routeName"
-          @click="setActiveShowLength(route.routeName)"
-        >
-          <span :class="{ 'no-catenary': !route.isElectric, internal: route.isInternal }">{{
-            route.routeName
-          }}</span>
-          <span v-if="route.routeSpeed" class="speed">
-            {{
-              activeShowLength.includes(route.routeName)
-                ? route.routeLength + 'm'
-                : route.routeSpeed
-            }}
+        <li v-for="route in twoWayRoutes" :key="route.routeName">
+          <span :class="{ 'no-catenary': !route.isElectric, internal: route.isInternal }">
+            {{ route.routeName }}
+          </span>
+          <span v-if="route.routeSpeed" class="speed">{{ route.routeSpeed }}</span>
+          <span v-if="route.routeLength" class="length">
+            {{ (route.routeLength / 1000).toFixed(1) + 'km' }}
           </span>
           <span v-if="route.isRouteSBL" class="sbl">SBL</span>
         </li>
@@ -62,27 +66,28 @@ export default defineComponent({
     }
   },
 
-  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[]
+      showInternalSingle: false,
+      showInternalDouble: false
     };
   },
 
   computed: {
     oneWayRoutes() {
-      return this.station.generalInfo?.routes.single ?? [];
+      return (
+        this.station.generalInfo?.routes.single
+          .filter((r) => !r.isInternal || r.isInternal == this.showInternalSingle)
+          .sort((r1, r2) => r1.routeName.localeCompare(r2.routeName)) ?? []
+      );
     },
 
     twoWayRoutes() {
-      return this.station.generalInfo?.routes.double ?? [];
+      return (
+        this.station.generalInfo?.routes.double
+          .filter((r) => !r.isInternal || r.isInternal == this.showInternalDouble)
+          .sort((r1, r2) => r1.routeName.localeCompare(r2.routeName)) ?? []
+      );
     }
   }
 });
@@ -92,20 +97,26 @@ export default defineComponent({
 .info-routes {
   display: flex;
   justify-content: center;
-  flex-wrap: wrap;
+  flex-direction: column;
 
   margin: 1em 0;
 }
 
 .routes {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-
   padding: 0.25em;
 }
 
+.routes > button.routes-btn {
+  margin: 0 auto;
+  display: inline-block;
+
+  i {
+    margin-left: 0.5em;
+    width: 1.25em;
+    height: 1.25em;
+  }
+}
+
 ul.routes-list {
   margin: 0.45em 0.25em;
   display: flex;
@@ -121,7 +132,7 @@ ul.routes-list {
     -webkit-user-select: none;
 
     span {
-      padding: 0.2em 0.25em;
+      padding: 0.2em;
       background-color: #007599;
       font-weight: bold;
 
@@ -138,6 +149,10 @@ ul.routes-list {
         color: #cfcfcf;
       }
 
+      &.length {
+        background-color: #303030;
+        color: #cfcfcf;
+      }
       &.sbl {
         color: var(--clr-primary);
         background-color: #404040;