Merge pull request #85 from Spythere/development

Wersja 1.23.1

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "stacjownik",
-  "version": "1.19.4",
+  "version": "1.20.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "stacjownik",
-      "version": "1.19.4",
+      "version": "1.20.3",
       "dependencies": {
         "core-js": "^3.32.2",
         "dotenv": "^16.3.1",
@@ -14,6 +14,7 @@
         "howler": "^2.2.4",
         "pinia": "^2.1.6",
         "sass": "^1.67.0",
+        "socket.io-client": "^4.7.4",
         "vue": "^3.3.4",
         "vue-i18n": "^9.4.1",
         "vue-router": "^4.2.4"
@@ -2840,6 +2841,11 @@
       "integrity": "sha512-6i/8UoL0P5y4leBIGzvkZdS85RDMG9y1ihZzmTZQ5LdHUYmZ7pKFoj8X0236s3lusPs1Fa5HTQUpwI+UfTcmeA==",
       "dev": true
     },
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz",
+      "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg=="
+    },
     "node_modules/@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
@@ -4156,7 +4162,6 @@
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
       "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "2.1.2"
@@ -4399,6 +4404,26 @@
         "once": "^1.4.0"
       }
     },
+    "node_modules/engine.io-client": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.5.3.tgz",
+      "integrity": "sha512-9Z0qLB0NIisTRt1DZ/8U2k12RJn8yls/nXMZLn+/N8hANT3TcYjKFKcwbw5zFQiN4NTde3TSY9zb79e1ij6j9Q==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.11.0",
+        "xmlhttprequest-ssl": "~2.0.0"
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.1.tgz",
+      "integrity": "sha512-9JktcM3u18nU9N2Lz3bWeBgxVgOKpw7yhRaoxQA3FUDZzzw+9WlA6p4G4u0RixNkg14fH7EfEc/RhpurtiROTQ==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.20.5",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.5.tgz",
@@ -5061,9 +5086,9 @@
       "dev": true
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.2",
+      "version": "1.15.5",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
       "dev": true,
       "funding": [
         {
@@ -5071,7 +5096,6 @@
           "url": "https://github.com/sponsors/RubenVerborgh"
         }
       ],
-      "license": "MIT",
       "engines": {
         "node": ">=4.0"
       },
@@ -6312,7 +6336,6 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/muggle-string": {
@@ -7538,6 +7561,32 @@
         "node": ">=8"
       }
     },
+    "node_modules/socket.io-client": {
+      "version": "4.7.4",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.7.4.tgz",
+      "integrity": "sha512-wh+OkeF0rAVCrABWQBaEjLfb7DVPotMbu0cgWgyR0v6eA4EoVnAwcIeIbcdTE3GT/H3kbdLl7OoH2+asoDRIIg==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.5.2",
+        "socket.io-parser": "~4.2.4"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+      "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.8.0-beta.0",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz",
@@ -8152,9 +8201,9 @@
       "dev": true
     },
     "node_modules/vite": {
-      "version": "4.5.1",
+      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz",
-      "integrity": "sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==",
+      "integrity": "sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.18.10",
@@ -8727,6 +8776,26 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/ws": {
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
+      "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/xml-name-validator": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
@@ -8736,6 +8805,14 @@
         "node": ">=12"
       }
     },
+    "node_modules/xmlhttprequest-ssl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
+      "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
@@ -10722,6 +10799,11 @@
       "integrity": "sha512-6i/8UoL0P5y4leBIGzvkZdS85RDMG9y1ihZzmTZQ5LdHUYmZ7pKFoj8X0236s3lusPs1Fa5HTQUpwI+UfTcmeA==",
       "dev": true
     },
+    "@socket.io/component-emitter": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz",
+      "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg=="
+    },
     "@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
@@ -11640,7 +11722,6 @@
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
       "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-      "dev": true,
       "requires": {
         "ms": "2.1.2"
       }
@@ -11801,6 +11882,23 @@
         "once": "^1.4.0"
       }
     },
+    "engine.io-client": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.5.3.tgz",
+      "integrity": "sha512-9Z0qLB0NIisTRt1DZ/8U2k12RJn8yls/nXMZLn+/N8hANT3TcYjKFKcwbw5zFQiN4NTde3TSY9zb79e1ij6j9Q==",
+      "requires": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.11.0",
+        "xmlhttprequest-ssl": "~2.0.0"
+      }
+    },
+    "engine.io-parser": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.1.tgz",
+      "integrity": "sha512-9JktcM3u18nU9N2Lz3bWeBgxVgOKpw7yhRaoxQA3FUDZzzw+9WlA6p4G4u0RixNkg14fH7EfEc/RhpurtiROTQ=="
+    },
     "es-abstract": {
       "version": "1.20.5",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.5.tgz",
@@ -12286,9 +12384,9 @@
       "dev": true
     },
     "follow-redirects": {
-      "version": "1.15.2",
+      "version": "1.15.5",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
       "dev": true
     },
     "form-data": {
@@ -13127,8 +13225,7 @@
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-      "dev": true
     },
     "muggle-string": {
       "version": "0.3.1",
@@ -13945,6 +14042,26 @@
       "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
       "dev": true
     },
+    "socket.io-client": {
+      "version": "4.7.4",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.7.4.tgz",
+      "integrity": "sha512-wh+OkeF0rAVCrABWQBaEjLfb7DVPotMbu0cgWgyR0v6eA4EoVnAwcIeIbcdTE3GT/H3kbdLl7OoH2+asoDRIIg==",
+      "requires": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.5.2",
+        "socket.io-parser": "~4.2.4"
+      }
+    },
+    "socket.io-parser": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+      "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
+      "requires": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1"
+      }
+    },
     "source-map": {
       "version": "0.8.0-beta.0",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz",
@@ -14377,9 +14494,9 @@
       "dev": true
     },
     "vite": {
-      "version": "4.5.1",
+      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz",
-      "integrity": "sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==",
+      "integrity": "sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==",
       "dev": true,
       "requires": {
         "esbuild": "^0.18.10",
@@ -14776,12 +14893,23 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "dev": true
     },
+    "ws": {
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
+      "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
+      "requires": {}
+    },
     "xml-name-validator": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
       "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
       "dev": true
     },
+    "xmlhttprequest-ssl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
+      "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A=="
+    },
     "y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stacjownik",
-  "version": "1.20.2",
+  "version": "1.23.1",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -18,6 +18,7 @@
     "howler": "^2.2.4",
     "pinia": "^2.1.6",
     "sass": "^1.67.0",
+    "socket.io-client": "^4.7.4",
     "vue": "^3.3.4",
     "vue-i18n": "^9.4.1",
     "vue-router": "^4.2.4"

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>

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,8 +1,10 @@
 <template>
-  <div class="app_container">
+  <div class="app_container" v-cloak>
+    <PopUp />
+
     <transition name="modal-anim">
       <keep-alive>
-        <TrainModal v-if="store.chosenModalTrainId" />
+        <TrainModal />
       </keep-alive>
     </transition>
 
@@ -32,32 +34,37 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, watch } from 'vue';
+import { defineComponent } from 'vue';
 import axios from 'axios';
-import packageInfo from '.././package.json';
+import { version } from '.././package.json';
-
-import Clock from './components/App/Clock.vue';
 
 import { useMainStore } from './store/mainStore';
+import popupMixin from './mixins/popupMixin';
 
+import Clock from './components/App/Clock.vue';
 import StatusIndicator from './components/App/StatusIndicator.vue';
 import AppHeader from './components/App/AppHeader.vue';
 import TrainModal from './components/TrainsView/TrainModal.vue';
-
 import StorageManager from './managers/storageManager';
+import PopUp from './components/PopUp/PopUp.vue';
 import { useApiStore } from './store/apiStore';
 import { Status } from './typings/common';
 
+const STORAGE_VERSION_KEY = 'app_version';
+
 export default defineComponent({
   components: {
     Clock,
     StatusIndicator,
     AppHeader,
-    TrainModal
+    TrainModal,
+    PopUp
   },
 
+  mixins: [popupMixin],
+
   data: () => ({
-    VERSION: packageInfo.version,
+    VERSION: version,
     store: useMainStore(),
     apiStore: useApiStore(),
 
@@ -71,13 +78,13 @@ export default defineComponent({
   },
 
   async mounted() {
-    watch(
+    window.addEventListener('focus', () => {
-      () => this.store.blockScroll,
+      if (Date.now() - this.apiStore.lastFetchData.getTime() < 15000) return;
-      (value) => {
+
-        if (value) document.body.classList.add('no-scroll');
+      this.apiStore.fetchActiveData();
-        else document.body.classList.remove('no-scroll');
+    });
-      }
+
-    );
+    window.addEventListener('mousemove', (e: MouseEvent) => this.handlePopUpEvents(e));
   },
 
   methods: {
@@ -85,8 +92,27 @@ export default defineComponent({
       this.loadLang();
       this.setReleaseURL();
       this.setupOfflineHandling();
+      this.checkAppVersion();
 
-      this.apiStore.setupAPI();
+      this.apiStore.setupAPIData();
+
+      if (!this.isOnProductionHost) document.title = 'Stacjownik Dev';
+    },
+
+    checkAppVersion() {
+      if (import.meta.env.DEV) {
+        this.store.isNewUpdate = true;
+
+        return;
+      }
+
+      const storageVersion = StorageManager.getStringValue(STORAGE_VERSION_KEY);
+
+      if (storageVersion === undefined || storageVersion != version) {
+        this.store.isNewUpdate = true;
+
+        StorageManager.setStringValue(STORAGE_VERSION_KEY, version);
+      }
     },
 
     setupOfflineHandling() {
@@ -101,16 +127,35 @@ export default defineComponent({
     handleOfflineMode() {
       this.store.isOffline = true;
 
-      this.apiStore.stopActiveDataScheduler();
       this.apiStore.activeData = undefined;
-
       this.apiStore.dataStatuses.connection = Status.Data.Offline;
     },
 
     handleOnlineMode() {
       this.store.isOffline = false;
 
-      this.apiStore.setupAPI();
+      this.apiStore.connectToAPI();
+    },
+
+    handlePopUpEvents(e: MouseEvent) {
+      const targetEl = e
+        .composedPath()
+        .find((p) => p instanceof HTMLElement && p.getAttribute('data-popup-key'));
+
+      if (!targetEl || !(targetEl instanceof HTMLElement)) {
+        if (this.store.popUpData.key != null) this.hidePopUp();
+
+        return;
+      }
+
+      const popupComponentKey = targetEl.getAttribute('data-popup-key');
+      const popupContent = targetEl.getAttribute('data-popup-content');
+
+      if (popupComponentKey && popupContent) this.showPopUp(e, popupComponentKey, popupContent);
+      else if (this.store.popUpData.key != null) this.hidePopUp();
+
+      this.store.mousePos.x = e.pageX;
+      this.store.mousePos.y = e.pageY;
     },
 
     changeLang(lang: string) {
@@ -156,4 +201,75 @@ 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.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;
+  overflow: hidden;
+}
+
+.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;
+}
+</style>

src/components/App/AppHeader.vue

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

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,125 +198,112 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { useMainStore } 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 = useMainStore();
-    const apiStore = useApiStore();
-
-    return {
-      dataStatus: apiStore.dataStatuses,
-      store
-    };
-  },
-
-  watch: {
-    dataStatus: {
-      deep: true,
-
-      handler(statuses: any) {
-        const connectionStatus = statuses.connection;
-        const sceneryDataStatus = statuses.sceneries;
-        const trainsDataStatus = statuses.trains;
-        const dispatcherDataStatus = statuses.dispatchers;
-
-        if (connectionStatus == Status.Data.Offline) {
-          this.setSignalStatus(Status.Data.Offline);
-          this.indicator.status = Status.Data.Offline;
-          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 || status == Status.Data.Offline) {
+      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/UpdateModal.vue

@@ -0,0 +1,133 @@
+<template>
+  <AnimatedModal :is-open="mainStore.isNewUpdate" @toggle-modal="toggleModal">
+    <div class="modal_content">
+      <div>
+        <h1 style="margin-bottom: 0.5em">{{ $t('update.title') }}</h1>
+        <h2 class="text--primary">{{ $t('update.version', [version]) }}</h2>
+        <hr class="separator" />
+      </div>
+
+      <div class="features-list">
+        <h2>Nowości i zmiany:</h2>
+        <ul>
+          <li v-for="content in localeChangesArray" :key="content">{{ content }}</li>
+        </ul>
+      </div>
+
+      <div class="modal_actions">
+        <button class="btn--action">Przyjąłem!</button>
+
+        <p>Ten changelog będzie zawsze dostępny po kliknięciu numeru wersji w stopce strony!</p>
+
+        <!-- <div class="actions-checkboxes">
+          <label>
+            <input type="checkbox" />
+            <span>nie pokazuj dla przyszłych aktualizacji</span>
+          </label>
+
+          <label>
+            <input type="checkbox" />
+            <span>nie pokazuj dla przyszłych aktualizacji</span>
+          </label>
+        </div> -->
+      </div>
+    </div>
+  </AnimatedModal>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useMainStore } from '../../store/mainStore';
+import { version } from '../../../package.json';
+import AnimatedModal from '../Global/AnimatedModal.vue';
+
+export default defineComponent({
+  components: { AnimatedModal },
+
+  data() {
+    return {
+      mainStore: useMainStore(),
+      version: version
+    };
+  },
+
+  computed: {
+    localeChangesArray() {
+      return this.$t('update.content').split('\n');
+    }
+  },
+
+  methods: {
+    toggleModal(value: boolean) {
+      this.$emit('toggleModal', value);
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.modal_content {
+  font-size: 1.2em;
+  text-align: center;
+  padding: 1em;
+  height: 80vh;
+  min-height: 550px;
+
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  gap: 0.5em;
+}
+
+hr.separator {
+  margin: 0.5em 0;
+  padding: 0;
+  height: 3px;
+  background-color: #fff;
+}
+
+.features-list {
+  margin-top: 0.5em;
+  overflow: auto;
+
+  ul {
+    text-align: left;
+    list-style: '\21D2  ';
+    padding: 1em;
+  }
+
+  li {
+    margin: 0.5em 0;
+  }
+}
+
+.modal_actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+
+  button {
+    font-weight: bold;
+    padding: 0.35em;
+  }
+
+  p {
+    font-size: 0.9em;
+  }
+}
+
+.actions-checkboxes {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  gap: 1em;
+
+  label {
+    font-size: 0.9em;
+  }
+
+  label > input {
+    margin-right: 0.5em;
+  }
+}
+</style>

src/components/Global/Donation.vue

@@ -1,129 +1,157 @@
 <template>
-  <div class="donation-modal" @keydown.esc="toggleModal(false)">
+  <AnimatedModal
-    <button
+    class="donation-modal"
-      class="btn-toggle btn--image"
+    :isOpen="isModalOpen"
-      ref="btn"
+    @toggleModal="toggleModal"
-      @click="toggleModal(true)"
+    @keydown.esc="toggleModal(false)"
-      @focus="toggleModal(false)"
+  >
-    >
+    <div class="modal_content">
-      <img src="/images/icon-dollar.svg" alt="dollar donation icon" />
+      <div class="modal_main">
-      <span>{{ $t('donations.button-title') }}</span>
+        <h1 v-html="$t('donations.header')"></h1>
-    </button>
+        <div class="donators-slider" v-if="donatorList.length != 0">
+          <span v-html="$t('donations.donator-title', { count: donatorList.length })"></span>
 
-    <AnimatedModal :isOpen="isModalOpen" @toggleModal="toggleModal">
+          <transition mode="out-in" name="slider-anim" class="current-name">
-      <div class="modal_content">
+            <span :key="displayingName">
-        <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 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>
+              {{ displayingName }}
-
+            </span>
-            <template v-slot:b1>
+          </transition>
-              <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>
+        <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>
 
-        <div class="modal_actions">
+          <template v-slot:b1>
-          <a
+            <b>{{ $t('donations.p4-b1') }}</b>
-            class="modal-action a-button btn--image coffee"
+          </template>
-            href="https://buycoffee.to/spythere"
-            target="_blank"
-          >
-            <img src="/images/icon-coffee.png" width="20" alt="buycoffee.to donation" />
-            {{ $t('donations.action-buycoffee') }}
-          </a>
 
-          <a
+          <template v-slot:b2>
-            class="modal-action a-button btn--image paypal"
+            <b>{{ $t('donations.p4-b2') }}</b>
-            href="https://www.paypal.com/donate/?hosted_button_id=EDB3SKFAHXFTW"
+          </template>
-            target="_blank"
+        </i18n-t>
-          >
+        <br />
-            <img src="/images/icon-dollar.svg" alt="paypal donation" />
+        <i
-            {{ $t('donations.action-paypal') }}
+          v-html="$t('donations.p5')"
-          </a>
+          style="display: flex; justify-content: flex-end; text-align: right"
-
+        >
-          <button class="modal-action btn--image exit" @click="toggleModal(false)">
+        </i>
-            <img src="/images/icon-exit.svg" alt="dollar donation icon" />
-            {{ $t('donations.action-exit') }}
-          </button>
-        </div>
       </div>
-    </AnimatedModal>
+
-  </div>
+      <div class="modal_actions">
+        <a
+          class="modal-action a-button btn--image coffee"
+          href="https://buycoffee.to/spythere"
+          target="_blank"
+        >
+          <img src="/images/icon-coffee.png" width="20" alt="buycoffee.to donation" />
+          {{ $t('donations.action-buycoffee') }}
+        </a>
+
+        <a
+          class="modal-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="modal-action btn--image exit" @click="toggleModal(false)">
+          <img src="/images/icon-exit.svg" alt="dollar donation icon" />
+          {{ $t('donations.action-exit') }}
+        </button>
+      </div>
+    </div>
+  </AnimatedModal>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import AnimatedModal from './AnimatedModal.vue';
+import { useApiStore } from '../../store/apiStore';
 
 export default defineComponent({
+  components: { AnimatedModal },
   props: {
     isModalOpen: Boolean
   },
+
   emits: ['toggleModal'],
 
+  watch: {
+    isModalOpen(b: boolean) {
+      this.running = b;
+      this.lastUpdate = Date.now();
+    }
+  },
+
+  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: {
     toggleModal(value: boolean) {
       this.$emit('toggleModal', 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);
     }
-  },
+  }
-  components: { AnimatedModal }
 });
 </script>
 
 <style lang="scss" scoped>
 @import '../../styles/responsive.scss';
 
-button.btn-toggle {
-  $btnColor: #254069;
-
-  background-color: $btnColor;
-
-  &:hover {
-    background-color: lighten($btnColor, 5%);
-  }
-
-  @include smallScreen {
-    span {
-      display: none;
-    }
-  }
-}
-
 .modal_content {
   display: grid;
   grid-template-rows: 1fr auto;
@@ -151,6 +179,7 @@ button.btn-toggle {
 
 .modal_main {
   overflow: auto;
+  overflow-x: hidden;
 
   img {
     max-height: 20px;
@@ -198,4 +227,30 @@ button.btn-toggle {
     }
   }
 }
+
+.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/RegionDropdown.vue

@@ -59,8 +59,6 @@ export default defineComponent({
     'store.region.id': {
       handler(regionId) {
         this.selectedItemIndex = this.regionList.findIndex((reg) => reg.id == regionId);
-
-        console.log('region id', regionId);
       }
     },
     '$route.query.region': {
@@ -85,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 =

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,7 +86,7 @@ $online: #09a116;
 $unknown: #b93c3c;
 
 .status-badge {
-  border-radius: 1rem;
+  border-radius: 1em;
   font-weight: 500;
 
   padding: 0.2em 0.55em;

src/components/Global/StockList.vue

@@ -1,7 +1,24 @@
 <template>
   <div class="stock-list">
-    <ul>
+    <div v-if="tractionOnly">
-      <li v-for="(stockName, i) in trainStockList" :key="i">
+      <p>
+        {{ computedStockList[0].split(':')[0].split('_').splice(0, 2).join(' ') }}
+        {{ computedStockList[0].split(':')[1] }}
+      </p>
+
+      <img
+        class="traction-only"
+        :src="`https://rj.td2.info.pl/dist/img/thumbnails/${computedStockList[0].split(':')[0]}${
+          /^EN/.test(computedStockList[0]) ? 'rb' : ''
+        }.png`"
+        @error="onImageError($event, computedStockList[0])"
+        width="300"
+        height="60"
+      />
+    </div>
+
+    <ul v-else>
+      <li v-for="(stockName, i) in computedStockList" :key="i">
         <p>
           {{ stockName.split(':')[0].split('_').splice(0, 2).join(' ') }}
           {{ stockName.split(':')[1] }}
@@ -9,39 +26,55 @@
 
         <span>
           <img
+            :data-mouseover="stockName"
+            data-popup-key="VehiclePreviewPopUp"
+            :data-popup-content="stockName.split(':')[0]"
             :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}${
               /^EN/.test(stockName) ? 'rb' : ''
             }.png`"
             @error="onImageError($event, stockName)"
+            @click.stop="() => {}"
             width="400"
             height="60"
           />
 
+          <!-- /// Manualne dodawanie miniaturek członów dla kibelków /// -->
           <img
+            :data-mouseover="stockName"
+            data-popup-key="VehiclePreviewPopUp"
+            :data-popup-content="stockName.split(':')[0]"
             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')
             "
+            @click.stop="() => {}"
           />
 
           <img
-            class="train-thumbnail"
+            :data-mouseover="stockName"
+            data-popup-key="VehiclePreviewPopUp"
+            :data-popup-content="stockName.split(':')[0]"
             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')
             "
+            @click.stop="() => {}"
           />
 
           <img
-            class="train-thumbnail"
+            :data-mouseover="stockName"
+            data-popup-key="VehiclePreviewPopUp"
+            :data-popup-content="stockName.split(':')[0]"
             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')
             "
+            @click.stop="() => {}"
           />
+          <!-- ///  -->
         </span>
       </li>
     </ul>
@@ -50,7 +83,6 @@
 
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
-import { API } from '../../typings/api';
 import { useApiStore } from '../../store/apiStore';
 
 export default defineComponent({
@@ -58,6 +90,10 @@ export default defineComponent({
     trainStockList: {
       type: Array as PropType<string[]>,
       required: true
+    },
+    tractionOnly: {
+      type: Boolean,
+      required: false
     }
   },
 
@@ -67,14 +103,33 @@ export default defineComponent({
     };
   },
 
+  computed: {
+    computedStockList() {
+      return this.tractionOnly ? this.trainStockList.slice(0, 1) : this.trainStockList;
+    }
+  },
+
   methods: {
     onImageError(event: Event, stockName: string) {
-      const fallbackName =
+      let fallbackName = '';
-        Object.keys(this.apiStore.rollingStockData!.info).find((type) => {
+
-          return this.apiStore.rollingStockData!.info[type as keyof API.RollingStock.Info].find(
+      const isLoco = /.-\d{3}/.test(stockName);
-            (v) => v[0] === stockName.split(':')[0]
+
-          );
+      if (isLoco) {
-        }) || 'vehicle-unknown';
+        fallbackName += 'loco-';
+        fallbackName += /^\d?EN\d{2}/.test(stockName)
+          ? 'ezt'
+          : /^SN\d{2}/.test(stockName)
+          ? 'szt'
+          : /^\d?E/.test(stockName)
+          ? 'e'
+          : 's';
+      } else {
+        const isCarPassenger = /(\d{3}a|(Bau|Gor)\d{2}|304C)_/.test(stockName);
+
+        fallbackName += 'car-';
+        fallbackName += isCarPassenger ? 'passenger' : 'cargo';
+      }
 
       (event.target as HTMLImageElement).src = `/images/icon-${fallbackName}.png`;
     }
@@ -99,6 +154,7 @@ export default defineComponent({
 ul > li > span {
   display: flex;
   align-items: flex-end;
+  cursor: crosshair;
 }
 
 img {
@@ -107,10 +163,14 @@ img {
   height: auto;
 }
 
+img.traction-only {
+  max-width: 100%;
+}
+
 p {
   text-align: center;
   color: #aaa;
-  font-size: 0.9em;
+  font-size: 0.95em;
   margin-bottom: 1em;
 }
 </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 { API } from '../../typings/api';
-import { useApiStore } from '../../store/apiStore';
-
-export default defineComponent({
-  props: {
-    name: {
-      type: String,
-      required: true
-    },
-
-    onlyFirstSegment: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  data() {
-    return {
-      apiStore: useApiStore(),
-      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.apiStore.rollingStockData) return 'vehicle-unknown';
-
-      return (
-        Object.keys(this.apiStore.rollingStockData.info).find((type) => {
-          return this.apiStore.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/JournalView/JournalDailyStats.vue

@@ -172,7 +172,7 @@ import dateMixin from '../../mixins/dateMixin';
 
 import { API } from '../../typings/api';
 import { Status } from '../../typings/common';
-import http from '../../http';
+import { useApiStore } from '../../store/apiStore';
 
 export default defineComponent({
   name: 'journal-daily-stats',
@@ -186,7 +186,8 @@ export default defineComponent({
       statsStatus: Status.Data.Loading,
       intervalId: -1,
 
-      stats: {} as API.DailyStats.Response
+      stats: {} as API.DailyStats.Response,
+      apiStore: useApiStore()
     };
   },
 
@@ -211,7 +212,9 @@ export default defineComponent({
   methods: {
     async fetchDailyTimetableStats() {
       try {
-        const res: API.DailyStats.Response = await (await http.get('api/getDailyStats')).data;
+        const res: API.DailyStats.Response = await (
+          await this.apiStore.client!.get('api/getDailyStats')
+        ).data;
 
         this.stats = res;
 

src/components/JournalView/JournalOptions.vue

@@ -116,7 +116,7 @@ import keyMixin from '../../mixins/keyMixin';
 import { useMainStore } from '../../store/mainStore';
 import { Journal } from './typings';
 import { Status } from '../../typings/common';
-import http from '../../http';
+import { useApiStore } from '../../store/apiStore';
 
 export default defineComponent({
   emits: ['onSearchConfirm', 'onOptionsReset', 'onRefreshData'],
@@ -158,6 +158,7 @@ export default defineComponent({
 
       searchTimeout: 0,
       store: useMainStore(),
+      apiStore: useApiStore(),
 
       JournalFilterSection: Journal.FilterSection
     };
@@ -241,7 +242,7 @@ export default defineComponent({
       this.searchTimeout = window.setTimeout(async () => {
         try {
           const suggestions: string[] = await (
-            await http.get(`api/get${type}Suggestions?name=${value}`)
+            await this.apiStore.client!.get(`api/get${type}Suggestions?name=${value}`)
           ).data;
 
           this[`${type}Suggestions`] = suggestions;

src/components/JournalView/JournalTimetables/TimetableExtra.vue

@@ -53,7 +53,6 @@
       </button>
     </div>
 
-    <!-- <StockList :trainStockList="currentHistoryIndex == 0 ? timetable.stockString : stockHistory[currentHistoryIndex].stockString).split(';')" /> -->
     <StockList
       :trainStockList="
         (currentHistoryIndex == 0
@@ -63,15 +62,6 @@
       "
     />
 
-    <!-- <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>
 

src/components/JournalView/JournalTimetables/TimetableGeneral.vue

@@ -1,11 +1,6 @@
 <template>
   <div class="item-general">
-    <span
+    <span class="general-train">
-      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">
@@ -66,6 +61,15 @@
             : `${$t('journal.timetable-abandoned')} ${localeTime(timetable.endDate, $i18n.locale)}`
         }}
       </b>
+
+      <button
+        v-if="timetable.terminated == false"
+        class="btn--image btn--action btn-timetable"
+        @click.stop="showTimetable(timetable, $event.currentTarget)"
+      >
+        <img src="/images/icon-train.svg" alt="" />
+        {{ $t('journal.timetable-online-button') }}
+      </button>
     </span>
   </div>
 </template>
@@ -140,12 +144,24 @@ export default defineComponent({
 }
 
 .general-train {
-  cursor: pointer;
   display: flex;
-  flex-wrap: wrap;
   justify-content: center;
   align-items: center;
+  flex-wrap: wrap;
   gap: 0.25em;
+
+  cursor: pointer;
+  line-height: 2;
+}
+
+.btn-timetable {
+  display: inline-block;
+  padding: 0.1em 0.4em;
+  margin-left: 0.5em;
+
+  img {
+    vertical-align: top;
+  }
 }
 
 @include smallScreen {

src/components/PopUp/DonatorPopUp.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="popup-content">
+    <img src="/images/icon-diamond.svg" alt="" />
+    <span>{{ store.popUpData.content }}</span>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useMainStore } from '../../store/mainStore';
+
+export default defineComponent({
+  data() {
+    return {
+      store: useMainStore()
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.popup-content {
+  gap: 0.5em;
+
+  padding: 0.5em;
+  border-radius: 0.25em;
+
+  width: 100%;
+
+  background-color: #333;
+  box-shadow: 0 0 10px 2px #aaa;
+}
+
+img {
+  vertical-align: middle;
+  height: 1em;
+  margin-right: 0.5em;
+}
+</style>

src/components/PopUp/PopUp.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="popup" v-show="store.popUpData.key" ref="preview">
+    <component v-if="store.popUpData.key" :is="store.popUpData.key" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import DonatorPopUp from './DonatorPopUp.vue';
+import TrainCommentsPopUp from './TrainCommentsPopUp.vue';
+import VehiclePreviewPopUp from './VehiclePreviewPopUp.vue';
+import { useMainStore } from '../../store/mainStore';
+
+export default defineComponent({
+  components: { DonatorPopUp, TrainCommentsPopUp, VehiclePreviewPopUp },
+
+  data() {
+    return {
+      store: useMainStore()
+    };
+  },
+
+  watch: {
+    'store.mousePos': {
+      deep: true,
+      handler(val: typeof this.store.mousePos) {
+        this.$nextTick(() => {
+          const previewEl = this.$refs['preview'] as HTMLElement;
+          const clientWidth = document.body.clientWidth;
+          const boxWidth = previewEl.getBoundingClientRect().width;
+
+          let translateX = '0px',
+            translateY = '30px';
+
+          if (clientWidth < 500) {
+            previewEl.style.left = '50%';
+            translateX = '-50%';
+          } else if (val.x <= boxWidth / 2) {
+            previewEl.style.left = '0';
+            translateX = '0px';
+          } else if (val.x >= clientWidth - boxWidth / 2) {
+            previewEl.style.left = '100%';
+            translateX = '-100%';
+          } else {
+            previewEl.style.left = `${val.x}px`;
+            translateX = '-50%';
+          }
+
+          previewEl.style.top = `${val.y}px`;
+
+          const isOutside =
+            val.y + previewEl.getBoundingClientRect().height + 30 >=
+            window.innerHeight + window.scrollY;
+
+          if (isOutside) translateY = 'calc(-100% - 30px)';
+          previewEl.style.transform = `translate(${translateX}, ${translateY})`;
+        });
+      }
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.popup {
+  position: absolute;
+  z-index: 250;
+  max-width: 400px;
+  text-align: center;
+}
+</style>

src/components/PopUp/TrainCommentsPopUp.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="popup-content">
+    <span>{{ store.popUpData.content }}</span>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useMainStore } from '../../store/mainStore';
+
+export default defineComponent({
+  data() {
+    return {
+      store: useMainStore()
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.popup-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5em;
+
+  padding: 0.25em 0.5em;
+  border-radius: 0.25em;
+
+  width: 100%;
+  background-color: #333;
+  box-shadow: 0 0 5px 2px #aaa;
+}
+
+img {
+  height: 1em;
+}
+</style>

src/components/PopUp/VehiclePreviewPopUp.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="popup-content">
+    <div v-if="imageState == 'loading'" class="loading-info">
+      {{ $t('vehicle-preview.loading') }}
+    </div>
+
+    <div v-if="imageState == 'error'">{{ $t('vehicle-preview.error') }}</div>
+
+    <img
+      v-if="store.popUpData.key"
+      @load="onImageLoad"
+      @error="onImageError"
+      width="300"
+      height="176"
+      class="rounded-md w-full h-auto"
+      :src="`https://static.spythere.eu/images/${store.popUpData.content}--300px.jpg`"
+    />
+
+    <div class="vehicle-name" v-if="imageState != 'error'">
+      {{ store.popUpData.content.replace(/_/g, ' ') }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useMainStore } from '../../store/mainStore';
+
+export default defineComponent({
+  data() {
+    return {
+      store: useMainStore(),
+      imageState: 'loading'
+    };
+  },
+
+  mounted() {
+    this.imageState = 'loading';
+  },
+
+  methods: {
+    onImageLoad() {
+      this.imageState = 'loaded';
+    },
+
+    onImageError(e: Event) {
+      this.imageState = 'error';
+
+      (e.target as HTMLElement).style.display = 'none';
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.popup-content {
+  // min-w-[300px] min-h-[200px] p-2 bg-slate-800 rounded-md
+
+  width: 300px;
+  min-height: 200px;
+  background-color: #333;
+  box-shadow: 0 0 10px 2px #aaa;
+
+  padding: 0.5em;
+  border-radius: 0.5em;
+}
+
+.loading-info {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+img {
+  width: 100%;
+  height: auto;
+}
+
+.vehicle-name {
+  text-align: center;
+  margin-top: 0.5em;
+  color: #ccc;
+  text-wrap: wrap;
+}
+</style>

src/components/SceneryView/SceneryDispatchersHistory.vue

@@ -76,10 +76,10 @@ import Station from '../../scripts/interfaces/Station';
 import Loading from '../Global/Loading.vue';
 import styleMixin from '../../mixins/styleMixin';
 import listObserverMixin from '../../mixins/listObserverMixin';
-import { OnlineScenery } from '../../store/typings';
+import { ActiveScenery } from '../../store/typings';
 import { API } from '../../typings/api';
 import { Status } from '../../typings/common';
-import http from '../../http';
+import { useApiStore } from '../../store/apiStore';
 
 export default defineComponent({
   name: 'SceneryDispatchersHistory',
@@ -90,7 +90,7 @@ export default defineComponent({
       type: Object as PropType<Station>
     },
     onlineScenery: {
-      type: Object as PropType<OnlineScenery>
+      type: Object as PropType<ActiveScenery>
     }
   },
 
@@ -98,7 +98,8 @@ export default defineComponent({
     return {
       historyList: [] as API.DispatcherHistory.Response,
       dataStatus: Status.Data.Loading,
-      DataStatus: Status.Data
+      DataStatus: Status.Data,
+      apiStore: useApiStore()
     };
   },
 
@@ -127,7 +128,7 @@ export default defineComponent({
         }&countFrom=${countFrom}&countLimit=${countLimit}`;
 
         const historyAPIData: API.DispatcherHistory.Response = await (
-          await http.get(requestString)
+          await this.apiStore.client!.get(requestString)
         ).data;
 
         this.dataStatus = Status.Data.Loaded;

src/components/SceneryView/SceneryHeader.vue

@@ -15,7 +15,7 @@
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
 import Station from '../../scripts/interfaces/Station';
-import { OnlineScenery } from '../../store/typings';
+import { ActiveScenery } from '../../store/typings';
 
 export default defineComponent({
   props: {
@@ -29,7 +29,7 @@ export default defineComponent({
     },
 
     onlineScenery: {
-      type: Object as PropType<OnlineScenery>
+      type: Object as PropType<ActiveScenery>
     }
   }
 });

src/components/SceneryView/SceneryInfo.vue

@@ -90,7 +90,7 @@ 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 { OnlineScenery } from '../../store/typings';
+import { ActiveScenery } from '../../store/typings';
 
 export default defineComponent({
   components: {
@@ -106,7 +106,7 @@ export default defineComponent({
     },
 
     onlineScenery: {
-      type: Object as PropType<OnlineScenery>
+      type: Object as PropType<ActiveScenery>
     }
   }
 });

src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue

@@ -1,15 +1,15 @@
 <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?search-dispatcher=${onlineScenery.dispatcherName}`"
       >
         <span
@@ -21,18 +21,25 @@
         </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>
 
@@ -42,14 +49,14 @@ 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 '../../../store/typings';
 import donatorMixin from '../../../mixins/donatorMixin';
 
 export default defineComponent({
   mixins: [styleMixin, dateMixin, routerMixin, donatorMixin],
   props: {
     onlineScenery: {
-      type: Object as PropType<OnlineScenery>,
+      type: Object as PropType<ActiveScenery>,
       required: false
     }
   },
@@ -59,45 +66,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>

src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue

@@ -5,7 +5,7 @@
         class="icon-info"
         src="/images/icon-unknown.svg"
         alt="icon-unknown"
-        :title="$t('desc.unknown')"
+        :title="$t('sceneries.info.unknown')"
       />
     </span>
 
@@ -21,25 +21,19 @@
       v-if="station?.generalInfo"
       class="scenery-icon icon-info"
       :class="station?.generalInfo.controlType.replace('+', '-')"
-      :title="$t('desc.control-type') + $t(`controls.${station?.generalInfo.controlType}`)"
+      :title="
+        $t('sceneries.info.control-type') + $t(`controls.${station?.generalInfo.controlType}`)
+      "
       v-html="getControlTypeAbbrev(station?.generalInfo.controlType)"
     >
     </span>
 
-    <img
-      v-if="station?.generalInfo?.SUP"
-      class="icon-info"
-      src="/images/icon-SUP.svg"
-      alt="SUP (RASP-UZK)"
-      :title="$t('desc.SUP')"
-    />
-
     <img
       v-if="station?.generalInfo?.signalType"
       class="icon-info"
       :src="`/images/icon-${station.generalInfo.signalType}.svg`"
       :alt="station.generalInfo.signalType"
-      :title="$t('desc.signals-type') + $t(`signals.${station.generalInfo.signalType}`)"
+      :title="$t('sceneries.info.signals-type') + $t(`signals.${station.generalInfo.signalType}`)"
     />
 
     <img
@@ -47,7 +41,7 @@
       class="icon-info"
       src="/images/icon-lock.svg"
       alt="Non-public scenery"
-      :title="$t('desc.non-public')"
+      :title="$t('sceneries.info.non-public')"
     />
 
     <img
@@ -55,7 +49,7 @@
       class="icon-info"
       src="/images/icon-unavailable.svg"
       alt="Unavailable scenery"
-      :title="$t('desc.unavailable')"
+      :title="$t('sceneries.info.unavailable')"
     />
 
     <img
@@ -63,7 +57,23 @@
       class="icon-info"
       src="/images/icon-abandoned.svg"
       alt="Abandoned scenery"
-      :title="$t('desc.abandoned')"
+      :title="$t('sceneries.info.abandoned')"
+    />
+
+    <img
+      v-if="station?.generalInfo?.SUP"
+      class="icon-info"
+      src="/images/icon-SUP.svg"
+      alt="SUP (RASP-UZK)"
+      :title="$t('sceneries.info.SUP')"
+    />
+
+    <img
+      v-if="station?.generalInfo?.ASDEK"
+      class="icon-info"
+      src="/images/icon-ASDEK.svg"
+      alt="dSAT ASDEK"
+      :title="$t('sceneries.info.ASDEK')"
     />
 
     <img
@@ -71,7 +81,7 @@
       class="icon-info"
       src="/images/icon-real.svg"
       alt="real scenery"
-      :title="`${$t('desc.real')} ${station.generalInfo.lines}`"
+      :title="`${$t('sceneries.info.real')} ${station.generalInfo.lines}`"
     />
   </section>
 </template>

src/components/SceneryView/SceneryInfo/SceneryInfoRoutes.vue

@@ -1,11 +1,11 @@
 <template>
   <section class="info-routes" v-if="station.generalInfo">
-    <div class="routes one-way" v-if="filteredOneWayRoutes.length > 0">
+    <div class="routes one-way" v-if="oneWayRoutes.length > 0">
       <b>{{ $t('scenery.one-way-routes') }}</b>
 
       <ul class="routes-list">
         <li
-          v-for="route in filteredOneWayRoutes"
+          v-for="route in oneWayRoutes"
           :key="route.routeName"
           @click="setActiveShowLength(route.routeName)"
         >
@@ -24,12 +24,12 @@
       </ul>
     </div>
 
-    <div class="routes two-way" v-if="filteredTwoWayRoutes.length > 0">
+    <div class="routes two-way" v-if="twoWayRoutes.length > 0">
       <b>{{ $t('scenery.two-way-routes') }}</b>
 
       <ul class="routes-list">
         <li
-          v-for="route in filteredTwoWayRoutes"
+          v-for="route in twoWayRoutes"
           :key="route.routeName"
           @click="setActiveShowLength(route.routeName)"
         >
@@ -53,9 +53,6 @@
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
 import Station from '../../../scripts/interfaces/Station';
-import { StationRoutesInfo } from '../../../store/typings';
-
-const routeFilter = (route: StationRoutesInfo) => !route.hidden;
 
 export default defineComponent({
   props: {
@@ -80,12 +77,12 @@ export default defineComponent({
   },
 
   computed: {
-    filteredOneWayRoutes() {
+    oneWayRoutes() {
-      return this.station.generalInfo?.routes.oneWay.filter(routeFilter) || [];
+      return this.station.generalInfo?.routes.single ?? [];
     },
 
-    filteredTwoWayRoutes() {
+    twoWayRoutes() {
-      return this.station.generalInfo?.routes.twoWay.filter(routeFilter) || [];
+      return this.station.generalInfo?.routes.double ?? [];
     }
   }
 });

src/components/SceneryView/SceneryInfo/SceneryInfoSpawnList.vue

@@ -30,12 +30,12 @@
 
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
-import { OnlineScenery } from '../../../store/typings';
+import { ActiveScenery } from '../../../store/typings';
 
 export default defineComponent({
   props: {
     onlineScenery: {
-      type: Object as PropType<OnlineScenery>,
+      type: Object as PropType<ActiveScenery>,
       required: false
     }
   },

src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue

@@ -32,14 +32,14 @@
 import { PropType, defineComponent } from 'vue';
 import modalTrainMixin from '../../../mixins/modalTrainMixin';
 import routerMixin from '../../../mixins/routerMixin';
-import { OnlineScenery } from '../../../store/typings';
+import { ActiveScenery } from '../../../store/typings';
 
 export default defineComponent({
   mixins: [routerMixin, modalTrainMixin],
 
   props: {
     onlineScenery: {
-      type: Object as PropType<OnlineScenery>,
+      type: Object as PropType<ActiveScenery>,
       required: false
     }
   }

src/components/SceneryView/SceneryTimetable.vue

@@ -6,10 +6,10 @@
         <span>{{ $t('scenery.timetables') }}</span>
 
         <span>
-          <span class="text--primary">{{ onlineScenery?.scheduledTrainCount.all || 0 }}</span>
+          <span class="text--primary">{{ onlineScenery?.scheduledTrainCount.all ?? 0 }}</span>
           <span> / </span>
           <span class="text--grayed">
-            {{ onlineScenery?.scheduledTrainCount.confirmed || '0' }}
+            {{ onlineScenery?.scheduledTrainCount.confirmed ?? 0 }}
           </span>
         </span>
 
@@ -33,12 +33,12 @@
           {{ (i > 0 && '&bull;') || '' }}
 
           <button
-            :key="cp.checkpointName"
+            :key="cp"
             class="checkpoint_item"
-            :class="{ current: chosenCheckpoint === cp.checkpointName }"
+            :class="{ current: chosenCheckpoint === cp }"
             @click="setCheckpoint(cp)"
           >
-            {{ cp.checkpointName }}
+            {{ cp }}
           </button>
         </span>
       </div>
@@ -74,7 +74,7 @@
           class="timetable-item"
           v-else
           v-for="scheduledTrain in computedScheduledTrains"
-          :key="scheduledTrain.trainId"
+          :key="scheduledTrain.trainId + scheduledTrain.stopInfo.arrivalTimestamp"
           tabindex="0"
           @click.prevent.stop="selectModalTrain(scheduledTrain.trainId, $event.currentTarget)"
           @keydown.enter.prevent="selectModalTrain(scheduledTrain.trainId, $event.currentTarget)"
@@ -190,7 +190,7 @@ import Station from '../../scripts/interfaces/Station';
 import { useMainStore } from '../../store/mainStore';
 import modalTrainMixin from '../../mixins/modalTrainMixin';
 import ScheduledTrainStatus from './ScheduledTrainStatus.vue';
-import { OnlineScenery } from '../../store/typings';
+import { ActiveScenery } from '../../store/typings';
 import { useApiStore } from '../../store/apiStore';
 
 export default defineComponent({
@@ -205,7 +205,7 @@ export default defineComponent({
       type: Object as PropType<Station>
     },
     onlineScenery: {
-      type: Object as PropType<OnlineScenery>
+      type: Object as PropType<ActiveScenery>
     }
   },
 
@@ -231,7 +231,7 @@ export default defineComponent({
     const chosenCheckpoint = ref(
       props.station?.generalInfo?.checkpoints?.length == 0
         ? ''
-        : props.station?.generalInfo?.checkpoints[0].checkpointName || null
+        : props.station?.generalInfo?.checkpoints[0] ?? null
     );
 
     return {
@@ -278,12 +278,11 @@ export default defineComponent({
     loadSelectedOption() {
       if (!this.station) return;
 
-      this.chosenCheckpoint =
+      this.chosenCheckpoint = this.station.generalInfo?.checkpoints[0] ?? this.station.name;
-        this.station.generalInfo?.checkpoints[0]?.checkpointName || this.station.name;
     },
 
-    setCheckpoint(cp: { checkpointName: string }) {
+    setCheckpoint(cp: string) {
-      this.chosenCheckpoint = cp.checkpointName;
+      this.chosenCheckpoint = cp;
     }
   }
 });

src/components/SceneryView/SceneryTimetablesHistory.vue

@@ -74,10 +74,10 @@ import dateMixin from '../../mixins/dateMixin';
 import Station from '../../scripts/interfaces/Station';
 import Loading from '../Global/Loading.vue';
 import listObserverMixin from '../../mixins/listObserverMixin';
-import { OnlineScenery } from '../../store/typings';
+import { ActiveScenery } from '../../store/typings';
 import { API } from '../../typings/api';
 import { Status } from '../../typings/common';
-import http from '../../http';
+import { useApiStore } from '../../store/apiStore';
 
 export default defineComponent({
   name: 'SceneryTimetablesHistory',
@@ -87,13 +87,14 @@ export default defineComponent({
       type: Object as PropType<Station>
     },
     onlineScenery: {
-      type: Object as PropType<OnlineScenery>
+      type: Object as PropType<ActiveScenery>
     }
   },
 
   data() {
     return {
       historyList: [] as API.TimetableHistory.Response,
+      apiStore: useApiStore(),
       dataStatus: Status.Data.Loading,
       DataStatus: Status.Data
     };
@@ -112,7 +113,7 @@ export default defineComponent({
 
       try {
         const response: API.TimetableHistory.Response = await (
-          await http.get('api/getTimetables', {
+          await this.apiStore.client!.get('api/getTimetables', {
             params: {
               issuedFrom: this.station?.name || this.onlineScenery?.name
             }

src/components/StationsView/StationFilterCard.vue

@@ -256,8 +256,6 @@ export default defineComponent({
     },
 
     handleAuthorsInput() {
-      console.log(this.authorsInputValue);
-
       this.filterStore.changeFilterValue('authors', this.authorsInputValue);
 
       if (this.saveOptions) StorageManager.setStringValue('authors', this.authorsInputValue);

src/components/StationsView/StationTable.vue

@@ -1,289 +1,301 @@
 <template>
   <section class="station_table">
-    <div class="table_wrapper">
+    <transition name="status-anim" mode="out-in">
-      <table>
+      <div class="table_wrapper" :key="apiStore.dataStatuses.connection">
-        <thead>
+        <table>
-          <tr>
+          <thead>
-            <th
+            <tr>
-              v-for="headerName in headIds"
+              <th
-              :key="headerName"
+                v-for="headerName in headIds"
-              @click="changeSorter(headerName)"
+                :key="headerName"
-              class="header-text"
+                @click="changeSorter(headerName)"
+                class="header-text"
+                :class="headerName"
+              >
+                <span class="header_wrapper">
+                  <div v-html="$t(`sceneries.headers.${headerName}`)"></div>
+
+                  <img
+                    class="sort-icon"
+                    v-if="sorterActive.headerName == headerName"
+                    :src="`/images/icon-arrow-${sorterActive.dir == 1 ? 'asc' : 'desc'}.svg`"
+                    alt="sort icon"
+                  />
+                </span>
+              </th>
+
+              <th
+                v-for="headerName in headIconsIds"
+                :key="headerName"
+                @click="changeSorter(headerName)"
+                class="header-image"
+                :class="headerName"
+              >
+                <span class="header_wrapper">
+                  <img
+                    :src="`/images/icon-${headerName}.svg`"
+                    :alt="headerName"
+                    :title="$t(`sceneries.headers.${headerName}`)"
+                  />
+
+                  <img
+                    class="sort-icon"
+                    v-if="sorterActive.headerName == headerName"
+                    :src="`/images/icon-arrow-${sorterActive.dir == 1 ? 'asc' : 'desc'}.svg`"
+                    alt="sort icon"
+                  />
+                </span>
+              </th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr
+              v-for="station in stations"
+              :class="{ 'last-selected': lastSelectedStationName == station.name }"
+              :key="station.name"
+              @click.left="setScenery(station.name)"
+              @click.right="openForumSite($event, station.generalInfo?.url)"
+              @keydown.enter="setScenery(station.name)"
+              @keydown.space="openForumSite($event, station.generalInfo?.url)"
+              tabindex="0"
             >
-              <span class="header_wrapper">
+              <td class="station-name" :class="station.generalInfo?.availability">
-                <div v-html="$t(`sceneries.${headerName}`)"></div>
+                <b v-if="station.generalInfo?.project" style="color: salmon">{{
+                  station.generalInfo.project
+                }}</b>
+                {{ station.name }}
+              </td>
 
-                <img
+              <td class="station-level">
-                  class="sort-icon"
+                <span v-if="station.generalInfo">
-                  v-if="sorterActive.headerName == headerName"
+                  <span
-                  :src="`/images/icon-arrow-${sorterActive.dir == 1 ? 'asc' : 'desc'}.svg`"
+                    v-if="
-                  alt="sort icon"
+                      station.generalInfo.reqLevel > -1 &&
+                      station.generalInfo.availability != 'nonPublic' &&
+                      station.generalInfo.availability != 'unavailable'
+                    "
+                    :style="calculateExpStyle(station.generalInfo.reqLevel)"
+                  >
+                    {{ station.generalInfo.reqLevel >= 2 ? station.generalInfo.reqLevel : 'L' }}
+                  </span>
+
+                  <span v-else-if="station.generalInfo.availability == 'abandoned'">
+                    <img
+                      src="/images/icon-abandoned.svg"
+                      alt="non-public"
+                      :title="$t('sceneries.info.abandoned')"
+                    />
+                  </span>
+
+                  <span v-else-if="station.generalInfo.availability == 'nonPublic'">
+                    <img
+                      src="/images/icon-lock.svg"
+                      alt="non-public"
+                      :title="$t('sceneries.info.non-public')"
+                    />
+                  </span>
+
+                  <span v-else>
+                    <img
+                      src="/images/icon-unavailable.svg"
+                      alt="unavailable"
+                      :title="$t('sceneries.info.unavailable')"
+                    />
+                  </span>
+                </span>
+
+                <span v-else> ? </span>
+              </td>
+
+              <td class="station-status">
+                <StationStatusBadge
+                  :isOnline="station.onlineInfo ? true : false"
+                  :dispatcherStatus="station.onlineInfo?.dispatcherStatus"
                 />
-              </span>
+              </td>
-            </th>
 
-            <th
+              <td class="station-dispatcher-name">
-              v-for="headerName in headIconsIds"
+                <span v-if="station.onlineInfo?.dispatcherName">
-              :key="headerName"
+                  <b
-              @click="changeSorter(headerName)"
+                    v-if="apiStore.donatorsData.includes(station.onlineInfo.dispatcherName)"
-              class="header-image"
+                    @click.stop="openDonationModal"
-            >
+                    data-popup-key="DonatorPopUp"
-              <span class="header_wrapper">
+                    :data-popup-content="$t('donations.dispatcher-message')"
-                <img
+                  >
-                  :src="`/images/icon-${headerName}.svg`"
+                    <img src="/images/icon-diamond.svg" alt="" />
-                  :alt="headerName"
+                    {{ station.onlineInfo.dispatcherName }}
-                  :title="$t(`sceneries.${headerName}`)"
+                  </b>
-                />
 
-                <img
+                  <div v-else>
-                  class="sort-icon"
+                    {{ station.onlineInfo.dispatcherName }}
-                  v-if="sorterActive.headerName == headerName"
+                  </div>
-                  :src="`/images/icon-arrow-${sorterActive.dir == 1 ? 'asc' : 'desc'}.svg`"
+                </span>
-                  alt="sort icon"
+              </td>
-                />
-              </span>
-            </th>
-          </tr>
-        </thead>
 
-        <tbody>
+              <td class="station-dispatcher-exp">
-          <tr
-            class="station"
-            :class="{ 'last-selected': lastSelectedStationName == station.name }"
-            v-for="(station, i) in stations"
-            :key="i + station.name"
-            @click.left="setScenery(station.name)"
-            @click.right="openForumSite($event, station.generalInfo?.url)"
-            @keydown.enter="setScenery(station.name)"
-            @keydown.space="openForumSite($event, station.generalInfo?.url)"
-            tabindex="0"
-          >
-            <td class="station_name" :class="station.generalInfo?.availability">
-              <b v-if="station.generalInfo?.project" style="color: salmon">{{
-                station.generalInfo.project
-              }}</b>
-              {{ station.name }}
-            </td>
-
-            <td class="station_level">
-              <span v-if="station.generalInfo">
                 <span
-                  v-if="
+                  v-if="station.onlineInfo && station.onlineInfo?.dispatcherExp != -1"
-                    station.generalInfo.reqLevel > -1 &&
+                  :style="
-                    station.generalInfo.availability != 'nonPublic' &&
+                    calculateExpStyle(
-                    station.generalInfo.availability != 'unavailable'
+                      station.onlineInfo.dispatcherExp,
+                      station.onlineInfo.dispatcherIsSupporter
+                    )
                   "
-                  :style="calculateExpStyle(station.generalInfo.reqLevel)"
                 >
-                  {{ station.generalInfo.reqLevel >= 2 ? station.generalInfo.reqLevel : 'L' }}
+                  {{
+                    station.onlineInfo.dispatcherExp < 2 ? 'L' : station.onlineInfo.dispatcherExp
+                  }}
                 </span>
+              </td>
 
-                <span v-else-if="station.generalInfo.availability == 'abandoned'">
+              <td class="station-tracks">
-                  <img
+                <div v-if="station.generalInfo">
-                    src="/images/icon-abandoned.svg"
+                  <span
-                    alt="non-public"
+                    v-if="station.generalInfo.routes.singleElectrifiedNames.length != 0"
-                    :title="$t('desc.abandoned')"
+                    class="track catenary"
-                  />
+                    :title="`${$t('sceneries.info.single-track-routes-catenary')}${
-                </span>
+                      station.generalInfo.routes.singleElectrifiedNames.length
+                    }`"
+                  >
+                    {{ station.generalInfo.routes.singleElectrifiedNames.length }}
+                  </span>
 
-                <span v-else-if="station.generalInfo.availability == 'nonPublic'">
+                  <span
-                  <img
+                    v-if="station.generalInfo.routes.singleOtherNames.length != 0"
-                    src="/images/icon-lock.svg"
+                    class="track no-catenary"
-                    alt="non-public"
+                    :title="`${$t('sceneries.info.single-track-routes-other')}${
-                    :title="$t('desc.non-public')"
+                      station.generalInfo.routes.singleOtherNames.length
-                  />
+                    }`"
-                </span>
+                  >
-
+                    {{ station.generalInfo.routes.singleOtherNames.length }}
-                <span v-else>
+                  </span>
-                  <img
-                    src="/images/icon-unavailable.svg"
-                    alt="unavailable"
-                    :title="$t('desc.unavailable')"
-                  />
-                </span>
-              </span>
-
-              <span v-else> ? </span>
-            </td>
-
-            <td class="station_status">
-              <StationStatusBadge
-                :isOnline="station.onlineInfo ? true : false"
-                :dispatcherStatus="station.onlineInfo?.dispatcherStatus"
-              />
-            </td>
-
-            <td class="station_dispatcher-name">
-              <span v-if="station.onlineInfo?.dispatcherName">
-                <b
-                  v-if="apiStore.donatorsData.includes(station.onlineInfo.dispatcherName)"
-                  :title="$t('donations.dispatcher-message')"
-                  @click.stop="openDonationModal"
-                >
-                  <img src="/images/icon-diamond.svg" alt="" />
-                  {{ station.onlineInfo.dispatcherName }}
-                </b>
-
-                <div v-else>
-                  {{ station.onlineInfo.dispatcherName }}
                 </div>
-              </span>
+              </td>
-            </td>
 
-            <td class="station_dispatcher-exp">
+              <td class="station-tracks">
-              <span
+                <div v-if="station.generalInfo">
-                v-if="station.onlineInfo"
+                  <span
-                :style="
+                    v-if="station.generalInfo.routes.doubleElectrifiedNames.length != 0"
-                  calculateExpStyle(
+                    class="track catenary"
-                    station.onlineInfo.dispatcherExp,
+                    :title="`${$t('sceneries.info.double-track-routes-catenary')}${
-                    station.onlineInfo.dispatcherIsSupporter
+                      station.generalInfo.routes.doubleElectrifiedNames.length
-                  )
+                    }`"
-                "
+                  >
-              >
+                    {{ station.generalInfo.routes.doubleElectrifiedNames.length }}
-                {{ station.onlineInfo.dispatcherExp < 2 ? 'L' : station.onlineInfo.dispatcherExp }}
+                  </span>
-              </span>
-            </td>
 
-            <td class="station_tracks twoway">
+                  <span
-              <span
+                    v-if="station.generalInfo.routes.doubleOtherNames.length != 0"
-                v-if="
+                    class="track no-catenary"
-                  station.generalInfo &&
+                    :title="`${$t('sceneries.info.double-track-routes-other')}${
-                  station.generalInfo.routes.twoWayCatenaryRouteNames.length > 0
+                      station.generalInfo.routes.doubleOtherNames.length
-                "
+                    }`"
-                class="track catenary"
+                  >
-                :title="`Liczba zelektryfikowanych szlaków dwutorowych: ${station.generalInfo.routes.twoWayCatenaryRouteNames.length}`"
+                    {{ station.generalInfo.routes.doubleOtherNames.length }}
-              >
+                  </span>
-                {{ station.generalInfo.routes.twoWayCatenaryRouteNames.length }}
+                </div>
-              </span>
+              </td>
 
-              <span
+              <td class="station-info">
-                v-if="
+                <span
-                  station.generalInfo &&
+                  v-if="station.generalInfo?.signalType"
-                  station.generalInfo.routes.twoWayNoCatenaryRouteNames.length > 0
+                  class="scenery-icon icon-info"
-                "
+                  :class="station.generalInfo?.controlType.replace('+', '-')"
-                class="track no-catenary"
+                  :title="
-                :title="`Liczba niezelektryfikowanych szlaków dwutorowych: ${station.generalInfo.routes.twoWayNoCatenaryRouteNames.length}`"
+                    $t('sceneries.info.control-type') +
-              >
+                    $t(`controls.${station.generalInfo?.controlType}`)
-                {{ station.generalInfo.routes.twoWayNoCatenaryRouteNames.length }}
+                  "
-              </span>
+                  v-html="getControlTypeAbbrev(station.generalInfo.controlType)"
+                >
+                </span>
 
-              <span class="separator"></span>
-
-              <span
-                v-if="
-                  station.generalInfo &&
-                  station.generalInfo.routes.oneWayCatenaryRouteNames.length > 0
-                "
-                class="track catenary"
-                :title="`Liczba zelektryfikowanych szlaków jednotorowych: ${station.generalInfo.routes.oneWayCatenaryRouteNames.length}`"
-              >
-                {{ station.generalInfo.routes.oneWayCatenaryRouteNames.length }}
-              </span>
-
-              <span
-                v-if="
-                  station.generalInfo &&
-                  station.generalInfo.routes.oneWayNoCatenaryRouteNames.length > 0
-                "
-                class="track no-catenary"
-                :title="`Liczba niezelektryfikowanych szlaków jednotorowych: ${station.generalInfo.routes.oneWayNoCatenaryRouteNames.length}`"
-              >
-                {{ station.generalInfo.routes.oneWayNoCatenaryRouteNames.length }}
-              </span>
-            </td>
-
-            <td class="station_info" v-if="station.generalInfo">
-              <span
-                class="scenery-icon icon-info"
-                :class="station.generalInfo.controlType.replace('+', '-')"
-                :title="$t('desc.control-type') + $t(`controls.${station.generalInfo.controlType}`)"
-                v-html="getControlTypeAbbrev(station.generalInfo.controlType)"
-              >
-              </span>
-
-              <span>
                 <img
+                  v-if="station.generalInfo?.signalType"
                   class="icon-info"
-                  v-if="station.generalInfo.SUP"
-                  src="/images/icon-SUP.svg"
-                  alt="SUP (RASP-UZK)"
-                  :title="$t('desc.SUP')"
-                />
-              </span>
-
-              <span>
-                <img
-                  class="icon-info"
-                  v-if="station.generalInfo.signalType"
                   :src="`/images/icon-${station.generalInfo.signalType}.svg`"
                   :alt="station.generalInfo.signalType"
-                  :title="$t('desc.signals-type') + $t(`signals.${station.generalInfo.signalType}`)"
+                  :title="
+                    $t('sceneries.info.signals-type') +
+                    $t(`signals.${station.generalInfo.signalType}`)
+                  "
                 />
-              </span>
 
-              <span>
                 <img
+                  v-if="station.generalInfo?.SUP"
                   class="icon-info"
-                  v-if="station.generalInfo && station.generalInfo.routes.sblRouteNames.length > 0"
+                  src="/images/icon-SUP.svg"
-                  src="/images/icon-SBL.svg"
+                  alt="SUP (RASP-UZK)"
-                  alt="SBL"
+                  :title="$t('sceneries.info.SUP')"
-                  :title="$t('desc.SBL') + `${station.generalInfo.routes.sblRouteNames.join(',')}`"
                 />
-              </span>
-            </td>
 
-            <td class="station_info" v-else>
+                <img
-              <img
+                  v-if="station.generalInfo?.ASDEK"
-                class="icon-info"
+                  class="icon-info"
-                src="/images/icon-unknown.svg"
+                  src="/images/icon-ASDEK.svg"
-                alt="icon-unknown"
+                  alt="dSAT ASDEK"
-                :title="$t('desc.unknown')"
+                  :title="$t('sceneries.info.ASDEK')"
-              />
+                />
-            </td>
 
-            <td class="station_users" :class="{ inactive: !station.onlineInfo }">
+                <img
-              <span>{{ station.onlineInfo?.currentUsers || 0 }}</span>
+                  v-if="!station.generalInfo"
-              /
+                  class="icon-info"
-              <span>{{ station.onlineInfo?.maxUsers || 0 }}</span>
+                  src="/images/icon-unknown.svg"
-            </td>
+                  alt="icon-unknown"
+                  :title="$t('sceneries.info.unknown')"
+                />
+              </td>
 
-            <td class="station_spawns" :class="{ inactive: !station.onlineInfo }">
+              <td class="station-users" :class="{ inactive: !station.onlineInfo }">
-              <span>{{ station.onlineInfo?.spawns.length || 0 }}</span>
+                <span class="text--primary">{{ station.onlineInfo?.currentUsers ?? '-' }}</span>
-            </td>
+                /
+                <span class="text--primary">{{ station.onlineInfo?.maxUsers ?? '-' }}</span>
+              </td>
 
-            <td
+              <td class="station-likes" :class="{ inactive: !station.onlineInfo }">
-              class="station_schedules all"
+                <span>{{ station.onlineInfo?.dispatcherRate ?? '-' }}</span>
-              style="width: 30px"
+              </td>
-              :class="{ inactive: !station.onlineInfo }"
-            >
-              {{ station.onlineInfo?.scheduledTrainCount.all }}
-            </td>
 
-            <td
+              <td class="station-spawns" :class="{ inactive: !station.onlineInfo }">
-              class="station_schedules unconfirmed"
+                <span>{{ station.onlineInfo?.spawns.length ?? '-' }}</span>
-              style="width: 30px"
+              </td>
-              :class="{ inactive: !station.onlineInfo }"
-            >
-              {{ station.onlineInfo?.scheduledTrainCount.unconfirmed }}
-            </td>
 
-            <td
+              <td
-              class="station_schedules confirmed"
+                class="station-schedules all"
-              style="width: 30px"
+                style="width: 30px"
-              :class="{ inactive: !station.onlineInfo }"
+                :class="{ inactive: !station.onlineInfo }"
-            >
+              >
-              {{ station.onlineInfo?.scheduledTrainCount.confirmed }}
+                {{ station.onlineInfo?.scheduledTrainCount.all ?? '-' }}
-            </td>
+              </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
 
-    <Loading v-if="apiStore.dataStatuses.connection == Status.Loading" />
+              <td
+                class="station-schedules unconfirmed"
+                style="width: 30px"
+                :class="{ inactive: !station.onlineInfo }"
+              >
+                {{ station.onlineInfo?.scheduledTrainCount.unconfirmed ?? '-' }}
+              </td>
 
-    <div class="no-stations" v-else-if="stations.length == 0">
+              <td
-      {{ $t('sceneries.no-stations') }}
+                class="station-schedules confirmed"
-    </div>
+                style="width: 30px"
+                :class="{ inactive: !station.onlineInfo }"
+              >
+                {{ station.onlineInfo?.scheduledTrainCount.confirmed ?? '-' }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <Loading
+          v-if="apiStore.dataStatuses.connection == Status.Loading && stations.length == 0"
+        />
+
+        <div class="no-stations" v-else-if="stations.length == 0">
+          {{ $t('sceneries.no-stations') }}
+        </div>
+      </div>
+    </transition>
   </section>
 </template>
 
@@ -300,6 +312,7 @@ import { HeadIdsTypes, headIconsIds, headIds } from '../../scripts/data/stationH
 import StationStatusBadge from '../Global/StationStatusBadge.vue';
 import { Status } from '../../typings/common';
 import { useApiStore } from '../../store/apiStore';
+import popupMixin from '../../mixins/popupMixin';
 
 export default defineComponent({
   props: {
@@ -311,7 +324,7 @@ export default defineComponent({
 
   emits: ['toggleDonationModal'],
   components: { Loading, StationStatusBadge },
-  mixins: [styleMixin, dateMixin, stationInfoMixin],
+  mixins: [styleMixin, dateMixin, stationInfoMixin, popupMixin],
 
   data: () => ({
     headIconsIds,
@@ -328,6 +341,7 @@ export default defineComponent({
   setup() {
     const mainStore = useMainStore();
     const apiStore = useApiStore();
+
     const stationFiltersStore = useStationFiltersStore();
 
     return {
@@ -357,6 +371,7 @@ export default defineComponent({
     openDonationModal(e: Event) {
       this.$emit('toggleDonationModal', true);
       this.mainStore.modalLastClickedTarget = e.target;
+      this.hidePopUp();
     },
 
     openForumSite(e: Event, url: string | undefined) {
@@ -366,7 +381,7 @@ export default defineComponent({
     },
 
     changeSorter(headerName: HeadIdsTypes) {
-      if (headerName == 'general' || headerName == 'routes') return;
+      if (headerName == 'general') return;
 
       this.stationFiltersStore.changeSorter(headerName);
     }
@@ -395,19 +410,27 @@ $rowCol: #424242;
 
 .table_wrapper {
   overflow: auto;
-  overflow-y: hidden;
   font-weight: 500;
+  height: 90vh;
+  min-height: 550px;
+}
+
+.no-stations {
+  text-align: center;
+  font-size: 1.5em;
+
+  padding: 1em;
+  margin: 1em 0;
+
+  background: #333;
 }
 
 table {
-  white-space: nowrap;
   border-collapse: collapse;
-  // min-width: 1350px;
+  table-layout: fixed;
   width: 100%;
-
+  min-width: 1250px;
-  @include smallScreen() {
+  white-space: wrap;
-    min-width: auto;
-  }
 
   thead tr {
     background-color: $bgCol;
@@ -417,12 +440,41 @@ table {
     position: sticky;
     top: 0;
 
-    &.header-text {
+    &.station {
-      min-width: 140px;
+      width: 12em;
+    }
+
+    &.min-lvl {
+      width: 4em;
+    }
+
+    &.status {
+      width: 10em;
+    }
+
+    &.dispatcher {
+      width: 12em;
+    }
+
+    &.dispatcher-lvl {
+      width: 6em;
+    }
+
+    &.routes-double,
+    &.routes-single {
+      width: 7em;
+    }
+
+    &.general {
+      width: 11em;
     }
 
     &.header-image {
-      min-width: 60px;
+      width: 3.5em;
+
+      &.user {
+        width: 5em;
+      }
     }
 
     padding: 0.5em 0.25em;
@@ -447,7 +499,7 @@ table {
   }
 }
 
-tr.station {
+tr {
   background-color: $rowCol;
 
   &:nth-child(even) {
@@ -461,10 +513,15 @@ tr.station {
   }
 
   td {
-    padding: 0.25em 1em;
+    padding: 0.15em 0;
     text-align: center;
-
     cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &.inactive {
+      opacity: 0.2;
+    }
 
     @include smallScreen() {
       margin: 0;
@@ -474,118 +531,95 @@ tr.station {
   }
 }
 
-td.station {
+.station-name {
-  &_name {
+  font-weight: bold;
-    font-weight: bold;
+  max-width: 200px;
 
-    &.default {
+  &.default {
-      color: $accentCol;
+    color: $accentCol;
-    }
-
-    &.nonPublic {
-      color: #bebebe;
-    }
-
-    &.unavailable {
-      font-weight: 500;
-      color: #bebebe;
-    }
   }
 
-  &_level,
+  &.nonPublic {
-  &_dispatcher-exp {
+    color: #bebebe;
-    span {
-      display: block;
-
-      width: 2em;
-      height: 2em;
-      line-height: 2em;
-      margin: 0 auto;
-    }
-
-    img {
-      width: 2em;
-      border-radius: 50%;
-    }
   }
 
-  // &_dispatcher-name {
+  &.unavailable {
-  //   position: relative;
+    font-weight: 500;
-  // }
+    color: #bebebe;
+  }
+}
 
-  &_dispatcher-name img {
+.station-level,
+.station-dispatcher-exp {
+  span {
+    display: block;
+
+    width: 2em;
+    height: 2em;
+    line-height: 2em;
+    margin: 0 auto;
+  }
+
+  img {
+    width: 2em;
+    border-radius: 50%;
+  }
+}
+
+.station-dispatcher-name {
+  img {
     max-width: 1.35em;
     vertical-align: text-bottom;
   }
-
-  &_level {
-    span {
-      background-color: #888;
-      border-radius: 50%;
-    }
-  }
-
-  &_info {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    /* Images */
-    .icon-info {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      width: 32px;
-      height: 32px;
-      font-size: 12px;
-
-      margin: 0 0.2em;
-
-      outline: 2px solid #444;
-      border-radius: 0.5em;
-
-      @include smallScreen() {
-        width: 24px;
-        height: 24px;
-        font-size: 10px;
-      }
-    }
-  }
-
-  &_tracks {
-    .no-catenary {
-      background-color: #939393;
-    }
-
-    .catenary {
-      background-color: #009dce;
-    }
-
-    .track {
-      margin: 0 0.35em;
-      padding: 0.35em;
-      font-size: 1.05em;
-      white-space: pre-wrap;
-    }
-  }
-
-  &_users,
-  &_spawns,
-  &_schedules {
-    &.inactive {
-      opacity: 0.2;
-    }
-  }
 }
 
-.station_users {
+.station-level {
   span {
-    color: gold;
+    background-color: #888;
+    border-radius: 50%;
   }
 }
 
-.station_schedules {
+.station-info {
+  .icon-info {
+    vertical-align: middle;
+    line-height: 2.5em;
+
+    width: 2.5em;
+    height: 2.5em;
+    font-size: 0.8em;
+    margin: 0 3px;
+
+    outline: 2px solid #2b2b2b;
+    border-radius: 5px;
+  }
+}
+
+.station-tracks {
+  .no-catenary {
+    background-color: #939393;
+  }
+
+  .catenary {
+    background-color: #009dce;
+  }
+
+  .separator {
+    background-color: #b3b3b3;
+    padding: 2px;
+  }
+
+  .track {
+    display: inline-block;
+    text-align: center;
+    width: 1.3em;
+    padding: 0.35em 0;
+    font-size: 1.1em;
+    margin: 0 0.2em;
+  }
+}
+
+.station-schedules {
   &.all {
     color: gold;
   }
@@ -598,18 +632,4 @@ td.station {
     color: lime;
   }
 }
-
-.separator {
-  border-left: 3px solid #b3b3b3;
-}
-
-.no-stations {
-  text-align: center;
-  font-size: 1.5em;
-
-  padding: 1em;
-  margin: 1em 0;
-
-  background: #333;
-}
 </style>

src/components/StationsView/typings.ts

@@ -16,6 +16,8 @@ export interface Filter {
   SPE: boolean;
   SUP: boolean;
   noSUP: boolean;
+  ASDEK: boolean;
+  noASDEK: boolean;
   ręczne: boolean;
   'ręczne+SPK': boolean;
   'ręczne+SCS': boolean;
@@ -42,14 +44,13 @@ export interface Filter {
   nonPublic: boolean;
   unavailable: boolean;
   abandoned: boolean;
-
   endingStatus: boolean;
   afkStatus: boolean;
   noSpaceStatus: boolean;
   unavailableStatus: boolean;
   unsignedStatus: boolean;
-
   authors: string;
-
   onlineFromHours: number;
+  withActiveTimetables: boolean;
+  withoutActiveTimetables: boolean;
 }

src/components/TrainsView/StopLabel.vue

@@ -29,8 +29,9 @@
     <span
       v-if="
         stop.duration ||
-        (stop.status == 'stopped' && stop.position != 'begin') ||
+        (stop.status == 'stopped' &&
-        stop.departureDelay != stop.arrivalDelay
+          stop.position != 'begin' &&
+          stop.departureDelay != stop.arrivalDelay)
       "
       class="date stop"
       :data-stop-types="stop.type.replace(', ', '-')"

src/components/TrainsView/TrainInfo.vue

@@ -1,60 +1,86 @@
 <template>
-  <div class="train-info">
+  <div class="train-info" :data-extended="extended">
     <section class="train-general">
-      <div class="general-info">
+      <div class="general-top-bar">
-        <b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
+        <div>
-        <span class="timetable-id" v-if="train.timetableData">
+          <b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
-          #{{ train.timetableData.timetableId }}
+          <span class="timetable-id" v-if="train.timetableData">
-        </span>
+            #{{ train.timetableData.timetableId }}
-
-        <span
-          class="timetable-warnings"
-          v-if="train.timetableData?.TWR || train.timetableData?.SKR"
-        >
-          <span class="train-badge twr" v-if="train.timetableData?.TWR" :title="$t('general.TWR')">
-            TWR
           </span>
-          <span class="train-badge skr" v-if="train.timetableData?.SKR" :title="$t('general.SKR')">
-            SKR
-          </span>
-        </span>
 
-        <strong>
+          <span
-          <span v-if="train.timetableData" class="text--primary"
+            class="timetable-warnings"
-            >{{ train.timetableData.category }}&nbsp;</span
+            v-if="train.timetableData?.TWR || train.timetableData?.SKR"
           >
-          <span class="train-number">{{ train.trainNo }}</span>
+            <span
-        </strong>
+              class="train-badge twr"
-        <span>&bull;</span>
+              v-if="train.timetableData?.TWR"
-        <b
+              :title="$t('general.TWR')"
-          class="level-badge driver"
+            >
-          :style="calculateExpStyle(train.driverLevel, train.isSupporter)"
+              TWR
-        >
+            </span>
-          {{ train.driverLevel < 2 ? 'L' : `${train.driverLevel}` }}
+            <span
-        </b>
+              class="train-badge skr"
+              v-if="train.timetableData?.SKR"
+              :title="$t('general.SKR')"
+            >
+              SKR
+            </span>
+          </span>
 
-        <div class="train-driver">
+          <strong>
+            <span v-if="train.timetableData" class="text--primary"
+              >{{ train.timetableData.category }}&nbsp;</span
+            >
+            <span class="train-number">{{ train.trainNo }}</span>
+          </strong>
+          <span>&bull;</span>
           <b
-            v-if="apiStore.donatorsData.includes(train.driverName)"
+            class="level-badge driver"
-            :title="$t('donations.driver-message')"
+            :style="calculateExpStyle(train.driverLevel, train.isSupporter)"
           >
-            {{ train.driverName }}
+            {{ train.driverLevel < 2 ? 'L' : `${train.driverLevel}` }}
-            <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
           </b>
-          <span v-else>{{ train.driverName }}</span>
+
+          <div class="train-driver">
+            <b
+              v-if="apiStore.donatorsData.includes(train.driverName)"
+              data-popup-key="DonatorPopUp"
+              :data-popup-content="$t('donations.driver-message')"
+            >
+              {{ train.driverName }}
+              <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
+            </b>
+
+            <span v-else>{{ train.driverName }}</span>
+          </div>
+        </div>
+
+        <div v-if="extended">
+          <button class="btn-timetable btn--image btn--action" @click="navigateToJournal">
+            <img src="/images/icon-train.svg" alt="train icon" />
+            <span>
+              {{ $t('trains.journal-button') }}
+            </span>
+          </button>
+
+          <button class="btn-exit btn--image btn--action" @click="closeModal">
+            <img src="/images/icon-exit.svg" alt="modal exit icon" />
+          </button>
         </div>
       </div>
 
       <div class="general-timetable" v-if="train.timetableData">
         <strong>{{ train.timetableData.route.replace('|', ' - ') }}</strong>
-        <img
+        <span
           v-if="getSceneriesWithComments(train.timetableData).length > 0"
-          class="image-warning"
+          data-popup-key="TrainCommentsPopUp"
-          src="/images/icon-warning.svg"
+          :data-popup-content="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(
-          :title="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(
             train.timetableData
           )})`"
-        />
+        >
+          <img class="image-warning" src="/images/icon-warning.svg" />
+        </span>
       </div>
 
       <hr style="margin: 0.25em 0" />
@@ -67,7 +93,7 @@
       </div>
 
       <div class="general-status">
-        <div class="timetable-progress" v-if="train.timetableData">
+        <div class="status-timetable-progress" v-if="train.timetableData">
           <ProgressBar :progressPercent="confirmedPercentage(train.timetableData.followingStops)" />
 
           <span class="progress-distance">
@@ -91,29 +117,43 @@
         </div>
       </div>
 
-      <div class="driver_position text--grayed" style="margin-top: 0.25em">
+      <div class="general-stats" v-if="extended">
+        <div>
+          <img src="/images/icon-length.svg" alt="length icon" />
+          {{ train.length }}m
+        </div>
+
+        <div>
+          <img src="/images/icon-mass.svg" alt="mass icon" />
+          {{ (train.mass / 1000).toFixed(1) }}t
+        </div>
+
+        <div>
+          <img src="/images/icon-speed.svg" alt="speed icon" />
+          {{ train.speed }} km/h
+        </div>
+      </div>
+
+      <div class="text--grayed" style="margin-top: 0.25em">
         {{ displayTrainPosition(train) }}
       </div>
     </section>
 
-    <section class="train-stats">
+    <section class="train-stats" v-if="!extended">
-      <TrainThumbnail :name="train.locoType" :onlyFirstSegment="true" />
+      <StockList :trainStockList="train.stockList" :tractionOnly="true" />
-
-      <div class="text--grayed">
-        {{ train.locoType }}
-        <span v-if="train.stockList.length > 1">
-          &nbsp;&bull; {{ $t('trains.cars') }}:
-          <span class="count">{{ train.stockList.length - 1 }}</span>
-        </span>
-      </div>
 
       <div>
-        <span v-for="(stat, i) in STATS.main" :key="stat.name">
+        <span>{{ train.speed }}km/h</span>
-          <span v-if="i > 0"> &bull; </span>
+
-          <span
+        <div>
-            >{{ `${~~((train as any)[stat.name] * (stat.multiplier || 1))}${stat.unit}` }}
+          <span> {{ train.length }}m</span>
+          &bull;
+          <span> {{ (train.mass / 1000).toFixed(1) }}t</span>
+          <span v-if="train.stockList.length > 1">
+            &bull;
+            {{ $t('trains.cars') }}: {{ train.stockList.length - 1 }}
           </span>
-        </span>
+        </div>
       </div>
     </section>
   </div>
@@ -125,13 +165,14 @@ import styleMixin from '../../mixins/styleMixin';
 import trainInfoMixin from '../../mixins/trainInfoMixin';
 import Train from '../../scripts/interfaces/Train';
 import ProgressBar from '../Global/ProgressBar.vue';
-import TrainThumbnail from '../Global/TrainThumbnail.vue';
 import { useMainStore } from '../../store/mainStore';
 import { useApiStore } from '../../store/apiStore';
+import StockList from '../Global/StockList.vue';
+import modalTrainMixin from '../../mixins/modalTrainMixin';
 
 export default defineComponent({
-  mixins: [trainInfoMixin, styleMixin],
+  mixins: [trainInfoMixin, styleMixin, modalTrainMixin],
-  components: { ProgressBar, TrainThumbnail },
+  components: { ProgressBar, StockList },
 
   props: {
     train: {
@@ -139,8 +180,7 @@ export default defineComponent({
       required: true
     },
     extended: {
-      type: Boolean,
+      type: Boolean
-      default: true
     }
   },
 
@@ -149,25 +189,31 @@ export default defineComponent({
       store: useMainStore(),
       apiStore: useApiStore()
     };
+  },
+
+  methods: {
+    navigateToJournal() {
+      this.$router.push({
+        path: '/journal/timetables',
+        query: {
+          'search-driver': this.train.driverName
+        }
+      });
+
+      this.closeModal();
+    }
   }
 });
 </script>
 
-<!-- Global style for TrainThumbnail -->
-<style lang="scss">
-.train-stats .train-thumbnail {
-  max-width: 100%;
-}
-</style>
-
 <style lang="scss" scoped>
 @import '../../styles/responsive.scss';
 @import '../../styles/badge.scss';
 
 .image-warning {
   height: 1em;
-
   margin-left: 0.5em;
+  vertical-align: middle;
 }
 
 .train-stats {
@@ -178,7 +224,7 @@ export default defineComponent({
   flex-direction: column;
   text-align: center;
 
-  gap: 0.25em;
+  line-height: 1.5em;
 }
 
 .train-info {
@@ -186,6 +232,10 @@ export default defineComponent({
   grid-template-columns: 2fr 1fr;
   grid-template-rows: 1fr;
 
+  &[data-extended='true'] {
+    grid-template-columns: 1fr;
+  }
+
   padding: 1em;
 
   background-color: #1a1a1a;
@@ -220,14 +270,29 @@ export default defineComponent({
   font-size: 0.8em;
 }
 
-.general-info {
+.general-top-bar {
   display: flex;
-  align-items: center;
+  justify-content: space-between;
   flex-wrap: wrap;
+  gap: 0.5em;
 
-  gap: 0.25em;
+  & > div {
-  margin-right: 1.5em;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    gap: 0.25em;
+  }
 }
+
+.btn-timetable {
+  padding: 0.25em;
+}
+
+.btn-exit {
+  padding: 0.25em;
+}
+
 .general-status {
   display: flex;
   align-items: center;
@@ -236,6 +301,27 @@ export default defineComponent({
   gap: 0.25em;
 }
 
+.general-stats {
+  display: flex;
+  gap: 0.5em;
+  flex-wrap: wrap;
+
+  & > div {
+    display: flex;
+    align-items: center;
+    gap: 0.25em;
+  }
+
+  img {
+    width: 1.5em;
+  }
+}
+
+.general-timetable {
+  display: flex;
+  align-items: center;
+}
+
 .status-badges {
   display: flex;
   flex-wrap: wrap;
@@ -247,17 +333,7 @@ export default defineComponent({
   }
 }
 
-.general-timetable {
+.status-timetable-progress {
-  display: flex;
-  align-items: center;
-}
-
-.timetable-warnings {
-  display: flex;
-  gap: 0.25em;
-}
-
-.timetable-progress {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -267,32 +343,19 @@ export default defineComponent({
   margin-right: 0.25em;
 }
 
+.timetable-warnings {
+  display: flex;
+  gap: 0.25em;
+}
+
 @include smallScreen() {
   .train-info {
     grid-template-columns: 1fr;
     gap: 1em 0;
-    text-align: center;
-
-    font-size: 1.15em;
   }
 
-  .general-info,
+  .btn-timetable > span {
-  .general-status,
+    display: none;
-  .general-timetable {
-    justify-content: center;
-  }
-
-  .timetable-progress {
-    justify-content: center;
-  }
-
-  .comments {
-    flex-direction: column;
-    justify-content: center;
-
-    img {
-      margin: 0 0 0.5em 0;
-    }
   }
 }
 </style>

src/components/TrainsView/TrainModal.vue

@@ -2,11 +2,7 @@
   <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">
+      <TrainInfo :train="chosenTrain" :extended="true" ref="trainInfo" />
-        <img src="/images/icon-exit.svg" alt="close card" />
-      </button>
-
-      <TrainInfo :train="chosenTrain" :extended="false" ref="trainInfo" />
       <TrainSchedule :train="chosenTrain" tabindex="0" />
     </div>
   </div>
@@ -17,17 +13,27 @@ import { defineComponent } from 'vue';
 import modalTrainMixin from '../../mixins/modalTrainMixin';
 import TrainInfo from './TrainInfo.vue';
 import TrainSchedule from './TrainSchedule.vue';
+import Train from '../../scripts/interfaces/Train';
 
 export default defineComponent({
   components: { TrainInfo, TrainSchedule },
   mixins: [modalTrainMixin],
 
-  activated() {
+  computed: {
-    const contentEl = this.$refs['content'] as HTMLElement;
+    chosenTrain() {
+      return this.store.trainList.find((train) => train.trainId == this.store.chosenModalTrainId);
+    }
+  },
 
-    this.$nextTick(() => {
+  watch: {
-      contentEl.focus();
+    chosenTrain(train: Train | undefined) {
-    });
+      this.$nextTick(() => {
+        if (train) {
+          const contentEl = this.$refs['content'] as HTMLElement;
+          contentEl.focus();
+        }
+      });
+    }
   }
 });
 </script>
@@ -49,23 +55,6 @@ export default defineComponent({
   }
 }
 
-.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;

src/components/TrainsView/TrainSchedule.vue

@@ -30,19 +30,12 @@
             <StopLabel :stop="stop" />
           </span>
 
-          <div class="stop_line" v-if="i < scheduleStops.length - 1">
+          <div class="stop_line">
             <!-- Grid placeholder -->
-            <div>
+            <div></div>
-              <!-- <div class="speed-departure" v-if="stop.currentDepartureRoute">
-                {{ stop.currentDepartureRoute.routeSpeed }}
-              </div>
-              <div class="speed-next-arrival" v-if="stop.nextArrivalRoute">
-                {{ stop.nextArrivalRoute.routeSpeed }}
-              </div> -->
-            </div>
 
             <div class="progress">
-              <div class="line line_connection"></div>
+              <div class="line line_connection" v-if="i < scheduleStops.length - 1"></div>
             </div>
 
             <div class="bottom-line-info">
@@ -121,13 +114,6 @@ export interface TrainScheduleStop {
   sceneryHash: string;
   distance: number;
 
-  // arrivalTrackCount: number;
-  // departureTrackCount: number;
-
-  // currentArrivalRoute?: StationRoutesInfo;
-  // currentDepartureRoute?: StationRoutesInfo;
-  // nextArrivalRoute?: StationRoutesInfo;
-
   arrivalLine: string | null;
   departureLine: string | null;
 
@@ -157,8 +143,6 @@ export default defineComponent({
   computed: {
     scheduleStops(): TrainScheduleStop[] {
       let currentSceneryIndex = 0;
-      // let lastDepartureTrackCount = 2;
-      // let lastArrivalTrackCount = 2;
 
       return (
         this.train.timetableData?.followingStops.map((stop, i, arr) => {
@@ -170,33 +154,6 @@ export default defineComponent({
           )
             currentSceneryIndex++;
 
-          // const sceneryInfo = this.apiStore.sceneryData.find(
-          //   (sd) =>
-          //     sd.name.toLocaleLowerCase() ==
-          //     this.timetableSceneryNames[currentSceneryIndex].toLocaleLowerCase()
-          // );
-
-          // const nextSceneryInfo = this.apiStore.sceneryData.find(
-          //   (sd) =>
-          //     sd.name.toLocaleLowerCase() ==
-          //     this.timetableSceneryNames[currentSceneryIndex + 1]?.toLocaleLowerCase()
-          // );
-
-          // const currentDepartureRoute = sceneryInfo?.routesInfo.find(
-          //   (r) => r.routeName == stop.departureLine
-          // );
-
-          // const currentArrivalRoute = sceneryInfo?.routesInfo.find(
-          //   (r) => r.routeName == stop.arrivalLine
-          // );
-
-          // const nextArrivalRoute = nextSceneryInfo?.routesInfo.find(
-          //   (r) => r.routeName == arr[i + 1]?.arrivalLine
-          // );
-
-          // lastDepartureTrackCount = currentDepartureRoute?.routeTracks ?? lastDepartureTrackCount;
-          // lastArrivalTrackCount = currentArrivalRoute?.routeTracks ?? lastArrivalTrackCount;
-
           return {
             nameHtml: stop.stopName,
             nameRaw: stop.stopNameRAW,
@@ -217,16 +174,6 @@ export default defineComponent({
             arrivalLine: stop.arrivalLine,
             departureLine: stop.departureLine,
 
-            // arrivalSpeed: nextArrivalRoute?.routeSpeed ?? null,
-            // departureSpeed: currentDepartureRoute?.routeSpeed ?? null,
-
-            // arrivalTrackCount: currentArrivalRoute?.routeTracks ?? lastArrivalTrackCount,
-            // departureTrackCount: currentDepartureRoute?.routeTracks ?? lastDepartureTrackCount,
-
-            // currentArrivalRoute,
-            // currentDepartureRoute,
-            // nextArrivalRoute,
-
             type: stop.stopType,
             distance: stop.stopDistance,
             isActive: this.activeMinorStops.includes(i),
@@ -234,7 +181,7 @@ export default defineComponent({
             isSBL: /sbl/gi.test(stop.stopName),
             position: stop.beginsHere ? 'begin' : stop.terminatesHere ? 'end' : 'en-route',
             sceneryHash: '',
-            sceneryName: this.timetableSceneryNames[currentSceneryIndex],
+            sceneryName: this.train.timetableData!.sceneryNames[currentSceneryIndex],
             status: stop.confirmed ? 'confirmed' : stop.stopped ? 'stopped' : 'unconfirmed'
           };
         }) ?? []
@@ -269,19 +216,6 @@ export default defineComponent({
       }
 
       return activeMinorStopList;
-    },
-
-    timetableSceneryNames() {
-      if (!this.train.timetableData?.sceneries) return [];
-
-      return this.train.timetableData?.sceneries
-        .map(
-          (sceneryHash) =>
-            this.store.onlineSceneryList.find((st) => st.hash === sceneryHash)?.name ??
-            this.apiStore.sceneryData.find((sd) => sd.hash === sceneryHash)?.name ??
-            sceneryHash
-        )
-        .reverse();
     }
   },
 

src/components/TrainsView/TrainTable.vue

@@ -1,13 +1,13 @@
 <template>
   <transition name="status-anim" mode="out-in" tag="div" class="train-table">
     <div :key="apiStore.dataStatuses.connection">
-      <div class="table-info" key="offline" v-if="store.isOffline">
+      <div class="table-warning" key="offline" v-if="store.isOffline">
         {{ $t('app.offline') }}
       </div>
 
       <Loading v-else-if="apiStore.dataStatuses.connection == Status.Loading" key="loading" />
 
-      <div class="table-info" key="no-trains" v-else-if="trains.length == 0">
+      <div class="table-warning" key="no-trains" v-else-if="trains.length == 0">
         {{ $t('trains.no-trains') }}
       </div>
 
@@ -20,7 +20,7 @@
           @click.stop="selectModalTrain(train.trainId, $event.currentTarget)"
           @keydown.enter="selectModalTrain(train.trainId, $event.currentTarget)"
         >
-          <TrainInfo :train="train" />
+          <TrainInfo :train="train" :extended="false" />
         </li>
       </transition-group>
     </div>
@@ -105,7 +105,7 @@ export default defineComponent({
   overflow-x: hidden;
 }
 
-.table-info {
+.table-warning {
   text-align: center;
 
   padding: 1em 0;

src/components/TrainsView/newFile.ts

@@ -1,14 +0,0 @@
-import { PropType, defineComponent } from 'vue';
-import dateMixin from '../../mixins/dateMixin';
-import { TrainScheduleStop } from './TrainSchedule.vue';
-
-export default defineComponent({
-  mixins: [dateMixin],
-
-  props: {
-    stop: {
-      type: Object as PropType<TrainScheduleStop>,
-      required: true
-    }
-  }
-});

src/data/mockActiveData.json

@@ -8732,7 +8732,7 @@
             "departureDelay": 0,
             "beginsHere": true,
             "terminatesHere": false,
-            "confirmed": 0,
+            "confirmed": 1,
             "stopped": 0,
             "stopTime": null
           },
@@ -9380,7 +9380,7 @@
             "stopType": "",
             "stopDistance": 123.62,
             "pointId": "1663532077406",
-            "comments": null,
+            "comments": "test121",
             "mainStop": true,
             "arrivalLine": "Sk",
             "arrivalTimestamp": 1701889320000,

src/data/options.json

@@ -1,13 +1,14 @@
 {
   "optionSections": [
+    "status",
+    "timetables",
     "reality",
     "package-access",
     "access",
     "control",
-    "addons",
     "blockades",
     "signals",
-    "status"
+    "addons"
   ],
 
   "options": [
@@ -138,6 +139,20 @@
       "value": true,
       "defaultValue": true
     },
+    {
+      "id": "ASDEK",
+      "name": "ASDEK",
+      "section": "addons",
+      "value": true,
+      "defaultValue": true
+    },
+    {
+      "id": "noASDEK",
+      "name": "noASDEK",
+      "section": "addons",
+      "value": true,
+      "defaultValue": true
+    },
     {
       "id": "SBL",
       "name": "SBL",
@@ -228,6 +243,20 @@
       "section": "status",
       "value": true,
       "defaultValue": true
+    },
+    {
+      "id": "withActiveTimetables",
+      "name": "withActiveTimetables",
+      "section": "timetables",
+      "value": true,
+      "defaultValue": true
+    },
+    {
+      "id": "withoutActiveTimetables",
+      "name": "withoutActiveTimetables",
+      "section": "timetables",
+      "value": true,
+      "defaultValue": true
     }
   ],
   "sliders": [

src/http.ts

@@ -1,10 +0,0 @@
-import axios from 'axios';
-
-const http = axios.create({
-  baseURL:
-    import.meta.env.VITE_API_MODE === 'development'
-      ? 'http://localhost:3001'
-      : 'https://stacjownik.spythere.eu'
-});
-
-export default http;

src/i18n.ts

@@ -0,0 +1,19 @@
+import enLang from './locales/en.json';
+import plLang from './locales/pl.json';
+
+import { createI18n } from 'vue-i18n';
+
+const i18n = createI18n({
+  locale: 'pl',
+  legacy: false,
+  warnHtmlMessage: false,
+  fallbackLocale: 'pl',
+
+  messages: {
+    en: enLang,
+    pl: plLang
+  },
+  enableLegacy: false
+});
+
+export default i18n;

src/locales/en.json

@@ -2,6 +2,7 @@
   "donations": {
     "button-title": "TOSS A COIN",
     "header": "Toss a coin to Stacjownik!",
+    "donator-title": "Project is supported by more than <b>{count}</b> people, including:",
     "p1": "<b>Hello o7!</b> This is Spythere, the creator of Stacjownik, Pojazdownik and several other applications that enhance the gameplay of Train Driver 2!",
     "p2": "{b1} is a completely free tool, created and continuously developed for the Train Driver 2 simulator community since 2020. However, a part of the project is sustained solely through my private financial contribution.  Features such as  {b2} or {b3} (operating on my {link} - to which you are warmly invited) must function on a dedicated server where they can collect and process data, and then display it on the website.",
     "p2-b1": "Stacjownik",
@@ -25,6 +26,13 @@
     "TWR": "High risk freight train",
     "SKR": "Train with exceeded gauge"
   },
+  "update": {
+    "title": "Stacjownik app update!",
+    "version": "Version {0}",
+    "confirm-button": "UPDATE NOW",
+    "later-button": "LATER",
+    "content": "context tooltips when hovering over project sponsors and timetable comment warnings\nvehicle image preview when hovering over its thumbnail in the active timetable card view and timetable journal\nlink to the driver's timetable history in the active timetable card view\nlink to the driver's active timetable card view in the timetable journal (available for online trains only)\nnew update card with version changelog"
+  },
   "app": {
     "sceneries": "SCENERIES",
     "trains": "TRAINS",
@@ -40,12 +48,10 @@
   "footer": {
     "discord": "Stacjownik Discord server"
   },
-  "update": {
+
-    "title": "New version of the app is available!",
+  "vehicle-preview": {
-    "paragraph1": "Enjoy the application and may the green signal be with you!",
+    "loading": "Loading preview...",
-    "release-link": "Click here to browse version changelog (GitHub)",
+    "error": "Oops! The vehicle preview seems to be missing! :/"
-    "confirm-button": "UPDATE NOW",
-    "later-button": "LATER"
   },
   "data-status": {
     "S1-offline": "<b>S1 signal</b> <br> The app is working in offline mode!",
@@ -57,20 +63,6 @@
     "S5-dispatchers": "<b>S5 signal</b> <br> Cannot load dispatchers status data!",
     "S5-trains": "<b>S5 signal</b> <br> Cannot load online trains data!"
   },
-  "desc": {
-    "control-type": "Control type: ",
-    "signals-type": "Signals type:  ",
-    "SBL": "This scenery has automatic block signalling (ABS/SBL) system on following routes: ",
-    "SUP": "Requires the SUP application (level crossing remote control simulator)",
-    "TWB-all": "This scenery has two-way route blockade on all routes",
-    "TWB-routes": "This scenery has two-way route blockade on following routes: ",
-    "default": "This scenery is available by default",
-    "non-public": "This scenery is not public",
-    "unknown": "This scenery isn't recognizable right now",
-    "unavailable": "This scenery is unavailable",
-    "abandoned": "This scenery is no longer supported by its creators",
-    "real": "Scenery with real lines: "
-  },
   "signals": {
     "title": "Signal type",
     "współczesna": "modern",
@@ -176,7 +168,8 @@
       "signals": "SIGNALLING",
       "addons": "ADDITIONAL PROGRAMS",
       "blockades": "BLOCK SIGNALLING",
-      "status": "ONLINE STATUS"
+      "status": "ONLINE STATUS",
+      "timetables": "ACTIVE TIMETABLES"
     },
 
     "all-available": "ALL AVAILABLE",
@@ -210,6 +203,9 @@
     "SUP": "SUP (RASP-UZK)",
     "noSUP": "WITHOUT SUP",
 
+    "ASDEK": "ASDEK",
+    "noASDEK": "NO ASDEK",
+
     "SBL": "AUTOMATIC (SBL)",
     "PBL": "SEMIAUTOMATIC (PBL)",
 
@@ -219,6 +215,10 @@
     "historical": "HISTORICAL",
     "free": "FREE",
     "occupied": "OCCUPIED",
+
+    "withActiveTimetables": "ACTIVE",
+    "withoutActiveTimetables": "NO ACTIVE",
+
     "sliders": {
       "min-lvl": "MIN. REQUIRED DISPATCHER LEVEL",
       "max-lvl": "MAX. REQUIRED DISPATCHER LEVEL",
@@ -241,18 +241,41 @@
     "close": "CLOSE FILTERS"
   },
   "sceneries": {
-    "station": "Station",
+    "headers": {
-    "min-lvl": "Min. dispatcher\nlevel",
+      "station": "Scenery",
-    "status": "Status",
+      "min-lvl": "Scenery\nlevel",
-    "dispatcher": "Dispatcher",
+      "status": "Status",
-    "dispatcher-lvl": "Dispatcher\nlevel",
+      "dispatcher": "Dispatcher",
-    "routes": "Routes\ndouble / single",
+      "dispatcher-lvl": "Dispatcher\nlevel",
-    "general": "General info",
+      "routes-single": "1-track\nroutes",
-    "user": "Drivers online",
+      "routes-double": "2-track\nroutes",
-    "spawn": "Spawns online",
+      "general": "General info",
-    "timetableAll": "Active timetables",
+      "user": "Drivers online",
-    "timetableConfirmed": "Confirmed timetables",
+      "like": "Dispatcher rating",
-    "timetableUnconfirmed": "Unconfirmed timetables",
+      "spawn": "Spawns online",
+      "timetableAll": "Active timetables",
+      "timetableConfirmed": "Confirmed timetables",
+      "timetableUnconfirmed": "Unconfirmed timetables"
+    },
+    "info": {
+      "control-type": "Control type: ",
+      "signals-type": "Signals type: ",
+      "SBL": "This scenery has automatic block signalling (ABS/SBL) system on following routes: ",
+      "SUP": "Requires the SUP program (level crossing remote control)",
+      "ASDEK": "Requires the ASDEK program (defect detection of moving rolling stock)",
+      "TWB-all": "This scenery has two-way route blockade on all routes",
+      "TWB-routes": "This scenery has two-way route blockade on following routes: ",
+      "default": "This scenery is available by default",
+      "non-public": "This scenery is not public",
+      "unavailable": "This scenery is unavailable",
+      "abandoned": "This scenery is no longer supported by its creators",
+      "unknown": "This scenery isn't recognizable right now",
+      "real": "Scenery with real lines: ",
+      "double-track-routes-catenary": "Electrified double-track routes count: ",
+      "single-track-routes-catenary": "Electrified single-track routes count: ",
+      "double-track-routes-other": "Not electrified double-track routes count: ",
+      "single-track-routes-other": "Not electrified single-track routes count:  "
+    },
     "no-stations": "No stations to show here!",
     "scenery-search": "Search for scenery..."
   },
@@ -297,7 +320,9 @@
     "last-seen-ago": "since {minutes} minutes",
 
     "scenery-offline": "Offline ride",
-    "timeout": "An error occured while trying to refresh SWDR timetable data!"
+    "timeout": "An error occured while trying to refresh SWDR timetable data!",
+
+    "journal-button": "DRIVER'S JOURNAL"
   },
   "train-stats": {
     "stats-button": "STATISTICS",
@@ -333,6 +358,7 @@
     "timetable-active": "ACTIVE",
     "timetable-fulfilled": "FULFILLED",
     "timetable-abandoned": "ABANDONED",
+    "timetable-online-button": "ONLINE TIMETABLE",
 
     "online-since": "ONLINE SINCE",
     "duty-lasted": "The duty lasted",

src/locales/pl.json

@@ -2,8 +2,9 @@
   "donations": {
     "button-title": "GROSZA DAJ",
     "header": "Grosza daj Stacjownikowi!",
+    "donator-title": "Projekt ma już ponad <b>{count}</b> wspierających, w tym:",
     "p1": "<b>Hej o7!</b> Z tej strony Spythere, twórca Stacjownika, Pojazdownika oraz kilku innych aplikacji wspomagających rozgrywkę symulatora Train Driver 2!",
-    "p2": "{b1} to narzędzie całkowicie darmowe, tworzone i rozwijane dla społeczności symulatora TD2 nieprzerwanie od 2020 roku. Jednakże, część projektu jest podtrzymywana wyłącznie dzięki mojemu prywatnemu wkładowi finansowemu. Funkcje takie jak {b2} czy też {b3} działający na moim {link} (na który serdeczne zapraszam) muszą działać na wydzielonym serwerze, gdzie będą mogły zbierać i przetwarzać dane, aby następnie pokazać je na stronie.",
+    "p2": "{b1} to narzędzie całkowicie darmowe, tworzone i rozwijane dla społeczności symulatora TD2 nieprzerwanie od 2020 roku. Jednakże, część projektu jest podtrzymywana wyłącznie dzięki mojemu prywatnemu wkładowi finansowemu. Funkcje takie jak {b2} czy też {b3} działający na moim {link} (na który serdecznie zapraszam) muszą działać na wydzielonym serwerze, gdzie będą mogły zbierać i przetwarzać dane, aby następnie pokazać je na stronie.",
     "p2-b1": "Stacjownik",
     "p2-b2": "Dziennik",
     "p2-b3": "Stacjobot",
@@ -25,6 +26,13 @@
     "TWR": "Towar niebezpieczny wysokiego ryzyka",
     "SKR": "Przekroczona skrajnia"
   },
+  "update": {
+    "title": "Aktualizacja Stacjownika!",
+    "version": "Wersja {0}",
+    "confirm-button": "UPDATE NOW",
+    "later-button": "LATER",
+    "content": "dymki kontekstowe po najechaniu kursorem na m.in. sponsorów projektu i uwagi eksploatacyjne\npodgląd pojazdu po najechaniu kursorem na jego miniaturkę w karcie aktywnego rozkładu jazdy oraz dzienniku RJ\nodnośnik do historii RJ maszynisty w widoku karty aktywnego rozkładu jazdy\nodnośnik do karty aktywnego rozkładu jazdy maszynisty w dzienniku (dostępny tylko dla pociągów online)\nnowa karta ze zmianami w aktualizacji"
+  },
   "app": {
     "sceneries": "SCENERIE",
     "trains": "POCIĄGI",
@@ -37,6 +45,10 @@
   "footer": {
     "discord": "Serwer Discord Stacjownika"
   },
+  "vehicle-preview": {
+    "loading": "Ładowanie podglądu...",
+    "error": "Ups! Nie znaleziono podglądu pojazdu! :/"
+  },
   "data-status": {
     "S1-offline": "<b>Sygnał S1</b> <br> Aplikacja działa w trybie offline!",
     "S1a-connection": "<b>Sygnał S1a</b> <br> Błąd podczas próby połączenia się z API Stacjownika!",
@@ -47,18 +59,6 @@
     "S5-dispatchers": "<b>Sygnał S5</b> <br> Błąd podczas pobierania danych o statusach dyżurnych ruchu!",
     "S5-trains": "<b>Sygnał S5</b>  <br> Błąd podczas pobierania danych o pociągach online!"
   },
-  "desc": {
-    "control-type": "Sterowanie:",
-    "signals-type": "Sygnalizacja:",
-    "SBL": "Sceneria posiada SBL na szlakach:",
-    "SUP": "Wymaga programu SUP do kontroli systemu RASP-UZK",
-    "default": "Sceneria dostępna domyślnie w paczce z grą",
-    "non-public": "Sceneria niepubliczna",
-    "unavailable": "Sceneria niedostępna",
-    "unknown": "Nieznana sceneria",
-    "real": "Sceneria z realnymi liniami kolejowymi:",
-    "abandoned": "Sceneria wycofana z rozgrywki"
-  },
   "signals": {
     "title": "Sygnalizacja",
     "współczesna": "współczesna",
@@ -165,7 +165,8 @@
       "signals": "TYP SYGNALIZACJI",
       "addons": "DODATKOWE PROGRAMY",
       "blockades": "BLOKADY LINIOWE",
-      "status": "STATUS ONLINE"
+      "status": "STATUS ONLINE",
+      "timetables": "AKTYWNE ROZKŁADY JAZDY"
     },
 
     "all-available": "WSZYSTKIE DOSTĘPNE",
@@ -197,6 +198,9 @@
     "SUP": "SUP (RASP-UZK)",
     "noSUP": "BEZ SUP",
 
+    "ASDEK": "ASDEK",
+    "noASDEK": "BEZ ASDEK-a",
+
     "SBL": "SAMOCZYNNA",
     "PBL": "PÓŁSAMOCZYNNA",
 
@@ -209,6 +213,9 @@
     "free": "WOLNA",
     "occupied": "ZAJĘTA",
 
+    "withActiveTimetables": "AKTYWNE",
+    "withoutActiveTimetables": "BEZ AKTYWNYCH",
+
     "sliders": {
       "min-lvl": "MIN. WYMAGANY POZIOM DYŻURNEGO",
       "max-lvl": "MAKS. WYMAGANY POZIOM DYŻURNEGO",
@@ -231,19 +238,39 @@
     "close": "ZAMKNIJ FILTRY"
   },
   "sceneries": {
-    "station": "Stacja",
+    "headers": {
-    "abbr": "Skrót\nposterunku",
+      "station": "Sceneria",
-    "min-lvl": "Min. poziom\ndyżurnego",
+      "min-lvl": "Poziom\nscenerii",
-    "status": "Status",
+      "status": "Status",
-    "dispatcher": "Dyżurny",
+      "dispatcher": "Dyżurny",
-    "dispatcher-lvl": "Poziom\ndyżurnego",
+      "dispatcher-lvl": "Poziom\ndyżurnego",
-    "routes": "Szlaki\n2tor / 1tor",
+      "routes-single": "Szlaki\n1-torowe",
-    "general": "Informacje\nogólne",
+      "routes-double": "Szlaki\n2-torowe",
-    "user": "Maszyniści online",
+      "general": "Informacje\nogólne",
-    "spawn": "Otwarte spawny",
+      "user": "Maszyniści online",
-    "timetableAll": "Aktywne rozkłady jazdy",
+      "like": "Ocena dyżurnego",
-    "timetableConfirmed": "Zatwierdzone rozkłady jazdy",
+      "spawn": "Otwarte spawny",
-    "timetableUnconfirmed": "Niezatwierdzone rozkłady jazdy",
+      "timetableAll": "Aktywne rozkłady jazdy",
+      "timetableConfirmed": "Zatwierdzone rozkłady jazdy",
+      "timetableUnconfirmed": "Niezatwierdzone rozkłady jazdy"
+    },
+    "info": {
+      "control-type": "Sterowanie: ",
+      "signals-type": "Sygnalizacja: ",
+      "SBL": "Sceneria posiada SBL na szlakach: ",
+      "SUP": "Wymaga programu SUP do kontroli systemu RASP-UZK",
+      "ASDEK": "Wymaga programu ASDEK do detekcji stanów awaryjnych taboru w ruchu",
+      "default": "Sceneria dostępna domyślnie w paczce z grą",
+      "non-public": "Sceneria niepubliczna",
+      "unavailable": "Sceneria niedostępna",
+      "abandoned": "Sceneria wycofana z rozgrywki",
+      "unknown": "Nieznana sceneria",
+      "real": "Sceneria z realnymi liniami kolejowymi: ",
+      "double-track-routes-catenary": "Liczba zelektryfikowanych szlaków dwutorowych: ",
+      "single-track-routes-catenary": "Liczba zelektryfikowanych szlaków jednotorowych: ",
+      "double-track-routes-other": "Liczba niezelektryfikowanych szlaków dwutorowych: ",
+      "single-track-routes-other": "Liczba niezelektryfikowanych szlaków jednotorowych: "
+    },
     "no-stations": "Brak stacji do wyświetlenia!",
     "scenery-search": "Wyszukaj scenerię..."
   },
@@ -279,7 +306,9 @@
 
     "scenery-offline": "Przejazd offline",
 
-    "timeout": "Wystąpił problem z aktualizacją rozkładów jazdy z SWDR"
+    "timeout": "Wystąpił problem z aktualizacją rozkładów jazdy z SWDR",
+
+    "journal-button": "DZIENNIK MASZYNISTY"
   },
   "train-stats": {
     "stats-button": "STATYSTYKI",
@@ -321,6 +350,7 @@
     "timetable-active": "AKTYWNY",
     "timetable-fulfilled": "WYPEŁNIONY",
     "timetable-abandoned": "PORZUCONY",
+    "timetable-online-button": "RJ ONLINE",
 
     "stock-info": "DODATKOWE INFORMACJE",
     "stock-length": "Długość",

src/main.ts

@@ -2,26 +2,12 @@ import { createApp, Directive, ref } from 'vue';
 import App from './App.vue';
 import router from './router';
 
-import enLang from './locales/en.json';
+import i18n from './i18n';
-import plLang from './locales/pl.json';
 
-import { createI18n } from 'vue-i18n';
 import { createPinia } from 'pinia';
 import useCustomSW from './mixins/useCustomSW';
 
-const i18n = createI18n({
+// Service worker
-  locale: 'pl',
-  legacy: false,
-  warnHtmlMessage: false,
-  fallbackLocale: 'pl',
-  messages: {
-    en: enLang,
-    pl: plLang
-  },
-  enableLegacy: false
-});
-
-// SW
 useCustomSW();
 
 const clickOutsideDirective: Directive = {

src/mixins/modalTrainMixin.ts

@@ -8,12 +8,6 @@ export default defineComponent({
     };
   },
 
-  computed: {
-    chosenTrain() {
-      return this.store.trainList.find((train) => train.trainId == this.store.chosenModalTrainId);
-    }
-  },
-
   methods: {
     selectModalTrain(trainId: string, target?: EventTarget | null) {
       this.store.chosenModalTrainId = trainId;
@@ -23,6 +17,7 @@ export default defineComponent({
 
     closeModal() {
       this.store.chosenModalTrainId = undefined;
+      this.store.popUpData.key = null;
 
       setTimeout(() => {
         (this.store.modalLastClickedTarget as any)?.focus();

src/mixins/popupMixin.ts

@@ -0,0 +1,27 @@
+import { defineComponent } from 'vue';
+import { useMainStore } from '../store/mainStore';
+import { PopUpType, popupKeys } from '../store/typings';
+
+const isPopUp = (v: any): v is PopUpType => popupKeys.includes(v);
+
+export default defineComponent({
+  data() {
+    return {
+      store: useMainStore()
+    };
+  },
+
+  methods: {
+    showPopUp(e: MouseEvent, componentKey: string, value?: string) {
+      if (!isPopUp(componentKey)) return;
+
+      this.store.popUpData['key'] = componentKey;
+      this.store.popUpData['content'] = value ?? '';
+    },
+
+    hidePopUp() {
+      this.store.popUpData['key'] = null;
+      this.store.popUpData['content'] = '';
+    }
+  }
+});

src/mixins/trainInfoMixin.ts

@@ -148,11 +148,6 @@ export default defineComponent({
       if (distance < 1000) return `${distance}m`;
 
       return `${(distance / 1000).toPrecision(2)}km`;
-    },
-
-    onImageError(e: Event) {
-      const imageEl = e.target as HTMLImageElement;
-      imageEl.src = '/images/icon-unknown.png';
     }
   }
 });

src/router/index.ts

@@ -1,6 +1,4 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
-import JournalDispatchersVue from '../views/JournalDispatchers.vue';
-import JournalTimetablesVue from '../views/JournalTimetables.vue';
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -38,7 +36,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/journal/timetables',
     name: 'JournalTimetables',
-    component: JournalTimetablesVue,
+    component: () => import('../views/JournalTimetables.vue'),
     props: (route) => ({
       region: route.query.region
     })
@@ -46,7 +44,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/journal/dispatchers',
     name: 'JournalDispatchers',
-    component: JournalDispatchersVue,
+    component: () => import('../views/JournalDispatchers.vue'),
     props: (route) => ({
       region: route.query.region
     })

src/scripts/data/stationHeaderNames.ts

@@ -4,12 +4,14 @@ export const headIds = [
   'status',
   'dispatcher',
   'dispatcher-lvl',
-  'routes',
+  'routes-single',
+  'routes-double',
   'general'
 ] as const;
 
 export const headIconsIds = [
   'user',
+  'like',
   'spawn',
   'timetableAll',
   'timetableUnconfirmed',

src/scripts/interfaces/Station.ts

@@ -1,4 +1,4 @@
-import { Availability, OnlineScenery, ScheduledTrain } from '../../store/typings';
+import { Availability, ActiveScenery } from '../../store/typings';
 import { StationRoutes } from './StationRoutes';
 
 export default interface Station {
@@ -8,6 +8,7 @@ export default interface Station {
     name: string;
     url: string;
     abbr: string;
+    hash?: string;
 
     reqLevel: number;
     // supportersOnly: boolean;
@@ -20,16 +21,14 @@ export default interface Station {
     controlType: string;
 
     SUP: boolean;
+    ASDEK: boolean;
     authors?: string[];
 
     availability: Availability;
     routes: StationRoutes;
 
-    checkpoints: {
+    checkpoints: string[];
-      checkpointName: string;
-      scheduledTrains: ScheduledTrain[];
-    }[];
   };
 
-  onlineInfo?: OnlineScenery;
+  onlineInfo?: ActiveScenery;
 }

src/scripts/interfaces/StationRoutes.ts

@@ -1,13 +1,12 @@
 import { StationRoutesInfo } from '../../store/typings';
 
 export interface StationRoutes {
-  oneWay: StationRoutesInfo[];
+  single: StationRoutesInfo[];
-  twoWay: StationRoutesInfo[];
+  double: StationRoutesInfo[];
 
-  /* [catenary, noCatenary] */
+  singleElectrifiedNames: string[];
-  oneWayCatenaryRouteNames: string[];
+  singleOtherNames: string[];
-  oneWayNoCatenaryRouteNames: string[];
+  doubleElectrifiedNames: string[];
-  twoWayCatenaryRouteNames: string[];
+  doubleOtherNames: string[];
-  twoWayNoCatenaryRouteNames: string[];
+  sblNames: string[];
-  sblRouteNames: string[];
 }

src/scripts/interfaces/Train.ts

@@ -33,5 +33,6 @@ export default interface Train {
     SKR: boolean;
     routeDistance: number;
     sceneries: string[];
+    sceneryNames: string[];
   };
 }

src/scripts/utils/stationFilterUtils.ts

@@ -54,12 +54,30 @@ export const sortStations = (
       diff = (a.onlineInfo?.dispatcherExp || 0) - (b.onlineInfo?.dispatcherExp || 0);
       break;
 
+    case 'routes-single':
+      diff =
+        (a.generalInfo?.routes.single.filter((r) => !r.hidden && !r.isInternal).length ?? -1) -
+        (b.generalInfo?.routes.single.filter((r) => !r.hidden && !r.isInternal).length ?? -1);
+      break;
+
+    case 'routes-double':
+      diff =
+        (a.generalInfo?.routes.double.filter((r) => !r.hidden && !r.isInternal).length ?? -1) -
+        (b.generalInfo?.routes.double.filter((r) => !r.hidden && !r.isInternal).length ?? -1);
+      break;
+
     case 'user':
       diff =
         (b.onlineInfo ? b.onlineInfo.currentUsers : -1) -
         (a.onlineInfo ? a.onlineInfo.currentUsers : -1);
       break;
 
+    case 'like':
+      diff =
+        (a.onlineInfo ? a.onlineInfo.dispatcherRate : -Infinity) -
+        (b.onlineInfo ? b.onlineInfo.dispatcherRate : -Infinity);
+      break;
+
     case 'spawn':
       diff =
         (a.onlineInfo ? a.onlineInfo.spawns.length : -1) -
@@ -93,26 +111,41 @@ export const sortStations = (
 };
 
 export const filterStations = (station: Station, filters: Filter) => {
-  if (!station.onlineInfo && filters['free']) return false;
+  if (filters['free'] && (!station.onlineInfo || station.onlineInfo.dispatcherId == -1))
+    return false;
 
   if (station.onlineInfo) {
     const { dispatcherStatus } = station.onlineInfo;
 
-    const isEnding = dispatcherStatus == Status.ActiveDispatcher.ENDING && filters['endingStatus'];
+    const excludeEnding =
+      dispatcherStatus == Status.ActiveDispatcher.ENDING && filters['endingStatus'];
 
-    const isNotSigned =
+    const excludeNotSigned =
       (dispatcherStatus == Status.ActiveDispatcher.NOT_LOGGED_IN ||
         dispatcherStatus == Status.ActiveDispatcher.UNAVAILABLE) &&
       filters['unavailableStatus'];
 
-    const isAFK = dispatcherStatus == Status.ActiveDispatcher.AFK && filters['afkStatus'];
+    const excludeAFK = dispatcherStatus == Status.ActiveDispatcher.AFK && filters['afkStatus'];
 
-    const isNoSpace =
+    const excludeNoSpace =
       dispatcherStatus == Status.ActiveDispatcher.NO_SPACE && filters['noSpaceStatus'];
 
-    const isOccupied = station.onlineInfo && filters['occupied'];
+    const excludeOccupied = filters['occupied'] && dispatcherStatus != Status.ActiveDispatcher.FREE;
 
-    if (isEnding || isNotSigned || isAFK || isNoSpace || isOccupied) return false;
+    const excludeActiveTTs =
+      (dispatcherStatus == Status.ActiveDispatcher.FREE ||
+        station.onlineInfo.scheduledTrainCount.all != 0) &&
+      filters['withActiveTimetables'];
+
+    if (
+      excludeEnding ||
+      excludeAFK ||
+      excludeNoSpace ||
+      excludeNotSigned ||
+      excludeOccupied ||
+      excludeActiveTTs
+    )
+      return false;
 
     if (
       filters['onlineFromHours'] > 0 &&
@@ -121,6 +154,12 @@ export const filterStations = (station: Station, filters: Filter) => {
       return false;
   }
 
+  const excludeNoActiveTTs =
+    filters['withoutActiveTimetables'] &&
+    (!station.onlineInfo || station.onlineInfo.scheduledTrainCount.all == 0);
+
+  if (excludeNoActiveTTs) return false;
+
   if (
     (station.generalInfo?.availability == 'nonPublic' || !station.generalInfo) &&
     filters['nonPublic']
@@ -128,7 +167,7 @@ export const filterStations = (station: Station, filters: Filter) => {
     return false;
 
   if (station.generalInfo) {
-    const { routes, availability, controlType, lines, reqLevel, signalType, SUP, authors } =
+    const { routes, availability, controlType, lines, reqLevel, signalType, SUP, ASDEK, authors } =
       station.generalInfo;
 
     if (availability == 'unavailable' && filters['unavailable'] && !station.onlineInfo)
@@ -155,21 +194,21 @@ export const filterStations = (station: Station, filters: Filter) => {
 
     if (
       filters['no-1track'] &&
-      (routes.oneWayCatenaryRouteNames.length != 0 || routes.oneWayNoCatenaryRouteNames.length != 0)
+      (routes.singleElectrifiedNames.length != 0 || routes.singleOtherNames.length != 0)
     )
       return false;
 
     if (
       filters['no-2track'] &&
-      (routes.twoWayCatenaryRouteNames.length != 0 || routes.twoWayNoCatenaryRouteNames.length != 0)
+      (routes.doubleElectrifiedNames.length != 0 || routes.doubleOtherNames.length != 0)
     )
       return false;
 
-    if (routes.oneWayCatenaryRouteNames.length < filters['minOneWayCatenary']) return false;
+    if (routes.singleElectrifiedNames.length < filters['minOneWayCatenary']) return false;
-    if (routes.oneWayNoCatenaryRouteNames.length < filters['minOneWay']) return false;
+    if (routes.singleOtherNames.length < filters['minOneWay']) return false;
 
-    if (routes.twoWayCatenaryRouteNames.length < filters['minTwoWayCatenary']) return false;
+    if (routes.doubleElectrifiedNames.length < filters['minTwoWayCatenary']) return false;
-    if (routes.twoWayNoCatenaryRouteNames.length < filters['minTwoWay']) return false;
+    if (routes.doubleOtherNames.length < filters['minTwoWay']) return false;
 
     if (filters[controlType]) return false;
     if (filters[signalType]) return false;
@@ -177,8 +216,11 @@ export const filterStations = (station: Station, filters: Filter) => {
     if (filters['SUP'] && SUP) return false;
     if (filters['noSUP'] && !SUP) return false;
 
-    if (filters['SBL'] && routes.sblRouteNames.length > 0) return false;
+    if (filters['ASDEK'] && ASDEK) return false;
-    if (filters['PBL'] && routes.sblRouteNames.length == 0) return false;
+    if (filters['noASDEK'] && !ASDEK) return false;
+
+    if (filters['SBL'] && routes.sblNames.length > 0) return false;
+    if (filters['PBL'] && routes.sblNames.length == 0) return false;
 
     if (
       filters['authors'].length > 3 &&

src/store/apiStore.ts

@@ -1,65 +1,93 @@
 import { defineStore } from 'pinia';
-import http from '../http';
 import { API } from '../typings/api';
-import axios from 'axios';
 import { Status } from '../typings/common';
 import { StationJSONData } from './typings';
+import axios, { AxiosInstance } from 'axios';
+
+export enum APIMode {
+  PRODUCTION = 0,
+  DEV = 1,
+  MOCK = 2
+}
 
 export const useApiStore = defineStore('apiStore', {
   state: () => ({
     dataStatuses: {
       connection: Status.Data.Loading,
-      sceneries: Status.Data.Loading,
+      sceneries: Status.Data.Loading
-      timetables: Status.Data.Loading,
-      dispatchers: Status.Data.Loading,
-      trains: Status.Data.Loading
     },
 
     activeData: undefined as API.ActiveData.Response | undefined,
-    rollingStockData: undefined as API.RollingStock.Response | undefined,
     donatorsData: [] as API.Donators.Response,
     sceneryData: [] as StationJSONData[],
 
-    activeDataTimeout: undefined as number | undefined
+    lastFetchData: new Date(),
+
+    client: undefined as AxiosInstance | undefined,
+
+    activeDataScheduler: undefined as number | undefined
   }),
 
   actions: {
-    async setupAPI() {
+    async setupAPIData() {
+      let baseURL = 'https://stacjownik.spythere.eu';
+
+      switch (import.meta.env.VITE_API_MODE) {
+        case 'development':
+          baseURL = 'http://localhost:3001';
+          break;
+        case 'mocking':
+          baseURL = 'http://localhost:3123';
+          break;
+        default:
+          break;
+      }
+
+      this.client = axios.create({
+        baseURL
+      });
+
+      this.connectToAPI();
+    },
+
+    async connectToAPI() {
       // Static data
-      this.fetchStockInfoData();
       this.fetchDonatorsData();
       this.fetchStationsGeneralInfo();
 
-      if (this.activeDataTimeout === undefined) this.startActiveDataScheduler();
+      // Active data schedueler
+      this.fetchActiveData();
+      this.setupActiveDataFetcher();
     },
 
-    // async setDataStatuses() {
+    async setupActiveDataFetcher() {
-    //   if (!window.navigator.onLine) {
+      if (this.activeDataScheduler) return;
-    //     this.dataStatuses.connection = Status.Data.Offline;
-    //     this.dataStatuses.sceneries = Status.Data.Offline;
-    //     this.dataStatuses.trains = Status.Data.Offline;
-    //     this.dataStatuses.dispatchers = Status.Data.Offline;
-    //     this.dataStatuses.timetables = Status.Data.Offline;
-    //   }
 
-    //   if (!this.activeData?.activeSceneries) {
+      this.activeDataScheduler = window.setInterval(() => {
-    //     this.dataStatuses.connection = Status.Data.Loaded;
+        this.fetchActiveData();
-    //     this.dataStatuses.sceneries = Status.Data.Error;
+      }, 25000);
-    //     this.dataStatuses.trains = Status.Data.Error;
+    },
-    //     this.dataStatuses.dispatchers = Status.Data.Error;
 
-    //     return;
+    async fetchActiveData() {
-    //   }
+      if (!this.activeData) this.dataStatuses.connection = Status.Data.Loading;
 
-    //   this.dataStatuses.connection = Status.Data.Loaded;
+      try {
-    //   this.dataStatuses.sceneries = Status.Data.Loaded;
+        const response = await this.client!.get<API.ActiveData.Response>('api/getActiveData');
-    //   this.dataStatuses.trains = !this.activeData.trains ? Status.Data.Warning : Status.Data.Loaded;
+
-    //   this.dataStatuses.dispatchers = Status.Data.Loaded;
+        this.activeData = response.data;
-    // },
+        this.lastFetchData = new Date();
+        this.dataStatuses.connection = Status.Data.Loaded;
+
+        console.log('Fetching active data at ' + new Date().toLocaleTimeString('pl-PL'));
+      } catch (error) {
+        this.dataStatuses.connection = Status.Data.Error;
+        console.error('Ups! Wystąpił błąd podczas pobierania danych online:', error);
+      }
+    },
 
     async fetchDonatorsData() {
       try {
-        const response = await http.get<API.Donators.Response>('api/getDonators');
+        const response = await this.client!.get<API.Donators.Response>('api/getDonators');
 
         this.donatorsData = response.data;
       } catch (error) {
@@ -67,60 +95,10 @@ export const useApiStore = defineStore('apiStore', {
       }
     },
 
-    async fetchStockInfoData() {
-      try {
-        this.rollingStockData = (
-          await axios.get<API.RollingStock.Response>(
-            'https://raw.githubusercontent.com/Spythere/api/main/td2/data/stockInfo.json'
-          )
-        ).data;
-      } catch (error) {
-        console.error('Ups! Wystąpił błąd podczas pobierania informacji o taborze z API:', error);
-      }
-    },
-
-    async startActiveDataScheduler() {
-      if (!window.navigator.onLine) {
-        this.dataStatuses.connection = Status.Data.Offline;
-        return;
-      }
-
-      if (import.meta.env.VITE_API_MODE === 'mock') {
-        const mockActiveData = await import('../data/mockActiveData.json');
-        this.dataStatuses.connection = Status.Data.Loaded;
-        this.activeData = mockActiveData;
-
-        console.warn('Stacjownik działa w trybie mockowania danych z WS');
-
-        return;
-      }
-
-      try {
-        const data = (await http.get<API.ActiveData.Response>('api/getActiveData')).data;
-
-        this.activeData = data;
-        this.dataStatuses.connection = Status.Data.Loaded;
-      } catch (error) {
-        this.dataStatuses.connection = Status.Data.Error;
-        console.error('Wystąpił błąd podczas pobierania danych online z API!');
-      } finally {
-        this.activeDataTimeout = window.setTimeout(
-          () => {
-            this.startActiveDataScheduler();
-          },
-          ~~(1000 * (Math.random() * (25 - 20) + 25))
-        );
-      }
-    },
-
-    async stopActiveDataScheduler() {
-      window.clearTimeout(this.activeDataTimeout);
-      this.activeDataTimeout = undefined;
-    },
-
     async fetchStationsGeneralInfo() {
-      const sceneryData: StationJSONData[] = (await http.get<StationJSONData[]>('api/getSceneries'))
+      const sceneryData: StationJSONData[] = (
-        .data;
+        await this.client!.get<StationJSONData[]>('api/getSceneries')
+      ).data;
 
       if (!sceneryData) {
         this.dataStatuses.sceneries = Status.Data.Error;

src/store/mainStore.ts

@@ -2,12 +2,11 @@ import { defineStore } from 'pinia';
 import Train from '../scripts/interfaces/Train';
 import { parseSpawns, getScheduledTrains, getStationTrains } from './utils';
 
-import { OnlineScenery, ScheduledTrain, StoreState } from './typings';
+import { ActiveScenery, ScheduledTrain, StoreState } from './typings';
 
 import { Status } from '../typings/common';
 import Station from '../scripts/interfaces/Station';
 import { useApiStore } from './apiStore';
-import { API } from '../typings/api';
 import { StationRoutes } from '../scripts/interfaces/StationRoutes';
 
 export const useMainStore = defineStore('store', {
@@ -16,6 +15,7 @@ export const useMainStore = defineStore('store', {
       region: { id: 'eu', value: 'PL1' },
 
       isOffline: false,
+      isNewUpdate: false,
 
       dispatcherStatsName: '',
       dispatcherStatsStatus: Status.Data.Initialized,
@@ -26,8 +26,10 @@ export const useMainStore = defineStore('store', {
 
       chosenModalTrainId: undefined,
 
-      blockScroll: false,
+      modalLastClickedTarget: null,
-      modalLastClickedTarget: null
+
+      mousePos: { x: 0, y: 0 },
+      popUpData: { key: null, content: '' }
     }) as StoreState,
 
   getters: {
@@ -42,6 +44,15 @@ export const useMainStore = defineStore('store', {
 
           const timetable = train.timetable;
 
+          const sceneryNames =
+            train.timetable?.sceneries?.map(
+              (sceneryHash) =>
+                apiStore.activeData?.activeSceneries?.find((st) => st.stationHash === sceneryHash)
+                  ?.stationName ??
+                apiStore.sceneryData.find((sd) => sd.hash === sceneryHash)?.name ??
+                sceneryHash
+            ) ?? [];
+
           return {
             trainId: train.driverName + train.trainNo.toString(),
 
@@ -77,43 +88,70 @@ export const useMainStore = defineStore('store', {
                   category: timetable.category,
                   followingStops: timetable.stopList,
                   routeDistance: timetable.stopList[timetable.stopList.length - 1].stopDistance,
-                  sceneries: timetable.sceneries
+                  sceneries: timetable.sceneries,
+                  sceneryNames: sceneryNames.reverse()
                 }
               : undefined
           } as Train;
         });
     },
 
-    onlineSceneryList(state): OnlineScenery[] {
+    activeSceneryList(state): ActiveScenery[] {
       const apiStore = useApiStore();
 
       if (state.isOffline) return [];
+
       if (!apiStore.activeData?.activeSceneries) return [];
 
-      return apiStore.activeData?.activeSceneries.reduce((list, scenery) => {
+      const offlineActiveSceneries = this.trainList.reduce((acc, train) => {
+        if (!train.timetableData) return acc;
+
+        train.timetableData.sceneryNames.forEach((name) => {
+          if (
+            acc.findIndex((v) => v.name == name && v.region == train.region) != -1 ||
+            apiStore.activeData?.activeSceneries?.findIndex(
+              (sc) =>
+                sc.stationName === name &&
+                sc.region == train.region &&
+                Date.now() - sc.lastSeen < 1000 * 60 * 2
+            ) != -1
+          )
+            return acc;
+
+          acc.push({
+            name: name,
+            hash: '',
+            region: train.region,
+            maxUsers: 0,
+            currentUsers: 0,
+            spawns: [],
+            dispatcherName: '',
+            dispatcherRate: 0,
+            dispatcherId: -1,
+            dispatcherExp: -1,
+            dispatcherIsSupporter: false,
+            scheduledTrains: [],
+            stationTrains: [],
+            dispatcherStatus: Status.ActiveDispatcher.FREE,
+            dispatcherTimestamp: -1,
+
+            isOnline: false,
+
+            scheduledTrainCount: {
+              all: 0,
+              confirmed: 0,
+              unconfirmed: 0
+            }
+          });
+        });
+
+        return acc;
+      }, [] as ActiveScenery[]);
+
+      const onlineActiveSceneries = apiStore.activeData?.activeSceneries.reduce((list, scenery) => {
         if (scenery.isOnline !== 1 && Date.now() - scenery.lastSeen > 1000 * 60 * 2) return list;
         if (scenery.dispatcherStatus == Status.ActiveDispatcher.UNKNOWN) return list;
 
-        const station = this.stationList.find((s) => s.name === scenery.stationName);
-
-        const scheduledTrains = getScheduledTrains(this.trainList, scenery, station?.generalInfo);
-
-        const stationTrains = getStationTrains(
-          this.trainList,
-          scheduledTrains,
-          this.region.id,
-          scenery
-        );
-
-        // Remove checkpoint duplicates
-        const uniqueScheduledTrains = scheduledTrains.reduce(
-          (uniqueList, sTrain) =>
-            uniqueList.find((v) => v.trainId === sTrain.trainId)
-              ? uniqueList
-              : [...uniqueList, sTrain],
-          [] as ScheduledTrain[]
-        );
-
         const dispatcherTimestamp =
           scenery.dispatcherStatus == Status.ActiveDispatcher.NO_LIMIT
             ? Date.now() + 25500000
@@ -133,90 +171,42 @@ export const useMainStore = defineStore('store', {
           dispatcherId: scenery.dispatcherId,
           dispatcherExp: scenery.dispatcherExp,
           dispatcherIsSupporter: scenery.dispatcherIsSupporter,
-          scheduledTrains: scheduledTrains,
-          stationTrains: stationTrains,
           dispatcherStatus: scenery.dispatcherStatus,
           dispatcherTimestamp: dispatcherTimestamp,
 
           isOnline: scenery.isOnline == 1,
 
+          scheduledTrains: [],
+          stationTrains: [],
           scheduledTrainCount: {
-            all: uniqueScheduledTrains.length,
+            all: 0,
-            confirmed: uniqueScheduledTrains.filter((train) => train.stopInfo.confirmed).length,
+            confirmed: 0,
-            unconfirmed: uniqueScheduledTrains.filter((train) => !train.stopInfo.confirmed).length
+            unconfirmed: 0
           }
         });
 
         return list;
-      }, [] as OnlineScenery[]);
+      }, [] as ActiveScenery[]);
-    },
 
-    stationList(): Station[] {
+      const allActiveSceneries = [...onlineActiveSceneries, ...offlineActiveSceneries];
-      const apiStore = useApiStore();
 
-      return apiStore.sceneryData.map((scenery) => {
+      for (let i = 0, n = allActiveSceneries.length; i < n; i++) {
-        const routes = scenery.routesInfo.reduce(
+        const scenery = allActiveSceneries[i];
-          (acc, route) => {
-            const tracksKey = route.routeTracks == 2 ? 'twoWay' : 'oneWay';
-            const isElectric = route.isElectric;
-            const routesKey: keyof StationRoutes = `${tracksKey}${
-              !isElectric ? 'No' : ''
-            }CatenaryRouteNames`;
 
-            if (!route.isInternal) acc[routesKey].push(route.routeName);
+        const station = this.stationList.find((s) => s.name === scenery.name);
-            if (route.isRouteSBL) acc['sblRouteNames'].push(route.routeName);
 
-            acc[tracksKey].push(route);
+        const scheduledTrains = getScheduledTrains(
-
+          this.trainList,
-            return acc;
+          station?.generalInfo,
-          },
+          scenery.name,
-          {
+          scenery.region
-            oneWay: [],
-            oneWayCatenaryRouteNames: [],
-            oneWayNoCatenaryRouteNames: [],
-            twoWay: [],
-            twoWayCatenaryRouteNames: [],
-            twoWayNoCatenaryRouteNames: [],
-            sblRouteNames: []
-          } as StationRoutes
         );
 
-        return {
-          name: scenery.name,
-
-          generalInfo: {
-            ...scenery,
-            authors: scenery.authors?.split(',').map((a) => a.trim()),
-            routes: routes,
-            checkpoints: scenery.checkpoints
-              ? scenery.checkpoints
-                  .split(';')
-                  .map((sub) => ({ checkpointName: sub, scheduledTrains: [] }))
-              : []
-          }
-        };
-      });
-    }
-  },
-  actions: {
-    async processStationsOnlineInfo(activeData: API.ActiveData.Response) {
-      if (!activeData.activeSceneries) return;
-
-      const onlineSceneries = activeData.activeSceneries.reduce((acc, scenery) => {
-        const savedStation = this.stationList.find((st) => scenery.stationName === st.name);
-
-        if (scenery.isOnline !== 1 && Date.now() - scenery.lastSeen > 1000 * 60 * 2) return acc;
-        if (scenery.dispatcherStatus == Status.ActiveDispatcher.UNKNOWN) return acc;
-
-        const station = this.stationList.find((s) => s.name === scenery.stationName);
-
-        const scheduledTrains = getScheduledTrains(this.trainList, scenery, station?.generalInfo);
-
         const stationTrains = getStationTrains(
           this.trainList,
           scheduledTrains,
           this.region.id,
-          scenery
+          scenery.name
         );
 
         // Remove checkpoint duplicates
@@ -228,65 +218,62 @@ export const useMainStore = defineStore('store', {
           [] as ScheduledTrain[]
         );
 
-        const dispatcherTimestamp =
+        scenery.scheduledTrains = scheduledTrains;
-          scenery.dispatcherStatus == Status.ActiveDispatcher.NO_LIMIT
+        scenery.stationTrains = stationTrains;
-            ? Date.now() + 25500000
-            : scenery.dispatcherStatus > 5
-            ? scenery.dispatcherStatus
-            : null;
 
-        const onlineInfo = {
+        scenery.scheduledTrainCount = {
-          name: scenery.stationName,
+          all: uniqueScheduledTrains.length,
-          hash: scenery.stationHash,
+          confirmed: uniqueScheduledTrains.filter((train) => train.stopInfo.confirmed).length,
-          region: scenery.region,
+          unconfirmed: uniqueScheduledTrains.filter((train) => !train.stopInfo.confirmed).length
-          maxUsers: scenery.maxUsers,
-          currentUsers: scenery.currentUsers,
-          spawns: parseSpawns(scenery.spawnString),
-          dispatcherName: scenery.dispatcherName,
-          dispatcherRate: scenery.dispatcherRate,
-          dispatcherId: scenery.dispatcherId,
-          dispatcherExp: scenery.dispatcherExp,
-          dispatcherIsSupporter: scenery.dispatcherIsSupporter,
-          scheduledTrains: scheduledTrains,
-          stationTrains: stationTrains,
-          dispatcherStatus: scenery.dispatcherStatus,
-          dispatcherTimestamp: dispatcherTimestamp,
-
-          isOnline: scenery.isOnline == 1,
-
-          scheduledTrainCount: {
-            all: uniqueScheduledTrains.length,
-            confirmed: uniqueScheduledTrains.filter((train) => train.stopInfo.confirmed).length,
-            unconfirmed: uniqueScheduledTrains.filter((train) => !train.stopInfo.confirmed).length
-          }
         };
+      }
 
-        if (savedStation) savedStation.onlineInfo = onlineInfo;
+      return allActiveSceneries;
-        else
-          this.stationList.push({
-            name: onlineInfo.name,
-            onlineInfo: onlineInfo
-          });
-
-        acc.push(onlineInfo);
-
-        return acc;
-      }, [] as OnlineScenery[]);
-
-      // Reset online info of already offline sceneries
-      this.stationList
-        .filter(
-          (station) =>
-            station.onlineInfo &&
-            onlineSceneries.findIndex(
-              (os) => os.region == station.onlineInfo!.region && station.name == os.name
-            ) != -1
-        )
-        .forEach((station) => (station.onlineInfo = undefined));
     },
 
-    async changeRegion(region: StoreState['region']) {
+    stationList(): Station[] {
-      this.region = region;
+      const apiStore = useApiStore();
+
+      return apiStore.sceneryData.map((scenery) => {
+        const routes = scenery.routesInfo.reduce(
+          (acc, route) => {
+            if (route.hidden) return acc;
+
+            const tracksKey = route.routeTracks == 2 ? 'double' : 'single';
+            const isElectric = route.isElectric;
+            const routesKey: keyof StationRoutes = `${tracksKey}${
+              !isElectric ? 'Other' : 'Electrified'
+            }Names`;
+
+            if (!route.isInternal) acc[routesKey].push(route.routeName);
+            if (route.isRouteSBL) acc['sblNames'].push(route.routeName);
+
+            acc[tracksKey].push(route);
+
+            return acc;
+          },
+          {
+            single: [],
+            singleElectrifiedNames: [],
+            singleOtherNames: [],
+            double: [],
+            doubleElectrifiedNames: [],
+            doubleOtherNames: [],
+            sblNames: []
+          } as StationRoutes
+        );
+
+        return {
+          name: scenery.name,
+
+          generalInfo: {
+            ...scenery,
+            authors: scenery.authors?.split(',').map((a) => a.trim()),
+            routes: routes,
+            checkpoints: scenery.checkpoints?.split(';') ?? []
+          }
+        };
+      });
     }
   }
 });

src/store/stationFiltersStore.ts

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia';
 import inputData from '../data/options.json';
 import { useMainStore } from './mainStore';
-import { filterStations, sortStations } from '../scripts/utils/filterUtils';
+import { filterStations, sortStations } from '../scripts/utils/stationFilterUtils';
 import { HeadIdsTypes } from '../scripts/data/stationHeaderNames';
 import StorageManager from '../managers/storageManager';
 import { Filter } from '../components/StationsView/typings';
@@ -16,6 +16,8 @@ const filterInitStates: Filter = {
   SPE: false,
   SUP: false,
   noSUP: false,
+  ASDEK: false,
+  noASDEK: false,
   ręczne: false,
   'ręczne+SPK': false,
   'ręczne+SCS': false,
@@ -48,6 +50,8 @@ const filterInitStates: Filter = {
   noSpaceStatus: false,
   unavailableStatus: false,
   unsignedStatus: false,
+  withActiveTimetables: false,
+  withoutActiveTimetables: false,
 
   authors: '',
 
@@ -73,7 +77,7 @@ export const useStationFiltersStore = defineStore('stationFiltersStore', {
       const store = useMainStore();
       const savedStationNames = store.stationList.map((s) => s.name);
 
-      const onlineUnsavedStations = store.onlineSceneryList
+      const onlineUnsavedStations = store.activeSceneryList
         .filter((os) => !savedStationNames.includes(os.name) && os.region == store.region.id)
         .map((os) => ({
           name: os.name,
@@ -85,7 +89,8 @@ export const useStationFiltersStore = defineStore('stationFiltersStore', {
         ...onlineUnsavedStations,
         ...store.stationList.map((station) => ({
           ...station,
-          onlineInfo: store.onlineSceneryList.find(
+          // append to 'onlineInfo' object for filtering legacy reasons - to optimize later (hopefully)
+          onlineInfo: store.activeSceneryList.find(
             (os) => os.name == station.name && os.region == store.region.id
           )
         }))

src/store/typings.ts

@@ -1,7 +1,9 @@
 import { API } from '../typings/api';
 import { Status } from '../typings/common';
 
+export const popupKeys = ['DonatorPopUp', 'TrainCommentsPopUp', 'VehiclePreviewPopUp'] as const;
 export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
+export type PopUpType = (typeof popupKeys)[number];
 
 export interface RegionCounters {
   stationCount: number;
@@ -11,20 +13,17 @@ export interface RegionCounters {
 
 export interface StoreState {
   region: { id: string; value: string };
-
   isOffline: boolean;
-
+  isNewUpdate: boolean;
   dispatcherStatsName: string;
   dispatcherStatsData?: API.DispatcherStats.Response;
-
   driverStatsName: string;
   driverStatsData?: API.DriverStats.Response;
   driverStatsStatus: Status.Data;
-
   chosenModalTrainId?: string;
-
-  blockScroll: boolean;
   modalLastClickedTarget: EventTarget | null;
+  mousePos: { x: number; y: number };
+  popUpData: { key: PopUpType | null; content: string };
 }
 
 export interface StationRoutesInfo {
@@ -53,6 +52,7 @@ export interface StationJSONData {
   controlType: string;
 
   SUP: boolean;
+  ASDEK: boolean;
 
   // routes: string;
   routesInfo: StationRoutesInfo[];
@@ -63,7 +63,7 @@ export interface StationJSONData {
   availability: Availability;
 }
 
-export interface OnlineScenery {
+export interface ActiveScenery {
   name: string;
   hash: string;
   region: string;

src/store/utils.ts

@@ -1,6 +1,5 @@
 import Station from '../scripts/interfaces/Station';
 import Train from '../scripts/interfaces/Train';
-import { API } from '../typings/api';
 import { ScheduledTrain, StationTrain, StopStatus, TrainStop } from './typings';
 
 export function getLocoURL(locoType: string): string {
@@ -102,51 +101,33 @@ export function getCheckpointTrain(
   let prevStationName = '',
     nextStationName = '';
 
-  let prevDepartureLine: string | null = null,
-    nextArrivalLine: string | null = null;
-
-  for (let i = trainStopIndex - 1; i >= 0; i--) {
-    if (/strong|podg/g.test(followingStops[i].stopName)) {
-      prevStationName = followingStops[i].stopNameRAW.replace(/,.*/g, '');
-
-      break;
-    }
-  }
-
-  for (let i = trainStopIndex + 1; i < followingStops.length; i++) {
-    if (/strong|podg/g.test(followingStops[i].stopName)) {
-      nextStationName = followingStops[i].stopNameRAW.replace(/,.*/g, '');
-
-      break;
-    }
-  }
-
   let departureLine: string | null = null;
   let arrivingLine: string | null = null;
 
-  for (let i = trainStopIndex; i < followingStops.length; i++) {
+  let prevDepartureLine: string | null = null,
-    const currentStop = followingStops[i];
+    nextArrivalLine: string | null = null;
 
-    if (currentStop.departureLine == null) continue;
+  for (let i = trainStopIndex; i >= 0; i--) {
+    const stop = followingStops[i];
 
-    if (!/-|_|it|sbl/gi.test(currentStop.departureLine)) {
+    if (/strong|podg\.|pe\./g.test(stop.stopName) && !prevStationName && i <= trainStopIndex - 1)
-      departureLine = currentStop.departureLine;
+      prevStationName = stop.stopNameRAW.replace(/,.*/g, '');
-      nextArrivalLine = followingStops[i + 1]?.arrivalLine || null;
 
-      break;
+    if (stop.arrivalLine != null && !arrivingLine && !/-|_|it|sbl/gi.test(stop.arrivalLine)) {
+      arrivingLine = stop.arrivalLine;
+      prevDepartureLine = followingStops[i - 1]?.departureLine || null;
     }
   }
 
-  for (let i = trainStopIndex; i >= 0; i--) {
+  for (let i = trainStopIndex; i < followingStops.length; i++) {
-    const currentStop = followingStops[i];
+    const stop = followingStops[i];
 
-    if (currentStop.arrivalLine == null) continue;
+    if (/strong|podg\.|pe\./g.test(stop.stopName) && !nextStationName && i > trainStopIndex)
+      nextStationName = stop.stopNameRAW.replace(/,.*/g, '');
 
-    if (!/-|_|it|sbl/gi.test(currentStop.arrivalLine)) {
+    if (stop.departureLine && !departureLine && !/-|_|it|sbl/gi.test(stop.departureLine)) {
-      arrivingLine = currentStop.arrivalLine;
+      departureLine = stop.departureLine;
-      prevDepartureLine = followingStops[i - 1]?.departureLine || null;
+      nextArrivalLine = followingStops[i + 1]?.arrivalLine || null;
-
-      break;
     }
   }
 
@@ -177,8 +158,8 @@ export function getCheckpointTrain(
 
     region: train.region,
 
-    arrivingLine,
+    arrivingLine: arrivingLine,
-    departureLine,
+    departureLine: departureLine,
 
     nextArrivalLine,
     prevDepartureLine
@@ -187,59 +168,33 @@ export function getCheckpointTrain(
 
 export function getScheduledTrains(
   trainList: Train[],
-  sceneryData: API.ActiveSceneries.Data,
+  stationGeneralInfo: Station['generalInfo'],
-  stationGeneralInfo: Station['generalInfo']
+  stationName: string,
+  region: string
+  // sceneryData: API.ActiveSceneries.Data,
 ): ScheduledTrain[] {
-  const stationNameLower = sceneryData.stationName.toLocaleLowerCase();
+  // stationGeneralInfo?.checkpoints.forEach((cp) => (cp.scheduledTrains.length = 0));
-
-  stationGeneralInfo?.checkpoints.forEach((cp) => (cp.scheduledTrains.length = 0));
 
   return trainList.reduce((acc: ScheduledTrain[], train) => {
     if (!train.timetableData) return acc;
-    if (train.region != sceneryData.region) return acc;
+    if (train.region != region) return acc;
 
     const timetable = train.timetableData;
-    if (!timetable.sceneries.includes(sceneryData.stationHash)) return acc;
+    if (!timetable.sceneryNames.includes(stationName)) return acc;
 
-    const stopInfoIndex = timetable.followingStops.findIndex((stop) => {
+    const checkpoints = [stationName];
-      const stopNameLower = stop.stopNameRAW.toLocaleLowerCase();
+    if (stationGeneralInfo?.checkpoints) checkpoints.push(...stationGeneralInfo.checkpoints);
-
-      return (
-        stationNameLower == stopNameLower ||
-        (!/(po\.|podg\.)/.test(stopNameLower) && stopNameLower.includes(stationNameLower)) ||
-        (!/(po\.|podg\.)/.test(stationNameLower) && stationNameLower.includes(stopNameLower)) ||
-        (stopNameLower.split(', podg.')[0] !== undefined &&
-          stationNameLower.startsWith(stopNameLower.split(', podg.')[0]))
-      );
-    });
 
     const checkpointScheduledTrains: ScheduledTrain[] = [];
-
+    for (let i = 0; i < timetable.followingStops.length; i++) {
-    if (stopInfoIndex != -1) {
-      checkpointScheduledTrains.push(
-        getCheckpointTrain(train, stopInfoIndex, sceneryData.stationName)
-      );
-    }
-
-    stationGeneralInfo?.checkpoints?.forEach((checkpoint) => {
-      // if (checkpoint.checkpointName.toLocaleLowerCase() == stationNameLower) return;
-
       if (
-        checkpointScheduledTrains.findIndex(
+        new RegExp(`^(${checkpoints.join('|')})$`, 'i').test(
-          (cpTrain) =>
+          timetable.followingStops[i].stopNameRAW
-            cpTrain.checkpointName.toLocaleLowerCase() ==
+        )
-            checkpoint.checkpointName.toLocaleLowerCase()
+      ) {
-        ) != -1
+        checkpointScheduledTrains.push(getCheckpointTrain(train, i, stationName));
-      )
+      }
-        return;
+    }
-
-      const index = timetable.followingStops.findIndex(
-        (stop) => stop.stopNameRAW.toLowerCase() == checkpoint.checkpointName.toLowerCase()
-      );
-
-      if (index > -1)
-        checkpointScheduledTrains.push(getCheckpointTrain(train, index, sceneryData.stationName));
-    });
 
     acc.push(...checkpointScheduledTrains);
     return acc;
@@ -250,14 +205,12 @@ export function getStationTrains(
   trainList: Train[],
   scheduledTrainList: ScheduledTrain[],
   region: string,
-  sceneryData: API.ActiveSceneries.Data
+  stationName: string
 ): StationTrain[] {
   return trainList
     .filter(
       (train) =>
-        train?.region === region &&
+        train?.region === region && train.online && train.currentStationName === stationName
-        train.online &&
-        train.currentStationName === sceneryData.stationName
     )
     .map((train) => ({
       driverName: train.driverName,

src/styles/JournalSection.scss

@@ -6,12 +6,13 @@
   height: 90vh;
   min-height: 550px;
   margin-top: 0.5em;
+  position: relative;
 
   padding-right: 0.2em;
 }
 
 .journal_wrapper {
-  max-width: 1350px;
+  max-width: 1500px;
   width: 100%;
 
   margin: 0 auto;

src/styles/animations.scss

@@ -1,4 +1,4 @@
-$animDuration: 150ms;
+$animDuration: 95ms;
 $animType: ease-in-out;
 
 // List animation
@@ -72,7 +72,6 @@ $animType: ease-in-out;
 
   &-enter-from,
   &-leave-to {
-    transform: translateY(-25%);
     opacity: 0;
   }
 }

src/styles/global.scss

@@ -1,4 +1,6 @@
-@import 'fonts.scss';
+@import 'fonts';
+@import 'variables';
+@import 'responsive';
 
 :root {
   --clr-primary: #ffc014;
@@ -18,12 +20,15 @@
 
   --clr-donator: #f7a4ff;
 
+  --no-scroll-padding: 17px;
+  --max-container-width: 1700px;
+
   font-size: 16px;
 }
 
 ::-webkit-scrollbar {
-  width: 15px;
+  width: var(--no-scroll-padding);
-  height: 15px;
+  height: var(--no-scroll-padding);
   background-color: transparent;
 
   &-track {
@@ -46,11 +51,16 @@ body {
   padding: 0;
   font-family: 'Quicksand', sans-serif;
   font-weight: 500;
+  text-rendering: optimizeLegibility !important;
+  -webkit-font-smoothing: antialiased !important;
+
   overflow-y: scroll;
+  overflow-x: hidden;
+  position: relative;
 
   &.no-scroll {
     overflow-y: hidden;
-    padding-right: 15px;
+    padding-right: var(--no-scroll-padding);
 
     @include smallScreen() {
       padding: 0;
@@ -226,7 +236,7 @@ a.a-button {
     padding: 0.35em 0.75em;
 
     img {
-      width: 1.5em;
+      width: 1.35em;
       vertical-align: middle;
     }
   }

src/typings/api.ts

@@ -1,10 +1,22 @@
 import { Status } from './common';
 
+export enum APIDataStatus {
+  OK = 'OK',
+  WARNING = 'WARNING'
+}
 export namespace API {
   export namespace ActiveData {
+    export interface APIStatuses {
+      stationsAPI: APIDataStatus;
+      trainsAPI: APIDataStatus;
+      dispatchersAPI: APIDataStatus;
+      sceneryRequirementsAPI: APIDataStatus;
+    }
+
     export interface Response {
       activeSceneries?: API.ActiveSceneries.Response;
       trains?: API.ActiveTrains.Response;
+      apiStatuses?: APIStatuses;
     }
   }
   export namespace DispatcherHistory {
@@ -251,22 +263,6 @@ export namespace API {
     export type Response = Data[];
   }
 
-  export namespace RollingStock {
-    export interface Response {
-      usage: Record<string, string>;
-      info: Info;
-    }
-
-    export interface Info {
-      'loco-e': [string, string, string, string, boolean][];
-      'loco-s': [string, string, string, string, boolean][];
-      'loco-szt': [string, string, string, string, boolean][];
-      'loco-ezt': [string, string, string, string, boolean][];
-      'car-passenger': [string, string, boolean, boolean, string][];
-      'car-cargo': [string, string, boolean, boolean, string][];
-    }
-  }
-
   export namespace DailyStats {
     export interface Response {
       totalTimetables: number;
@@ -368,3 +364,11 @@ export namespace GithubAPI {
     }
   }
 }
+
+export namespace Websocket {
+  export interface Payload {
+    activeSceneries: API.ActiveSceneries.Response;
+    activeTrains: API.ActiveTrains.Response;
+    connectedSocketCount: number;
+  }
+}

src/typings/common.ts

@@ -1,5 +1,6 @@
 export namespace Status {
   export enum ActiveDispatcher {
+    FREE = -3,
     INVALID = -2,
     UNKNOWN = -1,
     NO_LIMIT = 0,

src/views/JournalDispatchers.vue

@@ -37,7 +37,6 @@
 <script lang="ts">
 import { defineComponent, provide, reactive, Ref, ref } from 'vue';
 
-import http from '../http';
 import { useMainStore } from '../store/mainStore';
 import { LocationQuery } from 'vue-router';
 import { Journal } from '../components/JournalView/typings';
@@ -48,6 +47,7 @@ import JournalDispatchersList from '../components/JournalView/JournalDispatchers
 import JournalOptions from '../components/JournalView/JournalOptions.vue';
 import JournalHeader from '../components/JournalView/JournalHeader.vue';
 import JournalStats from '../components/JournalView/JournalStats.vue';
+import { useApiStore } from '../store/apiStore';
 
 const statsButtons: Journal.StatsButton[] = [
   {
@@ -120,6 +120,7 @@ export default defineComponent({
 
     return {
       mainStore: useMainStore(),
+      apiStore: useApiStore(),
 
       sorterActive,
       searchersValues,
@@ -201,7 +202,7 @@ export default defineComponent({
 
       try {
         const statsData: API.DispatcherStats.Response = await (
-          await http.get('api/getDispatcherStats', {
+          await this.apiStore.client!.get('api/getDispatcherStats', {
             params: {
               name: this.mainStore.dispatcherStatsName
             }
@@ -236,7 +237,9 @@ export default defineComponent({
       this.countFromIndex = this.historyList.length;
 
       const responseData: API.DispatcherHistory.Response = await (
-        await http.get(`api/getDispatchers?${this.currentQuery}&countFrom=${this.countFromIndex}`)
+        await this.apiStore.client!.get(
+          `api/getDispatchers?${this.currentQuery}&countFrom=${this.countFromIndex}`
+        )
       ).data;
 
       if (!responseData) return;
@@ -283,7 +286,7 @@ export default defineComponent({
         if (reset) this.dataStatus = Status.Data.Loading;
 
         const responseData: API.DispatcherHistory.Response = await (
-          await http.get(`api/getDispatchers?${this.currentQuery}`)
+          await this.apiStore.client!.get(`api/getDispatchers?${this.currentQuery}`)
         ).data;
 
         if (!responseData) {

src/views/JournalTimetables.vue

@@ -53,7 +53,7 @@ import JournalTimetablesList from '../components/JournalView/JournalTimetables/J
 import { Journal } from '../components/JournalView/typings';
 import { Status } from '../typings/common';
 import { API } from '../typings/api';
-import http from '../http';
+import { useApiStore } from '../store/apiStore';
 
 export const journalTimetableFilters: Journal.TimetableFilter[] = [
   {
@@ -158,6 +158,7 @@ export default defineComponent({
   data: () => ({
     journalTimetableFilters,
     mainStore: useMainStore(),
+    apiStore: useApiStore(),
 
     statsButtons: [
       {
@@ -282,7 +283,9 @@ export default defineComponent({
         this.mainStore.driverStatsStatus = Status.Data.Loading;
 
         const statsData: API.DriverStats.Response = await (
-          await http.get(`api/getDriverInfo?name=${this.mainStore.driverStatsName}`)
+          await this.apiStore.client!.get(
+            `api/getDriverInfo?name=${this.mainStore.driverStatsName}`
+          )
         ).data;
 
         this.mainStore.driverStatsData = statsData;
@@ -321,7 +324,7 @@ export default defineComponent({
       this.currentQueryParams['countFrom'] = this.timetableHistory.length;
 
       const responseData: API.TimetableHistory.Response = await (
-        await http.get('api/getTimetables', {
+        await this.apiStore.client!.get('api/getTimetables', {
           params: { ...this.currentQueryParams }
         })
       ).data;
@@ -425,7 +428,7 @@ export default defineComponent({
 
       try {
         const responseData: API.TimetableHistory.Response = await (
-          await http.get('api/getTimetables', {
+          await this.apiStore.client!.get('api/getTimetables', {
             params: this.currentQueryParams
           })
         ).data;

src/views/SceneryView.vue

@@ -147,7 +147,7 @@ export default defineComponent({
     },
 
     onlineSceneryInfo() {
-      return this.store.onlineSceneryList.find(
+      return this.store.activeSceneryList.find(
         (scenery) =>
           scenery.name === this.station?.toString().replace(/_/g, ' ') &&
           scenery.region == this.store.region.id
@@ -169,11 +169,7 @@ export default defineComponent({
     loadSelectedCheckpoint() {
       if (!this.stationInfo?.generalInfo?.checkpoints) return;
       if (this.stationInfo.generalInfo.checkpoints.length == 0) return;
-      this.selectedCheckpoint = this.stationInfo.generalInfo.checkpoints[0].checkpointName;
+      this.selectedCheckpoint = this.stationInfo.generalInfo.checkpoints[0];
-    },
-
-    selectCheckpoint(cp: { checkpointName: string }) {
-      this.selectedCheckpoint = cp.checkpointName;
     }
   }
 });
@@ -214,13 +210,13 @@ button.back-btn {
 
 .scenery-wrapper {
   display: grid;
-  grid-template-columns: 4fr 5fr;
+  grid-template-columns: 4fr 6fr;
   gap: 0 1em;
 
   position: relative;
 
   width: 100%;
-  max-width: 1700px;
+  max-width: var(--max-container-width);
   min-height: 100vh;
 
   margin: 1rem 0;
@@ -238,9 +234,8 @@ button.back-btn {
   padding: 1em 0.5em;
 
   height: 95vh;
-  min-height: 550px;
+  min-height: 750px;
   max-height: 1000px;
-
   overflow: auto;
 
   display: flex;
@@ -252,7 +247,7 @@ button.back-btn {
   padding: 1em 0.5em;
 
   height: 95vh;
-  min-height: 550px;
+  min-height: 750px;
   max-height: 1000px;
 
   display: grid;

src/views/StationsView.vue

@@ -8,9 +8,18 @@
           ref="filterCardRef"
         />
 
-        <Donation :isModalOpen="isDonationModalOpen" @toggleModal="toggleDonationModal" />
+        <button
+          class="btn-donation btn--image"
+          ref="btn"
+          @click="isDonationModalOpen = true"
+          @focus="isDonationModalOpen = false"
+        >
+          <img src="/images/icon-dollar.svg" alt="dollar donation icon" />
+          <span>{{ $t('donations.button-title') }}</span>
+        </button>
       </div>
 
+      <Donation :isModalOpen="isDonationModalOpen" @toggleModal="toggleDonationModal" />
       <StationTable :stations="computedStationList" @toggleDonationModal="toggleDonationModal" />
     </div>
   </section>
@@ -99,6 +108,7 @@ export default defineComponent({
 
 .wrapper {
   max-width: 100%;
+  width: var(--max-container-width);
 }
 
 .stations-options {
@@ -108,4 +118,20 @@ export default defineComponent({
 
   margin-bottom: 0.5em;
 }
+
+button.btn-donation {
+  $btnColor: #254069;
+
+  background-color: $btnColor;
+
+  &:hover {
+    background-color: lighten($btnColor, 5%);
+  }
+
+  @include smallScreen {
+    span {
+      display: none;
+    }
+  }
+}
 </style>

src/views/TrainsView.vue

@@ -126,7 +126,7 @@ export default defineComponent({
 
 .trains_wrapper {
   margin: 1rem auto;
-  max-width: 1350px;
+  max-width: 1500px;
 }
 
 .trains_topbar {

vite.config.ts

@@ -4,7 +4,8 @@ import { VitePWA } from 'vite-plugin-pwa';
 
 export default defineConfig({
   server: {
-    port: 5001
+    port: 5001,
+    open: true
   },
   publicDir: 'public',
   plugins: [

yarn.lock

@@ -42,7 +42,7 @@
   resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.20.10.tgz"
   integrity sha512-sEnuDPpOJR/fcafHMjpcpGN5M2jbUGUHwmuWKM/YdPzeEDJg8bgmbcWQFUfE32MQjti1koACvoPVsDe8Uq+idg==
 
-"@babel/core@^7.0.0", "@babel/core@^7.0.0-0", "@babel/core@^7.11.1", "@babel/core@^7.12.0", "@babel/core@^7.13.0", "@babel/core@^7.4.0-0":
+"@babel/core@^7.11.1":
   version "7.20.7"
   resolved "https://registry.npmjs.org/@babel/core/-/core-7.20.7.tgz"
   integrity sha512-t1ZjCluspe5DW24bn2Rr1CDb2v9rn/hROtg9a2tmd0+QYf4bsloYfLQzjG4qHPNMhWtKdGC33R5AxGR2Af2cBw==
@@ -929,11 +929,116 @@
   resolved "https://registry.npmjs.org/@canvas/image-data/-/image-data-1.0.0.tgz"
   integrity sha512-BxOqI5LgsIQP1odU5KMwV9yoijleOPzHL18/YvNqF9KFSGF2K/DLlYAbDQsWqd/1nbaFuSkYD/191dpMtNh4vw==
 
+"@esbuild/android-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz#984b4f9c8d0377443cc2dfcef266d02244593622"
+  integrity sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==
+
+"@esbuild/android-arm@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.18.20.tgz#fedb265bc3a589c84cc11f810804f234947c3682"
+  integrity sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==
+
+"@esbuild/android-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.18.20.tgz#35cf419c4cfc8babe8893d296cd990e9e9f756f2"
+  integrity sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==
+
+"@esbuild/darwin-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz#08172cbeccf95fbc383399a7f39cfbddaeb0d7c1"
+  integrity sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==
+
+"@esbuild/darwin-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz#d70d5790d8bf475556b67d0f8b7c5bdff053d85d"
+  integrity sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==
+
+"@esbuild/freebsd-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz#98755cd12707f93f210e2494d6a4b51b96977f54"
+  integrity sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==
+
+"@esbuild/freebsd-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz#c1eb2bff03915f87c29cece4c1a7fa1f423b066e"
+  integrity sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==
+
+"@esbuild/linux-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz#bad4238bd8f4fc25b5a021280c770ab5fc3a02a0"
+  integrity sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==
+
+"@esbuild/linux-arm@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz#3e617c61f33508a27150ee417543c8ab5acc73b0"
+  integrity sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==
+
+"@esbuild/linux-ia32@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz#699391cccba9aee6019b7f9892eb99219f1570a7"
+  integrity sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==
+
+"@esbuild/linux-loong64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz#e6fccb7aac178dd2ffb9860465ac89d7f23b977d"
+  integrity sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==
+
+"@esbuild/linux-mips64el@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz#eeff3a937de9c2310de30622a957ad1bd9183231"
+  integrity sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==
+
+"@esbuild/linux-ppc64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz#2f7156bde20b01527993e6881435ad79ba9599fb"
+  integrity sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==
+
+"@esbuild/linux-riscv64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz#6628389f210123d8b4743045af8caa7d4ddfc7a6"
+  integrity sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==
+
+"@esbuild/linux-s390x@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz#255e81fb289b101026131858ab99fba63dcf0071"
+  integrity sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==
+
 "@esbuild/linux-x64@0.18.20":
   version "0.18.20"
   resolved "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz"
   integrity sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==
 
+"@esbuild/netbsd-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz#30e8cd8a3dded63975e2df2438ca109601ebe0d1"
+  integrity sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==
+
+"@esbuild/openbsd-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz#7812af31b205055874c8082ea9cf9ab0da6217ae"
+  integrity sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==
+
+"@esbuild/sunos-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz#d5c275c3b4e73c9b0ecd38d1ca62c020f887ab9d"
+  integrity sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==
+
+"@esbuild/win32-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz#73bc7f5a9f8a77805f357fab97f290d0e4820ac9"
+  integrity sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==
+
+"@esbuild/win32-ia32@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz#ec93cbf0ef1085cc12e71e0d661d20569ff42102"
+  integrity sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==
+
+"@esbuild/win32-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz#786c5f41f043b07afb1af37683d7c33668858f6d"
+  integrity sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==
+
 "@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
   version "4.4.0"
   resolved "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz"
@@ -1025,7 +1130,7 @@
     "@firebase/util" "1.9.3"
     tslib "^2.1.0"
 
-"@firebase/app-compat@0.2.19", "@firebase/app-compat@0.x":
+"@firebase/app-compat@0.2.19":
   version "0.2.19"
   resolved "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.2.19.tgz"
   integrity sha512-QkJDqYqjhvs4fTMcRVXQkP9hbo5yfoJXDWkhU4VA5Vzs8Qsp76VPzYbqx5SD5OmBy+bz/Ot1UV8qySPGI4aKuw==
@@ -1036,12 +1141,12 @@
     "@firebase/util" "1.9.3"
     tslib "^2.1.0"
 
-"@firebase/app-types@0.9.0", "@firebase/app-types@0.x":
+"@firebase/app-types@0.9.0":
   version "0.9.0"
   resolved "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.9.0.tgz"
   integrity sha512-AeweANOIo0Mb8GiYm3xhTEBVCmPwTYAu9Hcd2qSkLuga/6+j9b1Jskl5bpiSQWy9eJ/j5pavxj6eYogmnuzm+Q==
 
-"@firebase/app@0.9.19", "@firebase/app@0.x":
+"@firebase/app@0.9.19":
   version "0.9.19"
   resolved "https://registry.npmjs.org/@firebase/app/-/app-0.9.19.tgz"
   integrity sha512-t/SHyZ3xWkR77ZU9VMoobDNFLdDKQ5xqoCAn4o16gTsA1C8sJ6ZOMZ02neMOPxNHuQXVE4tA8ukilnDbnK7uJA==
@@ -1326,7 +1431,7 @@
     node-fetch "2.6.7"
     tslib "^2.1.0"
 
-"@firebase/util@1.9.3", "@firebase/util@1.x":
+"@firebase/util@1.9.3":
   version "1.9.3"
   resolved "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz"
   integrity sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==
@@ -1431,7 +1536,7 @@
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
-"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@1.4.14":
+"@jridgewell/sourcemap-codec@1.4.14", "@jridgewell/sourcemap-codec@^1.4.10":
   version "1.4.14"
   resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz"
   integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
@@ -1457,7 +1562,7 @@
     "@nodelib/fs.stat" "2.0.5"
     run-parallel "^1.1.9"
 
-"@nodelib/fs.stat@^2.0.2", "@nodelib/fs.stat@2.0.5":
+"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
   version "2.0.5"
   resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz"
   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
@@ -1577,6 +1682,11 @@
   resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.5.1.tgz"
   integrity sha512-6i/8UoL0P5y4leBIGzvkZdS85RDMG9y1ihZzmTZQ5LdHUYmZ7pKFoj8X0236s3lusPs1Fa5HTQUpwI+UfTcmeA==
 
+"@socket.io/component-emitter@~3.1.0":
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz"
+  integrity sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==
+
 "@surma/rollup-plugin-off-main-thread@^2.2.3":
   version "2.2.3"
   resolved "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz"
@@ -1597,26 +1707,16 @@
   resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.14.tgz"
   integrity sha512-U3PUjAudAdJBeC2pgN8uTIKgxrb4nlDF3SF0++EldXQvQBGkpFZMSnwQiIoDU77tv45VgNkl/L4ouD+rEomujw==
 
-"@types/node@*":
+"@types/node@*", "@types/node@>=12.12.47", "@types/node@>=13.7.0":
   version "18.11.18"
   resolved "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz"
   integrity sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==
 
-"@types/node@^20.6.2", "@types/node@>= 14":
+"@types/node@^20.6.2":
   version "20.6.2"
   resolved "https://registry.npmjs.org/@types/node/-/node-20.6.2.tgz"
   integrity sha512-Y+/1vGBHV/cYk6OI1Na/LHzwnlNCAfU3ZNGrc1LdRe/LAIbdDPTTv/HU3M7yXN448aTVDq3eKRm2cg7iKLb8gw==
 
-"@types/node@>=12.12.47":
-  version "18.11.18"
-  resolved "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz"
-  integrity sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==
-
-"@types/node@>=13.7.0":
-  version "18.11.18"
-  resolved "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz"
-  integrity sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==
-
 "@types/resolve@1.17.1":
   version "1.17.1"
   resolved "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz"
@@ -1651,7 +1751,7 @@
     semver "^7.5.4"
     ts-api-utils "^1.0.1"
 
-"@typescript-eslint/parser@^6.0.0 || ^6.0.0-alpha", "@typescript-eslint/parser@^6.7.0":
+"@typescript-eslint/parser@^6.7.0":
   version "6.9.1"
   resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.9.1.tgz"
   integrity sha512-C7AK2wn43GSaCUZ9do6Ksgi2g3mwFkMO3Cis96kzmgudoVaKyt62yNzJOktP0HDLb/iO2O0n2lBOzJgr6Q/cyg==
@@ -1741,14 +1841,14 @@
   resolved "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.3.4.tgz"
   integrity sha512-ciXNIHKPriERBisHFBvnTbfKa6r9SAesOYXeGDzgegcvy9Q4xdScSHAmKbNT0M3O0S9LKhIf5/G+UYG4NnnzYw==
 
-"@volar/language-core@~1.10.0", "@volar/language-core@1.10.1":
+"@volar/language-core@1.10.1", "@volar/language-core@~1.10.0":
   version "1.10.1"
   resolved "https://registry.npmjs.org/@volar/language-core/-/language-core-1.10.1.tgz"
   integrity sha512-JnsM1mIPdfGPxmoOcK1c7HYAsL6YOv0TCJ4aW3AXPZN/Jb4R77epDyMZIVudSGjWMbvv/JfUa+rQ+dGKTmgwBA==
   dependencies:
     "@volar/source-map" "1.10.1"
 
-"@volar/source-map@~1.10.0", "@volar/source-map@1.10.1":
+"@volar/source-map@1.10.1", "@volar/source-map@~1.10.0":
   version "1.10.1"
   resolved "https://registry.npmjs.org/@volar/source-map/-/source-map-1.10.1.tgz"
   integrity sha512-3/S6KQbqa7pGC8CxPrg69qHLpOvkiPHGJtWPkI/1AXCsktkJ6gIk/5z4hyuMp8Anvs6eS/Kvp/GZa3ut3votKA==
@@ -1772,7 +1872,7 @@
     estree-walker "^2.0.2"
     source-map-js "^1.0.2"
 
-"@vue/compiler-dom@^3.3.0", "@vue/compiler-dom@3.3.4":
+"@vue/compiler-dom@3.3.4", "@vue/compiler-dom@^3.3.0":
   version "3.3.4"
   resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz"
   integrity sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==
@@ -1851,7 +1951,7 @@
     estree-walker "^2.0.2"
     magic-string "^0.30.0"
 
-"@vue/reactivity@^3.3.0", "@vue/reactivity@3.3.4":
+"@vue/reactivity@3.3.4", "@vue/reactivity@^3.3.0":
   version "3.3.4"
   resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.4.tgz"
   integrity sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==
@@ -1883,7 +1983,7 @@
     "@vue/compiler-ssr" "3.3.4"
     "@vue/shared" "3.3.4"
 
-"@vue/shared@^3.3.0", "@vue/shared@3.3.4":
+"@vue/shared@3.3.4", "@vue/shared@^3.3.0":
   version "3.3.4"
   resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz"
   integrity sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==
@@ -1906,7 +2006,7 @@ acorn-jsx@^5.3.2:
   resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-"acorn@^6.0.0 || ^7.0.0 || ^8.0.0", acorn@^8.10.0, acorn@^8.5.0, acorn@^8.9.0:
+acorn@^8.10.0, acorn@^8.5.0, acorn@^8.9.0:
   version "8.10.0"
   resolved "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz"
   integrity sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==
@@ -1921,7 +2021,7 @@ ajv@^6.12.4:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-ajv@^8.6.0, ajv@>=8:
+ajv@^8.6.0:
   version "8.11.2"
   resolved "https://registry.npmjs.org/ajv/-/ajv-8.11.2.tgz"
   integrity sha512-E4bfmKAhGiSTvMfL1Myyycaub+cUEU2/IvpylXkUu7CHBkBj1f/ikdzbD7YQ6FKUbixDxeYvB/xY4fvyroDlQg==
@@ -2084,7 +2184,7 @@ braces@^3.0.2, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
-browserslist@^4.21.3, browserslist@^4.21.4, "browserslist@>= 4.21.0":
+browserslist@^4.21.3, browserslist@^4.21.4:
   version "4.21.4"
   resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz"
   integrity sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==
@@ -2151,15 +2251,7 @@ chalk@^2.4.2:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@^4.0.0:
+chalk@^4.0.0, chalk@^4.0.2:
-  version "4.1.2"
-  resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz"
-  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
-  dependencies:
-    ansi-styles "^4.1.0"
-    supports-color "^7.1.0"
-
-chalk@^4.0.2:
   version "4.1.2"
   resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -2210,16 +2302,16 @@ color-convert@^2.0.1:
   dependencies:
     color-name "~1.1.4"
 
-color-name@^1.0.0, color-name@~1.1.4:
-  version "1.1.4"
-  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
-  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
-
 color-name@1.1.3:
   version "1.1.3"
   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz"
   integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
 
+color-name@^1.0.0, color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
 color-string@^1.9.0:
   version "1.9.1"
   resolved "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz"
@@ -2314,7 +2406,7 @@ de-indent@^1.0.2:
   resolved "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz"
   integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
 
-debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4:
+debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4, debug@~4.3.1, debug@~4.3.2:
   version "4.3.4"
   resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -2449,6 +2541,22 @@ end-of-stream@^1.1.0, end-of-stream@^1.4.1:
   dependencies:
     once "^1.4.0"
 
+engine.io-client@~6.5.2:
+  version "6.5.3"
+  resolved "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.5.3.tgz"
+  integrity sha512-9Z0qLB0NIisTRt1DZ/8U2k12RJn8yls/nXMZLn+/N8hANT3TcYjKFKcwbw5zFQiN4NTde3TSY9zb79e1ij6j9Q==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.1"
+    engine.io-parser "~5.2.1"
+    ws "~8.11.0"
+    xmlhttprequest-ssl "~2.0.0"
+
+engine.io-parser@~5.2.1:
+  version "5.2.1"
+  resolved "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.1.tgz"
+  integrity sha512-9JktcM3u18nU9N2Lz3bWeBgxVgOKpw7yhRaoxQA3FUDZzzw+9WlA6p4G4u0RixNkg14fH7EfEc/RhpurtiROTQ==
+
 es-abstract@^1.19.0, es-abstract@^1.20.4:
   version "1.20.5"
   resolved "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.5.tgz"
@@ -2545,7 +2653,7 @@ eslint-plugin-prettier@^5.0.0:
     prettier-linter-helpers "^1.0.0"
     synckit "^0.8.5"
 
-eslint-plugin-vue@^9.0.0, eslint-plugin-vue@^9.17.0:
+eslint-plugin-vue@^9.17.0:
   version "9.18.1"
   resolved "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.18.1.tgz"
   integrity sha512-7hZFlrEgg9NIzuVik2I9xSnJA5RsmOfueYgsUGUokEDLJ1LHtxO0Pl4duje1BriZ/jDWb+44tcIlC3yi0tdlZg==
@@ -2571,7 +2679,7 @@ eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4
   resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz"
   integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
 
-"eslint@^6.0.0 || ^7.0.0 || >=8.0.0", "eslint@^6.2.0 || ^7.0.0 || ^8.0.0", "eslint@^7.0.0 || ^8.0.0", eslint@^8.49.0, "eslint@>= 8.0.0", eslint@>=6.0.0, eslint@>=7.0.0, eslint@>=8.0.0:
+eslint@^8.49.0:
   version "8.52.0"
   resolved "https://registry.npmjs.org/eslint/-/eslint-8.52.0.tgz"
   integrity sha512-zh/JHnaixqHZsolRB/w9/02akBk9EPrOs9JwcTP2ek7yL5bVvXuRariiaAjjoJ5DvuwQ1WAE/HsMz+w17YgBCg==
@@ -2819,9 +2927,9 @@ flatted@^3.2.9:
   integrity sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==
 
 follow-redirects@^1.15.0:
-  version "1.15.2"
+  version "1.15.5"
-  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz"
+  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz"
-  integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
+  integrity sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==
 
 form-data@^4.0.0:
   version "4.0.0"
@@ -2852,6 +2960,11 @@ fs.realpath@^1.0.0:
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
+fsevents@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
 function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
@@ -3052,7 +3165,7 @@ ico-endec@*:
   resolved "https://registry.npmjs.org/ico-endec/-/ico-endec-0.1.6.tgz"
   integrity sha512-ZdLU38ZoED3g1j3iEyzcQj+wAkY2xfWNkymszfJPoxucIUhK7NayQ+/C4Kv0nDFMIsbtbEHldv3V8PU494/ueQ==
 
-idb@^7.0.1, idb@7.0.1:
+idb@7.0.1, idb@^7.0.1:
   version "7.0.1"
   resolved "https://registry.npmjs.org/idb/-/idb-7.0.1.tgz"
   integrity sha512-UUxlE7vGWK5RfB/fDwEGgRf84DY/ieqNha6msMV99UsEMQhJ1RwbCd8AYBj3QMgnE3VZnfQvm4oKVCJTYlqIgg==
@@ -3098,7 +3211,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@^2.0.3, inherits@^2.0.4, inherits@2:
+inherits@2, inherits@^2.0.3, inherits@^2.0.4:
   version "2.0.4"
   resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -3826,7 +3939,7 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
-prettier@^3.0.3, "prettier@>= 3.0.0", prettier@>=3.0.0:
+prettier@^3.0.3:
   version "3.0.3"
   resolved "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz"
   integrity sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==
@@ -4023,7 +4136,7 @@ rollup-plugin-terser@^7.0.0:
     serialize-javascript "^4.0.0"
     terser "^5.0.0"
 
-"rollup@^1.20.0 || ^2.0.0", rollup@^1.20.0||^2.0.0, rollup@^2.0.0, rollup@^2.43.1:
+rollup@^2.43.1:
   version "2.79.1"
   resolved "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz"
   integrity sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==
@@ -4051,7 +4164,7 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
-safe-buffer@^5.0.1, safe-buffer@>=5.1.0, safe-buffer@~5.2.0:
+safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@~5.2.0:
   version "5.2.1"
   resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
@@ -4070,7 +4183,7 @@ safe-regex-test@^1.0.0:
     get-intrinsic "^1.1.3"
     is-regex "^1.1.4"
 
-sass@*, sass@^1.67.0:
+sass@^1.67.0:
   version "1.67.0"
   resolved "https://registry.npmjs.org/sass/-/sass-1.67.0.tgz"
   integrity sha512-SVrO9ZeX/QQyEGtuZYCVxoeAL5vGlYjJ9p4i4HFuekWl8y/LtJ7tJc10Z+ck1c8xOuoBm2MYzcLfTAffD0pl/A==
@@ -4084,28 +4197,7 @@ semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
   resolved "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
-semver@^7.3.5:
+semver@^7.3.5, semver@^7.3.6, semver@^7.3.8, semver@^7.5.4:
-  version "7.5.4"
-  resolved "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz"
-  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
-  dependencies:
-    lru-cache "^6.0.0"
-
-semver@^7.3.6:
-  version "7.5.4"
-  resolved "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz"
-  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
-  dependencies:
-    lru-cache "^6.0.0"
-
-semver@^7.3.8:
-  version "7.5.4"
-  resolved "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz"
-  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
-  dependencies:
-    lru-cache "^6.0.0"
-
-semver@^7.5.4:
   version "7.5.4"
   resolved "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz"
   integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
@@ -4194,7 +4286,25 @@ slash@^3.0.0:
   resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
-source-map-js@^1.0.2, "source-map-js@>=0.6.2 <2.0.0":
+socket.io-client@^4.7.4:
+  version "4.7.4"
+  resolved "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.7.4.tgz"
+  integrity sha512-wh+OkeF0rAVCrABWQBaEjLfb7DVPotMbu0cgWgyR0v6eA4EoVnAwcIeIbcdTE3GT/H3kbdLl7OoH2+asoDRIIg==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.2"
+    engine.io-client "~6.5.2"
+    socket.io-parser "~4.2.4"
+
+socket.io-parser@~4.2.4:
+  version "4.2.4"
+  resolved "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz"
+  integrity sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.1"
+
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
@@ -4232,13 +4342,6 @@ streamx@^2.15.0:
     fast-fifo "^1.1.0"
     queue-tick "^1.0.1"
 
-string_decoder@^1.1.1:
-  version "1.3.0"
-  resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz"
-  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
-  dependencies:
-    safe-buffer "~5.2.0"
-
 string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
@@ -4280,6 +4383,13 @@ string.prototype.trimstart@^1.0.6:
     define-properties "^1.1.4"
     es-abstract "^1.20.4"
 
+string_decoder@^1.1.1:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz"
+  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
+  dependencies:
+    safe-buffer "~5.2.0"
+
 stringify-object@^3.3.0:
   version "3.3.0"
   resolved "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz"
@@ -4402,7 +4512,7 @@ tempy@^0.6.0:
     type-fest "^0.16.0"
     unique-string "^2.0.0"
 
-terser@^5.0.0, terser@^5.4.0:
+terser@^5.0.0:
   version "5.16.1"
   resolved "https://registry.npmjs.org/terser/-/terser-5.16.1.tgz"
   integrity sha512-xvQfyfA1ayT0qdK47zskQgRZeWLoOQ8JQ6mIgRGVNwZKdQMU+5FkCBjmv4QjcrTzyZquRw2FVtlJSRUmMKQslw==
@@ -4485,7 +4595,7 @@ type-fest@^0.20.2:
   resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz"
   integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
 
-typescript@*, typescript@^5.2.2, typescript@>=4.2.0, typescript@>=4.4.4:
+typescript@^5.2.2:
   version "5.2.2"
   resolved "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz"
   integrity sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==
@@ -4591,10 +4701,10 @@ vite-plugin-pwa@^0.16.5:
     workbox-build "^7.0.0"
     workbox-window "^7.0.0"
 
-"vite@^3.1.0 || ^4.0.0", vite@^4.0.0, vite@^4.4.9:
+vite@^4.4.9:
-  version "4.5.1"
+  version "4.5.2"
-  resolved "https://registry.npmjs.org/vite/-/vite-4.5.1.tgz"
+  resolved "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz"
-  integrity sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==
+  integrity sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==
   dependencies:
     esbuild "^0.18.10"
     postcss "^8.4.27"
@@ -4653,7 +4763,7 @@ vue-tsc@^1.8.11:
     "@vue/typescript" "1.8.11"
     semver "^7.3.8"
 
-"vue@^2.6.14 || ^3.3.0", vue@^3.0.0, "vue@^3.0.0-0 || ^2.6.0", vue@^3.2.0, vue@^3.2.25, vue@^3.3.4, vue@3.3.4:
+vue@^3.3.4:
   version "3.3.4"
   resolved "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz"
   integrity sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==
@@ -4873,7 +4983,7 @@ workbox-sw@7.0.0:
   resolved "https://registry.npmjs.org/workbox-sw/-/workbox-sw-7.0.0.tgz"
   integrity sha512-SWfEouQfjRiZ7GNABzHUKUyj8pCoe+RwjfOIajcx6J5mtgKkN+t8UToHnpaJL5UVVOf5YhJh+OHhbVNIHe+LVA==
 
-workbox-window@^7.0.0, workbox-window@7.0.0:
+workbox-window@7.0.0, workbox-window@^7.0.0:
   version "7.0.0"
   resolved "https://registry.npmjs.org/workbox-window/-/workbox-window-7.0.0.tgz"
   integrity sha512-j7P/bsAWE/a7sxqTzXo3P2ALb1reTfZdvVp6OJ/uLr/C2kZAMvjeWGm8V4htQhor7DOvYg0sSbFN2+flT5U0qA==
@@ -4895,11 +5005,21 @@ wrappy@1:
   resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
   integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
 
+ws@~8.11.0:
+  version "8.11.0"
+  resolved "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz"
+  integrity sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==
+
 xml-name-validator@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz"
   integrity sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==
 
+xmlhttprequest-ssl@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz"
+  integrity sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==
+
 y18n@^5.0.5:
   version "5.0.8"
   resolved "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz"