Wersja 1.20.3

hotfix: brak komentarzy dla ostatniej stacji w RJ
2026-05-03 13:28:11 +00:00 · 2024-01-26 13:59:23 +01:00 · 2024-01-26 13:54:47 +01:00 · 2024-01-26 13:39:04 +01:00 · 2024-01-26 13:38:45 +01:00 · 2024-01-26 13:38:28 +01:00
90 changed files with 14218 additions and 5640 deletions
@@ -50,11 +50,6 @@
      name="twitter:image"
      content="https://raw.githubusercontent.com/Spythere/api/main/thumbnails/stacjownik.jpg"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500;700&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
@@ -1,6 +1,6 @@
 {
  "name": "stacjownik",
-  "version": "1.18.5",
+  "version": "1.20.3",
  "private": true,
  "scripts": {
    "dev": "vite",
@@ -18,27 +18,26 @@
    "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": {
    "@rushstack/eslint-patch": "^1.3.3",
    "@types/node": "^20.6.2",
    "@vite-pwa/assets-generator": "^0.0.10",
    "@vitejs/plugin-vue": "^4.3.4",
    "@vue/eslint-config-prettier": "^8.0.0",
    "@vue/eslint-config-typescript": "^12.0.0",
    "@vue/tsconfig": "^0.4.0",
    "axios": "^1.5.0",
    "eslint": "^8.49.0",
    "eslint-plugin-vue": "^9.17.0",
    "prettier": "^3.0.3",
    "typescript": "^5.2.2",
    "vite": "^4.4.9",
    "vite-plugin-pwa": "^0.16.5",
-    "vue-tsc": "^1.8.11",
+    "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,56 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 159 38.8" style="enable-background:new 0 0 159 38.8;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:#00A962;}
 	.st1{enable-background:new    ;}
 	.st2{fill:#FFFFFF;}
 	.st3{fill:#1E3A33;}
 	.st4{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
 </style>
 <path class="st0" d="M139.6,38.7H19.4C8.7,38.7,0,30.1,0,19.3l0,0C0,8.6,8.7-0.1,19.4-0.1h120.2c10.7,0,19.4,8.7,19.4,19.4l0,0
 	C159,30.1,150.3,38.7,139.6,38.7z"/>
 <g class="st1">
 	<path class="st2" d="M48.9,23.7c0,0.5-0.4,0.9-0.9,0.9c-0.5,0-0.9-0.4-0.9-0.9v-9.9c0-0.6,0.4-1,1-1h3.7c2.5,0,3.6,1.9,3.6,3.7
 		s-1,3.7-3.6,3.7h-2.9V23.7z M48.9,14.5v4.1h2.8c1.3,0,1.9-1,1.9-2c0-1-0.5-2.1-1.8-2.1H48.9z"/>
 	<path class="st2" d="M56.3,20.5c0-2.5,1.9-4.1,4.1-4.1c2.3,0,4.2,1.6,4.2,4.1c0,2.5-1.9,4.2-4.2,4.2C58.2,24.7,56.3,23,56.3,20.5z
 		 M62.9,20.5c0-1.5-1.1-2.4-2.4-2.4c-1.3,0-2.4,1-2.4,2.4c0,1.5,1.1,2.5,2.4,2.5C61.8,23,62.9,22,62.9,20.5z"/>
 	<path class="st2" d="M66.6,21.9c0.4-0.2,0.7,0.1,0.9,0.3c0.3,0.6,0.9,1,1.7,1c0.8,0,1.4-0.4,1.4-1c0-0.5-0.5-0.7-1.1-0.9l-1.1-0.3
 		c-1.7-0.5-2.3-1.4-2.2-2.7c0.1-1.2,1.4-2.1,2.8-2.1c1.1,0,2,0.3,2.5,1.2c0.2,0.4,0.1,0.8-0.2,1c-0.3,0.2-0.6,0.2-1-0.1
 		c-0.4-0.4-1-0.5-1.4-0.5c-0.4,0-0.9,0.2-1.1,0.4c-0.1,0.2-0.2,0.4-0.1,0.7c0.1,0.3,0.6,0.5,1,0.6l1.2,0.3c1.7,0.4,2.1,1.5,2.1,2.3
 		c0,1.5-1.3,2.4-3.2,2.4c-1.2,0-2.5-0.6-2.9-1.8C66,22.5,66.2,22.1,66.6,21.9z"/>
 	<path class="st2" d="M74.6,18h-0.8c-0.4,0-0.7-0.3-0.7-0.7c0-0.4,0.3-0.7,0.7-0.7h0.8v-2.2c0-0.5,0.4-0.9,0.9-0.9
 		c0.5,0,0.9,0.4,0.9,0.9v2.2h1c0.4,0,0.7,0.3,0.7,0.7c0,0.4-0.3,0.7-0.7,0.7h-1v5.7c0,0.5-0.4,0.9-0.9,0.9c-0.5,0-0.9-0.4-0.9-0.9
 		V18z"/>
 	<path class="st2" d="M85.7,23.4c-0.5,0.9-1.7,1.3-2.7,1.3c-2.1,0-4-1.6-4-4.1c0-2.5,1.9-4.1,4-4.1c1,0,2.1,0.4,2.7,1.3v-0.3
 		c0-0.5,0.4-0.9,0.9-0.9c0.5,0,0.9,0.4,0.9,0.9v6.3c0,0.5-0.4,0.9-0.9,0.9c-0.5,0-0.9-0.4-0.9-0.9V23.4z M83.2,23
 		c1.3,0,2.4-0.9,2.4-2.5c0-1.6-1.3-2.4-2.4-2.4c-1.3,0-2.4,1-2.4,2.4C80.8,22,81.9,23,83.2,23z"/>
 	<path class="st2" d="M95.1,16.6c0.5,0,0.9,0.3,1,0.8l1.6,4.6l1.7-4.8c0.2-0.5,0.6-0.7,1.1-0.6c0.5,0.1,0.7,0.6,0.6,1.1l-2.4,6.3
 		c-0.2,0.5-0.5,0.7-0.9,0.7h-0.1c-0.4,0-0.7-0.2-0.9-0.7L95.1,19l-1.7,4.9c-0.2,0.5-0.5,0.7-0.9,0.7h-0.1c-0.4,0-0.7-0.2-0.9-0.7
 		l-2.4-6.3c-0.2-0.4,0.1-1,0.6-1.1c0.5-0.1,0.9,0.1,1.1,0.6l1.7,4.8l1.6-4.6C94.2,16.8,94.6,16.6,95.1,16.6L95.1,16.6z"/>
 	<path class="st2" d="M112.9,23.2c0.3,0.3,0.3,0.9,0,1.2c-0.4,0.3-0.9,0.3-1.2,0l-3.2-3.5v2.9c0,0.5-0.4,0.9-0.9,0.9
 		c-0.5,0-0.8-0.4-0.8-0.9V13.1c0-0.5,0.4-0.9,0.8-0.9c0.5,0,0.9,0.4,0.9,0.9v6.1l2.4-2.4c0.3-0.3,0.9-0.3,1.2,0
 		c0.3,0.4,0.3,0.9,0,1.2l-2,2.1L112.9,23.2z"/>
 	<path class="st2" d="M120.8,23.4c-0.5,0.9-1.7,1.3-2.7,1.3c-2.1,0-4-1.6-4-4.1c0-2.5,1.9-4.1,4-4.1c1,0,2.1,0.4,2.7,1.3v-0.3
 		c0-0.5,0.4-0.9,0.8-0.9c0.5,0,0.9,0.4,0.9,0.9v6.3c0,0.5-0.4,0.9-0.9,0.9c-0.5,0-0.8-0.4-0.8-0.9V23.4z M118.4,23
 		c1.3,0,2.4-0.9,2.4-2.5c0-1.6-1.3-2.4-2.4-2.4c-1.3,0-2.4,1-2.4,2.4C115.9,22,117,23,118.4,23z"/>
 	<path class="st2" d="M130.3,16.6c0.5,0,0.9,0.3,1,0.8l1.6,4.6l1.7-4.8c0.2-0.5,0.6-0.7,1.1-0.6c0.5,0.1,0.7,0.6,0.6,1.1l-2.4,6.3
 		c-0.2,0.5-0.5,0.7-0.9,0.7h-0.1c-0.4,0-0.7-0.2-0.9-0.7l-1.7-4.9l-1.7,4.9c-0.2,0.5-0.5,0.7-0.9,0.7h-0.1c-0.4,0-0.7-0.2-0.9-0.7
 		l-2.4-6.3c-0.2-0.4,0.1-1,0.6-1.1c0.5-0.1,0.9,0.1,1.1,0.6l1.7,4.8l1.6-4.6C129.3,16.8,129.7,16.6,130.3,16.6L130.3,16.6z"/>
 	<path class="st2" d="M143.6,26.1c0,0.2,0.2,0.5,0.6,0.5c0.1,0,0.4,0,0.5-0.4c0.1-0.4,0.3-0.5,0.7-0.5c0.4,0.1,0.6,0.4,0.5,0.8
 		c-0.2,0.8-0.9,1.4-1.7,1.4c-1.3,0-1.9-0.8-1.9-1.7c0-0.2,0.1-0.6,0.2-0.8l0.5-1c-0.5,0.2-1,0.3-1.6,0.3c-2.3,0-4.1-1.6-4.1-4.2
 		c0-2.5,1.8-4.1,4.1-4.1c2.2,0,3.9,1.5,4,4c0,0.5-0.4,0.8-0.8,0.8h-5.5c0.2,1.2,1.2,2,2.4,2c0.8,0,1.3-0.3,1.9-0.8
 		c0.3-0.2,0.8-0.4,1.1-0.1c0.3,0.3,0.2,0.7,0,1.1C143.5,25.9,143.6,26.1,143.6,26.1z M143.7,19.9c-0.2-1.2-1.1-2-2.3-2
 		c-1.2,0-2.2,0.7-2.3,2H143.7z"/>
 </g>
 <g>
 	<path class="st3" d="M21.6,26.7c-4.9,0-7.4-2.6-8.5-4.9c-1.2-2.4-1.4-5-1.4-6c0-2.2,1.8-3.8,4.3-3.8h7c0.7,0,1.3,0.6,1.3,1.3
 		c0,0.7-0.6,1.3-1.3,1.3h-7c-0.5,0-1,0.1-1.3,0.4c-0.3,0.2-0.4,0.4-0.4,0.8c0,1.9,0.5,8.3,7.3,8.3c5.8,0,7.3-4.6,7.9-8.1
 		c0-0.2,0-0.3,0.1-0.4c0.2-0.9,0.4-1.7,0.8-2.3C31,12.4,31.9,12,33,12c0.5,0,0.9,0.2,1.2,0.5c0.5,0.4,0.9,1.3,1.2,4.1
 		c0.1,1.4,0.1,2.6,0.1,2.7c0,0.7-0.6,1.3-1.3,1.3l0,0c-0.7,0-1.3-0.6-1.3-1.3c0,0,0-1.1-0.1-2.3c-0.1-1-0.2-1.7-0.3-2.1
 		c-0.1,0.3-0.2,0.9-0.3,1.1c0,0.1,0,0.2-0.1,0.4c-0.2,1.2-0.7,3.7-2.1,5.9c-0.8,1.3-1.9,2.3-3.2,3.1C25.4,26.3,23.6,26.7,21.6,26.7z
 		"/>
 	<ellipse class="st4" cx="26.7" cy="13.3" rx="1.3" ry="1.3"/>
 </g>
 </svg>
@@ -1,4 +1,4 @@
 <svg width="160" height="150" viewBox="0 0 160 150" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.163 139L80 12.4204L149.837 139H80H10.163Z" stroke="white" stroke-width="12"/>
+<path d="M10.163 139L80 12.4204L149.837 139H80H10.163Z" stroke="salmon" stroke-width="15"/>
-<path d="M85.4488 50.3354V80.6619C85.4488 83.8784 85.2898 87.0418 84.9717 90.1522C84.6536 93.2273 84.2294 96.4968 83.6992 99.9606H74.8451C74.315 96.4968 73.8908 93.2273 73.5727 90.1522C73.2546 87.0418 73.0955 83.8784 73.0955 80.6619V50.3354H85.4488ZM71.0808 119.789C71.0808 118.694 71.2752 117.651 71.664 116.661C72.0882 115.672 72.6537 114.823 73.3606 114.117C74.1029 113.41 74.9689 112.844 75.9585 112.42C76.9482 111.996 78.0086 111.784 79.1396 111.784C80.2354 111.784 81.278 111.996 82.2677 112.42C83.2574 112.844 84.1057 113.41 84.8126 114.117C85.5195 114.823 86.085 115.672 86.5092 116.661C86.9333 117.651 87.1454 118.694 87.1454 119.789C87.1454 120.921 86.9333 121.981 86.5092 122.971C86.085 123.925 85.5195 124.756 84.8126 125.462C84.1057 126.169 83.2574 126.717 82.2677 127.106C81.278 127.53 80.2354 127.742 79.1396 127.742C78.0086 127.742 76.9482 127.53 75.9585 127.106C74.9689 126.717 74.1029 126.169 73.3606 125.462C72.6537 124.756 72.0882 123.925 71.664 122.971C71.2752 121.981 71.0808 120.921 71.0808 119.789Z" fill="#FFFBFB"/>
+<path d="M85.4488 50.3354V80.6619C85.4488 83.8784 85.2898 87.0418 84.9717 90.1522C84.6536 93.2273 84.2294 96.4968 83.6992 99.9606H74.8451C74.315 96.4968 73.8908 93.2273 73.5727 90.1522C73.2546 87.0418 73.0955 83.8784 73.0955 80.6619V50.3354H85.4488ZM71.0808 119.789C71.0808 118.694 71.2752 117.651 71.664 116.661C72.0882 115.672 72.6537 114.823 73.3606 114.117C74.1029 113.41 74.9689 112.844 75.9585 112.42C76.9482 111.996 78.0086 111.784 79.1396 111.784C80.2354 111.784 81.278 111.996 82.2677 112.42C83.2574 112.844 84.1057 113.41 84.8126 114.117C85.5195 114.823 86.085 115.672 86.5092 116.661C86.9333 117.651 87.1454 118.694 87.1454 119.789C87.1454 120.921 86.9333 121.981 86.5092 122.971C86.085 123.925 85.5195 124.756 84.8126 125.462C84.1057 126.169 83.2574 126.717 82.2677 127.106C81.278 127.53 80.2354 127.742 79.1396 127.742C78.0086 127.742 76.9482 127.53 75.9585 127.106C74.9689 126.717 74.1029 126.169 73.3606 125.462C72.6537 124.756 72.0882 123.925 71.664 122.971C71.2752 121.981 71.0808 120.921 71.0808 119.789Z" fill="white"/>
 </svg>
@@ -10,7 +10,7 @@
    <main class="app_main">
      <router-view v-slot="{ Component }">
-        <keep-alive exclude="JournalView,SceneryView">
+        <keep-alive exclude="SceneryView">
          <component :is="Component" :key="$route.name" />
        </keep-alive>
      </router-view>
@@ -33,30 +33,33 @@
 <script lang="ts">
 import { defineComponent, watch } from 'vue';
 import axios from 'axios';
 import packageInfo from '.././package.json';
 import Clock from './components/App/Clock.vue';
-import packageInfo from '.././package.json';
+import { useMainStore } from './store/mainStore';
 import { regions } from './data/options.json';
 import { useStore } from './store/mainStore';
 import StatusIndicator from './components/App/StatusIndicator.vue';
 import TrainModal from './components/Global/TrainModal.vue';
 import AppHeader from './components/App/AppHeader.vue';
-import axios from 'axios';
+import TrainModal from './components/TrainsView/TrainModal.vue';
 import StorageManager from './managers/storageManager';
 import { useApiStore } from './store/apiStore';
 import { Status } from './typings/common';
 export default defineComponent({
  components: {
    Clock,
    StatusIndicator,
-    TrainModal,
+    AppHeader,
-    AppHeader
+    TrainModal
  },
  data: () => ({
    VERSION: packageInfo.version,
-    store: useStore(),
+    store: useMainStore(),
    apiStore: useApiStore(),
    currentLang: 'pl',
    releaseURL: '',
@@ -64,29 +67,10 @@ export default defineComponent({
  }),
  created() {
-    this.loadLang();
+    this.init();
    this.store.connectToAPI();
    this.store.isOffline = !window.navigator.onLine;
    window.addEventListener('offline', () => {
      this.store.isOffline = true;
      this.store.activeData.activeSceneries = [];
      this.store.activeData.trains = [];
      this.store.activeData.connectedSocketCount = 0;
      this.store.setStatuses();
    });
    window.addEventListener('online', () => {
      this.store.isOffline = false;
    });
  },
  async mounted() {
    this.setReleaseURL();
    watch(
      () => this.store.blockScroll,
      (value) => {
@@ -96,23 +80,39 @@ export default defineComponent({
    );
  },
  watch: {
    '$route.query.region': {
      immediate: true,
      handler(regionQuery: string) {
        if (regionQuery) {
          this.store.region.id =
            regions.find(
              (reg) =>
                reg.id == regionQuery.toLocaleLowerCase() ||
                reg.value.toLocaleLowerCase() == regionQuery.toLocaleLowerCase()
            )?.id || 'eu';
        }
      }
    }
  },
  methods: {
    init() {
      this.loadLang();
      this.setReleaseURL();
      this.setupOfflineHandling();
      this.apiStore.setupAPI();
    },
    setupOfflineHandling() {
      this.store.isOffline = !window.navigator.onLine;
      if (this.store.isOffline) this.handleOfflineMode();
      window.addEventListener('offline', this.handleOfflineMode);
      window.addEventListener('online', this.handleOnlineMode);
    },
    handleOfflineMode() {
      this.store.isOffline = true;
      this.apiStore.stopActiveDataScheduler();
      this.apiStore.activeData = undefined;
      this.apiStore.dataStatuses.connection = Status.Data.Offline;
    },
    handleOnlineMode() {
      this.store.isOffline = false;
      this.apiStore.setupAPI();
    },
    changeLang(lang: string) {
      this.$i18n.locale = lang;
      this.currentLang = lang;
@@ -68,7 +68,7 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { useStore } from '../../store/mainStore';
+import { useMainStore } from '../../store/mainStore';
 import StatusIndicator from './StatusIndicator.vue';
 import Clock from './Clock.vue';
 import RegionDropdown from '../Global/RegionDropdown.vue';
@@ -84,7 +84,7 @@ export default defineComponent({
  setup() {
    return {
-      store: useStore()
+      store: useMainStore()
    };
  },
@@ -194,9 +194,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { StoreState } from '../../store/typings';
+import { useMainStore } from '../../store/mainStore';
 import { useStore } from '../../store/mainStore';
 import { Status } from '../../typings/common';
 import { useApiStore } from '../../store/apiStore';
 export default defineComponent({
  data() {
@@ -221,10 +221,11 @@ export default defineComponent({
  },
  setup() {
-    const store = useStore();
+    const store = useMainStore();
    const apiStore = useApiStore();
    return {
-      dataStatus: store.dataStatuses,
+      dataStatus: apiStore.dataStatuses,
      store
    };
  },
@@ -233,15 +234,15 @@ export default defineComponent({
    dataStatus: {
      deep: true,
-      handler(statuses: StoreState['dataStatuses']) {
+      handler(statuses: any) {
        const connectionStatus = statuses.connection;
        const sceneryDataStatus = statuses.sceneries;
        const trainsDataStatus = statuses.trains;
        const dispatcherDataStatus = statuses.dispatchers;
-        if (this.store.isOffline) {
+        if (connectionStatus == Status.Data.Offline) {
-          this.setSignalStatus(Status.Data.Initialized);
+          this.setSignalStatus(Status.Data.Offline);
-          this.indicator.status = Status.Data.Initialized;
+          this.indicator.status = Status.Data.Offline;
          this.indicator.message = 'data-status.S1-offline';
          return;
        }
@@ -292,7 +293,7 @@ export default defineComponent({
      this.orangeLight = false;
      this.redBottomLight = false;
-      if (status == Status.Data.Initialized) {
+      if (status == Status.Data.Initialized || status == Status.Data.Offline) {
        this.redTopLight = true;
      }
@@ -12,7 +12,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { useStore } from '../../store/mainStore';
+import { useMainStore } from '../../store/mainStore';
 export default defineComponent({
  emits: ['toggleModal'],
@@ -23,7 +23,7 @@ export default defineComponent({
  data() {
    return {
-      store: useStore()
+      store: useMainStore()
    };
  },
@@ -1,7 +1,7 @@
 <template>
  <div class="donation-modal" @keydown.esc="toggleModal(false)">
    <button
-      class="modal_button action btn--image"
+      class="btn-toggle btn--image"
      ref="btn"
      @click="toggleModal(true)"
      @focus="toggleModal(false)"
@@ -28,7 +28,7 @@
              <b>{{ $t('donations.p2-b3') }}</b>
            </template>
            <template v-slot:link>
-              <a href="https://discord.gg/x2mpNN3svk" target="_blank">
+              <a class="discord" href="https://discord.gg/x2mpNN3svk" target="_blank">
                {{ $t('donations.p2-a1') }}
              </a>
            </template>
@@ -58,19 +58,28 @@
        </div>
        <div class="modal_actions">
-          <button class="modal_button exit btn--image" @click="toggleModal(false)">
+          <a
            class="modal-action a-button btn--image coffee"
            href="https://buycoffee.to/spythere"
            target="_blank"
          >
            <img src="/images/icon-coffee.png" width="20" alt="buycoffee.to donation" />
            {{ $t('donations.action-buycoffee') }}
          </a>
          <a
            class="modal-action a-button btn--image paypal"
            href="https://www.paypal.com/donate/?hosted_button_id=EDB3SKFAHXFTW"
            target="_blank"
          >
            <img src="/images/icon-dollar.svg" alt="paypal donation" />
            {{ $t('donations.action-paypal') }}
          </a>
          <button class="modal-action btn--image exit" @click="toggleModal(false)">
            <img src="/images/icon-exit.svg" alt="dollar donation icon" />
            {{ $t('donations.action-exit') }}
          </button>
          <form action="https://www.paypal.com/donate" method="post">
            <input type="hidden" name="hosted_button_id" value="EDB3SKFAHXFTW" />
            <button class="modal_button action btn--image" @click="toggleModal(false)">
              <img src="/images/icon-dollar.svg" alt="dollar donation icon" />
              {{ $t('donations.action-confirm') }}
            </button>
          </form>
        </div>
      </div>
    </AnimatedModal>
@@ -99,25 +108,13 @@ export default defineComponent({
 <style lang="scss" scoped>
@import '../../styles/responsive.scss';
-.modal_button {
+button.btn-toggle {
-  &.action {
+  $btnColor: #254069;
    $btnColor: #254069;
-    background-color: $btnColor;
+  background-color: $btnColor;
-    &:hover {
+  &:hover {
-      background-color: lighten($btnColor, 10%);
+    background-color: lighten($btnColor, 5%);
    }
  }
  &.exit {
    $btnColor: crimson;
    background-color: $btnColor;
    &:hover {
      background-color: lighten($btnColor, 10%);
    }
  }
  @include smallScreen {
@@ -127,16 +124,6 @@ export default defineComponent({
  }
 }
 .modal-logo {
  position: absolute;
  top: 0;
  left: 50%;
  width: 6em;
  transform: translate(-50%, -50%);
 }
 .modal_content {
  display: grid;
  grid-template-rows: 1fr auto;
@@ -157,7 +144,7 @@ export default defineComponent({
    text-align: justify;
  }
-  a {
+  a.discord {
    text-decoration: underline;
  }
 }
@@ -174,11 +161,41 @@ export default defineComponent({
 .modal_actions {
  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(13em, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.5em;
  form button {
    width: 100%;
  }
 }
 .modal_actions > .modal-action {
  &.paypal {
    $btnColor: #254069;
    background-color: $btnColor;
    &:hover {
      background-color: lighten($btnColor, 5%);
    }
  }
  &.coffee {
    $btnColor: #009255;
    background-color: $btnColor;
    &:hover {
      background-color: lighten($btnColor, 5%);
    }
  }
  &.exit {
    $btnColor: #686868;
    background-color: $btnColor;
    &:hover {
      background-color: lighten($btnColor, 5%);
    }
  }
 }
 </style>
@@ -30,7 +30,7 @@
 <script lang="ts">
 import { defineComponent, Ref, ref } from 'vue';
 import { regions as regionsJSON } from '../../data/options.json';
-import { useStore } from '../../store/mainStore';
+import { useMainStore } from '../../store/mainStore';
 interface Item {
  id: string;
@@ -41,7 +41,7 @@ interface Item {
 export default defineComponent({
  data() {
    return {
-      store: useStore(),
+      store: useMainStore(),
      selectedItemIndex: 0,
      listOpen: false
    };
@@ -59,6 +59,21 @@ export default defineComponent({
    'store.region.id': {
      handler(regionId) {
        this.selectedItemIndex = this.regionList.findIndex((reg) => reg.id == regionId);
        console.log('region id', regionId);
      }
    },
    '$route.query.region': {
      immediate: true,
      handler(regionQuery: string) {
        if (regionQuery) {
          this.store.region.id =
            regionsJSON.find(
              (reg) =>
                reg.id == regionQuery.toLocaleLowerCase() ||
                reg.value.toLocaleLowerCase() == regionQuery.toLocaleLowerCase()
            )?.id || 'eu';
        }
      }
    }
  },
@@ -50,8 +50,8 @@
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
 import { useStore } from '../../store/mainStore';
 import { API } from '../../typings/api';
 import { useApiStore } from '../../store/apiStore';
 export default defineComponent({
  props: {
@@ -63,15 +63,15 @@ export default defineComponent({
  data() {
    return {
-      store: useStore()
+      apiStore: useApiStore()
    };
  },
  methods: {
    onImageError(event: Event, stockName: string) {
      const fallbackName =
-        Object.keys(this.store.rollingStockData!.info).find((type) => {
+        Object.keys(this.apiStore.rollingStockData!.info).find((type) => {
-          return this.store.rollingStockData!.info[type as keyof API.RollingStock.Info].find(
+          return this.apiStore.rollingStockData!.info[type as keyof API.RollingStock.Info].find(
            (v) => v[0] === stockName.split(':')[0]
          );
        }) || 'vehicle-unknown';
@@ -1,123 +0,0 @@
 <template>
  <span class="stop-date">
    <span
      class="date arrival"
      v-if="!stop.beginsHere"
      :class="{
        delayed: stop.arrivalDelay > 0 && (stop.confirmed || stop.stopped),
        preponed: stop.arrivalDelay < 0 && (stop.confirmed || stop.stopped),
        'on-time': stop.arrivalDelay == 0 && stop.confirmed
      }"
    >
      <span v-if="stop.arrivalDelay != 0 && (stop.confirmed || stop.stopped)">
        <s>{{ timestampToString(stop.arrivalTimestamp) }}</s>
        {{ timestampToString(stop.arrivalRealTimestamp) }}
        ({{ stop.arrivalDelay > 0 ? '+' : '' }}{{ stop.arrivalDelay }})
      </span>
      <span v-else>
        {{ timestampToString(stop.arrivalTimestamp) }}
      </span>
    </span>
    <span
      class="date stop"
      v-if="stop.stopTime || stop.stopped"
      :class="stop.stopType.replace(', ', '-')"
    >
      {{ stop.stopTime }} {{ stop.stopType == '' ? 'pt' : stop.stopType }}
    </span>
    <span
      class="date departure"
      v-if="!stop.terminatesHere && (stop.stopTime != 0 || stop.stopped)"
      :class="{
        delayed: stop.departureDelay > 0 && stop.confirmed,
        preponed: stop.departureDelay < 0 && stop.confirmed
      }"
    >
      <span v-if="stop.departureDelay != 0 && stop.confirmed">
        <s>{{ timestampToString(stop.departureTimestamp) }}</s>
        {{ timestampToString(stop.departureRealTimestamp) }}
        ({{ stop.departureDelay > 0 ? '+' : '' }}{{ stop.departureDelay }})
      </span>
      <span v-else>
        {{ timestampToString(stop.departureTimestamp) }}
      </span>
    </span>
  </span>
 </template>
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
 import { TrainStop } from '../../store/typings';
 export default defineComponent({
  mixins: [dateMixin],
  props: {
    stop: {
      type: Object as PropType<TrainStop>,
      required: true
    }
  },
  setup() {
    return {};
  }
 });
 </script>
 <style lang="scss" scoped>
 $preponedClr: lime;
 $delayedClr: salmon;
 $dateClr: #525151;
 $stopExchangeClr: #db8e29;
 $stopDefaultClr: #252525;
 .stop-date {
  display: flex;
  align-items: center;
  .date {
    background: $dateClr;
    padding: 0.3em 0.5em;
  }
  .stop {
    &.ph,
    &.ph-pm,
    &.pm {
      background: $stopExchangeClr;
    }
    background: $stopDefaultClr;
  }
  .arrival,
  .departure {
    &.delayed {
      s {
        color: #999;
      }
      span {
        color: $delayedClr;
      }
    }
    &.preponed {
      s {
        color: #999;
      }
      span {
        color: $preponedClr;
      }
    }
  }
 }
 </style>
@@ -16,8 +16,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { useStore } from '../../store/mainStore';
 import { API } from '../../typings/api';
 import { useApiStore } from '../../store/apiStore';
 export default defineComponent({
  props: {
@@ -34,7 +34,7 @@ export default defineComponent({
  data() {
    return {
-      store: useStore(),
+      apiStore: useApiStore(),
      isNotFound: false,
      isLoaded: false
    };
@@ -50,11 +50,11 @@ export default defineComponent({
    },
    stockType() {
-      if (!this.store.rollingStockData) return 'vehicle-unknown';
+      if (!this.apiStore.rollingStockData) return 'vehicle-unknown';
      return (
-        Object.keys(this.store.rollingStockData.info).find((type) => {
+        Object.keys(this.apiStore.rollingStockData.info).find((type) => {
-          return this.store.rollingStockData?.info[type as keyof API.RollingStock.Info].find(
+          return this.apiStore.rollingStockData?.info[type as keyof API.RollingStock.Info].find(
            (v) => v[0] === this.name.split(':')[0]
          );
        }) || 'vehicle-unknown'
@@ -1,241 +0,0 @@
 <template>
  <section class="daily-stats">
    <span :data-active="statsStatus">
      <b v-if="statsStatus == Status.Data.Loading">
        {{ $t('app.loading') }}
      </b>
      <b v-else-if="stats.distanceSum == null">
        {{ $t('journal.daily-stats-info') }}
      </b>
      <span class="stats-list" v-else>
        <h3>
          {{ $t('journal.daily-stats-title') }}
          <b class="text--primary">{{ new Date().toLocaleDateString($i18n.locale) }}</b>
        </h3>
        <hr style="margin-bottom: 0.5em" />
        <div v-if="stats.totalTimetables">
          &bull;
          <i18n-t keypath="journal.timetable-stats-total">
            <template #count>
              <b class="text--primary">
                {{ stats.totalTimetables }}
                {{ $t('journal.timetable-count', stats.totalTimetables) }}
              </b>
            </template>
            <template #distance>
              <b class="text--primary"> {{ stats.distanceSum?.toFixed(2) }} km</b>
            </template>
          </i18n-t>
        </div>
        <div v-if="stats.maxTimetable">
          &bull;
          <i18n-t keypath="journal.timetable-stats-longest">
            <template #id>
              <router-link :to="`/journal/timetables?timetableId=${stats.maxTimetable.id}`">
                <b>{{ stats.maxTimetable.id }}</b>
              </router-link>
            </template>
            <template #author>
              <router-link
                :to="`/journal/dispatchers?dispatcherName=${stats.maxTimetable.authorName}`"
              >
                <b>{{ stats.maxTimetable.authorName }}</b>
              </router-link>
            </template>
            <template #driver>
              <b class="text--primary">{{ stats.maxTimetable.driverName }}</b>
            </template>
            <template #distance>
              <b class="text--primary">{{ stats.maxTimetable.routeDistance }} km</b>
            </template>
          </i18n-t>
        </div>
        <div v-if="topDispatchers.length == 1">
          &bull;
          <i18n-t keypath="journal.timetable-stats-most-active-dr">
            <template #dispatcher>
              <router-link :to="`/journal/dispatchers?dispatcherName=${topDispatchers[0].name}`">
                <b>{{ topDispatchers[0].name }}</b>
              </router-link>
            </template>
            <template #count>
              <b class="text--primary">
                {{ topDispatchers[0].count }}
                {{ $t('journal.timetable-count', topDispatchers[0].count) }}
              </b>
            </template>
          </i18n-t>
        </div>
        <div v-if="topDispatchers.length > 1">
          &bull;
          <i18n-t keypath="journal.timetable-stats-most-active-dr-many">
            <template #dispatchers>
              <span v-for="(disp, i) in topDispatchers" :key="i">
                <span v-if="i == topDispatchers.length - 1"> {{ $t('general.and') }} </span>
                <router-link :to="`/journal/dispatchers?dispatcherName=${disp.name}`">
                  <b>{{ disp.name }}</b>
                </router-link>
                <span v-if="i < topDispatchers.length - 2">, </span>
              </span>
            </template>
            <template #count>
              <b class="text--primary">
                {{ topDispatchers[0].count }}
                {{ $t('journal.timetable-count', topDispatchers[0].count) }}
              </b>
            </template>
          </i18n-t>
        </div>
        <div v-if="stats.longestDuties.length > 0">
          &bull;
          <i18n-t keypath="journal.timetable-stats-longest-duties">
            <template #dispatcher>
              <router-link
                :to="`/journal/dispatchers?dispatcherName=${stats.longestDuties[0].name}`"
              >
                <b>{{ stats.longestDuties[0].name }}</b>
              </router-link>
            </template>
            <template #station>{{ stats.longestDuties[0].station }}</template>
            <template #duration>
              {{ calculateDuration(stats.longestDuties[0].duration) }}
            </template>
          </i18n-t>
        </div>
        <div v-if="stats.mostActiveDrivers.length > 0">
          &bull;
          <i18n-t keypath="journal.timetable-stats-most-active-driver">
            <template #driver>
              <b class="text--primary">{{ stats.mostActiveDrivers[0].name }}</b>
            </template>
            <template #distance>
              <b class="text--primary">{{ stats.mostActiveDrivers[0].distance.toFixed(2) }} km</b>
            </template>
          </i18n-t>
        </div>
      </span>
    </span>
  </section>
 </template>
 <script lang="ts">
 import axios from 'axios';
 import { defineComponent } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
 import { URLs } from '../../scripts/utils/apiURLs';
 import { API } from '../../typings/api';
 import { Status } from '../../typings/common';
 export default defineComponent({
  mixins: [dateMixin],
  emits: ['toggleStatsOpen'],
  data() {
    return {
      Status,
      statsStatus: Status.Data.Loading,
      intervalId: -1,
      stats: {} as API.DailyStats.Response
    };
  },
  activated() {
    this.startFetchingDailyStats();
    this.$emit('toggleStatsOpen', true);
  },
  deactivated() {
    this.stopFetchingDailyStats();
  },
  computed: {
    topDispatchers() {
      if (this.stats.mostActiveDispatchers.length == 0) return [];
      const maxCount = this.stats.mostActiveDispatchers[0].count;
      return this.stats.mostActiveDispatchers.filter((disp) => disp.count === maxCount);
    }
  },
  methods: {
    async fetchDailyTimetableStats() {
      try {
        const res: API.DailyStats.Response = await (
          await axios.get(`${URLs.stacjownikAPI}/api/getDailyTimetableStats`)
        ).data;
        // this.stats = {
        //   totalTimetables: res.totalTimetables,
        //   distanceSum: res.distanceSum,
        //   distanceAvg: res.distanceAvg,
        //   // timetableAuthor: res.maxTimetable?.authorName || '',
        //   // timetableDriver: res.maxTimetable?.driverName || '',
        //   // timetableId: res.maxTimetable?.id || 0,
        //   // timetableRouteDistance: res.maxTimetable?.routeDistance || 0,
        //   mostActiveDispatchers: res.mostActiveDispatchers,
        //   mostActiveDrivers: res.mostActiveDrivers,
        //   longestDuties: res.longestDuties
        // };
        this.stats = res;
        this.statsStatus = Status.Data.Loaded;
      } catch (error) {
        console.error('Ups! Wystąpił błąd podczas pobierania statystyk rozkładów jazdy...');
        this.statsStatus = Status.Data.Error;
      }
    },
    startFetchingDailyStats() {
      this.fetchDailyTimetableStats();
      if (this.intervalId != -1) return;
      this.intervalId = setInterval(this.fetchDailyTimetableStats, 60000);
    },
    stopFetchingDailyStats() {
      clearInterval(this.intervalId);
      this.intervalId = -1;
    }
  }
 });
 </script>
 <style lang="scss" scoped>
@import '../../styles/responsive.scss';
 .daily-stats {
  text-align: left;
 }
 .daily-stats > span[data-active='0'] {
  opacity: 0.75;
 }
 .stats-list a {
  text-decoration: underline;
 }
@include smallScreen {
  h3 {
    text-align: center;
  }
 }
 </style>
@@ -1,165 +0,0 @@
 <template>
  <div class="stats_container" v-click-outside="() => (cardVisible = false)">
    <button class="stats_button" @click="toggleCard">
      Statystyki dyżurnego {{ store.dispatcherStatsName }}
    </button>
    <div class="stats_card" v-if="store.dispatcherStatsName && cardVisible">
      <div>
        <Loading v-if="!store.dispatcherStatsData" />
        <div class="loading" v-else-if="!store.dispatcherStatsData._count._all">
          Ten dyżurny nie ma jeszcze szczegółowych statystyk!
        </div>
        <div v-else>
          <h3>STATYSTYKI WYSTAWIONYCH ROZKŁADÓW</h3>
          <div class="info-stats" v-if="store.dispatcherStatsData._count._all">
            <span class="stat-badge">
              <span>LICZBA</span>
              <span>{{ store.dispatcherStatsData._count._all }}</span>
            </span>
            <span class="stat-badge">
              <span>SUMA (KM)</span>
              <span>{{ store.dispatcherStatsData._sum.routeDistance.toFixed(2) }}km</span>
            </span>
            <span class="stat-badge">
              <span>NAJDŁUŻSZY</span>
              <span>{{ store.dispatcherStatsData._max.routeDistance.toFixed(2) }}km</span>
            </span>
            <span class="stat-badge">
              <span>ŚREDNIO</span>
              <span>{{ store.dispatcherStatsData._avg.routeDistance.toFixed(2) }}km</span>
            </span>
          </div>
          <h3>OSTATNIE WYSTAWIONE ROZKŁADY</h3>
          <div class="last-timetables">
            <div class="timetable-row" v-for="timetable in timetables" :key="timetable.id">
              #{{ timetable.timetableId }} |
              <b>{{ timetable.trainCategoryCode }} {{ timetable.trainNo }}</b> |
              {{ timetable.driverName }} ({{ timetable.routeDistance }}km)
              <div>{{ timetable.route.replace('|', ' > ') }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
 </template>
 <script lang="ts">
 import axios from 'axios';
 import { defineComponent } from 'vue';
 import { URLs } from '../../scripts/utils/apiURLs';
 import { useStore } from '../../store/mainStore';
 import Loading from '../Global/Loading.vue';
 import { API } from '../../typings/api';
 export default defineComponent({
  components: { Loading },
  setup() {
    const store = useStore();
    return {
      store
    };
  },
  data() {
    return {
      cardVisible: false,
      lastDispatcherName: '',
      timetables: [] as API.TimetableHistory.Response
    };
  },
  methods: {
    toggleCard() {
      if (!this.store.dispatcherStatsName) return;
      this.cardVisible = !this.cardVisible;
      if (this.cardVisible) this.fetchDispatcherStats();
    },
    async fetchDispatcherStats() {
      if (this.lastDispatcherName != this.store.dispatcherStatsName) {
        this.store.dispatcherStatsData = undefined;
      }
      const statsData: API.DispatcherStats.Response = await (
        await axios.get(
          `${URLs.stacjownikAPI}/api/getDispatcherInfo?name=${this.store.dispatcherStatsName}`
        )
      ).data;
      const timetables: API.TimetableHistory.Response = await (
        await axios.get(
          `${URLs.stacjownikAPI}/api/getTimetables?authorName=${this.store.dispatcherStatsName}`
        )
      ).data;
      this.timetables = timetables;
      this.store.dispatcherStatsData = statsData;
      this.lastDispatcherName = this.store.dispatcherStatsName;
    }
  }
 });
 </script>
 <style lang="scss" scoped>
@import '../../styles/responsive.scss';
@import '../../styles/variables.scss';
 .stats_container {
  position: relative;
 }
 .stats_card {
  position: absolute;
  z-index: 999;
  top: 120%;
  right: 0;
  width: 500px;
  max-width: 97vw;
  min-height: 100px;
  overflow: auto;
  border-radius: 1em 0 1em 1em;
  background-color: #222222f1;
  box-shadow: 0 3px 10px 5px #131313;
  padding: 1em 0.5em;
 }
 .last-timetables {
  max-height: 400px;
  margin: 0.5em 0;
 }
 .timetable-row {
  width: 95%;
  margin: 0.5em auto;
  padding: 0.5em;
  background-color: #4d4d4d;
 }
 h2.card-title {
  font-size: 1.8em;
 }
 h3 {
  margin-top: 1em;
 }
 h2,
 h3 {
  text-align: center;
 }
 .last-timetables {
  overflow-y: auto;
 }
 </style>
@@ -0,0 +1,268 @@
 <template>
  <section class="daily-stats">
    <span :data-active="statsStatus">
      <span class="stats-list">
        <h3>
          {{ $t('journal.daily-stats.title') }}
          <b class="text--primary">{{ new Date().toLocaleDateString($i18n.locale) }}</b>
        </h3>
        <hr class="header-separator" />
        <b v-if="statsStatus == Status.Data.Loading">
          {{ $t('app.loading') }}
        </b>
        <b class="text--error" v-else-if="statsStatus == Status.Data.Error">
          {{ $t('journal.stats-error') }}
        </b>
        <b v-else-if="topDispatchers.length == 0">
          {{ $t('journal.daily-stats.info') }}
        </b>
        <div v-else>
          <div v-if="stats.totalTimetables">
            &bull;
            <i18n-t keypath="journal.daily-stats.total">
              <template #count>
                <b class="text--primary">
                  {{ stats.totalTimetables }}
                  {{ $t('journal.daily-stats.count', stats.totalTimetables) }}
                </b>
              </template>
              <template #distance>
                <b class="text--primary"> {{ stats.distanceSum?.toFixed(2) }} km</b>
              </template>
            </i18n-t>
          </div>
          <div v-if="stats.maxTimetable">
            &bull;
            <i18n-t keypath="journal.daily-stats.longest">
              <template #id>
                <router-link :to="`/journal/timetables?search-train=%23${stats.maxTimetable.id}`">
                  <b>{{ stats.maxTimetable.id }}</b>
                </router-link>
              </template>
              <template #author>
                <router-link
                  :to="`/journal/timetables?search-dispatcher=${stats.maxTimetable.authorName}`"
                >
                  <b>{{ stats.maxTimetable.authorName }}</b>
                </router-link>
              </template>
              <template #driver>
                <b class="text--primary">{{ stats.maxTimetable.driverName }}</b>
              </template>
              <template #distance>
                <b class="text--primary">{{ stats.maxTimetable.routeDistance }} km</b>
              </template>
            </i18n-t>
          </div>
          <div v-if="topDispatchers.length == 1">
            &bull;
            <i18n-t keypath="journal.daily-stats.most-active-dr">
              <template #dispatcher>
                <router-link
                  :to="`/journal/dispatchers?search-dispatcher=${topDispatchers[0].name}`"
                >
                  <b>{{ topDispatchers[0].name }}</b>
                </router-link>
              </template>
              <template #count>
                <b class="text--primary">
                  {{ topDispatchers[0].count }}
                  {{ $t('journal.daily-stats.count', topDispatchers[0].count) }}
                </b>
              </template>
            </i18n-t>
          </div>
          <div v-if="topDispatchers.length > 1">
            &bull;
            <i18n-t keypath="journal.daily-stats.most-active-dr-many">
              <template #dispatchers>
                <span v-for="(disp, i) in topDispatchers" :key="i">
                  <span v-if="i == topDispatchers.length - 1"> {{ $t('general.and') }} </span>
                  <router-link :to="`/journal/dispatchers?search-dispatcher=${disp.name}`">
                    <b>{{ disp.name }}</b>
                  </router-link>
                  <span v-if="i < topDispatchers.length - 2">, </span>
                </span>
              </template>
              <template #count>
                <b class="text--primary">
                  {{ topDispatchers[0].count }}
                  {{ $t('journal.daily-stats.count', topDispatchers[0].count) }}
                </b>
              </template>
            </i18n-t>
          </div>
          <div v-if="stats.longestDuties.length > 0">
            &bull;
            <i18n-t keypath="journal.daily-stats.longest-duties">
              <template #dispatcher>
                <router-link
                  :to="`/journal/dispatchers?search-dispatcher=${stats.longestDuties[0].name}`"
                >
                  <b>{{ stats.longestDuties[0].name }}</b>
                </router-link>
              </template>
              <template #station>{{ stats.longestDuties[0].station }}</template>
              <template #duration>
                {{ calculateDuration(stats.longestDuties[0].duration) }}
              </template>
            </i18n-t>
          </div>
          <div v-if="stats.mostActiveDrivers.length > 0">
            &bull;
            <i18n-t keypath="journal.daily-stats.most-active-driver">
              <template #driver>
                <router-link
                  :to="`/journal/timetables?search-driver=${stats.mostActiveDrivers[0].name}`"
                >
                  <b>{{ stats.mostActiveDrivers[0].name }}</b>
                </router-link>
              </template>
              <template #distance>
                <b class="text--primary">{{ stats.mostActiveDrivers[0].distance.toFixed(2) }} km</b>
              </template>
            </i18n-t>
          </div>
          <hr class="section-separator" />
          <div class="stats-badges">
            <span
              class="stat-badge"
              v-for="key in [
                'rippedSwitches',
                'derailments',
                'skippedStopSignals',
                'radioStops',
                'kills'
              ]"
              :key="key"
            >
              <span>{{ $t(`journal.daily-stats.${key}`) }}</span>
              <span>{{
                Object.entries(stats.globalDiff).find(([k, v]) => k == key)?.[1] || '--'
              }}</span>
            </span>
          </div>
        </div>
      </span>
    </span>
  </section>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
 import { API } from '../../typings/api';
 import { Status } from '../../typings/common';
 import http from '../../http';
 export default defineComponent({
  name: 'journal-daily-stats',
  mixins: [dateMixin],
  // emits: ['toggleStatsOpen'],
  data() {
    return {
      Status,
      statsStatus: Status.Data.Loading,
      intervalId: -1,
      stats: {} as API.DailyStats.Response
    };
  },
  activated() {
    this.startFetchingDailyStats();
    // this.$emit('toggleStatsOpen', true);
  },
  deactivated() {
    this.stopFetchingDailyStats();
  },
  computed: {
    topDispatchers() {
      if (this.stats.mostActiveDispatchers.length == 0) return [];
      const maxCount = this.stats.mostActiveDispatchers[0].count;
      return this.stats.mostActiveDispatchers.filter((disp) => disp.count === maxCount);
    }
  },
  methods: {
    async fetchDailyTimetableStats() {
      try {
        const res: API.DailyStats.Response = await (await http.get('api/getDailyStats')).data;
        this.stats = res;
        this.statsStatus = Status.Data.Loaded;
      } catch (error) {
        console.error('Ups! Wystąpił błąd podczas pobierania statystyk rozkładów jazdy...');
        this.statsStatus = Status.Data.Error;
      }
    },
    startFetchingDailyStats() {
      this.fetchDailyTimetableStats();
      if (this.intervalId != -1) return;
      this.intervalId = window.setInterval(this.fetchDailyTimetableStats, 60000);
    },
    stopFetchingDailyStats() {
      clearInterval(this.intervalId);
      this.intervalId = -1;
    }
  }
 });
 </script>
 <style lang="scss" scoped>
@import '../../styles/responsive.scss';
@import '../../styles/JournalStats.scss';
@import '../../styles/badge.scss';
 .daily-stats {
  text-align: left;
 }
 .daily-stats > span[data-active='0'] {
  opacity: 0.75;
 }
 .stats-list a {
  text-decoration: underline;
 }
 .stats-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
 }
@include smallScreen {
  h3 {
    text-align: center;
  }
 }
 </style>
@@ -0,0 +1,85 @@
 <template>
  <div class="journal-stats dispatcher" v-if="dispatcherName && stats">
    <span class="loading" v-if="!stats.issuedTimetables && !stats.services">
      {{ $t('journal.dispatcher-stats.empty') }}
    </span>
    <span v-else>
      <h3>
        <i18n-t keypath="journal.dispatcher-stats.title">
          <template #name>
            <span class="text--primary">{{ dispatcherName.toUpperCase() }}</span>
          </template>
        </i18n-t>
      </h3>
      <hr class="header-separator" />
      <div class="info-stats">
        <span class="stat-badge" v-if="stats.services">
          <span>{{ $t('journal.dispatcher-stats.services-count') }}</span>
          <span>{{ stats.services.count }}</span>
        </span>
        <span class="stat-badge" v-if="stats.services">
          <span>{{ $t('journal.dispatcher-stats.service-max') }}</span>
          <span>{{ calculateDuration(stats.services.durationMax) }}</span>
        </span>
        <span class="stat-badge" v-if="stats.services">
          <span>{{ $t('journal.dispatcher-stats.service-avg') }}</span>
          <span>{{ calculateDuration(stats.services.durationAvg) }}</span>
        </span>
      </div>
      <hr class="section-separator" />
      <div class="info-stats">
        <span class="stat-badge" v-if="stats.issuedTimetables">
          <span>{{ $t('journal.dispatcher-stats.timetables-count') }}</span>
          <span>{{ stats.issuedTimetables.count }}</span>
        </span>
        <span class="stat-badge" v-if="stats.issuedTimetables">
          <span>{{ $t('journal.dispatcher-stats.timetables-sum') }}</span>
          <span>{{ stats.issuedTimetables.distanceSum.toFixed(2) }}km</span>
        </span>
        <span class="stat-badge" v-if="stats.issuedTimetables">
          <span>{{ $t('journal.dispatcher-stats.timetables-max') }}</span>
          <span>{{ stats.issuedTimetables.distanceMax.toFixed(2) }}km</span>
        </span>
        <span class="stat-badge" v-if="stats.issuedTimetables">
          <span>{{ $t('journal.dispatcher-stats.timetables-avg') }}</span>
          <span>{{ stats.issuedTimetables.distanceAvg.toFixed(2) }}km</span>
        </span>
      </div>
    </span>
  </div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
 import dateMixin from '../../../mixins/dateMixin';
 import { useMainStore } from '../../../store/mainStore';
 export default defineComponent({
  name: 'journal-dispatcher-stats',
  mixins: [dateMixin],
  setup() {
    const store = useMainStore();
    return {
      stats: store.dispatcherStatsData,
      dispatcherName: store.dispatcherStatsName
    };
  }
 });
 </script>
 <style lang="scss" scoped>
@import '../../../styles/JournalStats.scss';
 </style>
@@ -0,0 +1,256 @@
 <template>
  <transition name="status-anim" mode="out-in">
    <div :key="dataStatus">
      <div class="journal_warning" v-if="store.isOffline">
        {{ $t('app.offline') }}
      </div>
      <Loading v-else-if="dataStatus == Status.Data.Loading" />
      <div v-else-if="dataStatus == Status.Data.Error" class="journal_warning error">
        {{ $t('app.error') }}
      </div>
      <div class="journal_warning" v-else-if="dispatcherHistory.length == 0">
        {{ $t('app.no-result') }}
      </div>
      <div v-else>
        <table class="dispatchers-table">
          <thead>
            <th>{{ $t('journal.history-name') }}</th>
            <th>{{ $t('journal.history-hash') }}</th>
            <th>{{ $t('journal.history-dispatcher') }}</th>
            <th>{{ $t('journal.history-level') }}</th>
            <th>{{ $t('journal.history-rate') }}</th>
            <th>{{ $t('journal.history-region') }}</th>
            <th>{{ $t('journal.history-date') }}</th>
          </thead>
          <tbody>
            <transition-group name="list-anim">
              <tr v-for="historyItem in dispatcherHistory" :key="historyItem.id">
                <td>
                  <router-link
                    :to="`/journal/dispatchers?search-station=${historyItem.stationName}`"
                  >
                    <b>{{ historyItem.stationName }}</b>
                  </router-link>
                </td>
                <td>#{{ historyItem.stationHash }}</td>
                <td>
                  <router-link
                    :to="`/journal/dispatchers?search-dispatcher=${historyItem.dispatcherName}`"
                  >
                    <b
                      v-if="isDonator(historyItem.dispatcherName)"
                      class="text--donator"
                      :title="$t('donations.dispatcher-message')"
                    >
                      {{ historyItem.dispatcherName }}
                    </b>
                    <b v-else>
                      {{ historyItem.dispatcherName }}
                    </b>
                  </router-link>
                </td>
                <td>
                  <b
                    v-if="historyItem.dispatcherLevel !== null"
                    class="level-badge dispatcher"
                    :style="
                      calculateExpStyle(
                        historyItem.dispatcherLevel,
                        historyItem.dispatcherIsSupporter
                      )
                    "
                  >
                    {{ historyItem.dispatcherLevel >= 2 ? historyItem.dispatcherLevel : 'L' }}
                  </b>
                </td>
                <td class="text--primary">
                  <b>{{ historyItem.dispatcherRate }}</b>
                </td>
                <td>
                  <b class="region-badge" :aria-describedby="historyItem.region">{{
                    regions.find((r) => r.id == historyItem.region)?.value || '???'
                  }}</b>
                </td>
                <td style="min-width: 200px" class="time">
                  <span v-if="historyItem.timestampTo" class="text--offline">
                    <b>{{ $d(historyItem.timestampFrom) }}</b>
                    {{ timestampToString(historyItem.timestampFrom) }}
                    - {{ timestampToString(historyItem.timestampTo) }} ({{
                      calculateDuration(historyItem.currentDuration)
                    }})
                  </span>
                  <span class="dispatcher-online" v-else>
                    <b class="text--online">
                      <router-link :to="`/scenery?station=${historyItem.stationName}`">{{
                        $t('journal.online-since')
                      }}</router-link>
                      {{ timestampToString(historyItem.timestampFrom) }}
                    </b>
                    ({{ calculateDuration(historyItem.currentDuration) }})
                  </span>
                </td>
              </tr>
            </transition-group>
          </tbody>
        </table>
        <AddDataButton
          :list="dispatcherHistory"
          :scrollDataLoaded="scrollDataLoaded"
          :scrollNoMoreData="scrollNoMoreData"
          @addHistoryData="addHistoryData"
        />
      </div>
      <div class="journal_warning" v-if="scrollNoMoreData">
        {{ $t('journal.no-further-data') }}
      </div>
      <div class="journal_warning" v-else-if="!scrollDataLoaded">
        {{ $t('journal.loading-further-data') }}
      </div>
    </div>
  </transition>
 </template>
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
 import { regions } from '../../../data/options.json';
 import { useMainStore } from '../../../store/mainStore';
 import { API } from '../../../typings/api';
 import { Status } from '../../../typings/common';
 import Loading from '../../Global/Loading.vue';
 import AddDataButton from '../../Global/AddDataButton.vue';
 import dateMixin from '../../../mixins/dateMixin';
 import donatorMixin from '../../../mixins/donatorMixin';
 import styleMixin from '../../../mixins/styleMixin';
 export default defineComponent({
  components: { Loading, AddDataButton },
  mixins: [dateMixin, styleMixin, donatorMixin],
  props: {
    dispatcherHistory: {
      type: Array as PropType<API.DispatcherHistory.Response>,
      required: true
    },
    scrollNoMoreData: {
      type: Boolean
    },
    scrollDataLoaded: {
      type: Boolean
    },
    addHistoryData: {
      type: Function as PropType<() => void>
    },
    dataStatus: {
      type: Number as PropType<Status.Data>
    }
  },
  data() {
    return {
      Status,
      store: useMainStore(),
      regions
    };
  },
  computed: {
    computedDispatcherHistory() {
      return this.dispatcherHistory.reduce(
        (acc, historyItem, i) => {
          if (this.isAnotherDay(i - 1, i))
            acc.push(new Date(historyItem.timestampFrom).toLocaleDateString('pl-PL'));
          acc.push(historyItem);
          return acc;
        },
        [] as (API.DispatcherHistory.Data | string)[]
      );
    }
  },
  methods: {
    navigateToScenery(name: string, isOnline: boolean) {
      if (!isOnline) return;
      this.$router.push(`/scenery?station=${name.trim().replace(/ /g, '_')}`);
    },
    isAnotherDay(prevIndex: number, currIndex: number) {
      if (currIndex == 0) return true;
      return (
        new Date(this.dispatcherHistory[prevIndex].timestampFrom).getDate() !=
        new Date(this.dispatcherHistory[currIndex].timestampFrom).getDate()
      );
    }
  }
 });
 </script>
 <style lang="scss" scoped>
@import '../../../styles/animations.scss';
@import '../../../styles/responsive.scss';
@import '../../../styles/badge.scss';
@import '../../../styles/variables.scss';
@import '../../../styles/JournalSection.scss';
 table.dispatchers-table {
  --_bg-table: #111;
  --_bg-head: #101010;
  --_bg-row: #2f2f2f;
  width: 100%;
  border-collapse: collapse;
  position: relative;
  text-align: center;
  margin-bottom: 1em;
  thead {
    position: sticky;
    top: 0;
    background-color: var(--_bg-head);
  }
  th {
    padding: 0.5em;
  }
  tr {
    background-color: var(--_bg-row);
    border-bottom: 2px solid black;
    &:last-child {
      border: none;
    }
  }
  td {
    padding: 0.75em;
    .level-badge {
      margin: 0 auto;
    }
  }
 }
 .text {
  &--online {
    color: springgreen;
  }
  &--offline {
    color: #ddd;
  }
 }
 </style>
@@ -1,249 +0,0 @@
 <template>
  <div>
    <transition name="status-anim" mode="out-in">
      <div :key="dataStatus">
        <div class="journal_warning" v-if="store.isOffline">
          {{ $t('app.offline') }}
        </div>
        <Loading v-else-if="dataStatus == Status.Data.Loading" />
        <div v-else-if="dataStatus == Status.Data.Error" class="journal_warning error">
          {{ $t('app.error') }}
        </div>
        <div class="journal_warning" v-else-if="dispatcherHistory.length == 0">
          {{ $t('app.no-result') }}
        </div>
        <div v-else>
          <table class="scenery-history-table">
            <thead>
              <th>{{ $t('journal.history-name') }}</th>
              <th>{{ $t('journal.history-hash') }}</th>
              <th>{{ $t('journal.history-dispatcher') }}</th>
              <th>{{ $t('journal.history-level') }}</th>
              <th>{{ $t('journal.history-rate') }}</th>
              <th>{{ $t('journal.history-region') }}</th>
              <th>{{ $t('journal.history-date') }}</th>
            </thead>
            <tbody>
              <transition-group name="list-anim">
                <tr v-for="historyItem in dispatcherHistory" :key="historyItem.id">
                  <td>
                    <router-link
                      :to="`/journal/dispatchers?sceneryName=${historyItem.stationName}`"
                    >
                      <b>{{ historyItem.stationName }}</b>
                    </router-link>
                  </td>
                  <td>#{{ historyItem.stationHash }}</td>
                  <td>
                    <router-link
                      :to="`/journal/dispatchers?dispatcherName=${historyItem.dispatcherName}`"
                    >
                      <b>{{ historyItem.dispatcherName }}</b>
                    </router-link>
                  </td>
                  <td>
                    <b
                      v-if="historyItem.dispatcherLevel !== null"
                      class="level-badge dispatcher"
                      :style="
                        calculateExpStyle(
                          historyItem.dispatcherLevel,
                          historyItem.dispatcherIsSupporter
                        )
                      "
                    >
                      {{ historyItem.dispatcherLevel >= 2 ? historyItem.dispatcherLevel : 'L' }}
                    </b>
                  </td>
                  <td class="text--primary">
                    <b>{{ historyItem.dispatcherRate }}</b>
                  </td>
                  <td>
                    <b class="region-badge" :aria-describedby="historyItem.region">{{
                      regions.find((r) => r.id == historyItem.region)?.value || '???'
                    }}</b>
                  </td>
                  <td style="min-width: 200px" class="time">
                    <span v-if="historyItem.timestampTo" class="text--offline">
                      <b>{{ $d(historyItem.timestampFrom) }}</b>
                      {{ timestampToString(historyItem.timestampFrom) }}
                      - {{ timestampToString(historyItem.timestampTo) }} ({{
                        calculateDuration(historyItem.currentDuration)
                      }})
                    </span>
                    <span class="dispatcher-online" v-else>
                      <b class="text--online">
                        <router-link :to="`/scenery?station=${historyItem.stationName}`">{{
                          $t('journal.online-since')
                        }}</router-link>
                        {{ timestampToString(historyItem.timestampFrom) }}
                      </b>
                      ({{ calculateDuration(historyItem.currentDuration) }})
                    </span>
                  </td>
                </tr>
              </transition-group>
            </tbody>
          </table>
          <AddDataButton
            :list="dispatcherHistory"
            :scrollDataLoaded="scrollDataLoaded"
            :scrollNoMoreData="scrollNoMoreData"
            @addHistoryData="addHistoryData"
          />
        </div>
      </div>
    </transition>
    <div class="journal_warning" v-if="scrollNoMoreData">
      {{ $t('journal.no-further-data') }}
    </div>
    <div class="journal_warning" v-else-if="!scrollDataLoaded">
      {{ $t('journal.loading-further-data') }}
    </div>
  </div>
 </template>
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
 import styleMixin from '../../mixins/styleMixin';
 import { useStore } from '../../store/mainStore';
 import Loading from '../Global/Loading.vue';
 import { regions } from '../../data/options.json';
 import AddDataButton from '../Global/AddDataButton.vue';
 import { API } from '../../typings/api';
 import { Status } from '../../typings/common';
 export default defineComponent({
  components: { Loading, AddDataButton },
  mixins: [dateMixin, styleMixin],
  props: {
    dispatcherHistory: {
      type: Array as PropType<API.DispatcherHistory.Response>,
      required: true
    },
    scrollNoMoreData: {
      type: Boolean
    },
    scrollDataLoaded: {
      type: Boolean
    },
    addHistoryData: {
      type: Function as PropType<() => void>
    },
    dataStatus: {
      type: Number as PropType<Status.Data>
    }
  },
  data() {
    return {
      Status,
      store: useStore(),
      regions
    };
  },
  computed: {
    computedDispatcherHistory() {
      console.log(this.dispatcherHistory.length);
      return this.dispatcherHistory.reduce(
        (acc, historyItem, i) => {
          if (this.isAnotherDay(i - 1, i))
            acc.push(new Date(historyItem.timestampFrom).toLocaleDateString('pl-PL'));
          acc.push(historyItem);
          return acc;
        },
        [] as (API.DispatcherHistory.Data | string)[]
      );
    }
  },
  methods: {
    navigateToScenery(name: string, isOnline: boolean) {
      if (!isOnline) return;
      this.$router.push(`/scenery?station=${name.trim().replace(/ /g, '_')}`);
    },
    isAnotherDay(prevIndex: number, currIndex: number) {
      if (currIndex == 0) return true;
      return (
        new Date(this.dispatcherHistory[prevIndex].timestampFrom).getDate() !=
        new Date(this.dispatcherHistory[currIndex].timestampFrom).getDate()
      );
    }
  }
 });
 </script>
 <style lang="scss" scoped>
@import '../../styles/animations.scss';
@import '../../styles/responsive.scss';
@import '../../styles/badge.scss';
@import '../../styles/variables.scss';
@import '../../styles/JournalSection.scss';
 table.scenery-history-table {
  --_bg-table: #111;
  --_bg-head: #101010;
  --_bg-row: #2f2f2f;
  width: 100%;
  border-collapse: collapse;
  position: relative;
  text-align: center;
  margin-bottom: 1em;
  thead {
    position: sticky;
    top: 0;
    background-color: var(--_bg-head);
  }
  th {
    padding: 0.5em;
  }
  tr {
    background-color: var(--_bg-row);
    border-bottom: 2px solid black;
    &:last-child {
      border: none;
    }
  }
  td {
    padding: 0.75em;
    .level-badge {
      margin: 0 auto;
    }
  }
 }
 .text {
  &--online {
    color: springgreen;
  }
  &--offline {
    color: #ddd;
  }
 }
 </style>
@@ -1,6 +1,6 @@
 <template>
-  <div class="filters-options" @keydown.esc="showOptions = false">
+  <div class="filters-options dropdown" @keydown.esc="showOptions = false">
-    <div class="bg" v-if="showOptions" @click="showOptions = false"></div>
+    <div class="dropdown_background" v-if="showOptions" @click="showOptions = false"></div>
    <div class="actions-bar">
      <button
@@ -27,13 +27,13 @@
      <option v-for="(sugg, i) in dispatcherSuggestions" :key="i" :value="sugg"></option>
    </datalist>
-    <transition name="options-anim">
+    <transition name="dropdown-anim">
-      <div class="options_wrapper" v-if="showOptions">
+      <div class="dropdown_wrapper" v-if="showOptions">
        <div class="options_content">
          <h1 class="option-title">{{ $t('options.search-title') }}</h1>
          <div class="search_content">
            <div class="search" v-for="(_, propName) in searchersValues" :key="propName">
-              <label v-if="propName == 'search-date'" for="date">{{
+              <label v-if="propName == 'search-date'" for="search-date">{{
                $t(`options.search-${optionsType}-date`)
              }}</label>
@@ -41,12 +41,13 @@
                <input
                  class="search-input"
                  v-model="searchersValues[propName]"
-                  @keydown.enter="onSearchConfirm"
+                  @keydown.enter="searchConfirm"
                  @focus="preventKeyDown = true"
                  @blur="preventKeyDown = false"
                  :placeholder="$t(`options.${propName}`)"
                  :type="propName == 'search-date' ? 'date' : 'text'"
                  :min="propName == 'search-date' ? '2022-02-01' : undefined"
                  :id="`${propName}`"
                  :list="propName.toString()"
                />
@@ -110,14 +111,12 @@
 </template>
 <script lang="ts">
 import axios from 'axios';
 import { defineComponent, inject, PropType } from 'vue';
 import keyMixin from '../../mixins/keyMixin';
-import { URLs } from '../../scripts/utils/apiURLs';
+import { useMainStore } from '../../store/mainStore';
 import { useStore } from '../../store/mainStore';
 import { Journal } from './typings';
 import { API } from '../../typings/api';
 import { Status } from '../../typings/common';
 import http from '../../http';
 export default defineComponent({
  emits: ['onSearchConfirm', 'onOptionsReset', 'onRefreshData'],
@@ -158,7 +157,7 @@ export default defineComponent({
      dispatcherSuggestions: [] as string[],
      searchTimeout: 0,
-      store: useStore(),
+      store: useMainStore(),
      JournalFilterSection: Journal.FilterSection
    };
@@ -182,12 +181,6 @@ export default defineComponent({
  },
  watch: {
    async 'store.driverStatsName'() {
      await this.fetchDriverStats();
      // if (value) this.store.currentStatsTab = 'driver';
    },
    async 'searchersValues.search-driver'(value: string | undefined) {
      clearTimeout(this.searchTimeout);
@@ -206,29 +199,34 @@ export default defineComponent({
  },
  methods: {
-    async fetchDriverStats() {
+    // filters & sorters from URL params
-      this.store.driverStatsData = undefined;
+    handleRouteParams() {
      this.$router.push({
        query: {
          ...this.$route.query,
          'sorter-active':
            this.sorterOptionIds.indexOf(`${this.sorterActive.id}`) != 0
              ? this.sorterActive.id
              : undefined,
          ...Object.keys(this.searchersValues).reduce(
            (acc, k) => {
              const searchVal = this.searchersValues[k as Journal.TimetableSearchKey];
-      if (!this.store.driverStatsName) {
+              acc[k] = searchVal || undefined;
        this.store.driverStatsStatus = Status.Data.Initialized;
        return;
      }
-      try {
+              return acc;
-        this.store.driverStatsStatus = Status.Data.Loading;
+            },
-
+            {} as { [k: string]: string | undefined }
-        const statsData: API.DriverStats.Response = await (
+          ),
-          await axios.get(
+          ...this.filterList?.reduce(
-            `${URLs.stacjownikAPI}/api/getDriverInfo?name=${this.store.driverStatsName}`
+            (acc, f) => {
              if (f.isActive) acc[f.filterSection] = f.default ? undefined : f.id;
              return acc;
            },
            {} as { [k: string]: string | undefined }
          )
-        ).data;
+        }
-
+      });
        this.store.driverStatsData = statsData;
        this.store.driverStatsStatus = Status.Data.Loaded;
      } catch (error) {
        this.store.driverStatsStatus = Status.Data.Error;
        console.error('Ups! Wystąpił błąd przy próbie pobrania statystyk maszynisty! :/');
      }
    },
    refreshData() {
@@ -240,17 +238,17 @@ export default defineComponent({
      window.clearTimeout(this.searchTimeout);
-      this.searchTimeout = setTimeout(async () => {
+      this.searchTimeout = window.setTimeout(async () => {
        try {
          const suggestions: string[] = await (
-            await axios.get(`${URLs.stacjownikAPI}/api/get${type}Suggestions?name=${value}`)
+            await http.get(`api/get${type}Suggestions?name=${value}`)
          ).data;
          this[`${type}Suggestions`] = suggestions;
        } catch (error) {
          this[`${type}Suggestions`] = [];
        }
-      }, 450);
+      }, 250);
    },
    // Override keyMixin function
@@ -265,7 +263,7 @@ export default defineComponent({
    onSorterChange(item: { id: string | number; value: string }) {
      this.sorterActive.id = item.id;
      this.sorterActive.dir = -1;
-      this.$emit('onSearchConfirm');
+      this.searchConfirm();
    },
    onFilterChange(filter: Journal.TimetableFilter) {
@@ -275,30 +273,33 @@ export default defineComponent({
        .forEach((f) => (f.isActive = false));
      filter.isActive = true;
-      this.$emit('onSearchConfirm');
+      this.searchConfirm();
    },
    onInputClear(id: any) {
      this.searchersValues[id] = '';
-      this.$emit('onSearchConfirm');
+      this.searchConfirm();
    },
-    onSearchConfirm() {
+    searchConfirm() {
      this.$emit('onSearchConfirm');
      this.handleRouteParams();
    },
    onSearchButtonConfirm() {
      this.showOptions = false;
-      this.$emit('onSearchConfirm');
+      this.searchConfirm();
    },
    onResetButtonClick() {
      this.$emit('onOptionsReset');
      this.handleRouteParams();
    }
  }
 });
 </script>
 <style lang="scss" scoped>
-@import '../../styles/filters_options.scss';
+@import '../../styles/dropdown.scss';
@import '../../styles/dropdown_filters.scss';
 </style>
@@ -1,122 +1,85 @@
 <template>
-  <div class="journal-stats" v-if="!store.isOffline">
+  <div
-    <div class="tabs">
+    class="journal-stats dropdown"
    v-if="!mainStore.isOffline"
    @keydown.esc="currentStatsTab = null"
  >
    <div
      class="dropdown_background"
      v-if="currentStatsTab !== null"
      @click="currentStatsTab = null"
    ></div>
    <div class="actions-bar">
      <button
-        v-for="tab in data.tabs"
+        v-for="button in statsButtons"
-        :key="tab.name"
+        :key="button.tab"
-        class="btn--filled"
+        class="btn--filled btn--image"
-        :data-selected="tab.name == store.currentStatsTab && areStatsOpen"
+        :data-selected="button.tab == currentStatsTab"
-        :data-inactive="tab.inactive"
+        :data-disabled="button.disabled"
-        :data-disabled="tab.inactive"
+        :disabled="button.disabled"
-        :disabled="tab.inactive"
+        @click="onTabButtonClick(button.tab)"
        @click="onTabButtonClick(tab.name)"
      >
-        {{ $t(tab.titlePath) }}
+        <img
          v-if="button.iconName"
          :src="`/images/icon-${button.iconName}.svg`"
          :alt="button.iconName"
        />
        {{ $t(button.localeKey) }}
      </button>
    </div>
-    <div class="stats-tab" v-show="areStatsOpen">
+    <transition name="dropdown-anim">
-      <keep-alive>
+      <div class="dropdown_wrapper" v-if="currentStatsTab !== null">
-        <JournalDailyStats
+        <keep-alive>
-          v-if="store.currentStatsTab == 'daily'"
+          <component :is="currentStatsTab" :key="currentStatsTab"></component>
-          @toggleStatsOpen="toggleStatsOpen"
+        </keep-alive>
-        />
+      </div>
-        <JournalDriverStats v-else-if="store.currentStatsTab == 'driver'" />
+    </transition>
      </keep-alive>
    </div>
  </div>
 </template>
-<script setup lang="ts">
+<script lang="ts">
-import { computed, onMounted, reactive, Ref, ref, watch } from 'vue';
+import { defineComponent, PropType } from 'vue';
-import { useStore } from '../../store/mainStore';
+import { useMainStore } from '../../store/mainStore';
 import JournalDailyStats from './DailyStats.vue';
 import JournalDriverStats from './JournalDriverStats.vue';
 import StorageManager from '../../managers/storageManager';
 import { Journal } from './typings';
 import JournalDailyStats from './JournalDailyStats.vue';
 import JournalDispatcherStats from '../JournalView/JournalDispatchers/JournalDispatcherStats.vue';
 import JournalDriverStats from '../JournalView/JournalTimetables/JournalDriverStats.vue';
-// Types
+export default defineComponent({
-type TStatTab = 'daily' | 'driver';
+  components: { JournalDailyStats, JournalDriverStats, JournalDispatcherStats },
-
+  props: {
-// Variables
+    statsButtons: {
-const store = useStore();
+      type: Array as PropType<Journal.StatsButton[]>,
-
+      required: true
 const lastDailyStatsOpen = ref(false);
 const areStatsOpen = ref(false);
 const lastClickedTab: Ref<'daily' | 'driver' | null> = ref(null);
 let data = reactive({
  tabs: [
    {
      name: 'daily',
      titlePath: 'journal.daily-stats-title'
    },
    {
      name: 'driver',
      titlePath: 'journal.driver-stats-title'
      // inactive: true,
    }
-  ] as { name: TStatTab; titlePath: string; inactive?: boolean }[]
+  },
-});
+  data() {
    return {
      Journal,
      mainStore: useMainStore(),
      currentStatsTab: null as Journal.StatsTab | null
    };
  },
-// Methods
+  methods: {
-function onTabButtonClick(tab: TStatTab) {
+    onTabButtonClick(tab: Journal.StatsTab) {
-  if (lastClickedTab.value == tab || !lastClickedTab.value || !areStatsOpen.value)
+      this.currentStatsTab = tab == this.currentStatsTab ? null : tab;
    areStatsOpen.value = !areStatsOpen.value;
-  if (tab == 'daily') {
+      StorageManager.setStringValue('journalStatsTab', this.currentStatsTab ?? '');
-    StorageManager.setBooleanValue('dailyStatsOpen', areStatsOpen.value);
+    }
    lastDailyStatsOpen.value = areStatsOpen.value;
  }
  store.currentStatsTab = tab;
  lastClickedTab.value = tab;
  if (areStatsOpen.value == false) store.currentStatsTab = null;
 }
 function toggleStatsOpen(open: boolean) {
  areStatsOpen.value = open;
 }
 watch(
  computed(() => store.driverStatsData),
  (statsData) => {
    store.currentStatsTab = statsData ? 'driver' : lastClickedTab.value;
    areStatsOpen.value = statsData ? true : lastClickedTab.value !== null;
  }
 );
 onMounted(() => {
  if (StorageManager.getBooleanValue('dailyStatsOpen')) {
    areStatsOpen.value = true;
    store.currentStatsTab = 'daily';
  }
 });
 </script>
 <style lang="scss" scoped>
-@import '../../styles/JournalStats.scss';
+@import '../../styles/dropdown.scss';
@import '../../styles/dropdown_filters.scss';
@import '../../styles/variables.scss';
-.tabs {
+.dropdown_wrapper {
-  position: relative;
+  max-width: 100%;
  display: flex;
  gap: 0.5em;
  margin-bottom: 0.5em;
  button {
    font-weight: bold;
    padding: 0.5em 0.75em;
    &[data-inactive='true'] {
      color: gray;
    }
    &[data-selected='true'] {
      color: $accentCol;
    }
  }
 }
 </style>
@@ -1,14 +1,19 @@
 <template>
-  <div class="journal-stats">
+  <div class="journal-stats driver" v-if="store.driverStatsData">
-    <span v-if="store.driverStatsData">
+    <span>
      <h3>
-        {{ $t('journal.stats-title') }}
+        <i18n-t keypath="journal.driver-stats.title">
-        <span class="text--primary">{{ store.driverStatsName.toUpperCase() }}</span>
+          <template #name>
            <span class="text--primary">{{ store.driverStatsName.toUpperCase() }}</span>
          </template>
        </i18n-t>
      </h3>
      <hr class="header-separator" />
      <div class="info-stats">
        <span class="stat-badge">
-          <span>{{ $t('journal.stats-timetables') }}</span>
+          <span>{{ $t('journal.driver-stats.timetables') }}</span>
          <span
            >{{ store.driverStatsData._count.fulfilled }} /
            {{ store.driverStatsData._count._all }}</span
@@ -16,17 +21,17 @@
        </span>
        <span class="stat-badge">
-          <span>{{ $t('journal.stats-longest-timetable') }}</span>
+          <span>{{ $t('journal.driver-stats.longest-timetable') }}</span>
          <span> {{ store.driverStatsData._max.routeDistance.toFixed(2) }}km </span>
        </span>
        <span class="stat-badge">
-          <span>{{ $t('journal.stats-avg-timetable') }}</span>
+          <span>{{ $t('journal.driver-stats.avg-timetable') }}</span>
          <span> {{ store.driverStatsData._avg.routeDistance.toFixed(2) }}km </span>
        </span>
        <span class="stat-badge">
-          <span>{{ $t('journal.stats-distance') }}</span>
+          <span>{{ $t('journal.driver-stats.distance') }}</span>
          <span>
            {{ store.driverStatsData._sum.currentDistance.toFixed(2) }} /
            {{ store.driverStatsData._sum.routeDistance.toFixed(2) }}km
@@ -34,7 +39,7 @@
        </span>
        <span class="stat-badge">
-          <span>{{ $t('journal.stats-stations') }}</span>
+          <span>{{ $t('journal.driver-stats.stations') }}</span>
          <span>
            {{ store.driverStatsData._sum.confirmedStopsCount }} /
            {{ store.driverStatsData._sum.allStopsCount }}
@@ -42,26 +47,20 @@
        </span>
      </div>
    </span>
    <b v-else-if="store.driverStatsStatus == Status.Data.Loading">{{
      $t('journal.stats-loading')
    }}</b>
    <b v-else-if="store.driverStatsStatus == Status.Data.Error">
      {{ $t('journal.stats-error ') }}
    </b>
    <b v-else>{{ $t('journal.driver-stats-info') }}</b>
  </div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { useStore } from '../../store/mainStore';
+import { useMainStore } from '../../../store/mainStore';
-import { Status } from '../../typings/common';
+import { Status } from '../../../typings/common';
 export default defineComponent({
  name: 'journal-driver-stats',
  data() {
    return {
-      store: useStore(),
+      store: useMainStore(),
      Status: Status
    };
  }
@@ -69,5 +68,5 @@ export default defineComponent({
 </script>
 <style lang="scss" scoped>
-@import '../../styles/JournalStats.scss';
+@import '../../../styles/JournalStats.scss';
 </style>
@@ -42,7 +42,7 @@ import { defineComponent, PropType } from 'vue';
 import Loading from '../../Global/Loading.vue';
 import AddDataButton from '../../Global/AddDataButton.vue';
 import TimetableHistoryList from './TimetableHistoryList.vue';
-import { useStore } from '../../../store/mainStore';
+import { useMainStore } from '../../../store/mainStore';
 import { Status } from '../../../typings/common';
 import { API } from '../../../typings/api';
@@ -71,7 +71,7 @@ export default defineComponent({
  data() {
    return {
      Status,
-      store: useStore()
+      store: useMainStore()
    };
  }
 });
@@ -28,7 +28,17 @@
        {{ timetable.driverLevel < 2 ? 'L' : `${timetable.driverLevel}` }}
      </strong>
-      <strong>{{ timetable.driverName }}</strong>
+      <strong
        v-if="isDonator(timetable.driverName)"
        class="text--donator"
        :title="$t('donations.driver-message')"
      >
        {{ timetable.driverName }}
      </strong>
      <strong v-else>
        {{ timetable.driverName }}
      </strong>
    </span>
    <span class="general-time">
@@ -63,13 +73,14 @@
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
 import { API } from '../../../typings/api';
 import dateMixin from '../../../mixins/dateMixin';
 import modalTrainMixin from '../../../mixins/modalTrainMixin';
 import styleMixin from '../../../mixins/styleMixin';
-import { API } from '../../../typings/api';
+import donatorMixin from '../../../mixins/donatorMixin';
 export default defineComponent({
-  mixins: [dateMixin, modalTrainMixin, styleMixin],
+  mixins: [dateMixin, modalTrainMixin, styleMixin, donatorMixin],
  props: {
    timetable: {
@@ -100,16 +111,17 @@ export default defineComponent({
  gap: 0.5em;
  margin-bottom: 0.5em;
  @include smallScreen() {
    justify-content: center;
  }
 }
 .info-date {
  margin-right: 0.5em;
 }
 .badges {
  display: flex;
  gap: 0.25em;
 }
 .info-badge {
  padding: 0.05em 0.35em;
  color: black;
@@ -131,7 +143,14 @@ export default defineComponent({
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.25em;
 }
@include smallScreen {
  .item-general {
    justify-content: center;
  }
 }
 </style>
@@ -46,6 +46,8 @@ import TimetableExtra from './TimetableExtra.vue';
 import { API } from '../../../typings/api';
 export default defineComponent({
  components: { TimetableGeneral, TimetableStops, TimetableStatus, TimetableExtra },
  props: {
    timetableHistory: {
      type: Array as PropType<API.TimetableHistory.Response>,
@@ -59,9 +61,7 @@ export default defineComponent({
        showExtraInfo: ref(false)
      }));
    }
-  },
+  }
  methods: {},
  components: { TimetableGeneral, TimetableStops, TimetableStatus, TimetableExtra }
 });
 </script>
@@ -1,12 +1,5 @@
 export namespace Journal {
-  export type DispatcherSearcher = {
+  export type DispatcherSearchKey = 'search-dispatcher' | 'search-station' | 'search-date';
    [key in 'search-dispatcher' | 'search-station' | 'search-date']: string;
  };
  export interface DispatcherSorter {
    id: 'timestampFrom' | 'duration';
    dir: -1 | 1;
  }
  export type TimetableSearchKey =
    | 'search-driver'
@@ -19,11 +12,29 @@ export namespace Journal {
    [key in TimetableSearchKey]: string;
  };
  export type DispatcherSearchType = {
    [key in DispatcherSearchKey]: string;
  };
  export type TimetableSorterKey = 'timetableId' | 'beginDate' | 'distance' | 'total-stops';
  export type DispatcherSorterKey = 'timestampFrom' | 'duration';
  export interface DispatcherSorter {
    id: DispatcherSorterKey;
    dir: -1 | 1;
  }
  export interface TimetableSorter {
    id: TimetableSorterKey;
    dir: 'asc' | 'desc';
  }
  export const enum TimetableFilterId {
    ALL_STATUSES = 'all-statuses',
    ACTIVE = 'active',
    FULFILLED = 'fulfilled',
    ABANDONED = 'abandoned',
-    ALL = 'all',
+    ALL_SPECIALS = 'all-specials',
    TWR = 'twr',
    SKR = 'skr',
    TWR_SKR = 'twr-skr'
@@ -31,19 +42,26 @@ export namespace Journal {
  export enum FilterSection {
    TIMETABLE_STATUS = 'timetable-status',
-    TWRSKR = 'twrskr'
+    SPECIAL = 'special'
  }
  export interface TimetableFilter {
    id: TimetableFilterId;
    filterSection: string;
    isActive: boolean;
    default: boolean;
  }
-  export type TimetableSorterKey = 'timetableId' | 'beginDate' | 'distance' | 'total-stops';
+  export enum StatsTab {
    DRIVER_STATS = 'journal-driver-stats',
    DISPATCHER_STATS = 'journal-dispatcher-stats',
    DAILY_STATS = 'journal-daily-stats'
  }
-  export interface TimetableSorter {
+  export interface StatsButton {
-    id: TimetableSorterKey;
+    tab: StatsTab;
-    dir: 'asc' | 'desc';
+    localeKey: string;
    iconName: string;
    disabled: boolean;
  }
 }
@@ -19,7 +19,9 @@
        <tr v-for="historyItem in historyList" :key="historyItem.id">
          <td>#{{ historyItem.stationHash }}</td>
          <td>
-            <router-link :to="`/journal/dispatchers?dispatcherName=${historyItem.dispatcherName}`">
+            <router-link
              :to="`/journal/dispatchers?search-dispatcher=${historyItem.dispatcherName}`"
            >
              <b>{{ historyItem.dispatcherName }}</b>
            </router-link>
          </td>
@@ -33,6 +35,8 @@
            >
              {{ historyItem.dispatcherLevel >= 2 ? historyItem.dispatcherLevel : 'L' }}
            </b>
            <b v-else>?</b>
          </td>
          <td class="text--primary">
            <b>{{ historyItem.dispatcherRate }}</b>
@@ -66,17 +70,16 @@
 </template>
 <script lang="ts">
 import axios from 'axios';
 import { defineComponent, PropType } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
 import Station from '../../scripts/interfaces/Station';
 import { URLs } from '../../scripts/utils/apiURLs';
 import Loading from '../Global/Loading.vue';
 import styleMixin from '../../mixins/styleMixin';
 import listObserverMixin from '../../mixins/listObserverMixin';
 import { OnlineScenery } from '../../store/typings';
 import { API } from '../../typings/api';
 import { Status } from '../../typings/common';
 import http from '../../http';
 export default defineComponent({
  name: 'SceneryDispatchersHistory',
@@ -84,12 +87,10 @@ export default defineComponent({
  components: { Loading },
  props: {
    station: {
-      type: Object as PropType<Station>,
+      type: Object as PropType<Station>
      required: true
    },
    onlineScenery: {
-      type: Object as PropType<OnlineScenery>,
+      type: Object as PropType<OnlineScenery>
      required: false
    }
  },
@@ -113,12 +114,20 @@ export default defineComponent({
      countFrom = 0,
      countLimit = 30
    ): Promise<API.DispatcherHistory.Response | null> {
      if (!this.station && !this.onlineScenery) {
        this.dataStatus = Status.Data.Loaded;
        return null;
      }
      try {
        this.dataStatus = Status.Data.Loading;
-        const requestString = `${URLs.stacjownikAPI}/api/getDispatchers?stationName=${this.station.name}&countFrom=${countFrom}&countLimit=${countLimit}`;
+        const requestString = `api/getDispatchers?stationName=${
          this.station?.name || this.onlineScenery?.name
        }&countFrom=${countFrom}&countLimit=${countLimit}`;
        const historyAPIData: API.DispatcherHistory.Response = await (
-          await axios.get(requestString)
+          await http.get(requestString)
        ).data;
        this.dataStatus = Status.Data.Loaded;
@@ -130,7 +139,9 @@ export default defineComponent({
      }
    },
    navigateToHistory() {
-      this.$router.push(`/journal/dispatchers?sceneryName=${this.station.name}`);
+      this.$router.push(
        `/journal/dispatchers?search-station=${this.station?.name || this.onlineScenery?.name}`
      );
    }
  }
 });
@@ -1,11 +1,11 @@
 <template>
  <section class="info-header">
-    <a class="scenery-name" :href="station.generalInfo?.url" target="_blank">
+    <a class="scenery-name" :href="station?.generalInfo?.url" target="_blank">
-      {{ station.name }}
+      {{ stationName.replace(/_/g, ' ') }}
    </a>
-    <div class="scenery-abbrev">
+    <div class="scenery-abbrev" v-if="station?.generalInfo?.abbr">
-      {{ $t('scenery.abbrev') }} <b>{{ station.generalInfo?.abbr }}</b>
+      {{ $t('scenery.abbrev') }} <b>{{ station.generalInfo.abbr }}</b>
    </div>
    <div class="scenery-hash" v-if="onlineScenery?.hash">#{{ onlineScenery.hash }}</div>
@@ -20,13 +20,16 @@ import { OnlineScenery } from '../../store/typings';
 export default defineComponent({
  props: {
    station: {
-      type: Object as PropType<Station>,
+      type: Object as PropType<Station>
    },
    stationName: {
      type: String,
      required: true
    },
    onlineScenery: {
-      type: Object as PropType<OnlineScenery>,
+      type: Object as PropType<OnlineScenery>
      required: false
    }
  }
 });
@@ -58,4 +61,3 @@ export default defineComponent({
  font-size: 1.2em;
 }
 </style>
 ../../store/storeTypes
@@ -1,10 +1,10 @@
 <template>
  <div class="scenery-info">
    <section>
-      <div class="scenery-info-general" v-if="station.generalInfo">
+      <div class="scenery-info-general">
        <SceneryInfoIcons :station="station" />
-        <div class="scenery-general-list">
+        <div class="scenery-general-list" v-if="station?.generalInfo">
          <span>
            <b>{{ $t('availability.title') }}:</b>
            {{ $t(`availability.${station.generalInfo.availability}`) }}
@@ -46,11 +46,11 @@
          </span>
        </div>
-        <SceneryInfoRoutes :station="station" />
+        <SceneryInfoRoutes v-if="station" :station="station" />
        <div
          class="scenery-authors"
-          v-if="station.generalInfo.authors && station.generalInfo.authors.length > 0"
+          v-if="station?.generalInfo?.authors && station.generalInfo.authors.length > 0"
        >
          <b>
            {{
@@ -102,13 +102,11 @@ export default defineComponent({
  },
  props: {
    station: {
-      type: Object as PropType<Station>,
+      type: Object as PropType<Station>
      required: true
    },
    onlineScenery: {
-      type: Object as PropType<OnlineScenery>,
+      type: Object as PropType<OnlineScenery>
      required: false
    }
  }
 });
@@ -10,9 +10,16 @@
      <router-link
        class="dispatcher_name"
-        :to="`/journal/dispatchers?dispatcherName=${onlineScenery.dispatcherName}`"
+        :to="`/journal/dispatchers?search-dispatcher=${onlineScenery.dispatcherName}`"
      >
-        {{ onlineScenery.dispatcherName }}
+        <span
          class="text--donator"
          v-if="isDonator(onlineScenery.dispatcherName)"
          :title="$t('donations.dispatcher-message')"
        >
          {{ onlineScenery.dispatcherName }}
        </span>
        <span v-else>{{ onlineScenery.dispatcherName }}</span>
      </router-link>
      <span class="dispatcher_likes text--primary">
@@ -36,9 +43,10 @@ import routerMixin from '../../../mixins/routerMixin';
 import styleMixin from '../../../mixins/styleMixin';
 import StationStatusBadge from '../../Global/StationStatusBadge.vue';
 import { OnlineScenery } from '../../../store/typings';
 import donatorMixin from '../../../mixins/donatorMixin';
 export default defineComponent({
-  mixins: [styleMixin, dateMixin, routerMixin],
+  mixins: [styleMixin, dateMixin, routerMixin, donatorMixin],
  props: {
    onlineScenery: {
      type: Object as PropType<OnlineScenery>,
@@ -1,24 +1,33 @@
 <template>
  <section class="info-icons">
-    <span
+    <span v-if="!station || !station.generalInfo">
-      v-if="station.generalInfo && station.generalInfo.reqLevel >= 0"
+      <img
-      class="scenery-icon icon-info level"
+        class="icon-info"
-      :style="calculateExpStyle(station.generalInfo.reqLevel)"
+        src="/images/icon-unknown.svg"
-    >
+        alt="icon-unknown"
-      {{ station.generalInfo.reqLevel >= 2 ? station.generalInfo.reqLevel : 'L' }}
+        :title="$t('desc.unknown')"
      />
    </span>
    <span
-      v-if="station.generalInfo"
+      v-if="station?.generalInfo && station?.generalInfo.reqLevel >= 0"
      class="scenery-icon icon-info level"
      :style="calculateExpStyle(station?.generalInfo.reqLevel)"
    >
      {{ station?.generalInfo.reqLevel >= 2 ? station?.generalInfo.reqLevel : 'L' }}
    </span>
    <span
      v-if="station?.generalInfo"
      class="scenery-icon icon-info"
-      :class="station.generalInfo.controlType.replace('+', '-')"
+      :class="station?.generalInfo.controlType.replace('+', '-')"
-      :title="$t('desc.control-type') + $t(`controls.${station.generalInfo.controlType}`)"
+      :title="$t('desc.control-type') + $t(`controls.${station?.generalInfo.controlType}`)"
-      v-html="getControlTypeAbbrev(station.generalInfo.controlType)"
+      v-html="getControlTypeAbbrev(station?.generalInfo.controlType)"
    >
    </span>
    <img
-      v-if="station.generalInfo?.SUP"
+      v-if="station?.generalInfo?.SUP"
      class="icon-info"
      src="/images/icon-SUP.svg"
      alt="SUP (RASP-UZK)"
@@ -26,7 +35,7 @@
    />
    <img
-      v-if="station.generalInfo?.signalType"
+      v-if="station?.generalInfo?.signalType"
      class="icon-info"
      :src="`/images/icon-${station.generalInfo.signalType}.svg`"
      :alt="station.generalInfo.signalType"
@@ -34,7 +43,7 @@
    />
    <img
-      v-if="station.generalInfo?.availability == 'nonPublic'"
+      v-if="station?.generalInfo?.availability == 'nonPublic'"
      class="icon-info"
      src="/images/icon-lock.svg"
      alt="Non-public scenery"
@@ -42,7 +51,7 @@
    />
    <img
-      v-if="station.generalInfo?.availability == 'unavailable'"
+      v-if="station?.generalInfo?.availability == 'unavailable'"
      class="icon-info"
      src="/images/icon-unavailable.svg"
      alt="Unavailable scenery"
@@ -50,7 +59,7 @@
    />
    <img
-      v-if="station.generalInfo?.availability == 'abandoned'"
+      v-if="station?.generalInfo?.availability == 'abandoned'"
      class="icon-info"
      src="/images/icon-abandoned.svg"
      alt="Abandoned scenery"
@@ -58,20 +67,12 @@
    />
    <img
-      v-if="station.generalInfo?.lines"
+      v-if="station?.generalInfo?.lines"
      class="icon-info"
      src="/images/icon-real.svg"
      alt="real scenery"
      :title="`${$t('desc.real')} ${station.generalInfo.lines}`"
    />
    <img
      v-if="!station.generalInfo"
      class="icon-info"
      src="/images/icon-unknown.svg"
      alt="icon-unknown"
      :title="$t('desc.unknown')"
    />
  </section>
 </template>
@@ -85,8 +86,7 @@ export default defineComponent({
  mixins: [stationInfoMixin, styleMixin],
  props: {
    station: {
-      type: Object as PropType<Station>,
+      type: Object as PropType<Station>
      required: true
    }
  }
 });
@@ -1,41 +1,49 @@
 <template>
  <section class="info-routes" v-if="station.generalInfo">
-    <div class="routes one-way" v-if="station.generalInfo.routes.oneWay.length > 0">
+    <div class="routes one-way" v-if="filteredOneWayRoutes.length > 0">
      <b>{{ $t('scenery.one-way-routes') }}</b>
      <ul class="routes-list">
        <li
-          v-for="route in station.generalInfo.routes.oneWay"
+          v-for="route in filteredOneWayRoutes"
-          :key="route.name"
+          :key="route.routeName"
-          @click="setActiveShowLength(route.name)"
+          @click="setActiveShowLength(route.routeName)"
        >
-          <span :class="{ 'no-catenary': !route.catenary, internal: route.isInternal }">
+          <span :class="{ 'no-catenary': !route.isElectric, internal: route.isInternal }">
-            {{ route.name }}</span
+            {{ route.routeName }}</span
          >
-          <span v-if="route.speed" class="speed">
+          <span v-if="route.routeSpeed" class="speed">
-            {{ activeShowLength.includes(route.name) ? route.length + 'm' : route.speed }}
+            {{
              activeShowLength.includes(route.routeName)
                ? route.routeLength + 'm'
                : route.routeSpeed
            }}
          </span>
-          <span v-if="route.SBL" class="sbl">SBL</span>
+          <span v-if="route.isRouteSBL" class="sbl">SBL</span>
        </li>
      </ul>
    </div>
-    <div class="routes two-way" v-if="station.generalInfo.routes.twoWay.length > 0">
+    <div class="routes two-way" v-if="filteredTwoWayRoutes.length > 0">
      <b>{{ $t('scenery.two-way-routes') }}</b>
      <ul class="routes-list">
        <li
-          v-for="route in station.generalInfo.routes.twoWay"
+          v-for="route in filteredTwoWayRoutes"
-          :key="route.name"
+          :key="route.routeName"
-          @click="setActiveShowLength(route.name)"
+          @click="setActiveShowLength(route.routeName)"
        >
-          <span :class="{ 'no-catenary': !route.catenary, internal: route.isInternal }">{{
+          <span :class="{ 'no-catenary': !route.isElectric, internal: route.isInternal }">{{
-            route.name
+            route.routeName
          }}</span>
-          <span v-if="route.speed" class="speed">
+          <span v-if="route.routeSpeed" class="speed">
-            {{ activeShowLength.includes(route.name) ? route.length + 'm' : route.speed }}
+            {{
              activeShowLength.includes(route.routeName)
                ? route.routeLength + 'm'
                : route.routeSpeed
            }}
          </span>
-          <span v-if="route.SBL" class="sbl">SBL</span>
+          <span v-if="route.isRouteSBL" class="sbl">SBL</span>
        </li>
      </ul>
    </div>
@@ -45,6 +53,9 @@
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
 import Station from '../../../scripts/interfaces/Station';
 import { StationRoutesInfo } from '../../../store/typings';
 const routeFilter = (route: StationRoutesInfo) => !route.hidden;
 export default defineComponent({
  props: {
@@ -66,6 +77,16 @@ export default defineComponent({
    return {
      activeShowLength: [] as string[]
    };
  },
  computed: {
    filteredOneWayRoutes() {
      return this.station.generalInfo?.routes.oneWay.filter(routeFilter) || [];
    },
    filteredTwoWayRoutes() {
      return this.station.generalInfo?.routes.twoWay.filter(routeFilter) || [];
    }
  }
 });
 </script>
@@ -13,14 +13,14 @@
          </span>
        </span>
-        <span class="header_links">
+        <span class="header_links" v-if="station">
-          <a
+          <!-- <a
            :href="`https://pragotron-td2.web.app/board?name=${station.name}`"
            target="_blank"
            :title="$t('scenery.pragotron-link')"
          >
            <img src="/images/icon-pragotron.svg" alt="icon-pragotron" />
-          </a>
+          </a> -->
          <a :href="tabliceZbiorczeHref" target="_blank" :title="$t('scenery.tablice-link')">
            <img src="/images/icon-tablice.ico" alt="icon-tablice" />
@@ -48,7 +48,7 @@
      <transition-group name="list-anim">
        <div
          style="padding-bottom: 5em"
-          v-if="store.dataStatuses.trains == 0 && computedScheduledTrains.length == 0"
+          v-if="apiStore.dataStatuses.connection == 0 && computedScheduledTrains.length == 0"
          key="list-loading"
        >
          <Loading />
@@ -187,10 +187,11 @@ import Loading from '../Global/Loading.vue';
 import dateMixin from '../../mixins/dateMixin';
 import routerMixin from '../../mixins/routerMixin';
 import Station from '../../scripts/interfaces/Station';
-import { useStore } from '../../store/mainStore';
+import { useMainStore } from '../../store/mainStore';
 import modalTrainMixin from '../../mixins/modalTrainMixin';
 import ScheduledTrainStatus from './ScheduledTrainStatus.vue';
 import { OnlineScenery } from '../../store/typings';
 import { useApiStore } from '../../store/apiStore';
 export default defineComponent({
  name: 'SceneryTimetable',
@@ -201,12 +202,10 @@ export default defineComponent({
  props: {
    station: {
-      type: Object as PropType<Station>,
+      type: Object as PropType<Station>
      required: true
    },
    onlineScenery: {
-      type: Object as PropType<OnlineScenery>,
+      type: Object as PropType<OnlineScenery>
      required: false
    }
  },
@@ -226,7 +225,8 @@ export default defineComponent({
    const route = useRoute();
    const currentURL = computed(() => `${location.origin}${route.fullPath}`);
-    const store = useStore();
+    const apiStore = useApiStore();
    const mainStore = useMainStore();
    const chosenCheckpoint = ref(
      props.station?.generalInfo?.checkpoints?.length == 0
@@ -237,25 +237,29 @@ export default defineComponent({
    return {
      currentURL,
      chosenCheckpoint,
-      store
+      apiStore,
      mainStore
    };
  },
  computed: {
    tabliceZbiorczeHref() {
-      let url = `https://tablice-td2.web.app/?station=${this.station.name}`;
+      let url = `https://tablice-td2.web.app/?station=${this.station!.name}`;
      if (this.chosenCheckpoint) url += `&checkpoint=${this.chosenCheckpoint}`;
      return url;
    },
    computedScheduledTrains() {
      if (!this.station) return [];
      return (
        this.onlineScenery?.scheduledTrains
          ?.filter(
            (train) =>
              train.checkpointName.toLocaleLowerCase() ==
-              (this.chosenCheckpoint || this.station.name).toLocaleLowerCase()
+                (this.chosenCheckpoint || this.station!.name).toLocaleLowerCase() &&
              train.region == this.mainStore.region.id
          )
          .sort((a, b) => {
            if (a.stopStatusID > b.stopStatusID) return 1;
@@ -272,6 +276,8 @@ export default defineComponent({
  methods: {
    loadSelectedOption() {
      if (!this.station) return;
      this.chosenCheckpoint =
        this.station.generalInfo?.checkpoints[0]?.checkpointName || this.station.name;
    },
@@ -28,7 +28,7 @@
      <tbody>
        <tr v-for="historyItem in historyList" :key="historyItem.id">
          <td>
-            <router-link :to="`/journal/timetables?timetableId=${historyItem.id}`">
+            <router-link :to="`/journal/timetables?search-train=%23${historyItem.id}`">
              #{{ historyItem.id }}
            </router-link>
          </td>
@@ -37,11 +37,16 @@
            {{ historyItem.trainNo }}
          </td>
          <td>{{ historyItem.route.replace('|', ' -> ') }}</td>
-          <td>{{ historyItem.driverName }}</td>
+          <td>
            <router-link :to="`/journal/timetables?search-driver=${historyItem.driverName}`">
              {{ historyItem.driverName }}
            </router-link>
          </td>
          <td>
            <router-link
              v-if="historyItem.authorName"
-              :to="`/journal/timetables?authorName=${historyItem.authorName}`"
+              :to="`/journal/timetables?search-dispatcher=${historyItem.authorName}`"
              >{{ historyItem.authorName }}
            </router-link>
            <i v-else>{{ $t('scenery.timetable-author-unknown') }}</i>
@@ -63,29 +68,26 @@
 </template>
 <script lang="ts">
 import axios from 'axios';
 import { defineComponent, PropType } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
 import Station from '../../scripts/interfaces/Station';
 import { URLs } from '../../scripts/utils/apiURLs';
 import Loading from '../Global/Loading.vue';
 import listObserverMixin from '../../mixins/listObserverMixin';
 import { OnlineScenery } from '../../store/typings';
 import { API } from '../../typings/api';
 import { Status } from '../../typings/common';
 import http from '../../http';
 export default defineComponent({
  name: 'SceneryTimetablesHistory',
  mixins: [dateMixin, listObserverMixin],
  props: {
    station: {
-      type: Object as PropType<Station>,
+      type: Object as PropType<Station>
      required: true
    },
    onlineScenery: {
-      type: Object as PropType<OnlineScenery>,
+      type: Object as PropType<OnlineScenery>
      required: false
    }
  },
@@ -102,11 +104,20 @@ export default defineComponent({
  },
  methods: {
-    async fetchAPIData(countFrom = 0, countLimit = 15) {
+    async fetchAPIData() {
-      try {
+      if (!this.station && !this.onlineScenery) {
-        const requestString = `${URLs.stacjownikAPI}/api/getTimetables?issuedFrom=${this.station.name}&countFrom=${countFrom}&countLimit=${countLimit}`;
+        this.dataStatus = Status.Data.Loaded;
        return;
      }
-        const response: API.TimetableHistory.Response = await (await axios.get(requestString)).data;
+      try {
        const response: API.TimetableHistory.Response = await (
          await http.get('api/getTimetables', {
            params: {
              issuedFrom: this.station?.name || this.onlineScenery?.name
            }
          })
        ).data;
        this.historyList = response;
@@ -117,7 +128,12 @@ export default defineComponent({
    },
    navigateToHistory() {
-      this.$router.push(`/journal/timetables?issuedFrom=${this.station.name}`);
+      this.$router.push({
        path: '/journal/timetables',
        query: {
          'search-issuedFrom': this.station?.name || this.onlineScenery?.name
        }
      });
    }
  },
  components: { Loading }
@@ -60,8 +60,9 @@
            </div>
          </section>
-          <section class="card_timestamp" style="text-align: center">
+          <section class="card_timestamp">
-            <div>{{ $t('filters.minimum-hours-title') }}</div>
+            <h3 class="section-header">{{ $t('filters.minimum-hours-title') }}</h3>
            <span class="clock">
              <button class="btn--action" @click="subHour">-</button>
              <span>{{
@@ -75,16 +76,27 @@
            </span>
          </section>
          <datalist id="authors">
            <option v-for="(author, i) in authors" :key="i" :value="author"></option>
          </datalist>
          <section class="card_authors-search">
-            <input
+            <h3 class="section-header">{{ $t('filters.authors-search') }}</h3>
-              type="text"
+
-              :placeholder="$t('filters.authors-search')"
+            <form action="javascript:void(0);" @submit="handleAuthorsInput">
-              name="authors"
+              <input
-              v-model="authorsInputValue"
+                type="text"
-              @input="handleAuthorsInput"
+                id="author"
-              @focus="preventKeyDown = true"
+                list="authors"
-              @blur="preventKeyDown = false"
+                name="authors"
-            />
+                :placeholder="$t('filters.authors-placeholder')"
                v-model="authorsInputValue"
                @focus="preventKeyDown = true"
                @blur="preventKeyDown = false"
              />
              <button class="btn--action">{{ $t('filters.authors-button-title') }}</button>
            </form>
          </section>
          <section class="card_sliders">
@@ -139,7 +151,7 @@ import { defineComponent, inject } from 'vue';
 import keyMixin from '../../mixins/keyMixin';
 import routerMixin from '../../mixins/routerMixin';
 import { useStationFiltersStore } from '../../store/stationFiltersStore';
-import { useStore } from '../../store/mainStore';
+import { useMainStore } from '../../store/mainStore';
 import FilterOption from './FilterOption.vue';
 import StorageManager from '../../managers/storageManager';
@@ -163,7 +175,7 @@ export default defineComponent({
  setup() {
    const isVisible = inject('isFilterCardVisible');
-    const store = useStore();
+    const store = useMainStore();
    const filterStore = useStationFiltersStore();
    return {
@@ -196,6 +208,19 @@ export default defineComponent({
    currentOptionsActive() {
      return true;
    },
    authors() {
      return this.store.stationList
        .reduce((acc, station) => {
          station.generalInfo?.authors?.forEach((author) => {
            if (author.trim() != '' && !acc.includes(author.toLocaleLowerCase()))
              acc.push(author.toLocaleLowerCase());
          });
          return acc;
        }, [] as string[])
        .sort((a, b) => a.localeCompare(b));
    }
  },
@@ -230,12 +255,12 @@ export default defineComponent({
      if (this.saveOptions) StorageManager.setStringValue(target.name, target.value);
    },
-    handleAuthorsInput(e: Event) {
+    handleAuthorsInput() {
-      clearTimeout(this.delayInputTimer);
+      console.log(this.authorsInputValue);
-      this.delayInputTimer = window.setTimeout(() => {
+      this.filterStore.changeFilterValue('authors', this.authorsInputValue);
-        this.handleInput(e);
+
-      }, 400);
+      if (this.saveOptions) StorageManager.setStringValue('authors', this.authorsInputValue);
    },
    changeNumericFilterValue(name: string, value: number, saveToStorage = false) {
@@ -297,136 +322,139 @@ export default defineComponent({
@import '../../styles/card.scss';
@import '../../styles/animations.scss';
 h3.section-header {
  text-align: center;
  margin: 0.5em 0;
 }
 .card {
  display: grid;
  grid-template-rows: 1fr auto;
 }
-  &_info {
+.card_info {
-    background-color: #111;
+  background-color: #111;
-    padding: 0.5em;
+  padding: 0.5em;
 }
 .card_controls {
  display: flex;
  gap: 0.5em;
  input {
    border-radius: 0.5em 0.5em 0 0;
    height: 100%;
  }
 }
 .card_content {
  padding: 1em 0.5em;
  display: flex;
  flex-direction: column;
  gap: 1em;
  overflow: auto;
 }
 .card_title {
  font-size: 2em;
  font-weight: 700;
  color: $accentCol;
  text-align: center;
 }
 .card_regions {
  display: flex;
  justify-content: center;
  label > input {
    display: none;
  }
-  &_controls {
+  label > span {
    padding: 0.25em 0.5em;
    margin: 0 0.25em;
    cursor: pointer;
    background-color: gray;
    &.checked {
      background-color: seagreen;
    }
  }
 }
 .card_timestamp {
  display: flex;
  flex-direction: column;
  justify-content: center;
  .clock {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    text-align: center;
    span {
      min-width: 120px;
      font-weight: bold;
      color: $accentCol;
    }
    button {
      padding: 0.2em 0.6em;
    }
  }
 }
 .card_authors-search {
  margin: 1em 0;
  form {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5em;
    width: 100%;
    margin-top: 1em;
  }
  input {
    width: 70%;
    max-width: 400px;
    padding: 0.5em;
    outline: 1px solid white;
  }
 }
 .card_actions {
  width: 100%;
  padding: 0.5em;
  .filter-option {
    max-width: 50%;
    margin: 0 auto;
  }
  .action-buttons {
    display: flex;
    gap: 0.5em;
    input {
      border-radius: 0.5em 0.5em 0 0;
      height: 100%;
    }
  }
  &_content {
    padding: 1em 0.5em;
    display: flex;
    flex-direction: column;
    gap: 1em;
    overflow: auto;
  }
  &_title {
    font-size: 2em;
    font-weight: 700;
    color: $accentCol;
    text-align: center;
  }
  &_regions {
    display: flex;
    justify-content: center;
    label > input {
      display: none;
    }
    label > span {
      padding: 0.25em 0.5em;
      margin: 0 0.25em;
      cursor: pointer;
      background-color: gray;
      &.checked {
        background-color: seagreen;
      }
    }
  }
  &_timestamp {
    display: flex;
    flex-direction: column;
    justify-content: center;
    .clock {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2em;
      margin-top: 0.5em;
      span {
        min-width: 120px;
        font-weight: bold;
        color: $accentCol;
      }
      button {
        padding: 0.2em 0.6em;
      }
    }
  }
  &_modes {
    display: flex;
    justify-content: center;
    .option {
      margin: 0 1em;
    }
  }
  &_authors-search {
    display: inline-block;
    margin: 0 auto;
    width: 60%;
    min-width: 240px;
    input {
      width: 100%;
      padding: 0.5em;
      border: 1px solid white;
    }
  }
  &_actions {
    width: 100%;
    padding: 0.5em;
-    .filter-option {
+    margin-top: 0.5em;
-      max-width: 50%;
+
    button {
      width: 50%;
      margin: 0 auto;
-    }
+      padding: 0.5em;
-    .action-buttons {
+      &[data-selected='true'] {
-      display: flex;
+        background-color: forestgreen;
      gap: 0.5em;
      width: 100%;
      margin-top: 0.5em;
      button {
        width: 50%;
        margin: 0 auto;
        padding: 0.5em;
        &[data-selected='true'] {
          background-color: forestgreen;
        }
      }
    }
  }
@@ -447,7 +475,7 @@ export default defineComponent({
 .section-inputs {
  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(3, 1fr);
  gap: 0.5em;
  margin: 1em 0;
 }
@@ -1,279 +1,285 @@
 <template>
  <section class="station_table">
-    <table>
+    <div class="table_wrapper">
-      <thead>
+      <table>
-        <tr>
+        <thead>
-          <th
+          <tr>
-            v-for="headerName in headIds"
+            <th
-            :key="headerName"
+              v-for="headerName in headIds"
-            @click="changeSorter(headerName)"
+              :key="headerName"
-            class="header-text"
+              @click="changeSorter(headerName)"
              class="header-text"
            >
              <span class="header_wrapper">
                <div v-html="$t(`sceneries.${headerName}`)"></div>
                <img
                  class="sort-icon"
                  v-if="sorterActive.headerName == headerName"
                  :src="`/images/icon-arrow-${sorterActive.dir == 1 ? 'asc' : 'desc'}.svg`"
                  alt="sort icon"
                />
              </span>
            </th>
            <th
              v-for="headerName in headIconsIds"
              :key="headerName"
              @click="changeSorter(headerName)"
              class="header-image"
            >
              <span class="header_wrapper">
                <img
                  :src="`/images/icon-${headerName}.svg`"
                  :alt="headerName"
                  :title="$t(`sceneries.${headerName}`)"
                />
                <img
                  class="sort-icon"
                  v-if="sorterActive.headerName == headerName"
                  :src="`/images/icon-arrow-${sorterActive.dir == 1 ? 'asc' : 'desc'}.svg`"
                  alt="sort icon"
                />
              </span>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr
            class="station"
            :class="{ 'last-selected': lastSelectedStationName == station.name }"
            v-for="(station, i) in stations"
            :key="i + station.name"
            @click.left="setScenery(station.name)"
            @click.right="openForumSite($event, station.generalInfo?.url)"
            @keydown.enter="setScenery(station.name)"
            @keydown.space="openForumSite($event, station.generalInfo?.url)"
            tabindex="0"
          >
-            <span class="header_wrapper">
+            <td class="station_name" :class="station.generalInfo?.availability">
-              <div v-html="$t(`sceneries.${headerName}`)"></div>
+              <b v-if="station.generalInfo?.project" style="color: salmon">{{
                station.generalInfo.project
              }}</b>
              {{ station.name }}
            </td>
-              <img
+            <td class="station_level">
-                class="sort-icon"
+              <span v-if="station.generalInfo">
-                v-if="sorterActive.headerName == headerName"
+                <span
-                :src="`/images/icon-arrow-${sorterActive.dir == 1 ? 'asc' : 'desc'}.svg`"
+                  v-if="
-                alt="sort icon"
+                    station.generalInfo.reqLevel > -1 &&
                    station.generalInfo.availability != 'nonPublic' &&
                    station.generalInfo.availability != 'unavailable'
                  "
                  :style="calculateExpStyle(station.generalInfo.reqLevel)"
                >
                  {{ station.generalInfo.reqLevel >= 2 ? station.generalInfo.reqLevel : 'L' }}
                </span>
                <span v-else-if="station.generalInfo.availability == 'abandoned'">
                  <img
                    src="/images/icon-abandoned.svg"
                    alt="non-public"
                    :title="$t('desc.abandoned')"
                  />
                </span>
                <span v-else-if="station.generalInfo.availability == 'nonPublic'">
                  <img
                    src="/images/icon-lock.svg"
                    alt="non-public"
                    :title="$t('desc.non-public')"
                  />
                </span>
                <span v-else>
                  <img
                    src="/images/icon-unavailable.svg"
                    alt="unavailable"
                    :title="$t('desc.unavailable')"
                  />
                </span>
              </span>
              <span v-else> ? </span>
            </td>
            <td class="station_status">
              <StationStatusBadge
                :isOnline="station.onlineInfo ? true : false"
                :dispatcherStatus="station.onlineInfo?.dispatcherStatus"
              />
-            </span>
+            </td>
          </th>
-          <th
+            <td class="station_dispatcher-name">
-            v-for="headerName in headIconsIds"
+              <span v-if="station.onlineInfo?.dispatcherName">
-            :key="headerName"
+                <b
-            @click="changeSorter(headerName)"
+                  v-if="apiStore.donatorsData.includes(station.onlineInfo.dispatcherName)"
-            class="header-image"
+                  :title="$t('donations.dispatcher-message')"
-          >
+                  @click.stop="openDonationModal"
-            <span class="header_wrapper">
+                >
-              <img
+                  <img src="/images/icon-diamond.svg" alt="" />
-                :src="`/images/icon-${headerName}.svg`"
+                  {{ station.onlineInfo.dispatcherName }}
-                :alt="headerName"
+                </b>
                :title="$t(`sceneries.${headerName}`)"
              />
-              <img
+                <div v-else>
-                class="sort-icon"
+                  {{ station.onlineInfo.dispatcherName }}
-                v-if="sorterActive.headerName == headerName"
+                </div>
-                :src="`/images/icon-arrow-${sorterActive.dir == 1 ? 'asc' : 'desc'}.svg`"
+              </span>
-                alt="sort icon"
+            </td>
              />
            </span>
          </th>
        </tr>
      </thead>
-      <tbody>
+            <td class="station_dispatcher-exp">
-        <tr
+              <span
-          class="station"
+                v-if="station.onlineInfo"
-          :class="{ 'last-selected': lastSelectedStationName == station.name }"
+                :style="
-          v-for="(station, i) in stations"
+                  calculateExpStyle(
-          :key="i + station.name"
+                    station.onlineInfo.dispatcherExp,
-          @click.left="setScenery(station.name)"
+                    station.onlineInfo.dispatcherIsSupporter
-          @click.right="openForumSite($event, station.generalInfo?.url)"
+                  )
-          @keydown.enter="setScenery(station.name)"
+                "
-          @keydown.space="openForumSite($event, station.generalInfo?.url)"
+              >
-          tabindex="0"
+                {{ station.onlineInfo.dispatcherExp < 2 ? 'L' : station.onlineInfo.dispatcherExp }}
-        >
+              </span>
-          <td class="station_name" :class="station.generalInfo?.availability">
+            </td>
            <b v-if="station.generalInfo?.project" style="color: salmon">{{
              station.generalInfo.project
            }}</b>
            {{ station.name }}
          </td>
-          <td class="station_level">
+            <td class="station_tracks twoway">
            <span v-if="station.generalInfo">
              <span
                v-if="
-                  station.generalInfo.reqLevel > -1 &&
+                  station.generalInfo &&
-                  station.generalInfo.availability != 'nonPublic' &&
+                  station.generalInfo.routes.twoWayCatenaryRouteNames.length > 0
                  station.generalInfo.availability != 'unavailable'
                "
-                :style="calculateExpStyle(station.generalInfo.reqLevel)"
+                class="track catenary"
                :title="`Liczba zelektryfikowanych szlaków dwutorowych: ${station.generalInfo.routes.twoWayCatenaryRouteNames.length}`"
              >
-                {{ station.generalInfo.reqLevel >= 2 ? station.generalInfo.reqLevel : 'L' }}
+                {{ station.generalInfo.routes.twoWayCatenaryRouteNames.length }}
              </span>
-              <span v-else-if="station.generalInfo.availability == 'abandoned'">
+              <span
                v-if="
                  station.generalInfo &&
                  station.generalInfo.routes.twoWayNoCatenaryRouteNames.length > 0
                "
                class="track no-catenary"
                :title="`Liczba niezelektryfikowanych szlaków dwutorowych: ${station.generalInfo.routes.twoWayNoCatenaryRouteNames.length}`"
              >
                {{ station.generalInfo.routes.twoWayNoCatenaryRouteNames.length }}
              </span>
              <span class="separator"></span>
              <span
                v-if="
                  station.generalInfo &&
                  station.generalInfo.routes.oneWayCatenaryRouteNames.length > 0
                "
                class="track catenary"
                :title="`Liczba zelektryfikowanych szlaków jednotorowych: ${station.generalInfo.routes.oneWayCatenaryRouteNames.length}`"
              >
                {{ station.generalInfo.routes.oneWayCatenaryRouteNames.length }}
              </span>
              <span
                v-if="
                  station.generalInfo &&
                  station.generalInfo.routes.oneWayNoCatenaryRouteNames.length > 0
                "
                class="track no-catenary"
                :title="`Liczba niezelektryfikowanych szlaków jednotorowych: ${station.generalInfo.routes.oneWayNoCatenaryRouteNames.length}`"
              >
                {{ station.generalInfo.routes.oneWayNoCatenaryRouteNames.length }}
              </span>
            </td>
            <td class="station_info" v-if="station.generalInfo">
              <span
                class="scenery-icon icon-info"
                :class="station.generalInfo.controlType.replace('+', '-')"
                :title="$t('desc.control-type') + $t(`controls.${station.generalInfo.controlType}`)"
                v-html="getControlTypeAbbrev(station.generalInfo.controlType)"
              >
              </span>
              <span>
                <img
-                  src="/images/icon-abandoned.svg"
+                  class="icon-info"
-                  alt="non-public"
+                  v-if="station.generalInfo.SUP"
-                  :title="$t('desc.abandoned')"
+                  src="/images/icon-SUP.svg"
                  alt="SUP (RASP-UZK)"
                  :title="$t('desc.SUP')"
                />
              </span>
-              <span v-else-if="station.generalInfo.availability == 'nonPublic'">
+              <span>
                <img src="/images/icon-lock.svg" alt="non-public" :title="$t('desc.non-public')" />
              </span>
              <span v-else>
                <img
-                  src="/images/icon-unavailable.svg"
+                  class="icon-info"
-                  alt="unavailable"
+                  v-if="station.generalInfo.signalType"
-                  :title="$t('desc.unavailable')"
+                  :src="`/images/icon-${station.generalInfo.signalType}.svg`"
                  :alt="station.generalInfo.signalType"
                  :title="$t('desc.signals-type') + $t(`signals.${station.generalInfo.signalType}`)"
                />
              </span>
            </span>
-            <span v-else> ? </span>
+              <span>
-          </td>
+                <img
                  class="icon-info"
                  v-if="station.generalInfo && station.generalInfo.routes.sblRouteNames.length > 0"
                  src="/images/icon-SBL.svg"
                  alt="SBL"
                  :title="$t('desc.SBL') + `${station.generalInfo.routes.sblRouteNames.join(',')}`"
                />
              </span>
            </td>
-          <td class="station_status">
+            <td class="station_info" v-else>
            <StationStatusBadge
              :isOnline="station.onlineInfo ? true : false"
              :dispatcherStatus="station.onlineInfo?.dispatcherStatus"
            />
          </td>
          <td class="station_dispatcher-name">
            <span v-if="station.onlineInfo?.dispatcherName">
              <b
                v-if="store.donatorsData.includes(station.onlineInfo.dispatcherName)"
                title="Dyżurny wspierający projekt Stacjownika!"
                @click.stop="openDonationModal"
              >
                <img src="/images/icon-diamond.svg" alt="" />
                {{ station.onlineInfo.dispatcherName }}
              </b>
              <div v-else>
                {{ station.onlineInfo.dispatcherName }}
              </div>
            </span>
          </td>
          <td class="station_dispatcher-exp">
            <span
              v-if="station.onlineInfo"
              :style="
                calculateExpStyle(
                  station.onlineInfo.dispatcherExp,
                  station.onlineInfo.dispatcherIsSupporter
                )
              "
            >
              {{ station.onlineInfo.dispatcherExp < 2 ? 'L' : station.onlineInfo.dispatcherExp }}
            </span>
          </td>
          <td class="station_tracks twoway">
            <span
              v-if="
                station.generalInfo &&
                station.generalInfo.routes.twoWayCatenaryRouteNames.length > 0
              "
              class="track catenary"
              :title="`Liczba zelektryfikowanych szlaków dwutorowych: ${station.generalInfo.routes.twoWayCatenaryRouteNames.length}`"
            >
              {{ station.generalInfo.routes.twoWayCatenaryRouteNames.length }}
            </span>
            <span
              v-if="
                station.generalInfo &&
                station.generalInfo.routes.twoWayNoCatenaryRouteNames.length > 0
              "
              class="track no-catenary"
              :title="`Liczba niezelektryfikowanych szlaków dwutorowych: ${station.generalInfo.routes.twoWayNoCatenaryRouteNames.length}`"
            >
              {{ station.generalInfo.routes.twoWayNoCatenaryRouteNames.length }}
            </span>
            <span class="separator"></span>
            <span
              v-if="
                station.generalInfo &&
                station.generalInfo.routes.oneWayCatenaryRouteNames.length > 0
              "
              class="track catenary"
              :title="`Liczba zelektryfikowanych szlaków jednotorowych: ${station.generalInfo.routes.oneWayCatenaryRouteNames.length}`"
            >
              {{ station.generalInfo.routes.oneWayCatenaryRouteNames.length }}
            </span>
            <span
              v-if="
                station.generalInfo &&
                station.generalInfo.routes.oneWayNoCatenaryRouteNames.length > 0
              "
              class="track no-catenary"
              :title="`Liczba niezelektryfikowanych szlaków jednotorowych: ${station.generalInfo.routes.oneWayNoCatenaryRouteNames.length}`"
            >
              {{ station.generalInfo.routes.oneWayNoCatenaryRouteNames.length }}
            </span>
          </td>
          <td class="station_info" v-if="station.generalInfo">
            <span
              class="scenery-icon icon-info"
              :class="station.generalInfo.controlType.replace('+', '-')"
              :title="$t('desc.control-type') + $t(`controls.${station.generalInfo.controlType}`)"
              v-html="getControlTypeAbbrev(station.generalInfo.controlType)"
            >
            </span>
            <span>
              <img
                class="icon-info"
-                v-if="station.generalInfo.SUP"
+                src="/images/icon-unknown.svg"
-                src="/images/icon-SUP.svg"
+                alt="icon-unknown"
-                alt="SUP (RASP-UZK)"
+                :title="$t('desc.unknown')"
                :title="$t('desc.SUP')"
              />
-            </span>
+            </td>
-            <span>
+            <td class="station_users" :class="{ inactive: !station.onlineInfo }">
-              <img
+              <span>{{ station.onlineInfo?.currentUsers || 0 }}</span>
-                class="icon-info"
+              /
-                v-if="station.generalInfo.signalType"
+              <span>{{ station.onlineInfo?.maxUsers || 0 }}</span>
-                :src="`/images/icon-${station.generalInfo.signalType}.svg`"
+            </td>
                :alt="station.generalInfo.signalType"
                :title="$t('desc.signals-type') + $t(`signals.${station.generalInfo.signalType}`)"
              />
            </span>
-            <span>
+            <td class="station_spawns" :class="{ inactive: !station.onlineInfo }">
-              <img
+              <span>{{ station.onlineInfo?.spawns.length || 0 }}</span>
-                class="icon-info"
+            </td>
                v-if="station.generalInfo && station.generalInfo.routes.sblRouteNames.length > 0"
                src="/images/icon-SBL.svg"
                alt="SBL"
                :title="$t('desc.SBL') + `${station.generalInfo.routes.sblRouteNames.join(',')}`"
              />
            </span>
          </td>
-          <td class="station_info" v-else>
+            <td
-            <img
+              class="station_schedules all"
-              class="icon-info"
+              style="width: 30px"
-              src="/images/icon-unknown.svg"
+              :class="{ inactive: !station.onlineInfo }"
-              alt="icon-unknown"
+            >
-              :title="$t('desc.unknown')"
+              {{ station.onlineInfo?.scheduledTrainCount.all }}
-            />
+            </td>
          </td>
-          <td class="station_users" :class="{ inactive: !station.onlineInfo }">
+            <td
-            <span>{{ station.onlineInfo?.currentUsers || 0 }}</span>
+              class="station_schedules unconfirmed"
-            /
+              style="width: 30px"
-            <span>{{ station.onlineInfo?.maxUsers || 0 }}</span>
+              :class="{ inactive: !station.onlineInfo }"
-          </td>
+            >
              {{ station.onlineInfo?.scheduledTrainCount.unconfirmed }}
            </td>
-          <td class="station_spawns" :class="{ inactive: !station.onlineInfo }">
+            <td
-            <span>{{ station.onlineInfo?.spawns.length || 0 }}</span>
+              class="station_schedules confirmed"
-          </td>
+              style="width: 30px"
              :class="{ inactive: !station.onlineInfo }"
            >
              {{ station.onlineInfo?.scheduledTrainCount.confirmed }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
-          <td
+    <Loading v-if="apiStore.dataStatuses.connection == Status.Loading" />
            class="station_schedules all"
            style="width: 30px"
            :class="{ inactive: !station.onlineInfo }"
          >
            {{ station.onlineInfo?.scheduledTrainCount.all }}
          </td>
          <td
            class="station_schedules unconfirmed"
            style="width: 30px"
            :class="{ inactive: !station.onlineInfo }"
          >
            {{ station.onlineInfo?.scheduledTrainCount.unconfirmed }}
          </td>
          <td
            class="station_schedules confirmed"
            style="width: 30px"
            :class="{ inactive: !station.onlineInfo }"
          >
            {{ station.onlineInfo?.scheduledTrainCount.confirmed }}
          </td>
        </tr>
      </tbody>
    </table>
    <Loading v-if="!isDataLoaded && stations.length == 0" />
    <div class="no-stations" v-else-if="stations.length == 0">
      {{ $t('sceneries.no-stations') }}
@@ -282,17 +288,18 @@
 </template>
 <script lang="ts">
-import { defineComponent, computed, PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
 import stationInfoMixin from '../../mixins/stationInfoMixin';
 import styleMixin from '../../mixins/styleMixin';
 import Station from '../../scripts/interfaces/Station';
 import { useStationFiltersStore } from '../../store/stationFiltersStore';
-import { useStore } from '../../store/mainStore';
+import { useMainStore } from '../../store/mainStore';
 import Loading from '../Global/Loading.vue';
 import { HeadIdsTypes, headIconsIds, headIds } from '../../scripts/data/stationHeaderNames';
 import StationStatusBadge from '../Global/StationStatusBadge.vue';
 import { Status } from '../../typings/common';
 import { useApiStore } from '../../store/apiStore';
 export default defineComponent({
  props: {
@@ -319,17 +326,15 @@ export default defineComponent({
  },
  setup() {
-    const store = useStore();
+    const mainStore = useMainStore();
    const apiStore = useApiStore();
    const stationFiltersStore = useStationFiltersStore();
    const isDataLoaded = computed(() => {
      return store.dataStatuses.sceneries != Status.Data.Loading;
    });
    return {
-      isDataLoaded,
+      Status: Status.Data,
      stationFiltersStore,
-      store
+      mainStore,
      apiStore
    };
  },
@@ -351,7 +356,7 @@ export default defineComponent({
    openDonationModal(e: Event) {
      this.$emit('toggleDonationModal', true);
-      this.store.modalLastClickedTarget = e.target;
+      this.mainStore.modalLastClickedTarget = e.target;
    },
    openForumSite(e: Event, url: string | undefined) {
@@ -388,16 +393,18 @@ $rowCol: #424242;
  }
 }
 .table_wrapper {
  overflow: auto;
  overflow-y: hidden;
  font-weight: 500;
 }
 table {
  white-space: nowrap;
  border-collapse: collapse;
  // min-width: 1350px;
  width: 100%;
  overflow: auto;
  overflow-y: hidden;
  font-weight: 500;
  @include smallScreen() {
    min-width: auto;
  }
@@ -0,0 +1,172 @@
 <template>
  <span class="stop-label" :data-sbl="stop.isSBL">
    <span class="name" v-html="stop.nameHtml"></span>
    <span
      v-if="stop.position != 'begin'"
      class="date arrival"
      :data-status="
        stop.arrivalDelay > 0 && stop.status != 'unconfirmed'
          ? 'delayed'
          : stop.arrivalDelay < 0 && stop.status != 'unconfirmed'
          ? 'preponed'
          : stop.arrivalDelay == 0 && stop.status == 'confirmed'
          ? 'on-time'
          : ''
      "
    >
      <span v-if="stop.arrivalDelay != 0 && stop.status != 'unconfirmed'">
        <s>{{ timestampToString(stop.arrivalScheduled) }}</s>
        {{ timestampToString(stop.arrivalReal) }}
        ({{ stop.arrivalDelay > 0 ? '+' : '' }}{{ stop.arrivalDelay }})
      </span>
      <span v-else>
        {{ timestampToString(stop.arrivalScheduled) }}
      </span>
    </span>
    <span
      v-if="
        stop.duration ||
        (stop.status == 'stopped' &&
          stop.position != 'begin' &&
          stop.departureDelay != stop.arrivalDelay)
      "
      class="date stop"
      :data-stop-types="stop.type.replace(', ', '-')"
      :data-stop-status="
        stop.departureDelay - stop.arrivalDelay > 0 && !stop.duration ? 'delayed' : ''
      "
    >
      {{ stop.duration || stop.departureDelay - stop.arrivalDelay }}
      {{ stop.type == '' ? 'pt' : stop.type }}
    </span>
    <span
      v-if="
        stop.position != 'end' &&
        (stop.duration != 0 || stop.status == 'stopped' || stop.departureDelay != stop.arrivalDelay)
      "
      class="date departure"
      :data-status="
        stop.departureDelay > 0 && stop.status == 'confirmed'
          ? 'delayed'
          : stop.departureDelay < 0 && stop.status == 'confirmed'
          ? 'preponed'
          : stop.departureDelay == 0 && stop.status == 'confirmed'
          ? 'on-time'
          : ''
      "
    >
      <span v-if="stop.departureDelay != 0 && stop.status == 'confirmed'">
        <s>{{ timestampToString(stop.departureScheduled) }}</s>
        {{ timestampToString(stop.departureReal) }}
        ({{ stop.departureDelay > 0 ? '+' : '' }}{{ stop.departureDelay }})
      </span>
      <span v-else>
        {{ timestampToString(stop.departureScheduled) }}
      </span>
    </span>
  </span>
 </template>
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
 import { TrainScheduleStop } from './TrainSchedule.vue';
 export default defineComponent({
  mixins: [dateMixin],
  props: {
    stop: {
      type: Object as PropType<TrainScheduleStop>,
      required: true
    }
  }
 });
 </script>
 <style lang="scss" scoped>
 $preponedClr: lime;
 $delayedClr: salmon;
 $dateClr: #525151;
 $stopExchangeClr: #db8e29;
 $stopDefaultClr: #252525;
 $stopNameClr: #22a8d1;
 .stop-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  &[data-sbl='true'] {
    .date {
      display: none;
    }
    .name {
      background: none;
      color: #aaa;
      padding: 0;
    }
  }
  .name {
    background: $stopNameClr;
    padding: 0.3em 0.5em;
    display: flex;
    align-items: center;
    &.misc {
      background: gray;
    }
  }
  .date {
    background: $dateClr;
    padding: 0.3em 0.5em;
  }
  .stop {
    &[data-stop-types='ph'],
    &[data-stop-types='ph-pm'],
    &[data-stop-types='pm'] {
      background: $stopExchangeClr;
    }
    background: $stopDefaultClr;
    &[data-stop-status='delayed'] {
      color: $delayedClr;
    }
  }
  .arrival,
  .departure {
    &[data-status='delayed'] {
      s {
        color: #999;
      }
      span {
        color: $delayedClr;
      }
    }
    &[data-status='preponed'] {
      s {
        color: #999;
      }
      span {
        color: $preponedClr;
      }
    }
  }
 }
 </style>
@@ -35,8 +35,8 @@
        <div class="train-driver">
          <b
-            v-if="store.donatorsData.includes(train.driverName)"
+            v-if="apiStore.donatorsData.includes(train.driverName)"
-            title="Dyżurny wspierający projekt Stacjownika!"
+            :title="$t('donations.driver-message')"
          >
            {{ train.driverName }}
            <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
@@ -80,10 +80,12 @@
        <div class="status-badges">
          <div v-if="!train.currentStationHash" class="train-badge offline">
            <img src="/images/icon-offline.svg" alt="" />
            {{ $t('trains.scenery-offline') }}
          </div>
          <div v-if="!train.online" class="train-badge offline">
            <img src="/images/icon-offline.svg" alt="" />
            Offline {{ lastSeenMessage(train.lastSeen) }}
          </div>
        </div>
@@ -124,7 +126,8 @@ import trainInfoMixin from '../../mixins/trainInfoMixin';
 import Train from '../../scripts/interfaces/Train';
 import ProgressBar from '../Global/ProgressBar.vue';
 import TrainThumbnail from '../Global/TrainThumbnail.vue';
-import { useStore } from '../../store/mainStore';
+import { useMainStore } from '../../store/mainStore';
 import { useApiStore } from '../../store/apiStore';
 export default defineComponent({
  mixins: [trainInfoMixin, styleMixin],
@@ -143,7 +146,8 @@ export default defineComponent({
  data() {
    return {
-      store: useStore()
+      store: useMainStore(),
      apiStore: useApiStore()
    };
  }
 });
@@ -237,6 +241,10 @@ export default defineComponent({
  flex-wrap: wrap;
  gap: 0.25em;
  img {
    height: 15px;
  }
 }
 .general-timetable {
@@ -15,19 +15,12 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import modalTrainMixin from '../../mixins/modalTrainMixin';
-import trainInfoMixin from '../../mixins/trainInfoMixin';
+import TrainInfo from './TrainInfo.vue';
-import TrainInfo from '../TrainsView/TrainInfo.vue';
+import TrainSchedule from './TrainSchedule.vue';
 import TrainSchedule from '../TrainsView/TrainSchedule.vue';
 export default defineComponent({
  components: { TrainInfo, TrainSchedule },
-  mixins: [trainInfoMixin, modalTrainMixin],
+  mixins: [modalTrainMixin],
  data() {
    return {
      isTopBarVisible: false
    };
  },
  activated() {
    const contentEl = this.$refs['content'] as HTMLElement;
@@ -1,6 +1,6 @@
 <template>
-  <div class="filters-options" @keydown.esc="showOptions = false">
+  <div class="dropdown" @keydown.esc="showOptions = false">
-    <div class="bg" v-if="showOptions" @click="showOptions = false"></div>
+    <div class="dropdown_background" v-if="showOptions" @click="showOptions = false"></div>
    <button class="filter-button btn--filled btn--image" @click="toggleShowOptions" ref="button">
      <img src="/images/icon-filter2.svg" alt="Open filters icon" />
@@ -8,8 +8,8 @@
      <span class="active-indicator" v-if="currentOptionsActive"></span>
    </button>
-    <transition name="options-anim">
+    <transition name="dropdown-anim">
-      <div class="options_wrapper" v-if="showOptions">
+      <div class="dropdown_wrapper" v-if="showOptions">
        <div class="options_content">
          <h1 class="option-title">{{ $t('options.search-title') }}</h1>
          <div class="search_content">
@@ -87,6 +87,8 @@
            </button>
          </div>
        </div>
        <div tabindex="0" @focus="showOptions = false"></div>
      </div>
    </transition>
  </div>
@@ -184,7 +186,8 @@ export default defineComponent({
 </script>
 <style lang="scss" scoped>
-@import '../../styles/filters_options.scss';
+@import '../../styles/dropdown.scss';
@import '../../styles/dropdown_filters.scss';
 .search_content > div {
  margin: 0.5em auto;
@@ -2,83 +2,126 @@
  <div class="train-schedule" @click="toggleShowState">
    <StockList :trainStockList="train.stockList" />
    <!-- <div class="train-stock"> -->
    <!-- <ul>
        <li v-for="(stockName, i) in train.stockList" :key="i">
          <p>{{ stockName.split(':')[0].split('_').splice(0, 2).join(' ') }} {{ stockName.split(':')[1] }}</p>
          <TrainThumbnail :name="stockName" /> 
        </li>
      </ul> -->
    <!-- </div> -->
    <div class="schedule-wrapper" v-if="train.timetableData">
-      <ul class="stop_list">
+      <div class="stops">
-        <li
+        <div
-          v-for="(stop, i) in train.timetableData.followingStops"
+          v-for="(stop, i) in scheduleStops"
          :key="i"
          class="stop"
-          :class="addClasses(stop, i)"
+          :data-status="stop.status"
          :data-position="stop.position"
          :data-delayed="stop.departureDelay > 0"
          :data-stop-type="stop.type"
          :data-minor-stop-active="stop.isActive"
          :data-last-confirmed="stop.isLastConfirmed"
          x
        >
          <span class="stop_info">
-            <div class="indicator"></div>
+            <span class="distance">
-
+              {{ stop.distance ? stop.distance.toFixed(1) : '' }}
            <div class="progress-bar"></div>
            <div class="stop-bar"></div>
            <span class="distance" v-if="stop.stopDistance">
              {{ Math.floor(stop.stopDistance) }}
            </span>
-            <span class="stop-name" v-html="stop.stopName"> </span>
+            <div class="progress">
              <div class="line line_node line_node-top"></div>
              <div class="node"></div>
              <div class="line line_node line_node-bottom"></div>
            </div>
-            <StopDate :stop="stop" />
+            <StopLabel :stop="stop" />
          </span>
-          <div class="stop_line" v-if="i < train.timetableData!.followingStops.length - 1">
+          <div class="stop_line">
-            <div class="progress-bar"></div>
+            <!-- Grid placeholder -->
            <div></div>
-            <div v-if="stop.comments" style="color: salmon">
+            <div class="progress">
-              <b>{{ stop.stopNameRAW }} </b>: <span v-html="stop.comments"></span>
+              <div class="line line_connection" v-if="i < scheduleStops.length - 1"></div>
            </div>
-            <span
+            <div class="bottom-line-info">
-              v-if="
+              <div class="info-comments" v-if="stop.comments" style="color: salmon">
-                stop.departureLine == train.timetableData!.followingStops[i + 1].arrivalLine &&
+                <img src="/images/icon-warning.svg" alt="icon-warning" width="20" />
-                !/sbl/gi.test(stop.departureLine!)
+                <b v-html="stop.comments"></b>
-              "
+              </div>
            >
              {{ stop.departureLine }}
            </span>
-            <span v-else-if="!/sbl/gi.test(stop.departureLine!)">
+              <!-- Routes  -->
-              {{ stop.departureLine }} /
+              <span
-              {{ train.timetableData!.followingStops[i + 1].arrivalLine }}
+                v-if="
-            </span>
+                  stop.departureLine &&
-          </div>
+                  stop.departureLine == scheduleStops[i + 1]?.arrivalLine &&
                  !/sbl/gi.test(stop.departureLine)
                "
              >
                {{ stop.departureLine }}
              </span>
-          <div class="stop_line" v-else>
+              <span v-else-if="stop.departureLine && !/sbl/gi.test(stop.departureLine)">
-            <div v-if="stop.comments" style="color: salmon">
+                <div>{{ stop.departureLine }}</div>
-              <b>{{ stop.stopNameRAW }} </b>: <span v-html="stop.comments"></span>
+                <div
                  class="scenery-change-name"
                  v-if="
                    i < scheduleStops.length - 1 &&
                    stop.sceneryName != scheduleStops[i + 1].sceneryName
                  "
                >
                  {{ scheduleStops[i + 1].sceneryName }}
                </div>
                <div>
                  {{ scheduleStops[i + 1].arrivalLine }}
                </div>
              </span>
            </div>
          </div>
-        </li>
+        </div>
-      </ul>
+      </div>
    </div>
  </div>
 </template>
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
 import Train from '../../scripts/interfaces/Train';
-import { useStore } from '../../store/mainStore';
+import StopLabel from './StopLabel.vue';
 import StopDate from '../Global/StopDate.vue';
 import StockList from '../Global/StockList.vue';
-import { TrainStop } from '../../store/typings';
+import { useMainStore } from '../../store/mainStore';
 import { useApiStore } from '../../store/apiStore';
 export interface TrainScheduleStop {
  nameHtml: string;
  nameRaw: string;
  status: 'confirmed' | 'unconfirmed' | 'stopped';
  type: string;
  position: 'begin' | 'end' | 'en-route';
  arrivalScheduled: number;
  arrivalReal: number;
  departureScheduled: number;
  departureReal: number;
  departureDelay: number;
  arrivalDelay: number;
  duration: number | null;
  isActive: boolean;
  isLastConfirmed: boolean;
  isSBL: boolean;
  sceneryName: string | null;
  sceneryHash: string;
  distance: number;
  arrivalLine: string | null;
  departureLine: string | null;
  comments: string | null;
 }
 export default defineComponent({
-  components: { StopDate, StockList },
+  components: { StopLabel, StockList },
  props: {
    train: {
      type: Object as PropType<Train>,
@@ -90,62 +133,108 @@ export default defineComponent({
  emits: ['click'],
-  setup(props) {
+  data() {
    return {
-      store: useStore(),
+      store: useMainStore(),
-
+      apiStore: useApiStore()
      lastConfirmed: computed(() => {
        return props.train.timetableData!.followingStops.findIndex(
          (stop, i, stops) => stop.confirmed && !stops[i + 1]?.confirmed && !stops[i + 1]?.stopped
        );
      }),
      activeMinorStops: computed(() => {
        const lastMajorConfirmed = props.train.timetableData!.followingStops.findIndex(
          (stop, i, stops) => stop.confirmed && !stops[i + 1]?.confirmed
        );
        const activeMinorStopList: number[] = [];
        if (lastMajorConfirmed + 1 >= props.train.timetableData!.followingStops.length)
          return activeMinorStopList;
        for (
          let i = lastMajorConfirmed + 1;
          i < props.train.timetableData!.followingStops.length;
          i++
        ) {
          if (/po\.|sbl/gi.test(props.train.timetableData!.followingStops[i].stopNameRAW))
            activeMinorStopList.push(i);
          else break;
        }
        return activeMinorStopList;
      })
    };
  },
  computed: {
    scheduleStops(): TrainScheduleStop[] {
      let currentSceneryIndex = 0;
      return (
        this.train.timetableData?.followingStops.map((stop, i, arr) => {
          if (
            i > 0 &&
            stop.arrivalLine &&
            stop.arrivalLine != arr[i - 1].departureLine &&
            !/sbl/gi.test(stop.arrivalLine)
          )
            currentSceneryIndex++;
          return {
            nameHtml: stop.stopName,
            nameRaw: stop.stopNameRAW,
            arrivalScheduled: stop.arrivalTimestamp,
            arrivalReal: stop.arrivalRealTimestamp,
            departureScheduled: stop.departureTimestamp,
            departureReal: stop.departureRealTimestamp,
            departureDelay: stop.departureDelay,
            arrivalDelay: stop.arrivalDelay,
            duration: stop.stopTime,
            comments: stop.comments ?? null,
            arrivalLine: stop.arrivalLine,
            departureLine: stop.departureLine,
            type: stop.stopType,
            distance: stop.stopDistance,
            isActive: this.activeMinorStops.includes(i),
            isLastConfirmed: this.lastConfirmed === i && !stop.terminatesHere,
            isSBL: /sbl/gi.test(stop.stopName),
            position: stop.beginsHere ? 'begin' : stop.terminatesHere ? 'end' : 'en-route',
            sceneryHash: '',
            sceneryName: this.timetableSceneryNames[currentSceneryIndex],
            status: stop.confirmed ? 'confirmed' : stop.stopped ? 'stopped' : 'unconfirmed'
          };
        }) ?? []
      );
    },
    lastConfirmed() {
      return this.train.timetableData?.followingStops.findIndex(
        (stop, i, stops) => stop.confirmed && !stops[i + 1]?.confirmed && !stops[i + 1]?.stopped
      );
    },
    activeMinorStops() {
      if (!this.train.timetableData) return [];
      const lastMajorConfirmed = this.train.timetableData.followingStops.findIndex(
        (stop, i, stops) => stop.confirmed && !stops[i + 1]?.confirmed
      );
      const activeMinorStopList: number[] = [];
      if (lastMajorConfirmed + 1 >= this.train.timetableData.followingStops.length)
        return activeMinorStopList;
      for (
        let i = lastMajorConfirmed + 1;
        i < this.train.timetableData!.followingStops.length;
        i++
      ) {
        if (/po\.|sbl/gi.test(this.train.timetableData!.followingStops[i].stopNameRAW))
          activeMinorStopList.push(i);
        else break;
      }
      return activeMinorStopList;
    },
    timetableSceneryNames() {
      if (!this.train.timetableData?.sceneries) return [];
      return this.train.timetableData?.sceneries
        .map(
          (sceneryHash) =>
            this.store.onlineSceneryList.find((st) => st.hash === sceneryHash)?.name ??
            this.apiStore.sceneryData.find((sd) => sd.hash === sceneryHash)?.name ??
            sceneryHash
        )
        .reverse();
    }
  },
  methods: {
    toggleShowState() {
      this.$emit('click');
    },
    addClasses(stop: TrainStop, index: number) {
      return {
        confirmed: stop.confirmed,
        stopped: stop.stopped,
        begin: stop.beginsHere,
        end: stop.terminatesHere,
        delayed: stop.departureDelay > 0,
        sbl: /sbl/gi.test(stop.stopName),
        [stop.stopType.replaceAll(', ', '-')]:
          stop.stopType.match(new RegExp('ph|pm|pt')) && !stop.confirmed && !stop.beginsHere,
        'minor-stop-active': this.activeMinorStops.includes(index),
        'last-confirmed': index == this.lastConfirmed && !stop.terminatesHere
      };
    },
    onImageError(e: Event) {
      const imageEl = e.target as HTMLImageElement;
      imageEl.src = '/images/icon-unknown.png';
    }
  }
 });
@@ -155,17 +244,18 @@ export default defineComponent({
@import '../../styles/responsive.scss';
 $barClr: #b1b1b1;
-$confirmedClr: #18d818;
+$confirmedClr: #4ae24a;
 $stoppedClr: #f55f31;
 $haltClr: #f8bb36;
-$stopNameClr: #22a8d1;
+
 $blinkAnim: 0.5s ease-in-out alternate infinite blink;
@keyframes blink {
  from {
-    background-color: $barClr;
+    border-color: $barClr;
  }
  to {
-    background-color: $confirmedClr;
+    border-color: $confirmedClr;
  }
 }
@@ -181,216 +271,247 @@ $stopNameClr: #22a8d1;
  margin-top: 1em;
 }
-.progress-bar {
+.stops {
  position: absolute;
  z-index: 10;
  top: -1px;
  left: -17px;
  height: 100%;
  width: 3px;
  background-color: $barClr;
 }
 .stop-name {
  background: $stopNameClr;
  padding: 0.3em 0.5em;
  display: flex;
  align-items: center;
  &.misc {
    background: gray;
  }
 }
 .stop-comment {
  background: forestgreen;
  padding: 0.3em 0.5em;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  width: 2em;
  cursor: pointer;
  &:hover {
    text-overflow: ellipsis;
    width: 100%;
  }
  img {
    width: 1em;
  }
  span {
    font-size: 0.8em;
  }
 }
 ul.stop_list {
  margin-left: 2.5em;
 }
 ul.stop_list > li.stop {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  gap: 5px;
-  padding: 0 0.5em;
+  padding: 5px 0;
 }
-  &.sbl {
+.stop {
-    .stop-date {
+  // Begin stop
-      display: none;
+  &[data-position='begin'] {
-    }
+    .node {
    .stop-name {
      background: none;
      color: #aaa;
      padding: 0;
    }
  }
  &[class*='ph'] > .stop_info > .indicator {
    border-color: $stopNameClr;
  }
  &[class*='pt'] > .stop_info > .indicator {
    border-color: #818181;
  }
  &.begin {
    .stop_info > .indicator {
      border-color: lightgreen;
    }
-    .stop_info > .progress-bar {
+    .line_node-top {
-      background: lightgreen;
+      display: none;
    }
  }
-  &.end {
+  // End stop
-    .stop_info > .indicator {
+  &[data-position='end'] {
    .node {
      border-color: salmon;
    }
-    .stop_info > .progress-bar {
+    .line_node-bottom {
-      background: salmon;
+      display: none;
    }
  }
-  &.minor-stop-active {
+  // Stop types
-    .stop_info > .progress-bar {
+  &[data-stop-type*='pt'] .node {
-      animation: 0.5s ease-in-out alternate infinite blink;
+    border-color: #818181;
    }
    .stop_line > .progress-bar {
      animation: 0.5s ease-in-out alternate infinite blink;
    }
  }
-  &.last-confirmed {
+  &[data-stop-type*='ph'] .node {
-    .stop_line > .progress-bar {
+    border-color: $haltClr;
      animation: 0.5s ease-in-out alternate infinite blink;
    }
  }
-  &.confirmed {
+  &[data-minor-stop-active='true'] {
-    .stop_info {
+    .progress > .line {
-      > .progress-bar {
+      animation: $blinkAnim;
        background-color: $confirmedClr;
      }
      > .indicator {
        border-color: $confirmedClr;
      }
    }
-    .stop_line > .progress-bar {
+    & + div {
-      background-color: $confirmedClr;
+      .progress > .line_node-top {
-    }
+        animation: $blinkAnim;
  }
  &.stopped {
    .stop_info {
      > .indicator {
        border-color: $stoppedClr;
      }
      > .stop-bar {
        background: $stoppedClr;
      }
    }
  }
-  .stop_line {
+  // Last confirmed outpost / checkpoint
-    font-size: 0.8em;
+  &[data-last-confirmed='true'] {
-    color: #ccc;
+    .progress > .line_connection {
      animation: $blinkAnim;
    }
-    padding: 0.35em 0;
+    .progress > .line_node-bottom {
      animation: $blinkAnim;
    }
-    position: relative;
+    & + div {
-
+      .progress > .line_node-top {
-    .line-segment {
+        animation: $blinkAnim;
-      color: $barClr;
+      }
      font-weight: 500;
    }
  }
-  .stop_info {
+  // Confirmed status
-    display: flex;
+  &[data-status='confirmed'] {
-
+    .progress > .node {
-    position: relative;
+      border-color: $confirmedClr;
-    text-align: center;
+    }
-
+    .progress > .line {
-    flex-wrap: wrap;
+      border-left: 2px solid $confirmedClr;
      border-right: 2px solid $confirmedClr;
    }
  }
-  .stop-bar {
+  // Stopped status
  &[data-status='stopped'] {
    .progress > .node {
      border-color: $stoppedClr;
    }
    .progress > .line_node {
      border-color: $stoppedClr;
    }
  }
  // Unused so far
  &[data-track-count-departure='2'] {
    .progress > .line {
      width: 6px;
    }
  }
  &[data-track-count-arrival='2'] {
    .progress > .line_node-top {
      width: 6px;
    }
  }
  &[data-track-count-arrival='1'] {
    .progress > .line_node-top {
      width: 4px;
    }
  }
  &[data-electrified-departure] {
    .stop_line > .line-speed > .speed-departure {
      color: #00c1c7;
    }
  }
  &[data-electrified-arrival] {
    .stop_line > .line-speed > .speed-next-arrival {
      color: #00c1c7;
    }
  }
 }
 .stop_info,
 .stop_line {
  display: grid;
  grid-template-columns: 30px 40px auto 1fr;
 }
 .line-speed {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #9b9b9b;
  gap: 10px;
 }
 .stop_info {
  position: relative;
  text-align: center;
 }
 .stop_line {
  font-size: 0.8em;
  color: #ccc;
  margin-top: 5px;
 }
 .distance {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75em;
 }
 .progress {
  position: relative;
  & > .node {
    position: absolute;
    top: 0;
    left: -17px;
    z-index: 10;
    width: 3px;
    height: 100%;
  }
  .distance {
    position: absolute;
    top: 50%;
-    transform: translate(-100%, -50%);
+    left: 50%;
-
+    transform: translate(-50%, -50%);
-    margin-left: -1.75rem;
+    z-index: 15;
    font-size: 0.75em;
    color: #d6d6d6;
  }
  .indicator {
    position: absolute;
    z-index: 11;
    top: 50%;
    left: -1rem;
    transform: translate(-47%, -50%);
    text-align: right;
    width: 15px;
    height: 15px;
-    background: var(--clr-secondary);
+    background-color: var(--clr-secondary);
-    border: 3px solid $barClr;
+    border: 4px solid $barClr;
    border-radius: 100%;
  }
  & > .line {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 10;
    height: 100%;
    // background-color: $barClr;
    border-left: 2px solid $barClr;
    border-right: 2px solid $barClr;
    &.line_connection {
      transform: translate(-50%, -6px);
      height: calc(100% + 12px);
      // height: calc(100% + 0.25em);
    }
    &.line_node-top {
      top: 0;
      height: 50%;
    }
    &.line_node-bottom {
      top: 50%;
      height: 50%;
    }
    &.line_stop {
      border-color: $stoppedClr;
      z-index: 11;
    }
  }
 }
 .info-comments {
  display: flex;
  align-items: center;
  gap: 0.25em;
  margin: 0.25em 0;
  img {
    height: 1.2em;
  }
 }
 .bottom-line-info {
  .scenery-change-name {
    position: relative;
    margin: 0.25em 0;
    &::before {
      content: '';
      position: absolute;
      height: 2px;
      width: 30px;
      background-color: #aaa;
      top: 50%;
      right: calc(100% + 5px);
      transform: translate(0, -50%);
    }
  }
 }
 </style>
@@ -0,0 +1,282 @@
 <template>
  <div class="dropdown" @keydown.esc="showOptions = false" @focusout="showOptions = false">
    <div class="bg" v-if="showOptions" @click="showOptions = false"></div>
    <button class="filter-button btn--filled btn--image" @click="toggleShowOptions" ref="button">
      <img src="/images/icon-stats.svg" alt="Open filters icon" />
      {{ $t('train-stats.stats-button') }}
    </button>
    <transition name="dropdown-anim">
      <div class="dropdown_wrapper" v-if="showOptions">
        <h1 class="text--primary">
          <img src="/images/icon-stats.svg" alt="Open filters icon" />
          {{ $t('train-stats.title') }}
        </h1>
        <hr style="margin: 0.5em 0" />
        <div v-if="apiStore.dataStatuses.connection == Status.Loaded && regionTrains.length > 0">
          <div class="top-list general">
            <transition-group tag="ul" name="stats-anim">
              <li class="badge" key="timetable-count">
                <span>{{ $t('train-stats.timetable-count') }}</span>
                <span>
                  <b>{{ regionTrainsWithTT.length }}</b>
                </span>
              </li>
              <li class="badge" key="avg-speed">
                <span>{{ $t('train-stats.avg-speed') }}</span>
                <span>
                  <b>{{ stats.avgSpeed.toFixed(1) }} km/h</b>
                </span>
              </li>
              <li class="badge" key="avg-distance">
                <span>{{ $t('train-stats.avg-timetable') }}</span>
                <span>
                  <b>{{ stats.avgDistance.toFixed(1) }} km</b>
                </span>
              </li>
            </transition-group>
          </div>
          <div class="top-list categories">
            <h3>{{ $t('train-stats.top-categories') }}</h3>
            <transition-group tag="ul" name="stats-anim">
              <li class="badge" v-for="top in stats.topCategories" :key="top.name">
                <span>{{ top.name }}</span>
                <span>{{ top.count }}</span>
              </li>
            </transition-group>
            <span class="no-data" v-if="stats.topCategories.length == 0">
              {{ $t('train-stats.no-timetables') }}
            </span>
          </div>
          <div class="top-list vehicles">
            <h3>{{ $t('train-stats.top-vehicles') }}</h3>
            <transition-group tag="ul" name="stats-anim">
              <li class="badge" v-for="top in stats.topVehicles" :key="top.name">
                <span>{{ top.name }}</span>
                <span>{{ top.count }}</span>
              </li>
            </transition-group>
            <span class="no-data" v-if="stats.topVehicles.length == 0">
              {{ $t('train-stats.no-vehicles') }}
            </span>
          </div>
          <div class="top-list vehicle-types">
            <h3>{{ $t('train-stats.top-units') }}</h3>
            <transition-group tag="ul" name="stats-anim">
              <li class="badge" v-for="top in stats.topUnits.slice(0, 7)" :key="top.name">
                <span>{{ top.name }}</span>
                <span>{{ top.count }}</span>
              </li>
            </transition-group>
            <span class="no-data" v-if="stats.topUnits.length == 0">
              {{ $t('train-stats.no-units') }}
            </span>
          </div>
        </div>
        <div v-else-if="apiStore.dataStatuses.connection != Status.Loaded">
          {{ $t('train-stats.stats-loading') }}
        </div>
        <div class="no-data" v-else>
          {{ $t('train-stats.no-stats') }}
        </div>
      </div>
    </transition>
  </div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { useMainStore } from '../../store/mainStore';
 import { Status } from '../../typings/common';
 import { useApiStore } from '../../store/apiStore';
 interface ITop {
  name: string;
  count: number;
 }
 interface IStats {
  timetableCount: number;
  avgSpeed: number;
  avgDistance: number;
  topCategories: ITop[];
  topVehicles: ITop[];
  topUnits: ITop[];
 }
 function compareTop(top1: ITop, top2: ITop) {
  return Math.sign(top2.count - top1.count) || top1.name.localeCompare(top2.name, 'pl-PL');
 }
 export default defineComponent({
  data() {
    return {
      showOptions: false,
      store: useMainStore(),
      apiStore: useApiStore(),
      Status: Status.Data
    };
  },
  computed: {
    regionTrains() {
      return this.store.trainList.filter((train) => train.region == this.store.region.id);
    },
    regionTrainsWithTT() {
      return this.regionTrains.filter((train) => train.timetableData);
    },
    stats() {
      const stats = this.regionTrains.reduce(
        (acc, train, i, arr) => {
          // AVG SPEED
          acc.avgSpeed += train.speed / arr.length;
          // TOP VEHICLES
          const locoType = train.locoType.split('-')[0];
          const topVehicle = acc.topVehicles.find((top) => top.name == locoType);
          if (!topVehicle) acc.topVehicles.push({ name: locoType, count: 1 });
          else topVehicle.count++;
          // TOP UNITS
          const unitType = train.locoType;
          const topUnit = acc.topUnits.find((top) => top.name == unitType);
          if (!topUnit) acc.topUnits.push({ name: unitType, count: 1 });
          else topUnit.count++;
          if (train.timetableData !== undefined) {
            acc.timetableCount++;
            // AVG DISTANCE
            acc.avgDistance += train.timetableData.routeDistance;
            // TOP CATEGORIES
            const topCategory = acc.topCategories.find(
              (top) => top.name == train.timetableData!.category
            );
            if (!topCategory)
              acc.topCategories.push({ name: train.timetableData!.category, count: 1 });
            else topCategory.count++;
          }
          if (i == arr.length - 1 && acc.timetableCount != 0) {
            acc.avgDistance /= acc.timetableCount;
          }
          return acc;
        },
        {
          timetableCount: 0,
          avgDistance: 0,
          avgSpeed: 0,
          topCategories: [],
          topUnits: [],
          topVehicles: []
        } as IStats
      );
      stats.topCategories.sort(compareTop);
      stats.topUnits.sort(compareTop);
      stats.topVehicles.sort(compareTop);
      return stats;
    }
  },
  methods: {
    toggleShowOptions() {
      this.showOptions = !this.showOptions;
      this.$nextTick(() => {
        if (this.showOptions) (this.$refs['button'] as HTMLButtonElement)?.focus();
      });
    }
  }
 });
 </script>
 <style lang="scss" scoped>
@import '../../styles/dropdown.scss';
@import '../../styles/badge.scss';
@import '../../styles/responsive.scss';
 h1 img {
  vertical-align: text-bottom;
 }
 h3 {
  margin: 0.5em 0;
 }
 .no-data {
  font-size: 1.1em;
  color: #ccc;
 }
 .top-list ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  // @include smallScreen {
  //   justify-content: center;
  // }
 }
 .badge {
  margin: 0;
  & > span:first-child {
    background-color: $accentCol;
    color: black;
  }
 }
 .dropdown_wrapper {
  max-width: 600px;
 }
 .stats-anim {
  &-move,
  &-enter-active,
  &-leave-active {
    transition: all 250ms ease;
  }
  &-enter-from,
  &-leave-to {
    opacity: 0;
    transform: translateX(5px);
  }
  &-leave-active {
    position: absolute;
  }
 }
@include smallScreen {
  h1,
  .no-data {
    text-align: center;
  }
 }
 </style>
@@ -1,17 +1,13 @@
 <template>
  <transition name="status-anim" mode="out-in" tag="div" class="train-table">
-    <div :key="store.dataStatuses.trains">
+    <div :key="apiStore.dataStatuses.connection">
      <div class="table-info" key="offline" v-if="store.isOffline">
        {{ $t('app.offline') }}
      </div>
-      <Loading v-else-if="trains.length == 0 && store.dataStatuses.trains == 0" key="loading" />
+      <Loading v-else-if="apiStore.dataStatuses.connection == Status.Loading" key="loading" />
-      <div
+      <div class="table-info" key="no-trains" v-else-if="trains.length == 0">
        class="table-info"
        key="no-trains"
        v-else-if="trains.length == 0 && store.dataStatuses.trains != 0"
      >
        {{ $t('trains.no-trains') }}
      </div>
@@ -35,10 +31,11 @@
 import { defineComponent, inject, PropType, Ref } from 'vue';
 import modalTrainMixin from '../../mixins/modalTrainMixin';
 import Train from '../../scripts/interfaces/Train';
-import { useStore } from '../../store/mainStore';
+import { useMainStore } from '../../store/mainStore';
 import Loading from '../Global/Loading.vue';
 import TrainInfo from './TrainInfo.vue';
 import { Status } from '../../typings/common';
 import { useApiStore } from '../../store/apiStore';
 export default defineComponent({
  components: { Loading, TrainInfo },
@@ -53,7 +50,8 @@ export default defineComponent({
  mixins: [modalTrainMixin],
  setup() {
-    const store = useStore();
+    const store = useMainStore();
    const apiStore = useApiStore();
    const searchedTrain = inject('searchedTrain') as Ref<string>;
    const searchedDriver = inject('searchedDriver') as Ref<string>;
@@ -61,6 +59,8 @@ export default defineComponent({
      searchedTrain,
      searchedDriver,
      store,
      apiStore,
      Status: Status.Data,
      sorterActive: inject('sorterActive') as {
        id: string | number;
        dir: number;
@@ -72,7 +72,7 @@ export default defineComponent({
    dataStatus() {
      if (this.store.isOffline) return Status.Data.Offline;
-      if (this.trains.length == 0 && this.store.dataStatuses.trains == Status.Data.Loading)
+      if (this.trains.length == 0 && this.apiStore.dataStatuses.connection == Status.Data.Loading)
        return Status.Data.Loading;
      return Status.Data.Loaded;
@@ -0,0 +1,14 @@
 import { PropType, defineComponent } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
 import { TrainScheduleStop } from './TrainSchedule.vue';
 export default defineComponent({
  mixins: [dateMixin],
  props: {
    stop: {
      type: Object as PropType<TrainScheduleStop>,
      required: true
    }
  }
 });
@@ -0,0 +1,10 @@
 import axios from 'axios';
 const http = axios.create({
  baseURL:
    import.meta.env.VITE_API_MODE === 'development'
      ? 'http://localhost:3001'
      : 'https://stacjownik.spythere.eu'
 });
 export default http;
@@ -9,12 +9,15 @@
    "p2-b3": "Stacjobot (Stacjownik bot)",
    "p2-a1": "Discord server",
    "p3": "<b>If you have the means and would like to support my work, I would be grateful for any financial assistance that could help cover at least some of the server costs and further enhance the capabilities of the application!</b>",
-    "p4": "Every person who decides to contribute at least {b1} for the development of Stacjownik, will receive (upon a personal request) {img}{b2} of username in the \"Sceneries\" and \"Trains\" tabs of the application, as well as on my Discord server (after verifying the payment author, preferably by providing the username directly with the payment).",
+    "p4": "Every person who decides to contribute at least {b1} (in case of PayPal it must be a payment including additional transaction fees) for the development of Stacjownik, will receive (upon a personal request) {img}{b2} of username in the app and on my Discord server (after verifying the payment author, preferably by providing the username directly with the payment).",
    "p4-b1": "5 PLN",
    "p4-b2": "a symbolic highlight",
    "p5": "Thank you and enjoy the app!<br />~ Spythere",
    "action-exit": "Maybe next time...",
-    "action-confirm": "DONATE!"
+    "action-paypal": "DONATE WITH PAYPAL",
    "action-buycoffee": "BUY ME A COFFEE!",
    "dispatcher-message": "Dispatcher supporting the Stacjownik project!",
    "driver-message": "Driver supporting the Stacjownik project!"
  },
  "general": {
    "and": " and ",
@@ -141,7 +144,8 @@
    "filter-withComments": "COMMENTS",
    "filter-twr": "HIGH RISK CARGO",
    "filter-skr": "EXCEEDED GAUGE",
-    "filter-twr-skr": "ALL TYPES",
+    "filter-twr-skr": "BOTH TYPES",
    "filter-all-specials": "ALL",
    "filter-common": "NO WARNINGS",
    "filter-passenger": "PASSENGER",
    "filter-freight": "FREIGHT",
@@ -153,9 +157,9 @@
    "filter-clear": "CLEAR FILTERS",
    "filter-section-timetable-status": "TIMETABLE STATUS",
-    "filter-section-twrskr": "WARNINGS",
+    "filter-section-special": "SPECIAL TYPE",
-    "filter-all": "ALL ENTRIES",
+    "filter-all-statuses": "ALL",
    "filter-abandoned": "ABANDONED",
    "filter-fulfilled": "FULFILLED",
    "filter-active": "ACTIVE"
@@ -223,7 +227,10 @@
      "routes-2t-cat": "MIN. CATENARY DOUBLE TRACK ROUTES",
      "routes-2t-other": "MIN. OTHER DOUBLE TRACK ROUTES"
    },
-    "authors-search": "Search by author (other filters apply)",
+    "authors-search": "SEARCH BY AUTHOR NAME (other filters apply):",
    "authors-placeholder": "Enter the author nickname...",
    "authors-button-title": "Search",
    "minimum-hours-title": "SHOW ONLY SCENERIES UNTIL:",
    "now": "NOW",
    "hour": "h",
@@ -292,6 +299,21 @@
    "scenery-offline": "Offline ride",
    "timeout": "An error occured while trying to refresh SWDR timetable data!"
  },
  "train-stats": {
    "stats-button": "STATISTICS",
    "title": "STATISTICS ONLINE",
    "timetable-count": "ACTIVE TIMETABLES",
    "avg-speed": "AVG SPEED",
    "avg-timetable": "AVG TIMETABLE",
    "top-categories": "Timetable categories",
    "top-vehicles": "Vehicles online",
    "top-units": "Common units online",
    "stats-loading": "Loading...",
    "no-timetables": "No active timetables in this region!",
    "no-vehicles": "No active vehicles in this region!",
    "no-units": "No active units in this region!",
    "no-stats": "No statistics available for the current region!"
  },
  "journal": {
    "title": "DISPATCHER HISTORY",
    "loading": "Loading dispatcher history data...",
@@ -329,29 +351,49 @@
    "last-seen-at": "Last seen at",
    "currently-at": "Currently at",
-    "stats-title": "DRIVING STATISTICS OF",
+    "driver-stats": {
      "button": "DRIVER STATS",
      "title": "{name}'s DRIVER STATS",
      "info": "Enter a proper nickname into filters [F] to see user's driving statistics!",
      "timetables": "TIMETABLES",
      "longest-timetable": "LONGEST TIMETABLE",
      "avg-timetable": "AVERAGE TIMETABLE LENGTH",
      "distance": "DISTANCE",
      "stations": "STATIONS"
    },
-    "stats-timetables": "TIMETABLES",
+    "daily-stats": {
-    "stats-longest-timetable": "LONGEST TIMETABLE",
+      "button": "DAILY STATS",
-    "stats-avg-timetable": "AVERAGE TIMETABLE LENGTH",
+      "title": "STATS OF THE DAY",
-    "stats-distance": "DISTANCE",
+      "info": "Today's statistics are unavailable yet!",
-    "stats-stations": "STATIONS",
+      "total": "Issued timetables: {count} (total distance: {distance})",
      "longest": "The longest timetable: #{id} (made by {author} for {driver}, distance: {distance})",
      "most-active-dr": "The most active dispatcher: {dispatcher} (created {count})",
      "most-active-dr-many": "The most active dispatchers: {dispatchers} (created {count} each)",
      "most-active-driver": "The most active driver: {driver} (total driven distance: {distance})",
      "longest-duties": "The longest service: {dispatcher} at {station} (duration: {duration})",
      "count": "timetable | timetables",
-    "timetable-stats-title": "Daily stats on {date}",
+      "rippedSwitches": "RIPPED SWITCHES",
-    "timetable-stats-total": "Issued timetables: {count} (total distance: {distance})",
+      "derailments": "DERAILMENTS",
-    "timetable-stats-longest": "The longest timetable: #{id} (made by {author} for {driver}, distance: {distance})",
+      "skippedStopSignals": "SKIPPED STOP SIGNALS",
-    "timetable-stats-most-active-dr": "The most active dispatcher: {dispatcher} (created {count})",
+      "radioStops": "RADIOSTOPS",
-    "timetable-stats-most-active-dr-many": "The most active dispatchers: {dispatchers} (created {count} each)",
+      "kills": "KILLS"
-    "timetable-stats-most-active-driver": "The most active driver: {driver} (total driven distance: {distance})",
+    },
    "timetable-stats-longest-duties": "The longest service: {dispatcher} at {station} (duration: {duration})",
-    "timetable-count": "timetable | timetables",
+    "dispatcher-stats": {
-
+      "button": "DISPATCHER STATS",
-    "daily-stats-title": "DAILY STATS",
+      "title": "{name}'s DISPATCHER STATS",
-    "daily-stats-info": "Today's statistics are unavailable yet!",
+      "empty": "This user has no statistics saved yet!",
-
+      "info": "Enter a proper nickname into filters [F] to see user's dispatcher statistics!",
-    "driver-stats-title": "DRIVER STATS",
+      "services-count": "SERVICES",
-    "driver-stats-info": "Enter a proper nickname into filters [F] to see user's driving statistics!",
+      "service-max": "MAX SERVICE DURATION",
      "service-avg": "AVG SERVICE DURATION",
      "timetables-count": "ISSUED TIMETABLES",
      "timetables-sum": "TIMETABLES DISTANCE SUM",
      "timetables-max": "LONGEST TIMETABLE",
      "timetables-avg": "AVG TIMETABLE DISTANCE"
    },
    "stats-loading": "Fetching statistics...",
    "stats-error": "Oops! An unexpected error occurred while trying to fetch statistics! :/",
@@ -387,8 +429,8 @@
    "two-way-routes": "Two way routes",
    "option-active-timetables": "Active timetables",
-    "option-timetables-history": "Timetables history",
+    "option-timetables-history": "Timetables history PL1",
-    "option-dispatchers-history": "Dispatchers history",
+    "option-dispatchers-history": "Dispatchers history PL1",
    "timetable-author-title": "Issued by",
    "timetable-author-unknown": "Author unknown",
@@ -1,434 +0,0 @@
 {
  "general": {
    "and": " oraz ",
    "refresh": "ODŚWIEŻ",
    "TWR": "Towar niebezpieczny wysokiego ryzyka",
    "SKR": "Przekroczona skrajnia"
  },
  "app": {
    "sceneries": "SCENERIE",
    "trains": "POCIĄGI",
    "journal": "DZIENNIK",
    "loading": "Pobieranie danych...",
    "support": "Wspomóż projekt",
    "error": "Wystąpił problem z załadowaniem danych!",
    "no-result": "Brak wyników o podanych kryteriach!",
    "migration-warning": "Usługi Stacjownika będą niedostępne w godzinach 1:00-3:00 2 czerwca 2022r. z powodu migracji hostingów API!",
    "migration-confirm": "Przyjąłem!",
    "offline": "Aplikacja w trybie offline!"
  },
  "footer": {
    "discord": "Serwer Discord Stacjownika"
  },
  "update": {
    "title": "Nowa wersja Stacjownika jest dostępna!",
    "paragraph1": "Miłego korzystania z aplikacji i niech S2 będzie z wami!",
    "release-link": "Kliknij, aby przejrzeć listę zmian (GitHub)",
    "confirm-button": "ZAKTUALIZUJ",
    "later-button": "PÓŹNIEJ"
  },
  "data-status": {
    "S1-offline": "<b>Sygnał S1</b> <br> Aplikacja działa w trybie offline!",
    "S1a-connection": "<b>Sygnał S1a</b> <br> Błąd podczas próby połączenia się z API Stacjownika!",
    "S1a-sceneries": "<b>Sygnał S1a</b> <br> Błąd podczas pobierania danych o sceneriach online!",
    "S2": "<b>Sygnał S2</b> <br> Pomyślnie załadowano dane!",
    "S3": "<b>Sygnał S3</b> <br> Pobieranie danych...",
    "S5-timetables": "<b>Sygnał S5</b> <br> Rozkłady jazdy mogą być niekompletne!",
    "S5-dispatchers": "<b>Sygnał S5</b> <br> Błąd podczas pobierania danych o statusach dyżurnych ruchu!",
    "S5-trains": "<b>Sygnał S5</b>  <br> Błąd podczas pobierania danych o pociągach online!"
  },
  "desc": {
    "control-type": "Sterowanie: ",
    "signals-type": "Sygnalizacja: ",
    "SBL": "Sceneria posiada SBL na szlakach: ",
    "SUP": "Wymaga programu SUP do kontroli systemu RASP-UZK",
    "TWB-all": "Sceneria posiada blokadę dwukierunkową na wszystkich szlakach",
    "TWB-routes": "Sceneria posiada blokadę dwukierunkową na szlakach: ",
    "default": "Sceneria dostępna domyślnie w paczce z grą",
    "non-public": "Sceneria niepubliczna",
    "unavailable": "Sceneria niedostępna",
    "unknown": "Nieznana sceneria",
    "real": "Sceneria z realnymi liniami kolejowymi: ",
    "abandoned": "Sceneria wycofana z rozgrywki"
  },
  "signals": {
    "title": "Sygnalizacja",
    "współczesna": "współczesna",
    "mieszana": "mieszana",
    "kształtowa": "kształtowa",
    "historyczna": "historyczna"
  },
  "controls": {
    "title": "Sterowanie",
    "SPK": "SPK",
    "SCS": "SCS",
    "SCS-SPK": "SCS/SPK",
    "SPE": "SPE",
    "ręczne": "ręczne",
    "ręczne+SPK": "ręczne z SPK",
    "ręczne+SCS": "ręczne z SCS",
    "mechaniczne": "mechaniczne",
    "mechaniczne+SPK": "mechaniczne z SPK",
    "mechaniczne+SCS": "mechaniczne z SCS"
  },
  "status": {
    "online": "DO ",
    "free": "WOLNA",
    "ending": "KOŃCZY",
    "not-signed": "NIEZALOGOWANY",
    "no-limit": "BEZ LIMITU",
    "unavailable": "NIEDOSTĘPNY",
    "brb": "Z/W",
    "no-space": "BRAK MIEJSCA",
    "unknown": "NIEZNANY"
  },
  "options": {
    "filters": "FILTRY",
    "donate": "WESPRZYJ",
    "search-button": "Szukaj",
    "reset-button": "Zresetuj",
    "sort-title": "SORTUJ WG:",
    "filter-title": "FILTRUJ WG:",
    "search-title": "SZUKAJ:",
    "search-train-no": "Nr pociągu",
    "search-train": "Nr pociągu / #",
    "search-driver": "Nick maszynisty",
    "search-dispatcher": "Nick dyżurnego",
    "search-station": "Nazwa scenerii",
    "search-author": "Nick autora rozkładu jazdy",
    "search-issuedFrom": "Sceneria początkowa",
    "search-timetables-date": "Data rozkładu jazdy (UTC+2 / CEST)",
    "search-dispatchers-date": "Data służby (UTC+2 / CEST)",
    "search-date": "Data (UTC+2 / CEST)",
    "sort-routeDistance": "kilometraż",
    "sort-allStopsCount": "stacje",
    "sort-beginDate": "data",
    "sort-timetableId": "ID rozkładu",
    "sort-timestampFrom": "data",
    "sort-duration": "czas dyżuru",
    "sort-id": "id rozkładu",
    "sort-mass": "masa",
    "sort-speed": "prędkość",
    "sort-length": "długość",
    "sort-timetable": "nr pociągu",
    "sort-progress": "przebyta trasa",
    "sort-delay": "opóźnienie",
    "sort-comments": "uwagi ekspl.",
    "filter-withComments": "UWAGI EKSPLOATACYJNE",
    "filter-noComments": "BEZ UWAG",
    "filter-twr": "WYS. RYZYKA",
    "filter-skr": "SKRAJNIA",
    "filter-twr-skr": "WSZYSTKIE",
    "filter-common": "ZWYKŁE",
    "filter-passenger": "PASAŻERSKIE",
    "filter-freight": "TOWAROWE",
    "filter-other": "INNE",
    "filter-noTimetable": "BEZ RJ",
    "filter-withTimetable": "ROZKŁAD JAZDY",
    "filter-reset": "ZRESETUJ FILTRY",
    "filter-clear": "WYŁĄCZ FILTRY",
    "filter-section-timetable-status": "STATUS ROZKŁADU JAZDY",
    "filter-section-twrskr": "UWAGI",
    "filter-all": "WSZYSTKIE",
    "filter-abandoned": "PORZUCONE",
    "filter-fulfilled": "WYPEŁNIONE",
    "filter-active": "AKTYWNE"
  },
  "filters": {
    "desc": " &bull; Kliknięcie: zaznaczenie / odznaczenie filtru <br /> &bull; Podwójne kliknięcie: odznaczenie reszty filtrów z <b class='text--primary'>grupy</b> <br /> &bull; <span style='color: coral'>RESET</span>: zresetowanie filtrów z <b class='text--primary'>grupy</b>",
    "sections": {
      "quick": "SZYBKIE FILTRY",
      "reality": "FIKCYJNOŚĆ SCENERII",
      "package-access": "DOSTĘPNOŚĆ W PACZCE",
      "access": "DOSTĘPNOŚĆ OGÓLNA",
      "control": "TYP STEROWANIA",
      "signals": "TYP SYGNALIZACJI",
      "addons": "DODATKOWE PROGRAMY",
      "blockades": "BLOKADY LINIOWE",
      "status": "STATUS ONLINE"
    },
    "all-available": "WSZYSTKIE DOSTĘPNE",
    "all-free": "WSZYSTKIE WOLNE",
    "endingStatus": "KOŃCZY",
    "afkStatus": "Z/W",
    "noSpaceStatus": "BRAK MIEJSCA",
    "unavailableStatus": "NIEDOSTĘPNY",
    "title": "FILTRUJ STACJE",
    "default": "DOMYŚLNA",
    "not-default": "POZA PACZKĄ",
    "real": "REALNA",
    "fictional": "FIKCYJNA",
    "unavailable": "NIEDOSTĘPNA",
    "non-public": "NIEPUBLICZNA",
    "abandoned": "WYCOFANA",
    "SPK": "SPK",
    "SPK-R": "SPK + RĘCZNE",
    "SPK-M": "SPK + MECH.",
    "SCS": "SCS",
    "SCS-R": "SCS + RĘCZNE",
    "SCS-M": "SCS + MECH.",
    "SPE": "SPE",
    "manual": "RĘCZNE",
    "SUP": "SUP (RASP-UZK)",
    "noSUP": "BEZ SUP",
    "SBL": "SAMOCZYNNA",
    "PBL": "PÓŁSAMOCZYNNA",
    "mechanical": "MECHANICZNE",
    "modern": "WSPÓŁCZESNA",
    "semaphores": "KSZTAŁTOWA",
    "mixed": "MIESZANA",
    "historical": "HISTORYCZNA",
    "free": "WOLNA",
    "occupied": "ZAJĘTA",
    "sliders": {
      "min-lvl": "MIN. WYMAGANY POZIOM DYŻURNEGO",
      "max-lvl": "MAKS. WYMAGANY POZIOM DYŻURNEGO",
      "routes-1t-cat": "SZLAKI JEDNOTOROWE ZELEKTR. (MINIMUM)",
      "routes-1t-other": "SZLAKI JEDNOTOROWE NIEZELEKTR. (MINIMUM)",
      "routes-2t-cat": "SZLAKI DWUTOROWE ZELEKTR. (MINIMUM)",
      "routes-2t-other": "SZLAKI DWUTOROWE NIEZELEKTR. (MINIMUM)"
    },
    "authors-search": "Szukaj autora (uwzględnia inne filtry)",
    "minimum-hours-title": "POKAŻ TYLKO SCENERIE DOSTĘPNE MINIMUM DO:",
    "now": "TERAZ",
    "hour": " godz.",
    "no-limit": "BEZ LIMITU",
    "include-selected": "POKAŻ ZAZNACZONE",
    "save": "ZAPAMIĘTAJ FILTRY",
    "reset": "RESETUJ FILTRY",
    "close": "ZAMKNIJ FILTRY"
  },
  "sceneries": {
    "station": "Stacja",
    "abbr": "Skrót\nposterunku",
    "min-lvl": "Min. poziom\ndyżurnego",
    "status": "Status",
    "dispatcher": "Dyżurny",
    "dispatcher-lvl": "Poziom\ndyżurnego",
    "routes": "Szlaki\n2tor / 1tor",
    "general": "Informacje\nogólne",
    "user": "Maszyniści online",
    "spawn": "Otwarte spawny",
    "timetableAll": "Aktywne rozkłady jazdy",
    "timetableConfirmed": "Zatwierdzone rozkłady jazdy",
    "timetableUnconfirmed": "Niezatwierdzone rozkłady jazdy",
    "no-stations": "Brak stacji do wyświetlenia!",
    "scenery-search": "Wyszukaj scenerię..."
  },
  "trains": {
    "no-trains": "Brak pociągów do wyświetlenia!",
    "loading": "Pobieranie danych o pociągach...",
    "offline": "Przejazd offline",
    "stats": "STATYSTYKI RUCHU",
    "stats-speed": "PRĘDKOŚCI POCIĄGÓW (MIN, ŚR, MAX) [km/h]",
    "stats-length": "DŁUGOŚCI ROZKŁADÓW (MIN, ŚR, MAX) [km]",
    "stats-categories": "KATEGORIE RJ",
    "stats-special-twr": "WYSOKIEGO RYZYKA",
    "stats-special-skr": "PRZEKROCZONA SKRAJNIA",
    "stats-locos": "NAJCZĘSTSZE JEDNOSTKI",
    "current-scenery": "na scenerii",
    "current-signal": "przy semaforze",
    "current-track": "na szlaku",
    "delayed": "Opóźniony: ",
    "preponed": "Przed czasem: ",
    "on-time": "Planowo",
    "route-progress": "Postęp: ",
    "detailed-timetable": "Szczegółowy rozkład jazdy pociągu ",
    "via-title": "Przez: ",
    "no-timetable": "brak rozkładu jazdy",
    "distance-exceeded": "Uwaga! Z powodu wewnętrznego błędu serwera TD2, rozkłady jazdy o kilometrażu powyżej 200km mogą być niepoprawne!",
    "cars": "Wagony",
    "EZT": "EZT",
    "SZT": "SZT",
    "loco-electric": "Elektrowóz",
    "loco-diesel": "Spalinowóz",
    "timetable-comments": "Pociąg z uwagami eksploatacyjnymi",
    "comment": "Uwagi eksploatacyjne dla: ",
    "table-limit": "Dla płynności działania strony pokazanych jest tylko 10 pociągów zgodnie z wybranymi filtrami.",
    "last-seen-now": "od niedawna",
    "last-seen-min": "od minuty",
    "last-seen-ago": "od {minutes} minut",
    "scenery-offline": "Przejazd offline",
    "timeout": "Wystąpił problem z aktualizacją rozkładów jazdy z SWDR"
  },
  "journal": {
    "title": "HISTORIA DYŻURÓW",
    "loading": "Ładowanie historii dyżurów...",
    "no-history": "Brak historii dyżurów dla tej scenerii!",
    "data-refreshed-at": "Dane odświeżone o",
    "section-timetables": "ROZKŁADY JAZDY",
    "section-dispatchers": "DYŻURNI",
    "no-further-data": "Brak dalszych wyników dla podanych parametrów",
    "loading-further-data": "Ładowanie...",
    "online-since": "ONLINE OD",
    "duty-lasted": "Dyżur trwał",
    "hours": "{value} godz.",
    "minutes": "{value} min.",
    "seconds": "{value} sek.",
    "route-length": "Kilometraż:",
    "station-count": "Stacje:",
    "dispatcher-name": "Autor",
    "timetable-day": "Rozkład z dnia",
    "timetable-active": "AKTYWNY",
    "timetable-fulfilled": "WYPEŁNIONY",
    "timetable-abandoned": "PORZUCONY",
    "stock-info": "DODATKOWE INFORMACJE",
    "stock-length": "Długość",
    "stock-mass": "Masa",
    "stock-max-speed": "Prędkość maks.",
    "load-data": "Pobierz dalszą historię...",
    "stats-title": "STATYSTYKI MASZYNISTY",
    "last-seen-at": "Ostatnio widziany na: ",
    "currently-at": "Obecnie na scenerii: ",
    "stats-timetables": "ROZKŁADY JAZDY",
    "stats-longest-timetable": "NAJDŁUŻSZY RJ",
    "stats-avg-timetable": "ŚREDNIA DŁUGOŚĆ RJ",
    "stats-distance": "DYSTANS",
    "stats-stations": "STACJE",
    "timetable-stats-total": "Stworzone rozkłady jazdy: {count} (łączny dystans: {distance})",
    "timetable-stats-longest": "Najdłuższy rozkład jazdy: #{id} (stworzony przez dyżurnego {author} dla maszynisty {driver} o dystansie {distance})",
    "timetable-stats-most-active-dr": "Najaktywniejszy dyżurny: {dispatcher} (stworzył {count})",
    "timetable-stats-most-active-dr-many": "Najaktywniejsi dyżurni: {dispatchers} (stworzyli po {count})",
    "timetable-stats-most-active-driver": "Najaktywniejszy maszynista: {driver} (łączny przejechany dystans: {distance})",
    "timetable-stats-longest-duties": "Najdłuższa służba: {dispatcher} na scenerii {station} (czas trwania: {duration})",
    "timetable-count": "rozkład jazdy | rozkładów jazdy",
    "daily-stats-title": "STATYSTYKI DNIA",
    "daily-stats-info": "Dzisiejsze statystyki nie są jeszcze dostępne!",
    "driver-stats-title": "STATYSTYKI GRACZA",
    "driver-stats-info": "Wpisz nazwę użytkownika w filtrach [F], aby zobaczyć jego statystyki maszynisty!",
    "stats-loading": "Pobieranie statystyk...",
    "stats-error": "Ups! Wystąpił błąd podczas próby pobrania statystyk! :/",
    "timetable-location-signal": "semafor:",
    "timetable-location-route": "szlak:",
    "history-name": "Sceneria",
    "history-hash": "Hash",
    "history-dispatcher": "Dyżurny",
    "history-level": "Poziom",
    "history-rate": "Ocena",
    "history-region": "Region",
    "history-date": "Data służby"
  },
  "scenery": {
    "users": "GRACZE ONLINE",
    "spawns": "OTWARTE SPAWNY",
    "timetables": "AKTYWNE ROZKŁADY JAZDY",
    "no-timetables": "Brak aktywnych rozkładów!",
    "offline": "Sceneria jest offline",
    "no-users": "BRAK AKTYWNYCH GRACZY",
    "no-spawns": "BRAK OTWARTYCH SPAWNÓW",
    "no-scenery": "Ups! Ta sceneria nie istnieje!",
    "return-btn": "Wróć na stronę główną",
    "history-btn": "Przejdź do widoku historii dyżurnych ruchu",
    "info-btn": "Wróć do widoku scenerii",
    "authors-title": "Autor scenerii | Autorzy scenerii",
    "abbrev": "Skrót posterunku:",
    "lines-title": "Rzeczywiste linie",
    "project-title": "Projekt",
    "one-way-routes": "Szlaki jednotorowe",
    "two-way-routes": "Szlaki dwutorowe",
    "option-active-timetables": "Aktywne rozkłady jazdy",
    "option-timetables-history": "Historia rozkładów",
    "option-dispatchers-history": "Historia dyżurów",
    "timetable-author-title": "Wydany przez",
    "timetable-author-unknown": "Autor nieznany",
    "timetables-history-id": "ID",
    "timetables-history-number": "Numer",
    "timetables-history-route": "Trasa",
    "timetables-history-driver": "Maszynista",
    "timetables-history-author": "Autor RJ",
    "timetables-history-date": "Data",
    "dispatchers-history-hash": "Hash",
    "dispatchers-history-dispatcher": "Dyżurny",
    "dispatchers-history-level": "Poziom",
    "dispatchers-history-rate": "Ocena",
    "dispatchers-history-date": "Data służby",
    "req-level": "ogólnodostępna | minimum {lvl} poziom dyżurnego | minimum {lvl} poziom dyżurnego",
    "history-list-empty": "Brak historii dla tej scenerii!",
    "forum-topic": "Oficjalny wątek scenerii {name}",
    "pragotron-link": "Paletowa tablica informacyjna (beta)",
    "tablice-link": "Tablica informacyjna zbiorcza (autorstwa Thundo)",
    "bottom-info": "Pokaż pełną historię w zakładce Dziennika"
  },
  "availability": {
    "title": "Dostępność",
    "default": "w paczce",
    "nonDefault": "poza paczką",
    "unavailable": "niedostępna",
    "nonPublic": "niepubliczna",
    "abandoned": "wycofana"
  },
  "timetables": {
    "timetable-only": "Wyodrębnij rozkłady jazdy",
    "end": "Koniec rozkładu jazdy",
    "terminated": "Rozkład jazdy zakończony",
    "begins": "ROZPOCZYNA\nBIEG",
    "terminates": "KOŃCZY BIEG",
    "from": "Z",
    "to": "DO",
    "desc-arriving": "Pociągu nie ma jeszcze na tej scenerii. Przyjedzie z: {prevStationName} (szlak {prevDepartureLine})",
    "desc-online": "Pociąg jest na tej scenerii. Odjedzie do: {nextStationName} (szlak {nextArrivalLine})",
    "desc-stopped": "Pociąg jest na tej scenerii i odbywa postój. Odjedzie do: {nextStationName} (szlak {nextArrivalLine})",
    "desc-next-arrival": "Odjeżdża do: {nextStationName} (szlak {nextArrivalLine})",
    "desc-departed": "Pociąg jest na tej scenerii i został odprawiony. Odjeżdża do: {nextStationName} (szlak {nextArrivalLine})",
    "desc-departed-away": "Pociąg został odprawiony i odjechał do: {nextStationName} (szlak {nextArrivalLine})",
    "desc-end": "Pociąg kończy bieg",
    "desc-terminated": "Pociąg skończył bieg"
  },
  "history": {
    "title": "DZIENNIK ROZKŁADÓW JAZDY"
  }
 }
@@ -9,12 +9,15 @@
    "p2-b3": "Stacjobot",
    "p2-a1": "serwerze Discord",
    "p3": "<b>Jeśli masz możliwość i chcesz wspomóc moją twórczość dla symulatora, będę wdzięczny za wszelkie pomoce finansowe, które pozwolą na choćby częściowe pokrycie kosztów serwera oraz dalsze rozwijanie możliwości aplikacji!</b>",
-    "p4": "Każda osoba, która postanowi przelać co najmniej {b1} na rozwój Stacjownika, otrzyma na życzenie symboliczne {img}{b2} nicku użytkownika w zakładkach \"Scenerie\" i \"Pociągi\" aplikacji i moim serwerze Discord (po zweryfikowaniu autora płatności, najlepiej poprzez podanie nicku bezpośrednio przy niej).",
+    "p4": "Każda osoba, która postanowi przelać co najmniej {b1} (w przypadku PayPala musi być to opłata brutto z dodatkową opłatą za transakcję) na rozwój Stacjownika, otrzyma na życzenie symboliczne {img}{b2} nicku użytkownika na stronie i moim serwerze Discord (po zweryfikowaniu autora płatności, najlepiej poprzez podanie nicku bezpośrednio przy niej).",
    "p4-b1": "5 złotych",
    "p4-b2": "wyróżnienie",
    "p5": "Dzięki i miłego korzystania z aplikacji! <br />~ Spythere",
    "action-exit": "Może kiedy indziej...",
-    "action-confirm": "WSPOMÓŻ!"
+    "action-paypal": "PRZELEJ PAYPALEM",
    "action-buycoffee": "POSTAW KAWĘ!",
    "dispatcher-message": "Dyżurny wspierający projekt Stacjownika!",
    "driver-message": "Maszynista wspierający projekt Stacjownika!"
  },
  "general": {
    "and": " oraz ",
@@ -130,7 +133,8 @@
    "filter-noComments": "BEZ UWAG",
    "filter-twr": "WYS. RYZYKA",
    "filter-skr": "SKRAJNIA",
-    "filter-twr-skr": "WSZYSTKIE",
+    "filter-twr-skr": "TWR/SKR",
    "filter-all-statuses": "WSZYSTKIE",
    "filter-common": "ZWYKŁE",
    "filter-passenger": "PASAŻERSKIE",
    "filter-freight": "TOWAROWE",
@@ -142,9 +146,9 @@
    "filter-clear": "WYŁĄCZ FILTRY",
    "filter-section-timetable-status": "STATUS ROZKŁADU JAZDY",
-    "filter-section-twrskr": "UWAGI",
+    "filter-section-special": "TYPY SPECJALNE",
-    "filter-all": "WSZYSTKIE",
+    "filter-all-specials": "WSZYSTKIE",
    "filter-abandoned": "PORZUCONE",
    "filter-fulfilled": "WYPEŁNIONE",
    "filter-active": "AKTYWNE"
@@ -214,7 +218,9 @@
      "routes-2t-other": "SZLAKI DWUTOROWE NIEZELEKTR. (MINIMUM)"
    },
-    "authors-search": "Szukaj autora (uwzględnia inne filtry)",
+    "authors-search": "SZUKAJ AUTORA (uwzględnia inne filtry):",
    "authors-placeholder": "Wpisz nick autora...",
    "authors-button-title": "Szukaj",
    "minimum-hours-title": "POKAŻ TYLKO SCENERIE DOSTĘPNE MINIMUM DO:",
    "now": "TERAZ",
    "hour": " godz.",
@@ -275,6 +281,21 @@
    "timeout": "Wystąpił problem z aktualizacją rozkładów jazdy z SWDR"
  },
  "train-stats": {
    "stats-button": "STATYSTYKI",
    "title": "STATYSTYKI ONLINE",
    "timetable-count": "AKTYWNE RJ",
    "avg-speed": "ŚREDNIA PRĘDKOŚĆ",
    "avg-timetable": "ŚREDNI RJ",
    "top-categories": "Kategorie RJ",
    "top-vehicles": "Pojazdy w grze",
    "top-units": "Najczęstsze jednostki w grze",
    "stats-loading": "Ładowanie...",
    "no-timetables": "Brak aktywnych rozkładów jazdy na tym serwerze!",
    "no-vehicles": "Brak aktywnych pojazdów na tym serwerze!",
    "no-units": "Brak aktywnych jednostek na tym serwerze!",
    "no-stats": "Brak statystyk online dla wybranego serwera!"
  },
  "journal": {
    "title": "HISTORIA DYŻURÓW",
    "loading": "Ładowanie historii dyżurów...",
@@ -308,31 +329,51 @@
    "load-data": "Pobierz dalszą historię...",
    "stats-title": "STATYSTYKI MASZYNISTY",
    "last-seen-at": "Ostatnio widziany na: ",
    "currently-at": "Obecnie na scenerii: ",
-    "stats-timetables": "ROZKŁADY JAZDY",
+    "driver-stats": {
-    "stats-longest-timetable": "NAJDŁUŻSZY RJ",
+      "button": "STAT. MASZYNISTY",
-    "stats-avg-timetable": "ŚREDNIA DŁUGOŚĆ RJ",
+      "title": "STATYSTYKI MASZYNISTY {name}",
-    "stats-distance": "DYSTANS",
+      "info": "Wpisz nazwę użytkownika w filtrach [F], aby zobaczyć jego statystyki maszynisty!",
-    "stats-stations": "STACJE",
+      "timetables": "ROZKŁADY JAZDY",
      "longest-timetable": "NAJDŁUŻSZY RJ",
      "avg-timetable": "ŚREDNIA DŁUGOŚĆ RJ",
      "distance": "DYSTANS",
      "stations": "STACJE"
    },
-    "timetable-stats-total": "Stworzone rozkłady jazdy: {count} (łączny dystans: {distance})",
+    "daily-stats": {
-    "timetable-stats-longest": "Najdłuższy rozkład jazdy: #{id} (stworzony przez dyżurnego {author} dla maszynisty {driver} o dystansie {distance})",
+      "button": "STATYSTYKI DNIA",
-    "timetable-stats-most-active-dr": "Najaktywniejszy dyżurny: {dispatcher} (stworzył {count})",
+      "title": "STATYSTYKI DNIA",
-    "timetable-stats-most-active-dr-many": "Najaktywniejsi dyżurni: {dispatchers} (stworzyli po {count})",
+      "info": "Dzisiejsze statystyki nie są jeszcze dostępne!",
-    "timetable-stats-most-active-driver": "Najaktywniejszy maszynista: {driver} (łączny przejechany dystans: {distance})",
+      "total": "Stworzone rozkłady jazdy: {count} (łączny dystans: {distance})",
-    "timetable-stats-longest-duties": "Najdłuższa służba: {dispatcher} na scenerii {station} (czas trwania: {duration})",
+      "longest": "Najdłuższy rozkład jazdy: #{id} (stworzony przez dyżurnego {author} dla maszynisty {driver} o dystansie {distance})",
      "most-active-dr": "Najaktywniejszy dyżurny: {dispatcher} (stworzył {count})",
      "most-active-dr-many": "Najaktywniejsi dyżurni: {dispatchers} (stworzyli po {count})",
      "most-active-driver": "Najaktywniejszy maszynista: {driver} (łączny przejechany dystans: {distance})",
      "longest-duties": "Najdłuższa służba: {dispatcher} na scenerii {station} (czas trwania: {duration})",
      "count": "rozkład jazdy | rozkładów jazdy",
-    "timetable-count": "rozkład jazdy | rozkładów jazdy",
+      "rippedSwitches": "ROZPRUTE ZWROTNICE",
      "derailments": "WYKOLEJENIA",
      "skippedStopSignals": "POMINIĘTE S1",
      "radioStops": "RADIOSTOPY",
      "kills": "POTRĄCENIA"
    },
-    "daily-stats-title": "STATYSTYKI DNIA",
+    "dispatcher-stats": {
-    "daily-stats-info": "Dzisiejsze statystyki nie są jeszcze dostępne!",
+      "button": "STATYSTYKI DYŻURNEGO",
-
+      "title": "STATYSTYKI DYŻURNEGO {name}",
-    "driver-stats-title": "STATYSTYKI GRACZA",
+      "info": "Wpisz nazwę użytkownika w filtrach [F], aby zobaczyć jego statystyki dyżurnego!",
-    "driver-stats-info": "Wpisz nazwę użytkownika w filtrach [F], aby zobaczyć jego statystyki maszynisty!",
+      "services-count": "DYŻURY",
      "service-max": "MAKS. CZAS DYŻURU",
      "service-avg": "ŚREDNI CZAS DYŻURU",
      "timetables-count": "WYSTAWIONE RJ",
      "timetables-sum": "SUMA WYSTAWIONYCH RJ",
      "timetables-max": "NAJDŁUŻSZY WYSTAWIONY RJ",
      "timetables-avg": "ŚREDNIA WYSTAWIONYCH RJ"
    },
    "stats-loading": "Pobieranie statystyk...",
    "stats-error": "Ups! Wystąpił błąd podczas próby pobrania statystyk!",
@@ -368,8 +409,8 @@
    "two-way-routes": "Szlaki dwutorowe",
    "option-active-timetables": "Aktywne rozkłady jazdy",
-    "option-timetables-history": "Historia rozkładów",
+    "option-timetables-history": "Historia rozkładów PL1",
-    "option-dispatchers-history": "Historia dyżurów",
+    "option-dispatchers-history": "Historia dyżurów PL1",
    "timetable-author-title": "Wydany przez",
    "timetable-author-unknown": "Autor nieznany",
@@ -0,0 +1,16 @@
 import { defineComponent } from 'vue';
 import { useApiStore } from '../store/apiStore';
 export default defineComponent({
  data() {
    return {
      apiStore: useApiStore()
    };
  },
  methods: {
    isDonator(name: string) {
      return this.apiStore.donatorsData.includes(name);
    }
  }
 });
@@ -10,8 +10,6 @@ export default defineComponent({
    mountObserver(actionFunction: () => void, target: Element) {
      this.observer = new IntersectionObserver(
        (entries) => {
          console.log(entries);
          if (entries[0].intersectionRatio > 0.5) actionFunction();
        },
        { threshold: 0.2 }
@@ -1,10 +1,10 @@
 import { defineComponent } from 'vue';
-import { useStore } from '../store/mainStore';
+import { useMainStore } from '../store/mainStore';
 export default defineComponent({
  data() {
    return {
-      store: useStore()
+      store: useMainStore()
    };
  },
@@ -18,7 +18,8 @@ const routes: Array<RouteRecordRaw> = [
    props: (route) => ({
      train: route.query.train,
      driver: route.query.driver,
-      trainId: route.query.trainId
+      trainId: route.query.trainId,
      region: route.query.region
    })
  },
  {
@@ -39,9 +40,7 @@ const routes: Array<RouteRecordRaw> = [
    name: 'JournalTimetables',
    component: JournalTimetablesVue,
    props: (route) => ({
-      trainNo: route.query.trainNo,
+      region: route.query.region
      driverName: route.query.driverName,
      timetableId: route.query.timetableId
    })
  },
  {
@@ -49,8 +48,7 @@ const routes: Array<RouteRecordRaw> = [
    name: 'JournalDispatchers',
    component: JournalDispatchersVue,
    props: (route) => ({
-      sceneryName: route.query.sceneryName,
+      region: route.query.region
      dispatcherName: route.query.dispatcherName
    })
  },
  {
@@ -61,12 +59,10 @@ const routes: Array<RouteRecordRaw> = [
 const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
-    if (to.name == 'SceneryView' && from.name && from.query['view'] === undefined)
+    if (to.name == 'SceneryView' && from.name !== to.name && from.query['view'] === undefined)
      return { el: `.app_main` };
    if (savedPosition) return savedPosition;
    // if (from.name == 'SceneryView' && to.name == 'StationsView') return { el: `.last-selected`, top: 20 };
  },
  history: createWebHistory(),
  routes
@@ -1,5 +1,5 @@
 import { Availability, OnlineScenery, ScheduledTrain } from '../../store/typings';
-import StationRoutes from './StationRoutes';
+import { StationRoutes } from './StationRoutes';
 export default interface Station {
  name: string;
@@ -1,25 +1,8 @@
-export default interface StationRoutes {
+import { StationRoutesInfo } from '../../store/typings';
  oneWay: {
    name: string;
    catenary: boolean;
    SBL: boolean;
    TWB: boolean;
    isInternal: boolean;
    tracks: number;
    speed: number;
    length: number;
  }[];
-  twoWay: {
+export interface StationRoutes {
-    name: string;
+  oneWay: StationRoutesInfo[];
-    catenary: boolean;
+  twoWay: StationRoutesInfo[];
    SBL: boolean;
    TWB: boolean;
    isInternal: boolean;
    tracks: number;
    speed: number;
    length: number;
  }[];
  /* [catenary, noCatenary] */
  oneWayCatenaryRouteNames: string[];
@@ -1,7 +0,0 @@
 export const URLs = {
  stacjownikAPI:
    import.meta.env.VITE_APP_API_DEV === '1' && !import.meta.env.PROD
      ? 'http://localhost:3001'
      : 'https://stacjownik.spythere.eu',
  stacjownikAPIDev: 'localhost:3000'
 };
@@ -0,0 +1,134 @@
 import { defineStore } from 'pinia';
 import http from '../http';
 import { API } from '../typings/api';
 import axios from 'axios';
 import { Status } from '../typings/common';
 import { StationJSONData } from './typings';
 export const useApiStore = defineStore('apiStore', {
  state: () => ({
    dataStatuses: {
      connection: Status.Data.Loading,
      sceneries: Status.Data.Loading,
      timetables: Status.Data.Loading,
      dispatchers: Status.Data.Loading,
      trains: Status.Data.Loading
    },
    activeData: undefined as API.ActiveData.Response | undefined,
    rollingStockData: undefined as API.RollingStock.Response | undefined,
    donatorsData: [] as API.Donators.Response,
    sceneryData: [] as StationJSONData[],
    activeDataTimeout: undefined as number | undefined
  }),
  actions: {
    async setupAPI() {
      // Static data
      this.fetchStockInfoData();
      this.fetchDonatorsData();
      this.fetchStationsGeneralInfo();
      if (this.activeDataTimeout === undefined) this.startActiveDataScheduler();
    },
    // async setDataStatuses() {
    //   if (!window.navigator.onLine) {
    //     this.dataStatuses.connection = Status.Data.Offline;
    //     this.dataStatuses.sceneries = Status.Data.Offline;
    //     this.dataStatuses.trains = Status.Data.Offline;
    //     this.dataStatuses.dispatchers = Status.Data.Offline;
    //     this.dataStatuses.timetables = Status.Data.Offline;
    //   }
    //   if (!this.activeData?.activeSceneries) {
    //     this.dataStatuses.connection = Status.Data.Loaded;
    //     this.dataStatuses.sceneries = Status.Data.Error;
    //     this.dataStatuses.trains = Status.Data.Error;
    //     this.dataStatuses.dispatchers = Status.Data.Error;
    //     return;
    //   }
    //   this.dataStatuses.connection = Status.Data.Loaded;
    //   this.dataStatuses.sceneries = Status.Data.Loaded;
    //   this.dataStatuses.trains = !this.activeData.trains ? Status.Data.Warning : Status.Data.Loaded;
    //   this.dataStatuses.dispatchers = Status.Data.Loaded;
    // },
    async fetchDonatorsData() {
      try {
        const response = await http.get<API.Donators.Response>('api/getDonators');
        this.donatorsData = response.data;
      } catch (error) {
        console.error('Ups! Wystąpił błąd podczas pobierania informacji o donatorach:', error);
      }
    },
    async fetchStockInfoData() {
      try {
        this.rollingStockData = (
          await axios.get<API.RollingStock.Response>(
            'https://raw.githubusercontent.com/Spythere/api/main/td2/data/stockInfo.json'
          )
        ).data;
      } catch (error) {
        console.error('Ups! Wystąpił błąd podczas pobierania informacji o taborze z API:', error);
      }
    },
    async startActiveDataScheduler() {
      if (!window.navigator.onLine) {
        this.dataStatuses.connection = Status.Data.Offline;
        return;
      }
      if (import.meta.env.VITE_API_MODE === 'mock') {
        const mockActiveData = await import('../data/mockActiveData.json');
        this.dataStatuses.connection = Status.Data.Loaded;
        this.activeData = mockActiveData;
        console.warn('Stacjownik działa w trybie mockowania danych z WS');
        return;
      }
      try {
        const data = (await http.get<API.ActiveData.Response>('api/getActiveData')).data;
        this.activeData = data;
        this.dataStatuses.connection = Status.Data.Loaded;
      } catch (error) {
        this.dataStatuses.connection = Status.Data.Error;
        console.error('Wystąpił błąd podczas pobierania danych online z API!');
      } finally {
        this.activeDataTimeout = window.setTimeout(
          () => {
            this.startActiveDataScheduler();
          },
          ~~(1000 * (Math.random() * (25 - 20) + 25))
        );
      }
    },
    async stopActiveDataScheduler() {
      window.clearTimeout(this.activeDataTimeout);
      this.activeDataTimeout = undefined;
    },
    async fetchStationsGeneralInfo() {
      const sceneryData: StationJSONData[] = (await http.get<StationJSONData[]>('api/getSceneries'))
        .data;
      if (!sceneryData) {
        this.dataStatuses.sceneries = Status.Data.Error;
        return;
      }
      this.dataStatuses.sceneries = Status.Data.Loaded;
      this.sceneryData = sceneryData;
    }
  }
 });
@@ -1,42 +1,24 @@
 import axios from 'axios';
 import { defineStore } from 'pinia';
 import { io } from 'socket.io-client';
 import StationRoutes from '../scripts/interfaces/StationRoutes';
 import Train from '../scripts/interfaces/Train';
 import { URLs } from '../scripts/utils/apiURLs';
 import { parseSpawns, getScheduledTrains, getStationTrains } from './utils';
-import { OnlineScenery, ScheduledTrain, StationJSONData, StoreState } from './typings';
+import { OnlineScenery, ScheduledTrain, StoreState } from './typings';
 import packageInfo from '../../package.json';
 import { Websocket, API, GithubAPI } from '../typings/api';
 import { Status } from '../typings/common';
 import Station from '../scripts/interfaces/Station';
 import { useApiStore } from './apiStore';
 import { API } from '../typings/api';
 import { StationRoutes } from '../scripts/interfaces/StationRoutes';
-export const useStore = defineStore('store', {
+export const useMainStore = defineStore('store', {
  state: () =>
    ({
      activeData: {} as unknown,
      rollingStockData: undefined,
      donatorsData: [],
      stationList: [],
      regionOnlineCounters: [],
      routesList: [],
      sceneryData: [],
      lastDispatcherStatuses: [],
      region: { id: 'eu', value: 'PL1' },
      trainCount: 0,
      stationCount: 0,
      webSocket: undefined,
      isOffline: false,
      dispatcherStatsName: '',
-      dispatcherStatsData: undefined,
+      dispatcherStatsStatus: Status.Data.Initialized,
      driverStatsName: '',
      driverStatsData: undefined,
@@ -44,31 +26,15 @@ export const useStore = defineStore('store', {
      chosenModalTrainId: undefined,
      dataStatuses: {
        connection: Status.Data.Loading,
        sceneries: Status.Data.Loading,
        timetables: Status.Data.Loading,
        dispatchers: Status.Data.Loading,
        trains: Status.Data.Loading
      },
      currentStatsTab: null,
      blockScroll: false,
-      listenerLaunched: false,
+      modalLastClickedTarget: null
      modalLastClickedTarget: null,
      tooltip: {
        content: '',
        visible: false,
        x: 0,
        y: 0
      }
    }) as StoreState,
  getters: {
    trainList(): Train[] {
-      return (this.activeData?.trains ?? [])
+      const apiStore = useApiStore();
      return (apiStore.activeData?.trains ?? [])
        .filter((train) => train.timetable || train.online)
        .map((train) => {
          const stock = train.stockString.split(';');
@@ -87,7 +53,7 @@ export const useStore = defineStore('store', {
            distance: train.distance,
            signal: train.signal,
-            online: train.online,
+            online: Boolean(train.online),
            driverId: train.driverId,
            driverName: train.driverName,
            currentStationName: train.currentStationName,
@@ -119,10 +85,12 @@ export const useStore = defineStore('store', {
    },
    onlineSceneryList(state): OnlineScenery[] {
-      if (state.isOffline) return [];
+      const apiStore = useApiStore();
      if (!state.activeData?.activeSceneries) return [];
-      return state.activeData?.activeSceneries.reduce((list, scenery) => {
+      if (state.isOffline) return [];
      if (!apiStore.activeData?.activeSceneries) return [];
      return apiStore.activeData?.activeSceneries.reduce((list, scenery) => {
        if (scenery.isOnline !== 1 && Date.now() - scenery.lastSeen > 1000 * 60 * 2) return list;
        if (scenery.dispatcherStatus == Status.ActiveDispatcher.UNKNOWN) return list;
@@ -181,60 +149,45 @@ export const useStore = defineStore('store', {
        return list;
      }, [] as OnlineScenery[]);
-    }
+    },
  },
  actions: {
    async fetchStationsGeneralInfo() {
      const sceneryData: StationJSONData[] = await (
        await axios.get(`${URLs.stacjownikAPI}/api/getSceneries`)
      ).data;
-      if (!sceneryData) {
+    stationList(): Station[] {
-        this.dataStatuses.sceneries = Status.Data.Error;
+      const apiStore = useApiStore();
-        return;
+
-      }
+      return apiStore.sceneryData.map((scenery) => {
        const routes = scenery.routesInfo.reduce(
          (acc, route) => {
            const tracksKey = route.routeTracks == 2 ? 'twoWay' : 'oneWay';
            const isElectric = route.isElectric;
            const routesKey: keyof StationRoutes = `${tracksKey}${
              !isElectric ? 'No' : ''
            }CatenaryRouteNames`;
            if (!route.isInternal) acc[routesKey].push(route.routeName);
            if (route.isRouteSBL) acc['sblRouteNames'].push(route.routeName);
            acc[tracksKey].push(route);
            return acc;
          },
          {
            oneWay: [],
            oneWayCatenaryRouteNames: [],
            oneWayNoCatenaryRouteNames: [],
            twoWay: [],
            twoWayCatenaryRouteNames: [],
            twoWayNoCatenaryRouteNames: [],
            sblRouteNames: []
          } as StationRoutes
        );
      this.stationList = sceneryData.map((scenery) => {
        return {
          name: scenery.name,
          generalInfo: {
            ...scenery,
            authors: scenery.authors?.split(',').map((a) => a.trim()),
-            routes:
+            routes: routes,
              scenery.routesInfo.reduce(
                (acc, route) => {
                  const propName: keyof StationRoutes = `${
                    route.routeTracks == 2 ? 'twoWay' : 'oneWay'
                  }${route.isElectric ? '' : 'No'}CatenaryRouteNames`;
                  acc[route.routeTracks == 2 ? 'twoWay' : 'oneWay'].push({
                    name: route.routeName,
                    SBL: route.isRouteSBL,
                    TWB: false,
                    catenary: route.isElectric,
                    isInternal: route.isInternal,
                    tracks: route.routeTracks,
                    length: route.routeLength,
                    speed: route.routeSpeed
                  });
                  if (!route.isInternal) acc[propName].push(route.routeName);
                  if (route.isRouteSBL) acc['sblRouteNames'].push(route.routeName);
                  return acc;
                },
                {
                  oneWay: [],
                  twoWay: [],
                  sblRouteNames: [],
                  oneWayCatenaryRouteNames: [],
                  oneWayNoCatenaryRouteNames: [],
                  twoWayCatenaryRouteNames: [],
                  twoWayNoCatenaryRouteNames: []
                } as StationRoutes
              ) || {},
            checkpoints: scenery.checkpoints
              ? scenery.checkpoints
                  .split(';')
@@ -243,95 +196,97 @@ export const useStore = defineStore('store', {
          }
        };
      });
-    },
+    }
  },
  actions: {
    async processStationsOnlineInfo(activeData: API.ActiveData.Response) {
      if (!activeData.activeSceneries) return;
-    async connectToWebsocket() {
+      const onlineSceneries = activeData.activeSceneries.reduce((acc, scenery) => {
-      if (import.meta.env.VITE_APP_WS_DEV === '1') {
+        const savedStation = this.stationList.find((st) => scenery.stationName === st.name);
        const mockWebsocketData = await import('../data/mockWebsocketData.json');
        this.dataStatuses.connection = Status.Data.Loaded;
        this.activeData = mockWebsocketData as any;
        this.setStatuses();
-        console.warn('Stacjownik działa w trybie mockowania danych z WS');
+        if (scenery.isOnline !== 1 && Date.now() - scenery.lastSeen > 1000 * 60 * 2) return acc;
        if (scenery.dispatcherStatus == Status.ActiveDispatcher.UNKNOWN) return acc;
-        return;
+        const station = this.stationList.find((s) => s.name === scenery.stationName);
      }
-      const socket = io(URLs.stacjownikAPI, {
+        const scheduledTrains = getScheduledTrains(this.trainList, scenery, station?.generalInfo);
        transports: ['websocket', 'polling'],
        rememberUpgrade: true,
        reconnection: true
      });
-      socket.emit('CONNECTION', { version: packageInfo.version });
+        const stationTrains = getStationTrains(
          this.trainList,
          scheduledTrains,
          this.region.id,
          scenery
        );
-      socket.on('connect_error', () => {
+        // Remove checkpoint duplicates
-        this.dataStatuses.connection = Status.Data.Error;
+        const uniqueScheduledTrains = scheduledTrains.reduce(
-      });
+          (uniqueList, sTrain) =>
            uniqueList.find((v) => v.trainId === sTrain.trainId)
              ? uniqueList
              : [...uniqueList, sTrain],
          [] as ScheduledTrain[]
        );
-      socket.on('UPDATE', (data: Websocket.ActiveData) => {
+        const dispatcherTimestamp =
-        this.activeData = data;
+          scenery.dispatcherStatus == Status.ActiveDispatcher.NO_LIMIT
-        this.dataStatuses.connection = Status.Data.Loaded;
+            ? Date.now() + 25500000
            : scenery.dispatcherStatus > 5
            ? scenery.dispatcherStatus
            : null;
-        this.setStatuses();
+        const onlineInfo = {
-      });
+          name: scenery.stationName,
          hash: scenery.stationHash,
          region: scenery.region,
          maxUsers: scenery.maxUsers,
          currentUsers: scenery.currentUsers,
          spawns: parseSpawns(scenery.spawnString),
          dispatcherName: scenery.dispatcherName,
          dispatcherRate: scenery.dispatcherRate,
          dispatcherId: scenery.dispatcherId,
          dispatcherExp: scenery.dispatcherExp,
          dispatcherIsSupporter: scenery.dispatcherIsSupporter,
          scheduledTrains: scheduledTrains,
          stationTrains: stationTrains,
          dispatcherStatus: scenery.dispatcherStatus,
          dispatcherTimestamp: dispatcherTimestamp,
-      socket.emit('FETCH_DATA', { version: packageInfo.version }, (data: Websocket.ActiveData) => {
+          isOnline: scenery.isOnline == 1,
        this.dataStatuses.connection = Status.Data.Loaded;
        this.activeData = data;
        this.setStatuses();
      });
-      this.webSocket = socket;
+          scheduledTrainCount: {
-    },
+            all: uniqueScheduledTrains.length,
            confirmed: uniqueScheduledTrains.filter((train) => train.stopInfo.confirmed).length,
            unconfirmed: uniqueScheduledTrains.filter((train) => !train.stopInfo.confirmed).length
          }
        };
-    async connectToAPI() {
+        if (savedStation) savedStation.onlineInfo = onlineInfo;
-      this.connectToWebsocket();
+        else
-      this.fetchStockInfoData();
+          this.stationList.push({
-      this.fetchDonatorsData();
+            name: onlineInfo.name,
-      this.fetchStationsGeneralInfo();
+            onlineInfo: onlineInfo
          });
        acc.push(onlineInfo);
        return acc;
      }, [] as OnlineScenery[]);
      // Reset online info of already offline sceneries
      this.stationList
        .filter(
          (station) =>
            station.onlineInfo &&
            onlineSceneries.findIndex(
              (os) => os.region == station.onlineInfo!.region && station.name == os.name
            ) != -1
        )
        .forEach((station) => (station.onlineInfo = undefined));
    },
    async changeRegion(region: StoreState['region']) {
      this.region = region;
    },
    async fetchStockInfoData() {
      try {
        this.rollingStockData = (
          await axios.get<API.RollingStock.Response>(
            'https://raw.githubusercontent.com/Spythere/api/main/td2/data/stockInfo.json'
          )
        ).data;
      } catch (error) {
        console.error('Ups! Wystąpił błąd podczas pobierania informacji o taborze z API:', error);
      }
    },
    async fetchDonatorsData() {
      try {
        const response = await axios.get<GithubAPI.Donators.Response>(
          'https://raw.githubusercontent.com/Spythere/api/main/td2/data/donators.json'
        );
        if (response.data) this.donatorsData = response.data;
      } catch (error) {
        console.error('Ups! Wystąpił błąd podczas pobierania informacji o donatorach:', error);
      }
    },
    async setStatuses() {
      if (!this.activeData.activeSceneries) {
        this.dataStatuses.sceneries = Status.Data.Error;
        this.dataStatuses.trains = Status.Data.Error;
        this.dataStatuses.dispatchers = Status.Data.Error;
        return;
      }
      this.dataStatuses.sceneries = Status.Data.Loaded;
      this.dataStatuses.trains = !this.activeData.trains ? Status.Data.Warning : Status.Data.Loaded;
      this.dataStatuses.dispatchers = Status.Data.Loaded;
    }
  }
 });
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 import inputData from '../data/options.json';
-import { useStore } from './mainStore';
+import { useMainStore } from './mainStore';
 import { filterStations, sortStations } from '../scripts/utils/filterUtils';
 import { HeadIdsTypes } from '../scripts/data/stationHeaderNames';
 import StorageManager from '../managers/storageManager';
@@ -70,14 +70,26 @@ export const useStationFiltersStore = defineStore('stationFiltersStore', {
    },
    filteredStationList: (state) => {
-      const store = useStore();
+      const store = useMainStore();
-      return store.stationList
+      const savedStationNames = store.stationList.map((s) => s.name);
-        .map((station) => ({
+
      const onlineUnsavedStations = store.onlineSceneryList
        .filter((os) => !savedStationNames.includes(os.name) && os.region == store.region.id)
        .map((os) => ({
          name: os.name,
          generalInfo: undefined,
          onlineInfo: os
        }));
      return [
        ...onlineUnsavedStations,
        ...store.stationList.map((station) => ({
          ...station,
          onlineInfo: store.onlineSceneryList.find(
            (os) => os.name == station.name && os.region == store.region.id
          )
        }))
      ]
        .filter((station) => filterStations(station, state.filters))
        .sort((a, b) => sortStations(a, b, state.sorterActive));
    }
@@ -1,6 +1,4 @@
-import { Socket } from 'socket.io-client';
+import { API } from '../typings/api';
 import Station from '../scripts/interfaces/Station';
 import { API, GithubAPI, Websocket } from '../typings/api';
 import { Status } from '../typings/common';
 export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
@@ -12,26 +10,8 @@ export interface RegionCounters {
 }
 export interface StoreState {
  stationList: Station[];
  activeData: Websocket.ActiveData;
  rollingStockData?: API.RollingStock.Response;
  donatorsData: GithubAPI.Donators.Response;
  regionOnlineCounters: RegionCounters[];
  lastDispatcherStatuses: {
    hash: string;
    statusTimestamp: number;
    statusID: Status.ActiveDispatcher;
  }[];
  sceneryData: any[][];
  region: { id: string; value: string };
  trainCount: number;
  stationCount: number;
  webSocket?: Socket;
  isOffline: boolean;
  dispatcherStatsName: string;
@@ -43,26 +23,8 @@ export interface StoreState {
  chosenModalTrainId?: string;
  currentStatsTab: 'daily' | 'driver' | null;
  dataStatuses: {
    connection: Status.Data;
    sceneries: Status.Data;
    timetables: Status.Data;
    dispatchers: Status.Data;
    trains: Status.Data;
  };
  listenerLaunched: boolean;
  blockScroll: boolean;
  modalLastClickedTarget: EventTarget | null;
  tooltip: {
    visible: boolean;
    x: number;
    y: number;
    content: string;
  };
 }
 export interface StationRoutesInfo {
@@ -73,6 +35,7 @@ export interface StationRoutesInfo {
  routeLength: number;
  routeSpeed: number;
  routeTracks: number;
  hidden?: boolean;
 }
 export interface StationJSONData {
@@ -82,6 +45,7 @@ export interface StationJSONData {
  lines: string;
  project: string;
  projectUrl: string;
  hash: string;
  reqLevel: number;
@@ -166,6 +130,8 @@ export interface ScheduledTrain {
  stopLabel: string;
  stopStatus: StopStatus;
  stopStatusID: number;
  region: string;
 }
 export enum StopStatus {
@@ -175,6 +175,8 @@ export function getCheckpointTrain(
    stopStatus: trainStopStatus.stopStatus,
    stopStatusID: trainStopStatus.stopStatusID,
    region: train.region,
    arrivingLine,
    departureLine,
@@ -194,6 +196,7 @@ export function getScheduledTrains(
  return trainList.reduce((acc: ScheduledTrain[], train) => {
    if (!train.timetableData) return acc;
    if (train.region != sceneryData.region) return acc;
    const timetable = train.timetableData;
    if (!timetable.sceneries.includes(sceneryData.stationHash)) return acc;
@@ -5,6 +5,7 @@
  overflow-y: auto;
  height: 90vh;
  min-height: 550px;
  margin-top: 0.5em;
  padding-right: 0.2em;
 }
@@ -24,7 +25,7 @@
  text-align: end;
  padding: 0.25em;
-  margin: 0.5em 0;
+  margin-top: 0.5em;
 }
 .journal_warning {
@@ -53,9 +54,7 @@
  justify-content: space-between;
  align-items: center;
  gap: 0.5em;
  position: relative;
  margin-bottom: 0.5em;
 }
 .btn--load-data {
@@ -2,24 +2,35 @@
@import 'responsive.scss';
 .stats-tab {
  position: absolute;
  right: 0;
  z-index: 99;
  transform: translateY(1em);
  width: 100%;
  background-color: #1a1a1a;
  box-shadow: 0 0 5px 1px $accentCol;
  padding: 1em;
  display: flex;
  align-items: flex-end;
 }
-  margin-bottom: 0.5em;
+hr.header-separator {
  margin-bottom: 1em;
 }
-  width: 100%;
+hr.section-separator {
  margin: 1em 0;
 }
 .info-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5em;
  margin-top: 1em;
 }
 .stat-badge {
@@ -76,7 +76,11 @@
 }
 .train-badge {
-  padding: 0.1em 0.2em;
+  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.1em 0.3em;
  border-radius: 0.2em;
  font-weight: bold;
@@ -0,0 +1,48 @@
@import 'responsive.scss';
@import 'variables.scss';
 .dropdown-anim {
  &-enter-from,
  &-leave-to {
    opacity: 0;
    transform: translateY(10px);
  }
  &-enter-active,
  &-leave-active {
    transition: all 150ms ease;
  }
 }
 .dropdown_background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
 }
 .dropdown_wrapper {
  position: absolute;
  left: 0;
  top: calc(100% + 0.5em);
  background-color: $bgCol;
  // box-shadow: 0 5px 10px 2px #0f0f0f;
  box-shadow: 0 0 5px 1px $accentCol;
  width: 100%;
  max-width: 550px;
  padding: 1em;
  z-index: 100;
 }
@include smallScreen {
  .dropdown_wrapper {
    font-size: 1.1em;
    max-width: 100%;
  }
 }
@@ -1,11 +1,6 @@
@import 'search_box.scss';
@import 'responsive.scss';
@import 'variables.scss';
@import 'search_box.scss';
 .filters-options {
  margin-bottom: 0.5em;
  position: relative;
 }
 .actions-bar {
  display: flex;
@@ -29,42 +24,6 @@ h1.option-title {
  }
 }
 .options-anim {
  &-enter-from,
  &-leave-to {
    opacity: 0;
    transform: translateY(10px);
  }
  &-enter-active,
  &-leave-active {
    transition: all 150ms ease;
  }
 }
 .bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
 }
 .options_wrapper {
  position: absolute;
  background-color: $bgCol;
  box-shadow: 0 5px 10px 2px #0f0f0f;
  width: 100%;
  max-width: 550px;
  padding: 1em;
  z-index: 100;
 }
 .options_sorters {
  display: flex;
  align-items: center;
@@ -93,6 +52,7 @@ h1.option-title {
 .sort-option[data-selected='true'] {
  color: $accentCol;
  font-weight: bold;
 }
 .filter-option {
@@ -146,11 +106,6 @@ h1.option-title {
    }
  }
  .options_wrapper {
    font-size: 1.1em;
    max-width: 100%;
  }
  .options_filters,
  .options_sorters {
    justify-content: center;
@@ -0,0 +1,49 @@
@font-face {
  font-family: 'Quicksand';
  src:
    url('/fonts/Quicksand-Bold.woff2') format('woff2'),
    url('/fonts/Quicksand-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
 }
@font-face {
  font-family: 'Quicksand';
  src:
    url('/fonts/Quicksand-SemiBold.woff2') format('woff2'),
    url('/fonts/Quicksand-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
 }
@font-face {
  font-family: 'Quicksand';
  src:
    url('/fonts/Quicksand-Medium.woff2') format('woff2'),
    url('/fonts/Quicksand-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
 }
@font-face {
  font-family: 'Quicksand';
  src:
    url('/fonts/Quicksand-Regular.woff2') format('woff2'),
    url('/fonts/Quicksand-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
 }
@font-face {
  font-family: 'Quicksand';
  src:
    url('/fonts/Quicksand-Light.woff2') format('woff2'),
    url('/fonts/Quicksand-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
 }
@@ -1,3 +1,5 @@
@import 'fonts.scss';
 :root {
  --clr-primary: #ffc014;
  --clr-secondary: #2f2f2f;
@@ -11,10 +13,10 @@
  --clr-skr: #ff5100;
  --clr-twr: #ffbb00;
-  --clr-error: #df3e3e;
+  --clr-error: #fa3636;
  --clr-warning: #c59429;
-  --clr-honorable: #f47fff;
+  --clr-donator: #f7a4ff;
  font-size: 16px;
 }
@@ -158,13 +160,18 @@ ul {
    color: #ccc;
  }
-  &--honorable {
+  &--error {
-    color: var(--clr-honorable);
+    color: var(--clr-error);
-    text-shadow: var(--clr-honorable) 0 0 10px;
+  }
  &--donator {
    color: var(--clr-donator);
    text-shadow: var(--clr-donator) 0 0 10px;
  }
 }
-button {
+button,
 a.a-button {
  cursor: pointer;
  color: white;
  background: none;
@@ -182,46 +189,46 @@ button {
  &[data-disabled='true'] {
    user-select: none;
    pointer-events: none;
-    opacity: 0.85;
+    opacity: 0.7;
  }
 }
-button.btn--filled {
+  &.btn--filled {
-  background-color: #1a1a1a;
+    background-color: #1a1a1a;
-  &:hover {
+    &:hover {
-    background-color: #2a2a2a;
+      background-color: #2a2a2a;
    }
  }
 }
-button.btn--action {
+  &.btn--action {
-  background-color: #424242;
+    background-color: #424242;
-  border-radius: 0.25em;
+    border-radius: 0.25em;
-  &:hover {
+    &:hover {
-    background-color: #555;
+      background-color: #555;
    }
  }
 }
-button.btn--option {
+  &.btn--option {
-  color: white;
+    color: white;
-  background-color: #333;
+    background-color: #333;
-  &.checked {
+    &.checked {
-    color: var(--clr-primary);
+      color: var(--clr-primary);
      font-weight: bold;
      background-color: #3c3c3c;
    }
  }
  &.btn--image {
    font-weight: bold;
    padding: 0.35em 0.75em;
-    background-color: #3c3c3c;
+    img {
-  }
+      width: 1.5em;
-}
+      vertical-align: middle;
-
+    }
 button.btn--image {
  font-weight: bold;
  padding: 0.35em 0.75em;
  img {
    width: 1.5em;
    vertical-align: middle;
  }
 }
@@ -1,6 +1,12 @@
 import { Status } from './common';
 export namespace API {
  export namespace ActiveData {
    export interface Response {
      activeSceneries?: API.ActiveSceneries.Response;
      trains?: API.ActiveTrains.Response;
    }
  }
  export namespace DispatcherHistory {
    export type Response = Data[];
@@ -25,7 +31,11 @@ export namespace API {
  export namespace DispatcherStats {
    export interface DistanceStat {
-      routeDistance: number;
+      routeDistance: number | null;
    }
    export interface DurationStat {
      currentDuration: number | null;
    }
    export interface Count {
@@ -33,11 +43,18 @@ export namespace API {
    }
    export interface Response {
-      _sum: DistanceStat;
+      services: {
-      _max: DistanceStat;
+        count: number;
-      _min: DistanceStat;
+        durationMax: number;
-      _avg: DistanceStat;
+        durationAvg: number;
-      _count: Count;
+      } | null;
      issuedTimetables: {
        count: number;
        distanceMax: number;
        distanceAvg: number;
        distanceSum: number;
      } | null;
    }
  }
@@ -116,9 +133,9 @@ export namespace API {
      driverLevel?: number;
      currentStationName: string;
-      currentStationHash: string;
+      currentStationHash?: string;
-      online: boolean;
+      online: number;
      lastSeen: number;
      region: string;
@@ -132,16 +149,16 @@ export namespace API {
      stopNameRAW: string;
      stopType: string;
      stopDistance: number;
-      pointId: number;
+      pointId: string;
      mainStop: boolean;
-      arrivalLine: string;
+      arrivalLine: string | null;
      arrivalTimestamp: number;
      arrivalRealTimestamp: number;
      arrivalDelay: number;
-      departureLine: string;
+      departureLine: string | null;
      departureTimestamp: number;
      departureRealTimestamp: number;
      departureDelay: number;
@@ -150,9 +167,9 @@ export namespace API {
      beginsHere: boolean;
      terminatesHere: boolean;
-      confirmed: boolean;
+      confirmed: number;
-      stopped: boolean;
+      stopped: number;
-      stopTime: number;
+      stopTime: number | null;
    }
    export interface Timetable {
@@ -257,30 +274,52 @@ export namespace API {
      distanceAvg: number;
      maxTimetable: API.TimetableHistory.Data | null;
-      mostActiveDispatchers: {
+      globalDiff: GlobalDiff;
-        name: string;
+      globalMax: GlobalMax;
        count: number;
      }[];
-      mostActiveDrivers: {
+      mostActiveDispatchers: MostActiveDispatcher[];
-        name: string;
+      mostActiveDrivers: MostActiveDriver[];
        distance: number;
      }[];
-      longestDuties: {
+      longestDuties: LongestDuty[];
-        name: string;
+    }
-        duration: number;
+
-        station: string;
+    export interface MostActiveDispatcher {
-      }[];
+      name: string;
      count: number;
    }
    export interface MostActiveDriver {
      name: string;
      distance: number;
    }
    export interface LongestDuty {
      name: string;
      duration: number;
      station: string;
    }
    export interface GlobalDiff {
      rippedSwitches: number;
      derailments: number;
      skippedStopSignals: number;
      radioStops: number;
      kills: number;
      drivenKilometers: number;
      routedTrains: number;
    }
    export interface GlobalMax {
      _max: {
        drivers: number;
        dispatchers: number;
        timetables: number;
      };
    }
  }
 }
-export namespace Websocket {
+  export namespace Donators {
-  export interface ActiveData {
+    export type Response = string[];
    activeSceneries?: API.ActiveSceneries.Response;
    trains?: API.ActiveTrains.Response;
    connectedSocketCount: number;
  }
 }
@@ -328,8 +367,4 @@ export namespace GithubAPI {
      body: string;
    }
  }
  export namespace Donators {
    export type Response = string[];
  }
 }
@@ -11,7 +11,7 @@ export namespace Status {
  }
  export enum Data {
-    Offline = 2,
+    Offline = -2,
    Initialized = -1,
    Loading = 0,
    Error = 1,
@@ -3,15 +3,19 @@
    <JournalHeader />
    <div class="journal_wrapper">
-      <JournalOptions
+      <div class="journal_top-bar">
-        @on-search-confirm="fetchHistoryData"
+        <JournalOptions
-        @on-options-reset="resetOptions"
+          @on-search-confirm="fetchHistoryData"
-        @on-refresh-data="fetchHistoryData(true)"
+          @on-options-reset="resetOptions"
-        :sorter-option-ids="['timestampFrom', 'duration']"
+          @on-refresh-data="fetchHistoryData(true)"
-        :data-status="dataStatus"
+          :sorter-option-ids="['timestampFrom', 'duration']"
-        :current-options-active="currentOptionsActive"
+          :data-status="dataStatus"
-        optionsType="dispatchers"
+          :current-options-active="currentOptionsActive"
-      />
+          optionsType="dispatchers"
        />
        <JournalStats :statsButtons="statsButtons" />
      </div>
      <div class="journal_refreshed-date" v-if="dataRefreshedAt">
        {{ $t('journal.data-refreshed-at') }}: {{ dataRefreshedAt.toLocaleString($i18n.locale) }}
@@ -32,26 +36,34 @@
 <script lang="ts">
 import { defineComponent, provide, reactive, Ref, ref } from 'vue';
 import axios from 'axios';
-import JournalOptions from '../components/JournalView/JournalOptions.vue';
+import http from '../http';
-import { URLs } from '../scripts/utils/apiURLs';
+import { useMainStore } from '../store/mainStore';
 import { useStore } from '../store/mainStore';
 import JournalDispatchersList from '../components/JournalView/JournalDispatchersList.vue';
 import JournalHeader from '../components/JournalView/JournalHeader.vue';
 import { LocationQuery } from 'vue-router';
 import { Journal } from '../components/JournalView/typings';
 import { API } from '../typings/api';
 import { Status } from '../typings/common';
-const DISPATCHERS_API_URL = `${URLs.stacjownikAPI}/api/getDispatchers`;
+import JournalDispatchersList from '../components/JournalView/JournalDispatchers/JournalDispatchersList.vue';
 import JournalOptions from '../components/JournalView/JournalOptions.vue';
 import JournalHeader from '../components/JournalView/JournalHeader.vue';
 import JournalStats from '../components/JournalView/JournalStats.vue';
 const statsButtons: Journal.StatsButton[] = [
  {
    tab: Journal.StatsTab.DISPATCHER_STATS,
    localeKey: 'journal.dispatcher-stats.button',
    iconName: 'user',
    disabled: true
  }
 ];
 export default defineComponent({
  components: {
    JournalOptions,
-    JournalDispatchersList,
+    JournalHeader,
-    JournalHeader
+    JournalStats,
    JournalDispatchersList
  },
  name: 'JournalDispatchers',
@@ -68,6 +80,8 @@ export default defineComponent({
  },
  data: () => ({
    statsButtons,
    currentQuery: '',
    currentQueryArray: [] as string[],
    dataRefreshedAt: null as Date | null,
@@ -92,7 +106,7 @@ export default defineComponent({
      'search-dispatcher': '',
      'search-station': '',
      'search-date': ''
-    } as Journal.DispatcherSearcher);
+    } as Journal.DispatcherSearchType);
    const countFromIndex = ref(0);
    const countLimit = 15;
@@ -105,7 +119,7 @@ export default defineComponent({
    const scrollElement: Ref<HTMLElement | null> = ref(null);
    return {
-      store: useStore(),
+      mainStore: useMainStore(),
      sorterActive,
      searchersValues,
@@ -123,6 +137,15 @@ export default defineComponent({
      this.currentOptionsActive =
        q.length > 2 ||
        q.some((qv) => qv.startsWith('sortBy=') && qv.split('=')[1] != 'timestampFrom');
    },
    'mainStore.dispatcherStatsData'(stats) {
      this.statsButtons.find((sb) => sb.tab == Journal.StatsTab.DISPATCHER_STATS)!.disabled =
        stats === undefined;
    },
    async 'mainStore.dispatcherStatsName'() {
      this.fetchDispatcherStats();
    }
  },
@@ -145,6 +168,16 @@ export default defineComponent({
  },
  methods: {
    handleRouteParams() {
      this.$router.push({
        query: {
          'search-date': this.searchersValues['search-date'] || undefined,
          'search-station': this.searchersValues['search-station'] || undefined,
          'search-dispatcher': this.searchersValues['search-dispatcher'] || undefined
        }
      });
    },
    handleScroll(e: Event) {
      const listElement = e.target as HTMLElement;
      const scrollTop = listElement.scrollTop;
@@ -157,24 +190,44 @@ export default defineComponent({
    },
    handleQueries(query: LocationQuery) {
-      const queryKeys = Object.keys(query);
+      this.setOptions(query as any);
      if (queryKeys.includes('sceneryName')) this.setSearchers('', `${query.sceneryName}`, '');
      if (queryKeys.includes('dispatcherName'))
        this.setSearchers('', '', `${query.dispatcherName}`);
    },
-    setSearchers(date: string, station: string, dispatcher: string) {
+    async fetchDispatcherStats() {
-      this.searchersValues['search-date'] = date;
+      if (!this.mainStore.dispatcherStatsName) {
-      this.searchersValues['search-station'] = station;
+        this.mainStore.dispatcherStatsData = undefined;
-      this.searchersValues['search-dispatcher'] = dispatcher;
+        return;
      }
      try {
        const statsData: API.DispatcherStats.Response = await (
          await http.get('api/getDispatcherStats', {
            params: {
              name: this.mainStore.dispatcherStatsName
            }
          })
        ).data;
        this.mainStore.dispatcherStatsData = statsData;
      } catch (error) {
        this.mainStore.dispatcherStatsData = undefined;
        console.error('Ups! Wystąpił błąd przy próbie pobrania statystyk dyżurnego! :/');
      }
    },
    setOptions(options: { [key: string]: string }) {
      this.searchersValues['search-date'] = options['search-date'] ?? '';
      this.searchersValues['search-station'] = options['search-station'] ?? '';
      this.searchersValues['search-dispatcher'] = options['search-dispatcher'] ?? '';
      this.sorterActive.id =
        (options['sorter-active'] as Journal.DispatcherSorterKey) ?? 'timestampFrom';
    },
    resetOptions() {
-      this.setSearchers('', '', '');
+      this.setOptions({});
      this.sorterActive.id = 'timestampFrom';
      this.fetchHistoryData();
    },
    async addHistoryData() {
@@ -183,9 +236,7 @@ export default defineComponent({
      this.countFromIndex = this.historyList.length;
      const responseData: API.DispatcherHistory.Response = await (
-        await axios.get(
+        await http.get(`api/getDispatchers?${this.currentQuery}&countFrom=${this.countFromIndex}`)
          `${DISPATCHERS_API_URL}?${this.currentQuery}&countFrom=${this.countFromIndex}`
        )
      ).data;
      if (!responseData) return;
@@ -232,7 +283,7 @@ export default defineComponent({
        if (reset) this.dataStatus = Status.Data.Loading;
        const responseData: API.DispatcherHistory.Response = await (
-          await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}`)
+          await http.get(`api/getDispatchers?${this.currentQuery}`)
        ).data;
        if (!responseData) {
@@ -246,7 +297,7 @@ export default defineComponent({
        this.historyList = responseData;
        // Stats display
-        this.store.dispatcherStatsName =
+        this.mainStore.dispatcherStatsName =
          this.historyList.length > 0 && this.searchersValues['search-dispatcher'].trim()
            ? this.historyList[0].dispatcherName
            : '';
@@ -3,18 +3,19 @@
    <JournalHeader />
    <div class="journal_wrapper">
-      <JournalOptions
+      <div class="journal_top-bar">
-        @on-search-confirm="fetchHistoryData"
+        <JournalOptions
-        @on-options-reset="resetOptions"
+          @onOptionsReset="resetOptions"
-        @on-refresh-data="fetchHistoryData"
+          @onRefreshData="fetchHistoryData"
-        :sorter-option-ids="['timetableId', 'beginDate', 'routeDistance', 'allStopsCount']"
+          :sorter-option-ids="['timetableId', 'beginDate', 'routeDistance', 'allStopsCount']"
-        :filters="journalTimetableFilters"
+          :filters="journalTimetableFilters"
-        :currentOptionsActive="currentOptionsActive"
+          :currentOptionsActive="currentOptionsActive"
-        :data-status="dataStatus"
+          :data-status="dataStatus"
-        optionsType="timetables"
+          optionsType="timetables"
-      />
+        />
-      <JournalStats />
+        <JournalStats :statsButtons="statsButtons" />
      </div>
      <div class="journal_refreshed-date" v-if="dataRefreshedAt">
        {{ $t('journal.data-refreshed-at') }}: {{ dataRefreshedAt.toLocaleString($i18n.locale) }}
@@ -35,7 +36,6 @@
 <script lang="ts">
 import { defineComponent, provide, reactive, Ref, ref } from 'vue';
 import axios from 'axios';
 import dateMixin from '../mixins/dateMixin';
 import routerMixin from '../mixins/routerMixin';
@@ -45,8 +45,7 @@ import JournalOptions from '../components/JournalView/JournalOptions.vue';
 import JournalStats from '../components/JournalView/JournalStats.vue';
 import JournalHeader from '../components/JournalView/JournalHeader.vue';
-import { URLs } from '../scripts/utils/apiURLs';
+import { useMainStore } from '../store/mainStore';
 import { useStore } from '../store/mainStore';
 import { LocationQuery } from 'vue-router';
@@ -54,50 +53,62 @@ import JournalTimetablesList from '../components/JournalView/JournalTimetables/J
 import { Journal } from '../components/JournalView/typings';
 import { Status } from '../typings/common';
 import { API } from '../typings/api';
-
+import http from '../http';
 const TIMETABLES_API_URL = `${URLs.stacjownikAPI}/api/getTimetables`;
 export const journalTimetableFilters: Journal.TimetableFilter[] = [
  {
-    id: Journal.TimetableFilterId.ALL,
+    id: Journal.TimetableFilterId.ALL_STATUSES,
    filterSection: Journal.FilterSection.TIMETABLE_STATUS,
-    isActive: true
+    isActive: true,
    default: true
  },
  {
    id: Journal.TimetableFilterId.ACTIVE,
    filterSection: Journal.FilterSection.TIMETABLE_STATUS,
-    isActive: false
+    isActive: false,
    default: false
  },
  {
    id: Journal.TimetableFilterId.FULFILLED,
    filterSection: Journal.FilterSection.TIMETABLE_STATUS,
-    isActive: false
+    isActive: false,
    default: false
  },
  {
    id: Journal.TimetableFilterId.ABANDONED,
    filterSection: Journal.FilterSection.TIMETABLE_STATUS,
-    isActive: false
+    isActive: false,
    default: false
  },
  {
-    id: Journal.TimetableFilterId.TWR_SKR,
+    id: Journal.TimetableFilterId.ALL_SPECIALS,
-    filterSection: Journal.FilterSection.TWRSKR,
+    filterSection: Journal.FilterSection.SPECIAL,
-    isActive: true
+    isActive: true,
    default: true
  },
  {
    id: Journal.TimetableFilterId.TWR,
-    filterSection: Journal.FilterSection.TWRSKR,
+    filterSection: Journal.FilterSection.SPECIAL,
-    isActive: false
+    isActive: false,
    default: false
  },
  {
    id: Journal.TimetableFilterId.SKR,
-    filterSection: Journal.FilterSection.TWRSKR,
+    filterSection: Journal.FilterSection.SPECIAL,
-    isActive: false
+    isActive: false,
    default: false
  },
  {
    id: Journal.TimetableFilterId.TWR_SKR,
    filterSection: Journal.FilterSection.SPECIAL,
    isActive: false,
    default: false
  }
 ];
@@ -107,8 +118,12 @@ interface TimetablesQueryParams {
  timetableId?: string;
  authorName?: string;
-  timestampFrom?: number;
+  // timestampFrom?: number;
-  timestampTo?: number;
+  // timestampTo?: number;
  dateFrom?: string;
  dateTo?: string;
  issuedFrom?: string;
  countFrom?: number;
@@ -141,6 +156,24 @@ export default defineComponent({
  },
  data: () => ({
    journalTimetableFilters,
    mainStore: useMainStore(),
    statsButtons: [
      {
        tab: Journal.StatsTab.DAILY_STATS,
        localeKey: 'journal.daily-stats.button',
        iconName: 'stats',
        disabled: false
      },
      {
        tab: Journal.StatsTab.DRIVER_STATS,
        localeKey: 'journal.driver-stats.button',
        iconName: 'train',
        disabled: true
      }
    ],
    currentQueryParams: {} as TimetablesQueryParams,
    dataRefreshedAt: null as Date | null,
@@ -152,7 +185,6 @@ export default defineComponent({
    currentOptionsActive: false,
    timetableHistory: [] as API.TimetableHistory.Response,
    journalTimetableFilters,
    dataStatus: Status.Data.Loading,
    dataErrorMessage: ''
@@ -160,10 +192,11 @@ export default defineComponent({
  setup() {
    const sorterActive: Journal.TimetableSorter = reactive({ id: 'timetableId', dir: 'desc' });
-    // const journalFilterActive = ref(journalTimetableFilters[0]);
+
    const initFilters: readonly Journal.TimetableFilter[] = JSON.parse(
      JSON.stringify(journalTimetableFilters)
    );
    const filterList: Journal.TimetableFilter[] = reactive(JSON.parse(JSON.stringify(initFilters)));
    const searchersValues = reactive({
@@ -192,15 +225,22 @@ export default defineComponent({
      countFromIndex,
      countLimit,
-      scrollElement,
+      scrollElement
      store: useStore()
    };
  },
  watch: {
    currentQueryParams(q: TimetablesQueryParams) {
      this.currentOptionsActive = Object.values(q).some((v) => v !== undefined);
    },
    'mainStore.driverStatsData'(driverStats) {
      this.statsButtons.find((sb) => sb.tab == Journal.StatsTab.DRIVER_STATS)!.disabled =
        driverStats === undefined;
    },
    async 'mainStore.driverStatsName'() {
      this.fetchDriverStats();
    }
  },
@@ -228,42 +268,51 @@ export default defineComponent({
    },
    handleQueries(query: LocationQuery) {
-      const queryKeys = Object.keys(query);
+      this.setOptions(query as any);
      if (queryKeys.includes('timetableId'))
        this.setSearchers('', '', `#${query.timetableId}`, '', '');
      if (queryKeys.includes('issuedFrom'))
        this.setSearchers('', '', '', '', `${query.issuedFrom}`);
      if (queryKeys.includes('authorName'))
        this.setSearchers('', '', '', `${query.authorName}`, '');
    },
-    setSearchers(
+    async fetchDriverStats() {
-      date: string,
+      if (!this.mainStore.driverStatsName) {
-      driver: string,
+        this.mainStore.driverStatsData = undefined;
-      train: string,
+        this.mainStore.driverStatsStatus = Status.Data.Initialized;
-      dispatcher: string,
+        return;
-      issuedFrom: string
+      }
-    ) {
+
-      this.searchersValues['search-date'] = date;
+      try {
-      this.searchersValues['search-driver'] = driver;
+        this.mainStore.driverStatsStatus = Status.Data.Loading;
-      this.searchersValues['search-train'] = train;
+
-      this.searchersValues['search-dispatcher'] = dispatcher;
+        const statsData: API.DriverStats.Response = await (
-      this.searchersValues['search-issuedFrom'] = issuedFrom;
+          await http.get(`api/getDriverInfo?name=${this.mainStore.driverStatsName}`)
        ).data;
        this.mainStore.driverStatsData = statsData;
        this.mainStore.driverStatsStatus = Status.Data.Loaded;
      } catch (error) {
        this.mainStore.driverStatsData = undefined;
        this.mainStore.driverStatsStatus = Status.Data.Error;
        console.error('Ups! Wystąpił błąd przy próbie pobrania statystyk maszynisty! :/');
      }
    },
    setOptions(options: { [key: string]: string }) {
      this.searchersValues['search-date'] = options['search-date'] ?? '';
      this.searchersValues['search-driver'] = options['search-driver'] ?? '';
      this.searchersValues['search-train'] = options['search-train'] ?? '';
      this.searchersValues['search-dispatcher'] = options['search-dispatcher'] ?? '';
      this.searchersValues['search-issuedFrom'] = options['search-issuedFrom'] ?? '';
      this.sorterActive.id =
        (options['sorter-active'] as Journal.TimetableSorterKey) ?? 'timetableId';
      this.filterList.forEach((f) => {
        f.isActive =
          options[f.filterSection] === f.id ||
          (options[f.filterSection] === undefined && f.default);
      });
    },
    resetOptions() {
-      this.setSearchers('', '', '', '', '');
+      this.setOptions({});
      this.sorterActive.id = 'timetableId';
      this.filterList.forEach(
        (f) =>
          (f.isActive =
            this.initFilters.find((initFilter) => initFilter.id == f.id)?.isActive || false)
      );
      this.fetchHistoryData();
    },
    async addHistoryData() {
@@ -272,7 +321,7 @@ export default defineComponent({
      this.currentQueryParams['countFrom'] = this.timetableHistory.length;
      const responseData: API.TimetableHistory.Response = await (
-        await axios.get(`${TIMETABLES_API_URL}`, {
+        await http.get('api/getTimetables', {
          params: { ...this.currentQueryParams }
        })
      ).data;
@@ -292,13 +341,19 @@ export default defineComponent({
      const driverName = this.searchersValues['search-driver'].trim() || undefined;
      const trainNo = this.searchersValues['search-train'].trim() || undefined;
      const authorName = this.searchersValues['search-dispatcher'].trim() || undefined;
-      const dateString = this.searchersValues['search-date'].trim() || undefined;
+      const dateFrom = this.searchersValues['search-date'].trim() || undefined;
      const issuedFrom = this.searchersValues['search-issuedFrom'].trim() || undefined;
-      const timestampFrom = dateString
+      let dateTo: string | undefined = undefined;
-        ? Date.parse(new Date(dateString).toISOString()) - 120 * 60 * 1000
+
-        : undefined;
+      if (dateFrom) {
-      const timestampTo = timestampFrom ? timestampFrom + 86400000 : undefined;
+        const d = new Date(dateFrom);
        d.setDate(d.getDate() + 1);
        dateTo = d.toISOString().split('T')[0];
      }
      // const timestampFrom = dateString ? Date.parse(new Date(dateString).toISOString()) : undefined;
      // const timestampTo = timestampFrom ? timestampFrom + 86400000 : undefined;
      const queryParams: TimetablesQueryParams = {};
@@ -321,23 +376,28 @@ export default defineComponent({
              queryParams['fulfilled'] = 1;
              break;
-            case Journal.TimetableFilterId.ALL:
+            case Journal.TimetableFilterId.ALL_STATUSES:
              queryParams['terminated'] = undefined;
              queryParams['fulfilled'] = undefined;
              break;
-            case Journal.TimetableFilterId.TWR_SKR:
+            case Journal.TimetableFilterId.ALL_SPECIALS:
              queryParams['twr'] = undefined;
              queryParams['skr'] = undefined;
              break;
            case Journal.TimetableFilterId.TWR:
              queryParams['twr'] = 1;
-              queryParams['skr'] = undefined;
+              queryParams['skr'] = 0;
              break;
            case Journal.TimetableFilterId.SKR:
-              queryParams['twr'] = undefined;
+              queryParams['twr'] = 0;
              queryParams['skr'] = 1;
              break;
            case Journal.TimetableFilterId.TWR_SKR:
              queryParams['twr'] = 1;
              queryParams['skr'] = 1;
              break;
@@ -352,8 +412,8 @@ export default defineComponent({
      queryParams['countLimit'] = undefined;
      queryParams['authorName'] = authorName;
-      queryParams['timestampFrom'] = timestampFrom;
+      queryParams['dateFrom'] = dateFrom;
-      queryParams['timestampTo'] = timestampTo;
+      queryParams['dateTo'] = dateTo;
      queryParams['issuedFrom'] = issuedFrom;
      queryParams['sortBy'] =
        this.sorterActive.id != 'timetableId' ? this.sorterActive.id : undefined;
@@ -365,7 +425,7 @@ export default defineComponent({
      try {
        const responseData: API.TimetableHistory.Response = await (
-          await axios.get(`${TIMETABLES_API_URL}`, {
+          await http.get('api/getTimetables', {
            params: this.currentQueryParams
          })
        ).data;
@@ -1,14 +1,6 @@
 <template>
  <div class="scenery-view">
-    <div class="scenery-offline" v-if="!stationInfo && store.dataStatuses.sceneries == 2">
+    <div class="scenery-wrapper" ref="card-wrapper">
      <div>{{ $t('scenery.no-scenery') }}</div>
      <action-button>
        <router-link to="/">{{ $t('scenery.return-btn') }}</router-link>
      </action-button>
    </div>
    <div class="scenery-wrapper" v-if="stationInfo" ref="card-wrapper">
      <div class="scenery-left">
        <div class="scenery-actions">
          <button class="back-btn btn" :title="$t('scenery.return-btn')" @click="navigateTo('/')">
@@ -16,7 +8,11 @@
          </button>
        </div>
-        <SceneryHeader :station="stationInfo" :onlineScenery="onlineSceneryInfo" />
+        <SceneryHeader
          :stationName="station"
          :station="stationInfo"
          :onlineScenery="onlineSceneryInfo"
        />
        <SceneryInfo :station="stationInfo" :onlineScenery="onlineSceneryInfo" />
      </div>
@@ -33,7 +29,14 @@
          </button>
        </div>
-        <keep-alive>
+        <div
          v-if="
            apiStore.dataStatuses.sceneries == Status.Loading ||
            apiStore.dataStatuses.connection == Status.Loading
          "
        ></div>
        <keep-alive v-else>
          <component
            :is="currentMode"
            :onlineScenery="onlineSceneryInfo"
@@ -50,7 +53,7 @@
 import { computed, defineComponent } from 'vue';
 import { useRoute } from 'vue-router';
 import routerMixin from '../mixins/routerMixin';
-import { useStore } from '../store/mainStore';
+import { useMainStore } from '../store/mainStore';
 import SceneryInfo from '../components/SceneryView/SceneryInfo.vue';
 import SceneryHeader from '../components/SceneryView/SceneryHeader.vue';
@@ -58,6 +61,8 @@ import SceneryTimetable from '../components/SceneryView/SceneryTimetable.vue';
 import SceneryTimetablesHistory from '../components/SceneryView/SceneryTimetablesHistory.vue';
 import SceneryDispatchersHistory from '../components/SceneryView/SceneryDispatchersHistory.vue';
 import ActionButton from '../components/Global/ActionButton.vue';
 import { Status } from '../typings/common';
 import { useApiStore } from '../store/apiStore';
 enum SceneryViewMode {
  'TIMETABLES_ACTIVE',
@@ -92,7 +97,9 @@ export default defineComponent({
  mixins: [routerMixin],
  data: () => ({
-    store: useStore(),
+    store: useMainStore(),
    apiStore: useApiStore(),
    viewModes: [
      {
        id: 'scenery.option-active-timetables',
@@ -110,7 +117,8 @@ export default defineComponent({
    sceneryViewMode: SceneryViewMode,
    selectedCheckpoint: '',
    currentViewCompontent: 'SceneryTimetable',
-    onlineFrom: -1
+    onlineFrom: -1,
    Status: Status.Data
  }),
  // activated() {
@@ -185,8 +193,6 @@ button.back-btn {
  &-view {
    display: flex;
    justify-content: center;
    min-height: 100vh;
  }
  &-offline {
@@ -215,6 +221,7 @@ button.back-btn {
  width: 100%;
  max-width: 1700px;
  min-height: 100vh;
  margin: 1rem 0;
  text-align: center;
@@ -21,7 +21,7 @@ import { defineComponent } from 'vue';
 import StationTable from '../components/StationsView/StationTable.vue';
 import StationFilterCard from '../components/StationsView/StationFilterCard.vue';
 import { useStationFiltersStore } from '../store/stationFiltersStore';
-import { useStore } from '../store/mainStore';
+import { useMainStore } from '../store/mainStore';
 import Donation from '../components/Global/Donation.vue';
 export default defineComponent({
@@ -37,7 +37,7 @@ export default defineComponent({
    STORAGE_KEY: 'options_saved',
    focusedStationName: '',
    filterStore: useStationFiltersStore(),
-    store: useStore(),
+    store: useMainStore(),
    isDonationModalOpen: false
  }),
@@ -1,10 +1,14 @@
 <template>
  <section class="trains-view">
    <div class="trains_wrapper">
-      <TrainOptions
+      <div class="trains_topbar">
-        :sorter-option-ids="['routeDistance', 'id', 'progress', 'delay', 'mass', 'speed', 'length']"
+        <TrainOptions
-        :current-options-active="currentOptionsActive"
+          :sorter-option-ids="sorterIds"
-      />
+          :current-options-active="currentOptionsActive"
        />
        <TrainStats />
      </div>
      <TrainTable :trains="computedTrains" />
    </div>
@@ -17,14 +21,16 @@ import TrainOptions from '../components/TrainsView/TrainOptions.vue';
 import TrainTable from '../components/TrainsView/TrainTable.vue';
 import modalTrainMixin from '../mixins/modalTrainMixin';
 import Train from '../scripts/interfaces/Train';
-import { useStore } from '../store/mainStore';
+import { useMainStore } from '../store/mainStore';
 import { TrainFilter, trainFilters } from '../components/TrainsView/typings';
 import { filteredTrainList } from '../managers/trainFilterManager';
 import TrainStats from '../components/TrainsView/TrainStats.vue';
 export default defineComponent({
  components: {
    TrainTable,
-    TrainOptions
+    TrainOptions,
    TrainStats
  },
  mixins: [modalTrainMixin],
@@ -47,11 +53,12 @@ export default defineComponent({
  },
  data: () => ({
-    trainStatsOpen: false
+    trainStatsOpen: false,
    sorterIds: ['routeDistance', 'id', 'progress', 'delay', 'mass', 'speed', 'length']
  }),
  setup() {
-    const store = useStore();
+    const store = useMainStore();
    const initTrainFilters = [...trainFilters.map((f) => ({ ...f }))];
    const sorterActive = reactive({ id: 'routeDistance', dir: -1 });
@@ -121,4 +128,13 @@ export default defineComponent({
  margin: 1rem auto;
  max-width: 1350px;
 }
 .trains_topbar {
  display: flex;
  align-items: center;
  gap: 0.5em;
  position: relative;
  margin-bottom: 0.5em;
 }
 </style>
@@ -6,20 +6,22 @@ export default defineConfig({
  server: {
    port: 5001
  },
  publicDir: 'public',
  plugins: [
    vue(),
    VitePWA({
      registerType: 'autoUpdate',
      includeAssets: ['/images/*.png', '/fonts/*.woff', '/fonts/*.woff2'],
      workbox: {
        disableDevLogs: true,
        globPatterns: ['**/*.{js,css,html,png,svg,jpg}'],
        runtimeCaching: [
          {
-            urlPattern: new RegExp('^https://stacjownik.spythere.pl/api/getSceneries', 'i'),
+            urlPattern: new RegExp('^https://stacjownik.spythere.eu/api/getSceneries', 'i'),
            handler: 'NetworkFirst',
            options: {
              cacheName: 'sceneries-cache',
              cacheableResponse: {
                statuses: [0, 200]
              }
@@ -29,12 +29,13 @@
    jsonpointer "^5.0.0"
    leven "^3.1.0"
-"@babel/code-frame@^7.10.4", "@babel/code-frame@^7.18.6":
+"@babel/code-frame@^7.10.4", "@babel/code-frame@^7.18.6", "@babel/code-frame@^7.22.13", "@babel/code-frame@^7.23.5":
-  version "7.18.6"
+  version "7.23.5"
-  resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz"
+  resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz"
-  integrity sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==
+  integrity sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==
  dependencies:
-    "@babel/highlight" "^7.18.6"
+    "@babel/highlight" "^7.23.4"
    chalk "^2.4.2"
 "@babel/compat-data@^7.17.7", "@babel/compat-data@^7.20.1", "@babel/compat-data@^7.20.5":
  version "7.20.10"
@@ -62,13 +63,14 @@
    json5 "^2.2.1"
    semver "^6.3.0"
-"@babel/generator@^7.20.7":
+"@babel/generator@^7.20.7", "@babel/generator@^7.23.5":
-  version "7.20.7"
+  version "7.23.5"
-  resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.20.7.tgz"
+  resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.23.5.tgz"
-  integrity sha512-7wqMOJq8doJMZmP4ApXTzLxSr7+oO2jroJURrVEp6XShrQUObV8Tq/D0NCcoYg2uHqUrjzO0zwBjoYzelxK+sw==
+  integrity sha512-BPssCHrBD+0YrxviOa3QzpqwhNIXKEtOa2jQrm4FlmkC2apYgRnQcmPWiGZDlGxiNtltnUFolMe8497Esry+jA==
  dependencies:
-    "@babel/types" "^7.20.7"
+    "@babel/types" "^7.23.5"
    "@jridgewell/gen-mapping" "^0.3.2"
    "@jridgewell/trace-mapping" "^0.3.17"
    jsesc "^2.5.1"
 "@babel/helper-annotate-as-pure@^7.18.6":
@@ -130,10 +132,10 @@
    resolve "^1.14.2"
    semver "^6.1.2"
-"@babel/helper-environment-visitor@^7.18.9":
+"@babel/helper-environment-visitor@^7.18.9", "@babel/helper-environment-visitor@^7.22.20":
-  version "7.18.9"
+  version "7.22.20"
-  resolved "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz"
+  resolved "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz"
-  integrity sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==
+  integrity sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==
 "@babel/helper-explode-assignable-expression@^7.18.6":
  version "7.18.6"
@@ -142,20 +144,20 @@
  dependencies:
    "@babel/types" "^7.18.6"
-"@babel/helper-function-name@^7.18.9", "@babel/helper-function-name@^7.19.0":
+"@babel/helper-function-name@^7.18.9", "@babel/helper-function-name@^7.19.0", "@babel/helper-function-name@^7.23.0":
-  version "7.19.0"
+  version "7.23.0"
-  resolved "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz"
+  resolved "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz"
-  integrity sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==
+  integrity sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==
  dependencies:
-    "@babel/template" "^7.18.10"
+    "@babel/template" "^7.22.15"
-    "@babel/types" "^7.19.0"
+    "@babel/types" "^7.23.0"
-"@babel/helper-hoist-variables@^7.18.6":
+"@babel/helper-hoist-variables@^7.18.6", "@babel/helper-hoist-variables@^7.22.5":
-  version "7.18.6"
+  version "7.22.5"
-  resolved "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz"
+  resolved "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz"
-  integrity sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==
+  integrity sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==
  dependencies:
-    "@babel/types" "^7.18.6"
+    "@babel/types" "^7.22.5"
 "@babel/helper-member-expression-to-functions@^7.20.7":
  version "7.20.7"
@@ -233,22 +235,22 @@
  dependencies:
    "@babel/types" "^7.20.0"
-"@babel/helper-split-export-declaration@^7.18.6":
+"@babel/helper-split-export-declaration@^7.18.6", "@babel/helper-split-export-declaration@^7.22.6":
-  version "7.18.6"
+  version "7.22.6"
-  resolved "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz"
+  resolved "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz"
-  integrity sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==
+  integrity sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==
  dependencies:
-    "@babel/types" "^7.18.6"
+    "@babel/types" "^7.22.5"
-"@babel/helper-string-parser@^7.19.4":
+"@babel/helper-string-parser@^7.23.4":
-  version "7.19.4"
+  version "7.23.4"
-  resolved "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz"
+  resolved "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz"
-  integrity sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==
+  integrity sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==
-"@babel/helper-validator-identifier@^7.18.6", "@babel/helper-validator-identifier@^7.19.1":
+"@babel/helper-validator-identifier@^7.19.1", "@babel/helper-validator-identifier@^7.22.20":
-  version "7.19.1"
+  version "7.22.20"
-  resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz"
+  resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz"
-  integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==
+  integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
 "@babel/helper-validator-option@^7.18.6":
  version "7.18.6"
@@ -274,29 +276,19 @@
    "@babel/traverse" "^7.20.7"
    "@babel/types" "^7.20.7"
-"@babel/highlight@^7.18.6":
+"@babel/highlight@^7.23.4":
-  version "7.18.6"
+  version "7.23.4"
-  resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz"
+  resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz"
-  integrity sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==
+  integrity sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==
  dependencies:
-    "@babel/helper-validator-identifier" "^7.18.6"
+    "@babel/helper-validator-identifier" "^7.22.20"
-    chalk "^2.0.0"
+    chalk "^2.4.2"
    js-tokens "^4.0.0"
-"@babel/parser@^7.20.15":
+"@babel/parser@^7.20.15", "@babel/parser@^7.20.7", "@babel/parser@^7.21.3", "@babel/parser@^7.22.15", "@babel/parser@^7.23.5":
-  version "7.22.16"
+  version "7.23.5"
-  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.22.16.tgz"
+  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.23.5.tgz"
-  integrity sha512-+gPfKv8UWeKKeJTUxe59+OobVcrYHETCsORl61EmSkmgymguYk/X5bp7GuUIXaFsc6y++v8ZxPsLSSuujqDphA==
+  integrity sha512-hOOqoiNXrmGdFbhgCzu6GiURxUgM27Xwd/aPuu8RfHEZPBzL1Z54okAHAQjXfcQNwvrlkAmAp4SlRTZ45vlthQ==
 "@babel/parser@^7.20.7":
  version "7.20.7"
  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.20.7.tgz"
  integrity sha512-T3Z9oHybU+0vZlY9CiDSJQTD5ZapcW18ZctFMi0MOAl/4BjFF4ul7NVSARLdbGO5vDqy9eQiGTV0LtKfvCYvcg==
 "@babel/parser@^7.21.3":
  version "7.22.16"
  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.22.16.tgz"
  integrity sha512-+gPfKv8UWeKKeJTUxe59+OobVcrYHETCsORl61EmSkmgymguYk/X5bp7GuUIXaFsc6y++v8ZxPsLSSuujqDphA==
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
  version "7.18.6"
@@ -898,38 +890,38 @@
  dependencies:
    regenerator-runtime "^0.13.11"
-"@babel/template@^7.18.10", "@babel/template@^7.20.7":
+"@babel/template@^7.18.10", "@babel/template@^7.20.7", "@babel/template@^7.22.15":
-  version "7.20.7"
+  version "7.22.15"
-  resolved "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz"
+  resolved "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz"
-  integrity sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==
+  integrity sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==
  dependencies:
-    "@babel/code-frame" "^7.18.6"
+    "@babel/code-frame" "^7.22.13"
-    "@babel/parser" "^7.20.7"
+    "@babel/parser" "^7.22.15"
-    "@babel/types" "^7.20.7"
+    "@babel/types" "^7.22.15"
 "@babel/traverse@^7.20.5", "@babel/traverse@^7.20.7":
-  version "7.20.10"
+  version "7.23.5"
-  resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.20.10.tgz"
+  resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.5.tgz"
-  integrity sha512-oSf1juCgymrSez8NI4A2sr4+uB/mFd9MXplYGPEBnfAuWmmyeVcHa6xLPiaRBcXkcb/28bgxmQLTVwFKE1yfsg==
+  integrity sha512-czx7Xy5a6sapWWRx61m1Ke1Ra4vczu1mCTtJam5zRTBOonfdJ+S/B6HYmGYu3fJtr8GGET3si6IhgWVBhJ/m8w==
  dependencies:
-    "@babel/code-frame" "^7.18.6"
+    "@babel/code-frame" "^7.23.5"
-    "@babel/generator" "^7.20.7"
+    "@babel/generator" "^7.23.5"
-    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-environment-visitor" "^7.22.20"
-    "@babel/helper-function-name" "^7.19.0"
+    "@babel/helper-function-name" "^7.23.0"
-    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-hoist-variables" "^7.22.5"
-    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.22.6"
-    "@babel/parser" "^7.20.7"
+    "@babel/parser" "^7.23.5"
-    "@babel/types" "^7.20.7"
+    "@babel/types" "^7.23.5"
    debug "^4.1.0"
    globals "^11.1.0"
-"@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.19.0", "@babel/types@^7.20.0", "@babel/types@^7.20.2", "@babel/types@^7.20.5", "@babel/types@^7.20.7", "@babel/types@^7.4.4":
+"@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.20.0", "@babel/types@^7.20.2", "@babel/types@^7.20.5", "@babel/types@^7.20.7", "@babel/types@^7.22.15", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.5", "@babel/types@^7.4.4":
-  version "7.20.7"
+  version "7.23.5"
-  resolved "https://registry.npmjs.org/@babel/types/-/types-7.20.7.tgz"
+  resolved "https://registry.npmjs.org/@babel/types/-/types-7.23.5.tgz"
-  integrity sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==
+  integrity sha512-ON5kSOJwVO6xXVRTvOI0eOnWe7VdUcIpsovGo9U/Br4Ie4UVFQTboO2cYnDhAGU6Fp+UxSiT+pMft0SMHfuq6w==
  dependencies:
-    "@babel/helper-string-parser" "^7.19.4"
+    "@babel/helper-string-parser" "^7.23.4"
-    "@babel/helper-validator-identifier" "^7.19.1"
+    "@babel/helper-validator-identifier" "^7.22.20"
    to-fast-properties "^2.0.0"
 "@canvas/image-data@^1.0.0":
@@ -1449,7 +1441,7 @@
  resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz"
  integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
-"@jridgewell/trace-mapping@^0.3.9":
+"@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.9":
  version "0.3.17"
  resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz"
  integrity sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==
@@ -1585,11 +1577,6 @@
  resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.5.1.tgz"
  integrity sha512-6i/8UoL0P5y4leBIGzvkZdS85RDMG9y1ihZzmTZQ5LdHUYmZ7pKFoj8X0236s3lusPs1Fa5HTQUpwI+UfTcmeA==
 "@socket.io/component-emitter@~3.1.0":
  version "3.1.0"
  resolved "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz"
  integrity sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==
 "@surma/rollup-plugin-off-main-thread@^2.2.3":
  version "2.2.3"
  resolved "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz"
@@ -1997,9 +1984,9 @@ at-least-node@^1.0.0:
  integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
 axios@^1.5.0:
-  version "1.5.0"
+  version "1.6.2"
-  resolved "https://registry.npmjs.org/axios/-/axios-1.5.0.tgz"
+  resolved "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz"
-  integrity sha512-D4DdjDo5CY50Qms0qGQTTw6Q44jl7zRwY7bthds06pUGfChBCTcQs+N743eFWGEd6pRTMd6A+I87aWyFV5wiZQ==
+  integrity sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==
  dependencies:
    follow-redirects "^1.15.0"
    form-data "^4.0.0"
@@ -2151,11 +2138,11 @@ callsites@^3.0.0:
  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 caniuse-lite@^1.0.30001400:
-  version "1.0.30001503"
+  version "1.0.30001565"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001503.tgz"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001565.tgz"
-  integrity sha512-Sf9NiF+wZxPfzv8Z3iS0rXM1Do+iOy2Lxvib38glFX+08TCYYYGR5fRJXk4d77C4AYwhUjgYgMsMudbh2TqCKw==
+  integrity sha512-xrE//a3O7TP0vaJ8ikzkD2c2NgcVUvsEe2IvFTntV4Yd1Z9FVzh+gW+enX96L0psrbaFMcVcH2l90xNuGDWc8w==
-chalk@^2.0.0:
+chalk@^2.4.2:
  version "2.4.2"
  resolved "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz"
  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -2327,7 +2314,7 @@ de-indent@^1.0.2:
  resolved "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz"
  integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
-debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4, debug@~4.3.1, debug@~4.3.2:
+debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4:
  version "4.3.4"
  resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -2462,22 +2449,6 @@ end-of-stream@^1.1.0, end-of-stream@^1.4.1:
  dependencies:
    once "^1.4.0"
 engine.io-client@~6.5.2:
  version "6.5.2"
  resolved "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.5.2.tgz"
  integrity sha512-CQZqbrpEYnrpGqC07a9dJDz4gePZUgTPMU3NKJPSeQOyw27Tst4Pl3FemKoFGAlHzgZmKjoRmiJvbWfhCXUlIg==
  dependencies:
    "@socket.io/component-emitter" "~3.1.0"
    debug "~4.3.1"
    engine.io-parser "~5.2.1"
    ws "~8.11.0"
    xmlhttprequest-ssl "~2.0.0"
 engine.io-parser@~5.2.1:
  version "5.2.1"
  resolved "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.1.tgz"
  integrity sha512-9JktcM3u18nU9N2Lz3bWeBgxVgOKpw7yhRaoxQA3FUDZzzw+9WlA6p4G4u0RixNkg14fH7EfEc/RhpurtiROTQ==
 es-abstract@^1.19.0, es-abstract@^1.20.4:
  version "1.20.5"
  resolved "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.5.tgz"
@@ -3597,11 +3568,6 @@ muggle-string@^0.3.1:
  resolved "https://registry.npmjs.org/muggle-string/-/muggle-string-0.3.1.tgz"
  integrity sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg==
 nanoid@^3.3.4:
  version "3.3.4"
  resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz"
  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
 nanoid@^3.3.6:
  version "3.3.6"
  resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz"
@@ -3821,19 +3787,10 @@ postcss-selector-parser@^6.0.13:
    cssesc "^3.0.0"
    util-deprecate "^1.0.2"
-postcss@^8.1.10:
+postcss@^8.1.10, postcss@^8.4.27:
-  version "8.4.20"
+  version "8.4.31"
-  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.20.tgz"
+  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz"
-  integrity sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==
+  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
  dependencies:
    nanoid "^3.3.4"
    picocolors "^1.0.0"
    source-map-js "^1.0.2"
 postcss@^8.4.27:
  version "8.4.30"
  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.30.tgz"
  integrity sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==
  dependencies:
    nanoid "^3.3.6"
    picocolors "^1.0.0"
@@ -4123,9 +4080,9 @@ sass@*, sass@^1.67.0:
    source-map-js ">=0.6.2 <2.0.0"
 semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
-  version "6.3.0"
+  version "6.3.1"
-  resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz"
+  resolved "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz"
-  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
+  integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 semver@^7.3.5:
  version "7.5.4"
@@ -4237,24 +4194,6 @@ slash@^3.0.0:
  resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz"
  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 socket.io-client@^4.7.2:
  version "4.7.2"
  resolved "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.7.2.tgz"
  integrity sha512-vtA0uD4ibrYD793SOIAwlo8cj6haOeMHrGvwPxJsxH7CeIksqJ+3Zc06RvWTIFgiSqx4A3sOnTXpfAEE2Zyz6w==
  dependencies:
    "@socket.io/component-emitter" "~3.1.0"
    debug "~4.3.2"
    engine.io-client "~6.5.2"
    socket.io-parser "~4.2.4"
 socket.io-parser@~4.2.4:
  version "4.2.4"
  resolved "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz"
  integrity sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==
  dependencies:
    "@socket.io/component-emitter" "~3.1.0"
    debug "~4.3.1"
 source-map-js@^1.0.2, "source-map-js@>=0.6.2 <2.0.0":
  version "1.0.2"
  resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
@@ -4653,9 +4592,9 @@ vite-plugin-pwa@^0.16.5:
    workbox-window "^7.0.0"
 "vite@^3.1.0 || ^4.0.0", vite@^4.0.0, vite@^4.4.9:
-  version "4.4.9"
+  version "4.5.1"
-  resolved "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz"
+  resolved "https://registry.npmjs.org/vite/-/vite-4.5.1.tgz"
-  integrity sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==
+  integrity sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==
  dependencies:
    esbuild "^0.18.10"
    postcss "^8.4.27"
@@ -4956,21 +4895,11 @@ wrappy@1:
  resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
  integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
 ws@~8.11.0:
  version "8.11.0"
  resolved "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz"
  integrity sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==
 xml-name-validator@^4.0.0:
  version "4.0.0"
  resolved "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz"
  integrity sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==
 xmlhttprequest-ssl@~2.0.0:
  version "2.0.0"
  resolved "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz"
  integrity sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==
 y18n@^5.0.5:
  version "5.0.8"
  resolved "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz"
Author	SHA1	Message	Date
Spythere	e43f1e0819	Wersja 1.20.3 Wersja 1.20.3	2024-01-26 13:59:23 +01:00
Spythere	f130e6900b	hotfix: brak komentarzy dla ostatniej stacji w RJ	2024-01-26 13:54:47 +01:00
Spythere	db205915be	bump wersji	2024-01-26 13:39:04 +01:00
Spythere	05c38e10e3	hotfix postojów pt w SRJP	2024-01-26 13:38:45 +01:00
Spythere	a8f683a585	mock data	2024-01-26 13:38:28 +01:00
Spythere	68f6fc8a42	Wersja 1.20.2 Wersja 1.20.2	2024-01-24 20:37:35 +01:00
Spythere	6d3b32cd7d	bump: 1.20.2	2024-01-24 20:35:49 +01:00
Spythere	fadecc9d2c	fix literówki w tłumaczeniu	2024-01-24 20:35:15 +01:00
Spythere	50602cb6db	Merge pull request #74 from Spythere/development - rozbudowany szczegółówy RJ pociągu - hotfixy do pobierania danych z API	2024-01-13 17:54:17 +01:00
Spythere	186ce81819	hotfix: filtrowanie aktywnych rj do odpowiednich regionów	2024-01-13 17:28:16 +01:00
Spythere	f836a075b0	hotfix: pobieranie historii RJ nieznanych scenerii	2024-01-13 15:41:40 +01:00
Spythere	9acf3c740c	dodano wybór z listy autorów w filtrach	2024-01-06 17:40:43 +01:00
Spythere	bc1c1bd3d2	filtrowanie ukrytych szlaków	2024-01-06 14:47:20 +01:00
Spythere	2348277b95	poprawki do SRJP	2024-01-06 14:10:59 +01:00
Spythere	cd5f489df7	bump wersji: 1.20.1	2024-01-06 14:06:50 +01:00
Spythere	f74962222b	przywrócenie SRJP bez pokazywania dod. informacji	2024-01-06 14:05:40 +01:00
Spythere	e7f651d2b9	poprawki ułożenia elementów progress bara SRJP, elektryfikacja szlaku	2024-01-02 15:44:48 +01:00
Spythere	4862328090	rozbudowany szczegółówy RJ pociągu	2024-01-01 22:49:19 +01:00
Spythere	87631d1f74	Merge pull request #73 from Spythere/development Wersja 1.20	2023-12-23 14:08:08 +01:00
Spythere	86bb9fcc2e	hotfix redirectu do zakładki dziennika	2023-12-22 16:39:42 +01:00
Spythere	b85e3bfe1d	ukryto ikonę pragotronu	2023-12-22 16:16:19 +01:00
Spythere	dd15072813	linting	2023-12-22 16:13:45 +01:00
Spythere	2f8376c996	dodane nowe statystyki dnia; poprawki bugów	2023-12-22 15:46:47 +01:00
Spythere	514723cf74	poprawki typów; ułożenie elementów w karcie filtrów scenerii	2023-12-21 22:16:03 +01:00
Spythere	0995ce15bc	poprawki filtrów dziennia DR	2023-12-21 22:11:06 +01:00
Spythere	3b3c3bda31	poprawki wskaźników ładowania	2023-12-21 19:53:34 +01:00
Spythere	2027b85450	lokalne fonty; poprawki offline i cachingu pwa	2023-12-21 19:27:27 +01:00
Spythere	0c6b55146f	bump: 1.20.0	2023-12-20 23:56:18 +01:00
Spythere	3c728e3cfa	poprawki requestów statystyk; organizacja kodu	2023-12-20 23:55:42 +01:00
Spythere	adce339392	statystyki dr (c.d.) + tłumaczenia	2023-12-19 22:11:17 +01:00
Spythere	00a4a840b0	statystyki DR	2023-12-18 16:00:18 +01:00
Spythere	1e705ea496	filtry URL dziennika DR	2023-12-17 19:51:52 +01:00
Spythere	e8ed36df16	reaktywne filtry URL w dzienniku RJ	2023-12-17 16:10:13 +01:00
Spythere	f4be32aa39	Statystyki DR (wip)	2023-12-16 17:49:54 +01:00
Spythere	e0d3d2585d	zmiana wyglądu statystyk dzienników	2023-12-14 18:42:13 +01:00
Spythere	ebfaf06a44	Merge pull request #72 from Spythere/development Wersja 1.19.4	2023-12-11 13:02:05 +01:00
Spythere	5a651aedf8	imports hotfix	2023-12-11 12:58:41 +01:00
Spythere	b66af014b9	lock sync	2023-12-10 15:29:29 +01:00
Spythere	634c9e1514	bump wersji: 1.19.4	2023-12-10 15:23:54 +01:00
Spythere	c4132a9be2	cleanup http c.d.	2023-12-10 15:23:27 +01:00
Spythere	82a9a9165f	cleanup http	2023-12-10 15:22:33 +01:00
Spythere	fcac03c0a4	Merge pull request #71 from Spythere/development Wersja 1.19.3	2023-12-10 00:56:21 +01:00
Spythere	39c3cf2329	restrukturyzacja storów	2023-12-09 16:18:23 +01:00
Spythere	59f4a0cb66	zmniejszenie czasu odpytywania z serwera	2023-12-08 20:00:17 +01:00
Spythere	e2b42d16a4	poprawki scrollBehavior	2023-12-08 18:55:06 +01:00
Spythere	e23663ed28	fix: brak ładowania danych o historii scenerii przy bezpośrednim wejściu z poz. URL	2023-12-08 18:15:49 +01:00
Spythere	dc7846c31e	bump wersji: 1.19.3	2023-12-08 17:15:16 +01:00
Spythere	d875433d56	ulepszone zapamiętywanie zakładek statystyk w dzienniku	2023-12-08 17:14:49 +01:00
Spythere	71e5044cb4	poprawki designu dziennika RJ	2023-12-08 16:20:17 +01:00
Spythere	e83aa40f82	aktualizacja endpointu API statystyk	2023-12-08 16:16:14 +01:00
Spythere	d1c0e0b898	Merge pull request #70 from Spythere/development Wersja 1.19.2	2023-12-07 16:29:53 +01:00
Spythere	26a7c69886	bump: 1.19.2	2023-12-07 16:18:21 +01:00
Spythere	0dc2c505db	poprawki do braku pokazywania się niezapisanych scenerii	2023-12-07 16:16:06 +01:00
Spythere	188857d335	fix: rozkłady jazdy pokazują się na innych serwerach	2023-12-06 20:29:28 +01:00
Spythere	3dbbb3b4f9	Merge pull request #69 from Spythere/development Wersja 1.19.1	2023-12-02 23:04:55 +01:00
Spythere	07a77c463b	bump 1.19.1	2023-12-02 23:04:24 +01:00
Spythere	1a8e2231dd	przejście z WS na komunikację http	2023-12-02 23:02:08 +01:00
Spythere	f630d272ca	Merge pull request #68 from Spythere/development Wersja 1.19.0	2023-12-02 18:31:58 +01:00
Spythere	a381cf806c	wyróżnienie nicku donatora w widoku scenerii	2023-12-02 18:15:52 +01:00
Spythere	0023ab8cfd	tłumaczenia; poprawki dropdown	2023-12-02 18:01:01 +01:00
Spythere	a392940d52	tłumaczenia	2023-12-02 16:15:37 +01:00
Spythere	74984ad653	dodano wyróżnienie nicku wspierającego w Dzienniku	2023-12-02 16:11:29 +01:00
Spythere	a8991434bc	tłumaczenia statystyk pociągów	2023-12-02 16:00:28 +01:00
Spythere	825610b4c2	hotfix; aktualizacja paczek	2023-12-01 21:40:04 +01:00
Spythere	fef3991206	bump: 1.19.0	2023-12-01 21:27:13 +01:00
Spythere	a21cb31a0a	ikona przy informacji offline pociągu	2023-12-01 21:26:57 +01:00
Spythere	23a954a0d1	statystyki ruchu online	2023-12-01 21:19:04 +01:00
Spythere	b7bc9625b8	dodatkowe opcje darowizny	2023-12-01 16:11:56 +01:00
Spythere	bc58196804	cleanup	2023-12-01 14:55:13 +01:00
Spythere	6550d6973e	zmiana API do pobierania informacji o wspierających	2023-12-01 14:54:55 +01:00
Spythere	d7a609a4f2	Merge pull request #67 from Spythere/development poprawki tłumaczeń; scrolling	2023-11-28 19:12:57 +01:00
Spythere	763506d5a9	bump: 1.18.6	2023-11-28 19:10:08 +01:00
Spythere	8dbb32b821	dodatkowe tłumaczenia	2023-11-28 19:09:14 +01:00
Spythere	b8a21e0f70	Merge pull request #66 from Spythere/development hotfix: scrollowanie tabelki scenerii	2023-11-28 18:58:27 +01:00
Spythere	7c2b5fbd50	hotfix scrollowania	2023-11-28 18:56:02 +01:00