Merge do wersji 1.16.0

Wersja 1.16.0
bump v1.16.0
2026-05-03 13:28:11 +00:00 · 2023-06-12 01:33:45 +02:00 · 2023-06-12 01:21:49 +02:00 · 2023-06-12 01:19:31 +02:00 · 2023-06-12 00:51:17 +02:00 · 2023-06-11 21:47:50 +02:00
71 changed files with 2380 additions and 1833 deletions
@@ -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,7 +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" />
  </head>
  <body>
@@ -32,3 +32,4 @@
    <script type="module" src="/src/main.ts"></script>
  </body>
 </html>
@@ -1,6 +1,6 @@
 {
  "name": "stacjownik",
-  "version": "1.12.0",
+  "version": "1.16.0",
  "private": true,
  "scripts": {
    "dev": "vite",
@@ -91,6 +91,11 @@ footer.app_footer {
  max-width: 100%;
  padding: 0.5em;
  img {
    width: 1.1em;
    vertical-align: text-bottom;
  }
  z-index: 10;
  background: #111;
@@ -23,6 +23,8 @@
      <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
      {{ new Date().getUTCFullYear() }} |
      <a :href="releaseURL" target="_blank">v{{ VERSION }}{{ isOnProductionHost ? '' : 'dev' }}</a>
      <br />
      <a href="https://discord.gg/x2mpNN3svk"><img :src="getIcon('discord', 'png')" alt="">&nbsp;<b>{{ $t('footer.discord') }}</b></a>
      <div style="display: none">&int; ukryta taktyczna całka do programowania w HTMLu</div>
    </footer>
@@ -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,3 @@
 <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M23.75 3.75H22.5V1.25H20V3.75H10V1.25H7.5V3.75H6.25C4.875 3.75 3.75 4.875 3.75 6.25V23.75C3.75 25.125 4.875 26.25 6.25 26.25H23.75C25.125 26.25 26.25 25.125 26.25 23.75V6.25C26.25 4.875 25.125 3.75 23.75 3.75ZM23.75 23.75H6.25V11.25H23.75V23.75ZM6.25 8.75V6.25H23.75V8.75H6.25ZM8.75 13.75H21.25V16.25H8.75V13.75ZM8.75 18.75H17.5V21.25H8.75V18.75Z" fill="#F2E147"/>
 </svg>
@@ -0,0 +1,3 @@
 <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M23.75 3.75H22.5V1.25H20V3.75H10V1.25H7.5V3.75H6.25C4.875 3.75 3.75 4.875 3.75 6.25V23.75C3.75 25.125 4.875 26.25 6.25 26.25H23.75C25.125 26.25 26.25 25.125 26.25 23.75V6.25C26.25 4.875 25.125 3.75 23.75 3.75ZM23.75 23.75H6.25V11.25H23.75V23.75ZM6.25 8.75V6.25H23.75V8.75H6.25ZM8.75 13.75H21.25V16.25H8.75V13.75ZM8.75 18.75H17.5V21.25H8.75V18.75Z" fill="#66FF6C"/>
 </svg>
@@ -0,0 +1,3 @@
 <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M23.75 3.75H22.5V1.25H20V3.75H10V1.25H7.5V3.75H6.25C4.875 3.75 3.75 4.875 3.75 6.25V23.75C3.75 25.125 4.875 26.25 6.25 26.25H23.75C25.125 26.25 26.25 25.125 26.25 23.75V6.25C26.25 4.875 25.125 3.75 23.75 3.75ZM23.75 23.75H6.25V11.25H23.75V23.75ZM6.25 8.75V6.25H23.75V8.75H6.25ZM8.75 13.75H21.25V16.25H8.75V13.75ZM8.75 18.75H17.5V21.25H8.75V18.75Z" fill="#898989"/>
 </svg>
@@ -6,16 +6,6 @@
          <img :src="getIcon('pl')" alt="icon-pl" @click="changeLang('en')" v-if="currentLang == 'pl'" />
          <img :src="getIcon('en', 'jpg')" alt="icon-en" @click="changeLang('pl')" v-else />
        </span>
        <span class="icons-bottom">
          <a href="https://www.paypal.com/paypalme/spythere" target="_blank">
            <img :src="getIcon('dollar')" alt="icon paypal" />
          </a>
          <a href="https://discord.gg/x2mpNN3svk" target="_blank">
            <img :src="getIcon('discord', 'png')" alt="icon discord" />
          </a>
        </span>
      </div>
      <div class="header_body">
@@ -33,6 +23,12 @@
          <div class="info_counter">
            <img :src="getIcon('dispatcher')" alt="icon dispatcher" />
            <span class="text--primary">{{ onlineDispatchersCount }}</span>
            <!-- <span class="g-tooltip">
              <b class="text--primary">{{ factorU }}U</b>
              <div class="content">Test</div>
            </span> -->
            <span class="text--grayed"> / </span>
            <span class="text--primary">{{ onlineTrainsCount }}</span>
            <img :src="getIcon('train')" alt="icon train" />
@@ -98,11 +94,17 @@ export default defineComponent({
    onlineTrainsCount() {
      return this.store.trainList.filter((train) => train.online).length;
    },
    onlineDispatchersCount() {
      return this.store.stationList.filter(
        (station) => station.onlineInfo && station.onlineInfo.region == this.store.region.id
      ).length;
    },
    factorU() {
      return this.onlineDispatchersCount == 0 ? '-' : (this.onlineTrainsCount / this.onlineDispatchersCount).toFixed(2);
    },
    computedRegions() {
      return options.regions.map((region) => {
        const regionStationCount =
@@ -135,22 +137,20 @@ export default defineComponent({
 .header {
  &_body {
    max-width: 21em;
    position: relative;
-
+    max-width: 20em;
    @include smallScreen {
      max-width: 18em;
    }
  }
  &_container {
    display: flex;
    justify-content: center;
    position: relative;
    width: 1350px;
    padding: 0.5em 0.3em 0 0.3em;
    border-radius: 0 0 1em 1em;
    @include smallScreen {
      position: relative;
      margin-top: 0.5em;
    }
  }
  &_brand {
@@ -158,6 +158,7 @@ export default defineComponent({
    img {
      width: 100%;
      margin: 0 auto;
    }
  }
@@ -165,9 +166,7 @@ export default defineComponent({
  &_info {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
-    max-width: 100%;
+    font-size: 1.15em;
    font-size: 1.2em;
  }
  &_links {
@@ -184,57 +183,20 @@ export default defineComponent({
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
-    display: flex;
+    padding: 0.5em;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 0.5em 0.5em;
-    @include smallScreen() {
+    @include smallScreen {
-      right: auto;
+      transform: translateX(85%);
      left: 0.75em;
      padding: 0;
      align-items: center;
    }
  }
 }
 // ICONS
-.icons {
+.icons-top {
-  position: relative;
+  img {
-
+    width: 2.5em;
-  &-top {
+    cursor: pointer;
    img {
      width: 2.5em;
      cursor: pointer;
    }
    margin-bottom: 0.5em;
  }
  &-bottom {
    display: flex;
    a {
      margin-left: 0.6em;
      user-select: none;
    }
    img {
      width: 1.9em;
    }
    @include smallScreen() {
      flex-direction: column;
      a {
        margin: 0.25em 0;
      }
    }
  }
 }
@@ -164,7 +164,7 @@
 import { defineComponent } from 'vue';
 import { DataStatus } from '../../scripts/enums/DataStatus';
 import { useStore } from '../../store/store';
-import { StoreState } from '../../store/storeTypes';
+import { StoreState } from '../../scripts/interfaces/store/storeTypes';
 export default defineComponent({
  data() {
@@ -303,9 +303,11 @@ export default defineComponent({
 .status-indicator {
  position: absolute;
  left: 110%;
  bottom: 0;
  right: 0;
  z-index: 100;
  transform: translateX(1.5em);
 }
 .indicator {
@@ -330,7 +332,7 @@ export default defineComponent({
    background-color: #171717;
    border-radius: 0.75em;
-    min-width: 13em;
+    width: 13em;
    text-align: center;
    overflow: none;
@@ -354,22 +356,16 @@ export default defineComponent({
    }
    @include midScreen() {
-      left: 50%;
+      left: auto;
-      top: 100%;
+      right: 200%;
      transform: translate(-50%, 0);
      margin-left: 0;
      margin-top: 0.75em;
      &::before {
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
-        border-bottom: 10px solid #171717;
+        border-left: 12px solid #171717;
        right: 0;
        left: auto;
-        top: 0;
+        transform: translate(100%, -50%);
        left: 50%;
        transform: translate(-50%, -100%);
      }
    }
@@ -379,3 +375,4 @@ export default defineComponent({
  }
 }
 </style>
@@ -3,6 +3,10 @@
    <div class="select-box_content">
      <button class="selected" @click="toggleBox">
        <span>{{ computedSelectedItem.selectedValue || computedSelectedItem.value }}</span>
        <div class="arrow">
          <img :src="listOpen ? getIcon('arrow-asc') : getIcon('arrow-desc')" alt="arrow-icon" />
        </div>
      </button>
      <ul class="options" :ref="(el) => (listRef = el as Element)">
@@ -21,10 +25,6 @@
        </li>
      </ul>
    </div>
    <div class="arrow">
      <img :src="listOpen ? getIcon('arrow-asc') : getIcon('arrow-desc')" alt="arrow-icon" />
    </div>
  </div>
 </template>
@@ -129,46 +129,22 @@ export default defineComponent({
 }
 .select-box {
-  position: relative;
+  display: flex;
-  width: auto;
+  align-items: center;
 }
 .arrow {
  position: absolute;
  top: 50%;
  right: 0;
  padding: 0;
  img {
    vertical-align: middle;
    width: 1.35em;
  }
  transform: translateY(-50%);
  pointer-events: none;
 }
 button.selected {
  background-color: transparent;
  color: paleturquoise;
  font-size: 1em;
  font-weight: bold;
  padding: 0.1em 0.5em;
  margin-right: 2em;
  display: flex;
  width: 100%;
  cursor: pointer;
  border: none;
  outline: none;
  text-align: left;
  &:focus {
    background-color: #262626;
@@ -95,13 +95,18 @@
 <script setup lang="ts">
 import axios from 'axios';
-import { computed, reactive, ref } from 'vue';
+import { computed, onActivated, onDeactivated, onMounted, reactive, ref } from 'vue';
 import { DataStatus } from '../../scripts/enums/DataStatus';
 import { ITimetablesDailyStats, ITimetablesDailyStatsResponse } from '../../scripts/interfaces/api/StatsAPIData';
 import { URLs } from '../../scripts/utils/apiURLs';
 import StorageManager from '../../scripts/managers/storageManager';
 const intervalId = ref(-1);
 const emit = defineEmits<{
  (e: 'toggleStatsOpen', value: boolean): void;
 }>();
 const data = reactive({
  statsStatus: DataStatus.Loading,
@@ -158,17 +163,26 @@ async function fetchDailyTimetableStats() {
 function startFetchingDailyStats() {
  fetchDailyTimetableStats();
  if (intervalId.value != -1) return;
  intervalId.value = setInterval(fetchDailyTimetableStats, 60000);
 }
 function stopFetchingDailyStats() {
  clearInterval(intervalId.value);
  intervalId.value = -1;
 }
-defineExpose({
+onActivated(() => {
-  startFetchingDailyStats,
+  startFetchingDailyStats();
-  stopFetchingDailyStats,
+  emit('toggleStatsOpen', true);
 });
 onDeactivated(() => {
  stopFetchingDailyStats();
 });
 </script>
 <style lang="scss" scoped>
@@ -29,6 +29,10 @@
          <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 class="item-time">
@@ -55,6 +59,7 @@ 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: {
@@ -64,7 +69,7 @@ export default defineComponent({
    },
  },
-  mixins: [dateMixin, styleMixin],
+  mixins: [dateMixin, styleMixin, imageMixin],
  computed: {
    computedDispatcherHistory() {
@@ -101,6 +106,7 @@ export default defineComponent({
@import '../../styles/responsive.scss';
@import '../../styles/badge.scss';
@import '../../styles/JournalSection.scss';
@import '../../styles/variables.scss';
 li.sticky {
  position: sticky;
@@ -114,7 +120,7 @@ li.sticky {
  flex-wrap: wrap;
  text-align: left;
-  gap: 0.25em;
+  gap: 0.5em 1em;
  line-height: 1.7em;
  padding: 0.75em;
@@ -134,11 +140,11 @@ li.sticky {
 .item-general {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25em;
  flex-wrap: wrap;
  .level-badge {
    margin-right: 0.25em;
  }
@@ -160,4 +166,18 @@ li.sticky {
    font-weight: bold;
  }
 }
 .like-count {
  display: flex;
  align-items: center;
  gap: 0.25em;
  font-size: 1.2em;
  color: $accentCol;
 }
@include smallScreen {
  .journal_item {
    flex-direction: column;
  }
 }
 </style>
@@ -29,7 +29,7 @@
          <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
@@ -49,15 +49,6 @@
                </button>
              </div>
            </div>
            <div class="search_actions">
              <button class="btn--action" @click="onResetButtonClick">
                {{ $t('options.reset-button') }}
              </button>
              <button class="btn--action" @click="onSearchButtonConfirm">
                {{ $t('options.search-button') }}
              </button>
            </div>
          </div>
          <h1 class="option-title">{{ $t('options.sort-title') }}</h1>
@@ -74,15 +65,31 @@
          </div>
          <h1 class="option-title" v-if="filters.length != 0">{{ $t('options.filter-title') }}</h1>
-          <div class="options_filters">
+
-            <button
+          <div class="options_filter-sections" v-if="filters.length != 0 && filterList">
-              v-for="filter in filters"
+            <section class="filter-section" v-for="section in JournalFilterSection">
-              class="filter-option btn--option"
+              <p>{{ $t(`options.filter-section-${section}`) }}</p>
-              :class="{ checked: journalFilterActive.id === filter.id }"
+
-              :id="filter.id"
+              <div class="options_filters">
-              @click="onFilterChange(filter)"
+                <button
-            >
+                  v-for="filter in filterList.filter((f) => f.filterSection == section)"
-              {{ $t(`options.filter-${filter.id}`) }}
+                  class="filter-option btn--option"
                  :class="{ checked: filter.isActive }"
                  :id="filter.id"
                  @click="onFilterChange(filter)"
                >
                  {{ $t(`options.filter-${filter.id}`) }}
                </button>
              </div>
            </section>
          </div>
          <div class="options_actions">
            <button class="btn--action" @click="onResetButtonClick">
              {{ $t('options.reset-button') }}
            </button>
            <button class="btn--action" @click="onSearchButtonConfirm">
              {{ $t('options.search-button') }}
            </button>
          </div>
        </div>
@@ -100,9 +107,10 @@ 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';
 import { JournalFilterSection } from '../../scripts/enums/JournalFilterType';
 import { JournalFilter } from '../../scripts/types/JournalTimetablesTypes';
 export default defineComponent({
  components: { SelectBox, ActionButton },
@@ -116,7 +124,7 @@ export default defineComponent({
    },
    filters: {
-      type: Array as PropType<JournalTimetableFilter[]>,
+      type: Array as PropType<JournalFilter[]>,
      default: [],
    },
@@ -129,11 +137,17 @@ export default defineComponent({
      type: Boolean,
      default: false,
    },
    optionsType: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      showOptions: false,
      JournalFilterSection,
      driverSuggestions: [] as string[],
      dispatcherSuggestions: [] as string[],
@@ -149,7 +163,8 @@ export default defineComponent({
    return {
      searchersValues: inject('searchersValues') as { [key: string]: string },
      sorterActive: inject('sorterActive') as { id: string | number; dir: number },
-      journalFilterActive: inject('journalFilterActive') as JournalTimetableFilter,
+      // journalFilterActive: inject('journalFilterActive') as JournalFilter,
      filterList: inject('filterList') as JournalFilter[] | undefined,
    };
  },
@@ -169,7 +184,8 @@ export default defineComponent({
  watch: {
    async driverStatsName(value: string) {
      await this.fetchDriverStats();
-      this.store.currentStatsTab = value ? 'driver' : 'daily';
+
      // if (value) this.store.currentStatsTab = 'driver';
    },
    async 'searchersValues.search-driver'(value: string | undefined) {
@@ -244,18 +260,17 @@ export default defineComponent({
      });
    },
    focusEnd() {
      console.log('focus end');
    },
    onSorterChange(item: { id: string | number; value: string }) {
      this.sorterActive.id = item.id;
      this.sorterActive.dir = -1;
      this.$emit('onSearchConfirm');
    },
-    onFilterChange(filter: JournalTimetableFilter) {
+    onFilterChange(filter: JournalFilter) {
-      this.journalFilterActive = filter;
+      // this.journalFilterActive = filter;
      this.filterList?.filter((f) => f.filterSection === filter.filterSection).forEach((f) => (f.isActive = false));
      filter.isActive = true;
      this.$emit('onSearchConfirm');
    },
@@ -1,11 +1,13 @@
 <template>
-  <div class="journal-stats" v-show="!store.isOffline">
+  <div class="journal-stats" v-if="!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"
        :data-disabled="tab.inactive"
        :disabled="tab.inactive"
        @click="onTabButtonClick(tab.name)"
      >
        {{ $t(tab.titlePath) }}
@@ -14,7 +16,7 @@
    <div class="stats-tab" v-show="areStatsOpen">
      <keep-alive>
-        <JournalDailyStats v-if="store.currentStatsTab == 'daily'" ref="dailyStatsComp" />
+        <JournalDailyStats v-if="store.currentStatsTab == 'daily'" @toggleStatsOpen="toggleStatsOpen" />
        <JournalDriverStats v-else-if="store.currentStatsTab == 'driver'" />
      </keep-alive>
    </div>
@@ -22,22 +24,21 @@
 </template>
 <script setup lang="ts">
-import { computed, KeepAlive, onActivated, onDeactivated, reactive, Ref, ref, watch } from 'vue';
+import { computed, KeepAlive, onMounted, reactive, Ref, ref, watch } from 'vue';
 import { useStore } from '../../store/store';
 import JournalDailyStats from './DailyStats.vue';
 import JournalDriverStats from './JournalDriverStats.vue';
 import StorageManager from '../../scripts/managers/storageManager';
 // 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');
+const lastClickedTab: Ref<'daily' | 'driver' | null> = ref(null);
 let data = reactive({
  tabs: [
@@ -57,30 +58,35 @@ let data = reactive({
 function onTabButtonClick(tab: TStatTab) {
  if (lastClickedTab.value == tab || !areStatsOpen.value) areStatsOpen.value = !areStatsOpen.value;
-  if (tab == 'daily') lastDailyStatsOpen.value = areStatsOpen.value;
+  if (tab == 'daily') {
    StorageManager.setBooleanValue('dailyStatsOpen', areStatsOpen.value);
    lastDailyStatsOpen.value = areStatsOpen.value;
  }
  store.currentStatsTab = tab;
  lastClickedTab.value = tab;
  if (areStatsOpen.value == false) store.currentStatsTab = null;
 }
-onActivated(() => {
+function toggleStatsOpen(open: boolean) {
-  dailyStatsComp.value?.startFetchingDailyStats();
+  areStatsOpen.value = open;
-});
+}
 onDeactivated(() => {
  dailyStatsComp.value?.stopFetchingDailyStats();
 });
 watch(
  computed(() => store.driverStatsData),
  (statsData) => {
-    data.tabs[1].inactive = statsData ? false : true;
+    store.currentStatsTab = statsData ? 'driver' : lastClickedTab.value;
-
+    areStatsOpen.value = statsData ? true : lastClickedTab.value !== null;
    lastClickedTab.value = statsData ? 'driver' : 'daily';
    if (statsData) areStatsOpen.value = true;
    if (!statsData) areStatsOpen.value = lastDailyStatsOpen.value;
  }
 );
 onMounted(() => {
  if (StorageManager.getBooleanValue('dailyStatsOpen')) {
    areStatsOpen.value = true;
    store.currentStatsTab = 'daily';
  }
 });
 </script>
 <style lang="scss" scoped>
@@ -1,20 +1,27 @@
 <template>
  <transition-group class="journal-list" tag="ul" name="list-anim">
    <li
-      v-for="{ timetable, sceneryList, ...item } in computedTimetableHistory"
+      v-for="{ timetable, sceneryList, stockHistoryComp, ...item } in computedTimetableHistory"
      class="journal_item"
      :key="timetable.id"
      @click="item.showExtra.value = !item.showExtra.value"
    >
      <div class="journal_item-info">
        <div class="info-general">
          <span
            class="general-train"
            tabindex="0"
-            @click="showTimetable(timetable)"
+            @click.stop="showTimetable(timetable)"
            @keydown.enter="showTimetable(timetable)"
            style="cursor: pointer"
          >
            <span class="text--grayed">#{{ timetable.id }}</span>
            <span class="badges" v-if="timetable.skr || timetable.twr">
              <span class="train-badge twr" v-if="timetable.twr" :title="$t('general.TWR')">TWR</span>
              <span class="train-badge skr" v-if="timetable.skr" :title="$t('general.SKR')">SKR</span>
            </span>
            <span>
              <strong class="text--primary">
                {{ timetable.trainCategoryCode }}
@@ -53,20 +60,38 @@
            </b>
          </span>
        </div>
        <div class="info-route">
          <b>{{ timetable.route.replace('|', ' - ') }}</b>
        </div>
        <hr />
        <div class="scenery-list">
-          <span v-for="(scenery, i) in sceneryList" :key="scenery.name" :class="{ confirmed: scenery.confirmed }">
+          <span
-            <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>
        <!-- Status RJ -->
        <div style="margin: 0.5em 0">
          <span>
@@ -88,41 +113,80 @@
            </b>
          </span>
        </div>
        <!-- Nick dyżurnego -->
        <div v-if="timetable.authorName">
          <b class="text--grayed">{{ $t('journal.dispatcher-name') }}&nbsp;</b>
          <router-link class="dispatcher-link" :to="`/journal/dispatchers?dispatcherName=${timetable.authorName}`">
            <b>{{ timetable.authorName }}</b>
          </router-link>
          <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">
+        <!-- Dodatkowe informacje -->
        <div class="info-extended" v-if="timetable.stockString && timetable.stockMass && item.showExtra.value">
          <hr />
-          <div>
+
-            <span class="badge info-badge">
+          <div class="stock-specs">
            <span class="badge specs-badge">
              <span>{{ $t('journal.stock-max-speed') }}</span>
              <span>{{ timetable.maxSpeed }}km/h</span>
            </span>
-            <span class="badge info-badge">
+            <span class="badge specs-badge">
              <span>{{ $t('journal.stock-length') }}</span>
-              <span>{{ timetable.stockLength }}m</span>
+              <span>
                {{
                  item.currentHistoryIndex.value == 0
                    ? timetable.stockLength
                    : stockHistoryComp[item.currentHistoryIndex.value].stockLength || timetable.stockLength
                }}m
              </span>
            </span>
-            <span class="badge info-badge">
+            <span class="badge specs-badge">
              <span>{{ $t('journal.stock-mass') }}</span>
-              <span>{{ Math.floor(timetable.stockMass! / 1000) }}t</span>
+              <span>
                {{
                  Math.floor(
                    (item.currentHistoryIndex.value == 0
                      ? timetable.stockMass!
                      : stockHistoryComp[item.currentHistoryIndex.value].stockMass || timetable.stockMass) / 1000
                  )
                }}t
              </span>
            </span>
          </div>
          <div class="stock-history" v-if="stockHistoryComp.length > 1">
            <button
              class="btn--action"
              v-for="(sh, i) in stockHistoryComp"
              :data-checked="i == item.currentHistoryIndex.value"
              @click.stop="item.currentHistoryIndex.value = i"
            >
              {{ sh.updatedAt }}
            </button>
          </div>
          <ul class="stock-list">
-            <li v-for="(car, i) in timetable.stockString.split(';')" :key="i">
+            <li
              v-for="(car, i) in (item.currentHistoryIndex.value == 0
                ? timetable.stockString
                : stockHistoryComp[item.currentHistoryIndex.value].stockString
              ).split(';')"
              :key="i"
            >
              <img
                @error="onImageError"
                :src="`https://rj.td2.info.pl/dist/img/thumbnails/${car.split(':')[0]}.png`"
@@ -160,7 +224,24 @@ export default defineComponent({
      return this.timetableHistory.map((timetable) => ({
        timetable,
        sceneryList: this.getSceneryList(timetable),
-        showStock: ref(false),
+        stockHistoryComp: timetable.stockHistory
          .slice()
          .reverse()
          .map((h) => {
            const historyData = h.split('@');
            return {
              updatedAt: new Date(Number(historyData[0])).toLocaleTimeString(this.$i18n.locale, {
                hour: '2-digit',
                minute: '2-digit',
              }),
              stockString: historyData[1],
              stockMass: Number(historyData[2]) || undefined,
              stockLength: Number(historyData[3]) || undefined,
            };
          }),
        showExtra: ref(false),
        currentHistoryIndex: ref(0),
      }));
    },
  },
@@ -190,12 +271,7 @@ 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 };
      });
    },
@@ -221,6 +297,10 @@ export default defineComponent({
@import '../../styles/badge.scss';
@import '../../styles/JournalSection.scss';
 .journal_item {
  cursor: pointer;
 }
 hr {
  margin: 0.25em 0;
 }
@@ -268,6 +348,7 @@ hr {
 .general-train {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25em;
 }
@@ -284,6 +365,45 @@ ul.stock-list {
    color: #aaa;
    font-size: 0.9em;
  }
  li > img {
    vertical-align: text-bottom;
    max-height: 60px;
  }
 }
 .stock-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: 0.5em;
  .specs-badge {
    margin: 0;
    span:last-child {
      color: black;
      background-color: $accentCol;
    }
  }
 }
 .badges {
  display: flex;
  gap: 0.25em;
  // badge.scss
 }
 .stock-history {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: 1em;
  button[data-checked='true'] {
    color: $accentCol;
  }
 }
 .scenery-list {
@@ -304,13 +424,6 @@ ul.stock-list {
  }
 }
 .info-badge {
  span:last-child {
    color: black;
    background-color: $accentCol;
  }
 }
@include smallScreen {
  .info-general {
    flex-direction: column;
@@ -319,6 +432,10 @@ ul.stock-list {
    text-align: center;
  }
  .general-train {
    justify-content: center;
  }
  .info-route {
    display: flex;
    justify-content: center;
@@ -327,5 +444,13 @@ ul.stock-list {
  .btn--show {
    margin: 1em auto 0 auto;
  }
  .stock-specs {
    justify-content: center;
  }
  .stock-history {
    justify-content: center;
  }
 }
 </style>
@@ -4,6 +4,8 @@
      {{ station.name }}
    </a>
    <div class="scenery-abbrev">{{ $t('scenery.abbrev') }} <b>{{ station.generalInfo?.abbr }}</b></div>
    <div class="scenery-hash" v-if="station.onlineInfo?.hash">#{{ station.onlineInfo.hash }}</div>
  </section>
 </template>
@@ -28,16 +30,20 @@ export default defineComponent({
 .scenery-name {
  font-weight: bold;
  position: relative;
  font-size: 3em;
  text-transform: uppercase;
 }
 .scenery-abbrev {
  font-size: 1.3em;
  color: #aaa;
 }
 .scenery-hash {
  margin-top: 0.5em;
  color: #aaa;
  font-size: 1.2em;
 }
 </style>
@@ -30,8 +30,9 @@
              style="color: salmon; text-decoration: underline; font-weight: bold"
              :href="station.generalInfo.projectUrl"
              target="_blank"
              >{{ station.generalInfo.project }}</a
            >
              {{ station.generalInfo.project }}
            </a>
          </span>
        </div>
@@ -4,9 +4,11 @@
      <b>{{ $t('scenery.one-way-routes') }}</b>
      <ul class="routes-list">
-        <li v-for="route in station.generalInfo.routes.oneWay">
+        <li v-for="route in station.generalInfo.routes.oneWay" @click="setActiveShowLength(route.name)">
          <span :class="{ 'no-catenary': !route.catenary, internal: route.isInternal }"> {{ route.name }}</span>
-          <span v-if="route.speed" class="speed">{{ route.speed }}</span>
+          <span v-if="route.speed" class="speed">
            {{ activeShowLength.includes(route.name) ? route.length + 'm' : route.speed }}
          </span>
          <span v-if="route.SBL" class="sbl">SBL</span>
        </li>
      </ul>
@@ -16,9 +18,11 @@
      <b>{{ $t('scenery.two-way-routes') }}</b>
      <ul class="routes-list">
-        <li v-for="route in station.generalInfo.routes.twoWay">
+        <li v-for="(route, i) in station.generalInfo.routes.twoWay" @click="setActiveShowLength(route.name)">
          <span :class="{ 'no-catenary': !route.catenary, internal: route.isInternal }">{{ route.name }}</span>
-          <span v-if="route.speed" class="speed">{{ route.speed }}</span>
+          <span v-if="route.speed" class="speed">
            {{ activeShowLength.includes(route.name) ? route.length + 'm' : route.speed }}
          </span>
          <span v-if="route.SBL" class="sbl">SBL</span>
        </li>
      </ul>
@@ -37,6 +41,19 @@ export default defineComponent({
      default: {},
    },
  },
  methods: {
    setActiveShowLength(name: string) {
      if (this.activeShowLength.includes(name)) this.activeShowLength.splice(this.activeShowLength.indexOf(name), 1);
      else this.activeShowLength.push(name);
    },
  },
  data() {
    return {
      activeShowLength: [] as string[],
    };
  },
 });
 </script>
@@ -66,6 +83,11 @@ ul.routes-list {
  li {
    margin: 0.5em 0.25em;
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    span {
      padding: 0.2em 0.25em;
@@ -100,7 +122,6 @@ ul.routes-list {
      &: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 class="text--primary">{{ station.onlineInfo?.scheduledTrains?.length || '0' }}</span>
+        <span>
-        <span>&nbsp;/&nbsp;</span>
+          <span class="text--primary">{{ station.onlineInfo?.scheduledTrains?.length || '0' }}</span>
-        <span class="text--grayed">
+          <span> / </span>
-          {{ station.onlineInfo?.scheduledTrains?.filter((train) => train.stopInfo.confirmed).length || '0' }}
+          <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;') || '' }}
@@ -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',
@@ -281,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;
@@ -355,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;
@@ -4,16 +4,16 @@
    <table v-else-if="sceneryHistoryList.length">
      <thead>
-        <th>{{ $t('scenery.timetables-history-id')  }}</th>
+        <th>{{ $t('scenery.timetables-history-id') }}</th>
-        <th>{{ $t('scenery.timetables-history-number')}}</th>
+        <th>{{ $t('scenery.timetables-history-number') }}</th>
-        <th>{{ $t('scenery.timetables-history-route')}}</th>
+        <th>{{ $t('scenery.timetables-history-route') }}</th>
-        <th>{{ $t('scenery.timetables-history-driver')}}</th>
+        <th>{{ $t('scenery.timetables-history-driver') }}</th>
-        <th>{{ $t('scenery.timetables-history-author')}}</th>
+        <th>{{ $t('scenery.timetables-history-author') }}</th>
-        <th>{{ $t('scenery.timetables-history-date')}}</th>
+        <th>{{ $t('scenery.timetables-history-date') }}</th>
      </thead>
      <tbody>
-        <tr v-for="historyItem in sceneryHistoryList" @click="test">
+        <tr v-for="historyItem in sceneryHistoryList">
          <td>
            <router-link :to="`/journal/timetables?timetableId=${historyItem.id}`">#{{ historyItem.id }}</router-link>
          </td>
@@ -40,31 +40,6 @@
    </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>
          {{ localeTime(historyItem.beginDate, $i18n.locale) }}
        </div>
        <div>
          <router-link :to="`/journal/timetables?timetableId=${historyItem.id}`">
            <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>
          {{ $t('scenery.timetable-author-title') }}:
          <b v-if="historyItem.authorName">{{ historyItem.authorName }}</b>
          <i v-else>{{ $t('scenery.timetable-author-unknown') }}</i>
        </div>
      </li>
    </ul> -->
  </section>
 </template>
@@ -99,19 +74,15 @@ export default defineComponent({
  methods: {
    async fetchAPIData(countFrom = 0, countLimit = 15) {
      try {
-        const requestString = `${URLs.stacjownikAPI}/api/getSceneryTimetables?name=${this.station.name}&countFrom=${countFrom}&countLimit=${countLimit}`;
+        const requestString = `${URLs.stacjownikAPI}/api/getIssuedTimetables?name=${this.station.name}&countFrom=${countFrom}&countLimit=${countLimit}`;
        const historyAPIData: SceneryTimetableHistory = await (await axios.get(requestString)).data;
-        this.sceneryHistoryList = historyAPIData.sceneryTimetables;
+        this.sceneryHistoryList = historyAPIData.timetables;
        this.dataStatus = DataStatus.Loaded;
      } catch (error) {
        console.error(error);
      }
    },
    test() {
      console.log('test');
    },
  },
  components: { Loading },
 });
@@ -1,47 +1,19 @@
 <template>
  <div class="general-status">
-    <span :class="scheduledTrain.stopStatus">
+    <span :class="computedScheduledTrain.stopStatus" :title="computedScheduledTrain.stopStatusDescription">
-      <span v-if="scheduledTrain.stopStatus == 'arriving'">
+      {{ computedScheduledTrain.stopStatusIndicator }}
        <span v-if="scheduledTrain.prevDepartureLine">({{ scheduledTrain.prevDepartureLine }})</span>
        {{ scheduledTrain.prevStationName }}
        &gt;<span v-if="scheduledTrain.nextArrivalLine"> ({{ scheduledTrain.nextArrivalLine }}) </span>
        {{ scheduledTrain.nextStationName || '---' }}
      </span>
      <span v-else-if="scheduledTrain.stopStatus == 'departed'">
        &gt;&gt; <span v-if="scheduledTrain.nextArrivalLine"> ({{ scheduledTrain.nextArrivalLine }}) </span>
        {{ scheduledTrain.nextStationName }}
      </span>
      <span v-else-if="scheduledTrain.stopStatus == 'departed-away'">
        &gt;&gt;&gt;
        <span v-if="scheduledTrain.nextArrivalLine"> ({{ scheduledTrain.nextArrivalLine }}) </span>
        {{ scheduledTrain.nextStationName }}
      </span>
      <span v-else-if="scheduledTrain.stopStatus == 'online'">
        &gt;
        <span v-if="scheduledTrain.nextArrivalLine">
          ({{ scheduledTrain.nextArrivalLine }}) {{ scheduledTrain.nextStationName }}
        </span>
        <span v-else-if="!scheduledTrain.nextStationName">{{ $t('timetables.end') }}</span>
        <span v-else>{{ scheduledTrain.nextStationName }}</span>
      </span>
      <span v-else-if="scheduledTrain.stopStatus == 'stopped'">
        &gt;
        <span v-if="scheduledTrain.nextArrivalLine"> ({{ scheduledTrain.nextArrivalLine }}) </span>
        {{ scheduledTrain.nextStationName }}
      </span>
      <span v-else-if="scheduledTrain.stopStatus == 'terminated'">X {{ $t('timetables.terminated') }}</span>
    </span>
  </div>
 </template>
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
-import ScheduledTrain from '../../scripts/interfaces/ScheduledTrain';
+import { ScheduledTrain, StopStatus } from '../../scripts/interfaces/ScheduledTrain';
 interface ScheduledTrainComp extends ScheduledTrain {
  stopStatusIndicator: string;
  stopStatusDescription: string;
 }
 export default defineComponent({
  props: {
@@ -50,6 +22,58 @@ export default defineComponent({
      required: true,
    },
  },
  computed: {
    computedScheduledTrain(): ScheduledTrainComp {
      const { prevDepartureLine, prevStationName, stopStatus, nextArrivalLine, nextStationName } = this.scheduledTrain;
      const prevDepartureIndicator = prevDepartureLine ? `(${prevDepartureLine}) ${prevStationName}` : '---';
      const nextArrivalIndicator = nextArrivalLine ? `(${nextArrivalLine}) ${nextStationName}` : '---';
      let stopStatusDescription = '',
        stopStatusIndicator = '';
      switch (stopStatus) {
        case StopStatus.arriving:
          stopStatusIndicator = `${this.$t('timetables.from')}: ${prevDepartureIndicator}`;
          stopStatusDescription = this.$t('timetables.desc-arriving', { prevStationName, prevDepartureLine });
          break;
        case StopStatus.online:
        case StopStatus.stopped:
          stopStatusIndicator = nextArrivalLine
            ? `${this.$t('timetables.to')}: ${nextArrivalIndicator}`
            : `${this.$t('timetables.desc-end')}`;
          stopStatusDescription = nextArrivalLine
            ? this.$t(`timetables.desc-${stopStatus}`, { nextStationName, nextArrivalLine })
            : '';
          break;
        case StopStatus.departed:
          stopStatusIndicator = `${this.$t('timetables.to')}: ${nextArrivalIndicator}`;
          stopStatusDescription = this.$t('timetables.desc-departed', { nextStationName, nextArrivalLine });
          break;
        case StopStatus['departed-away']:
          stopStatusIndicator = `${this.$t('timetables.to')}: ${nextArrivalIndicator}`;
          stopStatusDescription = this.$t('timetables.desc-departed-away', { nextStationName, nextArrivalLine });
          break;
        case StopStatus.terminated:
          stopStatusIndicator = `X ${this.$t('timetables.desc-terminated')}`;
          stopStatusDescription = this.$t('timetables.desc-terminated');
          break;
        default:
          break;
      }
      return {
        ...this.scheduledTrain,
        stopStatusDescription,
        stopStatusIndicator,
      };
    },
  },
 });
 </script>
@@ -86,3 +110,4 @@ export default defineComponent({
  }
 }
 </style>
@@ -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,48 @@ 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();
      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 +85,17 @@ $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 {
+    background-color: forestgreen;
-      background-color: $accessCol;
+    font-weight: bold;
      box-shadow: 0 0 6px 1px $accessCol;
    }
    &.control {
      background-color: $controlCol;
      box-shadow: 0 0 6px 1px $controlCol;
    }
    &.signals {
      background-color: $signalCol;
      box-shadow: 0 0 6px 1px $signalCol;
    }
    &.routes {
      background-color: $routesCol;
      box-shadow: 0 0 6px 1px $routesCol;
    }
    &.status {
      background-color: $statusCol;
      box-shadow: 0 0 6px 1px $statusCol;
    }
    &.save {
      background-color: $saveCol;
      box-shadow: 0 0 6px 1px $saveCol;
    }
    &.troll {
      background-color: firebrick;
      box-shadow: 0 0 6px 1px firebrick;
    }
    &.mode {
      background-color: lightgreen;
      color: black;
      font-weight: 500;
    }
  }
 }
 </style>
@@ -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">
-            <filter-option
+            <div class="option-section" v-for="section in filterStore.inputs.optionSections">
-              v-for="(option, i) in filterStore.inputs.options"
+              <h3 class="text--primary">
-              :option="option"
+                {{ $t(`filters.sections.${section}`) }}
-              :key="i"
+
-              @optionChange="handleChange"
+                <button @click="filterStore.resetSectionOptions(section)">RESET</button>
-            />
+              </h3>
              <hr />
              <div class="section-inputs">
                <filter-option
                  v-for="(option, i) in filterStore.inputs.options.filter((o) => o.section == section)"
                  :option="option"
                  :key="i"
                />
              </div>
            </div>
          </section>
          <section class="card_timestamp" style="text-align: center">
            <div>{{ $t('filters.minimum-hours-title') }}</div>
            <span class="clock">
@@ -80,18 +93,25 @@
              </div>
            </div>
          </section>
          <section class="card_actions">
            <div class="action-buttons">
              <button class="btn--action" style="width: 100%" @click="saveFilters" :data-selected="saveOptions">
                {{ $t('filters.save') }}
              </button>
              <button class="btn--action" @click="resetFilters">{{ $t('filters.reset') }}</button>
              <button class="btn--action" @click="closeCard">{{ $t('filters.close') }}</button>
            </div>
          </section>
        </div>
        <section class="card_actions">
          <div class="action-buttons">
            <button class="btn--action" style="width: 100%" @click="saveFilters" :data-selected="saveOptions">
              {{ $t('filters.save') }}
            </button>
            <button
              class="btn--action"
              @click="resetFilters"
              :disabled="filterStore.areFiltersAtDefault"
              :data-disabled="filterStore.areFiltersAtDefault"
            >
              {{ $t('filters.reset') }}
            </button>
            <button class="btn--action" @click="closeCard">{{ $t('filters.close') }}</button>
          </div>
        </section>
      </div>
    </transition>
  </section>
@@ -181,15 +201,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;
@@ -281,6 +292,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;
@@ -292,13 +311,13 @@ export default defineComponent({
  }
  &_content {
    padding: 1em 0.5em;
    display: flex;
    flex-direction: column;
    gap: 1em;
-
+    overflow: auto;
    max-height: 90vh;
    padding: 1em;
  }
  &_title {
@@ -309,18 +328,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;
@@ -391,6 +398,9 @@ export default defineComponent({
  }
  &_actions {
    width: 100%;
    padding: 0.5em;
    .filter-option {
      max-width: 50%;
      margin: 0 auto;
@@ -409,14 +419,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;
@@ -8,26 +8,36 @@
      <table>
        <thead>
          <tr>
-            <th v-for="(id, i) in headIds" :key="id" @click="() => changeSorter(i)">
+            <th
              v-for="(headerName, i) in headIds"
              :key="headerName"
              @click="changeSorter(headerName)"
              class="header-text"
            >
              <span class="header_wrapper">
-                <div v-html="$t(`sceneries.${id}`)"></div>
+                <div v-html="$t(`sceneries.${headerName}`)"></div>
                <img
                  class="sort-icon"
-                  v-if="sorterActive.index == i"
+                  v-if="sorterActive.headerName == headerName"
                  :src="sorterActive.dir == 1 ? getIcon('arrow-asc') : getIcon('arrow-desc')"
                  alt="sort icon"
                />
              </span>
            </th>
-            <th v-for="(id, i) in headIconsIds" :key="id" @click="() => changeSorter(i + 7)">
+            <th
              v-for="(headerName, i) in headIconsIds"
              :key="headerName"
              @click="changeSorter(headerName)"
              class="header-image"
            >
              <span class="header_wrapper">
-                <img :src="getIcon(id)" :alt="id" :title="$t(`sceneries.${id}s`)" />
+                <img :src="getIcon(headerName)" :alt="headerName" :title="$t(`sceneries.${headerName}`)" />
                <img
                  class="sort-icon"
-                  v-if="sorterActive.index == i + 7"
+                  v-if="sorterActive.headerName == headerName"
                  :src="sorterActive.dir == 1 ? getIcon('arrow-asc') : getIcon('arrow-desc')"
                  alt="sort icon"
                />
@@ -190,25 +200,31 @@
            <td class="station_users" :class="{ inactive: !station.onlineInfo }">
              <span>
-                <span class="highlight">{{ station.onlineInfo?.currentUsers || '0' }}</span>
+                <span class="highlight">{{ station.onlineInfo?.currentUsers || 0 }}</span>
                /
-                <span>{{ station.onlineInfo?.maxUsers || '0' }}</span>
+                <span class="highlight">{{ station.onlineInfo?.maxUsers || 0 }}</span>
              </span>
            </td>
            <td class="station_spawns" :class="{ inactive: !station.onlineInfo }">
-              <span class="highlight">{{ station.onlineInfo?.spawns.length || '0' }}</span>
+              <span>{{ station.onlineInfo?.spawns.length || 0 }}</span>
            </td>
-            <td class="station_schedules" :class="{ inactive: !station.onlineInfo }">
+            <td class="station_schedules" style="width: 30px" :class="{ inactive: !station.onlineInfo }">
-              <span>
+              <span class="highlight">
-                <span class="highlight">
+                {{ station.onlineInfo?.scheduledTrains?.length || 0 }}
-                  {{ station.onlineInfo?.scheduledTrains?.length || '0' }}
+              </span>
-                </span>
+            </td>
-                /
+
-                <span style="color: #bbb">
+            <td class="station_schedules" style="width: 30px" :class="{ inactive: !station.onlineInfo }">
-                  {{ station.onlineInfo?.scheduledTrains?.filter((train) => train.stopInfo.confirmed).length || '0' }}
+              <span style="color: #ccc">
-                </span>
+                {{ station.onlineInfo?.scheduledTrains?.filter((train) => !train.stopInfo.confirmed).length || 0 }}
              </span>
            </td>
            <td class="station_schedules" style="width: 30px" :class="{ inactive: !station.onlineInfo }">
              <span style="color: #66ff6c">
                {{ station.onlineInfo?.scheduledTrains?.filter((train) => train.stopInfo.confirmed).length || 0 }}
              </span>
            </td>
          </tr>
@@ -236,6 +252,7 @@ import Station from '../../scripts/interfaces/Station';
 import { useStationFiltersStore } from '../../store/stationFiltersStore';
 import { useStore } from '../../store/store';
 import Loading from '../Global/Loading.vue';
 import { HeadIdsTypes, headIconsIds, headIds } from '../../scripts/data/stationHeaderNames';
 export default defineComponent({
  props: {
@@ -249,8 +266,8 @@ export default defineComponent({
  mixins: [styleMixin, dateMixin, stationInfoMixin, returnBtnMixin, imageMixin],
  data: () => ({
-    headIds: ['station', 'min-lvl', 'status', 'dispatcher', 'dispatcher-lvl', 'routes', 'general'],
+    headIconsIds,
-    headIconsIds: ['user', 'spawn', 'timetable'],
+    headIds,
    lastSelectedStationName: '',
  }),
@@ -291,8 +308,10 @@ export default defineComponent({
      window.open(url, '_blank');
    },
-    changeSorter(i: number) {
+    changeSorter(headerName: HeadIdsTypes) {
-      this.stationFiltersStore.changeSorter(i);
+      if (headerName == 'general' || headerName == 'routes') return;
      this.stationFiltersStore.changeSorter(headerName);
    },
  },
 });
@@ -349,9 +368,15 @@ table {
    position: sticky;
    top: 0;
-    min-width: 75px;
+    &.header-text {
      min-width: 140px;
    }
-    padding: 0.5em;
+    &.header-image {
      min-width: 60px;
    }
    padding: 0.5em 0.25em;
    background-color: $bgCol;
    white-space: pre-wrap;
@@ -6,8 +6,8 @@
        <span class="timetable-id" v-if="train.timetableData">#{{ train.timetableData.timetableId }}</span>
        <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 twr" v-if="train.timetableData?.TWR" :title="$t('general.TWR')">TWR</span>
-          <span class="train-badge skr" v-if="train.timetableData?.SKR">SKR</span>
+          <span class="train-badge skr" v-if="train.timetableData?.SKR" :title="$t('general.SKR')">SKR</span>
        </span>
        <strong>
@@ -118,7 +118,6 @@ export default defineComponent({
@import '../../styles/responsive.scss';
@import '../../styles/badge.scss';
 .image-warning {
  height: 1em;
@@ -182,26 +181,6 @@ export default defineComponent({
  gap: 0.25em;
 }
 .train-badge {
  padding: 0.1em 0.2em;
  border-radius: 0.2em;
  font-weight: bold;
  font-size: 0.9em;
  &.twr {
    background-color: var(--clr-twr);
  }
  &.skr {
    background-color: var(--clr-skr);
  }
  &.offline {
    background-color: #9c362b;
  }
 }
 .train-driver {
  &.supporter {
    color: orange;
@@ -218,9 +197,7 @@ export default defineComponent({
 .timetable_warnings {
  display: flex;
-  gap: 0.2em;
+  gap: 0.25em;
  color: black;
 }
 .timetable_progress {
@@ -43,29 +43,34 @@
          <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)"
            >
              {{ opt.value.toUpperCase() }}
            </button>
          </div>
          <h1 class="option-title" v-if="trainFilterList.length != 0">{{ $t('options.filter-title') }}</h1>
          <div class="options_filters">
            <div v-for="section in Object.keys(TrainFilterSection)">
              <button
-                class="sort-option btn--option"
+                class="btn--option"
-                :data-selected="opt.id == sorterActive.id"
+                v-for="filter in trainFilterList.filter((f) => f.section == section)"
-                @click="onSorterChange(opt)"
+                :data-inactive="!filter.isActive"
                @click="onFilterChange(filter)"
              >
-                {{ opt.value.toUpperCase() }}
+                {{ $t(`options.filter-${filter.id}`) }}
              </button>
            </div>
          </div>
-          <h1 class="option-title" v-if="trainFilterList.length != 0">{{ $t('options.filter-title') }}</h1>
+          <div class="filter-actions">
-          <div class="options_filters">
+            <div></div>
-            <div class="filter-option" v-for="filter in trainFilterList">
+            <button class="btn--action" @click="resetAllFilters">{{ $t('options.filter-reset') }}</button>
              <button class="btn--option" :data-inactive="!filter.isActive" @click="onFilterChange(filter)">
                {{ $t(`options.filter-${filter.id}`) }}
              </button>
            </div>
            <div class="filter-actions">
              <button class="btn--action" @click="clearAllFilters">{{ $t('options.filter-clear') }}</button>
              <button class="btn--action" @click="resetAllFilters">{{ $t('options.filter-reset') }}</button>
            </div>
          </div>
        </div>
      </div>
@@ -77,9 +82,10 @@
 import { defineComponent, inject, PropType } from 'vue';
 import imageMixin from '../../mixins/imageMixin';
 import keyMixin from '../../mixins/keyMixin';
 import { TrainFilter } from '../../types/Trains/TrainOptionsTypes';
 import ActionButton from '../Global/ActionButton.vue';
 import SelectBox from '../Global/SelectBox.vue';
 import { TrainFilterSection } from '../../scripts/enums/TrainFilterType';
 import { TrainFilter } from '../../scripts/interfaces/Trains/TrainFilter';
 export default defineComponent({
  components: { SelectBox, ActionButton },
@@ -101,6 +107,7 @@ export default defineComponent({
    return {
      showOptions: false,
      lastSelectedFilter: null as TrainFilter | null,
      TrainFilterSection,
    };
  },
@@ -183,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;
    }
  }
 }
@@ -201,7 +219,7 @@ export default defineComponent({
  margin-top: 1em;
-  button {
+  > * {
    width: 100%;
  }
 }
@@ -202,7 +202,6 @@ ul.stock-list {
  img {
    max-height: 60px;
    max-width: 320px;
  }
 }
@@ -12,10 +12,6 @@
          {{ $t('trains.no-trains') }}
        </div>
        <!-- <div class="timeouts-warning" v-if="trainNumbersWithTimeouts.length == 0">
          <b class="warning-timeout">?</b>
          {{ $t('trains.timeout') }}
        </div> -->
        <transition-group name="list-anim" tag="ul" class="train-list" v-else>
          <li
            class="train-row"
@@ -70,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) {
@@ -1,28 +1,46 @@
-import { JournalFilterType } from "../../scripts/enums/JournalFilterType";
+import { JournalFilterSection, JournalFilterType } from '../../scripts/enums/JournalFilterType';
-import { JournalTimetableFilter } from "../../types/Journal/JournalTimetablesTypes";
+import { JournalFilter } from '../../scripts/types/JournalTimetablesTypes';
-export const journalTimetableFilters: JournalTimetableFilter[] = [
+export const journalTimetableFilters: JournalFilter[] = [
  {
-    id: JournalFilterType.all,
+    id: JournalFilterType.ALL,
-    filterSection: 'timetable-status',
+    filterSection: JournalFilterSection.TIMETABLE_STATUS,
    isActive: true,
  },
  {
-    id: JournalFilterType.active,
+    id: JournalFilterType.ACTIVE,
-    filterSection: 'timetable-status',
+    filterSection: JournalFilterSection.TIMETABLE_STATUS,
    isActive: false,
  },
  {
-    id: JournalFilterType.fulfilled,
+    id: JournalFilterType.FULFILLED,
-    filterSection: 'timetable-status',
+    filterSection: JournalFilterSection.TIMETABLE_STATUS,
    isActive: false,
  },
  {
-    id: JournalFilterType.abandoned,
+    id: JournalFilterType.ABANDONED,
-    filterSection: 'timetable-status',
+    filterSection: JournalFilterSection.TIMETABLE_STATUS,
    isActive: false,
  },
  {
    id: JournalFilterType.TWR_SKR,
    filterSection: JournalFilterSection.TWRSKR,
    isActive: true,
  },
  {
    id: JournalFilterType.TWR,
    filterSection: JournalFilterSection.TWRSKR,
    isActive: false,
  },
  {
    id: JournalFilterType.SKR,
    filterSection: JournalFilterSection.TWRSKR,
    isActive: false,
  },
 ];
@@ -1,33 +1,58 @@
-import { TrainFilterType } from '../../scripts/enums/TrainFilterType';
+import { TrainFilterSection, TrainFilterType } from '../../scripts/enums/TrainFilterType';
-import { TrainFilter } from '../../types/Trains/TrainOptionsTypes';
+import { TrainFilter } from '../../scripts/interfaces/Trains/TrainFilter';
 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,
  },
 ];
@@ -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,7 +1,9 @@
 {
  "general": {
    "and": " and ",
-    "refresh": "REFRESH"
+    "refresh": "REFRESH",
    "TWR": "High risk freight train",
    "SKR": "Train with exceeded gauge"
  },
  "app": {
    "sceneries": "SCENERIES",
@@ -15,6 +17,9 @@
    "migration-confirm": "Roger that!",
    "offline": "App is in the offline mode!"
  },
  "footer": {
    "discord": "Stacjownik Discord server"
  },
  "update": {
    "title": "New version of the app is available!",
    "paragraph1": "Enjoy the application and may the green signal be with you!",
@@ -35,7 +40,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: ",
@@ -94,48 +99,71 @@
    "search-dispatcher": "Dispatcher name",
    "search-station": "Scenery name",
    "search-author": "Timetable author name",
-    "search-date": "Timetable date (CEST / GMT+2)",
+    "search-issuedFrom": "Origin scenery name",
    "search-timetables-date": "Timetable date (UTC+2 / CEST)",
    "search-dispatchers-date": "Service date (UTC+2 / CEST)",
    "search-date": "Date (UTC+2 / CEST)",
    "sort-mass": "mass",
    "sort-speed": "speed",
    "sort-length": "length",
-    "sort-distance": "distance",
+    "sort-routeDistance": "route distance",
    "sort-timetable": "train no.",
    "sort-progress": "route progress",
    "sort-delay": "current delay",
    "sort-id": "timetable id",
-    "sort-total-stops": "total stops",
+    "sort-allStopsCount": "total stops",
    "sort-beginDate": "date",
    "sort-timetableId": "timetable ID",
    "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-twr-skr": "ALL TYPES",
    "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",
    "filter-section-timetable-status": "TIMETABLE STATUS",
    "filter-section-twrskr": "WARNINGS",
    "filter-all": "ALL ENTRIES",
    "filter-abandoned": "ABANDONED",
    "filter-fulfilled": "FULFILLED",
    "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",
@@ -143,12 +171,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",
@@ -169,7 +207,7 @@
    "hour": "h",
    "no-limit": "NO LIMIT",
    "include-selected": "INCLUDE SELECTED",
-    "save": "SAVE FILTERS",
+    "save": "REMEMBER FILTERS",
    "reset": "RESET FILTERS",
    "close": "CLOSE FILTERS"
  },
@@ -181,9 +219,11 @@
    "dispatcher-lvl": "Dispatcher\nlevel",
    "routes": "Routes\ndouble / single",
    "general": "General info",
-    "users": "Drivers online",
+    "user": "Drivers online",
-    "spawns": "Spawns online",
+    "spawn": "Spawns online",
-    "timetables": "Active timetables",
+    "timetableAll": "Active timetables",
    "timetableConfirmed": "Confirmed timetables",
    "timetableUnconfirmed": "Unconfirmed timetables",
    "no-stations": "No stations to show here!",
    "scenery-search": "Search for scenery..."
  },
@@ -254,10 +294,10 @@
    "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",
+    "stock-max-speed": "Max. speed",
    "load-data": "Load further data...",
@@ -301,14 +341,15 @@
    "history-btn": "View the dispatcher history",
    "info-btn": "Return to the scenery view",
    "authors-title": "Scenery author | Scenery authors",
    "abbrev": "Station symbol:",
    "lines-title": "Real lines",
    "project-title": "Project name",
    "one-way-routes": "One way routes",
    "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",
@@ -323,7 +364,10 @@
    "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",
@@ -338,7 +382,19 @@
    "end": "Timetable terminates here",
    "terminated": "Timetable terminated",
    "begins": "BEGINS HERE",
-    "terminates": "TERMINATES\nHERE"
+    "terminates": "TERMINATES\nHERE",
    "from": "FROM",
    "to": "TO",
    "desc-arriving": "The train is not here yet. It's going to come from: {prevStationName} (szlak {prevDepartureLine})",
    "desc-online": "The train is at the station. It's going to leave to: {nextStationName} (szlak {nextArrivalLine})",
    "desc-stopped": "The train is at the station and is stopped. It's going to leave towards: {nextStationName} (szlak {nextArrivalLine})",
    "desc-next-arrival": "Leaves towards: {nextStationName} (szlak {nextArrivalLine})",
    "desc-departed": "The train is at the station and it's been departed. Leaves towards: {nextStationName} (szlak {nextArrivalLine})",
    "desc-departed-away": "The train has been departed to: {nextStationName} (szlak {nextArrivalLine})",
    "desc-end": "The train terminates here",
    "desc-terminated": "The train has been terminated"
  },
  "history": {
    "title": "TIMETABLE JOURNAL",
@@ -1,7 +1,9 @@
 {
  "general": {
    "and": " oraz ",
-    "refresh": "ODŚWIEŻ"
+    "refresh": "ODŚWIEŻ",
    "TWR": "Towar niebezpieczny wysokiego ryzyka",
    "SKR": "Przekroczona skrajnia"
  },
  "app": {
    "sceneries": "SCENERIE",
@@ -15,7 +17,9 @@
    "migration-confirm": "Przyjąłem!",
    "offline": "Aplikacja w trybie offline!"
  },
-
+  "footer": {
    "discord": "Serwer Discord Stacjownika"
  },
  "update": {
    "title": "Nowa wersja Stacjownika jest dostępna!",
    "paragraph1": "Miłego korzystania z aplikacji i niech S2 będzie z wami!",
@@ -23,7 +27,6 @@
    "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!",
@@ -96,10 +99,13 @@
    "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-issuedFrom": "Sceneria początkowa",
    "search-timetables-date": "Data rozkładu jazdy (UTC+2 / CEST)",
    "search-dispatchers-date": "Data służby (UTC+2 / CEST)",
    "search-date": "Data (UTC+2 / CEST)",
-    "sort-distance": "kilometraż",
+    "sort-routeDistance": "kilometraż",
-    "sort-total-stops": "stacje",
+    "sort-allStopsCount": "stacje",
    "sort-beginDate": "data",
    "sort-timetableId": "ID rozkładu",
    "sort-timestampFrom": "data",
@@ -114,23 +120,43 @@
    "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-twr-skr": "WSZYSTKIE",
    "filter-common": "ZWYKŁE",
    "filter-passenger": "PASAŻERSKIE",
    "filter-freight": "TOWAROWE",
    "filter-other": "INNE",
    "filter-noTimetable": "BEZ RJ",
    "filter-withTimetable": "ROZKŁAD JAZDY",
    "filter-reset": "ZRESETUJ FILTRY",
    "filter-clear": "WYŁĄCZ FILTRY",
    "filter-section-timetable-status": "STATUS ROZKŁADU JAZDY",
    "filter-section-twrskr": "UWAGI",
    "filter-all": "WSZYSTKIE",
    "filter-abandoned": "PORZUCONE",
    "filter-fulfilled": "WYPEŁNIONE",
    "filter-active": "AKTYWNE"
  },
  "filters": {
    "desc": " &bull; Kliknięcie: zaznaczenie / odznaczenie filtru <br /> &bull; Podwójne kliknięcie: odznaczenie reszty filtrów z <b class='text--primary'>grupy</b> <br /> &bull; <span style='color: coral'>RESET</span>: zresetowanie filtrów z <b class='text--primary'>grupy</b>",
    "sections": {
      "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",
@@ -146,18 +172,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",
@@ -166,27 +203,31 @@
      "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"
  },
  "sceneries": {
    "station": "Stacja",
    "abbr": "Skrót\nposterunku",
    "min-lvl": "Min. poziom\ndyżurnego",
    "status": "Status",
    "dispatcher": "Dyżurny",
    "dispatcher-lvl": "Poziom\ndyżurnego",
    "routes": "Szlaki\n2tor / 1tor",
    "general": "Informacje\nogólne",
-    "users": "Maszyniści online",
+    "user": "Maszyniści online",
-    "spawns": "Otwarte spawny",
+    "spawn": "Otwarte spawny",
-    "timetables": "Aktywne rozkłady jazdy",
+    "timetableAll": "Aktywne rozkłady jazdy",
    "timetableConfirmed": "Zatwierdzone rozkłady jazdy",
    "timetableUnconfirmed": "Niezatwierdzone rozkłady jazdy",
    "no-stations": "Brak stacji do wyświetlenia!",
    "scenery-search": "Wyszukaj scenerię..."
  },
@@ -258,10 +299,10 @@
    "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ść",
+    "stock-max-speed": "Prędkość maks.",
    "load-data": "Pobierz dalszą historię...",
@@ -303,16 +344,17 @@
    "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",
    "abbrev": "Skrót posterunku:",
    "lines-title": "Rzeczywiste linie",
    "project-title": "Projekt",
    "one-way-routes": "Szlaki jednotorowe",
    "two-way-routes": "Szlaki dwutorowe",
    "option-active-timetables": "Aktywne rozkłady jazdy",
-    "option-timetables-history": "Historia rozkładów 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",
@@ -327,7 +369,10 @@
    "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ść",
@@ -342,7 +387,19 @@
    "end": "Koniec rozkładu jazdy",
    "terminated": "Rozkład jazdy zakończony",
    "begins": "ROZPOCZYNA\nBIEG",
-    "terminates": "KOŃCZY BIEG"
+    "terminates": "KOŃCZY BIEG",
    "from": "Z",
    "to": "DO",
    "desc-arriving": "Pociągu nie ma jeszcze na tej scenerii. Przyjedzie z: {prevStationName} (szlak {prevDepartureLine})",
    "desc-online": "Pociąg jest na tej scenerii. Odjedzie do: {nextStationName} (szlak {nextArrivalLine})",
    "desc-stopped": "Pociąg jest na tej scenerii i odbywa postój. Odjedzie do: {nextStationName} (szlak {nextArrivalLine})",
    "desc-next-arrival": "Odjeżdża do: {nextStationName} (szlak {nextArrivalLine})",
    "desc-departed": "Pociąg jest na tej scenerii i został odprawiony. Odjeżdża do: {nextStationName} (szlak {nextArrivalLine})",
    "desc-departed-away": "Pociąg został odprawiony i odjechał do: {nextStationName} (szlak {nextArrivalLine})",
    "desc-end": "Pociąg kończy bieg",
    "desc-terminated": "Pociąg skończył bieg"
  },
  "history": {
    "title": "DZIENNIK ROZKŁADÓW JAZDY"
@@ -7,11 +7,11 @@ 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,
@@ -20,15 +20,6 @@ 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) => {
@@ -0,0 +1,49 @@
 import Filter from "../../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,
 };
@@ -0,0 +1,5 @@
 export const headIds = ['station', 'min-lvl', 'status', 'dispatcher', 'dispatcher-lvl', 'routes', 'general'] as const;
 export const headIconsIds = ['user', 'spawn', 'timetableAll', 'timetableUnconfirmed', 'timetableConfirmed'] as const;
 export type HeadIdsTypes = typeof headIds[number] | typeof headIconsIds[number];
@@ -1,6 +1,14 @@
 export const enum JournalFilterType {
-    active = "active",
+  ACTIVE = 'active',
-    fulfilled = "fulfilled",
+  FULFILLED = 'fulfilled',
-    abandoned = "abandoned",
+  ABANDONED = 'abandoned',
-    all = "all"
+  ALL = 'all',
  TWR = 'twr',
  SKR = 'skr',
  TWR_SKR = 'twr-skr',
 }
 export enum JournalFilterSection {
  TIMETABLE_STATUS = 'timetable-status',
  TWRSKR = 'twrskr',
 }
@@ -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;
@@ -1,32 +1,41 @@
-import TrainStop from "./TrainStop";
+import TrainStop from './TrainStop';
-export default interface ScheduledTrain {
+export enum StopStatus {
-    trainId: string;
+  'arriving' = 'arriving',
-    trainNo: number;
+  'departed' = 'departed',
-    
+  'departed-away' = 'departed-away',
-    driverName: string;
+  'online' = 'online',
-    driverId: number;
+  'stopped' = 'stopped',
-    currentStationName: string;
+  'terminated' = 'terminated',
-    currentStationHash: string;
+}
-    category: string;
+
-    stopInfo: TrainStop;
+export interface ScheduledTrain {
-
+  trainId: string;
-    terminatesAt: string;
+  trainNo: number;
-    beginsAt: string;
+
-
+  driverName: string;
-    prevStationName: string;
+  driverId: number;
-    nextStationName: string;
+  currentStationName: string;
-
+  currentStationHash: string;
-    arrivingLine: string | null;
+  category: string;
-    departureLine: string | null;
+  stopInfo: TrainStop;
-
+
-    prevDepartureLine: string | null;
+  terminatesAt: string;
-    nextArrivalLine: string | null;
+  beginsAt: string;
-
+
-    signal: string;
+  prevStationName: string;
-    connectedTrack: string;
+  nextStationName: string;
-
+
-    stopLabel: string;
+  arrivingLine: string | null;
-    stopStatus: string;
+  departureLine: string | null;
-    stopStatusID: number;
+
  prevDepartureLine: string | null;
  nextArrivalLine: string | null;
  signal: string;
  connectedTrack: string;
  stopLabel: string;
  stopStatus: StopStatus;
  stopStatusID: number;
 }
@@ -1,5 +1,5 @@
-import { Availability } from '../../store/storeTypes';
+import { Availability } from './store/storeTypes';
-import ScheduledTrain from './ScheduledTrain';
+import {ScheduledTrain} from './ScheduledTrain';
 import StationRoutes from './StationRoutes';
 export default interface Station {
@@ -8,10 +8,12 @@ export default interface Station {
  generalInfo?: {
    name: string;
    url: string;
    abbr: string;
    reqLevel: number;
    // supportersOnly: boolean;
    lines: string;
    project: string;
    projectUrl?: string;
@@ -0,0 +1,7 @@
 import { TrainFilterSection, TrainFilterType } from '../../enums/TrainFilterType'
 export interface TrainFilter {
  id: TrainFilterType;
  section: TrainFilterSection;
  isActive: boolean;
 }
@@ -5,6 +5,7 @@ export interface DispatcherHistory {
  dispatcherId: number;
  dispatcherName: string;
  dispatcherLevel: number | null;
  dispatcherRate: number;
  dispatcherIsSupporter: boolean;
  isOnline: boolean;
  lastOnlineTimestamp: number;
@@ -1,5 +1,7 @@
 export interface TimetableHistory {
  id: number;
  createdAt: string;
  updatedAt: string;
  timetableId: number;
  trainNo: number;
@@ -33,7 +35,11 @@ export interface TimetableHistory {
  authorName?: string;
  authorId?: number;
  stopsString?: string;
  stockString?: string;
  stockHistory: string[];
  stockMass?: number;
  stockLength?: number;
  maxSpeed?: number;
@@ -41,10 +47,12 @@ export interface TimetableHistory {
  hashesString?: string;
  currentSceneryName?: string;
  currentSceneryHash?: string;
  routeSceneries?: string;
 }
 export interface SceneryTimetableHistory {
-  sceneryTimetables: TimetableHistory[];
+  timetables: TimetableHistory[];
-  totalCount: number;
+  // totalCount: number;
-  sceneryName: string;
+  // sceneryName: string;
 }
@@ -0,0 +1,21 @@
 import { JournalTimetableSorter } from '../../types/JournalTimetablesTypes';
 export interface TimetablesQueryParams {
  driverName?: string;
  trainNo?: string;
  authorName?: string;
  timestampFrom?: number;
  timestampTo?: number;
  issuedFrom?: string;
  countFrom?: number;
  countLimit?: number;
  fulfilled?: number;
  terminated?: number;
  twr?: number;
  skr?: number;
  sortBy?: JournalTimetableSorter['id'];
 }
@@ -1,4 +1,44 @@
-export default interface TrainAPIData {
+export interface TimetableStop {
  stopName: string;
  stopNameRAW: string;
  stopType: string;
  stopDistance: number;
  pointId: number;
  mainStop: boolean;
  arrivalLine: string;
  arrivalTimestamp: number;
  arrivalRealTimestamp: number;
  arrivalDelay: number;
  departureLine: string;
  departureTimestamp: number;
  departureRealTimestamp: number;
  departureDelay: number;
  comments?: any;
  beginsHere: boolean;
  terminatesHere: boolean;
  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;
@@ -24,41 +64,5 @@ export default interface TrainAPIData {
  region: string;
  isTimeout: boolean;
-  timetable?: {
+  timetable?: TrainTimetable;
    timetableId: number;
    category: string;
    route: string;
    stopList: {
      stopName: string;
      stopNameRAW: string;
      stopType: string;
      stopDistance: number;
      pointId: number;
      mainStop: boolean;
      arrivalLine: string;
      arrivalTimestamp: number;
      arrivalRealTimestamp: number;
      arrivalDelay: number;
      departureLine: string;
      departureTimestamp: number;
      departureRealTimestamp: number;
      departureDelay: number;
      comments?: any;
      beginsHere: boolean;
      terminatesHere: boolean;
      confirmed: boolean;
      stopped: boolean;
      stopTime: number;
    }[];
    TWR: boolean;
    SKR: boolean;
    sceneries: string[];
  };
 }
@@ -1,11 +1,11 @@
 import { Socket } from 'socket.io-client';
-import { DataStatus } from '../scripts/enums/DataStatus';
+import { DataStatus } from '../../enums/DataStatus';
-import StationAPIData from '../scripts/interfaces/api/StationAPIData';
+import StationAPIData from '../api/StationAPIData';
-import TrainAPIData from '../scripts/interfaces/api/TrainAPIData';
+import { TrainAPIData } from '../api/TrainAPIData';
-import Station from '../scripts/interfaces/Station';
+import Station from '../Station';
-import Train from '../scripts/interfaces/Train';
+import Train from '../Train';
-import { DispatcherStatsAPIData } from '../scripts/interfaces/api/DispatcherStatsAPIData';
+import { DispatcherStatsAPIData } from '../api/DispatcherStatsAPIData';
-import { DriverStatsAPIData } from '../scripts/interfaces/api/DriverStatsAPIData';
+import { DriverStatsAPIData } from '../api/DriverStatsAPIData';
 export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
@@ -34,7 +34,7 @@ export interface StoreState {
  chosenModalTrainId?: string;
-  currentStatsTab: 'daily' | 'driver';
+  currentStatsTab: 'daily' | 'driver' | null;
  dataStatuses: {
    connection: DataStatus;
@@ -55,8 +55,19 @@ export interface APIData {
  connectedSocketCount: number;
 }
 export interface StationRoutesInfo {
  routeName: string;
  isElectric: boolean;
  isInternal: boolean;
  isRouteSBL: boolean;
  routeLength: number;
  routeSpeed: number;
  routeTracks: number;
 }
 export interface StationJSONData {
  name: string;
  abbr: string;
  url: string;
  lines: string;
  project: string;
@@ -69,7 +80,8 @@ export interface StationJSONData {
  SUP: boolean;
-  routes: string;
+  // routes: string;
  routesInfo: StationRoutesInfo[];
  checkpoints: string | null;
  authors?: string;
@@ -1,4 +1,4 @@
-import { TrainFilter } from '../../types/Trains/TrainOptionsTypes';
+import { TrainFilter } from '../interfaces/Trains/TrainFilter';
 import { TrainFilterType } from '../enums/TrainFilterType';
 import Train from '../interfaces/Train';
 import TrainStop from '../interfaces/TrainStop';
@@ -24,26 +24,36 @@ function filterTrainList(trainList: Train[], searchedTrain: string, searchedDriv
    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;
@@ -53,7 +63,7 @@ function filterTrainList(trainList: Train[], searchedTrain: string, searchedDriv
    return (
      (searchedTrain.length > 0 ? train.trainNo.toString().startsWith(searchedTrain) : true) &&
      (searchedDriver.length > 0 ? train.driverName.toLowerCase().startsWith(searchedDriver.toLowerCase()) : true) &&
-      (!train.timetableData ? !train.online : true) &&
+      (!train.timetableData ? train.online : train.timetableData) &&
      isFiltered
    );
  });
@@ -71,7 +81,7 @@ function sortTrainList(trainList: Train[], sorterActive: { id: string; dir: numb
        if (a.mass > b.mass) return sorterActive.dir;
        return -sorterActive.dir;
-      case 'distance':
+      case 'routeDistance':
        if ((a.timetableData?.routeDistance || -1) > (b.timetableData?.routeDistance || -1)) return sorterActive.dir;
        return -sorterActive.dir;
@@ -0,0 +1,25 @@
 import { JournalFilterType } from '../../scripts/enums/JournalFilterType';
 export type JournalTimetableSearchKey =
  | 'search-driver'
  | 'search-train'
  | 'search-date'
  | 'search-dispatcher'
  | 'search-issuedFrom';
 export type JournalTimetableSorterKey = 'timetableId' | 'beginDate' | 'distance' | 'total-stops';
 export type JournalTimetableSearchType = {
  [key in JournalTimetableSearchKey]: string;
 };
 export interface JournalFilter {
  id: JournalFilterType;
  filterSection: string;
  isActive: boolean;
 }
 export interface JournalTimetableSorter {
  id: JournalTimetableSorterKey;
  dir: 'asc' | 'desc';
 }
@@ -1,5 +1,7 @@
 export const URLs = {
  stacjownikAPI:
-    import.meta.env.VITE_APP_API_DEV == 1 && !import.meta.env.PROD ? 'http://localhost:3000' : 'https://spythere.pl',
+    import.meta.env.VITE_APP_API_DEV == 1 && !import.meta.env.PROD
      ? 'http://localhost:3001'
      : 'https://spythere.pl',
  stacjownikAPIDev: 'localhost:3000',
 };
@@ -0,0 +1,156 @@
 import { HeadIdsTypes } from '../data/stationHeaderNames';
 import Filter from '../interfaces/Filter';
 import Station from '../interfaces/Station';
 export const sortStations = (a: Station, b: Station, sorter: { headerName: HeadIdsTypes; dir: number }) => {
  let diff = 0;
  switch (sorter.headerName) {
    case 'station':
      return sorter.dir == 1 ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
    case 'min-lvl':
      diff = (a.generalInfo?.reqLevel || 0) - (b.generalInfo?.reqLevel || 0);
      break;
    case 'status':
      diff = (a.onlineInfo?.statusTimestamp || 0) - (b.onlineInfo?.statusTimestamp || 0);
      break;
    case 'dispatcher':
      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 'dispatcher-lvl':
      diff = (a.onlineInfo?.dispatcherExp || 0) - (b.onlineInfo?.dispatcherExp || 0);
      break;
    case 'user':
      diff = (b.onlineInfo ? b.onlineInfo.currentUsers : -1) - (a.onlineInfo ? a.onlineInfo.currentUsers : -1);
      break;
    case 'spawn':
      diff = (a.onlineInfo ? a.onlineInfo.spawns.length : -1) - (b.onlineInfo ? b.onlineInfo.spawns.length : -1);
      break;
    case 'timetableConfirmed':
      diff =
        (a.onlineInfo?.scheduledTrains
          ? a.onlineInfo.scheduledTrains.filter((train) => train.stopInfo.confirmed).length
          : -1) -
        (b.onlineInfo?.scheduledTrains
          ? b.onlineInfo.scheduledTrains.filter((train) => train.stopInfo.confirmed).length
          : -1);
      break;
    case 'timetableUnconfirmed':
      diff =
        (a.onlineInfo?.scheduledTrains
          ? a.onlineInfo.scheduledTrains.filter((train) => !train.stopInfo.confirmed).length
          : -1) -
        (b.onlineInfo?.scheduledTrains
          ? b.onlineInfo.scheduledTrains.filter((train) => !train.stopInfo.confirmed).length
          : -1);
      break;
    case 'timetableAll':
      diff =
        (a.onlineInfo?.scheduledTrains ? a.onlineInfo.scheduledTrains.length : -1) -
        (b.onlineInfo?.scheduledTrains ? b.onlineInfo.scheduledTrains.length : -1);
      break;
    default:
      break;
  }
  if (diff != 0) return Math.sign(diff) * sorter.dir;
  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,4 +1,4 @@
-import ScheduledTrain from '../interfaces/ScheduledTrain';
+import { ScheduledTrain, StopStatus } from '../interfaces/ScheduledTrain';
 import Train from '../interfaces/Train';
 import TrainStop from '../interfaces/TrainStop';
@@ -74,32 +74,32 @@ export const parseSpawns = (spawnString: string) => {
 export const getTimestamp = (date: string | null): number => (date ? new Date(date).getTime() : 0);
 export const getTrainStopStatus = (stopInfo: TrainStop, currentStationName: string, stationName: string) => {
-  let stopStatus = '',
+  let stopStatus = StopStatus['arriving'],
    stopLabel = '',
    stopStatusID = -1;
  if (stopInfo.terminatesHere && stopInfo.confirmed) {
-    stopStatus = 'terminated';
+    stopStatus = StopStatus['terminated'];
    stopLabel = 'Skończył bieg';
    stopStatusID = 5;
  } else if (!stopInfo.terminatesHere && stopInfo.confirmed && currentStationName == stationName) {
-    stopStatus = 'departed';
+    stopStatus = StopStatus['departed'];
    stopLabel = 'Odprawiony';
    stopStatusID = 2;
  } else if (!stopInfo.terminatesHere && stopInfo.confirmed && currentStationName != stationName) {
-    stopStatus = 'departed-away';
+    stopStatus = StopStatus['departed-away'];
    stopLabel = 'Odjechał';
    stopStatusID = 4;
  } else if (currentStationName == stationName && !stopInfo.stopped) {
-    stopStatus = 'online';
+    stopStatus = StopStatus['online'];
    stopLabel = 'Na stacji';
    stopStatusID = 0;
  } else if (currentStationName == stationName && stopInfo.stopped) {
-    stopStatus = 'stopped';
+    stopStatus = StopStatus['stopped'];
    stopLabel = 'Postój';
    stopStatusID = 1;
  } else if (currentStationName != stationName) {
-    stopStatus = 'arriving';
+    stopStatus = StopStatus['arriving'];
    stopLabel = 'W drodze';
    stopStatusID = 3;
  }
@@ -122,7 +122,7 @@ export function getScheduledTrain(train: Train, trainStopIndex: number, stationN
  for (let i = trainStopIndex - 1; i >= 0; i--) {
    if (/strong|podg/g.test(followingStops[i].stopName)) {
-      prevStationName = followingStops[i].stopNameRAW.replace(/,.*/g,"");
+      prevStationName = followingStops[i].stopNameRAW.replace(/,.*/g, '');
      break;
    }
@@ -130,7 +130,7 @@ export function getScheduledTrain(train: Train, trainStopIndex: number, stationN
  for (let i = trainStopIndex + 1; i < followingStops.length; i++) {
    if (/strong|podg/g.test(followingStops[i].stopName)) {
-      nextStationName = followingStops[i].stopNameRAW.replace(/,.*/g,"");
+      nextStationName = followingStops[i].stopNameRAW.replace(/,.*/g, '');
      break;
    }
@@ -172,7 +172,6 @@ export function getScheduledTrain(train: Train, trainStopIndex: number, stationN
    signal: train.signal,
    connectedTrack: train.connectedTrack,
    driverName: train.driverName,
    driverId: train.driverId,
    currentStationName: train.currentStationName,
@@ -0,0 +1,9 @@
 import { defineStore } from 'pinia';
 export const useJournalFiltersStore = defineStore('journalFiltersStore', {
  state: () => ({
    timetableFilters: {
    },
  }),
 });
@@ -1,246 +1,29 @@
 import { defineStore } from 'pinia';
 import inputData from '../data/options.json';
 import Filter from '../scripts/interfaces/Filter';
 import Station from '../scripts/interfaces/Station';
 import StorageManager from '../scripts/managers/storageManager';
 import { useStore } from './store';
-
+import { filterInitStates } from '../scripts/constants/stores/initFilterStates';
-const sortStations = (a: Station, b: Station, sorter: { index: number; dir: number }) => {
+import { filterStations, sortStations } from '../scripts/utils/filterUtils';
-  switch (sorter.index) {
+import { HeadIdsTypes } from '../scripts/data/stationHeaderNames';
    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, isOffline = false) => {
  const returnMode = false;
  if ((station.generalInfo?.availability == 'nonPublic' || !station.generalInfo) && filters['nonPublic'])
    return returnMode;
  if (station.onlineInfo?.statusID == 'ending' && filters['ending']) return returnMode;
  if (
    station.onlineInfo &&
    station.onlineInfo.statusTimestamp > 0 &&
    filters['onlineFromHours'] < 8 &&
    station.onlineInfo.statusTimestamp <= Date.now() + filters['onlineFromHours'] * 3600000
  )
    return returnMode;
  if (filters['onlineFromHours'] > 0 && station.onlineInfo && station.onlineInfo.statusTimestamp <= 0)
    return returnMode;
  if (filters['onlineFromHours'] == 8 && station.onlineInfo?.statusID != 'no-limit') return returnMode;
  if (station.onlineInfo?.statusID == 'ending' && filters['endingStatus']) return returnMode;
  if (
    (station.onlineInfo?.statusID == 'not-signed' || station.onlineInfo?.statusID == 'unavailable') &&
    filters['unavailableStatus']
  )
    return returnMode;
  if (station.onlineInfo?.statusID == 'brb' && filters['afkStatus']) return returnMode;
  if (station.onlineInfo?.statusID == 'no-space' && filters['noSpaceStatus']) return returnMode;
  if (station.onlineInfo && filters['occupied']) return returnMode;
  if (!station.onlineInfo && filters['free']) return returnMode;
  if (station.generalInfo?.availability == 'unavailable' && filters['unavailable'] && !station.onlineInfo)
    return returnMode;
  if (station.generalInfo) {
    const routes = station.generalInfo.routes;
    const availability = station.generalInfo.availability;
    if (filters['abandoned'] && availability == 'abandoned' && !station.onlineInfo) return returnMode;
    if (availability == 'default' && filters['default']) return returnMode;
    if (
      availability != 'default' &&
      filters['notDefault'] &&
      !(availability == 'abandoned' || availability == 'unavailable')
    )
      return returnMode;
    if (filters['real'] && station.generalInfo.lines != '') return returnMode;
    if (
      filters['fictional'] &&
      station.generalInfo.lines == '' &&
      availability != 'abandoned' &&
      availability != 'unavailable'
    )
      return returnMode;
    if (
      station.generalInfo.reqLevel +
        (availability == 'nonPublic' || availability == 'unavailable' || availability == 'abandoned' ? 1 : 0) <
      filters['minLevel']
    )
      return returnMode;
    if (
      station.generalInfo.reqLevel +
        (availability == 'nonPublic' || availability == 'unavailable' || availability == 'abandoned' ? 1 : 0) >
      filters['maxLevel']
    )
      return returnMode;
    if (
      filters['no-1track'] &&
      (routes.oneWayCatenaryRouteNames.length != 0 || routes.oneWayNoCatenaryRouteNames.length != 0)
    )
      return returnMode;
    if (
      filters['no-2track'] &&
      (routes.twoWayCatenaryRouteNames.length != 0 || routes.twoWayNoCatenaryRouteNames.length != 0)
    )
      return returnMode;
    if (routes.oneWayCatenaryRouteNames.length < filters['minOneWayCatenary']) return returnMode;
    if (routes.oneWayNoCatenaryRouteNames.length < filters['minOneWay']) return returnMode;
    if (routes.twoWayCatenaryRouteNames.length < filters['minTwoWayCatenary']) return returnMode;
    if (routes.twoWayNoCatenaryRouteNames.length < filters['minTwoWay']) return returnMode;
    if (filters[station.generalInfo.controlType]) return returnMode;
    if (filters[station.generalInfo.signalType]) return returnMode;
    if (
      filters['SPK'] &&
      (station.generalInfo.controlType === 'SPK' || station.generalInfo.controlType.includes('+SPK'))
    )
      return returnMode;
    if (
      filters['SCS'] &&
      (station.generalInfo.controlType === 'SCS' || station.generalInfo.controlType.includes('+SCS'))
    )
      return returnMode;
    if (
      filters['SPE'] &&
      (station.generalInfo.controlType === 'SPE' || station.generalInfo.controlType.includes('+SPE'))
    )
      return returnMode;
    if (filters['SUP'] && station.generalInfo.SUP) return returnMode;
    if (
      filters['SCS'] &&
      filters['SPK'] &&
      (station.generalInfo.controlType.includes('SPK') || station.generalInfo.controlType.includes('SCS'))
    )
      return returnMode;
    if (filters['mechaniczne'] && station.generalInfo.controlType.includes('mechaniczne')) return returnMode;
    if (filters['ręczne'] && station.generalInfo.controlType.includes('ręczne')) return returnMode;
    if (filters['SBL'] && routes.sblRouteNames.length > 0) return returnMode;
    if (
      filters['authors'].length > 3 &&
      !station.generalInfo.authors?.map((a) => a.toLocaleLowerCase()).includes(filters['authors'].toLocaleLowerCase())
    )
      return returnMode;
  }
  return true;
 };
 const filterInitStates: Filter = {
  default: false,
  notDefault: false,
  real: false,
  fictional: false,
  SPK: false,
  SCS: false,
  SPE: false,
  SUP: false,
  ręczne: false,
  mechaniczne: false,
  współczesna: false,
  kształtowa: false,
  historyczna: false,
  mieszana: false,
  SBL: false,
  minLevel: 0,
  maxLevel: 20,
  minOneWayCatenary: 0,
  minOneWay: 0,
  minTwoWayCatenary: 0,
  minTwoWay: 0,
  'include-selected': false,
  'no-1track': false,
  'no-2track': false,
  free: true,
  occupied: false,
  ending: false,
  nonPublic: false,
  unavailable: true,
  abandoned: true,
  afkStatus: false,
  endingStatus: false,
  noSpaceStatus: false,
  unavailableStatus: false,
  unsignedStatus: false,
  authors: '',
  onlineFromHours: 0,
 };
 export const useStationFiltersStore = defineStore('stationFiltersStore', {
  state() {
    return {
      inputs: inputData,
      filters: { ...filterInitStates },
-      sorterActive: { index: 0, dir: 1 },
+      sorterActive: { headerName: 'station' as HeadIdsTypes, 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
@@ -251,7 +34,7 @@ export const useStationFiltersStore = defineStore('stationFiltersStore', {
          return station;
        })
-        .filter((station) => filterStations(station, this.filters, this.store.isOffline))
+        .filter((station) => filterStations(station, this.filters))
        .sort((a, b) => sortStations(a, b, this.sorterActive));
    },
@@ -259,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;
      });
@@ -295,14 +78,22 @@ export const useStationFiltersStore = defineStore('stationFiltersStore', {
      });
    },
-    changeSorter(index: number) {
+    resetSectionOptions(section: string) {
-      if (index > 4 && index < 7) return;
+      this.inputs.options.forEach((option) => {
        if (option.section != section) return;
-      if (index == this.sorterActive.index) this.sorterActive.dir = -1 * this.sorterActive.dir;
+        option.value = option.defaultValue;
        this.filters[option.id] = !option.defaultValue;
        StorageManager.setBooleanValue(option.name, !option.defaultValue);
      });
    },
    changeSorter(headerName: HeadIdsTypes) {
      if (headerName == this.sorterActive.headerName) this.sorterActive.dir = -1 * this.sorterActive.dir;
      else this.sorterActive.dir = 1;
-      this.sorterActive.index = index;
+      this.sorterActive.headerName = headerName;
    },
  },
 });
@@ -3,7 +3,7 @@ import { defineStore } from 'pinia';
 import { io } from 'socket.io-client';
 import { DataStatus } from '../scripts/enums/DataStatus';
 import StationAPIData from '../scripts/interfaces/api/StationAPIData';
-import ScheduledTrain from '../scripts/interfaces/ScheduledTrain';
+import { ScheduledTrain } from '../scripts/interfaces/ScheduledTrain';
 import Station from '../scripts/interfaces/Station';
 import StationRoutes from '../scripts/interfaces/StationRoutes';
 import Train from '../scripts/interfaces/Train';
@@ -15,7 +15,7 @@ import {
  getScheduledTrain,
  parseSpawns,
 } from '../scripts/utils/storeUtils';
-import { APIData, StationJSONData, StoreState } from './storeTypes';
+import { APIData, StationJSONData, StoreState } from '../scripts/interfaces/store/storeTypes';
 export const useStore = defineStore('store', {
  state: () =>
@@ -54,7 +54,7 @@ export const useStore = defineStore('store', {
        trains: DataStatus.Loading,
      },
-      currentStatsTab: 'daily',
+      currentStatsTab: null,
      blockScroll: false,
      listenerLaunched: false,
@@ -303,57 +303,39 @@ export const useStore = defineStore('store', {
            ...scenery,
            authors: scenery.authors?.split(',').map((a) => a.trim()),
            routes:
-              scenery.routes
+              scenery.routesInfo.reduce(
-                ?.split(';')
+                (acc, route) => {
-                .filter((routeString) => routeString)
+                  const propName: keyof StationRoutes = `${route.routeTracks == 2 ? 'twoWay' : 'oneWay'}${
-                .reduce(
+                    route.isElectric ? '' : 'No'
-                  (acc, routeString) => {
+                  }CatenaryRouteNames`;
                    const specs1 = routeString.split('_')[0];
                    const isInternal = specs1.startsWith('!');
                    const name = isInternal ? specs1.replace('!', '') : specs1;
-                    const specs2 = routeString.split('_')[1].split('');
+                  acc[route.routeTracks == 2 ? 'twoWay' : 'oneWay'].push({
-                    const twoWay = specs2[0] == '2';
+                    name: route.routeName,
-                    const catenary = specs2[1] == 'E';
+                    SBL: route.isRouteSBL,
-                    const SBL = specs2[2] == 'S';
+                    TWB: false,
-                    const TWB = specs2[3] ? true : false;
+                    catenary: route.isElectric,
-                    const speed = Number(routeString.split(':')[1]) || 0;
+                    isInternal: route.isInternal,
-                    const length = Number(routeString.split(':')[2]) || 0;
+                    tracks: route.routeTracks,
                    length: route.routeLength,
                    speed: route.routeSpeed,
                  });
-                    const propName = twoWay
+                  if (!route.isInternal) acc[propName].push(route.routeName);
                      ? catenary
                        ? 'twoWayCatenaryRouteNames'
                        : 'twoWayNoCatenaryRouteNames'
                      : catenary
                      ? 'oneWayCatenaryRouteNames'
                      : 'oneWayNoCatenaryRouteNames';
-                    acc[twoWay ? 'twoWay' : 'oneWay'].push({
+                  if (route.isRouteSBL) acc['sblRouteNames'].push(route.routeName);
                      name,
                      SBL,
                      TWB,
                      catenary,
                      isInternal,
                      tracks: twoWay ? 2 : 1,
                      length,
                      speed,
                    });
                    if (!isInternal) acc[propName].push(name);
-                    if (SBL) acc['sblRouteNames'].push(name);
+                  return acc;
-
+                },
-                    return acc;
+                {
-                  },
+                  oneWay: [],
-                  {
+                  twoWay: [],
-                    oneWay: [],
+                  sblRouteNames: [],
-                    twoWay: [],
+                  oneWayCatenaryRouteNames: [],
-                    sblRouteNames: [],
+                  oneWayNoCatenaryRouteNames: [],
-                    oneWayCatenaryRouteNames: [],
+                  twoWayCatenaryRouteNames: [],
-                    oneWayNoCatenaryRouteNames: [],
+                  twoWayNoCatenaryRouteNames: [],
-                    twoWayCatenaryRouteNames: [],
+                } as StationRoutes
-                    twoWayNoCatenaryRouteNames: [],
+              ) || {},
                  } as StationRoutes
                ) || {},
            checkpoints: scenery.checkpoints
              ? scenery.checkpoints.split(';').map((sub) => ({ checkpointName: sub, scheduledTrains: [] }))
              : [],
@@ -4,12 +4,11 @@
  display: inline-block;
  padding: 0;
  background: #585858;
  margin: 0.25em;
  span {
    display: inline-block;
    background: #585858;
    padding: 0.2em 0.4em;
  }
@@ -56,3 +55,26 @@
    background-color: forestgreen;
  }
 }
 .train-badge {
  padding: 0.1em 0.2em;
  border-radius: 0.2em;
  font-weight: bold;
  font-size: 0.9em;
  &.twr {
    background-color: var(--clr-twr);
    box-shadow: 0 0 5px 1px var(--clr-twr);
    color: black;
  }
  &.skr {
    background-color: var(--clr-skr);
    box-shadow: 0 0 5px 1px var(--clr-skr);
  }
  &.offline {
    background-color: #be3728;
  }
 }
@@ -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;
  }
 }
@@ -67,7 +67,7 @@ h1.option-title {
  box-shadow: 0 5px 10px 2px #0f0f0f;
  width: 97%;
-  max-width: 500px;
+  max-width: 550px;
  padding: 1em;
  z-index: 100;
@@ -77,24 +77,30 @@ h1.option-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em;
  padding: 0.25em 0.25em 0 0;
 }
 .options_filter-sections section {
  margin: 0.5em 0;
 }
 .options_filters {
  display: flex;
  flex-wrap: wrap;
-  margin: 0.5em 0 0 0;
+
  gap: 0.5em;
  margin: 0.25em 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 {
@@ -116,17 +122,6 @@ h1.option-title {
    margin: 0.5em auto;
  }
  .search_actions {
    display: flex;
    gap: 0.5em;
    margin: 1em 0;
    width: 100%;
    button {
      width: 100%;
    }
  }
  .search-box {
    .search-exit {
      position: absolute;
@@ -137,6 +132,17 @@ h1.option-title {
  }
 }
 .options_actions {
  display: flex;
  gap: 0.5em;
  width: 100%;
  margin-top: 1em;
  button {
    width: 100%;
  }
 }
@include smallScreen() {
  h1 {
    text-align: center;
@@ -153,13 +159,12 @@ h1.option-title {
    max-width: 100%;
  }
  .filter-option,
  .sort-option {
    margin: 0.25em 0.25em;
  }
  .options_filters,
  .options_sorters {
    justify-content: center;
  }
  .filter-section {
    text-align: center;
  }
 }
@@ -45,6 +45,7 @@ body {
  margin: 0;
  padding: 0;
  font-family: 'Quicksand', sans-serif;
  font-weight: 500;
  overflow-y: scroll;
  &.no-scroll {
@@ -81,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;
  }
@@ -105,7 +93,6 @@ body {
 button,
 input,
 select {
  // font-family: "Open Sans", sans-serif;
  border: none;
  font-family: 'Quicksand', sans-serif;
  font-size: 1em;
@@ -215,10 +202,6 @@ button {
    pointer-events: none;
    opacity: 0.85;
  }
  &[data-inactive='true'] {
    opacity: 0.55;
  }
 }
 button.btn--filled {
@@ -1,18 +0,0 @@
 import { JournalFilterType } from '../../scripts/enums/JournalFilterType';
 export type JournalTimetableSearchKey = 'search-driver' | 'search-train' | 'search-date' | 'search-dispatcher'; 
 export type JournalTimetableSearchType = {
  [key in JournalTimetableSearchKey]: string;
 };
 export interface JournalTimetableFilter {
  id: JournalFilterType;
  filterSection: string;
  isActive: boolean;
 }
 export interface JournalTimetableSorter {
  id:  'timetableId' | 'beginDate' | 'distance' | 'total-stops';
  dir: -1 | 1;
 }
@@ -1,6 +0,0 @@
 import { TrainFilterType } from "../../scripts/enums/TrainFilterType";
 export interface TrainFilter {
  id: TrainFilterType;
  isActive: boolean;
 }
@@ -10,6 +10,7 @@
        :sorter-option-ids="['timestampFrom', 'duration']"
        :data-status="dataStatus"
        :current-options-active="currentOptionsActive"
        optionsType="dispatchers"
      />
      <div class="list_wrapper" @scroll="handleScroll">
@@ -69,7 +70,7 @@ import { URLs } from '../scripts/utils/apiURLs';
 import { DataStatus } from '../scripts/enums/DataStatus';
 import { useStore } from '../store/store';
 import JournalDispatchersList from '../components/JournalView/JournalDispatchersList.vue';
-import { JournalDispatcherSearcher, JournalDispatcherSorter } from '../types/Journal/JournalDispatcherTypes';
+import { JournalDispatcherSearcher, JournalDispatcherSorter } from '../scripts/types/JournalDispatcherTypes';
 import { DispatcherHistory } from '../scripts/interfaces/api/DispatchersAPIData';
 import JournalHeader from '../components/JournalView/JournalHeader.vue';
 import { LocationQuery } from 'vue-router';
@@ -133,6 +134,7 @@ export default defineComponent({
    provide('sorterActive', sorterActive);
    provide('journalFilterActive', journalFilterActive);
    provide('searchersValues', searchersValues);
    provide('filterList', reactive([]));
    const scrollElement: Ref<HTMLElement | null> = ref(null);
@@ -286,4 +288,3 @@ export default defineComponent({
 <style lang="scss" scoped>
@import '../styles/JournalSection.scss';
 </style>
@@ -7,10 +7,11 @@
        @on-search-confirm="fetchHistoryData"
        @on-options-reset="resetOptions"
        @on-refresh-data="fetchHistoryData"
-        :sorter-option-ids="['timetableId', 'beginDate', 'distance', 'total-stops']"
+        :sorter-option-ids="['timetableId', 'beginDate', 'routeDistance', 'allStopsCount']"
        :filters="journalTimetableFilters"
        :currentOptionsActive="currentOptionsActive"
        :data-status="dataStatus"
        optionsType="timetables"
      />
      <JournalStats />
@@ -57,25 +58,32 @@
 import { defineComponent, provide, reactive, Ref, ref } from 'vue';
 import axios from 'axios';
-import DriverStats from '../components/JournalView/JournalDriverStats.vue';
+import imageMixin from '../mixins/imageMixin';
 import Loading from '../components/Global/Loading.vue';
 import { JournalTimetableSorter } from '../types/Journal/JournalTimetablesTypes';
 import dateMixin from '../mixins/dateMixin';
 import routerMixin from '../mixins/routerMixin';
 import modalTrainMixin from '../mixins/modalTrainMixin';
 import DriverStats from '../components/JournalView/JournalDriverStats.vue';
 import JournalOptions from '../components/JournalView/JournalOptions.vue';
 import JournalStats from '../components/JournalView/JournalStats.vue';
 import JournalHeader from '../components/JournalView/JournalHeader.vue';
 import JournalTimetablesList from '../components/JournalView/JournalTimetablesList.vue';
 import Loading from '../components/Global/Loading.vue';
 import { DataStatus } from '../scripts/enums/DataStatus';
 import { JournalFilterType } from '../scripts/enums/JournalFilterType';
 import { TimetableHistory } from '../scripts/interfaces/api/TimetablesAPIData';
 import { URLs } from '../scripts/utils/apiURLs';
 import { useStore } from '../store/store';
-import JournalOptions from '../components/JournalView/JournalOptions.vue';
+
 import { JournalTimetableSearchType } from '../types/Journal/JournalTimetablesTypes';
 import modalTrainMixin from '../mixins/modalTrainMixin';
 import imageMixin from '../mixins/imageMixin';
 import JournalTimetablesList from '../components/JournalView/JournalTimetablesList.vue';
 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';
 import { TimetablesQueryParams } from '../scripts/interfaces/api/TimetablesQueryParams';
 import { JournalFilterType } from '../scripts/enums/JournalFilterType';
 import {
  JournalFilter,
  JournalTimetableSearchType,
  JournalTimetableSorter,
 } from '../scripts/types/JournalTimetablesTypes';
 import { journalTimetableFilters } from '../constants/Journal/JournalTimetablesConsts';
 const TIMETABLES_API_URL = `${URLs.stacjownikAPI}/api/getTimetables`;
@@ -92,8 +100,7 @@ export default defineComponent({
  },
  data: () => ({
-    currentQuery: '',
+    currentQueryParams: {} as TimetablesQueryParams,
    currentQueryArray: [] as string[],
    scrollDataLoaded: true,
    scrollNoMoreData: false,
@@ -112,13 +119,16 @@ export default defineComponent({
  }),
  setup() {
-    const sorterActive: JournalTimetableSorter = reactive({ id: 'timetableId', dir: 1 });
+    const sorterActive: JournalTimetableSorter = reactive({ id: 'timetableId', dir: 'desc' });
-    const journalFilterActive = ref(journalTimetableFilters[0]);
+    // const journalFilterActive = ref(journalTimetableFilters[0]);
    const initFilters: readonly JournalFilter[] = JSON.parse(JSON.stringify(journalTimetableFilters));
    const filterList: JournalFilter[] = reactive(JSON.parse(JSON.stringify(initFilters)));
    const searchersValues = reactive({
      'search-train': '',
      'search-driver': '',
      'search-dispatcher': '',
      'search-issuedFrom': '',
      'search-date': '',
    } as JournalTimetableSearchType);
@@ -127,14 +137,15 @@ export default defineComponent({
    provide('searchersValues', searchersValues);
    provide('sorterActive', sorterActive);
-    provide('journalFilterActive', journalFilterActive);
+    provide('filterList', filterList);
    const scrollElement: Ref<HTMLElement | null> = ref(null);
    return {
      sorterActive,
      journalFilterActive,
      searchersValues,
      filterList,
      initFilters,
      countFromIndex,
      countLimit,
@@ -146,8 +157,8 @@ export default defineComponent({
  },
  watch: {
-    currentQueryArray(q: string[]) {      
+    currentQueryParams(q: TimetablesQueryParams) {
-      this.currentOptionsActive = q.length >= 2 || q.some((qv) => qv.startsWith('sortBy=') && qv.split('=')[1]);
+      this.currentOptionsActive = Object.values(q).some((v) => v !== undefined);
    },
  },
@@ -162,7 +173,6 @@ export default defineComponent({
    this.fetchHistoryData();
  },
  methods: {
    handleScroll(e: Event) {
      const listElement = e.target as HTMLElement;
@@ -178,29 +188,35 @@ export default defineComponent({
      if ('timetableId' in query) this.searchersValues['search-train'] = `#${query.timetableId}`;
    },
-    setSearchers(date: string, driver: string, train: string, dispatcher: string) {
+    setSearchers(date: string, driver: string, train: string, dispatcher: string, issuedFrom: string) {
      this.searchersValues['search-date'] = date;
      this.searchersValues['search-driver'] = driver;
      this.searchersValues['search-train'] = train;
      this.searchersValues['search-dispatcher'] = dispatcher;
      this.searchersValues['search-issuedFrom'] = issuedFrom;
    },
    resetOptions() {
-      this.setSearchers('', '', '', '');
+      this.setSearchers('', '', '', '', '');
      this.journalFilterActive = this.journalTimetableFilters[0];
      this.sorterActive.id = 'timetableId';
      this.filterList.forEach(
        (f) => (f.isActive = this.initFilters.find((initFilter) => initFilter.id == f.id)?.isActive || false)
      );
      this.fetchHistoryData();
    },
    async addHistoryData() {
      this.scrollDataLoaded = false;
-      const countFrom = this.timetableHistory.length;
+      this.currentQueryParams['countFrom'] = this.timetableHistory.length;
      const responseData: TimetableHistory[] = await (
-        await axios.get(`${TIMETABLES_API_URL}?${this.currentQuery}&countFrom=${countFrom}`)
+        await axios.get(`${TIMETABLES_API_URL}`, {
          params: { ...this.currentQueryParams },
        })
      ).data;
      if (!responseData) return;
@@ -215,57 +231,82 @@ export default defineComponent({
    },
    async fetchHistoryData() {
-      // if(this.dataStatus == DataStatus.Loading) return;
+      const driverName = this.searchersValues['search-driver'].trim() || undefined;
-
+      const trainNo = this.searchersValues['search-train'].trim() || undefined;
-      const queries: string[] = [];
+      const authorName = this.searchersValues['search-dispatcher'].trim() || undefined;
-
+      const dateString = this.searchersValues['search-date'].trim() || undefined;
-      const driverName = this.searchersValues['search-driver'].trim();
+      const issuedFrom = this.searchersValues['search-issuedFrom'].trim() || undefined;
      const trainNo = this.searchersValues['search-train'].trim();
      const authorName = this.searchersValues['search-dispatcher'].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;
-      if (driverName) queries.push(`driverName=${driverName}`);
+      const queryParams: TimetablesQueryParams = {};
      if (trainNo)
        queries.push(trainNo.startsWith('#') ? `timetableId=${trainNo.replace('#', '')}` : `trainNo=${trainNo}`);
      if (authorName) queries.push(`authorName=${authorName}`);
      if (timestampFrom && timestampTo) queries.push(`timestampFrom=${timestampFrom}`, `timestampTo=${timestampTo}`);
-      // Z API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
+      this.filterList
-      if (this.sorterActive.id == 'distance') queries.push('sortBy=routeDistance');
+        .filter((f) => f.isActive)
-      else if (this.sorterActive.id == 'total-stops') queries.push('sortBy=allStopsCount');
+        .forEach((f) => {
-      else if (this.sorterActive.id == 'beginDate') queries.push('sortBy=beginDate');
+          switch (f.id) {
-      // else queries.push('sortBy=timetableId');
+            case JournalFilterType.ABANDONED:
              queryParams['fulfilled'] = 0;
              queryParams['terminated'] = 1;
              break;
-      queries.push('countLimit=15');
+            case JournalFilterType.ACTIVE:
              queryParams['fulfilled'] = undefined;
              queryParams['terminated'] = 0;
              break;
-      switch (this.journalFilterActive.id) {
+            case JournalFilterType.FULFILLED:
-        case JournalFilterType.abandoned:
+              queryParams['terminated'] = undefined;
-          queries.push('fulfilled=0', 'terminated=1');
+              queryParams['fulfilled'] = 1;
-          break;
+              break;
-        case JournalFilterType.active:
+            case JournalFilterType.ALL:
-          queries.push('terminated=0');
+              queryParams['terminated'] = undefined;
-          break;
+              queryParams['fulfilled'] = undefined;
              break;
-        case JournalFilterType.fulfilled:
+            case JournalFilterType.TWR_SKR:
-          queries.push('fulfilled=1');
+              queryParams['twr'] = undefined;
-          break;
+              queryParams['skr'] = undefined;
              break;
-        default:
+            case JournalFilterType.TWR:
-          break;
+              queryParams['twr'] = 1;
-      }
+              queryParams['skr'] = undefined;
              break;
-      if (this.currentQuery != queries.join('&')) this.dataStatus = DataStatus.Loading;
+            case JournalFilterType.SKR:
              queryParams['twr'] = undefined;
              queryParams['skr'] = 1;
              break;
-      this.currentQuery = queries.join('&');
+            default:
-      this.currentQueryArray = queries;
+              break;
          }
        });
      queryParams['driverName'] = driverName;
      queryParams['trainNo'] = trainNo;
      queryParams['countFrom'] = undefined;
      queryParams['countLimit'] = undefined;
      queryParams['authorName'] = authorName;
      queryParams['timestampFrom'] = timestampFrom;
      queryParams['timestampTo'] = timestampTo;
      queryParams['issuedFrom'] = issuedFrom;
      queryParams['sortBy'] = this.sorterActive.id != 'timetableId' ? this.sorterActive.id : undefined;
      if (JSON.stringify(this.currentQueryParams) != JSON.stringify(queryParams)) this.dataStatus = DataStatus.Loading;
      this.currentQueryParams = queryParams;
      try {
        const responseData: TimetableHistory[] = await (
-          await axios.get(`${TIMETABLES_API_URL}?${this.currentQuery}`)
+          await axios.get(`${TIMETABLES_API_URL}`, {
            params: this.currentQueryParams,
          })
        ).data;
        if (!responseData) {
@@ -301,4 +342,3 @@ export default defineComponent({
 <style lang="scss" scoped>
@import '../styles/JournalSection.scss';
 </style>
@@ -1,4 +1,4 @@
-<template>
+  <template>
  <div class="scenery-view">
    <div class="scenery-offline" v-if="!stationInfo && isComponentVisible && store.dataStatuses.sceneries == 2">
      <div>{{ $t('scenery.no-scenery') }}</div>
@@ -52,17 +52,6 @@ export default defineComponent({
  mounted() {
    this.filterStore.setupFilters();
    // this.filterStore.inputs.options.forEach((option) => {
    //   const value = StorageManager.getBooleanValue(option.name);
    //   option.value = value;
    //   this.filterStore.changeFilterValue({ name: option.name, value: value });
    // });
    // this.filterStore.inputs.sliders.forEach((slider) => {
    //   const value = StorageManager.getNumericValue(slider.name);
    //   slider.value = value;
    //   this.filterStore.changeFilterValue({ name: slider.name, value: value });
    // });
  },
 });
 </script>
@@ -2,7 +2,7 @@
  <section class="trains-view">
    <div class="trains_wrapper">
      <TrainOptions
-        :sorter-option-ids="['distance', 'id', 'progress', 'delay', 'mass', 'speed', 'length']"
+        :sorter-option-ids="['routeDistance', 'id', 'progress', 'delay', 'mass', 'speed', 'length']"
        :current-options-active="currentOptionsActive"
      />
@@ -21,7 +21,7 @@ import modalTrainMixin from '../mixins/modalTrainMixin';
 import Train from '../scripts/interfaces/Train';
 import { filteredTrainList } from '../scripts/managers/trainFilterManager';
 import { useStore } from '../store/store';
-import { TrainFilter } from '../types/Trains/TrainOptionsTypes';
+import { TrainFilter } from '../scripts/interfaces/Trains/TrainFilter';
 export default defineComponent({
  components: {
@@ -57,7 +57,7 @@ export default defineComponent({
    const store = useStore();
    const initTrainFilters = [...trainFilters.map((f) => ({ ...f }))];
-    const sorterActive = reactive({ id: 'distance', dir: -1 });
+    const sorterActive = reactive({ id: 'routeDistance', dir: -1 });
    const filterList = reactive([...trainFilters]) as TrainFilter[];
    const currentOptionsActive = ref(false);
@@ -9,7 +9,7 @@ export default defineConfig({
  plugins: [
    vue(),
    VitePWA({
-      registerType: 'prompt',
+      registerType: 'autoUpdate',
      workbox: {
        globPatterns: ['**/*.{js,css,html,png,svg,jpg}'],
@@ -52,3 +52,4 @@ export default defineConfig({
 });
Author	SHA1	Message	Date
Spythere	f28600a7fa	Merge do wersji 1.16.0 Wersja 1.16.0	2023-06-12 01:33:45 +02:00
Spythere	d59ead87e6	bump v1.16.0	2023-06-12 01:21:49 +02:00
Spythere	34d91bc800	poprawki w pokazywaniu statystyk	2023-06-12 01:19:31 +02:00
Spythere	cf9991d8a0	layout filtrów dzienników	2023-06-12 00:51:17 +02:00
Spythere	4ffb79d62b	poprawki pobierania danych	2023-06-11 21:47:50 +02:00
Spythere	d9f5edb4fe	poprawki tłumaczeń	2023-06-11 21:47:22 +02:00
Spythere	1b2112430a	feature: długości szlaków po kliknięciu	2023-06-08 23:35:57 +02:00
Spythere	0a972a23ef	fix: asynchroniczność pobierania danych z API	2023-06-04 13:35:53 +02:00
Spythere	6d52724d06	zapamiętywanie stanu statystyk dnia	2023-06-04 12:19:46 +02:00
Spythere	99415c35d3	rozbudowane filtry dziennika RJ	2023-06-04 12:06:15 +02:00
Spythere	c3f687d439	hotfixy dzienników	2023-06-04 01:45:58 +02:00
Spythere	266edfd6e6	reorder typów danych	2023-06-04 00:33:43 +02:00
Spythere	d32d5ad91b	poprawki dzienników	2023-06-03 18:55:44 +02:00
Spythere	c3481470cb	optymalizacja zapytań; filtr scenerii pocz.	2023-06-03 15:49:15 +02:00
Spythere	57e88b9abc	Merge do wersji 1.15.1 Wersja 1.15.1	2023-06-02 20:09:43 +02:00
Spythere	44ebf53798	poprawki pwa	2023-06-02 20:06:25 +02:00
Spythere	145dc72b6b	pwa: zmiana na autoUpdate	2023-06-02 19:41:33 +02:00
Spythere	b7f3761940	Merge do wersji 1.15.0 Wersja 1.15.0	2023-06-02 01:16:37 +02:00
Spythere	ea7c49dfb3	bump: 1.15.0	2023-06-02 01:10:01 +02:00
Spythere	5d6785813a	fix: odznaki TWR/SKR; dodano do dziennika	2023-06-02 01:07:44 +02:00
Spythere	a0054aed14	fix: optymalizacja zapytań historii RJ scenerii	2023-06-02 00:51:03 +02:00
Spythere	471e6f5216	Wersja 1.14.3 Wersja 1.14.3	2023-05-18 02:42:27 +02:00
Spythere	a617eef00e	bump 1.14.3	2023-05-18 02:38:13 +02:00
Spythere	38e700ecd6	migracja z route na routeNames	2023-05-18 02:37:27 +02:00
Spythere	da1be0e10a	Wersja 1.14.2	2023-05-17 02:24:05 +02:00
Spythere	f49bb12948	bump 1.14.2	2023-05-17 02:21:13 +02:00
Spythere	02673a3d70	poprawki filtrów scenerii	2023-05-16 14:27:31 +02:00
Spythere	4ddc7345df	poprawki filtrów RJ	2023-05-16 02:40:08 +02:00
Spythere	5d822684c0	feature: rozszerzone filtry RJ	2023-05-14 15:05:51 +02:00
Spythere	69fa15c70a	v1.14.1 v1.14.1	2023-04-13 19:25:30 +02:00
Spythere	9192067388	1.14.1	2023-04-13 19:21:36 +02:00
Spythere	2b41e5b857	hotfix	2023-04-13 19:21:24 +02:00
Spythere	674680ff14	1.14: hotfixy 1.14 hotfixy	2023-04-13 19:15:38 +02:00
Spythere	475bd2ff10	przeniesienie skrótów do widoku scenerii	2023-04-13 19:11:44 +02:00
Spythere	074d1eb155	Hotfix tłumaczeń	2023-04-13 18:50:00 +02:00
Spythere	378393de89	Wersja 1.14.0 Wersja 1.14.0	2023-04-13 15:45:39 +02:00
Spythere	03e61083a7	tłumaczenie stopki	2023-04-13 15:37:34 +02:00
Spythere	0b746fce8c	hotfix headera	2023-04-13 15:32:41 +02:00
Spythere	5883e710be	bump wersji: 1.14	2023-04-13 15:26:22 +02:00
Spythere	3d0695a17b	Poprawki w headerze i stopce	2023-04-13 15:25:39 +02:00
Spythere	4adb76eeb0	feature: podpisy status indicatorów dla RJ	2023-04-11 00:33:14 +02:00
Spythere	4c41076519	feature: skrót posterunku w tabelce	2023-04-09 01:37:11 +02:00
Spythere	77f61d17fd	hotfix: wygląd badge'a	2023-04-09 00:19:53 +02:00
Spythere	032a84cbcf	feature: historia zmian w zestawieniu pociągów	2023-03-20 22:39:23 +01:00
Spythere	de9851ebcc	Wersja 1.13.0 Wersja 1.13.0	2023-03-16 01:31:18 +01:00
Spythere	ff78eba927	hotfixy filtrów	2023-03-15 18:15:01 +01:00
Spythere	e4c5f6a322	filtry pociągów	2023-03-15 17:56:27 +01:00
Spythere	0a78761928	hotfix tłumaczeń	2023-03-15 15:34:36 +01:00
Spythere	4843043c29	bump wersji: 1.13.0	2023-03-15 15:20:28 +01:00
Spythere	9e1df1fb61	filtry pociągów	2023-03-15 15:19:50 +01:00
Spythere	021474cfb0	fix: tłumaczenia; hotfixy	2023-03-14 23:13:37 +01:00
Spythere	7d0e68862c	filtry scenerii	2023-03-14 21:42:39 +01:00
Spythere	653d45dfc6	scenerie: remake filtrów	2023-03-13 22:26:00 +01:00
Spythere	4a4e1240a4	widok scenerii: odnośniki do tablic przy aktywnych RJ	2023-03-10 16:59:16 +01:00
Spythere	14ca48a90d	hotfix	2023-03-10 16:30:36 +01:00
Spythere	a02f9804b1	dziennik RJ: dodatkowe info	2023-03-10 16:30:31 +01:00
Spythere	c5efc6fbac	bump: wersja 1.12.2	2023-03-10 02:03:37 +01:00
Spythere	cacd0a1e4e	fix: data stworzenia RJ	2023-03-10 01:53:19 +01:00
Spythere	50375099ab	update url api	2023-03-10 01:42:10 +01:00
Spythere	6af67ec741	fix: tłumaczenia filtrów	2023-03-09 14:35:03 +01:00
Spythere	c64112c86a	dziennik RJ: dodatkowe informacje	2023-03-09 14:28:16 +01:00
Spythere	0434702d3b	update: URL api	2023-03-09 13:41:59 +01:00
Spythere	dd7d1b0bb0	Wersja 1.12.1 Wersja 1.12.1	2023-02-26 14:20:40 +01:00
Spythere	68934a89a4	bump: wersja 1.12.1	2023-02-26 14:16:13 +01:00
Spythere	b88a240ec1	feature: like count historii dyżurnych	2023-02-26 14:14:32 +01:00
Spythere	eaa34f3359	hotfix: dostępność grubości czcionki	2023-02-26 13:50:47 +01:00