Merge pull request #63 from Spythere/development

hotfix: statusy dr
2026-05-03 13:28:11 +00:00 · 2023-11-15 21:07:28 +01:00 · 2023-11-15 21:06:16 +01:00 · 2023-11-15 02:13:54 +01:00 · 2023-11-13 15:57:01 +01:00 · 2023-11-13 15:32:02 +01:00
230 changed files with 33865 additions and 14527 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'
  }
 }
@@ -1,3 +1,6 @@
 # This file was auto-generated by the Firebase CLI
 # https://github.com/firebase/firebase-tools
 name: Deploy to Firebase Hosting on PR
 'on': pull_request
 jobs:
@@ -11,4 +14,4 @@ jobs:
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_STACJOWNIK_TD2 }}'
-          projectId: stacjownik-td2
+          projectId: stacjownik-td2
@@ -1,7 +1,7 @@
 .DS_Store
 node_modules
 /dist
 /dev-dist
 /dist
 # local env files
 .env.local
@@ -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,7 +1,11 @@
 {
  "hosting": {
    "public": "dist",
-    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
@@ -10,4 +14,3 @@
    ]
  }
 }
@@ -1,12 +1,15 @@
-<!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" />
+    <meta
-    <meta name="description" content="Automatycznie odświeżana strona wyświetlająca stacje w Train Driver 2!" />
+      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,29 +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@400;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" />
-    <script src="https://www.gstatic.com/firebasejs/8.1.1/firebase-app.js"></script>
+    <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"
    />
-    <script>
+    <link
-      const firebaseConfig = {
+      href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500;700&display=swap"
-        apiKey: 'AIzaSyBI36X2-p7vU1flxoJdCEc0noByyTe1mpw',
+      rel="stylesheet"
-        authDomain: 'stacjownik-td2.firebaseapp.com',
+    />
        databaseURL: 'https://stacjownik-td2.firebaseio.com',
        projectId: 'stacjownik-td2',
        storageBucket: 'stacjownik-td2.appspot.com',
      };
      firebase.initializeApp(firebaseConfig);
    </script>
  </head>
  <body>
@@ -1,35 +1,48 @@
-{
+{
-  "name": "stacjownik",
+  "name": "stacjownik",
-  "version": "1.10.0",
+  "version": "1.18.3",
-  "private": true,
+  "private": true,
-  "scripts": {
+  "scripts": {
-    "dev": "vite",
+    "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
+    "build": "vue-tsc --noEmit && vite build",
-    "preview": "vite preview"
+    "deploy": "yarn build && firebase deploy --only hosting",
-  },
+    "preview": "yarn build && vite preview",
-  "dependencies": {
+    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
-    "core-js": "^3.12.1",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
-    "dotenv": "^8.6.0",
+    "format": "prettier --write src/"
-    "firebase": "^9.8.1",
+  },
-    "howler": "^2.2.1",
+  "dependencies": {
-    "pinia": "^2.0.14",
+    "core-js": "^3.32.2",
-    "sass": "^1.53.0",
+    "dotenv": "^16.3.1",
-    "socket.io-client": "^4.4.1",
+    "firebase": "^10.4.0",
-    "vue": "^3.2.37",
+    "howler": "^2.2.4",
-    "vue-i18n": "^9.1.6",
+    "pinia": "^2.1.6",
-    "vue-router": "^4.0.0-0"
+    "sass": "^1.67.0",
-  },
+    "socket.io-client": "^4.7.2",
-  "devDependencies": {
+    "vue": "^3.3.4",
-    "@types/node": "^17.0.35",
+    "vue-i18n": "^9.4.1",
-    "@vitejs/plugin-vue": "^3.0.0",
+    "vue-router": "^4.2.4"
-    "axios": "^0.21.1",
+  },
-    "typescript": "^4.6.4",
+  "devDependencies": {
-    "vite": "^3.0.0",
+    "@types/node": "^20.6.2",
-    "vue-tsc": "^0.38.4"
+    "@vite-pwa/assets-generator": "^0.0.10",
-  },
+    "@vitejs/plugin-vue": "^4.3.4",
-  "browserslist": [
+    "axios": "^1.5.0",
-    "> 1%",
+    "prettier": "^3.0.3",
-    "last 2 versions",
+    "typescript": "^5.2.2",
-    "not dead"
+    "vite": "^4.4.9",
-  ]
+    "vite-plugin-pwa": "^0.16.5",
-}
+    "vue-tsc": "^1.8.11",
    "@vue/eslint-config-prettier": "^8.0.0",
    "@vue/eslint-config-typescript": "^12.0.0",
    "@vue/tsconfig": "^0.4.0",
    "eslint": "^8.49.0",
    "eslint-plugin-vue": "^9.17.0",
    "@rushstack/eslint-patch": "^1.3.3"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
 }
@@ -0,0 +1,20 @@
 <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect y="-0.00012207" width="60" height="60" fill="#898989"/>
 <path d="M29.0126 32.4897V10.2511V9.52028H30.4337V10.2511V57.234H29.0126V32.4897Z" fill="#BFBFBF"/>
 <path d="M26.955 29.3992V32.9949L29.7672 36.9105" stroke="black" stroke-width="0.61183"/>
 <rect x="29.0051" y="34.0686" width="1.42857" height="22.8196" fill="white"/>
 <rect x="29.0051" y="34.0686" width="1.42857" height="5.18627" fill="#FF0000"/>
 <rect x="29.0051" y="54.8137" width="1.42857" height="5.18627" fill="#FF0000"/>
 <rect x="29.0051" y="44.4412" width="1.42857" height="5.18627" fill="#FF0000"/>
 <rect x="27.8749" y="31.8649" width="3.75" height="2.17823" fill="white"/>
 <path d="M33.5 28.5111V8.61545V8.11176H26V28.5111H33.5Z" fill="black"/>
 <path d="M29.6364 5.00276C27.1289 5.09112 26.2239 7.044 26 8.11176H33.5C33.3134 6.97036 32.1438 4.91439 29.6364 5.00276Z" fill="black"/>
 <path d="M29.8636 31.6201C32.3711 31.5317 33.2761 29.5789 33.5 28.5111H26C26.1865 29.6525 27.3561 31.7085 29.8636 31.6201Z" fill="black"/>
 <ellipse cx="29.887" cy="11.8168" rx="1.38696" ry="1.28474" fill="#212121"/>
 <ellipse cx="29.887" cy="8.0135" rx="1.38696" ry="1.28474" fill="#212121"/>
 <ellipse cx="29.887" cy="15.6151" rx="1.38696" ry="1.28474" fill="#212121"/>
 <ellipse cx="29.887" cy="19.6834" rx="1.38696" ry="1.28474" fill="#212121"/>
 <ellipse cx="29.887" cy="23.7518" rx="1.38696" ry="1.28474" fill="#212121"/>
 <ellipse cx="29.887" cy="27.8201" rx="1.38696" ry="1.28474" fill="#00FF0A"/>
 <ellipse cx="29.887" cy="19.769" rx="1.38696" ry="1.28474" fill="#00FF0A"/>
 </svg>
@@ -0,0 +1,18 @@
 <svg width="144" height="147" viewBox="0 0 144 147" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g filter="url(#filter0_d_1343_19)">
 <path d="M115.039 101.247C116.397 98.6665 115.405 95.4739 112.824 94.1167C110.243 92.7594 107.05 93.7514 105.693 96.3323L115.039 101.247ZM89.4447 44.0402L94.1179 46.4977L99.0329 37.1513L94.3597 34.6938L89.4447 44.0402ZM105.693 96.3323C95.7398 115.259 72.3278 122.534 53.4008 112.581L48.4858 121.927C72.5746 134.595 102.372 125.336 115.039 101.247L105.693 96.3323ZM53.4008 112.581C34.4739 102.627 27.1993 79.2155 37.1525 60.2885L27.8061 55.3735C15.1383 79.4623 24.397 109.259 48.4858 121.927L53.4008 112.581ZM37.1525 60.2885C47.1057 41.3616 70.5177 34.087 89.4447 44.0402L94.3597 34.6938C70.2709 22.026 40.4738 31.2846 27.8061 55.3735L37.1525 60.2885Z" fill="white"/>
 <path d="M91.2258 38.7627L101.056 20.0698L116.15 51.8695L81.3956 57.4555L91.2258 38.7627Z" fill="white"/>
 </g>
 <defs>
 <filter id="filter0_d_1343_19" x="18.1328" y="20.0698" width="102.017" height="115.531" 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 dy="4"/>
 <feGaussianBlur stdDeviation="2"/>
 <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_1343_19"/>
 <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1343_19" result="shape"/>
 </filter>
 </defs>
 </svg>
@@ -0,0 +1 @@
 <?xml version="1.0" ?><svg enable-background="new 0 0 32 32" id="Glyph" version="1.1" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M27.414,24.586l-5.077-5.077C23.386,17.928,24,16.035,24,14c0-5.514-4.486-10-10-10S4,8.486,4,14  s4.486,10,10,10c2.035,0,3.928-0.614,5.509-1.663l5.077,5.077c0.78,0.781,2.048,0.781,2.828,0  C28.195,26.633,28.195,25.367,27.414,24.586z M7,14c0-3.86,3.14-7,7-7s7,3.14,7,7s-3.14,7-7,7S7,17.86,7,14z" id="XMLID_223_"  fill="white" /></svg>
@@ -0,0 +1,3 @@
 <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M23.75 3.75H22.5V1.25H20V3.75H10V1.25H7.5V3.75H6.25C4.875 3.75 3.75 4.875 3.75 6.25V23.75C3.75 25.125 4.875 26.25 6.25 26.25H23.75C25.125 26.25 26.25 25.125 26.25 23.75V6.25C26.25 4.875 25.125 3.75 23.75 3.75ZM23.75 23.75H6.25V11.25H23.75V23.75ZM6.25 8.75V6.25H23.75V8.75H6.25ZM8.75 13.75H21.25V16.25H8.75V13.75ZM8.75 18.75H17.5V21.25H8.75V18.75Z" fill="#F2E147"/>
 </svg>
@@ -0,0 +1,3 @@
 <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M23.75 3.75H22.5V1.25H20V3.75H10V1.25H7.5V3.75H6.25C4.875 3.75 3.75 4.875 3.75 6.25V23.75C3.75 25.125 4.875 26.25 6.25 26.25H23.75C25.125 26.25 26.25 25.125 26.25 23.75V6.25C26.25 4.875 25.125 3.75 23.75 3.75ZM23.75 23.75H6.25V11.25H23.75V23.75ZM6.25 8.75V6.25H23.75V8.75H6.25ZM8.75 13.75H21.25V16.25H8.75V13.75ZM8.75 18.75H17.5V21.25H8.75V18.75Z" fill="#66FF6C"/>
 </svg>
@@ -0,0 +1,3 @@
 <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M23.75 3.75H22.5V1.25H20V3.75H10V1.25H7.5V3.75H6.25C4.875 3.75 3.75 4.875 3.75 6.25V23.75C3.75 25.125 4.875 26.25 6.25 26.25H23.75C25.125 26.25 26.25 25.125 26.25 23.75V6.25C26.25 4.875 25.125 3.75 23.75 3.75ZM23.75 23.75H6.25V11.25H23.75V23.75ZM6.25 8.75V6.25H23.75V8.75H6.25ZM8.75 13.75H21.25V16.25H8.75V13.75ZM8.75 18.75H17.5V21.25H8.75V18.75Z" fill="#898989"/>
 </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,252 +1,99 @@
-@import './styles/responsive.scss';
+@import './styles/responsive.scss';
-@import './styles/variables.scss';
+@import './styles/variables.scss';
-@import './styles/global.scss';
+@import './styles/global.scss';
-@import './styles/scenery_status.scss';
+
-
+// VUE ROUTE CHANGE ANIMATION
-// VUE ROUTE CHANGE ANIMATION
+.view-anim {
-.view-anim {
+  &-enter-from,
-  &-enter-from,
+  &-leave-to {
-  &-leave-to {
+    opacity: 0.02;
-    opacity: 0.02;
+  }
-  }
+
-
+  &-enter-active,
-  &-enter-active,
+  &-leave-active {
-  &-leave-active {
+    transition: all $animDuration $animType;
-    transition: all $animDuration $animType;
+    min-height: 100%;
-    min-height: 100%;
+  }
-  }
+}
-}
+
-
+.modal-anim {
-.modal-anim {
+  &-enter-active,
-  &-enter-active,
+  &-leave-active {
-  &-leave-active {
+    transition: all $animDuration $animType;
-    transition: all $animDuration $animType;
+  }
-  }
+
-
+  &-enter-from,
-  &-enter-from,
+  &-leave-to {
-  &-leave-to {
+    transform: translateY(-25%);
-    transform: translateY(-25%);
+    opacity: 0;
-    opacity: 0;
+  }
-  }
+}
-}
+
-
+.route {
-.route {
+  margin: 0 0.2em;
-  margin: 0 0.2em;
+
-
+  &-active,
-  &-active {
+  &[data-active='true'] {
-    color: $accentCol;
+    color: $accentCol;
-    font-weight: bold;
+    font-weight: bold;
-  }
+  }
-}
+}
-
+
-// APP
+// APP
-#app {
+#app {
-  color: white;
+  color: white;
-  font-size: 1rem;
+  font-size: 1rem;
-
+  overflow-x: hidden;
-  @include smallScreen() {
+
-    font-size: calc(0.4rem + 1.4vw);
+  @include smallScreen() {
-  }
+    font-size: calc(0.65rem + 0.8vw);
-}
+  }
-
+
-// CONTAINER
+  @include screenLandscape() {
-.app_container {
+    font-size: calc(0.45rem + 0.8vw);
-  display: flex;
+  }
-  flex-flow: column;
+}
-
+
-  min-height: 100vh;
+// CONTAINER
-
+.app_container {
-  header {
+  // display: flex;
-    flex: 0 0 auto;
+  // flex-flow: column;
-  }
+  display: grid;
-
+  grid-template-rows: auto 1fr auto;
-  main {
+  grid-template-columns: 100%;
-    flex: 1 1 auto;
+
-
+  min-height: 100vh;
-    padding: 0 0.5em;
+}
-  }
+
-
+.app_main {
-  footer {
+  padding: 0 0.5em;
-    flex: 0 1 0.2em;
+}
-  }
+
-}
+.warning {
-
+  background-color: firebrick;
-.warning {
+  text-align: center;
-  background-color: firebrick;
+  padding: 0.5em 0.4em;
-  text-align: center;
+  max-width: 1100px;
-  padding: 0.5em 0.4em;
+  margin: 0 auto;
-  max-width: 1100px;
+
-  margin: 0 auto;
+  border-radius: 0 0 1em 1em;
-
+}
-  border-radius: 0 0 1em 1em;
+
-}
+// FOOTER
-
+footer.app_footer {
-// Error icon
+  max-width: 100%;
-.wip-alert {
+  padding: 0.5em;
-  padding: 0 0.5em;
+
-  text-align: center;
+  img {
-}
+    width: 1.1em;
-
+    vertical-align: text-bottom;
-.icon-error {
+  }
-  width: 13em;
+
-  margin: 0.5em 0;
+  z-index: 10;
-}
+
-
+  background: #111;
-// HEADER
+  color: white;
-.app_header {
+
-  display: flex;
+  text-align: center;
-  justify-content: center;
+  vertical-align: middle;
-
+}
  position: relative;
  background-color: $primaryCol;
 }
 .header {
  &_body {
    max-width: 21em;
  }
  &_container {
    display: flex;
    justify-content: center;
    position: relative;
    width: 1350px;
    padding: 0.5em 0.3em 0 0.3em;
    border-radius: 0 0 1em 1em;
  }
  &_brand {
    img {
      width: 100%;
    }
  }
  &_info {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    max-width: 100%;
    font-size: 1.2em;
  }
  &_links {
    display: flex;
    justify-content: center;
    border-radius: 0.7em;
    font-size: 1.25em;
    padding: 0.5em;
  }
  &_icons {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 0.5em 0.5em;
    @include smallScreen() {
      right: auto;
      left: 0.75em;
      padding: 0;
      align-items: center;
    }
  }
 }
 // ICONS
 .icons {
  position: relative;
  &-top {
    img {
      width: 2.5em;
      cursor: pointer;
    }
    margin-bottom: 0.5em;
  }
  &-bottom {
    display: flex;
    a {
      margin-left: 0.6em;
      user-select: none;
    }
    img {
      width: 1.9em;
    }
    @include smallScreen() {
      flex-direction: column;
      a {
        margin: 0.25em 0;
      }
    }
  }
 }
 // COUNTER
 .info_counter {
  display: flex;
  justify-content: center;
  align-items: center;
  span {
    margin: 0 0.15em;
  }
  img {
    width: 1.35em;
  }
 }
 // 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;
  }
  .arrow {
    padding: 0;
  }
 }
 // FOOTER
 footer.app_footer {
  max-width: 100%;
  padding: 0.5em;
  z-index: 10;
  background: #111;
  color: white;
  text-align: center;
  vertical-align: middle;
 }
@@ -1,216 +1,159 @@
-<template>
+<template>
-  <div class="app_container">
+  <div class="app_container">
-    <UpdateModal />
+    <transition name="modal-anim">
-
+      <keep-alive>
-    <transition name="modal-anim">
+        <TrainModal v-if="store.chosenModalTrainId" />
-      <keep-alive>
+      </keep-alive>
-        <TrainModal v-if="store.chosenModalTrainId" />
+    </transition>
-      </keep-alive>
+
-    </transition>
+    <AppHeader :current-lang="currentLang" @change-lang="changeLang" />
-
+
-    <header class="app_header">
+    <main class="app_main">
-      <div class="header_container">
+      <router-view v-slot="{ Component }">
-        <div class="header_icons">
+        <keep-alive exclude="JournalView,SceneryView">
-          <span class="icons-top">
+          <component :is="Component" :key="$route.name" />
-            <img :src="getIcon('pl')" alt="icon-pl" @click="changeLang('en')" v-if="currentLang == 'pl'" />
+        </keep-alive>
-            <img :src="getIcon('en', 'jpg')" alt="icon-en" @click="changeLang('pl')" v-else />
+      </router-view>
-          </span>
+    </main>
-          <span class="icons-bottom">
+
-            <a href="https://www.paypal.com/paypalme/spythere" target="_blank">
+    <footer class="app_footer">
-              <img :src="getIcon('dollar')" alt="icon paypal" />
+      &copy;
-            </a>
+      <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
-
+      {{ new Date().getUTCFullYear() }} |
-            <a href="https://discord.gg/x2mpNN3svk" target="_blank">
+      <a :href="releaseURL" target="_blank">v{{ VERSION }}{{ isOnProductionHost ? '' : 'dev' }}</a>
-              <img :src="getIcon('discord', 'png')" alt="icon discord" />
+      <br />
-            </a>
+      <a href="https://discord.gg/x2mpNN3svk">
-          </span>
+        <img src="/images/icon-discord.png" alt="" />&nbsp;<b>{{ $t('footer.discord') }}</b>
-        </div>
+      </a>
-
+
-        <div class="header_body">
+      <div style="display: none">&int; ukryta taktyczna całka do programowania w HTMLu</div>
-          <status-indicator />
+    </footer>
-          <span class="header_brand">
+  </div>
-            <img :src="getImage('stacjownik-header-logo.svg')" alt="Stacjownik" />
+</template>
-          </span>
+
-
+<script lang="ts">
-          <span class="header_info">
+import { defineComponent, watch } from 'vue';
-            <Clock />
+
-
+import Clock from './components/App/Clock.vue';
-            <div class="info_counter">
+
-              <img :src="getIcon('dispatcher')" alt="icon dispatcher" />
+import packageInfo from '.././package.json';
-              <span class="text--primary">{{ onlineDispatchers.length }}</span>
+import { regions } from './data/options.json';
-              <span class="text--grayed"> / </span>
+
-              <span class="text--primary">{{ trainList.length }}</span>
+import { useStore } from './store/mainStore';
-              <img :src="getIcon('train')" alt="icon train" />
+import StatusIndicator from './components/App/StatusIndicator.vue';
-            </div>
+import TrainModal from './components/Global/TrainModal.vue';
-
+import AppHeader from './components/App/AppHeader.vue';
-            <span class="info_region">
+import axios from 'axios';
-              <SelectBox :itemList="computedRegions" :defaultItemIndex="0" @selected="changeRegion" />
+import StorageManager from './managers/storageManager';
-            </span>
+
-          </span>
+export default defineComponent({
-
+  components: {
-          <span class="header_links">
+    Clock,
-            <router-link class="route" active-class="route-active" to="/" exact>
+    StatusIndicator,
-              {{ $t('app.sceneries') }}
+    TrainModal,
-            </router-link>
+    AppHeader
-            /
+  },
-            <router-link class="route" active-class="route-active" to="/trains">{{ $t('app.trains') }}</router-link>
+
-            /
+  data: () => ({
-            <router-link class="route" active-class="route-active" to="/journal/timetables">
+    VERSION: packageInfo.version,
-              {{ $t('app.journal') }}
+    store: useStore(),
-            </router-link>
+
-          </span>
+    currentLang: 'pl',
-        </div>
+    releaseURL: '',
-      </div>
+    isOnProductionHost: location.hostname == 'stacjownik-td2.web.app'
-    </header>
+  }),
-
+
-    <main class="app_main">
+  created() {
-      <router-view v-slot="{ Component }">
+    this.loadLang();
-        <keep-alive>
+    this.store.connectToAPI();
-          <component :is="Component" :key="$route.path" />
+
-        </keep-alive>
+    this.store.isOffline = !window.navigator.onLine;
-      </router-view>
+
-    </main>
+    window.addEventListener('offline', () => {
-
+      this.store.isOffline = true;
-    <footer class="app_footer">
+
-      &copy;
+      this.store.activeData.activeSceneries = [];
-      <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
+      this.store.activeData.trains = [];
-      {{ new Date().getUTCFullYear() }} | <a :href="releaseURL" target="_blank">v{{ VERSION }}</a>
+      this.store.activeData.connectedSocketCount = 0;
-
+
-      <div style="display: none">&int; ukryta taktyczna całka do programowania w HTMLu</div>
+      this.store.setStatuses();
-    </footer>
+    });
-  </div>
+
-</template>
+    window.addEventListener('online', () => {
-
+      this.store.isOffline = false;
-<script lang="ts">
+    });
-import { computed, defineComponent, provide, ref } from 'vue';
+  },
-
+
-import Clock from './components/App/Clock.vue';
+  async mounted() {
-
+    this.setReleaseURL();
-import packageInfo from '.././package.json';
+
-import options from './data/options.json';
+    watch(
-
+      () => this.store.blockScroll,
-import StatusIndicator from './components/App/StatusIndicator.vue';
+      (value) => {
-import SelectBox from './components/Global/SelectBox.vue';
+        if (value) document.body.classList.add('no-scroll');
-import { useStore } from './store/store';
+        else document.body.classList.remove('no-scroll');
-import UpdateModal from './components/App/UpdateModal.vue';
+      }
-import TrainModal from './components/Global/TrainModal.vue';
+    );
-import StorageManager from './scripts/managers/storageManager';
+  },
-import imageMixin from './mixins/imageMixin';
+
-
+  watch: {
-export default defineComponent({
+    '$route.query.region': {
-  components: {
+      immediate: true,
-    Clock,
+      handler(regionQuery: string) {
-    StatusIndicator,
+        if (regionQuery) {
-    SelectBox,
+          this.store.region.id =
-    UpdateModal,
+            regions.find(
-    TrainModal,
+              (reg) =>
-  },
+                reg.id == regionQuery.toLocaleLowerCase() ||
-
+                reg.value.toLocaleLowerCase() == regionQuery.toLocaleLowerCase()
-  mixins: [imageMixin],
+            )?.id || 'eu';
-
+        }
-  setup() {
+      }
-    const store = useStore();
+    }
-    store.connectToAPI();
+  },
-
+
-    const isFilterCardVisible = ref(false);
+  methods: {
-
+    changeLang(lang: string) {
-    provide('isFilterCardVisible', isFilterCardVisible);
+      this.$i18n.locale = lang;
-
+      this.currentLang = lang;
-    return {
+
-      store,
+      StorageManager.setStringValue('lang', lang);
-      isFilterCardVisible,
+    },
-      onlineDispatchers: computed(() =>
+
-        store.stationList.filter((station) => station.onlineInfo && station.onlineInfo.region == store.region.id)
+    async setReleaseURL() {
-      ),
+      try {
-
+        const releaseData = await (
-      dispatcherDataStatus: store.dataStatuses.dispatchers,
+          await axios.get('https://api.github.com/repos/Spythere/stacjownik/releases/latest')
-    };
+        ).data;
-  },
+
-
+        if (!releaseData) return;
-  computed: {
+
-    trainList() {
+        this.releaseURL = releaseData.html_url;
-      return this.store.trainList.filter((train) => train.online);
+      } catch (error) {
-    },
+        console.error(`Wystąpił błąd podczas pobierania danych z API GitHuba: ${error}`);
-
+        return;
-    computedRegions() {
+      }
-      return this.options.regions.map((region) => {
+    },
-        const regionStationCount =
+
-          this.store.apiData.stations?.filter((station) => station.region == region.id && station.isOnline).length || 0;
+    loadLang() {
-        const regionTrainCount =
+      const storageLang = StorageManager.getStringValue('lang');
-          this.store.apiData.trains?.filter((train) => train.region == region.id && train.online).length || 0;
+
-
+      if (storageLang) {
-        return {
+        this.changeLang(storageLang);
-          id: region.id,
+        return;
-          value: `${region.value} <div class='text--grayed'>${regionStationCount} / ${regionTrainCount}</div>`,
+      }
-          selectedValue: region.value,
+
-        };
+      if (!window.navigator.language) return;
-      });
+
-    },
+      const naviLanguage = window.navigator.language.toString();
-  },
+
-
+      if (naviLanguage.includes('en')) {
-  data: () => ({
+        this.changeLang('en');
-    VERSION: packageInfo.version,
+        return;
-    options,
+      }
-
+    }
-    currentLang: 'pl',
+  }
-    releaseURL: '',
+});
-  }),
+</script>
-
+
-  created() {
+<style lang="scss" src="./App.scss"></style>
    this.loadLang();
  },
  async mounted() {
    this.updateStorage();
    this.setReleaseURL();
  },
  methods: {
    changeRegion(region: { id: string; value: string }) {
      this.store.changeRegion(region);
    },
    changeLang(lang: string) {
      this.$i18n.locale = lang;
      this.currentLang = lang;
      StorageManager.setStringValue('lang', lang);
    },
    setReleaseURL() {
      const releaseURL = StorageManager.getStringValue('releaseURL');
      this.releaseURL = releaseURL || '';
    },
    updateStorage() {
      if (!StorageManager.isRegistered('unavailable-status')) {
        StorageManager.setBooleanValue('unavailable-status', true);
        StorageManager.setBooleanValue('ending-status', true);
        StorageManager.setBooleanValue('no-space-status', true);
        StorageManager.setBooleanValue('afk-status', true);
      }
    },
    loadLang() {
      const storageLang = StorageManager.getStringValue('lang');
      if (storageLang) {
        this.changeLang(storageLang);
        return;
      }
      if (!window.navigator.language) return;
      const naviLanguage = window.navigator.language.toString();
      if (naviLanguage.includes('en')) {
        this.changeLang('en');
        return;
      }
    },
  },
 });
 </script>
 <style lang="scss" src="./App.scss"></style>
@@ -1,18 +0,0 @@
 <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="M30.5 6.04878H35.2195" stroke="#BFBFBF"/>
 <path d="M27.9024 4.00303C25.2115 4.10008 24.2403 6.24494 24 7.41767H32.0488C31.8486 6.16406 30.5934 3.90598 27.9024 4.00303Z" fill="black"/>
 <path d="M33.0244 29.6688V5.47793V4.68292H34.4878V5.47793V56.5854H33.0244V32.5H27.5V28.5V28.0163L28.5 28V31.5L31.9268 31.5447H33.0244V29.6688Z" fill="#BFBFBF"/>
 <path d="M28.1463 29.2683C30.8373 29.1712 31.8085 27.0264 32.0488 25.8537H24C24.2002 27.1073 25.4554 29.3654 28.1463 29.2683Z" fill="black"/>
 <path d="M32.0488 25.8537V7.86993V7.41464H24V25.8537H32.0488Z" fill="black"/>
 <path d="M25 26V29.5L33.8781 44.9756" stroke="black"/>
 <rect x="33.0244" y="31.5447" width="1.46341" height="25.0407" fill="white"/>
 <rect x="33.0244" y="31.5447" width="1.46341" height="5.69106" fill="#FF0000"/>
 <rect x="33.0244" y="42.9268" width="1.46341" height="5.69106" fill="#FF0000"/>
 <rect x="33.0244" y="54.3089" width="1.46341" height="5.69106" fill="#FF0000"/>
 <ellipse cx="27.9024" cy="7.40022" rx="1.46341" ry="1.40022" fill="#212121"/>
 <ellipse cx="27.9024" cy="11.8343" rx="1.46341" ry="1.40022" fill="#212121"/>
 <ellipse cx="27.9024" cy="16.2683" rx="1.46341" ry="1.40022" fill="#FF0000"/>
 <ellipse cx="27.9024" cy="20.7023" rx="1.46341" ry="1.40022" fill="#212121"/>
 <ellipse cx="27.9024" cy="25.1364" rx="1.46341" ry="1.40022" fill="#212121"/>
 </svg>
@@ -0,0 +1,214 @@
 <template>
  <header class="app_header">
    <div class="header_container">
      <div class="header_icons">
        <span class="icons-top">
          <img
            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>
      <div class="header_body">
        <StatusIndicator />
        <span class="header_brand">
          <router-link to="/">
            <img src="/images/stacjownik-header-logo.svg" alt="Stacjownik" />
          </router-link>
        </span>
        <span class="header_info">
          <Clock />
          <div class="info_counter">
            <img src="/images/icon-dispatcher.svg" alt="icon dispatcher" />
            <span class="text--primary">{{ onlineDispatchersCount }}</span>
            <!-- <span class="g-tooltip">
              <b class="text--primary">{{ factorU }}U</b>
              <div class="content">Test</div>
            </span> -->
            <span class="text--grayed"> / </span>
            <span class="text--primary">{{ onlineTrainsCount }}</span>
            <img src="/images/icon-train.svg" alt="icon train" />
          </div>
          <div class="info_region">
            <RegionDropdown />
          </div>
        </span>
        <span class="header_links">
          <router-link class="route" active-class="route-active" to="/" exact>
            {{ $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"
            :data-active="$route.path.startsWith('/journal')"
            to="/journal"
          >
            {{ $t('app.journal') }}
          </router-link>
        </span>
      </div>
    </div>
  </header>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { useStore } from '../../store/mainStore';
 import StatusIndicator from './StatusIndicator.vue';
 import Clock from './Clock.vue';
 import RegionDropdown from '../Global/RegionDropdown.vue';
 export default defineComponent({
  emits: ['changeLang'],
  props: {
    currentLang: {
      type: String,
      required: true
    }
  },
  setup() {
    return {
      store: useStore()
    };
  },
  methods: {
    changeLang(lang: string) {
      this.$emit('changeLang', lang);
    }
  },
  computed: {
    onlineTrainsCount() {
      return this.store.trainList.filter((train) => train.region == this.store.region.id).length;
    },
    onlineDispatchersCount() {
      return this.store.onlineSceneryList.filter(
        (scenery) => scenery.region == this.store.region.id
      ).length;
    },
    factorU() {
      return this.onlineDispatchersCount == 0
        ? '-'
        : (this.onlineTrainsCount / this.onlineDispatchersCount).toFixed(2);
    }
  },
  components: { StatusIndicator, Clock, RegionDropdown }
 });
 </script>
 <style lang="scss" scoped>
@import '../../styles/variables.scss';
@import '../../styles/responsive.scss';
 // HEADER
 .app_header {
  display: flex;
  justify-content: center;
  position: relative;
  background-color: $primaryCol;
 }
 .header {
  &_body {
    position: relative;
    max-width: 20em;
  }
  &_container {
    display: flex;
    justify-content: center;
    border-radius: 0 0 1em 1em;
    @include smallScreen {
      position: relative;
      margin-top: 0.5em;
    }
  }
  &_brand {
    display: flex;
    img {
      width: 100%;
      margin: 0 auto;
    }
  }
  &_info {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    font-size: 1.15em;
  }
  &_links {
    display: flex;
    justify-content: center;
    border-radius: 0.7em;
    font-size: 1.25em;
    padding: 0.5em;
  }
  &_icons {
    position: absolute;
    right: 0;
    top: 0;
    padding: 0.5em;
    @include smallScreen {
      transform: translateX(85%);
    }
  }
 }
 // ICONS
 .icons-top {
  img {
    width: 2.5em;
    cursor: pointer;
  }
 }
 // COUNTER
 .info_counter {
  display: flex;
  justify-content: center;
  align-items: center;
  span {
    margin: 0 0.15em;
  }
  img {
    width: 1.35em;
  }
 }
 .info_region {
  display: flex;
  justify-content: flex-end;
 }
 </style>
@@ -1,36 +1,37 @@
-<template>
+<template>
-  <div class="clock">{{ computedDate }}</div>
+  <div class="clock">{{ computedDate }}</div>
-</template>
+</template>
-
+
-
+<script lang="ts">
-<script lang="ts">
+import { computed, defineComponent, ref } from 'vue';
-import { computed, defineComponent, ref } from "vue";
+export default defineComponent({
-export default defineComponent({
+  name: 'VueClock',
-  name: "clock",
+  data: () => ({
-  data: () => ({
+    timestamp: Date.now()
-    timestamp: Date.now(),
+  }),
-  }),
+  setup() {
-  setup() {
+    let timestamp = ref(Date.now());
-      let timestamp = ref(Date.now());
+
-
+    const computedDate = computed(() =>
-      const computedDate = computed(() => new Date(timestamp.value).toLocaleString("pl-PL", {
+      new Date(timestamp.value).toLocaleString('pl-PL', {
-        hour: "2-digit",
+        hour: '2-digit',
-        minute: "2-digit",
+        minute: '2-digit',
-        second: "2-digit",
+        second: '2-digit'
-      }));
+      })
-
+    );
-      setInterval(() => (timestamp.value = Date.now()), 1000);
+
-
+    setInterval(() => (timestamp.value = Date.now()), 1000);
-      return { computedDate }
+
-  }
+    return { computedDate };
-});
+  }
-</script>
+});
-
+</script>
-<style lang="scss" scoped>
+
-@import "../../styles/responsive.scss";
+<style lang="scss" scoped>
-
+@import '../../styles/responsive.scss';
-.clock {
+
-  display: flex;
+.clock {
-  align-items: center;
+  display: flex;
-}
+  align-items: center;
-</style>
+}
 </style>
@@ -1,31 +0,0 @@
 <template>
  <div class="loading">{{message}}</div>
 </template>
 <script lang="ts">
 import { defineComponent } from "vue";
 export default defineComponent({
  props: ["message"],
 });
 </script>
 <style lang="scss" scoped>
 .loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: calc(0.75rem + 1vw);
  color: #fdc62f;
 }
 </style>
@@ -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>
@@ -161,31 +193,31 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { DataStatus } from '../../scripts/enums/DataStatus';
+import { StoreState } from '../../store/typings';
-import { useStore } from '../../store/store';
+import { useStore } from '../../store/mainStore';
-import { StoreState } from '../../store/storeTypes';
+import { Status } from '../../typings/common';
 export default defineComponent({
  data() {
    return {
      tooltipActive: false,
      indicator: {
-        status: DataStatus.Loading,
+        offline: false,
-        message: 'data-status.S3',
+        status: Status.Data.Loading,
        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() {
@@ -193,6 +225,7 @@ export default defineComponent({
    return {
      dataStatus: store.dataStatuses,
      store
    };
  },
@@ -206,70 +239,81 @@ export default defineComponent({
        const trainsDataStatus = statuses.trains;
        const dispatcherDataStatus = statuses.dispatchers;
-        if (connectionStatus == DataStatus.Error) {
+        if (this.store.isOffline) {
          this.setSignalStatus(Status.Data.Initialized);
          this.indicator.status = Status.Data.Initialized;
          this.indicator.message = 'data-status.S1-offline';
          return;
        }
        if (connectionStatus == Status.Data.Error) {
          this.setSignalStatus(connectionStatus);
          this.indicator.status = connectionStatus;
          this.indicator.message = 'data-status.S1a-connection';
          return;
        }
-        if (sceneryDataStatus == 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.Loaded) {
+      if (status == Status.Data.Initialized) {
        this.redTopLight = true;
      }
      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>
@@ -291,10 +335,11 @@ export default defineComponent({
 .status-indicator {
  position: absolute;
  left: 50%;
  bottom: 0;
-  transform: translateX(12em);
+  right: 0;
  z-index: 100;
  transform: translateX(1.5em);
 }
 .indicator {
@@ -319,7 +364,7 @@ export default defineComponent({
    background-color: #171717;
    border-radius: 0.75em;
-    min-width: 13em;
+    width: 13em;
    text-align: center;
    overflow: none;
@@ -343,22 +388,16 @@ export default defineComponent({
    }
    @include midScreen() {
-      left: 50%;
+      left: auto;
-      top: 100%;
+      right: 200%;
      transform: translate(-50%, 0);
      margin-left: 0;
      margin-top: 0.75em;
      &::before {
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
-        border-bottom: 10px solid #171717;
+        border-left: 12px solid #171717;
        right: 0;
        left: auto;
-        top: 0;
+        transform: translate(100%, -50%);
        left: 50%;
        transform: translate(-50%, -100%);
      }
    }
@@ -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,65 +1,24 @@
-<template>
+<template>
-  <button class="action-btn">
+  <button class="action-btn btn--filled">
-    <div class="button_content">
+    <div class="button_content">
-      <slot></slot>
+      <slot></slot>
-    </div>
+    </div>
-  </button>
+  </button>
-</template>
+</template>
-
+
-<script lang="ts">
+<script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent } from 'vue';
-
+
-export default defineComponent({});
+export default defineComponent({});
-</script>
+</script>
-
+
-<style lang="scss">
+<style lang="scss">
-@import "../../styles/variables";
+@import '../../styles/variables';
-@import "../../styles/responsive";
+@import '../../styles/responsive';
-
+
-.action-btn {
+.button_content {
-  background: #333;
+  display: flex;
-  border: none;
+  justify-content: center;
-
+  align-items: center;
-  color: #bdbdbd;
+}
-
+</style>
  font-size: 1em;
  font-weight: 500;
  padding: 0.35em 0.65em;
  cursor: pointer;
  transition: all 0.3s;
  &.outlined {
    border: 1px solid white;
  }
  img {
    width: 1.25em;
    vertical-align: middle;
    margin-right: 0.35em;
  }
  p {
    font-size: 1em;
    overflow: hidden;
  }
  &.open {
    color: $accentCol;
    border: none;
  }
  &:hover,
  &:focus {
    color: $accentCol;
    background: #5c5c5c;
  }
 }
 .button_content {
  display: flex;
  justify-content: center;
  align-items: center;
 }
 </style>
@@ -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>
@@ -12,7 +12,7 @@ import { defineComponent } from 'vue';
 export default defineComponent({
  setup() {
    return {};
-  },
+  }
 });
 </script>
@@ -20,7 +20,7 @@ export default defineComponent({
 .loading {
  position: absolute;
  left: 50%;
-  transform: translateX(-50%);
+  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
@@ -0,0 +1,65 @@
 <template>
  <div class="progress-bar">
    <span class="bar-bg"></span>
    <span
      class="bar-fg"
      :style="{ width: `${~~progressPercent}%`, backgroundColor: bgColor }"
    ></span>
  </div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
 export default defineComponent({
  props: {
    progressPercent: {
      type: Number,
      required: true
    },
    progressType: {
      type: String,
      required: false
    }
  },
  computed: {
    bgColor() {
      switch (this.progressType) {
        case 'abandoned':
          return 'salmon';
        default:
          return 'springgreen';
      }
    }
  }
 });
 </script>
 <style lang="scss" scoped>
 .progress-bar {
  position: relative;
  width: 6em;
  height: 1em;
  margin: 0.5em 0;
  .bar-fg,
  .bar-bg {
    position: absolute;
    height: 1em;
    width: 100%;
    left: 0;
  }
  .bar-fg {
    background-color: springgreen;
  }
  .bar-bg {
    background-color: #5b5b5b;
  }
 }
 </style>
--- a/Show More
+++ b/Show More
		`@@ -0,0 +1 @@`
							<?xml version="1.0" ?><svg enable-background="new 0 0 32 32" id="Glyph" version="1.1" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M27.414,24.586l-5.077-5.077C23.386,17.928,24,16.035,24,14c0-5.514-4.486-10-10-10S4,8.486,4,14 s4.486,10,10,10c2.035,0,3.928-0.614,5.509-1.663l5.077,5.077c0.78,0.781,2.048,0.781,2.828,0 C28.195,26.633,28.195,25.367,27.414,24.586z M7,14c0-3.86,3.14-7,7-7s7,3.14,7,7s-3.14,7-7,7S7,17.86,7,14z" id="XMLID_223_" fill="white" /></svg>