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
+        <li v-for="route in oneWayRoutes" :key="route.routeName">
-          v-for="route in oneWayRoutes"
-          :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">
-            {{
+            {{ route.routeSpeed }}
-              activeShowLength.includes(route.routeName)
+          </span>
-                ? route.routeLength + 'm'
+          <span v-if="route.routeLength" class="length">
-                : route.routeSpeed
+            {{ (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
+        <li v-for="route in twoWayRoutes" :key="route.routeName">
-          v-for="route in twoWayRoutes"
+          <span :class="{ 'no-catenary': !route.isElectric, internal: route.isInternal }">
-          :key="route.routeName"
+            {{ route.routeName }}
-          @click="setActiveShowLength(route.routeName)"
+          </span>
-        >
+          <span v-if="route.routeSpeed" class="speed">{{ route.routeSpeed }}</span>
-          <span :class="{ 'no-catenary': !route.isElectric, internal: route.isInternal }">{{
+          <span v-if="route.routeLength" class="length">
-            route.routeName
+            {{ (route.routeLength / 1000).toFixed(1) + 'km' }}
-          }}</span>
-          <span v-if="route.routeSpeed" class="speed">
-            {{
-              activeShowLength.includes(route.routeName)
-                ? route.routeLength + 'm'
-                : route.routeSpeed
-            }}
           </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;

src/locales/en.json

@@ -511,8 +511,8 @@
     "abbrev": "Station symbol:",
     "lines-title": "Real lines",
     "project-title": "Project name",
-    "one-way-routes": "One way routes",
+    "one-way-routes": "Signle track routes",
-    "two-way-routes": "Two way routes",
+    "two-way-routes": "Double track routes",
     "option-active-timetables": "Active timetables",
     "option-timetables-history": "Timetables history PL1",
     "option-dispatchers-history": "Dispatchers history PL1",
@@ -529,7 +529,9 @@
     "forum-topic": "Official {name} forum topic",
     "pragotron-link": "Timetable pallet board",
     "tablice-link": "Timetable summary board (by Thundo)",
-    "bottom-info": "Show full history in the Journal tab"
+    "bottom-info": "Show full history in the Journal tab",
+    "btn-show-internal-routes": "Show internal routes",
+    "btn-hide-internal-routes": "Hide internal routes"
   },
   "availability": {
     "title": "Availability",

src/locales/pl.json

@@ -515,7 +515,9 @@
     "forum-topic": "Oficjalny wątek scenerii {name}",
     "pragotron-link": "Paletowa tablica informacyjna",
     "tablice-link": "Tablica informacyjna zbiorcza (autorstwa Thundo)",
-    "bottom-info": "Pokaż pełną historię w zakładce Dziennika"
+    "bottom-info": "Pokaż pełną historię w zakładce Dziennika",
+    "btn-show-internal-routes": "Pokazuj szlaki wewnętrzne",
+    "btn-hide-internal-routes": "Ukrywaj szlaki wewnętrzne"
   },
   "availability": {
     "title": "Dostępność",