chore(app): added the Creator badge

v1.32.1

.github/workflows/vps-deploy.yml

@@ -0,0 +1,23 @@
+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,13 +15,12 @@ pnpm-debug.log*
 
 # Editor directories and files
 .idea
-.vscode
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
-node_modules
+.vscode/settings.json
 
 *.log
 

.prettierrc.json

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

.vscode/extensions.json

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

README.md

@@ -1,4 +1,4 @@
-# [STACJOWNIK TD2](https://stacjownik-td2.web.app)
+# [STACJOWNIK TD2](https://stacjownik-td2.spythere.eu)
 
 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/getVehicles', (_, res) => {
-  res.sendFile(path.join(cwd(), 'endpoints', 'getVehicles.json'));
+app.get('/api/getVehiclesData', (_, res) => {
+  res.sendFile(path.join(cwd(), 'endpoints', 'getVehiclesData.json'));
 });
 
 app.get('/api/getDonators', (_, res) => {

env.d.ts

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

index.html

@@ -20,26 +20,88 @@
     <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" />
-    <link rel="stylesheet" href="fa/css/regular.css" />
-    <link rel="stylesheet" href="fa/css/solid.css" />
+    <link rel="stylesheet" href="/fa/css/fontawesome.css" />
+    <link rel="stylesheet" href="/fa/css/brands.css" />
+    <link rel="stylesheet" href="/fa/css/regular.css" />
+    <link rel="stylesheet" href="/fa/css/solid.css" />
+
+    <!-- Preloads -->
+    <link
+      rel="preload"
+      href="/fonts/Quicksand-Bold.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+
+    <link
+      rel="preload"
+      href="/fonts/Quicksand-Light.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+
+    <link
+      rel="preload"
+      href="/fonts/Quicksand-Medium.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+
+    <link
+      rel="preload"
+      href="/fonts/Quicksand-Regular.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+
+    <link
+      rel="preload"
+      href="/fonts/Quicksand-SemiBold.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+
+    <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-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-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.web.app/" />
+    <meta property="og:url" content="https://stacjownik-td2.spythere.eu/" />
     <meta property="og:type" content="website" />
     <meta property="og:title" content="Stacjownik" />
     <meta
       property="og:description"
       content="Pomocnik maszynisty i dyżurnego symulatora Train Driver 2"
     />
+
     <meta
       property="og:image"
       content="https://raw.githubusercontent.com/Spythere/api/main/thumbnails/stacjownik.jpg"
     />
+
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
     <meta property="og:site_name" content="Stacjownik" />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stacjownik",
-  "version": "1.30.1",
+  "version": "1.35.0",
   "private": true,
   "type": "module",
   "scripts": {
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "core-js": "^3.42.0",
-    "dotenv": "^16.5.0",
+    "dotenv": "^17.2.2",
     "pinia": "^3.0.2",
     "sass": "^1.87.0",
     "showdown": "^2.1.0",
@@ -26,17 +26,17 @@
     "vue-router": "^4.4.0"
   },
   "devDependencies": {
-    "@types/node": "^22.15.15",
+    "@tsconfig/node24": "^24.0.4",
+    "@types/node": "^24.12.0",
     "@types/showdown": "^2.0.6",
     "@vite-pwa/assets-generator": "^1.0.0",
-    "@vitejs/plugin-vue": "^5.1.0",
-    "@vue/tsconfig": "^0.7.0",
-    "axios": "^1.9.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.8.1",
     "prettier": "^3.3.3",
     "typescript": "^5.5.4",
-    "vite": "^6.3.5",
+    "vite": "^7.1.4",
     "vite-plugin-pwa": "^1.0.0",
-    "vue-tsc": "^2.0.28"
+    "vue-tsc": "^3.0.6"
   },
   "browserslist": [
     "> 1%",

public/images/flags/cz.svg

@@ -0,0 +1,5 @@
+<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

@@ -0,0 +1,5 @@
+<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/en.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-gb" viewBox="0 0 640 480">
+  <path fill="#012169" d="M0 0h640v480H0z"/>
+  <path fill="#FFF" d="m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0z"/>
+  <path fill="#C8102E" d="m424 281 216 159v40L369 281zm-184 20 6 35L54 480H0zM640 0v3L391 191l2-44L590 0zM0 0l239 176h-60L0 42z"/>
+  <path fill="#FFF" d="M241 0v480h160V0zM0 160v160h640V160z"/>
+  <path fill="#C8102E" d="M0 193v96h640v-96zM273 0v480h96V0z"/>
+</svg>

public/images/flags/it.svg

@@ -0,0 +1,7 @@
+<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/pl.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-pl" viewBox="0 0 640 480">
+  <g fill-rule="evenodd">
+    <path fill="#fff" d="M640 480H0V0h640z"/>
+    <path fill="#dc143c" d="M640 480H0V240h640z"/>
+  </g>
+</svg>

public/images/flags/ru.svg

@@ -0,0 +1,5 @@
+<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

@@ -0,0 +1,4 @@
+<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

@@ -0,0 +1,9 @@
+<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

@@ -0,0 +1,6 @@
+<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>

public/images/icon-alert-triangle.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" />
+  <path d="M12 9v4" />
+  <path d="M12 17h.01" />
+</svg>

public/images/icon-loading.svg

@@ -0,0 +1,60 @@
+<svg width="79" height="127" viewBox="0 0 79 127" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon-loading">
+<g id="Rectangle 37">
+<rect id="Rectangle 38" x="36.9999" y="79" width="6" height="16" fill="#FF0000"/>
+<rect id="Rectangle 40" x="36.9999" y="111" width="6" height="16" fill="#FF0000"/>
+<rect id="Rectangle 39" x="36.9999" y="95" width="6" height="16" fill="white"/>
+</g>
+<g id="Group 8">
+<path id="Vector 15" d="M59.5018 41.0003H23.0018C-1.49817 41.0003 -0.498171 79.5003 23.0018 79.5003H59.5018C83.0018 79.5003 84.0018 41.0003 59.5018 41.0003Z" fill="#3F3E3E"/>
+<g id="Group 51">
+<circle id="light-left" cx="22.9999" cy="60" r="9" fill="#FF1313" fill-opacity="1"/>
+
+<animate
+    attributeType="XML"
+    attributeName="opacity"
+    values="0.25;1;1;0.25;0.25"
+    dur="1s"
+    repeatCount="indefinite"
+/>
+</g>
+
+<g id="Group 51">
+<circle id="light-right" cx="57.9999" cy="60" r="9" fill="#FF1313" fill-opacity="1"/>
+
+<animate
+    attributeType="XML"
+    attributeName="opacity"
+    values="1;0.25;0.25;1;1"
+    dur="1s"
+    repeatCount="indefinite"
+/>
+</g>
+
+
+</g>
+<g id="Group 52">
+<rect id="Rectangle 36" x="37.9999" y="10" width="4" height="31" fill="#525252"/>
+<g id="Vector 23">
+<path id="Rectangle 28" d="M4.09756 32.3241L10.9579 29.2933L14.1908 36.611L7.33047 39.6418L3.42724 36.9932L4.09756 32.3241Z" fill="#FF0000"/>
+<path id="Rectangle 30" d="M10.9579 29.2933L20.105 25.2522L23.3379 32.5698L14.1908 36.611L12.5743 32.9521L10.9579 29.2933Z" fill="white"/>
+<path id="Rectangle 34" d="M20.105 25.2522L29.2521 21.211L32.485 28.5287L23.3379 32.5698L21.7214 28.911L20.105 25.2522Z" fill="#FF0000"/>
+<path id="Rectangle 35" d="M47.5463 13.1288L56.6934 9.08762L59.9263 16.4053L50.7792 20.4464L49.1627 16.7876L47.5463 13.1288Z" fill="#FF0000"/>
+<path id="Rectangle 31" d="M29.2521 21.211L38.3992 17.1699L41.6321 24.4876L32.485 28.5287L30.8685 24.8699L29.2521 21.211Z" fill="white"/>
+<path id="Rectangle 32" d="M38.3992 17.1699L47.5463 13.1288L50.7792 20.4464L41.6321 24.4876L40.0156 20.8287L38.3992 17.1699Z" fill="white"/>
+<path id="Rectangle 33" d="M56.6934 9.08762L65.8404 5.04649L69.0734 12.3642L59.9263 16.4053L58.3098 12.7465L56.6934 9.08762Z" fill="white"/>
+<path id="Rectangle 29" d="M73.1581 1.81359L65.8405 5.04649L69.0734 12.3642L76.391 9.13126L76.604 4.6642L73.1581 1.81359Z" fill="#FF0000"/>
+</g>
+<g id="Vector 24">
+<path id="Rectangle 28_2" d="M6.36567 3.47438L13.3598 6.18222L10.4714 13.6426L3.47731 10.9348L2.59012 6.30195L6.36567 3.47438Z" fill="#FF0000"/>
+<path id="Rectangle 30_2" d="M13.3597 6.18222L22.6852 9.79268L19.7969 17.2531L10.4714 13.6426L11.9156 9.91241L13.3597 6.18222Z" fill="white"/>
+<path id="Rectangle 34_2" d="M22.6853 9.79268L32.0108 13.4031L29.1224 20.8635L19.7969 17.2531L21.2411 13.5229L22.6853 9.79268Z" fill="#FF0000"/>
+<path id="Rectangle 35_2" d="M50.6617 20.6241L59.9872 24.2345L57.0989 31.6949L47.7734 28.0844L49.2176 24.3542L50.6617 20.6241Z" fill="#FF0000"/>
+<path id="Rectangle 31_2" d="M32.0107 13.4031L41.3362 17.0136L38.4479 24.474L29.1224 20.8635L30.5666 17.1333L32.0107 13.4031Z" fill="white"/>
+<path id="Rectangle 32_2" d="M41.3363 17.0136L50.6618 20.6241L47.7734 28.0844L38.4479 24.474L39.8921 20.7438L41.3363 17.0136Z" fill="white"/>
+<path id="Rectangle 33_2" d="M59.9872 24.2345L69.3127 27.845L66.4243 35.3054L57.0988 31.6949L58.543 27.9647L59.9872 24.2345Z" fill="white"/>
+<path id="Rectangle 29_2" d="M76.7731 30.7333L69.3127 27.845L66.4243 35.3054L73.8847 38.1937L77.194 35.1856L76.7731 30.7333Z" fill="#FF0000"/>
+</g>
+</g>
+</g>
+</svg>

public/images/icon-pl.svg

@@ -1,4 +0,0 @@
-<svg width="39" height="23" viewBox="0 0 39 23" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="39" height="23" fill="#FF0F0F"/>
-<rect width="39" height="11.5" fill="white"/>
-</svg>

src/App.vue

@@ -5,13 +5,15 @@
       @toggle-card="() => (isUpdateCardOpen = false)"
     />
 
+    <AppWelcomeCard :is-card-open="isWelcomeCardOpen" @toggle-card="closeWelcomeCard" />
+
     <Tooltip />
-    
-    <AppHeader :current-lang="currentLang" @change-lang="changeLang" />
+
+    <AppHeader />
 
     <main class="app_main">
       <router-view v-slot="{ Component }">
-        <keep-alive exclude="SceneryView">
+        <keep-alive>
           <component :is="Component" :key="$route.name" />
         </keep-alive>
       </router-view>
@@ -28,7 +30,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import axios from 'axios';
 
 import { version } from '../package.json';
 import { Status } from './typings/common';
@@ -44,8 +45,10 @@ 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: {
@@ -54,6 +57,7 @@ export default defineComponent({
     AppHeader,
     AppFooter,
     UpdateCard,
+    AppWelcomeCard,
     Tooltip
   },
 
@@ -64,9 +68,9 @@ export default defineComponent({
     tooltipStore: useTooltipStore(),
 
     isUpdateCardOpen: false,
+    isWelcomeCardOpen: false,
 
-    currentLang: 'pl',
-    isOnProductionHost: location.hostname == 'stacjownik-td2.web.app'
+    isOnProductionHost: /(stacjownik-td2)(\.web\.app|\.spythere\.eu)/.test(location.hostname)
   }),
 
   created() {
@@ -85,19 +89,39 @@ export default defineComponent({
       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);
 
-      try {
-        const releaseData = await (
-          await axios.get('https://api.github.com/repos/Spythere/stacjownik/releases/latest')
-        ).data;
+      if (isWelcomeCardSeen == false && storageVersion == '') {
+        setTimeout(() => {
+          this.isWelcomeCardOpen = true;
+        }, 1500);
+      }
 
-        if (!releaseData) return;
+      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,
@@ -109,7 +133,7 @@ export default defineComponent({
           (storageVersion != '' && storageVersion != version && this.isOnProductionHost) ||
           import.meta.env.VITE_UPDATE_TEST === 'test';
       } catch (error) {
-        console.error(`Wystąpił błąd podczas pobierania danych z API GitHuba: ${error}`);
+        console.error(error);
       }
 
       StorageManager.setStringValue(STORAGE_VERSION_KEY, version);
@@ -138,18 +162,11 @@ export default defineComponent({
       this.apiStore.connectToAPI();
     },
 
-    changeLang(lang: string) {
-      this.$i18n.locale = lang;
-      this.currentLang = lang;
-
-      StorageManager.setStringValue('lang', lang);
-    },
-
     loadLang() {
       const storageLang = StorageManager.getStringValue('lang');
 
       if (storageLang) {
-        this.changeLang(storageLang);
+        this.store.changeLocale(storageLang);
         return;
       }
 
@@ -157,10 +174,15 @@ export default defineComponent({
 
       const naviLanguage = window.navigator.language.toString();
 
-      if (naviLanguage.startsWith('en')) {
-        this.changeLang('en');
+      if (!naviLanguage.startsWith('pl')) {
+        this.store.changeLocale('en');
         return;
       }
+    },
+
+    closeWelcomeCard() {
+      this.isWelcomeCardOpen = false;
+      StorageManager.setBooleanValue(WELCOME_CARD_SEEN_KEY, true);
     }
   }
 });
@@ -168,6 +190,7 @@ export default defineComponent({
 
 <style lang="scss">
 @use './styles/animations';
+@use './styles/global';
 
 // APP
 #app {

src/components/App/AppFooter.vue

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

src/components/App/AppHeader.vue

@@ -1,18 +1,6 @@
 <template>
   <header class="app_header">
     <div class="header_container">
-      <div class="header_icons">
-        <span class="icons-top">
-          <img
-            src="/images/icon-pl.svg"
-            alt="icon-pl"
-            @click="changeLang('en')"
-            v-if="currentLang == 'pl'"
-          />
-          <img src="/images/icon-en.jpg" alt="icon-en" @click="changeLang('pl')" v-else />
-        </span>
-      </div>
-
       <div class="header_body">
         <StatusIndicator />
 
@@ -76,27 +64,12 @@ import RegionDropdown from '../Global/RegionDropdown.vue';
 export default defineComponent({
   components: { StatusIndicator, Clock, RegionDropdown },
 
-  emits: ['changeLang'],
-
-  props: {
-    currentLang: {
-      type: String,
-      required: true
-    }
-  },
-
   setup() {
     return {
       store: useMainStore()
     };
   },
 
-  methods: {
-    changeLang(lang: string) {
-      this.$emit('changeLang', lang);
-    }
-  },
-
   computed: {
     onlineTrainsCount() {
       return this.store.trainList.filter((train) => train.region == this.store.region.id).length;
@@ -111,7 +84,7 @@ export default defineComponent({
     isChristmas() {
       const date = new Date();
 
-      return date.getUTCMonth() == 11 && date.getUTCDate() >= 20 && date.getUTCDate() <= 31;
+      return date.getUTCMonth() == 11 && date.getUTCDate() >= 6 && date.getUTCDate() <= 31;
     }
   }
 });
@@ -141,7 +114,7 @@ export default defineComponent({
 
     border-radius: 0 0 1em 1em;
 
-    @include responsive.smallScreen{
+    @include responsive.smallScreen {
       position: relative;
       margin-top: 0.5em;
     }
@@ -180,20 +153,12 @@ export default defineComponent({
 
     padding: 0.5em;
 
-    @include responsive.smallScreen{
+    @include responsive.smallScreen {
       transform: translateX(85%);
     }
   }
 }
 
-// ICONS
-.icons-top {
-  img {
-    width: 2.5em;
-    cursor: pointer;
-  }
-}
-
 // COUNTER
 .info_counter {
   display: flex;

src/components/App/AppWelcomeCard.vue

@@ -0,0 +1,237 @@
+<template>
+  <Card :is-open="props.isCardOpen">
+    <div class="body-content">
+      <h1>{{ $t('welcome.title') }}</h1>
+
+      <div class="language-select">
+        <button :data-active="$i18n.locale == 'pl'" @click="store.changeLocale('pl')">
+          <FlagIcon :language-id="0" width="2.5em" />
+        </button>
+
+        <button :data-active="$i18n.locale == 'en'" @click="store.changeLocale('en')">
+          <FlagIcon :language-id="1" width="2.5em" />
+        </button>
+      </div>
+
+      <section class="app-description">
+        <i18n-t keypath="welcome.app-desc" tag="p">
+          <template v-slot:b1>
+            <b>{{ $t('welcome.app-desc-b1') }}</b>
+          </template>
+
+          <template v-slot:link>
+            <a href="https://td2.info.pl/" class="link" target="_blank">Train Driver 2</a>
+          </template>
+        </i18n-t>
+      </section>
+
+      <section class="tabs">
+        <div class="tab-description">
+          <h2 class="text--primary">{{ $t('welcome.sceneries-header') }}</h2>
+          <hr />
+          <i18n-t keypath="welcome.sceneries-desc" tag="p">
+            <template v-slot:b1>
+              <b>{{ $t('welcome.sceneries-desc-b1') }}</b>
+            </template>
+          </i18n-t>
+        </div>
+
+        <div class="tab-description">
+          <h2 class="text--primary">{{ $t('welcome.trains-header') }}</h2>
+          <hr />
+          <i18n-t keypath="welcome.trains-desc" tag="p">
+            <template v-slot:b1>
+              <b>{{ $t('welcome.trains-desc-b1') }}</b>
+            </template>
+          </i18n-t>
+        </div>
+
+        <div class="tab-description">
+          <h2 class="text--primary">{{ $t('welcome.journal-header') }}</h2>
+          <hr />
+          <i18n-t keypath="welcome.journal-desc" tag="p">
+            <template v-slot:b1>
+              <b>{{ $t('welcome.journal-desc-b1') }}</b>
+            </template>
+          </i18n-t>
+        </div>
+      </section>
+
+      <section class="other-apps">
+        <b class="text--primary">
+          {{ $t('welcome.other-apps') }}
+        </b>
+
+        <div class="apps-grid">
+          <a class="app-item" href="https://pojazdownik-td2.spythere.eu/" 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">
+            <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">
+            <img src="/images/icon-srjp.svg" alt="srjp app logo" />
+            <h3 class="text--primary">Rozkładownik</h3>
+            <p>{{ $t('welcome.srjp-desc') }}</p>
+          </a>
+        </div>
+      </section>
+
+      <section class="bottom-info">
+        <i18n-t keypath="welcome.donation-info" tag="div" class="donation-info">
+          <template v-slot:icon1>
+            <img src="/images/icon-diamond.svg" alt="diamond icon" width="25" />
+            <span class="text--donator">&nbsp;{{ $t('welcome.donation-info-icon1-text') }}</span>
+          </template>
+        </i18n-t>
+
+        <i18n-t keypath="welcome.discord-info" tag="div" class="discord-info">
+          <template v-slot:discord>
+            <a href="https://discord.gg/x2mpNN3svk" class="link" target="_blank">
+              <b class="text--discord">{{ $t('welcome.discord-info-link-text') }}</b>
+            </a>
+          </template>
+        </i18n-t>
+
+        <div class="bottom-text">
+          <i>{{ $t('welcome.bottom-text') }}</i>
+        </div>
+
+        <div class="bottom-actions">
+          <button class="btn btn--action" @click="toggleCard(false)">
+            {{ $t('welcome.button-confirm') }}
+          </button>
+        </div>
+      </section>
+    </div>
+  </Card>
+</template>
+
+<script setup lang="ts">
+import Card from '../Global/Card.vue';
+import { useMainStore } from '../../store/mainStore';
+import FlagIcon from '../Global/FlagIcon.vue';
+
+const store = useMainStore();
+
+const emit = defineEmits(['toggleCard']);
+const props = defineProps({
+  isCardOpen: Boolean
+});
+
+function toggleCard(state: boolean) {
+  emit('toggleCard', state);
+}
+</script>
+
+<style lang="scss" scoped>
+.body-content {
+  max-width: 800px;
+  min-height: 900px;
+  padding: 1em 0.5em;
+
+  text-align: center;
+  font-size: 1.1em;
+}
+
+hr {
+  margin-bottom: 0.5em;
+}
+
+a.link {
+  text-decoration: underline;
+
+  img {
+    vertical-align: middle;
+    margin-right: 0.2em;
+  }
+}
+
+.language-select {
+  display: flex;
+  justify-content: center;
+  margin: 0.5em 0;
+
+  button[data-active='false'] ::v-deep(img) {
+    opacity: 0.5;
+  }
+}
+
+.app-description {
+  margin: 1em 0;
+}
+
+.tab-description {
+  margin-top: 0.5em;
+}
+
+.other-apps {
+  font-weight: bold;
+  margin: 1em 0;
+  font-size: 1.1em;
+}
+
+.apps-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1em;
+  padding: 1em;
+}
+
+.apps-grid > a.app-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5em;
+  padding: 1em;
+  background-color: #2b2b2b;
+  transition: background-color 100ms ease-in-out;
+  border-radius: 0.5em;
+
+  &:hover {
+    background-color: #3b3b3b;
+  }
+
+  img {
+    width: 2.5em;
+  }
+}
+
+.donation-info {
+  font-weight: bold;
+  font-size: 1.1em;
+
+  img {
+    vertical-align: middle;
+  }
+}
+
+.discord-info {
+  margin-top: 1em;
+  font-weight: bold;
+
+  img {
+    vertical-align: middle;
+  }
+}
+
+.bottom-text {
+  margin: 1em 0;
+  font-weight: bold;
+  font-size: 1.2em;
+}
+
+.bottom-actions {
+  display: flex;
+  justify-content: center;
+  margin-top: 1em;
+
+  font-size: 1.25em;
+}
+</style>

src/components/App/UpdateCard.vue

@@ -1,7 +1,9 @@
 <template>
   <Card :is-open="isUpdateCardOpen" @toggle-card="toggleCard(false)">
-    <div class="content">
-      <h1 style="margin-bottom: 0.5em">🚀 {{ $t('update.title') }}</h1>
+    <div class="content" tabindex="0" ref="content">
+      <h1 class="content-title">
+        <i class="fa-solid fa-wand-sparkles"></i> {{ $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,7 +15,14 @@
       <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>
@@ -51,7 +60,7 @@ export default defineComponent({
   watch: {
     isUpdateCardOpen(val: boolean) {
       this.$nextTick(() => {
-        if (val) (this.$refs['confirm-btn'] as HTMLElement).focus();
+        if (val) (this.$refs['content'] as HTMLElement).focus();
       });
     }
   },
@@ -79,14 +88,28 @@ export default defineComponent({
 }
 
 ::v-deep(h2) {
-  padding: 0.25em 0;
-  border-bottom: 1px solid #aaa;
+  padding: 0.5em 0;
+
+  &::after {
+    content: '';
+    display: block;
+    height: 2px;
+    width: 100%;
+    background-color: #aaa;
+    margin-top: 0.25em;
+  }
+}
+
+::v-deep(h3) {
+  padding-bottom: 0.25em;
 }
 
 ::v-deep(ul) {
-  list-style: initial;
-  padding: 1em;
+  list-style: disc;
   line-height: 1.5em;
+  padding: 0 1.5em;
+
+  padding-bottom: 0.5em;
 }
 
 .content {
@@ -100,12 +123,25 @@ 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 auto;
+  margin: 0.5em auto;
   padding: 0.5em 0.75em;
   font-size: 1.1em;
 }
@@ -117,5 +153,6 @@ p.bottom-info {
 
 a {
   text-decoration: underline;
+  color: white;
 }
 </style>

src/components/DriverView/DriverPropositions.vue

@@ -0,0 +1,325 @@
+<template>
+  <div class="driver-propositions">
+    <h3>{{ t('trains.number-propositions-header') }}</h3>
+
+    <div class="categories-select">
+      <button
+        v-for="(category, i) in availableCategories"
+        class="btn btn--option btn--action"
+        @click="selectCategory(i)"
+        :class="{ checked: i == chosenCategoryIndex }"
+      >
+        {{ category }}
+      </button>
+    </div>
+
+    <div v-if="numberPropositions.length > 0" class="propositions-numbers">
+      <div v-if="chosenCategory">
+        <b>{{ chosenCategory }} </b> -
+        {{ t(`categories.${chosenCategory.slice(0, 2)}`) }}
+        ({{ t(`categories.${chosenCategory.slice(2)}`) }})
+      </div>
+
+      <div v-if="chosenCategoryRules">
+        <span v-if="chosenCategoryRules[0]"
+          >{{ t('trains.number-propositions-third-number') }}
+          <b class="text--primary">{{ chosenCategoryRules[0] }}</b> &bull;
+        </span>
+
+        <span
+          >{{
+            t('trains.number-propositions-last-nums', {
+              count: chosenCategoryRules[1].length
+            })
+          }}
+          <b class="text--primary">{{ chosenCategoryRules[1] }}</b> -
+          <b class="text--primary">{{ chosenCategoryRules[2] }}</b></span
+        >
+      </div>
+
+      <div style="margin-top: 0.5em">
+        <b>{{ t('trains.number-propositions-title') }}&nbsp;</b>
+        <i>{{ numberPropositions.join(', ') }}</i>
+      </div>
+    </div>
+
+    <div class="no-propositions" v-else>{{ t('trains.number-propositions-empty') }}</div>
+
+    <div class="cargo-warnings" v-if="getCargoWarnings.size > 0">
+      <hr />
+      <h3>{{ t('cargo-warnings.title') }}</h3>
+
+      <div class="warnings-container">
+        <div
+          v-for="warning in getCargoWarnings"
+          class="train-badge"
+          :class="`${warning.split('-')[0]}`"
+        >
+          {{ t('cargo-warnings.' + warning) }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, PropType, watch, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Train } from '../../typings/common';
+import rulesJSON from '../../data/trainNumberRules.json';
+import { useApiStore } from '../../store/apiStore';
+
+const { t } = useI18n();
+const apiStore = useApiStore();
+
+const props = defineProps({
+  chosenTrain: {
+    type: Object as PropType<Train>,
+    required: true
+  }
+});
+
+const emits = defineEmits(['selectCategory']);
+
+const chosenCategoryIndex = ref(0);
+
+const numberPropositions = ref<string[]>([]);
+const chosenCategoryRules = ref<any[]>([]);
+
+watch(
+  computed(() => props.chosenTrain.trainNo),
+  () => {
+    chosenCategoryIndex.value = 0;
+    generateNumberPropositions();
+  }
+);
+
+onMounted(() => {
+  generateNumberPropositions();
+});
+
+function generateNumberPropositions() {
+  const categoryCode = chosenCategory.value?.slice(0, 2);
+  const trainNoStr = props.chosenTrain.trainNo.toString();
+
+  // Get category rules
+  const rules = categoryCode
+    ? ((rulesJSON.categoriesRules as any)[categoryCode] as any[])
+    : undefined;
+
+  if (!categoryCode || !rules) {
+    numberPropositions.value.length = 0;
+    chosenCategoryRules.value.length = 0;
+
+    return;
+  }
+
+  const [thirdNumber, minRange, maxRange] = rules;
+
+  const propositionsArr: string[] = [];
+
+  for (let i = 0; i < 5; i++) {
+    let generatedNumStr = '';
+
+    generatedNumStr += trainNoStr[0] ?? Math.floor(Math.random() * 10);
+    generatedNumStr += trainNoStr[1] ?? Math.floor(Math.random() * 10);
+
+    // Third number
+    generatedNumStr += thirdNumber ?? '';
+
+    // Remaining numbers
+    const rangeNums = minRange?.length ?? 3;
+
+    const randRange = Math.floor(
+      Math.random() * (Number(maxRange) - Number(minRange)) + Number(minRange)
+    ).toString();
+
+    const leadingZeros = new Array(Math.abs(randRange.toString().length - rangeNums))
+      .fill('0')
+      .join('');
+
+    generatedNumStr += `${leadingZeros}${randRange}`;
+
+    const isNumberTaken =
+      apiStore.activeData?.trains?.some((t) => t.trainNo.toString() == generatedNumStr) ?? false;
+
+    if (!isNumberTaken) {
+      propositionsArr.push(generatedNumStr);
+    } else {
+      i--;
+    }
+
+    if (Number(randRange) > Number(maxRange)) break;
+  }
+
+  numberPropositions.value = propositionsArr;
+  chosenCategoryRules.value = rules;
+}
+
+const chosenCategory = computed(() => {
+  return availableCategories.value[chosenCategoryIndex.value];
+});
+
+const getCargoWarnings = computed(() => {
+  const stockList = props.chosenTrain.stockList;
+
+  let warnings: Set<string> = new Set();
+
+  stockList.forEach((stockVehicle) => {
+    const [vehicleName, vehicleCargo] = stockVehicle.split(':');
+
+    if (vehicleName.startsWith('WB117')) warnings.add(vehicleCargo ? 'twr-un1965' : 'tn-un1965');
+    else if (vehicleName.startsWith('445Rb'))
+      warnings.add(vehicleCargo ? 'tn-un1202' : 'tn-un1202-empty');
+    else if (vehicleName.startsWith('EDK80')) warnings.add('pn-edk80');
+
+    if (vehicleCargo) {
+      if (vehicleCargo.startsWith('wt_20')) warnings.add('pn-innofreight');
+      else if (/^(tank|vehicles_01|truck)/.test(vehicleCargo)) warnings.add('pn-military');
+    }
+  });
+
+  return warnings;
+});
+
+const availableCategories = computed(() => {
+  const stockList = props.chosenTrain.stockList;
+  const headVehicle = stockList[0]?.split('-')[0] ?? '';
+
+  let availableCategories: string[] = [];
+  let categoryTraction = 'E';
+
+  let vehicleTypesSet = new Set<string>();
+  let wagonsNamesSet = new Set<string>();
+  let cargoNamesSet = new Set<string>();
+
+  for (const stockName of stockList) {
+    const [vehicleName, ...cargoList] = stockName.split(':');
+
+    const vehicleData = apiStore.vehiclesData?.vehicles.find((v) => v.name == vehicleName);
+
+    if (!vehicleData) continue;
+
+    vehicleTypesSet.add(vehicleData.type);
+
+    if (vehicleData.type.startsWith('wagon-')) wagonsNamesSet.add(vehicleData.name.split('_')[0]);
+
+    if (cargoList !== undefined) cargoList.forEach((c) => cargoNamesSet.add(c.split('_')[0]));
+  }
+
+  let vehicleTypesArr = [...vehicleTypesSet];
+  let wagonsNamesArr = [...wagonsNamesSet];
+
+  // Traction
+  if (vehicleTypesArr[0] == 'loco-electric') categoryTraction = 'E';
+  else if (vehicleTypesArr[0] == 'loco-diesel') categoryTraction = 'S';
+  else if (vehicleTypesArr[0] == 'unit-electric') categoryTraction = 'J';
+  else categoryTraction = 'M';
+
+  // EMU / DMU - M*, R*, P*
+  if (vehicleTypesArr.length == 1 && (categoryTraction == 'J' || categoryTraction == 'M')) {
+    availableCategories.push('MO', 'MP', 'MM', 'RO', 'RP', 'RA', 'RM', 'PW');
+  }
+  // Only locos (up to 3) - LT, LP, LS
+  else if (stockList.length <= 3 && vehicleTypesArr.every((v) => v.startsWith('loco-'))) {
+    if (/^(EU|ET|201E|4E|SU|ST|M62|CTLR4C)/.test(headVehicle)) availableCategories.push('LT');
+    if (/^(EU|EP|SU|SP)/.test(headVehicle)) availableCategories.push('LP');
+    if (/^(SM)/.test(headVehicle)) availableCategories.push('LS');
+  }
+  // Only locos (more than 3) - TH
+  else if (stockList.length > 3 && vehicleTypesArr.every((v) => v.startsWith('loco-'))) {
+    availableCategories.push('TH');
+  }
+  // Loco(s) + passenger only wagons - M*, R*, E*, P*
+  else if (vehicleTypesArr.every((v) => v.startsWith('loco-') || v == 'wagon-passenger')) {
+    availableCategories.push('EI', 'EC', 'EN', 'MO', 'MP', 'MM', 'RO', 'RP', 'RA', 'RM', 'PW');
+  }
+  // Loco(s) + cargo only / mixed wagons - T*, Z*
+  else {
+    if (wagonsNamesArr.every((v) => /^(627Z|412Z)/.test(v)))
+      availableCategories.push('TC', 'TD', 'TS');
+    else if (stockList.slice(1).every((v) => /PKPE/.test(v))) {
+      availableCategories.push('ZU', 'ZN');
+    } else if (wagonsNamesArr.length < 3 || cargoNamesSet.size < 3) {
+      availableCategories.push('TM', 'TG', 'TS', 'TK');
+    } else {
+      availableCategories.push('TN', 'TR', 'TS', 'TK');
+    }
+  }
+
+  return availableCategories.map((c) => `${c}${categoryTraction}`);
+});
+
+function selectCategory(i: number) {
+  chosenCategoryIndex.value = i;
+  generateNumberPropositions();
+}
+</script>
+
+<style lang="scss" scoped>
+@use '../../styles/responsive';
+@use '../../styles/badge';
+
+.driver-propositions {
+  margin-bottom: 1em;
+  padding: 0.5em;
+  background-color: #111;
+}
+
+.categories-select {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  margin-top: 0.5em;
+
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: calc(-0.5em);
+    left: 0;
+
+    width: 100%;
+    height: 2px;
+    background-color: #aaa;
+  }
+}
+
+.propositions-numbers {
+  margin-top: 1em;
+}
+
+.no-propositions {
+  margin-top: 1em;
+  color: #ccc;
+}
+
+.cargo-warnings {
+  margin-top: 0.5em;
+
+  h3 {
+    margin: 0.5em 0;
+  }
+}
+
+.warnings-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+}
+
+@include responsive.smallScreen {
+  .driver-propositions {
+    text-align: center;
+  }
+
+  .categories-select {
+    justify-content: center;
+  }
+
+  .warnings-container {
+    justify-content: center;
+  }
+}
+</style>

src/components/DriverView/DriverTopActions.vue

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

src/components/DriverView/DriverTrainCard.vue

@@ -4,66 +4,21 @@
 
     <!-- Train action buttons -->
     <div class="train-stock-actions">
-      <button class="btn btn--action" style="margin: 1em 0" @click="copyStockToClipboard()">
+      <button class="btn btn--action" @click="copyStockToClipboard()">
         <i class="fa-regular fa-copy"></i> {{ i18n.t('trains.stock-copy') }}
       </button>
 
-      <button class="btn btn--action" style="margin: 1em 0" @click="toggleNumberPropositions()">
+      <button class="btn btn--action" @click="toggleNumberPropositions()">
         <i class="fa-regular fa-lightbulb"></i> {{ i18n.t('trains.number-propositions') }}
       </button>
     </div>
 
     <!-- Proposed numbers container -->
-    <transition name="view-anim" class="propositions-container">
-      <div v-if="arePropositionsVisible">
-        <h3 style="margin-bottom: 0.5em">{{ i18n.t('trains.number-propositions-header') }}</h3>
-
-        <div class="categories-select">
-          <button
-            v-for="(category, i) in availableCategories"
-            class="btn btn--option btn--action"
-            @click="selectCategory(i)"
-            :class="{ checked: i == chosenCategoryIndex }"
-          >
-            {{ category }}
-          </button>
-        </div>
-
-        <div v-if="numberPropositions.length > 0" class="propositions-numbers">
-          <div v-if="chosenCategory">
-            <b>{{ chosenCategory }} </b> -
-            {{ i18n.t(`categories.${chosenCategory.slice(0, 2)}`) }}
-            ({{ i18n.t(`categories.${chosenCategory.slice(2)}`) }})
-          </div>
-
-          <div v-if="chosenCategoryRules">
-            <span v-if="chosenCategoryRules[0]"
-              >{{ i18n.t('trains.number-propositions-third-number') }}
-              <b class="text--primary">{{ chosenCategoryRules[0] }}</b> &bull;
-            </span>
-
-            <span
-              >{{
-                i18n.t('trains.number-propositions-last-nums', {
-                  count: chosenCategoryRules[1].length
-                })
-              }}
-              <b class="text--primary">{{ chosenCategoryRules[1] }}</b> -
-              <b class="text--primary">{{ chosenCategoryRules[2] }}</b></span
-            >
-          </div>
-
-          <div style="margin-top: 0.5em">
-            <b>{{ i18n.t('trains.number-propositions-title') }}&nbsp;</b>
-            <i>{{ numberPropositions.join(', ') }}</i>
-          </div>
-        </div>
-
-        <div class="no-propositions" v-else>{{ i18n.t('trains.number-propositions-empty') }}</div>
-      </div>
+    <transition name="view-anim">
+      <DriverPropositions :chosenTrain="chosenTrain" v-if="arePropositionsVisible" />
     </transition>
 
-    <StockList :trainStockList="chosenTrain.stockList" />
+    <StockList :trainStockList="chosenTrain.stockList" :key="chosenTrain.id" :showPreviews="true" />
     <TrainSchedule :train="chosenTrain" />
   </div>
 </template>
@@ -72,25 +27,15 @@
 import { PropType, ref } from 'vue';
 import { Train } from '../../typings/common';
 import { useI18n } from 'vue-i18n';
-import { useApiStore } from '../../store/apiStore';
 
 import StockList from '../Global/StockList.vue';
 import TrainSchedule from '../TrainsView/TrainSchedule.vue';
 import TrainInfo from '../TrainsView/TrainInfo.vue';
-
-import rulesJSON from '../../data/trainNumberRules.json';
-import { computed } from 'vue';
-import { watch } from 'vue';
-
-const apiStore = useApiStore();
+import DriverPropositions from './DriverPropositions.vue';
 
 const i18n = useI18n();
 
 const arePropositionsVisible = ref(false);
-const chosenCategoryIndex = ref(0);
-
-const numberPropositions = ref<string[]>([]);
-const chosenCategoryRules = ref<any[]>([]);
 
 const props = defineProps({
   chosenTrain: {
@@ -119,153 +64,7 @@ function copyStockToClipboard() {
 
 function toggleNumberPropositions() {
   arePropositionsVisible.value = !arePropositionsVisible.value;
-
-  if (arePropositionsVisible.value) generateNumberPropositions();
 }
-
-function selectCategory(i: number) {
-  chosenCategoryIndex.value = i;
-
-  generateNumberPropositions();
-}
-
-function generateNumberPropositions() {
-  const categoryCode = chosenCategory.value?.slice(0, 2);
-  const trainNoStr = props.chosenTrain.trainNo.toString();
-
-  // Get category rules
-  const rules = categoryCode
-    ? ((rulesJSON.categoriesRules as any)[categoryCode] as any[])
-    : undefined;
-
-  if (!categoryCode || !rules) {
-    numberPropositions.value.length = 0;
-    chosenCategoryRules.value.length = 0;
-
-    return;
-  }
-
-  const [thirdNumber, minRange, maxRange] = rules;
-
-  const propositionsArr: string[] = [];
-
-  for (let i = 0; i < 5; i++) {
-    let generatedNumStr = '';
-
-    generatedNumStr += trainNoStr.at(0) ?? Math.floor(Math.random() * 10);
-    generatedNumStr += trainNoStr.at(1) ?? Math.floor(Math.random() * 10);
-
-    // Third number
-    generatedNumStr += thirdNumber ?? '';
-
-    // Remaining numbers
-    const rangeNums = minRange?.length ?? 3;
-
-    const randRange = Math.floor(
-      Math.random() * (Number(maxRange) - Number(minRange)) + Number(minRange)
-    ).toString();
-
-    const leadingZeros = new Array(Math.abs(randRange.toString().length - rangeNums))
-      .fill('0')
-      .join('');
-
-    generatedNumStr += `${leadingZeros}${randRange}`;
-
-    const isNumberTaken =
-      apiStore.activeData?.trains?.some((t) => t.trainNo.toString() == generatedNumStr) ?? false;
-
-    if (!isNumberTaken) {
-      propositionsArr.push(generatedNumStr);
-    } else {
-      i--;
-    }
-
-    if (Number(randRange) > Number(maxRange)) break;
-  }
-
-  numberPropositions.value = propositionsArr;
-  chosenCategoryRules.value = rules;
-}
-
-const chosenCategory = computed(() => {
-  return availableCategories.value.at(chosenCategoryIndex.value);
-});
-
-const availableCategories = computed(() => {
-  const stockList = props.chosenTrain.stockList;
-  const headVehicle = stockList.at(0)?.split('-')[0] ?? '';
-
-  let availableCategories: string[] = [];
-  let categoryTraction = 'E';
-
-  let vehicleTypesSet = new Set<string>();
-  let wagonsNamesSet = new Set<string>();
-  let cargoNamesSet = new Set<string>();
-
-  for (const stockName of stockList) {
-    const [vehicleName, ...cargoList] = stockName.split(':');
-
-    const vehicleData = apiStore.vehiclesData?.find((v) => v.name == vehicleName);
-
-    if (!vehicleData) continue;
-
-    vehicleTypesSet.add(vehicleData.type);
-
-    if (vehicleData.type.startsWith('wagon-')) wagonsNamesSet.add(vehicleData.name.split('_')[0]);
-
-    if (cargoList !== undefined) cargoList.forEach((c) => cargoNamesSet.add(c.split('_')[0]));
-  }
-
-  let vehicleTypesArr = [...vehicleTypesSet];
-  let wagonsNamesArr = [...wagonsNamesSet];
-
-  // Traction
-  if (vehicleTypesArr[0] == 'loco-electric') categoryTraction = 'E';
-  else if (vehicleTypesArr[0] == 'loco-diesel') categoryTraction = 'S';
-  else if (vehicleTypesArr[0] == 'unit-electric') categoryTraction = 'J';
-  else categoryTraction = 'M';
-
-  // EMU / DMU - M*, R*, P*
-  if (vehicleTypesArr.length == 1 && (categoryTraction == 'J' || categoryTraction == 'M')) {
-    availableCategories.push('MO', 'MP', 'MM', 'RO', 'RP', 'RA', 'RM', 'PW');
-  }
-  // Only locos (up to 3) - LT, LP, LS
-  else if (stockList.length <= 3 && vehicleTypesArr.every((v) => v.startsWith('loco-'))) {
-    if (/^(EU|ET|201E|4E|SU|ST|M62|CTLR4C)/.test(headVehicle)) availableCategories.push('LT');
-    if (/^(EU|EP|SU|SP)/.test(headVehicle)) availableCategories.push('LP');
-    if (/^(SM)/.test(headVehicle)) availableCategories.push('LS');
-  }
-  // Only locos (more than 3) - TH
-  else if (stockList.length > 3 && vehicleTypesArr.every((v) => v.startsWith('loco-'))) {
-    availableCategories.push('TH');
-  }
-  // Loco(s) + passenger only wagons - M*, R*, E*, P*
-  else if (vehicleTypesArr.every((v) => v.startsWith('loco-') || v == 'wagon-passenger')) {
-    availableCategories.push('EI', 'EC', 'EN', 'MO', 'MP', 'MM', 'RO', 'RP', 'RA', 'RM', 'PW');
-  }
-  // Loco(s) + cargo only / mixed wagons - T*, Z*
-  else {
-    if (wagonsNamesArr.every((v) => /^(627Z|412Z)/.test(v)))
-      availableCategories.push('TC', 'TD', 'TS');
-    else if (stockList.slice(1).every((v) => /PKPE/.test(v))) {
-      availableCategories.push('ZU', 'ZN');
-    } else if (wagonsNamesArr.length < 3 || cargoNamesSet.size < 3) {
-      availableCategories.push('TM', 'TG', 'TS', 'TK');
-    } else {
-      availableCategories.push('TN', 'TR', 'TS', 'TK');
-    }
-  }
-
-  return availableCategories.map((c) => `${c}${categoryTraction}`);
-});
-
-watch(
-  computed(() => `${props.chosenTrain.trainNo}`),
-  () => {
-    chosenCategoryIndex.value = 0;
-    generateNumberPropositions();
-  }
-);
 </script>
 
 <style lang="scss" scoped>
@@ -279,49 +78,13 @@ watch(
 
 .train-stock-actions {
   display: flex;
-  gap: 0.5em;
-}
-
-.propositions-container {
-  margin-bottom: 1em;
-  padding: 0.5em;
-  background-color: #111;
-}
-
-.categories-select {
-  display: inline-flex;
   flex-wrap: wrap;
   gap: 0.5em;
-
-  position: relative;
-
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: calc(-0.5em);
-    left: 0;
-
-    width: 100%;
-    height: 2px;
-    background-color: #aaa;
-  }
-}
-
-.propositions-numbers {
-  margin-top: 1em;
-}
-
-.no-propositions {
-  margin-top: 1em;
-  color: #ccc;
+  margin: 1em 0;
 }
 
 @include responsive.smallScreen {
-  .propositions-container {
-    text-align: center;
-  }
-
-  .categories-select {
+  .train-stock-actions {
     justify-content: center;
   }
 }

src/components/Global/ActionButton.vue

@@ -1,23 +0,0 @@
-<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/Card.vue

@@ -81,13 +81,8 @@ export default defineComponent({
 
   background-color: #1a1a1a;
   box-shadow: 0 0 15px 10px #0e0e0e;
+  border-radius: 1em;
 
   overflow: auto;
 }
-
-@include responsive.smallScreen{
-  .card {
-    align-items: flex-start;
-  }
-}
 </style>

src/components/Global/FlagIcon.vue

@@ -0,0 +1,43 @@
+<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: 100;
+  z-index: 150;
   width: 100%;
 
   font-size: 0.9em;

src/components/Global/StockList.vue

@@ -7,6 +7,8 @@
           :vehicle-string="vehicleString"
           :images="images"
           :image-fallbacks="imagesFallbacks"
+          :show-previews="showPreviews"
+          :thumbnail-size="thumbnailSize"
         />
       </li>
     </ul>
@@ -23,7 +25,9 @@ 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,9 +9,10 @@
       <img
         v-for="(thumbnailImage, imageIndex) in images"
         :src="`https://stacjownik.spythere.eu/static/thumbnails/${thumbnailImage}.png`"
-        height="60"
+        :height="thumbnailSize || 70"
         loading="lazy"
-        data-tooltip-type="VehiclePreviewTooltip"
+        :data-crosshair-cursor="showPreviews"
+        :data-tooltip-type="showPreviews ? 'VehiclePreviewTooltip' : ''"
         :data-tooltip-content="vehicleString"
         @error="onImageError($event, imageFallbacks[imageIndex])"
         @load="onImageLoad"
@@ -26,7 +27,9 @@ 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>;
@@ -56,16 +59,17 @@ function onImageLoad() {
   transition: opacity 100ms ease-in-out;
 
   &[data-load-status='loading'] {
-    min-height: 60px;
+    min-height: 70px;
     min-width: 200px;
   }
 }
 
 .stock-text {
+  max-width: 90%;
   text-align: center;
   color: #aaa;
-  font-size: 0.9em;
-  margin-bottom: 0.25em;
+  font-size: 0.8em;
+  margin: 0 auto;
   padding: 0.25em 0;
 }
 
@@ -73,8 +77,10 @@ function onImageLoad() {
   display: flex;
   justify-content: center;
   align-items: flex-end;
-  cursor: crosshair;
-
   padding: 0.5em 0;
+
+  &[data-crosshair-cursor='true'] {
+    cursor: crosshair;
+  }
 }
 </style>

src/components/JournalView/JournalDailyStats.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="daily-stats">
-    <span :data-active="statsStatus">
+    <span :data-active="apiStore.dataStatuses.dailyStatsData">
       <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="statsStatus == Status.Data.Loading">
+      <b v-if="apiStore.dataStatuses.dailyStatsData == Status.Data.Loading">
         {{ $t('app.loading') }}
       </b>
 
-      <b class="text--error" v-else-if="statsStatus == Status.Data.Error">
+      <b class="text--error" v-else-if="apiStore.dataStatuses.dailyStatsData == Status.Data.Error">
         {{ $t('journal.stats-error') }}
       </b>
 
@@ -20,42 +20,48 @@
         {{ $t('journal.daily-stats.info') }}
       </b>
 
-      <div v-else>
+      <div v-else-if="apiStore.dailyStatsData">
         <ul class="stats-list">
-          <li v-if="stats.totalTimetables">
+          <li v-if="apiStore.dailyStatsData.totalTimetables">
             <i18n-t keypath="journal.daily-stats.total">
               <template #count>
                 <b class="text--primary">
-                  {{ stats.totalTimetables }}
-                  {{ $t('journal.daily-stats.count', stats.totalTimetables) }}
+                  {{ apiStore.dailyStatsData.totalTimetables }}
+                  {{ $t('journal.daily-stats.count', apiStore.dailyStatsData.totalTimetables) }}
                 </b>
               </template>
 
               <template #distance>
-                <b class="text--primary"> {{ stats.distanceSum?.toFixed(2) }} km</b>
+                <b class="text--primary">
+                  {{ apiStore.dailyStatsData.distanceSum?.toFixed(2) }} km</b
+                >
               </template>
             </i18n-t>
           </li>
 
-          <li v-if="stats.maxTimetable">
+          <li v-if="apiStore.dailyStatsData.maxTimetable">
             <i18n-t keypath="journal.daily-stats.longest">
               <template #id>
-                <router-link :to="`/journal/timetables?search-train=%23${stats.maxTimetable.id}`">
-                  <b>{{ stats.maxTimetable.id }}</b>
+                <router-link
+                  :to="`/journal/timetables?search-train=%23${apiStore.dailyStatsData.maxTimetable.id}`"
+                >
+                  <b>{{ apiStore.dailyStatsData.maxTimetable.id }}</b>
                 </router-link>
               </template>
               <template #author>
                 <router-link
-                  :to="`/journal/timetables?search-dispatcher=${stats.maxTimetable.authorName}`"
+                  :to="`/journal/timetables?search-dispatcher=${apiStore.dailyStatsData.maxTimetable.authorName}`"
                 >
-                  <b>{{ stats.maxTimetable.authorName }}</b>
+                  <b>{{ apiStore.dailyStatsData.maxTimetable.authorName }}</b>
                 </router-link>
               </template>
               <template #driver>
-                <b class="text--primary">{{ stats.maxTimetable.driverName }}</b>
+                <b class="text--primary">{{ apiStore.dailyStatsData.maxTimetable.driverName }}</b>
               </template>
               <template #distance>
-                <b class="text--primary">{{ stats.maxTimetable.routeDistance }} km</b>
+                <b class="text--primary"
+                  >{{ apiStore.dailyStatsData.maxTimetable.routeDistance }} km</b
+                >
               </template>
             </i18n-t>
           </li>
@@ -101,35 +107,37 @@
             </i18n-t>
           </li>
 
-          <li v-if="stats.longestDuties.length > 0">
+          <li v-if="apiStore.dailyStatsData.longestDuties.length > 0">
             <i18n-t keypath="journal.daily-stats.longest-duties">
               <template #dispatcher>
                 <router-link
-                  :to="`/journal/dispatchers?search-dispatcher=${stats.longestDuties[0].name}`"
+                  :to="`/journal/dispatchers?search-dispatcher=${apiStore.dailyStatsData.longestDuties[0].name}`"
                 >
-                  <b>{{ stats.longestDuties[0].name }}</b>
+                  <b>{{ apiStore.dailyStatsData.longestDuties[0].name }}</b>
                 </router-link>
               </template>
 
-              <template #station>{{ stats.longestDuties[0].station }}</template>
+              <template #station>{{ apiStore.dailyStatsData.longestDuties[0].station }}</template>
 
               <template #duration>
-                {{ calculateDuration(stats.longestDuties[0].duration) }}
+                {{ humanizeDuration(apiStore.dailyStatsData.longestDuties[0].duration) }}
               </template>
             </i18n-t>
           </li>
 
-          <li v-if="stats.mostActiveDrivers.length > 0">
+          <li v-if="apiStore.dailyStatsData.mostActiveDrivers.length > 0">
             <i18n-t keypath="journal.daily-stats.most-active-driver">
               <template #driver>
                 <router-link
-                  :to="`/journal/timetables?search-driver=${stats.mostActiveDrivers[0].name}`"
+                  :to="`/journal/timetables?search-driver=${apiStore.dailyStatsData.mostActiveDrivers[0].name}`"
                 >
-                  <b>{{ stats.mostActiveDrivers[0].name }}</b>
+                  <b>{{ apiStore.dailyStatsData.mostActiveDrivers[0].name }}</b>
                 </router-link>
               </template>
               <template #distance>
-                <b class="text--primary">{{ stats.mostActiveDrivers[0].distance.toFixed(2) }} km</b>
+                <b class="text--primary"
+                  >{{ apiStore.dailyStatsData.mostActiveDrivers[0].distance.toFixed(2) }} km</b
+                >
               </template>
             </i18n-t>
           </li>
@@ -151,7 +159,11 @@
           >
             <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>
@@ -160,76 +172,25 @@
   </section>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import dateMixin from '../../mixins/dateMixin';
-
-import { API } from '../../typings/api';
-import { Status } from '../../typings/common';
+<script lang="ts" setup>
+import { computed, onMounted } from 'vue';
 import { useApiStore } from '../../store/apiStore';
+import { Status } from '../../typings/common';
+import { humanizeDuration } from '../../composables/time';
 
-export default defineComponent({
-  name: 'journal-daily-stats',
+onMounted(() => {
+  apiStore.fetchDailyStats();
+});
 
-  mixins: [dateMixin],
+const apiStore = useApiStore();
 
-  data() {
-    return {
-      Status,
-      statsStatus: Status.Data.Loading,
-      intervalId: -1,
+const topDispatchers = computed(() => {
+  if (!apiStore.dailyStatsData || apiStore.dailyStatsData.mostActiveDispatchers.length == 0)
+    return [];
 
-      stats: {} as API.DailyStats.Response,
-      apiStore: useApiStore()
-    };
-  },
+  const maxCount = apiStore.dailyStatsData.mostActiveDispatchers[0].count;
 
-  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;
-    }
-  }
+  return apiStore.dailyStatsData.mostActiveDispatchers.filter((disp) => disp.count === maxCount);
 });
 </script>
 
@@ -265,7 +226,7 @@ ul.stats-list {
   gap: 0.5em;
 }
 
-@include responsive.smallScreen{
+@include responsive.smallScreen {
   h3 {
     text-align: center;
   }

src/components/JournalView/JournalDispatchers/JournalDispatcherEntry.vue

@@ -1,25 +1,37 @@
 <template>
   <li class="dispatcher-history-entry">
     <div class="entry-info">
-      <span>
-        <span>
+      <span class="entry-info-left">
+        <div class="station-info">
           <router-link :to="`/journal/dispatchers?search-station=${entry.stationName}`">
             <b>{{ entry.stationName }}</b>
           </router-link>
 
           <b class="text--grayed"> #{{ entry.stationHash }}</b>
-        </span>
-        &bull;
-        <b
-          v-if="entry.dispatcherLevel !== null"
-          class="level-badge dispatcher"
-          :style="calculateExpStyle(entry.dispatcherLevel, entry.dispatcherIsSupporter)"
-        >
-          {{ entry.dispatcherLevel >= 2 ? entry.dispatcherLevel : 'L' }}
-        </b>
-        <b style="margin-left: 5px">
+          &bull;
+          <b
+            v-if="entry.dispatcherLevel !== null"
+            class="level-badge dispatcher"
+            :style="calculateExpStyle(entry.dispatcherLevel, entry.dispatcherIsSupporter)"
+          >
+            {{ entry.dispatcherLevel >= 2 ? entry.dispatcherLevel : 'L' }}
+          </b>
+
           <span
-            v-if="apiStore.donatorsData.includes(entry.dispatcherName)"
+            v-if="isCreator(entry.dispatcherName)"
+            data-tooltip-type="CreatorTooltip"
+            :data-tooltip-content="$t('donations.creator-message')"
+          >
+            <router-link
+              class="text--creator"
+              :to="`/journal/dispatchers?search-dispatcher=${entry.dispatcherName}`"
+            >
+              {{ entry.dispatcherName }}
+            </router-link>
+          </span>
+
+          <span
+            v-else-if="apiStore.donatorsData.includes(entry.dispatcherName)"
             data-tooltip-type="DonatorTooltip"
             :data-tooltip-content="$t('donations.dispatcher-message')"
           >
@@ -37,7 +49,11 @@
           >
             {{ 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">
@@ -118,6 +134,8 @@ 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';
+import { isCreator } from '../../../utils/userUtils';
 
 export default defineComponent({
   props: {
@@ -125,12 +143,12 @@ export default defineComponent({
     showExtraInfo: { type: Boolean, required: true }
   },
 
-  components: { StationStatusBadge },
+  components: { StationStatusBadge, FlagIcon },
   mixins: [dateMixin, styleMixin],
   emits: ['toggleShowExtraInfo'],
 
   data() {
-    return { regions, apiStore: useApiStore() };
+    return { regions, apiStore: useApiStore(), isCreator };
   },
 
   methods: {
@@ -164,6 +182,11 @@ export default defineComponent({
   padding: 1em;
 }
 
+.dispatcher-language {
+  display: inline-block;
+  vertical-align: middle;
+}
+
 .entry-info {
   display: flex;
   justify-content: space-between;
@@ -185,6 +208,15 @@ 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;
@@ -198,11 +230,15 @@ 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

@@ -1,85 +0,0 @@
-<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="filters-options dropdown" @keydown.esc="showOptions = false">
+  <div class="dropdown filters-options" @keydown.esc="showOptions = false">
     <div class="dropdown_background" v-if="showOptions" @click="showOptions = false"></div>
 
     <div class="actions-bar">
@@ -57,7 +57,7 @@
                 <label v-if="propName == 'search-date-from'" for="search-date">{{
                   $t(`options.search-${optionsType}-date`)
                 }}</label>
-                
+
                 <div class="search-box">
                   <input
                     class="search-input"
@@ -120,15 +120,15 @@
               </div>
             </section>
           </div>
+        </div>
 
-          <div class="options_actions">
-            <button class="btn--action" @click="onResetButtonClick">
-              {{ $t('options.reset-button') }}
-            </button>
-            <button class="btn--action" @click="onSearchButtonConfirm">
-              {{ $t('options.search-button') }}
-            </button>
-          </div>
+        <div class="options_actions">
+          <button class="btn--action" @click="onResetButtonClick">
+            {{ $t('options.reset-button') }}
+          </button>
+          <button class="btn--action" @click="onSearchButtonConfirm">
+            {{ $t('options.search-button') }}
+          </button>
         </div>
       </div>
     </transition>
@@ -269,9 +269,9 @@ export default defineComponent({
 
       this.searchTimeout = window.setTimeout(async () => {
         try {
-          const suggestions: string[] = await (
-            await this.apiStore.client!.get(`api/get${type}Suggestions?name=${value}`)
-          ).data;
+          const suggestions: string[] = await this.apiStore.client.get(
+            `api/get${type}Suggestions?name=${value}`
+          );
 
           this[`${type}Suggestions`] = suggestions;
         } catch (error) {
@@ -330,4 +330,23 @@ 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,89 +2,80 @@
   <div
     class="journal-stats dropdown"
     v-if="!mainStore.isOffline"
-    @keydown.esc="currentStatsTab = null"
+    @keydown.esc="isDropdownOpen = false"
   >
-    <div
-      class="dropdown_background"
-      v-if="currentStatsTab !== null"
-      @click="currentStatsTab = null"
-    ></div>
+    <div class="dropdown_background" v-if="isDropdownOpen" @click="isDropdownOpen = false"></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-selected="button.tab == currentStatsTab"
-        :data-disabled="button.disabled"
-        :disabled="button.disabled"
-        @click="onTabButtonClick(button.tab)"
+        :data-disabled="chosenPlayerId == -1"
+        @click="navigateToProfile"
       >
-        <img
-          v-if="button.iconName"
-          :src="`/images/icon-${button.iconName}.svg`"
-          :alt="button.iconName"
-        />
-        {{ $t(button.localeKey) }}
+        <img :src="`/images/icon-user.svg`" alt="user icon" />
+        {{ $t('profile.journal-button') }}
       </button>
     </div>
 
     <transition name="dropdown-anim">
-      <div
-        class="dropdown_wrapper"
-        :class="{ 'dropdown-align-right': true }"
-        v-if="currentStatsTab !== null"
-      >
+      <div class="dropdown_wrapper" v-if="isDropdownOpen">
         <keep-alive>
-          <component :is="currentStatsTab" :key="currentStatsTab"></component>
+          <JournalDailyStats />
         </keep-alive>
       </div>
     </transition>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
+<script lang="ts" setup>
+import { ref } from 'vue';
 import { useMainStore } from '../../store/mainStore';
-import StorageManager from '../../managers/storageManager';
-import { Journal } from './typings';
 import JournalDailyStats from './JournalDailyStats.vue';
-import JournalDispatcherStats from '../JournalView/JournalDispatchers/JournalDispatcherStats.vue';
-import JournalDriverStats from '../JournalView/JournalTimetables/JournalDriverStats.vue';
+import { useRouter } from 'vue-router';
 
-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 router = useRouter();
 
-  methods: {
-    onTabButtonClick(tab: Journal.StatsTab) {
-      this.currentStatsTab = tab == this.currentStatsTab ? null : tab;
-
-      StorageManager.setStringValue('journalStatsTab', this.currentStatsTab ?? '');
-    }
+const props = defineProps({
+  chosenPlayerId: {
+    type: Number,
+    required: true
   }
 });
+
+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';
+@use '../../styles/responsive';
 
-.dropdown_wrapper.dropdown-align-right {
+.dropdown_wrapper {
   left: auto;
   right: 0;
   max-width: 700px;
+  top: 3.5em;
+}
+
+@include responsive.smallScreen {
+  .dropdown_wrapper {
+    top: 6.25em;
+  }
 }
 </style>

src/components/JournalView/JournalTimetables/EntryDetails.vue

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

src/components/JournalView/JournalTimetables/EntryGeneral.vue

@@ -59,7 +59,17 @@
       </strong>
 
       <router-link
-        v-if="apiStore.donatorsData.includes(timetable.driverName)"
+        v-if="isCreator(timetable.driverName)"
+        class="text--creator"
+        data-tooltip-type="CreatorTooltip"
+        :data-tooltip-content="$t('donations.creator-message')"
+        :to="`/journal/timetables?search-driver=${timetable.driverName}`"
+      >
+        <strong>{{ timetable.driverName }}</strong>
+      </router-link>
+
+      <router-link
+        v-else-if="apiStore.donatorsData.includes(timetable.driverName)"
         class="text--donator"
         data-tooltip-type="DonatorTooltip"
         :data-tooltip-content="$t('donations.driver-message')"
@@ -71,6 +81,10 @@
       <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">
@@ -83,7 +97,7 @@
       </b>
 
       <b
-        class="info-badge"
+        class="timetable-status-badge"
         :class="{
           fulfilled: timetable.fulfilled,
           terminated: timetable.terminated && !timetable.fulfilled,
@@ -110,19 +124,23 @@ 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';
+import { isCreator } from '../../../utils/userUtils';
 
 export default defineComponent({
+  components: { FlagIcon },
   mixins: [dateMixin, styleMixin, trainCategoryMixin],
 
   data() {
     return {
-      apiStore: useApiStore()
+      apiStore: useApiStore(),
+      isCreator
     };
   },
 
   props: {
     timetable: {
-      type: Object as PropType<API.TimetableHistory.Data>,
+      type: Object as PropType<API.TimetableHistory.DataShort>,
       required: true
     }
   }
@@ -165,23 +183,6 @@ 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;
@@ -191,7 +192,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.Data>,
+      type: Object as PropType<API.TimetableHistory.DataShort>,
       required: true
     }
   }

src/components/JournalView/JournalTimetables/JournalDriverStats.vue

@@ -1,105 +0,0 @@
-<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 @click="toggleExtraInfo" style="cursor: pointer">
+    <div style="cursor: pointer">
       <!-- Status -->
       <EntryStatus :timetable="timetableEntry" />
     </div>
 
     <!-- Extra -->
     <EntryDetails
-      :timetable="timetableEntry"
+      :timetableEntry="timetableEntry"
       :show-extra-info="showExtraInfo"
       @toggle-extra-info="toggleExtraInfo"
     />
@@ -28,7 +28,6 @@
 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';
@@ -41,7 +40,7 @@ import EntryDetails from './EntryDetails.vue';
 export default defineComponent({
   props: {
     timetableEntry: {
-      type: Object as PropType<API.TimetableHistory.Data>,
+      type: Object as PropType<API.TimetableHistory.DataShort>,
       required: true
     },
     showExtraInfo: {
@@ -60,74 +59,9 @@ 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() {
-      this.$emit('toggleShowExtraInfo');
+    toggleExtraInfo(data: API.TimetableHistory.Data | null) {
+      this.$emit('toggleShowExtraInfo', data);
     }
   }
 });
@@ -145,7 +79,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(timetableEntry.id)"
+          :onToggleShowExtraInfo="toggleExtraInfo"
           :showExtraInfo="extraInfoIndexes.includes(timetableEntry.id)"
         />
       </transition-group>
@@ -59,9 +59,11 @@ export default defineComponent({
     JournalTimetableEntry
   },
 
+  emits: ['toggleExtraInfo'],
+
   props: {
     timetableHistory: {
-      type: Array as PropType<API.TimetableHistory.Response>,
+      type: Array as PropType<API.TimetableHistory.ResponseShort>,
       required: true
     },
     scrollNoMoreData: {
@@ -75,32 +77,23 @@ export default defineComponent({
     },
     dataStatus: {
       type: Number as PropType<Status.Data>
+    },
+    extraInfoIndexes: {
+      type: Object as PropType<number[]>,
+      required: true
     }
   },
 
   data() {
     return {
       Status,
-      store: useMainStore(),
-      extraInfoIndexes: [] as number[]
+      store: useMainStore()
     };
   },
 
-  watch: {
-    '$route.query': {
-      deep: true,
-      handler() {
-        this.extraInfoIndexes.length = 0;
-      }
-    }
-  },
-  
   methods: {
-    toggleExtraInfo(id: number) {
-      const existingIdx = this.extraInfoIndexes.indexOf(id);
-
-      if (existingIdx != -1) this.extraInfoIndexes.splice(existingIdx, 1);
-      else this.extraInfoIndexes.push(id);
+    toggleExtraInfo(data: API.TimetableHistory.Data | null) {
+      this.$emit('toggleExtraInfo', data);
     }
   }
 });
@@ -111,7 +104,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,5 +1,6 @@
 export namespace Journal {
   export type DispatcherSearchKey =
+    | 'search-duty-id'
     | 'search-dispatcher'
     | 'search-station'
     | 'search-date-from'
@@ -10,10 +11,12 @@ 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;
@@ -61,19 +64,6 @@ 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

@@ -0,0 +1,298 @@
+<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

@@ -0,0 +1,76 @@
+<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

@@ -0,0 +1,107 @@
+<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

@@ -0,0 +1,398 @@
+<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, 'text--creator': isPlayerCreator }"
+          >
+            <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';
+import { isCreator } from '../../utils/userUtils';
+
+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 isPlayerCreator = computed(() => (props.playerName ? isCreator(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

@@ -96,6 +96,7 @@ export default defineComponent({
   data() {
     return {
       historyList: [] as API.DispatcherHistory.Response,
+      lastStationName: '',
       dataStatus: Status.Data.Loading,
       DataStatus: Status.Data,
       apiStore: useApiStore()
@@ -103,10 +104,10 @@ export default defineComponent({
   },
 
   async activated() {
-    // if (this.historyList.length == 0) {
+    this.historyList.length = 0;
+
     const fetchedHistory = await this.fetchAPIData();
     if (fetchedHistory) this.historyList = fetchedHistory;
-    // }
   },
 
   methods: {
@@ -126,9 +127,8 @@ export default defineComponent({
           this.station?.name || this.onlineScenery?.name
         }&countFrom=${countFrom}&countLimit=${countLimit}`;
 
-        const historyAPIData: API.DispatcherHistory.Response = await (
-          await this.apiStore.client!.get(requestString)
-        ).data;
+        const historyAPIData: API.DispatcherHistory.Response =
+          await this.apiStore.client.get(requestString);
 
         this.dataStatus = Status.Data.Loaded;
         return historyAPIData;
@@ -150,6 +150,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 @use '../../styles/responsive';
 @use '../../styles/scenery-history-table';
+@use '../../styles/badge';
 
 .scenery-dispatchers-history {
   height: 100%;
@@ -194,7 +195,7 @@ export default defineComponent({
   color: springgreen;
 }
 
-@include responsive.smallScreen{
+@include responsive.smallScreen {
   .journal-list > div {
     flex-direction: column;
     justify-content: center;

src/components/SceneryView/SceneryHeader.vue

@@ -1,61 +1,83 @@
 <template>
   <section class="info-header">
-    <a class="scenery-name" :href="station?.generalInfo?.url" target="_blank">
-      {{ stationName.replace(/_/g, ' ') }}
-    </a>
+    <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-abbrev" v-if="station?.generalInfo?.abbr">
-      {{ $t('scenery.abbrev') }} <b>{{ station.generalInfo.abbr }}</b>
+    <div class="scenery-name">
+      <a v-if="station?.generalInfo" :href="station.generalInfo.url" target="_blank">
+        {{ stationName.replace(/_/g, ' ') }}
+      </a>
+
+      <span v-else> {{ stationName.replace(/_/g, ' ') }}</span>
     </div>
 
     <div class="scenery-hash" v-if="onlineScenery?.hash">#{{ onlineScenery.hash }}</div>
   </section>
 </template>
 
-<script lang="ts">
-import { PropType, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { onMounted, PropType, ref } from 'vue';
 import { ActiveScenery, Station } from '../../typings/common';
+import { useRoute, useRouter } from 'vue-router';
 
-export default defineComponent({
-  props: {
-    station: {
-      type: Object as PropType<Station>
-    },
+const route = useRoute();
+const router = useRouter();
 
-    stationName: {
-      type: String,
-      required: true
-    },
+defineProps({
+  station: {
+    type: Object as PropType<Station>
+  },
 
-    onlineScenery: {
-      type: Object as PropType<ActiveScenery>
-    }
+  stationName: {
+    type: String,
+    required: true
+  },
+
+  onlineScenery: {
+    type: Object as PropType<ActiveScenery>
   }
 });
+
+function onReturnButtonClick() {
+  router.push('/');
+}
 </script>
 
 <style lang="scss" scoped>
 @use '../../styles/responsive';
+@use 'sass:color';
 
-.info-header {
-  margin-top: 1em;
+.btn-return {
+  $bgColor: #2b2b2b;
+  background-color: $bgColor;
+
+  &:hover {
+    background-color: color.adjust($color: $bgColor, $lightness: 15%);
+  }
+
+  img {
+    height: 2em;
+  }
 }
 
 .scenery-name {
   font-weight: bold;
   font-size: 3em;
 
+  text-align: center;
+
   text-transform: uppercase;
 }
 
-.scenery-abbrev {
-  font-size: 1.3em;
-  color: #aaa;
-}
-
 .scenery-hash {
-  margin-top: 0.5em;
   color: #aaa;
   font-size: 1.2em;
 }
+
+@include responsive.smallScreen {
+  .scenery-name {
+    font-size: 2.5em;
+  }
+}
 </style>

src/components/SceneryView/SceneryInfo.vue

@@ -1,29 +1,32 @@
 <template>
   <div class="scenery-info">
     <section>
-      <SceneryInfoIcons :station="station" />
-      <SceneryInfoGeneral :station="station" />
-      <SceneryInfoRoutes v-if="station" :station="station" />
-      <SceneryInfoAuthors :station="station" />
+      <div class="info-station-data" v-if="apiStore.dataStatuses.sceneries == Status.Data.Loaded">
+        <SceneryInfoIcons :station="station" />
+        <SceneryInfoGeneral :station="station" />
+        <SceneryInfoRoutes v-if="station" :station="station" />
+        <SceneryInfoAuthors :station="station" />
+      </div>
 
-      <div style="margin: 1em 0; height: 2px; background-color: white"></div>
+      <div class="info-station-loading" v-else>
+        <Loading />
+      </div>
+
+      <div class="info-divider"></div>
 
-      <!-- info dispatcher -->
       <SceneryInfoDispatcher :onlineScenery="onlineScenery" />
 
-      <div class="info-lists">
-        <!-- user list -->
+      <div class="info-online-lists">
         <SceneryInfoUserList :onlineScenery="onlineScenery" :station="station" />
-
-        <!-- spawn list -->
         <SceneryInfoSpawnList :onlineScenery="onlineScenery" />
       </div>
     </section>
   </div>
 </template>
 
-<script lang="ts">
-import { PropType, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { ActiveScenery, Station, Status } from '../../typings/common';
 
 import SceneryInfoDispatcher from './SceneryInfo/SceneryInfoDispatcher.vue';
 import SceneryInfoIcons from './SceneryInfo/SceneryInfoIcons.vue';
@@ -32,47 +35,34 @@ 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';
 
-import { ActiveScenery, Station } from '../../typings/common';
+const apiStore = useApiStore();
 
-export default defineComponent({
-  components: {
-    SceneryInfoDispatcher,
-    SceneryInfoGeneral,
-    SceneryInfoIcons,
-    SceneryInfoAuthors,
-    SceneryInfoUserList,
-    SceneryInfoSpawnList,
-    SceneryInfoRoutes
+defineProps({
+  station: {
+    type: Object as PropType<Station>
   },
-  props: {
-    station: {
-      type: Object as PropType<Station>
-    },
 
-    onlineScenery: {
-      type: Object as PropType<ActiveScenery>
-    }
+  onlineScenery: {
+    type: Object as PropType<ActiveScenery>
   }
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @use '../../styles/responsive';
-@use '../../styles/badge';
-
-h3.section-header {
-  margin: 0.5em 0;
-  padding: 0.3em;
 
+.info-station-loading {
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
 
-  font-size: 1.2em;
+  min-height: 300px;
 }
 
-.info-lists {
+.info-online-lists {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
@@ -80,6 +70,12 @@ h3.section-header {
   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,19 +8,25 @@
         {{ onlineScenery.dispatcherExp > 1 ? onlineScenery.dispatcherExp : 'L' }}
       </span>
 
-      <router-link
-        class="dispatcher-name"
-        :to="`/journal/dispatchers?search-dispatcher=${onlineScenery.dispatcherName}`"
-      >
+      <router-link class="dispatcher-name" :to="`/profile?playerId=${onlineScenery.dispatcherId}`">
+        <span
+          class="text--creator"
+          v-if="isCreator(onlineScenery.dispatcherName)"
+          :title="$t('donations.creator-message')"
+        >
+          {{ onlineScenery.dispatcherName }}
+        </span>
         <span
           class="text--donator"
-          v-if="apiStore.donatorsData.includes(onlineScenery.dispatcherName)"
+          v-else-if="apiStore.donatorsData.includes(onlineScenery.dispatcherName)"
           :title="$t('donations.dispatcher-message')"
         >
           {{ onlineScenery.dispatcherName }}
         </span>
         <span v-else>{{ onlineScenery.dispatcherName }}</span>
       </router-link>
+
+      <FlagIcon :languageId="onlineScenery.dispatcherLanguageId" width="1.25em" />
     </div>
 
     <div class="info-bottom">
@@ -51,13 +57,17 @@ 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';
+import { isCreator } from '../../../utils/userUtils';
 
 export default defineComponent({
   mixins: [styleMixin, dateMixin, routerMixin],
+  components: { StationStatusBadge, FlagIcon },
 
   data() {
     return {
-      apiStore: useApiStore()
+      apiStore: useApiStore(),
+      isCreator
     };
   },
 
@@ -66,8 +76,7 @@ export default defineComponent({
       type: Object as PropType<ActiveScenery>,
       required: false
     }
-  },
-  components: { StationStatusBadge }
+  }
 });
 </script>
 

src/components/SceneryView/SceneryInfo/SceneryInfoGeneral.vue

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

src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue

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

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="oneWayRoutes.length > 0">
+    <div class="routes one-way" v-if="singleRoutesAvailable.length > 0">
       <button
         class="routes-btn"
         @click="toggleRoutesVisibility('single')"
         data-tooltip-type="BaseTooltip"
-        :data-tooltip-content="`${showInternalSingleRoutes ? $t('scenery.btn-hide-internal-routes') : $t('scenery.btn-show-internal-routes')}`"
+        :data-tooltip-content="`${showInternalSingleRoutes ? $t('scenery.btn-show-internal-routes') : $t('scenery.btn-hide-internal-routes')}`"
       >
         <b>{{ $t('scenery.one-way-routes') }}</b>
         <i class="fa-solid" :class="`${showInternalSingleRoutes ? 'fa-eye' : 'fa-eye-slash'}`"></i>
       </button>
 
       <ul class="routes-list">
-        <li v-for="route in oneWayRoutes" :key="route.routeName">
+        <li v-for="route in singleRoutesFiltered" :key="route.routeName">
           <span :class="{ 'no-catenary': !route.isElectric, internal: route.isInternal }">
             {{ route.routeName }}</span
           >
@@ -24,31 +24,50 @@
           </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="twoWayRoutes.length > 0">
+    <div class="routes two-way" v-if="doubleRoutesAvailable.length > 0">
       <button
         class="routes-btn"
         @click="toggleRoutesVisibility('double')"
         data-tooltip-type="BaseTooltip"
-        :data-tooltip-content="`${showInternalDoubleRoutes ? $t('scenery.btn-hide-internal-routes') : $t('scenery.btn-show-internal-routes')}`"
+        :data-tooltip-content="`${showInternalDoubleRoutes ? $t('scenery.btn-show-internal-routes') : $t('scenery.btn-hide-internal-routes')}`"
       >
         <b>{{ $t('scenery.two-way-routes') }}</b>
         <i class="fa-solid" :class="`${showInternalDoubleRoutes ? 'fa-eye' : 'fa-eye-slash'}`"></i>
       </button>
 
       <ul class="routes-list">
-        <li v-for="route in twoWayRoutes" :key="route.routeName">
+        <li v-for="route in doubleRoutesFiltered" :key="route.routeName">
           <span :class="{ 'no-catenary': !route.isElectric, internal: route.isInternal }">
             {{ route.routeName }}
           </span>
-          <span v-if="route.routeSpeed" class="speed">{{ route.routeSpeed }}</span>
+          <span v-if="route.routeSpeed" class="speed">
+            <span>{{ route.routeSpeed }}</span>
+            <span v-if="route.routeSpeedExit && route.routeSpeedExit != route.routeSpeed">
+              | {{ route.routeSpeedExit }}
+            </span>
+          </span>
           <span v-if="route.routeLength" class="length">
             {{ (route.routeLength / 1000).toFixed(1) + 'km' }}
           </span>
           <span v-if="route.isRouteSBL" class="sbl">SBL</span>
         </li>
+
+        <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>
@@ -97,20 +116,32 @@ export default defineComponent({
   },
 
   computed: {
-    oneWayRoutes() {
+    singleRoutesAvailable() {
       return (
         this.station.generalInfo?.routes.single
-          .filter((r) => !r.isInternal || r.isInternal == this.showInternalSingleRoutes)
+          .filter((r) => !r.hidden)
           .sort((r1, r2) => r1.routeName.localeCompare(r2.routeName)) ?? []
       );
     },
 
-    twoWayRoutes() {
+    doubleRoutesAvailable() {
       return (
         this.station.generalInfo?.routes.double
-          .filter((r) => !r.isInternal || r.isInternal == this.showInternalDoubleRoutes)
+          .filter((r) => !r.hidden)
           .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
+      );
     }
   }
 });
@@ -149,13 +180,8 @@ ul.routes-list {
 
   li {
     margin: 0.5em 0.25em;
-    cursor: pointer;
 
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-
-    span {
+    & > span {
       padding: 0.2em;
       background-color: #007599;
       font-weight: bold;
@@ -177,11 +203,16 @@ 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 section-header">
+    <h3 class="spawn-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,10 +53,23 @@ 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 section-header">
+    <h3 class="user-header">
       <img src="/images/icon-user.svg" alt="Users icon" />
       &nbsp;{{ $t('scenery.users') }} &nbsp;
       <span class="text--primary">{{ onlineScenery?.stationTrains?.length || 0 }}</span
@@ -18,14 +18,19 @@
         :key="train.id"
         :data-status="status"
       >
-        <router-link :to="train.driverRouteLocation">
+        <router-link
+          :to="train.driverRouteLocation"
+          data-tooltip-type="TrainInfoTooltip"
+          :data-tooltip-content="train.id"
+        >
           <span class="user_train"> {{ train.trainNo }}</span>
           <span class="user_name">
             {{ train.driverName }}
             <i
               v-if="
                 train.timetableData != undefined &&
-                (train.lastSeen <= Date.now() - 60000 || !train.online)
+                train.lastSeen <= Date.now() - 60000 &&
+                !train.online
               "
               class="fa-solid fa-user-slash"
               style="color: lightcoral"
@@ -83,7 +88,8 @@ export default defineComponent({
         const stop = train.timetableData?.followingStops.find(
           (stop) =>
             stop.stopNameRAW.toLowerCase() == name.toLowerCase() ||
-            this.station?.generalInfo?.checkpoints.includes(stop.stopNameRAW)
+            this.station?.generalInfo?.checkpoints.includes(stop.stopNameRAW) ||
+            this.onlineScenery?.missingCheckpoints.includes(stop.stopNameRAW)
         );
 
         const sceneryName =
@@ -106,6 +112,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@use '../../../styles/badge';
+
 $no-timetable: #aaa;
 $departed: springgreen;
 $stopped: #ffa600;
@@ -113,6 +121,17 @@ $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,195 +1,18 @@
 <template>
   <section class="scenery-timetable">
-    <div class="timetable-header">
-      <h3>
-        <img src="/images/icon-timetable.svg" alt="icon-timetable" />
-        <span>{{ $t('scenery.timetables') }}</span>
+    <SceneryTimetableHeader
+      :station="station"
+      :onlineScenery="onlineScenery"
+      :chosenCheckpoint="chosenCheckpoint"
+      :showStockThumbnails="showStockThumbnails"
+    />
 
-        <span>
-          <span class="text--primary">{{ onlineScenery?.scheduledTrainCount.all ?? 0 }}</span>
-          <span> / </span>
-          <span class="text--grayed">
-            {{ 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>
-
-    <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">
-                <b
-                  data-tooltip-type="BaseTooltip"
-                  :data-tooltip-content="getCategoryExplanation(row.train.timetableData!.category)"
-                  class="text--primary tooltip-help"
-                >
-                  {{ row.train.timetableData!.category }}
-                </b>
-                <span>&nbsp;</span>
-                <b>{{ row.train.trainNo }}</b>
-                <span>&nbsp;&bull;&nbsp;</span>
-                <span>{{ row.train.driverName }}</span>
-                <span
-                  v-if="row.checkpointStop.comments"
-                  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>
+    <SceneryTimetableList
+      :station="station"
+      :onlineScenery="onlineScenery"
+      :chosenCheckpoint="chosenCheckpoint"
+      :showStockThumbnails="showStockThumbnails"
+    />
   </section>
 </template>
 
@@ -197,21 +20,21 @@
 import { computed, defineComponent, PropType, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
-import Loading from '../Global/Loading.vue';
+import SceneryTimetableHeader from './SceneryTimetable/SceneryTimetableHeader.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 ScheduledTrainStatus from './ScheduledTrainStatus.vue';
-import { SceneryTimetableRow } from './typings';
 import { ActiveScenery, Station } from '../../typings/common';
-import { getTrainStopStatus, stopStatusPriority } from './utils';
+import SceneryTimetableList from './SceneryTimetable/SceneryTimetableList.vue';
+import StorageManager from '../../managers/storageManager';
 
 export default defineComponent({
   name: 'SceneryTimetable',
 
-  components: { Loading, ScheduledTrainStatus },
+  components: { SceneryTimetableHeader, SceneryTimetableList },
 
   mixins: [dateMixin, routerMixin, trainCategoryMixin],
 
@@ -225,7 +48,8 @@ export default defineComponent({
   },
 
   data: () => ({
-    listOpen: false
+    listOpen: false,
+    showStockThumbnails: false
   }),
 
   activated() {
@@ -247,6 +71,7 @@ export default defineComponent({
 
     const chosenCheckpoint = ref(
       props.station?.generalInfo?.checkpoints[0] ??
+        props.onlineScenery?.missingCheckpoints[0] ??
         props.station?.name ??
         route.query['station']?.toString() ??
         ''
@@ -260,273 +85,42 @@ 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() {
-      if (!this.station) return;
-
-      if (!this.station.generalInfo) {
-        this.chosenCheckpoint = this.station.name;
-        return;
-      }
-
       const queryCheckpoint = this.$route.query['checkpoint']?.toString();
 
-      this.chosenCheckpoint =
-        this.station.generalInfo.checkpoints.find(
-          (ch) => ch.toLocaleLowerCase() === queryCheckpoint?.toLocaleLowerCase()
-        ) ??
-        this.station.generalInfo.checkpoints[0] ??
-        this.station.name;
-    },
+      let checkpointsListRef: string[] | null = null;
+      let sceneryName = '';
 
-    setCheckpoint(cp: string) {
-      this.chosenCheckpoint = cp;
+      if (this.station && this.station.generalInfo) {
+        checkpointsListRef = this.station.generalInfo.checkpoints;
+        sceneryName = this.station.name;
+      } else if (this.onlineScenery) {
+        checkpointsListRef = this.onlineScenery.missingCheckpoints;
+        sceneryName = this.onlineScenery.name;
+      } else if (this.station) {
+        this.chosenCheckpoint = this.station.name;
+        sceneryName = this.station.name;
+      }
+
+      if (checkpointsListRef) {
+        this.chosenCheckpoint =
+          checkpointsListRef.find(
+            (ch) => ch.toLocaleLowerCase() === queryCheckpoint?.toLocaleLowerCase()
+          ) ??
+          checkpointsListRef[0] ??
+          sceneryName;
+      }
     }
   }
 });
 </script>
 
 <style lang="scss" scoped>
-@use '../../styles/responsive';
-@use '../../styles/animations';
-
 .scenery-timetable {
+  display: grid;
   height: 100%;
-  overflow-y: scroll;
-  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-wrap: wrap;
-
-  .info-number {
-    color: var(--clr-primary);
-  }
-
-  .info-route {
-    width: 100%;
-  }
-
-  img {
-    height: 0.9em;
-    vertical-align: middle;
-    margin: 0 0.25em;
-  }
-}
-
-.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;
-  }
+  overflow: hidden;
+  grid-template-rows: auto 1fr;
 }
 </style>

src/components/SceneryView/SceneryTimetable/SceneryTimetableHeader.vue

@@ -0,0 +1,54 @@
+<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

@@ -0,0 +1,567 @@
+<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/SceneryTimetable/ScheduledTrainStatus.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="general-status">
+    <router-link
+      v-if="computedScheduledTrain.stationNameHref"
+      :to="`/scenery?station=${computedScheduledTrain.stationNameHref}`"
+      :class="computedScheduledTrain.status"
+      v-html="computedScheduledTrain.stopStatusIndicator"
+    >
+    </router-link>
+
+    <span
+      v-else
+      :class="computedScheduledTrain.status"
+      v-html="computedScheduledTrain.stopStatusIndicator"
+    ></span>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { StopStatus } from '../../../typings/common';
+import { SceneryTimetableRow } from '../typings';
+
+export default defineComponent({
+  props: {
+    sceneryTimetableRow: {
+      type: Object as PropType<SceneryTimetableRow>,
+      required: true
+    }
+  },
+
+  computed: {
+    computedScheduledTrain() {
+      const { status, prevElement, currentElement, nextElement } = this.sceneryTimetableRow;
+
+      let stopStatusIndicator = '';
+      let stationNameHref = '';
+
+      switch (status) {
+        case StopStatus.ARRIVING:
+          if (prevElement) {
+            stopStatusIndicator = this.$t('timetables.desc-arriving', {
+              prevStationName: prevElement?.stationName ?? '',
+              prevDepartureLine: prevElement?.departureRouteExt ?? ''
+            });
+
+            stationNameHref = prevElement?.stationName ?? '';
+          } else {
+            stopStatusIndicator = this.$t('timetables.desc-beginning');
+          }
+          break;
+
+        case StopStatus.ONLINE:
+        case StopStatus.STOPPED:
+          stopStatusIndicator = nextElement?.arrivalRouteExt
+            ? this.$t(`timetables.desc-${status}`, {
+                nextStationName: nextElement?.stationName,
+                nextArrivalLine: nextElement?.arrivalRouteExt
+              })
+            : this.$t(`timetables.desc-end`);
+
+          stationNameHref = nextElement?.stationName ?? '';
+
+          break;
+
+        case StopStatus.DEPARTED:
+          if (!nextElement?.stationName) {
+            stopStatusIndicator = this.$t('timetables.desc-departed-ends', {
+              nextStationName: currentElement.stationName
+            });
+
+            stationNameHref = nextElement?.stationName ?? '';
+          } else {
+            stopStatusIndicator = this.$t('timetables.desc-departed', {
+              nextStationName: nextElement?.stationName ?? currentElement.stationName,
+              nextArrivalLine: nextElement?.arrivalRouteExt
+            });
+
+            stationNameHref = nextElement?.stationName ?? '';
+          }
+
+          break;
+
+        case StopStatus.DEPARTED_AWAY:
+          stopStatusIndicator = this.$t('timetables.desc-departed-away', {
+            nextStationName: nextElement?.stationName,
+            nextArrivalLine: nextElement?.arrivalRouteExt
+          });
+
+          stationNameHref = nextElement?.stationName ?? '';
+          break;
+
+        case StopStatus.TERMINATED:
+          stopStatusIndicator = this.$t('timetables.desc-terminated');
+          break;
+
+        default:
+          break;
+      }
+      return {
+        ...this.sceneryTimetableRow,
+        stationNameHref,
+        stopStatusIndicator
+      };
+    }
+  },
+
+  methods: {
+    navigateToScenery(sceneryName?: string) {
+      if (!sceneryName) return;
+
+      this.$router.push(`/scenery?station=${sceneryName}`);
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.general-status {
+  margin-top: 0.5em;
+
+  & > .arriving {
+    color: #ccc;
+  }
+
+  & > .departed {
+    color: lime;
+
+    &-away {
+      color: #5ecc5e;
+    }
+  }
+
+  & > .stopped {
+    color: #ffa600;
+  }
+
+  & > .online {
+    color: gold;
+  }
+
+  & > .terminated {
+    color: salmon;
+  }
+}
+</style>

src/components/SceneryView/SceneryTimetablesHistory.vue

@@ -40,36 +40,28 @@
               <span>
                 {{ $t('scenery.timetable-issued-date') }}
                 <b>
-                  {{
-                    localeDateTime(
-                      timetableHistory.createdAt > timetableHistory.beginDate
-                        ? timetableHistory.beginDate
-                        : timetableHistory.createdAt,
-                      $i18n.locale
-                    )
-                  }}
-                </b></span
-              >
-              <span v-if="timetableHistory.authorName">
-                {{ $t('scenery.timetable-issued-by') }}
-                <b>
-                  <router-link
-                    :to="`/journal/timetables?search-dispatcher=${timetableHistory.authorName}`"
-                  >
-                    {{ timetableHistory.authorName }}
-                  </router-link>
+                  {{ parseCreatedDate(timetableHistory, $i18n.locale) }}
                 </b>
               </span>
 
               <span>
                 {{ $t('scenery.timetable-issued-for') }}
-                <b>
-                  <router-link
-                    :to="`/journal/timetables?search-driver=${timetableHistory.driverName}`"
-                  >
-                    {{ timetableHistory.driverName }}
-                  </router-link>
-                </b>
+                <router-link
+                  class="journal-link"
+                  :to="`/journal/timetables?search-driver=${timetableHistory.driverName}`"
+                >
+                  {{ timetableHistory.driverName }}
+                </router-link>
+              </span>
+
+              <span v-if="timetableHistory.authorName">
+                {{ $t('scenery.timetable-issued-by') }}
+                <router-link
+                  class="journal-link"
+                  :to="`/journal/timetables?search-dispatcher=${timetableHistory.authorName}`"
+                >
+                  {{ timetableHistory.authorName }}
+                </router-link>
               </span>
             </div>
           </span>
@@ -106,7 +98,7 @@ import { useApiStore } from '../../store/apiStore';
 import routerMixin from '../../mixins/routerMixin';
 import { useMainStore } from '../../store/mainStore';
 
-const historyModeList = ['via', 'issuedFrom', 'terminatingAt'] as const;
+const historyModeList = ['includesScenery', 'issuedFrom', 'via', 'terminatingAt'] as const;
 type HistoryMode = (typeof historyModeList)[number];
 
 export default defineComponent({
@@ -123,7 +115,7 @@ export default defineComponent({
 
   data() {
     return {
-      historyList: [] as API.TimetableHistory.Response,
+      historyList: [] as API.TimetableHistory.ResponseShort,
       historyModeList,
 
       apiStore: useApiStore(),
@@ -131,17 +123,19 @@ export default defineComponent({
       dataStatus: Status.Data.Loading,
       DataStatus: Status.Data,
 
-      checkedHistoryMode: 'via' as HistoryMode
+      checkedHistoryMode: 'includesScenery' as HistoryMode
     };
   },
 
   async activated() {
+    this.checkedHistoryMode = 'includesScenery';
     this.fetchAPIData();
   },
 
   methods: {
     async fetchAPIData() {
       const stationName = this.$route.query['station'];
+      this.dataStatus = Status.Data.Loading;
 
       if (!stationName) {
         this.historyList = [];
@@ -152,25 +146,27 @@ export default defineComponent({
       const requestFilters: Record<string, any> = {};
       requestFilters[this.checkedHistoryMode] = stationName.toString();
       requestFilters.countLimit = 30;
+      requestFilters['returnType'] = 'short';
 
       try {
-        const response: API.TimetableHistory.Response = await (
-          await this.apiStore.client!.get('api/getTimetables', {
-            params: requestFilters
-          })
-        ).data;
+        const response: API.TimetableHistory.ResponseShort = await this.apiStore.client.get(
+          'api/getTimetables',
+          requestFilters
+        );
+
+        console.log(response);
 
         this.historyList = response;
 
         this.dataStatus = Status.Data.Loaded;
       } catch (error) {
         console.error(error);
+        this.dataStatus = Status.Data.Error;
       }
     },
 
     checkHistoryMode(mode: HistoryMode) {
       this.checkedHistoryMode = mode;
-      this.dataStatus = Status.Data.Loading;
       this.fetchAPIData();
     },
 
@@ -181,6 +177,18 @@ export default defineComponent({
           [`search-${this.checkedHistoryMode}`]: this.station?.name || this.onlineScenery?.name
         }
       });
+    },
+
+    parseCreatedDate(timetable: API.TimetableHistory.DataShort, locale: string) {
+      const createdDate =
+        timetable.createdAt > timetable.beginDate
+          ? new Date(timetable.beginDate)
+          : new Date(timetable.createdAt);
+
+      return createdDate.toLocaleString(locale == 'pl' ? 'pl-PL' : 'en-GB', {
+        timeStyle: 'short',
+        dateStyle: 'medium'
+      });
     }
   },
   components: { Loading }
@@ -215,7 +223,15 @@ export default defineComponent({
 
   button {
     padding: 0.35em;
-    min-width: 120px;
+  }
+}
+
+.journal-link {
+  font-weight: bold;
+  color: #eee;
+
+  &:hover {
+    color: var(--clr-primary);
   }
 }
 

src/components/SceneryView/SceneryTopList.vue

@@ -0,0 +1,213 @@
+<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-if="bestScoreList.length > 0">
+        <li v-for="(value, i) in bestScoreList">
+          <div>
+            {{ t('ordinal', { count: i + 1 }) }} {{ t('scenery.top-list.place') }} -
+            <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 v-else class="no-data">
+        <span v-if="currentListScope == 'name'">{{ t('scenery.top-list.no-data-general') }}</span>
+        <span v-else>{{ t('scenery.top-list.no-data-current-hash') }}</span>
+      </div>
+    </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;
+}
+
+.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;
+  }
+}
+
+.no-data {
+  padding: 1em 0.5em;
+  font-size: 1.1em;
+  background-color: #333;
+  color: #ccc;
+}
+</style>

src/components/SceneryView/ScheduledTrainStatus.vue

@@ -1,139 +0,0 @@
-<template>
-  <div class="general-status">
-    <span
-      :class="computedScheduledTrain.status"
-      data-tooltip-type="HtmlTooltip"
-      :data-tooltip-content="computedScheduledTrain.stopStatusDescription"
-      @click.prevent="() => {}"
-    >
-      {{ computedScheduledTrain.stopStatusIndicator }}
-    </span>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import { StopStatus } from '../../typings/common';
-import { SceneryTimetableRow } from './typings';
-
-export default defineComponent({
-  props: {
-    sceneryTimetableRow: {
-      type: Object as PropType<SceneryTimetableRow>,
-      required: true
-    }
-  },
-
-  computed: {
-    computedScheduledTrain() {
-      const { status, prevElement, currentElement, nextElement } = this.sceneryTimetableRow;
-
-      const prevDepartureIndicator = prevElement?.departureRouteExt
-        ? `(${prevElement.departureRouteExt}) ${prevElement.stationName}`
-        : '---';
-
-      const nextArrivalIndicator = nextElement?.arrivalRouteExt
-        ? `(${nextElement.arrivalRouteExt}) ${nextElement.stationName}`
-        : `${currentElement.stationName}`;
-
-      let stopStatusDescription = '',
-        stopStatusIndicator = '';
-
-      switch (status) {
-        case StopStatus.ARRIVING:
-          stopStatusIndicator = `${this.$t('timetables.from')}: ${prevDepartureIndicator}`;
-          stopStatusDescription = this.$t('timetables.desc-arriving', {
-            prevStationName: prevElement?.stationName ?? '',
-            prevDepartureLine: prevElement?.departureRouteExt ?? ''
-          });
-          break;
-
-        case StopStatus.ONLINE:
-        case StopStatus.STOPPED:
-          stopStatusIndicator = nextElement?.arrivalRouteExt
-            ? `${this.$t('timetables.to')}: ${nextArrivalIndicator}`
-            : `${this.$t('timetables.desc-end')}`;
-          stopStatusDescription = nextElement?.arrivalRouteExt
-            ? this.$t(`timetables.desc-${status}`, {
-                nextStationName: nextElement?.stationName,
-                nextArrivalLine: nextElement?.arrivalRouteExt
-              })
-            : '';
-          break;
-
-        case StopStatus.DEPARTED:
-          stopStatusIndicator = `${this.$t('timetables.to')}: ${nextArrivalIndicator}`;
-
-          if (!nextElement?.stationName) {
-            stopStatusDescription = this.$t('timetables.desc-departed-ends', {
-              nextStationName: currentElement.stationName
-            });
-          } else {
-            stopStatusDescription = this.$t('timetables.desc-departed', {
-              nextStationName: nextElement?.stationName ?? currentElement.stationName,
-              nextArrivalLine: nextElement?.arrivalRouteExt
-            });
-          }
-
-          break;
-
-        case StopStatus.DEPARTED_AWAY:
-          stopStatusIndicator = `${this.$t('timetables.to')}: ${nextArrivalIndicator}`;
-          stopStatusDescription = this.$t('timetables.desc-departed-away', {
-            nextStationName: nextElement?.stationName,
-            nextArrivalLine: nextElement?.arrivalRouteExt
-          });
-          break;
-
-        case StopStatus.TERMINATED:
-          stopStatusIndicator = `X ${this.$t('timetables.desc-terminated')}`;
-          stopStatusDescription = this.$t('timetables.desc-terminated');
-          break;
-
-        default:
-          break;
-      }
-      return {
-        ...this.sceneryTimetableRow,
-        stopStatusDescription,
-        stopStatusIndicator
-      };
-    }
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-.general-status {
-  margin-top: 0.5em;
-  cursor: help;
-
-  span.arriving {
-    color: #ccc;
-  }
-
-  span.departed {
-    color: lime;
-    font-weight: bold;
-
-    &-away {
-      font-weight: bold;
-      color: #5ecc5e;
-    }
-  }
-
-  span.stopped {
-    color: #ffa600;
-    font-weight: bold;
-  }
-
-  span.online {
-    color: gold;
-  }
-
-  span.terminated {
-    color: salmon;
-    font-weight: bold;
-  }
-}
-</style>

src/components/SceneryView/utils.ts

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

src/components/StationsView/FilterSlider.vue

@@ -0,0 +1,154 @@
+<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

@@ -21,9 +21,7 @@
             <template v-else>{{ $t('filters.no-changed-filters') }}</template>
           </div>
 
-          <section class="card_sceneries-search">
-            <h3 class="section-header">{{ $t('filters.sceneries-search') }}</h3>
-
+          <section class="card_input-search">
             <datalist id="sceneries">
               <option
                 v-for="scenery in sortedStationList"
@@ -32,18 +30,59 @@
               ></option>
             </datalist>
 
-            <form action="javascript:void(0);" @submit="handleSceneriesInput">
-              <input
-                v-model="chosenSearchScenery"
-                id="scenery-search"
-                list="sceneries"
-                :placeholder="$t('filters.sceneries-placeholder')"
-                @focus="preventKeyDown = true"
-                @blur="preventKeyDown = false"
-              />
+            <input
+              v-model="chosenSearchScenery"
+              id="scenery-search"
+              list="sceneries"
+              :placeholder="$t('filters.sceneries-placeholder')"
+              @change="handleSceneriesInput"
+              @focus="preventKeyDown = true"
+              @blur="preventKeyDown = false"
+            />
 
-              <button class="btn--action">{{ $t('filters.search-button-title') }}</button>
-            </form>
+            <button class="btn--action" @click="handleSceneriesInput">
+              {{ $t('filters.search-button-title') }}
+            </button>
+          </section>
+
+          <section class="card_input-search">
+            <input
+              v-model="filters['lines']"
+              id="line-numbers-search"
+              :placeholder="$t('filters.line-numbers-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']">
+              <option value="">{{ $t('filters.projects-placeholder') }}</option>
+              <option v-for="(project, i) in projectsOptions" :key="i" :value="project">
+                {{ project }}
+              </option>
+            </select>
+
+            <button class="btn--action btn--image" @click="resetProjectsInput">
+              <img src="/images/icon-exit.svg" alt="reset projects search" />
+            </button>
           </section>
 
           <section class="card_options">
@@ -52,7 +91,7 @@
               v-for="(sectionFilters, sectionKey) in filtersSections"
               :key="sectionKey"
             >
-              <h3 class="text--primary">
+              <h3 class="section-header">
                 <span class="active-indicator" v-if="!areSectionFiltersDefault(sectionKey)"></span>
                 {{ $t(`filters.sections.${sectionKey}`) }}
                 <button @click="resetSectionFilters(sectionKey)">RESET</button>
@@ -82,7 +121,7 @@
           </section>
 
           <section class="card_timestamp">
-            <h3 class="section-header">{{ $t('filters.minimum-hours-title') }}</h3>
+            <h3 class="hours-section-header">{{ $t('filters.minimum-hours-title') }}</h3>
 
             <span class="clock">
               <button class="btn--action" @click="subHour">-</button>
@@ -97,44 +136,17 @@
             </span>
           </section>
 
-          <section class="card_authors-search">
-            <h3 class="section-header">{{ $t('filters.authors-search') }}</h3>
-
-            <datalist id="authors" name="authors">
-              <option v-for="(author, i) in authorsHint" :key="i" :value="author"></option>
-            </datalist>
-
-            <form action="javascript:void(0);" @submit="handleAuthorsInput">
-              <input
-                type="text"
-                id="author"
-                list="authors"
-                name="authors"
-                v-model="authors"
-                :placeholder="$t('filters.authors-placeholder')"
-                @focus="preventKeyDown = true"
-                @blur="preventKeyDown = false"
-              />
-
-              <button class="btn--action">{{ $t('filters.search-button-title') }}</button>
-            </form>
-          </section>
-
           <section class="card_sliders">
-            <div class="slider" v-for="(slider, i) in sliderStates" :key="i">
-              <input
-                class="slider-input"
-                type="range"
-                :name="slider.id"
-                :id="slider.id"
-                :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="option-slider" v-for="(sliderGroup, i) in sliderGroups" :key="i">
+              <FilterSlider :sliderGroup="sliderGroup" />
+
+              <span class="slider-value">
+                {{ filters[sliderGroupsOptions[sliderGroup][0].id] }} -
+                {{ filters[sliderGroupsOptions[sliderGroup][1].id] }}
+              </span>
+
               <div class="slider-content">
-                {{ $t(`filters.sliders.${slider.id}`) }}
+                {{ $t(`filters.sliders.${sliderGroups[i]}`) }}
               </div>
             </div>
           </section>
@@ -174,13 +186,15 @@ 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,
-  getChangedFilters
+  sliderGroups,
+  getChangedFilters,
+  sliderGroupsOptions
 } from '../../managers/stationFilterManager';
 
 import { StationFilterSection } from '../../managers/stationFilterManager';
@@ -190,17 +204,17 @@ import { watch } from 'vue';
 const STORAGE_KEY = 'options_saved';
 
 export default defineComponent({
-  components: { FilterOption },
+  components: { FilterOption, FilterSlider },
   mixins: [keyMixin, routerMixin],
 
   data: () => ({
     saveOptions: false,
 
     filtersSections,
-    sliderStates,
+    sliderGroups,
+    sliderGroupsOptions,
 
     minimumHours: 0,
-    authors: '',
 
     currentRegion: { id: '', value: '' },
 
@@ -255,13 +269,11 @@ export default defineComponent({
         .sort((s1, s2) => (s1.name > s2.name ? 1 : -1));
     },
 
-    currentOptionsActive() {
-      return true;
-    },
-
-    authorsHint() {
+    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());
@@ -270,6 +282,19 @@ export default defineComponent({
           return acc;
         }, [] as string[])
         .sort((a, b) => a.localeCompare(b));
+    },
+
+    projectsOptions() {
+      return this.store.stationList
+        .reduce((acc, station) => {
+          if (!station.generalInfo || !station.generalInfo.project || station.generalInfo.hidden)
+            return acc;
+          if (!acc.includes(station.generalInfo.project.trim()))
+            acc.push(station.generalInfo.project.trim());
+
+          return acc;
+        }, [] as string[])
+        .sort((a, b) => a.localeCompare(b));
     }
   },
 
@@ -294,8 +319,16 @@ export default defineComponent({
       this.scrollTop = (e.target as HTMLElement).scrollTop;
     },
 
-    handleAuthorsInput() {
-      this.filters['authors'] = this.authors;
+    resetAuthorsInput() {
+      this.filters['authors'] = '';
+    },
+
+    resetProjectsInput() {
+      this.filters['projects'] = '';
+    },
+
+    resetLineNumbersInput() {
+      this.filters['lines'] = '';
     },
 
     handleSceneriesInput() {
@@ -340,7 +373,6 @@ export default defineComponent({
 
       // Reset local model values
       this.minimumHours = 0;
-      this.authors = '';
 
       // Reset global filters
       Object.keys(this.filters).forEach((filterKey) => {
@@ -384,6 +416,14 @@ 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;
 }
@@ -456,33 +496,26 @@ h3.section-header {
   }
 }
 
-.card_authors-search,
-.card_sceneries-search {
-  margin: 1em 0;
+.card_input-search {
   display: flex;
-  flex-direction: column;
   align-items: center;
+  gap: 0.5em;
 
-  form {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 0.5em;
-    width: 100%;
-    margin-top: 1em;
+  button {
+    height: 100%;
   }
 
-  input {
-    width: 70%;
-    max-width: 400px;
+  input,
+  select {
+    width: 100%;
     padding: 0.5em;
-    outline: 1px solid white;
+    border: 1px solid #aaa;
   }
 }
 
 .section-filters {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
   gap: 0.5em;
   margin: 1em 0;
 }
@@ -494,9 +527,11 @@ h3.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;
@@ -548,124 +583,40 @@ h3.section-header {
 }
 
 .option-section h3 {
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.25em;
-
-  gap: 0.5em;
-
   button {
     padding: 0.15em;
     color: coral;
   }
 }
 
-.slider {
+.card_sliders {
+  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;
+}
 
-  &-value {
-    color: var(--clr-primary);
-    padding: 0.1em 0.2em;
-    text-align: center;
-  }
-
-  &-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;
-    }
-  }
+.slider-value {
+  color: var(--clr-primary);
+  padding: 0.1em 0.2em;
+  text-align: center;
+  font-weight: bold;
 }
 
 @include responsive.smallScreen {
-  .slider {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
+  .option-slider {
+    grid-template-columns: 1fr;
+  }
 
-    &-input {
-      width: 90%;
-    }
-
-    &-content {
-      text-align: center;
-    }
+  .slider-content {
+    text-align: center;
   }
 
   .card_controls > button > p {

src/components/StationsView/StationStats.vue

@@ -14,10 +14,10 @@
     <transition name="dropdown-anim">
       <div class="dropdown_wrapper" v-if="showDropdown">
         <div>
-          <h1 class="stats-title text--primary">
+          <h2 class="stats-title text--primary">
             <img src="/images/icon-stats.svg" alt="Open filters icon" height="28" />
             {{ $t('station-stats.title') }}
-          </h1>
+          </h2>
 
           <hr style="margin: 0.5em 0" />
 
@@ -245,7 +245,7 @@ export default defineComponent({
 @use '../../styles/badge';
 @use '../../styles/responsive';
 
-h1.stats-title img {
+.stats-title img {
   vertical-align: text-bottom;
 }
 
@@ -278,13 +278,21 @@ h1.stats-title img {
   color: #ccc;
 }
 
+.dropdown_wrapper {
+  top: 2.5em;
+}
+
 @include responsive.smallScreen {
-  h1.stats-title {
+  .stats-title {
     text-align: center;
   }
 
   .filter-button > span {
     display: none;
   }
+
+  .no-data {
+    text-align: center;
+  }
 }
 </style>

src/components/StationsView/StationTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="station_table">
+  <section class="station_table" @scroll="onScroll" ref="tableRef">
     <Loading
       v-if="apiStore.dataStatuses.connection == Status.Loading && filteredStationList.length == 0"
     />
@@ -14,7 +14,7 @@
             class="header-text"
             :class="headerName"
           >
-            <span class="header_wrapper">
+            <div 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"
               />
-            </span>
+            </div>
           </th>
 
           <th
@@ -33,12 +33,12 @@
             class="header-image"
             :class="headerName"
           >
-            <span class="header_wrapper">
-              <img
-                :src="`/images/icon-${headerName}.svg`"
-                :alt="headerName"
-                :title="$t(`sceneries.headers.${headerName}`)"
-              />
+            <span
+              class="header_wrapper"
+              data-tooltip-type="BaseTooltip"
+              :data-tooltip-content="$t(`sceneries.headers.${headerName}`)"
+            >
+              <img :src="`/images/icon-${headerName}.svg`" :alt="headerName" />
 
               <img
                 class="sort-icon"
@@ -52,14 +52,14 @@
       </thead>
 
       <tbody>
-        <router-link
+        <tr
           v-for="station in filteredStationList"
           class="a-row"
-          role="row"
+          tabindex="0"
           :key="station.name"
           @click.right.prevent="openForumSite($event, station.generalInfo?.url)"
-          @keydown.space.prevent="openForumSite($event, station.generalInfo?.url)"
-          :to="getSceneryRoute(station)"
+          @click="getSceneryRoute(station)"
+          @keydown.enter="getSceneryRoute(station)"
         >
           <td class="station-name" :class="station.generalInfo?.availability">
             <b v-if="station.generalInfo?.project" style="color: salmon">{{
@@ -76,37 +76,49 @@
                   station.generalInfo.availability != 'nonPublic' &&
                   station.generalInfo.availability != 'unavailable'
                 "
+                data-tooltip-type="BaseTooltip"
+                :data-tooltip-content="`${$t(`sceneries.info.${station.generalInfo.availability}`)} (${$t(
+                  'sceneries.info.req-level',
+                  { lvl: station.generalInfo.reqLevel },
+                  station.generalInfo.reqLevel
+                )})`"
                 :style="calculateExpStyle(station.generalInfo.reqLevel)"
               >
                 {{ station.generalInfo.reqLevel >= 2 ? station.generalInfo.reqLevel : 'L' }}
               </span>
 
-              <span v-else-if="station.generalInfo.availability == 'abandoned'">
-                <img
-                  src="/images/icon-abandoned.svg"
-                  alt="non-public"
-                  :title="$t('sceneries.info.abandoned')"
-                />
+              <span
+                v-else-if="station.generalInfo.availability == 'abandoned'"
+                data-tooltip-type="BaseTooltip"
+                :data-tooltip-content="$t('sceneries.info.abandoned')"
+              >
+                <img src="/images/icon-abandoned.svg" alt="non-public" />
               </span>
 
-              <span v-else-if="station.generalInfo.availability == 'nonPublic'">
-                <img
-                  src="/images/icon-lock.svg"
-                  alt="non-public"
-                  :title="$t('sceneries.info.non-public')"
-                />
+              <span
+                v-else-if="station.generalInfo.availability == 'nonPublic'"
+                data-tooltip-type="BaseTooltip"
+                :data-tooltip-content="$t('sceneries.info.non-public')"
+              >
+                <img src="/images/icon-lock.svg" alt="non-public" />
               </span>
 
-              <span v-else>
-                <img
-                  src="/images/icon-unavailable.svg"
-                  alt="unavailable"
-                  :title="$t('sceneries.info.unavailable')"
-                />
+              <span
+                v-else
+                data-tooltip-type="BaseTooltip"
+                :data-tooltip-content="$t('sceneries.info.unavailable')"
+              >
+                <img src="/images/icon-unavailable.svg" alt="unavailable" />
               </span>
             </span>
 
-            <span v-else> ? </span>
+            <span
+              v-else
+              data-tooltip-type="BaseTooltip"
+              :data-tooltip-content="$t('sceneries.info.unknown')"
+            >
+              ?
+            </span>
           </td>
 
           <td class="station-status">
@@ -119,8 +131,16 @@
           <td class="station-dispatcher-name">
             <span v-if="station.onlineInfo?.dispatcherName">
               <b
-                v-if="apiStore.donatorsData.includes(station.onlineInfo.dispatcherName)"
-                @click.prevent="openDonationCard"
+                v-if="isCreator(station.onlineInfo.dispatcherName)"
+                data-tooltip-type="CreatorTooltip"
+                :data-tooltip-content="$t('donations.creator-message')"
+              >
+                <img src="/images/icon-creator.png" alt="creator icon" />
+                <span class="text--creator">&nbsp;{{ station.onlineInfo.dispatcherName }}</span>
+              </b>
+
+              <b
+                v-else-if="apiStore.donatorsData.includes(station.onlineInfo.dispatcherName)"
                 data-tooltip-type="DonatorTooltip"
                 :data-tooltip-content="$t('donations.dispatcher-message')"
               >
@@ -134,6 +154,14 @@
             </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"
@@ -153,7 +181,8 @@
               <span
                 v-if="station.generalInfo.routes.singleElectrifiedNames.length != 0"
                 class="track catenary"
-                :title="`${$t('sceneries.info.single-track-routes-catenary')}${
+                data-tooltip-type="BaseTooltip"
+                :data-tooltip-content="`${$t('sceneries.info.single-track-routes-catenary')}${
                   station.generalInfo.routes.singleElectrifiedNames.length
                 }`"
               >
@@ -163,7 +192,8 @@
               <span
                 v-if="station.generalInfo.routes.singleOtherNames.length != 0"
                 class="track no-catenary"
-                :title="`${$t('sceneries.info.single-track-routes-other')}${
+                data-tooltip-type="BaseTooltip"
+                :data-tooltip-content="`${$t('sceneries.info.single-track-routes-other')}${
                   station.generalInfo.routes.singleOtherNames.length
                 }`"
               >
@@ -177,7 +207,8 @@
               <span
                 v-if="station.generalInfo.routes.doubleElectrifiedNames.length != 0"
                 class="track catenary"
-                :title="`${$t('sceneries.info.double-track-routes-catenary')}${
+                data-tooltip-type="BaseTooltip"
+                :data-tooltip-content="`${$t('sceneries.info.double-track-routes-catenary')}${
                   station.generalInfo.routes.doubleElectrifiedNames.length
                 }`"
               >
@@ -187,7 +218,8 @@
               <span
                 v-if="station.generalInfo.routes.doubleOtherNames.length != 0"
                 class="track no-catenary"
-                :title="`${$t('sceneries.info.double-track-routes-other')}${
+                data-tooltip-type="BaseTooltip"
+                :data-tooltip-content="`${$t('sceneries.info.double-track-routes-other')}${
                   station.generalInfo.routes.doubleOtherNames.length
                 }`"
               >
@@ -201,7 +233,8 @@
               v-if="station.generalInfo?.signalType"
               class="scenery-icon icon-info"
               :class="station.generalInfo?.controlType.replace('+', '-')"
-              :title="
+              data-tooltip-type="BaseTooltip"
+              :data-tooltip-content="
                 $t('sceneries.info.control-type') +
                 $t(`controls.${station.generalInfo?.controlType}`)
               "
@@ -214,7 +247,8 @@
               class="icon-info"
               :src="`/images/icon-${station.generalInfo.signalType}.svg`"
               :alt="station.generalInfo.signalType"
-              :title="
+              data-tooltip-type="BaseTooltip"
+              :data-tooltip-content="
                 $t('sceneries.info.signals-type') + $t(`signals.${station.generalInfo.signalType}`)
               "
             />
@@ -224,7 +258,8 @@
               class="icon-info"
               src="/images/icon-SUP.svg"
               alt="SUP (RASP-UZK)"
-              :title="$t('sceneries.info.SUP')"
+              data-tooltip-type="BaseTooltip"
+              :data-tooltip-content="$t('sceneries.info.SUP')"
             />
 
             <img
@@ -232,7 +267,8 @@
               class="icon-info"
               src="/images/icon-ASDEK.svg"
               alt="dSAT ASDEK"
-              :title="$t('sceneries.info.ASDEK')"
+              data-tooltip-type="BaseTooltip"
+              :data-tooltip-content="$t('sceneries.info.ASDEK')"
             />
 
             <img
@@ -240,7 +276,8 @@
               class="icon-info"
               src="/images/icon-unknown.svg"
               alt="icon-unknown"
-              :title="$t('sceneries.info.unknown')"
+              data-tooltip-type="BaseTooltip"
+              :data-tooltip-content="$t('sceneries.info.unknown')"
             />
           </td>
 
@@ -248,7 +285,7 @@
             class="station-users"
             :class="{ inactive: !station.onlineInfo }"
             data-tooltip-type="UsersTooltip"
-            :data-tooltip-content="JSON.stringify(station.onlineInfo?.stationTrains ?? [])"
+            :data-tooltip-content="getUsersTooltipContent(station.onlineInfo?.stationTrains ?? [])"
           >
             <span class="text--primary">{{
               station.onlineInfo?.stationTrains?.length ?? '-'
@@ -293,7 +330,7 @@
           >
             {{ station.onlineInfo?.scheduledTrainCount.confirmed ?? '-' }}
           </td>
-        </router-link>
+        </tr>
       </tbody>
     </table>
 
@@ -318,22 +355,27 @@ import dateMixin from '../../mixins/dateMixin';
 import styleMixin from '../../mixins/styleMixin';
 import { useApiStore } from '../../store/apiStore';
 import { useMainStore } from '../../store/mainStore';
-import { Station, Status } from '../../typings/common';
+import { Station, Status, TooltipUserTrain, Train } from '../../typings/common';
 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';
+import { isCreator } from '../../utils/userUtils';
 
 export default defineComponent({
   emits: ['toggleDonationCard'],
 
-  components: { Loading, StationStatusBadge },
+  components: { Loading, StationStatusBadge, FlagIcon },
   mixins: [styleMixin, dateMixin],
 
   data: () => ({
     headIconsIds,
     headIds,
-    getChangedFilters
+    scrollTop: 0,
+    getChangedFilters,
+    isCreator
   }),
 
   setup() {
@@ -361,17 +403,19 @@ export default defineComponent({
     };
   },
 
+  activated() {
+    (this.$refs['tableRef'] as HTMLElement).scrollTop = this.scrollTop;
+  },
+
   methods: {
     getSceneryRoute(station: Station) {
-      // TODO: Hide tooltips when navigating away
-
-      return {
+      this.$router.push({
         name: 'SceneryView',
         query: {
           station: station.name,
           region: this.$route.query.region || undefined
         }
-      };
+      });
     },
 
     openDonationCard(e: Event) {
@@ -394,6 +438,19 @@ export default defineComponent({
       else this.activeSorter.dir = 1;
 
       this.activeSorter.headerName = headerName;
+    },
+
+    getUsersTooltipContent(stationTrains: Train[]): string {
+      const usersTrains: TooltipUserTrain[] = stationTrains.map((train) => ({
+        driverName: train.driverName,
+        trainNo: train.trainNo
+      }));
+
+      return JSON.stringify(usersTrains);
+    },
+
+    onScroll(e: Event) {
+      this.scrollTop = (e.target as HTMLElement).scrollTop;
     }
   }
 });
@@ -408,7 +465,7 @@ export default defineComponent({
 $rowCol: #424242;
 
 .station_table {
-  height: calc(100vh - 11em);
+  height: calc(100vh - 17em);
   max-height: 2000px;
   min-height: 500px;
   overflow: auto;
@@ -429,78 +486,82 @@ table {
   width: 100%;
   min-width: 1250px;
   white-space: wrap;
+}
 
-  thead {
-    position: sticky;
-    top: 0;
+thead {
+  position: sticky;
+  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;
   }
 
-  thead tr {
-    background-color: var(--clr-bg3);
+  &.min-lvl {
+    width: 4em;
   }
 
-  thead th {
-    &.station {
-      width: 12em;
-    }
+  &.status {
+    width: 10em;
+  }
 
-    &.min-lvl {
-      width: 4em;
-    }
+  &.dispatcher {
+    width: 12em;
+  }
 
-    &.status {
-      width: 10em;
-    }
+  &.dispatcher-lang {
+    width: 6em;
+  }
 
-    &.dispatcher {
-      width: 12em;
-    }
+  &.dispatcher-lvl {
+    width: 6em;
+  }
 
-    &.dispatcher-lvl {
-      width: 6em;
-    }
+  &.routes-double,
+  &.routes-single {
+    width: 7em;
+  }
 
-    &.routes-double,
-    &.routes-single {
-      width: 7em;
-    }
+  &.general {
+    width: 11em;
+  }
 
-    &.general {
-      width: 11em;
-    }
+  &.header-image {
+    width: 3.5em;
 
-    &.header-image {
-      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;
-      }
+    &.user {
+      width: 5em;
     }
   }
 }
 
-tr,
-.a-row {
+thead th .header_wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 1.5em;
+    vertical-align: middle;
+  }
+}
+
+tbody tr {
   background-color: $rowCol;
   vertical-align: middle;
 
@@ -520,6 +581,7 @@ tr,
     cursor: pointer;
     overflow: hidden;
     text-overflow: ellipsis;
+    height: 2.5em;
 
     &.inactive {
       opacity: 0.2;
@@ -536,6 +598,7 @@ tr,
 .station-name {
   font-weight: bold;
   max-width: 200px;
+  padding: 0.25em;
 
   &.default {
     color: var(--clr-primary);
@@ -570,8 +633,8 @@ tr,
 
 .station-dispatcher-name {
   img {
-    max-width: 1.35em;
-    vertical-align: text-bottom;
+    max-height: 1.3em;
+    vertical-align: text-top;
   }
 }
 

src/components/StationsView/typings.ts

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

src/components/StationsView/utils.ts

@@ -120,35 +120,70 @@ function filterSliderValues(filters: Record<string, any>, generalInfo: StationGe
   const otherAvailability =
     availability == 'nonPublic' || availability == 'unavailable' || availability == 'abandoned';
 
-  const internalRoutes = routes.all.filter((r) => r.isInternal && !r.isRouteSBL && !r.hidden);
+  if (filters['minLevel'] > reqLevel + (otherAvailability ? 1 : 0)) return true;
+  if (filters['maxLevel'] < reqLevel + (otherAvailability ? 1 : 0)) return true;
+  if (filters['minVmax'] > routes.maxRouteSpeed) return true;
+  if (filters['maxVmax'] < routes.minRouteSpeed) return true;
 
-  return (
-    filters['minLevel'] > reqLevel + (otherAvailability ? 1 : 0) ||
-    filters['maxLevel'] < reqLevel + (otherAvailability ? 1 : 0) ||
-    filters['minVmax'] > routes.maxRouteSpeed ||
-    filters['maxVmax'] < routes.minRouteSpeed ||
-    (filters['no-1track'] && routes.single.length != 0) ||
-    (filters['no-2track'] && routes.double.length != 0) ||
-    filters['minOneWayCatenary'] > routes.singleElectrifiedNames.length ||
-    filters['minOneWay'] > routes.singleOtherNames.length ||
-    filters['minTwoWayCatenary'] > routes.doubleElectrifiedNames.length ||
-    // filters['minTwoWay'] > routes.doubleOtherNames.length ||
-    filters['minOneWayCatenaryInt'] >
-      internalRoutes.filter((r) => r.routeTracks == 1 && r.isElectric == true).length ||
-    filters['minOneWayInt'] >
-      internalRoutes.filter((r) => r.routeTracks == 1 && r.isElectric == false).length ||
-    filters['minTwoWayCatenaryInt'] >
-      internalRoutes.filter((r) => r.routeTracks == 2 && r.isElectric == true).length
-  );
+  if (filters['oneWay'] && routes.singleOtherNames.length > 0) return true;
+  if (filters['oneWayCatenary'] && routes.singleElectrifiedNames.length > 0) return true;
+  if (filters['twoWay'] && routes.doubleOtherNames.length > 0) return true;
+  if (filters['twoWayCatenary'] && routes.doubleElectrifiedNames.length > 0) return true;
+
+  if (filters['minOneWay'] > routes.singleOtherNames.length) return true;
+  if (filters['maxOneWay'] < routes.singleOtherNames.length) return true;
+  if (filters['minOneWayCatenary'] > routes.singleElectrifiedNames.length) return true;
+  if (filters['maxOneWayCatenary'] < routes.singleElectrifiedNames.length) return true;
+  if (filters['minTwoWay'] > routes.doubleOtherNames.length) return true;
+  if (filters['maxTwoWay'] < routes.doubleOtherNames.length) return true;
+  if (filters['minTwoWayCatenary'] > routes.doubleElectrifiedNames.length) return true;
+  if (filters['maxTwoWayCatenary'] < routes.doubleElectrifiedNames.length) return true;
+
+  if (filters['oneWayInt'] && routes.singleOtherInternalNames.length > 0) return true;
+  if (filters['oneWayCatenaryInt'] && routes.singleElectrifiedInternalNames.length > 0) return true;
+  if (filters['twoWayInt'] && routes.doubleOtherInternalNames.length > 0) return true;
+  if (filters['twoWayCatenaryInt'] && routes.doubleElectrifiedInternalNames.length > 0) return true;
+
+  // 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) {
-  return (
+  if (
     filters['authors'].length > 3 &&
-    !generalInfo.authors
-      ?.map((a) => a.toLocaleLowerCase())
-      .includes(filters['authors'].toLocaleLowerCase())
-  );
+    generalInfo.authors &&
+    !generalInfo.authors.some(
+      (a) => a.toLocaleLowerCase() == filters['authors'].toLocaleLowerCase()
+    )
+  )
+    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) => {
@@ -187,6 +222,11 @@ 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) -
@@ -243,7 +283,7 @@ export const sortStations = (a: Station, b: Station, sorter: ActiveSorter) => {
   return a.name.localeCompare(b.name);
 };
 
-export const filterStations = (station: Station, filters: Record<string, any>) => {  
+export const filterStations = (station: Station, filters: Record<string, any>) => {
   if (filters['free'] && (!station.onlineInfo || station.onlineInfo.dispatcherId == -1))
     return false;
 

src/components/Tooltip/CreatorTooltip.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="tooltip-content">
+    <img src="/images/icon-creator.png" alt="creator icon" />
+    <b class="text--creator">&nbsp;{{ tooltipStore.content }}</b>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useTooltipStore } from '../../store/tooltipStore';
+
+export default defineComponent({
+  data() {
+    return {
+      tooltipStore: useTooltipStore()
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.tooltip-content {
+  padding: 0.5em;
+  border-radius: 0.25em;
+
+  width: 100%;
+
+  background-color: #333;
+  box-shadow: 0 0 10px 2px #aaa;
+}
+
+img {
+  vertical-align: text-bottom;
+  height: 1.25em;
+}
+</style>

src/components/Tooltip/DonatorTooltip.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tooltip-content">
     <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
-    <span>{{ tooltipStore.content }}</span>
+    <b class="text--donator">&nbsp;{{ tooltipStore.content }}</b>
   </div>
 </template>
 
@@ -20,11 +20,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .tooltip-content {
-  display: flex;
-  align-items: center;
-  gap: 0.5em;
-  flex-wrap: wrap;
-
   padding: 0.5em;
   border-radius: 0.25em;
 
@@ -35,7 +30,7 @@ export default defineComponent({
 }
 
 img {
-  vertical-align: middle;
-  height: 1em;
+  vertical-align: text-bottom;
+  height: 1.25em;
 }
 </style>

src/components/Tooltip/Tooltip.vue

@@ -8,11 +8,13 @@
 import { defineComponent } from 'vue';
 import { useTooltipStore } from '../../store/tooltipStore';
 import DonatorTooltip from './DonatorTooltip.vue';
+import CreatorTooltip from './CreatorTooltip.vue';
 import VehiclePreviewTooltip from './VehiclePreviewTooltip.vue';
 import BaseTooltip from './BaseTooltip.vue';
 import SpawnsTooltip from './SpawnsTooltip.vue';
 import UsersTooltip from './UsersTooltip.vue';
 import HtmlTooltip from './HtmlTooltip.vue';
+import TrainInfoTooltip from './TrainInfoTooltip.vue';
 
 const BOX_PADDING_PX = 20;
 
@@ -23,7 +25,9 @@ export default defineComponent({
     BaseTooltip,
     SpawnsTooltip,
     UsersTooltip,
-    HtmlTooltip
+    HtmlTooltip,
+    TrainInfoTooltip,
+    CreatorTooltip
   },
 
   data() {

src/components/Tooltip/TrainInfoTooltip.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="tooltip-content">
+    <span v-if="trainInfo">
+      <b v-if="trainInfo.timetableData" style="text-transform: uppercase">
+        <span class="text--primary">{{ trainInfo.timetableData.category }}</span>
+        {{ getCategoryExplanation(trainInfo.timetableData.category) }}
+      </b>
+
+      <div class="text--primary">
+        <b>{{ trainInfo.stockList[0] }}</b> &bull; {{ trainInfo.length }}m &bull;
+        {{ (trainInfo.mass / 1000).toFixed(2) }}t
+        <span v-if="trainInfo.timetableData">
+          &bull; vRJ:
+          {{
+            trainInfo.timetableData?.trainMaxSpeed ||
+            getStockSpeedLimit(trainInfo.stockList, trainInfo.mass)
+          }}km/h
+        </span>
+        <span v-else class="text--grayed font--italic">
+          &bull; vMax:
+          {{ getStockSpeedLimit(trainInfo.stockList, trainInfo.mass) }}km/h
+        </span>
+      </div>
+
+      <div class="text--grayed">
+        {{ displayTrainPosition(trainInfo) }} - {{ trainInfo.speed }}km/h
+        <span v-if="!trainInfo.online" style="color: salmon">
+          - offline {{ lastSeenMessage(trainInfo.lastSeen) }}</span
+        >
+      </div>
+
+      <div></div>
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useTooltipStore } from '../../store/tooltipStore';
+import trainCategoryMixin from '../../mixins/trainCategoryMixin';
+import trainInfoMixin from '../../mixins/trainInfoMixin';
+import { useMainStore } from '../../store/mainStore';
+
+export default defineComponent({
+  mixins: [trainCategoryMixin, trainInfoMixin],
+
+  data: () => ({
+    tooltipStore: useTooltipStore(),
+    mainStore: useMainStore()
+  }),
+
+  computed: {
+    trainInfo() {
+      if (this.tooltipStore.content == '') return null;
+
+      // Passed "content" string should be the desired train's ID
+      return this.mainStore.trainList.find((t) => t.id === this.tooltipStore.content);
+    },
+
+    lastSceneryStatus() {}
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.tooltip-content {
+  padding: 0.25em 0.5em;
+  border-radius: 0.25em;
+
+  width: 100%;
+  background-color: #1f1f1f;
+  box-shadow: 0 0 5px 2px #aaa;
+}
+
+img {
+  height: 1em;
+}
+</style>

src/components/Tooltip/UsersTooltip.vue

@@ -10,7 +10,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { useTooltipStore } from '../../store/tooltipStore';
-import { Train } from '../../typings/common';
+import { TooltipUserTrain } from '../../typings/common';
 
 export default defineComponent({
   data() {
@@ -23,7 +23,7 @@ export default defineComponent({
     trains() {
       if (this.tooltipStore.content == '') return [];
 
-      const parsedTrains = JSON.parse(this.tooltipStore.content) as Train[];
+      const parsedTrains = JSON.parse(this.tooltipStore.content) as TooltipUserTrain[];
       return (parsedTrains ?? []).sort((a, b) => a.trainNo - b.trainNo);
     }
   }

src/components/Tooltip/VehiclePreviewTooltip.vue

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

src/components/TrainsView/TrainInfo.vue

@@ -9,7 +9,7 @@
 
         <span
           class="train-badge twr"
-          v-if="train.timetableData?.TWR"
+          v-if="train.timetableData?.twr"
           data-tooltip-type="BaseTooltip"
           :data-tooltip-content="$t('warnings.TWR')"
         >
@@ -56,16 +56,29 @@
           </b>
 
           <b
-            v-if="apiStore.donatorsData.includes(train.driverName)"
+            v-if="isCreator(train.driverName)"
+            data-tooltip-type="CreatorTooltip"
+            :data-tooltip-content="$t('donations.creator-message')"
+          >
+            <img src="/images/icon-creator.png" alt="creator icon" />
+            <span class="text--creator">&nbsp;{{ train.driverName }}</span>
+          </b>
+
+          <b
+            v-else-if="apiStore.donatorsData.includes(train.driverName)"
             data-tooltip-type="DonatorTooltip"
             :data-tooltip-content="$t('donations.driver-message')"
           >
-            <span class="text--donator">{{ train.driverName }}&nbsp;</span>
             <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
+            <span class="text--donator">&nbsp;{{ train.driverName }}</span>
           </b>
 
           <span v-else>{{ train.driverName }}</span>
         </div>
+
+        <div class="train-language-flag">
+          <FlagIcon :language-id="train.driverLanguageId" width="1.75em" />
+        </div>
       </div>
     </div>
 
@@ -110,7 +123,10 @@
           {{ $t('trains.scenery-offline') }}
         </div>
 
-        <div v-if="!train.online" class="train-badge offline">
+        <div
+          v-if="!train.online && train.lastSeen <= Date.now() - 60000"
+          class="train-badge offline"
+        >
           <i class="fa-solid fa-user-slash"></i>
           Offline {{ lastSeenMessage(train.lastSeen) }}
         </div>
@@ -132,7 +148,11 @@
         <img src="/images/icon-speed.svg" alt="speed icon" />
         {{ train.speed }} km/h
 
-        <span v-if="stockSpeedLimit != Infinity">
+        <span v-if="train.timetableData">
+          &bull; vRJ: {{ train.timetableData.trainMaxSpeed }} km/h
+        </span>
+
+        <span v-else-if="stockSpeedLimit != Infinity">
           &bull;
           <em
             class="text--grayed"
@@ -156,7 +176,7 @@
       v-if="extended && train.timetableData && train.timetableData.warningNotes"
     >
       <div class="dangers-badges">
-        <div v-if="train.timetableData?.TWR">
+        <div v-if="train.timetableData?.twr">
           <div class="train-badge twr">TWR</div>
           - {{ $t('warnings.TWR') }}
         </div>
@@ -192,10 +212,12 @@ 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';
+import { isCreator } from '../../utils/userUtils';
 
 export default defineComponent({
   mixins: [trainInfoMixin, styleMixin, trainCategoryMixin],
-  components: { ProgressBar, StockList },
+  components: { ProgressBar, StockList, FlagIcon },
 
   props: {
     train: {
@@ -210,63 +232,16 @@ export default defineComponent({
   data() {
     return {
       store: useMainStore(),
-      apiStore: useApiStore()
+      apiStore: useApiStore(),
+      isCreator
     };
   },
 
   computed: {
     stockSpeedLimit() {
-      let isPassenger = true;
-
-      // Check the whole consist speed limit
-      const vehicleMaxSpeed = this.train.stockList.reduce((acc, stockName, i) => {
-        const [vehicleName, vehicleCargo] = stockName.split(':');
-
-        const vehicleData = this.apiStore.vehiclesData?.find((v) => v.name == vehicleName);
-
-        if (!vehicleData) return acc;
-
-        let vehicleSpeed = vehicleData.group.speed;
-
-        if (vehicleData.type == 'wagon-freight') {
-          isPassenger = false;
-
-          if (vehicleCargo !== undefined && vehicleData.group.speedLoaded) {
-            vehicleSpeed = vehicleData.group.speedLoaded;
-          }
-        }
-
-        return Math.min(vehicleSpeed, acc);
-      }, Infinity);
-
-      // Check the head vehicle speed limit
-      const headLocoName = this.train.stockList[0];
-      const headLocoVehicleData = this.apiStore.vehiclesData?.find((v) => v.name == headLocoName);
-
-      // Omit speed check for head vehicle if there's no data for it
-      if (!headLocoName || !headLocoVehicleData || !headLocoVehicleData.group.massSpeeds)
-        return vehicleMaxSpeed;
-
-      const massSpeeds =
-        headLocoVehicleData.group.massSpeeds[
-          this.train.stockList.length == 1 ? 'none' : isPassenger ? 'passenger' : 'cargo'
-        ];
-
-      // Omit speed check if there's no data on mass speeds
-      if (!massSpeeds) return vehicleMaxSpeed;
-
-      // Number type for locomotives alone
-      if (typeof massSpeeds === 'number') return massSpeeds;
-
-      // Record type for passenger or cargo, find the closest range
-      const massKey = Object.keys(massSpeeds).findLast(
-        (massKey) => this.train.mass >= Number(massKey)
-      );
-
-      const massMaxSpeed = massKey ? massSpeeds[massKey] : Infinity;
-
-      return Math.min(massMaxSpeed, vehicleMaxSpeed);
+      return this.getStockSpeedLimit(this.train.stockList, this.train.mass);
     },
+
     journalRouteLocation() {
       return {
         path: '/journal/timetables',
@@ -314,8 +289,6 @@ export default defineComponent({
   display: flex;
   flex-direction: column;
   font-size: 1em;
-  gap: 0.25em;
-
   background-color: #1a1a1a;
   gap: 0.5em;
 }
@@ -394,7 +367,6 @@ export default defineComponent({
 .status-badges {
   display: flex;
   flex-wrap: wrap;
-
   gap: 0.25em;
 
   img {
@@ -407,7 +379,7 @@ export default defineComponent({
   align-items: center;
   flex-wrap: wrap;
   gap: 0.5em;
-  padding: 0.5em 0;
+  padding: 0.25em 0;
 }
 
 .progress-distance {

src/components/TrainsView/TrainOptions.vue

@@ -30,17 +30,22 @@
             </div>
 
             <div class="search-box">
-              <select
-                class="search-input"
-                name="active-trains"
-                id="active-trains"
-                v-model="searchedDriver"
-              >
-                <option value="">{{ $t('options.select-driver') }}</option>
+              <datalist id="search-active-driver">
                 <option v-for="driverName in activeDriverNames" :value="driverName">
                   {{ driverName }}
                 </option>
-              </select>
+              </datalist>
+
+              <input
+                class="search-input"
+                list="search-active-driver"
+                name="search-active-driver"
+                id="search-active-driver"
+                :placeholder="$t(`options.search-driver`)"
+                v-model="searchedDriver"
+                @focus="preventKeyDown = true"
+                @blur="preventKeyDown = false"
+              />
 
               <button class="btn btn--action search-exit" @click="onInputClear('driver')">
                 <img src="/images/icon-exit.svg" alt="Trains search clear icon" />
@@ -205,6 +210,10 @@ 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/TrainSchedule.vue

@@ -12,8 +12,16 @@
           :data-delayed="stop.departureDelay > 0"
           :data-stop-type="stop.type"
           :data-is-active="stop.isActive"
-          :data-track-count-departure="stop.departureLineInfo?.routeTracks ?? 2"
-          :data-track-count-arrival="stop.arrivalLineInfo?.routeTracks ?? 2"
+          :data-track-count-departure="
+            stop.departureLineInfo?.routeTracks ??
+            stop.nextPointRef?.arrivalLineInfo?.routeTracks ??
+            2
+          "
+          :data-track-count-arrival="
+            stop.arrivalLineInfo?.routeTracks ??
+            scheduleStops[i - 1]?.departureLineInfo?.routeTracks ??
+            2
+          "
         >
           <span class="stop_info">
             <span class="distance">
@@ -57,7 +65,15 @@
                   <span>{{ stop.departureLine }}</span>
 
                   <span v-if="stop.departureLineInfo">
-                    <span> | {{ stop.departureLineInfo.routeSpeed }}</span>
+                    <span>
+                      |
+                      {{
+                        stop.departureLineInfo.routeSpeedExit &&
+                        stop.departureLineInfo.routeSpeedExit != stop.departureLineInfo.routeSpeed
+                          ? `${stop.departureLineInfo.routeSpeedExit} (${stop.departureLineInfo.routeSpeed})`
+                          : stop.departureLineInfo.routeSpeed
+                      }}</span
+                    >
 
                     <img
                       :src="
@@ -85,13 +101,13 @@
                 </div>
 
                 <div
-                  v-if="stop.sceneryName != scheduleStops[i + 1]?.sceneryName"
+                  v-if="stop.nextPointRef && stop.sceneryName != stop.nextPointRef.sceneryName"
                   class="scenery-change-name"
                 >
-                  <span>{{ scheduleStops[i + 1].sceneryName }}</span>
+                  <span>{{ stop.nextPointRef.sceneryName }}</span>
 
                   <i
-                    v-if="!scheduleStops[i + 1].isSceneryOnline"
+                    v-if="!stop.nextPointRef.isSceneryOnline"
                     class="fa-solid fa-ban fa-sm"
                     data-tooltip-type="BaseTooltip"
                     :data-tooltip-content="$t('app.tooltip-scenery-offline')"
@@ -101,30 +117,39 @@
 
                 <div
                   class="scenery-route"
-                  v-if="stop.sceneryName != scheduleStops[i + 1]?.sceneryName"
+                  v-if="stop.nextPointRef && stop.sceneryName != stop.nextPointRef.sceneryName"
                 >
-                  <span> {{ scheduleStops[i + 1].arrivalLine }}</span>
+                  <span> {{ stop.nextPointRef.arrivalLine }}</span>
 
-                  <span v-if="scheduleStops[i + 1].arrivalLineInfo">
-                    <span> | {{ scheduleStops[i + 1].arrivalLineInfo!.routeSpeed }} </span>
+                  <span v-if="stop.nextPointRef.arrivalLineInfo">
+                    <span> | {{ stop.nextPointRef.arrivalLineInfo.routeSpeed }}</span>
+                    <span
+                      v-if="
+                        stop.nextPointRef.arrivalLineInfo.routeSpeedExit &&
+                        stop.nextPointRef.arrivalLineInfo.routeSpeedExit !=
+                          stop.nextPointRef.arrivalLineInfo.routeSpeed
+                      "
+                    >
+                      ({{ stop.nextPointRef.arrivalLineInfo.routeSpeedExit }})
+                    </span>
 
                     <img
                       :src="
-                        scheduleStops[i + 1].arrivalLineInfo?.isElectric
+                        stop.nextPointRef.arrivalLineInfo?.isElectric
                           ? '/images/icon-catenary.svg'
                           : '/images/icon-we4a.png'
                       "
                       data-tooltip-type="BaseTooltip"
                       :data-tooltip-content="
                         $t(
-                          `trains.${!scheduleStops[i + 1].arrivalLineInfo?.isElectric ? 'no-' : ''}catenary-tooltip`
+                          `trains.${!stop.nextPointRef.arrivalLineInfo?.isElectric ? 'no-' : ''}catenary-tooltip`
                         )
                       "
                       width="14"
                     />
 
                     <img
-                      v-if="scheduleStops[i + 1].arrivalLineInfo!.isRouteSBL"
+                      v-if="stop.nextPointRef.arrivalLineInfo!.isRouteSBL"
                       src="/images/icon-sbl-transparent.svg"
                       width="14"
                       data-tooltip-type="BaseTooltip"
@@ -176,26 +201,28 @@ export default defineComponent({
       const sceneryData =
         this.store.stationList?.find((sc) => sc.name == pathEl.stationName) ?? null;
 
-      if (!sceneryData || !sceneryData.generalInfo) return null;
-
       const activeScenery = this.apiStore.activeData?.activeSceneries?.find(
         (sc) => sc.stationName == pathEl.stationName
       );
 
-      const arrivalLineData = pathEl.arrivalRouteExt
-        ? (sceneryData.generalInfo.routes.all.find(
-            (rt) => rt.routeName == pathEl.arrivalRouteExt
-          ) ?? null)
+      const arrivalLineData = sceneryData?.generalInfo
+        ? pathEl.arrivalRouteExt
+          ? (sceneryData.generalInfo.routes.all.find(
+              (rt) => rt.routeName == pathEl.arrivalRouteExt
+            ) ?? null)
+          : null
         : null;
 
-      const departureLineData = pathEl.departureRouteExt
-        ? (sceneryData.generalInfo.routes.all.find(
-            (rt) => rt.routeName == pathEl.departureRouteExt
-          ) ?? null)
+      const departureLineData = sceneryData?.generalInfo
+        ? pathEl.departureRouteExt
+          ? (sceneryData.generalInfo.routes.all.find(
+              (rt) => rt.routeName == pathEl.departureRouteExt
+            ) ?? null)
+          : null
         : null;
 
       return {
-        generalInfo: sceneryData.generalInfo,
+        generalInfo: sceneryData?.generalInfo ?? null,
         isOnline:
           activeScenery &&
           (activeScenery.isOnline == 1 || activeScenery.lastSeen >= Date.now() - 60000),
@@ -224,33 +251,27 @@ export default defineComponent({
       let isActive = false;
 
       if (pathData?.departureLineData) {
-        // arrivalLineInfo = pathData.departureLineData;
+        arrivalLineInfo = pathData.departureLineData;
         departureLineInfo = pathData.departureLineData;
       }
 
-      for (const stop of followingStops) {
+      followingStops.forEach((stop, i) => {
         let isExternal = false;
 
         if (stop.arrivalLine === currentPath.arrivalRouteExt) {
           isExternal = true;
 
           departureLineInfo = pathData?.arrivalLineData ?? null;
-
-          if (pathData?.arrivalLineData) {
-            arrivalLineInfo = pathData.arrivalLineData;
-          }
+          arrivalLineInfo = pathData.arrivalLineData;
         }
 
-        let correctedDepartureLineData: StationRoutesInfo | null = null;
-
         const internalRouteInfo = stop.departureLine
-          ? pathData?.generalInfo.routes.all.find(
+          ? pathData?.generalInfo?.routes.all.find(
               (route) => route.isInternal && route.routeName == stop.departureLine
             )
           : undefined;
 
         if (internalRouteInfo) {
-          correctedDepartureLineData = internalRouteInfo;
           departureLineInfo = internalRouteInfo;
         }
 
@@ -287,7 +308,9 @@ export default defineComponent({
           status: stop.confirmed ? 'confirmed' : stop.stopped ? 'stopped' : 'unconfirmed',
 
           sceneryName: currentPath.stationName,
-          isSceneryOnline: pathData?.isOnline ?? false
+          isSceneryOnline: pathData?.isOnline ?? false,
+
+          nextPointRef: null
         };
 
         if (internalRouteInfo) {
@@ -309,6 +332,11 @@ export default defineComponent({
 
         stopRows.push(rowData);
 
+        // Assign this row data object to the last one as reference
+        if (i != 0) {
+          stopRows[i - 1].nextPointRef = rowData;
+        }
+
         if (stop.departureLine === currentPath.departureRouteExt) {
           // Reverse search for last scenery checkpoint
           if (pathData?.departureLineData) {
@@ -328,7 +356,7 @@ export default defineComponent({
           currentPath = timetablePath[++currentPathIndex];
           pathData = this.getPathSceneryData(currentPath);
         }
-      }
+      });
 
       return stopRows;
     },

src/components/TrainsView/TrainStats.vue

@@ -13,10 +13,10 @@
 
     <transition name="dropdown-anim">
       <div class="dropdown_wrapper" v-if="showOptions">
-        <h1 class="text--primary">
+        <h2 class="stats-title text--primary">
           <img src="/images/icon-stats.svg" alt="Open filters icon" height="28" />
           {{ $t('train-stats.title') }}
-        </h1>
+        </h2>
 
         <hr style="margin: 0.5em 0" />
 
@@ -229,7 +229,7 @@ export default defineComponent({
 @use '../../styles/badge';
 @use '../../styles/responsive';
 
-h1 img {
+.stats-title img {
   vertical-align: text-bottom;
 }
 
@@ -250,14 +250,15 @@ h3 {
 
 .dropdown_wrapper {
   max-width: 600px;
+  top: 2.5em;
 }
 
-@include responsive.smallScreen{
+@include responsive.smallScreen {
   .no-data {
     text-align: center;
   }
 
-  h1 {
+  .stats-title {
     text-align: center;
   }
 }

src/components/TrainsView/TrainTable.vue

@@ -97,7 +97,7 @@ export default defineComponent({
 @use '../../styles/animations';
 
 .train-table {
-  height: calc(100vh - 11em);
+  height: calc(100vh - 17em);
   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" />
+        <StockList :trainStockList="train.stockList" :tractionOnly="true" :showPreviews="true" />
 
         <div>
           <span>{{ train.speed }}km/h</span>

src/components/TrainsView/typings.ts

@@ -196,4 +196,6 @@ export interface TrainSchedulePoint {
   isSBL: boolean;
   sceneryName: string | null;
   isSceneryOnline: boolean;
+
+  nextPointRef: TrainSchedulePoint | null;
 }

src/composables/badge.ts

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,44 @@
+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/data/trainNumberRules.json

@@ -22,7 +22,7 @@
       "TRE", "TRS", 
       "TSE", "TSS",
       "THE", "THS",
-      "LPE", 
+      "LPE", "LPS",
       "LTE", "LTS",
       "LSS",
       "LZE", "LZS", 

src/http.ts

@@ -0,0 +1,23 @@
+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

@@ -9,9 +9,43 @@ const i18n = createI18n({
   warnHtmlMessage: false,
   fallbackLocale: 'pl',
 
+  pluralizationRules: {
+    en: {
+      ordinal: (ctx: { named: (arg0: string) => number }) => {
+        const number = ctx.named('count');
+
+        const suffixes: Record<number, string> = {
+          1: 'st',
+          2: 'nd',
+          3: 'rd'
+        };
+        const suffix = suffixes[number % 10] || 'th';
+
+        return `${number}${suffix}`;
+      }
+    }
+  },
+
   messages: {
-    en: enLang,
-    pl: plLang
+    en: {
+      ...enLang,
+      ordinal: (ctx: { named: (arg0: string) => number }) => {
+        const number = ctx.named('count');
+
+        const suffixes: Record<number, string> = {
+          1: 'st',
+          2: 'nd',
+          3: 'rd'
+        };
+        const suffix = suffixes[number % 10] || 'th';
+
+        return `${number}${suffix}`;
+      }
+    },
+    pl: {
+      ...plLang,
+      ordinal: '{count}.'
+    }
   },
   enableLegacy: false
 });

src/locales/en.json

@@ -1,4 +1,28 @@
 {
+  "welcome": {
+    "title": "Welcome to Stacjownik!",
+    "app-desc": "{b1} is a web tool made for {link}, which main goal is to assist in-game dispatchers and drivers on their duties. Here you can find who is currently online and on what scenery, find a train driver or browse the journal, which contains a history of past timetables and dispatcher duty.",
+    "app-desc-b1": "Stacjownik",
+    "sceneries-header": "Sceneries",
+    "sceneries-desc": "Under the {b1} tab, you will find information about the dispatchers and sceneries they currently occupy. You can also browse all available sceneries in the simulator (in the filters, check the “Free” option to show the rest of the unoccupied ones) and filter them by various aspects, such as control types, additional software, signaling types, required duty level or types of routes. Click on the corresponding scenery in the table to show its details.",
+    "sceneries-desc-b1": "Sceneries",
+    "trains-header": "Trains",
+    "trains-desc": "The {b1} tab contains a list of active drivers and timetables that are currently realized on the selected server (server selection is at the top of the page, next to the counters). The list can be filtered and sorted, taking into account the most important criteria, such as driver name, train number or timetable details. You can also click on the train to show additional information.",
+    "trains-desc-b1": "Trains",
+    "journal-header": "Journal",
+    "journal-desc": "The {b1} is a tab where you can find dispatcher duty and timetables history (currently only from the main PL1 game server). You can also search for a particular player's history using additional filters.",
+    "journal-desc-b1": "Journal",
+    "other-apps": "Also check out other apps designed to make TD2 gameplay easier:",
+    "pojazdownik-desc": "online rolling stock editor",
+    "generator-desc": "graphical manager of train orders",
+    "srjp-desc": "Polish working train timetable",
+    "donation-info": "If you appreciate the Stacjownik project as well as other applications, please consider supporting it financially - click the button with {icon1} to learn more!",
+    "donation-info-icon1-text": "the diamond icon",
+    "discord-info": "I also invite you to the official {discord}, where you will find a dedicated Stacjobot, with which you can search for additional data from the simulator, unavailable on this site!",
+    "discord-info-link-text": "Stacjownik Discord server",
+    "bottom-text": "Enjoy!\n~Spythere",
+    "button-confirm": "Start using the app!"
+  },
   "donations": {
     "button-title": "TOSS A COIN",
     "header": "Toss a coin to Stacjownik!",
@@ -18,7 +42,8 @@
     "action-paypal": "DONATE WITH PAYPAL",
     "action-buycoffee": "BUY ME A COFFEE!",
     "dispatcher-message": "Dispatcher supporting the Stacjownik project!",
-    "driver-message": "Driver supporting the Stacjownik project!"
+    "driver-message": "Driver supporting the Stacjownik project!",
+    "creator-message": "Creator of the Stacjownik project"
   },
   "warnings": {
     "TWR": "Train with high risk cargo",
@@ -32,11 +57,12 @@
     "refresh": "REFRESH"
   },
   "update": {
-    "title": "Stacjownik update!",
+    "title": "Stacjownik has been updated!",
     "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 <a href='https://github.com/Spythere/stacjownik' target='_blank'>the project's GitHub</a>"
+    "info-2": "The full app changelog available on {link}",
+    "info-2-link-text": "the project's GitHub page"
   },
   "app": {
     "sceneries": "SCENERIES",
@@ -52,15 +78,14 @@
     "tooltip-driver-offline": "Driver is offline",
     "tooltip-scenery-offline": "Scenery is offline",
     "pojazdownik-link-content": "POJAZDOWNIK",
-    "gnr-link-content": "TRAIN ORDERS <br> GENERATOR"
-  },
-  "footer": {
-    "discord": "Stacjownik Discord server"
+    "language-tooltip-content": "JĘZYK / LANGUAGE",
+    "gnr-link-content": "TRAIN ORDERS <br> GENERATOR",
+    "discord-link-content": "STACJOWNIK <br> DISCORD SERVER"
   },
   "categories": {
     "EI": "domestic express",
     "EC": "international express",
-    "EN": "domestic night express",
+    "EN": "international night express",
     "MP": "intervoivodeship bullet",
     "MO": "intervoivodeship regio",
     "MM": "international bullet",
@@ -118,7 +143,7 @@
     "title": "Control type",
     "SPK": "SPK",
     "SCS": "SCS",
-    "SCS-SPK": "SCS/SPK",
+    "SCS-SPK": "SCS + SPK",
     "SPE": "SPE",
     "ręczne": "manual",
     "ręczne+SPK": "manual + SPK",
@@ -129,7 +154,7 @@
     "abbrevs": {
       "SPK": "SPK",
       "SCS": "SCS",
-      "SCS-SPK": "S/S",
+      "SCS-SPK": "S+S",
       "SPE": "SPE",
       "ręczne": "R",
       "ręczne+SPK": "R",
@@ -162,9 +187,11 @@
     "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",
@@ -173,6 +200,7 @@
     "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",
@@ -223,7 +251,9 @@
       "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",
@@ -247,6 +277,7 @@
     "SCS": "SCS",
     "SCS-R": "SCS + MANUAL",
     "SCS-M": "SCS + MECH.",
+    "SCS-SPK": "SCS + SPK",
     "SPE": "SPE",
     "manual": "MANUAL",
     "mechanical": "MECHANICAL",
@@ -266,30 +297,37 @@
     "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": {
-      "minLevel": "MIN. REQUIRED DISPATCHER LEVEL",
-      "maxLevel": "MAX. REQUIRED DISPATCHER LEVEL",
-      "minVmax": "MIN. SCENERY ROUTE SPEED",
-      "maxVmax": "MAX. SCENERY ROUTE SPEED",
-      "minOneWayCatenary": "MIN. CATENARY SINGLE TRACK ROUTES",
-      "minOneWay": "MIN. OTHER SINGLE TRACK ROUTES",
-      "minTwoWayCatenary": "MIN. CATENARY DOUBLE TRACK ROUTES",
-      "minTwoWay": "MIN. OTHER DOUBLE TRACK ROUTES",
-      "minOneWayCatenaryInt": "MIN. INTERNAL CATENARY SINGLE TRACK ROUTES",
-      "minOneWayInt": "MIN. INTERNAL OTHER SINGLE TRACK ROUTES",
-      "minTwoWayCatenaryInt": "MIN. INTERNAL CATENARY DOUBLE TRACK ROUTES",
-      "minTwoWayInt": "MIN. INTERNAL OTHER DOUBLE TRACK ROUTES"
+      "vMax": "ROUTE SPEED",
+      "level": "REQUIRED DISPATCHER LEVEL",
+      "routeOneWay": "SINGLE TRACK ROUTES (OTHER)",
+      "routeOneWayCatenary": "SINGLE TRACK ROUTES (CATENARY)",
+      "routeTwoWayCatenary": "DOUBLE TRACK ROUTES (CATENARY)",
+      "routeTwoWay": "DOUBLE TRACK ROUTES (OTHER)",
+      "routeOneWayInternalCatenary": "INTERNAL SINGLE TRACK ROUTES (CATENARY)",
+      "routeOneWayInternal": "INTERNAL SINGLE TRACK ROUTES (OTHER)",
+      "routeTwoWayInternalCatenary": "INTERNAL DOUBLE TRACK ROUTES (CATENARY)",
+      "routeTwoWayInternal": "INTERNAL DOUBLE TRACK ROUTES (OTHER)"
     },
-    "sceneries-search": "SCENERY SEARCH:",
-    "sceneries-placeholder": "Enter scenery name...",
-    "authors-search": "SEARCH BY AUTHOR NAME (other filters apply):",
-    "authors-placeholder": "Enter the author nickname...",
+    "sceneries-placeholder": "Search for scenery",
+    "line-numbers-placeholder": "Line numbers (separated by commas)",
+    "authors-placeholder": "Scenery author",
+    "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"
@@ -300,6 +338,7 @@
       "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",
@@ -313,18 +352,20 @@
     },
     "info": {
       "control-type": "Control type: ",
-      "signals-type": "Signals type: ",
-      "SBL": "This scenery has automatic block signalling (ABS/SBL) system on following routes: ",
+      "signals-type": "Signalling type: ",
+      "SBL": "A scenery with automatic block signalling (ABS/SBL) on routes: ",
       "SUP": "Requires the SUP program (level crossing remote control)",
-      "ASDEK": "Requires the ASDEK program (defect detection of moving rolling stock)",
+      "ASDEK": "ASDEK program available (defect detection of moving rolling stock)",
       "TWB-all": "This scenery has two-way route blockade on all routes",
       "TWB-routes": "This scenery has two-way route blockade on following routes: ",
-      "default": "This scenery is available by default",
-      "non-public": "This scenery is not public",
-      "unavailable": "This scenery is unavailable",
-      "abandoned": "This scenery is no longer supported by its creators",
-      "unknown": "This scenery isn't recognizable right now",
-      "real": "Scenery with real lines: ",
+      "default": "Scenery available in the game package",
+      "nonDefault": "Scenery available to download from the forum site",
+      "req-level": "all dispatcher levels | requries {lvl} dispatcher lvl | requires {lvl} dispatcher lvl",
+      "non-public": "Non-public scenery",
+      "unavailable": "Unavailable scenery",
+      "abandoned": "Abandoned scenery",
+      "unknown": "Unknown scenery",
+      "real": "Scenery with real Polish routes: ",
       "double-track-routes-catenary": "Electrified double-track routes count: ",
       "single-track-routes-catenary": "Electrified single-track routes count: ",
       "double-track-routes-other": "Not electrified double-track routes count: ",
@@ -388,7 +429,7 @@
     "last-seen-ago": "since {minutes} minutes",
     "scenery-offline": "Offline ride",
     "timeout": "An error occured while trying to refresh SWDR timetable data!",
-    "driver-journal-link": "DRIVER JOURNAL",
+    "driver-profile-link": "PLAYER'S PROFILE",
     "driver-srjp-link": "SRJP",
     "driver-return-link": "RETURN",
     "driver-not-found-header": "Train not found! :/",
@@ -398,15 +439,25 @@
     "driver-not-found-others": "Player {driver} is online as:",
     "driver-not-found-return": "RETURN TO THE MAIN SITE",
     "stock-copy": "COPY THE STOCK",
-    "number-propositions": "PROPOSE NUMBER",
+    "number-propositions": "NUMBER & WARNINGS SUGGESTIONS",
     "stock-clipboard-success": "Successfully copied the railway stock in a text form to your clipboard!",
     "stock-clipboard-failure": "Oops! Something happened and the railway stock couldn't be copied to your clipboard! :/",
-    "number-propositions-header": "Generate number examples for selected category:",
+    "number-propositions-header": "Generate number examples for a train category:",
     "number-propositions-third-number": "Third digit:",
     "number-propositions-last-nums": "{count} last digits from the range of:",
     "number-propositions-title": "Propositions:",
     "number-propositions-empty": "No propositions available for the chosen category! :/"
   },
+  "cargo-warnings": {
+    "title": "Additional cargo warnings:",
+    "pn-innofreight": "PN: Innofreight C45: exceeded gauge",
+    "twr-un1965": "TWR: UN1965 (LPG)",
+    "tn-un1965": "TN: unclean tanks after UN1965",
+    "tn-un1202": "TN: UN1202 (diesel fuel)",
+    "tn-un1202-empty": "TN: unclean tanks after UN1202",
+    "pn-military": "PN: military transport",
+    "pn-edk80": "PN: EDK80 railway crane"
+  },
   "train-stats": {
     "stats-button": "STATISTICS",
     "title": "ONLINE TRAINS STATS",
@@ -519,7 +570,7 @@
     "no-users": "NO ACTIVE PLAYERS",
     "no-spawns": "NO OPEN SPAWNS",
     "no-scenery": "Oops! This scenery doesn't exist!",
-    "return-btn": "Return",
+    "return-btn": "BACK TO SCENERIES",
     "history-btn": "View the dispatcher history",
     "info-btn": "Return to the scenery view",
     "authors-title": "Scenery author | Scenery authors",
@@ -527,29 +578,50 @@
     "lines-title": "Real lines",
     "project-title": "Project name",
     "additional-tools-title": "Additional tools",
-    "one-way-routes": "Signle track routes",
+    "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",
-    "timetable-via": "ALL TIMETABLES",
+    "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",
-    "timetable-terminatingAt": "TERMINATES HERE",
+    "timetable-terminatingAt": "ENDS HERE",
     "timetable-issued-date": "Issued",
     "timetable-issued-by": " by:",
-    "timetable-issued-for": " for driver:",
+    "timetable-issued-for": " for:",
     "dispatcher-rate": "Rate:",
     "dispatcher-status-changes": "Status changes:",
     "req-level": "all dispatcher levels | dispatcher level {lvl} required | dispatcher level {lvl} required",
-    "history-list-empty": "No recorded scenery history!",
-    "forum-topic": "Official {name} forum topic",
+    "history-list-empty": "No saved scenery history!",
+    "forum-topic": "Scenery's 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": "place",
+      "dispatcher-rating": "Rating: {n}",
+      "duty-count": "No duties | 1 duty | Duties: {n}",
+      "duration": "Duration:",
+
+      "no-data-general": "No best scores for this scenery on the PL1 server!",
+      "no-data-current-hash": "No best scores for the current scenery hash on the PL1 server!"
+    }
   },
   "availability": {
     "title": "Availability",
@@ -565,21 +637,67 @@
     "terminated": "Timetable terminated",
     "begins": "BEGINS HERE",
     "terminates": "TERMINATES\nHERE",
-    "from": "FROM",
-    "to": "TO",
-    "desc-arriving": "The train is not here yet.\nIt's going to come from: <b>{prevStationName} (route {prevDepartureLine})</b>",
-    "desc-online": "The train is at the station.\nIt's going to leave to: <b>{nextStationName} (route {nextArrivalLine})</b>",
-    "desc-stopped": "The train is at the station and is stopped.\nIt's going to leave towards: <b>{nextStationName} (route {nextArrivalLine})</b>",
-    "desc-next-arrival": "Leaves towards: <b>{nextStationName} (route {nextArrivalLine})</b>",
-    "desc-departed": "The train is at the station and it's been departed.\nLeaves towards: <b>{nextStationName} (route {nextArrivalLine})</b>",
-    "desc-departed-ends": "The train is at the station and it's been departed.\nLeaves towards station: <b>{nextStationName}</b>",
-    "desc-departed-away": "The train has been departed to:\n<b>{nextStationName} (route {nextArrivalLine})</b>",
+    "from": "Arrives from",
+    "to": "Departs to",
+    "desc-beginning": "Outside scenery / begins here",
+    "desc-arriving": "Arrives from: <b><u>{prevStationName} ({prevDepartureLine})</u></b>",
+    "desc-online": "On scenery / direction: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
+    "desc-stopped": "On scenery - stopped / direction: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
+    "desc-next-arrival": "On scenery / direction: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
+    "desc-departed": "On scenery / departed to: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
+    "desc-departed-ends": "On scenery / departed to: <b><u>{nextStationName}</u></b>",
+    "desc-departed-away": "Departed to: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
     "desc-end": "The train terminates here",
     "desc-terminated": "The train has been terminated"
   },
-  "history": {
-    "title": "TIMETABLE JOURNAL",
-    "search-train": "Train no.",
-    "search-driver": "Driver name"
+  "profile": {
+    "journal-button": "PLAYER'S PROFILE",
+    "no-player-found": "Player not found! :/",
+    "return-to-main": "Return to the main site",
+
+    "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

@@ -1,4 +1,28 @@
 {
+  "welcome": {
+    "title": "Witaj na Stacjowniku!",
+    "app-desc": "{b1} to aplikacja stworzona dla symulatora {link}, której celem jest wspomaganie dyżurnego ruchu i maszynisty. Możesz sprawdzić tutaj kto i na jakiej scenerii obecnie pełni służbę, znaleźć maszynistę lub przejrzeć dziennik, który zawiera historię przeszłych dyżurów i rozkładów jazdy.",
+    "app-desc-b1": "Stacjownik",
+    "sceneries-header": "Scenerie",
+    "sceneries-desc": "W zakładce {b1} znajdziesz informacje o dyżurnych ruchu pełniących służby na wybranych sceneriach. Możesz również przeglądać wszystkie dostępne scenerie w symulatorze (w filtrach należy zaznaczyć opcję \"Wolna\", aby pokazać resztę niezajętych) i filtrować je pod względem wielu kryteriów, takich jak sterowanie, dodatkowe oprogramowanie, sygnalizacja, wymagany poziom dyżurnego czy szlaki. Aby wyświetlić detale danej scenerii, kliknij na nią w tabelce.",
+    "sceneries-desc-b1": "Scenerie",
+    "trains-header": "Pociągi",
+    "trains-desc": " Zakładka {b1} zawiera listę aktywnych maszynistów i rozkładów jazdy, które są obecnie realizowane na wybranym serwerze (wybór serwera znajduje się na górze strony). Listę można filtrować i sortować uwzględniając najważniejsze kryteria, takie jak nazwa maszynisty, numer pociągu lub detale rozkładu jazdy. Możesz również kliknąć na dany pociąg, aby wyświetlić dodatkowe informacje.",
+    "trains-desc-b1": "Pociągi",
+    "journal-header": "Dziennik",
+    "journal-desc": "{b1} to zakładka, w której znajdziesz historię dyżurów i rozkładów jazdy, obecnie jedynie z głównego serwera rozgrywki PL1. Możesz także wyszukać historię danego użytkownika używając dodatkowych filtrów.",
+    "journal-desc-b1": "Dziennik",
+    "other-apps": "Sprawdź także inne aplikacje stworzone z myślą ułatwienia rozgrywki w TD2:",
+    "pojazdownik-desc": "edytor składów online",
+    "generator-desc": "graficzny menadżer rozkazów pisemnych",
+    "srjp-desc": "służbowy rozkład jazdy pociągu",
+    "donation-info": "Jeśli doceniasz projekt Stacjownika jak i inne aplikacje mojego autorstwa, rozważ jego wsparcie finansowe - kliknij przycisk z {icon1}, aby dowiedzieć się więcej!",
+    "donation-info-icon1-text": "ikoną diamentu",
+    "discord-info": "Zapraszam także na oficjalnego {discord}, gdzie znajdziesz dedykowanego Stacjobota, za pomocą którego możesz wyszukiwać dodatkowe dane z symulatora niedostępne na tej stronie",
+    "discord-info-link-text": "Discorda Stacjownika",
+    "bottom-text": "Miłego korzystania\n~Spythere",
+    "button-confirm": "Zacznij korzystać z aplikacji!"
+  },
   "donations": {
     "button-title": "GROSZA DAJ",
     "header": "Grosza daj Stacjownikowi!",
@@ -18,7 +42,8 @@
     "action-paypal": "PRZELEJ PAYPALEM",
     "action-buycoffee": "POSTAW KAWĘ!",
     "dispatcher-message": "Dyżurny wspierający projekt Stacjownika!",
-    "driver-message": "Maszynista wspierający projekt Stacjownika!"
+    "driver-message": "Maszynista wspierający projekt Stacjownika!",
+    "creator-message": "Twórca projektu Stacjownik"
   },
   "warnings": {
     "TWR": "Pociąg z towarami niebezpiecznymi wysokiego ryzyka",
@@ -32,11 +57,12 @@
     "refresh": "ODŚWIEŻ"
   },
   "update": {
-    "title": "Aktualizacja Stacjownika!",
+    "title": "Stacjownik został zaktualizowany!",
     "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 <a href='https://github.com/Spythere/stacjownik' target='_blank'>GitHubie projektu</a>"
+    "info-2": "Pełny changelog dostępny na {link}",
+    "info-2-link-text": "GitHubie projektu"
   },
   "app": {
     "sceneries": "SCENERIE",
@@ -49,15 +75,14 @@
     "tooltip-driver-offline": "Maszynista offline",
     "tooltip-scenery-offline": "Sceneria offline",
     "pojazdownik-link-content": "POJAZDOWNIK",
-    "gnr-link-content": "GENERATOR <br> ROZKAZÓW PISEMNYCH"
-  },
-  "footer": {
-    "discord": "Serwer Discord Stacjownika"
+    "language-tooltip-content": "JĘZYK / LANGUAGE",
+    "gnr-link-content": "GENERATOR <br> ROZKAZÓW PISEMNYCH",
+    "discord-link-content": "SERWER DISCORD <br> STACJOWNIKA"
   },
   "categories": {
     "EI": "ekspres krajowy",
     "EC": "ekspres międzynarodowy",
-    "EN": "ekspres krajowy nocny",
+    "EN": "ekspres międzynarodowy nocny",
     "MP": "międzywojewódzki pospieszny",
     "MO": "międzywojewódzki osobowy",
     "MM": "międzynarodowy pospieszny",
@@ -115,7 +140,7 @@
     "title": "Sterowanie",
     "SPK": "SPK",
     "SCS": "SCS",
-    "SCS-SPK": "SCS/SPK",
+    "SCS-SPK": "SCS + SPK",
     "SPE": "SPE",
     "ręczne": "ręczne",
     "ręczne+SPK": "ręczne z SPK",
@@ -126,7 +151,7 @@
     "abbrevs": {
       "SPK": "SPK",
       "SCS": "SCS",
-      "SCS-SPK": "S/S",
+      "SCS-SPK": "S+S",
       "SPE": "SPE",
       "ręczne": "R",
       "ręczne+SPK": "R",
@@ -159,9 +184,11 @@
     "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",
@@ -170,6 +197,7 @@
     "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",
@@ -221,7 +249,9 @@
       "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",
@@ -245,6 +275,7 @@
     "SCS": "SCS",
     "SCS-R": "SCS + RĘCZNE",
     "SCS-M": "SCS + MECH.",
+    "SCS-SPK": "SCS + SPK",
     "SPE": "SPE",
     "manual": "RĘCZNE",
     "SUP": "SUP (RASP-UZK)",
@@ -264,30 +295,37 @@
     "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": {
-      "minLevel": "MIN. WYMAGANY POZIOM DYŻURNEGO",
-      "maxLevel": "MAKS. WYMAGANY POZIOM DYŻURNEGO",
-      "minVmax": "MIN. PRĘDKOŚĆ SZLAKOWA",
-      "maxVmax": "MAKS. PRĘDKOŚĆ SZLAKOWA",
-      "minOneWayCatenary": "SZLAKI JEDNOTOROWE ZELEKTR. (MINIMUM)",
-      "minOneWay": "SZLAKI JEDNOTOROWE NIEZELEKTR. (MINIMUM)",
-      "minTwoWayCatenary": "SZLAKI DWUTOROWE ZELEKTR. (MINIMUM)",
-      "minTwoWay": "SZLAKI DWUTOROWE NIEZELEKTR. (MINIMUM)",
-      "minOneWayCatenaryInt": "SZLAKI JEDNOTOROWE ZELEKTR. WEWNĘTRZNE (MINIMUM)",
-      "minOneWayInt": "SZLAKI JEDNOTOROWE NIEZELEKTR. WEWNĘTRZNE (MINIMUM)",
-      "minTwoWayCatenaryInt": "SZLAKI DWUTOROWE ZELEKTR. WEWNĘTRZNE (MINIMUM)",
-      "minTwoWayInt": "SZLAKI DWUTOROWE NIEZELEKTR. WEWNĘTRZNE (MINIMUM)"
+      "vMax": "PRĘDKOŚĆ SZLAKOWA",
+      "level": "WYMAGANY POZIOM DYŻURNEGO",
+      "routeOneWay": "SZLAKI 1-TOROWE NIEZELEKTR.",
+      "routeOneWayCatenary": "SZLAKI 1-TOROWE ZELEKTR.",
+      "routeTwoWayCatenary": "SZLAKI 2-TOROWE ZELEKTR.",
+      "routeTwoWay": "SZLAKI 2-TOROWE NIEZELEKTR.",
+      "routeOneWayInternalCatenary": "SZLAKI WEWN. 1-TOROWE ZELEKTR.",
+      "routeOneWayInternal": "SZLAKI WEWN. 1-TOROWE NIEZELEKTR.",
+      "routeTwoWayInternalCatenary": "SZLAKI WEWN. 2-TOROWE ZELEKTR.",
+      "routeTwoWayInternal": "SZLAKI WEWN. 2-TOROWE NIEZELEKTR."
     },
-    "sceneries-search": "WYSZUKAJ SCENERIĘ:",
-    "sceneries-placeholder": "Wpisz nazwę scenerii...",
-    "authors-search": "WYSZUKAJ AUTORA (uwzględnia inne filtry):",
-    "authors-placeholder": "Wpisz nick autora...",
+    "sceneries-placeholder": "Wyszukaj scenerię",
+    "line-numbers-placeholder": "Numery linii (oddzielone przecinkami)",
+    "authors-placeholder": "Autor scenerii",
+    "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"
@@ -298,6 +336,7 @@
       "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",
@@ -314,8 +353,10 @@
       "signals-type": "Sygnalizacja: ",
       "SBL": "Sceneria posiada SBL na szlakach: ",
       "SUP": "Wymaga programu SUP do kontroli systemu RASP-UZK",
-      "ASDEK": "Wymaga programu ASDEK do detekcji stanów awaryjnych taboru w ruchu",
+      "ASDEK": "Dostępny program ASDEK do detekcji stanów awaryjnych taboru w ruchu",
       "default": "Sceneria dostępna domyślnie w paczce z grą",
+      "nonDefault": "Sceneria dostępna do pobrania z forum symulatora",
+      "req-level": "ogólnodostępna | od {lvl} poz. DR | od {lvl} poz. DR",
       "non-public": "Sceneria niepubliczna",
       "unavailable": "Sceneria niedostępna",
       "abandoned": "Sceneria wycofana z rozgrywki",
@@ -375,7 +416,7 @@
     "last-seen-ago": "od {minutes} minut",
     "scenery-offline": "Przejazd offline",
     "timeout": "Wystąpił problem z aktualizacją rozkładów jazdy z SWDR",
-    "driver-journal-link": "DZIENNIK MASZYNISTY",
+    "driver-profile-link": "PROFIL GRACZA",
     "driver-srjp-link": "SRJP",
     "driver-return-link": "POWRÓT",
     "driver-not-found-header": "Nie znaleziono pociągu! :/",
@@ -385,15 +426,25 @@
     "driver-not-found-others": "Gracz {driver} jest online jako:",
     "driver-not-found-return": "WRÓĆ NA STRONĘ GŁÓWNĄ",
     "stock-copy": "SKOPIUJ SKŁAD",
-    "number-propositions": "ZAPROPONUJ NUMER",
+    "number-propositions": "PROPOZYCJE NUMERÓW I UWAG",
     "stock-clipboard-success": "Pomyślnie skopiowano skład w postaci tekstowej do schowka!",
     "stock-clipboard-failure": "Ups! Nie udało się skopiować składu do schowka! :/",
-    "number-propositions-header": "Wygeneruj propozycje numerów dla kategorii pociągu:",
+    "number-propositions-header": "Wygeneruj propozycje numerów dla pociągu kategorii:",
     "number-propositions-third-number": "Trzecia cyfra:",
     "number-propositions-last-nums": "{count} ostatnie cyfry z przedziału:",
     "number-propositions-title": "Propozycje:",
     "number-propositions-empty": "Brak propozycji dla wybranej kategorii! :/"
   },
+  "cargo-warnings": {
+    "title": "Dodatkowe uwagi przewozowe:",
+    "pn-innofreight": "PN: Innofreight C45: przekroczona skrajnia",
+    "twr-un1965": "TWR: UN1965 (LPG)",
+    "tn-un1965": "TN: brudne cysterny po UN1965",
+    "tn-un1202": "TN: UN1202 (olej napędowy)",
+    "tn-un1202-empty": "TN: brudne cysterny po UN1202",
+    "pn-military": "PN: transport wojskowy",
+    "pn-edk80": "PN: żuraw kolejowy EDK80"
+  },
   "train-stats": {
     "stats-button": "STATYSTYKI",
     "title": "STATYSTYKI AKTYWNYCH POCIĄGÓW",
@@ -505,7 +556,7 @@
     "no-users": "BRAK AKTYWNYCH GRACZY",
     "no-spawns": "BRAK OTWARTYCH SPAWNÓW",
     "no-scenery": "Ups! Ta sceneria nie istnieje!",
-    "return-btn": "Powrót",
+    "return-btn": "POWRÓT DO SCENERII",
     "history-btn": "Przejdź do widoku historii dyżurnych ruchu",
     "info-btn": "Wróć do widoku scenerii",
     "authors-title": "Autor scenerii | Autorzy scenerii",
@@ -515,27 +566,48 @@
     "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",
-    "timetable-via": "WSZYSTKIE RJ",
+    "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",
     "timetable-terminatingAt": "KOŃCZY BIEG",
-    "timetable-issued-date": "Wystawiony",
+    "timetable-issued-date": "Wystawiony: ",
     "timetable-issued-by": " przez:",
-    "timetable-issued-for": " dla maszynisty:",
+    "timetable-issued-for": " dla:",
     "dispatcher-rate": "Ocena:",
     "dispatcher-status-changes": "Zmiany statusów:",
     "req-level": "ogólnodostępna | minimum {lvl} poziom dyżurnego | minimum {lvl} poziom dyżurnego",
     "history-list-empty": "Brak historii dla tej scenerii!",
-    "forum-topic": "Oficjalny wątek scenerii {name}",
+    "forum-topic": "Wątek scenerii",
     "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": "miejsce",
+      "dispatcher-rating": "Ocena: {n}",
+      "duty-count": "Brak dyżurów | 1 dyżur | Dyżury: {n}",
+      "duration": "Czas:",
+
+      "no-data-general": "Brak zapisanych rekordów scenerii na serwerze PL1!",
+      "no-data-current-hash": "Brak zapisanych rekordów scenerii z obecnym hashem na serwerze PL1!"
+    }
   },
   "availability": {
     "title": "Dostępność",
@@ -551,19 +623,67 @@
     "terminated": "Rozkład jazdy zakończony",
     "begins": "ROZPOCZYNA\nBIEG",
     "terminates": "KOŃCZY BIEG",
-    "from": "Z",
-    "to": "DO",
-    "desc-arriving": "Pociągu nie ma jeszcze na tej scenerii.\nPrzyjedzie z: <b>{prevStationName} (szlak {prevDepartureLine})</b>",
-    "desc-online": "Pociąg jest na tej scenerii.\nOdjedzie w kierunku: <b>{nextStationName} (szlak {nextArrivalLine})</b>",
-    "desc-stopped": "Pociąg jest na tej scenerii i odbywa postój.\nOdjedzie w kierunku: <b>{nextStationName} (szlak {nextArrivalLine})</b>",
-    "desc-next-arrival": "Odjeżdża do:\n<b>{nextStationName} (szlak {nextArrivalLine})</b>",
-    "desc-departed": "Pociąg jest na tej scenerii i został odprawiony.\nOdjeżdża w kierunku: <b>{nextStationName} (szlak {nextArrivalLine})</b>",
-    "desc-departed-ends": "Pociąg jest na tej scenerii i został odprawiony.\nOdjechał w kierunku stacji: <b>{nextStationName}</b>",
-    "desc-departed-away": "Pociąg został odprawiony i odjechał do:\n<b>{nextStationName} (szlak {nextArrivalLine})</b>",
+    "from": "Przyjedzie z",
+    "to": "Odjeżdża do",
+    "desc-beginning": "Poza scenerią / rozpoczyna bieg",
+    "desc-arriving": "Przyjedzie z: <b><u>{prevStationName} ({prevDepartureLine})</u></b>",
+    "desc-online": "Na scenerii / kierunek: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
+    "desc-stopped": "Na scenerii - postój / kierunek: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
+    "desc-next-arrival": "Na scenerii / kierunek: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
+    "desc-departed": "Na scenerii / odprawiony do: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
+    "desc-departed-ends": "Na scenerii / odprawiony do: <b><u>{nextStationName}</u></b>",
+    "desc-departed-away": "Odprawiony do: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
     "desc-end": "Pociąg kończy bieg",
-    "desc-terminated": "Pociąg skończył bieg"
+    "desc-terminated": "Pociąg zakończył bieg"
   },
-  "history": {
-    "title": "DZIENNIK ROZKŁADÓW JAZDY"
+  "profile": {
+    "journal-button": "PROFIL GRACZA",
+    "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,5 +1,24 @@
 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',
@@ -10,7 +29,9 @@ export const sections = [
   'control',
   'blockades',
   'signals',
-  'addons'
+  'addons',
+  'externalRoutes',
+  'internalRoutes'
 ] as const;
 
 export const initFilters = {
@@ -31,15 +52,13 @@ export const initFilters = {
   mechanical: false,
   'SPK-M': false,
   'SCS-M': false,
+  'SCS-SPK': false,
   modern: false,
   semaphores: false,
   historical: false,
   mixed: false,
   SBL: false,
   PBL: false,
-  'include-selected': false,
-  'no-1track': false,
-  'no-2track': false,
   free: true,
   occupied: false,
   nonPublic: false,
@@ -59,31 +78,111 @@ 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,
-  minTwoWayCatenary: 0,
-  minOneWayInt: 0,
   minOneWayCatenaryInt: 0,
+  minOneWayInt: 0,
+  minTwoWay: 0,
+  minTwoWayCatenary: 0,
+  minTwoWayInt: 0,
   minTwoWayCatenaryInt: 0,
-  // minTwoWay: 0,
-  authors: ''
+  maxOneWay: 10,
+  maxOneWayCatenary: 10,
+  maxOneWayInt: 20,
+  maxOneWayCatenaryInt: 20,
+  maxTwoWay: 10,
+  maxTwoWayCatenary: 10,
+  maxTwoWayInt: 20,
+  maxTwoWayCatenaryInt: 20,
+  authors: '',
+  projects: '',
+  lines: ''
 };
 
-export const sliderStates = [
-  { id: 'maxVmax', minRange: 0, maxRange: 200, step: 10 },
-  { id: 'minVmax', minRange: 0, maxRange: 200, step: 10 },
-  { id: 'minLevel', minRange: 0, maxRange: 20, step: 1 },
-  { id: 'maxLevel', minRange: 0, maxRange: 20, step: 1 },
-  { id: 'minOneWay', minRange: 0, maxRange: 5, step: 1 },
-  { id: 'minOneWayCatenary', minRange: 0, maxRange: 5, step: 1 },
-  { id: 'minTwoWayCatenary', minRange: 0, maxRange: 5, step: 1 },
-  { id: 'minOneWayInt', minRange: 0, maxRange: 5, step: 1 },
-  { id: 'minOneWayCatenaryInt', minRange: 0, maxRange: 5, step: 1 },
-  { id: 'minTwoWayCatenaryInt', minRange: 0, maxRange: 5, step: 1 },
-  // { id: 'minTwoWay', minRange: 0, maxRange: 5, step: 1 },
-  // { id: 'minTwoWayInt', minRange: 0, maxRange: 5, step: 1 }
+export const sliderGroups: SliderGroup[] = [
+  'vMax',
+  'level',
+  'routeOneWayCatenary',
+  'routeOneWay',
+  'routeTwoWayCatenary',
+  'routeTwoWay',
+  'routeOneWayInternalCatenary',
+  'routeOneWayInternal',
+  'routeTwoWayInternalCatenary',
+  'routeTwoWayInternal'
 ];
 
+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];
 
@@ -95,9 +194,22 @@ export const filtersSections: Record<StationFilterSection, StationFilter[]> = {
   stationType: ['junction', 'nonJunction'],
   access: ['nonPublic', 'unavailable', 'abandoned'],
   addons: ['SUP', 'ASDEK', 'noSUP', 'noASDEK'],
-  control: ['SPK', 'SCS', 'SPE', 'SPK-M', 'SCS-M', 'mechanical', 'SPK-R', 'SCS-R', 'manual'],
+  control: [
+    'SPK',
+    'SCS',
+    'SPE',
+    'SCS-SPK',
+    'SPK-M',
+    'SCS-M',
+    'mechanical',
+    'SPK-R',
+    'SCS-R',
+    '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>) {
@@ -116,11 +228,12 @@ export function setupFilters(currentFilters: Record<string, any>) {
   });
 }
 
-export function getChangedFilters(currentFilters: Record<string, any>): string[] {  
+export function getChangedFilters(currentFilters: Record<string, any>): string[] {
   return (
     Object.keys(currentFilters).filter(
       (filterKey) =>
-        currentFilters[filterKey] !== initFilters[filterKey as keyof typeof initFilters]
+        currentFilters[filterKey].toString() !==
+        initFilters[filterKey as keyof typeof initFilters].toString()
     ) ?? []
   );
 }

src/managers/trainFilterManager.ts

@@ -43,7 +43,7 @@ function filterTrainList(
           return train.timetableData?.followingStops.some((stop) => stop.comments);
 
         case TrainFilterId.twr:
-          return !train.timetableData?.TWR;
+          return !train.timetableData?.twr;
 
         case TrainFilterId.pn:
           return !train.timetableData?.hasExtraDeliveries;
@@ -52,7 +52,7 @@ function filterTrainList(
           return !train.timetableData?.hasDangerousCargo;
 
         case TrainFilterId.common:
-          return train.timetableData?.SKR || train.timetableData?.TWR;
+          return train.timetableData?.twr;
 
         case TrainFilterId.passenger:
           return !/^[AMRE]\D{2}$/.test(train.timetableData?.category || '');