Merge pull request #126 from Spythere/development

v1.29.2

index.html

@@ -22,11 +22,6 @@
 
     <link rel="icon" href="favicon.ico" />
 
-    <link rel="stylesheet" href="fa/css/fontawesome.css" />
-    <link rel="stylesheet" href="fa/css/brands.css" />
-    <link rel="stylesheet" href="fa/css/regular.css" />
-    <link rel="stylesheet" href="fa/css/solid.css" />
-
     <!-- Static OpenGraph meta -->
     <meta name="description" content="Pomocnik maszynisty i dyżurnego symulatora Train Driver 2" />
     <meta property="og:url" content="https://stacjownik-td2.web.app/" />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stacjownik",
-  "version": "1.29.0",
+  "version": "1.29.2",
   "private": true,
   "type": "module",
   "scripts": {
@@ -26,7 +26,7 @@
     "vue-router": "^4.4.0"
   },
   "devDependencies": {
-    "@types/node": "^20.14.12",
+    "@types/node": "^22.13.13",
     "@types/showdown": "^2.0.6",
     "@vite-pwa/assets-generator": "^0.2.4",
     "@vitejs/plugin-vue": "^5.1.0",

src/App.vue

@@ -167,32 +167,13 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import './styles/global';
+@use './styles/animations';
-@import './styles/animations';
-
-.route {
-  margin: 0 0.2em;
-
-  &-active,
-  &[data-active='true'] {
-    color: $accentCol;
-    font-weight: bold;
-  }
-}
 
 // APP
 #app {
   color: white;
-  font-size: 1rem;
   overflow-x: hidden;
-
+  font-size: 1em;
-  @include smallScreen() {
-    font-size: calc(0.65rem + 0.85vw);
-  }
-
-  @include screenLandscape() {
-    font-size: calc(0.45rem + 0.8vw);
-  }
 }
 
 // CONTAINER

src/components/App/AppFooter.vue

@@ -36,6 +36,4 @@ export default defineComponent({
     }
   }
 });
-</script>
+</script>
-
-<style scoped></style>

src/components/App/AppHeader.vue

@@ -45,17 +45,17 @@
         </span>
 
         <span class="header_links">
-          <router-link class="route" active-class="route-active" to="/" exact>
+          <router-link class="route-link" active-class="route-link-active" to="/" exact>
             {{ $t('app.sceneries') }}
           </router-link>
           /
-          <router-link class="route" active-class="route-active" to="/trains">{{
+          <router-link class="route-link" active-class="route-link-active" to="/trains">{{
             $t('app.trains')
           }}</router-link>
           /
           <router-link
-            class="route"
+            class="route-link"
-            active-class="route-active"
+            active-class="route-link-active"
             :data-active="$route.path.startsWith('/journal')"
             to="/journal"
           >
@@ -116,9 +116,9 @@ export default defineComponent({
   }
 });
 </script>
+
 <style lang="scss" scoped>
-@import '../../styles/variables.scss';
+@use '../../styles/responsive';
-@import '../../styles/responsive.scss';
 
 // HEADER
 .app_header {
@@ -126,7 +126,7 @@ export default defineComponent({
   justify-content: center;
 
   position: relative;
-  background-color: $primaryCol;
+  background-color: #2c2c2c;
 }
 
 .header {
@@ -141,7 +141,7 @@ export default defineComponent({
 
     border-radius: 0 0 1em 1em;
 
-    @include smallScreen {
+    @include responsive.smallScreen{
       position: relative;
       margin-top: 0.5em;
     }
@@ -180,7 +180,7 @@ export default defineComponent({
 
     padding: 0.5em;
 
-    @include smallScreen {
+    @include responsive.smallScreen{
       transform: translateX(85%);
     }
   }

src/components/App/Clock.vue

@@ -6,9 +6,7 @@
 import { computed, defineComponent, ref } from 'vue';
 export default defineComponent({
   name: 'VueClock',
-  data: () => ({
+  data: () => ({ timestamp: Date.now() }),
-    timestamp: Date.now()
-  }),
   setup() {
     let timestamp = ref(Date.now());
 
@@ -28,8 +26,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-
 .clock {
   display: flex;
   align-items: center;

src/components/App/StatusIndicator.vue

@@ -310,7 +310,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';
 
 // INDICATOR TOOLTIP ANIMATION
 .tooltip-anim {
@@ -379,7 +379,7 @@ export default defineComponent({
       content: '';
     }
 
-    @include midScreen() {
+    @include responsive.midScreen() {
       left: auto;
       right: 200%;
 
@@ -393,7 +393,7 @@ export default defineComponent({
       }
     }
 
-    @include smallScreen() {
+    @include responsive.smallScreen{
       min-width: 8em;
     }
   }

src/components/App/UpdateCard.vue

@@ -73,11 +73,9 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/variables';
-
 ::v-deep(h1) {
   text-align: center;
-  color: $accentCol;
+  color: var(--clr-primary);
 }
 
 ::v-deep(h2) {

src/components/Global/ActionButton.vue

@@ -13,8 +13,7 @@ export default defineComponent({});
 </script>
 
 <style lang="scss">
-@import '../../styles/variables';
+@use '../../styles/responsive';
-@import '../../styles/responsive';
 
 .button_content {
   display: flex;

src/components/Global/AddDataButton.vue

@@ -38,5 +38,3 @@ export default defineComponent({
   }
 });
 </script>
-
-<style scoped></style>

src/components/Global/Card.vue

@@ -43,7 +43,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';
 
 .card {
   position: fixed;
@@ -85,7 +85,7 @@ export default defineComponent({
   overflow: auto;
 }
 
-@include smallScreen {
+@include responsive.smallScreen{
   .card {
     align-items: flex-start;
   }

src/components/Global/DonationCard.vue

@@ -56,7 +56,7 @@
         </i>
       </div>
 
-      <div class="actions">
+      <div class="actions-container">
         <a
           class="action a-button btn--image coffee"
           href="https://buycoffee.to/spythere"
@@ -150,8 +150,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-
 .body {
   display: grid;
   grid-template-rows: 1fr auto;
@@ -198,32 +196,28 @@ a.discord {
   }
 }
 
-.actions > .action {
+.actions-container > .action {
   &.paypal {
-    $btnColor: #254069;
+    background-color: #254069;
-
-    background-color: $btnColor;
 
     &:hover {
-      background-color: lighten($btnColor, 5%);
+      background-color: #2f5185;
     }
   }
 
   &.coffee {
-    $btnColor: #009255;
+    background-color: #009255;
-    background-color: $btnColor;
 
     &:hover {
-      background-color: lighten($btnColor, 5%);
+      background-color: #00a35f;
     }
   }
 
   &.exit {
-    $btnColor: #686868;
+    background-color: #686868;
-    background-color: $btnColor;
 
     &:hover {
-      background-color: lighten($btnColor, 5%);
+      background-color: #8d8d8d;
     }
   }
 }

src/components/Global/RegionDropdown.vue

@@ -120,8 +120,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/variables.scss';
-
 .region-dropdown {
   display: flex;
   align-items: center;
@@ -182,7 +180,7 @@ li.option {
     background: none;
 
     &:focus + span {
-      color: $accentCol;
+      color: var(--clr-primary);
       font-weight: 800;
     }
   }

src/components/Global/SearchBox.vue

@@ -7,7 +7,12 @@
       @keypress="updateValue"
     />
 
-    <img class="search-exit" src="/images/icon-exit.svg" alt="exit-icon" @click="clearSearchValue" />
+    <img
+      class="search-exit"
+      src="/images/icon-exit.svg"
+      alt="exit-icon"
+      @click="clearSearchValue"
+    />
   </div>
 </template>
 
@@ -17,21 +22,10 @@ import { defineComponent, ref, watch } from 'vue';
 export default defineComponent({
   emits: ['update:searchedValue', 'clearValue'],
   props: {
-    searchedValue: {
+    searchedValue: { type: String, required: true },
-      type: String,
+    updateOnInput: { type: Boolean, default: true },
-      required: true
+    titleToTranslate: { type: String, required: true },
-    },
+    clearValue: { type: Function }
-    updateOnInput: {
-      type: Boolean,
-      default: true
-    },
-    titleToTranslate: {
-      type: String,
-      required: true
-    },
-    clearValue: {
-      type: Function
-    }
   },
 
   setup(props, { emit }) {
@@ -56,17 +50,13 @@ export default defineComponent({
         emit('update:searchedValue', compSearchedValue.value);
     };
 
-    return {
+    return { compSearchedValue, updateValue, clearSearchValue };
-      compSearchedValue,
-      updateValue,
-      clearSearchValue
-    };
   }
 });
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive';
+@use '../../styles/responsive';
 
 .search {
   &-box {
@@ -78,7 +68,7 @@ export default defineComponent({
 
     margin: 0.5em 0 0.5em 0.5em;
 
-    @include smallScreen() {
+    @include responsive.smallScreen{
       width: 85%;
     }
   }

src/components/Global/StationStatusBadge.vue

@@ -20,15 +20,9 @@ import { Status } from '../../typings/common';
 
 export default defineComponent({
   props: {
-    dispatcherStatus: {
+    dispatcherStatus: { type: Number as PropType<Status.ActiveDispatcher | number> },
-      type: Number as PropType<Status.ActiveDispatcher | number>
+    dispatcherTimestamp: { type: Number as PropType<number | null> },
-    },
+    isOnline: { type: Boolean }
-    dispatcherTimestamp: {
-      type: Number as PropType<number | null>
-    },
-    isOnline: {
-      type: Boolean
-    }
   },
   mixins: [dateMixin],
 

src/components/Global/StockList.vue

@@ -22,20 +22,12 @@ export default defineComponent({
   components: { VehicleThumbnail },
 
   props: {
-    trainStockList: {
+    trainStockList: { type: Array as PropType<string[]>, required: true },
-      type: Array as PropType<string[]>,
+    tractionOnly: { type: Boolean, required: false }
-      required: true
-    },
-    tractionOnly: {
-      type: Boolean,
-      required: false
-    }
   },
 
   data() {
-    return {
+    return { apiStore: useApiStore() };
-      apiStore: useApiStore()
-    };
   },
 
   computed: {
@@ -151,7 +143,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-
 .list-wrapper {
   display: flex;
   justify-content: center;

src/components/Global/VehicleThumbnail.vue

@@ -51,7 +51,6 @@ function onImageLoad() {
 
 <style lang="scss" scoped>
 .vehicle-thumbnail {
-  
   position: relative;
   opacity: 0;
   transition: opacity 100ms ease-in-out;

src/components/JournalView/JournalDailyStats.vue

@@ -234,9 +234,9 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
+@use '../../styles/animations';
-@import '../../styles/JournalStats.scss';
+@use '../../styles/journal-stats';
-@import '../../styles/badge.scss';
+@use '../../styles/responsive';
 
 .daily-stats {
   text-align: left;
@@ -265,7 +265,7 @@ ul.stats-list {
   gap: 0.5em;
 }
 
-@include smallScreen {
+@include responsive.smallScreen{
   h3 {
     text-align: center;
   }

src/components/JournalView/JournalDispatchers/JournalDispatcherEntry.vue

@@ -121,14 +121,8 @@ import StationStatusBadge from '../../Global/StationStatusBadge.vue';
 
 export default defineComponent({
   props: {
-    entry: {
+    entry: { type: Object as PropType<API.DispatcherHistory.Data>, required: true },
-      type: Object as PropType<API.DispatcherHistory.Data>,
+    showExtraInfo: { type: Boolean, required: true }
-      required: true
-    },
-    showExtraInfo: {
-      type: Boolean,
-      required: true
-    }
   },
 
   components: { StationStatusBadge },
@@ -136,10 +130,7 @@ export default defineComponent({
   emits: ['toggleShowExtraInfo'],
 
   data() {
-    return {
+    return { regions, apiStore: useApiStore() };
-      regions,
-      apiStore: useApiStore()
-    };
   },
 
   methods: {
@@ -151,8 +142,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles/responsive.scss';
+@use '../../../styles/responsive';
-@import '../../../styles/badge.scss';
+@use '../../../styles/badge';
 
 .region-badge {
   padding: 0 0.25em;
@@ -207,7 +198,7 @@ export default defineComponent({
   border-radius: 1em;
 }
 
-@include smallScreen {
+@include responsive.smallScreen{
   .entry-info {
     flex-direction: column;
     justify-content: center;

src/components/JournalView/JournalDispatchers/JournalDispatcherStats.vue

@@ -32,25 +32,25 @@
         </span>
       </div>
 
-      <hr class="section-separator" />
+      <hr class="section-separator" v-if="stats.issuedTimetables" />
 
-      <div class="info-stats">
+      <div class="info-stats" v-if="stats.issuedTimetables">
-        <span class="badge stat-badge" v-if="stats.issuedTimetables">
+        <span class="badge stat-badge">
           <span>{{ $t('journal.dispatcher-stats.timetables-count') }}</span>
           <span>{{ stats.issuedTimetables.count }}</span>
         </span>
 
-        <span class="badge stat-badge" v-if="stats.issuedTimetables">
+        <span class="badge stat-badge">
           <span>{{ $t('journal.dispatcher-stats.timetables-sum') }}</span>
           <span>{{ stats.issuedTimetables.distanceSum.toFixed(2) }}km</span>
         </span>
 
-        <span class="badge stat-badge" v-if="stats.issuedTimetables">
+        <span class="badge stat-badge">
           <span>{{ $t('journal.dispatcher-stats.timetables-max') }}</span>
           <span>{{ stats.issuedTimetables.distanceMax.toFixed(2) }}km</span>
         </span>
 
-        <span class="badge stat-badge" v-if="stats.issuedTimetables">
+        <span class="badge stat-badge">
           <span>{{ $t('journal.dispatcher-stats.timetables-avg') }}</span>
           <span>{{ stats.issuedTimetables.distanceAvg.toFixed(2) }}km</span>
         </span>
@@ -81,5 +81,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles/JournalStats.scss';
+@use '../../../styles/journal-stats';
 </style>

src/components/JournalView/JournalDispatchers/JournalDispatchersList.vue

@@ -104,6 +104,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles/variables.scss';
+@use '../../../styles/journal-section';
-@import '../../../styles/JournalSection.scss';
 </style>

src/components/JournalView/JournalHeader.vue

@@ -1,11 +1,16 @@
 <template>
   <section class="journal-header">
     <div class="journal-type-options">
-      <router-link class="router-link" active-class="route-active" to="/journal/timetables" exact>
+      <router-link
+        class="route-link"
+        active-class="route-link-active"
+        to="/journal/timetables"
+        exact
+      >
         {{ $t('journal.section-timetables') }}
       </router-link>
       &nbsp;&bull;&nbsp;
-      <router-link class="router-link" active-class="route-active" to="/journal/dispatchers">
+      <router-link class="route-link" active-class="route-link-active" to="/journal/dispatchers">
         {{ $t('journal.section-dispatchers') }}
       </router-link>
     </div>
@@ -39,8 +44,4 @@ export default defineComponent({});
   display: flex;
   justify-content: center;
 }
-
-.router-link.active {
-  color: gold;
-}
 </style>

src/components/JournalView/JournalOptions.vue

@@ -51,7 +51,7 @@
                   :list="propName.toString()"
                 />
 
-                <button class="search-exit" v-if="!propName.toString().startsWith('search-date')">
+                <button class="btn btn--action search-exit" v-if="!propName.toString().startsWith('search-date')">
                   <img
                     src="/images/icon-exit.svg"
                     alt="exit-icon"
@@ -300,6 +300,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/dropdown';
+@use '../../styles/dropdown';
-@import '../../styles/dropdown_filters';
+@use '../../styles/dropdown-filters';
 </style>

src/components/JournalView/JournalStats.vue

@@ -79,14 +79,12 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/dropdown.scss';
+@use '../../styles/dropdown';
-@import '../../styles/dropdown_filters.scss';
+@use '../../styles/dropdown-filters';
-@import '../../styles/variables.scss';
 
 .dropdown_wrapper.dropdown-align-right {
   left: auto;
   right: 0;
   max-width: 700px;
-  // max-width: 100%;
 }
 </style>

src/components/JournalView/JournalTimetables/EntryDetails.vue

@@ -23,7 +23,7 @@
 
       <div class="g-separator"></div>
 
-      <div class="stock-specs">
+      <div class="timetable-specs">
         <span class="badge specs-badge" v-if="timetable.authorName">
           <span>{{ $t('journal.dispatcher-name') }}</span>
           <span>{{ timetable.authorName }}</span>
@@ -225,9 +225,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles/variables.scss';
+@use '../../../styles/responsive';
-@import '../../../styles/responsive.scss';
+@use '../../../styles/badge';
-@import '../../../styles/badge.scss';
 
 .details-body {
   margin-top: 0.5em;
@@ -250,10 +249,11 @@ export default defineComponent({
   margin-top: 1em;
 
   button[data-checked='true'] {
-    color: $accentCol;
+    color: var(--clr-primary);
   }
 }
 
+.timetable-specs,
 .stock-specs {
   display: flex;
   flex-wrap: wrap;
@@ -271,7 +271,7 @@ export default defineComponent({
 
   span:last-child {
     color: black;
-    background-color: $accentCol;
+    background-color: var(--clr-primary);
     border-radius: 0 0.25em 0.25em 0;
   }
 }
@@ -299,8 +299,8 @@ hr {
   }
 }
 
-@include smallScreen() {
+@include responsive.smallScreen{
-  .stock-specs {
+  .timetable-specs {
     justify-content: center;
   }
 

src/components/JournalView/JournalTimetables/EntryGeneral.vue

@@ -130,8 +130,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles/responsive';
+@use '../../../styles/responsive';
-@import '../../../styles/badge';
+@use '../../../styles/badge';
 
 .item-general {
   display: flex;
@@ -191,7 +191,7 @@ export default defineComponent({
   }
 }
 
-@include smallScreen {
+@include responsive.smallScreen{
   .item-general {
     flex-direction: column;
     justify-content: center;

src/components/JournalView/JournalTimetables/EntryStatus.vue

@@ -59,7 +59,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles/responsive.scss';
+@use '../../../styles/responsive';
 
 .entry-status {
   display: flex;
@@ -67,7 +67,7 @@ export default defineComponent({
   flex-wrap: wrap;
   gap: 0.5em;
 
-  @include smallScreen() {
+  @include responsive.smallScreen{
     justify-content: center;
   }
 }

src/components/JournalView/JournalTimetables/EntryStops.vue

@@ -187,7 +187,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles/badge.scss';
+@use '../../../styles/badge';
 
 .entry-stops {
   word-wrap: break-word;

src/components/JournalView/JournalTimetables/JournalDriverStats.vue

@@ -12,14 +12,6 @@
       <hr class="header-separator" />
 
       <div class="info-stats">
-        <span class="badge stat-badge">
-          <span>{{ $t('journal.driver-stats.timetables') }}</span>
-          <span
-            >{{ store.driverStatsData._count.fulfilled }} /
-            {{ store.driverStatsData._count._all }}</span
-          >
-        </span>
-
         <span class="badge stat-badge">
           <span>{{ $t('journal.driver-stats.longest-timetable') }}</span>
           <span> {{ store.driverStatsData._max.routeDistance.toFixed(2) }}km </span>
@@ -29,12 +21,43 @@
           <span>{{ $t('journal.driver-stats.avg-timetable') }}</span>
           <span> {{ store.driverStatsData._avg.routeDistance.toFixed(2) }}km </span>
         </span>
+      </div>
+
+      <hr class="section-separator" />
+
+      <div class="info-stats">
+        <span class="badge stat-badge">
+          <span>{{ $t('journal.driver-stats.timetables') }}</span>
+          <span>
+            {{ store.driverStatsData._count.fulfilled }} /
+            {{ store.driverStatsData._count._all }}
+
+            <template v-if="store.driverStatsData._count._all > 0">
+              ({{
+                (
+                  (store.driverStatsData._count.fulfilled / store.driverStatsData._count._all) *
+                  100
+                ).toFixed(2)
+              }}%)
+            </template>
+          </span>
+        </span>
 
         <span class="badge stat-badge">
           <span>{{ $t('journal.driver-stats.distance') }}</span>
           <span>
             {{ store.driverStatsData._sum.currentDistance.toFixed(2) }} /
             {{ store.driverStatsData._sum.routeDistance.toFixed(2) }}km
+
+            <template v-if="store.driverStatsData._sum.routeDistance > 0">
+              ({{
+                (
+                  (store.driverStatsData._sum.currentDistance /
+                    store.driverStatsData._sum.routeDistance) *
+                  100
+                ).toFixed(2)
+              }}%)
+            </template>
           </span>
         </span>
 
@@ -43,6 +66,16 @@
           <span>
             {{ store.driverStatsData._sum.confirmedStopsCount }} /
             {{ store.driverStatsData._sum.allStopsCount }}
+
+            <template v-if="store.driverStatsData._sum.allStopsCount > 0">
+              ({{
+                (
+                  (store.driverStatsData._sum.confirmedStopsCount /
+                    store.driverStatsData._sum.allStopsCount) *
+                  100
+                ).toFixed(2)
+              }}%)
+            </template>
           </span>
         </span>
       </div>
@@ -68,5 +101,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles/JournalStats.scss';
+@use '../../../styles/journal-stats';
 </style>

src/components/JournalView/JournalTimetables/JournalTimetableEntry.vue

@@ -3,14 +3,14 @@
     <!-- General -->
     <EntryGeneral :timetable="timetableEntry" />
 
+    <!-- Route -->
+    <div class="entry-route">
+      <b>{{ timetableEntry.route.replace('|', ' - ') }}</b>
+    </div>
+
+    <hr />
+
     <div @click="toggleExtraInfo" style="cursor: pointer">
-      <!-- Route -->
-      <div class="entry-route">
-        <b>{{ timetableEntry.route.replace('|', ' - ') }}</b>
-      </div>
-
-      <hr />
-
       <!-- Status -->
       <EntryStatus :timetable="timetableEntry" />
     </div>
@@ -134,15 +134,20 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles/responsive.scss';
+@use '../../../styles/responsive';
 
 .timetable-history-entry {
   background-color: #1a1a1a;
   padding: 1em;
 }
 
-@include smallScreen {
+.entry-route {
+  display: flex;
+}
+
+@include responsive.smallScreen{
   .entry-route {
+    justify-content: center;
     text-align: center;
   }
 }

src/components/JournalView/JournalTimetables/JournalTimetablesList.vue

@@ -107,10 +107,11 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles/JournalSection.scss';
+@use '../../../styles/animations';
-@import '../../../styles/animations.scss';
+@use '../../../styles/journal-section';
+@use '../../../styles/responsive';
 
-@include smallScreen {
+@include responsive.smallScreen{
   .journal_item-info {
     text-align: center;
   }

src/components/SceneryView/SceneryDispatchersHistory.vue

@@ -148,8 +148,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';
-@import '../../styles/sceneryViewTables.scss';
+@use '../../styles/scenery-history-table';
 
 .scenery-dispatchers-history {
   height: 100%;
@@ -194,7 +194,7 @@ export default defineComponent({
   color: springgreen;
 }
 
-@include smallScreen {
+@include responsive.smallScreen{
   .journal-list > div {
     flex-direction: column;
     justify-content: center;

src/components/SceneryView/SceneryHeader.vue

@@ -35,8 +35,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/variables.scss';
+@use '../../styles/responsive';
-@import '../../styles/responsive.scss';
 
 .info-header {
   margin-top: 1em;

src/components/SceneryView/SceneryInfo.vue

@@ -1,69 +1,11 @@
 <template>
   <div class="scenery-info">
     <section>
-      <div class="scenery-info-general">
+      <SceneryInfoIcons :station="station" />
-        <SceneryInfoIcons :station="station" />
+      <SceneryInfoGeneral :station="station" />
+      <SceneryInfoRoutes v-if="station" :station="station" />
+      <SceneryInfoAuthors :station="station" />
 
-        <div class="scenery-general-list" v-if="station?.generalInfo">
-          <span>
-            <b>{{ $t('availability.title') }}:</b>
-            {{ $t(`availability.${station.generalInfo.availability}`) }}
-
-            <span v-if="station.generalInfo.reqLevel > -1">
-              -
-              {{
-                $t(
-                  'scenery.req-level',
-                  { lvl: station.generalInfo.reqLevel },
-                  station.generalInfo.reqLevel
-                )
-              }}
-            </span>
-          </span>
-
-          <span>
-            &bull; <b>{{ $t('controls.title') }}:</b>
-            {{ $t(`controls.${station.generalInfo.controlType}`) }}
-          </span>
-
-          <span>
-            &bull; <b>{{ $t('signals.title') }}:</b>
-            {{ $t(`signals.${station.generalInfo.signalType}`) }}
-          </span>
-
-          <span v-if="station.generalInfo.lines">
-            &bull; <b>{{ $t('scenery.lines-title') }}:</b> {{ station.generalInfo.lines }}
-          </span>
-          <span v-if="station.generalInfo.project">
-            &bull; <b>{{ $t('scenery.project-title') }}: </b>
-            <a
-              style="color: salmon; text-decoration: underline; font-weight: bold"
-              :href="station.generalInfo.projectUrl"
-              target="_blank"
-            >
-              {{ station.generalInfo.project }}
-            </a>
-          </span>
-        </div>
-
-        <SceneryInfoRoutes v-if="station" :station="station" />
-
-        <div
-          class="scenery-authors"
-          v-if="station?.generalInfo?.authors && station.generalInfo.authors.length > 0"
-        >
-          <b>
-            {{
-              $t(
-                'scenery.authors-title',
-                { authors: station.generalInfo.authors.length },
-                station.generalInfo.authors.length
-              )
-            }}:
-          </b>
-          {{ station.generalInfo.authors.join(', ') }}
-        </div>
-      </div>
 
       <div style="margin: 2em 0; height: 2px; background-color: white"></div>
 
@@ -89,15 +31,20 @@ import SceneryInfoIcons from './SceneryInfo/SceneryInfoIcons.vue';
 import SceneryInfoUserList from './SceneryInfo/SceneryInfoUserList.vue';
 import SceneryInfoSpawnList from './SceneryInfo/SceneryInfoSpawnList.vue';
 import SceneryInfoRoutes from './SceneryInfo/SceneryInfoRoutes.vue';
+import SceneryInfoGeneral from './SceneryInfo/SceneryInfoGeneral.vue';
+import SceneryInfoAuthors from "./SceneryInfo/SceneryInfoAuthors.vue";
+
 import { ActiveScenery, Station } from '../../typings/common';
 
 export default defineComponent({
   components: {
     SceneryInfoDispatcher,
+    SceneryInfoGeneral,
     SceneryInfoIcons,
+    SceneryInfoAuthors,
     SceneryInfoUserList,
     SceneryInfoSpawnList,
-    SceneryInfoRoutes
+    SceneryInfoRoutes,
   },
   props: {
     station: {
@@ -112,8 +59,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';
-@import '../../styles/badge.scss';
+@use '../../styles/badge';
 
 h3.section-header {
   margin: 0.5em 0;
@@ -134,20 +81,6 @@ h3.section-header {
   margin-top: 1em;
 }
 
-.scenery-info-general {
-  margin-top: 1em;
-}
-
-.scenery-general-list {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-
-  span {
-    margin: 0 0.15em;
-  }
-}
-
 .scenery-topic a {
   font-weight: bold;
 }

src/components/SceneryView/SceneryInfo/SceneryInfoAuthors.vue

@@ -0,0 +1,30 @@
+<template>
+  <section
+    class="scenery-authors"
+    v-if="station?.generalInfo?.authors && station.generalInfo.authors.length > 0"
+  >
+    <b>
+      {{
+        $t(
+          'scenery.authors-title',
+          { authors: station.generalInfo.authors.length },
+          station.generalInfo.authors.length
+        )
+      }}:
+    </b>
+    {{ station.generalInfo.authors.join(', ') }}
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { Station } from '../../../typings/common';
+
+export default defineComponent({
+  props: {
+    station: {
+      type: Object as PropType<Station>
+    }
+  }
+});
+</script>

src/components/SceneryView/SceneryInfo/SceneryInfoGeneral.vue

@@ -0,0 +1,92 @@
+<template>
+  <section class="info-general">
+    <div v-if="station?.generalInfo === undefined">
+      <b>{{ $t('scenery.no-data') }}</b>
+    </div>
+
+    <div v-else>
+      <span>
+        <b>{{ $t('availability.title') }}:</b>
+        {{ $t(`availability.${station.generalInfo.availability}`) }}
+
+        <span v-if="station.generalInfo.reqLevel > -1">
+          -
+          {{
+            $t(
+              'scenery.req-level',
+              { lvl: station.generalInfo.reqLevel },
+              station.generalInfo.reqLevel
+            )
+          }}
+        </span>
+      </span>
+
+      <span>
+        &bull; <b>{{ $t('controls.title') }}:</b>
+        {{ $t(`controls.${station.generalInfo.controlType}`) }}
+      </span>
+
+      <span>
+        &bull; <b>{{ $t('signals.title') }}:</b>
+        {{ $t(`signals.${station.generalInfo.signalType}`) }}
+      </span>
+
+      <span v-if="station.generalInfo.lines">
+        &bull; <b>{{ $t('scenery.lines-title') }}:</b> {{ station.generalInfo.lines }}
+      </span>
+
+      <span v-if="station.generalInfo.project">
+        &bull; <b>{{ $t('scenery.project-title') }}: </b>
+        <a
+          style="color: salmon; text-decoration: underline; font-weight: bold"
+          :href="station.generalInfo.projectUrl"
+          target="_blank"
+        >
+          {{ station.generalInfo.project }}
+        </a>
+      </span>
+
+      <span v-if="additionalTools.length != 0">
+        &bull; <b>{{ $t('scenery.additional-tools-title') }}: </b>
+        {{ additionalTools.join(', ') }}
+      </span>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { Station } from '../../../typings/common';
+
+export default defineComponent({
+  props: {
+    station: {
+      type: Object as PropType<Station>
+    }
+  },
+
+  computed: {
+    additionalTools() {
+      if (this.$props.station?.generalInfo === undefined) return [];
+      let tools = [];
+
+      if (this.$props.station.generalInfo.SUP) tools.push('SUP');
+      if (this.$props.station.generalInfo.ASDEK) tools.push('ASDEK');
+
+      return tools;
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.info-general {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+
+  div {
+    margin: 0 0.15em;
+  }
+}
+</style>

src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue

@@ -17,25 +17,6 @@
       {{ station?.generalInfo.reqLevel >= 2 ? station?.generalInfo.reqLevel : 'L' }}
     </span>
 
-    <span
-      v-if="station?.generalInfo"
-      class="scenery-icon icon-info"
-      :class="station?.generalInfo.controlType.replace('+', '-')"
-      :title="
-        $t('sceneries.info.control-type') + $t(`controls.${station?.generalInfo.controlType}`)
-      "
-    >
-      {{ $t(`controls.abbrevs.${station.generalInfo.controlType}`) }}
-    </span>
-
-    <img
-      v-if="station?.generalInfo?.signalType"
-      class="icon-info"
-      :src="`/images/icon-${station.generalInfo.signalType}.svg`"
-      :alt="station.generalInfo.signalType"
-      :title="$t('sceneries.info.signals-type') + $t(`signals.${station.generalInfo.signalType}`)"
-    />
-
     <img
       v-if="station?.generalInfo?.availability == 'nonPublic'"
       class="icon-info"
@@ -60,6 +41,33 @@
       :title="$t('sceneries.info.abandoned')"
     />
 
+    <span
+      v-if="station?.generalInfo"
+      class="scenery-icon icon-info"
+      :class="station?.generalInfo.controlType.replace('+', '-')"
+      :title="
+        $t('sceneries.info.control-type') + $t(`controls.${station?.generalInfo.controlType}`)
+      "
+    >
+      {{ $t(`controls.abbrevs.${station.generalInfo.controlType}`) }}
+    </span>
+
+    <img
+      v-if="station?.generalInfo?.signalType"
+      class="icon-info"
+      :src="`/images/icon-${station.generalInfo.signalType}.svg`"
+      :alt="station.generalInfo.signalType"
+      :title="$t('sceneries.info.signals-type') + $t(`signals.${station.generalInfo.signalType}`)"
+    />
+
+    <img
+      v-if="station?.generalInfo?.lines"
+      class="icon-info"
+      src="/images/icon-real.svg"
+      alt="real scenery"
+      :title="`${$t('sceneries.info.real')} ${station.generalInfo.lines}`"
+    />
+
     <img
       v-if="station?.generalInfo?.SUP"
       class="icon-info"
@@ -75,14 +83,6 @@
       alt="dSAT ASDEK"
       :title="$t('sceneries.info.ASDEK')"
     />
-
-    <img
-      v-if="station?.generalInfo?.lines"
-      class="icon-info"
-      src="/images/icon-real.svg"
-      alt="real scenery"
-      :title="`${$t('sceneries.info.real')} ${station.generalInfo.lines}`"
-    />
   </section>
 </template>
 
@@ -102,7 +102,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles/icons.scss';
+@use '../../../styles/icons';
 
 .info-icons {
   display: flex;

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="toggleRoutesVisibility('single')"
+        data-tooltip-type="BaseTooltip"
+        :data-tooltip-content="`${showInternalSingleRoutes ? $t('scenery.btn-hide-internal-routes') : $t('scenery.btn-show-internal-routes')}`"
+      >
+        <b>{{ $t('scenery.one-way-routes') }}</b>
+        <i class="fa-solid" :class="`${showInternalSingleRoutes ? '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="toggleRoutesVisibility('double')"
+        data-tooltip-type="BaseTooltip"
+        :data-tooltip-content="`${showInternalDoubleRoutes ? $t('scenery.btn-hide-internal-routes') : $t('scenery.btn-show-internal-routes')}`"
+      >
+        <b>{{ $t('scenery.two-way-routes') }}</b>
+        <i class="fa-solid" :class="`${showInternalDoubleRoutes ? '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>
@@ -53,6 +57,7 @@
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
 import { Station } from '../../../typings/common';
+import StorageManager from '../../../managers/storageManager';
 
 export default defineComponent({
   props: {
@@ -62,27 +67,50 @@ export default defineComponent({
     }
   },
 
-  methods: {
+  data() {
-    setActiveShowLength(name: string) {
+    return {
-      if (this.activeShowLength.includes(name))
+      showInternalSingleRoutes: false,
-        this.activeShowLength.splice(this.activeShowLength.indexOf(name), 1);
+      showInternalDoubleRoutes: false
-      else this.activeShowLength.push(name);
+    };
+  },
+
+  mounted() {
+    if (StorageManager.getBooleanValue('showInternalDoubleRoutes')) {
+      this.showInternalDoubleRoutes = StorageManager.getBooleanValue('showInternalDoubleRoutes');
+    }
+
+    if (StorageManager.getBooleanValue('showInternalSingleRoutes')) {
+      this.showInternalSingleRoutes = StorageManager.getBooleanValue('showInternalSingleRoutes');
     }
   },
 
-  data() {
+  methods: {
-    return {
+    toggleRoutesVisibility(type: 'single' | 'double') {
-      activeShowLength: [] as string[]
+      if (type == 'double') {
-    };
+        this.showInternalDoubleRoutes = !this.showInternalDoubleRoutes;
+        StorageManager.setBooleanValue('showInternalDoubleRoutes', this.showInternalDoubleRoutes);
+      } else {
+        this.showInternalSingleRoutes = !this.showInternalSingleRoutes;
+        StorageManager.setBooleanValue('showInternalSingleRoutes', this.showInternalSingleRoutes);
+      }
+    }
   },
 
   computed: {
     oneWayRoutes() {
-      return this.station.generalInfo?.routes.single ?? [];
+      return (
+        this.station.generalInfo?.routes.single
+          .filter((r) => !r.isInternal || r.isInternal == this.showInternalSingleRoutes)
+          .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.showInternalDoubleRoutes)
+          .sort((r1, r2) => r1.routeName.localeCompare(r2.routeName)) ?? []
+      );
     }
   }
 });
@@ -92,20 +120,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 +155,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 +172,10 @@ ul.routes-list {
         color: #cfcfcf;
       }
 
+      &.length {
+        background-color: #303030;
+        color: #cfcfcf;
+      }
       &.sbl {
         color: var(--clr-primary);
         background-color: #404040;

src/components/SceneryView/SceneryInfo/SceneryInfoSpawnList.vue

@@ -53,8 +53,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles/variables.scss';
-
 ul {
   position: relative;
 }

src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue

@@ -18,12 +18,15 @@
         :key="train.id"
         :data-status="status"
       >
-        <router-link :to="train.driverRouteLocation" class="a-block">
+        <router-link :to="train.driverRouteLocation">
           <span class="user_train"> {{ train.trainNo }}</span>
           <span class="user_name">
             {{ train.driverName }}
             <i
-              v-if="train.timetableData != undefined && train.lastSeen <= Date.now() - 120000"
+              v-if="
+                train.timetableData != undefined &&
+                (train.lastSeen <= Date.now() - 60000 || !train.online)
+              "
               class="fa-solid fa-user-slash"
               style="color: lightcoral"
               data-tooltip-type="BaseTooltip"

src/components/SceneryView/SceneryTimetable.vue

@@ -64,7 +64,7 @@
         </div>
 
         <router-link
-          class="timetable-item a-block"
+          class="timetable-item"
           v-else
           v-for="(row, i) in sceneryTimetables"
           :key="row.train.id + i"
@@ -130,7 +130,7 @@
 
             <span class="schedule-stop">
               <span class="stop-connection">
-                {{ row.arrivingLine }}
+                {{ row.currentElement.arrivalRouteExt }}
               </span>
 
               <span class="stop-time">
@@ -139,7 +139,7 @@
               </span>
 
               <span class="stop-connection">
-                {{ row.departureLine }}
+                {{ row.currentElement.departureRouteExt }}
               </span>
             </span>
 
@@ -279,12 +279,9 @@ export default defineComponent({
           return {
             checkpointStop: ct.checkpointStop,
             train: ct.train,
-            prevDepartureLine: ct.previousSceneryElement?.departureRouteExt ?? null,
+            prevElement: ct.previousSceneryElement,
-            nextArrivalLine: ct.nextSceneryElement?.arrivalRouteExt ?? null,
+            nextElement: ct.nextSceneryElement,
-            departureLine: ct.timetablePathElement.departureRouteExt ?? null,
+            currentElement: ct.timetablePathElement,
-            arrivingLine: ct.timetablePathElement.arrivalRouteExt ?? null,
-            prevStationName: ct.previousSceneryElement?.stationName ?? null,
-            nextStationName: ct.nextSceneryElement?.stationName ?? null,
             status: trainStopStatus
           };
         })
@@ -330,9 +327,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';
-@import '../../styles/variables.scss';
+@use '../../styles/animations';
-@import '../../styles/animations.scss';
 
 .scenery-timetable {
   height: 100%;
@@ -439,7 +435,7 @@ export default defineComponent({
 
   &.current {
     font-weight: bold;
-    color: $accentCol;
+    color: var(--clr-primary);
   }
 }
 
@@ -452,7 +448,7 @@ export default defineComponent({
   flex-wrap: wrap;
 
   .info-number {
-    color: $accentCol;
+    color: var(--clr-primary);
   }
 
   .info-route {
@@ -488,7 +484,7 @@ export default defineComponent({
       align-self: center;
       font-size: 0.9em;
 
-      color: $accentCol;
+      color: var(--clr-primary);
 
       &::after {
         content: '\027F6';
@@ -505,7 +501,7 @@ export default defineComponent({
   font-size: 0.85em;
 }
 
-@include smallScreen {
+@include responsive.smallScreen {
   .timetable-item {
     grid-template-columns: 1fr;
   }

src/components/SceneryView/SceneryTimetablesHistory.vue

@@ -188,8 +188,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';
-@import '../../styles/sceneryViewTables.scss';
+@use '../../styles/scenery-history-table';
 
 .scenery-timetables-history {
   height: 100%;

src/components/SceneryView/ScheduledTrainStatus.vue

@@ -2,7 +2,9 @@
   <div class="general-status">
     <span
       :class="computedScheduledTrain.status"
-      :title="computedScheduledTrain.stopStatusDescription"
+      data-tooltip-type="HtmlTooltip"
+      :data-tooltip-content="computedScheduledTrain.stopStatusDescription"
+      @click.prevent="() => {}"
     >
       {{ computedScheduledTrain.stopStatusIndicator }}
     </span>
@@ -24,16 +26,16 @@ export default defineComponent({
 
   computed: {
     computedScheduledTrain() {
-      const { prevDepartureLine, prevStationName, nextArrivalLine, nextStationName, status } =
+      const { status, prevElement, currentElement, nextElement } = this.sceneryTimetableRow;
-        this.sceneryTimetableRow;
 
-      const prevDepartureIndicator = prevDepartureLine
+      const prevDepartureIndicator = prevElement?.departureRouteExt
-        ? `(${prevDepartureLine}) ${prevStationName}`
+        ? `(${prevElement.departureRouteExt}) ${prevElement.stationName}`
-        : '---';
-      const nextArrivalIndicator = nextArrivalLine
-        ? `(${nextArrivalLine}) ${nextStationName}`
         : '---';
 
+      const nextArrivalIndicator = nextElement?.arrivalRouteExt
+        ? `(${nextElement.arrivalRouteExt}) ${nextElement.stationName}`
+        : `${currentElement.stationName}`;
+
       let stopStatusDescription = '',
         stopStatusIndicator = '';
 
@@ -41,34 +43,45 @@ export default defineComponent({
         case StopStatus.ARRIVING:
           stopStatusIndicator = `${this.$t('timetables.from')}: ${prevDepartureIndicator}`;
           stopStatusDescription = this.$t('timetables.desc-arriving', {
-            prevStationName,
+            prevStationName: prevElement?.stationName ?? '',
-            prevDepartureLine
+            prevDepartureLine: prevElement?.departureRouteExt ?? ''
           });
           break;
 
         case StopStatus.ONLINE:
         case StopStatus.STOPPED:
-          stopStatusIndicator = nextArrivalLine
+          stopStatusIndicator = nextElement?.arrivalRouteExt
             ? `${this.$t('timetables.to')}: ${nextArrivalIndicator}`
             : `${this.$t('timetables.desc-end')}`;
-          stopStatusDescription = nextArrivalLine
+          stopStatusDescription = nextElement?.arrivalRouteExt
-            ? this.$t(`timetables.desc-${status}`, { nextStationName, nextArrivalLine })
+            ? this.$t(`timetables.desc-${status}`, {
+                nextStationName: nextElement?.stationName,
+                nextArrivalLine: nextElement?.arrivalRouteExt
+              })
             : '';
           break;
 
         case StopStatus.DEPARTED:
           stopStatusIndicator = `${this.$t('timetables.to')}: ${nextArrivalIndicator}`;
-          stopStatusDescription = this.$t('timetables.desc-departed', {
+
-            nextStationName,
+          if (!nextElement?.stationName) {
-            nextArrivalLine
+            stopStatusDescription = this.$t('timetables.desc-departed-ends', {
-          });
+              nextStationName: currentElement.stationName
+            });
+          } else {
+            stopStatusDescription = this.$t('timetables.desc-departed', {
+              nextStationName: nextElement?.stationName ?? currentElement.stationName,
+              nextArrivalLine: nextElement?.arrivalRouteExt
+            });
+          }
+
           break;
 
         case StopStatus.DEPARTED_AWAY:
           stopStatusIndicator = `${this.$t('timetables.to')}: ${nextArrivalIndicator}`;
           stopStatusDescription = this.$t('timetables.desc-departed-away', {
-            nextStationName,
+            nextStationName: nextElement?.stationName,
-            nextArrivalLine
+            nextArrivalLine: nextElement?.arrivalRouteExt
           });
           break;
 
@@ -93,6 +106,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .general-status {
   margin-top: 0.5em;
+  cursor: help;
 
   span.arriving {
     color: #ccc;

src/components/SceneryView/typings.ts

@@ -1,13 +1,10 @@
-import { StopStatus, Train, TrainStop } from '../../typings/common';
+import { StopStatus, TimetablePathElement, Train, TrainStop } from '../../typings/common';
 
 export interface SceneryTimetableRow {
   checkpointStop: TrainStop;
   train: Train;
-  prevDepartureLine: string | null;
+  prevElement: TimetablePathElement | null;
-  nextArrivalLine: string | null;
+  nextElement: TimetablePathElement | null;
-  departureLine: string | null;
+  currentElement: TimetablePathElement;
-  arrivingLine: string | null;
-  prevStationName: string | null;
-  nextStationName: string | null;
   status: StopStatus;
 }

src/components/StationsView/FilterOption.vue

@@ -66,8 +66,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/variables.scss';
-
 label {
   position: relative;
   user-select: none;
@@ -98,7 +96,7 @@ label {
     }
 
     &:focus-visible + span {
-      outline: 1px solid $accentCol;
+      outline: 1px solid var(--clr-primary);
     }
   }
 }

src/components/StationsView/StationFilterCard.vue

@@ -121,7 +121,7 @@
           </section>
 
           <section class="card_sliders">
-            <div class="slider" v-for="(slider, i) in initSliders" :key="i">
+            <div class="slider" v-for="(slider, i) in sliderStates" :key="i">
               <input
                 class="slider-input"
                 type="range"
@@ -130,7 +130,7 @@
                 :min="slider.minRange"
                 :max="slider.maxRange"
                 :step="slider.step"
-                v-model="filters[slider.id]"
+                v-model.number="filters[slider.id]"
               />
               <span class="slider-value">{{ filters[slider.id] }}</span>
               <div class="slider-content">
@@ -178,7 +178,7 @@ import StorageManager from '../../managers/storageManager';
 
 import {
   filtersSections,
-  initSliders,
+  sliderStates,
   initFilters,
   getChangedFilters
 } from '../../managers/stationFilterManager';
@@ -197,7 +197,7 @@ export default defineComponent({
     saveOptions: false,
 
     filtersSections,
-    initSliders,
+    sliderStates,
 
     minimumHours: 0,
     authors: '',
@@ -379,10 +379,9 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive';
+@use '../../styles/responsive';
-@import '../../styles/card';
+@use '../../styles/card';
-@import '../../styles/animations';
+@use '../../styles/animations';
-@import '../../styles/variables';
 
 h3.section-header {
   text-align: center;
@@ -432,7 +431,7 @@ h3.section-header {
 .card_title {
   font-size: 2em;
   font-weight: 700;
-  color: $accentCol;
+  color: var(--clr-primary);
 
   text-align: center;
 }
@@ -453,7 +452,7 @@ h3.section-header {
     span {
       min-width: 120px;
       font-weight: bold;
-      color: $accentCol;
+      color: var(--clr-primary);
     }
 
     button {
@@ -527,7 +526,7 @@ h3.section-header {
     }
 
     &:focus-visible + span {
-      outline: 1px solid $accentCol;
+      outline: 1px solid var(--clr-primary);
     }
   }
 }
@@ -567,15 +566,17 @@ h3.section-header {
 }
 
 .slider {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr 50px 1fr;
   align-items: center;
   gap: 0.25em;
 
   margin-bottom: 1em;
 
   &-value {
-    color: $accentCol;
+    color: var(--clr-primary);
     padding: 0.1em 0.2em;
+    text-align: center;
   }
 
   &-input {
@@ -602,13 +603,14 @@ h3.section-header {
       border-radius: 50%;
 
       background: white;
-      border: 4px solid $accentCol;
+      border: 3px solid var(--clr-primary);
+      background-color: #333;
 
-      @include smallScreen() {
+      @include responsive.smallScreen{
         width: 15px;
         height: 15px;
         margin-top: -5px;
-        border: 3px solid $accentCol;
+        border: 3px solid var(--clr-primary);
       }
     }
 
@@ -619,14 +621,14 @@ h3.section-header {
       border-radius: 50%;
 
       background: white;
-      border: 4px solid $accentCol;
+      border: 4px solid var(--clr-primary);
 
       cursor: pointer;
 
-      @include smallScreen() {
+      @include responsive.smallScreen{
         width: 1em;
         height: 1em;
-        border: 3px solid $accentCol;
+        border: 3px solid var(--clr-primary);
       }
     }
 
@@ -656,14 +658,19 @@ h3.section-header {
   }
 }
 
-@include smallScreen {
+@include responsive.smallScreen{
   .slider {
+    display: flex;
     flex-wrap: wrap;
     justify-content: center;
 
     &-input {
       width: 90%;
     }
+
+    &-content {
+      text-align: center;
+    }
   }
 }
 </style>

src/components/StationsView/StationStats.vue

@@ -8,58 +8,106 @@
 
     <button class="filter-button btn--filled btn--image" @click="toggleDropdown" ref="button">
       <img src="/images/icon-stats.svg" alt="Open filters icon" />
-      <!-- {{ $t('train-stats.stats-button') }} -->
+      {{ $t('station-stats.stats-button') }}
-      <span>STATYSTYKI</span>
     </button>
 
     <transition name="dropdown-anim">
       <div class="dropdown_wrapper" v-if="showDropdown">
         <div>
-          <h1 class="text--primary">
+          <h1 class="stats-title text--primary">
             <img src="/images/icon-stats.svg" alt="Open filters icon" />
-            {{ $t('train-stats.title') }}
+            {{ $t('station-stats.title') }}
           </h1>
 
           <hr style="margin: 0.5em 0" />
 
-          <ul class="stats-list">
+          <div v-if="uFactor > -1 || avgTimetableCount > -1 || trackCount.all > 0">
-            <li>
+            <div class="badges-container">
-              <span>
+              <div class="badge stat-badge">
-                {{ $t('station-stats.u-factor') }}
+                <span>
-                <a
+                  {{ $t('station-stats.u-factor') }}
-                  href="https://td2.info.pl/dyskusje/wspolczynnik-ugla-czy-to-ma-sens/msg81011/#msg81011"
+                  <a
-                  target="_blank"
+                    href="https://td2.info.pl/dyskusje/wspolczynnik-ugla-czy-to-ma-sens/msg81011/#msg81011"
-                  :data-tooltip="$t('station-stats.u-factor-tooltip')"
+                    target="_blank"
-                  >(?)</a
+                    :data-tooltip="$t('station-stats.u-factor-tooltip')"
-                >:
+                    >(?)</a
-              </span>
+                  >:
-              <b class="u-factor" :style="calculateFactorStyle()">
+                </span>
-                {{ uFactor.toFixed(2) }}
+
-              </b>
+                <span>
-            </li>
+                  <b class="u-factor" :style="calculateFactorStyle()">
-            <li>
+                    {{ uFactor >= 0 ? uFactor.toFixed(2) : '---' }}
-              {{ $t('station-stats.avg-timetable-count') }}
+                  </b>
-              <b>{{ avgTimetableCount.toFixed(2) }}</b>
+                </span>
-            </li>
+              </div>
-            <li>
+
-              {{ $t('station-stats.single-track-count') }}
+              <div class="badge stat-badge">
-              <b>{{ trackCount.oneWay }}</b> (<b>{{ trackCount.oneWayElectric }} ⚡</b>)
+                <span>{{ $t('station-stats.avg-timetable-count') }}</span>
-            </li>
+                <span>
-            <li>
+                  <b>{{ avgTimetableCount >= 0 ? avgTimetableCount.toFixed(2) : '---' }}</b>
-              {{ $t('station-stats.double-track-count') }}
+                </span>
-              <b>{{ trackCount.twoWay }}</b>
+              </div>
-              (<b>{{ trackCount.twoWayElectric }} ⚡</b>)
+            </div>
-            </li>
+
-            <li>
+            <hr style="margin: 0.5em 0" />
-              {{ $t('station-stats.cross-sceneries') }}
+
-              <b>{{ trackCount.crossTrack }}</b> (<b>{{ trackCount.crossTrackElectric }} ⚡</b>)
+            <div class="badges-container">
-            </li>
+              <div class="badge stat-badge">
-            <li>
+                <span>{{ $t('station-stats.single-track-count') }}</span>
-              {{ $t('station-stats.open-spawns') }} <b>{{ spawnCount.passenger }}</b> - PAS /
+                <span>
-              <b>{{ spawnCount.freight }}</b> - TOW / <b>{{ spawnCount.loco }}</b> - LUZ /
+                  <b> {{ trackCount.oneWay }}</b> (<b>{{ trackCount.oneWayElectric }} ⚡</b>)
-              <b>{{ spawnCount.all }}</b> - ALL
+                </span>
-            </li>
+              </div>
-          </ul>
+
+              <div class="badge stat-badge">
+                <span>{{ $t('station-stats.double-track-count') }}</span>
+                <span>
+                  <b>{{ trackCount.twoWay }}</b> (<b>{{ trackCount.twoWayElectric }} ⚡</b>)
+                </span>
+              </div>
+
+              <div class="badge stat-badge">
+                <span> {{ $t('station-stats.cross-sceneries') }}</span>
+                <span>
+                  <b>{{ trackCount.crossTrack }}</b> (<b>{{ trackCount.crossTrackElectric }} ⚡</b>)
+                </span>
+              </div>
+            </div>
+
+            <hr style="margin: 0.5em 0" />
+
+            <div class="badges-container">
+              <div class="badge stat-badge">
+                <span> {{ $t('station-stats.open-spawns-all') }}</span>
+                <span>
+                  <b>{{ spawnCount.all }}</b>
+                </span>
+              </div>
+
+              <div class="badge stat-badge">
+                <span> {{ $t('station-stats.open-spawns-pas') }}</span>
+                <span>
+                  <b>{{ spawnCount.passenger }}</b>
+                </span>
+              </div>
+
+              <div class="badge stat-badge">
+                <span> {{ $t('station-stats.open-spawns-freight') }}</span>
+                <span>
+                  <b>{{ spawnCount.freight }}</b>
+                </span>
+              </div>
+
+              <div class="badge stat-badge">
+                <span> {{ $t('station-stats.open-spawns-loco') }}</span>
+                <span>
+                  <b>{{ spawnCount.loco }}</b>
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div class="no-data" v-else>{{ $t('station-stats.no-stats') }}</div>
         </div>
 
         <div tabindex="0" @focus="() => (showDropdown = false)"></div>
@@ -86,9 +134,9 @@ export default defineComponent({
     },
 
     calculateFactorStyle() {
-      if (this.uFactor == 0) return '';
+      if (this.uFactor <= 0) return '';
 
-      const norm = this.uFactor == 0 ? 1 : Math.max(Math.min(this.uFactor / 2, 1), 0);
+      const norm = Math.max(Math.min(this.uFactor / 2, 1), 0);
       const lerp = 120 * norm;
 
       return `color: hsl(${lerp}, 100%, 60%)`;
@@ -105,7 +153,7 @@ export default defineComponent({
         (train) => train.region == this.mainStore.region.id
       );
 
-      return activeDispatchers.length != 0 ? activeTrains.length / activeDispatchers.length : 0;
+      return activeDispatchers.length != 0 ? activeTrains.length / activeDispatchers.length : -1;
     },
 
     avgTimetableCount() {
@@ -118,7 +166,7 @@ export default defineComponent({
         return acc;
       }, 0);
 
-      if (regionSceneries.length == 0) return 0;
+      if (regionSceneries.length == 0) return -1;
 
       return timetableCountSum / regionSceneries.length;
     },
@@ -135,6 +183,8 @@ export default defineComponent({
           (acc, st) => {
             const { routes } = st.generalInfo!;
 
+            acc.all++;
+
             if (
               routes.single.filter((r) => !r.isInternal).length > 0 &&
               routes.double.filter((r) => !r.isInternal).length > 0
@@ -163,7 +213,8 @@ export default defineComponent({
             twoWay: 0,
             twoWayElectric: 0,
             crossTrack: 0,
-            crossTrackElectric: 0
+            crossTrackElectric: 0,
+            all: 0
           }
         );
     },
@@ -190,15 +241,18 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/dropdown.scss';
+@use '../../styles/dropdown';
-@import '../../styles/badge.scss';
+@use '../../styles/badge';
+@use '../../styles/responsive';
 
-h1 img {
+h1.stats-title img {
   vertical-align: text-bottom;
 }
 
-h3 {
+.badges-container {
-  margin: 0.5em 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
 }
 
 .u-factor {
@@ -219,19 +273,14 @@ h3 {
   }
 }
 
-ul.stats-list {
+.no-data {
-  list-style: disc;
+  font-size: 1.1em;
-  padding-left: 1em;
+  color: #ccc;
-  margin-top: 1em;
-
-  & > li {
-    margin: 0.25em 0;
-  }
 }
 
-@include smallScreen {
+@include responsive.smallScreen {
-  .filter-button span {
+  h1.stats-title {
-    display: none;
+    text-align: center;
   }
 }
 </style>

src/components/StationsView/StationTable.vue

@@ -400,9 +400,10 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';
-@import '../../styles/variables.scss';
+@use '../../styles/icons';
-@import '../../styles/icons.scss';
+
+@use 'sass:color';
 
 $rowCol: #424242;
 
@@ -429,14 +430,16 @@ table {
   min-width: 1250px;
   white-space: wrap;
 
+  thead {
+    position: sticky;
+    top: 0;
+  }
+
   thead tr {
-    background-color: $bgCol;
+    background-color: var(--clr-bg3);
   }
 
   thead th {
-    position: sticky;
-    top: 0;
-
     &.station {
       width: 12em;
     }
@@ -475,7 +478,7 @@ table {
     }
 
     padding: 0.5em 0.25em;
-    background-color: $bgCol;
+    background-color: var(--clr-bg3);
     white-space: pre-wrap;
 
     cursor: pointer;
@@ -502,13 +505,13 @@ tr,
   vertical-align: middle;
 
   &:nth-child(even) {
-    background-color: lighten($rowCol, 5);
+    background-color: color.adjust($rowCol, $lightness: 5%);
     color: white;
   }
 
   &:hover,
   &:focus {
-    background-color: lighten($rowCol, 20);
+    background-color: color.adjust($rowCol, $lightness: 15%);
   }
 
   td {
@@ -522,7 +525,7 @@ tr,
       opacity: 0.2;
     }
 
-    @include smallScreen() {
+    @include responsive.smallScreen{
       margin: 0;
       padding: 0.3em 0.5em;
       font-size: 1em;
@@ -535,7 +538,7 @@ tr,
   max-width: 200px;
 
   &.default {
-    color: $accentCol;
+    color: var(--clr-primary);
   }
 
   &.nonPublic {

src/components/StationsView/utils.ts

@@ -120,6 +120,8 @@ function filterSliderValues(filters: Record<string, any>, generalInfo: StationGe
   const otherAvailability =
     availability == 'nonPublic' || availability == 'unavailable' || availability == 'abandoned';
 
+  const internalRoutes = routes.all.filter((r) => r.isInternal && !r.isRouteSBL && !r.hidden);
+
   return (
     filters['minLevel'] > reqLevel + (otherAvailability ? 1 : 0) ||
     filters['maxLevel'] < reqLevel + (otherAvailability ? 1 : 0) ||
@@ -130,7 +132,13 @@ function filterSliderValues(filters: Record<string, any>, generalInfo: StationGe
     filters['minOneWayCatenary'] > routes.singleElectrifiedNames.length ||
     filters['minOneWay'] > routes.singleOtherNames.length ||
     filters['minTwoWayCatenary'] > routes.doubleElectrifiedNames.length ||
-    filters['minTwoWay'] > routes.doubleOtherNames.length
+    // filters['minTwoWay'] > routes.doubleOtherNames.length ||
+    filters['minOneWayCatenaryInt'] >
+      internalRoutes.filter((r) => r.routeTracks == 1 && r.isElectric == true).length ||
+    filters['minOneWayInt'] >
+      internalRoutes.filter((r) => r.routeTracks == 1 && r.isElectric == false).length ||
+    filters['minTwoWayCatenaryInt'] >
+      internalRoutes.filter((r) => r.routeTracks == 2 && r.isElectric == true).length
   );
 }
 
@@ -235,7 +243,7 @@ export const sortStations = (a: Station, b: Station, sorter: ActiveSorter) => {
   return a.name.localeCompare(b.name);
 };
 
-export const filterStations = (station: Station, filters: Record<string, any>) => {
+export const filterStations = (station: Station, filters: Record<string, any>) => {  
   if (filters['free'] && (!station.onlineInfo || station.onlineInfo.dispatcherId == -1))
     return false;
 

src/components/Tooltip/HtmlTooltip.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="tooltip-content">
+    <span v-html="tooltipStore.content"></span>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useTooltipStore } from '../../store/tooltipStore';
+
+export default defineComponent({
+  data() {
+    return {
+      tooltipStore: useTooltipStore()
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.tooltip-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5em;
+  white-space: pre-line;
+
+  padding: 0.25em 0.5em;
+  border-radius: 0.25em;
+
+  width: 100%;
+  background-color: #1f1f1f;
+  box-shadow: 0 0 5px 2px #aaa;
+}
+
+img {
+  height: 1em;
+}
+</style>

src/components/Tooltip/Tooltip.vue

@@ -12,11 +12,19 @@ import VehiclePreviewTooltip from './VehiclePreviewTooltip.vue';
 import BaseTooltip from './BaseTooltip.vue';
 import SpawnsTooltip from './SpawnsTooltip.vue';
 import UsersTooltip from './UsersTooltip.vue';
+import HtmlTooltip from './HtmlTooltip.vue';
 
 const BOX_PADDING_PX = 20;
 
 export default defineComponent({
-  components: { DonatorTooltip, VehiclePreviewTooltip, BaseTooltip, SpawnsTooltip, UsersTooltip },
+  components: {
+    DonatorTooltip,
+    VehiclePreviewTooltip,
+    BaseTooltip,
+    SpawnsTooltip,
+    UsersTooltip,
+    HtmlTooltip
+  },
 
   data() {
     return {

src/components/TrainsView/TrainInfo.vue

@@ -187,17 +187,12 @@ import { defineComponent } from 'vue';
 import { useMainStore } from '../../store/mainStore';
 import { useApiStore } from '../../store/apiStore';
 import { Train } from '../../typings/common';
-import speedLimits from '../../data/speedLimits.json';
 import styleMixin from '../../mixins/styleMixin';
 import trainInfoMixin from '../../mixins/trainInfoMixin';
 import trainCategoryMixin from '../../mixins/trainCategoryMixin';
 import ProgressBar from '../Global/ProgressBar.vue';
 import StockList from '../Global/StockList.vue';
-
+import { speedLimits } from '../../data/speedLimits';
-export type SpeedLimitLocoType = keyof typeof speedLimits;
-
-const isCompatibleLoco = (locoType: string): locoType is SpeedLimitLocoType =>
-  locoType in speedLimits;
 
 export default defineComponent({
   mixins: [trainInfoMixin, styleMixin, trainCategoryMixin],
@@ -239,19 +234,22 @@ export default defineComponent({
 
       const headLoco = this.train.stockList[0].slice(0, this.train.stockList[0].indexOf('-'));
 
-      if (!isCompatibleLoco(headLoco)) return vehicleMaxSpeed;
+      if (speedLimits[headLoco] === undefined) return vehicleMaxSpeed;
 
       if (this.train.stockList.length == 1) return speedLimits[headLoco]['none'];
 
-      const speedTable = speedLimits[headLoco][isPassenger ? 'passenger' : 'cargo'];
+      const speedTable: Record<string, number> =
+        speedLimits[headLoco][isPassenger ? 'passenger' : 'cargo'];
 
       if (!speedTable) return vehicleMaxSpeed;
 
-      let massKey = Object.keys(speedTable).findLast(
+      const massKey = Object.keys(speedTable).findLast(
         (massKey) => this.train.mass >= Number(massKey)
       );
 
-      return massKey ? ((speedTable as any)[massKey] as number) : vehicleMaxSpeed;
+      const massMaxSpeed = massKey ? speedTable[massKey] : Infinity;
+
+      return Math.min(massMaxSpeed, vehicleMaxSpeed);
     },
     journalRouteLocation() {
       return {
@@ -266,7 +264,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/badge.scss';
+@use '../../styles/badge';
 
 .image-warning {
   height: 1em;
@@ -299,6 +297,7 @@ export default defineComponent({
 .train-info {
   display: flex;
   flex-direction: column;
+  font-size: 1em;
   gap: 0.25em;
 
   background-color: #1a1a1a;

src/components/TrainsView/TrainOptions.vue

@@ -24,31 +24,26 @@
                 @blur="preventKeyDown = false"
                 :placeholder="$t(`options.search-train`)"
               />
-              <button class="search-exit">
+              <button class="btn btn--action search-exit" @click="onInputClear('train')">
-                <img
+                <img src="/images/icon-exit.svg" alt="Trains search clear icon" />
-                  src="/images/icon-exit.svg"
-                  alt="Trains search clear icon"
-                  @click="onInputClear('train')"
-                />
               </button>
             </div>
 
             <div class="search-box">
-              <input
+              <select
-                v-model="searchedDriver"
                 class="search-input"
-                id="driver-search"
+                name="active-trains"
-                name="driver-search"
+                id="active-trains"
-                @focus="preventKeyDown = true"
+                v-model="searchedDriver"
-                @blur="preventKeyDown = false"
+              >
-                :placeholder="$t(`options.search-driver`)"
+                <option value="">{{ $t('options.search-driver') }}</option>
-              />
+                <option v-for="driverName in activeDriverNames" :value="driverName">
-              <button class="search-exit">
+                  {{ driverName }}
-                <img
+                </option>
-                  src="/images/icon-exit.svg"
+              </select>
-                  alt="Driver search clear icon"
+
-                  @click="onInputClear('driver')"
+              <button class="btn btn--action search-exit" @click="onInputClear('driver')">
-                />
+                <img src="/images/icon-exit.svg" alt="Trains search clear icon" />
               </button>
             </div>
           </div>
@@ -101,6 +96,7 @@
 import { defineComponent, inject, PropType } from 'vue';
 import keyMixin from '../../mixins/keyMixin';
 import { TrainFilter, TrainFilterSection } from './typings';
+import { useMainStore } from '../../store/mainStore';
 
 export default defineComponent({
   mixins: [keyMixin],
@@ -120,6 +116,7 @@ export default defineComponent({
   data() {
     return {
       showOptions: false,
+      store: useMainStore(),
       lastSelectedFilter: null as TrainFilter | null,
       TrainFilterSection
     };
@@ -141,6 +138,16 @@ export default defineComponent({
         id,
         value: this.$t(`options.sort-${id}`)
       }));
+    },
+
+    activeDriverNames() {
+      const driverNameSet = new Set<string>();
+
+      this.store.trainList.forEach((train) => {
+        driverNameSet.add(train.driverName);
+      });
+
+      return [...driverNameSet].sort((a, b) => a.localeCompare(b));
     }
   },
 
@@ -195,8 +202,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/dropdown.scss';
+@use '../../styles/dropdown';
-@import '../../styles/dropdown_filters.scss';
+@use '../../styles/dropdown-filters';
 
 .search_content > div {
   margin: 0.5em auto;

src/components/TrainsView/TrainSchedule.vue

@@ -3,11 +3,11 @@
     <div class="schedule-wrapper" v-if="train.timetableData">
       <div class="stops">
         <div
-          v-for="(stop, i) in scheduleStopsV2"
+          v-for="(stop, i) in scheduleStops"
           :key="i"
           class="stop"
           :data-status="stop.status"
-          :data-sbl="stop.isSBL && stop.sceneryName == scheduleStopsV2[i + 1]?.sceneryName"
+          :data-sbl="stop.isSBL && stop.sceneryName == scheduleStops[i + 1]?.sceneryName"
           :data-position="stop.position"
           :data-delayed="stop.departureDelay > 0"
           :data-stop-type="stop.type"
@@ -34,7 +34,7 @@
             <div></div>
 
             <div class="progress">
-              <div class="line line_connection" v-if="i < scheduleStopsV2.length - 1"></div>
+              <div class="line line_connection" v-if="i < scheduleStops.length - 1"></div>
             </div>
 
             <div class="bottom-line-info">
@@ -48,9 +48,9 @@
               <span
                 v-if="
                   stop.departureLine &&
-                  (scheduleStopsV2[i + 1]?.arrivalLineInfo?.routeSpeed !=
+                  (scheduleStops[i + 1]?.arrivalLineInfo?.routeSpeed !=
                     stop.arrivalLineInfo?.routeSpeed ||
-                    stop.sceneryName != scheduleStopsV2[i + 1]?.sceneryName)
+                    stop.sceneryName != scheduleStops[i + 1]?.sceneryName)
                 "
               >
                 <div class="scenery-route">
@@ -85,13 +85,13 @@
                 </div>
 
                 <div
-                  v-if="stop.sceneryName != scheduleStopsV2[i + 1]?.sceneryName"
+                  v-if="stop.sceneryName != scheduleStops[i + 1]?.sceneryName"
                   class="scenery-change-name"
                 >
-                  <span>{{ scheduleStopsV2[i + 1].sceneryName }}</span>
+                  <span>{{ scheduleStops[i + 1].sceneryName }}</span>
 
                   <i
-                    v-if="!scheduleStopsV2[i + 1].isSceneryOnline"
+                    v-if="!scheduleStops[i + 1].isSceneryOnline"
                     class="fa-solid fa-ban fa-sm"
                     data-tooltip-type="BaseTooltip"
                     :data-tooltip-content="$t('app.tooltip-scenery-offline')"
@@ -101,30 +101,30 @@
 
                 <div
                   class="scenery-route"
-                  v-if="stop.sceneryName != scheduleStopsV2[i + 1]?.sceneryName"
+                  v-if="stop.sceneryName != scheduleStops[i + 1]?.sceneryName"
                 >
-                  <span> {{ scheduleStopsV2[i + 1].arrivalLine }}</span>
+                  <span> {{ scheduleStops[i + 1].arrivalLine }}</span>
 
-                  <span v-if="scheduleStopsV2[i + 1].arrivalLineInfo">
+                  <span v-if="scheduleStops[i + 1].arrivalLineInfo">
-                    <span> | {{ scheduleStopsV2[i + 1].arrivalLineInfo!.routeSpeed }} </span>
+                    <span> | {{ scheduleStops[i + 1].arrivalLineInfo!.routeSpeed }} </span>
 
                     <img
                       :src="
-                        scheduleStopsV2[i + 1].arrivalLineInfo?.isElectric
+                        scheduleStops[i + 1].arrivalLineInfo?.isElectric
                           ? '/images/icon-catenary.svg'
                           : '/images/icon-we4a.png'
                       "
                       data-tooltip-type="BaseTooltip"
                       :data-tooltip-content="
                         $t(
-                          `trains.${!scheduleStopsV2[i + 1].arrivalLineInfo?.isElectric ? 'no-' : ''}catenary-tooltip`
+                          `trains.${!scheduleStops[i + 1].arrivalLineInfo?.isElectric ? 'no-' : ''}catenary-tooltip`
                         )
                       "
                       width="14"
                     />
 
                     <img
-                      v-if="scheduleStopsV2[i + 1].arrivalLineInfo!.isRouteSBL"
+                      v-if="scheduleStops[i + 1].arrivalLineInfo!.isRouteSBL"
                       src="/images/icon-sbl-transparent.svg"
                       width="14"
                       data-tooltip-type="BaseTooltip"
@@ -206,7 +206,7 @@ export default defineComponent({
   },
 
   computed: {
-    scheduleStopsV2() {
+    scheduleStops() {
       if (!this.train.timetableData) return [];
 
       const { timetablePath, followingStops } = this.train.timetableData;
@@ -224,20 +224,18 @@ export default defineComponent({
       let isActive = false;
 
       if (pathData?.departureLineData) {
-        arrivalLineInfo = pathData.departureLineData;
+        // arrivalLineInfo = pathData.departureLineData;
         departureLineInfo = pathData.departureLineData;
       }
 
       for (const stop of followingStops) {
         let isExternal = false;
 
-        if (
+        if (stop.arrivalLine === currentPath.arrivalRouteExt) {
-          stop.arrivalLine &&
-          currentPath.arrivalRouteExt &&
-          stop.arrivalLine == currentPath.arrivalRouteExt
-        ) {
           isExternal = true;
 
+          departureLineInfo = pathData?.arrivalLineData ?? null;
+
           if (pathData?.arrivalLineData) {
             arrivalLineInfo = pathData.arrivalLineData;
           }
@@ -282,8 +280,7 @@ export default defineComponent({
           departureLineInfo,
 
           isExternal,
-
+          isActive,
-          isActive: isActive,
 
           isSBL: /sbl/gi.test(stop.stopName),
           position: stop.beginsHere ? 'begin' : stop.terminatesHere ? 'end' : 'en-route',
@@ -312,11 +309,7 @@ export default defineComponent({
 
         stopRows.push(rowData);
 
-        if (
+        if (stop.departureLine === currentPath.departureRouteExt) {
-          stop.departureLine &&
-          currentPath.departureRouteExt &&
-          stop.departureLine == currentPath.departureRouteExt
-        ) {
           // Reverse search for last scenery checkpoint
           if (pathData?.departureLineData) {
             stopRows[stopRows.length - 1].isExternal = true;
@@ -374,7 +367,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';
 
 $barClr: #b1b1b1;
 $confirmedClr: #4ae24a;

src/components/TrainsView/TrainStats.vue

@@ -80,7 +80,11 @@
             <h3>{{ $t('train-stats.top-units') }}</h3>
 
             <transition-group tag="ul" name="stats-anim">
-              <li class="badge stat-badge" v-for="top in stats.topUnits.slice(0, 7)" :key="top.name">
+              <li
+                class="badge stat-badge"
+                v-for="top in stats.topUnits.slice(0, 7)"
+                :key="top.name"
+              >
                 <span>{{ top.name }}</span>
                 <span>{{ top.count }}</span>
               </li>
@@ -221,9 +225,9 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/dropdown.scss';
+@use '../../styles/dropdown';
-@import '../../styles/badge.scss';
+@use '../../styles/badge';
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';
 
 h1 img {
   vertical-align: text-bottom;
@@ -248,7 +252,7 @@ h3 {
   max-width: 600px;
 }
 
-@include smallScreen {
+@include responsive.smallScreen{
   .no-data {
     text-align: center;
   }

src/components/TrainsView/TrainTable.vue

@@ -19,7 +19,7 @@
         >)
       </div>
 
-      <transition-group name="list-anim" tag="ul">
+      <transition-group name="list-anim" tag="div" class="list_wrapper">
         <TrainTableItem v-for="train in trains" :key="train.id" :train="train" />
       </transition-group>
     </div>
@@ -93,8 +93,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';
-@import '../../styles/animations.scss';
+@use '../../styles/animations';
 
 .train-table {
   height: calc(100vh - 11em);
@@ -105,6 +105,10 @@ export default defineComponent({
   overflow-x: hidden;
 }
 
+.list_wrapper {
+  padding: 2px; // ensures focused items outline visibility
+}
+
 .table-warning {
   text-align: center;
 

src/components/TrainsView/TrainTableItem.vue

@@ -1,29 +1,27 @@
 <template>
-  <li class="train-item">
+  <router-link :to="train.driverRouteLocation" class="train-item">
-    <router-link class="a-block" :to="train.driverRouteLocation">
+    <div class="item-wrapper">
-      <div class="item-wrapper">
+      <TrainInfo :train="train" />
-        <TrainInfo :train="train" />
 
-        <div class="train-stats">
+      <div class="train-stats">
-          <StockList :trainStockList="train.stockList" :tractionOnly="true" />
+        <StockList :trainStockList="train.stockList" :tractionOnly="true" />
+
+        <div>
+          <span>{{ train.speed }}km/h</span>
 
           <div>
-            <span>{{ train.speed }}km/h</span>
+            <span> {{ train.length }}m</span>
-
+            &bull;
-            <div>
+            <span> {{ (train.mass / 1000).toFixed(1) }}t</span>
-              <span> {{ train.length }}m</span>
+            <span v-if="train.stockList.length > 1">
               &bull;
-              <span> {{ (train.mass / 1000).toFixed(1) }}t</span>
+              {{ $t('trains.cars') }}: {{ train.stockList.length - 1 }}
-              <span v-if="train.stockList.length > 1">
+            </span>
-                &bull;
-                {{ $t('trains.cars') }}: {{ train.stockList.length - 1 }}
-              </span>
-            </div>
           </div>
         </div>
       </div>
-    </router-link>
+    </div>
-  </li>
+  </router-link>
 </template>
 
 <script setup lang="ts">
@@ -41,9 +39,10 @@ defineProps({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';
 
 .train-item {
+  display: block;
   background-color: #1a1a1a;
   margin-bottom: 1em;
   width: 100%;
@@ -67,7 +66,7 @@ defineProps({
   line-height: 1.5em;
 }
 
-@include smallScreen() {
+@include responsive.smallScreen {
   .item-wrapper {
     grid-template-columns: 1fr;
     gap: 1em 0;

src/data/speedLimits.json

@@ -1,156 +0,0 @@
-{
-   "EU07": {
-      "passenger": {
-         "650000": 125
-      },
-      "cargo": {
-         "2000000": 70
-      },
-      "none": 110
-   },
-   "4E": {
-      "passenger": {
-         "650000": 125
-      },
-      "cargo": {
-         "2000000": 70
-      },
-      "none": 110
-   },
-   "EU07E": {
-      "passenger": {
-         "650000": 125
-      },
-      "cargo": {
-         "2000000": 70
-      },
-      "none": 110
-   },
-   "EP07": {
-      "passenger": {
-         "650000": 125
-      },
-      "cargo": null,
-      "none": 110
-   },
-   "EP08": {
-      "passenger": {
-         "650000": 140
-      },
-      "cargo": null,
-      "none": 110
-   },
-   "EP09": {
-      "passenger": {
-         "650000": 160
-      },
-      "cargo": null,
-      "none": 160
-   },
-   "ET22": {
-      "passenger": {
-         "650000": 125
-      },
-      "cargo": {
-         "1200000": 100,
-         "3100000": 70
-      },
-      "none": 125
-   },
-   "201E": {
-      "passenger": {
-         "650000": 125
-      },
-      "cargo": {
-         "1200000": 100,
-         "3100000": 70
-      },
-      "none": 125
-   },
-   "ET41": {
-      "passenger": {
-         "700000": 125
-      },
-      "cargo": {
-         "4000000": 70,
-         "3500000": 80,
-         "2500000": 90,
-         "2000000": 100
-      },
-      "none": 110
-   },
-   "SM42": {
-      "passenger": {
-         "95000": 90,
-         "200000": 80,
-         "300000": 70,
-         "450000": 60,
-         "750000": 50,
-         "1130000": 40,
-         "1720000": 30,
-         "2400000": 20
-      },
-      "cargo": {
-         "95000": 90,
-         "200000": 80,
-         "300000": 70,
-         "450000": 60,
-         "750000": 50,
-         "1130000": 40,
-         "1720000": 30,
-         "2400000": 20
-      },
-      "none": 90
-   },
-   "M62": {
-      "passenger": {
-         "500000": 100,
-         "800000": 80,
-         "1200000": 60,
-         "2000000": 40,
-         "3000000": 20
-      },
-      "cargo": {
-         "500000": 100,
-         "800000": 80,
-         "1200000": 60,
-         "2000000": 40,
-         "3000000": 20
-      },
-      "none": 100
-   },
-   "ST44": {
-      "passenger": {
-         "500000": 100,
-         "800000": 80,
-         "1200000": 60,
-         "2000000": 40,
-         "3000000": 20
-      },
-      "cargo": {
-         "500000": 100,
-         "800000": 80,
-         "1200000": 60,
-         "2000000": 40,
-         "3000000": 20
-      },
-      "none": 100
-   },
-   "CTLR4C": {
-      "passenger": {
-         "500000": 100,
-         "800000": 80,
-         "1200000": 60,
-         "2000000": 40,
-         "3000000": 20
-      },
-      "cargo": {
-         "500000": 100,
-         "800000": 80,
-         "1200000": 60,
-         "2000000": 40,
-         "3000000": 20
-      },
-      "none": 100
-   }
-}

src/data/speedLimits.ts

@@ -0,0 +1,158 @@
+export const speedLimits: Record<string, any> = {
+  EU07: {
+    passenger: {
+      '650000': 125
+    },
+    cargo: {
+      '2000000': 70
+    },
+    none: 110
+  },
+  '4E': {
+    passenger: {
+      '650000': 125
+    },
+    cargo: {
+      '2000000': 70
+    },
+    none: 110
+  },
+  EU07E: {
+    passenger: {
+      '650000': 125
+    },
+    cargo: {
+      '2000000': 70
+    },
+    none: 110
+  },
+  EP07: {
+    passenger: {
+      '650000': 125
+    },
+    cargo: null,
+    none: 110
+  },
+  EP08: {
+    passenger: {
+      '650000': 140
+    },
+    cargo: null,
+    none: 110
+  },
+  EP09: {
+    passenger: {
+      '650000': 160
+    },
+    cargo: null,
+    none: 160
+  },
+  ET22: {
+    passenger: {
+      '650000': 125
+    },
+    cargo: {
+      '1200000': 100,
+      '1800000': 90,
+      '2500000': 80,
+      '3100000': 70
+    },
+    none: 100
+  },
+  '201E': {
+    passenger: {
+      '650000': 125
+    },
+    cargo: {
+      '1200000': 100,
+      '3100000': 70
+    },
+    none: 125
+  },
+  ET41: {
+    passenger: {
+      '700000': 125
+    },
+    cargo: {
+      '4000000': 70,
+      '3500000': 80,
+      '2500000': 90,
+      '2000000': 100
+    },
+    none: 110
+  },
+  SM42: {
+    passenger: {
+      '95000': 90,
+      '200000': 80,
+      '300000': 70,
+      '450000': 60,
+      '750000': 50,
+      '1130000': 40,
+      '1720000': 30,
+      '2400000': 20
+    },
+    cargo: {
+      '95000': 90,
+      '200000': 80,
+      '300000': 70,
+      '450000': 60,
+      '750000': 50,
+      '1130000': 40,
+      '1720000': 30,
+      '2400000': 20
+    },
+    none: 90
+  },
+  M62: {
+    passenger: {
+      '500000': 100,
+      '800000': 80,
+      '1200000': 60,
+      '2000000': 40,
+      '3000000': 20
+    },
+    cargo: {
+      '500000': 100,
+      '800000': 80,
+      '1200000': 60,
+      '2000000': 40,
+      '3000000': 20
+    },
+    none: 100
+  },
+  ST44: {
+    passenger: {
+      '500000': 100,
+      '800000': 80,
+      '1200000': 60,
+      '2000000': 40,
+      '3000000': 20
+    },
+    cargo: {
+      '500000': 100,
+      '800000': 80,
+      '1200000': 60,
+      '2000000': 40,
+      '3000000': 20
+    },
+    none: 100
+  },
+  CTLR4C: {
+    passenger: {
+      '500000': 100,
+      '800000': 80,
+      '1200000': 60,
+      '2000000': 40,
+      '3000000': 20
+    },
+    cargo: {
+      '500000': 100,
+      '800000': 80,
+      '1200000': 60,
+      '2000000': 40,
+      '3000000': 20
+    },
+    none: 100
+  }
+};

src/locales/en.json

@@ -157,9 +157,8 @@
     "sort-title": "SORT BY:",
     "filter-title": "FILTER BY:",
     "search-title": "SEARCH:",
-    "search-train-no": "Train no. / #",
+    "search-train": "Train no. / #",
-    "search-train": "Train no.",
+    "search-driver": "Choose a driver...",
-    "search-driver": "Driver name",
     "search-dispatcher": "Dispatcher name",
     "search-station": "Scenery name / #",
     "search-author": "Timetable author name",
@@ -271,7 +270,11 @@
       "minOneWayCatenary": "MIN. CATENARY SINGLE TRACK ROUTES",
       "minOneWay": "MIN. OTHER SINGLE TRACK ROUTES",
       "minTwoWayCatenary": "MIN. CATENARY DOUBLE TRACK ROUTES",
-      "minTwoWay": "MIN. OTHER DOUBLE TRACK ROUTES"
+      "minTwoWay": "MIN. OTHER DOUBLE TRACK ROUTES",
+      "minOneWayCatenaryInt": "MIN. INTERNAL CATENARY SINGLE TRACK ROUTES",
+      "minOneWayInt": "MIN. INTERNAL OTHER SINGLE TRACK ROUTES",
+      "minTwoWayCatenaryInt": "MIN. INTERNAL CATENARY DOUBLE TRACK ROUTES",
+      "minTwoWayInt": "MIN. INTERNAL OTHER DOUBLE TRACK ROUTES"
     },
     "sceneries-search": "SCENERY SEARCH:",
     "sceneries-placeholder": "Enter scenery name...",
@@ -328,13 +331,19 @@
     "active-filters": "Attention! You got active filters!"
   },
   "station-stats": {
+    "title": "ONLINE SCENERIES STATS",
+    "stats-button": "STATISTICS",
     "u-factor": "U-factor",
     "u-factor-tooltip": "(?) Current server traffic factor (driver count divided by dispatcher count)",
-    "avg-timetable-count": "Average count of scenery timetables:",
+    "avg-timetable-count": "TT average:",
     "single-track-count": "Single track routes:",
     "double-track-count": "Double track routes:",
-    "cross-sceneries": "Cross-track sceneries (1-track <-> 2-track)",
+    "cross-sceneries": "Cross-track sceneries",
-    "open-spawns": "Open spawns:"
+    "open-spawns-all": "Spawns (ALL):",
+    "open-spawns-pas": "Spawns (PAS):",
+    "open-spawns-freight": "Spawns (TOW):",
+    "open-spawns-loco": "Spawns (LOK):",
+    "no-stats": "No statistics available for the current region!"
   },
   "trains": {
     "no-trains": "No trains to show here!",
@@ -390,7 +399,7 @@
   },
   "train-stats": {
     "stats-button": "STATISTICS",
-    "title": "STATISTICS ONLINE",
+    "title": "ONLINE TRAINS STATS",
     "timetable-count": "ACTIVE TIMETABLES",
     "avg-speed": "AVG SPEED",
     "avg-timetable": "AVG TIMETABLE",
@@ -507,8 +516,10 @@
     "abbrev": "Station symbol:",
     "lines-title": "Real lines",
     "project-title": "Project name",
-    "one-way-routes": "One way routes",
+    "additional-tools-title": "Additional tools",
-    "two-way-routes": "Two way routes",
+    "one-way-routes": "Signle track routes",
+    "two-way-routes": "Double track routes",
+    "no-data": "No available data about this scenery",
     "option-active-timetables": "Active timetables",
     "option-timetables-history": "Timetables history PL1",
     "option-dispatchers-history": "Dispatchers history PL1",
@@ -525,7 +536,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",
@@ -543,12 +556,13 @@
     "terminates": "TERMINATES\nHERE",
     "from": "FROM",
     "to": "TO",
-    "desc-arriving": "The train is not here yet. It's going to come from: {prevStationName} (szlak {prevDepartureLine})",
+    "desc-arriving": "The train is not here yet.\nIt's going to come from: <b>{prevStationName} (route {prevDepartureLine})</b>",
-    "desc-online": "The train is at the station. It's going to leave to: {nextStationName} (szlak {nextArrivalLine})",
+    "desc-online": "The train is at the station.\nIt's going to leave to: <b>{nextStationName} (route {nextArrivalLine})</b>",
-    "desc-stopped": "The train is at the station and is stopped. It's going to leave towards: {nextStationName} (szlak {nextArrivalLine})",
+    "desc-stopped": "The train is at the station and is stopped.\nIt's going to leave towards: <b>{nextStationName} (route {nextArrivalLine})</b>",
-    "desc-next-arrival": "Leaves towards: {nextStationName} (szlak {nextArrivalLine})",
+    "desc-next-arrival": "Leaves towards: <b>{nextStationName} (route {nextArrivalLine})</b>",
-    "desc-departed": "The train is at the station and it's been departed. Leaves towards: {nextStationName} (szlak {nextArrivalLine})",
+    "desc-departed": "The train is at the station and it's been departed.\nLeaves towards: <b>{nextStationName} (route {nextArrivalLine})</b>",
-    "desc-departed-away": "The train has been departed to: {nextStationName} (szlak {nextArrivalLine})",
+    "desc-departed-ends": "The train is at the station and it's been departed.\nLeaves towards station: <b>{nextStationName}</b>",
+    "desc-departed-away": "The train has been departed to:\n<b>{nextStationName} (route {nextArrivalLine})</b>",
     "desc-end": "The train terminates here",
     "desc-terminated": "The train has been terminated"
   },

src/locales/pl.json

@@ -154,9 +154,8 @@
     "sort-title": "SORTUJ WG:",
     "filter-title": "FILTRUJ WG:",
     "search-title": "SZUKAJ:",
-    "search-train-no": "Nr pociągu",
     "search-train": "Nr pociągu / #",
-    "search-driver": "Nick maszynisty",
+    "search-driver": "Wybierz maszynistę...",
     "search-dispatcher": "Nick dyżurnego",
     "search-station": "Nazwa scenerii / #",
     "search-author": "Nick autora rozkładu jazdy",
@@ -269,7 +268,11 @@
       "minOneWayCatenary": "SZLAKI JEDNOTOROWE ZELEKTR. (MINIMUM)",
       "minOneWay": "SZLAKI JEDNOTOROWE NIEZELEKTR. (MINIMUM)",
       "minTwoWayCatenary": "SZLAKI DWUTOROWE ZELEKTR. (MINIMUM)",
-      "minTwoWay": "SZLAKI DWUTOROWE NIEZELEKTR. (MINIMUM)"
+      "minTwoWay": "SZLAKI DWUTOROWE NIEZELEKTR. (MINIMUM)",
+      "minOneWayCatenaryInt": "SZLAKI JEDNOTOROWE ZELEKTR. WEWNĘTRZNE (MINIMUM)",
+      "minOneWayInt": "SZLAKI JEDNOTOROWE NIEZELEKTR. WEWNĘTRZNE (MINIMUM)",
+      "minTwoWayCatenaryInt": "SZLAKI DWUTOROWE ZELEKTR. WEWNĘTRZNE (MINIMUM)",
+      "minTwoWayInt": "SZLAKI DWUTOROWE NIEZELEKTR. WEWNĘTRZNE (MINIMUM)"
     },
     "sceneries-search": "WYSZUKAJ SCENERIĘ:",
     "sceneries-placeholder": "Wpisz nazwę scenerii...",
@@ -324,13 +327,19 @@
     "active-filters": "Uwaga! Masz obecnie aktywne filtry!"
   },
   "station-stats": {
+    "title": "STATYSTYKI AKTYWNYCH SCENERII",
+    "stats-button": "STATYSTYKI",
     "u-factor": "Współczynnik Ugla",
     "u-factor-tooltip": "(?) Współczynnik ruchu na serwerze (liczba maszynistów online dzielona na liczbę dyżurnych ruchu)",
-    "avg-timetable-count": "Średnia liczba rozkładów jazdy na sceneriach:",
+    "avg-timetable-count": "Średnia RJ:",
     "single-track-count": "Szlaki jednotorowe:",
     "double-track-count": "Szlaki dwutorowe:",
-    "cross-sceneries": "Scenerie przejściowe (1-tor <-> 2-tor):",
+    "cross-sceneries": "Scenerie przejściowe:",
-    "open-spawns": "Otwarte spawny:"
+    "open-spawns-all": "Spawny (ALL):",
+    "open-spawns-pas": "Spawny (PAS):",
+    "open-spawns-freight": "Spawny (TOW):",
+    "open-spawns-loco": "Spawny (LOK):",
+    "no-stats": "Brak statystyk online dla wybranego serwera!"
   },
   "trains": {
     "no-trains": "Brak pociągów do wyświetlenia!",
@@ -377,7 +386,7 @@
   },
   "train-stats": {
     "stats-button": "STATYSTYKI",
-    "title": "STATYSTYKI ONLINE",
+    "title": "STATYSTYKI AKTYWNYCH POCIĄGÓW",
     "timetable-count": "AKTYWNE RJ",
     "avg-speed": "ŚREDNIA PRĘDKOŚĆ",
     "avg-timetable": "ŚREDNI RJ",
@@ -493,8 +502,10 @@
     "abbrev": "Skrót posterunku:",
     "lines-title": "Rzeczywiste linie",
     "project-title": "Projekt",
+    "additional-tools-title": "Dodatkowe narzędzia",
     "one-way-routes": "Szlaki jednotorowe",
     "two-way-routes": "Szlaki dwutorowe",
+    "no-data": "Brak informacji o tej scenerii",
     "option-active-timetables": "Aktywne rozkłady jazdy",
     "option-timetables-history": "Historia rozkładów PL1",
     "option-dispatchers-history": "Historia dyżurów PL1",
@@ -511,7 +522,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ść",
@@ -529,12 +542,13 @@
     "terminates": "KOŃCZY BIEG",
     "from": "Z",
     "to": "DO",
-    "desc-arriving": "Pociągu nie ma jeszcze na tej scenerii. Przyjedzie z: {prevStationName} (szlak {prevDepartureLine})",
+    "desc-arriving": "Pociągu nie ma jeszcze na tej scenerii.\nPrzyjedzie z: <b>{prevStationName} (szlak {prevDepartureLine})</b>",
-    "desc-online": "Pociąg jest na tej scenerii. Odjedzie do: {nextStationName} (szlak {nextArrivalLine})",
+    "desc-online": "Pociąg jest na tej scenerii.\nOdjedzie w kierunku: <b>{nextStationName} (szlak {nextArrivalLine})</b>",
-    "desc-stopped": "Pociąg jest na tej scenerii i odbywa postój. Odjedzie do: {nextStationName} (szlak {nextArrivalLine})",
+    "desc-stopped": "Pociąg jest na tej scenerii i odbywa postój.\nOdjedzie w kierunku: <b>{nextStationName} (szlak {nextArrivalLine})</b>",
-    "desc-next-arrival": "Odjeżdża do: {nextStationName} (szlak {nextArrivalLine})",
+    "desc-next-arrival": "Odjeżdża do:\n<b>{nextStationName} (szlak {nextArrivalLine})</b>",
-    "desc-departed": "Pociąg jest na tej scenerii i został odprawiony. Odjeżdża do: {nextStationName} (szlak {nextArrivalLine})",
+    "desc-departed": "Pociąg jest na tej scenerii i został odprawiony.\nOdjeżdża w kierunku: <b>{nextStationName} (szlak {nextArrivalLine})</b>",
-    "desc-departed-away": "Pociąg został odprawiony i odjechał do: {nextStationName} (szlak {nextArrivalLine})",
+    "desc-departed-ends": "Pociąg jest na tej scenerii i został odprawiony.\nOdjechał w kierunku stacji: <b>{nextStationName}</b>",
+    "desc-departed-away": "Pociąg został odprawiony i odjechał do:\n<b>{nextStationName} (szlak {nextArrivalLine})</b>",
     "desc-end": "Pociąg kończy bieg",
     "desc-terminated": "Pociąg skończył bieg"
   },

src/managers/stationFilterManager.ts

@@ -59,22 +59,29 @@ export const initFilters = {
   onlineFromHours: 0,
   minLevel: 0,
   maxLevel: 20,
-  minOneWayCatenary: 0,
   minOneWay: 0,
+  minOneWayCatenary: 0,
   minTwoWayCatenary: 0,
-  minTwoWay: 0,
+  minOneWayInt: 0,
+  minOneWayCatenaryInt: 0,
+  minTwoWayCatenaryInt: 0,
+  // minTwoWay: 0,
   authors: ''
 };
 
-export const initSliders = [
+export const sliderStates = [
   { id: 'maxVmax', minRange: 0, maxRange: 200, step: 10 },
   { id: 'minVmax', minRange: 0, maxRange: 200, step: 10 },
   { id: 'minLevel', minRange: 0, maxRange: 20, step: 1 },
   { id: 'maxLevel', minRange: 0, maxRange: 20, step: 1 },
-  { id: 'minOneWayCatenary', minRange: 0, maxRange: 5, step: 1 },
   { id: 'minOneWay', minRange: 0, maxRange: 5, step: 1 },
+  { id: 'minOneWayCatenary', minRange: 0, maxRange: 5, step: 1 },
   { id: 'minTwoWayCatenary', minRange: 0, maxRange: 5, step: 1 },
-  { id: 'minTwoWay', minRange: 0, maxRange: 5, step: 1 }
+  { id: 'minOneWayInt', minRange: 0, maxRange: 5, step: 1 },
+  { id: 'minOneWayCatenaryInt', minRange: 0, maxRange: 5, step: 1 },
+  { id: 'minTwoWayCatenaryInt', minRange: 0, maxRange: 5, step: 1 },
+  // { id: 'minTwoWay', minRange: 0, maxRange: 5, step: 1 },
+  // { id: 'minTwoWayInt', minRange: 0, maxRange: 5, step: 1 }
 ];
 
 export type StationFilter = keyof typeof initFilters;
@@ -109,7 +116,7 @@ export function setupFilters(currentFilters: Record<string, any>) {
   });
 }
 
-export function getChangedFilters(currentFilters: Record<string, any>): string[] {
+export function getChangedFilters(currentFilters: Record<string, any>): string[] {  
   return (
     Object.keys(currentFilters).filter(
       (filterKey) =>

src/store/apiStore.ts

@@ -53,8 +53,6 @@ export const useApiStore = defineStore('apiStore', {
     },
 
     updateTick(t: number) {
-      if (this.dataStatuses.connection == Status.Data.Offline) return;
-
       // Static data refresh
       if (t >= this.nextDataCheckTime) {
         this.fetchDonatorsData();

src/store/mainStore.ts

@@ -42,8 +42,13 @@ export const useMainStore = defineStore('mainStore', {
       checkpointsTrains.clear();
       sceneriesTrains.clear();
 
-      return (apiStore.activeData?.trains ?? [])
+      const dateNow = new Date();
-        .filter((train) => train.timetable || train.lastSeen >= Date.now() - 60000)
+
+      const x = (apiStore.activeData?.trains ?? [])
+        .filter(
+          (train) =>
+            train.timetable || train.lastSeen >= dateNow.getTime() - 60000 || train.online == 1
+        )
         .map((train) => {
           const stock = train.stockString.split(';');
           const locoType = stock ? stock[0] : train.stockString;
@@ -163,6 +168,8 @@ export const useMainStore = defineStore('mainStore', {
 
           return trainObj;
         });
+
+      return x;
     },
 
     // computed active sceneries

src/store/tooltipStore.ts

@@ -7,7 +7,8 @@ export const tooltipKeys = [
   'BaseTooltip',
   'VehiclePreviewTooltip',
   'SpawnsTooltip',
-  'UsersTooltip'
+  'UsersTooltip',
+  'HtmlTooltip'
 ] as const;
 
 export type TooltipType = (typeof tooltipKeys)[number];

src/styles/_badge.scss

@@ -1,5 +1,4 @@
-@import 'variables.scss';
+@use 'responsive';
-@import 'responsive.scss';
 
 .badge {
   font-weight: 600;
@@ -9,7 +8,7 @@
 
   margin: 0.25em;
 
-  span {
+  & > span {
     display: inline-block;
     background: #585858;
     padding: 0.2em 0.4em;
@@ -23,7 +22,7 @@
 
     text-align: center;
 
-    @include smallScreen() {
+    @include responsive.smallScreen{
       font-size: 1em;
     }
   }
@@ -131,7 +130,7 @@
   color: white;
 
   & > span:first-child {
-    background-color: $accentCol;
+    background-color: var(--clr-primary);
     color: black;
   }
 }

src/styles/_card.scss

@@ -1,5 +1,4 @@
-@import './variables.scss';
+@use 'responsive';
-@import './responsive.scss';
 
 .card-dimmer {
   position: fixed;
@@ -46,7 +45,7 @@
   }
 }
 
-@include smallScreen {
+@include responsive.smallScreen{
   .card {
     max-height: 85vh;
   }

src/styles/_dropdown-filters.scss

@@ -1,6 +1,5 @@
-@import 'search_box.scss';
+@use 'search-box';
-@import 'responsive.scss';
+@use 'responsive';
-@import 'variables.scss';
 
 .actions-bar {
   display: flex;
@@ -51,7 +50,7 @@ h1.option-title {
 }
 
 .sort-option[data-selected='true'] {
-  color: $accentCol;
+  color: var(--clr-primary);
   font-weight: bold;
 }
 
@@ -73,15 +72,6 @@ h1.option-title {
   .search {
     margin: 0.5em auto;
   }
-
-  .search-box {
-    .search-exit {
-      position: absolute;
-      transform: translateY(-50%);
-      top: 50%;
-      right: 0;
-    }
-  }
 }
 
 .options_actions {
@@ -95,7 +85,7 @@ h1.option-title {
   }
 }
 
-@include smallScreen() {
+@include responsive.smallScreen{
   h1 {
     text-align: center;
 

src/styles/_dropdown.scss

@@ -1,5 +1,4 @@
-@import 'responsive.scss';
+@use 'responsive';
-@import 'variables.scss';
 
 .dropdown-anim {
   &-enter-from,
@@ -29,9 +28,9 @@
   left: 0;
   top: calc(100% + 0.5em);
 
-  background-color: $bgCol;
+  background-color: var(--clr-bg3);
   // box-shadow: 0 5px 10px 2px #0f0f0f;
-  box-shadow: 0 0 5px 1px $accentCol;
+  box-shadow: 0 0 5px 1px var(--clr-primary);
 
   width: 100%;
   max-width: 550px;
@@ -40,7 +39,7 @@
   z-index: 100;
 }
 
-@include smallScreen {
+@include responsive.smallScreen{
   .dropdown_wrapper {
     font-size: 1.1em;
     max-width: 100%;

src/styles/_global.scss

@@ -1,6 +1,5 @@
-@import 'fonts';
+@use 'fonts';
-@import 'variables';
+@use 'responsive';
-@import 'responsive';
 
 :root {
   --clr-primary: #ffc014;
@@ -8,6 +7,7 @@
 
   --clr-bg: #4d4d4d;
   --clr-bg2: #1b1b1b;
+  --clr-bg3: #1d1d1d;
 
   --clr-accent: #1085b3;
   --clr-accent2: #ff3d5d;
@@ -18,7 +18,7 @@
   --clr-pn: #ffd000;
 
   --clr-error: #fa3636;
-  --clr-warning: #c59429;
+  --clr-warning: #ffe15b;
 
   --clr-donator: #f7a4ff;
 
@@ -60,11 +60,21 @@ body {
   overflow-x: hidden;
   position: relative;
 
+  font-size: 16px;
+
+  @include responsive.smallScreen {
+    font-size: calc(0.65rem + 0.85vw);
+  }
+
+  @include responsive.screenLandscape {
+    font-size: calc(0.45rem + 0.8vw);
+  }
+
   &.no-scroll {
     overflow-y: hidden;
     padding-right: var(--no-scroll-padding);
 
-    @include smallScreen() {
+    @include responsive.smallScreen {
       padding: 0;
     }
   }
@@ -108,11 +118,11 @@ input {
 }
 
 *:focus-visible {
-  outline: 1px solid $accentCol;
+  outline: 1px solid var(--clr-primary);
 }
 
 .title {
-  color: $accentCol;
+  color: var(--clr-primary);
   font-weight: 600;
 
   padding: 0.35em 0;
@@ -130,26 +140,29 @@ a {
   color: inherit;
 }
 
-a:not(.a-block):not(.a-button):not(.a-row) {
-  display: inline-block;
-
-  transition: color 0.3s;
-
-  &:hover,
-  &:focus {
-    color: $accentCol;
-    border: none;
-  }
-}
-
-a.a-block {
-  display: block;
-}
-
 a.a-row {
   display: table-row;
 }
 
+a:focus-visible {
+  outline: 1px solid var(--clr-primary);
+}
+
+.route-link {
+  margin: 0 0.2em;
+  transition: color 100ms;
+
+  &-active,
+  &[data-active='true'] {
+    color: var(--clr-primary);
+    font-weight: bold;
+  }
+
+  &:hover {
+    color: var(--clr-primary);
+  }
+}
+
 ul {
   padding: 0;
   list-style: none;
@@ -292,7 +305,7 @@ a.a-button {
     width: 1.3em;
   }
 
-  @include smallScreen() {
+  @include responsive.smallScreen {
     bottom: 1em;
     right: 0;
     left: 50%;
@@ -330,7 +343,7 @@ a.a-button {
   cursor: help;
 }
 
-@include smallScreen {
+@include responsive.smallScreen {
   ::-webkit-scrollbar {
     width: 0.5em;
     height: 0.5em;

src/styles/_journal-section.scss

@@ -1,5 +1,5 @@
-@import 'responsive.scss';
+@use 'responsive';
-@import 'animations.scss';
+@use 'animations';
 
 .journal-list {
   display: flex;
@@ -12,7 +12,7 @@
 .list_wrapper {
   overflow-y: auto;
   height: calc(100vh - 12.5em);
-  min-height: 500px;
+  min-height: 650px;
   margin-top: 0.5em;
   position: relative;
 
@@ -68,7 +68,7 @@
   font-size: 1.2em;
 }
 
-@include smallScreen() {
+@include responsive.smallScreen{
   .journal_top-bar {
     justify-content: center;
     flex-wrap: wrap;

src/styles/_journal-stats.scss

@@ -1,6 +1,5 @@
-@import 'variables.scss';
+@use 'responsive';
-@import 'responsive.scss';
+@use 'badge';
-@import 'badge.scss';
 
 .stats-tab {
   position: absolute;
@@ -11,7 +10,7 @@
   width: 100%;
 
   background-color: #1a1a1a;
-  box-shadow: 0 0 5px 1px $accentCol;
+  box-shadow: 0 0 5px 1px var(--clr-primary);
 
   padding: 1em;
   display: flex;
@@ -33,7 +32,7 @@ hr.section-separator {
   gap: 0.5em;
 }
 
-@include smallScreen {
+@include responsive.smallScreen{
   .journal-stats {
     text-align: center;
   }

src/styles/_search-box.scss

@@ -1,4 +1,4 @@
-@import 'responsive.scss';
+@use 'responsive';
 
 .search {
   label {
@@ -11,8 +11,9 @@
     position: relative;
 
     display: flex;
+    align-items: center;
+    gap: 0.25em;
 
-    border-radius: 0.5em;
     min-width: 200px;
     margin-right: 0.25em;
   }
@@ -20,6 +21,8 @@
   &-input {
     border: none;
     background-color: #424242;
+    color: white;
+    border-radius: 0.5em;
 
     padding: 0.35em 0.5em;
     width: 100%;
@@ -27,6 +30,7 @@
 
   &-exit {
     background-color: #424242;
+    border-radius: 0.5em;
 
     img {
       vertical-align: middle;
@@ -39,7 +43,7 @@
     max-width: 300px;
   }
 
-  @include smallScreen {
+  @include responsive.smallScreen {
     &-box,
     &-button {
       margin: 0.5em 0 0 0;
@@ -50,3 +54,15 @@
     }
   }
 }
+
+.search-box > i {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  padding-right: 0.5em;
+}
+
+select.search-input {
+
+}

src/styles/variables.scss

@@ -1,11 +0,0 @@
-$primaryCol: #2c2c2c;
-$secondaryCol: #01e733;
-
-$bgCol: #1d1d1d;
-$bgLigtherCol: #5b5b5b;
-
-$errorCol: #ff1919;
-$warningCol: #ffe15b;
-
-$accentCol: #ffc014;
-$accent2Col: #ff3d5d;

src/views/DriverView.vue

@@ -147,7 +147,8 @@ function copyStockToClipboard() {
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/responsive';
+@use '../styles/responsive';
+@use 'sass:color';
 
 $viewBgCol: #1a1a1a;
 
@@ -176,7 +177,7 @@ $viewBgCol: #1a1a1a;
   border-radius: 0.5em 0.5em 0 0;
 
   &:hover {
-    background-color: lighten($viewBgCol, 10);
+    background-color: color.adjust($viewBgCol, $lightness: 10%);
   }
 }
 
@@ -209,7 +210,7 @@ $viewBgCol: #1a1a1a;
   gap: 0.5em;
 }
 
-@include smallScreen {
+@include responsive.smallScreen{
   span.hidable {
     display: none;
   }

src/views/JournalDispatchers.vue

@@ -332,5 +332,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/JournalSection.scss';
+@use '../styles/journal-section';
 </style>

src/views/JournalTimetables.vue

@@ -482,5 +482,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/JournalSection.scss';
+@use '../styles/journal-section';
 </style>

src/views/SceneryView.vue

@@ -13,7 +13,7 @@
           :station="stationInfo"
           :onlineScenery="onlineSceneryInfo"
         />
-        
+
         <SceneryInfo :station="stationInfo" :onlineScenery="onlineSceneryInfo" />
       </div>
 
@@ -173,8 +173,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/responsive.scss';
+@use '../styles/responsive';
-@import '../styles/variables.scss';
 
 button.back-btn {
   img {
@@ -193,7 +192,7 @@ button.back-btn {
     text-align: center;
     padding: 2em 1em;
 
-    color: $warningCol;
+    color: var(--clr-warning);
 
     display: inline-block;
 
@@ -275,7 +274,7 @@ button.back-btn {
   .checkpoint_item {
     &.current {
       font-weight: bold;
-      color: $accentCol;
+      color: var(--clr-primary);
     }
 
     &:not(:last-child)::after {
@@ -286,7 +285,7 @@ button.back-btn {
   }
 }
 
-@include midScreen {
+@include responsive.midScreen {
   .scenery-wrapper {
     grid-template-columns: 1fr;
     gap: 0;
@@ -304,7 +303,7 @@ button.back-btn {
   }
 }
 
-@include smallScreen {
+@include responsive.smallScreen{
   .scenery-left {
     max-height: 100vh;
   }

src/views/StationsView.vue

@@ -4,7 +4,7 @@
       <div class="stations-options">
         <StationFilterCard
           :showCard="filterCardOpen"
-          :exit="(filterCardOpen = false)"
+          :exit="filterCardOpen = false"
           ref="filterCardRef"
         />
 
@@ -78,8 +78,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/variables.scss';
+@use '../styles/responsive';
-@import '../styles/responsive.scss';
 
 .stations-view {
   position: relative;
@@ -107,15 +106,13 @@ export default defineComponent({
 button.btn-donation {
   margin-left: auto;
 
-  $btnColor: #254069;
+  background-color: #254069;
-
-  background-color: $btnColor;
 
   &:hover {
-    background-color: lighten($btnColor, 5%);
+    background-color: #2e4f81;
   }
 
-  @include smallScreen {
+  @include responsive.smallScreen {
     span {
       display: none;
     }

src/views/TrainsView.vue

@@ -114,7 +114,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/responsive.scss';
+@use '../styles/responsive';
 
 .trains-view {
   position: relative;
@@ -134,7 +134,7 @@ export default defineComponent({
   margin-bottom: 0.5em;
 }
 
-@include smallScreen {
+@include responsive.smallScreen {
   .trains_topbar {
     justify-content: space-between;
   }

vite.config.ts

@@ -1,17 +1,22 @@
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import { VitePWA } from 'vite-plugin-pwa';
+import path from 'path';
 
 export default defineConfig({
-  server: {
+  server: { port: 5123, open: true },
-    port: 5001,
+  preview: { port: 4001, open: true },
-    open: true
-  },
-  preview: {
-    port: 4001,
-    open: true
-  },
   publicDir: 'public',
+  css: {
+    preprocessorOptions: {
+      scss: { additionalData: `@use '@/styles/global';`, silenceDeprecations: ['legacy-js-api'] }
+    }
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src')
+    }
+  },
   plugins: [
     vue(),
     VitePWA({
@@ -26,20 +31,15 @@ export default defineConfig({
           {
             urlPattern:
               /^https:\/\/stacjownik.spythere.eu\/api\/(getVehicles|getDonators|getSceneries)/i,
-            handler: 'StaleWhileRevalidate',
+            handler: 'NetworkFirst',
             options: {
               cacheName: 'stacjownik-api-cache',
-              cacheableResponse: {
+              cacheableResponse: { statuses: [0, 200] }
-                statuses: [0, 200]
-              }
             }
-          },
+          }
         ]
       },
-      devOptions: {
+      devOptions: { enabled: true, suppressWarnings: true }
-        enabled: true,
-        suppressWarnings: true
-      }
     })
   ],
   build: {