From ac76454173adff28dbef0a754e3ad508593ea83a Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sat, 5 Mar 2022 20:25:37 +0100
Subject: [PATCH] Poprawiono szlaki; poprawiono UX dla widoku scenerii

---
 src/App.vue                                   |  4 +-
 src/assets/icon-track-nocatenary.svg          |  4 +
 src/components/SceneryView/SceneryInfo.vue    |  6 ++
 .../SceneryInfo/SceneryInfoIcons.vue          | 20 ----
 .../SceneryInfo/SceneryInfoRoutes.vue         | 94 +++++++++++++++++++
 .../SceneryInfo/SceneryInfoStats.vue          | 64 -------------
 src/components/StationsView/StationTable.vue  |  5 +
 src/router/index.ts                           | 12 +--
 8 files changed, 117 insertions(+), 92 deletions(-)
 create mode 100644 src/assets/icon-track-nocatenary.svg
 create mode 100644 src/components/SceneryView/SceneryInfo/SceneryInfoRoutes.vue

diff --git a/src/App.vue b/src/App.vue
index a559d4e..2b772a3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -69,11 +69,11 @@
 
       <main class="app_main">
         <router-view v-slot="{ Component }">
-          <transition name="view-anim" mode="out-in">
+          <!-- <transition name="view-anim" mode="out-in"> -->
             <keep-alive>
               <component :is="Component" />
             </keep-alive>
-          </transition>
+          <!-- </transition> -->
         </router-view>
       </main>
 
diff --git a/src/assets/icon-track-nocatenary.svg b/src/assets/icon-track-nocatenary.svg
new file mode 100644
index 0000000..86ee926
--- /dev/null
+++ b/src/assets/icon-track-nocatenary.svg
@@ -0,0 +1,4 @@
+<svg width="144" height="144" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M77.9831 61.3284L97.9732 7L44 74.9104H69.9871L51.996 137L99.9722 61.3284H77.9831Z" fill="#FFF500"/>
+<path d="M46 19L98.4444 123.889" stroke="#FF0000" stroke-width="6.33884" stroke-linecap="round"/>
+</svg>
diff --git a/src/components/SceneryView/SceneryInfo.vue b/src/components/SceneryView/SceneryInfo.vue
index aa4a83a..c4b2b5e 100644
--- a/src/components/SceneryView/SceneryInfo.vue
+++ b/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: {
diff --git a/src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue b/src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue
index d554c69..e8453e7 100644
--- a/src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue
+++ b/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;
diff --git a/src/components/SceneryView/SceneryInfo/SceneryInfoRoutes.vue b/src/components/SceneryView/SceneryInfo/SceneryInfoRoutes.vue
new file mode 100644
index 0000000..afadd6d
--- /dev/null
+++ b/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>
diff --git a/src/components/SceneryView/SceneryInfo/SceneryInfoStats.vue b/src/components/SceneryView/SceneryInfo/SceneryInfoStats.vue
index 6fa26d1..6b5eafd 100644
--- a/src/components/SceneryView/SceneryInfo/SceneryInfoStats.vue
+++ b/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;
 
diff --git a/src/components/StationsView/StationTable.vue b/src/components/StationsView/StationTable.vue
index bdb5312..bb50e78 100644
--- a/src/components/StationsView/StationTable.vue
+++ b/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(' ', '_') },
diff --git a/src/router/index.ts b/src/router/index.ts
index bebde4b..772547c 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -30,12 +30,12 @@ const routes: Array<RouteRecordRaw> = [
 ]
 
 const router = createRouter({
-  scrollBehavior(to, from, savedPosition) {
-    if (savedPosition) {
-      return savedPosition;
-    } else {
-      return { top: 0, left: 0 };
-    }
+  scrollBehavior(to, from) {    
+    if (to.name == "SceneryView")
+      return { el: `.app_main` };
+    
+    if (from.name == "SceneryView" && to.name == "StationsView")
+      return { el: `.last-selected`, top: 20 }
 
   },
   history: createWebHistory(),