Merge do wersji 1.17.1

Wersja 1.17.1

.gitignore

@@ -31,6 +31,7 @@ node_modules
 .firebase
 .firebaserc
 
+# Env
 .env
 
 .fake

index.html

@@ -16,14 +16,30 @@
     <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" />
 
+    <!-- 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>
 
@@ -32,4 +48,3 @@
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
-

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stacjownik",
-  "version": "1.16.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%",

public/img/icons/safari-pinned-tab.svg

@@ -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>

src/App.scss

@@ -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 {

src/components/Global/AddDataButton.vue

@@ -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>

src/components/Global/ProgressBar.vue

@@ -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>

src/components/Global/StationStatusBadge.vue

@@ -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>

src/components/Global/StockList.vue

@@ -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>

src/components/Global/StopDate.vue

@@ -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>

src/components/Global/TrainThumbnail.vue

@@ -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>

src/components/JournalView/DailyStats.vue

@@ -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,109 +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, onActivated, onDeactivated, onMounted, 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';
-import StorageManager from '../../scripts/managers/storageManager';
 
-const intervalId = ref(-1);
+export default defineComponent({
+  mixins: [dateMixin],
+  emits: ['toggleStatsOpen'],
 
-const emit = defineEmits<{
-  (e: 'toggleStatsOpen', value: boolean): void;
-}>();
+  data() {
+    return {
+      DataStatus,
+      statsStatus: DataStatus.Loading,
+      intervalId: -1,
 
-const data = reactive({
-  statsStatus: DataStatus.Loading,
-
-  stats: {
-    totalTimetables: 0,
-    distanceSum: 0,
-    distanceAvg: 0,
-    timetableAuthor: '',
-    timetableDriver: '',
-    timetableId: 0,
-    timetableRouteDistance: 0,
-
-    mostActiveDispatchers: [],
-  } as ITimetablesDailyStats,
-});
-
-const firstPlaceDispatchers = computed(() => {
-  if (data.stats.mostActiveDispatchers.length == 0) return [];
-  const maxCount = data.stats.mostActiveDispatchers[0].count;
-
-  return data.stats.mostActiveDispatchers.filter((disp) => disp.count === maxCount);
-});
-
-async function fetchDailyTimetableStats() {
-  try {
-    const {
-      distanceAvg,
-      distanceSum,
-      maxTimetable,
-      totalTimetables,
-      mostActiveDispatchers,
-    }: ITimetablesDailyStatsResponse = await (
-      await axios.get(`${URLs.stacjownikAPI}/api/getDailyTimetableStats`)
-    ).data;
-
-    data.stats = {
-      totalTimetables,
-      distanceSum,
-      distanceAvg,
-      timetableAuthor: maxTimetable?.authorName || '',
-      timetableDriver: maxTimetable?.driverName || '',
-      timetableId: maxTimetable?.id || 0,
-      timetableRouteDistance: maxTimetable?.routeDistance || 0,
-
-      mostActiveDispatchers,
+      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();
+  deactivated() {
+    this.stopFetchingDailyStats();
+  },
 
-  if (intervalId.value != -1) return;
+  computed: {
+    firstPlaceDispatchers() {
+      if (this.stats.mostActiveDispatchers.length == 0) return [];
+      const maxCount = this.stats.mostActiveDispatchers[0].count;
 
-  intervalId.value = setInterval(fetchDailyTimetableStats, 60000);
-}
+      return this.stats.mostActiveDispatchers.filter((disp) => disp.count === maxCount);
+    },
+  },
 
-function stopFetchingDailyStats() {
-  clearInterval(intervalId.value);
-  intervalId.value = -1;
-}
+  methods: {
+    async fetchDailyTimetableStats() {
+      try {
+        const res: ITimetablesDailyStatsResponse = await (
+          await axios.get(`${URLs.stacjownikAPI}/api/getDailyTimetableStats`)
+        ).data;
 
-onActivated(() => {
-  startFetchingDailyStats();
-  emit('toggleStatsOpen', true);
+        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;
+    },
+  },
 });
-
-onDeactivated(() => {
-  stopFetchingDailyStats();
-});
-
 </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>
 

src/components/JournalView/JournalDispatchersList.vue

@@ -1,57 +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 class="like-count" v-if="item.dispatcherRate">
-            <img :src="getIcon('like')" alt="like icon" />
-            {{ item.dispatcherRate }}
-          </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">
@@ -60,19 +108,48 @@ 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, imageMixin],
+  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);
@@ -105,79 +182,60 @@ export default defineComponent({
 @import '../../styles/animations.scss';
 @import '../../styles/responsive.scss';
 @import '../../styles/badge.scss';
-@import '../../styles/JournalSection.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.5em 1em;
+  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;
-  justify-content: center;
-  align-items: center;
-  gap: 0.25em;
-  flex-wrap: wrap;
-
-  .level-badge {
-    margin-right: 0.25em;
-  }
-}
-
-.journal_day {
-  margin-bottom: 1em;
-  padding: 0.5em;
-  font-weight: bold;
-
-  background-color: #333;
-
-  span {
-    position: relative;
-    background-color: inherit;
-    z-index: 10;
-    padding-right: 1em;
-
-    font-weight: bold;
-  }
-}
-
-.like-count {
-  display: flex;
-  align-items: center;
-  gap: 0.25em;
-  font-size: 1.2em;
-  color: $accentCol;
-}
-
-@include smallScreen {
-  .journal_item {
-    flex-direction: column;
+  &--offline {
+    color: #ddd;
   }
 }
 </style>

src/components/JournalView/JournalStats.vue

@@ -49,7 +49,7 @@ let data = reactive({
     {
       name: 'driver',
       titlePath: 'journal.driver-stats-title',
-      inactive: true,
+      // inactive: true,
     },
   ] as { name: TStatTab; titlePath: string; inactive?: boolean }[],
 });

src/components/JournalView/JournalTimetables/JournalTimetablesList.vue

@@ -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>

src/components/JournalView/JournalTimetables/TimetableExtra.vue

@@ -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>

src/components/JournalView/JournalTimetables/TimetableGeneral.vue

@@ -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>

src/components/JournalView/JournalTimetables/TimetableHistoryList.vue

@@ -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>

src/components/JournalView/JournalTimetables/TimetableStatus.vue

@@ -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>

src/components/JournalView/JournalTimetables/TimetableStops.vue

@@ -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>

src/components/JournalView/JournalTimetablesList.vue

@@ -1,456 +0,0 @@
-<template>
-  <transition-group class="journal-list" tag="ul" name="list-anim">
-    <li
-      v-for="{ timetable, sceneryList, stockHistoryComp, ...item } in computedTimetableHistory"
-      class="journal_item"
-      :key="timetable.id"
-      @click="item.showExtra.value = !item.showExtra.value"
-    >
-      <div class="journal_item-info">
-        <div class="info-general">
-          <span
-            class="general-train"
-            tabindex="0"
-            @click.stop="showTimetable(timetable)"
-            @keydown.enter="showTimetable(timetable)"
-            style="cursor: pointer"
-          >
-            <span class="text--grayed">#{{ timetable.id }}</span>
-
-            <span class="badges" v-if="timetable.skr || timetable.twr">
-              <span class="train-badge twr" v-if="timetable.twr" :title="$t('general.TWR')">TWR</span>
-              <span class="train-badge skr" v-if="timetable.skr" :title="$t('general.SKR')">SKR</span>
-            </span>
-
-            <span>
-              <strong class="text--primary">
-                {{ timetable.trainCategoryCode }}
-              </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.filter((_, i) =>
-              !item.showExtra.value ? i == 0 || i == sceneryList.length - 1 : true
-            )"
-            :key="scenery.name"
-            :class="{ confirmed: scenery.confirmed }"
-          >
-            <span v-if="i > 0">
-              &gt;
-              <span v-if="!item.showExtra.value && i == 1 && sceneryList.length > 2"
-                >... (+{{ sceneryList.length - 2 }}) &gt;</span
-              >
-            </span>
-            {{ scenery.name }}
-            <!-- Data odjazdu ze stacji początkowej -->
-            <span v-if="i == 0" v-html="scenery.beginDateHTML"></span>
-            <!-- Data przyjazdu do stacji końcowej -->
-            <span
-              v-if="i == sceneryList.length - 1 || (i == 1 && !item.showExtra.value)"
-              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>
-          <span class="text--grayed">
-            ({{
-              (new Date(timetable.createdAt).getTime() - new Date(timetable.beginDate).getTime() < 0
-                ? new Date(timetable.createdAt)
-                : new Date(timetable.beginDate)
-              ).toLocaleString($i18n.locale, { timeStyle: 'short', dateStyle: 'full' })
-            }})
-          </span>
-        </div>
-
-        <button class="btn--option btn--show">
-          {{ $t('journal.stock-info') }}
-          <img :src="getIcon(`arrow-${item.showExtra.value ? 'asc' : 'desc'}`)" alt="Arrow" />
-        </button>
-
-        <!-- Dodatkowe informacje -->
-        <div class="info-extended" v-if="timetable.stockString && timetable.stockMass && item.showExtra.value">
-          <hr />
-
-          <div class="stock-specs">
-            <span class="badge specs-badge">
-              <span>{{ $t('journal.stock-max-speed') }}</span>
-              <span>{{ timetable.maxSpeed }}km/h</span>
-            </span>
-            <span class="badge specs-badge">
-              <span>{{ $t('journal.stock-length') }}</span>
-              <span>
-                {{
-                  item.currentHistoryIndex.value == 0
-                    ? timetable.stockLength
-                    : stockHistoryComp[item.currentHistoryIndex.value].stockLength || timetable.stockLength
-                }}m
-              </span>
-            </span>
-            <span class="badge specs-badge">
-              <span>{{ $t('journal.stock-mass') }}</span>
-              <span>
-                {{
-                  Math.floor(
-                    (item.currentHistoryIndex.value == 0
-                      ? timetable.stockMass!
-                      : stockHistoryComp[item.currentHistoryIndex.value].stockMass || timetable.stockMass) / 1000
-                  )
-                }}t
-              </span>
-            </span>
-          </div>
-
-          <div class="stock-history" v-if="stockHistoryComp.length > 1">
-            <button
-              class="btn--action"
-              v-for="(sh, i) in stockHistoryComp"
-              :data-checked="i == item.currentHistoryIndex.value"
-              @click.stop="item.currentHistoryIndex.value = i"
-            >
-              {{ sh.updatedAt }}
-            </button>
-          </div>
-
-          <ul class="stock-list">
-            <li
-              v-for="(car, i) in (item.currentHistoryIndex.value == 0
-                ? timetable.stockString
-                : stockHistoryComp[item.currentHistoryIndex.value].stockString
-              ).split(';')"
-              :key="i"
-            >
-              <img
-                @error="onImageError"
-                :src="`https://rj.td2.info.pl/dist/img/thumbnails/${car.split(':')[0]}.png`"
-                :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),
-        stockHistoryComp: timetable.stockHistory
-          .slice()
-          .reverse()
-          .map((h) => {
-            const historyData = h.split('@');
-
-            return {
-              updatedAt: new Date(Number(historyData[0])).toLocaleTimeString(this.$i18n.locale, {
-                hour: '2-digit',
-                minute: '2-digit',
-              }),
-              stockString: historyData[1],
-              stockMass: Number(historyData[2]) || undefined,
-              stockLength: Number(historyData[3]) || undefined,
-            };
-          }),
-        showExtra: ref(false),
-        currentHistoryIndex: ref(0),
-      }));
-    },
-  },
-
-  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>)`;
-
-        return { name, confirmed: i < timetable.confirmedStopsCount, beginDateHTML, endDateHTML };
-      });
-    },
-
-    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';
-
-.journal_item {
-  cursor: pointer;
-}
-
-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;
-  flex-wrap: wrap;
-  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;
-  }
-
-  li > img {
-    vertical-align: text-bottom;
-    max-height: 60px;
-  }
-}
-
-.stock-specs {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5em;
-  margin-top: 0.5em;
-
-  .specs-badge {
-    margin: 0;
-
-    span:last-child {
-      color: black;
-      background-color: $accentCol;
-    }
-  }
-}
-
-.badges {
-  display: flex;
-  gap: 0.25em;
-
-  // badge.scss
-}
-
-.stock-history {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5em;
-  margin-top: 1em;
-
-  button[data-checked='true'] {
-    color: $accentCol;
-  }
-}
-
-.scenery-list {
-  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;
-  }
-}
-
-@include smallScreen {
-  .info-general {
-    flex-direction: column;
-  }
-  .info-extended {
-    text-align: center;
-  }
-
-  .general-train {
-    justify-content: center;
-  }
-
-  .info-route {
-    display: flex;
-    justify-content: center;
-  }
-
-  .btn--show {
-    margin: 1em auto 0 auto;
-  }
-
-  .stock-specs {
-    justify-content: center;
-  }
-
-  .stock-history {
-    justify-content: center;
-  }
-}
-</style>

src/components/SceneryView/SceneryDispatchersHistory.vue

@@ -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 {

src/components/SceneryView/SceneryHeader.vue

@@ -4,7 +4,9 @@
       {{ station.name }}
     </a>
 
-    <div class="scenery-abbrev">{{ $t('scenery.abbrev') }} <b>{{ station.generalInfo?.abbr }}</b></div>
+    <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>
@@ -28,6 +30,10 @@ export default defineComponent({
 @import '../../styles/variables.scss';
 @import '../../styles/responsive.scss';
 
+.info-header {
+  margin-top: 1em;
+}
+
 .scenery-name {
   font-weight: bold;
   font-size: 3em;

src/components/SceneryView/SceneryInfo.vue

@@ -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,28 +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"
-            >
+            <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>
@@ -55,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>

src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue

@@ -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>
+

src/components/SceneryView/SceneryInfo/SceneryInfoSpawnList.vue

@@ -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>

src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue

@@ -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>

src/components/SceneryView/SceneryTimetable.vue

@@ -14,19 +14,11 @@
         </span>
 
         <span class="header_links">
-          <a
-            :href="`https://pragotron-td2.web.app/board?name=${station.name}`"
-            target="_blank"
-            :title="$t('scenery.pragotron-link')"
-          >
+          <a :href="`https://pragotron-td2.web.app/board?name=${station.name}`" target="_blank" :title="$t('scenery.pragotron-link')">
             <img :src="getIcon('pragotron')" alt="icon-pragotron" />
           </a>
 
-          <a
-            :href="`https://tablice-td2.web.app/?station=${station.name}`"
-            target="_blank"
-            :title="$t('scenery.tablice-link')"
-          >
+          <a :href="tabliceZbiorczeHref" target="_blank" :title="$t('scenery.tablice-link')">
             <img :src="getIcon('tablice', 'ico')" alt="icon-tablice" />
           </a>
         </span>
@@ -39,8 +31,8 @@
           <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>
@@ -67,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">
@@ -106,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>
 
@@ -154,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>
@@ -211,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(() => {
@@ -229,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 ||
         [];
 
@@ -251,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;
@@ -264,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>
 
@@ -341,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;
 
@@ -368,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;
@@ -400,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;
@@ -453,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;
+      }
     }
   }
 }

src/components/SceneryView/SceneryTimetablesHistory.vue

@@ -1,8 +1,9 @@
 <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>
@@ -13,7 +14,7 @@
       </thead>
 
       <tbody>
-        <tr v-for="historyItem in sceneryHistoryList">
+        <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,9 +39,13 @@
         </tr>
       </tbody>
     </table>
-
-    <div class="list-warning" v-else>{{ $t('scenery.history-list-empty') }}</div>
   </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">
@@ -52,37 +57,48 @@ 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/getIssuedTimetables?name=${this.station.name}&countFrom=${countFrom}&countLimit=${countLimit}`;
         const historyAPIData: SceneryTimetableHistory = await (await axios.get(requestString)).data;
 
-        this.sceneryHistoryList = historyAPIData.timetables;
         this.dataStatus = DataStatus.Loaded;
+        return historyAPIData;
       } catch (error) {
         console.error(error);
+        return null;
       }
     },
+
+    navigateToHistory() {
+      this.$router.push(`/journal/timetables?issuedFrom=${this.station.name}`);
+    },
   },
   components: { Loading },
 });
@@ -90,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>

src/components/StationsView/FilterOption.vue

@@ -1,13 +1,10 @@
 <template>
-  <button
-    class="btn--action"
-    :class="option.section"
-    :data-selected="option.value"
-    @click="handleLeftClick"
-    @dblclick="handleDbClick"
-  >
-    {{ $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">
@@ -36,38 +33,24 @@ export default defineComponent({
     };
   },
 
-  methods: {
-    handleLeftClick() {
-      this.option.value = !this.option.value;
-      this.filterStore.lastClickedFilterId = '';
-
-      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.changeFilterValue({
-        name: this.option.name,
-        value: !this.option.value,
-      });
-
       this.filterStore.inputs.options
         .filter((option) => {
           return option.section == this.option.section && option.id != this.option.id;
         })
         .forEach((option) => {
-          this.filterStore.changeFilterValue({
-            name: option.name,
-            value: this.option.value,
-          });
-
           option.value = !this.option.value;
         });
     },
@@ -76,25 +59,40 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-$realityCol: #e03b07;
-$accessCol: #e03b07;
-$controlCol: #0085ff;
-$signalCol: #bf7c00;
-$statusCol: #349b32;
-$saveCol: #28a826;
-$routesCol: #9049c0;
+@import '../../styles/variables.scss';
 
-button {
-  padding: 0.25em;
-  border-radius: 0;
+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'] {
-    background-color: forestgreen;
-    font-weight: bold;
+  span:hover {
+    background-color: #555;
+  }
+
+  input[type='checkbox'] {
+    cursor: pointer;
+    position: absolute;
+    opacity: 0;
+
+    &:checked + span {
+      background-color: forestgreen;
+      font-weight: bold;
+    }
+
+    &:focus-visible + span {
+      outline: 1px solid $accentCol;
+    }
   }
 }
 </style>

src/components/StationsView/StationFilterCard.vue

@@ -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">
@@ -29,6 +30,22 @@
           <p class="card_info" v-html="$t('filters.desc')"></p>
 
           <section class="card_options">
+            <!-- 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}`) }}
@@ -39,7 +56,7 @@
               <hr />
 
               <div class="section-inputs">
-                <filter-option
+                <FilterOption
                   v-for="(option, i) in filterStore.inputs.options.filter((o) => o.section == section)"
                   :option="option"
                   :key="i"
@@ -176,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: {
@@ -204,10 +225,7 @@ export default defineComponent({
     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);
     },
@@ -221,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);
     },
 
@@ -426,33 +440,30 @@ export default defineComponent({
   }
 }
 
-.card_options {
-  .option-section h3 {
-    display: flex;
-    align-items: center;
-    margin-bottom: 0.25em;
+.option-section h3 {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.25em;
 
-    gap: 0.5em;
+  gap: 0.5em;
 
-    button {
-      padding: 0.15em;
-      color: coral;
-    }
+  button {
+    padding: 0.15em;
+    color: coral;
   }
+}
 
-  .section-inputs {
-    display: grid;
-    // flex-wrap: wrap;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    // grid-template-rows: repeat(3, 1fr);
-    gap: 0.5em;
-    margin: 1em 0;
+.section-inputs {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.5em;
+  margin: 1em 0;
+}
 
-    // @include smallScreen() {
-    //   grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
-    //   grid-template-rows: auto;
-    // }
-  }
+.quick-actions div {
+  display: flex;
+  margin: 1em 0;
+  gap: 1em;
 }
 
 .slider {

src/components/StationsView/StationTable.vue

@@ -1,9 +1,5 @@
 <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>
@@ -93,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">
@@ -253,6 +244,7 @@ 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: {
@@ -262,7 +254,7 @@ export default defineComponent({
     },
   },
 
-  components: { Loading },
+  components: { Loading, StationStatusBadge },
   mixins: [styleMixin, dateMixin, stationInfoMixin, returnBtnMixin, imageMixin],
 
   data: () => ({

src/components/TrainsView/TrainInfo.vue

@@ -1,5 +1,5 @@
 <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>
@@ -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,17 +97,23 @@ 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';
@@ -127,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 {
@@ -206,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;
 }

src/components/TrainsView/TrainSchedule.vue

@@ -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,30 +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;
-  }
+  padding: 0 1em;
 }
 
 .schedule-wrapper {
@@ -426,4 +379,3 @@ ul.stop_list > li.stop {
   }
 }
 </style>
-

src/components/TrainsView/TrainStats.vue

@@ -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>

src/components/TrainsView/TrainTable.vue

@@ -17,8 +17,9 @@
             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>

src/locales/en.json

@@ -146,6 +146,7 @@
     "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",
@@ -156,6 +157,9 @@
       "status": "ONLINE STATUS"
     },
 
+    "all-available": "ALL AVAILABLE",
+    "all-free": "CURRENTLY FREE",
+
     "endingStatus": "ENDS SOON",
     "afkStatus": "AFK",
     "noSpaceStatus": "NO SPACE",
@@ -274,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",
@@ -283,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",
@@ -291,8 +296,10 @@
 
     "online-since": "ONLINE SINCE",
     "duty-lasted": "The duty lasted",
-    "minutes": "{minutes} mins",
-    "hours": "{hours}h {minutes} mins",
+
+    "hours": "{value} hour | {value} hours",
+    "minutes": "{value} min | {value} mins",
+    "seconds": "{value} s",
 
     "stock-info": "EXTRA INFO",
     "stock-length": "Length",
@@ -312,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",
 
@@ -326,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",
@@ -361,13 +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",
 
     "pragotron-link": "Timetable pallet board (beta)",
-    "tablice-link": "Timetable summary board (by Thundo)"
+    "tablice-link": "Timetable summary board (by Thundo)",
+
+    "bottom-info": "Show full history in the Journal tab"
   },
   "availability": {
     "title": "Availability",

src/locales/pl.json

@@ -147,6 +147,7 @@
     "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",
@@ -157,6 +158,9 @@
       "status": "STATUS ONLINE"
     },
 
+    "all-available": "WSZYSTKIE DOSTĘPNE",
+    "all-free": "WSZYSTKIE WOLNE",
+
     "endingStatus": "KOŃCZY",
     "afkStatus": "Z/W",
     "noSpaceStatus": "BRAK MIEJSCA",
@@ -279,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",
@@ -288,12 +293,13 @@
 
     "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",
@@ -317,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",
 
@@ -331,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",
@@ -366,13 +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}",
 
     "pragotron-link": "Paletowa tablica informacyjna (beta)",
-    "tablice-link": "Tablica informacyjna zbiorcza (autorstwa Thundo)"
+    "tablice-link": "Tablica informacyjna zbiorcza (autorstwa Thundo)",
+
+    "bottom-info": "Pokaż pełną historię w zakładce Dziennika"
   },
   "availability": {
     "title": "Dostępność",

src/mixins/dateMixin.ts

@@ -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);
+    },
+  },
+});

src/mixins/listObserverMixin.ts

@@ -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);
+    },
+  },
+});

src/mixins/modalTrainMixin.ts

@@ -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);
     },

src/scripts/interfaces/Station.ts

@@ -41,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;

src/scripts/interfaces/Train.ts

@@ -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;

src/scripts/interfaces/api/DispatchersAPIData.ts

@@ -7,6 +7,7 @@ export interface DispatcherHistory {
   dispatcherLevel: number | null;
   dispatcherRate: number;
   dispatcherIsSupporter: boolean;
+  dispatcherStatus?: number;
   isOnline: boolean;
   lastOnlineTimestamp: number;
   region: string;

src/scripts/interfaces/api/StationAPIData.ts

@@ -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;

src/scripts/interfaces/api/StatsAPIData.ts

@@ -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;
+  }[];
 }
 

src/scripts/interfaces/api/TimetablesAPIData.ts

@@ -16,6 +16,7 @@ export interface TimetableHistory {
   twr: number;
   skr: number;
   sceneriesString: string;
+  currentLocation: string[];
 
   routeDistance: number;
   currentDistance: number;
@@ -49,6 +50,14 @@ export interface TimetableHistory {
   currentSceneryHash?: string;
 
   routeSceneries?: string;
+
+  checkpointArrivals?: string[];
+  checkpointDepartures?: string[];
+
+  checkpointArrivalsScheduled?: string[];
+  checkpointDeparturesScheduled?: string[];
+
+  checkpointStopTypes?: string[];
 }
 
 export interface SceneryTimetableHistory {

src/scripts/interfaces/api/TimetablesQueryParams.ts

@@ -3,6 +3,8 @@ import { JournalTimetableSorter } from '../../types/JournalTimetablesTypes';
 export interface TimetablesQueryParams {
   driverName?: string;
   trainNo?: string;
+  timetableId?: string;
+
   authorName?: string;
   timestampFrom?: number;
   timestampTo?: number;

src/scripts/interfaces/github_api/StockInfoGithubData.ts

@@ -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][];
+}

src/scripts/interfaces/store/storeTypes.ts

@@ -6,6 +6,7 @@ import Station from '../Station';
 import Train from '../Train';
 import { DispatcherStatsAPIData } from '../api/DispatcherStatsAPIData';
 import { DriverStatsAPIData } from '../api/DriverStatsAPIData';
+import { RollingStockGithubData } from '../github_api/StockInfoGithubData';
 
 export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
 
@@ -13,6 +14,7 @@ export interface StoreState {
   stationList: Station[];
   trainList: Train[];
   apiData: APIData;
+  rollingStockData?: RollingStockGithubData;
 
   lastDispatcherStatuses: { hash: string; statusTimestamp: number; statusID: string }[];
 
@@ -46,6 +48,7 @@ export interface StoreState {
 
   listenerLaunched: boolean;
   blockScroll: boolean;
+  modalLastClickedTarget: EventTarget | null;
 }
 
 export interface APIData {

src/scripts/utils/apiURLs.ts

@@ -1,7 +1,7 @@
 export const URLs = {
   stacjownikAPI:
-    import.meta.env.VITE_APP_API_DEV == 1 && !import.meta.env.PROD
+    import.meta.env.VITE_APP_API_DEV === "1" && !import.meta.env.PROD
       ? 'http://localhost:3001'
-      : 'https://spythere.pl',
+      : 'https://stacjownik.spythere.pl',
   stacjownikAPIDev: 'localhost:3000',
 };

src/scripts/utils/storeUtils.ts

@@ -2,8 +2,7 @@ import { ScheduledTrain, StopStatus } from '../interfaces/ScheduledTrain';
 import Train from '../interfaces/Train';
 import TrainStop from '../interfaces/TrainStop';
 
-export const getLocoURL = (locoType: string): string =>
-  `https://rj.td2.info.pl/dist/img/thumbnails/${locoType.includes('EN') ? locoType + 'rb' : locoType}.png`;
+export const getLocoURL = (locoType: string): string => `https://rj.td2.info.pl/dist/img/thumbnails/${locoType.includes('EN') ? locoType + 'rb' : locoType}.png`;
 
 export const getStatusID = (stationStatus: any): string => {
   if (!stationStatus) return 'unknown';
@@ -58,7 +57,7 @@ export const getStatusTimestamp = (stationStatus: any): number => {
   return -1;
 };
 
-export const parseSpawns = (spawnString: string) => {
+export const parseSpawns = (spawnString: string | null) => {
   if (!spawnString) return [];
   if (spawnString === 'NO_SPAWN') return [];
 
@@ -66,8 +65,9 @@ export const parseSpawns = (spawnString: string) => {
     const spawnArray = spawn.split(',');
     const spawnName = spawnArray[6] ? spawnArray[6] : spawnArray[0];
     const spawnLength = parseInt(spawnArray[2]);
+    const isElectrified = spawnArray[3] == 'True';
 
-    return { spawnName, spawnLength };
+    return { spawnName, spawnLength, isElectrified };
   });
 };
 

src/store/journalFiltersStore.ts

@@ -1,9 +0,0 @@
-import { defineStore } from 'pinia';
-
-export const useJournalFiltersStore = defineStore('journalFiltersStore', {
-  state: () => ({
-    timetableFilters: {
-      
-    },
-  }),
-});

src/store/stationFiltersStore.ts

@@ -58,10 +58,29 @@ export const useStationFiltersStore = defineStore('stationFiltersStore', {
       });
     },
 
-    changeFilterValue(filter: { name: string; value: any }) {
-      this.filters[filter.name] = filter.value;
+    // Quick actions (TODO)
+    handleQuickAction(actionName: string) {
+      // switch (actionName) {
+      //   case 'all-available':
+      //     this.resetFilters();
+      //     this.inputs.options
+      //       .filter((option) => /^(free|non-public)/.test(option.id))
+      //       .forEach((option) => (option.value = !option.defaultValue));
+      //     break;
+      //   case 'all-free':
+      //     this.resetFilters();
+      //     this.inputs.options
+      //       .filter((option) => /^(free|occupied)/.test(option.id))
+      //       .forEach((option) => (option.value = !option.defaultValue));
+      //     break;
+      //   default:
+      //     break;
+      // }
+    },
 
-      if (StorageManager.isRegistered('options_saved')) StorageManager.setValue(filter.name, filter.value);
+    changeFilterValue(name: string, value: any) {
+      this.filters[name] = value;
+      if (StorageManager.isRegistered('options_saved')) StorageManager.setValue(name, value);
     },
 
     resetFilters() {
@@ -79,14 +98,12 @@ export const useStationFiltersStore = defineStore('stationFiltersStore', {
     },
 
     resetSectionOptions(section: string) {
-      this.inputs.options.forEach((option) => {
-        if (option.section != section) return;
-
-        option.value = option.defaultValue;
-        this.filters[option.id] = !option.defaultValue;
-
-        StorageManager.setBooleanValue(option.name, !option.defaultValue);
-      });
+      this.inputs.options
+        .filter((option) => option.section == section)
+        .forEach((option) => {
+          option.value = option.defaultValue;
+          StorageManager.setBooleanValue(option.name, !option.defaultValue);
+        });
     },
 
     changeSorter(headerName: HeadIdsTypes) {

src/store/store.ts

@@ -8,19 +8,16 @@ import Station from '../scripts/interfaces/Station';
 import StationRoutes from '../scripts/interfaces/StationRoutes';
 import Train from '../scripts/interfaces/Train';
 import { URLs } from '../scripts/utils/apiURLs';
-import {
-  getLocoURL,
-  getStatusTimestamp,
-  getStatusID,
-  getScheduledTrain,
-  parseSpawns,
-} from '../scripts/utils/storeUtils';
+import { getStatusTimestamp, getStatusID, getScheduledTrain, parseSpawns } from '../scripts/utils/storeUtils';
 import { APIData, StationJSONData, StoreState } from '../scripts/interfaces/store/storeTypes';
+import packageInfo from '../../package.json';
+import { RollingStockInfo, RollingStockGithubData } from '../scripts/interfaces/github_api/StockInfoGithubData';
 
 export const useStore = defineStore('store', {
   state: () =>
     ({
       apiData: {} as unknown,
+      rollingStockData: undefined,
 
       stationList: [],
       trainList: [],
@@ -58,6 +55,7 @@ export const useStore = defineStore('store', {
 
       blockScroll: false,
       listenerLaunched: false,
+      modalLastClickedTarget: null,
     } as StoreState),
 
   actions: {
@@ -67,10 +65,7 @@ export const useStore = defineStore('store', {
       if (!trains) return [];
 
       this.trainList = trains
-        .filter(
-          (train) =>
-            train.region === this.region.id && (train.online || train.timetable || train.lastSeen > Date.now() - 180000)
-        )
+        .filter((train) => train.region === this.region.id && (train.online || train.timetable || train.lastSeen > Date.now() - 180000))
         .map((train) => {
           const stock = train.stockString.split(';');
           const locoType = stock ? stock[0] : train.stockString;
@@ -94,9 +89,8 @@ export const useStore = defineStore('store', {
             currentStationName: train.currentStationName,
             currentStationHash: train.currentStationHash,
             connectedTrack: train.connectedTrack,
+            stockList: stock,
             locoType,
-            locoURL: getLocoURL(locoType),
-            cars: stock.slice(1),
 
             lastSeen: train.lastSeen,
             isTimeout: train.isTimeout,
@@ -123,20 +117,12 @@ export const useStore = defineStore('store', {
     getDispatcherStatus(onlineStationData: StationAPIData) {
       const { dispatchers } = this.apiData;
 
-      const prevDispatcherStatus = this.lastDispatcherStatuses.find(
-        (dispatcher) => dispatcher.hash === onlineStationData.stationHash
-      );
+      const prevDispatcherStatus = this.lastDispatcherStatuses.find((dispatcher) => dispatcher.hash === onlineStationData.stationHash);
 
-      const stationStatus = !dispatchers
-        ? undefined
-        : dispatchers.find(
-            (status: string[]) => status[0] == onlineStationData.stationHash && status[1] == this.region.id
-          ) || -1;
+      const stationStatus = !dispatchers ? undefined : dispatchers.find((status: string[]) => status[0] == onlineStationData.stationHash && status[1] == this.region.id) || -1;
 
-      const statusTimestamp =
-        prevDispatcherStatus && !dispatchers ? prevDispatcherStatus.statusTimestamp : getStatusTimestamp(stationStatus);
-      const statusID =
-        prevDispatcherStatus && !dispatchers ? prevDispatcherStatus.statusID : getStatusID(stationStatus);
+      const statusTimestamp = prevDispatcherStatus && !dispatchers ? prevDispatcherStatus.statusTimestamp : getStatusTimestamp(stationStatus);
+      const statusID = prevDispatcherStatus && !dispatchers ? prevDispatcherStatus.statusID : getStatusID(stationStatus);
 
       return {
         hash: onlineStationData.stationHash,
@@ -160,26 +146,17 @@ export const useStore = defineStore('store', {
           const stopName = stop.stopNameRAW.toLowerCase();
 
           if (stationName === stopName) return true;
-          if (stopName.includes(stationName) && !stop.stopName.includes('po.') && !stop.stopName.includes('podg.'))
-            return true;
+          if (stopName.includes(stationName) && !stop.stopName.includes('po.') && !stop.stopName.includes('podg.')) return true;
 
-          if (stationName.includes(stopName) && !stop.stopName.includes('po.') && !stop.stopName.includes('podg.'))
-            return true;
+          if (stationName.includes(stopName) && !stop.stopName.includes('po.') && !stop.stopName.includes('podg.')) return true;
 
-          if (
-            stopName.includes('podg.') &&
-            stopName.split(', podg.')[0] &&
-            stationName.includes(stopName.split(', podg.')[0])
-          )
-            return true;
+          if (stopName.includes('podg.') && stopName.split(', podg.')[0] && stationName.includes(stopName.split(', podg.')[0])) return true;
 
           if (
             stationGeneralInfo &&
             stationGeneralInfo.checkpoints &&
             stationGeneralInfo.checkpoints.length > 0 &&
-            stationGeneralInfo.checkpoints.some((cp) =>
-              cp.checkpointName.toLowerCase().includes(stop.stopNameRAW.toLowerCase())
-            )
+            stationGeneralInfo.checkpoints.some((cp) => cp.checkpointName.toLowerCase().includes(stop.stopNameRAW.toLowerCase()))
           )
             return true;
 
@@ -192,9 +169,7 @@ export const useStore = defineStore('store', {
 
         if (stationGeneralInfo?.checkpoints) {
           for (const checkpoint of stationGeneralInfo.checkpoints) {
-            const index = timetable.followingStops.findIndex(
-              (stop) => stop.stopNameRAW.toLowerCase() == checkpoint.checkpointName.toLowerCase()
-            );
+            const index = timetable.followingStops.findIndex((stop) => stop.stopNameRAW.toLowerCase() == checkpoint.checkpointName.toLowerCase());
 
             if (index == -1) continue;
 
@@ -210,10 +185,7 @@ export const useStore = defineStore('store', {
 
     getStationTrains(stationAPIData: StationAPIData) {
       return this.trainList
-        .filter(
-          (train) =>
-            train?.region === this.region.id && train.online && train.currentStationName === stationAPIData.stationName
-        )
+        .filter((train) => train?.region === this.region.id && train.online && train.currentStationName === stationAPIData.stationName)
         .map((train) => ({
           driverName: train.driverName,
           driverId: train.driverId,
@@ -286,9 +258,7 @@ export const useStore = defineStore('store', {
     },
 
     async fetchStationsGeneralInfo() {
-      const sceneryData: StationJSONData[] = await (
-        await axios.get(`${URLs.stacjownikAPI}/api/getSceneries?timestamp=${Math.floor(Date.now() / 1800000)}`)
-      ).data;
+      const sceneryData: StationJSONData[] = await (await axios.get(`${URLs.stacjownikAPI}/api/getSceneries`)).data;
 
       if (!sceneryData) {
         this.dataStatuses.sceneries = DataStatus.Error;
@@ -305,9 +275,7 @@ export const useStore = defineStore('store', {
             routes:
               scenery.routesInfo.reduce(
                 (acc, route) => {
-                  const propName: keyof StationRoutes = `${route.routeTracks == 2 ? 'twoWay' : 'oneWay'}${
-                    route.isElectric ? '' : 'No'
-                  }CatenaryRouteNames`;
+                  const propName: keyof StationRoutes = `${route.routeTracks == 2 ? 'twoWay' : 'oneWay'}${route.isElectric ? '' : 'No'}CatenaryRouteNames`;
 
                   acc[route.routeTracks == 2 ? 'twoWay' : 'oneWay'].push({
                     name: route.routeName,
@@ -336,19 +304,31 @@ export const useStore = defineStore('store', {
                   twoWayNoCatenaryRouteNames: [],
                 } as StationRoutes
               ) || {},
-            checkpoints: scenery.checkpoints
-              ? scenery.checkpoints.split(';').map((sub) => ({ checkpointName: sub, scheduledTrains: [] }))
-              : [],
+            checkpoints: scenery.checkpoints ? scenery.checkpoints.split(';').map((sub) => ({ checkpointName: sub, scheduledTrains: [] })) : [],
           },
         };
       });
     },
 
-    connectToWebsocket() {
+    async connectToWebsocket() {
+      if (import.meta.env.VITE_APP_WS_DEV === '1') {
+        const mockWebsocketData = await import('../data/mockWebsocketData.json');
+        this.dataStatuses.connection = DataStatus.Loaded;
+        this.apiData = mockWebsocketData as any;
+        this.setOnlineData();
+
+        console.warn('Stacjownik działa w trybie mockowania danych z WS');
+
+        return;
+      }
+
       const socket = io(URLs.stacjownikAPI, {
         // transports: ['websocket', 'polling'],
         rememberUpgrade: true,
         reconnection: true,
+        extraHeaders: {
+          version: packageInfo.version,
+        },
       });
 
       socket.on('connect_error', (err) => {
@@ -361,7 +341,7 @@ export const useStore = defineStore('store', {
         this.setOnlineData();
       });
 
-      socket.emit('FETCH_DATA', {}, (data: APIData) => {
+      socket.emit('FETCH_DATA', { version: packageInfo.version }, (data: APIData) => {
         this.dataStatuses.connection = DataStatus.Loaded;
 
         this.apiData = data;
@@ -373,6 +353,7 @@ export const useStore = defineStore('store', {
 
     async connectToAPI() {
       await this.fetchStationsGeneralInfo();
+      await this.fetchStockInfoData();
 
       this.connectToWebsocket();
     },
@@ -383,6 +364,14 @@ export const useStore = defineStore('store', {
       await this.setOnlineData();
     },
 
+    async fetchStockInfoData() {
+      try {
+        this.rollingStockData = (await axios.get<RollingStockGithubData>('https://raw.githubusercontent.com/Spythere/api/main/td2/data/stockInfo.json')).data;
+      } catch (error) {
+        console.error('Ups! Wystąpił błąd podczas pobierania informacji o taborze z API:', error);
+      }
+    },
+
     async setOnlineData() {
       if (!this.apiData.stations) {
         this.dataStatuses.sceneries = DataStatus.Error;

src/styles/JournalSection.scss

@@ -1,6 +1,5 @@
 @import 'responsive.scss';
 @import 'animations.scss';
-//Styles
 
 .list_wrapper {
   overflow-y: auto;
@@ -10,10 +9,6 @@
   padding-right: 0.2em;
 }
 
-.journal-list {
-  position: relative;
-}
-
 .journal_wrapper {
   max-width: 1350px;
   width: 100%;
@@ -23,6 +18,15 @@
   padding: 1em 0;
 }
 
+.journal_refreshed-date {
+  background-color: #333;
+  color: #ddd;
+  text-align: end;
+
+  padding: 0.25em;
+  margin: 0.5em 0;
+}
+
 .journal_warning {
   text-align: center;
   font-size: 1.3em;
@@ -32,8 +36,8 @@
   }
 }
 
-.schedule-dates > * {
-  margin-right: 0.25em;
+.journal_item {
+  cursor: pointer;
 }
 
 .journal_item,
@@ -41,6 +45,7 @@
   background-color: #1a1a1a;
   padding: 1em;
   margin-bottom: 1em;
+  cursor: pointer;
 }
 
 .journal_top-bar {
@@ -50,7 +55,6 @@
   gap: 0.5em;
 
   position: relative;
-
   margin-bottom: 0.5em;
 }
 
@@ -63,18 +67,12 @@
 }
 
 @include smallScreen() {
-  .list_wrapper {
-    font-size: 1.1em;
-  }
-
   .journal_top-bar {
     justify-content: center;
     flex-wrap: wrap;
   }
-}
 
-@media (orientation: landscape) {
-  .list_wrapper {
-    font-size: 1em;
+  .journal_refreshed-date {
+    text-align: center;
   }
 }

src/styles/SceneryView/styles.scss

@@ -1,11 +0,0 @@
-.scenery-section {
-  position: relative;
-  height: 100%;
-  overflow-y: scroll;
-}
-
-.list-warning {
-  padding: 1em 0.5em;
-  background-color: #444;
-  font-size: 1.2em;
-}

src/styles/badge.scss

@@ -30,7 +30,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 0.9em;
 
   &.driver {
     border-radius: 50%;
@@ -47,13 +46,33 @@
 }
 
 .region-badge {
-  padding: 0 0.5em;
+  padding: 0.25em 0.5em;
   border-radius: 0.5em;
   font-weight: bold;
+  color: white;
 
-  &.eu {
+  &[aria-describedby='eu'] {
     background-color: forestgreen;
   }
+
+  &[aria-describedby='cae'] {
+    background-color: lightcoral;
+    color: black;
+  }
+
+  &[aria-describedby='usw'] {
+    background-color: lightblue;
+    color: black;
+  }
+
+  &[aria-describedby='us'] {
+    background-color: lightblue;
+    color: black;
+  }
+
+  &[aria-describedby='ru'] {
+    background-color: lightslategray;
+  }
 }
 
 .train-badge {

src/styles/filters_options.scss

@@ -11,15 +11,6 @@
   gap: 0.5em;
 }
 
-.filter-button .active-indicator {
-  width: 7px;
-  height: 7px;
-  background-color: lightgreen;
-  border-radius: 50%;
-
-  margin-left: 10px;
-}
-
 h1.option-title {
   position: relative;
   font-size: 1.1em;

src/styles/global.scss

@@ -138,6 +138,15 @@ input {
   padding: 0.35em 0;
 }
 
+.active-indicator {
+  width: 7px;
+  height: 7px;
+  background-color: lightgreen;
+  border-radius: 50%;
+
+  margin-left: 10px;
+}
+
 a {
   display: inline-block;
 

src/styles/sceneryViewTables.scss

@@ -0,0 +1,46 @@
+.scenery-table-section {
+  position: relative;
+  height: 100%;
+  overflow-y: scroll;
+}
+
+table.scenery-history-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;
+  }
+}
+
+.no-history {
+  padding: 1em 0.5em;
+  background-color: #444;
+  font-size: 1.2em;
+  color: #ccc;
+}
+
+.bottom-info {
+  display: flex;
+  justify-content: center;
+
+  button {
+    padding: 0.5em;
+  }
+}

src/styles/scenery_status.scss

@@ -1,56 +0,0 @@
-$free: #8a8a8a;
-$ending: #e6c300;
-$no-limit: #117fc9;
-$unav: #ff3d5d;
-$brb: #e6a100;
-$no-space: #222;
-$taken: #09a116;
-$unknown: rgb(185, 60, 60);
-
-.status-badge {
-  border-radius: 1rem;
-  font-weight: 500;
-
-  padding: 0.2em .55em;
-
-  background-color: $taken;
-
-  &.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;
-    color: white;
-    font-size: 0.85em;
-  }
-
-  &.unknown {
-    background-color: $unknown;
-    font-size: 0.95em;
-  }
-}

src/views/JournalDispatchers.vue

@@ -1,56 +1,30 @@
 <template>
-  <section class="journal-timetables">
+  <section class="journal-dispatchers">
     <JournalHeader />
 
     <div class="journal_wrapper">
       <JournalOptions
         @on-search-confirm="fetchHistoryData"
         @on-options-reset="resetOptions"
-        @on-refresh-data="fetchHistoryData"
+        @on-refresh-data="fetchHistoryData(true)"
         :sorter-option-ids="['timestampFrom', 'duration']"
         :data-status="dataStatus"
         :current-options-active="currentOptionsActive"
         optionsType="dispatchers"
       />
 
+      <div class="journal_refreshed-date" v-if="dataRefreshedAt">
+        {{ $t('journal.data-refreshed-at') }}: {{ dataRefreshedAt.toLocaleString($i18n.locale) }}
+      </div>
+
       <div class="list_wrapper" @scroll="handleScroll">
-        <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="historyList.length == 0">
-              {{ $t('app.no-result') }}
-            </div>
-
-            <div v-else>
-              <JournalDispatchersList :dispatcherHistory="computedHistoryList" />
-
-              <button
-                class="btn btn--option btn--load-data"
-                v-if="!scrollNoMoreData && scrollDataLoaded && computedHistoryList.length > 15"
-                @click="addHistoryData"
-              >
-                {{ $t('journal.load-data') }}
-              </button>
-            </div>
-          </div>
-        </transition>
-
-        <div class="journal_warning" v-if="scrollNoMoreData">
-          {{ $t('journal.no-further-data') }}
-        </div>
-
-        <div class="journal_warning" v-else-if="!scrollDataLoaded">
-          {{ $t('journal.loading-further-data') }}
-        </div>
+        <JournalDispatchersList
+          :dispatcherHistory="computedHistoryList"
+          :addHistoryData="addHistoryData"
+          :dataStatus="dataStatus"
+          :scrollDataLoaded="scrollDataLoaded"
+          :scrollNoMoreData="scrollNoMoreData"
+        />
       </div>
     </div>
   </section>
@@ -104,6 +78,7 @@ export default defineComponent({
   data: () => ({
     currentQuery: '',
     currentQueryArray: [] as string[],
+    dataRefreshedAt: null as Date | null,
 
     scrollDataLoaded: true,
     scrollNoMoreData: false,
@@ -189,8 +164,10 @@ export default defineComponent({
     },
 
     handleQueries(query: LocationQuery) {
-      if ('sceneryName' in query) this.searchersValues['search-station'] = `${query.sceneryName}`;
-      if ('dispatcherName' in query) this.searchersValues['search-dispatcher'] = `${query.dispatcherName}`;
+      const queryKeys = Object.keys(query);
+
+      if (queryKeys.includes('sceneryName')) this.setSearchers('', `${query.sceneryName}`, '');
+      if (queryKeys.includes('dispatcherName')) this.setSearchers('', '', `${query.dispatcherName}`);
     },
 
     setSearchers(date: string, station: string, dispatcher: string) {
@@ -209,10 +186,10 @@ export default defineComponent({
     async addHistoryData() {
       this.scrollDataLoaded = false;
 
-      const countFrom = this.historyList.length;
+      this.countFromIndex = this.historyList.length;
 
       const responseData: DispatcherHistory[] = await (
-        await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}&countFrom=${countFrom}`)
+        await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}&countFrom=${this.countFromIndex}`)
       ).data;
 
       if (!responseData) return;
@@ -226,7 +203,7 @@ export default defineComponent({
       this.scrollDataLoaded = true;
     },
 
-    async fetchHistoryData() {
+    async fetchHistoryData(reset = false) {
       const queries: string[] = [];
 
       const dispatcher = this.searchersValues['search-dispatcher'].trim();
@@ -240,7 +217,7 @@ export default defineComponent({
       if (station) queries.push(`stationName=${station}`);
       if (timestampFrom && timestampTo) queries.push(`timestampFrom=${timestampFrom}`, `timestampTo=${timestampTo}`);
 
-      // Z API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
+      // API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
       if (this.sorterActive.id == 'timestampFrom') queries.push('sortBy=timestampFrom');
       else if (this.sorterActive.id == 'duration') queries.push('sortBy=currentDuration');
       else queries.push('sortBy=timestampFrom');
@@ -253,6 +230,8 @@ export default defineComponent({
       this.currentQueryArray = queries;
 
       try {
+        if (reset) this.dataStatus = DataStatus.Loading;
+
         const responseData: DispatcherHistory[] = await (
           await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}`)
         ).data;
@@ -273,6 +252,7 @@ export default defineComponent({
             ? this.historyList[0].dispatcherName
             : '';
 
+        this.dataRefreshedAt = new Date();
         this.dataStatus = DataStatus.Loaded;
       } catch (error) {
         this.dataStatus = DataStatus.Error;

src/views/JournalTimetables.vue

@@ -16,39 +16,18 @@
 
       <JournalStats />
 
+      <div class="journal_refreshed-date" v-if="dataRefreshedAt">
+        {{ $t('journal.data-refreshed-at') }}: {{ dataRefreshedAt.toLocaleString($i18n.locale) }}
+      </div>
+
       <div class="list_wrapper" @scroll="handleScroll">
-        <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>
-              <JournalTimetablesList :timetableHistory="timetableHistory" />
-
-              <button
-                class="btn btn--option btn--load-data"
-                v-if="!scrollNoMoreData && scrollDataLoaded && timetableHistory.length >= 15"
-                @click="addHistoryData"
-              >
-                {{ $t('journal.load-data') }}
-              </button>
-            </div>
-          </div>
-        </transition>
-
-        <div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div>
-        <div class="journal_warning" v-else-if="!scrollDataLoaded">{{ $t('journal.loading-further-data') }}</div>
+        <JournalTimetablesList
+          :timetableHistory="timetableHistory"
+          :addHistoryData="addHistoryData"
+          :dataStatus="dataStatus"
+          :scrollDataLoaded="scrollDataLoaded"
+          :scrollNoMoreData="scrollNoMoreData"
+        />
       </div>
     </div>
   </section>
@@ -67,7 +46,6 @@ import DriverStats from '../components/JournalView/JournalDriverStats.vue';
 import JournalOptions from '../components/JournalView/JournalOptions.vue';
 import JournalStats from '../components/JournalView/JournalStats.vue';
 import JournalHeader from '../components/JournalView/JournalHeader.vue';
-import JournalTimetablesList from '../components/JournalView/JournalTimetablesList.vue';
 import Loading from '../components/Global/Loading.vue';
 
 import { DataStatus } from '../scripts/enums/DataStatus';
@@ -84,11 +62,12 @@ import {
   JournalTimetableSorter,
 } from '../scripts/types/JournalTimetablesTypes';
 import { journalTimetableFilters } from '../constants/Journal/JournalTimetablesConsts';
+import JournalTimetablesList from '../components/JournalView/JournalTimetables/JournalTimetablesList.vue';
 
 const TIMETABLES_API_URL = `${URLs.stacjownikAPI}/api/getTimetables`;
 
 export default defineComponent({
-  components: { DriverStats, Loading, JournalOptions, JournalTimetablesList, JournalStats, JournalHeader },
+  components: { DriverStats, Loading, JournalOptions, JournalStats, JournalHeader, JournalTimetablesList },
   mixins: [dateMixin, routerMixin, modalTrainMixin, imageMixin],
 
   name: 'JournalTimetables',
@@ -101,6 +80,7 @@ export default defineComponent({
 
   data: () => ({
     currentQueryParams: {} as TimetablesQueryParams,
+    dataRefreshedAt: null as Date | null,
 
     scrollDataLoaded: true,
     scrollNoMoreData: false,
@@ -185,7 +165,11 @@ export default defineComponent({
     },
 
     handleQueries(query: LocationQuery) {
-      if ('timetableId' in query) this.searchersValues['search-train'] = `#${query.timetableId}`;
+      const queryKeys = Object.keys(query);
+
+      if (queryKeys.includes('timetableId')) this.setSearchers('', '', `#${query.timetableId}`, '', '');
+      if (queryKeys.includes('issuedFrom')) this.setSearchers('', '', '', '', `${query.issuedFrom}`);
+      if (queryKeys.includes('authorName')) this.setSearchers('', '', '', `${query.authorName}`, '');
     },
 
     setSearchers(date: string, driver: string, train: string, dispatcher: string, issuedFrom: string) {
@@ -287,8 +271,7 @@ export default defineComponent({
         });
 
       queryParams['driverName'] = driverName;
-      queryParams['trainNo'] = trainNo;
-
+      queryParams[trainNo?.startsWith('#') ? 'timetableId' : 'trainNo'] = trainNo?.replace('#', '');
       queryParams['countFrom'] = undefined;
       queryParams['countLimit'] = undefined;
 
@@ -327,6 +310,7 @@ export default defineComponent({
             : '';
 
         this.dataStatus = DataStatus.Loaded;
+        this.dataRefreshedAt = new Date();
       } catch (error) {
         this.dataStatus = DataStatus.Error;
         this.dataErrorMessage = 'Ups! Coś poszło nie tak!';

src/views/SceneryView.vue

@@ -1,4 +1,4 @@
-  <template>
+<template>
   <div class="scenery-view">
     <div class="scenery-offline" v-if="!stationInfo && isComponentVisible && store.dataStatuses.sceneries == 2">
       <div>{{ $t('scenery.no-scenery') }}</div>
@@ -33,12 +33,7 @@
         </div>
 
         <keep-alive>
-          <component
-            :is="currentViewCompontent"
-            :station="stationInfo"
-            :timetableOnly="timetableOnly"
-            :key="currentViewCompontent"
-          ></component>
+          <component :is="currentViewCompontent" :station="stationInfo" :key="currentViewCompontent"></component>
         </keep-alive>
       </div>
     </div>
@@ -50,6 +45,7 @@ import { computed, defineComponent, PropType } from 'vue';
 import { useRoute } from 'vue-router';
 import routerMixin from '../mixins/routerMixin';
 import { useStore } from '../store/store';
+
 import SceneryInfo from '../components/SceneryView/SceneryInfo.vue';
 import SceneryHeader from '../components/SceneryView/SceneryHeader.vue';
 import SceneryTimetable from '../components/SceneryView/SceneryTimetable.vue';
@@ -208,14 +204,14 @@ button.back-btn {
 
 .scenery-right {
   background: #181818;
-  padding: 2em 0.5em;
+  padding: 1em 0.5em;
 
   height: 95vh;
   min-height: 550px;
   max-height: 1000px;
 
   display: grid;
-  grid-template-rows: auto 1fr;
+  grid-template-rows: auto 1fr auto;
   gap: 1em;
 }
 

src/views/StationsView.vue

@@ -14,7 +14,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import StorageManager from '../scripts/managers/storageManager';
 import StationTable from '../components/StationsView/StationTable.vue';
 import StationFilterCard from '../components/StationsView/StationFilterCard.vue';
 import SelectBox from '../components/Global/SelectBox.vue';
@@ -44,9 +43,7 @@ export default defineComponent({
 
   computed: {
     computedStationList() {
-      const list = this.filterStore.getFilteredStationList(this.store.stationList, this.store.region.id);
-
-      return list;
+      return this.filterStore.getFilteredStationList(this.store.stationList, this.store.region.id);
     },
   },
 

src/views/TrainsView.vue

@@ -14,7 +14,6 @@
 <script lang="ts">
 import { computed, ComputedRef, defineComponent, provide, reactive, ref, watch } from 'vue';
 import TrainOptions from '../components/TrainsView/TrainOptions.vue';
-import TrainStats from '../components/TrainsView/TrainStats.vue';
 import TrainTable from '../components/TrainsView/TrainTable.vue';
 import { trainFilters } from '../constants/Trains/TrainOptionsConsts';
 import modalTrainMixin from '../mixins/modalTrainMixin';
@@ -26,7 +25,6 @@ import { TrainFilter } from '../scripts/interfaces/Trains/TrainFilter';
 export default defineComponent({
   components: {
     TrainTable,
-    TrainStats,
     TrainOptions,
   },
 
@@ -77,7 +75,9 @@ export default defineComponent({
     watch([searchedTrain, searchedDriver, sorterActive, filterList], ([sT, sD, sA, fL]) => {
       const areFiltersActive = fL.some((f, i) => f.isActive !== initTrainFilters[i].isActive);
 
-      currentOptionsActive.value = sT.length > 0 || sD.length > 0 || sA.id != 'distance' || areFiltersActive;
+      
+      currentOptionsActive.value = sT.length > 0 || sD.length > 0 || sA.id != 'routeDistance' || areFiltersActive;
+      console.log(sA.id);
     });
 
     return {

src/vite-env.d.ts

@@ -1,19 +1,15 @@
 /// <reference types="vite/client" />
 
 declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
-
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
 }
 interface ImportMetaEnv {
-  readonly VITE_APP_API_DEV: number;
-  readonly VITE_APP_WS_DEV: number;
+  readonly VITE_APP_API_DEV: string;
+  readonly VITE_APP_WS_DEV: string;
 }
 
 interface ImportMeta {
   readonly env: ImportMetaEnv;
 }
-
-
-

vite.config.ts

@@ -15,7 +15,7 @@ export default defineConfig({
         globPatterns: ['**/*.{js,css,html,png,svg,jpg}'],
         runtimeCaching: [
           {
-            urlPattern: new RegExp('^https://spythere.pl/api/getSceneries', 'i'),
+            urlPattern: new RegExp('^https://stacjownik.spythere.pl/api/getSceneries', 'i'),
             handler: 'NetworkFirst',
             options: {
               cacheName: 'sceneries-cache',