Merge pull request #152 from Spythere/development-old

Migration info for the old version of the app

.github/workflows/github-discord-releases.yml

@@ -1,17 +0,0 @@
-on:
-  release:
-    types: [published]
-
-jobs:
-  github-releases-to-discord:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Github Releases To Discord
-        uses: SethCohen/github-releases-to-discord@v1.13.1
-        with:
-          webhook_url: ${{ secrets.WEBHOOK_URL }}
-          color: "15844367"
-          footer_title: "Changelog - Stacjownik"
-          footer_timestamp: true

.github/workflows/vps-deploy.yml

@@ -1,23 +0,0 @@
-name: Build & Deploy to VPS
-
-on:
-  push:
-    branches:
-      - main
-
-env:
-  PROJECT_NAME: stacjownik-td2
-
-jobs:
-  build_and_deploy:
-    runs-on: ubuntu-latest
-    steps:    
-      - uses: actions/checkout@v3
-      - name: Build the app
-        run: yarn && yarn build
-      - name: Setup SSH key for connection with the server
-        run: |
-            mkdir -p ~/.ssh
-            echo "${{ secrets.VPS_SSH_PRIVATE_KEY }}" > ~/.ssh/id_rsa && chmod 600 ~/.ssh/id_rsa
-      - name: Send new files
-        run: rsync -avP -e "ssh -o StrictHostKeyChecking=no -i ~/.ssh/id_rsa -p 2022" ./dist/ ${{ secrets.VPS_USER }}@${{ secrets.VPS_HOST }}:/var/www/$PROJECT_NAME --delete

.gitignore

@@ -15,12 +15,13 @@ pnpm-debug.log*
 
 # Editor directories and files
 .idea
+.vscode
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
-.vscode/settings.json
+node_modules
 
 *.log
 

.prettierrc.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/prettierrc",
-  "tabWidth": 2,
-  "singleQuote": true,
-  "printWidth": 100,
-  "trailingComma": "none"
-}

.vscode/extensions.json

@@ -1,3 +0,0 @@
-{
-  "recommendations": ["Vue.volar", "esbenp.prettier-vscode"]
-}

README.md

@@ -1,4 +1,4 @@
-# [STACJOWNIK TD2](https://stacjownik-td2.spythere.eu)
+# [STACJOWNIK TD2](https://stacjownik-td2.web.app)
 
 ODŚWIEŻANA LISTA SCENERII I SKŁADÓW ONLINE DLA [SYMULATORA TRAIN DRIVER 2](https://td2.info.pl)
 

api-mock/index.js

@@ -15,8 +15,8 @@ app.get('/api/getSceneries', (_, res) => {
   res.sendFile(path.join(cwd(), 'endpoints', 'getSceneries.json'));
 });
 
-app.get('/api/getVehiclesData', (_, res) => {
+app.get('/api/getVehicles', (_, res) => {
-  res.sendFile(path.join(cwd(), 'endpoints', 'getVehiclesData.json'));
+  res.sendFile(path.join(cwd(), 'endpoints', 'getVehicles.json'));
 });
 
 app.get('/api/getDonators', (_, res) => {

env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

index.html

@@ -20,7 +20,7 @@
     <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
     <meta name="msapplication-TileColor" content="#da532c" />
 
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" href="favicon.ico" />
 
     <link rel="stylesheet" href="/fa/css/fontawesome.css" />
     <link rel="stylesheet" href="/fa/css/brands.css" />
@@ -28,13 +28,7 @@
     <link rel="stylesheet" href="/fa/css/solid.css" />
 
     <!-- Preloads -->
-    <link
+    <link rel="preload" href="fonts/Quicksand-Bold.woff2" as="font" type="font/woff2" crossorigin />
-      rel="preload"
-      href="/fonts/Quicksand-Bold.woff2"
-      as="font"
-      type="font/woff2"
-      crossorigin
-    />
 
     <link
       rel="preload"
@@ -68,28 +62,28 @@
       crossorigin
     />
 
+    <link rel="preload" as="image" href="/images/icon-pl.svg" />
     <link rel="preload" as="image" href="/images/stacjownik-header-logo.svg" />
     <link rel="preload" as="image" href="/images/icon-dispatcher.svg" />
     <link rel="preload" as="image" href="/images/icon-train.svg" />
+    <link rel="preload" as="image" href="/images/icon-arrow-asc.svg" />
     <link rel="preload" as="image" href="/images/icon-arrow-desc.svg" />
-    <link rel="preload" as="image" href="/images/icon-pojazdownik.svg" />
-    <link rel="preload" as="image" href="/images/icon-stats.svg" />
     <link rel="preload" as="image" href="/images/icon-filter2.svg" />
+    <link rel="preload" as="image" href="/images/icon-stats.svg" />
+    <link rel="preload" as="image" href="/images/icon-gnr.svg" />
+    <link rel="preload" as="image" href="/images/icon-pojazdownik.svg" />
+    <link rel="preload" as="image" href="/images/icon-diamond.svg" />
     <link rel="preload" as="image" href="/images/icon-user.svg" />
     <link rel="preload" as="image" href="/images/icon-like.svg" />
-    <link rel="preload" as="image" href="/images/icon-gnr.svg" />
     <link rel="preload" as="image" href="/images/icon-spawn.svg" />
     <link rel="preload" as="image" href="/images/icon-timetableAll.svg" />
     <link rel="preload" as="image" href="/images/icon-timetableUnconfirmed.svg" />
     <link rel="preload" as="image" href="/images/icon-timetableConfirmed.svg" />
     <link rel="preload" as="image" href="/images/icon-discord.png" />
 
-    <link rel="prefetch" as="image" href="/images/icon-arrow-asc.svg" />
-    <link rel="prefetch" as="image" href="/images/icon-diamond.svg" />
-
     <!-- Static OpenGraph meta -->
     <meta name="description" content="Pomocnik maszynisty i dyżurnego symulatora Train Driver 2" />
-    <meta property="og:url" content="https://stacjownik-td2.spythere.eu/" />
+    <meta property="og:url" content="https://stacjownik-td2.web.app/" />
     <meta property="og:type" content="website" />
     <meta property="og:title" content="Stacjownik" />
     <meta

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stacjownik",
-  "version": "1.34.0",
+  "version": "1.30.7",
   "private": true,
   "type": "module",
   "scripts": {
@@ -26,12 +26,12 @@
     "vue-router": "^4.4.0"
   },
   "devDependencies": {
-    "@tsconfig/node24": "^24.0.4",
+    "@types/node": "^24.3.1",
-    "@types/node": "^24.12.0",
     "@types/showdown": "^2.0.6",
     "@vite-pwa/assets-generator": "^1.0.0",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vue/tsconfig": "^0.8.1",
+    "axios": "^1.9.0",
     "prettier": "^3.3.3",
     "typescript": "^5.5.4",
     "vite": "^7.1.4",

public/images/flags/cz.svg

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-cz" viewBox="0 0 640 480">
-  <path fill="#fff" d="M0 0h640v240H0z"/>
-  <path fill="#d7141a" d="M0 240h640v240H0z"/>
-  <path fill="#11457e" d="M360 240 0 0v480z"/>
-</svg>

public/images/flags/de.svg

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-de" viewBox="0 0 640 480">
-  <path fill="#fc0" d="M0 320h640v160H0z"/>
-  <path fill="#000001" d="M0 0h640v160H0z"/>
-  <path fill="red" d="M0 160h640v160H0z"/>
-</svg>

public/images/flags/it.svg

@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-it" viewBox="0 0 640 480">
-  <g fill-rule="evenodd" stroke-width="1pt">
-    <path fill="#fff" d="M0 0h640v480H0z"/>
-    <path fill="#009246" d="M0 0h213.3v480H0z"/>
-    <path fill="#ce2b37" d="M426.7 0H640v480H426.7z"/>
-  </g>
-</svg>

public/images/flags/ru.svg

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-ru" viewBox="0 0 640 480">
-  <path fill="#fff" d="M0 0h640v160H0z"/>
-  <path fill="#0039a6" d="M0 160h640v160H0z"/>
-  <path fill="#d52b1e" d="M0 320h640v160H0z"/>
-</svg>

public/images/flags/se.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-se" viewBox="0 0 640 480">
-  <path fill="#005293" d="M0 0h640v480H0z"/>
-  <path fill="#fecb00" d="M176 0v192H0v96h176v192h96V288h368v-96H272V0z"/>
-</svg>

public/images/flags/sk.svg

@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-sk" viewBox="0 0 640 480">
-  <path fill="#ee1c25" d="M0 0h640v480H0z"/>
-  <path fill="#0b4ea2" d="M0 0h640v320H0z"/>
-  <path fill="#fff" d="M0 0h640v160H0z"/>
-  <path fill="#fff" d="M233 370.8c-43-20.7-104.6-61.9-104.6-143.2 0-81.4 4-118.4 4-118.4h201.3s3.9 37 3.9 118.4S276 350 233 370.8"/>
-  <path fill="#ee1c25" d="M233 360c-39.5-19-96-56.8-96-131.4s3.6-108.6 3.6-108.6h184.8s3.5 34 3.5 108.6C329 303.3 272.5 341 233 360"/>
-  <path fill="#fff" d="M241.4 209c10.7.2 31.6.6 50.1-5.6 0 0-.4 6.7-.4 14.4s.5 14.4.5 14.4c-17-5.7-38.1-5.8-50.2-5.7v41.2h-16.8v-41.2c-12-.1-33.1 0-50.1 5.7 0 0 .5-6.7.5-14.4s-.5-14.4-.5-14.4c18.5 6.2 39.4 5.8 50 5.6v-25.9c-9.7 0-23.7.4-39.6 5.7 0 0 .5-6.6.5-14.4 0-7.7-.5-14.4-.5-14.4 15.9 5.3 29.9 5.8 39.6 5.7-.5-16.4-5.3-37-5.3-37s9.9.7 13.8.7 13.8-.7 13.8-.7-4.8 20.6-5.3 37c9.7.1 23.7-.4 39.6-5.7 0 0-.5 6.7-.5 14.4s.5 14.4.5 14.4a119 119 0 0 0-39.7-5.7v26z"/>
-  <path fill="#0b4ea2" d="M233 263.3c-19.9 0-30.5 27.5-30.5 27.5s-6-13-22.2-13c-11 0-19 9.7-24.2 18.8 20 31.7 51.9 51.3 76.9 63.4 25-12 57-31.7 76.9-63.4-5.2-9-13.2-18.8-24.2-18.8-16.2 0-22.2 13-22.2 13S253 263.3 233 263.3"/>
-</svg>

public/images/flags/ua.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-ua" viewBox="0 0 640 480">
-  <g fill-rule="evenodd" stroke-width="1pt">
-    <path fill="gold" d="M0 0h640v480H0z"/>
-    <path fill="#0057b8" d="M0 0h640v240H0z"/>
-  </g>
-</svg>

src/App.vue

@@ -1,196 +1,15 @@
 <template>
   <div class="app_container">
-    <UpdateCard
+    <AppNewDomainInfo />
-      :is-update-card-open="isUpdateCardOpen"
-      @toggle-card="() => (isUpdateCardOpen = false)"
-    />
-
-    <AppWelcomeCard :is-card-open="isWelcomeCardOpen" @toggle-card="closeWelcomeCard" />
-
-    <Tooltip />
-
-    <AppHeader />
-
-    <main class="app_main">
-      <router-view v-slot="{ Component }">
-        <keep-alive>
-          <component :is="Component" :key="$route.name" />
-        </keep-alive>
-      </router-view>
-    </main>
-
-    <AppFooter
-      :version="VERSION"
-      :is-on-production-host="isOnProductionHost"
-      :is-update-card-open="isUpdateCardOpen"
-      @open-update-card="() => (isUpdateCardOpen = true)"
-    />
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import AppNewDomainInfo from './components/App/AppNewDomainInfo.vue';
-
-import { version } from '../package.json';
-import { Status } from './typings/common';
-import { useMainStore } from './store/mainStore';
-import { useApiStore } from './store/apiStore';
-import { useTooltipStore } from './store/tooltipStore';
-
-import Clock from './components/App/Clock.vue';
-import StatusIndicator from './components/App/StatusIndicator.vue';
-import AppHeader from './components/App/AppHeader.vue';
-import Tooltip from './components/Tooltip/Tooltip.vue';
-import UpdateCard from './components/App/UpdateCard.vue';
-
-import StorageManager from './managers/storageManager';
-import AppFooter from './components/App/AppFooter.vue';
-import AppWelcomeCard from './components/App/AppWelcomeCard.vue';
-
-const STORAGE_VERSION_KEY = 'app_version';
-const WELCOME_CARD_SEEN_KEY = 'welcome_card_seen';
-
-export default defineComponent({
-  components: {
-    Clock,
-    StatusIndicator,
-    AppHeader,
-    AppFooter,
-    UpdateCard,
-    AppWelcomeCard,
-    Tooltip
-  },
-
-  data: () => ({
-    VERSION: version,
-    store: useMainStore(),
-    apiStore: useApiStore(),
-    tooltipStore: useTooltipStore(),
-
-    isUpdateCardOpen: false,
-    isWelcomeCardOpen: false,
-
-    isOnProductionHost: /(stacjownik-td2)(\.web\.app|\.spythere\.eu)/.test(location.hostname)
-  }),
-
-  created() {
-    this.init();
-  },
-
-  async mounted() {
-    window.addEventListener('mousemove', (e: MouseEvent) => this.tooltipStore.handle(e));
-    window.addEventListener('mousedown', () => this.tooltipStore.hide());
-  },
-
-  methods: {
-    init() {
-      if (!this.isOnProductionHost) document.title = 'Stacjownik Dev';
-
-      this.loadLang();
-      this.setupOfflineHandling();
-      this.checkAppVersion();
-      this.handleQueries();
-
-      this.apiStore.setupAPIData();
-    },
-
-    handleQueries() {
-      const query = new URLSearchParams(window.location.search);
-
-      if (query.get('welcomeCard') == '1') {
-        this.isWelcomeCardOpen = true;
-      }
-    },
-
-    async checkAppVersion() {
-      const isWelcomeCardSeen = StorageManager.getBooleanValue(WELCOME_CARD_SEEN_KEY);
-      const storageVersion = StorageManager.getStringValue(STORAGE_VERSION_KEY);
-
-      if (isWelcomeCardSeen == false && storageVersion == '') {
-        setTimeout(() => {
-          this.isWelcomeCardOpen = true;
-        }, 1500);
-      }
-
-      try {
-        const response = await fetch(
-          'https://api.github.com/repos/Spythere/stacjownik/releases/latest'
-        );
-
-        if (!response.ok) {
-          throw new Error('Failed to fetch release data from repository!');
-        }
-
-        const releaseData = await response.json();
-
-        this.store.appUpdate = {
-          version,
-          changelog: releaseData.body,
-          releaseURL: releaseData.html_url
-        };
-
-        this.isUpdateCardOpen =
-          (storageVersion != '' && storageVersion != version && this.isOnProductionHost) ||
-          import.meta.env.VITE_UPDATE_TEST === 'test';
-      } catch (error) {
-        console.error(error);
-      }
-
-      StorageManager.setStringValue(STORAGE_VERSION_KEY, version);
-    },
-
-    setupOfflineHandling() {
-      this.store.isOffline = !window.navigator.onLine;
-
-      if (this.store.isOffline) this.handleOfflineMode();
-
-      window.addEventListener('offline', this.handleOfflineMode);
-      window.addEventListener('online', this.handleOnlineMode);
-    },
-
-    handleOfflineMode() {
-      this.store.isOffline = true;
-
-      this.apiStore.activeData = undefined;
-      this.apiStore.dataStatuses.connection = Status.Data.Offline;
-    },
-
-    handleOnlineMode() {
-      this.store.isOffline = false;
-      this.apiStore.dataStatuses.connection = Status.Data.Loading;
-
-      this.apiStore.connectToAPI();
-    },
-
-    loadLang() {
-      const storageLang = StorageManager.getStringValue('lang');
-
-      if (storageLang) {
-        this.store.changeLocale(storageLang);
-        return;
-      }
-
-      if (!window.navigator.language) return;
-
-      const naviLanguage = window.navigator.language.toString();
-
-      if (!naviLanguage.startsWith('pl')) {
-        this.store.changeLocale('en');
-        return;
-      }
-    },
-
-    closeWelcomeCard() {
-      this.isWelcomeCardOpen = false;
-      StorageManager.setBooleanValue(WELCOME_CARD_SEEN_KEY, true);
-    }
-  }
-});
 </script>
 
 <style lang="scss">
 @use './styles/animations';
-@use './styles/global';
 
 // APP
 #app {
@@ -213,38 +32,4 @@ export default defineComponent({
 .app_main {
   padding: 0 0.5em;
 }
-
-.warning {
-  background-color: firebrick;
-  text-align: center;
-  padding: 0.5em 0.4em;
-  max-width: 1100px;
-  margin: 0 auto;
-
-  border-radius: 0 0 1em 1em;
-}
-
-// FOOTER
-.app_footer {
-  max-width: 100%;
-  padding: 0.5em;
-
-  button {
-    display: inline-block;
-    padding: 0.1em;
-  }
-
-  img {
-    width: 1.1em;
-    vertical-align: text-bottom;
-  }
-
-  z-index: 10;
-
-  background: #111;
-  color: white;
-
-  text-align: center;
-  vertical-align: middle;
-}
 </style>

src/components/App/AppFooter.vue

@@ -7,6 +7,13 @@
       v{{ version }}{{ isOnProductionHost ? '' : 'dev' }}
     </button>
 
+    <br />
+    <a href="https://discord.gg/x2mpNN3svk">
+      <img src="/images/icon-discord.png" alt="discord logo icon" />&nbsp;<b class="text--discord">
+        {{ $t('footer.discord') }}
+      </b>
+    </a>
+
     <div style="display: none">&int; ukryta taktyczna całka do programowania w HTMLu</div>
   </footer>
 </template>

src/components/App/AppNewDomainInfo.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="app-domain-info">
+    <div>
+      <img src="/images/icon-loading.svg" alt="loading" height="200" />
+      <h1><span class="text--primary">Aplikacja</span> została przeniesiona na nową domenę!</h1>
+      <h1><span class="text--primary">This app</span> has been moved to a new domain!</h1>
+
+      <div style="margin-top: 1em">
+        <a :href="newLink">Nowy link dla obecnego adresu / New link to the current address</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+const newLink = computed(() => {
+  return 'https://stacjownik-td2.spythere.eu' + location.pathname + location.search;
+});
+</script>
+
+<style lang="scss" scoped>
+.app-domain-info {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  min-height: 100vh;
+  color: white;
+}
+
+a {
+  font-size: 1.35em;
+  text-decoration: underline;
+}
+</style>

src/components/App/AppWelcomeCard.vue

@@ -5,11 +5,11 @@
 
       <div class="language-select">
         <button :data-active="$i18n.locale == 'pl'" @click="store.changeLocale('pl')">
-          <FlagIcon :language-id="0" width="2.5em" />
+          <img src="/images/icon-pl.svg" alt="" width="45" />
         </button>
 
         <button :data-active="$i18n.locale == 'en'" @click="store.changeLocale('en')">
-          <FlagIcon :language-id="1" width="2.5em" />
+          <img src="/images/icon-en.svg" alt="" width="45" />
         </button>
       </div>
 
@@ -63,19 +63,19 @@
         </b>
 
         <div class="apps-grid">
-          <a class="app-item" href="https://pojazdownik-td2.spythere.eu/" target="_blank">
+          <a class="app-item" href="https://pojazdownik-td2.web.app/" target="_blank">
             <img src="/images/icon-pojazdownik.svg" alt="pojazdownik app logo" />
             <h3 class="text--primary">Pojazdownik</h3>
             <p>{{ $t('welcome.pojazdownik-desc') }}</p>
           </a>
 
-          <a class="app-item" href="https://generator-td2.spythere.eu/" target="_blank">
+          <a class="app-item" href="https://generator-td2.web.app/" target="_blank">
             <img src="/images/icon-gnr.svg" alt="generator app logo" />
             <h3 class="text--primary">GeneraTOR</h3>
             <p>{{ $t('welcome.generator-desc') }}</p>
           </a>
 
-          <a class="app-item" href="https://srjp-td2.spythere.eu/" target="_blank">
+          <a class="app-item" href="https://srjp-td2.web.app/" target="_blank">
             <img src="/images/icon-srjp.svg" alt="srjp app logo" />
             <h3 class="text--primary">Rozkładownik</h3>
             <p>{{ $t('welcome.srjp-desc') }}</p>
@@ -116,7 +116,6 @@
 <script setup lang="ts">
 import Card from '../Global/Card.vue';
 import { useMainStore } from '../../store/mainStore';
-import FlagIcon from '../Global/FlagIcon.vue';
 
 const store = useMainStore();
 
@@ -158,7 +157,7 @@ a.link {
   justify-content: center;
   margin: 0.5em 0;
 
-  button[data-active='false'] ::v-deep(img) {
+  button[data-active='false'] img {
     opacity: 0.5;
   }
 }

src/components/App/MigrateInfoCard.vue

@@ -0,0 +1,94 @@
+<template>
+  <Card :is-open="isOpen" @toggle-card="toggleCard">
+    <div class="body-content">
+      <div class="content-top">
+        <img src="/images/icon-loading.svg" alt="loading" height="125" />
+        <h1>{{ t('migrate-info.header-text') }}</h1>
+      </div>
+
+      <div>
+        <p v-html="t('migrate-info.paragraph-1-html')"></p>
+
+        <p>
+          <a class="new-link" href="https://stacjownik-td2.spythere.eu/" target="_blank">
+            {{ t('migrate-info.paragraph-2-link-text') }}
+          </a>
+        </p>
+
+        <p>
+          {{ t('migrate-info.paragraph-3-text') }}
+        </p>
+
+        <p class="info-bottom" v-html="t('migrate-info.paragraph-4-html')"></p>
+      </div>
+
+      <div class="content-actions">
+        <button class="btn btn--action" @click="toggleCard">PRZYJĄŁEM!</button>
+      </div>
+    </div>
+  </Card>
+</template>
+
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
+import Card from '../Global/Card.vue';
+
+const { t } = useI18n();
+
+defineProps({
+  isOpen: {
+    type: Boolean,
+    required: true
+  }
+});
+
+const emit = defineEmits(['toggleCard']);
+
+function toggleCard() {
+  emit('toggleCard');
+}
+</script>
+
+<style lang="scss" scoped>
+.body-content {
+  max-width: 800px;
+  min-height: 500px;
+  padding: 1em 0.5em;
+
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  gap: 0.5em;
+
+  text-align: center;
+  font-size: 1.1em;
+}
+
+p {
+  padding: 0.5em 0;
+}
+
+a.new-link {
+  font-size: 1.2em;
+  color: var(--clr-primary);
+  color: transparent;
+
+  background: var(--clr-primary);
+  background: linear-gradient(90deg, var(--clr-primary), #ffffff);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+
+  text-shadow: var(--clr-primary) 0 0 10px;
+}
+
+.info-bottom {
+  font-size: 0.9em;
+  color: #ccc;
+}
+
+.content-actions {
+  display: flex;
+  justify-content: center;
+  font-size: 1.2em;
+}
+</style>

src/components/App/UpdateCard.vue

@@ -1,7 +1,7 @@
 <template>
   <Card :is-open="isUpdateCardOpen" @toggle-card="toggleCard(false)">
-    <div class="content" tabindex="0" ref="content">
+    <div class="content">
-      <h1 class="content-title"><i class="fa-solid fa-wand-sparkles"></i> {{ $t('update.title') }}</h1>
+      <h1 style="margin-bottom: 0.5em">🚀 {{ $t('update.title') }}</h1>
 
       <div class="features-body" v-if="htmlChangelog != ''" v-html="htmlChangelog"></div>
       <div class="no-features" v-else>{{ $t('update.no-data') }}</div>
@@ -13,14 +13,7 @@
       <p class="bottom-info">
         {{ $t('update.info-1') }}
         <br />
-
+        <span v-html="$t('update.info-2')"></span>
-        <i18n-t keypath="update.info-2">
-          <template v-slot:link>
-            <a href="https://github.com/Spythere/stacjownik/releases" target="_blank">{{
-              $t('update.info-2-link-text')
-            }}</a>
-          </template>
-        </i18n-t>
       </p>
     </div>
   </Card>
@@ -58,7 +51,7 @@ export default defineComponent({
   watch: {
     isUpdateCardOpen(val: boolean) {
       this.$nextTick(() => {
-        if (val) (this.$refs['content'] as HTMLElement).focus();
+        if (val) (this.$refs['confirm-btn'] as HTMLElement).focus();
       });
     }
   },
@@ -86,13 +79,13 @@ export default defineComponent({
 }
 
 ::v-deep(h2) {
-  padding: 0.5em 0;
+  padding: 0.25em 0;
   border-bottom: 1px solid #aaa;
 }
 
 ::v-deep(ul) {
-  list-style: disc;
+  list-style: initial;
-  padding: 0.5em 1.5em;
+  padding: 1em;
   line-height: 1.5em;
 }
 
@@ -107,25 +100,12 @@ export default defineComponent({
   max-width: 700px;
 }
 
-.content-title {
-  color: var(--clr-primary);
-  color: transparent;
-
-  background: var(--clr-primary);
-  background: linear-gradient(90deg, var(--clr-primary) 30%, #ffffff 90%);
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-
-  text-shadow: var(--clr-primary) 0 0 10px;
-}
-
 .no-features {
   text-align: center;
 }
 
 button {
-  margin: 0.5em auto;
+  margin: 0 auto;
   padding: 0.5em 0.75em;
   font-size: 1.1em;
 }
@@ -137,6 +117,5 @@ p.bottom-info {
 
 a {
   text-decoration: underline;
-  color: white;
 }
 </style>

src/components/DriverView/DriverTopActions.vue

@@ -1,41 +1,37 @@
 <template>
-  <div class="driver-top-actions">
+    <div class="driver-top-actions">
-    <div class="actions-container">
+        <div class="actions-container">
-      <div class="actions actions-left">
+            <div class="actions actions-left">
-        <button class="a-button btn--filled btn--image" @click="routerReturn">
+                <button class="a-button btn--filled btn--image" @click="routerReturn">
-          <img src="/images/icon-back.svg" alt="train icon" />
+                    <img src="/images/icon-back.svg" alt="train icon" />
-          <span>
+                    <span>
-            {{ t('trains.driver-return-link') }}
+                        {{ t('trains.driver-return-link') }}
-          </span>
+                    </span>
-        </button>
+                </button>
-      </div>
+            </div>
 
-      <div class="actions actions-right">
+            <div class="actions actions-right">
-        <a
+                <a class="a-button btn--filled btn--image" :href="`https://srjp-td2.web.app/?id=${chosenTrain.id}`"
-          class="a-button btn--filled btn--image"
+                    target="_blank">
-          :href="`https://srjp-td2.spythere.eu/?id=${chosenTrain.id}`"
+                    <span class="hidable">
-          target="_blank"
+                        {{ t('trains.driver-srjp-link') }}
-        >
+                    </span>
-          <span class="hidable">
-            {{ t('trains.driver-srjp-link') }}
-          </span>
 
-          <img src="/images/icon-srjp.svg" alt="srjp icon" />
+                    <img src="/images/icon-srjp.svg" alt="srjp icon" />
-        </a>
+                </a>
 
-        <router-link
+                <router-link :to="`/journal/timetables?search-driver=${chosenTrain.driverName}`"
-          :to="`/profile?playerId=${chosenTrain.driverId}`"
+                    class="a-button btn--filled btn--image">
-          class="a-button btn--filled btn--image"
+                    <span class="hidable">
-        >
+                        {{ t('trains.driver-journal-link') }}
-          <span class="hidable">
+                    </span>
-            {{ t('trains.driver-profile-link') }}
+
-          </span>
+                    <img src="/images/icon-train.svg" alt="train icon" />
+                </router-link>
+            </div>
+        </div>
 
-          <img src="/images/icon-user.svg" alt="user icon" />
-        </router-link>
-      </div>
     </div>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -48,40 +44,42 @@ const router = useRouter();
 const { t } = useI18n();
 
 defineProps({
-  chosenTrain: {
+    chosenTrain: {
-    type: Object as PropType<Train>,
+        type: Object as PropType<Train>,
-    required: true
+        required: true
-  }
+    }
 });
 
 function routerReturn() {
-  router.back();
+    router.back();
 }
 </script>
 
+
 <style lang="scss" scoped>
 @use '../../styles/responsive';
 
+
 .actions-container {
-  display: flex;
+    display: flex;
-  align-items: flex-end;
+    align-items: flex-end;
-  justify-content: space-between;
+    justify-content: space-between;
-  gap: 0.5em;
+    gap: 0.5em;
 }
 
 .actions {
-  display: flex;
+    display: flex;
-  gap: 0.5em;
+    gap: 0.5em;
 }
 
-.actions-container > .actions > .a-button {
+.actions-container>.actions>.a-button {
-  padding: 0.5em;
+    padding: 0.5em;
-  border-radius: 0.5em 0.5em 0 0;
+    border-radius: 0.5em 0.5em 0 0;
 }
 
 @include responsive.smallScreen {
-  span.hidable {
+    span.hidable {
-    display: none;
+        display: none;
-  }
+    }
 }
 </style>

src/components/DriverView/DriverTrainCard.vue

@@ -63,7 +63,7 @@
       </div>
     </transition>
 
-    <StockList :trainStockList="chosenTrain.stockList" :key="chosenTrain.id" :showPreviews="true" />
+    <StockList :trainStockList="chosenTrain.stockList" />
     <TrainSchedule :train="chosenTrain" />
   </div>
 </template>
@@ -205,7 +205,7 @@ const availableCategories = computed(() => {
   for (const stockName of stockList) {
     const [vehicleName, ...cargoList] = stockName.split(':');
 
-    const vehicleData = apiStore.vehiclesData?.vehicles.find((v) => v.name == vehicleName);
+    const vehicleData = apiStore.vehiclesData?.find((v) => v.name == vehicleName);
 
     if (!vehicleData) continue;
 

src/components/Global/ActionButton.vue

@@ -0,0 +1,23 @@
+<template>
+  <button class="action-btn btn--filled">
+    <div class="button_content">
+      <slot></slot>
+    </div>
+  </button>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({});
+</script>
+
+<style lang="scss">
+@use '../../styles/responsive';
+
+.button_content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/components/Global/FlagIcon.vue

@@ -1,43 +0,0 @@
-<template>
-  <div class="flag-icon">
-    <img
-      :src="languageFlagSrc"
-      alt="language flag"
-      :style="{
-        width: width
-      }"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { getLanguageNameById } from '../../utils/languageUtils';
-
-const props = defineProps({
-  languageId: {
-    type: Number,
-    required: true
-  },
-
-  width: {
-    type: String
-  }
-});
-
-const languageFlagSrc = computed(
-  () => `/images/flags/${getLanguageNameById(props.languageId)}.svg`
-);
-</script>
-
-<style scoped>
-.flag-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.flag-icon img {
-  vertical-align: middle;
-}
-</style>

src/components/Global/RegionDropdown.vue

@@ -160,7 +160,7 @@ ul.options {
 
   height: auto;
 
-  z-index: 150;
+  z-index: 100;
   width: 100%;
 
   font-size: 0.9em;

src/components/Global/StockList.vue

@@ -7,8 +7,6 @@
           :vehicle-string="vehicleString"
           :images="images"
           :image-fallbacks="imagesFallbacks"
-          :show-previews="showPreviews"
-          :thumbnail-size="thumbnailSize"
         />
       </li>
     </ul>
@@ -25,9 +23,7 @@ export default defineComponent({
 
   props: {
     trainStockList: { type: Array as PropType<string[]>, required: true },
-    tractionOnly: { type: Boolean, required: false },
+    tractionOnly: { type: Boolean, required: false }
-    showPreviews: { type: Boolean },
-    thumbnailSize: { type: Number }
   },
 
   data() {

src/components/Global/VehicleThumbnail.vue

@@ -9,10 +9,9 @@
       <img
         v-for="(thumbnailImage, imageIndex) in images"
         :src="`https://stacjownik.spythere.eu/static/thumbnails/${thumbnailImage}.png`"
-        :height="thumbnailSize || 70"
+        height="70"
         loading="lazy"
-        :data-crosshair-cursor="showPreviews"
+        data-tooltip-type="VehiclePreviewTooltip"
-        :data-tooltip-type="showPreviews ? 'VehiclePreviewTooltip' : ''"
         :data-tooltip-content="vehicleString"
         @error="onImageError($event, imageFallbacks[imageIndex])"
         @load="onImageLoad"
@@ -27,9 +26,7 @@ import { computed, PropType, Ref, ref } from 'vue';
 const props = defineProps({
   vehicleString: { type: String, required: true },
   images: { type: Object as PropType<string[]>, required: true },
-  imageFallbacks: { type: Object as PropType<string[]>, required: true },
+  imageFallbacks: { type: Object as PropType<string[]>, required: true }
-  showPreviews: { type: Boolean },
-  thumbnailSize: { type: Number }
 });
 
 const thumbRef = ref(null) as Ref<HTMLElement | null>;
@@ -68,7 +65,7 @@ function onImageLoad() {
   max-width: 90%;
   text-align: center;
   color: #aaa;
-  font-size: 0.8em;
+  font-size: 0.85em;
   margin: 0 auto;
   padding: 0.25em 0;
 }
@@ -77,10 +74,8 @@ function onImageLoad() {
   display: flex;
   justify-content: center;
   align-items: flex-end;
-  padding: 0.5em 0;
+  cursor: crosshair;
 
-  &[data-crosshair-cursor='true'] {
+  padding: 0.5em 0;
-    cursor: crosshair;
-  }
 }
 </style>

src/components/JournalView/JournalDailyStats.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="daily-stats">
-    <span :data-active="apiStore.dataStatuses.dailyStatsData">
+    <span :data-active="statsStatus">
       <h3>
         {{ $t('journal.daily-stats.title') }}
         <b class="text--primary">{{ new Date().toLocaleDateString($i18n.locale) }}</b>
@@ -8,11 +8,11 @@
 
       <hr class="header-separator" />
 
-      <b v-if="apiStore.dataStatuses.dailyStatsData == Status.Data.Loading">
+      <b v-if="statsStatus == Status.Data.Loading">
         {{ $t('app.loading') }}
       </b>
 
-      <b class="text--error" v-else-if="apiStore.dataStatuses.dailyStatsData == Status.Data.Error">
+      <b class="text--error" v-else-if="statsStatus == Status.Data.Error">
         {{ $t('journal.stats-error') }}
       </b>
 
@@ -20,48 +20,42 @@
         {{ $t('journal.daily-stats.info') }}
       </b>
 
-      <div v-else-if="apiStore.dailyStatsData">
+      <div v-else>
         <ul class="stats-list">
-          <li v-if="apiStore.dailyStatsData.totalTimetables">
+          <li v-if="stats.totalTimetables">
             <i18n-t keypath="journal.daily-stats.total">
               <template #count>
                 <b class="text--primary">
-                  {{ apiStore.dailyStatsData.totalTimetables }}
+                  {{ stats.totalTimetables }}
-                  {{ $t('journal.daily-stats.count', apiStore.dailyStatsData.totalTimetables) }}
+                  {{ $t('journal.daily-stats.count', stats.totalTimetables) }}
                 </b>
               </template>
 
               <template #distance>
-                <b class="text--primary">
+                <b class="text--primary"> {{ stats.distanceSum?.toFixed(2) }} km</b>
-                  {{ apiStore.dailyStatsData.distanceSum?.toFixed(2) }} km</b
-                >
               </template>
             </i18n-t>
           </li>
 
-          <li v-if="apiStore.dailyStatsData.maxTimetable">
+          <li v-if="stats.maxTimetable">
             <i18n-t keypath="journal.daily-stats.longest">
               <template #id>
-                <router-link
+                <router-link :to="`/journal/timetables?search-train=%23${stats.maxTimetable.id}`">
-                  :to="`/journal/timetables?search-train=%23${apiStore.dailyStatsData.maxTimetable.id}`"
+                  <b>{{ stats.maxTimetable.id }}</b>
-                >
-                  <b>{{ apiStore.dailyStatsData.maxTimetable.id }}</b>
                 </router-link>
               </template>
               <template #author>
                 <router-link
-                  :to="`/journal/timetables?search-dispatcher=${apiStore.dailyStatsData.maxTimetable.authorName}`"
+                  :to="`/journal/timetables?search-dispatcher=${stats.maxTimetable.authorName}`"
                 >
-                  <b>{{ apiStore.dailyStatsData.maxTimetable.authorName }}</b>
+                  <b>{{ stats.maxTimetable.authorName }}</b>
                 </router-link>
               </template>
               <template #driver>
-                <b class="text--primary">{{ apiStore.dailyStatsData.maxTimetable.driverName }}</b>
+                <b class="text--primary">{{ stats.maxTimetable.driverName }}</b>
               </template>
               <template #distance>
-                <b class="text--primary"
+                <b class="text--primary">{{ stats.maxTimetable.routeDistance }} km</b>
-                  >{{ apiStore.dailyStatsData.maxTimetable.routeDistance }} km</b
-                >
               </template>
             </i18n-t>
           </li>
@@ -107,37 +101,35 @@
             </i18n-t>
           </li>
 
-          <li v-if="apiStore.dailyStatsData.longestDuties.length > 0">
+          <li v-if="stats.longestDuties.length > 0">
             <i18n-t keypath="journal.daily-stats.longest-duties">
               <template #dispatcher>
                 <router-link
-                  :to="`/journal/dispatchers?search-dispatcher=${apiStore.dailyStatsData.longestDuties[0].name}`"
+                  :to="`/journal/dispatchers?search-dispatcher=${stats.longestDuties[0].name}`"
                 >
-                  <b>{{ apiStore.dailyStatsData.longestDuties[0].name }}</b>
+                  <b>{{ stats.longestDuties[0].name }}</b>
                 </router-link>
               </template>
 
-              <template #station>{{ apiStore.dailyStatsData.longestDuties[0].station }}</template>
+              <template #station>{{ stats.longestDuties[0].station }}</template>
 
               <template #duration>
-                {{ humanizeDuration(apiStore.dailyStatsData.longestDuties[0].duration) }}
+                {{ calculateDuration(stats.longestDuties[0].duration) }}
               </template>
             </i18n-t>
           </li>
 
-          <li v-if="apiStore.dailyStatsData.mostActiveDrivers.length > 0">
+          <li v-if="stats.mostActiveDrivers.length > 0">
             <i18n-t keypath="journal.daily-stats.most-active-driver">
               <template #driver>
                 <router-link
-                  :to="`/journal/timetables?search-driver=${apiStore.dailyStatsData.mostActiveDrivers[0].name}`"
+                  :to="`/journal/timetables?search-driver=${stats.mostActiveDrivers[0].name}`"
                 >
-                  <b>{{ apiStore.dailyStatsData.mostActiveDrivers[0].name }}</b>
+                  <b>{{ stats.mostActiveDrivers[0].name }}</b>
                 </router-link>
               </template>
               <template #distance>
-                <b class="text--primary"
+                <b class="text--primary">{{ stats.mostActiveDrivers[0].distance.toFixed(2) }} km</b>
-                  >{{ apiStore.dailyStatsData.mostActiveDrivers[0].distance.toFixed(2) }} km</b
-                >
               </template>
             </i18n-t>
           </li>
@@ -159,11 +151,7 @@
           >
             <span>{{ $t(`journal.daily-stats.${key}`) }}</span>
             <span>
-              {{
+              {{ Object.entries(stats.globalDiff).find(([k, v]) => k == key)?.[1] || '--' }}
-                Object.entries(apiStore.dailyStatsData.globalDiff).find(
-                  ([k, v]) => k == key
-                )?.[1] || '--'
-              }}
             </span>
           </span>
         </div>
@@ -172,25 +160,76 @@
   </section>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts">
-import { computed, onMounted } from 'vue';
+import { defineComponent } from 'vue';
-import { useApiStore } from '../../store/apiStore';
+import dateMixin from '../../mixins/dateMixin';
+
+import { API } from '../../typings/api';
 import { Status } from '../../typings/common';
-import { humanizeDuration } from '../../composables/time';
+import { useApiStore } from '../../store/apiStore';
 
-onMounted(() => {
+export default defineComponent({
-  apiStore.fetchDailyStats();
+  name: 'journal-daily-stats',
-});
 
-const apiStore = useApiStore();
+  mixins: [dateMixin],
 
-const topDispatchers = computed(() => {
+  data() {
-  if (!apiStore.dailyStatsData || apiStore.dailyStatsData.mostActiveDispatchers.length == 0)
+    return {
-    return [];
+      Status,
+      statsStatus: Status.Data.Loading,
+      intervalId: -1,
 
-  const maxCount = apiStore.dailyStatsData.mostActiveDispatchers[0].count;
+      stats: {} as API.DailyStats.Response,
+      apiStore: useApiStore()
+    };
+  },
 
-  return apiStore.dailyStatsData.mostActiveDispatchers.filter((disp) => disp.count === maxCount);
+  activated() {
+    this.startFetchingDailyStats();
+  },
+
+  deactivated() {
+    this.stopFetchingDailyStats();
+  },
+
+  computed: {
+    topDispatchers() {
+      if (this.stats.mostActiveDispatchers.length == 0) return [];
+      const maxCount = this.stats.mostActiveDispatchers[0].count;
+
+      return this.stats.mostActiveDispatchers.filter((disp) => disp.count === maxCount);
+    }
+  },
+
+  methods: {
+    async fetchDailyTimetableStats() {
+      try {
+        const res: API.DailyStats.Response = await (
+          await this.apiStore.client!.get('api/getDailyStats')
+        ).data;
+
+        this.stats = res;
+
+        this.statsStatus = Status.Data.Loaded;
+      } catch (error) {
+        console.error('Ups! Wystąpił błąd podczas pobierania statystyk rozkładów jazdy...');
+        this.statsStatus = Status.Data.Error;
+      }
+    },
+
+    startFetchingDailyStats() {
+      this.fetchDailyTimetableStats();
+
+      if (this.intervalId != -1) return;
+
+      this.intervalId = window.setInterval(this.fetchDailyTimetableStats, 60000);
+    },
+
+    stopFetchingDailyStats() {
+      clearInterval(this.intervalId);
+      this.intervalId = -1;
+    }
+  }
 });
 </script>
 
@@ -226,7 +265,7 @@ ul.stats-list {
   gap: 0.5em;
 }
 
-@include responsive.smallScreen {
+@include responsive.smallScreen{
   h3 {
     text-align: center;
   }

src/components/JournalView/JournalDispatchers/JournalDispatcherEntry.vue

@@ -1,22 +1,23 @@
 <template>
   <li class="dispatcher-history-entry">
     <div class="entry-info">
-      <span class="entry-info-left">
+      <span>
-        <div class="station-info">
+        <span>
           <router-link :to="`/journal/dispatchers?search-station=${entry.stationName}`">
             <b>{{ entry.stationName }}</b>
           </router-link>
 
           <b class="text--grayed"> #{{ entry.stationHash }}</b>
-          &bull;
+        </span>
-          <b
+        &bull;
-            v-if="entry.dispatcherLevel !== null"
+        <b
-            class="level-badge dispatcher"
+          v-if="entry.dispatcherLevel !== null"
-            :style="calculateExpStyle(entry.dispatcherLevel, entry.dispatcherIsSupporter)"
+          class="level-badge dispatcher"
-          >
+          :style="calculateExpStyle(entry.dispatcherLevel, entry.dispatcherIsSupporter)"
-            {{ entry.dispatcherLevel >= 2 ? entry.dispatcherLevel : 'L' }}
+        >
-          </b>
+          {{ entry.dispatcherLevel >= 2 ? entry.dispatcherLevel : 'L' }}
-
+        </b>
+        <b style="margin-left: 5px">
           <span
             v-if="apiStore.donatorsData.includes(entry.dispatcherName)"
             data-tooltip-type="DonatorTooltip"
@@ -36,11 +37,7 @@
           >
             {{ entry.dispatcherName }}
           </router-link>
-
+        </b>
-          <span class="dispatcher-language" v-if="entry.dispatcherLanguageId != null">
-            <FlagIcon :language-id="entry.dispatcherLanguageId" width="1.75em" />
-          </span>
-        </div>
 
         <div>
           <span v-if="entry.timestampTo">
@@ -121,7 +118,6 @@ import dateMixin from '../../../mixins/dateMixin';
 import styleMixin from '../../../mixins/styleMixin';
 import { useApiStore } from '../../../store/apiStore';
 import StationStatusBadge from '../../Global/StationStatusBadge.vue';
-import FlagIcon from '../../Global/FlagIcon.vue';
 
 export default defineComponent({
   props: {
@@ -129,7 +125,7 @@ export default defineComponent({
     showExtraInfo: { type: Boolean, required: true }
   },
 
-  components: { StationStatusBadge, FlagIcon },
+  components: { StationStatusBadge },
   mixins: [dateMixin, styleMixin],
   emits: ['toggleShowExtraInfo'],
 
@@ -168,11 +164,6 @@ export default defineComponent({
   padding: 1em;
 }
 
-.dispatcher-language {
-  display: inline-block;
-  vertical-align: middle;
-}
-
 .entry-info {
   display: flex;
   justify-content: space-between;
@@ -194,15 +185,6 @@ export default defineComponent({
   margin-top: 1em;
 }
 
-.station-info {
-  display: flex;
-  flex-wrap: wrap;
-  text-align: center;
-  align-items: center;
-  gap: 0.25em;
-  font-weight: bold;
-}
-
 .status-list {
   display: flex;
   overflow: auto;
@@ -216,15 +198,11 @@ export default defineComponent({
   border-radius: 1em;
 }
 
-@include responsive.smallScreen {
+@include responsive.smallScreen{
   .entry-info {
     flex-direction: column;
     justify-content: center;
     text-align: center;
   }
-
-  .station-info {
-    justify-content: center;
-  }
 }
 </style>

src/components/JournalView/JournalDispatchers/JournalDispatcherStats.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="journal-stats dispatcher" v-if="dispatcherName && stats">
+    <span class="loading" v-if="!stats.issuedTimetables && !stats.services">
+      {{ $t('journal.dispatcher-stats.empty') }}
+    </span>
+
+    <span v-else>
+      <h3>
+        <i18n-t keypath="journal.dispatcher-stats.title">
+          <template #name>
+            <span class="text--primary">{{ dispatcherName.toUpperCase() }}</span>
+          </template>
+        </i18n-t>
+      </h3>
+
+      <hr class="header-separator" />
+
+      <div class="info-stats">
+        <span class="badge stat-badge" v-if="stats.services">
+          <span>{{ $t('journal.dispatcher-stats.services-count') }}</span>
+          <span>{{ stats.services.count }}</span>
+        </span>
+
+        <span class="badge stat-badge" v-if="stats.services">
+          <span>{{ $t('journal.dispatcher-stats.service-max') }}</span>
+          <span>{{ calculateDuration(stats.services.durationMax) }}</span>
+        </span>
+
+        <span class="badge stat-badge" v-if="stats.services">
+          <span>{{ $t('journal.dispatcher-stats.service-avg') }}</span>
+          <span>{{ calculateDuration(stats.services.durationAvg) }}</span>
+        </span>
+      </div>
+
+      <hr class="section-separator" v-if="stats.issuedTimetables" />
+
+      <div class="info-stats" v-if="stats.issuedTimetables">
+        <span class="badge stat-badge">
+          <span>{{ $t('journal.dispatcher-stats.timetables-count') }}</span>
+          <span>{{ stats.issuedTimetables.count }}</span>
+        </span>
+
+        <span class="badge stat-badge">
+          <span>{{ $t('journal.dispatcher-stats.timetables-sum') }}</span>
+          <span>{{ stats.issuedTimetables.distanceSum.toFixed(2) }}km</span>
+        </span>
+
+        <span class="badge stat-badge">
+          <span>{{ $t('journal.dispatcher-stats.timetables-max') }}</span>
+          <span>{{ stats.issuedTimetables.distanceMax.toFixed(2) }}km</span>
+        </span>
+
+        <span class="badge stat-badge">
+          <span>{{ $t('journal.dispatcher-stats.timetables-avg') }}</span>
+          <span>{{ stats.issuedTimetables.distanceAvg.toFixed(2) }}km</span>
+        </span>
+      </div>
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import dateMixin from '../../../mixins/dateMixin';
+import { useMainStore } from '../../../store/mainStore';
+
+export default defineComponent({
+  name: 'journal-dispatcher-stats',
+
+  mixins: [dateMixin],
+
+  setup() {
+    const store = useMainStore();
+
+    return {
+      stats: store.dispatcherStatsData,
+      dispatcherName: store.dispatcherStatsName
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@use '../../../styles/journal-stats';
+</style>

src/components/JournalView/JournalOptions.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="dropdown filters-options" @keydown.esc="showOptions = false">
+  <div class="filters-options dropdown" @keydown.esc="showOptions = false">
     <div class="dropdown_background" v-if="showOptions" @click="showOptions = false"></div>
 
     <div class="actions-bar">
@@ -120,15 +120,15 @@
               </div>
             </section>
           </div>
-        </div>
 
-        <div class="options_actions">
+          <div class="options_actions">
-          <button class="btn--action" @click="onResetButtonClick">
+            <button class="btn--action" @click="onResetButtonClick">
-            {{ $t('options.reset-button') }}
+              {{ $t('options.reset-button') }}
-          </button>
+            </button>
-          <button class="btn--action" @click="onSearchButtonConfirm">
+            <button class="btn--action" @click="onSearchButtonConfirm">
-            {{ $t('options.search-button') }}
+              {{ $t('options.search-button') }}
-          </button>
+            </button>
+          </div>
         </div>
       </div>
     </transition>
@@ -269,9 +269,9 @@ export default defineComponent({
 
       this.searchTimeout = window.setTimeout(async () => {
         try {
-          const suggestions: string[] = await this.apiStore.client.get(
+          const suggestions: string[] = await (
-            `api/get${type}Suggestions?name=${value}`
+            await this.apiStore.client!.get(`api/get${type}Suggestions?name=${value}`)
-          );
+          ).data;
 
           this[`${type}Suggestions`] = suggestions;
         } catch (error) {
@@ -330,23 +330,4 @@ export default defineComponent({
 <style lang="scss" scoped>
 @use '../../styles/dropdown';
 @use '../../styles/dropdown-filters';
-@use '../../styles/responsive';
-
-.dropdown_wrapper {
-  display: grid;
-  grid-template-rows: 1fr auto;
-  overflow: hidden;
-  max-height: calc(100% - 4.5em);
-  top: 3.5em;
-  padding: 1em 0;
-}
-
-.options_content {
-  overflow: auto;
-  padding: 0 1em;
-}
-
-.options_actions {
-  padding: 0 1em;
-}
 </style>

src/components/JournalView/JournalStats.vue

@@ -2,73 +2,89 @@
   <div
     class="journal-stats dropdown"
     v-if="!mainStore.isOffline"
-    @keydown.esc="isDropdownOpen = false"
+    @keydown.esc="currentStatsTab = null"
   >
-    <div class="dropdown_background" v-if="isDropdownOpen" @click="isDropdownOpen = false"></div>
+    <div
+      class="dropdown_background"
+      v-if="currentStatsTab !== null"
+      @click="currentStatsTab = null"
+    ></div>
 
     <div class="actions-bar">
-      <button class="btn--filled btn--image" @click="toggleDropdown">
-        <img :src="`/images/icon-stats.svg`" alt="stats icon" />
-        {{ $t('journal.daily-stats.button') }}
-      </button>
-
       <button
+        v-for="button in statsButtons"
+        :key="button.tab"
         class="btn--filled btn--image"
-        :data-disabled="chosenPlayerId == -1"
+        :data-selected="button.tab == currentStatsTab"
-        @click="navigateToProfile"
+        :data-disabled="button.disabled"
+        :disabled="button.disabled"
+        @click="onTabButtonClick(button.tab)"
       >
-        <img :src="`/images/icon-user.svg`" alt="user icon" />
+        <img
-        {{ $t('profile.journal-button') }}
+          v-if="button.iconName"
+          :src="`/images/icon-${button.iconName}.svg`"
+          :alt="button.iconName"
+        />
+        {{ $t(button.localeKey) }}
       </button>
     </div>
 
     <transition name="dropdown-anim">
-      <div class="dropdown_wrapper" v-if="isDropdownOpen">
+      <div
+        class="dropdown_wrapper"
+        :class="{ 'dropdown-align-right': true }"
+        v-if="currentStatsTab !== null"
+      >
         <keep-alive>
-          <JournalDailyStats />
+          <component :is="currentStatsTab" :key="currentStatsTab"></component>
         </keep-alive>
       </div>
     </transition>
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts">
-import { ref } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { useMainStore } from '../../store/mainStore';
+import StorageManager from '../../managers/storageManager';
+import { Journal } from './typings';
 import JournalDailyStats from './JournalDailyStats.vue';
-import { useRouter } from 'vue-router';
+import JournalDispatcherStats from '../JournalView/JournalDispatchers/JournalDispatcherStats.vue';
+import JournalDriverStats from '../JournalView/JournalTimetables/JournalDriverStats.vue';
 
-const router = useRouter();
+export default defineComponent({
+  components: { JournalDailyStats, JournalDriverStats, JournalDispatcherStats },
+  props: {
+    statsButtons: {
+      type: Array as PropType<Journal.StatsButton[]>,
+      required: true
+    }
+  },
+  data() {
+    return {
+      Journal,
+      mainStore: useMainStore(),
+      currentStatsTab: null as Journal.StatsTab | null
+    };
+  },
 
-const props = defineProps({
+  methods: {
-  chosenPlayerId: {
+    onTabButtonClick(tab: Journal.StatsTab) {
-    type: Number,
+      this.currentStatsTab = tab == this.currentStatsTab ? null : tab;
-    required: true
+
+      StorageManager.setStringValue('journalStatsTab', this.currentStatsTab ?? '');
+    }
   }
 });
-
-const mainStore = useMainStore();
-const isDropdownOpen = ref(false);
-
-function toggleDropdown() {
-  isDropdownOpen.value = !isDropdownOpen.value;
-}
-
-function navigateToProfile() {
-  if (props.chosenPlayerId == -1) return;
-
-  router.push(`/profile?playerId=${props.chosenPlayerId}`);
-}
 </script>
 
 <style lang="scss" scoped>
 @use '../../styles/dropdown';
 @use '../../styles/dropdown-filters';
 
-.dropdown_wrapper {
+.dropdown_wrapper.dropdown-align-right {
   left: auto;
   right: 0;
   max-width: 700px;
-  top: 3.5em;
 }
 </style>

src/components/JournalView/JournalTimetables/EntryDetails.vue

@@ -19,237 +19,209 @@
     <div class="details-body" v-if="showExtraInfo">
       <div class="g-separator"></div>
 
-      <div v-if="timetableDetails">
+      <EntryStops :timetable="timetable" />
-        <EntryStops :timetable="timetableDetails" />
 
+      <div class="g-separator"></div>
+
+      <div class="timetable-specs">
+        <span class="badge specs-badge" v-if="timetable.authorName">
+          <span>{{ $t('journal.dispatcher-name') }}</span>
+          <span>{{ timetable.authorName }}</span>
+        </span>
+
+        <span class="badge specs-badge" v-if="timetable.trainMaxSpeed">
+          <span>{{ $t('journal.stock-timetable-speed') }}</span>
+          <span> {{ timetable.trainMaxSpeed }}km/h </span>
+        </span>
+
+        <span class="badge specs-badge" v-if="timetable.maxSpeed">
+          <span>{{ $t('journal.stock-max-speed') }}</span>
+          <span>{{ timetable.maxSpeed }}km/h</span>
+        </span>
+      </div>
+
+      <div class="stock-dangers" v-if="timetable.warningNotes">
         <div class="g-separator"></div>
 
-        <div class="timetable-specs">
+        <b>{{ $t('journal.stock-dangers') }}:</b>
-          <span class="badge specs-badge" v-if="timetableDetails.authorName">
+
-            <span>{{ $t('journal.dispatcher-name') }}</span>
+        <ul>
-            <span>{{ timetableDetails.authorName }}</span>
+          <li v-if="timetable.twr">
+            <b class="text--primary">{{ $t('warnings.TWR') }} (TWR)</b>
+          </li>
+
+          <li v-if="timetable.skr">
+            <b class="text--primary">{{ $t('warnings.SKR') }}</b>
+          </li>
+
+          <li v-if="timetable.hasDangerousCargo">
+            <b class="text--primary">{{ $t('warnings.TN') }}</b>
+          </li>
+
+          <li v-if="timetable.hasExtraDeliveries">
+            <b class="text--primary">{{ $t('warnings.PN') }}</b>
+          </li>
+        </ul>
+
+        <div class="dangers-notes" v-if="timetable.warningNotes">
+          <h4>{{ $t('warnings.header-title') }}</h4>
+          <p>
+            <i>{{ timetable.warningNotes }}</i>
+          </p>
+        </div>
+      </div>
+
+      <!-- Historia zmian w składzie -->
+      <div v-if="timetable.stockString || stockHistory.length != 0">
+        <div class="g-separator"></div>
+
+        <b>{{ $t('journal.stock-preview') }}:</b>
+
+        <div class="stock-specs" style="margin-top: 0.5em">
+          <span class="badge specs-badge" v-if="timetable.stockLength">
+            <span>{{ $t('journal.stock-length') }}</span>
+            <span>
+              {{
+                currentHistoryIndex == 0
+                  ? timetable.stockLength
+                  : stockHistory[currentHistoryIndex].stockLength || timetable.stockLength
+              }}m
+            </span>
           </span>
 
-          <span class="badge specs-badge" v-if="timetableDetails.trainMaxSpeed">
+          <span class="badge specs-badge" v-if="timetable.stockMass">
-            <span>{{ $t('journal.stock-timetable-speed') }}</span>
+            <span>{{ $t('journal.stock-mass') }}</span>
-            <span> {{ timetableDetails.trainMaxSpeed }}km/h </span>
+            <span>
-          </span>
+              {{
-
+                Math.floor(
-          <span class="badge specs-badge" v-if="timetableDetails.maxSpeed">
+                  (currentHistoryIndex == 0
-            <span>{{ $t('journal.stock-max-speed') }}</span>
+                    ? timetable.stockMass
-            <span>{{ timetableDetails.maxSpeed }}km/h</span>
+                    : stockHistory[currentHistoryIndex].stockMass || timetable.stockMass) / 1000
+                )
+              }}t
+            </span>
           </span>
         </div>
 
-        <div class="stock-dangers" v-if="timetableDetails.warningNotes">
+        <div class="stock-history">
-          <div class="g-separator"></div>
+          <button class="btn btn--action" @click="copyStockToClipboard()">
+            <i class="fa-regular fa-copy"></i> {{ $t('journal.stock-copy') }}
+          </button>
 
-          <b>{{ $t('journal.stock-dangers') }}:</b>
+          <button
-
+            v-for="(sh, i) in stockHistory"
-          <ul>
+            :key="i"
-            <li v-if="timetableDetails.twr">
+            class="btn--action"
-              <b class="text--primary">{{ $t('warnings.TWR') }} (TWR)</b>
+            :data-checked="i == currentHistoryIndex"
-            </li>
+            @click.stop="currentHistoryIndex = i"
-
+          >
-            <li v-if="timetableDetails.skr">
+            {{ sh.updatedAt }}
-              <b class="text--primary">{{ $t('warnings.SKR') }}</b>
+          </button>
-            </li>
-
-            <li v-if="timetableDetails.hasDangerousCargo">
-              <b class="text--primary">{{ $t('warnings.TN') }}</b>
-            </li>
-
-            <li v-if="timetableDetails.hasExtraDeliveries">
-              <b class="text--primary">{{ $t('warnings.PN') }}</b>
-            </li>
-          </ul>
-
-          <div class="dangers-notes" v-if="timetableDetails.warningNotes">
-            <h4>{{ $t('warnings.header-title') }}</h4>
-            <p>
-              <i>{{ timetableDetails.warningNotes }}</i>
-            </p>
-          </div>
         </div>
 
-        <!-- Historia zmian w składzie -->
+        <div v-if="timetable.stockString" style="margin-top: 1em">
-        <div v-if="timetableDetails.stockString || stockHistory.length != 0">
+          <StockList
-          <div class="g-separator"></div>
+            :trainStockList="
-
+              (currentHistoryIndex == 0
-          <b>{{ $t('journal.stock-preview') }}:</b>
+                ? timetable.stockString
-
+                : stockHistory[currentHistoryIndex].stockString
-          <div class="stock-specs" style="margin-top: 0.5em">
+              ).split(';')
-            <span class="badge specs-badge" v-if="timetableDetails.stockLength">
+            "
-              <span>{{ $t('journal.stock-length') }}</span>
+          />
-              <span>
-                {{
-                  currentHistoryIndex == 0
-                    ? timetableDetails.stockLength
-                    : stockHistory[currentHistoryIndex].stockLength || timetableDetails.stockLength
-                }}m
-              </span>
-            </span>
-
-            <span class="badge specs-badge" v-if="timetableDetails.stockMass">
-              <span>{{ $t('journal.stock-mass') }}</span>
-              <span>
-                {{
-                  Math.floor(
-                    (currentHistoryIndex == 0
-                      ? timetableDetails.stockMass
-                      : stockHistory[currentHistoryIndex].stockMass || timetableDetails.stockMass) /
-                      1000
-                  )
-                }}t
-              </span>
-            </span>
-          </div>
-
-          <div class="stock-history">
-            <button class="btn btn--action" @click="copyStockToClipboard()">
-              <i class="fa-regular fa-copy"></i> {{ $t('journal.stock-copy') }}
-            </button>
-
-            <button
-              v-for="(sh, i) in stockHistory"
-              :key="i"
-              class="btn--action"
-              :data-checked="i == currentHistoryIndex"
-              @click.stop="currentHistoryIndex = i"
-            >
-              {{ sh.updatedAt }}
-            </button>
-          </div>
-
-          <div v-if="timetableDetails.stockString" style="margin-top: 1em">
-            <StockList
-              :trainStockList="
-                (currentHistoryIndex == 0
-                  ? timetableDetails.stockString
-                  : stockHistory[currentHistoryIndex].stockString
-                ).split(';')
-              "
-              :showPreviews="true"
-            />
-          </div>
         </div>
       </div>
     </div>
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts">
-import { computed, PropType, ref } from 'vue';
+import { PropType, defineComponent } from 'vue';
+import StockList from '../../Global/StockList.vue';
+import { API } from '../../../typings/api';
 import { RouteLocationRaw } from 'vue-router';
+import EntryStops from './EntryStops.vue';
 import { useI18n } from 'vue-i18n';
 
-import StockList from '../../Global/StockList.vue';
+export default defineComponent({
-import EntryStops from './EntryStops.vue';
+  components: { StockList, EntryStops },
-import { API } from '../../../typings/api';
-import { useApiStore } from '../../../store/apiStore';
 
-const i18n = useI18n();
+  emits: ['toggleExtraInfo'],
-const apiStore = useApiStore();
 
-const props = defineProps({
+  props: {
-  showExtraInfo: {
+    showExtraInfo: {
-    type: Boolean,
+      type: Boolean,
-    required: true
+      required: true
+    },
+    timetable: {
+      type: Object as PropType<API.TimetableHistory.Data>,
+      required: true
+    }
   },
+  data() {
+    return {
+      currentHistoryIndex: 0,
+      i18n: useI18n()
+    };
+  },
+  computed: {
+    stockHistory() {
+      return this.timetable.stockHistory
+        .slice()
+        .reverse()
+        .map((h) => {
+          const historyData = h.split('@');
+          return {
+            updatedAt: new Date(Number(historyData[0])).toLocaleTimeString(this.$i18n.locale, {
+              hour: '2-digit',
+              minute: '2-digit'
+            }),
+            stockString: historyData[1],
+            stockMass: Number(historyData[2]) || undefined,
+            stockLength: Number(historyData[3]) || undefined
+          };
+        });
+    },
 
-  timetableEntry: {
+    driverRouteLocation(): RouteLocationRaw | null {
-    type: Object as PropType<API.TimetableHistory.DataShort>,
+      if (this.timetable.terminated) return null;
-    required: true
+      return {
-  }
+        name: 'DriverView',
-});
+        query: {
-
+          trainId: `${this.timetable.driverId}|${this.timetable.trainNo}|eu`
-const emits = defineEmits(['toggleExtraInfo']);
+        }
-const currentHistoryIndex = ref(0);
+      };
-
-const timetableDetails = ref<API.TimetableHistory.Data | null>(null);
-
-const stockHistory = computed(() => {
-  return (
-    timetableDetails.value?.stockHistory
-      .slice()
-      .reverse()
-      .map((h) => {
-        const historyData = h.split('@');
-        return {
-          updatedAt: new Date(Number(historyData[0])).toLocaleTimeString(i18n.locale.value, {
-            hour: '2-digit',
-            minute: '2-digit'
-          }),
-          stockString: historyData[1],
-          stockMass: Number(historyData[2]) || undefined,
-          stockLength: Number(historyData[3]) || undefined
-        };
-      }) ?? []
-  );
-});
-
-const driverRouteLocation = computed<RouteLocationRaw | null>(() => {
-  if (props.timetableEntry.terminated) return null;
-
-  return {
-    name: 'DriverView',
-    query: {
-      trainId: `${props.timetableEntry.driverId}|${props.timetableEntry.trainNo}|eu`
     }
-  };
+  },
-});
+  methods: {
+    onImageError(e: Event) {
+      const imageEl = e.target as HTMLImageElement;
+      imageEl.src = '/images/icon-unknown.png';
+    },
 
-async function fetchTimetableDetails() {
+    toggleExtraInfo() {
-  try {
+      this.$emit('toggleExtraInfo', this.timetable.id);
-    const responseData = await apiStore.client.get<API.TimetableHistory.Response>(
+    },
-      'api/getTimetables',
+
-      {
+    copyStockToClipboard() {
-        timetableId: props.timetableEntry.id,
+      const currentStockString =
-        returnType: 'detailed'
+        this.stockHistory[this.currentHistoryIndex]?.stockString ?? this.timetable.stockString;
+
+      if (!currentStockString) {
+        alert(this.i18n.t('journal.stock-clipboard-failure'));
+        return;
       }
-    );
 
-    if (!responseData || responseData.length != 1) {
+      navigator.clipboard
-      timetableDetails.value = null;
+        .writeText(currentStockString)
-      return;
+        .then(() => {
+          prompt(this.i18n.t('journal.stock-clipboard-success'), currentStockString);
+        })
+        .catch(() => {
+          alert(this.i18n.t('journal.stock-clipboard-failure'));
+        });
     }
-
-    timetableDetails.value = responseData[0];
-  } catch (error) {
-    // this.dataStatus = Status.Data.Error;
-    console.error(error);
   }
-}
+});
-
-async function toggleExtraInfo() {
-  if (props.showExtraInfo == false) {
-    await fetchTimetableDetails();
-  }
-
-  emits('toggleExtraInfo', timetableDetails.value);
-}
-
-function copyStockToClipboard() {
-  if (!timetableDetails.value) return;
-
-  const currentStockString =
-    stockHistory.value[currentHistoryIndex.value]?.stockString ??
-    timetableDetails.value.stockString;
-
-  if (!currentStockString) {
-    alert(i18n.t('journal.stock-clipboard-failure'));
-    return;
-  }
-
-  navigator.clipboard
-    .writeText(currentStockString)
-    .then(() => {
-      prompt(i18n.t('journal.stock-clipboard-success'), currentStockString);
-    })
-    .catch(() => {
-      alert(i18n.t('journal.stock-clipboard-failure'));
-    });
-}
 </script>
 
 <style lang="scss" scoped>
@@ -327,7 +299,7 @@ hr {
   }
 }
 
-@include responsive.smallScreen {
+@include responsive.smallScreen{
   .timetable-specs {
     justify-content: center;
   }

src/components/JournalView/JournalTimetables/EntryGeneral.vue

@@ -71,10 +71,6 @@
       <router-link v-else :to="`/journal/timetables?search-driver=${timetable.driverName}`">
         <strong>{{ timetable.driverName }}</strong>
       </router-link>
-
-      <div v-if="timetable.driverLanguageId != null">
-        <FlagIcon :language-id="timetable.driverLanguageId" width="1.75em" />
-      </div>
     </span>
 
     <span class="general-time">
@@ -87,7 +83,7 @@
       </b>
 
       <b
-        class="timetable-status-badge"
+        class="info-badge"
         :class="{
           fulfilled: timetable.fulfilled,
           terminated: timetable.terminated && !timetable.fulfilled,
@@ -114,10 +110,8 @@ import dateMixin from '../../../mixins/dateMixin';
 import styleMixin from '../../../mixins/styleMixin';
 import { useApiStore } from '../../../store/apiStore';
 import trainCategoryMixin from '../../../mixins/trainCategoryMixin';
-import FlagIcon from '../../Global/FlagIcon.vue';
 
 export default defineComponent({
-  components: { FlagIcon },
   mixins: [dateMixin, styleMixin, trainCategoryMixin],
 
   data() {
@@ -128,7 +122,7 @@ export default defineComponent({
 
   props: {
     timetable: {
-      type: Object as PropType<API.TimetableHistory.DataShort>,
+      type: Object as PropType<API.TimetableHistory.Data>,
       required: true
     }
   }
@@ -171,6 +165,23 @@ export default defineComponent({
   gap: 0.25em;
 }
 
+.info-badge {
+  padding: 0.05em 0.35em;
+  color: black;
+
+  &.terminated {
+    background-color: salmon;
+  }
+
+  &.fulfilled {
+    background-color: lightgreen;
+  }
+
+  &.active {
+    background-color: lightblue;
+  }
+}
+
 .btn-timetable {
   display: flex;
   padding: 0.2em 0.5em;
@@ -180,7 +191,7 @@ export default defineComponent({
   }
 }
 
-@include responsive.smallScreen {
+@include responsive.smallScreen{
   .item-general {
     flex-direction: column;
     justify-content: center;

src/components/JournalView/JournalTimetables/EntryStatus.vue

@@ -51,7 +51,7 @@ export default defineComponent({
   components: { ProgressBar },
   props: {
     timetable: {
-      type: Object as PropType<API.TimetableHistory.DataShort>,
+      type: Object as PropType<API.TimetableHistory.Data>,
       required: true
     }
   }

src/components/JournalView/JournalTimetables/JournalDriverStats.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="journal-stats driver" v-if="store.driverStatsData">
+    <span>
+      <h3>
+        <i18n-t keypath="journal.driver-stats.title">
+          <template #name>
+            <span class="text--primary">{{ store.driverStatsName.toUpperCase() }}</span>
+          </template>
+        </i18n-t>
+      </h3>
+
+      <hr class="header-separator" />
+
+      <div class="info-stats">
+        <span class="badge stat-badge">
+          <span>{{ $t('journal.driver-stats.longest-timetable') }}</span>
+          <span> {{ store.driverStatsData._max.routeDistance.toFixed(2) }}km </span>
+        </span>
+
+        <span class="badge stat-badge">
+          <span>{{ $t('journal.driver-stats.avg-timetable') }}</span>
+          <span> {{ store.driverStatsData._avg.routeDistance.toFixed(2) }}km </span>
+        </span>
+      </div>
+
+      <hr class="section-separator" />
+
+      <div class="info-stats">
+        <span class="badge stat-badge">
+          <span>{{ $t('journal.driver-stats.timetables') }}</span>
+          <span>
+            {{ store.driverStatsData._count.fulfilled }} /
+            {{ store.driverStatsData._count._all }}
+
+            <template v-if="store.driverStatsData._count._all > 0">
+              ({{
+                (
+                  (store.driverStatsData._count.fulfilled / store.driverStatsData._count._all) *
+                  100
+                ).toFixed(2)
+              }}%)
+            </template>
+          </span>
+        </span>
+
+        <span class="badge stat-badge">
+          <span>{{ $t('journal.driver-stats.distance') }}</span>
+          <span>
+            {{ store.driverStatsData._sum.currentDistance.toFixed(2) }} /
+            {{ store.driverStatsData._sum.routeDistance.toFixed(2) }}km
+
+            <template v-if="store.driverStatsData._sum.routeDistance > 0">
+              ({{
+                (
+                  (store.driverStatsData._sum.currentDistance /
+                    store.driverStatsData._sum.routeDistance) *
+                  100
+                ).toFixed(2)
+              }}%)
+            </template>
+          </span>
+        </span>
+
+        <span class="badge stat-badge">
+          <span>{{ $t('journal.driver-stats.stations') }}</span>
+          <span>
+            {{ store.driverStatsData._sum.confirmedStopsCount }} /
+            {{ store.driverStatsData._sum.allStopsCount }}
+
+            <template v-if="store.driverStatsData._sum.allStopsCount > 0">
+              ({{
+                (
+                  (store.driverStatsData._sum.confirmedStopsCount /
+                    store.driverStatsData._sum.allStopsCount) *
+                  100
+                ).toFixed(2)
+              }}%)
+            </template>
+          </span>
+        </span>
+      </div>
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useMainStore } from '../../../store/mainStore';
+import { Status } from '../../../typings/common';
+
+export default defineComponent({
+  name: 'journal-driver-stats',
+
+  data() {
+    return {
+      store: useMainStore(),
+      Status: Status
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@use '../../../styles/journal-stats';
+</style>

src/components/JournalView/JournalTimetables/JournalTimetableEntry.vue

@@ -10,14 +10,14 @@
 
     <hr />
 
-    <div style="cursor: pointer">
+    <div @click="toggleExtraInfo" style="cursor: pointer">
       <!-- Status -->
       <EntryStatus :timetable="timetableEntry" />
     </div>
 
     <!-- Extra -->
     <EntryDetails
-      :timetableEntry="timetableEntry"
+      :timetable="timetableEntry"
       :show-extra-info="showExtraInfo"
       @toggle-extra-info="toggleExtraInfo"
     />
@@ -28,6 +28,7 @@
 import { defineComponent, PropType } from 'vue';
 import { API } from '../../../typings/api';
 import { useApiStore } from '../../../store/apiStore';
+import { Journal } from '../typings';
 
 import trainCategoryMixin from '../../../mixins/trainCategoryMixin';
 import dateMixin from '../../../mixins/dateMixin';
@@ -40,7 +41,7 @@ import EntryDetails from './EntryDetails.vue';
 export default defineComponent({
   props: {
     timetableEntry: {
-      type: Object as PropType<API.TimetableHistory.DataShort>,
+      type: Object as PropType<API.TimetableHistory.Data>,
       required: true
     },
     showExtraInfo: {
@@ -59,9 +60,74 @@ export default defineComponent({
     };
   },
 
+  computed: {
+    timetablePathDetails() {
+      if (!this.timetableEntry.path || this.timetableEntry.path == '') return null;
+
+      return this.timetableEntry.path.split(';').map((pathEl, i) => {
+        const [arrival, name, departure] = pathEl.split(',');
+        const sceneryName = name.split(' ').slice(0, -1).join(' ');
+        const sceneryHash = name.split(' ').pop()?.replace('.sc', '') ?? '';
+
+        return {
+          arrival,
+          sceneryName,
+          sceneryHash,
+          departure,
+          isVisited: this.timetableEntry.visitedSceneries?.includes(sceneryHash) ?? false
+        };
+      });
+    },
+
+    timetableStops(): Journal.TimetableStopDetails[] {
+      const timetableEntry = this.timetableEntry;
+
+      const stopNames = timetableEntry.sceneriesString.split('%');
+
+      return stopNames.reduce<Journal.TimetableStopDetails[]>((acc, stopName, i, arr) => {
+        const arrivalDate =
+          i == arr.length - 1
+            ? (timetableEntry.checkpointArrivals.at(i) ?? timetableEntry.endDate)
+            : timetableEntry.checkpointArrivals.at(i);
+
+        const scheduledArrivalDate =
+          i == arr.length - 1
+            ? (timetableEntry.checkpointArrivalsScheduled.at(i) ?? timetableEntry.scheduledEndDate)
+            : timetableEntry.checkpointArrivalsScheduled.at(i);
+
+        const departureDate =
+          i == 0
+            ? (timetableEntry.checkpointDepartures.at(i) ?? timetableEntry.beginDate)
+            : timetableEntry.checkpointDepartures.at(i);
+
+        const scheduledDepartureDate =
+          i == 0
+            ? (timetableEntry.checkpointDeparturesScheduled.at(i) ??
+              timetableEntry.scheduledBeginDate)
+            : timetableEntry.checkpointDeparturesScheduled.at(i);
+
+        const stopTime = Number(timetableEntry.checkpointStopTypes.at(i)?.split(',')[0]) || 0;
+        const stopType = timetableEntry.checkpointStopTypes.at(i)?.split(',')[1] || '';
+
+        acc.push({
+          stopName,
+          arrivalTimestamp: this.dateStringToTimestamp(arrivalDate),
+          scheduledArrivalTimestamp: this.dateStringToTimestamp(scheduledArrivalDate),
+          departureTimestamp: this.dateStringToTimestamp(departureDate),
+          scheduledDepartureTimestamp: this.dateStringToTimestamp(scheduledDepartureDate),
+          stopTime,
+          stopType,
+          isConfirmed: i < timetableEntry.confirmedStopsCount
+        });
+
+        return acc;
+      }, []);
+    }
+  },
+
   methods: {
-    toggleExtraInfo(data: API.TimetableHistory.Data | null) {
+    toggleExtraInfo() {
-      this.$emit('toggleShowExtraInfo', data);
+      this.$emit('toggleShowExtraInfo');
     }
   }
 });
@@ -79,7 +145,7 @@ export default defineComponent({
   display: flex;
 }
 
-@include responsive.smallScreen {
+@include responsive.smallScreen{
   .entry-route {
     justify-content: center;
     text-align: center;

src/components/JournalView/JournalTimetables/JournalTimetablesList.vue

@@ -20,7 +20,7 @@
           v-for="(timetableEntry, i) in timetableHistory"
           :key="timetableEntry.id"
           :timetableEntry="timetableEntry"
-          :onToggleShowExtraInfo="toggleExtraInfo"
+          :onToggleShowExtraInfo="() => toggleExtraInfo(timetableEntry.id)"
           :showExtraInfo="extraInfoIndexes.includes(timetableEntry.id)"
         />
       </transition-group>
@@ -59,11 +59,9 @@ export default defineComponent({
     JournalTimetableEntry
   },
 
-  emits: ['toggleExtraInfo'],
-
   props: {
     timetableHistory: {
-      type: Array as PropType<API.TimetableHistory.ResponseShort>,
+      type: Array as PropType<API.TimetableHistory.Response>,
       required: true
     },
     scrollNoMoreData: {
@@ -77,23 +75,32 @@ export default defineComponent({
     },
     dataStatus: {
       type: Number as PropType<Status.Data>
-    },
-    extraInfoIndexes: {
-      type: Object as PropType<number[]>,
-      required: true
     }
   },
 
   data() {
     return {
       Status,
-      store: useMainStore()
+      store: useMainStore(),
+      extraInfoIndexes: [] as number[]
     };
   },
 
+  watch: {
+    '$route.query': {
+      deep: true,
+      handler() {
+        this.extraInfoIndexes.length = 0;
+      }
+    }
+  },
+  
   methods: {
-    toggleExtraInfo(data: API.TimetableHistory.Data | null) {
+    toggleExtraInfo(id: number) {
-      this.$emit('toggleExtraInfo', data);
+      const existingIdx = this.extraInfoIndexes.indexOf(id);
+
+      if (existingIdx != -1) this.extraInfoIndexes.splice(existingIdx, 1);
+      else this.extraInfoIndexes.push(id);
     }
   }
 });
@@ -104,7 +111,7 @@ export default defineComponent({
 @use '../../../styles/journal-section';
 @use '../../../styles/responsive';
 
-@include responsive.smallScreen {
+@include responsive.smallScreen{
   .journal_item-info {
     text-align: center;
   }

src/components/JournalView/typings.ts

@@ -1,6 +1,5 @@
 export namespace Journal {
   export type DispatcherSearchKey =
-    | 'search-duty-id'
     | 'search-dispatcher'
     | 'search-station'
     | 'search-date-from'
@@ -11,12 +10,10 @@ export namespace Journal {
     | 'search-train'
     | 'search-date-from'
     | 'search-dispatcher'
-    | 'search-includesScenery'
     | 'search-issuedFrom'
     | 'search-terminatingAt'
     | 'search-via'
-    | 'select-categoryCode'
+    | 'select-categoryCode';
-    | 'search-headUnit';
 
   export type TimetableSearchType = {
     [key in TimetableSearchKey]: string;
@@ -64,6 +61,19 @@ export namespace Journal {
     default: boolean;
   }
 
+  export enum StatsTab {
+    DRIVER_STATS = 'journal-driver-stats',
+    DISPATCHER_STATS = 'journal-dispatcher-stats',
+    DAILY_STATS = 'journal-daily-stats'
+  }
+
+  export interface StatsButton {
+    tab: StatsTab;
+    localeKey: string;
+    iconName: string;
+    disabled: boolean;
+  }
+
   export interface TimetableStopDetails {
     stopName: string;
     arrivalTimestamp: number;

src/components/PlayerProfileView/ProfileHistoryList.vue

@@ -1,298 +0,0 @@
-<template>
-  <section class="profile-history-list">
-    <div class="list-header">
-      <div class="history-menu">
-        <button
-          v-for="(filterState, filterKey) in activeFilterTypes"
-          class="menu-btn btn--option"
-          :data-active="filterState"
-          @click="toggleFilter(filterKey)"
-        >
-          {{ t(`profile.filters.${filterKey}`) }}
-        </button>
-      </div>
-    </div>
-
-    <div class="history-list-box">
-      <Loading v-if="journalStatus == Status.Data.Loading" />
-
-      <div v-else-if="combinedJournal.length == 0" class="no-recent-history">
-        {{ t('profile.list.no-recent-history') }}
-      </div>
-
-      <router-link
-        v-else
-        v-for="entry in combinedJournal"
-        :to="
-          'trainNo' in entry.value
-            ? `/journal/timetables?search-train=%23${entry.value.id}`
-            : `/journal/dispatchers?search-duty-id=${entry.value.id}`
-        "
-      >
-        <!-- Date -->
-        <div class="entry-top-date">
-          <img
-            v-if="entry.type == 'Dispatcher'"
-            src="/images/icon-user.svg"
-            width="25"
-            alt="user icon"
-          />
-
-          <img
-            v-else-if="entry.type == 'Timetable'"
-            src="/images/icon-train.svg"
-            width="25"
-            alt="train icon"
-          />
-
-          <img v-else src="/images/icon-timetable.svg" width="25" alt="timetable icon" />
-
-          <b
-            class="timestamp-indicator"
-            :data-online="
-              'isOnline' in entry.value
-                ? entry.value.isOnline
-                : !entry.value.terminated && entry.type != 'IssuedTimetable'
-            "
-          >
-            {{ dateToLocaleString(entry.date, { dateStyle: 'long', timeStyle: 'short' }) }}
-            <span v-if="'timestampTo' in entry.value && entry.value.timestampTo">
-              -
-              <span v-if="new Date(entry.value.timestampTo).getDay() == entry.date.getDay()">{{
-                dateToLocaleString(new Date(entry.value.timestampTo), {
-                  timeStyle: 'short'
-                })
-              }}</span>
-              <span v-else>{{
-                dateToLocaleString(new Date(entry.value.timestampTo), {
-                  dateStyle: 'long',
-                  timeStyle: 'short'
-                })
-              }}</span>
-            </span>
-          </b>
-        </div>
-
-        <!-- Timetables -->
-        <div v-if="'trainNo' in entry.value">
-          <b class="text--primary">
-            {{ entry.value.trainCategoryCode }}
-          </b>
-          {{ ' ' }}
-          <b>{{ entry.value.trainNo }}</b>
-          <b class="text--grayed" v-if="entry.type == 'IssuedTimetable'">
-            {{ ' ' }} {{ t('profile.list.for') }}: {{ entry.value.driverName }}
-          </b>
-          {{ ' ' }}
-          <b>{{ entry.value.route.replace('|', ' > ') }}</b>
-          {{ ' ' }}
-          <b class="text--primary">{{ entry.value.currentDistance }} km</b>
-          <b> / {{ entry.value.routeDistance }} km</b>
-        </div>
-
-        <!-- Dispatchers -->
-        <div v-else>
-          <b class="text--primary">{{ entry.value.stationName }}</b>
-          {{ ' - ' }}
-          <b class="timestamp-indicator" :data-online="entry.value.isOnline">
-            <span v-if="entry.value.isOnline">{{ t('profile.list.online-since') }}: </span>
-            <span>{{
-              humanizeDuration((entry.value.timestampTo || Date.now()) - entry.value.timestampFrom)
-            }}</span>
-          </b>
-        </div>
-      </router-link>
-    </div>
-  </section>
-</template>
-
-<script lang="ts" setup>
-import {
-  computed,
-  onActivated,
-  onDeactivated,
-  onMounted,
-  onUnmounted,
-  PropType,
-  reactive,
-  ref
-} from 'vue';
-import { dateToLocaleString, humanizeDuration } from '../../composables/time';
-import { API } from '../../typings/api';
-import { useI18n } from 'vue-i18n';
-import { useApiStore } from '../../store/apiStore';
-import { onBeforeRouteUpdate, useRoute } from 'vue-router';
-import { Status } from '../../typings/common';
-import Loading from '../Global/Loading.vue';
-
-type JournalEntryType = 'Timetable' | 'Dispatcher' | 'IssuedTimetable';
-
-interface JournalEntry {
-  type: JournalEntryType;
-  date: Date;
-  value: API.TimetableHistory.DataShort | API.DispatcherHistory.Data;
-}
-
-const props = defineProps({
-  playerName: {
-    type: String
-  },
-
-  playerJournal: {
-    type: Object as PropType<API.PlayerJournal.Data>,
-  },
-
-  journalStatus: {
-    type: Number as PropType<Status.Data>,
-    required: true
-  }
-});
-
-const { t } = useI18n();
-
-const activeFilterTypes = reactive<Record<JournalEntryType, boolean>>({
-  Timetable: true,
-  Dispatcher: true,
-  IssuedTimetable: true
-});
-
-const combinedJournal = computed<JournalEntry[]>(() => {
-  if (!props.playerJournal || !props.playerName) return [];
-
-  const list = [
-    ...props.playerJournal.timetables,
-    ...props.playerJournal.duties,
-    ...props.playerJournal.issuedTimetables
-  ]
-    .reduce<JournalEntry[]>((acc, v) => {
-      // Timetable or dispatcher type
-      if ('trainNo' in v) {
-        const isIssued = v.authorName == props.playerName;
-
-        if (!isIssued && !activeFilterTypes['Timetable']) return acc;
-        if (isIssued && !activeFilterTypes['IssuedTimetable']) return acc;
-
-        acc.push({
-          date: new Date(v.createdAt),
-          type: isIssued ? 'IssuedTimetable' : 'Timetable',
-          value: v
-        });
-      } else {
-        if (!activeFilterTypes['Dispatcher']) return acc;
-
-        acc.push({
-          date: new Date(v.timestampFrom),
-          type: 'Dispatcher',
-          value: v
-        });
-      }
-
-      return acc;
-    }, [])
-    .sort((a, b) => {
-      return a.date.getTime() - b.date.getTime() > 0 ? -1 : 1;
-    });
-
-  return list;
-});
-
-function toggleFilter(filterType: JournalEntryType) {
-  const toggledState = !activeFilterTypes[filterType];
-
-  // Prevent switching off all filters at the same time (at least one must be active)
-  if (
-    toggledState === false &&
-    Object.values(activeFilterTypes).filter((v) => v === false).length ==
-      Object.values(activeFilterTypes).length - 1
-  )
-    return;
-
-  activeFilterTypes[filterType] = toggledState;
-}
-</script>
-
-<style lang="scss" scoped>
-@use '../../styles/responsive';
-
-.profile-history-list {
-  overflow-y: scroll;
-  height: 100%;
-}
-
-.list-header {
-  position: sticky;
-  top: 0;
-  z-index: 100;
-
-  & > h3 {
-    padding: 0.5em;
-    margin-bottom: 0.5em;
-  }
-}
-
-.history-menu {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 1em;
-  background-color: var(--clr-tile);
-  padding: 0.5em;
-}
-
-.menu-btn {
-  padding: 0.5em;
-  font-weight: bold;
-  color: #aaa;
-
-  &[data-active='true'] {
-    color: var(--clr-success);
-  }
-}
-
-.history-list-box {
-  padding: 0 0.5em;
-  position: relative;
-}
-
-.history-list-box > a {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25em;
-
-  background-color: var(--clr-bg-light);
-  padding: 0.5em;
-
-  margin-bottom: 0.5em;
-  text-align: initial;
-
-  &:hover {
-    background-color: #333;
-  }
-}
-
-.no-recent-history {
-  padding: 1em;
-  font-size: 1.25em;
-  font-weight: bold;
-  color: #aaa;
-}
-
-.entry-top-date {
-  display: flex;
-  align-items: center;
-  gap: 0.25em;
-}
-
-.timestamp-indicator {
-  color: #ccc;
-
-  &[data-online='true'] {
-    color: var(--clr-success);
-  }
-}
-
-@include responsive.midScreen {
-  .profile-history-list {
-    height: 100vh;
-  }
-}
-</style>

src/components/PlayerProfileView/ProfilePlayerAvatar.vue

@@ -1,76 +0,0 @@
-<template>
-  <div class="player-avatar">
-    <img
-      v-if="props.playerTD2Info && props.playerTD2Info.avatar"
-      :src="`https://td2.info.pl/index.php?action=dlattach;attach=${props.playerTD2Info.avatar};type=avatar`"
-      class="player-avatar-image"
-      ref="avatarImageRef"
-      alt="player image"
-      @load="onAvatarLoadSuccess"
-      @error="onAvatarLoadError"
-    />
-
-    <img
-      v-if="
-        avatarLoadingStatus == Status.Data.Error ||
-        (props.playerTD2Info && !props.playerTD2Info.avatar)
-      "
-      class="img-placeholder"
-      height="100"
-      src="/images/default-avatar.jpg"
-    />
-
-    <Loading v-else-if="avatarLoadingStatus == Status.Data.Loading" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { PropType, ref, useTemplateRef } from 'vue';
-import { Status } from '../../typings/common';
-import Loading from '../Global/Loading.vue';
-import { Td2API } from '../../typings/api';
-
-const props = defineProps({
-  playerTD2Info: {
-    type: Object as PropType<Td2API.UsersInfoByName.UserInfo>
-  }
-});
-
-const avatarImageRef = useTemplateRef('avatarImageRef');
-const avatarLoadingStatus = ref<Status.Data>(Status.Data.Loading);
-
-function onAvatarLoadSuccess() {
-  if (!avatarImageRef.value) return;
-
-  avatarLoadingStatus.value = Status.Data.Loaded;
-  avatarImageRef.value.style.opacity = '1';
-}
-
-function onAvatarLoadError() {
-  if (!avatarImageRef.value) return;
-
-  avatarLoadingStatus.value = Status.Data.Error;
-  avatarImageRef.value.src = '/images/default-avatar.jpg';
-  avatarImageRef.value.style.opacity = '1';
-}
-</script>
-
-<style lang="scss" scoped>
-.player-avatar {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  position: relative;
-  min-height: 110px;
-
-  .loading {
-    top: 50%;
-    margin: 0;
-  }
-
-  img.player-avatar-image {
-    opacity: 0;
-  }
-}
-</style>

src/components/PlayerProfileView/ProfileRecentStats.vue

@@ -1,107 +0,0 @@
-<template>
-  <section class="profile-recent-stats">
-    <h2 class="stats-header">
-      <img src="/images/icon-stats.svg" width="30" alt="stats icon" />
-      {{ t('profile.recent-stats.header') }}
-    </h2>
-
-    <div class="month-stats-box">
-      <div class="month-stat">
-        <div><img src="/images/icon-train.svg" width="30" alt="train icon" /></div>
-        <div>
-          <h3 class="text--primary">{{ playerInfo.driverStatsLastMonth.countAll }}</h3>
-        </div>
-        <div>{{ t('profile.recent-stats.timetables') }}</div>
-      </div>
-
-      <div class="month-stat">
-        <div><img src="/images/icon-spawn.svg" width="30" alt="spawn icon" /></div>
-        <div>
-          <h3 class="text--primary">
-            {{ playerInfo.driverStatsLastMonth.currentDistanceTotal?.toFixed(2) || 0 }}
-          </h3>
-        </div>
-        <div>{{ t('profile.recent-stats.distance') }}</div>
-      </div>
-
-      <div class="month-stat">
-        <div><img src="/images/icon-user.svg" width="30" alt="user icon" /></div>
-        <div>
-          <h3 class="text--primary">
-            {{ playerInfo.dispatcherStatsLastMonth.services?.count || 0 }}
-          </h3>
-        </div>
-        <div>{{ t('profile.recent-stats.duties') }}</div>
-      </div>
-
-      <div class="month-stat">
-        <div><img src="/images/icon-timetable.svg" width="30" alt="timetable icon" /></div>
-        <div>
-          <h3 class="text--primary">
-            {{ playerInfo.dispatcherStatsLastMonth.issuedTimetables?.count || 0 }}
-          </h3>
-        </div>
-        <div>{{ t('profile.recent-stats.created-timetables') }}</div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script lang="ts" setup>
-import { PropType } from 'vue';
-import { API } from '../../typings/api';
-import { useI18n } from 'vue-i18n';
-
-const { t } = useI18n();
-
-defineProps({
-  playerInfo: {
-    type: Object as PropType<API.PlayerInfo.Data>,
-    required: true
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-@use '../../styles/responsive';
-
-.profile-recent-stats {
-  overflow: hidden;
-}
-
-.stats-header {
-  padding: 1em;
-
-  img {
-    vertical-align: text-bottom;
-  }
-}
-
-.month-stats-box {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 0.5em;
-  padding: 0.5em;
-}
-
-.month-stat {
-  background-color: var(--clr-bg-light);
-  border-radius: 0.5em;
-  padding: 0.5em;
-
-  h3 {
-    font-size: 1.3em;
-  }
-
-  div:nth-child(3) {
-    margin-top: 0.5em;
-    font-size: 0.9em;
-  }
-}
-
-@include responsive.smallScreen {
-  .month-stats-box {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-</style>

src/components/PlayerProfileView/ProfileSummary.vue

@@ -1,392 +0,0 @@
-<template>
-  <section class="profile-summary">
-    <div class="player-info">
-      <div class="info-main">
-        <ProfilePlayerAvatar :playerTD2Info="playerTD2Info" />
-
-        <div>
-          <h2 class="player-name-header" :class="{ 'text--donator': isPlayerDonator }">
-            <a :href="`https://td2.info.pl/profile/?u=${route.query.playerId}`" target="_blank">
-              <img
-                v-if="isPlayerDonator"
-                src="/images/icon-diamond.svg"
-                width="25"
-                alt="diamond icon"
-              />
-              {{ playerName }}
-            </a>
-          </h2>
-
-          <div class="player-badges">
-            <div class="badge-container" v-if="playerInfo.driverStats.driverLevel != null">
-              <span
-                class="level-badge driver"
-                :style="calculateExpStyles(playerInfo.driverStats.driverLevel)"
-              >
-                {{
-                  playerInfo.driverStats.driverLevel > 1 ? playerInfo.driverStats.driverLevel : 'L'
-                }}
-              </span>
-              {{ t('profile.stats.driver') }}
-            </div>
-
-            <div class="badge-container" v-if="playerInfo.dispatcherStats.dispatcherLevel != null">
-              <span
-                class="level-badge dispatcher"
-                :style="calculateExpStyles(playerInfo.dispatcherStats.dispatcherLevel)"
-              >
-                {{
-                  playerInfo.dispatcherStats.dispatcherLevel > 1
-                    ? playerInfo.dispatcherStats.dispatcherLevel
-                    : 'L'
-                }}
-              </span>
-              {{ t('profile.stats.dispatcher') }}
-            </div>
-          </div>
-
-          <div class="player-journal-links">
-            <router-link
-              class="a-button btn--action"
-              :to="`/journal/timetables?search-driver=${playerInfo.driverStats.driverName}`"
-            >
-              {{ t('profile.stats.timetables-journal') }}
-            </router-link>
-
-            <router-link
-              class="a-button btn--action"
-              :to="`/journal/dispatchers?search-dispatcher=${playerInfo.dispatcherStats.dispatcherName}`"
-            >
-              {{ t('profile.stats.dispatchers-journal') }}
-            </router-link>
-
-            <a
-              class="a-button btn--action"
-              :href="`https://td2.info.pl/profile/?u=${route.query.playerId}`"
-              target="_blank"
-            >
-              {{ t('profile.stats.forum-profile') }}
-            </a>
-          </div>
-
-          <!-- Current activities -->
-          <div
-            class="player-activities-box"
-            v-if="activeDispatches.length > 0 || activeTrains.length > 0"
-          >
-            <div class="info-activity" v-if="activeDispatches.length > 0">
-              <router-link
-                v-for="d in activeDispatches"
-                class="dispatcher-badge"
-                :to="`/scenery?station=${d.stationName}&region=${d.region}`"
-              >
-                <img src="/images/icon-user.svg" width="25" alt="user icon" />
-                <b>{{ d.stationName }} ({{ getRegionNameById(d.region) }})</b>
-                <StationStatusBadge :isOnline="true" :dispatcherStatus="d.dispatcherStatus" />
-              </router-link>
-            </div>
-
-            <div class="info-activity" v-if="activeTrains.length > 0">
-              <router-link
-                v-for="t in activeTrains"
-                :to="`/driver?trainId=${t.id}`"
-                class="driver-badge"
-              >
-                <img src="/images/icon-train.svg" width="25" alt="train icon" />
-                <span v-if="t.timetable" class="text--primary">{{ t.timetable.category }}</span>
-                <span>{{ t.trainNo }}</span>
-                &bull;
-                <span>{{ t.currentStationName }} ({{ getRegionNameById(t.region) }})</span>
-                &bull;
-                <span class="text--grayed">{{ t.stockString.split(';')[0] }}</span>
-              </router-link>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="player-stats">
-      <div class="stats-driver">
-        <h3 class="stats-header">
-          <img src="/images/icon-train.svg" width="30" alt="train icon" />
-          {{ t('profile.stats.header-driver') }}
-        </h3>
-        <hr />
-
-        <div v-if="playerInfo.driverStats.countAll > 0">
-          <div>
-            <b class="text--primary">
-              {{ playerInfo.driverStats.countFulfilled }} /
-              {{ playerInfo.driverStats.countAll }} ({{
-                getCountPercentage(
-                  playerInfo.driverStats.countFulfilled,
-                  playerInfo.driverStats.countAll,
-                  2
-                )
-              }}%)
-            </b>
-            - {{ t('profile.stats.fulfilled-timetables') }}
-          </div>
-          <div>
-            <b class="text--primary">
-              {{ playerInfo.driverStats.currentDistanceTotal?.toFixed(2) }} /
-              {{ playerInfo.driverStats.routeDistanceTotal?.toFixed(2) }} ({{
-                getCountPercentage(
-                  playerInfo.driverStats.currentDistanceTotal || 0,
-                  playerInfo.driverStats.routeDistanceTotal || 0,
-                  2
-                )
-              }}%)
-            </b>
-            - {{ t('profile.stats.route-distance') }}
-          </div>
-          <div>
-            <b class="text--primary">
-              {{ playerInfo.driverStats.confirmedStopsTotal }} /
-              {{ playerInfo.driverStats.allStopsTotal }} ({{
-                getCountPercentage(
-                  playerInfo.driverStats.confirmedStopsTotal || 0,
-                  playerInfo.driverStats.allStopsTotal || 0,
-                  2
-                )
-              }}%)
-            </b>
-            - {{ t('profile.stats.confirmed-stops') }}
-          </div>
-          <div>
-            <b class="text--primary">{{ playerInfo.driverStats.routeDistanceMax || 0 }}km</b> -
-            {{ t('profile.stats.longest-timetable') }}
-          </div>
-          <div>
-            <b class="text--primary">
-              {{ playerInfo.driverStats.routeDistanceAvg?.toFixed(2) || 0 }}km
-            </b>
-            - {{ t('profile.stats.avg-timetable-length') }}
-          </div>
-        </div>
-
-        <div class="text--grayed" v-else>
-          {{ t('profile.stats.no-timetable-stats') }}
-        </div>
-      </div>
-
-      <div
-        class="stats-dispatcher"
-        v-if="playerInfo.dispatcherStats && playerInfo.dispatcherStats.services?.count"
-      >
-        <h3 class="stats-header">
-          <img src="/images/icon-user.svg" width="30" alt="user icon" />
-          {{ t('profile.stats.header-dispatcher') }}
-        </h3>
-
-        <hr />
-
-        <div>
-          <b class="text--primary">{{ playerInfo.dispatcherStats.services.count }}</b> -
-          {{ t('profile.stats.duties-count') }}
-        </div>
-        <div>
-          <b class="text--primary">{{
-            humanizeDuration(playerInfo.dispatcherStats.services.durationMax)
-          }}</b>
-          - {{ t('profile.stats.longest-duty') }}
-        </div>
-
-        <div v-if="playerInfo.dispatcherStats.issuedTimetables">
-          <div>
-            <b class="text--primary">{{ playerInfo.dispatcherStats.issuedTimetables.count }}</b>
-            - {{ t('profile.stats.created-timetables-count') }}
-          </div>
-          <div>
-            <b class="text--primary">
-              {{ playerInfo.dispatcherStats.issuedTimetables.distanceMax }}km
-            </b>
-            - {{ t('profile.stats.longest-created-timetable') }}
-          </div>
-          <div>
-            <b class="text--primary">
-              {{ playerInfo.dispatcherStats.issuedTimetables.distanceSum.toFixed(2) }}km
-            </b>
-            - {{ t('profile.stats.created-timetables-length-sum') }}
-          </div>
-        </div>
-
-        <div class="text--grayed" v-else>
-          {{ t('profile.stats.no-dispatcher-stats') }}
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script lang="ts" setup>
-import { computed, onActivated, onMounted, PropType, ref, watch } from 'vue';
-import { API, Td2API } from '../../typings/api';
-import { calculateExpStyles } from '../../composables/badge';
-import { getCountPercentage } from '../../utils/calcUtils';
-import { humanizeDuration } from '../../composables/time';
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { useApiStore } from '../../store/apiStore';
-import StationStatusBadge from '../Global/StationStatusBadge.vue';
-import ProfilePlayerAvatar from './ProfilePlayerAvatar.vue';
-import { getRegionNameById } from '../../utils/regionUtils';
-
-const { t } = useI18n();
-
-const route = useRoute();
-const apiStore = useApiStore();
-
-const props = defineProps({
-  playerInfo: {
-    type: Object as PropType<API.PlayerInfo.Data>,
-    required: true
-  },
-
-  playerTD2Info: {
-    type: Object as PropType<Td2API.UsersInfoByName.UserInfo>
-  },
-
-  playerName: {
-    type: String
-  }
-});
-
-const isPlayerDonator = computed(() =>
-  props.playerName ? apiStore.donatorsData.includes(props.playerName) : false
-);
-
-const activeDispatches = computed(() => {
-  if (!props.playerName) return [];
-  if (!apiStore.activeData || !apiStore.activeData.activeSceneries) return [];
-
-  return apiStore.activeData.activeSceneries.filter(
-    (sc) =>
-      sc.dispatcherName == props.playerName && (sc.lastSeen >= Date.now() - 60000 || sc.isOnline)
-  );
-});
-
-const activeTrains = computed(() => {
-  if (!props.playerName) return [];
-  if (!apiStore.activeData || !apiStore.activeData.trains) return [];
-
-  return apiStore.activeData.trains.filter(
-    (t) => t.driverName == props.playerName && (t.lastSeen >= Date.now() - 60000 || t.online)
-  );
-});
-</script>
-
-<style lang="scss" scoped>
-@use '../../styles/badge';
-@use '../../styles/responsive';
-
-.profile-summary {
-  display: flex;
-  flex-direction: column;
-  gap: 1em;
-  overflow: auto;
-}
-
-.player-name-header {
-  margin: 0.5em 0;
-
-  a {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 0.25em;
-  }
-}
-
-.player-badges {
-  display: flex;
-  justify-content: center;
-  gap: 1em;
-}
-
-.badge-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 0.25em;
-
-  font-weight: bold;
-
-  & > .level-badge {
-    font-size: 1.15em;
-  }
-}
-
-.player-journal-links {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 0.5em;
-  margin-top: 1em;
-}
-
-.info-activity {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 1em;
-  margin-top: 1em;
-
-  .dispatcher-badge {
-    display: flex;
-    align-items: center;
-    gap: 0.25em;
-  }
-
-  .driver-badge {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
-
-    gap: 0.25em;
-    font-weight: bold;
-    border-radius: 0.5em;
-  }
-}
-
-.player-stats {
-  display: flex;
-  flex-direction: column;
-  gap: 1em;
-
-  hr {
-    margin: 0.5em 0;
-  }
-}
-
-.player-info,
-.player-stats > div {
-  background-color: var(--clr-tile);
-  border-radius: 0.5em;
-  padding: 1em;
-}
-
-.stats-header {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.25em;
-}
-
-@include responsive.midScreen {
-  .player-stats {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
-  }
-}
-
-@include responsive.smallScreen {
-  .player-stats {
-    display: grid;
-    grid-template-columns: 1fr;
-  }
-}
-</style>

src/components/SceneryView/SceneryDispatchersHistory.vue

@@ -127,8 +127,9 @@ export default defineComponent({
           this.station?.name || this.onlineScenery?.name
         }&countFrom=${countFrom}&countLimit=${countLimit}`;
 
-        const historyAPIData: API.DispatcherHistory.Response =
+        const historyAPIData: API.DispatcherHistory.Response = await (
-          await this.apiStore.client.get(requestString);
+          await this.apiStore.client!.get(requestString)
+        ).data;
 
         this.dataStatus = Status.Data.Loaded;
         return historyAPIData;
@@ -150,7 +151,6 @@ export default defineComponent({
 <style lang="scss" scoped>
 @use '../../styles/responsive';
 @use '../../styles/scenery-history-table';
-@use '../../styles/badge';
 
 .scenery-dispatchers-history {
   height: 100%;

src/components/SceneryView/SceneryHeader.vue

@@ -1,15 +1,19 @@
 <template>
   <section class="info-header">
-    <button class="btn btn-return" :title="$t('scenery.return-btn')" @click="onReturnButtonClick">
+    <button
+      class="btn btn-return"
+      :title="$t('scenery.return-btn')"
+      @click="onReturnButtonClick"
+    >
       <img src="/images/icon-back.svg" alt="return button" />
     </button>
 
-    <div class="scenery-name">
+    <a class="scenery-name" :href="station?.generalInfo?.url" target="_blank">
-      <a v-if="station?.generalInfo" :href="station.generalInfo.url" target="_blank">
+      {{ stationName.replace(/_/g, ' ') }}
-        {{ stationName.replace(/_/g, ' ') }}
+    </a>
-      </a>
 
-      <span v-else> {{ stationName.replace(/_/g, ' ') }}</span>
+    <div class="scenery-abbrev" v-if="station?.generalInfo?.abbr">
+      {{ $t('scenery.abbrev') }} <b>{{ station.generalInfo.abbr }}</b>
     </div>
 
     <div class="scenery-hash" v-if="onlineScenery?.hash">#{{ onlineScenery.hash }}</div>
@@ -57,14 +61,15 @@ function onReturnButtonClick() {
 .btn-return {
   $bgColor: #2b2b2b;
   background-color: $bgColor;
+  margin-bottom: 0.5em;
+
+  img {
+    width: 2em;
+  }
 
   &:hover {
     background-color: color.adjust($color: $bgColor, $lightness: 15%);
   }
-
-  img {
-    height: 2em;
-  }
 }
 
 .scenery-name {
@@ -76,7 +81,13 @@ function onReturnButtonClick() {
   text-transform: uppercase;
 }
 
+.scenery-abbrev {
+  font-size: 1.3em;
+  color: #aaa;
+}
+
 .scenery-hash {
+  margin-top: 0.5em;
   color: #aaa;
   font-size: 1.2em;
 }

src/components/SceneryView/SceneryInfo.vue

@@ -1,32 +1,29 @@
 <template>
   <div class="scenery-info">
     <section>
-      <div class="info-station-data" v-if="apiStore.dataStatuses.sceneries == Status.Data.Loaded">
+      <SceneryInfoIcons :station="station" />
-        <SceneryInfoIcons :station="station" />
+      <SceneryInfoGeneral :station="station" />
-        <SceneryInfoGeneral :station="station" />
+      <SceneryInfoRoutes v-if="station" :station="station" />
-        <SceneryInfoRoutes v-if="station" :station="station" />
+      <SceneryInfoAuthors :station="station" />
-        <SceneryInfoAuthors :station="station" />
-      </div>
 
-      <div class="info-station-loading" v-else>
+      <div style="margin: 1em 0; height: 2px; background-color: white"></div>
-        <Loading />
-      </div>
-
-      <div class="info-divider"></div>
 
+      <!-- info dispatcher -->
       <SceneryInfoDispatcher :onlineScenery="onlineScenery" />
 
-      <div class="info-online-lists">
+      <div class="info-lists">
+        <!-- user list -->
         <SceneryInfoUserList :onlineScenery="onlineScenery" :station="station" />
+
+        <!-- spawn list -->
         <SceneryInfoSpawnList :onlineScenery="onlineScenery" />
       </div>
     </section>
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts">
-import { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
-import { ActiveScenery, Station, Status } from '../../typings/common';
 
 import SceneryInfoDispatcher from './SceneryInfo/SceneryInfoDispatcher.vue';
 import SceneryInfoIcons from './SceneryInfo/SceneryInfoIcons.vue';
@@ -35,34 +32,47 @@ import SceneryInfoSpawnList from './SceneryInfo/SceneryInfoSpawnList.vue';
 import SceneryInfoRoutes from './SceneryInfo/SceneryInfoRoutes.vue';
 import SceneryInfoGeneral from './SceneryInfo/SceneryInfoGeneral.vue';
 import SceneryInfoAuthors from './SceneryInfo/SceneryInfoAuthors.vue';
-import { useApiStore } from '../../store/apiStore';
-import Loading from '../Global/Loading.vue';
 
-const apiStore = useApiStore();
+import { ActiveScenery, Station } from '../../typings/common';
 
-defineProps({
+export default defineComponent({
-  station: {
+  components: {
-    type: Object as PropType<Station>
+    SceneryInfoDispatcher,
+    SceneryInfoGeneral,
+    SceneryInfoIcons,
+    SceneryInfoAuthors,
+    SceneryInfoUserList,
+    SceneryInfoSpawnList,
+    SceneryInfoRoutes
   },
+  props: {
+    station: {
+      type: Object as PropType<Station>
+    },
 
-  onlineScenery: {
+    onlineScenery: {
-    type: Object as PropType<ActiveScenery>
+      type: Object as PropType<ActiveScenery>
+    }
   }
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @use '../../styles/responsive';
+@use '../../styles/badge';
+
+h3.section-header {
+  margin: 0.5em 0;
+  padding: 0.3em;
 
-.info-station-loading {
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
 
-  min-height: 300px;
+  font-size: 1.2em;
 }
 
-.info-online-lists {
+.info-lists {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
@@ -70,12 +80,6 @@ defineProps({
   margin-top: 1em;
 }
 
-.info-divider {
-  margin: 1em 0;
-  height: 3px;
-  background-color: #5b5b5b;
-}
-
 .scenery-topic a {
   font-weight: bold;
 }

src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue

@@ -8,7 +8,10 @@
         {{ onlineScenery.dispatcherExp > 1 ? onlineScenery.dispatcherExp : 'L' }}
       </span>
 
-      <router-link class="dispatcher-name" :to="`/profile?playerId=${onlineScenery.dispatcherId}`">
+      <router-link
+        class="dispatcher-name"
+        :to="`/journal/dispatchers?search-dispatcher=${onlineScenery.dispatcherName}`"
+      >
         <span
           class="text--donator"
           v-if="apiStore.donatorsData.includes(onlineScenery.dispatcherName)"
@@ -18,8 +21,6 @@
         </span>
         <span v-else>{{ onlineScenery.dispatcherName }}</span>
       </router-link>
-
-      <FlagIcon :languageId="onlineScenery.dispatcherLanguageId" width="1.25em" />
     </div>
 
     <div class="info-bottom">
@@ -50,11 +51,9 @@ import styleMixin from '../../../mixins/styleMixin';
 import StationStatusBadge from '../../Global/StationStatusBadge.vue';
 import { ActiveScenery } from '../../../typings/common';
 import { useApiStore } from '../../../store/apiStore';
-import FlagIcon from '../../Global/FlagIcon.vue';
 
 export default defineComponent({
   mixins: [styleMixin, dateMixin, routerMixin],
-  components: { StationStatusBadge, FlagIcon },
 
   data() {
     return {
@@ -67,7 +66,8 @@ export default defineComponent({
       type: Object as PropType<ActiveScenery>,
       required: false
     }
-  }
+  },
+  components: { StationStatusBadge }
 });
 </script>
 

src/components/SceneryView/SceneryInfo/SceneryInfoGeneral.vue

@@ -5,69 +5,51 @@
     </div>
 
     <div v-else>
-      <div>
+      <span>
-        <span>
+        <b>{{ $t('availability.title') }}:</b>
-          <a
+        {{ $t(`availability.${station.generalInfo.availability}`) }}
-            v-if="station?.generalInfo"
-            :href="station.generalInfo.url"
-            class="forum-link"
-            target="_blank"
-          >
-            {{ $t('scenery.forum-topic') }}
-          </a>
-        </span>
 
-        <span>
+        <span v-if="station.generalInfo.reqLevel > -1">
-          &bull;
+          -
-          <b>{{ $t('scenery.abbrev') }}</b> {{ station.generalInfo.abbr }}
+          {{
+            $t(
+              'scenery.req-level',
+              { lvl: station.generalInfo.reqLevel },
+              station.generalInfo.reqLevel
+            )
+          }}
         </span>
+      </span>
 
-        <span>
+      <span>
-          &bull; <b>{{ $t('availability.title') }}:</b>
+        &bull; <b>{{ $t('controls.title') }}:</b>
-          {{ $t(`availability.${station.generalInfo.availability}`) }}
+        {{ $t(`controls.${station.generalInfo.controlType}`) }}
+      </span>
 
-          <span v-if="station.generalInfo.reqLevel > -1">
+      <span>
-            -
+        &bull; <b>{{ $t('signals.title') }}:</b>
-            {{
+        {{ $t(`signals.${station.generalInfo.signalType}`) }}
-              $t(
+      </span>
-                'scenery.req-level',
-                { lvl: station.generalInfo.reqLevel },
-                station.generalInfo.reqLevel
-              )
-            }}
-          </span>
-        </span>
 
-        <span>
+      <span v-if="station.generalInfo.lines">
-          &bull; <b>{{ $t('controls.title') }}:</b>
+        &bull; <b>{{ $t('scenery.lines-title') }}:</b> {{ station.generalInfo.lines }}
-          {{ $t(`controls.${station.generalInfo.controlType}`) }}
+      </span>
-        </span>
 
-        <span>
+      <span v-if="station.generalInfo.project">
-          &bull; <b>{{ $t('signals.title') }}:</b>
+        &bull; <b>{{ $t('scenery.project-title') }}: </b>
-          {{ $t(`signals.${station.generalInfo.signalType}`) }}
+        <a
-        </span>
+          style="color: salmon; text-decoration: underline; font-weight: bold"
+          :href="station.generalInfo.projectUrl"
+          target="_blank"
+        >
+          {{ station.generalInfo.project }}
+        </a>
+      </span>
 
-        <span v-if="station.generalInfo.lines">
+      <span v-if="additionalTools.length != 0">
-          &bull; <b>{{ $t('scenery.lines-title') }}:</b> {{ station.generalInfo.lines }}
+        &bull; <b>{{ $t('scenery.additional-tools-title') }}: </b>
-        </span>
+        {{ additionalTools.join(', ') }}
-
+      </span>
-        <span v-if="station.generalInfo.project">
-          &bull; <b>{{ $t('scenery.project-title') }}: </b>
-          <a
-            style="color: salmon; text-decoration: underline; font-weight: bold"
-            :href="station.generalInfo.projectUrl"
-            target="_blank"
-          >
-            {{ station.generalInfo.project }}
-          </a>
-        </span>
-
-        <span v-if="additionalTools.length != 0">
-          &bull; <b>{{ $t('scenery.additional-tools-title') }}: </b>
-          {{ additionalTools.join(', ') }}
-        </span>
-      </div>
     </div>
   </section>
 </template>
@@ -102,14 +84,9 @@ export default defineComponent({
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
-}
 
-.scenery-abbrev {
+  div {
-  font-size: 1.05em;
+    margin: 0 0.15em;
-}
+  }
-
-a.forum-link {
-  text-decoration: underline;
-  font-weight: bold;
 }
 </style>

src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue

@@ -1,101 +1,102 @@
 <template>
-  <section class="info-icons-section">
+  <section class="info-icons">
-    <div class="icons-box">
+    <span v-if="!station || !station.generalInfo">
-      <span v-if="!station || !station.generalInfo">
-        <img
-          class="icon-info"
-          src="/images/icon-unknown.svg"
-          alt="icon-unknown"
-          :title="$t('sceneries.info.unknown')"
-        />
-      </span>
-
-      <span
-        v-if="station?.generalInfo && station?.generalInfo.reqLevel >= 0"
-        class="scenery-icon icon-info level"
-        :style="calculateExpStyles(station?.generalInfo.reqLevel)"
-      >
-        {{ station?.generalInfo.reqLevel >= 2 ? station?.generalInfo.reqLevel : 'L' }}
-      </span>
-
       <img
-        v-if="station?.generalInfo?.availability == 'nonPublic'"
         class="icon-info"
-        src="/images/icon-lock.svg"
+        src="/images/icon-unknown.svg"
-        alt="Non-public scenery"
+        alt="icon-unknown"
-        :title="$t('sceneries.info.non-public')"
+        :title="$t('sceneries.info.unknown')"
       />
+    </span>
 
-      <img
+    <span
-        v-if="station?.generalInfo?.availability == 'unavailable'"
+      v-if="station?.generalInfo && station?.generalInfo.reqLevel >= 0"
-        class="icon-info"
+      class="scenery-icon icon-info level"
-        src="/images/icon-unavailable.svg"
+      :style="calculateExpStyle(station?.generalInfo.reqLevel)"
-        alt="Unavailable scenery"
+    >
-        :title="$t('sceneries.info.unavailable')"
+      {{ station?.generalInfo.reqLevel >= 2 ? station?.generalInfo.reqLevel : 'L' }}
-      />
+    </span>
 
-      <img
+    <img
-        v-if="station?.generalInfo?.availability == 'abandoned'"
+      v-if="station?.generalInfo?.availability == 'nonPublic'"
-        class="icon-info"
+      class="icon-info"
-        src="/images/icon-abandoned.svg"
+      src="/images/icon-lock.svg"
-        alt="Abandoned scenery"
+      alt="Non-public scenery"
-        :title="$t('sceneries.info.abandoned')"
+      :title="$t('sceneries.info.non-public')"
-      />
+    />
 
-      <span
+    <img
-        v-if="station?.generalInfo"
+      v-if="station?.generalInfo?.availability == 'unavailable'"
-        class="scenery-icon icon-info"
+      class="icon-info"
-        :class="station?.generalInfo.controlType.replace('+', '-')"
+      src="/images/icon-unavailable.svg"
-        :title="
+      alt="Unavailable scenery"
-          $t('sceneries.info.control-type') + $t(`controls.${station?.generalInfo.controlType}`)
+      :title="$t('sceneries.info.unavailable')"
-        "
+    />
-      >
-        {{ $t(`controls.abbrevs.${station.generalInfo.controlType}`) }}
-      </span>
 
-      <img
+    <img
-        v-if="station?.generalInfo?.signalType"
+      v-if="station?.generalInfo?.availability == 'abandoned'"
-        class="icon-info"
+      class="icon-info"
-        :src="`/images/icon-${station.generalInfo.signalType}.svg`"
+      src="/images/icon-abandoned.svg"
-        :alt="station.generalInfo.signalType"
+      alt="Abandoned scenery"
-        :title="$t('sceneries.info.signals-type') + $t(`signals.${station.generalInfo.signalType}`)"
+      :title="$t('sceneries.info.abandoned')"
-      />
+    />
 
-      <img
+    <span
-        v-if="station?.generalInfo?.lines"
+      v-if="station?.generalInfo"
-        class="icon-info"
+      class="scenery-icon icon-info"
-        src="/images/icon-real.svg"
+      :class="station?.generalInfo.controlType.replace('+', '-')"
-        alt="real scenery"
+      :title="
-        :title="`${$t('sceneries.info.real')} ${station.generalInfo.lines}`"
+        $t('sceneries.info.control-type') + $t(`controls.${station?.generalInfo.controlType}`)
-      />
+      "
+    >
+      {{ $t(`controls.abbrevs.${station.generalInfo.controlType}`) }}
+    </span>
 
-      <img
+    <img
-        v-if="station?.generalInfo?.SUP"
+      v-if="station?.generalInfo?.signalType"
-        class="icon-info"
+      class="icon-info"
-        src="/images/icon-SUP.svg"
+      :src="`/images/icon-${station.generalInfo.signalType}.svg`"
-        alt="SUP (RASP-UZK)"
+      :alt="station.generalInfo.signalType"
-        :title="$t('sceneries.info.SUP')"
+      :title="$t('sceneries.info.signals-type') + $t(`signals.${station.generalInfo.signalType}`)"
-      />
+    />
 
-      <img
+    <img
-        v-if="station?.generalInfo?.ASDEK"
+      v-if="station?.generalInfo?.lines"
-        class="icon-info"
+      class="icon-info"
-        src="/images/icon-ASDEK.svg"
+      src="/images/icon-real.svg"
-        alt="dSAT ASDEK"
+      alt="real scenery"
-        :title="$t('sceneries.info.ASDEK')"
+      :title="`${$t('sceneries.info.real')} ${station.generalInfo.lines}`"
-      />
+    />
-    </div>
+
+    <img
+      v-if="station?.generalInfo?.SUP"
+      class="icon-info"
+      src="/images/icon-SUP.svg"
+      alt="SUP (RASP-UZK)"
+      :title="$t('sceneries.info.SUP')"
+    />
+
+    <img
+      v-if="station?.generalInfo?.ASDEK"
+      class="icon-info"
+      src="/images/icon-ASDEK.svg"
+      alt="dSAT ASDEK"
+      :title="$t('sceneries.info.ASDEK')"
+    />
   </section>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts">
-import { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
+import styleMixin from '../../../mixins/styleMixin';
 import { Station } from '../../../typings/common';
-import { calculateExpStyles } from '../../../composables/badge';
 
-defineProps({
+export default defineComponent({
-  station: {
+  mixins: [styleMixin],
-    type: Object as PropType<Station>
+  props: {
+    station: {
+      type: Object as PropType<Station>
+    }
   }
 });
 </script>
@@ -103,12 +104,12 @@ defineProps({
 <style lang="scss" scoped>
 @use '../../../styles/icons';
 
-.icons-box {
+.info-icons {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
 
-  margin: 0.5em;
+  margin: 1em;
 }
 
 .icon-info {

src/components/SceneryView/SceneryInfo/SceneryInfoRoutes.vue

@@ -1,18 +1,18 @@
 <template>
   <section class="info-routes" v-if="station.generalInfo">
-    <div class="routes one-way" v-if="singleRoutesAvailable.length > 0">
+    <div class="routes one-way" v-if="oneWayRoutes.length > 0">
       <button
         class="routes-btn"
         @click="toggleRoutesVisibility('single')"
         data-tooltip-type="BaseTooltip"
-        :data-tooltip-content="`${showInternalSingleRoutes ? $t('scenery.btn-show-internal-routes') : $t('scenery.btn-hide-internal-routes')}`"
+        :data-tooltip-content="`${showInternalSingleRoutes ? $t('scenery.btn-hide-internal-routes') : $t('scenery.btn-show-internal-routes')}`"
       >
         <b>{{ $t('scenery.one-way-routes') }}</b>
         <i class="fa-solid" :class="`${showInternalSingleRoutes ? 'fa-eye' : 'fa-eye-slash'}`"></i>
       </button>
 
       <ul class="routes-list">
-        <li v-for="route in singleRoutesFiltered" :key="route.routeName">
+        <li v-for="route in oneWayRoutes" :key="route.routeName">
           <span :class="{ 'no-catenary': !route.isElectric, internal: route.isInternal }">
             {{ route.routeName }}</span
           >
@@ -24,29 +24,22 @@
           </span>
           <span v-if="route.isRouteSBL" class="sbl">SBL</span>
         </li>
-
-        <li v-if="singleRoutesFiltered.length == 0">
-          <span class="routes-hidden">
-            <i class="fa-solid fa-eye-slash"></i>
-            {{ $t('scenery.routes-hidden') }}
-          </span>
-        </li>
       </ul>
     </div>
 
-    <div class="routes two-way" v-if="doubleRoutesAvailable.length > 0">
+    <div class="routes two-way" v-if="twoWayRoutes.length > 0">
       <button
         class="routes-btn"
         @click="toggleRoutesVisibility('double')"
         data-tooltip-type="BaseTooltip"
-        :data-tooltip-content="`${showInternalDoubleRoutes ? $t('scenery.btn-show-internal-routes') : $t('scenery.btn-hide-internal-routes')}`"
+        :data-tooltip-content="`${showInternalDoubleRoutes ? $t('scenery.btn-hide-internal-routes') : $t('scenery.btn-show-internal-routes')}`"
       >
         <b>{{ $t('scenery.two-way-routes') }}</b>
         <i class="fa-solid" :class="`${showInternalDoubleRoutes ? 'fa-eye' : 'fa-eye-slash'}`"></i>
       </button>
 
       <ul class="routes-list">
-        <li v-for="route in doubleRoutesFiltered" :key="route.routeName">
+        <li v-for="route in twoWayRoutes" :key="route.routeName">
           <span :class="{ 'no-catenary': !route.isElectric, internal: route.isInternal }">
             {{ route.routeName }}
           </span>
@@ -61,13 +54,6 @@
           </span>
           <span v-if="route.isRouteSBL" class="sbl">SBL</span>
         </li>
-
-        <li v-if="doubleRoutesFiltered.length == 0">
-          <span class="routes-hidden">
-            <i class="fa-solid fa-eye-slash"></i>
-            {{ $t('scenery.routes-hidden') }}
-          </span>
-        </li>
       </ul>
     </div>
   </section>
@@ -116,32 +102,20 @@ export default defineComponent({
   },
 
   computed: {
-    singleRoutesAvailable() {
+    oneWayRoutes() {
       return (
         this.station.generalInfo?.routes.single
-          .filter((r) => !r.hidden)
+          .filter((r) => !r.isInternal || r.isInternal == this.showInternalSingleRoutes)
           .sort((r1, r2) => r1.routeName.localeCompare(r2.routeName)) ?? []
       );
     },
 
-    doubleRoutesAvailable() {
+    twoWayRoutes() {
       return (
         this.station.generalInfo?.routes.double
-          .filter((r) => !r.hidden)
+          .filter((r) => !r.isInternal || r.isInternal == this.showInternalDoubleRoutes)
           .sort((r1, r2) => r1.routeName.localeCompare(r2.routeName)) ?? []
       );
-    },
-
-    singleRoutesFiltered() {
-      return this.singleRoutesAvailable.filter(
-        (r) => this.showInternalSingleRoutes || !r.isInternal
-      );
-    },
-
-    doubleRoutesFiltered() {
-      return this.doubleRoutesAvailable.filter(
-        (r) => this.showInternalDoubleRoutes || !r.isInternal
-      );
     }
   }
 });
@@ -180,6 +154,11 @@ ul.routes-list {
 
   li {
     margin: 0.5em 0.25em;
+    cursor: pointer;
+
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
 
     & > span {
       padding: 0.2em;
@@ -203,16 +182,11 @@ ul.routes-list {
         background-color: #303030;
         color: #cfcfcf;
       }
-
       &.sbl {
         color: var(--clr-primary);
         background-color: #404040;
       }
 
-      &.routes-hidden {
-        background-color: #4b4b4b;
-      }
-
       &:last-child {
         border-radius: 0 0.5em 0.5em 0;
       }

src/components/SceneryView/SceneryInfo/SceneryInfoSpawnList.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="info-spawn-list">
-    <h3 class="spawn-header">
+    <h3 class="spawn-header section-header">
       <img src="/images/icon-spawn.svg" alt="Open spawns icon" />
       &nbsp;{{ $t('scenery.spawns') }} &nbsp;
       <span class="text--primary">{{ onlineScenery?.spawns.length || '0' }}</span>
@@ -53,23 +53,10 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@use '../../../styles/badge';
-
 ul {
   position: relative;
 }
 
-h3.spawn-header {
-  margin: 0.5em 0;
-  padding: 0.3em;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  font-size: 1.2em;
-}
-
 .spawns-anim {
   &-move,
   &-enter-active,

src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="info-user-list">
-    <h3 class="user-header">
+    <h3 class="user-header section-header">
       <img src="/images/icon-user.svg" alt="Users icon" />
       &nbsp;{{ $t('scenery.users') }} &nbsp;
       <span class="text--primary">{{ onlineScenery?.stationTrains?.length || 0 }}</span
@@ -29,8 +29,7 @@
             <i
               v-if="
                 train.timetableData != undefined &&
-                train.lastSeen <= Date.now() - 60000 &&
+                (train.lastSeen <= Date.now() - 60000 || !train.online)
-                !train.online
               "
               class="fa-solid fa-user-slash"
               style="color: lightcoral"
@@ -112,8 +111,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@use '../../../styles/badge';
-
 $no-timetable: #aaa;
 $departed: springgreen;
 $stopped: #ffa600;
@@ -121,17 +118,6 @@ $online: gold;
 $terminated: salmon;
 $disconnected: slategray;
 
-h3.user-header {
-  margin: 0.5em 0;
-  padding: 0.3em;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  font-size: 1.2em;
-}
-
 .info-user-list {
   width: 100%;
 }

src/components/SceneryView/SceneryTimetable.vue

@@ -1,18 +1,247 @@
 <template>
   <section class="scenery-timetable">
-    <SceneryTimetableHeader
+    <div class="timetable-header">
-      :station="station"
+      <h3>
-      :onlineScenery="onlineScenery"
+        <img src="/images/icon-timetable.svg" alt="icon-timetable" />
-      :chosenCheckpoint="chosenCheckpoint"
+        <span>{{ $t('scenery.timetables') }}</span>
-      :showStockThumbnails="showStockThumbnails"
-    />
 
-    <SceneryTimetableList
+        <span>
-      :station="station"
+          <span class="text--primary">{{ onlineScenery?.scheduledTrainCount.all ?? 0 }}</span>
-      :onlineScenery="onlineScenery"
+          <span> / </span>
-      :chosenCheckpoint="chosenCheckpoint"
+          <span class="text--grayed">
-      :showStockThumbnails="showStockThumbnails"
+            {{ onlineScenery?.scheduledTrainCount.confirmed ?? 0 }}
-    />
+          </span>
+        </span>
+
+        <span class="header_links" v-if="station && onlineScenery">
+          <a
+            :href="generatorHref"
+            target="_blank"
+            data-tooltip-type="HtmlTooltip"
+            :data-tooltip-content="`<b>${$t('scenery.gnr-link')}</b>`"
+          >
+            <img src="/images/icon-gnr.svg" alt="GeneraTOR app icon" />
+          </a>
+
+          <a
+            :href="pragotronHref"
+            target="_blank"
+            data-tooltip-type="HtmlTooltip"
+            :data-tooltip-content="`<b>${$t('scenery.pragotron-link')}</b>`"
+          >
+            <img src="/images/icon-pragotron.svg" alt="icon-pragotron" />
+          </a>
+
+          <a
+            :href="tabliceZbiorczeHref"
+            target="_blank"
+            data-tooltip-type="HtmlTooltip"
+            :data-tooltip-content="`<b>${$t('scenery.tablice-link')}</b>`"
+          >
+            <img src="/images/icon-tablice.ico" alt="icon-tablice" />
+          </a>
+        </span>
+      </h3>
+
+      <div class="timetable-checkpoints" v-if="station?.generalInfo?.checkpoints">
+        <template v-for="(ch, i) in station.generalInfo.checkpoints" :key="i">
+          <template v-if="i > 0">&bull;</template>
+          <router-link
+            class="checkpoint-item"
+            :class="{ current: chosenCheckpoint === ch }"
+            :to="`/scenery?station=${station.name}&checkpoint=${ch}`"
+            >{{ ch }}</router-link
+          >
+        </template>
+      </div>
+
+      <div class="timetable-checkpoints" v-else-if="onlineScenery">
+        <template v-for="(ch, i) in onlineScenery.missingCheckpoints" :key="i">
+          <template v-if="i > 0">&bull;</template>
+          <router-link
+            class="checkpoint-item"
+            :class="{ current: chosenCheckpoint === ch }"
+            :to="`/scenery?station=${onlineScenery.name}&checkpoint=${ch}`"
+            >{{ ch }}</router-link
+          >
+        </template>
+      </div>
+    </div>
+
+    <div class="timetable-list">
+      <transition-group name="list-anim">
+        <div
+          v-if="apiStore.dataStatuses.connection == 0 && sceneryTimetables.length == 0"
+          style="padding-bottom: 5em"
+          key="list-loading"
+        >
+          <Loading />
+        </div>
+
+        <span
+          class="timetable-item empty"
+          v-else-if="sceneryTimetables.length == 0 && !onlineScenery"
+          key="list-offline"
+        >
+          {{ $t('scenery.offline') }}
+        </span>
+
+        <div
+          class="timetable-item empty"
+          v-else-if="sceneryTimetables.length == 0"
+          key="list-no-timetables"
+        >
+          {{ $t('scenery.no-timetables') }}
+        </div>
+
+        <router-link
+          class="timetable-item"
+          v-else
+          v-for="(row, i) in sceneryTimetables"
+          :key="row.train.id + i"
+          tabindex="0"
+          :to="row.train.driverRouteLocation"
+        >
+          <span class="timetable-general">
+            <span class="general-info">
+              <div class="info-train">
+                <!-- Cargo warnings & details badges -->
+                <span
+                  class="train-badge twr"
+                  v-if="row.train.timetableData!.twr"
+                  data-tooltip-type="BaseTooltip"
+                  :data-tooltip-content="$t('warnings.TWR')"
+                >
+                  TWR
+                </span>
+
+                <span
+                  class="train-badge tn"
+                  v-if="row.train.timetableData!.hasDangerousCargo"
+                  data-tooltip-type="BaseTooltip"
+                  :data-tooltip-content="$t('warnings.TN')"
+                >
+                  TN
+                </span>
+
+                <span
+                  class="train-badge pn"
+                  v-if="row.train.timetableData!.hasExtraDeliveries"
+                  data-tooltip-type="BaseTooltip"
+                  :data-tooltip-content="$t('warnings.PN')"
+                >
+                  PN
+                </span>
+
+                <!-- Train info -->
+                <span
+                  data-tooltip-type="TrainInfoTooltip"
+                  :data-tooltip-content="row.train.id"
+                  class="tooltip-help"
+                >
+                  <b class="text--primary">
+                    {{ row.train.timetableData!.category }}
+                  </b>
+
+                  <b>&nbsp;{{ row.train.trainNo }}</b>
+                  &bull;
+                  {{ row.train.driverName }}
+
+                  <i
+                    class="fa-solid fa-user-slash"
+                    style="color: salmon"
+                    v-if="!row.train.online && row.train.lastSeen <= Date.now() - 60000"
+                  ></i>
+                </span>
+
+                <!-- Train stop comments -->
+                <span
+                  v-if="row.checkpointStop.comments"
+                  class="stop-comments-icon"
+                  data-tooltip-type="BaseTooltip"
+                  :data-tooltip-content="row.checkpointStop.comments"
+                >
+                  <img src="/images/icon-warning.svg" />
+                </span>
+              </div>
+
+              <div class="info-route">
+                <strong>{{ row.train.timetableData!.route.replace('|', ' - ') }}</strong>
+              </div>
+
+              <ScheduledTrainStatus :sceneryTimetableRow="row" />
+            </span>
+          </span>
+
+          <span class="timetable-schedule">
+            <span class="schedule-arrival">
+              <span class="arrival-time begins" v-if="row.checkpointStop.beginsHere">
+                {{ $t('timetables.begins') }}
+              </span>
+
+              <span class="arrival-time" v-else>
+                <div v-if="row.checkpointStop.arrivalDelay == 0">
+                  <span>{{ timestampToString(row.checkpointStop.arrivalTimestamp) }}</span>
+                </div>
+                <div v-else>
+                  <div>
+                    <s style="margin-right: 0.2em" class="text--grayed">{{
+                      timestampToString(row.checkpointStop.arrivalTimestamp)
+                    }}</s>
+                  </div>
+
+                  <span>
+                    {{ timestampToString(row.checkpointStop.arrivalRealTimestamp) }}
+                    ({{ row.checkpointStop.arrivalDelay > 0 ? '+' : ''
+                    }}{{ row.checkpointStop.arrivalDelay }})
+                  </span>
+                </div>
+              </span>
+            </span>
+
+            <span class="schedule-stop">
+              <span class="stop-connection">
+                {{ row.currentElement.arrivalRouteExt }}
+              </span>
+
+              <span class="stop-time">
+                {{ row.checkpointStop.stopTime || '' }}
+                {{ row.checkpointStop.stopTime ? row.checkpointStop.stopType || 'pt' : '' }}
+              </span>
+
+              <span class="stop-connection">
+                {{ row.currentElement.departureRouteExt }}
+              </span>
+            </span>
+
+            <span class="schedule-departure">
+              <span class="departure-time terminates" v-if="row.checkpointStop.terminatesHere">
+                {{ $t('timetables.terminates') }}
+              </span>
+
+              <span class="departure-time" v-else>
+                <div v-if="row.checkpointStop.departureDelay == 0">
+                  <span>{{ timestampToString(row.checkpointStop.departureTimestamp) }}</span>
+                </div>
+                <div v-else>
+                  <div>
+                    <s style="margin-right: 0.2em" class="text--grayed">{{
+                      timestampToString(row.checkpointStop.departureTimestamp)
+                    }}</s>
+                  </div>
+
+                  <span>
+                    {{ timestampToString(row.checkpointStop.departureRealTimestamp) }}
+                    ({{ row.checkpointStop.departureDelay > 0 ? '+' : ''
+                    }}{{ row.checkpointStop.departureDelay }})
+                  </span>
+                </div>
+              </span>
+            </span>
+          </span>
+        </router-link>
+      </transition-group>
+    </div>
   </section>
 </template>
 
@@ -20,21 +249,21 @@
 import { computed, defineComponent, PropType, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
-import SceneryTimetableHeader from './SceneryTimetable/SceneryTimetableHeader.vue';
+import Loading from '../Global/Loading.vue';
-
 import dateMixin from '../../mixins/dateMixin';
 import routerMixin from '../../mixins/routerMixin';
 import trainCategoryMixin from '../../mixins/trainCategoryMixin';
 import { useMainStore } from '../../store/mainStore';
 import { useApiStore } from '../../store/apiStore';
-import { ActiveScenery, Station } from '../../typings/common';
+import ScheduledTrainStatus from './ScheduledTrainStatus.vue';
-import SceneryTimetableList from './SceneryTimetable/SceneryTimetableList.vue';
+import { SceneryTimetableRow } from './typings';
-import StorageManager from '../../managers/storageManager';
+import { ActiveScenery, Station, TooltipTrainInfo, Train } from '../../typings/common';
+import { getTrainStopStatus, stopStatusPriority } from './utils';
 
 export default defineComponent({
   name: 'SceneryTimetable',
 
-  components: { SceneryTimetableHeader, SceneryTimetableList },
+  components: { Loading, ScheduledTrainStatus },
 
   mixins: [dateMixin, routerMixin, trainCategoryMixin],
 
@@ -48,8 +277,7 @@ export default defineComponent({
   },
 
   data: () => ({
-    listOpen: false,
+    listOpen: false
-    showStockThumbnails: false
   }),
 
   activated() {
@@ -85,6 +313,69 @@ export default defineComponent({
     };
   },
 
+  computed: {
+    tabliceZbiorczeHref() {
+      let url = `https://tablice-td2.web.app/?station=${this.station!.name}`;
+      if (this.chosenCheckpoint) url += `&checkpoint=${this.chosenCheckpoint}`;
+
+      return url;
+    },
+
+    pragotronHref() {
+      let url = `https://pragotron-td2.web.app/board?name=${this.station!.name}&region=${this.mainStore.region.id}`;
+      if (this.chosenCheckpoint) url += `&checkpoint=${this.chosenCheckpoint}`;
+
+      return url;
+    },
+
+    generatorHref() {
+      return `https://generator-td2.web.app/?sceneryId=${this.onlineScenery!.name}|${this.onlineScenery!.region}`;
+    },
+
+    sceneryTimetables(): SceneryTimetableRow[] {
+      if (!this.onlineScenery) return [];
+
+      const sceneryName = this.$route.query['station']?.toString().replace(/_/g, ' ') ?? '';
+
+      return this.onlineScenery.scheduledTrains
+        .filter(
+          (ct) =>
+            // ct.timetablePathElement.stationName == sceneryName &&
+            ct.train.region == this.mainStore.region.id &&
+            this.chosenCheckpoint &&
+            ct.checkpointStop.stopNameRAW.toLowerCase() == this.chosenCheckpoint.toLowerCase()
+        )
+        .map((ct) => {
+          const trainStopStatus = getTrainStopStatus(
+            ct.checkpointStop,
+            ct.train.currentStationName,
+            sceneryName
+          );
+
+          return {
+            checkpointStop: ct.checkpointStop,
+            train: ct.train,
+            prevElement: ct.previousSceneryElement,
+            nextElement: ct.nextSceneryElement,
+            currentElement: ct.timetablePathElement,
+            status: trainStopStatus
+          };
+        })
+        .sort((a, b) => {
+          if (stopStatusPriority.indexOf(a.status) - stopStatusPriority.indexOf(b.status) < 0)
+            return -1;
+
+          if (stopStatusPriority.indexOf(a.status) - stopStatusPriority.indexOf(b.status) > 0)
+            return 1;
+
+          if (a.checkpointStop.arrivalTimestamp > b.checkpointStop.arrivalTimestamp) return 1;
+          if (a.checkpointStop.arrivalTimestamp < b.checkpointStop.arrivalTimestamp) return -1;
+
+          return a.checkpointStop.departureTimestamp > b.checkpointStop.departureTimestamp ? 1 : -1;
+        });
+    }
+  },
+
   methods: {
     loadSelectedOption() {
       const queryCheckpoint = this.$route.query['checkpoint']?.toString();
@@ -111,16 +402,205 @@ export default defineComponent({
           checkpointsListRef[0] ??
           sceneryName;
       }
+    },
+
+    setCheckpoint(cp: string) {
+      this.chosenCheckpoint = cp;
     }
   }
 });
 </script>
 
 <style lang="scss" scoped>
+@use '../../styles/responsive';
+@use '../../styles/animations';
+@use '../../styles/badge';
+
 .scenery-timetable {
-  display: grid;
   height: 100%;
-  overflow: hidden;
+  overflow-y: scroll;
-  grid-template-rows: auto 1fr;
+  padding: 0 0.5em;
+}
+
+.timetable-header {
+  position: sticky;
+  top: 0;
+  z-index: 99;
+
+  background-color: #181818;
+
+  padding: 0.5em;
+
+  img {
+    width: 25px;
+    vertical-align: middle;
+  }
+
+  h3 {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    align-items: center;
+
+    gap: 0.5em;
+    font-size: 1.3em;
+  }
+}
+
+.header_links {
+  display: flex;
+  gap: 0.25em;
+  margin-left: 0.5em;
+}
+
+.timetable {
+  &-count {
+    margin-left: 0.5em;
+  }
+
+  &-item {
+    margin: 0.5em auto;
+    padding: 0.5em;
+    max-width: 1100px;
+
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 1.2em 0.5em;
+
+    overflow: hidden;
+
+    background: #353535;
+
+    z-index: 10;
+
+    &.empty {
+      padding: 1rem;
+      font-size: 1.2em;
+      color: #bbb;
+    }
+  }
+
+  &-general {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    text-align: left;
+  }
+
+  &-schedule {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.2em;
+    align-items: center;
+
+    width: 100%;
+    max-width: 400px;
+    margin: 0 auto;
+  }
+}
+
+.timetable-checkpoints {
+  display: flex;
+  justify-content: center;
+  gap: 0.5em;
+
+  flex-wrap: wrap;
+  font-size: 1.1em;
+
+  margin-top: 0.5em;
+}
+
+.checkpoint-item {
+  color: #aaa;
+  display: inline;
+
+  &:hover {
+    color: white;
+  }
+
+  &.current {
+    font-weight: bold;
+    color: var(--clr-primary);
+  }
+}
+
+.timetable-list {
+  position: relative;
+}
+
+.general-info {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+}
+
+.info-train {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25em;
+}
+
+.info-train > .train-badge {
+  font-size: 0.85em;
+}
+
+.info-number {
+  color: var(--clr-primary);
+}
+
+.info-route {
+  width: 100%;
+  margin-top: 0.25em;
+}
+
+.stop-comments-icon > img {
+  width: 1.3em;
+  vertical-align: top;
+}
+
+.schedule {
+  &-arrival,
+  &-departure {
+    font-size: 1.15em;
+  }
+
+  &-stop {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.5em;
+    align-items: end;
+
+    .stop-connection {
+      font-size: 0.95em;
+    }
+
+    .stop-time {
+      position: relative;
+      inline-size: max-content;
+      align-self: center;
+      font-size: 0.9em;
+
+      color: var(--clr-primary);
+
+      &::after {
+        content: '\027F6';
+        display: block;
+        font-size: 2.2em;
+        line-height: 0.65em;
+      }
+    }
+  }
+}
+
+.arrival-time.begins,
+.departure-time.terminates {
+  font-size: 0.85em;
+}
+
+@include responsive.smallScreen {
+  .timetable-item {
+    grid-template-columns: 1fr;
+  }
 }
 </style>

src/components/SceneryView/SceneryTimetable/SceneryTimetableHeader.vue

@@ -1,54 +0,0 @@
-<template>
-  <div class="scenery-timetable-header">
-    <h3>
-      <img src="/images/icon-timetable.svg" alt="icon-timetable" />
-      <span>{{ $t('scenery.timetables') }}</span>
-
-      <span>
-        <span class="text--primary">{{ onlineScenery?.scheduledTrainCount.all ?? 0 }}</span>
-        <span> / </span>
-        <span class="text--grayed">
-          {{ onlineScenery?.scheduledTrainCount.confirmed ?? 0 }}
-        </span>
-      </span>
-    </h3>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, PropType } from 'vue';
-import { Station, ActiveScenery } from '../../../typings/common';
-import { useMainStore } from '../../../store/mainStore';
-
-const props = defineProps({
-  station: {
-    type: Object as PropType<Station>
-  },
-
-  onlineScenery: {
-    type: Object as PropType<ActiveScenery>
-  },
-
-  chosenCheckpoint: {
-    type: String,
-    required: true
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-.scenery-timetable-header {
-  background-color: #181818;
-  padding: 0.5em;
-}
-
-h3 {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  align-items: center;
-
-  gap: 0.5em;
-  font-size: 1.3em;
-}
-</style>

src/components/SceneryView/SceneryTimetable/SceneryTimetableList.vue

@@ -1,567 +0,0 @@
-<template>
-  <div class="scenery-timetable-list">
-    <!-- Checkpoints derived from station data -->
-
-    <div
-      class="timetable-checkpoints"
-      v-if="station?.generalInfo && station.generalInfo.checkpoints.length > 0"
-    >
-      <template v-for="(ch, i) in station.generalInfo.checkpoints" :key="i">
-        <template v-if="i > 0">&bull;</template>
-        <router-link
-          class="checkpoint-item"
-          :class="{ current: chosenCheckpoint === ch }"
-          :to="`/scenery?station=${station.name}&checkpoint=${ch}`"
-        >
-          {{ ch }}
-        </router-link>
-      </template>
-    </div>
-
-    <!-- Missing checkpoints if scenery is not in database -->
-    <div
-      class="timetable-checkpoints"
-      v-else-if="onlineScenery && onlineScenery.missingCheckpoints.length > 0"
-    >
-      <template v-for="(ch, i) in onlineScenery.missingCheckpoints" :key="i">
-        <template v-if="i > 0">&bull;</template>
-        <router-link
-          class="checkpoint-item"
-          :class="{ current: chosenCheckpoint === ch }"
-          :to="`/scenery?station=${onlineScenery.name}&checkpoint=${ch}`"
-        >
-          {{ ch }}
-        </router-link>
-      </template>
-    </div>
-
-    <div v-else></div>
-
-    <div class="list-container">
-      <transition-group name="list-anim">
-        <div
-          v-if="apiStore.dataStatuses.connection == 0 && sceneryTimetables.length == 0"
-          style="padding-bottom: 5em"
-          key="list-loading"
-        >
-          <Loading />
-        </div>
-
-        <div
-          class="timetable-item empty"
-          v-else-if="sceneryTimetables.length == 0 && !onlineScenery"
-          key="list-offline"
-        >
-          {{ $t('scenery.offline') }}
-        </div>
-
-        <div
-          class="timetable-item empty"
-          v-else-if="sceneryTimetables.length == 0"
-          key="list-no-timetables"
-        >
-          {{ $t('scenery.no-timetables') }}
-        </div>
-
-        <router-link
-          v-for="row in sceneryTimetables"
-          class="timetable-item"
-          :to="row.train.driverRouteLocation"
-          :key="row.train.id"
-        >
-          <div class="item-top">
-            <div class="top-general">
-              <span class="general-info">
-                <div class="info-train">
-                  <!-- Cargo warnings & details badges -->
-                  <span
-                    class="train-badge twr"
-                    v-if="row.train.timetableData!.twr"
-                    data-tooltip-type="BaseTooltip"
-                    :data-tooltip-content="$t('warnings.TWR')"
-                  >
-                    TWR
-                  </span>
-
-                  <span
-                    class="train-badge tn"
-                    v-if="row.train.timetableData!.hasDangerousCargo"
-                    data-tooltip-type="BaseTooltip"
-                    :data-tooltip-content="$t('warnings.TN')"
-                  >
-                    TN
-                  </span>
-
-                  <span
-                    class="train-badge pn"
-                    v-if="row.train.timetableData!.hasExtraDeliveries"
-                    data-tooltip-type="BaseTooltip"
-                    :data-tooltip-content="$t('warnings.PN')"
-                  >
-                    PN
-                  </span>
-
-                  <!-- Train info -->
-                  <span
-                    data-tooltip-type="TrainInfoTooltip"
-                    :data-tooltip-content="row.train.id"
-                    class="tooltip-help"
-                  >
-                    <b class="text--primary">
-                      {{ row.train.timetableData!.category }}
-                    </b>
-
-                    <b>&nbsp;{{ row.train.trainNo }}</b>
-                    &bull;
-                    {{ row.train.driverName }}
-
-                    <i
-                      class="fa-solid fa-user-slash"
-                      style="color: salmon"
-                      v-if="!row.train.online && row.train.lastSeen <= Date.now() - 60000"
-                    ></i>
-                  </span>
-
-                  <!-- Train stop comments -->
-                  <span
-                    v-if="row.checkpointStop.comments"
-                    class="stop-comments-icon"
-                    data-tooltip-type="BaseTooltip"
-                    :data-tooltip-content="row.checkpointStop.comments"
-                  >
-                    <img src="/images/icon-warning.svg" />
-                  </span>
-                </div>
-
-                <div class="info-route">
-                  <strong>{{ row.train.timetableData!.route.replace('|', ' - ') }}</strong>
-                </div>
-
-                <ScheduledTrainStatus :sceneryTimetableRow="row" />
-              </span>
-            </div>
-
-            <div class="top-schedule">
-              <span class="schedule-arrival">
-                <span class="arrival-time begins" v-if="row.checkpointStop.beginsHere">
-                  {{ $t('timetables.begins') }}
-                </span>
-
-                <span class="arrival-time" v-else>
-                  <div v-if="row.checkpointStop.arrivalDelay == 0">
-                    <span>{{ timestampToTimeString(row.checkpointStop.arrivalTimestamp) }}</span>
-                  </div>
-                  <div v-else>
-                    <div>
-                      <s style="margin-right: 0.2em" class="text--grayed">{{
-                        timestampToTimeString(row.checkpointStop.arrivalTimestamp)
-                      }}</s>
-                    </div>
-
-                    <span>
-                      {{ timestampToTimeString(row.checkpointStop.arrivalRealTimestamp) }}
-                      ({{ row.checkpointStop.arrivalDelay > 0 ? '+' : ''
-                      }}{{ row.checkpointStop.arrivalDelay }})
-                    </span>
-                  </div>
-                </span>
-              </span>
-
-              <span class="schedule-stop">
-                <span class="stop-connection">
-                  {{ row.currentElement.arrivalRouteExt }}
-                </span>
-
-                <span class="stop-time">
-                  {{ row.checkpointStop.stopTime || '' }}
-                  {{ row.checkpointStop.stopTime ? row.checkpointStop.stopType || 'pt' : '' }}
-                </span>
-
-                <span class="stop-connection">
-                  {{ row.currentElement.departureRouteExt }}
-                </span>
-              </span>
-
-              <span class="schedule-departure">
-                <span class="departure-time terminates" v-if="row.checkpointStop.terminatesHere">
-                  {{ $t('timetables.terminates') }}
-                </span>
-
-                <span class="departure-time" v-else>
-                  <div v-if="row.checkpointStop.departureDelay == 0">
-                    <span>{{ timestampToTimeString(row.checkpointStop.departureTimestamp) }}</span>
-                  </div>
-                  <div v-else>
-                    <div>
-                      <s style="margin-right: 0.2em" class="text--grayed">{{
-                        timestampToTimeString(row.checkpointStop.departureTimestamp)
-                      }}</s>
-                    </div>
-
-                    <span>
-                      {{ timestampToTimeString(row.checkpointStop.departureRealTimestamp) }}
-                      ({{ row.checkpointStop.departureDelay > 0 ? '+' : ''
-                      }}{{ row.checkpointStop.departureDelay }})
-                    </span>
-                  </div>
-                </span>
-              </span>
-            </div>
-          </div>
-
-          <div class="item-stock-list" v-if="showStockThumbnails">
-            <StockList :trainStockList="row.train.stockList" :thumbnailSize="45" />
-          </div>
-        </router-link>
-      </transition-group>
-    </div>
-
-    <div class="list-actions" v-if="station && onlineScenery">
-      <a
-        :href="generatorHref"
-        target="_blank"
-        data-tooltip-type="HtmlTooltip"
-        :data-tooltip-content="`<b>${$t('scenery.gnr-link')}</b>`"
-      >
-        <img src="/images/icon-gnr.svg" alt="GeneraTOR app icon" />
-      </a>
-
-      <a
-        :href="pragotronHref"
-        target="_blank"
-        data-tooltip-type="HtmlTooltip"
-        :data-tooltip-content="`<b>${$t('scenery.pragotron-link')}</b>`"
-      >
-        <img src="/images/icon-pragotron.svg" alt="icon-pragotron" />
-      </a>
-
-      <a
-        :href="tabliceZbiorczeHref"
-        target="_blank"
-        data-tooltip-type="HtmlTooltip"
-        :data-tooltip-content="`<b>${$t('scenery.tablice-link')}</b>`"
-      >
-        <img src="/images/icon-tablice.ico" alt="icon-tablice" />
-      </a>
-
-      <div class="list-divider"></div>
-
-      <button
-        class="thumbnails-btn"
-        data-tooltip-type="HtmlTooltip"
-        :data-tooltip-content="`<b>${$t(`scenery.btn-${showStockThumbnails ? 'show' : 'hide'}-timetable-thumbnails`)}</b>`"
-        @click="toggleThumbnails"
-      >
-        <i class="fa-solid" :class="`${showStockThumbnails ? 'fa-expand' : 'fa-compress'}`"></i>
-      </button>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, ComputedRef, onMounted, PropType, ref } from 'vue';
-import { Station, ActiveScenery } from '../../../typings/common';
-import { SceneryTimetableRow } from '../typings';
-import { getTrainStopStatus, stopStatusPriorities } from '../utils';
-import { useRoute } from 'vue-router';
-import { useMainStore } from '../../../store/mainStore';
-import { useApiStore } from '../../../store/apiStore';
-import { timestampToTimeString } from '../../../composables/time';
-import ScheduledTrainStatus from './ScheduledTrainStatus.vue';
-import Loading from '../../Global/Loading.vue';
-import StockList from '../../Global/StockList.vue';
-import StorageManager from '../../../managers/storageManager';
-
-const props = defineProps({
-  station: {
-    type: Object as PropType<Station>
-  },
-
-  onlineScenery: {
-    type: Object as PropType<ActiveScenery>
-  },
-
-  chosenCheckpoint: {
-    type: String,
-    required: true
-  }
-});
-
-const route = useRoute();
-const mainStore = useMainStore();
-const apiStore = useApiStore();
-
-const showStockThumbnails = ref(false);
-
-onMounted(() => {
-  handleStockThumbnails();
-});
-
-const sceneryTimetables: ComputedRef<SceneryTimetableRow[]> = computed(() => {
-  if (!props.onlineScenery) return [];
-
-  const sceneryName = route.query['station']?.toString().replace(/_/g, ' ') ?? '';
-
-  return props.onlineScenery.scheduledTrains
-    .filter(
-      (ct) =>
-        // ct.timetablePathElement.stationName == sceneryName &&
-        ct.train.region == mainStore.region.id &&
-        props.chosenCheckpoint &&
-        ct.checkpointStop.stopNameRAW.toLowerCase() == props.chosenCheckpoint.toLowerCase()
-    )
-    .map((ct) => {
-      const trainStopStatus = getTrainStopStatus(
-        ct.checkpointStop,
-        ct.train.currentStationName,
-        sceneryName
-      );
-
-      return {
-        checkpointStop: ct.checkpointStop,
-        train: ct.train,
-        prevElement: ct.previousSceneryElement,
-        nextElement: ct.nextSceneryElement,
-        currentElement: ct.timetablePathElement,
-        status: trainStopStatus
-      };
-    })
-    .sort((a, b) => {
-      if (stopStatusPriorities.indexOf(a.status) - stopStatusPriorities.indexOf(b.status) < 0)
-        return -1;
-
-      if (stopStatusPriorities.indexOf(a.status) - stopStatusPriorities.indexOf(b.status) > 0)
-        return 1;
-
-      if (a.checkpointStop.arrivalTimestamp > b.checkpointStop.arrivalTimestamp) return 1;
-      if (a.checkpointStop.arrivalTimestamp < b.checkpointStop.arrivalTimestamp) return -1;
-
-      return a.checkpointStop.departureTimestamp > b.checkpointStop.departureTimestamp ? 1 : -1;
-    });
-});
-
-const tabliceZbiorczeHref = computed(() => {
-  let url = `https://tablice-td2.web.app/?station=${props.station!.name}`;
-  if (props.chosenCheckpoint) url += `&checkpoint=${props.chosenCheckpoint}`;
-
-  return url;
-});
-
-const pragotronHref = computed(() => {
-  let url = `https://pragotron-td2.spythere.eu/board?name=${props.station!.name}&region=${mainStore.region.id}`;
-  if (props.chosenCheckpoint) url += `&checkpoint=${props.chosenCheckpoint}`;
-
-  return url;
-});
-
-const generatorHref = computed(() => {
-  return `https://generator-td2.spythere.eu/?sceneryId=${props.onlineScenery!.name}|${props.onlineScenery!.region}`;
-});
-
-function handleStockThumbnails() {
-  const storageVal = StorageManager.getBooleanValue('showStockThumbnails');
-
-  showStockThumbnails.value = storageVal;
-}
-
-function toggleThumbnails() {
-  showStockThumbnails.value = !showStockThumbnails.value;
-
-  StorageManager.setBooleanValue('showStockThumbnails', showStockThumbnails.value);
-}
-</script>
-
-<style lang="scss" scoped>
-@use '../../../styles/responsive';
-@use '../../../styles/animations';
-@use '../../../styles/badge';
-
-.scenery-timetable-list {
-  display: grid;
-  grid-template-rows: auto 1fr 40px;
-  overflow: hidden;
-}
-
-.top-general {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  text-align: left;
-}
-
-.top-schedule {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 0.2em;
-  align-items: center;
-
-  width: 100%;
-  max-width: 400px;
-  margin: 0 auto;
-}
-
-.timetable-checkpoints {
-  display: flex;
-  justify-content: center;
-  gap: 0.5em;
-
-  flex-wrap: wrap;
-  font-size: 1.1em;
-
-  margin: 0.5em 0;
-}
-
-.checkpoint-item {
-  color: #aaa;
-  display: inline;
-
-  &:hover {
-    color: white;
-  }
-
-  &.current {
-    font-weight: bold;
-    color: var(--clr-primary);
-  }
-}
-
-.list-container {
-  position: relative;
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  margin-top: 0.5em;
-  padding: 2px;
-  width: 100%;
-}
-
-.timetable-item {
-  display: block;
-
-  margin-bottom: 0.5em;
-  padding: 0.35em;
-  width: 100%;
-
-  overflow: hidden;
-  background: #353535;
-
-  &.empty {
-    padding: 1rem;
-    font-size: 1.2em;
-    color: #bbb;
-  }
-}
-
-.timetable-item > .item-top {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 1.2em 0.5em;
-}
-
-.timetable-item > .item-stock-list {
-  margin-top: 1em;
-}
-
-.general-info {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-}
-
-.info-train {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.25em;
-}
-
-.info-train > .train-badge {
-  font-size: 0.85em;
-}
-
-.info-number {
-  color: var(--clr-primary);
-}
-
-.info-route {
-  width: 100%;
-  margin-top: 0.25em;
-}
-
-.stop-comments-icon > img {
-  width: 1.3em;
-  vertical-align: top;
-}
-
-.schedule-arrival,
-.schedule-departure {
-  font-size: 1.15em;
-}
-
-.schedule-stop {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 0.5em;
-  align-items: end;
-
-  .stop-connection {
-    font-size: 0.95em;
-  }
-
-  .stop-time {
-    position: relative;
-    inline-size: max-content;
-    align-self: center;
-    font-size: 0.9em;
-
-    color: var(--clr-primary);
-
-    &::after {
-      content: '\027F6';
-      display: block;
-      font-size: 2.2em;
-      line-height: 0.65em;
-    }
-  }
-}
-
-.arrival-time.begins,
-.departure-time.terminates {
-  font-size: 0.85em;
-}
-
-.list-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.5em;
-  margin-top: 0.5em;
-
-  .list-divider {
-    height: 80%;
-    width: 3px;
-    background-color: #6b6b6b;
-  }
-
-  img {
-    width: 25px;
-    height: 25px;
-    vertical-align: middle;
-  }
-
-  .thumbnails-btn {
-    width: 25px;
-    height: 25px;
-    font-size: 25px;
-  }
-}
-
-@include responsive.smallScreen {
-  .timetable-item {
-    grid-template-columns: 1fr;
-  }
-
-  .list-actions {
-    justify-content: center;
-  }
-}
-</style>

src/components/SceneryView/SceneryTimetablesHistory.vue

@@ -115,7 +115,7 @@ export default defineComponent({
 
   data() {
     return {
-      historyList: [] as API.TimetableHistory.ResponseShort,
+      historyList: [] as API.TimetableHistory.Response,
       historyModeList,
 
       apiStore: useApiStore(),
@@ -149,12 +149,11 @@ export default defineComponent({
       requestFilters['returnType'] = 'short';
 
       try {
-        const response: API.TimetableHistory.ResponseShort = await this.apiStore.client.get(
+        const response: API.TimetableHistory.Response = await (
-          'api/getTimetables',
+          await this.apiStore.client!.get('api/getTimetables', {
-          requestFilters
+            params: requestFilters
-        );
+          })
-
+        ).data;
-        console.log(response);
 
         this.historyList = response;
 
@@ -179,7 +178,7 @@ export default defineComponent({
       });
     },
 
-    parseCreatedDate(timetable: API.TimetableHistory.DataShort, locale: string) {
+    parseCreatedDate(timetable: API.TimetableHistory.Data, locale: string) {
       const createdDate =
         timetable.createdAt > timetable.beginDate
           ? new Date(timetable.beginDate)

src/components/SceneryView/SceneryTopList.vue

@@ -1,204 +0,0 @@
-<template>
-  <div class="scenery-top-list">
-    <h2 class="header">{{ t('scenery.top-list.header') }}</h2>
-
-    <div class="top-actions">
-      <div class="actions-modes">
-        <button
-          v-for="mode in availableModes"
-          :class="`btn btn--option ${mode == currentListMode ? 'checked' : ''}`"
-          @click="selectListMode(mode)"
-        >
-          {{ t(`scenery.top-list.mode-${mode}`) }}
-        </button>
-      </div>
-
-      <div class="actions-scopes">
-        <button
-          v-for="scope in availableScopes"
-          :class="`btn btn--option ${scope == currentListScope ? 'checked' : ''}`"
-          @click="selectListScope(scope)"
-        >
-          {{ t(`scenery.top-list.scope-${scope}`) }}
-        </button>
-      </div>
-    </div>
-
-    <div class="rating-list-wrapper">
-      <Loading v-if="listState == Status.Data.Loading" />
-      <div v-else-if="listState == Status.Data.Error">Ups, coś poszło nie tak...</div>
-
-      <ul v-else>
-        <li v-for="(value, i) in bestScoreList">
-          <div>
-            {{ t('scenery.top-list.place', i + 1) }} -
-            <router-link :to="`/profile?playerId=${value.dispatcherId}`">{{
-              value.dispatcherName
-            }}</router-link>
-          </div>
-          <div>
-            <b class="text--primary" v-if="currentListMode == 'dutyCount'">{{
-              t('scenery.top-list.duty-count', value.value)
-            }}</b>
-
-            <b class="text--primary" v-else-if="currentListMode == 'dispatcherRating'">{{
-              t('scenery.top-list.dispatcher-rating', value.value)
-            }}</b>
-
-            <b class="text--primary" v-else>
-              {{ t('scenery.top-list.duration') }}
-              {{ humanizeDuration(value.value) }}
-            </b>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { onActivated, PropType, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useApiStore } from '../../store/apiStore';
-import { Station, ActiveScenery, Status } from '../../typings/common';
-import Loading from '../Global/Loading.vue';
-import { humanizeDuration } from '../../composables/time';
-
-interface SceneryBestScoreItem {
-  dispatcherName: string;
-  dispatcherId: number;
-  value: number;
-}
-
-const { t } = useI18n();
-
-const apiStore = useApiStore();
-
-defineOptions({
-  name: 'SceneryTopList'
-});
-
-const props = defineProps({
-  station: {
-    type: Object as PropType<Station>
-  },
-
-  onlineScenery: {
-    type: Object as PropType<ActiveScenery>
-  }
-});
-
-const availableModes = ['dutyCount', 'dispatcherRating', 'dutyDuration'] as const;
-const availableScopes = ['name', 'hash'] as const;
-
-type ListMode = (typeof availableModes)[number];
-type ListScope = (typeof availableScopes)[number];
-
-const currentListMode = ref<ListMode>('dutyCount');
-const currentListScope = ref<ListScope>('name');
-
-const listState = ref<Status.Data>(Status.Data.Loading);
-
-const bestScoreList = ref<SceneryBestScoreItem[]>([]);
-
-onActivated(() => {
-  fetchTopDispatchersList();
-});
-
-function selectListMode(mode: ListMode) {
-  currentListMode.value = mode;
-  fetchTopDispatchersList();
-}
-
-function selectListScope(scope: ListScope) {
-  currentListScope.value = scope;
-  fetchTopDispatchersList();
-}
-
-async function fetchTopDispatchersList() {
-  const searchedStationValue =
-    currentListScope.value == 'name'
-      ? props.station?.name
-      : apiStore.sceneryData.find((sc) => sc.name == props.station!.name)?.hash;
-
-  bestScoreList.value = [];
-
-  if (!searchedStationValue) {
-    listState.value = Status.Data.Loaded;
-    return;
-  }
-
-  try {
-    listState.value = Status.Data.Loading;
-
-    const response: SceneryBestScoreItem[] = await apiStore.client.get(`api/getSceneryBestScores`, {
-      [currentListScope.value]: searchedStationValue,
-      type: currentListMode.value,
-      countLimit: 40
-    });
-
-    bestScoreList.value = response;
-    listState.value = Status.Data.Loaded;
-  } catch (error) {
-    listState.value = Status.Data.Error;
-    console.error(error);
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.scenery-top-list {
-  display: grid;
-  grid-template-rows: auto auto 1fr;
-  overflow: hidden;
-  gap: 1em;
-}
-
-.top-actions {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 0.5em 1.5em;
-}
-
-.actions-modes,
-.actions-scopes {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5em;
-  font-weight: bold;
-
-  button {
-    font-weight: bold;
-  }
-}
-
-.rating-list-wrapper {
-  overflow: auto;
-}
-
-.rating-list-wrapper > ul {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-  align-items: center;
-  gap: 0.65em;
-  padding-right: 0.5em;
-}
-
-.rating-list-wrapper > ul > li {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-
-  padding: 0.25em;
-  background-color: #2b2b2b;
-  height: 100%;
-
-  line-height: 1.5em;
-
-  a {
-    font-weight: bold;
-  }
-}
-</style>

src/components/SceneryView/ScheduledTrainStatus.vue

@@ -18,8 +18,8 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
-import { StopStatus } from '../../../typings/common';
+import { StopStatus } from '../../typings/common';
-import { SceneryTimetableRow } from '../typings';
+import { SceneryTimetableRow } from './typings';
 
 export default defineComponent({
   props: {

src/components/SceneryView/utils.ts

@@ -1,6 +1,6 @@
 import { StopStatus, TrainStop } from '../../typings/common';
 
-export const stopStatusPriorities = [
+export const stopStatusPriority = [
   StopStatus.ONLINE,
   StopStatus.STOPPED,
   StopStatus.DEPARTED,
@@ -18,31 +18,23 @@ export function getTrainStopStatus(
     return StopStatus.TERMINATED;
   }
 
-  if (
+  if (!stopInfo.terminatesHere && stopInfo.confirmed && currentStationName == sceneryName) {
-    !stopInfo.terminatesHere &&
-    stopInfo.confirmed &&
-    currentStationName.startsWith(sceneryName)
-  ) {
     return StopStatus.DEPARTED;
   }
 
-  if (
+  if (!stopInfo.terminatesHere && stopInfo.confirmed && currentStationName != sceneryName) {
-    !stopInfo.terminatesHere &&
-    stopInfo.confirmed &&
-    !currentStationName.startsWith(sceneryName)
-  ) {
     return StopStatus.DEPARTED_AWAY;
   }
 
-  if (currentStationName.startsWith(sceneryName) && !stopInfo.stopped) {
+  if (currentStationName == sceneryName && !stopInfo.stopped) {
     return StopStatus.ONLINE;
   }
 
-  if (currentStationName.startsWith(sceneryName) && stopInfo.stopped) {
+  if (currentStationName == sceneryName && stopInfo.stopped) {
     return StopStatus.STOPPED;
   }
 
-  if (!currentStationName.startsWith(sceneryName)) {
+  if (currentStationName != sceneryName) {
     return StopStatus.ARRIVING;
   }
 

src/components/StationsView/FilterSlider.vue

@@ -1,154 +0,0 @@
-<template>
-  <div class="filter-slider-container">
-    <input
-      class="slider"
-      v-for="slider in sliderGroupsOptions[sliderGroup]"
-      type="range"
-      :name="slider.id"
-      :id="slider.id"
-      :min="slider.minRange"
-      :max="slider.maxRange"
-      :step="slider.step"
-      v-model="filters[slider.id]"
-    />
-
-    <div class="slider-track" @click="moveCloserSliderToMousePos"></div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { inject, PropType } from 'vue';
-import { SliderGroup, sliderGroupsOptions } from '../../managers/stationFilterManager';
-
-const filters = inject('StationsView_filters') as Record<string, any>;
-
-const props = defineProps({
-  sliderGroup: {
-    type: String as PropType<SliderGroup>,
-    required: true
-  }
-});
-
-// Change slider value that's the closest one to the mouse position on the slider track click
-function moveCloserSliderToMousePos(e: MouseEvent) {
-  const { clientX, target } = e;
-  const { minRange, maxRange, step } = sliderGroupsOptions[props.sliderGroup][0];
-
-  const boundingRect = (target as HTMLElement).getBoundingClientRect();
-  const mouseX = clientX - boundingRect.left;
-
-  const leftSliderValue = filters[sliderGroupsOptions[props.sliderGroup][0].id];
-  const rightSliderValue = filters[sliderGroupsOptions[props.sliderGroup][1].id];
-
-  let mouseValue = Math.round((maxRange - minRange) * (mouseX / boundingRect.width));
-
-  // Adjust mouse value to the closest step point (divide by 10, get rounded number, then multiply by step)
-  mouseValue = Math.round(mouseValue / step) * step;
-
-  let sliderIndex =
-    Math.abs(leftSliderValue - mouseValue) < Math.abs(rightSliderValue - mouseValue) ? 0 : 1;
-
-  filters[sliderGroupsOptions[props.sliderGroup][sliderIndex].id] = mouseValue;
-}
-</script>
-
-<style lang="scss" scoped>
-@use '../../styles/responsive';
-
-.filter-slider-container {
-  position: relative;
-  padding: 0.5em;
-  height: 1.25em;
-}
-
-.slider-track {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-
-  border-radius: 1em;
-  z-index: 10;
-
-  cursor: pointer;
-  background-color: #444;
-  transition: background-color 0.2s;
-
-  &:hover {
-    background-color: #4d4d4d;
-  }
-}
-
-.slider {
-  width: 100%;
-  height: 1.25em;
-  background: none;
-  outline: none;
-  border-radius: 1em;
-  padding: 0;
-
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-
-  z-index: 100;
-
-  pointer-events: none;
-  cursor: pointer;
-
-  -webkit-appearance: none;
-  appearance: none;
-
-  &:hover ~ .slider-track {
-    background-color: #4d4d4d;
-  }
-
-  &:focus-visible {
-    outline: 1px solid white;
-  }
-
-  &::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-
-    position: relative;
-    z-index: 100;
-
-    width: 1.25em;
-    height: 1.25em;
-    border-radius: 1em;
-    background: var(--clr-primary);
-
-    pointer-events: all;
-  }
-
-  &::-moz-range-thumb {
-    width: 1.25em;
-    height: 1.25em;
-    border-radius: 1em;
-    background: var(--clr-primary);
-
-    pointer-events: all;
-  }
-
-  // &:first-child::-webkit-slider-runnable-track {
-  // }
-
-  &::-moz-range-track {
-    position: relative;
-    z-index: -1;
-
-    width: 100%;
-    height: 5px;
-    cursor: pointer;
-    background: none;
-    border-radius: 1em;
-  }
-
-  // &:first-child::-moz-range-track {
-  //   background: var(--clr-primary);
-  // }
-}
-</style>

src/components/StationsView/StationFilterCard.vue

@@ -35,7 +35,6 @@
               id="scenery-search"
               list="sceneries"
               :placeholder="$t('filters.sceneries-placeholder')"
-              @change="handleSceneriesInput"
               @focus="preventKeyDown = true"
               @blur="preventKeyDown = false"
             />
@@ -45,40 +44,42 @@
             </button>
           </section>
 
-          <section class="card_input-search">
+          <section class="card_input-search authors">
+            <datalist id="authors" name="authors">
+              <option v-for="(author, i) in authorsOptions" :key="i" :value="author"></option>
+            </datalist>
+
             <input
-              v-model="filters['lines']"
+              type="text"
-              id="line-numbers-search"
+              id="author"
-              :placeholder="$t('filters.line-numbers-placeholder')"
+              list="authors"
+              name="authors"
+              v-model="filters['authors']"
+              :placeholder="$t('filters.authors-placeholder')"
               @focus="preventKeyDown = true"
               @blur="preventKeyDown = false"
             />
 
-            <button class="btn--action btn--image" @click="resetLineNumbersInput">
-              <img src="/images/icon-exit.svg" alt="reset line numbers search" />
-            </button>
-          </section>
-
-          <section class="card_input-search">
-            <select id="author" name="authors" v-model="filters['authors']">
-              <option value="">{{ $t('filters.authors-placeholder') }}</option>
-              <option v-for="(author, i) in authorsOptions" :key="i" :value="author">
-                {{ author }}
-              </option>
-            </select>
-
             <button class="btn--action btn--image" @click="resetAuthorsInput">
               <img src="/images/icon-exit.svg" alt="reset authors search" />
             </button>
           </section>
 
           <section class="card_input-search">
-            <select id="projects" name="projects" v-model="filters['projects']">
+            <datalist id="projects" name="projects">
-              <option value="">{{ $t('filters.projects-placeholder') }}</option>
+              <option v-for="(project, i) in projectsOptions" :key="i" :value="project"></option>
-              <option v-for="(project, i) in projectsOptions" :key="i" :value="project">
+            </datalist>
-                {{ project }}
+
-              </option>
+            <input
-            </select>
+              type="text"
+              id="projects"
+              list="projects"
+              name="projects"
+              v-model="filters['projects']"
+              :placeholder="$t('filters.projects-placeholder')"
+              @focus="preventKeyDown = true"
+              @blur="preventKeyDown = false"
+            />
 
             <button class="btn--action btn--image" @click="resetProjectsInput">
               <img src="/images/icon-exit.svg" alt="reset projects search" />
@@ -91,7 +92,7 @@
               v-for="(sectionFilters, sectionKey) in filtersSections"
               :key="sectionKey"
             >
-              <h3 class="section-header">
+              <h3 class="text--primary">
                 <span class="active-indicator" v-if="!areSectionFiltersDefault(sectionKey)"></span>
                 {{ $t(`filters.sections.${sectionKey}`) }}
                 <button @click="resetSectionFilters(sectionKey)">RESET</button>
@@ -121,7 +122,7 @@
           </section>
 
           <section class="card_timestamp">
-            <h3 class="hours-section-header">{{ $t('filters.minimum-hours-title') }}</h3>
+            <h3 class="section-header">{{ $t('filters.minimum-hours-title') }}</h3>
 
             <span class="clock">
               <button class="btn--action" @click="subHour">-</button>
@@ -137,16 +138,20 @@
           </section>
 
           <section class="card_sliders">
-            <div class="option-slider" v-for="(sliderGroup, i) in sliderGroups" :key="i">
+            <div class="slider" v-for="(slider, i) in sliderStates" :key="i">
-              <FilterSlider :sliderGroup="sliderGroup" />
+              <input
-
+                class="slider-input"
-              <span class="slider-value">
+                type="range"
-                {{ filters[sliderGroupsOptions[sliderGroup][0].id] }} -
+                :name="slider.id"
-                {{ filters[sliderGroupsOptions[sliderGroup][1].id] }}
+                :id="slider.id"
-              </span>
+                :min="slider.minRange"
-
+                :max="slider.maxRange"
+                :step="slider.step"
+                v-model.number="filters[slider.id]"
+              />
+              <span class="slider-value">{{ filters[slider.id] }}</span>
               <div class="slider-content">
-                {{ $t(`filters.sliders.${sliderGroups[i]}`) }}
+                {{ $t(`filters.sliders.${slider.id}`) }}
               </div>
             </div>
           </section>
@@ -186,15 +191,13 @@ import routerMixin from '../../mixins/routerMixin';
 import { useMainStore } from '../../store/mainStore';
 
 import FilterOption from './FilterOption.vue';
-import FilterSlider from './FilterSlider.vue';
 import StorageManager from '../../managers/storageManager';
 
 import {
   filtersSections,
+  sliderStates,
   initFilters,
-  sliderGroups,
+  getChangedFilters
-  getChangedFilters,
-  sliderGroupsOptions
 } from '../../managers/stationFilterManager';
 
 import { StationFilterSection } from '../../managers/stationFilterManager';
@@ -204,17 +207,18 @@ import { watch } from 'vue';
 const STORAGE_KEY = 'options_saved';
 
 export default defineComponent({
-  components: { FilterOption, FilterSlider },
+  components: { FilterOption },
   mixins: [keyMixin, routerMixin],
 
   data: () => ({
     saveOptions: false,
 
     filtersSections,
-    sliderGroups,
+    sliderStates,
-    sliderGroupsOptions,
 
     minimumHours: 0,
+    authorSearchFilter: '',
+    projectSearchFilter: '',
 
     currentRegion: { id: '', value: '' },
 
@@ -272,8 +276,6 @@ export default defineComponent({
     authorsOptions() {
       return this.store.stationList
         .reduce((acc, station) => {
-          if (station.generalInfo?.hidden === true) return acc;
-
           station.generalInfo?.authors?.forEach((author) => {
             if (author.trim() != '' && !acc.includes(author.toLocaleLowerCase()))
               acc.push(author.toLocaleLowerCase());
@@ -287,10 +289,8 @@ export default defineComponent({
     projectsOptions() {
       return this.store.stationList
         .reduce((acc, station) => {
-          if (!station.generalInfo || !station.generalInfo.project || station.generalInfo.hidden)
+          if (!station.generalInfo || !station.generalInfo.project || station.generalInfo.hidden) return acc;
-            return acc;
+          if (!acc.includes(station.generalInfo.project.trim())) acc.push(station.generalInfo.project.trim());
-          if (!acc.includes(station.generalInfo.project.trim()))
-            acc.push(station.generalInfo.project.trim());
 
           return acc;
         }, [] as string[])
@@ -320,15 +320,11 @@ export default defineComponent({
     },
 
     resetAuthorsInput() {
-      this.filters['authors'] = '';
+      this.filters['authors'] = this.authorSearchFilter;
     },
 
     resetProjectsInput() {
-      this.filters['projects'] = '';
+      this.filters['projects'] = this.projectSearchFilter;
-    },
-
-    resetLineNumbersInput() {
-      this.filters['lines'] = '';
     },
 
     handleSceneriesInput() {
@@ -373,6 +369,7 @@ export default defineComponent({
 
       // Reset local model values
       this.minimumHours = 0;
+      this.authorSearchFilter = '';
 
       // Reset global filters
       Object.keys(this.filters).forEach((filterKey) => {
@@ -416,14 +413,6 @@ export default defineComponent({
 @use '../../styles/animations';
 
 h3.section-header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.25em;
-  gap: 0.5em;
-  color: var(--clr-primary);
-}
-
-h3.hours-section-header {
   text-align: center;
   margin: 0.5em 0;
 }
@@ -505,17 +494,20 @@ h3.hours-section-header {
     height: 100%;
   }
 
-  input,
+  input {
-  select {
     width: 100%;
     padding: 0.5em;
     border: 1px solid #aaa;
   }
+
+  &.authors {
+    margin-top: 1em;
+  }
 }
 
 .section-filters {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
+  grid-template-columns: repeat(3, 1fr);
   gap: 0.5em;
   margin: 1em 0;
 }
@@ -527,11 +519,9 @@ h3.hours-section-header {
   -moz-user-select: none;
 
   span {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
     cursor: pointer;
+    display: inline-block;
+    width: 100%;
     text-align: center;
     padding: 0.25em;
     font-weight: bold;
@@ -583,40 +573,124 @@ h3.hours-section-header {
 }
 
 .option-section h3 {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.25em;
+
+  gap: 0.5em;
+
   button {
     padding: 0.15em;
     color: coral;
   }
 }
 
-.card_sliders {
+.slider {
-  margin-top: 1em;
-}
-
-.option-slider {
   display: grid;
+  grid-template-columns: 1fr 50px 1fr;
   align-items: center;
-  grid-template-columns: 250px 100px 1fr;
   gap: 0.25em;
-  min-height: 35px;
 
   margin-bottom: 1em;
-}
 
-.slider-value {
+  &-value {
-  color: var(--clr-primary);
+    color: var(--clr-primary);
-  padding: 0.1em 0.2em;
+    padding: 0.1em 0.2em;
-  text-align: center;
+    text-align: center;
-  font-weight: bold;
+  }
+
+  &-input {
+    -webkit-appearance: none;
+    appearance: none;
+    background: none;
+    border: none;
+    outline: none;
+
+    min-width: 25%;
+
+    &:focus-visible ~ * {
+      color: gold;
+    }
+
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+
+      height: 20px;
+      width: 20px;
+      margin-top: -7px;
+
+      border-radius: 50%;
+
+      background: white;
+      border: 3px solid var(--clr-primary);
+      background-color: #333;
+
+      @include responsive.smallScreen {
+        width: 15px;
+        height: 15px;
+        margin-top: -5px;
+        border: 3px solid var(--clr-primary);
+      }
+    }
+
+    &::-moz-range-thumb {
+      height: 1em;
+      width: 1em;
+
+      border-radius: 50%;
+
+      background: white;
+      border: 4px solid var(--clr-primary);
+
+      cursor: pointer;
+
+      @include responsive.smallScreen {
+        width: 1em;
+        height: 1em;
+        border: 3px solid var(--clr-primary);
+      }
+    }
+
+    &::-webkit-slider-runnable-track {
+      width: 100%;
+      height: 5px;
+      cursor: pointer;
+      background: #ffffff;
+      border-radius: 1em;
+    }
+
+    &::-moz-range-track {
+      width: 100%;
+      height: 5px;
+      cursor: pointer;
+      background: #ffffff;
+      border-radius: 1em;
+    }
+
+    &::-ms-track {
+      width: 100%;
+      height: 5px;
+      cursor: pointer;
+      background: #ffffff;
+      border-radius: 1em;
+    }
+  }
 }
 
 @include responsive.smallScreen {
-  .option-slider {
+  .slider {
-    grid-template-columns: 1fr;
+    display: flex;
-  }
+    flex-wrap: wrap;
+    justify-content: center;
 
-  .slider-content {
+    &-input {
-    text-align: center;
+      width: 90%;
+    }
+
+    &-content {
+      text-align: center;
+    }
   }
 
   .card_controls > button > p {

src/components/StationsView/StationStats.vue

@@ -278,10 +278,6 @@ export default defineComponent({
   color: #ccc;
 }
 
-.dropdown_wrapper {
-  top: 2.5em;
-}
-
 @include responsive.smallScreen {
   .stats-title {
     text-align: center;
@@ -290,9 +286,5 @@ export default defineComponent({
   .filter-button > span {
     display: none;
   }
-
-  .no-data {
-    text-align: center;
-  }
 }
 </style>

src/components/StationsView/StationTable.vue

@@ -14,7 +14,7 @@
             class="header-text"
             :class="headerName"
           >
-            <div class="header_wrapper">
+            <span class="header_wrapper">
               <div v-html="$t(`sceneries.headers.${headerName}`)"></div>
 
               <img
@@ -23,7 +23,7 @@
                 :src="`/images/icon-arrow-${activeSorter.dir == 1 ? 'asc' : 'desc'}.svg`"
                 alt="sort icon"
               />
-            </div>
+            </span>
           </th>
 
           <th
@@ -52,14 +52,14 @@
       </thead>
 
       <tbody>
-        <tr
+        <router-link
           v-for="station in filteredStationList"
           class="a-row"
-          tabindex="0"
+          role="row"
           :key="station.name"
           @click.right.prevent="openForumSite($event, station.generalInfo?.url)"
-          @click="getSceneryRoute(station)"
+          @keydown.space.prevent="openForumSite($event, station.generalInfo?.url)"
-          @keydown.enter="getSceneryRoute(station)"
+          :to="getSceneryRoute(station)"
         >
           <td class="station-name" :class="station.generalInfo?.availability">
             <b v-if="station.generalInfo?.project" style="color: salmon">{{
@@ -132,6 +132,7 @@
             <span v-if="station.onlineInfo?.dispatcherName">
               <b
                 v-if="apiStore.donatorsData.includes(station.onlineInfo.dispatcherName)"
+                @click.prevent="openDonationCard"
                 data-tooltip-type="DonatorTooltip"
                 :data-tooltip-content="$t('donations.dispatcher-message')"
               >
@@ -145,14 +146,6 @@
             </span>
           </td>
 
-          <td class="station-dispatcher-lang">
-            <FlagIcon
-              v-if="station.onlineInfo && station.onlineInfo.dispatcherLanguageId != -1"
-              :language-id="station.onlineInfo.dispatcherLanguageId"
-              width="2.25em"
-            />
-          </td>
-
           <td class="station-dispatcher-exp">
             <span
               v-if="station.onlineInfo && station.onlineInfo?.dispatcherExp != -1"
@@ -321,7 +314,7 @@
           >
             {{ station.onlineInfo?.scheduledTrainCount.confirmed ?? '-' }}
           </td>
-        </tr>
+        </router-link>
       </tbody>
     </table>
 
@@ -351,13 +344,11 @@ import { useTooltipStore } from '../../store/tooltipStore';
 import { getChangedFilters } from '../../managers/stationFilterManager';
 import { ActiveSorter, HeadIdsType, headIconsIds, headIds } from './typings';
 import { filterStations, sortStations } from './utils';
-import { getLanguageNameById } from '../../utils/languageUtils';
-import FlagIcon from '../Global/FlagIcon.vue';
 
 export default defineComponent({
   emits: ['toggleDonationCard'],
 
-  components: { Loading, StationStatusBadge, FlagIcon },
+  components: { Loading, StationStatusBadge },
   mixins: [styleMixin, dateMixin],
 
   data: () => ({
@@ -393,13 +384,15 @@ export default defineComponent({
 
   methods: {
     getSceneryRoute(station: Station) {
-      this.$router.push({
+      // TODO: Hide tooltips when navigating away
+
+      return {
         name: 'SceneryView',
         query: {
           station: station.name,
           region: this.$route.query.region || undefined
         }
-      });
+      };
     },
 
     openDonationCard(e: Event) {
@@ -445,7 +438,7 @@ export default defineComponent({
 $rowCol: #424242;
 
 .station_table {
-  height: calc(100vh - 17em);
+  height: calc(100vh - 11em);
   max-height: 2000px;
   min-height: 500px;
   overflow: auto;
@@ -466,82 +459,78 @@ table {
   width: 100%;
   min-width: 1250px;
   white-space: wrap;
-}
 
-thead {
+  thead {
-  position: sticky;
+    position: sticky;
-  top: 0;
+    top: 0;
-  z-index: 50;
-}
-
-thead tr {
-  background-color: var(--clr-bg3);
-}
-
-thead th {
-  background-color: var(--clr-bg3);
-  white-space: pre-wrap;
-  padding: 0.5em 0.25em;
-
-  cursor: pointer;
-  user-select: none;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-
-  &.station {
-    width: 12em;
   }
 
-  &.min-lvl {
+  thead tr {
-    width: 4em;
+    background-color: var(--clr-bg3);
   }
 
-  &.status {
+  thead th {
-    width: 10em;
+    &.station {
-  }
+      width: 12em;
+    }
 
-  &.dispatcher {
+    &.min-lvl {
-    width: 12em;
+      width: 4em;
-  }
+    }
 
-  &.dispatcher-lang {
+    &.status {
-    width: 6em;
+      width: 10em;
-  }
+    }
 
-  &.dispatcher-lvl {
+    &.dispatcher {
-    width: 6em;
+      width: 12em;
-  }
+    }
 
-  &.routes-double,
+    &.dispatcher-lvl {
-  &.routes-single {
+      width: 6em;
-    width: 7em;
+    }
-  }
 
-  &.general {
+    &.routes-double,
-    width: 11em;
+    &.routes-single {
-  }
+      width: 7em;
+    }
 
-  &.header-image {
+    &.general {
-    width: 3.5em;
+      width: 11em;
+    }
 
-    &.user {
+    &.header-image {
-      width: 5em;
+      width: 3.5em;
+
+      &.user {
+        width: 5em;
+      }
+    }
+
+    padding: 0.5em 0.25em;
+    background-color: var(--clr-bg3);
+    white-space: pre-wrap;
+
+    cursor: pointer;
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+
+    span {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      img {
+        width: 1.5em;
+        vertical-align: middle;
+      }
     }
   }
 }
 
-thead th .header_wrapper {
+tr,
-  display: flex;
+.a-row {
-  align-items: center;
-  justify-content: center;
-
-  img {
-    width: 1.5em;
-    vertical-align: middle;
-  }
-}
-
-tbody tr {
   background-color: $rowCol;
   vertical-align: middle;
 
@@ -561,7 +550,6 @@ tbody tr {
     cursor: pointer;
     overflow: hidden;
     text-overflow: ellipsis;
-    height: 2.5em;
 
     &.inactive {
       opacity: 0.2;
@@ -578,7 +566,6 @@ tbody tr {
 .station-name {
   font-weight: bold;
   max-width: 200px;
-  padding: 0.25em;
 
   &.default {
     color: var(--clr-primary);

src/components/StationsView/typings.ts

@@ -10,7 +10,6 @@ export const headIds = [
   'min-lvl',
   'status',
   'dispatcher',
-  'dispatcher-lang',
   'dispatcher-lvl',
   'routes-single',
   'routes-double',

src/components/StationsView/utils.ts

@@ -120,70 +120,38 @@ function filterSliderValues(filters: Record<string, any>, generalInfo: StationGe
   const otherAvailability =
     availability == 'nonPublic' || availability == 'unavailable' || availability == 'abandoned';
 
-  if (filters['minLevel'] > reqLevel + (otherAvailability ? 1 : 0)) return true;
+  const internalRoutes = routes.all.filter((r) => r.isInternal && !r.isRouteSBL && !r.hidden);
-  if (filters['maxLevel'] < reqLevel + (otherAvailability ? 1 : 0)) return true;
-  if (filters['minVmax'] > routes.maxRouteSpeed) return true;
-  if (filters['maxVmax'] < routes.minRouteSpeed) return true;
 
-  if (filters['oneWay'] && routes.singleOtherNames.length > 0) return true;
+  return (
-  if (filters['oneWayCatenary'] && routes.singleElectrifiedNames.length > 0) return true;
+    filters['minLevel'] > reqLevel + (otherAvailability ? 1 : 0) ||
-  if (filters['twoWay'] && routes.doubleOtherNames.length > 0) return true;
+    filters['maxLevel'] < reqLevel + (otherAvailability ? 1 : 0) ||
-  if (filters['twoWayCatenary'] && routes.doubleElectrifiedNames.length > 0) return true;
+    filters['minVmax'] > routes.maxRouteSpeed ||
-
+    filters['maxVmax'] < routes.minRouteSpeed ||
-  if (filters['minOneWay'] > routes.singleOtherNames.length) return true;
+    (filters['no-1track'] && routes.single.length != 0) ||
-  if (filters['maxOneWay'] < routes.singleOtherNames.length) return true;
+    (filters['no-2track'] && routes.double.length != 0) ||
-  if (filters['minOneWayCatenary'] > routes.singleElectrifiedNames.length) return true;
+    filters['minOneWayCatenary'] > routes.singleElectrifiedNames.length ||
-  if (filters['maxOneWayCatenary'] < routes.singleElectrifiedNames.length) return true;
+    filters['minOneWay'] > routes.singleOtherNames.length ||
-  if (filters['minTwoWay'] > routes.doubleOtherNames.length) return true;
+    filters['minTwoWayCatenary'] > routes.doubleElectrifiedNames.length ||
-  if (filters['maxTwoWay'] < routes.doubleOtherNames.length) return true;
+    filters['minTwoWay'] > routes.doubleOtherNames.length ||
-  if (filters['minTwoWayCatenary'] > routes.doubleElectrifiedNames.length) return true;
+    filters['minOneWayCatenaryInt'] >
-  if (filters['maxTwoWayCatenary'] < routes.doubleElectrifiedNames.length) return true;
+      internalRoutes.filter((r) => r.routeTracks == 1 && r.isElectric == true).length ||
-
+    filters['minOneWayInt'] >
-  if (filters['oneWayInt'] && routes.singleOtherInternalNames.length > 0) return true;
+      internalRoutes.filter((r) => r.routeTracks == 1 && r.isElectric == false).length ||
-  if (filters['oneWayCatenaryInt'] && routes.singleElectrifiedInternalNames.length > 0) return true;
+    filters['minTwoWayCatenaryInt'] >
-  if (filters['twoWayInt'] && routes.doubleOtherInternalNames.length > 0) return true;
+      internalRoutes.filter((r) => r.routeTracks == 2 && r.isElectric == true).length ||
-  if (filters['twoWayCatenaryInt'] && routes.doubleElectrifiedInternalNames.length > 0) return true;
+    filters['minTwoWayInt'] >
-
+      internalRoutes.filter((r) => r.routeTracks == 2 && r.isElectric == false).length
-  // Internal routes
+  );
-  if (filters['minOneWayInt'] > routes.singleOtherInternalNames.length) return true;
-  if (filters['maxOneWayInt'] < routes.singleOtherInternalNames.length) return true;
-  if (filters['minOneWayCatenaryInt'] > routes.singleElectrifiedInternalNames.length) return true;
-  if (filters['maxOneWayCatenaryInt'] < routes.singleElectrifiedInternalNames.length) return true;
-
-  if (filters['minTwoWayInt'] > routes.doubleOtherInternalNames.length) return true;
-  if (filters['maxTwoWayInt'] < routes.doubleOtherInternalNames.length) return true;
-  if (filters['minTwoWayCatenaryInt'] > routes.doubleElectrifiedInternalNames.length) return true;
-  if (filters['maxTwoWayCatenaryInt'] < routes.doubleElectrifiedInternalNames.length) return true;
 }
 
 function filterInputValues(filters: Record<string, any>, generalInfo: StationGeneralInfo) {
-  if (
+  return (
-    filters['authors'].length > 3 &&
+    (filters['authors'].length > 3 &&
-    generalInfo.authors &&
+      !generalInfo.authors
-    !generalInfo.authors.some(
+        ?.map((a) => a.toLocaleLowerCase())
-      (a) => a.toLocaleLowerCase() == filters['authors'].toLocaleLowerCase()
+        .includes(filters['authors'].toLocaleLowerCase())) ||
-    )
+    (filters['projects'].length > 0 && generalInfo.project != filters['projects'])
-  )
+  );
-    return true;
-
-  if (filters['projects'].length > 0 && generalInfo.project != filters['projects']) return true;
-
-  if (filters['lines'].length > 0) {
-    const linesNumbers = (filters['lines'] as string)
-      .split(',')
-      .map((l) => Number(l))
-      .filter((l) => !isNaN(l) && l != 0);
-
-    if (
-      !generalInfo.lines
-        ?.split(',')
-        .map((l) => Number(l))
-        .some((l) => linesNumbers.includes(l))
-    )
-      return true;
-  }
-
-  return false;
 }
 
 export const sortStations = (a: Station, b: Station, sorter: ActiveSorter) => {
@@ -222,11 +190,6 @@ export const sortStations = (a: Station, b: Station, sorter: ActiveSorter) => {
       diff = (a.onlineInfo?.dispatcherExp || 0) - (b.onlineInfo?.dispatcherExp || 0);
       break;
 
-    case 'dispatcher-lang':
-      diff =
-        (a.onlineInfo?.dispatcherLanguageId ?? -1) - (b.onlineInfo?.dispatcherLanguageId ?? -1);
-      break;
-
     case 'routes-single':
       diff =
         (a.generalInfo?.routes.single.filter((r) => !r.hidden && !r.isInternal).length ?? -1) -

src/components/Tooltip/VehiclePreviewTooltip.vue

@@ -18,9 +18,9 @@
       <span v-if="vehicleCargo">({{ vehicleCargo.id }})</span>
     </div>
 
-    <div class="vehicle-props" v-if="vehicleGroup">
+    <div class="vehicle-props" v-if="vehicleData">
-      {{ vehicleGroup.speed }}km/h &bull; {{ vehicleGroup.length }}m &bull;
+      {{ vehicleData.group.speed }}km/h &bull; {{ vehicleData.group.length }}m &bull;
-      {{ (vehicleGroup.weight / 1000).toFixed(1) }}t
+      {{ (vehicleData.group.weight / 1000).toFixed(1) }}t
       <span v-if="vehicleCargo">(+{{ (vehicleCargo.weight / 1000).toFixed(1) }}t)</span>
     </div>
   </div>
@@ -73,18 +73,12 @@ export default defineComponent({
       return this.tooltipStore.content.split(':')[0];
     },
 
-    vehicleGroup() {
+    vehicleData() {
-      if (!this.apiStore.vehiclesData) return null;
+      return this.apiStore.vehiclesData?.find((v) => v.name == this.vehicleName);
-
-      const vehicle = this.apiStore.vehiclesData.vehicles.find((v) => v.name == this.vehicleName);
-
-      if (!vehicle) return null;
-
-      return this.apiStore.vehiclesData.vehicleGroups.find((g) => g.id == vehicle?.vehicleGroupsId);
     },
 
     vehicleCargo() {
-      const x = this.vehicleGroup?.cargoTypes?.find(
+      const x = this.vehicleData?.group.cargoTypes?.find(
         (c) => c.id == this.tooltipStore.content.split(':')[1]
       );
 

src/components/TrainsView/TrainInfo.vue

@@ -66,10 +66,6 @@
 
           <span v-else>{{ train.driverName }}</span>
         </div>
-
-        <div class="train-language-flag">
-          <FlagIcon :language-id="train.driverLanguageId" width="1.75em" />
-        </div>
       </div>
     </div>
 
@@ -203,11 +199,10 @@ import trainInfoMixin from '../../mixins/trainInfoMixin';
 import trainCategoryMixin from '../../mixins/trainCategoryMixin';
 import ProgressBar from '../Global/ProgressBar.vue';
 import StockList from '../Global/StockList.vue';
-import FlagIcon from '../Global/FlagIcon.vue';
 
 export default defineComponent({
   mixins: [trainInfoMixin, styleMixin, trainCategoryMixin],
-  components: { ProgressBar, StockList, FlagIcon },
+  components: { ProgressBar, StockList },
 
   props: {
     train: {

src/components/TrainsView/TrainOptions.vue

@@ -210,10 +210,6 @@ export default defineComponent({
 @use '../../styles/dropdown';
 @use '../../styles/dropdown-filters';
 
-.dropdown_wrapper {
-  top: 2.5em;
-}
-
 .search_content > div {
   margin: 0.5em auto;
 }

src/components/TrainsView/TrainStats.vue

@@ -250,10 +250,9 @@ h3 {
 
 .dropdown_wrapper {
   max-width: 600px;
-  top: 2.5em;
 }
 
-@include responsive.smallScreen {
+@include responsive.smallScreen{
   .no-data {
     text-align: center;
   }

src/components/TrainsView/TrainTable.vue

@@ -97,7 +97,7 @@ export default defineComponent({
 @use '../../styles/animations';
 
 .train-table {
-  height: calc(100vh - 17em);
+  height: calc(100vh - 11em);
   min-height: 500px;
 
   position: relative;

src/components/TrainsView/TrainTableItem.vue

@@ -4,7 +4,7 @@
       <TrainInfo :train="train" />
 
       <div class="train-stats">
-        <StockList :trainStockList="train.stockList" :tractionOnly="true" :showPreviews="true" />
+        <StockList :trainStockList="train.stockList" :tractionOnly="true" />
 
         <div>
           <span>{{ train.speed }}km/h</span>

src/composables/badge.ts

@@ -1,8 +0,0 @@
-export function calculateExpStyles(exp: number, isSupporter = false) {
-  const bgColor = exp > -1 ? (exp < 2 ? '#26B0D9' : `hsl(${-exp * 5 + 100},  85%, 50%)`) : '#666';
-
-  const fontColor = exp > 14 || exp == -1 ? 'white' : 'black';
-  const boxShadow = isSupporter ? `0 0 6px 2px ${bgColor};` : '';
-
-  return { 'background-color': bgColor, color: fontColor, 'box-shadow': boxShadow };
-}

src/composables/time.ts

@@ -1,44 +0,0 @@
-import { useI18n } from 'vue-i18n';
-
-export function calculateDuration(timestampMs: number) {
-  const secondsTotal = Math.floor(timestampMs / 1000);
-  const minsTotal = Math.round(timestampMs / 60000);
-  const hoursTotal = Math.floor(minsTotal / 60);
-  const minsInHour = minsTotal % 60;
-
-  return {
-    secondsTotal,
-    minsTotal,
-    hoursTotal,
-    minsInHour
-  };
-}
-
-export function humanizeDuration(timestampMs: number, showSeconds = false) {
-  const { t } = useI18n();
-
-  const duration = calculateDuration(timestampMs);
-
-  return duration.minsTotal >= 60
-    ? `${t('journal.hours', { value: duration.hoursTotal }, duration.hoursTotal)} ${t(
-        'journal.minutes',
-        { value: duration.minsInHour },
-        duration.minsInHour
-      )}`
-    : showSeconds && duration.secondsTotal <= 60
-      ? t('journal.seconds', { value: duration.secondsTotal }, duration.secondsTotal)
-      : t('journal.minutes', { value: duration.minsTotal }, duration.minsTotal);
-}
-
-export function dateToLocaleString(date: Date, dateOptions: Intl.DateTimeFormatOptions) {
-  const { locale } = useI18n();
-
-  return date.toLocaleString(locale.value == 'pl' ? 'pl-PL' : 'en-GB', dateOptions);
-}
-
-export function timestampToTimeString(timestamp: number) {
-  return new Date(timestamp).toLocaleTimeString('pl-PL', {
-    hour: '2-digit',
-    minute: '2-digit'
-  });
-}

src/http.ts

@@ -1,23 +0,0 @@
-export class HttpClient {
-  constructor(private readonly baseURL: string) {}
-
-  async get<T>(url: string, params?: Record<string, any>): Promise<T> {
-    const absoluteURL = new URL(this.baseURL + '/' + url);
-
-    if (params) {
-      Object.keys(params).forEach((key) => {
-        if (params[key] === undefined) return;
-
-        absoluteURL.searchParams.append(key, params[key]);
-      });
-    }
-
-    const data = await fetch(absoluteURL);
-
-    if (!data.ok) {
-      throw new Error(`Cannot fetch ${absoluteURL}: ${data.statusText}`);
-    }
-
-    return data.json();
-  }
-}

src/i18n.ts

@@ -3,35 +3,12 @@ import plLang from './locales/pl.json';
 
 import { createI18n } from 'vue-i18n';
 
-function customRule(choice: number, choicesLength: number) {
-  if (choice === 0) {
-    return 0;
-  }
-
-  const teen = choice > 10 && choice < 20;
-  const endsWithOne = choice % 10 === 1;
-
-  if (!teen && endsWithOne) {
-    return 1;
-  }
-
-  if (!teen && choice % 10 >= 2 && choice % 10 <= 4) {
-    return 2;
-  }
-
-  return choicesLength < 4 ? 2 : 3;
-}
-
 const i18n = createI18n({
   locale: 'pl',
   legacy: false,
   warnHtmlMessage: false,
   fallbackLocale: 'pl',
 
-  pluralizationRules: {
-    pl: customRule
-  },
-
   messages: {
     en: enLang,
     pl: plLang

src/locales/en.json

@@ -23,6 +23,15 @@
     "bottom-text": "Enjoy!\n~Spythere",
     "button-confirm": "Start using the app!"
   },
+  "migrate-info": {
+    "tooltip-content": "Information about migration of\nStacjownik site!",
+    "header-text": "Attention!",
+    "paragraph-1-html": "Due to the growing interest in Stacjownik and other applications I have made, <b>as of January 1, 2026, Stacjownik will be <u>permanently moved</u> to a new dedicated domain:</b>",
+    "paragraph-2-link-text": "https://stacjownik-td2.spythere.eu",
+    "paragraph-3-text": "This website will no longer receive future updates and after the New Year it will only redirect to the address above.",
+    "paragraph-4-italic-text": "\"Why are you messing this up? It's been fine for so long!\"",
+    "paragraph-4-html": "<i>\"Why are you messing this up? It's been fine for so long!\"</i> <br /> The change is mainly caused by the growing website interest and exceeding the free limit plan of the current Google hosting, which forces additional fees for each use of the service above a certain threshold (or otherwise blocks access to it). By moving the site to a dedicated domain (which has already been purchased and is maintained with the financial help of <span class=\"text--donator\">Supporters</span>), I will get rid of unnecessary expenses for a large corporation that can shut down my application at any given time."
+  },
   "donations": {
     "button-title": "TOSS A COIN",
     "header": "Toss a coin to Stacjownik!",
@@ -56,12 +65,11 @@
     "refresh": "REFRESH"
   },
   "update": {
-    "title": "Stacjownik has been updated!",
+    "title": "Stacjownik update!",
     "confirm": "ROGER THAT!",
     "no-data": "No data about the latest app update has been found",
     "info-1": "This changelog will be available to see once again after clicking the version number in the footer",
-    "info-2": "The full app changelog available on {link}",
+    "info-2": "The full app changelog available on <a href='https://github.com/Spythere/stacjownik' target='_blank'>the project's GitHub</a>"
-    "info-2-link-text": "the project's GitHub page"
   },
   "app": {
     "sceneries": "SCENERIES",
@@ -78,8 +86,10 @@
     "tooltip-scenery-offline": "Scenery is offline",
     "pojazdownik-link-content": "POJAZDOWNIK",
     "language-tooltip-content": "JĘZYK / LANGUAGE",
-    "gnr-link-content": "TRAIN ORDERS <br> GENERATOR",
+    "gnr-link-content": "TRAIN ORDERS <br> GENERATOR"
-    "discord-link-content": "STACJOWNIK <br> DISCORD SERVER"
+  },
+  "footer": {
+    "discord": "Stacjownik Discord server"
   },
   "categories": {
     "EI": "domestic express",
@@ -186,11 +196,9 @@
     "search-train": "Train no. / #",
     "select-driver": "Choose a driver...",
     "search-driver": "Driver name",
-    "search-duty-id": "Duty ID",
     "search-dispatcher": "Dispatcher name",
     "search-station": "Scenery name / #",
     "search-author": "Timetable author name",
-    "search-includesScenery": "Includes scenery name",
     "search-issuedFrom": "Issuing scenery name",
     "search-via": "Via scenery name",
     "search-terminatingAt": "Terminating scenery name",
@@ -199,7 +207,6 @@
     "search-date-from": "Date (UTC+2 / CEST)",
     "search-date-to": "Date (UTC+2 / CEST)",
     "select-categoryCode": "Train category",
-    "search-headUnit": "Traction unit (e.g. EP09, ET22-401)",
     "sort-mass": "mass",
     "sort-speed": "speed",
     "sort-length": "length",
@@ -250,9 +257,7 @@
       "blockades": "BLOCK SIGNALLING",
       "status": "ONLINE STATUS",
       "timetables": "ACTIVE TIMETABLES",
-      "spawns": "OPEN SPAWNS",
+      "spawns": "OPEN SPAWNS"
-      "externalRoutes": "EXTERNAL ROUTES",
-      "internalRoutes": "INTERNAL ROUTES"
     },
     "changed-filters-count": "Changed filters:",
     "no-changed-filters": "No changed filters",
@@ -296,37 +301,29 @@
     "withoutActiveTimetables": "NO ACTIVE",
     "junction": "JUNCTIONS",
     "nonJunction": "OTHER",
-
-    "oneWay": "OTHER SINGLE TRACK",
-    "oneWayCatenary": "CATENARY SINGLE TRACK",
-    "twoWayCatenary": "CATENARY DOUBLE TRACK",
-    "twoWay": "OTHER DOUBLE TRACK",
-    "oneWayCatenaryInt": "CATENARY SINGLE TRACK",
-    "oneWayInt": "OTHER SINGLE TRACK",
-    "twoWayCatenaryInt": "CATENARY DOUBLE TRACK",
-    "twoWayInt": "OTHER DOUBLE TRACK",
-
     "sliders": {
-      "vMax": "ROUTE SPEED",
+      "minLevel": "MIN. REQUIRED DISPATCHER LEVEL",
-      "level": "REQUIRED DISPATCHER LEVEL",
+      "maxLevel": "MAX. REQUIRED DISPATCHER LEVEL",
-      "routeOneWay": "SINGLE TRACK ROUTES (OTHER)",
+      "minVmax": "MIN. SCENERY ROUTE SPEED",
-      "routeOneWayCatenary": "SINGLE TRACK ROUTES (CATENARY)",
+      "maxVmax": "MAX. SCENERY ROUTE SPEED",
-      "routeTwoWayCatenary": "DOUBLE TRACK ROUTES (CATENARY)",
+      "minOneWayCatenary": "MIN. CATENARY SINGLE TRACK ROUTES",
-      "routeTwoWay": "DOUBLE TRACK ROUTES (OTHER)",
+      "minOneWay": "MIN. OTHER SINGLE TRACK ROUTES",
-      "routeOneWayInternalCatenary": "INTERNAL SINGLE TRACK ROUTES (CATENARY)",
+      "minTwoWayCatenary": "MIN. CATENARY DOUBLE TRACK ROUTES",
-      "routeOneWayInternal": "INTERNAL SINGLE TRACK ROUTES (OTHER)",
+      "minTwoWay": "MIN. OTHER DOUBLE TRACK ROUTES",
-      "routeTwoWayInternalCatenary": "INTERNAL DOUBLE TRACK ROUTES (CATENARY)",
+      "minOneWayCatenaryInt": "MIN. INTERNAL CATENARY SINGLE TRACK ROUTES",
-      "routeTwoWayInternal": "INTERNAL DOUBLE TRACK ROUTES (OTHER)"
+      "minOneWayInt": "MIN. INTERNAL OTHER SINGLE TRACK ROUTES",
+      "minTwoWayCatenaryInt": "MIN. INTERNAL CATENARY DOUBLE TRACK ROUTES",
+      "minTwoWayInt": "MIN. INTERNAL OTHER DOUBLE TRACK ROUTES"
     },
     "sceneries-placeholder": "Search for scenery",
-    "line-numbers-placeholder": "Line numbers (separated by commas)",
+    "authors-placeholder": "Scenery author (other filters apply)",
-    "authors-placeholder": "Scenery author",
+    "projects-placeholder": "Scenery project (other filters apply)",
-    "projects-placeholder": "Scenery project",
     "search-button-title": "SEARCH",
     "minimum-hours-title": "SHOW ONLY SCENERIES UNTIL:",
     "now": "NOW",
     "hour": "h",
     "no-limit": "NO LIMIT",
+    "include-selected": "INCLUDE SELECTED",
     "save": "REMEMBER FILTERS",
     "reset": "RESET FILTERS",
     "close": "CLOSE FILTERS"
@@ -337,7 +334,6 @@
       "min-lvl": "Scenery\nlevel",
       "status": "Status",
       "dispatcher": "Dispatcher",
-      "dispatcher-lang": "Language",
       "dispatcher-lvl": "Dispatcher\nlevel",
       "routes-single": "1-track\nroutes",
       "routes-double": "2-track\nroutes",
@@ -428,7 +424,7 @@
     "last-seen-ago": "since {minutes} minutes",
     "scenery-offline": "Offline ride",
     "timeout": "An error occured while trying to refresh SWDR timetable data!",
-    "driver-profile-link": "PLAYER'S PROFILE",
+    "driver-journal-link": "DRIVER JOURNAL",
     "driver-srjp-link": "SRJP",
     "driver-return-link": "RETURN",
     "driver-not-found-header": "Train not found! :/",
@@ -559,7 +555,7 @@
     "no-users": "NO ACTIVE PLAYERS",
     "no-spawns": "NO OPEN SPAWNS",
     "no-scenery": "Oops! This scenery doesn't exist!",
-    "return-btn": "BACK TO THE MAIN SITE",
+    "return-btn": "BACK TO THE LAST SITE",
     "history-btn": "View the dispatcher history",
     "info-btn": "Return to the scenery view",
     "authors-title": "Scenery author | Scenery authors",
@@ -569,14 +565,10 @@
     "additional-tools-title": "Additional tools",
     "one-way-routes": "Single track routes",
     "two-way-routes": "Double track routes",
-    "routes-hidden": "Hidden internal routes",
     "no-data": "No available data about this scenery",
     "option-active-timetables": "Active timetables",
     "option-timetables-history": "Timetables history PL1",
     "option-dispatchers-history": "Dispatchers history PL1",
-    "option-top-list": "Scenery records",
-    "btn-show-timetable-thumbnails": "Show rolling stock thumbnails",
-    "btn-hide-timetable-thumbnails": "Hide rolling stock thumbnails",
     "timetable-includesScenery": "ALL TIMETABLES",
     "timetable-via": "PASSES THROUGH",
     "timetable-issuedFrom": "BEGINS HERE",
@@ -588,26 +580,13 @@
     "dispatcher-status-changes": "Status changes:",
     "req-level": "all dispatcher levels | dispatcher level {lvl} required | dispatcher level {lvl} required",
     "history-list-empty": "No recorded scenery history!",
-    "forum-topic": "Scenery's forum topic",
+    "forum-topic": "Official {name} forum topic",
     "gnr-link": "Train orders generator",
     "pragotron-link": "Timetable pallet board",
     "tablice-link": "Timetable summary board <br> (by Thundo)",
     "bottom-info": "Show full history in the Journal tab",
     "btn-show-internal-routes": "Show internal routes",
-    "btn-hide-internal-routes": "Hide internal routes",
+    "btn-hide-internal-routes": "Hide internal routes"
-    "top-list": {
-      "header": "RECORDS ON THE SCENERY (PL1)",
-      "mode-dutyCount": "DUTIES",
-      "mode-dispatcherRating": "RATING",
-      "mode-dutyDuration": "DUTY DURATION",
-      "scope-name": "GENERAL",
-      "scope-hash": "CURRENT HASH",
-
-      "place": "{n}. place",
-      "dispatcher-rating": "Rating: {n}",
-      "duty-count": "No duties | 1 duty | Duties: {n}",
-      "duration": "Duration:"
-    }
   },
   "availability": {
     "title": "Availability",
@@ -636,54 +615,9 @@
     "desc-end": "The train terminates here",
     "desc-terminated": "The train has been terminated"
   },
-  "profile": {
+  "history": {
-    "journal-button": "PLAYER'S PROFILE",
+    "title": "TIMETABLE JOURNAL",
-    "no-player-found": "Player not found! :/",
+    "search-train": "Train no.",
-    "return-to-main": "Return to the main site",
+    "search-driver": "Driver name"
-
-    "filters": {
-      "Timetable": "TIMETABLES",
-      "Dispatcher": "DISPATCHER DUTIES",
-      "IssuedTimetable": "ISSUED TIMETABLES"
-    },
-
-    "stats": {
-      "timetables-journal": "TIMETABLE JOURNAL",
-      "dispatchers-journal": "DISPATCHER JOURNAL",
-      "forum-profile": "FORUM PROFILE",
-
-      "driver": "DRIVER",
-      "dispatcher": "DISPATCHER",
-
-      "header-driver": "DRIVER'S STATS",
-      "fulfilled-timetables": "fulfilled timetables",
-      "route-distance": "confirmed timetables distance",
-      "confirmed-stops": "confirmed stations in timetables",
-      "longest-timetable": "longest timetable",
-      "avg-timetable-length": "average distance of all timetables",
-      "no-timetable-stats": "This player does not have any registered timetables in Stacjownik!",
-
-      "header-dispatcher": "DISPATCHER'S STATS",
-      "duties-count": "duties as dispatcher",
-      "longest-duty": "longest duty",
-      "created-timetables-count": "issued timetables as dispatcher",
-      "longest-created-timetable": "longest issued timetable",
-      "created-timetables-length-sum": "distance sum of issued timetables",
-      "no-dispatcher-stats": "No registered dispatcher duties in Stacjownik!"
-    },
-
-    "recent-stats": {
-      "header": "ACTIVITY STATISTICS (30 LAST DAYS)",
-      "timetables": "TIMETABLES",
-      "distance": "MADE KILOMETERS",
-      "duties": "DISPATCHER DUTIES",
-      "created-timetables": "ISSUED TIMETABLES"
-    },
-
-    "list": {
-      "for": "for",
-      "online-since": "online since",
-      "no-recent-history": "No recent activity in the simulator :("
-    }
   }
 }

src/locales/pl.json

@@ -23,6 +23,14 @@
     "bottom-text": "Miłego korzystania\n~Spythere",
     "button-confirm": "Zacznij korzystać z aplikacji!"
   },
+  "migrate-info": {
+    "tooltip-content": "Informacja o migracji\nstrony Stacjownika!",
+    "header-text": "Uwaga!",
+    "paragraph-1-html": "Ze względu na coraz większe zainteresowanie Stacjownikiem oraz innymi aplikacjami mojego autorstwa <b>z dniem 1 stycznia 2026r. Stacjownik zostaje <u>permamentnie przeniesiony</u> na nową dedykowaną domenę:</b>",
+    "paragraph-2-link-text": "https://stacjownik-td2.spythere.eu",
+    "paragraph-3-text": "Obecna strona nie będzie otrzymywać już przyszłych aktualizacji, a po Nowym Roku będzie jedynie przenosić na powyższy adres.",
+    "paragraph-4-html": "<i>\"Po co psujesz? Przecież było dobrze tyle czasu!\"</i> <br /> Zmiana podyktowana jest głównie wzrostem zainteresowania stroną i przekraczaniem darmowego limitu obecnego hostingu Google'a, który wymusza płatność za każde użycie serwisu ponad określoną wartość (lub w przeciwnym wypadku blokuje do niego dostęp). Przenosząc stronę na dedykowaną domenę (która jest już wykupiona i utrzymywana dzięki pomocy <span class=\"text--donator\">Wspierających</span>), pozbędę się niepotrzebnego wydatku dla wielkiej korporacji, która w każdej chwili może mi wyłączyć aplikację."
+  },
   "donations": {
     "button-title": "GROSZA DAJ",
     "header": "Grosza daj Stacjownikowi!",
@@ -56,12 +64,11 @@
     "refresh": "ODŚWIEŻ"
   },
   "update": {
-    "title": "Stacjownik został zaktualizowany!",
+    "title": "Aktualizacja Stacjownika!",
     "confirm": "PRZYJĄŁEM!",
     "no-data": "Nie znaleziono informacji o ostatnich zmianach w aplikacji",
     "info-1": "Ten changelog będzie zawsze dostępny po kliknięciu numeru wersji w stopce strony",
-    "info-2": "Pełny changelog dostępny na {link}",
+    "info-2": "Pełny changelog dostępny na <a href='https://github.com/Spythere/stacjownik' target='_blank'>GitHubie projektu</a>"
-    "info-2-link-text": "GitHubie projektu"
   },
   "app": {
     "sceneries": "SCENERIE",
@@ -75,8 +82,10 @@
     "tooltip-scenery-offline": "Sceneria offline",
     "pojazdownik-link-content": "POJAZDOWNIK",
     "language-tooltip-content": "JĘZYK / LANGUAGE",
-    "gnr-link-content": "GENERATOR <br> ROZKAZÓW PISEMNYCH",
+    "gnr-link-content": "GENERATOR <br> ROZKAZÓW PISEMNYCH"
-    "discord-link-content": "SERWER DISCORD <br> STACJOWNIKA"
+  },
+  "footer": {
+    "discord": "Serwer Discord Stacjownika"
   },
   "categories": {
     "EI": "ekspres krajowy",
@@ -183,11 +192,9 @@
     "search-train": "Nr pociągu / #",
     "search-driver": "Nick maszynisty",
     "select-driver": "Wybierz maszynistę...",
-    "search-duty-id": "ID służby",
     "search-dispatcher": "Nick dyżurnego",
     "search-station": "Nazwa scenerii / #",
     "search-author": "Nick autora rozkładu jazdy",
-    "search-includesScenery": "Zawiera scenerię",
     "search-issuedFrom": "Sceneria początkowa",
     "search-via": "Przez scenerię",
     "search-terminatingAt": "Sceneria końcowa",
@@ -196,7 +203,6 @@
     "search-date-from": "Data (UTC+2 / CEST)",
     "search-date-to": "Data (UTC+2 / CEST)",
     "select-categoryCode": "Kategoria pociągu",
-    "search-headUnit": "Pojazd trakcyjny (np. EP09, ET22-137)",
     "sort-routeDistance": "kilometraż",
     "sort-allStopsCount": "stacje",
     "sort-beginDate": "data",
@@ -248,9 +254,7 @@
       "blockades": "BLOKADY LINIOWE",
       "status": "STATUS ONLINE",
       "timetables": "AKTYWNE ROZKŁADY JAZDY",
-      "spawns": "OTWARTE SPAWNY",
+      "spawns": "OTWARTE SPAWNY"
-      "externalRoutes": "SZLAKI ZEWNĘTRZNE",
-      "internalRoutes": "SZLAKI WEWNĘTRZNE"
     },
     "changed-filters-count": "Zmienione filtry:",
     "no-changed-filters": "Brak zmienionych filtrów",
@@ -294,37 +298,29 @@
     "withoutActiveTimetables": "BEZ AKTYWNYCH",
     "junction": "WĘZŁOWE",
     "nonJunction": "INNE",
-
-    "oneWay": "JEDNOTOROWE NIEZELEKTRYFIKOWANE",
-    "oneWayCatenary": "JEDNOTOROWE ZELEKTRYFIKOWANE",
-    "twoWayCatenary": "DWUTOROWE ZELEKTRYFIKOWANE",
-    "twoWay": "DWUTOROWE NIEZELEKTRYFIKOWANE",
-    "oneWayCatenaryInt": "JEDNOTOROWE ZELEKTRYFIKOWANE",
-    "oneWayInt": "JEDNOTOROWE NIEZELEKTRYFIKOWANE",
-    "twoWayCatenaryInt": "DWUTOROWE ZELEKTRYFIKOWANE",
-    "twoWayInt": "DWUTOROWE NIEZELEKTRYFIKOWANE",
-
     "sliders": {
-      "vMax": "PRĘDKOŚĆ SZLAKOWA",
+      "minLevel": "MIN. WYMAGANY POZIOM DYŻURNEGO",
-      "level": "WYMAGANY POZIOM DYŻURNEGO",
+      "maxLevel": "MAKS. WYMAGANY POZIOM DYŻURNEGO",
-      "routeOneWay": "SZLAKI 1-TOROWE NIEZELEKTR.",
+      "minVmax": "MIN. PRĘDKOŚĆ SZLAKOWA",
-      "routeOneWayCatenary": "SZLAKI 1-TOROWE ZELEKTR.",
+      "maxVmax": "MAKS. PRĘDKOŚĆ SZLAKOWA",
-      "routeTwoWayCatenary": "SZLAKI 2-TOROWE ZELEKTR.",
+      "minOneWayCatenary": "SZLAKI JEDNOTOROWE ZELEKTR. (MINIMUM)",
-      "routeTwoWay": "SZLAKI 2-TOROWE NIEZELEKTR.",
+      "minOneWay": "SZLAKI JEDNOTOROWE NIEZELEKTR. (MINIMUM)",
-      "routeOneWayInternalCatenary": "SZLAKI WEWN. 1-TOROWE ZELEKTR.",
+      "minTwoWayCatenary": "SZLAKI DWUTOROWE ZELEKTR. (MINIMUM)",
-      "routeOneWayInternal": "SZLAKI WEWN. 1-TOROWE NIEZELEKTR.",
+      "minTwoWay": "SZLAKI DWUTOROWE NIEZELEKTR. (MINIMUM)",
-      "routeTwoWayInternalCatenary": "SZLAKI WEWN. 2-TOROWE ZELEKTR.",
+      "minOneWayCatenaryInt": "SZLAKI JEDNOTOROWE ZELEKTR. WEWNĘTRZNE (MINIMUM)",
-      "routeTwoWayInternal": "SZLAKI WEWN. 2-TOROWE NIEZELEKTR."
+      "minOneWayInt": "SZLAKI JEDNOTOROWE NIEZELEKTR. WEWNĘTRZNE (MINIMUM)",
+      "minTwoWayCatenaryInt": "SZLAKI DWUTOROWE ZELEKTR. WEWNĘTRZNE (MINIMUM)",
+      "minTwoWayInt": "SZLAKI DWUTOROWE NIEZELEKTR. WEWNĘTRZNE (MINIMUM)"
     },
     "sceneries-placeholder": "Wyszukaj scenerię",
-    "line-numbers-placeholder": "Numery linii (oddzielone przecinkami)",
+    "authors-placeholder": "Autor scenerii (uwzględnia inne filtry)",
-    "authors-placeholder": "Autor scenerii",
+    "projects-placeholder": "Projekt scenerii (uwzględnia inne filtry)",
-    "projects-placeholder": "Projekt scenerii",
     "search-button-title": "SZUKAJ",
     "minimum-hours-title": "POKAŻ TYLKO SCENERIE DOSTĘPNE MINIMUM DO:",
     "now": "TERAZ",
     "hour": " godz.",
     "no-limit": "BEZ LIMITU",
+    "include-selected": "POKAŻ ZAZNACZONE",
     "save": "ZAPAMIĘTAJ FILTRY",
     "reset": "RESETUJ FILTRY",
     "close": "ZAMKNIJ FILTRY"
@@ -335,7 +331,6 @@
       "min-lvl": "Poziom\nscenerii",
       "status": "Status",
       "dispatcher": "Dyżurny",
-      "dispatcher-lang": "Język",
       "dispatcher-lvl": "Poziom\ndyżurnego",
       "routes-single": "Szlaki\n1-torowe",
       "routes-double": "Szlaki\n2-torowe",
@@ -415,7 +410,7 @@
     "last-seen-ago": "od {minutes} minut",
     "scenery-offline": "Przejazd offline",
     "timeout": "Wystąpił problem z aktualizacją rozkładów jazdy z SWDR",
-    "driver-profile-link": "PROFIL GRACZA",
+    "driver-journal-link": "DZIENNIK MASZYNISTY",
     "driver-srjp-link": "SRJP",
     "driver-return-link": "POWRÓT",
     "driver-not-found-header": "Nie znaleziono pociągu! :/",
@@ -545,7 +540,7 @@
     "no-users": "BRAK AKTYWNYCH GRACZY",
     "no-spawns": "BRAK OTWARTYCH SPAWNÓW",
     "no-scenery": "Ups! Ta sceneria nie istnieje!",
-    "return-btn": "POWRÓT DO STRONY GŁÓWNEJ",
+    "return-btn": "POWRÓT DO POPRZEDNIEJ STRONY",
     "history-btn": "Przejdź do widoku historii dyżurnych ruchu",
     "info-btn": "Wróć do widoku scenerii",
     "authors-title": "Autor scenerii | Autorzy scenerii",
@@ -555,14 +550,10 @@
     "additional-tools-title": "Dodatkowe narzędzia",
     "one-way-routes": "Szlaki jednotorowe",
     "two-way-routes": "Szlaki dwutorowe",
-    "routes-hidden": "Ukryto szlaki wewnętrzne",
     "no-data": "Brak informacji o tej scenerii",
     "option-active-timetables": "Aktywne rozkłady jazdy",
     "option-timetables-history": "Historia rozkładów PL1",
     "option-dispatchers-history": "Historia dyżurów PL1",
-    "option-top-list": "Rekordy scenerii",
-    "btn-show-timetable-thumbnails": "Pokazuj podglądy składów",
-    "btn-hide-timetable-thumbnails": "Ukrywaj podglądy składów",
     "timetable-includesScenery": "WSZYSTKIE RJ",
     "timetable-via": "PRZEJEŻDŻA",
     "timetable-issuedFrom": "ROZPOCZYNA BIEG",
@@ -574,26 +565,13 @@
     "dispatcher-status-changes": "Zmiany statusów:",
     "req-level": "ogólnodostępna | minimum {lvl} poziom dyżurnego | minimum {lvl} poziom dyżurnego",
     "history-list-empty": "Brak historii dla tej scenerii!",
-    "forum-topic": "Wątek scenerii",
+    "forum-topic": "Oficjalny wątek scenerii {name}",
     "gnr-link": "Generator rozkazów pisemnych",
     "pragotron-link": "Paletowa tablica informacyjna",
     "tablice-link": "Tablica informacyjna zbiorcza <br> (autorstwa Thundo)",
     "bottom-info": "Pokaż pełną historię w zakładce Dziennika",
     "btn-show-internal-routes": "Pokazuj szlaki wewnętrzne",
-    "btn-hide-internal-routes": "Ukrywaj szlaki wewnętrzne",
+    "btn-hide-internal-routes": "Ukrywaj szlaki wewnętrzne"
-    "top-list": {
-      "header": "REKORDY NA SCENERII (PL1)",
-      "mode-dutyCount": "DYŻURY",
-      "mode-dispatcherRating": "OCENA",
-      "mode-dutyDuration": "CZAS DYŻURU",
-      "scope-name": "OGÓLNIE",
-      "scope-hash": "OBECNY HASH",
-
-      "place": "{n}. miejsce",
-      "dispatcher-rating": "Ocena: {n}",
-      "duty-count": "Brak dyżurów | 1 dyżur | Dyżury: {n}",
-      "duration": "Czas:"
-    }
   },
   "availability": {
     "title": "Dostępność",
@@ -622,54 +600,7 @@
     "desc-end": "Pociąg kończy bieg",
     "desc-terminated": "Pociąg zakończył bieg"
   },
-  "profile": {
+  "history": {
-    "journal-button": "PROFIL GRACZA",
+    "title": "DZIENNIK ROZKŁADÓW JAZDY"
-    "no-player-found": "Nie znaleziono gracza! :/",
-    "return-to-main": "Powrót do strony głównej",
-
-    "filters": {
-      "Timetable": "ROZKŁADY JAZDY",
-      "Dispatcher": "SŁUŻBY DYŻURNEGO",
-      "IssuedTimetable": "WYSTAWIONE RJ"
-    },
-
-    "stats": {
-      "timetables-journal": "DZIENNIK RJ",
-      "dispatchers-journal": "DZIENNIK DR",
-      "forum-profile": "PROFIL FORUM",
-
-      "driver": "MASZYNISTA",
-      "dispatcher": "DYŻURNY RUCHU",
-
-      "header-driver": "STATYSTYKI MASZYNISTY",
-      "fulfilled-timetables": "wypełnione rozkłady jazdy",
-      "route-distance": "zatwierdzony kilometraż w RJ",
-      "confirmed-stops": "potwierdzonych stacji w RJ",
-      "longest-timetable": "najdłuższy rozkład jazdy",
-      "avg-timetable-length": "średnia długość wszystkich rozkładów",
-      "no-timetable-stats": "Ten użytkownik nie posiada statystyk maszynisty zarejestrowanych przez Stacjownik!",
-
-      "header-dispatcher": "STATYSTYKI DYŻURNEGO RUCHU",
-      "duties-count": "służby jako dyżurny ruchu",
-      "longest-duty": "najdłuższa służba",
-      "created-timetables-count": "wystawione RJ jako dyżurny ruchu",
-      "longest-created-timetable": "najdłuższy wystawiony RJ",
-      "created-timetables-length-sum": "suma długości wystawionych RJ",
-      "no-dispatcher-stats": "Ten użytkownik nie posiada statystyk dyżurnego zarejestrowanych przez Stacjownik!"
-    },
-
-    "recent-stats": {
-      "header": "STATYSTYKI AKTYWNOŚCI (30 DNI)",
-      "timetables": "ROZKŁADÓW JAZDY",
-      "distance": "POKONANYCH KILOMETRÓW",
-      "duties": "SŁUŻB DYŻURNEGO",
-      "created-timetables": "WYSTAWIONYCH ROZKŁADÓW"
-    },
-
-    "list": {
-      "for": "dla",
-      "online-since": "online od",
-      "no-recent-history": "Brak ostatniej aktywności w symulatorze :("
-    }
   }
 }

src/managers/stationFilterManager.ts

@@ -1,24 +1,5 @@
 import StorageManager from './storageManager';
 
-export type SliderGroup =
-  | 'vMax'
-  | 'level'
-  | 'routeOneWay'
-  | 'routeOneWayCatenary'
-  | 'routeOneWayInternal'
-  | 'routeOneWayInternalCatenary'
-  | 'routeTwoWay'
-  | 'routeTwoWayCatenary'
-  | 'routeTwoWayInternal'
-  | 'routeTwoWayInternalCatenary';
-
-export interface SliderOptions {
-  id: string;
-  minRange: number;
-  maxRange: number;
-  step: number;
-}
-
 export const sections = [
   'status',
   'timetables',
@@ -29,9 +10,7 @@ export const sections = [
   'control',
   'blockades',
   'signals',
-  'addons',
+  'addons'
-  'externalRoutes',
-  'internalRoutes'
 ] as const;
 
 export const initFilters = {
@@ -59,6 +38,9 @@ export const initFilters = {
   mixed: false,
   SBL: false,
   PBL: false,
+  'include-selected': false,
+  'no-1track': false,
+  'no-2track': false,
   free: true,
   occupied: false,
   nonPublic: false,
@@ -78,111 +60,33 @@ export const initFilters = {
   onlineFromHours: 0,
   minLevel: 0,
   maxLevel: 20,
-  oneWay: false,
-  oneWayCatenary: false,
-  twoWay: false,
-  twoWayCatenary: false,
-  oneWayCatenaryInt: false,
-  oneWayInt: false,
-  twoWayInt: false,
-  twoWayCatenaryInt: false,
   minOneWay: 0,
   minOneWayCatenary: 0,
-  minOneWayCatenaryInt: 0,
   minOneWayInt: 0,
+  minOneWayCatenaryInt: 0,
   minTwoWay: 0,
   minTwoWayCatenary: 0,
   minTwoWayInt: 0,
   minTwoWayCatenaryInt: 0,
-  maxOneWay: 10,
-  maxOneWayCatenary: 10,
-  maxOneWayInt: 20,
-  maxOneWayCatenaryInt: 20,
-  maxTwoWay: 10,
-  maxTwoWayCatenary: 10,
-  maxTwoWayInt: 20,
-  maxTwoWayCatenaryInt: 20,
   authors: '',
-  projects: '',
+  projects: ''
-  lines: ''
 };
 
-export const sliderGroups: SliderGroup[] = [
+export const sliderStates = [
-  'vMax',
+  { id: 'maxVmax', minRange: 0, maxRange: 200, step: 10 },
-  'level',
+  { id: 'minVmax', minRange: 0, maxRange: 200, step: 10 },
-  'routeOneWayCatenary',
+  { id: 'minLevel', minRange: 0, maxRange: 20, step: 1 },
-  'routeOneWay',
+  { id: 'maxLevel', minRange: 0, maxRange: 20, step: 1 },
-  'routeTwoWayCatenary',
+  { id: 'minOneWay', minRange: 0, maxRange: 5, step: 1 },
-  'routeTwoWay',
+  { id: 'minOneWayCatenary', minRange: 0, maxRange: 5, step: 1 },
-  'routeOneWayInternalCatenary',
+  { id: 'minOneWayInt', minRange: 0, maxRange: 5, step: 1 },
-  'routeOneWayInternal',
+  { id: 'minOneWayCatenaryInt', minRange: 0, maxRange: 5, step: 1 },
-  'routeTwoWayInternalCatenary',
+  { id: 'minTwoWay', minRange: 0, maxRange: 5, step: 1 },
-  'routeTwoWayInternal'
+  { id: 'minTwoWayCatenary', minRange: 0, maxRange: 5, step: 1 },
+  { id: 'minTwoWayInt', minRange: 0, maxRange: 5, step: 1 },
+  { id: 'minTwoWayCatenaryInt', minRange: 0, maxRange: 5, step: 1 }
 ];
 
-export const sliderGroupsOptions: Record<SliderGroup, SliderOptions[]> = {
-  vMax: [
-    { id: 'minVmax', minRange: 0, maxRange: 200, step: 20 },
-    { id: 'maxVmax', minRange: 0, maxRange: 200, step: 20 }
-  ],
-  level: [
-    { id: 'minLevel', minRange: 0, maxRange: 20, step: 1 },
-    { id: 'maxLevel', minRange: 0, maxRange: 20, step: 1 }
-  ],
-  routeOneWay: [
-    { id: 'minOneWay', minRange: 0, maxRange: 10, step: 1 },
-    { id: 'maxOneWay', minRange: 0, maxRange: 10, step: 1 }
-  ],
-  routeOneWayCatenary: [
-    { id: 'minOneWayCatenary', minRange: 0, maxRange: 10, step: 1 },
-    { id: 'maxOneWayCatenary', minRange: 0, maxRange: 10, step: 1 }
-  ],
-  routeOneWayInternal: [
-    { id: 'minOneWayInt', minRange: 0, maxRange: 20, step: 1 },
-    { id: 'maxOneWayInt', minRange: 0, maxRange: 20, step: 1 }
-  ],
-  routeOneWayInternalCatenary: [
-    {
-      id: 'minOneWayCatenaryInt',
-      minRange: 0,
-      maxRange: 20,
-      step: 1
-    },
-    {
-      id: 'maxOneWayCatenaryInt',
-      minRange: 0,
-      maxRange: 20,
-      step: 1
-    }
-  ],
-  routeTwoWay: [
-    { id: 'minTwoWay', minRange: 0, maxRange: 10, step: 1 },
-    { id: 'maxTwoWay', minRange: 0, maxRange: 10, step: 1 }
-  ],
-  routeTwoWayCatenary: [
-    { id: 'minTwoWayCatenary', minRange: 0, maxRange: 10, step: 1 },
-    { id: 'maxTwoWayCatenary', minRange: 0, maxRange: 10, step: 1 }
-  ],
-  routeTwoWayInternal: [
-    { id: 'minTwoWayInt', minRange: 0, maxRange: 20, step: 1 },
-    { id: 'maxTwoWayInt', minRange: 0, maxRange: 20, step: 1 }
-  ],
-  routeTwoWayInternalCatenary: [
-    {
-      id: 'minTwoWayCatenaryInt',
-      minRange: 0,
-      maxRange: 20,
-      step: 1
-    },
-    {
-      id: 'maxTwoWayCatenaryInt',
-      minRange: 0,
-      maxRange: 20,
-      step: 1
-    }
-  ]
-};
-
 export type StationFilter = keyof typeof initFilters;
 export type StationFilterSection = (typeof sections)[number];
 
@@ -207,9 +111,7 @@ export const filtersSections: Record<StationFilterSection, StationFilter[]> = {
     'manual'
   ],
   blockades: ['SBL', 'PBL'],
-  signals: ['modern', 'semaphores', 'mixed', 'historical'],
+  signals: ['modern', 'semaphores', 'mixed', 'historical']
-  externalRoutes: ['oneWayCatenary', 'oneWay', 'twoWayCatenary', 'twoWay'],
-  internalRoutes: ['oneWayCatenaryInt', 'oneWayInt', 'twoWayCatenaryInt', 'twoWayInt']
 };
 
 export function setupFilters(currentFilters: Record<string, any>) {
@@ -232,8 +134,7 @@ export function getChangedFilters(currentFilters: Record<string, any>): string[]
   return (
     Object.keys(currentFilters).filter(
       (filterKey) =>
-        currentFilters[filterKey].toString() !==
+        currentFilters[filterKey] !== initFilters[filterKey as keyof typeof initFilters]
-        initFilters[filterKey as keyof typeof initFilters].toString()
     ) ?? []
   );
 }

src/mixins/trainInfoMixin.ts

@@ -122,27 +122,19 @@ export default defineComponent({
 
       // Check the whole consist speed limit
       const vehicleMaxSpeed = stockList.reduce((acc, stockName, i) => {
-        if (!this.apiStore.vehiclesData) return acc;
-
         const [vehicleName, vehicleCargo] = stockName.split(':');
 
-        const vehicle = this.apiStore.vehiclesData.vehicles.find((v) => v.name == vehicleName);
+        const vehicleData = this.apiStore.vehiclesData?.find((v) => v.name == vehicleName);
 
-        if (!vehicle) return acc;
+        if (!vehicleData) return acc;
 
-        const vehicleGroup = this.apiStore.vehiclesData.vehicleGroups.find(
+        let vehicleSpeed = vehicleData.group.speed;
-          (g) => g.id == vehicle.vehicleGroupsId
-        );
 
-        if (!vehicleGroup) return acc;
+        if (vehicleData.type == 'wagon-freight') {
-
-        let vehicleSpeed = vehicleGroup.speed;
-
-        if (vehicle.type == 'wagon-freight') {
           isPassenger = false;
 
-          if (vehicleCargo !== undefined && vehicleGroup.speedLoaded) {
+          if (vehicleCargo !== undefined && vehicleData.group.speedLoaded) {
-            vehicleSpeed = vehicleGroup.speedLoaded;
+            vehicleSpeed = vehicleData.group.speedLoaded;
           }
         }
 
@@ -151,23 +143,14 @@ export default defineComponent({
 
       // Check the head vehicle speed limit
       const headLocoName = stockList[0];
-
+      const headLocoVehicleData = this.apiStore.vehiclesData?.find((v) => v.name == headLocoName);
-      const headLocoVehicle = this.apiStore.vehiclesData!.vehicles.find(
-        (v) => v.name == headLocoName
-      );
-
-      const headLocoVehicleGroup = this.apiStore.vehiclesData!.vehicleGroups.find(
-        (g) => g.id == headLocoVehicle?.vehicleGroupsId
-      );
-
-      if (!headLocoVehicleGroup) return vehicleMaxSpeed;
 
       // Omit speed check for head vehicle if there's no data for it
-      if (!headLocoName || !headLocoVehicle || !headLocoVehicleGroup.massSpeeds)
+      if (!headLocoName || !headLocoVehicleData || !headLocoVehicleData.group.massSpeeds)
         return vehicleMaxSpeed;
 
       const massSpeeds =
-        headLocoVehicleGroup.massSpeeds[
+        headLocoVehicleData.group.massSpeeds[
           stockList.length == 1 ? 'none' : isPassenger ? 'passenger' : 'cargo'
         ];
 

src/router/index.ts

@@ -61,11 +61,6 @@ const routes: Array<RouteRecordRaw> = [
       region: route.query.region
     })
   },
-  {
-    path: '/profile',
-    name: 'PlayerProfileView',
-    component: () => import('../views/PlayerProfileView.vue')
-  },
   {
     path: '/:catchAll(.*)',
     redirect: '/'
@@ -75,12 +70,12 @@ const routes: Array<RouteRecordRaw> = [
 const router = createRouter({
   scrollBehavior(to, from, savedPosition) {
     if (
-      (to.name == 'SceneryView' || to.name == 'DriverView' || to.name == 'PlayerProfileView') &&
+      (to.name == 'SceneryView' || to.name == 'DriverView') &&
       from.name !== to.name &&
       from.query['view'] === undefined &&
       !savedPosition
     )
-      return { el: `.app_main`, behavior: 'smooth', top: 0 };
+      return { el: `.app_main`, behavior: 'instant', top: -13 };
 
     if (savedPosition) return savedPosition;
   },

src/store/apiStore.ts

@@ -2,49 +2,49 @@ import { defineStore } from 'pinia';
 import { API } from '../typings/api';
 import { Status } from '../typings/common';
 import { StationJSONData } from './typings';
-import { HttpClient } from '../http';
+import axios, { AxiosInstance } from 'axios';
-
-let baseURL = 'https://stacjownik.spythere.eu';
-
-switch (import.meta.env.VITE_API_MODE) {
-  case 'development':
-    baseURL = 'http://localhost:3001';
-    break;
-  case 'mocking':
-    baseURL = 'http://localhost:3123';
-    break;
-  default:
-    break;
-}
 
 export const useApiStore = defineStore('apiStore', {
   state: () => ({
     dataStatuses: {
-      allData: Status.Data.Loading,
       connection: Status.Data.Loading,
       sceneries: Status.Data.Loading,
-      vehicles: Status.Data.Loading,
+      vehicles: Status.Data.Loading
-      dailyStatsData: Status.Data.Loading
     },
 
     activeData: undefined as API.ActiveData.Response | undefined,
-    vehiclesData: undefined as API.VehiclesData.Response | undefined,
+    vehiclesData: undefined as API.Vehicles.Response | undefined,
 
     donatorsData: [] as API.Donators.Response,
     sceneryData: [] as StationJSONData[],
 
-    dailyStatsData: null as API.DailyStats.Response | null,
-
     nextUpdateTime: 0,
     nextDataCheckTime: 0,
 
-    client: new HttpClient(baseURL),
+    client: undefined as AxiosInstance | undefined,
 
     activeDataScheduler: undefined as number | undefined
   }),
 
   actions: {
     async setupAPIData() {
+      let baseURL = 'https://stacjownik.spythere.eu';
+
+      switch (import.meta.env.VITE_API_MODE) {
+        case 'development':
+          baseURL = 'http://localhost:3001';
+          break;
+        case 'mocking':
+          baseURL = 'http://localhost:3123';
+          break;
+        default:
+          break;
+      }
+
+      this.client = axios.create({
+        baseURL
+      });
+
       this.connectToAPI();
     },
 
@@ -52,35 +52,32 @@ export const useApiStore = defineStore('apiStore', {
       window.requestAnimationFrame(this.updateTick);
     },
 
-    async updateTick(t: number) {
+    updateTick(t: number) {
       // Static data refresh
       if (t >= this.nextDataCheckTime) {
-        await Promise.all([
+        this.fetchDonatorsData();
-          this.fetchStationsGeneralInfo(),
+        this.fetchVehiclesInfo();
-          this.fetchVehiclesInfo(),
+        this.fetchStationsGeneralInfo();
-          this.fetchDonatorsData()
-        ]);
 
         this.nextDataCheckTime = t + 3600000;
       }
 
       // Active data fefresh
       if (t >= this.nextUpdateTime) {
-        await this.fetchActiveData();
+        this.fetchActiveData();
-        this.nextUpdateTime = t + 31000;
+        this.nextUpdateTime = t + 20000;
       }
 
       window.requestAnimationFrame(this.updateTick);
     },
 
     async fetchActiveData() {
-      if (this.dataStatuses.connection == Status.Data.Offline) return;
       if (!this.activeData) this.dataStatuses.connection = Status.Data.Loading;
 
       try {
-        const response = await this.client.get<API.ActiveData.Response>('api/getActiveData');
+        const response = await this.client!.get<API.ActiveData.Response>('api/getActiveData');
 
-        this.activeData = response;
+        this.activeData = response.data;
         this.dataStatuses.connection = Status.Data.Loaded;
       } catch (error) {
         this.dataStatuses.connection = Status.Data.Error;
@@ -90,9 +87,9 @@ export const useApiStore = defineStore('apiStore', {
 
     async fetchDonatorsData() {
       try {
-        const response = await this.client.get<API.Donators.Response>('api/getDonators');
+        const response = await this.client!.get<API.Donators.Response>('api/getDonators');
 
-        this.donatorsData = response;
+        this.donatorsData = response.data;
       } catch (error) {
         console.error('Ups! Wystąpił błąd podczas pobierania informacji o donatorach:', error);
       }
@@ -100,7 +97,9 @@ export const useApiStore = defineStore('apiStore', {
 
     async fetchStationsGeneralInfo() {
       try {
-        const sceneryData = await this.client.get<StationJSONData[]>(`api/getSceneries`);
+        const sceneryData: StationJSONData[] = (
+          await this.client!.get<StationJSONData[]>(`api/getSceneries`)
+        ).data;
 
         this.dataStatuses.sceneries = Status.Data.Loaded;
         this.sceneryData = sceneryData;
@@ -112,27 +111,14 @@ export const useApiStore = defineStore('apiStore', {
 
     async fetchVehiclesInfo() {
       try {
-        const response = await this.client.get<API.VehiclesData.Response>('api/getVehiclesData');
+        const response = await this.client!.get<API.Vehicles.Response>('api/getVehicles');
 
-        this.vehiclesData = response;
+        this.vehiclesData = response.data;
-        this.dataStatuses.vehicles = response ? Status.Data.Loaded : Status.Data.Warning;
+        this.dataStatuses.vehicles = response.data ? Status.Data.Loaded : Status.Data.Warning;
       } catch (error) {
         this.dataStatuses.vehicles = Status.Data.Error;
         console.error('Ups! Wystąpił błąd podczas pobierania informacji o pojazdach:', error);
       }
-    },
-
-    async fetchDailyStats() {
-      try {
-        const res = await this.client.get<API.DailyStats.Response>('api/getDailyStats');
-
-        this.dailyStatsData = res;
-
-        this.dataStatuses.dailyStatsData = Status.Data.Loaded;
-      } catch (error) {
-        console.error('Ups! Wystąpił błąd podczas pobierania statystyk rozkładów jazdy...');
-        this.dataStatuses.dailyStatsData = Status.Data.Error;
-      }
     }
   }
 });

src/store/mainStore.ts

@@ -26,10 +26,19 @@ export const useMainStore = defineStore('mainStore', {
       isOffline: false,
       appUpdate: null,
 
+      dispatcherStatsName: '',
+      dispatcherStatsStatus: Status.Data.Initialized,
+
+      driverStatsName: '',
+      driverStatsData: undefined,
+      driverStatsStatus: Status.Data.Initialized,
+
       chosenModalTrainId: undefined,
 
       modalLastClickedTarget: null,
-      currentLocale: 'pl'
+      currentLocale: 'pl',
+
+      isMigrateInfoCardOpen: false
     }) as MainStoreState,
 
   actions: {
@@ -77,7 +86,6 @@ export const useMainStore = defineStore('mainStore', {
             online: Boolean(train.online),
             driverId: train.driverId,
             driverName: train.driverName,
-            driverLanguageId: train.driverLanguageId,
             currentStationName: train.currentStationName,
             currentStationHash: train.currentStationHash,
             connectedTrack: train.connectedTrack,
@@ -249,7 +257,6 @@ export const useMainStore = defineStore('mainStore', {
             dispatcherIsSupporter: false,
             dispatcherStatus: Status.ActiveDispatcher.FREE,
             dispatcherTimestamp: -1,
-            dispatcherLanguageId: -1,
 
             isOnline: false,
 
@@ -296,7 +303,6 @@ export const useMainStore = defineStore('mainStore', {
           dispatcherIsSupporter: scenery.dispatcherIsSupporter,
           dispatcherStatus: scenery.dispatcherStatus,
           dispatcherTimestamp: dispatcherTimestamp,
-          dispatcherLanguageId: scenery.dispatcherLanguageId,
 
           isOnline: scenery.isOnline == 1,
 
@@ -391,13 +397,11 @@ export const useMainStore = defineStore('mainStore', {
 
             const tracksKey = route.routeTracks == 2 ? 'double' : 'single';
             const isElectric = route.isElectric;
-
             const routesKey: keyof StationRoutes = `${tracksKey}${
               !isElectric ? 'Other' : 'Electrified'
-            }${route.isInternal ? 'Internal' : ''}Names`;
+            }Names`;
-            
-            acc[routesKey].push(route.routeName);
 
+            if (!route.isInternal) acc[routesKey].push(route.routeName);
             if (route.isRouteSBL) acc['sblNames'].push(route.routeName);
 
             acc.minRouteSpeed =
@@ -412,21 +416,14 @@ export const useMainStore = defineStore('mainStore', {
             return acc;
           },
           {
-            all: [],
             single: [],
-            double: [],
-
             singleElectrifiedNames: [],
             singleOtherNames: [],
+            double: [],
             doubleElectrifiedNames: [],
             doubleOtherNames: [],
-
-            singleElectrifiedInternalNames: [],
-            singleOtherInternalNames: [],
-            doubleElectrifiedInternalNames: [],
-            doubleOtherInternalNames: [],
-
             sblNames: [],
+            all: [],
             minRouteSpeed: 0,
             maxRouteSpeed: 0
           } as StationRoutes
@@ -434,6 +431,7 @@ export const useMainStore = defineStore('mainStore', {
 
         return {
           name: scenery.name,
+
           generalInfo: {
             ...scenery,
             authors: scenery.authors?.split(',').map((a) => a.trim()),
@@ -448,7 +446,7 @@ export const useMainStore = defineStore('mainStore', {
     },
 
     allStationInfo(): Station[] {
-      const onlineUnsavedStations: Station[] = this.activeSceneryList
+      const onlineUnsavedStations = this.activeSceneryList
         .filter(
           (scenery) =>
             this.stationList.findIndex((st) => st.name == scenery.name) == -1 &&

src/store/typings.ts

@@ -5,9 +5,15 @@ export interface MainStoreState {
   region: { id: string; value: string; name: string };
   isOffline: boolean;
   appUpdate: { version: string; changelog: string; releaseURL: string } | null;
+  dispatcherStatsName: string;
+  dispatcherStatsData?: API.DispatcherStats.Response;
+  driverStatsName: string;
+  driverStatsData?: API.DriverStats.Response;
+  driverStatsStatus: Status.Data;
   chosenModalTrainId?: string;
   modalLastClickedTarget: EventTarget | null;
   currentLocale: string;
+  isMigrateInfoCardOpen: boolean;
 }
 
 export interface StationJSONData {

src/styles/_animations.scss

@@ -1,4 +1,4 @@
-$animDuration: 120ms;
+$animDuration: 95ms;
 $animType: ease-in-out;
 
 // List animation

src/styles/_badge.scss

@@ -135,20 +135,3 @@
     color: black;
   }
 }
-
-.timetable-status-badge {
-  padding: 0.05em 0.35em;
-  color: black;
-
-  &.terminated {
-    background-color: salmon;
-  }
-
-  &.fulfilled {
-    background-color: lightgreen;
-  }
-
-  &.active {
-    background-color: lightblue;
-  }
-}

src/styles/_dropdown-filters.scss

@@ -85,7 +85,7 @@ h1.option-title {
   }
 }
 
-@include responsive.smallScreen {
+@include responsive.smallScreen{
   h1 {
     text-align: center;
 

src/styles/_dropdown.scss

@@ -26,7 +26,7 @@
 .dropdown_wrapper {
   position: absolute;
   left: 0;
-  top: 0;
+  top: calc(100% + 0.5em);
 
   background-color: var(--clr-bg3);
   box-shadow: 0 0 5px 1px var(--clr-primary);
@@ -34,8 +34,16 @@
   width: 100%;
   max-width: 550px;
 
+  max-height: 750px;
   overflow: auto;
 
   padding: 1em;
   z-index: 100;
 }
+
+@include responsive.smallScreen {
+  .dropdown_wrapper {
+    font-size: 1.1em;
+    max-width: 100%;
+  }
+}

src/styles/_global.scss

@@ -9,9 +9,6 @@
   --clr-bg2: #1b1b1b;
   --clr-bg3: #1d1d1d;
   --clr-view-bg: #1a1a1a;
-  --clr-bg-light: #2b2b2b;
-
-  --clr-tile: #181818;
 
   --clr-accent: #1085b3;
   --clr-accent2: #ff3d5d;
@@ -26,8 +23,6 @@
 
   --clr-donator: #f7a4ff;
 
-  --clr-success: springgreen;
-
   --no-scroll-padding: 17px;
   --max-container-width: 1700px;
 
@@ -35,8 +30,9 @@
 }
 
 ::-webkit-scrollbar {
-  // width: var(--no-scroll-padding);
+  width: var(--no-scroll-padding);
-  // height: var(--no-scroll-padding);
+  height: var(--no-scroll-padding);
+  background-color: transparent;
 
   &-track {
     background-color: #333;
@@ -53,7 +49,6 @@
 
 body {
   background: var(--clr-bg);
-  color-scheme: dark;
 
   margin: 0;
   padding: 0;
@@ -94,8 +89,7 @@ select {
   font-size: 1em;
 }
 
-input,
+input {
-select {
   background: none;
   color: white;
   font-size: 1em;
@@ -336,6 +330,19 @@ a.a-button {
 }
 
 @include responsive.smallScreen {
+  ::-webkit-scrollbar {
+    width: 0.5em;
+    height: 0.5em;
+
+    &-track {
+      background-color: #222;
+    }
+
+    &-thumb {
+      background-color: #777;
+    }
+  }
+
   [data-tooltip]:hover::after,
   [data-tooltip]:focus::after {
     transform: translate(-50%, 2em);
@@ -351,22 +358,3 @@ a.a-button {
   background-color: #aaa;
   margin: 0.5em 0;
 }
-
-.g-checkbox {
-  position: relative;
-  display: inline-block;
-
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  input {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-  }
-}

src/styles/_journal-section.scss

@@ -11,8 +11,8 @@
 
 .list_wrapper {
   overflow-y: auto;
-  height: calc(100vh - 21em);
+  height: calc(100vh - 12.5em);
-  min-height: 500px;
+  min-height: 700px;
   margin-top: 0.5em;
   position: relative;
 
@@ -24,8 +24,8 @@
   width: 100%;
 
   margin: 0 auto;
+
   padding: 1em 0;
-  position: relative;
 }
 
 .journal_refreshed-date {
@@ -57,6 +57,7 @@
   justify-content: space-between;
   align-items: center;
   gap: 0.5em;
+  position: relative;
 }
 
 .btn--load-data {
@@ -67,7 +68,7 @@
   font-size: 1.2em;
 }
 
-@include responsive.smallScreen {
+@include responsive.smallScreen{
   .journal_top-bar {
     justify-content: center;
     flex-wrap: wrap;

src/styles/_search-box.scss

@@ -15,6 +15,7 @@
     gap: 0.25em;
 
     min-width: 200px;
+    margin-right: 0.25em;
   }
 
   &-input {
@@ -61,3 +62,7 @@
   transform: translateY(-50%);
   padding-right: 0.5em;
 }
+
+select.search-input {
+
+}

src/typings/api.ts

@@ -1,5 +1,4 @@
-import { Journal } from '../components/JournalView/typings';
+import { Status, VehicleData } from './common';
-import { Status, Vehicle, VehicleGroup } from './common';
 
 export enum APIDataStatus {
   OK = 'OK',
@@ -28,29 +27,17 @@ export namespace API {
     }
   }
 
-  export namespace PlayerActivity {
-    export interface Data {
-      dispatcher: API.ActiveSceneries.Data[];
-      driver: API.ActiveTrains.Data | null;
-    }
-
-    export type Response = Data;
-  }
-
   export namespace DispatcherHistory {
     export type Response = Data[];
 
     export interface Data {
       id: number;
-      createdAt: string;
-      updatedAt: string;
       currentDuration: number;
       dispatcherId: number;
       dispatcherName: string;
       dispatcherLevel: number | null;
       dispatcherRate: number;
       dispatcherIsSupporter: boolean;
-      dispatcherLanguageId: number | null;
       dispatcherStatus?: number;
       isOnline: boolean;
       lastOnlineTimestamp: number;
@@ -64,64 +51,61 @@ export namespace API {
   }
 
   export namespace DispatcherStats {
-    export interface Services {
+    export interface DistanceStat {
-      count: number;
+      routeDistance: number | null;
-      durationMax: number;
-      durationAvg: number;
     }
 
-    export interface IssuedTimetables {
+    export interface DurationStat {
-      count: number;
+      currentDuration: number | null;
-      distanceMax: number;
-      distanceAvg: number;
-      distanceSum: number;
     }
 
-    export interface Data {
+    export interface Count {
-      dispatcherId: number | null;
+      _all: number;
-      dispatcherName: string | null;
-      dispatcherLevel: number | null;
-      services: Services | null;
-      issuedTimetables: IssuedTimetables | null;
     }
 
-    export type Response = Data;
+    export interface Response {
+      services: {
+        count: number;
+        durationMax: number;
+        durationAvg: number;
+      } | null;
+
+      issuedTimetables: {
+        count: number;
+        distanceMax: number;
+        distanceAvg: number;
+        distanceSum: number;
+      } | null;
+    }
   }
 
   export namespace DriverStats {
-    export interface Data {
+    export interface SumStats {
-      driverName: string | null;
+      routeDistance: number;
-      driverId: number | null;
+      confirmedStopsCount: number;
-      driverLevel: number | null;
+      allStopsCount: number;
-      countAll: number;
+      currentDistance: number;
-      countTerminated: number;
-      countFulfilled: number;
-      routeDistanceTotal: number | null;
-      routeDistanceAvg: number | null;
-      routeDistanceMax: number | null;
-      currentDistanceTotal: number | null;
-      confirmedStopsTotal: number | null;
-      allStopsTotal: number | null;
     }
 
-    export type Response = Data;
+    export interface CountStats {
-  }
+      fulfilled: number;
-
+      terminated: number;
-  export namespace PlayerInfo {
+      _all: number;
-    export interface Data {
-      currentActivity: PlayerActivity.Data;
-      dispatcherStats: DispatcherStats.Data;
-      dispatcherStatsLastMonth: DispatcherStats.Data;
-      driverStats: DriverStats.Data;
-      driverStatsLastMonth: DriverStats.Data;
     }
-  }
 
-  export namespace PlayerJournal {
+    export interface MaxStats {
-    export interface Data {
+      routeDistance: number;
-      timetables: TimetableHistory.DataShort[];
+    }
-      issuedTimetables: TimetableHistory.DataShort[];
+
-      duties: DispatcherHistory.Data[];
+    export interface AvdStats {
+      routeDistance: number;
+    }
+
+    export interface Response {
+      _sum: SumStats;
+      _count: CountStats;
+      _max: MaxStats;
+      _avg: AvdStats;
     }
   }
 
@@ -130,7 +114,6 @@ export namespace API {
       dispatcherId: number;
       dispatcherName: string;
       dispatcherIsSupporter: boolean;
-      dispatcherLanguageId: number;
       stationName: string;
       stationHash: string;
       region: string;
@@ -169,7 +152,6 @@ export namespace API {
       driverId: number;
       driverIsSupporter: boolean;
       driverLevel?: number;
-      driverLanguageId: number;
 
       currentStationName: string;
       currentStationHash?: string;
@@ -226,60 +208,24 @@ export namespace API {
   }
 
   export namespace TimetableHistory {
-    export interface QueryParams {
+    export interface Data {
-      driverName?: string;
-      trainNo?: string;
-      timetableId?: string;
-      categoryCode?: string;
-
-      authorName?: string;
-
-      dateFrom?: string;
-      dateTo?: string;
-
-      issuedFrom?: string;
-      terminatingAt?: string;
-      via?: string;
-      includesScenery?: string;
-
-      countFrom?: number;
-      countLimit?: number;
-
-      fulfilled?: number;
-      terminated?: number;
-
-      twr?: number;
-      skr?: number;
-      pn?: number;
-      tn?: number;
-
-      headUnitName?: string;
-      headUnitType?: string;
-
-      returnType?: 'all' | 'short' | 'detailed';
-      sortBy?: Journal.TimetableSorter['id'];
-    }
-
-    export interface Data extends DataShort, DataDetailsOnly {
-      updatedAt: string;
-    }
-
-    export interface DataShort {
       id: number;
       createdAt: string;
+      updatedAt: string;
+
+      timetableId: number;
       trainNo: number;
       trainCategoryCode: string;
-      timetableId: number;
 
       driverId: number;
       driverName: string;
       driverLevel: number | null;
       driverIsSupporter: boolean;
-      driverLanguageId: number | null;
 
       route: string;
       twr: number;
       skr: number;
+      sceneriesString: string;
       currentLocation: string[];
 
       routeDistance: number;
@@ -290,6 +236,7 @@ export namespace API {
 
       beginDate: string;
       endDate: string;
+
       scheduledBeginDate: string;
       scheduledEndDate: string;
 
@@ -299,25 +246,15 @@ export namespace API {
       authorName?: string;
       authorId?: number;
 
-      currentSceneryName?: string;
-      currentSceneryHash?: string;
-      hasDangerousCargo: boolean;
-      hasExtraDeliveries: boolean;
-    }
-
-    export interface DataDetailsOnly {
-      id: number;
-      timetableId: number;
-
-      sceneriesString: string;
       stockString?: string;
       stockHistory: string[];
 
       stockMass?: number;
       stockLength?: number;
       maxSpeed?: number;
-      trainMaxSpeed?: number;
 
+      currentSceneryName?: string;
+      currentSceneryHash?: string;
       routeSceneries: string;
       checkpointArrivals: string[];
       checkpointDepartures: string[];
@@ -327,20 +264,14 @@ export namespace API {
       checkpointComments: string[];
       visitedSceneries: string[];
       sceneryNames: string[];
-
       path: string;
       warningNotes: string | null;
-
+      hasDangerousCargo: boolean;
-      authorId?: number;
+      hasExtraDeliveries: boolean;
-      authorName?: string;
+      trainMaxSpeed?: number;
-      driverId: number;
-      driverName: string;
-      driverLanguageId: number | null;
     }
 
     export type Response = Data[];
-    export type ResponseShort = DataShort[];
-    export type ResponseDetailsOnly = DataDetailsOnly[];
   }
 
   export namespace DailyStats {
@@ -398,51 +329,8 @@ export namespace API {
     export type Response = string[];
   }
 
-  export namespace VehiclesData {
+  export namespace Vehicles {
-    export interface VehicleObject {
+    export type Response = VehicleData[];
-      id: number;
-      name: string;
-      type: string;
-      cabinName: string | null;
-      restrictions: Record<string, any> | null;
-      vehicleGroupsId: number;
-    }
-
-    export interface VehicleGroupObject {
-      id: number;
-      name: string;
-      speed: number;
-      speedLoaded?: number;
-      speedLoco?: number;
-      length: number;
-      weight: number;
-      cargoTypes: VehicleCargo[] | null;
-
-      locoProps: {
-        coldStart: boolean;
-        doubleManned: boolean;
-      } | null;
-
-      massSpeeds: VehicleGroupMassSpeeds | null;
-    }
-
-    export interface VehicleGroupMassSpeeds {
-      passenger: Record<string, number> | null;
-      cargo: Record<string, number> | null;
-      none: number | null;
-    }
-
-    export interface VehicleCargo {
-      id: string;
-      weight: number;
-    }
-
-    export interface Data {
-      vehicles: VehicleObject[];
-      vehicleGroups: VehicleGroupObject[];
-    }
-
-    export type Response = Data;
   }
 }
 
@@ -492,62 +380,6 @@ export namespace GithubAPI {
   }
 }
 
-export namespace Td2API {
-  export namespace UsersInfoByName {
-    export interface UserStat {
-      variable: string;
-      value: number;
-      position: number;
-      server_total: number;
-      server_max: number;
-      server_min: number;
-      server_avg: number;
-    }
-
-    export interface Levels {
-      driver: number;
-      dispatcher: number;
-    }
-
-    export interface UserGroup {
-      id_group: number;
-      group_name: string;
-      description: string;
-      online_color: string;
-      min_posts: number;
-      max_messages: number;
-      stars: string;
-      group_type: number;
-      hidden: number;
-      id_parent: number;
-    }
-
-    export interface UserInfo {
-      id_member: number;
-      id_group: number;
-      additional_groups: string;
-      member_name: string;
-      karma_bad: number;
-      karma_good: number;
-      date_registered: number;
-      last_login: number;
-      avatar: number;
-      lngfile: string;
-      user_stats: UserStat[];
-      levels: Levels;
-      user_groups: UserGroup[];
-    }
-
-    export type Message = UserInfo[];
-
-    export interface Response {
-      success: boolean;
-      respCode: number;
-      message: Message;
-    }
-  }
-}
-
 export namespace Websocket {
   export interface Payload {
     activeSceneries: API.ActiveSceneries.Response;

src/typings/common.ts

@@ -1,6 +1,5 @@
 import { RouteLocationRaw } from 'vue-router';
 import { StationJSONData } from '../store/typings';
-import { API } from './api';
 
 export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
 export type ScenerySpawnType = 'passenger' | 'freight' | 'loco' | 'all';
@@ -60,7 +59,6 @@ export interface Train {
   distance: number;
   connectedTrack: string;
   driverId: number;
-  driverLanguageId: number;
   trainNo: number;
   driverName: string;
   driverLevel: number;
@@ -97,7 +95,9 @@ export interface TrainTimetableData {
 
 export interface Station {
   name: string;
+
   generalInfo?: StationGeneralInfo;
+
   onlineInfo?: ActiveScenery;
 }
 
@@ -107,7 +107,7 @@ export interface StationGeneralInfo {
   abbr: string;
   hash?: string;
   reqLevel: number;
-  lines?: string;
+  lines: string;
   project: string;
   projectUrl?: string;
   signalType: string;
@@ -130,12 +130,6 @@ export interface StationRoutes {
   singleOtherNames: string[];
   doubleElectrifiedNames: string[];
   doubleOtherNames: string[];
-
-  singleElectrifiedInternalNames: string[];
-  singleOtherInternalNames: string[];
-  doubleElectrifiedInternalNames: string[];
-  doubleOtherInternalNames: string[];
-
   sblNames: string[];
 
   minRouteSpeed: number;
@@ -169,7 +163,6 @@ export interface ActiveScenery {
   dispatcherIsSupporter: boolean;
   dispatcherStatus: Status.ActiveDispatcher | number;
   dispatcherTimestamp: number | null;
-  dispatcherLanguageId: number;
   isOnline: boolean;
   stationTrains: Train[];
   scheduledTrains: CheckpointTrain[];
@@ -223,10 +216,46 @@ export interface CheckpointTrain {
 }
 
 // Vehicles Data
-export type Vehicle = API.VehiclesData.VehicleObject;
-export type VehicleGroup = API.VehiclesData.VehicleGroupObject;
 
-// Train Tooltip Info
+export interface VehicleData {
+  id: number;
+  name: string;
+  type: string;
+  cabinName: string | null;
+  restrictions: Record<string, any> | null;
+  vehicleGroupsId: number;
+  group: VehiclesGroup;
+}
+
+export interface VehiclesGroup {
+  id: number;
+  name: string;
+  speed: number;
+  speedLoaded?: number;
+  speedLoco?: number;
+  length: number;
+  weight: number;
+  cargoTypes: VehicleCargo[] | null;
+
+  locoProps: {
+    coldStart: boolean;
+    doubleManned: boolean;
+  } | null;
+
+  massSpeeds: VehicleGroupMassSpeeds | null;
+}
+
+export interface VehicleGroupMassSpeeds {
+  passenger: Record<string, number> | null;
+  cargo: Record<string, number> | null;
+  none: number | null;
+}
+
+export interface VehicleCargo {
+  id: string;
+  weight: number;
+}
+
 export interface TooltipUserTrain {
   driverName: string;
   trainNo: number;

src/utils/calcUtils.ts

@@ -1,5 +0,0 @@
-export function getCountPercentage(partCount: number, allCount: number, fixedDigits: number) {
-  if (allCount == 0) return 0;
-
-  return ((partCount / allCount) * 100).toFixed(fixedDigits);
-}