Merge pull request #120 from Spythere/development

v1.29.0
chore: added SRJP external link
2026-05-03 05:18:11 +00:00 · 2025-02-04 20:50:29 +01:00 · 2025-02-04 18:14:58 +01:00 · 2025-02-04 16:48:46 +01:00 · 2025-02-04 16:42:48 +01:00 · 2025-02-04 15:15:21 +01:00
115 changed files with 13169 additions and 4982 deletions
@@ -1,6 +1,3 @@
-# This file was auto-generated by the Firebase CLI
-# https://github.com/firebase/firebase-tools
-
 name: Deploy to Firebase Hosting on merge
 'on':
  push:
@@ -11,10 +8,10 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
-      - run: npm ci && npm run build
+      - run: yarn && yarn build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_STACJOWNIK_TD2 }}'
          channelId: live
-          projectId: stacjownik-td2
+          projectId: stacjownik-td2
@@ -9,7 +9,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
-      - run: npm ci && npm run build
+      - run: yarn && yarn build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
@@ -33,6 +33,10 @@ node_modules

 # Env
 .env
+.env.*

 .fake
-.ionide
+.ionide
+
+# api-mock
+/api-mock/endpoints/
@@ -0,0 +1,33 @@
+import { existsSync } from 'fs';
+import { mkdir, writeFile } from 'fs/promises';
+
+async function fetchJSONEndpointData(url, fileName) {
+  try {
+    const res = await fetch(url);
+    const data = await res.json();
+    await writeFile(`./endpoints/${fileName}`, JSON.stringify(data));
+
+    return true;
+  } catch (error) {
+    console.error(error);
+  }
+
+  return false;
+}
+
+async function main() {
+  if (!existsSync('endpoints')) await mkdir('endpoints');
+
+  Promise.all(
+    ['getActiveData', 'getDonators', 'getSceneries', 'getVehicles'].map((endpointName) =>
+      fetchJSONEndpointData(
+        `https://stacjownik.spythere.eu/api/${endpointName}`,
+        `${endpointName}.json`
+      )
+    )
+  ).then(() => {
+    console.log('Endpoints downloaded!');
+  });
+}
+
+main();
@@ -0,0 +1,28 @@
+import express from 'express';
+import path from 'path';
+import { cwd } from 'process';
+import cors from 'cors';
+
+const app = express();
+
+app.use(cors());
+
+app.get('/api/getActiveData', (_, res) => {
+  res.sendFile(path.join(cwd(), 'endpoints', 'getActiveData.json'));
+});
+
+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/getDonators', (_, res) => {
+  res.sendFile(path.join(cwd(), 'endpoints', 'getDonators.json'));
+});
+
+app.listen(3123, () => {
+  console.log('Mocking API server...');
+});
@@ -0,0 +1,18 @@
+{
+  "name": "api-mock",
+  "version": "1.0.0",
+  "description": "",
+  "type": "module",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node index.js",
+    "fetch": "node fetchEndpoints.js"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "cors": "^2.8.5",
+    "express": "^4.18.3"
+  }
+}
@@ -0,0 +1,481 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+accepts@~1.3.8:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.8.tgz#0bf0be125b67014adcb0b0921e62db7bffe16b2e"
+  integrity sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==
+  dependencies:
+    mime-types "~2.1.34"
+    negotiator "0.6.3"
+
+array-flatten@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
+  integrity sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==
+
+body-parser@1.20.3:
+  version "1.20.3"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.3.tgz#1953431221c6fb5cd63c4b36d53fab0928e548c6"
+  integrity sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==
+  dependencies:
+    bytes "3.1.2"
+    content-type "~1.0.5"
+    debug "2.6.9"
+    depd "2.0.0"
+    destroy "1.2.0"
+    http-errors "2.0.0"
+    iconv-lite "0.4.24"
+    on-finished "2.4.1"
+    qs "6.13.0"
+    raw-body "2.5.2"
+    type-is "~1.6.18"
+    unpipe "1.0.0"
+
+bytes@3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
+  integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
+
+call-bind@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.7.tgz#06016599c40c56498c18769d2730be242b6fa3b9"
+  integrity sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    set-function-length "^1.2.1"
+
+content-disposition@0.5.4:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.4.tgz#8b82b4efac82512a02bb0b1dcec9d2c5e8eb5bfe"
+  integrity sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==
+  dependencies:
+    safe-buffer "5.2.1"
+
+content-type@~1.0.4, content-type@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.5.tgz#8b773162656d1d1086784c8f23a54ce6d73d7918"
+  integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==
+
+cookie-signature@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
+  integrity sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==
+
+cookie@0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.6.0.tgz#2798b04b071b0ecbff0dbb62a505a8efa4e19051"
+  integrity sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==
+
+cors@^2.8.5:
+  version "2.8.5"
+  resolved "https://registry.yarnpkg.com/cors/-/cors-2.8.5.tgz#eac11da51592dd86b9f06f6e7ac293b3df875d29"
+  integrity sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==
+  dependencies:
+    object-assign "^4"
+    vary "^1"
+
+debug@2.6.9:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
+  dependencies:
+    ms "2.0.0"
+
+define-data-property@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
+  integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    gopd "^1.0.1"
+
+depd@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
+  integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==
+
+destroy@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
+  integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
+
+ee-first@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+  integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
+
+encodeurl@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+  integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
+
+encodeurl@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-2.0.0.tgz#7b8ea898077d7e409d3ac45474ea38eaf0857a58"
+  integrity sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==
+
+es-define-property@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.0.tgz#c7faefbdff8b2696cf5f46921edfb77cc4ba3845"
+  integrity sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==
+  dependencies:
+    get-intrinsic "^1.2.4"
+
+es-errors@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
+  integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
+
+escape-html@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+  integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
+
+etag@~1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+  integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==
+
+express@^4.18.3:
+  version "4.21.0"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.21.0.tgz#d57cb706d49623d4ac27833f1cbc466b668eb915"
+  integrity sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==
+  dependencies:
+    accepts "~1.3.8"
+    array-flatten "1.1.1"
+    body-parser "1.20.3"
+    content-disposition "0.5.4"
+    content-type "~1.0.4"
+    cookie "0.6.0"
+    cookie-signature "1.0.6"
+    debug "2.6.9"
+    depd "2.0.0"
+    encodeurl "~2.0.0"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    finalhandler "1.3.1"
+    fresh "0.5.2"
+    http-errors "2.0.0"
+    merge-descriptors "1.0.3"
+    methods "~1.1.2"
+    on-finished "2.4.1"
+    parseurl "~1.3.3"
+    path-to-regexp "0.1.10"
+    proxy-addr "~2.0.7"
+    qs "6.13.0"
+    range-parser "~1.2.1"
+    safe-buffer "5.2.1"
+    send "0.19.0"
+    serve-static "1.16.2"
+    setprototypeof "1.2.0"
+    statuses "2.0.1"
+    type-is "~1.6.18"
+    utils-merge "1.0.1"
+    vary "~1.1.2"
+
+finalhandler@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.3.1.tgz#0c575f1d1d324ddd1da35ad7ece3df7d19088019"
+  integrity sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==
+  dependencies:
+    debug "2.6.9"
+    encodeurl "~2.0.0"
+    escape-html "~1.0.3"
+    on-finished "2.4.1"
+    parseurl "~1.3.3"
+    statuses "2.0.1"
+    unpipe "~1.0.0"
+
+forwarded@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
+  integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
+
+fresh@0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+  integrity sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==
+
+function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
+
+get-intrinsic@^1.1.3, get-intrinsic@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd"
+  integrity sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==
+  dependencies:
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    has-proto "^1.0.1"
+    has-symbols "^1.0.3"
+    hasown "^2.0.0"
+
+gopd@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
+  integrity sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==
+  dependencies:
+    get-intrinsic "^1.1.3"
+
+has-property-descriptors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
+  integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
+  dependencies:
+    es-define-property "^1.0.0"
+
+has-proto@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.3.tgz#b31ddfe9b0e6e9914536a6ab286426d0214f77fd"
+  integrity sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==
+
+has-symbols@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
+  integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
+
+hasown@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+  dependencies:
+    function-bind "^1.1.2"
+
+http-errors@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-2.0.0.tgz#b7774a1486ef73cf7667ac9ae0858c012c57b9d3"
+  integrity sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==
+  dependencies:
+    depd "2.0.0"
+    inherits "2.0.4"
+    setprototypeof "1.2.0"
+    statuses "2.0.1"
+    toidentifier "1.0.1"
+
+iconv-lite@0.4.24:
+  version "0.4.24"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
+  integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3"
+
+inherits@2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+ipaddr.js@1.9.1:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
+  integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
+
+media-typer@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+  integrity sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==
+
+merge-descriptors@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.3.tgz#d80319a65f3c7935351e5cfdac8f9318504dbed5"
+  integrity sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==
+
+methods@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
+  integrity sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==
+
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@~2.1.24, mime-types@~2.1.34:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
+mime@1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
+  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+  integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==
+
+ms@2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+negotiator@0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
+  integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
+
+object-assign@^4:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
+
+object-inspect@^1.13.1:
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.2.tgz#dea0088467fb991e67af4058147a24824a3043ff"
+  integrity sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==
+
+on-finished@2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.4.1.tgz#58c8c44116e54845ad57f14ab10b03533184ac3f"
+  integrity sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==
+  dependencies:
+    ee-first "1.1.1"
+
+parseurl@~1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
+  integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
+
+path-to-regexp@0.1.10:
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.10.tgz#67e9108c5c0551b9e5326064387de4763c4d5f8b"
+  integrity sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==
+
+proxy-addr@~2.0.7:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
+  integrity sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==
+  dependencies:
+    forwarded "0.2.0"
+    ipaddr.js "1.9.1"
+
+qs@6.13.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.13.0.tgz#6ca3bd58439f7e245655798997787b0d88a51906"
+  integrity sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==
+  dependencies:
+    side-channel "^1.0.6"
+
+range-parser@~1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
+  integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
+
+raw-body@2.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.2.tgz#99febd83b90e08975087e8f1f9419a149366b68a"
+  integrity sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==
+  dependencies:
+    bytes "3.1.2"
+    http-errors "2.0.0"
+    iconv-lite "0.4.24"
+    unpipe "1.0.0"
+
+safe-buffer@5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+"safer-buffer@>= 2.1.2 < 3":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
+send@0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.19.0.tgz#bbc5a388c8ea6c048967049dbeac0e4a3f09d7f8"
+  integrity sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==
+  dependencies:
+    debug "2.6.9"
+    depd "2.0.0"
+    destroy "1.2.0"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    fresh "0.5.2"
+    http-errors "2.0.0"
+    mime "1.6.0"
+    ms "2.1.3"
+    on-finished "2.4.1"
+    range-parser "~1.2.1"
+    statuses "2.0.1"
+
+serve-static@1.16.2:
+  version "1.16.2"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.16.2.tgz#b6a5343da47f6bdd2673848bf45754941e803296"
+  integrity sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==
+  dependencies:
+    encodeurl "~2.0.0"
+    escape-html "~1.0.3"
+    parseurl "~1.3.3"
+    send "0.19.0"
+
+set-function-length@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
+  integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.2"
+
+setprototypeof@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
+  integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
+
+side-channel@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.6.tgz#abd25fb7cd24baf45466406b1096b7831c9215f2"
+  integrity sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==
+  dependencies:
+    call-bind "^1.0.7"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.4"
+    object-inspect "^1.13.1"
+
+statuses@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"
+  integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
+
+toidentifier@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
+  integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
+
+type-is@~1.6.18:
+  version "1.6.18"
+  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
+  integrity sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==
+  dependencies:
+    media-typer "0.3.0"
+    mime-types "~2.1.24"
+
+unpipe@1.0.0, unpipe@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+  integrity sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==
+
+utils-merge@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
+  integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
+
+vary@^1, vary@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
+  integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
@@ -19,10 +19,14 @@
    <link rel="manifest" href="/site.webmanifest" />
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
    <meta name="msapplication-TileColor" content="#da532c" />
-    <meta name="theme-color" content="#222222" />

    <link rel="icon" href="favicon.ico" />

+    <link rel="stylesheet" href="fa/css/fontawesome.css" />
+    <link rel="stylesheet" href="fa/css/brands.css" />
+    <link rel="stylesheet" href="fa/css/regular.css" />
+    <link rel="stylesheet" href="fa/css/solid.css" />
+
    <!-- Static OpenGraph meta -->
    <meta name="description" content="Pomocnik maszynisty i dyżurnego symulatora Train Driver 2" />
    <meta property="og:url" content="https://stacjownik-td2.web.app/" />
@@ -1,11 +1,15 @@
 {
  "name": "stacjownik",
-  "version": "1.25.0",
+  "version": "1.29.0",
  "private": true,
+  "type": "module",
  "scripts": {
-    "dev": "vite",
+    "dev": "vite --mode staging",
+    "dev:mock": "vite --mode development & yarn --cwd ./api-mock start",
+    "dev:fetch": "yarn --cwd ./api-mock fetch",
    "build": "vue-tsc --noEmit && vite build",
-    "deploy": "yarn build && firebase deploy --only hosting",
+    "deploy:prod": "yarn build && firebase deploy --only hosting",
+    "deploy:dev": "yarn build && firebase hosting:channel:deploy dev --expires 7d",
    "preview": "yarn build && vite preview",
    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
@@ -19,25 +23,20 @@
    "showdown": "^2.1.0",
    "vue": "^3.3.4",
    "vue-i18n": "^9.4.1",
-    "vue-router": "^4.2.4"
+    "vue-router": "^4.4.0"
  },
  "devDependencies": {
-    "@rushstack/eslint-patch": "^1.3.3",
-    "@types/node": "^20.6.2",
+    "@types/node": "^20.14.12",
    "@types/showdown": "^2.0.6",
    "@vite-pwa/assets-generator": "^0.2.4",
-    "@vitejs/plugin-vue": "^4.3.4",
-    "@vue/eslint-config-prettier": "^8.0.0",
-    "@vue/eslint-config-typescript": "^12.0.0",
-    "@vue/tsconfig": "^0.4.0",
-    "axios": "^1.5.0",
-    "eslint": "^8.49.0",
-    "eslint-plugin-vue": "^9.17.0",
-    "prettier": "^3.0.3",
-    "typescript": "^5.2.2",
-    "vite": "^4.4.9",
+    "@vitejs/plugin-vue": "^5.1.0",
+    "@vue/tsconfig": "^0.5.1",
+    "axios": "^1.7.2",
+    "prettier": "^3.3.3",
+    "typescript": "^5.5.4",
+    "vite": "^5.3.4",
    "vite-plugin-pwa": "^0.20.0",
-    "vue-tsc": "^1.8.11"
+    "vue-tsc": "^2.0.28"
  },
  "browserslist": [
    "> 1%",
@@ -0,0 +1,19 @@
+/*!
+ * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2024 Fonticons, Inc.
+ */
+:root, :host {
+  --fa-style-family-classic: 'Font Awesome 6 Free';
+  --fa-font-regular: normal 400 1em/1 'Font Awesome 6 Free'; }
+
+@font-face {
+  font-family: 'Font Awesome 6 Free';
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype"); }
+
+.far,
+.fa-regular {
+  font-weight: 400; }
@@ -0,0 +1,19 @@
+/*!
+ * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2024 Fonticons, Inc.
+ */
+:root, :host {
+  --fa-style-family-classic: 'Font Awesome 6 Free';
+  --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free'; }
+
+@font-face {
+  font-family: 'Font Awesome 6 Free';
+  font-style: normal;
+  font-weight: 900;
+  font-display: block;
+  src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }
+
+.fas,
+.fa-solid {
+  font-weight: 900; }
@@ -0,0 +1,3 @@
+<svg width="144" height="144" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M82.7143 61.3284L118.429 7L22 74.9104H68.4286L36.2857 137L122 61.3284H82.7143Z" fill="#FFF500"/>
+</svg>
@@ -0,0 +1,5 @@
+<svg width="144" height="144" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="9.20437" y="2.4661" width="36.5457" height="57.8287" rx="16.7449" transform="matrix(0.869001 -0.494811 0.505207 0.862998 50.006 87.4256)" stroke="white" stroke-width="13.3959"/>
+<rect x="9.20437" y="2.4661" width="36.5457" height="57.8287" rx="16.7449" transform="matrix(0.869001 -0.494811 0.505207 0.862998 14.9599 29.6039)" stroke="white" stroke-width="13.3959"/>
+<path d="M65.1133 58.145L79.8524 84.3103" stroke="white" stroke-width="10.0469" stroke-linecap="round" stroke-linejoin="bevel"/>
+</svg>
@@ -0,0 +1,5 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="512" height="512" rx="256" fill="#151414"/>
+<path d="M72.4253 291.986V279.965H120.201C123.283 279.965 124.824 278.424 124.824 275.342V264.246C124.824 261.266 123.54 259.571 120.971 259.16L90.9189 252.995C78.5898 250.529 72.4253 242.259 72.4253 228.183V219.553C72.4253 202.292 81.0557 193.662 98.3164 193.662H133.608L143.934 201.675V213.696H99.2411C96.1588 213.696 94.6177 215.237 94.6177 218.32V228.337C94.6177 231.214 95.9019 232.909 98.4705 233.423L128.523 239.433C140.852 241.899 147.016 250.17 147.016 264.246V274.109C147.016 291.37 138.386 300 121.125 300H82.7509L72.4253 291.986ZM167.651 300V193.662H219.433C236.694 193.662 245.324 202.292 245.324 219.553V237.122C245.324 249.964 240.546 257.978 230.991 261.163L248.406 295.377L245.786 300H226.676L207.874 263.013H189.843V300H167.651ZM189.843 242.978H218.508C221.591 242.978 223.132 241.437 223.132 238.355V218.32C223.132 215.237 221.591 213.696 218.508 213.696H189.843V242.978ZM262.96 274.109V253.766H285.153V275.342C285.153 278.424 286.694 279.965 289.776 279.965H310.736C313.818 279.965 315.359 278.424 315.359 275.342V213.696H286.386V193.662H337.551V274.109C337.551 291.37 328.921 300 311.66 300H288.852C271.591 300 262.96 291.37 262.96 274.109ZM361.948 300V193.662H413.731C430.991 193.662 439.622 202.292 439.622 219.553V240.204C439.622 257.465 430.991 266.095 413.731 266.095H384.141V300H361.948ZM384.141 246.06H412.806C415.888 246.06 417.429 244.519 417.429 241.437V218.32C417.429 215.237 415.888 213.696 412.806 213.696H384.141V246.06Z" fill="white"/>
+<path d="M304.958 332.848V322.831H348.418V332.848H332.236V376H321.14V332.848H304.958ZM356.61 376V322.831H376.799C391.285 322.831 398.529 330.074 398.529 344.561V354.27C398.529 368.757 391.285 376 376.799 376H356.61ZM367.706 365.983H377.415C384.093 365.983 387.432 362.643 387.432 355.965V342.866C387.432 336.187 384.093 332.848 377.415 332.848H367.706V365.983ZM407.35 376V358.662C407.35 351.624 410.432 347.489 416.597 346.256L430.852 343.405C432.136 343.148 432.779 342.3 432.779 340.862V335.16C432.779 333.619 432.008 332.848 430.467 332.848H408.891V326.838L414.054 322.831H430.929C439.56 322.831 443.875 327.146 443.875 335.776V340.785C443.875 347.823 440.792 351.958 434.628 353.191L420.372 356.042C419.088 356.299 418.446 357.147 418.446 358.585V365.983H443.875V376H407.35Z" fill="#E63E3E"/>
+</svg>
@@ -13,7 +13,7 @@
            "type": "image/png"
        }
    ],
-    "theme_color": "#ffc014",
+    "theme_color": "#4d4d4d",
    "background_color": "#4d4d4d",
    "display": "standalone",
    "start_url": "."
@@ -6,13 +6,7 @@
    />

    <Tooltip />
-
-    <transition name="modal-anim">
-      <keep-alive>
-        <TrainModal />
-      </keep-alive>
-    </transition>
-
+    
    <AppHeader :current-lang="currentLang" @change-lang="changeLang" />

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

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

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

-import { version } from '.././package.json';
+import { version } from '../package.json';
 import { Status } from './typings/common';
 import { useMainStore } from './store/mainStore';
 import { useApiStore } from './store/apiStore';
@@ -54,11 +39,11 @@ import { useTooltipStore } from './store/tooltipStore';
 import Clock from './components/App/Clock.vue';
 import StatusIndicator from './components/App/StatusIndicator.vue';
 import AppHeader from './components/App/AppHeader.vue';
-import TrainModal from './components/TrainsView/TrainModal.vue';
 import Tooltip from './components/Tooltip/Tooltip.vue';
 import UpdateCard from './components/App/UpdateCard.vue';

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

 const STORAGE_VERSION_KEY = 'app_version';

@@ -67,7 +52,7 @@ export default defineComponent({
    Clock,
    StatusIndicator,
    AppHeader,
-    TrainModal,
+    AppFooter,
    UpdateCard,
    Tooltip
  },
@@ -81,9 +66,7 @@ export default defineComponent({
    isUpdateCardOpen: false,

    currentLang: 'pl',
-    isOnProductionHost: location.hostname == 'stacjownik-td2.web.app',
-
-    nextUpdateTime: 0
+    isOnProductionHost: location.hostname == 'stacjownik-td2.web.app'
  }),

  created() {
@@ -92,26 +75,18 @@ export default defineComponent({

  async mounted() {
    window.addEventListener('mousemove', (e: MouseEvent) => this.tooltipStore.handle(e));
+    window.addEventListener('mousedown', () => this.tooltipStore.hide());
  },

  methods: {
    init() {
+      if (!this.isOnProductionHost) document.title = 'Stacjownik Dev';
+
      this.loadLang();
      this.setupOfflineHandling();
      this.checkAppVersion();

      this.apiStore.setupAPIData();
-      window.requestAnimationFrame(this.update);
-
-      if (!this.isOnProductionHost) document.title = 'Stacjownik Dev';
-    },
-
-    update(t: number) {
-      if (t >= this.nextUpdateTime) {
-        this.apiStore.fetchActiveData();
-        this.nextUpdateTime = t + 20000;
-      }
-      window.requestAnimationFrame(this.update);
    },

    async checkAppVersion() {
@@ -131,7 +106,8 @@ export default defineComponent({
        };

        this.isUpdateCardOpen =
-          storageVersion != version || import.meta.env.VITE_UPDATE_TEST === 'test';
+          (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}`);
      }
@@ -157,6 +133,7 @@ export default defineComponent({

    handleOnlineMode() {
      this.store.isOffline = false;
+      this.apiStore.dataStatuses.connection = Status.Data.Loading;

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

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

@@ -69,7 +74,10 @@ import Clock from './Clock.vue';
 import RegionDropdown from '../Global/RegionDropdown.vue';

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

-.actions {
+.actions-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0.5em;
@@ -43,7 +43,6 @@ export default defineComponent({

  width: 6em;
  height: 1em;
-  margin: 0.5em 0;

  .bar-fg,
  .bar-bg {
@@ -88,8 +88,9 @@ $unknown: #b93c3c;
 .status-badge {
  border-radius: 1em;
  font-weight: 500;
+  text-wrap: nowrap;

-  padding: 0.2em 0.55em;
+  padding: 0.2rem 0.55rem;

  background-color: $online;

@@ -106,13 +107,13 @@ $unknown: #b93c3c;

  &.no-limit {
    background-color: $no-limit;
-    font-size: 0.85em;
+    font-size: 0.9em;
  }

  &.not-signed,
  &.unavailable {
    background-color: $unav;
-    font-size: 0.85em;
+    font-size: 0.9em;
  }

  &.afk {
@@ -125,7 +126,7 @@ $unknown: #b93c3c;
    background-color: $no-space;
    border: 1px solid white;
    color: white;
-    font-size: 0.85em;
+    font-size: 0.9em;
  }

  &.unknown,
@@ -1,84 +1,13 @@
 <template>
-  <div class="stock-list">
-    <div v-if="tractionOnly">
-      <p>
-        {{ computedStockList[0].split(':')[0].split('_').splice(0, 2).join(' ') }}
-        {{ computedStockList[0].split(':')[1] }}
-      </p>
-
-      <img
-        class="traction-only"
-        :src="
-          getVehicleThumbnailURL(
-            computedStockList[0].split(':')[0],
-            /^EN/.test(computedStockList[0]) ? 'rb' : ''
-          )
-        "
-        @error="onImageError($event, computedStockList[0])"
-        width="300"
-        height="60"
-      />
-    </div>
-
-    <ul v-else>
-      <li v-for="(stockName, i) in computedStockList" :key="i">
-        <p>
-          {{ stockName.split(':')[0].split('_').splice(0, 3).join(' ') }}
-          <div v-if="stockName.split(':')[1]">({{ stockName.split(':')[1] }})</div>
-        </p>
-
-        <span>
-          <img
-            :data-mouseover="stockName"
-            data-tooltip-type="VehiclePreviewTooltip"
-            :data-tooltip-content="stockName"
-            :src="
-              getVehicleThumbnailURL(stockName.split(':')[0], /^EN/.test(stockName) ? 'rb' : '')
-            "
-            @error="onImageError($event, stockName)"
-            @click.stop="() => {}"
-            width="400"
-            height="60"
-          />
-
-          <!-- /// Manualne dodawanie miniaturek członów dla kibelków /// -->
-          <img
-            :data-mouseover="stockName"
-            data-tooltip-type="VehiclePreviewTooltip"
-            :data-tooltip-content="stockName.split(':')[0]"
-            v-if="/^(EN|2EN)/.test(stockName)"
-            :src="getVehicleThumbnailURL(stockName, 's')"
-            @error="
-              (event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-s.png')
-            "
-            @click.stop="() => {}"
-          />
-
-          <img
-            :data-mouseover="stockName"
-            data-tooltip-type="VehiclePreviewTooltip"
-            :data-tooltip-content="stockName.split(':')[0]"
-            v-if="/^EN71/.test(stockName)"
-            :src="getVehicleThumbnailURL(stockName, 's')"
-            @error="
-              (event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-s.png')
-            "
-            @click.stop="() => {}"
-          />
-
-          <img
-            :data-mouseover="stockName"
-            data-tooltip-type="VehiclePreviewTooltip"
-            :data-tooltip-content="stockName.split(':')[0]"
-            v-if="/^(EN|2EN)/.test(stockName)"
-            :src="getVehicleThumbnailURL(stockName, 'ra')"
-            @error="
-              (event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-ra.png')
-            "
-            @click.stop="() => {}"
-          />
-          <!-- ///  -->
-        </span>
+  <div class="list-wrapper">
+    <ul class="stock-list">
+      <li v-for="({ images, imagesFallbacks, vehicleString }, i) in thumbnailNames">
+        <VehicleThumbnail
+          :key="i"
+          :vehicle-string="vehicleString"
+          :images="images"
+          :image-fallbacks="imagesFallbacks"
+        />
      </li>
    </ul>
  </div>
@@ -87,8 +16,11 @@
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
 import { useApiStore } from '../../store/apiStore';
+import VehicleThumbnail from './VehicleThumbnail.vue';

 export default defineComponent({
+  components: { VehicleThumbnail },
+
  props: {
    trainStockList: {
      type: Array as PropType<string[]>,
@@ -109,71 +41,126 @@ export default defineComponent({
  computed: {
    computedStockList() {
      return this.tractionOnly ? this.trainStockList.slice(0, 1) : this.trainStockList;
-    }
-  },
-
-  methods: {
-    getVehicleThumbnailURL(locoType: string, suffix?: string) {
-      return `https://static.spythere.eu/thumbnails/${locoType}${suffix}.png`;
    },

-    onImageError(event: Event, stockName: string) {
-      let fallbackName = '';
+    thumbnailNames() {
+      return (this.tractionOnly ? this.trainStockList.slice(0, 1) : this.trainStockList)
+        .filter((v) => v.length != 0)
+        .map((vehicleString) => {
+          const [vehicleName] = vehicleString.split(':');

-      const isLoco = /.-\d{3}/.test(stockName);
+          const vehicleThumbnailData = {
+            images: [] as string[],
+            imagesFallbacks: [] as string[],
+            vehicleName,
+            vehicleString
+          };

-      if (isLoco) {
-        if (/^\d?EN\d{2}/.test(stockName)) fallbackName = 'loco-ezt';
-        else if (/^SN\d{2}/.test(stockName)) fallbackName = 'loco-szt';
-        else if (/^\d{0,}?E/.test(stockName)) fallbackName = 'loco-e';
-        else fallbackName = 'loco-s';
-      } else {
-        const isCarPassenger = /(\d{3}a|(Bau|Gor)\d{2}|304C)_/.test(stockName);
+          // Generowanie członów EN57
+          if (vehicleName.startsWith('EN57')) {
+            vehicleThumbnailData['images'] = [
+              vehicleName + 'ra',
+              vehicleName + 's',
+              vehicleName + 'rb'
+            ];
+            vehicleThumbnailData['imagesFallbacks'] = [
+              'unknown_ezt-ra',
+              'unknown_ezt-s',
+              'unknown_ezt-rb'
+            ];
+          }
+          // Generowanie członów EN71
+          else if (vehicleName.startsWith('EN71')) {
+            vehicleThumbnailData['images'] = [
+              vehicleName + 'ra',
+              vehicleName + 'sa',
+              vehicleName + 'sb',
+              vehicleName + 'rb'
+            ];
+            vehicleThumbnailData['imagesFallbacks'] = [
+              'unknown_ezt-ra',
+              'unknown_ezt-sa',
+              'unknown_ezt-sb',
+              'unknown_ezt-rb'
+            ];
+          }
+          // Generowanie pojazdów i członów 2EN57
+          else if (vehicleString.startsWith('2EN57')) {
+            const [firstVehicleNumber, secondVehicleNumber] = vehicleString
+              .replace('2EN57-', '')
+              .split('+');

-        fallbackName += 'car-';
-        fallbackName += isCarPassenger ? 'passenger' : 'cargo';
-      }
+            vehicleThumbnailData['images'] = [
+              `EN57-${firstVehicleNumber}ra`,
+              `EN57-${firstVehicleNumber}s`,
+              `EN57-${firstVehicleNumber}rb`,
+              `EN57-${secondVehicleNumber}ra`,
+              `EN57-${secondVehicleNumber}s`,
+              `EN57-${secondVehicleNumber}rb`
+            ];

-      (event.target as HTMLImageElement).src = `/images/icon-${fallbackName}.png`;
+            vehicleThumbnailData['imagesFallbacks'] = [
+              'unknown_ezt-ra',
+              'unknown_ezt-s',
+              'unknown_ezt-rb',
+              'unknown_ezt-ra',
+              'unknown_ezt-s',
+              'unknown_ezt-rb'
+            ];
+          }
+          // Generowanie członów Gor77
+          else if (vehicleString.startsWith('Gor77')) {
+            vehicleThumbnailData['images'] = [
+              vehicleName + '-A',
+              vehicleName + '-B',
+              vehicleName + '-C',
+              vehicleName + '-D'
+            ];
+            vehicleThumbnailData['imagesFallbacks'] = [
+              'unknown_Gor77-A',
+              'unknown_Gor77-B',
+              'unknown_Gor77-C',
+              'unknown_Gor77-D'
+            ];
+          }
+          // Generowanie członów ET41
+          else if (vehicleString.startsWith('ET41')) {
+            vehicleThumbnailData['images'] = [vehicleName + '-A', vehicleName + '-B'];
+            vehicleThumbnailData['imagesFallbacks'] = ['unknown_ET41-A', 'unknown_ET41-B'];
+          }
+          // Generowanie pozostałych pojazdów
+          else {
+            let fallbackVehicleImage = 'unknown_cargo';
+
+            if (/^(EP|EU|ET|201E)/.test(vehicleName)) fallbackVehicleImage = 'unknown_train';
+            else if (/^(SM42)/.test(vehicleName)) fallbackVehicleImage = 'unknown_SM42';
+            else if (/(\d{3}a|(Bau|Gor)\d{2}|304C)_/.test(vehicleName))
+              fallbackVehicleImage = 'unknown_passenger';
+
+            vehicleThumbnailData['images'] = [vehicleName];
+            vehicleThumbnailData['imagesFallbacks'] = [fallbackVehicleImage];
+          }
+
+          if (this.tractionOnly) vehicleThumbnailData['images'].length = 1;
+
+          return vehicleThumbnailData;
+        });
    }
  }
 });
 </script>

 <style lang="scss" scoped>
-.stock-list {
+
+.list-wrapper {
  display: flex;
  justify-content: center;
 }

-.stock-list ul {
+.stock-list {
  display: flex;
  align-items: flex-end;
  overflow: auto;
  margin: 0 auto;
-  padding: 1em 0;
-}
-
-ul > li > span {
-  display: flex;
-  align-items: flex-end;
-  cursor: crosshair;
-}
-
-img {
-  max-height: 60px;
-  width: auto;
-  height: auto;
-}
-
-img.traction-only {
-  max-width: 100%;
-}
-
-p {
-  text-align: center;
-  color: #aaa;
-  font-size: 0.95em;
-  margin-bottom: 1em;
 }
 </style>
@@ -0,0 +1,81 @@
+<template>
+  <div class="vehicle-thumbnail" :data-load-status="imgStatus" ref="thumbRef">
+    <div class="stock-text">
+      <div>{{ vehicleName }}</div>
+      <small v-if="vehicleCargo">({{ vehicleCargo }})</small>
+    </div>
+
+    <div class="stock-images">
+      <img
+        v-for="(thumbnailImage, imageIndex) in images"
+        :src="`https://stacjownik.spythere.eu/static/thumbnails/${thumbnailImage}.png`"
+        height="60"
+        loading="lazy"
+        data-tooltip-type="VehiclePreviewTooltip"
+        :data-tooltip-content="vehicleString"
+        @error="onImageError($event, imageFallbacks[imageIndex])"
+        @load="onImageLoad"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+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 }
+});
+
+const thumbRef = ref(null) as Ref<HTMLElement | null>;
+const imgStatus = ref('loading');
+
+const vehicleName = computed(() => props.vehicleString.split(':')[0].replace(/_/g, ' '));
+const vehicleCargo = computed(() => props.vehicleString.split(':')[1]);
+
+function onImageError(event: Event, fallbackImage: string) {
+  (event.target as HTMLImageElement).src = `/images/${fallbackImage}.png`;
+  imgStatus.value = 'error';
+}
+
+function onImageLoad() {
+  if (imgStatus.value != 'error') {
+    imgStatus.value = 'loaded';
+  }
+
+  if (thumbRef.value) thumbRef.value.style.opacity = '1';
+}
+</script>
+
+<style lang="scss" scoped>
+.vehicle-thumbnail {
+  
+  position: relative;
+  opacity: 0;
+  transition: opacity 100ms ease-in-out;
+
+  &[data-load-status='loading'] {
+    min-height: 60px;
+    min-width: 200px;
+  }
+}
+
+.stock-text {
+  text-align: center;
+  color: #aaa;
+  font-size: 0.9em;
+  margin-bottom: 0.25em;
+  padding: 0.25em 0;
+}
+
+.stock-images {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  cursor: crosshair;
+
+  padding: 0.5em 0;
+}
+</style>
@@ -1,29 +1,28 @@
 <template>
  <section class="daily-stats">
    <span :data-active="statsStatus">
-      <span class="stats-list">
-        <h3>
-          {{ $t('journal.daily-stats.title') }}
-          <b class="text--primary">{{ new Date().toLocaleDateString($i18n.locale) }}</b>
-        </h3>
+      <h3>
+        {{ $t('journal.daily-stats.title') }}
+        <b class="text--primary">{{ new Date().toLocaleDateString($i18n.locale) }}</b>
+      </h3>

-        <hr class="header-separator" />
+      <hr class="header-separator" />

-        <b v-if="statsStatus == Status.Data.Loading">
-          {{ $t('app.loading') }}
-        </b>
+      <b v-if="statsStatus == Status.Data.Loading">
+        {{ $t('app.loading') }}
+      </b>

-        <b class="text--error" v-else-if="statsStatus == Status.Data.Error">
-          {{ $t('journal.stats-error') }}
-        </b>
+      <b class="text--error" v-else-if="statsStatus == Status.Data.Error">
+        {{ $t('journal.stats-error') }}
+      </b>

-        <b v-else-if="topDispatchers.length == 0">
-          {{ $t('journal.daily-stats.info') }}
-        </b>
+      <b v-else-if="topDispatchers.length == 0">
+        {{ $t('journal.daily-stats.info') }}
+      </b>

-        <div v-else>
-          <div v-if="stats.totalTimetables">
-            &bull;
+      <div v-else>
+        <ul class="stats-list">
+          <li v-if="stats.totalTimetables">
            <i18n-t keypath="journal.daily-stats.total">
              <template #count>
                <b class="text--primary">
@@ -36,10 +35,9 @@
                <b class="text--primary"> {{ stats.distanceSum?.toFixed(2) }} km</b>
              </template>
            </i18n-t>
-          </div>
+          </li>

-          <div v-if="stats.maxTimetable">
-            &bull;
+          <li v-if="stats.maxTimetable">
            <i18n-t keypath="journal.daily-stats.longest">
              <template #id>
                <router-link :to="`/journal/timetables?search-train=%23${stats.maxTimetable.id}`">
@@ -60,10 +58,9 @@
                <b class="text--primary">{{ stats.maxTimetable.routeDistance }} km</b>
              </template>
            </i18n-t>
-          </div>
+          </li>

-          <div v-if="topDispatchers.length == 1">
-            &bull;
+          <li v-if="topDispatchers.length == 1">
            <i18n-t keypath="journal.daily-stats.most-active-dr">
              <template #dispatcher>
                <router-link
@@ -79,10 +76,9 @@
                </b>
              </template>
            </i18n-t>
-          </div>
+          </li>

-          <div v-if="topDispatchers.length > 1">
-            &bull;
+          <li v-if="topDispatchers.length > 1">
            <i18n-t keypath="journal.daily-stats.most-active-dr-many">
              <template #dispatchers>
                <span v-for="(disp, i) in topDispatchers" :key="i">
@@ -103,10 +99,9 @@
                </b>
              </template>
            </i18n-t>
-          </div>
+          </li>

-          <div v-if="stats.longestDuties.length > 0">
-            &bull;
+          <li v-if="stats.longestDuties.length > 0">
            <i18n-t keypath="journal.daily-stats.longest-duties">
              <template #dispatcher>
                <router-link
@@ -122,10 +117,9 @@
                {{ calculateDuration(stats.longestDuties[0].duration) }}
              </template>
            </i18n-t>
-          </div>
+          </li>

-          <div v-if="stats.mostActiveDrivers.length > 0">
-            &bull;
+          <li v-if="stats.mostActiveDrivers.length > 0">
            <i18n-t keypath="journal.daily-stats.most-active-driver">
              <template #driver>
                <router-link
@@ -138,30 +132,30 @@
                <b class="text--primary">{{ stats.mostActiveDrivers[0].distance.toFixed(2) }} km</b>
              </template>
            </i18n-t>
-          </div>
+          </li>
+        </ul>

-          <hr class="section-separator" />
+        <hr class="section-separator" />

-          <div class="stats-badges">
-            <span
-              class="stat-badge"
-              v-for="key in [
-                'rippedSwitches',
-                'derailments',
-                'skippedStopSignals',
-                'radioStops',
-                'kills'
-              ]"
-              :key="key"
-            >
-              <span>{{ $t(`journal.daily-stats.${key}`) }}</span>
-              <span>{{
-                Object.entries(stats.globalDiff).find(([k, v]) => k == key)?.[1] || '--'
-              }}</span>
+        <div class="stats-badges">
+          <span
+            class="badge stat-badge"
+            v-for="key in [
+              'rippedSwitches',
+              'derailments',
+              'skippedStopSignals',
+              'radioStops',
+              'kills'
+            ]"
+            :key="key"
+          >
+            <span>{{ $t(`journal.daily-stats.${key}`) }}</span>
+            <span>
+              {{ Object.entries(stats.globalDiff).find(([k, v]) => k == key)?.[1] || '--' }}
            </span>
-          </div>
+          </span>
        </div>
-      </span>
+      </div>
    </span>
  </section>
 </template>
@@ -178,7 +172,6 @@ export default defineComponent({
  name: 'journal-daily-stats',

  mixins: [dateMixin],
-  // emits: ['toggleStatsOpen'],

  data() {
    return {
@@ -193,7 +186,6 @@ export default defineComponent({

  activated() {
    this.startFetchingDailyStats();
-    // this.$emit('toggleStatsOpen', true);
  },

  deactivated() {
@@ -249,14 +241,24 @@ export default defineComponent({
 .daily-stats {
  text-align: left;
 }
+
 .daily-stats > span[data-active='0'] {
  opacity: 0.75;
 }

+ul.stats-list {
+  list-style: disc;
+  padding: 0 1em;
+}
+
 .stats-list a {
  text-decoration: underline;
 }

+.stats-list > li {
+  margin: 0.25em 0;
+}
+
 .stats-badges {
  display: flex;
  flex-wrap: wrap;
@@ -0,0 +1,217 @@
+<template>
+  <li class="dispatcher-history-entry">
+    <div class="entry-info">
+      <span>
+        <span>
+          <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">
+          <span
+            v-if="apiStore.donatorsData.includes(entry.dispatcherName)"
+            data-tooltip-type="DonatorTooltip"
+            :data-tooltip-content="$t('donations.dispatcher-message')"
+          >
+            <router-link
+              class="text--donator"
+              :to="`/journal/dispatchers?search-dispatcher=${entry.dispatcherName}`"
+            >
+              {{ entry.dispatcherName }}
+            </router-link>
+          </span>
+
+          <router-link
+            v-else
+            :to="`/journal/dispatchers?search-dispatcher=${entry.dispatcherName}`"
+          >
+            {{ entry.dispatcherName }}
+          </router-link>
+        </b>
+
+        <div>
+          <span v-if="entry.timestampTo">
+            <b>{{ $d(entry.timestampFrom) }}</b>
+            {{ timestampToString(entry.timestampFrom) }}
+            -
+            <b
+              v-if="
+                new Date(entry.timestampFrom).getDate() != new Date(entry.timestampTo).getDate()
+              "
+            >
+              {{ $d(entry.timestampTo) }}
+            </b>
+            {{ timestampToString(entry.timestampTo) }} ({{
+              calculateDuration(entry.currentDuration)
+            }})
+          </span>
+
+          <router-link
+            :to="`/scenery?station=${entry.stationName}`"
+            class="dispatcher-online"
+            v-else
+          >
+            {{ $t('journal.online-since') }}
+            <b>
+              {{
+                new Date().getDate() != new Date(entry.timestampFrom).getDate()
+                  ? $d(entry.timestampFrom)
+                  : ''
+              }}
+              {{ timestampToString(entry.timestampFrom) }}
+            </b>
+            ({{ calculateDuration(entry.currentDuration) }})
+          </router-link>
+        </div>
+      </span>
+
+      <span class="entry-info-right">
+        <div>
+          <span>
+            {{ $t('scenery.dispatcher-rate') }}
+            <b class="text--primary"> {{ entry.dispatcherRate }}</b>
+          </span>
+          <button class="btn btn--option" @click="toggleExtraInfo">
+            {{ $t('scenery.dispatcher-status-changes') }}
+            <b class="text--primary">{{ entry.statusHistory.length }}</b>
+          </button>
+        </div>
+
+        <b class="region-badge" :aria-describedby="entry.region">
+          REGION: {{ regions.find((r) => r.id == entry.region)?.name }}
+        </b>
+      </span>
+    </div>
+
+    <div class="entry-extra" v-if="showExtraInfo">
+      <ul class="status-list">
+        <li v-for="statusItem in entry.statusHistory">
+          <b style="margin-right: 0.5em">{{
+            timestampToString(parseInt(statusItem.split('@')[0]))
+          }}</b>
+
+          <StationStatusBadge
+            :dispatcher-status="Number(statusItem.split('@')[1])"
+            :is-online="true"
+          />
+        </li>
+      </ul>
+    </div>
+  </li>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { regions } from '../../../data/options.json';
+import { API } from '../../../typings/api';
+import dateMixin from '../../../mixins/dateMixin';
+import styleMixin from '../../../mixins/styleMixin';
+import { useApiStore } from '../../../store/apiStore';
+import StationStatusBadge from '../../Global/StationStatusBadge.vue';
+
+export default defineComponent({
+  props: {
+    entry: {
+      type: Object as PropType<API.DispatcherHistory.Data>,
+      required: true
+    },
+    showExtraInfo: {
+      type: Boolean,
+      required: true
+    }
+  },
+
+  components: { StationStatusBadge },
+  mixins: [dateMixin, styleMixin],
+  emits: ['toggleShowExtraInfo'],
+
+  data() {
+    return {
+      regions,
+      apiStore: useApiStore()
+    };
+  },
+
+  methods: {
+    toggleExtraInfo() {
+      this.$emit('toggleShowExtraInfo', this.entry.id);
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../../styles/responsive.scss';
+@import '../../../styles/badge.scss';
+
+.region-badge {
+  padding: 0 0.25em;
+}
+
+.level-badge {
+  text-align: center;
+  display: inline-block;
+  line-height: 1.6em;
+}
+
+.dispatcher-online {
+  color: springgreen;
+}
+
+.dispatcher-history-entry {
+  background-color: #1a1a1a;
+  padding: 1em;
+}
+
+.entry-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  line-height: 1.75em;
+  gap: 0.5em;
+}
+
+.entry-info-right {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  text-align: center;
+  gap: 1em;
+}
+
+.entry-extra {
+  margin-top: 1em;
+}
+
+.status-list {
+  display: flex;
+  overflow: auto;
+  gap: 0.5em;
+}
+
+.status-list > li {
+  background-color: #313131;
+  padding: 0.2rem 0 0.2rem 0.5em;
+  margin: 0.5em 0;
+  border-radius: 1em;
+}
+
+@include smallScreen {
+  .entry-info {
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+  }
+}
+</style>
@@ -16,17 +16,17 @@
      <hr class="header-separator" />

      <div class="info-stats">
-        <span class="stat-badge" v-if="stats.services">
+        <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="stat-badge" v-if="stats.services">
+        <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="stat-badge" v-if="stats.services">
+        <span class="badge stat-badge" v-if="stats.services">
          <span>{{ $t('journal.dispatcher-stats.service-avg') }}</span>
          <span>{{ calculateDuration(stats.services.durationAvg) }}</span>
        </span>
@@ -35,22 +35,22 @@
      <hr class="section-separator" />

      <div class="info-stats">
-        <span class="stat-badge" v-if="stats.issuedTimetables">
+        <span class="badge stat-badge" v-if="stats.issuedTimetables">
          <span>{{ $t('journal.dispatcher-stats.timetables-count') }}</span>
          <span>{{ stats.issuedTimetables.count }}</span>
        </span>

-        <span class="stat-badge" v-if="stats.issuedTimetables">
+        <span class="badge stat-badge" v-if="stats.issuedTimetables">
          <span>{{ $t('journal.dispatcher-stats.timetables-sum') }}</span>
          <span>{{ stats.issuedTimetables.distanceSum.toFixed(2) }}km</span>
        </span>

-        <span class="stat-badge" v-if="stats.issuedTimetables">
+        <span class="badge stat-badge" v-if="stats.issuedTimetables">
          <span>{{ $t('journal.dispatcher-stats.timetables-max') }}</span>
          <span>{{ stats.issuedTimetables.distanceMax.toFixed(2) }}km</span>
        </span>

-        <span class="stat-badge" v-if="stats.issuedTimetables">
+        <span class="badge stat-badge" v-if="stats.issuedTimetables">
          <span>{{ $t('journal.dispatcher-stats.timetables-avg') }}</span>
          <span>{{ stats.issuedTimetables.distanceAvg.toFixed(2) }}km</span>
        </span>
@@ -1,140 +1,59 @@
 <template>
-  <transition name="status-anim" mode="out-in">
-    <div :key="dataStatus">
-      <div class="journal_warning" v-if="store.isOffline">
-        {{ $t('app.offline') }}
-      </div>
-
-      <Loading v-else-if="dataStatus == Status.Data.Loading" />
-
-      <div v-else-if="dataStatus == Status.Data.Error" class="journal_warning error">
-        {{ $t('app.error') }}
-      </div>
-
-      <div class="journal_warning" v-else-if="dispatcherHistory.length == 0">
-        {{ $t('app.no-result') }}
-      </div>
-
-      <div v-else>
-        <table class="dispatchers-table">
-          <thead>
-            <th>{{ $t('journal.history-name') }}</th>
-            <th>{{ $t('journal.history-hash') }}</th>
-            <th>{{ $t('journal.history-dispatcher') }}</th>
-            <th>{{ $t('journal.history-level') }}</th>
-            <th>{{ $t('journal.history-rate') }}</th>
-            <th>{{ $t('journal.history-region') }}</th>
-            <th>{{ $t('journal.history-date') }}</th>
-          </thead>
-
-          <tbody>
-            <transition-group name="list-anim">
-              <tr v-for="historyItem in dispatcherHistory" :key="historyItem.id">
-                <td>
-                  <router-link
-                    :to="`/journal/dispatchers?search-station=${historyItem.stationName}`"
-                  >
-                    <b>{{ historyItem.stationName }}</b>
-                  </router-link>
-                </td>
-                <td>#{{ historyItem.stationHash }}</td>
-                <td>
-                  <router-link
-                    :to="`/journal/dispatchers?search-dispatcher=${historyItem.dispatcherName}`"
-                  >
-                    <b
-                      v-if="apiStore.donatorsData.includes(historyItem.dispatcherName)"
-                      class="text--donator"
-                      :title="$t('donations.dispatcher-message')"
-                    >
-                      {{ historyItem.dispatcherName }}
-                    </b>
-
-                    <b v-else>
-                      {{ historyItem.dispatcherName }}
-                    </b>
-                  </router-link>
-                </td>
-                <td>
-                  <b
-                    v-if="historyItem.dispatcherLevel !== null"
-                    class="level-badge dispatcher"
-                    :style="
-                      calculateExpStyle(
-                        historyItem.dispatcherLevel,
-                        historyItem.dispatcherIsSupporter
-                      )
-                    "
-                  >
-                    {{ historyItem.dispatcherLevel >= 2 ? historyItem.dispatcherLevel : 'L' }}
-                  </b>
-                </td>
-                <td class="text--primary">
-                  <b>{{ historyItem.dispatcherRate }}</b>
-                </td>
-                <td>
-                  <b class="region-badge" :aria-describedby="historyItem.region">{{
-                    regions.find((r) => r.id == historyItem.region)?.value || '???'
-                  }}</b>
-                </td>
-                <td style="min-width: 200px" class="time">
-                  <span v-if="historyItem.timestampTo" class="text--offline">
-                    <b>{{ $d(historyItem.timestampFrom) }}</b>
-                    {{ timestampToString(historyItem.timestampFrom) }}
-                    - {{ timestampToString(historyItem.timestampTo) }} ({{
-                      calculateDuration(historyItem.currentDuration)
-                    }})
-                  </span>
-                  <span class="dispatcher-online" v-else>
-                    <b class="text--online">
-                      <router-link :to="`/scenery?station=${historyItem.stationName}`">{{
-                        $t('journal.online-since')
-                      }}</router-link>
-                      {{ timestampToString(historyItem.timestampFrom) }}
-                    </b>
-                    ({{ calculateDuration(historyItem.currentDuration) }})
-                  </span>
-                </td>
-              </tr>
-            </transition-group>
-          </tbody>
-        </table>
-
-        <AddDataButton
-          :list="dispatcherHistory"
-          :scrollDataLoaded="scrollDataLoaded"
-          :scrollNoMoreData="scrollNoMoreData"
-          @addHistoryData="addHistoryData"
-        />
-      </div>
-
-      <div class="journal_warning" v-if="scrollNoMoreData">
-        {{ $t('journal.no-further-data') }}
-      </div>
-
-      <div class="journal_warning" v-else-if="!scrollDataLoaded">
-        {{ $t('journal.loading-further-data') }}
-      </div>
+  <div>
+    <div class="journal_warning" v-if="store.isOffline">
+      {{ $t('app.offline') }}
    </div>
-  </transition>
+
+    <Loading v-else-if="dataStatus == Status.Data.Loading" />
+
+    <div v-else-if="dataStatus == Status.Data.Error" class="journal_warning error">
+      {{ $t('app.error') }}
+    </div>
+
+    <div class="journal_warning" v-else-if="dispatcherHistory.length == 0">
+      {{ $t('app.no-result') }}
+    </div>
+
+    <div v-else>
+      <transition-group name="list-anim" class="journal-list" tag="ul">
+        <JournalDispatcherEntry
+          v-for="entry in dispatcherHistory"
+          :key="entry.id"
+          :entry="entry"
+          :onToggleShowExtraInfo="toggleExtraInfo"
+          :showExtraInfo="extraInfoIndexes.includes(entry.id)"
+        />
+      </transition-group>
+
+      <AddDataButton
+        :list="dispatcherHistory"
+        :scrollDataLoaded="scrollDataLoaded"
+        :scrollNoMoreData="scrollNoMoreData"
+        @addHistoryData="addHistoryData"
+      />
+    </div>
+
+    <div class="journal_warning" v-if="scrollNoMoreData">
+      {{ $t('journal.no-further-data') }}
+    </div>
+
+    <div class="journal_warning" v-else-if="!scrollDataLoaded">
+      {{ $t('journal.loading-further-data') }}
+    </div>
+  </div>
 </template>

 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
-import { regions } from '../../../data/options.json';
 import { useMainStore } from '../../../store/mainStore';
 import { API } from '../../../typings/api';
 import { Status } from '../../../typings/common';
 import Loading from '../../Global/Loading.vue';
 import AddDataButton from '../../Global/AddDataButton.vue';
-import dateMixin from '../../../mixins/dateMixin';
-import styleMixin from '../../../mixins/styleMixin';
-import { useApiStore } from '../../../store/apiStore';
+import JournalDispatcherEntry from './JournalDispatcherEntry.vue';

 export default defineComponent({
-  components: { Loading, AddDataButton },
-
-  mixins: [dateMixin, styleMixin],
+  components: { Loading, AddDataButton, JournalDispatcherEntry },

  props: {
    dispatcherHistory: {
@@ -159,99 +78,32 @@ export default defineComponent({
    return {
      Status,
      store: useMainStore(),
-      apiStore: useApiStore(),
-      regions
+
+      extraInfoIndexes: [] as number[]
    };
  },

-  computed: {
-    computedDispatcherHistory() {
-      return this.dispatcherHistory.reduce(
-        (acc, historyItem, i) => {
-          if (this.isAnotherDay(i - 1, i))
-            acc.push(new Date(historyItem.timestampFrom).toLocaleDateString('pl-PL'));
-          acc.push(historyItem);
-
-          return acc;
-        },
-        [] as (API.DispatcherHistory.Data | string)[]
-      );
+  watch: {
+    '$route.query': {
+      deep: true,
+      handler() {
+        this.extraInfoIndexes.length = 0;
+      }
    }
  },

  methods: {
-    navigateToScenery(name: string, isOnline: boolean) {
-      if (!isOnline) return;
+    toggleExtraInfo(id: number) {
+      const existingIdx = this.extraInfoIndexes.indexOf(id);

-      this.$router.push(`/scenery?station=${name.trim().replace(/ /g, '_')}`);
-    },
-
-    isAnotherDay(prevIndex: number, currIndex: number) {
-      if (currIndex == 0) return true;
-
-      return (
-        new Date(this.dispatcherHistory[prevIndex].timestampFrom).getDate() !=
-        new Date(this.dispatcherHistory[currIndex].timestampFrom).getDate()
-      );
+      if (existingIdx != -1) this.extraInfoIndexes.splice(existingIdx, 1);
+      else this.extraInfoIndexes.push(id);
    }
  }
 });
 </script>

 <style lang="scss" scoped>
-@import '../../../styles/animations.scss';
-@import '../../../styles/responsive.scss';
-@import '../../../styles/badge.scss';
@import '../../../styles/variables.scss';
@import '../../../styles/JournalSection.scss';
-
-table.dispatchers-table {
-  --_bg-table: #111;
-  --_bg-head: #101010;
-  --_bg-row: #2f2f2f;
-
-  width: 100%;
-  border-collapse: collapse;
-  position: relative;
-  text-align: center;
-
-  margin-bottom: 1em;
-
-  thead {
-    position: sticky;
-    top: 0;
-    background-color: var(--_bg-head);
-  }
-
-  th {
-    padding: 0.5em;
-  }
-
-  tr {
-    background-color: var(--_bg-row);
-    border-bottom: 2px solid black;
-
-    &:last-child {
-      border: none;
-    }
-  }
-
-  td {
-    padding: 0.75em;
-
-    .level-badge {
-      margin: 0 auto;
-    }
-  }
-}
-
-.text {
-  &--online {
-    color: springgreen;
-  }
-
-  &--offline {
-    color: #ddd;
-  }
-}
 </style>
@@ -33,7 +33,7 @@
          <h1 class="option-title">{{ $t('options.search-title') }}</h1>
          <div class="search_content">
            <div class="search" v-for="(_, propName) in searchersValues" :key="propName">
-              <label v-if="propName == 'search-date'" for="search-date">{{
+              <label v-if="propName == 'search-date-from'" for="search-date">{{
                $t(`options.search-${optionsType}-date`)
              }}</label>

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

-                <button class="search-exit" v-if="propName != 'search-date'">
+                <button class="search-exit" v-if="!propName.toString().startsWith('search-date')">
                  <img
                    src="/images/icon-exit.svg"
                    alt="exit-icon"
@@ -188,14 +188,14 @@ export default defineComponent({
      if (!value || value == '') return;
      if (value.length < 3) return;

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

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

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

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

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

@@ -30,7 +30,11 @@
    </div>

    <transition name="dropdown-anim">
-      <div class="dropdown_wrapper" v-if="currentStatsTab !== null">
+      <div
+        class="dropdown_wrapper"
+        :class="{ 'dropdown-align-right': true }"
+        v-if="currentStatsTab !== null"
+      >
        <keep-alive>
          <component :is="currentStatsTab" :key="currentStatsTab"></component>
        </keep-alive>
@@ -79,7 +83,10 @@ export default defineComponent({
@import '../../styles/dropdown_filters.scss';
@import '../../styles/variables.scss';

-.dropdown_wrapper {
-  max-width: 100%;
+.dropdown_wrapper.dropdown-align-right {
+  left: auto;
+  right: 0;
+  max-width: 700px;
+  // max-width: 100%;
 }
 </style>
@@ -0,0 +1,311 @@
+<template>
+  <div>
+    <div class="details-actions">
+      <button class="btn--action" @click="toggleExtraInfo">
+        <b>{{ $t('journal.entry-details') }}</b>
+        <img :src="`/images/icon-arrow-${showExtraInfo ? 'asc' : 'desc'}.svg`" alt="Arrow icon" />
+      </button>
+
+      <router-link
+        v-if="driverRouteLocation !== null"
+        class="a-button btn--action btn-timetable"
+        :to="driverRouteLocation"
+      >
+        <img src="/images/icon-train.svg" alt="train icon" />
+        <b>{{ $t('journal.timetable-online-button') }}</b>
+      </router-link>
+    </div>
+
+    <div class="details-body" v-if="showExtraInfo">
+      <div class="g-separator"></div>
+
+      <EntryStops :timetable="timetable" />
+
+      <div class="g-separator"></div>
+
+      <div class="stock-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>
+          </span>
+
+          <span class="badge specs-badge" v-if="timetable.stockMass">
+            <span>{{ $t('journal.stock-mass') }}</span>
+            <span>
+              {{
+                Math.floor(
+                  (currentHistoryIndex == 0
+                    ? timetable.stockMass
+                    : stockHistory[currentHistoryIndex].stockMass || timetable.stockMass) / 1000
+                )
+              }}t
+            </span>
+          </span>
+        </div>
+
+        <div class="stock-history">
+          <button class="btn btn--action" @click="copyStockToClipboard()">
+            <i class="fa-regular fa-copy"></i> {{ $t('journal.stock-copy') }}
+          </button>
+
+          <button
+            v-for="(sh, i) in stockHistory"
+            :key="i"
+            class="btn--action"
+            :data-checked="i == currentHistoryIndex"
+            @click.stop="currentHistoryIndex = i"
+          >
+            {{ sh.updatedAt }}
+          </button>
+        </div>
+
+        <div v-if="timetable.stockString" style="margin-top: 1em">
+          <StockList
+            :trainStockList="
+              (currentHistoryIndex == 0
+                ? timetable.stockString
+                : stockHistory[currentHistoryIndex].stockString
+              ).split(';')
+            "
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue';
+import StockList from '../../Global/StockList.vue';
+import { API } from '../../../typings/api';
+import { RouteLocationRaw } from 'vue-router';
+import EntryStops from './EntryStops.vue';
+import { useI18n } from 'vue-i18n';
+
+export default defineComponent({
+  components: { StockList, EntryStops },
+
+  emits: ['toggleExtraInfo'],
+
+  props: {
+    showExtraInfo: {
+      type: Boolean,
+      required: true
+    },
+    timetable: {
+      type: Object as PropType<API.TimetableHistory.Data>,
+      required: true
+    }
+  },
+  data() {
+    return {
+      currentHistoryIndex: 0,
+      i18n: useI18n()
+    };
+  },
+  computed: {
+    stockHistory() {
+      return this.timetable.stockHistory
+        .slice()
+        .reverse()
+        .map((h) => {
+          const historyData = h.split('@');
+          return {
+            updatedAt: new Date(Number(historyData[0])).toLocaleTimeString(this.$i18n.locale, {
+              hour: '2-digit',
+              minute: '2-digit'
+            }),
+            stockString: historyData[1],
+            stockMass: Number(historyData[2]) || undefined,
+            stockLength: Number(historyData[3]) || undefined
+          };
+        });
+    },
+
+    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'));
+        });
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../../styles/variables.scss';
+@import '../../../styles/responsive.scss';
+@import '../../../styles/badge.scss';
+
+.details-body {
+  margin-top: 0.5em;
+}
+
+.details-actions {
+  display: flex;
+  gap: 0.5em;
+  margin-top: 1em;
+
+  button img {
+    height: 1.25em;
+  }
+}
+
+.stock-history {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  margin-top: 1em;
+
+  button[data-checked='true'] {
+    color: $accentCol;
+  }
+}
+
+.stock-specs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+}
+
+.specs-badge {
+  margin: 0;
+
+  span:first-child {
+    color: white;
+    background-color: #666;
+    border-radius: 0.25em 0 0 0.25em;
+  }
+
+  span:last-child {
+    color: black;
+    background-color: $accentCol;
+    border-radius: 0 0.25em 0.25em 0;
+  }
+}
+
+hr {
+  margin: 0.5em 0;
+}
+
+.stock-dangers ul {
+  list-style: disc;
+  padding-left: 1em;
+  padding-top: 0.5em;
+  white-space: pre-wrap;
+}
+
+.dangers-notes {
+  margin-top: 0.5em;
+  white-space: pre-wrap;
+
+  p {
+    margin-top: 0.25em;
+    max-height: 200px;
+    max-width: 500px;
+    overflow: auto;
+  }
+}
+
+@include smallScreen() {
+  .stock-specs {
+    justify-content: center;
+  }
+
+  .details-actions {
+    justify-content: center;
+  }
+}
+</style>
@@ -3,13 +3,48 @@
    <span class="general-train">
      <span class="text--grayed">#{{ timetable.id }}</span>

-      <span class="badges" v-if="timetable.skr || timetable.twr">
-        <span class="train-badge twr" v-if="timetable.twr" :title="$t('general.TWR')">TWR</span>
-        <span class="train-badge skr" v-if="timetable.skr" :title="$t('general.SKR')">SKR</span>
+      <span
+        class="train-badge twr"
+        v-if="timetable.twr"
+        data-tooltip-type="BaseTooltip"
+        :data-tooltip-content="$t('warnings.TWR')"
+      >
+        TWR
+      </span>
+
+      <span
+        class="train-badge skr"
+        v-if="timetable.skr"
+        data-tooltip-type="BaseTooltip"
+        :data-tooltip-content="$t('warnings.SKR')"
+      >
+        SKR
+      </span>
+
+      <span
+        class="train-badge tn"
+        v-if="timetable.hasDangerousCargo"
+        data-tooltip-type="BaseTooltip"
+        :data-tooltip-content="$t('warnings.TN')"
+      >
+        TN
+      </span>
+
+      <span
+        class="train-badge pn"
+        v-if="timetable.hasExtraDeliveries"
+        data-tooltip-type="BaseTooltip"
+        :data-tooltip-content="$t('warnings.PN')"
+      >
+        PN
      </span>

      <span>
-        <strong class="text--primary">
+        <strong
+          data-tooltip-type="BaseTooltip"
+          :data-tooltip-content="getCategoryExplanation(timetable.trainCategoryCode)"
+          class="text--primary tooltip-help"
+        >
          {{ timetable.trainCategoryCode }}
        </strong>
        <strong>&nbsp;{{ timetable.trainNo }}</strong>
@@ -23,17 +58,19 @@
        {{ timetable.driverLevel < 2 ? 'L' : `${timetable.driverLevel}` }}
      </strong>

-      <strong
+      <router-link
        v-if="apiStore.donatorsData.includes(timetable.driverName)"
        class="text--donator"
-        :title="$t('donations.driver-message')"
+        data-tooltip-type="DonatorTooltip"
+        :data-tooltip-content="$t('donations.driver-message')"
+        :to="`/journal/timetables?search-driver=${timetable.driverName}`"
      >
-        {{ timetable.driverName }}
-      </strong>
+        <strong>{{ timetable.driverName }}</strong>
+      </router-link>

-      <strong v-else>
-        {{ timetable.driverName }}
-      </strong>
+      <router-link v-else :to="`/journal/timetables?search-driver=${timetable.driverName}`">
+        <strong>{{ timetable.driverName }}</strong>
+      </router-link>
    </span>

    <span class="general-time">
@@ -61,15 +98,6 @@
              : `${$t('journal.timetable-abandoned')} ${localeTime(timetable.endDate, $i18n.locale)}`
        }}
      </b>
-
-      <button
-        v-if="timetable.terminated == false"
-        class="btn--action btn-timetable"
-        @click.stop="showTimetable(timetable, $event.currentTarget)"
-      >
-        <img src="/images/icon-train.svg" alt="train icon" />
-        <b>{{ $t('journal.timetable-online-button') }}</b>
-      </button>
    </span>
  </div>
 </template>
@@ -79,12 +107,12 @@ import { PropType, defineComponent } from 'vue';

 import { API } from '../../../typings/api';
 import dateMixin from '../../../mixins/dateMixin';
-import modalTrainMixin from '../../../mixins/modalTrainMixin';
 import styleMixin from '../../../mixins/styleMixin';
 import { useApiStore } from '../../../store/apiStore';
+import trainCategoryMixin from '../../../mixins/trainCategoryMixin';

 export default defineComponent({
-  mixins: [dateMixin, modalTrainMixin, styleMixin],
+  mixins: [dateMixin, styleMixin, trainCategoryMixin],

  data() {
    return {
@@ -97,14 +125,6 @@ export default defineComponent({
      type: Object as PropType<API.TimetableHistory.Data>,
      required: true
    }
-  },
-
-  methods: {
-    showTimetable(timetable: API.TimetableHistory.Data, target: EventTarget | null) {
-      if (timetable?.terminated) return;
-
-      this.selectModalTrainById(`${timetable.driverName}${timetable.trainNo}`, target);
-    }
  }
 });
 </script>
@@ -131,7 +151,6 @@ export default defineComponent({
  gap: 0.25em;

  cursor: pointer;
-  line-height: 2;
 }

 .general-time {
@@ -174,6 +193,7 @@ export default defineComponent({

@include smallScreen {
  .item-general {
+    flex-direction: column;
    justify-content: center;
  }
 }
@@ -1,5 +1,5 @@
 <template>
-  <div class="item-status" style="margin: 0.5em 0">
+  <div class="entry-status" style="margin: 0.5em 0">
    <ProgressBar
      :progressPercent="~~((timetable.currentDistance / timetable.routeDistance) * 100)"
      :progressType="!timetable.fulfilled && timetable.terminated ? 'abandoned' : ''"
@@ -21,7 +21,7 @@
      >
    </span>

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

-.item-status {
+.entry-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
@@ -71,4 +71,9 @@ export default defineComponent({
    justify-content: center;
  }
 }
+
+.entry-location {
+  text-align: center;
+  color: #ccc;
+}
 </style>
@@ -0,0 +1,303 @@
+<template>
+  <div class="entry-stops">
+    <ul class="stop-list">
+      <li v-for="(stop, i) in timetableStops" :key="stop.stopName">
+        <span class="stop-label" :data-confirmed="stop.isConfirmed">
+          <span v-if="i > 0">&gt;</span>
+
+          <span class="stop-name">{{ stop.stopName }}</span>
+
+          <span
+            class="stop-date"
+            v-if="stop.scheduledArrivalTimestamp != 0"
+            :data-delayed="
+              stop.isConfirmed && stop.arrivalTimestamp - stop.scheduledArrivalTimestamp > 0
+            "
+            :data-preponed="
+              stop.isConfirmed &&
+              stop.arrivalTimestamp != 0 &&
+              stop.arrivalTimestamp - stop.scheduledArrivalTimestamp < 0
+            "
+          >
+            <span
+              v-if="stop.isConfirmed && stop.arrivalTimestamp - stop.scheduledArrivalTimestamp != 0"
+            >
+              p. <s>{{ timestampToString(stop.scheduledArrivalTimestamp) }}</s>
+              {{ timestampToString(stop.arrivalTimestamp) }}
+            </span>
+
+            <span v-else>p. {{ timestampToString(stop.scheduledArrivalTimestamp) }}</span>
+          </span>
+
+          <span
+            class="stop-time"
+            v-if="stop.stopTime > 0"
+            :data-stop-ph="stop.stopType.includes('ph')"
+            :data-stop-pt="stop.stopType.includes('pt')"
+            :data-stop-pm="stop.stopType.includes('pm')"
+          >
+            /<span>{{ stop.stopTime }} {{ stop.stopType }}</span
+            >/
+          </span>
+
+          <span
+            class="stop-date"
+            v-if="
+              stop.scheduledDepartureTimestamp != 0 &&
+              stop.scheduledArrivalTimestamp != stop.scheduledDepartureTimestamp
+            "
+            :data-delayed="
+              stop.isConfirmed && stop.departureTimestamp - stop.scheduledDepartureTimestamp > 0
+            "
+            :data-preponed="
+              stop.isConfirmed &&
+              stop.departureTimestamp != 0 &&
+              stop.departureTimestamp - stop.scheduledDepartureTimestamp < 0
+            "
+          >
+            <span
+              v-if="
+                stop.isConfirmed && stop.departureTimestamp - stop.scheduledDepartureTimestamp != 0
+              "
+            >
+              o. <s>{{ timestampToString(stop.scheduledDepartureTimestamp) }}</s>
+              {{ timestampToString(stop.departureTimestamp) }}
+            </span>
+
+            <span v-else>o. {{ timestampToString(stop.scheduledDepartureTimestamp) }}</span>
+          </span>
+        </span>
+      </li>
+    </ul>
+
+    <ul class="timetable-path-list" v-if="timetablePathDetails">
+      <li
+        v-for="(pathData, i) in timetablePathDetails"
+        :data-visited="pathData.isVisited"
+        :data-next-visited="
+          i < timetablePathDetails.length - 1 && timetablePathDetails[i + 1].isVisited
+        "
+      >
+        <span v-if="i > 0" class="path-arrow">&gt;</span>
+        <span class="path-arrival" v-if="pathData.arrival">{{ pathData.arrival }}</span>
+        <b class="path-scenery">{{ pathData.sceneryName }}</b>
+        <span class="path-departure" v-if="pathData.departure">{{ pathData.departure }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue';
+import dateMixin from '../../../mixins/dateMixin';
+import { API } from '../../../typings/api';
+
+interface ITimetableStopDetails {
+  stopName: string;
+  stopComments: string | null;
+  stopTime: number;
+  stopType: string;
+  arrivalTimestamp: number;
+  scheduledArrivalTimestamp: number;
+  departureTimestamp: number;
+  scheduledDepartureTimestamp: number;
+  isConfirmed: boolean;
+}
+
+export default defineComponent({
+  mixins: [dateMixin],
+
+  props: {
+    timetable: {
+      type: Object as PropType<API.TimetableHistory.Data>,
+      required: true
+    }
+  },
+
+  computed: {
+    timetablePathDetails() {
+      if (!this.timetable.path || this.timetable.path == '') return null;
+
+      return this.timetable.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', '') ?? '';
+        const isVisited = this.timetable.visitedSceneries.includes(sceneryHash);
+
+        return {
+          arrival,
+          sceneryName,
+          sceneryHash,
+          departure,
+          isVisited,
+          isVisitedOffline:
+            !isVisited &&
+            this.timetable.visitedSceneries.includes(`${sceneryName} ${sceneryHash}.sc`)
+        };
+      });
+    },
+
+    timetableStops(): ITimetableStopDetails[] {
+      const timetable = this.timetable;
+
+      const stopNames = timetable.sceneriesString.split('%');
+
+      return stopNames.reduce<ITimetableStopDetails[]>((acc, stopName, i, arr) => {
+        const arrivalDate =
+          i == arr.length - 1
+            ? (timetable.checkpointArrivals.at(i) ?? timetable.endDate)
+            : timetable.checkpointArrivals.at(i);
+
+        const scheduledArrivalDate =
+          i == arr.length - 1
+            ? (timetable.checkpointArrivalsScheduled.at(i) ?? timetable.scheduledEndDate)
+            : timetable.checkpointArrivalsScheduled.at(i);
+
+        const departureDate =
+          i == 0
+            ? (timetable.checkpointDepartures.at(i) ?? timetable.beginDate)
+            : timetable.checkpointDepartures.at(i);
+
+        const scheduledDepartureDate =
+          i == 0
+            ? (timetable.checkpointDeparturesScheduled.at(i) ?? timetable.scheduledBeginDate)
+            : timetable.checkpointDeparturesScheduled.at(i);
+
+        const stopTime = Number(timetable.checkpointStopTypes.at(i)?.split(',')[0]) || 0;
+        const stopType = timetable.checkpointStopTypes.at(i)?.split(',').slice(1).join(',') || 'pt';
+        const stopComments = timetable.checkpointComments.at(i) ?? null;
+
+        acc.push({
+          stopName,
+          stopTime,
+          stopType,
+          stopComments,
+          arrivalTimestamp: this.dateStringToTimestamp(arrivalDate),
+          scheduledArrivalTimestamp: this.dateStringToTimestamp(scheduledArrivalDate),
+          departureTimestamp: this.dateStringToTimestamp(departureDate),
+          scheduledDepartureTimestamp: this.dateStringToTimestamp(scheduledDepartureDate),
+          isConfirmed: i < timetable.confirmedStopsCount
+        });
+
+        return acc;
+      }, []);
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../../styles/badge.scss';
+
+.entry-stops {
+  word-wrap: break-word;
+  gap: 0.25em;
+  font-size: 0.95em;
+}
+
+.stop-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  padding: 0.5em 0;
+}
+
+.stop-label {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  align-items: center;
+  color: white;
+
+  &[data-confirmed='true'] > .stop-name {
+    color: lightgreen;
+  }
+
+  &[data-confirmed='true'] > .stop-date:not([data-preponed='true']):not([data-delayed='true']) {
+    color: lightgreen;
+  }
+}
+
+.stop-name {
+  font-weight: bold;
+  color: #ccc;
+
+  i {
+    display: none;
+  }
+}
+
+.stop-date {
+  color: #ccc;
+
+  s {
+    color: #aaa;
+  }
+
+  &[data-delayed='true'] {
+    color: salmon;
+  }
+
+  &[data-preponed='true'] {
+    color: mediumspringgreen;
+  }
+}
+
+.stop-time {
+  &[data-stop-pt='true'] span {
+    color: #999;
+  }
+
+  &[data-stop-ph='true'] span,
+  &[data-stop-pm='true'] span {
+    color: gold;
+  }
+}
+
+.timetable-path-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em 0;
+  padding: 0.5em 0;
+  color: #ccc;
+
+  li > .path-scenery:first-child,
+  li > .path-arrival:nth-child(2) {
+    border-radius: 0.5em 0 0 0.5em;
+  }
+
+  li > :last-child {
+    border-radius: 0 0.5em 0.5em 0;
+  }
+}
+
+.path-scenery {
+  padding: 0.25em 0.5em;
+  background-color: #303030;
+}
+
+.path-arrival,
+.path-departure {
+  padding: 0.25em;
+  display: inline-block;
+  background-color: #4e4e4e;
+  min-width: 25px;
+  text-align: center;
+}
+
+.path-arrow {
+  padding: 0 0.5em;
+}
+
+.timetable-path-list > li[data-visited='true'] {
+  .path-arrival,
+  .path-scenery,
+  .path-arrow {
+    color: lightgreen;
+  }
+
+  &[data-next-visited='true'] .path-departure {
+    color: lightgreen;
+  }
+}
+</style>
@@ -12,7 +12,7 @@
      <hr class="header-separator" />

      <div class="info-stats">
-        <span class="stat-badge">
+        <span class="badge stat-badge">
          <span>{{ $t('journal.driver-stats.timetables') }}</span>
          <span
            >{{ store.driverStatsData._count.fulfilled }} /
@@ -20,17 +20,17 @@
          >
        </span>

-        <span class="stat-badge">
+        <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="stat-badge">
+        <span class="badge stat-badge">
          <span>{{ $t('journal.driver-stats.avg-timetable') }}</span>
          <span> {{ store.driverStatsData._avg.routeDistance.toFixed(2) }}km </span>
        </span>

-        <span class="stat-badge">
+        <span class="badge stat-badge">
          <span>{{ $t('journal.driver-stats.distance') }}</span>
          <span>
            {{ store.driverStatsData._sum.currentDistance.toFixed(2) }} /
@@ -38,7 +38,7 @@
          </span>
        </span>

-        <span class="stat-badge">
+        <span class="badge stat-badge">
          <span>{{ $t('journal.driver-stats.stations') }}</span>
          <span>
            {{ store.driverStatsData._sum.confirmedStopsCount }} /
@@ -0,0 +1,149 @@
+<template>
+  <li class="timetable-history-entry">
+    <!-- General -->
+    <EntryGeneral :timetable="timetableEntry" />
+
+    <div @click="toggleExtraInfo" style="cursor: pointer">
+      <!-- Route -->
+      <div class="entry-route">
+        <b>{{ timetableEntry.route.replace('|', ' - ') }}</b>
+      </div>
+
+      <hr />
+
+      <!-- Status -->
+      <EntryStatus :timetable="timetableEntry" />
+    </div>
+
+    <!-- Extra -->
+    <EntryDetails
+      :timetable="timetableEntry"
+      :show-extra-info="showExtraInfo"
+      @toggle-extra-info="toggleExtraInfo"
+    />
+  </li>
+</template>
+
+<script lang="ts">
+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';
+import styleMixin from '../../../mixins/styleMixin';
+
+import EntryGeneral from './EntryGeneral.vue';
+import EntryStatus from './EntryStatus.vue';
+import EntryDetails from './EntryDetails.vue';
+
+export default defineComponent({
+  props: {
+    timetableEntry: {
+      type: Object as PropType<API.TimetableHistory.Data>,
+      required: true
+    },
+    showExtraInfo: {
+      type: Boolean,
+      required: true
+    }
+  },
+
+  components: { EntryDetails, EntryGeneral, EntryStatus },
+  mixins: [trainCategoryMixin, dateMixin, styleMixin],
+  emits: ['toggleShowExtraInfo'],
+
+  data() {
+    return {
+      apiStore: useApiStore()
+    };
+  },
+
+  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');
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../../styles/responsive.scss';
+
+.timetable-history-entry {
+  background-color: #1a1a1a;
+  padding: 1em;
+}
+
+@include smallScreen {
+  .entry-route {
+    text-align: center;
+  }
+}
+</style>
@@ -1,62 +1,40 @@
 <template>
  <div>
-    <transition name="status-anim" mode="out-in">
-      <div :key="dataStatus">
-        <div class="journal_warning" v-if="store.isOffline">
-          {{ $t('app.offline') }}
-        </div>
+    <div class="journal_warning" v-if="store.isOffline">
+      {{ $t('app.offline') }}
+    </div>

-        <Loading v-else-if="dataStatus == Status.Data.Loading" />
+    <Loading v-else-if="dataStatus == Status.Data.Loading" />

-        <div v-else-if="dataStatus == Status.Data.Error" class="journal_warning error">
-          {{ $t('app.error') }}
-        </div>
+    <div v-else-if="dataStatus == Status.Data.Error" class="journal_warning error">
+      {{ $t('app.error') }}
+    </div>

-        <div v-else-if="timetableHistory.length == 0" class="journal_warning">
-          {{ $t('app.no-result') }}
-        </div>
+    <div v-else-if="timetableHistory.length == 0" class="journal_warning">
+      {{ $t('app.no-result') }}
+    </div>

-        <div v-else>
-          <ul class="journal-list">
-            <transition-group name="list-anim">
-              <li
-                v-for="{ timetable, showExtraInfo } in computedTimetableHistory"
-                class="journal_item"
-                :key="timetable.id"
-                @click="showExtraInfo.value = !showExtraInfo.value"
-              >
-                <div class="journal_item-info">
-                  <!-- General -->
-                  <TimetableGeneral :timetable="timetable" />
-                  <!-- Route -->
-                  <span class="item-route">
-                    <b>{{ timetable.route.replace('|', ' - ') }}</b>
-                  </span>
+    <div v-else>
+      <transition-group name="list-anim" class="journal-list" tag="ul">
+        <JournalTimetableEntry
+          v-for="(timetableEntry, i) in timetableHistory"
+          :key="timetableEntry.id"
+          :timetableEntry="timetableEntry"
+          :onToggleShowExtraInfo="() => toggleExtraInfo(timetableEntry.id)"
+          :showExtraInfo="extraInfoIndexes.includes(timetableEntry.id)"
+        />
+      </transition-group>

-                  <hr />
-                  <!-- Stops -->
-                  <TimetableStops :timetable="timetable" :showExtraInfo="showExtraInfo.value" />
-                  <!-- Status -->
-                  <TimetableStatus :timetable="timetable" />
-
-                  <!-- Extra -->
-                  <TimetableDetails :timetable="timetable" :showExtraInfo="showExtraInfo.value" />
-                </div>
-              </li>
-            </transition-group>
-          </ul>
-
-          <AddDataButton
-            :list="timetableHistory"
-            :scrollDataLoaded="scrollDataLoaded"
-            :scrollNoMoreData="scrollNoMoreData"
-            @addHistoryData="addHistoryData"
-          />
-        </div>
-      </div>
-    </transition>
+      <AddDataButton
+        :list="timetableHistory"
+        :scrollDataLoaded="scrollDataLoaded"
+        :scrollNoMoreData="scrollNoMoreData"
+        @addHistoryData="addHistoryData"
+      />
+    </div>

    <div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div>
+
    <div class="journal_warning" v-else-if="!scrollDataLoaded">
      {{ $t('journal.loading-further-data') }}
    </div>
@@ -64,28 +42,21 @@
 </template>

 <script lang="ts">
-import { defineComponent, PropType, ref } from 'vue';
+import { defineComponent, PropType } from 'vue';

 import Loading from '../../Global/Loading.vue';
 import AddDataButton from '../../Global/AddDataButton.vue';
+import JournalTimetableEntry from './JournalTimetableEntry.vue';

 import { useMainStore } from '../../../store/mainStore';
 import { Status } from '../../../typings/common';
 import { API } from '../../../typings/api';

-import TimetableGeneral from './TimetableGeneral.vue';
-import TimetableStops from './TimetableStops.vue';
-import TimetableStatus from './TimetableStatus.vue';
-import TimetableDetails from './TimetableDetails.vue';
-
 export default defineComponent({
  components: {
    Loading,
    AddDataButton,
-    TimetableDetails,
-    TimetableGeneral,
-    TimetableStatus,
-    TimetableStops
+    JournalTimetableEntry
  },

  props: {
@@ -110,16 +81,26 @@ export default defineComponent({
  data() {
    return {
      Status,
-      store: useMainStore()
+      store: useMainStore(),
+      extraInfoIndexes: [] as number[]
    };
  },

-  computed: {
-    computedTimetableHistory() {
-      return this.timetableHistory.map((timetable) => ({
-        timetable,
-        showExtraInfo: ref(false)
-      }));
+  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);
    }
  }
 });
@@ -1,195 +0,0 @@
-<template>
-  <div>
-    <div class="details-actions">
-      <button class="btn--action">
-        <b>{{ $t('journal.stock-info') }}</b>
-        <img :src="`/images/icon-arrow-${showExtraInfo ? 'asc' : 'desc'}.svg`" alt="Arrow icon" />
-      </button>
-    </div>
-
-    <div class="details-body" v-if="timetable.stockString && timetable.stockMass && showExtraInfo">
-      <hr />
-
-      <div class="stock-specs">
-        <span class="badge">
-          <span>{{ $t('journal.dispatcher-name') }}</span>
-          <span>{{ timetable.authorName }}</span>
-        </span>
-      </div>
-
-      <div class="stock-specs">
-        <span class="badge">
-          <span>{{ $t('journal.stock-max-speed') }}</span>
-          <span>{{ timetable.maxSpeed }}km/h</span>
-        </span>
-
-        <span class="badge">
-          <span>{{ $t('journal.stock-length') }}</span>
-          <span>
-            {{
-              currentHistoryIndex == 0
-                ? timetable.stockLength
-                : stockHistory[currentHistoryIndex].stockLength || timetable.stockLength
-            }}m
-          </span>
-        </span>
-
-        <span class="badge">
-          <span>{{ $t('journal.stock-mass') }}</span>
-          <span>
-            {{
-              Math.floor(
-                (currentHistoryIndex == 0
-                  ? timetable.stockMass!
-                  : stockHistory[currentHistoryIndex].stockMass || timetable.stockMass) / 1000
-              )
-            }}t
-          </span>
-        </span>
-      </div>
-
-      <!-- Historia zmian w składzie -->
-      <div class="stock-history" v-if="stockHistory.length > 1">
-        <button
-          v-for="(sh, i) in stockHistory"
-          :key="i"
-          class="btn--action"
-          :data-checked="i == currentHistoryIndex"
-          @click.stop="currentHistoryIndex = i"
-        >
-          {{ sh.updatedAt }}
-        </button>
-      </div>
-
-      <StockList
-        :trainStockList="
-          (currentHistoryIndex == 0
-            ? timetable.stockString
-            : stockHistory[currentHistoryIndex].stockString
-          ).split(';')
-        "
-      />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent } from 'vue';
-import StockList from '../../Global/StockList.vue';
-import { API } from '../../../typings/api';
-
-export default defineComponent({
-  components: { StockList },
-  props: {
-    showExtraInfo: {
-      type: Boolean,
-      required: true
-    },
-    timetable: {
-      type: Object as PropType<API.TimetableHistory.Data>,
-      required: true
-    }
-  },
-  data() {
-    return {
-      currentHistoryIndex: 0
-    };
-  },
-  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
-          };
-        });
-    }
-  },
-  methods: {
-    onImageError(e: Event) {
-      const imageEl = e.target as HTMLImageElement;
-      imageEl.src = '/images/icon-unknown.png';
-    }
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../../styles/variables.scss';
-@import '../../../styles/responsive.scss';
-@import '../../../styles/badge.scss';
-
-.details-body {
-  margin-top: 0.5em;
-}
-
-.details-actions {
-  display: flex;
-
-  button img {
-    height: 1.25em;
-  }
-}
-
-.stock-history {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5em;
-  margin-top: 1em;
-
-  button[data-checked='true'] {
-    color: $accentCol;
-  }
-}
-
-.stock-specs {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5em;
-  margin-top: 0.5em;
-
-  .badge {
-    margin: 0;
-
-    span:last-child {
-      color: black;
-      background-color: $accentCol;
-    }
-  }
-}
-
-ul.stock-list {
-  display: flex;
-  align-items: flex-end;
-  overflow: auto;
-
-  padding-bottom: 0.5em;
-
-  li > div {
-    margin: 1em 0;
-
-    text-align: center;
-    color: #aaa;
-    font-size: 0.9em;
-  }
-}
-
-@include smallScreen() {
-  .stock-specs {
-    justify-content: center;
-  }
-
-  .details-actions {
-    justify-content: center;
-  }
-}
-</style>
@@ -1,101 +0,0 @@
-<template>
-  <ul class="journal-list">
-    <transition-group name="list-anim">
-      <li
-        v-for="{ timetable, showExtraInfo } in computedTimetableHistory"
-        class="journal_item"
-        :key="timetable.id"
-        @click="showExtraInfo.value = !showExtraInfo.value"
-      >
-        <div class="journal_item-info">
-          <!-- General -->
-          <TimetableGeneral :timetable="timetable" />
-          <!-- Route -->
-          <span class="item-route">
-            <b>{{ timetable.route.replace('|', ' - ') }}</b>
-          </span>
-
-          <hr />
-          <!-- Stops -->
-          <TimetableStops :timetable="timetable" :showExtraInfo="showExtraInfo.value" />
-          <!-- Status -->
-          <TimetableStatus :timetable="timetable" />
-
-          <button class="btn--action btn--show">
-            {{ $t('journal.stock-info') }}
-            <img
-              :src="`/images/icon-arrow-${showExtraInfo.value ? 'asc' : 'desc'}.svg`"
-              alt="Arrow icon"
-            />
-          </button>
-          <!-- Extra -->
-          <TimetableExtra :timetable="timetable" :showExtraInfo="showExtraInfo.value" />
-        </div>
-      </li>
-    </transition-group>
-  </ul>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent, ref } from 'vue';
-
-import TimetableGeneral from './TimetableGeneral.vue';
-import TimetableStops from './TimetableStops.vue';
-import TimetableStatus from './TimetableStatus.vue';
-import TimetableExtra from './TimetableExtra.vue';
-import { API } from '../../../typings/api';
-
-export default defineComponent({
-  components: { TimetableGeneral, TimetableStops, TimetableStatus, TimetableExtra },
-
-  props: {
-    timetableHistory: {
-      type: Array as PropType<API.TimetableHistory.Response>,
-      required: true
-    }
-  },
-  computed: {
-    computedTimetableHistory() {
-      return this.timetableHistory.map((timetable) => ({
-        timetable,
-        showExtraInfo: ref(false)
-      }));
-    }
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../../styles/variables';
-@import '../../../styles/responsive';
-@import '../../../styles/JournalSection';
-
-.btn--show {
-  display: flex;
-  font-weight: bold;
-  padding: 0.2em 0.45em;
-
-  img {
-    height: 1.3em;
-  }
-}
-
-hr {
-  margin: 0.25em 0;
-}
-
-@include smallScreen {
-  .journal_item-info {
-    text-align: center;
-  }
-
-  .item-route {
-    display: flex;
-    justify-content: center;
-  }
-
-  .btn--show {
-    margin: 1em auto 0 auto;
-  }
-}
-</style>
@@ -1,112 +0,0 @@
-<template>
-  <div class="stop-list" v-if="showExtraInfo == true">
-    <span
-      v-for="(stop, i) in timetableStops.filter((_, i) =>
-        !showExtraInfo ? i == 0 || i == timetableStops.length - 1 : true
-      )"
-      class="stop-list-item"
-      :key="stop.stopName"
-      :data-confirmed="stop.confirmed"
-    >
-      <span v-if="i > 0">
-        &gt;
-        <span v-if="!showExtraInfo && i == 1 && timetableStops.length > 2">
-          ... (+{{ timetableStops.length - 2 }}) &gt;
-        </span>
-      </span>
-
-      <span class="stop-name">{{ stop.stopName }}</span>
-      <span v-html="stop.html"></span>
-    </span>
-  </div>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent } from 'vue';
-import dateMixin from '../../../mixins/dateMixin';
-import { API } from '../../../typings/api';
-
-export default defineComponent({
-  mixins: [dateMixin],
-
-  props: {
-    showExtraInfo: {
-      type: Boolean,
-      required: true
-    },
-
-    timetable: {
-      type: Object as PropType<API.TimetableHistory.Data>,
-      required: true
-    }
-  },
-
-  computed: {
-    timetableStops() {
-      const timetable = this.timetable;
-
-      const stopNames = timetable.sceneriesString.split('%');
-
-      const beginDateHTML = ` (o. ${
-        timetable.beginDate != timetable.scheduledBeginDate
-          ? `<s class="text--grayed">${this.localeTime(timetable.beginDate, this.$i18n.locale)}</s>`
-          : ''
-      } <span>${this.localeTime(timetable.scheduledBeginDate, this.$i18n.locale)}</span>)`;
-
-      const endDateHTML = ` (p. ${
-        timetable.endDate != timetable.scheduledEndDate && timetable.fulfilled
-          ? `<s class="text--grayed">${this.localeTime(timetable.endDate, this.$i18n.locale)}</s>`
-          : ''
-      } <span>${this.localeTime(timetable.scheduledEndDate, this.$i18n.locale)}</span>)`;
-
-      return stopNames.map((stopName, i) => {
-        const confirmed = i < timetable.confirmedStopsCount;
-        if (i == 0) return { stopName, html: beginDateHTML, confirmed };
-        if (i == stopNames.length - 1) return { stopName, html: endDateHTML, confirmed };
-
-        const departureDateScheduled = this.stringToDate(
-          timetable.checkpointDeparturesScheduled?.at(i)
-        );
-        const departureDateReal = this.stringToDate(timetable.checkpointDepartures?.at(i));
-        const arrivalDateScheduled = this.stringToDate(
-          timetable.checkpointArrivalsScheduled?.at(i)
-        );
-        const arrivalDateReal = this.stringToDate(timetable.checkpointArrivals?.at(i));
-        const arrivalHTML =
-          (arrivalDateReal &&
-          arrivalDateScheduled &&
-          arrivalDateReal?.getTime() != arrivalDateScheduled?.getTime()
-            ? `<s class="text--grayed">${this.parseDateToTimeString(arrivalDateScheduled)}</s> `
-            : '') + this.parseDateToTimeString(arrivalDateReal || arrivalDateScheduled);
-        const departureHTML =
-          (departureDateReal &&
-          departureDateScheduled &&
-          departureDateReal?.getTime() != departureDateScheduled?.getTime()
-            ? `<s class="text--grayed">${this.parseDateToTimeString(departureDateScheduled)}</s> `
-            : '') + this.parseDateToTimeString(departureDateReal || departureDateScheduled);
-        let html = `${arrivalHTML}${departureHTML ? ` / ${departureHTML}` : ''}`;
-        if (html) html = ` (${html})`;
-        return { stopName, html, confirmed };
-      });
-    }
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-.stop-list {
-  word-wrap: break-word;
-  gap: 0.25em;
-  font-size: 0.95em;
-
-  color: #adadad;
-
-  &-item[data-confirmed='true'] {
-    color: lightgreen;
-
-    .stop-name {
-      font-weight: bold;
-    }
-  }
-}
-</style>
@@ -1,10 +1,14 @@
 export namespace Journal {
-  export type DispatcherSearchKey = 'search-dispatcher' | 'search-station' | 'search-date';
+  export type DispatcherSearchKey =
+    | 'search-dispatcher'
+    | 'search-station'
+    | 'search-date-from'
+    | 'search-date-to';

  export type TimetableSearchKey =
    | 'search-driver'
    | 'search-train'
-    | 'search-date'
+    | 'search-date-from'
    | 'search-dispatcher'
    | 'search-issuedFrom'
    | 'search-terminatingAt'
@@ -19,7 +23,7 @@ export namespace Journal {
  };

  export type TimetableSorterKey = 'timetableId' | 'beginDate' | 'distance' | 'total-stops';
-  export type DispatcherSorterKey = 'timestampFrom' | 'duration';
+  export type DispatcherSorterKey = 'timestampFrom' | 'currentDuration';

  export interface DispatcherSorter {
    id: DispatcherSorterKey;
@@ -39,6 +43,8 @@ export namespace Journal {
    ALL_SPECIALS = 'all-specials',
    TWR = 'twr',
    SKR = 'skr',
+    PN = 'pn',
+    TN = 'tn',
    TWR_SKR = 'twr-skr'
  }

@@ -66,4 +72,15 @@ export namespace Journal {
    iconName: string;
    disabled: boolean;
  }
+
+  export interface TimetableStopDetails {
+    stopName: string;
+    arrivalTimestamp: number;
+    scheduledArrivalTimestamp: number;
+    departureTimestamp: number;
+    scheduledDepartureTimestamp: number;
+    stopTime: number;
+    stopType: string;
+    isConfirmed: boolean;
+  }
 }
@@ -7,7 +7,7 @@
        {{ $t('scenery.history-list-empty') }}
      </div>

-      <div v-else class="history-list">
+      <div v-else class="journal-list">
        <div v-for="historyItem in historyList" :key="historyItem.id">
          <span>
            <span class="text--grayed" style="margin-right: 10px">
@@ -165,14 +165,14 @@ export default defineComponent({
  overflow: auto;
 }

-.history-list {
+.journal-list {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  text-align: left;
 }

-.history-list > div {
+.journal-list > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
@@ -195,7 +195,7 @@ export default defineComponent({
 }

@include smallScreen {
-  .history-list > div {
+  .journal-list > div {
    flex-direction: column;
    justify-content: center;
    text-align: center;
@@ -15,14 +15,30 @@
      <li
        v-for="{ train, status } in stationTrains"
        class="badge user"
-        tabindex="0"
        :key="train.id"
        :data-status="status"
-        @click.prevent="selectModalTrain(train, $event.currentTarget)"
-        @keydown.enter="selectModalTrain(train, $event.currentTarget)"
      >
-        <span class="user_train">{{ train.trainNo }}</span>
-        <span class="user_name">{{ train.driverName }}</span>
+        <router-link :to="train.driverRouteLocation" class="a-block">
+          <span class="user_train"> {{ train.trainNo }}</span>
+          <span class="user_name">
+            {{ train.driverName }}
+            <i
+              v-if="train.timetableData != undefined && train.lastSeen <= Date.now() - 120000"
+              class="fa-solid fa-user-slash"
+              style="color: lightcoral"
+              data-tooltip-type="BaseTooltip"
+              :data-tooltip-content="$t('app.tooltip-driver-offline')"
+            ></i>
+
+            <i
+              v-if="train.currentStationName.indexOf('.sc') != -1"
+              class="fa-solid fa-ban"
+              style="color: lightcoral"
+              data-tooltip-type="BaseTooltip"
+              :data-tooltip-content="$t('app.tooltip-scenery-offline')"
+            ></i>
+          </span>
+        </router-link>
      </li>
    </transition-group>
  </section>
@@ -30,14 +46,13 @@

 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
-import modalTrainMixin from '../../../mixins/modalTrainMixin';
 import routerMixin from '../../../mixins/routerMixin';
-import { ActiveScenery, Station, StopStatus } from '../../../typings/common';
+import { ActiveScenery, Station } from '../../../typings/common';
 import { getTrainStopStatus } from '../utils';
 import { useMainStore } from '../../../store/mainStore';

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

  props: {
    onlineScenery: {
@@ -68,8 +83,13 @@ export default defineComponent({
            this.station?.generalInfo?.checkpoints.includes(stop.stopNameRAW)
        );

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

        return {
@@ -99,38 +119,27 @@ ul {
 }

 .user {
-  cursor: pointer;
-
-  &_train {
-    color: black;
-    background-color: $no-timetable;
-
-    transition: background-color 200ms;
-    -ms-transition: background-color 200ms;
-    -webkit-transition: background-color 200ms;
-  }
-
  &[data-status='no-timetable'] .user_train {
    background-color: $no-timetable;
  }

-  &[data-status='departed'] > &_train {
+  &[data-status='departed'] .user_train {
    background-color: $departed;
  }

-  &[data-status='stopped'] > &_train {
+  &[data-status='stopped'] .user_train {
    background-color: $stopped;
  }

-  &[data-status='online'] > &_train {
+  &[data-status='online'] .user_train {
    background-color: $online;
  }

-  &[data-status='terminated'] > &_train {
+  &[data-status='terminated'] .user_train {
    background-color: $terminated;
  }

-  &[data-status='disconnected'] > &_train {
+  &[data-status='disconnected'] .user_train {
    background-color: $disconnected;
  }

@@ -139,6 +148,16 @@ ul {
    pointer-events: none;
  }
 }
+
+.user_train {
+  color: black;
+  background-color: $no-timetable;
+
+  transition: background-color 200ms;
+  -ms-transition: background-color 200ms;
+  -webkit-transition: background-color 200ms;
+}
+
 .users-anim {
  &-move,
  &-enter-active,
@@ -14,6 +14,10 @@
        </span>

        <span class="header_links" v-if="station">
+          <a :href="pragotronHref" target="_blank" :title="$t('scenery.pragotron-link')">
+            <img src="/images/icon-pragotron.svg" alt="icon-pragotron" />
+          </a>
+
          <a :href="tabliceZbiorczeHref" target="_blank" :title="$t('scenery.tablice-link')">
            <img src="/images/icon-tablice.ico" alt="icon-tablice" />
          </a>
@@ -21,18 +25,15 @@
      </h3>

      <div class="timetable-checkpoints" v-if="station?.generalInfo?.checkpoints">
-        <span v-for="(cp, i) in station.generalInfo.checkpoints" :key="i">
-          {{ (i > 0 && '&bull;') || '' }}
-
-          <button
-            :key="cp"
-            class="checkpoint_item"
-            :class="{ current: chosenCheckpoint === cp }"
-            @click="setCheckpoint(cp)"
+        <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
          >
-            {{ cp }}
-          </button>
-        </span>
+        </template>
      </div>
    </div>

@@ -62,29 +63,36 @@
          {{ $t('scenery.no-timetables') }}
        </div>

-        <div
-          class="timetable-item"
+        <router-link
+          class="timetable-item a-block"
          v-else
          v-for="(row, i) in sceneryTimetables"
          :key="row.train.id + i"
          tabindex="0"
-          @click.prevent.stop="selectModalTrain(row.train, $event.currentTarget)"
-          @keydown.enter.prevent="selectModalTrain(row.train, $event.currentTarget)"
+          :to="row.train.driverRouteLocation"
        >
          <span class="timetable-general">
            <span class="general-info">
-              <span class="info-number">
-                <strong>{{ row.train.timetableData!.category }}</strong>
-                {{ row.train.trainNo }}
-
-                <span v-if="row.checkpointStop.comments" :title="row.checkpointStop.comments">
+              <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>
-              </span>
-              &nbsp;|&nbsp;
-              <span>
-                {{ row.train.driverName }}
-              </span>
+              </div>

              <div class="info-route">
                <strong>{{ row.train.timetableData!.route.replace('|', ' - ') }}</strong>
@@ -160,7 +168,7 @@
              </span>
            </span>
          </span>
-        </div>
+        </router-link>
      </transition-group>
    </div>
  </section>
@@ -173,12 +181,12 @@ import { useRoute } from 'vue-router';
 import Loading from '../Global/Loading.vue';
 import dateMixin from '../../mixins/dateMixin';
 import routerMixin from '../../mixins/routerMixin';
+import trainCategoryMixin from '../../mixins/trainCategoryMixin';
 import { useMainStore } from '../../store/mainStore';
-import modalTrainMixin from '../../mixins/modalTrainMixin';
-import ScheduledTrainStatus from './ScheduledTrainStatus.vue';
 import { useApiStore } from '../../store/apiStore';
-import { ActiveScenery, Station } from '../../typings/common';
+import ScheduledTrainStatus from './ScheduledTrainStatus.vue';
 import { SceneryTimetableRow } from './typings';
+import { ActiveScenery, Station } from '../../typings/common';
 import { getTrainStopStatus, stopStatusPriority } from './utils';

 export default defineComponent({
@@ -186,7 +194,7 @@ export default defineComponent({

  components: { Loading, ScheduledTrainStatus },

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

  props: {
    station: {
@@ -205,6 +213,12 @@ export default defineComponent({
    this.loadSelectedOption();
  },

+  watch: {
+    currentURL() {
+      this.loadSelectedOption();
+    }
+  },
+
  setup(props) {
    const route = useRoute();
    const currentURL = computed(() => `${location.origin}${route.fullPath}`);
@@ -213,7 +227,10 @@ export default defineComponent({
    const mainStore = useMainStore();

    const chosenCheckpoint = ref(
-      props.station?.generalInfo?.checkpoints[0] ?? props.station?.name ?? ''
+      props.station?.generalInfo?.checkpoints[0] ??
+        props.station?.name ??
+        route.query['station']?.toString() ??
+        ''
    );

    return {
@@ -232,13 +249,22 @@ export default defineComponent({
      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;
+    },
+
    sceneryTimetables(): SceneryTimetableRow[] {
-      if (!this.station) return [];
      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()
@@ -247,75 +273,18 @@ export default defineComponent({
          const trainStopStatus = getTrainStopStatus(
            ct.checkpointStop,
            ct.train.currentStationName,
-            this.station!.name
+            sceneryName
          );

-          const trainStopIndex =
-            ct.train.timetableData?.followingStops.findIndex(
-              (stop) => stop.stopName == ct.checkpointStop.stopName
-            ) ?? -1;
-
-          let prevStationName = '',
-            nextStationName = '';
-
-          let departureLine: string | null = null;
-          let arrivingLine: string | null = null;
-
-          let prevDepartureLine: string | null = null,
-            nextArrivalLine: string | null = null;
-
-          if (trainStopIndex > -1 && ct.train.timetableData?.followingStops !== undefined) {
-            for (let i = trainStopIndex; i >= 0; i--) {
-              const stop = ct.train.timetableData.followingStops[i];
-
-              if (
-                /strong|podg\.|pe\./g.test(stop.stopName) &&
-                !prevStationName &&
-                i <= trainStopIndex - 1
-              )
-                prevStationName = stop.stopNameRAW.replace(/,.*/g, '');
-
-              if (
-                stop.arrivalLine != null &&
-                !arrivingLine &&
-                !/-|_|it|sbl/gi.test(stop.arrivalLine)
-              ) {
-                arrivingLine = stop.arrivalLine;
-                prevDepartureLine =
-                  ct.train.timetableData.followingStops[i - 1]?.departureLine || null;
-              }
-            }
-
-            for (let i = trainStopIndex; i < ct.train.timetableData.followingStops.length; i++) {
-              const stop = ct.train.timetableData.followingStops[i];
-
-              if (
-                /strong|podg\.|pe\./g.test(stop.stopName) &&
-                !nextStationName &&
-                i > trainStopIndex
-              )
-                nextStationName = stop.stopNameRAW.replace(/,.*/g, '');
-
-              if (
-                stop.departureLine &&
-                !departureLine &&
-                !/-|_|it|sbl/gi.test(stop.departureLine)
-              ) {
-                departureLine = stop.departureLine;
-                nextArrivalLine = ct.train.timetableData.followingStops[i + 1]?.arrivalLine || null;
-              }
-            }
-          }
-
          return {
            checkpointStop: ct.checkpointStop,
            train: ct.train,
-            prevDepartureLine,
-            nextArrivalLine,
-            departureLine,
-            arrivingLine,
-            prevStationName,
-            nextStationName,
+            prevDepartureLine: ct.previousSceneryElement?.departureRouteExt ?? null,
+            nextArrivalLine: ct.nextSceneryElement?.arrivalRouteExt ?? null,
+            departureLine: ct.timetablePathElement.departureRouteExt ?? null,
+            arrivingLine: ct.timetablePathElement.arrivalRouteExt ?? null,
+            prevStationName: ct.previousSceneryElement?.stationName ?? null,
+            nextStationName: ct.nextSceneryElement?.stationName ?? null,
            status: trainStopStatus
          };
        })
@@ -338,7 +307,19 @@ export default defineComponent({
    loadSelectedOption() {
      if (!this.station) return;

-      this.chosenCheckpoint = this.station.generalInfo?.checkpoints[0] ?? this.station.name;
+      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;
    },

    setCheckpoint(cp: string) {
@@ -408,7 +389,6 @@ export default defineComponent({

    background: #353535;

-    cursor: pointer;
    z-index: 10;

    &.empty {
@@ -438,30 +418,35 @@ export default defineComponent({
  }
 }

-.timetable-list {
-  position: relative;
-}
-
 .timetable-checkpoints {
  display: flex;
  justify-content: center;
+  gap: 0.5em;

  flex-wrap: wrap;
  font-size: 1.1em;

  margin-top: 0.5em;
+}

-  button.checkpoint_item {
-    color: #aaa;
-    display: inline;
+.checkpoint-item {
+  color: #aaa;
+  display: inline;
+
+  &:hover {
+    color: white;
  }

-  .checkpoint_item.current {
+  &.current {
    font-weight: bold;
    color: $accentCol;
  }
 }

+.timetable-list {
+  position: relative;
+}
+
 .general-info {
  display: flex;
  flex-wrap: wrap;
@@ -475,7 +460,9 @@ export default defineComponent({
  }

  img {
-    width: 1.1em;
+    height: 0.9em;
+    vertical-align: middle;
+    margin: 0 0.25em;
  }
 }

@@ -19,7 +19,7 @@
        {{ $t('scenery.history-list-empty') }}
      </div>

-      <div v-else class="history-list">
+      <div v-else class="journal-list">
        <div v-for="timetableHistory in historyList" :key="timetableHistory.id">
          <span>
            <div>
@@ -219,14 +219,14 @@ export default defineComponent({
  }
 }

-.history-list {
+.journal-list {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  text-align: left;
 }

-.history-list > div {
+.journal-list > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
@@ -235,7 +235,7 @@ export default defineComponent({
  line-height: 1.5em;
 }

-.history-list > div > button > img {
+.journal-list > div > button > img {
  width: 2em;
  transform: rotate(180deg);
 }
@@ -6,30 +6,11 @@
        <p>[F] {{ $t('options.filters') }}</p>
        <span class="active-indicator" v-if="changedFilters.length != 0"></span>
      </button>
-
-      <label for="scenery-search">
-        <input
-          id="scenery-search"
-          list="sceneries"
-          :placeholder="$t('sceneries.scenery-search')"
-          @focus="preventKeyDown = true"
-          @blur="preventKeyDown = false"
-          v-model="chosenSearchScenery"
-        />
-
-        <datalist id="sceneries">
-          <option
-            v-for="scenery in sortedStationList"
-            :key="scenery.name"
-            :value="scenery.name"
-          ></option>
-        </datalist>
-      </label>
    </div>

    <transition name="card-anim">
-      <div class="card" v-if="isVisible" tabindex="0" ref="cardRef" @keydown.r="resetFilters">
-        <div class="card_content" @scroll="onScroll" ref="cardContentRef">
+      <div class="card" v-if="isVisible" ref="cardRef" @keydown.r="resetFilters">
+        <div class="card_content" tabindex="0" @scroll="onScroll" ref="cardContentRef">
          <div class="card_title flex">{{ $t('filters.title') }}</div>
          <p class="card_info" v-html="$t('filters.desc')"></p>

@@ -40,6 +21,31 @@
            <template v-else>{{ $t('filters.no-changed-filters') }}</template>
          </div>

+          <section class="card_sceneries-search">
+            <h3 class="section-header">{{ $t('filters.sceneries-search') }}</h3>
+
+            <datalist id="sceneries">
+              <option
+                v-for="scenery in sortedStationList"
+                :key="scenery.name"
+                :value="scenery.name"
+              ></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"
+              />
+
+              <button class="btn--action">{{ $t('filters.search-button-title') }}</button>
+            </form>
+          </section>
+
          <section class="card_options">
            <div
              class="option-section"
@@ -57,16 +63,15 @@
              <div class="section-filters">
                <label
                  v-for="filterKey in sectionFilters"
-                  @click="() => (filters[filterKey] = !filters[filterKey])"
                  @dblclick="setSingleSectionFilter(sectionKey, filterKey)"
-                  :for="filterKey"
                >
                  <input
+                    type="checkbox"
                    :checked="filters[filterKey]"
                    v-model="filters[filterKey]"
-                    type="checkbox"
                    :class="sectionKey"
                    :name="filterKey"
+                    :id="filterKey"
                  />
                  <span>
                    {{ $t(`filters.${filterKey}`) }}
@@ -111,7 +116,7 @@
                @blur="preventKeyDown = false"
              />

-              <button class="btn--action">{{ $t('filters.authors-button-title') }}</button>
+              <button class="btn--action">{{ $t('filters.search-button-title') }}</button>
            </form>
          </section>

@@ -269,20 +274,11 @@ export default defineComponent({
  },

  watch: {
-    chosenSearchScenery(value: string) {
-      const chosenStation = this.store.stationList.find(({ name }) => name == value);
-
-      if (chosenStation) {
-        this.$router.push(`/scenery?station=${chosenStation.name.replace(/ /g, '_')}`);
-        this.chosenSearchScenery = '';
-      }
-    },
-
    isVisible(value: boolean) {
      this.$nextTick(() => {
        if (value) {
-          (this.$refs['cardRef'] as HTMLDivElement).focus();
          (this.$refs['cardContentRef'] as HTMLDivElement).scrollTop = this.scrollTop;
+          (this.$refs['cardContentRef'] as HTMLDivElement).focus();
        }
      });
    }
@@ -300,7 +296,18 @@ export default defineComponent({

    handleAuthorsInput() {
      this.filters['authors'] = this.authors;
-      // if (this.saveOptions) StorageManager.setStringValue('authors', target.value);
+    },
+
+    handleSceneriesInput() {
+      const chosenStation = this.store.stationList.find(
+        ({ name }) => name == this.chosenSearchScenery
+      );
+
+      if (chosenStation) {
+        this.$router.push(`/scenery?station=${chosenStation.name.replace(/ /g, '_')}`);
+        this.chosenSearchScenery = '';
+        this.isVisible = false;
+      }
    },

    subHour() {
@@ -329,6 +336,8 @@ export default defineComponent({
    },

    resetFilters() {
+      if (this.preventKeyDown) return;
+
      // Reset local model values
      this.minimumHours = 0;
      this.authors = '';
@@ -353,7 +362,8 @@ export default defineComponent({

    setSingleSectionFilter(sectionKey: StationFilterSection, chosenKey: string) {
      filtersSections[sectionKey].forEach((filterKey) => {
-        if (filterKey != chosenKey) this.filters[filterKey] = initFilters[filterKey];
+        if (typeof this.filters[filterKey] === 'boolean')
+          this.filters[filterKey] = filterKey != chosenKey;
      });
    },

@@ -382,6 +392,7 @@ h3.section-header {
 .card {
  display: grid;
  grid-template-rows: 1fr auto;
+  padding: 1px;
 }

 .card_info {
@@ -451,8 +462,12 @@ h3.section-header {
  }
 }

-.card_authors-search {
+.card_authors-search,
+.card_sceneries-search {
  margin: 1em 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;

  form {
    display: flex;
@@ -642,10 +657,6 @@ h3.section-header {
 }

@include smallScreen {
-  .card_controls > button.card-button > p {
-    display: none;
-  }
-
  .slider {
    flex-wrap: wrap;
    justify-content: center;
@@ -1,56 +1,70 @@
 <template>
-  <div class="station-stats">
-    <div class="separator" />
+  <div
+    class="dropdown"
+    @keydown.esc="showDropdown = false"
+    v-click-outside="() => (showDropdown = false)"
+  >
+    <div class="bg" v-if="showDropdown" @click="showDropdown = false"></div>

-    <div class="stats-row">
-      <div>
-        <span
-          >{{ $t('station-stats.u-factor') }}
-          <a
-            href="https://td2.info.pl/dyskusje/wspolczynnik-ugla-czy-to-ma-sens/msg81011/#msg81011"
-            target="_blank"
-            :data-tooltip="$t('station-stats.u-factor-tooltip')"
-            >(?)</a
-          >:
-        </span>
+    <button class="filter-button btn--filled btn--image" @click="toggleDropdown" ref="button">
+      <img src="/images/icon-stats.svg" alt="Open filters icon" />
+      <!-- {{ $t('train-stats.stats-button') }} -->
+      <span>STATYSTYKI</span>
+    </button>

-        <b class="u-factor" :style="calculateFactorStyle()">
-          {{ uFactor.toFixed(2) }}
-        </b>
+    <transition name="dropdown-anim">
+      <div class="dropdown_wrapper" v-if="showDropdown">
+        <div>
+          <h1 class="text--primary">
+            <img src="/images/icon-stats.svg" alt="Open filters icon" />
+            {{ $t('train-stats.title') }}
+          </h1>
+
+          <hr style="margin: 0.5em 0" />
+
+          <ul class="stats-list">
+            <li>
+              <span>
+                {{ $t('station-stats.u-factor') }}
+                <a
+                  href="https://td2.info.pl/dyskusje/wspolczynnik-ugla-czy-to-ma-sens/msg81011/#msg81011"
+                  target="_blank"
+                  :data-tooltip="$t('station-stats.u-factor-tooltip')"
+                  >(?)</a
+                >:
+              </span>
+              <b class="u-factor" :style="calculateFactorStyle()">
+                {{ uFactor.toFixed(2) }}
+              </b>
+            </li>
+            <li>
+              {{ $t('station-stats.avg-timetable-count') }}
+              <b>{{ avgTimetableCount.toFixed(2) }}</b>
+            </li>
+            <li>
+              {{ $t('station-stats.single-track-count') }}
+              <b>{{ trackCount.oneWay }}</b> (<b>{{ trackCount.oneWayElectric }} ⚡</b>)
+            </li>
+            <li>
+              {{ $t('station-stats.double-track-count') }}
+              <b>{{ trackCount.twoWay }}</b>
+              (<b>{{ trackCount.twoWayElectric }} ⚡</b>)
+            </li>
+            <li>
+              {{ $t('station-stats.cross-sceneries') }}
+              <b>{{ trackCount.crossTrack }}</b> (<b>{{ trackCount.crossTrackElectric }} ⚡</b>)
+            </li>
+            <li>
+              {{ $t('station-stats.open-spawns') }} <b>{{ spawnCount.passenger }}</b> - PAS /
+              <b>{{ spawnCount.freight }}</b> - TOW / <b>{{ spawnCount.loco }}</b> - LUZ /
+              <b>{{ spawnCount.all }}</b> - ALL
+            </li>
+          </ul>
+        </div>
+
+        <div tabindex="0" @focus="() => (showDropdown = false)"></div>
      </div>
-
-      <div>
-        &bull;
-        {{ $t('station-stats.avg-timetable-count') }}
-        <b>{{ avgTimetableCount.toFixed(2) }}</b>
-      </div>
-
-      <div>
-        &bull;
-        {{ $t('station-stats.single-track-count') }}
-        <b>{{ trackCount.oneWay }}</b> (<b>{{ trackCount.oneWayElectric }} ⚡</b>)
-      </div>
-
-      <div>
-        &bull;
-        {{ $t('station-stats.double-track-count') }}
-        <b>{{ trackCount.twoWay }}</b>
-        (<b>{{ trackCount.twoWayElectric }} ⚡</b>)
-      </div>
-
-      <div>
-        &bull; {{ $t('station-stats.cross-sceneries') }} <b>{{ trackCount.crossTrack }}</b> (<b
-          >{{ trackCount.crossTrackElectric }} ⚡</b
-        >)
-      </div>
-
-      <div>
-        &bull;
-        {{ $t('station-stats.open-spawns') }} <b>{{ spawnCount.passenger }}</b> - PAS /
-        <b>{{ spawnCount.freight }}</b> - TOW / <b>{{ spawnCount.loco }}</b> - LUZ /
-        <b>{{ spawnCount.all }}</b> - ALL
-      </div>
-    </div>
+    </transition>
  </div>
 </template>

@@ -61,11 +75,16 @@ import { useMainStore } from '../../store/mainStore';
 export default defineComponent({
  data() {
    return {
-      mainStore: useMainStore()
+      mainStore: useMainStore(),
+      showDropdown: false
    };
  },

  methods: {
+    toggleDropdown() {
+      this.showDropdown = !this.showDropdown;
+    },
+
    calculateFactorStyle() {
      if (this.uFactor == 0) return '';

@@ -171,25 +190,15 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-.separator {
-  width: 100%;
-  height: 2px;
+@import '../../styles/dropdown.scss';
+@import '../../styles/badge.scss';
+
+h1 img {
+  vertical-align: text-bottom;
+}
+
+h3 {
  margin: 0.5em 0;
-  background-color: #aaa;
-}
-
-.station-stats {
-  text-align: center;
-  color: #ddd;
-}
-
-.stats-row {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  text-wrap: pretty;
-  gap: 0.25em;
-  margin-top: 0.25em;
 }

 .u-factor {
@@ -209,4 +218,20 @@ export default defineComponent({
    color: rgb(22, 245, 22);
  }
 }
+
+ul.stats-list {
+  list-style: disc;
+  padding-left: 1em;
+  margin-top: 1em;
+
+  & > li {
+    margin: 0.25em 0;
+  }
+}
+
+@include smallScreen {
+  .filter-button span {
+    display: none;
+  }
+}
 </style>
@@ -52,15 +52,14 @@
      </thead>

      <tbody>
-        <tr
+        <router-link
          v-for="station in filteredStationList"
-          :class="{ 'last-selected': lastSelectedStationName == station.name }"
+          class="a-row"
+          role="row"
          :key="station.name"
-          @click.left="setScenery(station.name)"
-          @click.right="openForumSite($event, station.generalInfo?.url)"
-          @keydown.enter="setScenery(station.name)"
-          @keydown.space="openForumSite($event, station.generalInfo?.url)"
-          tabindex="0"
+          @click.right.prevent="openForumSite($event, station.generalInfo?.url)"
+          @keydown.space.prevent="openForumSite($event, station.generalInfo?.url)"
+          :to="getSceneryRoute(station)"
        >
          <td class="station-name" :class="station.generalInfo?.availability">
            <b v-if="station.generalInfo?.project" style="color: salmon">{{
@@ -121,7 +120,7 @@
            <span v-if="station.onlineInfo?.dispatcherName">
              <b
                v-if="apiStore.donatorsData.includes(station.onlineInfo.dispatcherName)"
-                @click.stop="openDonationCard"
+                @click.prevent="openDonationCard"
                data-tooltip-type="DonatorTooltip"
                :data-tooltip-content="$t('donations.dispatcher-message')"
              >
@@ -294,7 +293,7 @@
          >
            {{ station.onlineInfo?.scheduledTrainCount.confirmed ?? '-' }}
          </td>
-        </tr>
+        </router-link>
      </tbody>
    </table>

@@ -319,7 +318,7 @@ import dateMixin from '../../mixins/dateMixin';
 import styleMixin from '../../mixins/styleMixin';
 import { useApiStore } from '../../store/apiStore';
 import { useMainStore } from '../../store/mainStore';
-import { Status } from '../../typings/common';
+import { Station, Status } from '../../typings/common';
 import { useTooltipStore } from '../../store/tooltipStore';
 import { getChangedFilters } from '../../managers/stationFilterManager';
 import { ActiveSorter, HeadIdsType, headIconsIds, headIds } from './typings';
@@ -334,7 +333,6 @@ export default defineComponent({
  data: () => ({
    headIconsIds,
    headIds,
-    lastSelectedStationName: '',
    getChangedFilters
  }),

@@ -364,21 +362,16 @@ export default defineComponent({
  },

  methods: {
-    setScenery(name: string) {
-      const station = this.filteredStationList.find((station) => station.name === name);
+    getSceneryRoute(station: Station) {
+      // TODO: Hide tooltips when navigating away

-      if (!station) return;
-
-      this.lastSelectedStationName = station.name;
-      this.tooltipStore.hide();
-
-      this.$router.push({
+      return {
        name: 'SceneryView',
        query: {
-          station: station.name.replaceAll(' ', '_'),
+          station: station.name,
          region: this.$route.query.region || undefined
        }
-      });
+      };
    },

    openDonationCard(e: Event) {
@@ -414,9 +407,9 @@ export default defineComponent({
 $rowCol: #424242;

 .station_table {
-  height: 80vh;
+  height: calc(100vh - 11em);
  max-height: 2000px;
-  min-height: 700px;
+  min-height: 500px;
  overflow: auto;
  font-weight: 500;
 }
@@ -503,8 +496,10 @@ table {
  }
 }

-tr {
+tr,
+.a-row {
  background-color: $rowCol;
+  vertical-align: middle;

  &:nth-child(even) {
    background-color: lighten($rowCol, 5);
@@ -23,12 +23,13 @@ export default defineComponent({
  justify-content: center;
  align-items: center;
  gap: 0.5em;
+  white-space: pre-line;

  padding: 0.25em 0.5em;
  border-radius: 0.25em;

  width: 100%;
-  background-color: #333;
+  background-color: #1f1f1f;
  box-shadow: 0 0 5px 2px #aaa;
 }

@@ -32,12 +32,11 @@ export default defineComponent({

 <style scoped>
 .tooltip-content {
-  width: 300px;
+  width: 200px;

  padding: 0.25em 0.5em;
  border-radius: 0.25em;

-  width: 100%;
  background-color: #1b1b1b;
  box-shadow: 0 0 5px 2px #aaa;
 }
@@ -13,6 +13,8 @@ import BaseTooltip from './BaseTooltip.vue';
 import SpawnsTooltip from './SpawnsTooltip.vue';
 import UsersTooltip from './UsersTooltip.vue';

+const BOX_PADDING_PX = 20;
+
 export default defineComponent({
  components: { DonatorTooltip, VehiclePreviewTooltip, BaseTooltip, SpawnsTooltip, UsersTooltip },

@@ -33,14 +35,14 @@ export default defineComponent({
          const boxWidth = previewEl.getBoundingClientRect().width;

          let translateX = '0',
-            translateY = '30px';
+            translateY = `calc(-100% - ${BOX_PADDING_PX}px)`;

-          if (val[0] <= boxWidth / 2) {
+          if (val[0] <= boxWidth / 2 + BOX_PADDING_PX) {
            previewEl.style.left = '0';
-            translateX = '0px';
-          } else if (val[0] >= clientWidth - boxWidth / 2) {
+            translateX = BOX_PADDING_PX + 'px';
+          } else if (val[0] >= clientWidth - boxWidth / 2 - BOX_PADDING_PX) {
            previewEl.style.left = '100%';
-            translateX = '-100%';
+            translateX = `calc(-100% - ${BOX_PADDING_PX}px)`;
          } else {
            previewEl.style.left = `${val[0]}px`;
            translateX = '-50%';
@@ -49,10 +51,10 @@ export default defineComponent({
          previewEl.style.top = `${val[1]}px`;

          const isOutside =
-            val[1] + previewEl.getBoundingClientRect().height + 30 >=
-            window.innerHeight + window.scrollY;
+            val[1] - previewEl.getBoundingClientRect().height <=
+            window.scrollY + BOX_PADDING_PX * 2;

-          if (isOutside) translateY = 'calc(-100% - 30px)';
+          if (isOutside) translateY = BOX_PADDING_PX + 'px';
          previewEl.style.transform = `translate(${translateX}, ${translateY})`;
        });
      }
@@ -32,12 +32,11 @@ export default defineComponent({

 <style scoped>
 .tooltip-content {
-  width: 300px;
+  width: 200px;

  padding: 0.25em 0.5em;
  border-radius: 0.25em;

-  width: 100%;
  background-color: #1b1b1b;
  box-shadow: 0 0 5px 2px #aaa;
 }
@@ -1,23 +1,18 @@
 <template>
  <div class="tooltip-content">
-    <div v-if="imageState == 'loading'" class="loading-info">
-      {{ $t('vehicle-preview.loading') }}
+    <div class="image-box">
+      <Loading v-if="imageState == 'loading'" class="loading-info" />
+
+      <img
+        v-if="tooltipStore.type"
+        @load="onImageLoad"
+        @error="onImageError"
+        width="300"
+        height="176"
+        :src="`https://stacjownik.spythere.eu/static/images/${vehicleName}--300px.jpg`"
+      />
    </div>

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

 export default defineComponent({
+  components: { Loading },
+
  data() {
    return {
      tooltipStore: useTooltipStore(),
@@ -50,7 +48,7 @@ export default defineComponent({
  },

  watch: {
-    'tooltipStore.type'(prev, val) {
+    vehicleName(prev, val) {
      if (prev != val) this.imageState = 'loading';
    }
  },
@@ -61,9 +59,12 @@ export default defineComponent({
    },

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

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

@@ -77,22 +78,12 @@ export default defineComponent({
    },

    vehicleCargo() {
-      return this.vehicleData?.group.cargoTypes?.find(
+      const x = this.vehicleData?.group.cargoTypes?.find(
        (c) => c.id == this.tooltipStore.content.split(':')[1]
      );
+
+      return x;
    }
-
-    // vehicleProps() {
-    //   const vehicleDataArray = this.apiStore.vehiclesData?.vehicleList.find(
-    //     ([name]) => name === this.vehicleName
-    //   );
-
-    //   if (!vehicleDataArray) return null;
-
-    //   return (
-    //     this.apiStore.vehiclesData!.vehicleProps.find((v) => v.type == vehicleDataArray[1]) ?? null
-    //   );
-    // }
  }
 });
 </script>
@@ -101,17 +92,23 @@ export default defineComponent({
 .tooltip-content {
  width: 300px;
  min-height: 200px;
-  background-color: #333;
+  background-color: #1f1f1f;
  box-shadow: 0 0 10px 2px #aaa;

  padding: 0.5em;
  border-radius: 0.5em;
 }

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

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

    <span
      v-if="stop.position != 'begin'"
      class="date arrival"
-      :data-status="
-        stop.arrivalDelay > 0 && stop.status != 'unconfirmed'
-          ? 'delayed'
-          : stop.arrivalDelay < 0 && stop.status != 'unconfirmed'
-            ? 'preponed'
-            : stop.arrivalDelay == 0 && stop.status == 'confirmed'
-              ? 'on-time'
-              : ''
-      "
+      :data-status-delayed="stop.arrivalDelay > 0"
+      :data-status-preponed="stop.arrivalDelay < 0"
+      :data-status="stop.status"
    >
      p.
      <span v-if="stop.arrivalDelay != 0 && stop.status != 'unconfirmed'">
@@ -31,10 +31,7 @@
    </span>

    <span
-      v-if="
-        stop.duration ||
-        (stop.status == 'stopped' && stop.position != 'begin' && stop.departureDelay > 0)
-      "
+      v-if="stop.duration"
      class="date stop"
      :data-stop-types="stop.type.replace(', ', '-')"
      :data-stop-status="stop.departureDelay > 0 && !stop.duration ? 'delayed' : ''"
@@ -50,23 +47,18 @@
    <span
      v-if="
        stop.position != 'end' &&
-        (stop.duration != 0 || stop.status == 'stopped' || stop.departureDelay != stop.arrivalDelay)
+        (stop.duration != 0 ||
+          stop.position == 'begin' ||
+          stop.status == 'stopped' ||
+          stop.departureDelay != stop.arrivalDelay)
      "
      class="date departure"
-      :data-status="
-        stop.departureDelay > 0 && stop.status == 'confirmed'
-          ? 'delayed'
-          : stop.departureDelay < 0 && stop.status == 'confirmed'
-            ? 'preponed'
-            : stop.departureDelay == 0 && stop.status == 'confirmed'
-              ? 'on-time'
-              : ''
-      "
+      :data-status-delayed="stop.departureDelay > 0"
+      :data-status-preponed="stop.departureDelay < 0"
+      :data-status-confirmed="stop.status == 'confirmed'"
    >
      o.
-      <span
-        v-if="stop.departureDelay != 0 && (stop.status == 'confirmed' || stop.status == 'stopped')"
-      >
+      <span v-if="stop.departureDelay != 0 && stop.status == 'confirmed'">
        <s>{{ timestampToString(stop.departureScheduled) }}</s>
        {{ timestampToString(stop.departureReal) }}

@@ -81,18 +73,24 @@
 </template>

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

 export default defineComponent({
  mixins: [dateMixin],

  props: {
    stop: {
-      type: Object as PropType<TrainScheduleStop>,
+      type: Object as PropType<TrainSchedulePoint>,
      required: true
    }
+  },
+
+  computed: {
+    sceneryHref() {
+      return `/scenery?station=${this.stop.sceneryName}&checkpoint=${this.stop.nameRaw}`;
+    }
  }
 });
 </script>
@@ -105,24 +103,16 @@ $stopExchangeClr: #db8e29;
 $stopDefaultClr: #252525;
 $stopNameClr: #303030;

+s {
+  color: #ccc;
+}
+
 .stop-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

-  &[data-minor='true'] {
-    .date {
-      display: none;
-    }
-
-    .name {
-      background: none;
-      color: #aaa;
-      padding: 0;
-    }
-  }
-
-  .name {
+  .stop-name {
    background: $stopNameClr;
    border-radius: 0.5em 0 0 0.5em;
    padding: 0.3em 0.5em;
@@ -144,6 +134,22 @@ $stopNameClr: #303030;
    }
  }

+  &[data-minor='true'] {
+    .date {
+      display: none;
+    }
+
+    .stop-name {
+      background: none;
+      color: #aaa;
+      padding: 0;
+    }
+
+    i {
+      display: none;
+    }
+  }
+
  .stop {
    &[data-stop-types='ph'],
    &[data-stop-types='ph-pm'],
@@ -157,27 +163,48 @@ $stopNameClr: #303030;
      color: $delayedClr;
    }
  }
+}

-  .arrival,
-  .departure {
-    &[data-status='delayed'] {
-      s {
-        color: #ccc;
-      }
+.stop-label > a {
+  z-index: 0;
+}

-      span {
-        color: $delayedClr;
-      }
+.stop .arrival {
+  &[data-status='confirmed'][data-status-delayed='true'] {
+    span {
+      color: $delayedClr;
    }
+  }

-    &[data-status='preponed'] {
-      s {
-        color: #ccc;
-      }
+  &[data-status='confirmed'][data-status-preponed='true'] {
+    span {
+      color: $preponedClr;
+    }
+  }

-      span {
-        color: $preponedClr;
-      }
+  &[data-status='stopped'][data-status-preponed='true'] {
+    span {
+      color: $preponedClr;
+    }
+  }
+
+  &[data-status='stopped'][data-status-delayed='true'] {
+    span {
+      color: $delayedClr;
+    }
+  }
+}
+
+.stop .departure[data-status-confirmed='true'] {
+  &[data-status-delayed='true'] {
+    span {
+      color: $delayedClr;
+    }
+  }
+
+  &[data-status-preponed='true'] {
+    span {
+      color: $preponedClr;
    }
  }
 }
@@ -1,40 +1,53 @@
 <template>
  <div class="train-info" :data-extended="extended">
-    <section class="train-general">
-      <div class="general-top-bar">
-        <div>
-          <b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
-          <span class="timetable-id" v-if="train.timetableData">
-            #{{ train.timetableData.timetableId }}
-          </span>
+    <div class="general-top-bar">
+      <div class="top-bar-header">
+        <b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
+        <span class="timetable-id" v-if="train.timetableData">
+          #{{ train.timetableData.timetableId }}
+        </span>

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

-          <strong>
-            <span v-if="train.timetableData" class="text--primary"
-              >{{ train.timetableData.category }}&nbsp;</span
-            >
-            <span class="train-number">{{ train.trainNo }}</span>
-          </strong>
-          <span>&bull;</span>
+        <span
+          class="train-badge tn"
+          v-if="train.timetableData?.hasDangerousCargo"
+          data-tooltip-type="BaseTooltip"
+          :data-tooltip-content="$t('warnings.TN')"
+        >
+          TN
+        </span>
+
+        <span
+          class="train-badge pn"
+          v-if="train.timetableData?.hasExtraDeliveries"
+          data-tooltip-type="BaseTooltip"
+          :data-tooltip-content="$t('warnings.PN')"
+        >
+          PN
+        </span>
+
+        <b
+          v-if="train.timetableData"
+          data-tooltip-type="BaseTooltip"
+          :data-tooltip-content="getCategoryExplanation(train.timetableData.category)"
+          class="text--primary tooltip-help"
+        >
+          {{ train.timetableData.category }}
+        </b>
+
+        <b class="train-number">{{ train.trainNo }}</b>
+
+        <span>&bull;</span>
+
+        <div class="train-driver">
          <b
            class="level-badge driver"
            :style="calculateExpStyle(train.driverLevel, train.isSupporter)"
@@ -42,148 +55,152 @@
            {{ train.driverLevel < 2 ? 'L' : `${train.driverLevel}` }}
          </b>

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

-            <span v-else>{{ train.driverName }}</span>
-          </div>
-        </div>
-
-        <div v-if="extended">
-          <button class="btn-timetable btn--image btn--action" @click="navigateToJournal">
-            <img src="/images/icon-train.svg" alt="train icon" />
-            <span>
-              {{ $t('trains.journal-button') }}
-            </span>
-          </button>
-
-          <button class="btn-exit btn--image btn--action" @click="closeModal">
-            <img src="/images/icon-exit.svg" alt="modal exit icon" />
-          </button>
+          <span v-else>{{ train.driverName }}</span>
        </div>
      </div>
+    </div>

-      <div class="general-timetable" v-if="train.timetableData">
-        <strong>{{ train.timetableData.route.replace('|', ' - ') }}</strong>
-        <span
-          v-if="getSceneriesWithComments(train.timetableData).length > 0"
-          data-tooltip-type="BaseTooltip"
-          :data-tooltip-content="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(
-            train.timetableData
-          )})`"
-        >
-          <img class="image-warning" src="/images/icon-warning.svg" />
+    <div class="general-timetable" v-if="train.timetableData">
+      <strong>{{ train.timetableData.route.replace('|', ' - ') }}</strong>
+      <span
+        v-if="getSceneriesWithComments(train.timetableData).length > 0"
+        data-tooltip-type="BaseTooltip"
+        :data-tooltip-content="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(
+          train.timetableData
+        )})`"
+      >
+        <img class="image-warning" src="/images/icon-warning.svg" />
+      </span>
+    </div>
+
+    <hr style="margin: 0.25em 0" />
+
+    <div class="general-stops" v-if="train.timetableData">
+      <span v-if="train.timetableData.followingStops.length > 2">
+        {{ $t('trains.via-title') }}
+        <span v-html="getTrainStopsHtml(train.timetableData.followingStops)"></span>
+      </span>
+    </div>
+
+    <div class="general-status">
+      <div class="status-timetable-progress" v-if="train.timetableData">
+        <ProgressBar :progressPercent="confirmedPercentage(train.timetableData.followingStops)" />
+
+        <span class="progress-distance">
+          <span>{{ currentDistance(train.timetableData.followingStops) }} km</span>
+          <span>/</span>
+          <span class="text--primary">{{ train.timetableData.routeDistance }} km </span>
+          <span>|</span>
+          <span v-html="currentDelay(train.timetableData.followingStops)"></span>
        </span>
      </div>

-      <hr style="margin: 0.25em 0" />
-
-      <div class="general-stops" v-if="train.timetableData">
-        <span v-if="train.timetableData.followingStops.length > 2">
-          {{ $t('trains.via-title') }}
-          <span v-html="displayStopList(train.timetableData.followingStops)"></span>
-        </span>
-      </div>
-
-      <div class="general-status">
-        <div class="status-timetable-progress" v-if="train.timetableData">
-          <ProgressBar :progressPercent="confirmedPercentage(train.timetableData.followingStops)" />
-
-          <span class="progress-distance">
-            &nbsp; {{ currentDistance(train.timetableData.followingStops) }} km /
-            <span class="text--primary"> {{ train.timetableData.routeDistance }} km </span>
-            |
-            <span v-html="currentDelay(train.timetableData.followingStops)"></span>
-          </span>
+      <div class="status-badges">
+        <div v-if="!train.currentStationHash" class="train-badge offline">
+          <i class="fa-solid fa-ban"></i>
+          {{ $t('trains.scenery-offline') }}
        </div>

-        <div class="status-badges">
-          <div v-if="!train.currentStationHash" class="train-badge offline">
-            <img src="/images/icon-offline.svg" alt="" />
-            {{ $t('trains.scenery-offline') }}
-          </div>
-
-          <div v-if="!train.online" class="train-badge offline">
-            <img src="/images/icon-offline.svg" alt="" />
-            Offline {{ lastSeenMessage(train.lastSeen) }}
-          </div>
+        <div v-if="!train.online" class="train-badge offline">
+          <i class="fa-solid fa-user-slash"></i>
+          Offline {{ lastSeenMessage(train.lastSeen) }}
        </div>
      </div>
+    </div>

-      <div class="general-stats" v-if="extended">
-        <div>
-          <img src="/images/icon-length.svg" alt="length icon" />
-          {{ train.length }}m
-        </div>
-
-        <div>
-          <img src="/images/icon-mass.svg" alt="mass icon" />
-          {{ (train.mass / 1000).toFixed(1) }}t
-        </div>
-
-        <div>
-          <img src="/images/icon-speed.svg" alt="speed icon" />
-          {{ train.speed }} km/h
-
-          <span v-if="stockSpeedLimit != Infinity">
-            &bull;
-            <em
-              class="text--grayed"
-              style="text-decoration: underline dotted"
-              tabindex="0"
-              :data-tooltip="$t('trains.vmax-tooltip')"
-            >
-              {{ stockSpeedLimit }} km/h
-            </em>
-          </span>
-        </div>
+    <div class="general-stats" v-if="extended">
+      <div>
+        <img src="/images/icon-length.svg" alt="length icon" />
+        {{ train.length }}m
      </div>

-      <div class="text--grayed" style="margin-top: 0.25em">
-        {{ displayTrainPosition(train) }}
-      </div>
-    </section>
-
-    <section class="train-stats" v-if="!extended">
-      <StockList :trainStockList="train.stockList" :tractionOnly="true" />
-
      <div>
-        <span>{{ train.speed }}km/h</span>
+        <img src="/images/icon-mass.svg" alt="mass icon" />
+        {{ (train.mass / 1000).toFixed(1) }}t
+      </div>

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

 <script lang="ts">
 import { defineComponent } from 'vue';
-import styleMixin from '../../mixins/styleMixin';
-import trainInfoMixin from '../../mixins/trainInfoMixin';
-import ProgressBar from '../Global/ProgressBar.vue';
 import { useMainStore } from '../../store/mainStore';
 import { useApiStore } from '../../store/apiStore';
-import StockList from '../Global/StockList.vue';
-import modalTrainMixin from '../../mixins/modalTrainMixin';
 import { Train } from '../../typings/common';
+import speedLimits from '../../data/speedLimits.json';
+import styleMixin from '../../mixins/styleMixin';
+import trainInfoMixin from '../../mixins/trainInfoMixin';
+import trainCategoryMixin from '../../mixins/trainCategoryMixin';
+import ProgressBar from '../Global/ProgressBar.vue';
+import StockList from '../Global/StockList.vue';
+
+export type SpeedLimitLocoType = keyof typeof speedLimits;
+
+const isCompatibleLoco = (locoType: string): locoType is SpeedLimitLocoType =>
+  locoType in speedLimits;

 export default defineComponent({
-  mixins: [trainInfoMixin, styleMixin, modalTrainMixin],
+  mixins: [trainInfoMixin, styleMixin, trainCategoryMixin],
  components: { ProgressBar, StockList },

  props: {
@@ -205,33 +222,50 @@ export default defineComponent({

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

        return Math.min(vehicleSpeed, acc);
-      }, 300);
-    }
-  },
+      }, Infinity);

-  methods: {
-    navigateToJournal() {
-      this.$router.push({
+      const headLoco = this.train.stockList[0].slice(0, this.train.stockList[0].indexOf('-'));
+
+      if (!isCompatibleLoco(headLoco)) return vehicleMaxSpeed;
+
+      if (this.train.stockList.length == 1) return speedLimits[headLoco]['none'];
+
+      const speedTable = speedLimits[headLoco][isPassenger ? 'passenger' : 'cargo'];
+
+      if (!speedTable) return vehicleMaxSpeed;
+
+      let massKey = Object.keys(speedTable).findLast(
+        (massKey) => this.train.mass >= Number(massKey)
+      );
+
+      return massKey ? ((speedTable as any)[massKey] as number) : vehicleMaxSpeed;
+    },
+    journalRouteLocation() {
+      return {
        path: '/journal/timetables',
        query: {
          'search-driver': this.train.driverName
        }
-      });
-
-      this.closeModal();
+      };
    }
  }
 });
 </script>

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

 .image-warning {
@@ -240,32 +274,43 @@ export default defineComponent({
  vertical-align: middle;
 }

-.train-stats {
+.train-dangers {
+  margin-top: 0.5em;
+}
+
+.dangers-badges {
  display: flex;
-  justify-content: center;
-  align-items: center;
-
  flex-direction: column;
-  text-align: center;
+  gap: 0.5em;
+}

-  line-height: 1.5em;
+.dangers-notes {
+  margin-top: 0.5em;
+  white-space: pre-wrap;
+
+  p {
+    margin-top: 0.25em;
+    max-height: 200px;
+    max-width: 500px;
+    overflow: auto;
+  }
 }

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

  background-color: #1a1a1a;
  gap: 0.5em;
 }

+.train-driver {
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+}
+
 .train-driver img {
  max-height: 20px;
  vertical-align: text-bottom;
@@ -284,12 +329,6 @@ export default defineComponent({
  padding: 0 0.25em;
 }

-.train-general {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25em;
-}
-
 .general-stops {
  font-size: 0.8em;
 }
@@ -297,24 +336,15 @@ export default defineComponent({
 .general-top-bar {
  display: flex;
  justify-content: space-between;
-  flex-wrap: wrap;
  gap: 0.5em;
-
-  & > div {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-
-    gap: 0.25em;
-  }
 }

-.btn-timetable {
-  padding: 0.25em;
-}
+.top-bar-header {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;

-.btn-exit {
-  padding: 0.25em;
+  gap: 0.25em;
 }

 .general-status {
@@ -361,25 +391,18 @@ export default defineComponent({
  display: flex;
  align-items: center;
  flex-wrap: wrap;
+  gap: 0.5em;
+  padding: 0.5em 0;
 }

 .progress-distance {
-  margin-right: 0.25em;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25em;
 }

 .timetable-warnings {
  display: flex;
  gap: 0.25em;
 }
-
-@include smallScreen() {
-  .train-info {
-    grid-template-columns: 1fr;
-    gap: 1em 0;
-  }
-
-  .btn-timetable > span {
-    display: none;
-  }
-}
 </style>
@@ -1,103 +0,0 @@
-<template>
-  <div class="train-modal" v-if="chosenTrain" @keydown.esc="closeModal">
-    <div class="modal-background" @click="closeModal"></div>
-    <div class="modal-content" ref="content" tabindex="0">
-      <TrainInfo :train="chosenTrain" :extended="true" ref="trainInfo" />
-      <TrainSchedule :train="chosenTrain" tabindex="0" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import modalTrainMixin from '../../mixins/modalTrainMixin';
-import TrainInfo from './TrainInfo.vue';
-import TrainSchedule from './TrainSchedule.vue';
-import { Train } from '../../typings/common';
-
-export default defineComponent({
-  components: { TrainInfo, TrainSchedule },
-  mixins: [modalTrainMixin],
-
-  computed: {
-    chosenTrain() {
-      return this.store.trainList.find((train) => train.modalId == this.store.chosenModalTrainId);
-    }
-  },
-
-  watch: {
-    chosenTrain(train: Train | undefined) {
-      this.$nextTick(() => {
-        if (train) {
-          document.body.classList.add('no-scroll');
-          const contentEl = this.$refs['content'] as HTMLElement;
-          contentEl.focus();
-        } else {
-          (this.store.modalLastClickedTarget as any)?.focus();
-
-          setTimeout(() => {
-            document.body.classList.remove('no-scroll');
-          }, 90);
-        }
-      });
-    }
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-
-.train-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-
-  width: 100%;
-  height: 100%;
-
-  color: white;
-  z-index: 200;
-
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-
-  text-align: left;
-}
-
-.modal-background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-
-  cursor: pointer;
-
-  background-color: rgba(0, 0, 0, 0.55);
-}
-
-.modal-content {
-  position: relative;
-  overflow-y: scroll;
-
-  width: 95vw;
-  max-height: 95vh;
-  max-height: 95dvh;
-  margin-top: 1em;
-
-  background-color: #1a1a1a;
-  box-shadow: 0 0 15px 10px #0e0e0e;
-}
-
-@include midScreen {
-  .exit {
-    margin: 0.5em;
-
-    img {
-      width: 1.75rem;
-    }
-  }
-}
-</style>
@@ -15,12 +15,14 @@
          <div class="search_content">
            <div class="search-box">
              <input
+                v-model="searchedTrain"
                class="search-input"
                ref="initFocusedElement"
+                id="train-search"
+                name="train-search"
                @focus="preventKeyDown = true"
                @blur="preventKeyDown = false"
                :placeholder="$t(`options.search-train`)"
-                v-model="searchedTrain"
              />
              <button class="search-exit">
                <img
@@ -33,11 +35,13 @@

            <div class="search-box">
              <input
+                v-model="searchedDriver"
                class="search-input"
+                id="driver-search"
+                name="driver-search"
                @focus="preventKeyDown = true"
                @blur="preventKeyDown = false"
                :placeholder="$t(`options.search-driver`)"
-                v-model="searchedDriver"
              />
              <button class="search-exit">
                <img
@@ -174,6 +178,12 @@ export default defineComponent({
      this.trainFilterList.forEach((filter) => {
        filter.isActive = true;
      });
+
+      this.sorterActive.id = 'routeDistance';
+      this.sorterActive.dir = -1;
+
+      this.searchedDriver = '';
+      this.searchedTrain = '';
    },

    onInputClear(id: 'driver' | 'train') {
@@ -1,19 +1,19 @@
 <template>
-  <div class="train-schedule" @click="toggleShowState">
-    <StockList :trainStockList="train.stockList" />
-
+  <div class="train-schedule">
    <div class="schedule-wrapper" v-if="train.timetableData">
      <div class="stops">
        <div
-          v-for="(stop, i) in scheduleStops"
+          v-for="(stop, i) in scheduleStopsV2"
          :key="i"
          class="stop"
          :data-status="stop.status"
+          :data-sbl="stop.isSBL && stop.sceneryName == scheduleStopsV2[i + 1]?.sceneryName"
          :data-position="stop.position"
          :data-delayed="stop.departureDelay > 0"
          :data-stop-type="stop.type"
-          :data-minor-stop-active="stop.isActive"
-          :data-last-confirmed="stop.isLastConfirmed"
+          :data-is-active="stop.isActive"
+          :data-track-count-departure="stop.departureLineInfo?.routeTracks ?? 2"
+          :data-track-count-arrival="stop.arrivalLineInfo?.routeTracks ?? 2"
        >
          <span class="stop_info">
            <span class="distance">
@@ -34,7 +34,7 @@
            <div></div>

            <div class="progress">
-              <div class="line line_connection" v-if="i < scheduleStops.length - 1"></div>
+              <div class="line line_connection" v-if="i < scheduleStopsV2.length - 1"></div>
            </div>

            <div class="bottom-line-info">
@@ -44,47 +44,91 @@
              </div>

              <!-- Routes  -->
+
              <span
                v-if="
                  stop.departureLine &&
-                  scheduleStops[i + 1] != undefined &&
-                  !/-|_|(^it\d+)|(^sbl)/gi.test(stop.departureLine)
+                  (scheduleStopsV2[i + 1]?.arrivalLineInfo?.routeSpeed !=
+                    stop.arrivalLineInfo?.routeSpeed ||
+                    stop.sceneryName != scheduleStopsV2[i + 1]?.sceneryName)
                "
              >
                <div class="scenery-route">
                  <span>{{ stop.departureLine }}</span>
+
                  <span v-if="stop.departureLineInfo">
-                    | {{ stop.departureLineInfo.routeSpeed }}
-                    <span v-if="stop.departureLineInfo.isElectric">⚡</span>
+                    <span> | {{ stop.departureLineInfo.routeSpeed }}</span>
+
                    <img
-                      v-else
-                      src="/images/icon-we4a.png"
-                      :title="$t('trains.we4a-tooltip')"
-                      width="12"
+                      :src="
+                        stop.departureLineInfo.isElectric
+                          ? '/images/icon-catenary.svg'
+                          : '/images/icon-we4a.png'
+                      "
+                      width="14"
+                      data-tooltip-type="BaseTooltip"
+                      :data-tooltip-content="
+                        $t(
+                          `trains.${!stop.departureLineInfo.isElectric ? 'no-' : ''}catenary-tooltip`
+                        )
+                      "
+                    />
+
+                    <img
+                      v-if="stop.departureLineInfo.isRouteSBL"
+                      src="/images/icon-sbl-transparent.svg"
+                      width="14"
+                      data-tooltip-type="BaseTooltip"
+                      :data-tooltip-content="$t('trains.sbl-tooltip')"
                    />
                  </span>
                </div>

                <div
-                  v-if="stop.sceneryName != scheduleStops[i + 1]?.sceneryName"
+                  v-if="stop.sceneryName != scheduleStopsV2[i + 1]?.sceneryName"
                  class="scenery-change-name"
                >
-                  <span>{{ scheduleStops[i + 1].sceneryName }}</span>
-                  <span v-if="stop.departureLineInfo?.routeTracks == 1"> &UpDownArrow;</span>
-                  <span v-else> &UpArrowDownArrow;</span>
+                  <span>{{ scheduleStopsV2[i + 1].sceneryName }}</span>
+
+                  <i
+                    v-if="!scheduleStopsV2[i + 1].isSceneryOnline"
+                    class="fa-solid fa-ban fa-sm"
+                    data-tooltip-type="BaseTooltip"
+                    :data-tooltip-content="$t('app.tooltip-scenery-offline')"
+                    style="color: salmon; margin-left: 0.25em"
+                  ></i>
                </div>

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

-                  <span v-if="scheduleStops[i + 1].arrivalLineInfo">
-                    | {{ scheduleStops[i + 1].arrivalLineInfo!.routeSpeed }}
-                    <span v-if="scheduleStops[i + 1].arrivalLineInfo!.isElectric">⚡</span>
                    <img
-                      v-else
-                      src="/images/icon-we4a.png"
-                      :title="$t('trains.we4a-tooltip')"
-                      width="12"
+                      :src="
+                        scheduleStopsV2[i + 1].arrivalLineInfo?.isElectric
+                          ? '/images/icon-catenary.svg'
+                          : '/images/icon-we4a.png'
+                      "
+                      data-tooltip-type="BaseTooltip"
+                      :data-tooltip-content="
+                        $t(
+                          `trains.${!scheduleStopsV2[i + 1].arrivalLineInfo?.isElectric ? 'no-' : ''}catenary-tooltip`
+                        )
+                      "
+                      width="14"
+                    />
+
+                    <img
+                      v-if="scheduleStopsV2[i + 1].arrivalLineInfo!.isRouteSBL"
+                      src="/images/icon-sbl-transparent.svg"
+                      width="14"
+                      data-tooltip-type="BaseTooltip"
+                      :data-tooltip-content="$t('trains.sbl-tooltip')"
                    />
                  </span>
                </div>
@@ -104,44 +148,8 @@ import StopLabel from './StopLabel.vue';
 import StockList from '../Global/StockList.vue';
 import { useMainStore } from '../../store/mainStore';
 import { useApiStore } from '../../store/apiStore';
-import { StationRoutesInfo, Train } from '../../typings/common';
-
-export interface TrainScheduleStop {
-  nameHtml: string;
-  nameRaw: string;
-
-  status: 'confirmed' | 'unconfirmed' | 'stopped';
-  type: string;
-  position: 'begin' | 'end' | 'en-route';
-
-  arrivalScheduled: number;
-  arrivalReal: number;
-
-  departureScheduled: number;
-  departureReal: number;
-
-  departureDelay: number;
-  arrivalDelay: number;
-
-  duration: number | null;
-
-  isActive: boolean;
-  isLastConfirmed: boolean;
-  isSBL: boolean;
-
-  sceneryName: string | null;
-  distance: number;
-
-  arrivalLine: string | null;
-  departureLine: string | null;
-
-  arrivalLineInfo?: StationRoutesInfo;
-  departureLineInfo?: StationRoutesInfo;
-
-  isExternal: boolean;
-
-  comments: string | null;
-}
+import { StationRoutesInfo, TimetablePathElement, Train } from '../../typings/common';
+import { TrainSchedulePoint } from './typings';

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

-  computed: {
-    scheduleStops(): TrainScheduleStop[] {
-      let currentSceneryIndex = 0;
+  methods: {
+    getPathSceneryData(pathEl: TimetablePathElement) {
+      const sceneryData =
+        this.store.stationList?.find((sc) => sc.name == pathEl.stationName) ?? null;

-      return (
-        this.train.timetableData?.followingStops.map((stop, i, arr) => {
-          const isExternal =
-            i > 0 &&
-            stop.arrivalLine != null &&
-            (stop.arrivalLine != arr[i - 1].departureLine ||
-              (stop.arrivalLine == arr[i - 1].departureLine &&
-                !/-|_|(^it\d+)|(^sbl)/gi.test(stop.arrivalLine)));
+      if (!sceneryData || !sceneryData.generalInfo) return null;

-          if (isExternal) currentSceneryIndex++;
-
-          const sceneryName = this.train.timetableData!.sceneryNames[currentSceneryIndex];
-          const sceneryInfo = this.apiStore.sceneryData.find((st) => st.name == sceneryName);
-
-          const arrivalLineInfo = sceneryInfo?.routesInfo.find(
-            (r) => r.routeName == stop.arrivalLine
-          );
-
-          const departureLineInfo = sceneryInfo?.routesInfo.find(
-            (r) => r.routeName == stop.departureLine
-          );
-
-          return {
-            nameHtml: stop.stopName,
-            nameRaw: stop.stopNameRAW,
-
-            arrivalScheduled: stop.arrivalTimestamp,
-            arrivalReal: stop.arrivalRealTimestamp,
-
-            departureScheduled: stop.departureTimestamp,
-            departureReal: stop.departureRealTimestamp,
-
-            departureDelay: stop.departureDelay,
-            arrivalDelay: stop.arrivalDelay,
-
-            duration: stop.stopTime,
-
-            comments: stop.comments ?? null,
-
-            arrivalLine: stop.arrivalLine,
-            departureLine: stop.departureLine,
-
-            arrivalLineInfo: arrivalLineInfo,
-            departureLineInfo: departureLineInfo,
-
-            isExternal,
-
-            type: stop.stopType,
-            distance: stop.stopDistance,
-            isActive: this.activeMinorStops.includes(i),
-            isLastConfirmed: this.lastConfirmed === i && !stop.terminatesHere,
-            isSBL: /sbl/gi.test(stop.stopName),
-            position: stop.beginsHere ? 'begin' : stop.terminatesHere ? 'end' : 'en-route',
-            sceneryName,
-            status: stop.confirmed ? 'confirmed' : stop.stopped ? 'stopped' : 'unconfirmed'
-          };
-        }) ?? []
+      const activeScenery = this.apiStore.activeData?.activeSceneries?.find(
+        (sc) => sc.stationName == pathEl.stationName
      );
+
+      const arrivalLineData = pathEl.arrivalRouteExt
+        ? (sceneryData.generalInfo.routes.all.find(
+            (rt) => rt.routeName == pathEl.arrivalRouteExt
+          ) ?? null)
+        : null;
+
+      const departureLineData = pathEl.departureRouteExt
+        ? (sceneryData.generalInfo.routes.all.find(
+            (rt) => rt.routeName == pathEl.departureRouteExt
+          ) ?? null)
+        : null;
+
+      return {
+        generalInfo: sceneryData.generalInfo,
+        isOnline:
+          activeScenery &&
+          (activeScenery.isOnline == 1 || activeScenery.lastSeen >= Date.now() - 60000),
+        arrivalLineData,
+        departureLineData
+      };
+    }
+  },
+
+  computed: {
+    scheduleStopsV2() {
+      if (!this.train.timetableData) return [];
+
+      const { timetablePath, followingStops } = this.train.timetableData;
+
+      const stopRows: TrainSchedulePoint[] = [];
+
+      let currentPathIndex = 0;
+      let currentPath = timetablePath[0];
+
+      let pathData = this.getPathSceneryData(currentPath);
+
+      let arrivalLineInfo: StationRoutesInfo | null = null;
+      let departureLineInfo: StationRoutesInfo | null = null;
+
+      let isActive = false;
+
+      if (pathData?.departureLineData) {
+        arrivalLineInfo = pathData.departureLineData;
+        departureLineInfo = pathData.departureLineData;
+      }
+
+      for (const stop of followingStops) {
+        let isExternal = false;
+
+        if (
+          stop.arrivalLine &&
+          currentPath.arrivalRouteExt &&
+          stop.arrivalLine == currentPath.arrivalRouteExt
+        ) {
+          isExternal = true;
+
+          if (pathData?.arrivalLineData) {
+            arrivalLineInfo = pathData.arrivalLineData;
+          }
+        }
+
+        let correctedDepartureLineData: StationRoutesInfo | null = null;
+
+        const internalRouteInfo = stop.departureLine
+          ? pathData?.generalInfo.routes.all.find(
+              (route) => route.isInternal && route.routeName == stop.departureLine
+            )
+          : undefined;
+
+        if (internalRouteInfo) {
+          correctedDepartureLineData = internalRouteInfo;
+          departureLineInfo = internalRouteInfo;
+        }
+
+        let rowData: TrainSchedulePoint = {
+          nameHtml: stop.stopName,
+          nameRaw: stop.stopNameRAW,
+
+          arrivalScheduled: stop.arrivalTimestamp,
+          arrivalReal: stop.arrivalRealTimestamp,
+
+          departureScheduled: stop.departureTimestamp,
+          departureReal: stop.departureRealTimestamp,
+
+          departureDelay: stop.departureDelay,
+          arrivalDelay: stop.arrivalDelay,
+
+          duration: stop.stopTime ?? 0,
+          type: stop.stopType,
+          distance: stop.stopDistance,
+
+          comments: stop.comments ?? null,
+
+          arrivalLine: stop.arrivalLine,
+          departureLine: stop.departureLine,
+
+          arrivalLineInfo: arrivalLineInfo,
+          departureLineInfo,
+
+          isExternal,
+
+          isActive: isActive,
+
+          isSBL: /sbl/gi.test(stop.stopName),
+          position: stop.beginsHere ? 'begin' : stop.terminatesHere ? 'end' : 'en-route',
+          status: stop.confirmed ? 'confirmed' : stop.stopped ? 'stopped' : 'unconfirmed',
+
+          sceneryName: currentPath.stationName,
+          isSceneryOnline: pathData?.isOnline ?? false
+        };
+
+        if (internalRouteInfo) {
+          arrivalLineInfo = departureLineInfo;
+        }
+
+        if (
+          stopRows[stopRows.length - 1]?.status == 'confirmed' &&
+          rowData.status != 'confirmed' &&
+          rowData.status != 'stopped'
+        )
+          stopRows[stopRows.length - 1].isActive = true;
+
+        if (
+          stopRows[stopRows.length - 1]?.isActive == true &&
+          !/(^<strong>|, podg$)/.test(rowData.nameHtml)
+        )
+          rowData.isActive = true;
+
+        stopRows.push(rowData);
+
+        if (
+          stop.departureLine &&
+          currentPath.departureRouteExt &&
+          stop.departureLine == currentPath.departureRouteExt
+        ) {
+          // Reverse search for last scenery checkpoint
+          if (pathData?.departureLineData) {
+            stopRows[stopRows.length - 1].isExternal = true;
+
+            for (let i = stopRows.length - 1; i > 0; i--) {
+              stopRows[i].departureLineInfo = pathData.departureLineData;
+
+              if (/(^<strong>|, podg$)/.test(stopRows[i].nameHtml)) {
+                break;
+              }
+
+              stopRows[i].arrivalLineInfo = pathData.departureLineData;
+            }
+          }
+
+          currentPath = timetablePath[++currentPathIndex];
+          pathData = this.getPathSceneryData(currentPath);
+        }
+      }
+
+      return stopRows;
    },

    lastConfirmed() {
@@ -249,19 +362,13 @@ export default defineComponent({
        i < this.train.timetableData!.followingStops.length;
        i++
      ) {
-        if (/po\.|sbl/gi.test(this.train.timetableData!.followingStops[i].stopNameRAW))
+        if (/(, po$|sbl|, pe$)/gi.test(this.train.timetableData!.followingStops[i].stopNameRAW))
          activeMinorStopList.push(i);
        else break;
      }

      return activeMinorStopList;
    }
-  },
-
-  methods: {
-    toggleShowState() {
-      this.$emit('click');
-    }
  }
 });
 </script>
@@ -285,10 +392,6 @@ $blinkAnim: 0.5s ease-in-out alternate infinite blink;
  }
 }

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

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

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

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

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

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

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

@@ -523,8 +633,17 @@ $blinkAnim: 0.5s ease-in-out alternate infinite blink;
 }

 .scenery-route {
-  img {
-    vertical-align: middle;
+  display: flex;
+  gap: 0.25em;
+
+  span:nth-child(2) {
+    display: flex;
+    gap: 0.25em;
+    align-items: center;
+  }
+
+  img[data-tooltip] {
+    cursor: help;
  }
 }

@@ -1,5 +1,9 @@
 <template>
-  <div class="dropdown" @keydown.esc="showOptions = false" @focusout="showOptions = false">
+  <div
+    class="dropdown"
+    @keydown.esc="showOptions = false"
+    v-click-outside="() => (showOptions = false)"
+  >
    <div class="bg" v-if="showOptions" @click="showOptions = false"></div>

    <button class="filter-button btn--filled btn--image" @click="toggleShowOptions" ref="button">
@@ -19,21 +23,21 @@
        <div v-if="apiStore.dataStatuses.connection == Status.Loaded && regionTrains.length > 0">
          <div class="top-list general">
            <transition-group tag="ul" name="stats-anim">
-              <li class="badge" key="timetable-count">
+              <li class="badge stat-badge" key="timetable-count">
                <span>{{ $t('train-stats.timetable-count') }}</span>
                <span>
                  <b>{{ regionTrainsWithTT.length }}</b>
                </span>
              </li>

-              <li class="badge" key="avg-speed">
+              <li class="badge stat-badge" key="avg-speed">
                <span>{{ $t('train-stats.avg-speed') }}</span>
                <span>
                  <b>{{ stats.avgSpeed.toFixed(1) }} km/h</b>
                </span>
              </li>

-              <li class="badge" key="avg-distance">
+              <li class="badge stat-badge" key="avg-distance">
                <span>{{ $t('train-stats.avg-timetable') }}</span>
                <span>
                  <b>{{ stats.avgDistance.toFixed(1) }} km</b>
@@ -46,7 +50,7 @@
            <h3>{{ $t('train-stats.top-categories') }}</h3>

            <transition-group tag="ul" name="stats-anim">
-              <li class="badge" v-for="top in stats.topCategories" :key="top.name">
+              <li class="badge stat-badge" v-for="top in stats.topCategories" :key="top.name">
                <span>{{ top.name }}</span>
                <span>{{ top.count }}</span>
              </li>
@@ -61,7 +65,7 @@
            <h3>{{ $t('train-stats.top-vehicles') }}</h3>

            <transition-group tag="ul" name="stats-anim">
-              <li class="badge" v-for="top in stats.topVehicles" :key="top.name">
+              <li class="badge stat-badge" v-for="top in stats.topVehicles" :key="top.name">
                <span>{{ top.name }}</span>
                <span>{{ top.count }}</span>
              </li>
@@ -76,7 +80,7 @@
            <h3>{{ $t('train-stats.top-units') }}</h3>

            <transition-group tag="ul" name="stats-anim">
-              <li class="badge" v-for="top in stats.topUnits.slice(0, 7)" :key="top.name">
+              <li class="badge stat-badge" v-for="top in stats.topUnits.slice(0, 7)" :key="top.name">
                <span>{{ top.name }}</span>
                <span>{{ top.count }}</span>
              </li>
@@ -95,6 +99,8 @@
        <div class="no-data" v-else>
          {{ $t('train-stats.no-stats') }}
        </div>
+
+        <div tabindex="0" @focus="() => (showOptions = false)"></div>
      </div>
    </transition>
  </div>
@@ -236,45 +242,13 @@ h3 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
-
-  // @include smallScreen {
-  //   justify-content: center;
-  // }
-}
-
-.badge {
-  margin: 0;
-
-  & > span:first-child {
-    background-color: $accentCol;
-    color: black;
-  }
 }

 .dropdown_wrapper {
  max-width: 600px;
 }

-.stats-anim {
-  &-move,
-  &-enter-active,
-  &-leave-active {
-    transition: all 250ms ease;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-    transform: translateX(5px);
-  }
-
-  &-leave-active {
-    position: absolute;
-  }
-}
-
@include smallScreen {
-  h1,
  .no-data {
    text-align: center;
  }
@@ -1,5 +1,12 @@
 <template>
-  <transition name="status-anim" mode="out-in" tag="div" class="train-table">
+  <transition
+    name="status-anim"
+    mode="out-in"
+    tag="div"
+    class="train-table"
+    @scroll="onScroll"
+    ref="trainTableRef"
+  >
    <div :key="apiStore.dataStatuses.connection">
      <div class="table-warning" key="offline" v-if="store.isOffline">
        {{ $t('app.offline') }}
@@ -13,16 +20,7 @@
      </div>

      <transition-group name="list-anim" tag="ul">
-        <li
-          class="train-row"
-          v-for="train in trains"
-          :key="train.id"
-          tabindex="0"
-          @click.stop="selectModalTrain(train, $event.currentTarget)"
-          @keydown.enter="selectModalTrain(train, $event.currentTarget)"
-        >
-          <TrainInfo :train="train" :extended="false" />
-        </li>
+        <TrainTableItem v-for="train in trains" :key="train.id" :train="train" />
      </transition-group>
    </div>
  </transition>
@@ -30,15 +28,16 @@

 <script lang="ts">
 import { defineComponent, inject, PropType, Ref } from 'vue';
-import modalTrainMixin from '../../mixins/modalTrainMixin';
 import { useMainStore } from '../../store/mainStore';
-import Loading from '../Global/Loading.vue';
-import TrainInfo from './TrainInfo.vue';
-import { Status, Train } from '../../typings/common';
 import { useApiStore } from '../../store/apiStore';
+import { Status, Train } from '../../typings/common';
+
+import Loading from '../Global/Loading.vue';
+import TrainTableItem from './TrainTableItem.vue';
+import TrainInfo from './TrainInfo.vue';

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

  props: {
    trains: {
@@ -47,7 +46,9 @@ export default defineComponent({
    }
  },

-  mixins: [modalTrainMixin],
+  data: () => ({
+    scrollTop: 0
+  }),

  setup() {
    const store = useMainStore();
@@ -68,6 +69,16 @@ export default defineComponent({
    };
  },

+  activated() {
+    (this.$refs['trainTableRef'] as HTMLElement).scrollTop = this.scrollTop;
+  },
+
+  methods: {
+    onScroll(e: Event) {
+      this.scrollTop = (e.target as HTMLElement).scrollTop;
+    }
+  },
+
  computed: {
    dataStatus() {
      if (this.store.isOffline) return Status.Data.Offline;
@@ -86,10 +97,10 @@ export default defineComponent({
@import '../../styles/animations.scss';

 .train-table {
-  position: relative;
+  height: calc(100vh - 11em);
+  min-height: 500px;

-  height: 90vh;
-  min-height: 550px;
+  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
 }
@@ -102,12 +113,4 @@ export default defineComponent({

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

  twr = 'twr',
-  skr = 'skr',
+  tn = 'tn',
+  pn = 'pn',
  common = 'common',

  passenger = 'passenger',
  freight = 'freight',
  other = 'other',
+
  noTimetable = 'noTimetable',
  withTimetable = 'withTimetable'
 }
@@ -38,7 +42,12 @@ export const trainFilters: TrainFilter[] = [
    isActive: true
  },
  {
-    id: TrainFilterId.skr,
+    id: TrainFilterId.tn,
+    section: TrainFilterSection.TRAIN_TYPE,
+    isActive: true
+  },
+  {
+    id: TrainFilterId.pn,
    section: TrainFilterSection.TRAIN_TYPE,
    isActive: true
  },
@@ -117,3 +126,74 @@ export const sorterOptions: TrainSorter[] = [
    value: 'długość'
  }
 ];
+
+export interface TrainScheduleStop {
+  nameHtml: string;
+  nameRaw: string;
+
+  status: 'confirmed' | 'unconfirmed' | 'stopped';
+  type: string;
+  position: 'begin' | 'end' | 'en-route';
+
+  arrivalScheduled: number;
+  arrivalReal: number;
+
+  departureScheduled: number;
+  departureReal: number;
+
+  departureDelay: number;
+  arrivalDelay: number;
+
+  duration: number | null;
+
+  isActive: boolean;
+  isLastConfirmed: boolean;
+  isSBL: boolean;
+
+  sceneryName: string | null;
+  isSceneryOnline: boolean;
+
+  distance: number;
+
+  arrivalLine: string | null;
+  departureLine: string | null;
+
+  arrivalLineInfo?: StationRoutesInfo;
+  departureLineInfo?: StationRoutesInfo;
+
+  isExternal: boolean;
+
+  comments: string | null;
+}
+
+export interface TrainSchedulePoint {
+  nameHtml: string;
+  nameRaw: string;
+
+  status: 'confirmed' | 'unconfirmed' | 'stopped';
+  position: 'begin' | 'end' | 'en-route';
+  type: string;
+  duration: number;
+  distance: number;
+  arrivalScheduled: number;
+  arrivalReal: number;
+  departureScheduled: number;
+  departureReal: number;
+
+  comments: string | null;
+
+  arrivalDelay: number;
+  departureDelay: number;
+  arrivalLine: string | null;
+  departureLine: string | null;
+
+  arrivalLineInfo: StationRoutesInfo | null;
+  departureLineInfo: StationRoutesInfo | null;
+
+  isExternal: boolean,
+
+  isActive: boolean;
+  isSBL: boolean;
+  sceneryName: string | null;
+  isSceneryOnline: boolean;
+}
@@ -0,0 +1,156 @@
+{
+   "EU07": {
+      "passenger": {
+         "650000": 125
+      },
+      "cargo": {
+         "2000000": 70
+      },
+      "none": 110
+   },
+   "4E": {
+      "passenger": {
+         "650000": 125
+      },
+      "cargo": {
+         "2000000": 70
+      },
+      "none": 110
+   },
+   "EU07E": {
+      "passenger": {
+         "650000": 125
+      },
+      "cargo": {
+         "2000000": 70
+      },
+      "none": 110
+   },
+   "EP07": {
+      "passenger": {
+         "650000": 125
+      },
+      "cargo": null,
+      "none": 110
+   },
+   "EP08": {
+      "passenger": {
+         "650000": 140
+      },
+      "cargo": null,
+      "none": 110
+   },
+   "EP09": {
+      "passenger": {
+         "650000": 160
+      },
+      "cargo": null,
+      "none": 160
+   },
+   "ET22": {
+      "passenger": {
+         "650000": 125
+      },
+      "cargo": {
+         "1200000": 100,
+         "3100000": 70
+      },
+      "none": 125
+   },
+   "201E": {
+      "passenger": {
+         "650000": 125
+      },
+      "cargo": {
+         "1200000": 100,
+         "3100000": 70
+      },
+      "none": 125
+   },
+   "ET41": {
+      "passenger": {
+         "700000": 125
+      },
+      "cargo": {
+         "4000000": 70,
+         "3500000": 80,
+         "2500000": 90,
+         "2000000": 100
+      },
+      "none": 110
+   },
+   "SM42": {
+      "passenger": {
+         "95000": 90,
+         "200000": 80,
+         "300000": 70,
+         "450000": 60,
+         "750000": 50,
+         "1130000": 40,
+         "1720000": 30,
+         "2400000": 20
+      },
+      "cargo": {
+         "95000": 90,
+         "200000": 80,
+         "300000": 70,
+         "450000": 60,
+         "750000": 50,
+         "1130000": 40,
+         "1720000": 30,
+         "2400000": 20
+      },
+      "none": 90
+   },
+   "M62": {
+      "passenger": {
+         "500000": 100,
+         "800000": 80,
+         "1200000": 60,
+         "2000000": 40,
+         "3000000": 20
+      },
+      "cargo": {
+         "500000": 100,
+         "800000": 80,
+         "1200000": 60,
+         "2000000": 40,
+         "3000000": 20
+      },
+      "none": 100
+   },
+   "ST44": {
+      "passenger": {
+         "500000": 100,
+         "800000": 80,
+         "1200000": 60,
+         "2000000": 40,
+         "3000000": 20
+      },
+      "cargo": {
+         "500000": 100,
+         "800000": 80,
+         "1200000": 60,
+         "2000000": 40,
+         "3000000": 20
+      },
+      "none": 100
+   },
+   "CTLR4C": {
+      "passenger": {
+         "500000": 100,
+         "800000": 80,
+         "1200000": 60,
+         "2000000": 40,
+         "3000000": 20
+      },
+      "cargo": {
+         "500000": 100,
+         "800000": 80,
+         "1200000": 60,
+         "2000000": 40,
+         "3000000": 20
+      },
+      "none": 100
+   }
+}
@@ -20,11 +20,16 @@
    "dispatcher-message": "Dispatcher supporting the Stacjownik project!",
    "driver-message": "Driver supporting the Stacjownik project!"
  },
+  "warnings": {
+    "TWR": "Train with high risk cargo",
+    "SKR": "Train with exceeded gauge",
+    "PN": "Train with extra deliveries",
+    "TN": "Train with dangerous cargo",
+    "header-title": "Freight notes:"
+  },
  "general": {
    "and": " and ",
-    "refresh": "REFRESH",
-    "TWR": "High risk freight train",
-    "SKR": "Train with exceeded gauge"
+    "refresh": "REFRESH"
  },
  "update": {
    "title": "Stacjownik update!",
@@ -43,12 +48,49 @@
    "no-result": "No results for current search!",
    "migration-warning": "Stacjownik services will be unavailable 2/06/2022 between 1-3am (CEST time) due to the migration of API hostings!",
    "migration-confirm": "Roger that!",
-    "offline": "App is in the offline mode!"
+    "offline": "App is in the offline mode!",
+    "tooltip-driver-offline": "Driver is offline",
+    "tooltip-scenery-offline": "Scenery is offline"
  },
  "footer": {
    "discord": "Stacjownik Discord server"
  },
-
+  "categories": {
+    "EI": "domestic express",
+    "EC": "international express",
+    "EN": "domestic night express",
+    "MP": "intervoivodeship bullet",
+    "MO": "intervoivodeship regio",
+    "MM": "international bullet",
+    "MH": "intervoivodeship night bullet",
+    "RP": "voivodeship bullet",
+    "RM": "international voivodeship regio",
+    "RO": "voivodeship regio",
+    "RA": "voivodeship regio (urban)",
+    "PW": "empty passenger",
+    "PX": "empty passenger test drive",
+    "TC": "international freight (intermodal)",
+    "TG": "international freight (organized cargo)",
+    "TR": "international freight (unorganized cargo)",
+    "TD": "domestic freight (intermodal)",
+    "TM": "domestic freight (organized cargo)",
+    "TN": "domestic freight (unorganized cargo)",
+    "TK": "freight (for stations & sidings)",
+    "TS": "empty freight test drive",
+    "TH": "locomotive rolling stock (over 3 vehicles)",
+    "LT": "freight locomotive only",
+    "LP": "passenger locomotive only",
+    "LS": "shunting locomotive only",
+    "LZ": "shunting locomotive only",
+    "ZN": "inspection / diagnostic type",
+    "ZU": "other maintenance type",
+    "ZG": "emergency (deprecated)",
+    "AP": "voivodeship regio (deprecated)",
+    "E": "electric loco",
+    "J": "EMU",
+    "S": "diesel loco",
+    "M": "DMU"
+  },
  "vehicle-preview": {
    "loading": "Loading preview...",
    "error": "Oops! The vehicle preview seems to be missing! :/"
@@ -82,7 +124,6 @@
    "mechaniczne": "levers (mechanical)",
    "mechaniczne+SPK": "levers + SPK",
    "mechaniczne+SCS": "levers + SCS",
-
    "abbrevs": {
      "SPK": "SPK",
      "SCS": "SCS",
@@ -111,27 +152,24 @@
  "options": {
    "filters": "FILTERS",
    "donate": "DONATE",
-
    "search-button": "SEARCH",
    "reset-button": "RESET",
-
    "sort-title": "SORT BY:",
    "filter-title": "FILTER BY:",
    "search-title": "SEARCH:",
-
    "search-train-no": "Train no. / #",
    "search-train": "Train no.",
    "search-driver": "Driver name",
    "search-dispatcher": "Dispatcher name",
-    "search-station": "Scenery name",
+    "search-station": "Scenery name / #",
    "search-author": "Timetable author name",
    "search-issuedFrom": "Issuing scenery name",
    "search-via": "Via scenery name",
    "search-terminatingAt": "Terminating scenery name",
-    "search-timetables-date": "Timetable date (UTC+2 / CEST)",
-    "search-dispatchers-date": "Service date (UTC+2 / CEST)",
-    "search-date": "Date (UTC+2 / CEST)",
-
+    "search-timetables-date": "Timetable date",
+    "search-dispatchers-date": "Service date (from / to)",
+    "search-date-from": "Date (UTC+2 / CEST)",
+    "search-date-to": "Date (UTC+2 / CEST)",
    "sort-mass": "mass",
    "sort-speed": "speed",
    "sort-length": "length",
@@ -140,32 +178,29 @@
    "sort-progress": "route progress",
    "sort-delay": "current delay",
    "sort-id": "timetable id",
-
    "sort-allStopsCount": "total stops",
    "sort-beginDate": "date",
    "sort-timetableId": "timetable ID",
    "sort-timestampFrom": "date",
-    "sort-duration": "duration",
-
+    "sort-currentDuration": "duration",
    "filter-noComments": "NO COMMENTS",
    "filter-withComments": "COMMENTS",
-    "filter-twr": "HIGH RISK CARGO",
-    "filter-skr": "EXCEEDED GAUGE",
+    "filter-twr": "TWR",
+    "filter-skr": "SKR",
+    "filter-tn": "TN",
+    "filter-pn": "PN",
    "filter-twr-skr": "BOTH TYPES",
    "filter-all-specials": "ALL",
-    "filter-common": "NO WARNINGS",
+    "filter-common": "COMMON",
    "filter-passenger": "PASSENGER",
    "filter-freight": "FREIGHT",
    "filter-other": "OTHER",
    "filter-noTimetable": "NO TIMETABLE",
    "filter-withTimetable": "TIMETABLE",
-
    "filter-reset": "RESET FILTERS",
    "filter-clear": "CLEAR FILTERS",
-
    "filter-section-timetable-status": "TIMETABLE STATUS",
    "filter-section-special": "SPECIAL TYPE",
-
    "filter-all-statuses": "ALL",
    "filter-abandoned": "ABANDONED",
    "filter-fulfilled": "FULFILLED",
@@ -173,7 +208,6 @@
  },
  "filters": {
    "desc": " &bull; Left mouse click: select / unselect chosen filter <br /> &bull; Double left click: unselect all filters but chosen from a <b class='text--primary'>group</b> <br /> &bull; <span style='color: coral'>RESET</span>: reset all filters from a <b class='text--primary'>group</b>",
-
    "sections": {
      "quick": "QUICK FILTERS",
      "stationType": "STATION TYPE",
@@ -188,18 +222,14 @@
      "timetables": "ACTIVE TIMETABLES",
      "spawns": "OPEN SPAWNS"
    },
-
    "changed-filters-count": "Changed filters:",
    "no-changed-filters": "No changed filters",
-
    "all-available": "ALL AVAILABLE",
    "all-free": "CURRENTLY FREE",
-
    "endingStatus": "ENDS SOON",
    "afkStatus": "AFK",
    "noSpaceStatus": "NO SPACE",
    "unavailableStatus": "UNAVAILABLE",
-
    "title": "STATION FILTERS",
    "default": "IN-GAME",
    "notDefault": "ADDITIONAL",
@@ -208,7 +238,6 @@
    "unavailable": "UNSUPPORTED",
    "nonPublic": "NON-PUBLIC",
    "abandoned": "ABANDONED",
-
    "SPK": "SPK",
    "SPK-R": "SPK + MANUAL",
    "SPK-M": "SPK + MECH.",
@@ -218,29 +247,22 @@
    "SPE": "SPE",
    "manual": "MANUAL",
    "mechanical": "MECHANICAL",
-
    "SUP": "SUP (RASP-UZK)",
    "noSUP": "WITHOUT SUP",
-
    "ASDEK": "ASDEK",
    "noASDEK": "NO ASDEK",
-
    "SBL": "AUTOMATIC (SBL)",
    "PBL": "SEMIAUTOMATIC (PBL)",
-
    "modern": "MODERN",
    "semaphores": "SEMAPHORES",
    "mixed": "MIXED",
    "historical": "HISTORICAL",
    "free": "FREE",
    "occupied": "OCCUPIED",
-
    "withActiveTimetables": "ACTIVE",
    "withoutActiveTimetables": "NO ACTIVE",
-
    "junction": "JUNCTIONS",
    "nonJunction": "OTHER",
-
    "sliders": {
      "minLevel": "MIN. REQUIRED DISPATCHER LEVEL",
      "maxLevel": "MAX. REQUIRED DISPATCHER LEVEL",
@@ -251,11 +273,11 @@
      "minTwoWayCatenary": "MIN. CATENARY DOUBLE TRACK ROUTES",
      "minTwoWay": "MIN. OTHER DOUBLE TRACK ROUTES"
    },
-
+    "sceneries-search": "SCENERY SEARCH:",
+    "sceneries-placeholder": "Enter scenery name...",
    "authors-search": "SEARCH BY AUTHOR NAME (other filters apply):",
    "authors-placeholder": "Enter the author nickname...",
-    "authors-button-title": "Search",
-
+    "search-button-title": "SEARCH",
    "minimum-hours-title": "SHOW ONLY SCENERIES UNTIL:",
    "now": "NOW",
    "hour": "h",
@@ -318,7 +340,6 @@
    "no-trains": "No trains to show here!",
    "loading": "Loading train data...",
    "offline": "Offline ride",
-
    "stats": "TRAFFIC STATISTICS",
    "stats-speed": "TRAINS SPEED (MIN, AVG, MAX) [km/h]",
    "stats-length": "TIMETABLES LENGTH (MIN, AVG, MAX) [km]",
@@ -326,20 +347,17 @@
    "stats-special-twr": "HIGH RISK",
    "stats-special-skr": "EXCEEDED STRUCT. GAUGE",
    "stats-locos": "MOST COMMON UNITS",
-
    "current-scenery": "on scenery",
    "current-signal": "at signal",
    "current-track": "on track",
-
-    "vmax-tooltip": "Maximum train speed based on rolling stock vehicles - braked weight is not included",
-    "we4a-tooltip": "Non-electrified track",
-
+    "vmax-tooltip": "Maximum speed based on vehicles and acceptable train mass",
+    "catenary-tooltip": "Electrified route",
+    "no-catenary-tooltip": "Non-electrified route",
+    "sbl-tooltip": "Route with SBL\n(automatic block signalling)",
    "delayed": "Delayed: ",
    "preponed": "Ahead of schedule: ",
    "on-time": "On time",
-
    "route-progress": "Progress: ",
-
    "detailed-timetable": "Detailed timetable for train no. ",
    "via-title": "Via: ",
    "no-timetable": "no current timetable",
@@ -352,15 +370,23 @@
    "timetable-comments": "Exploitation comments available for this train",
    "comment": "Exploitation comments for: ",
    "table-limit": "For performance reasons there's a limit of 10 trains shown at the same time.",
-
    "last-seen-now": "since now",
    "last-seen-min": "since one minute",
    "last-seen-ago": "since {minutes} minutes",
-
    "scenery-offline": "Offline ride",
    "timeout": "An error occured while trying to refresh SWDR timetable data!",
-
-    "journal-button": "DRIVER'S JOURNAL"
+    "driver-journal-link": "DRIVER JOURNAL",
+    "driver-srjp-link": "SRJP",
+    "driver-return-link": "GO BACK",
+    "driver-not-found-header": "Train not found! :/",
+    "driver-not-found-desc-1": "This train has already been terminated, changed its number or is offline.",
+    "driver-not-found-desc-2": "You can browse timetable history in the",
+    "driver-not-found-journal": "TIMETABLES JOURNAL",
+    "driver-not-found-others": "Player {driver} is online as:",
+    "driver-not-found-return": "GO BACK TO THE MAIN SITE",
+    "stock-copy": "COPY THE STOCK",
+    "stock-clipboard-success": "Successfully copied the railway stock in a text form to your clipboard!",
+    "stock-clipboard-failure": "Oops! Something happened and the railway stock couldn't be copied to your clipboard! :/"
  },
  "train-stats": {
    "stats-button": "STATISTICS",
@@ -382,13 +408,10 @@
    "loading": "Loading dispatcher history data...",
    "no-history": "No dispatcher history found!",
    "data-refreshed-at": "Data refreshed at",
-
    "section-timetables": "TIMETABLES",
    "section-dispatchers": "DISPATCHERS",
-
    "no-further-data": "No further data for current parameters",
    "loading-further-data": "Loading...",
-
    "route-length": "Route length:",
    "station-count": "Stations:",
    "dispatcher-name": "Author",
@@ -397,24 +420,25 @@
    "timetable-fulfilled": "FULFILLED",
    "timetable-abandoned": "ABANDONED",
    "timetable-online-button": "ONLINE TIMETABLE",
-
    "online-since": "ONLINE SINCE",
    "duty-lasted": "The duty lasted",
-
    "hours": "{value} hour | {value} hours",
    "minutes": "{value} min | {value} mins",
    "seconds": "{value} s",
-
-    "stock-info": "DETAILS",
+    "entry-details": "DETAILS",
+    "no-entry-details": "NO DETAILS AVAILABLE",
    "stock-length": "Length",
    "stock-mass": "Mass",
    "stock-max-speed": "Max. speed",
-
+    "stock-timetable-speed": "Timetable speed",
+    "stock-dangers": "ADDITIONAL NOTES",
+    "stock-preview": "STOCK PREVIEW",
+    "stock-copy": "COPY THE STOCK",
+    "stock-clipboard-success": "Successfully copied the railway stock in a text form to your clipboard:",
+    "stock-clipboard-failure": "Oops! Something happened and the railway stock couldn't be copied to your clipboard! :/",
    "load-data": "Load further data...",
-
    "last-seen-at": "Last seen at",
    "currently-at": "Currently at",
-
    "driver-stats": {
      "button": "DRIVER STATS",
      "title": "{name}'s DRIVER STATS",
@@ -425,7 +449,6 @@
      "distance": "DISTANCE",
      "stations": "STATIONS"
    },
-
    "daily-stats": {
      "button": "DAILY STATS",
      "title": "STATS OF THE DAY",
@@ -437,14 +460,12 @@
      "most-active-driver": "The most active driver: {driver} (total driven distance: {distance})",
      "longest-duties": "The longest service: {dispatcher} at {station} (duration: {duration})",
      "count": "timetable | timetables",
-
      "rippedSwitches": "RIPPED SWITCHES",
      "derailments": "DERAILMENTS",
      "skippedStopSignals": "SKIPPED STOP SIGNALS",
      "radioStops": "RADIOSTOPS",
      "kills": "KILLS"
    },
-
    "dispatcher-stats": {
      "button": "DISPATCHER STATS",
      "title": "{name}'s DISPATCHER STATS",
@@ -458,13 +479,10 @@
      "timetables-max": "LONGEST TIMETABLE",
      "timetables-avg": "AVG TIMETABLE DISTANCE"
    },
-
    "stats-loading": "Fetching statistics...",
    "stats-error": "Oops! An unexpected error occurred while trying to fetch statistics! :/",
-
    "timetable-location-signal": "signal:",
    "timetable-location-route": "route:",
-
    "history-name": "Scenery name",
    "history-hash": "Hash",
    "history-dispatcher": "Dispatcher",
@@ -491,30 +509,22 @@
    "project-title": "Project name",
    "one-way-routes": "One way routes",
    "two-way-routes": "Two way routes",
-
    "option-active-timetables": "Active timetables",
    "option-timetables-history": "Timetables history PL1",
    "option-dispatchers-history": "Dispatchers history PL1",
-
    "timetable-via": "ALL TIMETABLES",
    "timetable-issuedFrom": "BEGINS HERE",
    "timetable-terminatingAt": "TERMINATES HERE",
-
    "timetable-issued-date": "Issued",
    "timetable-issued-by": " by:",
    "timetable-issued-for": " for driver:",
-
    "dispatcher-rate": "Rate:",
    "dispatcher-status-changes": "Status changes:",
-
    "req-level": "all dispatcher levels | dispatcher level {lvl} required | dispatcher level {lvl} required",
    "history-list-empty": "No recorded scenery history!",
-
    "forum-topic": "Official {name} forum topic",
-
-    "pragotron-link": "Timetable pallet board (beta)",
+    "pragotron-link": "Timetable pallet board",
    "tablice-link": "Timetable summary board (by Thundo)",
-
    "bottom-info": "Show full history in the Journal tab"
  },
  "availability": {
@@ -531,10 +541,8 @@
    "terminated": "Timetable terminated",
    "begins": "BEGINS HERE",
    "terminates": "TERMINATES\nHERE",
-
    "from": "FROM",
    "to": "TO",
-
    "desc-arriving": "The train is not here yet. It's going to come from: {prevStationName} (szlak {prevDepartureLine})",
    "desc-online": "The train is at the station. It's going to leave to: {nextStationName} (szlak {nextArrivalLine})",
    "desc-stopped": "The train is at the station and is stopped. It's going to leave towards: {nextStationName} (szlak {nextArrivalLine})",
@@ -549,4 +557,4 @@
    "search-train": "Train no.",
    "search-driver": "Driver name"
  }
-}
+}
@@ -20,11 +20,16 @@
    "dispatcher-message": "Dyżurny wspierający projekt Stacjownika!",
    "driver-message": "Maszynista wspierający projekt Stacjownika!"
  },
+  "warnings": {
+    "TWR": "Pociąg z towarami niebezpiecznymi wysokiego ryzyka",
+    "SKR": "Pociąg z przekroczoną skrajnią",
+    "PN": "Pociąg z przesyłkami nadzwyczajnymi",
+    "TN": "Pociąg z towarami niebezpiecznymi",
+    "header-title": "Uwagi przewozowe:"
+  },
  "general": {
    "and": " oraz ",
-    "refresh": "ODŚWIEŻ",
-    "TWR": "Towar niebezpieczny wysokiego ryzyka",
-    "SKR": "Przekroczona skrajnia"
+    "refresh": "ODŚWIEŻ"
  },
  "update": {
    "title": "Aktualizacja Stacjownika!",
@@ -40,11 +45,49 @@
    "loading": "Pobieranie danych...",
    "error": "Wystąpił problem z załadowaniem danych!",
    "no-result": "Brak wyników o podanych kryteriach!",
-    "offline": "Aplikacja w trybie offline!"
+    "offline": "Aplikacja w trybie offline!",
+    "tooltip-driver-offline": "Maszynista offline",
+    "tooltip-scenery-offline": "Sceneria offline"
  },
  "footer": {
    "discord": "Serwer Discord Stacjownika"
  },
+  "categories": {
+    "EI": "ekspres krajowy",
+    "EC": "ekspres międzynarodowy",
+    "EN": "ekspres krajowy nocny",
+    "MP": "międzywojewódzki pospieszny",
+    "MO": "międzywojewódzki osobowy",
+    "MM": "międzynarodowy pospieszny",
+    "MH": "międzywojewódzki pospieszny (nocny)",
+    "RP": "wojewódzki pospieszny",
+    "RO": "wojewódzki osobowy",
+    "RM": "wojewódzki osobowy międzynarodowy",
+    "RA": "wojewódzki osobowy aglomeracyjny",
+    "PW": "pasażerski próżny - służbowy",
+    "PX": "pasażerski próżny próbny",
+    "TC": "towarowy międzynarodowy intermodalny",
+    "TG": "towarowy międzynarodowy masowy",
+    "TR": "towarowy międzynarodowy niemasowy",
+    "TD": "towarowy krajowy intermodalny",
+    "TM": "towarowy krajowy masowy",
+    "TN": "towarowy krajowy niemasowy",
+    "TK": "towarowy zdawczy",
+    "TS": "towarowy próżny próbny",
+    "TH": "skład lokomotyw (powyżej 3 pojazdów)",
+    "LT": "lokomotywa towarowa luzem",
+    "LP": "lokomotywa pasażerska luzem",
+    "LS": "lokomotywa manewrowa luzem",
+    "LZ": "lokomotywa dla poc. utrzymaniowo-naprawczych",
+    "ZN": "inspekcyjny / diagnostyczny",
+    "ZU": "inny utrzymaniowy",
+    "ZG": "ratunkowy (kat. wycofana)",
+    "AP": "wojewódzki osobowy (kat. wycofana)",
+    "E": "elektrowóz",
+    "J": "EZT",
+    "S": "spalinowóz",
+    "M": "SZT"
+  },
  "vehicle-preview": {
    "loading": "Ładowanie podglądu...",
    "error": "Ups! Nie znaleziono podglądu pojazdu! :/"
@@ -78,7 +121,6 @@
    "mechaniczne": "mechaniczne",
    "mechaniczne+SPK": "mechaniczne z SPK",
    "mechaniczne+SCS": "mechaniczne z SCS",
-
    "abbrevs": {
      "SPK": "SPK",
      "SCS": "SCS",
@@ -107,35 +149,31 @@
  "options": {
    "filters": "FILTRY",
    "donate": "WESPRZYJ",
-
    "search-button": "SZUKAJ",
    "reset-button": "ZRESETUJ",
-
    "sort-title": "SORTUJ WG:",
    "filter-title": "FILTRUJ WG:",
    "search-title": "SZUKAJ:",
-
    "search-train-no": "Nr pociągu",
    "search-train": "Nr pociągu / #",
    "search-driver": "Nick maszynisty",
    "search-dispatcher": "Nick dyżurnego",
-    "search-station": "Nazwa scenerii",
+    "search-station": "Nazwa scenerii / #",
    "search-author": "Nick autora rozkładu jazdy",
    "search-issuedFrom": "Sceneria początkowa",
    "search-via": "Przez scenerię",
    "search-terminatingAt": "Sceneria końcowa",
-    "search-timetables-date": "Data rozkładu jazdy (UTC+2 / CEST)",
-    "search-dispatchers-date": "Data służby (UTC+2 / CEST)",
-    "search-date": "Data (UTC+2 / CEST)",
-
+    "search-timetables-date": "Data rozkładu jazdy",
+    "search-dispatchers-date": "Data służby (od / do)",
+    "search-date-from": "Data (UTC+2 / CEST)",
+    "search-date-to": "Data (UTC+2 / CEST)",
    "sort-routeDistance": "kilometraż",
    "sort-allStopsCount": "stacje",
    "sort-beginDate": "data",
    "sort-timetableId": "ID rozkładu",
    "sort-timestampFrom": "data",
-    "sort-duration": "czas dyżuru",
+    "sort-currentDuration": "czas dyżuru",
    "sort-id": "id rozkładu",
-
    "sort-mass": "masa",
    "sort-speed": "prędkość",
    "sort-length": "długość",
@@ -143,11 +181,12 @@
    "sort-progress": "przebyta trasa",
    "sort-delay": "opóźnienie",
    "sort-comments": "uwagi ekspl.",
-
    "filter-withComments": "UWAGI EKSPLOATACYJNE",
    "filter-noComments": "BEZ UWAG",
-    "filter-twr": "WYS. RYZYKA",
-    "filter-skr": "SKRAJNIA",
+    "filter-twr": "TWR",
+    "filter-skr": "SKR",
+    "filter-tn": "TN",
+    "filter-pn": "PN",
    "filter-twr-skr": "TWR/SKR",
    "filter-all-statuses": "WSZYSTKIE",
    "filter-common": "ZWYKŁE",
@@ -156,13 +195,10 @@
    "filter-other": "INNE",
    "filter-noTimetable": "BEZ RJ",
    "filter-withTimetable": "ROZKŁAD JAZDY",
-
    "filter-reset": "ZRESETUJ FILTRY",
    "filter-clear": "WYŁĄCZ FILTRY",
-
    "filter-section-timetable-status": "STATUS ROZKŁADU JAZDY",
    "filter-section-special": "TYPY SPECJALNE",
-
    "filter-all-specials": "WSZYSTKIE",
    "filter-abandoned": "PORZUCONE",
    "filter-fulfilled": "WYPEŁNIONE",
@@ -170,7 +206,6 @@
  },
  "filters": {
    "desc": " &bull; Kliknięcie: zaznaczenie / odznaczenie filtru <br /> &bull; Podwójne kliknięcie: odznaczenie reszty filtrów z <b class='text--primary'>grupy</b> <br /> &bull; <span style='color: coral'>RESET</span>: zresetowanie filtrów z <b class='text--primary'>grupy</b>",
-
    "sections": {
      "quick": "SZYBKIE FILTRY",
      "stationType": "RODZAJ STACJI",
@@ -185,18 +220,14 @@
      "timetables": "AKTYWNE ROZKŁADY JAZDY",
      "spawns": "OTWARTE SPAWNY"
    },
-
    "changed-filters-count": "Zmienione filtry:",
    "no-changed-filters": "Brak zmienionych filtrów",
-
    "all-available": "WSZYSTKIE DOSTĘPNE",
    "all-free": "WSZYSTKIE WOLNE",
-
    "endingStatus": "KOŃCZY",
    "afkStatus": "Z/W",
    "noSpaceStatus": "BRAK MIEJSCA",
    "unavailableStatus": "NIEDOSTĘPNY",
-
    "title": "FILTRUJ STACJE",
    "default": "DOMYŚLNA",
    "notDefault": "POZA PACZKĄ",
@@ -205,7 +236,6 @@
    "unavailable": "NIEDOSTĘPNA",
    "nonPublic": "NIEPUBLICZNA",
    "abandoned": "WYCOFANA",
-
    "SPK": "SPK",
    "SPK-R": "SPK + RĘCZNE",
    "SPK-M": "SPK + MECH.",
@@ -214,16 +244,12 @@
    "SCS-M": "SCS + MECH.",
    "SPE": "SPE",
    "manual": "RĘCZNE",
-
    "SUP": "SUP (RASP-UZK)",
    "noSUP": "BEZ SUP",
-
    "ASDEK": "ASDEK",
    "noASDEK": "BEZ ASDEK-a",
-
    "SBL": "SAMOCZYNNA",
    "PBL": "PÓŁSAMOCZYNNA",
-
    "mechanical": "MECHANICZNE",
    "modern": "WSPÓŁCZESNA",
    "semaphores": "KSZTAŁTOWA",
@@ -231,13 +257,10 @@
    "historical": "HISTORYCZNA",
    "free": "WOLNA",
    "occupied": "ZAJĘTA",
-
    "withActiveTimetables": "AKTYWNE",
    "withoutActiveTimetables": "BEZ AKTYWNYCH",
-
    "junction": "WĘZŁOWE",
    "nonJunction": "INNE",
-
    "sliders": {
      "minLevel": "MIN. WYMAGANY POZIOM DYŻURNEGO",
      "maxLevel": "MAKS. WYMAGANY POZIOM DYŻURNEGO",
@@ -248,10 +271,11 @@
      "minTwoWayCatenary": "SZLAKI DWUTOROWE ZELEKTR. (MINIMUM)",
      "minTwoWay": "SZLAKI DWUTOROWE NIEZELEKTR. (MINIMUM)"
    },
-
-    "authors-search": "SZUKAJ AUTORA (uwzględnia inne filtry):",
+    "sceneries-search": "WYSZUKAJ SCENERIĘ:",
+    "sceneries-placeholder": "Wpisz nazwę scenerii...",
+    "authors-search": "WYSZUKAJ AUTORA (uwzględnia inne filtry):",
    "authors-placeholder": "Wpisz nick autora...",
-    "authors-button-title": "Szukaj",
+    "search-button-title": "SZUKAJ",
    "minimum-hours-title": "POKAŻ TYLKO SCENERIE DOSTĘPNE MINIMUM DO:",
    "now": "TERAZ",
    "hour": " godz.",
@@ -312,20 +336,17 @@
    "no-trains": "Brak pociągów do wyświetlenia!",
    "loading": "Pobieranie danych o pociągach...",
    "offline": "Przejazd offline",
-
    "current-scenery": "na scenerii",
    "current-signal": "przy semaforze",
    "current-track": "na szlaku",
-
-    "vmax-tooltip": "Maksymalna prędkość na podstawie pojazdów w składzie - nie bierze pod uwagę masy hamowania",
-    "we4a-tooltip": "Szlak niezelektryfikowany",
-
+    "vmax-tooltip": "Maksymalna prędkość obliczona na podstawie pojazdów w składzie i masy dopuszczalnej",
+    "catenary-tooltip": "Szlak zelektryfikowany",
+    "no-catenary-tooltip": "Szlak niezelektryfikowany",
+    "sbl-tooltip": "Szlak posiadający\nsamoczynną blokadę liniową",
    "delayed": "Opóźniony: ",
    "preponed": "Przed czasem: ",
    "on-time": "Planowo",
-
    "route-progress": "Postęp: ",
-
    "detailed-timetable": "Szczegółowy rozkład jazdy pociągu ",
    "via-title": "Przez: ",
    "no-timetable": "brak rozkładu jazdy",
@@ -336,16 +357,23 @@
    "loco-diesel": "Spalinowóz",
    "timetable-comments": "Pociąg z uwagami eksploatacyjnymi",
    "comment": "Uwagi eksploatacyjne dla: ",
-
    "last-seen-now": "od niedawna",
    "last-seen-min": "od minuty",
    "last-seen-ago": "od {minutes} minut",
-
    "scenery-offline": "Przejazd offline",
-
    "timeout": "Wystąpił problem z aktualizacją rozkładów jazdy z SWDR",
-
-    "journal-button": "DZIENNIK MASZYNISTY"
+    "driver-journal-link": "DZIENNIK MASZYNISTY",
+    "driver-srjp-link": "SRJP",
+    "driver-return-link": "POWRÓT",
+    "driver-not-found-header": "Nie znaleziono pociągu! :/",
+    "driver-not-found-desc-1": "Ten pociąg prawdopodobnie zakończył już swój bieg, zmienił numer lub jest offline.",
+    "driver-not-found-desc-2": "Historię rozkładów jazdy możesz przejrzeć w",
+    "driver-not-found-journal": "DZIENNIKU RJ",
+    "driver-not-found-others": "Gracz {driver} jest online jako:",
+    "driver-not-found-return": "WRÓĆ NA STRONĘ GŁÓWNĄ",
+    "stock-copy": "SKOPIUJ SKŁAD",
+    "stock-clipboard-success": "Pomyślnie skopiowano skład w postaci tekstowej do schowka!",
+    "stock-clipboard-failure": "Ups! Nie udało się skopiować składu do schowka! :/"
  },
  "train-stats": {
    "stats-button": "STATYSTYKI",
@@ -367,19 +395,15 @@
    "loading": "Ładowanie historii dyżurów...",
    "no-history": "Brak historii dyżurów dla tej scenerii!",
    "data-refreshed-at": "Dane odświeżone o",
-
    "section-timetables": "ROZKŁADY JAZDY",
    "section-dispatchers": "DYŻURNI",
-
    "no-further-data": "Brak dalszych wyników dla podanych parametrów",
    "loading-further-data": "Ładowanie...",
-
    "online-since": "ONLINE OD",
    "duty-lasted": "Dyżur trwał",
    "hours": "{value} godz.",
    "minutes": "{value} min.",
    "seconds": "{value} sek.",
-
    "route-length": "Kilometraż:",
    "station-count": "Stacje:",
    "dispatcher-name": "Autor",
@@ -388,17 +412,20 @@
    "timetable-fulfilled": "WYPEŁNIONY",
    "timetable-abandoned": "PORZUCONY",
    "timetable-online-button": "RJ ONLINE",
-
-    "stock-info": "SZCZEGÓŁY",
+    "entry-details": "SZCZEGÓŁY",
+    "no-entry-details": "BRAK DOSTĘPNYCH SZCZEGÓŁÓW",
    "stock-length": "Długość",
    "stock-mass": "Masa",
    "stock-max-speed": "Prędkość maks.",
-
+    "stock-timetable-speed": "Prędkość RJ",
+    "stock-dangers": "DODATKOWE UWAGI",
+    "stock-preview": "PODGLĄD SKŁADU",
+    "stock-copy": "SKOPIUJ SKŁAD",
+    "stock-clipboard-success": "Pomyślnie skopiowano skład w postaci tekstowej do schowka:",
+    "stock-clipboard-failure": "Ups! Nie udało się skopiować składu do schowka! :/",
    "load-data": "Pobierz dalszą historię...",
-
    "last-seen-at": "Ostatnio widziany na: ",
    "currently-at": "Obecnie na scenerii: ",
-
    "driver-stats": {
      "button": "STAT. MASZYNISTY",
      "title": "STATYSTYKI MASZYNISTY {name}",
@@ -409,7 +436,6 @@
      "distance": "DYSTANS",
      "stations": "STACJE"
    },
-
    "daily-stats": {
      "button": "STATYSTYKI DNIA",
      "title": "STATYSTYKI DNIA",
@@ -421,14 +447,12 @@
      "most-active-driver": "Najaktywniejszy maszynista: {driver} (łączny przejechany dystans: {distance})",
      "longest-duties": "Najdłuższa służba: {dispatcher} na scenerii {station} (czas trwania: {duration})",
      "count": "rozkład jazdy | rozkładów jazdy",
-
      "rippedSwitches": "ROZPRUTE ZWROTNICE",
      "derailments": "WYKOLEJENIA",
      "skippedStopSignals": "POMINIĘTE S1",
      "radioStops": "RADIOSTOPY",
      "kills": "POTRĄCENIA"
    },
-
    "dispatcher-stats": {
      "button": "STATYSTYKI DYŻURNEGO",
      "title": "STATYSTYKI DYŻURNEGO {name}",
@@ -441,13 +465,10 @@
      "timetables-max": "NAJDŁUŻSZY WYSTAWIONY RJ",
      "timetables-avg": "ŚREDNIA WYSTAWIONYCH RJ"
    },
-
    "stats-loading": "Pobieranie statystyk...",
    "stats-error": "Ups! Wystąpił błąd podczas próby pobrania statystyk!",
-
    "timetable-location-signal": "semafor:",
    "timetable-location-route": "szlak:",
-
    "history-name": "Sceneria",
    "history-hash": "Hash",
    "history-dispatcher": "Dyżurny",
@@ -474,30 +495,22 @@
    "project-title": "Projekt",
    "one-way-routes": "Szlaki jednotorowe",
    "two-way-routes": "Szlaki dwutorowe",
-
    "option-active-timetables": "Aktywne rozkłady jazdy",
    "option-timetables-history": "Historia rozkładów PL1",
    "option-dispatchers-history": "Historia dyżurów PL1",
-
    "timetable-via": "WSZYSTKIE RJ",
    "timetable-issuedFrom": "ROZPOCZYNA BIEG",
    "timetable-terminatingAt": "KOŃCZY BIEG",
-
    "timetable-issued-date": "Wystawiony",
    "timetable-issued-by": " przez:",
    "timetable-issued-for": " dla maszynisty:",
-
    "dispatcher-rate": "Ocena:",
    "dispatcher-status-changes": "Zmiany statusów:",
-
    "req-level": "ogólnodostępna | minimum {lvl} poziom dyżurnego | minimum {lvl} poziom dyżurnego",
    "history-list-empty": "Brak historii dla tej scenerii!",
-
    "forum-topic": "Oficjalny wątek scenerii {name}",
-
-    "pragotron-link": "Paletowa tablica informacyjna (beta)",
+    "pragotron-link": "Paletowa tablica informacyjna",
    "tablice-link": "Tablica informacyjna zbiorcza (autorstwa Thundo)",
-
    "bottom-info": "Pokaż pełną historię w zakładce Dziennika"
  },
  "availability": {
@@ -514,10 +527,8 @@
    "terminated": "Rozkład jazdy zakończony",
    "begins": "ROZPOCZYNA\nBIEG",
    "terminates": "KOŃCZY BIEG",
-
    "from": "Z",
    "to": "DO",
-
    "desc-arriving": "Pociągu nie ma jeszcze na tej scenerii. Przyjedzie z: {prevStationName} (szlak {prevDepartureLine})",
    "desc-online": "Pociąg jest na tej scenerii. Odjedzie do: {nextStationName} (szlak {nextArrivalLine})",
    "desc-stopped": "Pociąg jest na tej scenerii i odbywa postój. Odjedzie do: {nextStationName} (szlak {nextArrivalLine})",
@@ -530,4 +541,4 @@
  "history": {
    "title": "DZIENNIK ROZKŁADÓW JAZDY"
  }
-}
+}
@@ -45,8 +45,11 @@ function filterTrainList(
        case TrainFilterId.twr:
          return !train.timetableData?.TWR;

-        case TrainFilterId.skr:
-          return !train.timetableData?.SKR;
+        case TrainFilterId.pn:
+          return !train.timetableData?.hasExtraDeliveries;
+
+        case TrainFilterId.tn:
+          return !train.timetableData?.hasDangerousCargo;

        case TrainFilterId.common:
          return train.timetableData?.SKR || train.timetableData?.TWR;
@@ -57,6 +57,10 @@ export default defineComponent({
        : '';
    },

+    dateStringToTimestamp(dateString?: string) {
+      return dateString ? new Date(dateString).getTime() : 0;
+    },
+
    calculateDuration(timestampMs: number, showSeconds = false) {
      const secondsTotal = Math.floor(timestampMs / 1000);
      const minsTotal = Math.round(timestampMs / 60000);
@@ -70,8 +74,8 @@ export default defineComponent({
            minsInHour
          )}`
        : showSeconds && secondsTotal <= 60
-        ? this.$t('journal.seconds', { value: secondsTotal }, secondsTotal)
-        : this.$t('journal.minutes', { value: minsTotal }, minsTotal);
+          ? this.$t('journal.seconds', { value: secondsTotal }, secondsTotal)
+          : this.$t('journal.minutes', { value: minsTotal }, minsTotal);
    }
  }
 });
@@ -1,30 +0,0 @@
-import { defineComponent } from 'vue';
-import { useMainStore } from '../store/mainStore';
-import { useTooltipStore } from '../store/tooltipStore';
-import { Train } from '../typings/common';
-
-export default defineComponent({
-  data() {
-    return {
-      store: useMainStore(),
-      tooltipStore: useTooltipStore()
-    };
-  },
-
-  methods: {
-    selectModalTrain(train: Train, target?: EventTarget | null) {
-      this.store.chosenModalTrainId = train.modalId;
-      if (target) this.store.modalLastClickedTarget = target;
-    },
-
-    selectModalTrainById(modalId: string, target?: EventTarget | null) {
-      this.store.chosenModalTrainId = modalId;
-      if (target) this.store.modalLastClickedTarget = target;
-    },
-
-    closeModal() {
-      this.store.chosenModalTrainId = undefined;
-      this.tooltipStore.hide();
-    }
-  }
-});
@@ -0,0 +1,12 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  methods: {
+    getCategoryExplanation(categoryCode: string) {
+      const categoryKey = categoryCode.slice(0, 2);
+      const vehicleTypeKey = categoryCode.slice(-1);
+
+      return `${this.$t('categories.' + categoryKey)}\n(${this.$t('categories.' + vehicleTypeKey)})`;
+    }
+  }
+});
@@ -75,18 +75,18 @@ export default defineComponent({
      return positionString.charAt(0).toUpperCase() + positionString.slice(1);
    },

-    displayStopList(stops: TrainStop[]): string | undefined {
+    getTrainStopsHtml(stops: TrainStop[]): string {
      if (!stops) return '';

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

    currentDelay(stops: TrainStop[]) {
-      const delay =
-        stops.find(
-          (stop, i) =>
-            (i == 0 && !stop.confirmed) || (i > 0 && stops[i - 1].confirmed && !stop.confirmed)
-        )?.departureDelay || 0;
+      const lastConfirmedStop = stops.find(
+        (stop, i) =>
+          (i == 0 && !stop.confirmed) ||
+          (i > 0 && stops[i - 1].confirmed && !stop.confirmed) ||
+          (stops[i + 1] == undefined && stop.confirmed)
+      );

-      if (delay > 0)
-        return `<span style='color: salmon'>${this.$t('trains.delayed')} ${delay} min</span>`;
-      else if (delay < 0)
-        return `<span style='color: lightgreen'>${this.$t('trains.preponed')} ${delay} min</span>`;
+      const lastDelay = lastConfirmedStop?.departureDelay ?? lastConfirmedStop?.arrivalDelay ?? 0;
+
+      if (lastDelay > 0)
+        return `<span style='color: salmon'>${this.$t('trains.delayed')} ${lastDelay} min</span>`;
+      else if (lastDelay < 0)
+        return `<span style='color: lightgreen'>${this.$t('trains.preponed')} ${lastDelay} min</span>`;
      else return this.$t('trains.on-time');
    },

@@ -20,6 +20,15 @@ const routes: Array<RouteRecordRaw> = [
      region: route.query.region
    })
  },
+  {
+    path: '/driver',
+    name: 'DriverView',
+    component: () => import('../views/DriverView.vue'),
+    props: (route) => ({
+      trainId: route.query.trainId,
+      modalId: route.query.modalId
+    })
+  },
  {
    path: '/scenery',
    name: 'SceneryView',
@@ -57,7 +66,12 @@ const routes: Array<RouteRecordRaw> = [

 const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
-    if (to.name == 'SceneryView' && from.name !== to.name && from.query['view'] === undefined)
+    if (
+      (to.name == 'SceneryView' || to.name == 'DriverView') &&
+      from.name !== to.name &&
+      from.query['view'] === undefined &&
+      !savedPosition
+    )
      return { el: `.app_main`, top: -15 };

    if (savedPosition) return savedPosition;
@@ -18,7 +18,8 @@ export const useApiStore = defineStore('apiStore', {
    donatorsData: [] as API.Donators.Response,
    sceneryData: [] as StationJSONData[],

-    lastFetchData: new Date(),
+    nextUpdateTime: 0,
+    nextDataCheckTime: 0,

    client: undefined as AxiosInstance | undefined,

@@ -48,32 +49,37 @@ export const useApiStore = defineStore('apiStore', {
    },

    async connectToAPI() {
-      // Static data
-      this.fetchDonatorsData();
-      this.fetchStationsGeneralInfo();
-      this.fetchVehiclesInfo();
+      window.requestAnimationFrame(this.updateTick);
+    },
+
+    updateTick(t: number) {
+      if (this.dataStatuses.connection == Status.Data.Offline) return;
+
+      // Static data refresh
+      if (t >= this.nextDataCheckTime) {
+        this.fetchDonatorsData();
+        this.fetchVehiclesInfo();
+        this.fetchStationsGeneralInfo();
+
+        this.nextDataCheckTime = t + 3600000;
+      }
+
+      // Active data fefresh
+      if (t >= this.nextUpdateTime) {
+        this.fetchActiveData();
+        this.nextUpdateTime = t + 20000;
+      }
+
+      window.requestAnimationFrame(this.updateTick);
    },

    async fetchActiveData() {
-      if (import.meta.env.VITE_API_ACTIVE_DATA_MODE == 'mocking') {
-        import('../../tests/data/getActiveData.json').then((data) => {
-          console.warn('activeData: mocking mode');
-          this.activeData = data.default as API.ActiveData.Response;
-          this.lastFetchData = new Date();
-
-          this.dataStatuses.connection = Status.Data.Loaded;
-        });
-
-        return;
-      }
-
      if (!this.activeData) this.dataStatuses.connection = Status.Data.Loading;

      try {
        const response = await this.client!.get<API.ActiveData.Response>('api/getActiveData');

        this.activeData = response.data;
-        this.lastFetchData = new Date();
        this.dataStatuses.connection = Status.Data.Loaded;
      } catch (error) {
        this.dataStatuses.connection = Status.Data.Error;
@@ -94,7 +100,7 @@ export const useApiStore = defineStore('apiStore', {
    async fetchStationsGeneralInfo() {
      try {
        const sceneryData: StationJSONData[] = (
-          await this.client!.get<StationJSONData[]>('api/getSceneries')
+          await this.client!.get<StationJSONData[]>(`api/getSceneries`)
        ).data;

        this.dataStatuses.sceneries = Status.Data.Loaded;
@@ -106,16 +112,6 @@ export const useApiStore = defineStore('apiStore', {
    },

    async fetchVehiclesInfo() {
-      // if (import.meta.env.VITE_API_VEHICLES_MODE == 'mocking') {
-      //   import('../../tests/data/vehicles.json').then((data) => {
-      //     console.warn('vehicles.json: mocking mode');
-      //     this.vehiclesData = data.default;
-      //     this.dataStatuses.vehicles = Status.Data.Loaded;
-      //   });
-
-      //   return;
-      // }
-
      try {
        const response = await this.client!.get<API.Vehicles.Response>('api/getVehicles');

@@ -43,22 +43,13 @@ export const useMainStore = defineStore('mainStore', {
      sceneriesTrains.clear();

      return (apiStore.activeData?.trains ?? [])
-        .filter((train) => train.timetable || train.online)
+        .filter((train) => train.timetable || train.lastSeen >= Date.now() - 60000)
        .map((train) => {
          const stock = train.stockString.split(';');
          const locoType = stock ? stock[0] : train.stockString;

          const timetable = train.timetable;

-          const sceneryNames =
-            train.timetable?.sceneries?.map(
-              (sceneryHash) =>
-                apiStore.activeData?.activeSceneries?.find((st) => st.stationHash === sceneryHash)
-                  ?.stationName ??
-                apiStore.sceneryData.find((sd) => sd.hash === sceneryHash)?.name ??
-                sceneryHash
-            ) ?? [];
-
          const trainObj = {
            id: train.id,
            modalId: `${train.driverName}${train.trainNo}`, // simplified id for train modal
@@ -86,45 +77,89 @@ export const useMainStore = defineStore('mainStore', {
            isSupporter: train.driverIsSupporter,
            driverLevel: train.driverLevel,

+            driverRouteLocation: {
+              name: 'DriverView',
+              query: {
+                trainId: train.id
+              }
+            },
+
            timetableData: timetable
              ? {
                  timetableId: timetable.timetableId,
-                  SKR: timetable.SKR,
-                  TWR: timetable.TWR,
                  route: timetable.route,
                  category: timetable.category,
                  followingStops: timetable.stopList,
                  routeDistance: timetable.stopList[timetable.stopList.length - 1].stopDistance,
                  sceneries: timetable.sceneries,
-                  sceneryNames: sceneryNames.reverse()
+                  TWR: timetable.TWR,
+                  SKR: timetable.SKR,
+                  warningNotes: timetable.warningNotes,
+                  hasDangerousCargo: timetable.hasDangerousCargo,
+                  hasExtraDeliveries: timetable.hasExtraDeliveries,
+                  trainMaxSpeed: timetable.trainMaxSpeed,
+
+                  timetablePath: timetable.path.split(';').map((pathElementString) => {
+                    const [arrival, station, departure] = pathElementString.split(',');
+
+                    return {
+                      arrivalRouteExt: arrival,
+                      departureRouteExt: departure,
+                      stationName: station.split(' ').slice(0, -1).join(' '),
+                      stationHash: station.split(' ').slice(-1).join(' ').replace('.sc', '')
+                    };
+                  })
                }
              : undefined
          } as Train;

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

          // Checkpoints trains map
-          timetable?.stopList.forEach((stop, i) => {
-            if (/strong|podg\.|pe\./.test(stop.stopName)) {
-              const checkpointTrain: CheckpointTrain = {
-                train: trainObj,
-                checkpointStop: stop
-              };
+          if (trainObj.timetableData) {
+            let currentSceneryIndex = 0;
+            const timetablePath = trainObj.timetableData.timetablePath;

-              if (checkpointsTrains.has(stop.stopNameRAW.toLowerCase())) {
-                checkpointsTrains.set(stop.stopNameRAW.toLowerCase(), [
-                  ...checkpointsTrains.get(stop.stopNameRAW.toLowerCase())!,
-                  checkpointTrain
-                ]);
-              } else checkpointsTrains.set(stop.stopNameRAW.toLowerCase(), [checkpointTrain]);
-            }
-          });
+            trainObj.timetableData.followingStops.forEach((stop, i) => {
+              if (/strong|podg|pe/.test(stop.stopName)) {
+                const checkpointTrain: CheckpointTrain = {
+                  train: trainObj,
+                  checkpointStop: stop,
+
+                  previousSceneryElement:
+                    currentSceneryIndex > 0 ? timetablePath[currentSceneryIndex - 1] : null,
+
+                  nextSceneryElement:
+                    currentSceneryIndex < timetablePath.length - 1
+                      ? timetablePath[currentSceneryIndex + 1]
+                      : null,
+
+                  timetablePathElement: timetablePath[currentSceneryIndex]
+                };
+
+                if (checkpointsTrains.has(stop.stopNameRAW.toLowerCase())) {
+                  checkpointsTrains.set(stop.stopNameRAW.toLowerCase(), [
+                    ...checkpointsTrains.get(stop.stopNameRAW.toLowerCase())!,
+                    checkpointTrain
+                  ]);
+                } else checkpointsTrains.set(stop.stopNameRAW.toLowerCase(), [checkpointTrain]);
+              }
+
+              if (timetablePath[currentSceneryIndex].departureRouteExt == stop.departureLine)
+                currentSceneryIndex++;
+            });
+          }

          return trainObj;
        });
@@ -141,12 +176,15 @@ export const useMainStore = defineStore('mainStore', {
      const offlineActiveSceneries = this.trainList.reduce((acc, train) => {
        if (!train.timetableData) return acc;

-        train.timetableData.sceneryNames.forEach((name) => {
+        train.timetableData.timetablePath.forEach((p) => {
          if (
-            acc.findIndex((v) => v.name == name && v.region == train.region) != -1 ||
+            acc.findIndex(
+              (v) =>
+                (v.name == p.stationName || v.hash == p.stationHash) && v.region == train.region
+            ) != -1 ||
            apiStore.activeData?.activeSceneries?.findIndex(
              (sc) =>
-                sc.stationName === name &&
+                (sc.stationName == p.stationName || sc.stationHash == p.stationHash) &&
                sc.region == train.region &&
                Date.now() - sc.lastSeen < 1000 * 60 * 2
            ) != -1
@@ -154,7 +192,7 @@ export const useMainStore = defineStore('mainStore', {
            return acc;

          acc.push({
-            name: name,
+            name: p.stationName,
            hash: '',
            region: train.region,
            maxUsers: 0,
@@ -184,13 +222,15 @@ export const useMainStore = defineStore('mainStore', {
        return acc;
      }, [] as ActiveScenery[]);

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

        const dispatcherTimestamp =
          scenery.dispatcherStatus == Status.ActiveDispatcher.NO_LIMIT
-            ? Date.now() + 25500000
+            ? referenceTimestamp + 25500000
            : scenery.dispatcherStatus > 5
              ? scenery.dispatcherStatus
              : null;
@@ -252,8 +292,14 @@ export const useMainStore = defineStore('mainStore', {

          if (!scheduledTrains) return;

-          scheduledTrains.forEach(({ train, checkpointStop }) => {
-            scenery.scheduledTrains.push({ train, checkpointStop });
+          scheduledTrains.forEach(({ train, checkpointStop, timetablePathElement, ...v }) => {
+            if (
+              scenery.name != timetablePathElement.stationName &&
+              scenery.hash != timetablePathElement.stationHash
+            )
+              return;
+
+            scenery.scheduledTrains.push({ train, checkpointStop, timetablePathElement, ...v });

            if (uniqueTrainIds.includes(train.id) || train.region != this.region.id) return;

@@ -277,6 +323,8 @@ export const useMainStore = defineStore('mainStore', {
      return apiStore.sceneryData.map((scenery) => {
        const routes = scenery.routesInfo.reduce(
          (acc, route) => {
+            acc['all'].push(route);
+
            if (route.hidden) return acc;

            const tracksKey = route.routeTracks == 2 ? 'double' : 'single';
@@ -307,6 +355,7 @@ export const useMainStore = defineStore('mainStore', {
            doubleElectrifiedNames: [],
            doubleOtherNames: [],
            sblNames: [],
+            all: [],
            minRouteSpeed: 0,
            maxRouteSpeed: 0
          } as StationRoutes
@@ -1,10 +1,18 @@
@import 'responsive.scss';
@import 'animations.scss';

+.journal-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  text-align: left;
+  margin-bottom: 0.5em;
+}
+
 .list_wrapper {
  overflow-y: auto;
-  height: 90vh;
-  min-height: 650px;
+  height: calc(100vh - 12.5em);
+  min-height: 500px;
  margin-top: 0.5em;
  position: relative;

@@ -12,7 +20,7 @@
 }

 .journal_wrapper {
-  max-width: 1500px;
+  max-width: var(--max-container-width);
  width: 100%;

  margin: 0 auto;
@@ -38,16 +46,10 @@
  }
 }

-.journal_item {
-  cursor: pointer;
-}
-
 .journal_item,
 .journal_warning {
  background-color: #1a1a1a;
  padding: 1em;
-  margin-bottom: 1em;
-  cursor: pointer;
 }

 .journal_top-bar {
@@ -1,5 +1,6 @@
@import 'variables.scss';
@import 'responsive.scss';
+@import 'badge.scss';

 .stats-tab {
  position: absolute;
@@ -7,7 +8,6 @@
  z-index: 99;

  transform: translateY(1em);
-
  width: 100%;

  background-color: #1a1a1a;
@@ -29,26 +29,10 @@ hr.section-separator {
 .info-stats {
  display: flex;
  flex-wrap: wrap;
-  justify-content: center;
+
  gap: 0.5em;
 }

-.stat-badge {
-  display: flex;
-
-  span {
-    background-color: $accentCol;
-    color: black;
-    font-weight: bold;
-    padding: 0.2em 0.5em;
-  }
-
-  span:first-child {
-    background-color: #333;
-    color: white;
-  }
-}
-
@include smallScreen {
  .journal-stats {
    text-align: center;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Spythere	9fafbe2c7f	Merge pull request #120 from Spythere/development v1.29.0	2025-02-04 20:50:29 +01:00
Spythere	666ba07307	chore: added SRJP external link	2025-02-04 18:14:58 +01:00
Spythere	b63328f97c	fix: journal double api fetching	2025-02-04 16:48:46 +01:00
Spythere	342127d541	chore: improved journal filtering by date	2025-02-04 16:42:48 +01:00
Spythere	c6ab0d21de	bump: v1.29.0	2025-02-04 15:15:21 +01:00
Spythere	da4476bdf0	feat: saving train table scroll position	2025-02-04 15:14:58 +01:00
Spythere	a950b4bef4	chore: calculating max train speed based on its mass	2025-02-04 15:11:11 +01:00
Spythere	5aa9297ec5	chore: resettings all train filter options on click	2025-02-04 14:17:04 +01:00
Spythere	0af49befc6	chore: changed layout of journal timetable badges	2025-02-04 14:12:47 +01:00
Spythere	4da0ab475b	chore: changed placement of the offline icon	2025-02-04 14:12:20 +01:00
Spythere	1fa5934784	chore: added timetable vmax to journal	2025-02-04 00:05:42 +01:00
Spythere	5fb1a87b41	chore: added max timetable speed; route pairing fix	2025-02-03 23:51:47 +01:00
Spythere	8a5687cc01	chore: added different border width for double track routes	2025-02-03 22:48:38 +01:00
Spythere	c5fe929b9a	bump: v1.28.8	2025-02-02 22:22:23 +01:00
Spythere	5787deeaf8	restruct: added interal lines info to train schedule; minor fixes	2025-02-02 22:22:04 +01:00
Spythere	130732921b	Merge pull request #119 from Spythere/development v1.28.7	2025-01-28 14:51:24 +01:00
Spythere	1b2cd34e86	fix: responsive text center	2025-01-28 14:32:48 +01:00
Spythere	17bda9e6e7	chore: added scenery offline icon in active train schedule; icon improvements	2025-01-28 14:23:57 +01:00
Spythere	c66ff8feed	bump: v1.28.7	2025-01-15 16:26:02 +01:00
Spythere	027cdee25a	fix: twr polish locale	2025-01-15 16:24:56 +01:00
Spythere	435cfb3b3f	chore: added offline players indicators in the scenery view	2025-01-15 16:23:26 +01:00
Spythere	425241c8e7	Merge pull request #118 from Spythere/development v1.28.6	2025-01-11 13:22:13 +01:00
Spythere	f24f961d52	fix: warning notes display for TN & PN in journal	2025-01-11 13:09:45 +01:00
Spythere	4718eeeaaf	bump: v1.28.6	2025-01-11 00:21:11 +01:00
Spythere	931fd7b21b	feat: copying a railway stock of active drivers and timetable journal	2025-01-11 00:20:58 +01:00
Spythere	bb79c5033a	chore: added icon packs	2025-01-10 23:20:24 +01:00
Spythere	ee290788dc	Merge pull request #117 from Spythere/development v1.28.5	2024-12-23 16:50:34 +01:00
Spythere	a87d1060d3	chore: adjusted christmas dates	2024-12-23 16:45:46 +01:00
Spythere	1804d6d0f0	bump: v1.28.5	2024-12-23 16:44:59 +01:00
Spythere	77250e30c7	fix: preview tooltip fallback image	2024-12-23 16:44:42 +01:00
Spythere	c5aefd03b8	Merge pull request #116 from Spythere/development 1.28.4 - minor fixes & updates	2024-12-20 16:27:08 +01:00
Spythere	2ec4694bd3	restruct: train info & timetable code	2024-12-20 15:51:16 +01:00
Spythere	729f66bcdb	chore: added changing logo to christmas version	2024-12-20 15:46:34 +01:00
Spythere	b746843086	Merge pull request #115 from Spythere/development v1.28.4	2024-11-15 19:00:00 +01:00
Spythere	cbbd06fecd	bump: v1.28.4	2024-11-15 18:52:21 +01:00
Spythere	11e99b6af0	hotfix: stations sorting by 'no limit'	2024-11-15 18:51:34 +01:00
Spythere	31f4a2e5b2	Merge pull request #114 from Spythere/development v1.28.3	2024-10-22 21:30:53 +02:00
Spythere	22514c3263	bump: v.1.28.3	2024-10-22 21:22:37 +02:00
Spythere	0df673467c	fix: image loading styles	2024-10-22 21:22:22 +02:00
Spythere	6377e13809	refactor: footer component	2024-10-22 21:13:23 +02:00
Spythere	13fa633db4	chore: updated api image source	2024-10-22 20:58:20 +02:00
Spythere	dd9661551c	fix: typo	2024-10-22 20:58:08 +02:00
Spythere	495012a5ca	Merge pull request #113 from Spythere/development hotfix: data fetching	2024-10-02 14:59:34 +02:00
Spythere	3cfccb1bb4	hotfix: data fetching	2024-10-02 14:58:58 +02:00
Spythere	d2a8cdb2b0	Merge pull request #112 from Spythere/development v1.28.2	2024-10-02 14:31:39 +02:00
Spythere	c33b5ef8c1	refactor: journal dispatcher filters	2024-10-01 16:40:11 +02:00
Spythere	52d1771c21	chore: added tn/pn filters for trains & timetables	2024-10-01 15:53:59 +02:00
Spythere	cac4345683	chore: added journal timetable comments	2024-10-01 15:28:22 +02:00
Spythere	6fd9e21213	bump: v1.28.2	2024-09-30 22:33:45 +02:00
Spythere	421add1ec1	chore: added TN/PN freight types	2024-09-30 22:32:29 +02:00
Spythere	4ac92198b7	chore: api mock configuration files	2024-09-30 14:23:20 +02:00
Spythere	5105229eef	chore: api mock endpoints	2024-09-30 11:50:08 +02:00
Spythere	2ec02080c3	chore: added internal api mocking for tests	2024-09-29 13:15:46 +02:00
Spythere	95b2a696e1	Merge pull request #111 from Spythere/development fix: vehicle thumbnail names	2024-09-19 16:00:02 +02:00
Spythere	091e94e396	fix: vehicle thumbnail names	2024-09-19 15:48:55 +02:00
Spythere	43c939bf01	Merge pull request #110 from Spythere/development v1.28.1	2024-09-18 20:09:22 +02:00
Spythere	8285d5c579	fix: tooltips width	2024-09-18 20:04:53 +02:00
Spythere	547248b478	chore: updown arrow fix	2024-09-18 16:08:54 +02:00
Spythere	e1b9b37ac8	bump: v1.28.1	2024-09-18 15:57:56 +02:00
Spythere	c8ec28292b	chore: removed obsolete console logs	2024-09-18 15:57:45 +02:00
Spythere	3daf800a89	chore: added SBL icon & route tooltips	2024-09-18 15:55:33 +02:00
Spythere	69d9be0bb3	chore: minor thumbnail loading changes	2024-09-18 15:26:14 +02:00
Spythere	f53f3a18fe	Merge pull request #109 from Spythere/development v1.28.0	2024-09-09 14:26:32 +02:00
Spythere	fac8fced3e	chore: removed journal list status animations	2024-09-09 14:11:35 +02:00
Spythere	a3d9e68c8a	chore: tooltip placing	2024-09-08 16:32:11 +02:00
Spythere	b09761de58	chore: TWR & SKR badges fixes	2024-09-07 21:07:41 +02:00
Spythere	8ac2c68660	bump: v1.28.0	2024-09-07 17:28:29 +02:00
Spythere	4177c6e5f4	chore: displaying warning notes in driver view & journal timetables	2024-09-07 17:28:05 +02:00
Spythere	b8f135a454	chore: thumbnail loading optimization	2024-09-06 15:23:22 +02:00
Spythere	f0863b2459	chore: added static data hourly refresh	2024-09-05 17:00:15 +02:00
Spythere	55b4732992	chore: cleanup	2024-09-05 15:34:11 +02:00
Spythere	7b3dcea89e	fix: missing category translations	2024-09-03 15:25:10 +02:00
Spythere	f4b0c39185	chore: entry details backwards comp.	2024-09-03 15:18:59 +02:00
Spythere	275d602f97	chore: hiding entry details on history change	2024-09-03 14:43:16 +02:00
Spythere	c93514fdf0	refactor: journal timetable entries	2024-09-03 14:29:59 +02:00
Spythere	0861d92e4b	hotfix: class name	2024-09-02 23:41:39 +02:00
Spythere	bdfd73f4be	chore: stops design	2024-09-02 22:56:00 +02:00
Spythere	df86364c51	chore: journal timetable stop labels	2024-09-02 22:39:41 +02:00
Spythere	631bb20c61	hotfix: resolved merge conflicts	2024-09-01 16:09:16 +02:00
Spythere	bed79ed2d0	chore: translations	2024-09-01 16:07:40 +02:00
Spythere	2a07471e12	chore: displaying other driver's trains in the driver view	2024-08-31 13:51:22 +02:00
Spythere	cfe188d0dc	bump: v1.27.1	2024-08-29 16:04:14 +02:00
Spythere	d9865be83e	fix: views viewport height	2024-08-29 16:03:26 +02:00
Spythere	9155fd9f8d	chore: driver view return button	2024-08-29 15:51:53 +02:00
Spythere	4674bf886e	fix: manifest theme color	2024-08-29 15:47:23 +02:00
Spythere	289fd310df	chore: viewport & routing fixes	2024-08-29 15:42:44 +02:00
Spythere	b04797052f	chore: expanded containers width in views, adjusted dropdowns	2024-08-24 16:16:32 +02:00
Spythere	7079f20791	Merge pull request #107 from Spythere/development hotfix: journal stats badge styles	2024-08-24 00:25:35 +02:00
Spythere	c244275aee	hotfix: journal stats badge styles	2024-08-24 00:24:55 +02:00
Spythere	fbc9785341	Merge pull request #105 from Spythere/development v1.27.0	2024-08-24 00:20:08 +02:00
Spythere	9fd02c2336	chore: scenery view border radius	2024-08-23 16:24:21 +02:00
Spythere	c031dd55c1	chore: removed return button	2024-08-23 16:22:54 +02:00
Spythere	b0870699a4	hotfix: anchor style	2024-08-22 23:20:09 +02:00
Spythere	a8da634b0e	hotfix: TrainsView watcher causing routing problems	2024-08-22 23:19:42 +02:00
Spythere	8920b1e5e8	hotfix: view styles	2024-08-22 17:00:40 +02:00
Spythere	4fa1c05831	fix: input attrs	2024-08-22 16:44:51 +02:00
Spythere	ecef2d5ee4	chore: backwards compatibility with train modal for ext. links	2024-08-22 16:37:47 +02:00
Spythere	1749871d08	fix: filters double click	2024-08-22 16:37:12 +02:00
Spythere	5545616706	chore: styling hotfixes and improvements	2024-08-22 02:28:40 +02:00
Spythere	b35bb03868	merge: 'dominik-korsa-links' into development	2024-08-22 02:27:53 +02:00
Spythere	b9521918cb	hotfix: translation fix	2024-08-21 21:38:21 +02:00
Spythere	7ad17fc2c5	chore: style improvements & finishing touches	2024-08-21 21:33:46 +02:00
Spythere	a80144cb1c	chore: missing translations	2024-08-21 18:30:17 +02:00
Spythere	1227cdb94a	chore: driver view links	2024-08-21 18:12:35 +02:00
Spythere	b33594fd6f	fix: journal list styles	2024-08-21 17:17:52 +02:00
Spythere	9f8656e590	fix: progress indicator	2024-08-21 17:06:50 +02:00
dominik-korsa	81cd165fe7	Use <router-link> instead of <tr> with click handler in StationTable	2024-08-21 14:42:03 +02:00
dominik-korsa	41e4b45599	Use <router-link> for driver journal button in TrainInfo	2024-08-21 13:54:48 +02:00
dominik-korsa	462dd7dd7a	Replace all remaining uses of driverViewMixin with <router-link>	2024-08-21 13:49:31 +02:00
dominik-korsa	9837ae97e1	Use <router-link> instead of a @click handler in SceneryTimetable	2024-08-21 13:29:53 +02:00
dominik-korsa	a818cd980b	Use <router-link> instead of a @click handler in TrainTable	2024-08-21 12:58:47 +02:00
Spythere	573ebc233b	chore: removed registering train modal	2024-08-21 02:06:38 +02:00
Spythere	aae47c6abd	fix: journal stats badges	2024-08-21 02:06:23 +02:00
Spythere	24c9b62162	feat: driver train view	2024-08-21 02:02:35 +02:00
Spythere	481d43b6d8	chore: selecting station checkpoint from url	2024-08-20 14:31:52 +02:00
Spythere	4969a433cc	fix: train modal responsiveness & icons	2024-08-20 13:33:24 +02:00
Spythere	8a2b453dc6	chore: journal daily stats styling	2024-08-20 13:16:37 +02:00
Spythere	86d178ef56	chore: restored Pragotron link	2024-08-20 13:16:02 +02:00
Spythere	7769477508	chore: station stats styling	2024-08-20 00:14:44 +02:00
Spythere	551b60c733	fix: omitting "po" stops in timetable progress bar	2024-08-19 23:56:15 +02:00
Spythere	80a5b56785	feat: router links embeded into timetable stop names	2024-08-18 23:45:42 +02:00
Spythere	6bd62f13a1	chore: stats button responsiveness	2024-08-18 23:14:18 +02:00
Spythere	42591f6e76	chore: journal timetables styling improvements	2024-08-18 23:03:00 +02:00
Spythere	4ca0f09e75	chore: added ZG category	2024-08-18 22:58:22 +02:00
Spythere	02c3629c00	bump: v1.27.0	2024-08-18 01:43:51 +02:00
Spythere	9c4c806f0e	chore: moved station stats to a dropdown	2024-08-18 01:43:27 +02:00
Spythere	58d6a97762	fix: twr/skr badges sizing	2024-08-17 15:51:36 +02:00
Spythere	cd71c78eb4	chore: apicache typings	2024-08-17 15:51:25 +02:00
Spythere	300e70dcfe	chore: journal timetables buttons alignment	2024-08-15 15:01:36 +02:00
Spythere	09b31f7914	Merge pull request #104 from Spythere/development hotfix: warning icon placement	2024-08-10 23:41:34 +02:00
Spythere	c29c3c6abe	hotfix: warning icon placement	2024-08-10 23:41:00 +02:00
Spythere	916f6070ac	Merge pull request #103 from Spythere/development chore: added back merge gh workflow	2024-08-10 14:18:45 +02:00
Spythere	a74ab6eb2a	chore: added back merge gh workflow	2024-08-10 14:18:00 +02:00
Spythere	985c699ced	Merge pull request #102 from Spythere/development v1.26.1	2024-08-10 14:16:06 +02:00
Spythere	7e0e9146a5	fix: vehicle thumbnail cargo info	2024-08-10 14:08:32 +02:00
Spythere	30a0f05922	feat: journal dispatchers filtering by sc. hash	2024-08-10 14:00:25 +02:00
Spythere	a30e04ca96	bump: v1.26.1	2024-08-09 15:24:48 +02:00
Spythere	1852d3e234	feat: category codes explanation tooltips	2024-08-09 15:24:26 +02:00
Spythere	a17bf6c03f	Merge branch 'development'	2024-08-09 14:12:07 +02:00
Spythere	766b08bc15	Merge branch 'master' of github.com:Spythere/stacjownik	2024-08-09 14:11:34 +02:00
Spythere	cd1a4fa734	hotfix: checkpoint trains filtering	2024-08-06 14:18:26 +02:00
Spythere	619ce97b52	Merge pull request #101 from Spythere/development v1.26.0	2024-08-05 16:11:07 +02:00
Spythere	acbe761068	Merge branch 'development'	2024-08-05 16:02:20 +02:00
Spythere	47d35f335f	chore: deleted merge workflow	2024-08-05 16:01:54 +02:00
Spythere	8fda8fa0df	chore: package scripts	2024-08-05 15:59:54 +02:00
Spythere	71d697eda5	chore: changed workflow npm to yarn	2024-08-05 15:55:15 +02:00
Spythere	f2b1fc5369	chore: disabled workflow on master push	2024-08-05 15:54:02 +02:00
Spythere	4a9b142e16	hotfix: lock files	2024-08-03 01:56:58 +02:00
Spythere	08d8bf3c57	bump: v1.26.0	2024-08-03 01:55:12 +02:00
Spythere	0ee90357aa	chore: code structure	2024-08-03 01:53:36 +02:00
Spythere	c8964dc20f	chore: dispatcher history revamp & statuses	2024-08-02 02:00:44 +02:00
Spythere	6a62276d95	fix: vehicle preview loading	2024-08-01 19:26:25 +02:00
Spythere	b8550eed9a	chore: cleanup	2024-08-01 19:22:54 +02:00
Spythere	27b23ccc95	chore: lazy thumbnail loading & animations	2024-08-01 19:22:43 +02:00
Spythere	b49517aded	chore: packages upgrade	2024-07-24 18:55:41 +02:00
Spythere	ed2b8be4dc	chore: offline & fetching fixes	2024-07-24 17:52:20 +02:00
Spythere	54c1dbbf15	fix: stop labels statuses	2024-07-16 21:39:54 +02:00
Spythere	0ac7ba51e5	Merge pull request #100 from Spythere/development v1.25.2	2024-07-12 16:13:06 +02:00
Spythere	bdf85cd8ec	bump: 1.25.2	2024-07-12 16:01:45 +02:00
Spythere	63b268d9b9	feat: added journal timetable path	2024-07-12 15:59:08 +02:00
Spythere	d73c8ef112	fix: update modal won't open on first visit	2024-07-12 15:11:17 +02:00
Spythere	3d1c66b420	fix: cache control	2024-07-12 14:50:01 +02:00
Spythere	b3f7108979	fix: detecting podg in timetables	2024-07-12 13:58:43 +02:00
Spythere	feabfd29e0	Merge pull request #99 from Spythere/development fix: recognizing timetables for sceneries with the same stop names	2024-07-09 20:33:16 +02:00
Spythere	f17fedc976	fix: recognizing timetables for sceneries with the same stop names; optimization	2024-07-09 19:15:04 +02:00
Spythere	c83c75e014	Merge pull request #98 from Spythere/development hotfix: thumbnails v2 src	2024-07-08 22:12:41 +02:00
Spythere	e57143f517	hotfix: thumbnails v2 src	2024-07-08 22:12:05 +02:00
Spythere	fb45a783ee	Merge pull request #97 from Spythere/development v1.25.1	2024-07-08 21:40:50 +02:00
Spythere	71476e9552	bump: v1.25.1	2024-07-08 21:38:05 +02:00
Spythere	922a338143	hotfix: stock naming	2024-07-08 21:37:51 +02:00
Spythere	231d36e877	chore: adjusted for new vehicle thumbnails	2024-07-08 21:35:22 +02:00
Spythere	27d6ac9f14	Merge pull request #96 from Spythere/development hotfix: scenery timetable train statuses	2024-06-11 20:56:25 +02:00
Spythere	a6029da2cc	hotfix: scenery timetable train statuses	2024-06-11 20:55:07 +02:00
Spythere	a3f3790205	Merge pull request #95 from Spythere/development hotfix: timetables for unknown sceneries	2024-06-10 20:19:20 +02:00
Spythere	ebfb24f729	hotfix: timetables for unknown sceneries	2024-06-10 20:18:09 +02:00
Spythere	e521736618	Merge pull request #94 from Spythere/development hotfix: changed pwa strategy	2024-06-10 00:37:21 +02:00
Spythere	fc7662e431	chore: changed pwa strategy	2024-06-10 00:36:30 +02:00
Spythere	44f6cf4232	Merge branch 'development'	2024-05-12 15:22:28 +02:00