Merge pull request #58 - Wersja 1.18

Wersja 1.18
animacje userów i spawnów scenerii
2026-05-03 05:18:11 +00:00 · 2023-11-02 01:27:29 +01:00 · 2023-11-01 17:20:05 +01:00 · 2023-10-31 23:03:51 +01:00 · 2023-10-31 22:54:53 +01:00 · 2023-10-31 22:53:18 +01:00
218 changed files with 44918 additions and 24237 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"
+}
@@ -5,8 +5,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 name="description" content="Automatycznie odświeżana strona wyświetlająca stacje w Train Driver 2!" />
+    <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 +16,31 @@
    <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-32.png" sizes="32x32" 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" />
+
+    <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>
@@ -1,33 +1,44 @@
 {
  "name": "stacjownik",
-  "version": "1.11.1",
+  "version": "1.18.0",
  "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",
-    "dotenv": "^16.0.3",
-    "firebase": "^9.8.1",
-    "howler": "^2.2.1",
-    "pinia": "^2.0.14",
-    "sass": "^1.53.0",
-    "socket.io-client": "^4.4.1",
-    "vue": "^3.2.37",
-    "vue-i18n": "^9.1.6",
-    "vue-router": "^4.0.0-0"
+    "core-js": "^3.32.2",
+    "dotenv": "^16.3.1",
+    "firebase": "^10.4.0",
+    "howler": "^2.2.4",
+    "pinia": "^2.1.6",
+    "sass": "^1.67.0",
+    "socket.io-client": "^4.7.2",
+    "vue": "^3.3.4",
+    "vue-i18n": "^9.4.1",
+    "vue-router": "^4.2.4"
  },
  "devDependencies": {
-    "@types/node": "^18.11.17",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "axios": "^1.2.1",
-    "typescript": "^4.9.4",
-    "vite": "^4.0.3",
-    "vite-plugin-pwa": "^0.14.0",
-    "vue-tsc": "^1.0.18"
+    "@types/node": "^20.6.2",
+    "@vite-pwa/assets-generator": "^0.0.10",
+    "@vitejs/plugin-vue": "^4.3.4",
+    "axios": "^1.5.0",
+    "prettier": "^3.0.3",
+    "typescript": "^5.2.2",
+    "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%",
@@ -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,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,7 +1,6 @@
@import './styles/responsive.scss';
@import './styles/variables.scss';
@import './styles/global.scss';
-@import './styles/scenery_status.scss';

 // VUE ROUTE CHANGE ANIMATION
 .view-anim {
@@ -44,9 +43,14 @@
 #app {
  color: white;
  font-size: 1rem;
+  overflow-x: hidden;

  @include smallScreen() {
-    font-size: calc(0.5rem + 1.3vw);
+    font-size: calc(0.65rem + 0.8vw);
+  }
+
+  @include screenLandscape() {
+    font-size: calc(0.45rem + 0.8vw);
  }
 }

@@ -87,6 +91,11 @@ footer.app_footer {
  max-width: 100%;
  padding: 0.5em;

+  img {
+    width: 1.1em;
+    vertical-align: text-bottom;
+  }
+
  z-index: 10;

  background: #111;
@@ -6,8 +6,6 @@
      </keep-alive>
    </transition>

-    <UpdatePrompt />
-
    <AppHeader :current-lang="currentLang" @change-lang="changeLang" />

    <main class="app_main">
@@ -21,7 +19,12 @@
    <footer class="app_footer">
      &copy;
      <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
-      {{ new Date().getUTCFullYear() }} | <a :href="releaseURL" target="_blank">v{{ VERSION }}</a>
+      {{ new Date().getUTCFullYear() }} |
+      <a :href="releaseURL" target="_blank">v{{ VERSION }}{{ isOnProductionHost ? '' : 'dev' }}</a>
+      <br />
+      <a href="https://discord.gg/x2mpNN3svk">
+        <img src="/images/icon-discord.png" alt="" />&nbsp;<b>{{ $t('footer.discord') }}</b>
+      </a>

      <div style="display: none">&int; ukryta taktyczna całka do programowania w HTMLu</div>
    </footer>
@@ -29,24 +32,19 @@
 </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 { useStore } from './store/store';
 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 { VERSION } from 'vue-i18n';
-import { RouterView } from 'vue-router';
-import useCustomSW from './mixins/useCustomSW';

 export default defineComponent({
  components: {
@@ -54,42 +52,21 @@ export default defineComponent({
    StatusIndicator,
    SelectBox,
    TrainModal,
-    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,
-    };
+    AppHeader
  },

  data: () => ({
    VERSION: packageInfo.version,
+    store: useStore(),

    currentLang: 'pl',
    releaseURL: '',
+    isOnProductionHost: location.hostname == 'stacjownik-td2.web.app'
  }),

  created() {
    this.loadLang();
+    this.store.connectToAPI();

    this.store.isOffline = !window.navigator.onLine;

@@ -100,10 +77,10 @@ export default defineComponent({
        stations: [],
        dispatchers: [],
        trains: [],
-        connectedSocketCount: 0,
+        connectedSocketCount: 0
      };

-      this.store.setOnlineData();
+      this.store.setStatuses();
    });

    window.addEventListener('online', () => {
@@ -117,16 +94,23 @@ export default defineComponent({
    watch(
      () => this.store.blockScroll,
      (value) => {
-        if (value) {
-          document.body.classList.add('no-scroll');
-          return;
-        }
-
-        document.body.classList.remove('no-scroll');
+        if (value) document.body.classList.add('no-scroll');
+        else document.body.classList.remove('no-scroll');
      }
    );
  },

+  watch: {
+    '$route.query.region': {
+      immediate: true,
+      handler(regionQuery: string) {
+        if (regionQuery) {
+          this.store.region.id = regionQuery;
+        }
+      }
+    }
+  },
+
  methods: {
    changeLang(lang: string) {
      this.$i18n.locale = lang;
@@ -166,8 +150,8 @@ export default defineComponent({
        this.changeLang('en');
        return;
      }
-    },
-  },
+    }
+  }
 });
 </script>

@@ -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>
@@ -3,18 +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 :src="getIcon('en', 'jpg')" alt="icon-en" @click="changeLang('pl')" v-else />
-        </span>
-
-        <span class="icons-bottom">
-          <a href="https://www.paypal.com/paypalme/spythere" target="_blank">
-            <img :src="getIcon('dollar')" alt="icon paypal" />
-          </a>
-
-          <a href="https://discord.gg/x2mpNN3svk" target="_blank">
-            <img :src="getIcon('discord', 'png')" alt="icon discord" />
-          </a>
+          <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>

@@ -23,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>

@@ -31,11 +26,17 @@
          <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">
+              <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="getIcon('train')" alt="icon train" />
+            <img src="/images/icon-train.svg" alt="icon train" />
          </div>

          <span class="info_region">
@@ -48,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"
@@ -67,57 +70,68 @@
 import { defineComponent } from 'vue';
 import { useStore } from '../../store/store';
 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';

 export default defineComponent({
  emits: ['changeLang'],
-  mixins: [imageMixin],
  props: {
    currentLang: {
      type: String,
-      required: true,
-    },
+      required: true
+    }
  },
+
  setup() {
    return {
-      store: useStore(),
+      store: useStore()
    };
  },
+
  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;
    },
+
    onlineDispatchersCount() {
-      return this.store.stationList.filter(
-        (station) => station.onlineInfo && station.onlineInfo.region == this.store.region.id
-      ).length;
+      return this.store.onlineSceneryList.length;
    },
+
+    factorU() {
+      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;
+          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;
+          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,
+          selectedValue: region.value
        };
      });
-    },
+    }
  },
-  components: { SelectBox, StatusIndicator, Clock },
+  components: { SelectBox, StatusIndicator, Clock }
 });
 </script>
 <style lang="scss" scoped>
@@ -135,22 +149,20 @@ export default defineComponent({

 .header {
  &_body {
-    max-width: 21em;
    position: relative;
-
-    @include smallScreen {
-      max-width: 18em;
-    }
+    max-width: 20em;
  }

  &_container {
    display: flex;
    justify-content: center;
-    position: relative;

-    width: 1350px;
-    padding: 0.5em 0.3em 0 0.3em;
    border-radius: 0 0 1em 1em;
+
+    @include smallScreen {
+      position: relative;
+      margin-top: 0.5em;
+    }
  }

  &_brand {
@@ -158,6 +170,7 @@ export default defineComponent({

    img {
      width: 100%;
+
      margin: 0 auto;
    }
  }
@@ -165,9 +178,7 @@ export default defineComponent({
  &_info {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
-    max-width: 100%;
-
-    font-size: 1.2em;
+    font-size: 1.15em;
  }

  &_links {
@@ -184,57 +195,20 @@ export default defineComponent({
    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;
+    padding: 0.5em;

-    @include smallScreen() {
-      right: auto;
-      left: 0.75em;
-      padding: 0;
-
-      align-items: center;
+    @include smallScreen {
+      transform: translateX(85%);
    }
  }
 }

 // 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;
-      }
-    }
+.icons-top {
+  img {
+    width: 2.5em;
+    cursor: pointer;
  }
 }

@@ -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", {
-        hour: "2-digit",
-        minute: "2-digit",
-        second: "2-digit",
-      }));
+    const computedDate = computed(() =>
+      new Date(timestamp.value).toLocaleString('pl-PL', {
+        hour: '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>
@@ -164,7 +196,7 @@
 import { defineComponent } from 'vue';
 import { DataStatus } from '../../scripts/enums/DataStatus';
 import { useStore } from '../../store/store';
-import { StoreState } from '../../store/storeTypes';
+import { StoreState } from '../../scripts/interfaces/store/storeTypes';

 export default defineComponent({
  data() {
@@ -173,14 +205,14 @@ export default defineComponent({
      indicator: {
        offline: false,
        status: DataStatus.Loading,
-        message: 'data-status.S3',
+        message: 'data-status.S3'
      },

      greenLight: false,
      greenBlinkLight: false,
      redTopLight: false,
      orangeLight: false,
-      redBottomLight: false,
+      redBottomLight: false
    };
  },

@@ -193,7 +225,7 @@ export default defineComponent({

    return {
      dataStatus: store.dataStatuses,
-      store,
+      store
    };
  },

@@ -248,8 +280,8 @@ export default defineComponent({
          this.indicator.status = DataStatus.Loaded;
          this.indicator.message = 'data-status.S2';
        }
-      },
-    },
+      }
+    }
  },

  methods: {
@@ -280,8 +312,8 @@ export default defineComponent({
      if (status == DataStatus.Loading) {
        this.greenBlinkLight = true;
      }
-    },
-  },
+    }
+  }
 });
 </script>

@@ -303,9 +335,11 @@ export default defineComponent({

 .status-indicator {
  position: absolute;
-  left: 110%;
  bottom: 0;
+  right: 0;
  z-index: 100;
+
+  transform: translateX(1.5em);
 }

 .indicator {
@@ -330,7 +364,7 @@ export default defineComponent({
    background-color: #171717;
    border-radius: 0.75em;

-    min-width: 13em;
+    width: 13em;
    text-align: center;
    overflow: none;

@@ -354,22 +388,16 @@ export default defineComponent({
    }

    @include midScreen() {
-      left: 50%;
-      top: 100%;
-
-      transform: translate(-50%, 0);
-      margin-left: 0;
-      margin-top: 0.75em;
+      left: auto;
+      right: 200%;

      &::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;
-        left: 50%;
-
-        transform: translate(-50%, -100%);
+        transform: translate(100%, -50%);
      }
    }

@@ -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/responsive";
+@import '../../styles/variables';
+@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>
@@ -12,7 +12,7 @@ import { defineComponent } from 'vue';
 export default defineComponent({
  setup() {
    return {};
-  },
+  }
 });
 </script>

@@ -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>
@@ -7,39 +7,31 @@
      @keypress="updateValue"
    />

-    <img
-      class="search-exit"
-      :src="getIcon('exit')"
-      alt="exit-icon"
-      @click="clearValue"
-    />
+    <img class="search-exit" src="/images/icon-exit.svg" alt="exit-icon" @click="clearSearchValue" />
  </div>
 </template>

 <script lang="ts">
-import { defineComponent, ref, watch } from "vue";
-import imageMixin from "../../mixins/imageMixin";
+import { defineComponent, ref, watch } from 'vue';

 export default defineComponent({
-  mixins: [imageMixin],
-
-  emits: ["update:searchedValue", "clearValue"],
+  emits: ['update:searchedValue', 'clearValue'],
  props: {
    searchedValue: {
      type: String,
-      required: true,
+      required: true
    },
    updateOnInput: {
      type: Boolean,
-      default: true,
+      default: true
    },
    titleToTranslate: {
      type: String,
-      required: true,
+      required: true
    },
    clearValue: {
-      type: Function,
-    },
+      type: Function
+    }
  },

  setup(props, { emit }) {
@@ -49,32 +41,32 @@ export default defineComponent({
      watch(
        () => compSearchedValue.value,
        (value) => {
-          emit("update:searchedValue", value);
+          emit('update:searchedValue', value);
        }
      );
    }

-    const clearValue = () => {
-      compSearchedValue.value = "";
-      emit("clearValue");
+    const clearSearchValue = () => {
+      compSearchedValue.value = '';
+      emit('clearValue');
    };

    const updateValue = (e: any) => {
      if (!props.updateOnInput && e.keyCode == 13)
-        emit("update:searchedValue", compSearchedValue.value);
+        emit('update:searchedValue', compSearchedValue.value);
    };

    return {
      compSearchedValue,
      updateValue,
-      clearValue,
+      clearSearchValue
    };
-  },
+  }
 });
 </script>

 <style lang="scss" scoped>
-@import "../../styles/responsive";
+@import '../../styles/responsive';

 .search {
  &-box {
@@ -3,6 +3,10 @@
    <div class="select-box_content">
      <button class="selected" @click="toggleBox">
        <span>{{ computedSelectedItem.selectedValue || computedSelectedItem.value }}</span>
+
+        <div class="arrow">
+          <img :src="`/images/icon-arrow-${listOpen ? 'asc' : 'desc'}.svg`" alt="Arrow icon" />
+        </div>
      </button>

      <ul class="options" :ref="(el) => (listRef = el as Element)">
@@ -15,22 +19,21 @@
          >
            <label :for="item.id" v-if="listOpen">
              <input type="button" :id="item.id" name="select-box" @click="selectOption(item)" />
-              <span :style="computedSelectedItem.id == item.id ? 'color: gold;' : ''" v-html="item.value"> </span>
+              <span
+                :style="computedSelectedItem.id == item.id ? 'color: gold;' : ''"
+                v-html="item.value"
+              >
+              </span>
            </label>
          </transition>
        </li>
      </ul>
    </div>
-
-    <div class="arrow">
-      <img :src="listOpen ? getIcon('arrow-asc') : getIcon('arrow-desc')" alt="arrow-icon" />
-    </div>
  </div>
 </template>

 <script lang="ts">
 import { defineComponent, Ref, ref, computed } from 'vue';
-import imageMixin from '../../mixins/imageMixin';

 interface Item {
  id: string;
@@ -40,23 +43,22 @@ interface Item {

 export default defineComponent({
  emits: ['selected'],
-  mixins: [imageMixin],

  props: {
    itemList: {
      type: Array as () => Item[],
-      required: true,
+      required: true
    },

    defaultItemIndex: {
      type: Number,
-      default: 0,
+      default: 0
    },

    prefix: {
      type: String,
-      default: '',
-    },
+      default: ''
+    }
  },

  setup(props) {
@@ -69,7 +71,10 @@ export default defineComponent({
    let selectedItem: Ref<Item> = ref(props.itemList[props.defaultItemIndex]);

    const computedSelectedItem = computed(() => {
-      return props.itemList.find((item) => item.id === selectedItem.value.id) || props.itemList[props.defaultItemIndex];
+      return (
+        props.itemList.find((item) => item.id === selectedItem.value.id) ||
+        props.itemList[props.defaultItemIndex]
+      );
    });

    return {
@@ -78,10 +83,23 @@ export default defineComponent({
      selectedItem,
      listRef,
      buttonRef,
-      activeEl,
+      activeEl
    };
  },

+  watch: {
+    '$route.query': {
+      immediate: true,
+      handler(newVal) {
+        if (newVal.region) {
+          const item = this.itemList.find((it) => it.id == newVal.region);
+
+          if (item) this.selectedItem = item;
+        }
+      }
+    }
+  },
+
  methods: {
    selectOption(item: Item) {
      this.selectedItem = item;
@@ -99,8 +117,8 @@ export default defineComponent({
    clickedOutside() {
      this.listOpen = false;
      this.buttonRef?.blur();
-    },
-  },
+    }
+  }
 });
 </script>

@@ -129,46 +147,22 @@ export default defineComponent({
 }

 .select-box {
-  position: relative;
-  width: auto;
+  display: flex;
+  align-items: center;
 }

 .arrow {
-  position: absolute;
-  top: 50%;
-  right: 0;
-  padding: 0;
-
  img {
    vertical-align: middle;
    width: 1.35em;
  }
-
-  transform: translateY(-50%);
-
-  pointer-events: none;
 }

 button.selected {
-  background-color: transparent;
  color: paleturquoise;

-  font-size: 1em;
  font-weight: bold;
-
  padding: 0.1em 0.5em;
-  margin-right: 2em;
-
-  display: flex;
-
-
-  width: 100%;
-  cursor: pointer;
-
-  border: none;
-  outline: none;
-
-  text-align: left;

  &:focus {
    background-color: #262626;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
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
Spythere	ea5c9e0028	Merge do wersji 1.17.0 Wersja 1.17.0	2023-09-06 15:43:52 +02:00
Spythere	eb7c2d7132	revamp postoju i strzałek w RJ scenerii	2023-09-05 16:48:26 +02:00
Spythere	ee7c50f59b	szybkie filtry (wip)	2023-09-05 16:10:38 +02:00
Spythere	439f59fedc	poprawki filtrów scenerii	2023-09-05 15:40:32 +02:00
Spythere	c47d839ce3	poprawki kolorów	2023-09-04 18:50:12 +02:00
Spythere	f77c13cbcf	srjp: poprawki dostępności modalu	2023-09-04 18:37:52 +02:00
Spythere	dbbbd33100	poprawki dzienników	2023-09-03 19:24:32 +02:00
Spythere	14d13360a8	dziennik dr: animacje	2023-09-03 18:47:01 +02:00
Spythere	dc862252ba	dziennik dr: kolumna regionów	2023-09-03 18:34:45 +02:00
Spythere	e5fe727ccd	aktualizacja URLi	2023-09-03 17:58:55 +02:00
Spythere	e836bbed0c	szybkie filtry (wip)	2023-09-02 19:36:49 +02:00
Spythere	d4438fd215	station filters active indicator	2023-09-02 18:53:23 +02:00
Spythere	1550849360	dzienniki	2023-09-02 18:47:01 +02:00
Spythere	9d1dc4ffca	bump 1.17	2023-08-31 22:46:41 +02:00
Spythere	0397fa788d	zmiana wyglądu listy dzienników	2023-08-31 22:45:14 +02:00
Spythere	6e5696b0a6	daily stats hotfix	2023-08-31 21:46:05 +02:00
Spythere	4537341a57	odświeżony wygląd dziennika RJ	2023-08-30 20:31:40 +02:00
Spythere	c35c74bd4a	Merge pull request #52 fix: data wcześniejszego przyjazdu dla 0pt	2023-08-27 23:07:01 +02:00
Spythere	25735c5e6e	fix: data wcześniejszego przyjazdu dla 0pt	2023-08-27 22:45:36 +02:00
Spythere	41e60bc69e	Merge do wersji 1.16.3	2023-07-06 01:54:21 +02:00
Spythere	933bdecb3c	bump: 1.16.3	2023-07-02 14:50:55 +02:00
Spythere	10e183d96b	zamiana infinite scrolla na przyciski	2023-07-02 14:50:18 +02:00
Spythere	5429d39f5e	tłumaczenia historii dr scenerii	2023-07-01 23:39:08 +02:00
Spythere	ff31e7f903	bump: 1.16.2.1	2023-07-01 23:29:48 +02:00
Spythere	91f4c6bc57	Merge do wersji 1.16.2	2023-07-01 01:25:10 +02:00
Spythere	c133eb060b	bump: 1.16.2	2023-07-01 01:20:04 +02:00
Spythere	7ffc169d8a	hotfix	2023-07-01 01:19:50 +02:00
Spythere	1b85cc5f58	poprawki dziennika rj / dr	2023-06-30 20:50:03 +02:00
Spythere	72ff857fff	dodatkowe info o postojach w dzienniku RJ	2023-06-27 02:52:41 +02:00
Spythere	96d64e77fc	feature: nieskończona lista historii dr/rj scenerii	2023-06-24 13:46:37 +02:00
Spythere	6ceae3f161	revamp tabeli historii dyżurów	2023-06-23 14:19:28 +02:00
Spythere	8e8e27658c	Merge do wersji 1.16.1 Wersja 1.16.1	2023-06-22 19:27:39 +02:00
Spythere	9b6ace394a	bump v.1.16.1	2023-06-21 18:36:21 +02:00
Spythere	6cfeaa91bf	responsywność dailyStats	2023-06-21 18:35:23 +02:00
Spythere	08b208aeaa	fix tłumaczeń	2023-06-21 18:31:16 +02:00
Spythere	a089b5275b	hotfix daily stats	2023-06-21 18:30:02 +02:00
Spythere	8425cd4371	przyjazdy/odjazdy stacji pośrednich RJ w dzienniku	2023-06-21 18:26:16 +02:00
Spythere	dbdc517b87	fix tłumaczeń	2023-06-21 17:32:36 +02:00
Spythere	e271358a27	fix timetable id	2023-06-21 17:19:31 +02:00
Spythere	66262e3fcd	dodatkowe statystyki dnia	2023-06-21 17:16:02 +02:00
Spythere	5b2b6bdea2	bump 1.16.0.1	2023-06-16 01:17:33 +02:00
Spythere	c8587de6d9	npm update	2023-06-15 15:28:32 +02:00
Spythere	1f376085f2	feature: info o elektryfikacji spawnu na scenerii	2023-06-15 15:28:12 +02:00
Spythere	f28600a7fa	Merge do wersji 1.16.0 Wersja 1.16.0	2023-06-12 01:33:45 +02:00
Spythere	d59ead87e6	bump v1.16.0	2023-06-12 01:21:49 +02:00
Spythere	34d91bc800	poprawki w pokazywaniu statystyk	2023-06-12 01:19:31 +02:00
Spythere	cf9991d8a0	layout filtrów dzienników	2023-06-12 00:51:17 +02:00
Spythere	4ffb79d62b	poprawki pobierania danych	2023-06-11 21:47:50 +02:00
Spythere	d9f5edb4fe	poprawki tłumaczeń	2023-06-11 21:47:22 +02:00
Spythere	1b2112430a	feature: długości szlaków po kliknięciu	2023-06-08 23:35:57 +02:00
Spythere	0a972a23ef	fix: asynchroniczność pobierania danych z API	2023-06-04 13:35:53 +02:00
Spythere	6d52724d06	zapamiętywanie stanu statystyk dnia	2023-06-04 12:19:46 +02:00
Spythere	99415c35d3	rozbudowane filtry dziennika RJ	2023-06-04 12:06:15 +02:00
Spythere	c3f687d439	hotfixy dzienników	2023-06-04 01:45:58 +02:00
Spythere	266edfd6e6	reorder typów danych	2023-06-04 00:33:43 +02:00
Spythere	d32d5ad91b	poprawki dzienników	2023-06-03 18:55:44 +02:00
Spythere	c3481470cb	optymalizacja zapytań; filtr scenerii pocz.	2023-06-03 15:49:15 +02:00
Spythere	57e88b9abc	Merge do wersji 1.15.1 Wersja 1.15.1	2023-06-02 20:09:43 +02:00
Spythere	44ebf53798	poprawki pwa	2023-06-02 20:06:25 +02:00
Spythere	145dc72b6b	pwa: zmiana na autoUpdate	2023-06-02 19:41:33 +02:00
Spythere	b7f3761940	Merge do wersji 1.15.0 Wersja 1.15.0	2023-06-02 01:16:37 +02:00
Spythere	ea7c49dfb3	bump: 1.15.0	2023-06-02 01:10:01 +02:00
Spythere	5d6785813a	fix: odznaki TWR/SKR; dodano do dziennika	2023-06-02 01:07:44 +02:00
Spythere	a0054aed14	fix: optymalizacja zapytań historii RJ scenerii	2023-06-02 00:51:03 +02:00
Spythere	471e6f5216	Wersja 1.14.3 Wersja 1.14.3	2023-05-18 02:42:27 +02:00
Spythere	a617eef00e	bump 1.14.3	2023-05-18 02:38:13 +02:00
Spythere	38e700ecd6	migracja z route na routeNames	2023-05-18 02:37:27 +02:00
Spythere	da1be0e10a	Wersja 1.14.2	2023-05-17 02:24:05 +02:00
Spythere	f49bb12948	bump 1.14.2	2023-05-17 02:21:13 +02:00
Spythere	02673a3d70	poprawki filtrów scenerii	2023-05-16 14:27:31 +02:00
Spythere	4ddc7345df	poprawki filtrów RJ	2023-05-16 02:40:08 +02:00
Spythere	5d822684c0	feature: rozszerzone filtry RJ	2023-05-14 15:05:51 +02:00
Spythere	69fa15c70a	v1.14.1 v1.14.1	2023-04-13 19:25:30 +02:00
Spythere	9192067388	1.14.1	2023-04-13 19:21:36 +02:00
Spythere	2b41e5b857	hotfix	2023-04-13 19:21:24 +02:00
Spythere	674680ff14	1.14: hotfixy 1.14 hotfixy	2023-04-13 19:15:38 +02:00
Spythere	475bd2ff10	przeniesienie skrótów do widoku scenerii	2023-04-13 19:11:44 +02:00
Spythere	074d1eb155	Hotfix tłumaczeń	2023-04-13 18:50:00 +02:00
Spythere	378393de89	Wersja 1.14.0 Wersja 1.14.0	2023-04-13 15:45:39 +02:00
Spythere	03e61083a7	tłumaczenie stopki	2023-04-13 15:37:34 +02:00
Spythere	0b746fce8c	hotfix headera	2023-04-13 15:32:41 +02:00
Spythere	5883e710be	bump wersji: 1.14	2023-04-13 15:26:22 +02:00
Spythere	3d0695a17b	Poprawki w headerze i stopce	2023-04-13 15:25:39 +02:00
Spythere	4adb76eeb0	feature: podpisy status indicatorów dla RJ	2023-04-11 00:33:14 +02:00
Spythere	4c41076519	feature: skrót posterunku w tabelce	2023-04-09 01:37:11 +02:00
Spythere	77f61d17fd	hotfix: wygląd badge'a	2023-04-09 00:19:53 +02:00
Spythere	032a84cbcf	feature: historia zmian w zestawieniu pociągów	2023-03-20 22:39:23 +01:00
Spythere	de9851ebcc	Wersja 1.13.0 Wersja 1.13.0	2023-03-16 01:31:18 +01:00
Spythere	ff78eba927	hotfixy filtrów	2023-03-15 18:15:01 +01:00
Spythere	e4c5f6a322	filtry pociągów	2023-03-15 17:56:27 +01:00
Spythere	0a78761928	hotfix tłumaczeń	2023-03-15 15:34:36 +01:00
Spythere	4843043c29	bump wersji: 1.13.0	2023-03-15 15:20:28 +01:00
Spythere	9e1df1fb61	filtry pociągów	2023-03-15 15:19:50 +01:00
Spythere	021474cfb0	fix: tłumaczenia; hotfixy	2023-03-14 23:13:37 +01:00
Spythere	7d0e68862c	filtry scenerii	2023-03-14 21:42:39 +01:00
Spythere	653d45dfc6	scenerie: remake filtrów	2023-03-13 22:26:00 +01:00
Spythere	4a4e1240a4	widok scenerii: odnośniki do tablic przy aktywnych RJ	2023-03-10 16:59:16 +01:00
Spythere	14ca48a90d	hotfix	2023-03-10 16:30:36 +01:00
Spythere	a02f9804b1	dziennik RJ: dodatkowe info	2023-03-10 16:30:31 +01:00
Spythere	c5efc6fbac	bump: wersja 1.12.2	2023-03-10 02:03:37 +01:00
Spythere	cacd0a1e4e	fix: data stworzenia RJ	2023-03-10 01:53:19 +01:00
Spythere	50375099ab	update url api	2023-03-10 01:42:10 +01:00
Spythere	6af67ec741	fix: tłumaczenia filtrów	2023-03-09 14:35:03 +01:00
Spythere	c64112c86a	dziennik RJ: dodatkowe informacje	2023-03-09 14:28:16 +01:00
Spythere	0434702d3b	update: URL api	2023-03-09 13:41:59 +01:00
Spythere	dd7d1b0bb0	Wersja 1.12.1 Wersja 1.12.1	2023-02-26 14:20:40 +01:00
Spythere	68934a89a4	bump: wersja 1.12.1	2023-02-26 14:16:13 +01:00
Spythere	b88a240ec1	feature: like count historii dyżurnych	2023-02-26 14:14:32 +01:00
Spythere	eaa34f3359	hotfix: dostępność grubości czcionki	2023-02-26 13:50:47 +01:00
Spythere	febb22e1bc	Wersja 1.12 Merge produkcyjny do wersji 1.12.0	2023-02-14 21:32:46 +01:00
Spythere	500f3c1223	dziennik RJ: wyświetlanie statów	2023-02-14 16:57:22 +01:00
Spythere	221e0c7e82	dzienniki: fix ładowania	2023-02-14 16:50:12 +01:00
Spythere	ca19f7e397	hotfix: websocket	2023-02-14 16:40:15 +01:00
Spythere	a71ccd3e1a	bump: wersja 1.12	2023-02-14 13:52:20 +01:00
Spythere	d496c70fa8	aktualizacja tłumaczenia	2023-02-14 13:51:52 +01:00
Spythere	b9868ba52e	dzienniki: stylistyka	2023-02-12 16:12:48 +01:00
Spythere	59bd3fa2ef	design: badge poziomów	2023-02-12 12:58:23 +01:00
Spythere	e14d328ed9	fix: wielkość scrollbaru	2023-02-12 00:48:18 +01:00
Spythere	36d71292bc	feature: url projektów	2023-02-12 00:42:37 +01:00
Spythere	2f6e2e7402	fix: responsywność	2023-02-12 00:30:05 +01:00
Spythere	e959eac6c5	hotfix	2023-02-11 03:14:43 +01:00
Spythere	8bedc4dfc6	feature: vmax szlaków	2023-02-11 03:08:24 +01:00
Spythere	73563d5db7	Wersja 1.11.2 Wersja 1.11.2	2023-01-05 22:05:34 +01:00
Spythere	3f818069cd	hotfix: podświetlenie sponsorów w dzienniku RJ	2023-01-05 16:09:27 +01:00
Spythere	cdf0b2a426	feature: nasłuchiwanie aktualizacji	2023-01-05 16:05:34 +01:00
Spythere	c29ddeb78c	fix: poziom 0 w dzienniku RJ	2023-01-05 15:59:14 +01:00
Spythere	b81d98cab7	fix: filtrowanie pociągów offline	2023-01-05 15:58:17 +01:00
Spythere	0e45bca5da	feature: przycisk odświeżania dzienników	2023-01-05 14:49:44 +01:00
Spythere	715e66879f	feature: przejścia pomiędzy statusami ładowań	2023-01-04 14:01:25 +01:00
Spythere	1747e15dc8	bump: 1.11.2	2023-01-03 14:58:04 +01:00
Spythere	6a923a8e1d	feature: sygnatura dev w stopce	2023-01-03 14:57:36 +01:00
Spythere	25a248e95e	feature: animacje list	2023-01-03 14:51:19 +01:00
Spythere	aa7a6b220e	feature: lvl maszynisty przy dzienniku i pociągach	2023-01-02 18:30:09 +01:00