From 4537341a5713fa78cc99ce428cb2c269b2e05484 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Wed, 30 Aug 2023 20:31:40 +0200
Subject: [PATCH 01/16] =?UTF-8?q?od=C5=9Bwie=C5=BCony=20wygl=C4=85d=20dzie?=
 =?UTF-8?q?nnika=20RJ?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Global/ProgressBar.vue         |  62 +++++++++++
 .../JournalView/JournalTimetablesList.vue     | 103 +++++++++---------
 src/components/TrainsView/TrainInfo.vue       |  34 +-----
 src/locales/en.json                           |   2 +-
 src/locales/pl.json                           |   2 +-
 src/mixins/dateMixin.ts                       |   7 ++
 6 files changed, 126 insertions(+), 84 deletions(-)
 create mode 100644 src/components/Global/ProgressBar.vue

diff --git a/src/components/Global/ProgressBar.vue b/src/components/Global/ProgressBar.vue
new file mode 100644
index 0000000..211d228
--- /dev/null
+++ b/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>
diff --git a/src/components/JournalView/JournalTimetablesList.vue b/src/components/JournalView/JournalTimetablesList.vue
index 51d2c0f..6207df9 100644
--- a/src/components/JournalView/JournalTimetablesList.vue
+++ b/src/components/JournalView/JournalTimetablesList.vue
@@ -41,7 +41,14 @@
           </span>
 
           <span class="general-time">
-            <b class="info-date">{{ localeDay(timetable.beginDate, $i18n.locale) }}</b>
+            <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="{
@@ -68,7 +75,7 @@
         <hr />
 
         <!-- Spis postojów -->
-        <div class="stop-list">
+        <div class="stop-list" v-if="showExtraInfo.value == true">
           <span
             v-for="(stop, i) in stops.filter((_, i) => (!showExtraInfo.value ? i == 0 || i == stops.length - 1 : true))"
             class="stop-list-item"
@@ -89,19 +96,20 @@
 
         <!-- Status RJ -->
         <div class="info-status" style="margin: 0.5em 0">
-          <span>
-            <b>{{ $t('journal.route-length') }}</b>
-            {{ !timetable.fulfilled ? timetable.currentDistance + ' /' : '' }}
-            {{ timetable.routeDistance }} km
+          <ProgressBar
+            :progressPercent="(timetable.confirmedStopsCount / timetable.allStopsCount) * 100"
+            :progressType="!timetable.fulfilled && timetable.terminated ? 'abandoned' : ''"
+          />
+
+          <span :style="{ color: timetable.terminated && timetable.fulfilled ? 'lightgreen' : '' }">
+            <span>
+              {{ timetable.currentDistance + ' km' }}
+            </span>
+            <span> / </span>
+            <span>{{ timetable.routeDistance }} km</span>
           </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;
+
+          <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/, '') }}
@@ -121,22 +129,6 @@
           </span>
         </div>
 
-        <!-- Info o autorze RJ -->
-        <div class="info-author" 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-${showExtraInfo.value ? 'asc' : 'desc'}`)" alt="Arrow" />
@@ -146,11 +138,19 @@
         <div class="info-extended" v-if="timetable.stockString && timetable.stockMass && showExtraInfo.value">
           <hr />
 
+          <div class="stock-specs">
+            <span class="badge specs-badge">
+              <span>{{ $t('journal.dispatcher-name') }}</span>
+              <span>{{ timetable.authorName }}</span>
+            </span>
+          </div>
+
           <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>
@@ -161,6 +161,7 @@
                 }}m
               </span>
             </span>
+
             <span class="badge specs-badge">
               <span>{{ $t('journal.stock-mass') }}</span>
               <span>
@@ -216,6 +217,7 @@ import imageMixin from '../../mixins/imageMixin';
 import modalTrainMixin from '../../mixins/modalTrainMixin';
 import styleMixin from '../../mixins/styleMixin';
 import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
+import ProgressBar from '../Global/ProgressBar.vue';
 
 export default defineComponent({
   props: {
@@ -224,9 +226,7 @@ export default defineComponent({
       required: true,
     },
   },
-
   mixins: [dateMixin, imageMixin, modalTrainMixin, styleMixin],
-
   computed: {
     computedTimetableHistory() {
       return this.timetableHistory.map((timetable) => ({
@@ -236,7 +236,6 @@ export default defineComponent({
           .reverse()
           .map((h) => {
             const historyData = h.split('@');
-
             return {
               updatedAt: new Date(Number(historyData[0])).toLocaleTimeString(this.$i18n.locale, {
                 hour: '2-digit',
@@ -247,14 +246,12 @@ export default defineComponent({
               stockLength: Number(historyData[3]) || undefined,
             };
           }),
-
         showExtraInfo: ref(false),
         stops: this.getTimetableStops(timetable),
         currentHistoryIndex: ref(0),
       }));
     },
   },
-
   methods: {
     getTimetableStops(timetable: TimetableHistory) {
       const stopNames = timetable.sceneriesString.split('%');
@@ -273,6 +270,7 @@ export default defineComponent({
 
       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 };
 
@@ -281,14 +279,6 @@ export default defineComponent({
         const arrivalDateScheduled = this.stringToDate(timetable.checkpointArrivalsScheduled?.at(i));
         const arrivalDateReal = this.stringToDate(timetable.checkpointArrivals?.at(i));
 
-        // const arrivalDelay =
-        //   arrivalDateReal && arrivalDateScheduled ? arrivalDateReal.getTime() - arrivalDateScheduled.getTime() : 0;
-
-        // const departureDelay =
-        //   departureDateReal && departureDateScheduled
-        //     ? departureDateReal.getTime() - departureDateScheduled.getTime()
-        //     : 0;
-
         const arrivalHTML =
           (arrivalDateReal && arrivalDateScheduled && arrivalDateReal?.getTime() != arrivalDateScheduled?.getTime()
             ? `<s class="text--grayed">${this.parseDateToTimeString(arrivalDateScheduled)}</s> `
@@ -302,24 +292,22 @@ export default defineComponent({
             : '') + this.parseDateToTimeString(departureDateReal || departureDateScheduled);
 
         let html = `${arrivalHTML}${departureHTML ? ` / ${departureHTML}` : ''}`;
-        if (html) html = ` (${html})`;
 
+        if (html) html = ` (${html})`;
         return { stopName, html, confirmed };
       });
     },
-
     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');
     },
   },
+  components: { ProgressBar },
 });
 </script>
 
@@ -377,6 +365,13 @@ hr {
   &-extended {
     margin-top: 0.5em;
   }
+
+  &-status {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.5em;
+  }
 }
 
 .general-train {
@@ -421,11 +416,10 @@ ul.stock-list {
   }
 }
 
+// badge.scss
 .badges {
   display: flex;
   gap: 0.25em;
-
-  // badge.scss
 }
 
 .stock-history {
@@ -440,14 +434,14 @@ ul.stock-list {
 }
 
 .stop-list {
-  display: flex;
-  flex-wrap: wrap;
+  word-wrap: break-word;
   gap: 0.25em;
+  font-size: 0.9em;
 
   color: #adadad;
 
   &-item[data-confirmed='true'] {
-    color: #a3eba3;
+    color: lightgreen;
 
     .stop-name {
       font-weight: bold;
@@ -457,7 +451,6 @@ ul.stock-list {
 
 .btn--show {
   display: flex;
-  margin-top: 1em;
   font-weight: bold;
   padding: 0.2em 0.45em;
 
@@ -476,6 +469,10 @@ ul.stock-list {
     justify-content: center;
   }
 
+  .info-status {
+    justify-content: center;
+  }
+
   .btn--show {
     margin: 1em auto 0 auto;
   }
diff --git a/src/components/TrainsView/TrainInfo.vue b/src/components/TrainsView/TrainInfo.vue
index 5f9d3c8..a991f3a 100644
--- a/src/components/TrainsView/TrainInfo.vue
+++ b/src/components/TrainsView/TrainInfo.vue
@@ -41,13 +41,14 @@
       </div>
 
       <div class="timetable_progress" style="margin-top: 0.5em" v-if="train.timetableData">
-        <span class="timetable_progress-bar">
+        <!-- <span class="timetable_progress-bar">
           <span class="bar-bg"></span>
           <span
             class="bar-fg"
             :style="{ width: `${Math.floor(confirmedPercentage(train.timetableData.followingStops))}%` }"
           ></span>
-        </span>
+        </span> -->
+        <ProgressBar :progressPercent="confirmedPercentage(train.timetableData.followingStops)" />
 
         <span class="timetable_progress-distance">
           &nbsp; {{ currentDistance(train.timetableData.followingStops) }} km /
@@ -96,6 +97,7 @@ 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';
 
 export default defineComponent({
   props: {
@@ -103,14 +105,13 @@ export default defineComponent({
       type: Object as () => Train,
       required: true,
     },
-
     extended: {
       type: Boolean,
       default: true,
     },
   },
-
   mixins: [trainInfoMixin, imageMixin, styleMixin],
+  components: { ProgressBar },
 });
 </script>
 
@@ -206,31 +207,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;
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index 7791659..43b9a30 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -284,7 +284,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",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index a6e7f5b..37c8f18 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -295,7 +295,7 @@
 
     "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",
diff --git a/src/mixins/dateMixin.ts b/src/mixins/dateMixin.ts
index 59bf1f6..49d6f9b 100644
--- a/src/mixins/dateMixin.ts
+++ b/src/mixins/dateMixin.ts
@@ -21,6 +21,13 @@ export default defineComponent({
       });
     },
 
+    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',

From 6e5696b0a6844c99f63f3b924fc16192cacf90e6 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 31 Aug 2023 21:46:05 +0200
Subject: [PATCH 02/16] daily stats hotfix

---
 src/components/JournalView/DailyStats.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/JournalView/DailyStats.vue b/src/components/JournalView/DailyStats.vue
index 22b85d6..caa5911 100644
--- a/src/components/JournalView/DailyStats.vue
+++ b/src/components/JournalView/DailyStats.vue
@@ -119,7 +119,7 @@
               <b class="text--primary">{{ stats.mostActiveDrivers[0].name }}</b>
             </template>
             <template #distance>
-              <b class="text--primary">{{ stats.mostActiveDrivers[0].distance }} km</b>
+              <b class="text--primary">{{ stats.mostActiveDrivers[0].distance.toFixed(2) }} km</b>
             </template>
           </i18n-t>
         </div>

From 0397fa788d75f9f47f68df31d635a81347b25054 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 31 Aug 2023 22:45:14 +0200
Subject: [PATCH 03/16] =?UTF-8?q?zmiana=20wygl=C4=85du=20listy=20dziennik?=
 =?UTF-8?q?=C3=B3w?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../JournalView/JournalDispatchersList.vue    | 319 +++++++-----
 .../JournalView/JournalTimetablesList.vue     | 458 ++++++++++--------
 src/views/JournalDispatchers.vue              |  44 +-
 src/views/JournalTimetables.vue               |  39 +-
 src/views/TrainsView.vue                      |   4 +-
 5 files changed, 479 insertions(+), 385 deletions(-)

diff --git a/src/components/JournalView/JournalDispatchersList.vue b/src/components/JournalView/JournalDispatchersList.vue
index c3e3209..852393c 100644
--- a/src/components/JournalView/JournalDispatchersList.vue
+++ b/src/components/JournalView/JournalDispatchersList.vue
@@ -1,57 +1,156 @@
 <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>
+  <div>
+    <transition name="status-anim" mode="out-in">
+      <div :key="dataStatus">
+        <div class="journal_warning" v-if="store.isOffline">
+          {{ $t('app.offline') }}
+        </div>
 
-      <div
-        v-else
-        class="journal_item"
-        :class="{ online: item.isOnline }"
-        @click="navigateToScenery(item.stationName, item.isOnline)"
-        @keydown.enter="navigateToScenery(item.stationName, item.isOnline)"
-        tabindex="0"
-      >
-        <span class="item-general">
-          <b
-            v-if="item.dispatcherLevel !== null"
-            class="level-badge dispatcher"
-            :style="calculateExpStyle(item.dispatcherLevel, item.dispatcherIsSupporter)"
+        <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>Sceneria</th>
+              <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>
+
+            <tbody>
+              <tr v-for="historyItem in dispatcherHistory">
+                <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 style="min-width: 250px" class="time">
+                  <span v-if="historyItem.timestampTo">
+                    <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">
+                      {{ $t('journal.online-since') }} {{ timestampToString(historyItem.timestampFrom) }}
+                    </b>
+                    ({{ calculateDuration(historyItem.currentDuration) }})
+                  </span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <!-- <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>
+
+              <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>
+
+                  <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> -->
+
+          <button
+            class="btn btn--option btn--load-data"
+            v-if="!scrollNoMoreData && scrollDataLoaded && dispatcherHistory.length > 15"
+            @click="addHistoryData"
           >
-            {{ item.dispatcherLevel >= 2 ? item.dispatcherLevel : 'L' }}
-          </b>
-
-          <b class="text--primary">{{ item.dispatcherName }}</b> &bull; <b>{{ item.stationName }}</b>
-          <span class="text--grayed">&nbsp;#{{ item.stationHash }}&nbsp;</span>
-          <span class="region-badge" :class="item.region">PL1</span>
-          <span class="like-count" v-if="item.dispatcherRate">
-            <img :src="getIcon('like')" alt="like icon" />
-            {{ item.dispatcherRate }}
-          </span>
-        </span>
-
-        <span 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>
+            {{ $t('journal.load-data') }}
+          </button>
+        </div>
       </div>
-    </li>
-  </transition-group>
+    </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">
@@ -60,16 +159,37 @@ 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';
 
 export default defineComponent({
+  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: Object as PropType<DataStatus>,
+    },
   },
 
-  mixins: [dateMixin, styleMixin, imageMixin],
+  data() {
+    return {
+      DataStatus,
+      store: useStore(),
+    };
+  },
 
   computed: {
     computedDispatcherHistory() {
@@ -105,79 +225,48 @@ 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 {
+  width: 100%;
+  background-color: #111;
+  border-collapse: collapse;
+  /* border-spacing: 0 0.5em; */
+  text-align: center;
 
-.journal_item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  text-align: left;
-
-  gap: 0.5em 1em;
-
-  line-height: 1.7em;
-  padding: 0.75em;
-
-  &.online {
-    cursor: pointer;
+  thead {
+    position: sticky;
+    top: 0;
+    background-color: #222222;
   }
 
-  span[data-status='true'] {
+  th {
+    padding: 0.5em;
+  }
+
+  tr {
+    background-color: #353535;
+    border: none;
+  }
+
+  td {
+    padding: 0.75em;
+    border-bottom: solid 5px #1a1a1a;
+
+    .level-badge {
+      margin: 0 auto;
+    }
+  }
+}
+
+.text {
+  &--online {
     color: springgreen;
   }
 
-  span[data-status='false'] {
+  &--offline {
     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;
-  }
-}
 </style>
diff --git a/src/components/JournalView/JournalTimetablesList.vue b/src/components/JournalView/JournalTimetablesList.vue
index 6207df9..88a4722 100644
--- a/src/components/JournalView/JournalTimetablesList.vue
+++ b/src/components/JournalView/JournalTimetablesList.vue
@@ -1,213 +1,249 @@
 <template>
-  <transition-group class="journal-list" tag="ul" name="list-anim">
-    <li
-      v-for="{ timetable, stockHistoryComp, stops, showExtraInfo, ...item } in computedTimetableHistory"
-      class="journal_item"
-      :key="timetable.id"
-      @click="showExtraInfo.value = !showExtraInfo.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"
-              >{{
-                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 class="journal-list">
+    <transition name="status-anim" mode="out-in">
+      <div :key="dataStatus">
+        <div class="journal_warning" v-if="store.isOffline">
+          {{ $t('app.offline') }}
         </div>
 
-        <div class="info-route">
-          <b>{{ timetable.route.replace('|', ' - ') }}</b>
+        <Loading v-else-if="dataStatus == DataStatus.Loading" />
+
+        <div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
+          {{ $t('app.error') }}
         </div>
 
-        <hr />
-
-        <!-- Spis postojów -->
-        <div class="stop-list" v-if="showExtraInfo.value == true">
-          <span
-            v-for="(stop, i) in stops.filter((_, i) => (!showExtraInfo.value ? i == 0 || i == stops.length - 1 : true))"
-            class="stop-list-item"
-            :key="stop.stopName"
-            :data-confirmed="stop.confirmed"
-          >
-            <span v-if="i > 0">
-              &gt;
-              <span v-if="!showExtraInfo.value && i == 1 && stops.length > 2">
-                ... (+{{ stops.length - 2 }}) &gt;
-              </span>
-            </span>
-
-            <span class="stop-name">{{ stop.stopName }}</span>
-            <span v-html="stop.html"></span>
-          </span>
+        <div v-else-if="timetableHistory.length == 0" class="journal_warning">
+          {{ $t('app.no-result') }}
         </div>
 
-        <!-- Status RJ -->
-        <div class="info-status" style="margin: 0.5em 0">
-          <ProgressBar
-            :progressPercent="(timetable.confirmedStopsCount / timetable.allStopsCount) * 100"
-            :progressType="!timetable.fulfilled && timetable.terminated ? 'abandoned' : ''"
-          />
-
-          <span :style="{ color: timetable.terminated && timetable.fulfilled ? 'lightgreen' : '' }">
-            <span>
-              {{ timetable.currentDistance + ' km' }}
-            </span>
-            <span> / </span>
-            <span>{{ timetable.routeDistance }} km</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>
-
-        <button class="btn--option btn--show">
-          {{ $t('journal.stock-info') }}
-          <img :src="getIcon(`arrow-${showExtraInfo.value ? 'asc' : 'desc'}`)" alt="Arrow" />
-        </button>
-
-        <!-- Dodatkowe informacje -->
-        <div class="info-extended" v-if="timetable.stockString && timetable.stockMass && showExtraInfo.value">
-          <hr />
-
-          <div class="stock-specs">
-            <span class="badge specs-badge">
-              <span>{{ $t('journal.dispatcher-name') }}</span>
-              <span>{{ timetable.authorName }}</span>
-            </span>
-          </div>
-
-          <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>
-
-          <!-- Historia zmian w składzie -->
-          <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">
+        <div v-else>
+          <transition-group tag="ul" name="list-anim">
             <li
-              v-for="(car, i) in (item.currentHistoryIndex.value == 0
-                ? timetable.stockString
-                : stockHistoryComp[item.currentHistoryIndex.value].stockString
-              ).split(';')"
-              :key="i"
+              v-for="{ timetable, stockHistoryComp, stops, showExtraInfo, ...item } in computedTimetableHistory"
+              class="journal_item"
+              :key="timetable.id"
+              @click="showExtraInfo.value = !showExtraInfo.value"
             >
-              <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>
+              <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"
+                      >{{
+                        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>
+
+                <div class="info-route">
+                  <b>{{ timetable.route.replace('|', ' - ') }}</b>
+                </div>
+
+                <hr />
+
+                <!-- Spis postojów -->
+                <div class="stop-list" v-if="showExtraInfo.value == true">
+                  <span
+                    v-for="(stop, i) in stops.filter((_, i) =>
+                      !showExtraInfo.value ? i == 0 || i == stops.length - 1 : true
+                    )"
+                    class="stop-list-item"
+                    :key="stop.stopName"
+                    :data-confirmed="stop.confirmed"
+                  >
+                    <span v-if="i > 0">
+                      &gt;
+                      <span v-if="!showExtraInfo.value && i == 1 && stops.length > 2">
+                        ... (+{{ stops.length - 2 }}) &gt;
+                      </span>
+                    </span>
+
+                    <span class="stop-name">{{ stop.stopName }}</span>
+                    <span v-html="stop.html"></span>
+                  </span>
+                </div>
+
+                <!-- Status RJ -->
+                <div class="info-status" style="margin: 0.5em 0">
+                  <ProgressBar
+                    :progressPercent="(timetable.confirmedStopsCount / timetable.allStopsCount) * 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>
+
+                  <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>
+
+                <button class="btn--option btn--show">
+                  {{ $t('journal.stock-info') }}
+                  <img :src="getIcon(`arrow-${showExtraInfo.value ? 'asc' : 'desc'}`)" alt="Arrow" />
+                </button>
+
+                <!-- Dodatkowe informacje -->
+                <div class="info-extended" v-if="timetable.stockString && timetable.stockMass && showExtraInfo.value">
+                  <hr />
+
+                  <div class="stock-specs">
+                    <span class="badge specs-badge">
+                      <span>{{ $t('journal.dispatcher-name') }}</span>
+                      <span>{{ timetable.authorName }}</span>
+                    </span>
+                  </div>
+
+                  <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>
+
+                  <!-- Historia zmian w składzie -->
+                  <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>
-          </ul>
+          </transition-group>
+
+          <button
+            class="btn btn--option btn--load-data"
+            v-if="!scrollNoMoreData && scrollDataLoaded && timetableHistory.length >= 15"
+            @click="addHistoryData"
+          >
+            {{ $t('journal.load-data') }}
+          </button>
         </div>
       </div>
-    </li>
-  </transition-group>
+    </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">
@@ -216,17 +252,39 @@ import dateMixin from '../../mixins/dateMixin';
 import imageMixin from '../../mixins/imageMixin';
 import modalTrainMixin from '../../mixins/modalTrainMixin';
 import styleMixin from '../../mixins/styleMixin';
+import { DataStatus } from '../../scripts/enums/DataStatus';
 import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
+import { useStore } from '../../store/store';
 import ProgressBar from '../Global/ProgressBar.vue';
 
 export default defineComponent({
+  mixins: [dateMixin, imageMixin, modalTrainMixin, styleMixin],
   props: {
     timetableHistory: {
       type: Array as PropType<TimetableHistory[]>,
       required: true,
     },
+    scrollNoMoreData: {
+      type: Boolean,
+    },
+    scrollDataLoaded: {
+      type: Boolean,
+    },
+    addHistoryData: {
+      type: Function as PropType<() => void>,
+    },
+    dataStatus: {
+      type: Object as PropType<DataStatus>,
+    },
   },
-  mixins: [dateMixin, imageMixin, modalTrainMixin, styleMixin],
+
+  data() {
+    return {
+      DataStatus,
+      store: useStore(),
+    };
+  },
+
   computed: {
     computedTimetableHistory() {
       return this.timetableHistory.map((timetable) => ({
@@ -436,7 +494,7 @@ ul.stock-list {
 .stop-list {
   word-wrap: break-word;
   gap: 0.25em;
-  font-size: 0.9em;
+  font-size: 0.95em;
 
   color: #adadad;
 
diff --git a/src/views/JournalDispatchers.vue b/src/views/JournalDispatchers.vue
index 5fb2532..2074a76 100644
--- a/src/views/JournalDispatchers.vue
+++ b/src/views/JournalDispatchers.vue
@@ -18,43 +18,13 @@
       </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>
diff --git a/src/views/JournalTimetables.vue b/src/views/JournalTimetables.vue
index 2cc28a5..48f0048 100644
--- a/src/views/JournalTimetables.vue
+++ b/src/views/JournalTimetables.vue
@@ -21,38 +21,13 @@
       </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>
diff --git a/src/views/TrainsView.vue b/src/views/TrainsView.vue
index 99ab20a..df94b0e 100644
--- a/src/views/TrainsView.vue
+++ b/src/views/TrainsView.vue
@@ -77,7 +77,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 {

From 9d1dc4ffcaa289980ee54ecb5ab0342b6fcd68b9 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 31 Aug 2023 22:46:41 +0200
Subject: [PATCH 04/16] bump 1.17

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index bc7a229..8248d86 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "stacjownik",
-  "version": "1.16.3",
+  "version": "1.17.0",
   "private": true,
   "scripts": {
     "dev": "vite",

From 15508493604d7b4f9f3889851372afb3655710c5 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sat, 2 Sep 2023 18:47:01 +0200
Subject: [PATCH 05/16] dzienniki

---
 src/App.scss                                  |  1 -
 src/components/Global/StationStatusBadge.vue  | 90 +++++++++++++++++++
 .../JournalView/JournalDispatchersList.vue    | 87 +++++-------------
 .../JournalView/JournalTimetablesList.vue     |  6 +-
 .../SceneryInfo/SceneryInfoDispatcher.vue     | 41 ++++-----
 src/components/StationsView/StationTable.vue  | 18 ++--
 src/locales/en.json                           |  9 +-
 src/locales/pl.json                           |  9 +-
 .../interfaces/api/DispatchersAPIData.ts      |  1 +
 src/styles/scenery_status.scss                | 56 ------------
 src/views/JournalDispatchers.vue              | 12 +--
 11 files changed, 163 insertions(+), 167 deletions(-)
 create mode 100644 src/components/Global/StationStatusBadge.vue
 delete mode 100644 src/styles/scenery_status.scss

diff --git a/src/App.scss b/src/App.scss
index 49e4daf..8ceb3e8 100644
--- a/src/App.scss
+++ b/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 {
diff --git a/src/components/Global/StationStatusBadge.vue b/src/components/Global/StationStatusBadge.vue
new file mode 100644
index 0000000..eb54033
--- /dev/null
+++ b/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>
diff --git a/src/components/JournalView/JournalDispatchersList.vue b/src/components/JournalView/JournalDispatchersList.vue
index 852393c..b21cf65 100644
--- a/src/components/JournalView/JournalDispatchersList.vue
+++ b/src/components/JournalView/JournalDispatchersList.vue
@@ -19,12 +19,12 @@
         <div v-else>
           <table class="scenery-history-table">
             <thead>
-              <th>Sceneria</th>
-              <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>
+              <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-date') }}</th>
             </thead>
 
             <tbody>
@@ -54,7 +54,7 @@
                   <b>{{ historyItem.dispatcherRate }}</b>
                 </td>
 
-                <td style="min-width: 250px" class="time">
+                <td style="min-width: 200px" class="time">
                   <span v-if="historyItem.timestampTo">
                     <b>{{ $d(historyItem.timestampFrom) }}</b>
 
@@ -66,7 +66,10 @@
 
                   <span class="dispatcher-online" v-else>
                     <b class="text--online">
-                      {{ $t('journal.online-since') }} {{ timestampToString(historyItem.timestampFrom) }}
+                      <router-link :to="`/scenery?station=${historyItem.stationName}`">{{
+                        $t('journal.online-since')
+                      }}</router-link>
+                      {{ timestampToString(historyItem.timestampFrom) }}
                     </b>
                     ({{ calculateDuration(historyItem.currentDuration) }})
                   </span>
@@ -74,63 +77,6 @@
               </tr>
             </tbody>
           </table>
-          <!-- <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>
-
-              <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>
-
-                  <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> -->
 
           <button
             class="btn btn--option btn--load-data"
@@ -161,8 +107,11 @@ 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';
 
 export default defineComponent({
+  components: { Loading },
+
   mixins: [dateMixin, styleMixin, imageMixin],
 
   props: {
@@ -180,7 +129,7 @@ export default defineComponent({
       type: Function as PropType<() => void>,
     },
     dataStatus: {
-      type: Object as PropType<DataStatus>,
+      type: Number as PropType<DataStatus>,
     },
   },
 
@@ -252,12 +201,16 @@ table.scenery-history-table {
 
   td {
     padding: 0.75em;
-    border-bottom: solid 5px #1a1a1a;
+    border-bottom: solid 5px #111;
 
     .level-badge {
       margin: 0 auto;
     }
   }
+
+  @media screen and (max-width: 550px) {
+    font-size: 0.9em;
+  }
 }
 
 .text {
diff --git a/src/components/JournalView/JournalTimetablesList.vue b/src/components/JournalView/JournalTimetablesList.vue
index 88a4722..79d4704 100644
--- a/src/components/JournalView/JournalTimetablesList.vue
+++ b/src/components/JournalView/JournalTimetablesList.vue
@@ -255,9 +255,11 @@ import styleMixin from '../../mixins/styleMixin';
 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';
 
 export default defineComponent({
+  components: { ProgressBar, Loading },
   mixins: [dateMixin, imageMixin, modalTrainMixin, styleMixin],
   props: {
     timetableHistory: {
@@ -274,7 +276,7 @@ export default defineComponent({
       type: Function as PropType<() => void>,
     },
     dataStatus: {
-      type: Object as PropType<DataStatus>,
+      type: Number as PropType<DataStatus>,
     },
   },
 
@@ -310,6 +312,7 @@ export default defineComponent({
       }));
     },
   },
+
   methods: {
     getTimetableStops(timetable: TimetableHistory) {
       const stopNames = timetable.sceneriesString.split('%');
@@ -365,7 +368,6 @@ export default defineComponent({
       imageEl.src = this.getImage('unknown.png');
     },
   },
-  components: { ProgressBar },
 });
 </script>
 
diff --git a/src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue b/src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue
index fcafdbe..0fe14f6 100644
--- a/src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue
+++ b/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>
+
diff --git a/src/components/StationsView/StationTable.vue b/src/components/StationsView/StationTable.vue
index 5f7fbd7..480066a 100644
--- a/src/components/StationsView/StationTable.vue
+++ b/src/components/StationsView/StationTable.vue
@@ -93,16 +93,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 +248,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 +258,7 @@ export default defineComponent({
     },
   },
 
-  components: { Loading },
+  components: { Loading, StationStatusBadge },
   mixins: [styleMixin, dateMixin, stationInfoMixin, returnBtnMixin, imageMixin],
 
   data: () => ({
diff --git a/src/locales/en.json b/src/locales/en.json
index 43b9a30..803c783 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -335,7 +335,14 @@
     "stats-error": "Oops! An unexpected error occurred while trying to fetch statistics! :/",
 
     "timetable-location-signal": "signal:",
-    "timetable-location-route": "route:"
+    "timetable-location-route": "route:",
+
+    "history-name": "Scenery name",
+    "history-hash": "Hash",
+    "history-dispatcher": "Dispatcher",
+    "history-level": "Level",
+    "history-rate": "Rate",
+    "history-date": "Service date"
   },
   "scenery": {
     "users": "PLAYERS ONLINE",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index 37c8f18..b053f57 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -338,7 +338,14 @@
     "stats-error": "Ups! Wystąpił błąd podczas próby pobrania statystyk! :/",
 
     "timetable-location-signal": "semafor:",
-    "timetable-location-route": "szlak:"
+    "timetable-location-route": "szlak:",
+
+    "history-name": "Sceneria",
+    "history-hash": "Hash",
+    "history-dispatcher": "Dyżurny",
+    "history-level": "Poziom",
+    "history-rate": "Ocena",
+    "history-date": "Data służby"
   },
   "scenery": {
     "users": "GRACZE ONLINE",
diff --git a/src/scripts/interfaces/api/DispatchersAPIData.ts b/src/scripts/interfaces/api/DispatchersAPIData.ts
index 26e39ca..5961188 100644
--- a/src/scripts/interfaces/api/DispatchersAPIData.ts
+++ b/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;
diff --git a/src/styles/scenery_status.scss b/src/styles/scenery_status.scss
deleted file mode 100644
index c3f8dc8..0000000
--- a/src/styles/scenery_status.scss
+++ /dev/null
@@ -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;
-  }
-}
\ No newline at end of file
diff --git a/src/views/JournalDispatchers.vue b/src/views/JournalDispatchers.vue
index 2074a76..a5e3daa 100644
--- a/src/views/JournalDispatchers.vue
+++ b/src/views/JournalDispatchers.vue
@@ -6,7 +6,7 @@
       <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"
@@ -186,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;
@@ -203,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();
@@ -217,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');
@@ -230,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;

From d4438fd21512923022ae2cf6084a608b703a23bc Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sat, 2 Sep 2023 18:53:23 +0200
Subject: [PATCH 06/16] station filters active indicator

---
 src/components/StationsView/StationFilterCard.vue | 12 +++++-------
 src/styles/filters_options.scss                   |  9 ---------
 src/styles/global.scss                            |  9 +++++++++
 3 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/components/StationsView/StationFilterCard.vue b/src/components/StationsView/StationFilterCard.vue
index 5504862..3b4d8e2 100644
--- a/src/components/StationsView/StationFilterCard.vue
+++ b/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">
@@ -176,6 +177,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: {
@@ -442,16 +447,9 @@ export default defineComponent({
 
   .section-inputs {
     display: grid;
-    // flex-wrap: wrap;
     grid-template-columns: repeat(3, minmax(0, 1fr));
-    // grid-template-rows: repeat(3, 1fr);
     gap: 0.5em;
     margin: 1em 0;
-
-    // @include smallScreen() {
-    //   grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
-    //   grid-template-rows: auto;
-    // }
   }
 }
 
diff --git a/src/styles/filters_options.scss b/src/styles/filters_options.scss
index adcab45..6aa716c 100644
--- a/src/styles/filters_options.scss
+++ b/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;
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 3e4efc6..383c3a0 100644
--- a/src/styles/global.scss
+++ b/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;
 

From e836bbed0c187864cb744299b494db505c9d3fac Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sat, 2 Sep 2023 19:36:49 +0200
Subject: [PATCH 07/16] szybkie filtry (wip)

---
 src/components/StationsView/FilterOption.vue  |  1 +
 .../StationsView/StationFilterCard.vue        | 51 +++++++++++++------
 src/locales/en.json                           |  4 ++
 src/locales/pl.json                           |  4 ++
 src/store/stationFiltersStore.ts              | 13 +++++
 5 files changed, 57 insertions(+), 16 deletions(-)

diff --git a/src/components/StationsView/FilterOption.vue b/src/components/StationsView/FilterOption.vue
index 2dc6af9..0f57cf9 100644
--- a/src/components/StationsView/FilterOption.vue
+++ b/src/components/StationsView/FilterOption.vue
@@ -5,6 +5,7 @@
     :data-selected="option.value"
     @click="handleLeftClick"
     @dblclick="handleDbClick"
+    :aria-disabled="option.value"
   >
     {{ $t(`filters.${option.id}`) }}
   </button>
diff --git a/src/components/StationsView/StationFilterCard.vue b/src/components/StationsView/StationFilterCard.vue
index 3b4d8e2..c0f2152 100644
--- a/src/components/StationsView/StationFilterCard.vue
+++ b/src/components/StationsView/StationFilterCard.vue
@@ -30,6 +30,21 @@
           <p class="card_info" v-html="$t('filters.desc')"></p>
 
           <section class="card_options">
+            <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="saveFilters">
+                  {{ $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}`) }}
@@ -431,26 +446,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;
-    grid-template-columns: repeat(3, minmax(0, 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;
+}
+
+.quick-actions div {
+  display: flex;
+  margin: 1em 0;
+  gap: 1em;
 }
 
 .slider {
diff --git a/src/locales/en.json b/src/locales/en.json
index 803c783..404f722 100644
--- a/src/locales/en.json
+++ b/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",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index b053f57..4e23274 100644
--- a/src/locales/pl.json
+++ b/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",
diff --git a/src/store/stationFiltersStore.ts b/src/store/stationFiltersStore.ts
index ad8d812..33b9365 100644
--- a/src/store/stationFiltersStore.ts
+++ b/src/store/stationFiltersStore.ts
@@ -58,6 +58,19 @@ export const useStationFiltersStore = defineStore('stationFiltersStore', {
       });
     },
 
+    handleQuickAction(actionName: string) {
+      switch (actionName) {
+        case 'all-available':
+          this.resetFilters();
+
+          this.changeFilterValue({ name: 'non-public', value: false });
+          break;
+
+        default:
+          break;
+      }
+    },
+
     changeFilterValue(filter: { name: string; value: any }) {
       this.filters[filter.name] = filter.value;
 

From e5fe727ccd4ca3d01d46094568513b78f9c666e6 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sun, 3 Sep 2023 17:58:55 +0200
Subject: [PATCH 08/16] aktualizacja URLi

---
 src/scripts/utils/apiURLs.ts | 2 +-
 src/store/store.ts           | 4 +---
 vite.config.ts               | 2 +-
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/scripts/utils/apiURLs.ts b/src/scripts/utils/apiURLs.ts
index afe5bb2..1211a68 100644
--- a/src/scripts/utils/apiURLs.ts
+++ b/src/scripts/utils/apiURLs.ts
@@ -2,6 +2,6 @@ export const URLs = {
   stacjownikAPI:
     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',
 };
diff --git a/src/store/store.ts b/src/store/store.ts
index 7c68e4c..8b6985c 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -286,9 +286,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;
diff --git a/vite.config.ts b/vite.config.ts
index d69430c..fd3e769 100644
--- a/vite.config.ts
+++ b/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',

From dc862252ba8351148b9bd0b21434f8fa8e3a4909 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sun, 3 Sep 2023 18:34:45 +0200
Subject: [PATCH 09/16] =?UTF-8?q?dziennik=20dr:=20kolumna=20region=C3=B3w?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../JournalView/JournalDispatchersList.vue    | 11 +++++++++
 src/locales/en.json                           |  1 +
 src/locales/pl.json                           |  1 +
 src/styles/badge.scss                         | 24 +++++++++++++++++--
 4 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/src/components/JournalView/JournalDispatchersList.vue b/src/components/JournalView/JournalDispatchersList.vue
index b21cf65..2e2790a 100644
--- a/src/components/JournalView/JournalDispatchersList.vue
+++ b/src/components/JournalView/JournalDispatchersList.vue
@@ -24,6 +24,7 @@
               <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>
 
@@ -54,6 +55,12 @@
                   <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">
                     <b>{{ $d(historyItem.timestampFrom) }}</b>
@@ -108,6 +115,7 @@ 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';
 
 export default defineComponent({
   components: { Loading },
@@ -137,11 +145,14 @@ export default defineComponent({
     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);
diff --git a/src/locales/en.json b/src/locales/en.json
index 404f722..4d72ffd 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -346,6 +346,7 @@
     "history-dispatcher": "Dispatcher",
     "history-level": "Level",
     "history-rate": "Rate",
+    "history-region": "Region",
     "history-date": "Service date"
   },
   "scenery": {
diff --git a/src/locales/pl.json b/src/locales/pl.json
index 4e23274..7aaf23b 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -349,6 +349,7 @@
     "history-dispatcher": "Dyżurny",
     "history-level": "Poziom",
     "history-rate": "Ocena",
+    "history-region": "Region",
     "history-date": "Data służby"
   },
   "scenery": {
diff --git a/src/styles/badge.scss b/src/styles/badge.scss
index 65b6598..bd260ea 100644
--- a/src/styles/badge.scss
+++ b/src/styles/badge.scss
@@ -46,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 {

From 14d13360a855376216e8bf1711efdb14efde6644 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sun, 3 Sep 2023 18:47:01 +0200
Subject: [PATCH 10/16] dziennik dr: animacje

---
 .../JournalView/JournalDispatchersList.vue    | 103 +++++++++---------
 1 file changed, 50 insertions(+), 53 deletions(-)

diff --git a/src/components/JournalView/JournalDispatchersList.vue b/src/components/JournalView/JournalDispatchersList.vue
index 2e2790a..a630db1 100644
--- a/src/components/JournalView/JournalDispatchersList.vue
+++ b/src/components/JournalView/JournalDispatchersList.vue
@@ -29,59 +29,56 @@
             </thead>
 
             <tbody>
-              <tr v-for="historyItem in dispatcherHistory">
-                <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">
-                    <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) }}
+              <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>
-                    ({{ calculateDuration(historyItem.currentDuration) }})
-                  </span>
-                </td>
-              </tr>
+                  </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>
 
@@ -230,7 +227,7 @@ table.scenery-history-table {
   }
 
   &--offline {
-    color: salmon;
+    color: #ddd;
   }
 }
 </style>

From dbbbd33100df033e91ac1d40fbcf58671664f9f7 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sun, 3 Sep 2023 19:24:32 +0200
Subject: [PATCH 11/16] =?UTF-8?q?poprawki=20dziennik=C3=B3w?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/JournalView/JournalDispatchersList.vue | 2 ++
 src/components/JournalView/JournalTimetablesList.vue  | 4 +++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/JournalView/JournalDispatchersList.vue b/src/components/JournalView/JournalDispatchersList.vue
index a630db1..bc2adf8 100644
--- a/src/components/JournalView/JournalDispatchersList.vue
+++ b/src/components/JournalView/JournalDispatchersList.vue
@@ -189,6 +189,7 @@ table.scenery-history-table {
   width: 100%;
   background-color: #111;
   border-collapse: collapse;
+  position: relative;
   /* border-spacing: 0 0.5em; */
   text-align: center;
 
@@ -198,6 +199,7 @@ table.scenery-history-table {
     background-color: #222222;
   }
 
+
   th {
     padding: 0.5em;
   }
diff --git a/src/components/JournalView/JournalTimetablesList.vue b/src/components/JournalView/JournalTimetablesList.vue
index 79d4704..e548776 100644
--- a/src/components/JournalView/JournalTimetablesList.vue
+++ b/src/components/JournalView/JournalTimetablesList.vue
@@ -117,7 +117,7 @@
                 <!-- Status RJ -->
                 <div class="info-status" style="margin: 0.5em 0">
                   <ProgressBar
-                    :progressPercent="(timetable.confirmedStopsCount / timetable.allStopsCount) * 100"
+                    :progressPercent="~~((timetable.currentDistance / timetable.routeDistance) * 100)"
                     :progressType="!timetable.fulfilled && timetable.terminated ? 'abandoned' : ''"
                   />
 
@@ -127,6 +127,8 @@
                     </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">

From f77c13cbcf043ca9beac83b37d50745fe67aa82b Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Mon, 4 Sep 2023 18:37:52 +0200
Subject: [PATCH 12/16] =?UTF-8?q?srjp:=20poprawki=20dost=C4=99pno=C5=9Bci?=
 =?UTF-8?q?=20modalu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../JournalView/JournalTimetablesList.vue     |  14 +-
 .../SceneryInfo/SceneryInfoUserList.vue       | 264 +++++++++---------
 .../SceneryView/SceneryTimetable.vue          |   4 +-
 src/components/TrainsView/TrainInfo.vue       |   9 +-
 src/components/TrainsView/TrainTable.vue      |   5 +-
 src/mixins/modalTrainMixin.ts                 |   6 +-
 src/scripts/interfaces/store/storeTypes.ts    |   2 +
 src/store/store.ts                            |   1 +
 8 files changed, 151 insertions(+), 154 deletions(-)

diff --git a/src/components/JournalView/JournalTimetablesList.vue b/src/components/JournalView/JournalTimetablesList.vue
index e548776..d1f5583 100644
--- a/src/components/JournalView/JournalTimetablesList.vue
+++ b/src/components/JournalView/JournalTimetablesList.vue
@@ -29,9 +29,8 @@
                   <span
                     class="general-train"
                     tabindex="0"
-                    @click.stop="showTimetable(timetable)"
-                    @keydown.enter="showTimetable(timetable)"
-                    style="cursor: pointer"
+                    @click.stop="showTimetable(timetable, $event.currentTarget)"
+                    @keydown.enter="showTimetable(timetable, $event.currentTarget)"
                   >
                     <span class="text--grayed">#{{ timetable.id }}</span>
 
@@ -360,10 +359,10 @@ export default defineComponent({
         return { stopName, html, confirmed };
       });
     },
-    showTimetable(timetable: TimetableHistory) {
-      if (!timetable) return;
-      if (timetable.terminated) return;
-      this.selectModalTrain(timetable.driverName + timetable.trainNo.toString());
+    showTimetable(timetable: TimetableHistory, target: EventTarget | null) {
+      if (timetable?.terminated) return;
+
+      this.selectModalTrain(timetable.driverName + timetable.trainNo.toString(), target);
     },
     onImageError(e: Event) {
       const imageEl = e.target as HTMLImageElement;
@@ -437,6 +436,7 @@ hr {
 }
 
 .general-train {
+  cursor: pointer;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
diff --git a/src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue b/src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue
index e9ac04f..a920397 100644
--- a/src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue
+++ b/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>
diff --git a/src/components/SceneryView/SceneryTimetable.vue b/src/components/SceneryView/SceneryTimetable.vue
index d4179e0..d52dadf 100644
--- a/src/components/SceneryView/SceneryTimetable.vue
+++ b/src/components/SceneryView/SceneryTimetable.vue
@@ -67,8 +67,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">
diff --git a/src/components/TrainsView/TrainInfo.vue b/src/components/TrainsView/TrainInfo.vue
index a991f3a..829c87f 100644
--- a/src/components/TrainsView/TrainInfo.vue
+++ b/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,6 @@
       </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">
diff --git a/src/components/TrainsView/TrainTable.vue b/src/components/TrainsView/TrainTable.vue
index e927e42..5b0ea3a 100644
--- a/src/components/TrainsView/TrainTable.vue
+++ b/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>
diff --git a/src/mixins/modalTrainMixin.ts b/src/mixins/modalTrainMixin.ts
index 8354854..352fbe3 100644
--- a/src/mixins/modalTrainMixin.ts
+++ b/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);
     },
diff --git a/src/scripts/interfaces/store/storeTypes.ts b/src/scripts/interfaces/store/storeTypes.ts
index 54d7c26..4a49ed4 100644
--- a/src/scripts/interfaces/store/storeTypes.ts
+++ b/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 { Ref } from 'vue';
 
 export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
 
@@ -46,6 +47,7 @@ export interface StoreState {
 
   listenerLaunched: boolean;
   blockScroll: boolean;
+  modalLastClickedTarget: EventTarget | null;
 }
 
 export interface APIData {
diff --git a/src/store/store.ts b/src/store/store.ts
index 8b6985c..b41e715 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -58,6 +58,7 @@ export const useStore = defineStore('store', {
 
       blockScroll: false,
       listenerLaunched: false,
+      modalLastClickedTarget: null
     } as StoreState),
 
   actions: {

From c47d839ce36cb2dc38bb28f4914a9c3ecac793b8 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Mon, 4 Sep 2023 18:50:12 +0200
Subject: [PATCH 13/16] =?UTF-8?q?poprawki=20kolor=C3=B3w?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../JournalView/JournalDispatchersList.vue     | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/JournalView/JournalDispatchersList.vue b/src/components/JournalView/JournalDispatchersList.vue
index bc2adf8..9c5713d 100644
--- a/src/components/JournalView/JournalDispatchersList.vue
+++ b/src/components/JournalView/JournalDispatchersList.vue
@@ -186,32 +186,36 @@ export default defineComponent({
 @import '../../styles/JournalSection.scss';
 
 table.scenery-history-table {
+  --_bg-table: #111;
+  --_bg-head: #101010;
+  --_bg-row: #2f2f2f;
+
   width: 100%;
-  background-color: #111;
   border-collapse: collapse;
   position: relative;
-  /* border-spacing: 0 0.5em; */
   text-align: center;
 
   thead {
     position: sticky;
     top: 0;
-    background-color: #222222;
+    background-color: var(--_bg-head);
   }
 
-
   th {
     padding: 0.5em;
   }
 
   tr {
-    background-color: #353535;
-    border: none;
+    background-color: var(--_bg-row);
+    border-bottom: 2px solid black;
+  
+    &:last-child {
+      border: none;
+    }
   }
 
   td {
     padding: 0.75em;
-    border-bottom: solid 5px #111;
 
     .level-badge {
       margin: 0 auto;

From 439f59fedcb4e8645b0381b61ad065db447d60ca Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Tue, 5 Sep 2023 15:40:32 +0200
Subject: [PATCH 14/16] =?UTF-8?q?poprawki=20filtr=C3=B3w=20scenerii?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/StationsView/FilterOption.vue  | 85 +++++++++----------
 .../StationsView/StationFilterCard.vue        | 13 +--
 src/components/StationsView/StationTable.vue  |  4 -
 src/store/stationFiltersStore.ts              | 23 +++--
 src/views/StationsView.vue                    |  5 +-
 5 files changed, 55 insertions(+), 75 deletions(-)

diff --git a/src/components/StationsView/FilterOption.vue b/src/components/StationsView/FilterOption.vue
index 0f57cf9..c924eb5 100644
--- a/src/components/StationsView/FilterOption.vue
+++ b/src/components/StationsView/FilterOption.vue
@@ -1,14 +1,10 @@
 <template>
-  <button
-    class="btn--action"
-    :class="option.section"
-    :data-selected="option.value"
-    @click="handleLeftClick"
-    @dblclick="handleDbClick"
-    :aria-disabled="option.value"
-  >
-    {{ $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">
@@ -37,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;
         });
     },
@@ -77,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>
diff --git a/src/components/StationsView/StationFilterCard.vue b/src/components/StationsView/StationFilterCard.vue
index c0f2152..499ae13 100644
--- a/src/components/StationsView/StationFilterCard.vue
+++ b/src/components/StationsView/StationFilterCard.vue
@@ -55,7 +55,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"
@@ -224,10 +224,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);
     },
@@ -241,11 +238,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);
     },
 
diff --git a/src/components/StationsView/StationTable.vue b/src/components/StationsView/StationTable.vue
index 480066a..a42e588 100644
--- a/src/components/StationsView/StationTable.vue
+++ b/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>
diff --git a/src/store/stationFiltersStore.ts b/src/store/stationFiltersStore.ts
index 33b9365..f57147c 100644
--- a/src/store/stationFiltersStore.ts
+++ b/src/store/stationFiltersStore.ts
@@ -63,7 +63,7 @@ export const useStationFiltersStore = defineStore('stationFiltersStore', {
         case 'all-available':
           this.resetFilters();
 
-          this.changeFilterValue({ name: 'non-public', value: false });
+          // this.changeFilterValue('non-public', false);
           break;
 
         default:
@@ -71,10 +71,9 @@ export const useStationFiltersStore = defineStore('stationFiltersStore', {
       }
     },
 
-    changeFilterValue(filter: { name: string; value: any }) {
-      this.filters[filter.name] = filter.value;
-
-      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() {
@@ -92,14 +91,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) {
diff --git a/src/views/StationsView.vue b/src/views/StationsView.vue
index b9d2f73..6aa73ed 100644
--- a/src/views/StationsView.vue
+++ b/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);
     },
   },
 

From ee7c50f59b711f57554da9f12d64d7c2e290cf81 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Tue, 5 Sep 2023 16:10:38 +0200
Subject: [PATCH 15/16] szybkie filtry (wip)

---
 .../StationsView/StationFilterCard.vue        |  7 ++---
 src/store/stationFiltersStore.ts              | 27 ++++++++++++-------
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/components/StationsView/StationFilterCard.vue b/src/components/StationsView/StationFilterCard.vue
index 499ae13..67d21f3 100644
--- a/src/components/StationsView/StationFilterCard.vue
+++ b/src/components/StationsView/StationFilterCard.vue
@@ -30,7 +30,8 @@
           <p class="card_info" v-html="$t('filters.desc')"></p>
 
           <section class="card_options">
-            <div class="quick-actions">
+            <!-- QUICK ACTIONS (TODO) -->
+            <!-- <div class="quick-actions">
               <h3 class="text--primary">{{ $t('filters.sections.quick') }}</h3>
               <hr />
 
@@ -39,11 +40,11 @@
                   {{ $t('filters.all-available') }}
                 </button>
 
-                <button class="btn--action" style="width: 100%" @click="saveFilters">
+                <button class="btn--action" style="width: 100%" @click="filterStore.handleQuickAction('all-free')">
                   {{ $t('filters.all-free') }}
                 </button>
               </div>
-            </div>
+            </div> -->
 
             <div class="option-section" v-for="section in filterStore.inputs.optionSections">
               <h3 class="text--primary">
diff --git a/src/store/stationFiltersStore.ts b/src/store/stationFiltersStore.ts
index f57147c..d1a9bf4 100644
--- a/src/store/stationFiltersStore.ts
+++ b/src/store/stationFiltersStore.ts
@@ -58,17 +58,24 @@ export const useStationFiltersStore = defineStore('stationFiltersStore', {
       });
     },
 
+    // Quick actions (TODO)
     handleQuickAction(actionName: string) {
-      switch (actionName) {
-        case 'all-available':
-          this.resetFilters();
-
-          // this.changeFilterValue('non-public', false);
-          break;
-
-        default:
-          break;
-      }
+      // 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;
+      // }
     },
 
     changeFilterValue(name: string, value: any) {

From eb7c2d7132d384e3f4e3d4a1ff1539edadb85417 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Tue, 5 Sep 2023 16:48:26 +0200
Subject: [PATCH 16/16] =?UTF-8?q?revamp=20postoju=20i=20strza=C5=82ek=20w?=
 =?UTF-8?q?=20RJ=20scenerii?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SceneryView/SceneryTimetable.vue          | 106 +++++-------------
 1 file changed, 30 insertions(+), 76 deletions(-)

diff --git a/src/components/SceneryView/SceneryTimetable.vue b/src/components/SceneryView/SceneryTimetable.vue
index d52dadf..82f1a36 100644
--- a/src/components/SceneryView/SceneryTimetable.vue
+++ b/src/components/SceneryView/SceneryTimetable.vue
@@ -121,25 +121,17 @@
             </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>
 
@@ -341,8 +333,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 +360,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 +394,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 +420,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;
+      }
     }
   }
 }