Poprawiono szlaki; poprawiono UX dla widoku scenerii

src/components/SceneryView/SceneryInfo.vue

@@ -3,9 +3,13 @@
     <section v-if="!timetableOnly">
       <!-- info stats -->
       <scenery-info-stats :station="station" />
+
       <!-- info icons -->
       <scenery-info-icons :station="station" />
 
+      <!-- info routes -->
+      <scenery-info-routes :station="station" />
+
       <!-- info dispatcher -->
       <scenery-info-dispatcher :station="station" :onlineFrom="onlineFrom" />
 
@@ -28,6 +32,7 @@ import SceneryInfoIcons from './SceneryInfo/SceneryInfoIcons.vue';
 import SceneryInfoStats from './SceneryInfo/SceneryInfoStats.vue';
 import SceneryInfoUserList from './SceneryInfo/SceneryInfoUserList.vue';
 import SceneryInfoSpawnList from './SceneryInfo/SceneryInfoSpawnList.vue';
+import SceneryInfoRoutes from "./SceneryInfo/SceneryInfoRoutes.vue";
 
 import Station from '@/scripts/interfaces/Station';
 
@@ -38,6 +43,7 @@ export default defineComponent({
     SceneryInfoStats,
     SceneryInfoUserList,
     SceneryInfoSpawnList,
+    SceneryInfoRoutes
   },
   props: {
     station: {

src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue

@@ -21,22 +21,6 @@
       :title="$t('desc.signals-type') + $t(`signals.${station.generalInfo.signalType}`)"
     />
 
-    <!-- <img
-      v-if="station.generalInfo && station.generalInfo.routes.sblRouteNames.length > 0"
-      :src="icons.SBL"
-      alt="sbl icon"
-      :title="$t('desc.SBL') + `${station.generalInfo.routes.sblRouteNames.join(', ')}`"
-    />
-
-    <img
-      v-if="station.generalInfo && station.generalInfo.routes.twoWay.some(route => route.TWB)"
-      :src="icons.TWB"
-      alt="TWB icon"
-      :title="
-        $t('desc.TWB-routes') + station.generalInfo.routes.twoWay.filter(route => route.TWB).map(route => route.name).join(', ')
-      "
-    /> -->
-
     <img v-if="station.generalInfo?.default" :src="icons.td2" alt="default scenery" :title="$t('desc.default')" />
 
     <img
@@ -79,8 +63,6 @@ export default defineComponent({
 
   data: () => ({
     icons: {
-      SBL: require('@/assets/icon-SBL.svg'),
-      TWB: require('@/assets/icon-2way-block.svg'),
       td2: require('@/assets/icon-td2.svg'),
       lock: require('@/assets/icon-lock.svg'),
       unavailable: require('@/assets/icon-unavailable.svg'),
@@ -94,8 +76,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .info-icons {
-  padding: 1em 0;
-
   img {
     width: 3.5em;
     margin: 0 0.5em;

src/components/SceneryView/SceneryInfo/SceneryInfoRoutes.vue

@@ -0,0 +1,94 @@
+<template>
+  <section class="info-routes" v-if="station.generalInfo">
+    <div
+      class="route-info"
+      :class="{ 'no-catenary': !route.catenary, internal: route.isInternal }"
+      v-for="route in [...station.generalInfo.routes.oneWay, ...station.generalInfo.routes.twoWay].filter(
+        (route) => route.name != '-'
+      )"
+      :key="route.name"
+      :title="
+        `Szlak ${route.name}: ${route.isInternal ? 'wewnętrzny' : 'zewnętrzny'}, ${
+          route.tracks == 2 ? 'dwutorowy' : 'jednotorowy'
+        }, ${route.catenary ? 'zelektryfikowany' : 'niezelektryfikowany'} z ${route.SBL ? 'SBL' : 'PBL'} ${
+          route.TWB ? 'i blokadą dwukierunkową' : ''
+        }`
+      "
+    >
+      <span class="track-name">
+        <b>{{ route.name }}</b>
+      </span>
+
+      <span class="track-specs">
+        {{ route.tracks }}tor
+        <img v-if="route.catenary" :src="icons.trackCatenary" alt="icon track catenary"  />
+        <img v-else :src="icons.trackNoCatenary" alt="icon track no catenary" >
+
+        <img v-if="route.TWB" :src="icons.trackTWB" alt="icon track twb" />
+        <img v-if="route.SBL" :src="icons.trackSBL" alt="icon track sbl" />
+      </span>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import Station from '@/scripts/interfaces/Station';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    station: {
+      type: Object as () => Station,
+      default: {},
+    },
+  },
+
+  data() {
+    return {
+      icons: {
+        trackTWB: require("@/assets/icon-track-twb.svg"),
+        trackSBL: require("@/assets/icon-track-sbl.svg"),
+        trackCatenary: require("@/assets/icon-track-catenary.svg"),
+        trackNoCatenary: require("@/assets/icon-track-nocatenary.svg"),
+      }
+    }
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.info-routes {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  padding: 1em 3em;
+}
+
+.route-info {
+  margin: 0.45em 0.25em;
+  font-size: 1.05em;
+  cursor: help;
+
+  span {
+    height: 100%;
+    background-color: #009dce;
+
+    padding: 0.2em 0.25em;
+  }
+
+  &.no-catenary > span {
+    background-color: #686868;
+  }
+
+  &.internal > .track-name {
+    text-decoration: underline;
+  }
+
+  img {
+    height: 1.2em;
+    vertical-align: text-bottom;
+  }
+}
+
+</style>

src/components/SceneryView/SceneryInfo/SceneryInfoStats.vue

@@ -28,33 +28,6 @@
       </span>
     </span>
   </section>
-
-  <section class="info-tracks" v-if="station.generalInfo">
-    <div
-      class="track-info"
-      :class="{ 'no-catenary': !route.catenary, internal: route.isInternal }"
-      v-for="route in [...station.generalInfo.routes.oneWay, ...station.generalInfo.routes.twoWay].filter(route => route.name != '-')"
-      :key="route.name"
-      :title="
-        `Szlak ${route.name}: ${route.isInternal ? 'wewnętrzny' : 'zewnętrzny'}, ${
-          route.tracks == 2 ? 'dwutorowy' : 'jednotorowy'
-        }, ${route.catenary ? 'zelektryfikowany' : 'niezelektryfikowany'} z ${route.SBL ? 'SBL' : 'PBL'} ${
-          route.TWB ? 'i blokadą dwukierunkową' : ''
-        }`
-      "
-    >
-      <span class="track-name">
-        <b>{{ route.name }}</b>
-      </span>
-
-      <span class="track-specs">
-        {{ route.tracks }}tor
-        <img :src="require('@/assets/icon-track-catenary.svg')" alt="icon track catenary" v-if="route.catenary" />
-        <img v-if="route.TWB" :src="require('@/assets/icon-track-twb.svg')" alt="icon track twb"/>
-        <img v-if="route.SBL" :src="require('@/assets/icon-track-sbl.svg')" alt="icon track sbl"/>
-      </span>
-    </div>
-  </section>
 </template>
 
 <script lang="ts">
@@ -84,43 +57,6 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../../../styles/variables.scss';
 
-.info-tracks {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-
-  padding: 0 3em;
-}
-
-.track-info {
-  margin: 0.45em 0.25em;
-  font-size: 1.05em;
-  cursor: help;
-
-  span {
-    height: 100%;
-    background-color: #009dce;
-
-    padding: 0.2em 0.25em;
-  }
-
-  &.no-catenary > span {
-    background-color: #686868;
-  }
-
-  &.internal > .track-name {
-    text-decoration: underline;
-  }
-
-  img {
-    height: 1.2em;
-    vertical-align: text-bottom;
-  }
-}
-
-.train-specs {
-}
-
 .info-stats {
   padding: 1rem 0;
 

src/components/StationsView/StationTable.vue

@@ -35,6 +35,7 @@
         <tbody>
           <tr
             class="station"
+            :class="{ 'last-selected': lastSelectedStationName == station.name }"
             v-for="(station, i) in stations"
             :key="i + station.name"
             @click.left="setScenery(station.name)"
@@ -267,6 +268,8 @@ export default defineComponent({
     headIds: ['station', 'min-lvl', 'status', 'dispatcher', 'dispatcher-lvl', 'routes', 'general'],
 
     headIconsIds: ['user', 'spawn', 'timetable'],
+
+    lastSelectedStationName: ""
   }),
 
   setup() {
@@ -289,6 +292,8 @@ export default defineComponent({
 
       if (!station) return;
 
+      this.lastSelectedStationName = station.name;
+
       this.$router.push({
         name: 'SceneryView',
         query: { station: station.name.replaceAll(' ', '_') },