Wersja 1.13.0

hotfixy filtrów
2026-05-03 13:28:11 +00:00 · 2023-03-16 01:31:18 +01:00 · 2023-03-15 18:15:01 +01:00 · 2023-03-15 17:56:27 +01:00 · 2023-03-15 15:34:36 +01:00 · 2023-03-15 15:20:28 +01:00
83 changed files with 17306 additions and 2438 deletions
@@ -0,0 +1,20 @@
 # 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
@@ -0,0 +1,17 @@
 # This file was auto-generated by the Firebase CLI
 # https://github.com/firebase/firebase-tools
 name: Deploy to Firebase Hosting on PR
 'on': pull_request
 jobs:
  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
@@ -1,7 +1,7 @@
 .DS_Store
 node_modules
 /dist
 /dev-dist
 /dist
 # local env files
 .env.local
@@ -1,7 +1,11 @@
 {
  "hosting": {
    "public": "dist",
-    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
@@ -10,4 +14,3 @@
    ]
  }
 }
@@ -5,8 +5,8 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <meta name="keywords" content="Stacjownik, TD2, Train Driver 2, stacjownik-td2" />
+    <meta name="keywords" content="Stacjownik, TD2, Train Driver 2, stacjownik-td2, stacjownik, td2.info.pl" />
-    <meta name="description" content="Automatycznie odświeżana strona wyświetlająca stacje w Train Driver 2!" />
+    <meta name="description" content="Pomocnik maszynisty i dyżurnego symulatora Train Driver 2" />
    <title>Stacjownik</title>
@@ -24,21 +24,7 @@
    <link rel="icon" href="favicon-16.png" sizes="16x16" type="image/png" />
    <link rel="icon" href="favicon.ico" />
-    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500;700&display=swap" rel="stylesheet" />
    <script src="https://www.gstatic.com/firebasejs/8.1.1/firebase-app.js"></script>
    <script>
      const firebaseConfig = {
        apiKey: 'AIzaSyBI36X2-p7vU1flxoJdCEc0noByyTe1mpw',
        authDomain: 'stacjownik-td2.firebaseapp.com',
        databaseURL: 'https://stacjownik-td2.firebaseio.com',
        projectId: 'stacjownik-td2',
        storageBucket: 'stacjownik-td2.appspot.com',
      };
      firebase.initializeApp(firebaseConfig);
    </script>
  </head>
  <body>
@@ -46,3 +32,4 @@
    <script type="module" src="/src/main.ts"></script>
  </body>
 </html>
@@ -1,12 +1,12 @@
 {
  "name": "stacjownik",
-  "version": "1.10.8",
+  "version": "1.13.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "deploy": "yarn build && firebase deploy --only hosting",
-    "preview": "vite preview"
+    "preview": "yarn build && vite preview"
  },
  "dependencies": {
    "core-js": "^3.12.1",
@@ -21,12 +21,13 @@
    "vue-router": "^4.0.0-0"
  },
  "devDependencies": {
-    "@types/node": "^18.8.3",
+    "@types/node": "^18.11.17",
-    "@vitejs/plugin-vue": "^3.0.0",
+    "@vitejs/plugin-vue": "^4.0.0",
-    "axios": "^1.1.2",
+    "axios": "^1.2.1",
-    "typescript": "^4.6.4",
+    "typescript": "^4.9.4",
-    "vite": "^3.0.0",
+    "vite": "^4.0.3",
-    "vue-tsc": "^1.0.3"
+    "vite-plugin-pwa": "^0.14.0",
    "vue-tsc": "^1.0.18"
  },
  "browserslist": [
    "> 1%",
@@ -33,7 +33,8 @@
 .route {
  margin: 0 0.2em;
-  &-active {
+  &-active,
  &[data-active='true'] {
    color: $accentCol;
    font-weight: bold;
  }
@@ -45,7 +46,11 @@
  font-size: 1rem;
  @include smallScreen() {
-    font-size: calc(0.55rem + 1vw);
+    font-size: calc(0.55rem + 1.1vw);
  }
  @include screenLandscape() {
    font-size: calc(0.45rem + 0.8vw);
  }
 }
@@ -6,11 +6,13 @@
      </keep-alive>
    </transition>
    <UpdatePrompt />
    <AppHeader :current-lang="currentLang" @change-lang="changeLang" />
    <main class="app_main">
      <router-view v-slot="{ Component }">
-        <keep-alive>
+        <keep-alive exclude="JournalView">
          <component :is="Component" :key="$route.name" />
        </keep-alive>
      </router-view>
@@ -19,7 +21,8 @@
    <footer class="app_footer">
      &copy;
      <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
-      {{ new Date().getUTCFullYear() }} | <a :href="releaseURL" target="_blank">v{{ VERSION }}</a>
+      {{ new Date().getUTCFullYear() }} |
      <a :href="releaseURL" target="_blank">v{{ VERSION }}{{ isOnProductionHost ? '' : 'dev' }}</a>
      <div style="display: none">&int; ukryta taktyczna całka do programowania w HTMLu</div>
    </footer>
@@ -27,7 +30,7 @@
 </template>
 <script lang="ts">
-import { computed, defineComponent, provide, ref, watch } from 'vue';
+import { computed, defineComponent, KeepAlive, provide, ref, watch } from 'vue';
 import Clock from './components/App/Clock.vue';
@@ -41,6 +44,10 @@ import StorageManager from './scripts/managers/storageManager';
 import imageMixin from './mixins/imageMixin';
 import AppHeader from './components/App/AppHeader.vue';
 import axios from 'axios';
 import UpdatePrompt from './components/App/UpdatePrompt.vue';
 import { VERSION } from 'vue-i18n';
 import { RouterView } from 'vue-router';
 import useCustomSW from './mixins/useCustomSW';
 export default defineComponent({
  components: {
@@ -49,6 +56,7 @@ export default defineComponent({
    SelectBox,
    TrainModal,
    AppHeader,
    UpdatePrompt,
  },
  mixins: [imageMixin],
@@ -57,6 +65,8 @@ export default defineComponent({
    const store = useStore();
    store.connectToAPI();
    const { offlineReady } = useCustomSW();
    const isFilterCardVisible = ref(false);
    provide('isFilterCardVisible', isFilterCardVisible);
@@ -77,10 +87,30 @@ export default defineComponent({
    currentLang: 'pl',
    releaseURL: '',
    isOnProductionHost: location.hostname == 'stacjownik-td2.web.app',
  }),
  created() {
    this.loadLang();
    this.store.isOffline = !window.navigator.onLine;
    window.addEventListener('offline', () => {
      this.store.isOffline = true;
      this.store.apiData = {
        stations: [],
        dispatchers: [],
        trains: [],
        connectedSocketCount: 0,
      };
      this.store.setOnlineData();
    });
    window.addEventListener('online', () => {
      this.store.isOffline = false;
    });
  },
  async mounted() {
@@ -1,18 +1,20 @@
 <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="60" height="60" fill="#898989"/>
+<rect y="-0.00012207" width="60" height="60" fill="#898989"/>
-<path d="M30.5 6.04878H35.2195" stroke="#BFBFBF"/>
+<path d="M29.0126 32.4897V10.2511V9.52028H30.4337V10.2511V57.234H29.0126V32.4897Z" fill="#BFBFBF"/>
-<path d="M27.9024 4.00303C25.2115 4.10008 24.2403 6.24494 24 7.41767H32.0488C31.8486 6.16406 30.5934 3.90598 27.9024 4.00303Z" fill="black"/>
+<path d="M26.955 29.3992V32.9949L29.7672 36.9105" stroke="black" stroke-width="0.61183"/>
-<path d="M33.0244 29.6688V5.47793V4.68292H34.4878V5.47793V56.5854H33.0244V32.5H27.5V28.5V28.0163L28.5 28V31.5L31.9268 31.5447H33.0244V29.6688Z" fill="#BFBFBF"/>
+<rect x="29.0051" y="34.0686" width="1.42857" height="22.8196" fill="white"/>
-<path d="M28.1463 29.2683C30.8373 29.1712 31.8085 27.0264 32.0488 25.8537H24C24.2002 27.1073 25.4554 29.3654 28.1463 29.2683Z" fill="black"/>
+<rect x="29.0051" y="34.0686" width="1.42857" height="5.18627" fill="#FF0000"/>
-<path d="M32.0488 25.8537V7.86993V7.41464H24V25.8537H32.0488Z" fill="black"/>
+<rect x="29.0051" y="54.8137" width="1.42857" height="5.18627" fill="#FF0000"/>
-<path d="M25 26V29.5L33.8781 44.9756" stroke="black"/>
+<rect x="29.0051" y="44.4412" width="1.42857" height="5.18627" fill="#FF0000"/>
-<rect x="33.0244" y="31.5447" width="1.46341" height="25.0407" fill="white"/>
+<rect x="27.8749" y="31.8649" width="3.75" height="2.17823" fill="white"/>
-<rect x="33.0244" y="31.5447" width="1.46341" height="5.69106" fill="#FF0000"/>
+<path d="M33.5 28.5111V8.61545V8.11176H26V28.5111H33.5Z" fill="black"/>
-<rect x="33.0244" y="42.9268" width="1.46341" height="5.69106" fill="#FF0000"/>
+<path d="M29.6364 5.00276C27.1289 5.09112 26.2239 7.044 26 8.11176H33.5C33.3134 6.97036 32.1438 4.91439 29.6364 5.00276Z" fill="black"/>
-<rect x="33.0244" y="54.3089" width="1.46341" height="5.69106" fill="#FF0000"/>
+<path d="M29.8636 31.6201C32.3711 31.5317 33.2761 29.5789 33.5 28.5111H26C26.1865 29.6525 27.3561 31.7085 29.8636 31.6201Z" fill="black"/>
-<ellipse cx="27.9024" cy="7.40022" rx="1.46341" ry="1.40022" fill="#212121"/>
+<ellipse cx="29.887" cy="11.8168" rx="1.38696" ry="1.28474" fill="#212121"/>
-<ellipse cx="27.9024" cy="11.8343" rx="1.46341" ry="1.40022" fill="#212121"/>
+<ellipse cx="29.887" cy="8.0135" rx="1.38696" ry="1.28474" fill="#212121"/>
-<ellipse cx="27.9024" cy="16.2683" rx="1.46341" ry="1.40022" fill="#FF0000"/>
+<ellipse cx="29.887" cy="15.6151" rx="1.38696" ry="1.28474" fill="#212121"/>
-<ellipse cx="27.9024" cy="20.7023" rx="1.46341" ry="1.40022" fill="#212121"/>
+<ellipse cx="29.887" cy="19.6834" rx="1.38696" ry="1.28474" fill="#212121"/>
-<ellipse cx="27.9024" cy="25.1364" rx="1.46341" ry="1.40022" fill="#212121"/>
+<ellipse cx="29.887" cy="23.7518" rx="1.38696" ry="1.28474" fill="#212121"/>
 <ellipse cx="29.887" cy="27.8201" rx="1.38696" ry="1.28474" fill="#00FF0A"/>
 <ellipse cx="29.887" cy="19.769" rx="1.38696" ry="1.28474" fill="#00FF0A"/>
 </svg>
@@ -0,0 +1,18 @@
 <svg width="144" height="147" viewBox="0 0 144 147" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g filter="url(#filter0_d_1343_19)">
 <path d="M115.039 101.247C116.397 98.6665 115.405 95.4739 112.824 94.1167C110.243 92.7594 107.05 93.7514 105.693 96.3323L115.039 101.247ZM89.4447 44.0402L94.1179 46.4977L99.0329 37.1513L94.3597 34.6938L89.4447 44.0402ZM105.693 96.3323C95.7398 115.259 72.3278 122.534 53.4008 112.581L48.4858 121.927C72.5746 134.595 102.372 125.336 115.039 101.247L105.693 96.3323ZM53.4008 112.581C34.4739 102.627 27.1993 79.2155 37.1525 60.2885L27.8061 55.3735C15.1383 79.4623 24.397 109.259 48.4858 121.927L53.4008 112.581ZM37.1525 60.2885C47.1057 41.3616 70.5177 34.087 89.4447 44.0402L94.3597 34.6938C70.2709 22.026 40.4738 31.2846 27.8061 55.3735L37.1525 60.2885Z" fill="white"/>
 <path d="M91.2258 38.7627L101.056 20.0698L116.15 51.8695L81.3956 57.4555L91.2258 38.7627Z" fill="white"/>
 </g>
 <defs>
 <filter id="filter0_d_1343_19" x="18.1328" y="20.0698" width="102.017" height="115.531" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
 <feOffset dy="4"/>
 <feGaussianBlur stdDeviation="2"/>
 <feComposite in2="hardAlpha" operator="out"/>
 <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
 <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1343_19"/>
 <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1343_19" result="shape"/>
 </filter>
 </defs>
 </svg>
@@ -22,7 +22,9 @@
        <StatusIndicator />
        <span class="header_brand">
          <router-link to="/">
            <img :src="getImage('stacjownik-header-logo.svg')" alt="Stacjownik" />
          </router-link>
        </span>
        <span class="header_info">
@@ -48,7 +50,12 @@
          /
          <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">
+          <router-link
            class="route"
            active-class="route-active"
            :data-active="$route.path.startsWith('/journal')"
            to="/journal"
          >
            {{ $t('app.journal') }}
          </router-link>
        </span>
@@ -66,7 +73,7 @@ import StatusIndicator from './StatusIndicator.vue';
 import Clock from './Clock.vue';
 export default defineComponent({
-    emits: ["changeLang"],
+  emits: ['changeLang'],
  mixins: [imageMixin],
  props: {
    currentLang: {
@@ -80,14 +87,11 @@ export default defineComponent({
    };
  },
  methods: {
-        changeRegion(region: {
+    changeRegion(region: { id: string; value: string }) {
            id: string;
            value: string;
        }) {
      this.store.changeRegion(region);
    },
    changeLang(lang: string) {
-            this.$emit("changeLang", lang);
+      this.$emit('changeLang', lang);
    },
  },
  computed: {
@@ -95,12 +99,16 @@ export default defineComponent({
      return this.store.trainList.filter((train) => train.online).length;
    },
    onlineDispatchersCount() {
-            return this.store.stationList.filter((station) => station.onlineInfo && station.onlineInfo.region == this.store.region.id).length;
+      return this.store.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 regionStationCount =
-                const regionTrainCount = this.store.apiData.trains?.filter((train) => train.region == region.id && train.online).length || 0;
+          this.store.apiData.stations?.filter((station) => station.region == region.id && station.isOnline).length || 0;
        const regionTrainCount =
          this.store.apiData.trains?.filter((train) => train.region == region.id && train.online).length || 0;
        return {
          id: region.id,
          value: `${region.value} <div class='text--grayed'>${regionStationCount} / ${regionTrainCount}</div>`,
@@ -109,7 +117,7 @@ export default defineComponent({
      });
    },
  },
-    components: { SelectBox, StatusIndicator, Clock }
+  components: { SelectBox, StatusIndicator, Clock },
 });
 </script>
 <style lang="scss" scoped>
@@ -128,6 +136,7 @@ export default defineComponent({
 .header {
  &_body {
    max-width: 21em;
    position: relative;
    @include smallScreen {
      max-width: 18em;
@@ -1,31 +0,0 @@
 <template>
  <div class="loading">{{message}}</div>
 </template>
 <script lang="ts">
 import { defineComponent } from "vue";
 export default defineComponent({
  props: ["message"],
 });
 </script>
 <style lang="scss" scoped>
 .loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: calc(0.75rem + 1vw);
  color: #fdc62f;
 }
 </style>
@@ -161,7 +161,6 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { DataStatus } from '../../scripts/enums/DataStatus';
 import { useStore } from '../../store/store';
@@ -172,6 +171,7 @@ export default defineComponent({
    return {
      tooltipActive: false,
      indicator: {
        offline: false,
        status: DataStatus.Loading,
        message: 'data-status.S3',
      },
@@ -193,6 +193,7 @@ export default defineComponent({
    return {
      dataStatus: store.dataStatuses,
      store,
    };
  },
@@ -206,6 +207,13 @@ export default defineComponent({
        const trainsDataStatus = statuses.trains;
        const dispatcherDataStatus = statuses.dispatchers;
        if (this.store.isOffline) {
          this.setSignalStatus(DataStatus.Initialized);
          this.indicator.status = DataStatus.Initialized;
          this.indicator.message = 'data-status.S1-offline';
          return;
        }
        if (connectionStatus == DataStatus.Error) {
          this.setSignalStatus(connectionStatus);
          this.indicator.status = connectionStatus;
@@ -252,6 +260,10 @@ export default defineComponent({
      this.orangeLight = false;
      this.redBottomLight = false;
      if (status == DataStatus.Initialized) {
        this.redTopLight = true;
      }
      if (status == DataStatus.Loaded) {
        this.greenLight = true;
      }
@@ -291,9 +303,8 @@ export default defineComponent({
 .status-indicator {
  position: absolute;
-  left: 50%;
+  left: 110%;
  bottom: 0;
  transform: translateX(12em);
  z-index: 100;
 }
@@ -0,0 +1,69 @@
 <template>
  <div class="update-prompt">
    <transition name="prompt-anim">
      <div class="prompt_content" v-if="!hidePrompt && needRefresh">
        <div>{{ $t('update.title') }}</div>
        <div class="prompt_actions">
          <button class="btn btn--filled" @click="updateServiceWorker(true)">{{ $t('update.confirm-button') }}</button>
          <button class="btn btn--filled" @click="hidePrompt = true">{{ $t('update.later-button') }}</button>
        </div>
      </div>
    </transition>
  </div>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
 import useCustomSW from '../../mixins/useCustomSW';
 const hidePrompt = ref(false);
 const { needRefresh, updateServiceWorker } = useCustomSW();
 </script>
 <style lang="scss" scoped>
@import '../../styles/variables.scss';
 .update-prompt {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 200;
 }
 .prompt_content {
  margin: 1em;
  padding: 1em;
  font-weight: bold;
  background-color: black;
  box-shadow: 0 0 10px 1px $accentCol;
  border-radius: 1em;
 }
 .prompt_actions {
  display: flex;
  margin-top: 1em;
  gap: 0.5em;
  button {
    width: 100%;
  }
 }
 // Animation
 .prompt-anim {
  &-enter-active,
  &-leave-active {
    transition: all 120ms ease-in;
    transform: translateY(0);
  }
  &-enter-from,
  &-leave-to {
    transform: translateY(100%);
  }
 }
 </style>
@@ -20,7 +20,7 @@ export default defineComponent({
 .loading {
  position: absolute;
  left: 50%;
-  transform: translateX(-50%);
+  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
@@ -0,0 +1,182 @@
 <template>
  <section class="daily-stats">
    <span :data-active="data.statsStatus">
      <b v-if="data.statsStatus == DataStatus.Loading">
        {{ $t('app.loading') }}
      </b>
      <b v-else-if="data.stats.distanceSum == null">
        {{ $t('journal.daily-stats-info') }}
      </b>
      <span>
        <div v-if="data.stats.totalTimetables">
          &bull;
          <i18n-t keypath="journal.timetable-stats-total">
            <template #count>
              <b class="text--primary">
                {{ data.stats.totalTimetables }}
                {{ $t('journal.timetable-count', data.stats.totalTimetables) }}
              </b>
            </template>
            <template #distance>
              <b class="text--primary"> {{ data.stats.distanceSum?.toFixed(2) }} km </b>
            </template>
          </i18n-t>
        </div>
        <div v-if="data.stats.timetableId">
          &bull;
          <i18n-t keypath="journal.timetable-stats-longest">
            <template #id>
              <router-link :to="`/journal/timetables?timetableId=${data.stats.timetableId}`">
                <b>{{ data.stats.timetableId }}</b>
              </router-link>
            </template>
            <template #author>
              <router-link :to="`/journal/dispatchers?dispatcherName=${data.stats.timetableAuthor}`">
                <b>{{ data.stats.timetableAuthor }}</b>
              </router-link>
            </template>
            <template #driver>
              <b>{{ data.stats.timetableDriver }}</b>
            </template>
            <template #distance>
              <b class="text--primary">{{ data.stats.timetableRouteDistance }} km</b>
            </template>
          </i18n-t>
        </div>
        <div v-if="firstPlaceDispatchers.length == 1">
          &bull;
          <i18n-t keypath="journal.timetable-stats-most-active">
            <template #dispatcher>
              <router-link :to="`/journal/dispatchers?dispatcherName=${firstPlaceDispatchers[0].name}`">
                <b>{{ firstPlaceDispatchers[0].name }}</b>
              </router-link>
            </template>
            <template #count>
              <b class="text--primary">
                {{ firstPlaceDispatchers[0].count }}
                {{ $t('journal.timetable-count', firstPlaceDispatchers[0].count) }}
              </b>
            </template>
          </i18n-t>
        </div>
        <div v-if="firstPlaceDispatchers.length > 1">
          &bull;
          <i18n-t keypath="journal.timetable-stats-most-active-many">
            <template #dispatchers>
              <span v-for="(disp, i) in firstPlaceDispatchers">
                <span v-if="i == firstPlaceDispatchers.length - 1"> {{ $t('general.and') }} </span>
                <router-link :to="`/journal/dispatchers?dispatcherName=${disp.name}`">
                  <b>{{ disp.name }}</b>
                </router-link>
                <span v-if="i < firstPlaceDispatchers.length - 2">, </span>
              </span>
            </template>
            <template #count>
              <b class="text--primary">
                {{ firstPlaceDispatchers[0].count }}
                {{ $t('journal.timetable-count', firstPlaceDispatchers[0].count) }}
              </b>
            </template>
          </i18n-t>
        </div>
      </span>
    </span>
  </section>
 </template>
 <script setup lang="ts">
 import axios from 'axios';
 import { computed, reactive, ref } from 'vue';
 import { DataStatus } from '../../scripts/enums/DataStatus';
 import { ITimetablesDailyStats, ITimetablesDailyStatsResponse } from '../../scripts/interfaces/api/StatsAPIData';
 import { URLs } from '../../scripts/utils/apiURLs';
 const intervalId = ref(-1);
 const data = reactive({
  statsStatus: DataStatus.Loading,
  stats: {
    totalTimetables: 0,
    distanceSum: 0,
    distanceAvg: 0,
    timetableAuthor: '',
    timetableDriver: '',
    timetableId: 0,
    timetableRouteDistance: 0,
    mostActiveDispatchers: [],
  } as ITimetablesDailyStats,
 });
 const firstPlaceDispatchers = computed(() => {
  if (data.stats.mostActiveDispatchers.length == 0) return [];
  const maxCount = data.stats.mostActiveDispatchers[0].count;
  return data.stats.mostActiveDispatchers.filter((disp) => disp.count === maxCount);
 });
 async function fetchDailyTimetableStats() {
  try {
    const {
      distanceAvg,
      distanceSum,
      maxTimetable,
      totalTimetables,
      mostActiveDispatchers,
    }: ITimetablesDailyStatsResponse = await (
      await axios.get(`${URLs.stacjownikAPI}/api/getDailyTimetableStats`)
    ).data;
    data.stats = {
      totalTimetables,
      distanceSum,
      distanceAvg,
      timetableAuthor: maxTimetable?.authorName || '',
      timetableDriver: maxTimetable?.driverName || '',
      timetableId: maxTimetable?.id || 0,
      timetableRouteDistance: maxTimetable?.routeDistance || 0,
      mostActiveDispatchers,
    };
    data.statsStatus = DataStatus.Loaded;
  } catch (error) {
    console.error('Ups! Wystąpił błąd podczas pobierania statystyk rozkładów jazdy...');
    data.statsStatus = DataStatus.Error;
  }
 }
 function startFetchingDailyStats() {
  fetchDailyTimetableStats();
  intervalId.value = setInterval(fetchDailyTimetableStats, 60000);
 }
 function stopFetchingDailyStats() {
  clearInterval(intervalId.value);
 }
 defineExpose({
  startFetchingDailyStats,
  stopFetchingDailyStats,
 });
 </script>
 <style lang="scss" scoped>
 .daily-stats {
  text-align: left;
 }
 .daily-stats > span[data-active='0'] {
  opacity: 0.75;
 }
 </style>
@@ -1,94 +0,0 @@
 <template>
  <div class="journal-stats" v-if="store.driverStatsData?._sum.routeDistance != null">
    <h1>
      {{ $t('journal.stats-title') }} <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>
@@ -1,7 +1,10 @@
 <template>
-  <ul class="journal-list">
+  <transition-group class="journal-list" tag="ul" name="list-anim">
-    <!-- <transition-group name="journal-list-anim"> -->
+    <li
-    <li v-for="item in computedDispatcherHistory" :class="{ sticky: typeof item == 'string' }">
+      v-for="item in computedDispatcherHistory"
      :key="typeof item === 'string' ? item : item.timestampFrom + item.dispatcherId"
      :class="{ sticky: typeof item == 'string' }"
    >
      <div v-if="typeof item == 'string'" class="journal_day">
        {{ item }}
      </div>
@@ -14,13 +17,25 @@
        @keydown.enter="navigateToScenery(item.stationName, item.isOnline)"
        tabindex="0"
      >
-        <span>
+        <span class="item-general">
          <b
            v-if="item.dispatcherLevel !== null"
            class="level-badge dispatcher"
            :style="calculateExpStyle(item.dispatcherLevel, item.dispatcherIsSupporter)"
          >
            {{ item.dispatcherLevel >= 2 ? item.dispatcherLevel : 'L' }}
          </b>
          <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 class="like-count" v-if="item.dispatcherRate">
            <img :src="getIcon('like')" alt="like icon" />
            {{ item.dispatcherRate }}
          </span>
        </span>
-        <span>
+        <span class="item-time">
          <span :data-status="item.isOnline"> {{ item.isOnline ? $t('journal.online-since') : 'OFFLINE' }}&nbsp; </span>
          <span>
            {{ new Date(item.timestampFrom).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
@@ -36,14 +51,15 @@
        </span>
      </div>
    </li>
-    <!-- </transition-group> -->
+  </transition-group>
  </ul>
 </template>
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
 import { DispatcherHistory } from '../../scripts/interfaces/api/DispatchersAPIData';
 import styleMixin from '../../mixins/styleMixin';
 import imageMixin from '../../mixins/imageMixin';
 export default defineComponent({
  props: {
@@ -53,7 +69,7 @@ export default defineComponent({
    },
  },
-  mixins: [dateMixin],
+  mixins: [dateMixin, styleMixin, imageMixin],
  computed: {
    computedDispatcherHistory() {
@@ -86,18 +102,11 @@ export default defineComponent({
 </script>
 <style lang="scss" scoped>
@import '../../styles/animations.scss';
@import '../../styles/responsive.scss';
@import '../../styles/badge.scss';
@import '../../styles/JournalSection.scss';
-
+@import '../../styles/variables.scss';
 .region-badge {
  padding: 0.1em 0.5em;
  border-radius: 0.5em;
  font-weight: bold;
  &.eu {
    background-color: forestgreen;
  }
 }
 li.sticky {
  position: sticky;
@@ -108,9 +117,12 @@ li.sticky {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  text-align: left;
  gap: 0.5em 1em;
  line-height: 1.7em;
  padding: 0.75em;
  &.online {
@@ -126,6 +138,18 @@ li.sticky {
  }
 }
 .item-general {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25em;
  flex-wrap: wrap;
  .level-badge {
    margin-right: 0.25em;
  }
 }
 .journal_day {
  margin-bottom: 1em;
  padding: 0.5em;
@@ -143,14 +167,17 @@ li.sticky {
  }
 }
-@include smallScreen() {
+.like-count {
  display: flex;
  align-items: center;
  gap: 0.25em;
  font-size: 1.2em;
  color: $accentCol;
 }
@include smallScreen {
  .journal_item {
    flex-direction: column;
    span {
      margin-top: 0.25em;
      text-align: center;
    }
  }
 }
 </style>
@@ -0,0 +1,67 @@
 <template>
  <div class="journal-stats">
    <span v-if="store.driverStatsData">
      <h3>
        {{ $t('journal.stats-title') }} <span class="text--primary">{{ store.driverStatsName.toUpperCase() }}</span>
      </h3>
      <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>
    </span>
    <b v-else-if="store.driverStatsStatus == DataStatus.Loading">{{ $t('journal.stats-loading') }}</b>
    <b v-else-if="store.driverStatsStatus == DataStatus.Error">
      {{ $t('journal.stats-error ') }}
    </b>
    <b v-else>{{ $t('journal.driver-stats-info') }}</b>
  </div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { DataStatus } from '../../scripts/enums/DataStatus';
 import { useStore } from '../../store/store';
 export default defineComponent({
  data() {
    return {
      store: useStore(),
      DataStatus,
    };
  },
 });
 </script>
 <style lang="scss" scoped>
@import '../../styles/JournalStats.scss';
 </style>
@@ -0,0 +1,46 @@
 <template>
  <section class="journal-header">
    <div class="journal-type-options">
      <router-link class="router-link" active-class="route-active" to="/journal/timetables" exact>
        {{ $t('journal.section-timetables') }}
      </router-link>
      &nbsp;&bull;&nbsp;
      <router-link class="router-link" active-class="route-active" to="/journal/dispatchers">
        {{ $t('journal.section-dispatchers') }}
      </router-link>
    </div>
  </section>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
 export default defineComponent({});
 </script>
 <style lang="scss" scoped>
 .journal-type-options {
  display: flex;
  justify-content: center;
  background-color: #2c2c2c;
  max-width: 18em;
  font-size: 1.2em;
  margin: 0 auto;
  border-radius: 0 0 0.5em 0.5em;
  padding: 0.1em 0;
 }
 .journal-section > section {
  height: 100%;
  display: flex;
  justify-content: center;
 }
 .router-link.active {
  color: gold;
 }
 </style>
@@ -2,41 +2,49 @@
  <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">
+    <div class="actions-bar">
      <button class="filter-button btn--filled btn--image" @click="showOptions = !showOptions" ref="button">
        <img :src="getIcon('filter2')" alt="Open filters" />
        {{ $t('options.filters') }} [F]
        <span class="active-indicator" v-if="currentOptionsActive"></span>
      </button>
      <button class="filter-button btn--filled btn--image" @click="refreshData">
        <img :src="getIcon('refresh')" alt="Refresh data" />
        {{ $t('general.refresh') }}
      </button>
    </div>
    <datalist id="search-driver">
      <option v-for="sugg in driverSuggestions" :value="sugg"></option>
    </datalist>
    <datalist id="search-dispatcher">
      <option v-for="sugg in dispatcherSuggestions" :value="sugg"></option>
    </datalist>
    <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>
+              <label v-if="propName == 'search-date'" for="date">{{ $t(`options.search-${optionsType}-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]"
+                  :type="propName == 'search-date' ? 'date' : 'text'"
                  :min="propName == 'search-date' ? '2022-02-01' : undefined"
                  :list="propName.toString()"
                />
-                <button class="search-exit">
+                <button class="search-exit" v-if="propName != 'search-date'">
                  <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear(propName)" />
                </button>
              </div>
@@ -84,17 +92,21 @@
 </template>
 <script lang="ts">
-import { defineComponent, inject, Prop, PropType } from 'vue';
+import axios from 'axios';
 import { defineComponent, inject, PropType } from 'vue';
 import imageMixin from '../../mixins/imageMixin';
 import keyMixin from '../../mixins/keyMixin';
 import { DataStatus } from '../../scripts/enums/DataStatus';
 import { DriverStatsAPIData } from '../../scripts/interfaces/api/DriverStatsAPIData';
 import { URLs } from '../../scripts/utils/apiURLs';
 import { useStore } from '../../store/store';
 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'],
+  emits: ['onSearchConfirm', 'onOptionsReset', 'onRefreshData'],
  mixins: [imageMixin, keyMixin],
  props: {
@@ -112,11 +124,28 @@ export default defineComponent({
      type: Number as PropType<DataStatus>,
      default: DataStatus.Initialized,
    },
    currentOptionsActive: {
      type: Boolean,
      default: false,
    },
    optionsType: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      showOptions: false,
      driverSuggestions: [] as string[],
      dispatcherSuggestions: [] as string[],
      searchTimeout: 0,
      store: useStore(),
      DataStatus,
    };
  },
@@ -130,6 +159,10 @@ export default defineComponent({
  },
  computed: {
    driverStatsName() {
      return this.store.driverStatsName;
    },
    translatedSorterOptions() {
      return this.$props.sorterOptionIds.map((id) => ({
        id,
@@ -138,7 +171,75 @@ export default defineComponent({
    },
  },
  watch: {
    async driverStatsName(value: string) {
      await this.fetchDriverStats();
      this.store.currentStatsTab = value ? 'driver' : 'daily';
    },
    async 'searchersValues.search-driver'(value: string | undefined) {
      clearTimeout(this.searchTimeout);
      if (!value || value == '') return;
      if (value.length < 3) return;
      this.startSearchTimeout('driver', value);
    },
    async 'searchersValues.search-dispatcher'(value: string | undefined) {
      if (!value || value == '') return;
      if (value.length < 3) return;
      this.startSearchTimeout('dispatcher', value);
    },
  },
  methods: {
    async fetchDriverStats() {
      this.store.driverStatsData = undefined;
      if (!this.store.driverStatsName) {
        this.store.driverStatsStatus = DataStatus.Initialized;
        return;
      }
      try {
        this.store.driverStatsStatus = DataStatus.Loading;
        const statsData: DriverStatsAPIData = await (
          await axios.get(`${URLs.stacjownikAPI}/api/getDriverInfo?name=${this.store.driverStatsName}`)
        ).data;
        this.store.driverStatsData = statsData;
        this.store.driverStatsStatus = DataStatus.Loaded;
      } catch (error) {
        this.store.driverStatsStatus = DataStatus.Error;
        console.error('Ups! Wystąpił błąd przy próbie pobrania statystyk maszynisty! :/');
      }
    },
    refreshData() {
      this.$emit('onRefreshData');
    },
    startSearchTimeout(type: 'driver' | 'dispatcher', value: string) {
      if (this[`${type}Suggestions`].includes(value)) return;
      window.clearTimeout(this.searchTimeout);
      this.searchTimeout = setTimeout(async () => {
        try {
          const suggestions: string[] = await (
            await axios.get(`${URLs.stacjownikAPI}/api/get${type}Suggestions?name=${value}`)
          ).data;
          this[`${type}Suggestions`] = suggestions;
        } catch (error) {
          this[`${type}Suggestions`] = [];
        }
      }, 450);
    },
    // Override keyMixin function
    onKeyDownFunction() {
      this.showOptions = !this.showOptions;
@@ -0,0 +1,112 @@
 <template>
  <div class="journal-stats" v-show="!store.isOffline">
    <div class="tabs">
      <button
        v-for="tab in data.tabs"
        class="btn--filled"
        :data-selected="tab.name == store.currentStatsTab && areStatsOpen"
        :data-inactive="tab.inactive"
        @click="onTabButtonClick(tab.name)"
      >
        {{ $t(tab.titlePath) }}
      </button>
    </div>
    <div class="stats-tab" v-show="areStatsOpen">
      <keep-alive>
        <JournalDailyStats v-if="store.currentStatsTab == 'daily'" ref="dailyStatsComp" />
        <JournalDriverStats v-else-if="store.currentStatsTab == 'driver'" />
      </keep-alive>
    </div>
  </div>
 </template>
 <script setup lang="ts">
 import { computed, KeepAlive, onActivated, onDeactivated, reactive, Ref, ref, watch } from 'vue';
 import { useStore } from '../../store/store';
 import JournalDailyStats from './DailyStats.vue';
 import JournalDriverStats from './JournalDriverStats.vue';
 // Types
 type TStatTab = 'daily' | 'driver';
 // Variables
 const store = useStore();
 const dailyStatsComp: Ref<InstanceType<typeof JournalDailyStats> | null> = ref(null);
 const lastDailyStatsOpen = ref(false);
 const areStatsOpen = ref(false);
 const lastClickedTab = ref('daily');
 let data = reactive({
  tabs: [
    {
      name: 'daily',
      titlePath: 'journal.daily-stats-title',
    },
    {
      name: 'driver',
      titlePath: 'journal.driver-stats-title',
      inactive: true,
    },
  ] as { name: TStatTab; titlePath: string; inactive?: boolean }[],
 });
 // Methods
 function onTabButtonClick(tab: TStatTab) {
  if (lastClickedTab.value == tab || !areStatsOpen.value) areStatsOpen.value = !areStatsOpen.value;
  if (tab == 'daily') lastDailyStatsOpen.value = areStatsOpen.value;
  store.currentStatsTab = tab;
  lastClickedTab.value = tab;
 }
 onActivated(() => {
  dailyStatsComp.value?.startFetchingDailyStats();
 });
 onDeactivated(() => {
  dailyStatsComp.value?.stopFetchingDailyStats();
 });
 watch(
  computed(() => store.driverStatsData),
  (statsData) => {
    data.tabs[1].inactive = statsData ? false : true;
    lastClickedTab.value = statsData ? 'driver' : 'daily';
    if (statsData) areStatsOpen.value = true;
    if (!statsData) areStatsOpen.value = lastDailyStatsOpen.value;
  }
 );
 </script>
 <style lang="scss" scoped>
@import '../../styles/JournalStats.scss';
@import '../../styles/variables.scss';
 .tabs {
  position: relative;
  display: flex;
  gap: 0.5em;
  margin-bottom: 0.5em;
  button {
    font-weight: bold;
    padding: 0.5em 0.75em;
    &[data-inactive='true'] {
      color: gray;
    }
    &[data-selected='true'] {
      color: $accentCol;
    }
  }
 }
 </style>
@@ -1,25 +1,40 @@
 <template>
-  <ul class="journal-list">
+  <transition-group class="journal-list" tag="ul" name="list-anim">
    <li
      v-for="{ timetable, sceneryList, ...item } in computedTimetableHistory"
      class="journal_item"
-      :key="timetable.timetableId"
+      :key="timetable.id"
      @click="item.showExtra.value = !item.showExtra.value"
    >
      <div class="journal_item-info">
-        <div class="info-top">
+        <div class="info-general">
          <span
            class="general-train"
            tabindex="0"
-            @click="showTimetable(timetable)"
+            @click.stop="showTimetable(timetable)"
            @keydown.enter="showTimetable(timetable)"
            style="cursor: pointer"
          >
-            <b class="text--primary">{{ timetable.trainCategoryCode }}&nbsp;</b>
+            <span class="text--grayed">#{{ timetable.id }}</span>
-            <b>{{ timetable.trainNo }}</b>
+            <span>
-            | <span>{{ timetable.driverName }}</span> |
+              <strong class="text--primary">
-            <span class="text--grayed">#{{ timetable.timetableId }}</span>
+                {{ timetable.trainCategoryCode }}
              </strong>
              <strong>&nbsp;{{ timetable.trainNo }}</strong>
            </span>
            &bull;
            <strong
              v-if="timetable.driverLevel !== null"
              class="level-badge driver"
              :style="calculateExpStyle(timetable.driverLevel, timetable.driverIsSupporter)"
            >
              {{ timetable.driverLevel < 2 ? 'L' : `${timetable.driverLevel}` }}
            </strong>
            <strong>{{ timetable.driverName }}</strong>
          </span>
-          <span>
+          <span class="general-time">
            <b class="info-date">{{ localeDay(timetable.beginDate, $i18n.locale) }}</b>
            <b
              class="info-status"
@@ -47,15 +62,27 @@
        <hr />
        <div class="scenery-list">
-          <span v-for="(scenery, i) in sceneryList" :key="scenery.name" :class="{ confirmed: scenery.confirmed }">
+          <span
-            <span v-if="i > 0"> &gt;</span>
+            v-for="(scenery, i) in sceneryList.filter((_, i) =>
              !item.showExtra.value ? i == 0 || i == sceneryList.length - 1 : true
            )"
            :key="scenery.name"
            :class="{ confirmed: scenery.confirmed }"
          >
            <span v-if="i > 0">
              &gt;
              <span v-if="!item.showExtra.value && i == 1 && sceneryList.length > 2"
                >... (+{{ sceneryList.length - 2 }}) &gt;</span
              >
            </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
              v-if="i == sceneryList.length - 1 || (i == 1 && !item.showExtra.value)"
              v-html="scenery.endDateHTML"
            ></span>
          </span>
        </div>
@@ -72,6 +99,13 @@
            {{ timetable.confirmedStopsCount }} /
            {{ timetable.allStopsCount }}
          </span>
          <span class="text--grayed" v-if="!timetable.fulfilled && timetable.currentSceneryName">
            &bull;
            <b>
              {{ $t(`journal.${timetable.terminated ? 'last-seen-at' : 'currently-at'}`) }}
              {{ timetable.currentSceneryName.replace(/.[a-zA-Z0-9]+.sc/, '') }}
            </b>
          </span>
        </div>
        <!-- Nick dyżurnego -->
@@ -80,37 +114,37 @@
          <router-link class="dispatcher-link" :to="`/journal/dispatchers?dispatcherName=${timetable.authorName}`">
            <b>{{ timetable.authorName }}</b>
          </router-link>
          <span class="text--grayed">
            ({{
              (new Date(timetable.createdAt).getTime() - new Date(timetable.beginDate).getTime() < 0
                ? new Date(timetable.createdAt)
                : new Date(timetable.beginDate)
              ).toLocaleString($i18n.locale, { timeStyle: 'short', dateStyle: 'full' })
            }})
          </span>
        </div>
-        <button
+        <button class="btn--option btn--show">
          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" />
+          <img :src="getIcon(`arrow-${item.showExtra.value ? 'asc' : 'desc'}`)" alt="Arrow" />
        </button>
-        <div class="info-extended" v-if="timetable.stockString && item.showStock.value">
+        <div class="info-extended" v-if="timetable.stockString && item.showExtra.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
@@ -118,14 +152,13 @@
                :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>
+  </transition-group>
 </template>
 <script lang="ts">
@@ -133,7 +166,9 @@ import { defineComponent, PropType, ref } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
 import imageMixin from '../../mixins/imageMixin';
 import modalTrainMixin from '../../mixins/modalTrainMixin';
 import styleMixin from '../../mixins/styleMixin';
 import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
 import { TimetableStop } from '../../scripts/interfaces/api/TrainAPIData';
 export default defineComponent({
  props: {
@@ -143,14 +178,14 @@ export default defineComponent({
    },
  },
-  mixins: [dateMixin, imageMixin, modalTrainMixin],
+  mixins: [dateMixin, imageMixin, modalTrainMixin, styleMixin],
  computed: {
    computedTimetableHistory() {
      return this.timetableHistory.map((timetable) => ({
        timetable,
        sceneryList: this.getSceneryList(timetable),
-        showStock: ref(false),
+        showExtra: ref(false),
      }));
    },
  },
@@ -180,16 +215,12 @@ export default defineComponent({
            this.$i18n.locale
          )}</span>)`;
-        const abandonedDateHTML = ` (porz. ${this.localeTime(
+        return { name, confirmed: i < timetable.confirmedStopsCount, beginDateHTML, endDateHTML };
          timetable.fulfilled ? timetable.scheduledEndDate : timetable.endDate,
          this.$i18n.locale
        )})`;
        return { name, confirmed: i < timetable.confirmedStopsCount, beginDateHTML, endDateHTML, abandonedDateHTML };
      });
    },
    showTimetable(timetable: TimetableHistory) {
      if (!timetable) return;
      if (timetable.terminated) return;
      this.selectModalTrain(timetable.driverName + timetable.trainNo.toString());
@@ -204,11 +235,16 @@ export default defineComponent({
 </script>
 <style lang="scss" scoped>
@import '../../styles/animations.scss';
@import '../../styles/variables.scss';
@import '../../styles/responsive.scss';
@import '../../styles/badge.scss';
@import '../../styles/JournalSection.scss';
 .journal_item {
  cursor: pointer;
 }
 hr {
  margin: 0.25em 0;
 }
@@ -235,10 +271,14 @@ hr {
    }
  }
-  &-top {
+  &-general {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-bottom: 0.5em;
  }
  &-route {
@@ -250,6 +290,12 @@ hr {
  }
 }
 .general-train {
  display: flex;
  align-items: center;
  gap: 0.25em;
 }
 ul.stock-list {
  display: flex;
  align-items: flex-end;
@@ -290,14 +336,9 @@ ul.stock-list {
 }
@include smallScreen {
-  .info-top {
+  .info-general {
    flex-direction: column;
    span {
      margin: 0.1em auto;
  }
  }
  .info-extended {
    text-align: center;
  }
@@ -5,25 +5,31 @@
    <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">
+      <li class="list-item" v-for="item in dispatcherHistoryList">
-        <div>
+        <router-link class="item-general" :to="`/journal/dispatchers?dispatcherName=${item.dispatcherName}`">
-          <router-link :to="`/journal/dispatchers?dispatcherName=${historyItem.dispatcherName}`">
+          <span class="text--grayed">#{{ item.stationHash }}&nbsp;</span>
-            <span class="text--grayed">#{{ historyItem.stationHash }}&nbsp;</span>
+          <b
-            <b>{{ historyItem.dispatcherName }}</b>
+            v-if="item.dispatcherLevel !== null"
            class="level-badge dispatcher"
            :style="calculateExpStyle(item.dispatcherLevel, item.dispatcherIsSupporter)"
          >
            {{ item.dispatcherLevel >= 2 ? item.dispatcherLevel : 'L' }}
          </b>
          <b>{{ item.dispatcherName }}</b>
        </router-link>
        </div>
-        <div v-if="historyItem.timestampTo">
+        <div v-if="item.timestampTo">
-          <b>{{ $d(historyItem.timestampFrom) }}</b>
+          <b>{{ $d(item.timestampFrom) }}</b>
-          {{ timestampToString(historyItem.timestampFrom) }}
+          {{ timestampToString(item.timestampFrom) }}
-          - {{ timestampToString(historyItem.timestampTo) }} ({{ calculateDuration(historyItem.currentDuration) }})
+          - {{ timestampToString(item.timestampTo) }} ({{ calculateDuration(item.currentDuration) }})
        </div>
        <div class="dispatcher-online" v-else>
          {{ $t('journal.online-since') }}
-          <b>{{ timestampToString(historyItem.timestampFrom) }}</b>
+          <b>{{ timestampToString(item.timestampFrom) }}</b>
-          ({{ calculateDuration(historyItem.currentDuration) }})
+          ({{ calculateDuration(item.currentDuration) }})
        </div>
      </li>
    </ul>
@@ -39,10 +45,11 @@ import { DispatcherHistory } from '../../scripts/interfaces/api/DispatchersAPIDa
 import Station from '../../scripts/interfaces/Station';
 import { URLs } from '../../scripts/utils/apiURLs';
 import Loading from '../Global/Loading.vue';
 import styleMixin from '../../mixins/styleMixin';
 export default defineComponent({
  name: 'SceneryDispatchersHistory',
-  mixins: [dateMixin],
+  mixins: [dateMixin, styleMixin],
  props: {
    station: {
      type: Object as PropType<Station>,
@@ -55,7 +62,7 @@ export default defineComponent({
      dataStatus: DataStatus.Loading,
    };
  },
-  mounted() {
+  activated() {
    this.fetchAPIData();
  },
  methods: {
@@ -96,6 +103,13 @@ export default defineComponent({
  line-height: 1.5em;
 }
 .item-general {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25em;
 }
 .dispatcher-online {
  color: springgreen;
 }
@@ -1,6 +1,6 @@
 <template>
  <section class="info-header">
-    <a class="scenery-name" :href="station.generalInfo?.url">
+    <a class="scenery-name" :href="station.generalInfo?.url" target="_blank">
      {{ station.name }}
    </a>
@@ -1,15 +1,15 @@
 <template>
  <div class="scenery-info">
    <section v-if="!timetableOnly">
-      <div class="info-general" v-if="station.generalInfo">
+      <div class="scenery-info-general" v-if="station.generalInfo">
        <scenery-info-icons :station="station" />
-        <div class="general-list">
+        <div class="scenery-general-list">
          <span>
            <b>{{ $t('availability.title') }}:</b> {{ $t(`availability.${station.generalInfo.availability}`) }}
            <span v-if="station.generalInfo.reqLevel > -1">
-              - {{ $tc('scenery.req-level', station.generalInfo.reqLevel, { lvl: station.generalInfo.reqLevel }) }}
+              - {{ $t('scenery.req-level', { lvl: station.generalInfo.reqLevel }, station.generalInfo.reqLevel) }}
            </span>
          </span>
@@ -26,26 +26,32 @@
          </span>
          <span v-if="station.generalInfo.project">
            &bull; <b>{{ $t('scenery.project-title') }}: </b>
-            <b style="color: salmon">{{ station.generalInfo.project }}</b>
+            <a
              style="color: salmon; text-decoration: underline; font-weight: bold"
              :href="station.generalInfo.projectUrl"
              target="_blank"
              >{{ station.generalInfo.project }}</a
            >
          </span>
        </div>
        <scenery-info-routes :station="station" />
        <div class="scenery-authors" v-if="station.generalInfo.authors && station.generalInfo.authors.length > 0">
-          <b> {{ $tc('scenery.authors-title', station.generalInfo.authors.length) }}: </b>
+          <b>
            {{
              $t(
                'scenery.authors-title',
                { authors: station.generalInfo.authors.length },
                station.generalInfo.authors.length
              )
            }}:
          </b>
          {{ station.generalInfo.authors.join(', ') }}
        </div>
        <br />
        <div class="scenery-topic" v-if="station.generalInfo.url">
          <a :href="station.generalInfo.url" target="_blank">
            &gt; {{ $t('scenery.forum-topic', { name: station.name }) }} &lt;
          </a>
        </div>
      </div>
-      <div style="margin: 2em 0; height: 2px; background-color: white" />
+      <div style="margin: 2em 0; height: 2px; background-color: white"></div>
      <!-- info dispatcher -->
      <scenery-info-dispatcher :station="station" :onlineFrom="onlineFrom" />
@@ -72,7 +78,6 @@ import SceneryInfoSpawnList from './SceneryInfo/SceneryInfoSpawnList.vue';
 import SceneryInfoRoutes from './SceneryInfo/SceneryInfoRoutes.vue';
 import Station from '../../scripts/interfaces/Station';
 export default defineComponent({
  components: {
    SceneryInfoDispatcher,
@@ -125,11 +130,11 @@ h3.section-header {
  margin-top: 1em;
 }
-.info-general {
+.scenery-info-general {
  margin-top: 1em;
 }
-.general-list {
+.scenery-general-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
@@ -1,7 +1,10 @@
 <template>
  <section class="info-dispatcher">
    <div class="dispatcher" v-if="station.onlineInfo">
-      <span class="dispatcher_level" :style="calculateExpStyle(station.onlineInfo.dispatcherExp)">
+      <span
        class="dispatcher_level"
        :style="calculateExpStyle(station.onlineInfo.dispatcherExp, station.onlineInfo.dispatcherIsSupporter)"
      >
        {{ station.onlineInfo.dispatcherExp > 1 ? station.onlineInfo.dispatcherExp : 'L' }}
      </span>
@@ -4,12 +4,10 @@
      <b>{{ $t('scenery.one-way-routes') }}</b>
      <ul class="routes-list">
-        <li
+        <li v-for="route in station.generalInfo.routes.oneWay">
-          v-for="route in station.generalInfo.routes.oneWay"
+          <span :class="{ 'no-catenary': !route.catenary, internal: route.isInternal }"> {{ route.name }}</span>
-          :class="{ 'no-catenary': !route.catenary, internal: route.isInternal }"
+          <span v-if="route.speed" class="speed">{{ route.speed }}</span>
-        >
+          <span v-if="route.SBL" class="sbl">SBL</span>
          {{ route.name }}
          <b v-if="route.SBL">SBL</b>
        </li>
      </ul>
    </div>
@@ -18,41 +16,13 @@
      <b>{{ $t('scenery.two-way-routes') }}</b>
      <ul class="routes-list">
-        <li
+        <li v-for="route in station.generalInfo.routes.twoWay">
-          v-for="route in station.generalInfo.routes.twoWay"
+          <span :class="{ 'no-catenary': !route.catenary, internal: route.isInternal }">{{ route.name }}</span>
-          :class="{ 'no-catenary': !route.catenary, internal: route.isInternal }"
+          <span v-if="route.speed" class="speed">{{ route.speed }}</span>
-        >
+          <span v-if="route.SBL" class="sbl">SBL</span>
          {{ route.name }} <b v-if="route.SBL">SBL</b>
        </li>
      </ul>
    </div>
    <!-- <div
      class="route-info"
      :class="{ 'no-catenary': !route.catenary, internal: route.isInternal }"
      v-for="route in [...station.generalInfo.routes.oneWay, ...station.generalInfo.routes.twoWay].filter(
        (route) => route.name != '-'
      )"
      :key="route.name"
      :title="`Szlak ${route.name}: ${route.isInternal ? 'wewnętrzny' : 'zewnętrzny'}, ${
        route.tracks == 2 ? 'dwutorowy' : 'jednotorowy'
      }, ${route.catenary ? 'zelektryfikowany' : 'niezelektryfikowany'} z ${route.SBL ? 'SBL' : 'PBL'} ${
        route.TWB ? 'i blokadą dwukierunkową' : ''
      }`"
    > -->
    <!-- <span class="track-name">
        <b>{{ route.name }}</b>
      </span> -->
    <!--
      <span class="track-specs">
        {{ route.tracks }}tor
        <img v-if="route.catenary" :src="icons.trackCatenary" alt="icon track catenary" />
        <img v-else :src="icons.trackNoCatenary" alt="icon track no catenary" />
        <img v-if="route.TWB" :src="icons.trackTWB" alt="icon track twb" />
        <img v-if="route.SBL" :src="icons.trackSBL" alt="icon track sbl" />
      </span> -->
    <!-- </div> -->
  </section>
 </template>
@@ -91,12 +61,16 @@ export default defineComponent({
 ul.routes-list {
  margin: 0.45em 0.25em;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  li {
-    background-color: #007599;
+    margin: 0.5em 0.25em;
    span {
      padding: 0.2em 0.25em;
-    margin-left: 0.25em;
+      background-color: #007599;
      font-weight: bold;
      &.no-catenary {
        background-color: #686868;
@@ -106,8 +80,28 @@ ul.routes-list {
        text-decoration: underline;
      }
-    b {
+      &.speed {
        background-color: #404040;
        color: #cfcfcf;
      }
      &.sbl {
        color: var(--clr-primary);
        background-color: #404040;
      }
      &:last-child {
        border-radius: 0 0.5em 0.5em 0;
      }
      &:first-child {
        border-radius: 0.5em 0 0 0.5em;
      }
      &:only-child {
        border-radius: 0.5em;
      }
    }
  }
 }
@@ -2,17 +2,37 @@
  <section class="scenery-timetable">
    <div class="timetable-header">
      <h3>
-        <img :src="getIcon('timetable')" alt="icon-timetable" />&nbsp;
+        <img :src="getIcon('timetable')" alt="icon-timetable" />
        <span>{{ $t('scenery.timetables') }}</span>
-        &nbsp;
+
        <span>
          <span class="text--primary">{{ station.onlineInfo?.scheduledTrains?.length || '0' }}</span>
-        <span>&nbsp;/&nbsp;</span>
+          <span> / </span>
          <span class="text--grayed">
            {{ station.onlineInfo?.scheduledTrains?.filter((train) => train.stopInfo.confirmed).length || '0' }}
          </span>
        </span>
        <span class="header_links">
          <a
            :href="`https://pragotron-td2.web.app/board?name=${station.name}`"
            target="_blank"
            :title="$t('scenery.pragotron-link')"
          >
            <img :src="getIcon('pragotron')" alt="icon-pragotron" />
          </a>
          <a
            :href="`https://tablice-td2.web.app/?station=${station.name}`"
            target="_blank"
            :title="$t('scenery.tablice-link')"
          >
            <img :src="getIcon('tablice', 'ico')" alt="icon-tablice" />
          </a>
        </span>
      </h3>
-      <div class="timetable-checkpoints" v-if="station && station.generalInfo?.checkpoints">
+      <div class="timetable-checkpoints" v-if="station?.generalInfo?.checkpoints">
        <span v-for="(cp, i) in station.generalInfo.checkpoints" :key="i">
          {{ (i > 0 && '&bull;') || '' }}
@@ -41,7 +61,7 @@
        {{ $t('scenery.no-timetables') }}
      </span>
-      <transition-group name="timetables-anim">
+      <transition-group name="list-anim">
        <div
          class="timetable-item"
          v-for="(scheduledTrain, i) in computedScheduledTrains"
@@ -168,7 +188,6 @@ import { useStore } from '../../store/store';
 import imageMixin from '../../mixins/imageMixin';
 import modalTrainMixin from '../../mixins/modalTrainMixin';
 import ScheduledTrainStatus from './ScheduledTrainStatus.vue';
 import ScheduledTrain from '../../scripts/interfaces/ScheduledTrain';
 export default defineComponent({
  name: 'SceneryTimetable',
@@ -272,22 +291,7 @@ export default defineComponent({
 <style lang="scss" scoped>
@import '../../styles/responsive.scss';
@import '../../styles/variables.scss';
-
+@import '../../styles/animations.scss';
 .timetables-anim-move,
 .timetables-anim-enter-active,
 .timetables-anim-leave-active {
  transition: all 250ms ease;
 }
 .timetables-anim-enter-from,
 .timetables-anim-leave-to {
  opacity: 0;
  transform: translateY(30px);
 }
 .timetables-anim-leave-active {
  position: absolute;
 }
 .scenery-timetable {
  height: 100%;
@@ -296,24 +300,36 @@ export default defineComponent({
 }
 .timetable-header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: sticky;
  top: 0;
  z-index: 99;
  background-color: #181818;
  padding: 0.5em;
  img {
    width: 25px;
    vertical-align: middle;
  }
  h3 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    font-size: 1.3em;
  }
 }
 .header_links {
  display: flex;
  gap: 0.5em;
  margin-left: 0.5em;
 }
 .timetable {
  &-count {
    margin-left: 0.5em;
@@ -370,7 +386,8 @@ export default defineComponent({
  flex-wrap: wrap;
  font-size: 1.1em;
-  padding: 0.75em 0;
+
  margin-top: 0.5em;
  button.checkpoint_item {
    color: #aaa;
@@ -486,21 +503,6 @@ export default defineComponent({
  font-size: 0.85em;
 }
 .scenery-timetable-list-anim {
  &-enter-from,
  &-leave-to {
    opacity: 0;
  }
  &-enter-active {
    transition: all 100ms ease-out;
  }
  &-leave-active {
    transition: all 100ms ease-out 100ms;
  }
 }
@include smallScreen {
  .timetable-item {
    grid-template-columns: 1fr;
@@ -2,8 +2,46 @@
  <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>
+    <table v-else-if="sceneryHistoryList.length">
-    <ul class="history-list" v-else>
+      <thead>
        <th>{{ $t('scenery.timetables-history-id')  }}</th>
        <th>{{ $t('scenery.timetables-history-number')}}</th>
        <th>{{ $t('scenery.timetables-history-route')}}</th>
        <th>{{ $t('scenery.timetables-history-driver')}}</th>
        <th>{{ $t('scenery.timetables-history-author')}}</th>
        <th>{{ $t('scenery.timetables-history-date')}}</th>
      </thead>
      <tbody>
        <tr v-for="historyItem in sceneryHistoryList" @click="test">
          <td>
            <router-link :to="`/journal/timetables?timetableId=${historyItem.id}`">#{{ historyItem.id }}</router-link>
          </td>
          <td>
            <b class="text--primary">{{ historyItem.trainCategoryCode }}</b> <br />
            {{ historyItem.trainNo }}
          </td>
          <td>{{ historyItem.route.replace('|', ' -> ') }}</td>
          <td>{{ historyItem.driverName }}</td>
          <td>
            <router-link
              v-if="historyItem.authorName"
              :to="`/journal/dispatchers?dispatcherName=${historyItem.authorName}`"
              >{{ historyItem.authorName }}
            </router-link>
            <i v-else>{{ $t('scenery.timetable-author-unknown') }}</i>
          </td>
          <td>
            <b>{{ localeDay(historyItem.beginDate, $i18n.locale) }}</b>
            {{ localeTime(historyItem.beginDate, $i18n.locale) }}
          </td>
        </tr>
      </tbody>
    </table>
    <div class="list-warning" v-else>{{ $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>
@@ -11,24 +49,22 @@
        </div>
        <div>
-          <router-link :to="`/journal/timetables?timetableId=${historyItem.timetableId}`">
+          <router-link :to="`/journal/timetables?timetableId=${historyItem.id}`">
-            <span class="text--grayed"> #{{ historyItem.timetableId }} </span>
+            <span class="text--grayed"> #{{ historyItem.id }} </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>
+    </ul> -->
  </section>
 </template>
@@ -57,7 +93,7 @@ export default defineComponent({
      dataStatus: DataStatus.Loading,
    };
  },
-  mounted() {
+  activated() {
    this.fetchAPIData();
  },
  methods: {
@@ -72,6 +108,10 @@ export default defineComponent({
        console.error(error);
      }
    },
    test() {
      console.log('test');
    },
  },
  components: { Loading },
 });
@@ -91,17 +131,29 @@ export default defineComponent({
  padding: 0 0.5em;
 }
-.list-item {
+table {
-  display: grid;
+  width: 100%;
-  grid-template-columns: 1fr 2fr 2fr 1fr;
+  border-collapse: collapse;
  gap: 1em;
  align-items: center;
-  background-color: #353535;
+  thead {
    position: sticky;
    top: 0;
    background-color: #222222;
  }
  th {
    padding: 0.5em;
-  margin: 0.5em 0;
+  }
-  line-height: 1.5em;
+  tr {
    background-color: #353535;
    border: none;
  }
  td {
    padding: 0.75em;
    border-bottom: solid 5px #111;
  }
 }
@include smallScreen {
@@ -1,5 +1,11 @@
 <template>
-  <button class="btn--action" :class="option.section" :data-selected="option.value" @click="handleChange">
+  <button
    class="btn--action"
    :class="option.section"
    :data-selected="option.value"
    @click="handleLeftClick"
    @dblclick="handleDbClick"
  >
    {{ $t(`filters.${option.id}`) }}
  </button>
 </template>
@@ -29,20 +35,51 @@ export default defineComponent({
      filterStore: useStationFiltersStore(),
    };
  },
  methods: {
-    handleChange() {
+    handleLeftClick() {
      this.option.value = !this.option.value;
      this.filterStore.lastClickedFilterId = '';
      this.filterStore.changeFilterValue({
        name: this.option.name,
        value: !this.option.value,
      });
    },
    handleDbClick(e: Event) {
      e.preventDefault();
      const lastClicked = this.filterStore.lastClickedFilterId == this.option.id;
      console.log(this.filterStore.lastClickedFilterId);
      this.filterStore.lastClickedFilterId = this.option.id;
      this.option.value = true;
      this.filterStore.changeFilterValue({
        name: this.option.name,
        value: !this.option.value,
      });
      this.filterStore.inputs.options
        .filter((option) => {
          return option.section == this.option.section && option.id != this.option.id;
        })
        .forEach((option) => {
          this.filterStore.changeFilterValue({
            name: option.name,
            value: this.option.value,
          });
          option.value = !this.option.value;
        });
    },
  },
 });
 </script>
 <style lang="scss" scoped>
 $realityCol: #e03b07;
 $accessCol: #e03b07;
 $controlCol: #0085ff;
 $signalCol: #bf7c00;
@@ -51,56 +88,60 @@ $saveCol: #28a826;
 $routesCol: #9049c0;
 button {
-  width: 100%;
+  padding: 0.25em;
-  padding: 0.4em;
+  border-radius: 0;
  border-radius: 0.4em;
  &:focus-visible {
    outline: 1px solid white;
  }
  &[data-selected='true'] {
-    &.access {
+    //  &.reality {
-      background-color: $accessCol;
+    //   background-color: $realityCol;
-      box-shadow: 0 0 6px 1px $accessCol;
+    //   box-shadow: 0 0 6px 1px $realityCol;
-    }
+    // }
-    &.control {
+    // &.access {
-      background-color: $controlCol;
+    //   background-color: $accessCol;
-      box-shadow: 0 0 6px 1px $controlCol;
+    //   box-shadow: 0 0 6px 1px $accessCol;
-    }
+    // }
-    &.signals {
+    // &.control {
-      background-color: $signalCol;
+    //   background-color: $controlCol;
-      box-shadow: 0 0 6px 1px $signalCol;
+    //   box-shadow: 0 0 6px 1px $controlCol;
-    }
+    // }
-    &.routes {
+    // &.signals {
-      background-color: $routesCol;
+    //   background-color: $signalCol;
-      box-shadow: 0 0 6px 1px $routesCol;
+    //   box-shadow: 0 0 6px 1px $signalCol;
-    }
+    // }
-    &.status {
+    // &.routes {
-      background-color: $statusCol;
+    //   background-color: $routesCol;
-      box-shadow: 0 0 6px 1px $statusCol;
+    //   box-shadow: 0 0 6px 1px $routesCol;
-    }
+    // }
-    &.save {
+    // &.status {
-      background-color: $saveCol;
+    //   background-color: $statusCol;
-      box-shadow: 0 0 6px 1px $saveCol;
+    //   box-shadow: 0 0 6px 1px $statusCol;
-    }
+    // }
-    &.troll {
+    // &.save {
-      background-color: firebrick;
+    //   background-color: $saveCol;
-      box-shadow: 0 0 6px 1px firebrick;
+    //   box-shadow: 0 0 6px 1px $saveCol;
-    }
+    // }
-    &.mode {
+    // &.troll {
-      background-color: lightgreen;
+    //   background-color: firebrick;
-      color: black;
+    //   box-shadow: 0 0 6px 1px firebrick;
    // }
-      font-weight: 500;
+    // & {
-    }
+    background-color: forestgreen;
    font-weight: bold;
    // }
  }
 }
 </style>
@@ -17,7 +17,7 @@
        />
        <datalist id="sceneries">
-          <option v-for="scenery in store.stationList" :value="scenery.name"></option>
+          <option v-for="scenery in sortedStationList" :value="scenery.name"></option>
        </datalist>
      </label>
    </div>
@@ -26,15 +26,28 @@
      <div class="card" v-if="isVisible" tabindex="0" ref="cardEl">
        <div class="card_content">
          <div class="card_title flex">{{ $t('filters.title') }}</div>
          <p class="card_info" v-html="$t('filters.desc')"></p>
          <section class="card_options">
            <div class="option-section" v-for="section in filterStore.inputs.optionSections">
              <h3 class="text--primary">
                {{ $t(`filters.sections.${section}`) }}
                <button @click="filterStore.resetSectionOptions(section)">RESET</button>
              </h3>
              <hr />
              <div class="section-inputs">
                <filter-option
-              v-for="(option, i) in filterStore.inputs.options"
+                  v-for="(option, i) in filterStore.inputs.options.filter((o) => o.section == section)"
                  :option="option"
                  :key="i"
              @optionChange="handleChange"
                />
              </div>
            </div>
          </section>
          <section class="card_timestamp" style="text-align: center">
            <div>{{ $t('filters.minimum-hours-title') }}</div>
            <span class="clock">
@@ -80,6 +93,7 @@
              </div>
            </div>
          </section>
        </div>
        <section class="card_actions">
          <div class="action-buttons">
@@ -87,12 +101,18 @@
              {{ $t('filters.save') }}
            </button>
-              <button class="btn--action" @click="resetFilters">{{ $t('filters.reset') }}</button>
+            <button
              class="btn--action"
              @click="resetFilters"
              :disabled="filterStore.areFiltersAtDefault"
              :data-disabled="filterStore.areFiltersAtDefault"
            >
              {{ $t('filters.reset') }}
            </button>
            <button class="btn--action" @click="closeCard">{{ $t('filters.close') }}</button>
          </div>
        </section>
      </div>
      </div>
    </transition>
  </section>
 </template>
@@ -108,6 +128,7 @@ import { useStore } from '../../store/store';
 import ActionButton from '../Global/ActionButton.vue';
 import FilterOption from './FilterOption.vue';
 import { filterInitStates } from '../../store/constants/initFilterStates';
 export default defineComponent({
  components: { ActionButton, FilterOption },
@@ -150,6 +171,14 @@ export default defineComponent({
    this.currentRegion = this.store.region;
  },
  computed: {
    sortedStationList() {
      return this.store.stationList
        .filter((s) => s.name.toLocaleLowerCase().includes(this.chosenSearchScenery.toLocaleLowerCase()))
        .sort((s1, s2) => (s1.name > s2.name ? 1 : -1));
    },
  },
  watch: {
    chosenSearchScenery(value: string) {
      const chosenStation = this.store.stationList.find(({ name }) => name == value);
@@ -173,15 +202,6 @@ export default defineComponent({
      this.isVisible = !this.isVisible;
    },
    handleChange(change: { name: string; value: boolean }) {
      this.filterStore.changeFilterValue({
        name: change.name,
        value: !change.value,
      });
      if (this.saveOptions) StorageManager.setBooleanValue(change.name, change.value);
    },
    handleInput(e: Event) {
      const target = e.target as HTMLInputElement;
@@ -273,6 +293,14 @@ export default defineComponent({
 }
 .card {
  display: grid;
  grid-template-rows: 1fr auto;
  &_info {
    background-color: #111;
    padding: 0.5em;
  }
  &_controls {
    display: flex;
    gap: 0.5em;
@@ -284,13 +312,13 @@ export default defineComponent({
  }
  &_content {
    padding: 1em 0.5em;
    display: flex;
    flex-direction: column;
    gap: 1em;
-
+    overflow: auto;
    max-height: 90vh;
    padding: 1em;
  }
  &_title {
@@ -301,18 +329,6 @@ export default defineComponent({
    text-align: center;
  }
  &_options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(4, 1fr);
    gap: 0.5em;
    @include smallScreen() {
      grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
      grid-template-rows: auto;
    }
  }
  &_regions {
    display: flex;
    justify-content: center;
@@ -383,6 +399,9 @@ export default defineComponent({
  }
  &_actions {
    width: 100%;
    padding: 0.5em;
    .filter-option {
      max-width: 50%;
      margin: 0 auto;
@@ -401,14 +420,42 @@ export default defineComponent({
        padding: 0.5em;
        &[data-selected='true'] {
-          background-color: lightgreen;
+          background-color: forestgreen;
          color: black;
        }
      }
    }
  }
 }
 .card_options {
  .option-section h3 {
    display: flex;
    align-items: center;
    margin-bottom: 0.25em;
    gap: 0.5em;
    button {
      padding: 0.15em;
      color: coral;
    }
  }
  .section-inputs {
    display: grid;
    // flex-wrap: wrap;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    // grid-template-rows: repeat(3, 1fr);
    gap: 0.5em;
    margin: 1em 0;
    // @include smallScreen() {
    //   grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
    //   grid-template-rows: auto;
    // }
  }
 }
 .slider {
  display: flex;
  align-items: center;
@@ -100,7 +100,10 @@
            </td>
            <td class="station_dispatcher-exp">
-              <span v-if="station.onlineInfo" :style="calculateExpStyle(station.onlineInfo.dispatcherExp)">
+              <span
                v-if="station.onlineInfo"
                :style="calculateExpStyle(station.onlineInfo.dispatcherExp, station.onlineInfo.dispatcherIsSupporter)"
              >
                {{ 2 > station.onlineInfo.dispatcherExp ? 'L' : station.onlineInfo.dispatcherExp }}
              </span>
            </td>
@@ -2,18 +2,23 @@
  <div class="train-info" tabindex="0">
    <section class="train-route">
      <div class="train_general">
-        <span>
+        <b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
        <span class="timetable-id" v-if="train.timetableData">#{{ train.timetableData.timetableId }}</span>
-          <span class="timetable_warnings">
+        <span class="timetable_warnings" v-if="train.timetableData?.TWR || train.timetableData?.SKR">
          <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>
+        <strong>
-          <span>&nbsp;| {{ train.driverName }}&nbsp;</span>
+          <span v-if="train.timetableData" class="text--primary">{{ train.timetableData.category }}&nbsp;</span>
-          <b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
+          <span class="train-number">{{ train.trainNo }}</span>
-        </span>
+        </strong>
        <span>&bull;</span>
        <b class="level-badge driver" :style="calculateExpStyle(train.driverLevel, train.isSupporter)">
          {{ train.driverLevel < 2 ? 'L' : `${train.driverLevel}` }}
        </b>
        <span>{{ train.driverName }}</span>
      </div>
      <div class="timetable_route" v-if="train.timetableData">
@@ -36,9 +41,7 @@
      </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"
@@ -90,6 +93,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import imageMixin from '../../mixins/imageMixin';
 import styleMixin from '../../mixins/styleMixin';
 import trainInfoMixin from '../../mixins/trainInfoMixin';
 import Train from '../../scripts/interfaces/Train';
@@ -106,12 +110,14 @@ export default defineComponent({
    },
  },
-  mixins: [trainInfoMixin, imageMixin],
+  mixins: [trainInfoMixin, imageMixin, styleMixin],
 });
 </script>
 <style lang="scss" scoped>
@import '../../styles/responsive.scss';
@import '../../styles/badge.scss';
 .image-warning {
  height: 1em;
@@ -145,7 +151,6 @@ export default defineComponent({
 }
 .timetable-id {
  margin-right: 0.3em;
  color: #d2d2d2;
 }
@@ -155,9 +160,7 @@ export default defineComponent({
  display: inline-block;
  text-align: center;
-  width: 1.25em;
+  padding: 0 0.25em;
  height: 1.25em;
  border-radius: 50%;
 }
 .timetable_stops {
@@ -168,16 +171,20 @@ export default defineComponent({
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25em;
  margin-right: 1.5em;
 }
 .train-status-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em;
 }
 .train-badge {
-  padding: 0.15em 0.35em;
+  padding: 0.1em 0.2em;
-  margin-right: 0.3em;
+  border-radius: 0.2em;
  font-weight: bold;
  font-size: 0.9em;
@@ -191,7 +198,14 @@ export default defineComponent({
  }
  &.offline {
-    background-color: #b83b2d;
+    background-color: #9c362b;
  }
 }
 .train-driver {
  &.supporter {
    color: orange;
    text-shadow: orange 0 0 5px;
  }
 }
@@ -203,6 +217,9 @@ export default defineComponent({
 }
 .timetable_warnings {
  display: flex;
  gap: 0.2em;
  color: black;
 }
@@ -2,9 +2,10 @@
  <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="toggleShowOptions" ref="button">
+    <button class="filter-button btn--filled btn--image" @click="toggleShowOptions" ref="button">
      <img :src="getIcon('filter2')" alt="Open filters" />
      {{ $t('options.filters') }} [F]
      <span class="active-indicator" v-if="currentOptionsActive"></span>
    </button>
    <transition name="options-anim">
@@ -42,8 +43,8 @@
          <h1 class="option-title">{{ $t('options.sort-title') }}</h1>
          <div class="options_sorters">
            <div v-for="opt in translatedSorterOptions">
            <button
              v-for="opt in translatedSorterOptions"
              class="sort-option btn--option"
              :data-selected="opt.id == sorterActive.id"
              @click="onSorterChange(opt)"
@@ -51,23 +52,28 @@
              {{ opt.value.toUpperCase() }}
            </button>
          </div>
          </div>
          <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">
+            <div v-for="section in Object.keys(TrainFilterSection)">
-              <button class="btn--option" :data-disabled="!filter.isActive" @click="onFilterChange(filter)">
+              <button
                class="btn--option"
                v-for="filter in trainFilterList.filter((f) => f.section == section)"
                :data-inactive="!filter.isActive"
                @click="onFilterChange(filter)"
              >
                {{ $t(`options.filter-${filter.id}`) }}
              </button>
            </div>
          </div>
          <div class="filter-actions">
-              <button class="btn--action" @click="clearAllFilters">{{ $t('options.filter-clear') }}</button>
+            <div></div>
            <button class="btn--action" @click="resetAllFilters">{{ $t('options.filter-reset') }}</button>
          </div>
        </div>
      </div>
      </div>
    </transition>
  </div>
 </template>
@@ -79,6 +85,7 @@ import keyMixin from '../../mixins/keyMixin';
 import { TrainFilter } from '../../types/Trains/TrainOptionsTypes';
 import ActionButton from '../Global/ActionButton.vue';
 import SelectBox from '../Global/SelectBox.vue';
 import { TrainFilterSection } from '../../scripts/enums/TrainFilterType';
 export default defineComponent({
  components: { SelectBox, ActionButton },
@@ -89,11 +96,18 @@ export default defineComponent({
      type: Array as PropType<Array<string>>,
      required: true,
    },
    currentOptionsActive: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      showOptions: false,
      lastSelectedFilter: null as TrainFilter | null,
      TrainFilterSection,
    };
  },
@@ -136,7 +150,11 @@ export default defineComponent({
    },
    onFilterChange(filter: TrainFilter) {
      // if (this.lastSelectedFilter?.id === filter.id)
      //   this.trainFilterList.forEach((tf) => (tf.isActive = filter.id === tf.id));
      filter.isActive = !filter.isActive;
      this.lastSelectedFilter = filter;
    },
    clearAllFilters() {
@@ -172,13 +190,24 @@ export default defineComponent({
  margin: 0 auto;
 }
-.filter-option {
+.options_sorters {
  display: flex;
  grid-template-columns: repeat(3, 1fr);
 }
 .options_filters > div {
  display: flex;
  width: 100%;
  gap: 0.5em;
  button {
-    color: white;
+    width: 100%;
    color: springgreen;
    font-weight: bold;
-    &[data-disabled='true'] {
+    &[data-inactive='true'] {
-      color: #888;
+      color: #aaa;
    }
  }
 }
@@ -190,7 +219,7 @@ export default defineComponent({
  margin-top: 1em;
-  button {
+  > * {
    width: 100%;
  }
 }
@@ -89,6 +89,7 @@ import dateMixin from '../../mixins/dateMixin';
 import imageMixin from '../../mixins/imageMixin';
 import Train from '../../scripts/interfaces/Train';
 import TrainStop from '../../scripts/interfaces/TrainStop';
 import { useStore } from '../../store/store';
 import StopDate from '../Global/StopDate.vue';
 export default defineComponent({
@@ -106,6 +107,8 @@ export default defineComponent({
  setup(props) {
    return {
      store: useStore(),
      lastConfirmed: computed(() => {
        return props.train.timetableData!.followingStops.findIndex(
          (stop, i, stops) => stop.confirmed && !stops[i + 1]?.confirmed && !stops[i + 1]?.stopped
@@ -424,3 +427,4 @@ ul.stop_list > li.stop {
  }
 }
 </style>
@@ -2,18 +2,17 @@
  <div class="train-table">
    <transition name="anim" mode="out-in">
      <div :key="store.dataStatuses.trains">
-        <Loading v-if="trains.length == 0 && store.dataStatuses.trains == 0" />
+        <div class="table-info" v-if="store.isOffline">
          {{ $t('app.offline') }}
        </div>
-        <div class="table-info no-trains" v-if="trains.length == 0 && store.dataStatuses.trains != 0">
+        <Loading v-else-if="trains.length == 0 && store.dataStatuses.trains == 0" />
        <div class="table-info no-trains" v-else-if="trains.length == 0 && store.dataStatuses.trains != 0">
          {{ $t('trains.no-trains') }}
        </div>
-        <div class="timeouts-warning" v-if="trainNumbersWithTimeouts.length != 0">
+        <transition-group name="list-anim" tag="ul" class="train-list" v-else>
          <b class="warning-timeout">?</b>
          {{ $t('trains.timeout') }}
        </div>
        <ul class="train-list">
          <li
            class="train-row"
            v-for="train in currentTrains"
@@ -23,7 +22,7 @@
          >
            <TrainInfo :train="train" />
          </li>
-        </ul>
+        </transition-group>
      </div>
    </transition>
  </div>
@@ -67,18 +66,9 @@ export default defineComponent({
        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) {
@@ -94,6 +84,7 @@ export default defineComponent({
 <style lang="scss" scoped>
@import '../../styles/responsive.scss';
@import '../../styles/animations.scss';
 .anim {
  &-enter-from,
@@ -154,7 +145,7 @@ img.train-image {
 .train {
  &-list {
-    overflow: auto;
+    position: relative;
    @include smallScreen() {
      width: 100%;
@@ -1,33 +1,58 @@
-import { TrainFilterType } from '../../scripts/enums/TrainFilterType';
+import { TrainFilterSection, TrainFilterType } from '../../scripts/enums/TrainFilterType';
 import { TrainFilter } from '../../types/Trains/TrainOptionsTypes';
 export const trainFilters: TrainFilter[] = [
  {
    id: TrainFilterType.twr,
    section: TrainFilterSection.TRAIN_TYPE,
    isActive: true,
  },
  {
    id: TrainFilterType.skr,
    section: TrainFilterSection.TRAIN_TYPE,
    isActive: true,
  },
  {
    id: TrainFilterType.common,
    section: TrainFilterSection.TRAIN_TYPE,
    isActive: true,
  },
  {
    id: TrainFilterType.passenger,
    section: TrainFilterSection.TIMETABLE_TYPE,
    isActive: true,
  },
  {
    id: TrainFilterType.freight,
    section: TrainFilterSection.TIMETABLE_TYPE,
    isActive: true,
  },
  {
    id: TrainFilterType.other,
    section: TrainFilterSection.TIMETABLE_TYPE,
    isActive: true,
  },
  {
    id: TrainFilterType.withComments,
    section: TrainFilterSection.COMMENTS,
    isActive: true,
  },
  {
-    id: TrainFilterType.comments,
+    id: TrainFilterType.noComments,
    section: TrainFilterSection.COMMENTS,
    isActive: true,
  },
  {
    id: TrainFilterType.withTimetable,
    section: TrainFilterSection.TIMETABLE,
    isActive: true,
  },
  {
    id: TrainFilterType.noTimetable,
    section: TrainFilterSection.TIMETABLE,
    isActive: true,
  },
 ];
@@ -37,6 +62,10 @@ export const sorterOptions = [
    id: 'distance',
    value: 'kilometraż',
  },
  {
    id: 'id',
    value: 'id rozkładu',
  },
  {
    id: 'progress',
    value: 'przebyta trasa',
@@ -1,41 +1,38 @@
 {
  "optionSections": ["reality", "package-access", "access", "control", "addons", "blockades", "signals", "status"],
  "options": [
    {
      "id": "default",
      "name": "default",
      "iconName": "td2",
      "section": "access",
      "value": true,
      "defaultValue": true
    },
    {
      "id": "not-default",
      "name": "notDefault",
      "iconName": "",
      "section": "access",
      "value": true,
      "defaultValue": true
    },
    {
      "id": "real",
      "name": "real",
-      "iconName": "lock",
+      "section": "reality",
      "section": "access",
      "value": true,
      "defaultValue": true
    },
    {
      "id": "fictional",
      "name": "fictional",
-      "iconName": "user",
+      "section": "reality",
-      "section": "access",
+      "value": true,
      "defaultValue": true
    },
    {
      "id": "default",
      "name": "default",
      "section": "package-access",
      "value": true,
      "defaultValue": true
    },
    {
      "id": "not-default",
      "name": "notDefault",
      "section": "package-access",
      "value": true,
      "defaultValue": true
    },
    {
      "id": "non-public",
      "name": "nonPublic",
      "iconName": "user",
      "section": "access",
      "value": true,
      "defaultValue": true
@@ -43,7 +40,6 @@
    {
      "id": "unavailable",
      "name": "unavailable",
      "iconName": "user",
      "section": "access",
      "value": false,
      "defaultValue": false
@@ -51,7 +47,6 @@
    {
      "id": "abandoned",
      "name": "abandoned",
      "iconName": "user",
      "section": "access",
      "value": false,
      "defaultValue": false
@@ -59,7 +54,6 @@
    {
      "id": "SPK",
      "name": "SPK",
      "iconName": "SPK",
      "section": "control",
      "value": true,
      "defaultValue": true
@@ -67,7 +61,6 @@
    {
      "id": "SCS",
      "name": "SCS",
      "iconName": "SCS",
      "section": "control",
      "value": true,
      "defaultValue": true
@@ -75,15 +68,21 @@
    {
      "id": "SPE",
      "name": "SPE",
-      "iconName": "SPE",
+      "section": "control",
      "value": true,
      "defaultValue": true
    },
    {
      "id": "SPK-M",
      "name": "mechaniczne+SPK",
      "section": "control",
      "value": true,
      "defaultValue": true
    },
    {
-      "id": "manual",
+      "id": "SCS-M",
-      "name": "ręczne",
+      "name": "mechaniczne+SCS",
      "iconName": "ręczne",
      "section": "control",
      "value": true,
      "defaultValue": true
@@ -91,7 +90,27 @@
    {
      "id": "mechanical",
      "name": "mechaniczne",
-      "iconName": "mechaniczne",
+      "section": "control",
      "value": true,
      "defaultValue": true
    },
    {
      "id": "SPK-R",
      "name": "ręczne+SPK",
      "section": "control",
      "value": true,
      "defaultValue": true
    },
    {
      "id": "SCS-R",
      "name": "ręczne+SCS",
      "section": "control",
      "value": true,
      "defaultValue": true
    },
    {
      "id": "manual",
      "name": "ręczne",
      "section": "control",
      "value": true,
      "defaultValue": true
@@ -99,23 +118,34 @@
    {
      "id": "SUP",
      "name": "SUP",
-      "iconName": "SUP",
+      "section": "addons",
-      "section": "control",
+      "value": true,
      "defaultValue": true
    },
    {
      "id": "noSUP",
      "name": "noSUP",
      "section": "addons",
      "value": true,
      "defaultValue": true
    },
    {
      "id": "SBL",
      "name": "SBL",
-      "iconName": "SBL",
+      "section": "blockades",
-      "section": "routes",
+      "value": true,
      "defaultValue": true
    },
    {
      "id": "PBL",
      "name": "PBL",
      "section": "blockades",
      "value": true,
      "defaultValue": true
    },
    {
      "id": "modern",
      "name": "współczesna",
      "iconName": "współczesna",
      "section": "signals",
      "value": true,
      "defaultValue": true
@@ -123,7 +153,6 @@
    {
      "id": "semaphores",
      "name": "kształtowa",
      "iconName": "kształtowa",
      "section": "signals",
      "value": true,
      "defaultValue": true
@@ -131,7 +160,6 @@
    {
      "id": "mixed",
      "name": "mieszana",
      "iconName": "mieszana",
      "section": "signals",
      "value": true,
      "defaultValue": true
@@ -139,7 +167,6 @@
    {
      "id": "historical",
      "name": "historyczna",
      "iconName": "historyczna",
      "section": "signals",
      "value": true,
      "defaultValue": true
@@ -148,7 +175,6 @@
    {
      "id": "free",
      "name": "free",
      "iconName": "",
      "section": "status",
      "value": false,
@@ -157,7 +183,6 @@
    {
      "id": "occupied",
      "name": "occupied",
      "iconName": "",
      "section": "status",
      "value": true,
@@ -166,7 +191,6 @@
    {
      "id": "endingStatus",
      "name": "endingStatus",
      "iconName": "",
      "section": "status",
      "value": true,
@@ -175,7 +199,6 @@
    {
      "id": "afkStatus",
      "name": "afkStatus",
      "iconName": "",
      "section": "status",
      "value": true,
@@ -184,7 +207,6 @@
    {
      "id": "noSpaceStatus",
      "name": "noSpaceStatus",
      "iconName": "",
      "section": "status",
      "value": true,
@@ -193,7 +215,6 @@
    {
      "id": "unavailableStatus",
      "name": "unavailableStatus",
      "iconName": "",
      "section": "status",
      "value": true,
@@ -254,7 +275,6 @@
    {
      "id": "include-selected",
      "name": "include-selected",
      "iconName": "",
      "section": "mode",
      "value": true,
      "defaultValue": true
@@ -262,7 +282,6 @@
    {
      "id": "save",
      "name": "save",
      "iconName": "",
      "section": "mode",
      "value": true,
      "defaultValue": true
@@ -1,4 +1,8 @@
 {
  "general": {
    "and": " and ",
    "refresh": "REFRESH"
  },
  "app": {
    "sceneries": "SCENERIES",
    "trains": "TRAINS",
@@ -8,15 +12,18 @@
    "error": "An error occured while loading data!",
    "no-result": "No results for current search!",
    "migration-warning": "Stacjownik services will be unavailable 2/06/2022 between 1-3am (CEST time) due to the migration of API hostings!",
-    "migration-confirm": "Roger that!"
+    "migration-confirm": "Roger that!",
    "offline": "App is in the offline mode!"
  },
  "update": {
-    "title": "New Stacjownik version is available!",
+    "title": "New version of the app 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!"
+    "confirm-button": "UPDATE NOW",
    "later-button": "LATER"
  },
  "data-status": {
    "S1-offline": "<b>S1 signal</b> <br> The app is working in offline mode!",
    "S1a-connection": "<b>S1a signal</b> <br> Cannot connect with Stacjownik API service!",
    "S1a-sceneries": "<b>S1a signal</b> <br> Cannot load online stations data!",
    "S2": "<b>S2 signal</b> <br> All data loaded successfully!",
@@ -28,7 +35,7 @@
  "desc": {
    "control-type": "Control type: ",
    "signals-type": "Signals type:  ",
-    "SBL": "This scenery has automatic line blockade system on following routes: ",
+    "SBL": "This scenery has automatic block signalling (ABS/SBL) system on following routes: ",
    "SUP": "Requires the SUP application (level crossing remote control simulator)",
    "TWB-all": "This scenery has two-way route blockade on all routes",
    "TWB-routes": "This scenery has two-way route blockade on following routes: ",
@@ -87,7 +94,8 @@
    "search-dispatcher": "Dispatcher name",
    "search-station": "Scenery name",
    "search-author": "Timetable author name",
-    "search-date": "Timetable date (CEST / GMT+2)",
+    "search-timetables-date": "Timetable date (CEST / GMT+2)",
    "search-dispatchers-date": "Service date (CEST / GMT+2)",
    "sort-mass": "mass",
    "sort-speed": "speed",
@@ -96,6 +104,7 @@
    "sort-timetable": "train no.",
    "sort-progress": "route progress",
    "sort-delay": "current delay",
    "sort-id": "timetable id",
    "sort-total-stops": "total stops",
    "sort-beginDate": "date",
@@ -103,13 +112,16 @@
    "sort-timestampFrom": "date",
    "sort-duration": "duration",
-    "filter-comments": "COMMENTS",
+    "filter-noComments": "NO COMMENTS",
-    "filter-twr": "TWR",
+    "filter-withComments": "COMMENTS",
-    "filter-skr": "SKR",
+    "filter-twr": "HIGH RISK CARGO",
    "filter-skr": "EXCEEDED GAUGE",
    "filter-common": "NO WARNINGS",
    "filter-passenger": "PASSENGER",
    "filter-freight": "FREIGHT",
    "filter-other": "OTHER",
    "filter-noTimetable": "NO TIMETABLE",
    "filter-withTimetable": "TIMETABLE",
    "filter-reset": "RESET FILTERS",
    "filter-clear": "CLEAR FILTERS",
@@ -120,14 +132,27 @@
    "filter-active": "ACTIVE"
  },
  "filters": {
    "desc": " &bull; Left mouse click: select / unselect chosen filter <br /> &bull; Double left click: unselect all filters but chosen from a <b class='text--primary'>group</b> <br /> &bull; <span style='color: coral'>RESET</span>: reset all filters from a <b class='text--primary'>group</b>",
    "sections": {
      "reality": "SCENERY REALITY",
      "package-access": "IN-GAME AVAILABILITY",
      "access": "GENERAL AVAILABILITY",
      "control": "CONTROLS",
      "signals": "SIGNALLING",
      "addons": "ADDITIONAL PROGRAMS",
      "blockades": "BLOCK SIGNALLING",
      "status": "ONLINE STATUS"
    },
    "endingStatus": "ENDS SOON",
    "afkStatus": "AFK",
    "noSpaceStatus": "NO SPACE",
    "unavailableStatus": "UNAVAILABLE",
-    "title": "STATION FILTER",
+    "title": "STATION FILTERS",
-    "default": "DEFAULT",
+    "default": "IN-GAME",
-    "not-default": "OTHER",
+    "not-default": "ADDITIONAL",
    "real": "REAL",
    "fictional": "FICTIONAL",
    "unavailable": "UNSUPPORTED",
@@ -135,12 +160,22 @@
    "abandoned": "ABANDONED",
    "SPK": "SPK",
    "SPK-R": "SPK + MANUAL",
    "SPK-M": "SPK + MECH.",
    "SCS": "SCS",
    "SCS-R": "SCS + MANUAL",
    "SCS-M": "SCS + MECH.",
    "SPE": "SPE",
    "manual": "MANUAL",
    "mechanical": "MECHANICAL",
-    "SUP": "SUP",
+
-    "SBL": "SBL",
+    "SUP": "SUP (RASP-UZK)",
    "noSUP": "WITHOUT SUP",
    "SBL": "AUTOMATIC (SBL)",
    "PBL": "SEMIAUTOMATIC (PBL)",
    "modern": "MODERN",
    "semaphores": "SEMAPHORES",
    "mixed": "MIXED",
@@ -161,7 +196,7 @@
    "hour": "h",
    "no-limit": "NO LIMIT",
    "include-selected": "INCLUDE SELECTED",
-    "save": "SAVE FILTERS",
+    "save": "REMEMBER FILTERS",
    "reset": "RESET FILTERS",
    "close": "CLOSE FILTERS"
  },
@@ -246,20 +281,39 @@
    "minutes": "{minutes} mins",
    "hours": "{hours}h {minutes} mins",
-    "stock-info": "STOCK INFO",
+    "stock-info": "EXTRA INFO",
    "stock-length": "Length",
    "stock-mass": "Mass",
    "stock-max-speed": "Maximum registered speed",
    "load-data": "Load further data...",
    "last-seen-at": "Last seen at",
    "currently-at": "Currently at",
    "stats-title": "DRIVING STATISTICS OF",
    "stats-timetables": "TIMETABLES",
    "stats-longest-timetable": "LONGEST TIMETABLE",
    "stats-avg-timetable": "AVERAGE TIMETABLE LENGTH",
    "stats-distance": "DISTANCE",
-    "stats-stations": "STATIONS"
+    "stats-stations": "STATIONS",
    "timetable-stats-total": "Today, dispatchers made so far {count} with total distance of {distance}",
    "timetable-stats-longest": "The longest timetable today is #{id} made by {author} for {driver} - {distance}",
    "timetable-stats-most-active": "The most active dispatcher today is {dispatcher} who created {count}",
    "timetable-stats-most-active-many": "The most active dispatchers today are {dispatchers} who created {count} each",
    "timetable-count": "timetable | timetables",
    "daily-stats-title": "DAILY STATS",
    "daily-stats-info": "Today's statistics are unavailable yet!",
    "driver-stats-title": "DRIVER STATS",
    "driver-stats-info": "Enter a proper nickname into filters [F] to see user's driving statistics!",
    "stats-loading": "Fetching statistics...",
    "stats-error": "Oops! An unexpected error occurred while trying to fetch statistics! :/"
  },
  "scenery": {
    "users": "PLAYERS ONLINE",
@@ -280,16 +334,26 @@
    "two-way-routes": "Two way routes",
    "option-active-timetables": "Active timetables",
-    "option-timetables-history": "Scenery timetables history",
+    "option-timetables-history": "Timetables history",
-    "option-dispatchers-history": "Scenery dispatchers history",
+    "option-dispatchers-history": "Dispatchers history",
    "timetable-author-title": "Issued by",
    "timetable-author-unknown": "Author unknown",
    "timetables-history-id": "ID",
    "timetables-history-number": "Number",
    "timetables-history-route": "Route",
    "timetables-history-driver": "Driver",
    "timetables-history-author": "TT author",
    "timetables-history-date": "Date",
    "req-level": "all dispatcher levels | dispatcher level {lvl} required | dispatcher level {lvl} required",
    "history-list-empty": "No recorded scenery history!",
-    "forum-topic": "Official {name} forum topic"
+    "forum-topic": "Official {name} forum topic",
    "pragotron-link": "Timetable pallet board (beta)",
    "tablice-link": "Timetable summary board (by Thundo)"
  },
  "availability": {
    "title": "Availability",
@@ -1,4 +1,8 @@
 {
  "general": {
    "and": " oraz ",
    "refresh": "ODŚWIEŻ"
  },
  "app": {
    "sceneries": "SCENERIE",
    "trains": "POCIĄGI",
@@ -8,17 +12,20 @@
    "error": "Wystąpił problem z załadowaniem danych!",
    "no-result": "Brak wyników o podanych kryteriach!",
    "migration-warning": "Usługi Stacjownika będą niedostępne w godzinach 1:00-3:00 2 czerwca 2022r. z powodu migracji hostingów API!",
-    "migration-confirm": "Przyjąłem!"
+    "migration-confirm": "Przyjąłem!",
    "offline": "Aplikacja w trybie offline!"
  },
  "update": {
    "title": "Nowa wersja Stacjownika jest dostępna!",
    "paragraph1": "Miłego korzystania z aplikacji i niech S2 będzie z wami!",
    "release-link": "Kliknij, aby przejrzeć listę zmian (GitHub)",
-    "confirm-button": "Przyjąłem!"
+    "confirm-button": "ZAKTUALIZUJ",
    "later-button": "PÓŹNIEJ"
  },
  "data-status": {
    "S1-offline": "<b>Sygnał S1</b> <br> Aplikacja działa w trybie offline!",
    "S1a-connection": "<b>Sygnał S1a</b> <br> Błąd podczas próby połączenia się z API Stacjownika!",
    "S1a-sceneries": "<b>Sygnał S1a</b> <br> Błąd podczas pobierania danych o sceneriach online!",
    "S2": "<b>Sygnał S2</b> <br> Pomyślnie załadowano dane!",
@@ -89,7 +96,8 @@
    "search-dispatcher": "Nick dyżurnego",
    "search-station": "Nazwa scenerii",
    "search-author": "Nick autora rozkładu jazdy",
-    "search-date": "Data rozkładu jazdy (czas polski)",
+    "search-timetables-date": "Data rozkładu jazdy (czas polski)",
    "search-dispatchers-date": "Data służby (czas polski)",
    "sort-distance": "kilometraż",
    "sort-total-stops": "stacje",
@@ -97,6 +105,7 @@
    "sort-timetableId": "ID rozkładu",
    "sort-timestampFrom": "data",
    "sort-duration": "czas dyżuru",
    "sort-id": "id rozkładu",
    "sort-mass": "masa",
    "sort-speed": "prędkość",
@@ -106,13 +115,16 @@
    "sort-delay": "opóźnienie",
    "sort-comments": "uwagi ekspl.",
-    "filter-comments": "UWAGI EKSPLOATACYJNE",
+    "filter-withComments": "UWAGI EKSPLOATACYJNE",
-    "filter-twr": "TWR",
+    "filter-noComments": "BEZ UWAG",
-    "filter-skr": "PRZEKR. SKRAJNIA",
+    "filter-twr": "WYS. RYZYKA",
    "filter-skr": "SKRAJNIA",
    "filter-common": "ZWYKŁE",
    "filter-passenger": "PASAŻERSKIE",
    "filter-freight": "TOWAROWE",
    "filter-other": "INNE",
    "filter-noTimetable": "BEZ RJ",
    "filter-withTimetable": "ROZKŁAD JAZDY",
    "filter-reset": "ZRESETUJ FILTRY",
    "filter-clear": "WYŁĄCZ FILTRY",
@@ -123,6 +135,19 @@
    "filter-active": "AKTYWNE"
  },
  "filters": {
    "desc": " &bull; Kliknięcie: zaznaczenie / odznaczenie filtru <br /> &bull; Podwójne kliknięcie: odznaczenie reszty filtrów z <b class='text--primary'>grupy</b> <br /> &bull; <span style='color: coral'>RESET</span>: zresetowanie filtrów z <b class='text--primary'>grupy</b>",
    "sections": {
      "reality": "FIKCYJNOŚĆ SCENERII",
      "package-access": "DOSTĘPNOŚĆ W PACZCE",
      "access": "DOSTĘPNOŚĆ OGÓLNA",
      "control": "TYP STEROWANIA",
      "signals": "TYP SYGNALIZACJI",
      "addons": "DODATKOWE PROGRAMY",
      "blockades": "BLOKADY LINIOWE",
      "status": "STATUS ONLINE"
    },
    "endingStatus": "KOŃCZY",
    "afkStatus": "Z/W",
    "noSpaceStatus": "BRAK MIEJSCA",
@@ -138,18 +163,29 @@
    "abandoned": "WYCOFANA",
    "SPK": "SPK",
    "SPK-R": "SPK + RĘCZNE",
    "SPK-M": "SPK + MECH.",
    "SCS": "SCS",
    "SCS-R": "SCS + RĘCZNE",
    "SCS-M": "SCS + MECH.",
    "SPE": "SPE",
    "manual": "RĘCZNE",
-    "SUP": "SUP",
+
-    "SBL": "SBL",
+    "SUP": "SUP (RASP-UZK)",
    "noSUP": "BEZ SUP",
    "SBL": "SAMOCZYNNA",
    "PBL": "PÓŁSAMOCZYNNA",
    "mechanical": "MECHANICZNE",
    "modern": "WSPÓŁCZESNA",
    "semaphores": "KSZTAŁTOWA",
    "mixed": "MIESZANA",
    "historical": "HISTORYCZNA",
    "free": "WOLNA",
    "occupied": "ZAJĘTA",
    "sliders": {
      "min-lvl": "MIN. WYMAGANY POZIOM DYŻURNEGO",
      "max-lvl": "MAKS. WYMAGANY POZIOM DYŻURNEGO",
@@ -158,13 +194,14 @@
      "routes-2t-cat": "SZLAKI DWUTOROWE ZELEKTR. (MINIMUM)",
      "routes-2t-other": "SZLAKI DWUTOROWE NIEZELEKTR. (MINIMUM)"
    },
    "authors-search": "Szukaj autora (uwzględnia inne filtry)",
    "minimum-hours-title": "POKAŻ TYLKO SCENERIE DOSTĘPNE MINIMUM DO:",
    "now": "TERAZ",
    "hour": " godz.",
    "no-limit": "BEZ LIMITU",
    "include-selected": "POKAŻ ZAZNACZONE",
-    "save": "ZAPISZ FILTRY",
+    "save": "ZAPAMIĘTAJ FILTRY",
    "reset": "RESETUJ FILTRY",
    "close": "ZAMKNIJ FILTRY"
  },
@@ -250,7 +287,7 @@
    "timetable-fulfilled": "WYPEŁNIONY",
    "timetable-abandoned": "PORZUCONY",
-    "stock-info": "INFORMACJE O SKŁADZIE",
+    "stock-info": "DODATKOWE INFORMACJE",
    "stock-length": "Długość",
    "stock-mass": "Masa",
    "stock-max-speed": "Maks. zarejestrowana prędkość",
@@ -259,11 +296,30 @@
    "stats-title": "STATYSTYKI MASZYNISTY",
    "last-seen-at": "Ostatnio widziany na: ",
    "currently-at": "Obecnie na scenerii: ",
    "stats-timetables": "ROZKŁADY JAZDY",
    "stats-longest-timetable": "NAJDŁUŻSZY RJ",
    "stats-avg-timetable": "ŚREDNIA DŁUGOŚĆ RJ",
    "stats-distance": "DYSTANS",
-    "stats-stations": "STACJE"
+    "stats-stations": "STACJE",
    "timetable-stats-total": "Dyżurni stworzyli dziś {count}  o łącznym dystansie {distance}",
    "timetable-stats-longest": "Najdłuższym rozkładem jazdy jest dzisiaj #{id} stworzony przez dyżurnego {author} dla maszynisty {driver} - {distance}",
    "timetable-stats-most-active": "Dzisiejszym najaktywniejszym dyżurnym jest {dispatcher}, który stworzył {count}",
    "timetable-stats-most-active-many": "Dzisiejszymi najaktywniejszymi dyżurnymi są {dispatchers}, którzy stworzyli po {count}",
    "timetable-count": "rozkład jazdy | rozkładów jazdy",
    "daily-stats-title": "STATYSTYKI DNIA",
    "daily-stats-info": "Dzisiejsze statystyki nie są jeszcze dostępne!",
    "driver-stats-title": "STATYSTYKI GRACZA",
    "driver-stats-info": "Wpisz nazwę użytkownika w filtrach [F], aby zobaczyć jego statystyki maszynisty!",
    "stats-loading": "Pobieranie statystyk...",
    "stats-error": "Ups! Wystąpił błąd podczas próby pobrania statystyk! :/"
  },
  "scenery": {
    "users": "GRACZE ONLINE",
@@ -276,7 +332,7 @@
    "no-scenery": "Ups! Ta sceneria nie istnieje!",
    "return-btn": "Wróć na stronę główną",
    "history-btn": "Przejdź do widoku historii dyżurnych ruchu",
-    "info-btn": "Wróc do widoku scenerii",
+    "info-btn": "Wróć do widoku scenerii",
    "authors-title": "Autor scenerii | Autorzy scenerii",
    "lines-title": "Rzeczywiste linie",
    "project-title": "Projekt",
@@ -284,16 +340,26 @@
    "two-way-routes": "Szlaki dwutorowe",
    "option-active-timetables": "Aktywne rozkłady jazdy",
-    "option-timetables-history": "Historia rozkładów scenerii",
+    "option-timetables-history": "Historia rozkładów",
-    "option-dispatchers-history": "Historia dyżurów scenerii",
+    "option-dispatchers-history": "Historia dyżurów",
    "timetable-author-title": "Wydany przez",
    "timetable-author-unknown": "Autor nieznany",
    "timetables-history-id": "ID",
    "timetables-history-number": "Numer",
    "timetables-history-route": "Trasa",
    "timetables-history-driver": "Maszynista",
    "timetables-history-author": "Autor RJ",
    "timetables-history-date": "Data",
    "req-level": "ogólnodostępna | minimum {lvl} poziom dyżurnego | minimum {lvl} poziom dyżurnego",
    "history-list-empty": "Brak historii dla tej scenerii!",
-    "forum-topic": "Oficjalny wątek scenerii {name}"
+    "forum-topic": "Oficjalny wątek scenerii {name}",
    "pragotron-link": "Paletowa tablica informacyjna (beta)",
    "tablice-link": "Tablica informacyjna zbiorcza (autorstwa Thundo)"
  },
  "availability": {
    "title": "Dostępność",
@@ -7,9 +7,12 @@ import plLang from './locales/pl.json';
 import { createI18n } from 'vue-i18n';
 import { createPinia } from 'pinia';
 import { registerSW } from 'virtual:pwa-register';
 const i18n = createI18n({
  locale: 'pl',
  legacy: false,
  warnHtmlMessage: false,
  fallbackLocale: 'pl',
  messages: {
    en: enLang,
@@ -18,6 +21,15 @@ const i18n = createI18n({
  enableLegacy: false,
 });
 registerSW({
  onRegistered(r) {
    r &&
      setInterval(() => {
        r.update();
      }, 60 * 60 * 1000);
  },
 });
 const clickOutsideDirective: Directive = {
  mounted(el, binding) {
    el.clickOutsideEvent = (event: Event) => {
@@ -2,7 +2,7 @@ import { defineComponent } from 'vue';
 import { useStore } from '../store/store';
 export default defineComponent({
-  setup() {
+  data() {
    return {
      store: useStore(),
    };
@@ -5,10 +5,16 @@ export default defineComponent({
    calculateExpStyle(exp: number, isSupporter = false): string {
      const bgColor = exp > -1 ? (exp < 2 ? '#26B0D9' : `hsl(${-exp * 5 + 100},  85%, 50%)`) : '#666';
-      const fontColor = exp > 15 || exp == -1 ? 'white' : 'black';
+      const fontColor = exp > 14 || exp == -1 ? 'white' : 'black';
-      const boxShadow = isSupporter ? `box-shadow: 0 0 10px 2px ${bgColor};` : '';
+      const boxShadow = isSupporter ? `box-shadow: 0 0 6px 2px ${bgColor};` : '';
-      return `background-color: ${bgColor}; color: ${fontColor}; ${boxShadow}`;
+      return `background-color: ${bgColor}; color: ${fontColor}; ${boxShadow};`;
    },
    calculateTextExpStyle(exp: number, isSupporter = false): string {
      const textColor = exp > -1 ? (exp < 2 ? '#26B0D9' : `hsl(${-exp * 5 + 100},  75%, 50%)`) : '#666';
      return `color: ${textColor}; ${isSupporter ? 'text-shadow: 0 0 6px ' + textColor : ''};`;
    },
    statusClasses(occupiedTo: string) {
@@ -41,6 +47,6 @@ export default defineComponent({
      }
      return className;
-    }
+    },
-  }
+  },
-})
+});
@@ -0,0 +1,13 @@
 import { useRegisterSW } from 'virtual:pwa-register/vue';
 export default () => {
  const { needRefresh, updateServiceWorker, offlineReady } = useRegisterSW({
    immediate: true,
  });
  return {
    needRefresh,
    updateServiceWorker,
    offlineReady,
  };
 };
@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
-import JournalDispatchersVue from '../components/JournalView/JournalDispatchers.vue';
+import JournalDispatchersVue from '../views/JournalDispatchers.vue';
-import JournalTimetablesVue from '../components/JournalView/JournalTimetables.vue';
+import JournalTimetablesVue from '../views/JournalTimetables.vue';
 const routes: Array<RouteRecordRaw> = [
  {
@@ -21,23 +21,10 @@ const routes: Array<RouteRecordRaw> = [
  },
  {
    path: '/journal',
-    name: 'JournalView',
+    redirect: '/journal/timetables'
    component: () => import('../views/JournalView.vue'),
    children: [
      {
        path: '',
        name: 'JournalTimetables',
        component: JournalTimetablesVue,
        alias: '/timetables',
  },
  {
-        path: 'dispatchers',
+    path: '/journal/timetables',
        name: 'JournalDispatchers',
        component: JournalDispatchersVue,
        props: (route) => ({ sceneryName: route.query.sceneryName, dispatcherName: route.query.dispatcherName }),
      },
      {
        path: 'timetables',
    name: 'JournalTimetables',
    component: JournalTimetablesVue,
    props: (route) => ({
@@ -46,7 +33,11 @@ const routes: Array<RouteRecordRaw> = [
      timetableId: route.query.timetableId,
    }),
  },
-    ],
+  {
    path: '/journal/dispatchers',
    name: 'JournalDispatchers',
    component: JournalDispatchersVue,
    props: (route) => ({ sceneryName: route.query.sceneryName, dispatcherName: route.query.dispatcherName }),
  },
  {
    path: '/:catchAll(.*)',
@@ -1,9 +1,21 @@
-export const enum TrainFilterType {
+export enum TrainFilterSection {
-    comments = "comments",
+  TRAIN_TYPE = 'TRAIN_TYPE',
-    twr = "twr",
+  TIMETABLE_TYPE = 'TIMETABLE_TYPE',
-    skr = "skr",
+  COMMENTS = 'COMMENTS',
-    passenger = "passenger",
+  TIMETABLE = 'TIMETABLE',
-    freight = "freight",
+}
-    other = "other",
+
-    noTimetable = "noTimetable"
+export const enum TrainFilterType {
  noComments = 'noComments',
  withComments = 'withComments',
  twr = 'twr',
  skr = 'skr',
  common = 'common',
  passenger = 'passenger',
  freight = 'freight',
  other = 'other',
  noTimetable = 'noTimetable',
  withTimetable = 'withTimetable',
 }
@@ -1,16 +1,22 @@
 export default interface Filter {
-  [key: string]: (boolean | number | string),
+  [key: string]: boolean | number | string;
  default: boolean;
  notDefault: boolean;
  real: boolean;
  fictional: boolean;
-  "SPK": boolean;
+  SPK: boolean;
-  "SCS": boolean;
+  SCS: boolean;
-  "SPE": boolean;
+  SPE: boolean;
-  "SUP": boolean;
+  SUP: boolean;
  noSUP: boolean;
  ręczne: boolean;
  'ręczne+SPK': boolean;
  'ręczne+SCS': boolean;
  mechaniczne: boolean;
-  "SBL": boolean;
+  'mechaniczne+SPK': boolean;
  'mechaniczne+SCS': boolean;
  SBL: boolean;
  PBL: boolean;
  współczesna: boolean;
  kształtowa: boolean;
  historyczna: boolean;
@@ -14,6 +14,7 @@ export default interface Station {
    lines: string;
    project: string;
    projectUrl?: string;
    signalType: string;
    controlType: string;
@@ -1,12 +1,13 @@
 export default interface StationRoutes {
-    oneWay:
+  oneWay: {
    {
    name: string;
    catenary: boolean;
    SBL: boolean;
    TWB: boolean;
    isInternal: boolean;
    tracks: number;
    speed: number;
    length: number;
  }[];
  twoWay: {
@@ -16,6 +17,8 @@ export default interface StationRoutes {
    TWB: boolean;
    isInternal: boolean;
    tracks: number;
    speed: number;
    length: number;
  }[];
  /* [catenary, noCatenary] */
@@ -12,6 +12,7 @@ export default interface Train {
  driverId: number;
  trainNo: number;
  driverName: string;
  driverLevel: number;
  currentStationName: string;
  currentStationHash: string;
  locoURL: string;
@@ -22,6 +23,7 @@ export default interface Train {
  cars: string[];
  isTimeout: boolean;
  isSupporter: boolean;
  timetableData?: {
    timetableId: number;
@@ -4,6 +4,9 @@ export interface DispatcherHistory {
  currentDuration: number;
  dispatcherId: number;
  dispatcherName: string;
  dispatcherLevel: number | null;
  dispatcherRate: number;
  dispatcherIsSupporter: boolean;
  isOnline: boolean;
  lastOnlineTimestamp: number;
  region: string;
@@ -0,0 +1,30 @@
 import { TimetableHistory } from './TimetablesAPIData';
 export interface ITimetablesDailyStats {
  totalTimetables: number;
  distanceSum: number;
  distanceAvg: number;
  timetableId: number;
  timetableAuthor: string;
  timetableDriver: string;
  timetableRouteDistance: number;
  mostActiveDispatchers: {
    name: string;
    count: number;
  }[];
 }
 export interface ITimetablesDailyStatsResponse {
  totalTimetables: number;
  distanceSum: number;
  distanceAvg: number;
  maxTimetable: TimetableHistory | null;
  mostActiveDispatchers: {
    name: string;
    count: number;
  }[];
 }
@@ -1,9 +1,17 @@
 export interface TimetableHistory {
  id: number;
  createdAt: string;
  updatedAt: string;
  timetableId: number;
  trainNo: number;
  trainCategoryCode: string;
  driverId: number;
  driverName: string;
  driverLevel: number | null;
  driverIsSupporter: boolean;
  route: string;
  twr: number;
  skr: number;
@@ -27,6 +35,8 @@ export interface TimetableHistory {
  authorName?: string;
  authorId?: number;
  stopsString?: string;
  stockString?: string;
  stockMass?: number;
  stockLength?: number;
@@ -1,34 +1,4 @@
-export default interface TrainAPIData {
+export interface TimetableStop {
  trainNo: number;
  mass: number;
  length: number;
  speed: number;
  stockString: string;
  signal: string;
  distance: number;
  connectedTrack: string;
  driverName: string;
  driverId: number;
  driverIsSupporter: boolean;
  currentStationName: string;
  currentStationHash: string;
  online: boolean;
  lastSeen: number;
  region: string;
  isTimeout: boolean;
  timetable?: {
    timetableId: number;
    category: string;
    route: string;
    stopList: {
  stopName: string;
  stopNameRAW: string;
  stopType: string;
@@ -54,10 +24,45 @@ export default interface TrainAPIData {
  confirmed: boolean;
  stopped: boolean;
  stopTime: number;
-    }[];
+}
 export interface TrainTimetable {
  timetableId: number;
  category: string;
  route: string;
  stopList: TimetableStop[];
  TWR: boolean;
  SKR: boolean;
  sceneries: string[];
-  };
+}
 export interface TrainAPIData {
  trainNo: number;
  mass: number;
  length: number;
  speed: number;
  stockString: string;
  signal: string;
  distance: number;
  connectedTrack: string;
  driverName: string;
  driverId: number;
  driverIsSupporter: boolean;
  driverLevel?: number;
  currentStationName: string;
  currentStationHash: string;
  online: boolean;
  lastSeen: number;
  region: string;
  isTimeout: boolean;
  timetable?: TrainTimetable;
 }
@@ -1,13 +1,13 @@
-import { TrainFilter } from "../../types/Trains/TrainOptionsTypes";
+import { TrainFilter } from '../../types/Trains/TrainOptionsTypes';
-import { TrainFilterType } from "../enums/TrainFilterType";
+import { TrainFilterType } from '../enums/TrainFilterType';
-import Train from "../interfaces/Train";
+import Train from '../interfaces/Train';
-import TrainStop from "../interfaces/TrainStop";
+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;
@@ -17,50 +17,66 @@ function currentDelay(stops: TrainStop[] | undefined) {
      ?.departureDelay || 0;
  return delay;
-};
+}
 function filterTrainList(trainList: Train[], searchedTrain: string, searchedDriver: string, filters: TrainFilter[]) {
-    return trainList.filter(
+  return trainList.filter((train) => {
-        (train) => {
+    const isFiltered = filters.every((f) => {
            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:
+        case TrainFilterType.noTimetable:
-                        return !train.timetableData.followingStops.some(stop => stop.comments);
+          return train.timetableData;
        case TrainFilterType.withTimetable:
          return !train.timetableData;
        case TrainFilterType.withComments:
          return !train.timetableData?.followingStops.some((stop) => stop.comments);
        case TrainFilterType.noComments:
          return train.timetableData?.followingStops.some((stop) => stop.comments);
        case TrainFilterType.twr:
-                        return !train.timetableData.TWR;
+          return !train.timetableData?.TWR;
        case TrainFilterType.skr:
-                        return !train.timetableData.SKR;
+          return !train.timetableData?.SKR;
        case TrainFilterType.common:
          return train.timetableData?.SKR ||  train.timetableData?.TWR;
        case TrainFilterType.passenger:
-                        return !/^[AMRE]\D{2}$/.test(train.timetableData.category);
+          return !/^[AMRE]\D{2}$/.test(train.timetableData?.category || '');
        case TrainFilterType.freight:
-                        return !train.timetableData.category.startsWith('T');
+          return !train.timetableData?.category.startsWith('T');
        case TrainFilterType.other:
-                        return !/^[PXZL]\D{2}$/.test(train.timetableData.category);
+          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
        }
    return (
      (searchedTrain.length > 0 ? train.trainNo.toString().startsWith(searchedTrain) : true) &&
      (searchedDriver.length > 0 ? train.driverName.toLowerCase().startsWith(searchedDriver.toLowerCase()) : true) &&
      (!train.timetableData ? train.online : train.timetableData) &&
      isFiltered
    );
  });
 }
 function sortTrainList(trainList: Train[], sorterActive: { id: string; dir: number }) {
  return trainList.sort((a: Train, b: Train) => {
    switch (sorterActive.id) {
      case 'id':
        if ((a.timetableData?.timetableId || -1) > (b.timetableData?.timetableId || -1)) return sorterActive.dir;
        return -sorterActive.dir;
      case 'mass':
        if (a.mass > b.mass) return sorterActive.dir;
        return -sorterActive.dir;
@@ -109,7 +125,6 @@ export function filteredTrainList(
  sorterActive: { id: string; dir: number },
  filters: TrainFilter[]
 ) {
  const filtered = filterTrainList(trainList, searchedTrain, searchedDriver, filters);
  return [...sortTrainList(filtered, sorterActive)];
-};
+}
@@ -2,8 +2,6 @@ export const URLs = {
  stacjownikAPI:
    import.meta.env.VITE_APP_API_DEV == 1 && !import.meta.env.PROD
      ? 'http://localhost:3000'
-      : 'https://stacjownik.eu-4.evennode.com',
+      : 'https://spythere.pl',
  stacjownikAPIDev: 'localhost:3000',
  // trains: "https://api.td2.info.pl:9640/?method=getTrainsOnline",
  // getTimetableURL: (trainNo: string | number, region = "eu") => `https://api.td2.info.pl:9640/?method=readFromSWDR&value=getTimetable%3B${trainNo}%3B${region}`
 };
@@ -0,0 +1,49 @@
 import Filter from "../../scripts/interfaces/Filter";
 export const filterInitStates: Filter = {
  default: false,
  notDefault: false,
  real: false,
  fictional: false,
  SPK: false,
  SCS: false,
  SPE: false,
  SUP: false,
  noSUP: false,
  ręczne: false,
  'ręczne+SPK': false,
  'ręczne+SCS': false,
  mechaniczne: false,
  'mechaniczne+SPK': false,
  'mechaniczne+SCS': false,
  współczesna: false,
  kształtowa: false,
  historyczna: false,
  mieszana: false,
  SBL: false,
  PBL: 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,
 };
@@ -3,232 +3,9 @@ import inputData from '../data/options.json';
 import Filter from '../scripts/interfaces/Filter';
 import Station from '../scripts/interfaces/Station';
 import StorageManager from '../scripts/managers/storageManager';
-
+import { useStore } from './store';
-const sortStations = (a: Station, b: Station, sorter: { index: number; dir: number }) => {
+import { filterInitStates } from './constants/initFilterStates';
-  switch (sorter.index) {
+import { filterStations, sortStations } from './utils/filterUtils';
    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() {
@@ -236,9 +13,17 @@ export const useStationFiltersStore = defineStore('stationFiltersStore', {
      inputs: inputData,
      filters: { ...filterInitStates },
      sorterActive: { index: 0, dir: 1 },
      store: useStore(),
      lastClickedFilterId: '',
    };
  },
  getters: {
    areFiltersAtDefault(state) {
      return Object.keys(state.filters).every((f) => state.filters[f] === filterInitStates[f]);
    },
  },
  actions: {
    getFilteredStationList(stationList: Station[], region: string): Station[] {
      return stationList
@@ -257,10 +42,10 @@ export const useStationFiltersStore = defineStore('stationFiltersStore', {
      if (!StorageManager.isRegistered('options_saved')) return;
      this.inputs.options.forEach((option) => {
-        if (!StorageManager.isRegistered(option.id)) return;
+        if (!StorageManager.isRegistered(option.name)) return;
-        const savedValue = StorageManager.getBooleanValue(option.id);
+        const savedValue = StorageManager.getBooleanValue(option.name);
-        this.filters[option.id] = savedValue;
+        this.filters[option.name] = savedValue;
        option.value = !savedValue;
      });
@@ -293,6 +78,17 @@ export const useStationFiltersStore = defineStore('stationFiltersStore', {
      });
    },
    resetSectionOptions(section: string) {
      this.inputs.options.forEach((option) => {
        if (option.section != section) return;
        option.value = option.defaultValue;
        this.filters[option.id] = !option.defaultValue;
        StorageManager.setBooleanValue(option.name, !option.defaultValue);
      });
    },
    changeSorter(index: number) {
      if (index > 4 && index < 7) return;
@@ -17,7 +17,6 @@ import {
 } from '../scripts/utils/storeUtils';
 import { APIData, StationJSONData, StoreState } from './storeTypes';
 export const useStore = defineStore('store', {
  state: () =>
    ({
@@ -25,6 +24,7 @@ export const useStore = defineStore('store', {
      stationList: [],
      trainList: [],
      routesList: [],
      sceneryData: [],
      lastDispatcherStatuses: [],
@@ -35,12 +35,14 @@ export const useStore = defineStore('store', {
      stationCount: 0,
      webSocket: undefined,
      isOffline: false,
      dispatcherStatsName: '',
      dispatcherStatsData: undefined,
      driverStatsName: '',
      driverStatsData: undefined,
      driverStatsStatus: DataStatus.Initialized,
      chosenModalTrainId: undefined,
@@ -52,9 +54,10 @@ export const useStore = defineStore('store', {
        trains: DataStatus.Loading,
      },
      currentStatsTab: 'daily',
      blockScroll: false,
      listenerLaunched: false,
    } as StoreState),
  actions: {
@@ -98,6 +101,9 @@ export const useStore = defineStore('store', {
            lastSeen: train.lastSeen,
            isTimeout: train.isTimeout,
            isSupporter: train.driverIsSupporter,
            driverLevel: train.driverLevel,
            timetableData: timetable
              ? {
                  timetableId: timetable.timetableId,
@@ -110,8 +116,8 @@ export const useStore = defineStore('store', {
                  sceneries: timetable.sceneries,
                }
              : undefined,
-          };
+          } as Train;
-        }) as Train[];
+        });
    },
    getDispatcherStatus(onlineStationData: StationAPIData) {
@@ -220,6 +226,14 @@ export const useStore = defineStore('store', {
      const onlineStationNames: string[] = [];
      const prevDispatcherStatuses: StoreState['lastDispatcherStatuses'] = [];
      if (this.isOffline) {
        this.stationList.forEach((station) => {
          station.onlineInfo = undefined;
        });
        return;
      }
      this.apiData.stations?.forEach((stationAPIData) => {
        if (stationAPIData.region !== this.region.id || !stationAPIData.isOnline) return;
        const station = this.stationList.find((s) => s.name === stationAPIData.stationName);
@@ -281,7 +295,8 @@ export const useStore = defineStore('store', {
        return;
      }
-      this.stationList = sceneryData.map((scenery) => ({
+      this.stationList = sceneryData.map((scenery) => {
        return {
          name: scenery.name,
          generalInfo: {
@@ -302,6 +317,8 @@ export const useStore = defineStore('store', {
                    const catenary = specs2[1] == 'E';
                    const SBL = specs2[2] == 'S';
                    const TWB = specs2[3] ? true : false;
                    const speed = Number(routeString.split(':')[1]) || 0;
                    const length = Number(routeString.split(':')[2]) || 0;
                    const propName = twoWay
                      ? catenary
@@ -318,6 +335,8 @@ export const useStore = defineStore('store', {
                      catenary,
                      isInternal,
                      tracks: twoWay ? 2 : 1,
                      length,
                      speed,
                    });
                    if (!isInternal) acc[propName].push(name);
@@ -339,20 +358,19 @@ export const useStore = defineStore('store', {
              ? scenery.checkpoints.split(';').map((sub) => ({ checkpointName: sub, scheduledTrains: [] }))
              : [],
          },
-      }));
+        };
      });
    },
    connectToWebsocket() {
      const socket = io(URLs.stacjownikAPI, {
-        transports: ['websocket', 'polling'],
+        // 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) => {
@@ -362,6 +380,8 @@ export const useStore = defineStore('store', {
      });
      socket.emit('FETCH_DATA', {}, (data: APIData) => {
        this.dataStatuses.connection = DataStatus.Loaded;
        this.apiData = data;
        this.setOnlineData();
      });
@@ -1,7 +1,7 @@
 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 { 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';
@@ -23,15 +23,19 @@ export interface StoreState {
  stationCount: number;
  webSocket?: Socket;
  isOffline: boolean;
  dispatcherStatsName: string;
  dispatcherStatsData?: DispatcherStatsAPIData;
  driverStatsName: string;
  driverStatsData?: DriverStatsAPIData;
  driverStatsStatus: DataStatus;
  chosenModalTrainId?: string;
  currentStatsTab: 'daily' | 'driver';
  dataStatuses: {
    connection: DataStatus;
    sceneries: DataStatus;
@@ -48,6 +52,7 @@ export interface APIData {
  stations?: StationAPIData[];
  dispatchers?: string[][];
  trains?: TrainAPIData[];
  connectedSocketCount: number;
 }
 export interface StationJSONData {
@@ -55,6 +60,7 @@ export interface StationJSONData {
  url: string;
  lines: string;
  project: string;
  projectUrl: string;
  reqLevel: number;
@@ -64,6 +70,7 @@ export interface StationJSONData {
  SUP: boolean;
  routes: string;
  checkpoints: string | null;
  authors?: string;
@@ -0,0 +1,141 @@
 import Filter from '../../scripts/interfaces/Filter';
 import Station from '../../scripts/interfaces/Station';
 export 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);
 };
 export const filterStations = (station: Station, filters: Filter) => {
  if (!station.onlineInfo && filters['free']) return false;
  if (station.onlineInfo) {
    const { statusID, statusTimestamp } = station.onlineInfo;
    const isEnding = statusID == 'ending' && filters['endingStatus'];
    const isNotSigned = (statusID == 'not-signed' || statusID == 'unavailable') && filters['unavailableStatus'];
    const isAFK = statusID == 'brb' && filters['afkStatus'];
    const isNoSpace = statusID == 'no-space' && filters['noSpaceStatus'];
    const isOccupied = station.onlineInfo && filters['occupied'];
    const isOnlineInBounds =
      (filters['onlineFromHours'] < 8 &&
        statusTimestamp > 0 &&
        statusTimestamp <= Date.now() + filters['onlineFromHours'] * 3600000) ||
      (filters['onlineFromHours'] > 0 && statusTimestamp <= 0) ||
      (filters['onlineFromHours'] == 8 && statusID != 'no-limit');
    if (isEnding || isOnlineInBounds || isNotSigned || isAFK || isNoSpace || isOccupied) return false;
  }
  if ((station.generalInfo?.availability == 'nonPublic' || !station.generalInfo) && filters['nonPublic']) return false;
  if (station.generalInfo) {
    const { routes, availability, controlType, lines, reqLevel, signalType, SUP, authors } = station.generalInfo;
    if (availability == 'unavailable' && filters['unavailable'] && !station.onlineInfo) return false;
    if (availability == 'abandoned' && filters['abandoned'] && !station.onlineInfo) return false;
    if (availability == 'default' && filters['default']) return false;
    if (
      availability != 'default' &&
      filters['notDefault'] &&
      !(availability == 'abandoned' || availability == 'unavailable')
    )
      return false;
    if (filters['real'] && lines) return false;
    if (filters['fictional'] && !lines) return false;
    const otherAvailability =
      availability == 'nonPublic' || availability == 'unavailable' || availability == 'abandoned';
    if (reqLevel + (otherAvailability ? 1 : 0) < filters['minLevel']) return false;
    if (reqLevel + (otherAvailability ? 1 : 0) > filters['maxLevel']) return false;
    if (
      filters['no-1track'] &&
      (routes.oneWayCatenaryRouteNames.length != 0 || routes.oneWayNoCatenaryRouteNames.length != 0)
    )
      return false;
    if (
      filters['no-2track'] &&
      (routes.twoWayCatenaryRouteNames.length != 0 || routes.twoWayNoCatenaryRouteNames.length != 0)
    )
      return false;
    if (routes.oneWayCatenaryRouteNames.length < filters['minOneWayCatenary']) return false;
    if (routes.oneWayNoCatenaryRouteNames.length < filters['minOneWay']) return false;
    if (routes.twoWayCatenaryRouteNames.length < filters['minTwoWayCatenary']) return false;
    if (routes.twoWayNoCatenaryRouteNames.length < filters['minTwoWay']) return false;
    if (filters[controlType]) return false;
    if (filters[signalType]) return false;
    if (filters['SUP'] && SUP) return false;
    if (filters['noSUP'] && !SUP) return false;
    if (filters['SBL'] && routes.sblRouteNames.length > 0) return false;
    if (filters['PBL'] && routes.sblRouteNames.length == 0) return false;
    if (
      filters['authors'].length > 3 &&
      !authors?.map((a) => a.toLocaleLowerCase()).includes(filters['authors'].toLocaleLowerCase())
    )
      return false;
  }
  return true;
 };
@@ -1,21 +1,5 @@
@import 'responsive.scss';
-
+@import 'animations.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 {
@@ -26,10 +10,16 @@
  padding-right: 0.2em;
 }
 .journal-list {
  position: relative;
 }
 .journal_wrapper {
  max-width: 1350px;
  width: 100%;
  margin: 0 auto;
  padding: 1em 0;
 }
@@ -57,6 +47,11 @@
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5em;
  position: relative;
  margin-bottom: 0.5em;
 }
 .btn--load-data {
@@ -1,10 +1,17 @@
@import 'variables.scss';
@import 'responsive.scss';
-.journal-stats {
+.stats-tab {
  background-color: #1a1a1a;
  box-shadow: 0 0 5px 1px $accentCol;
  padding: 1em;
-  margin-bottom: 1em;
+  display: flex;
  align-items: flex-end;
  margin-bottom: 0.5em;
  width: 100%;
 }
 .info-stats {
@@ -40,3 +47,4 @@
    justify-content: center;
  }
 }
@@ -0,0 +1,31 @@
 .list-anim-move,
 .list-anim-enter-active,
 .list-anim-leave-active {
  transition: all 250ms ease;
 }
 .list-anim-enter-from,
 .list-anim-leave-to {
  opacity: 0;
  transform: translateY(30px);
 }
 .list-anim-leave-active {
  position: absolute;
  width: 100%;
 }
 .status-anim {
  &-enter-from,
  &-leave-to {
    opacity: 0;
  }
  &-enter-active {
    transition: all 100ms ease-out;
  }
  &-leave-active {
    transition: all 100ms ease-out;
  }
 }
@@ -26,3 +26,33 @@
    }
  }
 }
 .level-badge {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9em;
  &.driver {
    border-radius: 50%;
    width: 1.7em;
    height: 1.7em;
  }
  &.dispatcher {
    border-radius: 0.25em;
    width: 1.6em;
    height: 1.6em;
  }
 }
 .region-badge {
  padding: 0 0.5em;
  border-radius: 0.5em;
  font-weight: bold;
  &.eu {
    background-color: forestgreen;
  }
 }
@@ -21,17 +21,16 @@
  transform: translate(-50%, -50%);
-  overflow-x: hidden;
+  overflow: hidden;
-  background: #202020da;
+  background: #202020e8;
-  box-shadow: 0 0 15px 5px #303030;
+  box-shadow: 0 0 15px 0 black;
  border: 1px solid #202020e8;
-  width: 600px;
+  width: 95%;
  max-width: 700px;
-  @include smallScreen {
+  max-height: 95vh;
    width: 100%;
    height: 80vh;
  }
  &-exit {
    position: absolute;
@@ -46,3 +45,9 @@
    cursor: pointer;
  }
 }
@include smallScreen {
  .card {
    max-height: 85vh;
  }
 }
@@ -2,6 +2,24 @@
@import 'variables.scss';
@import 'search_box.scss';
 .filters-options {
  margin-bottom: 0.5em;
 }
 .actions-bar {
  display: flex;
  gap: 0.5em;
 }
 .filter-button .active-indicator {
  width: 7px;
  height: 7px;
  background-color: lightgreen;
  border-radius: 50%;
  margin-left: 10px;
 }
 h1.option-title {
  position: relative;
  font-size: 1.1em;
@@ -42,22 +60,16 @@ h1.option-title {
  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%;
+  width: 97%;
-  max-width: 500px;
+  max-width: 550px;
  padding: 1em;
  z-index: 100;
 }
@@ -65,6 +77,7 @@ h1.option-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em;
  padding: 0.25em 0.25em 0 0;
 }
@@ -72,17 +85,18 @@ h1.option-title {
 .options_filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin: 0.5em 0 0 0;
 }
 .sort-option,
 .filter-option {
-  margin: 0.25em 0.25em 0.25em 0;
+  padding: 0.25em 0.5em;
 }
 .sort-option[data-selected='true'] {
  color: $accentCol;
  font-weight: bold;
 }
 .filter-option {
@@ -18,19 +18,21 @@
 }
 ::-webkit-scrollbar {
-  width: 1rem;
+  width: 15px;
-  height: 1rem;
+  height: 15px;
  background-color: transparent;
  &-track {
    border-radius: 0.5em;
    background-color: #333;
  }
  &-thumb {
    border-radius: 0.5em;
    background-color: #666;
  }
  &-corner {
    background-color: #333;
  }
 }
 html {
@@ -43,11 +45,12 @@ body {
  margin: 0;
  padding: 0;
  font-family: 'Quicksand', sans-serif;
  font-weight: 500;
  overflow-y: scroll;
  &.no-scroll {
    overflow-y: hidden;
-    padding-right: 1rem;
+    padding-right: 15px;
    @include smallScreen() {
      padding: 0;
@@ -79,22 +82,9 @@ body {
    transition: opacity 0.3s;
    padding: 0.25em;
    // @include smallScreen() {
    //   right: 0;
    //   left: 0;
    //   &::after {
    //     left: 75%;
    //   }
    // }
  }
  &:hover > .content {
    // @include smallScreen() {
    //   display: none;
    // }
    visibility: visible;
    opacity: 1;
  }
@@ -103,7 +93,6 @@ body {
 button,
 input,
 select {
  // font-family: "Open Sans", sans-serif;
  border: none;
  font-family: 'Quicksand', sans-serif;
  font-size: 1em;
@@ -207,10 +196,16 @@ button {
  padding: 0.25em 0.5em;
  transition: all 100ms ease;
  &[data-disabled='true'] {
    user-select: none;
    pointer-events: none;
    opacity: 0.85;
  }
 }
 button.btn--filled {
-  background-color: #333;
+  background-color: #1a1a1a;
  border-radius: 0.25em;
  &:hover {
@@ -4,13 +4,18 @@
  }
 }
@mixin midScreen() {
  @media only screen and (max-width: 1150px) {
    @content;
  }
 }
@mixin screenLandscape() {
  @media only screen and (orientation: landscape) and (max-device-height: 450px)  {
    @content;
  }
 }
@mixin bigScreen() {
  @media only screen and (min-width: 2000px) {
    @content;
@@ -1,7 +1,9 @@
 import { JournalFilterType } from '../../scripts/enums/JournalFilterType';
-export type JorunalTimetableSearchType = {
+export type JournalTimetableSearchKey = 'search-driver' | 'search-train' | 'search-date' | 'search-dispatcher'; 
-  [key in 'search-driver' | 'search-train' | 'search-date' | 'search-author']: string;
+
 export type JournalTimetableSearchType = {
  [key in JournalTimetableSearchKey]: string;
 };
 export interface JournalTimetableFilter {
@@ -1,6 +1,7 @@
-import { TrainFilterType } from "../../scripts/enums/TrainFilterType";
+import { TrainFilterSection, TrainFilterType } from '../../scripts/enums/TrainFilterType';
 export interface TrainFilter {
  id: TrainFilterType;
  section: TrainFilterSection;
  isActive: boolean;
 }
@@ -1,17 +1,26 @@
 <template>
  <section class="journal-timetables">
    <JournalHeader />
    <div class="journal_wrapper">
      <JournalOptions
-        @on-search-confirm="searchHistory"
+        @on-search-confirm="fetchHistoryData"
        @on-options-reset="resetOptions"
        @on-refresh-data="fetchHistoryData"
        :sorter-option-ids="['timestampFrom', 'duration']"
        :data-status="dataStatus"
        :current-options-active="currentOptionsActive"
        optionsType="dispatchers"
      />
      <div class="list_wrapper" @scroll="handleScroll">
-        <!-- <transition name="warning" mode="out-in"> -->
+        <transition name="status-anim" mode="out-in">
-        <!-- <div :key="dataStatus"> -->
+          <div :key="dataStatus">
-        <Loading v-if="dataStatus == DataStatus.Initialized || dataStatus == DataStatus.Loading" />
+            <div class="journal_warning" v-if="store.isOffline">
              {{ $t('app.offline') }}
            </div>
            <Loading v-else-if="dataStatus == DataStatus.Loading" />
            <div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
              {{ $t('app.error') }}
@@ -32,8 +41,8 @@
                {{ $t('journal.load-data') }}
              </button>
            </div>
-        <!-- </div>
+          </div>
-        </transition> -->
+        </transition>
        <div class="journal_warning" v-if="scrollNoMoreData">
          {{ $t('journal.no-further-data') }}
@@ -51,24 +60,33 @@
 import { defineComponent, provide, reactive, Ref, ref } from 'vue';
 import axios from 'axios';
-import ActionButton from '../../components/Global/ActionButton.vue';
+import ActionButton from '../components/Global/ActionButton.vue';
-import JournalOptions from '../../components/JournalView/JournalOptions.vue';
+import JournalOptions from '../components/JournalView/JournalOptions.vue';
-import DispatcherStats from '../../components/JournalView/DispatcherStats.vue';
+import DispatcherStats from '../components/JournalView/DispatcherStats.vue';
-import SearchBox from '../Global/SearchBox.vue';
+import SearchBox from '../components/Global/SearchBox.vue';
-import Loading from '../Global/Loading.vue';
+import Loading from '../components/Global/Loading.vue';
-import { URLs } from '../../scripts/utils/apiURLs';
+import { URLs } from '../scripts/utils/apiURLs';
-import { DataStatus } from '../../scripts/enums/DataStatus';
+import { DataStatus } from '../scripts/enums/DataStatus';
-import { useStore } from '../../store/store';
+import { useStore } from '../store/store';
-import JournalDispatchersList from './JournalDispatchersList.vue';
+import JournalDispatchersList from '../components/JournalView/JournalDispatchersList.vue';
-import { JournalDispatcherSearcher, JournalDispatcherSorter } from '../../types/Journal/JournalDispatcherTypes';
+import { JournalDispatcherSearcher, JournalDispatcherSorter } from '../types/Journal/JournalDispatcherTypes';
-import { DispatcherHistory } from '../../scripts/interfaces/api/DispatchersAPIData';
+import { DispatcherHistory } from '../scripts/interfaces/api/DispatchersAPIData';
-import { JournalTimetableFilter } from '../../types/Journal/JournalTimetablesTypes';
+import JournalHeader from '../components/JournalView/JournalHeader.vue';
 import { LocationQuery } from 'vue-router';
 const DISPATCHERS_API_URL = `${URLs.stacjownikAPI}/api/getDispatchers`;
 export default defineComponent({
-  components: { SearchBox, ActionButton, JournalOptions, DispatcherStats, Loading, JournalDispatchersList },
+  components: {
    SearchBox,
    ActionButton,
    JournalOptions,
    DispatcherStats,
    Loading,
    JournalDispatchersList,
    JournalHeader,
  },
  name: 'JournalDispatchers',
  props: {
@@ -85,13 +103,16 @@ export default defineComponent({
  data: () => ({
    currentQuery: '',
    currentQueryArray: [] as string[],
    scrollDataLoaded: true,
    scrollNoMoreData: false,
    showReturnButton: false,
    statsCardOpen: false,
    currentOptionsActive: false,
-    dataStatus: DataStatus.Initialized,
+    dataStatus: DataStatus.Loading,
    DataStatus,
    historyList: [] as DispatcherHistory[],
@@ -130,6 +151,13 @@ export default defineComponent({
    };
  },
  watch: {
    currentQueryArray(q: string[]) {
      this.currentOptionsActive =
        q.length > 2 || q.some((qv) => qv.startsWith('sortBy=') && qv.split('=')[1] != 'timestampFrom');
    },
  },
  computed: {
    computedHistoryList() {
      return this.historyList.filter(
@@ -138,18 +166,14 @@ export default defineComponent({
    },
  },
-  activated() {
+  beforeRouteUpdate(to, _) {
-    if (this.sceneryName || this.dispatcherName) {
+    this.handleQueries(to.query);
-      this.searchersValues['search-station'] = this.sceneryName?.toString() || '';
+    this.fetchHistoryData();
      this.searchersValues['search-dispatcher'] = this.dispatcherName?.toString() || '';
      this.searchHistory();
    }
  },
-  mounted() {
+  activated() {
-    if (!this.sceneryName && !this.dispatcherName) {
+    this.handleQueries(this.$route.query);
-      this.searchHistory();
+    this.fetchHistoryData();
    }
  },
  methods: {
@@ -163,21 +187,22 @@ export default defineComponent({
      if (scrollTop > elementHeight * 0.85) this.addHistoryData();
    },
-    resetOptions() {
+    handleQueries(query: LocationQuery) {
-      this.searchersValues['search-station'] = '';
+      if ('sceneryName' in query) this.searchersValues['search-station'] = `${query.sceneryName}`;
-      this.searchersValues['search-dispatcher'] = '';
+      if ('dispatcherName' in query) this.searchersValues['search-dispatcher'] = `${query.dispatcherName}`;
      this.sorterActive.id = 'timestampFrom';
      this.searchHistory();
    },
-    searchHistory() {
+    setSearchers(date: string, station: string, dispatcher: string) {
-      this.fetchHistoryData({
+      this.searchersValues['search-date'] = date;
-        searchers: this.searchersValues,
+      this.searchersValues['search-station'] = station;
-      });
+      this.searchersValues['search-dispatcher'] = dispatcher;
    },
-      this.scrollNoMoreData = false;
+    resetOptions() {
-      this.scrollDataLoaded = true;
+      this.setSearchers('', '', '');
      this.sorterActive.id = 'timestampFrom';
      this.fetchHistoryData();
    },
    async addHistoryData() {
@@ -200,19 +225,13 @@ export default defineComponent({
      this.scrollDataLoaded = true;
    },
-    async fetchHistoryData(
+    async fetchHistoryData() {
      props: {
        searchers?: JournalDispatcherSearcher;
        filter?: JournalTimetableFilter;
      } = {}
    ) {
      this.dataStatus = DataStatus.Loading;
      const queries: string[] = [];
-      const dispatcher = props.searchers?.['search-dispatcher'].trim();
+      const dispatcher = this.searchersValues['search-dispatcher'].trim();
-      const station = props.searchers?.['search-station'].trim();
+      const station = this.searchersValues['search-station'].trim();
-      const dateString = props.searchers?.['search-date'].trim();
+      const dateString = this.searchersValues['search-date'].trim();
      const timestampFrom = dateString ? Date.parse(new Date(dateString).toISOString()) - 120 * 60 * 1000 : undefined;
      const timestampTo = timestampFrom ? timestampFrom + 86400000 : undefined;
@@ -227,7 +246,10 @@ export default defineComponent({
      queries.push('countLimit=30');
      if (this.currentQuery != queries.join('&')) this.dataStatus = DataStatus.Loading;
      this.currentQuery = queries.join('&');
      this.currentQueryArray = queries;
      try {
        const responseData: DispatcherHistory[] = await (
@@ -254,11 +276,15 @@ export default defineComponent({
      } catch (error) {
        this.dataStatus = DataStatus.Error;
      }
      this.scrollNoMoreData = false;
      this.scrollDataLoaded = true;
    },
  },
 });
 </script>
 <style lang="scss" scoped>
-@import '../../styles/JournalSection.scss';
+@import '../styles/JournalSection.scss';
 </style>
@@ -1,22 +1,29 @@
 <template>
  <section class="journal-timetables">
    <JournalHeader />
    <div class="journal_wrapper">
      <JournalOptions
-      @on-search-confirm="searchHistory"
+        @on-search-confirm="fetchHistoryData"
        @on-options-reset="resetOptions"
        @on-refresh-data="fetchHistoryData"
        :sorter-option-ids="['timetableId', 'beginDate', 'distance', 'total-stops']"
        :filters="journalTimetableFilters"
        :currentOptionsActive="currentOptionsActive"
        :data-status="dataStatus"
        optionsType="timetables"
      />
-      <DriverStats />
+      <JournalStats />
      <!-- <button @click="statsCardOpen = true">Stats</button> -->
      <div class="list_wrapper" @scroll="handleScroll">
-        <!-- <transition name="warning" mode="out-in"> -->
+        <transition name="status-anim" mode="out-in">
-        <!-- <div :key="dataStatus"> -->
+          <div :key="dataStatus">
-        <Loading v-if="dataStatus == DataStatus.Initialized || dataStatus == DataStatus.Loading" />
+            <div class="journal_warning" v-if="store.isOffline">
              {{ $t('app.offline') }}
            </div>
            <Loading v-else-if="dataStatus == DataStatus.Loading" />
            <div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
              {{ $t('app.error') }}
@@ -37,8 +44,8 @@
                {{ $t('journal.load-data') }}
              </button>
            </div>
-        <!-- </div> -->
+          </div>
-        <!-- </transition> -->
+        </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>
@@ -51,27 +58,30 @@
 import { defineComponent, provide, reactive, Ref, ref } from 'vue';
 import axios from 'axios';
-import DriverStats from './DriverStats.vue';
+import DriverStats from '../components/JournalView/JournalDriverStats.vue';
-import Loading from '../Global/Loading.vue';
+import Loading from '../components/Global/Loading.vue';
-import { JournalTimetableFilter, JournalTimetableSorter } from '../../types/Journal/JournalTimetablesTypes';
+import { JournalTimetableSorter } from '../types/Journal/JournalTimetablesTypes';
-import dateMixin from '../../mixins/dateMixin';
+import dateMixin from '../mixins/dateMixin';
-import routerMixin from '../../mixins/routerMixin';
+import routerMixin from '../mixins/routerMixin';
-import { DataStatus } from '../../scripts/enums/DataStatus';
+import { DataStatus } from '../scripts/enums/DataStatus';
-import { JournalFilterType } from '../../scripts/enums/JournalFilterType';
+import { JournalFilterType } from '../scripts/enums/JournalFilterType';
-import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
+import { TimetableHistory } from '../scripts/interfaces/api/TimetablesAPIData';
-import { URLs } from '../../scripts/utils/apiURLs';
+import { URLs } from '../scripts/utils/apiURLs';
-import { useStore } from '../../store/store';
+import { useStore } from '../store/store';
-import JournalOptions from './JournalOptions.vue';
+import JournalOptions from '../components/JournalView/JournalOptions.vue';
-import { JorunalTimetableSearchType } from '../../types/Journal/JournalTimetablesTypes';
+import { JournalTimetableSearchType } from '../types/Journal/JournalTimetablesTypes';
-import modalTrainMixin from '../../mixins/modalTrainMixin';
+import modalTrainMixin from '../mixins/modalTrainMixin';
-import imageMixin from '../../mixins/imageMixin';
+import imageMixin from '../mixins/imageMixin';
-import JournalTimetablesList from './JournalTimetablesList.vue';
+import JournalTimetablesList from '../components/JournalView/JournalTimetablesList.vue';
-import { journalTimetableFilters } from '../../constants/Journal/JournalTimetablesConsts';
+import { journalTimetableFilters } from '../constants/Journal/JournalTimetablesConsts';
 import JournalStats from '../components/JournalView/JournalStats.vue';
 import JournalHeader from '../components/JournalView/JournalHeader.vue';
 import { LocationQuery } from 'vue-router';
 const TIMETABLES_API_URL = `${URLs.stacjownikAPI}/api/getTimetables`;
 export default defineComponent({
-  components: { DriverStats, Loading, JournalOptions, JournalTimetablesList },
+  components: { DriverStats, Loading, JournalOptions, JournalTimetablesList, JournalStats, JournalHeader },
  mixins: [dateMixin, routerMixin, modalTrainMixin, imageMixin],
  name: 'JournalTimetables',
@@ -84,16 +94,19 @@ export default defineComponent({
  data: () => ({
    currentQuery: '',
    currentQueryArray: [] as string[],
    scrollDataLoaded: true,
    scrollNoMoreData: false,
    showReturnButton: false,
    statsCardOpen: false,
    currentOptionsActive: false,
    timetableHistory: [] as TimetableHistory[],
    journalTimetableFilters,
-    dataStatus: DataStatus.Initialized,
+    dataStatus: DataStatus.Loading,
    dataErrorMessage: '',
    DataStatus,
@@ -106,9 +119,9 @@ export default defineComponent({
    const searchersValues = reactive({
      'search-train': '',
      'search-driver': '',
-      'search-author': '',
+      'search-dispatcher': '',
      'search-date': '',
-    } as JorunalTimetableSearchType);
+    } as JournalTimetableSearchType);
    const countFromIndex = ref(0);
    const countLimit = 15;
@@ -128,21 +141,29 @@ export default defineComponent({
      countLimit,
      scrollElement,
      store: useStore(),
    };
  },
-  activated() {
+  watch: {
-    if (this.timetableId) {
+    currentQueryArray(q: string[]) {      
-      this.searchersValues['search-train'] = `#${this.timetableId}`;
+      this.currentOptionsActive = q.length >= 2 || q.some((qv) => qv.startsWith('sortBy=') && qv.split('=')[1]);
-      this.searchHistory();
+    },
    }
  },
-  mounted() {
+  // Handle route updates for route-links
-    if (!this.timetableId) this.searchHistory();
+  beforeRouteUpdate(to, _) {
    this.handleQueries(to.query);
    this.fetchHistoryData();
  },
  activated() {
    this.handleQueries(this.$route.query);
    this.fetchHistoryData();
  },
  methods: {
    handleScroll(e: Event) {
      const listElement = e.target as HTMLElement;
@@ -154,26 +175,24 @@ export default defineComponent({
      if (scrollTop > elementHeight * 0.85) this.addHistoryData();
    },
    handleQueries(query: LocationQuery) {
      if ('timetableId' in query) this.searchersValues['search-train'] = `#${query.timetableId}`;
    },
    setSearchers(date: string, driver: string, train: string, dispatcher: string) {
      this.searchersValues['search-date'] = date;
      this.searchersValues['search-driver'] = driver;
      this.searchersValues['search-train'] = train;
      this.searchersValues['search-dispatcher'] = dispatcher;
    },
    resetOptions() {
-      this.searchersValues['search-date'] = '';
+      this.setSearchers('', '', '', '');
      this.searchersValues['search-driver'] = '';
      this.searchersValues['search-train'] = '';
      this.searchersValues['search-author'] = '';
      this.journalFilterActive = this.journalTimetableFilters[0];
      this.sorterActive.id = 'timetableId';
-      this.searchHistory();
+      this.fetchHistoryData();
    },
    searchHistory() {
      this.fetchHistoryData({
        searchers: this.searchersValues,
        filter: this.journalFilterActive,
      });
      this.scrollNoMoreData = false;
      this.scrollDataLoaded = true;
    },
    async addHistoryData() {
@@ -196,21 +215,16 @@ export default defineComponent({
      this.scrollDataLoaded = true;
    },
-    async fetchHistoryData(
+    async fetchHistoryData() {
-      props: {
+      // if(this.dataStatus == DataStatus.Loading) return;
        searchers?: JorunalTimetableSearchType;
        filter?: JournalTimetableFilter;
      } = {}
    ) {
      this.dataStatus = DataStatus.Loading;
      const queries: string[] = [];
-      const driverName = props.searchers?.['search-driver'].trim();
+      const driverName = this.searchersValues['search-driver'].trim();
-      const trainNo = props.searchers?.['search-train'].trim();
+      const trainNo = this.searchersValues['search-train'].trim();
-      const authorName = props.searchers?.['search-author'].trim();
+      const authorName = this.searchersValues['search-dispatcher'].trim();
      const dateString = this.searchersValues['search-date'].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;
@@ -224,11 +238,11 @@ export default defineComponent({
      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');
+      // else queries.push('sortBy=timetableId');
      queries.push('countLimit=15');
-      switch (props.filter?.id) {
+      switch (this.journalFilterActive.id) {
        case JournalFilterType.abandoned:
          queries.push('fulfilled=0', 'terminated=1');
          break;
@@ -245,7 +259,10 @@ export default defineComponent({
          break;
      }
      if (this.currentQuery != queries.join('&')) this.dataStatus = DataStatus.Loading;
      this.currentQuery = queries.join('&');
      this.currentQueryArray = queries;
      try {
        const responseData: TimetableHistory[] = await (
@@ -274,11 +291,15 @@ export default defineComponent({
        this.dataStatus = DataStatus.Error;
        this.dataErrorMessage = 'Ups! Coś poszło nie tak!';
      }
      this.scrollNoMoreData = false;
      this.scrollDataLoaded = true;
    },
  },
 });
 </script>
 <style lang="scss" scoped>
-@import '../../styles/JournalSection.scss';
+@import '../styles/JournalSection.scss';
 </style>
@@ -1,77 +0,0 @@
 <template>
  <section class="journal-view">
    <div class="journal-type-options">
      <router-link class="router-link" active-class="route-active" to="/journal/timetables" exact>
        {{ $t('journal.section-timetables') }}
      </router-link>
      &nbsp;&bull;&nbsp;
      <router-link class="router-link" active-class="route-active" to="/journal/dispatchers">
        {{ $t('journal.section-dispatchers') }}
      </router-link>
    </div>
    <div class="journal-section">
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" :key="$route.path" />
        </keep-alive>
      </router-view>
    </div>
  </section>
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
 import JournalDispatchers from '../components/JournalView/JournalDispatchers.vue';
 import JournalTimetables from '../components/JournalView/JournalTimetables.vue';
 export default defineComponent({
  components: { JournalDispatchers, JournalTimetables },
  setup() {
    const journalTypeChosen = ref('journalTimetables');
    return {
      activeJournalComponent: journalTypeChosen,
    };
  },
  methods: {
    changeJournalType(type: string) {
      this.activeJournalComponent = type;
    },
  },
  activated() {
    const query = this.$route.query;
    if (query.view == 'dispatchers') this.activeJournalComponent = 'journalDispatchers';
  },
 });
 </script>
 <style lang="scss" scoped>
 .journal-type-options {
  display: flex;
  justify-content: center;
  background-color: #2c2c2c;
  max-width: 18em;
  font-size: 1.2em;
  margin: 0 auto;
  border-radius: 0 0 0.5em 0.5em;
  padding: 0.1em 0;
 }
 .journal-section > section {
  height: 100%;
  display: flex;
  justify-content: center;
 }
 .router-link.active {
  color: gold;
 }
 </style>
@@ -1,7 +1,10 @@
 <template>
  <section class="trains-view">
    <div class="trains_wrapper">
-      <TrainOptions :sorter-option-ids="['distance', 'progress', 'delay', 'mass', 'speed', 'length']" />
+      <TrainOptions
        :sorter-option-ids="['distance', 'id', 'progress', 'delay', 'mass', 'speed', 'length']"
        :current-options-active="currentOptionsActive"
      />
      <TrainTable :trains="computedTrains" />
    </div>
@@ -9,7 +12,7 @@
 </template>
 <script lang="ts">
-import { computed, ComputedRef, defineComponent, provide, reactive, ref } from 'vue';
+import { computed, ComputedRef, defineComponent, provide, reactive, ref, watch } from 'vue';
 import TrainOptions from '../components/TrainsView/TrainOptions.vue';
 import TrainStats from '../components/TrainsView/TrainStats.vue';
 import TrainTable from '../components/TrainsView/TrainTable.vue';
@@ -52,10 +55,13 @@ export default defineComponent({
  setup() {
    const store = useStore();
    const initTrainFilters = [...trainFilters.map((f) => ({ ...f }))];
-    const sorterActive = ref({ id: 'distance', dir: -1 });
+    const sorterActive = reactive({ id: 'distance', dir: -1 });
    const filterList = reactive([...trainFilters]) as TrainFilter[];
    const currentOptionsActive = ref(false);
    const searchedDriver = ref('');
    const searchedTrain = ref('');
@@ -65,13 +71,13 @@ export default defineComponent({
    provide('filterList', filterList);
    const computedTrains: ComputedRef<Train[]> = computed(() => {
-      return filteredTrainList(
+      return filteredTrainList(store.trainList, searchedTrain.value, searchedDriver.value, sorterActive, filterList);
-        store.trainList,
+    });
-        searchedTrain.value,
+
-        searchedDriver.value,
+    watch([searchedTrain, searchedDriver, sorterActive, filterList], ([sT, sD, sA, fL]) => {
-        sorterActive.value,
+      const areFiltersActive = fL.some((f, i) => f.isActive !== initTrainFilters[i].isActive);
-        filterList
+
-      );
+      currentOptionsActive.value = sT.length > 0 || sD.length > 0 || sA.id != 'distance' || areFiltersActive;
    });
    return {
@@ -80,6 +86,7 @@ export default defineComponent({
      searchedDriver,
      sorterActive,
      store,
      currentOptionsActive,
    };
  },
@@ -14,7 +14,7 @@
      "ESNext",
      "DOM"
    ],
-    "types": ["vite/client"],
+    "types": ["vite/client", "vite-plugin-pwa/client"],
    "skipLibCheck": true
  },
  "include": [
@@ -1,34 +1,55 @@
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import { VitePWA } from 'vite-plugin-pwa';
 export default defineConfig({
-  plugins: [vue()],
+  server: {
    port: 5001,
  },
  plugins: [
    vue(),
    VitePWA({
      registerType: 'prompt',
      workbox: {
        globPatterns: ['**/*.{js,css,html,png,svg,jpg}'],
        runtimeCaching: [
          {
            urlPattern: new RegExp('^https://spythere.pl/api/getSceneries', 'i'),
            handler: 'NetworkFirst',
            options: {
              cacheName: 'sceneries-cache',
              expiration: {
                maxEntries: 1,
                maxAgeSeconds: 60 * 60 * 24 * 7, // <== 7 days
              },
              cacheableResponse: {
                statuses: [0, 200],
              },
            },
          },
          {
            urlPattern: /^https:\/\/rj.td2.info.pl\/dist\/img\/thumbnails\/.*/i,
            handler: 'CacheFirst',
            options: {
              cacheName: 'images-cache',
              expiration: {
                maxEntries: 100,
                maxAgeSeconds: 60 * 60 * 24 * 60,
              },
              cacheableResponse: {
                statuses: [0, 200, 404],
              },
            },
          },
        ],
      },
      devOptions: {
        enabled: true,
      },
    }),
  ],
 });
 // PWA
-// VitePWA({
+
 //       registerType: 'autoUpdate',
 //       workbox: {
 //         globPatterns: ['**/*.{js,css,html,png,svg,img}'],
 //         runtimeCaching: [
 //           {
 //             urlPattern: new RegExp('^https://stacjownik.eu-4.evennode.com/api/getSceneries'),
 //             handler: 'NetworkFirst',
 //             options: {
 //               cacheName: 'sceneries-cache',
 //               expiration: {
 //                 maxEntries: 200,
 //                 maxAgeSeconds: 60 * 60 * 24 * 60, // <== 60 days
 //               },
 //               cacheableResponse: {
 //                 statuses: [0, 200],
 //               },
 //             },
 //           },
 //         ],
 //       },
 //       devOptions: {
 //         enabled: true,
 //       },
 //     }),
Author	SHA1	Message	Date
Spythere	de9851ebcc	Wersja 1.13.0 Wersja 1.13.0	2023-03-16 01:31:18 +01:00
Spythere	ff78eba927	hotfixy filtrów	2023-03-15 18:15:01 +01:00
Spythere	e4c5f6a322	filtry pociągów	2023-03-15 17:56:27 +01:00
Spythere	0a78761928	hotfix tłumaczeń	2023-03-15 15:34:36 +01:00
Spythere	4843043c29	bump wersji: 1.13.0	2023-03-15 15:20:28 +01:00
Spythere	9e1df1fb61	filtry pociągów	2023-03-15 15:19:50 +01:00
Spythere	021474cfb0	fix: tłumaczenia; hotfixy	2023-03-14 23:13:37 +01:00
Spythere	7d0e68862c	filtry scenerii	2023-03-14 21:42:39 +01:00
Spythere	653d45dfc6	scenerie: remake filtrów	2023-03-13 22:26:00 +01:00
Spythere	4a4e1240a4	widok scenerii: odnośniki do tablic przy aktywnych RJ	2023-03-10 16:59:16 +01:00
Spythere	14ca48a90d	hotfix	2023-03-10 16:30:36 +01:00
Spythere	a02f9804b1	dziennik RJ: dodatkowe info	2023-03-10 16:30:31 +01:00
Spythere	c5efc6fbac	bump: wersja 1.12.2	2023-03-10 02:03:37 +01:00
Spythere	cacd0a1e4e	fix: data stworzenia RJ	2023-03-10 01:53:19 +01:00
Spythere	50375099ab	update url api	2023-03-10 01:42:10 +01:00
Spythere	6af67ec741	fix: tłumaczenia filtrów	2023-03-09 14:35:03 +01:00
Spythere	c64112c86a	dziennik RJ: dodatkowe informacje	2023-03-09 14:28:16 +01:00
Spythere	0434702d3b	update: URL api	2023-03-09 13:41:59 +01:00
Spythere	dd7d1b0bb0	Wersja 1.12.1 Wersja 1.12.1	2023-02-26 14:20:40 +01:00
Spythere	68934a89a4	bump: wersja 1.12.1	2023-02-26 14:16:13 +01:00
Spythere	b88a240ec1	feature: like count historii dyżurnych	2023-02-26 14:14:32 +01:00
Spythere	eaa34f3359	hotfix: dostępność grubości czcionki	2023-02-26 13:50:47 +01:00
Spythere	febb22e1bc	Wersja 1.12 Merge produkcyjny do wersji 1.12.0	2023-02-14 21:32:46 +01:00
Spythere	500f3c1223	dziennik RJ: wyświetlanie statów	2023-02-14 16:57:22 +01:00
Spythere	221e0c7e82	dzienniki: fix ładowania	2023-02-14 16:50:12 +01:00
Spythere	ca19f7e397	hotfix: websocket	2023-02-14 16:40:15 +01:00
Spythere	a71ccd3e1a	bump: wersja 1.12	2023-02-14 13:52:20 +01:00
Spythere	d496c70fa8	aktualizacja tłumaczenia	2023-02-14 13:51:52 +01:00
Spythere	b9868ba52e	dzienniki: stylistyka	2023-02-12 16:12:48 +01:00
Spythere	59bd3fa2ef	design: badge poziomów	2023-02-12 12:58:23 +01:00
Spythere	e14d328ed9	fix: wielkość scrollbaru	2023-02-12 00:48:18 +01:00
Spythere	36d71292bc	feature: url projektów	2023-02-12 00:42:37 +01:00
Spythere	2f6e2e7402	fix: responsywność	2023-02-12 00:30:05 +01:00
Spythere	e959eac6c5	hotfix	2023-02-11 03:14:43 +01:00
Spythere	8bedc4dfc6	feature: vmax szlaków	2023-02-11 03:08:24 +01:00
Spythere	73563d5db7	Wersja 1.11.2 Wersja 1.11.2	2023-01-05 22:05:34 +01:00
Spythere	3f818069cd	hotfix: podświetlenie sponsorów w dzienniku RJ	2023-01-05 16:09:27 +01:00
Spythere	cdf0b2a426	feature: nasłuchiwanie aktualizacji	2023-01-05 16:05:34 +01:00
Spythere	c29ddeb78c	fix: poziom 0 w dzienniku RJ	2023-01-05 15:59:14 +01:00
Spythere	b81d98cab7	fix: filtrowanie pociągów offline	2023-01-05 15:58:17 +01:00
Spythere	0e45bca5da	feature: przycisk odświeżania dzienników	2023-01-05 14:49:44 +01:00
Spythere	715e66879f	feature: przejścia pomiędzy statusami ładowań	2023-01-04 14:01:25 +01:00
Spythere	1747e15dc8	bump: 1.11.2	2023-01-03 14:58:04 +01:00
Spythere	6a923a8e1d	feature: sygnatura dev w stopce	2023-01-03 14:57:36 +01:00
Spythere	25a248e95e	feature: animacje list	2023-01-03 14:51:19 +01:00
Spythere	aa7a6b220e	feature: lvl maszynisty przy dzienniku i pociągach	2023-01-02 18:30:09 +01:00
Spythere	deb7b68985	Merge branch 'development'	2023-01-01 03:02:11 +01:00
Spythere	633f05f690	fix: wyświetlanie poprawnych id RJ	2023-01-01 02:57:11 +01:00
Spythere	73828867da	Merge wersji dev do produkcji (1.11.1) Wersja 1.11.1	2022-12-31 18:30:08 +01:00
Spythere	75685c1e0e	bump: 1.11.1	2022-12-31 18:22:39 +01:00
Spythere	496ff95236	fix: sortowanie RJ wg id z API	2022-12-31 18:21:32 +01:00
Spythere	7e25327832	feature: lvl dyżurnego w dzienniku	2022-12-30 17:39:21 +01:00
Spythere	272c9f50f8	fix: SW cache	2022-12-30 15:45:17 +01:00
Spythere	255e07372e	Merge wersji dev do produkcji (1.11) Wersja produkcyjna 1.11.0	2022-12-26 22:58:17 +01:00
Spythere	279bbfa4db	fix: responsywność	2022-12-26 20:01:10 +01:00
Spythere	a5c829faf5	Fix: wskaźnik ładowania dzienników	2022-12-26 19:37:52 +01:00
Spythere	5fdfaeac5e	hotfix	2022-12-26 18:52:31 +01:00
Spythere	9beb30e3d5	Tłumaczenie monitu	2022-12-26 18:51:50 +01:00
Spythere	48582e2eea	lock files sync	2022-12-26 18:45:39 +01:00
Spythere	2e721fb8bf	PWA: tryb offline	2022-12-26 18:43:15 +01:00
Spythere	f93c1fbfec	PWA: tryb offline	2022-12-26 18:43:14 +01:00
Spythere	c06e7b6468	Poprawka wyświetlania sumy dystansu	2022-12-26 13:54:30 +01:00
Spythere	22a6d266cb	Aktualizacja danych z API	2022-12-26 13:50:48 +01:00
Spythere	5f8a16401b	Update API	2022-12-25 23:35:10 +01:00
Spythere	c9be01aa29	lock files	2022-12-23 20:26:54 +01:00
Spythere	4ec058b33c	Konfiguracja PWA	2022-12-23 20:25:02 +01:00
Spythere	27a5d2a406	fix: tłumaczenie komunikatu	2022-12-22 18:50:09 +01:00
Spythere	58169e26f6	Feedback i stylistyka statystyk RJ	2022-12-22 01:45:43 +01:00
Spythere	fee1f4bbd5	Usprawienie podpowiedzi filtrów	2022-12-22 01:36:38 +01:00
Spythere	240817acc3	Przekierowanie do strony głównej	2022-12-21 20:32:41 +01:00
Spythere	db3be87dd8	Przystosowanie pod update API	2022-12-21 20:24:48 +01:00
Spythere	1665134d6f	Fix odznaczenia filtrów pociągów	2022-12-21 19:34:42 +01:00
Spythere	df289ab734	Wskaźnik aktywnych filtrów pociągów online	2022-12-21 19:07:23 +01:00
Spythere	f74440ba6f	Pogrubienie linku dziennika w headerze	2022-12-21 18:39:40 +01:00
Spythere	a25dbe9fd5	Usunięcie firebase config z html	2022-12-21 18:27:27 +01:00
Spythere	4fff136d6b	Poprawki reaktywności	2022-12-21 18:24:04 +01:00
Spythere	d06f2d5d2e	Optymalizacja pobierania danych	2022-12-21 18:10:54 +01:00
Spythere	9f68d628d0	Wskaźnik aktywnych filtrów dziennika DR	2022-12-21 15:51:13 +01:00
Spythere	d64b906dac	Wskaźnik aktywnych filtrów dziennika RJ	2022-12-21 15:45:03 +01:00
Spythere	f3e193e68a	Cleanup	2022-12-21 15:02:41 +01:00
Spythere	5640ce9f2b	Fix routingu w dzienniku RJ	2022-12-21 15:02:25 +01:00
Spythere	50100eb2f9	Nawigacja	2022-12-20 21:51:40 +01:00
Spythere	e478c510b2	Fix działania reaktywności linków	2022-12-20 21:31:59 +01:00
Spythere	7ea558642f	Stylistyka statystyk	2022-12-20 21:11:47 +01:00
Spythere	493145f7f2	Fix pola daty	2022-12-20 16:59:59 +01:00
Spythere	4f72535365	Setup GitHub Actions & npm	2022-12-20 16:56:12 +01:00
Spythere	8e3bf80715	Fix logiki przycisków	2022-12-20 16:44:15 +01:00
Spythere	6da586d08a	Stylistyka komponentów statystyk	2022-12-20 16:41:42 +01:00
Spythere	be53b9c7fb	Notka o lokacji pociągu nie pojawia się przy jej braku	2022-12-20 01:41:13 +01:00
Spythere	94ed1160a1	Poprawki	2022-12-20 01:38:08 +01:00
Spythere	859d8d2631	Train modal fix	2022-12-20 00:53:03 +01:00
Spythere	5f3abd73c5	Informacja o statystykach	2022-12-19 00:44:46 +01:00
Spythere	d71c8bb6f9	Bump wersji	2022-12-18 23:43:23 +01:00
Spythere	a3db13d79c	Github Actions	2022-12-18 20:01:15 +01:00
Spythere	8cb3da66f2	Statystyki maszynistów	2022-12-18 19:54:13 +01:00
Spythere	6e07897ac0	Fix: bug routingu dzienników	2022-12-18 03:01:13 +01:00
Spythere	726b859f5c	Poprawki tabów statystyk	2022-12-18 01:28:11 +01:00
Spythere	651c60707a	Rework statystyk RJ	2022-12-17 20:45:59 +01:00
Spythere	d4fee84603	Rework statystyk RJ	2022-12-17 20:45:53 +01:00
Spythere	86539cdf23	1.10.10: status scenerii w dzienniku RJ	2022-12-03 09:41:46 +01:00
Spythere	69772460b8	Poprawka w działaniu sortowania wyszukiwarki scenerii	2022-11-01 18:27:27 +01:00
Spythere	6988a83355	Zmiana API	2022-10-30 23:03:47 +01:00
Spythere	b6425564c8	Bump wersji	2022-10-28 13:15:28 +02:00
Spythere	caf0a9b4c5	Dodano sugestie wyszukiwania istniejących użytkowników w dziennikach	2022-10-28 13:15:07 +02:00
Spythere	bd5f433d6e	Update paczek	2022-10-26 15:27:28 +02:00
Spythere	8d9cc721d6	Poprawki stylów	2022-10-16 23:09:46 +02:00
Spythere	cceeffe49d	Świecące nicki i poziomy sponsorów	2022-10-14 23:15:50 +02:00