Aktualizacja odnośnika do changelogu

Aktualizacja Stacjownika do wersji 1.10.4

.github/workflows/firebase-hosting-merge.yml

@@ -1,20 +0,0 @@
-# This file was auto-generated by the Firebase CLI
-# https://github.com/firebase/firebase-tools
-
-name: Deploy to Firebase Hosting on merge
-'on':
-  push:
-    branches:
-      - master
-jobs:
-  build_and_deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - run: npm ci && npm run build
-      - uses: FirebaseExtended/action-hosting-deploy@v0
-        with:
-          repoToken: '${{ secrets.GITHUB_TOKEN }}'
-          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_STACJOWNIK_TD2 }}'
-          channelId: live
-          projectId: stacjownik-td2

.github/workflows/firebase-hosting-pull-request.yml

@@ -1,14 +0,0 @@
-name: Deploy to Firebase Hosting on PR
-'on': pull_request
-jobs:
-  build_and_preview:
-    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - run: npm ci && npm run build
-      - uses: FirebaseExtended/action-hosting-deploy@v0
-        with:
-          repoToken: '${{ secrets.GITHUB_TOKEN }}'
-          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_STACJOWNIK_TD2 }}'
-          projectId: stacjownik-td2

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "stacjownik",
-  "version": "1.10.2-alpha",
+  "version": "1.10.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "stacjownik",
-      "version": "1.10.2-alpha",
+      "version": "1.10.4",
       "dependencies": {
         "core-js": "^3.12.1",
         "dotenv": "^8.6.0",

package.json

@@ -1,35 +1,36 @@
-{
-  "name": "stacjownik",
-  "version": "1.10.0",
-  "private": true,
-  "scripts": {
-    "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "core-js": "^3.12.1",
-    "dotenv": "^8.6.0",
-    "firebase": "^9.8.1",
-    "howler": "^2.2.1",
-    "pinia": "^2.0.14",
-    "sass": "^1.53.0",
-    "socket.io-client": "^4.4.1",
-    "vue": "^3.2.37",
-    "vue-i18n": "^9.1.6",
-    "vue-router": "^4.0.0-0"
-  },
-  "devDependencies": {
-    "@types/node": "^17.0.35",
-    "@vitejs/plugin-vue": "^3.0.0",
-    "axios": "^0.21.1",
-    "typescript": "^4.6.4",
-    "vite": "^3.0.0",
-    "vue-tsc": "^0.38.4"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ]
-}
+{
+  "name": "stacjownik",
+  "version": "1.10.6",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "deploy": "yarn build && firebase deploy --only hosting",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "core-js": "^3.12.1",
+    "dotenv": "^8.6.0",
+    "firebase": "^9.8.1",
+    "howler": "^2.2.1",
+    "pinia": "^2.0.14",
+    "sass": "^1.53.0",
+    "socket.io-client": "^4.4.1",
+    "vue": "^3.2.37",
+    "vue-i18n": "^9.1.6",
+    "vue-router": "^4.0.0-0"
+  },
+  "devDependencies": {
+    "@types/node": "^17.0.35",
+    "@vitejs/plugin-vue": "^3.0.0",
+    "axios": "^0.21.1",
+    "typescript": "^4.6.4",
+    "vite": "^3.0.0",
+    "vue-tsc": "^0.38.4"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

src/App.scss

@@ -45,7 +45,7 @@
   font-size: 1rem;
 
   @include smallScreen() {
-    font-size: calc(0.4rem + 1.4vw);
+    font-size: calc(0.55rem + 1vw);
   }
 }
 
@@ -81,162 +81,6 @@
   border-radius: 0 0 1em 1em;
 }
 
-// Error icon
-.wip-alert {
-  padding: 0 0.5em;
-  text-align: center;
-}
-
-.icon-error {
-  width: 13em;
-  margin: 0.5em 0;
-}
-
-// HEADER
-.app_header {
-  display: flex;
-  justify-content: center;
-
-  position: relative;
-  background-color: $primaryCol;
-}
-
-.header {
-  &_body {
-    max-width: 21em;
-  }
-
-  &_container {
-    display: flex;
-    justify-content: center;
-    position: relative;
-
-    width: 1350px;
-    padding: 0.5em 0.3em 0 0.3em;
-    border-radius: 0 0 1em 1em;
-  }
-
-  &_brand {
-    img {
-      width: 100%;
-    }
-  }
-
-  &_info {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    max-width: 100%;
-
-    font-size: 1.2em;
-  }
-
-  &_links {
-    display: flex;
-    justify-content: center;
-
-    border-radius: 0.7em;
-
-    font-size: 1.25em;
-    padding: 0.5em;
-  }
-
-  &_icons {
-    position: absolute;
-    right: 0;
-    top: 0;
-    height: 100%;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    align-items: flex-end;
-    padding: 0.5em 0.5em;
-
-    @include smallScreen() {
-      right: auto;
-      left: 0.75em;
-      padding: 0;
-
-      align-items: center;
-    }
-  }
-}
-
-// ICONS
-.icons {
-  position: relative;
-
-  &-top {
-    img {
-      width: 2.5em;
-
-      cursor: pointer;
-    }
-
-    margin-bottom: 0.5em;
-  }
-
-  &-bottom {
-    display: flex;
-
-    a {
-      margin-left: 0.6em;
-      user-select: none;
-    }
-
-    img {
-      width: 1.9em;
-    }
-
-    @include smallScreen() {
-      flex-direction: column;
-
-      a {
-        margin: 0.25em 0;
-      }
-    }
-  }
-}
-
-// COUNTER
-.info_counter {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  span {
-    margin: 0 0.15em;
-  }
-
-  img {
-    width: 1.35em;
-  }
-}
-
-// REGION SELECTION
-.info_region {
-  color: white;
-  font-weight: bold;
-
-  display: flex;
-  justify-content: flex-end;
-
-  .select-box_content button {
-    background-color: transparent;
-    font-weight: bold;
-    padding: 0.1em 0.5em;
-    color: paleturquoise;
-  }
-
-  .options {
-    font-size: 0.9em;
-  }
-
-  .arrow {
-    padding: 0;
-  }
-}
-
 // FOOTER
 footer.app_footer {
   max-width: 100%;

src/App.vue

@@ -1,72 +1,17 @@
 <template>
   <div class="app_container">
-    <UpdateModal />
-
     <transition name="modal-anim">
       <keep-alive>
         <TrainModal v-if="store.chosenModalTrainId" />
       </keep-alive>
     </transition>
 
-    <header class="app_header">
-      <div class="header_container">
-        <div class="header_icons">
-          <span class="icons-top">
-            <img :src="getIcon('pl')" alt="icon-pl" @click="changeLang('en')" v-if="currentLang == 'pl'" />
-            <img :src="getIcon('en', 'jpg')" alt="icon-en" @click="changeLang('pl')" v-else />
-          </span>
-          <span class="icons-bottom">
-            <a href="https://www.paypal.com/paypalme/spythere" target="_blank">
-              <img :src="getIcon('dollar')" alt="icon paypal" />
-            </a>
-
-            <a href="https://discord.gg/x2mpNN3svk" target="_blank">
-              <img :src="getIcon('discord', 'png')" alt="icon discord" />
-            </a>
-          </span>
-        </div>
-
-        <div class="header_body">
-          <status-indicator />
-          <span class="header_brand">
-            <img :src="getImage('stacjownik-header-logo.svg')" alt="Stacjownik" />
-          </span>
-
-          <span class="header_info">
-            <Clock />
-
-            <div class="info_counter">
-              <img :src="getIcon('dispatcher')" alt="icon dispatcher" />
-              <span class="text--primary">{{ onlineDispatchers.length }}</span>
-              <span class="text--grayed"> / </span>
-              <span class="text--primary">{{ trainList.length }}</span>
-              <img :src="getIcon('train')" alt="icon train" />
-            </div>
-
-            <span class="info_region">
-              <SelectBox :itemList="computedRegions" :defaultItemIndex="0" @selected="changeRegion" />
-            </span>
-          </span>
-
-          <span class="header_links">
-            <router-link class="route" active-class="route-active" to="/" exact>
-              {{ $t('app.sceneries') }}
-            </router-link>
-            /
-            <router-link class="route" active-class="route-active" to="/trains">{{ $t('app.trains') }}</router-link>
-            /
-            <router-link class="route" active-class="route-active" to="/journal/timetables">
-              {{ $t('app.journal') }}
-            </router-link>
-          </span>
-        </div>
-      </div>
-    </header>
+    <AppHeader :current-lang="currentLang" @change-lang="changeLang" />
 
     <main class="app_main">
       <router-view v-slot="{ Component }">
         <keep-alive>
-          <component :is="Component" :key="$route.path" />
+          <component :is="Component" :key="$route.name" />
         </keep-alive>
       </router-view>
     </main>
@@ -82,28 +27,28 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, provide, ref } from 'vue';
+import { computed, defineComponent, provide, ref, watch } from 'vue';
 
 import Clock from './components/App/Clock.vue';
 
 import packageInfo from '.././package.json';
-import options from './data/options.json';
 
 import StatusIndicator from './components/App/StatusIndicator.vue';
 import SelectBox from './components/Global/SelectBox.vue';
 import { useStore } from './store/store';
-import UpdateModal from './components/App/UpdateModal.vue';
 import TrainModal from './components/Global/TrainModal.vue';
 import StorageManager from './scripts/managers/storageManager';
 import imageMixin from './mixins/imageMixin';
+import AppHeader from './components/App/AppHeader.vue';
+import axios from 'axios';
 
 export default defineComponent({
   components: {
     Clock,
     StatusIndicator,
     SelectBox,
-    UpdateModal,
     TrainModal,
+    AppHeader,
   },
 
   mixins: [imageMixin],
@@ -127,30 +72,8 @@ export default defineComponent({
     };
   },
 
-  computed: {
-    trainList() {
-      return this.store.trainList.filter((train) => train.online);
-    },
-
-    computedRegions() {
-      return this.options.regions.map((region) => {
-        const regionStationCount =
-          this.store.apiData.stations?.filter((station) => station.region == region.id && station.isOnline).length || 0;
-        const regionTrainCount =
-          this.store.apiData.trains?.filter((train) => train.region == region.id && train.online).length || 0;
-
-        return {
-          id: region.id,
-          value: `${region.value} <div class='text--grayed'>${regionStationCount} / ${regionTrainCount}</div>`,
-          selectedValue: region.value,
-        };
-      });
-    },
-  },
-
   data: () => ({
     VERSION: packageInfo.version,
-    options,
 
     currentLang: 'pl',
     releaseURL: '',
@@ -161,15 +84,22 @@ export default defineComponent({
   },
 
   async mounted() {
-    this.updateStorage();
     this.setReleaseURL();
+
+    watch(
+      () => this.store.blockScroll,
+      (value) => {
+        if (value) {
+          document.body.classList.add('no-scroll');
+          return;
+        }
+
+        document.body.classList.remove('no-scroll');
+      }
+    );
   },
 
   methods: {
-    changeRegion(region: { id: string; value: string }) {
-      this.store.changeRegion(region);
-    },
-
     changeLang(lang: string) {
       this.$i18n.locale = lang;
       this.currentLang = lang;
@@ -177,18 +107,18 @@ export default defineComponent({
       StorageManager.setStringValue('lang', lang);
     },
 
-    setReleaseURL() {
-      const releaseURL = StorageManager.getStringValue('releaseURL');
+    async setReleaseURL() {
+      try {
+        const releaseData = await (
+          await axios.get('https://api.github.com/repos/Spythere/stacjownik/releases/latest')
+        ).data;
 
-      this.releaseURL = releaseURL || '';
-    },
+        if (!releaseData) return;
 
-    updateStorage() {
-      if (!StorageManager.isRegistered('unavailable-status')) {
-        StorageManager.setBooleanValue('unavailable-status', true);
-        StorageManager.setBooleanValue('ending-status', true);
-        StorageManager.setBooleanValue('no-space-status', true);
-        StorageManager.setBooleanValue('afk-status', true);
+        this.releaseURL = releaseData.html_url;
+      } catch (error) {
+        console.error(`Wystąpił błąd podczas pobierania danych z API GitHuba: ${error}`);
+        return;
       }
     },
 

src/assets/icon-search.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg enable-background="new 0 0 32 32" id="Glyph" version="1.1" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M27.414,24.586l-5.077-5.077C23.386,17.928,24,16.035,24,14c0-5.514-4.486-10-10-10S4,8.486,4,14  s4.486,10,10,10c2.035,0,3.928-0.614,5.509-1.663l5.077,5.077c0.78,0.781,2.048,0.781,2.828,0  C28.195,26.633,28.195,25.367,27.414,24.586z M7,14c0-3.86,3.14-7,7-7s7,3.14,7,7s-3.14,7-7,7S7,17.86,7,14z" id="XMLID_223_"  fill="white" /></svg>

src/components/App/AppHeader.vue

@@ -0,0 +1,266 @@
+<template>
+  <header class="app_header">
+    <div class="header_container">
+      <div class="header_icons">
+        <span class="icons-top">
+          <img :src="getIcon('pl')" alt="icon-pl" @click="changeLang('en')" v-if="currentLang == 'pl'" />
+          <img :src="getIcon('en', 'jpg')" alt="icon-en" @click="changeLang('pl')" v-else />
+        </span>
+
+        <span class="icons-bottom">
+          <a href="https://www.paypal.com/paypalme/spythere" target="_blank">
+            <img :src="getIcon('dollar')" alt="icon paypal" />
+          </a>
+
+          <a href="https://discord.gg/x2mpNN3svk" target="_blank">
+            <img :src="getIcon('discord', 'png')" alt="icon discord" />
+          </a>
+        </span>
+      </div>
+
+      <div class="header_body">
+        <StatusIndicator />
+
+        <span class="header_brand">
+          <img :src="getImage('stacjownik-header-logo.svg')" alt="Stacjownik" />
+        </span>
+
+        <span class="header_info">
+          <Clock />
+
+          <div class="info_counter">
+            <img :src="getIcon('dispatcher')" alt="icon dispatcher" />
+            <span class="text--primary">{{ onlineDispatchersCount }}</span>
+            <span class="text--grayed"> / </span>
+            <span class="text--primary">{{ onlineTrainsCount }}</span>
+            <img :src="getIcon('train')" alt="icon train" />
+          </div>
+
+          <span class="info_region">
+            <SelectBox :itemList="computedRegions" :defaultItemIndex="0" @selected="changeRegion" />
+          </span>
+        </span>
+
+        <span class="header_links">
+          <router-link class="route" active-class="route-active" to="/" exact>
+            {{ $t('app.sceneries') }}
+          </router-link>
+          /
+          <router-link class="route" active-class="route-active" to="/trains">{{ $t('app.trains') }}</router-link>
+          /
+          <router-link class="route" active-class="route-active" to="/journal/timetables">
+            {{ $t('app.journal') }}
+          </router-link>
+        </span>
+      </div>
+    </div>
+  </header>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../../store/store';
+import options from '../../data/options.json';
+import imageMixin from '../../mixins/imageMixin';
+import SelectBox from '../Global/SelectBox.vue';
+import StatusIndicator from './StatusIndicator.vue';
+import Clock from './Clock.vue';
+
+export default defineComponent({
+    emits: ["changeLang"],
+    mixins: [imageMixin],
+    props: {
+        currentLang: {
+            type: String,
+            required: true,
+        },
+    },
+    setup() {
+        return {
+            store: useStore(),
+        };
+    },
+    methods: {
+        changeRegion(region: {
+            id: string;
+            value: string;
+        }) {
+            this.store.changeRegion(region);
+        },
+        changeLang(lang: string) {
+            this.$emit("changeLang", lang);
+        },
+    },
+    computed: {
+        onlineTrainsCount() {
+            return this.store.trainList.filter((train) => train.online).length;
+        },
+        onlineDispatchersCount() {
+            return this.store.stationList.filter((station) => station.onlineInfo && station.onlineInfo.region == this.store.region.id).length;
+        },
+        computedRegions() {
+            return options.regions.map((region) => {
+                const regionStationCount = this.store.apiData.stations?.filter((station) => station.region == region.id && station.isOnline).length || 0;
+                const regionTrainCount = this.store.apiData.trains?.filter((train) => train.region == region.id && train.online).length || 0;
+                return {
+                    id: region.id,
+                    value: `${region.value} <div class='text--grayed'>${regionStationCount} / ${regionTrainCount}</div>`,
+                    selectedValue: region.value,
+                };
+            });
+        },
+    },
+    components: { SelectBox, StatusIndicator, Clock }
+});
+</script>
+<style lang="scss" scoped>
+@import '../../styles/variables.scss';
+@import '../../styles/responsive.scss';
+
+// HEADER
+.app_header {
+  display: flex;
+  justify-content: center;
+
+  position: relative;
+  background-color: $primaryCol;
+}
+
+.header {
+  &_body {
+    max-width: 21em;
+
+    @include smallScreen {
+      max-width: 18em;
+    }
+  }
+
+  &_container {
+    display: flex;
+    justify-content: center;
+    position: relative;
+
+    width: 1350px;
+    padding: 0.5em 0.3em 0 0.3em;
+    border-radius: 0 0 1em 1em;
+  }
+
+  &_brand {
+    display: flex;
+
+    img {
+      width: 100%;
+      margin: 0 auto;
+    }
+  }
+
+  &_info {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    max-width: 100%;
+
+    font-size: 1.2em;
+  }
+
+  &_links {
+    display: flex;
+    justify-content: center;
+
+    border-radius: 0.7em;
+
+    font-size: 1.25em;
+    padding: 0.5em;
+  }
+
+  &_icons {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-end;
+    padding: 0.5em 0.5em;
+
+    @include smallScreen() {
+      right: auto;
+      left: 0.75em;
+      padding: 0;
+
+      align-items: center;
+    }
+  }
+}
+
+// ICONS
+.icons {
+  position: relative;
+
+  &-top {
+    img {
+      width: 2.5em;
+
+      cursor: pointer;
+    }
+
+    margin-bottom: 0.5em;
+  }
+
+  &-bottom {
+    display: flex;
+
+    a {
+      margin-left: 0.6em;
+      user-select: none;
+    }
+
+    img {
+      width: 1.9em;
+    }
+
+    @include smallScreen() {
+      flex-direction: column;
+
+      a {
+        margin: 0.25em 0;
+      }
+    }
+  }
+}
+
+// COUNTER
+.info_counter {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  span {
+    margin: 0 0.15em;
+  }
+
+  img {
+    width: 1.35em;
+  }
+}
+
+// REGION SELECTION
+.info_region {
+  color: white;
+  font-weight: bold;
+
+  display: flex;
+  justify-content: flex-end;
+
+  .select-box_content button {
+    background-color: transparent;
+    font-weight: bold;
+    padding: 0.1em 0.5em;
+    color: paleturquoise;
+  }
+
+  .options {
+    font-size: 0.9em;
+  }
+}
+</style>

src/components/Global/ActionButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <button class="action-btn">
+  <button class="action-btn btn--filled">
     <div class="button_content">
       <slot></slot>
     </div>
@@ -16,47 +16,6 @@ export default defineComponent({});
 @import "../../styles/variables";
 @import "../../styles/responsive";
 
-.action-btn {
-  background: #333;
-  border: none;
-
-  color: #bdbdbd;
-
-  font-size: 1em;
-  font-weight: 500;
-
-  padding: 0.35em 0.65em;
-  cursor: pointer;
-
-  transition: all 0.3s;
-
-  &.outlined {
-    border: 1px solid white;
-  }
-
-  img {
-    width: 1.25em;
-    vertical-align: middle;
-    margin-right: 0.35em;
-  }
-
-  p {
-    font-size: 1em;
-    overflow: hidden;
-  }
-
-  &.open {
-    color: $accentCol;
-    border: none;
-  }
-
-  &:hover,
-  &:focus {
-    color: $accentCol;
-    background: #5c5c5c;
-  }
-}
-
 .button_content {
   display: flex;
   justify-content: center;

src/components/Global/SelectBox.vue

@@ -2,7 +2,6 @@
   <div class="select-box">
     <div class="select-box_content">
       <button class="selected" @click="toggleBox">
-        <span class="text--primary">{{ prefix }}</span>
         <span>{{ computedSelectedItem.selectedValue || computedSelectedItem.value }}</span>
       </button>
 
@@ -131,13 +130,14 @@ export default defineComponent({
 
 .select-box {
   position: relative;
+  width: auto;
 }
 
 .arrow {
   position: absolute;
   top: 50%;
   right: 0;
-  padding: 0.5em;
+  padding: 0;
 
   img {
     vertical-align: middle;
@@ -150,13 +150,17 @@ export default defineComponent({
 }
 
 button.selected {
-  background: #333;
-  color: white;
+  background-color: transparent;
+  color: paleturquoise;
 
   font-size: 1em;
+  font-weight: bold;
+
+  padding: 0.1em 0.5em;
+  margin-right: 2em;
+
+  display: flex;
 
-  padding: 0.35em 0.5em;
-  margin-right: 1.4em;
 
   width: 100%;
   cursor: pointer;
@@ -167,7 +171,7 @@ button.selected {
   text-align: left;
 
   &:focus {
-    background: #555;
+    background-color: #262626;
   }
 }
 
@@ -188,8 +192,9 @@ ul.options {
   height: auto;
 
   z-index: 100;
-
   width: 100%;
+
+  font-size: 0.9em;
 }
 
 li.option {
@@ -203,6 +208,7 @@ li.option {
     appearance: none;
     border: none;
     outline: none;
+    background: none;
 
     &:focus + span {
       color: $accentCol;
@@ -218,11 +224,11 @@ li.option {
     position: relative;
 
     display: inline-block;
-    background-color: hsla(0, 0%, 15%, 0.95);
+    background-color: #262626f2;
 
     &:hover,
     &:focus {
-      background-color: hsla(0, 0%, 20%, 0.95);
+      background-color: #333333f2;
     }
 
     padding: 0.5em 0;

src/components/Global/TrainModal.vue

@@ -144,9 +144,6 @@ export default defineComponent({
 }
 
 @include smallScreen {
-  .train-modal {
-    font-size: 1.05em;
-  }
 
   .modal_content {
     max-height: 85vh;

src/components/JournalView/DispatcherStats.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="stats_container" v-click-outside="() => (cardVisible = false)">
-    <button class="stats_button btn btn--option" @click="toggleCard">
+    <button class="stats_button" @click="toggleCard">
       Statystyki dyżurnego {{ store.dispatcherStatsName }}
     </button>
 
@@ -14,6 +14,7 @@
 
         <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>
@@ -162,42 +163,11 @@ h3 {
   text-align: center;
 }
 
-.info-stats {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  margin-top: 1em;
-}
 
 .last-timetables {
   overflow-y: auto;
 }
 
-.stat-badge {
-  margin-right: 0.5em;
-  padding-bottom: 1em;
 
-  span {
-    padding: 0.25em 0.3em;
-  }
 
-  span:first-child {
-    background-color: #4d4d4d;
-  }
-
-  span:last-child {
-    background-color: $accentCol;
-    color: black;
-    font-weight: bold;
-  }
-}
-
-@include smallScreen() {
-  .stats_card {
-    text-align: center;
-    left: 50%;
-    transform: translateX(-50%);
-    border-radius: 0 0 1em 1em;
-  }
-}
 </style>

src/components/JournalView/DriverStats.vue

@@ -1,141 +1,94 @@
-<template>
-  <div class="card-dimmer" @click="closeCard"></div>
-
-  <div class="stats-card card">
-    <div>
-      <h2 class="card-title">
-        STATYSTYKI MASZYNISTY <span class="text--primary">{{ store.driverStatsName.toUpperCase() }}</span>
-      </h2>
-
-      <div class="loading" v-if="!store.driverStatsData">Ładowanie...</div>
-
-      <div v-else>
-        <div class="info-stats" v-if="store.driverStatsData._sum.routeDistance != null">
-          <span class="stat-badge">
-            <span>PRZEBYTO</span>
-            <span>{{ store.driverStatsData._sum.routeDistance.toFixed(2) }}km</span>
-          </span>
-          <span class="stat-badge">
-            <span>PORZUCONO</span>
-            <span>
-              {{ (store.driverStatsData._sum.routeDistance - store.driverStatsData._sum.currentDistance).toFixed(2) }}km
-            </span>
-          </span>
-
-          <span class="stat-badge">
-            <span>WYPEŁNIONO</span>
-            <span>{{ store.driverStatsData._count.fulfilled }} RJ</span>
-          </span>
-
-          <span class="stat-badge">
-            <span>PORZUCONO</span>
-            <span>{{ store.driverStatsData._count._all - store.driverStatsData._count.fulfilled }} RJ</span>
-          </span>
-
-          <span class="stat-badge">
-            <span>ZATWIERDZONO</span>
-            <span>{{ store.driverStatsData._sum.confirmedStopsCount }} stacji</span>
-          </span>
-
-          <span class="stat-badge">
-            <span>PORZUCONO</span>
-            <span>
-              {{ store.driverStatsData._sum.allStopsCount - store.driverStatsData._sum.confirmedStopsCount }}
-              stacji
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-
-import axios from 'axios';
-import { defineComponent } from 'vue';
-import { DriverStatsAPIData } from '../../scripts/interfaces/api/DriverStatsAPIData';
-import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
-import { URLs } from '../../scripts/utils/apiURLs';
-import { useStore } from '../../store/store';
-
-export default defineComponent({
-  emits: ['closeCard'],
-
-  setup() {
-    const store = useStore();
-    return {
-      store,
-    };
-  },
-
-  data() {
-    return {
-      test: Math.random(),
-      lastDispatcherName: '',
-
-      lastTimetables: [] as TimetableHistory[],
-    };
-  },
-
-  activated() {
-    this.fetchDispatcherStats();
-  },
-
-  methods: {
-    async fetchDispatcherStats() {
-      this.store.driverStatsData = undefined;
-
-      const statsData: DriverStatsAPIData = await (
-        await axios.get(`${URLs.stacjownikAPI}/api/getDriverInfo?name=${this.store.driverStatsName}`)
-      ).data;
-
-      const recentTimetablesData: TimetableHistory[] = await (
-        await axios.get(`${URLs.stacjownikAPI}/api/getTimetables?driverName=${this.store.driverStatsName}`)
-      ).data;
-
-      this.store.driverStatsData = statsData;
-      this.lastTimetables = recentTimetablesData || [];
-    },
-
-    closeCard() {
-      this.$emit('closeCard');
-    },
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-
-.timetable-row {
-  display: grid;
-  grid-template-columns: 4fr 1fr 1fr 2fr 2fr;
-  gap: 0.2em;
-  margin: 0.5em 0;
-  text-align: center;
-
-  span {
-    min-width: 100px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    background-color: #4d4d4d;
-    padding: 0.5em 0.2em;
-  }
-
-  @include smallScreen() {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-
-    span {
-      padding: 0.2em 0.3em;
-    }
-
-    grid-template-columns: 1fr;
-    background-color: #4d4d4d;
-  }
-}
-</style>
+<template>
+  <div class="journal-stats" v-if="store.driverStatsData?._sum.routeDistance != null">
+    <h1>
+      STATYSTYKI MASZYNISTY <span class="text--primary">{{ store.driverStatsName.toUpperCase() }}</span>
+    </h1>
+
+    <div class="info-stats">
+      <span class="stat-badge">
+        <span>{{ $t('journal.stats-timetables') }}</span>
+        <span>{{ store.driverStatsData._count.fulfilled }} / {{ store.driverStatsData._count._all }}</span>
+      </span>
+
+      <span class="stat-badge">
+        <span>{{ $t('journal.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> {{ store.driverStatsData._avg.routeDistance.toFixed(2) }}km </span>
+      </span>
+
+      <span class="stat-badge">
+        <span>{{ $t('journal.stats-distance') }}</span>
+        <span>
+          {{ store.driverStatsData._sum.currentDistance.toFixed(2) }} /
+          {{ store.driverStatsData._sum.routeDistance.toFixed(2) }}km
+        </span>
+      </span>
+
+      <span class="stat-badge">
+        <span>{{ $t('journal.stats-stations') }}</span>
+        <span>
+          {{ store.driverStatsData._sum.confirmedStopsCount }} /
+          {{ store.driverStatsData._sum.allStopsCount }}
+        </span>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import axios from 'axios';
+import { computed, defineComponent, ref } from 'vue';
+import { DriverStatsAPIData } from '../../scripts/interfaces/api/DriverStatsAPIData';
+import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
+import { URLs } from '../../scripts/utils/apiURLs';
+import { useStore } from '../../store/store';
+
+export default defineComponent({
+  emits: ['closeCard'],
+
+  setup() {
+    const store = useStore();
+    return {
+      store,
+      driverStatsName: computed(() => store.driverStatsName),
+    };
+  },
+
+  data() {
+    return {
+      test: Math.random(),
+      lastDispatcherName: '',
+
+      lastTimetables: [] as TimetableHistory[],
+    };
+  },
+
+  watch: {
+    driverStatsName(value: string) {
+      this.fetchDispatcherStats();
+    },
+  },
+
+  methods: {
+    async fetchDispatcherStats() {
+      this.store.driverStatsData = undefined;
+
+      if (!this.store.driverStatsName) return;
+
+      const statsData: DriverStatsAPIData = await (
+        await axios.get(`${URLs.stacjownikAPI}/api/getDriverInfo?name=${this.store.driverStatsName}`)
+      ).data;
+
+      this.store.driverStatsData = statsData;
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/JournalStats.scss';
+</style>

src/components/JournalView/JournalDispatchers.vue

@@ -1,425 +1,264 @@
-<template>
-  <section class="journal-timetables">
-    <div class="journal-wrapper">
-      <div class="journal_top-bar">
-        <JournalOptions
-          @on-filter-change="search"
-          @on-input-change="search"
-          @on-sorter-change="search"
-          :sorter-option-ids="['timestampFrom', 'duration']"
-        />
-
-        <!-- <DispatcherStats /> -->
-      </div>
-
-      <div class="journal-list">
-        <div class="list-wrapper" ref="scrollElement">
-          <transition name="warning" mode="out-in">
-            <div :key="historyDataStatus.status">
-              <Loading v-if="isDataLoading || isDataInit" />
-
-              <div v-else-if="isDataError" class="journal_warning error">
-                {{ $t('app.error') }}
-              </div>
-
-              <div class="journal_warning" v-else-if="historyList.length == 0">
-                {{ $t('app.no-result') }}
-              </div>
-
-              <ul v-else>
-                <transition-group name="journal-list-anim">
-                  <li v-for="(doc, i) in computedHistoryList" :key="doc.id">
-                    <div class="journal_day" v-if="isAnotherDay(i - 1, i)">
-                      <span>{{ new Date(doc.timestampFrom).toLocaleDateString('pl-PL') }}</span>
-                    </div>
-
-                    <div
-                      class="journal_item"
-                      :class="{ online: doc.isOnline }"
-                      @click="navigateToScenery(doc.stationName, doc.isOnline)"
-                      @keydown.enter="navigateToScenery(doc.stationName, doc.isOnline)"
-                      tabindex="0"
-                    >
-                      <span>
-                        <b class="text--primary">{{ doc.dispatcherName }}</b> &bull; <b>{{ doc.stationName }}</b>
-                        <span class="text--grayed">&nbsp;#{{ doc.stationHash }}&nbsp;</span>
-                        <span class="region-badge" :class="doc.region">PL1</span>
-                      </span>
-                      <span>
-                        <span :data-status="doc.isOnline">
-                          {{ doc.isOnline ? $t('journal.online-since') : 'OFFLINE' }}&nbsp;
-                        </span>
-                        <span>
-                          {{ new Date(doc.timestampFrom).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
-                        </span>
-
-                        <span v-if="doc.currentDuration && doc.isOnline">
-                          ({{ calculateDuration(doc.currentDuration) }})
-                        </span>
-
-                        <span v-if="doc.timestampTo">
-                          &gt;
-                          {{ new Date(doc.timestampTo).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
-                          ({{ $t('journal.duty-lasted') }} {{ calculateDuration(doc.currentDuration!) }})
-                        </span>
-                      </span>
-                    </div>
-                  </li>
-                </transition-group>
-              </ul>
-            </div>
-          </transition>
-        </div>
-      </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>
-  </section>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, JournalFilter, provide, reactive, Ref, ref } from 'vue';
-import axios from 'axios';
-
-import ActionButton from '../../components/Global/ActionButton.vue';
-import JournalOptions from '../../components/JournalView/JournalOptions.vue';
-import DispatcherStats from '../../components/JournalView/DispatcherStats.vue';
-import SearchBox from '../Global/SearchBox.vue';
-
-import Loading from '../Global/Loading.vue';
-import { URLs } from '../../scripts/utils/apiURLs';
-import dateMixin from '../../mixins/dateMixin';
-import { DataStatus } from '../../scripts/enums/DataStatus';
-import { useStore } from '../../store/store';
-
-const DISPATCHERS_API_URL = `${URLs.stacjownikAPI}/api/getDispatchers`;
-
-interface DispatcherHistoryItem {
-  id: string;
-
-  stationName: string;
-  stationHash: string;
-  region: string;
-
-  dispatcherName: string;
-  dispatcherId: number;
-
-  timestampFrom: number;
-  timestampTo?: number;
-  currentDuration?: number;
-
-  lastOnlineTimestamp: number;
-
-  isOnline: boolean;
-}
-
-type JournalDispatcherSearcher = {
-  [key in 'search-dispatcher' | 'search-station']: string;
-};
-
-export default defineComponent({
-  components: { SearchBox, ActionButton, JournalOptions, DispatcherStats, Loading },
-  mixins: [dateMixin],
-  name: 'JournalDispatchers',
-
-  props: {
-    sceneryName: {
-      type: String,
-      required: false,
-    },
-
-    dispatcherName: {
-      type: String,
-      required: false,
-    },
-  },
-
-  data: () => ({
-    currentQuery: '',
-    scrollDataLoaded: true,
-    scrollNoMoreData: false,
-
-    showReturnButton: false,
-    statsCardOpen: false,
-  }),
-
-  setup() {
-    const historyDataStatus: Ref<{ status: DataStatus; error: string | null }> = ref({
-      status: DataStatus.Loading,
-      error: null,
-    });
-
-    const sorterActive = ref({ id: 'timestampFrom', dir: -1 });
-    const journalFilterActive = ref({});
-    const searchersValues = reactive({
-      'search-dispatcher': '',
-      'search-station': '',
-    } as JournalDispatcherSearcher);
-
-    const countFromIndex = ref(0);
-    const countLimit = 15;
-
-    provide('sorterActive', sorterActive);
-    provide('journalFilterActive', journalFilterActive);
-    provide('searchersValues', searchersValues);
-
-    const scrollElement: Ref<HTMLElement | null> = ref(null);
-
-    return {
-      store: useStore(),
-
-      historyList: ref([]) as Ref<DispatcherHistoryItem[]>,
-      historyDataStatus,
-
-      isDataLoading: computed(() => historyDataStatus.value.status === DataStatus.Loading),
-      isDataError: computed(() => historyDataStatus.value.status === DataStatus.Error),
-      isDataInit: computed(() => historyDataStatus.value.status === DataStatus.Initialized),
-
-      sorterActive,
-      searchersValues,
-
-      countFromIndex,
-      countLimit,
-
-      scrollElement,
-      maxCount: ref(15),
-    };
-  },
-
-  computed: {
-    computedHistoryList() {
-      return this.historyList.filter(
-        (doc) => doc.isOnline || (doc.currentDuration && doc.currentDuration > 10 * 60000)
-      );
-    },
-  },
-
-  activated() {
-    if (this.sceneryName || this.dispatcherName) {
-      this.searchersValues['search-station'] = this.sceneryName?.toString() || '';
-      this.searchersValues['search-dispatcher'] = this.dispatcherName?.toString() || '';
-      this.search();
-    }
-
-    window.addEventListener('scroll', this.handleScroll);
-  },
-
-  mounted() {
-    if (!this.sceneryName && !this.dispatcherName) {
-      this.search();
-    }
-  },
-
-  deactivated() {
-    window.removeEventListener('scroll', this.handleScroll);
-  },
-
-  methods: {
-    closeDispatcherStatsCard() {
-      this.statsCardOpen = false;
-    },
-
-    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.computedHistoryList[prevIndex].timestampFrom).getDate() !=
-        new Date(this.computedHistoryList[currIndex].timestampFrom).getDate()
-      );
-    },
-
-    handleScroll() {
-      this.showReturnButton = window.scrollY > window.innerHeight;
-
-      const element = this.$refs.scrollElement as HTMLElement;
-
-      if (
-        element.getBoundingClientRect().bottom * 0.85 < window.innerHeight &&
-        this.scrollDataLoaded &&
-        !this.scrollNoMoreData &&
-        this.historyDataStatus.status == DataStatus.Loaded
-      )
-        this.addHistoryData();
-    },
-
-    scrollToTop() {
-      window.scrollTo({ top: 0 });
-    },
-
-    search() {
-      this.fetchHistoryData({
-        searchers: this.searchersValues,
-      });
-
-      this.scrollNoMoreData = false;
-      this.scrollDataLoaded = true;
-    },
-
-    async addHistoryData() {
-      this.scrollDataLoaded = false;
-
-      const countFrom = this.historyList.length;
-
-      const responseData: DispatcherHistoryItem[] = await (
-        await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}&countFrom=${countFrom}`)
-      ).data;
-
-      if (!responseData) return;
-
-      if (responseData.length == 0) {
-        this.scrollNoMoreData = true;
-        return;
-      }
-
-      this.historyList.push(...responseData);
-      this.scrollDataLoaded = true;
-    },
-
-    async fetchHistoryData(
-      props: {
-        searchers?: JournalDispatcherSearcher;
-        filter?: JournalFilter;
-      } = {}
-    ) {
-      this.historyDataStatus.status = DataStatus.Loading;
-
-      const queries: string[] = [];
-
-      // const dispatcher = props.searchers?.find((s) => s.id == 'search-dispatcher')?.value.trim();
-      // const station = props.searchers?.find((s) => s.id == 'search-station')?.value.trim();
-
-      const dispatcher = props.searchers?.['search-dispatcher'].trim();
-      const station = props.searchers?.['search-station'].trim();
-
-      if (dispatcher) queries.push(`dispatcherName=${dispatcher}`);
-      if (station) queries.push(`stationName=${station}`);
-
-      // Z API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
-      if (this.sorterActive.id == 'timestampFrom') queries.push('sortBy=timestampFrom');
-      else if (this.sorterActive.id == 'duration') queries.push('sortBy=currentDuration');
-      else queries.push('sortBy=timestampFrom');
-
-      queries.push('countLimit=15');
-
-      this.currentQuery = queries.join('&');
-
-      try {
-        const responseData: DispatcherHistoryItem[] = await (
-          await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}`)
-        ).data;
-
-        if (!responseData) {
-          this.historyDataStatus.status = DataStatus.Error;
-          this.historyDataStatus.error = 'Brak danych!';
-          return;
-        }
-
-        if (!responseData) return;
-
-        // Response data exists
-        this.historyList = responseData;
-
-        // Stats display
-        this.store.dispatcherStatsName =
-          this.historyList.length > 0 && this.searchersValues['search-dispatcher'].trim()
-            ? this.historyList[0].dispatcherName
-            : '';
-
-        this.historyDataStatus.status = DataStatus.Loaded;
-      } catch (error) {
-        this.historyDataStatus.status = DataStatus.Error;
-        this.historyDataStatus.error = 'Ups! Coś poszło nie tak!';
-      }
-    },
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/JournalSection.scss';
-@import '../../styles/responsive.scss';
-
-.region-badge {
-  padding: 0.1em 0.5em;
-  border-radius: 0.5em;
-  font-weight: bold;
-
-  &.eu {
-    background-color: forestgreen;
-  }
-}
-
-.list-wrapper {
-  margin-top: 1em;
-}
-
-.journal_item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  flex-wrap: wrap;
-
-  &.online {
-    cursor: pointer;
-  }
-
-  span[data-status='true'] {
-    color: springgreen;
-  }
-
-  span[data-status='false'] {
-    color: salmon;
-  }
-}
-.journal_day {
-  position: relative;
-  text-align: center;
-  background-color: #4d4d4d;
-
-  span {
-    position: relative;
-    background-color: #4d4d4d;
-    z-index: 10;
-
-    padding: 0 0.5em;
-  }
-
-  &::after {
-    position: absolute;
-    content: '';
-
-    z-index: 0;
-
-    left: 50%;
-    top: 50%;
-
-    transform: translate(-50%, -50%);
-
-    height: 3px;
-    width: 60%;
-    min-width: 200px;
-
-    background-color: white;
-  }
-}
-
-@include smallScreen() {
-  .journal_item {
-    flex-direction: column;
-
-    span {
-      margin-top: 0.25em;
-      text-align: center;
-    }
-  }
-}
-</style>
-
+<template>
+  <section class="journal-timetables">
+    <div class="journal_wrapper">
+      <JournalOptions
+        @on-search-confirm="searchHistory"
+        @on-options-reset="resetOptions"
+        :sorter-option-ids="['timestampFrom', 'duration']"
+        :data-status="dataStatus"
+      />
+
+      <div class="list_wrapper" @scroll="handleScroll">
+        <!-- <transition name="warning" mode="out-in"> -->
+        <!-- <div :key="dataStatus"> -->
+        <Loading v-if="dataStatus == DataStatus.Initialized || dataStatus == DataStatus.Loading" />
+
+        <div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
+          {{ $t('app.error') }}
+        </div>
+
+        <div class="journal_warning" v-else-if="historyList.length == 0">
+          {{ $t('app.no-result') }}
+        </div>
+
+        <div v-else>
+          <JournalDispatchersList :dispatcherHistory="computedHistoryList" />
+
+          <button
+            class="btn btn--option btn--load-data"
+            v-if="!scrollNoMoreData && scrollDataLoaded && computedHistoryList.length > 15"
+            @click="addHistoryData"
+          >
+            {{ $t('journal.load-data') }}
+          </button>
+        </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>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent, provide, reactive, Ref, ref } from 'vue';
+import axios from 'axios';
+
+import ActionButton from '../../components/Global/ActionButton.vue';
+import JournalOptions from '../../components/JournalView/JournalOptions.vue';
+import DispatcherStats from '../../components/JournalView/DispatcherStats.vue';
+import SearchBox from '../Global/SearchBox.vue';
+
+import Loading from '../Global/Loading.vue';
+import { URLs } from '../../scripts/utils/apiURLs';
+import { DataStatus } from '../../scripts/enums/DataStatus';
+import { useStore } from '../../store/store';
+import JournalDispatchersList from './JournalDispatchersList.vue';
+import { JournalDispatcherSearcher, JournalDispatcherSorter } from '../../types/Journal/JournalDispatcherTypes';
+import { DispatcherHistory } from '../../scripts/interfaces/api/DispatchersAPIData';
+import { JournalTimetableFilter } from '../../types/Journal/JournalTimetablesTypes';
+
+const DISPATCHERS_API_URL = `${URLs.stacjownikAPI}/api/getDispatchers`;
+
+export default defineComponent({
+  components: { SearchBox, ActionButton, JournalOptions, DispatcherStats, Loading, JournalDispatchersList },
+  name: 'JournalDispatchers',
+
+  props: {
+    sceneryName: {
+      type: String,
+      required: false,
+    },
+
+    dispatcherName: {
+      type: String,
+      required: false,
+    },
+  },
+
+  data: () => ({
+    currentQuery: '',
+    scrollDataLoaded: true,
+    scrollNoMoreData: false,
+
+    showReturnButton: false,
+    statsCardOpen: false,
+
+    dataStatus: DataStatus.Initialized,
+    DataStatus,
+
+    historyList: [] as DispatcherHistory[],
+  }),
+
+  setup() {
+    const sorterActive: JournalDispatcherSorter = reactive({ id: 'timestampFrom', dir: -1 });
+    const journalFilterActive = ref({});
+
+    const searchersValues = reactive({
+      'search-dispatcher': '',
+      'search-station': '',
+      'search-date': '',
+    } as JournalDispatcherSearcher);
+
+    const countFromIndex = ref(0);
+    const countLimit = 15;
+
+    provide('sorterActive', sorterActive);
+    provide('journalFilterActive', journalFilterActive);
+    provide('searchersValues', searchersValues);
+
+    const scrollElement: Ref<HTMLElement | null> = ref(null);
+
+    return {
+      store: useStore(),
+
+      sorterActive,
+      searchersValues,
+
+      countFromIndex,
+      countLimit,
+
+      scrollElement,
+      maxCount: ref(15),
+    };
+  },
+
+  computed: {
+    computedHistoryList() {
+      return this.historyList.filter(
+        (doc) => doc.isOnline || (doc.currentDuration && doc.currentDuration > 10 * 60000)
+      );
+    },
+  },
+
+  activated() {
+    if (this.sceneryName || this.dispatcherName) {
+      this.searchersValues['search-station'] = this.sceneryName?.toString() || '';
+      this.searchersValues['search-dispatcher'] = this.dispatcherName?.toString() || '';
+      this.searchHistory();
+    }
+  },
+
+  mounted() {
+    if (!this.sceneryName && !this.dispatcherName) {
+      this.searchHistory();
+    }
+  },
+
+  methods: {
+    handleScroll(e: Event) {
+      const listElement = e.target as HTMLElement;
+      const scrollTop = listElement.scrollTop;
+      const elementHeight = listElement.scrollHeight - listElement.offsetHeight;
+
+      if (!this.scrollDataLoaded || this.scrollNoMoreData || this.dataStatus != DataStatus.Loaded) return;
+
+      if (scrollTop > elementHeight * 0.85) this.addHistoryData();
+    },
+
+    resetOptions() {
+      this.searchersValues['search-station'] = '';
+      this.searchersValues['search-dispatcher'] = '';
+      this.sorterActive.id = 'timestampFrom';
+
+      this.searchHistory();
+    },
+
+    searchHistory() {
+      this.fetchHistoryData({
+        searchers: this.searchersValues,
+      });
+
+      this.scrollNoMoreData = false;
+      this.scrollDataLoaded = true;
+    },
+
+    async addHistoryData() {
+      this.scrollDataLoaded = false;
+
+      const countFrom = this.historyList.length;
+
+      const responseData: DispatcherHistory[] = await (
+        await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}&countFrom=${countFrom}`)
+      ).data;
+
+      if (!responseData) return;
+
+      if (responseData.length == 0) {
+        this.scrollNoMoreData = true;
+        return;
+      }
+
+      this.historyList.push(...responseData);
+      this.scrollDataLoaded = true;
+    },
+
+    async fetchHistoryData(
+      props: {
+        searchers?: JournalDispatcherSearcher;
+        filter?: JournalTimetableFilter;
+      } = {}
+    ) {
+      this.dataStatus = DataStatus.Loading;
+
+      const queries: string[] = [];
+
+      const dispatcher = props.searchers?.['search-dispatcher'].trim();
+      const station = props.searchers?.['search-station'].trim();
+      const dateString = props.searchers?.['search-date'].trim();
+      const timestampFrom = dateString ? Date.parse(new Date(dateString).toISOString()) - 120 * 60 * 1000 : undefined;
+      const timestampTo = timestampFrom ? timestampFrom + 86400000 : undefined;
+
+      if (dispatcher) queries.push(`dispatcherName=${dispatcher}`);
+      if (station) queries.push(`stationName=${station}`);
+      if (timestampFrom && timestampTo) queries.push(`timestampFrom=${timestampFrom}`, `timestampTo=${timestampTo}`);
+
+      // Z API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
+      if (this.sorterActive.id == 'timestampFrom') queries.push('sortBy=timestampFrom');
+      else if (this.sorterActive.id == 'duration') queries.push('sortBy=currentDuration');
+      else queries.push('sortBy=timestampFrom');
+
+      queries.push('countLimit=30');
+
+      this.currentQuery = queries.join('&');
+
+      try {
+        const responseData: DispatcherHistory[] = await (
+          await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}`)
+        ).data;
+
+        if (!responseData) {
+          this.dataStatus = DataStatus.Error;
+          return;
+        }
+
+        if (!responseData) return;
+
+        // Response data exists
+        this.historyList = responseData;
+
+        // Stats display
+        this.store.dispatcherStatsName =
+          this.historyList.length > 0 && this.searchersValues['search-dispatcher'].trim()
+            ? this.historyList[0].dispatcherName
+            : '';
+
+        this.dataStatus = DataStatus.Loaded;
+      } catch (error) {
+        this.dataStatus = DataStatus.Error;
+      }
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/JournalSection.scss';
+</style>

src/components/JournalView/JournalDispatchersList.vue

@@ -0,0 +1,156 @@
+<template>
+  <ul class="journal-list">
+    <!-- <transition-group name="journal-list-anim"> -->
+    <li v-for="item in computedDispatcherHistory" :class="{ sticky: typeof item == 'string' }">
+      <div v-if="typeof item == 'string'" class="journal_day">
+        {{ item }}
+      </div>
+
+      <div
+        v-else
+        class="journal_item"
+        :class="{ online: item.isOnline }"
+        @click="navigateToScenery(item.stationName, item.isOnline)"
+        @keydown.enter="navigateToScenery(item.stationName, item.isOnline)"
+        tabindex="0"
+      >
+        <span>
+          <b class="text--primary">{{ item.dispatcherName }}</b> &bull; <b>{{ item.stationName }}</b>
+          <span class="text--grayed">&nbsp;#{{ item.stationHash }}&nbsp;</span>
+          <span class="region-badge" :class="item.region">PL1</span>
+        </span>
+
+        <span>
+          <span :data-status="item.isOnline"> {{ item.isOnline ? $t('journal.online-since') : 'OFFLINE' }}&nbsp; </span>
+          <span>
+            {{ new Date(item.timestampFrom).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
+          </span>
+
+          <span v-if="item.currentDuration && item.isOnline"> ({{ calculateDuration(item.currentDuration) }}) </span>
+
+          <span v-if="item.timestampTo">
+            &gt;
+            {{ new Date(item.timestampTo).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
+            ({{ $t('journal.duty-lasted') }} {{ calculateDuration(item.currentDuration!) }})
+          </span>
+        </span>
+      </div>
+    </li>
+    <!-- </transition-group> -->
+  </ul>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import dateMixin from '../../mixins/dateMixin';
+import { DispatcherHistory } from '../../scripts/interfaces/api/DispatchersAPIData';
+
+export default defineComponent({
+  props: {
+    dispatcherHistory: {
+      type: Array as PropType<DispatcherHistory[]>,
+      required: true,
+    },
+  },
+
+  mixins: [dateMixin],
+
+  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 (DispatcherHistory | 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/responsive.scss';
+@import '../../styles/JournalSection.scss';
+
+.region-badge {
+  padding: 0.1em 0.5em;
+  border-radius: 0.5em;
+  font-weight: bold;
+
+  &.eu {
+    background-color: forestgreen;
+  }
+}
+
+li.sticky {
+  position: sticky;
+  top: 0;
+}
+
+.journal_item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  flex-wrap: wrap;
+
+  padding: 0.75em;
+
+  &.online {
+    cursor: pointer;
+  }
+
+  span[data-status='true'] {
+    color: springgreen;
+  }
+
+  span[data-status='false'] {
+    color: salmon;
+  }
+}
+
+.journal_day {
+  margin-bottom: 1em;
+  padding: 0.5em;
+  font-weight: bold;
+
+  background-color: #333;
+
+  span {
+    position: relative;
+    background-color: inherit;
+    z-index: 10;
+    padding-right: 1em;
+
+    font-weight: bold;
+  }
+}
+
+@include smallScreen() {
+  .journal_item {
+    flex-direction: column;
+
+    span {
+      margin-top: 0.25em;
+      text-align: center;
+    }
+  }
+}
+</style>

src/components/JournalView/JournalOptions.vue

@@ -1,260 +1,189 @@
-<template>
-  <div class="journal-options">
-    <div class="options_wrapper">
-      <div class="options_content">
-        <div class="content_select">
-          <select-box
-            :itemList="translatedSorterOptions"
-            :defaultItemIndex="0"
-            @selected="onSorterChange"
-            :prefix="$t('journal.sort-prefix')"
-          />
-        </div>
-
-        <div class="content_search">
-          <div class="search-box" v-for="(value, propName) in searchersValues" :key="propName">
-            <input
-              class="search-input"
-              :placeholder="$t(`journal.${propName}`)"
-              v-model="searchersValues[propName]"
-              @keydown.enter="onInputSearch"
-            />
-
-            <img class="search-exit" :src="getIcon('exit')" alt="exit-icon" @click="onInputClear(propName)" />
-          </div>
-          <!-- <div class="search-box">
-            <input
-              class="search-input"
-              v-model="searchedTrain"
-              :placeholder="$t('journal.search-train')"
-              @keydown.enter="search"
-            />
-
-            <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="clearTrain" />
-          </div>
-
-          <div class="search-box">
-            <input
-              class="search-input"
-              v-model="searchedDriver"
-              :placeholder="$t('journal.search-driver')"
-              @keydown.enter="search"
-            />
-
-            <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="clearDriver" />
-          </div> -->
-
-          <action-button class="search-button" @click="onInputSearch">
-            {{ $t('journal.search') }}
-          </action-button>
-        </div>
-      </div>
-
-      <div class="options_filters">
-        <button
-          v-for="filter in filters"
-          class="journal-filter-option btn--option"
-          :class="{ checked: journalFilterActive.id === filter.id }"
-          :id="filter.id"
-          @click="onFilterChange(filter)"
-        >
-          {{ $t(`journal.filter-${filter.id}`) }}
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, inject, JournalFilter, PropType } from 'vue';
-import imageMixin from '../../mixins/imageMixin';
-import ActionButton from '../Global/ActionButton.vue';
-import SelectBox from '../Global/SelectBox.vue';
-
-export default defineComponent({
-  components: { SelectBox, ActionButton },
-  emits: ['onSorterChange', 'onInputChange', 'onFilterChange'],
-  mixins: [imageMixin],
-
-  props: {
-    sorterOptionIds: {
-      type: Array as PropType<Array<string>>,
-      required: true,
-    },
-
-    filters: {
-      type: Array as PropType<JournalFilter[]>,
-      default: [],
-    },
-  },
-
-
-  setup() {
-    return {
-      searchersValues: inject('searchersValues') as {[key: string]: string},
-      sorterActive: inject('sorterActive') as { id: string | number; dir: number },
-      journalFilterActive: inject('journalFilterActive') as JournalFilter,
-    };
-  },
-
-  computed: {
-    translatedSorterOptions() {
-      return this.$props.sorterOptionIds.map((id) => ({
-        id,
-        value: this.$t(`journal.option-${id}`),
-      }));
-    },
-  },
-
-  methods: {
-    onSorterChange(item: { id: string | number; value: string }) {
-      this.sorterActive.id = item.id;
-      this.sorterActive.dir = -1;
-
-      this.$emit('onSorterChange');
-    },
-
-    onFilterChange(filter: JournalFilter) {
-      this.journalFilterActive = filter;
-      this.$emit('onFilterChange');
-    },
-
-    onInputSearch() {      
-      this.$emit('onInputChange');
-    },
-
-    onInputClear(id: any) {
-      this.searchersValues[id] = '';
-      this.onInputSearch();
-    },
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/responsive';
-@import '../../styles/option.scss';
-
-.options {
-  &_wrapper {
-    display: flex;
-    flex-direction: column;
-  }
-
-  &_content {
-    display: flex;
-    flex-wrap: wrap;
-
-    .content_search,
-    .content_select {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-
-      padding: 0.25em 0.25em 0 0;
-    }
-  }
-
-  &_filters {
-    display: flex;
-    flex-wrap: wrap;
-    margin: 0.5em 0 0 0;
-
-    .journal-filter-option {
-      margin: 0 0.25em 0 0;
-
-      &#abandoned {
-        color: salmon;
-      }
-
-      &#fulfilled {
-        color: lightgreen;
-      }
-
-      &#active {
-        color: lightblue;
-      }
-    }
-  }
-}
-
-.search {
-  &-box {
-    position: relative;
-
-    background: #333;
-    border-radius: 0.5em;
-    min-width: 200px;
-    margin-right: 0.25em;
-  }
-
-  &-input {
-    border: none;
-
-    min-width: 100%;
-    padding: 0.35em 0.5em;
-  }
-
-  &-exit {
-    position: absolute;
-    cursor: pointer;
-
-    top: 50%;
-    right: 10px;
-    transform: translateY(-50%);
-
-    width: 1em;
-  }
-}
-
-@include smallScreen() {
-  .journal-options {
-    width: 100%;
-  }
-  .options {
-    &_wrapper {
-      justify-content: center;
-      align-items: center;
-    }
-
-    &_content {
-      padding: 0 1em;
-
-      flex-direction: column;
-
-      .content_select {
-        margin: 0 auto;
-        padding: 0;
-      }
-
-      .content_search {
-        justify-content: center;
-      }
-    }
-
-    &_filters {
-      justify-content: center;
-
-      .journal-filter-option {
-        margin: 0.25em 0.25em;
-      }
-    }
-  }
-
-  .search {
-    &-box,
-    &-button {
-      margin: 0.5em 0 0 0;
-    }
-
-    &-box {
-      width: 100%;
-    }
-
-    &-button {
-      width: 80%;
-      max-width: 300px;
-    }
-  }
-}
-</style>
+<template>
+  <div class="filters-options" @keydown.esc="showOptions = false">
+    <div class="bg" v-if="showOptions" @click="showOptions = false"></div>
+
+    <button class="btn--filled btn--image" @click="showOptions = !showOptions" ref="button">
+      <img :src="getIcon('filter2')" alt="Open filters" />
+      {{ $t('options.filters') }} [F]
+    </button>
+
+    <transition name="options-anim">
+      <div class="options_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">{{ $t('options.search-date') }}</label>
+
+              <div class="search-box">
+                <input
+                  v-if="propName == 'search-date'"
+                  class="search-input"
+                  id="date"
+                  type="date"
+                  min="2022-02-01"
+                  @keydown.enter="onSearchConfirm"
+                  v-model="searchersValues[propName]"
+                />
+
+                <input
+                  v-else
+                  class="search-input"
+                  @keydown.enter="onSearchConfirm"
+                  @focus="preventKeyDown = true"
+                  @blur="preventKeyDown = false"
+                  :placeholder="$t(`options.${propName}`)"
+                  v-model="searchersValues[propName]"
+                />
+
+                <button class="search-exit">
+                  <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear(propName)" />
+                </button>
+              </div>
+            </div>
+
+            <div class="search_actions">
+              <button class="btn--action" @click="onResetButtonClick">
+                {{ $t('options.reset-button') }}
+              </button>
+              <button class="btn--action" @click="onSearchButtonConfirm">
+                {{ $t('options.search-button') }}
+              </button>
+            </div>
+          </div>
+
+          <h1 class="option-title">{{ $t('options.sort-title') }}</h1>
+          <div class="options_sorters">
+            <div v-for="opt in translatedSorterOptions">
+              <button
+                class="sort-option btn--option"
+                :data-selected="opt.id == sorterActive.id"
+                @click="onSorterChange(opt)"
+              >
+                {{ opt.value.toUpperCase() }}
+              </button>
+            </div>
+          </div>
+
+          <h1 class="option-title" v-if="filters.length != 0">{{ $t('options.filter-title') }}</h1>
+          <div class="options_filters">
+            <button
+              v-for="filter in filters"
+              class="filter-option btn--option"
+              :class="{ checked: journalFilterActive.id === filter.id }"
+              :id="filter.id"
+              @click="onFilterChange(filter)"
+            >
+              {{ $t(`options.filter-${filter.id}`) }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject, Prop, PropType } from 'vue';
+import imageMixin from '../../mixins/imageMixin';
+import keyMixin from '../../mixins/keyMixin';
+import { DataStatus } from '../../scripts/enums/DataStatus';
+import { JournalTimetableFilter } from '../../types/Journal/JournalTimetablesTypes';
+import ActionButton from '../Global/ActionButton.vue';
+import SelectBox from '../Global/SelectBox.vue';
+
+export default defineComponent({
+  components: { SelectBox, ActionButton },
+  emits: ['onSearchConfirm', 'onOptionsReset'],
+  mixins: [imageMixin, keyMixin],
+
+  props: {
+    sorterOptionIds: {
+      type: Array as PropType<Array<string>>,
+      required: true,
+    },
+
+    filters: {
+      type: Array as PropType<JournalTimetableFilter[]>,
+      default: [],
+    },
+
+    dataStatus: {
+      type: Number as PropType<DataStatus>,
+      default: DataStatus.Initialized,
+    },
+  },
+
+  data() {
+    return {
+      showOptions: false,
+      DataStatus,
+    };
+  },
+
+  setup() {
+    return {
+      searchersValues: inject('searchersValues') as { [key: string]: string },
+      sorterActive: inject('sorterActive') as { id: string | number; dir: number },
+      journalFilterActive: inject('journalFilterActive') as JournalTimetableFilter,
+    };
+  },
+
+  computed: {
+    translatedSorterOptions() {
+      return this.$props.sorterOptionIds.map((id) => ({
+        id,
+        value: this.$t(`options.sort-${id}`),
+      }));
+    },
+  },
+
+  methods: {
+    // Override keyMixin function
+    onKeyDownFunction() {
+      this.showOptions = !this.showOptions;
+
+      this.$nextTick(() => {
+        if (this.showOptions) (this.$refs['button'] as HTMLButtonElement)?.focus();
+      });
+    },
+
+    focusEnd() {
+      console.log('focus end');
+    },
+
+    onSorterChange(item: { id: string | number; value: string }) {
+      this.sorterActive.id = item.id;
+      this.sorterActive.dir = -1;
+      this.$emit('onSearchConfirm');
+    },
+
+    onFilterChange(filter: JournalTimetableFilter) {
+      this.journalFilterActive = filter;
+      this.$emit('onSearchConfirm');
+    },
+
+    onInputClear(id: any) {
+      this.searchersValues[id] = '';
+      this.$emit('onSearchConfirm');
+    },
+
+    onSearchConfirm() {
+      this.$emit('onSearchConfirm');
+    },
+
+    onSearchButtonConfirm() {
+      this.showOptions = false;
+      this.$emit('onSearchConfirm');
+    },
+
+    onResetButtonClick() {
+      this.$emit('onOptionsReset');
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/filters_options.scss';
+</style>

src/components/JournalView/JournalTimetables.vue

@@ -1,439 +1,284 @@
-<template>
-  <section class="journal-timetables">
-    <keep-alive>
-      <DriverStats v-if="statsCardOpen" @close-card="closeCard" />
-    </keep-alive>
-
-    <div class="journal-wrapper">
-      <div class="journal_top-bar">
-        <JournalOptions
-          @on-input-change="search"
-          @on-filter-change="search"
-          @on-sorter-change="search"
-          :sorter-option-ids="['timetableId', 'beginDate', 'distance', 'total-stops']"
-          :filters="journalTimetableFilters"
-        />
-      </div>
-
-      <div class="journal-list">
-        <div class="list-wrapper" ref="scrollElement">
-          <transition name="warning" mode="out-in">
-            <div :key="historyDataStatus.status">
-              <Loading v-if="isDataLoading || isDataInit" />
-
-              <div v-else-if="isDataError" class="journal_warning error">
-                {{ $t('app.error') }}
-              </div>
-
-              <div class="journal_warning" v-else-if="historyList.length == 0">
-                {{ $t('app.no-result') }}
-              </div>
-
-              <ul v-else>
-                <transition-group name="journal-list-anim">
-                  <li v-for="(item, i) in historyList" class="journal_item" :key="item.timetableId">
-                    <div class="journal_item-top">
-                      <span>
-                        <span
-                          tabindex="0"
-                          @click="navigateToTimetable(item)"
-                          @keydown.enter="navigateToTimetable(item)"
-                          style="cursor: pointer"
-                        >
-                          <b class="text--primary">{{ item.trainCategoryCode }}&nbsp;</b>
-                          <b>{{ item.trainNo }}</b>
-                          | <span>{{ item.driverName }}</span> |
-                          <span class="text--grayed">#{{ item.timetableId }}</span>
-                        </span>
-
-                        <div>
-                          <b>{{ item.route.replace('|', ' - ') }}</b>
-                        </div>
-
-                        <hr style="margin: 0.25em 0" />
-
-                        <div class="scenery-list">
-                          <span
-                            v-for="(scenery, i) in getSceneryList(item)"
-                            :key="scenery.name"
-                            :class="{ confirmed: scenery.confirmed }"
-                          >
-                            {{ i > 0 ? ' > ' : '' }} {{ scenery.name }}
-                          </span>
-                        </div>
-
-                        <div class="schedule-dates">
-                          <!-- Data odjazdu ze stacji początkowej -->
-                          <b>{{ item.route.split('|')[0] }}:</b>
-                          <s v-if="item.beginDate != item.scheduledBeginDate" class="text--grayed">
-                            {{ localeTime(item.beginDate, $i18n.locale) }}
-                          </s>
-                          <span>{{ localeTime(item.scheduledBeginDate, $i18n.locale) }} </span>&bull;
-
-                          <!-- Data przyjazdu na stację końcową / porzucenia -->
-                          <b v-if="(item.fulfilled && item.terminated) || !item.terminated">
-                            {{ item.route.split('|').slice(-1)[0] }}:
-                          </b>
-                          <i v-else>{{ $t('journal.timetable-abandoned') }} </i>
-
-                          <s v-if="item.endDate != item.scheduledEndDate && item.terminated" class="text--grayed">
-                            {{ localeTime(item.fulfilled ? item.endDate : item.scheduledEndDate, $i18n.locale) }}
-                          </s>
-                          <span
-                            >{{ localeTime(item.fulfilled ? item.scheduledEndDate : item.endDate, $i18n.locale) }}
-                          </span>
-                        </div>
-                      </span>
-
-                      <b
-                        class="journal_item-status"
-                        :class="{
-                          fulfilled: item.fulfilled || item.currentDistance >= item.routeDistance * 0.9,
-                          terminated: item.terminated && !item.fulfilled,
-                          active: !item.terminated,
-                        }"
-                      >
-                        {{
-                          !item.terminated
-                            ? $t('journal.timetable-active')
-                            : item.fulfilled || item.currentDistance >= item.routeDistance * 0.9
-                            ? $t('journal.timetable-fulfilled')
-                            : $t('journal.timetable-abandoned')
-                        }}
-                      </b>
-                    </div>
-
-                    <div style="margin-top: 1em">
-                      <div>
-                        {{ $t('journal.timetable-day') }} <b>{{ localeDay(item.beginDate, $i18n.locale) }}</b>
-                      </div>
-
-                      <!-- Nick dyżurnego -->
-                      <div v-if="item.authorName">
-                        <b class="text--grayed">{{ $t('journal.dispatcher-name') }}&nbsp;</b>
-                        <router-link
-                          class="dispatcher-link"
-                          :to="`/journal/dispatchers?dispatcherName=${item.authorName}`"
-                          >{{ item.authorName }}</router-link
-                        >
-                      </div>
-                    </div>
-
-                    <div style="margin-top: 1em">
-                      <div>
-                        <b>{{ $t('journal.route-length') }}</b>
-                        {{ !item.fulfilled ? item.currentDistance + ' /' : '' }}
-                        {{ item.routeDistance }} km
-                      </div>
-
-                      <div>
-                        <b>{{ $t('journal.station-count') }}</b>
-                        {{ item.confirmedStopsCount }} /
-                        {{ item.allStopsCount }}
-                      </div>
-                    </div>
-                  </li>
-                </transition-group>
-              </ul>
-            </div>
-          </transition>
-        </div>
-      </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>
-  </section>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, JournalFilter, provide, reactive, Ref, ref } from 'vue';
-import axios from 'axios';
-
-import DriverStats from './DriverStats.vue';
-import Loading from '../Global/Loading.vue';
-import { journalTimetableFilters } from '../../data/journalFilters';
-import dateMixin from '../../mixins/dateMixin';
-import routerMixin from '../../mixins/routerMixin';
-import { DataStatus } from '../../scripts/enums/DataStatus';
-import { JournalFilterType } from '../../scripts/enums/JournalFilterType';
-import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
-import { URLs } from '../../scripts/utils/apiURLs';
-import { useStore } from '../../store/store';
-import JournalOptions from './JournalOptions.vue';
-
-const TIMETABLES_API_URL = `${URLs.stacjownikAPI}/api/getTimetables`;
-
-type JournalTimetableSearcher = {
-  [key in 'search-driver' | 'search-train']: string;
-};
-
-export default defineComponent({
-  components: { DriverStats, Loading, JournalOptions },
-  mixins: [dateMixin, routerMixin],
-
-  name: 'JournalTimetables',
-
-  props: {
-    timetableId: {
-      type: String,
-    },
-  },
-
-  data: () => ({
-    currentQuery: '',
-    scrollDataLoaded: true,
-    scrollNoMoreData: false,
-
-    showReturnButton: false,
-    statsCardOpen: false,
-
-    journalTimetableFilters,
-  }),
-
-  setup() {
-    const historyDataStatus: Ref<{ status: DataStatus; error: string | null }> = ref({
-      status: DataStatus.Loading,
-      error: null,
-    });
-
-    const sorterActive = ref({ id: 'timetableId', dir: -1 });
-    const journalFilterActive = ref(journalTimetableFilters[0]);
-
-    const searchersValues = reactive({
-      'search-train': '',
-      'search-driver': '',
-    } as JournalTimetableSearcher);
-
-    const countFromIndex = ref(0);
-    const countLimit = 15;
-
-    provide('searchersValues', searchersValues);
-    provide('sorterActive', sorterActive);
-    provide('journalFilterActive', journalFilterActive);
-
-    const scrollElement: Ref<HTMLElement | null> = ref(null);
-
-    return {
-      historyList: ref([]) as Ref<TimetableHistory[]>,
-      historyDataStatus,
-
-      isDataLoading: computed(() => historyDataStatus.value.status === DataStatus.Loading),
-      isDataError: computed(() => historyDataStatus.value.status === DataStatus.Error),
-      isDataInit: computed(() => historyDataStatus.value.status === DataStatus.Initialized),
-
-      sorterActive,
-      journalFilterActive,
-      searchersValues,
-
-      countFromIndex,
-      countLimit,
-
-      scrollElement,
-      maxCount: ref(15),
-      store: useStore(),
-    };
-  },
-
-  activated() {
-    window.addEventListener('scroll', this.handleScroll);
-
-    if (this.timetableId) {
-      this.searchersValues['search-train'] = `#${this.timetableId}`;
-      this.search();
-    }
-  },
-
-  mounted() {
-    if (!this.timetableId) this.search();
-  },
-
-  deactivated() {
-    window.removeEventListener('scroll', this.handleScroll);
-  },
-
-  methods: {
-    navigateToTimetable(historyItem: TimetableHistory) {
-      if (historyItem.terminated) return;
-
-      this.navigateTo('/trains', {
-        trainNo: historyItem.trainNo,
-        driverName: historyItem.driverName,
-      });
-    },
-
-    closeCard() {
-      this.statsCardOpen = false;
-    },
-
-    getSceneryList(historyItem: TimetableHistory) {
-      return historyItem.sceneriesString
-        .split('%')
-        .map((name, i) => ({ name, confirmed: i < historyItem.confirmedStopsCount }));
-    },
-
-    handleScroll() {
-      this.showReturnButton = window.scrollY > window.innerHeight;
-
-      const element = this.$refs.scrollElement as HTMLElement;
-
-      if (
-        element.getBoundingClientRect().bottom * 0.85 < window.innerHeight &&
-        this.scrollDataLoaded &&
-        !this.scrollNoMoreData &&
-        this.historyDataStatus.status == DataStatus.Loaded
-      )
-        this.addHistoryData();
-    },
-
-    scrollToTop() {
-      window.scrollTo({ top: 0 });
-    },
-
-    search() {
-      this.fetchHistoryData({
-        searchers: this.searchersValues,
-        filter: this.journalFilterActive,
-      });
-
-      this.scrollNoMoreData = false;
-      this.scrollDataLoaded = true;
-    },
-
-    async addHistoryData() {
-      this.scrollDataLoaded = false;
-
-      const countFrom = this.historyList.length;
-
-      const responseData: TimetableHistory[] = await (
-        await axios.get(`${TIMETABLES_API_URL}?${this.currentQuery}&countFrom=${countFrom}`)
-      ).data;
-
-      if (!responseData) return;
-
-      if (responseData.length == 0) {
-        this.scrollNoMoreData = true;
-        return;
-      }
-
-      this.historyList.push(...responseData);
-      this.scrollDataLoaded = true;
-    },
-
-    async fetchHistoryData(
-      props: {
-        searchers?: JournalTimetableSearcher;
-        filter?: JournalFilter;
-      } = {}
-    ) {
-      this.historyDataStatus.status = DataStatus.Loading;
-
-      const queries: string[] = [];
-
-      const driver = props.searchers?.['search-driver'].trim();
-      const train = props.searchers?.['search-train'].trim();
-
-      if (driver) queries.push(`driverName=${driver}`);
-      if (train) queries.push(train.startsWith('#') ? `timetableId=${train.replace('#', '')}` : `trainNo=${train}`);
-
-      // Z API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
-      if (this.sorterActive.id == 'distance') queries.push('sortBy=routeDistance');
-      else if (this.sorterActive.id == 'total-stops') queries.push('sortBy=allStopsCount');
-      else if (this.sorterActive.id == 'beginDate') queries.push('sortBy=beginDate');
-      else queries.push('sortBy=timetableId');
-
-      queries.push('countLimit=15');
-
-      switch (props.filter?.id) {
-        case JournalFilterType.abandoned:
-          queries.push('fulfilled=0', 'terminated=1');
-          break;
-
-        case JournalFilterType.active:
-          queries.push('terminated=0');
-          break;
-
-        case JournalFilterType.fulfilled:
-          queries.push('fulfilled=1');
-          break;
-
-        default:
-          break;
-      }
-
-      this.currentQuery = queries.join('&');
-
-      try {
-        const responseData: TimetableHistory[] = await (
-          await axios.get(`${TIMETABLES_API_URL}?${this.currentQuery}`)
-        ).data;
-
-        if (!responseData) {
-          this.historyDataStatus.status = DataStatus.Error;
-          this.historyDataStatus.error = 'Brak danych!';
-          return;
-        }
-
-        if (!responseData) return;
-
-        // Response data exists
-        this.historyList = responseData;
-
-        // Stats display
-        this.store.driverStatsName =
-          this.historyList.length > 0 && this.searchersValues['search-driver'].trim()
-            ? this.historyList[0].driverName
-            : '';
-
-        this.historyDataStatus.status = DataStatus.Loaded;
-      } catch (error) {
-        this.historyDataStatus.status = DataStatus.Error;
-        this.historyDataStatus.error = 'Ups! Coś poszło nie tak!';
-
-        console.error(error);
-      }
-    },
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/JournalSection.scss';
-
-.journal_item {
-  &-top {
-    display: flex;
-    justify-content: space-between;
-
-    padding: 0.2em 0;
-
-    .scenery-list {
-      span {
-        color: #adadad;
-
-        &.confirmed {
-          color: #a3eba3;
-        }
-      }
-    }
-  }
-
-  &-status {
-    &.terminated {
-      color: salmon;
-    }
-
-    &.fulfilled {
-      color: lightgreen;
-    }
-
-    &.active {
-      color: lightblue;
-    }
-  }
-}
-
-.dispatcher-link {
-  font-weight: bold;
-}
-</style>
+<template>
+  <section class="journal-timetables">
+    
+    <div class="journal_wrapper">
+      <JournalOptions
+      @on-search-confirm="searchHistory"
+      @on-options-reset="resetOptions"
+      :sorter-option-ids="['timetableId', 'beginDate', 'distance', 'total-stops']"
+      :filters="journalTimetableFilters"
+      :data-status="dataStatus"
+      />
+      
+      <DriverStats />
+      <!-- <button @click="statsCardOpen = true">Stats</button> -->
+
+      <div class="list_wrapper" @scroll="handleScroll">
+        <!-- <transition name="warning" mode="out-in"> -->
+        <!-- <div :key="dataStatus"> -->
+        <Loading v-if="dataStatus == DataStatus.Initialized || dataStatus == DataStatus.Loading" />
+
+        <div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
+          {{ $t('app.error') }}
+        </div>
+
+        <div v-else-if="timetableHistory.length == 0" class="journal_warning">
+          {{ $t('app.no-result') }}
+        </div>
+
+        <div v-else>
+          <JournalTimetablesList :timetableHistory="timetableHistory" />
+
+          <button
+            class="btn btn--option btn--load-data"
+            v-if="!scrollNoMoreData && scrollDataLoaded && timetableHistory.length >= 15"
+            @click="addHistoryData"
+          >
+            {{ $t('journal.load-data') }}
+          </button>
+        </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>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent, provide, reactive, Ref, ref } from 'vue';
+import axios from 'axios';
+
+import DriverStats from './DriverStats.vue';
+import Loading from '../Global/Loading.vue';
+import { JournalTimetableFilter, JournalTimetableSorter } from '../../types/Journal/JournalTimetablesTypes';
+import dateMixin from '../../mixins/dateMixin';
+import routerMixin from '../../mixins/routerMixin';
+import { DataStatus } from '../../scripts/enums/DataStatus';
+import { JournalFilterType } from '../../scripts/enums/JournalFilterType';
+import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
+import { URLs } from '../../scripts/utils/apiURLs';
+import { useStore } from '../../store/store';
+import JournalOptions from './JournalOptions.vue';
+import { JorunalTimetableSearchType } from '../../types/Journal/JournalTimetablesTypes';
+import modalTrainMixin from '../../mixins/modalTrainMixin';
+import imageMixin from '../../mixins/imageMixin';
+import JournalTimetablesList from './JournalTimetablesList.vue';
+import { journalTimetableFilters } from '../../constants/Journal/JournalTimetablesConsts';
+
+const TIMETABLES_API_URL = `${URLs.stacjownikAPI}/api/getTimetables`;
+
+export default defineComponent({
+  components: { DriverStats, Loading, JournalOptions, JournalTimetablesList },
+  mixins: [dateMixin, routerMixin, modalTrainMixin, imageMixin],
+
+  name: 'JournalTimetables',
+
+  props: {
+    timetableId: {
+      type: String,
+    },
+  },
+
+  data: () => ({
+    currentQuery: '',
+    scrollDataLoaded: true,
+    scrollNoMoreData: false,
+
+    showReturnButton: false,
+    statsCardOpen: false,
+
+    timetableHistory: [] as TimetableHistory[],
+    journalTimetableFilters,
+
+    dataStatus: DataStatus.Initialized,
+    dataErrorMessage: '',
+
+    DataStatus,
+  }),
+
+  setup() {
+    const sorterActive: JournalTimetableSorter = reactive({ id: 'timetableId', dir: 1 });
+    const journalFilterActive = ref(journalTimetableFilters[0]);
+
+    const searchersValues = reactive({
+      'search-train': '',
+      'search-driver': '',
+      'search-author': '',
+      'search-date': '',
+    } as JorunalTimetableSearchType);
+
+    const countFromIndex = ref(0);
+    const countLimit = 15;
+
+    provide('searchersValues', searchersValues);
+    provide('sorterActive', sorterActive);
+    provide('journalFilterActive', journalFilterActive);
+
+    const scrollElement: Ref<HTMLElement | null> = ref(null);
+
+    return {
+      sorterActive,
+      journalFilterActive,
+      searchersValues,
+
+      countFromIndex,
+      countLimit,
+
+      scrollElement,
+      store: useStore(),
+    };
+  },
+
+  activated() {
+    if (this.timetableId) {
+      this.searchersValues['search-train'] = `#${this.timetableId}`;
+      this.searchHistory();
+    }
+  },
+
+  mounted() {
+    if (!this.timetableId) this.searchHistory();
+  },
+
+  methods: {
+    handleScroll(e: Event) {
+      const listElement = e.target as HTMLElement;
+      const scrollTop = listElement.scrollTop;
+      const elementHeight = listElement.scrollHeight - listElement.offsetHeight;
+
+      if (!this.scrollDataLoaded || this.scrollNoMoreData || this.dataStatus != DataStatus.Loaded) return;
+
+      if (scrollTop > elementHeight * 0.85) this.addHistoryData();
+    },
+
+    resetOptions() {
+      this.searchersValues['search-date'] = '';
+      this.searchersValues['search-driver'] = '';
+      this.searchersValues['search-train'] = '';
+      this.searchersValues['search-author'] = '';
+
+      this.journalFilterActive = this.journalTimetableFilters[0];
+      this.sorterActive.id = 'timetableId';
+
+      this.searchHistory();
+    },
+
+    searchHistory() {
+      this.fetchHistoryData({
+        searchers: this.searchersValues,
+        filter: this.journalFilterActive,
+      });
+
+      this.scrollNoMoreData = false;
+      this.scrollDataLoaded = true;
+    },
+
+    async addHistoryData() {
+      this.scrollDataLoaded = false;
+
+      const countFrom = this.timetableHistory.length;
+
+      const responseData: TimetableHistory[] = await (
+        await axios.get(`${TIMETABLES_API_URL}?${this.currentQuery}&countFrom=${countFrom}`)
+      ).data;
+
+      if (!responseData) return;
+
+      if (responseData.length == 0) {
+        this.scrollNoMoreData = true;
+        return;
+      }
+
+      this.timetableHistory.push(...responseData);
+      this.scrollDataLoaded = true;
+    },
+
+    async fetchHistoryData(
+      props: {
+        searchers?: JorunalTimetableSearchType;
+        filter?: JournalTimetableFilter;
+      } = {}
+    ) {
+      this.dataStatus = DataStatus.Loading;
+
+      const queries: string[] = [];
+
+      const driverName = props.searchers?.['search-driver'].trim();
+      const trainNo = props.searchers?.['search-train'].trim();
+      const authorName = props.searchers?.['search-author'].trim();
+
+      const dateString = props.searchers?.['search-date'].trim();
+      const timestampFrom = dateString ? Date.parse(new Date(dateString).toISOString()) - 120 * 60 * 1000 : undefined;
+      const timestampTo = timestampFrom ? timestampFrom + 86400000 : undefined;
+
+      if (driverName) queries.push(`driverName=${driverName}`);
+      if (trainNo)
+        queries.push(trainNo.startsWith('#') ? `timetableId=${trainNo.replace('#', '')}` : `trainNo=${trainNo}`);
+      if (authorName) queries.push(`authorName=${authorName}`);
+      if (timestampFrom && timestampTo) queries.push(`timestampFrom=${timestampFrom}`, `timestampTo=${timestampTo}`);
+
+      // Z API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
+      if (this.sorterActive.id == 'distance') queries.push('sortBy=routeDistance');
+      else if (this.sorterActive.id == 'total-stops') queries.push('sortBy=allStopsCount');
+      else if (this.sorterActive.id == 'beginDate') queries.push('sortBy=beginDate');
+      else queries.push('sortBy=timetableId');
+
+      queries.push('countLimit=15');
+
+      switch (props.filter?.id) {
+        case JournalFilterType.abandoned:
+          queries.push('fulfilled=0', 'terminated=1');
+          break;
+
+        case JournalFilterType.active:
+          queries.push('terminated=0');
+          break;
+
+        case JournalFilterType.fulfilled:
+          queries.push('fulfilled=1');
+          break;
+
+        default:
+          break;
+      }
+
+      this.currentQuery = queries.join('&');
+
+      try {
+        const responseData: TimetableHistory[] = await (
+          await axios.get(`${TIMETABLES_API_URL}?${this.currentQuery}`)
+        ).data;
+
+        if (!responseData) {
+          this.dataStatus = DataStatus.Error;
+          this.dataErrorMessage = 'Brak danych!';
+          return;
+        }
+
+        if (!responseData) return;
+
+        // Response data exists
+        this.timetableHistory = responseData;
+
+        // Stats display
+        this.store.driverStatsName =
+          this.timetableHistory.length > 0 && this.searchersValues['search-driver'].trim()
+            ? this.timetableHistory[0].driverName
+            : '';
+
+        this.dataStatus = DataStatus.Loaded;
+      } catch (error) {
+        this.dataStatus = DataStatus.Error;
+        this.dataErrorMessage = 'Ups! Coś poszło nie tak!';
+      }
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/JournalSection.scss';
+</style>

src/components/JournalView/JournalTimetablesList.vue

@@ -0,0 +1,314 @@
+<template>
+  <ul class="journal-list">
+    <li
+      v-for="{ timetable, sceneryList, ...item } in computedTimetableHistory"
+      class="journal_item"
+      :key="timetable.timetableId"
+    >
+      <div class="journal_item-info">
+        <div class="info-top">
+          <span
+            tabindex="0"
+            @click="showTimetable(timetable)"
+            @keydown.enter="showTimetable(timetable)"
+            style="cursor: pointer"
+          >
+            <b class="text--primary">{{ timetable.trainCategoryCode }}&nbsp;</b>
+            <b>{{ timetable.trainNo }}</b>
+            | <span>{{ timetable.driverName }}</span> |
+            <span class="text--grayed">#{{ timetable.timetableId }}</span>
+          </span>
+
+          <span>
+            <b class="info-date">{{ localeDay(timetable.beginDate, $i18n.locale) }}</b>
+            <b
+              class="info-status"
+              :class="{
+                fulfilled: timetable.fulfilled || timetable.currentDistance >= timetable.routeDistance * 0.9,
+                terminated: timetable.terminated && !timetable.fulfilled,
+                active: !timetable.terminated,
+              }"
+            >
+              {{
+                !timetable.terminated
+                  ? $t('journal.timetable-active')
+                  : timetable.fulfilled || timetable.currentDistance >= timetable.routeDistance * 0.9
+                  ? $t('journal.timetable-fulfilled')
+                  : `${$t('journal.timetable-abandoned')} ${localeTime(timetable.endDate, $i18n.locale)}`
+              }}
+            </b>
+          </span>
+        </div>
+
+        <div class="info-route">
+          <b>{{ timetable.route.replace('|', ' - ') }}</b>
+        </div>
+
+        <hr />
+
+        <div class="scenery-list">
+          <span v-for="(scenery, i) in sceneryList" :key="scenery.name" :class="{ confirmed: scenery.confirmed }">
+            <span v-if="i > 0"> &gt;</span>
+            {{ scenery.name }}
+
+            <!-- Data odjazdu ze stacji początkowej -->
+            <span v-if="i == 0" v-html="scenery.beginDateHTML"></span>
+
+            <!-- Data przyjazdu do stacji końcowej -->
+            <span v-if="i == sceneryList.length - 1" v-html="scenery.endDateHTML"> </span>
+          </span>
+        </div>
+
+        <!-- Status RJ -->
+        <div style="margin: 0.5em 0">
+          <span>
+            <b>{{ $t('journal.route-length') }}</b>
+            {{ !timetable.fulfilled ? timetable.currentDistance + ' /' : '' }}
+            {{ timetable.routeDistance }} km
+          </span>
+          &bull;
+          <span>
+            <b>{{ $t('journal.station-count') }}</b>
+            {{ timetable.confirmedStopsCount }} /
+            {{ timetable.allStopsCount }}
+          </span>
+        </div>
+
+        <!-- Nick dyżurnego -->
+        <div v-if="timetable.authorName">
+          <b class="text--grayed">{{ $t('journal.dispatcher-name') }}&nbsp;</b>
+          <router-link class="dispatcher-link" :to="`/journal/dispatchers?dispatcherName=${timetable.authorName}`">
+            <b>{{ timetable.authorName }}</b>
+          </router-link>
+        </div>
+
+        <button
+          v-if="timetable.stockString"
+          class="btn--option btn--show"
+          @click="item.showStock.value = !item.showStock.value"
+        >
+          {{ $t('journal.stock-info') }}
+          <img :src="getIcon(`arrow-${item.showStock.value ? 'asc' : 'desc'}`)" alt="Arrow" />
+        </button>
+
+        <div class="info-extended" v-if="timetable.stockString && item.showStock.value">
+          <hr />
+
+          <div>
+            <span class="badge info-badge">
+              <span>{{ $t('journal.stock-max-speed') }}</span>
+              <span>{{ timetable.maxSpeed }}km/h</span>
+            </span>
+
+            <span class="badge info-badge">
+              <span>{{ $t('journal.stock-length') }}</span>
+              <span>{{ timetable.stockLength }}m</span>
+            </span>
+
+            <span class="badge info-badge">
+              <span>{{ $t('journal.stock-mass') }}</span>
+              <span>{{ Math.floor(timetable.stockMass! / 1000) }}t</span>
+            </span>
+          </div>
+
+          <ul class="stock-list">
+            <li v-for="(car, i) in timetable.stockString.split(';')" :key="i">
+              <img
+                @error="onImageError"
+                :src="`https://rj.td2.info.pl/dist/img/thumbnails/${car.split(':')[0]}.png`"
+                :alt="car"
+              />
+
+              <div>{{ car.replace(/_/g, ' ').split(':')[0] }}</div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref } from 'vue';
+import dateMixin from '../../mixins/dateMixin';
+import imageMixin from '../../mixins/imageMixin';
+import modalTrainMixin from '../../mixins/modalTrainMixin';
+import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
+
+export default defineComponent({
+  props: {
+    timetableHistory: {
+      type: Array as PropType<TimetableHistory[]>,
+      required: true,
+    },
+  },
+
+  mixins: [dateMixin, imageMixin, modalTrainMixin],
+
+  computed: {
+    computedTimetableHistory() {
+      return this.timetableHistory.map((timetable) => ({
+        timetable,
+        sceneryList: this.getSceneryList(timetable),
+        showStock: ref(false),
+      }));
+    },
+  },
+
+  methods: {
+    getSceneryList(timetable: TimetableHistory) {
+      return timetable.sceneriesString.split('%').map((name, i) => {
+        const beginDateHTML =
+          ' (o. ' +
+          (timetable.beginDate != timetable.scheduledBeginDate
+            ? `<s class='text--grayed'>${this.localeTime(timetable.beginDate, this.$i18n.locale)}</s> `
+            : '') +
+          `<span>${this.localeTime(timetable.scheduledBeginDate, this.$i18n.locale)}</span>)`;
+
+        const endDateHTML =
+          ' (p. ' +
+          (timetable.endDate != timetable.scheduledEndDate && timetable.fulfilled
+            ? `<s class='text--grayed'>${this.localeTime(
+                timetable.fulfilled ? timetable.endDate : timetable.scheduledEndDate,
+                this.$i18n.locale
+              )}</s> `
+            : '') +
+          `<span>${this.localeTime(
+            timetable.fulfilled || (timetable.terminated && !timetable.fulfilled)
+              ? timetable.scheduledEndDate
+              : timetable.endDate,
+            this.$i18n.locale
+          )}</span>)`;
+
+        const abandonedDateHTML = ` (porz. ${this.localeTime(
+          timetable.fulfilled ? timetable.scheduledEndDate : timetable.endDate,
+          this.$i18n.locale
+        )})`;
+
+        return { name, confirmed: i < timetable.confirmedStopsCount, beginDateHTML, endDateHTML, abandonedDateHTML };
+      });
+    },
+
+    showTimetable(timetable: TimetableHistory) {
+      if (timetable.terminated) return;
+
+      this.selectModalTrain(timetable.driverName + timetable.trainNo.toString());
+    },
+
+    onImageError(e: Event) {
+      const imageEl = e.target as HTMLImageElement;
+      imageEl.src = this.getImage('unknown.png');
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/variables.scss';
+@import '../../styles/responsive.scss';
+@import '../../styles/badge.scss';
+@import '../../styles/JournalSection.scss';
+
+hr {
+  margin: 0.25em 0;
+}
+
+.info {
+  &-date {
+    margin-right: 0.5em;
+  }
+
+  &-status {
+    padding: 0.05em 0.35em;
+    color: black;
+
+    &.terminated {
+      background-color: salmon;
+    }
+
+    &.fulfilled {
+      background-color: lightgreen;
+    }
+
+    &.active {
+      background-color: lightblue;
+    }
+  }
+
+  &-top {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  &-route {
+    margin: 0.25em 0;
+  }
+
+  &-extended {
+    margin-top: 0.5em;
+  }
+}
+
+ul.stock-list {
+  display: flex;
+  align-items: flex-end;
+  overflow: auto;
+  padding-bottom: 0.5em;
+  margin-top: 1em;
+
+  li > div {
+    text-align: center;
+    color: #aaa;
+    font-size: 0.9em;
+  }
+}
+
+.scenery-list {
+  color: #adadad;
+  span.confirmed {
+    color: #a3eba3;
+  }
+}
+
+.btn--show {
+  display: flex;
+  margin-top: 1em;
+  font-weight: bold;
+  padding: 0.2em 0.45em;
+
+  img {
+    height: 1.3em;
+  }
+}
+
+.info-badge {
+  span:last-child {
+    color: black;
+    background-color: $accentCol;
+  }
+}
+
+@include smallScreen {
+  .info-top {
+    flex-direction: column;
+
+    span {
+      margin: 0.1em auto;
+    }
+  }
+
+  .info-extended {
+    text-align: center;
+  }
+
+  .info-route {
+    display: flex;
+    justify-content: center;
+  }
+
+  .btn--show {
+    margin: 1em auto 0 auto;
+  }
+}
+</style>

src/components/SceneryView/SceneryDispatchersHistory.vue

@@ -1,116 +1,112 @@
-<template>
-  <section class="scenery-dispatchers-history scenery-section">
-    <Loading v-if="dataStatus != 2" />
-
-    <div class="list-warning" v-else-if="dispatcherHistoryList.length == 0">{{ $t('scenery.history-list-empty') }}</div>
-
-    <ul class="history-list" v-else>
-      <li class="list-item" v-for="historyItem in dispatcherHistoryList">
-        <div>
-          <router-link :to="`/journal/dispatchers?dispatcherName=${historyItem.dispatcherName}`">
-            <span class="text--grayed">#{{ historyItem.stationHash }}&nbsp;</span>
-            <b>{{ historyItem.dispatcherName }}</b>
-          </router-link>
-        </div>
-
-        <div v-if="historyItem.timestampTo">
-          <b>{{ $d(historyItem.timestampFrom) }}</b>
-
-          {{ timestampToString(historyItem.timestampFrom) }}
-          - {{ timestampToString(historyItem.timestampTo) }} ({{ calculateDuration(historyItem.currentDuration) }})
-        </div>
-
-        <div class="dispatcher-online" v-else>
-          {{ $t('journal.online-since') }}
-          <b>{{ timestampToString(historyItem.timestampFrom) }}</b>
-          ({{ calculateDuration(historyItem.currentDuration) }})
-        </div>
-      </li>
-    </ul>
-  </section>
-</template>
-
-<script lang="ts">
-
-import axios from 'axios';
-import { defineComponent, PropType } from 'vue';
-import dateMixin from '../../mixins/dateMixin';
-import { DataStatus } from '../../scripts/enums/DataStatus';
-import { DispatcherHistory } from '../../scripts/interfaces/api/DispatchersAPIData';
-import Station from '../../scripts/interfaces/Station';
-import { URLs } from '../../scripts/utils/apiURLs';
-import Loading from '../Global/Loading.vue';
-
-export default defineComponent({
-  name: 'SceneryDispatchersHistory',
-  mixins: [dateMixin],
-  props: {
-    station: {
-      type: Object as PropType<Station>,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      dispatcherHistoryList: [] as DispatcherHistory[],
-      dataStatus: DataStatus.Loading,
-    };
-  },
-  mounted() {
-    this.fetchAPIData();
-  },
-  methods: {
-    async fetchAPIData(countFrom = 0, countLimit = 30) {
-      try {
-        const requestString = `${URLs.stacjownikAPI}/api/getDispatchers?stationName=${this.station.name}&countFrom=${countFrom}&countLimit=${countLimit}`;
-        const historyAPIData: DispatcherHistory[] = await (await axios.get(requestString)).data;
-
-        this.dispatcherHistoryList = historyAPIData;
-        this.dataStatus = DataStatus.Loaded;
-
-        console.log(this.dispatcherHistoryList);
-      } catch (error) {
-        console.error(error);
-      }
-    },
-  },
-  components: { Loading },
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-@import '../../styles/SceneryView/styles.scss';
-
-.history-list {
-  padding: 0 0.5em;
-}
-
-.list-item {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-
-  text-align: left;
-  background-color: #353535;
-  padding: 0.5em;
-  margin: 0.5em 0;
-
-  line-height: 1.5em;
-}
-
-.dispatcher-online {
-  color: springgreen;
-}
-
-@include smallScreen {
-  .history-list {
-    font-size: 1.2em;
-  }
-  .list-item {
-    align-items: center;
-    flex-direction: column;
-  }
-}
-</style>
-
+<template>
+  <section class="scenery-dispatchers-history scenery-section">
+    <Loading v-if="dataStatus != 2" />
+
+    <div class="list-warning" v-else-if="dispatcherHistoryList.length == 0">{{ $t('scenery.history-list-empty') }}</div>
+
+    <ul class="history-list" v-else>
+      <li class="list-item" v-for="historyItem in dispatcherHistoryList">
+        <div>
+          <router-link :to="`/journal/dispatchers?dispatcherName=${historyItem.dispatcherName}`">
+            <span class="text--grayed">#{{ historyItem.stationHash }}&nbsp;</span>
+            <b>{{ historyItem.dispatcherName }}</b>
+          </router-link>
+        </div>
+
+        <div v-if="historyItem.timestampTo">
+          <b>{{ $d(historyItem.timestampFrom) }}</b>
+
+          {{ timestampToString(historyItem.timestampFrom) }}
+          - {{ timestampToString(historyItem.timestampTo) }} ({{ calculateDuration(historyItem.currentDuration) }})
+        </div>
+
+        <div class="dispatcher-online" v-else>
+          {{ $t('journal.online-since') }}
+          <b>{{ timestampToString(historyItem.timestampFrom) }}</b>
+          ({{ calculateDuration(historyItem.currentDuration) }})
+        </div>
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script lang="ts">
+import axios from 'axios';
+import { defineComponent, PropType } from 'vue';
+import dateMixin from '../../mixins/dateMixin';
+import { DataStatus } from '../../scripts/enums/DataStatus';
+import { DispatcherHistory } from '../../scripts/interfaces/api/DispatchersAPIData';
+import Station from '../../scripts/interfaces/Station';
+import { URLs } from '../../scripts/utils/apiURLs';
+import Loading from '../Global/Loading.vue';
+
+export default defineComponent({
+  name: 'SceneryDispatchersHistory',
+  mixins: [dateMixin],
+  props: {
+    station: {
+      type: Object as PropType<Station>,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      dispatcherHistoryList: [] as DispatcherHistory[],
+      dataStatus: DataStatus.Loading,
+    };
+  },
+  mounted() {
+    this.fetchAPIData();
+  },
+  methods: {
+    async fetchAPIData(countFrom = 0, countLimit = 30) {
+      try {
+        const requestString = `${URLs.stacjownikAPI}/api/getDispatchers?stationName=${this.station.name}&countFrom=${countFrom}&countLimit=${countLimit}`;
+        const historyAPIData: DispatcherHistory[] = await (await axios.get(requestString)).data;
+
+        this.dispatcherHistoryList = historyAPIData;
+        this.dataStatus = DataStatus.Loaded;
+      } catch (error) {
+        console.error(error);
+      }
+    },
+  },
+  components: { Loading },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/responsive.scss';
+@import '../../styles/SceneryView/styles.scss';
+
+.history-list {
+  padding: 0 0.5em;
+}
+
+.list-item {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  text-align: left;
+  background-color: #353535;
+  padding: 0.5em;
+  margin: 0.5em 0;
+
+  line-height: 1.5em;
+}
+
+.dispatcher-online {
+  color: springgreen;
+}
+
+@include smallScreen {
+  .history-list {
+    font-size: 1.1em;
+  }
+  .list-item {
+    align-items: center;
+    flex-direction: column;
+  }
+}
+</style>

src/components/SceneryView/SceneryHeader.vue

@@ -1,8 +1,8 @@
 <template>
   <section class="info-header">
-    <div class="scenery-name">
+    <a class="scenery-name" :href="station.generalInfo?.url">
       {{ station.name }}
-    </div>
+    </a>
 
     <div class="scenery-hash" v-if="station.onlineInfo?.hash">#{{ station.onlineInfo.hash }}</div>
   </section>
@@ -12,7 +12,6 @@
 import { defineComponent } from 'vue';
 import Station from '../../scripts/interfaces/Station';
 
-
 export default defineComponent({
   props: {
     station: {
@@ -32,14 +31,9 @@ export default defineComponent({
 
   position: relative;
 
-  font-size: 3.5em;
-  padding: 0 0.5em;
+  font-size: 3em;
 
   text-transform: uppercase;
-
-  @include smallScreen() {
-    font-size: 2.75em;
-  }
 }
 
 .scenery-hash {
@@ -47,4 +41,3 @@ export default defineComponent({
   font-size: 1.2em;
 }
 </style>
-

src/components/SceneryView/SceneryInfo.vue

@@ -109,7 +109,7 @@ h3.section-header {
   justify-content: center;
   align-items: center;
 
-  font-size: 1.5em;
+  font-size: 1.2em;
 
   img {
     width: 1.1em;
@@ -127,7 +127,6 @@ h3.section-header {
 
 .info-general {
   margin-top: 1em;
-  font-size: 1.1em;
 }
 
 .general-list {

src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue

@@ -64,6 +64,7 @@ export default defineComponent({
   justify-content: center;
 
   flex-wrap: wrap;
+  gap: 0.5em;
 
   .dispatcher {
     font-size: 2em;
@@ -82,17 +83,15 @@ export default defineComponent({
     }
 
     &_name {
-      margin-right: 0.4em;
       cursor: pointer;
+      margin-right: 0.25em;
     }
 
     &_likes {
       img {
         height: 0.7em;
-        margin-right: 0.25em;
+        margin: 0 0.25em;
       }
-
-      margin-right: 1.5em;
     }
   }
 

src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue

@@ -68,7 +68,7 @@
     <img
       v-if="!station.generalInfo"
       class="icon-info"
-      :src="getImage('unknown.png')"
+      :src="getIcon('unknown')"
       alt="icon-unknown"
       :title="$t('desc.unknown')"
     />

src/components/SceneryView/SceneryTimetable.vue

@@ -10,18 +10,27 @@
         <span class="text--grayed">
           {{ station.onlineInfo?.scheduledTrains?.filter((train) => train.stopInfo.confirmed).length || '0' }}
         </span>
+        <!-- 
+        <button class="btn--image" v-if="!timetableOnly">
+          <a :href="`${$route.path}?station=${$route.query.station}&timetableOnly=1`">
+            <img :src="getIcon('view')" alt="View image" />
+          </a>
+        </button> -->
       </h3>
 
       <div class="timetable-checkpoints" v-if="station && station.generalInfo?.checkpoints">
-        <button
-          v-for="cp in station.generalInfo.checkpoints"
-          :key="cp.checkpointName"
-          class="checkpoint_item btn btn--text"
-          :class="{ current: selectedCheckpoint === cp.checkpointName }"
-          @click="selectCheckpoint(cp)"
-        >
-          {{ cp.checkpointName }}
-        </button>
+        <span v-for="(cp, i) in station.generalInfo.checkpoints" :key="i">
+          {{ (i > 0 && '&bull;') || '' }}
+
+          <button
+            :key="cp.checkpointName"
+            class="checkpoint_item"
+            :class="{ current: selectedCheckpoint === cp.checkpointName }"
+            @click="selectCheckpoint(cp)"
+          >
+            {{ cp.checkpointName }}
+          </button>
+        </span>
       </div>
     </div>
 
@@ -36,7 +45,7 @@
         {{ $t('scenery.offline') }}
       </span>
 
-       <span class="timetable-item empty" v-else-if="computedScheduledTrains.length == 0">
+      <span class="timetable-item empty" v-else-if="computedScheduledTrains.length == 0">
         {{ $t('scenery.no-timetables') }}
       </span>
 
@@ -182,11 +191,14 @@ export default defineComponent({
       type: Object as PropType<Station>,
       required: true,
     },
+
+    timetableOnly: {
+      type: Boolean,
+    },
   },
 
   data: () => ({
     listOpen: false,
-
   }),
 
   setup(props) {
@@ -250,6 +262,10 @@ export default defineComponent({
     selectCheckpoint(cp: { checkpointName: string }) {
       this.selectedCheckpoint = cp.checkpointName;
     },
+
+    showTimetableOnlyView() {
+      this.$router.push(`${this.$route.fullPath}&timetableOnly=1`);
+    },
   },
 
   mounted() {
@@ -293,7 +309,7 @@ export default defineComponent({
   h3 {
     display: flex;
     align-items: center;
-    font-size: 1.4em;
+    font-size: 1.3em;
   }
 }
 
@@ -351,17 +367,15 @@ export default defineComponent({
   flex-wrap: wrap;
   font-size: 1.1em;
   padding: 0.75em 0;
-  .checkpoint_item {
-    &.current {
-      font-weight: bold;
-      color: $accentCol;
-    }
 
-    &:not(:last-child)::after {
-      margin: 0 0.5em;
-      content: '•';
-      color: white;
-    }
+  button.checkpoint_item {
+    color: #aaa;
+    display: inline;
+  }
+
+  .checkpoint_item.current {
+    font-weight: bold;
+    color: $accentCol;
   }
 }
 
@@ -505,8 +519,6 @@ export default defineComponent({
       display: flex;
       flex-direction: column;
       align-items: center;
-
-      font-size: 1.05em;
     }
 
     &-general {

src/components/SceneryView/SceneryTimetablesHistory.vue

@@ -1,118 +1,112 @@
-<template>
-  <section class="scenery-timetables-history scenery-section">
-    <Loading v-if="dataStatus != 2" />
-
-    <div class="list-warning" v-else-if="sceneryHistoryList.length == 0">{{ $t('scenery.history-list-empty') }}</div>
-    <ul class="history-list" v-else>
-      <li class="list-item" v-for="historyItem in sceneryHistoryList">
-        <div>
-          <b>{{ localeDay(historyItem.beginDate, $i18n.locale) }}</b>
-          {{ localeTime(historyItem.beginDate, $i18n.locale) }}
-        </div>
-
-        <div>
-          <router-link :to="`/journal/timetables?timetableId=${historyItem.timetableId}`">
-            <span class="text--grayed"> #{{ historyItem.timetableId }} </span>
-            <b class="text--primary">&nbsp;{{ historyItem.trainCategoryCode }} {{ historyItem.trainNo }}</b>
-            <div>{{ historyItem.driverName }}</div>
-          </router-link>
-        </div>
-
-        <div>{{ historyItem.route.replace('|', ' -> ') }}</div>
-        <!-- <div>{{ historyItem.routeDistance }} km</div> -->
-        <div>
-          {{ $t('scenery.timetable-author-title') }}:
-          <b v-if="historyItem.authorName">{{ historyItem.authorName }}</b>
-          <i v-else>{{ $t('scenery.timetable-author-unknown') }}</i>
-        </div>
-
-        <!-- <div v-if="historyItem.authorId">{{ historyItem.authorName }}</div> -->
-      </li>
-    </ul>
-  </section>
-</template>
-
-<script lang="ts">
-
-import axios from 'axios';
-import { defineComponent, PropType } from 'vue';
-import dateMixin from '../../mixins/dateMixin';
-import { DataStatus } from '../../scripts/enums/DataStatus';
-import { TimetableHistory, SceneryTimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
-import Station from '../../scripts/interfaces/Station';
-import { URLs } from '../../scripts/utils/apiURLs';
-import Loading from '../Global/Loading.vue';
-
-export default defineComponent({
-  name: 'SceneryTimetablesHistory',
-  mixins: [dateMixin],
-  props: {
-    station: {
-      type: Object as PropType<Station>,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      sceneryHistoryList: [] as TimetableHistory[],
-      dataStatus: DataStatus.Loading,
-    };
-  },
-  mounted() {
-    this.fetchAPIData();
-  },
-  methods: {
-    async fetchAPIData(countFrom = 0, countLimit = 15) {
-      try {
-        const requestString = `${URLs.stacjownikAPI}/api/getSceneryTimetables?name=${this.station.name}&countFrom=${countFrom}&countLimit=${countLimit}`;
-        const historyAPIData: SceneryTimetableHistory = await (await axios.get(requestString)).data;
-
-        this.sceneryHistoryList = historyAPIData.sceneryTimetables;
-        this.dataStatus = DataStatus.Loaded;
-      } catch (error) {
-        console.error(error);
-      }
-    },
-  },
-  components: { Loading },
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-@import '../../styles/SceneryView/styles.scss';
-
-.list-warning {
-  padding: 1em 0.5em;
-  background-color: #444;
-  font-size: 1.2em;
-}
-
-.history-list {
-  padding: 0 0.5em;
-}
-
-.list-item {
-  display: grid;
-  grid-template-columns: 1fr 2fr 2fr 1fr;
-  gap: 1em;
-  align-items: center;
-
-  background-color: #353535;
-  padding: 0.5em;
-  margin: 0.5em 0;
-
-  line-height: 1.5em;
-}
-
-@include smallScreen {
-  .history-list {
-    font-size: 1.1em;
-  }
-  .list-item {
-    grid-template-columns: 1fr 1fr;
-    font-size: 1.05em;
-  }
-}
-</style>
-
+<template>
+  <section class="scenery-timetables-history scenery-section">
+    <Loading v-if="dataStatus != 2" />
+
+    <div class="list-warning" v-else-if="sceneryHistoryList.length == 0">{{ $t('scenery.history-list-empty') }}</div>
+    <ul class="history-list" v-else>
+      <li class="list-item" v-for="historyItem in sceneryHistoryList">
+        <div>
+          <b>{{ localeDay(historyItem.beginDate, $i18n.locale) }}</b>
+          {{ localeTime(historyItem.beginDate, $i18n.locale) }}
+        </div>
+
+        <div>
+          <router-link :to="`/journal/timetables?timetableId=${historyItem.timetableId}`">
+            <span class="text--grayed"> #{{ historyItem.timetableId }} </span>
+            <b class="text--primary">&nbsp;{{ historyItem.trainCategoryCode }} {{ historyItem.trainNo }}</b>
+            <div>{{ historyItem.driverName }}</div>
+          </router-link>
+        </div>
+
+        <div>{{ historyItem.route.replace('|', ' -> ') }}</div>
+        <!-- <div>{{ historyItem.routeDistance }} km</div> -->
+        <div>
+          {{ $t('scenery.timetable-author-title') }}:
+          <b v-if="historyItem.authorName">{{ historyItem.authorName }}</b>
+          <i v-else>{{ $t('scenery.timetable-author-unknown') }}</i>
+        </div>
+
+        <!-- <div v-if="historyItem.authorId">{{ historyItem.authorName }}</div> -->
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script lang="ts">
+import axios from 'axios';
+import { defineComponent, PropType } from 'vue';
+import dateMixin from '../../mixins/dateMixin';
+import { DataStatus } from '../../scripts/enums/DataStatus';
+import { TimetableHistory, SceneryTimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
+import Station from '../../scripts/interfaces/Station';
+import { URLs } from '../../scripts/utils/apiURLs';
+import Loading from '../Global/Loading.vue';
+
+export default defineComponent({
+  name: 'SceneryTimetablesHistory',
+  mixins: [dateMixin],
+  props: {
+    station: {
+      type: Object as PropType<Station>,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      sceneryHistoryList: [] as TimetableHistory[],
+      dataStatus: DataStatus.Loading,
+    };
+  },
+  mounted() {
+    this.fetchAPIData();
+  },
+  methods: {
+    async fetchAPIData(countFrom = 0, countLimit = 15) {
+      try {
+        const requestString = `${URLs.stacjownikAPI}/api/getSceneryTimetables?name=${this.station.name}&countFrom=${countFrom}&countLimit=${countLimit}`;
+        const historyAPIData: SceneryTimetableHistory = await (await axios.get(requestString)).data;
+
+        this.sceneryHistoryList = historyAPIData.sceneryTimetables;
+        this.dataStatus = DataStatus.Loaded;
+      } catch (error) {
+        console.error(error);
+      }
+    },
+  },
+  components: { Loading },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/responsive.scss';
+@import '../../styles/SceneryView/styles.scss';
+
+.list-warning {
+  padding: 1em 0.5em;
+  background-color: #444;
+  font-size: 1.2em;
+}
+
+.history-list {
+  padding: 0 0.5em;
+}
+
+.list-item {
+  display: grid;
+  grid-template-columns: 1fr 2fr 2fr 1fr;
+  gap: 1em;
+  align-items: center;
+
+  background-color: #353535;
+  padding: 0.5em;
+  margin: 0.5em 0;
+
+  line-height: 1.5em;
+}
+
+@include smallScreen {
+  .list-item {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+</style>

src/components/StationsView/FilterOption.vue

@@ -1,23 +1,12 @@
 <template>
-  <div class="filter-option option">
-    <label>
-      <input
-        type="checkbox"
-        :name="option.name"
-        :defaultValue="option.defaultValue"
-        :id="option.id"
-        v-model="option.value"
-        @change="handleChange"
-      />
-      <span v-if="option.id != 'troll'" :class="option.section + (option.value ? ' checked' : '')"
-        >{{ option.id != 'troll' ? $t(`filters.${option.id}`) : 'ARKADIA ZDRÓJ' }}
-      </span>
-    </label>
-  </div>
+  <button class="btn--action" :class="option.section" :data-selected="option.value" @click="handleChange">
+    {{ $t(`filters.${option.id}`) }}
+  </button>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { useStationFiltersStore } from '../../store/stationFiltersStore';
 
 interface FilterOption {
   id: string;
@@ -34,29 +23,26 @@ export default defineComponent({
       required: true,
     },
   },
-  emits: ['optionChange'],
+
+  setup() {
+    return {
+      filterStore: useStationFiltersStore(),
+    };
+  },
   methods: {
     handleChange() {
-      if (this.option.name == 'troll') {
-        location.href = 'https://www.youtube.com/watch?v=HIcSWuKMwOw';
-        return;
-      }
+      this.option.value = !this.option.value;
 
-      this.$emit('optionChange', {
+      this.filterStore.changeFilterValue({
         name: this.option.name,
-        value: this.option.value,
+        value: !this.option.value,
       });
     },
   },
-  setup() {
-    return {};
-  },
 });
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/option.scss';
-
 $accessCol: #e03b07;
 $controlCol: #0085ff;
 $signalCol: #bf7c00;
@@ -64,63 +50,49 @@ $statusCol: #349b32;
 $saveCol: #28a826;
 $routesCol: #9049c0;
 
-.option span {
-  font-size: 0.9em;
-  &.checked {
+button {
+  width: 100%;
+  padding: 0.4em;
+  border-radius: 0.4em;
+
+  &:focus-visible {
+    outline: 1px solid white;
+  }
+
+  &[data-selected='true'] {
     &.access {
       background-color: $accessCol;
-
-      &::before {
-        box-shadow: 0 0 6px 1px $accessCol;
-      }
+      box-shadow: 0 0 6px 1px $accessCol;
     }
 
     &.control {
       background-color: $controlCol;
-
-      &::before {
-        box-shadow: 0 0 6px 1px $controlCol;
-      }
+      box-shadow: 0 0 6px 1px $controlCol;
     }
 
     &.signals {
       background-color: $signalCol;
-
-      &::before {
-        box-shadow: 0 0 6px 1px $signalCol;
-      }
+      box-shadow: 0 0 6px 1px $signalCol;
     }
 
     &.routes {
       background-color: $routesCol;
-
-      &::before {
-        box-shadow: 0 0 6px 1px $routesCol;
-      }
+      box-shadow: 0 0 6px 1px $routesCol;
     }
 
     &.status {
       background-color: $statusCol;
-
-      &::before {
-        box-shadow: 0 0 6px 1px $statusCol;
-      }
+      box-shadow: 0 0 6px 1px $statusCol;
     }
 
     &.save {
       background-color: $saveCol;
-
-      &::before {
-        box-shadow: 0 0 6px 1px $saveCol;
-      }
+      box-shadow: 0 0 6px 1px $saveCol;
     }
 
     &.troll {
       background-color: firebrick;
-
-      &::before {
-        box-shadow: 0 0 6px 1px firebrick;
-      }
+      box-shadow: 0 0 6px 1px firebrick;
     }
 
     &.mode {
@@ -129,18 +101,6 @@ $routesCol: #9049c0;
 
       font-weight: 500;
     }
-
-    &::before {
-      position: absolute;
-      content: '';
-      top: 0;
-      left: 0;
-
-      width: 100%;
-      height: 100%;
-
-      border-radius: 0.5em;
-    }
   }
 }
 </style>

src/components/StationsView/StationFilterCard.vue

@@ -1,20 +1,35 @@
 <template>
-  <section class="filter-card" v-click-outside="closeCard">
-    <div class="card_btn">
-      <button class="btn btn--option" @click="toggleCard">
-        <img class="button_icon" :src="getIcon('filter2')" alt="icon-filter" />
-        {{ $t('options.filters') }}
+  <section class="filter-card" v-click-outside="closeCard" @keydown.esc="closeCard">
+    <div class="card_controls">
+      <button class="btn--filled btn--image" @click="toggleCard">
+        <img class="button_icon" :src="getIcon('filter2')" alt="filter icon" />
+        {{ $t('options.filters') }} [F]
       </button>
+
+      <label for="scenery-search">
+        <input
+          id="scenery-search"
+          list="sceneries"
+          :placeholder="$t('sceneries.scenery-search')"
+          @focus="preventKeyDown = true"
+          @blur="preventKeyDown = false"
+          v-model="chosenSearchScenery"
+        />
+
+        <datalist id="sceneries">
+          <option v-for="scenery in store.stationList" :value="scenery.name"></option>
+        </datalist>
+      </label>
     </div>
 
     <transition name="card-anim">
-      <div class="card" v-if="isVisible">
+      <div class="card" v-if="isVisible" tabindex="0" ref="cardEl">
         <div class="card_content">
           <div class="card_title flex">{{ $t('filters.title') }}</div>
 
           <section class="card_options">
             <filter-option
-              v-for="(option, i) in inputs.options"
+              v-for="(option, i) in filterStore.inputs.options"
               :option="option"
               :key="i"
               @optionChange="handleChange"
@@ -23,7 +38,7 @@
           <section class="card_timestamp" style="text-align: center">
             <div>{{ $t('filters.minimum-hours-title') }}</div>
             <span class="clock">
-              <button @click="subHour">-</button>
+              <button class="btn--action" @click="subHour">-</button>
               <span>{{
                 minimumHours == 0
                   ? $t('filters.now')
@@ -31,7 +46,7 @@
                   ? minimumHours + $t('filters.hour')
                   : $t('filters.no-limit')
               }}</span>
-              <button @click="addHour">+</button>
+              <button class="btn--action" @click="addHour">+</button>
             </span>
           </section>
 
@@ -42,11 +57,13 @@
               name="authors"
               v-model="authorsInputValue"
               @input="handleAuthorsInput"
+              @focus="preventKeyDown = true"
+              @blur="preventKeyDown = false"
             />
           </section>
 
           <section class="card_sliders">
-            <div class="slider" v-for="(slider, i) in inputs.sliders" :key="i">
+            <div class="slider" v-for="(slider, i) in filterStore.inputs.sliders" :key="i">
               <input
                 class="slider-input"
                 type="range"
@@ -65,23 +82,13 @@
           </section>
 
           <section class="card_actions">
-            <div>
-              <filter-option
-                @optionChange="saveFilters"
-                :option="{
-                  id: 'save',
-                  name: 'save',
-                  section: 'mode',
-                  value: saveOptions,
-                  defaultValue: true,
-                }"
-              />
-            </div>
-            <div>
-              <action-button class="outlined" @click="resetFilters">
-                {{ $t('filters.reset') }}
-              </action-button>
-              <action-button class="outlined" @click="closeCard">{{ $t('filters.close') }}</action-button>
+            <div class="action-buttons">
+              <button class="btn--action" style="width: 100%" @click="saveFilters" :data-selected="saveOptions">
+                {{ $t('filters.save') }}
+              </button>
+
+              <button class="btn--action" @click="resetFilters">{{ $t('filters.reset') }}</button>
+              <button class="btn--action" @click="closeCard">{{ $t('filters.close') }}</button>
             </div>
           </section>
         </div>
@@ -91,11 +98,12 @@
 </template>
 
 <script lang="ts">
-
 import { defineComponent, inject } from 'vue';
-import inputData from '../../data/options.json';
 import imageMixin from '../../mixins/imageMixin';
+import keyMixin from '../../mixins/keyMixin';
+import routerMixin from '../../mixins/routerMixin';
 import StorageManager from '../../scripts/managers/storageManager';
+import { useStationFiltersStore } from '../../store/stationFiltersStore';
 import { useStore } from '../../store/store';
 
 import ActionButton from '../Global/ActionButton.vue';
@@ -103,12 +111,9 @@ import FilterOption from './FilterOption.vue';
 
 export default defineComponent({
   components: { ActionButton, FilterOption },
-  emits: ['changeFilterValue', 'invertFilters', 'resetFilters'],
-  mixins: [imageMixin],
+  mixins: [imageMixin, keyMixin, routerMixin],
 
   data: () => ({
-
-    inputs: { ...inputData },
     saveOptions: false,
     STORAGE_KEY: 'options_saved',
 
@@ -118,15 +123,18 @@ export default defineComponent({
     currentRegion: { id: '', value: '' },
 
     delayInputTimer: -1,
+    chosenSearchScenery: '',
   }),
 
   setup() {
     const isVisible = inject('isFilterCardVisible');
     const store = useStore();
+    const filterStore = useStationFiltersStore();
 
     return {
       isVisible,
       store,
+      filterStore,
     };
   },
 
@@ -142,9 +150,31 @@ export default defineComponent({
     this.currentRegion = this.store.region;
   },
 
+  watch: {
+    chosenSearchScenery(value: string) {
+      const chosenStation = this.store.stationList.find(({ name }) => name == value);
+
+      if (chosenStation) {
+        this.$router.push(`/scenery?station=${chosenStation.name.replace(/ /g, '_')}`);
+        this.chosenSearchScenery = '';
+      }
+    },
+
+    isVisible(value: boolean) {
+      this.$nextTick(() => {
+        if (value) (this.$refs['cardEl'] as HTMLDivElement).focus();
+      });
+    },
+  },
+
   methods: {
+    // Override keyMixin function
+    onKeyDownFunction() {
+      this.isVisible = !this.isVisible;
+    },
+
     handleChange(change: { name: string; value: boolean }) {
-      this.$emit('changeFilterValue', {
+      this.filterStore.changeFilterValue({
         name: change.name,
         value: !change.value,
       });
@@ -155,7 +185,7 @@ export default defineComponent({
     handleInput(e: Event) {
       const target = e.target as HTMLInputElement;
 
-      this.$emit('changeFilterValue', {
+      this.filterStore.changeFilterValue({
         name: target.name,
         value: target.value,
       });
@@ -172,7 +202,7 @@ export default defineComponent({
     },
 
     changeNumericFilterValue(name: string, value: number, saveToStorage = false) {
-      this.$emit('changeFilterValue', {
+      this.filterStore.changeFilterValue({
         name,
         value,
       });
@@ -192,17 +222,8 @@ export default defineComponent({
       this.changeNumericFilterValue('onlineFromHours', this.minimumHours, true);
     },
 
-    invertFilters() {
-      this.inputs.options.forEach((option) => {
-        option.value = !option.value;
-        StorageManager.setBooleanValue(option.name, option.value);
-      });
-
-      this.$emit('invertFilters');
-    },
-
-    saveFilters(change: { value: any }) {
-      this.saveOptions = change.value;
+    saveFilters() {
+      this.saveOptions = !this.saveOptions;
 
       if (!this.saveOptions) {
         StorageManager.unregisterStorage(this.STORAGE_KEY);
@@ -211,28 +232,16 @@ export default defineComponent({
 
       StorageManager.registerStorage(this.STORAGE_KEY);
 
-      this.inputs.options.forEach((option) => StorageManager.setBooleanValue(option.name, option.value));
-
-      this.inputs.sliders.forEach((slider) => StorageManager.setNumericValue(slider.name, slider.value));
+      this.filterStore.inputs.options.forEach((option) => StorageManager.setBooleanValue(option.name, !option.value));
+      this.filterStore.inputs.sliders.forEach((slider) => StorageManager.setNumericValue(slider.name, slider.value));
     },
 
     resetFilters() {
-      this.inputs.options.forEach((option) => {
-        option.value = option.defaultValue;
-        StorageManager.setBooleanValue(option.name, option.value);
-      });
-
-      this.inputs.sliders.forEach((slider) => {
-        slider.value = slider.defaultValue;
-        StorageManager.setNumericValue(slider.name, slider.value);
-      });
-
       this.authorsInputValue = '';
 
       this.minimumHours = 0;
       this.changeNumericFilterValue('onlineFromHours', this.minimumHours, true);
-
-      this.$emit('resetFilters');
+      this.filterStore.resetFilters();
     },
 
     closeCard() {
@@ -264,28 +273,24 @@ export default defineComponent({
 }
 
 .card {
-  &_btn {
-    button {
-      display: flex;
-      align-items: center;
+  &_controls {
+    display: flex;
+    gap: 0.5em;
 
-      padding: 0.5em 1em;
-      border-radius: 0.75em 0.75em 0 0;
-
-      font-weight: bold;
-    }
-
-    img {
-      width: 1.3em;
-      margin-right: 0.25em;
+    input {
+      border-radius: 0.5em 0.5em 0 0;
+      height: 100%;
     }
   }
 
   &_content {
-    display: grid;
-    grid-template-rows: 70px 1fr 100px 50px auto;
-    min-height: 0;
-    max-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+
+    max-height: 90vh;
+
+    padding: 1em;
   }
 
   &_title {
@@ -293,8 +298,6 @@ export default defineComponent({
     font-weight: 700;
     color: $accentCol;
 
-    margin: 0.5em 0;
-
     text-align: center;
   }
 
@@ -342,32 +345,18 @@ export default defineComponent({
       align-items: center;
       justify-content: center;
 
-      font-size: 1.15em;
+      font-size: 1.2em;
+      margin-top: 0.5em;
 
-      color: $accentCol;
-      font-weight: bold;
-    }
-
-    span {
-      min-width: 100px;
-    }
-
-    button {
-      border: none;
-      outline: none;
-      background: none;
-      padding: 0 0.45em;
-
-      cursor: pointer;
-
-      color: white;
-
-      font-size: 1.35em;
-
-      &:focus,
-      &:hover {
+      span {
+        min-width: 120px;
+        font-weight: bold;
         color: $accentCol;
       }
+
+      button {
+        padding: 0.2em 0.6em;
+      }
     }
   }
 
@@ -389,22 +378,33 @@ export default defineComponent({
     input {
       width: 100%;
       padding: 0.5em;
+      border: 1px solid white;
     }
   }
 
   &_actions {
-    margin-top: 1em;
-
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    button {
-      margin: 1em 0.25em;
+    .filter-option {
+      max-width: 50%;
+      margin: 0 auto;
     }
 
-    .option {
-      font-size: 1.1em;
+    .action-buttons {
+      display: flex;
+      gap: 0.5em;
+      width: 100%;
+
+      margin-top: 0.5em;
+
+      button {
+        width: 50%;
+        margin: 0 auto;
+        padding: 0.5em;
+
+        &[data-selected='true'] {
+          background-color: lightgreen;
+          color: black;
+        }
+      }
     }
   }
 }
@@ -435,8 +435,13 @@ export default defineComponent({
     min-width: 25%;
     max-width: 120px;
 
+    &:focus-visible ~ * {
+      color: gold;
+    }
+
     &::-webkit-slider-thumb {
       -webkit-appearance: none;
+      appearance: none;
 
       height: 20px;
       width: 20px;

src/components/StationsView/StationTable.vue

@@ -182,7 +182,7 @@
             </td>
 
             <td class="station_info" v-else>
-              <img class="icon-info" :src="getImage('unknown.png')" alt="icon-unknown" :title="$t('desc.unknown')" />
+              <img class="icon-info" :src="getIcon('unknown')" alt="icon-unknown" :title="$t('desc.unknown')" />
             </td>
 
             <td class="station_users" :class="{ inactive: !station.onlineInfo }">
@@ -230,6 +230,7 @@ import stationInfoMixin from '../../mixins/stationInfoMixin';
 import styleMixin from '../../mixins/styleMixin';
 import { DataStatus } from '../../scripts/enums/DataStatus';
 import Station from '../../scripts/interfaces/Station';
+import { useStationFiltersStore } from '../../store/stationFiltersStore';
 import { useStore } from '../../store/store';
 import Loading from '../Global/Loading.vue';
 
@@ -239,48 +240,58 @@ export default defineComponent({
       type: Array as () => Station[],
       required: true,
     },
-    sorterActive: {
-      type: Object as () => {
-        index: number;
-        dir: number;
-      },
-      required: true,
-    },
-    setFocusedStation: { type: Function, required: true },
-    changeSorter: { type: Function, required: true },
   },
+
+  components: { Loading },
   mixins: [styleMixin, dateMixin, stationInfoMixin, returnBtnMixin, imageMixin],
+
   data: () => ({
     headIds: ['station', 'min-lvl', 'status', 'dispatcher', 'dispatcher-lvl', 'routes', 'general'],
     headIconsIds: ['user', 'spawn', 'timetable'],
     lastSelectedStationName: '',
   }),
+
+  computed: {
+    sorterActive() {
+      return this.stationFiltersStore.sorterActive;
+    },
+  },
+
   setup() {
     const store = useStore();
+    const stationFiltersStore = useStationFiltersStore();
+
     const isDataLoaded = computed(() => {
       return store.dataStatuses.sceneries != DataStatus.Loading;
     });
     return {
       isDataLoaded,
+      stationFiltersStore,
     };
   },
+
   methods: {
     setScenery(name: string) {
       const station = this.stations.find((station) => station.name === name);
       if (!station) return;
+
       this.lastSelectedStationName = station.name;
       this.$router.push({
         name: 'SceneryView',
         query: { station: station.name.replaceAll(' ', '_') },
       });
     },
+
     openForumSite(e: Event, url: string | undefined) {
       if (!url) return;
       e.preventDefault();
       window.open(url, '_blank');
     },
+
+    changeSorter(i: number) {
+      this.stationFiltersStore.changeSorter(i);
+    },
   },
-  components: { Loading },
 });
 </script>
 
@@ -289,7 +300,7 @@ export default defineComponent({
 @import '../../styles/variables.scss';
 @import '../../styles/icons.scss';
 
-$rowCol: #4b4b4b;
+$rowCol: #424242;
 
 .change-anim {
   &-enter-active,
@@ -328,7 +339,7 @@ table {
   }
 
   thead tr {
-    background-color: $primaryCol;
+    background-color: $bgCol;
   }
 
   thead th {
@@ -338,7 +349,7 @@ table {
     min-width: 75px;
 
     padding: 0.5em;
-    background-color: $primaryCol;
+    background-color: $bgCol;
     white-space: pre-wrap;
 
     cursor: pointer;

src/components/TrainsView/TrainInfo.vue

@@ -1,287 +1,295 @@
-<template>
-  <div class="train-info" tabindex="0">
-    <section class="train-route">
-      <div class="train_general">
-        <span>
-          <span class="timetable-id" v-if="train.timetableData">#{{ train.timetableData.timetableId }}</span>
-
-          <span class="timetable_warnings">
-            <span class="train-badge twr" v-if="train.timetableData?.TWR">TWR</span>
-            <span class="train-badge skr" v-if="train.timetableData?.SKR">SKR</span>
-          </span>
-          <strong v-if="train.timetableData">{{ train.timetableData.category }}&nbsp;</strong>
-          <strong>{{ train.trainNo }}</strong>
-          <span>&nbsp;| {{ train.driverName }}&nbsp;</span>
-        </span>
-      </div>
-
-      <div class="timetable_route" v-if="train.timetableData">
-        <strong>{{ train.timetableData.route.replace('|', ' - ') }}</strong>
-        <img
-          v-if="getSceneriesWithComments(train.timetableData).length > 0"
-          class="image-warning"
-          :src="getIcon('warning')"
-          :title="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(train.timetableData)})`"
-        />
-      </div>
-
-      <hr style="margin: 0.25em 0" />
-
-      <div class="timetable_stops" v-if="train.timetableData">
-        <span v-if="train.timetableData.followingStops.length > 2">
-          {{ $t('trains.via-title') }}
-          <span v-html="displayStopList(train.timetableData.followingStops)"></span>
-        </span>
-      </div>
-
-      <div class="timetable_progress" style="margin-top: 0.5em" v-if="train.timetableData">
-        <!-- <span> </span> -->
-        <span class="timetable_progress-bar">
-          <!-- {{ confirmedPercentage(train.timetableData.followingStops) }}%&nbsp; -->
-          <span class="bar-bg"></span>
-          <span
-            class="bar-fg"
-            :style="{ width: `${Math.floor(confirmedPercentage(train.timetableData.followingStops))}%` }"
-          ></span>
-        </span>
-
-        <span class="timetable_progress-distance">
-          &nbsp; {{ currentDistance(train.timetableData.followingStops) }} km /
-          <span class="text--primary"> {{ train.timetableData.routeDistance }} km </span>
-          |
-          <span v-html="currentDelay(train.timetableData.followingStops)"></span>
-        </span>
-
-        <div class="train-status-badges">
-          <div v-if="!train.currentStationHash" class="train-badge offline">{{ $t('trains.scenery-offline') }}</div>
-          <div v-if="!train.online" class="train-badge offline">Offline {{ lastSeenMessage(train.lastSeen) }}</div>
-        </div>
-      </div>
-
-      <div class="driver_position text--grayed" style="margin-top: 0.25em">
-        {{ displayTrainPosition(train) }}
-      </div>
-    </section>
-
-    <section class="train-stats">
-      <div>
-        <img :src="train.locoURL" loading="lazy" alt="Loco image not found" @error="onImageError" />
-      </div>
-
-      <div class="text--grayed">
-        {{ train.locoType }}
-        <span v-if="train.cars.length > 0">
-          &nbsp;&bull; {{ $t('trains.cars') }}:
-          <span class="count">{{ train.cars.length }}</span>
-        </span>
-      </div>
-
-      <div>
-        <span v-for="(stat, i) in STATS.main" :key="stat.name">
-          <span v-if="i > 0"> &bull; </span>
-          <span>{{ `${~~((train as any)[stat.name] * (stat.multiplier || 1))}${stat.unit}` }} </span>
-        </span>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import imageMixin from '../../mixins/imageMixin';
-import trainInfoMixin from '../../mixins/trainInfoMixin';
-import Train from '../../scripts/interfaces/Train';
-
-export default defineComponent({
-  props: {
-    train: {
-      type: Object as () => Train,
-      required: true,
-    },
-
-    extended: {
-      type: Boolean,
-      default: true,
-    },
-  },
-
-  mixins: [trainInfoMixin, imageMixin],
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-
-.image-warning {
-  height: 1em;
-
-  margin-left: 0.5em;
-}
-
-.train-stats {
-  display: flex;
-  justify-content: center;
-  align-content: center;
-
-  flex-direction: column;
-  text-align: center;
-
-  img {
-    margin: 0.5em 0;
-    width: 12em;
-  }
-}
-
-.train-info {
-  display: grid;
-  grid-template-columns: 2fr 1fr;
-  grid-template-rows: 1fr;
-
-  padding: 1em;
-
-  background-color: #1a1a1a;
-  gap: 0.5em;
-}
-
-.timetable-id {
-  margin-right: 0.3em;
-  color: #d2d2d2;
-}
-
-.timetable_stops {
-  font-size: 0.75em;
-}
-
-.train_general {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-}
-.train-status-badges {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.train-badge {
-  padding: 0.15em 0.35em;
-  margin-right: 0.3em;
-
-  font-weight: bold;
-
-  font-size: 0.9em;
-
-  &.twr {
-    background-color: var(--clr-twr);
-  }
-
-  &.skr {
-    background-color: var(--clr-skr);
-  }
-
-  &.offline {
-    background-color: #b83b2d;
-  }
-}
-
-.timetable_route {
-  display: flex;
-  align-items: center;
-
-  margin-top: 0.5em;
-}
-
-.timetable_warnings {
-  color: black;
-}
-
-.timetable_progress {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.timetable_progress-bar {
-  position: relative;
-
-  width: 6em;
-  height: 1em;
-  margin: 0.5em 0;
-
-  .bar-fg,
-  .bar-bg {
-    position: absolute;
-    height: 1em;
-    width: 100%;
-
-    left: 0;
-  }
-
-  .bar-fg {
-    background-color: springgreen;
-  }
-
-  .bar-bg {
-    background-color: #5b5b5b;
-  }
-}
-
-.timetable_progress-distance {
-  margin-right: 0.25em;
-}
-
-.comments {
-  display: flex;
-  align-items: center;
-
-  font-size: 0.9em;
-
-  margin-top: 1em;
-
-  img {
-    margin-right: 0.5em;
-  }
-}
-
-@include smallScreen() {
-  .train-info {
-    grid-template-columns: 1fr;
-    gap: 1em 0;
-    text-align: center;
-
-    font-size: 1.15em;
-  }
-
-  .train-stats {
-    font-size: 1.1em;
-
-    img {
-      display: none;
-    }
-  }
-
-  .train_general {
-    justify-content: center;
-  }
-
-  .train-status-badges {
-    justify-content: center;
-  }
-
-  .timetable_route {
-    justify-content: center;
-  }
-
-  .timetable_progress {
-    justify-content: center;
-  }
-
-  .comments {
-    flex-direction: column;
-    justify-content: center;
-
-    img {
-      margin: 0 0 0.5em 0;
-    }
-  }
-}
-</style>
+<template>
+  <div class="train-info" tabindex="0">
+    <section class="train-route">
+      <div class="train_general">
+        <span>
+          <span class="timetable-id" v-if="train.timetableData">#{{ train.timetableData.timetableId }}</span>
+          
+          <span class="timetable_warnings">
+            <span class="train-badge twr" v-if="train.timetableData?.TWR">TWR</span>
+            <span class="train-badge skr" v-if="train.timetableData?.SKR">SKR</span>
+          </span>
+          <strong v-if="train.timetableData">{{ train.timetableData.category }}&nbsp;</strong>
+          <strong>{{ train.trainNo }}</strong>
+          <span>&nbsp;| {{ train.driverName }}&nbsp;</span>
+          <b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
+        </span>
+      </div>
+
+      <div class="timetable_route" v-if="train.timetableData">
+        <strong>{{ train.timetableData.route.replace('|', ' - ') }}</strong>
+        <img
+          v-if="getSceneriesWithComments(train.timetableData).length > 0"
+          class="image-warning"
+          :src="getIcon('warning')"
+          :title="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(train.timetableData)})`"
+        />
+      </div>
+
+      <hr style="margin: 0.25em 0" />
+
+      <div class="timetable_stops" v-if="train.timetableData">
+        <span v-if="train.timetableData.followingStops.length > 2">
+          {{ $t('trains.via-title') }}
+          <span v-html="displayStopList(train.timetableData.followingStops)"></span>
+        </span>
+      </div>
+
+      <div class="timetable_progress" style="margin-top: 0.5em" v-if="train.timetableData">
+        <!-- <span> </span> -->
+        <span class="timetable_progress-bar">
+          <!-- {{ confirmedPercentage(train.timetableData.followingStops) }}%&nbsp; -->
+          <span class="bar-bg"></span>
+          <span
+            class="bar-fg"
+            :style="{ width: `${Math.floor(confirmedPercentage(train.timetableData.followingStops))}%` }"
+          ></span>
+        </span>
+
+        <span class="timetable_progress-distance">
+          &nbsp; {{ currentDistance(train.timetableData.followingStops) }} km /
+          <span class="text--primary"> {{ train.timetableData.routeDistance }} km </span>
+          |
+          <span v-html="currentDelay(train.timetableData.followingStops)"></span>
+        </span>
+
+        <div class="train-status-badges">
+          <div v-if="!train.currentStationHash" class="train-badge offline">{{ $t('trains.scenery-offline') }}</div>
+          <div v-if="!train.online" class="train-badge offline">Offline {{ lastSeenMessage(train.lastSeen) }}</div>
+        </div>
+      </div>
+
+      <div class="driver_position text--grayed" style="margin-top: 0.25em">
+        {{ displayTrainPosition(train) }}
+      </div>
+    </section>
+
+    <section class="train-stats">
+      <div>
+        <img :src="train.locoURL" loading="lazy" alt="Loco image not found" @error="onImageError" />
+      </div>
+
+      <div class="text--grayed">
+        {{ train.locoType }}
+        <span v-if="train.cars.length > 0">
+          &nbsp;&bull; {{ $t('trains.cars') }}:
+          <span class="count">{{ train.cars.length }}</span>
+        </span>
+      </div>
+
+      <div>
+        <span v-for="(stat, i) in STATS.main" :key="stat.name">
+          <span v-if="i > 0"> &bull; </span>
+          <span>{{ `${~~((train as any)[stat.name] * (stat.multiplier || 1))}${stat.unit}` }} </span>
+        </span>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import imageMixin from '../../mixins/imageMixin';
+import trainInfoMixin from '../../mixins/trainInfoMixin';
+import Train from '../../scripts/interfaces/Train';
+
+export default defineComponent({
+  props: {
+    train: {
+      type: Object as () => Train,
+      required: true,
+    },
+
+    extended: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  mixins: [trainInfoMixin, imageMixin],
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/responsive.scss';
+
+.image-warning {
+  height: 1em;
+
+  margin-left: 0.5em;
+}
+
+.train-stats {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+
+  flex-direction: column;
+  text-align: center;
+
+  img {
+    margin: 0.5em 0;
+    width: 12em;
+  }
+}
+
+.train-info {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  grid-template-rows: 1fr;
+
+  padding: 1em;
+
+  background-color: #1a1a1a;
+  gap: 0.5em;
+}
+
+.timetable-id {
+  margin-right: 0.3em;
+  color: #d2d2d2;
+}
+
+.warning-timeout {
+  background-color: #be3728;
+  
+  display: inline-block;
+  text-align: center;
+  
+  width: 1.25em;
+  height: 1.25em;
+  border-radius: 50%;
+}
+
+.timetable_stops {
+  font-size: 0.75em;
+}
+
+.train_general {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.train-status-badges {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.train-badge {
+  padding: 0.15em 0.35em;
+  margin-right: 0.3em;
+
+  font-weight: bold;
+
+  font-size: 0.9em;
+
+  &.twr {
+    background-color: var(--clr-twr);
+  }
+
+  &.skr {
+    background-color: var(--clr-skr);
+  }
+
+  &.offline {
+    background-color: #b83b2d;
+  }
+}
+
+.timetable_route {
+  display: flex;
+  align-items: center;
+
+  margin-top: 0.5em;
+}
+
+.timetable_warnings {
+  color: black;
+}
+
+.timetable_progress {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.timetable_progress-bar {
+  position: relative;
+
+  width: 6em;
+  height: 1em;
+  margin: 0.5em 0;
+
+  .bar-fg,
+  .bar-bg {
+    position: absolute;
+    height: 1em;
+    width: 100%;
+
+    left: 0;
+  }
+
+  .bar-fg {
+    background-color: springgreen;
+  }
+
+  .bar-bg {
+    background-color: #5b5b5b;
+  }
+}
+
+.timetable_progress-distance {
+  margin-right: 0.25em;
+}
+
+.comments {
+  display: flex;
+  align-items: center;
+
+  font-size: 0.9em;
+
+  margin-top: 1em;
+
+  img {
+    margin-right: 0.5em;
+  }
+}
+
+@include smallScreen() {
+  .train-info {
+    grid-template-columns: 1fr;
+    gap: 1em 0;
+    text-align: center;
+
+    font-size: 1.15em;
+  }
+
+  .train-stats {
+    font-size: 1.1em;
+  }
+
+  .train_general {
+    justify-content: center;
+  }
+
+  .train-status-badges {
+    justify-content: center;
+  }
+
+  .timetable_route {
+    justify-content: center;
+  }
+
+  .timetable_progress {
+    justify-content: center;
+  }
+
+  .comments {
+    flex-direction: column;
+    justify-content: center;
+
+    img {
+      margin: 0 0 0.5em 0;
+    }
+  }
+}
+</style>

src/components/TrainsView/TrainOptions.vue

@@ -1,267 +1,197 @@
 <template>
-  <div class="train-options">
-    <div class="options_wrapper">
-      <div class="options_content">
-        <div class="content_select">
-          <select-box
-            :itemList="translatedSorterOptions"
-            :defaultItemIndex="0"
-            @selected="changeSorter"
-            :prefix="$t('trains.sorter-prefix')"
-          />
-        </div>
+  <div class="filters-options" @keydown.esc="showOptions = false">
+    <div class="bg" v-if="showOptions" @click="showOptions = false"></div>
 
-        <div class="content_search">
-          <div class="search-box">
-            <input class="search-input" v-model="searchedTrain" :placeholder="$t('trains.search-train')" />
+    <button class="btn--filled btn--image" @click="toggleShowOptions" ref="button">
+      <img :src="getIcon('filter2')" alt="Open filters" />
+      {{ $t('options.filters') }} [F]
+    </button>
 
-            <img class="search-exit" :src="getIcon('exit')" alt="exit-icon" @click="() => (searchedTrain = '')" />
+    <transition name="options-anim">
+      <div class="options_wrapper" v-if="showOptions">
+        <div class="options_content">
+          <h1 class="option-title">{{ $t('options.search-title') }}</h1>
+          <div class="search_content">
+            <div class="search-box">
+              <input
+                class="search-input"
+                ref="initFocusedElement"
+                @focus="preventKeyDown = true"
+                @blur="preventKeyDown = false"
+                :placeholder="$t(`options.search-train`)"
+                v-model="searchedTrain"
+              />
+              <button class="search-exit">
+                <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear('train')" />
+              </button>
+            </div>
+
+            <div class="search-box">
+              <input
+                class="search-input"
+                @focus="preventKeyDown = true"
+                @blur="preventKeyDown = false"
+                :placeholder="$t(`options.search-driver`)"
+                v-model="searchedDriver"
+              />
+              <button class="search-exit">
+                <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear('driver')" />
+              </button>
+            </div>
           </div>
 
-          <div class="search-box">
-            <input class="search-input" v-model="searchedDriver" :placeholder="$t('trains.search-driver')" />
+          <h1 class="option-title">{{ $t('options.sort-title') }}</h1>
+          <div class="options_sorters">
+            <div v-for="opt in translatedSorterOptions">
+              <button
+                class="sort-option btn--option"
+                :data-selected="opt.id == sorterActive.id"
+                @click="onSorterChange(opt)"
+              >
+                {{ opt.value.toUpperCase() }}
+              </button>
+            </div>
+          </div>
 
-            <img class="search-exit" :src="getIcon('exit')" alt="exit-icon" @click="() => (searchedDriver = '')" />
+          <h1 class="option-title" v-if="trainFilterList.length != 0">{{ $t('options.filter-title') }}</h1>
+          <div class="options_filters">
+            <div class="filter-option" v-for="filter in trainFilterList">
+              <button class="btn--option" :data-disabled="!filter.isActive" @click="onFilterChange(filter)">
+                {{ $t(`options.filter-${filter.id}`) }}
+              </button>
+            </div>
+
+            <div class="filter-actions">
+              <button class="btn--action" @click="clearAllFilters">{{ $t('options.filter-clear') }}</button>
+              <button class="btn--action" @click="resetAllFilters">{{ $t('options.filter-reset') }}</button>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-
-    <div class="filters">
-      <span
-        :class="{ active: filter.isActive }"
-        class="filter"
-        v-for="filter in filterList"
-        :key="filter.id"
-        tabindex="0"
-        @contextmenu="
-          (e) => {
-            e.preventDefault();
-            return false;
-          }
-        "
-        @click.left="toggleFilter(filter)"
-        @keydown.enter="toggleFilter(filter)"
-        @click.right="setFilterOnly(filter)"
-        @keydown.space="setFilterOnly(filter)"
-      >
-        {{ $t(`trains.filter-${filter.id}`) }}
-      </span>
-
-      <span class="filter reset-btn" @click="resetFilters" tabindex="0">
-        {{ $t('trains.filter-reset') }}
-      </span>
-    </div>
+    </transition>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, TrainFilter } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { defineComponent, inject, PropType } from 'vue';
 import imageMixin from '../../mixins/imageMixin';
+import keyMixin from '../../mixins/keyMixin';
+import { TrainFilter } from '../../types/Trains/TrainOptionsTypes';
+import ActionButton from '../Global/ActionButton.vue';
 import SelectBox from '../Global/SelectBox.vue';
 
 export default defineComponent({
-  components: { SelectBox },
-  emits: ['changeSearchedTrain', 'changeSearchedDriver', 'changeSorter'],
-  mixins: [imageMixin],
+  components: { SelectBox, ActionButton },
+  mixins: [imageMixin, keyMixin],
 
-  setup() {
-    const { t } = useI18n();
-
-    const sorterOptions = [
-      {
-        id: 'distance',
-        value: 'kilometraż',
-      },
-      {
-        id: 'progress',
-        value: 'przebyta trasa',
-      },
-      {
-        id: 'delay',
-        value: 'opóźnienie',
-      },
-      {
-        id: 'mass',
-        value: 'masa',
-      },
-      {
-        id: 'speed',
-        value: 'prędkość',
-      },
-      {
-        id: 'length',
-        value: 'długość',
-      },
-    ];
-
-    let filterList = inject('filterList') as TrainFilter[];
-
-    const translatedSorterOptions = computed(() =>
-      sorterOptions.map(({ id }) => ({
-        id,
-        value: t(`trains.option-${id}`),
-      }))
-    );
+  props: {
+    sorterOptionIds: {
+      type: Array as PropType<Array<string>>,
+      required: true,
+    },
+  },
 
+  data() {
     return {
-      translatedSorterOptions,
-      searchedTrain: inject('searchedTrain') as string,
-      searchedDriver: inject('searchedDriver') as string,
-      sorterActive: inject('sorterActive') as { id: string | number; dir: number },
-      filterList,
+      showOptions: false,
     };
   },
 
+  setup() {
+    return {
+      searchedTrain: inject('searchedTrain') as string,
+      searchedDriver: inject('searchedDriver') as string,
+
+      sorterActive: inject('sorterActive') as { id: string | number; dir: number },
+      trainFilterList: inject('filterList') as TrainFilter[],
+    };
+  },
+
+  computed: {
+    translatedSorterOptions() {
+      return this.$props.sorterOptionIds.map((id) => ({
+        id,
+        value: this.$t(`options.sort-${id}`),
+      }));
+    },
+  },
+
   methods: {
-    changeSorter(item: { id: string | number; value: string }) {
+    // Override keyMixin function
+    onKeyDownFunction() {
+      this.toggleShowOptions();
+    },
+
+    toggleShowOptions() {
+      this.showOptions = !this.showOptions;
+
+      this.$nextTick(() => {
+        if (this.showOptions) (this.$refs['button'] as HTMLButtonElement)?.focus();
+      });
+    },
+
+    onSorterChange(item: { id: string | number; value: string }) {
       this.sorterActive.id = item.id;
       this.sorterActive.dir = -1;
     },
 
-    toggleFilter(filter: TrainFilter) {
+    onFilterChange(filter: TrainFilter) {
       filter.isActive = !filter.isActive;
     },
 
-    setFilterOnly(filter: TrainFilter) {
-      this.filterList.forEach((f) => (f.isActive = f.id == filter.id));
+    clearAllFilters() {
+      this.trainFilterList.forEach((filter) => {
+        filter.isActive = false;
+      });
     },
 
-    resetFilters() {
-      this.filterList.forEach((f) => (f.isActive = true));
-      this.searchedDriver = "";
-      this.searchedTrain = "";
+    resetAllFilters() {
+      this.trainFilterList.forEach((filter) => {
+        filter.isActive = true;
+      });
+    },
+
+    onInputClear(id: 'driver' | 'train') {
+      if (id == 'driver') this.searchedDriver = '';
+      if (id == 'train') this.searchedTrain = '';
     },
   },
 });
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive';
+@import '../../styles/filters_options.scss';
 
-.train-options {
-  @include smallScreen() {
-    width: 100%;
-  }
+.search_content > div {
+  margin: 0.5em auto;
 }
 
-.options {
-  &_wrapper {
-    display: flex;
-  }
-
-  &_content {
-    display: flex;
-    flex-wrap: wrap;
-
-    .content_search,
-    .content_select {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-
-      padding: 0.25em 0.25em 0 0;
-    }
-  }
-}
-
-.search {
-  &-box {
-    position: relative;
-
-    background: #333;
-    border-radius: 0.5em;
-    min-width: 200px;
-    margin-right: 0.25em;
-  }
-
-  &-input {
-    border: none;
-
-    min-width: 100%;
-    padding: 0.35em 0.5em;
-  }
-
-  &-exit {
-    position: absolute;
-    cursor: pointer;
-
-    top: 50%;
-    right: 10px;
-    transform: translateY(-50%);
-
-    width: 1em;
-  }
-}
-.filters {
+.search_content > button {
   display: flex;
-  flex-wrap: wrap;
+  justify-content: center;
+  margin: 0 auto;
+}
 
-  margin-top: 0.5em;
+.filter-option {
+  button {
+    color: white;
+    font-weight: bold;
 
-  @include smallScreen() {
-    justify-content: center;
+    &[data-disabled='true'] {
+      color: #888;
+    }
   }
 }
 
-.filter {
-  background: #333;
-  padding: 0.2em 0.25em;
-  margin: 0.25em 0.25em 0 0;
-  font-weight: bold;
+.filter-actions {
+  display: flex;
+  gap: 0.5em;
+  width: 100%;
 
-  cursor: pointer;
-  color: gray;
+  margin-top: 1em;
 
-  &.active {
-    color: var(--clr-primary);
-  }
-
-  &.reset-btn {
-    color: salmon;
-  }
-}
-
-@include smallScreen() {
-  .journal-options {
+  button {
     width: 100%;
   }
-  .options {
-    &_wrapper {
-      justify-content: center;
-    }
-
-    &_content {
-      padding: 0 1em;
-
-      flex-direction: column;
-
-      .content_select {
-        margin: 0 auto;
-        padding: 0;
-      }
-
-      .content_search {
-        justify-content: center;
-      }
-    }
-  }
-
-  .search {
-    &-box,
-    &-button {
-      margin: 0.5em 0 0 0;
-    }
-
-    &-box {
-      width: 100%;
-    }
-
-    &-button {
-      width: 80%;
-      max-width: 300px;
-    }
-  }
 }
 </style>

src/components/TrainsView/TrainOptionsCard.vue

@@ -1,144 +0,0 @@
-<template>
-  <section class="filter-card" v-click-outside="closeCard">
-    <div class="card_btn">
-      <action-button @click="toggleCard">
-        <img class="button_icon" :src="getIcon('filter2')" alt="icon-filter" />
-        <p>{{ $t('options.filters') }}</p>
-      </action-button>
-    </div>
-
-    <transition name="card-anim">
-      <div class="card_content card" v-if="isVisible">
-        <div class="card_exit" @click="closeCard"></div>
-
-        <div class="options_wrapper">
-          <div class="options_content">
-            <div class="content_select">
-              <select-box
-                :itemList="translatedSorterOptions"
-                :defaultItemIndex="0"
-                @selected="changeSorter"
-                :prefix="$t('trains.sorter-prefix')"
-              />
-            </div>
-
-            <div class="content_search">
-              <div class="search-box">
-                <input class="search-input" v-model="searchedTrain" :placeholder="$t('trains.search-train')" />
-
-                <img class="search-exit" :src="getIcon('exit')" alt="exit-icon" @click="() => (searchedTrain = '')" />
-              </div>
-
-              <div class="search-box">
-                <input class="search-input" v-model="searchedDriver" :placeholder="$t('trains.search-driver')" />
-
-                <img class="search-exit" :src="getIcon('exit')" alt="exit-icon" @click="() => (searchedDriver = '')" />
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <section class="card_actions flex">
-          <action-button class="outlined">
-            {{ $t('filters.reset') }}
-          </action-button>
-          <action-button class="outlined" @click="closeCard">{{ $t('filters.close') }}</action-button>
-        </section>
-      </div>
-    </transition>
-  </section>
-</template>
-
-<script lang="ts">
-import inputData from "../../data/options.json";
-
-import { TrainFilter, computed, defineComponent, inject } from 'vue';
-import { useI18n } from 'vue-i18n';
-import SelectBox from '../Global/SelectBox.vue';
-import ActionButton from '../Global/ActionButton.vue';
-import { sorterOptions } from '../../data/trainOptions';
-import imageMixin from "../../mixins/imageMixin";
-
-export default defineComponent({
-  components: { ActionButton, SelectBox },
-  emits: ['changeFilterValue', 'invertFilters', 'resetFilters'],
-  mixins: [imageMixin],
-
-  data: () => ({
-    inputs: { ...inputData },
-  }),
-
-  setup() {
-    const isVisible = inject('isTrainOptionsCardVisible');
-
-    const { t } = useI18n();
-
-    let filterList = inject('filterList') as TrainFilter[];
-
-    const translatedSorterOptions = computed(() =>
-      sorterOptions.map(({ id }) => ({
-        id,
-        value: t(`trains.option-${id}`),
-      }))
-    );
-
-    return {
-      translatedSorterOptions,
-      searchedTrain: inject('searchedTrain') as string,
-      searchedDriver: inject('searchedDriver') as string,
-      sorterActive: inject('sorterActive') as { id: string | number; dir: number },
-      filterList,
-      isVisible,
-    };
-  },
-
-  methods: {
-    closeCard() {
-      this.isVisible = false;
-    },
-
-    toggleCard() {
-      this.isVisible = !this.isVisible;
-    },
-
-    changeSorter(item: { id: string | number; value: string }) {
-      this.sorterActive.id = item.id;
-      this.sorterActive.dir = -1;
-    },
-
-    toggleFilter(filter: TrainFilter) {
-      filter.isActive = !filter.isActive;
-    },
-
-    setFilterOnly(filter: TrainFilter) {
-      this.filterList.forEach((f) => (f.isActive = f.id == filter.id));
-    },
-
-    resetFilters() {
-      this.filterList.forEach((f) => (f.isActive = true));
-    },
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/responsive';
-@import '../../styles/card';
-
-
-.card {
-  section {
-    margin: 0.5em 0;
-  }
-
-  &_title {
-    font-size: 2em;
-    font-weight: 700;
-    color: $accentCol;
-
-    margin: 0.5em 0;
-
-    text-align: center;
-  }
-}
-</style>

src/components/TrainsView/TrainSchedule.vue

@@ -60,7 +60,9 @@
               <b>{{ stop.stopNameRAW }} </b>: <span v-html="stop.comments"></span>
             </div>
 
-            <span v-if="stop.departureLine == train.timetableData!.followingStops[i + 1].arrivalLine && !/sbl/gi.test(stop.departureLine!)">
+            <span
+              v-if="stop.departureLine == train.timetableData!.followingStops[i + 1].arrivalLine && !/sbl/gi.test(stop.departureLine!)"
+            >
               {{ stop.departureLine }}
             </span>
 
@@ -175,10 +177,6 @@ $stopNameClr: #22a8d1;
 
 .train-schedule {
   padding: 0 0.25em;
-
-  @include smallScreen() {
-    font-size: 1.1em;
-  }
 }
 
 .train-stock {
@@ -198,6 +196,11 @@ ul.stock-list {
     color: #aaa;
     font-size: 0.9em;
   }
+
+  img {
+    max-height: 60px;
+    max-width: 320px;
+  }
 }
 
 .schedule-wrapper {

src/components/TrainsView/TrainTable.vue

@@ -8,6 +8,11 @@
           {{ $t('trains.no-trains') }}
         </div>
 
+        <div class="timeouts-warning" v-if="trainNumbersWithTimeouts.length != 0">
+          <b class="warning-timeout">?</b>
+          {{ $t('trains.timeout') }}
+        </div>
+
         <ul class="train-list">
           <li
             class="train-row"
@@ -25,39 +30,30 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, inject, Ref, computed } from 'vue';
+import { computed, defineComponent, inject, PropType, Ref } from 'vue';
 import modalTrainMixin from '../../mixins/modalTrainMixin';
 import returnBtnMixin from '../../mixins/returnBtnMixin';
 import Train from '../../scripts/interfaces/Train';
 import { useStore } from '../../store/store';
 import Loading from '../Global/Loading.vue';
-import TrainModal from '../Global/TrainModal.vue';
 import TrainInfo from './TrainInfo.vue';
-import TrainSchedule from './TrainSchedule.vue';
 
 export default defineComponent({
-  components: {
-    TrainSchedule,
-    TrainInfo,
-    Loading,
-    TrainModal,
-  },
-
-  mixins: [returnBtnMixin, modalTrainMixin],
+  components: { Loading, TrainInfo },
 
   props: {
     trains: {
-      type: Array as () => Train[],
+      type: Array as PropType<Train[]>,
       required: true,
     },
   },
 
+  mixins: [returnBtnMixin, modalTrainMixin],
+
   setup(props) {
     const store = useStore();
-
     const searchedTrain = inject('searchedTrain') as Ref<string>;
     const searchedDriver = inject('searchedDriver') as Ref<string>;
-
     const currentTrains = computed(() => {
       return props.trains;
     });
@@ -67,53 +63,32 @@ export default defineComponent({
       searchedDriver,
       currentTrains,
       store,
-
-      sorterActive: inject('sorterActive') as { id: string | number; dir: number },
+      sorterActive: inject('sorterActive') as {
+        id: string | number;
+        dir: number;
+      },
       distanceLimitExceeded: computed(
         () => props.trains.findIndex(({ timetableData }) => timetableData && timetableData.routeDistance > 200) != -1
       ),
     };
   },
 
+  computed: {
+    trainNumbersWithTimeouts() {
+      return this.store.trainList.filter((train) => train.isTimeout).map((train) => train.trainNo);
+    },
+  },
+
   activated() {
     const query = this.$route.query;
-
     if (query.trainNo && query.driverName) {
       this.searchedDriver = query.driverName.toString();
       this.searchedTrain = query.trainNo.toString();
-
       setTimeout(() => {
-        this.selectModalTrain(query.driverName + <string>query.trainNo);
+        this.selectModalTrain(query.driverName! + query.trainNo!.toString());
       }, 20);
     }
   },
-
-  methods: {
-    enter(el: HTMLElement) {
-      const maxHeight = getComputedStyle(el).height;
-
-      el.style.height = '0px';
-
-      getComputedStyle(el);
-
-      setTimeout(() => {
-        el.style.height = maxHeight;
-      }, 10);
-    },
-
-    afterEnter(el: HTMLElement) {
-      el.style.height = 'auto';
-    },
-
-    leave(el: HTMLElement) {
-      el.style.height = getComputedStyle(el).height;
-
-      setTimeout(() => {
-        el.style.height = '0px';
-      }, 10);
-    },
-
-  },
 });
 </script>
 
@@ -139,11 +114,10 @@ export default defineComponent({
   text-align: center;
 
   padding: 1em 0;
-  margin: 1em 0;
 
   font-size: 1.5em;
 
-  background: #333;
+  background: #1a1a1a;
 }
 
 img.train-image {
@@ -156,12 +130,32 @@ img.train-image {
   background: var(--clr-warning);
 }
 
+.timeouts-warning {
+  background-color: #333;
+
+  font-weight: bold;
+  font-size: 1.05em;
+
+  margin-bottom: 0.5em;
+  padding: 0.5em;
+}
+
+.warning-timeout {
+  background-color: #be3728;
+  color: white;
+
+  display: inline-block;
+  text-align: center;
+
+  width: 1.25em;
+  height: 1.25em;
+  border-radius: 50%;
+}
+
 .train {
   &-list {
     overflow: auto;
 
-    margin-top: 1em;
-
     @include smallScreen() {
       width: 100%;
     }

src/constants/Journal/JournalTimetablesConsts.ts

@@ -0,0 +1,28 @@
+import { JournalFilterType } from "../../scripts/enums/JournalFilterType";
+import { JournalTimetableFilter } from "../../types/Journal/JournalTimetablesTypes";
+
+export const journalTimetableFilters: JournalTimetableFilter[] = [
+  {
+    id: JournalFilterType.all,
+    filterSection: 'timetable-status',
+    isActive: true,
+  },
+
+  {
+    id: JournalFilterType.active,
+    filterSection: 'timetable-status',
+    isActive: false,
+  },
+
+  {
+    id: JournalFilterType.fulfilled,
+    filterSection: 'timetable-status',
+    isActive: false,
+  },
+
+  {
+    id: JournalFilterType.abandoned,
+    filterSection: 'timetable-status',
+    isActive: false,
+  },
+];

src/constants/Trains/TrainOptionsConsts.ts

@@ -1,60 +1,60 @@
-import { TrainFilter } from "vue";
-import { TrainFilterType } from "../scripts/enums/TrainFilterType";
-
-export const trainFilters: TrainFilter[] = [
-  {
-    id: TrainFilterType.twr,
-    isActive: true,
-  },
-  {
-    id: TrainFilterType.skr,
-    isActive: true,
-  },
-  {
-    id: TrainFilterType.passenger,
-    isActive: true,
-  },
-  {
-    id: TrainFilterType.freight,
-    isActive: true,
-  },
-  {
-    id: TrainFilterType.other,
-    isActive: true,
-  },
-  {
-    id: TrainFilterType.comments,
-    isActive: true,
-  },
-  {
-    id: TrainFilterType.noTimetable,
-    isActive: true,
-  },
-];
-
-export const sorterOptions = [
-  {
-    id: 'distance',
-    value: 'kilometraż',
-  },
-  {
-    id: 'progress',
-    value: 'przebyta trasa',
-  },
-  {
-    id: 'delay',
-    value: 'opóźnienie',
-  },
-  {
-    id: 'mass',
-    value: 'masa',
-  },
-  {
-    id: 'speed',
-    value: 'prędkość',
-  },
-  {
-    id: 'length',
-    value: 'długość',
-  }
-];
+import { TrainFilterType } from '../../scripts/enums/TrainFilterType';
+import { TrainFilter } from '../../types/Trains/TrainOptionsTypes';
+
+export const trainFilters: TrainFilter[] = [
+  {
+    id: TrainFilterType.twr,
+    isActive: true,
+  },
+  {
+    id: TrainFilterType.skr,
+    isActive: true,
+  },
+  {
+    id: TrainFilterType.passenger,
+    isActive: true,
+  },
+  {
+    id: TrainFilterType.freight,
+    isActive: true,
+  },
+  {
+    id: TrainFilterType.other,
+    isActive: true,
+  },
+  {
+    id: TrainFilterType.comments,
+    isActive: true,
+  },
+  {
+    id: TrainFilterType.noTimetable,
+    isActive: true,
+  },
+];
+
+export const sorterOptions = [
+  {
+    id: 'distance',
+    value: 'kilometraż',
+  },
+  {
+    id: 'progress',
+    value: 'przebyta trasa',
+  },
+  {
+    id: 'delay',
+    value: 'opóźnienie',
+  },
+  {
+    id: 'mass',
+    value: 'masa',
+  },
+  {
+    id: 'speed',
+    value: 'prędkość',
+  },
+  {
+    id: 'length',
+    value: 'długość',
+  },
+];

src/data/journalFilters.ts

@@ -1,30 +0,0 @@
-import { JournalFilter } from "vue";
-import { JournalFilterType } from "../scripts/enums/JournalFilterType";
-
-export const journalTimetableFilters: JournalFilter[] = [
-    {
-        id: JournalFilterType.all,
-        filterSection: "timetable-status",
-        isActive: true
-    },
-
-    {
-        id: JournalFilterType.active,
-        filterSection: "timetable-status",
-        isActive: false
-    },
-
-    {
-        id: JournalFilterType.fulfilled,
-        filterSection: "timetable-status",
-        isActive: false
-    },
-
-    {
-        id: JournalFilterType.abandoned,
-        filterSection: "timetable-status",
-        isActive: false
-    },
-]
-
-export const journalDispatcherFilters: JournalFilter[] = []

src/data/options.json

@@ -198,15 +198,6 @@
       "section": "status",
       "value": true,
       "defaultValue": true
-    },
-    {
-      "id": "troll",
-      "name": "troll",
-      "iconName": "",
-
-      "section": "troll",
-      "value": true,
-      "defaultValue": true
     }
   ],
   "sliders": [

src/locales/en.json

@@ -11,10 +11,10 @@
     "migration-confirm": "Roger that!"
   },
   "update": {
-      "title": "New Stacjownik version is available!",
-      "paragraph1": "Enjoy the application and may the green signal be with you!",
-      "release-link": "Click here to browse version changelog (GitHub)",
-      "confirm-button": "Understood!" 
+    "title": "New Stacjownik version is available!",
+    "paragraph1": "Enjoy the application and may the green signal be with you!",
+    "release-link": "Click here to browse version changelog (GitHub)",
+    "confirm-button": "Understood!"
   },
   "data-status": {
     "S1a-connection": "<b>S1a signal</b> <br> Cannot connect with Stacjownik API service!",
@@ -72,7 +72,52 @@
   },
   "options": {
     "filters": "FILTERS",
-    "donate": "DONATE"
+    "donate": "DONATE",
+
+    "search-button": "Search",
+    "reset-button": "Reset",
+
+    "sort-title": "SORT BY:",
+    "filter-title": "FILTER BY:",
+    "search-title": "SEARCH:",
+
+    "search-train-no": "Train no. / #",
+    "search-train": "Train no.",
+    "search-driver": "Driver name",
+    "search-dispatcher": "Dispatcher name",
+    "search-station": "Scenery name",
+    "search-author": "Timetable author name",
+    "search-date": "Timetable date (CEST / GMT+2)",
+
+    "sort-mass": "mass",
+    "sort-speed": "speed",
+    "sort-length": "length",
+    "sort-distance": "distance",
+    "sort-timetable": "train no.",
+    "sort-progress": "route progress",
+    "sort-delay": "current delay",
+
+    "sort-total-stops": "total stops",
+    "sort-beginDate": "date",
+    "sort-timetableId": "timetable ID",
+    "sort-timestampFrom": "date",
+    "sort-duration": "duration",
+
+    "filter-comments": "COMMENTS",
+    "filter-twr": "TWR",
+    "filter-skr": "SKR",
+    "filter-passenger": "PASSENGER",
+    "filter-freight": "FREIGHT",
+    "filter-other": "OTHER",
+    "filter-noTimetable": "NO TIMETABLE",
+
+    "filter-reset": "RESET FILTERS",
+    "filter-clear": "CLEAR FILTERS",
+
+    "filter-all": "ALL ENTRIES",
+    "filter-abandoned": "ABANDONED",
+    "filter-fulfilled": "FULFILLED",
+    "filter-active": "ACTIVE"
   },
   "filters": {
     "endingStatus": "ENDS SOON",
@@ -116,7 +161,7 @@
     "hour": "h",
     "no-limit": "NO LIMIT",
     "include-selected": "INCLUDE SELECTED",
-    "save": "↵ SAVE FILTERS",
+    "save": "SAVE FILTERS",
     "reset": "RESET FILTERS",
     "close": "CLOSE FILTERS"
   },
@@ -131,7 +176,8 @@
     "users": "Drivers online",
     "spawns": "Spawns online",
     "timetables": "Active timetables",
-    "no-stations": "No stations to show here!"
+    "no-stations": "No stations to show here!",
+    "scenery-search": "Search for scenery..."
   },
   "trains": {
     "no-trains": "No trains to show here!",
@@ -150,28 +196,6 @@
     "current-signal": "at signal",
     "current-track": "on track",
 
-    "option-mass": "mass",
-    "option-speed": "speed",
-    "option-length": "length",
-    "option-distance": "distance",
-    "option-timetable": "train no.",
-    "option-progress": "route progress",
-    "option-delay": "current delay",
-    "option-comments": "comments",
-
-    "filter-comments": "comments",
-    "filter-twr": "TWR",
-    "filter-skr": "SKR",
-    "filter-passenger": "passenger",
-    "filter-freight": "freight",
-    "filter-other": "other",
-    "filter-noTimetable": "no timetable",
-    "filter-reset": "X RESET",
-
-    "sorter-prefix": "Sort: ",
-    "search-train": "Train no.",
-    "search-driver": "Driver name",
-
     "delayed": "Delayed: ",
     "preponed": "Ahead of schedule: ",
     "on-time": "On time",
@@ -195,7 +219,8 @@
     "last-seen-min": "since one minute",
     "last-seen-ago": "since {minutes} minutes",
 
-    "scenery-offline": "Offline ride"
+    "scenery-offline": "Offline ride",
+    "timeout": "An error occured while trying to refresh SWDR timetable data!"
   },
   "journal": {
     "title": "DISPATCHER HISTORY",
@@ -205,26 +230,6 @@
     "section-timetables": "TIMETABLES",
     "section-dispatchers": "DISPATCHERS",
 
-    "search": "Search",
-    "search-train": "Train no. / #",
-    "search-driver": "Driver name",
-    "search-dispatcher": "Dispatcher name",
-    "search-station": "Scenery name",
-
-    "sort-prefix": "Sort: ",
-
-    "option-distance": "distance",
-    "option-total-stops": "total stops",
-    "option-beginDate": "date",
-    "option-timetableId": "timetable ID",
-    "option-timestampFrom": "date",
-    "option-duration": "duration",
-
-    "filter-all": "ALL ENTRIES",
-    "filter-abandoned": "ABANDONED",
-    "filter-fulfilled": "FULFILLED",
-    "filter-active": "ACTIVE",
-
     "no-further-data": "No further data for current parameters",
     "loading-further-data": "Loading...",
 
@@ -239,7 +244,20 @@
     "online-since": "ONLINE SINCE",
     "duty-lasted": "The duty lasted",
     "minutes": "{minutes} mins",
-    "hours": "{hours}h {minutes} mins"
+    "hours": "{hours}h {minutes} mins",
+
+    "stock-info": "STOCK INFO",
+    "stock-length": "Length",
+    "stock-mass": "Mass",
+    "stock-max-speed": "Maximum registered speed",
+
+    "load-data": "Load further data...",
+
+    "stats-timetables": "TIMETABLES",
+    "stats-longest-timetable": "LONGEST TIMETABLE",
+    "stats-avg-timetable": "AVERAGE TIMETABLE LENGTH",
+    "stats-distance": "DISTANCE",
+    "stats-stations": "STATIONS"
   },
   "scenery": {
     "users": "PLAYERS ONLINE",

src/locales/pl.json

@@ -74,7 +74,53 @@
   },
   "options": {
     "filters": "FILTRY",
-    "donate": "WESPRZYJ"
+    "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-date": "Data rozkładu jazdy (czas polski)",
+
+    "sort-distance": "kilometraż",
+    "sort-total-stops": "stacje",
+    "sort-beginDate": "data",
+    "sort-timetableId": "ID rozkładu",
+    "sort-timestampFrom": "data",
+    "sort-duration": "czas dyżuru",
+
+    "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-comments": "UWAGI EKSPLOATACYJNE",
+    "filter-twr": "TWR",
+    "filter-skr": "PRZEKR. SKRAJNIA",
+    "filter-passenger": "PASAŻERSKIE",
+    "filter-freight": "TOWAROWE",
+    "filter-other": "INNE",
+    "filter-noTimetable": "BEZ RJ",
+
+    "filter-reset": "ZRESETUJ FILTRY",
+    "filter-clear": "WYŁĄCZ FILTRY",
+
+    "filter-all": "WSZYSTKIE",
+    "filter-abandoned": "PORZUCONE",
+    "filter-fulfilled": "WYPEŁNIONE",
+    "filter-active": "AKTYWNE"
   },
   "filters": {
     "endingStatus": "KOŃCZY",
@@ -118,7 +164,7 @@
     "hour": " godz.",
     "no-limit": "BEZ LIMITU",
     "include-selected": "POKAŻ ZAZNACZONE",
-    "save": "↵ ZAPISZ FILTRY",
+    "save": "ZAPISZ FILTRY",
     "reset": "RESETUJ FILTRY",
     "close": "ZAMKNIJ FILTRY"
   },
@@ -133,7 +179,8 @@
     "users": "Maszyniści online",
     "spawns": "Otwarte spawny",
     "timetables": "Aktywne rozkłady jazdy",
-    "no-stations": "Brak stacji do wyświetlenia!"
+    "no-stations": "Brak stacji do wyświetlenia!",
+    "scenery-search": "Wyszukaj scenerię..."
   },
   "trains": {
     "no-trains": "Brak pociągów do wyświetlenia!",
@@ -152,28 +199,6 @@
     "current-signal": "przy semaforze",
     "current-track": "na szlaku",
 
-    "option-mass": "masa",
-    "option-speed": "prędkość",
-    "option-length": "długość",
-    "option-distance": "kilometraż",
-    "option-timetable": "nr pociągu",
-    "option-progress": "przebyta trasa",
-    "option-delay": "opóźnienie",
-    "option-comments": "uwagi ekspl.",
-
-    "filter-comments": "uwagi ekspl.",
-    "filter-twr": "TWR",
-    "filter-skr": "SKR",
-    "filter-passenger": "pasażerskie",
-    "filter-freight": "towarowe",
-    "filter-other": "inne",
-    "filter-noTimetable": "bez RJ",
-    "filter-reset": "X RESETUJ",
-
-    "sorter-prefix": "Sortuj: ",
-    "search-train": "Numer pociągu",
-    "search-driver": "Nick maszynisty",
-
     "delayed": "Opóźniony: ",
     "preponed": "Przed czasem: ",
     "on-time": "Planowo",
@@ -197,7 +222,9 @@
     "last-seen-min": "od minuty",
     "last-seen-ago": "od {minutes} minut",
 
-    "scenery-offline": "Przejazd offline"
+    "scenery-offline": "Przejazd offline",
+
+    "timeout": "Wystąpił problem z aktualizacją rozkładów jazdy z SWDR"
   },
   "journal": {
     "title": "HISTORIA DYŻURÓW",
@@ -207,26 +234,6 @@
     "section-timetables": "ROZKŁADY JAZDY",
     "section-dispatchers": "DYŻURNI",
 
-    "search": "Szukaj",
-    "search-train": "Nr pociągu / #",
-    "search-driver": "Nick maszynisty",
-    "search-dispatcher": "Nick dyżurnego",
-    "search-station": "Nazwa scenerii",
-
-    "sort-prefix": "Sortuj: ",
-
-    "option-distance": "kilometraż",
-    "option-total-stops": "stacje",
-    "option-beginDate": "data",
-    "option-timetableId": "ID rozkładu",
-    "option-timestampFrom": "data",
-    "option-duration": "czas dyżuru",
-
-    "filter-all": "WSZYSTKIE",
-    "filter-abandoned": "PORZUCONE",
-    "filter-fulfilled": "WYPEŁNIONE",
-    "filter-active": "AKTYWNE",
-
     "no-further-data": "Brak dalszych wyników dla podanych parametrów",
     "loading-further-data": "Ładowanie...",
 
@@ -241,7 +248,20 @@
     "timetable-day": "Rozkład z dnia",
     "timetable-active": "AKTYWNY",
     "timetable-fulfilled": "WYPEŁNIONY",
-    "timetable-abandoned": "PORZUCONY"
+    "timetable-abandoned": "PORZUCONY",
+
+    "stock-info": "INFORMACJE O SKŁADZIE",
+    "stock-length": "Długość",
+    "stock-mass": "Masa",
+    "stock-max-speed": "Maks. zarejestrowana prędkość",
+
+    "load-data": "Pobierz dalszą historię...",
+
+    "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"
   },
   "scenery": {
     "users": "GRACZE ONLINE",

src/mixins/keyMixin.ts

@@ -0,0 +1,26 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  data() {
+    return {
+      preventKeyDown: false,
+    };
+  },
+
+  activated() {
+    window.addEventListener('keydown', this.handleKeyDown);
+  },
+
+  deactivated() {
+    window.removeEventListener('keydown', this.handleKeyDown);
+  },
+
+  methods: {
+    onKeyDownFunction() {},
+
+    handleKeyDown(e: KeyboardEvent) {
+      if (!e.key) return;
+      if (e.key.toLowerCase() == 'f' && !this.preventKeyDown && !e.ctrlKey && !e.altKey) this.onKeyDownFunction();
+    },
+  },
+});

src/mixins/modalTrainMixin.ts

@@ -1,30 +1,31 @@
-import { defineComponent } from 'vue';
-import { useStore } from '../store/store';
-
-export default defineComponent({
-  setup() {
-    return {
-      store: useStore(),
-    };
-  },
-
-  mounted() {
-    console.log('Mixin mounted');
-  },
-
-  computed: {
-    chosenTrain() {
-      return this.store.trainList.find((train) => train.trainId == this.store.chosenModalTrainId);
-    },
-  },
-
-  methods: {
-    selectModalTrain(trainId: string) {
-      this.store.chosenModalTrainId = trainId;
-    },
-
-    closeModal() {
-      this.store.chosenModalTrainId = undefined;
-    },
-  },
-});
+import { defineComponent } from 'vue';
+import { useStore } from '../store/store';
+
+export default defineComponent({
+  setup() {
+    return {
+      store: useStore(),
+    };
+  },
+
+  computed: {
+    chosenTrain() {
+      return this.store.trainList.find((train) => train.trainId == this.store.chosenModalTrainId);
+    },
+  },
+
+  methods: {
+    selectModalTrain(trainId: string) {
+      this.store.chosenModalTrainId = trainId;
+      document.body.classList.add('no-scroll');
+    },
+
+    closeModal() {
+      this.store.chosenModalTrainId = undefined;
+
+      setTimeout(() => {
+        document.body.classList.remove('no-scroll');
+      }, 150);
+    },
+  },
+});

src/mixins/returnBtnMixin.ts

@@ -1,34 +1,34 @@
-import { defineComponent, h } from 'vue';
-import imageMixin from './imageMixin';
-
-export default defineComponent({
-  mixins: [imageMixin],
-
-  data() {
-    return {
-      icons: {
-        arrow: this.getIcon('arrow-asc'),
-      },
-
-      showReturnButton: false,
-    };
-  },
-
-  methods: {
-    scrollToTop() {
-      window.scrollTo({ top: 0 });
-    },
-
-    handleScroll() {
-      this.showReturnButton = window.scrollY > window.innerHeight * 0.35;
-    },
-  },
-
-  activated() {
-    window.addEventListener('scroll', this.handleScroll);
-  },
-
-  deactivated() {
-    window.removeEventListener('scroll', this.handleScroll);
-  },
-});
+import { defineComponent, h } from 'vue';
+import imageMixin from './imageMixin';
+
+export default defineComponent({
+  mixins: [imageMixin],
+
+  data() {
+    return {
+      icons: {
+        arrow: this.getIcon('arrow-asc'),
+      },
+
+      showReturnButton: false,
+    };
+  },
+
+  methods: {
+    scrollToTop() {
+      window.scrollTo({ top: 0 });
+    },
+
+    handleScroll() {
+      this.showReturnButton = window.scrollY > window.innerHeight * 0.35;
+    },
+  },
+
+  activated() {
+    window.addEventListener('wheel', this.handleScroll);
+  },
+
+  deactivated() {
+    window.removeEventListener('wheel', this.handleScroll);
+  },
+});

src/router/index.ts

@@ -12,13 +12,12 @@ const routes: Array<RouteRecordRaw> = [
     path: '/trains',
     name: 'TrainsView',
     component: () => import('../views/TrainsView.vue'),
-    props: (route) => ({ train: route.query.train, driver: route.query.driver }),
+    props: (route) => ({ train: route.query.train, driver: route.query.driver, trainId: route.query.trainId }),
   },
   {
     path: '/scenery',
     name: 'SceneryView',
     component: () => import('../views/SceneryView.vue'),
-    props: true,
   },
   {
     path: '/journal',
@@ -59,7 +58,7 @@ const router = createRouter({
   scrollBehavior(to, from) {
     if (to.name == 'SceneryView' && from.name) return { el: `.app_main` };
 
-    if (from.name == 'SceneryView' && to.name == 'StationsView') return { el: `.last-selected`, top: 20 };
+    // if (from.name == 'SceneryView' && to.name == 'StationsView') return { el: `.last-selected`, top: 20 };
   },
   history: createWebHistory(),
   routes,

src/scripts/enums/DataStatus.ts

@@ -1,4 +1,4 @@
-export const enum DataStatus {
+export enum DataStatus {
   Initialized = -1,
   Loading = 0,
   Error = 1,

src/scripts/interfaces/Train.ts

@@ -19,9 +19,10 @@ export default interface Train {
   online: boolean;
   lastSeen: number;
   region: string;
-
   cars: string[];
 
+  isTimeout: boolean;
+
   timetableData?: {
     timetableId: number;
     category: string;

src/scripts/interfaces/api/DispatchersAPIData.ts

@@ -1,12 +1,14 @@
-export interface DispatcherHistory {
-  currentDuration: number;
-  dispatcherId: number;
-  dispatcherName: string;
-  isOnline: boolean;
-  lastOnlineTimestamp: number;
-  region: string;
-  stationHash: string;
-  stationName: string;
-  timestampFrom: number;
-  timestampTo?: number;
+export interface DispatcherHistory {
+  id: string;
+  
+  currentDuration: number;
+  dispatcherId: number;
+  dispatcherName: string;
+  isOnline: boolean;
+  lastOnlineTimestamp: number;
+  region: string;
+  stationHash: string;
+  stationName: string;
+  timestampFrom: number;
+  timestampTo?: number;
 }

src/scripts/interfaces/api/TimetablesAPIData.ts

@@ -1,35 +1,44 @@
-export interface TimetableHistory {
-  timetableId: number;
-  trainNo: number;
-  trainCategoryCode: string;
-  driverId: number;
-  driverName: string;
-  route: string;
-  twr: number;
-  skr: number;
-  sceneriesString: string;
-
-  routeDistance: number;
-  currentDistance: number;
-
-  confirmedStopsCount: number;
-  allStopsCount: number;
-
-  beginDate: string;
-  endDate: string;
-
-  scheduledBeginDate: string;
-  scheduledEndDate: string;
-
-  terminated: boolean;
-  fulfilled: boolean;
-
-  authorName?: string;
-  authorId?: number;
-}
-
-export interface SceneryTimetableHistory {
-  sceneryTimetables: TimetableHistory[];
-  totalCount: number;
-  sceneryName: string;
-}
+export interface TimetableHistory {
+  timetableId: number;
+  trainNo: number;
+  trainCategoryCode: string;
+  driverId: number;
+  driverName: string;
+  route: string;
+  twr: number;
+  skr: number;
+  sceneriesString: string;
+
+  routeDistance: number;
+  currentDistance: number;
+
+  confirmedStopsCount: number;
+  allStopsCount: number;
+
+  beginDate: string;
+  endDate: string;
+
+  scheduledBeginDate: string;
+  scheduledEndDate: string;
+
+  terminated: boolean;
+  fulfilled: boolean;
+
+  authorName?: string;
+  authorId?: number;
+
+  stockString?: string;
+  stockMass?: number;
+  stockLength?: number;
+  maxSpeed?: number;
+
+  hashesString?: string;
+  currentSceneryName?: string;
+  currentSceneryHash?: string;
+}
+
+export interface SceneryTimetableHistory {
+  sceneryTimetables: TimetableHistory[];
+  totalCount: number;
+  sceneryName: string;
+}

src/scripts/interfaces/api/TrainAPIData.ts

@@ -21,6 +21,7 @@ export default interface TrainAPIData {
   lastSeen: number;
 
   region: string;
+  isTimeout: boolean;
 
   timetable?: {
     timetableId: number;

src/scripts/managers/storageManager.ts

@@ -23,6 +23,13 @@ export default class StorageManager {
     window.localStorage.setItem(key, val);
   }
 
+  static setValue(key: string, val: any) {
+    if (typeof val == 'boolean') this.setBooleanValue(key, val);
+    else if (typeof val == 'number') this.setNumericValue(key, val);
+    else if (typeof val == 'string') this.setStringValue(key, val);
+    else this.setStringValue(key, val);
+  }
+
   static removeValue(key: string) {
     window.localStorage.removeItem(key);
   }

src/scripts/managers/trainFilterManager.ts

@@ -1,115 +1,115 @@
-import { TrainFilter } from "vue";
-import { TrainFilterType } from "../enums/TrainFilterType";
-import Train from "../interfaces/Train";
-import TrainStop from "../interfaces/TrainStop";
-
-function confirmedPercentage(stops: TrainStop[] | undefined) {
-    if (!stops) return -1;
-
-    return Number(((stops.filter((stop) => stop.confirmed).length / stops.length) * 100).toFixed(0));
-};
-
-function currentDelay(stops: TrainStop[] | undefined) {
-    if (!stops) return -Infinity;
-
-    const delay =
-        stops.find((stop, i) => (i == 0 && !stop.confirmed) || (i > 0 && stops[i - 1].confirmed && !stop.confirmed))
-            ?.departureDelay || 0;
-
-    return delay;
-};
-
-function filterTrainList(trainList: Train[], searchedTrain: string, searchedDriver: string, filters: TrainFilter[]) {
-    return trainList.filter(
-        (train) => {
-            const isFiltered = filters.every(f => {
-                if (f.isActive) return true;
-                
-                if (!train.timetableData) return filters.find(filter => filter.id == TrainFilterType.noTimetable)!.isActive;
-
-                switch (f.id) {
-                    case TrainFilterType.comments:
-                        return !train.timetableData.followingStops.some(stop => stop.comments);
-                    
-                    case TrainFilterType.twr:
-                        return !train.timetableData.TWR;
-                    
-                    case TrainFilterType.skr:
-                        return !train.timetableData.SKR;
-                    
-                    case TrainFilterType.passenger:
-                        return !/^[AMRE]\D{2}$/.test(train.timetableData.category);
-                    
-                    case TrainFilterType.freight:
-                        return !train.timetableData.category.startsWith('T');
-                    
-                    case TrainFilterType.other:
-                        return !/^[PXZL]\D{2}$/.test(train.timetableData.category);
-                    
-                    default:
-                        return true;
-                }
-            })
-
-            return (searchedTrain.length > 0 ? train.trainNo.toString().startsWith(searchedTrain) : true) &&
-                (searchedDriver.length > 0 ? train.driverName.toLowerCase().startsWith(searchedDriver.toLowerCase()) : true) && isFiltered
-        }
-
-    );
-}
-
-function sortTrainList(trainList: Train[], sorterActive: { id: string; dir: number }) {
-    return trainList.sort((a: Train, b: Train) => {
-        switch (sorterActive.id) {
-            case 'mass':
-                if (a.mass > b.mass) return sorterActive.dir;
-                return -sorterActive.dir;
-
-            case 'distance':
-                if ((a.timetableData?.routeDistance || -1) > (b.timetableData?.routeDistance || -1)) return sorterActive.dir;
-
-                return -sorterActive.dir;
-
-            case 'progress':
-                if (confirmedPercentage(a.timetableData?.followingStops) > confirmedPercentage(b.timetableData?.followingStops))
-                    return sorterActive.dir;
-
-                return -sorterActive.dir;
-
-            case 'delay':
-                if (currentDelay(a.timetableData?.followingStops) > currentDelay(b.timetableData?.followingStops))
-                    return sorterActive.dir;
-
-                return -sorterActive.dir;
-
-            case 'speed':
-                if (a.speed > b.speed) return sorterActive.dir;
-                return -sorterActive.dir;
-
-            case 'timetable':
-                if (a.trainNo > b.trainNo) return sorterActive.dir;
-                return -sorterActive.dir;
-
-            case 'length':
-                if (a.length > b.length) return sorterActive.dir;
-                return -sorterActive.dir;
-
-            default:
-                break;
-        }
-
-        return 0;
-    });
-}
-
-export function filteredTrainList(
-    trainList: Train[],
-    searchedTrain: string,
-    searchedDriver: string,
-    sorterActive: { id: string; dir: number },
-    filters: TrainFilter[]
-) {
-
-    const filtered = filterTrainList(trainList, searchedTrain, searchedDriver, filters);        
-    return [...sortTrainList(filtered, sorterActive)];
+import { TrainFilter } from "../../types/Trains/TrainOptionsTypes";
+import { TrainFilterType } from "../enums/TrainFilterType";
+import Train from "../interfaces/Train";
+import TrainStop from "../interfaces/TrainStop";
+
+function confirmedPercentage(stops: TrainStop[] | undefined) {
+    if (!stops) return -1;
+
+    return Number(((stops.filter((stop) => stop.confirmed).length / stops.length) * 100).toFixed(0));
+};
+
+function currentDelay(stops: TrainStop[] | undefined) {
+    if (!stops) return -Infinity;
+
+    const delay =
+        stops.find((stop, i) => (i == 0 && !stop.confirmed) || (i > 0 && stops[i - 1].confirmed && !stop.confirmed))
+            ?.departureDelay || 0;
+
+    return delay;
+};
+
+function filterTrainList(trainList: Train[], searchedTrain: string, searchedDriver: string, filters: TrainFilter[]) {
+    return trainList.filter(
+        (train) => {
+            const isFiltered = filters.every(f => {
+                if (f.isActive) return true;
+                
+                if (!train.timetableData) return filters.find(filter => filter.id == TrainFilterType.noTimetable)!.isActive;
+
+                switch (f.id) {
+                    case TrainFilterType.comments:
+                        return !train.timetableData.followingStops.some(stop => stop.comments);
+                    
+                    case TrainFilterType.twr:
+                        return !train.timetableData.TWR;
+                    
+                    case TrainFilterType.skr:
+                        return !train.timetableData.SKR;
+                    
+                    case TrainFilterType.passenger:
+                        return !/^[AMRE]\D{2}$/.test(train.timetableData.category);
+                    
+                    case TrainFilterType.freight:
+                        return !train.timetableData.category.startsWith('T');
+                    
+                    case TrainFilterType.other:
+                        return !/^[PXZL]\D{2}$/.test(train.timetableData.category);
+                    
+                    default:
+                        return true;
+                }
+            })
+
+            return (searchedTrain.length > 0 ? train.trainNo.toString().startsWith(searchedTrain) : true) &&
+                (searchedDriver.length > 0 ? train.driverName.toLowerCase().startsWith(searchedDriver.toLowerCase()) : true) && isFiltered
+        }
+
+    );
+}
+
+function sortTrainList(trainList: Train[], sorterActive: { id: string; dir: number }) {
+    return trainList.sort((a: Train, b: Train) => {
+        switch (sorterActive.id) {
+            case 'mass':
+                if (a.mass > b.mass) return sorterActive.dir;
+                return -sorterActive.dir;
+
+            case 'distance':
+                if ((a.timetableData?.routeDistance || -1) > (b.timetableData?.routeDistance || -1)) return sorterActive.dir;
+
+                return -sorterActive.dir;
+
+            case 'progress':
+                if (confirmedPercentage(a.timetableData?.followingStops) > confirmedPercentage(b.timetableData?.followingStops))
+                    return sorterActive.dir;
+
+                return -sorterActive.dir;
+
+            case 'delay':
+                if (currentDelay(a.timetableData?.followingStops) > currentDelay(b.timetableData?.followingStops))
+                    return sorterActive.dir;
+
+                return -sorterActive.dir;
+
+            case 'speed':
+                if (a.speed > b.speed) return sorterActive.dir;
+                return -sorterActive.dir;
+
+            case 'timetable':
+                if (a.trainNo > b.trainNo) return sorterActive.dir;
+                return -sorterActive.dir;
+
+            case 'length':
+                if (a.length > b.length) return sorterActive.dir;
+                return -sorterActive.dir;
+
+            default:
+                break;
+        }
+
+        return 0;
+    });
+}
+
+export function filteredTrainList(
+    trainList: Train[],
+    searchedTrain: string,
+    searchedDriver: string,
+    sorterActive: { id: string; dir: number },
+    filters: TrainFilter[]
+) {
+
+    const filtered = filterTrainList(trainList, searchedTrain, searchedDriver, filters);        
+    return [...sortTrainList(filtered, sorterActive)];
 };

src/store/stationFiltersStore.ts

@@ -1,292 +1,305 @@
-import Filter from '../interfaces/Filter';
-import Station from '../interfaces/Station';
-import StorageManager from './storageManager';
-
-const sortStations = (a: Station, b: Station, sorter: { index: number; dir: number }) => {
-  switch (sorter.index) {
-    case 1:
-      if ((a.generalInfo?.reqLevel || 0) > (b.generalInfo?.reqLevel || 0)) return sorter.dir;
-      if ((a.generalInfo?.reqLevel || 0) < (b.generalInfo?.reqLevel || 0)) return -sorter.dir;
-      break;
-
-    case 2:
-      if ((a.onlineInfo?.statusTimestamp || 0) > (b.onlineInfo?.statusTimestamp || 0)) return sorter.dir;
-      if ((a.onlineInfo?.statusTimestamp || 0) < (b.onlineInfo?.statusTimestamp || 0)) return -sorter.dir;
-      break;
-
-    case 3:
-      if ((a.onlineInfo?.dispatcherName.toLowerCase() || '') > (b.onlineInfo?.dispatcherName.toLowerCase() || ''))
-        return sorter.dir;
-      if ((a.onlineInfo?.dispatcherName.toLowerCase() || '') < (b.onlineInfo?.dispatcherName.toLowerCase() || ''))
-        return -sorter.dir;
-      break;
-
-    case 4:
-      if ((a.onlineInfo?.dispatcherExp || 0) > (b.onlineInfo?.dispatcherExp || 0)) return sorter.dir;
-      if ((a.onlineInfo?.dispatcherExp || 0) < (b.onlineInfo?.dispatcherExp || 0)) return -sorter.dir;
-      break;
-
-    case 7:
-      if ((a.onlineInfo?.currentUsers || 0) > (b.onlineInfo?.currentUsers || 0)) return sorter.dir;
-      if ((a.onlineInfo?.currentUsers || 0) < (b.onlineInfo?.currentUsers || 0)) return -sorter.dir;
-
-      if ((a.onlineInfo?.maxUsers || 0) > (b.onlineInfo?.maxUsers || 0)) return sorter.dir;
-      if ((a.onlineInfo?.maxUsers || 0) < (b.onlineInfo?.maxUsers || 0)) return -sorter.dir;
-      break;
-
-    case 8:
-      if ((a.onlineInfo?.spawns.length || 0) > (b.onlineInfo?.spawns.length || 0)) return sorter.dir;
-      if ((a.onlineInfo?.spawns.length || 0) < (b.onlineInfo?.spawns.length || 0)) return -sorter.dir;
-
-      break;
-
-    case 9:
-      if ((a.onlineInfo?.scheduledTrains?.length || 0) > (b.onlineInfo?.scheduledTrains?.length || 0))
-        return sorter.dir;
-      if ((a.onlineInfo?.scheduledTrains?.length || 0) < (b.onlineInfo?.scheduledTrains?.length || 0))
-        return -sorter.dir;
-
-    default:
-      break;
-  }
-
-  return sorter.dir == 1 ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
-};
-
-const filterStations = (station: Station, filters: Filter) => {
-  const returnMode = false;
-
-  if ((station.generalInfo?.availability == 'nonPublic' || !station.generalInfo) && filters['nonPublic'])
-    return returnMode;
-
-  if (station.onlineInfo?.statusID == 'ending' && filters['ending']) return returnMode;
-
-  if (
-    station.onlineInfo &&
-    station.onlineInfo.statusTimestamp > 0 &&
-    filters['onlineFromHours'] < 8 &&
-    station.onlineInfo.statusTimestamp <= Date.now() + filters['onlineFromHours'] * 3600000
-  )
-    return returnMode;
-
-  if (filters['onlineFromHours'] > 0 && station.onlineInfo && station.onlineInfo.statusTimestamp <= 0)
-    return returnMode;
-  if (filters['onlineFromHours'] == 8 && station.onlineInfo?.statusID != 'no-limit') return returnMode;
-
-  if (station.onlineInfo?.statusID == 'ending' && filters['endingStatus']) return returnMode;
-  if (
-    (station.onlineInfo?.statusID == 'not-signed' || station.onlineInfo?.statusID == 'unavailable') &&
-    filters['unavailableStatus']
-  )
-    return returnMode;
-  if (station.onlineInfo?.statusID == 'brb' && filters['afkStatus']) return returnMode;
-  if (station.onlineInfo?.statusID == 'no-space' && filters['noSpaceStatus']) return returnMode;
-
-  if (station.onlineInfo && filters['occupied']) return returnMode;
-  if (!station.onlineInfo && filters['free']) return returnMode;
-  if (station.generalInfo?.availability == 'unavailable' && filters['unavailable'] && !station.onlineInfo)
-    return returnMode;
-
-  if (station.generalInfo) {
-    const routes = station.generalInfo.routes;
-    const availability = station.generalInfo.availability;
-
-    if (filters['abandoned'] && availability == 'abandoned') return returnMode;
-
-    if (availability == 'default' && filters['default']) return returnMode;
-    if (
-      availability != 'default' &&
-      filters['notDefault'] &&
-      !(availability == 'abandoned' || availability == 'unavailable')
-    )
-      return returnMode;
-
-    if (filters['real'] && station.generalInfo.lines != '') return returnMode;
-    if (
-      filters['fictional'] &&
-      station.generalInfo.lines == '' &&
-      availability != 'abandoned' &&
-      availability != 'unavailable'
-    )
-      return returnMode;
-
-    if (
-      station.generalInfo.reqLevel +
-        (availability == 'nonPublic' || availability == 'unavailable' || availability == 'abandoned' ? 1 : 0) <
-      filters['minLevel']
-    )
-      return returnMode;
-    if (
-      station.generalInfo.reqLevel +
-        (availability == 'nonPublic' || availability == 'unavailable' || availability == 'abandoned' ? 1 : 0) >
-      filters['maxLevel']
-    )
-      return returnMode;
-
-    if (
-      filters['no-1track'] &&
-      (routes.oneWayCatenaryRouteNames.length != 0 || routes.oneWayNoCatenaryRouteNames.length != 0)
-    )
-      return returnMode;
-    if (
-      filters['no-2track'] &&
-      (routes.twoWayCatenaryRouteNames.length != 0 || routes.twoWayNoCatenaryRouteNames.length != 0)
-    )
-      return returnMode;
-
-    if (routes.oneWayCatenaryRouteNames.length < filters['minOneWayCatenary']) return returnMode;
-    if (routes.oneWayNoCatenaryRouteNames.length < filters['minOneWay']) return returnMode;
-
-    if (routes.twoWayCatenaryRouteNames.length < filters['minTwoWayCatenary']) return returnMode;
-    if (routes.twoWayNoCatenaryRouteNames.length < filters['minTwoWay']) return returnMode;
-
-    if (filters[station.generalInfo.controlType]) return returnMode;
-    if (filters[station.generalInfo.signalType]) return returnMode;
-
-    if (
-      filters['SPK'] &&
-      (station.generalInfo.controlType === 'SPK' || station.generalInfo.controlType.includes('+SPK'))
-    )
-      return returnMode;
-    if (
-      filters['SCS'] &&
-      (station.generalInfo.controlType === 'SCS' || station.generalInfo.controlType.includes('+SCS'))
-    )
-      return returnMode;
-    if (
-      filters['SPE'] &&
-      (station.generalInfo.controlType === 'SPE' || station.generalInfo.controlType.includes('+SPE'))
-    )
-      return returnMode;
-    if (filters['SUP'] && station.generalInfo.SUP) return returnMode;
-
-    if (
-      filters['SCS'] &&
-      filters['SPK'] &&
-      (station.generalInfo.controlType.includes('SPK') || station.generalInfo.controlType.includes('SCS'))
-    )
-      return returnMode;
-
-    if (filters['mechaniczne'] && station.generalInfo.controlType.includes('mechaniczne')) return returnMode;
-
-    if (filters['ręczne'] && station.generalInfo.controlType.includes('ręczne')) return returnMode;
-
-    if (filters['SBL'] && routes.sblRouteNames.length > 0) return returnMode;
-
-    if (
-      filters['authors'].length > 3 &&
-      !station.generalInfo.authors?.map((a) => a.toLocaleLowerCase()).includes(filters['authors'].toLocaleLowerCase())
-    )
-      return returnMode;
-  }
-
-  return true;
-};
-
-export default class StationFilterManager {
-  private filterInitStates: Filter = {
-    default: false,
-    notDefault: false,
-    real: false,
-    fictional: false,
-    SPK: false,
-    SCS: false,
-    SPE: false,
-    SUP: false,
-    ręczne: false,
-    mechaniczne: false,
-    współczesna: false,
-    kształtowa: false,
-    historyczna: false,
-    mieszana: false,
-    SBL: false,
-    minLevel: 0,
-    maxLevel: 20,
-    minOneWayCatenary: 0,
-    minOneWay: 0,
-    minTwoWayCatenary: 0,
-    minTwoWay: 0,
-    'include-selected': false,
-    'no-1track': false,
-    'no-2track': false,
-    free: true,
-    occupied: false,
-    ending: false,
-    nonPublic: false,
-    unavailable: true,
-    abandoned: true,
-    afkStatus: false,
-    endingStatus: false,
-    noSpaceStatus: false,
-    unavailableStatus: false,
-    unsignedStatus: false,
-
-    authors: '',
-
-    onlineFromHours: 0,
-  };
-
-  private filters: Filter = { ...this.filterInitStates };
-
-  private sorter: { index: number; dir: number } = { index: 0, dir: 1 };
-
-  checkFilters() {
-    if (!StorageManager.isRegistered('options_saved')) return;
-
-    Object.keys(this.filterInitStates).forEach((filterKey) => {
-      if (StorageManager.isRegistered(filterKey)) return;
-
-      const filterType = typeof this.filterInitStates[filterKey];
-
-      if (filterType === 'boolean')
-        StorageManager.setBooleanValue(filterKey, !this.filterInitStates[filterKey] as boolean);
-
-      if (filterType === 'number')
-        StorageManager.setNumericValue(filterKey, this.filterInitStates[filterKey] as number);
-    });
-  }
-
-  getFilteredStationList(stationList: Station[], region: string): Station[] {
-    return stationList
-      .map((station) => {
-        if (station.onlineInfo && station.onlineInfo.region != region) {
-          delete station.onlineInfo;
-        }
-
-        return station;
-      })
-      .filter((station) => filterStations(station, this.filters))
-      .sort((a, b) => sortStations(a, b, this.sorter));
-  }
-
-  changeFilterValue(filter: { name: string; value: number }) {
-    this.filters[filter.name] = filter.value;
-
-    // if(filter.name == 'authors')
-  }
-
-  resetFilters() {
-    this.filters = { ...this.filterInitStates };
-  }
-
-  invertFilters() {
-    Object.keys(this.filters).forEach((prop) => {
-      if (typeof this.filters[prop] !== 'boolean') return;
-
-      this.filters[prop] = !this.filters[prop];
-    });
-  }
-
-  changeSorter(index: number) {
-    if (index > 4 && index < 7) return;
-
-    if (index == this.sorter.index) this.sorter.dir = -1 * this.sorter.dir;
-    else this.sorter.dir = 1;
-
-    this.sorter.index = index;
-  }
-
-  getSorter() {
-    return this.sorter;
-  }
-}
+import { defineStore } from 'pinia';
+import inputData from '../data/options.json';
+import Filter from '../scripts/interfaces/Filter';
+import Station from '../scripts/interfaces/Station';
+import StorageManager from '../scripts/managers/storageManager';
+
+const sortStations = (a: Station, b: Station, sorter: { index: number; dir: number }) => {
+  switch (sorter.index) {
+    case 0:
+      return sorter.dir == 1 ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
+
+    case 1:
+      if ((a.generalInfo?.reqLevel || 0) > (b.generalInfo?.reqLevel || 0)) return sorter.dir;
+      if ((a.generalInfo?.reqLevel || 0) < (b.generalInfo?.reqLevel || 0)) return -sorter.dir;
+      break;
+
+    case 2:
+      if ((a.onlineInfo?.statusTimestamp || 0) > (b.onlineInfo?.statusTimestamp || 0)) return sorter.dir;
+      if ((a.onlineInfo?.statusTimestamp || 0) < (b.onlineInfo?.statusTimestamp || 0)) return -sorter.dir;
+      break;
+
+    case 3:
+      if ((a.onlineInfo?.dispatcherName.toLowerCase() || '') > (b.onlineInfo?.dispatcherName.toLowerCase() || ''))
+        return sorter.dir;
+      if ((a.onlineInfo?.dispatcherName.toLowerCase() || '') < (b.onlineInfo?.dispatcherName.toLowerCase() || ''))
+        return -sorter.dir;
+      break;
+
+    case 4:
+      if ((a.onlineInfo?.dispatcherExp || 0) > (b.onlineInfo?.dispatcherExp || 0)) return sorter.dir;
+      if ((a.onlineInfo?.dispatcherExp || 0) < (b.onlineInfo?.dispatcherExp || 0)) return -sorter.dir;
+      break;
+
+    case 7:
+      if ((a.onlineInfo?.currentUsers || 0) > (b.onlineInfo?.currentUsers || 0)) return sorter.dir;
+      if ((a.onlineInfo?.currentUsers || 0) < (b.onlineInfo?.currentUsers || 0)) return -sorter.dir;
+
+      if ((a.onlineInfo?.maxUsers || 0) > (b.onlineInfo?.maxUsers || 0)) return sorter.dir;
+      if ((a.onlineInfo?.maxUsers || 0) < (b.onlineInfo?.maxUsers || 0)) return -sorter.dir;
+      break;
+
+    case 8:
+      if ((a.onlineInfo?.spawns.length || 0) > (b.onlineInfo?.spawns.length || 0)) return sorter.dir;
+      if ((a.onlineInfo?.spawns.length || 0) < (b.onlineInfo?.spawns.length || 0)) return -sorter.dir;
+
+      break;
+
+    case 9:
+      if ((a.onlineInfo?.scheduledTrains?.length || 0) > (b.onlineInfo?.scheduledTrains?.length || 0))
+        return sorter.dir;
+      if ((a.onlineInfo?.scheduledTrains?.length || 0) < (b.onlineInfo?.scheduledTrains?.length || 0))
+        return -sorter.dir;
+
+    default:
+      break;
+  }
+
+  return a.name.localeCompare(b.name);
+};
+
+const filterStations = (station: Station, filters: Filter) => {
+  const returnMode = false;
+
+  if ((station.generalInfo?.availability == 'nonPublic' || !station.generalInfo) && filters['nonPublic'])
+    return returnMode;
+
+  if (station.onlineInfo?.statusID == 'ending' && filters['ending']) return returnMode;
+
+  if (
+    station.onlineInfo &&
+    station.onlineInfo.statusTimestamp > 0 &&
+    filters['onlineFromHours'] < 8 &&
+    station.onlineInfo.statusTimestamp <= Date.now() + filters['onlineFromHours'] * 3600000
+  )
+    return returnMode;
+
+  if (filters['onlineFromHours'] > 0 && station.onlineInfo && station.onlineInfo.statusTimestamp <= 0)
+    return returnMode;
+  if (filters['onlineFromHours'] == 8 && station.onlineInfo?.statusID != 'no-limit') return returnMode;
+
+  if (station.onlineInfo?.statusID == 'ending' && filters['endingStatus']) return returnMode;
+  if (
+    (station.onlineInfo?.statusID == 'not-signed' || station.onlineInfo?.statusID == 'unavailable') &&
+    filters['unavailableStatus']
+  )
+    return returnMode;
+  if (station.onlineInfo?.statusID == 'brb' && filters['afkStatus']) return returnMode;
+  if (station.onlineInfo?.statusID == 'no-space' && filters['noSpaceStatus']) return returnMode;
+
+  if (station.onlineInfo && filters['occupied']) return returnMode;
+  if (!station.onlineInfo && filters['free']) return returnMode;
+  if (station.generalInfo?.availability == 'unavailable' && filters['unavailable'] && !station.onlineInfo)
+    return returnMode;
+
+  if (station.generalInfo) {
+    const routes = station.generalInfo.routes;
+    const availability = station.generalInfo.availability;
+
+    if (filters['abandoned'] && availability == 'abandoned' && !station.onlineInfo) return returnMode;
+
+    if (availability == 'default' && filters['default']) return returnMode;
+    if (
+      availability != 'default' &&
+      filters['notDefault'] &&
+      !(availability == 'abandoned' || availability == 'unavailable')
+    )
+      return returnMode;
+
+    if (filters['real'] && station.generalInfo.lines != '') return returnMode;
+    if (
+      filters['fictional'] &&
+      station.generalInfo.lines == '' &&
+      availability != 'abandoned' &&
+      availability != 'unavailable'
+    )
+      return returnMode;
+
+    if (
+      station.generalInfo.reqLevel +
+        (availability == 'nonPublic' || availability == 'unavailable' || availability == 'abandoned' ? 1 : 0) <
+      filters['minLevel']
+    )
+      return returnMode;
+    if (
+      station.generalInfo.reqLevel +
+        (availability == 'nonPublic' || availability == 'unavailable' || availability == 'abandoned' ? 1 : 0) >
+      filters['maxLevel']
+    )
+      return returnMode;
+
+    if (
+      filters['no-1track'] &&
+      (routes.oneWayCatenaryRouteNames.length != 0 || routes.oneWayNoCatenaryRouteNames.length != 0)
+    )
+      return returnMode;
+    if (
+      filters['no-2track'] &&
+      (routes.twoWayCatenaryRouteNames.length != 0 || routes.twoWayNoCatenaryRouteNames.length != 0)
+    )
+      return returnMode;
+
+    if (routes.oneWayCatenaryRouteNames.length < filters['minOneWayCatenary']) return returnMode;
+    if (routes.oneWayNoCatenaryRouteNames.length < filters['minOneWay']) return returnMode;
+
+    if (routes.twoWayCatenaryRouteNames.length < filters['minTwoWayCatenary']) return returnMode;
+    if (routes.twoWayNoCatenaryRouteNames.length < filters['minTwoWay']) return returnMode;
+
+    if (filters[station.generalInfo.controlType]) return returnMode;
+    if (filters[station.generalInfo.signalType]) return returnMode;
+
+    if (
+      filters['SPK'] &&
+      (station.generalInfo.controlType === 'SPK' || station.generalInfo.controlType.includes('+SPK'))
+    )
+      return returnMode;
+    if (
+      filters['SCS'] &&
+      (station.generalInfo.controlType === 'SCS' || station.generalInfo.controlType.includes('+SCS'))
+    )
+      return returnMode;
+    if (
+      filters['SPE'] &&
+      (station.generalInfo.controlType === 'SPE' || station.generalInfo.controlType.includes('+SPE'))
+    )
+      return returnMode;
+    if (filters['SUP'] && station.generalInfo.SUP) return returnMode;
+
+    if (
+      filters['SCS'] &&
+      filters['SPK'] &&
+      (station.generalInfo.controlType.includes('SPK') || station.generalInfo.controlType.includes('SCS'))
+    )
+      return returnMode;
+
+    if (filters['mechaniczne'] && station.generalInfo.controlType.includes('mechaniczne')) return returnMode;
+
+    if (filters['ręczne'] && station.generalInfo.controlType.includes('ręczne')) return returnMode;
+
+    if (filters['SBL'] && routes.sblRouteNames.length > 0) return returnMode;
+
+    if (
+      filters['authors'].length > 3 &&
+      !station.generalInfo.authors?.map((a) => a.toLocaleLowerCase()).includes(filters['authors'].toLocaleLowerCase())
+    )
+      return returnMode;
+  }
+
+  return true;
+};
+
+const filterInitStates: Filter = {
+  default: false,
+  notDefault: false,
+  real: false,
+  fictional: false,
+  SPK: false,
+  SCS: false,
+  SPE: false,
+  SUP: false,
+  ręczne: false,
+  mechaniczne: false,
+  współczesna: false,
+  kształtowa: false,
+  historyczna: false,
+  mieszana: false,
+  SBL: false,
+  minLevel: 0,
+  maxLevel: 20,
+  minOneWayCatenary: 0,
+  minOneWay: 0,
+  minTwoWayCatenary: 0,
+  minTwoWay: 0,
+  'include-selected': false,
+  'no-1track': false,
+  'no-2track': false,
+  free: true,
+  occupied: false,
+  ending: false,
+  nonPublic: false,
+  unavailable: true,
+  abandoned: true,
+  afkStatus: false,
+  endingStatus: false,
+  noSpaceStatus: false,
+  unavailableStatus: false,
+  unsignedStatus: false,
+
+  authors: '',
+
+  onlineFromHours: 0,
+};
+
+export const useStationFiltersStore = defineStore('stationFiltersStore', {
+  state() {
+    return {
+      inputs: inputData,
+      filters: { ...filterInitStates },
+      sorterActive: { index: 0, dir: 1 },
+    };
+  },
+
+  actions: {
+    getFilteredStationList(stationList: Station[], region: string): Station[] {
+      return stationList
+        .map((station) => {
+          if (station.onlineInfo && station.onlineInfo.region != region) {
+            delete station.onlineInfo;
+          }
+
+          return station;
+        })
+        .filter((station) => filterStations(station, this.filters))
+        .sort((a, b) => sortStations(a, b, this.sorterActive));
+    },
+
+    setupFilters() {
+      if (!StorageManager.isRegistered('options_saved')) return;
+
+      this.inputs.options.forEach((option) => {
+        if (!StorageManager.isRegistered(option.id)) return;
+        const savedValue = StorageManager.getBooleanValue(option.id);
+
+        this.filters[option.id] = savedValue;
+        option.value = !savedValue;
+      });
+
+      this.inputs.sliders.forEach((slider) => {
+        if (!StorageManager.isRegistered(slider.name)) return;
+        const savedValue = StorageManager.getNumericValue(slider.name);
+
+        this.filters[slider.name] = savedValue;
+        slider.value = savedValue;
+      });
+    },
+
+    changeFilterValue(filter: { name: string; value: any }) {
+      this.filters[filter.name] = filter.value;
+
+      if (StorageManager.isRegistered('options_saved')) StorageManager.setValue(filter.name, filter.value);
+    },
+
+    resetFilters() {
+      this.filters = { ...filterInitStates };
+
+      this.inputs.options.forEach((option) => {
+        option.value = option.defaultValue;
+        StorageManager.setBooleanValue(option.name, !option.defaultValue);
+      });
+
+      this.inputs.sliders.forEach((slider) => {
+        slider.value = slider.defaultValue;
+        StorageManager.setNumericValue(slider.name, slider.defaultValue);
+      });
+    },
+
+    changeSorter(index: number) {
+      if (index > 4 && index < 7) return;
+
+      if (index == this.sorterActive.index) this.sorterActive.dir = -1 * this.sorterActive.dir;
+      else this.sorterActive.dir = 1;
+
+      this.sorterActive.index = index;
+    },
+  },
+});

src/store/store.ts

@@ -1,398 +1,401 @@
-import axios from 'axios';
-import { defineStore } from 'pinia';
-import { io } from 'socket.io-client';
-import { DataStatus } from '../scripts/enums/DataStatus';
-import StationAPIData from '../scripts/interfaces/api/StationAPIData';
-import ScheduledTrain from '../scripts/interfaces/ScheduledTrain';
-import Station from '../scripts/interfaces/Station';
-import StationRoutes from '../scripts/interfaces/StationRoutes';
-import Train from '../scripts/interfaces/Train';
-import { URLs } from '../scripts/utils/apiURLs';
-import {
-  getLocoURL,
-  getStatusTimestamp,
-  getStatusID,
-  getScheduledTrain,
-  parseSpawns,
-} from '../scripts/utils/storeUtils';
-import { APIData, StationJSONData, StoreState } from './storeTypes';
-
-export const useStore = defineStore('store', {
-  state: () =>
-    ({
-      apiData: {} as unknown,
-
-      stationList: [],
-      trainList: [],
-
-      sceneryData: [],
-      lastDispatcherStatuses: [],
-
-      region: { id: 'eu', value: 'PL1' },
-
-      trainCount: 0,
-      stationCount: 0,
-
-      webSocket: undefined,
-
-      dispatcherStatsName: '',
-      dispatcherStatsData: undefined,
-
-      driverStatsName: '',
-      driverStatsData: undefined,
-
-      chosenModalTrainId: undefined,
-
-      dataStatuses: {
-        connection: DataStatus.Loading,
-        sceneries: DataStatus.Loading,
-        timetables: DataStatus.Loading,
-        dispatchers: DataStatus.Loading,
-        trains: DataStatus.Loading,
-      },
-
-      listenerLaunched: false,
-    } as StoreState),
-
-  actions: {
-    setTrainsOnlineData() {
-      const { trains } = this.apiData;
-
-      if (!trains) return [];
-
-      this.trainList = trains
-        .filter(
-          (train) =>
-            train.region === this.region.id && (train.online || train.timetable || train.lastSeen > Date.now() - 180000)
-        )
-        .map((train) => {
-          const stock = train.stockString.split(';');
-          const locoType = stock ? stock[0] : train.stockString;
-
-          const timetable = train.timetable;
-
-          return {
-            trainId: train.driverName + train.trainNo.toString(),
-
-            trainNo: train.trainNo,
-            mass: train.mass,
-            length: train.length,
-            speed: train.speed,
-            region: train.region,
-
-            distance: train.distance,
-            signal: train.signal,
-            online: train.online,
-            driverId: train.driverId,
-            driverName: train.driverName,
-            currentStationName: train.currentStationName,
-            currentStationHash: train.currentStationHash,
-            connectedTrack: train.connectedTrack,
-            locoType,
-            locoURL: getLocoURL(locoType),
-            cars: stock.slice(1),
-
-            lastSeen: train.lastSeen,
-
-            timetableData: timetable
-              ? {
-                  timetableId: timetable.timetableId,
-                  SKR: timetable.SKR,
-                  TWR: timetable.TWR,
-                  route: timetable.route,
-                  category: timetable.category,
-                  followingStops: timetable.stopList,
-                  routeDistance: timetable.stopList[timetable.stopList.length - 1].stopDistance,
-                  sceneries: timetable.sceneries,
-                }
-              : undefined,
-          };
-        }) as Train[];
-    },
-
-    getDispatcherStatus(onlineStationData: StationAPIData) {
-      const { dispatchers } = this.apiData;
-
-      const prevDispatcherStatus = this.lastDispatcherStatuses.find(
-        (dispatcher) => dispatcher.hash === onlineStationData.stationHash
-      );
-
-      const stationStatus = !dispatchers
-        ? undefined
-        : dispatchers.find(
-            (status: string[]) => status[0] == onlineStationData.stationHash && status[1] == this.region.id
-          ) || -1;
-
-      const statusTimestamp =
-        prevDispatcherStatus && !dispatchers ? prevDispatcherStatus.statusTimestamp : getStatusTimestamp(stationStatus);
-      const statusID =
-        prevDispatcherStatus && !dispatchers ? prevDispatcherStatus.statusID : getStatusID(stationStatus);
-
-      return {
-        hash: onlineStationData.stationHash,
-        statusID,
-        statusTimestamp,
-      };
-    },
-
-    getScheduledTrains(stationGeneralInfo: Station['generalInfo'], stationAPIData: StationAPIData) {
-      const stationName = stationAPIData.stationName.toLowerCase();
-
-      stationGeneralInfo?.checkpoints.forEach((cp) => (cp.scheduledTrains.length = 0));
-
-      return this.trainList.reduce((acc: ScheduledTrain[], train) => {
-        if (!train.timetableData) return acc;
-
-        const timetable = train.timetableData;
-        if (!timetable.sceneries.includes(stationAPIData.stationHash)) return acc;
-
-        const stopInfoIndex = timetable.followingStops.findIndex((stop) => {
-          const stopName = stop.stopNameRAW.toLowerCase();
-
-          if (stationName === stopName) return true;
-          if (stopName.includes(stationName) && !stop.stopName.includes('po.') && !stop.stopName.includes('podg.'))
-            return true;
-
-          if (stationName.includes(stopName) && !stop.stopName.includes('po.') && !stop.stopName.includes('podg.'))
-            return true;
-
-          if (
-            stopName.includes('podg.') &&
-            stopName.split(', podg.')[0] &&
-            stationName.includes(stopName.split(', podg.')[0])
-          )
-            return true;
-
-          if (
-            stationGeneralInfo &&
-            stationGeneralInfo.checkpoints &&
-            stationGeneralInfo.checkpoints.length > 0 &&
-            stationGeneralInfo.checkpoints.some((cp) =>
-              cp.checkpointName.toLowerCase().includes(stop.stopNameRAW.toLowerCase())
-            )
-          )
-            return true;
-
-          return false;
-        });
-
-        if (stopInfoIndex == -1) return acc;
-
-        const scheduledStopTrain = getScheduledTrain(train, stopInfoIndex, stationAPIData.stationName);
-
-        if (stationGeneralInfo?.checkpoints) {
-          for (const checkpoint of stationGeneralInfo.checkpoints) {
-            const index = timetable.followingStops.findIndex(
-              (stop) => stop.stopNameRAW.toLowerCase() == checkpoint.checkpointName.toLowerCase()
-            );
-
-            if (index == -1) continue;
-
-            const scheduledCheckpointTrain = getScheduledTrain(train, index, stationAPIData.stationName);
-            checkpoint.scheduledTrains.push(scheduledCheckpointTrain);
-          }
-        }
-
-        acc.push(scheduledStopTrain);
-        return acc;
-      }, []) as ScheduledTrain[];
-    },
-
-    getStationTrains(stationAPIData: StationAPIData) {
-      return this.trainList
-        .filter(
-          (train) =>
-            train?.region === this.region.id && train.online && train.currentStationName === stationAPIData.stationName
-        )
-        .map((train) => ({
-          driverName: train.driverName,
-          driverId: train.driverId,
-          trainNo: train.trainNo,
-          trainId: train.trainId,
-        }));
-    },
-
-    setStationsOnlineInfo() {
-      const onlineStationNames: string[] = [];
-      const prevDispatcherStatuses: StoreState['lastDispatcherStatuses'] = [];
-
-      this.apiData.stations?.forEach((stationAPIData) => {
-        if (stationAPIData.region !== this.region.id || !stationAPIData.isOnline) return;
-        const station = this.stationList.find((s) => s.name === stationAPIData.stationName);
-
-        onlineStationNames.push(stationAPIData.stationName);
-
-        const dispatcherStatus = this.getDispatcherStatus(stationAPIData);
-        prevDispatcherStatuses.push(dispatcherStatus);
-
-        const stationTrains = this.getStationTrains(stationAPIData);
-        const scheduledTrains = this.getScheduledTrains(station?.generalInfo, stationAPIData);
-
-        const onlineInfo = {
-          name: stationAPIData.stationName,
-          hash: stationAPIData.stationHash,
-          region: stationAPIData.region,
-          maxUsers: stationAPIData.maxUsers,
-          currentUsers: stationAPIData.currentUsers,
-          spawns: parseSpawns(stationAPIData.spawnString),
-          dispatcherName: stationAPIData.dispatcherName,
-          dispatcherRate: stationAPIData.dispatcherRate,
-          dispatcherId: stationAPIData.dispatcherId,
-          dispatcherExp: stationAPIData.dispatcherExp,
-          dispatcherIsSupporter: stationAPIData.dispatcherIsSupporter,
-          stationTrains,
-          statusTimestamp: dispatcherStatus.statusTimestamp,
-          statusID: dispatcherStatus.statusID,
-          scheduledTrains,
-        };
-
-        if (!station) {
-          this.stationList.push({
-            name: stationAPIData.stationName,
-            onlineInfo,
-          });
-
-          return;
-        }
-
-        station.onlineInfo = { ...onlineInfo };
-
-        this.stationList
-          .filter((station) => !onlineStationNames.includes(station.name) && station.onlineInfo)
-          .forEach((offlineStation) => {
-            offlineStation.onlineInfo = undefined;
-          });
-      });
-
-      if (this.apiData.dispatchers != null) this.lastDispatcherStatuses = prevDispatcherStatuses;
-    },
-
-    async fetchStationsGeneralInfo() {
-      const sceneryData: StationJSONData[] = await (
-        await axios.get(`${URLs.stacjownikAPI}/api/getSceneries?timestamp=${Math.floor(Date.now() / 1800000)}`)
-      ).data;
-
-      if (!sceneryData) {
-        this.dataStatuses.sceneries = DataStatus.Error;
-        return;
-      }
-
-      this.stationList = sceneryData.map((scenery) => ({
-        name: scenery.name,
-
-        generalInfo: {
-          ...scenery,
-          authors: scenery.authors?.split(',').map((a) => a.trim()),
-          routes:
-            scenery.routes
-              ?.split(';')
-              .filter((routeString) => routeString)
-              .reduce(
-                (acc, routeString) => {
-                  const specs1 = routeString.split('_')[0];
-                  const isInternal = specs1.startsWith('!');
-                  const name = isInternal ? specs1.replace('!', '') : specs1;
-
-                  const specs2 = routeString.split('_')[1].split('');
-                  const twoWay = specs2[0] == '2';
-                  const catenary = specs2[1] == 'E';
-                  const SBL = specs2[2] == 'S';
-                  const TWB = specs2[3] ? true : false;
-
-                  const propName = twoWay
-                    ? catenary
-                      ? 'twoWayCatenaryRouteNames'
-                      : 'twoWayNoCatenaryRouteNames'
-                    : catenary
-                    ? 'oneWayCatenaryRouteNames'
-                    : 'oneWayNoCatenaryRouteNames';
-
-                  acc[twoWay ? 'twoWay' : 'oneWay'].push({
-                    name,
-                    SBL,
-                    TWB,
-                    catenary,
-                    isInternal,
-                    tracks: twoWay ? 2 : 1,
-                  });
-                  if (!isInternal) acc[propName].push(name);
-
-                  if (SBL) acc['sblRouteNames'].push(name);
-
-                  return acc;
-                },
-                {
-                  oneWay: [],
-                  twoWay: [],
-                  sblRouteNames: [],
-                  oneWayCatenaryRouteNames: [],
-                  oneWayNoCatenaryRouteNames: [],
-                  twoWayCatenaryRouteNames: [],
-                  twoWayNoCatenaryRouteNames: [],
-                } as StationRoutes
-              ) || {},
-          checkpoints: scenery.checkpoints
-            ? scenery.checkpoints.split(';').map((sub) => ({ checkpointName: sub, scheduledTrains: [] }))
-            : [],
-        },
-      }));
-    },
-
-    connectToWebsocket() {
-      const socket = io(URLs.stacjownikAPI, {
-        transports: ['websocket', 'polling'],
-        rememberUpgrade: true,
-        reconnection: true,
-        timeout: 10000,
-      });
-
-      socket.on('connect_error', (err) => {
-        this.dataStatuses.connection = DataStatus.Error;
-        this.webSocket = undefined;
-      });
-
-      socket.on('UPDATE', (data: APIData) => {
-        this.apiData = data;
-        this.dataStatuses.connection = DataStatus.Loaded;
-        this.setOnlineData();
-      });
-
-      socket.emit('FETCH_DATA', {}, (data: APIData) => {
-        this.apiData = data;
-        this.setOnlineData();
-      });
-
-      this.webSocket = socket;
-    },
-
-    async connectToAPI() {
-      await this.fetchStationsGeneralInfo();
-
-      this.connectToWebsocket();
-    },
-
-    async changeRegion(region: StoreState['region']) {
-      this.region = region;
-
-      await this.setOnlineData();
-    },
-
-    async setOnlineData() {
-      if (!this.apiData.stations) {
-        this.dataStatuses.sceneries = DataStatus.Error;
-        this.dataStatuses.trains = DataStatus.Error;
-        this.dataStatuses.dispatchers = DataStatus.Error;
-
-        return;
-      }
-
-      this.dataStatuses.sceneries = DataStatus.Loaded;
-      this.dataStatuses.trains = !this.apiData.trains ? DataStatus.Warning : DataStatus.Loaded;
-      this.dataStatuses.dispatchers = !this.apiData.dispatchers ? DataStatus.Warning : DataStatus.Loaded;
-
-      this.setTrainsOnlineData();
-      this.setStationsOnlineInfo();
-    },
-  },
-});
-
+import axios from 'axios';
+import { defineStore } from 'pinia';
+import { io } from 'socket.io-client';
+import { DataStatus } from '../scripts/enums/DataStatus';
+import StationAPIData from '../scripts/interfaces/api/StationAPIData';
+import ScheduledTrain from '../scripts/interfaces/ScheduledTrain';
+import Station from '../scripts/interfaces/Station';
+import StationRoutes from '../scripts/interfaces/StationRoutes';
+import Train from '../scripts/interfaces/Train';
+import { URLs } from '../scripts/utils/apiURLs';
+import {
+  getLocoURL,
+  getStatusTimestamp,
+  getStatusID,
+  getScheduledTrain,
+  parseSpawns,
+} from '../scripts/utils/storeUtils';
+import { APIData, StationJSONData, StoreState } from './storeTypes';
+
+
+export const useStore = defineStore('store', {
+  state: () =>
+    ({
+      apiData: {} as unknown,
+
+      stationList: [],
+      trainList: [],
+
+      sceneryData: [],
+      lastDispatcherStatuses: [],
+
+      region: { id: 'eu', value: 'PL1' },
+
+      trainCount: 0,
+      stationCount: 0,
+
+      webSocket: undefined,
+
+      dispatcherStatsName: '',
+      dispatcherStatsData: undefined,
+
+      driverStatsName: '',
+      driverStatsData: undefined,
+
+      chosenModalTrainId: undefined,
+
+      dataStatuses: {
+        connection: DataStatus.Loading,
+        sceneries: DataStatus.Loading,
+        timetables: DataStatus.Loading,
+        dispatchers: DataStatus.Loading,
+        trains: DataStatus.Loading,
+      },
+
+      blockScroll: false,
+      listenerLaunched: false,
+
+    } as StoreState),
+
+  actions: {
+    setTrainsOnlineData() {
+      const { trains } = this.apiData;
+
+      if (!trains) return [];
+
+      this.trainList = trains
+        .filter(
+          (train) =>
+            train.region === this.region.id && (train.online || train.timetable || train.lastSeen > Date.now() - 180000)
+        )
+        .map((train) => {
+          const stock = train.stockString.split(';');
+          const locoType = stock ? stock[0] : train.stockString;
+
+          const timetable = train.timetable;
+
+          return {
+            trainId: train.driverName + train.trainNo.toString(),
+
+            trainNo: train.trainNo,
+            mass: train.mass,
+            length: train.length,
+            speed: train.speed,
+            region: train.region,
+
+            distance: train.distance,
+            signal: train.signal,
+            online: train.online,
+            driverId: train.driverId,
+            driverName: train.driverName,
+            currentStationName: train.currentStationName,
+            currentStationHash: train.currentStationHash,
+            connectedTrack: train.connectedTrack,
+            locoType,
+            locoURL: getLocoURL(locoType),
+            cars: stock.slice(1),
+
+            lastSeen: train.lastSeen,
+            isTimeout: train.isTimeout,
+
+            timetableData: timetable
+              ? {
+                  timetableId: timetable.timetableId,
+                  SKR: timetable.SKR,
+                  TWR: timetable.TWR,
+                  route: timetable.route,
+                  category: timetable.category,
+                  followingStops: timetable.stopList,
+                  routeDistance: timetable.stopList[timetable.stopList.length - 1].stopDistance,
+                  sceneries: timetable.sceneries,
+                }
+              : undefined,
+          };
+        }) as Train[];
+    },
+
+    getDispatcherStatus(onlineStationData: StationAPIData) {
+      const { dispatchers } = this.apiData;
+
+      const prevDispatcherStatus = this.lastDispatcherStatuses.find(
+        (dispatcher) => dispatcher.hash === onlineStationData.stationHash
+      );
+
+      const stationStatus = !dispatchers
+        ? undefined
+        : dispatchers.find(
+            (status: string[]) => status[0] == onlineStationData.stationHash && status[1] == this.region.id
+          ) || -1;
+
+      const statusTimestamp =
+        prevDispatcherStatus && !dispatchers ? prevDispatcherStatus.statusTimestamp : getStatusTimestamp(stationStatus);
+      const statusID =
+        prevDispatcherStatus && !dispatchers ? prevDispatcherStatus.statusID : getStatusID(stationStatus);
+
+      return {
+        hash: onlineStationData.stationHash,
+        statusID,
+        statusTimestamp,
+      };
+    },
+
+    getScheduledTrains(stationGeneralInfo: Station['generalInfo'], stationAPIData: StationAPIData) {
+      const stationName = stationAPIData.stationName.toLowerCase();
+
+      stationGeneralInfo?.checkpoints.forEach((cp) => (cp.scheduledTrains.length = 0));
+
+      return this.trainList.reduce((acc: ScheduledTrain[], train) => {
+        if (!train.timetableData) return acc;
+
+        const timetable = train.timetableData;
+        if (!timetable.sceneries.includes(stationAPIData.stationHash)) return acc;
+
+        const stopInfoIndex = timetable.followingStops.findIndex((stop) => {
+          const stopName = stop.stopNameRAW.toLowerCase();
+
+          if (stationName === stopName) return true;
+          if (stopName.includes(stationName) && !stop.stopName.includes('po.') && !stop.stopName.includes('podg.'))
+            return true;
+
+          if (stationName.includes(stopName) && !stop.stopName.includes('po.') && !stop.stopName.includes('podg.'))
+            return true;
+
+          if (
+            stopName.includes('podg.') &&
+            stopName.split(', podg.')[0] &&
+            stationName.includes(stopName.split(', podg.')[0])
+          )
+            return true;
+
+          if (
+            stationGeneralInfo &&
+            stationGeneralInfo.checkpoints &&
+            stationGeneralInfo.checkpoints.length > 0 &&
+            stationGeneralInfo.checkpoints.some((cp) =>
+              cp.checkpointName.toLowerCase().includes(stop.stopNameRAW.toLowerCase())
+            )
+          )
+            return true;
+
+          return false;
+        });
+
+        if (stopInfoIndex == -1) return acc;
+
+        const scheduledStopTrain = getScheduledTrain(train, stopInfoIndex, stationAPIData.stationName);
+
+        if (stationGeneralInfo?.checkpoints) {
+          for (const checkpoint of stationGeneralInfo.checkpoints) {
+            const index = timetable.followingStops.findIndex(
+              (stop) => stop.stopNameRAW.toLowerCase() == checkpoint.checkpointName.toLowerCase()
+            );
+
+            if (index == -1) continue;
+
+            const scheduledCheckpointTrain = getScheduledTrain(train, index, stationAPIData.stationName);
+            checkpoint.scheduledTrains.push(scheduledCheckpointTrain);
+          }
+        }
+
+        acc.push(scheduledStopTrain);
+        return acc;
+      }, []) as ScheduledTrain[];
+    },
+
+    getStationTrains(stationAPIData: StationAPIData) {
+      return this.trainList
+        .filter(
+          (train) =>
+            train?.region === this.region.id && train.online && train.currentStationName === stationAPIData.stationName
+        )
+        .map((train) => ({
+          driverName: train.driverName,
+          driverId: train.driverId,
+          trainNo: train.trainNo,
+          trainId: train.trainId,
+        }));
+    },
+
+    setStationsOnlineInfo() {
+      const onlineStationNames: string[] = [];
+      const prevDispatcherStatuses: StoreState['lastDispatcherStatuses'] = [];
+
+      this.apiData.stations?.forEach((stationAPIData) => {
+        if (stationAPIData.region !== this.region.id || !stationAPIData.isOnline) return;
+        const station = this.stationList.find((s) => s.name === stationAPIData.stationName);
+
+        onlineStationNames.push(stationAPIData.stationName);
+
+        const dispatcherStatus = this.getDispatcherStatus(stationAPIData);
+        prevDispatcherStatuses.push(dispatcherStatus);
+
+        const stationTrains = this.getStationTrains(stationAPIData);
+        const scheduledTrains = this.getScheduledTrains(station?.generalInfo, stationAPIData);
+
+        const onlineInfo = {
+          name: stationAPIData.stationName,
+          hash: stationAPIData.stationHash,
+          region: stationAPIData.region,
+          maxUsers: stationAPIData.maxUsers,
+          currentUsers: stationAPIData.currentUsers,
+          spawns: parseSpawns(stationAPIData.spawnString),
+          dispatcherName: stationAPIData.dispatcherName,
+          dispatcherRate: stationAPIData.dispatcherRate,
+          dispatcherId: stationAPIData.dispatcherId,
+          dispatcherExp: stationAPIData.dispatcherExp,
+          dispatcherIsSupporter: stationAPIData.dispatcherIsSupporter,
+          stationTrains,
+          statusTimestamp: dispatcherStatus.statusTimestamp,
+          statusID: dispatcherStatus.statusID,
+          scheduledTrains,
+        };
+
+        if (!station) {
+          this.stationList.push({
+            name: stationAPIData.stationName,
+            onlineInfo,
+          });
+
+          return;
+        }
+
+        station.onlineInfo = { ...onlineInfo };
+
+        this.stationList
+          .filter((station) => !onlineStationNames.includes(station.name) && station.onlineInfo)
+          .forEach((offlineStation) => {
+            offlineStation.onlineInfo = undefined;
+          });
+      });
+
+      if (this.apiData.dispatchers != null) this.lastDispatcherStatuses = prevDispatcherStatuses;
+    },
+
+    async fetchStationsGeneralInfo() {
+      const sceneryData: StationJSONData[] = await (
+        await axios.get(`${URLs.stacjownikAPI}/api/getSceneries?timestamp=${Math.floor(Date.now() / 1800000)}`)
+      ).data;
+
+      if (!sceneryData) {
+        this.dataStatuses.sceneries = DataStatus.Error;
+        return;
+      }
+
+      this.stationList = sceneryData.map((scenery) => ({
+        name: scenery.name,
+
+        generalInfo: {
+          ...scenery,
+          authors: scenery.authors?.split(',').map((a) => a.trim()),
+          routes:
+            scenery.routes
+              ?.split(';')
+              .filter((routeString) => routeString)
+              .reduce(
+                (acc, routeString) => {
+                  const specs1 = routeString.split('_')[0];
+                  const isInternal = specs1.startsWith('!');
+                  const name = isInternal ? specs1.replace('!', '') : specs1;
+
+                  const specs2 = routeString.split('_')[1].split('');
+                  const twoWay = specs2[0] == '2';
+                  const catenary = specs2[1] == 'E';
+                  const SBL = specs2[2] == 'S';
+                  const TWB = specs2[3] ? true : false;
+
+                  const propName = twoWay
+                    ? catenary
+                      ? 'twoWayCatenaryRouteNames'
+                      : 'twoWayNoCatenaryRouteNames'
+                    : catenary
+                    ? 'oneWayCatenaryRouteNames'
+                    : 'oneWayNoCatenaryRouteNames';
+
+                  acc[twoWay ? 'twoWay' : 'oneWay'].push({
+                    name,
+                    SBL,
+                    TWB,
+                    catenary,
+                    isInternal,
+                    tracks: twoWay ? 2 : 1,
+                  });
+                  if (!isInternal) acc[propName].push(name);
+
+                  if (SBL) acc['sblRouteNames'].push(name);
+
+                  return acc;
+                },
+                {
+                  oneWay: [],
+                  twoWay: [],
+                  sblRouteNames: [],
+                  oneWayCatenaryRouteNames: [],
+                  oneWayNoCatenaryRouteNames: [],
+                  twoWayCatenaryRouteNames: [],
+                  twoWayNoCatenaryRouteNames: [],
+                } as StationRoutes
+              ) || {},
+          checkpoints: scenery.checkpoints
+            ? scenery.checkpoints.split(';').map((sub) => ({ checkpointName: sub, scheduledTrains: [] }))
+            : [],
+        },
+      }));
+    },
+
+    connectToWebsocket() {
+      const socket = io(URLs.stacjownikAPI, {
+        transports: ['websocket', 'polling'],
+        rememberUpgrade: true,
+        reconnection: true,
+        timeout: 10000,
+      });
+
+      socket.on('connect_error', (err) => {
+        this.dataStatuses.connection = DataStatus.Error;
+        this.webSocket = undefined;
+      });
+
+      socket.on('UPDATE', (data: APIData) => {
+        this.apiData = data;
+        this.dataStatuses.connection = DataStatus.Loaded;
+        this.setOnlineData();
+      });
+
+      socket.emit('FETCH_DATA', {}, (data: APIData) => {
+        this.apiData = data;
+        this.setOnlineData();
+      });
+
+      this.webSocket = socket;
+    },
+
+    async connectToAPI() {
+      await this.fetchStationsGeneralInfo();
+
+      this.connectToWebsocket();
+    },
+
+    async changeRegion(region: StoreState['region']) {
+      this.region = region;
+
+      await this.setOnlineData();
+    },
+
+    async setOnlineData() {
+      if (!this.apiData.stations) {
+        this.dataStatuses.sceneries = DataStatus.Error;
+        this.dataStatuses.trains = DataStatus.Error;
+        this.dataStatuses.dispatchers = DataStatus.Error;
+
+        return;
+      }
+
+      this.dataStatuses.sceneries = DataStatus.Loaded;
+      this.dataStatuses.trains = !this.apiData.trains ? DataStatus.Warning : DataStatus.Loaded;
+      this.dataStatuses.dispatchers = !this.apiData.dispatchers ? DataStatus.Warning : DataStatus.Loaded;
+
+      this.setTrainsOnlineData();
+      this.setStationsOnlineInfo();
+    },
+  },
+});

src/store/storeTypes.ts

@@ -1,71 +1,71 @@
-
-import { Socket } from 'socket.io-client';
-import { DataStatus } from '../scripts/enums/DataStatus';
-import { DispatcherStatsAPIData } from '../scripts/interfaces/api/DispatcherStatsAPIData';
-import { DriverStatsAPIData } from '../scripts/interfaces/api/DriverStatsAPIData';
-import StationAPIData from '../scripts/interfaces/api/StationAPIData';
-import TrainAPIData from '../scripts/interfaces/api/TrainAPIData';
-import Station from '../scripts/interfaces/Station';
-import Train from '../scripts/interfaces/Train';
-
-export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
-
-export interface StoreState {
-  stationList: Station[];
-  trainList: Train[];
-  apiData: APIData;
-
-  lastDispatcherStatuses: { hash: string; statusTimestamp: number; statusID: string }[];
-
-  sceneryData: any[][];
-
-  region: { id: string; value: string };
-  trainCount: number;
-  stationCount: number;
-
-  webSocket?: Socket;
-
-  dispatcherStatsName: string;
-  dispatcherStatsData?: DispatcherStatsAPIData;
-
-  driverStatsName: string;
-  driverStatsData?: DriverStatsAPIData;
-
-  chosenModalTrainId?: string;
-
-  dataStatuses: {
-    connection: DataStatus;
-    sceneries: DataStatus;
-    timetables: DataStatus;
-    dispatchers: DataStatus;
-    trains: DataStatus;
-  };
-
-  listenerLaunched: boolean;
-}
-
-export interface APIData {
-  stations?: StationAPIData[];
-  dispatchers?: string[][];
-  trains?: TrainAPIData[];
-}
-
-export interface StationJSONData {
-  name: string;
-  url: string;
-  lines: string;
-  project: string;
-
-  reqLevel: number;
-
-  signalType: string;
-  controlType: string;
-
-  SUP: boolean;
-
-  routes: string;
-  checkpoints: string | null;
-  authors?: string;
-
-  availability: Availability;
-}
+import { Socket } from 'socket.io-client';
+import { DataStatus } from '../scripts/enums/DataStatus';
+import StationAPIData from '../scripts/interfaces/api/StationAPIData';
+import TrainAPIData from '../scripts/interfaces/api/TrainAPIData';
+import Station from '../scripts/interfaces/Station';
+import Train from '../scripts/interfaces/Train';
+import { DispatcherStatsAPIData } from '../scripts/interfaces/api/DispatcherStatsAPIData';
+import { DriverStatsAPIData } from '../scripts/interfaces/api/DriverStatsAPIData';
+
+export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
+
+export interface StoreState {
+  stationList: Station[];
+  trainList: Train[];
+  apiData: APIData;
+
+  lastDispatcherStatuses: { hash: string; statusTimestamp: number; statusID: string }[];
+
+  sceneryData: any[][];
+
+  region: { id: string; value: string };
+  trainCount: number;
+  stationCount: number;
+
+  webSocket?: Socket;
+
+  dispatcherStatsName: string;
+  dispatcherStatsData?: DispatcherStatsAPIData;
+
+  driverStatsName: string;
+  driverStatsData?: DriverStatsAPIData;
+
+  chosenModalTrainId?: string;
+
+  dataStatuses: {
+    connection: DataStatus;
+    sceneries: DataStatus;
+    timetables: DataStatus;
+    dispatchers: DataStatus;
+    trains: DataStatus;
+  };
+
+  listenerLaunched: boolean;
+  blockScroll: boolean;
+}
+
+export interface APIData {
+  stations?: StationAPIData[];
+  dispatchers?: string[][];
+  trains?: TrainAPIData[];
+}
+
+export interface StationJSONData {
+  name: string;
+  url: string;
+  lines: string;
+  project: string;
+
+  reqLevel: number;
+
+  signalType: string;
+  controlType: string;
+
+  SUP: boolean;
+
+  routes: string;
+  checkpoints: string | null;
+  authors?: string;
+
+  availability: Availability;
+}

src/styles/JournalSection.scss

@@ -1,65 +1,85 @@
-@import 'responsive.scss';
-
-// Animations
-.warning {
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-  }
-
-  &-enter-active {
-    transition: all 150ms ease-out;
-  }
-
-  &-leave-active {
-    transition: all 150ms ease-out;
-  }
-}
-
-//Styles
-
-.journal-wrapper {
-  width: 1350px;
-  padding: 1em 0;
-}
-
-.journal_warning {
-  text-align: center;
-  font-size: 1.3em;
-
-  &.error {
-    background-color: var(--clr-error);
-  }
-}
-
-.schedule-dates > * {
-  margin-right: 0.25em;
-}
-
-.journal_item,
-.journal_warning {
-  background: #202020;
-  padding: 1em;
-  margin: 1em 0;
-}
-
-.journal_top-bar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-button.btn {
-  padding: 0.5em 0.7em;
-}
-
-@include smallScreen() {
-  .journal-wrapper {
-    font-size: 1.25em;
-  }
-
-  .journal_top-bar {
-    justify-content: center;
-    flex-wrap: wrap;
-  }
-}
+@import 'responsive.scss';
+
+// Animations
+.warning {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-active {
+    transition: all 150ms 100ms ease-out;
+  }
+
+  &-leave-active {
+    transition: all 150ms 100ms ease-out;
+  }
+}
+
+//Styles
+
+.list_wrapper {
+  overflow-y: auto;
+  height: 90vh;
+  min-height: 550px;
+
+  padding-right: 0.2em;
+}
+
+.journal_wrapper {
+  max-width: 1350px;
+  width: 100%;
+
+  padding: 1em 0;
+}
+
+.journal_warning {
+  text-align: center;
+  font-size: 1.3em;
+
+  &.error {
+    background-color: var(--clr-error);
+  }
+}
+
+.schedule-dates > * {
+  margin-right: 0.25em;
+}
+
+.journal_item,
+.journal_warning {
+  background-color: #1a1a1a;
+  padding: 1em;
+  margin-bottom: 1em;
+}
+
+.journal_top-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.btn--load-data {
+  padding: 0.5em 1em;
+  display: flex;
+  margin: 0 auto;
+
+  font-size: 1.2em;
+}
+
+@include smallScreen() {
+  .list_wrapper {
+    font-size: 1.1em;
+  }
+
+  .journal_top-bar {
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+}
+
+@media (orientation: landscape) {
+  .list_wrapper {
+    font-size: 1em;
+  }
+}

src/styles/JournalStats.scss

@@ -0,0 +1,42 @@
+@import 'variables.scss';
+@import 'responsive.scss';
+
+.journal-stats {
+  background-color: #1a1a1a;
+  padding: 1em;
+  margin-bottom: 1em;
+}
+
+.info-stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+
+  margin-top: 1em;
+}
+
+.stat-badge {
+  display: flex;
+
+  span {
+    background-color: $accentCol;
+    color: black;
+    font-weight: bold;
+    padding: 0.2em 0.5em;
+  }
+
+  span:first-child {
+    background-color: #333;
+    color: white;
+  }
+}
+
+@include smallScreen {
+  .journal-stats {
+    text-align: center;
+  }
+
+  .info-stats {
+    justify-content: center;
+  }
+}

src/styles/card.scss

@@ -28,8 +28,6 @@
 
   width: 600px;
 
-  padding: 0.5em 1em;
-
   @include smallScreen {
     width: 100%;
     height: 80vh;

src/styles/filters_options.scss

@@ -0,0 +1,153 @@
+@import 'responsive.scss';
+@import 'variables.scss';
+@import 'search_box.scss';
+
+h1.option-title {
+  position: relative;
+  font-size: 1.1em;
+  margin: 0.7em 0 0.25em 0;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -4px;
+
+    width: 50%;
+    height: 2px;
+    background-color: white;
+    border-radius: 2px;
+  }
+}
+
+.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;
+}
+
+.filters-options {
+  position: relative;
+  margin-bottom: 0.5em;
+}
+
+.options_wrapper {
+  position: absolute;
+
+  background-color: $bgCol;
+  box-shadow: 0 5px 10px 2px #0f0f0f;
+
+  width: 100%;
+  max-width: 500px;
+
+  padding: 1em;
+
+  z-index: 100;
+}
+
+.options_sorters {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  padding: 0.25em 0.25em 0 0;
+}
+
+.options_filters {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0.5em 0 0 0;
+}
+
+.sort-option,
+.filter-option {
+  margin: 0.25em 0.25em 0.25em 0;
+}
+
+.sort-option[data-selected='true'] {
+  color: $accentCol;
+  font-weight: bold;
+}
+
+.filter-option {
+  &#abandoned {
+    color: salmon;
+  }
+
+  &#fulfilled {
+    color: lightgreen;
+  }
+
+  &#active {
+    color: lightblue;
+  }
+}
+
+.search_content {
+  .search {
+    margin: 0.5em auto;
+  }
+
+  .search_actions {
+    display: flex;
+    gap: 0.5em;
+    margin: 1em 0;
+    width: 100%;
+
+    button {
+      width: 100%;
+    }
+  }
+
+  .search-box {
+    .search-exit {
+      position: absolute;
+      transform: translateY(-50%);
+      top: 50%;
+      right: 0;
+    }
+  }
+}
+
+@include smallScreen() {
+  h1 {
+    text-align: center;
+
+    &::before {
+      width: 75%;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  .options_wrapper {
+    font-size: 1.1em;
+    max-width: 100%;
+  }
+
+  .filter-option,
+  .sort-option {
+    margin: 0.25em 0.25em;
+  }
+
+  .options_filters,
+  .options_sorters {
+    justify-content: center;
+  }
+}

src/styles/global.scss

@@ -3,6 +3,7 @@
   --clr-secondary: #2f2f2f;
 
   --clr-bg: #4d4d4d;
+  --clr-bg2: #1b1b1b;
 
   --clr-accent: #1085b3;
   --clr-accent2: #ff3d5d;
@@ -12,6 +13,24 @@
 
   --clr-error: #df3e3e;
   --clr-warning: #c59429;
+
+  font-size: 16px;
+}
+
+::-webkit-scrollbar {
+  width: 1rem;
+  height: 1rem;
+  background-color: transparent;
+
+  &-track {
+    border-radius: 0.5em;
+    background-color: #333;
+  }
+
+  &-thumb {
+    border-radius: 0.5em;
+    background-color: #666;
+  }
 }
 
 html {
@@ -25,28 +44,14 @@ body {
   padding: 0;
   font-family: 'Quicksand', sans-serif;
   overflow-y: scroll;
-}
 
-*:focus-visible {
-  outline: 1px solid white;
-  outline-offset: 1px;
-}
+  &.no-scroll {
+    overflow-y: hidden;
+    padding-right: 1rem;
 
-:root {
-  font-size: 16px;
-}
-
-::-webkit-scrollbar {
-  width: 0.5rem;
-  height: 0.5rem;
-
-  &-track {
-    background: #222;
-  }
-
-  &-thumb {
-    border-radius: 1rem;
-    background: #777;
+    @include smallScreen() {
+      padding: 0;
+    }
   }
 }
 
@@ -105,12 +110,12 @@ select {
 }
 
 input {
-  border: 1px solid white;
   background: none;
   color: white;
   font-size: 1em;
 
-  padding: 0.15em;
+  background-color: #333;
+  padding: 0.15em 0.5em;
 
   outline: none;
 
@@ -129,6 +134,14 @@ input {
   -webkit-tap-highlight-color: transparent;
 }
 
+*:focus {
+  outline: none;
+}
+
+*:focus-visible {
+  outline: 1px solid $accentCol;
+}
+
 .title {
   color: $accentCol;
   font-weight: 600;
@@ -182,54 +195,58 @@ ul {
   }
 }
 
-.btn {
-  background: none;
+button {
   cursor: pointer;
-  font-size: 1em;
+  color: white;
+  background: none;
 
-  &--text {
-    color: white;
-    transition: color 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-    &:hover:not(:disabled),
-    &:focus:not(:disabled) {
-      color: $accentCol;
-    }
+  padding: 0.25em 0.5em;
 
-    &.checked {
-      color: var(--clr-primary);
-      font-weight: bold;
-    }
+  transition: all 100ms ease;
+}
+
+button.btn--filled {
+  background-color: #333;
+  border-radius: 0.25em;
+
+  &:hover {
+    background-color: #2a2a2a;
   }
+}
 
-  &--image {
-    color: white;
-    transition: color 0.3s;
+button.btn--action {
+  background-color: #424242;
+  border-radius: 0.25em;
+
+  &:hover {
+    background-color: #555;
   }
+}
 
-  &--option {
-    cursor: pointer;
+button.btn--option {
+  color: white;
+  background-color: #333;
 
-    color: white;
-    background-color: #333;
+  &.checked {
+    color: var(--clr-primary);
+    font-weight: bold;
 
-    border-radius: 0.25em;
-    padding: 0.25em 0.5em;
-
-    &:hover:not(:disabled) {
-      background-color: #3c3c3c;
-    }
-
-    &.checked {
-      color: var(--clr-primary);
-      font-weight: bold;
-
-      background-color: #3c3c3c;
-    }
+    background-color: #3c3c3c;
   }
+}
 
-  &:disabled {
-    opacity: 0.65;
+button.btn--image {
+  font-weight: bold;
+  padding: 0.35em 0.75em;
+
+  img {
+    width: 1.5em;
+    margin-right: 0.5em;
+    vertical-align: middle;
   }
 }
 
@@ -274,3 +291,18 @@ ul {
     transform: translateX(-50%);
   }
 }
+
+@include smallScreen {
+  ::-webkit-scrollbar {
+    width: 0.5em;
+    height: 0.5em;
+
+    &-track {
+      background-color: #222;
+    }
+
+    &-thumb {
+      background-color: #777;
+    }
+  }
+}

src/styles/search_box.scss

@@ -0,0 +1,52 @@
+@import 'responsive.scss';
+
+.search {
+  label {
+    display: block;
+    color: #ccc;
+    margin-bottom: 0.25em;
+  }
+
+  &-box {
+    position: relative;
+
+    display: flex;
+
+    border-radius: 0.5em;
+    min-width: 200px;
+    margin-right: 0.25em;
+  }
+
+  &-input {
+    border: none;
+    background-color: #424242;
+
+    padding: 0.35em 0.5em;
+    width: 100%;
+  }
+
+  &-exit {
+    background-color: #424242;
+
+    img {
+      vertical-align: middle;
+      height: 1.3em;
+    }
+  }
+
+  &-button {
+    width: 80%;
+    max-width: 300px;
+  }
+
+  @include smallScreen {
+    &-box,
+    &-button {
+      margin: 0.5em 0 0 0;
+    }
+
+    &-box {
+      width: 100%;
+    }
+  }
+}

src/styles/variables.scss

@@ -1,7 +1,7 @@
 $primaryCol: #2c2c2c;
 $secondaryCol: #01e733;
 
-$bgCol: #4d4d4d;
+$bgCol: #1d1d1d;
 $bgLigtherCol: #5b5b5b;
 
 $errorCol: #ff1919;

src/types/Journal/JournalDispatcherTypes.ts

@@ -0,0 +1,8 @@
+export type JournalDispatcherSearcher = {
+  [key in 'search-dispatcher' | 'search-station' | 'search-date']: string;
+};
+
+export interface JournalDispatcherSorter {
+  id: 'timestampFrom' | 'duration';
+  dir: -1 | 1;
+}

src/types/Journal/JournalTimetablesTypes.ts

@@ -0,0 +1,16 @@
+import { JournalFilterType } from '../../scripts/enums/JournalFilterType';
+
+export type JorunalTimetableSearchType = {
+  [key in 'search-driver' | 'search-train' | 'search-date' | 'search-author']: string;
+};
+
+export interface JournalTimetableFilter {
+  id: JournalFilterType;
+  filterSection: string;
+  isActive: boolean;
+}
+
+export interface JournalTimetableSorter {
+  id: 'timetableId' | 'beginDate' | 'distance' | 'total-stops';
+  dir: -1 | 1;
+}

src/types/Trains/TrainOptionsTypes.ts

@@ -0,0 +1,6 @@
+import { TrainFilterType } from "../../scripts/enums/TrainFilterType";
+
+export interface TrainFilter {
+  id: TrainFilterType;
+  isActive: boolean;
+}

src/views/SceneryView.vue

@@ -8,16 +8,16 @@
       </action-button>
     </div>
 
-    <div class="scenery-wrapper" v-if="stationInfo" ref="card-wrapper">
-      <div class="scenery-left">
+    <div class="scenery-wrapper" v-if="stationInfo" ref="card-wrapper" :data-timetable-only="timetableOnly">
+      <div class="scenery-left" v-if="!timetableOnly">
         <div class="scenery-actions">
-          <button v-if="!timetableOnly" class="back-btn btn" :title="$t('scenery.return-btn')" @click="navigateTo('/')">
+          <button class="back-btn btn" :title="$t('scenery.return-btn')" @click="navigateTo('/')">
             <img :src="getIcon('back')" alt="Back to scenery" />
           </button>
         </div>
 
         <SceneryHeader :station="stationInfo" />
-        <SceneryInfo :station="stationInfo" :timetableOnly="timetableOnly" />
+        <SceneryInfo :station="stationInfo" />
       </div>
 
       <div class="scenery-right">
@@ -33,7 +33,12 @@
         </div>
 
         <keep-alive>
-          <component :is="currentViewCompontent" :station="stationInfo" :key="currentViewCompontent"></component>
+          <component
+            :is="currentViewCompontent"
+            :station="stationInfo"
+            :timetableOnly="timetableOnly"
+            :key="currentViewCompontent"
+          ></component>
         </keep-alive>
       </div>
     </div>
@@ -41,7 +46,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue';
+import { computed, defineComponent, PropType } from 'vue';
 import { useRoute } from 'vue-router';
 import routerMixin from '../mixins/routerMixin';
 import { useStore } from '../store/store';
@@ -68,7 +73,9 @@ export default defineComponent({
     SceneryTimetablesHistory,
     SceneryDispatchersHistory,
   },
+
   mixins: [routerMixin, imageMixin],
+
   data: () => ({
     viewModes: [
       {
@@ -89,17 +96,22 @@ export default defineComponent({
     currentViewCompontent: 'SceneryTimetable',
     onlineFrom: -1,
   }),
+
   activated() {
     this.loadSelectedCheckpoint();
   },
+
   setup() {
     const route = useRoute();
     const store = useStore();
-    const timetableOnly = computed(() => (route.query['timetable_only'] == '1' ? true : false));
+
+    const timetableOnly = computed(() => (route.query['timetableOnly'] == '1' ? true : false));
     const isComponentVisible = computed(() => route.path === '/scenery');
+
     const stationInfo = computed(() => {
       return store.stationList.find((station) => station.name === route.query.station?.toString().replace(/_/g, ' '));
     });
+
     return {
       timetableOnly,
       isComponentVisible,
@@ -111,11 +123,13 @@ export default defineComponent({
     setViewMode(componentName: string) {
       this.currentViewCompontent = componentName;
     },
+
     loadSelectedCheckpoint() {
       if (!this.stationInfo?.generalInfo?.checkpoints) return;
       if (this.stationInfo.generalInfo.checkpoints.length == 0) return;
       this.selectedCheckpoint = this.stationInfo.generalInfo.checkpoints[0].checkpointName;
     },
+
     selectCheckpoint(cp: { checkpointName: string }) {
       this.selectedCheckpoint = cp.checkpointName;
     },
@@ -169,8 +183,12 @@ button.back-btn {
   max-width: 1700px;
 
   margin: 1rem 0;
-
   text-align: center;
+
+  &[data-timetable-only='true'] {
+    grid-template-columns: 1fr;
+    max-width: 1000px;
+  }
 }
 
 .scenery-left {
@@ -209,15 +227,15 @@ button.back-btn {
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-wrap: wrap;
+  gap: 0.75em;
 
   .btn {
-    margin: 0.5em;
     padding: 0.5em;
     box-shadow: 0 0 10px 4px #242424;
 
     &[data-checked='true'] {
       color: var(--clr-primary);
-      font-weight: bold;
     }
   }
 }

src/views/StationsView.vue

@@ -3,39 +3,23 @@
     <div class="wrapper">
       <div class="body">
         <div class="options-bar">
-          <StationFilterCard
-            :showCard="filterCardOpen"
-            :exit="closeCard"
-            @changeFilterValue="changeFilterValue"
-            @invertFilters="invertFilters"
-            @resetFilters="resetFilters"
-            ref="filterCardRef"
-          />
+          <StationFilterCard :showCard="filterCardOpen" :exit="(filterCardOpen = false)" ref="filterCardRef" />
         </div>
 
-        <StationTable
-          :stations="computedStations"
-          :sorterActive="filterManager.getSorter()"
-          :setFocusedStation="setFocusedStation"
-          :changeSorter="changeSorter"
-        />
+        <StationTable :stations="computedStationList" />
       </div>
     </div>
   </section>
 </template>
 
 <script lang="ts">
-
-import inputData from '../data/options.json';
-
-import { computed, ComputedRef, defineComponent, reactive } from 'vue';
-import { useStore } from '../store/store';
-import StationFilterManager from '../scripts/managers/stationFilterManager';
-import Station from '../scripts/interfaces/Station';
+import { defineComponent } from 'vue';
 import StorageManager from '../scripts/managers/storageManager';
 import StationTable from '../components/StationsView/StationTable.vue';
 import StationFilterCard from '../components/StationsView/StationFilterCard.vue';
 import SelectBox from '../components/Global/SelectBox.vue';
+import { useStationFiltersStore } from '../store/stationFiltersStore';
+import { useStore } from '../store/store';
 
 export default defineComponent({
   components: {
@@ -43,70 +27,42 @@ export default defineComponent({
     StationFilterCard,
     SelectBox,
   },
+
   data: () => ({
     filterCardOpen: false,
     modalHidden: true,
     STORAGE_KEY: 'options_saved',
-    inputs: inputData,
+    focusedStationName: '',
   }),
 
   setup() {
-    const store = useStore();
-    const filterManager = reactive(new StationFilterManager());
-    const focusedStationName = '';
-
-    const computedStations: ComputedRef<Station[]> = computed(
-      () => filterManager.getFilteredStationList(store.stationList, store.region.id)
-      // .filter((station) => !station.onlineInfo || station.onlineInfo.region == store.region.id)
-    );
-
     return {
-      computedStations,
-      filterManager,
-      focusedStationName,
+      filterStore: useStationFiltersStore(),
+      store: useStore(),
     };
   },
-  mounted() {
-    if (!StorageManager.isRegistered(this.STORAGE_KEY)) return;
 
-    this.filterManager.checkFilters();
+  computed: {
+    computedStationList() {
+      const list = this.filterStore.getFilteredStationList(this.store.stationList, this.store.region.id);
 
-    this.inputs.options.forEach((option) => {
-      const value = StorageManager.getBooleanValue(option.name);
-      this.changeFilterValue({ name: option.name, value: value ? 0 : 1 });
-      option.value = value;
-    });
-
-    this.inputs.sliders.forEach((slider) => {
-      const value = StorageManager.getNumericValue(slider.name);
-      this.changeFilterValue({ name: slider.name, value });
-      slider.value = value;
-    });
+      return list;
+    },
   },
-  methods: {
-    toggleCardsState(name: string): void {
-      if (name == 'filter') {
-        this.filterCardOpen = !this.filterCardOpen;
-      }
-    },
-    changeSorter(index: number) {
-      this.filterManager.changeSorter(index);
-    },
-    changeFilterValue(filter: { name: string; value: number }) {
-      this.filterManager.changeFilterValue(filter);
-    },
-    resetFilters() {
-      this.filterManager.resetFilters();
-    },
-    invertFilters() {
-      this.filterManager.invertFilters();
-    },
-    closeCard() {
-      this.filterCardOpen = false;
-    },
-    setFocusedStation(name: string) {
-      this.focusedStationName = this.focusedStationName == name ? '' : name;
-    },
+
+  mounted() {
+    this.filterStore.setupFilters();
+    // this.filterStore.inputs.options.forEach((option) => {
+    //   const value = StorageManager.getBooleanValue(option.name);
+    //   option.value = value;
+    //   this.filterStore.changeFilterValue({ name: option.name, value: value });
+    // });
+
+    // this.filterStore.inputs.sliders.forEach((slider) => {
+    //   const value = StorageManager.getNumericValue(slider.name);
+    //   slider.value = value;
+    //   this.filterStore.changeFilterValue({ name: slider.name, value: value });
+    // });
   },
 });
 </script>

src/views/TrainsView.vue

@@ -1,9 +1,7 @@
 <template>
   <section class="trains-view">
-    <div class="wrapper">
-      <div class="options-bar">
-        <train-options />
-      </div>
+    <div class="trains_wrapper">
+      <TrainOptions :sorter-option-ids="['distance', 'progress', 'delay', 'mass', 'speed', 'length']" />
 
       <TrainTable :trains="computedTrains" />
     </div>
@@ -11,14 +9,16 @@
 </template>
 
 <script lang="ts">
-import { computed, ComputedRef, defineComponent, provide, reactive, ref, TrainFilter } from 'vue';
+import { computed, ComputedRef, defineComponent, provide, reactive, ref } from 'vue';
 import TrainOptions from '../components/TrainsView/TrainOptions.vue';
 import TrainStats from '../components/TrainsView/TrainStats.vue';
 import TrainTable from '../components/TrainsView/TrainTable.vue';
-import { trainFilters } from '../data/trainOptions';
+import { trainFilters } from '../constants/Trains/TrainOptionsConsts';
+import modalTrainMixin from '../mixins/modalTrainMixin';
 import Train from '../scripts/interfaces/Train';
 import { filteredTrainList } from '../scripts/managers/trainFilterManager';
 import { useStore } from '../store/store';
+import { TrainFilter } from '../types/Trains/TrainOptionsTypes';
 
 export default defineComponent({
   components: {
@@ -27,6 +27,8 @@ export default defineComponent({
     TrainOptions,
   },
 
+  mixins: [modalTrainMixin],
+
   props: {
     train: {
       type: String,
@@ -37,6 +39,11 @@ export default defineComponent({
       type: String,
       required: false,
     },
+
+    trainId: {
+      type: String,
+      required: false,
+    },
   },
 
   data: () => ({
@@ -48,7 +55,6 @@ export default defineComponent({
 
     const sorterActive = ref({ id: 'distance', dir: -1 });
     const filterList = reactive([...trainFilters]) as TrainFilter[];
-    const isTrainOptionsCardVisible = ref(false);
 
     const searchedDriver = ref('');
     const searchedTrain = ref('');
@@ -57,7 +63,6 @@ export default defineComponent({
     provide('searchedDriver', searchedDriver);
     provide('sorterActive', sorterActive);
     provide('filterList', filterList);
-    provide('isTrainOptionsCardVisible', isTrainOptionsCardVisible);
 
     const computedTrains: ComputedRef<Train[]> = computed(() => {
       return filteredTrainList(
@@ -74,6 +79,7 @@ export default defineComponent({
       searchedTrain,
       searchedDriver,
       sorterActive,
+      store,
     };
   },
 
@@ -82,10 +88,12 @@ export default defineComponent({
       this.searchedTrain = this.train;
       this.searchedDriver = this.driver || '';
     }
-    // if (this.train) {
-    //   this.searchedTrain = this.train;
-    //   if(this.x) this.searchedDriver = this.x;
-    // }
+
+    this.$nextTick(() => {
+      if (this.trainId) {
+        this.selectModalTrain(this.trainId);
+      }
+    });
   },
 });
 </script>
@@ -98,14 +106,8 @@ export default defineComponent({
   position: relative;
 }
 
-.wrapper {
+.trains_wrapper {
   margin: 1rem auto;
   max-width: 1350px;
 }
-
-@include smallScreen {
-  .options-bar {
-    font-size: 1.25em;
-  }
-}
 </style>

src/vuex.d.ts

@@ -1,30 +0,0 @@
-import { ComponentCustomProperties } from 'vue'
-import { Store } from 'vuex'
-import { JournalFilterType } from './scripts/enums/JournalFilterType';
-import { TrainFilterType } from './scripts/enums/TrainFilterType';
-
-declare module '@vue/runtime-core' {
-  // declare your own store states
-  interface State {
-    count: number
-  }
-
-  // provide typings for `this.$store`
-  interface ComponentCustomProperties {
-    $store: Store<State>
-  }
-
-  // Train filter for TrainView
-  interface TrainFilter {
-    id: TrainFilterType;
-    isActive: boolean;
-  }
-
-  interface JournalFilter {
-    id: JournalFilterType;
-    filterSection: string;
-    isActive: boolean;
-  }
-
-
-}

tsconfig.json

@@ -14,6 +14,7 @@
       "ESNext",
       "DOM"
     ],
+    "types": ["vite/client"],
     "skipLibCheck": true
   },
   "include": [