Merge do wersji 1.17.1

Wersja 1.17.1
pliki lock
2026-05-03 13:28:11 +00:00 · 2023-10-03 21:58:23 +02:00 · 2023-10-03 21:53:59 +02:00 · 2023-10-03 21:51:00 +02:00 · 2023-10-03 21:31:06 +02:00 · 2023-10-02 22:09:27 +02:00
127 changed files with 33517 additions and 17739 deletions
@@ -31,6 +31,7 @@ node_modules
 .firebase
 .firebaserc

+# Env
 .env

 .fake
@@ -5,8 +5,8 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />

-    <meta name="keywords" content="Stacjownik, TD2, Train Driver 2, stacjownik-td2" />
-    <meta name="description" content="Automatycznie odświeżana strona wyświetlająca stacje w Train Driver 2!" />
+    <meta name="keywords" content="Stacjownik, TD2, Train Driver 2, stacjownik-td2, stacjownik, td2.info.pl" />
+    <meta name="description" content="Pomocnik maszynisty i dyżurnego symulatora Train Driver 2" />

    <title>Stacjownik</title>

@@ -16,15 +16,31 @@
    <link rel="manifest" href="/site.webmanifest" />
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
    <meta name="msapplication-TileColor" content="#da532c" />
-    <meta name="theme-color" content="#ffffff" />
+    <meta name="theme-color" content="#222222" />

    <link rel="icon" href="favicon-64.png" sizes="64x64" type="image/png" />
-    <link rel="icon" href="favicon-32.png" sizes="32x32" type="image/png" />
    <link rel="icon" href="favicon-62.png" sizes="62x62" type="image/png" />
+    <link rel="icon" href="favicon-32.png" sizes="32x32" type="image/png" />
    <link rel="icon" href="favicon-16.png" sizes="16x16" type="image/png" />
    <link rel="icon" href="favicon.ico" />

-    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap" rel="stylesheet" />
+    <!-- Static OpenGraph meta -->
+    <meta name="description" content="Pomocnik maszynisty i dyżurnego symulatora Train Driver 2" />
+    <meta property="og:url" content="https://stacjownik-td2.web.app/" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Stacjownik" />
+    <meta property="og:description" content="Pomocnik maszynisty i dyżurnego symulatora Train Driver 2" />
+    <meta property="og:image" content="https://raw.githubusercontent.com/Spythere/api/main/thumbnails/stacjownik.jpg" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta property="og:site_name" content="Stacjownik" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Stacjownik" />
+    <meta name="twitter:description" content="Pomocnik maszynisty i dyżurnego symulatora Train Driver 2" />
+    <meta name="twitter:image" content="https://raw.githubusercontent.com/Spythere/api/main/thumbnails/stacjownik.jpg" />
+
+    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500;700&display=swap" rel="stylesheet" />
  </head>

  <body>
@@ -1,6 +1,6 @@
 {
  "name": "stacjownik",
-  "version": "1.12.0",
+  "version": "1.17.1",
  "private": true,
  "scripts": {
    "dev": "vite",
@@ -9,25 +9,26 @@
    "preview": "yarn build && vite preview"
  },
  "dependencies": {
-    "core-js": "^3.12.1",
-    "dotenv": "^16.0.3",
-    "firebase": "^9.8.1",
-    "howler": "^2.2.1",
-    "pinia": "^2.0.14",
-    "sass": "^1.53.0",
-    "socket.io-client": "^4.4.1",
-    "vue": "^3.2.37",
-    "vue-i18n": "^9.1.6",
-    "vue-router": "^4.0.0-0"
+    "core-js": "^3.32.2",
+    "dotenv": "^16.3.1",
+    "firebase": "^10.4.0",
+    "howler": "^2.2.4",
+    "pinia": "^2.1.6",
+    "sass": "^1.67.0",
+    "socket.io-client": "^4.7.2",
+    "vue": "^3.3.4",
+    "vue-i18n": "^9.4.1",
+    "vue-router": "^4.2.4"
  },
  "devDependencies": {
-    "@types/node": "^18.11.17",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "axios": "^1.2.1",
-    "typescript": "^4.9.4",
-    "vite": "^4.0.3",
-    "vite-plugin-pwa": "^0.14.0",
-    "vue-tsc": "^1.0.18"
+    "@types/node": "^20.6.2",
+    "@vite-pwa/assets-generator": "^0.0.10",
+    "@vitejs/plugin-vue": "^4.3.4",
+    "axios": "^1.5.0",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9",
+    "vite-plugin-pwa": "^0.16.5",
+    "vue-tsc": "^1.8.11"
  },
  "browserslist": [
    "> 1%",
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.00251 14.9297L0 1.07422H6.14651L8.00251 4.27503L9.84583 1.07422H16L8.00251 14.9297Z" fill="black"/>
-</svg>
@@ -1,7 +1,6 @@
@import './styles/responsive.scss';
@import './styles/variables.scss';
@import './styles/global.scss';
-@import './styles/scenery_status.scss';

 // VUE ROUTE CHANGE ANIMATION
 .view-anim {
@@ -91,6 +90,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"/>
-<path d="M30.5 6.04878H35.2195" stroke="#BFBFBF"/>
-<path d="M27.9024 4.00303C25.2115 4.10008 24.2403 6.24494 24 7.41767H32.0488C31.8486 6.16406 30.5934 3.90598 27.9024 4.00303Z" fill="black"/>
-<path d="M33.0244 29.6688V5.47793V4.68292H34.4878V5.47793V56.5854H33.0244V32.5H27.5V28.5V28.0163L28.5 28V31.5L31.9268 31.5447H33.0244V29.6688Z" fill="#BFBFBF"/>
-<path d="M28.1463 29.2683C30.8373 29.1712 31.8085 27.0264 32.0488 25.8537H24C24.2002 27.1073 25.4554 29.3654 28.1463 29.2683Z" fill="black"/>
-<path d="M32.0488 25.8537V7.86993V7.41464H24V25.8537H32.0488Z" fill="black"/>
-<path d="M25 26V29.5L33.8781 44.9756" stroke="black"/>
-<rect x="33.0244" y="31.5447" width="1.46341" height="25.0407" fill="white"/>
-<rect x="33.0244" y="31.5447" width="1.46341" height="5.69106" fill="#FF0000"/>
-<rect x="33.0244" y="42.9268" width="1.46341" height="5.69106" fill="#FF0000"/>
-<rect x="33.0244" y="54.3089" width="1.46341" height="5.69106" fill="#FF0000"/>
-<ellipse cx="27.9024" cy="7.40022" rx="1.46341" ry="1.40022" fill="#212121"/>
-<ellipse cx="27.9024" cy="11.8343" rx="1.46341" ry="1.40022" fill="#212121"/>
-<ellipse cx="27.9024" cy="16.2683" rx="1.46341" ry="1.40022" fill="#FF0000"/>
-<ellipse cx="27.9024" cy="20.7023" rx="1.46341" ry="1.40022" fill="#212121"/>
-<ellipse cx="27.9024" cy="25.1364" rx="1.46341" ry="1.40022" fill="#212121"/>
-</svg>
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="-0.00012207" width="60" height="60" fill="#898989"/>
+<path d="M29.0126 32.4897V10.2511V9.52028H30.4337V10.2511V57.234H29.0126V32.4897Z" fill="#BFBFBF"/>
+<path d="M26.955 29.3992V32.9949L29.7672 36.9105" stroke="black" stroke-width="0.61183"/>
+<rect x="29.0051" y="34.0686" width="1.42857" height="22.8196" fill="white"/>
+<rect x="29.0051" y="34.0686" width="1.42857" height="5.18627" fill="#FF0000"/>
+<rect x="29.0051" y="54.8137" width="1.42857" height="5.18627" fill="#FF0000"/>
+<rect x="29.0051" y="44.4412" width="1.42857" height="5.18627" fill="#FF0000"/>
+<rect x="27.8749" y="31.8649" width="3.75" height="2.17823" fill="white"/>
+<path d="M33.5 28.5111V8.61545V8.11176H26V28.5111H33.5Z" fill="black"/>
+<path d="M29.6364 5.00276C27.1289 5.09112 26.2239 7.044 26 8.11176H33.5C33.3134 6.97036 32.1438 4.91439 29.6364 5.00276Z" fill="black"/>
+<path d="M29.8636 31.6201C32.3711 31.5317 33.2761 29.5789 33.5 28.5111H26C26.1865 29.6525 27.3561 31.7085 29.8636 31.6201Z" fill="black"/>
+<ellipse cx="29.887" cy="11.8168" rx="1.38696" ry="1.28474" fill="#212121"/>
+<ellipse cx="29.887" cy="8.0135" rx="1.38696" ry="1.28474" fill="#212121"/>
+<ellipse cx="29.887" cy="15.6151" rx="1.38696" ry="1.28474" fill="#212121"/>
+<ellipse cx="29.887" cy="19.6834" rx="1.38696" ry="1.28474" fill="#212121"/>
+<ellipse cx="29.887" cy="23.7518" rx="1.38696" ry="1.28474" fill="#212121"/>
+<ellipse cx="29.887" cy="27.8201" rx="1.38696" ry="1.28474" fill="#00FF0A"/>
+<ellipse cx="29.887" cy="19.769" rx="1.38696" ry="1.28474" fill="#00FF0A"/>
+</svg>
@@ -0,0 +1,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;
-
-    @include smallScreen {
-      max-width: 18em;
-    }
+    max-width: 20em;
  }

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

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

  &_brand {
@@ -158,6 +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.2em;
+    font-size: 1.15em;
  }

  &_links {
@@ -184,57 +183,20 @@ export default defineComponent({
    position: absolute;
    right: 0;
    top: 0;
-    height: 100%;

-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    align-items: flex-end;
-    padding: 0.5em 0.5em;
+    padding: 0.5em;

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

 // ICONS
-.icons {
-  position: relative;
-
-  &-top {
-    img {
-      width: 2.5em;
-
-      cursor: pointer;
-    }
-
-    margin-bottom: 0.5em;
-  }
-
-  &-bottom {
-    display: flex;
-
-    a {
-      margin-left: 0.6em;
-      user-select: none;
-    }
-
-    img {
-      width: 1.9em;
-    }
-
-    @include smallScreen() {
-      flex-direction: column;
-
-      a {
-        margin: 0.25em 0;
-      }
-    }
+.icons-top {
+  img {
+    width: 2.5em;
+    cursor: pointer;
  }
 }

@@ -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%;
-      top: 100%;
-
-      transform: translate(-50%, 0);
-      margin-left: 0;
-      margin-top: 0.75em;
+      left: auto;
+      right: 200%;

      &::before {
-        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
-        border-bottom: 10px solid #171717;
+        border-left: 12px solid #171717;
+        right: 0;
+        left: auto;

-        top: 0;
-        left: 50%;
-
-        transform: translate(-50%, -100%);
+        transform: translate(100%, -50%);
      }
    }

@@ -379,3 +375,4 @@ export default defineComponent({
  }
 }
 </style>
+
@@ -0,0 +1,42 @@
+<template>
+  <button
+    class="btn btn--option btn--load-data"
+    v-if="!scrollNoMoreData && scrollDataLoaded && list.length >= 15"
+    @click="addHistoryData"
+  >
+    {{ $t('journal.load-data') }}
+  </button>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    scrollNoMoreData: {
+      type: Boolean,
+      required: true,
+    },
+
+    scrollDataLoaded: {
+      type: Boolean,
+      required: true,
+    },
+
+    list: {
+      type: Array as PropType<any[]>,
+      required: true,
+    },
+  },
+
+  emits: ['addHistoryData'],
+
+  methods: {
+    addHistoryData() {
+      this.$emit('addHistoryData');
+    },
+  },
+});
+</script>
+
+<style scoped></style>
@@ -0,0 +1,62 @@
+<template>
+  <div class="progress-bar">
+    <span class="bar-bg"></span>
+    <span class="bar-fg" :style="{ width: `${~~progressPercent}%`, backgroundColor: bgColor }"></span>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    progressPercent: {
+      type: Number,
+      required: true,
+    },
+    progressType: {
+      type: String,
+      required: false,
+    },
+  },
+
+  computed: {
+    bgColor() {
+      switch (this.progressType) {
+        case 'abandoned':
+          return 'salmon';
+
+        default:
+          return 'springgreen';
+      }
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.progress-bar {
+  position: relative;
+
+  width: 6em;
+  height: 1em;
+  margin: 0.5em 0;
+
+  .bar-fg,
+  .bar-bg {
+    position: absolute;
+    height: 1em;
+    width: 100%;
+
+    left: 0;
+  }
+
+  .bar-fg {
+    background-color: springgreen;
+  }
+
+  .bar-bg {
+    background-color: #5b5b5b;
+  }
+}
+</style>
@@ -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;
-  width: auto;
+  display: flex;
+  align-items: center;
 }

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

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

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

  &:focus {
    background-color: #262626;
@@ -0,0 +1,90 @@
+<template>
+  <span class="status-badge" :class="statusID" v-if="isOnline">
+    {{ $t(`status.${statusID}`) }}
+    {{ statusID == 'online' ? timestampToString(statusTimestamp!) : '' }}
+  </span>
+
+  <span class="status-badge free" v-else>
+    {{ $t('status.free') }}
+  </span>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import dateMixin from '../../mixins/dateMixin';
+
+export default defineComponent({
+  props: {
+    statusID: {
+      type: String,
+    },
+    statusTimestamp: {
+      type: Number,
+    },
+    isOnline: {
+      type: Boolean,
+    },
+  },
+  mixins: [dateMixin],
+});
+</script>
+
+<style lang="scss" scoped>
+$free: #8a8a8a;
+$ending: #e6c300;
+$no-limit: #117fc9;
+$unav: #ff3d5d;
+$brb: #e6a100;
+$no-space: #222;
+$online: #09a116;
+$unknown: rgb(185, 60, 60);
+
+.status-badge {
+  border-radius: 1rem;
+  font-weight: 500;
+
+  padding: 0.2em 0.55em;
+
+  background-color: $online;
+
+  &.free {
+    background-color: $free;
+    font-size: 0.95em;
+  }
+
+  &.ending {
+    background-color: $ending;
+    color: black;
+    font-size: 0.9em;
+  }
+
+  &.no-limit {
+    background-color: $no-limit;
+    font-size: 0.85em;
+  }
+
+  &.not-signed,
+  &.unavailable {
+    background-color: $unav;
+    font-size: 0.85em;
+  }
+
+  &.brb {
+    background-color: $brb;
+    color: black;
+    font-size: 0.95em;
+  }
+
+  &.no-space {
+    background-color: $no-space;
+    border: 1px solid white;
+    color: white;
+    font-size: 0.85em;
+  }
+
+  &.unknown {
+    background-color: $unknown;
+    font-size: 0.95em;
+  }
+}
+</style>
@@ -0,0 +1,106 @@
+<template>
+  <div class="stock-list">
+    <ul>
+      <li v-for="(stockName, i) in trainStockList">
+        <p>{{ stockName.split(':')[0].split('_').splice(0, 2).join(' ') }} {{ stockName.split(':')[1] }}</p>
+
+        <span>
+          <img
+            :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}${/^EN/.test(stockName) ? 'rb' : ''}.png`"
+            @error="onImageError($event, stockName)"
+            width="400"
+            height="60"
+          />
+
+          <img
+            v-if="/^(EN|2EN)/.test(stockName)"
+            :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}s.png`"
+            @error="(event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-s.png')"
+          />
+
+          <img
+            class="train-thumbnail"
+            v-if="/^EN71/.test(stockName)"
+            :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}s.png`"
+            @error="(event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-s.png')"
+          />
+
+          <img
+            class="train-thumbnail"
+            v-if="/^(EN|2EN)/.test(stockName)"
+            :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}ra.png`"
+            @error="(event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-ra.png')"
+          />
+        </span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue';
+import { useStore } from '../../store/store';
+import { RollingStockInfo } from '../../scripts/interfaces/github_api/StockInfoGithubData';
+import imageMixin from '../../mixins/imageMixin';
+
+export default defineComponent({
+  mixins: [imageMixin],
+
+  props: {
+    trainStockList: {
+      type: Array as PropType<string[]>,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      store: useStore(),
+    };
+  },
+
+  methods: {
+    onImageError(event: Event, stockName: string) {
+      const fallbackName =
+        Object.keys(this.store.rollingStockData!.info).find((type) => {
+          return this.store.rollingStockData!.info[type as keyof RollingStockInfo].find((v) => v[0] === stockName.split(':')[0]);
+        }) || 'vehicle-unknown';
+
+      (event.target as HTMLImageElement).src = `/images/icon-${fallbackName}.png`;
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.stock-list {
+  display: flex;
+  justify-content: center;
+}
+
+.stock-list ul {
+  display: flex;
+  align-items: flex-end;
+  overflow: auto;
+  margin: 0 auto;
+  padding: 1em 0;
+}
+
+ul > li > span {
+  display: flex;
+  align-items: flex-end;
+}
+
+img {
+  max-height: 60px;
+  width: auto;
+  height: auto;
+}
+
+p {
+  text-align: center;
+  color: #aaa;
+  font-size: 0.9em;
+  margin-bottom: 1em;
+}
+</style>
@@ -1,119 +1,119 @@
-<template>
-  <span class="stop-date">
-    <span
-      class="date arrival"
-      v-if="!stop.beginsHere"
-      :class="{
-        delayed: stop.arrivalDelay > 0 && stop.confirmed,
-        preponed: stop.arrivalDelay < 0 && stop.confirmed,
-        'on-time': stop.arrivalDelay == 0 && stop.confirmed,
-      }"
-    >
-      <span v-if="stop.arrivalDelay != 0 && stop.confirmed">
-        <s>{{ timestampToString(stop.arrivalTimestamp) }}</s>
-        {{ timestampToString(stop.arrivalRealTimestamp) }}
-        ({{ stop.arrivalDelay > 0 ? '+' : '' }}{{ stop.arrivalDelay }})
-      </span>
-
-      <span v-else>
-        {{ timestampToString(stop.arrivalTimestamp) }}
-      </span>
-    </span>
-
-    <span class="date stop" v-if="stop.stopTime" :class="stop.stopType.replace(', ', '-')">
-      {{ stop.stopTime }} {{ stop.stopType == '' ? 'pt' : stop.stopType }}
-    </span>
-
-    <span
-      class="date departure"
-      v-if="!stop.terminatesHere && stop.stopTime != 0"
-      :class="{
-        delayed: stop.departureDelay > 0 && stop.confirmed,
-        preponed: stop.departureDelay < 0 && stop.confirmed,
-      }"
-    >
-      <span v-if="stop.departureDelay != 0 && stop.confirmed">
-        <s>{{ timestampToString(stop.departureTimestamp) }}</s>
-        {{ timestampToString(stop.departureRealTimestamp) }}
-
-        ({{ stop.departureDelay > 0 ? '+' : '' }}{{ stop.departureDelay }})
-      </span>
-
-      <span v-else>
-        {{ timestampToString(stop.departureTimestamp) }}
-      </span>
-    </span>
-  </span>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import dateMixin from '../../mixins/dateMixin';
-import TrainStop from '../../scripts/interfaces/TrainStop';
-
-export default defineComponent({
-  mixins: [dateMixin],
-
-  props: {
-    stop: {
-      type: Object as () => TrainStop,
-      required: true,
-    },
-  },
-
-  setup() {
-    return {};
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-$preponedClr: lime;
-$delayedClr: salmon;
-$dateClr: #525151;
-$stopExchangeClr: #db8e29;
-$stopDefaultClr: #252525;
-
-.stop-date {
-  display: flex;
-  align-items: center;
-
-  .date {
-    background: $dateClr;
-    padding: 0.3em 0.5em;
-  }
-
-  .stop {
-    &.ph,
-    &.ph-pm,
-    &.pm {
-      background: $stopExchangeClr;
-    }
-
-    background: $stopDefaultClr;
-  }
-
-  .arrival,
-  .departure {
-    &.delayed {
-      s {
-        color: #999;
-      }
-
-      span {
-        color: $delayedClr;
-      }
-    }
-
-    &.preponed {
-      s {
-        color: #999;
-      }
-
-      span {
-        color: $preponedClr;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <span class="stop-date">
+    <span
+      class="date arrival"
+      v-if="!stop.beginsHere"
+      :class="{
+        delayed: stop.arrivalDelay > 0 && (stop.confirmed || stop.stopped),
+        preponed: stop.arrivalDelay < 0 && (stop.confirmed || stop.stopped),
+        'on-time': stop.arrivalDelay == 0 && stop.confirmed,
+      }"
+    >
+      <span v-if="stop.arrivalDelay != 0 && (stop.confirmed || stop.stopped)">
+        <s>{{ timestampToString(stop.arrivalTimestamp) }}</s>
+        {{ timestampToString(stop.arrivalRealTimestamp) }}
+        ({{ stop.arrivalDelay > 0 ? '+' : '' }}{{ stop.arrivalDelay }})
+      </span>
+
+      <span v-else>
+        {{ timestampToString(stop.arrivalTimestamp) }}
+      </span>
+    </span>
+
+    <span class="date stop" v-if="stop.stopTime || stop.stopped" :class="stop.stopType.replace(', ', '-')">
+      {{ stop.stopTime }} {{ stop.stopType == '' ? 'pt' : stop.stopType }}
+    </span>
+
+    <span
+      class="date departure"
+      v-if="!stop.terminatesHere && (stop.stopTime != 0 || stop.stopped)"
+      :class="{
+        delayed: stop.departureDelay > 0 && stop.confirmed,
+        preponed: stop.departureDelay < 0 && stop.confirmed,
+      }"
+    >
+      <span v-if="stop.departureDelay != 0 && stop.confirmed">
+        <s>{{ timestampToString(stop.departureTimestamp) }}</s>
+        {{ timestampToString(stop.departureRealTimestamp) }}
+
+        ({{ stop.departureDelay > 0 ? '+' : '' }}{{ stop.departureDelay }})
+      </span>
+
+      <span v-else>
+        {{ timestampToString(stop.departureTimestamp) }}
+      </span>
+    </span>
+  </span>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import dateMixin from '../../mixins/dateMixin';
+import TrainStop from '../../scripts/interfaces/TrainStop';
+
+export default defineComponent({
+  mixins: [dateMixin],
+
+  props: {
+    stop: {
+      type: Object as () => TrainStop,
+      required: true,
+    },
+  },
+
+  setup() {
+    return {};
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+$preponedClr: lime;
+$delayedClr: salmon;
+$dateClr: #525151;
+$stopExchangeClr: #db8e29;
+$stopDefaultClr: #252525;
+
+.stop-date {
+  display: flex;
+  align-items: center;
+
+  .date {
+    background: $dateClr;
+    padding: 0.3em 0.5em;
+  }
+
+  .stop {
+    &.ph,
+    &.ph-pm,
+    &.pm {
+      background: $stopExchangeClr;
+    }
+
+    background: $stopDefaultClr;
+  }
+
+  .arrival,
+  .departure {
+    &.delayed {
+      s {
+        color: #999;
+      }
+
+      span {
+        color: $delayedClr;
+      }
+    }
+
+    &.preponed {
+      s {
+        color: #999;
+      }
+
+      span {
+        color: $preponedClr;
+      }
+    }
+  }
+}
+</style>
@@ -0,0 +1,82 @@
+<template>
+  <img class="train-thumbnail" :src="placeholderUrl" v-if="isNotFound" />
+
+  <img
+    class="train-thumbnail"
+    v-else
+    :src="`https://rj.td2.info.pl/dist/img/thumbnails/${name.split(':')[0]}${stockType == 'loco-ezt' ? 'rb' : ''}.png`"
+    @error="onImageError"
+    @load="onImageLoad"
+    width="220"
+    height="60"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import imageMixin from '../../mixins/imageMixin';
+import { useStore } from '../../store/store';
+import { RollingStockInfo } from '../../scripts/interfaces/github_api/StockInfoGithubData';
+
+export default defineComponent({
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+
+    onlyFirstSegment: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      store: useStore(),
+      isNotFound: false,
+      isLoaded: false,
+    };
+  },
+
+  computed: {
+    url() {
+      return `https://rj.td2.info.pl/dist/img/thumbnails/${this.name.split(':')[0]}.png`;
+    },
+
+    placeholderUrl() {
+      return `/images/icon-${this.stockType}.png`;
+    },
+
+    stockType() {
+      if (!this.store.rollingStockData) return 'vehicle-unknown';
+
+      return (
+        Object.keys(this.store.rollingStockData.info).find((type) => {
+          return this.store.rollingStockData?.info[type as keyof RollingStockInfo].find((v) => v[0] === this.name.split(':')[0]);
+        }) || 'vehicle-unknown'
+      );
+    },
+  },
+
+  methods: {
+    onImageError() {
+      this.isNotFound = true;
+      this.isLoaded = false;
+    },
+
+    onImageLoad() {
+      this.isNotFound = false;
+      this.isLoaded = true;
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.train-thumbnail {
+  width: auto;
+  height: auto;
+  max-height: 60px;
+}
+</style>
@@ -1,56 +1,62 @@
 <template>
  <section class="daily-stats">
-    <span :data-active="data.statsStatus">
-      <b v-if="data.statsStatus == DataStatus.Loading">
+    <span :data-active="statsStatus">
+      <b v-if="statsStatus == DataStatus.Loading">
        {{ $t('app.loading') }}
      </b>

-      <b v-else-if="data.stats.distanceSum == null">
+      <b v-else-if="stats.distanceSum == null">
        {{ $t('journal.daily-stats-info') }}
      </b>

-      <span>
-        <div v-if="data.stats.totalTimetables">
+      <span class="stats-list" v-else>
+        <h3>
+          {{ $t('journal.daily-stats-title') }}
+          <b class="text--primary">{{ new Date().toLocaleDateString($i18n.locale) }}</b>
+        </h3>
+        <hr style="margin-bottom: 0.5em" />
+
+        <div v-if="stats.totalTimetables">
          &bull;
          <i18n-t keypath="journal.timetable-stats-total">
            <template #count>
              <b class="text--primary">
-                {{ data.stats.totalTimetables }}
-                {{ $t('journal.timetable-count', data.stats.totalTimetables) }}
+                {{ stats.totalTimetables }}
+                {{ $t('journal.timetable-count', stats.totalTimetables) }}
              </b>
            </template>

            <template #distance>
-              <b class="text--primary"> {{ data.stats.distanceSum?.toFixed(2) }} km </b>
+              <b class="text--primary"> {{ stats.distanceSum?.toFixed(2) }} km</b>
            </template>
          </i18n-t>
        </div>

-        <div v-if="data.stats.timetableId">
+        <div v-if="stats.timetableId">
          &bull;
          <i18n-t keypath="journal.timetable-stats-longest">
            <template #id>
-              <router-link :to="`/journal/timetables?timetableId=${data.stats.timetableId}`">
-                <b>{{ data.stats.timetableId }}</b>
+              <router-link :to="`/journal/timetables?timetableId=${stats.timetableId}`">
+                <b>{{ stats.timetableId }}</b>
              </router-link>
            </template>
            <template #author>
-              <router-link :to="`/journal/dispatchers?dispatcherName=${data.stats.timetableAuthor}`">
-                <b>{{ data.stats.timetableAuthor }}</b>
+              <router-link :to="`/journal/dispatchers?dispatcherName=${stats.timetableAuthor}`">
+                <b>{{ stats.timetableAuthor }}</b>
              </router-link>
            </template>
            <template #driver>
-              <b>{{ data.stats.timetableDriver }}</b>
+              <b class="text--primary">{{ stats.timetableDriver }}</b>
            </template>
            <template #distance>
-              <b class="text--primary">{{ data.stats.timetableRouteDistance }} km</b>
+              <b class="text--primary">{{ stats.timetableRouteDistance }} km</b>
            </template>
          </i18n-t>
        </div>

        <div v-if="firstPlaceDispatchers.length == 1">
          &bull;
-          <i18n-t keypath="journal.timetable-stats-most-active">
+          <i18n-t keypath="journal.timetable-stats-most-active-dr">
            <template #dispatcher>
              <router-link :to="`/journal/dispatchers?dispatcherName=${firstPlaceDispatchers[0].name}`">
                <b>{{ firstPlaceDispatchers[0].name }}</b>
@@ -67,7 +73,7 @@

        <div v-if="firstPlaceDispatchers.length > 1">
          &bull;
-          <i18n-t keypath="journal.timetable-stats-most-active-many">
+          <i18n-t keypath="journal.timetable-stats-most-active-dr-many">
            <template #dispatchers>
              <span v-for="(disp, i) in firstPlaceDispatchers">
                <span v-if="i == firstPlaceDispatchers.length - 1"> {{ $t('general.and') }} </span>
@@ -88,95 +94,157 @@
            </template>
          </i18n-t>
        </div>
+
+        <div v-if="stats.longestDuties.length > 0">
+          &bull;
+          <i18n-t keypath="journal.timetable-stats-longest-duties">
+            <template #dispatcher>
+              <router-link :to="`/journal/dispatchers?dispatcherName=${stats.longestDuties[0].name}`">
+                <b>{{ stats.longestDuties[0].name }}</b>
+              </router-link>
+            </template>
+
+            <template #station>{{ stats.longestDuties[0].station }}</template>
+
+            <template #duration>
+              {{ calculateDuration(stats.longestDuties[0].duration) }}
+            </template>
+          </i18n-t>
+        </div>
+
+        <div v-if="stats.mostActiveDrivers.length > 0">
+          &bull;
+          <i18n-t keypath="journal.timetable-stats-most-active-driver">
+            <template #driver>
+              <b class="text--primary">{{ stats.mostActiveDrivers[0].name }}</b>
+            </template>
+            <template #distance>
+              <b class="text--primary">{{ stats.mostActiveDrivers[0].distance.toFixed(2) }} km</b>
+            </template>
+          </i18n-t>
+        </div>
      </span>
    </span>
  </section>
 </template>

-<script setup lang="ts">
+<script lang="ts">
 import axios from 'axios';
-import { computed, reactive, ref } from 'vue';
+import { defineComponent } from 'vue';
+import dateMixin from '../../mixins/dateMixin';
 import { DataStatus } from '../../scripts/enums/DataStatus';
 import { ITimetablesDailyStats, ITimetablesDailyStatsResponse } from '../../scripts/interfaces/api/StatsAPIData';
 import { URLs } from '../../scripts/utils/apiURLs';

-const intervalId = ref(-1);
+export default defineComponent({
+  mixins: [dateMixin],
+  emits: ['toggleStatsOpen'],

-const data = reactive({
-  statsStatus: DataStatus.Loading,
+  data() {
+    return {
+      DataStatus,
+      statsStatus: DataStatus.Loading,
+      intervalId: -1,

-  stats: {
-    totalTimetables: 0,
-    distanceSum: 0,
-    distanceAvg: 0,
-    timetableAuthor: '',
-    timetableDriver: '',
-    timetableId: 0,
-    timetableRouteDistance: 0,
-
-    mostActiveDispatchers: [],
-  } as ITimetablesDailyStats,
-});
-
-const firstPlaceDispatchers = computed(() => {
-  if (data.stats.mostActiveDispatchers.length == 0) return [];
-  const maxCount = data.stats.mostActiveDispatchers[0].count;
-
-  return data.stats.mostActiveDispatchers.filter((disp) => disp.count === maxCount);
-});
-
-async function fetchDailyTimetableStats() {
-  try {
-    const {
-      distanceAvg,
-      distanceSum,
-      maxTimetable,
-      totalTimetables,
-      mostActiveDispatchers,
-    }: ITimetablesDailyStatsResponse = await (
-      await axios.get(`${URLs.stacjownikAPI}/api/getDailyTimetableStats`)
-    ).data;
-
-    data.stats = {
-      totalTimetables,
-      distanceSum,
-      distanceAvg,
-      timetableAuthor: maxTimetable?.authorName || '',
-      timetableDriver: maxTimetable?.driverName || '',
-      timetableId: maxTimetable?.id || 0,
-      timetableRouteDistance: maxTimetable?.routeDistance || 0,
-
-      mostActiveDispatchers,
+      stats: {
+        totalTimetables: 0,
+        distanceSum: 0,
+        distanceAvg: 0,
+        timetableAuthor: '',
+        timetableDriver: '',
+        timetableId: 0,
+        timetableRouteDistance: 0,
+        longestDuties: [],
+        mostActiveDrivers: [],
+        mostActiveDispatchers: [],
+      } as ITimetablesDailyStats,
    };
+  },

-    data.statsStatus = DataStatus.Loaded;
-  } catch (error) {
-    console.error('Ups! Wystąpił błąd podczas pobierania statystyk rozkładów jazdy...');
-    data.statsStatus = DataStatus.Error;
-  }
-}
+  activated() {
+    this.startFetchingDailyStats();
+    this.$emit('toggleStatsOpen', true);
+  },

-function startFetchingDailyStats() {
-  fetchDailyTimetableStats();
-  intervalId.value = setInterval(fetchDailyTimetableStats, 60000);
-}
+  deactivated() {
+    this.stopFetchingDailyStats();
+  },

-function stopFetchingDailyStats() {
-  clearInterval(intervalId.value);
-}
+  computed: {
+    firstPlaceDispatchers() {
+      if (this.stats.mostActiveDispatchers.length == 0) return [];
+      const maxCount = this.stats.mostActiveDispatchers[0].count;

-defineExpose({
-  startFetchingDailyStats,
-  stopFetchingDailyStats,
+      return this.stats.mostActiveDispatchers.filter((disp) => disp.count === maxCount);
+    },
+  },
+
+  methods: {
+    async fetchDailyTimetableStats() {
+      try {
+        const res: ITimetablesDailyStatsResponse = await (
+          await axios.get(`${URLs.stacjownikAPI}/api/getDailyTimetableStats`)
+        ).data;
+
+        this.stats = {
+          totalTimetables: res.totalTimetables,
+          distanceSum: res.distanceSum,
+          distanceAvg: res.distanceAvg,
+          timetableAuthor: res.maxTimetable?.authorName || '',
+          timetableDriver: res.maxTimetable?.driverName || '',
+          timetableId: res.maxTimetable?.id || 0,
+          timetableRouteDistance: res.maxTimetable?.routeDistance || 0,
+
+          mostActiveDispatchers: res.mostActiveDispatchers,
+          mostActiveDrivers: res.mostActiveDrivers,
+          longestDuties: res.longestDuties,
+        };
+
+        this.statsStatus = DataStatus.Loaded;
+      } catch (error) {
+        console.error('Ups! Wystąpił błąd podczas pobierania statystyk rozkładów jazdy...');
+        this.statsStatus = DataStatus.Error;
+      }
+    },
+
+    startFetchingDailyStats() {
+      this.fetchDailyTimetableStats();
+
+      if (this.intervalId != -1) return;
+
+      this.intervalId = setInterval(this.fetchDailyTimetableStats, 60000);
+    },
+
+    stopFetchingDailyStats() {
+      clearInterval(this.intervalId);
+      this.intervalId = -1;
+    },
+  },
 });
 </script>

 <style lang="scss" scoped>
+@import '../../styles/responsive.scss';
+
 .daily-stats {
  text-align: left;
 }
 .daily-stats > span[data-active='0'] {
  opacity: 0.75;
 }
+
+.stats-list a {
+  text-decoration: underline;
+}
+
+@include smallScreen {
+  .daily-stats {
+    text-align: justify;
+  }
+
+  h3 {
+    text-align: center;
+  }
+}
 </style>

@@ -1,53 +1,105 @@
 <template>
-  <transition-group class="journal-list" tag="ul" name="list-anim">
-    <li
-      v-for="item in computedDispatcherHistory"
-      :key="typeof item === 'string' ? item : item.timestampFrom + item.dispatcherId"
-      :class="{ sticky: typeof item == 'string' }"
-    >
-      <div v-if="typeof item == 'string'" class="journal_day">
-        {{ item }}
+  <div>
+    <transition name="status-anim" mode="out-in">
+      <div :key="dataStatus">
+        <div class="journal_warning" v-if="store.isOffline">
+          {{ $t('app.offline') }}
+        </div>
+
+        <Loading v-else-if="dataStatus == DataStatus.Loading" />
+
+        <div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
+          {{ $t('app.error') }}
+        </div>
+
+        <div class="journal_warning" v-else-if="dispatcherHistory.length == 0">
+          {{ $t('app.no-result') }}
+        </div>
+
+        <div v-else>
+          <table class="scenery-history-table">
+            <thead>
+              <th>{{ $t('journal.history-name') }}</th>
+              <th>{{ $t('journal.history-hash') }}</th>
+              <th>{{ $t('journal.history-dispatcher') }}</th>
+              <th>{{ $t('journal.history-level') }}</th>
+              <th>{{ $t('journal.history-rate') }}</th>
+              <th>{{ $t('journal.history-region') }}</th>
+              <th>{{ $t('journal.history-date') }}</th>
+            </thead>
+
+            <tbody>
+              <transition-group name="list-anim">
+                <tr v-for="historyItem in dispatcherHistory" :key="historyItem.id">
+                  <td>
+                    <router-link :to="`/journal/dispatchers?sceneryName=${historyItem.stationName}`">
+                      <b>{{ historyItem.stationName }}</b>
+                    </router-link>
+                  </td>
+                  <td>#{{ historyItem.stationHash }}</td>
+                  <td>
+                    <router-link :to="`/journal/dispatchers?dispatcherName=${historyItem.dispatcherName}`">
+                      <b>{{ historyItem.dispatcherName }}</b>
+                    </router-link>
+                  </td>
+                  <td>
+                    <b
+                      v-if="historyItem.dispatcherLevel !== null"
+                      class="level-badge dispatcher"
+                      :style="calculateExpStyle(historyItem.dispatcherLevel, historyItem.dispatcherIsSupporter)"
+                    >
+                      {{ historyItem.dispatcherLevel >= 2 ? historyItem.dispatcherLevel : 'L' }}
+                    </b>
+                  </td>
+                  <td class="text--primary">
+                    <b>{{ historyItem.dispatcherRate }}</b>
+                  </td>
+                  <td>
+                    <b class="region-badge" :aria-describedby="historyItem.region">{{
+                      regions.find((r) => r.id == historyItem.region)?.value || '???'
+                    }}</b>
+                  </td>
+                  <td style="min-width: 200px" class="time">
+                    <span v-if="historyItem.timestampTo" class="text--offline">
+                      <b>{{ $d(historyItem.timestampFrom) }}</b>
+                      {{ timestampToString(historyItem.timestampFrom) }}
+                      - {{ timestampToString(historyItem.timestampTo) }} ({{
+                        calculateDuration(historyItem.currentDuration)
+                      }})
+                    </span>
+                    <span class="dispatcher-online" v-else>
+                      <b class="text--online">
+                        <router-link :to="`/scenery?station=${historyItem.stationName}`">{{
+                          $t('journal.online-since')
+                        }}</router-link>
+                        {{ timestampToString(historyItem.timestampFrom) }}
+                      </b>
+                      ({{ calculateDuration(historyItem.currentDuration) }})
+                    </span>
+                  </td>
+                </tr>
+              </transition-group>
+            </tbody>
+          </table>
+
+          <AddDataButton
+            :list="dispatcherHistory"
+            :scrollDataLoaded="scrollDataLoaded"
+            :scrollNoMoreData="scrollNoMoreData"
+            @addHistoryData="addHistoryData"
+          />
+        </div>
      </div>
+    </transition>

-      <div
-        v-else
-        class="journal_item"
-        :class="{ online: item.isOnline }"
-        @click="navigateToScenery(item.stationName, item.isOnline)"
-        @keydown.enter="navigateToScenery(item.stationName, item.isOnline)"
-        tabindex="0"
-      >
-        <span class="item-general">
-          <b
-            v-if="item.dispatcherLevel !== null"
-            class="level-badge dispatcher"
-            :style="calculateExpStyle(item.dispatcherLevel, item.dispatcherIsSupporter)"
-          >
-            {{ item.dispatcherLevel >= 2 ? item.dispatcherLevel : 'L' }}
-          </b>
+    <div class="journal_warning" v-if="scrollNoMoreData">
+      {{ $t('journal.no-further-data') }}
+    </div>

-          <b class="text--primary">{{ item.dispatcherName }}</b> &bull; <b>{{ item.stationName }}</b>
-          <span class="text--grayed">&nbsp;#{{ item.stationHash }}&nbsp;</span>
-          <span class="region-badge" :class="item.region">PL1</span>
-        </span>
-
-        <span class="item-time">
-          <span :data-status="item.isOnline"> {{ item.isOnline ? $t('journal.online-since') : 'OFFLINE' }}&nbsp; </span>
-          <span>
-            {{ new Date(item.timestampFrom).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
-          </span>
-
-          <span v-if="item.currentDuration && item.isOnline"> ({{ calculateDuration(item.currentDuration) }}) </span>
-
-          <span v-if="item.timestampTo">
-            &gt;
-            {{ new Date(item.timestampTo).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
-            ({{ $t('journal.duty-lasted') }} {{ calculateDuration(item.currentDuration!) }})
-          </span>
-        </span>
-      </div>
-    </li>
-  </transition-group>
+    <div class="journal_warning" v-else-if="!scrollDataLoaded">
+      {{ $t('journal.loading-further-data') }}
+    </div>
+  </div>
 </template>

 <script lang="ts">
@@ -55,19 +107,49 @@ 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';
+import { DataStatus } from '../../scripts/enums/DataStatus';
+import { useStore } from '../../store/store';
+import Loading from '../Global/Loading.vue';
+import { regions } from '../../data/options.json';
+import AddDataButton from '../Global/AddDataButton.vue';

 export default defineComponent({
+  components: { Loading, AddDataButton },
+
+  mixins: [dateMixin, styleMixin, imageMixin],
+
  props: {
    dispatcherHistory: {
      type: Array as PropType<DispatcherHistory[]>,
      required: true,
    },
+    scrollNoMoreData: {
+      type: Boolean,
+    },
+    scrollDataLoaded: {
+      type: Boolean,
+    },
+    addHistoryData: {
+      type: Function as PropType<() => void>,
+    },
+    dataStatus: {
+      type: Number as PropType<DataStatus>,
+    },
  },

-  mixins: [dateMixin, styleMixin],
+  data() {
+    return {
+      DataStatus,
+      store: useStore(),
+      regions,
+    };
+  },

  computed: {
    computedDispatcherHistory() {
+      console.log(this.dispatcherHistory.length);
+
      return this.dispatcherHistory.reduce((acc, historyItem, i) => {
        if (this.isAnotherDay(i - 1, i)) acc.push(new Date(historyItem.timestampFrom).toLocaleDateString('pl-PL'));
        acc.push(historyItem);
@@ -100,64 +182,60 @@ export default defineComponent({
@import '../../styles/animations.scss';
@import '../../styles/responsive.scss';
@import '../../styles/badge.scss';
+@import '../../styles/variables.scss';
@import '../../styles/JournalSection.scss';

-li.sticky {
-  position: sticky;
-  top: 0;
-}
+table.scenery-history-table {
+  --_bg-table: #111;
+  --_bg-head: #101010;
+  --_bg-row: #2f2f2f;

-.journal_item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  text-align: left;
+  width: 100%;
+  border-collapse: collapse;
+  position: relative;
+  text-align: center;

-  gap: 0.25em;
+  margin-bottom: 1em;

-  line-height: 1.7em;
-  padding: 0.75em;
-
-  &.online {
-    cursor: pointer;
+  thead {
+    position: sticky;
+    top: 0;
+    background-color: var(--_bg-head);
  }

-  span[data-status='true'] {
+  th {
+    padding: 0.5em;
+  }
+
+  tr {
+    background-color: var(--_bg-row);
+    border-bottom: 2px solid black;
+
+    &:last-child {
+      border: none;
+    }
+  }
+
+  td {
+    padding: 0.75em;
+
+    .level-badge {
+      margin: 0 auto;
+    }
+  }
+
+  @media screen and (max-width: 550px) {
+    font-size: 0.9em;
+  }
+}
+
+.text {
+  &--online {
    color: springgreen;
  }

-  span[data-status='false'] {
-    color: salmon;
-  }
-}
-
-.item-general {
-  display: flex;
-  align-items: center;
-  gap: 0.25em;
-  flex-wrap: wrap;
-
-
-  .level-badge {
-    margin-right: 0.25em;
-  }
-}
-
-.journal_day {
-  margin-bottom: 1em;
-  padding: 0.5em;
-  font-weight: bold;
-
-  background-color: #333;
-
-  span {
-    position: relative;
-    background-color: inherit;
-    z-index: 10;
-    padding-right: 1em;
-
-    font-weight: bold;
+  &--offline {
+    color: #ddd;
  }
 }
 </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
-              v-for="filter in filters"
-              class="filter-option btn--option"
-              :class="{ checked: journalFilterActive.id === filter.id }"
-              :id="filter.id"
-              @click="onFilterChange(filter)"
-            >
-              {{ $t(`options.filter-${filter.id}`) }}
+
+          <div class="options_filter-sections" v-if="filters.length != 0 && filterList">
+            <section class="filter-section" v-for="section in JournalFilterSection">
+              <p>{{ $t(`options.filter-section-${section}`) }}</p>
+
+              <div class="options_filters">
+                <button
+                  v-for="filter in filterList.filter((f) => f.filterSection == section)"
+                  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) {
-      this.journalFilterActive = filter;
+    onFilterChange(filter: JournalFilter) {
+      // this.journalFilterActive = filter;
+      this.filterList?.filter((f) => f.filterSection === filter.filterSection).forEach((f) => (f.isActive = false));
+      filter.isActive = true;
+
      this.$emit('onSearchConfirm');
    },

@@ -1,20 +1,22 @@
 <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) }}
      </button>
    </div>
-    
+
    <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: [
@@ -48,7 +49,7 @@ let data = reactive({
    {
      name: 'driver',
      titlePath: 'journal.driver-stats-title',
-      inactive: true,
+      // inactive: true,
    },
  ] as { name: TStatTab; titlePath: string; inactive?: boolean }[],
 });
@@ -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(() => {
-  dailyStatsComp.value?.startFetchingDailyStats();
-});
-
-onDeactivated(() => {
-  dailyStatsComp.value?.stopFetchingDailyStats();
-});
+function toggleStatsOpen(open: boolean) {
+  areStatsOpen.value = open;
+}

 watch(
  computed(() => store.driverStatsData),
  (statsData) => {
-    data.tabs[1].inactive = statsData ? false : true;
-
-    lastClickedTab.value = statsData ? 'driver' : 'daily';
-    if (statsData) areStatsOpen.value = true;
-    if (!statsData) areStatsOpen.value = lastDailyStatsOpen.value;
+    store.currentStatsTab = statsData ? 'driver' : lastClickedTab.value;
+    areStatsOpen.value = statsData ? true : lastClickedTab.value !== null;
  }
 );
+
+onMounted(() => {
+  if (StorageManager.getBooleanValue('dailyStatsOpen')) {
+    areStatsOpen.value = true;
+    store.currentStatsTab = 'daily';
+  }
+});
 </script>

 <style lang="scss" scoped>
@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <transition name="status-anim" mode="out-in">
+      <div :key="dataStatus">
+        <div class="journal_warning" v-if="store.isOffline">
+          {{ $t('app.offline') }}
+        </div>
+
+        <Loading v-else-if="dataStatus == DataStatus.Loading" />
+
+        <div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
+          {{ $t('app.error') }}
+        </div>
+
+        <div v-else-if="timetableHistory.length == 0" class="journal_warning">
+          {{ $t('app.no-result') }}
+        </div>
+
+        <div v-else>
+          <TimetableHistoryList :timetableHistory="timetableHistory" />
+
+          <AddDataButton
+            :list="timetableHistory"
+            :scrollDataLoaded="scrollDataLoaded"
+            :scrollNoMoreData="scrollNoMoreData"
+            @addHistoryData="addHistoryData"
+          />
+        </div>
+      </div>
+    </transition>
+
+    <div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div>
+    <div class="journal_warning" v-else-if="!scrollDataLoaded">{{ $t('journal.loading-further-data') }}</div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { DataStatus } from '../../../scripts/enums/DataStatus';
+import { TimetableHistory } from '../../../scripts/interfaces/api/TimetablesAPIData';
+import { useStore } from '../../../store/store';
+
+import Loading from '../../Global/Loading.vue';
+import ProgressBar from '../../Global/ProgressBar.vue';
+import AddDataButton from '../../Global/AddDataButton.vue';
+import TimetableHistoryList from './TimetableHistoryList.vue';
+
+export default defineComponent({
+  components: { ProgressBar, Loading, AddDataButton, TimetableHistoryList },
+
+  props: {
+    timetableHistory: {
+      type: Array as PropType<TimetableHistory[]>,
+      required: true,
+    },
+    scrollNoMoreData: {
+      type: Boolean,
+    },
+    scrollDataLoaded: {
+      type: Boolean,
+    },
+    addHistoryData: {
+      type: Function as PropType<() => void>,
+    },
+    dataStatus: {
+      type: Number as PropType<DataStatus>,
+    },
+  },
+
+  data() {
+    return {
+      DataStatus,
+      store: useStore(),
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../../styles/JournalSection.scss';
+@import '../../../styles/animations.scss';
+</style>
@@ -0,0 +1,165 @@
+<template>
+  <div class="item-extra" v-if="timetable.stockString && timetable.stockMass && showExtraInfo">
+    <hr />
+
+    <div class="stock-specs">
+      <span class="badge">
+        <span>{{ $t('journal.dispatcher-name') }}</span>
+        <span>{{ timetable.authorName }}</span>
+      </span>
+    </div>
+
+    <div class="stock-specs">
+      <span class="badge">
+        <span>{{ $t('journal.stock-max-speed') }}</span>
+        <span>{{ timetable.maxSpeed }}km/h</span>
+      </span>
+
+      <span class="badge">
+        <span>{{ $t('journal.stock-length') }}</span>
+        <span>
+          {{ currentHistoryIndex == 0 ? timetable.stockLength : stockHistory[currentHistoryIndex].stockLength || timetable.stockLength }}m
+        </span>
+      </span>
+
+      <span class="badge">
+        <span>{{ $t('journal.stock-mass') }}</span>
+        <span>
+          {{
+            Math.floor((currentHistoryIndex == 0 ? timetable.stockMass! : stockHistory[currentHistoryIndex].stockMass || timetable.stockMass) / 1000)
+          }}t
+        </span>
+      </span>
+    </div>
+
+    <!-- Historia zmian w składzie -->
+    <div class="stock-history" v-if="stockHistory.length > 1">
+      <button class="btn--action" v-for="(sh, i) in stockHistory" :data-checked="i == currentHistoryIndex" @click.stop="currentHistoryIndex = i">
+        {{ sh.updatedAt }}
+      </button>
+    </div>
+
+    <!-- <StockList :trainStockList="currentHistoryIndex == 0 ? timetable.stockString : stockHistory[currentHistoryIndex].stockString).split(';')" /> -->
+    <StockList :trainStockList="(currentHistoryIndex == 0 ? timetable.stockString : stockHistory[currentHistoryIndex].stockString).split(';') " />
+
+    <!-- <ul class="stock-list">
+      <li
+        v-for="(stockName, i) in (currentHistoryIndex == 0 ? timetable.stockString : stockHistory[currentHistoryIndex].stockString).split(';')"
+        :key="i"
+      >
+        <div>{{ stockName.split(':')[0].split('_').splice(0, 2).join(' ') }} {{ stockName.split(':')[1] }}</div>
+        <TrainThumbnail :name="stockName" />
+      </li>
+    </ul> -->
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue';
+import { TimetableHistory } from '../../../scripts/interfaces/api/TimetablesAPIData';
+import imageMixin from '../../../mixins/imageMixin';
+import TrainThumbnail from '../../Global/TrainThumbnail.vue';
+import StockList from '../../Global/StockList.vue';
+
+export default defineComponent({
+  mixins: [imageMixin],
+  props: {
+    showExtraInfo: {
+      type: Boolean,
+      required: true,
+    },
+    timetable: {
+      type: Object as PropType<TimetableHistory>,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      currentHistoryIndex: 0,
+    };
+  },
+  computed: {
+    stockHistory() {
+      return this.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,
+          };
+        });
+    },
+  },
+  methods: {
+    onImageError(e: Event) {
+      const imageEl = e.target as HTMLImageElement;
+      imageEl.src = this.getImage('unknown.png');
+    },
+  },
+  components: { TrainThumbnail, StockList },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../../styles/variables.scss';
+@import '../../../styles/responsive.scss';
+@import '../../../styles/badge.scss';
+
+.item-extra {
+  margin-top: 0.5em;
+}
+
+.stock-history {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  margin-top: 1em;
+
+  button[data-checked='true'] {
+    color: $accentCol;
+  }
+}
+
+.stock-specs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  margin-top: 0.5em;
+
+  .badge {
+    margin: 0;
+
+    span:last-child {
+      color: black;
+      background-color: $accentCol;
+    }
+  }
+
+  @include smallScreen() {
+    justify-content: center;
+  }
+}
+
+ul.stock-list {
+  display: flex;
+  align-items: flex-end;
+  overflow: auto;
+
+  padding-bottom: 0.5em;
+
+  li > div {
+    margin: 1em 0;
+
+    text-align: center;
+    color: #aaa;
+    font-size: 0.9em;
+  }
+}
+</style>
@@ -0,0 +1,137 @@
+<template>
+  <div class="item-general">
+    <span
+      class="general-train"
+      tabindex="0"
+      @click.stop="showTimetable(timetable, $event.currentTarget)"
+      @keydown.enter="showTimetable(timetable, $event.currentTarget)"
+    >
+      <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 }}
+        </strong>
+        <strong>&nbsp;{{ timetable.trainNo }}</strong>
+      </span>
+      &bull;
+      <strong
+        v-if="timetable.driverLevel !== null"
+        class="level-badge driver"
+        :style="calculateExpStyle(timetable.driverLevel, timetable.driverIsSupporter)"
+      >
+        {{ timetable.driverLevel < 2 ? 'L' : `${timetable.driverLevel}` }}
+      </strong>
+
+      <strong>{{ timetable.driverName }}</strong>
+    </span>
+
+    <span class="general-time">
+      <b class="info-date"
+        >{{
+          new Date(timetable.createdAt).getTime() - new Date(timetable.beginDate).getTime() < 0
+            ? localeDateTime(timetable.createdAt, $i18n.locale)
+            : localeDateTime(timetable.beginDate, $i18n.locale)
+        }}
+      </b>
+
+      <b
+        class="info-badge"
+        :class="{
+          fulfilled: timetable.fulfilled,
+          terminated: timetable.terminated && !timetable.fulfilled,
+          active: !timetable.terminated,
+        }"
+      >
+        {{
+          !timetable.terminated
+            ? $t('journal.timetable-active')
+            : timetable.fulfilled
+            ? $t('journal.timetable-fulfilled')
+            : `${$t('journal.timetable-abandoned')} ${localeTime(timetable.endDate, $i18n.locale)}`
+        }}
+      </b>
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue';
+import { TimetableHistory } from '../../../scripts/interfaces/api/TimetablesAPIData';
+
+import dateMixin from '../../../mixins/dateMixin';
+import modalTrainMixin from '../../../mixins/modalTrainMixin';
+import styleMixin from '../../../mixins/styleMixin';
+
+export default defineComponent({
+  mixins: [dateMixin, modalTrainMixin, styleMixin],
+
+  props: {
+    timetable: {
+      type: Object as PropType<TimetableHistory>,
+      required: true,
+    },
+  },
+
+  methods: {
+    showTimetable(timetable: TimetableHistory, target: EventTarget | null) {
+      if (timetable?.terminated) return;
+
+      this.selectModalTrain(timetable.driverName + timetable.trainNo.toString(), target);
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../../styles/responsive.scss';
+@import '../../../styles/badge.scss';
+
+.item-general {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+
+  gap: 0.5em;
+  margin-bottom: 0.5em;
+
+  @include smallScreen() {
+    justify-content: center;
+  }
+}
+
+.info-date {
+  margin-right: 0.5em;
+}
+
+.info-badge {
+  padding: 0.05em 0.35em;
+  color: black;
+
+  &.terminated {
+    background-color: salmon;
+  }
+
+  &.fulfilled {
+    background-color: lightgreen;
+  }
+
+  &.active {
+    background-color: lightblue;
+  }
+}
+
+.general-train {
+  cursor: pointer;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25em;
+}
+</style>
@@ -0,0 +1,100 @@
+<template>
+  <ul class="journal-list">
+    <transition-group name="list-anim">
+      <li
+        v-for="{ timetable, showExtraInfo } in computedTimetableHistory"
+        class="journal_item"
+        :key="timetable.id"
+        @click="showExtraInfo.value = !showExtraInfo.value"
+      >
+        <div class="journal_item-info">
+          <!-- General -->
+          <TimetableGeneral :timetable="timetable" />
+          <!-- Route -->
+          <span class="item-route">
+            <b>{{ timetable.route.replace('|', ' - ') }}</b>
+          </span>
+
+          <hr />
+          <!-- Stops -->
+          <TimetableStops :timetable="timetable" :showExtraInfo="showExtraInfo.value" />
+          <!-- Status -->
+          <TimetableStatus :timetable="timetable" />
+
+          <button class="btn--option btn--show">
+            {{ $t('journal.stock-info') }}
+            <img :src="getIcon(`arrow-${showExtraInfo.value ? 'asc' : 'desc'}`)" alt="Arrow" />
+          </button>
+          <!-- Extra -->
+          <TimetableExtra :timetable="timetable" :showExtraInfo="showExtraInfo.value" />
+        </div>
+      </li>
+    </transition-group>
+  </ul>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent, ref } from 'vue';
+import imageMixin from '../../../mixins/imageMixin';
+import { TimetableHistory } from '../../../scripts/interfaces/api/TimetablesAPIData';
+
+import TimetableGeneral from './TimetableGeneral.vue';
+import TimetableStops from './TimetableStops.vue';
+import TimetableStatus from './TimetableStatus.vue';
+import TimetableExtra from './TimetableExtra.vue';
+
+export default defineComponent({
+  mixins: [imageMixin],
+  props: {
+    timetableHistory: {
+      type: Array as PropType<TimetableHistory[]>,
+      required: true,
+    },
+  },
+  computed: {
+    computedTimetableHistory() {
+      return this.timetableHistory.map((timetable) => ({
+        timetable,
+        showExtraInfo: ref(false),
+      }));
+    },
+  },
+  methods: {},
+  components: { TimetableGeneral, TimetableStops, TimetableStatus, TimetableExtra },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../../styles/variables.scss';
+@import '../../../styles/responsive.scss';
+@import '../../../styles/JournalSection.scss';
+
+.btn--show {
+  display: flex;
+  font-weight: bold;
+  padding: 0.2em 0.45em;
+
+  img {
+    height: 1.3em;
+  }
+}
+
+hr {
+  margin: 0.25em 0;
+}
+
+@include smallScreen {
+  .journal_item-info {
+    text-align: center;
+  }
+
+  .item-route {
+    display: flex;
+    justify-content: center;
+  }
+
+  .btn--show {
+    margin: 1em auto 0 auto;
+  }
+}
+</style>
@@ -0,0 +1,68 @@
+<template>
+  <div class="item-status" style="margin: 0.5em 0">
+    <ProgressBar
+      :progressPercent="~~((timetable.currentDistance / timetable.routeDistance) * 100)"
+      :progressType="!timetable.fulfilled && timetable.terminated ? 'abandoned' : ''"
+    />
+
+    <span>
+      <span :style="{ color: timetable.fulfilled ? 'lightgreen' : timetable.terminated ? 'salmon' : '' }">
+        {{ timetable.currentDistance + ' km' }}
+      </span>
+      <span> / </span>
+      <span class="text--primary">{{ timetable.routeDistance }} km</span>
+      |
+      <span class="text--grayed">{{ timetable.confirmedStopsCount }}/{{ timetable.allStopsCount }}</span>
+    </span>
+
+    <span class="text--grayed" v-if="timetable.currentSceneryName">
+      <b>
+        {{ $t(`journal.${timetable.terminated ? 'last-seen-at' : 'currently-at'}`) }}
+        {{ timetable.currentSceneryName.replace(/.[a-zA-Z0-9]+.sc/, '') }}
+
+        <span v-if="timetable.currentLocation[0] || timetable.currentLocation[1]">&lpar;</span>
+
+        <span v-if="timetable.currentLocation[1]">
+          {{ $t('journal.timetable-location-route') }} {{ timetable.currentLocation[1] }}
+        </span>
+
+        <span v-else-if="timetable.currentLocation[0]">
+          {{ $t('journal.timetable-location-signal') }} {{ timetable.currentLocation[0] }}
+        </span>
+
+        <span v-if="timetable.currentLocation[0] || timetable.currentLocation[1]">&rpar;</span>
+      </b>
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue';
+import { TimetableHistory } from '../../../scripts/interfaces/api/TimetablesAPIData';
+import ProgressBar from '../../Global/ProgressBar.vue';
+
+export default defineComponent({
+  components: { ProgressBar },
+  props: {
+    timetable: {
+      type: Object as PropType<TimetableHistory>,
+      required: true,
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../../styles/responsive.scss';
+
+.item-status {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5em;
+
+  @include smallScreen() {
+    justify-content: center;
+  }
+}
+</style>
@@ -0,0 +1,107 @@
+<template>
+  <div class="stop-list" v-if="showExtraInfo == true">
+    <span
+      v-for="(stop, i) in timetableStops.filter((_, i) =>
+        !showExtraInfo ? i == 0 || i == timetableStops.length - 1 : true
+      )"
+      class="stop-list-item"
+      :key="stop.stopName"
+      :data-confirmed="stop.confirmed"
+    >
+      <span v-if="i > 0">
+        &gt;
+        <span v-if="!showExtraInfo && i == 1 && timetableStops.length > 2">
+          ... (+{{ timetableStops.length - 2 }}) &gt;
+        </span>
+      </span>
+
+      <span class="stop-name">{{ stop.stopName }}</span>
+      <span v-html="stop.html"></span>
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue';
+import dateMixin from '../../../mixins/dateMixin';
+
+import { TimetableHistory } from '../../../scripts/interfaces/api/TimetablesAPIData';
+
+export default defineComponent({
+  mixins: [dateMixin],
+
+  props: {
+    showExtraInfo: {
+      type: Boolean,
+      required: true
+    },
+
+    timetable: {
+      type: Object as PropType<TimetableHistory>,
+      required: true,
+    },
+  },
+
+  computed: {
+    timetableStops() {
+      const timetable = this.timetable;
+
+      const stopNames = timetable.sceneriesString.split('%');
+
+      const beginDateHTML = ` (o. ${
+        timetable.beginDate != timetable.scheduledBeginDate
+          ? `<s class="text--grayed">${this.localeTime(timetable.beginDate, this.$i18n.locale)}</s>`
+          : ''
+      } <span>${this.localeTime(timetable.scheduledBeginDate, this.$i18n.locale)}</span>)`;
+
+      const endDateHTML = ` (p. ${
+        timetable.endDate != timetable.scheduledEndDate && timetable.fulfilled
+          ? `<s class="text--grayed">${this.localeTime(timetable.endDate, this.$i18n.locale)}</s>`
+          : ''
+      } <span>${this.localeTime(timetable.scheduledEndDate, this.$i18n.locale)}</span>)`;
+
+      return stopNames.map((stopName, i) => {
+        const confirmed = i < timetable.confirmedStopsCount;
+        if (i == 0) return { stopName, html: beginDateHTML, confirmed };
+        if (i == stopNames.length - 1) return { stopName, html: endDateHTML, confirmed };
+
+        const departureDateScheduled = this.stringToDate(timetable.checkpointDeparturesScheduled?.at(i));
+        const departureDateReal = this.stringToDate(timetable.checkpointDepartures?.at(i));
+        const arrivalDateScheduled = this.stringToDate(timetable.checkpointArrivalsScheduled?.at(i));
+        const arrivalDateReal = this.stringToDate(timetable.checkpointArrivals?.at(i));
+        const arrivalHTML =
+          (arrivalDateReal && arrivalDateScheduled && arrivalDateReal?.getTime() != arrivalDateScheduled?.getTime()
+            ? `<s class="text--grayed">${this.parseDateToTimeString(arrivalDateScheduled)}</s> `
+            : '') + this.parseDateToTimeString(arrivalDateReal || arrivalDateScheduled);
+        const departureHTML =
+          (departureDateReal &&
+          departureDateScheduled &&
+          departureDateReal?.getTime() != departureDateScheduled?.getTime()
+            ? `<s class="text--grayed">${this.parseDateToTimeString(departureDateScheduled)}</s> `
+            : '') + this.parseDateToTimeString(departureDateReal || departureDateScheduled);
+        let html = `${arrivalHTML}${departureHTML ? ` / ${departureHTML}` : ''}`;
+        if (html) html = ` (${html})`;
+        return { stopName, html, confirmed };
+      });
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.stop-list {
+  word-wrap: break-word;
+  gap: 0.25em;
+  font-size: 0.95em;
+
+  color: #adadad;
+
+  &-item[data-confirmed='true'] {
+    color: lightgreen;
+
+    .stop-name {
+      font-weight: bold;
+    }
+  }
+}
+</style>
@@ -1,331 +0,0 @@
-<template>
-  <transition-group class="journal-list" tag="ul" name="list-anim">
-    <li
-      v-for="{ timetable, sceneryList, ...item } in computedTimetableHistory"
-      class="journal_item"
-      :key="timetable.id"
-    >
-      <div class="journal_item-info">
-        <div class="info-general">
-          <span
-            class="general-train"
-            tabindex="0"
-            @click="showTimetable(timetable)"
-            @keydown.enter="showTimetable(timetable)"
-            style="cursor: pointer"
-          >
-            <span class="text--grayed">#{{ timetable.id }}</span>
-            <span>
-              <strong class="text--primary">
-                {{ timetable.trainCategoryCode }}
-              </strong>
-              <strong>&nbsp;{{ timetable.trainNo }}</strong>
-            </span>
-            &bull;
-            <strong
-              v-if="timetable.driverLevel !== null"
-              class="level-badge driver"
-              :style="calculateExpStyle(timetable.driverLevel, timetable.driverIsSupporter)"
-            >
-              {{ timetable.driverLevel < 2 ? 'L' : `${timetable.driverLevel}` }}
-            </strong>
-
-            <strong>{{ timetable.driverName }}</strong>
-          </span>
-
-          <span class="general-time">
-            <b class="info-date">{{ localeDay(timetable.beginDate, $i18n.locale) }}</b>
-            <b
-              class="info-status"
-              :class="{
-                fulfilled: timetable.fulfilled || timetable.currentDistance >= timetable.routeDistance * 0.9,
-                terminated: timetable.terminated && !timetable.fulfilled,
-                active: !timetable.terminated,
-              }"
-            >
-              {{
-                !timetable.terminated
-                  ? $t('journal.timetable-active')
-                  : timetable.fulfilled || timetable.currentDistance >= timetable.routeDistance * 0.9
-                  ? $t('journal.timetable-fulfilled')
-                  : `${$t('journal.timetable-abandoned')} ${localeTime(timetable.endDate, $i18n.locale)}`
-              }}
-            </b>
-          </span>
-        </div>
-        <div class="info-route">
-          <b>{{ timetable.route.replace('|', ' - ') }}</b>
-        </div>
-        <hr />
-        <div class="scenery-list">
-          <span v-for="(scenery, i) in sceneryList" :key="scenery.name" :class="{ confirmed: scenery.confirmed }">
-            <span v-if="i > 0"> &gt;</span>
-            {{ scenery.name }}
-            <!-- Data odjazdu ze stacji początkowej -->
-            <span v-if="i == 0" v-html="scenery.beginDateHTML"></span>
-            <!-- Data przyjazdu do stacji końcowej -->
-            <span v-if="i == sceneryList.length - 1" v-html="scenery.endDateHTML"> </span>
-          </span>
-        </div>
-        <!-- Status RJ -->
-        <div style="margin: 0.5em 0">
-          <span>
-            <b>{{ $t('journal.route-length') }}</b>
-            {{ !timetable.fulfilled ? timetable.currentDistance + ' /' : '' }}
-            {{ timetable.routeDistance }} km
-          </span>
-          &bull;
-          <span>
-            <b>{{ $t('journal.station-count') }}</b>
-            {{ timetable.confirmedStopsCount }} /
-            {{ timetable.allStopsCount }}
-          </span>
-          <span class="text--grayed" v-if="!timetable.fulfilled && timetable.currentSceneryName">
-            &bull;
-            <b>
-              {{ $t(`journal.${timetable.terminated ? 'last-seen-at' : 'currently-at'}`) }}
-              {{ timetable.currentSceneryName.replace(/.[a-zA-Z0-9]+.sc/, '') }}
-            </b>
-          </span>
-        </div>
-        <!-- Nick dyżurnego -->
-        <div v-if="timetable.authorName">
-          <b class="text--grayed">{{ $t('journal.dispatcher-name') }}&nbsp;</b>
-          <router-link class="dispatcher-link" :to="`/journal/dispatchers?dispatcherName=${timetable.authorName}`">
-            <b>{{ timetable.authorName }}</b>
-          </router-link>
-        </div>
-
-        <button
-          v-if="timetable.stockString"
-          class="btn--option btn--show"
-          @click="item.showStock.value = !item.showStock.value"
-        >
-          {{ $t('journal.stock-info') }}
-          <img :src="getIcon(`arrow-${item.showStock.value ? 'asc' : 'desc'}`)" alt="Arrow" />
-        </button>
-
-        <div class="info-extended" v-if="timetable.stockString && item.showStock.value">
-          <hr />
-          <div>
-            <span class="badge info-badge">
-              <span>{{ $t('journal.stock-max-speed') }}</span>
-              <span>{{ timetable.maxSpeed }}km/h</span>
-            </span>
-            <span class="badge info-badge">
-              <span>{{ $t('journal.stock-length') }}</span>
-              <span>{{ timetable.stockLength }}m</span>
-            </span>
-            <span class="badge info-badge">
-              <span>{{ $t('journal.stock-mass') }}</span>
-              <span>{{ Math.floor(timetable.stockMass! / 1000) }}t</span>
-            </span>
-          </div>
-          <ul class="stock-list">
-            <li v-for="(car, i) in timetable.stockString.split(';')" :key="i">
-              <img
-                @error="onImageError"
-                :src="`https://rj.td2.info.pl/dist/img/thumbnails/${car.split(':')[0]}.png`"
-                :alt="car"
-              />
-              <div>{{ car.replace(/_/g, ' ').split(':')[0] }}</div>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </li>
-  </transition-group>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType, ref } from 'vue';
-import dateMixin from '../../mixins/dateMixin';
-import imageMixin from '../../mixins/imageMixin';
-import modalTrainMixin from '../../mixins/modalTrainMixin';
-import styleMixin from '../../mixins/styleMixin';
-import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
-
-export default defineComponent({
-  props: {
-    timetableHistory: {
-      type: Array as PropType<TimetableHistory[]>,
-      required: true,
-    },
-  },
-
-  mixins: [dateMixin, imageMixin, modalTrainMixin, styleMixin],
-
-  computed: {
-    computedTimetableHistory() {
-      return this.timetableHistory.map((timetable) => ({
-        timetable,
-        sceneryList: this.getSceneryList(timetable),
-        showStock: ref(false),
-      }));
-    },
-  },
-
-  methods: {
-    getSceneryList(timetable: TimetableHistory) {
-      return timetable.sceneriesString.split('%').map((name, i) => {
-        const beginDateHTML =
-          ' (o. ' +
-          (timetable.beginDate != timetable.scheduledBeginDate
-            ? `<s class='text--grayed'>${this.localeTime(timetable.beginDate, this.$i18n.locale)}</s> `
-            : '') +
-          `<span>${this.localeTime(timetable.scheduledBeginDate, this.$i18n.locale)}</span>)`;
-
-        const endDateHTML =
-          ' (p. ' +
-          (timetable.endDate != timetable.scheduledEndDate && timetable.fulfilled
-            ? `<s class='text--grayed'>${this.localeTime(
-                timetable.fulfilled ? timetable.endDate : timetable.scheduledEndDate,
-                this.$i18n.locale
-              )}</s> `
-            : '') +
-          `<span>${this.localeTime(
-            timetable.fulfilled || (timetable.terminated && !timetable.fulfilled)
-              ? timetable.scheduledEndDate
-              : timetable.endDate,
-            this.$i18n.locale
-          )}</span>)`;
-
-        const abandonedDateHTML = ` (porz. ${this.localeTime(
-          timetable.fulfilled ? timetable.scheduledEndDate : timetable.endDate,
-          this.$i18n.locale
-        )})`;
-
-        return { name, confirmed: i < timetable.confirmedStopsCount, beginDateHTML, endDateHTML, abandonedDateHTML };
-      });
-    },
-
-    showTimetable(timetable: TimetableHistory) {
-      if (!timetable) return;
-      if (timetable.terminated) return;
-
-      this.selectModalTrain(timetable.driverName + timetable.trainNo.toString());
-    },
-
-    onImageError(e: Event) {
-      const imageEl = e.target as HTMLImageElement;
-      imageEl.src = this.getImage('unknown.png');
-    },
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/animations.scss';
-@import '../../styles/variables.scss';
-@import '../../styles/responsive.scss';
-@import '../../styles/badge.scss';
-@import '../../styles/JournalSection.scss';
-
-hr {
-  margin: 0.25em 0;
-}
-
-.info {
-  &-date {
-    margin-right: 0.5em;
-  }
-
-  &-status {
-    padding: 0.05em 0.35em;
-    color: black;
-
-    &.terminated {
-      background-color: salmon;
-    }
-
-    &.fulfilled {
-      background-color: lightgreen;
-    }
-
-    &.active {
-      background-color: lightblue;
-    }
-  }
-
-  &-general {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-
-    gap: 0.5em;
-    margin-bottom: 0.5em;
-  }
-
-  &-route {
-    margin: 0.25em 0;
-  }
-
-  &-extended {
-    margin-top: 0.5em;
-  }
-}
-
-.general-train {
-  display: flex;
-  align-items: center;
-  gap: 0.25em;
-}
-
-ul.stock-list {
-  display: flex;
-  align-items: flex-end;
-  overflow: auto;
-  padding-bottom: 0.5em;
-  margin-top: 1em;
-
-  li > div {
-    text-align: center;
-    color: #aaa;
-    font-size: 0.9em;
-  }
-}
-
-.scenery-list {
-  color: #adadad;
-  span.confirmed {
-    color: #a3eba3;
-  }
-}
-
-.btn--show {
-  display: flex;
-  margin-top: 1em;
-  font-weight: bold;
-  padding: 0.2em 0.45em;
-
-  img {
-    height: 1.3em;
-  }
-}
-
-.info-badge {
-  span:last-child {
-    color: black;
-    background-color: $accentCol;
-  }
-}
-
-@include smallScreen {
-  .info-general {
-    flex-direction: column;
-  }
-  .info-extended {
-    text-align: center;
-  }
-
-  .info-route {
-    display: flex;
-    justify-content: center;
-  }
-
-  .btn--show {
-    margin: 1em auto 0 auto;
-  }
-}
-</style>
@@ -1,39 +1,61 @@
 <template>
-  <section class="scenery-dispatchers-history scenery-section">
-    <Loading v-if="dataStatus != 2" />
+  <section class="scenery-table-section">
+    <Loading v-if="dataStatus != DataStatus.Loaded && historyList.length == 0" />
+    <div class="no-history" v-else-if="historyList.length == 0">{{ $t('scenery.history-list-empty') }}</div>

-    <div class="list-warning" v-else-if="dispatcherHistoryList.length == 0">{{ $t('scenery.history-list-empty') }}</div>
+    <table class="scenery-history-table" v-else="historyList.length">
+      <thead>
+        <th>{{ $t('scenery.dispatchers-history-hash') }}</th>
+        <th>{{ $t('scenery.dispatchers-history-dispatcher') }}</th>
+        <th>{{ $t('scenery.dispatchers-history-level') }}</th>
+        <th>{{ $t('scenery.dispatchers-history-rate') }}</th>
+        <th>{{ $t('scenery.dispatchers-history-date') }}</th>
+      </thead>

-    <ul class="history-list" v-else>
-      <li class="list-item" v-for="item in dispatcherHistoryList">
-        <router-link class="item-general" :to="`/journal/dispatchers?dispatcherName=${item.dispatcherName}`">
-          <span class="text--grayed">#{{ item.stationHash }}&nbsp;</span>
-          <b
-            v-if="item.dispatcherLevel !== null"
-            class="level-badge dispatcher"
-            :style="calculateExpStyle(item.dispatcherLevel, item.dispatcherIsSupporter)"
-          >
-            {{ item.dispatcherLevel >= 2 ? item.dispatcherLevel : 'L' }}
-          </b>
+      <tbody>
+        <tr v-for="historyItem in historyList">
+          <td>#{{ historyItem.stationHash }}</td>
+          <td>
+            <router-link :to="`/journal/dispatchers?dispatcherName=${historyItem.dispatcherName}`">
+              <b>{{ historyItem.dispatcherName }}</b>
+            </router-link>
+          </td>
+          <td>
+            <b
+              v-if="historyItem.dispatcherLevel !== null"
+              class="level-badge dispatcher"
+              :style="calculateExpStyle(historyItem.dispatcherLevel, historyItem.dispatcherIsSupporter)"
+            >
+              {{ historyItem.dispatcherLevel >= 2 ? historyItem.dispatcherLevel : 'L' }}
+            </b>
+          </td>
+          <td class="text--primary">
+            <b>{{ historyItem.dispatcherRate }}</b>
+          </td>
+          <td style="min-width: 300px">
+            <div v-if="historyItem.timestampTo">
+              <b>{{ $d(historyItem.timestampFrom) }}</b>

-          <b>{{ item.dispatcherName }}</b>
-        </router-link>
+              {{ timestampToString(historyItem.timestampFrom) }}
+              - {{ timestampToString(historyItem.timestampTo) }} ({{ calculateDuration(historyItem.currentDuration) }})
+            </div>

-        <div v-if="item.timestampTo">
-          <b>{{ $d(item.timestampFrom) }}</b>
-
-          {{ timestampToString(item.timestampFrom) }}
-          - {{ timestampToString(item.timestampTo) }} ({{ calculateDuration(item.currentDuration) }})
-        </div>
-
-        <div class="dispatcher-online" v-else>
-          {{ $t('journal.online-since') }}
-          <b>{{ timestampToString(item.timestampFrom) }}</b>
-          ({{ calculateDuration(item.currentDuration) }})
-        </div>
-      </li>
-    </ul>
+            <div class="dispatcher-online" v-else>
+              {{ $t('journal.online-since') }}
+              <b>{{ timestampToString(historyItem.timestampFrom) }}</b>
+              ({{ calculateDuration(historyItem.currentDuration) }})
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
  </section>
+
+  <div class="bottom-info">
+    <button class="btn btn--option" v-if="historyList.length > 0" @click="navigateToHistory">
+      {{ $t('scenery.bottom-info') }}
+    </button>
+  </div>
 </template>

 <script lang="ts">
@@ -46,37 +68,52 @@ import Station from '../../scripts/interfaces/Station';
 import { URLs } from '../../scripts/utils/apiURLs';
 import Loading from '../Global/Loading.vue';
 import styleMixin from '../../mixins/styleMixin';
+import listObserverMixin from '../../mixins/listObserverMixin';

 export default defineComponent({
  name: 'SceneryDispatchersHistory',
-  mixins: [dateMixin, styleMixin],
+  mixins: [dateMixin, styleMixin, listObserverMixin],
  props: {
    station: {
      type: Object as PropType<Station>,
      required: true,
    },
  },
+
  data() {
    return {
-      dispatcherHistoryList: [] as DispatcherHistory[],
+      historyList: [] as DispatcherHistory[],
      dataStatus: DataStatus.Loading,
+      DataStatus,
    };
  },
-  activated() {
-    this.fetchAPIData();
+
+  async activated() {
+    // if (this.historyList.length == 0) {
+    const fetchedHistory = await this.fetchAPIData();
+    if (fetchedHistory) this.historyList = fetchedHistory;
+    // }
  },
+
  methods: {
-    async fetchAPIData(countFrom = 0, countLimit = 30) {
+    async fetchAPIData(countFrom = 0, countLimit = 30): Promise<DispatcherHistory[] | null> {
      try {
+        this.dataStatus = DataStatus.Loading;
+
        const requestString = `${URLs.stacjownikAPI}/api/getDispatchers?stationName=${this.station.name}&countFrom=${countFrom}&countLimit=${countLimit}`;
        const historyAPIData: DispatcherHistory[] = await (await axios.get(requestString)).data;

-        this.dispatcherHistoryList = historyAPIData;
        this.dataStatus = DataStatus.Loaded;
+        return historyAPIData;
      } catch (error) {
+        this.dataStatus = DataStatus.Error;
        console.error(error);
+        return null;
      }
    },
+    navigateToHistory() {
+      this.$router.push(`/journal/dispatchers?sceneryName=${this.station.name}`);
+    },
  },
  components: { Loading },
 });
@@ -84,30 +121,10 @@ export default defineComponent({

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

-.history-list {
-  padding: 0 0.5em;
-}
-
-.list-item {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-
-  text-align: left;
-  background-color: #353535;
-  padding: 0.5em;
-  margin: 0.5em 0;
-
-  line-height: 1.5em;
-}
-
-.item-general {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 0.25em;
+.level-badge {
+  margin: 0 auto;
 }

 .dispatcher-online {
@@ -4,6 +4,10 @@
      {{ 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>
@@ -26,18 +30,26 @@ export default defineComponent({
@import '../../styles/variables.scss';
@import '../../styles/responsive.scss';

+.info-header {
+  margin-top: 1em;
+}
+
 .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>
+
@@ -2,7 +2,7 @@
  <div class="scenery-info">
    <section v-if="!timetableOnly">
      <div class="scenery-info-general" v-if="station.generalInfo">
-        <scenery-info-icons :station="station" />
+        <SceneryInfoIcons :station="station" />

        <div class="scenery-general-list">
          <span>
@@ -26,27 +26,16 @@
          </span>
          <span v-if="station.generalInfo.project">
            &bull; <b>{{ $t('scenery.project-title') }}: </b>
-            <a
-              style="color: salmon; text-decoration: underline; font-weight: bold"
-              :href="station.generalInfo.projectUrl"
-              target="_blank"
-              >{{ station.generalInfo.project }}</a
-            >
+            <a style="color: salmon; text-decoration: underline; font-weight: bold" :href="station.generalInfo.projectUrl" target="_blank">
+              {{ station.generalInfo.project }}
+            </a>
          </span>
        </div>

-        <scenery-info-routes :station="station" />
+        <SceneryInfoRoutes :station="station" />

        <div class="scenery-authors" v-if="station.generalInfo.authors && station.generalInfo.authors.length > 0">
-          <b>
-            {{
-              $t(
-                'scenery.authors-title',
-                { authors: station.generalInfo.authors.length },
-                station.generalInfo.authors.length
-              )
-            }}:
-          </b>
+          <b> {{ $t('scenery.authors-title', { authors: station.generalInfo.authors.length }, station.generalInfo.authors.length) }}: </b>
          {{ station.generalInfo.authors.join(', ') }}
        </div>
      </div>
@@ -54,14 +43,14 @@
      <div style="margin: 2em 0; height: 2px; background-color: white"></div>

      <!-- info dispatcher -->
-      <scenery-info-dispatcher :station="station" :onlineFrom="onlineFrom" />
+      <SceneryInfoDispatcher :station="station" :onlineFrom="onlineFrom" />

      <div class="info-lists">
        <!-- user list -->
-        <scenery-info-user-list :station="station" />
+        <SceneryInfoUserList :station="station" />

        <!-- spawn list -->
-        <scenery-info-spawn-list :station="station" />
+        <SceneryInfoSpawnList :station="station" />
      </div>
    </section>
  </div>
@@ -21,18 +21,11 @@
      </span>
    </div>

-    <span class="status-badge" v-if="station.onlineInfo && onlineFrom > 0">
-      OD {{ new Date(onlineFrom).toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' }) }}
-    </span>
-
-    <span class="status-badge" v-if="station.onlineInfo" :class="station.onlineInfo.statusID">
-      {{ $t(`status.${station.onlineInfo.statusID}`) }}
-      {{ station.onlineInfo.statusID == 'online' ? timestampToString(station.onlineInfo.statusTimestamp) : '' }}
-    </span>
-
-    <span class="status-badge free" v-else>
-      {{ $t('status.free') }}
-    </span>
+    <StationStatusBadge
+      :statusID="station.onlineInfo?.statusID"
+      :isOnline="station.onlineInfo ? true : false"
+      :statusTimestamp="station.onlineInfo?.statusTimestamp"
+    />
  </section>
 </template>

@@ -43,20 +36,21 @@ import imageMixin from '../../../mixins/imageMixin';
 import routerMixin from '../../../mixins/routerMixin';
 import styleMixin from '../../../mixins/styleMixin';
 import Station from '../../../scripts/interfaces/Station';
+import StationStatusBadge from '../../Global/StationStatusBadge.vue';

 export default defineComponent({
-  mixins: [styleMixin, dateMixin, routerMixin, imageMixin],
-  props: {
-    station: {
-      type: Object as () => Station,
-      default: {},
+    mixins: [styleMixin, dateMixin, routerMixin, imageMixin],
+    props: {
+        station: {
+            type: Object as () => Station,
+            default: {},
+        },
+        onlineFrom: {
+            type: Number,
+            default: -1,
+        },
    },
-
-    onlineFrom: {
-      type: Number,
-      default: -1,
-    },
-  },
+    components: { StationStatusBadge }
 });
 </script>

@@ -104,3 +98,4 @@ export default defineComponent({
  }
 }
 </style>
+
@@ -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;
-
      }
    }
  }
@@ -1,52 +1,65 @@
-<template>
-  <section class="info-spawn-list">
-    <h3 class="spawn-header section-header">
-      <img :src="getIcon('spawn')" alt="icon-spawn" />
-      &nbsp;{{ $t('scenery.spawns') }} &nbsp;
-      <span class="text--primary">{{ station.onlineInfo?.spawns.length || '0' }}</span>
-    </h3>
-
-    <span v-if="station.onlineInfo">
-      <span
-        class="badge spawn"
-        v-for="(spawn, i) in station.onlineInfo.spawns"
-        :key="spawn.spawnName + station.onlineInfo?.dispatcherName + i"
-      >
-        <span class="spawn_name">{{ spawn.spawnName }}</span>
-        <span class="spawn_length">{{ spawn.spawnLength }}m</span>
-      </span>
-    </span>
-
-    <span class="badge spawn badge-none" v-if="!station.onlineInfo || station.onlineInfo.spawns.length == 0"
-      >{{ $t('scenery.no-spawns') }}
-    </span>
-  </section>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import imageMixin from '../../../mixins/imageMixin';
-import Station from '../../../scripts/interfaces/Station';
-
-export default defineComponent({
-  mixins: [imageMixin],
-
-  props: {
-    station: {
-      type: Object as () => Station,
-      default: {},
-    },
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../../styles/variables.scss';
-
-.spawn {
-  &_length {
-    background: $accentCol;
-    color: black;
-  }
-}
-</style>
+<template>
+  <section class="info-spawn-list">
+    <h3 class="spawn-header section-header">
+      <img :src="getIcon('spawn')" alt="icon-spawn" />
+      &nbsp;{{ $t('scenery.spawns') }} &nbsp;
+      <span class="text--primary">{{ station.onlineInfo?.spawns.length || '0' }}</span>
+    </h3>
+
+    <span v-if="station.onlineInfo">
+      <span
+        class="badge spawn"
+        v-for="(spawn, i) in sortedSpawns"
+        :key="spawn.spawnName + station.onlineInfo?.dispatcherName + i"
+        :data-electrified="spawn.isElectrified"
+      >
+        <span class="spawn_name">{{ spawn.spawnName }}</span>
+        <span class="spawn_length">{{ spawn.spawnLength }}m</span>
+      </span>
+    </span>
+
+    <span class="badge spawn badge-none" v-if="!station.onlineInfo || station.onlineInfo.spawns.length == 0"
+      >{{ $t('scenery.no-spawns') }}
+    </span>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import imageMixin from '../../../mixins/imageMixin';
+import Station from '../../../scripts/interfaces/Station';
+
+export default defineComponent({
+  mixins: [imageMixin],
+
+  props: {
+    station: {
+      type: Object as () => Station,
+      default: {},
+    },
+  },
+
+  computed: {
+    sortedSpawns() {
+      return this.station.onlineInfo?.spawns.sort((s1, s2) => (s1.spawnLength < s2.spawnLength ? 1 : -1));
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../../styles/variables.scss';
+
+.spawn {
+  color: white;
+
+  &_length {
+    background-color: #404040;
+    color: #cfcfcf;
+  }
+
+  &[data-electrified='true'] > &_name {
+    background-color: #007599;
+  }
+}
+</style>
@@ -1,133 +1,131 @@
-<template>
-  <section class="info-user-list">
-    <h3 class="user-header section-header">
-      <img :src="getIcon('user')" alt="icon-user" />
-      &nbsp;{{ $t('scenery.users') }} &nbsp;
-      <span class="text--primary">{{ station.onlineInfo?.currentUsers || '0' }}</span
-      >&nbsp;/&nbsp;<span class="text--primary">{{ station.onlineInfo?.maxUsers || '0' }}</span>
-    </h3>
-
-    <div
-      v-for="(train, i) in computedStationTrains"
-      class="badge user"
-      :class="train.stopStatus"
-      :key="train.trainId"
-      tabindex="0"
-      @click="selectModalTrain(train.trainId)"
-      @keydown.enter="selectModalTrain(train.trainId)"
-    >
-      <span class="user_train">{{ train.trainNo }}</span>
-      <span class="user_name">{{ train.driverName }}</span>
-    </div>
-
-    <div class="badge user badge-none" v-if="!computedStationTrains || computedStationTrains.length == 0">
-      {{ $t('scenery.no-users') }}
-    </div>
-  </section>
-</template>
-
-<script lang="ts">
-
-import { computed, defineComponent } from 'vue';
-import imageMixin from '../../../mixins/imageMixin';
-import modalTrainMixin from '../../../mixins/modalTrainMixin';
-import routerMixin from '../../../mixins/routerMixin';
-import Station from '../../../scripts/interfaces/Station';
-import { useStore } from '../../../store/store';
-
-export default defineComponent({
-  mixins: [routerMixin, imageMixin, modalTrainMixin],
-
-  props: {
-    station: {
-      type: Object as () => Station,
-      default: {},
-    },
-  },
-
-  setup(props) {
-    const store = useStore();
-
-    const computedStationTrains = computed(() => {
-      if (!props.station) return [];
-
-      const station = props.station as Station;
-      if (!station.onlineInfo) return [];
-      if (!station.onlineInfo.stationTrains) return [];
-
-      return station.onlineInfo.stationTrains.map((train) => {
-        const scheduledTrainStatus = station.onlineInfo?.scheduledTrains?.find((st) => st.trainNo === train.trainNo);
-
-        return {
-          ...train,
-          stopStatus: scheduledTrainStatus?.stopStatus || 'no-timetable',
-        };
-      });
-    });
-
-    return { computedStationTrains, store };
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-$no-timetable: #aaa;
-$departed: springgreen;
-$stopped: #ffa600;
-$online: gold;
-$terminated: salmon;
-$disconnected: slategray;
-
-.info-user-list {
-  width: 100%;
-
-  ul {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-}
-
-.user {
-  cursor: pointer;
-
-  &_train {
-    color: black;
-    background-color: $no-timetable;
-
-    transition: background-color 200ms;
-    -ms-transition: background-color 200ms;
-    -webkit-transition: background-color 200ms;
-  }
-
-  &.no-timetable .user_train {
-    background-color: $no-timetable;
-  }
-
-  &.departed > &_train {
-    background-color: $departed;
-  }
-
-  &.stopped > &_train {
-    background-color: $stopped;
-  }
-
-  &.online > &_train {
-    background-color: $online;
-  }
-
-  &.terminated > &_train {
-    background-color: $terminated;
-  }
-
-  &.disconnected > &_train {
-    background-color: $disconnected;
-  }
-
-  &.offline {
-    background: firebrick;
-    pointer-events: none;
-  }
-}
-</style>
-
+<template>
+  <section class="info-user-list">
+    <h3 class="user-header section-header">
+      <img :src="getIcon('user')" alt="icon-user" />
+      &nbsp;{{ $t('scenery.users') }} &nbsp;
+      <span class="text--primary">{{ station.onlineInfo?.currentUsers || '0' }}</span
+      >&nbsp;/&nbsp;<span class="text--primary">{{ station.onlineInfo?.maxUsers || '0' }}</span>
+    </h3>
+
+    <div
+      v-for="(train, i) in computedStationTrains"
+      class="badge user"
+      :class="train.stopStatus"
+      :key="train.trainId"
+      tabindex="0"
+      @click.prevent="selectModalTrain(train.trainId, $event.currentTarget)"
+      @keydown.enter="selectModalTrain(train.trainId, $event.currentTarget)"
+    >
+      <span class="user_train">{{ train.trainNo }}</span>
+      <span class="user_name">{{ train.driverName }}</span>
+    </div>
+
+    <div class="badge user badge-none" v-if="!computedStationTrains || computedStationTrains.length == 0">
+      {{ $t('scenery.no-users') }}
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+import imageMixin from '../../../mixins/imageMixin';
+import modalTrainMixin from '../../../mixins/modalTrainMixin';
+import routerMixin from '../../../mixins/routerMixin';
+import Station from '../../../scripts/interfaces/Station';
+import { useStore } from '../../../store/store';
+
+export default defineComponent({
+  mixins: [routerMixin, imageMixin, modalTrainMixin],
+
+  props: {
+    station: {
+      type: Object as () => Station,
+      default: {},
+    },
+  },
+
+  setup(props) {
+    const store = useStore();
+
+    const computedStationTrains = computed(() => {
+      if (!props.station) return [];
+
+      const station = props.station as Station;
+      if (!station.onlineInfo) return [];
+      if (!station.onlineInfo.stationTrains) return [];
+
+      return station.onlineInfo.stationTrains.map((train) => {
+        const scheduledTrainStatus = station.onlineInfo?.scheduledTrains?.find((st) => st.trainNo === train.trainNo);
+
+        return {
+          ...train,
+          stopStatus: scheduledTrainStatus?.stopStatus || 'no-timetable',
+        };
+      });
+    });
+
+    return { computedStationTrains, store };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+$no-timetable: #aaa;
+$departed: springgreen;
+$stopped: #ffa600;
+$online: gold;
+$terminated: salmon;
+$disconnected: slategray;
+
+.info-user-list {
+  width: 100%;
+
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+}
+
+.user {
+  cursor: pointer;
+
+  &_train {
+    color: black;
+    background-color: $no-timetable;
+
+    transition: background-color 200ms;
+    -ms-transition: background-color 200ms;
+    -webkit-transition: background-color 200ms;
+  }
+
+  &.no-timetable .user_train {
+    background-color: $no-timetable;
+  }
+
+  &.departed > &_train {
+    background-color: $departed;
+  }
+
+  &.stopped > &_train {
+    background-color: $stopped;
+  }
+
+  &.online > &_train {
+    background-color: $online;
+  }
+
+  &.terminated > &_train {
+    background-color: $terminated;
+  }
+
+  &.disconnected > &_train {
+    background-color: $disconnected;
+  }
+
+  &.offline {
+    background: firebrick;
+    pointer-events: none;
+  }
+}
+</style>
@@ -2,25 +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>&nbsp;/&nbsp;</span>
-        <span class="text--grayed">
-          {{ station.onlineInfo?.scheduledTrains?.filter((train) => train.stopInfo.confirmed).length || '0' }}
+
+        <span>
+          <span class="text--primary">{{ station.onlineInfo?.scheduledTrains?.length || '0' }}</span>
+          <span> / </span>
+          <span class="text--grayed">
+            {{ station.onlineInfo?.scheduledTrains?.filter((train) => train.stopInfo.confirmed).length || '0' }}
+          </span>
+        </span>
+
+        <span class="header_links">
+          <a :href="`https://pragotron-td2.web.app/board?name=${station.name}`" target="_blank" :title="$t('scenery.pragotron-link')">
+            <img :src="getIcon('pragotron')" alt="icon-pragotron" />
+          </a>
+
+          <a :href="tabliceZbiorczeHref" 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;') || '' }}

          <button
            :key="cp.checkpointName"
            class="checkpoint_item"
-            :class="{ current: selectedCheckpoint === cp.checkpointName }"
-            @click="selectCheckpoint(cp)"
+            :class="{ current: chosenCheckpoint === cp.checkpointName }"
+            @click="setCheckpoint(cp)"
          >
            {{ cp.checkpointName }}
          </button>
@@ -47,8 +59,8 @@
          v-for="(scheduledTrain, i) in computedScheduledTrains"
          :key="scheduledTrain.trainId"
          tabindex="0"
-          @click.prevent.stop="selectModalTrain(scheduledTrain.trainId)"
-          @keydown.enter.prevent="selectModalTrain(scheduledTrain.trainId)"
+          @click.prevent.stop="selectModalTrain(scheduledTrain.trainId, $event.currentTarget)"
+          @keydown.enter.prevent="selectModalTrain(scheduledTrain.trainId, $event.currentTarget)"
        >
          <span class="timetable-general">
            <span class="general-info">
@@ -86,40 +98,29 @@
                </div>
                <div v-else>
                  <div>
-                    <s style="margin-right: 0.2em" class="text--grayed">{{
-                      timestampToString(scheduledTrain.stopInfo.arrivalTimestamp)
-                    }}</s>
+                    <s style="margin-right: 0.2em" class="text--grayed">{{ timestampToString(scheduledTrain.stopInfo.arrivalTimestamp) }}</s>
                  </div>

                  <span>
                    {{ timestampToString(scheduledTrain.stopInfo.arrivalRealTimestamp) }}
-                    ({{ scheduledTrain.stopInfo.arrivalDelay > 0 ? '+' : ''
-                    }}{{ scheduledTrain.stopInfo.arrivalDelay }})
+                    ({{ scheduledTrain.stopInfo.arrivalDelay > 0 ? '+' : '' }}{{ scheduledTrain.stopInfo.arrivalDelay }})
                  </span>
                </div>
              </span>
            </span>

            <span class="schedule-stop">
-              <span class="stop-time">
-                <span v-if="scheduledTrain.stopInfo.stopTime">
-                  {{ scheduledTrain.stopInfo.stopTime }}
-                  {{ scheduledTrain.stopInfo.stopType || 'pt' }}
-                </span>
-
-                <span v-else>&nbsp;</span>
+              <span class="stop-connection">
+                {{ scheduledTrain.arrivingLine }}
              </span>

-              <span class="arrow"></span>
+              <span class="stop-time">
+                {{ scheduledTrain.stopInfo.stopTime || '' }}
+                {{ scheduledTrain.stopInfo.stopTime ? scheduledTrain.stopInfo.stopType || 'pt' : '' }}
+              </span>

-              <span class="stop-line">
-                <span>
-                  {{ scheduledTrain.arrivingLine }}
-                </span>
-                <span></span>
-                <span>
-                  {{ scheduledTrain.departureLine }}
-                </span>
+              <span class="stop-connection">
+                {{ scheduledTrain.departureLine }}
              </span>
            </span>

@@ -134,15 +135,12 @@
                </div>
                <div v-else>
                  <div>
-                    <s style="margin-right: 0.2em" class="text--grayed">{{
-                      timestampToString(scheduledTrain.stopInfo.departureTimestamp)
-                    }}</s>
+                    <s style="margin-right: 0.2em" class="text--grayed">{{ timestampToString(scheduledTrain.stopInfo.departureTimestamp) }}</s>
                  </div>

                  <span>
                    {{ timestampToString(scheduledTrain.stopInfo.departureRealTimestamp) }}
-                    ({{ scheduledTrain.stopInfo.departureDelay > 0 ? '+' : ''
-                    }}{{ scheduledTrain.stopInfo.departureDelay }})
+                    ({{ scheduledTrain.stopInfo.departureDelay > 0 ? '+' : '' }}{{ scheduledTrain.stopInfo.departureDelay }})
                  </span>
                </div>
              </span>
@@ -168,7 +166,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',
@@ -192,16 +189,22 @@ export default defineComponent({
    listOpen: false,
  }),

+  mounted() {
+    this.loadSelectedOption();
+  },
+
+  activated() {
+    this.loadSelectedOption();
+  },
+
  setup(props) {
    const route = useRoute();
    const currentURL = computed(() => `${location.origin}${route.fullPath}`);

    const store = useStore();

-    const selectedCheckpoint = ref(
-      props.station?.generalInfo?.checkpoints?.length == 0
-        ? ''
-        : props.station?.generalInfo?.checkpoints[0].checkpointName || ''
+    const chosenCheckpoint = ref(
+      props.station?.generalInfo?.checkpoints?.length == 0 ? '' : props.station?.generalInfo?.checkpoints[0].checkpointName || null
    );

    const computedScheduledTrains = computed(() => {
@@ -210,8 +213,7 @@ export default defineComponent({
      const station = props.station as Station;

      let scheduledTrains =
-        station.generalInfo?.checkpoints.find((cp) => cp.checkpointName === selectedCheckpoint.value)
-          ?.scheduledTrains ||
+        station.generalInfo?.checkpoints.find((cp) => cp.checkpointName === chosenCheckpoint.value)?.scheduledTrains ||
        station.onlineInfo?.scheduledTrains ||
        [];

@@ -232,12 +234,21 @@ export default defineComponent({

    return {
      currentURL,
-      selectedCheckpoint,
+      chosenCheckpoint,
      computedScheduledTrains,
      store,
    };
  },

+  computed: {
+    tabliceZbiorczeHref() {
+      let url = `https://tablice-td2.web.app/?station=${this.station.name}`;
+      if (this.chosenCheckpoint) url += `&checkpoint=${this.chosenCheckpoint}`;
+
+      return url;
+    },
+  },
+
  methods: {
    loadSelectedOption() {
      if (!this.station) return;
@@ -245,27 +256,19 @@ export default defineComponent({
      if (!this.station.generalInfo.checkpoints) return;
      if (this.station.generalInfo.checkpoints.length == 0) return;

-      if (this.selectedCheckpoint != '') return;
+      if (this.chosenCheckpoint != '') return;

-      this.selectedCheckpoint = this.station.generalInfo.checkpoints[0].checkpointName;
+      this.chosenCheckpoint = this.station.generalInfo.checkpoints[0].checkpointName;
    },

-    selectCheckpoint(cp: { checkpointName: string }) {
-      this.selectedCheckpoint = cp.checkpointName;
+    setCheckpoint(cp: { checkpointName: string }) {
+      this.chosenCheckpoint = cp.checkpointName;
    },

    showTimetableOnlyView() {
      this.$router.push(`${this.$route.fullPath}&timetableOnly=1`);
    },
  },
-
-  mounted() {
-    this.loadSelectedOption();
-  },
-
-  activated() {
-    this.loadSelectedOption();
-  },
 });
 </script>

@@ -281,24 +284,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;
@@ -310,8 +325,8 @@ export default defineComponent({
    max-width: 1100px;

    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-    gap: 2em 0.5em;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 1.2em 0.5em;

    overflow: hidden;

@@ -337,7 +352,9 @@ export default defineComponent({

  &-schedule {
    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.2em;
+    align-items: center;

    width: 100%;
    max-width: 400px;
@@ -355,7 +372,8 @@ export default defineComponent({

  flex-wrap: wrap;
  font-size: 1.1em;
-  padding: 0.75em 0;
+
+  margin-top: 0.5em;

  button.checkpoint_item {
    color: #aaa;
@@ -368,33 +386,6 @@ export default defineComponent({
  }
 }

-.arrow {
-  border: solid white;
-  border-width: 0 2px 2px 0;
-  display: inline-block;
-  padding: 2px;
-  margin-left: 50px;
-
-  position: relative;
-
-  transform: rotate(-45deg);
-
-  &::before {
-    content: '';
-    position: absolute;
-    display: block;
-    width: 55px;
-    height: 3px;
-    top: 4px;
-    left: 4px;
-
-    transform: translate(-100%, -1px) rotate(45deg);
-    transform-origin: right bottom;
-
-    background: white;
-  }
-}
-
 .general-info {
  display: flex;
  flex-wrap: wrap;
@@ -421,47 +412,34 @@ export default defineComponent({

 .schedule {
  &-arrival,
-  &-stop,
  &-departure {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    margin: 0 0.3rem;
    font-size: 1.15em;
  }

  &-stop {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    font-size: 0.9em;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.5em;
+    align-items: end;

-    padding: 0.3em 0;
-
-    .stop-line {
-      display: flex;
-      position: absolute;
-
-      span {
-        width: 65px;
-        word-break: break-all;
-      }
-
-      span:first-child {
-        text-align: right;
-      }
-
-      span:last-child {
-        text-align: left;
-      }
+    .stop-connection {
+      font-size: 0.95em;
    }

    .stop-time {
-      position: absolute;
-      transform: translateY(-15px);
+      position: relative;
+      inline-size: max-content;
+      align-self: center;
+      font-size: 0.9em;

      color: $accentCol;
+
+      &::after {
+        content: '\027F6';
+        display: block;
+        font-size: 2.2em;
+        line-height: 0.65em;
+      }
    }
  }
 }
@@ -1,19 +1,20 @@
 <template>
-  <section class="scenery-timetables-history scenery-section">
-    <Loading v-if="dataStatus != 2" />
+  <section class="scenery-table-section">
+    <Loading v-if="dataStatus != DataStatus.Loaded" />
+    <div class="no-history" v-else-if="historyList.length == 0">{{ $t('scenery.history-list-empty') }}</div>

-    <table v-else-if="sceneryHistoryList.length">
+    <table class="scenery-history-table" v-else>
      <thead>
-        <th>{{ $t('scenery.timetables-history-id')  }}</th>
-        <th>{{ $t('scenery.timetables-history-number')}}</th>
-        <th>{{ $t('scenery.timetables-history-route')}}</th>
-        <th>{{ $t('scenery.timetables-history-driver')}}</th>
-        <th>{{ $t('scenery.timetables-history-author')}}</th>
-        <th>{{ $t('scenery.timetables-history-date')}}</th>
+        <th>{{ $t('scenery.timetables-history-id') }}</th>
+        <th>{{ $t('scenery.timetables-history-number') }}</th>
+        <th>{{ $t('scenery.timetables-history-route') }}</th>
+        <th>{{ $t('scenery.timetables-history-driver') }}</th>
+        <th>{{ $t('scenery.timetables-history-author') }}</th>
+        <th>{{ $t('scenery.timetables-history-date') }}</th>
      </thead>

      <tbody>
-        <tr v-for="historyItem in sceneryHistoryList" @click="test">
+        <tr v-for="historyItem in historyList">
          <td>
            <router-link :to="`/journal/timetables?timetableId=${historyItem.id}`">#{{ historyItem.id }}</router-link>
          </td>
@@ -26,7 +27,7 @@
          <td>
            <router-link
              v-if="historyItem.authorName"
-              :to="`/journal/dispatchers?dispatcherName=${historyItem.authorName}`"
+              :to="`/journal/timetables?authorName=${historyItem.authorName}`"
              >{{ historyItem.authorName }}
            </router-link>
            <i v-else>{{ $t('scenery.timetable-author-unknown') }}</i>
@@ -38,34 +39,13 @@
        </tr>
      </tbody>
    </table>
-
-    <div class="list-warning" v-else>{{ $t('scenery.history-list-empty') }}</div>
-
-    <!-- <ul class="history-list" v-else>
-      <li class="list-item" v-for="historyItem in sceneryHistoryList">
-        <div>
-          <b>{{ localeDay(historyItem.beginDate, $i18n.locale) }}</b>
-          {{ 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>
+
+  <div class="bottom-info">
+    <button class="btn btn--option" v-if="historyList.length > 0" @click="navigateToHistory()">
+      {{ $t('scenery.bottom-info') }}
+    </button>
+  </div>
 </template>

 <script lang="ts">
@@ -77,40 +57,47 @@ import { TimetableHistory, SceneryTimetableHistory } from '../../scripts/interfa
 import Station from '../../scripts/interfaces/Station';
 import { URLs } from '../../scripts/utils/apiURLs';
 import Loading from '../Global/Loading.vue';
+import listObserverMixin from '../../mixins/listObserverMixin';

 export default defineComponent({
  name: 'SceneryTimetablesHistory',
-  mixins: [dateMixin],
+  mixins: [dateMixin, listObserverMixin],
  props: {
    station: {
      type: Object as PropType<Station>,
      required: true,
    },
  },
+
  data() {
    return {
-      sceneryHistoryList: [] as TimetableHistory[],
+      historyList: [] as TimetableHistory[],
      dataStatus: DataStatus.Loading,
+      DataStatus,
    };
  },
-  activated() {
-    this.fetchAPIData();
+
+  async activated() {
+    const fetchedHistory = await this.fetchAPIData();
+    if (fetchedHistory) this.historyList = fetchedHistory.timetables;
  },
+
  methods: {
-    async fetchAPIData(countFrom = 0, countLimit = 15) {
+    async fetchAPIData(countFrom = 0, countLimit = 15): Promise<SceneryTimetableHistory | null> {
      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.dataStatus = DataStatus.Loaded;
+        return historyAPIData;
      } catch (error) {
        console.error(error);
+        return null;
      }
    },

-    test() {
-      console.log('test');
+    navigateToHistory() {
+      this.$router.push(`/journal/timetables?issuedFrom=${this.station.name}`);
    },
  },
  components: { Loading },
@@ -119,46 +106,5 @@ export default defineComponent({

 <style lang="scss" scoped>
@import '../../styles/responsive.scss';
-@import '../../styles/SceneryView/styles.scss';
-
-.list-warning {
-  padding: 1em 0.5em;
-  background-color: #444;
-  font-size: 1.2em;
-}
-
-.history-list {
-  padding: 0 0.5em;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-
-  thead {
-    position: sticky;
-    top: 0;
-    background-color: #222222;
-  }
-
-  th {
-    padding: 0.5em;
-  }
-
-  tr {
-    background-color: #353535;
-    border: none;
-  }
-
-  td {
-    padding: 0.75em;
-    border-bottom: solid 5px #111;
-  }
-}
-
-@include smallScreen {
-  .list-item {
-    grid-template-columns: 1fr 1fr;
-  }
-}
+@import '../../styles/sceneryViewTables.scss';
 </style>
@@ -1,47 +1,19 @@
 <template>
  <div class="general-status">
-    <span :class="scheduledTrain.stopStatus">
-      <span v-if="scheduledTrain.stopStatus == 'arriving'">
-        <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 :class="computedScheduledTrain.stopStatus" :title="computedScheduledTrain.stopStatusDescription">
+      {{ computedScheduledTrain.stopStatusIndicator }}
    </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,7 +1,10 @@
 <template>
-  <button class="btn--action" :class="option.section" :data-selected="option.value" @click="handleChange">
-    {{ $t(`filters.${option.id}`) }}
-  </button>
+  <label @dblclick="handleDbClick">
+    <input v-model="option.value" type="checkbox" :class="option.section" :name="option.id" />
+    <span>
+      {{ $t(`filters.${option.id}`) }}
+    </span>
+  </label>
 </template>

 <script lang="ts">
@@ -29,78 +32,68 @@ export default defineComponent({
      filterStore: useStationFiltersStore(),
    };
  },
-  methods: {
-    handleChange() {
-      this.option.value = !this.option.value;

-      this.filterStore.changeFilterValue({
-        name: this.option.name,
-        value: !this.option.value,
-      });
+  watch: {
+    'option.value'() {
+      this.filterStore.changeFilterValue(this.option.name, !this.option.value);
+    },
+  },
+
+  methods: {
+    handleDbClick(e: Event) {
+      e.preventDefault();
+
+      this.filterStore.lastClickedFilterId = this.option.id;
+      this.option.value = true;
+
+      this.filterStore.inputs.options
+        .filter((option) => {
+          return option.section == this.option.section && option.id != this.option.id;
+        })
+        .forEach((option) => {
+          option.value = !this.option.value;
+        });
    },
  },
 });
 </script>

 <style lang="scss" scoped>
-$accessCol: #e03b07;
-$controlCol: #0085ff;
-$signalCol: #bf7c00;
-$statusCol: #349b32;
-$saveCol: #28a826;
-$routesCol: #9049c0;
+@import '../../styles/variables.scss';

-button {
-  width: 100%;
-  padding: 0.4em;
-  border-radius: 0.4em;
+label {
+  position: relative;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;

-  &:focus-visible {
-    outline: 1px solid white;
+  span {
+    cursor: pointer;
+    display: inline-block;
+    width: 100%;
+    text-align: center;
+    padding: 0.25em;
+    background-color: #444;
  }

-  &[data-selected='true'] {
-    &.access {
-      background-color: $accessCol;
-      box-shadow: 0 0 6px 1px $accessCol;
+  span:hover {
+    background-color: #555;
+  }
+
+  input[type='checkbox'] {
+    cursor: pointer;
+    position: absolute;
+    opacity: 0;
+
+    &:checked + span {
+      background-color: forestgreen;
+      font-weight: bold;
    }

-    &.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;
+    &:focus-visible + span {
+      outline: 1px solid $accentCol;
    }
  }
 }
 </style>
+
@@ -4,6 +4,7 @@
      <button class="btn--filled btn--image" @click="toggleCard">
        <img class="button_icon" :src="getIcon('filter2')" alt="filter icon" />
        {{ $t('options.filters') }} [F]
+        <span class="active-indicator" v-if="!filterStore.areFiltersAtDefault"></span>
      </button>

      <label for="scenery-search">
@@ -26,15 +27,44 @@
      <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
-              v-for="(option, i) in filterStore.inputs.options"
-              :option="option"
-              :key="i"
-              @optionChange="handleChange"
-            />
+            <!-- QUICK ACTIONS (TODO) -->
+            <!-- <div class="quick-actions">
+              <h3 class="text--primary">{{ $t('filters.sections.quick') }}</h3>
+              <hr />
+
+              <div>
+                <button class="btn--action" style="width: 100%" @click="filterStore.handleQuickAction('all-available')">
+                  {{ $t('filters.all-available') }}
+                </button>
+
+                <button class="btn--action" style="width: 100%" @click="filterStore.handleQuickAction('all-free')">
+                  {{ $t('filters.all-free') }}
+                </button>
+              </div>
+            </div> -->
+
+            <div class="option-section" v-for="section in filterStore.inputs.optionSections">
+              <h3 class="text--primary">
+                {{ $t(`filters.sections.${section}`) }}
+
+                <button @click="filterStore.resetSectionOptions(section)">RESET</button>
+              </h3>
+
+              <hr />
+
+              <div class="section-inputs">
+                <FilterOption
+                  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 +110,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>
@@ -156,6 +193,10 @@ export default defineComponent({
        .filter((s) => s.name.toLocaleLowerCase().includes(this.chosenSearchScenery.toLocaleLowerCase()))
        .sort((s1, s2) => (s1.name > s2.name ? 1 : -1));
    },
+
+    currentOptionsActive() {
+      return true;
+    },
  },

  watch: {
@@ -181,22 +222,10 @@ 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;

-      this.filterStore.changeFilterValue({
-        name: target.name,
-        value: target.value,
-      });
+      this.filterStore.changeFilterValue(target.name, target.value);

      if (this.saveOptions) StorageManager.setStringValue(target.name, target.value);
    },
@@ -210,11 +239,7 @@ export default defineComponent({
    },

    changeNumericFilterValue(name: string, value: number, saveToStorage = false) {
-      this.filterStore.changeFilterValue({
-        name,
-        value,
-      });
-
+      this.filterStore.changeFilterValue(name, value);
      if (this.saveOptions && saveToStorage) StorageManager.setNumericValue(name, value);
    },

@@ -281,6 +306,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 +325,13 @@ export default defineComponent({
  }

  &_content {
+    padding: 1em 0.5em;
+
    display: flex;
    flex-direction: column;
+
    gap: 1em;
-
-    max-height: 90vh;
-
-    padding: 1em;
+    overflow: auto;
  }

  &_title {
@@ -309,18 +342,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 +412,9 @@ export default defineComponent({
  }

  &_actions {
+    width: 100%;
+    padding: 0.5em;
+
    .filter-option {
      max-width: 50%;
      margin: 0 auto;
@@ -409,14 +433,39 @@ export default defineComponent({
        padding: 0.5em;

        &[data-selected='true'] {
-          background-color: lightgreen;
-          color: black;
+          background-color: forestgreen;
        }
      }
    }
  }
 }

+.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;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.5em;
+  margin: 1em 0;
+}
+
+.quick-actions div {
+  display: flex;
+  margin: 1em 0;
+  gap: 1em;
+}
+
 .slider {
  display: flex;
  align-items: center;
@@ -1,33 +1,39 @@
 <template>
  <section class="station_table">
-    <button class="return-btn" @click="scrollToTop" v-if="showReturnButton">
-      <img :src="icons.arrow" alt="return arrow" />
-    </button>
-
    <div class="table_wrapper">
      <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"
                />
@@ -83,16 +89,11 @@
            </td>

            <td class="station_status">
-              <span class="status-badge" :class="station.onlineInfo.statusID" v-if="station.onlineInfo">
-                {{ $t(`status.${station.onlineInfo.statusID}`) }}
-                {{
-                  station.onlineInfo.statusID == 'online' ? timestampToString(station.onlineInfo.statusTimestamp) : ''
-                }}
-              </span>
-
-              <span class="status-badge free" v-else>
-                {{ $t('status.free') }}
-              </span>
+              <StationStatusBadge
+                :statusID="station.onlineInfo?.statusID"
+                :isOnline="station.onlineInfo ? true : false"
+                :statusTimestamp="station.onlineInfo?.statusTimestamp"
+              />
            </td>

            <td class="station_dispatcher-name">
@@ -190,25 +191,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 }">
-              <span>
-                <span class="highlight">
-                  {{ station.onlineInfo?.scheduledTrains?.length || '0' }}
-                </span>
-                /
-                <span style="color: #bbb">
-                  {{ station.onlineInfo?.scheduledTrains?.filter((train) => train.stopInfo.confirmed).length || '0' }}
-                </span>
+            <td class="station_schedules" style="width: 30px" :class="{ inactive: !station.onlineInfo }">
+              <span class="highlight">
+                {{ station.onlineInfo?.scheduledTrains?.length || 0 }}
+              </span>
+            </td>
+
+            <td class="station_schedules" style="width: 30px" :class="{ inactive: !station.onlineInfo }">
+              <span style="color: #ccc">
+                {{ 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 +243,8 @@ 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';
+import StationStatusBadge from '../Global/StationStatusBadge.vue';

 export default defineComponent({
  props: {
@@ -245,12 +254,12 @@ export default defineComponent({
    },
  },

-  components: { Loading },
+  components: { Loading, StationStatusBadge },
  mixins: [styleMixin, dateMixin, stationInfoMixin, returnBtnMixin, imageMixin],

  data: () => ({
-    headIds: ['station', 'min-lvl', 'status', 'dispatcher', 'dispatcher-lvl', 'routes', 'general'],
-    headIconsIds: ['user', 'spawn', 'timetable'],
+    headIconsIds,
+    headIds,
    lastSelectedStationName: '',
  }),

@@ -291,8 +300,10 @@ export default defineComponent({
      window.open(url, '_blank');
    },

-    changeSorter(i: number) {
-      this.stationFiltersStore.changeSorter(i);
+    changeSorter(headerName: HeadIdsTypes) {
+      if (headerName == 'general' || headerName == 'routes') return;
+
+      this.stationFiltersStore.changeSorter(headerName);
    },
  },
 });
@@ -349,9 +360,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;

@@ -1,13 +1,13 @@
 <template>
-  <div class="train-info" tabindex="0">
+  <div class="train-info">
    <section class="train-route">
      <div class="train_general">
        <b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
        <span class="timetable-id" v-if="train.timetableData">#{{ train.timetableData.timetableId }}</span>

        <span class="timetable_warnings" v-if="train.timetableData?.TWR || train.timetableData?.SKR">
-          <span class="train-badge twr" v-if="train.timetableData?.TWR">TWR</span>
-          <span class="train-badge skr" v-if="train.timetableData?.SKR">SKR</span>
+          <span 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" :title="$t('general.SKR')">SKR</span>
        </span>

        <strong>
@@ -41,13 +41,7 @@
      </div>

      <div class="timetable_progress" style="margin-top: 0.5em" v-if="train.timetableData">
-        <span class="timetable_progress-bar">
-          <span class="bar-bg"></span>
-          <span
-            class="bar-fg"
-            :style="{ width: `${Math.floor(confirmedPercentage(train.timetableData.followingStops))}%` }"
-          ></span>
-        </span>
+        <ProgressBar :progressPercent="confirmedPercentage(train.timetableData.followingStops)" />

        <span class="timetable_progress-distance">
          &nbsp; {{ currentDistance(train.timetableData.followingStops) }} km /
@@ -68,15 +62,13 @@
    </section>

    <section class="train-stats">
-      <div>
-        <img :src="train.locoURL" loading="lazy" alt="Loco image not found" @error="onImageError" />
-      </div>
+      <TrainThumbnail :name="train.locoType" :onlyFirstSegment="true" />

      <div class="text--grayed">
        {{ train.locoType }}
-        <span v-if="train.cars.length > 0">
+        <span v-if="train.stockList.length > 1">
          &nbsp;&bull; {{ $t('trains.cars') }}:
-          <span class="count">{{ train.cars.length }}</span>
+          <span class="count">{{ train.stockList.length - 1 }}</span>
        </span>
      </div>

@@ -96,6 +88,8 @@ import imageMixin from '../../mixins/imageMixin';
 import styleMixin from '../../mixins/styleMixin';
 import trainInfoMixin from '../../mixins/trainInfoMixin';
 import Train from '../../scripts/interfaces/Train';
+import ProgressBar from '../Global/ProgressBar.vue';
+import TrainThumbnail from '../Global/TrainThumbnail.vue';

 export default defineComponent({
  props: {
@@ -103,22 +97,27 @@ export default defineComponent({
      type: Object as () => Train,
      required: true,
    },
-
    extended: {
      type: Boolean,
      default: true,
    },
  },
-
  mixins: [trainInfoMixin, imageMixin, styleMixin],
+  components: { ProgressBar, TrainThumbnail },
 });
 </script>

+<!-- Global style for TrainThumbnail -->
+<style lang="scss">
+.train-stats .train-thumbnail {
+  max-width: 100%;
+}
+</style>
+
 <style lang="scss" scoped>
@import '../../styles/responsive.scss';
@import '../../styles/badge.scss';

-
 .image-warning {
  height: 1em;

@@ -128,15 +127,12 @@ export default defineComponent({
 .train-stats {
  display: flex;
  justify-content: center;
-  align-content: center;
+  align-items: center;

  flex-direction: column;
  text-align: center;

-  img {
-    margin: 0.5em 0;
-    width: 12em;
-  }
+  gap: 0.25em;
 }

 .train-info {
@@ -182,26 +178,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 +194,7 @@ export default defineComponent({

 .timetable_warnings {
  display: flex;
-  gap: 0.2em;
-
-  color: black;
+  gap: 0.25em;
 }

 .timetable_progress {
@@ -229,31 +203,6 @@ export default defineComponent({
  flex-wrap: wrap;
 }

-.timetable_progress-bar {
-  position: relative;
-
-  width: 6em;
-  height: 1em;
-  margin: 0.5em 0;
-
-  .bar-fg,
-  .bar-bg {
-    position: absolute;
-    height: 1em;
-    width: 100%;
-
-    left: 0;
-  }
-
-  .bar-fg {
-    background-color: springgreen;
-  }
-
-  .bar-bg {
-    background-color: #5b5b5b;
-  }
-}
-
 .timetable_progress-distance {
  margin-right: 0.25em;
 }
@@ -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"
-                :data-selected="opt.id == sorterActive.id"
-                @click="onSorterChange(opt)"
+                class="btn--option"
+                v-for="filter in trainFilterList.filter((f) => f.section == section)"
+                :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="options_filters">
-            <div class="filter-option" v-for="filter in trainFilterList">
-              <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 class="filter-actions">
+            <div></div>
+            <button class="btn--action" @click="resetAllFilters">{{ $t('options.filter-reset') }}</button>
          </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'] {
-      color: #888;
+    &[data-inactive='true'] {
+      color: #aaa;
    }
  }
 }
@@ -201,7 +219,7 @@ export default defineComponent({

  margin-top: 1em;

-  button {
+  > * {
    width: 100%;
  }
 }
@@ -1,38 +1,15 @@
 <template>
  <div class="train-schedule" @click="toggleShowState">
-    <div class="train-stock">
-      <ul class="stock-list">
-        <li>
-          <img class="train-image" :src="train.locoURL" alt="loco" @error="onImageError" />
-          <div>{{ train.locoType }}</div>
-        </li>
+    <StockList :trainStockList="train.stockList" />

-        <li v-if="train.locoType.startsWith('EN')">
-          <img :src="train.locoURL.replace('rb', 's')" @error="onImageError" alt="" />
-          <div>{{ train.locoType }}S</div>
+    <!-- <div class="train-stock"> -->
+    <!-- <ul>
+        <li v-for="(stockName, i) in train.stockList" :key="i">
+          <p>{{ stockName.split(':')[0].split('_').splice(0, 2).join(' ') }} {{ stockName.split(':')[1] }}</p>
+          <TrainThumbnail :name="stockName" /> 
        </li>
-
-        <li v-if="train.locoType.startsWith('EN71')">
-          <img :src="train.locoURL.replace('rb', 's')" @error="onImageError" alt="" />
-          <div>{{ train.locoType }}S</div>
-        </li>
-
-        <li v-if="train.locoType.startsWith('EN')">
-          <img :src="train.locoURL.replace('rb', 'ra')" @error="onImageError" alt="" />
-          <div>{{ train.locoType }}RA</div>
-        </li>
-
-        <li v-for="(car, i) in train.cars" :key="i">
-          <img
-            :src="`https://rj.td2.info.pl/dist/img/thumbnails/${car.split(':')[0]}.png`"
-            @error="onImageError"
-            alt="car"
-          />
-
-          <div>{{ car.replace(/_/g, ' ').split(':')[0] }}</div>
-        </li>
-      </ul>
-    </div>
+      </ul> -->
+    <!-- </div> -->

    <div class="schedule-wrapper" v-if="train.timetableData">
      <ul class="stop_list">
@@ -60,9 +37,7 @@
              <b>{{ stop.stopNameRAW }} </b>: <span v-html="stop.comments"></span>
            </div>

-            <span
-              v-if="stop.departureLine == train.timetableData!.followingStops[i + 1].arrivalLine && !/sbl/gi.test(stop.departureLine!)"
-            >
+            <span v-if="stop.departureLine == train.timetableData!.followingStops[i + 1].arrivalLine && !/sbl/gi.test(stop.departureLine!)">
              {{ stop.departureLine }}
            </span>

@@ -91,9 +66,11 @@ import Train from '../../scripts/interfaces/Train';
 import TrainStop from '../../scripts/interfaces/TrainStop';
 import { useStore } from '../../store/store';
 import StopDate from '../Global/StopDate.vue';
+import TrainThumbnail from '../Global/TrainThumbnail.vue';
+import StockList from '../Global/StockList.vue';

 export default defineComponent({
-  components: { StopDate },
+  components: { StopDate, TrainThumbnail, StockList },
  props: {
    train: {
      type: Object as PropType<Train>,
@@ -145,8 +122,7 @@ export default defineComponent({
        end: stop.terminatesHere,
        delayed: stop.departureDelay > 0,
        sbl: /sbl/gi.test(stop.stopName),
-        [stop.stopType.replaceAll(', ', '-')]:
-          stop.stopType.match(new RegExp('ph|pm|pt')) && !stop.confirmed && !stop.beginsHere,
+        [stop.stopType.replaceAll(', ', '-')]: stop.stopType.match(new RegExp('ph|pm|pt')) && !stop.confirmed && !stop.beginsHere,
        'minor-stop-active': this.activeMinorStops.includes(index),
        'last-confirmed': index == this.lastConfirmed && !stop.terminatesHere,
      };
@@ -179,31 +155,7 @@ $stopNameClr: #22a8d1;
 }

 .train-schedule {
-  padding: 0 0.25em;
-}
-
-.train-stock {
-  padding: 0.25em 0.5em;
-  display: flex;
-  justify-content: center;
-}
-
-ul.stock-list {
-  display: flex;
-  align-items: flex-end;
-  overflow: auto;
-  padding-bottom: 1em;
-
-  li > div {
-    text-align: center;
-    color: #aaa;
-    font-size: 0.9em;
-  }
-
-  img {
-    max-height: 60px;
-    max-width: 320px;
-  }
+  padding: 0 1em;
 }

 .schedule-wrapper {
@@ -427,4 +379,3 @@ ul.stop_list > li.stop {
  }
 }
 </style>
-
@@ -1,337 +0,0 @@
-<template>
-  <div class="train-stats" v-click-outside="closeStats">
-    <action-button class="stats_button" @click="toggleStatsOpen">
-      <img :src="getIcon('stats')" :alt="$t('trains.stats')" />
-      <p>{{ $t('trains.stats') }}</p>
-    </action-button>
-
-    <transition name="stats-anim" class="stats_wrapper" tag="div">
-      <div class="stats-body" v-if="trainStatsOpen">
-        <h2 class="stats-header">
-          <img :src="getIcon('stats')" :alt="$t('trains.stats')" />
-          {{ $t('trains.stats') }}
-        </h2>
-
-        <div class="stats-speed">
-          <div class="title stats-title">
-            {{ $t('trains.stats-speed') }}
-          </div>
-          <div class="stats-content">{{ speedStats.min }} | {{ speedStats.avg }} | {{ speedStats.max }}</div>
-        </div>
-
-        <div class="stats-length">
-          <div class="title stats-title">
-            {{ $t('trains.stats-length') }}
-          </div>
-          <div class="stats-content">
-            {{ timetableStats.min }} | {{ timetableStats.avg }} |
-            {{ timetableStats.max }}
-          </div>
-        </div>
-
-        <div class="stats-categories">
-          <div class="title stats-title">
-            {{ $t('trains.stats-categories') }}
-          </div>
-
-          <div class="category-list">
-            <span class="category" v-for="[key, value] of categoryList" :key="key">
-              <span class="category-type">{{ key }}</span>
-              <span class="category-count">{{ value }}</span>
-            </span>
-          </div>
-
-          <div class="special-list">
-            <span class="special twr">
-              <span class="special-type">{{ $t('trains.stats-special-twr') }}</span>
-              <span class="special-count">{{ specialTrainCount[0] }}</span>
-            </span>
-
-            <span class="special skr">
-              <span class="special-type">{{ $t('trains.stats-special-skr') }}</span>
-              <span class="special-count">{{ specialTrainCount[1] }}</span>
-            </span>
-          </div>
-        </div>
-
-        <div class="stats-locos">
-          <div class="title stats-title">{{ $t('trains.stats-locos') }}</div>
-
-          <div class="loco-list stats-content">
-            <div class="loco-item" v-for="(loco, i) in locoList" :key="i">{{ loco[0] }} | {{ loco[1] }}</div>
-          </div>
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, computed, inject } from 'vue';
-import imageMixin from '../../mixins/imageMixin';
-import Train from '../../scripts/interfaces/Train';
-import ActionButton from '../Global/ActionButton.vue';
-
-export default defineComponent({
-  components: { ActionButton },
-  mixins: [imageMixin],
-
-  props: {
-    trains: {
-      type: Array as () => Train[],
-      required: true,
-    },
-  },
-
-  data: () => ({
-    trainStatsOpen: false,
-  }),
-
-  methods: {
-    toggleStatsOpen() {
-      this.trainStatsOpen = !this.trainStatsOpen;
-    },
-
-    closeStats() {
-      this.trainStatsOpen = false;
-    },
-  },
-
-  setup(props) {
-    const speedStats = computed(() => {
-      if (props.trains.length == 0) return { avg: '0', min: '0', max: '0' };
-
-      const trainList = props.trains.filter((train) => train.timetableData);
-
-      const avg = (trainList.reduce((acc, train) => acc + train.speed, 0) / trainList.length).toFixed(2);
-
-      const minMaxSpeed = trainList.reduce((acc, train) => {
-        if (!train.timetableData) return acc;
-
-        acc[0] = !acc[0] || train.speed < acc[0] ? train.speed : acc[0];
-
-        acc[1] = !acc[1] || train.speed > acc[1] ? train.speed : acc[1];
-        return acc;
-      }, [] as any);
-
-      return {
-        avg,
-        min: minMaxSpeed[0].toString(),
-        max: minMaxSpeed[1].toString(),
-      };
-    });
-
-    const timetableStats = computed(() => {
-      if (props.trains.length == 0) return { avg: '0', min: '0', max: '0' };
-
-      const activeTrainsLength = props.trains.filter((train) => train.timetableData).length;
-
-      const avg = (
-        props.trains.reduce((acc, train) => (train.timetableData ? acc + train.timetableData.routeDistance : acc), 0) /
-        activeTrainsLength
-      ).toFixed(2);
-
-      const minMaxDistance = props.trains.reduce((acc, train) => {
-        if (!train.timetableData) return acc;
-
-        acc[0] = !acc[0] || train.timetableData.routeDistance < acc[0] ? train.timetableData.routeDistance : acc[0];
-
-        acc[1] = !acc[1] || train.timetableData.routeDistance > acc[1] ? train.timetableData.routeDistance : acc[1];
-        return acc;
-      }, [] as any);
-
-      return {
-        avg,
-        min: minMaxDistance[0].toString(),
-        max: minMaxDistance[1].toString(),
-      };
-    });
-
-    const categoryList = computed(() => {
-      const map = props.trains.reduce((acc, train) => {
-        if (!train.timetableData || !train.timetableData.category) return acc;
-
-        acc.set(
-          train.timetableData.category,
-          acc.get(train.timetableData.category) ? acc.get(train.timetableData.category) + 1 : 1
-        );
-
-        return acc;
-      }, new Map());
-
-      return new Map([...map.entries()].sort((a, b) => b[1] - a[1]));
-    });
-
-    const locoList = computed(() => {
-      const map: Map<string, number> = props.trains.reduce((acc, train) => {
-        if (!train.timetableData || !train.locoType) return acc;
-
-        acc.set(train.locoType, acc.get(train.locoType) ? acc.get(train.locoType) + 1 : 1);
-
-        return acc;
-      }, new Map());
-
-      const sorted = [...map.entries()].sort((a, b) => b[1] - a[1]).filter((v, i) => i < 3);
-
-      return sorted;
-    });
-
-    const specialTrainCount = computed(() => {
-      const twrList = props.trains.filter((train) => train.timetableData && train.timetableData.TWR);
-
-      const skrList = props.trains.filter((train) => train.timetableData && train.timetableData.SKR);
-
-      return [twrList.length, skrList.length];
-    });
-
-    /* Inject list from TrainsView for category filter */
-    const chosenTrainCategories = inject('chosenTrainCategories') as string[];
-
-    return {
-      speedStats,
-      timetableStats,
-      categoryList,
-      locoList,
-      specialTrainCount,
-      chosenTrainCategories,
-    };
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/responsive';
-
-.stats-anim {
-  &-enter-active,
-  &-leave-active {
-    transition: all 150ms ease-out;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-    transform: translateY(30px);
-  }
-}
-
-.train-stats {
-  position: relative;
-  top: 0;
-  z-index: 15;
-}
-
-.stats {
-  &_wrapper {
-    margin-bottom: 0.5em;
-    outline: none;
-  }
-
-  &-header {
-    display: flex;
-    margin-bottom: 0.85em;
-
-    img {
-      vertical-align: middle;
-      margin-right: 0.35em;
-    }
-  }
-
-  &-body {
-    position: absolute;
-    display: inline-block;
-    max-width: 700px;
-    width: 100%;
-
-    top: 100%;
-    left: 0;
-
-    background: #222;
-    border-radius: 0 1em 1em 1em;
-
-    padding: 1em;
-  }
-
-  &-content {
-    color: #ddd;
-  }
-}
-
-/* .category {
-  cursor: pointer;
-} */
-
-.category,
-.special {
-  &-list {
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  margin-right: 0.4em;
-  margin-bottom: 0.4em;
-
-  &-type,
-  &-count {
-    display: inline-block;
-    padding: 0.2em 0.4em;
-  }
-
-  &-type {
-    background: #585858;
-    font-weight: 600;
-  }
-
-  &-count {
-    background: #ffc014;
-    color: black;
-  }
-}
-
-.special {
-  &-list {
-    font-size: 0.85em;
-  }
-
-  &-count {
-    background: gray;
-    color: white;
-  }
-
-  &.twr > &-type {
-    background-color: var(--clr-twr);
-
-    color: black;
-  }
-
-  &.skr > &-type {
-    background-color: var(--clr-skr);
-
-    color: white;
-  }
-}
-
-.warning {
-  display: inline-block;
-  margin-right: 0.4em;
-  padding: 0.2em 0.3em;
-
-  color: black;
-  font-weight: bold;
-  font-size: 0.85em;
-}
-
-@include smallScreen {
-  .stats-body {
-    display: block;
-    width: 100%;
-
-    border-radius: 0 0 1em 1em;
-  }
-
-  .train-stats {
-    display: flex;
-    justify-content: center;
-  }
-}
-</style>
@@ -12,17 +12,14 @@
          {{ $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"
            v-for="train in currentTrains"
            :key="train.trainId"
-            @click.stop="selectModalTrain(train.trainId)"
-            @keydown.enter="selectModalTrain(train.trainId)"
+            tabindex="0"
+            @click.stop="selectModalTrain(train.trainId, $event.currentTarget)"
+            @keydown.enter="selectModalTrain(train.trainId, $event.currentTarget)"
          >
            <TrainInfo :train="train" />
          </li>
@@ -70,18 +67,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) {
@@ -159,7 +147,7 @@ img.train-image {
 .train {
  &-list {
    position: relative;
-    
+
    @include smallScreen() {
      width: 100%;
    }
@@ -1,28 +1,46 @@
-import { JournalFilterType } from "../../scripts/enums/JournalFilterType";
-import { JournalTimetableFilter } from "../../types/Journal/JournalTimetablesTypes";
+import { JournalFilterSection, JournalFilterType } from '../../scripts/enums/JournalFilterType';
+import { JournalFilter } from '../../scripts/types/JournalTimetablesTypes';

-export const journalTimetableFilters: JournalTimetableFilter[] = [
+export const journalTimetableFilters: JournalFilter[] = [
  {
-    id: JournalFilterType.all,
-    filterSection: 'timetable-status',
+    id: JournalFilterType.ALL,
+    filterSection: JournalFilterSection.TIMETABLE_STATUS,
    isActive: true,
  },

  {
-    id: JournalFilterType.active,
-    filterSection: 'timetable-status',
+    id: JournalFilterType.ACTIVE,
+    filterSection: JournalFilterSection.TIMETABLE_STATUS,
    isActive: false,
  },

  {
-    id: JournalFilterType.fulfilled,
-    filterSection: 'timetable-status',
+    id: JournalFilterType.FULFILLED,
+    filterSection: JournalFilterSection.TIMETABLE_STATUS,
    isActive: false,
  },

  {
-    id: JournalFilterType.abandoned,
-    filterSection: 'timetable-status',
+    id: JournalFilterType.ABANDONED,
+    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 { TrainFilter } from '../../types/Trains/TrainOptionsTypes';
+import { TrainFilterSection, TrainFilterType } from '../../scripts/enums/TrainFilterType';
+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": "access",
+      "section": "reality",
      "value": true,
      "defaultValue": true
    },
    {
      "id": "fictional",
      "name": "fictional",
-      "iconName": "user",
-      "section": "access",
+      "section": "reality",
+      "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",
-      "name": "ręczne",
-      "iconName": "ręczne",
+      "id": "SCS-M",
+      "name": "mechaniczne+SCS",
      "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": "control",
+      "section": "addons",
+      "value": true,
+      "defaultValue": true
+    },
+    {
+      "id": "noSUP",
+      "name": "noSUP",
+      "section": "addons",
      "value": true,
      "defaultValue": true
    },
    {
      "id": "SBL",
      "name": "SBL",
-      "iconName": "SBL",
-      "section": "routes",
+      "section": "blockades",
+      "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,75 @@
    "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-twr": "TWR",
-    "filter-skr": "SKR",
+    "filter-noComments": "NO COMMENTS",
+    "filter-withComments": "COMMENTS",
+    "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": {
+      "quick": "QUICK FILTERS",
+      "reality": "SCENERY REALITY",
+      "package-access": "IN-GAME AVAILABILITY",
+      "access": "GENERAL AVAILABILITY",
+      "control": "CONTROLS",
+      "signals": "SIGNALLING",
+      "addons": "ADDITIONAL PROGRAMS",
+      "blockades": "BLOCK SIGNALLING",
+      "status": "ONLINE STATUS"
+    },
+
+    "all-available": "ALL AVAILABLE",
+    "all-free": "CURRENTLY FREE",
+
    "endingStatus": "ENDS SOON",
    "afkStatus": "AFK",
    "noSpaceStatus": "NO SPACE",
    "unavailableStatus": "UNAVAILABLE",

-    "title": "STATION FILTER",
-    "default": "DEFAULT",
-    "not-default": "OTHER",
+    "title": "STATION FILTERS",
+    "default": "IN-GAME",
+    "not-default": "ADDITIONAL",
    "real": "REAL",
    "fictional": "FICTIONAL",
    "unavailable": "UNSUPPORTED",
@@ -143,12 +175,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 +211,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 +223,11 @@
    "dispatcher-lvl": "Dispatcher\nlevel",
    "routes": "Routes\ndouble / single",
    "general": "General info",
-    "users": "Drivers online",
-    "spawns": "Spawns online",
-    "timetables": "Active timetables",
+    "user": "Drivers online",
+    "spawn": "Spawns online",
+    "timetableAll": "Active timetables",
+    "timetableConfirmed": "Confirmed timetables",
+    "timetableUnconfirmed": "Unconfirmed timetables",
    "no-stations": "No stations to show here!",
    "scenery-search": "Search for scenery..."
  },
@@ -234,6 +278,7 @@
    "title": "DISPATCHER HISTORY",
    "loading": "Loading dispatcher history data...",
    "no-history": "No dispatcher history found!",
+    "data-refreshed-at": "Data refreshed at",

    "section-timetables": "TIMETABLES",
    "section-dispatchers": "DISPATCHERS",
@@ -243,7 +288,7 @@

    "route-length": "Route length:",
    "station-count": "Stations:",
-    "dispatcher-name": "Created by",
+    "dispatcher-name": "Author",
    "timetable-day": "Timetable created at",
    "timetable-active": "ACTIVE",
    "timetable-fulfilled": "FULFILLED",
@@ -251,13 +296,15 @@

    "online-since": "ONLINE SINCE",
    "duty-lasted": "The duty lasted",
-    "minutes": "{minutes} mins",
-    "hours": "{hours}h {minutes} mins",

-    "stock-info": "STOCK INFO",
+    "hours": "{value} hour | {value} hours",
+    "minutes": "{value} min | {value} mins",
+    "seconds": "{value} s",
+
+    "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...",

@@ -272,10 +319,13 @@
    "stats-distance": "DISTANCE",
    "stats-stations": "STATIONS",

-    "timetable-stats-total": "Today, dispatchers made so far {count} with total distance of {distance}",
-    "timetable-stats-longest": "The longest timetable today is #{id} made by {author} for {driver} - {distance}",
-    "timetable-stats-most-active": "The most active dispatcher today is {dispatcher} who created {count}",
-    "timetable-stats-most-active-many": "The most active dispatchers today are {dispatchers} who created {count} each",
+    "timetable-stats-title": "Daily stats on {date}",
+    "timetable-stats-total": "Issued timetables: {count} (total distance: {distance})",
+    "timetable-stats-longest": "The longest timetable: #{id} (made by {author} for {driver}, distance: {distance})",
+    "timetable-stats-most-active-dr": "The most active dispatcher: {dispatcher} (created {count})",
+    "timetable-stats-most-active-dr-many": "The most active dispatchers: {dispatchers} (created {count} each)",
+    "timetable-stats-most-active-driver": "The most active driver: {driver} (total driven distance: {distance})",
+    "timetable-stats-longest-duties": "The longest service: {dispatcher} at {station} (duration: {duration})",

    "timetable-count": "timetable | timetables",

@@ -286,7 +336,18 @@
    "driver-stats-info": "Enter a proper nickname into filters [F] to see user's driving statistics!",

    "stats-loading": "Fetching statistics...",
-    "stats-error": "Oops! An unexpected error occurred while trying to fetch statistics! :/"
+    "stats-error": "Oops! An unexpected error occurred while trying to fetch statistics! :/",
+
+    "timetable-location-signal": "signal:",
+    "timetable-location-route": "route:",
+
+    "history-name": "Scenery name",
+    "history-hash": "Hash",
+    "history-dispatcher": "Dispatcher",
+    "history-level": "Level",
+    "history-rate": "Rate",
+    "history-region": "Region",
+    "history-date": "Service date"
  },
  "scenery": {
    "users": "PLAYERS ONLINE",
@@ -301,14 +362,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-dispatchers-history": "Scenery dispatchers history",
+    "option-timetables-history": "Timetables history",
+    "option-dispatchers-history": "Dispatchers history",

    "timetable-author-title": "Issued by",
    "timetable-author-unknown": "Author unknown",
@@ -320,10 +382,21 @@
    "timetables-history-author": "TT author",
    "timetables-history-date": "Date",

+    "dispatchers-history-hash": "Hash",
+    "dispatchers-history-dispatcher": "Dispatcher",
+    "dispatchers-history-level": "Level",
+    "dispatchers-history-rate": "Rate",
+    "dispatchers-history-date": "Service date",
+
    "req-level": "all dispatcher levels | dispatcher level {lvl} required | dispatcher level {lvl} required",
    "history-list-empty": "No recorded scenery history!",

-    "forum-topic": "Official {name} forum topic"
+    "forum-topic": "Official {name} forum topic",
+
+    "pragotron-link": "Timetable pallet board (beta)",
+    "tablice-link": "Timetable summary board (by Thundo)",
+
+    "bottom-info": "Show full history in the Journal tab"
  },
  "availability": {
    "title": "Availability",
@@ -338,7 +411,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,16 +99,19 @@
    "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-total-stops": "stacje",
+    "sort-routeDistance": "kilometraż",
+    "sort-allStopsCount": "stacje",
    "sort-beginDate": "data",
    "sort-timetableId": "ID rozkładu",
    "sort-timestampFrom": "data",
    "sort-duration": "czas dyżuru",
    "sort-id": "id rozkładu",
-    
+
    "sort-mass": "masa",
    "sort-speed": "prędkość",
    "sort-length": "długość",
@@ -114,23 +120,47 @@
    "sort-delay": "opóźnienie",
    "sort-comments": "uwagi ekspl.",

-    "filter-comments": "UWAGI EKSPLOATACYJNE",
-    "filter-twr": "TWR",
-    "filter-skr": "PRZEKR. SKRAJNIA",
+    "filter-withComments": "UWAGI EKSPLOATACYJNE",
+    "filter-noComments": "BEZ UWAG",
+    "filter-twr": "WYS. RYZYKA",
+    "filter-skr": "SKRAJNIA",
+    "filter-twr-skr": "WSZYSTKIE",
+    "filter-common": "ZWYKŁE",
    "filter-passenger": "PASAŻERSKIE",
    "filter-freight": "TOWAROWE",
    "filter-other": "INNE",
    "filter-noTimetable": "BEZ RJ",
+    "filter-withTimetable": "ROZKŁAD JAZDY",

    "filter-reset": "ZRESETUJ FILTRY",
    "filter-clear": "WYŁĄCZ FILTRY",

+    "filter-section-timetable-status": "STATUS ROZKŁADU JAZDY",
+    "filter-section-twrskr": "UWAGI",
+
    "filter-all": "WSZYSTKIE",
    "filter-abandoned": "PORZUCONE",
    "filter-fulfilled": "WYPEŁNIONE",
    "filter-active": "AKTYWNE"
  },
  "filters": {
+    "desc": " &bull; Kliknięcie: zaznaczenie / odznaczenie filtru <br /> &bull; Podwójne kliknięcie: odznaczenie reszty filtrów z <b class='text--primary'>grupy</b> <br /> &bull; <span style='color: coral'>RESET</span>: zresetowanie filtrów z <b class='text--primary'>grupy</b>",
+
+    "sections": {
+      "quick": "SZYBKIE FILTRY",
+      "reality": "FIKCYJNOŚĆ SCENERII",
+      "package-access": "DOSTĘPNOŚĆ W PACZCE",
+      "access": "DOSTĘPNOŚĆ OGÓLNA",
+      "control": "TYP STEROWANIA",
+      "signals": "TYP SYGNALIZACJI",
+      "addons": "DODATKOWE PROGRAMY",
+      "blockades": "BLOKADY LINIOWE",
+      "status": "STATUS ONLINE"
+    },
+
+    "all-available": "WSZYSTKIE DOSTĘPNE",
+    "all-free": "WSZYSTKIE WOLNE",
+
    "endingStatus": "KOŃCZY",
    "afkStatus": "Z/W",
    "noSpaceStatus": "BRAK MIEJSCA",
@@ -146,18 +176,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 +207,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",
-    "spawns": "Otwarte spawny",
-    "timetables": "Aktywne rozkłady jazdy",
+    "user": "Maszyniści online",
+    "spawn": "Otwarte spawny",
+    "timetableAll": "Aktywne rozkłady jazdy",
+    "timetableConfirmed": "Zatwierdzone rozkłady jazdy",
+    "timetableUnconfirmed": "Niezatwierdzone rozkłady jazdy",
    "no-stations": "Brak stacji do wyświetlenia!",
    "scenery-search": "Wyszukaj scenerię..."
  },
@@ -238,6 +283,7 @@
    "title": "HISTORIA DYŻURÓW",
    "loading": "Ładowanie historii dyżurów...",
    "no-history": "Brak historii dyżurów dla tej scenerii!",
+    "data-refreshed-at": "Dane odświeżone o",

    "section-timetables": "ROZKŁADY JAZDY",
    "section-dispatchers": "DYŻURNI",
@@ -247,21 +293,22 @@

    "online-since": "ONLINE OD",
    "duty-lasted": "Dyżur trwał",
-    "minutes": "{minutes} min.",
-    "hours": "{hours} godz. {minutes} min.",
+    "hours": "{value} godz.",
+    "minutes": "{value} min.",
+    "seconds": "{value} sek.",

    "route-length": "Kilometraż:",
    "station-count": "Stacje:",
-    "dispatcher-name": "Wystawiony przez dyżurnego",
+    "dispatcher-name": "Autor",
    "timetable-day": "Rozkład z dnia",
    "timetable-active": "AKTYWNY",
    "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ę...",

@@ -276,10 +323,12 @@
    "stats-distance": "DYSTANS",
    "stats-stations": "STACJE",

-    "timetable-stats-total": "Dyżurni stworzyli dziś {count}  o łącznym dystansie {distance}",
-    "timetable-stats-longest": "Najdłuższym rozkładem jazdy jest dzisiaj #{id} stworzony przez dyżurnego {author} dla maszynisty {driver} - {distance}",
-    "timetable-stats-most-active": "Dzisiejszym najaktywniejszym dyżurnym jest {dispatcher}, który stworzył {count}",
-    "timetable-stats-most-active-many": "Dzisiejszymi najaktywniejszymi dyżurnymi są {dispatchers}, którzy stworzyli po {count}",
+    "timetable-stats-total": "Stworzone rozkłady jazdy: {count} (łączny dystans: {distance})",
+    "timetable-stats-longest": "Najdłuższy rozkład jazdy: #{id} (stworzony przez dyżurnego {author} dla maszynisty {driver} o dystansie {distance})",
+    "timetable-stats-most-active-dr": "Najaktywniejszy dyżurny: {dispatcher} (stworzył {count})",
+    "timetable-stats-most-active-dr-many": "Najaktywniejsi dyżurni: {dispatchers} (stworzyli po {count})",
+    "timetable-stats-most-active-driver": "Najaktywniejszy maszynista: {driver} (łączny przejechany dystans: {distance})",
+    "timetable-stats-longest-duties": "Najdłuższa służba: {dispatcher} na scenerii {station} (czas trwania: {duration})",

    "timetable-count": "rozkład jazdy | rozkładów jazdy",

@@ -290,7 +339,18 @@
    "driver-stats-info": "Wpisz nazwę użytkownika w filtrach [F], aby zobaczyć jego statystyki maszynisty!",

    "stats-loading": "Pobieranie statystyk...",
-    "stats-error": "Ups! Wystąpił błąd podczas próby pobrania statystyk! :/"
+    "stats-error": "Ups! Wystąpił błąd podczas próby pobrania statystyk! :/",
+
+    "timetable-location-signal": "semafor:",
+    "timetable-location-route": "szlak:",
+
+    "history-name": "Sceneria",
+    "history-hash": "Hash",
+    "history-dispatcher": "Dyżurny",
+    "history-level": "Poziom",
+    "history-rate": "Ocena",
+    "history-region": "Region",
+    "history-date": "Data służby"
  },
  "scenery": {
    "users": "GRACZE ONLINE",
@@ -303,16 +363,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-dispatchers-history": "Historia dyżurów scenerii",
+    "option-timetables-history": "Historia rozkładów",
+    "option-dispatchers-history": "Historia dyżurów",

    "timetable-author-title": "Wydany przez",
    "timetable-author-unknown": "Autor nieznany",
@@ -324,10 +385,21 @@
    "timetables-history-author": "Autor RJ",
    "timetables-history-date": "Data",

+    "dispatchers-history-hash": "Hash",
+    "dispatchers-history-dispatcher": "Dyżurny",
+    "dispatchers-history-level": "Poziom",
+    "dispatchers-history-rate": "Ocena",
+    "dispatchers-history-date": "Data służby",
+
    "req-level": "ogólnodostępna | minimum {lvl} poziom dyżurnego | minimum {lvl} poziom dyżurnego",
    "history-list-empty": "Brak historii dla tej scenerii!",

-    "forum-topic": "Oficjalny wątek scenerii {name}"
+    "forum-topic": "Oficjalny wątek scenerii {name}",
+
+    "pragotron-link": "Paletowa tablica informacyjna (beta)",
+    "tablice-link": "Tablica informacyjna zbiorcza (autorstwa Thundo)",
+
+    "bottom-info": "Pokaż pełną historię w zakładce Dziennika"
  },
  "availability": {
    "title": "Dostępność",
@@ -342,7 +414,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) => {
@@ -1,50 +1,77 @@
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  methods: {
-    localeDate(dateString: string, locale: string) {
-      return new Date(dateString).toLocaleDateString(locale == 'pl' ? 'pl-PL' : 'en-GB', {
-        weekday: 'long',
-        day: 'numeric',
-        month: '2-digit',
-        year: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit',
-      });
-    },
-
-    localeDay(dateString: string, locale: string) {
-      return new Date(dateString).toLocaleDateString(locale == 'pl' ? 'pl-PL' : 'en-GB', {
-        day: 'numeric',
-        month: '2-digit',
-        year: 'numeric',
-      });
-    },
-
-    localeTime(dateString: string, locale: string) {
-      return new Date(dateString).toLocaleTimeString(locale == 'pl' ? 'pl-PL' : 'en-GB', {
-        hour: '2-digit',
-        minute: '2-digit',
-      });
-    },
-
-    timestampToString(timestamp: number | null) {
-      return timestamp
-        ? new Date(timestamp).toLocaleTimeString('pl-PL', {
-            hour: '2-digit',
-            minute: '2-digit',
-          })
-        : '';
-    },
-
-    calculateDuration(timestampMs: number) {
-      const minsTotal = Math.round(timestampMs / 60000);
-      const hoursTotal = Math.floor(minsTotal / 60);
-      const minsInHour = minsTotal % 60;
-
-      return minsTotal > 60
-        ? this.$t('journal.hours', { hours: hoursTotal, minutes: minsInHour })
-        : this.$t('journal.minutes', { minutes: minsTotal });
-    },
-  },
-});
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  methods: {
+    localeDate(dateString: string, locale: string) {
+      return new Date(dateString).toLocaleDateString(locale == 'pl' ? 'pl-PL' : 'en-GB', {
+        weekday: 'long',
+        day: 'numeric',
+        month: '2-digit',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      });
+    },
+
+    localeDay(dateString: string, locale: string) {
+      return new Date(dateString).toLocaleDateString(locale == 'pl' ? 'pl-PL' : 'en-GB', {
+        day: 'numeric',
+        month: '2-digit',
+        year: 'numeric',
+      });
+    },
+
+    localeDateTime(dateString: string, locale: string) {
+      return new Date(dateString).toLocaleString(locale == 'pl' ? 'pl-PL' : 'en-GB', {
+        timeStyle: 'short',
+        dateStyle: 'medium'
+      });
+    },
+
+    localeTime(dateString: string, locale: string) {
+      return new Date(dateString).toLocaleTimeString(locale == 'pl' ? 'pl-PL' : 'en-GB', {
+        hour: '2-digit',
+        minute: '2-digit',
+      });
+    },
+
+    stringToDate(dateString?: string) {
+      return dateString ? new Date(dateString) : null;
+    },
+
+    parseDateToTimeString(date: Date | null) {
+      return (
+        date?.toLocaleTimeString('pl-PL', {
+          hour: '2-digit',
+          minute: '2-digit',
+        }) || ''
+      );
+    },
+
+    timestampToString(timestamp: number | null) {
+      return timestamp
+        ? new Date(timestamp).toLocaleTimeString('pl-PL', {
+            hour: '2-digit',
+            minute: '2-digit',
+          })
+        : '';
+    },
+
+    calculateDuration(timestampMs: number, showSeconds = false) {
+      const secondsTotal = Math.floor(timestampMs / 1000);
+      const minsTotal = Math.round(timestampMs / 60000);
+      const hoursTotal = Math.floor(minsTotal / 60);
+      const minsInHour = minsTotal % 60;
+
+      return minsTotal >= 60
+        ? `${this.$t('journal.hours', { value: hoursTotal }, hoursTotal)} ${this.$t(
+            'journal.minutes',
+            { value: minsInHour },
+            minsInHour
+          )}`
+        : showSeconds && secondsTotal <= 60
+        ? this.$t('journal.seconds', { value: secondsTotal }, secondsTotal)
+        : this.$t('journal.minutes', { value: minsTotal }, minsTotal);
+    },
+  },
+});
@@ -0,0 +1,26 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  data: () => ({
+    observer: null as IntersectionObserver | null,
+    observerTarget: null as Element | null,
+  }),
+
+  methods: {
+    mountObserver(actionFunction: () => void, target: Element) {
+      this.observer = new IntersectionObserver((entries) => {
+        console.log(entries);
+        
+        if (entries[0].intersectionRatio > 0.5) actionFunction();
+      }, { threshold: 0.2 });
+
+      this.observer.observe(target);
+    },
+
+    unmountObserver() {
+      if (!this.observerTarget) return;
+
+      this.observer?.unobserve(this.observerTarget);
+    },
+  },
+});
@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue';
+import { Ref, defineComponent } from 'vue';
 import { useStore } from '../store/store';

 export default defineComponent({
@@ -15,15 +15,17 @@ export default defineComponent({
  },

  methods: {
-    selectModalTrain(trainId: string) {
+    selectModalTrain(trainId: string, target?: EventTarget | null) {
      this.store.chosenModalTrainId = trainId;
      document.body.classList.add('no-scroll');
+      if (target) this.store.modalLastClickedTarget = target;
    },

    closeModal() {
      this.store.chosenModalTrainId = undefined;

      setTimeout(() => {
+        (this.store.modalLastClickedTarget as any)?.focus();
        document.body.classList.remove('no-scroll');
      }, 150);
    },
@@ -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",
-    fulfilled = "fulfilled",
-    abandoned = "abandoned",
-    all = "all"
-}
+export const enum JournalFilterType {
+  ACTIVE = 'active',
+  FULFILLED = 'fulfilled',
+  ABANDONED = 'abandoned',
+  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 {
-    comments = "comments",
-    twr = "twr",
-    skr = "skr",
-    passenger = "passenger",
-    freight = "freight",
-    other = "other",
-    noTimetable = "noTimetable"
+export enum TrainFilterSection {
+  TRAIN_TYPE = 'TRAIN_TYPE',
+  TIMETABLE_TYPE = 'TIMETABLE_TYPE',
+  COMMENTS = 'COMMENTS',
+  TIMETABLE = 'TIMETABLE',
+}
+
+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;
-  "SCS": boolean;
-  "SPE": boolean;
-  "SUP": boolean;
+  SPK: boolean;
+  SCS: boolean;
+  SPE: 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 {
-    trainId: string;
-    trainNo: number;
-    
-    driverName: string;
-    driverId: number;
-    currentStationName: string;
-    currentStationHash: string;
-    category: string;
-    stopInfo: TrainStop;
+export enum StopStatus {
+  'arriving' = 'arriving',
+  'departed' = 'departed',
+  'departed-away' = 'departed-away',
+  'online' = 'online',
+  'stopped' = 'stopped',
+  'terminated' = 'terminated',
+}

-    terminatesAt: string;
-    beginsAt: string;
+export interface ScheduledTrain {
+  trainId: string;
+  trainNo: number;

-    prevStationName: string;
-    nextStationName: string;
+  driverName: string;
+  driverId: number;
+  currentStationName: string;
+  currentStationHash: string;
+  category: string;
+  stopInfo: TrainStop;

-    arrivingLine: string | null;
-    departureLine: string | null;
+  terminatesAt: string;
+  beginsAt: string;

-    prevDepartureLine: string | null;
-    nextArrivalLine: string | null;
+  prevStationName: string;
+  nextStationName: string;

-    signal: string;
-    connectedTrack: string;
+  arrivingLine: string | null;
+  departureLine: string | null;

-    stopLabel: string;
-    stopStatus: string;
-    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 ScheduledTrain from './ScheduledTrain';
+import { Availability } from './store/storeTypes';
+import {ScheduledTrain} from './ScheduledTrain';
 import StationRoutes from './StationRoutes';

 export default interface Station {
@@ -8,9 +8,11 @@ export default interface Station {
  generalInfo?: {
    name: string;
    url: string;
-    
+    abbr: string;
+
    reqLevel: number;
    // supportersOnly: boolean;
+
    
    lines: string;
    project: string;
@@ -39,7 +41,7 @@ export default interface Station {
    maxUsers: number;
    currentUsers: number;

-    spawns: { spawnName: string; spawnLength: number }[];
+    spawns: { spawnName: string; spawnLength: number; isElectrified: boolean }[];
    dispatcherRate: number;
    dispatcherName: string;
    dispatcherExp: number;
@@ -15,12 +15,11 @@ export default interface Train {
  driverLevel: number;
  currentStationName: string;
  currentStationHash: string;
-  locoURL: string;
  locoType: string;
  online: boolean;
  lastSeen: number;
  region: string;
-  cars: string[];
+  stockList: string[];

  isTimeout: boolean;
  isSupporter: boolean;
@@ -0,0 +1,7 @@
+import { TrainFilterSection, TrainFilterType } from '../../enums/TrainFilterType'
+
+export interface TrainFilter {
+  id: TrainFilterType;
+  section: TrainFilterSection;
+  isActive: boolean;
+}
@@ -1,11 +1,13 @@
 export interface DispatcherHistory {
  id: string;
-  
+
  currentDuration: number;
  dispatcherId: number;
  dispatcherName: string;
  dispatcherLevel: number | null;
+  dispatcherRate: number;
  dispatcherIsSupporter: boolean;
+  dispatcherStatus?: number;
  isOnline: boolean;
  lastOnlineTimestamp: number;
  region: string;
@@ -13,4 +15,4 @@ export interface DispatcherHistory {
  stationName: string;
  timestampFrom: number;
  timestampTo?: number;
-}
+}
@@ -11,7 +11,7 @@ export default interface StationAPIData {
  lastSeen: number;
  dispatcherExp: number;
  nameFromHeader: string;
-  spawnString: string;
+  spawnString: string | null;
  networkConnectionString: string;
  isOnline: number;
  dispatcherRate: number;
@@ -14,6 +14,17 @@ export interface ITimetablesDailyStats {
    name: string;
    count: number;
  }[];
+
+  mostActiveDrivers: {
+    name: string;
+    distance: number;
+  }[];
+
+  longestDuties: {
+    name: string;
+    duration: number;
+    station: string;
+  }[];
 }

 export interface ITimetablesDailyStatsResponse {
@@ -26,5 +37,16 @@ export interface ITimetablesDailyStatsResponse {
    name: string;
    count: number;
  }[];
+
+  mostActiveDrivers: {
+    name: string;
+    distance: number;
+  }[];
+
+  longestDuties: {
+    name: string;
+    duration: number;
+    station: string;
+  }[];
 }

@@ -1,10 +1,12 @@
 export interface TimetableHistory {
  id: number;
-  
+  createdAt: string;
+  updatedAt: string;
+
  timetableId: number;
  trainNo: number;
  trainCategoryCode: string;
-  
+
  driverId: number;
  driverName: string;
  driverLevel: number | null;
@@ -14,6 +16,7 @@ export interface TimetableHistory {
  twr: number;
  skr: number;
  sceneriesString: string;
+  currentLocation: string[];

  routeDistance: number;
  currentDistance: number;
@@ -33,7 +36,11 @@ export interface TimetableHistory {
  authorName?: string;
  authorId?: number;

+  stopsString?: string;
+
  stockString?: string;
+  stockHistory: string[];
+
  stockMass?: number;
  stockLength?: number;
  maxSpeed?: number;
@@ -41,10 +48,20 @@ export interface TimetableHistory {
  hashesString?: string;
  currentSceneryName?: string;
  currentSceneryHash?: string;
+
+  routeSceneries?: string;
+
+  checkpointArrivals?: string[];
+  checkpointDepartures?: string[];
+
+  checkpointArrivalsScheduled?: string[];
+  checkpointDeparturesScheduled?: string[];
+
+  checkpointStopTypes?: string[];
 }

 export interface SceneryTimetableHistory {
-  sceneryTimetables: TimetableHistory[];
-  totalCount: number;
-  sceneryName: string;
+  timetables: TimetableHistory[];
+  // totalCount: number;
+  // sceneryName: string;
 }
@@ -0,0 +1,23 @@
+import { JournalTimetableSorter } from '../../types/JournalTimetablesTypes';
+
+export interface TimetablesQueryParams {
+  driverName?: string;
+  trainNo?: string;
+  timetableId?: 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?: {
-    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[];
-  };
+  timetable?: TrainTimetable;
 }
@@ -0,0 +1,13 @@
+export interface RollingStockGithubData {
+  usage: Record<string, string>;
+  info: RollingStockInfo;
+}
+
+export interface RollingStockInfo {
+  'loco-e': [string, string, string, string, boolean][];
+  'loco-s': [string, string, string, string, boolean][];
+  'loco-szt': [string, string, string, string, boolean][];
+  'loco-ezt': [string, string, string, string, boolean][];
+  'car-passenger': [string, string, boolean, boolean, string][];
+  'car-cargo': [string, string, boolean, boolean, string][];
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Spythere	af9073ab98	Merge do wersji 1.17.1 Wersja 1.17.1	2023-10-03 21:58:23 +02:00
Spythere	800fc35e63	pliki lock	2023-10-03 21:53:59 +02:00
Spythere	d5649d221b	hotfixy	2023-10-03 21:51:00 +02:00
Spythere	5b35fac512	miniaturki c.d.	2023-10-03 21:31:06 +02:00
Spythere	d5bc90f668	mock data	2023-10-02 22:09:27 +02:00
Spythere	6d663886f0	bump wersji	2023-10-02 22:06:58 +02:00
Spythere	85a1a0216e	poprawki miniatur	2023-10-02 22:05:54 +02:00
Spythere	4ac054e947	miniaturki 2EN57	2023-10-01 15:11:53 +02:00
Spythere	ba70fa1316	miniaturki pojazdów c.d.	2023-10-01 15:08:01 +02:00
Spythere	77e6b20d0c	obsługa niezaładowanych miniaturek pojazdów	2023-10-01 01:41:14 +02:00
Spythere	f60263c923	mocking danych	2023-10-01 00:23:17 +02:00
Spythere	6aec1a75c9	cleanup c.d.	2023-09-29 16:49:37 +02:00
Spythere	d28d600833	code cleanup dziennika	2023-09-29 03:03:59 +02:00
Spythere	a353eb3185	Meta tagi; aktualizacja paczek Meta tagi; aktualizacja paczek	2023-09-26 14:44:48 +02:00
Spythere	c5735a6953	pliki lock	2023-09-26 14:42:11 +02:00
Spythere	7930f7fc8a	package.json	2023-09-26 14:36:01 +02:00
Spythere	68f4d54619	index: meta tagi	2023-09-26 14:33:58 +02:00
Spythere	c4f9738589	Merge #54 (hotfix) hotfix: wersja WS	2023-09-07 15:21:28 +02:00
Spythere	dd916afd1d	hotfix: wersja WS	2023-09-07 15:20:37 +02:00
Spythere	ea5c9e0028	Merge do wersji 1.17.0 Wersja 1.17.0	2023-09-06 15:43:52 +02:00
Spythere	eb7c2d7132	revamp postoju i strzałek w RJ scenerii	2023-09-05 16:48:26 +02:00
Spythere	ee7c50f59b	szybkie filtry (wip)	2023-09-05 16:10:38 +02:00
Spythere	439f59fedc	poprawki filtrów scenerii	2023-09-05 15:40:32 +02:00
Spythere	c47d839ce3	poprawki kolorów	2023-09-04 18:50:12 +02:00
Spythere	f77c13cbcf	srjp: poprawki dostępności modalu	2023-09-04 18:37:52 +02:00
Spythere	dbbbd33100	poprawki dzienników	2023-09-03 19:24:32 +02:00
Spythere	14d13360a8	dziennik dr: animacje	2023-09-03 18:47:01 +02:00
Spythere	dc862252ba	dziennik dr: kolumna regionów	2023-09-03 18:34:45 +02:00
Spythere	e5fe727ccd	aktualizacja URLi	2023-09-03 17:58:55 +02:00
Spythere	e836bbed0c	szybkie filtry (wip)	2023-09-02 19:36:49 +02:00
Spythere	d4438fd215	station filters active indicator	2023-09-02 18:53:23 +02:00
Spythere	1550849360	dzienniki	2023-09-02 18:47:01 +02:00
Spythere	9d1dc4ffca	bump 1.17	2023-08-31 22:46:41 +02:00
Spythere	0397fa788d	zmiana wyglądu listy dzienników	2023-08-31 22:45:14 +02:00
Spythere	6e5696b0a6	daily stats hotfix	2023-08-31 21:46:05 +02:00
Spythere	4537341a57	odświeżony wygląd dziennika RJ	2023-08-30 20:31:40 +02:00
Spythere	c35c74bd4a	Merge pull request #52 fix: data wcześniejszego przyjazdu dla 0pt	2023-08-27 23:07:01 +02:00
Spythere	25735c5e6e	fix: data wcześniejszego przyjazdu dla 0pt	2023-08-27 22:45:36 +02:00
Spythere	41e60bc69e	Merge do wersji 1.16.3	2023-07-06 01:54:21 +02:00
Spythere	933bdecb3c	bump: 1.16.3	2023-07-02 14:50:55 +02:00
Spythere	10e183d96b	zamiana infinite scrolla na przyciski	2023-07-02 14:50:18 +02:00
Spythere	5429d39f5e	tłumaczenia historii dr scenerii	2023-07-01 23:39:08 +02:00
Spythere	ff31e7f903	bump: 1.16.2.1	2023-07-01 23:29:48 +02:00
Spythere	91f4c6bc57	Merge do wersji 1.16.2	2023-07-01 01:25:10 +02:00
Spythere	c133eb060b	bump: 1.16.2	2023-07-01 01:20:04 +02:00
Spythere	7ffc169d8a	hotfix	2023-07-01 01:19:50 +02:00
Spythere	1b85cc5f58	poprawki dziennika rj / dr	2023-06-30 20:50:03 +02:00
Spythere	72ff857fff	dodatkowe info o postojach w dzienniku RJ	2023-06-27 02:52:41 +02:00
Spythere	96d64e77fc	feature: nieskończona lista historii dr/rj scenerii	2023-06-24 13:46:37 +02:00
Spythere	6ceae3f161	revamp tabeli historii dyżurów	2023-06-23 14:19:28 +02:00
Spythere	8e8e27658c	Merge do wersji 1.16.1 Wersja 1.16.1	2023-06-22 19:27:39 +02:00
Spythere	9b6ace394a	bump v.1.16.1	2023-06-21 18:36:21 +02:00
Spythere	6cfeaa91bf	responsywność dailyStats	2023-06-21 18:35:23 +02:00
Spythere	08b208aeaa	fix tłumaczeń	2023-06-21 18:31:16 +02:00
Spythere	a089b5275b	hotfix daily stats	2023-06-21 18:30:02 +02:00
Spythere	8425cd4371	przyjazdy/odjazdy stacji pośrednich RJ w dzienniku	2023-06-21 18:26:16 +02:00
Spythere	dbdc517b87	fix tłumaczeń	2023-06-21 17:32:36 +02:00
Spythere	e271358a27	fix timetable id	2023-06-21 17:19:31 +02:00
Spythere	66262e3fcd	dodatkowe statystyki dnia	2023-06-21 17:16:02 +02:00
Spythere	5b2b6bdea2	bump 1.16.0.1	2023-06-16 01:17:33 +02:00
Spythere	c8587de6d9	npm update	2023-06-15 15:28:32 +02:00
Spythere	1f376085f2	feature: info o elektryfikacji spawnu na scenerii	2023-06-15 15:28:12 +02:00
Spythere	f28600a7fa	Merge do wersji 1.16.0 Wersja 1.16.0	2023-06-12 01:33:45 +02:00
Spythere	d59ead87e6	bump v1.16.0	2023-06-12 01:21:49 +02:00
Spythere	34d91bc800	poprawki w pokazywaniu statystyk	2023-06-12 01:19:31 +02:00
Spythere	cf9991d8a0	layout filtrów dzienników	2023-06-12 00:51:17 +02:00
Spythere	4ffb79d62b	poprawki pobierania danych	2023-06-11 21:47:50 +02:00
Spythere	d9f5edb4fe	poprawki tłumaczeń	2023-06-11 21:47:22 +02:00
Spythere	1b2112430a	feature: długości szlaków po kliknięciu	2023-06-08 23:35:57 +02:00
Spythere	0a972a23ef	fix: asynchroniczność pobierania danych z API	2023-06-04 13:35:53 +02:00
Spythere	6d52724d06	zapamiętywanie stanu statystyk dnia	2023-06-04 12:19:46 +02:00
Spythere	99415c35d3	rozbudowane filtry dziennika RJ	2023-06-04 12:06:15 +02:00
Spythere	c3f687d439	hotfixy dzienników	2023-06-04 01:45:58 +02:00
Spythere	266edfd6e6	reorder typów danych	2023-06-04 00:33:43 +02:00
Spythere	d32d5ad91b	poprawki dzienników	2023-06-03 18:55:44 +02:00
Spythere	c3481470cb	optymalizacja zapytań; filtr scenerii pocz.	2023-06-03 15:49:15 +02:00
Spythere	57e88b9abc	Merge do wersji 1.15.1 Wersja 1.15.1	2023-06-02 20:09:43 +02:00
Spythere	44ebf53798	poprawki pwa	2023-06-02 20:06:25 +02:00
Spythere	145dc72b6b	pwa: zmiana na autoUpdate	2023-06-02 19:41:33 +02:00
Spythere	b7f3761940	Merge do wersji 1.15.0 Wersja 1.15.0	2023-06-02 01:16:37 +02:00
Spythere	ea7c49dfb3	bump: 1.15.0	2023-06-02 01:10:01 +02:00
Spythere	5d6785813a	fix: odznaki TWR/SKR; dodano do dziennika	2023-06-02 01:07:44 +02:00
Spythere	a0054aed14	fix: optymalizacja zapytań historii RJ scenerii	2023-06-02 00:51:03 +02:00
Spythere	471e6f5216	Wersja 1.14.3 Wersja 1.14.3	2023-05-18 02:42:27 +02:00
Spythere	a617eef00e	bump 1.14.3	2023-05-18 02:38:13 +02:00
Spythere	38e700ecd6	migracja z route na routeNames	2023-05-18 02:37:27 +02:00
Spythere	da1be0e10a	Wersja 1.14.2	2023-05-17 02:24:05 +02:00
Spythere	f49bb12948	bump 1.14.2	2023-05-17 02:21:13 +02:00
Spythere	02673a3d70	poprawki filtrów scenerii	2023-05-16 14:27:31 +02:00
Spythere	4ddc7345df	poprawki filtrów RJ	2023-05-16 02:40:08 +02:00
Spythere	5d822684c0	feature: rozszerzone filtry RJ	2023-05-14 15:05:51 +02:00
Spythere	69fa15c70a	v1.14.1 v1.14.1	2023-04-13 19:25:30 +02:00
Spythere	9192067388	1.14.1	2023-04-13 19:21:36 +02:00
Spythere	2b41e5b857	hotfix	2023-04-13 19:21:24 +02:00
Spythere	674680ff14	1.14: hotfixy 1.14 hotfixy	2023-04-13 19:15:38 +02:00
Spythere	475bd2ff10	przeniesienie skrótów do widoku scenerii	2023-04-13 19:11:44 +02:00
Spythere	074d1eb155	Hotfix tłumaczeń	2023-04-13 18:50:00 +02:00
Spythere	378393de89	Wersja 1.14.0 Wersja 1.14.0	2023-04-13 15:45:39 +02:00
Spythere	03e61083a7	tłumaczenie stopki	2023-04-13 15:37:34 +02:00
Spythere	0b746fce8c	hotfix headera	2023-04-13 15:32:41 +02:00
Spythere	5883e710be	bump wersji: 1.14	2023-04-13 15:26:22 +02:00
Spythere	3d0695a17b	Poprawki w headerze i stopce	2023-04-13 15:25:39 +02:00
Spythere	4adb76eeb0	feature: podpisy status indicatorów dla RJ	2023-04-11 00:33:14 +02:00
Spythere	4c41076519	feature: skrót posterunku w tabelce	2023-04-09 01:37:11 +02:00
Spythere	77f61d17fd	hotfix: wygląd badge'a	2023-04-09 00:19:53 +02:00
Spythere	032a84cbcf	feature: historia zmian w zestawieniu pociągów	2023-03-20 22:39:23 +01:00
Spythere	de9851ebcc	Wersja 1.13.0 Wersja 1.13.0	2023-03-16 01:31:18 +01:00
Spythere	ff78eba927	hotfixy filtrów	2023-03-15 18:15:01 +01:00
Spythere	e4c5f6a322	filtry pociągów	2023-03-15 17:56:27 +01:00
Spythere	0a78761928	hotfix tłumaczeń	2023-03-15 15:34:36 +01:00
Spythere	4843043c29	bump wersji: 1.13.0	2023-03-15 15:20:28 +01:00
Spythere	9e1df1fb61	filtry pociągów	2023-03-15 15:19:50 +01:00
Spythere	021474cfb0	fix: tłumaczenia; hotfixy	2023-03-14 23:13:37 +01:00
Spythere	7d0e68862c	filtry scenerii	2023-03-14 21:42:39 +01:00
Spythere	653d45dfc6	scenerie: remake filtrów	2023-03-13 22:26:00 +01:00
Spythere	4a4e1240a4	widok scenerii: odnośniki do tablic przy aktywnych RJ	2023-03-10 16:59:16 +01:00
Spythere	14ca48a90d	hotfix	2023-03-10 16:30:36 +01:00
Spythere	a02f9804b1	dziennik RJ: dodatkowe info	2023-03-10 16:30:31 +01:00
Spythere	c5efc6fbac	bump: wersja 1.12.2	2023-03-10 02:03:37 +01:00
Spythere	cacd0a1e4e	fix: data stworzenia RJ	2023-03-10 01:53:19 +01:00
Spythere	50375099ab	update url api	2023-03-10 01:42:10 +01:00
Spythere	6af67ec741	fix: tłumaczenia filtrów	2023-03-09 14:35:03 +01:00
Spythere	c64112c86a	dziennik RJ: dodatkowe informacje	2023-03-09 14:28:16 +01:00
Spythere	0434702d3b	update: URL api	2023-03-09 13:41:59 +01:00
Spythere	dd7d1b0bb0	Wersja 1.12.1 Wersja 1.12.1	2023-02-26 14:20:40 +01:00
Spythere	68934a89a4	bump: wersja 1.12.1	2023-02-26 14:16:13 +01:00
Spythere	b88a240ec1	feature: like count historii dyżurnych	2023-02-26 14:14:32 +01:00
Spythere	eaa34f3359	hotfix: dostępność grubości czcionki	2023-02-26 13:50:47 +01:00