Merge pull request #120 from Spythere/development

v1.29.0

.gitignore

@@ -33,6 +33,10 @@ node_modules
 
 # Env
 .env
+.env.*
 
 .fake
-.ionide
+.ionide
+
+# api-mock
+/api-mock/endpoints/

api-mock/fetchEndpoints.js

@@ -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();

api-mock/index.js

@@ -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...');
+});

api-mock/package.json

@@ -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"
+  }
+}

api-mock/yarn.lock

@@ -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==

index.html

@@ -22,6 +22,11 @@
 
     <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/" />

package.json

@@ -1,10 +1,12 @@
 {
   "name": "stacjownik",
-  "version": "1.27.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:prod": "yarn build && firebase deploy --only hosting",
     "deploy:dev": "yarn build && firebase hosting:channel:deploy dev --expires 7d",

public/fa/css/regular.css

@@ -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; }

public/fa/css/solid.css

@@ -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; }

public/images/icon-catenary.svg

@@ -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>

public/images/icon-sbl-transparent.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>

public/images/icon-srjp.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>

public/site.webmanifest

@@ -13,7 +13,7 @@
             "type": "image/png"
         }
     ],
-    "theme_color": "#ffc014",
+    "theme_color": "#4d4d4d",
     "background_color": "#4d4d4d",
     "display": "standalone",
     "start_url": "."

src/App.vue

@@ -6,6 +6,7 @@
     />
 
     <Tooltip />
+    
     <AppHeader :current-lang="currentLang" @change-lang="changeLang" />
 
     <main class="app_main">
@@ -16,21 +17,12 @@
       </router-view>
     </main>
 
-    <footer class="app_footer">
+    <AppFooter
-      &copy;
+      :version="VERSION"
-      <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
+      :is-on-production-host="isOnProductionHost"
-      {{ new Date().getUTCFullYear() }} |
+      :is-update-card-open="isUpdateCardOpen"
-      <button class="btn--text" @click="() => (isUpdateCardOpen = true)">
+      @open-update-card="() => (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>
   </div>
 </template>
 
@@ -38,7 +30,7 @@
 import { defineComponent } from 'vue';
 import axios from 'axios';
 
-import { version } from '.././package.json';
+import { version } from '../package.json';
 import { Status } from './typings/common';
 import { useMainStore } from './store/mainStore';
 import { useApiStore } from './store/apiStore';
@@ -51,6 +43,7 @@ import Tooltip from './components/Tooltip/Tooltip.vue';
 import UpdateCard from './components/App/UpdateCard.vue';
 
 import StorageManager from './managers/storageManager';
+import AppFooter from './components/App/AppFooter.vue';
 
 const STORAGE_VERSION_KEY = 'app_version';
 
@@ -59,6 +52,7 @@ export default defineComponent({
     Clock,
     StatusIndicator,
     AppHeader,
+    AppFooter,
     UpdateCard,
     Tooltip
   },
@@ -81,6 +75,7 @@ export default defineComponent({
 
   async mounted() {
     window.addEventListener('mousemove', (e: MouseEvent) => this.tooltipStore.handle(e));
+    window.addEventListener('mousedown', () => this.tooltipStore.hide());
   },
 
   methods: {

src/components/App/AppFooter.vue

@@ -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>

src/components/App/AppHeader.vue

@@ -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>

src/components/Global/DonationCard.vue

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

src/components/Global/StockList.vue

@@ -1,25 +1,13 @@
 <template>
-  <div class="stock-list">
+  <div class="list-wrapper">
-    <ul>
+    <ul class="stock-list">
-      <li
+      <li v-for="({ images, imagesFallbacks, vehicleString }, i) in thumbnailNames">
-        v-for="(
+        <VehicleThumbnail
-          { vehicleName, vehicleCargo, images, imagesFallbacks, vehicleString }, i
+          :key="i"
-        ) in thumbnailNames"
+          :vehicle-string="vehicleString"
-        :key="i"
+          :images="images"
-      >
+          :image-fallbacks="imagesFallbacks"
-        <div class="stock-text">
+        />
-          <p>{{ vehicleName.replace(/_/g, ' ') }}</p>
-          <small v-if="vehicleCargo">({{ vehicleCargo }})</small>
-        </div>
-
-        <span>
-          <VehicleThumbnail
-            v-for="(thumbnailImage, imageIndex) in images"
-            :vehicle-name="vehicleString"
-            :img-name="thumbnailImage"
-            :fallback-name="imagesFallbacks[imageIndex]"
-          />
-        </span>
       </li>
     </ul>
   </div>
@@ -59,13 +47,12 @@ export default defineComponent({
       return (this.tractionOnly ? this.trainStockList.slice(0, 1) : this.trainStockList)
         .filter((v) => v.length != 0)
         .map((vehicleString) => {
-          const [vehicleName, vehicleCargo] = vehicleString.split(':');
+          const [vehicleName] = vehicleString.split(':');
 
           const vehicleThumbnailData = {
             images: [] as string[],
             imagesFallbacks: [] as string[],
             vehicleName,
-            vehicleCargo,
             vehicleString
           };
 
@@ -159,50 +146,21 @@ export default defineComponent({
           return vehicleThumbnailData;
         });
     }
-  },
-
-  methods: {
-    onImageError(event: Event, fallbackImage: string) {
-      (event.target as HTMLImageElement).src = `/images/${fallbackImage}.png`;
-    }
   }
 });
 </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%;
-}
-
-.stock-text {
-  text-align: center;
-  color: #aaa;
-  font-size: 0.9em;
-  margin-bottom: 0.25em;
 }
 </style>

src/components/Global/VehicleThumbnail.vue

@@ -1,37 +1,42 @@
 <template>
-  <div class="vehicle-thumbnail">
+  <div class="vehicle-thumbnail" :data-load-status="imgStatus" ref="thumbRef">
-    <img
+    <div class="stock-text">
-      ref="imgRef"
+      <div>{{ vehicleName }}</div>
-      :src="`https://static.spythere.eu/thumbnails/v2/${imgName}.png`"
+      <small v-if="vehicleCargo">({{ vehicleCargo }})</small>
-      height="60"
+    </div>
-      loading="lazy"
+
-      data-tooltip-type="VehiclePreviewTooltip"
+    <div class="stock-images">
-      :data-tooltip-content="vehicleName"
+      <img
-      :data-load-status="imgStatus"
+        v-for="(thumbnailImage, imageIndex) in images"
-      @error="onImageError"
+        :src="`https://stacjownik.spythere.eu/static/thumbnails/${thumbnailImage}.png`"
-      @load="onImageLoad"
+        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 { onMounted, Ref, ref } from 'vue';
+import { computed, PropType, Ref, ref } from 'vue';
 
 const props = defineProps({
-  vehicleName: { type: String, required: true },
+  vehicleString: { type: String, required: true },
-  imgName: { type: String, required: true },
+  images: { type: Object as PropType<string[]>, required: true },
-  fallbackName: { type: String, required: true },
+  imageFallbacks: { type: Object as PropType<string[]>, required: true }
-  placeholderName: String
 });
 
-const imgRef = ref(null) as Ref<HTMLElement | null>;
+const thumbRef = ref(null) as Ref<HTMLElement | null>;
-
 const imgStatus = ref('loading');
 
-function onImageError(event: Event) {
+const vehicleName = computed(() => props.vehicleString.split(':')[0].replace(/_/g, ' '));
-  console.log('error');
+const vehicleCargo = computed(() => props.vehicleString.split(':')[1]);
 
-  (event.target as HTMLImageElement).src = `/images/${props.fallbackName}.png`;
+function onImageError(event: Event, fallbackImage: string) {
+  (event.target as HTMLImageElement).src = `/images/${fallbackImage}.png`;
   imgStatus.value = 'error';
 }
 
@@ -40,22 +45,37 @@ function onImageLoad() {
     imgStatus.value = 'loaded';
   }
 
-  imgRef.value!.style.opacity = '1';
+  if (thumbRef.value) thumbRef.value.style.opacity = '1';
 }
 </script>
 
 <style lang="scss" scoped>
 .vehicle-thumbnail {
+  
   position: relative;
-}
-
-img {
   opacity: 0;
   transition: opacity 100ms ease-in-out;
 
   &[data-load-status='loading'] {
     min-height: 60px;
-    min-width: 150px;
+    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>

src/components/JournalView/JournalDispatchers/JournalDispatchersList.vue

@@ -1,48 +1,46 @@
 <template>
-  <transition name="status-anim" mode="out-in">
+  <div>
-    <div :key="dataStatus">
+    <div class="journal_warning" v-if="store.isOffline">
-      <div class="journal_warning" v-if="store.isOffline">
+      {{ $t('app.offline') }}
-        {{ $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>
-
-      <ul v-else class="journal-list">
-        <transition-group name="list-anim">
-          <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"
-        />
-      </ul>
-
-      <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>
-  </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">
@@ -85,6 +83,15 @@ export default defineComponent({
     };
   },
 
+  watch: {
+    '$route.query': {
+      deep: true,
+      handler() {
+        this.extraInfoIndexes.length = 0;
+      }
+    }
+  },
+
   methods: {
     toggleExtraInfo(id: number) {
       const existingIdx = this.extraInfoIndexes.indexOf(id);

src/components/JournalView/JournalOptions.vue

@@ -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'"
+                  :type="propName.toString().startsWith('search-date') ? 'date' : 'text'"
-                  :min="propName == 'search-date' ? '2022-02-01' : undefined"
+                  :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();
     },
 

src/components/JournalView/JournalStats.vue

@@ -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 {
+.dropdown_wrapper.dropdown-align-right {
-  max-width: 100%;
+  left: auto;
+  right: 0;
+  max-width: 700px;
+  // max-width: 100%;
 }
 </style>

src/components/JournalView/JournalTimetables/EntryDetails.vue

@@ -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>

src/components/JournalView/JournalTimetables/EntryGeneral.vue

@@ -3,8 +3,41 @@
     <span class="general-train">
       <span class="text--grayed">#{{ timetable.id }}</span>
 
-      <span class="train-badge twr" v-if="timetable.twr" :title="$t('general.TWR')">TWR</span>
+      <span
-      <span class="train-badge skr" v-if="timetable.skr" :title="$t('general.SKR')">SKR</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

src/components/JournalView/JournalTimetables/EntryStatus.vue

@@ -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>

src/components/JournalView/JournalTimetables/EntryStops.vue

@@ -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>

src/components/JournalView/JournalTimetables/JournalTimetableEntry.vue

@@ -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>

src/components/JournalView/JournalTimetables/JournalTimetablesList.vue

@@ -1,63 +1,37 @@
 <template>
   <div>
-    <transition name="status-anim" mode="out-in">
+    <div class="journal_warning" v-if="store.isOffline">
-      <div :key="dataStatus">
+      {{ $t('app.offline') }}
-        <div class="journal_warning" v-if="store.isOffline">
+    </div>
-          {{ $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">
+    <div v-else-if="dataStatus == Status.Data.Error" class="journal_warning error">
-          {{ $t('app.error') }}
+      {{ $t('app.error') }}
-        </div>
+    </div>
 
-        <div v-else-if="timetableHistory.length == 0" class="journal_warning">
+    <div v-else-if="timetableHistory.length == 0" class="journal_warning">
-          {{ $t('app.no-result') }}
+      {{ $t('app.no-result') }}
-        </div>
+    </div>
 
-        <div v-else>
+    <div v-else>
-          <transition-group name="list-anim" tag="ul" class="journal-list">
+      <transition-group name="list-anim" class="journal-list" tag="ul">
-            <li v-for="timetable in timetableHistory" class="journal_item" :key="timetable.id">
+        <JournalTimetableEntry
-              <div class="journal_item-info">
+          v-for="(timetableEntry, i) in timetableHistory"
-                <!-- General -->
+          :key="timetableEntry.id"
-                <TimetableGeneral :timetable="timetable" />
+          :timetableEntry="timetableEntry"
+          :onToggleShowExtraInfo="() => toggleExtraInfo(timetableEntry.id)"
+          :showExtraInfo="extraInfoIndexes.includes(timetableEntry.id)"
+        />
+      </transition-group>
 
-                <div @click="toggleExtraInfo(timetable.id)" style="cursor: pointer">
+      <AddDataButton
-                  <!-- Route -->
+        :list="timetableHistory"
-                  <span class="item-route">
+        :scrollDataLoaded="scrollDataLoaded"
-                    <b>{{ timetable.route.replace('|', ' - ') }}</b>
+        :scrollNoMoreData="scrollNoMoreData"
-                  </span>
+        @addHistoryData="addHistoryData"
-
+      />
-                  <hr />
+    </div>
-                  <!-- Stops -->
-                  <TimetableStops
-                    :timetable="timetable"
-                    :showExtraInfo="extraInfoIndexes.includes(timetable.id)"
-                  />
-                  <!-- Status -->
-                  <TimetableStatus :timetable="timetable" />
-                </div>
-
-                <!-- Extra -->
-                <TimetableDetails
-                  :timetable="timetable"
-                  :showExtraInfo="extraInfoIndexes.includes(timetable.id)"
-                  @toggle-extra-info="toggleExtraInfo"
-                />
-              </div>
-            </li>
-          </transition-group>
-
-          <AddDataButton
-            :list="timetableHistory"
-            :scrollDataLoaded="scrollDataLoaded"
-            :scrollNoMoreData="scrollNoMoreData"
-            @addHistoryData="addHistoryData"
-          />
-        </div>
-      </div>
-    </transition>
 
     <div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div>
 
@@ -68,28 +42,21 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, Prop, 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,
+    JournalTimetableEntry
-    TimetableGeneral,
-    TimetableStatus,
-    TimetableStops
   },
 
   props: {
@@ -119,6 +86,15 @@ export default defineComponent({
     };
   },
 
+  watch: {
+    '$route.query': {
+      deep: true,
+      handler() {
+        this.extraInfoIndexes.length = 0;
+      }
+    }
+  },
+  
   methods: {
     toggleExtraInfo(id: number) {
       const existingIdx = this.extraInfoIndexes.indexOf(id);

src/components/JournalView/JournalTimetables/TimetableDetails.vue

@@ -1,222 +0,0 @@
-<template>
-  <div>
-    <div class="details-actions">
-      <button class="btn--action" @click="toggleExtraInfo">
-        <b>{{ $t('journal.stock-info') }}</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="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';
-import { RouteLocationRaw } from 'vue-router';
-
-export default defineComponent({
-  components: { StockList },
-
-  emits: ['toggleExtraInfo'],
-
-  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
-          };
-        });
-    },
-    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);
-    }
-  }
-});
-</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;
-
-  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>

src/components/JournalView/JournalTimetables/TimetableStops.vue

@@ -1,164 +0,0 @@
-<template>
-  <div class="timetable-stops">
-    <div class="stop-list">
-      <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>
-
-    <div class="path-details" v-if="showExtraInfo && timetablePathDetails">
-      <span
-        v-for="(pathData, i) in timetablePathDetails"
-        :data-visited="pathData.isVisited"
-        :data-next-visited="
-          i < timetablePathDetails.length - 1 && timetablePathDetails[i + 1].isVisited
-        "
-      >
-        <span class="path-arrival" v-if="pathData.arrival">/ {{ pathData.arrival }} &RightArrow; </span>
-        <b class="path-scenery">{{ pathData.sceneryName }}</b>
-        <span class="path-departure" v-if="pathData.departure">
-          &RightArrow; {{ pathData.departure }}&nbsp;
-        </span>
-      </span>
-    </div>
-  </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: {
-    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', '') ?? '';
-
-        return {
-          arrival,
-          sceneryName,
-          sceneryHash,
-          departure,
-          isVisited: this.timetable.visitedSceneries?.includes(sceneryHash) ?? false
-        };
-      });
-    },
-
-    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>
-.timetable-stops {
-  word-wrap: break-word;
-  gap: 0.25em;
-  font-size: 0.95em;
-  color: #adadad;
-}
-
-.stop-list {
-  &-item[data-confirmed='true'] {
-    color: lightgreen;
-
-    .stop-name {
-      font-weight: bold;
-    }
-  }
-}
-
-.path-details {
-  margin-top: 0.5em;
-}
-
-.path-details > span[data-visited='true'] {
-  .path-arrival,
-  .path-scenery {
-    color: lightgreen;
-  }
-
-  &[data-next-visited='true'] .path-departure {
-    color: lightgreen;
-  }
-}
-</style>

src/components/JournalView/typings.ts

@@ -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;
+  }
 }

src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue

@@ -19,8 +19,25 @@
         :data-status="status"
       >
         <router-link :to="train.driverRouteLocation" class="a-block">
-          <span class="user_train">{{ train.trainNo }}</span>
+          <span class="user_train"> {{ train.trainNo }}</span>
-          <span class="user_name">{{ train.driverName }}</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>
@@ -66,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 {

src/components/StationsView/StationTable.vue

@@ -407,9 +407,9 @@ export default defineComponent({
 $rowCol: #424242;
 
 .station_table {
-  height: 90vh;
+  height: calc(100vh - 11em);
   max-height: 2000px;
-  min-height: 700px;
+  min-height: 500px;
   overflow: auto;
   font-weight: 500;
 }

src/components/Tooltip/BaseTooltip.vue

@@ -29,7 +29,7 @@ export default defineComponent({
   border-radius: 0.25em;
 
   width: 100%;
-  background-color: #333;
+  background-color: #1f1f1f;
   box-shadow: 0 0 5px 2px #aaa;
 }
 

src/components/Tooltip/SpawnsTooltip.vue

@@ -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;
 }

src/components/Tooltip/Tooltip.vue

@@ -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';
+            translateX = BOX_PADDING_PX + 'px';
-          } else if (val[0] >= clientWidth - boxWidth / 2) {
+          } 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 >=
+            val[1] - previewEl.getBoundingClientRect().height <=
-            window.innerHeight + window.scrollY;
+            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})`;
         });
       }

src/components/Tooltip/UsersTooltip.vue

@@ -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;
 }

src/components/Tooltip/VehiclePreviewTooltip.vue

@@ -1,23 +1,18 @@
 <template>
   <div class="tooltip-content">
-    <div v-if="imageState == 'loading'" class="loading-info">
+    <div class="image-box">
-      {{ $t('vehicle-preview.loading') }}
+      <Loading v-if="imageState == 'loading'" class="loading-info" />
+
+      <img
+        v-if="tooltipStore.type"
+        @load="onImageLoad"
+        @error="onImageError"
+        width="300"
+        height="176"
+        :src="`https://stacjownik.spythere.eu/static/images/${vehicleName}--300px.jpg`"
+      />
     </div>
 
-    <div v-if="imageState == 'error'">{{ $t('vehicle-preview.error') }}</div>
-
-    <img
-      v-if="tooltipStore.type"
-      @load="onImageLoad"
-      @error="onImageError"
-      width="300"
-      height="176"
-      class="rounded-md w-full h-auto"
-      :src="`https://static.spythere.eu/images/${vehicleName}--300px.jpg`"
-    />
-
-    <div v-if="imageState == 'error'" class="error-placeholder"></div>
-
     <div class="vehicle-name">
       {{ vehicleName.replace(/_/g, ' ') }}
       <span v-if="vehicleCargo">({{ vehicleCargo.id }})</span>
@@ -35,8 +30,11 @@
 import { defineComponent } from 'vue';
 import { useTooltipStore } from '../../store/tooltipStore';
 import { useApiStore } from '../../store/apiStore';
+import Loading from '../Global/Loading.vue';
 
 export default defineComponent({
+  components: { Loading },
+
   data() {
     return {
       tooltipStore: useTooltipStore(),
@@ -61,9 +59,12 @@ export default defineComponent({
     },
 
     onImageError(e: Event) {
+      if (!e.target || !(e.target instanceof HTMLImageElement) || this.imageState == 'error')
+        return;
+
       this.imageState = 'error';
 
-      (e.target as HTMLElement).style.display = 'none';
+      e.target.src = '/images/no-vehicle-image.png';
     }
   },
 
@@ -77,9 +78,11 @@ 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;
     }
   }
 });
@@ -89,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 {

src/components/TrainsView/StopLabel.vue

@@ -4,10 +4,12 @@
     :data-minor="stop.isSBL || (stop.nameRaw.endsWith(', po') && !stop.duration)"
   >
     <router-link v-if="/(, podg$|<strong>)/.test(stop.nameHtml)" :to="sceneryHref">
-      <span class="name" v-html="stop.nameHtml"></span>
+      <b class="stop-name">
+        {{ stop.nameRaw }}
+      </b>
     </router-link>
 
-    <span v-else class="name" v-html="stop.nameHtml"></span>
+    <span v-else class="stop-name">{{ stop.nameRaw }}</span>
 
     <span
       v-if="stop.position != 'begin'"
@@ -45,7 +47,10 @@
     <span
       v-if="
         stop.position != 'end' &&
-        (stop.duration != 0 || stop.status == 'stopped' || stop.departureDelay != stop.arrivalDelay)
+        (stop.duration != 0 ||
+          stop.position == 'begin' ||
+          stop.status == 'stopped' ||
+          stop.departureDelay != stop.arrivalDelay)
       "
       class="date departure"
       :data-status-delayed="stop.departureDelay > 0"
@@ -68,16 +73,16 @@
 </template>
 
 <script lang="ts">
-import { PropType, defineComponent } from 'vue';
+import { PropType, defineComponent, stop } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
-import { TrainScheduleStop } from './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
     }
   },
@@ -107,7 +112,7 @@ s {
   flex-wrap: wrap;
   align-items: center;
 
-  .name {
+  .stop-name {
     background: $stopNameClr;
     border-radius: 0.5em 0 0 0.5em;
     padding: 0.3em 0.5em;
@@ -134,11 +139,15 @@ s {
       display: none;
     }
 
-    .name {
+    .stop-name {
       background: none;
       color: #aaa;
       padding: 0;
     }
+
+    i {
+      display: none;
+    }
   }
 
   .stop {

src/components/TrainsView/TrainInfo.vue

@@ -1,166 +1,203 @@
 <template>
   <div class="train-info" :data-extended="extended">
-    <section class="train-general">
+    <div class="general-top-bar">
-      <div class="general-top-bar">
+      <div class="top-bar-header">
-        <div class="top-bar-header">
+        <b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
-          <b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
+        <span class="timetable-id" v-if="train.timetableData">
-          <span class="timetable-id" v-if="train.timetableData">
+          #{{ train.timetableData.timetableId }}
-            #{{ train.timetableData.timetableId }}
+        </span>
-          </span>
 
-          <span class="train-badge twr" v-if="train.timetableData?.TWR" :title="$t('general.TWR')">
+        <span
-            TWR
+          class="train-badge twr"
-          </span>
+          v-if="train.timetableData?.TWR"
+          data-tooltip-type="BaseTooltip"
+          :data-tooltip-content="$t('warnings.TWR')"
+        >
+          TWR
+        </span>
 
-          <span class="train-badge skr" v-if="train.timetableData?.SKR" :title="$t('general.SKR')">
+        <span
-            SKR
+          class="train-badge tn"
-          </span>
+          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)"
+          >
+            {{ train.driverLevel < 2 ? 'L' : `${train.driverLevel}` }}
+          </b>
 
           <b
-            v-if="train.timetableData"
+            v-if="apiStore.donatorsData.includes(train.driverName)"
-            data-tooltip-type="BaseTooltip"
+            data-tooltip-type="DonatorTooltip"
-            :data-tooltip-content="getCategoryExplanation(train.timetableData.category)"
+            :data-tooltip-content="$t('donations.driver-message')"
-            class="text--primary tooltip-help"
           >
-            {{ train.timetableData.category }}
+            {{ train.driverName }}
+            <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
           </b>
-          <b class="train-number">{{ train.trainNo }}</b>
-          <span>&bull;</span>
 
-          <div class="train-driver">
+          <span v-else>{{ train.driverName }}</span>
-            <b
-              class="level-badge driver"
-              :style="calculateExpStyle(train.driverLevel, train.isSupporter)"
-            >
-              {{ train.driverLevel < 2 ? 'L' : `${train.driverLevel}` }}
-            </b>
-
-            <b
-              v-if="apiStore.donatorsData.includes(train.driverName)"
-              data-tooltip-type="DonatorTooltip"
-              :data-tooltip-content="$t('donations.driver-message')"
-            >
-              {{ train.driverName }}
-              <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
-            </b>
-
-            <span v-else>{{ train.driverName }}</span>
-          </div>
         </div>
       </div>
+    </div>
 
-      <div class="general-timetable" v-if="train.timetableData">
+    <div class="general-timetable" v-if="train.timetableData">
-        <strong>{{ train.timetableData.route.replace('|', ' - ') }}</strong>
+      <strong>{{ train.timetableData.route.replace('|', ' - ') }}</strong>
-        <span
+      <span
-          v-if="getSceneriesWithComments(train.timetableData).length > 0"
+        v-if="getSceneriesWithComments(train.timetableData).length > 0"
-          data-tooltip-type="BaseTooltip"
+        data-tooltip-type="BaseTooltip"
-          :data-tooltip-content="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(
+        :data-tooltip-content="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(
-            train.timetableData
+          train.timetableData
-          )})`"
+        )})`"
-        >
+      >
-          <img class="image-warning" src="/images/icon-warning.svg" />
+        <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="status-badges">
-
+        <div v-if="!train.currentStationHash" class="train-badge offline">
-      <div class="general-stops" v-if="train.timetableData">
+          <i class="fa-solid fa-ban"></i>
-        <span v-if="train.timetableData.followingStops.length > 2">
+          {{ $t('trains.scenery-offline') }}
-          {{ $t('trains.via-title') }}
-          <span v-html="getTrainStopsHtml(train.timetableData.followingStops)"></span>
-        </span>
-      </div>
-
-      <div class="general-status">
-        <div class="status-timetable-progress" v-if="train.timetableData">
-          <ProgressBar :progressPercent="confirmedPercentage(train.timetableData.followingStops)" />
-
-          <span class="progress-distance">
-            <span>{{ currentDistance(train.timetableData.followingStops) }} km</span>
-            <span>/</span>
-            <span class="text--primary">{{ train.timetableData.routeDistance }} km </span>
-            <span>|</span>
-            <span v-html="currentDelay(train.timetableData.followingStops)"></span>
-          </span>
         </div>
 
-        <div class="status-badges">
+        <div v-if="!train.online" class="train-badge offline">
-          <div v-if="!train.currentStationHash" class="train-badge offline">
+          <i class="fa-solid fa-user-slash"></i>
-            <img src="/images/icon-offline.svg" alt="offline train icon" />
+          Offline {{ lastSeenMessage(train.lastSeen) }}
-            {{ $t('trains.scenery-offline') }}
-          </div>
-
-          <div v-if="!train.online" class="train-badge offline">
-            <img src="/images/icon-offline.svg" alt="offline train icon" />
-            Offline {{ lastSeenMessage(train.lastSeen) }}
-          </div>
         </div>
       </div>
+    </div>
 
-      <div class="general-stats" v-if="extended">
+    <div class="general-stats" v-if="extended">
-        <div>
+      <div>
-          <img src="/images/icon-length.svg" alt="length icon" />
+        <img src="/images/icon-length.svg" alt="length icon" />
-          {{ train.length }}m
+        {{ train.length }}m
-        </div>
-
-        <div>
-          <img src="/images/icon-mass.svg" alt="mass icon" />
-          {{ (train.mass / 1000).toFixed(1) }}t
-        </div>
-
-        <div>
-          <img src="/images/icon-speed.svg" alt="speed icon" />
-          {{ train.speed }} km/h
-
-          <span v-if="stockSpeedLimit != Infinity">
-            &bull;
-            <em
-              class="text--grayed"
-              style="text-decoration: underline dotted"
-              tabindex="0"
-              :data-tooltip="$t('trains.vmax-tooltip')"
-            >
-              {{ stockSpeedLimit }} km/h
-            </em>
-          </span>
-        </div>
       </div>
 
-      <div class="text--grayed" style="margin-top: 0.25em">
-        {{ displayTrainPosition(train) }}
-      </div>
-    </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>
+      <div>
-          <span> {{ train.length }}m</span>
+        <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>
+          <em
-          <span v-if="train.stockList.length > 1">
+            class="text--grayed"
-            &bull;
+            style="text-decoration: underline dotted"
-            {{ $t('trains.cars') }}: {{ train.stockList.length - 1 }}
+            tabindex="0"
-          </span>
+            :data-tooltip="$t('trains.vmax-tooltip')"
+          >
+            vMax:
+            {{ stockSpeedLimit }} km/h
+          </em>
+        </span>
+      </div>
+    </div>
+
+    <div class="text--grayed" style="margin-top: 0.25em">
+      {{ displayTrainPosition(train) }}
+    </div>
+
+    <div
+      class="train-dangers"
+      v-if="extended && train.timetableData && train.timetableData.warningNotes"
+    >
+      <div class="dangers-badges">
+        <div v-if="train.timetableData?.TWR">
+          <div class="train-badge twr">TWR</div>
+          - {{ $t('warnings.TWR') }}
+        </div>
+
+        <div v-if="train.timetableData?.hasDangerousCargo">
+          <div class="train-badge tn">TN</div>
+          - {{ $t('warnings.TN') }}
+        </div>
+
+        <div v-if="train.timetableData?.hasExtraDeliveries">
+          <div class="train-badge pn">PN</div>
+          - {{ $t('warnings.PN') }}
         </div>
       </div>
-    </section>
+
+      <div class="dangers-notes">
+        <h4>{{ $t('warnings.header-title') }}</h4>
+        <p>
+          <i>{{ train.timetableData?.warningNotes }}</i>
+        </p>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import styleMixin from '../../mixins/styleMixin';
-import trainInfoMixin from '../../mixins/trainInfoMixin';
-import ProgressBar from '../Global/ProgressBar.vue';
 import { useMainStore } from '../../store/mainStore';
 import { useApiStore } from '../../store/apiStore';
-import StockList from '../Global/StockList.vue';
 import { Train } from '../../typings/common';
+import 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, trainCategoryMixin],
@@ -185,13 +222,36 @@ export default defineComponent({
 
   computed: {
     stockSpeedLimit() {
-      return this.train.stockList.reduce((acc, stockName) => {
+      let isPassenger = true;
-        const vehicleSpeed =
+
-          this.apiStore.vehiclesData?.find((v) => v.name == stockName.split(':')[0])?.group.speed ??
+      const vehicleMaxSpeed = this.train.stockList.reduce((acc, stockName) => {
-          300;
+        const vehicleData = this.apiStore.vehiclesData?.find(
+          (v) => v.name == stockName.split(':')[0]
+        );
+
+        if (!vehicleData) return acc;
+        if (vehicleData.type == 'wagon-freight') isPassenger = false;
+
+        const vehicleSpeed = vehicleData.group.speed;
 
         return Math.min(vehicleSpeed, acc);
-      }, 300);
+      }, Infinity);
+
+      const headLoco = this.train.stockList[0].slice(0, this.train.stockList[0].indexOf('-'));
+
+      if (!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 {
@@ -199,14 +259,13 @@ export default defineComponent({
         query: {
           'search-driver': this.train.driverName
         }
-      }
+      };
     }
   }
 });
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
 @import '../../styles/badge.scss';
 
 .image-warning {
@@ -215,27 +274,32 @@ 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;
+  display: flex;
-  grid-template-columns: 2fr 1fr;
+  flex-direction: column;
-  grid-template-rows: 1fr;
+  gap: 0.25em;
-
-  &[data-extended='true'] {
-    grid-template-columns: 1fr;
-  }
-
-  padding: 1em;
 
   background-color: #1a1a1a;
   gap: 0.5em;
@@ -265,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;
 }
@@ -347,11 +405,4 @@ export default defineComponent({
   display: flex;
   gap: 0.25em;
 }
-
-@include smallScreen() {
-  .train-info {
-    grid-template-columns: 1fr;
-    gap: 1em 0;
-  }
-}
 </style>

src/components/TrainsView/TrainOptions.vue

@@ -178,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') {

src/components/TrainsView/TrainSchedule.vue

@@ -1,19 +1,19 @@
 <template>
-  <div class="train-schedule" @click="toggleShowState">
+  <div class="train-schedule">
-    <StockList :trainStockList="train.stockList" />
-
     <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-is-active="stop.isActive"
-          :data-last-confirmed="stop.isLastConfirmed"
+          :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 &&
+                  (scheduleStopsV2[i + 1]?.arrivalLineInfo?.routeSpeed !=
-                  !/-|_|(^it\d+)|(^sbl)/gi.test(stop.departureLine)
+                    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> | {{ stop.departureLineInfo.routeSpeed }}</span>
-                    <span v-if="stop.departureLineInfo.isElectric">⚡</span>
+
                     <img
-                      v-else
+                      :src="
-                      src="/images/icon-we4a.png"
+                        stop.departureLineInfo.isElectric
-                      :title="$t('trains.we4a-tooltip')"
+                          ? '/images/icon-catenary.svg'
-                      width="10"
+                          : '/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>{{ scheduleStopsV2[i + 1].sceneryName }}</span>
-                  <span v-if="stop.departureLineInfo?.routeTracks == 1"> &UpDownArrow;</span>
+
-                  <span v-else> &UpArrowDownArrow;</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">
+                <div
-                  <span> {{ scheduleStops[i + 1].arrivalLine }}</span>
+                  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="
-                      src="/images/icon-we4a.png"
+                        scheduleStopsV2[i + 1].arrivalLineInfo?.isElectric
-                      :title="$t('trains.we4a-tooltip')"
+                          ? '/images/icon-catenary.svg'
-                      width="10"
+                          : '/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';
+import { StationRoutesInfo, TimetablePathElement, Train } from '../../typings/common';
-
+import { TrainSchedulePoint } from './typings';
-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;
-}
 
 export default defineComponent({
   components: { StopLabel, StockList },
@@ -163,68 +171,173 @@ export default defineComponent({
     };
   },
 
+  methods: {
+    getPathSceneryData(pathEl: TimetablePathElement) {
+      const sceneryData =
+        this.store.stationList?.find((sc) => sc.name == pathEl.stationName) ?? null;
+
+      if (!sceneryData || !sceneryData.generalInfo) return null;
+
+      const activeScenery = this.apiStore.activeData?.activeSceneries?.find(
+        (sc) => sc.stationName == pathEl.stationName
+      );
+
+      const arrivalLineData = pathEl.arrivalRouteExt
+        ? (sceneryData.generalInfo.routes.all.find(
+            (rt) => rt.routeName == pathEl.arrivalRouteExt
+          ) ?? null)
+        : null;
+
+      const departureLineData = pathEl.departureRouteExt
+        ? (sceneryData.generalInfo.routes.all.find(
+            (rt) => rt.routeName == pathEl.departureRouteExt
+          ) ?? null)
+        : null;
+
+      return {
+        generalInfo: sceneryData.generalInfo,
+        isOnline:
+          activeScenery &&
+          (activeScenery.isOnline == 1 || activeScenery.lastSeen >= Date.now() - 60000),
+        arrivalLineData,
+        departureLineData
+      };
+    }
+  },
+
   computed: {
-    scheduleStops(): TrainScheduleStop[] {
+    scheduleStopsV2() {
       if (!this.train.timetableData) return [];
 
-      const { timetablePath } = this.train.timetableData;
+      const { timetablePath, followingStops } = this.train.timetableData;
+
+      const stopRows: TrainSchedulePoint[] = [];
+
       let currentPathIndex = 0;
+      let currentPath = timetablePath[0];
 
-      return (
+      let pathData = this.getPathSceneryData(currentPath);
-        this.train.timetableData?.followingStops.map((stop, i, arr) => {
-          const isExternal =
-            i < arr.length - 1 &&
-            stop.departureLine === timetablePath[currentPathIndex].departureRouteExt;
 
-          const sceneryName = timetablePath[currentPathIndex].stationName;
+      let arrivalLineInfo: StationRoutesInfo | null = null;
-          const sceneryInfo = this.apiStore.sceneryData.find((st) => st.name == sceneryName);
+      let departureLineInfo: StationRoutesInfo | null = null;
 
-          const arrivalLineInfo = sceneryInfo?.routesInfo.find(
+      let isActive = false;
-            (r) => r.routeName == stop.arrivalLine
-          );
 
-          const departureLineInfo = sceneryInfo?.routesInfo.find(
+      if (pathData?.departureLineData) {
-            (r) => r.routeName == stop.departureLine
+        arrivalLineInfo = pathData.departureLineData;
-          );
+        departureLineInfo = pathData.departureLineData;
+      }
 
-          if (isExternal) currentPathIndex++;
+      for (const stop of followingStops) {
+        let isExternal = false;
 
-          return {
+        if (
-            nameHtml: stop.stopName,
+          stop.arrivalLine &&
-            nameRaw: stop.stopNameRAW,
+          currentPath.arrivalRouteExt &&
+          stop.arrivalLine == currentPath.arrivalRouteExt
+        ) {
+          isExternal = true;
 
-            arrivalScheduled: stop.arrivalTimestamp,
+          if (pathData?.arrivalLineData) {
-            arrivalReal: stop.arrivalRealTimestamp,
+            arrivalLineInfo = pathData.arrivalLineData;
+          }
+        }
 
-            departureScheduled: stop.departureTimestamp,
+        let correctedDepartureLineData: StationRoutesInfo | null = null;
-            departureReal: stop.departureRealTimestamp,
 
-            departureDelay: stop.departureDelay,
+        const internalRouteInfo = stop.departureLine
-            arrivalDelay: stop.arrivalDelay,
+          ? pathData?.generalInfo.routes.all.find(
+              (route) => route.isInternal && route.routeName == stop.departureLine
+            )
+          : undefined;
 
-            duration: stop.stopTime,
+        if (internalRouteInfo) {
+          correctedDepartureLineData = internalRouteInfo;
+          departureLineInfo = internalRouteInfo;
+        }
 
-            comments: stop.comments ?? null,
+        let rowData: TrainSchedulePoint = {
+          nameHtml: stop.stopName,
+          nameRaw: stop.stopNameRAW,
 
-            arrivalLine: stop.arrivalLine,
+          arrivalScheduled: stop.arrivalTimestamp,
-            departureLine: stop.departureLine,
+          arrivalReal: stop.arrivalRealTimestamp,
 
-            arrivalLineInfo: arrivalLineInfo,
+          departureScheduled: stop.departureTimestamp,
-            departureLineInfo: departureLineInfo,
+          departureReal: stop.departureRealTimestamp,
 
-            isExternal,
+          departureDelay: stop.departureDelay,
+          arrivalDelay: stop.arrivalDelay,
 
-            type: stop.stopType,
+          duration: stop.stopTime ?? 0,
-            distance: stop.stopDistance,
+          type: stop.stopType,
-            isActive: this.activeMinorStops.includes(i),
+          distance: stop.stopDistance,
-            isLastConfirmed: this.lastConfirmed === i && !stop.terminatesHere,
+
-            isSBL: /sbl/gi.test(stop.stopName),
+          comments: stop.comments ?? null,
-            position: stop.beginsHere ? 'begin' : stop.terminatesHere ? 'end' : 'en-route',
+
-            sceneryName,
+          arrivalLine: stop.arrivalLine,
-            status: stop.confirmed ? 'confirmed' : stop.stopped ? 'stopped' : 'unconfirmed'
+          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() {
@@ -256,12 +369,6 @@ export default defineComponent({
 
       return activeMinorStopList;
     }
-  },
-
-  methods: {
-    toggleShowState() {
-      this.$emit('click');
-    }
   }
 });
 </script>
@@ -285,10 +392,6 @@ $blinkAnim: 0.5s ease-in-out alternate infinite blink;
   }
 }
 
-.train-schedule {
-  padding: 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'] {
+  // &[data-minor-stop-active='true'] {
-    .progress > .line {
+  //   .progress > .line {
-      animation: $blinkAnim;
+  //     animation: $blinkAnim;
-    }
+  //   }
 
-    & + div {
+  //   & + div {
-      .progress > .line_node-top {
+  //     .progress > .line_node-top {
-        animation: $blinkAnim;
+  //       animation: $blinkAnim;
-      }
+  //     }
-    }
+  //   }
-  }
+  // }
 
-  // Last confirmed outpost / checkpoint
+  &[data-is-active='true'] {
-  &[data-last-confirmed='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;
     }
   }
 
@@ -532,8 +642,8 @@ $blinkAnim: 0.5s ease-in-out alternate infinite blink;
     align-items: center;
   }
 
-  img {
+  img[data-tooltip] {
-    width: 1em;
+    cursor: help;
   }
 }
 

src/components/TrainsView/TrainStats.vue

@@ -249,7 +249,6 @@ h3 {
 }
 
 @include smallScreen {
-  h1,
   .no-data {
     text-align: center;
   }

src/components/TrainsView/TrainTable.vue

@@ -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,15 +20,7 @@
       </div>
 
       <transition-group name="list-anim" tag="ul">
-        <li
+        <TrainTableItem v-for="train in trains" :key="train.id" :train="train" />
-          class="train-row"
-          v-for="train in trains"
-          :key="train.id"
-        >
-          <router-link class="a-block" :to="train.driverRouteLocation">
-            <TrainInfo :train="train" :extended="false" />
-          </router-link>
-        </li>
       </transition-group>
     </div>
   </transition>
@@ -30,13 +29,15 @@
 <script lang="ts">
 import { defineComponent, inject, PropType, Ref } from 'vue';
 import { useMainStore } from '../../store/mainStore';
-import Loading from '../Global/Loading.vue';
-import TrainInfo from './TrainInfo.vue';
-import { Status, Train } from '../../typings/common';
 import { useApiStore } from '../../store/apiStore';
+import { Status, Train } from '../../typings/common';
+
+import Loading from '../Global/Loading.vue';
+import TrainTableItem from './TrainTableItem.vue';
+import TrainInfo from './TrainInfo.vue';
 
 export default defineComponent({
-  components: { Loading, TrainInfo },
+  components: { Loading, TrainInfo, TrainTableItem },
 
   props: {
     trains: {
@@ -45,6 +46,10 @@ export default defineComponent({
     }
   },
 
+  data: () => ({
+    scrollTop: 0
+  }),
+
   setup() {
     const store = useMainStore();
     const apiStore = useApiStore();
@@ -64,6 +69,16 @@ export default defineComponent({
     };
   },
 
+  activated() {
+    (this.$refs['trainTableRef'] as HTMLElement).scrollTop = this.scrollTop;
+  },
+
+  methods: {
+    onScroll(e: Event) {
+      this.scrollTop = (e.target as HTMLElement).scrollTop;
+    }
+  },
+
   computed: {
     dataStatus() {
       if (this.store.isOffline) return Status.Data.Offline;
@@ -82,10 +97,10 @@ export default defineComponent({
 @import '../../styles/animations.scss';
 
 .train-table {
-  position: relative;
+  height: calc(100vh - 11em);
+  min-height: 500px;
 
-  height: 90vh;
+  position: relative;
-  min-height: 550px;
   overflow-y: auto;
   overflow-x: hidden;
 }
@@ -98,10 +113,4 @@ export default defineComponent({
 
   background: #1a1a1a;
 }
-
-li.train-row {
-  background-color: var(--clr-secondary);
-  margin-bottom: 1em;
-  width: 100%;
-}
 </style>

src/components/TrainsView/TrainTableItem.vue

@@ -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>

src/components/TrainsView/typings.ts

@@ -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;
+}

src/data/speedLimits.json

@@ -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
+   }
+}

src/locales/en.json

@@ -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",
+    "refresh": "REFRESH"
-    "TWR": "High risk freight train",
-    "SKR": "Train with exceeded gauge"
   },
   "update": {
     "title": "Stacjownik update!",
@@ -43,7 +48,9 @@
     "no-result": "No results for current search!",
     "migration-warning": "Stacjownik services will be unavailable 2/06/2022 between 1-3am (CEST time) due to the migration of API hostings!",
     "migration-confirm": "Roger that!",
-    "offline": "App is in the offline mode!"
+    "offline": "App is in the offline mode!",
+    "tooltip-driver-offline": "Driver is offline",
+    "tooltip-scenery-offline": "Scenery is offline"
   },
   "footer": {
     "discord": "Stacjownik Discord server"
@@ -52,20 +59,16 @@
     "EI": "domestic express",
     "EC": "international express",
     "EN": "domestic night express",
-
     "MP": "intervoivodeship bullet",
     "MO": "intervoivodeship regio",
     "MM": "international bullet",
     "MH": "intervoivodeship night bullet",
-
     "RP": "voivodeship bullet",
     "RM": "international voivodeship regio",
     "RO": "voivodeship regio",
     "RA": "voivodeship regio (urban)",
-
     "PW": "empty passenger",
     "PX": "empty passenger test drive",
-
     "TC": "international freight (intermodal)",
     "TG": "international freight (organized cargo)",
     "TR": "international freight (unorganized cargo)",
@@ -75,16 +78,14 @@
     "TK": "freight (for stations & sidings)",
     "TS": "empty freight test drive",
     "TH": "locomotive rolling stock (over 3 vehicles)",
-
     "LT": "freight locomotive only",
     "LP": "passenger locomotive only",
     "LS": "shunting locomotive only",
     "LZ": "shunting locomotive only",
-
     "ZN": "inspection / diagnostic type",
     "ZU": "other maintenance type",
-    "ZG": "emergency (deprecated category)",
+    "ZG": "emergency (deprecated)",
-
+    "AP": "voivodeship regio (deprecated)",
     "E": "electric loco",
     "J": "EMU",
     "S": "diesel loco",
@@ -123,7 +124,6 @@
     "mechaniczne": "levers (mechanical)",
     "mechaniczne+SPK": "levers + SPK",
     "mechaniczne+SCS": "levers + SCS",
-
     "abbrevs": {
       "SPK": "SPK",
       "SCS": "SCS",
@@ -152,14 +152,11 @@
   "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",
@@ -169,10 +166,10 @@
     "search-issuedFrom": "Issuing scenery name",
     "search-via": "Via scenery name",
     "search-terminatingAt": "Terminating scenery name",
-    "search-timetables-date": "Timetable date (UTC+2 / CEST)",
+    "search-timetables-date": "Timetable date",
-    "search-dispatchers-date": "Service date (UTC+2 / CEST)",
+    "search-dispatchers-date": "Service date (from / to)",
-    "search-date": "Date (UTC+2 / CEST)",
+    "search-date-from": "Date (UTC+2 / CEST)",
-
+    "search-date-to": "Date (UTC+2 / CEST)",
     "sort-mass": "mass",
     "sort-speed": "speed",
     "sort-length": "length",
@@ -181,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-twr": "TWR",
-    "filter-skr": "EXCEEDED GAUGE",
+    "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",
@@ -214,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",
@@ -229,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",
@@ -249,7 +238,6 @@
     "unavailable": "UNSUPPORTED",
     "nonPublic": "NON-PUBLIC",
     "abandoned": "ABANDONED",
-
     "SPK": "SPK",
     "SPK-R": "SPK + MANUAL",
     "SPK-M": "SPK + MECH.",
@@ -259,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",
@@ -292,13 +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...",
     "search-button-title": "SEARCH",
-
     "minimum-hours-title": "SHOW ONLY SCENERIES UNTIL:",
     "now": "NOW",
     "hour": "h",
@@ -361,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]",
@@ -369,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 speed based on vehicles and acceptable train mass",
-    "vmax-tooltip": "Maximum train speed based on rolling stock vehicles - braked weight is not included",
+    "catenary-tooltip": "Electrified route",
-    "we4a-tooltip": "Non-electrified track",
+    "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",
@@ -395,22 +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!",
-
     "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 or it's offline.",
+    "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-return": "GO BACK TO THE MAIN SITE"
+    "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",
@@ -432,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",
@@ -447,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",
-
+    "entry-details": "DETAILS",
-    "stock-info": "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",
@@ -475,7 +449,6 @@
       "distance": "DISTANCE",
       "stations": "STATIONS"
     },
-
     "daily-stats": {
       "button": "DAILY STATS",
       "title": "STATS OF THE DAY",
@@ -487,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",
@@ -508,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",
@@ -541,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",
     "tablice-link": "Timetable summary board (by Thundo)",
-
     "bottom-info": "Show full history in the Journal tab"
   },
   "availability": {
@@ -581,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})",
@@ -599,4 +557,4 @@
     "search-train": "Train no.",
     "search-driver": "Driver name"
   }
-}
+}

src/locales/pl.json

@@ -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Ż",
+    "refresh": "ODŚWIEŻ"
-    "TWR": "Towar niebezpieczny wysokiego ryzyka",
-    "SKR": "Przekroczona skrajnia"
   },
   "update": {
     "title": "Aktualizacja Stacjownika!",
@@ -40,7 +45,9 @@
     "loading": "Pobieranie danych...",
     "error": "Wystąpił problem z załadowaniem danych!",
     "no-result": "Brak wyników o podanych kryteriach!",
-    "offline": "Aplikacja w trybie offline!"
+    "offline": "Aplikacja w trybie offline!",
+    "tooltip-driver-offline": "Maszynista offline",
+    "tooltip-scenery-offline": "Sceneria offline"
   },
   "footer": {
     "discord": "Serwer Discord Stacjownika"
@@ -49,20 +56,16 @@
     "EI": "ekspres krajowy",
     "EC": "ekspres międzynarodowy",
     "EN": "ekspres krajowy nocny",
-
     "MP": "międzywojewódzki pospieszny",
     "MO": "międzywojewódzki osobowy",
     "MM": "międzynarodowy pospieszny",
     "MH": "międzywojewódzki pospieszny (nocny)",
-
     "RP": "wojewódzki pospieszny",
     "RO": "wojewódzki osobowy",
     "RM": "wojewódzki osobowy międzynarodowy",
-    "RA": "wojewódzki osobowy algomeracyjny",
+    "RA": "wojewódzki osobowy aglomeracyjny",
-
     "PW": "pasażerski próżny - służbowy",
     "PX": "pasażerski próżny próbny",
-
     "TC": "towarowy międzynarodowy intermodalny",
     "TG": "towarowy międzynarodowy masowy",
     "TR": "towarowy międzynarodowy niemasowy",
@@ -72,16 +75,14 @@
     "TK": "towarowy zdawczy",
     "TS": "towarowy próżny próbny",
     "TH": "skład lokomotyw (powyżej 3 pojazdów)",
-
     "LT": "lokomotywa towarowa luzem",
     "LP": "lokomotywa pasażerska luzem",
     "LS": "lokomotywa manewrowa luzem",
     "LZ": "lokomotywa dla poc. utrzymaniowo-naprawczych",
-
     "ZN": "inspekcyjny / diagnostyczny",
     "ZU": "inny utrzymaniowy",
     "ZG": "ratunkowy (kat. wycofana)",
-
+    "AP": "wojewódzki osobowy (kat. wycofana)",
     "E": "elektrowóz",
     "J": "EZT",
     "S": "spalinowóz",
@@ -120,7 +121,6 @@
     "mechaniczne": "mechaniczne",
     "mechaniczne+SPK": "mechaniczne z SPK",
     "mechaniczne+SCS": "mechaniczne z SCS",
-
     "abbrevs": {
       "SPK": "SPK",
       "SCS": "SCS",
@@ -149,14 +149,11 @@
   "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",
@@ -166,18 +163,17 @@
     "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-timetables-date": "Data rozkładu jazdy",
-    "search-dispatchers-date": "Data służby (UTC+2 / CEST)",
+    "search-dispatchers-date": "Data służby (od / do)",
-    "search-date": "Data (UTC+2 / CEST)",
+    "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ść",
@@ -185,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-twr": "TWR",
-    "filter-skr": "SKRAJNIA",
+    "filter-skr": "SKR",
+    "filter-tn": "TN",
+    "filter-pn": "PN",
     "filter-twr-skr": "TWR/SKR",
     "filter-all-statuses": "WSZYSTKIE",
     "filter-common": "ZWYKŁE",
@@ -198,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",
@@ -212,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",
@@ -227,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Ą",
@@ -247,7 +236,6 @@
     "unavailable": "NIEDOSTĘPNA",
     "nonPublic": "NIEPUBLICZNA",
     "abandoned": "WYCOFANA",
-
     "SPK": "SPK",
     "SPK-R": "SPK + RĘCZNE",
     "SPK-M": "SPK + MECH.",
@@ -256,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",
@@ -273,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",
@@ -290,7 +271,6 @@
       "minTwoWayCatenary": "SZLAKI DWUTOROWE ZELEKTR. (MINIMUM)",
       "minTwoWay": "SZLAKI DWUTOROWE NIEZELEKTR. (MINIMUM)"
     },
-
     "sceneries-search": "WYSZUKAJ SCENERIĘ:",
     "sceneries-placeholder": "Wpisz nazwę scenerii...",
     "authors-search": "WYSZUKAJ AUTORA (uwzględnia inne filtry):",
@@ -356,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ść obliczona na podstawie pojazdów w składzie i masy dopuszczalnej",
-    "vmax-tooltip": "Maksymalna prędkość na podstawie pojazdów w składzie - nie bierze pod uwagę masy hamowania",
+    "catenary-tooltip": "Szlak zelektryfikowany",
-    "we4a-tooltip": "Szlak niezelektryfikowany",
+    "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",
@@ -380,23 +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",
-
     "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 lub jest offline.",
+    "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-return": "WRÓĆ NA STRONĘ GŁÓWNĄ"
+    "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",
@@ -418,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",
@@ -439,17 +412,20 @@
     "timetable-fulfilled": "WYPEŁNIONY",
     "timetable-abandoned": "PORZUCONY",
     "timetable-online-button": "RJ ONLINE",
-
+    "entry-details": "SZCZEGÓŁY",
-    "stock-info": "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}",
@@ -460,7 +436,6 @@
       "distance": "DYSTANS",
       "stations": "STACJE"
     },
-
     "daily-stats": {
       "button": "STATYSTYKI DNIA",
       "title": "STATYSTYKI DNIA",
@@ -472,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}",
@@ -492,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",
@@ -525,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",
     "tablice-link": "Tablica informacyjna zbiorcza (autorstwa Thundo)",
-
     "bottom-info": "Pokaż pełną historię w zakładce Dziennika"
   },
   "availability": {
@@ -565,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})",
@@ -581,4 +541,4 @@
   "history": {
     "title": "DZIENNIK ROZKŁADÓW JAZDY"
   }
-}
+}

src/managers/trainFilterManager.ts

@@ -45,8 +45,11 @@ function filterTrainList(
         case TrainFilterId.twr:
           return !train.timetableData?.TWR;
 
-        case TrainFilterId.skr:
+        case TrainFilterId.pn:
-          return !train.timetableData?.SKR;
+          return !train.timetableData?.hasExtraDeliveries;
+
+        case TrainFilterId.tn:
+          return !train.timetableData?.hasDangerousCargo;
 
         case TrainFilterId.common:
           return train.timetableData?.SKR || train.timetableData?.TWR;

src/mixins/dateMixin.ts

@@ -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.seconds', { value: secondsTotal }, secondsTotal)
-        : this.$t('journal.minutes', { value: minsTotal }, minsTotal);
+          : this.$t('journal.minutes', { value: minsTotal }, minsTotal);
     }
   }
 });

src/router/index.ts

@@ -69,7 +69,8 @@ const router = createRouter({
     if (
       (to.name == 'SceneryView' || to.name == 'DriverView') &&
       from.name !== to.name &&
-      from.query['view'] === undefined
+      from.query['view'] === undefined &&
+      !savedPosition
     )
       return { el: `.app_main`, top: -15 };
 
@@ -79,10 +80,4 @@ const router = createRouter({
   routes
 });
 
-router.beforeEach((to, from, next) => {
-  next((vm) => {
-    (vm as any)['xd'] = 'xd';
-  });
-});
-
 export default router;

src/store/apiStore.ts

@@ -19,6 +19,7 @@ export const useApiStore = defineStore('apiStore', {
     sceneryData: [] as StationJSONData[],
 
     nextUpdateTime: 0,
+    nextDataCheckTime: 0,
 
     client: undefined as AxiosInstance | undefined,
 
@@ -48,17 +49,22 @@ 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;
@@ -68,17 +74,6 @@ export const useApiStore = defineStore('apiStore', {
     },
 
     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.dataStatuses.connection = Status.Data.Loaded;
-      //   });
-
-      //   return;
-      // }
-
       if (!this.activeData) this.dataStatuses.connection = Status.Data.Loading;
 
       try {
@@ -105,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;
@@ -117,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');
 

src/store/mainStore.ts

@@ -43,7 +43,7 @@ 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;
@@ -87,14 +87,18 @@ export const useMainStore = defineStore('mainStore', {
             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(',');
 
@@ -109,13 +113,18 @@ export const useMainStore = defineStore('mainStore', {
               : undefined
           } as Train;
 
+          const stationNameKey =
+            train.currentStationName.indexOf('.sc') != -1
+              ? train.currentStationName.split(' ').slice(0, -1).join(' ')
+              : train.currentStationName;
+
           // Sceneries trains map
-          if (sceneriesTrains.has(train.currentStationName)) {
+          if (sceneriesTrains.has(stationNameKey)) {
-            sceneriesTrains.set(train.currentStationName, [
+            sceneriesTrains.set(stationNameKey, [
-              ...sceneriesTrains.get(train.currentStationName)!,
+              ...sceneriesTrains.get(stationNameKey)!,
               trainObj
             ]);
-          } else sceneriesTrains.set(train.currentStationName, [trainObj]);
+          } else sceneriesTrains.set(stationNameKey, [trainObj]);
 
           // Checkpoints trains map
           if (trainObj.timetableData) {
@@ -213,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;
@@ -312,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';
@@ -342,6 +355,7 @@ export const useMainStore = defineStore('mainStore', {
             doubleElectrifiedNames: [],
             doubleOtherNames: [],
             sblNames: [],
+            all: [],
             minRouteSpeed: 0,
             maxRouteSpeed: 0
           } as StationRoutes

src/styles/JournalSection.scss

@@ -11,8 +11,8 @@
 
 .list_wrapper {
   overflow-y: auto;
-  height: 90vh;
+  height: calc(100vh - 12.5em);
-  min-height: 650px;
+  min-height: 500px;
   margin-top: 0.5em;
   position: relative;
 
@@ -20,7 +20,7 @@
 }
 
 .journal_wrapper {
-  max-width: 1500px;
+  max-width: var(--max-container-width);
   width: 100%;
 
   margin: 0 auto;

src/styles/JournalStats.scss

@@ -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,7 +29,7 @@ hr.section-separator {
 .info-stats {
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
+
   gap: 0.5em;
 }
 

src/styles/animations.scss

@@ -41,11 +41,11 @@ $animType: ease-in-out;
   }
 
   &-enter-active {
-    transition: all $animDuration ease-out;
+    transition: all $animDuration ease-in-out;
   }
 
   &-leave-active {
-    transition: all $animDuration ease-out;
+    transition: all $animDuration ease-in-out;
   }
 }
 

src/styles/badge.scss

@@ -1,4 +1,5 @@
 @import 'variables.scss';
+@import 'responsive.scss';
 
 .badge {
   font-weight: 600;
@@ -78,18 +79,17 @@
 }
 
 .train-badge {
-  display: flex;
+  display: inline-block;
-  align-items: center;
   gap: 0.3em;
 
   padding: 0.1em 0.3em;
   border-radius: 0.2em;
   font-weight: bold;
+  user-select: none;
 
   &.twr {
     background-color: var(--clr-twr);
     box-shadow: 0 0 5px 1px var(--clr-twr);
-    color: black;
   }
 
   &.skr {
@@ -97,6 +97,17 @@
     box-shadow: 0 0 5px 1px var(--clr-skr);
   }
 
+  &.tn {
+    background-color: var(--clr-tn);
+    box-shadow: 0 0 5px 1px var(--clr-tn);
+  }
+
+  &.pn {
+    background-color: var(--clr-pn);
+    box-shadow: 0 0 5px 1px var(--clr-pn);
+    color: black;
+  }
+
   &.offline {
     background-color: #be3728;
   }

src/styles/global.scss

@@ -13,7 +13,9 @@
   --clr-accent2: #ff3d5d;
 
   --clr-skr: #ff5100;
-  --clr-twr: #ffbb00;
+  --clr-twr: #ee503e;
+  --clr-tn: #cb4dcf;
+  --clr-pn: #ffd000;
 
   --clr-error: #fa3636;
   --clr-warning: #c59429;
@@ -225,7 +227,11 @@ a.a-button {
     font-weight: bold;
 
     &:hover {
-      background-color: #424242;
+      background-color: #505050;
+    }
+
+    &:disabled {
+      opacity: 0.75;
     }
   }
 
@@ -345,3 +351,11 @@ a.a-button {
     width: 100%;
   }
 }
+
+.g-separator {
+  display: block;
+  width: 100%;
+  height: 2px;
+  background-color: #aaa;
+  margin: 0.5em 0;
+}

src/styles/variables.scss

@@ -9,6 +9,3 @@ $warningCol: #ffe15b;
 
 $accentCol: #ffc014;
 $accent2Col: #ff3d5d;
-
-$skr: #ff5100;
-$twr: #ffbb00;

src/typings/api.ts

@@ -17,13 +17,13 @@ export namespace API {
       trainsAPI: APIDataStatus;
       dispatchersAPI: APIDataStatus;
       sceneryRequirementsAPI: APIDataStatus;
-      caches: APICache[];
     }
 
     export interface Response {
       activeSceneries?: API.ActiveSceneries.Response;
       trains?: API.ActiveTrains.Response;
       apiStatuses?: APIStatuses;
+      caches: APICache[];
     }
   }
 
@@ -196,14 +196,15 @@ export namespace API {
       timetableId: number;
       category: string;
       route: string;
-
       stopList: TimetableStop[];
-
       TWR: boolean;
       SKR: boolean;
+      hasDangerousCargo: boolean;
+      hasExtraDeliveries: boolean;
+      warningNotes: string | null;
       sceneries: string[];
-
       path: string;
+      trainMaxSpeed: number;
     }
   }
 
@@ -246,8 +247,6 @@ export namespace API {
       authorName?: string;
       authorId?: number;
 
-      stopsString?: string;
-
       stockString?: string;
       stockHistory: string[];
 
@@ -255,17 +254,22 @@ export namespace API {
       stockLength?: number;
       maxSpeed?: number;
 
-      hashesString?: string;
       currentSceneryName?: string;
       currentSceneryHash?: string;
-      routeSceneries?: string;
+      routeSceneries: string;
-      checkpointArrivals?: string[];
+      checkpointArrivals: string[];
-      checkpointDepartures?: string[];
+      checkpointDepartures: string[];
-      checkpointArrivalsScheduled?: string[];
+      checkpointArrivalsScheduled: string[];
-      checkpointDeparturesScheduled?: string[];
+      checkpointDeparturesScheduled: string[];
-      checkpointStopTypes?: string[];
+      checkpointStopTypes: string[];
-      visitedSceneries?: string[];
+      checkpointComments: string[];
+      visitedSceneries: string[];
+      sceneryNames: string[];
       path: string;
+      warningNotes: string | null;
+      hasDangerousCargo: boolean;
+      hasExtraDeliveries: boolean;
+      trainMaxSpeed?: number;
     }
 
     export type Response = Data[];

src/typings/common.ts

@@ -1,4 +1,5 @@
 import { RouteLocationRaw } from 'vue-router';
+import { StationJSONData } from '../store/typings';
 
 export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
 export type ScenerySpawnType = 'passenger' | 'freight' | 'loco' | 'all';
@@ -72,19 +73,25 @@ export interface Train {
   isTimeout: boolean;
   isSupporter: boolean;
 
-  driverRouteLocation: RouteLocationRaw,
+  driverRouteLocation: RouteLocationRaw;
 
-  timetableData?: {
+  timetableData?: TrainTimetableData;
-    timetableId: number;
+}
-    category: string;
+
-    route: string;
+export interface TrainTimetableData {
-    followingStops: TrainStop[];
+  timetableId: number;
-    TWR: boolean;
+  category: string;
-    SKR: boolean;
+  route: string;
-    routeDistance: number;
+  followingStops: TrainStop[];
-    sceneries: string[];
+  TWR: boolean;
-    timetablePath: TimetablePathElement[];
+  SKR: boolean;
-  };
+  hasDangerousCargo: boolean;
+  hasExtraDeliveries: boolean;
+  warningNotes: string | null;
+  routeDistance: number;
+  sceneries: string[];
+  timetablePath: TimetablePathElement[];
+  trainMaxSpeed: number;
 }
 
 export interface Station {
@@ -117,6 +124,7 @@ export interface StationGeneralInfo {
 export interface StationRoutes {
   single: StationRoutesInfo[];
   double: StationRoutesInfo[];
+  all: StationRoutesInfo[];
 
   singleElectrifiedNames: string[];
   singleOtherNames: string[];
@@ -137,6 +145,7 @@ export interface StationRoutesInfo {
   routeSpeed: number;
   routeTracks: number;
   hidden?: boolean;
+  realLineNo?: number;
 }
 
 export interface ActiveScenery {

src/views/DriverView.vue

@@ -2,20 +2,50 @@
   <section class="driver-view">
     <div class="view-wrapper">
       <div v-if="chosenTrain">
-        <div class="actions">
+        <div class="actions-container">
-          <router-link
+          <div class="actions actions-left">
-            :to="`/journal/timetables?search-driver=${chosenTrain.driverName}`"
+            <a class="a-button btn--image" @click="$router.back()">
-            class="a-button btn--image"
+              <img src="/images/icon-back.svg" alt="train icon" />
-          >
+              <span>
-            <span class="hidable">
+                {{ $t('trains.driver-return-link') }}
-              {{ $t('trains.driver-journal-link') }}
+              </span>
-            </span>
+            </a>
-            <img src="/images/icon-train.svg" alt="train icon" />
+          </div>
-          </router-link>
+
+          <div class="actions actions-right">
+            <a
+              class="a-button btn--image"
+              :href="`https://srjp-td2.web.app/?id=${chosenTrain.id}`"
+              target="_blank"
+            >
+              <span class="hidable">
+                {{ $t('trains.driver-srjp-link') }}
+              </span>
+
+              <img src="/images/icon-srjp.svg" alt="srjp icon" />
+            </a>
+
+            <router-link
+              :to="`/journal/timetables?search-driver=${chosenTrain.driverName}`"
+              class="a-button btn--image"
+            >
+              <span class="hidable">
+                {{ $t('trains.driver-journal-link') }}
+              </span>
+
+              <img src="/images/icon-train.svg" alt="train icon" />
+            </router-link>
+          </div>
         </div>
 
         <div class="train-card">
-          <TrainInfo :train="chosenTrain" :extended="true" ref="trainInfo" />
+          <TrainInfo :train="chosenTrain" :extended="true" />
+
+          <button class="btn btn--action" style="margin: 1em 0" @click="copyStockToClipboard()">
+            <i class="fa-regular fa-copy"></i> {{ $t('trains.stock-copy') }}
+          </button>
+
+          <StockList :trainStockList="chosenTrain.stockList" />
           <TrainSchedule :train="chosenTrain" />
         </div>
       </div>
@@ -24,7 +54,8 @@
 
       <div v-else class="driver-not-found">
         <h2>&olcross; {{ $t('trains.driver-not-found-header') }}</h2>
-        <p>
+
+        <p class="text--grayed">
           {{ $t('trains.driver-not-found-desc-1') }} <br />
           {{ $t('trains.driver-not-found-desc-2') }}
           <router-link to="/journal/timetables"
@@ -32,25 +63,46 @@
           >!
         </p>
 
-        <router-link to="/">&lt;&lt; {{ $t('trains.driver-not-found-return') }}</router-link>
+        <p v-if="props.trainId && otherDriverTrains.length > 0">
+          <i18n-t keypath="trains.driver-not-found-others">
+            <template v-slot:driver>
+              <b>{{ otherDriverTrains[0].driverName }}</b>
+            </template>
+          </i18n-t>
+        </p>
+
+        <div class="other-driver-trains">
+          <template v-for="(train, i) in otherDriverTrains">
+            <router-link :to="`/driver?trainId=${train.id}`">
+              {{ train.trainNo }}
+              | {{ regionsJSON.find((r) => r.id == train.region)?.name ?? 'PL1' }}
+            </router-link>
+          </template>
+        </div>
+
+        <div style="margin-top: 1em">
+          <router-link to="/">&lt;&lt; {{ $t('trains.driver-not-found-return') }}</router-link>
+        </div>
       </div>
     </div>
   </section>
 </template>
 
 <script setup lang="ts">
-import { computed, onActivated, onMounted, useAttrs } from 'vue';
+import { computed } from 'vue';
 import TrainInfo from '../components/TrainsView/TrainInfo.vue';
 import TrainSchedule from '../components/TrainsView/TrainSchedule.vue';
+import StockList from '../components/Global/StockList.vue';
 import Loading from '../components/Global/Loading.vue';
 import { useMainStore } from '../store/mainStore';
 import { useApiStore } from '../store/apiStore';
 import { Status } from '../typings/common';
+import { regions as regionsJSON } from '../data/options.json';
+import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
   trainId: {
-    type: String,
+    type: String
-    required: true
   },
 
   modalId: {
@@ -61,13 +113,37 @@ const props = defineProps({
 const mainStore = useMainStore();
 const apiStore = useApiStore();
 
+const i18n = useI18n();
+
 const chosenTrain = computed(() =>
   mainStore.trainList.find((train) => train.id == props.trainId || train.modalId == props.modalId)
 );
 
-onActivated(() => {
+const otherDriverTrains = computed(() => {
-  console.log();
+  return mainStore.trainList.filter(
+    (train) =>
+      train.driverId == Number(props.trainId?.split('|')[0]) &&
+      (train.timetableData || train.online || train.lastSeen >= Date.now() - 60000)
+  );
 });
+
+function copyStockToClipboard() {
+  const stockString = chosenTrain.value?.stockList.join(';');
+
+  if (!stockString) {
+    alert(i18n.t('trains.stock-clipboard-failure'));
+    return;
+  }
+
+  navigator.clipboard
+    .writeText(stockString)
+    .then(() => {
+      prompt(i18n.t('trains.stock-clipboard-success'), stockString);
+    })
+    .catch(() => {
+      alert(i18n.t('trains.stock-clipboard-failure'));
+    });
+}
 </script>
 
 <style lang="scss" scoped>
@@ -78,18 +154,23 @@ $viewBgCol: #1a1a1a;
 .driver-view {
   margin: 0 auto;
   padding: 1em 0;
-  max-width: 2000px;
+  max-width: var(--max-container-width);
-  min-height: 95vh;
+  min-height: calc(100vh - 7em);
+}
+
+.actions-container {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 0.5em;
 }
 
 .actions {
   display: flex;
-  align-items: flex-end;
-  justify-content: flex-end;
   gap: 0.5em;
 }
 
-.actions > a {
+.actions-container > .actions > a {
   background-color: $viewBgCol;
   padding: 0.5em;
   border-radius: 0.5em 0.5em 0 0;
@@ -100,6 +181,7 @@ $viewBgCol: #1a1a1a;
 }
 
 .train-card {
+  padding: 1em;
   background-color: $viewBgCol;
   border-radius: 0 0 0.5em 0.5em;
 }
@@ -108,10 +190,10 @@ $viewBgCol: #1a1a1a;
   background-color: $viewBgCol;
   text-align: center;
   padding: 1em;
+  border-radius: 0.5em 0.5em;
 
   p {
-    padding: 1em 0;
+    padding: 0.5em 0;
-    color: #aaa;
   }
 
   a {
@@ -120,8 +202,15 @@ $viewBgCol: #1a1a1a;
   }
 }
 
+.other-driver-trains {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.5em;
+}
+
 @include smallScreen {
-  .actions > a > span.hidable {
+  span.hidable {
     display: none;
   }
 }

src/views/JournalDispatchers.vue

@@ -7,8 +7,8 @@
         <JournalOptions
           @on-search-confirm="fetchHistoryData"
           @on-options-reset="resetOptions"
-          @on-refresh-data="fetchHistoryData(true)"
+          @on-refresh-data="fetchHistoryData"
-          :sorter-option-ids="['timestampFrom', 'duration']"
+          :sorter-option-ids="['timestampFrom', 'currentDuration']"
           :data-status="dataStatus"
           :current-options-active="currentOptionsActive"
           optionsType="dispatchers"
@@ -59,6 +59,30 @@ const statsButtons: Journal.StatsButton[] = [
   }
 ];
 
+interface DispatchersQueryParams {
+  dispatcherName?: string;
+  stationName?: string;
+  stationHash?: string;
+  timestampFrom?: number;
+  timestampTo?: number;
+  dateFrom?: string;
+  dateTo?: string;
+  countFrom?: number;
+  countLimit?: number;
+  sortBy?: Journal.DispatcherSorter['id'];
+}
+
+const defaultQueryParams: DispatchersQueryParams = {
+  countLimit: 30,
+  sortBy: 'timestampFrom',
+  countFrom: undefined,
+  dispatcherName: undefined,
+  stationHash: undefined,
+  stationName: undefined,
+  timestampFrom: undefined,
+  timestampTo: undefined
+};
+
 export default defineComponent({
   components: {
     JournalOptions,
@@ -83,9 +107,8 @@ export default defineComponent({
   data: () => ({
     statsButtons,
 
-    currentQuery: '',
-    currentQueryArray: [] as string[],
     dataRefreshedAt: null as Date | null,
+    currentQueryParams: {} as DispatchersQueryParams,
 
     scrollDataLoaded: true,
     scrollNoMoreData: false,
@@ -106,12 +129,10 @@ export default defineComponent({
     const searchersValues = reactive({
       'search-dispatcher': '',
       'search-station': '',
-      'search-date': ''
+      'search-date-from': '',
+      'search-date-to': ''
     } as Journal.DispatcherSearchType);
 
-    const countFromIndex = ref(0);
-    const countLimit = 15;
-
     provide('sorterActive', sorterActive);
     provide('journalFilterActive', journalFilterActive);
     provide('searchersValues', searchersValues);
@@ -126,19 +147,17 @@ export default defineComponent({
       sorterActive,
       searchersValues,
 
-      countFromIndex,
+      scrollElement
-      countLimit,
-
-      scrollElement,
-      maxCount: ref(15)
     };
   },
 
   watch: {
-    currentQueryArray(q: string[]) {
+    currentQueryParams(queryParams: DispatchersQueryParams) {
-      this.currentOptionsActive =
+      this.currentOptionsActive = Object.keys(queryParams).some(
-        q.length > 2 ||
+        (k) =>
-        q.some((qv) => qv.startsWith('sortBy=') && qv.split('=')[1] != 'timestampFrom');
+          queryParams[k as keyof DispatchersQueryParams] !=
+          defaultQueryParams[k as keyof DispatchersQueryParams]
+      );
     },
 
     'mainStore.dispatcherStatsData'(stats) {
@@ -173,7 +192,8 @@ export default defineComponent({
     handleRouteParams() {
       this.$router.push({
         query: {
-          'search-date': this.searchersValues['search-date'] || undefined,
+          'search-date-from': this.searchersValues['search-date-from'] || undefined,
+          'search-date-to': this.searchersValues['search-date-to'] || undefined,
           'search-station': this.searchersValues['search-station'] || undefined,
           'search-dispatcher': this.searchersValues['search-dispatcher'] || undefined
         }
@@ -219,7 +239,8 @@ export default defineComponent({
     },
 
     setOptions(options: { [key: string]: string }) {
-      this.searchersValues['search-date'] = options['search-date'] ?? '';
+      this.searchersValues['search-date-from'] = options['search-date-from'] ?? '';
+      this.searchersValues['search-date-to'] = options['search-date-to'] ?? '';
       this.searchersValues['search-station'] = options['search-station'] ?? '';
       this.searchersValues['search-dispatcher'] = options['search-dispatcher'] ?? '';
 
@@ -234,13 +255,10 @@ export default defineComponent({
 
     async addHistoryData() {
       this.scrollDataLoaded = false;
-
+      this.currentQueryParams['countFrom'] = this.historyList.length;
-      this.countFromIndex = this.historyList.length;
 
       const responseData: API.DispatcherHistory.Response = await (
-        await this.apiStore.client!.get(
+        await this.apiStore.client!.get(`api/getDispatchers`, { params: this.currentQueryParams })
-          `api/getDispatchers?${this.currentQuery}&countFrom=${this.countFromIndex}`
-        )
       ).data;
 
       if (!responseData) return;
@@ -254,43 +272,34 @@ export default defineComponent({
       this.scrollDataLoaded = true;
     },
 
-    async fetchHistoryData(reset = false) {
+    async fetchHistoryData() {      
-      const queries: string[] = [];
+      const queryParams: DispatchersQueryParams = {};
 
-      const dispatcher = this.searchersValues['search-dispatcher'].trim();
+      const dispatcherName = this.searchersValues['search-dispatcher'].trim() || undefined;
-      const station = this.searchersValues['search-station'].trim();
+      const stationName = this.searchersValues['search-station'].trim() || undefined;
-      const dateString = this.searchersValues['search-date'].trim();
+      const dateFromString = this.searchersValues['search-date-from'].trim() || undefined;
+      const dateToString = this.searchersValues['search-date-to'].trim() || undefined;
 
-      const timestampFrom = dateString
+      queryParams['dispatcherName'] = dispatcherName;
-        ? Date.parse(new Date(dateString).toISOString()) - 120 * 60 * 1000
+      queryParams['dateFrom'] = dateFromString;
-        : undefined;
+      queryParams['dateTo'] = dateToString ? `${dateToString}T23:00:00` : undefined;
-      const timestampTo = timestampFrom ? timestampFrom + 86400000 : undefined;
 
-      if (dispatcher) queries.push(`dispatcherName=${dispatcher}`);
+      queryParams['countLimit'] = 30;
-      
-      if (station.startsWith("#")) queries.push(`stationHash=${station.slice(1)}`);
-      else if (station.length > 0) queries.push(`stationName=${station}`);
 
-      if (timestampFrom && timestampTo)
+      if (stationName && stationName.startsWith('#'))
-        queries.push(`timestampFrom=${timestampFrom}`, `timestampTo=${timestampTo}`);
+        queryParams['stationHash'] = stationName.slice(1);
+      else queryParams['stationName'] = stationName;
 
-      // API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
+      queryParams['sortBy'] = this.sorterActive.id;
-      if (this.sorterActive.id == 'timestampFrom') queries.push('sortBy=timestampFrom');
-      else if (this.sorterActive.id == 'duration') queries.push('sortBy=currentDuration');
-      else queries.push('sortBy=timestampFrom');
 
-      queries.push('countLimit=30');
+      if (JSON.stringify(this.currentQueryParams) != JSON.stringify(queryParams))
+        this.dataStatus = Status.Data.Loading;
 
-      if (this.currentQuery != queries.join('&')) this.dataStatus = Status.Data.Loading;
+      this.currentQueryParams = queryParams;
-
-      this.currentQuery = queries.join('&');
-      this.currentQueryArray = queries;
 
       try {
-        if (reset) this.dataStatus = Status.Data.Loading;
-
         const responseData: API.DispatcherHistory.Response = await (
-          await this.apiStore.client!.get(`api/getDispatchers?${this.currentQuery}`)
+          await this.apiStore.client!.get(`api/getDispatchers`, { params: this.currentQueryParams })
         ).data;
 
         if (!responseData) {

src/views/JournalTimetables.vue

@@ -105,7 +105,13 @@ export const journalTimetableFilters: Journal.TimetableFilter[] = [
     default: false
   },
   {
-    id: Journal.TimetableFilterId.TWR_SKR,
+    id: Journal.TimetableFilterId.TN,
+    filterSection: Journal.FilterSection.SPECIAL,
+    isActive: false,
+    default: false
+  },
+  {
+    id: Journal.TimetableFilterId.PN,
     filterSection: Journal.FilterSection.SPECIAL,
     isActive: false,
     default: false
@@ -118,8 +124,6 @@ interface TimetablesQueryParams {
   timetableId?: string;
 
   authorName?: string;
-  // timestampFrom?: number;
-  // timestampTo?: number;
 
   dateFrom?: string;
   dateTo?: string;
@@ -136,6 +140,8 @@ interface TimetablesQueryParams {
 
   twr?: number;
   skr?: number;
+  pn?: number;
+  tn?: number;
 
   sortBy?: Journal.TimetableSorter['id'];
 }
@@ -209,7 +215,7 @@ export default defineComponent({
       'search-issuedFrom': '',
       'search-via': '',
       'search-terminatingAt': '',
-      'search-date': ''
+      'search-date-from': ''
     } as Journal.TimetableSearchType);
 
     const countFromIndex = ref(0);
@@ -306,14 +312,6 @@ export default defineComponent({
         this.searchersValues[v as Journal.TimetableSearchKey] = options[v] ?? '';
       });
 
-      // this.searchersValues['search-date'] = options['search-date'] ?? '';
-      // this.searchersValues['search-driver'] = options['search-driver'] ?? '';
-      // this.searchersValues['search-train'] = options['search-train'] ?? '';
-      // this.searchersValues['search-dispatcher'] = options['search-dispatcher'] ?? '';
-      // this.searchersValues['search-issuedFrom'] = options['search-issuedFrom'] ?? '';
-      // this.searchersValues['search-via'] = options['search-via'] ?? '';
-      // this.searchersValues['search-terminatingAt'] = options['search-terminatingAt'] ?? '';
-
       this.sorterActive.id =
         (options['sorter-active'] as Journal.TimetableSorterKey) ?? 'timetableId';
 
@@ -335,7 +333,7 @@ export default defineComponent({
 
       const responseData: API.TimetableHistory.Response = await (
         await this.apiStore.client!.get('api/getTimetables', {
-          params: { ...this.currentQueryParams }
+          params: this.currentQueryParams
         })
       ).data;
 
@@ -354,7 +352,7 @@ export default defineComponent({
       const driverName = this.searchersValues['search-driver'].trim() || undefined;
       const trainNo = this.searchersValues['search-train'].trim() || undefined;
       const authorName = this.searchersValues['search-dispatcher'].trim() || undefined;
-      const dateFrom = this.searchersValues['search-date'].trim() || undefined;
+      const dateFrom = this.searchersValues['search-date-from'].trim() || undefined;
       const issuedFrom = this.searchersValues['search-issuedFrom'].trim() || undefined;
       const via = this.searchersValues['search-via'].trim() || undefined;
       const terminatingAt = this.searchersValues['search-terminatingAt'].trim() || undefined;
@@ -399,21 +397,24 @@ export default defineComponent({
             case Journal.TimetableFilterId.ALL_SPECIALS:
               queryParams['twr'] = undefined;
               queryParams['skr'] = undefined;
+              queryParams['pn'] = undefined;
+              queryParams['tn'] = undefined;
               break;
 
             case Journal.TimetableFilterId.TWR:
               queryParams['twr'] = 1;
-              queryParams['skr'] = 0;
               break;
 
             case Journal.TimetableFilterId.SKR:
-              queryParams['twr'] = 0;
               queryParams['skr'] = 1;
               break;
 
-            case Journal.TimetableFilterId.TWR_SKR:
+            case Journal.TimetableFilterId.TN:
-              queryParams['twr'] = 1;
+              queryParams['tn'] = 1;
-              queryParams['skr'] = 1;
+              break;
+
+            case Journal.TimetableFilterId.PN:
+              queryParams['pn'] = 1;
               break;
 
             default:

src/views/SceneryView.vue

@@ -234,7 +234,7 @@ button.back-btn {
   padding: 1em 0.5em;
 
   height: calc(100vh - 0.5em);
-  min-height: 800px;
+  min-height: 500px;
   max-height: 2000px;
 }
 

src/views/StationsView.vue

@@ -101,7 +101,6 @@ export default defineComponent({
   gap: 0.5em;
 
   position: relative;
-
   margin-bottom: 0.5em;
 }
 
@@ -122,4 +121,8 @@ button.btn-donation {
     }
   }
 }
+
+.count {
+  padding: 0.5em;
+}
 </style>

src/views/TrainsView.vue

@@ -117,13 +117,12 @@ export default defineComponent({
 @import '../styles/responsive.scss';
 
 .trains-view {
-  min-height: 600px;
   position: relative;
 }
 
 .trains_wrapper {
   margin: 1rem auto;
-  max-width: 1500px;
+  max-width: var(--max-container-width);
 }
 
 .trains_topbar {
@@ -134,4 +133,10 @@ export default defineComponent({
   position: relative;
   margin-bottom: 0.5em;
 }
+
+@include smallScreen {
+  .trains_topbar {
+    justify-content: space-between;
+  }
+}
 </style>