Merge pull request #72 from Spythere/development

Wersja 1.19.4
imports hotfix
2026-05-03 13:28:11 +00:00 · 2023-12-11 13:02:05 +01:00 · 2023-12-11 12:58:41 +01:00 · 2023-12-10 15:29:29 +01:00 · 2023-12-10 15:23:54 +01:00 · 2023-12-10 15:23:27 +01:00
233 changed files with 34261 additions and 16231 deletions
@@ -0,0 +1,18 @@
 /* eslint-env node */
 require('@rushstack/eslint-patch/modern-module-resolution')
 module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier/skip-formatting'
  ],
  rules: {
    'vue/multi-word-component-names': 'off'
  },
  parserOptions: {
    ecmaVersion: 'latest'
  }
 }
@@ -31,6 +31,7 @@ node_modules
 .firebase
 .firebaserc
 # Env
 .env
 .fake
@@ -0,0 +1,7 @@
 {
  "$schema": "https://json.schemastore.org/prettierrc",
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none"
 }
@@ -1,11 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="pl">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <meta name="keywords" content="Stacjownik, TD2, Train Driver 2, stacjownik-td2, stacjownik, td2.info.pl" />
+    <meta
      name="keywords"
      content="Stacjownik, TD2, Train Driver 2, stacjownik-td2, stacjownik, td2.info.pl"
    />
    <meta name="description" content="Pomocnik maszynisty i dyżurnego symulatora Train Driver 2" />
    <title>Stacjownik</title>
@@ -16,15 +19,42 @@
    <link rel="manifest" href="/site.webmanifest" />
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
    <meta name="msapplication-TileColor" content="#da532c" />
-    <meta name="theme-color" content="#ffffff" />
+    <meta name="theme-color" content="#222222" />
    <link rel="icon" href="favicon-64.png" sizes="64x64" type="image/png" />
    <link rel="icon" href="favicon-32.png" sizes="32x32" type="image/png" />
    <link rel="icon" href="favicon-62.png" sizes="62x62" type="image/png" />
    <link rel="icon" href="favicon-16.png" sizes="16x16" type="image/png" />
    <link rel="icon" href="favicon.ico" />
-    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500;700&display=swap" rel="stylesheet" />
+    <!-- Static OpenGraph meta -->
    <meta name="description" content="Pomocnik maszynisty i dyżurnego symulatora Train Driver 2" />
    <meta property="og:url" content="https://stacjownik-td2.web.app/" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Stacjownik" />
    <meta
      property="og:description"
      content="Pomocnik maszynisty i dyżurnego symulatora Train Driver 2"
    />
    <meta
      property="og:image"
      content="https://raw.githubusercontent.com/Spythere/api/main/thumbnails/stacjownik.jpg"
    />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:site_name" content="Stacjownik" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Stacjownik" />
    <meta
      name="twitter:description"
      content="Pomocnik maszynisty i dyżurnego symulatora Train Driver 2"
    />
    <meta
      name="twitter:image"
      content="https://raw.githubusercontent.com/Spythere/api/main/thumbnails/stacjownik.jpg"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500;700&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
@@ -32,4 +62,3 @@
    <script type="module" src="/src/main.ts"></script>
  </body>
 </html>
@@ -1,33 +1,43 @@
 {
  "name": "stacjownik",
-  "version": "1.17.0",
+  "version": "1.19.4",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "deploy": "yarn build && firebase deploy --only hosting",
-    "preview": "yarn build && vite preview"
+    "preview": "yarn build && vite preview",
    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
-    "core-js": "^3.12.1",
+    "core-js": "^3.32.2",
-    "dotenv": "^16.0.3",
+    "dotenv": "^16.3.1",
-    "firebase": "^9.8.1",
+    "firebase": "^10.4.0",
-    "howler": "^2.2.1",
+    "howler": "^2.2.4",
-    "pinia": "^2.0.14",
+    "pinia": "^2.1.6",
-    "sass": "^1.53.0",
+    "sass": "^1.67.0",
-    "socket.io-client": "^4.4.1",
+    "vue": "^3.3.4",
-    "vue": "^3.2.37",
+    "vue-i18n": "^9.4.1",
-    "vue-i18n": "^9.1.6",
+    "vue-router": "^4.2.4"
    "vue-router": "^4.0.0-0"
  },
  "devDependencies": {
-    "@types/node": "^18.11.17",
+    "@rushstack/eslint-patch": "^1.3.3",
-    "@vitejs/plugin-vue": "^4.0.0",
+    "@types/node": "^20.6.2",
-    "axios": "^1.2.1",
+    "@vite-pwa/assets-generator": "^0.0.10",
-    "typescript": "^4.9.4",
+    "@vitejs/plugin-vue": "^4.3.4",
-    "vite": "^4.0.3",
+    "@vue/eslint-config-prettier": "^8.0.0",
-    "vite-plugin-pwa": "^0.14.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
-    "vue-tsc": "^1.0.18"
+    "@vue/tsconfig": "^0.4.0",
    "axios": "^1.5.0",
    "eslint": "^8.49.0",
    "eslint-plugin-vue": "^9.17.0",
    "prettier": "^3.0.3",
    "typescript": "^5.2.2",
    "vite": "^4.4.9",
    "vite-plugin-pwa": "^0.16.5",
    "vue-tsc": "^1.8.11"
  },
  "browserslist": [
    "> 1%",
@@ -0,0 +1,56 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 159 38.8" style="enable-background:new 0 0 159 38.8;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:#00A962;}
 	.st1{enable-background:new    ;}
 	.st2{fill:#FFFFFF;}
 	.st3{fill:#1E3A33;}
 	.st4{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
 </style>
 <path class="st0" d="M139.6,38.7H19.4C8.7,38.7,0,30.1,0,19.3l0,0C0,8.6,8.7-0.1,19.4-0.1h120.2c10.7,0,19.4,8.7,19.4,19.4l0,0
 	C159,30.1,150.3,38.7,139.6,38.7z"/>
 <g class="st1">
 	<path class="st2" d="M48.9,23.7c0,0.5-0.4,0.9-0.9,0.9c-0.5,0-0.9-0.4-0.9-0.9v-9.9c0-0.6,0.4-1,1-1h3.7c2.5,0,3.6,1.9,3.6,3.7
 		s-1,3.7-3.6,3.7h-2.9V23.7z M48.9,14.5v4.1h2.8c1.3,0,1.9-1,1.9-2c0-1-0.5-2.1-1.8-2.1H48.9z"/>
 	<path class="st2" d="M56.3,20.5c0-2.5,1.9-4.1,4.1-4.1c2.3,0,4.2,1.6,4.2,4.1c0,2.5-1.9,4.2-4.2,4.2C58.2,24.7,56.3,23,56.3,20.5z
 		 M62.9,20.5c0-1.5-1.1-2.4-2.4-2.4c-1.3,0-2.4,1-2.4,2.4c0,1.5,1.1,2.5,2.4,2.5C61.8,23,62.9,22,62.9,20.5z"/>
 	<path class="st2" d="M66.6,21.9c0.4-0.2,0.7,0.1,0.9,0.3c0.3,0.6,0.9,1,1.7,1c0.8,0,1.4-0.4,1.4-1c0-0.5-0.5-0.7-1.1-0.9l-1.1-0.3
 		c-1.7-0.5-2.3-1.4-2.2-2.7c0.1-1.2,1.4-2.1,2.8-2.1c1.1,0,2,0.3,2.5,1.2c0.2,0.4,0.1,0.8-0.2,1c-0.3,0.2-0.6,0.2-1-0.1
 		c-0.4-0.4-1-0.5-1.4-0.5c-0.4,0-0.9,0.2-1.1,0.4c-0.1,0.2-0.2,0.4-0.1,0.7c0.1,0.3,0.6,0.5,1,0.6l1.2,0.3c1.7,0.4,2.1,1.5,2.1,2.3
 		c0,1.5-1.3,2.4-3.2,2.4c-1.2,0-2.5-0.6-2.9-1.8C66,22.5,66.2,22.1,66.6,21.9z"/>
 	<path class="st2" d="M74.6,18h-0.8c-0.4,0-0.7-0.3-0.7-0.7c0-0.4,0.3-0.7,0.7-0.7h0.8v-2.2c0-0.5,0.4-0.9,0.9-0.9
 		c0.5,0,0.9,0.4,0.9,0.9v2.2h1c0.4,0,0.7,0.3,0.7,0.7c0,0.4-0.3,0.7-0.7,0.7h-1v5.7c0,0.5-0.4,0.9-0.9,0.9c-0.5,0-0.9-0.4-0.9-0.9
 		V18z"/>
 	<path class="st2" d="M85.7,23.4c-0.5,0.9-1.7,1.3-2.7,1.3c-2.1,0-4-1.6-4-4.1c0-2.5,1.9-4.1,4-4.1c1,0,2.1,0.4,2.7,1.3v-0.3
 		c0-0.5,0.4-0.9,0.9-0.9c0.5,0,0.9,0.4,0.9,0.9v6.3c0,0.5-0.4,0.9-0.9,0.9c-0.5,0-0.9-0.4-0.9-0.9V23.4z M83.2,23
 		c1.3,0,2.4-0.9,2.4-2.5c0-1.6-1.3-2.4-2.4-2.4c-1.3,0-2.4,1-2.4,2.4C80.8,22,81.9,23,83.2,23z"/>
 	<path class="st2" d="M95.1,16.6c0.5,0,0.9,0.3,1,0.8l1.6,4.6l1.7-4.8c0.2-0.5,0.6-0.7,1.1-0.6c0.5,0.1,0.7,0.6,0.6,1.1l-2.4,6.3
 		c-0.2,0.5-0.5,0.7-0.9,0.7h-0.1c-0.4,0-0.7-0.2-0.9-0.7L95.1,19l-1.7,4.9c-0.2,0.5-0.5,0.7-0.9,0.7h-0.1c-0.4,0-0.7-0.2-0.9-0.7
 		l-2.4-6.3c-0.2-0.4,0.1-1,0.6-1.1c0.5-0.1,0.9,0.1,1.1,0.6l1.7,4.8l1.6-4.6C94.2,16.8,94.6,16.6,95.1,16.6L95.1,16.6z"/>
 	<path class="st2" d="M112.9,23.2c0.3,0.3,0.3,0.9,0,1.2c-0.4,0.3-0.9,0.3-1.2,0l-3.2-3.5v2.9c0,0.5-0.4,0.9-0.9,0.9
 		c-0.5,0-0.8-0.4-0.8-0.9V13.1c0-0.5,0.4-0.9,0.8-0.9c0.5,0,0.9,0.4,0.9,0.9v6.1l2.4-2.4c0.3-0.3,0.9-0.3,1.2,0
 		c0.3,0.4,0.3,0.9,0,1.2l-2,2.1L112.9,23.2z"/>
 	<path class="st2" d="M120.8,23.4c-0.5,0.9-1.7,1.3-2.7,1.3c-2.1,0-4-1.6-4-4.1c0-2.5,1.9-4.1,4-4.1c1,0,2.1,0.4,2.7,1.3v-0.3
 		c0-0.5,0.4-0.9,0.8-0.9c0.5,0,0.9,0.4,0.9,0.9v6.3c0,0.5-0.4,0.9-0.9,0.9c-0.5,0-0.8-0.4-0.8-0.9V23.4z M118.4,23
 		c1.3,0,2.4-0.9,2.4-2.5c0-1.6-1.3-2.4-2.4-2.4c-1.3,0-2.4,1-2.4,2.4C115.9,22,117,23,118.4,23z"/>
 	<path class="st2" d="M130.3,16.6c0.5,0,0.9,0.3,1,0.8l1.6,4.6l1.7-4.8c0.2-0.5,0.6-0.7,1.1-0.6c0.5,0.1,0.7,0.6,0.6,1.1l-2.4,6.3
 		c-0.2,0.5-0.5,0.7-0.9,0.7h-0.1c-0.4,0-0.7-0.2-0.9-0.7l-1.7-4.9l-1.7,4.9c-0.2,0.5-0.5,0.7-0.9,0.7h-0.1c-0.4,0-0.7-0.2-0.9-0.7
 		l-2.4-6.3c-0.2-0.4,0.1-1,0.6-1.1c0.5-0.1,0.9,0.1,1.1,0.6l1.7,4.8l1.6-4.6C129.3,16.8,129.7,16.6,130.3,16.6L130.3,16.6z"/>
 	<path class="st2" d="M143.6,26.1c0,0.2,0.2,0.5,0.6,0.5c0.1,0,0.4,0,0.5-0.4c0.1-0.4,0.3-0.5,0.7-0.5c0.4,0.1,0.6,0.4,0.5,0.8
 		c-0.2,0.8-0.9,1.4-1.7,1.4c-1.3,0-1.9-0.8-1.9-1.7c0-0.2,0.1-0.6,0.2-0.8l0.5-1c-0.5,0.2-1,0.3-1.6,0.3c-2.3,0-4.1-1.6-4.1-4.2
 		c0-2.5,1.8-4.1,4.1-4.1c2.2,0,3.9,1.5,4,4c0,0.5-0.4,0.8-0.8,0.8h-5.5c0.2,1.2,1.2,2,2.4,2c0.8,0,1.3-0.3,1.9-0.8
 		c0.3-0.2,0.8-0.4,1.1-0.1c0.3,0.3,0.2,0.7,0,1.1C143.5,25.9,143.6,26.1,143.6,26.1z M143.7,19.9c-0.2-1.2-1.1-2-2.3-2
 		c-1.2,0-2.2,0.7-2.3,2H143.7z"/>
 </g>
 <g>
 	<path class="st3" d="M21.6,26.7c-4.9,0-7.4-2.6-8.5-4.9c-1.2-2.4-1.4-5-1.4-6c0-2.2,1.8-3.8,4.3-3.8h7c0.7,0,1.3,0.6,1.3,1.3
 		c0,0.7-0.6,1.3-1.3,1.3h-7c-0.5,0-1,0.1-1.3,0.4c-0.3,0.2-0.4,0.4-0.4,0.8c0,1.9,0.5,8.3,7.3,8.3c5.8,0,7.3-4.6,7.9-8.1
 		c0-0.2,0-0.3,0.1-0.4c0.2-0.9,0.4-1.7,0.8-2.3C31,12.4,31.9,12,33,12c0.5,0,0.9,0.2,1.2,0.5c0.5,0.4,0.9,1.3,1.2,4.1
 		c0.1,1.4,0.1,2.6,0.1,2.7c0,0.7-0.6,1.3-1.3,1.3l0,0c-0.7,0-1.3-0.6-1.3-1.3c0,0,0-1.1-0.1-2.3c-0.1-1-0.2-1.7-0.3-2.1
 		c-0.1,0.3-0.2,0.9-0.3,1.1c0,0.1,0,0.2-0.1,0.4c-0.2,1.2-0.7,3.7-2.1,5.9c-0.8,1.3-1.9,2.3-3.2,3.1C25.4,26.3,23.6,26.7,21.6,26.7z
 		"/>
 	<ellipse class="st4" cx="26.7" cy="13.3" rx="1.3" ry="1.3"/>
 </g>
 </svg>
@@ -0,0 +1,18 @@
 <svg width="256" height="213" viewBox="0 0 256 213" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g filter="url(#filter0_d_1571_41)">
 <path d="M217.048 55.9333L238 80.4039L128 194.6L18 80.4039L38.9524 55.9333L71.6905 18.6H128H184.31L217.048 55.9333Z" fill="#F47FFF"/>
 <path d="M238 80.4039L217.048 55.9333L184.31 18.6M238 80.4039L128 194.6M238 80.4039H164.536M128 194.6L18 80.4039M128 194.6L91.4641 80.4039M128 194.6L164.536 80.4039M184.31 18.6H128M184.31 18.6L164.536 80.4039M18 80.4039L38.9524 55.9333L71.6905 18.6M18 80.4039H91.4641M71.6905 18.6L91.4641 80.4039M71.6905 18.6H128M91.4641 80.4039H128H164.536M91.4641 80.4039L128 18.6M128 18.6L164.536 80.4039" stroke="#ECECEC" stroke-width="7.45763" stroke-linejoin="round"/>
 </g>
 <defs>
 <filter id="filter0_d_1571_41" x="0.367179" y="0.967155" width="255.266" height="211.266" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
 <feOffset/>
 <feGaussianBlur stdDeviation="6.952"/>
 <feComposite in2="hardAlpha" operator="out"/>
 <feColorMatrix type="matrix" values="0 0 0 0 0.956863 0 0 0 0 0.498039 0 0 0 0 1 0 0 0 1 0"/>
 <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1571_41"/>
 <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1571_41" result="shape"/>
 </filter>
 </defs>
 </svg>
@@ -0,0 +1,48 @@
 <svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect width="512" height="512" rx="256" fill="#121212"/>
 <rect x="325.818" y="405.665" width="7.11086" height="143.867" rx="3.55543" transform="rotate(90 325.818 405.665)" fill="white"/>
 <rect x="361.785" y="430.553" width="10.6663" height="208.608" rx="5.33314" transform="rotate(90 361.785 430.553)" fill="white"/>
 <g filter="url(#filter0_d_272_208)">
 <rect width="25.0328" height="117.468" rx="12.5164" transform="matrix(0.711174 0.703016 -0.711174 0.703016 211.54 363)" fill="white"/>
 </g>
 <g filter="url(#filter1_d_272_208)">
 <rect width="25.0328" height="117.468" rx="12.5164" transform="matrix(-0.711174 0.703016 0.711174 0.703016 300.46 363)" fill="white"/>
 </g>
 <g filter="url(#filter2_d_272_208)">
 <rect x="139.352" y="65.4912" width="232.66" height="325.893" rx="41.5866" stroke="#7A7A7A" stroke-width="8.31733"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M135.193 107.078C135.193 81.8134 155.674 61.3325 180.938 61.3325H330.425C355.69 61.3325 376.171 81.8134 376.171 107.078V349.797C376.171 375.062 355.69 395.543 330.426 395.543H180.938C155.674 395.543 135.193 375.062 135.193 349.797V107.078ZM208.217 338.656C208.217 352.401 196.774 363.544 182.659 363.544C168.543 363.544 157.1 352.401 157.1 338.656C157.1 324.91 168.543 313.768 182.659 313.768C196.774 313.768 208.217 324.91 208.217 338.656ZM328.706 363.544C342.821 363.544 354.264 352.401 354.264 338.656C354.264 324.91 342.821 313.768 328.706 313.768C314.591 313.768 303.148 324.91 303.148 338.656C303.148 352.401 314.591 363.544 328.706 363.544ZM248.38 136.323C248.38 132.07 244.932 128.622 240.679 128.622H164.802C160.549 128.622 157.101 132.07 157.101 136.323V203.223C157.101 207.476 160.549 210.924 164.802 210.924H240.679C244.932 210.924 248.38 207.476 248.38 203.223V136.323ZM346.563 128.622C350.817 128.622 354.265 132.07 354.265 136.323V203.223C354.265 207.476 350.817 210.924 346.563 210.924H270.686C266.433 210.924 262.985 207.476 262.985 203.223V136.323C262.985 132.07 266.433 128.622 270.686 128.622H346.563Z" fill="white"/>
 <ellipse cx="255.682" cy="64.888" rx="25.5582" ry="24.888" fill="#F3F1F1"/>
 </g>
 <defs>
 <filter id="filter0_d_272_208" x="106.676" y="341.617" width="143.99" height="142.947" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
 <feOffset/>
 <feGaussianBlur stdDeviation="13.269"/>
 <feComposite in2="hardAlpha" operator="out"/>
 <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
 <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_272_208"/>
 <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_272_208" result="shape"/>
 </filter>
 <filter id="filter1_d_272_208" x="261.334" y="341.617" width="143.99" height="142.947" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
 <feOffset/>
 <feGaussianBlur stdDeviation="13.269"/>
 <feComposite in2="hardAlpha" operator="out"/>
 <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
 <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_272_208"/>
 <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_272_208" result="shape"/>
 </filter>
 <filter id="filter2_d_272_208" x="110.241" y="15.048" width="290.882" height="405.446" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
 <feOffset/>
 <feGaussianBlur stdDeviation="12.476"/>
 <feComposite in2="hardAlpha" operator="out"/>
 <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
 <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_272_208"/>
 <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_272_208" result="shape"/>
 </filter>
 </defs>
 </svg>
@@ -1,3 +0,0 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M8.00251 14.9297L0 1.07422H6.14651L8.00251 4.27503L9.84583 1.07422H16L8.00251 14.9297Z" fill="black"/>
 </svg>
@@ -1,33 +1,7 @@
@import './styles/responsive.scss';
@import './styles/variables.scss';
@import './styles/global.scss';
-
+@import './styles/animations.scss';
 // VUE ROUTE CHANGE ANIMATION
 .view-anim {
  &-enter-from,
  &-leave-to {
    opacity: 0.02;
  }
  &-enter-active,
  &-leave-active {
    transition: all $animDuration $animType;
    min-height: 100%;
  }
 }
 .modal-anim {
  &-enter-active,
  &-leave-active {
    transition: all $animDuration $animType;
  }
  &-enter-from,
  &-leave-to {
    transform: translateY(-25%);
    opacity: 0;
  }
 }
 .route {
  margin: 0 0.2em;
@@ -43,9 +17,10 @@
 #app {
  color: white;
  font-size: 1rem;
  overflow-x: hidden;
  @include smallScreen() {
-    font-size: calc(0.55rem + 1.1vw);
+    font-size: calc(0.65rem + 0.8vw);
  }
  @include screenLandscape() {
@@ -55,24 +30,15 @@
 // CONTAINER
 .app_container {
-  display: flex;
+  display: grid;
-  flex-flow: column;
+  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
  min-height: 100vh;
 }
-  header {
+.app_main {
-    flex: 0 0 auto;
+  padding: 0 0.5em;
  }
  main {
    flex: 1 1 auto;
    padding: 0 0.5em;
  }
  footer {
    flex: 0 1 0.2em;
  }
 }
 .warning {
@@ -6,13 +6,11 @@
      </keep-alive>
    </transition>
    <UpdatePrompt />
    <AppHeader :current-lang="currentLang" @change-lang="changeLang" />
    <main class="app_main">
      <router-view v-slot="{ Component }">
-        <keep-alive exclude="JournalView">
+        <keep-alive exclude="JournalView,SceneryView">
          <component :is="Component" :key="$route.name" />
        </keep-alive>
      </router-view>
@@ -24,7 +22,9 @@
      {{ new Date().getUTCFullYear() }} |
      <a :href="releaseURL" target="_blank">v{{ VERSION }}{{ isOnProductionHost ? '' : 'dev' }}</a>
      <br />
-      <a href="https://discord.gg/x2mpNN3svk"><img :src="getIcon('discord', 'png')" alt="">&nbsp;<b>{{ $t('footer.discord') }}</b></a>
+      <a href="https://discord.gg/x2mpNN3svk">
        <img src="/images/icon-discord.png" alt="" />&nbsp;<b>{{ $t('footer.discord') }}</b>
      </a>
      <div style="display: none">&int; ukryta taktyczna całka do programowania w HTMLu</div>
    </footer>
@@ -32,82 +32,50 @@
 </template>
 <script lang="ts">
-import { computed, defineComponent, KeepAlive, provide, ref, watch } from 'vue';
+import { defineComponent, watch } from 'vue';
 import Clock from './components/App/Clock.vue';
 import packageInfo from '.././package.json';
 import { regions } from './data/options.json';
 import { useMainStore } from './store/mainStore';
 import StatusIndicator from './components/App/StatusIndicator.vue';
 import SelectBox from './components/Global/SelectBox.vue';
 import { useStore } from './store/store';
 import TrainModal from './components/Global/TrainModal.vue';
 import StorageManager from './scripts/managers/storageManager';
 import imageMixin from './mixins/imageMixin';
 import AppHeader from './components/App/AppHeader.vue';
 import axios from 'axios';
-import UpdatePrompt from './components/App/UpdatePrompt.vue';
+import StorageManager from './managers/storageManager';
-import { VERSION } from 'vue-i18n';
+import { useApiStore } from './store/apiStore';
 import { RouterView } from 'vue-router';
 import useCustomSW from './mixins/useCustomSW';
 export default defineComponent({
  components: {
    Clock,
    StatusIndicator,
    SelectBox,
    TrainModal,
-    AppHeader,
+    AppHeader
    UpdatePrompt,
  },
  mixins: [imageMixin],
  setup() {
    const store = useStore();
    store.connectToAPI();
    const { offlineReady } = useCustomSW();
    const isFilterCardVisible = ref(false);
    provide('isFilterCardVisible', isFilterCardVisible);
    return {
      store,
      isFilterCardVisible,
      onlineDispatchers: computed(() =>
        store.stationList.filter((station) => station.onlineInfo && station.onlineInfo.region == store.region.id)
      ),
      dispatcherDataStatus: store.dataStatuses.dispatchers,
    };
  },
  data: () => ({
    VERSION: packageInfo.version,
    store: useMainStore(),
    apiStore: useApiStore(),
    currentLang: 'pl',
    releaseURL: '',
-    isOnProductionHost: location.hostname == 'stacjownik-td2.web.app',
+    isOnProductionHost: location.hostname == 'stacjownik-td2.web.app'
  }),
  created() {
    this.loadLang();
    this.apiStore.setupAPI();
    this.store.isOffline = !window.navigator.onLine;
    window.addEventListener('offline', () => {
      this.store.isOffline = true;
      this.apiStore.activeData = undefined;
-      this.store.apiData = {
+      this.apiStore.setDataStatuses();
        stations: [],
        dispatchers: [],
        trains: [],
        connectedSocketCount: 0,
      };
      this.store.setOnlineData();
    });
    window.addEventListener('online', () => {
@@ -121,16 +89,28 @@ export default defineComponent({
    watch(
      () => this.store.blockScroll,
      (value) => {
-        if (value) {
+        if (value) document.body.classList.add('no-scroll');
-          document.body.classList.add('no-scroll');
+        else document.body.classList.remove('no-scroll');
          return;
        }
        document.body.classList.remove('no-scroll');
      }
    );
  },
  watch: {
    '$route.query.region': {
      immediate: true,
      handler(regionQuery: string) {
        if (regionQuery) {
          this.store.region.id =
            regions.find(
              (reg) =>
                reg.id == regionQuery.toLocaleLowerCase() ||
                reg.value.toLocaleLowerCase() == regionQuery.toLocaleLowerCase()
            )?.id || 'eu';
        }
      }
    }
  },
  methods: {
    changeLang(lang: string) {
      this.$i18n.locale = lang;
@@ -170,8 +150,8 @@ export default defineComponent({
        this.changeLang('en');
        return;
      }
-    },
+    }
-  },
+  }
 });
 </script>
@@ -1,3 +0,0 @@
 <svg width="144" height="144" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M67.4283 9.79351L67.8252 31.2232H79.5983L79.8628 9.79351H67.4283ZM67.8252 110.989L67.4283 132.816H79.8628L79.466 110.989H67.8252ZM91.6359 51.33L103.938 43.7899C102.439 40.527 100.322 37.3963 97.5886 34.3979C94.9429 31.3995 91.5918 28.9303 87.5352 26.9901C83.5667 25.05 78.8046 24.0799 73.2487 24.0799C67.6929 24.0799 62.7103 25.1382 58.3009 27.2547C53.8915 29.3712 50.4081 32.1932 47.8506 35.7207C45.3814 39.2483 44.1467 43.1726 44.1467 47.4938C44.1467 51.9032 44.9404 55.6512 46.5278 58.7378C48.1152 61.8243 50.1435 64.47 52.6128 66.6747C55.082 68.7912 57.6836 70.5549 60.4174 71.9659C63.2394 73.2888 65.7969 74.347 68.0897 75.1407C71.6173 76.4635 74.9243 77.8745 78.0109 79.3737C81.1856 80.8729 83.7431 82.7249 85.6832 84.9296C87.7115 87.0461 88.7257 89.824 88.7257 93.2633C88.7257 95.9089 88.1966 98.2018 87.1383 100.142C86.1683 101.994 84.625 103.405 82.5085 104.375C80.4801 105.345 77.8786 105.83 74.7038 105.83C71.0881 105.83 67.8693 105.08 65.0473 103.581C62.3134 102.082 59.8001 99.9215 57.5072 97.0995C55.2143 94.2775 53.0978 90.8381 51.1577 86.7815L39.12 94.5861C41.0602 99.3483 43.7499 103.581 47.1892 107.285C50.6286 110.989 54.6411 113.943 59.2269 116.148C63.8126 118.265 68.7512 119.323 74.0424 119.323C80.6565 119.323 86.2564 118.265 90.8422 116.148C95.428 113.943 98.9555 110.813 101.425 106.756C103.894 102.699 105.129 97.9814 105.129 92.6019C105.129 88.4571 104.423 84.8414 103.012 81.7548C101.601 78.6682 99.7492 76.0667 97.4563 73.9502C95.1634 71.7455 92.606 69.8935 89.784 68.3943C87.0501 66.8951 84.3604 65.6605 81.7148 64.6904C78.0109 63.2794 74.5275 61.8684 71.2645 60.4574C68.0016 59.0464 65.3559 57.3709 63.3276 55.4307C61.2993 53.4906 60.2851 51.0213 60.2851 48.0229C60.2851 45.7301 60.7261 43.7899 61.6079 42.2025C62.578 40.527 64.0331 39.2483 65.9732 38.3664C68.0016 37.4845 70.559 37.0436 73.6456 37.0436C76.644 37.0436 79.2455 37.705 81.4502 39.0278C83.6549 40.3506 85.5509 42.1144 87.1383 44.319C88.8139 46.4356 90.3131 48.7725 91.6359 51.33Z" fill="white"/>
 </svg>
@@ -3,8 +3,13 @@
    <div class="header_container">
      <div class="header_icons">
        <span class="icons-top">
-          <img :src="getIcon('pl')" alt="icon-pl" @click="changeLang('en')" v-if="currentLang == 'pl'" />
+          <img
-          <img :src="getIcon('en', 'jpg')" alt="icon-en" @click="changeLang('pl')" v-else />
+            src="/images/icon-pl.svg"
            alt="icon-pl"
            @click="changeLang('en')"
            v-if="currentLang == 'pl'"
          />
          <img src="/images/icon-en.jpg" alt="icon-en" @click="changeLang('pl')" v-else />
        </span>
      </div>
@@ -13,7 +18,7 @@
        <span class="header_brand">
          <router-link to="/">
-            <img :src="getImage('stacjownik-header-logo.svg')" alt="Stacjownik" />
+            <img src="/images/stacjownik-header-logo.svg" alt="Stacjownik" />
          </router-link>
        </span>
@@ -21,7 +26,7 @@
          <Clock />
          <div class="info_counter">
-            <img :src="getIcon('dispatcher')" alt="icon dispatcher" />
+            <img src="/images/icon-dispatcher.svg" alt="icon dispatcher" />
            <span class="text--primary">{{ onlineDispatchersCount }}</span>
            <!-- <span class="g-tooltip">
@@ -31,12 +36,12 @@
            <span class="text--grayed"> / </span>
            <span class="text--primary">{{ onlineTrainsCount }}</span>
-            <img :src="getIcon('train')" alt="icon train" />
+            <img src="/images/icon-train.svg" alt="icon train" />
          </div>
-          <span class="info_region">
+          <div class="info_region">
-            <SelectBox :itemList="computedRegions" :defaultItemIndex="0" @selected="changeRegion" />
+            <RegionDropdown />
-          </span>
+          </div>
        </span>
        <span class="header_links">
@@ -44,7 +49,9 @@
            {{ $t('app.sceneries') }}
          </router-link>
          /
-          <router-link class="route" active-class="route-active" to="/trains">{{ $t('app.trains') }}</router-link>
+          <router-link class="route" active-class="route-active" to="/trains">{{
            $t('app.trains')
          }}</router-link>
          /
          <router-link
            class="route"
@@ -61,65 +68,50 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { useStore } from '../../store/store';
+import { useMainStore } from '../../store/mainStore';
 import options from '../../data/options.json';
 import imageMixin from '../../mixins/imageMixin';
 import SelectBox from '../Global/SelectBox.vue';
 import StatusIndicator from './StatusIndicator.vue';
 import Clock from './Clock.vue';
 import RegionDropdown from '../Global/RegionDropdown.vue';
 export default defineComponent({
  emits: ['changeLang'],
  mixins: [imageMixin],
  props: {
    currentLang: {
      type: String,
-      required: true,
+      required: true
-    },
+    }
  },
  setup() {
    return {
-      store: useStore(),
+      store: useMainStore()
    };
  },
  methods: {
    changeRegion(region: { id: string; value: string }) {
      this.store.changeRegion(region);
    },
    changeLang(lang: string) {
      this.$emit('changeLang', lang);
-    },
+    }
  },
  computed: {
    onlineTrainsCount() {
-      return this.store.trainList.filter((train) => train.online).length;
+      return this.store.trainList.filter((train) => train.region == this.store.region.id).length;
    },
    onlineDispatchersCount() {
-      return this.store.stationList.filter(
+      return this.store.onlineSceneryList.filter(
-        (station) => station.onlineInfo && station.onlineInfo.region == this.store.region.id
+        (scenery) => scenery.region == this.store.region.id
      ).length;
    },
    factorU() {
-      return this.onlineDispatchersCount == 0 ? '-' : (this.onlineTrainsCount / this.onlineDispatchersCount).toFixed(2);
+      return this.onlineDispatchersCount == 0
-    },
+        ? '-'
-
+        : (this.onlineTrainsCount / this.onlineDispatchersCount).toFixed(2);
-    computedRegions() {
+    }
      return options.regions.map((region) => {
        const regionStationCount =
          this.store.apiData.stations?.filter((station) => station.region == region.id && station.isOnline).length || 0;
        const regionTrainCount =
          this.store.apiData.trains?.filter((train) => train.region == region.id && train.online).length || 0;
        return {
          id: region.id,
          value: `${region.value} <div class='text--grayed'>${regionStationCount} / ${regionTrainCount}</div>`,
          selectedValue: region.value,
        };
      });
    },
  },
-  components: { SelectBox, StatusIndicator, Clock },
+  components: { StatusIndicator, Clock, RegionDropdown }
 });
 </script>
 <style lang="scss" scoped>
@@ -215,23 +207,8 @@ export default defineComponent({
  }
 }
 // REGION SELECTION
 .info_region {
  color: white;
  font-weight: bold;
  display: flex;
  justify-content: flex-end;
  .select-box_content button {
    background-color: transparent;
    font-weight: bold;
    padding: 0.1em 0.5em;
    color: paleturquoise;
  }
  .options {
    font-size: 0.9em;
  }
 }
 </style>
@@ -2,32 +2,33 @@
  <div class="clock">{{ computedDate }}</div>
 </template>
 <script lang="ts">
-import { computed, defineComponent, ref } from "vue";
+import { computed, defineComponent, ref } from 'vue';
 export default defineComponent({
-  name: "clock",
+  name: 'VueClock',
  data: () => ({
-    timestamp: Date.now(),
+    timestamp: Date.now()
  }),
  setup() {
-      let timestamp = ref(Date.now());
+    let timestamp = ref(Date.now());
-      const computedDate = computed(() => new Date(timestamp.value).toLocaleString("pl-PL", {
+    const computedDate = computed(() =>
-        hour: "2-digit",
+      new Date(timestamp.value).toLocaleString('pl-PL', {
-        minute: "2-digit",
+        hour: '2-digit',
-        second: "2-digit",
+        minute: '2-digit',
-      }));
+        second: '2-digit'
      })
    );
-      setInterval(() => (timestamp.value = Date.now()), 1000);
+    setInterval(() => (timestamp.value = Date.now()), 1000);
-      return { computedDate }
+    return { computedDate };
  }
 });
 </script>
 <style lang="scss" scoped>
-@import "../../styles/responsive.scss";
+@import '../../styles/responsive.scss';
 .clock {
  display: flex;
@@ -43,7 +43,13 @@
          <g v-if="greenBlinkLight" filter="url(#filter0_d_843_28)">
            <circle cx="15" cy="17" r="7" fill="#00FF0A" />
-            <animate attributeType="XML" attributeName="opacity" values="1;0;1" dur="1s" repeatCount="indefinite" />
+            <animate
              attributeType="XML"
              attributeName="opacity"
              values="1;0;1"
              dur="1s"
              repeatCount="indefinite"
            />
          </g>
          <g v-if="redTopLight" filter="url(#filter1_d_843_28)">
@@ -56,7 +62,13 @@
          <g v-if="redBottomLight" filter="url(#filter3_d_843_28)">
            <circle cx="15" cy="74" r="7" fill="#F40000" />
-            <animate attributeType="XML" attributeName="opacity" values="1;0;1" dur="1s" repeatCount="indefinite" />
+            <animate
              attributeType="XML"
              attributeName="opacity"
              values="1;0;1"
              dur="1s"
              repeatCount="indefinite"
            />
          </g>
        </g>
@@ -82,7 +94,12 @@
            <feComposite in2="hardAlpha" operator="out" />
            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 1 0 0 0 0 0.04 0 0 0 1 0" />
            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_843_28" />
-            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_843_28" result="shape" />
+            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="effect1_dropShadow_843_28"
              result="shape"
            />
          </filter>
          <filter
            id="filter1_d_843_28"
@@ -104,7 +121,12 @@
            <feGaussianBlur stdDeviation="2.5" />
            <feColorMatrix type="matrix" values="0 0 0 0 0.770833 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_843_28" />
-            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_843_28" result="shape" />
+            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="effect1_dropShadow_843_28"
              result="shape"
            />
          </filter>
          <filter
            id="filter2_d_843_28"
@@ -126,7 +148,12 @@
            <feGaussianBlur stdDeviation="2.5" />
            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.72 0 0 0 0 0 0 0 0 1 0" />
            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_843_28" />
-            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_843_28" result="shape" />
+            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="effect1_dropShadow_843_28"
              result="shape"
            />
          </filter>
          <filter
            id="filter3_d_843_28"
@@ -148,7 +175,12 @@
            <feGaussianBlur stdDeviation="2.5" />
            <feColorMatrix type="matrix" values="0 0 0 0 0.770833 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_843_28" />
-            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_843_28" result="shape" />
+            <feBlend
              mode="normal"
              in="SourceGraphic"
              in2="effect1_dropShadow_843_28"
              result="shape"
            />
          </filter>
        </defs>
      </svg>
@@ -162,9 +194,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { DataStatus } from '../../scripts/enums/DataStatus';
+import { useMainStore } from '../../store/mainStore';
-import { useStore } from '../../store/store';
+import { Status } from '../../typings/common';
-import { StoreState } from '../../scripts/interfaces/store/storeTypes';
+import { useApiStore } from '../../store/apiStore';
 export default defineComponent({
  data() {
@@ -172,28 +204,29 @@ export default defineComponent({
      tooltipActive: false,
      indicator: {
        offline: false,
-        status: DataStatus.Loading,
+        status: Status.Data.Loading,
-        message: 'data-status.S3',
+        message: 'data-status.S3'
      },
      greenLight: false,
      greenBlinkLight: false,
      redTopLight: false,
      orangeLight: false,
-      redBottomLight: false,
+      redBottomLight: false
    };
  },
  mounted() {
-    this.setSignalStatus(DataStatus.Loading);
+    this.setSignalStatus(Status.Data.Loading);
  },
  setup() {
-    const store = useStore();
+    const store = useMainStore();
    const apiStore = useApiStore();
    return {
-      dataStatus: store.dataStatuses,
+      dataStatus: apiStore.dataStatuses,
-      store,
+      store
    };
  },
@@ -201,87 +234,87 @@ export default defineComponent({
    dataStatus: {
      deep: true,
-      handler(statuses: StoreState['dataStatuses']) {
+      handler(statuses: any) {
        const connectionStatus = statuses.connection;
        const sceneryDataStatus = statuses.sceneries;
        const trainsDataStatus = statuses.trains;
        const dispatcherDataStatus = statuses.dispatchers;
        if (this.store.isOffline) {
-          this.setSignalStatus(DataStatus.Initialized);
+          this.setSignalStatus(Status.Data.Initialized);
-          this.indicator.status = DataStatus.Initialized;
+          this.indicator.status = Status.Data.Initialized;
          this.indicator.message = 'data-status.S1-offline';
          return;
        }
-        if (connectionStatus == DataStatus.Error) {
+        if (connectionStatus == Status.Data.Error) {
          this.setSignalStatus(connectionStatus);
          this.indicator.status = connectionStatus;
          this.indicator.message = 'data-status.S1a-connection';
          return;
        }
-        if (sceneryDataStatus == DataStatus.Error) {
+        if (sceneryDataStatus == Status.Data.Error) {
          this.setSignalStatus(sceneryDataStatus);
          this.indicator.status = sceneryDataStatus;
          this.indicator.message = 'data-status.S1a-sceneries';
          return;
        }
-        if (trainsDataStatus == DataStatus.Warning) {
+        if (trainsDataStatus == Status.Data.Warning) {
          this.setSignalStatus(trainsDataStatus);
          this.indicator.status = trainsDataStatus;
          this.indicator.message = 'data-status.S5-trains';
          return;
        }
-        if (dispatcherDataStatus == DataStatus.Warning) {
+        if (dispatcherDataStatus == Status.Data.Warning) {
          this.setSignalStatus(dispatcherDataStatus);
          this.indicator.status = dispatcherDataStatus;
          this.indicator.message = 'data-status.S5-dispatchers';
          return;
        }
-        if (sceneryDataStatus == DataStatus.Loaded) {
+        if (sceneryDataStatus == Status.Data.Loaded) {
-          this.setSignalStatus(DataStatus.Loaded);
+          this.setSignalStatus(Status.Data.Loaded);
-          this.indicator.status = DataStatus.Loaded;
+          this.indicator.status = Status.Data.Loaded;
          this.indicator.message = 'data-status.S2';
        }
-      },
+      }
-    },
+    }
  },
  methods: {
-    setSignalStatus(status: DataStatus) {
+    setSignalStatus(status: Status.Data) {
      this.greenLight = false;
      this.greenBlinkLight = false;
      this.redTopLight = false;
      this.orangeLight = false;
      this.redBottomLight = false;
-      if (status == DataStatus.Initialized) {
+      if (status == Status.Data.Initialized) {
        this.redTopLight = true;
      }
-      if (status == DataStatus.Loaded) {
+      if (status == Status.Data.Loaded) {
        this.greenLight = true;
      }
-      if (status == DataStatus.Warning) {
+      if (status == Status.Data.Warning) {
        this.orangeLight = true;
      }
-      if (status == DataStatus.Error) {
+      if (status == Status.Data.Error) {
        this.redTopLight = true;
        this.redBottomLight = true;
      }
-      if (status == DataStatus.Loading) {
+      if (status == Status.Data.Loading) {
        this.greenBlinkLight = true;
      }
-    },
+    }
-  },
+  }
 });
 </script>
@@ -375,4 +408,3 @@ export default defineComponent({
  }
 }
 </style>
@@ -1,168 +0,0 @@
 <template>
  <transition name="modal-anim">
    <section class="update-modal card" v-if="releaseData && modalOpen">
      <h2 class="modal_header text--primary">
        <img :src="getImage('stacjownik-header-logo.svg')" alt="stacjownik logo" />
        {{ releaseData.tag_name }}
      </h2>
      <div class="horizontal"></div>
      <div class="modal_content">
        <h3>{{ $t('update.title') }}</h3>
        <a :href="releaseData.html_url" target="_blank">{{ $t('update.release-link') }}</a>
        <br />
        <br />
        <p>{{ $t('update.paragraph1') }}</p>
        <!-- <div class="modal_changelog" v-html="markdownReleaseBody"></div> -->
      </div>
      <div class="modal_actions">
        <button class="btn btn--option" @click="modalOpen = false">{{ $t('update.confirm-button') }}</button>
      </div>
    </section>
  </transition>
 </template>
 <script lang="ts">
 import axios from 'axios';
 import { defineComponent } from 'vue';
 import packageInfo from '../../../package.json';
 import imageMixin from '../../mixins/imageMixin';
 import { ReleaseAPIData } from '../../scripts/interfaces/github_api/ReleaseAPIData';
 import StorageManager from '../../scripts/managers/storageManager';
 import { useStore } from '../../store/store';
 const GH_LASTEST_RELEASE_URL = 'https://api.github.com/repos/Spythere/stacjownik/releases/latest';
 export default defineComponent({
  mixins: [imageMixin],
  mounted() {
    this.fetchReleases();
  },
  data() {
    return {
      modalOpen: false,
      releaseData: null as ReleaseAPIData | null,
    };
  },
  setup() {
    return {
      store: useStore()
    }
  },
  methods: {
    async fetchReleases() {
      const storedVersion = StorageManager.getStringValue('appVersion');
      const appVersion = packageInfo.version;
      // Zmiana
      if (appVersion != storedVersion) {
        StorageManager.setStringValue('appVersion', appVersion);
        // Znajdź changelog na GitHubie, jeśli jest pokaż modal
        try {
          const releaseData: ReleaseAPIData = await (await axios.get(GH_LASTEST_RELEASE_URL)).data;
          if (!releaseData) return;
          const lastReleaseVersion = releaseData.tag_name.slice(1);
          if (lastReleaseVersion == appVersion) {
            this.releaseData = releaseData;        
            this.modalOpen = true;
            StorageManager.setStringValue('releaseURL', releaseData.html_url);
          }
        } catch (error) {
          console.error(`Wystąpił błąd podczas pobierania danych z API GitHuba: ${error}`);
        }
      }
    },
  },
 });
 </script>
 <style lang="scss" scoped>
@import '../../styles/card.scss';
@import '../../styles/responsive.scss';
 .modal-anim {
  &-enter-active,
  &-leave-active {
    transition: all $animDuration $animType;
  }
  &-enter-from,
  &-leave-to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.45);
  }
 }
 .update-modal {
  text-align: center;
  background-color: var(--clr-secondary);
  padding: 1em;
 }
 .horizontal {
  margin: 1em 0;
  height: 2px;
  width: 100%;
  background-color: white;
 }
 .modal_header {
  font-size: 1.6em;
  img {
    width: 50%;
    vertical-align: text-top;
  }
 }
 .modal_content {
  font-size: 1.1em;
  a {
    text-decoration: underline;
  }
 }
 .modal_actions {
  margin-top: 2em;
  button {
    color: white;
    padding: 0.5em;
    font-size: 1.2em;
    background-color: black;
  }
 }
 .modal_changelog {
  font-size: 0.8em;
  margin-top: 2em;
 }
@include smallScreen {
  .update-modal {
    height: auto;
    max-width: 95%;
  }
 }
 </style>
@@ -1,69 +0,0 @@
 <template>
  <div class="update-prompt">
    <transition name="prompt-anim">
      <div class="prompt_content" v-if="!hidePrompt && needRefresh">
        <div>{{ $t('update.title') }}</div>
        <div class="prompt_actions">
          <button class="btn btn--filled" @click="updateServiceWorker(true)">{{ $t('update.confirm-button') }}</button>
          <button class="btn btn--filled" @click="hidePrompt = true">{{ $t('update.later-button') }}</button>
        </div>
      </div>
    </transition>
  </div>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
 import useCustomSW from '../../mixins/useCustomSW';
 const hidePrompt = ref(false);
 const { needRefresh, updateServiceWorker } = useCustomSW();
 </script>
 <style lang="scss" scoped>
@import '../../styles/variables.scss';
 .update-prompt {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 200;
 }
 .prompt_content {
  margin: 1em;
  padding: 1em;
  font-weight: bold;
  background-color: black;
  box-shadow: 0 0 10px 1px $accentCol;
  border-radius: 1em;
 }
 .prompt_actions {
  display: flex;
  margin-top: 1em;
  gap: 0.5em;
  button {
    width: 100%;
  }
 }
 // Animation
 .prompt-anim {
  &-enter-active,
  &-leave-active {
    transition: all 120ms ease-in;
    transform: translateY(0);
  }
  &-enter-from,
  &-leave-to {
    transform: translateY(100%);
  }
 }
 </style>
@@ -7,14 +7,14 @@
 </template>
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent } from 'vue';
 export default defineComponent({});
 </script>
 <style lang="scss">
-@import "../../styles/variables";
+@import '../../styles/variables';
-@import "../../styles/responsive";
+@import '../../styles/responsive';
 .button_content {
  display: flex;
@@ -0,0 +1,42 @@
 <template>
  <button
    class="btn btn--option btn--load-data"
    v-if="!scrollNoMoreData && scrollDataLoaded && list.length >= 15"
    @click="addHistoryData"
  >
    {{ $t('journal.load-data') }}
  </button>
 </template>
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
 export default defineComponent({
  props: {
    scrollNoMoreData: {
      type: Boolean,
      required: true
    },
    scrollDataLoaded: {
      type: Boolean,
      required: true
    },
    list: {
      type: Array as PropType<any[]>,
      required: true
    }
  },
  emits: ['addHistoryData'],
  methods: {
    addHistoryData() {
      this.$emit('addHistoryData');
    }
  }
 });
 </script>
 <style scoped></style>
@@ -0,0 +1,101 @@
 <template>
  <transition name="modal-anim" tag="div" class="modal">
    <div class="body" v-if="isOpen">
      <div class="background" @click="toggleModal(false)"></div>
      <div class="wrapper" ref="wrapper" tabindex="0">
        <slot></slot>
      </div>
      <div class="tab-exit" ref="exit" tabindex="0" @focus="toggleModal(false)"></div>
    </div>
  </transition>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { useMainStore } from '../../store/mainStore';
 export default defineComponent({
  emits: ['toggleModal'],
  props: {
    isOpen: Boolean
  },
  data() {
    return {
      store: useMainStore()
    };
  },
  watch: {
    isOpen(v) {
      this.$nextTick(() => {
        if (v) (this.$refs['wrapper'] as HTMLElement).focus();
        else (this.store.modalLastClickedTarget as HTMLElement)?.focus();
      });
    }
  },
  methods: {
    toggleModal(value: boolean) {
      this.$emit('toggleModal', value);
    }
  }
 });
 </script>
 <style lang="scss" scoped>
@import '../../styles/responsive.scss';
 .body {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 100vw;
  height: 100vh;
 }
 .background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.55);
 }
 .wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #1a1a1a;
  box-shadow: 0 0 15px 10px #333333;
  width: 95%;
  max-width: 800px;
  max-height: 95vh;
  & > :slotted(div) {
    max-height: 95vh;
  }
 }
@include smallScreen {
  .wrapper {
    top: 0;
    transform: translate(-50%, 1em);
    max-height: 90vh;
    & > :slotted(div) {
      max-height: 90vh;
    }
  }
 }
 </style>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Spythere	ebfaf06a44	Merge pull request #72 from Spythere/development Wersja 1.19.4	2023-12-11 13:02:05 +01:00
Spythere	5a651aedf8	imports hotfix	2023-12-11 12:58:41 +01:00
Spythere	b66af014b9	lock sync	2023-12-10 15:29:29 +01:00
Spythere	634c9e1514	bump wersji: 1.19.4	2023-12-10 15:23:54 +01:00
Spythere	c4132a9be2	cleanup http c.d.	2023-12-10 15:23:27 +01:00
Spythere	82a9a9165f	cleanup http	2023-12-10 15:22:33 +01:00
Spythere	fcac03c0a4	Merge pull request #71 from Spythere/development Wersja 1.19.3	2023-12-10 00:56:21 +01:00
Spythere	39c3cf2329	restrukturyzacja storów	2023-12-09 16:18:23 +01:00
Spythere	59f4a0cb66	zmniejszenie czasu odpytywania z serwera	2023-12-08 20:00:17 +01:00
Spythere	e2b42d16a4	poprawki scrollBehavior	2023-12-08 18:55:06 +01:00
Spythere	e23663ed28	fix: brak ładowania danych o historii scenerii przy bezpośrednim wejściu z poz. URL	2023-12-08 18:15:49 +01:00
Spythere	dc7846c31e	bump wersji: 1.19.3	2023-12-08 17:15:16 +01:00
Spythere	d875433d56	ulepszone zapamiętywanie zakładek statystyk w dzienniku	2023-12-08 17:14:49 +01:00
Spythere	71e5044cb4	poprawki designu dziennika RJ	2023-12-08 16:20:17 +01:00
Spythere	e83aa40f82	aktualizacja endpointu API statystyk	2023-12-08 16:16:14 +01:00
Spythere	d1c0e0b898	Merge pull request #70 from Spythere/development Wersja 1.19.2	2023-12-07 16:29:53 +01:00
Spythere	26a7c69886	bump: 1.19.2	2023-12-07 16:18:21 +01:00
Spythere	0dc2c505db	poprawki do braku pokazywania się niezapisanych scenerii	2023-12-07 16:16:06 +01:00
Spythere	188857d335	fix: rozkłady jazdy pokazują się na innych serwerach	2023-12-06 20:29:28 +01:00
Spythere	3dbbb3b4f9	Merge pull request #69 from Spythere/development Wersja 1.19.1	2023-12-02 23:04:55 +01:00
Spythere	07a77c463b	bump 1.19.1	2023-12-02 23:04:24 +01:00
Spythere	1a8e2231dd	przejście z WS na komunikację http	2023-12-02 23:02:08 +01:00
Spythere	f630d272ca	Merge pull request #68 from Spythere/development Wersja 1.19.0	2023-12-02 18:31:58 +01:00
Spythere	a381cf806c	wyróżnienie nicku donatora w widoku scenerii	2023-12-02 18:15:52 +01:00
Spythere	0023ab8cfd	tłumaczenia; poprawki dropdown	2023-12-02 18:01:01 +01:00
Spythere	a392940d52	tłumaczenia	2023-12-02 16:15:37 +01:00
Spythere	74984ad653	dodano wyróżnienie nicku wspierającego w Dzienniku	2023-12-02 16:11:29 +01:00
Spythere	a8991434bc	tłumaczenia statystyk pociągów	2023-12-02 16:00:28 +01:00
Spythere	825610b4c2	hotfix; aktualizacja paczek	2023-12-01 21:40:04 +01:00
Spythere	fef3991206	bump: 1.19.0	2023-12-01 21:27:13 +01:00
Spythere	a21cb31a0a	ikona przy informacji offline pociągu	2023-12-01 21:26:57 +01:00
Spythere	23a954a0d1	statystyki ruchu online	2023-12-01 21:19:04 +01:00
Spythere	b7bc9625b8	dodatkowe opcje darowizny	2023-12-01 16:11:56 +01:00
Spythere	bc58196804	cleanup	2023-12-01 14:55:13 +01:00
Spythere	6550d6973e	zmiana API do pobierania informacji o wspierających	2023-12-01 14:54:55 +01:00
Spythere	d7a609a4f2	Merge pull request #67 from Spythere/development poprawki tłumaczeń; scrolling	2023-11-28 19:12:57 +01:00
Spythere	763506d5a9	bump: 1.18.6	2023-11-28 19:10:08 +01:00
Spythere	8dbb32b821	dodatkowe tłumaczenia	2023-11-28 19:09:14 +01:00
Spythere	b8a21e0f70	Merge pull request #66 from Spythere/development hotfix: scrollowanie tabelki scenerii	2023-11-28 18:58:27 +01:00
Spythere	7c2b5fbd50	hotfix scrollowania	2023-11-28 18:56:02 +01:00
Spythere	ac740c2743	Merge pull request #65 from Spythere/development feature: darowizny + poprawki (wersja 1.18.5)	2023-11-28 18:44:44 +01:00
Spythere	916f19df72	poprawki tłumaczenia en	2023-11-28 18:38:42 +01:00
Spythere	de8facfb05	bump: 1.18.5	2023-11-28 18:36:37 +01:00
Spythere	5d5ad44508	wielkość czcionki	2023-11-28 18:35:41 +01:00
Spythere	647055d2f0	ikona donatora w zakładce Pociągi; poprawki tłumaczeń	2023-11-28 18:33:40 +01:00
Spythere	1947555724	poprawki responsywności	2023-11-28 17:56:08 +01:00
Spythere	86417f3422	lock sync	2023-11-26 19:50:04 +01:00
Spythere	a224b58d17	feature: modal darowizn	2023-11-26 19:49:32 +01:00
Spythere	69be01fb1e	Merge pull request #64 - 1.18.4 fix poprawki do 1.18.4	2023-11-17 16:55:09 +01:00
Spythere	6ef04f0dbd	fix sortowania statusów dr; linting	2023-11-17 16:52:53 +01:00
Spythere	451d90f854	bump: 1.18.4	2023-11-15 21:09:30 +01:00
Spythere	b01d3e894b	Merge pull request #63 from Spythere/development hotfix: statusy dr	2023-11-15 21:07:28 +01:00
Spythere	13dc6a0e32	hotfix: statusy dr	2023-11-15 21:06:16 +01:00
Spythere	96714550d0	Merge pull request #62 - Wersja 1.18.3 Wersja 1.18.3	2023-11-15 02:13:54 +01:00
Spythere	2b6c751f55	hotifx toString	2023-11-13 15:57:01 +01:00
Spythere	08d3a2a03a	feature: nawigacja URL w widoku scenerii	2023-11-13 15:32:02 +01:00
Spythere	a79ca78781	poprawki animacji statusów danych & tryb offline	2023-11-13 14:59:17 +01:00
Spythere	e08333dba1	fix: tłumaczenie statusów dr	2023-11-12 16:40:25 +01:00
Spythere	8705dd1df5	fix filtrowania RJ na posterunkach; favicons index	2023-11-12 15:47:55 +01:00
Spythere	7b4da9d422	poprawki layoutu aplikacji	2023-11-10 16:18:06 +01:00
Spythere	e51b2fe2f3	poprawki filtrów poc.	2023-11-10 15:39:49 +01:00
Spythere	f8b4ce103f	refactor typów danych	2023-11-10 15:04:49 +01:00
Spythere	e82b4b8817	bump 1.18.3	2023-11-08 22:04:11 +01:00
Spythere	36e9df82b0	hotfixy	2023-11-08 22:03:45 +01:00
Spythere	cbce9af00b	nowe pobieranie i przetwarzanie statusów dyżurnych	2023-11-07 20:16:58 +01:00
Spythere	4a4304d65f	Merge pull request #61 - Wersja 1.18.2 Wersja 1.18.2	2023-11-04 17:03:51 +01:00
Spythere	edad5306f2	bump: 1.18.2	2023-11-04 17:01:01 +01:00
Spythere	5b775dfec9	fix: filtry RJ	2023-11-04 17:00:50 +01:00
Spythere	a485652ca5	Merge pull request #60 (hotfix) hotfix: maksymalny timeout dyżurnych (1.18.1)	2023-11-02 22:44:48 +01:00
Spythere	ed308246d7	hotfix: maksymalny timeout dyżurnych	2023-11-02 22:42:28 +01:00
Spythere	621bb1ad55	Merge pull request #59 - Wersja 1.18.1 Wersja 1.18.1	2023-11-02 17:41:59 +01:00
Spythere	154ae2ddac	bump 1.18.1	2023-11-02 17:40:55 +01:00
Spythere	d9da49a867	rozszerzony wybór regionów przez URL; poprawki headerów	2023-11-02 17:40:31 +01:00
Spythere	826d51f66c	Merge pull request #58 - Wersja 1.18 Wersja 1.18	2023-11-02 01:27:29 +01:00
Spythere	1d7fc2955f	animacje userów i spawnów scenerii	2023-11-01 17:20:05 +01:00
Spythere	c550e7598a	bump 1.18.0	2023-10-31 23:03:51 +01:00
Spythere	d5168ce59d	lock sync	2023-10-31 22:54:53 +01:00
Spythere	380c97655c	filtrowanie statusów; poprawki w statystykach	2023-10-31 22:53:18 +01:00
Spythere	e4ed24de80	region query	2023-10-31 02:35:41 +01:00
Spythere	8de03b9210	rework reaktywności danych z API i WS	2023-10-30 23:19:17 +01:00
Spythere	12ece46089	migracja assetów	2023-10-04 17:30:30 +02:00
Spythere	085238fada	hotfix: zapamiętywanie stanu statystyk	2023-10-04 15:32:36 +02:00
Spythere	45c1d83512	format & lint	2023-10-04 15:01:01 +02:00
Spythere	af9073ab98	Merge do wersji 1.17.1 Wersja 1.17.1	2023-10-03 21:58:23 +02:00
Spythere	800fc35e63	pliki lock	2023-10-03 21:53:59 +02:00
Spythere	d5649d221b	hotfixy	2023-10-03 21:51:00 +02:00
Spythere	5b35fac512	miniaturki c.d.	2023-10-03 21:31:06 +02:00
Spythere	d5bc90f668	mock data	2023-10-02 22:09:27 +02:00
Spythere	6d663886f0	bump wersji	2023-10-02 22:06:58 +02:00
Spythere	85a1a0216e	poprawki miniatur	2023-10-02 22:05:54 +02:00
Spythere	4ac054e947	miniaturki 2EN57	2023-10-01 15:11:53 +02:00
Spythere	ba70fa1316	miniaturki pojazdów c.d.	2023-10-01 15:08:01 +02:00
Spythere	77e6b20d0c	obsługa niezaładowanych miniaturek pojazdów	2023-10-01 01:41:14 +02:00
Spythere	f60263c923	mocking danych	2023-10-01 00:23:17 +02:00
Spythere	6aec1a75c9	cleanup c.d.	2023-09-29 16:49:37 +02:00
Spythere	d28d600833	code cleanup dziennika	2023-09-29 03:03:59 +02:00
Spythere	a353eb3185	Meta tagi; aktualizacja paczek Meta tagi; aktualizacja paczek	2023-09-26 14:44:48 +02:00
Spythere	c5735a6953	pliki lock	2023-09-26 14:42:11 +02:00
Spythere	7930f7fc8a	package.json	2023-09-26 14:36:01 +02:00
Spythere	68f4d54619	index: meta tagi	2023-09-26 14:33:58 +02:00
Spythere	c4f9738589	Merge #54 (hotfix) hotfix: wersja WS	2023-09-07 15:21:28 +02:00
Spythere	dd916afd1d	hotfix: wersja WS	2023-09-07 15:20:37 +02:00