Merge wersji dev do produkcji (1.11)

Wersja produkcyjna 1.11.0
fix: responsywność
2026-05-03 13:28:11 +00:00 · 2022-12-26 22:58:17 +01:00 · 2022-12-26 20:01:10 +01:00 · 2022-12-26 19:37:52 +01:00 · 2022-12-26 18:52:31 +01:00 · 2022-12-26 18:51:50 +01:00
130 changed files with 15605 additions and 19601 deletions
@@ -1,3 +1,6 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
 name: Deploy to Firebase Hosting on PR
 'on': pull_request
 jobs:
@@ -11,4 +14,4 @@ jobs:
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_STACJOWNIK_TD2 }}'
-          projectId: stacjownik-td2
+          projectId: stacjownik-td2
@@ -1,5 +1,6 @@
 .DS_Store
 node_modules
+/dev-dist
 /dist

 # local env files
@@ -1,5 +0,0 @@
-module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}
@@ -1,7 +1,11 @@
 {
  "hosting": {
    "public": "dist",
-    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
    "rewrites": [
      {
        "source": "**",
@@ -10,4 +14,3 @@
    ]
  }
 }
-
@@ -1,54 +1,34 @@
-<!DOCTYPE html>
-<html lang="pl">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-
-    <meta name="keywords" content="Stacjownik, TD2, Train Driver 2, stacjownik-td2" />
-    <meta name="description" content="Automatycznie odświeżana strona wyświetlająca stacje w Train Driver 2!" />
-
-    <title>Stacjownik</title>
-
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-    <link rel="manifest" href="/site.webmanifest" />
-    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
-    <meta name="msapplication-TileColor" content="#da532c" />
-    <meta name="theme-color" content="#ffffff" />
-
-    <link rel="icon" href="favicon-64.png" sizes="64x64" type="image/png" />
-    <link rel="icon" href="favicon-32.png" sizes="32x32" type="image/png" />
-    <link rel="icon" href="favicon-62.png" sizes="62x62" type="image/png" />
-    <link rel="icon" href="favicon-16.png" sizes="16x16" type="image/png" />
-    <link rel="icon" href="favicon.ico" />
-
-    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap" rel="stylesheet" />
-
-    <script src="https://www.gstatic.com/firebasejs/8.1.1/firebase-app.js"></script>
-
-    <script>
-      const firebaseConfig = {
-        apiKey: 'AIzaSyBI36X2-p7vU1flxoJdCEc0noByyTe1mpw',
-        authDomain: 'stacjownik-td2.firebaseapp.com',
-        databaseURL: 'https://stacjownik-td2.firebaseio.com',
-        projectId: 'stacjownik-td2',
-        storageBucket: 'stacjownik-td2.appspot.com',
-      };
-
-      firebase.initializeApp(firebaseConfig);
-    </script>
-  </head>
-
-  <body>
-    <noscript>
-      <strong
-        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please
-        enable it to continue.</strong
-      >
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="pl">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+
+    <meta name="keywords" content="Stacjownik, TD2, Train Driver 2, stacjownik-td2" />
+    <meta name="description" content="Automatycznie odświeżana strona wyświetlająca stacje w Train Driver 2!" />
+
+    <title>Stacjownik</title>
+
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
+    <meta name="msapplication-TileColor" content="#da532c" />
+    <meta name="theme-color" content="#ffffff" />
+
+    <link rel="icon" href="favicon-64.png" sizes="64x64" type="image/png" />
+    <link rel="icon" href="favicon-32.png" sizes="32x32" type="image/png" />
+    <link rel="icon" href="favicon-62.png" sizes="62x62" type="image/png" />
+    <link rel="icon" href="favicon-16.png" sizes="16x16" type="image/png" />
+    <link rel="icon" href="favicon.ico" />
+
+    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
@@ -1,37 +1,33 @@
 {
  "name": "stacjownik",
-  "version": "1.9.9",
+  "version": "1.11.0",
  "private": true,
  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "deploy-prod": "npm run build && firebase deploy --only hosting:prod",
-    "deploy-dev": "npm run build && firebase deploy --only hosting:dev"
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "deploy": "yarn build && firebase deploy --only hosting",
+    "preview": "yarn build && vite preview"
  },
  "dependencies": {
    "core-js": "^3.12.1",
-    "dotenv": "^8.6.0",
+    "dotenv": "^16.0.3",
    "firebase": "^9.8.1",
    "howler": "^2.2.1",
    "pinia": "^2.0.14",
+    "sass": "^1.53.0",
    "socket.io-client": "^4.4.1",
-    "vue": "^3.2.34",
+    "vue": "^3.2.37",
    "vue-i18n": "^9.1.6",
-    "vue-router": "^4.0.0-0",
-    "vuex": "^4.0.2"
+    "vue-router": "^4.0.0-0"
  },
  "devDependencies": {
-    "@types/node": "^17.0.35",
-    "@vue/cli-plugin-babel": "^5.0.4",
-    "@vue/cli-plugin-router": "^5.0.4",
-    "@vue/cli-plugin-typescript": "^5.0.4",
-    "@vue/cli-plugin-vuex": "^5.0.4",
-    "@vue/cli-service": "^5.0.4",
-    "@vue/compiler-sfc": "^3.1.0",
-    "axios": "^0.21.1",
-    "sass": "^1.32.13",
-    "sass-loader": "^8.0.2",
-    "typescript": "^4.7.3"
+    "@types/node": "^18.11.17",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "axios": "^1.2.1",
+    "typescript": "^4.9.4",
+    "vite": "^4.0.3",
+    "vite-plugin-pwa": "^0.14.0",
+    "vue-tsc": "^1.0.18"
  },
  "browserslist": [
    "> 1%",
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00251 14.9297L0 1.07422H6.14651L8.00251 4.27503L9.84583 1.07422H16L8.00251 14.9297Z" fill="black"/>
+</svg>
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:
@@ -1,6 +1,6 @@
 {
-    "name": "",
-    "short_name": "",
+    "name": "Stacjownik TD2",
+    "short_name": "Stacjownik",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
@@ -13,7 +13,8 @@
            "type": "image/png"
        }
    ],
-    "theme_color": "#ffffff",
-    "background_color": "#ffffff",
-    "display": "standalone"
+    "theme_color": "#ffc014",
+    "background_color": "#4d4d4d",
+    "display": "standalone",
+    "start_url": "."
 }
@@ -17,22 +17,36 @@
  }
 }

+.modal-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all $animDuration $animType;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    transform: translateY(-25%);
+    opacity: 0;
+  }
+}
+
 .route {
  margin: 0 0.2em;

-  &-active {
+  &-active,
+  &[data-active='true'] {
    color: $accentCol;
    font-weight: bold;
  }
 }

 // APP
-.app {
+#app {
  color: white;
  font-size: 1rem;

  @include smallScreen() {
-    font-size: calc(0.4rem + 1.4vw);
+    font-size: calc(0.5rem + 1.3vw);
  }
 }

@@ -40,8 +54,8 @@
 .app_container {
  display: flex;
  flex-flow: column;
-  height: 100vh;
-  min-height: 800px;
+
+  min-height: 100vh;

  header {
    flex: 0 0 auto;
@@ -68,163 +82,6 @@
  border-radius: 0 0 1em 1em;
 }

-// Error icon
-.wip-alert {
-  padding: 0 0.5em;
-  text-align: center;
-}
-
-.icon-error {
-  width: 13em;
-  margin: 0.5em 0;
-}
-
-// HEADER
-.app_header {
-  display: flex;
-  justify-content: center;
-
-  position: relative;
-  background-color: $primaryCol;
-}
-
-.header {
-  &_body {
-    max-width: 21em;
-  }
-
-  &_container {
-    display: flex;
-    justify-content: center;
-    position: relative;
-
-    width: 1350px;
-    padding: 0.5em 0.3em 0 0.3em;
-    border-radius: 0 0 1em 1em;
-  }
-
-  &_brand {
-    img {
-      width: 100%;
-    }
-  }
-
-  &_info {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    max-width: 100%;
-
-    font-size: 1.2em;
-  }
-
-  &_links {
-    display: flex;
-    justify-content: center;
-
-    border-radius: 0.7em;
-
-    font-size: 1.25em;
-    padding: 0.5em;
-  }
-
-  &_icons {
-    position: absolute;
-    right: 0;
-    top: 0;
-    height: 100%;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    align-items: flex-end;
-    padding: 0.5em 0.5em;
-
-    @include smallScreen() {
-      right: auto;
-      left: 0.75em;
-      padding: 0;
-
-      align-items: center;
-    }
-  }
-}
-
-// ICONS
-.icons {
-  position: relative;
-
-  &-top {
-    img {
-      width: 2.5em;
-
-      cursor: pointer;
-    }
-
-    margin-bottom: 0.5em;
-  }
-
-  &-bottom {
-    display: flex;
-
-    a {
-      margin-left: 0.6em;
-      user-select: none;
-    }
-
-    img {
-      width: 1.9em;
-    }
-
-    @include smallScreen() {
-      flex-direction: column;
-
-      a {
-        margin: 0.25em 0;
-      }
-    }
-  }
-}
-
-// COUNTER
-.info_counter {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  span {
-    margin: 0 0.15em;
-  }
-
-  img {
-    width: 1.35em;
-  }
-}
-
-// REGION SELECTION
-.info_region {
-  color: white;
-  font-weight: bold;
-
-  display: flex;
-  justify-content: flex-end;
-
-  .select-box_content button {
-    background-color: transparent;
-    font-weight: bold;
-    padding: 0.1em 0.5em;
-    color: paleturquoise;
-
-  }
-
-  .options {
-    font-size: 0.9em;
-  }
-
-  .arrow {
-    padding: 0;
-  }
-}
-
 // FOOTER
 footer.app_footer {
  max-width: 100%;
@@ -1,110 +1,71 @@
 <template>
-  <div class="app">
-    <div class="app_container">
-      <!-- <div class="wip-alert">
-        <img class="icon-error" :src="iconError" alt="error" />
-        <h2>Stacjownik tymczasowo nieaktywny!</h2>
-        <p>Absolutny zakaz wjazdu!</p>
-      </div> -->
-      <header class="app_header">
-        <div class="header_container">
-          <div class="header_icons">
-            <span class="icons-top">
-              <img :src="icons.pl" alt="icon-pl" @click="changeLang('en')" v-if="currentLang == 'pl'" />
-              <img :src="icons.en" alt="icon-en" @click="changeLang('pl')" v-else />
-            </span>
-            <span class="icons-bottom">
-              <a href="https://www.paypal.com/paypalme/spythere" target="_blank">
-                <img :src="icons.dollar" alt="icon paypal" />
-              </a>
+  <div class="app_container">
+    <transition name="modal-anim">
+      <keep-alive>
+        <TrainModal v-if="store.chosenModalTrainId" />
+      </keep-alive>
+    </transition>

-              <a href="https://discord.gg/x2mpNN3svk" target="_blank">
-                <img :src="icons.discord" alt="icon discord" />
-              </a>
-            </span>
-          </div>
+    <UpdatePrompt />

-          <div class="header_body">
-            <status-indicator />
-            <span class="header_brand">
-              <img :src="brand_logo" alt="Stacjownik" />
-            </span>
+    <AppHeader :current-lang="currentLang" @change-lang="changeLang" />

-            <span class="header_info">
-              <Clock />
+    <main class="app_main">
+      <router-view v-slot="{ Component }">
+        <keep-alive exclude="JournalView">
+          <component :is="Component" :key="$route.name" />
+        </keep-alive>
+      </router-view>
+    </main>

-              <div class="info_counter">
-                <img src="@/assets/icon-dispatcher.svg" alt="icon dispatcher" />
-                <span class="text--primary">{{ onlineDispatchers.length }}</span>
-                <span class="text--grayed"> / </span>
-                <span class="text--primary">{{ trainList.length }}</span>
-                <img src="@/assets/icon-train.svg" alt="icon train" />
-              </div>
+    <footer class="app_footer">
+      &copy;
+      <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
+      {{ new Date().getUTCFullYear() }} | <a :href="releaseURL" target="_blank">v{{ VERSION }}</a>

-              <span class="info_region">
-                <SelectBox :itemList="computedRegions" :defaultItemIndex="0" @selected="changeRegion" />
-              </span>
-            </span>
-
-            <span class="header_links">
-              <router-link class="route" active-class="route-active" to="/" exact>
-                {{ $t('app.sceneries') }}
-              </router-link>
-              /
-              <router-link class="route" active-class="route-active" to="/trains">{{ $t('app.trains') }}</router-link>
-              /
-              <router-link class="route" active-class="route-active" to="/journal">
-                {{ $t('app.journal') }}
-              </router-link>
-            </span>
-          </div>
-        </div>
-      </header>
-
-      <main class="app_main">
-        <router-view v-slot="{ Component }">
-          <!-- <transition name="view-anim" mode="out-in"> -->
-          <keep-alive>
-            <component :is="Component" :key="$route.path" />
-          </keep-alive>
-        </router-view>
-      </main>
-
-      <footer class="app_footer">
-        &copy;
-        <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
-        {{ new Date().getUTCFullYear() }} | v{{ VERSION }}
-
-        <div style="display: none">&int; ukryta taktyczna całka do programowania w HTMLu</div>
-      </footer>
-    </div>
+      <div style="display: none">&int; ukryta taktyczna całka do programowania w HTMLu</div>
+    </footer>
  </div>
 </template>

 <script lang="ts">
-import { computed, defineComponent, provide, ref } from 'vue';
+import { computed, defineComponent, KeepAlive, provide, ref, watch } from 'vue';

-import Clock from '@/components/App/Clock.vue';
-import StorageManager from '@/scripts/managers/storageManager';
+import Clock from './components/App/Clock.vue';

 import packageInfo from '.././package.json';
-import options from '@/data/options.json';

-import StatusIndicator from '@/components/App/StatusIndicator.vue';
-import SelectBox from '@/components/Global/SelectBox.vue';
+import StatusIndicator from './components/App/StatusIndicator.vue';
+import SelectBox from './components/Global/SelectBox.vue';
 import { useStore } from './store/store';
+import TrainModal from './components/Global/TrainModal.vue';
+import StorageManager from './scripts/managers/storageManager';
+import imageMixin from './mixins/imageMixin';
+import AppHeader from './components/App/AppHeader.vue';
+import axios from 'axios';
+import UpdatePrompt from './components/App/UpdatePrompt.vue';
+import { VERSION } from 'vue-i18n';
+import { RouterView } from 'vue-router';
+import useCustomSW from './mixins/useCustomSW';

 export default defineComponent({
  components: {
    Clock,
    StatusIndicator,
    SelectBox,
+    TrainModal,
+    AppHeader,
+    UpdatePrompt,
  },

+  mixins: [imageMixin],
+
  setup() {
    const store = useStore();
    store.connectToAPI();

+    const { offlineReady } = useCustomSW();
+
    const isFilterCardVisible = ref(false);

    provide('isFilterCardVisible', isFilterCardVisible);
@@ -120,73 +81,53 @@ export default defineComponent({
    };
  },

-  computed: {
-    trainList() {
-      return this.store.trainList.filter((train) => train.online);
-    },
-
-    computedRegions() {
-      return this.options.regions.map((region) => {
-        const regionStationCount =
-          this.store.apiData.stations?.filter((station) => station.region == region.id && station.isOnline).length || 0;
-        const regionTrainCount = this.store.apiData.trains?.filter((train) => train.region == region.id && train.online).length || 0;
-
-        return {
-          id: region.id,
-          value: `${region.value} <div class='text--grayed'>${regionStationCount} / ${regionTrainCount}</div>`,
-          selectedValue: region.value,
-        };
-      });
-    },
-  },
-
  data: () => ({
    VERSION: packageInfo.version,
-    updateModalVisible: false,
-    hasReleaseNotes: false,
-    options,

    currentLang: 'pl',
-
-    brand_logo: require('@/assets/stacjownik-header-logo.svg'),
-
-    icons: {
-      en: require('@/assets/icon-en.jpg'),
-      pl: require('@/assets/icon-pl.svg'),
-      error: require('@/assets/icon-error.svg'),
-      dollar: require('@/assets/icon-dollar.svg'),
-      dispatcher: require('@/assets/icon-dispatcher.svg'),
-      train: require('@/assets/icon-train.svg'),
-      discord: require('@/assets/icon-discord.png'),
-    },
+    releaseURL: '',
  }),

  created() {
    this.loadLang();
+
+    this.store.isOffline = !window.navigator.onLine;
+
+    window.addEventListener('offline', () => {
+      this.store.isOffline = true;
+
+      this.store.apiData = {
+        stations: [],
+        dispatchers: [],
+        trains: [],
+        connectedSocketCount: 0,
+      };
+
+      this.store.setOnlineData();
+    });
+
+    window.addEventListener('online', () => {
+      this.store.isOffline = false;
+    });
  },

  async mounted() {
-    if (StorageManager.getStringValue('version') != this.VERSION) {
-      StorageManager.setStringValue('version', this.VERSION);
+    this.setReleaseURL();

-      if (this.hasReleaseNotes) StorageManager.setBooleanValue('version_notes_read', false);
-    }
+    watch(
+      () => this.store.blockScroll,
+      (value) => {
+        if (value) {
+          document.body.classList.add('no-scroll');
+          return;
+        }

-    this.updateModalVisible = this.hasReleaseNotes && !StorageManager.getBooleanValue('version_notes_read');
-
-    this.updateToNewestVersion();
+        document.body.classList.remove('no-scroll');
+      }
+    );
  },

  methods: {
-    toggleUpdateModal() {
-      this.updateModalVisible = !this.updateModalVisible;
-      StorageManager.setBooleanValue('version_notes_read', true);
-    },
-
-    changeRegion(region: { id: string; value: string }) {
-      this.store.changeRegion(region);
-    },
-
    changeLang(lang: string) {
      this.$i18n.locale = lang;
      this.currentLang = lang;
@@ -194,12 +135,18 @@ export default defineComponent({
      StorageManager.setStringValue('lang', lang);
    },

-    updateToNewestVersion() {
-      if (!StorageManager.isRegistered('unavailable-status')) {
-        StorageManager.setBooleanValue('unavailable-status', true);
-        StorageManager.setBooleanValue('ending-status', true);
-        StorageManager.setBooleanValue('no-space-status', true);
-        StorageManager.setBooleanValue('afk-status', true);
+    async setReleaseURL() {
+      try {
+        const releaseData = await (
+          await axios.get('https://api.github.com/repos/Spythere/stacjownik/releases/latest')
+        ).data;
+
+        if (!releaseData) return;
+
+        this.releaseURL = releaseData.html_url;
+      } catch (error) {
+        console.error(`Wystąpił błąd podczas pobierania danych z API GitHuba: ${error}`);
+        return;
      }
    },

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg enable-background="new 0 0 32 32" id="Glyph" version="1.1" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M27.414,24.586l-5.077-5.077C23.386,17.928,24,16.035,24,14c0-5.514-4.486-10-10-10S4,8.486,4,14  s4.486,10,10,10c2.035,0,3.928-0.614,5.509-1.663l5.077,5.077c0.78,0.781,2.048,0.781,2.828,0  C28.195,26.633,28.195,25.367,27.414,24.586z M7,14c0-3.86,3.14-7,7-7s7,3.14,7,7s-3.14,7-7,7S7,17.86,7,14z" id="XMLID_223_"  fill="white" /></svg>
@@ -0,0 +1,275 @@
+<template>
+  <header class="app_header">
+    <div class="header_container">
+      <div class="header_icons">
+        <span class="icons-top">
+          <img :src="getIcon('pl')" alt="icon-pl" @click="changeLang('en')" v-if="currentLang == 'pl'" />
+          <img :src="getIcon('en', 'jpg')" alt="icon-en" @click="changeLang('pl')" v-else />
+        </span>
+
+        <span class="icons-bottom">
+          <a href="https://www.paypal.com/paypalme/spythere" target="_blank">
+            <img :src="getIcon('dollar')" alt="icon paypal" />
+          </a>
+
+          <a href="https://discord.gg/x2mpNN3svk" target="_blank">
+            <img :src="getIcon('discord', 'png')" alt="icon discord" />
+          </a>
+        </span>
+      </div>
+
+      <div class="header_body">
+        <StatusIndicator />
+
+        <span class="header_brand">
+          <router-link to="/">
+            <img :src="getImage('stacjownik-header-logo.svg')" alt="Stacjownik" />
+          </router-link>
+        </span>
+
+        <span class="header_info">
+          <Clock />
+
+          <div class="info_counter">
+            <img :src="getIcon('dispatcher')" alt="icon dispatcher" />
+            <span class="text--primary">{{ onlineDispatchersCount }}</span>
+            <span class="text--grayed"> / </span>
+            <span class="text--primary">{{ onlineTrainsCount }}</span>
+            <img :src="getIcon('train')" alt="icon train" />
+          </div>
+
+          <span class="info_region">
+            <SelectBox :itemList="computedRegions" :defaultItemIndex="0" @selected="changeRegion" />
+          </span>
+        </span>
+
+        <span class="header_links">
+          <router-link class="route" active-class="route-active" to="/" exact>
+            {{ $t('app.sceneries') }}
+          </router-link>
+          /
+          <router-link class="route" active-class="route-active" to="/trains">{{ $t('app.trains') }}</router-link>
+          /
+          <router-link
+            class="route"
+            active-class="route-active"
+            :data-active="$route.path.startsWith('/journal')"
+            to="/journal"
+          >
+            {{ $t('app.journal') }}
+          </router-link>
+        </span>
+      </div>
+    </div>
+  </header>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../../store/store';
+import options from '../../data/options.json';
+import imageMixin from '../../mixins/imageMixin';
+import SelectBox from '../Global/SelectBox.vue';
+import StatusIndicator from './StatusIndicator.vue';
+import Clock from './Clock.vue';
+
+export default defineComponent({
+  emits: ['changeLang'],
+  mixins: [imageMixin],
+  props: {
+    currentLang: {
+      type: String,
+      required: true,
+    },
+  },
+  setup() {
+    return {
+      store: useStore(),
+    };
+  },
+  methods: {
+    changeRegion(region: { id: string; value: string }) {
+      this.store.changeRegion(region);
+    },
+    changeLang(lang: string) {
+      this.$emit('changeLang', lang);
+    },
+  },
+  computed: {
+    onlineTrainsCount() {
+      return this.store.trainList.filter((train) => train.online).length;
+    },
+    onlineDispatchersCount() {
+      return this.store.stationList.filter(
+        (station) => station.onlineInfo && station.onlineInfo.region == this.store.region.id
+      ).length;
+    },
+    computedRegions() {
+      return options.regions.map((region) => {
+        const regionStationCount =
+          this.store.apiData.stations?.filter((station) => station.region == region.id && station.isOnline).length || 0;
+        const regionTrainCount =
+          this.store.apiData.trains?.filter((train) => train.region == region.id && train.online).length || 0;
+        return {
+          id: region.id,
+          value: `${region.value} <div class='text--grayed'>${regionStationCount} / ${regionTrainCount}</div>`,
+          selectedValue: region.value,
+        };
+      });
+    },
+  },
+  components: { SelectBox, StatusIndicator, Clock },
+});
+</script>
+<style lang="scss" scoped>
+@import '../../styles/variables.scss';
+@import '../../styles/responsive.scss';
+
+// HEADER
+.app_header {
+  display: flex;
+  justify-content: center;
+
+  position: relative;
+  background-color: $primaryCol;
+}
+
+.header {
+  &_body {
+    max-width: 21em;
+    position: relative;
+
+    @include smallScreen {
+      max-width: 18em;
+    }
+  }
+
+  &_container {
+    display: flex;
+    justify-content: center;
+    position: relative;
+
+    width: 1350px;
+    padding: 0.5em 0.3em 0 0.3em;
+    border-radius: 0 0 1em 1em;
+  }
+
+  &_brand {
+    display: flex;
+
+    img {
+      width: 100%;
+      margin: 0 auto;
+    }
+  }
+
+  &_info {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    max-width: 100%;
+
+    font-size: 1.2em;
+  }
+
+  &_links {
+    display: flex;
+    justify-content: center;
+
+    border-radius: 0.7em;
+
+    font-size: 1.25em;
+    padding: 0.5em;
+  }
+
+  &_icons {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-end;
+    padding: 0.5em 0.5em;
+
+    @include smallScreen() {
+      right: auto;
+      left: 0.75em;
+      padding: 0;
+
+      align-items: center;
+    }
+  }
+}
+
+// ICONS
+.icons {
+  position: relative;
+
+  &-top {
+    img {
+      width: 2.5em;
+
+      cursor: pointer;
+    }
+
+    margin-bottom: 0.5em;
+  }
+
+  &-bottom {
+    display: flex;
+
+    a {
+      margin-left: 0.6em;
+      user-select: none;
+    }
+
+    img {
+      width: 1.9em;
+    }
+
+    @include smallScreen() {
+      flex-direction: column;
+
+      a {
+        margin: 0.25em 0;
+      }
+    }
+  }
+}
+
+// COUNTER
+.info_counter {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  span {
+    margin: 0 0.15em;
+  }
+
+  img {
+    width: 1.35em;
+  }
+}
+
+// REGION SELECTION
+.info_region {
+  color: white;
+  font-weight: bold;
+
+  display: flex;
+  justify-content: flex-end;
+
+  .select-box_content button {
+    background-color: transparent;
+    font-weight: bold;
+    padding: 0.1em 0.5em;
+    color: paleturquoise;
+  }
+
+  .options {
+    font-size: 0.9em;
+  }
+}
+</style>
@@ -1,31 +0,0 @@
-<template>
-  <div class="loading">{{message}}</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "@vue/runtime-core";
-
-export default defineComponent({
-  props: ["message"],
-});
-</script>
-
-<style lang="scss" scoped>
-.loading {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  min-height: 100%;
-
-  position: absolute;
-  top: 50%;
-  left: 50%;
-
-  transform: translate(-50%, -50%);
-
-  font-size: calc(0.75rem + 1vw);
-
-  color: #fdc62f;
-}
-</style>
@@ -161,20 +161,17 @@
 </template>

 <script lang="ts">
-import { DataStatus } from '@/scripts/enums/DataStatus';
-import { StoreData } from '@/scripts/interfaces/StoreData';
-import { useStore } from '@/store/store';
-import { StoreState } from '@/store/storeTypes';
-import { computed, defineComponent, watch } from 'vue';
+import { defineComponent } from 'vue';
+import { DataStatus } from '../../scripts/enums/DataStatus';
+import { useStore } from '../../store/store';
+import { StoreState } from '../../store/storeTypes';

 export default defineComponent({
  data() {
    return {
-      icons: {
-        statusIndicator: require('@/assets/signal-status-indicator.svg'),
-      },
      tooltipActive: false,
      indicator: {
+        offline: false,
        status: DataStatus.Loading,
        message: 'data-status.S3',
      },
@@ -196,6 +193,7 @@ export default defineComponent({

    return {
      dataStatus: store.dataStatuses,
+      store,
    };
  },

@@ -209,6 +207,13 @@ export default defineComponent({
        const trainsDataStatus = statuses.trains;
        const dispatcherDataStatus = statuses.dispatchers;

+        if (this.store.isOffline) {
+          this.setSignalStatus(DataStatus.Initialized);
+          this.indicator.status = DataStatus.Initialized;
+          this.indicator.message = 'data-status.S1-offline';
+          return;
+        }
+
        if (connectionStatus == DataStatus.Error) {
          this.setSignalStatus(connectionStatus);
          this.indicator.status = connectionStatus;
@@ -255,6 +260,10 @@ export default defineComponent({
      this.orangeLight = false;
      this.redBottomLight = false;

+      if (status == DataStatus.Initialized) {
+        this.redTopLight = true;
+      }
+
      if (status == DataStatus.Loaded) {
        this.greenLight = true;
      }
@@ -294,9 +303,8 @@ export default defineComponent({

 .status-indicator {
  position: absolute;
-  left: 50%;
+  left: 110%;
  bottom: 0;
-  transform: translateX(12em);
  z-index: 100;
 }

@@ -0,0 +1,168 @@
+<template>
+  <transition name="modal-anim">
+    <section class="update-modal card" v-if="releaseData && modalOpen">
+      <h2 class="modal_header text--primary">
+        <img :src="getImage('stacjownik-header-logo.svg')" alt="stacjownik logo" />
+
+        {{ releaseData.tag_name }}
+      </h2>
+
+      <div class="horizontal"></div>
+
+      <div class="modal_content">
+        <h3>{{ $t('update.title') }}</h3>
+        <a :href="releaseData.html_url" target="_blank">{{ $t('update.release-link') }}</a>
+
+        <br />
+        <br />
+
+        <p>{{ $t('update.paragraph1') }}</p>
+
+        <!-- <div class="modal_changelog" v-html="markdownReleaseBody"></div> -->
+      </div>
+
+      <div class="modal_actions">
+        <button class="btn btn--option" @click="modalOpen = false">{{ $t('update.confirm-button') }}</button>
+      </div>
+    </section>
+  </transition>
+</template>
+
+<script lang="ts">
+import axios from 'axios';
+import { defineComponent } from 'vue';
+import packageInfo from '../../../package.json';
+import imageMixin from '../../mixins/imageMixin';
+import { ReleaseAPIData } from '../../scripts/interfaces/github_api/ReleaseAPIData';
+import StorageManager from '../../scripts/managers/storageManager';
+import { useStore } from '../../store/store';
+
+
+const GH_LASTEST_RELEASE_URL = 'https://api.github.com/repos/Spythere/stacjownik/releases/latest';
+
+export default defineComponent({
+  mixins: [imageMixin],
+
+  mounted() {
+    this.fetchReleases();
+  },
+
+  data() {
+    return {
+      modalOpen: false,
+
+      releaseData: null as ReleaseAPIData | null,
+    };
+  },
+
+  setup() {
+    return {
+      store: useStore()
+    }
+  },
+
+  methods: {
+    async fetchReleases() {
+      const storedVersion = StorageManager.getStringValue('appVersion');
+      const appVersion = packageInfo.version;
+
+      // Zmiana
+      if (appVersion != storedVersion) {
+        StorageManager.setStringValue('appVersion', appVersion);
+
+        // Znajdź changelog na GitHubie, jeśli jest pokaż modal
+        try {
+          const releaseData: ReleaseAPIData = await (await axios.get(GH_LASTEST_RELEASE_URL)).data;
+          if (!releaseData) return;
+
+          const lastReleaseVersion = releaseData.tag_name.slice(1);
+
+          if (lastReleaseVersion == appVersion) {
+            this.releaseData = releaseData;        
+            this.modalOpen = true;
+
+            StorageManager.setStringValue('releaseURL', releaseData.html_url);
+          }
+        } catch (error) {
+          console.error(`Wystąpił błąd podczas pobierania danych z API GitHuba: ${error}`);
+        }
+      }
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/card.scss';
+@import '../../styles/responsive.scss';
+
+
+.modal-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all $animDuration $animType;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.45);
+  }
+}
+
+.update-modal {
+  text-align: center;
+  background-color: var(--clr-secondary);
+
+  padding: 1em;
+}
+
+.horizontal {
+  margin: 1em 0;
+
+  height: 2px;
+  width: 100%;
+  background-color: white;
+}
+
+.modal_header {
+  font-size: 1.6em;
+
+  img {
+    width: 50%;
+    vertical-align: text-top;
+  }
+}
+
+.modal_content {
+  font-size: 1.1em;
+
+  a {
+    text-decoration: underline;
+  }
+}
+
+.modal_actions {
+  margin-top: 2em;
+
+  button {
+    color: white;
+    padding: 0.5em;
+    font-size: 1.2em;
+
+    background-color: black;
+  }
+}
+
+.modal_changelog {
+  font-size: 0.8em;
+  margin-top: 2em;
+}
+
+@include smallScreen {
+  .update-modal {
+    height: auto;
+    max-width: 95%;
+  }
+}
+</style>
@@ -0,0 +1,69 @@
+<template>
+  <div class="update-prompt">
+    <transition name="prompt-anim">
+      <div class="prompt_content" v-if="!hidePrompt && needRefresh">
+        <div>{{ $t('update.title') }}</div>
+
+        <div class="prompt_actions">
+          <button class="btn btn--filled" @click="updateServiceWorker(true)">{{ $t('update.confirm-button') }}</button>
+          <button class="btn btn--filled" @click="hidePrompt = true">{{ $t('update.later-button') }}</button>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import useCustomSW from '../../mixins/useCustomSW';
+
+const hidePrompt = ref(false);
+const { needRefresh, updateServiceWorker } = useCustomSW();
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/variables.scss';
+
+.update-prompt {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  z-index: 200;
+}
+
+.prompt_content {
+  margin: 1em;
+  padding: 1em;
+
+  font-weight: bold;
+  background-color: black;
+
+  box-shadow: 0 0 10px 1px $accentCol;
+  border-radius: 1em;
+}
+
+.prompt_actions {
+  display: flex;
+  margin-top: 1em;
+  gap: 0.5em;
+
+  button {
+    width: 100%;
+  }
+}
+
+// Animation
+.prompt-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all 120ms ease-in;
+    transform: translateY(0);
+  }
+
+  &-enter-from,
+  &-leave-to {
+    transform: translateY(100%);
+  }
+}
+</style>
+
@@ -1,47 +0,0 @@
-<template>
-  <section
-    class="updates card"
-    v-if="cardOpen"
-  >
-    <h2>Ostatnie aktualizacje w Stacjowniku</h2>
-    <p>Tutaj będą pojawiać się informacje o kolejnych nowościach na stronie :)</p>
-
-    <ul>
-      <li
-        v-for="(update, i) in updates"
-        :key="i"
-      >
-        <div>{{update.date}}</div>
-
-        <div>
-          <span
-            v-for="(line, l) in content"
-            :key="l"
-          >{{line}}</span>
-        </div>
-      </li>
-    </ul>
-  </section>
-</template>
-
-<script>
-import { defineComponent } from "@vue/runtime-core";
-
-export default defineComponent({
-  data() {
-    return {
-      updates: {
-        date: "08/08/20",
-        content: [
-          "Lekko odświeżono wygląd strony, dodano nowy widok z pociągami online",
-          "Dodano animacje zmieniania widoków (zakładek)",
-          "Dodano przycisk zamykający kartę z filtrami",
-        ],
-      },
-    };
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-</style>
@@ -1,5 +1,5 @@
 <template>
-  <button class="action-btn">
+  <button class="action-btn btn--filled">
    <div class="button_content">
      <slot></slot>
    </div>
@@ -16,47 +16,6 @@ export default defineComponent({});
@import "../../styles/variables";
@import "../../styles/responsive";

-.action-btn {
-  background: #333;
-  border: none;
-
-  color: #bdbdbd;
-
-  font-size: 1em;
-  font-weight: 500;
-
-  padding: 0.35em 0.65em;
-  cursor: pointer;
-
-  transition: all 0.3s;
-
-  &.outlined {
-    border: 1px solid white;
-  }
-
-  img {
-    width: 1.25em;
-    vertical-align: middle;
-    margin-right: 0.35em;
-  }
-
-  p {
-    font-size: 1em;
-    overflow: hidden;
-  }
-
-  &.open {
-    color: $accentCol;
-    border: none;
-  }
-
-  &:hover,
-  &:focus {
-    color: $accentCol;
-    background: #5c5c5c;
-  }
-}
-
 .button_content {
  display: flex;
  justify-content: center;
@@ -20,7 +20,7 @@ export default defineComponent({
 .loading {
  position: absolute;
  left: 50%;
-  transform: translateX(-50%);
+  transform: translate(-50%, -50%);

  display: flex;
  justify-content: center;
@@ -9,7 +9,7 @@

    <img
      class="search-exit"
-      :src="exitIcon"
+      :src="getIcon('exit')"
      alt="exit-icon"
      @click="clearValue"
    />
@@ -18,11 +18,11 @@

 <script lang="ts">
 import { defineComponent, ref, watch } from "vue";
+import imageMixin from "../../mixins/imageMixin";

 export default defineComponent({
-  data: () => ({
-    exitIcon: require("@/assets/icon-exit.svg"),
-  }),
+  mixins: [imageMixin],
+
  emits: ["update:searchedValue", "clearValue"],
  props: {
    searchedValue: {
@@ -59,7 +59,7 @@ export default defineComponent({
      emit("clearValue");
    };

-    const updateValue = (e) => {
+    const updateValue = (e: any) => {
      if (!props.updateOnInput && e.keyCode == 13)
        emit("update:searchedValue", compSearchedValue.value);
    };
@@ -1,8 +1,7 @@
 <template>
-  <div class="select-box" >
+  <div class="select-box">
    <div class="select-box_content">
      <button class="selected" @click="toggleBox">
-        <span class="text--primary">{{ prefix }}</span>
        <span>{{ computedSelectedItem.selectedValue || computedSelectedItem.value }}</span>
      </button>

@@ -24,13 +23,14 @@
    </div>

    <div class="arrow">
-      <img :src="listOpen ? ascIcon : descIcon" alt="arrow-icon" />
+      <img :src="listOpen ? getIcon('arrow-asc') : getIcon('arrow-desc')" alt="arrow-icon" />
    </div>
  </div>
 </template>

 <script lang="ts">
-import { computed, defineComponent, Ref, ref } from '@vue/runtime-core';
+import { defineComponent, Ref, ref, computed } from 'vue';
+import imageMixin from '../../mixins/imageMixin';

 interface Item {
  id: string;
@@ -40,6 +40,7 @@ interface Item {

 export default defineComponent({
  emits: ['selected'],
+  mixins: [imageMixin],

  props: {
    itemList: {
@@ -58,11 +59,6 @@ export default defineComponent({
    },
  },

-  data: () => ({
-    ascIcon: require('@/assets/icon-arrow-asc.svg'),
-    descIcon: require('@/assets/icon-arrow-desc.svg'),
-  }),
-
  setup(props) {
    let listRef: Ref<Element | null> = ref(null);
    let buttonRef: Ref<HTMLButtonElement | null> = ref(null);
@@ -134,13 +130,14 @@ export default defineComponent({

 .select-box {
  position: relative;
+  width: auto;
 }

 .arrow {
  position: absolute;
  top: 50%;
  right: 0;
-  padding: 0.5em;
+  padding: 0;

  img {
    vertical-align: middle;
@@ -153,13 +150,17 @@ export default defineComponent({
 }

 button.selected {
-  background: #333;
-  color: white;
+  background-color: transparent;
+  color: paleturquoise;

  font-size: 1em;
+  font-weight: bold;
+
+  padding: 0.1em 0.5em;
+  margin-right: 2em;
+
+  display: flex;

-  padding: 0.35em 0.5em;
-  margin-right: 1.4em;

  width: 100%;
  cursor: pointer;
@@ -170,7 +171,7 @@ button.selected {
  text-align: left;

  &:focus {
-    background: #555;
+    background-color: #262626;
  }
 }

@@ -191,8 +192,9 @@ ul.options {
  height: auto;

  z-index: 100;
-
  width: 100%;
+
+  font-size: 0.9em;
 }

 li.option {
@@ -206,6 +208,7 @@ li.option {
    appearance: none;
    border: none;
    outline: none;
+    background: none;

    &:focus + span {
      color: $accentCol;
@@ -221,11 +224,11 @@ li.option {
    position: relative;

    display: inline-block;
-    background-color: hsla(0, 0%, 15%, 0.95);
+    background-color: #262626f2;

    &:hover,
    &:focus {
-      background-color: hsla(0, 0%, 20%, 0.95);
+      background-color: #333333f2;
    }

    padding: 0.5em 0;
@@ -47,9 +47,9 @@
 </template>

 <script lang="ts">
-import dateMixin from '@/mixins/dateMixin';
-import TrainStop from '@/scripts/interfaces/TrainStop';
 import { defineComponent } from 'vue';
+import dateMixin from '../../mixins/dateMixin';
+import TrainStop from '../../scripts/interfaces/TrainStop';

 export default defineComponent({
  mixins: [dateMixin],
@@ -0,0 +1,152 @@
+<template>
+  <div class="train-modal" v-if="chosenTrain" @keydown.esc="closeModal">
+    <div class="modal_background" @click="closeModal"></div>
+    <div class="modal_content" ref="content" tabindex="0">
+      <button class="btn exit" @click="closeModal">
+        <img :src="getIcon('exit')" alt="close card" />
+      </button>
+
+      <TrainInfo :train="chosenTrain" :extended="false" ref="trainInfo" />
+      <TrainSchedule :train="chosenTrain" tabindex="0" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import imageMixin from '../../mixins/imageMixin';
+import modalTrainMixin from '../../mixins/modalTrainMixin';
+import trainInfoMixin from '../../mixins/trainInfoMixin';
+import { useStore } from '../../store/store';
+import TrainInfo from '../TrainsView/TrainInfo.vue';
+import TrainSchedule from '../TrainsView/TrainSchedule.vue';
+
+export default defineComponent({
+  components: { TrainInfo, TrainSchedule },
+  mixins: [trainInfoMixin, modalTrainMixin, imageMixin],
+
+  data() {
+    return {
+      isTopBarVisible: false,
+    };
+  },
+
+  setup() {
+    const store = useStore();
+
+    return {
+      store,
+    };
+  },
+
+  activated() {
+    const contentEl = this.$refs['content'] as HTMLElement;
+
+    this.$nextTick(() => {
+      contentEl.focus();
+    });
+  },
+
+  methods: {
+    handleContentScroll(e: Event) {
+      const trainInfoCompHeight: number = (this.$refs['trainInfo'] as any).$el.getBoundingClientRect().height;
+
+      const posTop = (e.target as HTMLElement).scrollTop;
+      this.isTopBarVisible = posTop > trainInfoCompHeight;
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/responsive.scss';
+@import '../../styles/card.scss';
+
+.top-info-bar-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all 150ms ease-in-out;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    transform: translate(-50%, -50%) scale(0.8);
+    opacity: 0;
+  }
+}
+
+.exit {
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  margin: 0.5em 1em;
+
+  padding: 0.25em;
+
+  z-index: 201;
+
+  img {
+    width: 1.5rem;
+    vertical-align: middle;
+  }
+}
+
+.train-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+
+  color: white;
+  z-index: 200;
+
+  display: flex;
+  justify-content: center;
+
+  text-align: left;
+}
+
+.modal_background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+
+  cursor: pointer;
+
+  background-color: rgba(0, 0, 0, 0.55);
+}
+
+.modal_content {
+  position: relative;
+  overflow-y: scroll;
+
+  margin-top: 1em;
+
+  width: 95vw;
+  max-height: 96vh;
+
+  background-color: #1a1a1a;
+  box-shadow: 0 0 15px 10px #0e0e0e;
+}
+
+@include midScreen {
+  .exit {
+    margin: 0.5em;
+
+    img {
+      width: 1.75rem;
+    }
+  }
+}
+
+@include smallScreen {
+
+  .modal_content {
+    max-height: 85vh;
+  }
+}
+</style>
@@ -0,0 +1,182 @@
+<template>
+  <section class="daily-stats">
+    <span :data-active="data.statsStatus">
+      <b v-if="data.statsStatus == DataStatus.Loading">
+        {{ $t('app.loading') }}
+      </b>
+
+      <b v-else-if="data.stats.distanceSum == null">
+        {{ $t('journal.daily-stats-info') }}
+      </b>
+
+      <span>
+        <div v-if="data.stats.totalTimetables">
+          &bull;
+          <i18n-t keypath="journal.timetable-stats-total">
+            <template #count>
+              <b class="text--primary">
+                {{ data.stats.totalTimetables }}
+                {{ $t('journal.timetable-count', data.stats.totalTimetables) }}
+              </b>
+            </template>
+
+            <template #distance>
+              <b class="text--primary"> {{ data.stats.distanceSum?.toFixed(2) }} km </b>
+            </template>
+          </i18n-t>
+        </div>
+
+        <div v-if="data.stats.timetableId">
+          &bull;
+          <i18n-t keypath="journal.timetable-stats-longest">
+            <template #id>
+              <router-link :to="`/journal/timetables?timetableId=${data.stats.timetableId}`">
+                <b>{{ data.stats.timetableId }}</b>
+              </router-link>
+            </template>
+            <template #author>
+              <router-link :to="`/journal/dispatchers?dispatcherName=${data.stats.timetableAuthor}`">
+                <b>{{ data.stats.timetableAuthor }}</b>
+              </router-link>
+            </template>
+            <template #driver>
+              <b>{{ data.stats.timetableDriver }}</b>
+            </template>
+            <template #distance>
+              <b class="text--primary">{{ data.stats.timetableRouteDistance }} km</b>
+            </template>
+          </i18n-t>
+        </div>
+
+        <div v-if="firstPlaceDispatchers.length == 1">
+          &bull;
+          <i18n-t keypath="journal.timetable-stats-most-active">
+            <template #dispatcher>
+              <router-link :to="`/journal/dispatchers?dispatcherName=${firstPlaceDispatchers[0].name}`">
+                <b>{{ firstPlaceDispatchers[0].name }}</b>
+              </router-link>
+            </template>
+            <template #count>
+              <b class="text--primary">
+                {{ firstPlaceDispatchers[0].count }}
+                {{ $t('journal.timetable-count', firstPlaceDispatchers[0].count) }}
+              </b>
+            </template>
+          </i18n-t>
+        </div>
+
+        <div v-if="firstPlaceDispatchers.length > 1">
+          &bull;
+          <i18n-t keypath="journal.timetable-stats-most-active-many">
+            <template #dispatchers>
+              <span v-for="(disp, i) in firstPlaceDispatchers">
+                <span v-if="i == firstPlaceDispatchers.length - 1"> {{ $t('general.and') }} </span>
+
+                <router-link :to="`/journal/dispatchers?dispatcherName=${disp.name}`">
+                  <b>{{ disp.name }}</b>
+                </router-link>
+
+                <span v-if="i < firstPlaceDispatchers.length - 2">, </span>
+              </span>
+            </template>
+
+            <template #count>
+              <b class="text--primary">
+                {{ firstPlaceDispatchers[0].count }}
+                {{ $t('journal.timetable-count', firstPlaceDispatchers[0].count) }}
+              </b>
+            </template>
+          </i18n-t>
+        </div>
+      </span>
+    </span>
+  </section>
+</template>
+
+<script setup lang="ts">
+import axios from 'axios';
+import { computed, reactive, ref } from 'vue';
+import { DataStatus } from '../../scripts/enums/DataStatus';
+import { ITimetablesDailyStats, ITimetablesDailyStatsResponse } from '../../scripts/interfaces/api/StatsAPIData';
+import { URLs } from '../../scripts/utils/apiURLs';
+
+const intervalId = ref(-1);
+
+const data = reactive({
+  statsStatus: DataStatus.Loading,
+
+  stats: {
+    totalTimetables: 0,
+    distanceSum: 0,
+    distanceAvg: 0,
+    timetableAuthor: '',
+    timetableDriver: '',
+    timetableId: 0,
+    timetableRouteDistance: 0,
+
+    mostActiveDispatchers: [],
+  } as ITimetablesDailyStats,
+});
+
+const firstPlaceDispatchers = computed(() => {
+  if (data.stats.mostActiveDispatchers.length == 0) return [];
+  const maxCount = data.stats.mostActiveDispatchers[0].count;
+
+  return data.stats.mostActiveDispatchers.filter((disp) => disp.count === maxCount);
+});
+
+async function fetchDailyTimetableStats() {
+  try {
+    const {
+      distanceAvg,
+      distanceSum,
+      maxTimetable,
+      totalTimetables,
+      mostActiveDispatchers,
+    }: ITimetablesDailyStatsResponse = await (
+      await axios.get(`${URLs.stacjownikAPI}/api/getDailyTimetableStats`)
+    ).data;
+
+    data.stats = {
+      totalTimetables,
+      distanceSum,
+      distanceAvg,
+      timetableAuthor: maxTimetable?.authorName || '',
+      timetableDriver: maxTimetable?.driverName || '',
+      timetableId: maxTimetable?.timetableId || 0,
+      timetableRouteDistance: maxTimetable?.routeDistance || 0,
+
+      mostActiveDispatchers,
+    };
+
+    data.statsStatus = DataStatus.Loaded;
+  } catch (error) {
+    console.error('Ups! Wystąpił błąd podczas pobierania statystyk rozkładów jazdy...');
+    data.statsStatus = DataStatus.Error;
+  }
+}
+
+function startFetchingDailyStats() {
+  fetchDailyTimetableStats();
+  intervalId.value = setInterval(fetchDailyTimetableStats, 60000);
+}
+
+function stopFetchingDailyStats() {
+  clearInterval(intervalId.value);
+}
+
+defineExpose({
+  startFetchingDailyStats,
+  stopFetchingDailyStats,
+});
+</script>
+
+<style lang="scss" scoped>
+.daily-stats {
+  text-align: left;
+}
+.daily-stats > span[data-active='0'] {
+  opacity: 0.75;
+}
+</style>
+
@@ -1,6 +1,6 @@
 <template>
  <div class="stats_container" v-click-outside="() => (cardVisible = false)">
-    <button class="stats_button btn btn--option" @click="toggleCard">
+    <button class="stats_button" @click="toggleCard">
      Statystyki dyżurnego {{ store.dispatcherStatsName }}
    </button>

@@ -14,6 +14,7 @@

        <div v-else>
          <h3>STATYSTYKI WYSTAWIONYCH ROZKŁADÓW</h3>
+          
          <div class="info-stats" v-if="store.dispatcherStatsData._count._all">
            <span class="stat-badge">
              <span>LICZBA</span>
@@ -48,12 +49,13 @@
 </template>

 <script lang="ts">
-import { DispatcherStatsAPIData } from '@/scripts/interfaces/api/DispatcherStatsAPIData';
-import { TimetableHistory } from '@/scripts/interfaces/api/TimetablesAPIData';
-import { URLs } from '@/scripts/utils/apiURLs';
-import { useStore } from '@/store/store';
+
 import axios from 'axios';
 import { computed, defineComponent } from 'vue';
+import { DispatcherStatsAPIData } from '../../scripts/interfaces/api/DispatcherStatsAPIData';
+import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
+import { URLs } from '../../scripts/utils/apiURLs';
+import { useStore } from '../../store/store';
 import Loading from '../Global/Loading.vue';

 export default defineComponent({
@@ -161,42 +163,11 @@ h3 {
  text-align: center;
 }

-.info-stats {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  margin-top: 1em;
-}

 .last-timetables {
  overflow-y: auto;
 }

-.stat-badge {
-  margin-right: 0.5em;
-  padding-bottom: 1em;

-  span {
-    padding: 0.25em 0.3em;
-  }

-  span:first-child {
-    background-color: #4d4d4d;
-  }
-
-  span:last-child {
-    background-color: $accentCol;
-    color: black;
-    font-weight: bold;
-  }
-}
-
-@include smallScreen() {
-  .stats_card {
-    text-align: center;
-    left: 50%;
-    transform: translateX(-50%);
-    border-radius: 0 0 1em 1em;
-  }
-}
 </style>
@@ -1,140 +0,0 @@
-<template>
-  <div class="card-dimmer" @click="closeCard"></div>
-
-  <div class="stats-card card">
-    <div>
-      <h2 class="card-title">
-        STATYSTYKI MASZYNISTY <span class="text--primary">{{ store.driverStatsName.toUpperCase() }}</span>
-      </h2>
-
-      <div class="loading" v-if="!store.driverStatsData">Ładowanie...</div>
-
-      <div v-else>
-        <div class="info-stats" v-if="store.driverStatsData._sum.routeDistance != null">
-          <span class="stat-badge">
-            <span>PRZEBYTO</span>
-            <span>{{ store.driverStatsData._sum.routeDistance.toFixed(2) }}km</span>
-          </span>
-          <span class="stat-badge">
-            <span>PORZUCONO</span>
-            <span>
-              {{ (store.driverStatsData._sum.routeDistance - store.driverStatsData._sum.currentDistance).toFixed(2) }}km
-            </span>
-          </span>
-
-          <span class="stat-badge">
-            <span>WYPEŁNIONO</span>
-            <span>{{ store.driverStatsData._count.fulfilled }} RJ</span>
-          </span>
-
-          <span class="stat-badge">
-            <span>PORZUCONO</span>
-            <span>{{ store.driverStatsData._count._all - store.driverStatsData._count.fulfilled }} RJ</span>
-          </span>
-
-          <span class="stat-badge">
-            <span>ZATWIERDZONO</span>
-            <span>{{ store.driverStatsData._sum.confirmedStopsCount }} stacji</span>
-          </span>
-
-          <span class="stat-badge">
-            <span>PORZUCONO</span>
-            <span>
-              {{ store.driverStatsData._sum.allStopsCount - store.driverStatsData._sum.confirmedStopsCount }}
-              stacji
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { DriverStatsAPIData } from '@/scripts/interfaces/api/DriverStatsAPIData';
-import { TimetableHistory } from '@/scripts/interfaces/api/TimetablesAPIData';
-import { URLs } from '@/scripts/utils/apiURLs';
-import { useStore } from '@/store/store';
-import axios from 'axios';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  emits: ['closeCard'],
-
-  setup() {
-    const store = useStore();
-    return {
-      store,
-    };
-  },
-
-  data() {
-    return {
-      test: Math.random(),
-      lastDispatcherName: '',
-
-      lastTimetables: [] as TimetableHistory[],
-    };
-  },
-
-  activated() {
-    this.fetchDispatcherStats();
-  },
-
-  methods: {
-    async fetchDispatcherStats() {
-      this.store.driverStatsData = undefined;
-
-      const statsData: DriverStatsAPIData = await (
-        await axios.get(`${URLs.stacjownikAPI}/api/getDriverInfo?name=${this.store.driverStatsName}`)
-      ).data;
-
-      const recentTimetablesData: TimetableHistory[] = await (
-        await axios.get(`${URLs.stacjownikAPI}/api/getTimetables?driverName=${this.store.driverStatsName}`)
-      ).data;
-
-      this.store.driverStatsData = statsData;
-      this.lastTimetables = recentTimetablesData || [];
-    },
-
-    closeCard() {
-      this.$emit('closeCard');
-    },
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-
-.timetable-row {
-  display: grid;
-  grid-template-columns: 4fr 1fr 1fr 2fr 2fr;
-  gap: 0.2em;
-  margin: 0.5em 0;
-  text-align: center;
-
-  span {
-    min-width: 100px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    background-color: #4d4d4d;
-    padding: 0.5em 0.2em;
-  }
-
-  @include smallScreen() {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-
-    span {
-      padding: 0.2em 0.3em;
-    }
-
-    grid-template-columns: 1fr;
-    background-color: #4d4d4d;
-  }
-}
-</style>
@@ -1,425 +0,0 @@
-<template>
-  <section class="journal-timetables">
-    <div class="journal-wrapper">
-      <div class="journal_top-bar">
-        <JournalOptions
-          @on-filter-change="search"
-          @on-input-change="search"
-          @on-sorter-change="search"
-          :sorter-option-ids="['timestampFrom', 'duration']"
-        />
-
-        <!-- <DispatcherStats /> -->
-      </div>
-
-      <div class="journal-list">
-        <div class="list-wrapper" ref="scrollElement">
-          <transition name="warning" mode="out-in">
-            <div :key="historyDataStatus.status">
-              <Loading v-if="isDataLoading || isDataInit" />
-
-              <div v-else-if="isDataError" class="journal_warning error">
-                {{ $t('app.error') }}
-              </div>
-
-              <div class="journal_warning" v-else-if="historyList.length == 0">
-                {{ $t('app.no-result') }}
-              </div>
-
-              <ul v-else>
-                <transition-group name="journal-list-anim">
-                  <li v-for="(doc, i) in computedHistoryList" :key="doc.id">
-                    <div class="journal_day" v-if="isAnotherDay(i - 1, i)">
-                      <span>{{ new Date(doc.timestampFrom).toLocaleDateString('pl-PL') }}</span>
-                    </div>
-
-                    <div
-                      class="journal_item"
-                      :class="{ online: doc.isOnline }"
-                      @click="navigateToScenery(doc.stationName, doc.isOnline)"
-                      @keydown.enter="navigateToScenery(doc.stationName, doc.isOnline)"
-                      tabindex="0"
-                    >
-                      <span>
-                        <b class="text--primary">{{ doc.dispatcherName }}</b> &bull; <b>{{ doc.stationName }}</b>
-                        <span class="text--grayed">&nbsp;#{{ doc.stationHash }}&nbsp;</span>
-                        <span class="region-badge" :class="doc.region">PL1</span>
-                      </span>
-                      <span>
-                        <span :data-status="doc.isOnline">
-                          {{ doc.isOnline ? $t('journal.online-since') : 'OFFLINE' }}&nbsp;
-                        </span>
-                        <span>
-                          {{ new Date(doc.timestampFrom).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
-                        </span>
-
-                        <span v-if="doc.currentDuration && doc.isOnline">
-                          ({{ calculateDuration(doc.currentDuration) }})
-                        </span>
-
-                        <span v-if="doc.timestampTo">
-                          &gt;
-                          {{ new Date(doc.timestampTo).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
-                          ({{ $t('journal.duty-lasted') }} {{ calculateDuration(doc.currentDuration!) }})
-                        </span>
-                      </span>
-                    </div>
-                  </li>
-                </transition-group>
-              </ul>
-            </div>
-          </transition>
-        </div>
-      </div>
-
-      <div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div>
-      <div class="journal_warning" v-else-if="!scrollDataLoaded">{{ $t('journal.loading-further-data') }}</div>
-    </div>
-  </section>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, JournalFilter, JournalSearcher, provide, reactive, Ref, ref, watch } from 'vue';
-import axios from 'axios';
-
-import SearchBox from '@/components/Global/SearchBox.vue';
-import dateMixin from '@/mixins/dateMixin';
-import { DataStatus } from '@/scripts/enums/DataStatus';
-
-import ActionButton from '@/components/Global/ActionButton.vue';
-import JournalOptions from '@/components/JournalView/JournalOptions.vue';
-import DispatcherStats from '@/components/JournalView/DispatcherStats.vue';
-
-import { URLs } from '@/scripts/utils/apiURLs';
-import { useStore } from '@/store/store';
-import { DispatcherStatsAPIData } from '@/scripts/interfaces/api/DispatcherStatsAPIData';
-import Loading from '../Global/Loading.vue';
-import { useRoute, useRouter } from 'vue-router';
-
-const PROD_MODE = process.env.VUE_APP_JORUNAL_DISPATCHERS_DEV != '1' || process.env.NODE_ENV === 'production';
-
-const DISPATCHERS_API_URL = (PROD_MODE ? `${URLs.stacjownikAPI}/api` : 'http://localhost:3001/api') + '/getDispatchers';
-
-interface DispatcherHistoryItem {
-  id: string;
-
-  stationName: string;
-  stationHash: string;
-  region: string;
-
-  dispatcherName: string;
-  dispatcherId: number;
-
-  timestampFrom: number;
-  timestampTo?: number;
-  currentDuration?: number;
-
-  lastOnlineTimestamp: number;
-
-  isOnline: boolean;
-}
-
-export default defineComponent({
-  components: { SearchBox, ActionButton, JournalOptions, DispatcherStats, Loading },
-  mixins: [dateMixin],
-  name: 'JournalDispatchers',
-
-  props: {
-    sceneryName: {
-      type: String,
-      required: false,
-    },
-
-    dispatcherName: {
-      type: String,
-      required: false,
-    },
-  },
-
-  data: () => ({
-    icons: {
-      arrow: require('@/assets/icon-arrow-asc.svg'),
-    },
-
-    currentQuery: '',
-    scrollDataLoaded: true,
-    scrollNoMoreData: false,
-
-    showReturnButton: false,
-    statsCardOpen: false,
-  }),
-
-  setup() {
-    const historyDataStatus: Ref<{ status: DataStatus; error: string | null }> = ref({
-      status: DataStatus.Loading,
-      error: null,
-    });
-
-    const sorterActive = ref({ id: 'timestampFrom', dir: -1 });
-    const journalFilterActive = ref({});
-    const searchersValues = reactive([
-      { id: 'search-dispatcher', value: '' },
-      { id: 'search-station', value: '' },
-    ]);
-
-    const countFromIndex = ref(0);
-    const countLimit = 15;
-
-    provide('sorterActive', sorterActive);
-    provide('journalFilterActive', journalFilterActive);
-    provide('searchersValues', searchersValues);
-
-    const scrollElement: Ref<HTMLElement | null> = ref(null);
-
-    return {
-      store: useStore(),
-
-      historyList: ref([]) as Ref<DispatcherHistoryItem[]>,
-      historyDataStatus,
-
-      isDataLoading: computed(() => historyDataStatus.value.status === DataStatus.Loading),
-      isDataError: computed(() => historyDataStatus.value.status === DataStatus.Error),
-      isDataInit: computed(() => historyDataStatus.value.status === DataStatus.Initialized),
-
-      sorterActive,
-      searchersValues,
-
-      countFromIndex,
-      countLimit,
-
-      scrollElement,
-      maxCount: ref(15),
-    };
-  },
-
-  computed: {
-    computedHistoryList() {
-      return this.historyList.filter(
-        (doc) => doc.isOnline || (doc.currentDuration && doc.currentDuration > 10 * 60000)
-      );
-    },
-  },
-
-  activated() {
-    if (this.sceneryName || this.dispatcherName) {
-      this.searchersValues[1].value = this.sceneryName?.toString() || '';
-      this.searchersValues[0].value = this.dispatcherName?.toString() || '';
-      this.search();
-    }
-
-    window.addEventListener('scroll', this.handleScroll);
-  },
-
-  mounted() {
-    if (!this.sceneryName && !this.dispatcherName) {
-      this.search();
-    }
-  },
-
-  deactivated() {
-    window.removeEventListener('scroll', this.handleScroll);
-  },
-
-  methods: {
-    closeDispatcherStatsCard() {
-      this.statsCardOpen = false;
-    },
-
-    navigateToScenery(name: string, isOnline: boolean) {
-      if (!isOnline) return;
-
-      this.$router.push(`/scenery?station=${name.trim().replace(/ /g, '_')}`);
-    },
-
-    isAnotherDay(prevIndex: number, currIndex: number) {
-      if (currIndex == 0) return true;
-
-      return (
-        new Date(this.computedHistoryList[prevIndex].timestampFrom).getDate() !=
-        new Date(this.computedHistoryList[currIndex].timestampFrom).getDate()
-      );
-    },
-
-    handleScroll() {
-      this.showReturnButton = window.scrollY > window.innerHeight;
-
-      const element = this.$refs.scrollElement as HTMLElement;
-
-      if (
-        element.getBoundingClientRect().bottom * 0.85 < window.innerHeight &&
-        this.scrollDataLoaded &&
-        !this.scrollNoMoreData &&
-        this.historyDataStatus.status == DataStatus.Loaded
-      )
-        this.addHistoryData();
-    },
-
-    scrollToTop() {
-      window.scrollTo({ top: 0 });
-    },
-
-    search() {
-      this.fetchHistoryData({
-        searchers: this.searchersValues,
-      });
-
-      this.scrollNoMoreData = false;
-      this.scrollDataLoaded = true;
-    },
-
-    async addHistoryData() {
-      this.scrollDataLoaded = false;
-
-      const countFrom = this.historyList.length;
-
-      const responseData: DispatcherHistoryItem[] = await (
-        await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}&countFrom=${countFrom}`)
-      ).data;
-
-      if (!responseData) return;
-
-      if (responseData.length == 0) {
-        this.scrollNoMoreData = true;
-        return;
-      }
-
-      this.historyList.push(...responseData);
-      this.scrollDataLoaded = true;
-    },
-
-    async fetchHistoryData(
-      props: {
-        searchers?: JournalSearcher[];
-        filter?: JournalFilter;
-      } = {}
-    ) {
-      this.historyDataStatus.status = DataStatus.Loading;
-
-      const queries: string[] = [];
-
-      const dispatcher = props.searchers?.find((s) => s.id == 'search-dispatcher')?.value.trim();
-      const station = props.searchers?.find((s) => s.id == 'search-station')?.value.trim();
-
-      if (dispatcher) queries.push(`dispatcherName=${dispatcher}`);
-      if (station) queries.push(`stationName=${station}`);
-
-      // Z API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
-      if (this.sorterActive.id == 'timestampFrom') queries.push('sortBy=timestampFrom');
-      else if (this.sorterActive.id == 'duration') queries.push('sortBy=currentDuration');
-      else queries.push('sortBy=timestampFrom');
-
-      queries.push('countLimit=15');
-
-      this.currentQuery = queries.join('&');
-
-      try {
-        const responseData: DispatcherHistoryItem[] = await (
-          await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}`)
-        ).data;
-
-        if (!responseData) {
-          this.historyDataStatus.status = DataStatus.Error;
-          this.historyDataStatus.error = 'Brak danych!';
-          return;
-        }
-
-        if (!responseData) return;
-
-        // Response data exists
-        this.historyList = responseData;
-
-        // Stats display
-        this.store.dispatcherStatsName =
-          this.historyList.length > 0 && this.searchersValues[0].value.trim() ? this.historyList[0].dispatcherName : '';
-
-        this.historyDataStatus.status = DataStatus.Loaded;
-      } catch (error) {
-        this.historyDataStatus.status = DataStatus.Error;
-        this.historyDataStatus.error = 'Ups! Coś poszło nie tak!';
-      }
-    },
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/JournalSection.scss';
-@import '../../styles/responsive.scss';
-
-.region-badge {
-  padding: 0.1em 0.5em;
-  border-radius: 0.5em;
-  font-weight: bold;
-
-  &.eu {
-    background-color: forestgreen;
-  }
-}
-
-.list-wrapper {
-  margin-top: 1em;
-}
-
-.journal_item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  flex-wrap: wrap;
-
-  &.online {
-    cursor: pointer;
-  }
-
-  span[data-status='true'] {
-    color: springgreen;
-  }
-
-  span[data-status='false'] {
-    color: salmon;
-  }
-}
-.journal_day {
-  position: relative;
-  text-align: center;
-  background-color: #4d4d4d;
-
-  span {
-    position: relative;
-    background-color: #4d4d4d;
-    z-index: 10;
-
-    padding: 0 0.5em;
-  }
-
-  &::after {
-    position: absolute;
-    content: '';
-
-    z-index: 0;
-
-    left: 50%;
-    top: 50%;
-
-    transform: translate(-50%, -50%);
-
-    height: 3px;
-    width: 60%;
-    min-width: 200px;
-
-    background-color: white;
-  }
-}
-
-@include smallScreen() {
-  .journal_item {
-    flex-direction: column;
-
-    span {
-      margin-top: 0.25em;
-      text-align: center;
-    }
-  }
-}
-</style>
-
@@ -0,0 +1,156 @@
+<template>
+  <ul class="journal-list">
+    <!-- <transition-group name="journal-list-anim"> -->
+    <li v-for="item in computedDispatcherHistory" :class="{ sticky: typeof item == 'string' }">
+      <div v-if="typeof item == 'string'" class="journal_day">
+        {{ item }}
+      </div>
+
+      <div
+        v-else
+        class="journal_item"
+        :class="{ online: item.isOnline }"
+        @click="navigateToScenery(item.stationName, item.isOnline)"
+        @keydown.enter="navigateToScenery(item.stationName, item.isOnline)"
+        tabindex="0"
+      >
+        <span>
+          <b class="text--primary">{{ item.dispatcherName }}</b> &bull; <b>{{ item.stationName }}</b>
+          <span class="text--grayed">&nbsp;#{{ item.stationHash }}&nbsp;</span>
+          <span class="region-badge" :class="item.region">PL1</span>
+        </span>
+
+        <span>
+          <span :data-status="item.isOnline"> {{ item.isOnline ? $t('journal.online-since') : 'OFFLINE' }}&nbsp; </span>
+          <span>
+            {{ new Date(item.timestampFrom).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
+          </span>
+
+          <span v-if="item.currentDuration && item.isOnline"> ({{ calculateDuration(item.currentDuration) }}) </span>
+
+          <span v-if="item.timestampTo">
+            &gt;
+            {{ new Date(item.timestampTo).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
+            ({{ $t('journal.duty-lasted') }} {{ calculateDuration(item.currentDuration!) }})
+          </span>
+        </span>
+      </div>
+    </li>
+    <!-- </transition-group> -->
+  </ul>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import dateMixin from '../../mixins/dateMixin';
+import { DispatcherHistory } from '../../scripts/interfaces/api/DispatchersAPIData';
+
+export default defineComponent({
+  props: {
+    dispatcherHistory: {
+      type: Array as PropType<DispatcherHistory[]>,
+      required: true,
+    },
+  },
+
+  mixins: [dateMixin],
+
+  computed: {
+    computedDispatcherHistory() {
+      return this.dispatcherHistory.reduce((acc, historyItem, i) => {
+        if (this.isAnotherDay(i - 1, i)) acc.push(new Date(historyItem.timestampFrom).toLocaleDateString('pl-PL'));
+        acc.push(historyItem);
+
+        return acc;
+      }, [] as (DispatcherHistory | string)[]);
+    },
+  },
+
+  methods: {
+    navigateToScenery(name: string, isOnline: boolean) {
+      if (!isOnline) return;
+
+      this.$router.push(`/scenery?station=${name.trim().replace(/ /g, '_')}`);
+    },
+
+    isAnotherDay(prevIndex: number, currIndex: number) {
+      if (currIndex == 0) return true;
+
+      return (
+        new Date(this.dispatcherHistory[prevIndex].timestampFrom).getDate() !=
+        new Date(this.dispatcherHistory[currIndex].timestampFrom).getDate()
+      );
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/responsive.scss';
+@import '../../styles/JournalSection.scss';
+
+.region-badge {
+  padding: 0.1em 0.5em;
+  border-radius: 0.5em;
+  font-weight: bold;
+
+  &.eu {
+    background-color: forestgreen;
+  }
+}
+
+li.sticky {
+  position: sticky;
+  top: 0;
+}
+
+.journal_item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  flex-wrap: wrap;
+
+  padding: 0.75em;
+
+  &.online {
+    cursor: pointer;
+  }
+
+  span[data-status='true'] {
+    color: springgreen;
+  }
+
+  span[data-status='false'] {
+    color: salmon;
+  }
+}
+
+.journal_day {
+  margin-bottom: 1em;
+  padding: 0.5em;
+  font-weight: bold;
+
+  background-color: #333;
+
+  span {
+    position: relative;
+    background-color: inherit;
+    z-index: 10;
+    padding-right: 1em;
+
+    font-weight: bold;
+  }
+}
+
+@include smallScreen() {
+  .journal_item {
+    flex-direction: column;
+
+    span {
+      margin-top: 0.25em;
+      text-align: center;
+    }
+  }
+}
+</style>
@@ -0,0 +1,67 @@
+<template>
+  <div class="journal-stats">
+    <span v-if="store.driverStatsData">
+      <h3>
+        {{ $t('journal.stats-title') }} <span class="text--primary">{{ store.driverStatsName.toUpperCase() }}</span>
+      </h3>
+
+      <div class="info-stats">
+        <span class="stat-badge">
+          <span>{{ $t('journal.stats-timetables') }}</span>
+          <span>{{ store.driverStatsData._count.fulfilled }} / {{ store.driverStatsData._count._all }}</span>
+        </span>
+
+        <span class="stat-badge">
+          <span>{{ $t('journal.stats-longest-timetable') }}</span>
+          <span> {{ store.driverStatsData._max.routeDistance.toFixed(2) }}km </span>
+        </span>
+
+        <span class="stat-badge">
+          <span>{{ $t('journal.stats-avg-timetable') }}</span>
+          <span> {{ store.driverStatsData._avg.routeDistance.toFixed(2) }}km </span>
+        </span>
+
+        <span class="stat-badge">
+          <span>{{ $t('journal.stats-distance') }}</span>
+          <span>
+            {{ store.driverStatsData._sum.currentDistance.toFixed(2) }} /
+            {{ store.driverStatsData._sum.routeDistance.toFixed(2) }}km
+          </span>
+        </span>
+
+        <span class="stat-badge">
+          <span>{{ $t('journal.stats-stations') }}</span>
+          <span>
+            {{ store.driverStatsData._sum.confirmedStopsCount }} /
+            {{ store.driverStatsData._sum.allStopsCount }}
+          </span>
+        </span>
+      </div>
+    </span>
+
+    <b v-else-if="store.driverStatsStatus == DataStatus.Loading">{{ $t('journal.stats-loading') }}</b>
+    <b v-else-if="store.driverStatsStatus == DataStatus.Error">
+      {{ $t('journal.stats-error ') }}
+    </b>
+    <b v-else>{{ $t('journal.driver-stats-info') }}</b>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { DataStatus } from '../../scripts/enums/DataStatus';
+import { useStore } from '../../store/store';
+
+export default defineComponent({
+  data() {
+    return {
+      store: useStore(),
+      DataStatus,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/JournalStats.scss';
+</style>
@@ -0,0 +1,46 @@
+<template>
+  <section class="journal-header">
+    <div class="journal-type-options">
+      <router-link class="router-link" active-class="route-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">
+        {{ $t('journal.section-dispatchers') }}
+      </router-link>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({});
+</script>
+
+<style lang="scss" scoped>
+.journal-type-options {
+  display: flex;
+  justify-content: center;
+
+  background-color: #2c2c2c;
+  max-width: 18em;
+
+  font-size: 1.2em;
+  margin: 0 auto;
+
+  border-radius: 0 0 0.5em 0.5em;
+  padding: 0.1em 0;
+}
+
+.journal-section > section {
+  height: 100%;
+
+  display: flex;
+  justify-content: center;
+}
+
+.router-link.active {
+  color: gold;
+}
+</style>
@@ -1,260 +1,274 @@
-<template>
-  <div class="journal-options">
-    <div class="options_wrapper">
-      <div class="options_content">
-        <div class="content_select">
-          <select-box
-            :itemList="translatedSorterOptions"
-            :defaultItemIndex="0"
-            @selected="onSorterChange"
-            :prefix="$t('journal.sort-prefix')"
-          />
-        </div>
-
-        <div class="content_search">
-          <div class="search-box" v-for="search in searchersValues" :key="search.id">
-            <input
-              class="search-input"
-              :placeholder="$t(`journal.${search.id}`)"
-              v-model="search.value"
-              @keydown.enter="onInputSearch"
-            />
-
-            <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="onInputClear(search.id)" />
-          </div>
-          <!-- <div class="search-box">
-            <input
-              class="search-input"
-              v-model="searchedTrain"
-              :placeholder="$t('journal.search-train')"
-              @keydown.enter="search"
-            />
-
-            <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="clearTrain" />
-          </div>
-
-          <div class="search-box">
-            <input
-              class="search-input"
-              v-model="searchedDriver"
-              :placeholder="$t('journal.search-driver')"
-              @keydown.enter="search"
-            />
-
-            <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="clearDriver" />
-          </div> -->
-
-          <action-button class="search-button" @click="onInputSearch">
-            {{ $t('journal.search') }}
-          </action-button>
-        </div>
-      </div>
-
-      <div class="options_filters">
-        <button
-          v-for="filter in filters"
-          class="journal-filter-option btn--option"
-          :class="{ checked: journalFilterActive.id === filter.id }"
-          :id="filter.id"
-          @click="onFilterChange(filter)"
-        >
-          {{ $t(`journal.filter-${filter.id}`) }}
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, inject, JournalFilter, PropType } from 'vue';
-import ActionButton from '../Global/ActionButton.vue';
-import SelectBox from '../Global/SelectBox.vue';
-
-export default defineComponent({
-  components: { SelectBox, ActionButton },
-  emits: ['onSorterChange', 'onInputChange', 'onFilterChange'],
-  props: {
-    sorterOptionIds: {
-      type: Array as PropType<Array<string>>,
-      required: true,
-    },
-
-    filters: {
-      type: Array as PropType<JournalFilter[]>,
-      default: [],
-    },
-  },
-
-  data: () => ({
-    exitIcon: require('@/assets/icon-exit.svg'),
-  }),
-
-  setup() {
-    return {
-      searchersValues: inject('searchersValues') as {id: string; value: string}[],
-      sorterActive: inject('sorterActive') as { id: string | number; dir: number },
-      journalFilterActive: inject('journalFilterActive') as JournalFilter,
-    };
-  },
-
-  computed: {
-    translatedSorterOptions() {
-      return this.$props.sorterOptionIds.map((id) => ({
-        id,
-        value: this.$t(`journal.option-${id}`),
-      }));
-    },
-  },
-
-  methods: {
-    onSorterChange(item: { id: string | number; value: string }) {
-      this.sorterActive.id = item.id;
-      this.sorterActive.dir = -1;
-
-      this.$emit('onSorterChange');
-    },
-
-    onFilterChange(filter: JournalFilter) {
-      this.journalFilterActive = filter;
-      this.$emit('onFilterChange');
-    },
-
-    onInputSearch() {      
-      this.$emit('onInputChange');
-    },
-
-    onInputClear(id: string) {
-      this.searchersValues.find(s => s.id == id)!.value = "";
-      this.onInputSearch();
-    },
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/responsive';
-@import '../../styles/option.scss';
-
-.options {
-  &_wrapper {
-    display: flex;
-    flex-direction: column;
-  }
-
-  &_content {
-    display: flex;
-    flex-wrap: wrap;
-
-    .content_search,
-    .content_select {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-
-      padding: 0.25em 0.25em 0 0;
-    }
-  }
-
-  &_filters {
-    display: flex;
-    flex-wrap: wrap;
-    margin: 0.5em 0 0 0;
-
-    .journal-filter-option {
-      margin: 0 0.25em 0 0;
-
-      &#abandoned {
-        color: salmon;
-      }
-
-      &#fulfilled {
-        color: lightgreen;
-      }
-
-      &#active {
-        color: lightblue;
-      }
-    }
-  }
-}
-
-.search {
-  &-box {
-    position: relative;
-
-    background: #333;
-    border-radius: 0.5em;
-    min-width: 200px;
-    margin-right: 0.25em;
-  }
-
-  &-input {
-    border: none;
-
-    min-width: 100%;
-    padding: 0.35em 0.5em;
-  }
-
-  &-exit {
-    position: absolute;
-    cursor: pointer;
-
-    top: 50%;
-    right: 10px;
-    transform: translateY(-50%);
-
-    width: 1em;
-  }
-}
-
-@include smallScreen() {
-  .journal-options {
-    width: 100%;
-  }
-  .options {
-    &_wrapper {
-      justify-content: center;
-      align-items: center;
-    }
-
-    &_content {
-      padding: 0 1em;
-
-      flex-direction: column;
-
-      .content_select {
-        margin: 0 auto;
-        padding: 0;
-      }
-
-      .content_search {
-        justify-content: center;
-      }
-    }
-
-    &_filters {
-      justify-content: center;
-
-      .journal-filter-option {
-        margin: 0.25em 0.25em;
-      }
-    }
-  }
-
-  .search {
-    &-box,
-    &-button {
-      margin: 0.5em 0 0 0;
-    }
-
-    &-box {
-      width: 100%;
-    }
-
-    &-button {
-      width: 80%;
-      max-width: 300px;
-    }
-  }
-}
-</style>
+<template>
+  <div class="filters-options" @keydown.esc="showOptions = false">
+    <div class="bg" v-if="showOptions" @click="showOptions = false"></div>
+
+    <button class="filter-button btn--filled btn--image" @click="showOptions = !showOptions" ref="button">
+      <img :src="getIcon('filter2')" alt="Open filters" />
+      {{ $t('options.filters') }} [F]
+      <span class="active-indicator" v-if="currentOptionsActive"></span>
+    </button>
+
+    <datalist id="search-driver">
+      <option v-for="sugg in driverSuggestions" :value="sugg"></option>
+    </datalist>
+
+    <datalist id="search-dispatcher">
+      <option v-for="sugg in dispatcherSuggestions" :value="sugg"></option>
+    </datalist>
+
+    <transition name="options-anim">
+      <div class="options_wrapper" v-if="showOptions">
+        <div class="options_content">
+          <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="date">{{ $t('options.search-date') }}</label>
+
+              <div class="search-box">
+                <input
+                  class="search-input"
+                  v-model="searchersValues[propName]"
+                  @keydown.enter="onSearchConfirm"
+                  @focus="preventKeyDown = true"
+                  @blur="preventKeyDown = false"
+                  :placeholder="$t(`options.${propName}`)"
+                  :type="propName == 'search-date' ? 'date' : 'text'"
+                  :min="propName == 'search-date' ? '2022-02-01' : undefined"
+                  :list="propName.toString()"
+                />
+
+                <button class="search-exit" v-if="propName != 'search-date'">
+                  <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear(propName)" />
+                </button>
+              </div>
+            </div>
+
+            <div class="search_actions">
+              <button class="btn--action" @click="onResetButtonClick">
+                {{ $t('options.reset-button') }}
+              </button>
+              <button class="btn--action" @click="onSearchButtonConfirm">
+                {{ $t('options.search-button') }}
+              </button>
+            </div>
+          </div>
+
+          <h1 class="option-title">{{ $t('options.sort-title') }}</h1>
+          <div class="options_sorters">
+            <div v-for="opt in translatedSorterOptions">
+              <button
+                class="sort-option btn--option"
+                :data-selected="opt.id == sorterActive.id"
+                @click="onSorterChange(opt)"
+              >
+                {{ opt.value.toUpperCase() }}
+              </button>
+            </div>
+          </div>
+
+          <h1 class="option-title" v-if="filters.length != 0">{{ $t('options.filter-title') }}</h1>
+          <div class="options_filters">
+            <button
+              v-for="filter in filters"
+              class="filter-option btn--option"
+              :class="{ checked: journalFilterActive.id === filter.id }"
+              :id="filter.id"
+              @click="onFilterChange(filter)"
+            >
+              {{ $t(`options.filter-${filter.id}`) }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script lang="ts">
+import axios from 'axios';
+import { defineComponent, inject, PropType } from 'vue';
+import imageMixin from '../../mixins/imageMixin';
+import keyMixin from '../../mixins/keyMixin';
+import { DataStatus } from '../../scripts/enums/DataStatus';
+import { DriverStatsAPIData } from '../../scripts/interfaces/api/DriverStatsAPIData';
+import { URLs } from '../../scripts/utils/apiURLs';
+import { useStore } from '../../store/store';
+import { JournalTimetableFilter } from '../../types/Journal/JournalTimetablesTypes';
+import ActionButton from '../Global/ActionButton.vue';
+import SelectBox from '../Global/SelectBox.vue';
+
+export default defineComponent({
+  components: { SelectBox, ActionButton },
+  emits: ['onSearchConfirm', 'onOptionsReset'],
+  mixins: [imageMixin, keyMixin],
+
+  props: {
+    sorterOptionIds: {
+      type: Array as PropType<Array<string>>,
+      required: true,
+    },
+
+    filters: {
+      type: Array as PropType<JournalTimetableFilter[]>,
+      default: [],
+    },
+
+    dataStatus: {
+      type: Number as PropType<DataStatus>,
+      default: DataStatus.Initialized,
+    },
+
+    currentOptionsActive: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      showOptions: false,
+
+      driverSuggestions: [] as string[],
+      dispatcherSuggestions: [] as string[],
+
+      searchTimeout: 0,
+      store: useStore(),
+
+      DataStatus,
+    };
+  },
+
+  setup() {
+    return {
+      searchersValues: inject('searchersValues') as { [key: string]: string },
+      sorterActive: inject('sorterActive') as { id: string | number; dir: number },
+      journalFilterActive: inject('journalFilterActive') as JournalTimetableFilter,
+    };
+  },
+
+  computed: {
+    driverStatsName() {
+      return this.store.driverStatsName;
+    },
+
+    translatedSorterOptions() {
+      return this.$props.sorterOptionIds.map((id) => ({
+        id,
+        value: this.$t(`options.sort-${id}`),
+      }));
+    },
+  },
+
+  watch: {
+    async driverStatsName(value: string) {
+      await this.fetchDriverStats();
+      this.store.currentStatsTab = value ? 'driver' : 'daily';
+    },
+
+    async 'searchersValues.search-driver'(value: string | undefined) {
+      clearTimeout(this.searchTimeout);
+
+      if (!value || value == '') return;
+      if (value.length < 3) return;
+
+      this.startSearchTimeout('driver', value);
+    },
+
+    async 'searchersValues.search-dispatcher'(value: string | undefined) {
+      if (!value || value == '') return;
+      if (value.length < 3) return;
+
+      this.startSearchTimeout('dispatcher', value);
+    },
+  },
+
+  methods: {
+    async fetchDriverStats() {
+      this.store.driverStatsData = undefined;
+
+      if (!this.store.driverStatsName) {
+        this.store.driverStatsStatus = DataStatus.Initialized;
+        return;
+      }
+
+      try {
+        this.store.driverStatsStatus = DataStatus.Loading;
+
+        const statsData: DriverStatsAPIData = await (
+          await axios.get(`${URLs.stacjownikAPI}/api/getDriverInfo?name=${this.store.driverStatsName}`)
+        ).data;
+
+        this.store.driverStatsData = statsData;
+        this.store.driverStatsStatus = DataStatus.Loaded;
+      } catch (error) {
+        this.store.driverStatsStatus = DataStatus.Error;
+        console.error('Ups! Wystąpił błąd przy próbie pobrania statystyk maszynisty! :/');
+      }
+    },
+
+    startSearchTimeout(type: 'driver' | 'dispatcher', value: string) {
+      if (this[`${type}Suggestions`].includes(value)) return;
+
+      window.clearTimeout(this.searchTimeout);
+
+      this.searchTimeout = setTimeout(async () => {
+        try {
+          const suggestions: string[] = await (
+            await axios.get(`${URLs.stacjownikAPI}/api/get${type}Suggestions?name=${value}`)
+          ).data;
+
+          this[`${type}Suggestions`] = suggestions;
+        } catch (error) {
+          this[`${type}Suggestions`] = [];
+        }
+      }, 450);
+    },
+
+    // Override keyMixin function
+    onKeyDownFunction() {
+      this.showOptions = !this.showOptions;
+
+      this.$nextTick(() => {
+        if (this.showOptions) (this.$refs['button'] as HTMLButtonElement)?.focus();
+      });
+    },
+
+    focusEnd() {
+      console.log('focus end');
+    },
+
+    onSorterChange(item: { id: string | number; value: string }) {
+      this.sorterActive.id = item.id;
+      this.sorterActive.dir = -1;
+      this.$emit('onSearchConfirm');
+    },
+
+    onFilterChange(filter: JournalTimetableFilter) {
+      this.journalFilterActive = filter;
+      this.$emit('onSearchConfirm');
+    },
+
+    onInputClear(id: any) {
+      this.searchersValues[id] = '';
+      this.$emit('onSearchConfirm');
+    },
+
+    onSearchConfirm() {
+      this.$emit('onSearchConfirm');
+    },
+
+    onSearchButtonConfirm() {
+      this.showOptions = false;
+      this.$emit('onSearchConfirm');
+    },
+
+    onResetButtonClick() {
+      this.$emit('onOptionsReset');
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/filters_options.scss';
+</style>
@@ -0,0 +1,110 @@
+<template>
+  <div class="journal-stats" v-show="!store.isOffline">
+    <div class="tabs">
+      <button
+        v-for="tab in data.tabs"
+        class="btn--filled"
+        :data-selected="tab.name == store.currentStatsTab && areStatsOpen"
+        :data-inactive="tab.inactive"
+        @click="onTabButtonClick(tab.name)"
+      >
+        {{ $t(tab.titlePath) }}
+      </button>
+    </div>
+
+    <div class="stats-tab" v-show="areStatsOpen">
+      <keep-alive>
+        <JournalDailyStats v-if="store.currentStatsTab == 'daily'" ref="dailyStatsComp" />
+        <JournalDriverStats v-else-if="store.currentStatsTab == 'driver'" />
+      </keep-alive>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, KeepAlive, onActivated, onDeactivated, reactive, Ref, ref, watch } from 'vue';
+import { useStore } from '../../store/store';
+import JournalDailyStats from './DailyStats.vue';
+import JournalDriverStats from './JournalDriverStats.vue';
+
+// Types
+type TStatTab = 'daily' | 'driver';
+
+// Variables
+
+const store = useStore();
+const dailyStatsComp: Ref<InstanceType<typeof JournalDailyStats> | null> = ref(null);
+
+const areStatsOpen = ref(true);
+const lastClickedTab = ref('daily');
+
+let data = reactive({
+  tabs: [
+    {
+      name: 'daily',
+      titlePath: 'journal.daily-stats-title',
+    },
+    {
+      name: 'driver',
+      titlePath: 'journal.driver-stats-title',
+      inactive: true,
+    },
+  ] as { name: TStatTab; titlePath: string; inactive?: boolean }[],
+});
+
+// Methods
+function onTabButtonClick(tab: TStatTab) {
+  if (lastClickedTab.value == tab || !areStatsOpen.value) {
+    areStatsOpen.value = !areStatsOpen.value;
+  }
+
+  store.currentStatsTab = tab;
+  lastClickedTab.value = tab;
+}
+
+onActivated(() => {
+  dailyStatsComp.value?.startFetchingDailyStats();
+});
+
+onDeactivated(() => {
+  dailyStatsComp.value?.stopFetchingDailyStats();
+});
+
+watch(
+  computed(() => store.driverStatsData),
+  (statsData) => {
+    data.tabs[1].inactive = statsData ? false : true;
+
+    lastClickedTab.value = statsData ? 'driver' : 'daily';
+    if (statsData) areStatsOpen.value = true;
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/JournalStats.scss';
+@import '../../styles/variables.scss';
+
+.tabs {
+  position: relative;
+
+  display: flex;
+  gap: 0.5em;
+
+  margin-bottom: 0.5em;
+
+  button {
+    font-weight: bold;
+    padding: 0.5em 0.75em;
+
+    &[data-inactive='true'] {
+      color: gray;
+    }
+
+    &[data-selected='true'] {
+      color: $accentCol;
+    }
+  }
+}
+</style>
+
@@ -1,451 +0,0 @@
-<template>
-  <section class="journal-timetables">
-    <keep-alive>
-      <DriverStats v-if="statsCardOpen" @close-card="closeCard" />
-    </keep-alive>
-
-    <div class="journal-wrapper">
-      <div class="journal_top-bar">
-        <JournalOptions
-          @on-input-change="search"
-          @on-filter-change="search"
-          @on-sorter-change="search"
-          :sorter-option-ids="['timetableId', 'beginDate', 'distance', 'total-stops']"
-          :filters="journalTimetableFilters"
-        />
-
-        <!-- <button
-          class="btn btn--option"
-          :disabled="store.driverStatsName == ''"
-          @click="() => (statsCardOpen = !statsCardOpen)"
-        >
-          <span v-if="store.driverStatsName">
-            Statystyki maszynisty <b>{{ store.driverStatsName }}</b>
-          </span>
-          <span v-else>Statystyki maszynisty niedostępne</span>
-        </button> -->
-      </div>
-
-      <div class="journal-list">
-        <div class="list-wrapper" ref="scrollElement">
-          <transition name="warning" mode="out-in">
-            <div :key="historyDataStatus.status">
-              <Loading v-if="isDataLoading || isDataInit" />
-
-              <div v-else-if="isDataError" class="journal_warning error">
-                {{ $t('app.error') }}
-              </div>
-
-              <div class="journal_warning" v-else-if="historyList.length == 0">
-                {{ $t('app.no-result') }}
-              </div>
-
-              <ul v-else>
-                <transition-group name="journal-list-anim">
-                  <li v-for="(item, i) in historyList" class="journal_item" :key="item.timetableId">
-                    <div class="journal_item-top">
-                      <span>
-                        <span
-                          tabindex="0"
-                          @click="navigateToTimetable(item)"
-                          @keydown.enter="navigateToTimetable(item)"
-                          style="cursor: pointer"
-                        >
-                          <b class="text--primary">{{ item.trainCategoryCode }}&nbsp;</b>
-                          <b>{{ item.trainNo }}</b>
-                          | <span>{{ item.driverName }}</span> |
-                          <span class="text--grayed">#{{ item.timetableId }}</span>
-                        </span>
-
-                        <div>
-                          <b>{{ item.route.replace('|', ' - ') }}</b>
-                        </div>
-
-                        <hr style="margin: 0.25em 0" />
-
-                        <div class="scenery-list">
-                          <span
-                            v-for="(scenery, i) in getSceneryList(item)"
-                            :key="scenery.name"
-                            :class="{ confirmed: scenery.confirmed }"
-                          >
-                            {{ i > 0 ? ' > ' : '' }} {{ scenery.name }}
-                          </span>
-                        </div>
-
-                        <div class="schedule-dates">
-                          <!-- Data odjazdu ze stacji początkowej -->
-                          <b>{{ item.route.split('|')[0] }}:</b>
-                          <s v-if="item.beginDate != item.scheduledBeginDate" class="text--grayed">
-                            {{ localeTime(item.beginDate, $i18n.locale) }}
-                          </s>
-                          <span>{{ localeTime(item.scheduledBeginDate, $i18n.locale) }} </span>&bull;
-
-                          <!-- Data przyjazdu na stację końcową / porzucenia -->
-                          <b v-if="(item.fulfilled && item.terminated) || !item.terminated">
-                            {{ item.route.split('|').slice(-1)[0] }}:
-                          </b>
-                          <i v-else>{{ $t('journal.timetable-abandoned') }} </i>
-
-                          <s v-if="item.endDate != item.scheduledEndDate && item.terminated" class="text--grayed">
-                            {{ localeTime(item.fulfilled ? item.endDate : item.scheduledEndDate, $i18n.locale) }}
-                          </s>
-                          <span
-                            >{{ localeTime(item.fulfilled ? item.scheduledEndDate : item.endDate, $i18n.locale) }}
-                          </span>
-                        </div>
-                      </span>
-
-                      <b
-                        class="journal_item-status"
-                        :class="{
-                          fulfilled: item.fulfilled || item.currentDistance >= item.routeDistance * 0.9,
-                          terminated: item.terminated && !item.fulfilled,
-                          active: !item.terminated,
-                        }"
-                      >
-                        {{
-                          !item.terminated
-                            ? $t('journal.timetable-active')
-                            : item.fulfilled || item.currentDistance >= item.routeDistance * 0.9
-                            ? $t('journal.timetable-fulfilled')
-                            : $t('journal.timetable-abandoned')
-                        }}
-                      </b>
-                    </div>
-
-                    <div style="margin-top: 1em">
-                      <div>
-                        {{ $t('journal.timetable-day') }} <b>{{ localeDay(item.beginDate, $i18n.locale) }}</b>
-                      </div>
-
-                      <!-- Nick dyżurnego -->
-                      <div v-if="item.authorName">
-                        <b class="text--grayed">{{ $t('journal.dispatcher-name') }}&nbsp;</b>
-                        <router-link
-                          class="dispatcher-link"
-                          :to="`/journal/dispatchers?dispatcherName=${item.authorName}`"
-                          >{{ item.authorName }}</router-link
-                        >
-                      </div>
-                    </div>
-
-                    <div style="margin-top: 1em">
-                      <div>
-                        <b>{{ $t('journal.route-length') }}</b>
-                        {{ !item.fulfilled ? item.currentDistance + ' /' : '' }}
-                        {{ item.routeDistance }} km
-                      </div>
-
-                      <div>
-                        <b>{{ $t('journal.station-count') }}</b>
-                        {{ item.confirmedStopsCount }} /
-                        {{ item.allStopsCount }}
-                      </div>
-                    </div>
-                  </li>
-                </transition-group>
-              </ul>
-            </div>
-          </transition>
-        </div>
-      </div>
-
-      <div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div>
-      <div class="journal_warning" v-else-if="!scrollDataLoaded">{{ $t('journal.loading-further-data') }}</div>
-    </div>
-  </section>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, JournalFilter, JournalSearcher, provide, reactive, Ref, ref } from 'vue';
-import axios from 'axios';
-
-import SearchBox from '@/components/Global/SearchBox.vue';
-import dateMixin from '@/mixins/dateMixin';
-import { DataStatus } from '@/scripts/enums/DataStatus';
-
-import ActionButton from '@/components/Global/ActionButton.vue';
-import JournalOptions from '@/components/JournalView/JournalOptions.vue';
-
-import { URLs } from '@/scripts/utils/apiURLs';
-import { journalTimetableFilters } from '@/data/journalFilters';
-import { JournalFilterType } from '@/scripts/enums/JournalFilterType';
-import routerMixin from '@/mixins/routerMixin';
-import { useStore } from '@/store/store';
-import DriverStats from './DriverStats.vue';
-import { TimetableHistory } from '@/scripts/interfaces/api/TimetablesAPIData';
-import Loading from '../Global/Loading.vue';
-
-const PROD_MODE = process.env.VUE_APP_JOURNAL_TIMETABLES_DEV != '1' || process.env.NODE_ENV === 'production';
-
-const TIMETABLES_API_URL = PROD_MODE
-  ? `${URLs.stacjownikAPI}/api/getTimetables`
-  : 'http://localhost:3001/api/getTimetables';
-
-export default defineComponent({
-  components: { SearchBox, ActionButton, JournalOptions, DriverStats, Loading },
-  mixins: [dateMixin, routerMixin],
-
-  name: 'JournalTimetables',
-
-  data: () => ({
-    icons: {
-      arrow: require('@/assets/icon-arrow-asc.svg'),
-    },
-
-    currentQuery: '',
-    scrollDataLoaded: true,
-    scrollNoMoreData: false,
-
-    showReturnButton: false,
-    statsCardOpen: false,
-
-    journalTimetableFilters,
-  }),
-
-  setup() {
-    const historyDataStatus: Ref<{ status: DataStatus; error: string | null }> = ref({
-      status: DataStatus.Loading,
-      error: null,
-    });
-
-    const sorterActive = ref({ id: 'timetableId', dir: -1 });
-    const journalFilterActive = ref(journalTimetableFilters[0]);
-
-    const searchersValues = reactive([
-      { id: 'search-train', value: '' },
-      { id: 'search-driver', value: '' },
-    ]);
-    const countFromIndex = ref(0);
-    const countLimit = 15;
-
-    provide('searchersValues', searchersValues);
-    provide('sorterActive', sorterActive);
-    provide('journalFilterActive', journalFilterActive);
-
-    const scrollElement: Ref<HTMLElement | null> = ref(null);
-
-    return {
-      historyList: ref([]) as Ref<TimetableHistory[]>,
-      historyDataStatus,
-
-      isDataLoading: computed(() => historyDataStatus.value.status === DataStatus.Loading),
-      isDataError: computed(() => historyDataStatus.value.status === DataStatus.Error),
-      isDataInit: computed(() => historyDataStatus.value.status === DataStatus.Initialized),
-
-      sorterActive,
-      journalFilterActive,
-      searchersValues,
-
-      countFromIndex,
-      countLimit,
-
-      scrollElement,
-      maxCount: ref(15),
-      store: useStore(),
-    };
-  },
-
-  activated() {
-    window.addEventListener('scroll', this.handleScroll);
-  },
-
-  mounted() {
-    this.search();
-  },
-
-  deactivated() {
-    window.removeEventListener('scroll', this.handleScroll);
-  },
-
-  methods: {
-    navigateToTimetable(historyItem: TimetableHistory) {
-      if (historyItem.terminated) return;
-
-      this.navigateTo('/trains', {
-        trainNo: historyItem.trainNo,
-        driverName: historyItem.driverName,
-      });
-    },
-
-    closeCard() {
-      this.statsCardOpen = false;
-    },
-
-    getSceneryList(historyItem: TimetableHistory) {
-      return historyItem.sceneriesString
-        .split('%')
-        .map((name, i) => ({ name, confirmed: i < historyItem.confirmedStopsCount }));
-    },
-
-    handleScroll() {
-      this.showReturnButton = window.scrollY > window.innerHeight;
-
-      const element = this.$refs.scrollElement as HTMLElement;
-
-      if (
-        element.getBoundingClientRect().bottom * 0.85 < window.innerHeight &&
-        this.scrollDataLoaded &&
-        !this.scrollNoMoreData &&
-        this.historyDataStatus.status == DataStatus.Loaded
-      )
-        this.addHistoryData();
-    },
-
-    scrollToTop() {
-      window.scrollTo({ top: 0 });
-    },
-
-    search() {
-      this.fetchHistoryData({
-        searchers: this.searchersValues,
-        filter: this.journalFilterActive,
-      });
-
-      this.scrollNoMoreData = false;
-      this.scrollDataLoaded = true;
-    },
-
-    async addHistoryData() {
-      this.scrollDataLoaded = false;
-
-      const countFrom = this.historyList.length;
-
-      const responseData: TimetableHistory[] = await (
-        await axios.get(`${TIMETABLES_API_URL}?${this.currentQuery}&countFrom=${countFrom}`)
-      ).data;
-
-      if (!responseData) return;
-
-      if (responseData.length == 0) {
-        this.scrollNoMoreData = true;
-        return;
-      }
-
-      this.historyList.push(...responseData);
-      this.scrollDataLoaded = true;
-    },
-
-    async fetchHistoryData(
-      props: {
-        searchers?: JournalSearcher[];
-        filter?: JournalFilter;
-      } = {}
-    ) {
-      this.historyDataStatus.status = DataStatus.Loading;
-
-      const queries: string[] = [];
-
-      const driver = props.searchers?.find((s) => s.id == 'search-driver')?.value.trim();
-      const train = props.searchers?.find((s) => s.id == 'search-train')?.value.trim();
-
-      if (driver) queries.push(`driverName=${driver}`);
-      if (train) queries.push(`trainNo=${train}`);
-
-      // Z API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
-      if (this.sorterActive.id == 'distance') queries.push('sortBy=routeDistance');
-      else if (this.sorterActive.id == 'total-stops') queries.push('sortBy=allStopsCount');
-      else if (this.sorterActive.id == 'beginDate') queries.push('sortBy=beginDate');
-      else queries.push('sortBy=timetableId');
-
-      queries.push('countLimit=15');
-
-      switch (props.filter?.id) {
-        case JournalFilterType.abandoned:
-          queries.push('fulfilled=0', 'terminated=1');
-          break;
-
-        case JournalFilterType.active:
-          queries.push('terminated=0');
-          break;
-
-        case JournalFilterType.fulfilled:
-          queries.push('fulfilled=1');
-          break;
-
-        default:
-          break;
-      }
-
-      this.currentQuery = queries.join('&');
-
-      try {
-        const responseData: TimetableHistory[] = await (
-          await axios.get(`${TIMETABLES_API_URL}?${this.currentQuery}`)
-        ).data;
-
-        if (!responseData) {
-          this.historyDataStatus.status = DataStatus.Error;
-          this.historyDataStatus.error = 'Brak danych!';
-          return;
-        }
-
-        // if (responseData) {
-        //   this.historyDataStatus.status = DataStatus.Error;
-        //   this.historyDataStatus.error = responseData;
-
-        //   return;
-        // }
-
-        if (!responseData) return;
-
-        // Response data exists
-        this.historyList = responseData;
-
-        // Stats display
-        this.store.driverStatsName =
-          this.historyList.length > 0 && this.searchersValues[1].value.trim() ? this.historyList[0].driverName : '';
-
-        this.historyDataStatus.status = DataStatus.Loaded;
-      } catch (error) {
-        this.historyDataStatus.status = DataStatus.Error;
-        this.historyDataStatus.error = 'Ups! Coś poszło nie tak!';
-
-        console.error(error);
-      }
-    },
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/JournalSection.scss';
-
-.journal_item {
-  &-top {
-    display: flex;
-    justify-content: space-between;
-
-    padding: 0.2em 0;
-
-    .scenery-list {
-      span {
-        color: #adadad;
-
-        &.confirmed {
-          color: #a3eba3;
-        }
-      }
-    }
-  }
-
-  &-status {
-    &.terminated {
-      color: salmon;
-    }
-
-    &.fulfilled {
-      color: lightgreen;
-    }
-
-    &.active {
-      color: lightblue;
-    }
-  }
-}
-
-.dispatcher-link {
-  font-weight: bold;
-}
-</style>
@@ -0,0 +1,321 @@
+<template>
+  <ul class="journal-list">
+    <li
+      v-for="{ timetable, sceneryList, ...item } in computedTimetableHistory"
+      class="journal_item"
+      :key="timetable.timetableId"
+    >
+      <div class="journal_item-info">
+        <div class="info-top">
+          <span
+            tabindex="0"
+            @click="showTimetable(timetable)"
+            @keydown.enter="showTimetable(timetable)"
+            style="cursor: pointer"
+          >
+            <b class="text--primary">{{ timetable.trainCategoryCode }}&nbsp;</b>
+            <b>{{ timetable.trainNo }}</b>
+            | <span>{{ timetable.driverName }}</span> |
+            <span class="text--grayed">#{{ timetable.timetableId }}</span>
+          </span>
+
+          <span>
+            <b class="info-date">{{ localeDay(timetable.beginDate, $i18n.locale) }}</b>
+            <b
+              class="info-status"
+              :class="{
+                fulfilled: timetable.fulfilled || timetable.currentDistance >= timetable.routeDistance * 0.9,
+                terminated: timetable.terminated && !timetable.fulfilled,
+                active: !timetable.terminated,
+              }"
+            >
+              {{
+                !timetable.terminated
+                  ? $t('journal.timetable-active')
+                  : timetable.fulfilled || timetable.currentDistance >= timetable.routeDistance * 0.9
+                  ? $t('journal.timetable-fulfilled')
+                  : `${$t('journal.timetable-abandoned')} ${localeTime(timetable.endDate, $i18n.locale)}`
+              }}
+            </b>
+          </span>
+        </div>
+
+        <div class="info-route">
+          <b>{{ timetable.route.replace('|', ' - ') }}</b>
+        </div>
+
+        <hr />
+
+        <div class="scenery-list">
+          <span v-for="(scenery, i) in sceneryList" :key="scenery.name" :class="{ confirmed: scenery.confirmed }">
+            <span v-if="i > 0"> &gt;</span>
+            {{ scenery.name }}
+
+            <!-- Data odjazdu ze stacji początkowej -->
+            <span v-if="i == 0" v-html="scenery.beginDateHTML"></span>
+
+            <!-- Data przyjazdu do stacji końcowej -->
+            <span v-if="i == sceneryList.length - 1" v-html="scenery.endDateHTML"> </span>
+          </span>
+        </div>
+
+        <!-- Status RJ -->
+        <div style="margin: 0.5em 0">
+          <span>
+            <b>{{ $t('journal.route-length') }}</b>
+            {{ !timetable.fulfilled ? timetable.currentDistance + ' /' : '' }}
+            {{ timetable.routeDistance }} km
+          </span>
+          &bull;
+          <span>
+            <b>{{ $t('journal.station-count') }}</b>
+            {{ timetable.confirmedStopsCount }} /
+            {{ timetable.allStopsCount }}
+          </span>
+          <span class="text--grayed" v-if="!timetable.fulfilled && timetable.currentSceneryName">
+            &bull;
+            <b>
+              {{ $t(`journal.${timetable.terminated ? 'last-seen-at' : 'currently-at'}`) }}
+              {{ timetable.currentSceneryName.replace(/.[a-zA-Z0-9]+.sc/, '') }}
+            </b>
+          </span>
+        </div>
+
+        <!-- Nick dyżurnego -->
+        <div v-if="timetable.authorName">
+          <b class="text--grayed">{{ $t('journal.dispatcher-name') }}&nbsp;</b>
+          <router-link class="dispatcher-link" :to="`/journal/dispatchers?dispatcherName=${timetable.authorName}`">
+            <b>{{ timetable.authorName }}</b>
+          </router-link>
+        </div>
+
+        <button
+          v-if="timetable.stockString"
+          class="btn--option btn--show"
+          @click="item.showStock.value = !item.showStock.value"
+        >
+          {{ $t('journal.stock-info') }}
+          <img :src="getIcon(`arrow-${item.showStock.value ? 'asc' : 'desc'}`)" alt="Arrow" />
+        </button>
+
+        <div class="info-extended" v-if="timetable.stockString && item.showStock.value">
+          <hr />
+
+          <div>
+            <span class="badge info-badge">
+              <span>{{ $t('journal.stock-max-speed') }}</span>
+              <span>{{ timetable.maxSpeed }}km/h</span>
+            </span>
+
+            <span class="badge info-badge">
+              <span>{{ $t('journal.stock-length') }}</span>
+              <span>{{ timetable.stockLength }}m</span>
+            </span>
+
+            <span class="badge info-badge">
+              <span>{{ $t('journal.stock-mass') }}</span>
+              <span>{{ Math.floor(timetable.stockMass! / 1000) }}t</span>
+            </span>
+          </div>
+
+          <ul class="stock-list">
+            <li v-for="(car, i) in timetable.stockString.split(';')" :key="i">
+              <img
+                @error="onImageError"
+                :src="`https://rj.td2.info.pl/dist/img/thumbnails/${car.split(':')[0]}.png`"
+                :alt="car"
+              />
+
+              <div>{{ car.replace(/_/g, ' ').split(':')[0] }}</div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref } from 'vue';
+import dateMixin from '../../mixins/dateMixin';
+import imageMixin from '../../mixins/imageMixin';
+import modalTrainMixin from '../../mixins/modalTrainMixin';
+import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
+
+export default defineComponent({
+  props: {
+    timetableHistory: {
+      type: Array as PropType<TimetableHistory[]>,
+      required: true,
+    },
+  },
+
+  mixins: [dateMixin, imageMixin, modalTrainMixin],
+
+  computed: {
+    computedTimetableHistory() {
+      return this.timetableHistory.map((timetable) => ({
+        timetable,
+        sceneryList: this.getSceneryList(timetable),
+        showStock: ref(false),
+      }));
+    },
+  },
+
+  methods: {
+    getSceneryList(timetable: TimetableHistory) {
+      return timetable.sceneriesString.split('%').map((name, i) => {
+        const beginDateHTML =
+          ' (o. ' +
+          (timetable.beginDate != timetable.scheduledBeginDate
+            ? `<s class='text--grayed'>${this.localeTime(timetable.beginDate, this.$i18n.locale)}</s> `
+            : '') +
+          `<span>${this.localeTime(timetable.scheduledBeginDate, this.$i18n.locale)}</span>)`;
+
+        const endDateHTML =
+          ' (p. ' +
+          (timetable.endDate != timetable.scheduledEndDate && timetable.fulfilled
+            ? `<s class='text--grayed'>${this.localeTime(
+                timetable.fulfilled ? timetable.endDate : timetable.scheduledEndDate,
+                this.$i18n.locale
+              )}</s> `
+            : '') +
+          `<span>${this.localeTime(
+            timetable.fulfilled || (timetable.terminated && !timetable.fulfilled)
+              ? timetable.scheduledEndDate
+              : timetable.endDate,
+            this.$i18n.locale
+          )}</span>)`;
+
+        const abandonedDateHTML = ` (porz. ${this.localeTime(
+          timetable.fulfilled ? timetable.scheduledEndDate : timetable.endDate,
+          this.$i18n.locale
+        )})`;
+
+        return { name, confirmed: i < timetable.confirmedStopsCount, beginDateHTML, endDateHTML, abandonedDateHTML };
+      });
+    },
+
+    showTimetable(timetable: TimetableHistory) {
+      if (timetable.terminated) return;
+
+      this.selectModalTrain(timetable.driverName + timetable.trainNo.toString());
+    },
+
+    onImageError(e: Event) {
+      const imageEl = e.target as HTMLImageElement;
+      imageEl.src = this.getImage('unknown.png');
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/variables.scss';
+@import '../../styles/responsive.scss';
+@import '../../styles/badge.scss';
+@import '../../styles/JournalSection.scss';
+
+hr {
+  margin: 0.25em 0;
+}
+
+.info {
+  &-date {
+    margin-right: 0.5em;
+  }
+
+  &-status {
+    padding: 0.05em 0.35em;
+    color: black;
+
+    &.terminated {
+      background-color: salmon;
+    }
+
+    &.fulfilled {
+      background-color: lightgreen;
+    }
+
+    &.active {
+      background-color: lightblue;
+    }
+  }
+
+  &-top {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  &-route {
+    margin: 0.25em 0;
+  }
+
+  &-extended {
+    margin-top: 0.5em;
+  }
+}
+
+ul.stock-list {
+  display: flex;
+  align-items: flex-end;
+  overflow: auto;
+  padding-bottom: 0.5em;
+  margin-top: 1em;
+
+  li > div {
+    text-align: center;
+    color: #aaa;
+    font-size: 0.9em;
+  }
+}
+
+.scenery-list {
+  color: #adadad;
+  span.confirmed {
+    color: #a3eba3;
+  }
+}
+
+.btn--show {
+  display: flex;
+  margin-top: 1em;
+  font-weight: bold;
+  padding: 0.2em 0.45em;
+
+  img {
+    height: 1.3em;
+  }
+}
+
+.info-badge {
+  span:last-child {
+    color: black;
+    background-color: $accentCol;
+  }
+}
+
+@include smallScreen {
+  .info-top {
+    flex-direction: column;
+
+    span {
+      margin: 0.1em auto;
+    }
+  }
+
+  .info-extended {
+    text-align: center;
+  }
+
+  .info-route {
+    display: flex;
+    justify-content: center;
+  }
+
+  .btn--show {
+    margin: 1em auto 0 auto;
+  }
+}
+</style>
@@ -1,112 +1,112 @@
-<template>
-  <section class="scenery-dispatchers-history  scenery-section">
-    <Loading v-if="dataStatus != 2" />
-
-    <div class="list-warning" v-else-if="dispatcherHistoryList.length == 0">{{ $t('scenery.history-list-empty') }}</div>
-
-    <ul class="history-list" v-else>
-      <li class="list-item" v-for="historyItem in dispatcherHistoryList">
-        <div>
-          <span class="text--grayed">#{{ historyItem.stationHash }}&nbsp;</span>
-          <b class="text--primary">{{ historyItem.dispatcherName }}</b>
-        </div>
-
-        <div v-if="historyItem.timestampTo">
-          <b>{{ $d(historyItem.timestampFrom) }}</b>
-
-          {{ timestampToString(historyItem.timestampFrom) }}
-          - {{ timestampToString(historyItem.timestampTo) }} ({{ calculateDuration(historyItem.currentDuration) }})
-        </div>
-
-        <div class="dispatcher-online" v-else>
-          {{ $t('journal.online-since') }}
-          <b>{{ timestampToString(historyItem.timestampFrom) }}</b>
-          ({{ calculateDuration(historyItem.currentDuration) }})
-          <span></span>
-        </div>
-      </li>
-    </ul>
-  </section>
-</template>
-
-<script lang="ts">
-import dateMixin from '@/mixins/dateMixin';
-import { DataStatus } from '@/scripts/enums/DataStatus';
-import { DispatcherHistory } from '@/scripts/interfaces/api/DispatchersAPIData';
-import Station from '@/scripts/interfaces/Station';
-import { URLs } from '@/scripts/utils/apiURLs';
-import axios from 'axios';
-import { defineComponent, PropType } from 'vue';
-import Loading from '../Global/Loading.vue';
-
-export default defineComponent({
-  name: 'SceneryDispatchersHistory',
-  mixins: [dateMixin],
-  props: {
-    station: {
-      type: Object as PropType<Station>,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      dispatcherHistoryList: [] as DispatcherHistory[],
-      dataStatus: DataStatus.Loading,
-    };
-  },
-  mounted() {
-    this.fetchAPIData();
-  },
-  methods: {
-    async fetchAPIData(countFrom = 0, countLimit = 30) {
-      try {
-        const requestString = `${URLs.stacjownikAPI}/api/getDispatchers?stationName=${this.station.name}&countFrom=${countFrom}&countLimit=${countLimit}`;
-        const historyAPIData: DispatcherHistory[] = await (await axios.get(requestString)).data;
-
-        this.dispatcherHistoryList = historyAPIData;
-        this.dataStatus = DataStatus.Loaded;
-
-        console.log(this.dispatcherHistoryList);
-      } catch (error) {
-        console.error(error);
-      }
-    },
-  },
-  components: { Loading },
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-@import '../../styles/SceneryView/styles.scss';
-
-
-.history-list {
-  padding: 0 0.5em;
-}
-
-.list-item {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-
-  text-align: left;
-  background-color: #353535;
-  padding: 0.5em;
-  margin: 0.5em 0;
-
-  line-height: 1.5em;
-}
-
-.dispatcher-online {
-  color: springgreen;
-}
-
-@include smallScreen {
-  .list-item {
-    align-items: center;
-    flex-direction: column;
-  }
-}
-</style>
-
+<template>
+  <section class="scenery-dispatchers-history scenery-section">
+    <Loading v-if="dataStatus != 2" />
+
+    <div class="list-warning" v-else-if="dispatcherHistoryList.length == 0">{{ $t('scenery.history-list-empty') }}</div>
+
+    <ul class="history-list" v-else>
+      <li class="list-item" v-for="historyItem in dispatcherHistoryList">
+        <div>
+          <router-link :to="`/journal/dispatchers?dispatcherName=${historyItem.dispatcherName}`">
+            <span class="text--grayed">#{{ historyItem.stationHash }}&nbsp;</span>
+            <b>{{ historyItem.dispatcherName }}</b>
+          </router-link>
+        </div>
+
+        <div v-if="historyItem.timestampTo">
+          <b>{{ $d(historyItem.timestampFrom) }}</b>
+
+          {{ timestampToString(historyItem.timestampFrom) }}
+          - {{ timestampToString(historyItem.timestampTo) }} ({{ calculateDuration(historyItem.currentDuration) }})
+        </div>
+
+        <div class="dispatcher-online" v-else>
+          {{ $t('journal.online-since') }}
+          <b>{{ timestampToString(historyItem.timestampFrom) }}</b>
+          ({{ calculateDuration(historyItem.currentDuration) }})
+        </div>
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script lang="ts">
+import axios from 'axios';
+import { defineComponent, PropType } from 'vue';
+import dateMixin from '../../mixins/dateMixin';
+import { DataStatus } from '../../scripts/enums/DataStatus';
+import { DispatcherHistory } from '../../scripts/interfaces/api/DispatchersAPIData';
+import Station from '../../scripts/interfaces/Station';
+import { URLs } from '../../scripts/utils/apiURLs';
+import Loading from '../Global/Loading.vue';
+
+export default defineComponent({
+  name: 'SceneryDispatchersHistory',
+  mixins: [dateMixin],
+  props: {
+    station: {
+      type: Object as PropType<Station>,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      dispatcherHistoryList: [] as DispatcherHistory[],
+      dataStatus: DataStatus.Loading,
+    };
+  },
+  mounted() {
+    this.fetchAPIData();
+  },
+  methods: {
+    async fetchAPIData(countFrom = 0, countLimit = 30) {
+      try {
+        const requestString = `${URLs.stacjownikAPI}/api/getDispatchers?stationName=${this.station.name}&countFrom=${countFrom}&countLimit=${countLimit}`;
+        const historyAPIData: DispatcherHistory[] = await (await axios.get(requestString)).data;
+
+        this.dispatcherHistoryList = historyAPIData;
+        this.dataStatus = DataStatus.Loaded;
+      } catch (error) {
+        console.error(error);
+      }
+    },
+  },
+  components: { Loading },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/responsive.scss';
+@import '../../styles/SceneryView/styles.scss';
+
+.history-list {
+  padding: 0 0.5em;
+}
+
+.list-item {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  text-align: left;
+  background-color: #353535;
+  padding: 0.5em;
+  margin: 0.5em 0;
+
+  line-height: 1.5em;
+}
+
+.dispatcher-online {
+  color: springgreen;
+}
+
+@include smallScreen {
+  .history-list {
+    font-size: 1.1em;
+  }
+  .list-item {
+    align-items: center;
+    flex-direction: column;
+  }
+}
+</style>
@@ -1,12 +1,8 @@
 <template>
  <section class="info-header">
-    <div class="scenery-name">
-      <a v-if="station.generalInfo?.url" :href="station.generalInfo.url" target="_blank" rel="noopener noreferrer">
-        {{ station.name }}
-      </a>
-
-      <span v-else>{{ station.name }}</span>
-    </div>
+    <a class="scenery-name" :href="station.generalInfo?.url">
+      {{ station.name }}
+    </a>

    <div class="scenery-hash" v-if="station.onlineInfo?.hash">#{{ station.onlineInfo.hash }}</div>
  </section>
@@ -14,8 +10,7 @@

 <script lang="ts">
 import { defineComponent } from 'vue';
-
-import Station from '@/scripts/interfaces/Station';
+import Station from '../../scripts/interfaces/Station';

 export default defineComponent({
  props: {
@@ -33,18 +28,12 @@ export default defineComponent({

 .scenery-name {
  font-weight: bold;
-  color: $accentCol;

  position: relative;

-  font-size: 3.5em;
-  padding: 0 0.5em;
+  font-size: 3em;

  text-transform: uppercase;
-
-  @include smallScreen() {
-    font-size: 2.75em;
-  }
 }

 .scenery-hash {
@@ -9,13 +9,8 @@
            <b>{{ $t('availability.title') }}:</b> {{ $t(`availability.${station.generalInfo.availability}`) }}

            <span v-if="station.generalInfo.reqLevel > -1">
-              - {{ $tc('scenery.req-level', station.generalInfo.reqLevel, { lvl: station.generalInfo.reqLevel }) }}
+              - {{ $t('scenery.req-level', { lvl: station.generalInfo.reqLevel }, station.generalInfo.reqLevel) }}
            </span>
-
-            <!-- <span v-if="station.generalInfo.reqLevel > 0">
-              - minimum {{ station.generalInfo.reqLevel }} poziom dyżurnego
-            </span>
-            <span v-else-if="station.generalInfo.reqLevel == 0">- dla wszystkich poziomów</span> -->
          </span>

          <span>
@@ -38,15 +33,20 @@
        <scenery-info-routes :station="station" />

        <div class="scenery-authors" v-if="station.generalInfo.authors && station.generalInfo.authors.length > 0">
-          <b> {{ $tc('scenery.authors-title', station.generalInfo.authors.length) }}: </b>
+          <b> {{ $t('scenery.authors-title', { authors: station.generalInfo.authors.length }, station.generalInfo.authors.length) }}: </b>
          {{ station.generalInfo.authors.join(', ') }}
        </div>
+
+        <br />
+        <div class="scenery-topic" v-if="station.generalInfo.url">
+          <a :href="station.generalInfo.url" target="_blank">
+            &gt; {{ $t('scenery.forum-topic', { name: station.name }) }} &lt;
+          </a>
+        </div>
      </div>

      <div style="margin: 2em 0; height: 2px; background-color: white" />

-      <!-- info stats -->
-      <!-- <scenery-info-stats :station="station" /> -->
      <!-- info dispatcher -->
      <scenery-info-dispatcher :station="station" :onlineFrom="onlineFrom" />

@@ -57,10 +57,6 @@
        <!-- spawn list -->
        <scenery-info-spawn-list :station="station" />
      </div>
-
-      <!-- info icons -->
-
-      <!-- info routes -->
    </section>
  </div>
 </template>
@@ -74,8 +70,7 @@ import SceneryInfoStats from './SceneryInfo/SceneryInfoStats.vue';
 import SceneryInfoUserList from './SceneryInfo/SceneryInfoUserList.vue';
 import SceneryInfoSpawnList from './SceneryInfo/SceneryInfoSpawnList.vue';
 import SceneryInfoRoutes from './SceneryInfo/SceneryInfoRoutes.vue';
-
-import Station from '@/scripts/interfaces/Station';
+import Station from '../../scripts/interfaces/Station';

 export default defineComponent({
  components: {
@@ -103,6 +98,7 @@ export default defineComponent({

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

 h3.section-header {
  margin: 0.5em 0;
@@ -112,7 +108,7 @@ h3.section-header {
  justify-content: center;
  align-items: center;

-  font-size: 1.5em;
+  font-size: 1.2em;

  img {
    width: 1.1em;
@@ -130,7 +126,6 @@ h3.section-header {

 .info-general {
  margin-top: 1em;
-  font-size: 1.1em;
 }

 .general-list {
@@ -143,32 +138,7 @@ h3.section-header {
  }
 }

-.badge {
-  font-weight: 600;
-
-  display: inline-block;
-  padding: 0;
-
-  background: #585858;
-
-  margin: 0.25em;
-
-  span {
-    display: inline-block;
-    padding: 0.2em 0.4em;
-  }
-
-  &-none {
-    font-weight: 600;
-
-    padding: 0.2em 0.4em;
-    background: firebrick;
-
-    text-align: center;
-
-    @include smallScreen() {
-      font-size: 1em;
-    }
-  }
+.scenery-topic a {
+  font-weight: bold;
 }
 </style>
@@ -1,7 +1,10 @@
 <template>
  <section class="info-dispatcher">
    <div class="dispatcher" v-if="station.onlineInfo">
-      <span class="dispatcher_level" :style="calculateExpStyle(station.onlineInfo.dispatcherExp)">
+      <span
+        class="dispatcher_level"
+        :style="calculateExpStyle(station.onlineInfo.dispatcherExp, station.onlineInfo.dispatcherIsSupporter)"
+      >
        {{ station.onlineInfo.dispatcherExp > 1 ? station.onlineInfo.dispatcherExp : 'L' }}
      </span>

@@ -13,7 +16,7 @@
      </router-link>

      <span class="dispatcher_likes text--primary">
-        <img :src="icons.like" alt="icon-like" />
+        <img :src="getIcon('like')" alt="icon-like" />
        <span>{{ station.onlineInfo?.dispatcherRate || '0' }}</span>
      </span>
    </div>
@@ -35,14 +38,14 @@

 <script lang="ts">
 import { defineComponent } from 'vue';
-
-import styleMixin from '@/mixins/styleMixin';
-import Station from '@/scripts/interfaces/Station';
-import dateMixin from '@/mixins/dateMixin';
-import routerMixin from '@/mixins/routerMixin';
+import dateMixin from '../../../mixins/dateMixin';
+import imageMixin from '../../../mixins/imageMixin';
+import routerMixin from '../../../mixins/routerMixin';
+import styleMixin from '../../../mixins/styleMixin';
+import Station from '../../../scripts/interfaces/Station';

 export default defineComponent({
-  mixins: [styleMixin, dateMixin, routerMixin],
+  mixins: [styleMixin, dateMixin, routerMixin, imageMixin],
  props: {
    station: {
      type: Object as () => Station,
@@ -54,13 +57,6 @@ export default defineComponent({
      default: -1,
    },
  },
-
-  data: () => ({
-    icons: {
-      spawn: require('@/assets/icon-spawn.svg'),
-      like: require('@/assets/icon-like.svg'),
-    },
-  }),
 });
 </script>

@@ -71,6 +67,7 @@ export default defineComponent({
  justify-content: center;

  flex-wrap: wrap;
+  gap: 0.5em;

  .dispatcher {
    font-size: 2em;
@@ -89,17 +86,15 @@ export default defineComponent({
    }

    &_name {
-      margin-right: 0.4em;
      cursor: pointer;
+      margin-right: 0.25em;
    }

    &_likes {
      img {
        height: 0.7em;
-        margin-right: 0.25em;
+        margin: 0 0.25em;
      }
-
-      margin-right: 1.5em;
    }
  }

@@ -20,7 +20,7 @@
    <img
      v-if="station.generalInfo?.SUP"
      class="icon-info"
-      :src="require(`@/assets/icon-SUP.svg`)"
+      :src="getIcon('SUP')"
      alt="SUP (RASP-UZK)"
      :title="$t('desc.SUP')"
    />
@@ -28,7 +28,7 @@
    <img
      v-if="station.generalInfo?.signalType"
      class="icon-info"
-      :src="require(`@/assets/icon-${station.generalInfo.signalType}.svg`)"
+      :src="getIcon(station.generalInfo.signalType)"
      :alt="station.generalInfo.signalType"
      :title="$t('desc.signals-type') + $t(`signals.${station.generalInfo.signalType}`)"
    />
@@ -36,7 +36,7 @@
    <img
      v-if="station.generalInfo?.availability == 'nonPublic'"
      class="icon-info"
-      :src="icons.lock"
+      :src="getIcon('lock')"
      alt="Non-public scenery"
      :title="$t('desc.non-public')"
    />
@@ -44,7 +44,7 @@
    <img
      v-if="station.generalInfo?.availability == 'unavailable'"
      class="icon-info"
-      :src="icons.unavailable"
+      :src="getIcon('unavailable')"
      alt="Unavailable scenery"
      :title="$t('desc.unavailable')"
    />
@@ -52,7 +52,7 @@
    <img
      v-if="station.generalInfo?.availability == 'abandoned'"
      class="icon-info"
-      :src="icons.abandoned"
+      :src="getIcon('abandoned')"
      alt="Abandoned scenery"
      :title="$t('desc.abandoned')"
    />
@@ -60,7 +60,7 @@
    <img
      v-if="station.generalInfo?.lines"
      class="icon-info"
-      :src="icons.real"
+      :src="getIcon('real')"
      alt="real scenery"
      :title="`${$t('desc.real')} ${station.generalInfo.lines}`"
    />
@@ -68,7 +68,7 @@
    <img
      v-if="!station.generalInfo"
      class="icon-info"
-      :src="icons.unknown"
+      :src="getIcon('unknown')"
      alt="icon-unknown"
      :title="$t('desc.unknown')"
    />
@@ -77,31 +77,19 @@

 <script lang="ts">
 import { defineComponent } from 'vue';
-import stationInfoMixin from '@/mixins/stationInfoMixin';
-
-import Station from '@/scripts/interfaces/Station';
-import styleMixin from '@/mixins/styleMixin';
+import imageMixin from '../../../mixins/imageMixin';
+import stationInfoMixin from '../../../mixins/stationInfoMixin';
+import styleMixin from '../../../mixins/styleMixin';
+import Station from '../../../scripts/interfaces/Station';

 export default defineComponent({
-  mixins: [stationInfoMixin, styleMixin],
+  mixins: [stationInfoMixin, styleMixin, imageMixin],
  props: {
    station: {
      type: Object as () => Station,
      default: {},
    },
  },
-
-  data: () => ({
-    icons: {
-      td2: require('@/assets/icon-td2.svg'),
-      lock: require('@/assets/icon-lock.svg'),
-      unavailable: require('@/assets/icon-unavailable.svg'),
-      unknown: require('@/assets/icon-unknown.svg'),
-      abandoned: require('@/assets/icon-abandoned.svg'),
-
-      real: require('@/assets/icon-real.svg'),
-    },
-  }),
 });
 </script>

@@ -130,3 +118,4 @@ export default defineComponent({
  }
 }
 </style>
+
@@ -57,8 +57,8 @@
 </template>

 <script lang="ts">
-import Station from '@/scripts/interfaces/Station';
 import { defineComponent } from 'vue';
+import Station from '../../../scripts/interfaces/Station';

 export default defineComponent({
  props: {
@@ -1,7 +1,7 @@
 <template>
  <section class="info-spawn-list">
    <h3 class="spawn-header section-header">
-      <img :src="icons.spawn" alt="icon-spawn" />
+      <img :src="getIcon('spawn')" alt="icon-spawn" />
      &nbsp;{{ $t('scenery.spawns') }} &nbsp;
      <span class="text--primary">{{ station.onlineInfo?.spawns.length || '0' }}</span>
    </h3>
@@ -24,22 +24,19 @@
 </template>

 <script lang="ts">
-import Station from '@/scripts/interfaces/Station';
 import { defineComponent } from 'vue';
+import imageMixin from '../../../mixins/imageMixin';
+import Station from '../../../scripts/interfaces/Station';

 export default defineComponent({
+  mixins: [imageMixin],
+
  props: {
    station: {
      type: Object as () => Station,
      default: {},
    },
  },
-
-  data: () => ({
-    icons: {
-      spawn: require('@/assets/icon-spawn.svg'),
-    },
-  }),
 });
 </script>

@@ -1,24 +1,24 @@
 <template>
  <section class="info-stats" :class="!station.onlineInfo ? 'no-stats' : ''">
    <span class="likes">
-      <img :src="icons.like" alt="icon-like" />
+      <img :src="getIcon('like')" alt="icon-like" />
      <span>{{ station.onlineInfo?.dispatcherRate || '0' }}</span>
    </span>

    <span class="users">
-      <img :src="icons.user" alt="icon-user" />
+      <img :src="getIcon('user')" alt="icon-user" />
      <span>{{ station.onlineInfo?.currentUsers || '0' }}</span>
      /
      <span>{{ station.onlineInfo?.maxUsers || '0' }}</span>
    </span>

    <span class="spawns">
-      <img :src="icons.spawn" alt="icon-spawn" />
+      <img :src="getIcon('spawn')" alt="icon-spawn" />
      <span>{{ station.onlineInfo?.spawns.length || '0' }}</span>
    </span>

    <span class="schedules">
-      <img :src="icons.timetable" alt="icon-timetable" />
+      <img :src="getIcon('timetable')" alt="icon-timetable" />
      <span>
        <span style="color: #eee">{{ station.onlineInfo?.scheduledTrains?.length || '0' }}</span>
        /
@@ -32,25 +32,17 @@

 <script lang="ts">
 import { defineComponent } from 'vue';
-
-import Station from '@/scripts/interfaces/Station';
+import imageMixin from '../../../mixins/imageMixin';
+import Station from '../../../scripts/interfaces/Station';

 export default defineComponent({
+  mixins: [imageMixin],
  props: {
    station: {
      type: Object as () => Station,
      default: {},
    },
  },
-
-  data: () => ({
-    icons: {
-      like: require('@/assets/icon-like.svg'),
-      timetable: require('@/assets/icon-timetable.svg'),
-      user: require('@/assets/icon-user.svg'),
-      spawn: require('@/assets/icon-spawn.svg'),
-    },
-  }),
 });
 </script>

@@ -83,7 +75,7 @@ export default defineComponent({
  }

  span > img {
-    width: 1.2em; 
+    width: 1.2em;
    margin-right: 0.5em;
  }
 }
@@ -1,7 +1,7 @@
 <template>
  <section class="info-user-list">
    <h3 class="user-header section-header">
-      <img :src="icons.user" alt="icon-user" />
+      <img :src="getIcon('user')" alt="icon-user" />
      &nbsp;{{ $t('scenery.users') }} &nbsp;
      <span class="text--primary">{{ station.onlineInfo?.currentUsers || '0' }}</span
      >&nbsp;/&nbsp;<span class="text--primary">{{ station.onlineInfo?.maxUsers || '0' }}</span>
@@ -11,10 +11,10 @@
      v-for="(train, i) in computedStationTrains"
      class="badge user"
      :class="train.stopStatus"
-      :key="train.trainNo + i"
+      :key="train.trainId"
      tabindex="0"
-      @click="navigateTo('/trains', { trainNo: train.trainNo, driverName: train.driverName })"
-      @keydown.enter="navigateTo('/trains', { trainNo: train.trainNo, driverName: train.driverName })"
+      @click="selectModalTrain(train.trainId)"
+      @keydown.enter="selectModalTrain(train.trainId)"
    >
      <span class="user_train">{{ train.trainNo }}</span>
      <span class="user_name">{{ train.driverName }}</span>
@@ -27,12 +27,16 @@
 </template>

 <script lang="ts">
-import routerMixin from '@/mixins/routerMixin';
-import Station from '@/scripts/interfaces/Station';
+
 import { computed, defineComponent } from 'vue';
+import imageMixin from '../../../mixins/imageMixin';
+import modalTrainMixin from '../../../mixins/modalTrainMixin';
+import routerMixin from '../../../mixins/routerMixin';
+import Station from '../../../scripts/interfaces/Station';
+import { useStore } from '../../../store/store';

 export default defineComponent({
-  mixins: [routerMixin],
+  mixins: [routerMixin, imageMixin, modalTrainMixin],

  props: {
    station: {
@@ -42,6 +46,8 @@ export default defineComponent({
  },

  setup(props) {
+    const store = useStore();
+
    const computedStationTrains = computed(() => {
      if (!props.station) return [];

@@ -59,14 +65,8 @@ export default defineComponent({
      });
    });

-    return { computedStationTrains };
+    return { computedStationTrains, store };
  },
-
-  data: () => ({
-    icons: {
-      user: require('@/assets/icon-user.svg'),
-    },
-  }),
 });
 </script>

@@ -130,3 +130,4 @@ $disconnected: slategray;
  }
 }
 </style>
+
@@ -2,7 +2,7 @@
  <section class="scenery-timetable">
    <div class="timetable-header">
      <h3>
-        <img :src="icons.timetable" alt="icon-timetable" />&nbsp;
+        <img :src="getIcon('timetable')" alt="icon-timetable" />&nbsp;
        <span>{{ $t('scenery.timetables') }}</span>
        &nbsp;
        <span class="text--primary">{{ station.onlineInfo?.scheduledTrains?.length || '0' }}</span>
@@ -13,181 +13,183 @@
      </h3>

      <div class="timetable-checkpoints" v-if="station && station.generalInfo?.checkpoints">
-        <button
-          v-for="cp in station.generalInfo.checkpoints"
-          :key="cp.checkpointName"
-          class="checkpoint_item btn btn--text"
-          :class="{ current: selectedCheckpoint === cp.checkpointName }"
-          @click="selectCheckpoint(cp)"
-        >
-          {{ cp.checkpointName }}
-        </button>
+        <span v-for="(cp, i) in station.generalInfo.checkpoints" :key="i">
+          {{ (i > 0 && '&bull;') || '' }}
+
+          <button
+            :key="cp.checkpointName"
+            class="checkpoint_item"
+            :class="{ current: selectedCheckpoint === cp.checkpointName }"
+            @click="selectCheckpoint(cp)"
+          >
+            {{ cp.checkpointName }}
+          </button>
+        </span>
      </div>
    </div>

    <div class="timetable-list">
-      <!-- <transition name="scenery-timetable-list-anim" mode="out-in"> -->
-      <!-- <div :key="store.dataStatuses.trains + selectedCheckpoint" class="scenery-timetable-list"> -->
      <div style="padding-bottom: 5em" v-if="store.dataStatuses.trains == 0 && computedScheduledTrains.length == 0">
        <Loading />
      </div>

+      <span class="timetable-item empty" v-else-if="computedScheduledTrains.length == 0 && !station.onlineInfo">
+        {{ $t('scenery.offline') }}
+      </span>
+
      <span class="timetable-item empty" v-else-if="computedScheduledTrains.length == 0">
        {{ $t('scenery.no-timetables') }}
      </span>

-      <div
-        class="timetable-item"
-        v-for="(scheduledTrain, i) in computedScheduledTrains"
-        :key="i + 1"
-        tabindex="0"
-        @click="navigateTo('/trains', { trainNo: scheduledTrain.trainNo, driverName: scheduledTrain.driverName })"
-        @keydown.enter="
-          navigateTo('/trains', {
-            trainNo: scheduledTrain.trainNo,
-            driverName: scheduledTrain.driverName,
-          })
-        "
-      >
-        <span class="timetable-general">
-          <span class="general-info">
-            <span class="info-number">
-              <strong>{{ scheduledTrain.category }}</strong>
-              {{ scheduledTrain.trainNo }}
+      <transition-group name="timetables-anim">
+        <div
+          class="timetable-item"
+          v-for="(scheduledTrain, i) in computedScheduledTrains"
+          :key="scheduledTrain.trainId"
+          tabindex="0"
+          @click.prevent.stop="selectModalTrain(scheduledTrain.trainId)"
+          @keydown.enter.prevent="selectModalTrain(scheduledTrain.trainId)"
+        >
+          <span class="timetable-general">
+            <span class="general-info">
+              <span class="info-number">
+                <strong>{{ scheduledTrain.category }}</strong>
+                {{ scheduledTrain.trainNo }}

-              <span class="g-tooltip" v-if="scheduledTrain.stopInfo.comments">
-                <img :src="icons.warning" />
-                <span class="content" v-html="scheduledTrain.stopInfo.comments"> </span>
-              </span>
-            </span>
-            &nbsp;|&nbsp;
-            <span style="color: white">
-              {{ scheduledTrain.driverName }}
-            </span>
-            &nbsp;|&nbsp;
-            <span class="general-status">
-              <span :class="scheduledTrain.stopStatus">
-                {{ $t(`timetables.${scheduledTrain.stopStatus}`) }}
-                <span v-if="scheduledTrain.stopStatus == 'arriving'"> {{ scheduledTrain.prevStationName }}</span>
-                <span v-if="scheduledTrain.stopStatus.startsWith('departed')">{{
-                  scheduledTrain.nextStationName
-                }}</span>
-              </span>
-            </span>
-
-            <div class="info-route">
-              <strong>{{ scheduledTrain.beginsAt }} - {{ scheduledTrain.terminatesAt }}</strong>
-            </div>
-          </span>
-        </span>
-
-        <span class="timetable-schedule">
-          <span class="schedule-arrival">
-            <span class="arrival-time begins" v-if="scheduledTrain.stopInfo.beginsHere">
-              {{ $t('timetables.begins') }}
-            </span>
-
-            <span class="arrival-time" v-else>
-              <div v-if="scheduledTrain.stopInfo.arrivalDelay == 0">
-                <span>{{ timestampToString(scheduledTrain.stopInfo.arrivalTimestamp) }}</span>
-              </div>
-              <div v-else>
-                <div>
-                  <s style="margin-right: 0.2em" class="text--grayed">{{
-                    timestampToString(scheduledTrain.stopInfo.arrivalTimestamp)
-                  }}</s>
-                </div>
-
-                <span>
-                  {{ timestampToString(scheduledTrain.stopInfo.arrivalRealTimestamp) }}
-                  ({{ scheduledTrain.stopInfo.arrivalDelay > 0 ? '+' : '' }}{{ scheduledTrain.stopInfo.arrivalDelay }})
+                <span class="g-tooltip" v-if="scheduledTrain.stopInfo.comments">
+                  <img :src="getIcon('warning')" />
+                  <span class="content" v-html="scheduledTrain.stopInfo.comments"> </span>
                </span>
-              </div>
-            </span>
-          </span>
-
-          <span class="schedule-stop">
-            <span class="stop-time">
-              <span v-if="scheduledTrain.stopInfo.stopTime">
-                {{ scheduledTrain.stopInfo.stopTime }}
-                {{ scheduledTrain.stopInfo.stopType || 'pt' }}
+              </span>
+              &nbsp;|&nbsp;
+              <span>
+                {{ scheduledTrain.driverName }}
              </span>

-              <span v-else>&nbsp;</span>
-            </span>
+              <div class="info-route">
+                <strong>{{ scheduledTrain.beginsAt }} - {{ scheduledTrain.terminatesAt }}</strong>
+              </div>

-            <span class="arrow"></span>
-
-            <span class="stop-line">
-              {{ scheduledTrain.arrivingLine }}
-              {{ scheduledTrain.arrivingLine && scheduledTrain.departureLine && '&gt;' }}
-              {{ scheduledTrain.departureLine }}
+              <ScheduledTrainStatus :scheduledTrain="scheduledTrain" />
            </span>
          </span>

-          <span class="schedule-departure">
-            <span class="departure-time terminates" v-if="scheduledTrain.stopInfo.terminatesHere">
-              {{ $t('timetables.terminates') }}
-            </span>
+          <span class="timetable-schedule">
+            <span class="schedule-arrival">
+              <span class="arrival-time begins" v-if="scheduledTrain.stopInfo.beginsHere">
+                {{ $t('timetables.begins') }}
+              </span>

-            <span class="departure-time" v-else>
-              <div v-if="scheduledTrain.stopInfo.departureDelay == 0">
-                <span>{{ timestampToString(scheduledTrain.stopInfo.departureTimestamp) }}</span>
-              </div>
-              <div v-else>
-                <div>
-                  <s style="margin-right: 0.2em" class="text--grayed">{{
-                    timestampToString(scheduledTrain.stopInfo.departureTimestamp)
-                  }}</s>
+              <span class="arrival-time" v-else>
+                <div v-if="scheduledTrain.stopInfo.arrivalDelay == 0">
+                  <span>{{ timestampToString(scheduledTrain.stopInfo.arrivalTimestamp) }}</span>
                </div>
+                <div v-else>
+                  <div>
+                    <s style="margin-right: 0.2em" class="text--grayed">{{
+                      timestampToString(scheduledTrain.stopInfo.arrivalTimestamp)
+                    }}</s>
+                  </div>

-                <span>
-                  {{ timestampToString(scheduledTrain.stopInfo.departureRealTimestamp) }}
-                  ({{ scheduledTrain.stopInfo.departureDelay > 0 ? '+' : ''
-                  }}{{ scheduledTrain.stopInfo.departureDelay }})
+                  <span>
+                    {{ timestampToString(scheduledTrain.stopInfo.arrivalRealTimestamp) }}
+                    ({{ scheduledTrain.stopInfo.arrivalDelay > 0 ? '+' : ''
+                    }}{{ scheduledTrain.stopInfo.arrivalDelay }})
+                  </span>
+                </div>
+              </span>
+            </span>
+
+            <span class="schedule-stop">
+              <span class="stop-time">
+                <span v-if="scheduledTrain.stopInfo.stopTime">
+                  {{ scheduledTrain.stopInfo.stopTime }}
+                  {{ scheduledTrain.stopInfo.stopType || 'pt' }}
                </span>
-              </div>
+
+                <span v-else>&nbsp;</span>
+              </span>
+
+              <span class="arrow"></span>
+
+              <span class="stop-line">
+                <span>
+                  {{ scheduledTrain.arrivingLine }}
+                </span>
+                <span></span>
+                <span>
+                  {{ scheduledTrain.departureLine }}
+                </span>
+              </span>
+            </span>
+
+            <span class="schedule-departure">
+              <span class="departure-time terminates" v-if="scheduledTrain.stopInfo.terminatesHere">
+                {{ $t('timetables.terminates') }}
+              </span>
+
+              <span class="departure-time" v-else>
+                <div v-if="scheduledTrain.stopInfo.departureDelay == 0">
+                  <span>{{ timestampToString(scheduledTrain.stopInfo.departureTimestamp) }}</span>
+                </div>
+                <div v-else>
+                  <div>
+                    <s style="margin-right: 0.2em" class="text--grayed">{{
+                      timestampToString(scheduledTrain.stopInfo.departureTimestamp)
+                    }}</s>
+                  </div>
+
+                  <span>
+                    {{ timestampToString(scheduledTrain.stopInfo.departureRealTimestamp) }}
+                    ({{ scheduledTrain.stopInfo.departureDelay > 0 ? '+' : ''
+                    }}{{ scheduledTrain.stopInfo.departureDelay }})
+                  </span>
+                </div>
+              </span>
            </span>
          </span>
-        </span>
-      </div>
+        </div>
+      </transition-group>
    </div>
-
-    <!-- </transition> -->
  </section>
 </template>

 <script lang="ts">
-import Station from '@/scripts/interfaces/Station';
 import SelectBox from '../Global/SelectBox.vue';
 import { computed, defineComponent, PropType, ref } from '@vue/runtime-core';
 import { useRoute } from 'vue-router';
-import dateMixin from '@/mixins/dateMixin';
-import routerMixin from '@/mixins/routerMixin';
-import { useStore } from '@/store/store';
+
 import Loading from '../Global/Loading.vue';
+import TrainModal from '../Global/TrainModal.vue';
+import dateMixin from '../../mixins/dateMixin';
+import routerMixin from '../../mixins/routerMixin';
+import Station from '../../scripts/interfaces/Station';
+import { useStore } from '../../store/store';
+import imageMixin from '../../mixins/imageMixin';
+import modalTrainMixin from '../../mixins/modalTrainMixin';
+import ScheduledTrainStatus from './ScheduledTrainStatus.vue';
+import ScheduledTrain from '../../scripts/interfaces/ScheduledTrain';

 export default defineComponent({
  name: 'SceneryTimetable',

-  components: { SelectBox, Loading },
+  components: { SelectBox, Loading, TrainModal, ScheduledTrainStatus },

-  mixins: [dateMixin, routerMixin],
+  mixins: [dateMixin, routerMixin, imageMixin, modalTrainMixin],

  props: {
    station: {
      type: Object as PropType<Station>,
      required: true,
    },
+
+    timetableOnly: {
+      type: Boolean,
+    },
  },

  data: () => ({
-    viewIcon: require('@/assets/icon-view.svg'),
    listOpen: false,
-    icons: {
-      warning: require('@/assets/icon-warning.svg'),
-      timetable: require('@/assets/icon-timetable.svg'),
-    },
  }),

  setup(props) {
@@ -251,6 +253,10 @@ export default defineComponent({
    selectCheckpoint(cp: { checkpointName: string }) {
      this.selectedCheckpoint = cp.checkpointName;
    },
+
+    showTimetableOnlyView() {
+      this.$router.push(`${this.$route.fullPath}&timetableOnly=1`);
+    },
  },

  mounted() {
@@ -267,11 +273,21 @@ export default defineComponent({
@import '../../styles/responsive.scss';
@import '../../styles/variables.scss';

-// .scenery-timetable {
-//   height: 85vh;
-//   max-height: 900px;
-//   min-height: 450px;
-// }
+.timetables-anim-move,
+.timetables-anim-enter-active,
+.timetables-anim-leave-active {
+  transition: all 250ms ease;
+}
+
+.timetables-anim-enter-from,
+.timetables-anim-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.timetables-anim-leave-active {
+  position: absolute;
+}

 .scenery-timetable {
  height: 100%;
@@ -294,7 +310,7 @@ export default defineComponent({
  h3 {
    display: flex;
    align-items: center;
-    font-size: 1.4em;
+    font-size: 1.3em;
  }
 }

@@ -305,12 +321,14 @@ export default defineComponent({

  &-item {
    margin: 0.5em auto;
-    padding: 0 0.5em;
+    padding: 0.5em;
    max-width: 1100px;

    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    gap: 0 0.5em;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    gap: 2em 0.5em;
+
+    overflow: hidden;

    background: #353535;

@@ -325,9 +343,6 @@ export default defineComponent({
  }

  &-general {
-    padding: 0.5rem 0;
-    border-radius: 10px;
-
    display: flex;
    align-items: center;
    justify-content: space-between;
@@ -338,6 +353,10 @@ export default defineComponent({
  &-schedule {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
+
+    width: 100%;
+    max-width: 400px;
+    margin: 0 auto;
  }
 }

@@ -352,17 +371,15 @@ export default defineComponent({
  flex-wrap: wrap;
  font-size: 1.1em;
  padding: 0.75em 0;
-  .checkpoint_item {
-    &.current {
-      font-weight: bold;
-      color: $accentCol;
-    }

-    &:not(:last-child)::after {
-      margin: 0 0.5em;
-      content: '•';
-      color: white;
-    }
+  button.checkpoint_item {
+    color: #aaa;
+    display: inline;
+  }
+
+  .checkpoint_item.current {
+    font-weight: bold;
+    color: $accentCol;
  }
 }

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

  .info-route {
-    margin-top: 0.5em;
    width: 100%;
  }

@@ -418,38 +434,6 @@ export default defineComponent({
  }
 }

-.general-status {
-  text-align: right;
-
-  span.arriving {
-    color: #ccc;
-  }
-
-  span.departed {
-    color: lime;
-    font-weight: bold;
-
-    &-away {
-      font-weight: bold;
-      color: #5ecc5e;
-    }
-  }
-
-  span.stopped {
-    color: #ffa600;
-    font-weight: bold;
-  }
-
-  span.online {
-    color: gold;
-  }
-
-  span.terminated {
-    color: salmon;
-    font-weight: bold;
-  }
-}
-
 .schedule {
  &-arrival,
  &-stop,
@@ -459,23 +443,40 @@ export default defineComponent({
    align-items: center;

    margin: 0 0.3rem;
-    font-size: 1.1em;
+    font-size: 1.15em;
  }

  &-stop {
    position: relative;
    display: flex;
    flex-direction: column;
-    font-size: 0.85em;
+    font-size: 0.9em;

    padding: 0.3em 0;

    .stop-line {
-      margin-top: 0.25em;
+      display: flex;
+      position: absolute;
+
+      span {
+        width: 65px;
+        word-break: break-all;
+      }
+
+      span:first-child {
+        text-align: right;
+      }
+
+      span:last-child {
+        text-align: left;
+      }
    }

    .stop-time {
-      transform: translateY(-0.25em);
+      position: absolute;
+      transform: translateY(-15px);
+
+      color: $accentCol;
    }
  }
 }
@@ -500,23 +501,9 @@ export default defineComponent({
  }
 }

-@include smallScreen() {
-  .timetable {
-    &-item {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-
-      font-size: 1.05em;
-    }
-
-    &-general {
-      width: 100%;
-    }
-
-    &-schedule {
-      width: 100%;
-    }
+@include smallScreen {
+  .timetable-item {
+    grid-template-columns: 1fr;
  }
 }
 </style>
@@ -1,110 +1,112 @@
-<template>
-  <section class="scenery-timetables-history scenery-section">
-    <Loading v-if="dataStatus != 2" />
-
-    <div class="list-warning" v-else-if="sceneryHistoryList.length == 0">{{ $t('scenery.history-list-empty') }}</div>
-    <ul class="history-list" v-else>
-      <li class="list-item" v-for="historyItem in sceneryHistoryList">
-        <div>
-          <b>{{ localeDay(historyItem.beginDate, $i18n.locale) }}</b>
-          {{ localeTime(historyItem.beginDate, $i18n.locale) }}
-        </div>
-        <div>
-          <span class="text--grayed"> #{{ historyItem.timetableId }} </span>
-          <b class="text--primary">&nbsp;{{ historyItem.trainCategoryCode }} {{ historyItem.trainNo }}</b>
-          <div>{{ historyItem.driverName }}</div>
-        </div>
-
-        <div>{{ historyItem.route.replace('|', ' -> ') }}</div>
-        <!-- <div>{{ historyItem.routeDistance }} km</div> -->
-        <div>
-          {{ $t('scenery.timetable-author-title') }}:
-          <b v-if="historyItem.authorName">{{ historyItem.authorName }}</b>
-          <i v-else>{{ $t('scenery.timetable-author-unknown') }}</i>
-        </div>
-
-        <!-- <div v-if="historyItem.authorId">{{ historyItem.authorName }}</div> -->
-      </li>
-    </ul>
-  </section>
-</template>
-
-<script lang="ts">
-import dateMixin from '@/mixins/dateMixin';
-import { DataStatus } from '@/scripts/enums/DataStatus';
-import { SceneryTimetableHistory, TimetableHistory } from '@/scripts/interfaces/api/TimetablesAPIData';
-import Station from '@/scripts/interfaces/Station';
-import { URLs } from '@/scripts/utils/apiURLs';
-import axios from 'axios';
-import { defineComponent, PropType } from 'vue';
-import Loading from '../Global/Loading.vue';
-
-export default defineComponent({
-  name: 'SceneryTimetablesHistory',
-  mixins: [dateMixin],
-  props: {
-    station: {
-      type: Object as PropType<Station>,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      sceneryHistoryList: [] as TimetableHistory[],
-      dataStatus: DataStatus.Loading,
-    };
-  },
-  mounted() {
-    this.fetchAPIData();
-  },
-  methods: {
-    async fetchAPIData(countFrom = 0, countLimit = 15) {
-      try {
-        const requestString = `${URLs.stacjownikAPI}/api/getSceneryTimetables?name=${this.station.name}&countFrom=${countFrom}&countLimit=${countLimit}`;
-        const historyAPIData: SceneryTimetableHistory = await (await axios.get(requestString)).data;
-
-        this.sceneryHistoryList = historyAPIData.sceneryTimetables;
-        this.dataStatus = DataStatus.Loaded;
-      } catch (error) {
-        console.error(error);
-      }
-    },
-  },
-  components: { Loading },
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-@import '../../styles/SceneryView/styles.scss';
-
-.list-warning {
-  padding: 1em 0.5em;
-  background-color: #444;
-  font-size: 1.2em;
-}
-
-.history-list {
-  padding: 0 0.5em;
-}
-
-.list-item {
-  display: grid;
-  grid-template-columns: 1fr 2fr 2fr 1fr;
-  gap: 1em;
-  align-items: center;
-
-  background-color: #353535;
-  padding: 0.5em;
-  margin: 0.5em 0;
-
-  line-height: 1.5em;
-}
-
-@include smallScreen {
-  .list-item {
-    grid-template-columns: 1fr 1fr;
-    font-size: 1.05em;
-  }
-}
-</style>
+<template>
+  <section class="scenery-timetables-history scenery-section">
+    <Loading v-if="dataStatus != 2" />
+
+    <div class="list-warning" v-else-if="sceneryHistoryList.length == 0">{{ $t('scenery.history-list-empty') }}</div>
+    <ul class="history-list" v-else>
+      <li class="list-item" v-for="historyItem in sceneryHistoryList">
+        <div>
+          <b>{{ localeDay(historyItem.beginDate, $i18n.locale) }}</b>
+          {{ localeTime(historyItem.beginDate, $i18n.locale) }}
+        </div>
+
+        <div>
+          <router-link :to="`/journal/timetables?timetableId=${historyItem.timetableId}`">
+            <span class="text--grayed"> #{{ historyItem.timetableId }} </span>
+            <b class="text--primary">&nbsp;{{ historyItem.trainCategoryCode }} {{ historyItem.trainNo }}</b>
+            <div>{{ historyItem.driverName }}</div>
+          </router-link>
+        </div>
+
+        <div>{{ historyItem.route.replace('|', ' -> ') }}</div>
+        <!-- <div>{{ historyItem.routeDistance }} km</div> -->
+        <div>
+          {{ $t('scenery.timetable-author-title') }}:
+          <b v-if="historyItem.authorName">{{ historyItem.authorName }}</b>
+          <i v-else>{{ $t('scenery.timetable-author-unknown') }}</i>
+        </div>
+
+        <!-- <div v-if="historyItem.authorId">{{ historyItem.authorName }}</div> -->
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script lang="ts">
+import axios from 'axios';
+import { defineComponent, PropType } from 'vue';
+import dateMixin from '../../mixins/dateMixin';
+import { DataStatus } from '../../scripts/enums/DataStatus';
+import { TimetableHistory, SceneryTimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
+import Station from '../../scripts/interfaces/Station';
+import { URLs } from '../../scripts/utils/apiURLs';
+import Loading from '../Global/Loading.vue';
+
+export default defineComponent({
+  name: 'SceneryTimetablesHistory',
+  mixins: [dateMixin],
+  props: {
+    station: {
+      type: Object as PropType<Station>,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      sceneryHistoryList: [] as TimetableHistory[],
+      dataStatus: DataStatus.Loading,
+    };
+  },
+  mounted() {
+    this.fetchAPIData();
+  },
+  methods: {
+    async fetchAPIData(countFrom = 0, countLimit = 15) {
+      try {
+        const requestString = `${URLs.stacjownikAPI}/api/getSceneryTimetables?name=${this.station.name}&countFrom=${countFrom}&countLimit=${countLimit}`;
+        const historyAPIData: SceneryTimetableHistory = await (await axios.get(requestString)).data;
+
+        this.sceneryHistoryList = historyAPIData.sceneryTimetables;
+        this.dataStatus = DataStatus.Loaded;
+      } catch (error) {
+        console.error(error);
+      }
+    },
+  },
+  components: { Loading },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/responsive.scss';
+@import '../../styles/SceneryView/styles.scss';
+
+.list-warning {
+  padding: 1em 0.5em;
+  background-color: #444;
+  font-size: 1.2em;
+}
+
+.history-list {
+  padding: 0 0.5em;
+}
+
+.list-item {
+  display: grid;
+  grid-template-columns: 1fr 2fr 2fr 1fr;
+  gap: 1em;
+  align-items: center;
+
+  background-color: #353535;
+  padding: 0.5em;
+  margin: 0.5em 0;
+
+  line-height: 1.5em;
+}
+
+@include smallScreen {
+  .list-item {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+</style>
@@ -0,0 +1,88 @@
+<template>
+  <div class="general-status">
+    <span :class="scheduledTrain.stopStatus">
+      <span v-if="scheduledTrain.stopStatus == 'arriving'">
+        <span v-if="scheduledTrain.prevDepartureLine">({{ scheduledTrain.prevDepartureLine }})</span>
+        {{ scheduledTrain.prevStationName }}
+        &gt;<span v-if="scheduledTrain.nextArrivalLine"> ({{ scheduledTrain.nextArrivalLine }}) </span>
+        {{ scheduledTrain.nextStationName || '---' }}
+      </span>
+
+      <span v-else-if="scheduledTrain.stopStatus == 'departed'">
+        &gt;&gt; <span v-if="scheduledTrain.nextArrivalLine"> ({{ scheduledTrain.nextArrivalLine }}) </span>
+        {{ scheduledTrain.nextStationName }}
+      </span>
+
+      <span v-else-if="scheduledTrain.stopStatus == 'departed-away'">
+        &gt;&gt;&gt;
+        <span v-if="scheduledTrain.nextArrivalLine"> ({{ scheduledTrain.nextArrivalLine }}) </span>
+        {{ scheduledTrain.nextStationName }}
+      </span>
+
+      <span v-else-if="scheduledTrain.stopStatus == 'online'">
+        &gt;
+        <span v-if="scheduledTrain.nextArrivalLine">
+          ({{ scheduledTrain.nextArrivalLine }}) {{ scheduledTrain.nextStationName }}
+        </span>
+        <span v-else-if="!scheduledTrain.nextStationName">{{ $t('timetables.end') }}</span>
+        <span v-else>{{ scheduledTrain.nextStationName }}</span>
+      </span>
+
+      <span v-else-if="scheduledTrain.stopStatus == 'stopped'">
+        &gt;
+        <span v-if="scheduledTrain.nextArrivalLine"> ({{ scheduledTrain.nextArrivalLine }}) </span>
+        {{ scheduledTrain.nextStationName }}
+      </span>
+
+      <span v-else-if="scheduledTrain.stopStatus == 'terminated'">X {{ $t('timetables.terminated') }}</span>
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import ScheduledTrain from '../../scripts/interfaces/ScheduledTrain';
+
+export default defineComponent({
+  props: {
+    scheduledTrain: {
+      type: Object as PropType<ScheduledTrain>,
+      required: true,
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.general-status {
+  margin-top: 0.5em;
+
+  span.arriving {
+    color: #ccc;
+  }
+
+  span.departed {
+    color: lime;
+    font-weight: bold;
+
+    &-away {
+      font-weight: bold;
+      color: #5ecc5e;
+    }
+  }
+
+  span.stopped {
+    color: #ffa600;
+    font-weight: bold;
+  }
+
+  span.online {
+    color: gold;
+  }
+
+  span.terminated {
+    color: salmon;
+    font-weight: bold;
+  }
+}
+</style>
@@ -1,23 +1,12 @@
 <template>
-  <div class="filter-option option">
-    <label>
-      <input
-        type="checkbox"
-        :name="option.name"
-        :defaultValue="option.defaultValue"
-        :id="option.id"
-        v-model="option.value"
-        @change="handleChange"
-      />
-      <span v-if="option.id != 'troll'" :class="option.section + (option.value ? ' checked' : '')"
-        >{{ option.id != 'troll' ? $t(`filters.${option.id}`) : 'ARKADIA ZDRÓJ' }}
-      </span>
-    </label>
-  </div>
+  <button class="btn--action" :class="option.section" :data-selected="option.value" @click="handleChange">
+    {{ $t(`filters.${option.id}`) }}
+  </button>
 </template>

 <script lang="ts">
 import { defineComponent } from 'vue';
+import { useStationFiltersStore } from '../../store/stationFiltersStore';

 interface FilterOption {
  id: string;
@@ -34,29 +23,26 @@ export default defineComponent({
      required: true,
    },
  },
-  emits: ['optionChange'],
+
+  setup() {
+    return {
+      filterStore: useStationFiltersStore(),
+    };
+  },
  methods: {
    handleChange() {
-      if (this.option.name == 'troll') {
-        location.href = 'https://www.youtube.com/watch?v=HIcSWuKMwOw';
-        return;
-      }
+      this.option.value = !this.option.value;

-      this.$emit('optionChange', {
+      this.filterStore.changeFilterValue({
        name: this.option.name,
-        value: this.option.value,
+        value: !this.option.value,
      });
    },
  },
-  setup() {
-    return {};
-  },
 });
 </script>

 <style lang="scss" scoped>
-@import '../../styles/option.scss';
-
 $accessCol: #e03b07;
 $controlCol: #0085ff;
 $signalCol: #bf7c00;
@@ -64,63 +50,49 @@ $statusCol: #349b32;
 $saveCol: #28a826;
 $routesCol: #9049c0;

-.option span {
-  font-size: 0.9em;
-  &.checked {
+button {
+  width: 100%;
+  padding: 0.4em;
+  border-radius: 0.4em;
+
+  &:focus-visible {
+    outline: 1px solid white;
+  }
+
+  &[data-selected='true'] {
    &.access {
      background-color: $accessCol;
-
-      &::before {
-        box-shadow: 0 0 6px 1px $accessCol;
-      }
+      box-shadow: 0 0 6px 1px $accessCol;
    }

    &.control {
      background-color: $controlCol;
-
-      &::before {
-        box-shadow: 0 0 6px 1px $controlCol;
-      }
+      box-shadow: 0 0 6px 1px $controlCol;
    }

    &.signals {
      background-color: $signalCol;
-
-      &::before {
-        box-shadow: 0 0 6px 1px $signalCol;
-      }
+      box-shadow: 0 0 6px 1px $signalCol;
    }

    &.routes {
      background-color: $routesCol;
-
-      &::before {
-        box-shadow: 0 0 6px 1px $routesCol;
-      }
+      box-shadow: 0 0 6px 1px $routesCol;
    }

    &.status {
      background-color: $statusCol;
-
-      &::before {
-        box-shadow: 0 0 6px 1px $statusCol;
-      }
+      box-shadow: 0 0 6px 1px $statusCol;
    }

    &.save {
      background-color: $saveCol;
-
-      &::before {
-        box-shadow: 0 0 6px 1px $saveCol;
-      }
+      box-shadow: 0 0 6px 1px $saveCol;
    }

    &.troll {
      background-color: firebrick;
-
-      &::before {
-        box-shadow: 0 0 6px 1px firebrick;
-      }
+      box-shadow: 0 0 6px 1px firebrick;
    }

    &.mode {
@@ -129,18 +101,6 @@ $routesCol: #9049c0;

      font-weight: 500;
    }
-
-    &::before {
-      position: absolute;
-      content: '';
-      top: 0;
-      left: 0;
-
-      width: 100%;
-      height: 100%;
-
-      border-radius: 0.5em;
-    }
  }
 }
 </style>
@@ -1,20 +1,35 @@
 <template>
-  <section class="filter-card" v-click-outside="closeCard">
-    <div class="card_btn">
-      <button class="btn btn--option" @click="toggleCard">
-        <img class="button_icon" :src="filterIcon" alt="icon-filter" />
-        {{ $t('options.filters') }}
+  <section class="filter-card" v-click-outside="closeCard" @keydown.esc="closeCard">
+    <div class="card_controls">
+      <button class="btn--filled btn--image" @click="toggleCard">
+        <img class="button_icon" :src="getIcon('filter2')" alt="filter icon" />
+        {{ $t('options.filters') }} [F]
      </button>
+
+      <label for="scenery-search">
+        <input
+          id="scenery-search"
+          list="sceneries"
+          :placeholder="$t('sceneries.scenery-search')"
+          @focus="preventKeyDown = true"
+          @blur="preventKeyDown = false"
+          v-model="chosenSearchScenery"
+        />
+
+        <datalist id="sceneries">
+          <option v-for="scenery in sortedStationList" :value="scenery.name"></option>
+        </datalist>
+      </label>
    </div>

    <transition name="card-anim">
-      <div class="card" v-if="isVisible">
+      <div class="card" v-if="isVisible" tabindex="0" ref="cardEl">
        <div class="card_content">
          <div class="card_title flex">{{ $t('filters.title') }}</div>

          <section class="card_options">
            <filter-option
-              v-for="(option, i) in inputs.options"
+              v-for="(option, i) in filterStore.inputs.options"
              :option="option"
              :key="i"
              @optionChange="handleChange"
@@ -23,7 +38,7 @@
          <section class="card_timestamp" style="text-align: center">
            <div>{{ $t('filters.minimum-hours-title') }}</div>
            <span class="clock">
-              <button @click="subHour">-</button>
+              <button class="btn--action" @click="subHour">-</button>
              <span>{{
                minimumHours == 0
                  ? $t('filters.now')
@@ -31,7 +46,7 @@
                  ? minimumHours + $t('filters.hour')
                  : $t('filters.no-limit')
              }}</span>
-              <button @click="addHour">+</button>
+              <button class="btn--action" @click="addHour">+</button>
            </span>
          </section>

@@ -42,11 +57,13 @@
              name="authors"
              v-model="authorsInputValue"
              @input="handleAuthorsInput"
+              @focus="preventKeyDown = true"
+              @blur="preventKeyDown = false"
            />
          </section>

          <section class="card_sliders">
-            <div class="slider" v-for="(slider, i) in inputs.sliders" :key="i">
+            <div class="slider" v-for="(slider, i) in filterStore.inputs.sliders" :key="i">
              <input
                class="slider-input"
                type="range"
@@ -65,23 +82,13 @@
          </section>

          <section class="card_actions">
-            <div>
-              <filter-option
-                @optionChange="saveFilters"
-                :option="{
-                  id: 'save',
-                  name: 'save',
-                  section: 'mode',
-                  value: saveOptions,
-                  defaultValue: true,
-                }"
-              />
-            </div>
-            <div>
-              <action-button class="outlined" @click="resetFilters">
-                {{ $t('filters.reset') }}
-              </action-button>
-              <action-button class="outlined" @click="closeCard">{{ $t('filters.close') }}</action-button>
+            <div class="action-buttons">
+              <button class="btn--action" style="width: 100%" @click="saveFilters" :data-selected="saveOptions">
+                {{ $t('filters.save') }}
+              </button>
+
+              <button class="btn--action" @click="resetFilters">{{ $t('filters.reset') }}</button>
+              <button class="btn--action" @click="closeCard">{{ $t('filters.close') }}</button>
            </div>
          </section>
        </div>
@@ -91,23 +98,22 @@
 </template>

 <script lang="ts">
-import { defineComponent, inject } from '@vue/runtime-core';
+import { defineComponent, inject } from 'vue';
+import imageMixin from '../../mixins/imageMixin';
+import keyMixin from '../../mixins/keyMixin';
+import routerMixin from '../../mixins/routerMixin';
+import StorageManager from '../../scripts/managers/storageManager';
+import { useStationFiltersStore } from '../../store/stationFiltersStore';
+import { useStore } from '../../store/store';

-import inputData from '@/data/options.json';
-
-import StorageManager from '@/scripts/managers/storageManager';
 import ActionButton from '../Global/ActionButton.vue';
 import FilterOption from './FilterOption.vue';
-import { useStore } from '@/store/store';

 export default defineComponent({
  components: { ActionButton, FilterOption },
-  emits: ['changeFilterValue', 'invertFilters', 'resetFilters'],
+  mixins: [imageMixin, keyMixin, routerMixin],

  data: () => ({
-    filterIcon: require('@/assets/icon-filter2.svg'),
-
-    inputs: { ...inputData },
    saveOptions: false,
    STORAGE_KEY: 'options_saved',

@@ -117,15 +123,18 @@ export default defineComponent({
    currentRegion: { id: '', value: '' },

    delayInputTimer: -1,
+    chosenSearchScenery: '',
  }),

  setup() {
    const isVisible = inject('isFilterCardVisible');
    const store = useStore();
+    const filterStore = useStationFiltersStore();

    return {
      isVisible,
      store,
+      filterStore,
    };
  },

@@ -141,9 +150,39 @@ export default defineComponent({
    this.currentRegion = this.store.region;
  },

+  computed: {
+    sortedStationList() {
+      return this.store.stationList
+        .filter((s) => s.name.toLocaleLowerCase().includes(this.chosenSearchScenery.toLocaleLowerCase()))
+        .sort((s1, s2) => (s1.name > s2.name ? 1 : -1));
+    },
+  },
+
+  watch: {
+    chosenSearchScenery(value: string) {
+      const chosenStation = this.store.stationList.find(({ name }) => name == value);
+
+      if (chosenStation) {
+        this.$router.push(`/scenery?station=${chosenStation.name.replace(/ /g, '_')}`);
+        this.chosenSearchScenery = '';
+      }
+    },
+
+    isVisible(value: boolean) {
+      this.$nextTick(() => {
+        if (value) (this.$refs['cardEl'] as HTMLDivElement).focus();
+      });
+    },
+  },
+
  methods: {
+    // Override keyMixin function
+    onKeyDownFunction() {
+      this.isVisible = !this.isVisible;
+    },
+
    handleChange(change: { name: string; value: boolean }) {
-      this.$emit('changeFilterValue', {
+      this.filterStore.changeFilterValue({
        name: change.name,
        value: !change.value,
      });
@@ -154,7 +193,7 @@ export default defineComponent({
    handleInput(e: Event) {
      const target = e.target as HTMLInputElement;

-      this.$emit('changeFilterValue', {
+      this.filterStore.changeFilterValue({
        name: target.name,
        value: target.value,
      });
@@ -165,13 +204,13 @@ export default defineComponent({
    handleAuthorsInput(e: Event) {
      clearTimeout(this.delayInputTimer);

-      this.delayInputTimer = setTimeout(() => {
+      this.delayInputTimer = window.setTimeout(() => {
        this.handleInput(e);
      }, 400);
    },

    changeNumericFilterValue(name: string, value: number, saveToStorage = false) {
-      this.$emit('changeFilterValue', {
+      this.filterStore.changeFilterValue({
        name,
        value,
      });
@@ -191,17 +230,8 @@ export default defineComponent({
      this.changeNumericFilterValue('onlineFromHours', this.minimumHours, true);
    },

-    invertFilters() {
-      this.inputs.options.forEach((option) => {
-        option.value = !option.value;
-        StorageManager.setBooleanValue(option.name, option.value);
-      });
-
-      this.$emit('invertFilters');
-    },
-
-    saveFilters(change: { value }) {
-      this.saveOptions = change.value;
+    saveFilters() {
+      this.saveOptions = !this.saveOptions;

      if (!this.saveOptions) {
        StorageManager.unregisterStorage(this.STORAGE_KEY);
@@ -210,28 +240,16 @@ export default defineComponent({

      StorageManager.registerStorage(this.STORAGE_KEY);

-      this.inputs.options.forEach((option) => StorageManager.setBooleanValue(option.name, option.value));
-
-      this.inputs.sliders.forEach((slider) => StorageManager.setNumericValue(slider.name, slider.value));
+      this.filterStore.inputs.options.forEach((option) => StorageManager.setBooleanValue(option.name, !option.value));
+      this.filterStore.inputs.sliders.forEach((slider) => StorageManager.setNumericValue(slider.name, slider.value));
    },

    resetFilters() {
-      this.inputs.options.forEach((option) => {
-        option.value = option.defaultValue;
-        StorageManager.setBooleanValue(option.name, option.value);
-      });
-
-      this.inputs.sliders.forEach((slider) => {
-        slider.value = slider.defaultValue;
-        StorageManager.setNumericValue(slider.name, slider.value);
-      });
-
      this.authorsInputValue = '';

      this.minimumHours = 0;
      this.changeNumericFilterValue('onlineFromHours', this.minimumHours, true);
-
-      this.$emit('resetFilters');
+      this.filterStore.resetFilters();
    },

    closeCard() {
@@ -257,34 +275,30 @@ export default defineComponent({

  &-enter-from,
  &-leave-to {
-    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.45);
  }
 }

 .card {
-  &_btn {
-    button {
-      display: flex;
-      align-items: center;
+  &_controls {
+    display: flex;
+    gap: 0.5em;

-      padding: 0.5em 1em;
-      border-radius: 0.75em 0.75em 0 0;
-
-      font-weight: bold;
-    }
-
-    img {
-      width: 1.3em;
-      margin-right: 0.25em;
+    input {
+      border-radius: 0.5em 0.5em 0 0;
+      height: 100%;
    }
  }

  &_content {
-    display: grid;
-    grid-template-rows: 70px 1fr 100px 50px auto;
-    min-height: 0;
-    max-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+
+    max-height: 90vh;
+
+    padding: 1em;
  }

  &_title {
@@ -292,8 +306,6 @@ export default defineComponent({
    font-weight: 700;
    color: $accentCol;

-    margin: 0.5em 0;
-
    text-align: center;
  }

@@ -341,32 +353,18 @@ export default defineComponent({
      align-items: center;
      justify-content: center;

-      font-size: 1.15em;
+      font-size: 1.2em;
+      margin-top: 0.5em;

-      color: $accentCol;
-      font-weight: bold;
-    }
-
-    span {
-      min-width: 100px;
-    }
-
-    button {
-      border: none;
-      outline: none;
-      background: none;
-      padding: 0 0.45em;
-
-      cursor: pointer;
-
-      color: white;
-
-      font-size: 1.35em;
-
-      &:focus,
-      &:hover {
+      span {
+        min-width: 120px;
+        font-weight: bold;
        color: $accentCol;
      }
+
+      button {
+        padding: 0.2em 0.6em;
+      }
    }
  }

@@ -388,22 +386,33 @@ export default defineComponent({
    input {
      width: 100%;
      padding: 0.5em;
+      border: 1px solid white;
    }
  }

  &_actions {
-    margin-top: 1em;
-
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    button {
-      margin: 1em 0.25em;
+    .filter-option {
+      max-width: 50%;
+      margin: 0 auto;
    }

-    .option {
-      font-size: 1.1em;
+    .action-buttons {
+      display: flex;
+      gap: 0.5em;
+      width: 100%;
+
+      margin-top: 0.5em;
+
+      button {
+        width: 50%;
+        margin: 0 auto;
+        padding: 0.5em;
+
+        &[data-selected='true'] {
+          background-color: lightgreen;
+          color: black;
+        }
+      }
    }
  }
 }
@@ -434,8 +443,13 @@ export default defineComponent({
    min-width: 25%;
    max-width: 120px;

+    &:focus-visible ~ * {
+      color: gold;
+    }
+
    &::-webkit-slider-thumb {
      -webkit-appearance: none;
+      appearance: none;

      height: 20px;
      width: 20px;
@@ -15,7 +15,7 @@
                <img
                  class="sort-icon"
                  v-if="sorterActive.index == i"
-                  :src="sorterActive.dir == 1 ? ascIcon : descIcon"
+                  :src="sorterActive.dir == 1 ? getIcon('arrow-asc') : getIcon('arrow-desc')"
                  alt="sort icon"
                />
              </span>
@@ -23,12 +23,12 @@

            <th v-for="(id, i) in headIconsIds" :key="id" @click="() => changeSorter(i + 7)">
              <span class="header_wrapper">
-                <img :src="require(`@/assets/icon-${id}.svg`)" :alt="id" :title="$t(`sceneries.${id}s`)" />
+                <img :src="getIcon(id)" :alt="id" :title="$t(`sceneries.${id}s`)" />

                <img
                  class="sort-icon"
                  v-if="sorterActive.index == i + 7"
-                  :src="sorterActive.dir == 1 ? ascIcon : descIcon"
+                  :src="sorterActive.dir == 1 ? getIcon('arrow-asc') : getIcon('arrow-desc')"
                  alt="sort icon"
                />
              </span>
@@ -67,15 +67,15 @@
                </span>

                <span v-else-if="station.generalInfo.availability == 'abandoned'">
-                  <img :src="abandonedIcon" alt="non-public" :title="$t('desc.abandoned')" />
+                  <img :src="getIcon('abandoned')" alt="non-public" :title="$t('desc.abandoned')" />
                </span>

                <span v-else-if="station.generalInfo.availability == 'nonPublic'">
-                  <img :src="lockIcon" alt="non-public" :title="$t('desc.non-public')" />
+                  <img :src="getIcon('lock')" alt="non-public" :title="$t('desc.non-public')" />
                </span>

                <span v-else>
-                  <img :src="unavailableIcon" alt="unavailable" :title="$t('desc.unavailable')" />
+                  <img :src="getIcon('unavailable')" alt="unavailable" :title="$t('desc.unavailable')" />
                </span>
              </span>

@@ -100,7 +100,10 @@
            </td>

            <td class="station_dispatcher-exp">
-              <span v-if="station.onlineInfo" :style="calculateExpStyle(station.onlineInfo.dispatcherExp)">
+              <span
+                v-if="station.onlineInfo"
+                :style="calculateExpStyle(station.onlineInfo.dispatcherExp, station.onlineInfo.dispatcherIsSupporter)"
+              >
                {{ 2 > station.onlineInfo.dispatcherExp ? 'L' : station.onlineInfo.dispatcherExp }}
              </span>
            </td>
@@ -154,7 +157,7 @@
                <img
                  class="icon-info"
                  v-if="station.generalInfo.SUP"
-                  :src="require(`@/assets/icon-SUP.svg`)"
+                  :src="getIcon('SUP')"
                  alt="SUP (RASP-UZK)"
                  :title="$t('desc.SUP')"
                />
@@ -164,7 +167,7 @@
                <img
                  class="icon-info"
                  v-if="station.generalInfo.signalType"
-                  :src="require(`@/assets/icon-${station.generalInfo.signalType}.svg`)"
+                  :src="getIcon(station.generalInfo.signalType)"
                  :alt="station.generalInfo.signalType"
                  :title="$t('desc.signals-type') + $t(`signals.${station.generalInfo.signalType}`)"
                />
@@ -174,7 +177,7 @@
                <img
                  class="icon-info"
                  v-if="station.generalInfo && station.generalInfo.routes.sblRouteNames.length > 0"
-                  :src="SBLIcon"
+                  :src="getIcon('SBL')"
                  alt="SBL"
                  :title="$t('desc.SBL') + `${station.generalInfo.routes.sblRouteNames.join(',')}`"
                />
@@ -182,7 +185,7 @@
            </td>

            <td class="station_info" v-else>
-              <img class="icon-info" :src="unknownIcon" alt="icon-unknown" :title="$t('desc.unknown')" />
+              <img class="icon-info" :src="getIcon('unknown')" alt="icon-unknown" :title="$t('desc.unknown')" />
            </td>

            <td class="station_users" :class="{ inactive: !station.onlineInfo }">
@@ -222,16 +225,16 @@
 </template>

 <script lang="ts">
-import styleMixin from '@/mixins/styleMixin';
-import dateMixin from '@/mixins/dateMixin';
-import stationInfoMixin from '@/mixins/stationInfoMixin';
-import returnBtnMixin from '@/mixins/returnBtnMixin';
-
-import { DataStatus } from '@/scripts/enums/DataStatus';
-import { computed, ComputedRef, defineComponent } from '@vue/runtime-core';
-import Station from '@/scripts/interfaces/Station';
-import { StoreData } from '@/scripts/interfaces/StoreData';
-import { useStore } from '@/store/store';
+import { defineComponent, computed } from 'vue';
+import dateMixin from '../../mixins/dateMixin';
+import imageMixin from '../../mixins/imageMixin';
+import returnBtnMixin from '../../mixins/returnBtnMixin';
+import stationInfoMixin from '../../mixins/stationInfoMixin';
+import styleMixin from '../../mixins/styleMixin';
+import { DataStatus } from '../../scripts/enums/DataStatus';
+import Station from '../../scripts/interfaces/Station';
+import { useStationFiltersStore } from '../../store/stationFiltersStore';
+import { useStore } from '../../store/store';
 import Loading from '../Global/Loading.vue';

 export default defineComponent({
@@ -240,61 +243,58 @@ export default defineComponent({
      type: Array as () => Station[],
      required: true,
    },
-    sorterActive: {
-      type: Object as () => {
-        index: number;
-        dir: number;
-      },
-      required: true,
-    },
-    setFocusedStation: { type: Function, required: true },
-    changeSorter: { type: Function, required: true },
  },
-  mixins: [styleMixin, dateMixin, stationInfoMixin, returnBtnMixin],
+
+  components: { Loading },
+  mixins: [styleMixin, dateMixin, stationInfoMixin, returnBtnMixin, imageMixin],
+
  data: () => ({
-    likeIcon: require('@/assets/icon-like.svg'),
-    spawnIcon: require('@/assets/icon-spawn.svg'),
-    timetableIcon: require('@/assets/icon-timetable.svg'),
-    userIcon: require('@/assets/icon-user.svg'),
-    trainIcon: require('@/assets/icon-train.svg'),
-    SBLIcon: require('@/assets/icon-SBL.svg'),
-    SUPIcon: require('@/assets/icon-SUP.svg'),
-    lockIcon: require('@/assets/icon-lock.svg'),
-    unavailableIcon: require('@/assets/icon-unavailable.svg'),
-    unknownIcon: require('@/assets/icon-unknown.svg'),
-    abandonedIcon: require('@/assets/icon-abandoned.svg'),
-    ascIcon: require('@/assets/icon-arrow-asc.svg'),
-    descIcon: require('@/assets/icon-arrow-desc.svg'),
    headIds: ['station', 'min-lvl', 'status', 'dispatcher', 'dispatcher-lvl', 'routes', 'general'],
    headIconsIds: ['user', 'spawn', 'timetable'],
    lastSelectedStationName: '',
  }),
+
+  computed: {
+    sorterActive() {
+      return this.stationFiltersStore.sorterActive;
+    },
+  },
+
  setup() {
    const store = useStore();
+    const stationFiltersStore = useStationFiltersStore();
+
    const isDataLoaded = computed(() => {
      return store.dataStatuses.sceneries != DataStatus.Loading;
    });
    return {
      isDataLoaded,
+      stationFiltersStore,
    };
  },
+
  methods: {
    setScenery(name: string) {
      const station = this.stations.find((station) => station.name === name);
      if (!station) return;
+
      this.lastSelectedStationName = station.name;
      this.$router.push({
        name: 'SceneryView',
        query: { station: station.name.replaceAll(' ', '_') },
      });
    },
+
    openForumSite(e: Event, url: string | undefined) {
      if (!url) return;
      e.preventDefault();
      window.open(url, '_blank');
    },
+
+    changeSorter(i: number) {
+      this.stationFiltersStore.changeSorter(i);
+    },
  },
-  components: { Loading },
 });
 </script>

@@ -303,7 +303,7 @@ export default defineComponent({
@import '../../styles/variables.scss';
@import '../../styles/icons.scss';

-$rowCol: #4b4b4b;
+$rowCol: #424242;

 .change-anim {
  &-enter-active,
@@ -342,7 +342,7 @@ table {
  }

  thead tr {
-    background-color: $primaryCol;
+    background-color: $bgCol;
  }

  thead th {
@@ -352,7 +352,7 @@ table {
    min-width: 75px;

    padding: 0.5em;
-    background-color: $primaryCol;
+    background-color: $bgCol;
    white-space: pre-wrap;

    cursor: pointer;
@@ -1,290 +1,308 @@
-<template>
-  <div class="train-info simple" tabindex="0">
-    <section>
-      <span>
-        <div>
-          <span>
-            <!-- <router-link
-              v-if="train.timetableData"
-              :to="`/journal/timetables?timetableId=${train.timetableData.timetableId}`"
-              style="color: #ddd; margin-right: 0.3em"
-            >
-              #{{ train.timetableData.timetableId }}
-            </router-link> -->
-
-            <span class="timetable-id" v-if="train.timetableData">#{{ train.timetableData.timetableId }}</span>
-
-            <span class="timetable_warnings">
-              <span class="warning twr" v-if="train.timetableData?.TWR">TWR</span>
-              <span class="warning skr" v-if="train.timetableData?.SKR">SKR</span>
-            </span>
-            <strong v-if="train.timetableData">{{ train.timetableData.category }}&nbsp;</strong>
-            <strong>{{ train.trainNo }}</strong>
-            <span>&nbsp;| {{ train.driverName }}&nbsp;</span>
-          </span>
-
-          <img
-            class="image-offline"
-            style="height: 1em"
-            v-if="!train.currentStationHash"
-            :src="icons.offline"
-            alt="offline"
-            :title="$t('trains.offline')"
-          />
-        </div>
-
-        <div class="timetable_route" v-if="train.timetableData">
-          <strong>{{ train.timetableData.route.replace('|', ' - ') }}</strong>
-          <img
-            v-if="getSceneriesWithComments(train.timetableData).length > 0"
-            class="image-warning"
-            :src="icons.warning"
-            :title="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(train.timetableData)})`"
-          />
-        </div>
-
-        <hr style="margin: 0.25em 0" />
-
-        <div class="timetable_stops" v-if="train.timetableData">
-          <span v-if="train.timetableData.followingStops.length > 2">
-            {{ $t('trains.via-title') }}
-            <span v-html="displayStopList(train.timetableData.followingStops)"></span>
-          </span>
-        </div>
-
-        <div class="timetable_progress" style="margin-top: 0.5em" v-if="train.timetableData">
-          <!-- <span> </span> -->
-          <span class="timetable_progress-bar">
-            <!-- {{ confirmedPercentage(train.timetableData.followingStops) }}%&nbsp; -->
-            <span class="bar-bg"></span>
-            <span
-              class="bar-fg"
-              :style="{ width: `${Math.floor(confirmedPercentage(train.timetableData.followingStops))}%` }"
-            ></span>
-          </span>
-
-          <span>
-            &nbsp; {{ currentDistance(train.timetableData.followingStops) }} km /
-            <span class="text--primary"> {{ train.timetableData.routeDistance }} km </span>
-            |
-            <span v-html="currentDelay(train.timetableData.followingStops)"></span>
-          </span>
-        </div>
-
-        <div v-if="!train.online" style="color: salmon">Offline - {{ lastSeenMessage(train.lastSeen) }}</div>
-
-        <div class="driver_position text--grayed" style="margin-top: 0.25em">
-          <span v-if="train.currentStationHash">
-            {{ $t('trains.current-scenery') }} <span>{{ train['currentStationName'] }}&nbsp;</span>
-          </span>
-
-          <span v-else>
-            {{ $t('trains.current-scenery') }}
-            <span>{{ train['currentStationName'].replace(/.[a-zA-Z0-9]+.sc/, '') }} (offline)&nbsp;</span>
-          </span>
-
-          <span v-if="train.signal">
-            {{ $t('trains.current-signal') }} <span>{{ train['signal'] }}&nbsp;</span>
-          </span>
-
-          <span v-if="train.connectedTrack">
-            {{ $t('trains.current-track') }} <span>{{ train['connectedTrack'] }}&nbsp;</span>
-          </span>
-
-          <span v-if="train.distance">({{ displayDistance(train.distance) }})</span>
-        </div>
-      </span>
-    </section>
-
-    <section class="train-image" style="display: flex; justify-content: center; align-items: center">
-      <img :src="train.locoURL" loading="lazy" alt="Loco image not found" @error="onImageError" />
-
-      <div class="text--grayed">
-        {{ train.locoType }}
-        <span v-if="train.cars.length > 0">
-          &nbsp;&bull; {{ $t('trains.cars') }}:
-          <span class="count">{{ train.cars.length }}</span>
-        </span>
-      </div>
-
-      <div>
-        <div>
-          <span v-for="(stat, i) in STATS.main" :key="stat.name">
-            <span v-if="i > 0"> &bull; </span>
-            <span>{{ `${~~(train[stat.name] * (stat.multiplier || 1))}${stat.unit}` }} </span>
-          </span>
-        </div>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script lang="ts">
-import trainInfoMixin from '@/mixins/trainInfoMixin';
-import Train from '@/scripts/interfaces/Train';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  props: {
-    train: {
-      type: Object as () => Train,
-      required: true,
-    },
-  },
-
-  mixins: [trainInfoMixin],
-
-  data: () => ({
-    icons: {
-      warning: require('@/assets/icon-warning.svg'),
-      offline: require('@/assets/icon-offline.svg'),
-    },
-  }),
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-
-.image-warning,
-.image-offline {
-  height: 1em;
-
-  margin-left: 0.5em;
-}
-
-.train-image {
-  display: flex;
-  flex-direction: column;
-
-  img {
-    margin: 0.5em 0;
-    width: 12em;
-  }
-}
-
-.simple {
-  display: grid;
-  grid-template-columns: 2fr 1fr;
-  grid-template-rows: 1fr;
-
-  padding: 1em;
-  background-color: #202020;
-  gap: 0.5em;
-}
-
-.driver_position:first-letter {
-  text-transform: capitalize;
-}
-
-.timetable-id {
-  margin-right: 0.3em;
-  color: #d2d2d2;
-}
-
-.timetable_stops {
-  font-size: 0.75em;
-}
-
-.timetable_route {
-  display: flex;
-  align-items: center;
-
-  margin-top: 0.5em;
-}
-
-.timetable_warnings {
-  color: black;
-
-  .warning {
-    padding: 0.1em 0.3em;
-    margin-right: 0.3em;
-    border-radius: 1em;
-
-    font-weight: bold;
-
-    &.twr {
-      background: var(--clr-twr);
-    }
-
-    &.skr {
-      background: var(--clr-skr);
-    }
-  }
-}
-
-.timetable_progress {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.timetable_progress-bar {
-  position: relative;
-
-  width: 6em;
-  height: 1em;
-  margin: 0.5em 0;
-
-  .bar-fg,
-  .bar-bg {
-    position: absolute;
-    height: 1em;
-    width: 100%;
-
-    left: 0;
-  }
-
-  .bar-fg {
-    background-color: springgreen;
-  }
-
-  .bar-bg {
-    background-color: #5b5b5b;
-  }
-}
-
-.comments {
-  display: flex;
-  align-items: center;
-
-  font-size: 0.9em;
-
-  margin-top: 1em;
-
-  img {
-    margin-right: 0.5em;
-  }
-}
-
-@include smallScreen() {
-  .simple {
-    grid-template-columns: 1fr;
-    gap: 1em 0;
-    text-align: center;
-
-    font-size: 1.25em;
-  }
-
-  .info-stats {
-    text-align: center;
-  }
-
-  .timetable_route {
-    justify-content: center;
-  }
-
-  .timetable_progress {
-    justify-content: center;
-  }
-
-  .comments {
-    flex-direction: column;
-    justify-content: center;
-
-    img {
-      margin: 0 0 0.5em 0;
-    }
-  }
-}
-</style>
+<template>
+  <div class="train-info" tabindex="0">
+    <section class="train-route">
+      <div class="train_general">
+        <span>
+          <span class="timetable-id" v-if="train.timetableData">#{{ train.timetableData.timetableId }}</span>
+
+          <span class="timetable_warnings">
+            <span class="train-badge twr" v-if="train.timetableData?.TWR">TWR</span>
+            <span class="train-badge skr" v-if="train.timetableData?.SKR">SKR</span>
+          </span>
+          <strong class="timetable-category" v-if="train.timetableData">
+            {{ train.timetableData.category }}
+          </strong>
+          <strong class="train-number">&nbsp;{{ train.trainNo }}</strong>
+          |
+          <span class="train-driver" :class="{ supporter: train.isSupporter }">{{ train.driverName }}</span>
+          
+          <b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
+        </span>
+      </div>
+
+      <div class="timetable_route" v-if="train.timetableData">
+        <strong>{{ train.timetableData.route.replace('|', ' - ') }}</strong>
+        <img
+          v-if="getSceneriesWithComments(train.timetableData).length > 0"
+          class="image-warning"
+          :src="getIcon('warning')"
+          :title="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(train.timetableData)})`"
+        />
+      </div>
+
+      <hr style="margin: 0.25em 0" />
+
+      <div class="timetable_stops" v-if="train.timetableData">
+        <span v-if="train.timetableData.followingStops.length > 2">
+          {{ $t('trains.via-title') }}
+          <span v-html="displayStopList(train.timetableData.followingStops)"></span>
+        </span>
+      </div>
+
+      <div class="timetable_progress" style="margin-top: 0.5em" v-if="train.timetableData">
+        <!-- <span> </span> -->
+        <span class="timetable_progress-bar">
+          <!-- {{ confirmedPercentage(train.timetableData.followingStops) }}%&nbsp; -->
+          <span class="bar-bg"></span>
+          <span
+            class="bar-fg"
+            :style="{ width: `${Math.floor(confirmedPercentage(train.timetableData.followingStops))}%` }"
+          ></span>
+        </span>
+
+        <span class="timetable_progress-distance">
+          &nbsp; {{ currentDistance(train.timetableData.followingStops) }} km /
+          <span class="text--primary"> {{ train.timetableData.routeDistance }} km </span>
+          |
+          <span v-html="currentDelay(train.timetableData.followingStops)"></span>
+        </span>
+
+        <div class="train-status-badges">
+          <div v-if="!train.currentStationHash" class="train-badge offline">{{ $t('trains.scenery-offline') }}</div>
+          <div v-if="!train.online" class="train-badge offline">Offline {{ lastSeenMessage(train.lastSeen) }}</div>
+        </div>
+      </div>
+
+      <div class="driver_position text--grayed" style="margin-top: 0.25em">
+        {{ displayTrainPosition(train) }}
+      </div>
+    </section>
+
+    <section class="train-stats">
+      <div>
+        <img :src="train.locoURL" loading="lazy" alt="Loco image not found" @error="onImageError" />
+      </div>
+
+      <div class="text--grayed">
+        {{ train.locoType }}
+        <span v-if="train.cars.length > 0">
+          &nbsp;&bull; {{ $t('trains.cars') }}:
+          <span class="count">{{ train.cars.length }}</span>
+        </span>
+      </div>
+
+      <div>
+        <span v-for="(stat, i) in STATS.main" :key="stat.name">
+          <span v-if="i > 0"> &bull; </span>
+          <span>{{ `${~~((train as any)[stat.name] * (stat.multiplier || 1))}${stat.unit}` }} </span>
+        </span>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import imageMixin from '../../mixins/imageMixin';
+import trainInfoMixin from '../../mixins/trainInfoMixin';
+import Train from '../../scripts/interfaces/Train';
+
+export default defineComponent({
+  props: {
+    train: {
+      type: Object as () => Train,
+      required: true,
+    },
+
+    extended: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  mixins: [trainInfoMixin, imageMixin],
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/responsive.scss';
+
+.image-warning {
+  height: 1em;
+
+  margin-left: 0.5em;
+}
+
+.train-stats {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+
+  flex-direction: column;
+  text-align: center;
+
+  img {
+    margin: 0.5em 0;
+    width: 12em;
+  }
+}
+
+.train-info {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  grid-template-rows: 1fr;
+
+  padding: 1em;
+
+  background-color: #1a1a1a;
+  gap: 0.5em;
+}
+
+.timetable-id {
+  margin-right: 0.3em;
+  color: #d2d2d2;
+}
+
+.warning-timeout {
+  background-color: #be3728;
+
+  display: inline-block;
+  text-align: center;
+
+  width: 1.25em;
+  height: 1.25em;
+  border-radius: 50%;
+
+  margin-left: 0.25em;
+}
+
+.timetable_stops {
+  font-size: 0.75em;
+}
+
+.train_general {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.train-status-badges {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.train-badge {
+  padding: 0.15em 0.35em;
+  margin-right: 0.3em;
+
+  font-weight: bold;
+
+  font-size: 0.9em;
+
+  &.twr {
+    background-color: var(--clr-twr);
+  }
+
+  &.skr {
+    background-color: var(--clr-skr);
+  }
+
+  &.offline {
+    background-color: #b83b2d;
+  }
+}
+
+.train-driver {
+  &.supporter {
+    color: orange;
+    text-shadow: orange 0 0 5px;
+  }
+}
+
+.timetable_route {
+  display: flex;
+  align-items: center;
+
+  margin-top: 0.5em;
+}
+
+.timetable_warnings {
+  color: black;
+}
+
+.timetable_progress {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.timetable_progress-bar {
+  position: relative;
+
+  width: 6em;
+  height: 1em;
+  margin: 0.5em 0;
+
+  .bar-fg,
+  .bar-bg {
+    position: absolute;
+    height: 1em;
+    width: 100%;
+
+    left: 0;
+  }
+
+  .bar-fg {
+    background-color: springgreen;
+  }
+
+  .bar-bg {
+    background-color: #5b5b5b;
+  }
+}
+
+.timetable_progress-distance {
+  margin-right: 0.25em;
+}
+
+.comments {
+  display: flex;
+  align-items: center;
+
+  font-size: 0.9em;
+
+  margin-top: 1em;
+
+  img {
+    margin-right: 0.5em;
+  }
+}
+
+@include smallScreen() {
+  .train-info {
+    grid-template-columns: 1fr;
+    gap: 1em 0;
+    text-align: center;
+
+    font-size: 1.15em;
+  }
+
+  .train-stats {
+    font-size: 1.1em;
+  }
+
+  .train_general {
+    justify-content: center;
+  }
+
+  .train-status-badges {
+    justify-content: center;
+  }
+
+  .timetable_route {
+    justify-content: center;
+  }
+
+  .timetable_progress {
+    justify-content: center;
+  }
+
+  .comments {
+    flex-direction: column;
+    justify-content: center;
+
+    img {
+      margin: 0 0 0.5em 0;
+    }
+  }
+}
+</style>
@@ -1,269 +1,208 @@
 <template>
-  <div class="train-options">
-    <div class="options_wrapper">
-      <div class="options_content">
-        <div class="content_select">
-          <select-box
-            :itemList="translatedSorterOptions"
-            :defaultItemIndex="0"
-            @selected="changeSorter"
-            :prefix="$t('trains.sorter-prefix')"
-          />
-        </div>
+  <div class="filters-options" @keydown.esc="showOptions = false">
+    <div class="bg" v-if="showOptions" @click="showOptions = false"></div>

-        <div class="content_search">
-          <div class="search-box">
-            <input class="search-input" v-model="searchedTrain" :placeholder="$t('trains.search-train')" />
+    <button class="filter-button btn--filled btn--image" @click="toggleShowOptions" ref="button">
+      <img :src="getIcon('filter2')" alt="Open filters" />
+      {{ $t('options.filters') }} [F]
+      <span class="active-indicator" v-if="currentOptionsActive"></span>
+    </button>

-            <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedTrain = '')" />
+    <transition name="options-anim">
+      <div class="options_wrapper" v-if="showOptions">
+        <div class="options_content">
+          <h1 class="option-title">{{ $t('options.search-title') }}</h1>
+          <div class="search_content">
+            <div class="search-box">
+              <input
+                class="search-input"
+                ref="initFocusedElement"
+                @focus="preventKeyDown = true"
+                @blur="preventKeyDown = false"
+                :placeholder="$t(`options.search-train`)"
+                v-model="searchedTrain"
+              />
+              <button class="search-exit">
+                <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear('train')" />
+              </button>
+            </div>
+
+            <div class="search-box">
+              <input
+                class="search-input"
+                @focus="preventKeyDown = true"
+                @blur="preventKeyDown = false"
+                :placeholder="$t(`options.search-driver`)"
+                v-model="searchedDriver"
+              />
+              <button class="search-exit">
+                <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear('driver')" />
+              </button>
+            </div>
          </div>

-          <div class="search-box">
-            <input class="search-input" v-model="searchedDriver" :placeholder="$t('trains.search-driver')" />
+          <h1 class="option-title">{{ $t('options.sort-title') }}</h1>
+          <div class="options_sorters">
+            <div v-for="opt in translatedSorterOptions">
+              <button
+                class="sort-option btn--option"
+                :data-selected="opt.id == sorterActive.id"
+                @click="onSorterChange(opt)"
+              >
+                {{ opt.value.toUpperCase() }}
+              </button>
+            </div>
+          </div>

-            <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedDriver = '')" />
+          <h1 class="option-title" v-if="trainFilterList.length != 0">{{ $t('options.filter-title') }}</h1>
+          <div class="options_filters">
+            <div class="filter-option" v-for="filter in trainFilterList">
+              <button class="btn--option" :data-inactive="!filter.isActive" @click="onFilterChange(filter)">
+                {{ $t(`options.filter-${filter.id}`) }}
+              </button>
+            </div>
+
+            <div class="filter-actions">
+              <button class="btn--action" @click="clearAllFilters">{{ $t('options.filter-clear') }}</button>
+              <button class="btn--action" @click="resetAllFilters">{{ $t('options.filter-reset') }}</button>
+            </div>
          </div>
        </div>
      </div>
-    </div>
-
-    <div class="filters">
-      <span
-        :class="{ active: filter.isActive }"
-        class="filter"
-        v-for="filter in filterList"
-        :key="filter.id"
-        tabindex="0"
-        @contextmenu="
-          (e) => {
-            e.preventDefault();
-            return false;
-          }
-        "
-        @click.left="toggleFilter(filter)"
-        @keydown.enter="toggleFilter(filter)"
-        @click.right="setFilterOnly(filter)"
-        @keydown.space="setFilterOnly(filter)"
-      >
-        {{ $t(`trains.filter-${filter.id}`) }}
-      </span>
-
-      <span class="filter reset-btn" @click="resetFilters" tabindex="0">
-        {{ $t('trains.filter-reset') }}
-      </span>
-    </div>
+    </transition>
  </div>
 </template>

 <script lang="ts">
-import { computed, defineComponent, inject, TrainFilter } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { defineComponent, inject, PropType } from 'vue';
+import imageMixin from '../../mixins/imageMixin';
+import keyMixin from '../../mixins/keyMixin';
+import { TrainFilter } from '../../types/Trains/TrainOptionsTypes';
+import ActionButton from '../Global/ActionButton.vue';
 import SelectBox from '../Global/SelectBox.vue';

 export default defineComponent({
-  components: { SelectBox },
-  emits: ['changeSearchedTrain', 'changeSearchedDriver', 'changeSorter'],
+  components: { SelectBox, ActionButton },
+  mixins: [imageMixin, keyMixin],

-  data: () => ({
-    exitIcon: require('@/assets/icon-exit.svg'),
-  }),
+  props: {
+    sorterOptionIds: {
+      type: Array as PropType<Array<string>>,
+      required: true,
+    },

-  setup() {
-    const { t } = useI18n();
-
-    const sorterOptions = [
-      {
-        id: 'distance',
-        value: 'kilometraż',
-      },
-      {
-        id: 'progress',
-        value: 'przebyta trasa',
-      },
-      {
-        id: 'delay',
-        value: 'opóźnienie',
-      },
-      {
-        id: 'mass',
-        value: 'masa',
-      },
-      {
-        id: 'speed',
-        value: 'prędkość',
-      },
-      {
-        id: 'length',
-        value: 'długość',
-      },
-    ];
-
-    let filterList = inject('filterList') as TrainFilter[];
-
-    const translatedSorterOptions = computed(() =>
-      sorterOptions.map(({ id }) => ({
-        id,
-        value: t(`trains.option-${id}`),
-      }))
-    );
+    currentOptionsActive: {
+      type: Boolean,
+      default: false,
+    },
+  },

+  data() {
    return {
-      translatedSorterOptions,
-      searchedTrain: inject('searchedTrain') as string,
-      searchedDriver: inject('searchedDriver') as string,
-      sorterActive: inject('sorterActive') as { id: string | number; dir: number },
-      filterList,
+      showOptions: false,
+      lastSelectedFilter: null as TrainFilter | null,
    };
  },

+  setup() {
+    return {
+      searchedTrain: inject('searchedTrain') as string,
+      searchedDriver: inject('searchedDriver') as string,
+
+      sorterActive: inject('sorterActive') as { id: string | number; dir: number },
+      trainFilterList: inject('filterList') as TrainFilter[],
+    };
+  },
+
+  computed: {
+    translatedSorterOptions() {
+      return this.$props.sorterOptionIds.map((id) => ({
+        id,
+        value: this.$t(`options.sort-${id}`),
+      }));
+    },
+  },
+
  methods: {
-    changeSorter(item: { id: string | number; value: string }) {
+    // Override keyMixin function
+    onKeyDownFunction() {
+      this.toggleShowOptions();
+    },
+
+    toggleShowOptions() {
+      this.showOptions = !this.showOptions;
+
+      this.$nextTick(() => {
+        if (this.showOptions) (this.$refs['button'] as HTMLButtonElement)?.focus();
+      });
+    },
+
+    onSorterChange(item: { id: string | number; value: string }) {
      this.sorterActive.id = item.id;
      this.sorterActive.dir = -1;
    },

-    toggleFilter(filter: TrainFilter) {
+    onFilterChange(filter: TrainFilter) {
+      // if (this.lastSelectedFilter?.id === filter.id)
+      //   this.trainFilterList.forEach((tf) => (tf.isActive = filter.id === tf.id));
+
      filter.isActive = !filter.isActive;
+      this.lastSelectedFilter = filter;
    },

-    setFilterOnly(filter: TrainFilter) {
-      this.filterList.forEach((f) => (f.isActive = f.id == filter.id));
+    clearAllFilters() {
+      this.trainFilterList.forEach((filter) => {
+        filter.isActive = false;
+      });
    },

-    resetFilters() {
-      this.filterList.forEach((f) => (f.isActive = true));
-      this.searchedDriver = "";
-      this.searchedTrain = "";
+    resetAllFilters() {
+      this.trainFilterList.forEach((filter) => {
+        filter.isActive = true;
+      });
+    },
+
+    onInputClear(id: 'driver' | 'train') {
+      if (id == 'driver') this.searchedDriver = '';
+      if (id == 'train') this.searchedTrain = '';
    },
  },
 });
 </script>

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

-.train-options {
-  @include smallScreen() {
-    width: 100%;
-  }
+.search_content > div {
+  margin: 0.5em auto;
 }

-.options {
-  &_wrapper {
-    display: flex;
-  }
-
-  &_content {
-    display: flex;
-    flex-wrap: wrap;
-
-    .content_search,
-    .content_select {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-
-      padding: 0.25em 0.25em 0 0;
-    }
-  }
-}
-
-.search {
-  &-box {
-    position: relative;
-
-    background: #333;
-    border-radius: 0.5em;
-    min-width: 200px;
-    margin-right: 0.25em;
-  }
-
-  &-input {
-    border: none;
-
-    min-width: 100%;
-    padding: 0.35em 0.5em;
-  }
-
-  &-exit {
-    position: absolute;
-    cursor: pointer;
-
-    top: 50%;
-    right: 10px;
-    transform: translateY(-50%);
-
-    width: 1em;
-  }
-}
-.filters {
+.search_content > button {
  display: flex;
-  flex-wrap: wrap;
+  justify-content: center;
+  margin: 0 auto;
+}

-  margin-top: 0.5em;
+.filter-option {
+  button {
+    color: white;
+    font-weight: bold;

-  @include smallScreen() {
-    justify-content: center;
+    &[data-disabled='true'] {
+      color: #888;
+    }
  }
 }

-.filter {
-  background: #333;
-  padding: 0.2em 0.25em;
-  margin: 0.25em 0.25em 0 0;
-  font-weight: bold;
+.filter-actions {
+  display: flex;
+  gap: 0.5em;
+  width: 100%;

-  cursor: pointer;
-  color: gray;
+  margin-top: 1em;

-  &.active {
-    color: var(--clr-primary);
-  }
-
-  &.reset-btn {
-    color: salmon;
-  }
-}
-
-@include smallScreen() {
-  .journal-options {
+  button {
    width: 100%;
  }
-  .options {
-    &_wrapper {
-      justify-content: center;
-    }
-
-    &_content {
-      padding: 0 1em;
-
-      flex-direction: column;
-
-      .content_select {
-        margin: 0 auto;
-        padding: 0;
-      }
-
-      .content_search {
-        justify-content: center;
-      }
-    }
-  }
-
-  .search {
-    &-box,
-    &-button {
-      margin: 0.5em 0 0 0;
-    }
-
-    &-box {
-      width: 100%;
-    }
-
-    &-button {
-      width: 80%;
-      max-width: 300px;
-    }
-  }
 }
 </style>
@@ -1,159 +0,0 @@
-<template>
-  <section class="filter-card" v-click-outside="closeCard">
-    <div class="card_btn">
-      <action-button @click="toggleCard">
-        <img class="button_icon" :src="filterIcon" alt="icon-filter" />
-        <p>{{ $t('options.filters') }}</p>
-      </action-button>
-    </div>
-
-    <transition name="card-anim">
-      <div class="card_content card" v-if="isVisible">
-        <div class="card_exit" @click="closeCard"></div>
-
-        <div class="options_wrapper">
-          <div class="options_content">
-            <div class="content_select">
-              <select-box
-                :itemList="translatedSorterOptions"
-                :defaultItemIndex="0"
-                @selected="changeSorter"
-                :prefix="$t('trains.sorter-prefix')"
-              />
-            </div>
-
-            <div class="content_search">
-              <div class="search-box">
-                <input class="search-input" v-model="searchedTrain" :placeholder="$t('trains.search-train')" />
-
-                <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedTrain = '')" />
-              </div>
-
-              <div class="search-box">
-                <input class="search-input" v-model="searchedDriver" :placeholder="$t('trains.search-driver')" />
-
-                <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedDriver = '')" />
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <section class="card_actions flex">
-          <action-button class="outlined">
-            {{ $t('filters.reset') }}
-          </action-button>
-          <action-button class="outlined" @click="closeCard">{{ $t('filters.close') }}</action-button>
-        </section>
-      </div>
-    </transition>
-  </section>
-</template>
-
-<script lang="ts">
-import { defineComponent, inject } from '@vue/runtime-core';
-
-import inputData from '@/data/options.json';
-
-import ActionButton from '@/components/Global/ActionButton.vue';
-import { sorterOptions } from '@/data/trainOptions';
-import { TrainFilter, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import SelectBox from '../Global/SelectBox.vue';
-
-export default defineComponent({
-  components: { ActionButton, SelectBox },
-  emits: ['changeFilterValue', 'invertFilters', 'resetFilters'],
-
-  data: () => ({
-    filterIcon: require('@/assets/icon-filter2.svg'),
-    exitIcon: require('@/assets/icon-exit.svg'),
-
-    inputs: { ...inputData },
-  }),
-
-  setup() {
-    const isVisible = inject('isTrainOptionsCardVisible');
-
-    const { t } = useI18n();
-
-    let filterList = inject('filterList') as TrainFilter[];
-
-    const translatedSorterOptions = computed(() =>
-      sorterOptions.map(({ id }) => ({
-        id,
-        value: t(`trains.option-${id}`),
-      }))
-    );
-
-    return {
-      translatedSorterOptions,
-      searchedTrain: inject('searchedTrain') as string,
-      searchedDriver: inject('searchedDriver') as string,
-      sorterActive: inject('sorterActive') as { id: string | number; dir: number },
-      filterList,
-      isVisible,
-    };
-  },
-
-  methods: {
-    closeCard() {
-      this.isVisible = false;
-    },
-
-    toggleCard() {
-      this.isVisible = !this.isVisible;
-    },
-
-    changeSorter(item: { id: string | number; value: string }) {
-      this.sorterActive.id = item.id;
-      this.sorterActive.dir = -1;
-    },
-
-    toggleFilter(filter: TrainFilter) {
-      filter.isActive = !filter.isActive;
-    },
-
-    setFilterOnly(filter: TrainFilter) {
-      this.filterList.forEach((f) => (f.isActive = f.id == filter.id));
-    },
-
-    resetFilters() {
-      this.filterList.forEach((f) => (f.isActive = true));
-    },
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/responsive';
-@import '../../styles/card';
-
-.card-anim {
-  &-enter-active,
-  &-leave-active {
-    transition: all $animDuration $animType;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    transform: translate(-50%, -50%) scale(0.85);
-    opacity: 0;
-  }
-}
-
-.card {
-  section {
-    margin: 0.5em 0;
-  }
-
-  &_title {
-    font-size: 2em;
-    font-weight: 700;
-    color: $accentCol;
-
-    margin: 0.5em 0;
-
-    text-align: center;
-  }
-}
-</style>
@@ -60,11 +60,13 @@
              <b>{{ stop.stopNameRAW }} </b>: <span v-html="stop.comments"></span>
            </div>

-            <span v-if="stop.departureLine == train.timetableData!.followingStops[i + 1].arrivalLine">
+            <span
+              v-if="stop.departureLine == train.timetableData!.followingStops[i + 1].arrivalLine && !/sbl/gi.test(stop.departureLine!)"
+            >
              {{ stop.departureLine }}
            </span>

-            <span v-else>
+            <span v-else-if="!/sbl/gi.test(stop.departureLine!)">
              {{ stop.departureLine }} /
              {{ train.timetableData!.followingStops[i + 1].arrivalLine }}
            </span>
@@ -83,10 +85,11 @@

 <script lang="ts">
 import { computed, defineComponent, PropType } from '@vue/runtime-core';
-import dateMixin from '@/mixins/dateMixin';
-import TrainStop from '@/scripts/interfaces/TrainStop';
+import dateMixin from '../../mixins/dateMixin';
+import imageMixin from '../../mixins/imageMixin';
+import Train from '../../scripts/interfaces/Train';
+import TrainStop from '../../scripts/interfaces/TrainStop';
 import StopDate from '../Global/StopDate.vue';
-import Train from '@/scripts/interfaces/Train';

 export default defineComponent({
  components: { StopDate },
@@ -97,16 +100,10 @@ export default defineComponent({
    },
  },

-  mixins: [dateMixin],
+  mixins: [dateMixin, imageMixin],

  emits: ['click'],

-  data: () => ({
-    icons: {
-      warning: require('@/assets/icon-warning.svg'),
-    },
-  }),
-
  setup(props) {
    return {
      lastConfirmed: computed(() => {
@@ -154,7 +151,7 @@ export default defineComponent({

    onImageError(e: Event) {
      const imageEl = e.target as HTMLImageElement;
-      imageEl.src = require('@/assets/unknown.png');
+      imageEl.src = this.getImage('unknown.png');
    },
  },
 });
@@ -179,12 +176,7 @@ $stopNameClr: #22a8d1;
 }

 .train-schedule {
-  background-color: #202020;
  padding: 0 0.25em;
-
-  @include smallScreen() {
-    font-size: 1.1em;
-  }
 }

 .train-stock {
@@ -192,10 +184,11 @@ $stopNameClr: #22a8d1;
  display: flex;
  justify-content: center;
 }
+
 ul.stock-list {
  display: flex;
  align-items: flex-end;
-  overflow-x: auto;
+  overflow: auto;
  padding-bottom: 1em;

  li > div {
@@ -203,11 +196,15 @@ ul.stock-list {
    color: #aaa;
    font-size: 0.9em;
  }
+
+  img {
+    max-height: 60px;
+    max-width: 320px;
+  }
 }

 .schedule-wrapper {
  overflow-y: auto;
-  max-height: 500px;
  width: 100%;
  z-index: 5;

@@ -278,13 +275,14 @@ ul.stop_list > li.stop {
  padding: 0 0.5em;

  &.sbl {
-    .stop-name,
    .stop-date {
-      opacity: 0.7;
+      display: none;
    }

    .stop-name {
-      background-color: #333;
+      background: none;
+      color: #aaa;
+      padding: 0;
    }
  }

@@ -381,8 +379,6 @@ ul.stop_list > li.stop {
    text-align: center;

    flex-wrap: wrap;
-
-    padding: 0.15em 0;
  }

  .stop-bar {
@@ -1,29 +1,27 @@
 <template>
  <div class="train-stats" v-click-outside="closeStats">
    <action-button class="stats_button" @click="toggleStatsOpen">
-      <img :src="statsIcon" :alt="$t('trains.stats')" />
-      <p>{{ $t("trains.stats") }}</p>
+      <img :src="getIcon('stats')" :alt="$t('trains.stats')" />
+      <p>{{ $t('trains.stats') }}</p>
    </action-button>

    <transition name="stats-anim" class="stats_wrapper" tag="div">
      <div class="stats-body" v-if="trainStatsOpen">
        <h2 class="stats-header">
-          <img :src="statsIcon" :alt="$t('trains.stats')" />
-          {{ $t("trains.stats") }}
+          <img :src="getIcon('stats')" :alt="$t('trains.stats')" />
+          {{ $t('trains.stats') }}
        </h2>

        <div class="stats-speed">
          <div class="title stats-title">
-            {{ $t("trains.stats-speed") }}
-          </div>
-          <div class="stats-content">
-            {{ speedStats.min }} | {{ speedStats.avg }} | {{ speedStats.max }}
+            {{ $t('trains.stats-speed') }}
          </div>
+          <div class="stats-content">{{ speedStats.min }} | {{ speedStats.avg }} | {{ speedStats.max }}</div>
        </div>

        <div class="stats-length">
          <div class="title stats-title">
-            {{ $t("trains.stats-length") }}
+            {{ $t('trains.stats-length') }}
          </div>
          <div class="stats-content">
            {{ timetableStats.min }} | {{ timetableStats.avg }} |
@@ -33,15 +31,11 @@

        <div class="stats-categories">
          <div class="title stats-title">
-            {{ $t("trains.stats-categories") }}
+            {{ $t('trains.stats-categories') }}
          </div>

          <div class="category-list">
-            <span
-              class="category"
-              v-for="[key, value] of categoryList"
-              :key="key"
-            >
+            <span class="category" v-for="[key, value] of categoryList" :key="key">
              <span class="category-type">{{ key }}</span>
              <span class="category-count">{{ value }}</span>
            </span>
@@ -49,28 +43,22 @@

          <div class="special-list">
            <span class="special twr">
-              <span class="special-type">{{
-                $t("trains.stats-special-twr")
-              }}</span>
+              <span class="special-type">{{ $t('trains.stats-special-twr') }}</span>
              <span class="special-count">{{ specialTrainCount[0] }}</span>
            </span>

            <span class="special skr">
-              <span class="special-type">{{
-                $t("trains.stats-special-skr")
-              }}</span>
+              <span class="special-type">{{ $t('trains.stats-special-skr') }}</span>
              <span class="special-count">{{ specialTrainCount[1] }}</span>
            </span>
          </div>
        </div>

        <div class="stats-locos">
-          <div class="title stats-title">{{ $t("trains.stats-locos") }}</div>
+          <div class="title stats-title">{{ $t('trains.stats-locos') }}</div>

          <div class="loco-list stats-content">
-            <div class="loco-item" v-for="(loco, i) in locoList" :key="i">
-              {{ loco[0] }} | {{ loco[1] }}
-            </div>
+            <div class="loco-item" v-for="(loco, i) in locoList" :key="i">{{ loco[0] }} | {{ loco[1] }}</div>
          </div>
        </div>
      </div>
@@ -79,13 +67,15 @@
 </template>

 <script lang="ts">
-import ActionButton from "@/components/Global/ActionButton.vue";
-
-import Train from "@/scripts/interfaces/Train";
-import { computed, defineComponent, inject } from "@vue/runtime-core";
+import { defineComponent, computed, inject } from 'vue';
+import imageMixin from '../../mixins/imageMixin';
+import Train from '../../scripts/interfaces/Train';
+import ActionButton from '../Global/ActionButton.vue';

 export default defineComponent({
  components: { ActionButton },
+  mixins: [imageMixin],
+
  props: {
    trains: {
      type: Array as () => Train[],
@@ -95,7 +85,6 @@ export default defineComponent({

  data: () => ({
    trainStatsOpen: false,
-    statsIcon: require("@/assets/icon-stats.svg"),
  }),

  methods: {
@@ -110,14 +99,11 @@ export default defineComponent({

  setup(props) {
    const speedStats = computed(() => {
-      if (props.trains.length == 0) return { avg: "0", min: "0", max: "0" };
+      if (props.trains.length == 0) return { avg: '0', min: '0', max: '0' };

      const trainList = props.trains.filter((train) => train.timetableData);

-      const avg = (
-        trainList.reduce((acc, train) => acc + train.speed, 0) /
-        trainList.length
-      ).toFixed(2);
+      const avg = (trainList.reduce((acc, train) => acc + train.speed, 0) / trainList.length).toFixed(2);

      const minMaxSpeed = trainList.reduce((acc, train) => {
        if (!train.timetableData) return acc;
@@ -136,32 +122,21 @@ export default defineComponent({
    });

    const timetableStats = computed(() => {
-      if (props.trains.length == 0) return { avg: "0", min: "0", max: "0" };
+      if (props.trains.length == 0) return { avg: '0', min: '0', max: '0' };

-      const activeTrainsLength = props.trains.filter(
-        (train) => train.timetableData
-      ).length;
+      const activeTrainsLength = props.trains.filter((train) => train.timetableData).length;

      const avg = (
-        props.trains.reduce(
-          (acc, train) =>
-            train.timetableData ? acc + train.timetableData.routeDistance : acc,
-          0
-        ) / activeTrainsLength
+        props.trains.reduce((acc, train) => (train.timetableData ? acc + train.timetableData.routeDistance : acc), 0) /
+        activeTrainsLength
      ).toFixed(2);

      const minMaxDistance = props.trains.reduce((acc, train) => {
        if (!train.timetableData) return acc;

-        acc[0] =
-          !acc[0] || train.timetableData.routeDistance < acc[0]
-            ? train.timetableData.routeDistance
-            : acc[0];
+        acc[0] = !acc[0] || train.timetableData.routeDistance < acc[0] ? train.timetableData.routeDistance : acc[0];

-        acc[1] =
-          !acc[1] || train.timetableData.routeDistance > acc[1]
-            ? train.timetableData.routeDistance
-            : acc[1];
+        acc[1] = !acc[1] || train.timetableData.routeDistance > acc[1] ? train.timetableData.routeDistance : acc[1];
        return acc;
      }, [] as any);

@@ -178,9 +153,7 @@ export default defineComponent({

        acc.set(
          train.timetableData.category,
-          acc.get(train.timetableData.category)
-            ? acc.get(train.timetableData.category) + 1
-            : 1
+          acc.get(train.timetableData.category) ? acc.get(train.timetableData.category) + 1 : 1
        );

        return acc;
@@ -193,35 +166,26 @@ export default defineComponent({
      const map: Map<string, number> = props.trains.reduce((acc, train) => {
        if (!train.timetableData || !train.locoType) return acc;

-        acc.set(
-          train.locoType,
-          acc.get(train.locoType) ? acc.get(train.locoType) + 1 : 1
-        );
+        acc.set(train.locoType, acc.get(train.locoType) ? acc.get(train.locoType) + 1 : 1);

        return acc;
      }, new Map());

-      const sorted = [...map.entries()]
-        .sort((a, b) => b[1] - a[1])
-        .filter((v, i) => i < 3);
+      const sorted = [...map.entries()].sort((a, b) => b[1] - a[1]).filter((v, i) => i < 3);

      return sorted;
    });

    const specialTrainCount = computed(() => {
-      const twrList = props.trains.filter(
-        (train) => train.timetableData && train.timetableData.TWR
-      );
+      const twrList = props.trains.filter((train) => train.timetableData && train.timetableData.TWR);

-      const skrList = props.trains.filter(
-        (train) => train.timetableData && train.timetableData.SKR
-      );
+      const skrList = props.trains.filter((train) => train.timetableData && train.timetableData.SKR);

      return [twrList.length, skrList.length];
    });

    /* Inject list from TrainsView for category filter */
-    const chosenTrainCategories = inject("chosenTrainCategories") as string[];
+    const chosenTrainCategories = inject('chosenTrainCategories') as string[];

    return {
      speedStats,
@@ -229,14 +193,14 @@ export default defineComponent({
      categoryList,
      locoList,
      specialTrainCount,
-      chosenTrainCategories
+      chosenTrainCategories,
    };
  },
 });
 </script>

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

 .stats-anim {
  &-enter-active,
@@ -370,4 +334,4 @@ export default defineComponent({
    justify-content: center;
  }
 }
-</style>
+</style>
@@ -1,28 +1,31 @@
 <template>
-  <div class="train-table" @keydown.esc="closeTimetable">
-    <button class="return-btn" @click="scrollToTop" v-if="showReturnButton">
-      <img :src="icons.arrowAsc" alt="return arrow" />
-    </button>
-
+  <div class="train-table">
    <transition name="anim" mode="out-in">
      <div :key="store.dataStatuses.trains">
-        <Loading v-if="trains.length == 0 && store.dataStatuses.trains == 0" />
+        <div class="table-info" v-if="store.isOffline">
+          {{ $t('app.offline') }}
+        </div>

-        <div class="table-info no-trains" v-if="trains.length == 0 && store.dataStatuses.trains != 0">
+        <Loading v-else-if="trains.length == 0 && store.dataStatuses.trains == 0" />
+
+        <div class="table-info no-trains" v-else-if="trains.length == 0 && store.dataStatuses.trains != 0">
          {{ $t('trains.no-trains') }}
        </div>

-        <ul class="train-list">
+        <!-- <div class="timeouts-warning" v-if="trainNumbersWithTimeouts.length == 0">
+          <b class="warning-timeout">?</b>
+          {{ $t('trains.timeout') }}
+        </div> -->
+        
+        <ul class="train-list" v-else>
          <li
            class="train-row"
            v-for="train in currentTrains"
-            :key="train.trainNo + train.driverId"
-            @click="toggleTimetable(train)"
-            @keydown.enter="toggleTimetable(train)"
+            :key="train.trainId"
+            @click.stop="selectModalTrain(train.trainId)"
+            @keydown.enter="selectModalTrain(train.trainId)"
          >
            <TrainInfo :train="train" />
-
-            <TrainSchedule v-if="chosenTrainId == getTrainId(train)" :train="train" ref="card-inner" tabindex="0" />
          </li>
        </ul>
      </div>
@@ -31,53 +34,30 @@
 </template>

 <script lang="ts">
-import { computed, defineComponent, inject, Ref } from '@vue/runtime-core';
-
-import defaultVehicleIconsJSON from '@/data/defaultVehicleIcons.json';
-
-import Train from '@/scripts/interfaces/Train';
-
-import TrainSchedule from '@/components/TrainsView/TrainSchedule.vue';
-import TrainInfo from '@/components/TrainsView/TrainInfo.vue';
-
-import returnBtnMixin from '@/mixins/returnBtnMixin';
-import { useStore } from '@/store/store';
+import { computed, defineComponent, inject, PropType, Ref } from 'vue';
+import modalTrainMixin from '../../mixins/modalTrainMixin';
+import returnBtnMixin from '../../mixins/returnBtnMixin';
+import Train from '../../scripts/interfaces/Train';
+import { useStore } from '../../store/store';
 import Loading from '../Global/Loading.vue';
+import TrainInfo from './TrainInfo.vue';

 export default defineComponent({
-  components: {
-    TrainSchedule,
-    TrainInfo,
-    Loading,
-  },
-
-  mixins: [returnBtnMixin],
+  components: { Loading, TrainInfo },

  props: {
    trains: {
-      type: Array as () => Train[],
+      type: Array as PropType<Train[]>,
      required: true,
    },
  },

-  data: () => ({
-    defaultLocoImage: require('@/assets/unknown.png'),
-
-    icons: {
-      arrowAsc: require('@/assets/icon-arrow-asc.svg'),
-      arrowDesc: require('@/assets/icon-arrow-desc.svg'),
-    },
-
-    defaultVehicleIcons: defaultVehicleIconsJSON,
-    chosenTrainId: null as string | null,
-  }),
+  mixins: [returnBtnMixin, modalTrainMixin],

  setup(props) {
    const store = useStore();
-
    const searchedTrain = inject('searchedTrain') as Ref<string>;
    const searchedDriver = inject('searchedDriver') as Ref<string>;
-
    const currentTrains = computed(() => {
      return props.trains;
    });
@@ -87,75 +67,32 @@ export default defineComponent({
      searchedDriver,
      currentTrains,
      store,
-
-      sorterActive: inject('sorterActive') as { id: string | number; dir: number },
+      sorterActive: inject('sorterActive') as {
+        id: string | number;
+        dir: number;
+      },
      distanceLimitExceeded: computed(
        () => props.trains.findIndex(({ timetableData }) => timetableData && timetableData.routeDistance > 200) != -1
      ),
    };
  },

+  computed: {
+    trainNumbersWithTimeouts() {
+      return this.store.trainList.filter((train) => train.isTimeout).map((train) => train.trainNo);
+    },
+  },
+
  activated() {
    const query = this.$route.query;
-
    if (query.trainNo && query.driverName) {
      this.searchedDriver = query.driverName.toString();
      this.searchedTrain = query.trainNo.toString();
-
      setTimeout(() => {
-        this.chosenTrainId = query.driverName + <string>query.trainNo;
+        this.selectModalTrain(query.driverName! + query.trainNo!.toString());
      }, 20);
    }
  },
-
-  deactivated() {
-    this.chosenTrainId = null;
-  },
-
-  methods: {
-    enter(el: HTMLElement) {
-      const maxHeight = getComputedStyle(el).height;
-
-      el.style.height = '0px';
-
-      getComputedStyle(el);
-
-      setTimeout(() => {
-        el.style.height = maxHeight;
-      }, 10);
-    },
-
-    afterEnter(el: HTMLElement) {
-      el.style.height = 'auto';
-    },
-
-    leave(el: HTMLElement) {
-      el.style.height = getComputedStyle(el).height;
-
-      setTimeout(() => {
-        el.style.height = '0px';
-      }, 10);
-    },
-
-    toggleTimetable(train: Train, state?: boolean) {
-      const id = this.getTrainId(train);
-
-      if (state !== undefined) {
-        this.chosenTrainId = state ? id : null;
-        return;
-      }
-
-      this.chosenTrainId = this.chosenTrainId && this.chosenTrainId == id ? null : id;
-    },
-
-    closeTimetable() {
-      this.chosenTrainId = null;
-    },
-
-    getTrainId(train: Train) {
-      return train.driverName + train.trainNo.toString();
-    },
-  },
 });
 </script>

@@ -181,11 +118,10 @@ export default defineComponent({
  text-align: center;

  padding: 1em 0;
-  margin: 1em 0;

  font-size: 1.5em;

-  background: #333;
+  background: #1a1a1a;
 }

 img.train-image {
@@ -198,12 +134,32 @@ img.train-image {
  background: var(--clr-warning);
 }

+.timeouts-warning {
+  background-color: #333;
+
+  font-weight: bold;
+  font-size: 1.05em;
+
+  margin-bottom: 0.5em;
+  padding: 0.5em;
+}
+
+.warning-timeout {
+  background-color: #be3728;
+  color: white;
+
+  display: inline-block;
+  text-align: center;
+
+  width: 1.25em;
+  height: 1.25em;
+  border-radius: 50%;
+}
+
 .train {
  &-list {
    overflow: auto;

-    margin-top: 1em;
-
    @include smallScreen() {
      width: 100%;
    }
@@ -0,0 +1,28 @@
+import { JournalFilterType } from "../../scripts/enums/JournalFilterType";
+import { JournalTimetableFilter } from "../../types/Journal/JournalTimetablesTypes";
+
+export const journalTimetableFilters: JournalTimetableFilter[] = [
+  {
+    id: JournalFilterType.all,
+    filterSection: 'timetable-status',
+    isActive: true,
+  },
+
+  {
+    id: JournalFilterType.active,
+    filterSection: 'timetable-status',
+    isActive: false,
+  },
+
+  {
+    id: JournalFilterType.fulfilled,
+    filterSection: 'timetable-status',
+    isActive: false,
+  },
+
+  {
+    id: JournalFilterType.abandoned,
+    filterSection: 'timetable-status',
+    isActive: false,
+  },
+];
@@ -1,60 +1,60 @@
-import { TrainFilterType } from "@/scripts/enums/TrainFilterType";
-import { TrainFilter } from "vue";
-
-export const trainFilters: TrainFilter[] = [
-  {
-    id: TrainFilterType.twr,
-    isActive: true,
-  },
-  {
-    id: TrainFilterType.skr,
-    isActive: true,
-  },
-  {
-    id: TrainFilterType.passenger,
-    isActive: true,
-  },
-  {
-    id: TrainFilterType.freight,
-    isActive: true,
-  },
-  {
-    id: TrainFilterType.other,
-    isActive: true,
-  },
-  {
-    id: TrainFilterType.comments,
-    isActive: true,
-  },
-  {
-    id: TrainFilterType.noTimetable,
-    isActive: true,
-  },
-];
-
-export const sorterOptions = [
-  {
-    id: 'distance',
-    value: 'kilometraż',
-  },
-  {
-    id: 'progress',
-    value: 'przebyta trasa',
-  },
-  {
-    id: 'delay',
-    value: 'opóźnienie',
-  },
-  {
-    id: 'mass',
-    value: 'masa',
-  },
-  {
-    id: 'speed',
-    value: 'prędkość',
-  },
-  {
-    id: 'length',
-    value: 'długość',
-  }
-];
+import { TrainFilterType } from '../../scripts/enums/TrainFilterType';
+import { TrainFilter } from '../../types/Trains/TrainOptionsTypes';
+
+export const trainFilters: TrainFilter[] = [
+  {
+    id: TrainFilterType.twr,
+    isActive: true,
+  },
+  {
+    id: TrainFilterType.skr,
+    isActive: true,
+  },
+  {
+    id: TrainFilterType.passenger,
+    isActive: true,
+  },
+  {
+    id: TrainFilterType.freight,
+    isActive: true,
+  },
+  {
+    id: TrainFilterType.other,
+    isActive: true,
+  },
+  {
+    id: TrainFilterType.comments,
+    isActive: true,
+  },
+  {
+    id: TrainFilterType.noTimetable,
+    isActive: true,
+  },
+];
+
+export const sorterOptions = [
+  {
+    id: 'distance',
+    value: 'kilometraż',
+  },
+  {
+    id: 'progress',
+    value: 'przebyta trasa',
+  },
+  {
+    id: 'delay',
+    value: 'opóźnienie',
+  },
+  {
+    id: 'mass',
+    value: 'masa',
+  },
+  {
+    id: 'speed',
+    value: 'prędkość',
+  },
+  {
+    id: 'length',
+    value: 'długość',
+  },
+];
@@ -1,30 +0,0 @@
-import { JournalFilterType } from "@/scripts/enums/JournalFilterType";
-import { JournalFilter } from "vue";
-
-export const journalTimetableFilters: JournalFilter[] = [
-    {
-        id: JournalFilterType.all,
-        filterSection: "timetable-status",
-        isActive: true
-    },
-
-    {
-        id: JournalFilterType.active,
-        filterSection: "timetable-status",
-        isActive: false
-    },
-
-    {
-        id: JournalFilterType.fulfilled,
-        filterSection: "timetable-status",
-        isActive: false
-    },
-
-    {
-        id: JournalFilterType.abandoned,
-        filterSection: "timetable-status",
-        isActive: false
-    },
-]
-
-export const journalDispatcherFilters: JournalFilter[] = []
@@ -198,15 +198,6 @@
      "section": "status",
      "value": true,
      "defaultValue": true
-    },
-    {
-      "id": "troll",
-      "name": "troll",
-      "iconName": "",
-
-      "section": "troll",
-      "value": true,
-      "defaultValue": true
    }
  ],
  "sliders": [
@@ -1,4 +1,7 @@
 {
+  "general": {
+    "and": " and "
+  },
  "app": {
    "sceneries": "SCENERIES",
    "trains": "TRAINS",
@@ -8,9 +11,18 @@
    "error": "An error occured while loading data!",
    "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!"
+    "migration-confirm": "Roger that!",
+    "offline": "App is in the offline mode!"
+  },
+  "update": {
+    "title": "New version of the app is available!",
+    "paragraph1": "Enjoy the application and may the green signal be with you!",
+    "release-link": "Click here to browse version changelog (GitHub)",
+    "confirm-button": "UPDATE NOW",
+    "later-button": "LATER"
  },
  "data-status": {
+    "S1-offline": "<b>S1 signal</b> <br> The app is working in offline mode!",
    "S1a-connection": "<b>S1a signal</b> <br> Cannot connect with Stacjownik API service!",
    "S1a-sceneries": "<b>S1a signal</b> <br> Cannot load online stations data!",
    "S2": "<b>S2 signal</b> <br> All data loaded successfully!",
@@ -66,7 +78,52 @@
  },
  "options": {
    "filters": "FILTERS",
-    "donate": "DONATE"
+    "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-dispatcher": "Dispatcher name",
+    "search-station": "Scenery name",
+    "search-author": "Timetable author name",
+    "search-date": "Timetable date (CEST / GMT+2)",
+
+    "sort-mass": "mass",
+    "sort-speed": "speed",
+    "sort-length": "length",
+    "sort-distance": "distance",
+    "sort-timetable": "train no.",
+    "sort-progress": "route progress",
+    "sort-delay": "current delay",
+
+    "sort-total-stops": "total stops",
+    "sort-beginDate": "date",
+    "sort-timetableId": "timetable ID",
+    "sort-timestampFrom": "date",
+    "sort-duration": "duration",
+
+    "filter-comments": "COMMENTS",
+    "filter-twr": "TWR",
+    "filter-skr": "SKR",
+    "filter-passenger": "PASSENGER",
+    "filter-freight": "FREIGHT",
+    "filter-other": "OTHER",
+    "filter-noTimetable": "NO TIMETABLE",
+
+    "filter-reset": "RESET FILTERS",
+    "filter-clear": "CLEAR FILTERS",
+
+    "filter-all": "ALL ENTRIES",
+    "filter-abandoned": "ABANDONED",
+    "filter-fulfilled": "FULFILLED",
+    "filter-active": "ACTIVE"
  },
  "filters": {
    "endingStatus": "ENDS SOON",
@@ -110,7 +167,7 @@
    "hour": "h",
    "no-limit": "NO LIMIT",
    "include-selected": "INCLUDE SELECTED",
-    "save": "↵ SAVE FILTERS",
+    "save": "SAVE FILTERS",
    "reset": "RESET FILTERS",
    "close": "CLOSE FILTERS"
  },
@@ -125,7 +182,8 @@
    "users": "Drivers online",
    "spawns": "Spawns online",
    "timetables": "Active timetables",
-    "no-stations": "No stations to show here!"
+    "no-stations": "No stations to show here!",
+    "scenery-search": "Search for scenery..."
  },
  "trains": {
    "no-trains": "No trains to show here!",
@@ -144,28 +202,6 @@
    "current-signal": "at signal",
    "current-track": "on track",

-    "option-mass": "mass",
-    "option-speed": "speed",
-    "option-length": "length",
-    "option-distance": "distance",
-    "option-timetable": "train no.",
-    "option-progress": "route progress",
-    "option-delay": "current delay",
-    "option-comments": "comments",
-
-    "filter-comments": "comments",
-    "filter-twr": "TWR",
-    "filter-skr": "SKR",
-    "filter-passenger": "passenger",
-    "filter-freight": "freight",
-    "filter-other": "other",
-    "filter-noTimetable": "no timetable",
-    "filter-reset": "X RESET",
-
-    "sorter-prefix": "Sort: ",
-    "search-train": "Train no.",
-    "search-driver": "Driver name",
-
    "delayed": "Delayed: ",
    "preponed": "Ahead of schedule: ",
    "on-time": "On time",
@@ -185,9 +221,12 @@
    "comment": "Exploitation comments for: ",
    "table-limit": "For performance reasons there's a limit of 10 trains shown at the same time.",

-    "last-seen-now": "last seen: just now",
-    "last-seen-min": "last seen: one minute ago",
-    "last-seen-ago": "last seen: {minutes} mins ago"
+    "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!"
  },
  "journal": {
    "title": "DISPATCHER HISTORY",
@@ -197,26 +236,6 @@
    "section-timetables": "TIMETABLES",
    "section-dispatchers": "DISPATCHERS",

-    "search": "Search",
-    "search-train": "Train no.",
-    "search-driver": "Driver name",
-    "search-dispatcher": "Dispatcher name",
-    "search-station": "Scenery name",
-
-    "sort-prefix": "Sort: ",
-
-    "option-distance": "distance",
-    "option-total-stops": "total stops",
-    "option-beginDate": "date",
-    "option-timetableId": "timetable ID",
-    "option-timestampFrom": "date",
-    "option-duration": "duration",
-
-    "filter-all": "ALL ENTRIES",
-    "filter-abandoned": "ABANDONED",
-    "filter-fulfilled": "FULFILLED",
-    "filter-active": "ACTIVE",
-
    "no-further-data": "No further data for current parameters",
    "loading-further-data": "Loading...",

@@ -231,13 +250,48 @@
    "online-since": "ONLINE SINCE",
    "duty-lasted": "The duty lasted",
    "minutes": "{minutes} mins",
-    "hours": "{hours}h {minutes} mins"
+    "hours": "{hours}h {minutes} mins",
+
+    "stock-info": "STOCK INFO",
+    "stock-length": "Length",
+    "stock-mass": "Mass",
+    "stock-max-speed": "Maximum registered speed",
+
+    "load-data": "Load further data...",
+
+    "last-seen-at": "Last seen at",
+    "currently-at": "Currently at",
+
+    "stats-title": "DRIVING STATISTICS OF",
+
+    "stats-timetables": "TIMETABLES",
+    "stats-longest-timetable": "LONGEST TIMETABLE",
+    "stats-avg-timetable": "AVERAGE TIMETABLE LENGTH",
+    "stats-distance": "DISTANCE",
+    "stats-stations": "STATIONS",
+
+    "timetable-stats-total": "Today, dispatchers made so far {count} with total distance of {distance}",
+    "timetable-stats-longest": "The longest timetable today is #{id} made by {author} for {driver} - {distance}",
+    "timetable-stats-most-active": "The most active dispatcher today is {dispatcher} who created {count}",
+    "timetable-stats-most-active-many": "The most active dispatchers today are {dispatchers} who created {count} each",
+
+    "timetable-count": "timetable | timetables",
+
+    "daily-stats-title": "DAILY STATS",
+    "daily-stats-info": "Today's statistics are unavailable yet!",
+
+    "driver-stats-title": "DRIVER STATS",
+    "driver-stats-info": "Enter a proper nickname into filters [F] to see user's driving statistics!",
+
+    "stats-loading": "Fetching statistics...",
+    "stats-error": "Oops! An unexpected error occurred while trying to fetch statistics! :/"
  },
  "scenery": {
    "users": "PLAYERS ONLINE",
    "spawns": "OPEN SPAWNS",
    "timetables": "ACTIVE TIMETABLES",
    "no-timetables": "No active timetables!",
+    "offline": "Scenery is offline",
    "no-users": "NO ACTIVE PLAYERS",
    "no-spawns": "NO OPEN SPAWNS",
    "no-scenery": "Oops! This scenery doesn't exist!",
@@ -258,24 +312,22 @@
    "timetable-author-unknown": "Author unknown",

    "req-level": "all dispatcher levels | dispatcher level {lvl} required | dispatcher level {lvl} required",
-    "history-list-empty": "No recorded scenery history!"
+    "history-list-empty": "No recorded scenery history!",
+
+    "forum-topic": "Official {name} forum topic"
  },
  "availability": {
    "title": "Availability",
    "default": "in-game",
-    "nonDefault": "downloadable",
+    "nonDefault": "additional",
    "unavailable": "unavailable",
    "nonPublic": "private",
    "abandoned": "abandoned"
  },
  "timetables": {
    "timetable-only": "Switch to timetable-only view",
-    "online": "At station",
-    "departed": "Dispatched to:",
-    "departed-away": "Departed to:",
-    "arriving": "Arriving from:",
-    "stopped": "Stopped",
-    "terminated": "Terminated",
+    "end": "Timetable terminates here",
+    "terminated": "Timetable terminated",
    "begins": "BEGINS HERE",
    "terminates": "TERMINATES\nHERE"
  },
@@ -1,4 +1,7 @@
 {
+  "general": {
+    "and": " oraz "
+  },
  "app": {
    "sceneries": "SCENERIE",
    "trains": "POCIĄGI",
@@ -8,10 +11,20 @@
    "error": "Wystąpił problem z załadowaniem danych!",
    "no-result": "Brak wyników o podanych kryteriach!",
    "migration-warning": "Usługi Stacjownika będą niedostępne w godzinach 1:00-3:00 2 czerwca 2022r. z powodu migracji hostingów API!",
-    "migration-confirm": "Przyjąłem!"
+    "migration-confirm": "Przyjąłem!",
+    "offline": "Aplikacja w trybie offline!"
+  },
+
+  "update": {
+    "title": "Nowa wersja Stacjownika jest dostępna!",
+    "paragraph1": "Miłego korzystania z aplikacji i niech S2 będzie z wami!",
+    "release-link": "Kliknij, aby przejrzeć listę zmian (GitHub)",
+    "confirm-button": "ZAKTUALIZUJ",
+    "later-button": "PÓŹNIEJ"
  },

  "data-status": {
+    "S1-offline": "<b>Sygnał S1</b> <br> Aplikacja działa w trybie offline!",
    "S1a-connection": "<b>Sygnał S1a</b> <br> Błąd podczas próby połączenia się z API Stacjownika!",
    "S1a-sceneries": "<b>Sygnał S1a</b> <br> Błąd podczas pobierania danych o sceneriach online!",
    "S2": "<b>Sygnał S2</b> <br> Pomyślnie załadowano dane!",
@@ -67,7 +80,53 @@
  },
  "options": {
    "filters": "FILTRY",
-    "donate": "WESPRZYJ"
+    "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-dispatcher": "Nick dyżurnego",
+    "search-station": "Nazwa scenerii",
+    "search-author": "Nick autora rozkładu jazdy",
+    "search-date": "Data rozkładu jazdy (czas polski)",
+
+    "sort-distance": "kilometraż",
+    "sort-total-stops": "stacje",
+    "sort-beginDate": "data",
+    "sort-timetableId": "ID rozkładu",
+    "sort-timestampFrom": "data",
+    "sort-duration": "czas dyżuru",
+
+    "sort-mass": "masa",
+    "sort-speed": "prędkość",
+    "sort-length": "długość",
+    "sort-timetable": "nr pociągu",
+    "sort-progress": "przebyta trasa",
+    "sort-delay": "opóźnienie",
+    "sort-comments": "uwagi ekspl.",
+
+    "filter-comments": "UWAGI EKSPLOATACYJNE",
+    "filter-twr": "TWR",
+    "filter-skr": "PRZEKR. SKRAJNIA",
+    "filter-passenger": "PASAŻERSKIE",
+    "filter-freight": "TOWAROWE",
+    "filter-other": "INNE",
+    "filter-noTimetable": "BEZ RJ",
+
+    "filter-reset": "ZRESETUJ FILTRY",
+    "filter-clear": "WYŁĄCZ FILTRY",
+
+    "filter-all": "WSZYSTKIE",
+    "filter-abandoned": "PORZUCONE",
+    "filter-fulfilled": "WYPEŁNIONE",
+    "filter-active": "AKTYWNE"
  },
  "filters": {
    "endingStatus": "KOŃCZY",
@@ -111,7 +170,7 @@
    "hour": " godz.",
    "no-limit": "BEZ LIMITU",
    "include-selected": "POKAŻ ZAZNACZONE",
-    "save": "↵ ZAPISZ FILTRY",
+    "save": "ZAPISZ FILTRY",
    "reset": "RESETUJ FILTRY",
    "close": "ZAMKNIJ FILTRY"
  },
@@ -126,7 +185,8 @@
    "users": "Maszyniści online",
    "spawns": "Otwarte spawny",
    "timetables": "Aktywne rozkłady jazdy",
-    "no-stations": "Brak stacji do wyświetlenia!"
+    "no-stations": "Brak stacji do wyświetlenia!",
+    "scenery-search": "Wyszukaj scenerię..."
  },
  "trains": {
    "no-trains": "Brak pociągów do wyświetlenia!",
@@ -145,28 +205,6 @@
    "current-signal": "przy semaforze",
    "current-track": "na szlaku",

-    "option-mass": "masa",
-    "option-speed": "prędkość",
-    "option-length": "długość",
-    "option-distance": "kilometraż",
-    "option-timetable": "nr pociągu",
-    "option-progress": "przebyta trasa",
-    "option-delay": "opóźnienie",
-    "option-comments": "uwagi ekspl.",
-
-    "filter-comments": "uwagi ekspl.",
-    "filter-twr": "TWR",
-    "filter-skr": "SKR",
-    "filter-passenger": "pasażerskie",
-    "filter-freight": "towarowe",
-    "filter-other": "inne",
-    "filter-noTimetable": "bez RJ",
-    "filter-reset": "X RESETUJ",
-
-    "sorter-prefix": "Sortuj: ",
-    "search-train": "Numer pociągu",
-    "search-driver": "Nick maszynisty",
-
    "delayed": "Opóźniony: ",
    "preponed": "Przed czasem: ",
    "on-time": "Planowo",
@@ -186,9 +224,13 @@
    "comment": "Uwagi eksploatacyjne dla: ",
    "table-limit": "Dla płynności działania strony pokazanych jest tylko 10 pociągów zgodnie z wybranymi filtrami.",

-    "last-seen-now": "ostatnio widziany: przed chwilą",
-    "last-seen-min": "ostatnio widziany: minutę temu",
-    "last-seen-ago": "ostatnio widziany: {minutes} min. temu"
+    "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"
  },
  "journal": {
    "title": "HISTORIA DYŻURÓW",
@@ -198,26 +240,6 @@
    "section-timetables": "ROZKŁADY JAZDY",
    "section-dispatchers": "DYŻURNI",

-    "search": "Szukaj",
-    "search-train": "Numer pociągu",
-    "search-driver": "Nick maszynisty",
-    "search-dispatcher": "Nick dyżurnego",
-    "search-station": "Nazwa scenerii",
-
-    "sort-prefix": "Sortuj: ",
-
-    "option-distance": "kilometraż",
-    "option-total-stops": "stacje",
-    "option-beginDate": "data",
-    "option-timetableId": "ID rozkładu",
-    "option-timestampFrom": "data",
-    "option-duration": "czas dyżuru",
-
-    "filter-all": "WSZYSTKIE",
-    "filter-abandoned": "PORZUCONE",
-    "filter-fulfilled": "WYPEŁNIONE",
-    "filter-active": "AKTYWNE",
-
    "no-further-data": "Brak dalszych wyników dla podanych parametrów",
    "loading-further-data": "Ładowanie...",

@@ -232,13 +254,48 @@
    "timetable-day": "Rozkład z dnia",
    "timetable-active": "AKTYWNY",
    "timetable-fulfilled": "WYPEŁNIONY",
-    "timetable-abandoned": "PORZUCONY"
+    "timetable-abandoned": "PORZUCONY",
+
+    "stock-info": "INFORMACJE O SKŁADZIE",
+    "stock-length": "Długość",
+    "stock-mass": "Masa",
+    "stock-max-speed": "Maks. zarejestrowana prędkość",
+
+    "load-data": "Pobierz dalszą historię...",
+
+    "stats-title": "STATYSTYKI MASZYNISTY",
+
+    "last-seen-at": "Ostatnio widziany na: ",
+    "currently-at": "Obecnie na scenerii: ",
+
+    "stats-timetables": "ROZKŁADY JAZDY",
+    "stats-longest-timetable": "NAJDŁUŻSZY RJ",
+    "stats-avg-timetable": "ŚREDNIA DŁUGOŚĆ RJ",
+    "stats-distance": "DYSTANS",
+    "stats-stations": "STACJE",
+
+    "timetable-stats-total": "Dyżurni stworzyli dziś {count}  o łącznym dystansie {distance}",
+    "timetable-stats-longest": "Najdłuższym rozkładem jazdy jest dzisiaj #{id} stworzony przez dyżurnego {author} dla maszynisty {driver} - {distance}",
+    "timetable-stats-most-active": "Dzisiejszym najaktywniejszym dyżurnym jest {dispatcher}, który stworzył {count}",
+    "timetable-stats-most-active-many": "Dzisiejszymi najaktywniejszymi dyżurnymi są {dispatchers}, którzy stworzyli po {count}",
+
+    "timetable-count": "rozkład jazdy | rozkładów jazdy",
+
+    "daily-stats-title": "STATYSTYKI DNIA",
+    "daily-stats-info": "Dzisiejsze statystyki nie są jeszcze dostępne!",
+
+    "driver-stats-title": "STATYSTYKI GRACZA",
+    "driver-stats-info": "Wpisz nazwę użytkownika w filtrach [F], aby zobaczyć jego statystyki maszynisty!",
+
+    "stats-loading": "Pobieranie statystyk...",
+    "stats-error": "Ups! Wystąpił błąd podczas próby pobrania statystyk! :/"
  },
  "scenery": {
    "users": "GRACZE ONLINE",
    "spawns": "OTWARTE SPAWNY",
    "timetables": "AKTYWNE ROZKŁADY JAZDY",
    "no-timetables": "Brak aktywnych rozkładów!",
+    "offline": "Sceneria jest offline",
    "no-users": "BRAK AKTYWNYCH GRACZY",
    "no-spawns": "BRAK OTWARTYCH SPAWNÓW",
    "no-scenery": "Ups! Ta sceneria nie istnieje!",
@@ -259,7 +316,9 @@
    "timetable-author-unknown": "Autor nieznany",

    "req-level": "ogólnodostępna | minimum {lvl} poziom dyżurnego | minimum {lvl} poziom dyżurnego",
-    "history-list-empty": "Brak historii dla tej scenerii!"
+    "history-list-empty": "Brak historii dla tej scenerii!",
+
+    "forum-topic": "Oficjalny wątek scenerii {name}"
  },
  "availability": {
    "title": "Dostępność",
@@ -271,12 +330,8 @@
  },
  "timetables": {
    "timetable-only": "Wyodrębnij rozkłady jazdy",
-    "online": "Na stacji",
-    "departed": "Odprawiony do:",
-    "departed-away": "Odjechał do:",
-    "arriving": "W drodze z:",
-    "stopped": "Postój",
-    "terminated": "Skończył bieg",
+    "end": "Koniec rozkładu jazdy",
+    "terminated": "Rozkład jazdy zakończony",
    "begins": "ROZPOCZYNA\nBIEG",
    "terminates": "KOŃCZY BIEG"
  },
@@ -2,14 +2,15 @@ import { createApp, Directive, ref } from 'vue';
 import App from './App.vue';
 import router from './router';

-import enLang from '@/locales/en.json';
-import plLang from '@/locales/pl.json';
+import enLang from './locales/en.json';
+import plLang from './locales/pl.json';

 import { createI18n } from 'vue-i18n';
 import { createPinia } from 'pinia';

 const i18n = createI18n({
  locale: 'pl',
+  legacy: false,
  fallbackLocale: 'pl',
  messages: {
    en: enLang,
@@ -0,0 +1,13 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  methods: {
+    getIcon(name: string, ext = 'svg') {
+      return new URL(`../assets/icon-${name}.${ext}`, import.meta.url).href;
+    },
+
+    getImage(name: string) {
+        return new URL(`../assets/${name}`, import.meta.url).href;
+    }
+  },
+});
@@ -0,0 +1,26 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  data() {
+    return {
+      preventKeyDown: false,
+    };
+  },
+
+  activated() {
+    window.addEventListener('keydown', this.handleKeyDown);
+  },
+
+  deactivated() {
+    window.removeEventListener('keydown', this.handleKeyDown);
+  },
+
+  methods: {
+    onKeyDownFunction() {},
+
+    handleKeyDown(e: KeyboardEvent) {
+      if (!e.key) return;
+      if (e.key.toLowerCase() == 'f' && !this.preventKeyDown && !e.ctrlKey && !e.altKey) this.onKeyDownFunction();
+    },
+  },
+});
@@ -0,0 +1,31 @@
+import { defineComponent } from 'vue';
+import { useStore } from '../store/store';
+
+export default defineComponent({
+  data() {
+    return {
+      store: useStore(),
+    };
+  },
+
+  computed: {
+    chosenTrain() {
+      return this.store.trainList.find((train) => train.trainId == this.store.chosenModalTrainId);
+    },
+  },
+
+  methods: {
+    selectModalTrain(trainId: string) {
+      this.store.chosenModalTrainId = trainId;
+      document.body.classList.add('no-scroll');
+    },
+
+    closeModal() {
+      this.store.chosenModalTrainId = undefined;
+
+      setTimeout(() => {
+        document.body.classList.remove('no-scroll');
+      }, 150);
+    },
+  },
+});
@@ -1,31 +1,34 @@
-import { defineComponent, h } from "vue";
-
-export default defineComponent({
-    data() {
-        return {
-            icons: {
-                arrow: require('@/assets/icon-arrow-asc.svg'),
-            },
-
-            showReturnButton: false
-        }
-    },
-
-    methods: {
-        scrollToTop() {
-            window.scrollTo({ top: 0 });
-        },
-
-        handleScroll() {
-            this.showReturnButton = window.scrollY > window.innerHeight * 0.35;            
-        }
-    },
-
-    activated() {
-        window.addEventListener('scroll', this.handleScroll);
-    },
-
-    deactivated() {
-        window.removeEventListener('scroll', this.handleScroll);
-    },
-})
+import { defineComponent, h } from 'vue';
+import imageMixin from './imageMixin';
+
+export default defineComponent({
+  mixins: [imageMixin],
+
+  data() {
+    return {
+      icons: {
+        arrow: this.getIcon('arrow-asc'),
+      },
+
+      showReturnButton: false,
+    };
+  },
+
+  methods: {
+    scrollToTop() {
+      window.scrollTo({ top: 0 });
+    },
+
+    handleScroll() {
+      this.showReturnButton = window.scrollY > window.innerHeight * 0.35;
+    },
+  },
+
+  activated() {
+    window.addEventListener('wheel', this.handleScroll);
+  },
+
+  deactivated() {
+    window.removeEventListener('wheel', this.handleScroll);
+  },
+});
@@ -5,7 +5,7 @@ export default defineComponent({
    calculateExpStyle(exp: number, isSupporter = false): string {
      const bgColor = exp > -1 ? (exp < 2 ? '#26B0D9' : `hsl(${-exp * 5 + 100},  85%, 50%)`) : '#666';
  
-      const fontColor = exp > 15 || exp == -1 ? 'white' : 'black';
+      const fontColor = exp > 14 || exp == -1 ? 'white' : 'black';
      const boxShadow = isSupporter ? `box-shadow: 0 0 10px 2px ${bgColor};` : '';
  
      return `background-color: ${bgColor}; color: ${fontColor}; ${boxShadow}`;
@@ -1,8 +1,11 @@
-import Train from '@/scripts/interfaces/Train';
-import TrainStop from '@/scripts/interfaces/TrainStop';
 import { defineComponent } from 'vue';
+import Train from '../scripts/interfaces/Train';
+import TrainStop from '../scripts/interfaces/TrainStop';
+import imageMixin from './imageMixin';

 export default defineComponent({
+  mixins: [imageMixin],
+
  data: () => ({
    STATS: {
      main: [
@@ -55,6 +58,23 @@ export default defineComponent({
        : this.$t('trains.last-seen-ago', { minutes: diffMins });
    },

+    displayTrainPosition(train: Train) {
+      let positionString = '';
+
+      positionString += this.$t('trains.current-scenery') + ' ';
+
+      if (train.currentStationHash) positionString += train.currentStationName + ' ';
+      else positionString += train['currentStationName'].replace(/.[a-zA-Z0-9]+.sc/, '') + ' (offline) ';
+
+      if (train.signal) positionString += this.$t('trains.current-signal') + ' ' + train.signal + ' ';
+
+      if (train.connectedTrack) positionString += this.$t('trains.current-track') + ' ' + train.connectedTrack + ' ';
+
+      if (train.distance) positionString += `(${this.displayDistance(train.distance)})`;
+
+      return positionString.charAt(0).toUpperCase() + positionString.slice(1);
+    },
+
    displayStopList(stops: TrainStop[]): string | undefined {
      if (!stops) return '';

@@ -62,11 +82,7 @@ export default defineComponent({
        .reduce((acc: string[], stop: TrainStop, i: number) => {
          if (stop.stopType.includes('ph') && !stop.stopNameRAW.includes('po.'))
            acc.push(`<strong style='color:${stop.confirmed ? 'springgreen' : 'white'}'>${stop.stopName}</strong>`);
-          else if (
-            i > 0 &&
-            i < stops.length - 1 &&
-            !/po\.|sbl/gi.test(stop.stopNameRAW)
-          )
+          else if (i > 0 && i < stops.length - 1 && !/po\.|sbl/gi.test(stop.stopNameRAW))
            acc.push(`<span style='color:${stop.confirmed ? 'springgreen' : 'lightgray'}'>${stop.stopName}</span>`);
          return acc;
        }, [])
@@ -121,7 +137,7 @@ export default defineComponent({

    onImageError(e: Event) {
      const imageEl = e.target as HTMLImageElement;
-      imageEl.src = require('@/assets/unknown.png');
+      imageEl.src = this.getImage('unknown.png');
    },
  },
 });
@@ -0,0 +1,13 @@
+import { useRegisterSW } from 'virtual:pwa-register/vue';
+
+export default () => {
+  const { needRefresh, updateServiceWorker, offlineReady } = useRegisterSW({
+    immediate: true,
+  });
+
+  return {
+    needRefresh,
+    updateServiceWorker,
+    offlineReady,
+  };
+};
@@ -1,50 +1,43 @@
-import JournalDispatchersVue from '@/components/JournalView/JournalDispatchers.vue';
-import JournalTimetablesVue from '@/components/JournalView/JournalTimetables.vue';
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
+import JournalDispatchersVue from '../views/JournalDispatchers.vue';
+import JournalTimetablesVue from '../views/JournalTimetables.vue';

 const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'StationsView',
-    component: () => import('@/views/StationsView.vue'),
+    component: () => import('../views/StationsView.vue'),
  },
  {
    path: '/trains',
    name: 'TrainsView',
-    component: () => import('@/views/TrainsView.vue'),
-    props: (route) => ({ train: route.query.train, driver: route.query.driver }),
+    component: () => import('../views/TrainsView.vue'),
+    props: (route) => ({ train: route.query.train, driver: route.query.driver, trainId: route.query.trainId }),
  },
  {
    path: '/scenery',
    name: 'SceneryView',
-    component: () => import('@/views/SceneryView.vue'),
-    props: true,
+    component: () => import('../views/SceneryView.vue'),
  },
  {
    path: '/journal',
-    name: 'JournalView',
-    component: () => import('@/views/JournalView.vue'),
-    children: [
-      {
-        path: '',
-        redirect: '/journal/timetables',
-        component: JournalTimetablesVue,
-      },
-      {
-        path: 'dispatchers',
-        component: JournalDispatchersVue,
-        props: (route) => ({ sceneryName: route.query.sceneryName, dispatcherName: route.query.dispatcherName }),
-      },
-      {
-        path: 'timetables',
-        component: JournalTimetablesVue,
-        props: (route) => ({
-          trainNo: route.query.trainNo,
-          driverName: route.query.driverName,
-          timetableId: route.query.timetableId,
-        }),
-      },
-    ],
+    redirect: '/journal/timetables'
+  },
+  {
+    path: '/journal/timetables',
+    name: 'JournalTimetables',
+    component: JournalTimetablesVue,
+    props: (route) => ({
+      trainNo: route.query.trainNo,
+      driverName: route.query.driverName,
+      timetableId: route.query.timetableId,
+    }),
+  },
+  {
+    path: '/journal/dispatchers',
+    name: 'JournalDispatchers',
+    component: JournalDispatchersVue,
+    props: (route) => ({ sceneryName: route.query.sceneryName, dispatcherName: route.query.dispatcherName }),
  },
  {
    path: '/:catchAll(.*)',
@@ -56,7 +49,7 @@ const router = createRouter({
  scrollBehavior(to, from) {
    if (to.name == 'SceneryView' && from.name) return { el: `.app_main` };

-    if (from.name == 'SceneryView' && to.name == 'StationsView') return { el: `.last-selected`, top: 20 };
+    // if (from.name == 'SceneryView' && to.name == 'StationsView') return { el: `.last-selected`, top: 20 };
  },
  history: createWebHistory(),
  routes,
@@ -1,4 +1,4 @@
-export const enum DataStatus {
+export enum DataStatus {
  Initialized = -1,
  Loading = 0,
  Error = 1,
@@ -1,7 +1,9 @@
 import TrainStop from "./TrainStop";

 export default interface ScheduledTrain {
+    trainId: string;
    trainNo: number;
+    
    driverName: string;
    driverId: number;
    currentStationName: string;
@@ -18,6 +20,12 @@ export default interface ScheduledTrain {
    arrivingLine: string | null;
    departureLine: string | null;

+    prevDepartureLine: string | null;
+    nextArrivalLine: string | null;
+
+    signal: string;
+    connectedTrack: string;
+
    stopLabel: string;
    stopStatus: string;
    stopStatusID: number;
@@ -1,6 +1,6 @@
-import { Availability } from "@/store/storeTypes";
-import ScheduledTrain from "./ScheduledTrain";
-import StationRoutes from "./StationRoutes";
+import { Availability } from '../../store/storeTypes';
+import ScheduledTrain from './ScheduledTrain';
+import StationRoutes from './StationRoutes';

 export default interface Station {
  name: string;
@@ -53,9 +53,10 @@ export default interface Station {
      driverName: string;
      driverId: number;
      trainNo: number;
+      trainId: string;
      stopStatus?: string;
    }[];

    scheduledTrains?: ScheduledTrain[];
-  }
+  };
 }
@@ -1,6 +1,8 @@
-import TrainStop from "@/scripts/interfaces/TrainStop";
+import TrainStop from './TrainStop';

 export default interface Train {
+  trainId: string;
+
  mass: number;
  length: number;
  speed: number;
@@ -17,9 +19,11 @@ export default interface Train {
  online: boolean;
  lastSeen: number;
  region: string;
-
  cars: string[];

+  isTimeout: boolean;
+  isSupporter: boolean;
+
  timetableData?: {
    timetableId: number;
    category: string;
@@ -1,12 +1,14 @@
-export interface DispatcherHistory {
-  currentDuration: number;
-  dispatcherId: number;
-  dispatcherName: string;
-  isOnline: boolean;
-  lastOnlineTimestamp: number;
-  region: string;
-  stationHash: string;
-  stationName: string;
-  timestampFrom: number;
-  timestampTo?: number;
+export interface DispatcherHistory {
+  id: string;
+  
+  currentDuration: number;
+  dispatcherId: number;
+  dispatcherName: string;
+  isOnline: boolean;
+  lastOnlineTimestamp: number;
+  region: string;
+  stationHash: string;
+  stationName: string;
+  timestampFrom: number;
+  timestampTo?: number;
 }
@@ -0,0 +1,30 @@
+import { TimetableHistory } from './TimetablesAPIData';
+
+export interface ITimetablesDailyStats {
+  totalTimetables: number;
+  distanceSum: number;
+  distanceAvg: number;
+
+  timetableId: number;
+  timetableAuthor: string;
+  timetableDriver: string;
+  timetableRouteDistance: number;
+
+  mostActiveDispatchers: {
+    name: string;
+    count: number;
+  }[];
+}
+
+export interface ITimetablesDailyStatsResponse {
+  totalTimetables: number;
+  distanceSum: number;
+  distanceAvg: number;
+  maxTimetable: TimetableHistory | null;
+
+  mostActiveDispatchers: {
+    name: string;
+    count: number;
+  }[];
+}
+
@@ -1,35 +1,44 @@
-export interface TimetableHistory {
-  timetableId: number;
-  trainNo: number;
-  trainCategoryCode: string;
-  driverId: number;
-  driverName: string;
-  route: string;
-  twr: number;
-  skr: number;
-  sceneriesString: string;
-
-  routeDistance: number;
-  currentDistance: number;
-
-  confirmedStopsCount: number;
-  allStopsCount: number;
-
-  beginDate: string;
-  endDate: string;
-
-  scheduledBeginDate: string;
-  scheduledEndDate: string;
-
-  terminated: boolean;
-  fulfilled: boolean;
-
-  authorName?: string;
-  authorId?: number;
-}
-
-export interface SceneryTimetableHistory {
-  sceneryTimetables: TimetableHistory[];
-  totalCount: number;
-  sceneryName: string;
-}
+export interface TimetableHistory {
+  timetableId: number;
+  trainNo: number;
+  trainCategoryCode: string;
+  driverId: number;
+  driverName: string;
+  route: string;
+  twr: number;
+  skr: number;
+  sceneriesString: string;
+
+  routeDistance: number;
+  currentDistance: number;
+
+  confirmedStopsCount: number;
+  allStopsCount: number;
+
+  beginDate: string;
+  endDate: string;
+
+  scheduledBeginDate: string;
+  scheduledEndDate: string;
+
+  terminated: boolean;
+  fulfilled: boolean;
+
+  authorName?: string;
+  authorId?: number;
+
+  stockString?: string;
+  stockMass?: number;
+  stockLength?: number;
+  maxSpeed?: number;
+
+  hashesString?: string;
+  currentSceneryName?: string;
+  currentSceneryHash?: string;
+}
+
+export interface SceneryTimetableHistory {
+  sceneryTimetables: TimetableHistory[];
+  totalCount: number;
+  sceneryName: string;
+}
@@ -21,6 +21,7 @@ export default interface TrainAPIData {
  lastSeen: number;

  region: string;
+  isTimeout: boolean;

  timetable?: {
    timetableId: number;
@@ -0,0 +1,41 @@
+export interface Author {
+  login: string;
+  id: number;
+  node_id: string;
+  avatar_url: string;
+  gravatar_id: string;
+  url: string;
+  html_url: string;
+  followers_url: string;
+  following_url: string;
+  gists_url: string;
+  starred_url: string;
+  subscriptions_url: string;
+  organizations_url: string;
+  repos_url: string;
+  events_url: string;
+  received_events_url: string;
+  type: string;
+  site_admin: boolean;
+}
+
+export interface ReleaseAPIData {
+  url: string;
+  assets_url: string;
+  upload_url: string;
+  html_url: string;
+  id: number;
+  author: Author;
+  node_id: string;
+  tag_name: string;
+  target_commitish: string;
+  name: string;
+  draft: boolean;
+  prerelease: boolean;
+  created_at: Date;
+  published_at: Date;
+  assets: any[];
+  tarball_url: string;
+  zipball_url: string;
+  body: string;
+}
@@ -23,6 +23,13 @@ export default class StorageManager {
    window.localStorage.setItem(key, val);
  }

+  static setValue(key: string, val: any) {
+    if (typeof val == 'boolean') this.setBooleanValue(key, val);
+    else if (typeof val == 'number') this.setNumericValue(key, val);
+    else if (typeof val == 'string') this.setStringValue(key, val);
+    else this.setStringValue(key, val);
+  }
+
  static removeValue(key: string) {
    window.localStorage.removeItem(key);
  }
@@ -1,115 +1,115 @@
-import { TrainFilter } from "vue";
-import { TrainFilterType } from "../enums/TrainFilterType";
-import Train from "../interfaces/Train";
-import TrainStop from "../interfaces/TrainStop";
-
-function confirmedPercentage(stops: TrainStop[] | undefined) {
-    if (!stops) return -1;
-
-    return Number(((stops.filter((stop) => stop.confirmed).length / stops.length) * 100).toFixed(0));
-};
-
-function currentDelay(stops: TrainStop[] | undefined) {
-    if (!stops) return -Infinity;
-
-    const delay =
-        stops.find((stop, i) => (i == 0 && !stop.confirmed) || (i > 0 && stops[i - 1].confirmed && !stop.confirmed))
-            ?.departureDelay || 0;
-
-    return delay;
-};
-
-function filterTrainList(trainList: Train[], searchedTrain: string, searchedDriver: string, filters: TrainFilter[]) {
-    return trainList.filter(
-        (train) => {
-            const isFiltered = filters.every(f => {
-                if (f.isActive) return true;
-                
-                if (!train.timetableData) return filters.find(filter => filter.id == TrainFilterType.noTimetable)!.isActive;
-
-                switch (f.id) {
-                    case TrainFilterType.comments:
-                        return !train.timetableData.followingStops.some(stop => stop.comments);
-                    
-                    case TrainFilterType.twr:
-                        return !train.timetableData.TWR;
-                    
-                    case TrainFilterType.skr:
-                        return !train.timetableData.SKR;
-                    
-                    case TrainFilterType.passenger:
-                        return !/^[AMRE]\D{2}$/.test(train.timetableData.category);
-                    
-                    case TrainFilterType.freight:
-                        return !train.timetableData.category.startsWith('T');
-                    
-                    case TrainFilterType.other:
-                        return !/^[PXZL]\D{2}$/.test(train.timetableData.category);
-                    
-                    default:
-                        return true;
-                }
-            })
-
-            return (searchedTrain.length > 0 ? train.trainNo.toString().startsWith(searchedTrain) : true) &&
-                (searchedDriver.length > 0 ? train.driverName.toLowerCase().startsWith(searchedDriver.toLowerCase()) : true) && isFiltered
-        }
-
-    );
-}
-
-function sortTrainList(trainList: Train[], sorterActive: { id: string; dir: number }) {
-    return trainList.sort((a: Train, b: Train) => {
-        switch (sorterActive.id) {
-            case 'mass':
-                if (a.mass > b.mass) return sorterActive.dir;
-                return -sorterActive.dir;
-
-            case 'distance':
-                if ((a.timetableData?.routeDistance || -1) > (b.timetableData?.routeDistance || -1)) return sorterActive.dir;
-
-                return -sorterActive.dir;
-
-            case 'progress':
-                if (confirmedPercentage(a.timetableData?.followingStops) > confirmedPercentage(b.timetableData?.followingStops))
-                    return sorterActive.dir;
-
-                return -sorterActive.dir;
-
-            case 'delay':
-                if (currentDelay(a.timetableData?.followingStops) > currentDelay(b.timetableData?.followingStops))
-                    return sorterActive.dir;
-
-                return -sorterActive.dir;
-
-            case 'speed':
-                if (a.speed > b.speed) return sorterActive.dir;
-                return -sorterActive.dir;
-
-            case 'timetable':
-                if (a.trainNo > b.trainNo) return sorterActive.dir;
-                return -sorterActive.dir;
-
-            case 'length':
-                if (a.length > b.length) return sorterActive.dir;
-                return -sorterActive.dir;
-
-            default:
-                break;
-        }
-
-        return 0;
-    });
-}
-
-export function filteredTrainList(
-    trainList: Train[],
-    searchedTrain: string,
-    searchedDriver: string,
-    sorterActive: { id: string; dir: number },
-    filters: TrainFilter[]
-) {
-
-    const filtered = filterTrainList(trainList, searchedTrain, searchedDriver, filters);        
-    return [...sortTrainList(filtered, sorterActive)];
+import { TrainFilter } from "../../types/Trains/TrainOptionsTypes";
+import { TrainFilterType } from "../enums/TrainFilterType";
+import Train from "../interfaces/Train";
+import TrainStop from "../interfaces/TrainStop";
+
+function confirmedPercentage(stops: TrainStop[] | undefined) {
+    if (!stops) return -1;
+
+    return Number(((stops.filter((stop) => stop.confirmed).length / stops.length) * 100).toFixed(0));
+};
+
+function currentDelay(stops: TrainStop[] | undefined) {
+    if (!stops) return -Infinity;
+
+    const delay =
+        stops.find((stop, i) => (i == 0 && !stop.confirmed) || (i > 0 && stops[i - 1].confirmed && !stop.confirmed))
+            ?.departureDelay || 0;
+
+    return delay;
+};
+
+function filterTrainList(trainList: Train[], searchedTrain: string, searchedDriver: string, filters: TrainFilter[]) {
+    return trainList.filter(
+        (train) => {
+            const isFiltered = filters.every(f => {
+                if (f.isActive) return true;
+                
+                if (!train.timetableData) return filters.find(filter => filter.id == TrainFilterType.noTimetable)!.isActive;
+
+                switch (f.id) {
+                    case TrainFilterType.comments:
+                        return !train.timetableData.followingStops.some(stop => stop.comments);
+                    
+                    case TrainFilterType.twr:
+                        return !train.timetableData.TWR;
+                    
+                    case TrainFilterType.skr:
+                        return !train.timetableData.SKR;
+                    
+                    case TrainFilterType.passenger:
+                        return !/^[AMRE]\D{2}$/.test(train.timetableData.category);
+                    
+                    case TrainFilterType.freight:
+                        return !train.timetableData.category.startsWith('T');
+                    
+                    case TrainFilterType.other:
+                        return !/^[PXZL]\D{2}$/.test(train.timetableData.category);
+                    
+                    default:
+                        return true;
+                }
+            })
+
+            return (searchedTrain.length > 0 ? train.trainNo.toString().startsWith(searchedTrain) : true) &&
+                (searchedDriver.length > 0 ? train.driverName.toLowerCase().startsWith(searchedDriver.toLowerCase()) : true) && isFiltered
+        }
+
+    );
+}
+
+function sortTrainList(trainList: Train[], sorterActive: { id: string; dir: number }) {
+    return trainList.sort((a: Train, b: Train) => {
+        switch (sorterActive.id) {
+            case 'mass':
+                if (a.mass > b.mass) return sorterActive.dir;
+                return -sorterActive.dir;
+
+            case 'distance':
+                if ((a.timetableData?.routeDistance || -1) > (b.timetableData?.routeDistance || -1)) return sorterActive.dir;
+
+                return -sorterActive.dir;
+
+            case 'progress':
+                if (confirmedPercentage(a.timetableData?.followingStops) > confirmedPercentage(b.timetableData?.followingStops))
+                    return sorterActive.dir;
+
+                return -sorterActive.dir;
+
+            case 'delay':
+                if (currentDelay(a.timetableData?.followingStops) > currentDelay(b.timetableData?.followingStops))
+                    return sorterActive.dir;
+
+                return -sorterActive.dir;
+
+            case 'speed':
+                if (a.speed > b.speed) return sorterActive.dir;
+                return -sorterActive.dir;
+
+            case 'timetable':
+                if (a.trainNo > b.trainNo) return sorterActive.dir;
+                return -sorterActive.dir;
+
+            case 'length':
+                if (a.length > b.length) return sorterActive.dir;
+                return -sorterActive.dir;
+
+            default:
+                break;
+        }
+
+        return 0;
+    });
+}
+
+export function filteredTrainList(
+    trainList: Train[],
+    searchedTrain: string,
+    searchedDriver: string,
+    sorterActive: { id: string; dir: number },
+    filters: TrainFilter[]
+) {
+
+    const filtered = filterTrainList(trainList, searchedTrain, searchedDriver, filters);        
+    return [...sortTrainList(filtered, sorterActive)];
 };
@@ -1,6 +1,5 @@
 export const URLs = {
-  stacjownikAPI: process.env.VUE_APP_API_DEV != 1 ? 'https://stacjownik.eu-4.evennode.com' : 'http://localhost:3000',
+  stacjownikAPI:
+    import.meta.env.VITE_APP_API_DEV == 1 && !import.meta.env.PROD ? 'http://localhost:3000' : 'https://spythere.pl',
  stacjownikAPIDev: 'localhost:3000',
-  // trains: "https://api.td2.info.pl:9640/?method=getTrainsOnline",
-  // getTimetableURL: (trainNo: string | number, region = "eu") => `https://api.td2.info.pl:9640/?method=readFromSWDR&value=getTimetable%3B${trainNo}%3B${region}`
 };
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Spythere	255e07372e	Merge wersji dev do produkcji (1.11) Wersja produkcyjna 1.11.0	2022-12-26 22:58:17 +01:00
Spythere	279bbfa4db	fix: responsywność	2022-12-26 20:01:10 +01:00
Spythere	a5c829faf5	Fix: wskaźnik ładowania dzienników	2022-12-26 19:37:52 +01:00
Spythere	5fdfaeac5e	hotfix	2022-12-26 18:52:31 +01:00
Spythere	9beb30e3d5	Tłumaczenie monitu	2022-12-26 18:51:50 +01:00
Spythere	48582e2eea	lock files sync	2022-12-26 18:45:39 +01:00
Spythere	2e721fb8bf	PWA: tryb offline	2022-12-26 18:43:15 +01:00
Spythere	f93c1fbfec	PWA: tryb offline	2022-12-26 18:43:14 +01:00
Spythere	c06e7b6468	Poprawka wyświetlania sumy dystansu	2022-12-26 13:54:30 +01:00
Spythere	22a6d266cb	Aktualizacja danych z API	2022-12-26 13:50:48 +01:00
Spythere	5f8a16401b	Update API	2022-12-25 23:35:10 +01:00
Spythere	c9be01aa29	lock files	2022-12-23 20:26:54 +01:00
Spythere	4ec058b33c	Konfiguracja PWA	2022-12-23 20:25:02 +01:00
Spythere	27a5d2a406	fix: tłumaczenie komunikatu	2022-12-22 18:50:09 +01:00
Spythere	58169e26f6	Feedback i stylistyka statystyk RJ	2022-12-22 01:45:43 +01:00
Spythere	fee1f4bbd5	Usprawienie podpowiedzi filtrów	2022-12-22 01:36:38 +01:00
Spythere	240817acc3	Przekierowanie do strony głównej	2022-12-21 20:32:41 +01:00
Spythere	db3be87dd8	Przystosowanie pod update API	2022-12-21 20:24:48 +01:00
Spythere	1665134d6f	Fix odznaczenia filtrów pociągów	2022-12-21 19:34:42 +01:00
Spythere	df289ab734	Wskaźnik aktywnych filtrów pociągów online	2022-12-21 19:07:23 +01:00
Spythere	f74440ba6f	Pogrubienie linku dziennika w headerze	2022-12-21 18:39:40 +01:00
Spythere	a25dbe9fd5	Usunięcie firebase config z html	2022-12-21 18:27:27 +01:00
Spythere	4fff136d6b	Poprawki reaktywności	2022-12-21 18:24:04 +01:00
Spythere	d06f2d5d2e	Optymalizacja pobierania danych	2022-12-21 18:10:54 +01:00
Spythere	9f68d628d0	Wskaźnik aktywnych filtrów dziennika DR	2022-12-21 15:51:13 +01:00
Spythere	d64b906dac	Wskaźnik aktywnych filtrów dziennika RJ	2022-12-21 15:45:03 +01:00
Spythere	f3e193e68a	Cleanup	2022-12-21 15:02:41 +01:00
Spythere	5640ce9f2b	Fix routingu w dzienniku RJ	2022-12-21 15:02:25 +01:00
Spythere	50100eb2f9	Nawigacja	2022-12-20 21:51:40 +01:00
Spythere	e478c510b2	Fix działania reaktywności linków	2022-12-20 21:31:59 +01:00
Spythere	7ea558642f	Stylistyka statystyk	2022-12-20 21:11:47 +01:00
Spythere	493145f7f2	Fix pola daty	2022-12-20 16:59:59 +01:00
Spythere	4f72535365	Setup GitHub Actions & npm	2022-12-20 16:56:12 +01:00
Spythere	8e3bf80715	Fix logiki przycisków	2022-12-20 16:44:15 +01:00
Spythere	6da586d08a	Stylistyka komponentów statystyk	2022-12-20 16:41:42 +01:00
Spythere	be53b9c7fb	Notka o lokacji pociągu nie pojawia się przy jej braku	2022-12-20 01:41:13 +01:00
Spythere	94ed1160a1	Poprawki	2022-12-20 01:38:08 +01:00
Spythere	859d8d2631	Train modal fix	2022-12-20 00:53:03 +01:00
Spythere	5f3abd73c5	Informacja o statystykach	2022-12-19 00:44:46 +01:00
Spythere	d71c8bb6f9	Bump wersji	2022-12-18 23:43:23 +01:00
Spythere	a3db13d79c	Github Actions	2022-12-18 20:01:15 +01:00
Spythere	8cb3da66f2	Statystyki maszynistów	2022-12-18 19:54:13 +01:00
Spythere	6e07897ac0	Fix: bug routingu dzienników	2022-12-18 03:01:13 +01:00
Spythere	726b859f5c	Poprawki tabów statystyk	2022-12-18 01:28:11 +01:00
Spythere	651c60707a	Rework statystyk RJ	2022-12-17 20:45:59 +01:00
Spythere	d4fee84603	Rework statystyk RJ	2022-12-17 20:45:53 +01:00
Spythere	86539cdf23	1.10.10: status scenerii w dzienniku RJ	2022-12-03 09:41:46 +01:00
Spythere	69772460b8	Poprawka w działaniu sortowania wyszukiwarki scenerii	2022-11-01 18:27:27 +01:00
Spythere	6988a83355	Zmiana API	2022-10-30 23:03:47 +01:00
Spythere	b6425564c8	Bump wersji	2022-10-28 13:15:28 +02:00
Spythere	caf0a9b4c5	Dodano sugestie wyszukiwania istniejących użytkowników w dziennikach	2022-10-28 13:15:07 +02:00
Spythere	bd5f433d6e	Update paczek	2022-10-26 15:27:28 +02:00
Spythere	8d9cc721d6	Poprawki stylów	2022-10-16 23:09:46 +02:00
Spythere	cceeffe49d	Świecące nicki i poziomy sponsorów	2022-10-14 23:15:50 +02:00
Spythere	fcb8357489	Dodano animację aktywnych RJ; poprawki	2022-10-11 22:16:46 +02:00
Spythere	ceffd8e675	Bump wersji	2022-10-11 18:36:49 +02:00
Spythere	5aa53521f7	Ulepszono informacje o szlakach i statusach rozkładów scenerii	2022-10-11 18:33:53 +02:00
Spythere	d8b559694b	Upgrade paczek	2022-10-10 15:57:04 +02:00
Spythere	c82ac04a91	Poprawka tłumaczenia	2022-10-08 20:42:06 +02:00
Spythere	284bdcbf2a	Aktualizacja vue-tsc	2022-10-08 20:41:54 +02:00
Spythere	7f4df98349	Bump wersji	2022-10-02 00:56:27 +02:00
Spythere	aecbcf62df	Aktualizacja odnośnika do changelogu	2022-10-02 00:54:05 +02:00
Spythere	2a817365a6	Tłumaczenie statystyk maszynistów	2022-10-02 00:40:10 +02:00
Spythere	ecf3a00cab	Statystyki maszynistów	2022-10-01 15:55:10 +02:00
Spythere	beb2f3c0d4	Tłumaczenie	2022-10-01 13:16:40 +02:00
Spythere	a65b09981b	Poprawki responsywności	2022-09-30 14:56:49 +02:00
Spythere	4ec544e8a9	Dodano informację o timeoucie SWDRa	2022-09-30 00:00:36 +02:00
Spythere	7e108c5183	Bump wersji	2022-09-29 19:41:55 +02:00
Spythere	72361b157e	Tłumaczenie PL	2022-09-29 19:41:26 +02:00
Spythere	1cc4d76e4d	Poprawki filtrów	2022-09-29 19:40:15 +02:00
Spythere	846d4d0547	Filtry scenerii	2022-09-29 19:27:54 +02:00
Spythere	751cadd218	Poprawki stylistyczne	2022-09-28 16:36:26 +02:00
Spythere	3b44adff44	Poprawki responsywności	2022-09-27 19:36:34 +02:00
Spythere	29a02dd98f	Poprawki responsywności; dodano wyszukiwanie scenerii	2022-09-27 18:58:46 +02:00
Spythere	c5e68c4d03	Bump wersji	2022-09-27 14:52:47 +02:00
Spythere	95f7c2a4d9	Poprawki	2022-09-27 14:52:24 +02:00
Spythere	84412822ff	Zmiana hostingu API	2022-09-26 00:31:55 +02:00
Spythere	42bb056e66	Poprawki dostępności searchboxów	2022-09-25 23:30:37 +02:00
Spythere	053e9d2b6a	Update package-lock	2022-09-25 19:44:56 +02:00
Spythere	c729d75541	Poprawki dostępności (c.d.)	2022-09-23 23:01:09 +02:00
Spythere	a9b72d0b7a	Poprawki dostępności	2022-09-23 22:58:23 +02:00
Spythere	95a027f284	Filtrowanie po nicku autora RJ w dzienniku	2022-09-23 22:39:38 +02:00
Spythere	dbba83b28b	Dodano id pociągu jako parametr	2022-09-22 19:09:28 +02:00
Spythere	65abe550f5	Poprawki list dzienników	2022-09-22 17:16:10 +02:00
Spythere	531108c25a	Wygląd filtrów	2022-09-22 15:08:22 +02:00
Spythere	bcf750d451	Wywoływanie filtrów za pomocą klawisza F	2022-09-22 14:57:03 +02:00
Spythere	0a8bfe4c52	Poprawki; usunięto github workflows	2022-09-22 14:15:53 +02:00
Spythere	0f19bc767a	Poprawki wyglądu; cleanup kodu	2022-09-22 13:59:19 +02:00
Spythere	8eb0266874	Merge branch 'development'	2022-09-15 12:38:57 +02:00
Spythere	ae5b5ff965	Responsywność i ułożenie opcji filtrów	2022-09-15 12:38:36 +02:00
Spythere	3a0c4bc151	Aktualizacja 1.10.4 Aktualizacja Stacjownika do wersji 1.10.4	2022-09-11 14:06:59 +02:00
Spythere	4f5fcb3189	Bump wersji	2022-09-11 13:59:08 +02:00
Spythere	3a2978bbe3	Usprawniono działanie listy dziennika dyżurnych	2022-09-11 02:00:58 +02:00
Spythere	a81cc4559b	Poprawki w filtrach i ustawieniach dzienników	2022-09-10 22:49:56 +02:00
Spythere	065143c359	JournalTimetables: dodano resetowanie filtrów	2022-09-10 18:22:00 +02:00
Spythere	1661881127	Poprawki w stylach	2022-09-10 18:12:07 +02:00
Spythere	93aa889414	Cleanup kodu	2022-09-10 17:57:43 +02:00
Spythere	2a131ab1fb	Poprawiono tłumaczenie	2022-09-10 15:14:36 +02:00
Spythere	387f42985a	Poprawiono filtrowanie datą	2022-09-10 15:10:39 +02:00
Spythere	6c83ce90bf	Dodano filtrowanie po dacie w opcjach	2022-09-09 00:23:18 +02:00
Spythere	3d519e874f	Opcje filtrów: tłumaczenia	2022-09-08 23:24:58 +02:00
Spythere	99cdb3442a	Opcje filtrów: animacja i poprawki	2022-09-08 23:15:54 +02:00
Spythere	a6c0fe86c8	Poprawki filtrów	2022-09-08 12:47:30 +02:00
Spythere	828421efe0	Filtry aktywnych pociągów	2022-09-08 12:21:27 +02:00
Spythere	21bacb1c95	Filtry dzienników; poprawki stylistyczne	2022-09-07 20:37:58 +02:00
Spythere	0d9a3f4b4f	Rozszerzone opcje filtrów dzienników	2022-09-06 12:44:18 +02:00
Spythere	76b8534d63	Poprawki responsywności selectboxów	2022-09-06 00:26:49 +02:00
Spythere	0821fd708e	Stylistyka informacji o składzie	2022-09-05 23:44:36 +02:00
Spythere	b0a9939446	Cleanup kodu; poprawki funkcjonalności	2022-09-05 23:32:27 +02:00
Spythere	2a64b8f10d	Dodatkowe informacje i poprawki wyglądu dziennika RJ	2022-09-04 17:12:44 +02:00
Spythere	dc1c457ea4	Fix: wykrywanie scrolla dzienników	2022-09-04 16:46:44 +02:00
Spythere	1f95bc5230	Tłumaczenie i poprawki do wersji 1.10.3	2022-09-04 01:27:12 +02:00
Spythere	5a06920e5b	Dodano tłumaczenie; poprawki	2022-09-04 01:25:27 +02:00
Spythere	ee0d9e7ed4	Wersja 1.10.3 Wersja 1.10.3	2022-09-04 01:14:24 +02:00
Spythere	30ad3ad4f2	Bump wersji	2022-09-04 01:12:04 +02:00
Spythere	c2bd5a8a1b	Poprawiono mobilny scroll bar	2022-09-04 01:10:56 +02:00
Spythere	7101d0972d	Przywrócono ikonę pociągu mobilnego widoku aktywnych RJ	2022-09-04 01:06:30 +02:00
Spythere	82bbfcdf70	Dokończenie widoku dziennika RJ	2022-09-04 01:04:04 +02:00
Spythere	b90ac6c09e	Zmiany w wyglądzie i funkcjonalnościach dziennika RJ	2022-09-03 00:11:42 +02:00
Spythere	76d0ff88f1	Zmiany w designie dziennika rozkładów jazdy	2022-09-01 01:56:16 +02:00
Spythere	951afcedeb	Bump wersji	2022-08-29 19:12:56 +02:00
Spythere	96de3f0dcc	Scroll lock przy otwartym modalu	2022-08-29 19:12:19 +02:00
Spythere	03950eef66	Bump wersji	2022-08-27 20:19:03 +02:00
Spythere	6dd8cb2dad	Cleanup c.d.	2022-08-27 14:05:35 +02:00
Spythere	aae51d4139	Hotfix	2022-08-27 14:04:02 +02:00
Spythere	9994a541b1	Cleanup	2022-08-27 14:02:42 +02:00
Spythere	bc3a603ba2	Poprawiono sortowanie stacji	2022-08-27 13:44:04 +02:00
Spythere	7857377cab	Merge branch 'development'	2022-08-09 00:01:40 +02:00
Spythere	0034f43be4	Fix: zła ikonka przy nieznanej scenerii	2022-08-08 23:59:55 +02:00
Spythere	c09fc81886	Aktualizacja 1.10.0 Aktualizacja aplikacji do wersji 1.10.0	2022-07-24 00:00:18 +02:00
Spythere	30f72d518d	Bump wersji 1.10.0 (prod)	2022-07-23 23:46:17 +02:00
Spythere	9b86e07152	Poprawki responsywności	2022-07-23 23:45:53 +02:00
Spythere	4e0fb5dc01	Fix reaktywności SRJP	2022-07-19 23:32:16 +02:00
Spythere	a392991030	PWA: wyłączono funkcję	2022-07-19 22:56:27 +02:00
Spythere	ff7ca27fe6	Dodano informację o offline	2022-07-19 14:45:46 +02:00
Spythere	94cd7aaa60	Bump wersji (dev)	2022-07-16 23:21:31 +02:00
Spythere	843289d8d7	Poprawki URL	2022-07-16 17:21:08 +02:00
Spythere	66cae68e19	Update package lock	2022-07-16 17:12:32 +02:00
Spythere	b38e50396a	package lock, gitignore	2022-07-16 17:10:25 +02:00
Spythere	7888e59117	Poprawki po migracji	2022-07-16 17:07:57 +02:00
Spythere	46e700583d	Migracja na Vite	2022-07-16 16:12:31 +02:00
Spythere	fc56c38c45	Poprawki stylistyczne modalu aktualizacji; link do najnowszego wydania w stopce	2022-07-16 12:41:24 +02:00
Spythere	9594e2c21a	Bump wersji	2022-07-16 00:56:41 +02:00
Spythere	a8bab5283b	Modal aktualizacji aplikacji	2022-07-16 00:56:25 +02:00
Spythere	1cc799706c	Globalny TrainModal; animacja przejścia	2022-07-16 00:27:37 +02:00
Spythere	5ee8f72652	Poprawka semantyki wersji	2022-07-15 15:36:06 +02:00
Spythere	942f883b91	Dodano modal aktualizacji	2022-07-15 15:32:12 +02:00
Spythere	54b47d44e5	PWA: odświeżanie przy wykryciu aktualizacji	2022-07-14 21:25:17 +02:00
Spythere	f9aaf21f7a	Test PWA	2022-07-14 20:52:53 +02:00
Spythere	d79705ca5c	Test cachingu scenerii	2022-07-14 20:44:43 +02:00
Spythere	55c64d5f0a	Caching service workera	2022-07-14 17:50:17 +02:00
Spythere	4ca1c7bb9c	Dodano wsparcie PWA	2022-07-14 14:57:44 +02:00
Spythere	abc8fda98e	Poprawka kolorów	2022-07-14 14:13:55 +02:00
Spythere	aaec23d210	Poprawiono wygląd modalu RJ	2022-07-13 16:34:38 +02:00
Spythere	0af7b68138	Poprawki w widoku RJ	2022-07-12 18:45:18 +02:00
Spythere	ae24eaf8e4	Poprawka w info o pozycji pociągu	2022-07-12 13:37:18 +02:00
Spythere	f73a07daee	Poprawiono wygląd posterunków SBL w widoku RJ	2022-07-12 13:25:16 +02:00
Spythere	89f5bf2e95	Dodano górny pasek z informacjami dla widoku RJ	2022-07-12 13:15:49 +02:00
Spythere	8137c1ff95	Widok pociągów: nowe odznaki statusów	2022-07-12 12:06:27 +02:00
Spythere	4b0d9b887e	Historia dr scenerii: dodano odnośniki do dziennika	2022-07-12 11:20:19 +02:00
Spythere	506064cf9a	Sceneria: przeniesiono link do wątku forum	2022-07-12 11:14:56 +02:00
Spythere	825e25434a	Poprawki tłumaczenia	2022-07-12 11:02:49 +02:00
Spythere	32c601d50a	Historia RJ scenerii: dodano odnośniki do dziennika	2022-07-12 10:59:29 +02:00
Spythere	b88a96237e	Dziennik: dodano filtrowanie po ID rozkładu	2022-07-12 10:54:48 +02:00
Spythere	6c724440d7	Bump wersji: 1.9.9 -> 1.9.10	2022-07-11 18:11:26 +02:00
Spythere	71016e63bb	Bump wersji: 1.9.9 -> 1.9.9.1	2022-07-11 18:06:07 +02:00
Spythere	fb85352ce3	Modal widoku pociągu	2022-07-11 18:04:07 +02:00
				`@@ -0,0 +1 @@`
				<?xml version="1.0" ?><svg enable-background="new 0 0 32 32" id="Glyph" version="1.1" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M27.414,24.586l-5.077-5.077C23.386,17.928,24,16.035,24,14c0-5.514-4.486-10-10-10S4,8.486,4,14 s4.486,10,10,10c2.035,0,3.928-0.614,5.509-1.663l5.077,5.077c0.78,0.781,2.048,0.781,2.828,0 C28.195,26.633,28.195,25.367,27.414,24.586z M7,14c0-3.86,3.14-7,7-7s7,3.14,7,7s-3.14,7-7,7S7,17.86,7,14z" id="XMLID_223_" fill="white" /></svg>