Merge pull request #126 from Spythere/development

v1.29.2
chore: additional styles
2026-05-03 05:18:11 +00:00 · 2025-04-15 01:15:42 +02:00 · 2025-04-15 01:10:31 +02:00 · 2025-04-14 21:37:59 +02:00 · 2025-04-14 21:02:46 +02:00 · 2025-04-14 19:24:28 +02:00
106 changed files with 12148 additions and 3492 deletions
@@ -1,6 +1,6 @@
 {
  "name": "stacjownik",
-  "version": "1.28.2",
+  "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",
@@ -0,0 +1,19 @@
+/*!
+ * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2024 Fonticons, Inc.
+ */
+:root, :host {
+  --fa-style-family-classic: 'Font Awesome 6 Free';
+  --fa-font-regular: normal 400 1em/1 'Font Awesome 6 Free'; }
+
+@font-face {
+  font-family: 'Font Awesome 6 Free';
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype"); }
+
+.far,
+.fa-regular {
+  font-weight: 400; }
@@ -0,0 +1,19 @@
+/*!
+ * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2024 Fonticons, Inc.
+ */
+:root, :host {
+  --fa-style-family-classic: 'Font Awesome 6 Free';
+  --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free'; }
+
+@font-face {
+  font-family: 'Font Awesome 6 Free';
+  font-style: normal;
+  font-weight: 900;
+  font-display: block;
+  src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }
+
+.fas,
+.fa-solid {
+  font-weight: 900; }
@@ -0,0 +1,5 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="512" height="512" rx="256" fill="#151414"/>
+<path d="M72.4253 291.986V279.965H120.201C123.283 279.965 124.824 278.424 124.824 275.342V264.246C124.824 261.266 123.54 259.571 120.971 259.16L90.9189 252.995C78.5898 250.529 72.4253 242.259 72.4253 228.183V219.553C72.4253 202.292 81.0557 193.662 98.3164 193.662H133.608L143.934 201.675V213.696H99.2411C96.1588 213.696 94.6177 215.237 94.6177 218.32V228.337C94.6177 231.214 95.9019 232.909 98.4705 233.423L128.523 239.433C140.852 241.899 147.016 250.17 147.016 264.246V274.109C147.016 291.37 138.386 300 121.125 300H82.7509L72.4253 291.986ZM167.651 300V193.662H219.433C236.694 193.662 245.324 202.292 245.324 219.553V237.122C245.324 249.964 240.546 257.978 230.991 261.163L248.406 295.377L245.786 300H226.676L207.874 263.013H189.843V300H167.651ZM189.843 242.978H218.508C221.591 242.978 223.132 241.437 223.132 238.355V218.32C223.132 215.237 221.591 213.696 218.508 213.696H189.843V242.978ZM262.96 274.109V253.766H285.153V275.342C285.153 278.424 286.694 279.965 289.776 279.965H310.736C313.818 279.965 315.359 278.424 315.359 275.342V213.696H286.386V193.662H337.551V274.109C337.551 291.37 328.921 300 311.66 300H288.852C271.591 300 262.96 291.37 262.96 274.109ZM361.948 300V193.662H413.731C430.991 193.662 439.622 202.292 439.622 219.553V240.204C439.622 257.465 430.991 266.095 413.731 266.095H384.141V300H361.948ZM384.141 246.06H412.806C415.888 246.06 417.429 244.519 417.429 241.437V218.32C417.429 215.237 415.888 213.696 412.806 213.696H384.141V246.06Z" fill="white"/>
+<path d="M304.958 332.848V322.831H348.418V332.848H332.236V376H321.14V332.848H304.958ZM356.61 376V322.831H376.799C391.285 322.831 398.529 330.074 398.529 344.561V354.27C398.529 368.757 391.285 376 376.799 376H356.61ZM367.706 365.983H377.415C384.093 365.983 387.432 362.643 387.432 355.965V342.866C387.432 336.187 384.093 332.848 377.415 332.848H367.706V365.983ZM407.35 376V358.662C407.35 351.624 410.432 347.489 416.597 346.256L430.852 343.405C432.136 343.148 432.779 342.3 432.779 340.862V335.16C432.779 333.619 432.008 332.848 430.467 332.848H408.891V326.838L414.054 322.831H430.929C439.56 322.831 443.875 327.146 443.875 335.776V340.785C443.875 347.823 440.792 351.958 434.628 353.191L420.372 356.042C419.088 356.299 418.446 357.147 418.446 358.585V365.983H443.875V376H407.35Z" fill="#E63E3E"/>
+</svg>
@@ -6,6 +6,7 @@
    />

    <Tooltip />
+    
    <AppHeader :current-lang="currentLang" @change-lang="changeLang" />

    <main class="app_main">
@@ -16,21 +17,12 @@
      </router-view>
    </main>

-    <footer class="app_footer">
-      &copy;
-      <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
-      {{ new Date().getUTCFullYear() }} |
-      <button class="btn--text" @click="() => (isUpdateCardOpen = true)">
-        v{{ VERSION }}{{ isOnProductionHost ? '' : 'dev' }}
-      </button>
-
-      <br />
-      <a href="https://discord.gg/x2mpNN3svk">
-        <img src="/images/icon-discord.png" alt="" />&nbsp;<b>{{ $t('footer.discord') }}</b>
-      </a>
-
-      <div style="display: none">&int; ukryta taktyczna całka do programowania w HTMLu</div>
-    </footer>
+    <AppFooter
+      :version="VERSION"
+      :is-on-production-host="isOnProductionHost"
+      :is-update-card-open="isUpdateCardOpen"
+      @open-update-card="() => (isUpdateCardOpen = true)"
+    />
  </div>
 </template>

@@ -38,7 +30,7 @@
 import { defineComponent } from 'vue';
 import axios from 'axios';

-import { version } from '.././package.json';
+import { version } from '../package.json';
 import { Status } from './typings/common';
 import { useMainStore } from './store/mainStore';
 import { useApiStore } from './store/apiStore';
@@ -51,6 +43,7 @@ import Tooltip from './components/Tooltip/Tooltip.vue';
 import UpdateCard from './components/App/UpdateCard.vue';

 import StorageManager from './managers/storageManager';
+import AppFooter from './components/App/AppFooter.vue';

 const STORAGE_VERSION_KEY = 'app_version';

@@ -59,6 +52,7 @@ export default defineComponent({
    Clock,
    StatusIndicator,
    AppHeader,
+    AppFooter,
    UpdateCard,
    Tooltip
  },
@@ -173,32 +167,13 @@ export default defineComponent({
 </script>

 <style lang="scss">
-@import './styles/global';
-@import './styles/animations';
-
-.route {
-  margin: 0 0.2em;
-
-  &-active,
-  &[data-active='true'] {
-    color: $accentCol;
-    font-weight: bold;
-  }
-}
+@use './styles/animations';

 // APP
 #app {
  color: white;
-  font-size: 1rem;
  overflow-x: hidden;
-
-  @include smallScreen() {
-    font-size: calc(0.65rem + 0.85vw);
-  }
-
-  @include screenLandscape() {
-    font-size: calc(0.45rem + 0.8vw);
-  }
+  font-size: 1em;
 }

 // CONTAINER
@@ -0,0 +1,39 @@
+<template>
+  <footer class="app_footer">
+    &copy;
+    <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
+    {{ new Date().getUTCFullYear() }} |
+    <button class="btn--text" @click="openUpdateCard">
+      v{{ version }}{{ isOnProductionHost ? '' : 'dev' }}
+    </button>
+
+    <br />
+    <a href="https://discord.gg/x2mpNN3svk">
+      <img src="/images/icon-discord.png" alt="" />&nbsp;<b>{{ $t('footer.discord') }}</b>
+    </a>
+
+    <div style="display: none">&int; ukryta taktyczna całka do programowania w HTMLu</div>
+  </footer>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  emits: ['openUpdateCard'],
+  props: {
+    isUpdateCardOpen: {
+      type: Boolean,
+      required: true
+    },
+    version: String,
+    isOnProductionHost: Boolean
+  },
+
+  methods: {
+    openUpdateCard() {
+      this.$emit('openUpdateCard');
+    }
+  }
+});
+</script>
@@ -18,7 +18,12 @@

        <span class="header_brand">
          <router-link to="/">
-            <img src="/images/stacjownik-header-logo.svg" alt="Stacjownik" />
+            <img
+              v-if="isChristmas"
+              src="/images/stacjownik-header-logo-christmas.svg"
+              alt="Stacjownik logo (christmas)"
+            />
+            <img v-else src="/images/stacjownik-header-logo.svg" alt="Stacjownik logo" />
          </router-link>
        </span>

@@ -40,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"
-            active-class="route-active"
+            class="route-link"
+            active-class="route-link-active"
            :data-active="$route.path.startsWith('/journal')"
            to="/journal"
          >
@@ -69,7 +74,10 @@ import Clock from './Clock.vue';
 import RegionDropdown from '../Global/RegionDropdown.vue';

 export default defineComponent({
+  components: { StatusIndicator, Clock, RegionDropdown },
+
  emits: ['changeLang'],
+
  props: {
    currentLang: {
      type: String,
@@ -98,14 +106,19 @@ export default defineComponent({
      return this.store.activeSceneryList.filter(
        (scenery) => scenery.region == this.store.region.id && scenery.dispatcherId != -1
      ).length;
+    },
+
+    isChristmas() {
+      const date = new Date();
+
+      return date.getUTCMonth() == 11 && date.getUTCDate() >= 20 && date.getUTCDate() <= 31;
    }
-  },
-  components: { StatusIndicator, Clock, RegionDropdown }
+  }
 });
 </script>
+
 <style lang="scss" scoped>
-@import '../../styles/variables.scss';
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';

 // HEADER
 .app_header {
@@ -113,7 +126,7 @@ export default defineComponent({
  justify-content: center;

  position: relative;
-  background-color: $primaryCol;
+  background-color: #2c2c2c;
 }

 .header {
@@ -128,7 +141,7 @@ export default defineComponent({

    border-radius: 0 0 1em 1em;

-    @include smallScreen {
+    @include responsive.smallScreen{
      position: relative;
      margin-top: 0.5em;
    }
@@ -167,7 +180,7 @@ export default defineComponent({

    padding: 0.5em;

-    @include smallScreen {
+    @include responsive.smallScreen{
      transform: translateX(85%);
    }
  }
@@ -6,9 +6,7 @@
 import { computed, defineComponent, ref } from 'vue';
 export default defineComponent({
  name: 'VueClock',
-  data: () => ({
-    timestamp: Date.now()
-  }),
+  data: () => ({ 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;
@@ -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;
    }
  }
@@ -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) {
@@ -13,8 +13,7 @@ export default defineComponent({});
 </script>

 <style lang="scss">
-@import '../../styles/variables';
-@import '../../styles/responsive';
+@use '../../styles/responsive';

 .button_content {
  display: flex;
@@ -38,5 +38,3 @@ export default defineComponent({
  }
 });
 </script>
-
-<style scoped></style>
@@ -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;
  }
@@ -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;
@@ -187,7 +185,7 @@ a.discord {
  text-decoration: underline;
 }

-.actions {
+.actions-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0.5em;
@@ -198,32 +196,28 @@ a.discord {
  }
 }

-.actions > .action {
+.actions-container > .action {
  &.paypal {
-    $btnColor: #254069;
-
-    background-color: $btnColor;
+    background-color: #254069;

    &:hover {
-      background-color: lighten($btnColor, 5%);
+      background-color: #2f5185;
    }
  }

  &.coffee {
-    $btnColor: #009255;
-    background-color: $btnColor;
+    background-color: #009255;

    &:hover {
-      background-color: lighten($btnColor, 5%);
+      background-color: #00a35f;
    }
  }

  &.exit {
-    $btnColor: #686868;
-    background-color: $btnColor;
+    background-color: #686868;

    &:hover {
-      background-color: lighten($btnColor, 5%);
+      background-color: #8d8d8d;
    }
  }
 }
@@ -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;
    }
  }
@@ -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: {
-      type: String,
-      required: true
-    },
-    updateOnInput: {
-      type: Boolean,
-      default: true
-    },
-    titleToTranslate: {
-      type: String,
-      required: true
-    },
-    clearValue: {
-      type: Function
-    }
+    searchedValue: { type: String, required: true },
+    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 {
-      compSearchedValue,
-      updateValue,
-      clearSearchValue
-    };
+    return { 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%;
    }
  }
@@ -20,15 +20,9 @@ import { Status } from '../../typings/common';

 export default defineComponent({
  props: {
-    dispatcherStatus: {
-      type: Number as PropType<Status.ActiveDispatcher | number>
-    },
-    dispatcherTimestamp: {
-      type: Number as PropType<number | null>
-    },
-    isOnline: {
-      type: Boolean
-    }
+    dispatcherStatus: { type: Number as PropType<Status.ActiveDispatcher | number> },
+    dispatcherTimestamp: { type: Number as PropType<number | null> },
+    isOnline: { type: Boolean }
  },
  mixins: [dateMixin],

@@ -22,20 +22,12 @@ export default defineComponent({
  components: { VehicleThumbnail },

  props: {
-    trainStockList: {
-      type: Array as PropType<string[]>,
-      required: true
-    },
-    tractionOnly: {
-      type: Boolean,
-      required: false
-    }
+    trainStockList: { type: Array as PropType<string[]>, required: true },
+    tractionOnly: { type: Boolean, required: false }
  },

  data() {
-    return {
-      apiStore: useApiStore()
-    };
+    return { apiStore: useApiStore() };
  },

  computed: {
@@ -151,7 +143,6 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-
 .list-wrapper {
  display: flex;
  justify-content: center;
@@ -8,7 +8,7 @@
    <div class="stock-images">
      <img
        v-for="(thumbnailImage, imageIndex) in images"
-        :src="`https://static.spythere.eu/thumbnails/v2/${thumbnailImage}.png`"
+        :src="`https://stacjownik.spythere.eu/static/thumbnails/${thumbnailImage}.png`"
        height="60"
        loading="lazy"
        data-tooltip-type="VehiclePreviewTooltip"
@@ -51,7 +51,6 @@ function onImageLoad() {

 <style lang="scss" scoped>
 .vehicle-thumbnail {
-  
  position: relative;
  opacity: 0;
  transition: opacity 100ms ease-in-out;
@@ -234,9 +234,9 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-@import '../../styles/JournalStats.scss';
-@import '../../styles/badge.scss';
+@use '../../styles/animations';
+@use '../../styles/journal-stats';
+@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;
  }
@@ -121,14 +121,8 @@ import StationStatusBadge from '../../Global/StationStatusBadge.vue';

 export default defineComponent({
  props: {
-    entry: {
-      type: Object as PropType<API.DispatcherHistory.Data>,
-      required: true
-    },
-    showExtraInfo: {
-      type: Boolean,
-      required: true
-    }
+    entry: { type: Object as PropType<API.DispatcherHistory.Data>, required: true },
+    showExtraInfo: { type: Boolean, required: true }
  },

  components: { StationStatusBadge },
@@ -136,10 +130,7 @@ export default defineComponent({
  emits: ['toggleShowExtraInfo'],

  data() {
-    return {
-      regions,
-      apiStore: useApiStore()
-    };
+    return { regions, apiStore: useApiStore() };
  },

  methods: {
@@ -151,8 +142,8 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../../styles/responsive.scss';
-@import '../../../styles/badge.scss';
+@use '../../../styles/responsive';
+@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;
@@ -32,25 +32,25 @@
        </span>
      </div>

-      <hr class="section-separator" />
+      <hr class="section-separator" v-if="stats.issuedTimetables" />

-      <div class="info-stats">
-        <span class="badge stat-badge" v-if="stats.issuedTimetables">
+      <div class="info-stats" 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>
@@ -104,6 +104,5 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../../styles/variables.scss';
-@import '../../../styles/JournalSection.scss';
+@use '../../../styles/journal-section';
 </style>
@@ -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>
@@ -33,7 +33,7 @@
          <h1 class="option-title">{{ $t('options.search-title') }}</h1>
          <div class="search_content">
            <div class="search" v-for="(_, propName) in searchersValues" :key="propName">
-              <label v-if="propName == 'search-date'" for="search-date">{{
+              <label v-if="propName == 'search-date-from'" for="search-date">{{
                $t(`options.search-${optionsType}-date`)
              }}</label>

@@ -45,13 +45,13 @@
                  @focus="preventKeyDown = true"
                  @blur="preventKeyDown = false"
                  :placeholder="$t(`options.${propName}`)"
-                  :type="propName == 'search-date' ? 'date' : 'text'"
-                  :min="propName == 'search-date' ? '2022-02-01' : undefined"
+                  :type="propName.toString().startsWith('search-date') ? 'date' : 'text'"
+                  :min="propName.toString().startsWith('search-date') ? '2022-02-01' : undefined"
                  :id="`${propName}`"
                  :list="propName.toString()"
                />

-                <button class="search-exit" v-if="propName != '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"
@@ -188,14 +188,14 @@ export default defineComponent({
      if (!value || value == '') return;
      if (value.length < 3) return;

-      this.startSearchTimeout('driver', value);
+      if (this.showOptions) this.startSearchTimeout('driver', value);
    },

    async 'searchersValues.search-dispatcher'(value: string | undefined) {
      if (!value || value == '') return;
      if (value.length < 3) return;

-      this.startSearchTimeout('dispatcher', value);
+      if (this.showOptions) this.startSearchTimeout('dispatcher', value);
    }
  },

@@ -283,7 +283,6 @@ export default defineComponent({
    },

    searchConfirm() {
-      this.$emit('onSearchConfirm');
      this.handleRouteParams();
    },

@@ -301,6 +300,6 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/dropdown';
-@import '../../styles/dropdown_filters';
+@use '../../styles/dropdown';
+@use '../../styles/dropdown-filters';
 </style>
@@ -79,14 +79,12 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/dropdown.scss';
-@import '../../styles/dropdown_filters.scss';
-@import '../../styles/variables.scss';
+@use '../../styles/dropdown';
+@use '../../styles/dropdown-filters';

 .dropdown_wrapper.dropdown-align-right {
  left: auto;
  right: 0;
  max-width: 700px;
-  // max-width: 100%;
 }
 </style>
@@ -23,43 +23,24 @@

      <div class="g-separator"></div>

-      <div class="stock-specs">
-        <span class="badge" v-if="timetable.authorName">
+      <div class="timetable-specs">
+        <span class="badge specs-badge" v-if="timetable.authorName">
          <span>{{ $t('journal.dispatcher-name') }}</span>
          <span>{{ timetable.authorName }}</span>
        </span>

-        <span class="badge" v-if="timetable.maxSpeed">
+        <span class="badge specs-badge" v-if="timetable.trainMaxSpeed">
+          <span>{{ $t('journal.stock-timetable-speed') }}</span>
+          <span> {{ timetable.trainMaxSpeed }}km/h </span>
+        </span>
+
+        <span class="badge specs-badge" v-if="timetable.maxSpeed">
          <span>{{ $t('journal.stock-max-speed') }}</span>
          <span>{{ timetable.maxSpeed }}km/h</span>
        </span>
-
-        <span class="badge" v-if="timetable.stockLength">
-          <span>{{ $t('journal.stock-length') }}</span>
-          <span>
-            {{
-              currentHistoryIndex == 0
-                ? timetable.stockLength
-                : stockHistory[currentHistoryIndex].stockLength || timetable.stockLength
-            }}m
-          </span>
-        </span>
-
-        <span class="badge" v-if="timetable.stockMass">
-          <span>{{ $t('journal.stock-mass') }}</span>
-          <span>
-            {{
-              Math.floor(
-                (currentHistoryIndex == 0
-                  ? timetable.stockMass
-                  : stockHistory[currentHistoryIndex].stockMass || timetable.stockMass) / 1000
-              )
-            }}t
-          </span>
-        </span>
      </div>

-      <div class="stock-dangers" v-if="timetable.twr || timetable.skr">
+      <div class="stock-dangers" v-if="timetable.warningNotes">
        <div class="g-separator"></div>

        <b>{{ $t('journal.stock-dangers') }}:</b>
@@ -93,9 +74,40 @@
      <!-- Historia zmian w składzie -->
      <div v-if="timetable.stockString || stockHistory.length != 0">
        <div class="g-separator"></div>
+
        <b>{{ $t('journal.stock-preview') }}:</b>

-        <div class="stock-history" v-if="stockHistory.length > 1">
+        <div class="stock-specs" style="margin-top: 0.5em">
+          <span class="badge specs-badge" v-if="timetable.stockLength">
+            <span>{{ $t('journal.stock-length') }}</span>
+            <span>
+              {{
+                currentHistoryIndex == 0
+                  ? timetable.stockLength
+                  : stockHistory[currentHistoryIndex].stockLength || timetable.stockLength
+              }}m
+            </span>
+          </span>
+
+          <span class="badge specs-badge" v-if="timetable.stockMass">
+            <span>{{ $t('journal.stock-mass') }}</span>
+            <span>
+              {{
+                Math.floor(
+                  (currentHistoryIndex == 0
+                    ? timetable.stockMass
+                    : stockHistory[currentHistoryIndex].stockMass || timetable.stockMass) / 1000
+                )
+              }}t
+            </span>
+          </span>
+        </div>
+
+        <div class="stock-history">
+          <button class="btn btn--action" @click="copyStockToClipboard()">
+            <i class="fa-regular fa-copy"></i> {{ $t('journal.stock-copy') }}
+          </button>
+
          <button
            v-for="(sh, i) in stockHistory"
            :key="i"
@@ -128,6 +140,7 @@ import StockList from '../../Global/StockList.vue';
 import { API } from '../../../typings/api';
 import { RouteLocationRaw } from 'vue-router';
 import EntryStops from './EntryStops.vue';
+import { useI18n } from 'vue-i18n';

 export default defineComponent({
  components: { StockList, EntryStops },
@@ -146,7 +159,8 @@ export default defineComponent({
  },
  data() {
    return {
-      currentHistoryIndex: 0
+      currentHistoryIndex: 0,
+      i18n: useI18n()
    };
  },
  computed: {
@@ -167,6 +181,7 @@ export default defineComponent({
          };
        });
    },
+
    driverRouteLocation(): RouteLocationRaw | null {
      if (this.timetable.terminated) return null;
      return {
@@ -185,15 +200,33 @@ export default defineComponent({

    toggleExtraInfo() {
      this.$emit('toggleExtraInfo', this.timetable.id);
+    },
+
+    copyStockToClipboard() {
+      const currentStockString =
+        this.stockHistory[this.currentHistoryIndex]?.stockString ?? this.timetable.stockString;
+
+      if (!currentStockString) {
+        alert(this.i18n.t('journal.stock-clipboard-failure'));
+        return;
+      }
+
+      navigator.clipboard
+        .writeText(currentStockString)
+        .then(() => {
+          prompt(this.i18n.t('journal.stock-clipboard-success'), currentStockString);
+        })
+        .catch(() => {
+          alert(this.i18n.t('journal.stock-clipboard-failure'));
+        });
    }
  }
 });
 </script>

 <style lang="scss" scoped>
-@import '../../../styles/variables.scss';
-@import '../../../styles/responsive.scss';
-@import '../../../styles/badge.scss';
+@use '../../../styles/responsive';
+@use '../../../styles/badge';

 .details-body {
  margin-top: 0.5em;
@@ -216,22 +249,30 @@ 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;
  gap: 0.5em;
+}

-  .badge {
-    margin: 0;
+.specs-badge {
+  margin: 0;

-    span:last-child {
-      color: black;
-      background-color: $accentCol;
-    }
+  span:first-child {
+    color: white;
+    background-color: #666;
+    border-radius: 0.25em 0 0 0.25em;
+  }
+
+  span:last-child {
+    color: black;
+    background-color: var(--clr-primary);
+    border-radius: 0 0.25em 0.25em 0;
  }
 }

@@ -258,8 +299,8 @@ hr {
  }
 }

-@include smallScreen() {
-  .stock-specs {
+@include responsive.smallScreen{
+  .timetable-specs {
    justify-content: center;
  }

@@ -130,8 +130,8 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../../styles/responsive';
-@import '../../../styles/badge';
+@use '../../../styles/responsive';
+@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;
@@ -21,7 +21,7 @@
      >
    </span>

-    <span class="text--grayed" v-if="timetable.currentSceneryName">
+    <span class="entry-location" v-if="timetable.currentSceneryName">
      <b>
        {{ $t(`journal.${timetable.terminated ? 'last-seen-at' : 'currently-at'}`) }}
        {{ timetable.currentSceneryName.replace(/.[a-zA-Z0-9]+.sc/, '') }}
@@ -59,7 +59,7 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../../styles/responsive.scss';
+@use '../../../styles/responsive';

 .entry-status {
  display: flex;
@@ -67,8 +67,13 @@ export default defineComponent({
  flex-wrap: wrap;
  gap: 0.5em;

-  @include smallScreen() {
+  @include responsive.smallScreen{
    justify-content: center;
  }
 }
+
+.entry-location {
+  text-align: center;
+  color: #ccc;
+}
 </style>
@@ -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;
@@ -221,6 +221,10 @@ export default defineComponent({
 .stop-name {
  font-weight: bold;
  color: #ccc;
+
+  i {
+    display: none;
+  }
 }

 .stop-date {
@@ -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>
@@ -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;
  }
 }
@@ -107,10 +107,11 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../../styles/JournalSection.scss';
-@import '../../../styles/animations.scss';
+@use '../../../styles/animations';
+@use '../../../styles/journal-section';
+@use '../../../styles/responsive';

-@include smallScreen {
+@include responsive.smallScreen{
  .journal_item-info {
    text-align: center;
  }
@@ -1,10 +1,14 @@
 export namespace Journal {
-  export type DispatcherSearchKey = 'search-dispatcher' | 'search-station' | 'search-date';
+  export type DispatcherSearchKey =
+    | 'search-dispatcher'
+    | 'search-station'
+    | 'search-date-from'
+    | 'search-date-to';

  export type TimetableSearchKey =
    | 'search-driver'
    | 'search-train'
-    | 'search-date'
+    | 'search-date-from'
    | 'search-dispatcher'
    | 'search-issuedFrom'
    | 'search-terminatingAt'
@@ -80,4 +84,3 @@ export namespace Journal {
    isConfirmed: boolean;
  }
 }
-
@@ -148,8 +148,8 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-@import '../../styles/sceneryViewTables.scss';
+@use '../../styles/responsive';
+@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;
@@ -35,8 +35,7 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/variables.scss';
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';

 .info-header {
  margin-top: 1em;
@@ -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';
-@import '../../styles/badge.scss';
+@use '../../styles/responsive';
+@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;
 }
@@ -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>
@@ -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>
@@ -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;
@@ -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
-          v-for="route in oneWayRoutes"
-          :key="route.routeName"
-          @click="setActiveShowLength(route.routeName)"
-        >
+        <li v-for="route in oneWayRoutes" :key="route.routeName">
          <span :class="{ 'no-catenary': !route.isElectric, internal: route.isInternal }">
            {{ route.routeName }}</span
          >
          <span v-if="route.routeSpeed" class="speed">
-            {{
-              activeShowLength.includes(route.routeName)
-                ? route.routeLength + 'm'
-                : route.routeSpeed
-            }}
+            {{ route.routeSpeed }}
+          </span>
+          <span v-if="route.routeLength" class="length">
+            {{ (route.routeLength / 1000).toFixed(1) + 'km' }}
          </span>
          <span v-if="route.isRouteSBL" class="sbl">SBL</span>
        </li>
@@ -25,23 +28,24 @@
    </div>

    <div class="routes two-way" v-if="twoWayRoutes.length > 0">
-      <b>{{ $t('scenery.two-way-routes') }}</b>
+      <button
+        class="routes-btn"
+        @click="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
-          v-for="route in twoWayRoutes"
-          :key="route.routeName"
-          @click="setActiveShowLength(route.routeName)"
-        >
-          <span :class="{ 'no-catenary': !route.isElectric, internal: route.isInternal }">{{
-            route.routeName
-          }}</span>
-          <span v-if="route.routeSpeed" class="speed">
-            {{
-              activeShowLength.includes(route.routeName)
-                ? route.routeLength + 'm'
-                : route.routeSpeed
-            }}
+        <li v-for="route in twoWayRoutes" :key="route.routeName">
+          <span :class="{ 'no-catenary': !route.isElectric, internal: route.isInternal }">
+            {{ route.routeName }}
+          </span>
+          <span v-if="route.routeSpeed" class="speed">{{ route.routeSpeed }}</span>
+          <span v-if="route.routeLength" class="length">
+            {{ (route.routeLength / 1000).toFixed(1) + 'km' }}
          </span>
          <span v-if="route.isRouteSBL" class="sbl">SBL</span>
        </li>
@@ -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: {
-    setActiveShowLength(name: string) {
-      if (this.activeShowLength.includes(name))
-        this.activeShowLength.splice(this.activeShowLength.indexOf(name), 1);
-      else this.activeShowLength.push(name);
+  data() {
+    return {
+      showInternalSingleRoutes: false,
+      showInternalDoubleRoutes: false
+    };
+  },
+
+  mounted() {
+    if (StorageManager.getBooleanValue('showInternalDoubleRoutes')) {
+      this.showInternalDoubleRoutes = StorageManager.getBooleanValue('showInternalDoubleRoutes');
+    }
+
+    if (StorageManager.getBooleanValue('showInternalSingleRoutes')) {
+      this.showInternalSingleRoutes = StorageManager.getBooleanValue('showInternalSingleRoutes');
    }
  },

-  data() {
-    return {
-      activeShowLength: [] as string[]
-    };
+  methods: {
+    toggleRoutesVisibility(type: 'single' | 'double') {
+      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;
@@ -53,8 +53,6 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../../styles/variables.scss';
-
 ul {
  position: relative;
 }
@@ -18,9 +18,29 @@
        :key="train.id"
        :data-status="status"
      >
-        <router-link :to="train.driverRouteLocation" class="a-block">
-          <span class="user_train">{{ train.trainNo }}</span>
-          <span class="user_name">{{ train.driverName }}</span>
+        <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() - 60000 || !train.online)
+              "
+              class="fa-solid fa-user-slash"
+              style="color: lightcoral"
+              data-tooltip-type="BaseTooltip"
+              :data-tooltip-content="$t('app.tooltip-driver-offline')"
+            ></i>
+
+            <i
+              v-if="train.currentStationName.indexOf('.sc') != -1"
+              class="fa-solid fa-ban"
+              style="color: lightcoral"
+              data-tooltip-type="BaseTooltip"
+              :data-tooltip-content="$t('app.tooltip-scenery-offline')"
+            ></i>
+          </span>
        </router-link>
      </li>
    </transition-group>
@@ -66,8 +86,13 @@ export default defineComponent({
            this.station?.generalInfo?.checkpoints.includes(stop.stopNameRAW)
        );

+        const sceneryName =
+          train.currentStationName.indexOf('.sc') != -1
+            ? train.currentStationName.split(' ').slice(0, -1).join(' ')
+            : train.currentStationName;
+
        const status = stop
-          ? getTrainStopStatus(stop, train.currentStationName, this.onlineScenery!.name)
+          ? getTrainStopStatus(stop, sceneryName, this.onlineScenery!.name)
          : 'no-timetable';

        return {
@@ -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,
-            nextArrivalLine: ct.nextSceneryElement?.arrivalRouteExt ?? null,
-            departureLine: ct.timetablePathElement.departureRouteExt ?? null,
-            arrivingLine: ct.timetablePathElement.arrivalRouteExt ?? null,
-            prevStationName: ct.previousSceneryElement?.stationName ?? null,
-            nextStationName: ct.nextSceneryElement?.stationName ?? null,
+            prevElement: ct.previousSceneryElement,
+            nextElement: ct.nextSceneryElement,
+            currentElement: ct.timetablePathElement,
            status: trainStopStatus
          };
        })
@@ -330,9 +327,8 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-@import '../../styles/variables.scss';
-@import '../../styles/animations.scss';
+@use '../../styles/responsive';
+@use '../../styles/animations';

 .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;
  }
@@ -188,8 +188,8 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-@import '../../styles/sceneryViewTables.scss';
+@use '../../styles/responsive';
+@use '../../styles/scenery-history-table';

 .scenery-timetables-history {
  height: 100%;
@@ -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 } =
-        this.sceneryTimetableRow;
+      const { status, prevElement, currentElement, nextElement } = this.sceneryTimetableRow;

-      const prevDepartureIndicator = prevDepartureLine
-        ? `(${prevDepartureLine}) ${prevStationName}`
-        : '---';
-      const nextArrivalIndicator = nextArrivalLine
-        ? `(${nextArrivalLine}) ${nextStationName}`
+      const prevDepartureIndicator = prevElement?.departureRouteExt
+        ? `(${prevElement.departureRouteExt}) ${prevElement.stationName}`
        : '---';

+      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,
-            prevDepartureLine
+            prevStationName: prevElement?.stationName ?? '',
+            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
-            ? this.$t(`timetables.desc-${status}`, { nextStationName, nextArrivalLine })
+          stopStatusDescription = nextElement?.arrivalRouteExt
+            ? 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,
-            nextArrivalLine
-          });
+
+          if (!nextElement?.stationName) {
+            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,
-            nextArrivalLine
+            nextStationName: nextElement?.stationName,
+            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;
@@ -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;
-  nextArrivalLine: string | null;
-  departureLine: string | null;
-  arrivingLine: string | null;
-  prevStationName: string | null;
-  nextStationName: string | null;
+  prevElement: TimetablePathElement | null;
+  nextElement: TimetablePathElement | null;
+  currentElement: TimetablePathElement;
  status: StopStatus;
 }
@@ -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);
    }
  }
 }
@@ -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';
-@import '../../styles/card';
-@import '../../styles/animations';
-@import '../../styles/variables';
+@use '../../styles/responsive';
+@use '../../styles/card';
+@use '../../styles/animations';

 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>
@@ -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') }} -->
-      <span>STATYSTYKI</span>
+      {{ $t('station-stats.stats-button') }}
    </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">
-            <li>
-              <span>
-                {{ $t('station-stats.u-factor') }}
-                <a
-                  href="https://td2.info.pl/dyskusje/wspolczynnik-ugla-czy-to-ma-sens/msg81011/#msg81011"
-                  target="_blank"
-                  :data-tooltip="$t('station-stats.u-factor-tooltip')"
-                  >(?)</a
-                >:
-              </span>
-              <b class="u-factor" :style="calculateFactorStyle()">
-                {{ uFactor.toFixed(2) }}
-              </b>
-            </li>
-            <li>
-              {{ $t('station-stats.avg-timetable-count') }}
-              <b>{{ avgTimetableCount.toFixed(2) }}</b>
-            </li>
-            <li>
-              {{ $t('station-stats.single-track-count') }}
-              <b>{{ trackCount.oneWay }}</b> (<b>{{ trackCount.oneWayElectric }} ⚡</b>)
-            </li>
-            <li>
-              {{ $t('station-stats.double-track-count') }}
-              <b>{{ trackCount.twoWay }}</b>
-              (<b>{{ trackCount.twoWayElectric }} ⚡</b>)
-            </li>
-            <li>
-              {{ $t('station-stats.cross-sceneries') }}
-              <b>{{ trackCount.crossTrack }}</b> (<b>{{ trackCount.crossTrackElectric }} ⚡</b>)
-            </li>
-            <li>
-              {{ $t('station-stats.open-spawns') }} <b>{{ spawnCount.passenger }}</b> - PAS /
-              <b>{{ spawnCount.freight }}</b> - TOW / <b>{{ spawnCount.loco }}</b> - LUZ /
-              <b>{{ spawnCount.all }}</b> - ALL
-            </li>
-          </ul>
+          <div v-if="uFactor > -1 || avgTimetableCount > -1 || trackCount.all > 0">
+            <div class="badges-container">
+              <div class="badge stat-badge">
+                <span>
+                  {{ $t('station-stats.u-factor') }}
+                  <a
+                    href="https://td2.info.pl/dyskusje/wspolczynnik-ugla-czy-to-ma-sens/msg81011/#msg81011"
+                    target="_blank"
+                    :data-tooltip="$t('station-stats.u-factor-tooltip')"
+                    >(?)</a
+                  >:
+                </span>
+
+                <span>
+                  <b class="u-factor" :style="calculateFactorStyle()">
+                    {{ uFactor >= 0 ? uFactor.toFixed(2) : '---' }}
+                  </b>
+                </span>
+              </div>
+
+              <div class="badge stat-badge">
+                <span>{{ $t('station-stats.avg-timetable-count') }}</span>
+                <span>
+                  <b>{{ avgTimetableCount >= 0 ? avgTimetableCount.toFixed(2) : '---' }}</b>
+                </span>
+              </div>
+            </div>
+
+            <hr style="margin: 0.5em 0" />
+
+            <div class="badges-container">
+              <div class="badge stat-badge">
+                <span>{{ $t('station-stats.single-track-count') }}</span>
+                <span>
+                  <b> {{ trackCount.oneWay }}</b> (<b>{{ trackCount.oneWayElectric }} ⚡</b>)
+                </span>
+              </div>
+
+              <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';
-@import '../../styles/badge.scss';
+@use '../../styles/dropdown';
+@use '../../styles/badge';
+@use '../../styles/responsive';

-h1 img {
+h1.stats-title img {
  vertical-align: text-bottom;
 }

-h3 {
-  margin: 0.5em 0;
+.badges-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
 }

 .u-factor {
@@ -219,19 +273,14 @@ h3 {
  }
 }

-ul.stats-list {
-  list-style: disc;
-  padding-left: 1em;
-  margin-top: 1em;
-
-  & > li {
-    margin: 0.25em 0;
-  }
+.no-data {
+  font-size: 1.1em;
+  color: #ccc;
 }

-@include smallScreen {
-  .filter-button span {
-    display: none;
+@include responsive.smallScreen {
+  h1.stats-title {
+    text-align: center;
  }
 }
 </style>
@@ -400,9 +400,10 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-@import '../../styles/variables.scss';
-@import '../../styles/icons.scss';
+@use '../../styles/responsive';
+@use '../../styles/icons';
+
+@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 {
@@ -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;

@@ -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>
@@ -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 {
@@ -1,23 +1,18 @@
 <template>
  <div class="tooltip-content">
-    <div v-if="imageState == 'loading'" class="loading-info">
-      {{ $t('vehicle-preview.loading') }}
+    <div class="image-box">
+      <Loading v-if="imageState == 'loading'" class="loading-info" />
+
+      <img
+        v-if="tooltipStore.type"
+        @load="onImageLoad"
+        @error="onImageError"
+        width="300"
+        height="176"
+        :src="`https://stacjownik.spythere.eu/static/images/${vehicleName}--300px.jpg`"
+      />
    </div>

-    <div v-if="imageState == 'error'">{{ $t('vehicle-preview.error') }}</div>
-
-    <img
-      v-if="tooltipStore.type"
-      @load="onImageLoad"
-      @error="onImageError"
-      width="300"
-      height="176"
-      class="rounded-md w-full h-auto"
-      :src="`https://static.spythere.eu/images/${vehicleName}--300px.jpg`"
-    />
-
-    <div v-if="imageState == 'error'" class="error-placeholder"></div>
-
    <div class="vehicle-name">
      {{ vehicleName.replace(/_/g, ' ') }}
      <span v-if="vehicleCargo">({{ vehicleCargo.id }})</span>
@@ -35,8 +30,11 @@
 import { defineComponent } from 'vue';
 import { useTooltipStore } from '../../store/tooltipStore';
 import { useApiStore } from '../../store/apiStore';
+import Loading from '../Global/Loading.vue';

 export default defineComponent({
+  components: { Loading },
+
  data() {
    return {
      tooltipStore: useTooltipStore(),
@@ -61,9 +59,12 @@ export default defineComponent({
    },

    onImageError(e: Event) {
+      if (!e.target || !(e.target instanceof HTMLImageElement) || this.imageState == 'error')
+        return;
+
      this.imageState = 'error';

-      (e.target as HTMLElement).style.display = 'none';
+      e.target.src = '/images/no-vehicle-image.png';
    }
  },

@@ -98,10 +99,16 @@ export default defineComponent({
  border-radius: 0.5em;
 }

+.image-box {
+  position: relative;
+  min-height: 170px;
+}
+
 .loading-info {
  position: absolute;
  left: 50%;
-  transform: translateX(-50%);
+  top: 35%;
+  transform: translate(-50%, -50%);
 }

 img {
@@ -4,10 +4,12 @@
    :data-minor="stop.isSBL || (stop.nameRaw.endsWith(', po') && !stop.duration)"
  >
    <router-link v-if="/(, podg$|<strong>)/.test(stop.nameHtml)" :to="sceneryHref">
-      <span class="stop-name" v-html="stop.nameHtml"></span>
+      <b class="stop-name">
+        {{ stop.nameRaw }}
+      </b>
    </router-link>

-    <span v-else class="stop-name" v-html="stop.nameHtml"></span>
+    <span v-else class="stop-name">{{ stop.nameRaw }}</span>

    <span
      v-if="stop.position != 'begin'"
@@ -45,7 +47,10 @@
    <span
      v-if="
        stop.position != 'end' &&
-        (stop.duration != 0 || stop.status == 'stopped' || stop.departureDelay != stop.arrivalDelay)
+        (stop.duration != 0 ||
+          stop.position == 'begin' ||
+          stop.status == 'stopped' ||
+          stop.departureDelay != stop.arrivalDelay)
      "
      class="date departure"
      :data-status-delayed="stop.departureDelay > 0"
@@ -68,16 +73,16 @@
 </template>

 <script lang="ts">
-import { PropType, defineComponent } from 'vue';
+import { PropType, defineComponent, stop } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
-import { TrainScheduleStop } from './typings';
+import { TrainSchedulePoint } from './typings';

 export default defineComponent({
  mixins: [dateMixin],

  props: {
    stop: {
-      type: Object as PropType<TrainScheduleStop>,
+      type: Object as PropType<TrainSchedulePoint>,
      required: true
    }
  },
@@ -139,6 +144,10 @@ s {
      color: #aaa;
      padding: 0;
    }
+
+    i {
+      display: none;
+    }
  }

  .stop {
@@ -1,216 +1,198 @@
 <template>
  <div class="train-info" :data-extended="extended">
-    <section class="train-general">
-      <div class="general-top-bar">
-        <div class="top-bar-header">
-          <b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
-          <span class="timetable-id" v-if="train.timetableData">
-            #{{ train.timetableData.timetableId }}
-          </span>
+    <div class="general-top-bar">
+      <div class="top-bar-header">
+        <b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
+        <span class="timetable-id" v-if="train.timetableData">
+          #{{ train.timetableData.timetableId }}
+        </span>

-          <span
-            class="train-badge twr"
-            v-if="train.timetableData?.TWR"
-            data-tooltip-type="BaseTooltip"
-            :data-tooltip-content="$t('warnings.TWR')"
-          >
-            TWR
-          </span>
+        <span
+          class="train-badge twr"
+          v-if="train.timetableData?.TWR"
+          data-tooltip-type="BaseTooltip"
+          :data-tooltip-content="$t('warnings.TWR')"
+        >
+          TWR
+        </span>

-          <span
-            class="train-badge tn"
-            v-if="train.timetableData?.hasDangerousCargo"
-            data-tooltip-type="BaseTooltip"
-            :data-tooltip-content="$t('warnings.TN')"
-          >
-            TN
-          </span>
+        <span
+          class="train-badge tn"
+          v-if="train.timetableData?.hasDangerousCargo"
+          data-tooltip-type="BaseTooltip"
+          :data-tooltip-content="$t('warnings.TN')"
+        >
+          TN
+        </span>

-          <span
-            class="train-badge pn"
-            v-if="train.timetableData?.hasExtraDeliveries"
-            data-tooltip-type="BaseTooltip"
-            :data-tooltip-content="$t('warnings.PN')"
-          >
-            PN
-          </span>
+        <span
+          class="train-badge pn"
+          v-if="train.timetableData?.hasExtraDeliveries"
+          data-tooltip-type="BaseTooltip"
+          :data-tooltip-content="$t('warnings.PN')"
+        >
+          PN
+        </span>

+        <b
+          v-if="train.timetableData"
+          data-tooltip-type="BaseTooltip"
+          :data-tooltip-content="getCategoryExplanation(train.timetableData.category)"
+          class="text--primary tooltip-help"
+        >
+          {{ train.timetableData.category }}
+        </b>
+
+        <b class="train-number">{{ train.trainNo }}</b>
+
+        <span>&bull;</span>
+
+        <div class="train-driver">
          <b
-            v-if="train.timetableData"
-            data-tooltip-type="BaseTooltip"
-            :data-tooltip-content="getCategoryExplanation(train.timetableData.category)"
-            class="text--primary tooltip-help"
+            class="level-badge driver"
+            :style="calculateExpStyle(train.driverLevel, train.isSupporter)"
          >
-            {{ train.timetableData.category }}
+            {{ train.driverLevel < 2 ? 'L' : `${train.driverLevel}` }}
          </b>

-          <b class="train-number">{{ train.trainNo }}</b>
+          <b
+            v-if="apiStore.donatorsData.includes(train.driverName)"
+            data-tooltip-type="DonatorTooltip"
+            :data-tooltip-content="$t('donations.driver-message')"
+          >
+            {{ train.driverName }}
+            <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
+          </b>

-          <span>&bull;</span>
-
-          <div class="train-driver">
-            <b
-              class="level-badge driver"
-              :style="calculateExpStyle(train.driverLevel, train.isSupporter)"
-            >
-              {{ train.driverLevel < 2 ? 'L' : `${train.driverLevel}` }}
-            </b>
-
-            <b
-              v-if="apiStore.donatorsData.includes(train.driverName)"
-              data-tooltip-type="DonatorTooltip"
-              :data-tooltip-content="$t('donations.driver-message')"
-            >
-              {{ train.driverName }}
-              <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
-            </b>
-
-            <span v-else>{{ train.driverName }}</span>
-          </div>
+          <span v-else>{{ train.driverName }}</span>
        </div>
      </div>
+    </div>

-      <div class="general-timetable" v-if="train.timetableData">
-        <strong>{{ train.timetableData.route.replace('|', ' - ') }}</strong>
-        <span
-          v-if="getSceneriesWithComments(train.timetableData).length > 0"
-          data-tooltip-type="BaseTooltip"
-          :data-tooltip-content="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(
-            train.timetableData
-          )})`"
-        >
-          <img class="image-warning" src="/images/icon-warning.svg" />
-        </span>
-      </div>
-
-      <hr style="margin: 0.25em 0" />
-
-      <div class="general-stops" v-if="train.timetableData">
-        <span v-if="train.timetableData.followingStops.length > 2">
-          {{ $t('trains.via-title') }}
-          <span v-html="getTrainStopsHtml(train.timetableData.followingStops)"></span>
-        </span>
-      </div>
-
-      <div class="general-status">
-        <div class="status-timetable-progress" v-if="train.timetableData">
-          <ProgressBar :progressPercent="confirmedPercentage(train.timetableData.followingStops)" />
-
-          <span class="progress-distance">
-            <span>{{ currentDistance(train.timetableData.followingStops) }} km</span>
-            <span>/</span>
-            <span class="text--primary">{{ train.timetableData.routeDistance }} km </span>
-            <span>|</span>
-            <span v-html="currentDelay(train.timetableData.followingStops)"></span>
-          </span>
-        </div>
-
-        <div class="status-badges">
-          <div v-if="!train.currentStationHash" class="train-badge offline">
-            <img src="/images/icon-offline.svg" alt="offline train icon" />
-            {{ $t('trains.scenery-offline') }}
-          </div>
-
-          <div v-if="!train.online" class="train-badge offline">
-            <img src="/images/icon-offline.svg" alt="offline train icon" />
-            Offline {{ lastSeenMessage(train.lastSeen) }}
-          </div>
-        </div>
-      </div>
-
-      <div class="general-stats" v-if="extended">
-        <div>
-          <img src="/images/icon-length.svg" alt="length icon" />
-          {{ train.length }}m
-        </div>
-
-        <div>
-          <img src="/images/icon-mass.svg" alt="mass icon" />
-          {{ (train.mass / 1000).toFixed(1) }}t
-        </div>
-
-        <div>
-          <img src="/images/icon-speed.svg" alt="speed icon" />
-          {{ train.speed }} km/h
-
-          <span v-if="stockSpeedLimit != Infinity">
-            &bull;
-            <em
-              class="text--grayed"
-              style="text-decoration: underline dotted"
-              tabindex="0"
-              :data-tooltip="$t('trains.vmax-tooltip')"
-            >
-              {{ stockSpeedLimit }} km/h
-            </em>
-          </span>
-        </div>
-      </div>
-
-      <div class="text--grayed" style="margin-top: 0.25em">
-        {{ displayTrainPosition(train) }}
-      </div>
-
-      <div
-        class="train-dangers"
-        v-if="extended && train.timetableData && train.timetableData.warningNotes"
+    <div class="general-timetable" v-if="train.timetableData">
+      <strong>{{ train.timetableData.route.replace('|', ' - ') }}</strong>
+      <span
+        v-if="getSceneriesWithComments(train.timetableData).length > 0"
+        data-tooltip-type="BaseTooltip"
+        :data-tooltip-content="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(
+          train.timetableData
+        )})`"
      >
-        <div class="dangers-badges">
-          <div v-if="train.timetableData?.TWR">
-            <div class="train-badge twr">TWR</div>
-            - {{ $t('warnings.TWR') }}
-          </div>
+        <img class="image-warning" src="/images/icon-warning.svg" />
+      </span>
+    </div>

-          <div v-if="train.timetableData?.hasDangerousCargo">
-            <div class="train-badge tn">TN</div>
-            - {{ $t('warnings.TN') }}
-          </div>
+    <hr style="margin: 0.25em 0" />

-          <div v-if="train.timetableData?.hasExtraDeliveries">
-            <div class="train-badge pn">PN</div>
-            - {{ $t('warnings.PN') }}
-          </div>
+    <div class="general-stops" v-if="train.timetableData">
+      <span v-if="train.timetableData.followingStops.length > 2">
+        {{ $t('trains.via-title') }}
+        <span v-html="getTrainStopsHtml(train.timetableData.followingStops)"></span>
+      </span>
+    </div>
+
+    <div class="general-status">
+      <div class="status-timetable-progress" v-if="train.timetableData">
+        <ProgressBar :progressPercent="confirmedPercentage(train.timetableData.followingStops)" />
+
+        <span class="progress-distance">
+          <span>{{ currentDistance(train.timetableData.followingStops) }} km</span>
+          <span>/</span>
+          <span class="text--primary">{{ train.timetableData.routeDistance }} km </span>
+          <span>|</span>
+          <span v-html="currentDelay(train.timetableData.followingStops)"></span>
+        </span>
+      </div>
+
+      <div class="status-badges">
+        <div v-if="!train.currentStationHash" class="train-badge offline">
+          <i class="fa-solid fa-ban"></i>
+          {{ $t('trains.scenery-offline') }}
        </div>

-        <div class="dangers-notes">
-          <h4>{{ $t('warnings.header-title') }}</h4>
-          <p>
-            <i>{{ train.timetableData?.warningNotes }}</i>
-          </p>
+        <div v-if="!train.online" class="train-badge offline">
+          <i class="fa-solid fa-user-slash"></i>
+          Offline {{ lastSeenMessage(train.lastSeen) }}
        </div>
      </div>
-    </section>
+    </div>

-    <section class="train-stats" v-if="!extended">
-      <StockList :trainStockList="train.stockList" :tractionOnly="true" />
+    <div class="general-stats" v-if="extended">
+      <div>
+        <img src="/images/icon-length.svg" alt="length icon" />
+        {{ train.length }}m
+      </div>

      <div>
-        <span>{{ train.speed }}km/h</span>
+        <img src="/images/icon-mass.svg" alt="mass icon" />
+        {{ (train.mass / 1000).toFixed(1) }}t
+      </div>

-        <div>
-          <span> {{ train.length }}m</span>
+      <div>
+        <img src="/images/icon-speed.svg" alt="speed icon" />
+        {{ train.speed }} km/h
+
+        <span v-if="stockSpeedLimit != Infinity">
          &bull;
-          <span> {{ (train.mass / 1000).toFixed(1) }}t</span>
-          <span v-if="train.stockList.length > 1">
-            &bull;
-            {{ $t('trains.cars') }}: {{ train.stockList.length - 1 }}
-          </span>
+          <em
+            class="text--grayed"
+            style="text-decoration: underline dotted"
+            tabindex="0"
+            :data-tooltip="$t('trains.vmax-tooltip')"
+          >
+            vMax:
+            {{ stockSpeedLimit }} km/h
+          </em>
+        </span>
+      </div>
+    </div>
+
+    <div class="text--grayed" style="margin-top: 0.25em">
+      {{ displayTrainPosition(train) }}
+    </div>
+
+    <div
+      class="train-dangers"
+      v-if="extended && train.timetableData && train.timetableData.warningNotes"
+    >
+      <div class="dangers-badges">
+        <div v-if="train.timetableData?.TWR">
+          <div class="train-badge twr">TWR</div>
+          - {{ $t('warnings.TWR') }}
+        </div>
+
+        <div v-if="train.timetableData?.hasDangerousCargo">
+          <div class="train-badge tn">TN</div>
+          - {{ $t('warnings.TN') }}
+        </div>
+
+        <div v-if="train.timetableData?.hasExtraDeliveries">
+          <div class="train-badge pn">PN</div>
+          - {{ $t('warnings.PN') }}
        </div>
      </div>
-    </section>
+
+      <div class="dangers-notes">
+        <h4>{{ $t('warnings.header-title') }}</h4>
+        <p>
+          <i>{{ train.timetableData?.warningNotes }}</i>
+        </p>
+      </div>
+    </div>
  </div>
 </template>

 <script lang="ts">
 import { defineComponent } from 'vue';
-import styleMixin from '../../mixins/styleMixin';
-import trainInfoMixin from '../../mixins/trainInfoMixin';
-import ProgressBar from '../Global/ProgressBar.vue';
 import { useMainStore } from '../../store/mainStore';
 import { useApiStore } from '../../store/apiStore';
-import StockList from '../Global/StockList.vue';
 import { Train } from '../../typings/common';
+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 default defineComponent({
  mixins: [trainInfoMixin, styleMixin, trainCategoryMixin],
@@ -235,13 +217,39 @@ export default defineComponent({

  computed: {
    stockSpeedLimit() {
-      return this.train.stockList.reduce((acc, stockName) => {
-        const vehicleSpeed =
-          this.apiStore.vehiclesData?.find((v) => v.name == stockName.split(':')[0])?.group.speed ??
-          300;
+      let isPassenger = true;
+
+      const vehicleMaxSpeed = this.train.stockList.reduce((acc, stockName) => {
+        const vehicleData = this.apiStore.vehiclesData?.find(
+          (v) => v.name == stockName.split(':')[0]
+        );
+
+        if (!vehicleData) return acc;
+        if (vehicleData.type == 'wagon-freight') isPassenger = false;
+
+        const vehicleSpeed = vehicleData.group.speed;

        return Math.min(vehicleSpeed, acc);
-      }, 300);
+      }, Infinity);
+
+      const headLoco = this.train.stockList[0].slice(0, this.train.stockList[0].indexOf('-'));
+
+      if (speedLimits[headLoco] === undefined) return vehicleMaxSpeed;
+
+      if (this.train.stockList.length == 1) return speedLimits[headLoco]['none'];
+
+      const speedTable: Record<string, number> =
+        speedLimits[headLoco][isPassenger ? 'passenger' : 'cargo'];
+
+      if (!speedTable) return vehicleMaxSpeed;
+
+      const massKey = Object.keys(speedTable).findLast(
+        (massKey) => this.train.mass >= Number(massKey)
+      );
+
+      const massMaxSpeed = massKey ? speedTable[massKey] : Infinity;
+
+      return Math.min(massMaxSpeed, vehicleMaxSpeed);
    },
    journalRouteLocation() {
      return {
@@ -256,8 +264,7 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-@import '../../styles/badge.scss';
+@use '../../styles/badge';

 .image-warning {
  height: 1em;
@@ -265,17 +272,6 @@ export default defineComponent({
  vertical-align: middle;
 }

-.train-stats {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  flex-direction: column;
-  text-align: center;
-
-  line-height: 1.5em;
-}
-
 .train-dangers {
  margin-top: 0.5em;
 }
@@ -299,15 +295,10 @@ export default defineComponent({
 }

 .train-info {
-  display: grid;
-  grid-template-columns: 2fr 1fr;
-  grid-template-rows: 1fr;
-
-  &[data-extended='true'] {
-    grid-template-columns: 1fr;
-  }
-
-  padding: 1em;
+  display: flex;
+  flex-direction: column;
+  font-size: 1em;
+  gap: 0.25em;

  background-color: #1a1a1a;
  gap: 0.5em;
@@ -337,12 +328,6 @@ export default defineComponent({
  padding: 0 0.25em;
 }

-.train-general {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25em;
-}
-
 .general-stops {
  font-size: 0.8em;
 }
@@ -419,11 +404,4 @@ export default defineComponent({
  display: flex;
  gap: 0.25em;
 }
-
-@include smallScreen() {
-  .train-info {
-    grid-template-columns: 1fr;
-    gap: 1em 0;
-  }
-}
 </style>
@@ -24,31 +24,26 @@
                @blur="preventKeyDown = false"
                :placeholder="$t(`options.search-train`)"
              />
-              <button class="search-exit">
-                <img
-                  src="/images/icon-exit.svg"
-                  alt="Trains search clear icon"
-                  @click="onInputClear('train')"
-                />
+              <button class="btn btn--action search-exit" @click="onInputClear('train')">
+                <img src="/images/icon-exit.svg" alt="Trains search clear icon" />
              </button>
            </div>

            <div class="search-box">
-              <input
-                v-model="searchedDriver"
+              <select
                class="search-input"
-                id="driver-search"
-                name="driver-search"
-                @focus="preventKeyDown = true"
-                @blur="preventKeyDown = false"
-                :placeholder="$t(`options.search-driver`)"
-              />
-              <button class="search-exit">
-                <img
-                  src="/images/icon-exit.svg"
-                  alt="Driver search clear icon"
-                  @click="onInputClear('driver')"
-                />
+                name="active-trains"
+                id="active-trains"
+                v-model="searchedDriver"
+              >
+                <option value="">{{ $t('options.search-driver') }}</option>
+                <option v-for="driverName in activeDriverNames" :value="driverName">
+                  {{ driverName }}
+                </option>
+              </select>
+
+              <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));
    }
  },

@@ -178,6 +185,12 @@ export default defineComponent({
      this.trainFilterList.forEach((filter) => {
        filter.isActive = true;
      });
+
+      this.sorterActive.id = 'routeDistance';
+      this.sorterActive.dir = -1;
+
+      this.searchedDriver = '';
+      this.searchedTrain = '';
    },

    onInputClear(id: 'driver' | 'train') {
@@ -189,8 +202,8 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/dropdown.scss';
-@import '../../styles/dropdown_filters.scss';
+@use '../../styles/dropdown';
+@use '../../styles/dropdown-filters';

 .search_content > div {
  margin: 0.5em auto;
@@ -1,7 +1,5 @@
 <template>
-  <div class="train-schedule" @click="toggleShowState">
-    <StockList :trainStockList="train.stockList" />
-
+  <div class="train-schedule">
    <div class="schedule-wrapper" v-if="train.timetableData">
      <div class="stops">
        <div
@@ -9,11 +7,13 @@
          :key="i"
          class="stop"
          :data-status="stop.status"
+          :data-sbl="stop.isSBL && stop.sceneryName == scheduleStops[i + 1]?.sceneryName"
          :data-position="stop.position"
          :data-delayed="stop.departureDelay > 0"
          :data-stop-type="stop.type"
-          :data-minor-stop-active="stop.isActive"
-          :data-last-confirmed="stop.isLastConfirmed"
+          :data-is-active="stop.isActive"
+          :data-track-count-departure="stop.departureLineInfo?.routeTracks ?? 2"
+          :data-track-count-arrival="stop.arrivalLineInfo?.routeTracks ?? 2"
        >
          <span class="stop_info">
            <span class="distance">
@@ -44,17 +44,20 @@
              </div>

              <!-- Routes  -->
+
              <span
                v-if="
                  stop.departureLine &&
-                  scheduleStops[i + 1] != undefined &&
-                  !/-|_|(^it\d+)|(^sbl)/gi.test(stop.departureLine)
+                  (scheduleStops[i + 1]?.arrivalLineInfo?.routeSpeed !=
+                    stop.arrivalLineInfo?.routeSpeed ||
+                    stop.sceneryName != scheduleStops[i + 1]?.sceneryName)
                "
              >
                <div class="scenery-route">
                  <span>{{ stop.departureLine }}</span>
+
                  <span v-if="stop.departureLineInfo">
-                    | {{ stop.departureLineInfo.routeSpeed }}
+                    <span> | {{ stop.departureLineInfo.routeSpeed }}</span>

                    <img
                      :src="
@@ -62,7 +65,7 @@
                          ? '/images/icon-catenary.svg'
                          : '/images/icon-we4a.png'
                      "
-                      width="10"
+                      width="14"
                      data-tooltip-type="BaseTooltip"
                      :data-tooltip-content="
                        $t(
@@ -74,7 +77,7 @@
                    <img
                      v-if="stop.departureLineInfo.isRouteSBL"
                      src="/images/icon-sbl-transparent.svg"
-                      width="10"
+                      width="14"
                      data-tooltip-type="BaseTooltip"
                      :data-tooltip-content="$t('trains.sbl-tooltip')"
                    />
@@ -86,35 +89,44 @@
                  class="scenery-change-name"
                >
                  <span>{{ scheduleStops[i + 1].sceneryName }}</span>
-                  <span v-if="stop.departureLineInfo?.routeTracks == 1"> &UpDownArrow;</span>
-                  <span v-else> &DownArrowUpArrow;</span>
+
+                  <i
+                    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')"
+                    style="color: salmon; margin-left: 0.25em"
+                  ></i>
                </div>

-                <div class="scenery-route">
+                <div
+                  class="scenery-route"
+                  v-if="stop.sceneryName != scheduleStops[i + 1]?.sceneryName"
+                >
                  <span> {{ scheduleStops[i + 1].arrivalLine }}</span>

                  <span v-if="scheduleStops[i + 1].arrivalLineInfo">
-                    | {{ scheduleStops[i + 1].arrivalLineInfo!.routeSpeed }}
+                    <span> | {{ scheduleStops[i + 1].arrivalLineInfo!.routeSpeed }} </span>

                    <img
                      :src="
-                        scheduleStops[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.${!scheduleStops[i + 1].arrivalLineInfo!.isElectric ? 'no-' : ''}catenary-tooltip`
+                          `trains.${!scheduleStops[i + 1].arrivalLineInfo?.isElectric ? 'no-' : ''}catenary-tooltip`
                        )
                      "
-                      width="10"
+                      width="14"
                    />

                    <img
                      v-if="scheduleStops[i + 1].arrivalLineInfo!.isRouteSBL"
                      src="/images/icon-sbl-transparent.svg"
-                      width="10"
+                      width="14"
                      data-tooltip-type="BaseTooltip"
                      :data-tooltip-content="$t('trains.sbl-tooltip')"
                    />
@@ -136,8 +148,8 @@ import StopLabel from './StopLabel.vue';
 import StockList from '../Global/StockList.vue';
 import { useMainStore } from '../../store/mainStore';
 import { useApiStore } from '../../store/apiStore';
-import { StationRoutesInfo, Train } from '../../typings/common';
-import { TrainScheduleStop } from './typings';
+import { StationRoutesInfo, TimetablePathElement, Train } from '../../typings/common';
+import { TrainSchedulePoint } from './typings';

 export default defineComponent({
  components: { StopLabel, StockList },
@@ -159,68 +171,166 @@ export default defineComponent({
    };
  },

+  methods: {
+    getPathSceneryData(pathEl: TimetablePathElement) {
+      const sceneryData =
+        this.store.stationList?.find((sc) => sc.name == pathEl.stationName) ?? null;
+
+      if (!sceneryData || !sceneryData.generalInfo) return null;
+
+      const activeScenery = this.apiStore.activeData?.activeSceneries?.find(
+        (sc) => sc.stationName == pathEl.stationName
+      );
+
+      const arrivalLineData = pathEl.arrivalRouteExt
+        ? (sceneryData.generalInfo.routes.all.find(
+            (rt) => rt.routeName == pathEl.arrivalRouteExt
+          ) ?? null)
+        : null;
+
+      const departureLineData = pathEl.departureRouteExt
+        ? (sceneryData.generalInfo.routes.all.find(
+            (rt) => rt.routeName == pathEl.departureRouteExt
+          ) ?? null)
+        : null;
+
+      return {
+        generalInfo: sceneryData.generalInfo,
+        isOnline:
+          activeScenery &&
+          (activeScenery.isOnline == 1 || activeScenery.lastSeen >= Date.now() - 60000),
+        arrivalLineData,
+        departureLineData
+      };
+    }
+  },
+
  computed: {
-    scheduleStops(): TrainScheduleStop[] {
+    scheduleStops() {
      if (!this.train.timetableData) return [];

-      const { timetablePath } = this.train.timetableData;
+      const { timetablePath, followingStops } = this.train.timetableData;
+
+      const stopRows: TrainSchedulePoint[] = [];
+
      let currentPathIndex = 0;
+      let currentPath = timetablePath[0];

-      return (
-        this.train.timetableData?.followingStops.map((stop, i, arr) => {
-          const isExternal =
-            i < arr.length - 1 &&
-            stop.departureLine === timetablePath[currentPathIndex].departureRouteExt;
+      let pathData = this.getPathSceneryData(currentPath);

-          const sceneryName = timetablePath[currentPathIndex].stationName;
-          const sceneryInfo = this.apiStore.sceneryData.find((st) => st.name == sceneryName);
+      let arrivalLineInfo: StationRoutesInfo | null = null;
+      let departureLineInfo: StationRoutesInfo | null = null;

-          const arrivalLineInfo = sceneryInfo?.routesInfo.find(
-            (r) => r.routeName == stop.arrivalLine
-          );
+      let isActive = false;

-          const departureLineInfo = sceneryInfo?.routesInfo.find(
-            (r) => r.routeName == stop.departureLine
-          );
+      if (pathData?.departureLineData) {
+        // arrivalLineInfo = pathData.departureLineData;
+        departureLineInfo = pathData.departureLineData;
+      }

-          if (isExternal) currentPathIndex++;
+      for (const stop of followingStops) {
+        let isExternal = false;

-          return {
-            nameHtml: stop.stopName,
-            nameRaw: stop.stopNameRAW,
+        if (stop.arrivalLine === currentPath.arrivalRouteExt) {
+          isExternal = true;

-            arrivalScheduled: stop.arrivalTimestamp,
-            arrivalReal: stop.arrivalRealTimestamp,
+          departureLineInfo = pathData?.arrivalLineData ?? null;

-            departureScheduled: stop.departureTimestamp,
-            departureReal: stop.departureRealTimestamp,
+          if (pathData?.arrivalLineData) {
+            arrivalLineInfo = pathData.arrivalLineData;
+          }
+        }

-            departureDelay: stop.departureDelay,
-            arrivalDelay: stop.arrivalDelay,
+        let correctedDepartureLineData: StationRoutesInfo | null = null;

-            duration: stop.stopTime,
+        const internalRouteInfo = stop.departureLine
+          ? pathData?.generalInfo.routes.all.find(
+              (route) => route.isInternal && route.routeName == stop.departureLine
+            )
+          : undefined;

-            comments: stop.comments ?? null,
+        if (internalRouteInfo) {
+          correctedDepartureLineData = internalRouteInfo;
+          departureLineInfo = internalRouteInfo;
+        }

-            arrivalLine: stop.arrivalLine,
-            departureLine: stop.departureLine,
+        let rowData: TrainSchedulePoint = {
+          nameHtml: stop.stopName,
+          nameRaw: stop.stopNameRAW,

-            arrivalLineInfo: arrivalLineInfo,
-            departureLineInfo: departureLineInfo,
+          arrivalScheduled: stop.arrivalTimestamp,
+          arrivalReal: stop.arrivalRealTimestamp,

-            isExternal,
+          departureScheduled: stop.departureTimestamp,
+          departureReal: stop.departureRealTimestamp,

-            type: stop.stopType,
-            distance: stop.stopDistance,
-            isActive: this.activeMinorStops.includes(i),
-            isLastConfirmed: this.lastConfirmed === i && !stop.terminatesHere,
-            isSBL: /sbl/gi.test(stop.stopName),
-            position: stop.beginsHere ? 'begin' : stop.terminatesHere ? 'end' : 'en-route',
-            sceneryName,
-            status: stop.confirmed ? 'confirmed' : stop.stopped ? 'stopped' : 'unconfirmed'
-          };
-        }) ?? []
-      );
+          departureDelay: stop.departureDelay,
+          arrivalDelay: stop.arrivalDelay,
+
+          duration: stop.stopTime ?? 0,
+          type: stop.stopType,
+          distance: stop.stopDistance,
+
+          comments: stop.comments ?? null,
+
+          arrivalLine: stop.arrivalLine,
+          departureLine: stop.departureLine,
+
+          arrivalLineInfo: arrivalLineInfo,
+          departureLineInfo,
+
+          isExternal,
+          isActive,
+
+          isSBL: /sbl/gi.test(stop.stopName),
+          position: stop.beginsHere ? 'begin' : stop.terminatesHere ? 'end' : 'en-route',
+          status: stop.confirmed ? 'confirmed' : stop.stopped ? 'stopped' : 'unconfirmed',
+
+          sceneryName: currentPath.stationName,
+          isSceneryOnline: pathData?.isOnline ?? false
+        };
+
+        if (internalRouteInfo) {
+          arrivalLineInfo = departureLineInfo;
+        }
+
+        if (
+          stopRows[stopRows.length - 1]?.status == 'confirmed' &&
+          rowData.status != 'confirmed' &&
+          rowData.status != 'stopped'
+        )
+          stopRows[stopRows.length - 1].isActive = true;
+
+        if (
+          stopRows[stopRows.length - 1]?.isActive == true &&
+          !/(^<strong>|, podg$)/.test(rowData.nameHtml)
+        )
+          rowData.isActive = true;
+
+        stopRows.push(rowData);
+
+        if (stop.departureLine === currentPath.departureRouteExt) {
+          // Reverse search for last scenery checkpoint
+          if (pathData?.departureLineData) {
+            stopRows[stopRows.length - 1].isExternal = true;
+
+            for (let i = stopRows.length - 1; i > 0; i--) {
+              stopRows[i].departureLineInfo = pathData.departureLineData;
+
+              if (/(^<strong>|, podg$)/.test(stopRows[i].nameHtml)) {
+                break;
+              }
+
+              stopRows[i].arrivalLineInfo = pathData.departureLineData;
+            }
+          }
+
+          currentPath = timetablePath[++currentPathIndex];
+          pathData = this.getPathSceneryData(currentPath);
+        }
+      }
+
+      return stopRows;
    },

    lastConfirmed() {
@@ -252,18 +362,12 @@ export default defineComponent({

      return activeMinorStopList;
    }
-  },
-
-  methods: {
-    toggleShowState() {
-      this.$emit('click');
-    }
  }
 });
 </script>

 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';

 $barClr: #b1b1b1;
 $confirmedClr: #4ae24a;
@@ -281,10 +385,6 @@ $blinkAnim: 0.5s ease-in-out alternate infinite blink;
  }
 }

-.train-schedule {
-  padding: 1em;
-}
-
 .schedule-wrapper {
  overflow-y: auto;
  width: 100%;
@@ -303,6 +403,10 @@ $blinkAnim: 0.5s ease-in-out alternate infinite blink;
 }

 .stop {
+  &[data-sbl='true'] {
+    display: none;
+  }
+
  // Begin stop
  &[data-position='begin'] {
    .node {
@@ -334,20 +438,19 @@ $blinkAnim: 0.5s ease-in-out alternate infinite blink;
    border-color: $haltClr;
  }

-  &[data-minor-stop-active='true'] {
-    .progress > .line {
-      animation: $blinkAnim;
-    }
+  // &[data-minor-stop-active='true'] {
+  //   .progress > .line {
+  //     animation: $blinkAnim;
+  //   }

-    & + div {
-      .progress > .line_node-top {
-        animation: $blinkAnim;
-      }
-    }
-  }
+  //   & + div {
+  //     .progress > .line_node-top {
+  //       animation: $blinkAnim;
+  //     }
+  //   }
+  // }

-  // Last confirmed outpost / checkpoint
-  &[data-last-confirmed='true'] {
+  &[data-is-active='true'] {
    .progress > .line_connection {
      animation: $blinkAnim;
    }
@@ -368,6 +471,7 @@ $blinkAnim: 0.5s ease-in-out alternate infinite blink;
    .progress > .node {
      border-color: $confirmedClr;
    }
+
    .progress > .line {
      border-left: 2px solid $confirmedClr;
      border-right: 2px solid $confirmedClr;
@@ -388,19 +492,22 @@ $blinkAnim: 0.5s ease-in-out alternate infinite blink;
  // Unused so far
  &[data-track-count-departure='2'] {
    .progress > .line {
-      width: 6px;
+      width: 8px;
+      border-width: 3px;
    }
  }

  &[data-track-count-arrival='2'] {
    .progress > .line_node-top {
-      width: 6px;
+      width: 8px;
+      border-width: 3px;
    }
  }

  &[data-track-count-arrival='1'] {
    .progress > .line_node-top {
-      width: 4px;
+      width: 2px;
+      border-width: 2px;
    }
  }

@@ -528,8 +635,7 @@ $blinkAnim: 0.5s ease-in-out alternate infinite blink;
    align-items: center;
  }

-  img {
-    width: 1em;
+  img[data-tooltip] {
    cursor: help;
  }
 }
@@ -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';
-@import '../../styles/badge.scss';
-@import '../../styles/responsive.scss';
+@use '../../styles/dropdown';
+@use '../../styles/badge';
+@use '../../styles/responsive';

 h1 img {
  vertical-align: text-bottom;
@@ -248,8 +252,7 @@ h3 {
  max-width: 600px;
 }

-@include smallScreen {
-  h1,
+@include responsive.smallScreen{
  .no-data {
    text-align: center;
  }
@@ -1,5 +1,12 @@
 <template>
-  <transition name="status-anim" mode="out-in" tag="div" class="train-table">
+  <transition
+    name="status-anim"
+    mode="out-in"
+    tag="div"
+    class="train-table"
+    @scroll="onScroll"
+    ref="trainTableRef"
+  >
    <div :key="apiStore.dataStatuses.connection">
      <div class="table-warning" key="offline" v-if="store.isOffline">
        {{ $t('app.offline') }}
@@ -12,16 +19,8 @@
        >)
      </div>

-      <transition-group name="list-anim" tag="ul">
-        <li
-          class="train-row"
-          v-for="train in trains"
-          :key="train.id"
-        >
-          <router-link class="a-block" :to="train.driverRouteLocation">
-            <TrainInfo :train="train" :extended="false" />
-          </router-link>
-        </li>
+      <transition-group name="list-anim" tag="div" class="list_wrapper">
+        <TrainTableItem v-for="train in trains" :key="train.id" :train="train" />
      </transition-group>
    </div>
  </transition>
@@ -30,13 +29,15 @@
 <script lang="ts">
 import { defineComponent, inject, PropType, Ref } from 'vue';
 import { useMainStore } from '../../store/mainStore';
-import Loading from '../Global/Loading.vue';
-import TrainInfo from './TrainInfo.vue';
-import { Status, Train } from '../../typings/common';
 import { useApiStore } from '../../store/apiStore';
+import { Status, Train } from '../../typings/common';
+
+import Loading from '../Global/Loading.vue';
+import TrainTableItem from './TrainTableItem.vue';
+import TrainInfo from './TrainInfo.vue';

 export default defineComponent({
-  components: { Loading, TrainInfo },
+  components: { Loading, TrainInfo, TrainTableItem },

  props: {
    trains: {
@@ -45,6 +46,10 @@ export default defineComponent({
    }
  },

+  data: () => ({
+    scrollTop: 0
+  }),
+
  setup() {
    const store = useMainStore();
    const apiStore = useApiStore();
@@ -64,6 +69,16 @@ export default defineComponent({
    };
  },

+  activated() {
+    (this.$refs['trainTableRef'] as HTMLElement).scrollTop = this.scrollTop;
+  },
+
+  methods: {
+    onScroll(e: Event) {
+      this.scrollTop = (e.target as HTMLElement).scrollTop;
+    }
+  },
+
  computed: {
    dataStatus() {
      if (this.store.isOffline) return Status.Data.Offline;
@@ -78,8 +93,8 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-@import '../../styles/animations.scss';
+@use '../../styles/responsive';
+@use '../../styles/animations';

 .train-table {
  height: calc(100vh - 11em);
@@ -90,6 +105,10 @@ export default defineComponent({
  overflow-x: hidden;
 }

+.list_wrapper {
+  padding: 2px; // ensures focused items outline visibility
+}
+
 .table-warning {
  text-align: center;

@@ -98,10 +117,4 @@ export default defineComponent({

  background: #1a1a1a;
 }
-
-li.train-row {
-  background-color: var(--clr-secondary);
-  margin-bottom: 1em;
-  width: 100%;
-}
 </style>
@@ -0,0 +1,75 @@
+<template>
+  <router-link :to="train.driverRouteLocation" class="train-item">
+    <div class="item-wrapper">
+      <TrainInfo :train="train" />
+
+      <div class="train-stats">
+        <StockList :trainStockList="train.stockList" :tractionOnly="true" />
+
+        <div>
+          <span>{{ train.speed }}km/h</span>
+
+          <div>
+            <span> {{ train.length }}m</span>
+            &bull;
+            <span> {{ (train.mass / 1000).toFixed(1) }}t</span>
+            <span v-if="train.stockList.length > 1">
+              &bull;
+              {{ $t('trains.cars') }}: {{ train.stockList.length - 1 }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </router-link>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue';
+import { Train } from '../../typings/common';
+import TrainInfo from './TrainInfo.vue';
+import StockList from '../Global/StockList.vue';
+
+defineProps({
+  train: {
+    type: Object as PropType<Train>,
+    required: true
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@use '../../styles/responsive';
+
+.train-item {
+  display: block;
+  background-color: #1a1a1a;
+  margin-bottom: 1em;
+  width: 100%;
+  padding: 1em;
+}
+
+.item-wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  grid-template-rows: 1fr;
+}
+
+.train-stats {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  flex-direction: column;
+  text-align: center;
+
+  line-height: 1.5em;
+}
+
+@include responsive.smallScreen {
+  .item-wrapper {
+    grid-template-columns: 1fr;
+    gap: 1em 0;
+  }
+}
+</style>
@@ -151,6 +151,8 @@ export interface TrainScheduleStop {
  isSBL: boolean;

  sceneryName: string | null;
+  isSceneryOnline: boolean;
+
  distance: number;

  arrivalLine: string | null;
@@ -162,4 +164,36 @@ export interface TrainScheduleStop {
  isExternal: boolean;

  comments: string | null;
+}
+
+export interface TrainSchedulePoint {
+  nameHtml: string;
+  nameRaw: string;
+
+  status: 'confirmed' | 'unconfirmed' | 'stopped';
+  position: 'begin' | 'end' | 'en-route';
+  type: string;
+  duration: number;
+  distance: number;
+  arrivalScheduled: number;
+  arrivalReal: number;
+  departureScheduled: number;
+  departureReal: number;
+
+  comments: string | null;
+
+  arrivalDelay: number;
+  departureDelay: number;
+  arrivalLine: string | null;
+  departureLine: string | null;
+
+  arrivalLineInfo: StationRoutesInfo | null;
+  departureLineInfo: StationRoutesInfo | null;
+
+  isExternal: boolean,
+
+  isActive: boolean;
+  isSBL: boolean;
+  sceneryName: string | null;
+  isSceneryOnline: boolean;
 }
@@ -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
+  }
+};
@@ -23,7 +23,7 @@
  "warnings": {
    "TWR": "Train with high risk cargo",
    "SKR": "Train with exceeded gauge",
-    "PN": "Train with extra deliveries", 
+    "PN": "Train with extra deliveries",
    "TN": "Train with dangerous cargo",
    "header-title": "Freight notes:"
  },
@@ -48,7 +48,9 @@
    "no-result": "No results for current search!",
    "migration-warning": "Stacjownik services will be unavailable 2/06/2022 between 1-3am (CEST time) due to the migration of API hostings!",
    "migration-confirm": "Roger that!",
-    "offline": "App is in the offline mode!"
+    "offline": "App is in the offline mode!",
+    "tooltip-driver-offline": "Driver is offline",
+    "tooltip-scenery-offline": "Scenery is offline"
  },
  "footer": {
    "discord": "Stacjownik Discord server"
@@ -57,20 +59,16 @@
    "EI": "domestic express",
    "EC": "international express",
    "EN": "domestic night express",
-
    "MP": "intervoivodeship bullet",
    "MO": "intervoivodeship regio",
    "MM": "international bullet",
    "MH": "intervoivodeship night bullet",
-
    "RP": "voivodeship bullet",
    "RM": "international voivodeship regio",
    "RO": "voivodeship regio",
    "RA": "voivodeship regio (urban)",
-
    "PW": "empty passenger",
    "PX": "empty passenger test drive",
-
    "TC": "international freight (intermodal)",
    "TG": "international freight (organized cargo)",
    "TR": "international freight (unorganized cargo)",
@@ -80,18 +78,14 @@
    "TK": "freight (for stations & sidings)",
    "TS": "empty freight test drive",
    "TH": "locomotive rolling stock (over 3 vehicles)",
-
    "LT": "freight locomotive only",
    "LP": "passenger locomotive only",
    "LS": "shunting locomotive only",
    "LZ": "shunting locomotive only",
-
    "ZN": "inspection / diagnostic type",
    "ZU": "other maintenance type",
    "ZG": "emergency (deprecated)",
-
    "AP": "voivodeship regio (deprecated)",
-
    "E": "electric loco",
    "J": "EMU",
    "S": "diesel loco",
@@ -130,7 +124,6 @@
    "mechaniczne": "levers (mechanical)",
    "mechaniczne+SPK": "levers + SPK",
    "mechaniczne+SCS": "levers + SCS",
-
    "abbrevs": {
      "SPK": "SPK",
      "SCS": "SCS",
@@ -159,27 +152,23 @@
  "options": {
    "filters": "FILTERS",
    "donate": "DONATE",
-
    "search-button": "SEARCH",
    "reset-button": "RESET",
-
    "sort-title": "SORT BY:",
    "filter-title": "FILTER BY:",
    "search-title": "SEARCH:",
-
-    "search-train-no": "Train no. / #",
-    "search-train": "Train no.",
-    "search-driver": "Driver name",
+    "search-train": "Train no. / #",
+    "search-driver": "Choose a driver...",
    "search-dispatcher": "Dispatcher name",
    "search-station": "Scenery name / #",
    "search-author": "Timetable author name",
    "search-issuedFrom": "Issuing scenery name",
    "search-via": "Via scenery name",
    "search-terminatingAt": "Terminating scenery name",
-    "search-timetables-date": "Timetable date (UTC+2 / CEST)",
-    "search-dispatchers-date": "Service date (UTC+2 / CEST)",
-    "search-date": "Date (UTC+2 / CEST)",
-
+    "search-timetables-date": "Timetable date",
+    "search-dispatchers-date": "Service date (from / to)",
+    "search-date-from": "Date (UTC+2 / CEST)",
+    "search-date-to": "Date (UTC+2 / CEST)",
    "sort-mass": "mass",
    "sort-speed": "speed",
    "sort-length": "length",
@@ -188,13 +177,11 @@
    "sort-progress": "route progress",
    "sort-delay": "current delay",
    "sort-id": "timetable id",
-
    "sort-allStopsCount": "total stops",
    "sort-beginDate": "date",
    "sort-timetableId": "timetable ID",
    "sort-timestampFrom": "date",
    "sort-currentDuration": "duration",
-
    "filter-noComments": "NO COMMENTS",
    "filter-withComments": "COMMENTS",
    "filter-twr": "TWR",
@@ -209,13 +196,10 @@
    "filter-other": "OTHER",
    "filter-noTimetable": "NO TIMETABLE",
    "filter-withTimetable": "TIMETABLE",
-
    "filter-reset": "RESET FILTERS",
    "filter-clear": "CLEAR FILTERS",
-
    "filter-section-timetable-status": "TIMETABLE STATUS",
    "filter-section-special": "SPECIAL TYPE",
-
    "filter-all-statuses": "ALL",
    "filter-abandoned": "ABANDONED",
    "filter-fulfilled": "FULFILLED",
@@ -223,7 +207,6 @@
  },
  "filters": {
    "desc": " &bull; Left mouse click: select / unselect chosen filter <br /> &bull; Double left click: unselect all filters but chosen from a <b class='text--primary'>group</b> <br /> &bull; <span style='color: coral'>RESET</span>: reset all filters from a <b class='text--primary'>group</b>",
-
    "sections": {
      "quick": "QUICK FILTERS",
      "stationType": "STATION TYPE",
@@ -238,18 +221,14 @@
      "timetables": "ACTIVE TIMETABLES",
      "spawns": "OPEN SPAWNS"
    },
-
    "changed-filters-count": "Changed filters:",
    "no-changed-filters": "No changed filters",
-
    "all-available": "ALL AVAILABLE",
    "all-free": "CURRENTLY FREE",
-
    "endingStatus": "ENDS SOON",
    "afkStatus": "AFK",
    "noSpaceStatus": "NO SPACE",
    "unavailableStatus": "UNAVAILABLE",
-
    "title": "STATION FILTERS",
    "default": "IN-GAME",
    "notDefault": "ADDITIONAL",
@@ -258,7 +237,6 @@
    "unavailable": "UNSUPPORTED",
    "nonPublic": "NON-PUBLIC",
    "abandoned": "ABANDONED",
-
    "SPK": "SPK",
    "SPK-R": "SPK + MANUAL",
    "SPK-M": "SPK + MECH.",
@@ -268,29 +246,22 @@
    "SPE": "SPE",
    "manual": "MANUAL",
    "mechanical": "MECHANICAL",
-
    "SUP": "SUP (RASP-UZK)",
    "noSUP": "WITHOUT SUP",
-
    "ASDEK": "ASDEK",
    "noASDEK": "NO ASDEK",
-
    "SBL": "AUTOMATIC (SBL)",
    "PBL": "SEMIAUTOMATIC (PBL)",
-
    "modern": "MODERN",
    "semaphores": "SEMAPHORES",
    "mixed": "MIXED",
    "historical": "HISTORICAL",
    "free": "FREE",
    "occupied": "OCCUPIED",
-
    "withActiveTimetables": "ACTIVE",
    "withoutActiveTimetables": "NO ACTIVE",
-
    "junction": "JUNCTIONS",
    "nonJunction": "OTHER",
-
    "sliders": {
      "minLevel": "MIN. REQUIRED DISPATCHER LEVEL",
      "maxLevel": "MAX. REQUIRED DISPATCHER LEVEL",
@@ -299,15 +270,17 @@
      "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...",
    "authors-search": "SEARCH BY AUTHOR NAME (other filters apply):",
    "authors-placeholder": "Enter the author nickname...",
    "search-button-title": "SEARCH",
-
    "minimum-hours-title": "SHOW ONLY SCENERIES UNTIL:",
    "now": "NOW",
    "hour": "h",
@@ -358,19 +331,24 @@
    "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)",
-    "open-spawns": "Open spawns:"
+    "cross-sceneries": "Cross-track sceneries",
+    "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!",
    "loading": "Loading train data...",
    "offline": "Offline ride",
-
    "stats": "TRAFFIC STATISTICS",
    "stats-speed": "TRAINS SPEED (MIN, AVG, MAX) [km/h]",
    "stats-length": "TIMETABLES LENGTH (MIN, AVG, MAX) [km]",
@@ -378,23 +356,17 @@
    "stats-special-twr": "HIGH RISK",
    "stats-special-skr": "EXCEEDED STRUCT. GAUGE",
    "stats-locos": "MOST COMMON UNITS",
-
    "current-scenery": "on scenery",
    "current-signal": "at signal",
    "current-track": "on track",
-
-    "vmax-tooltip": "Maximum train speed based on rolling stock vehicles - braked weight is not included",
-   
+    "vmax-tooltip": "Maximum speed based on vehicles and acceptable train mass",
    "catenary-tooltip": "Electrified route",
    "no-catenary-tooltip": "Non-electrified route",
    "sbl-tooltip": "Route with SBL\n(automatic block signalling)",
-
    "delayed": "Delayed: ",
    "preponed": "Ahead of schedule: ",
    "on-time": "On time",
-
    "route-progress": "Progress: ",
-
    "detailed-timetable": "Detailed timetable for train no. ",
    "via-title": "Via: ",
    "no-timetable": "no current timetable",
@@ -407,27 +379,27 @@
    "timetable-comments": "Exploitation comments available for this train",
    "comment": "Exploitation comments for: ",
    "table-limit": "For performance reasons there's a limit of 10 trains shown at the same time.",
-
    "last-seen-now": "since now",
    "last-seen-min": "since one minute",
    "last-seen-ago": "since {minutes} minutes",
-
    "scenery-offline": "Offline ride",
    "timeout": "An error occured while trying to refresh SWDR timetable data!",
-
    "driver-journal-link": "DRIVER JOURNAL",
+    "driver-srjp-link": "SRJP",
    "driver-return-link": "GO BACK",
-
    "driver-not-found-header": "Train not found! :/",
    "driver-not-found-desc-1": "This train has already been terminated, changed its number or is offline.",
    "driver-not-found-desc-2": "You can browse timetable history in the",
    "driver-not-found-journal": "TIMETABLES JOURNAL",
    "driver-not-found-others": "Player {driver} is online as:",
-    "driver-not-found-return": "GO BACK TO THE MAIN SITE"
+    "driver-not-found-return": "GO BACK TO THE MAIN SITE",
+    "stock-copy": "COPY THE STOCK",
+    "stock-clipboard-success": "Successfully copied the railway stock in a text form to your clipboard!",
+    "stock-clipboard-failure": "Oops! Something happened and the railway stock couldn't be copied to your clipboard! :/"
  },
  "train-stats": {
    "stats-button": "STATISTICS",
-    "title": "STATISTICS ONLINE",
+    "title": "ONLINE TRAINS STATS",
    "timetable-count": "ACTIVE TIMETABLES",
    "avg-speed": "AVG SPEED",
    "avg-timetable": "AVG TIMETABLE",
@@ -445,14 +417,10 @@
    "loading": "Loading dispatcher history data...",
    "no-history": "No dispatcher history found!",
    "data-refreshed-at": "Data refreshed at",
-
    "section-timetables": "TIMETABLES",
    "section-dispatchers": "DISPATCHERS",
-
    "no-further-data": "No further data for current parameters",
    "loading-further-data": "Loading...",
-    
-
    "route-length": "Route length:",
    "station-count": "Stations:",
    "dispatcher-name": "Author",
@@ -461,29 +429,25 @@
    "timetable-fulfilled": "FULFILLED",
    "timetable-abandoned": "ABANDONED",
    "timetable-online-button": "ONLINE TIMETABLE",
-
    "online-since": "ONLINE SINCE",
    "duty-lasted": "The duty lasted",
-
    "hours": "{value} hour | {value} hours",
    "minutes": "{value} min | {value} mins",
    "seconds": "{value} s",
-
    "entry-details": "DETAILS",
    "no-entry-details": "NO DETAILS AVAILABLE",
-
    "stock-length": "Length",
    "stock-mass": "Mass",
    "stock-max-speed": "Max. speed",
-
+    "stock-timetable-speed": "Timetable speed",
    "stock-dangers": "ADDITIONAL NOTES",
    "stock-preview": "STOCK PREVIEW",
-
+    "stock-copy": "COPY THE STOCK",
+    "stock-clipboard-success": "Successfully copied the railway stock in a text form to your clipboard:",
+    "stock-clipboard-failure": "Oops! Something happened and the railway stock couldn't be copied to your clipboard! :/",
    "load-data": "Load further data...",
-
    "last-seen-at": "Last seen at",
    "currently-at": "Currently at",
-
    "driver-stats": {
      "button": "DRIVER STATS",
      "title": "{name}'s DRIVER STATS",
@@ -494,7 +458,6 @@
      "distance": "DISTANCE",
      "stations": "STATIONS"
    },
-
    "daily-stats": {
      "button": "DAILY STATS",
      "title": "STATS OF THE DAY",
@@ -506,14 +469,12 @@
      "most-active-driver": "The most active driver: {driver} (total driven distance: {distance})",
      "longest-duties": "The longest service: {dispatcher} at {station} (duration: {duration})",
      "count": "timetable | timetables",
-
      "rippedSwitches": "RIPPED SWITCHES",
      "derailments": "DERAILMENTS",
      "skippedStopSignals": "SKIPPED STOP SIGNALS",
      "radioStops": "RADIOSTOPS",
      "kills": "KILLS"
    },
-
    "dispatcher-stats": {
      "button": "DISPATCHER STATS",
      "title": "{name}'s DISPATCHER STATS",
@@ -527,13 +488,10 @@
      "timetables-max": "LONGEST TIMETABLE",
      "timetables-avg": "AVG TIMETABLE DISTANCE"
    },
-
    "stats-loading": "Fetching statistics...",
    "stats-error": "Oops! An unexpected error occurred while trying to fetch statistics! :/",
-
    "timetable-location-signal": "signal:",
    "timetable-location-route": "route:",
-
    "history-name": "Scenery name",
    "history-hash": "Hash",
    "history-dispatcher": "Dispatcher",
@@ -558,33 +516,29 @@
    "abbrev": "Station symbol:",
    "lines-title": "Real lines",
    "project-title": "Project name",
-    "one-way-routes": "One way routes",
-    "two-way-routes": "Two way routes",
-
+    "additional-tools-title": "Additional tools",
+    "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",
-
    "timetable-via": "ALL TIMETABLES",
    "timetable-issuedFrom": "BEGINS HERE",
    "timetable-terminatingAt": "TERMINATES HERE",
-
    "timetable-issued-date": "Issued",
    "timetable-issued-by": " by:",
    "timetable-issued-for": " for driver:",
-
    "dispatcher-rate": "Rate:",
    "dispatcher-status-changes": "Status changes:",
-
    "req-level": "all dispatcher levels | dispatcher level {lvl} required | dispatcher level {lvl} required",
    "history-list-empty": "No recorded scenery history!",
-
    "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",
@@ -600,16 +554,15 @@
    "terminated": "Timetable terminated",
    "begins": "BEGINS HERE",
    "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-online": "The train is at the station. It's going to leave to: {nextStationName} (szlak {nextArrivalLine})",
-    "desc-stopped": "The train is at the station and is stopped. It's going to leave towards: {nextStationName} (szlak {nextArrivalLine})",
-    "desc-next-arrival": "Leaves towards: {nextStationName} (szlak {nextArrivalLine})",
-    "desc-departed": "The train is at the station and it's been departed. Leaves towards: {nextStationName} (szlak {nextArrivalLine})",
-    "desc-departed-away": "The train has been departed to: {nextStationName} (szlak {nextArrivalLine})",
+    "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.\nIt's going to leave to: <b>{nextStationName} (route {nextArrivalLine})</b>",
+    "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: <b>{nextStationName} (route {nextArrivalLine})</b>",
+    "desc-departed": "The train is at the station and it's been departed.\nLeaves towards: <b>{nextStationName} (route {nextArrivalLine})</b>",
+    "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"
  },
@@ -618,4 +571,4 @@
    "search-train": "Train no.",
    "search-driver": "Driver name"
  }
-}
+}
@@ -21,7 +21,7 @@
    "driver-message": "Maszynista wspierający projekt Stacjownika!"
  },
  "warnings": {
-    "TWR": "Pociąg z towarami niebezpiecznie wysokiego ryzyka",
+    "TWR": "Pociąg z towarami niebezpiecznymi wysokiego ryzyka",
    "SKR": "Pociąg z przekroczoną skrajnią",
    "PN": "Pociąg z przesyłkami nadzwyczajnymi",
    "TN": "Pociąg z towarami niebezpiecznymi",
@@ -45,7 +45,9 @@
    "loading": "Pobieranie danych...",
    "error": "Wystąpił problem z załadowaniem danych!",
    "no-result": "Brak wyników o podanych kryteriach!",
-    "offline": "Aplikacja w trybie offline!"
+    "offline": "Aplikacja w trybie offline!",
+    "tooltip-driver-offline": "Maszynista offline",
+    "tooltip-scenery-offline": "Sceneria offline"
  },
  "footer": {
    "discord": "Serwer Discord Stacjownika"
@@ -54,20 +56,16 @@
    "EI": "ekspres krajowy",
    "EC": "ekspres międzynarodowy",
    "EN": "ekspres krajowy nocny",
-
    "MP": "międzywojewódzki pospieszny",
    "MO": "międzywojewódzki osobowy",
    "MM": "międzynarodowy pospieszny",
    "MH": "międzywojewódzki pospieszny (nocny)",
-
    "RP": "wojewódzki pospieszny",
    "RO": "wojewódzki osobowy",
    "RM": "wojewódzki osobowy międzynarodowy",
-    "RA": "wojewódzki osobowy algomeracyjny",
-
+    "RA": "wojewódzki osobowy aglomeracyjny",
    "PW": "pasażerski próżny - służbowy",
    "PX": "pasażerski próżny próbny",
-
    "TC": "towarowy międzynarodowy intermodalny",
    "TG": "towarowy międzynarodowy masowy",
    "TR": "towarowy międzynarodowy niemasowy",
@@ -77,18 +75,14 @@
    "TK": "towarowy zdawczy",
    "TS": "towarowy próżny próbny",
    "TH": "skład lokomotyw (powyżej 3 pojazdów)",
-
    "LT": "lokomotywa towarowa luzem",
    "LP": "lokomotywa pasażerska luzem",
    "LS": "lokomotywa manewrowa luzem",
    "LZ": "lokomotywa dla poc. utrzymaniowo-naprawczych",
-
    "ZN": "inspekcyjny / diagnostyczny",
    "ZU": "inny utrzymaniowy",
    "ZG": "ratunkowy (kat. wycofana)",
-
    "AP": "wojewódzki osobowy (kat. wycofana)",
-
    "E": "elektrowóz",
    "J": "EZT",
    "S": "spalinowóz",
@@ -127,7 +121,6 @@
    "mechaniczne": "mechaniczne",
    "mechaniczne+SPK": "mechaniczne z SPK",
    "mechaniczne+SCS": "mechaniczne z SCS",
-
    "abbrevs": {
      "SPK": "SPK",
      "SCS": "SCS",
@@ -156,27 +149,23 @@
  "options": {
    "filters": "FILTRY",
    "donate": "WESPRZYJ",
-
    "search-button": "SZUKAJ",
    "reset-button": "ZRESETUJ",
-
    "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",
    "search-issuedFrom": "Sceneria początkowa",
    "search-via": "Przez scenerię",
    "search-terminatingAt": "Sceneria końcowa",
-    "search-timetables-date": "Data rozkładu jazdy (UTC+2 / CEST)",
-    "search-dispatchers-date": "Data służby (UTC+2 / CEST)",
-    "search-date": "Data (UTC+2 / CEST)",
-
+    "search-timetables-date": "Data rozkładu jazdy",
+    "search-dispatchers-date": "Data służby (od / do)",
+    "search-date-from": "Data (UTC+2 / CEST)",
+    "search-date-to": "Data (UTC+2 / CEST)",
    "sort-routeDistance": "kilometraż",
    "sort-allStopsCount": "stacje",
    "sort-beginDate": "data",
@@ -184,7 +173,6 @@
    "sort-timestampFrom": "data",
    "sort-currentDuration": "czas dyżuru",
    "sort-id": "id rozkładu",
-
    "sort-mass": "masa",
    "sort-speed": "prędkość",
    "sort-length": "długość",
@@ -192,7 +180,6 @@
    "sort-progress": "przebyta trasa",
    "sort-delay": "opóźnienie",
    "sort-comments": "uwagi ekspl.",
-
    "filter-withComments": "UWAGI EKSPLOATACYJNE",
    "filter-noComments": "BEZ UWAG",
    "filter-twr": "TWR",
@@ -207,13 +194,10 @@
    "filter-other": "INNE",
    "filter-noTimetable": "BEZ RJ",
    "filter-withTimetable": "ROZKŁAD JAZDY",
-
    "filter-reset": "ZRESETUJ FILTRY",
    "filter-clear": "WYŁĄCZ FILTRY",
-
    "filter-section-timetable-status": "STATUS ROZKŁADU JAZDY",
    "filter-section-special": "TYPY SPECJALNE",
-
    "filter-all-specials": "WSZYSTKIE",
    "filter-abandoned": "PORZUCONE",
    "filter-fulfilled": "WYPEŁNIONE",
@@ -221,7 +205,6 @@
  },
  "filters": {
    "desc": " &bull; Kliknięcie: zaznaczenie / odznaczenie filtru <br /> &bull; Podwójne kliknięcie: odznaczenie reszty filtrów z <b class='text--primary'>grupy</b> <br /> &bull; <span style='color: coral'>RESET</span>: zresetowanie filtrów z <b class='text--primary'>grupy</b>",
-
    "sections": {
      "quick": "SZYBKIE FILTRY",
      "stationType": "RODZAJ STACJI",
@@ -236,18 +219,14 @@
      "timetables": "AKTYWNE ROZKŁADY JAZDY",
      "spawns": "OTWARTE SPAWNY"
    },
-
    "changed-filters-count": "Zmienione filtry:",
    "no-changed-filters": "Brak zmienionych filtrów",
-
    "all-available": "WSZYSTKIE DOSTĘPNE",
    "all-free": "WSZYSTKIE WOLNE",
-
    "endingStatus": "KOŃCZY",
    "afkStatus": "Z/W",
    "noSpaceStatus": "BRAK MIEJSCA",
    "unavailableStatus": "NIEDOSTĘPNY",
-
    "title": "FILTRUJ STACJE",
    "default": "DOMYŚLNA",
    "notDefault": "POZA PACZKĄ",
@@ -256,7 +235,6 @@
    "unavailable": "NIEDOSTĘPNA",
    "nonPublic": "NIEPUBLICZNA",
    "abandoned": "WYCOFANA",
-
    "SPK": "SPK",
    "SPK-R": "SPK + RĘCZNE",
    "SPK-M": "SPK + MECH.",
@@ -265,16 +243,12 @@
    "SCS-M": "SCS + MECH.",
    "SPE": "SPE",
    "manual": "RĘCZNE",
-
    "SUP": "SUP (RASP-UZK)",
    "noSUP": "BEZ SUP",
-
    "ASDEK": "ASDEK",
    "noASDEK": "BEZ ASDEK-a",
-
    "SBL": "SAMOCZYNNA",
    "PBL": "PÓŁSAMOCZYNNA",
-
    "mechanical": "MECHANICZNE",
    "modern": "WSPÓŁCZESNA",
    "semaphores": "KSZTAŁTOWA",
@@ -282,13 +256,10 @@
    "historical": "HISTORYCZNA",
    "free": "WOLNA",
    "occupied": "ZAJĘTA",
-
    "withActiveTimetables": "AKTYWNE",
    "withoutActiveTimetables": "BEZ AKTYWNYCH",
-
    "junction": "WĘZŁOWE",
    "nonJunction": "INNE",
-
    "sliders": {
      "minLevel": "MIN. WYMAGANY POZIOM DYŻURNEGO",
      "maxLevel": "MAKS. WYMAGANY POZIOM DYŻURNEGO",
@@ -297,9 +268,12 @@
      "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...",
    "authors-search": "WYSZUKAJ AUTORA (uwzględnia inne filtry):",
@@ -353,35 +327,35 @@
    "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):",
-    "open-spawns": "Otwarte spawny:"
+    "cross-sceneries": "Scenerie przejściowe:",
+    "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!",
    "loading": "Pobieranie danych o pociągach...",
    "offline": "Przejazd offline",
-
    "current-scenery": "na scenerii",
    "current-signal": "przy semaforze",
    "current-track": "na szlaku",
-
-    "vmax-tooltip": "Maksymalna prędkość na podstawie pojazdów w składzie - nie bierze pod uwagę masy hamowania",
-
+    "vmax-tooltip": "Maksymalna prędkość obliczona na podstawie pojazdów w składzie i masy dopuszczalnej",
    "catenary-tooltip": "Szlak zelektryfikowany",
    "no-catenary-tooltip": "Szlak niezelektryfikowany",
    "sbl-tooltip": "Szlak posiadający\nsamoczynną blokadę liniową",
-
    "delayed": "Opóźniony: ",
    "preponed": "Przed czasem: ",
    "on-time": "Planowo",
-
    "route-progress": "Postęp: ",
-
    "detailed-timetable": "Szczegółowy rozkład jazdy pociągu ",
    "via-title": "Przez: ",
    "no-timetable": "brak rozkładu jazdy",
@@ -392,28 +366,27 @@
    "loco-diesel": "Spalinowóz",
    "timetable-comments": "Pociąg z uwagami eksploatacyjnymi",
    "comment": "Uwagi eksploatacyjne dla: ",
-
    "last-seen-now": "od niedawna",
    "last-seen-min": "od minuty",
    "last-seen-ago": "od {minutes} minut",
-
    "scenery-offline": "Przejazd offline",
-
    "timeout": "Wystąpił problem z aktualizacją rozkładów jazdy z SWDR",
-
    "driver-journal-link": "DZIENNIK MASZYNISTY",
+    "driver-srjp-link": "SRJP",
    "driver-return-link": "POWRÓT",
-
    "driver-not-found-header": "Nie znaleziono pociągu! :/",
    "driver-not-found-desc-1": "Ten pociąg prawdopodobnie zakończył już swój bieg, zmienił numer lub jest offline.",
    "driver-not-found-desc-2": "Historię rozkładów jazdy możesz przejrzeć w",
    "driver-not-found-journal": "DZIENNIKU RJ",
    "driver-not-found-others": "Gracz {driver} jest online jako:",
-    "driver-not-found-return": "WRÓĆ NA STRONĘ GŁÓWNĄ"
+    "driver-not-found-return": "WRÓĆ NA STRONĘ GŁÓWNĄ",
+    "stock-copy": "SKOPIUJ SKŁAD",
+    "stock-clipboard-success": "Pomyślnie skopiowano skład w postaci tekstowej do schowka!",
+    "stock-clipboard-failure": "Ups! Nie udało się skopiować składu do schowka! :/"
  },
  "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",
@@ -431,19 +404,15 @@
    "loading": "Ładowanie historii dyżurów...",
    "no-history": "Brak historii dyżurów dla tej scenerii!",
    "data-refreshed-at": "Dane odświeżone o",
-
    "section-timetables": "ROZKŁADY JAZDY",
    "section-dispatchers": "DYŻURNI",
-
    "no-further-data": "Brak dalszych wyników dla podanych parametrów",
    "loading-further-data": "Ładowanie...",
-
    "online-since": "ONLINE OD",
    "duty-lasted": "Dyżur trwał",
    "hours": "{value} godz.",
    "minutes": "{value} min.",
    "seconds": "{value} sek.",
-
    "route-length": "Kilometraż:",
    "station-count": "Stacje:",
    "dispatcher-name": "Autor",
@@ -452,22 +421,20 @@
    "timetable-fulfilled": "WYPEŁNIONY",
    "timetable-abandoned": "PORZUCONY",
    "timetable-online-button": "RJ ONLINE",
-
    "entry-details": "SZCZEGÓŁY",
    "no-entry-details": "BRAK DOSTĘPNYCH SZCZEGÓŁÓW",
-
    "stock-length": "Długość",
    "stock-mass": "Masa",
    "stock-max-speed": "Prędkość maks.",
-
+    "stock-timetable-speed": "Prędkość RJ",
    "stock-dangers": "DODATKOWE UWAGI",
    "stock-preview": "PODGLĄD SKŁADU",
-
+    "stock-copy": "SKOPIUJ SKŁAD",
+    "stock-clipboard-success": "Pomyślnie skopiowano skład w postaci tekstowej do schowka:",
+    "stock-clipboard-failure": "Ups! Nie udało się skopiować składu do schowka! :/",
    "load-data": "Pobierz dalszą historię...",
-
    "last-seen-at": "Ostatnio widziany na: ",
    "currently-at": "Obecnie na scenerii: ",
-
    "driver-stats": {
      "button": "STAT. MASZYNISTY",
      "title": "STATYSTYKI MASZYNISTY {name}",
@@ -478,7 +445,6 @@
      "distance": "DYSTANS",
      "stations": "STACJE"
    },
-
    "daily-stats": {
      "button": "STATYSTYKI DNIA",
      "title": "STATYSTYKI DNIA",
@@ -490,14 +456,12 @@
      "most-active-driver": "Najaktywniejszy maszynista: {driver} (łączny przejechany dystans: {distance})",
      "longest-duties": "Najdłuższa służba: {dispatcher} na scenerii {station} (czas trwania: {duration})",
      "count": "rozkład jazdy | rozkładów jazdy",
-
      "rippedSwitches": "ROZPRUTE ZWROTNICE",
      "derailments": "WYKOLEJENIA",
      "skippedStopSignals": "POMINIĘTE S1",
      "radioStops": "RADIOSTOPY",
      "kills": "POTRĄCENIA"
    },
-
    "dispatcher-stats": {
      "button": "STATYSTYKI DYŻURNEGO",
      "title": "STATYSTYKI DYŻURNEGO {name}",
@@ -510,13 +474,10 @@
      "timetables-max": "NAJDŁUŻSZY WYSTAWIONY RJ",
      "timetables-avg": "ŚREDNIA WYSTAWIONYCH RJ"
    },
-
    "stats-loading": "Pobieranie statystyk...",
    "stats-error": "Ups! Wystąpił błąd podczas próby pobrania statystyk!",
-
    "timetable-location-signal": "semafor:",
    "timetable-location-route": "szlak:",
-
    "history-name": "Sceneria",
    "history-hash": "Hash",
    "history-dispatcher": "Dyżurny",
@@ -541,33 +502,29 @@
    "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",
-
    "timetable-via": "WSZYSTKIE RJ",
    "timetable-issuedFrom": "ROZPOCZYNA BIEG",
    "timetable-terminatingAt": "KOŃCZY BIEG",
-
    "timetable-issued-date": "Wystawiony",
    "timetable-issued-by": " przez:",
    "timetable-issued-for": " dla maszynisty:",
-
    "dispatcher-rate": "Ocena:",
    "dispatcher-status-changes": "Zmiany statusów:",
-
    "req-level": "ogólnodostępna | minimum {lvl} poziom dyżurnego | minimum {lvl} poziom dyżurnego",
    "history-list-empty": "Brak historii dla tej scenerii!",
-
    "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ść",
@@ -583,20 +540,19 @@
    "terminated": "Rozkład jazdy zakończony",
    "begins": "ROZPOCZYNA\nBIEG",
    "terminates": "KOŃCZY BIEG",
-
    "from": "Z",
    "to": "DO",
-
-    "desc-arriving": "Pociągu nie ma jeszcze na tej scenerii. Przyjedzie z: {prevStationName} (szlak {prevDepartureLine})",
-    "desc-online": "Pociąg jest na tej scenerii. Odjedzie do: {nextStationName} (szlak {nextArrivalLine})",
-    "desc-stopped": "Pociąg jest na tej scenerii i odbywa postój. Odjedzie do: {nextStationName} (szlak {nextArrivalLine})",
-    "desc-next-arrival": "Odjeżdża do: {nextStationName} (szlak {nextArrivalLine})",
-    "desc-departed": "Pociąg jest na tej scenerii i został odprawiony. Odjeżdża do: {nextStationName} (szlak {nextArrivalLine})",
-    "desc-departed-away": "Pociąg został odprawiony i odjechał do: {nextStationName} (szlak {nextArrivalLine})",
+    "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.\nOdjedzie w kierunku: <b>{nextStationName} (szlak {nextArrivalLine})</b>",
+    "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:\n<b>{nextStationName} (szlak {nextArrivalLine})</b>",
+    "desc-departed": "Pociąg jest na tej scenerii i został odprawiony.\nOdjeżdża w kierunku: <b>{nextStationName} (szlak {nextArrivalLine})</b>",
+    "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"
  },
  "history": {
    "title": "DZIENNIK ROZKŁADÓW JAZDY"
  }
-}
+}
@@ -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) =>
@@ -53,17 +53,11 @@ 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();
        this.fetchVehiclesInfo();
-
-        // Revalidation after staling
-        this.fetchStationsGeneralInfo().then(() => {
-          this.fetchStationsGeneralInfo();
-        });
+        this.fetchStationsGeneralInfo();

        this.nextDataCheckTime = t + 3600000;
      }
@@ -42,8 +42,13 @@ export const useMainStore = defineStore('mainStore', {
      checkpointsTrains.clear();
      sceneriesTrains.clear();

-      return (apiStore.activeData?.trains ?? [])
-        .filter((train) => train.timetable || train.online)
+      const dateNow = new Date();
+
+      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;
@@ -97,6 +102,7 @@ export const useMainStore = defineStore('mainStore', {
                  warningNotes: timetable.warningNotes,
                  hasDangerousCargo: timetable.hasDangerousCargo,
                  hasExtraDeliveries: timetable.hasExtraDeliveries,
+                  trainMaxSpeed: timetable.trainMaxSpeed,

                  timetablePath: timetable.path.split(';').map((pathElementString) => {
                    const [arrival, station, departure] = pathElementString.split(',');
@@ -112,13 +118,18 @@ export const useMainStore = defineStore('mainStore', {
              : undefined
          } as Train;

+          const stationNameKey =
+            train.currentStationName.indexOf('.sc') != -1
+              ? train.currentStationName.split(' ').slice(0, -1).join(' ')
+              : train.currentStationName;
+
          // Sceneries trains map
-          if (sceneriesTrains.has(train.currentStationName)) {
-            sceneriesTrains.set(train.currentStationName, [
-              ...sceneriesTrains.get(train.currentStationName)!,
+          if (sceneriesTrains.has(stationNameKey)) {
+            sceneriesTrains.set(stationNameKey, [
+              ...sceneriesTrains.get(stationNameKey)!,
              trainObj
            ]);
-          } else sceneriesTrains.set(train.currentStationName, [trainObj]);
+          } else sceneriesTrains.set(stationNameKey, [trainObj]);

          // Checkpoints trains map
          if (trainObj.timetableData) {
@@ -157,6 +168,8 @@ export const useMainStore = defineStore('mainStore', {

          return trainObj;
        });
+
+      return x;
    },

    // computed active sceneries
@@ -216,13 +229,15 @@ export const useMainStore = defineStore('mainStore', {
        return acc;
      }, [] as ActiveScenery[]);

+      const referenceTimestamp = Date.now();
+
      const onlineActiveSceneries = apiStore.activeData?.activeSceneries.reduce((list, scenery) => {
        if (scenery.isOnline !== 1 && Date.now() - scenery.lastSeen > 1000 * 60 * 2) return list;
        if (scenery.dispatcherStatus == Status.ActiveDispatcher.UNKNOWN) return list;

        const dispatcherTimestamp =
          scenery.dispatcherStatus == Status.ActiveDispatcher.NO_LIMIT
-            ? Date.now() + 25500000
+            ? referenceTimestamp + 25500000
            : scenery.dispatcherStatus > 5
              ? scenery.dispatcherStatus
              : null;
@@ -315,6 +330,8 @@ export const useMainStore = defineStore('mainStore', {
      return apiStore.sceneryData.map((scenery) => {
        const routes = scenery.routesInfo.reduce(
          (acc, route) => {
+            acc['all'].push(route);
+
            if (route.hidden) return acc;

            const tracksKey = route.routeTracks == 2 ? 'double' : 'single';
@@ -345,6 +362,7 @@ export const useMainStore = defineStore('mainStore', {
            doubleElectrifiedNames: [],
            doubleOtherNames: [],
            sblNames: [],
+            all: [],
            minRouteSpeed: 0,
            maxRouteSpeed: 0
          } as StationRoutes
@@ -7,7 +7,8 @@ export const tooltipKeys = [
  'BaseTooltip',
  'VehiclePreviewTooltip',
  'SpawnsTooltip',
-  'UsersTooltip'
+  'UsersTooltip',
+  'HtmlTooltip'
 ] as const;

 export type TooltipType = (typeof tooltipKeys)[number];
@@ -1,5 +1,4 @@
-@import 'variables.scss';
-@import 'responsive.scss';
+@use 'responsive';

 .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;
  }
 }
@@ -1,5 +1,4 @@
-@import './variables.scss';
-@import './responsive.scss';
+@use 'responsive';

 .card-dimmer {
  position: fixed;
@@ -46,7 +45,7 @@
  }
 }

-@include smallScreen {
+@include responsive.smallScreen{
  .card {
    max-height: 85vh;
  }
@@ -1,6 +1,5 @@
-@import 'search_box.scss';
-@import 'responsive.scss';
-@import 'variables.scss';
+@use 'search-box';
+@use 'responsive';

 .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;

@@ -1,5 +1,4 @@
-@import 'responsive.scss';
-@import 'variables.scss';
+@use 'responsive';

 .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%;
@@ -1,6 +1,5 @@
-@import 'fonts';
-@import 'variables';
-@import 'responsive';
+@use 'fonts';
+@use '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;
@@ -227,7 +240,7 @@ a.a-button {
    font-weight: bold;

    &:hover {
-      background-color: #424242;
+      background-color: #505050;
    }

    &:disabled {
@@ -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;
@@ -1,5 +1,5 @@
-@import 'responsive.scss';
-@import 'animations.scss';
+@use 'responsive';
+@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;
@@ -1,6 +1,5 @@
-@import 'variables.scss';
-@import 'responsive.scss';
-@import 'badge.scss';
+@use 'responsive';
+@use 'badge';

 .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;
  }
@@ -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 {
+
+}
@@ -1,11 +0,0 @@
-$primaryCol: #2c2c2c;
-$secondaryCol: #01e733;
-
-$bgCol: #1d1d1d;
-$bgLigtherCol: #5b5b5b;
-
-$errorCol: #ff1919;
-$warningCol: #ffe15b;
-
-$accentCol: #ffc014;
-$accent2Col: #ff3d5d;
@@ -196,9 +196,7 @@ export namespace API {
      timetableId: number;
      category: string;
      route: string;
-
      stopList: TimetableStop[];
-
      TWR: boolean;
      SKR: boolean;
      hasDangerousCargo: boolean;
@@ -206,6 +204,7 @@ export namespace API {
      warningNotes: string | null;
      sceneries: string[];
      path: string;
+      trainMaxSpeed: number;
    }
  }

@@ -270,6 +269,7 @@ export namespace API {
      warningNotes: string | null;
      hasDangerousCargo: boolean;
      hasExtraDeliveries: boolean;
+      trainMaxSpeed?: number;
    }

    export type Response = Data[];
@@ -1,4 +1,5 @@
 import { RouteLocationRaw } from 'vue-router';
+import { StationJSONData } from '../store/typings';

 export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
 export type ScenerySpawnType = 'passenger' | 'freight' | 'loco' | 'all';
@@ -90,6 +91,7 @@ export interface TrainTimetableData {
  routeDistance: number;
  sceneries: string[];
  timetablePath: TimetablePathElement[];
+  trainMaxSpeed: number;
 }

 export interface Station {
@@ -122,6 +124,7 @@ export interface StationGeneralInfo {
 export interface StationRoutes {
  single: StationRoutesInfo[];
  double: StationRoutesInfo[];
+  all: StationRoutesInfo[];

  singleElectrifiedNames: string[];
  singleOtherNames: string[];
@@ -142,6 +145,7 @@ export interface StationRoutesInfo {
  routeSpeed: number;
  routeTracks: number;
  hidden?: boolean;
+  realLineNo?: number;
 }

 export interface ActiveScenery {
@@ -2,27 +2,50 @@
  <section class="driver-view">
    <div class="view-wrapper">
      <div v-if="chosenTrain">
-        <div class="actions">
-          <a class="a-button btn--image" @click="$router.back()">
-            <img src="/images/icon-back.svg" alt="train icon" />
-            <span>
-              {{ $t('trains.driver-return-link') }}
-            </span>
-          </a>
+        <div class="actions-container">
+          <div class="actions actions-left">
+            <a class="a-button btn--image" @click="$router.back()">
+              <img src="/images/icon-back.svg" alt="train icon" />
+              <span>
+                {{ $t('trains.driver-return-link') }}
+              </span>
+            </a>
+          </div>

-          <router-link
-            :to="`/journal/timetables?search-driver=${chosenTrain.driverName}`"
-            class="a-button btn--image"
-          >
-            <span class="hidable">
-              {{ $t('trains.driver-journal-link') }}
-            </span>
-            <img src="/images/icon-train.svg" alt="train icon" />
-          </router-link>
+          <div class="actions actions-right">
+            <a
+              class="a-button btn--image"
+              :href="`https://srjp-td2.web.app/?id=${chosenTrain.id}`"
+              target="_blank"
+            >
+              <span class="hidable">
+                {{ $t('trains.driver-srjp-link') }}
+              </span>
+
+              <img src="/images/icon-srjp.svg" alt="srjp icon" />
+            </a>
+
+            <router-link
+              :to="`/journal/timetables?search-driver=${chosenTrain.driverName}`"
+              class="a-button btn--image"
+            >
+              <span class="hidable">
+                {{ $t('trains.driver-journal-link') }}
+              </span>
+
+              <img src="/images/icon-train.svg" alt="train icon" />
+            </router-link>
+          </div>
        </div>

        <div class="train-card">
-          <TrainInfo :train="chosenTrain" :extended="true" ref="trainInfo" />
+          <TrainInfo :train="chosenTrain" :extended="true" />
+
+          <button class="btn btn--action" style="margin: 1em 0" @click="copyStockToClipboard()">
+            <i class="fa-regular fa-copy"></i> {{ $t('trains.stock-copy') }}
+          </button>
+
+          <StockList :trainStockList="chosenTrain.stockList" />
          <TrainSchedule :train="chosenTrain" />
        </div>
      </div>
@@ -69,11 +92,13 @@
 import { computed } from 'vue';
 import TrainInfo from '../components/TrainsView/TrainInfo.vue';
 import TrainSchedule from '../components/TrainsView/TrainSchedule.vue';
+import StockList from '../components/Global/StockList.vue';
 import Loading from '../components/Global/Loading.vue';
 import { useMainStore } from '../store/mainStore';
 import { useApiStore } from '../store/apiStore';
 import { Status } from '../typings/common';
 import { regions as regionsJSON } from '../data/options.json';
+import { useI18n } from 'vue-i18n';

 const props = defineProps({
  trainId: {
@@ -88,6 +113,8 @@ const props = defineProps({
 const mainStore = useMainStore();
 const apiStore = useApiStore();

+const i18n = useI18n();
+
 const chosenTrain = computed(() =>
  mainStore.trainList.find((train) => train.id == props.trainId || train.modalId == props.modalId)
 );
@@ -99,10 +126,29 @@ const otherDriverTrains = computed(() => {
      (train.timetableData || train.online || train.lastSeen >= Date.now() - 60000)
  );
 });
+
+function copyStockToClipboard() {
+  const stockString = chosenTrain.value?.stockList.join(';');
+
+  if (!stockString) {
+    alert(i18n.t('trains.stock-clipboard-failure'));
+    return;
+  }
+
+  navigator.clipboard
+    .writeText(stockString)
+    .then(() => {
+      prompt(i18n.t('trains.stock-clipboard-success'), stockString);
+    })
+    .catch(() => {
+      alert(i18n.t('trains.stock-clipboard-failure'));
+    });
+}
 </script>

 <style lang="scss" scoped>
-@import '../styles/responsive';
+@use '../styles/responsive';
+@use 'sass:color';

 $viewBgCol: #1a1a1a;

@@ -113,24 +159,30 @@ $viewBgCol: #1a1a1a;
  min-height: calc(100vh - 7em);
 }

-.actions {
+.actions-container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5em;
 }

-.actions > a {
+.actions {
+  display: flex;
+  gap: 0.5em;
+}
+
+.actions-container > .actions > a {
  background-color: $viewBgCol;
  padding: 0.5em;
  border-radius: 0.5em 0.5em 0 0;

  &:hover {
-    background-color: lighten($viewBgCol, 10);
+    background-color: color.adjust($viewBgCol, $lightness: 10%);
  }
 }

 .train-card {
+  padding: 1em;
  background-color: $viewBgCol;
  border-radius: 0 0 0.5em 0.5em;
 }
@@ -158,8 +210,8 @@ $viewBgCol: #1a1a1a;
  gap: 0.5em;
 }

-@include smallScreen {
-  .actions > a > span.hidable {
+@include responsive.smallScreen{
+  span.hidable {
    display: none;
  }
 }
@@ -65,6 +65,8 @@ interface DispatchersQueryParams {
  stationHash?: string;
  timestampFrom?: number;
  timestampTo?: number;
+  dateFrom?: string;
+  dateTo?: string;
  countFrom?: number;
  countLimit?: number;
  sortBy?: Journal.DispatcherSorter['id'];
@@ -127,7 +129,8 @@ export default defineComponent({
    const searchersValues = reactive({
      'search-dispatcher': '',
      'search-station': '',
-      'search-date': ''
+      'search-date-from': '',
+      'search-date-to': ''
    } as Journal.DispatcherSearchType);

    provide('sorterActive', sorterActive);
@@ -189,7 +192,8 @@ export default defineComponent({
    handleRouteParams() {
      this.$router.push({
        query: {
-          'search-date': this.searchersValues['search-date'] || undefined,
+          'search-date-from': this.searchersValues['search-date-from'] || undefined,
+          'search-date-to': this.searchersValues['search-date-to'] || undefined,
          'search-station': this.searchersValues['search-station'] || undefined,
          'search-dispatcher': this.searchersValues['search-dispatcher'] || undefined
        }
@@ -235,7 +239,8 @@ export default defineComponent({
    },

    setOptions(options: { [key: string]: string }) {
-      this.searchersValues['search-date'] = options['search-date'] ?? '';
+      this.searchersValues['search-date-from'] = options['search-date-from'] ?? '';
+      this.searchersValues['search-date-to'] = options['search-date-to'] ?? '';
      this.searchersValues['search-station'] = options['search-station'] ?? '';
      this.searchersValues['search-dispatcher'] = options['search-dispatcher'] ?? '';

@@ -267,22 +272,18 @@ export default defineComponent({
      this.scrollDataLoaded = true;
    },

-    async fetchHistoryData() {
+    async fetchHistoryData() {      
      const queryParams: DispatchersQueryParams = {};

      const dispatcherName = this.searchersValues['search-dispatcher'].trim() || undefined;
      const stationName = this.searchersValues['search-station'].trim() || undefined;
-      const dateString = this.searchersValues['search-date'].trim() || undefined;
-
-      const timestampFrom = dateString
-        ? Date.parse(new Date(dateString).toISOString()) - 120 * 60 * 1000
-        : undefined;
-
-      const timestampTo = timestampFrom ? timestampFrom + 86400000 : undefined;
+      const dateFromString = this.searchersValues['search-date-from'].trim() || undefined;
+      const dateToString = this.searchersValues['search-date-to'].trim() || undefined;

      queryParams['dispatcherName'] = dispatcherName;
-      queryParams['timestampFrom'] = timestampFrom;
-      queryParams['timestampTo'] = timestampTo;
+      queryParams['dateFrom'] = dateFromString;
+      queryParams['dateTo'] = dateToString ? `${dateToString}T23:00:00` : undefined;
+
      queryParams['countLimit'] = 30;

      if (stationName && stationName.startsWith('#'))
@@ -331,5 +332,5 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../styles/JournalSection.scss';
+@use '../styles/journal-section';
 </style>
@@ -215,7 +215,7 @@ export default defineComponent({
      'search-issuedFrom': '',
      'search-via': '',
      'search-terminatingAt': '',
-      'search-date': ''
+      'search-date-from': ''
    } as Journal.TimetableSearchType);

    const countFromIndex = ref(0);
@@ -352,7 +352,7 @@ export default defineComponent({
      const driverName = this.searchersValues['search-driver'].trim() || undefined;
      const trainNo = this.searchersValues['search-train'].trim() || undefined;
      const authorName = this.searchersValues['search-dispatcher'].trim() || undefined;
-      const dateFrom = this.searchersValues['search-date'].trim() || undefined;
+      const dateFrom = this.searchersValues['search-date-from'].trim() || undefined;
      const issuedFrom = this.searchersValues['search-issuedFrom'].trim() || undefined;
      const via = this.searchersValues['search-via'].trim() || undefined;
      const terminatingAt = this.searchersValues['search-terminatingAt'].trim() || undefined;
@@ -482,5 +482,5 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../styles/JournalSection.scss';
+@use '../styles/journal-section';
 </style>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Spythere	16b3bb3683	Merge pull request #126 from Spythere/development v1.29.2	2025-04-15 01:15:42 +02:00
Spythere	93e242c0f5	chore: additional styles	2025-04-15 01:10:31 +02:00
Spythere	861206a5ab	chore: updated look of station stats; minor layout improvements	2025-04-14 21:37:59 +02:00
Spythere	a47399fe1b	chore: added driver stats percentage	2025-04-14 21:02:46 +02:00
Spythere	8e196c8279	chore: switched drivers filter from text to select input (TrainsView); updated inputs clear buttons	2025-04-14 19:24:28 +02:00
Spythere	be55bac9fe	chore: updated networking settings	2025-04-14 19:24:24 +02:00
Spythere	c5e53057eb	hotfix: post-upgrade adjustments	2025-03-29 16:08:34 +01:00
Spythere	4ba5d544af	bump: v1.29.2	2025-03-26 18:04:19 +01:00
Spythere	22b6177560	restruct: updated sass version and rules	2025-03-26 18:04:00 +01:00
Spythere	9b6c6ee756	Merge pull request #125 from Spythere/development v1.29.1	2025-03-24 14:58:12 +01:00
Spythere	829059d35b	chore: added saving the routes visibility state in localStorage	2025-03-23 16:27:56 +01:00
Spythere	b56e114ef9	restruct: scenery info components	2025-03-23 16:20:38 +01:00
Spythere	71b4cc3bdb	fix: sticky table header bug	2025-03-22 16:10:37 +01:00
Spythere	8cc773ffb5	fix: filter card responsiveness	2025-03-22 16:08:35 +01:00
Spythere	427b4c03e4	chore: added hiding & showing internal routes in scenery view	2025-03-22 15:57:48 +01:00
Spythere	46dc43d652	bump: v1.29.1	2025-03-17 14:15:09 +01:00
Spythere	6435d12090	fix: resetting slider filters values	2025-03-17 14:14:13 +01:00
Spythere	e41b8cfa98	chore: added internal station routes filters	2025-03-17 14:04:43 +01:00
Spythere	bc81bb2a38	Merge pull request #124 from Spythere/development v1.29.0 hotfixes	2025-02-13 18:39:53 +01:00
Spythere	e6c064d15d	fix: reworked train stop statuses descriptions and their tooltip styles	2025-02-13 18:38:32 +01:00
Spythere	4d1df5165c	hotfix: proper schedule line tracks changing	2025-02-13 17:55:19 +01:00
Spythere	43ac2be3e7	Merge pull request #123 from Spythere/development Development	2025-02-05 14:32:24 +01:00
Spythere	75c4e56183	fix: badge layout	2025-02-05 14:31:06 +01:00
Spythere	931f6b9fbd	fix: train speed limits	2025-02-05 14:29:18 +01:00
Spythere	21fa1f8699	Merge pull request #122 from Spythere/development hotfix: donation card actions layout	2025-02-04 23:34:13 +01:00
Spythere	877ef50a97	hotfix: donation card actions layout	2025-02-04 23:33:27 +01:00
Spythere	933be53630	Merge pull request #121 from Spythere/development hotfix: lastSeen data filtering synchronization	2025-02-04 22:59:09 +01:00
Spythere	eef4103960	hotfix: lastSeen data filtering synchronization	2025-02-04 22:57:27 +01:00
Spythere	9fafbe2c7f	Merge pull request #120 from Spythere/development v1.29.0	2025-02-04 20:50:29 +01:00
Spythere	666ba07307	chore: added SRJP external link	2025-02-04 18:14:58 +01:00
Spythere	b63328f97c	fix: journal double api fetching	2025-02-04 16:48:46 +01:00
Spythere	342127d541	chore: improved journal filtering by date	2025-02-04 16:42:48 +01:00
Spythere	c6ab0d21de	bump: v1.29.0	2025-02-04 15:15:21 +01:00
Spythere	da4476bdf0	feat: saving train table scroll position	2025-02-04 15:14:58 +01:00
Spythere	a950b4bef4	chore: calculating max train speed based on its mass	2025-02-04 15:11:11 +01:00
Spythere	5aa9297ec5	chore: resettings all train filter options on click	2025-02-04 14:17:04 +01:00
Spythere	0af49befc6	chore: changed layout of journal timetable badges	2025-02-04 14:12:47 +01:00
Spythere	4da0ab475b	chore: changed placement of the offline icon	2025-02-04 14:12:20 +01:00
Spythere	1fa5934784	chore: added timetable vmax to journal	2025-02-04 00:05:42 +01:00
Spythere	5fb1a87b41	chore: added max timetable speed; route pairing fix	2025-02-03 23:51:47 +01:00
Spythere	8a5687cc01	chore: added different border width for double track routes	2025-02-03 22:48:38 +01:00
Spythere	c5fe929b9a	bump: v1.28.8	2025-02-02 22:22:23 +01:00
Spythere	5787deeaf8	restruct: added interal lines info to train schedule; minor fixes	2025-02-02 22:22:04 +01:00
Spythere	130732921b	Merge pull request #119 from Spythere/development v1.28.7	2025-01-28 14:51:24 +01:00
Spythere	1b2cd34e86	fix: responsive text center	2025-01-28 14:32:48 +01:00
Spythere	17bda9e6e7	chore: added scenery offline icon in active train schedule; icon improvements	2025-01-28 14:23:57 +01:00
Spythere	c66ff8feed	bump: v1.28.7	2025-01-15 16:26:02 +01:00
Spythere	027cdee25a	fix: twr polish locale	2025-01-15 16:24:56 +01:00
Spythere	435cfb3b3f	chore: added offline players indicators in the scenery view	2025-01-15 16:23:26 +01:00
Spythere	425241c8e7	Merge pull request #118 from Spythere/development v1.28.6	2025-01-11 13:22:13 +01:00
Spythere	f24f961d52	fix: warning notes display for TN & PN in journal	2025-01-11 13:09:45 +01:00
Spythere	4718eeeaaf	bump: v1.28.6	2025-01-11 00:21:11 +01:00
Spythere	931fd7b21b	feat: copying a railway stock of active drivers and timetable journal	2025-01-11 00:20:58 +01:00
Spythere	bb79c5033a	chore: added icon packs	2025-01-10 23:20:24 +01:00
Spythere	ee290788dc	Merge pull request #117 from Spythere/development v1.28.5	2024-12-23 16:50:34 +01:00
Spythere	a87d1060d3	chore: adjusted christmas dates	2024-12-23 16:45:46 +01:00
Spythere	1804d6d0f0	bump: v1.28.5	2024-12-23 16:44:59 +01:00
Spythere	77250e30c7	fix: preview tooltip fallback image	2024-12-23 16:44:42 +01:00
Spythere	c5aefd03b8	Merge pull request #116 from Spythere/development 1.28.4 - minor fixes & updates	2024-12-20 16:27:08 +01:00
Spythere	2ec4694bd3	restruct: train info & timetable code	2024-12-20 15:51:16 +01:00
Spythere	729f66bcdb	chore: added changing logo to christmas version	2024-12-20 15:46:34 +01:00
Spythere	b746843086	Merge pull request #115 from Spythere/development v1.28.4	2024-11-15 19:00:00 +01:00
Spythere	cbbd06fecd	bump: v1.28.4	2024-11-15 18:52:21 +01:00
Spythere	11e99b6af0	hotfix: stations sorting by 'no limit'	2024-11-15 18:51:34 +01:00
Spythere	31f4a2e5b2	Merge pull request #114 from Spythere/development v1.28.3	2024-10-22 21:30:53 +02:00
Spythere	22514c3263	bump: v.1.28.3	2024-10-22 21:22:37 +02:00
Spythere	0df673467c	fix: image loading styles	2024-10-22 21:22:22 +02:00
Spythere	6377e13809	refactor: footer component	2024-10-22 21:13:23 +02:00
Spythere	13fa633db4	chore: updated api image source	2024-10-22 20:58:20 +02:00
Spythere	dd9661551c	fix: typo	2024-10-22 20:58:08 +02:00
Spythere	495012a5ca	Merge pull request #113 from Spythere/development hotfix: data fetching	2024-10-02 14:59:34 +02:00
Spythere	3cfccb1bb4	hotfix: data fetching	2024-10-02 14:58:58 +02:00