Merge pull request #112 from Spythere/development

v1.28.2

.gitignore

@@ -33,6 +33,10 @@ node_modules
 
 # Env
 .env
+.env.*
 
 .fake
 .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==

package.json

@@ -1,10 +1,12 @@
 {
   "name": "stacjownik",
-  "version": "1.27.0",
+  "version": "1.28.2",
   "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/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/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

@@ -81,6 +81,7 @@ export default defineComponent({
 
   async mounted() {
     window.addEventListener('mousemove', (e: MouseEvent) => this.tooltipStore.handle(e));
+    window.addEventListener('mousedown', () => this.tooltipStore.hide());
   },
 
   methods: {

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://static.spythere.eu/thumbnails/v2/${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 {
+  position: relative;
   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/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

@@ -2,7 +2,7 @@
   <div>
     <div class="details-actions">
       <button class="btn--action" @click="toggleExtraInfo">
-        <b>{{ $t('journal.stock-info') }}</b>
+        <b>{{ $t('journal.entry-details') }}</b>
         <img :src="`/images/icon-arrow-${showExtraInfo ? 'asc' : 'desc'}.svg`" alt="Arrow icon" />
       </button>
 
@@ -16,23 +16,25 @@
       </router-link>
     </div>
 
-    <div class="details-body" v-if="timetable.stockString && timetable.stockMass && showExtraInfo">
+    <div class="details-body" v-if="showExtraInfo">
-      <hr />
+      <div class="g-separator"></div>
+
+      <EntryStops :timetable="timetable" />
+
+      <div class="g-separator"></div>
 
       <div class="stock-specs">
-        <span class="badge">
+        <span class="badge" v-if="timetable.authorName">
           <span>{{ $t('journal.dispatcher-name') }}</span>
           <span>{{ timetable.authorName }}</span>
         </span>
-      </div>
 
-      <div class="stock-specs">
+        <span class="badge" v-if="timetable.maxSpeed">
-        <span class="badge">
           <span>{{ $t('journal.stock-max-speed') }}</span>
           <span>{{ timetable.maxSpeed }}km/h</span>
         </span>
 
-        <span class="badge">
+        <span class="badge" v-if="timetable.stockLength">
           <span>{{ $t('journal.stock-length') }}</span>
           <span>
             {{
@@ -43,13 +45,13 @@
           </span>
         </span>
 
-        <span class="badge">
+        <span class="badge" v-if="timetable.stockMass">
           <span>{{ $t('journal.stock-mass') }}</span>
           <span>
             {{
               Math.floor(
                 (currentHistoryIndex == 0
-                  ? timetable.stockMass!
+                  ? timetable.stockMass
                   : stockHistory[currentHistoryIndex].stockMass || timetable.stockMass) / 1000
               )
             }}t
@@ -57,27 +59,65 @@
         </span>
       </div>
 
-      <!-- Historia zmian w składzie -->
+      <div class="stock-dangers" v-if="timetable.twr || timetable.skr">
-      <div class="stock-history" v-if="stockHistory.length > 1">
+        <div class="g-separator"></div>
-        <button
+
-          v-for="(sh, i) in stockHistory"
+        <b>{{ $t('journal.stock-dangers') }}:</b>
-          :key="i"
+
-          class="btn--action"
+        <ul>
-          :data-checked="i == currentHistoryIndex"
+          <li v-if="timetable.twr">
-          @click.stop="currentHistoryIndex = i"
+            <b class="text--primary">{{ $t('warnings.TWR') }} (TWR)</b>
-        >
+          </li>
-          {{ sh.updatedAt }}
+
-        </button>
+          <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>
 
-      <StockList
+      <!-- Historia zmian w składzie -->
-        :trainStockList="
+      <div v-if="timetable.stockString || stockHistory.length != 0">
-          (currentHistoryIndex == 0
+        <div class="g-separator"></div>
-            ? timetable.stockString
+        <b>{{ $t('journal.stock-preview') }}:</b>
-            : stockHistory[currentHistoryIndex].stockString
+
-          ).split(';')
+        <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>
+
+        <div v-if="timetable.stockString" style="margin-top: 1em">
+          <StockList
+            :trainStockList="
+              (currentHistoryIndex == 0
+                ? timetable.stockString
+                : stockHistory[currentHistoryIndex].stockString
+              ).split(';')
+            "
+          />
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -87,9 +127,10 @@ 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';
 
 export default defineComponent({
-  components: { StockList },
+  components: { StockList, EntryStops },
 
   emits: ['toggleExtraInfo'],
 
@@ -133,7 +174,7 @@ export default defineComponent({
         query: {
           trainId: `${this.timetable.driverId}|${this.timetable.trainNo}|eu`
         }
-      }
+      };
     }
   },
   methods: {
@@ -161,6 +202,7 @@ export default defineComponent({
 .details-actions {
   display: flex;
   gap: 0.5em;
+  margin-top: 1em;
 
   button img {
     height: 1.25em;
@@ -182,7 +224,6 @@ export default defineComponent({
   display: flex;
   flex-wrap: wrap;
   gap: 0.5em;
-  margin-top: 0.5em;
 
   .badge {
     margin: 0;
@@ -194,19 +235,26 @@ export default defineComponent({
   }
 }
 
-ul.stock-list {
+hr {
-  display: flex;
+  margin: 0.5em 0;
-  align-items: flex-end;
+}
-  overflow: auto;
 
-  padding-bottom: 0.5em;
+.stock-dangers ul {
+  list-style: disc;
+  padding-left: 1em;
+  padding-top: 0.5em;
+  white-space: pre-wrap;
+}
 
-  li > div {
+.dangers-notes {
-    margin: 1em 0;
+  margin-top: 0.5em;
+  white-space: pre-wrap;
 
-    text-align: center;
+  p {
-    color: #aaa;
+    margin-top: 0.25em;
-    font-size: 0.9em;
+    max-height: 200px;
+    max-width: 500px;
+    overflow: auto;
   }
 }
 

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' : ''"
@@ -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;

src/components/JournalView/JournalTimetables/EntryStops.vue

@@ -0,0 +1,299 @@
+<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;
+}
+
+.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/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

@@ -19,7 +19,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 +39,8 @@ export namespace Journal {
     ALL_SPECIALS = 'all-specials',
     TWR = 'twr',
     SKR = 'skr',
+    PN = 'pn',
+    TN = 'tn',
     TWR_SKR = 'twr-skr'
   }
 
@@ -66,4 +68,16 @@ 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/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

@@ -77,9 +77,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,7 +91,7 @@ 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;

src/components/TrainsView/StopLabel.vue

@@ -4,10 +4,10 @@
     :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>
+      <span class="stop-name" v-html="stop.nameHtml"></span>
     </router-link>
 
-    <span v-else class="name" v-html="stop.nameHtml"></span>
+    <span v-else class="stop-name" v-html="stop.nameHtml"></span>
 
     <span
       v-if="stop.position != 'begin'"
@@ -70,7 +70,7 @@
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
-import { TrainScheduleStop } from './TrainSchedule.vue';
+import { TrainScheduleStop } from './typings';
 
 export default defineComponent({
   mixins: [dateMixin],
@@ -107,7 +107,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,7 +134,7 @@ s {
       display: none;
     }
 
-    .name {
+    .stop-name {
       background: none;
       color: #aaa;
       padding: 0;

src/components/TrainsView/TrainInfo.vue

@@ -8,12 +8,31 @@
             #{{ train.timetableData.timetableId }}
           </span>
 
-          <span class="train-badge twr" v-if="train.timetableData?.TWR" :title="$t('general.TWR')">
+          <span
+            class="train-badge twr"
+            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"
+            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
@@ -24,7 +43,9 @@
           >
             {{ train.timetableData.category }}
           </b>
+
           <b class="train-number">{{ train.trainNo }}</b>
+
           <span>&bull;</span>
 
           <div class="train-driver">
@@ -129,6 +150,35 @@
       <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>
+
+        <div class="dangers-notes">
+          <h4>{{ $t('warnings.header-title') }}</h4>
+          <p>
+            <i>{{ train.timetableData?.warningNotes }}</i>
+          </p>
+        </div>
+      </div>
     </section>
 
     <section class="train-stats" v-if="!extended">
@@ -199,7 +249,7 @@ export default defineComponent({
         query: {
           'search-driver': this.train.driverName
         }
-      }
+      };
     }
   }
 });
@@ -226,6 +276,28 @@ export default defineComponent({
   line-height: 1.5em;
 }
 
+.train-dangers {
+  margin-top: 0.5em;
+}
+
+.dangers-badges {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+}
+
+.dangers-notes {
+  margin-top: 0.5em;
+  white-space: pre-wrap;
+
+  p {
+    margin-top: 0.25em;
+    max-height: 200px;
+    max-width: 500px;
+    overflow: auto;
+  }
+}
+
 .train-info {
   display: grid;
   grid-template-columns: 2fr 1fr;

src/components/TrainsView/TrainSchedule.vue

@@ -55,12 +55,28 @@
                   <span>{{ stop.departureLine }}</span>
                   <span v-if="stop.departureLineInfo">
                     | {{ stop.departureLineInfo.routeSpeed }}
-                    <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'
+                          : '/images/icon-we4a.png'
+                      "
                       width="10"
+                      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="10"
+                      data-tooltip-type="BaseTooltip"
+                      :data-tooltip-content="$t('trains.sbl-tooltip')"
                     />
                   </span>
                 </div>
@@ -71,7 +87,7 @@
                 >
                   <span>{{ scheduleStops[i + 1].sceneryName }}</span>
                   <span v-if="stop.departureLineInfo?.routeTracks == 1"> &UpDownArrow;</span>
-                  <span v-else> &UpArrowDownArrow;</span>
+                  <span v-else> &DownArrowUpArrow;</span>
                 </div>
 
                 <div class="scenery-route">
@@ -79,13 +95,29 @@
 
                   <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"
+                        scheduleStops[i + 1].arrivalLineInfo!.isElectric
-                      :title="$t('trains.we4a-tooltip')"
+                          ? '/images/icon-catenary.svg'
+                          : '/images/icon-we4a.png'
+                      "
+                      data-tooltip-type="BaseTooltip"
+                      :data-tooltip-content="
+                        $t(
+                          `trains.${!scheduleStops[i + 1].arrivalLineInfo!.isElectric ? 'no-' : ''}catenary-tooltip`
+                        )
+                      "
                       width="10"
                     />
+
+                    <img
+                      v-if="scheduleStops[i + 1].arrivalLineInfo!.isRouteSBL"
+                      src="/images/icon-sbl-transparent.svg"
+                      width="10"
+                      data-tooltip-type="BaseTooltip"
+                      :data-tooltip-content="$t('trains.sbl-tooltip')"
+                    />
                   </span>
                 </div>
               </span>
@@ -105,43 +137,7 @@ import StockList from '../Global/StockList.vue';
 import { useMainStore } from '../../store/mainStore';
 import { useApiStore } from '../../store/apiStore';
 import { StationRoutesInfo, Train } from '../../typings/common';
-
+import { TrainScheduleStop } 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 },
@@ -534,6 +530,7 @@ $blinkAnim: 0.5s ease-in-out alternate infinite blink;
 
   img {
     width: 1em;
+    cursor: help;
   }
 }
 

src/components/TrainsView/TrainTable.vue

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

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,40 @@ 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;
+  distance: number;
+
+  arrivalLine: string | null;
+  departureLine: string | null;
+
+  arrivalLineInfo?: StationRoutesInfo;
+  departureLineInfo?: StationRoutesInfo;
+
+  isExternal: boolean;
+
+  comments: string | null;
+}

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!",
@@ -83,7 +88,9 @@
 
     "ZN": "inspection / diagnostic type",
     "ZU": "other maintenance type",
-    "ZG": "emergency (deprecated category)",
+    "ZG": "emergency (deprecated)",
+
+    "AP": "voivodeship regio (deprecated)",
 
     "E": "electric loco",
     "J": "EMU",
@@ -186,15 +193,17 @@
     "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",
@@ -375,7 +384,10 @@
     "current-track": "on track",
 
     "vmax-tooltip": "Maximum train speed based on rolling stock vehicles - braked weight is not included",
-    "we4a-tooltip": "Non-electrified track",
+   
+    "catenary-tooltip": "Electrified route",
+    "no-catenary-tooltip": "Non-electrified route",
+    "sbl-tooltip": "Route with SBL\n(automatic block signalling)",
 
     "delayed": "Delayed: ",
     "preponed": "Ahead of schedule: ",
@@ -407,9 +419,10 @@
     "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-others": "Player {driver} is online as:",
     "driver-not-found-return": "GO BACK TO THE MAIN SITE"
   },
   "train-stats": {
@@ -439,6 +452,7 @@
     "no-further-data": "No further data for current parameters",
     "loading-further-data": "Loading...",
     
+
     "route-length": "Route length:",
     "station-count": "Stations:",
     "dispatcher-name": "Author",
@@ -455,11 +469,16 @@
     "minutes": "{value} min | {value} mins",
     "seconds": "{value} s",
 
-    "stock-info": "DETAILS",
+    "entry-details": "DETAILS",
+    "no-entry-details": "NO DETAILS AVAILABLE",
+
     "stock-length": "Length",
     "stock-mass": "Mass",
     "stock-max-speed": "Max. speed",
 
+    "stock-dangers": "ADDITIONAL NOTES",
+    "stock-preview": "STOCK PREVIEW",
+
     "load-data": "Load further data...",
 
     "last-seen-at": "Last seen at",

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 niebezpiecznie 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!",
@@ -82,6 +87,8 @@
     "ZU": "inny utrzymaniowy",
     "ZG": "ratunkowy (kat. wycofana)",
 
+    "AP": "wojewódzki osobowy (kat. wycofana)",
+
     "E": "elektrowóz",
     "J": "EZT",
     "S": "spalinowóz",
@@ -175,7 +182,7 @@
     "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",
@@ -188,8 +195,10 @@
 
     "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",
@@ -362,7 +371,10 @@
     "current-track": "na szlaku",
 
     "vmax-tooltip": "Maksymalna prędkość na podstawie pojazdów w składzie - nie bierze pod uwagę masy hamowania",
-    "we4a-tooltip": "Szlak niezelektryfikowany",
+
+    "catenary-tooltip": "Szlak zelektryfikowany",
+    "no-catenary-tooltip": "Szlak niezelektryfikowany",
+    "sbl-tooltip": "Szlak posiadający\nsamoczynną blokadę liniową",
 
     "delayed": "Opóźniony: ",
     "preponed": "Przed czasem: ",
@@ -393,9 +405,10 @@
     "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-others": "Gracz {driver} jest online jako:",
     "driver-not-found-return": "WRÓĆ NA STRONĘ GŁÓWNĄ"
   },
   "train-stats": {
@@ -440,11 +453,16 @@
     "timetable-abandoned": "PORZUCONY",
     "timetable-online-button": "RJ ONLINE",
 
-    "stock-info": "SZCZEGÓŁY",
+    "entry-details": "SZCZEGÓŁY",
+    "no-entry-details": "BRAK DOSTĘPNYCH SZCZEGÓŁÓW",
+
     "stock-length": "Długość",
     "stock-mass": "Masa",
     "stock-max-speed": "Prędkość maks.",
 
+    "stock-dangers": "DODATKOWE UWAGI",
+    "stock-preview": "PODGLĄD SKŁADU",
+
     "load-data": "Pobierz dalszą historię...",
 
     "last-seen-at": "Ostatnio widziany na: ",

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,26 @@ 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();
+
+        // Revalidation after staling
+        this.fetchStationsGeneralInfo().then(() => {
+          this.fetchStationsGeneralInfo();
+        });
+
+        this.nextDataCheckTime = t + 3600000;
+      }
+
+      // Active data fefresh
       if (t >= this.nextUpdateTime) {
         this.fetchActiveData();
         this.nextUpdateTime = t + 20000;
@@ -68,17 +78,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 +104,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 +116,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

@@ -87,14 +87,17 @@ 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,
+
                   timetablePath: timetable.path.split(';').map((pathElementString) => {
                     const [arrival, station, departure] = pathElementString.split(',');
 

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;
@@ -227,6 +229,10 @@ a.a-button {
     &:hover {
       background-color: #424242;
     }
+
+    &:disabled {
+      opacity: 0.75;
+    }
   }
 
   &.btn--option {
@@ -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[];
     }
   }
 
@@ -201,8 +201,10 @@ export namespace API {
 
       TWR: boolean;
       SKR: boolean;
+      hasDangerousCargo: boolean;
+      hasExtraDeliveries: boolean;
+      warningNotes: string | null;
       sceneries: string[];
-
       path: string;
     }
   }
@@ -246,8 +248,6 @@ export namespace API {
       authorName?: string;
       authorId?: number;
 
-      stopsString?: string;
-
       stockString?: string;
       stockHistory: string[];
 
@@ -255,17 +255,21 @@ 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;
     }
 
     export type Response = Data[];

src/typings/common.ts

@@ -72,19 +72,24 @@ 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[];
 }
 
 export interface Station {

src/views/DriverView.vue

@@ -3,6 +3,13 @@
     <div class="view-wrapper">
       <div v-if="chosenTrain">
         <div class="actions">
+          <a class="a-button btn--image" @click="$router.back()">
+            <img src="/images/icon-back.svg" alt="train icon" />
+            <span>
+              {{ $t('trains.driver-return-link') }}
+            </span>
+          </a>
+
           <router-link
             :to="`/journal/timetables?search-driver=${chosenTrain.driverName}`"
             class="a-button btn--image"
@@ -24,7 +31,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 +40,44 @@
           >!
         </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 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';
 
 const props = defineProps({
   trainId: {
-    type: String,
+    type: String
-    required: true
   },
 
   modalId: {
@@ -65,8 +92,12 @@ 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)
+  );
 });
 </script>
 
@@ -78,14 +109,14 @@ $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 {
   display: flex;
   align-items: flex-end;
-  justify-content: flex-end;
+  justify-content: space-between;
   gap: 0.5em;
 }
 
@@ -108,10 +139,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,6 +151,13 @@ $viewBgCol: #1a1a1a;
   }
 }
 
+.other-driver-trains {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.5em;
+}
+
 @include smallScreen {
   .actions > a > 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,28 @@ const statsButtons: Journal.StatsButton[] = [
   }
 ];
 
+interface DispatchersQueryParams {
+  dispatcherName?: string;
+  stationName?: string;
+  stationHash?: string;
+  timestampFrom?: number;
+  timestampTo?: number;
+  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 +105,8 @@ export default defineComponent({
   data: () => ({
     statsButtons,
 
-    currentQuery: '',
-    currentQueryArray: [] as string[],
     dataRefreshedAt: null as Date | null,
+    currentQueryParams: {} as DispatchersQueryParams,
 
     scrollDataLoaded: true,
     scrollNoMoreData: false,
@@ -109,9 +130,6 @@ export default defineComponent({
       'search-date': ''
     } as Journal.DispatcherSearchType);
 
-    const countFromIndex = ref(0);
-    const countLimit = 15;
-
     provide('sorterActive', sorterActive);
     provide('journalFilterActive', journalFilterActive);
     provide('searchersValues', searchersValues);
@@ -126,19 +144,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) {
@@ -234,13 +250,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 +267,38 @@ 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 dateString = this.searchersValues['search-date'].trim() || undefined;
 
       const timestampFrom = dateString
         ? Date.parse(new Date(dateString).toISOString()) - 120 * 60 * 1000
         : undefined;
+
       const timestampTo = timestampFrom ? timestampFrom + 86400000 : undefined;
 
-      if (dispatcher) queries.push(`dispatcherName=${dispatcher}`);
+      queryParams['dispatcherName'] = dispatcherName;
+      queryParams['timestampFrom'] = timestampFrom;
+      queryParams['timestampTo'] = timestampTo;
+      queryParams['countLimit'] = 30;
 
-      if (station.startsWith("#")) queries.push(`stationHash=${station.slice(1)}`);
+      if (stationName && stationName.startsWith('#'))
-      else if (station.length > 0) queries.push(`stationName=${station}`);
+        queryParams['stationHash'] = stationName.slice(1);
+      else queryParams['stationName'] = stationName;
 
-      if (timestampFrom && timestampTo)
+      queryParams['sortBy'] = this.sorterActive.id;
-        queries.push(`timestampFrom=${timestampFrom}`, `timestampTo=${timestampTo}`);
 
-      // API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
+      if (JSON.stringify(this.currentQueryParams) != JSON.stringify(queryParams))
-      if (this.sorterActive.id == 'timestampFrom') queries.push('sortBy=timestampFrom');
+        this.dataStatus = Status.Data.Loading;
-      else if (this.sorterActive.id == 'duration') queries.push('sortBy=currentDuration');
-      else queries.push('sortBy=timestampFrom');
 
-      queries.push('countLimit=30');
+      this.currentQueryParams = queryParams;
-
-      if (this.currentQuery != queries.join('&')) this.dataStatus = Status.Data.Loading;
-
-      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'];
 }
@@ -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;
 
@@ -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 {