Merge pull request #119 from Spythere/development

v1.28.7

.github/workflows/firebase-hosting-merge.yml

@@ -1,6 +1,3 @@
-# This file was auto-generated by the Firebase CLI
-# https://github.com/firebase/firebase-tools
-
 name: Deploy to Firebase Hosting on merge
 'on':
   push:
@@ -11,10 +8,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - run: npm ci && npm run build
+      - run: yarn && yarn build
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'
           firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_STACJOWNIK_TD2 }}'
           channelId: live
-          projectId: stacjownik-td2
+          projectId: stacjownik-td2

.github/workflows/firebase-hosting-pull-request.yml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - run: npm ci && npm run build
+      - run: yarn && yarn build
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'

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

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

.gitignore

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

api-mock/fetchEndpoints.js

@@ -0,0 +1,33 @@
+import { existsSync } from 'fs';
+import { mkdir, writeFile } from 'fs/promises';
+
+async function fetchJSONEndpointData(url, fileName) {
+  try {
+    const res = await fetch(url);
+    const data = await res.json();
+    await writeFile(`./endpoints/${fileName}`, JSON.stringify(data));
+
+    return true;
+  } catch (error) {
+    console.error(error);
+  }
+
+  return false;
+}
+
+async function main() {
+  if (!existsSync('endpoints')) await mkdir('endpoints');
+
+  Promise.all(
+    ['getActiveData', 'getDonators', 'getSceneries', 'getVehicles'].map((endpointName) =>
+      fetchJSONEndpointData(
+        `https://stacjownik.spythere.eu/api/${endpointName}`,
+        `${endpointName}.json`
+      )
+    )
+  ).then(() => {
+    console.log('Endpoints downloaded!');
+  });
+}
+
+main();

api-mock/index.js

@@ -0,0 +1,28 @@
+import express from 'express';
+import path from 'path';
+import { cwd } from 'process';
+import cors from 'cors';
+
+const app = express();
+
+app.use(cors());
+
+app.get('/api/getActiveData', (_, res) => {
+  res.sendFile(path.join(cwd(), 'endpoints', 'getActiveData.json'));
+});
+
+app.get('/api/getSceneries', (_, res) => {
+  res.sendFile(path.join(cwd(), 'endpoints', 'getSceneries.json'));
+});
+
+app.get('/api/getVehicles', (_, res) => {
+  res.sendFile(path.join(cwd(), 'endpoints', 'getVehicles.json'));
+});
+
+app.get('/api/getDonators', (_, res) => {
+  res.sendFile(path.join(cwd(), 'endpoints', 'getDonators.json'));
+});
+
+app.listen(3123, () => {
+  console.log('Mocking API server...');
+});

api-mock/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "api-mock",
+  "version": "1.0.0",
+  "description": "",
+  "type": "module",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node index.js",
+    "fetch": "node fetchEndpoints.js"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "cors": "^2.8.5",
+    "express": "^4.18.3"
+  }
+}

api-mock/yarn.lock

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

index.html

@@ -19,10 +19,14 @@
     <link rel="manifest" href="/site.webmanifest" />
     <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
     <meta name="msapplication-TileColor" content="#da532c" />
-    <meta name="theme-color" content="#222222" />
 
     <link rel="icon" href="favicon.ico" />
 
+    <link rel="stylesheet" href="fa/css/fontawesome.css" />
+    <link rel="stylesheet" href="fa/css/brands.css" />
+    <link rel="stylesheet" href="fa/css/regular.css" />
+    <link rel="stylesheet" href="fa/css/solid.css" />
+
     <!-- Static OpenGraph meta -->
     <meta name="description" content="Pomocnik maszynisty i dyżurnego symulatora Train Driver 2" />
     <meta property="og:url" content="https://stacjownik-td2.web.app/" />
@@ -50,11 +54,6 @@
       name="twitter:image"
       content="https://raw.githubusercontent.com/Spythere/api/main/thumbnails/stacjownik.jpg"
     />
-
-    <link
-      href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500;700&display=swap"
-      rel="stylesheet"
-    />
   </head>
 
   <body>

package.json

@@ -1,11 +1,15 @@
 {
   "name": "stacjownik",
-  "version": "1.18.5",
+  "version": "1.28.7",
   "private": true,
+  "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --mode staging",
+    "dev:mock": "vite --mode development & yarn --cwd ./api-mock start",
+    "dev:fetch": "yarn --cwd ./api-mock fetch",
     "build": "vue-tsc --noEmit && vite build",
-    "deploy": "yarn build && firebase deploy --only hosting",
+    "deploy:prod": "yarn build && firebase deploy --only hosting",
+    "deploy:dev": "yarn build && firebase hosting:channel:deploy dev --expires 7d",
     "preview": "yarn build && vite preview",
     "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
@@ -14,31 +18,25 @@
   "dependencies": {
     "core-js": "^3.32.2",
     "dotenv": "^16.3.1",
-    "firebase": "^10.4.0",
-    "howler": "^2.2.4",
     "pinia": "^2.1.6",
     "sass": "^1.67.0",
-    "socket.io-client": "^4.7.2",
+    "showdown": "^2.1.0",
     "vue": "^3.3.4",
     "vue-i18n": "^9.4.1",
-    "vue-router": "^4.2.4"
+    "vue-router": "^4.4.0"
   },
   "devDependencies": {
-    "@types/node": "^20.6.2",
+    "@types/node": "^20.14.12",
-    "@vite-pwa/assets-generator": "^0.0.10",
+    "@types/showdown": "^2.0.6",
-    "@vitejs/plugin-vue": "^4.3.4",
+    "@vite-pwa/assets-generator": "^0.2.4",
-    "axios": "^1.5.0",
+    "@vitejs/plugin-vue": "^5.1.0",
-    "prettier": "^3.0.3",
+    "@vue/tsconfig": "^0.5.1",
-    "typescript": "^5.2.2",
+    "axios": "^1.7.2",
-    "vite": "^4.4.9",
+    "prettier": "^3.3.3",
-    "vite-plugin-pwa": "^0.16.5",
+    "typescript": "^5.5.4",
-    "vue-tsc": "^1.8.11",
+    "vite": "^5.3.4",
-    "@vue/eslint-config-prettier": "^8.0.0",
+    "vite-plugin-pwa": "^0.20.0",
-    "@vue/eslint-config-typescript": "^12.0.0",
+    "vue-tsc": "^2.0.28"
-    "@vue/tsconfig": "^0.4.0",
-    "eslint": "^8.49.0",
-    "eslint-plugin-vue": "^9.17.0",
-    "@rushstack/eslint-patch": "^1.3.3"
   },
   "browserslist": [
     "> 1%",

public/fa/css/regular.css

@@ -0,0 +1,19 @@
+/*!
+ * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2024 Fonticons, Inc.
+ */
+:root, :host {
+  --fa-style-family-classic: 'Font Awesome 6 Free';
+  --fa-font-regular: normal 400 1em/1 'Font Awesome 6 Free'; }
+
+@font-face {
+  font-family: 'Font Awesome 6 Free';
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype"); }
+
+.far,
+.fa-regular {
+  font-weight: 400; }

public/fa/css/solid.css

@@ -0,0 +1,19 @@
+/*!
+ * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2024 Fonticons, Inc.
+ */
+:root, :host {
+  --fa-style-family-classic: 'Font Awesome 6 Free';
+  --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free'; }
+
+@font-face {
+  font-family: 'Font Awesome 6 Free';
+  font-style: normal;
+  font-weight: 900;
+  font-display: block;
+  src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }
+
+.fas,
+.fa-solid {
+  font-weight: 900; }

public/images/icon-ASDEK.svg

@@ -0,0 +1,4 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="60" height="60" fill="#898989"/>
+<path d="M10.5573 31.3793L9.43741 28.0694C9.35445 27.8592 9.26596 27.6131 9.17195 27.3311C9.07793 27.0435 8.98391 26.7338 8.8899 26.402C8.80694 26.7393 8.71845 27.0518 8.62444 27.3394C8.53042 27.6269 8.44193 27.8758 8.35898 28.086L7.24736 31.3793H10.5573ZM15.0121 36H12.8386C12.5953 36 12.3989 35.9447 12.2496 35.8341C12.1003 35.7179 11.9869 35.5714 11.9095 35.3944L11.1961 33.2873H6.6003L5.88688 35.3944C5.82604 35.5493 5.71544 35.6903 5.55505 35.8175C5.4002 35.9392 5.20664 36 4.97436 36H2.78431L7.46305 23.9133H10.3333L15.0121 36ZM22.643 26.3688C22.5601 26.5015 22.4716 26.6011 22.3775 26.6674C22.2891 26.7338 22.1729 26.767 22.0291 26.767C21.9019 26.767 21.7637 26.7283 21.6143 26.6508C21.4706 26.5679 21.3046 26.4766 21.1166 26.3771C20.9341 26.2775 20.724 26.189 20.4861 26.1116C20.2483 26.0287 19.9773 25.9872 19.6732 25.9872C19.1478 25.9872 18.7551 26.1006 18.4952 26.3273C18.2408 26.5485 18.1136 26.8499 18.1136 27.2315C18.1136 27.4749 18.191 27.6767 18.3459 27.8371C18.5007 27.9975 18.7026 28.1357 18.9515 28.2519C19.2059 28.368 19.4934 28.4759 19.8142 28.5754C20.1405 28.6694 20.4723 28.7773 20.8097 28.8989C21.147 29.0151 21.4761 29.1533 21.7969 29.3137C22.1231 29.4741 22.4107 29.6787 22.6596 29.9276C22.914 30.1765 23.1186 30.4806 23.2735 30.8401C23.4283 31.1941 23.5058 31.6227 23.5058 32.1259C23.5058 32.6845 23.409 33.2071 23.2154 33.6938C23.0218 34.1805 22.7398 34.6063 22.3693 34.9713C22.0042 35.3308 21.5508 35.6156 21.0088 35.8258C20.4723 36.0304 19.8612 36.1327 19.1754 36.1327C18.7994 36.1327 18.415 36.094 18.0223 36.0166C17.6352 35.9392 17.2591 35.8313 16.8941 35.6931C16.5291 35.5493 16.1862 35.3806 15.8655 35.187C15.5447 34.9935 15.2654 34.7778 15.0276 34.54L15.8572 33.2293C15.9235 33.1352 16.0093 33.0578 16.1143 32.997C16.225 32.9306 16.3439 32.8974 16.4711 32.8974C16.637 32.8974 16.8029 32.95 16.9688 33.0551C17.1402 33.1601 17.331 33.2763 17.5412 33.4035C17.7569 33.5307 18.003 33.6468 18.2795 33.7519C18.556 33.857 18.8823 33.9095 19.2584 33.9095C19.7672 33.9095 20.1626 33.7989 20.4447 33.5777C20.7267 33.3509 20.8677 32.9942 20.8677 32.5075C20.8677 32.2255 20.7903 31.996 20.6355 31.819C20.4806 31.642 20.276 31.4955 20.0216 31.3793C19.7727 31.2632 19.4879 31.1609 19.1671 31.0724C18.8464 30.9839 18.5173 30.8871 18.18 30.7821C17.8426 30.6714 17.5135 30.5387 17.1928 30.3839C16.872 30.2235 16.5844 30.0161 16.33 29.7617C16.0812 29.5018 15.8793 29.181 15.7245 28.7994C15.5696 28.4123 15.4922 27.9367 15.4922 27.3725C15.4922 26.9191 15.5834 26.4766 15.7659 26.0452C15.9484 25.6139 16.2167 25.2295 16.5706 24.8922C16.9246 24.5548 17.3587 24.2866 17.873 24.0875C18.3874 23.8829 18.9763 23.7805 19.64 23.7805C20.0105 23.7805 20.37 23.811 20.7184 23.8718C21.0724 23.9271 21.407 24.0128 21.7222 24.129C22.0374 24.2396 22.3305 24.3751 22.6015 24.5354C22.8781 24.6903 23.1242 24.8673 23.3398 25.0664L22.643 26.3688ZM36.1186 29.9525C36.1186 30.8263 35.9665 31.6337 35.6623 32.3748C35.3637 33.1104 34.9406 33.7491 34.3931 34.2911C33.8456 34.8276 33.1847 35.2479 32.4105 35.552C31.6417 35.8507 30.7873 36 29.8471 36H25.1518V23.9133H29.8471C30.7873 23.9133 31.6417 24.0654 32.4105 24.3695C33.1847 24.6737 33.8456 25.094 34.3931 25.6305C34.9406 26.1669 35.3637 26.8057 35.6623 27.5468C35.9665 28.2823 36.1186 29.0842 36.1186 29.9525ZM33.2483 29.9525C33.2483 29.3552 33.1709 28.816 33.016 28.3348C32.8612 27.8537 32.6372 27.4472 32.3441 27.1154C32.0565 26.778 31.7026 26.5209 31.2823 26.3439C30.8619 26.1614 30.3836 26.0701 29.8471 26.0701H27.9723V33.8431H29.8471C30.3836 33.8431 30.8619 33.7547 31.2823 33.5777C31.7026 33.3952 32.0565 33.138 32.3441 32.8062C32.6372 32.4688 32.8612 32.0596 33.016 31.5784C33.1709 31.0973 33.2483 30.5553 33.2483 29.9525ZM40.594 26.0701V28.8906H44.3934V30.9646H40.594V33.8431H45.5547V36H37.7735V23.9133H45.5547V26.0701H40.594ZM50.0882 28.8077H50.5361C50.9509 28.8077 51.2496 28.6777 51.4321 28.4178L54.153 24.4691C54.3134 24.2589 54.4849 24.1151 54.6674 24.0377C54.8554 23.9547 55.0877 23.9133 55.3642 23.9133H57.8031L54.2194 28.7994C53.965 29.1368 53.6912 29.3801 53.3981 29.5294C53.6083 29.6068 53.7991 29.7147 53.9705 29.8529C54.142 29.9912 54.3024 30.1709 54.4517 30.3922L58.1018 36H55.5965C55.4361 36 55.2978 35.9889 55.1817 35.9668C55.0711 35.9447 54.9743 35.9115 54.8913 35.8673C54.8084 35.823 54.7365 35.7705 54.6757 35.7097C54.6148 35.6433 54.5568 35.5686 54.5015 35.4857L51.7639 31.2798C51.6643 31.1249 51.5371 31.0171 51.3823 30.9563C51.233 30.8899 51.0284 30.8567 50.7684 30.8567H50.0882V36H47.2843V23.9133H50.0882V28.8077Z" fill="white"/>
+</svg>

public/images/icon-buycoffee.svg

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 159 38.8" style="enable-background:new 0 0 159 38.8;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#00A962;}
+	.st1{enable-background:new    ;}
+	.st2{fill:#FFFFFF;}
+	.st3{fill:#1E3A33;}
+	.st4{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+</style>
+<path class="st0" d="M139.6,38.7H19.4C8.7,38.7,0,30.1,0,19.3l0,0C0,8.6,8.7-0.1,19.4-0.1h120.2c10.7,0,19.4,8.7,19.4,19.4l0,0
+	C159,30.1,150.3,38.7,139.6,38.7z"/>
+<g class="st1">
+	<path class="st2" d="M48.9,23.7c0,0.5-0.4,0.9-0.9,0.9c-0.5,0-0.9-0.4-0.9-0.9v-9.9c0-0.6,0.4-1,1-1h3.7c2.5,0,3.6,1.9,3.6,3.7
+		s-1,3.7-3.6,3.7h-2.9V23.7z M48.9,14.5v4.1h2.8c1.3,0,1.9-1,1.9-2c0-1-0.5-2.1-1.8-2.1H48.9z"/>
+	<path class="st2" d="M56.3,20.5c0-2.5,1.9-4.1,4.1-4.1c2.3,0,4.2,1.6,4.2,4.1c0,2.5-1.9,4.2-4.2,4.2C58.2,24.7,56.3,23,56.3,20.5z
+		 M62.9,20.5c0-1.5-1.1-2.4-2.4-2.4c-1.3,0-2.4,1-2.4,2.4c0,1.5,1.1,2.5,2.4,2.5C61.8,23,62.9,22,62.9,20.5z"/>
+	<path class="st2" d="M66.6,21.9c0.4-0.2,0.7,0.1,0.9,0.3c0.3,0.6,0.9,1,1.7,1c0.8,0,1.4-0.4,1.4-1c0-0.5-0.5-0.7-1.1-0.9l-1.1-0.3
+		c-1.7-0.5-2.3-1.4-2.2-2.7c0.1-1.2,1.4-2.1,2.8-2.1c1.1,0,2,0.3,2.5,1.2c0.2,0.4,0.1,0.8-0.2,1c-0.3,0.2-0.6,0.2-1-0.1
+		c-0.4-0.4-1-0.5-1.4-0.5c-0.4,0-0.9,0.2-1.1,0.4c-0.1,0.2-0.2,0.4-0.1,0.7c0.1,0.3,0.6,0.5,1,0.6l1.2,0.3c1.7,0.4,2.1,1.5,2.1,2.3
+		c0,1.5-1.3,2.4-3.2,2.4c-1.2,0-2.5-0.6-2.9-1.8C66,22.5,66.2,22.1,66.6,21.9z"/>
+	<path class="st2" d="M74.6,18h-0.8c-0.4,0-0.7-0.3-0.7-0.7c0-0.4,0.3-0.7,0.7-0.7h0.8v-2.2c0-0.5,0.4-0.9,0.9-0.9
+		c0.5,0,0.9,0.4,0.9,0.9v2.2h1c0.4,0,0.7,0.3,0.7,0.7c0,0.4-0.3,0.7-0.7,0.7h-1v5.7c0,0.5-0.4,0.9-0.9,0.9c-0.5,0-0.9-0.4-0.9-0.9
+		V18z"/>
+	<path class="st2" d="M85.7,23.4c-0.5,0.9-1.7,1.3-2.7,1.3c-2.1,0-4-1.6-4-4.1c0-2.5,1.9-4.1,4-4.1c1,0,2.1,0.4,2.7,1.3v-0.3
+		c0-0.5,0.4-0.9,0.9-0.9c0.5,0,0.9,0.4,0.9,0.9v6.3c0,0.5-0.4,0.9-0.9,0.9c-0.5,0-0.9-0.4-0.9-0.9V23.4z M83.2,23
+		c1.3,0,2.4-0.9,2.4-2.5c0-1.6-1.3-2.4-2.4-2.4c-1.3,0-2.4,1-2.4,2.4C80.8,22,81.9,23,83.2,23z"/>
+	<path class="st2" d="M95.1,16.6c0.5,0,0.9,0.3,1,0.8l1.6,4.6l1.7-4.8c0.2-0.5,0.6-0.7,1.1-0.6c0.5,0.1,0.7,0.6,0.6,1.1l-2.4,6.3
+		c-0.2,0.5-0.5,0.7-0.9,0.7h-0.1c-0.4,0-0.7-0.2-0.9-0.7L95.1,19l-1.7,4.9c-0.2,0.5-0.5,0.7-0.9,0.7h-0.1c-0.4,0-0.7-0.2-0.9-0.7
+		l-2.4-6.3c-0.2-0.4,0.1-1,0.6-1.1c0.5-0.1,0.9,0.1,1.1,0.6l1.7,4.8l1.6-4.6C94.2,16.8,94.6,16.6,95.1,16.6L95.1,16.6z"/>
+	<path class="st2" d="M112.9,23.2c0.3,0.3,0.3,0.9,0,1.2c-0.4,0.3-0.9,0.3-1.2,0l-3.2-3.5v2.9c0,0.5-0.4,0.9-0.9,0.9
+		c-0.5,0-0.8-0.4-0.8-0.9V13.1c0-0.5,0.4-0.9,0.8-0.9c0.5,0,0.9,0.4,0.9,0.9v6.1l2.4-2.4c0.3-0.3,0.9-0.3,1.2,0
+		c0.3,0.4,0.3,0.9,0,1.2l-2,2.1L112.9,23.2z"/>
+	<path class="st2" d="M120.8,23.4c-0.5,0.9-1.7,1.3-2.7,1.3c-2.1,0-4-1.6-4-4.1c0-2.5,1.9-4.1,4-4.1c1,0,2.1,0.4,2.7,1.3v-0.3
+		c0-0.5,0.4-0.9,0.8-0.9c0.5,0,0.9,0.4,0.9,0.9v6.3c0,0.5-0.4,0.9-0.9,0.9c-0.5,0-0.8-0.4-0.8-0.9V23.4z M118.4,23
+		c1.3,0,2.4-0.9,2.4-2.5c0-1.6-1.3-2.4-2.4-2.4c-1.3,0-2.4,1-2.4,2.4C115.9,22,117,23,118.4,23z"/>
+	<path class="st2" d="M130.3,16.6c0.5,0,0.9,0.3,1,0.8l1.6,4.6l1.7-4.8c0.2-0.5,0.6-0.7,1.1-0.6c0.5,0.1,0.7,0.6,0.6,1.1l-2.4,6.3
+		c-0.2,0.5-0.5,0.7-0.9,0.7h-0.1c-0.4,0-0.7-0.2-0.9-0.7l-1.7-4.9l-1.7,4.9c-0.2,0.5-0.5,0.7-0.9,0.7h-0.1c-0.4,0-0.7-0.2-0.9-0.7
+		l-2.4-6.3c-0.2-0.4,0.1-1,0.6-1.1c0.5-0.1,0.9,0.1,1.1,0.6l1.7,4.8l1.6-4.6C129.3,16.8,129.7,16.6,130.3,16.6L130.3,16.6z"/>
+	<path class="st2" d="M143.6,26.1c0,0.2,0.2,0.5,0.6,0.5c0.1,0,0.4,0,0.5-0.4c0.1-0.4,0.3-0.5,0.7-0.5c0.4,0.1,0.6,0.4,0.5,0.8
+		c-0.2,0.8-0.9,1.4-1.7,1.4c-1.3,0-1.9-0.8-1.9-1.7c0-0.2,0.1-0.6,0.2-0.8l0.5-1c-0.5,0.2-1,0.3-1.6,0.3c-2.3,0-4.1-1.6-4.1-4.2
+		c0-2.5,1.8-4.1,4.1-4.1c2.2,0,3.9,1.5,4,4c0,0.5-0.4,0.8-0.8,0.8h-5.5c0.2,1.2,1.2,2,2.4,2c0.8,0,1.3-0.3,1.9-0.8
+		c0.3-0.2,0.8-0.4,1.1-0.1c0.3,0.3,0.2,0.7,0,1.1C143.5,25.9,143.6,26.1,143.6,26.1z M143.7,19.9c-0.2-1.2-1.1-2-2.3-2
+		c-1.2,0-2.2,0.7-2.3,2H143.7z"/>
+</g>
+<g>
+	<path class="st3" d="M21.6,26.7c-4.9,0-7.4-2.6-8.5-4.9c-1.2-2.4-1.4-5-1.4-6c0-2.2,1.8-3.8,4.3-3.8h7c0.7,0,1.3,0.6,1.3,1.3
+		c0,0.7-0.6,1.3-1.3,1.3h-7c-0.5,0-1,0.1-1.3,0.4c-0.3,0.2-0.4,0.4-0.4,0.8c0,1.9,0.5,8.3,7.3,8.3c5.8,0,7.3-4.6,7.9-8.1
+		c0-0.2,0-0.3,0.1-0.4c0.2-0.9,0.4-1.7,0.8-2.3C31,12.4,31.9,12,33,12c0.5,0,0.9,0.2,1.2,0.5c0.5,0.4,0.9,1.3,1.2,4.1
+		c0.1,1.4,0.1,2.6,0.1,2.7c0,0.7-0.6,1.3-1.3,1.3l0,0c-0.7,0-1.3-0.6-1.3-1.3c0,0,0-1.1-0.1-2.3c-0.1-1-0.2-1.7-0.3-2.1
+		c-0.1,0.3-0.2,0.9-0.3,1.1c0,0.1,0,0.2-0.1,0.4c-0.2,1.2-0.7,3.7-2.1,5.9c-0.8,1.3-1.9,2.3-3.2,3.1C25.4,26.3,23.6,26.7,21.6,26.7z
+		"/>
+	<ellipse class="st4" cx="26.7" cy="13.3" rx="1.3" ry="1.3"/>
+</g>
+</svg>

public/images/icon-catenary.svg

@@ -0,0 +1,3 @@
+<svg width="144" height="144" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M82.7143 61.3284L118.429 7L22 74.9104H68.4286L36.2857 137L122 61.3284H82.7143Z" fill="#FFF500"/>
+</svg>

public/images/icon-sbl-transparent.svg

@@ -0,0 +1,5 @@
+<svg width="144" height="144" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="9.20437" y="2.4661" width="36.5457" height="57.8287" rx="16.7449" transform="matrix(0.869001 -0.494811 0.505207 0.862998 50.006 87.4256)" stroke="white" stroke-width="13.3959"/>
+<rect x="9.20437" y="2.4661" width="36.5457" height="57.8287" rx="16.7449" transform="matrix(0.869001 -0.494811 0.505207 0.862998 14.9599 29.6039)" stroke="white" stroke-width="13.3959"/>
+<path d="M65.1133 58.145L79.8524 84.3103" stroke="white" stroke-width="10.0469" stroke-linecap="round" stroke-linejoin="bevel"/>
+</svg>

public/images/icon-warning.svg

@@ -1,4 +1,4 @@
 <svg width="160" height="150" viewBox="0 0 160 150" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.163 139L80 12.4204L149.837 139H80H10.163Z" stroke="white" stroke-width="12"/>
+<path d="M10.163 139L80 12.4204L149.837 139H80H10.163Z" stroke="salmon" stroke-width="15"/>
-<path d="M85.4488 50.3354V80.6619C85.4488 83.8784 85.2898 87.0418 84.9717 90.1522C84.6536 93.2273 84.2294 96.4968 83.6992 99.9606H74.8451C74.315 96.4968 73.8908 93.2273 73.5727 90.1522C73.2546 87.0418 73.0955 83.8784 73.0955 80.6619V50.3354H85.4488ZM71.0808 119.789C71.0808 118.694 71.2752 117.651 71.664 116.661C72.0882 115.672 72.6537 114.823 73.3606 114.117C74.1029 113.41 74.9689 112.844 75.9585 112.42C76.9482 111.996 78.0086 111.784 79.1396 111.784C80.2354 111.784 81.278 111.996 82.2677 112.42C83.2574 112.844 84.1057 113.41 84.8126 114.117C85.5195 114.823 86.085 115.672 86.5092 116.661C86.9333 117.651 87.1454 118.694 87.1454 119.789C87.1454 120.921 86.9333 121.981 86.5092 122.971C86.085 123.925 85.5195 124.756 84.8126 125.462C84.1057 126.169 83.2574 126.717 82.2677 127.106C81.278 127.53 80.2354 127.742 79.1396 127.742C78.0086 127.742 76.9482 127.53 75.9585 127.106C74.9689 126.717 74.1029 126.169 73.3606 125.462C72.6537 124.756 72.0882 123.925 71.664 122.971C71.2752 121.981 71.0808 120.921 71.0808 119.789Z" fill="#FFFBFB"/>
+<path d="M85.4488 50.3354V80.6619C85.4488 83.8784 85.2898 87.0418 84.9717 90.1522C84.6536 93.2273 84.2294 96.4968 83.6992 99.9606H74.8451C74.315 96.4968 73.8908 93.2273 73.5727 90.1522C73.2546 87.0418 73.0955 83.8784 73.0955 80.6619V50.3354H85.4488ZM71.0808 119.789C71.0808 118.694 71.2752 117.651 71.664 116.661C72.0882 115.672 72.6537 114.823 73.3606 114.117C74.1029 113.41 74.9689 112.844 75.9585 112.42C76.9482 111.996 78.0086 111.784 79.1396 111.784C80.2354 111.784 81.278 111.996 82.2677 112.42C83.2574 112.844 84.1057 113.41 84.8126 114.117C85.5195 114.823 86.085 115.672 86.5092 116.661C86.9333 117.651 87.1454 118.694 87.1454 119.789C87.1454 120.921 86.9333 121.981 86.5092 122.971C86.085 123.925 85.5195 124.756 84.8126 125.462C84.1057 126.169 83.2574 126.717 82.2677 127.106C81.278 127.53 80.2354 127.742 79.1396 127.742C78.0086 127.742 76.9482 127.53 75.9585 127.106C74.9689 126.717 74.1029 126.169 73.3606 125.462C72.6537 124.756 72.0882 123.925 71.664 122.971C71.2752 121.981 71.0808 120.921 71.0808 119.789Z" fill="white"/>
 </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.scss

@@ -1,71 +0,0 @@
-@import './styles/responsive.scss';
-@import './styles/variables.scss';
-@import './styles/global.scss';
-@import './styles/animations.scss';
-
-.route {
-  margin: 0 0.2em;
-
-  &-active,
-  &[data-active='true'] {
-    color: $accentCol;
-    font-weight: bold;
-  }
-}
-
-// APP
-#app {
-  color: white;
-  font-size: 1rem;
-  overflow-x: hidden;
-
-  @include smallScreen() {
-    font-size: calc(0.65rem + 0.8vw);
-  }
-
-  @include screenLandscape() {
-    font-size: calc(0.45rem + 0.8vw);
-  }
-}
-
-// CONTAINER
-.app_container {
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  grid-template-columns: 100%;
-
-  min-height: 100vh;
-}
-
-.app_main {
-  padding: 0 0.5em;
-}
-
-.warning {
-  background-color: firebrick;
-  text-align: center;
-  padding: 0.5em 0.4em;
-  max-width: 1100px;
-  margin: 0 auto;
-
-  border-radius: 0 0 1em 1em;
-}
-
-// FOOTER
-footer.app_footer {
-  max-width: 100%;
-  padding: 0.5em;
-
-  img {
-    width: 1.1em;
-    vertical-align: text-bottom;
-  }
-
-  z-index: 10;
-
-  background: #111;
-  color: white;
-
-  text-align: center;
-  vertical-align: middle;
-}

src/App.vue

@@ -1,126 +1,97 @@
 <template>
   <div class="app_container">
-    <transition name="modal-anim">
+    <UpdateCard
-      <keep-alive>
+      :is-update-card-open="isUpdateCardOpen"
-        <TrainModal v-if="store.chosenModalTrainId" />
+      @toggle-card="() => (isUpdateCardOpen = false)"
-      </keep-alive>
+    />
-    </transition>
 
+    <Tooltip />
+    
     <AppHeader :current-lang="currentLang" @change-lang="changeLang" />
 
     <main class="app_main">
       <router-view v-slot="{ Component }">
-        <keep-alive exclude="JournalView,SceneryView">
+        <keep-alive exclude="SceneryView">
           <component :is="Component" :key="$route.name" />
         </keep-alive>
       </router-view>
     </main>
 
-    <footer class="app_footer">
+    <AppFooter
-      &copy;
+      :version="VERSION"
-      <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
+      :is-on-production-host="isOnProductionHost"
-      {{ new Date().getUTCFullYear() }} |
+      :is-update-card-open="isUpdateCardOpen"
-      <a :href="releaseURL" target="_blank">v{{ VERSION }}{{ isOnProductionHost ? '' : 'dev' }}</a>
+      @open-update-card="() => (isUpdateCardOpen = true)"
-      <br />
+    />
-      <a href="https://discord.gg/x2mpNN3svk">
-        <img src="/images/icon-discord.png" alt="" />&nbsp;<b>{{ $t('footer.discord') }}</b>
-      </a>
-
-      <div style="display: none">&int; ukryta taktyczna całka do programowania w HTMLu</div>
-    </footer>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, watch } from 'vue';
+import { defineComponent } from 'vue';
+import axios from 'axios';
+
+import { version } from '../package.json';
+import { Status } from './typings/common';
+import { useMainStore } from './store/mainStore';
+import { useApiStore } from './store/apiStore';
+import { useTooltipStore } from './store/tooltipStore';
 
 import Clock from './components/App/Clock.vue';
-
-import packageInfo from '.././package.json';
-import { regions } from './data/options.json';
-
-import { useStore } from './store/mainStore';
 import StatusIndicator from './components/App/StatusIndicator.vue';
-import TrainModal from './components/Global/TrainModal.vue';
 import AppHeader from './components/App/AppHeader.vue';
-import axios from 'axios';
+import Tooltip from './components/Tooltip/Tooltip.vue';
+import UpdateCard from './components/App/UpdateCard.vue';
+
 import StorageManager from './managers/storageManager';
+import AppFooter from './components/App/AppFooter.vue';
+
+const STORAGE_VERSION_KEY = 'app_version';
 
 export default defineComponent({
   components: {
     Clock,
     StatusIndicator,
-    TrainModal,
+    AppHeader,
-    AppHeader
+    AppFooter,
+    UpdateCard,
+    Tooltip
   },
 
   data: () => ({
-    VERSION: packageInfo.version,
+    VERSION: version,
-    store: useStore(),
+    store: useMainStore(),
+    apiStore: useApiStore(),
+    tooltipStore: useTooltipStore(),
+
+    isUpdateCardOpen: false,
 
     currentLang: 'pl',
-    releaseURL: '',
     isOnProductionHost: location.hostname == 'stacjownik-td2.web.app'
   }),
 
   created() {
-    this.loadLang();
+    this.init();
-    this.store.connectToAPI();
-
-    this.store.isOffline = !window.navigator.onLine;
-
-    window.addEventListener('offline', () => {
-      this.store.isOffline = true;
-
-      this.store.activeData.activeSceneries = [];
-      this.store.activeData.trains = [];
-      this.store.activeData.connectedSocketCount = 0;
-
-      this.store.setStatuses();
-    });
-
-    window.addEventListener('online', () => {
-      this.store.isOffline = false;
-    });
   },
 
   async mounted() {
-    this.setReleaseURL();
+    window.addEventListener('mousemove', (e: MouseEvent) => this.tooltipStore.handle(e));
-
+    window.addEventListener('mousedown', () => this.tooltipStore.hide());
-    watch(
-      () => this.store.blockScroll,
-      (value) => {
-        if (value) document.body.classList.add('no-scroll');
-        else document.body.classList.remove('no-scroll');
-      }
-    );
-  },
-
-  watch: {
-    '$route.query.region': {
-      immediate: true,
-      handler(regionQuery: string) {
-        if (regionQuery) {
-          this.store.region.id =
-            regions.find(
-              (reg) =>
-                reg.id == regionQuery.toLocaleLowerCase() ||
-                reg.value.toLocaleLowerCase() == regionQuery.toLocaleLowerCase()
-            )?.id || 'eu';
-        }
-      }
-    }
   },
 
   methods: {
-    changeLang(lang: string) {
+    init() {
-      this.$i18n.locale = lang;
+      if (!this.isOnProductionHost) document.title = 'Stacjownik Dev';
-      this.currentLang = lang;
 
-      StorageManager.setStringValue('lang', lang);
+      this.loadLang();
+      this.setupOfflineHandling();
+      this.checkAppVersion();
+
+      this.apiStore.setupAPIData();
     },
 
-    async setReleaseURL() {
+    async checkAppVersion() {
+      const storageVersion = StorageManager.getStringValue(STORAGE_VERSION_KEY);
+
       try {
         const releaseData = await (
           await axios.get('https://api.github.com/repos/Spythere/stacjownik/releases/latest')
@@ -128,11 +99,50 @@ export default defineComponent({
 
         if (!releaseData) return;
 
-        this.releaseURL = releaseData.html_url;
+        this.store.appUpdate = {
+          version,
+          changelog: releaseData.body,
+          releaseURL: releaseData.html_url
+        };
+
+        this.isUpdateCardOpen =
+          (storageVersion != '' && storageVersion != version && this.isOnProductionHost) ||
+          import.meta.env.VITE_UPDATE_TEST === 'test';
       } catch (error) {
         console.error(`Wystąpił błąd podczas pobierania danych z API GitHuba: ${error}`);
-        return;
       }
+
+      StorageManager.setStringValue(STORAGE_VERSION_KEY, version);
+    },
+
+    setupOfflineHandling() {
+      this.store.isOffline = !window.navigator.onLine;
+
+      if (this.store.isOffline) this.handleOfflineMode();
+
+      window.addEventListener('offline', this.handleOfflineMode);
+      window.addEventListener('online', this.handleOnlineMode);
+    },
+
+    handleOfflineMode() {
+      this.store.isOffline = true;
+
+      this.apiStore.activeData = undefined;
+      this.apiStore.dataStatuses.connection = Status.Data.Offline;
+    },
+
+    handleOnlineMode() {
+      this.store.isOffline = false;
+      this.apiStore.dataStatuses.connection = Status.Data.Loading;
+
+      this.apiStore.connectToAPI();
+    },
+
+    changeLang(lang: string) {
+      this.$i18n.locale = lang;
+      this.currentLang = lang;
+
+      StorageManager.setStringValue('lang', lang);
     },
 
     loadLang() {
@@ -147,7 +157,7 @@ export default defineComponent({
 
       const naviLanguage = window.navigator.language.toString();
 
-      if (naviLanguage.includes('en')) {
+      if (naviLanguage.startsWith('en')) {
         this.changeLang('en');
         return;
       }
@@ -156,4 +166,81 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" src="./App.scss"></style>
+<style lang="scss">
+@import './styles/global';
+@import './styles/animations';
+
+.route {
+  margin: 0 0.2em;
+
+  &-active,
+  &[data-active='true'] {
+    color: $accentCol;
+    font-weight: bold;
+  }
+}
+
+// APP
+#app {
+  color: white;
+  font-size: 1rem;
+  overflow-x: hidden;
+
+  @include smallScreen() {
+    font-size: calc(0.65rem + 0.85vw);
+  }
+
+  @include screenLandscape() {
+    font-size: calc(0.45rem + 0.8vw);
+  }
+}
+
+// CONTAINER
+.app_container {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: 100%;
+
+  min-height: 100vh;
+  overflow: hidden;
+  position: relative;
+}
+
+.app_main {
+  padding: 0 0.5em;
+}
+
+.warning {
+  background-color: firebrick;
+  text-align: center;
+  padding: 0.5em 0.4em;
+  max-width: 1100px;
+  margin: 0 auto;
+
+  border-radius: 0 0 1em 1em;
+}
+
+// FOOTER
+.app_footer {
+  max-width: 100%;
+  padding: 0.5em;
+
+  button {
+    display: inline-block;
+    padding: 0.1em;
+  }
+
+  img {
+    width: 1.1em;
+    vertical-align: text-bottom;
+  }
+
+  z-index: 10;
+
+  background: #111;
+  color: white;
+
+  text-align: center;
+  vertical-align: middle;
+}
+</style>

src/components/App/AppFooter.vue

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

src/components/App/AppHeader.vue

@@ -18,7 +18,12 @@
 
         <span class="header_brand">
           <router-link to="/">
-            <img src="/images/stacjownik-header-logo.svg" alt="Stacjownik" />
+            <img
+              v-if="isChristmas"
+              src="/images/stacjownik-header-logo-christmas.svg"
+              alt="Stacjownik logo (christmas)"
+            />
+            <img v-else src="/images/stacjownik-header-logo.svg" alt="Stacjownik logo" />
           </router-link>
         </span>
 
@@ -29,11 +34,6 @@
             <img src="/images/icon-dispatcher.svg" alt="icon dispatcher" />
             <span class="text--primary">{{ onlineDispatchersCount }}</span>
 
-            <!-- <span class="g-tooltip">
-              <b class="text--primary">{{ factorU }}U</b>
-              <div class="content">Test</div>
-            </span> -->
-
             <span class="text--grayed"> / </span>
             <span class="text--primary">{{ onlineTrainsCount }}</span>
             <img src="/images/icon-train.svg" alt="icon train" />
@@ -68,13 +68,16 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { useStore } from '../../store/mainStore';
+import { useMainStore } from '../../store/mainStore';
 import StatusIndicator from './StatusIndicator.vue';
 import Clock from './Clock.vue';
 import RegionDropdown from '../Global/RegionDropdown.vue';
 
 export default defineComponent({
+  components: { StatusIndicator, Clock, RegionDropdown },
+
   emits: ['changeLang'],
+
   props: {
     currentLang: {
       type: String,
@@ -84,7 +87,7 @@ export default defineComponent({
 
   setup() {
     return {
-      store: useStore()
+      store: useMainStore()
     };
   },
 
@@ -100,18 +103,17 @@ export default defineComponent({
     },
 
     onlineDispatchersCount() {
-      return this.store.onlineSceneryList.filter(
+      return this.store.activeSceneryList.filter(
-        (scenery) => scenery.region == this.store.region.id
+        (scenery) => scenery.region == this.store.region.id && scenery.dispatcherId != -1
       ).length;
     },
 
-    factorU() {
+    isChristmas() {
-      return this.onlineDispatchersCount == 0
+      const date = new Date();
-        ? '-'
+
-        : (this.onlineTrainsCount / this.onlineDispatchersCount).toFixed(2);
+      return date.getUTCMonth() == 11 && date.getUTCDate() >= 20 && date.getUTCDate() <= 31;
     }
-  },
+  }
-  components: { StatusIndicator, Clock, RegionDropdown }
 });
 </script>
 <style lang="scss" scoped>

src/components/App/StatusIndicator.vue

@@ -36,11 +36,11 @@
             <circle id="Ellipse 18" cx="15" cy="17" r="7" fill="#393838" />
           </g>
 
-          <g v-if="greenLight" filter="url(#filter0_d_843_28)">
+          <g v-if="indicator.lights.greenLight" filter="url(#filter0_d_843_28)">
             <circle cx="15" cy="17" r="7" fill="#00FF0A" />
           </g>
 
-          <g v-if="greenBlinkLight" filter="url(#filter0_d_843_28)">
+          <g v-if="indicator.lights.greenBlinkLight" filter="url(#filter0_d_843_28)">
             <circle cx="15" cy="17" r="7" fill="#00FF0A" />
 
             <animate
@@ -52,14 +52,14 @@
             />
           </g>
 
-          <g v-if="redTopLight" filter="url(#filter1_d_843_28)">
+          <g v-if="indicator.lights.redTopLight" filter="url(#filter1_d_843_28)">
             <circle cx="15" cy="36" r="7" fill="#F40000" />
           </g>
 
-          <g v-if="orangeLight" filter="url(#filter2_d_843_28)">
+          <g v-if="indicator.lights.orangeLight" filter="url(#filter2_d_843_28)">
             <circle cx="15" cy="55" r="7" fill="#FFB800" />
           </g>
-          <g v-if="redBottomLight" filter="url(#filter3_d_843_28)">
+          <g v-if="indicator.lights.redBottomLight" filter="url(#filter3_d_843_28)">
             <circle cx="15" cy="74" r="7" fill="#F40000" />
 
             <animate
@@ -186,7 +186,11 @@
       </svg>
 
       <transition name="tooltip-anim">
-        <div v-html="$t(indicator.message)" class="indicator-tooltip" v-if="tooltipActive"></div>
+        <div
+          v-html="$t('data-status.' + indicator.message)"
+          class="indicator-tooltip"
+          v-if="tooltipActive"
+        ></div>
       </transition>
     </div>
   </div>
@@ -194,124 +198,112 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { StoreState } from '../../store/typings';
-import { useStore } from '../../store/mainStore';
 import { Status } from '../../typings/common';
+import { useApiStore } from '../../store/apiStore';
+import { APIDataStatus } from '../../typings/api';
+
+interface Indicator {
+  // status: Status.Data;
+  message: string;
+
+  lights: {
+    greenLight: boolean;
+    greenBlinkLight: boolean;
+    redTopLight: boolean;
+    orangeLight: boolean;
+    redBottomLight: boolean;
+  };
+}
 
 export default defineComponent({
   data() {
     return {
       tooltipActive: false,
-      indicator: {
+      apiStore: useApiStore()
-        offline: false,
-        status: Status.Data.Loading,
-        message: 'data-status.S3'
-      },
-
-      greenLight: false,
-      greenBlinkLight: false,
-      redTopLight: false,
-      orangeLight: false,
-      redBottomLight: false
     };
   },
 
-  mounted() {
-    this.setSignalStatus(Status.Data.Loading);
-  },
-
-  setup() {
-    const store = useStore();
-
-    return {
-      dataStatus: store.dataStatuses,
-      store
-    };
-  },
-
-  watch: {
-    dataStatus: {
-      deep: true,
-
-      handler(statuses: StoreState['dataStatuses']) {
-        const connectionStatus = statuses.connection;
-        const sceneryDataStatus = statuses.sceneries;
-        const trainsDataStatus = statuses.trains;
-        const dispatcherDataStatus = statuses.dispatchers;
-
-        if (this.store.isOffline) {
-          this.setSignalStatus(Status.Data.Initialized);
-          this.indicator.status = Status.Data.Initialized;
-          this.indicator.message = 'data-status.S1-offline';
-          return;
-        }
-
-        if (connectionStatus == Status.Data.Error) {
-          this.setSignalStatus(connectionStatus);
-          this.indicator.status = connectionStatus;
-          this.indicator.message = 'data-status.S1a-connection';
-          return;
-        }
-
-        if (sceneryDataStatus == Status.Data.Error) {
-          this.setSignalStatus(sceneryDataStatus);
-          this.indicator.status = sceneryDataStatus;
-          this.indicator.message = 'data-status.S1a-sceneries';
-          return;
-        }
-
-        if (trainsDataStatus == Status.Data.Warning) {
-          this.setSignalStatus(trainsDataStatus);
-          this.indicator.status = trainsDataStatus;
-          this.indicator.message = 'data-status.S5-trains';
-          return;
-        }
-
-        if (dispatcherDataStatus == Status.Data.Warning) {
-          this.setSignalStatus(dispatcherDataStatus);
-          this.indicator.status = dispatcherDataStatus;
-          this.indicator.message = 'data-status.S5-dispatchers';
-          return;
-        }
-
-        if (sceneryDataStatus == Status.Data.Loaded) {
-          this.setSignalStatus(Status.Data.Loaded);
-
-          this.indicator.status = Status.Data.Loaded;
-          this.indicator.message = 'data-status.S2';
-        }
-      }
-    }
-  },
-
   methods: {
-    setSignalStatus(status: Status.Data) {
+    setLights(message: string) {
-      this.greenLight = false;
+      let lights = {
-      this.greenBlinkLight = false;
+        greenBlinkLight: false,
-      this.redTopLight = false;
+        greenLight: false,
-      this.orangeLight = false;
+        orangeLight: false,
-      this.redBottomLight = false;
+        redBottomLight: false,
+        redTopLight: false
+      };
 
-      if (status == Status.Data.Initialized) {
+      switch (message) {
-        this.redTopLight = true;
+        case 'S3':
+          lights.greenBlinkLight = true;
+          break;
+
+        case 'S2':
+          lights.greenLight = true;
+          break;
+
+        case 'S1-offline':
+          lights.redTopLight = true;
+          break;
+
+        case 'S1a-connection':
+        case 'S1a-sceneries':
+          lights.redTopLight = true;
+          lights.redBottomLight = true;
+          break;
+
+        case 'S5-dispatchers':
+        case 'S5-trains':
+          lights.orangeLight = true;
+          break;
+        default:
+          break;
       }
 
-      if (status == Status.Data.Loaded) {
+      return lights;
-        this.greenLight = true;
+    }
+  },
+
+  computed: {
+    indicator(): Indicator {
+      const dataStatuses = this.apiStore.dataStatuses;
+      const swdrStatuses = this.apiStore.activeData?.apiStatuses;
+
+      let message = 'S3';
+
+      switch (dataStatuses.connection) {
+        case Status.Data.Loading:
+          message = 'S3';
+          break;
+        case Status.Data.Loaded:
+          message = 'S2';
+          break;
+        case Status.Data.Offline:
+          message = 'S1-offline';
+          break;
+        case Status.Data.Error:
+          message = 'S1a-connection';
+          break;
+        default:
+          break;
       }
 
-      if (status == Status.Data.Warning) {
+      if (swdrStatuses?.dispatchersAPI == APIDataStatus.WARNING) {
-        this.orangeLight = true;
+        message = 'S5-dispatchers';
       }
 
-      if (status == Status.Data.Error) {
+      if (swdrStatuses?.trainsAPI == APIDataStatus.WARNING) {
-        this.redTopLight = true;
+        message = 'S5-trains';
-        this.redBottomLight = true;
       }
 
-      if (status == Status.Data.Loading) {
+      if (swdrStatuses?.stationsAPI == APIDataStatus.WARNING) {
-        this.greenBlinkLight = true;
+        message = 'S1a-sceneries';
       }
+
+      return {
+        lights: this.setLights(message),
+        message
+      };
     }
   }
 });

src/components/App/UpdateCard.vue

@@ -0,0 +1,123 @@
+<template>
+  <Card :is-open="isUpdateCardOpen" @toggle-card="toggleCard(false)">
+    <div class="content">
+      <h1 style="margin-bottom: 0.5em">🚀 {{ $t('update.title') }}</h1>
+
+      <div class="features-body" v-if="htmlChangelog != ''" v-html="htmlChangelog"></div>
+      <div class="no-features" v-else>{{ $t('update.no-data') }}</div>
+
+      <button class="btn btn--action" ref="confirm-btn" @click="toggleCard(false)">
+        {{ $t('update.confirm') }}
+      </button>
+
+      <p class="bottom-info">
+        {{ $t('update.info-1') }}
+        <br />
+        <span v-html="$t('update.info-2')"></span>
+      </p>
+    </div>
+  </Card>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useMainStore } from '../../store/mainStore';
+import { version } from '../../../package.json';
+import { Converter } from 'showdown';
+
+import Card from '../Global/Card.vue';
+
+const converter = new Converter();
+
+export default defineComponent({
+  components: { Card },
+
+  props: {
+    isUpdateCardOpen: {
+      type: Boolean,
+      required: true
+    }
+  },
+
+  emits: ['toggleCard'],
+
+  data() {
+    return {
+      mainStore: useMainStore(),
+      version: version
+    };
+  },
+
+  watch: {
+    isUpdateCardOpen(val: boolean) {
+      this.$nextTick(() => {
+        if (val) (this.$refs['confirm-btn'] as HTMLElement).focus();
+      });
+    }
+  },
+
+  computed: {
+    htmlChangelog() {
+      if (this.mainStore.appUpdate == null) return '';
+
+      return converter.makeHtml(this.mainStore.appUpdate.changelog);
+    }
+  },
+
+  methods: {
+    toggleCard(value: boolean) {
+      this.$emit('toggleCard', value);
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/variables';
+
+::v-deep(h1) {
+  text-align: center;
+  color: $accentCol;
+}
+
+::v-deep(h2) {
+  padding: 0.25em 0;
+  border-bottom: 1px solid #aaa;
+}
+
+::v-deep(ul) {
+  list-style: initial;
+  padding: 1em;
+  line-height: 1.5em;
+}
+
+.content {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  gap: 0.5em;
+  padding: 1em;
+  min-height: 700px;
+  overflow: auto;
+  text-align: justify;
+  max-width: 700px;
+}
+
+.no-features {
+  text-align: center;
+}
+
+button {
+  margin: 0 auto;
+  padding: 0.5em 0.75em;
+  font-size: 1.1em;
+}
+
+p.bottom-info {
+  text-align: center;
+  color: #ccc;
+}
+
+a {
+  text-decoration: underline;
+}
+</style>

src/components/Global/AnimatedModal.vue

@@ -1,101 +0,0 @@
-<template>
-  <transition name="modal-anim" tag="div" class="modal">
-    <div class="body" v-if="isOpen">
-      <div class="background" @click="toggleModal(false)"></div>
-      <div class="wrapper" ref="wrapper" tabindex="0">
-        <slot></slot>
-      </div>
-      <div class="tab-exit" ref="exit" tabindex="0" @focus="toggleModal(false)"></div>
-    </div>
-  </transition>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { useStore } from '../../store/mainStore';
-
-export default defineComponent({
-  emits: ['toggleModal'],
-
-  props: {
-    isOpen: Boolean
-  },
-
-  data() {
-    return {
-      store: useStore()
-    };
-  },
-
-  watch: {
-    isOpen(v) {
-      this.$nextTick(() => {
-        if (v) (this.$refs['wrapper'] as HTMLElement).focus();
-        else (this.store.modalLastClickedTarget as HTMLElement)?.focus();
-      });
-    }
-  },
-
-  methods: {
-    toggleModal(value: boolean) {
-      this.$emit('toggleModal', value);
-    }
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-
-.body {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 200;
-
-  width: 100vw;
-  height: 100vh;
-}
-
-.background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-
-  cursor: pointer;
-
-  background-color: rgba(0, 0, 0, 0.55);
-}
-
-.wrapper {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
-  background-color: #1a1a1a;
-  box-shadow: 0 0 15px 10px #333333;
-
-  width: 95%;
-  max-width: 800px;
-  max-height: 95vh;
-
-  & > :slotted(div) {
-    max-height: 95vh;
-  }
-}
-
-@include smallScreen {
-  .wrapper {
-    top: 0;
-    transform: translate(-50%, 1em);
-    max-height: 90vh;
-
-    & > :slotted(div) {
-      max-height: 90vh;
-    }
-  }
-}
-</style>

src/components/Global/Card.vue

@@ -0,0 +1,93 @@
+<template>
+  <transition name="modal-anim" tag="div">
+    <div class="card" v-if="isOpen">
+      <div class="card-background" @click="toggleCard(false)"></div>
+      <div class="card-body" tabindex="0">
+        <slot></slot>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useMainStore } from '../../store/mainStore';
+
+export default defineComponent({
+  emits: ['toggleCard'],
+
+  props: {
+    isOpen: Boolean
+  },
+
+  data() {
+    return {
+      store: useMainStore()
+    };
+  },
+
+  watch: {
+    isOpen(v) {
+      this.$nextTick(() => {
+        if (v == false) (this.store.modalLastClickedTarget as HTMLElement)?.focus();
+      });
+    }
+  },
+
+  methods: {
+    toggleCard(value: boolean) {
+      this.$emit('toggleCard', value);
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/responsive.scss';
+
+.card {
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 100%;
+  z-index: 200;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.card-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+
+  cursor: pointer;
+
+  background-color: rgba(0, 0, 0, 0.55);
+}
+
+.card-body {
+  position: relative;
+
+  margin: 1em;
+
+  max-height: 95vh;
+  max-height: 95dvh;
+
+  background-color: #1a1a1a;
+  box-shadow: 0 0 15px 10px #0e0e0e;
+
+  overflow: auto;
+}
+
+@include smallScreen {
+  .card {
+    align-items: flex-start;
+  }
+}
+</style>

src/components/Global/Donation.vue

@@ -1,184 +0,0 @@
-<template>
-  <div class="donation-modal" @keydown.esc="toggleModal(false)">
-    <button
-      class="modal_button action btn--image"
-      ref="btn"
-      @click="toggleModal(true)"
-      @focus="toggleModal(false)"
-    >
-      <img src="/images/icon-dollar.svg" alt="dollar donation icon" />
-      <span>{{ $t('donations.button-title') }}</span>
-    </button>
-
-    <AnimatedModal :isOpen="isModalOpen" @toggleModal="toggleModal">
-      <div class="modal_content">
-        <div class="modal_main">
-          <h1 v-html="$t('donations.header')"></h1>
-          <br />
-          <p v-html="$t('donations.p1')"></p>
-          <br />
-          <i18n-t keypath="donations.p2" tag="p">
-            <template v-slot:b1>
-              <b>{{ $t('donations.p2-b1') }}</b>
-            </template>
-            <template v-slot:b2>
-              <b>{{ $t('donations.p2-b2') }}</b>
-            </template>
-            <template v-slot:b3>
-              <b>{{ $t('donations.p2-b3') }}</b>
-            </template>
-            <template v-slot:link>
-              <a href="https://discord.gg/x2mpNN3svk" target="_blank">
-                {{ $t('donations.p2-a1') }}
-              </a>
-            </template>
-          </i18n-t>
-          <br />
-          <p v-html="$t('donations.p3')"></p>
-          <br />
-          <i18n-t keypath="donations.p4" tag="p">
-            <template v-slot:img>
-              <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
-            </template>
-
-            <template v-slot:b1>
-              <b>{{ $t('donations.p4-b1') }}</b>
-            </template>
-
-            <template v-slot:b2>
-              <b>{{ $t('donations.p4-b2') }}</b>
-            </template>
-          </i18n-t>
-          <br />
-          <i
-            v-html="$t('donations.p5')"
-            style="display: flex; justify-content: flex-end; text-align: right"
-          >
-          </i>
-        </div>
-
-        <div class="modal_actions">
-          <button class="modal_button exit btn--image" @click="toggleModal(false)">
-            <img src="/images/icon-exit.svg" alt="dollar donation icon" />
-            {{ $t('donations.action-exit') }}
-          </button>
-
-          <form action="https://www.paypal.com/donate" method="post">
-            <input type="hidden" name="hosted_button_id" value="EDB3SKFAHXFTW" />
-
-            <button class="modal_button action btn--image" @click="toggleModal(false)">
-              <img src="/images/icon-dollar.svg" alt="dollar donation icon" />
-              {{ $t('donations.action-confirm') }}
-            </button>
-          </form>
-        </div>
-      </div>
-    </AnimatedModal>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import AnimatedModal from './AnimatedModal.vue';
-
-export default defineComponent({
-  props: {
-    isModalOpen: Boolean
-  },
-  emits: ['toggleModal'],
-
-  methods: {
-    toggleModal(value: boolean) {
-      this.$emit('toggleModal', value);
-    }
-  },
-  components: { AnimatedModal }
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-
-.modal_button {
-  &.action {
-    $btnColor: #254069;
-
-    background-color: $btnColor;
-
-    &:hover {
-      background-color: lighten($btnColor, 10%);
-    }
-  }
-
-  &.exit {
-    $btnColor: crimson;
-
-    background-color: $btnColor;
-
-    &:hover {
-      background-color: lighten($btnColor, 10%);
-    }
-  }
-
-  @include smallScreen {
-    span {
-      display: none;
-    }
-  }
-}
-
-.modal-logo {
-  position: absolute;
-  top: 0;
-  left: 50%;
-
-  width: 6em;
-
-  transform: translate(-50%, -50%);
-}
-
-.modal_content {
-  display: grid;
-  grid-template-rows: 1fr auto;
-  gap: 1em;
-
-  font-size: 1.1em;
-
-  & > div {
-    padding: 1em;
-  }
-
-  h1 {
-    font-size: 1.95em;
-    text-align: center;
-  }
-
-  p {
-    text-align: justify;
-  }
-
-  a {
-    text-decoration: underline;
-  }
-}
-
-.modal_main {
-  overflow: auto;
-
-  img {
-    max-height: 20px;
-    margin-right: 5px;
-    vertical-align: text-bottom;
-  }
-}
-
-.modal_actions {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(13em, 1fr));
-  gap: 0.5em;
-
-  form button {
-    width: 100%;
-  }
-}
-</style>

src/components/Global/DonationCard.vue

@@ -0,0 +1,256 @@
+<template>
+  <Card :isOpen="isCardOpen" @toggleCard="toggleCard" @keydown.esc="toggleCard(false)">
+    <div class="body">
+      <div class="content">
+        <h1 v-html="$t('donations.header')"></h1>
+        <div class="donators-slider" v-if="donatorList.length != 0">
+          <span v-html="$t('donations.donator-title', { count: donatorList.length })"></span>
+
+          <transition mode="out-in" name="slider-anim" class="current-name">
+            <span :key="displayingName">
+              <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
+              {{ displayingName }}
+            </span>
+          </transition>
+        </div>
+        <br />
+        <p v-html="$t('donations.p1')"></p>
+        <br />
+        <i18n-t keypath="donations.p2" tag="p">
+          <template v-slot:b1>
+            <b>{{ $t('donations.p2-b1') }}</b>
+          </template>
+          <template v-slot:b2>
+            <b>{{ $t('donations.p2-b2') }}</b>
+          </template>
+          <template v-slot:b3>
+            <b>{{ $t('donations.p2-b3') }}</b>
+          </template>
+          <template v-slot:link>
+            <a class="discord" href="https://discord.gg/x2mpNN3svk" target="_blank">
+              {{ $t('donations.p2-a1') }}
+            </a>
+          </template>
+        </i18n-t>
+        <br />
+        <p v-html="$t('donations.p3')"></p>
+        <br />
+        <i18n-t keypath="donations.p4" tag="p">
+          <template v-slot:img>
+            <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
+          </template>
+
+          <template v-slot:b1>
+            <b>{{ $t('donations.p4-b1') }}</b>
+          </template>
+
+          <template v-slot:b2>
+            <b>{{ $t('donations.p4-b2') }}</b>
+          </template>
+        </i18n-t>
+        <br />
+        <i
+          v-html="$t('donations.p5')"
+          style="display: flex; justify-content: flex-end; text-align: right"
+        >
+        </i>
+      </div>
+
+      <div class="actions">
+        <a
+          class="action a-button btn--image coffee"
+          href="https://buycoffee.to/spythere"
+          target="_blank"
+          ref="action"
+        >
+          <img src="/images/icon-coffee.png" width="20" alt="buycoffee.to donation" />
+          {{ $t('donations.action-buycoffee') }}
+        </a>
+
+        <a
+          class="action a-button btn--image paypal"
+          href="https://www.paypal.com/donate/?hosted_button_id=EDB3SKFAHXFTW"
+          target="_blank"
+        >
+          <img src="/images/icon-dollar.svg" alt="paypal donation" />
+          {{ $t('donations.action-paypal') }}
+        </a>
+
+        <button class="action btn--image exit" @click="toggleCard(false)">
+          <img src="/images/icon-exit.svg" alt="dollar donation icon" />
+          {{ $t('donations.action-exit') }}
+        </button>
+      </div>
+    </div>
+  </Card>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useApiStore } from '../../store/apiStore';
+import Card from './Card.vue';
+
+export default defineComponent({
+  components: { Card },
+  props: {
+    isCardOpen: Boolean
+  },
+
+  emits: ['toggleCard'],
+
+  watch: {
+    isCardOpen(val: boolean) {
+      this.running = val;
+      this.lastUpdate = Date.now();
+
+      this.$nextTick(() => {
+        if (val) (this.$refs['action'] as HTMLElement).focus();
+      });
+    }
+  },
+
+  created() {
+    this.runUpdate();
+  },
+
+  data() {
+    return {
+      apiStore: useApiStore(),
+      displayingIndex: 0,
+      lastUpdate: 0,
+      running: false
+    };
+  },
+
+  computed: {
+    displayingName() {
+      return this.donatorList[this.displayingIndex];
+    },
+
+    donatorList() {
+      return this.apiStore.donatorsData.slice().sort(() => Math.sign(Math.random() * -2 + 1));
+    }
+  },
+
+  methods: {
+    toggleCard(value: boolean) {
+      this.$emit('toggleCard', value);
+    },
+
+    runUpdate() {
+      if (Date.now() >= this.lastUpdate + 2000 && this.running) {
+        this.displayingIndex = (this.displayingIndex + 1) % this.donatorList.length;
+        this.lastUpdate = Date.now();
+      }
+
+      window.requestAnimationFrame(this.runUpdate);
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/responsive.scss';
+
+.body {
+  display: grid;
+  grid-template-rows: 1fr auto;
+  gap: 1em;
+
+  font-size: 1.1em;
+
+  max-width: 820px;
+}
+
+.content {
+  overflow: auto;
+  overflow-x: hidden;
+  padding: 1em;
+}
+
+img {
+  max-height: 20px;
+  margin-right: 5px;
+  vertical-align: text-bottom;
+}
+
+h1 {
+  font-size: 1.95em;
+  text-align: center;
+}
+
+p {
+  text-align: justify;
+}
+
+a.discord {
+  text-decoration: underline;
+}
+
+.actions {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 0.5em;
+  padding: 1em;
+
+  form button {
+    width: 100%;
+  }
+}
+
+.actions > .action {
+  &.paypal {
+    $btnColor: #254069;
+
+    background-color: $btnColor;
+
+    &:hover {
+      background-color: lighten($btnColor, 5%);
+    }
+  }
+
+  &.coffee {
+    $btnColor: #009255;
+    background-color: $btnColor;
+
+    &:hover {
+      background-color: lighten($btnColor, 5%);
+    }
+  }
+
+  &.exit {
+    $btnColor: #686868;
+    background-color: $btnColor;
+
+    &:hover {
+      background-color: lighten($btnColor, 5%);
+    }
+  }
+}
+
+.donators-slider {
+  text-align: center;
+  line-height: 30px;
+
+  .current-name {
+    backface-visibility: hidden;
+    display: block;
+    font-weight: bold;
+    word-wrap: break-word;
+    color: var(--clr-donator);
+  }
+}
+
+.slider-anim {
+  &-move,
+  &-enter-active,
+  &-leave-active {
+    transition: all 150ms ease-in-out;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+}
+</style>

src/components/Global/ProgressBar.vue

@@ -43,7 +43,6 @@ export default defineComponent({
 
   width: 6em;
   height: 1em;
-  margin: 0.5em 0;
 
   .bar-fg,
   .bar-bg {

src/components/Global/RegionDropdown.vue

@@ -30,7 +30,7 @@
 <script lang="ts">
 import { defineComponent, Ref, ref } from 'vue';
 import { regions as regionsJSON } from '../../data/options.json';
-import { useStore } from '../../store/mainStore';
+import { useMainStore } from '../../store/mainStore';
 
 interface Item {
   id: string;
@@ -41,7 +41,7 @@ interface Item {
 export default defineComponent({
   data() {
     return {
-      store: useStore(),
+      store: useMainStore(),
       selectedItemIndex: 0,
       listOpen: false
     };
@@ -60,6 +60,19 @@ export default defineComponent({
       handler(regionId) {
         this.selectedItemIndex = this.regionList.findIndex((reg) => reg.id == regionId);
       }
+    },
+    '$route.query.region': {
+      immediate: true,
+      handler(regionQuery: string) {
+        if (regionQuery) {
+          this.store.region =
+            regionsJSON.find(
+              (reg) =>
+                reg.id == regionQuery.toLocaleLowerCase() ||
+                reg.value.toLocaleLowerCase() == regionQuery.toLocaleLowerCase()
+            ) ?? regionsJSON[0];
+        }
+      }
     }
   },
 
@@ -70,8 +83,8 @@ export default defineComponent({
 
     regionList() {
       return regionsJSON.map((region) => {
-        const regionStationCount = this.store.onlineSceneryList.filter(
+        const regionStationCount = this.store.activeSceneryList.filter(
-          (scenery) => scenery.region == region.id
+          (scenery) => scenery.region == region.id && scenery.dispatcherId != -1
         ).length;
 
         const regionTrainCount =
@@ -126,15 +139,10 @@ button.selected-region {
   color: paleturquoise;
 
   font-weight: bold;
-  padding: 0.1em 0.5em;
 
   &:focus {
     background-color: #262626;
   }
-
-  span {
-    margin-right: 10px;
-  }
 }
 
 .content {
@@ -184,6 +192,8 @@ li.option {
   }
 
   label {
+    width: 100%;
+    padding: 0.5em 0;
     position: relative;
 
     display: inline-block;
@@ -194,10 +204,6 @@ li.option {
       background-color: #333333f2;
     }
 
-    padding: 0.5em 0;
-
-    width: 100%;
-
     cursor: pointer;
   }
 }

src/components/Global/StationStatusBadge.vue

@@ -61,6 +61,9 @@ export default defineComponent({
         case Status.ActiveDispatcher.UNKNOWN:
           return 'unknown';
 
+        case Status.ActiveDispatcher.FREE:
+          return 'free';
+
         default:
           if (this.dispatcherTimestamp != null && this.dispatcherStatus >= Date.now() + 25500000)
             return 'no-limit';
@@ -83,10 +86,11 @@ $online: #09a116;
 $unknown: #b93c3c;
 
 .status-badge {
-  border-radius: 1rem;
+  border-radius: 1em;
   font-weight: 500;
+  text-wrap: nowrap;
 
-  padding: 0.2em 0.55em;
+  padding: 0.2rem 0.55rem;
 
   background-color: $online;
 
@@ -103,13 +107,13 @@ $unknown: #b93c3c;
 
   &.no-limit {
     background-color: $no-limit;
-    font-size: 0.85em;
+    font-size: 0.9em;
   }
 
   &.not-signed,
   &.unavailable {
     background-color: $unav;
-    font-size: 0.85em;
+    font-size: 0.9em;
   }
 
   &.afk {
@@ -122,7 +126,7 @@ $unknown: #b93c3c;
     background-color: $no-space;
     border: 1px solid white;
     color: white;
-    font-size: 0.85em;
+    font-size: 0.9em;
   }
 
   &.unknown,

src/components/Global/StockList.vue

@@ -1,48 +1,13 @@
 <template>
-  <div class="stock-list">
+  <div class="list-wrapper">
-    <ul>
+    <ul class="stock-list">
-      <li v-for="(stockName, i) in trainStockList" :key="i">
+      <li v-for="({ images, imagesFallbacks, vehicleString }, i) in thumbnailNames">
-        <p>
+        <VehicleThumbnail
-          {{ stockName.split(':')[0].split('_').splice(0, 2).join(' ') }}
+          :key="i"
-          {{ stockName.split(':')[1] }}
+          :vehicle-string="vehicleString"
-        </p>
+          :images="images"
-
+          :image-fallbacks="imagesFallbacks"
-        <span>
+        />
-          <img
-            :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}${
-              /^EN/.test(stockName) ? 'rb' : ''
-            }.png`"
-            @error="onImageError($event, stockName)"
-            width="400"
-            height="60"
-          />
-
-          <img
-            v-if="/^(EN|2EN)/.test(stockName)"
-            :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}s.png`"
-            @error="
-              (event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-s.png')
-            "
-          />
-
-          <img
-            class="train-thumbnail"
-            v-if="/^EN71/.test(stockName)"
-            :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}s.png`"
-            @error="
-              (event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-s.png')
-            "
-          />
-
-          <img
-            class="train-thumbnail"
-            v-if="/^(EN|2EN)/.test(stockName)"
-            :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}ra.png`"
-            @error="
-              (event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-ra.png')
-            "
-          />
-        </span>
       </li>
     </ul>
   </div>
@@ -50,67 +15,152 @@
 
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
-import { useStore } from '../../store/mainStore';
+import { useApiStore } from '../../store/apiStore';
-import { API } from '../../typings/api';
+import VehicleThumbnail from './VehicleThumbnail.vue';
 
 export default defineComponent({
+  components: { VehicleThumbnail },
+
   props: {
     trainStockList: {
       type: Array as PropType<string[]>,
       required: true
+    },
+    tractionOnly: {
+      type: Boolean,
+      required: false
     }
   },
 
   data() {
     return {
-      store: useStore()
+      apiStore: useApiStore()
     };
   },
 
-  methods: {
+  computed: {
-    onImageError(event: Event, stockName: string) {
+    computedStockList() {
-      const fallbackName =
+      return this.tractionOnly ? this.trainStockList.slice(0, 1) : this.trainStockList;
-        Object.keys(this.store.rollingStockData!.info).find((type) => {
+    },
-          return this.store.rollingStockData!.info[type as keyof API.RollingStock.Info].find(
-            (v) => v[0] === stockName.split(':')[0]
-          );
-        }) || 'vehicle-unknown';
 
-      (event.target as HTMLImageElement).src = `/images/icon-${fallbackName}.png`;
+    thumbnailNames() {
+      return (this.tractionOnly ? this.trainStockList.slice(0, 1) : this.trainStockList)
+        .filter((v) => v.length != 0)
+        .map((vehicleString) => {
+          const [vehicleName] = vehicleString.split(':');
+
+          const vehicleThumbnailData = {
+            images: [] as string[],
+            imagesFallbacks: [] as string[],
+            vehicleName,
+            vehicleString
+          };
+
+          // Generowanie członów EN57
+          if (vehicleName.startsWith('EN57')) {
+            vehicleThumbnailData['images'] = [
+              vehicleName + 'ra',
+              vehicleName + 's',
+              vehicleName + 'rb'
+            ];
+            vehicleThumbnailData['imagesFallbacks'] = [
+              'unknown_ezt-ra',
+              'unknown_ezt-s',
+              'unknown_ezt-rb'
+            ];
+          }
+          // Generowanie członów EN71
+          else if (vehicleName.startsWith('EN71')) {
+            vehicleThumbnailData['images'] = [
+              vehicleName + 'ra',
+              vehicleName + 'sa',
+              vehicleName + 'sb',
+              vehicleName + 'rb'
+            ];
+            vehicleThumbnailData['imagesFallbacks'] = [
+              'unknown_ezt-ra',
+              'unknown_ezt-sa',
+              'unknown_ezt-sb',
+              'unknown_ezt-rb'
+            ];
+          }
+          // Generowanie pojazdów i członów 2EN57
+          else if (vehicleString.startsWith('2EN57')) {
+            const [firstVehicleNumber, secondVehicleNumber] = vehicleString
+              .replace('2EN57-', '')
+              .split('+');
+
+            vehicleThumbnailData['images'] = [
+              `EN57-${firstVehicleNumber}ra`,
+              `EN57-${firstVehicleNumber}s`,
+              `EN57-${firstVehicleNumber}rb`,
+              `EN57-${secondVehicleNumber}ra`,
+              `EN57-${secondVehicleNumber}s`,
+              `EN57-${secondVehicleNumber}rb`
+            ];
+
+            vehicleThumbnailData['imagesFallbacks'] = [
+              'unknown_ezt-ra',
+              'unknown_ezt-s',
+              'unknown_ezt-rb',
+              'unknown_ezt-ra',
+              'unknown_ezt-s',
+              'unknown_ezt-rb'
+            ];
+          }
+          // Generowanie członów Gor77
+          else if (vehicleString.startsWith('Gor77')) {
+            vehicleThumbnailData['images'] = [
+              vehicleName + '-A',
+              vehicleName + '-B',
+              vehicleName + '-C',
+              vehicleName + '-D'
+            ];
+            vehicleThumbnailData['imagesFallbacks'] = [
+              'unknown_Gor77-A',
+              'unknown_Gor77-B',
+              'unknown_Gor77-C',
+              'unknown_Gor77-D'
+            ];
+          }
+          // Generowanie członów ET41
+          else if (vehicleString.startsWith('ET41')) {
+            vehicleThumbnailData['images'] = [vehicleName + '-A', vehicleName + '-B'];
+            vehicleThumbnailData['imagesFallbacks'] = ['unknown_ET41-A', 'unknown_ET41-B'];
+          }
+          // Generowanie pozostałych pojazdów
+          else {
+            let fallbackVehicleImage = 'unknown_cargo';
+
+            if (/^(EP|EU|ET|201E)/.test(vehicleName)) fallbackVehicleImage = 'unknown_train';
+            else if (/^(SM42)/.test(vehicleName)) fallbackVehicleImage = 'unknown_SM42';
+            else if (/(\d{3}a|(Bau|Gor)\d{2}|304C)_/.test(vehicleName))
+              fallbackVehicleImage = 'unknown_passenger';
+
+            vehicleThumbnailData['images'] = [vehicleName];
+            vehicleThumbnailData['imagesFallbacks'] = [fallbackVehicleImage];
+          }
+
+          if (this.tractionOnly) vehicleThumbnailData['images'].length = 1;
+
+          return vehicleThumbnailData;
+        });
     }
   }
 });
 </script>
 
 <style lang="scss" scoped>
-.stock-list {
+
+.list-wrapper {
   display: flex;
   justify-content: center;
 }
 
-.stock-list ul {
+.stock-list {
   display: flex;
   align-items: flex-end;
   overflow: auto;
   margin: 0 auto;
-  padding: 1em 0;
-}
-
-ul > li > span {
-  display: flex;
-  align-items: flex-end;
-}
-
-img {
-  max-height: 60px;
-  width: auto;
-  height: auto;
-}
-
-p {
-  text-align: center;
-  color: #aaa;
-  font-size: 0.9em;
-  margin-bottom: 1em;
 }
 </style>

src/components/Global/StopDate.vue

@@ -1,123 +0,0 @@
-<template>
-  <span class="stop-date">
-    <span
-      class="date arrival"
-      v-if="!stop.beginsHere"
-      :class="{
-        delayed: stop.arrivalDelay > 0 && (stop.confirmed || stop.stopped),
-        preponed: stop.arrivalDelay < 0 && (stop.confirmed || stop.stopped),
-        'on-time': stop.arrivalDelay == 0 && stop.confirmed
-      }"
-    >
-      <span v-if="stop.arrivalDelay != 0 && (stop.confirmed || stop.stopped)">
-        <s>{{ timestampToString(stop.arrivalTimestamp) }}</s>
-        {{ timestampToString(stop.arrivalRealTimestamp) }}
-        ({{ stop.arrivalDelay > 0 ? '+' : '' }}{{ stop.arrivalDelay }})
-      </span>
-
-      <span v-else>
-        {{ timestampToString(stop.arrivalTimestamp) }}
-      </span>
-    </span>
-
-    <span
-      class="date stop"
-      v-if="stop.stopTime || stop.stopped"
-      :class="stop.stopType.replace(', ', '-')"
-    >
-      {{ stop.stopTime }} {{ stop.stopType == '' ? 'pt' : stop.stopType }}
-    </span>
-
-    <span
-      class="date departure"
-      v-if="!stop.terminatesHere && (stop.stopTime != 0 || stop.stopped)"
-      :class="{
-        delayed: stop.departureDelay > 0 && stop.confirmed,
-        preponed: stop.departureDelay < 0 && stop.confirmed
-      }"
-    >
-      <span v-if="stop.departureDelay != 0 && stop.confirmed">
-        <s>{{ timestampToString(stop.departureTimestamp) }}</s>
-        {{ timestampToString(stop.departureRealTimestamp) }}
-
-        ({{ stop.departureDelay > 0 ? '+' : '' }}{{ stop.departureDelay }})
-      </span>
-
-      <span v-else>
-        {{ timestampToString(stop.departureTimestamp) }}
-      </span>
-    </span>
-  </span>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent } from 'vue';
-import dateMixin from '../../mixins/dateMixin';
-import { TrainStop } from '../../store/typings';
-
-export default defineComponent({
-  mixins: [dateMixin],
-
-  props: {
-    stop: {
-      type: Object as PropType<TrainStop>,
-      required: true
-    }
-  },
-
-  setup() {
-    return {};
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-$preponedClr: lime;
-$delayedClr: salmon;
-$dateClr: #525151;
-$stopExchangeClr: #db8e29;
-$stopDefaultClr: #252525;
-
-.stop-date {
-  display: flex;
-  align-items: center;
-
-  .date {
-    background: $dateClr;
-    padding: 0.3em 0.5em;
-  }
-
-  .stop {
-    &.ph,
-    &.ph-pm,
-    &.pm {
-      background: $stopExchangeClr;
-    }
-
-    background: $stopDefaultClr;
-  }
-
-  .arrival,
-  .departure {
-    &.delayed {
-      s {
-        color: #999;
-      }
-
-      span {
-        color: $delayedClr;
-      }
-    }
-
-    &.preponed {
-      s {
-        color: #999;
-      }
-
-      span {
-        color: $preponedClr;
-      }
-    }
-  }
-}
-</style>

src/components/Global/TrainModal.vue

@@ -1,132 +0,0 @@
-<template>
-  <div class="train-modal" v-if="chosenTrain" @keydown.esc="closeModal">
-    <div class="modal_background" @click="closeModal"></div>
-    <div class="modal_content" ref="content" tabindex="0">
-      <button class="btn exit" @click="closeModal">
-        <img src="/images/icon-exit.svg" alt="close card" />
-      </button>
-
-      <TrainInfo :train="chosenTrain" :extended="false" ref="trainInfo" />
-      <TrainSchedule :train="chosenTrain" tabindex="0" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import modalTrainMixin from '../../mixins/modalTrainMixin';
-import trainInfoMixin from '../../mixins/trainInfoMixin';
-import TrainInfo from '../TrainsView/TrainInfo.vue';
-import TrainSchedule from '../TrainsView/TrainSchedule.vue';
-
-export default defineComponent({
-  components: { TrainInfo, TrainSchedule },
-  mixins: [trainInfoMixin, modalTrainMixin],
-
-  data() {
-    return {
-      isTopBarVisible: false
-    };
-  },
-
-  activated() {
-    const contentEl = this.$refs['content'] as HTMLElement;
-
-    this.$nextTick(() => {
-      contentEl.focus();
-    });
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-@import '../../styles/card.scss';
-
-.top-info-bar-anim {
-  &-enter-active,
-  &-leave-active {
-    transition: all 150ms ease-in-out;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    transform: translate(-50%, -50%) scale(0.8);
-    opacity: 0;
-  }
-}
-
-.exit {
-  position: absolute;
-  top: 0;
-  right: 0;
-
-  margin: 0.5em 1em;
-
-  padding: 0.25em;
-
-  z-index: 201;
-
-  img {
-    width: 1.5rem;
-    vertical-align: middle;
-  }
-}
-
-.train-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-
-  width: 100%;
-
-  color: white;
-  z-index: 200;
-
-  display: flex;
-  justify-content: center;
-
-  text-align: left;
-}
-
-.modal_background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-
-  cursor: pointer;
-
-  background-color: rgba(0, 0, 0, 0.55);
-}
-
-.modal_content {
-  position: relative;
-  overflow-y: scroll;
-
-  margin-top: 1em;
-
-  width: 95vw;
-  max-height: 96vh;
-
-  background-color: #1a1a1a;
-  box-shadow: 0 0 15px 10px #0e0e0e;
-}
-
-@include midScreen {
-  .exit {
-    margin: 0.5em;
-
-    img {
-      width: 1.75rem;
-    }
-  }
-}
-
-@include smallScreen {
-  .modal_content {
-    max-height: 85vh;
-  }
-}
-</style>

src/components/Global/TrainThumbnail.vue

@@ -1,85 +0,0 @@
-<template>
-  <img class="train-thumbnail" :src="placeholderUrl" v-if="isNotFound" />
-
-  <img
-    class="train-thumbnail"
-    v-else
-    :src="`https://rj.td2.info.pl/dist/img/thumbnails/${name.split(':')[0]}${
-      stockType == 'loco-ezt' ? 'rb' : ''
-    }.png`"
-    @error="onImageError"
-    @load="onImageLoad"
-    width="220"
-    height="60"
-  />
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { useStore } from '../../store/mainStore';
-import { API } from '../../typings/api';
-
-export default defineComponent({
-  props: {
-    name: {
-      type: String,
-      required: true
-    },
-
-    onlyFirstSegment: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  data() {
-    return {
-      store: useStore(),
-      isNotFound: false,
-      isLoaded: false
-    };
-  },
-
-  computed: {
-    url() {
-      return `https://rj.td2.info.pl/dist/img/thumbnails/${this.name.split(':')[0]}.png`;
-    },
-
-    placeholderUrl() {
-      return `/images/icon-${this.stockType}.png`;
-    },
-
-    stockType() {
-      if (!this.store.rollingStockData) return 'vehicle-unknown';
-
-      return (
-        Object.keys(this.store.rollingStockData.info).find((type) => {
-          return this.store.rollingStockData?.info[type as keyof API.RollingStock.Info].find(
-            (v) => v[0] === this.name.split(':')[0]
-          );
-        }) || 'vehicle-unknown'
-      );
-    }
-  },
-
-  methods: {
-    onImageError() {
-      this.isNotFound = true;
-      this.isLoaded = false;
-    },
-
-    onImageLoad() {
-      this.isNotFound = false;
-      this.isLoaded = true;
-    }
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-.train-thumbnail {
-  width: auto;
-  height: auto;
-  max-height: 60px;
-}
-</style>

src/components/Global/VehicleThumbnail.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="vehicle-thumbnail" :data-load-status="imgStatus" ref="thumbRef">
+    <div class="stock-text">
+      <div>{{ vehicleName }}</div>
+      <small v-if="vehicleCargo">({{ vehicleCargo }})</small>
+    </div>
+
+    <div class="stock-images">
+      <img
+        v-for="(thumbnailImage, imageIndex) in images"
+        :src="`https://stacjownik.spythere.eu/static/thumbnails/${thumbnailImage}.png`"
+        height="60"
+        loading="lazy"
+        data-tooltip-type="VehiclePreviewTooltip"
+        :data-tooltip-content="vehicleString"
+        @error="onImageError($event, imageFallbacks[imageIndex])"
+        @load="onImageLoad"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, PropType, Ref, ref } from 'vue';
+
+const props = defineProps({
+  vehicleString: { type: String, required: true },
+  images: { type: Object as PropType<string[]>, required: true },
+  imageFallbacks: { type: Object as PropType<string[]>, required: true }
+});
+
+const thumbRef = ref(null) as Ref<HTMLElement | null>;
+const imgStatus = ref('loading');
+
+const vehicleName = computed(() => props.vehicleString.split(':')[0].replace(/_/g, ' '));
+const vehicleCargo = computed(() => props.vehicleString.split(':')[1]);
+
+function onImageError(event: Event, fallbackImage: string) {
+  (event.target as HTMLImageElement).src = `/images/${fallbackImage}.png`;
+  imgStatus.value = 'error';
+}
+
+function onImageLoad() {
+  if (imgStatus.value != 'error') {
+    imgStatus.value = 'loaded';
+  }
+
+  if (thumbRef.value) thumbRef.value.style.opacity = '1';
+}
+</script>
+
+<style lang="scss" scoped>
+.vehicle-thumbnail {
+  
+  position: relative;
+  opacity: 0;
+  transition: opacity 100ms ease-in-out;
+
+  &[data-load-status='loading'] {
+    min-height: 60px;
+    min-width: 200px;
+  }
+}
+
+.stock-text {
+  text-align: center;
+  color: #aaa;
+  font-size: 0.9em;
+  margin-bottom: 0.25em;
+  padding: 0.25em 0;
+}
+
+.stock-images {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  cursor: crosshair;
+
+  padding: 0.5em 0;
+}
+</style>

src/components/JournalView/DailyStats.vue

@@ -1,241 +0,0 @@
-<template>
-  <section class="daily-stats">
-    <span :data-active="statsStatus">
-      <b v-if="statsStatus == Status.Data.Loading">
-        {{ $t('app.loading') }}
-      </b>
-
-      <b v-else-if="stats.distanceSum == null">
-        {{ $t('journal.daily-stats-info') }}
-      </b>
-
-      <span class="stats-list" v-else>
-        <h3>
-          {{ $t('journal.daily-stats-title') }}
-          <b class="text--primary">{{ new Date().toLocaleDateString($i18n.locale) }}</b>
-        </h3>
-        <hr style="margin-bottom: 0.5em" />
-
-        <div v-if="stats.totalTimetables">
-          &bull;
-          <i18n-t keypath="journal.timetable-stats-total">
-            <template #count>
-              <b class="text--primary">
-                {{ stats.totalTimetables }}
-                {{ $t('journal.timetable-count', stats.totalTimetables) }}
-              </b>
-            </template>
-
-            <template #distance>
-              <b class="text--primary"> {{ stats.distanceSum?.toFixed(2) }} km</b>
-            </template>
-          </i18n-t>
-        </div>
-
-        <div v-if="stats.maxTimetable">
-          &bull;
-          <i18n-t keypath="journal.timetable-stats-longest">
-            <template #id>
-              <router-link :to="`/journal/timetables?timetableId=${stats.maxTimetable.id}`">
-                <b>{{ stats.maxTimetable.id }}</b>
-              </router-link>
-            </template>
-            <template #author>
-              <router-link
-                :to="`/journal/dispatchers?dispatcherName=${stats.maxTimetable.authorName}`"
-              >
-                <b>{{ stats.maxTimetable.authorName }}</b>
-              </router-link>
-            </template>
-            <template #driver>
-              <b class="text--primary">{{ stats.maxTimetable.driverName }}</b>
-            </template>
-            <template #distance>
-              <b class="text--primary">{{ stats.maxTimetable.routeDistance }} km</b>
-            </template>
-          </i18n-t>
-        </div>
-
-        <div v-if="topDispatchers.length == 1">
-          &bull;
-          <i18n-t keypath="journal.timetable-stats-most-active-dr">
-            <template #dispatcher>
-              <router-link :to="`/journal/dispatchers?dispatcherName=${topDispatchers[0].name}`">
-                <b>{{ topDispatchers[0].name }}</b>
-              </router-link>
-            </template>
-            <template #count>
-              <b class="text--primary">
-                {{ topDispatchers[0].count }}
-                {{ $t('journal.timetable-count', topDispatchers[0].count) }}
-              </b>
-            </template>
-          </i18n-t>
-        </div>
-
-        <div v-if="topDispatchers.length > 1">
-          &bull;
-          <i18n-t keypath="journal.timetable-stats-most-active-dr-many">
-            <template #dispatchers>
-              <span v-for="(disp, i) in topDispatchers" :key="i">
-                <span v-if="i == topDispatchers.length - 1"> {{ $t('general.and') }} </span>
-
-                <router-link :to="`/journal/dispatchers?dispatcherName=${disp.name}`">
-                  <b>{{ disp.name }}</b>
-                </router-link>
-
-                <span v-if="i < topDispatchers.length - 2">, </span>
-              </span>
-            </template>
-
-            <template #count>
-              <b class="text--primary">
-                {{ topDispatchers[0].count }}
-                {{ $t('journal.timetable-count', topDispatchers[0].count) }}
-              </b>
-            </template>
-          </i18n-t>
-        </div>
-
-        <div v-if="stats.longestDuties.length > 0">
-          &bull;
-          <i18n-t keypath="journal.timetable-stats-longest-duties">
-            <template #dispatcher>
-              <router-link
-                :to="`/journal/dispatchers?dispatcherName=${stats.longestDuties[0].name}`"
-              >
-                <b>{{ stats.longestDuties[0].name }}</b>
-              </router-link>
-            </template>
-
-            <template #station>{{ stats.longestDuties[0].station }}</template>
-
-            <template #duration>
-              {{ calculateDuration(stats.longestDuties[0].duration) }}
-            </template>
-          </i18n-t>
-        </div>
-
-        <div v-if="stats.mostActiveDrivers.length > 0">
-          &bull;
-          <i18n-t keypath="journal.timetable-stats-most-active-driver">
-            <template #driver>
-              <b class="text--primary">{{ stats.mostActiveDrivers[0].name }}</b>
-            </template>
-            <template #distance>
-              <b class="text--primary">{{ stats.mostActiveDrivers[0].distance.toFixed(2) }} km</b>
-            </template>
-          </i18n-t>
-        </div>
-      </span>
-    </span>
-  </section>
-</template>
-
-<script lang="ts">
-import axios from 'axios';
-import { defineComponent } from 'vue';
-import dateMixin from '../../mixins/dateMixin';
-
-import { URLs } from '../../scripts/utils/apiURLs';
-import { API } from '../../typings/api';
-import { Status } from '../../typings/common';
-
-export default defineComponent({
-  mixins: [dateMixin],
-  emits: ['toggleStatsOpen'],
-
-  data() {
-    return {
-      Status,
-      statsStatus: Status.Data.Loading,
-      intervalId: -1,
-
-      stats: {} as API.DailyStats.Response
-    };
-  },
-
-  activated() {
-    this.startFetchingDailyStats();
-    this.$emit('toggleStatsOpen', true);
-  },
-
-  deactivated() {
-    this.stopFetchingDailyStats();
-  },
-
-  computed: {
-    topDispatchers() {
-      if (this.stats.mostActiveDispatchers.length == 0) return [];
-      const maxCount = this.stats.mostActiveDispatchers[0].count;
-
-      return this.stats.mostActiveDispatchers.filter((disp) => disp.count === maxCount);
-    }
-  },
-
-  methods: {
-    async fetchDailyTimetableStats() {
-      try {
-        const res: API.DailyStats.Response = await (
-          await axios.get(`${URLs.stacjownikAPI}/api/getDailyTimetableStats`)
-        ).data;
-
-        // this.stats = {
-        //   totalTimetables: res.totalTimetables,
-        //   distanceSum: res.distanceSum,
-        //   distanceAvg: res.distanceAvg,
-        //   // timetableAuthor: res.maxTimetable?.authorName || '',
-        //   // timetableDriver: res.maxTimetable?.driverName || '',
-        //   // timetableId: res.maxTimetable?.id || 0,
-        //   // timetableRouteDistance: res.maxTimetable?.routeDistance || 0,
-
-        //   mostActiveDispatchers: res.mostActiveDispatchers,
-        //   mostActiveDrivers: res.mostActiveDrivers,
-        //   longestDuties: res.longestDuties
-        // };
-
-        this.stats = res;
-
-        this.statsStatus = Status.Data.Loaded;
-      } catch (error) {
-        console.error('Ups! Wystąpił błąd podczas pobierania statystyk rozkładów jazdy...');
-        this.statsStatus = Status.Data.Error;
-      }
-    },
-
-    startFetchingDailyStats() {
-      this.fetchDailyTimetableStats();
-
-      if (this.intervalId != -1) return;
-
-      this.intervalId = setInterval(this.fetchDailyTimetableStats, 60000);
-    },
-
-    stopFetchingDailyStats() {
-      clearInterval(this.intervalId);
-      this.intervalId = -1;
-    }
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-
-.daily-stats {
-  text-align: left;
-}
-.daily-stats > span[data-active='0'] {
-  opacity: 0.75;
-}
-
-.stats-list a {
-  text-decoration: underline;
-}
-
-@include smallScreen {
-  h3 {
-    text-align: center;
-  }
-}
-</style>

src/components/JournalView/DispatcherStats.vue

@@ -1,165 +0,0 @@
-<template>
-  <div class="stats_container" v-click-outside="() => (cardVisible = false)">
-    <button class="stats_button" @click="toggleCard">
-      Statystyki dyżurnego {{ store.dispatcherStatsName }}
-    </button>
-
-    <div class="stats_card" v-if="store.dispatcherStatsName && cardVisible">
-      <div>
-        <Loading v-if="!store.dispatcherStatsData" />
-
-        <div class="loading" v-else-if="!store.dispatcherStatsData._count._all">
-          Ten dyżurny nie ma jeszcze szczegółowych statystyk!
-        </div>
-
-        <div v-else>
-          <h3>STATYSTYKI WYSTAWIONYCH ROZKŁADÓW</h3>
-
-          <div class="info-stats" v-if="store.dispatcherStatsData._count._all">
-            <span class="stat-badge">
-              <span>LICZBA</span>
-              <span>{{ store.dispatcherStatsData._count._all }}</span>
-            </span>
-            <span class="stat-badge">
-              <span>SUMA (KM)</span>
-              <span>{{ store.dispatcherStatsData._sum.routeDistance.toFixed(2) }}km</span>
-            </span>
-            <span class="stat-badge">
-              <span>NAJDŁUŻSZY</span>
-              <span>{{ store.dispatcherStatsData._max.routeDistance.toFixed(2) }}km</span>
-            </span>
-            <span class="stat-badge">
-              <span>ŚREDNIO</span>
-              <span>{{ store.dispatcherStatsData._avg.routeDistance.toFixed(2) }}km</span>
-            </span>
-          </div>
-
-          <h3>OSTATNIE WYSTAWIONE ROZKŁADY</h3>
-          <div class="last-timetables">
-            <div class="timetable-row" v-for="timetable in timetables" :key="timetable.id">
-              #{{ timetable.timetableId }} |
-              <b>{{ timetable.trainCategoryCode }} {{ timetable.trainNo }}</b> |
-              {{ timetable.driverName }} ({{ timetable.routeDistance }}km)
-              <div>{{ timetable.route.replace('|', ' > ') }}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import axios from 'axios';
-import { defineComponent } from 'vue';
-import { URLs } from '../../scripts/utils/apiURLs';
-import { useStore } from '../../store/mainStore';
-import Loading from '../Global/Loading.vue';
-import { API } from '../../typings/api';
-
-export default defineComponent({
-  components: { Loading },
-
-  setup() {
-    const store = useStore();
-
-    return {
-      store
-    };
-  },
-
-  data() {
-    return {
-      cardVisible: false,
-      lastDispatcherName: '',
-      timetables: [] as API.TimetableHistory.Response
-    };
-  },
-
-  methods: {
-    toggleCard() {
-      if (!this.store.dispatcherStatsName) return;
-
-      this.cardVisible = !this.cardVisible;
-      if (this.cardVisible) this.fetchDispatcherStats();
-    },
-
-    async fetchDispatcherStats() {
-      if (this.lastDispatcherName != this.store.dispatcherStatsName) {
-        this.store.dispatcherStatsData = undefined;
-      }
-
-      const statsData: API.DispatcherStats.Response = await (
-        await axios.get(
-          `${URLs.stacjownikAPI}/api/getDispatcherInfo?name=${this.store.dispatcherStatsName}`
-        )
-      ).data;
-
-      const timetables: API.TimetableHistory.Response = await (
-        await axios.get(
-          `${URLs.stacjownikAPI}/api/getTimetables?authorName=${this.store.dispatcherStatsName}`
-        )
-      ).data;
-
-      this.timetables = timetables;
-      this.store.dispatcherStatsData = statsData;
-      this.lastDispatcherName = this.store.dispatcherStatsName;
-    }
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-@import '../../styles/variables.scss';
-
-.stats_container {
-  position: relative;
-}
-
-.stats_card {
-  position: absolute;
-  z-index: 999;
-  top: 120%;
-  right: 0;
-  width: 500px;
-  max-width: 97vw;
-  min-height: 100px;
-  overflow: auto;
-
-  border-radius: 1em 0 1em 1em;
-  background-color: #222222f1;
-  box-shadow: 0 3px 10px 5px #131313;
-  padding: 1em 0.5em;
-}
-
-.last-timetables {
-  max-height: 400px;
-  margin: 0.5em 0;
-}
-
-.timetable-row {
-  width: 95%;
-  margin: 0.5em auto;
-  padding: 0.5em;
-
-  background-color: #4d4d4d;
-}
-
-h2.card-title {
-  font-size: 1.8em;
-}
-
-h3 {
-  margin-top: 1em;
-}
-
-h2,
-h3 {
-  text-align: center;
-}
-
-.last-timetables {
-  overflow-y: auto;
-}
-</style>

src/components/JournalView/JournalDailyStats.vue

@@ -0,0 +1,273 @@
+<template>
+  <section class="daily-stats">
+    <span :data-active="statsStatus">
+      <h3>
+        {{ $t('journal.daily-stats.title') }}
+        <b class="text--primary">{{ new Date().toLocaleDateString($i18n.locale) }}</b>
+      </h3>
+
+      <hr class="header-separator" />
+
+      <b v-if="statsStatus == Status.Data.Loading">
+        {{ $t('app.loading') }}
+      </b>
+
+      <b class="text--error" v-else-if="statsStatus == Status.Data.Error">
+        {{ $t('journal.stats-error') }}
+      </b>
+
+      <b v-else-if="topDispatchers.length == 0">
+        {{ $t('journal.daily-stats.info') }}
+      </b>
+
+      <div v-else>
+        <ul class="stats-list">
+          <li v-if="stats.totalTimetables">
+            <i18n-t keypath="journal.daily-stats.total">
+              <template #count>
+                <b class="text--primary">
+                  {{ stats.totalTimetables }}
+                  {{ $t('journal.daily-stats.count', stats.totalTimetables) }}
+                </b>
+              </template>
+
+              <template #distance>
+                <b class="text--primary"> {{ stats.distanceSum?.toFixed(2) }} km</b>
+              </template>
+            </i18n-t>
+          </li>
+
+          <li v-if="stats.maxTimetable">
+            <i18n-t keypath="journal.daily-stats.longest">
+              <template #id>
+                <router-link :to="`/journal/timetables?search-train=%23${stats.maxTimetable.id}`">
+                  <b>{{ stats.maxTimetable.id }}</b>
+                </router-link>
+              </template>
+              <template #author>
+                <router-link
+                  :to="`/journal/timetables?search-dispatcher=${stats.maxTimetable.authorName}`"
+                >
+                  <b>{{ stats.maxTimetable.authorName }}</b>
+                </router-link>
+              </template>
+              <template #driver>
+                <b class="text--primary">{{ stats.maxTimetable.driverName }}</b>
+              </template>
+              <template #distance>
+                <b class="text--primary">{{ stats.maxTimetable.routeDistance }} km</b>
+              </template>
+            </i18n-t>
+          </li>
+
+          <li v-if="topDispatchers.length == 1">
+            <i18n-t keypath="journal.daily-stats.most-active-dr">
+              <template #dispatcher>
+                <router-link
+                  :to="`/journal/dispatchers?search-dispatcher=${topDispatchers[0].name}`"
+                >
+                  <b>{{ topDispatchers[0].name }}</b>
+                </router-link>
+              </template>
+              <template #count>
+                <b class="text--primary">
+                  {{ topDispatchers[0].count }}
+                  {{ $t('journal.daily-stats.count', topDispatchers[0].count) }}
+                </b>
+              </template>
+            </i18n-t>
+          </li>
+
+          <li v-if="topDispatchers.length > 1">
+            <i18n-t keypath="journal.daily-stats.most-active-dr-many">
+              <template #dispatchers>
+                <span v-for="(disp, i) in topDispatchers" :key="i">
+                  <span v-if="i == topDispatchers.length - 1"> {{ $t('general.and') }} </span>
+
+                  <router-link :to="`/journal/dispatchers?search-dispatcher=${disp.name}`">
+                    <b>{{ disp.name }}</b>
+                  </router-link>
+
+                  <span v-if="i < topDispatchers.length - 2">, </span>
+                </span>
+              </template>
+
+              <template #count>
+                <b class="text--primary">
+                  {{ topDispatchers[0].count }}
+                  {{ $t('journal.daily-stats.count', topDispatchers[0].count) }}
+                </b>
+              </template>
+            </i18n-t>
+          </li>
+
+          <li v-if="stats.longestDuties.length > 0">
+            <i18n-t keypath="journal.daily-stats.longest-duties">
+              <template #dispatcher>
+                <router-link
+                  :to="`/journal/dispatchers?search-dispatcher=${stats.longestDuties[0].name}`"
+                >
+                  <b>{{ stats.longestDuties[0].name }}</b>
+                </router-link>
+              </template>
+
+              <template #station>{{ stats.longestDuties[0].station }}</template>
+
+              <template #duration>
+                {{ calculateDuration(stats.longestDuties[0].duration) }}
+              </template>
+            </i18n-t>
+          </li>
+
+          <li v-if="stats.mostActiveDrivers.length > 0">
+            <i18n-t keypath="journal.daily-stats.most-active-driver">
+              <template #driver>
+                <router-link
+                  :to="`/journal/timetables?search-driver=${stats.mostActiveDrivers[0].name}`"
+                >
+                  <b>{{ stats.mostActiveDrivers[0].name }}</b>
+                </router-link>
+              </template>
+              <template #distance>
+                <b class="text--primary">{{ stats.mostActiveDrivers[0].distance.toFixed(2) }} km</b>
+              </template>
+            </i18n-t>
+          </li>
+        </ul>
+
+        <hr class="section-separator" />
+
+        <div class="stats-badges">
+          <span
+            class="badge stat-badge"
+            v-for="key in [
+              'rippedSwitches',
+              'derailments',
+              'skippedStopSignals',
+              'radioStops',
+              'kills'
+            ]"
+            :key="key"
+          >
+            <span>{{ $t(`journal.daily-stats.${key}`) }}</span>
+            <span>
+              {{ Object.entries(stats.globalDiff).find(([k, v]) => k == key)?.[1] || '--' }}
+            </span>
+          </span>
+        </div>
+      </div>
+    </span>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import dateMixin from '../../mixins/dateMixin';
+
+import { API } from '../../typings/api';
+import { Status } from '../../typings/common';
+import { useApiStore } from '../../store/apiStore';
+
+export default defineComponent({
+  name: 'journal-daily-stats',
+
+  mixins: [dateMixin],
+
+  data() {
+    return {
+      Status,
+      statsStatus: Status.Data.Loading,
+      intervalId: -1,
+
+      stats: {} as API.DailyStats.Response,
+      apiStore: useApiStore()
+    };
+  },
+
+  activated() {
+    this.startFetchingDailyStats();
+  },
+
+  deactivated() {
+    this.stopFetchingDailyStats();
+  },
+
+  computed: {
+    topDispatchers() {
+      if (this.stats.mostActiveDispatchers.length == 0) return [];
+      const maxCount = this.stats.mostActiveDispatchers[0].count;
+
+      return this.stats.mostActiveDispatchers.filter((disp) => disp.count === maxCount);
+    }
+  },
+
+  methods: {
+    async fetchDailyTimetableStats() {
+      try {
+        const res: API.DailyStats.Response = await (
+          await this.apiStore.client!.get('api/getDailyStats')
+        ).data;
+
+        this.stats = res;
+
+        this.statsStatus = Status.Data.Loaded;
+      } catch (error) {
+        console.error('Ups! Wystąpił błąd podczas pobierania statystyk rozkładów jazdy...');
+        this.statsStatus = Status.Data.Error;
+      }
+    },
+
+    startFetchingDailyStats() {
+      this.fetchDailyTimetableStats();
+
+      if (this.intervalId != -1) return;
+
+      this.intervalId = window.setInterval(this.fetchDailyTimetableStats, 60000);
+    },
+
+    stopFetchingDailyStats() {
+      clearInterval(this.intervalId);
+      this.intervalId = -1;
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/responsive.scss';
+@import '../../styles/JournalStats.scss';
+@import '../../styles/badge.scss';
+
+.daily-stats {
+  text-align: left;
+}
+
+.daily-stats > span[data-active='0'] {
+  opacity: 0.75;
+}
+
+ul.stats-list {
+  list-style: disc;
+  padding: 0 1em;
+}
+
+.stats-list a {
+  text-decoration: underline;
+}
+
+.stats-list > li {
+  margin: 0.25em 0;
+}
+
+.stats-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+}
+
+@include smallScreen {
+  h3 {
+    text-align: center;
+  }
+}
+</style>

src/components/JournalView/JournalDispatchers/JournalDispatcherEntry.vue

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

src/components/JournalView/JournalDispatchers/JournalDispatcherStats.vue

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

src/components/JournalView/JournalDispatchers/JournalDispatchersList.vue

@@ -0,0 +1,109 @@
+<template>
+  <div>
+    <div class="journal_warning" v-if="store.isOffline">
+      {{ $t('app.offline') }}
+    </div>
+
+    <Loading v-else-if="dataStatus == Status.Data.Loading" />
+
+    <div v-else-if="dataStatus == Status.Data.Error" class="journal_warning error">
+      {{ $t('app.error') }}
+    </div>
+
+    <div class="journal_warning" v-else-if="dispatcherHistory.length == 0">
+      {{ $t('app.no-result') }}
+    </div>
+
+    <div v-else>
+      <transition-group name="list-anim" class="journal-list" tag="ul">
+        <JournalDispatcherEntry
+          v-for="entry in dispatcherHistory"
+          :key="entry.id"
+          :entry="entry"
+          :onToggleShowExtraInfo="toggleExtraInfo"
+          :showExtraInfo="extraInfoIndexes.includes(entry.id)"
+        />
+      </transition-group>
+
+      <AddDataButton
+        :list="dispatcherHistory"
+        :scrollDataLoaded="scrollDataLoaded"
+        :scrollNoMoreData="scrollNoMoreData"
+        @addHistoryData="addHistoryData"
+      />
+    </div>
+
+    <div class="journal_warning" v-if="scrollNoMoreData">
+      {{ $t('journal.no-further-data') }}
+    </div>
+
+    <div class="journal_warning" v-else-if="!scrollDataLoaded">
+      {{ $t('journal.loading-further-data') }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { useMainStore } from '../../../store/mainStore';
+import { API } from '../../../typings/api';
+import { Status } from '../../../typings/common';
+import Loading from '../../Global/Loading.vue';
+import AddDataButton from '../../Global/AddDataButton.vue';
+import JournalDispatcherEntry from './JournalDispatcherEntry.vue';
+
+export default defineComponent({
+  components: { Loading, AddDataButton, JournalDispatcherEntry },
+
+  props: {
+    dispatcherHistory: {
+      type: Array as PropType<API.DispatcherHistory.Response>,
+      required: true
+    },
+    scrollNoMoreData: {
+      type: Boolean
+    },
+    scrollDataLoaded: {
+      type: Boolean
+    },
+    addHistoryData: {
+      type: Function as PropType<() => void>
+    },
+    dataStatus: {
+      type: Number as PropType<Status.Data>
+    }
+  },
+
+  data() {
+    return {
+      Status,
+      store: useMainStore(),
+
+      extraInfoIndexes: [] as number[]
+    };
+  },
+
+  watch: {
+    '$route.query': {
+      deep: true,
+      handler() {
+        this.extraInfoIndexes.length = 0;
+      }
+    }
+  },
+
+  methods: {
+    toggleExtraInfo(id: number) {
+      const existingIdx = this.extraInfoIndexes.indexOf(id);
+
+      if (existingIdx != -1) this.extraInfoIndexes.splice(existingIdx, 1);
+      else this.extraInfoIndexes.push(id);
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../../styles/variables.scss';
+@import '../../../styles/JournalSection.scss';
+</style>

src/components/JournalView/JournalDispatchersList.vue

@@ -1,249 +0,0 @@
-<template>
-  <div>
-    <transition name="status-anim" mode="out-in">
-      <div :key="dataStatus">
-        <div class="journal_warning" v-if="store.isOffline">
-          {{ $t('app.offline') }}
-        </div>
-
-        <Loading v-else-if="dataStatus == Status.Data.Loading" />
-
-        <div v-else-if="dataStatus == Status.Data.Error" class="journal_warning error">
-          {{ $t('app.error') }}
-        </div>
-
-        <div class="journal_warning" v-else-if="dispatcherHistory.length == 0">
-          {{ $t('app.no-result') }}
-        </div>
-
-        <div v-else>
-          <table class="scenery-history-table">
-            <thead>
-              <th>{{ $t('journal.history-name') }}</th>
-              <th>{{ $t('journal.history-hash') }}</th>
-              <th>{{ $t('journal.history-dispatcher') }}</th>
-              <th>{{ $t('journal.history-level') }}</th>
-              <th>{{ $t('journal.history-rate') }}</th>
-              <th>{{ $t('journal.history-region') }}</th>
-              <th>{{ $t('journal.history-date') }}</th>
-            </thead>
-
-            <tbody>
-              <transition-group name="list-anim">
-                <tr v-for="historyItem in dispatcherHistory" :key="historyItem.id">
-                  <td>
-                    <router-link
-                      :to="`/journal/dispatchers?sceneryName=${historyItem.stationName}`"
-                    >
-                      <b>{{ historyItem.stationName }}</b>
-                    </router-link>
-                  </td>
-                  <td>#{{ historyItem.stationHash }}</td>
-                  <td>
-                    <router-link
-                      :to="`/journal/dispatchers?dispatcherName=${historyItem.dispatcherName}`"
-                    >
-                      <b>{{ historyItem.dispatcherName }}</b>
-                    </router-link>
-                  </td>
-                  <td>
-                    <b
-                      v-if="historyItem.dispatcherLevel !== null"
-                      class="level-badge dispatcher"
-                      :style="
-                        calculateExpStyle(
-                          historyItem.dispatcherLevel,
-                          historyItem.dispatcherIsSupporter
-                        )
-                      "
-                    >
-                      {{ historyItem.dispatcherLevel >= 2 ? historyItem.dispatcherLevel : 'L' }}
-                    </b>
-                  </td>
-                  <td class="text--primary">
-                    <b>{{ historyItem.dispatcherRate }}</b>
-                  </td>
-                  <td>
-                    <b class="region-badge" :aria-describedby="historyItem.region">{{
-                      regions.find((r) => r.id == historyItem.region)?.value || '???'
-                    }}</b>
-                  </td>
-                  <td style="min-width: 200px" class="time">
-                    <span v-if="historyItem.timestampTo" class="text--offline">
-                      <b>{{ $d(historyItem.timestampFrom) }}</b>
-                      {{ timestampToString(historyItem.timestampFrom) }}
-                      - {{ timestampToString(historyItem.timestampTo) }} ({{
-                        calculateDuration(historyItem.currentDuration)
-                      }})
-                    </span>
-                    <span class="dispatcher-online" v-else>
-                      <b class="text--online">
-                        <router-link :to="`/scenery?station=${historyItem.stationName}`">{{
-                          $t('journal.online-since')
-                        }}</router-link>
-                        {{ timestampToString(historyItem.timestampFrom) }}
-                      </b>
-                      ({{ calculateDuration(historyItem.currentDuration) }})
-                    </span>
-                  </td>
-                </tr>
-              </transition-group>
-            </tbody>
-          </table>
-
-          <AddDataButton
-            :list="dispatcherHistory"
-            :scrollDataLoaded="scrollDataLoaded"
-            :scrollNoMoreData="scrollNoMoreData"
-            @addHistoryData="addHistoryData"
-          />
-        </div>
-      </div>
-    </transition>
-
-    <div class="journal_warning" v-if="scrollNoMoreData">
-      {{ $t('journal.no-further-data') }}
-    </div>
-
-    <div class="journal_warning" v-else-if="!scrollDataLoaded">
-      {{ $t('journal.loading-further-data') }}
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import dateMixin from '../../mixins/dateMixin';
-import styleMixin from '../../mixins/styleMixin';
-import { useStore } from '../../store/mainStore';
-import Loading from '../Global/Loading.vue';
-import { regions } from '../../data/options.json';
-import AddDataButton from '../Global/AddDataButton.vue';
-import { API } from '../../typings/api';
-import { Status } from '../../typings/common';
-
-export default defineComponent({
-  components: { Loading, AddDataButton },
-
-  mixins: [dateMixin, styleMixin],
-
-  props: {
-    dispatcherHistory: {
-      type: Array as PropType<API.DispatcherHistory.Response>,
-      required: true
-    },
-    scrollNoMoreData: {
-      type: Boolean
-    },
-    scrollDataLoaded: {
-      type: Boolean
-    },
-    addHistoryData: {
-      type: Function as PropType<() => void>
-    },
-    dataStatus: {
-      type: Number as PropType<Status.Data>
-    }
-  },
-
-  data() {
-    return {
-      Status,
-      store: useStore(),
-      regions
-    };
-  },
-
-  computed: {
-    computedDispatcherHistory() {
-      console.log(this.dispatcherHistory.length);
-
-      return this.dispatcherHistory.reduce(
-        (acc, historyItem, i) => {
-          if (this.isAnotherDay(i - 1, i))
-            acc.push(new Date(historyItem.timestampFrom).toLocaleDateString('pl-PL'));
-          acc.push(historyItem);
-
-          return acc;
-        },
-        [] as (API.DispatcherHistory.Data | string)[]
-      );
-    }
-  },
-
-  methods: {
-    navigateToScenery(name: string, isOnline: boolean) {
-      if (!isOnline) return;
-
-      this.$router.push(`/scenery?station=${name.trim().replace(/ /g, '_')}`);
-    },
-
-    isAnotherDay(prevIndex: number, currIndex: number) {
-      if (currIndex == 0) return true;
-
-      return (
-        new Date(this.dispatcherHistory[prevIndex].timestampFrom).getDate() !=
-        new Date(this.dispatcherHistory[currIndex].timestampFrom).getDate()
-      );
-    }
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/animations.scss';
-@import '../../styles/responsive.scss';
-@import '../../styles/badge.scss';
-@import '../../styles/variables.scss';
-@import '../../styles/JournalSection.scss';
-
-table.scenery-history-table {
-  --_bg-table: #111;
-  --_bg-head: #101010;
-  --_bg-row: #2f2f2f;
-
-  width: 100%;
-  border-collapse: collapse;
-  position: relative;
-  text-align: center;
-
-  margin-bottom: 1em;
-
-  thead {
-    position: sticky;
-    top: 0;
-    background-color: var(--_bg-head);
-  }
-
-  th {
-    padding: 0.5em;
-  }
-
-  tr {
-    background-color: var(--_bg-row);
-    border-bottom: 2px solid black;
-
-    &:last-child {
-      border: none;
-    }
-  }
-
-  td {
-    padding: 0.75em;
-
-    .level-badge {
-      margin: 0 auto;
-    }
-  }
-}
-
-.text {
-  &--online {
-    color: springgreen;
-  }
-
-  &--offline {
-    color: #ddd;
-  }
-}
-</style>

src/components/JournalView/JournalDriverStats.vue

@@ -1,73 +0,0 @@
-<template>
-  <div class="journal-stats">
-    <span v-if="store.driverStatsData">
-      <h3>
-        {{ $t('journal.stats-title') }}
-        <span class="text--primary">{{ store.driverStatsName.toUpperCase() }}</span>
-      </h3>
-
-      <div class="info-stats">
-        <span class="stat-badge">
-          <span>{{ $t('journal.stats-timetables') }}</span>
-          <span
-            >{{ store.driverStatsData._count.fulfilled }} /
-            {{ store.driverStatsData._count._all }}</span
-          >
-        </span>
-
-        <span class="stat-badge">
-          <span>{{ $t('journal.stats-longest-timetable') }}</span>
-          <span> {{ store.driverStatsData._max.routeDistance.toFixed(2) }}km </span>
-        </span>
-
-        <span class="stat-badge">
-          <span>{{ $t('journal.stats-avg-timetable') }}</span>
-          <span> {{ store.driverStatsData._avg.routeDistance.toFixed(2) }}km </span>
-        </span>
-
-        <span class="stat-badge">
-          <span>{{ $t('journal.stats-distance') }}</span>
-          <span>
-            {{ store.driverStatsData._sum.currentDistance.toFixed(2) }} /
-            {{ store.driverStatsData._sum.routeDistance.toFixed(2) }}km
-          </span>
-        </span>
-
-        <span class="stat-badge">
-          <span>{{ $t('journal.stats-stations') }}</span>
-          <span>
-            {{ store.driverStatsData._sum.confirmedStopsCount }} /
-            {{ store.driverStatsData._sum.allStopsCount }}
-          </span>
-        </span>
-      </div>
-    </span>
-
-    <b v-else-if="store.driverStatsStatus == Status.Data.Loading">{{
-      $t('journal.stats-loading')
-    }}</b>
-    <b v-else-if="store.driverStatsStatus == Status.Data.Error">
-      {{ $t('journal.stats-error ') }}
-    </b>
-    <b v-else>{{ $t('journal.driver-stats-info') }}</b>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { useStore } from '../../store/mainStore';
-import { Status } from '../../typings/common';
-
-export default defineComponent({
-  data() {
-    return {
-      store: useStore(),
-      Status: Status
-    };
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/JournalStats.scss';
-</style>

src/components/JournalView/JournalOptions.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="filters-options" @keydown.esc="showOptions = false">
+  <div class="filters-options dropdown" @keydown.esc="showOptions = false">
-    <div class="bg" v-if="showOptions" @click="showOptions = false"></div>
+    <div class="dropdown_background" v-if="showOptions" @click="showOptions = false"></div>
 
     <div class="actions-bar">
       <button
@@ -9,7 +9,7 @@
         ref="button"
       >
         <img src="/images/icon-filter2.svg" alt="Open filters" />
-        {{ $t('options.filters') }} [F]
+        [F] {{ $t('options.filters') }}
         <span class="active-indicator" v-if="currentOptionsActive"></span>
       </button>
 
@@ -27,13 +27,13 @@
       <option v-for="(sugg, i) in dispatcherSuggestions" :key="i" :value="sugg"></option>
     </datalist>
 
-    <transition name="options-anim">
+    <transition name="dropdown-anim">
-      <div class="options_wrapper" v-if="showOptions">
+      <div class="dropdown_wrapper" v-if="showOptions">
         <div class="options_content">
           <h1 class="option-title">{{ $t('options.search-title') }}</h1>
           <div class="search_content">
             <div class="search" v-for="(_, propName) in searchersValues" :key="propName">
-              <label v-if="propName == 'search-date'" for="date">{{
+              <label v-if="propName == 'search-date'" for="search-date">{{
                 $t(`options.search-${optionsType}-date`)
               }}</label>
 
@@ -41,12 +41,13 @@
                 <input
                   class="search-input"
                   v-model="searchersValues[propName]"
-                  @keydown.enter="onSearchConfirm"
+                  @keydown.enter="searchConfirm"
                   @focus="preventKeyDown = true"
                   @blur="preventKeyDown = false"
                   :placeholder="$t(`options.${propName}`)"
                   :type="propName == 'search-date' ? 'date' : 'text'"
                   :min="propName == 'search-date' ? '2022-02-01' : undefined"
+                  :id="`${propName}`"
                   :list="propName.toString()"
                 />
 
@@ -110,14 +111,12 @@
 </template>
 
 <script lang="ts">
-import axios from 'axios';
 import { defineComponent, inject, PropType } from 'vue';
 import keyMixin from '../../mixins/keyMixin';
-import { URLs } from '../../scripts/utils/apiURLs';
+import { useMainStore } from '../../store/mainStore';
-import { useStore } from '../../store/mainStore';
 import { Journal } from './typings';
-import { API } from '../../typings/api';
 import { Status } from '../../typings/common';
+import { useApiStore } from '../../store/apiStore';
 
 export default defineComponent({
   emits: ['onSearchConfirm', 'onOptionsReset', 'onRefreshData'],
@@ -158,7 +157,8 @@ export default defineComponent({
       dispatcherSuggestions: [] as string[],
 
       searchTimeout: 0,
-      store: useStore(),
+      store: useMainStore(),
+      apiStore: useApiStore(),
 
       JournalFilterSection: Journal.FilterSection
     };
@@ -182,12 +182,6 @@ export default defineComponent({
   },
 
   watch: {
-    async 'store.driverStatsName'() {
-      await this.fetchDriverStats();
-
-      // if (value) this.store.currentStatsTab = 'driver';
-    },
-
     async 'searchersValues.search-driver'(value: string | undefined) {
       clearTimeout(this.searchTimeout);
 
@@ -206,29 +200,34 @@ export default defineComponent({
   },
 
   methods: {
-    async fetchDriverStats() {
+    // filters & sorters from URL params
-      this.store.driverStatsData = undefined;
+    handleRouteParams() {
+      this.$router.push({
+        query: {
+          ...this.$route.query,
+          'sorter-active':
+            this.sorterOptionIds.indexOf(`${this.sorterActive.id}`) != 0
+              ? this.sorterActive.id
+              : undefined,
+          ...Object.keys(this.searchersValues).reduce(
+            (acc, k) => {
+              const searchVal = this.searchersValues[k as Journal.TimetableSearchKey];
 
-      if (!this.store.driverStatsName) {
+              acc[k] = searchVal || undefined;
-        this.store.driverStatsStatus = Status.Data.Initialized;
-        return;
-      }
 
-      try {
+              return acc;
-        this.store.driverStatsStatus = Status.Data.Loading;
+            },
-
+            {} as { [k: string]: string | undefined }
-        const statsData: API.DriverStats.Response = await (
+          ),
-          await axios.get(
+          ...this.filterList?.reduce(
-            `${URLs.stacjownikAPI}/api/getDriverInfo?name=${this.store.driverStatsName}`
+            (acc, f) => {
+              if (f.isActive) acc[f.filterSection] = f.default ? undefined : f.id;
+              return acc;
+            },
+            {} as { [k: string]: string | undefined }
           )
-        ).data;
+        }
-
+      });
-        this.store.driverStatsData = statsData;
-        this.store.driverStatsStatus = Status.Data.Loaded;
-      } catch (error) {
-        this.store.driverStatsStatus = Status.Data.Error;
-        console.error('Ups! Wystąpił błąd przy próbie pobrania statystyk maszynisty! :/');
-      }
     },
 
     refreshData() {
@@ -240,17 +239,17 @@ export default defineComponent({
 
       window.clearTimeout(this.searchTimeout);
 
-      this.searchTimeout = setTimeout(async () => {
+      this.searchTimeout = window.setTimeout(async () => {
         try {
           const suggestions: string[] = await (
-            await axios.get(`${URLs.stacjownikAPI}/api/get${type}Suggestions?name=${value}`)
+            await this.apiStore.client!.get(`api/get${type}Suggestions?name=${value}`)
           ).data;
 
           this[`${type}Suggestions`] = suggestions;
         } catch (error) {
           this[`${type}Suggestions`] = [];
         }
-      }, 450);
+      }, 250);
     },
 
     // Override keyMixin function
@@ -265,7 +264,7 @@ export default defineComponent({
     onSorterChange(item: { id: string | number; value: string }) {
       this.sorterActive.id = item.id;
       this.sorterActive.dir = -1;
-      this.$emit('onSearchConfirm');
+      this.searchConfirm();
     },
 
     onFilterChange(filter: Journal.TimetableFilter) {
@@ -275,30 +274,33 @@ export default defineComponent({
         .forEach((f) => (f.isActive = false));
       filter.isActive = true;
 
-      this.$emit('onSearchConfirm');
+      this.searchConfirm();
     },
 
     onInputClear(id: any) {
       this.searchersValues[id] = '';
-      this.$emit('onSearchConfirm');
+      this.searchConfirm();
     },
 
-    onSearchConfirm() {
+    searchConfirm() {
       this.$emit('onSearchConfirm');
+      this.handleRouteParams();
     },
 
     onSearchButtonConfirm() {
       this.showOptions = false;
-      this.$emit('onSearchConfirm');
+      this.searchConfirm();
     },
 
     onResetButtonClick() {
       this.$emit('onOptionsReset');
+      this.handleRouteParams();
     }
   }
 });
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/filters_options.scss';
+@import '../../styles/dropdown';
+@import '../../styles/dropdown_filters';
 </style>

src/components/JournalView/JournalStats.vue

@@ -1,122 +1,92 @@
 <template>
-  <div class="journal-stats" v-if="!store.isOffline">
+  <div
-    <div class="tabs">
+    class="journal-stats dropdown"
+    v-if="!mainStore.isOffline"
+    @keydown.esc="currentStatsTab = null"
+  >
+    <div
+      class="dropdown_background"
+      v-if="currentStatsTab !== null"
+      @click="currentStatsTab = null"
+    ></div>
+
+    <div class="actions-bar">
       <button
-        v-for="tab in data.tabs"
+        v-for="button in statsButtons"
-        :key="tab.name"
+        :key="button.tab"
-        class="btn--filled"
+        class="btn--filled btn--image"
-        :data-selected="tab.name == store.currentStatsTab && areStatsOpen"
+        :data-selected="button.tab == currentStatsTab"
-        :data-inactive="tab.inactive"
+        :data-disabled="button.disabled"
-        :data-disabled="tab.inactive"
+        :disabled="button.disabled"
-        :disabled="tab.inactive"
+        @click="onTabButtonClick(button.tab)"
-        @click="onTabButtonClick(tab.name)"
       >
-        {{ $t(tab.titlePath) }}
+        <img
+          v-if="button.iconName"
+          :src="`/images/icon-${button.iconName}.svg`"
+          :alt="button.iconName"
+        />
+        {{ $t(button.localeKey) }}
       </button>
     </div>
 
-    <div class="stats-tab" v-show="areStatsOpen">
+    <transition name="dropdown-anim">
-      <keep-alive>
+      <div
-        <JournalDailyStats
+        class="dropdown_wrapper"
-          v-if="store.currentStatsTab == 'daily'"
+        :class="{ 'dropdown-align-right': true }"
-          @toggleStatsOpen="toggleStatsOpen"
+        v-if="currentStatsTab !== null"
-        />
+      >
-        <JournalDriverStats v-else-if="store.currentStatsTab == 'driver'" />
+        <keep-alive>
-      </keep-alive>
+          <component :is="currentStatsTab" :key="currentStatsTab"></component>
-    </div>
+        </keep-alive>
+      </div>
+    </transition>
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts">
-import { computed, onMounted, reactive, Ref, ref, watch } from 'vue';
+import { defineComponent, PropType } from 'vue';
-import { useStore } from '../../store/mainStore';
+import { useMainStore } from '../../store/mainStore';
-import JournalDailyStats from './DailyStats.vue';
-import JournalDriverStats from './JournalDriverStats.vue';
 import StorageManager from '../../managers/storageManager';
+import { Journal } from './typings';
+import JournalDailyStats from './JournalDailyStats.vue';
+import JournalDispatcherStats from '../JournalView/JournalDispatchers/JournalDispatcherStats.vue';
+import JournalDriverStats from '../JournalView/JournalTimetables/JournalDriverStats.vue';
 
-// Types
+export default defineComponent({
-type TStatTab = 'daily' | 'driver';
+  components: { JournalDailyStats, JournalDriverStats, JournalDispatcherStats },
-
+  props: {
-// Variables
+    statsButtons: {
-const store = useStore();
+      type: Array as PropType<Journal.StatsButton[]>,
-
+      required: true
-const lastDailyStatsOpen = ref(false);
-const areStatsOpen = ref(false);
-const lastClickedTab: Ref<'daily' | 'driver' | null> = ref(null);
-
-let data = reactive({
-  tabs: [
-    {
-      name: 'daily',
-      titlePath: 'journal.daily-stats-title'
-    },
-    {
-      name: 'driver',
-      titlePath: 'journal.driver-stats-title'
-      // inactive: true,
     }
-  ] as { name: TStatTab; titlePath: string; inactive?: boolean }[]
+  },
-});
+  data() {
+    return {
+      Journal,
+      mainStore: useMainStore(),
+      currentStatsTab: null as Journal.StatsTab | null
+    };
+  },
 
-// Methods
+  methods: {
-function onTabButtonClick(tab: TStatTab) {
+    onTabButtonClick(tab: Journal.StatsTab) {
-  if (lastClickedTab.value == tab || !lastClickedTab.value || !areStatsOpen.value)
+      this.currentStatsTab = tab == this.currentStatsTab ? null : tab;
-    areStatsOpen.value = !areStatsOpen.value;
 
-  if (tab == 'daily') {
+      StorageManager.setStringValue('journalStatsTab', this.currentStatsTab ?? '');
-    StorageManager.setBooleanValue('dailyStatsOpen', areStatsOpen.value);
+    }
-    lastDailyStatsOpen.value = areStatsOpen.value;
-  }
-
-  store.currentStatsTab = tab;
-  lastClickedTab.value = tab;
-
-  if (areStatsOpen.value == false) store.currentStatsTab = null;
-}
-
-function toggleStatsOpen(open: boolean) {
-  areStatsOpen.value = open;
-}
-
-watch(
-  computed(() => store.driverStatsData),
-  (statsData) => {
-    store.currentStatsTab = statsData ? 'driver' : lastClickedTab.value;
-    areStatsOpen.value = statsData ? true : lastClickedTab.value !== null;
-  }
-);
-
-onMounted(() => {
-  if (StorageManager.getBooleanValue('dailyStatsOpen')) {
-    areStatsOpen.value = true;
-    store.currentStatsTab = 'daily';
   }
 });
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/JournalStats.scss';
+@import '../../styles/dropdown.scss';
+@import '../../styles/dropdown_filters.scss';
 @import '../../styles/variables.scss';
 
-.tabs {
+.dropdown_wrapper.dropdown-align-right {
-  position: relative;
+  left: auto;
-
+  right: 0;
-  display: flex;
+  max-width: 700px;
-  gap: 0.5em;
+  // max-width: 100%;
-
-  margin-bottom: 0.5em;
-
-  button {
-    font-weight: bold;
-    padding: 0.5em 0.75em;
-
-    &[data-inactive='true'] {
-      color: gray;
-    }
-
-    &[data-selected='true'] {
-      color: $accentCol;
-    }
-  }
 }
 </style>

src/components/JournalView/JournalTimetables/EntryDetails.vue

@@ -0,0 +1,296 @@
+<template>
+  <div>
+    <div class="details-actions">
+      <button class="btn--action" @click="toggleExtraInfo">
+        <b>{{ $t('journal.entry-details') }}</b>
+        <img :src="`/images/icon-arrow-${showExtraInfo ? 'asc' : 'desc'}.svg`" alt="Arrow icon" />
+      </button>
+
+      <router-link
+        v-if="driverRouteLocation !== null"
+        class="a-button btn--action btn-timetable"
+        :to="driverRouteLocation"
+      >
+        <img src="/images/icon-train.svg" alt="train icon" />
+        <b>{{ $t('journal.timetable-online-button') }}</b>
+      </router-link>
+    </div>
+
+    <div class="details-body" v-if="showExtraInfo">
+      <div class="g-separator"></div>
+
+      <EntryStops :timetable="timetable" />
+
+      <div class="g-separator"></div>
+
+      <div class="stock-specs">
+        <span class="badge" v-if="timetable.authorName">
+          <span>{{ $t('journal.dispatcher-name') }}</span>
+          <span>{{ timetable.authorName }}</span>
+        </span>
+
+        <span class="badge" v-if="timetable.maxSpeed">
+          <span>{{ $t('journal.stock-max-speed') }}</span>
+          <span>{{ timetable.maxSpeed }}km/h</span>
+        </span>
+
+        <span class="badge" v-if="timetable.stockLength">
+          <span>{{ $t('journal.stock-length') }}</span>
+          <span>
+            {{
+              currentHistoryIndex == 0
+                ? timetable.stockLength
+                : stockHistory[currentHistoryIndex].stockLength || timetable.stockLength
+            }}m
+          </span>
+        </span>
+
+        <span class="badge" v-if="timetable.stockMass">
+          <span>{{ $t('journal.stock-mass') }}</span>
+          <span>
+            {{
+              Math.floor(
+                (currentHistoryIndex == 0
+                  ? timetable.stockMass
+                  : stockHistory[currentHistoryIndex].stockMass || timetable.stockMass) / 1000
+              )
+            }}t
+          </span>
+        </span>
+      </div>
+
+      <div class="stock-dangers" v-if="timetable.warningNotes">
+        <div class="g-separator"></div>
+
+        <b>{{ $t('journal.stock-dangers') }}:</b>
+
+        <ul>
+          <li v-if="timetable.twr">
+            <b class="text--primary">{{ $t('warnings.TWR') }} (TWR)</b>
+          </li>
+
+          <li v-if="timetable.skr">
+            <b class="text--primary">{{ $t('warnings.SKR') }}</b>
+          </li>
+
+          <li v-if="timetable.hasDangerousCargo">
+            <b class="text--primary">{{ $t('warnings.TN') }}</b>
+          </li>
+
+          <li v-if="timetable.hasExtraDeliveries">
+            <b class="text--primary">{{ $t('warnings.PN') }}</b>
+          </li>
+        </ul>
+
+        <div class="dangers-notes" v-if="timetable.warningNotes">
+          <h4>{{ $t('warnings.header-title') }}</h4>
+          <p>
+            <i>{{ timetable.warningNotes }}</i>
+          </p>
+        </div>
+      </div>
+
+      <!-- Historia zmian w składzie -->
+      <div v-if="timetable.stockString || stockHistory.length != 0">
+        <div class="g-separator"></div>
+        <b>{{ $t('journal.stock-preview') }}:</b>
+
+        <div class="stock-history">
+          <button class="btn btn--action" @click="copyStockToClipboard()">
+            <i class="fa-regular fa-copy"></i> {{ $t('journal.stock-copy') }}
+          </button>
+
+          <button
+            v-for="(sh, i) in stockHistory"
+            :key="i"
+            class="btn--action"
+            :data-checked="i == currentHistoryIndex"
+            @click.stop="currentHistoryIndex = i"
+          >
+            {{ sh.updatedAt }}
+          </button>
+        </div>
+
+        <div v-if="timetable.stockString" style="margin-top: 1em">
+          <StockList
+            :trainStockList="
+              (currentHistoryIndex == 0
+                ? timetable.stockString
+                : stockHistory[currentHistoryIndex].stockString
+              ).split(';')
+            "
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue';
+import StockList from '../../Global/StockList.vue';
+import { API } from '../../../typings/api';
+import { RouteLocationRaw } from 'vue-router';
+import EntryStops from './EntryStops.vue';
+import { useI18n } from 'vue-i18n';
+
+export default defineComponent({
+  components: { StockList, EntryStops },
+
+  emits: ['toggleExtraInfo'],
+
+  props: {
+    showExtraInfo: {
+      type: Boolean,
+      required: true
+    },
+    timetable: {
+      type: Object as PropType<API.TimetableHistory.Data>,
+      required: true
+    }
+  },
+  data() {
+    return {
+      currentHistoryIndex: 0,
+      i18n: useI18n()
+    };
+  },
+  computed: {
+    stockHistory() {
+      return this.timetable.stockHistory
+        .slice()
+        .reverse()
+        .map((h) => {
+          const historyData = h.split('@');
+          return {
+            updatedAt: new Date(Number(historyData[0])).toLocaleTimeString(this.$i18n.locale, {
+              hour: '2-digit',
+              minute: '2-digit'
+            }),
+            stockString: historyData[1],
+            stockMass: Number(historyData[2]) || undefined,
+            stockLength: Number(historyData[3]) || undefined
+          };
+        });
+    },
+
+    driverRouteLocation(): RouteLocationRaw | null {
+      if (this.timetable.terminated) return null;
+      return {
+        name: 'DriverView',
+        query: {
+          trainId: `${this.timetable.driverId}|${this.timetable.trainNo}|eu`
+        }
+      };
+    }
+  },
+  methods: {
+    onImageError(e: Event) {
+      const imageEl = e.target as HTMLImageElement;
+      imageEl.src = '/images/icon-unknown.png';
+    },
+
+    toggleExtraInfo() {
+      this.$emit('toggleExtraInfo', this.timetable.id);
+    },
+
+    copyStockToClipboard() {
+      const currentStockString =
+        this.stockHistory[this.currentHistoryIndex]?.stockString ?? this.timetable.stockString;
+
+      if (!currentStockString) {
+        alert(this.i18n.t('journal.stock-clipboard-failure'));
+        return;
+      }
+
+      navigator.clipboard
+        .writeText(currentStockString)
+        .then(() => {
+          prompt(this.i18n.t('journal.stock-clipboard-success'), currentStockString);
+        })
+        .catch(() => {
+          alert(this.i18n.t('journal.stock-clipboard-failure'));
+        });
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../../styles/variables.scss';
+@import '../../../styles/responsive.scss';
+@import '../../../styles/badge.scss';
+
+.details-body {
+  margin-top: 0.5em;
+}
+
+.details-actions {
+  display: flex;
+  gap: 0.5em;
+  margin-top: 1em;
+
+  button img {
+    height: 1.25em;
+  }
+}
+
+.stock-history {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  margin-top: 1em;
+
+  button[data-checked='true'] {
+    color: $accentCol;
+  }
+}
+
+.stock-specs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+
+  .badge {
+    margin: 0;
+
+    span:last-child {
+      color: black;
+      background-color: $accentCol;
+    }
+  }
+}
+
+hr {
+  margin: 0.5em 0;
+}
+
+.stock-dangers ul {
+  list-style: disc;
+  padding-left: 1em;
+  padding-top: 0.5em;
+  white-space: pre-wrap;
+}
+
+.dangers-notes {
+  margin-top: 0.5em;
+  white-space: pre-wrap;
+
+  p {
+    margin-top: 0.25em;
+    max-height: 200px;
+    max-width: 500px;
+    overflow: auto;
+  }
+}
+
+@include smallScreen() {
+  .stock-specs {
+    justify-content: center;
+  }
+
+  .details-actions {
+    justify-content: center;
+  }
+}
+</style>

src/components/JournalView/JournalTimetables/EntryGeneral.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="item-general">
+    <span class="general-train">
+      <span class="text--grayed">#{{ timetable.id }}</span>
+
+      <span
+        class="train-badge twr"
+        v-if="timetable.twr"
+        data-tooltip-type="BaseTooltip"
+        :data-tooltip-content="$t('warnings.TWR')"
+      >
+        TWR
+      </span>
+
+      <span
+        class="train-badge skr"
+        v-if="timetable.skr"
+        data-tooltip-type="BaseTooltip"
+        :data-tooltip-content="$t('warnings.SKR')"
+      >
+        SKR
+      </span>
+
+      <span
+        class="train-badge tn"
+        v-if="timetable.hasDangerousCargo"
+        data-tooltip-type="BaseTooltip"
+        :data-tooltip-content="$t('warnings.TN')"
+      >
+        TN
+      </span>
+
+      <span
+        class="train-badge pn"
+        v-if="timetable.hasExtraDeliveries"
+        data-tooltip-type="BaseTooltip"
+        :data-tooltip-content="$t('warnings.PN')"
+      >
+        PN
+      </span>
+
+      <span>
+        <strong
+          data-tooltip-type="BaseTooltip"
+          :data-tooltip-content="getCategoryExplanation(timetable.trainCategoryCode)"
+          class="text--primary tooltip-help"
+        >
+          {{ timetable.trainCategoryCode }}
+        </strong>
+        <strong>&nbsp;{{ timetable.trainNo }}</strong>
+      </span>
+      &bull;
+      <strong
+        v-if="timetable.driverLevel !== null"
+        class="level-badge driver"
+        :style="calculateExpStyle(timetable.driverLevel, timetable.driverIsSupporter)"
+      >
+        {{ timetable.driverLevel < 2 ? 'L' : `${timetable.driverLevel}` }}
+      </strong>
+
+      <router-link
+        v-if="apiStore.donatorsData.includes(timetable.driverName)"
+        class="text--donator"
+        data-tooltip-type="DonatorTooltip"
+        :data-tooltip-content="$t('donations.driver-message')"
+        :to="`/journal/timetables?search-driver=${timetable.driverName}`"
+      >
+        <strong>{{ timetable.driverName }}</strong>
+      </router-link>
+
+      <router-link v-else :to="`/journal/timetables?search-driver=${timetable.driverName}`">
+        <strong>{{ timetable.driverName }}</strong>
+      </router-link>
+    </span>
+
+    <span class="general-time">
+      <b class="info-date"
+        >{{
+          new Date(timetable.createdAt).getTime() - new Date(timetable.beginDate).getTime() < 0
+            ? localeDateTime(timetable.createdAt, $i18n.locale)
+            : localeDateTime(timetable.beginDate, $i18n.locale)
+        }}
+      </b>
+
+      <b
+        class="info-badge"
+        :class="{
+          fulfilled: timetable.fulfilled,
+          terminated: timetable.terminated && !timetable.fulfilled,
+          active: !timetable.terminated
+        }"
+      >
+        {{
+          !timetable.terminated
+            ? $t('journal.timetable-active')
+            : timetable.fulfilled
+              ? $t('journal.timetable-fulfilled')
+              : `${$t('journal.timetable-abandoned')} ${localeTime(timetable.endDate, $i18n.locale)}`
+        }}
+      </b>
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue';
+
+import { API } from '../../../typings/api';
+import dateMixin from '../../../mixins/dateMixin';
+import styleMixin from '../../../mixins/styleMixin';
+import { useApiStore } from '../../../store/apiStore';
+import trainCategoryMixin from '../../../mixins/trainCategoryMixin';
+
+export default defineComponent({
+  mixins: [dateMixin, styleMixin, trainCategoryMixin],
+
+  data() {
+    return {
+      apiStore: useApiStore()
+    };
+  },
+
+  props: {
+    timetable: {
+      type: Object as PropType<API.TimetableHistory.Data>,
+      required: true
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../../styles/responsive';
+@import '../../../styles/badge';
+
+.item-general {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+
+  gap: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.general-train {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.25em;
+
+  cursor: pointer;
+}
+
+.general-time {
+  display: flex;
+  align-items: center;
+
+  gap: 0.5em;
+}
+
+.badges {
+  display: flex;
+  gap: 0.25em;
+}
+
+.info-badge {
+  padding: 0.05em 0.35em;
+  color: black;
+
+  &.terminated {
+    background-color: salmon;
+  }
+
+  &.fulfilled {
+    background-color: lightgreen;
+  }
+
+  &.active {
+    background-color: lightblue;
+  }
+}
+
+.btn-timetable {
+  display: flex;
+  padding: 0.2em 0.5em;
+
+  img {
+    height: 1.25em;
+  }
+}
+
+@include smallScreen {
+  .item-general {
+    flex-direction: column;
+    justify-content: center;
+  }
+}
+</style>

src/components/JournalView/JournalTimetables/EntryStatus.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="item-status" style="margin: 0.5em 0">
+  <div class="entry-status" style="margin: 0.5em 0">
     <ProgressBar
       :progressPercent="~~((timetable.currentDistance / timetable.routeDistance) * 100)"
       :progressType="!timetable.fulfilled && timetable.terminated ? 'abandoned' : ''"
@@ -21,7 +21,7 @@
       >
     </span>
 
-    <span class="text--grayed" v-if="timetable.currentSceneryName">
+    <span class="entry-location" v-if="timetable.currentSceneryName">
       <b>
         {{ $t(`journal.${timetable.terminated ? 'last-seen-at' : 'currently-at'}`) }}
         {{ timetable.currentSceneryName.replace(/.[a-zA-Z0-9]+.sc/, '') }}
@@ -61,7 +61,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../../../styles/responsive.scss';
 
-.item-status {
+.entry-status {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -71,4 +71,9 @@ export default defineComponent({
     justify-content: center;
   }
 }
+
+.entry-location {
+  text-align: center;
+  color: #ccc;
+}
 </style>

src/components/JournalView/JournalTimetables/EntryStops.vue

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

src/components/JournalView/JournalTimetables/JournalDriverStats.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="journal-stats driver" v-if="store.driverStatsData">
+    <span>
+      <h3>
+        <i18n-t keypath="journal.driver-stats.title">
+          <template #name>
+            <span class="text--primary">{{ store.driverStatsName.toUpperCase() }}</span>
+          </template>
+        </i18n-t>
+      </h3>
+
+      <hr class="header-separator" />
+
+      <div class="info-stats">
+        <span class="badge stat-badge">
+          <span>{{ $t('journal.driver-stats.timetables') }}</span>
+          <span
+            >{{ store.driverStatsData._count.fulfilled }} /
+            {{ store.driverStatsData._count._all }}</span
+          >
+        </span>
+
+        <span class="badge stat-badge">
+          <span>{{ $t('journal.driver-stats.longest-timetable') }}</span>
+          <span> {{ store.driverStatsData._max.routeDistance.toFixed(2) }}km </span>
+        </span>
+
+        <span class="badge stat-badge">
+          <span>{{ $t('journal.driver-stats.avg-timetable') }}</span>
+          <span> {{ store.driverStatsData._avg.routeDistance.toFixed(2) }}km </span>
+        </span>
+
+        <span class="badge stat-badge">
+          <span>{{ $t('journal.driver-stats.distance') }}</span>
+          <span>
+            {{ store.driverStatsData._sum.currentDistance.toFixed(2) }} /
+            {{ store.driverStatsData._sum.routeDistance.toFixed(2) }}km
+          </span>
+        </span>
+
+        <span class="badge stat-badge">
+          <span>{{ $t('journal.driver-stats.stations') }}</span>
+          <span>
+            {{ store.driverStatsData._sum.confirmedStopsCount }} /
+            {{ store.driverStatsData._sum.allStopsCount }}
+          </span>
+        </span>
+      </div>
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useMainStore } from '../../../store/mainStore';
+import { Status } from '../../../typings/common';
+
+export default defineComponent({
+  name: 'journal-driver-stats',
+
+  data() {
+    return {
+      store: useMainStore(),
+      Status: Status
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../../styles/JournalStats.scss';
+</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,35 +1,40 @@
 <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>
-          <TimetableHistoryList :timetableHistory="timetableHistory" />
+      <transition-group name="list-anim" class="journal-list" tag="ul">
+        <JournalTimetableEntry
+          v-for="(timetableEntry, i) in timetableHistory"
+          :key="timetableEntry.id"
+          :timetableEntry="timetableEntry"
+          :onToggleShowExtraInfo="() => toggleExtraInfo(timetableEntry.id)"
+          :showExtraInfo="extraInfoIndexes.includes(timetableEntry.id)"
+        />
+      </transition-group>
 
-          <AddDataButton
+      <AddDataButton
-            :list="timetableHistory"
+        :list="timetableHistory"
-            :scrollDataLoaded="scrollDataLoaded"
+        :scrollDataLoaded="scrollDataLoaded"
-            :scrollNoMoreData="scrollNoMoreData"
+        :scrollNoMoreData="scrollNoMoreData"
-            @addHistoryData="addHistoryData"
+        @addHistoryData="addHistoryData"
-          />
+      />
-        </div>
+    </div>
-      </div>
-    </transition>
 
     <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>
@@ -41,13 +46,18 @@ import { defineComponent, PropType } from 'vue';
 
 import Loading from '../../Global/Loading.vue';
 import AddDataButton from '../../Global/AddDataButton.vue';
-import TimetableHistoryList from './TimetableHistoryList.vue';
+import JournalTimetableEntry from './JournalTimetableEntry.vue';
-import { useStore } from '../../../store/mainStore';
+
+import { useMainStore } from '../../../store/mainStore';
 import { Status } from '../../../typings/common';
 import { API } from '../../../typings/api';
 
 export default defineComponent({
-  components: { Loading, AddDataButton, TimetableHistoryList },
+  components: {
+    Loading,
+    AddDataButton,
+    JournalTimetableEntry
+  },
 
   props: {
     timetableHistory: {
@@ -71,8 +81,27 @@ export default defineComponent({
   data() {
     return {
       Status,
-      store: useStore()
+      store: useMainStore(),
+      extraInfoIndexes: [] as number[]
     };
+  },
+
+  watch: {
+    '$route.query': {
+      deep: true,
+      handler() {
+        this.extraInfoIndexes.length = 0;
+      }
+    }
+  },
+  
+  methods: {
+    toggleExtraInfo(id: number) {
+      const existingIdx = this.extraInfoIndexes.indexOf(id);
+
+      if (existingIdx != -1) this.extraInfoIndexes.splice(existingIdx, 1);
+      else this.extraInfoIndexes.push(id);
+    }
   }
 });
 </script>
@@ -80,4 +109,15 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../../../styles/JournalSection.scss';
 @import '../../../styles/animations.scss';
+
+@include smallScreen {
+  .journal_item-info {
+    text-align: center;
+  }
+
+  .item-route {
+    display: flex;
+    justify-content: center;
+  }
+}
 </style>

src/components/JournalView/JournalTimetables/TimetableExtra.vue

@@ -1,183 +0,0 @@
-<template>
-  <div class="item-extra" v-if="timetable.stockString && timetable.stockMass && showExtraInfo">
-    <hr />
-
-    <div class="stock-specs">
-      <span class="badge">
-        <span>{{ $t('journal.dispatcher-name') }}</span>
-        <span>{{ timetable.authorName }}</span>
-      </span>
-    </div>
-
-    <div class="stock-specs">
-      <span class="badge">
-        <span>{{ $t('journal.stock-max-speed') }}</span>
-        <span>{{ timetable.maxSpeed }}km/h</span>
-      </span>
-
-      <span class="badge">
-        <span>{{ $t('journal.stock-length') }}</span>
-        <span>
-          {{
-            currentHistoryIndex == 0
-              ? timetable.stockLength
-              : stockHistory[currentHistoryIndex].stockLength || timetable.stockLength
-          }}m
-        </span>
-      </span>
-
-      <span class="badge">
-        <span>{{ $t('journal.stock-mass') }}</span>
-        <span>
-          {{
-            Math.floor(
-              (currentHistoryIndex == 0
-                ? timetable.stockMass!
-                : stockHistory[currentHistoryIndex].stockMass || timetable.stockMass) / 1000
-            )
-          }}t
-        </span>
-      </span>
-    </div>
-
-    <!-- Historia zmian w składzie -->
-    <div class="stock-history" v-if="stockHistory.length > 1">
-      <button
-        v-for="(sh, i) in stockHistory"
-        :key="i"
-        class="btn--action"
-        :data-checked="i == currentHistoryIndex"
-        @click.stop="currentHistoryIndex = i"
-      >
-        {{ sh.updatedAt }}
-      </button>
-    </div>
-
-    <!-- <StockList :trainStockList="currentHistoryIndex == 0 ? timetable.stockString : stockHistory[currentHistoryIndex].stockString).split(';')" /> -->
-    <StockList
-      :trainStockList="
-        (currentHistoryIndex == 0
-          ? timetable.stockString
-          : stockHistory[currentHistoryIndex].stockString
-        ).split(';')
-      "
-    />
-
-    <!-- <ul class="stock-list">
-      <li
-        v-for="(stockName, i) in (currentHistoryIndex == 0 ? timetable.stockString : stockHistory[currentHistoryIndex].stockString).split(';')"
-        :key="i"
-      >
-        <div>{{ stockName.split(':')[0].split('_').splice(0, 2).join(' ') }} {{ stockName.split(':')[1] }}</div>
-        <TrainThumbnail :name="stockName" />
-      </li>
-    </ul> -->
-  </div>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent } from 'vue';
-import StockList from '../../Global/StockList.vue';
-import { API } from '../../../typings/api';
-
-export default defineComponent({
-  components: { StockList },
-  props: {
-    showExtraInfo: {
-      type: Boolean,
-      required: true
-    },
-    timetable: {
-      type: Object as PropType<API.TimetableHistory.Data>,
-      required: true
-    }
-  },
-  data() {
-    return {
-      currentHistoryIndex: 0
-    };
-  },
-  computed: {
-    stockHistory() {
-      return this.timetable.stockHistory
-        .slice()
-        .reverse()
-        .map((h) => {
-          const historyData = h.split('@');
-          return {
-            updatedAt: new Date(Number(historyData[0])).toLocaleTimeString(this.$i18n.locale, {
-              hour: '2-digit',
-              minute: '2-digit'
-            }),
-            stockString: historyData[1],
-            stockMass: Number(historyData[2]) || undefined,
-            stockLength: Number(historyData[3]) || undefined
-          };
-        });
-    }
-  },
-  methods: {
-    onImageError(e: Event) {
-      const imageEl = e.target as HTMLImageElement;
-      imageEl.src = '/images/icon-unknown.png';
-    }
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../../styles/variables.scss';
-@import '../../../styles/responsive.scss';
-@import '../../../styles/badge.scss';
-
-.item-extra {
-  margin-top: 0.5em;
-}
-
-.stock-history {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5em;
-  margin-top: 1em;
-
-  button[data-checked='true'] {
-    color: $accentCol;
-  }
-}
-
-.stock-specs {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5em;
-  margin-top: 0.5em;
-
-  .badge {
-    margin: 0;
-
-    span:last-child {
-      color: black;
-      background-color: $accentCol;
-    }
-  }
-
-  @include smallScreen() {
-    justify-content: center;
-  }
-}
-
-ul.stock-list {
-  display: flex;
-  align-items: flex-end;
-  overflow: auto;
-
-  padding-bottom: 0.5em;
-
-  li > div {
-    margin: 1em 0;
-
-    text-align: center;
-    color: #aaa;
-    font-size: 0.9em;
-  }
-}
-</style>

src/components/JournalView/JournalTimetables/TimetableGeneral.vue

@@ -1,137 +0,0 @@
-<template>
-  <div class="item-general">
-    <span
-      class="general-train"
-      tabindex="0"
-      @click.stop="showTimetable(timetable, $event.currentTarget)"
-      @keydown.enter="showTimetable(timetable, $event.currentTarget)"
-    >
-      <span class="text--grayed">#{{ timetable.id }}</span>
-
-      <span class="badges" v-if="timetable.skr || timetable.twr">
-        <span class="train-badge twr" v-if="timetable.twr" :title="$t('general.TWR')">TWR</span>
-        <span class="train-badge skr" v-if="timetable.skr" :title="$t('general.SKR')">SKR</span>
-      </span>
-
-      <span>
-        <strong class="text--primary">
-          {{ timetable.trainCategoryCode }}
-        </strong>
-        <strong>&nbsp;{{ timetable.trainNo }}</strong>
-      </span>
-      &bull;
-      <strong
-        v-if="timetable.driverLevel !== null"
-        class="level-badge driver"
-        :style="calculateExpStyle(timetable.driverLevel, timetable.driverIsSupporter)"
-      >
-        {{ timetable.driverLevel < 2 ? 'L' : `${timetable.driverLevel}` }}
-      </strong>
-
-      <strong>{{ timetable.driverName }}</strong>
-    </span>
-
-    <span class="general-time">
-      <b class="info-date"
-        >{{
-          new Date(timetable.createdAt).getTime() - new Date(timetable.beginDate).getTime() < 0
-            ? localeDateTime(timetable.createdAt, $i18n.locale)
-            : localeDateTime(timetable.beginDate, $i18n.locale)
-        }}
-      </b>
-
-      <b
-        class="info-badge"
-        :class="{
-          fulfilled: timetable.fulfilled,
-          terminated: timetable.terminated && !timetable.fulfilled,
-          active: !timetable.terminated
-        }"
-      >
-        {{
-          !timetable.terminated
-            ? $t('journal.timetable-active')
-            : timetable.fulfilled
-            ? $t('journal.timetable-fulfilled')
-            : `${$t('journal.timetable-abandoned')} ${localeTime(timetable.endDate, $i18n.locale)}`
-        }}
-      </b>
-    </span>
-  </div>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent } from 'vue';
-
-import dateMixin from '../../../mixins/dateMixin';
-import modalTrainMixin from '../../../mixins/modalTrainMixin';
-import styleMixin from '../../../mixins/styleMixin';
-import { API } from '../../../typings/api';
-
-export default defineComponent({
-  mixins: [dateMixin, modalTrainMixin, styleMixin],
-
-  props: {
-    timetable: {
-      type: Object as PropType<API.TimetableHistory.Data>,
-      required: true
-    }
-  },
-
-  methods: {
-    showTimetable(timetable: API.TimetableHistory.Data, target: EventTarget | null) {
-      if (timetable?.terminated) return;
-
-      this.selectModalTrain(timetable.driverName + timetable.trainNo.toString(), target);
-    }
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../../styles/responsive.scss';
-@import '../../../styles/badge.scss';
-
-.item-general {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-
-  gap: 0.5em;
-  margin-bottom: 0.5em;
-
-  @include smallScreen() {
-    justify-content: center;
-  }
-}
-
-.info-date {
-  margin-right: 0.5em;
-}
-
-.info-badge {
-  padding: 0.05em 0.35em;
-  color: black;
-
-  &.terminated {
-    background-color: salmon;
-  }
-
-  &.fulfilled {
-    background-color: lightgreen;
-  }
-
-  &.active {
-    background-color: lightblue;
-  }
-}
-
-.general-train {
-  cursor: pointer;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.25em;
-}
-</style>

src/components/JournalView/JournalTimetables/TimetableHistoryList.vue

@@ -1,101 +0,0 @@
-<template>
-  <ul class="journal-list">
-    <transition-group name="list-anim">
-      <li
-        v-for="{ timetable, showExtraInfo } in computedTimetableHistory"
-        class="journal_item"
-        :key="timetable.id"
-        @click="showExtraInfo.value = !showExtraInfo.value"
-      >
-        <div class="journal_item-info">
-          <!-- General -->
-          <TimetableGeneral :timetable="timetable" />
-          <!-- Route -->
-          <span class="item-route">
-            <b>{{ timetable.route.replace('|', ' - ') }}</b>
-          </span>
-
-          <hr />
-          <!-- Stops -->
-          <TimetableStops :timetable="timetable" :showExtraInfo="showExtraInfo.value" />
-          <!-- Status -->
-          <TimetableStatus :timetable="timetable" />
-
-          <button class="btn--option btn--show">
-            {{ $t('journal.stock-info') }}
-            <img
-              :src="`/images/icon-arrow-${showExtraInfo.value ? 'asc' : 'desc'}.svg`"
-              alt="Arrow icon"
-            />
-          </button>
-          <!-- Extra -->
-          <TimetableExtra :timetable="timetable" :showExtraInfo="showExtraInfo.value" />
-        </div>
-      </li>
-    </transition-group>
-  </ul>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent, ref } from 'vue';
-
-import TimetableGeneral from './TimetableGeneral.vue';
-import TimetableStops from './TimetableStops.vue';
-import TimetableStatus from './TimetableStatus.vue';
-import TimetableExtra from './TimetableExtra.vue';
-import { API } from '../../../typings/api';
-
-export default defineComponent({
-  props: {
-    timetableHistory: {
-      type: Array as PropType<API.TimetableHistory.Response>,
-      required: true
-    }
-  },
-  computed: {
-    computedTimetableHistory() {
-      return this.timetableHistory.map((timetable) => ({
-        timetable,
-        showExtraInfo: ref(false)
-      }));
-    }
-  },
-  methods: {},
-  components: { TimetableGeneral, TimetableStops, TimetableStatus, TimetableExtra }
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../../styles/variables.scss';
-@import '../../../styles/responsive.scss';
-@import '../../../styles/JournalSection.scss';
-
-.btn--show {
-  display: flex;
-  font-weight: bold;
-  padding: 0.2em 0.45em;
-
-  img {
-    height: 1.3em;
-  }
-}
-
-hr {
-  margin: 0.25em 0;
-}
-
-@include smallScreen {
-  .journal_item-info {
-    text-align: center;
-  }
-
-  .item-route {
-    display: flex;
-    justify-content: center;
-  }
-
-  .btn--show {
-    margin: 1em auto 0 auto;
-  }
-}
-</style>

src/components/JournalView/JournalTimetables/TimetableStops.vue

@@ -1,112 +0,0 @@
-<template>
-  <div class="stop-list" v-if="showExtraInfo == true">
-    <span
-      v-for="(stop, i) in timetableStops.filter((_, i) =>
-        !showExtraInfo ? i == 0 || i == timetableStops.length - 1 : true
-      )"
-      class="stop-list-item"
-      :key="stop.stopName"
-      :data-confirmed="stop.confirmed"
-    >
-      <span v-if="i > 0">
-        &gt;
-        <span v-if="!showExtraInfo && i == 1 && timetableStops.length > 2">
-          ... (+{{ timetableStops.length - 2 }}) &gt;
-        </span>
-      </span>
-
-      <span class="stop-name">{{ stop.stopName }}</span>
-      <span v-html="stop.html"></span>
-    </span>
-  </div>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent } from 'vue';
-import dateMixin from '../../../mixins/dateMixin';
-import { API } from '../../../typings/api';
-
-export default defineComponent({
-  mixins: [dateMixin],
-
-  props: {
-    showExtraInfo: {
-      type: Boolean,
-      required: true
-    },
-
-    timetable: {
-      type: Object as PropType<API.TimetableHistory.Data>,
-      required: true
-    }
-  },
-
-  computed: {
-    timetableStops() {
-      const timetable = this.timetable;
-
-      const stopNames = timetable.sceneriesString.split('%');
-
-      const beginDateHTML = ` (o. ${
-        timetable.beginDate != timetable.scheduledBeginDate
-          ? `<s class="text--grayed">${this.localeTime(timetable.beginDate, this.$i18n.locale)}</s>`
-          : ''
-      } <span>${this.localeTime(timetable.scheduledBeginDate, this.$i18n.locale)}</span>)`;
-
-      const endDateHTML = ` (p. ${
-        timetable.endDate != timetable.scheduledEndDate && timetable.fulfilled
-          ? `<s class="text--grayed">${this.localeTime(timetable.endDate, this.$i18n.locale)}</s>`
-          : ''
-      } <span>${this.localeTime(timetable.scheduledEndDate, this.$i18n.locale)}</span>)`;
-
-      return stopNames.map((stopName, i) => {
-        const confirmed = i < timetable.confirmedStopsCount;
-        if (i == 0) return { stopName, html: beginDateHTML, confirmed };
-        if (i == stopNames.length - 1) return { stopName, html: endDateHTML, confirmed };
-
-        const departureDateScheduled = this.stringToDate(
-          timetable.checkpointDeparturesScheduled?.at(i)
-        );
-        const departureDateReal = this.stringToDate(timetable.checkpointDepartures?.at(i));
-        const arrivalDateScheduled = this.stringToDate(
-          timetable.checkpointArrivalsScheduled?.at(i)
-        );
-        const arrivalDateReal = this.stringToDate(timetable.checkpointArrivals?.at(i));
-        const arrivalHTML =
-          (arrivalDateReal &&
-          arrivalDateScheduled &&
-          arrivalDateReal?.getTime() != arrivalDateScheduled?.getTime()
-            ? `<s class="text--grayed">${this.parseDateToTimeString(arrivalDateScheduled)}</s> `
-            : '') + this.parseDateToTimeString(arrivalDateReal || arrivalDateScheduled);
-        const departureHTML =
-          (departureDateReal &&
-          departureDateScheduled &&
-          departureDateReal?.getTime() != departureDateScheduled?.getTime()
-            ? `<s class="text--grayed">${this.parseDateToTimeString(departureDateScheduled)}</s> `
-            : '') + this.parseDateToTimeString(departureDateReal || departureDateScheduled);
-        let html = `${arrivalHTML}${departureHTML ? ` / ${departureHTML}` : ''}`;
-        if (html) html = ` (${html})`;
-        return { stopName, html, confirmed };
-      });
-    }
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-.stop-list {
-  word-wrap: break-word;
-  gap: 0.25em;
-  font-size: 0.95em;
-
-  color: #adadad;
-
-  &-item[data-confirmed='true'] {
-    color: lightgreen;
-
-    .stop-name {
-      font-weight: bold;
-    }
-  }
-}
-</style>

src/components/JournalView/typings.ts

@@ -1,49 +1,83 @@
 export namespace Journal {
-  export type DispatcherSearcher = {
+  export type DispatcherSearchKey = 'search-dispatcher' | 'search-station' | 'search-date';
-    [key in 'search-dispatcher' | 'search-station' | 'search-date']: string;
-  };
-
-  export interface DispatcherSorter {
-    id: 'timestampFrom' | 'duration';
-    dir: -1 | 1;
-  }
 
   export type TimetableSearchKey =
     | 'search-driver'
     | 'search-train'
     | 'search-date'
     | 'search-dispatcher'
-    | 'search-issuedFrom';
+    | 'search-issuedFrom'
+    | 'search-terminatingAt'
+    | 'search-via';
 
   export type TimetableSearchType = {
     [key in TimetableSearchKey]: string;
   };
 
+  export type DispatcherSearchType = {
+    [key in DispatcherSearchKey]: string;
+  };
+
+  export type TimetableSorterKey = 'timetableId' | 'beginDate' | 'distance' | 'total-stops';
+  export type DispatcherSorterKey = 'timestampFrom' | 'currentDuration';
+
+  export interface DispatcherSorter {
+    id: DispatcherSorterKey;
+    dir: -1 | 1;
+  }
+
+  export interface TimetableSorter {
+    id: TimetableSorterKey;
+    dir: 'asc' | 'desc';
+  }
+
   export const enum TimetableFilterId {
+    ALL_STATUSES = 'all-statuses',
     ACTIVE = 'active',
     FULFILLED = 'fulfilled',
     ABANDONED = 'abandoned',
-    ALL = 'all',
+    ALL_SPECIALS = 'all-specials',
     TWR = 'twr',
     SKR = 'skr',
+    PN = 'pn',
+    TN = 'tn',
     TWR_SKR = 'twr-skr'
   }
 
   export enum FilterSection {
     TIMETABLE_STATUS = 'timetable-status',
-    TWRSKR = 'twrskr'
+    SPECIAL = 'special'
   }
 
   export interface TimetableFilter {
     id: TimetableFilterId;
     filterSection: string;
     isActive: boolean;
+    default: boolean;
   }
 
-  export type TimetableSorterKey = 'timetableId' | 'beginDate' | 'distance' | 'total-stops';
+  export enum StatsTab {
+    DRIVER_STATS = 'journal-driver-stats',
+    DISPATCHER_STATS = 'journal-dispatcher-stats',
+    DAILY_STATS = 'journal-daily-stats'
+  }
 
-  export interface TimetableSorter {
+  export interface StatsButton {
-    id: TimetableSorterKey;
+    tab: StatsTab;
-    dir: 'asc' | 'desc';
+    localeKey: string;
+    iconName: string;
+    disabled: boolean;
+  }
+
+  export interface TimetableStopDetails {
+    stopName: string;
+    arrivalTimestamp: number;
+    scheduledArrivalTimestamp: number;
+    departureTimestamp: number;
+    scheduledDepartureTimestamp: number;
+    stopTime: number;
+    stopType: string;
+    isConfirmed: boolean;
   }
 }
+

src/components/SceneryView/SceneryDispatchersHistory.vue

@@ -1,29 +1,18 @@
 <template>
-  <section class="scenery-table-section">
+  <div class="scenery-dispatchers-history">
-    <Loading v-if="dataStatus != DataStatus.Loaded && historyList.length == 0" />
+    <div class="history-wrapper">
+      <Loading v-if="dataStatus != DataStatus.Loaded && historyList.length == 0" />
 
-    <div class="no-history" v-else-if="historyList.length == 0">
+      <div v-else-if="historyList.length == 0" class="no-history">
-      {{ $t('scenery.history-list-empty') }}
+        {{ $t('scenery.history-list-empty') }}
-    </div>
+      </div>
 
-    <table class="scenery-history-table" v-else>
+      <div v-else class="journal-list">
-      <thead>
+        <div v-for="historyItem in historyList" :key="historyItem.id">
-        <th>{{ $t('scenery.dispatchers-history-hash') }}</th>
+          <span>
-        <th>{{ $t('scenery.dispatchers-history-dispatcher') }}</th>
+            <span class="text--grayed" style="margin-right: 10px">
-        <th>{{ $t('scenery.dispatchers-history-level') }}</th>
+              #{{ historyItem.stationHash }}
-        <th>{{ $t('scenery.dispatchers-history-rate') }}</th>
+            </span>
-        <th>{{ $t('scenery.dispatchers-history-date') }}</th>
-      </thead>
-
-      <tbody>
-        <tr v-for="historyItem in historyList" :key="historyItem.id">
-          <td>#{{ historyItem.stationHash }}</td>
-          <td>
-            <router-link :to="`/journal/dispatchers?dispatcherName=${historyItem.dispatcherName}`">
-              <b>{{ historyItem.dispatcherName }}</b>
-            </router-link>
-          </td>
-          <td>
             <b
               v-if="historyItem.dispatcherLevel !== null"
               class="level-badge dispatcher"
@@ -33,63 +22,74 @@
             >
               {{ historyItem.dispatcherLevel >= 2 ? historyItem.dispatcherLevel : 'L' }}
             </b>
-          </td>
+            <b style="margin-left: 5px">
-          <td class="text--primary">
+              <router-link
-            <b>{{ historyItem.dispatcherRate }}</b>
+                :to="`/journal/dispatchers?search-dispatcher=${historyItem.dispatcherName}`"
-          </td>
+              >
-          <td style="min-width: 300px">
+                {{ historyItem.dispatcherName }}
-            <div v-if="historyItem.timestampTo">
+              </router-link>
+            </b>
+
+            <div>
+              <span>
+                {{ $t('scenery.dispatcher-rate') }}
+                <b class="text--primary"> {{ historyItem.dispatcherRate }}</b>
+              </span>
+              |
+              <span>
+                {{ $t('scenery.dispatcher-status-changes') }}
+                <b class="text--primary">{{ historyItem.statusHistory.length }}</b>
+              </span>
+            </div>
+          </span>
+
+          <span>
+            <span v-if="historyItem.timestampTo">
               <b>{{ $d(historyItem.timestampFrom) }}</b>
 
               {{ timestampToString(historyItem.timestampFrom) }}
               - {{ timestampToString(historyItem.timestampTo) }} ({{
                 calculateDuration(historyItem.currentDuration)
               }})
-            </div>
+            </span>
 
-            <div class="dispatcher-online" v-else>
+            <span class="dispatcher-online" v-else>
               {{ $t('journal.online-since') }}
               <b>{{ timestampToString(historyItem.timestampFrom) }}</b>
               ({{ calculateDuration(historyItem.currentDuration) }})
-            </div>
+            </span>
-          </td>
+          </span>
-        </tr>
+        </div>
-      </tbody>
+      </div>
-    </table>
+    </div>
-  </section>
 
-  <div class="bottom-info">
+    <div class="bottom-info">
-    <button class="btn btn--option" v-if="historyList.length > 0" @click="navigateToHistory">
+      <button class="btn btn--option" v-if="historyList.length > 0" @click="navigateToHistory">
-      {{ $t('scenery.bottom-info') }}
+        {{ $t('scenery.bottom-info') }}
-    </button>
+      </button>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import axios from 'axios';
 import { defineComponent, PropType } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
-import Station from '../../scripts/interfaces/Station';
-import { URLs } from '../../scripts/utils/apiURLs';
 import Loading from '../Global/Loading.vue';
 import styleMixin from '../../mixins/styleMixin';
-import listObserverMixin from '../../mixins/listObserverMixin';
-import { OnlineScenery } from '../../store/typings';
 import { API } from '../../typings/api';
-import { Status } from '../../typings/common';
+import { ActiveScenery, Station, Status } from '../../typings/common';
+import { useApiStore } from '../../store/apiStore';
 
 export default defineComponent({
   name: 'SceneryDispatchersHistory',
-  mixins: [dateMixin, styleMixin, listObserverMixin],
+  mixins: [dateMixin, styleMixin],
   components: { Loading },
   props: {
     station: {
-      type: Object as PropType<Station>,
+      type: Object as PropType<Station>
-      required: true
     },
     onlineScenery: {
-      type: Object as PropType<OnlineScenery>,
+      type: Object as PropType<ActiveScenery>
-      required: false
     }
   },
 
@@ -97,7 +97,8 @@ export default defineComponent({
     return {
       historyList: [] as API.DispatcherHistory.Response,
       dataStatus: Status.Data.Loading,
-      DataStatus: Status.Data
+      DataStatus: Status.Data,
+      apiStore: useApiStore()
     };
   },
 
@@ -113,12 +114,20 @@ export default defineComponent({
       countFrom = 0,
       countLimit = 30
     ): Promise<API.DispatcherHistory.Response | null> {
+      if (!this.station && !this.onlineScenery) {
+        this.dataStatus = Status.Data.Loaded;
+        return null;
+      }
+
       try {
         this.dataStatus = Status.Data.Loading;
 
-        const requestString = `${URLs.stacjownikAPI}/api/getDispatchers?stationName=${this.station.name}&countFrom=${countFrom}&countLimit=${countLimit}`;
+        const requestString = `api/getDispatchers?stationName=${
+          this.station?.name || this.onlineScenery?.name
+        }&countFrom=${countFrom}&countLimit=${countLimit}`;
+
         const historyAPIData: API.DispatcherHistory.Response = await (
-          await axios.get(requestString)
+          await this.apiStore.client!.get(requestString)
         ).data;
 
         this.dataStatus = Status.Data.Loaded;
@@ -130,7 +139,9 @@ export default defineComponent({
       }
     },
     navigateToHistory() {
-      this.$router.push(`/journal/dispatchers?sceneryName=${this.station.name}`);
+      this.$router.push(
+        `/journal/dispatchers?search-station=${this.station?.name || this.onlineScenery?.name}`
+      );
     }
   }
 });
@@ -140,8 +151,43 @@ export default defineComponent({
 @import '../../styles/responsive.scss';
 @import '../../styles/sceneryViewTables.scss';
 
+.scenery-dispatchers-history {
+  height: 100%;
+  overflow: auto;
+
+  display: grid;
+  gap: 0.5em;
+  grid-template-rows: auto 40px;
+}
+
+.history-wrapper {
+  position: relative;
+  overflow: auto;
+}
+
+.journal-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  text-align: left;
+}
+
+.journal-list > div {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+
+  gap: 0.5em;
+  padding: 0.5em;
+  background-color: #2b2b2b;
+  line-height: 1.75em;
+}
+
 .level-badge {
-  margin: 0 auto;
+  text-align: center;
+  display: inline-block;
+  line-height: 1.6em;
 }
 
 .dispatcher-online {
@@ -149,13 +195,10 @@ export default defineComponent({
 }
 
 @include smallScreen {
-  .history-list {
+  .journal-list > div {
-    font-size: 1.1em;
-  }
-  .list-item {
-    align-items: center;
     flex-direction: column;
+    justify-content: center;
+    text-align: center;
   }
 }
 </style>
-../../store/storeTypes

src/components/SceneryView/SceneryHeader.vue

@@ -1,11 +1,11 @@
 <template>
   <section class="info-header">
-    <a class="scenery-name" :href="station.generalInfo?.url" target="_blank">
+    <a class="scenery-name" :href="station?.generalInfo?.url" target="_blank">
-      {{ station.name }}
+      {{ stationName.replace(/_/g, ' ') }}
     </a>
 
-    <div class="scenery-abbrev">
+    <div class="scenery-abbrev" v-if="station?.generalInfo?.abbr">
-      {{ $t('scenery.abbrev') }} <b>{{ station.generalInfo?.abbr }}</b>
+      {{ $t('scenery.abbrev') }} <b>{{ station.generalInfo.abbr }}</b>
     </div>
 
     <div class="scenery-hash" v-if="onlineScenery?.hash">#{{ onlineScenery.hash }}</div>
@@ -14,19 +14,21 @@
 
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
-import Station from '../../scripts/interfaces/Station';
+import { ActiveScenery, Station } from '../../typings/common';
-import { OnlineScenery } from '../../store/typings';
 
 export default defineComponent({
   props: {
     station: {
-      type: Object as PropType<Station>,
+      type: Object as PropType<Station>
+    },
+
+    stationName: {
+      type: String,
       required: true
     },
 
     onlineScenery: {
-      type: Object as PropType<OnlineScenery>,
+      type: Object as PropType<ActiveScenery>
-      required: false
     }
   }
 });
@@ -58,4 +60,3 @@ export default defineComponent({
   font-size: 1.2em;
 }
 </style>
-../../store/storeTypes

src/components/SceneryView/SceneryInfo.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="scenery-info">
     <section>
-      <div class="scenery-info-general" v-if="station.generalInfo">
+      <div class="scenery-info-general">
         <SceneryInfoIcons :station="station" />
 
-        <div class="scenery-general-list">
+        <div class="scenery-general-list" v-if="station?.generalInfo">
           <span>
             <b>{{ $t('availability.title') }}:</b>
             {{ $t(`availability.${station.generalInfo.availability}`) }}
@@ -46,11 +46,11 @@
           </span>
         </div>
 
-        <SceneryInfoRoutes :station="station" />
+        <SceneryInfoRoutes v-if="station" :station="station" />
 
         <div
           class="scenery-authors"
-          v-if="station.generalInfo.authors && station.generalInfo.authors.length > 0"
+          v-if="station?.generalInfo?.authors && station.generalInfo.authors.length > 0"
         >
           <b>
             {{
@@ -72,7 +72,7 @@
 
       <div class="info-lists">
         <!-- user list -->
-        <SceneryInfoUserList :onlineScenery="onlineScenery" />
+        <SceneryInfoUserList :onlineScenery="onlineScenery" :station="station" />
 
         <!-- spawn list -->
         <SceneryInfoSpawnList :onlineScenery="onlineScenery" />
@@ -89,8 +89,7 @@ import SceneryInfoIcons from './SceneryInfo/SceneryInfoIcons.vue';
 import SceneryInfoUserList from './SceneryInfo/SceneryInfoUserList.vue';
 import SceneryInfoSpawnList from './SceneryInfo/SceneryInfoSpawnList.vue';
 import SceneryInfoRoutes from './SceneryInfo/SceneryInfoRoutes.vue';
-import Station from '../../scripts/interfaces/Station';
+import { ActiveScenery, Station } from '../../typings/common';
-import { OnlineScenery } from '../../store/typings';
 
 export default defineComponent({
   components: {
@@ -102,13 +101,11 @@ export default defineComponent({
   },
   props: {
     station: {
-      type: Object as PropType<Station>,
+      type: Object as PropType<Station>
-      required: true
     },
 
     onlineScenery: {
-      type: Object as PropType<OnlineScenery>,
+      type: Object as PropType<ActiveScenery>
-      required: false
     }
   }
 });
@@ -127,11 +124,6 @@ h3.section-header {
   align-items: center;
 
   font-size: 1.2em;
-
-  img {
-    width: 1.1em;
-    margin-left: 0.5em;
-  }
 }
 
 .info-lists {

src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue

@@ -1,31 +1,45 @@
 <template>
   <section class="info-dispatcher">
-    <div class="dispatcher" v-if="onlineScenery">
+    <div class="info-top" v-if="onlineScenery && onlineScenery.dispatcherExp != -1">
       <span
-        class="dispatcher_level"
+        class="dispatcher-level"
         :style="calculateExpStyle(onlineScenery.dispatcherExp, onlineScenery.dispatcherIsSupporter)"
       >
         {{ onlineScenery.dispatcherExp > 1 ? onlineScenery.dispatcherExp : 'L' }}
       </span>
 
       <router-link
-        class="dispatcher_name"
+        class="dispatcher-name"
-        :to="`/journal/dispatchers?dispatcherName=${onlineScenery.dispatcherName}`"
+        :to="`/journal/dispatchers?search-dispatcher=${onlineScenery.dispatcherName}`"
       >
-        {{ onlineScenery.dispatcherName }}
+        <span
+          class="text--donator"
+          v-if="apiStore.donatorsData.includes(onlineScenery.dispatcherName)"
+          :title="$t('donations.dispatcher-message')"
+        >
+          {{ onlineScenery.dispatcherName }}
+        </span>
+        <span v-else>{{ onlineScenery.dispatcherName }}</span>
       </router-link>
+    </div>
 
-      <span class="dispatcher_likes text--primary">
+    <div class="info-bottom">
+      <span
+        class="dispatcher-likes text--primary"
+        v-if="onlineScenery && onlineScenery.dispatcherExp != -1"
+      >
         <img src="/images/icon-like.svg" alt="Likes count icon" />
         <span>{{ onlineScenery?.dispatcherRate || '0' }}</span>
       </span>
-    </div>
 
-    <StationStatusBadge
+      <span class="dispatcher-badge">
-      :isOnline="onlineScenery ? true : false"
+        <StationStatusBadge
-      :dispatcherStatus="onlineScenery?.dispatcherStatus"
+          :isOnline="onlineScenery ? true : false"
-      :dispatcherTimestamp="onlineScenery?.dispatcherTimestamp"
+          :dispatcherStatus="onlineScenery?.dispatcherStatus"
-    />
+          :dispatcherTimestamp="onlineScenery?.dispatcherTimestamp"
+        />
+      </span>
+    </div>
   </section>
 </template>
 
@@ -35,13 +49,21 @@ import dateMixin from '../../../mixins/dateMixin';
 import routerMixin from '../../../mixins/routerMixin';
 import styleMixin from '../../../mixins/styleMixin';
 import StationStatusBadge from '../../Global/StationStatusBadge.vue';
-import { OnlineScenery } from '../../../store/typings';
+import { ActiveScenery } from '../../../typings/common';
+import { useApiStore } from '../../../store/apiStore';
 
 export default defineComponent({
   mixins: [styleMixin, dateMixin, routerMixin],
+
+  data() {
+    return {
+      apiStore: useApiStore()
+    };
+  },
+
   props: {
     onlineScenery: {
-      type: Object as PropType<OnlineScenery>,
+      type: Object as PropType<ActiveScenery>,
       required: false
     }
   },
@@ -51,45 +73,46 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .info-dispatcher {
-  display: flex;
+  font-size: 1.8em;
-  align-items: center;
+}
-  justify-content: center;
 
-  flex-wrap: wrap;
+.info-top {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5em;
+}
+
+.info-bottom {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   gap: 0.5em;
 
-  .dispatcher {
+  margin-top: 0.5em;
-    font-size: 2em;
+}
 
-    &_level {
+.dispatcher-level {
-      display: inline-block;
+  background: firebrick;
-      margin-right: 0.3em;
-      background: firebrick;
 
-      border-radius: 0.1em;
+  border-radius: 0.1em;
 
-      width: 1.5em;
+  width: 1.5em;
-      height: 1.5em;
+  height: 1.5em;
-      line-height: 1.5em;
+  line-height: 1.5em;
-      font-weight: bold;
+  font-weight: bold;
-    }
+}
 
-    &_name {
+.dispatcher-likes {
-      cursor: pointer;
+  display: flex;
-      margin-right: 0.25em;
+  gap: 0.25em;
-    }
 
-    &_likes {
+  img {
-      img {
+    width: 1em;
-        height: 0.7em;
-        margin: 0 0.25em;
-      }
-    }
-  }
-
-  .status-badge {
-    font-size: 1.25em;
-    margin: 0.5em 0.25em;
   }
 }
+
+.dispatcher-badge {
+  font-size: 0.7em;
+}
 </style>