From 032a84cbcf18297d1b3568694a4f9d6119f942da Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Mon, 20 Mar 2023 22:39:23 +0100
Subject: [PATCH 1/8] =?UTF-8?q?feature:=20historia=20zmian=20w=20zestawien?=
 =?UTF-8?q?iu=20poci=C4=85g=C3=B3w?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../JournalView/JournalTimetablesList.vue     | 87 ++++++++++++++++---
 src/components/TrainsView/TrainSchedule.vue   |  1 -
 src/locales/en.json                           |  2 +-
 src/locales/pl.json                           |  2 +-
 .../interfaces/api/TimetablesAPIData.ts       |  2 +
 src/styles/badge.scss                         |  6 +-
 6 files changed, 81 insertions(+), 19 deletions(-)

diff --git a/src/components/JournalView/JournalTimetablesList.vue b/src/components/JournalView/JournalTimetablesList.vue
index 492d9d5..661a29d 100644
--- a/src/components/JournalView/JournalTimetablesList.vue
+++ b/src/components/JournalView/JournalTimetablesList.vue
@@ -1,7 +1,7 @@
 <template>
   <transition-group class="journal-list" tag="ul" name="list-anim">
     <li
-      v-for="{ timetable, sceneryList, ...item } in computedTimetableHistory"
+      v-for="{ timetable, sceneryList, revesedHistory, ...item } in computedTimetableHistory"
       class="journal_item"
       :key="timetable.id"
       @click="item.showExtra.value = !item.showExtra.value"
@@ -129,24 +129,49 @@
           <img :src="getIcon(`arrow-${item.showExtra.value ? 'asc' : 'desc'}`)" alt="Arrow" />
         </button>
 
+        <!-- Dodatkowe informacje -->
         <div class="info-extended" v-if="timetable.stockString && item.showExtra.value">
           <hr />
-          <div>
-            <span class="badge info-badge">
+
+          <div class="stock-specs">
+            <span class="badge specs-badge">
               <span>{{ $t('journal.stock-max-speed') }}</span>
               <span>{{ timetable.maxSpeed }}km/h</span>
             </span>
-            <span class="badge info-badge">
+            <span class="badge specs-badge">
               <span>{{ $t('journal.stock-length') }}</span>
               <span>{{ timetable.stockLength }}m</span>
             </span>
-            <span class="badge info-badge">
+            <span class="badge specs-badge">
               <span>{{ $t('journal.stock-mass') }}</span>
               <span>{{ Math.floor(timetable.stockMass! / 1000) }}t</span>
             </span>
           </div>
+
+          <div class="stock-history" v-if="revesedHistory.length > 1">
+            <button
+              class="btn--action"
+              v-for="(sh, i) in revesedHistory"
+              :data-checked="i == item.currentHistoryIndex.value"
+              @click.stop="item.currentHistoryIndex.value = i"
+            >
+              {{
+                new Date(Number(sh.split('@')[0])).toLocaleTimeString($i18n.locale, {
+                  hour: '2-digit',
+                  minute: '2-digit',
+                })
+              }}
+            </button>
+          </div>
+
           <ul class="stock-list">
-            <li v-for="(car, i) in timetable.stockString.split(';')" :key="i">
+            <li
+              v-for="(car, i) in (revesedHistory.length <= 1
+                ? timetable.stockString
+                : revesedHistory[item.currentHistoryIndex.value].split('@')[1]
+              ).split(';')"
+              :key="i"
+            >
               <img
                 @error="onImageError"
                 :src="`https://rj.td2.info.pl/dist/img/thumbnails/${car.split(':')[0]}.png`"
@@ -168,7 +193,6 @@ import imageMixin from '../../mixins/imageMixin';
 import modalTrainMixin from '../../mixins/modalTrainMixin';
 import styleMixin from '../../mixins/styleMixin';
 import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
-import { TimetableStop } from '../../scripts/interfaces/api/TrainAPIData';
 
 export default defineComponent({
   props: {
@@ -185,7 +209,9 @@ export default defineComponent({
       return this.timetableHistory.map((timetable) => ({
         timetable,
         sceneryList: this.getSceneryList(timetable),
+        revesedHistory: timetable.stockHistory.slice().reverse(),
         showExtra: ref(false),
+        currentHistoryIndex: ref(0),
       }));
     },
   },
@@ -308,6 +334,38 @@ ul.stock-list {
     color: #aaa;
     font-size: 0.9em;
   }
+
+  li > img {
+    vertical-align: text-bottom;
+    max-height: 60px;
+  }
+}
+
+.stock-specs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  margin-top: 0.5em;
+
+  .specs-badge {
+    margin: 0;
+
+    span:last-child {
+      color: black;
+      background-color: $accentCol;
+    }
+  }
+}
+
+.stock-history {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  margin-top: 1em;
+  
+  button[data-checked=true] {
+    color: $accentCol;
+  }
 }
 
 .scenery-list {
@@ -328,13 +386,6 @@ ul.stock-list {
   }
 }
 
-.info-badge {
-  span:last-child {
-    color: black;
-    background-color: $accentCol;
-  }
-}
-
 @include smallScreen {
   .info-general {
     flex-direction: column;
@@ -351,5 +402,13 @@ ul.stock-list {
   .btn--show {
     margin: 1em auto 0 auto;
   }
+
+  .stock-specs {
+    justify-content: center;
+  }
+
+  .stock-history {
+    justify-content: center;
+  }
 }
 </style>
diff --git a/src/components/TrainsView/TrainSchedule.vue b/src/components/TrainsView/TrainSchedule.vue
index 29b9d86..a47a719 100644
--- a/src/components/TrainsView/TrainSchedule.vue
+++ b/src/components/TrainsView/TrainSchedule.vue
@@ -202,7 +202,6 @@ ul.stock-list {
 
   img {
     max-height: 60px;
-    max-width: 320px;
   }
 }
 
diff --git a/src/locales/en.json b/src/locales/en.json
index 34e4e54..d4a83f7 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -284,7 +284,7 @@
     "stock-info": "EXTRA INFO",
     "stock-length": "Length",
     "stock-mass": "Mass",
-    "stock-max-speed": "Maximum registered speed",
+    "stock-max-speed": "Max. speed",
 
     "load-data": "Load further data...",
 
diff --git a/src/locales/pl.json b/src/locales/pl.json
index dc321d4..9a24678 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -290,7 +290,7 @@
     "stock-info": "DODATKOWE INFORMACJE",
     "stock-length": "Długość",
     "stock-mass": "Masa",
-    "stock-max-speed": "Maks. zarejestrowana prędkość",
+    "stock-max-speed": "Prędkość maks.",
 
     "load-data": "Pobierz dalszą historię...",
 
diff --git a/src/scripts/interfaces/api/TimetablesAPIData.ts b/src/scripts/interfaces/api/TimetablesAPIData.ts
index 2defce9..11859f6 100644
--- a/src/scripts/interfaces/api/TimetablesAPIData.ts
+++ b/src/scripts/interfaces/api/TimetablesAPIData.ts
@@ -38,6 +38,8 @@ export interface TimetableHistory {
   stopsString?: string;
 
   stockString?: string;
+  stockHistory: string[];
+
   stockMass?: number;
   stockLength?: number;
   maxSpeed?: number;
diff --git a/src/styles/badge.scss b/src/styles/badge.scss
index f574e18..8d8cd47 100644
--- a/src/styles/badge.scss
+++ b/src/styles/badge.scss
@@ -4,10 +4,12 @@
   display: inline-block;
   padding: 0;
 
-  background: #585858;
-
   margin: 0.25em;
 
+  span:first-child {
+    background: #585858;
+  }
+
   span {
     display: inline-block;
     padding: 0.2em 0.4em;

From 77f61d17fd4036eaa2c05184287a6ba34ae42a25 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sun, 9 Apr 2023 00:19:53 +0200
Subject: [PATCH 2/8] =?UTF-8?q?hotfix:=20wygl=C4=85d=20badge'a?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/badge.scss | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/styles/badge.scss b/src/styles/badge.scss
index 8d8cd47..bc00ce0 100644
--- a/src/styles/badge.scss
+++ b/src/styles/badge.scss
@@ -6,12 +6,9 @@
 
   margin: 0.25em;
 
-  span:first-child {
-    background: #585858;
-  }
-
   span {
     display: inline-block;
+    background: #585858;
     padding: 0.2em 0.4em;
   }
 

From 4c410765198fbc4fbc2d2bd3a7706304c90ebc08 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sun, 9 Apr 2023 01:37:11 +0200
Subject: [PATCH 3/8] =?UTF-8?q?feature:=20skr=C3=B3t=20posterunku=20w=20ta?=
 =?UTF-8?q?belce?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/App/StatusIndicator.vue        |   2 +-
 src/components/StationsView/FilterOption.vue  |  46 -----
 .../StationsView/StationFilterCard.vue        |   1 -
 src/components/StationsView/StationTable.vue  |  31 ++--
 src/locales/en.json                           |   1 +
 src/locales/pl.json                           |   1 +
 src/scripts/data/stationHeaderNames.ts        |  14 ++
 src/scripts/interfaces/Station.ts             |   6 +-
 .../interfaces}/store/storeTypes.ts           | 157 +++++++++---------
 src/store/stationFiltersStore.ts              |  12 +-
 src/store/store.ts                            |   2 +-
 src/store/utils/filterUtils.ts                |  26 +--
 src/views/StationsView.vue                    |  11 --
 13 files changed, 142 insertions(+), 168 deletions(-)
 create mode 100644 src/scripts/data/stationHeaderNames.ts
 rename src/{ => scripts/interfaces}/store/storeTypes.ts (71%)

diff --git a/src/components/App/StatusIndicator.vue b/src/components/App/StatusIndicator.vue
index 4de73a9..0e4fdaf 100644
--- a/src/components/App/StatusIndicator.vue
+++ b/src/components/App/StatusIndicator.vue
@@ -164,7 +164,7 @@
 import { defineComponent } from 'vue';
 import { DataStatus } from '../../scripts/enums/DataStatus';
 import { useStore } from '../../store/store';
-import { StoreState } from '../../store/storeTypes';
+import { StoreState } from '../../scripts/interfaces/store/storeTypes';
 
 export default defineComponent({
   data() {
diff --git a/src/components/StationsView/FilterOption.vue b/src/components/StationsView/FilterOption.vue
index fe175fc..2dc6af9 100644
--- a/src/components/StationsView/FilterOption.vue
+++ b/src/components/StationsView/FilterOption.vue
@@ -50,9 +50,6 @@ export default defineComponent({
     handleDbClick(e: Event) {
       e.preventDefault();
 
-      
-      const lastClicked = this.filterStore.lastClickedFilterId == this.option.id;
-      console.log(this.filterStore.lastClickedFilterId);
       this.filterStore.lastClickedFilterId = this.option.id;
       this.option.value = true;
 
@@ -96,51 +93,8 @@ button {
   }
 
   &[data-selected='true'] {
-    //  &.reality {
-    //   background-color: $realityCol;
-    //   box-shadow: 0 0 6px 1px $realityCol;
-    // }
-
-    // &.access {
-    //   background-color: $accessCol;
-    //   box-shadow: 0 0 6px 1px $accessCol;
-    // }
-
-    // &.control {
-    //   background-color: $controlCol;
-    //   box-shadow: 0 0 6px 1px $controlCol;
-    // }
-
-    // &.signals {
-    //   background-color: $signalCol;
-    //   box-shadow: 0 0 6px 1px $signalCol;
-    // }
-
-    // &.routes {
-    //   background-color: $routesCol;
-    //   box-shadow: 0 0 6px 1px $routesCol;
-    // }
-
-    // &.status {
-    //   background-color: $statusCol;
-    //   box-shadow: 0 0 6px 1px $statusCol;
-    // }
-
-    // &.save {
-    //   background-color: $saveCol;
-    //   box-shadow: 0 0 6px 1px $saveCol;
-    // }
-
-    // &.troll {
-    //   background-color: firebrick;
-    //   box-shadow: 0 0 6px 1px firebrick;
-    // }
-
-    // & {
     background-color: forestgreen;
-
     font-weight: bold;
-    // }
   }
 }
 </style>
diff --git a/src/components/StationsView/StationFilterCard.vue b/src/components/StationsView/StationFilterCard.vue
index 50b6a60..5504862 100644
--- a/src/components/StationsView/StationFilterCard.vue
+++ b/src/components/StationsView/StationFilterCard.vue
@@ -128,7 +128,6 @@ import { useStore } from '../../store/store';
 
 import ActionButton from '../Global/ActionButton.vue';
 import FilterOption from './FilterOption.vue';
-import { filterInitStates } from '../../store/constants/initFilterStates';
 
 export default defineComponent({
   components: { ActionButton, FilterOption },
diff --git a/src/components/StationsView/StationTable.vue b/src/components/StationsView/StationTable.vue
index 63ff97e..629dccf 100644
--- a/src/components/StationsView/StationTable.vue
+++ b/src/components/StationsView/StationTable.vue
@@ -8,26 +8,26 @@
       <table>
         <thead>
           <tr>
-            <th v-for="(id, i) in headIds" :key="id" @click="() => changeSorter(i)">
+            <th v-for="(headerName, i) in headIds" :key="headerName" @click="changeSorter(headerName)">
               <span class="header_wrapper">
-                <div v-html="$t(`sceneries.${id}`)"></div>
+                <div v-html="$t(`sceneries.${headerName}`)"></div>
 
                 <img
                   class="sort-icon"
-                  v-if="sorterActive.index == i"
+                  v-if="sorterActive.headerName == headerName"
                   :src="sorterActive.dir == 1 ? getIcon('arrow-asc') : getIcon('arrow-desc')"
                   alt="sort icon"
                 />
               </span>
             </th>
 
-            <th v-for="(id, i) in headIconsIds" :key="id" @click="() => changeSorter(i + 7)">
+            <th v-for="(headerName, i) in headIconsIds" :key="headerName" @click="changeSorter(headerName)">
               <span class="header_wrapper">
-                <img :src="getIcon(id)" :alt="id" :title="$t(`sceneries.${id}s`)" />
+                <img :src="getIcon(headerName)" :alt="headerName" :title="$t(`sceneries.${headerName}s`)" />
 
                 <img
                   class="sort-icon"
-                  v-if="sorterActive.index == i + 7"
+                  v-if="sorterActive.headerName == headerName"
                   :src="sorterActive.dir == 1 ? getIcon('arrow-asc') : getIcon('arrow-desc')"
                   alt="sort icon"
                 />
@@ -53,6 +53,12 @@
               {{ station.name }}
             </td>
 
+            <td>
+              <b>
+                {{ station.generalInfo?.abbr }}
+              </b>
+            </td>
+
             <td class="station_level">
               <span v-if="station.generalInfo">
                 <span
@@ -236,6 +242,7 @@ import Station from '../../scripts/interfaces/Station';
 import { useStationFiltersStore } from '../../store/stationFiltersStore';
 import { useStore } from '../../store/store';
 import Loading from '../Global/Loading.vue';
+import { HeadIdsTypes, headIconsIds, headIds } from '../../scripts/data/stationHeaderNames';
 
 export default defineComponent({
   props: {
@@ -249,8 +256,8 @@ export default defineComponent({
   mixins: [styleMixin, dateMixin, stationInfoMixin, returnBtnMixin, imageMixin],
 
   data: () => ({
-    headIds: ['station', 'min-lvl', 'status', 'dispatcher', 'dispatcher-lvl', 'routes', 'general'],
-    headIconsIds: ['user', 'spawn', 'timetable'],
+    headIconsIds,
+    headIds,
     lastSelectedStationName: '',
   }),
 
@@ -291,8 +298,10 @@ export default defineComponent({
       window.open(url, '_blank');
     },
 
-    changeSorter(i: number) {
-      this.stationFiltersStore.changeSorter(i);
+    changeSorter(headerName: HeadIdsTypes) {
+      if (headerName == 'general' || headerName == 'routes') return;
+
+      this.stationFiltersStore.changeSorter(headerName);
     },
   },
 });
@@ -349,7 +358,7 @@ table {
     position: sticky;
     top: 0;
 
-    min-width: 75px;
+    min-width: 80px;
 
     padding: 0.5em;
     background-color: $bgCol;
diff --git a/src/locales/en.json b/src/locales/en.json
index d4a83f7..3392333 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -202,6 +202,7 @@
   },
   "sceneries": {
     "station": "Station",
+    "abbr": "Station\nabbrev.",
     "min-lvl": "Min. dispatcher\nlevel",
     "status": "Status",
     "dispatcher": "Dispatcher",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index 9a24678..d7d78c0 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -207,6 +207,7 @@
   },
   "sceneries": {
     "station": "Stacja",
+    "abbr": "Skrót\nposterunku",
     "min-lvl": "Min. poziom\ndyżurnego",
     "status": "Status",
     "dispatcher": "Dyżurny",
diff --git a/src/scripts/data/stationHeaderNames.ts b/src/scripts/data/stationHeaderNames.ts
new file mode 100644
index 0000000..6ebd0a2
--- /dev/null
+++ b/src/scripts/data/stationHeaderNames.ts
@@ -0,0 +1,14 @@
+export const headIds = [
+  'station',
+  'abbr',
+  'min-lvl',
+  'status',
+  'dispatcher',
+  'dispatcher-lvl',
+  'routes',
+  'general',
+] as const;
+
+export const headIconsIds = ['user', 'spawn', 'timetable'] as const;
+
+export type HeadIdsTypes = typeof headIds[number] | typeof headIconsIds[number];
diff --git a/src/scripts/interfaces/Station.ts b/src/scripts/interfaces/Station.ts
index ac1f07f..4f39b89 100644
--- a/src/scripts/interfaces/Station.ts
+++ b/src/scripts/interfaces/Station.ts
@@ -1,4 +1,4 @@
-import { Availability } from '../../store/storeTypes';
+import { Availability } from './store/storeTypes';
 import ScheduledTrain from './ScheduledTrain';
 import StationRoutes from './StationRoutes';
 
@@ -8,9 +8,11 @@ export default interface Station {
   generalInfo?: {
     name: string;
     url: string;
-    
+    abbr: string;
+
     reqLevel: number;
     // supportersOnly: boolean;
+
     
     lines: string;
     project: string;
diff --git a/src/store/storeTypes.ts b/src/scripts/interfaces/store/storeTypes.ts
similarity index 71%
rename from src/store/storeTypes.ts
rename to src/scripts/interfaces/store/storeTypes.ts
index f874743..41cdd87 100644
--- a/src/store/storeTypes.ts
+++ b/src/scripts/interfaces/store/storeTypes.ts
@@ -1,78 +1,79 @@
-import { Socket } from 'socket.io-client';
-import { DataStatus } from '../scripts/enums/DataStatus';
-import StationAPIData from '../scripts/interfaces/api/StationAPIData';
-import { TrainAPIData } from '../scripts/interfaces/api/TrainAPIData';
-import Station from '../scripts/interfaces/Station';
-import Train from '../scripts/interfaces/Train';
-import { DispatcherStatsAPIData } from '../scripts/interfaces/api/DispatcherStatsAPIData';
-import { DriverStatsAPIData } from '../scripts/interfaces/api/DriverStatsAPIData';
-
-export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
-
-export interface StoreState {
-  stationList: Station[];
-  trainList: Train[];
-  apiData: APIData;
-
-  lastDispatcherStatuses: { hash: string; statusTimestamp: number; statusID: string }[];
-
-  sceneryData: any[][];
-
-  region: { id: string; value: string };
-  trainCount: number;
-  stationCount: number;
-
-  webSocket?: Socket;
-  isOffline: boolean;
-
-  dispatcherStatsName: string;
-  dispatcherStatsData?: DispatcherStatsAPIData;
-
-  driverStatsName: string;
-  driverStatsData?: DriverStatsAPIData;
-  driverStatsStatus: DataStatus;
-
-  chosenModalTrainId?: string;
-
-  currentStatsTab: 'daily' | 'driver';
-
-  dataStatuses: {
-    connection: DataStatus;
-    sceneries: DataStatus;
-    timetables: DataStatus;
-    dispatchers: DataStatus;
-    trains: DataStatus;
-  };
-
-  listenerLaunched: boolean;
-  blockScroll: boolean;
-}
-
-export interface APIData {
-  stations?: StationAPIData[];
-  dispatchers?: string[][];
-  trains?: TrainAPIData[];
-  connectedSocketCount: number;
-}
-
-export interface StationJSONData {
-  name: string;
-  url: string;
-  lines: string;
-  project: string;
-  projectUrl: string;
-
-  reqLevel: number;
-
-  signalType: string;
-  controlType: string;
-
-  SUP: boolean;
-
-  routes: string;
-
-  checkpoints: string | null;
-  authors?: string;
-
-  availability: Availability;
-}
+import { Socket } from 'socket.io-client';
+import { DataStatus } from '../../enums/DataStatus';
+import StationAPIData from '../api/StationAPIData';
+import { TrainAPIData } from '../api/TrainAPIData';
+import Station from '../Station';
+import Train from '../Train';
+import { DispatcherStatsAPIData } from '../api/DispatcherStatsAPIData';
+import { DriverStatsAPIData } from '../api/DriverStatsAPIData';
+
+export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
+
+export interface StoreState {
+  stationList: Station[];
+  trainList: Train[];
+  apiData: APIData;
+
+  lastDispatcherStatuses: { hash: string; statusTimestamp: number; statusID: string }[];
+
+  sceneryData: any[][];
+
+  region: { id: string; value: string };
+  trainCount: number;
+  stationCount: number;
+
+  webSocket?: Socket;
+  isOffline: boolean;
+
+  dispatcherStatsName: string;
+  dispatcherStatsData?: DispatcherStatsAPIData;
+
+  driverStatsName: string;
+  driverStatsData?: DriverStatsAPIData;
+  driverStatsStatus: DataStatus;
+
+  chosenModalTrainId?: string;
+
+  currentStatsTab: 'daily' | 'driver';
+
+  dataStatuses: {
+    connection: DataStatus;
+    sceneries: DataStatus;
+    timetables: DataStatus;
+    dispatchers: DataStatus;
+    trains: DataStatus;
+  };
+
+  listenerLaunched: boolean;
+  blockScroll: boolean;
+}
+
+export interface APIData {
+  stations?: StationAPIData[];
+  dispatchers?: string[][];
+  trains?: TrainAPIData[];
+  connectedSocketCount: number;
+}
+
+export interface StationJSONData {
+  name: string;
+  abbr: string;
+  url: string;
+  lines: string;
+  project: string;
+  projectUrl: string;
+
+  reqLevel: number;
+
+  signalType: string;
+  controlType: string;
+
+  SUP: boolean;
+
+  routes: string;
+
+  checkpoints: string | null;
+  authors?: string;
+
+  availability: Availability;
+}
diff --git a/src/store/stationFiltersStore.ts b/src/store/stationFiltersStore.ts
index ca48eb9..9deda5c 100644
--- a/src/store/stationFiltersStore.ts
+++ b/src/store/stationFiltersStore.ts
@@ -1,18 +1,18 @@
 import { defineStore } from 'pinia';
 import inputData from '../data/options.json';
-import Filter from '../scripts/interfaces/Filter';
 import Station from '../scripts/interfaces/Station';
 import StorageManager from '../scripts/managers/storageManager';
 import { useStore } from './store';
 import { filterInitStates } from './constants/initFilterStates';
 import { filterStations, sortStations } from './utils/filterUtils';
+import { HeadIdsTypes } from '../scripts/data/stationHeaderNames';
 
 export const useStationFiltersStore = defineStore('stationFiltersStore', {
   state() {
     return {
       inputs: inputData,
       filters: { ...filterInitStates },
-      sorterActive: { index: 0, dir: 1 },
+      sorterActive: { headerName: 'station' as HeadIdsTypes, dir: 1 },
       store: useStore(),
       lastClickedFilterId: '',
     };
@@ -89,13 +89,11 @@ export const useStationFiltersStore = defineStore('stationFiltersStore', {
       });
     },
 
-    changeSorter(index: number) {
-      if (index > 4 && index < 7) return;
-
-      if (index == this.sorterActive.index) this.sorterActive.dir = -1 * this.sorterActive.dir;
+    changeSorter(headerName: HeadIdsTypes) {
+      if (headerName == this.sorterActive.headerName) this.sorterActive.dir = -1 * this.sorterActive.dir;
       else this.sorterActive.dir = 1;
 
-      this.sorterActive.index = index;
+      this.sorterActive.headerName = headerName;
     },
   },
 });
diff --git a/src/store/store.ts b/src/store/store.ts
index 7af3b94..b43e0cd 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -15,7 +15,7 @@ import {
   getScheduledTrain,
   parseSpawns,
 } from '../scripts/utils/storeUtils';
-import { APIData, StationJSONData, StoreState } from './storeTypes';
+import { APIData, StationJSONData, StoreState } from '../scripts/interfaces/store/storeTypes';
 
 export const useStore = defineStore('store', {
   state: () =>
diff --git a/src/store/utils/filterUtils.ts b/src/store/utils/filterUtils.ts
index 02a3c7b..8755bfe 100644
--- a/src/store/utils/filterUtils.ts
+++ b/src/store/utils/filterUtils.ts
@@ -1,34 +1,40 @@
+import { HeadIdsTypes } from '../../scripts/data/stationHeaderNames';
 import Filter from '../../scripts/interfaces/Filter';
 import Station from '../../scripts/interfaces/Station';
 
-export const sortStations = (a: Station, b: Station, sorter: { index: number; dir: number }) => {
-  switch (sorter.index) {
-    case 0:
+export const sortStations = (a: Station, b: Station, sorter: { headerName: HeadIdsTypes; dir: number }) => {
+  switch (sorter.headerName) {
+    case 'station':
       return sorter.dir == 1 ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
 
-    case 1:
+    case 'abbr':
+      if ((a.generalInfo?.abbr || '') > (b.generalInfo?.abbr || '')) return sorter.dir;
+      if ((a.generalInfo?.abbr || '') < (b.generalInfo?.abbr || '')) return -sorter.dir;
+      break;
+
+    case 'min-lvl':
       if ((a.generalInfo?.reqLevel || 0) > (b.generalInfo?.reqLevel || 0)) return sorter.dir;
       if ((a.generalInfo?.reqLevel || 0) < (b.generalInfo?.reqLevel || 0)) return -sorter.dir;
       break;
 
-    case 2:
+    case 'status':
       if ((a.onlineInfo?.statusTimestamp || 0) > (b.onlineInfo?.statusTimestamp || 0)) return sorter.dir;
       if ((a.onlineInfo?.statusTimestamp || 0) < (b.onlineInfo?.statusTimestamp || 0)) return -sorter.dir;
       break;
 
-    case 3:
+    case 'dispatcher':
       if ((a.onlineInfo?.dispatcherName.toLowerCase() || '') > (b.onlineInfo?.dispatcherName.toLowerCase() || ''))
         return sorter.dir;
       if ((a.onlineInfo?.dispatcherName.toLowerCase() || '') < (b.onlineInfo?.dispatcherName.toLowerCase() || ''))
         return -sorter.dir;
       break;
 
-    case 4:
+    case 'dispatcher-lvl':
       if ((a.onlineInfo?.dispatcherExp || 0) > (b.onlineInfo?.dispatcherExp || 0)) return sorter.dir;
       if ((a.onlineInfo?.dispatcherExp || 0) < (b.onlineInfo?.dispatcherExp || 0)) return -sorter.dir;
       break;
 
-    case 7:
+    case 'user':
       if ((a.onlineInfo?.currentUsers || 0) > (b.onlineInfo?.currentUsers || 0)) return sorter.dir;
       if ((a.onlineInfo?.currentUsers || 0) < (b.onlineInfo?.currentUsers || 0)) return -sorter.dir;
 
@@ -36,13 +42,13 @@ export const sortStations = (a: Station, b: Station, sorter: { index: number; di
       if ((a.onlineInfo?.maxUsers || 0) < (b.onlineInfo?.maxUsers || 0)) return -sorter.dir;
       break;
 
-    case 8:
+    case 'spawn':
       if ((a.onlineInfo?.spawns.length || 0) > (b.onlineInfo?.spawns.length || 0)) return sorter.dir;
       if ((a.onlineInfo?.spawns.length || 0) < (b.onlineInfo?.spawns.length || 0)) return -sorter.dir;
 
       break;
 
-    case 9:
+    case 'timetable':
       if ((a.onlineInfo?.scheduledTrains?.length || 0) > (b.onlineInfo?.scheduledTrains?.length || 0))
         return sorter.dir;
       if ((a.onlineInfo?.scheduledTrains?.length || 0) < (b.onlineInfo?.scheduledTrains?.length || 0))
diff --git a/src/views/StationsView.vue b/src/views/StationsView.vue
index 0a257c0..b9d2f73 100644
--- a/src/views/StationsView.vue
+++ b/src/views/StationsView.vue
@@ -52,17 +52,6 @@ export default defineComponent({
 
   mounted() {
     this.filterStore.setupFilters();
-    // this.filterStore.inputs.options.forEach((option) => {
-    //   const value = StorageManager.getBooleanValue(option.name);
-    //   option.value = value;
-    //   this.filterStore.changeFilterValue({ name: option.name, value: value });
-    // });
-
-    // this.filterStore.inputs.sliders.forEach((slider) => {
-    //   const value = StorageManager.getNumericValue(slider.name);
-    //   slider.value = value;
-    //   this.filterStore.changeFilterValue({ name: slider.name, value: value });
-    // });
   },
 });
 </script>

From 4adb76eeb04fbcdec65b5e7a7575ee64cd728437 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Tue, 11 Apr 2023 00:33:14 +0200
Subject: [PATCH 4/8] =?UTF-8?q?feature:=20podpisy=20status=20indicator?=
 =?UTF-8?q?=C3=B3w=20dla=20RJ?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SceneryView/ScheduledTrainStatus.vue      | 97 ++++++++++++-------
 src/locales/en.json                           | 15 ++-
 src/locales/pl.json                           | 15 ++-
 src/scripts/interfaces/ScheduledTrain.ts      | 59 ++++++-----
 src/scripts/interfaces/Station.ts             |  2 +-
 src/scripts/utils/storeUtils.ts               | 21 ++--
 src/store/store.ts                            |  2 +-
 7 files changed, 133 insertions(+), 78 deletions(-)

diff --git a/src/components/SceneryView/ScheduledTrainStatus.vue b/src/components/SceneryView/ScheduledTrainStatus.vue
index d35a9be..73a8ba3 100644
--- a/src/components/SceneryView/ScheduledTrainStatus.vue
+++ b/src/components/SceneryView/ScheduledTrainStatus.vue
@@ -1,47 +1,19 @@
 <template>
   <div class="general-status">
-    <span :class="scheduledTrain.stopStatus">
-      <span v-if="scheduledTrain.stopStatus == 'arriving'">
-        <span v-if="scheduledTrain.prevDepartureLine">({{ scheduledTrain.prevDepartureLine }})</span>
-        {{ scheduledTrain.prevStationName }}
-        &gt;<span v-if="scheduledTrain.nextArrivalLine"> ({{ scheduledTrain.nextArrivalLine }}) </span>
-        {{ scheduledTrain.nextStationName || '---' }}
-      </span>
-
-      <span v-else-if="scheduledTrain.stopStatus == 'departed'">
-        &gt;&gt; <span v-if="scheduledTrain.nextArrivalLine"> ({{ scheduledTrain.nextArrivalLine }}) </span>
-        {{ scheduledTrain.nextStationName }}
-      </span>
-
-      <span v-else-if="scheduledTrain.stopStatus == 'departed-away'">
-        &gt;&gt;&gt;
-        <span v-if="scheduledTrain.nextArrivalLine"> ({{ scheduledTrain.nextArrivalLine }}) </span>
-        {{ scheduledTrain.nextStationName }}
-      </span>
-
-      <span v-else-if="scheduledTrain.stopStatus == 'online'">
-        &gt;
-        <span v-if="scheduledTrain.nextArrivalLine">
-          ({{ scheduledTrain.nextArrivalLine }}) {{ scheduledTrain.nextStationName }}
-        </span>
-        <span v-else-if="!scheduledTrain.nextStationName">{{ $t('timetables.end') }}</span>
-        <span v-else>{{ scheduledTrain.nextStationName }}</span>
-      </span>
-
-      <span v-else-if="scheduledTrain.stopStatus == 'stopped'">
-        &gt;
-        <span v-if="scheduledTrain.nextArrivalLine"> ({{ scheduledTrain.nextArrivalLine }}) </span>
-        {{ scheduledTrain.nextStationName }}
-      </span>
-
-      <span v-else-if="scheduledTrain.stopStatus == 'terminated'">X {{ $t('timetables.terminated') }}</span>
+    <span :class="computedScheduledTrain.stopStatus" :title="computedScheduledTrain.stopStatusDescription">
+      {{ computedScheduledTrain.stopStatusIndicator }}
     </span>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
-import ScheduledTrain from '../../scripts/interfaces/ScheduledTrain';
+import { ScheduledTrain, StopStatus } from '../../scripts/interfaces/ScheduledTrain';
+
+interface ScheduledTrainComp extends ScheduledTrain {
+  stopStatusIndicator: string;
+  stopStatusDescription: string;
+}
 
 export default defineComponent({
   props: {
@@ -50,6 +22,58 @@ export default defineComponent({
       required: true,
     },
   },
+
+  computed: {
+    computedScheduledTrain(): ScheduledTrainComp {
+      const { prevDepartureLine, prevStationName, stopStatus, nextArrivalLine, nextStationName } = this.scheduledTrain;
+
+      const prevDepartureIndicator = prevDepartureLine ? `(${prevDepartureLine}) ${prevStationName}` : '---';
+      const nextArrivalIndicator = nextArrivalLine ? `(${nextArrivalLine}) ${nextStationName}` : '---';
+
+      let stopStatusDescription = '',
+        stopStatusIndicator = '';
+
+      switch (stopStatus) {
+        case StopStatus.arriving:
+          stopStatusIndicator = `${this.$t('timetables.from')}: ${prevDepartureIndicator}`;
+          stopStatusDescription = this.$t('timetables.desc-arriving', { prevStationName, prevDepartureLine });
+          break;
+
+        case StopStatus.online:
+        case StopStatus.stopped:
+          stopStatusIndicator = nextArrivalLine
+            ? `${this.$t('timetables.to')}: ${nextArrivalIndicator}`
+            : `${this.$t('timetables.desc-end')}`;
+          stopStatusDescription = nextArrivalLine
+            ? this.$t(`timetables.desc-${stopStatus}`, { nextStationName, nextArrivalLine })
+            : '';
+          break;
+
+        case StopStatus.departed:
+          stopStatusIndicator = `${this.$t('timetables.to')}: ${nextArrivalIndicator}`;
+          stopStatusDescription = this.$t('timetables.desc-departed', { nextStationName, nextArrivalLine });
+          break;
+
+        case StopStatus['departed-away']:
+          stopStatusIndicator = `${this.$t('timetables.to')}: ${nextArrivalIndicator}`;
+          stopStatusDescription = this.$t('timetables.desc-departed-away', { nextStationName, nextArrivalLine });
+          break;
+
+        case StopStatus.terminated:
+          stopStatusIndicator = `X ${this.$t('timetables.desc-terminated')}`;
+          stopStatusDescription = this.$t('timetables.desc-terminated');
+          break;
+
+        default:
+          break;
+      }
+      return {
+        ...this.scheduledTrain,
+        stopStatusDescription,
+        stopStatusIndicator,
+      };
+    },
+  },
 });
 </script>
 
@@ -86,3 +110,4 @@ export default defineComponent({
   }
 }
 </style>
+
diff --git a/src/locales/en.json b/src/locales/en.json
index 3392333..309ca40 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -215,7 +215,7 @@
     "no-stations": "No stations to show here!",
     "scenery-search": "Search for scenery..."
   },
-    "trains": {
+  "trains": {
     "no-trains": "No trains to show here!",
     "loading": "Loading train data...",
     "offline": "Offline ride",
@@ -369,7 +369,18 @@
     "end": "Timetable terminates here",
     "terminated": "Timetable terminated",
     "begins": "BEGINS HERE",
-    "terminates": "TERMINATES\nHERE"
+    "terminates": "TERMINATES\nHERE",
+
+    "from": "FROM",
+    "to": "TO",
+
+    "desc-arriving": "The train is not here yet. It's going to come from: {prevStationName} (szlak {prevDepartureLine})",
+    "desc-online": "The train is at the station. It's going to leave to: {nextStationName} (szlak {nextArrivalLine})",
+    "desc-stopped": "The train is at the station and is stopped. It's going to leave towards: {nextStationName} (szlak {nextArrivalLine})",
+    "desc-next-arrival": "Leaves towards: {nextStationName} (szlak {nextArrivalLine})",
+    "desc-departed": "The train is at the station and it's been departed. Leaves towards: {nextStationName} (szlak {nextArrivalLine})",
+    "desc-departed-away": "The train has been departed to: {nextStationName} (szlak {nextArrivalLine})",
+    "desc-end": "The train terminates here"
   },
   "history": {
     "title": "TIMETABLE JOURNAL",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index d7d78c0..c146192 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -136,7 +136,7 @@
   },
   "filters": {
     "desc": " &bull; Kliknięcie: zaznaczenie / odznaczenie filtru <br /> &bull; Podwójne kliknięcie: odznaczenie reszty filtrów z <b class='text--primary'>grupy</b> <br /> &bull; <span style='color: coral'>RESET</span>: zresetowanie filtrów z <b class='text--primary'>grupy</b>",
-    
+
     "sections": {
       "reality": "FIKCYJNOŚĆ SCENERII",
       "package-access": "DOSTĘPNOŚĆ W PACZCE",
@@ -375,7 +375,18 @@
     "end": "Koniec rozkładu jazdy",
     "terminated": "Rozkład jazdy zakończony",
     "begins": "ROZPOCZYNA\nBIEG",
-    "terminates": "KOŃCZY BIEG"
+    "terminates": "KOŃCZY BIEG",
+
+    "from": "Z",
+    "to": "DO",
+
+    "desc-arriving": "Pociągu nie ma jeszcze na tej scenerii. Przyjedzie z: {prevStationName} (szlak {prevDepartureLine})",
+    "desc-online": "Pociąg jest na tej scenerii. Odjedzie do: {nextStationName} (szlak {nextArrivalLine})",
+    "desc-stopped": "Pociąg jest na tej scenerii i odbywa postój. Odjedzie do: {nextStationName} (szlak {nextArrivalLine})",
+    "desc-next-arrival": "Odjeżdża do: {nextStationName} (szlak {nextArrivalLine})",
+    "desc-departed": "Pociąg jest na tej scenerii i został odprawiony. Odjeżdża do: {nextStationName} (szlak {nextArrivalLine})",
+    "desc-departed-away": "Pociąg został odprawiony i odjechał do: {nextStationName} (szlak {nextArrivalLine})",
+    "desc-end": "Pociąg kończy bieg"
   },
   "history": {
     "title": "DZIENNIK ROZKŁADÓW JAZDY"
diff --git a/src/scripts/interfaces/ScheduledTrain.ts b/src/scripts/interfaces/ScheduledTrain.ts
index e03a44f..3c537e8 100644
--- a/src/scripts/interfaces/ScheduledTrain.ts
+++ b/src/scripts/interfaces/ScheduledTrain.ts
@@ -1,32 +1,41 @@
-import TrainStop from "./TrainStop";
+import TrainStop from './TrainStop';
 
-export default interface ScheduledTrain {
-    trainId: string;
-    trainNo: number;
-    
-    driverName: string;
-    driverId: number;
-    currentStationName: string;
-    currentStationHash: string;
-    category: string;
-    stopInfo: TrainStop;
+export enum StopStatus {
+  'arriving' = 'arriving',
+  'departed' = 'departed',
+  'departed-away' = 'departed-away',
+  'online' = 'online',
+  'stopped' = 'stopped',
+  'terminated' = 'terminated',
+}
 
-    terminatesAt: string;
-    beginsAt: string;
+export interface ScheduledTrain {
+  trainId: string;
+  trainNo: number;
 
-    prevStationName: string;
-    nextStationName: string;
+  driverName: string;
+  driverId: number;
+  currentStationName: string;
+  currentStationHash: string;
+  category: string;
+  stopInfo: TrainStop;
 
-    arrivingLine: string | null;
-    departureLine: string | null;
+  terminatesAt: string;
+  beginsAt: string;
 
-    prevDepartureLine: string | null;
-    nextArrivalLine: string | null;
+  prevStationName: string;
+  nextStationName: string;
 
-    signal: string;
-    connectedTrack: string;
+  arrivingLine: string | null;
+  departureLine: string | null;
 
-    stopLabel: string;
-    stopStatus: string;
-    stopStatusID: number;
-}
\ No newline at end of file
+  prevDepartureLine: string | null;
+  nextArrivalLine: string | null;
+
+  signal: string;
+  connectedTrack: string;
+
+  stopLabel: string;
+  stopStatus: StopStatus;
+  stopStatusID: number;
+}
diff --git a/src/scripts/interfaces/Station.ts b/src/scripts/interfaces/Station.ts
index 4f39b89..e3eac88 100644
--- a/src/scripts/interfaces/Station.ts
+++ b/src/scripts/interfaces/Station.ts
@@ -1,5 +1,5 @@
 import { Availability } from './store/storeTypes';
-import ScheduledTrain from './ScheduledTrain';
+import {ScheduledTrain} from './ScheduledTrain';
 import StationRoutes from './StationRoutes';
 
 export default interface Station {
diff --git a/src/scripts/utils/storeUtils.ts b/src/scripts/utils/storeUtils.ts
index 57d0062..06b2ca7 100644
--- a/src/scripts/utils/storeUtils.ts
+++ b/src/scripts/utils/storeUtils.ts
@@ -1,4 +1,4 @@
-import ScheduledTrain from '../interfaces/ScheduledTrain';
+import { ScheduledTrain, StopStatus } from '../interfaces/ScheduledTrain';
 import Train from '../interfaces/Train';
 import TrainStop from '../interfaces/TrainStop';
 
@@ -74,32 +74,32 @@ export const parseSpawns = (spawnString: string) => {
 export const getTimestamp = (date: string | null): number => (date ? new Date(date).getTime() : 0);
 
 export const getTrainStopStatus = (stopInfo: TrainStop, currentStationName: string, stationName: string) => {
-  let stopStatus = '',
+  let stopStatus = StopStatus['arriving'],
     stopLabel = '',
     stopStatusID = -1;
 
   if (stopInfo.terminatesHere && stopInfo.confirmed) {
-    stopStatus = 'terminated';
+    stopStatus = StopStatus['terminated'];
     stopLabel = 'Skończył bieg';
     stopStatusID = 5;
   } else if (!stopInfo.terminatesHere && stopInfo.confirmed && currentStationName == stationName) {
-    stopStatus = 'departed';
+    stopStatus = StopStatus['departed'];
     stopLabel = 'Odprawiony';
     stopStatusID = 2;
   } else if (!stopInfo.terminatesHere && stopInfo.confirmed && currentStationName != stationName) {
-    stopStatus = 'departed-away';
+    stopStatus = StopStatus['departed-away'];
     stopLabel = 'Odjechał';
     stopStatusID = 4;
   } else if (currentStationName == stationName && !stopInfo.stopped) {
-    stopStatus = 'online';
+    stopStatus = StopStatus['online'];
     stopLabel = 'Na stacji';
     stopStatusID = 0;
   } else if (currentStationName == stationName && stopInfo.stopped) {
-    stopStatus = 'stopped';
+    stopStatus = StopStatus['stopped'];
     stopLabel = 'Postój';
     stopStatusID = 1;
   } else if (currentStationName != stationName) {
-    stopStatus = 'arriving';
+    stopStatus = StopStatus['arriving'];
     stopLabel = 'W drodze';
     stopStatusID = 3;
   }
@@ -122,7 +122,7 @@ export function getScheduledTrain(train: Train, trainStopIndex: number, stationN
 
   for (let i = trainStopIndex - 1; i >= 0; i--) {
     if (/strong|podg/g.test(followingStops[i].stopName)) {
-      prevStationName = followingStops[i].stopNameRAW.replace(/,.*/g,"");
+      prevStationName = followingStops[i].stopNameRAW.replace(/,.*/g, '');
 
       break;
     }
@@ -130,7 +130,7 @@ export function getScheduledTrain(train: Train, trainStopIndex: number, stationN
 
   for (let i = trainStopIndex + 1; i < followingStops.length; i++) {
     if (/strong|podg/g.test(followingStops[i].stopName)) {
-      nextStationName = followingStops[i].stopNameRAW.replace(/,.*/g,"");
+      nextStationName = followingStops[i].stopNameRAW.replace(/,.*/g, '');
 
       break;
     }
@@ -172,7 +172,6 @@ export function getScheduledTrain(train: Train, trainStopIndex: number, stationN
     signal: train.signal,
     connectedTrack: train.connectedTrack,
 
-
     driverName: train.driverName,
     driverId: train.driverId,
     currentStationName: train.currentStationName,
diff --git a/src/store/store.ts b/src/store/store.ts
index b43e0cd..96a4ef8 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -3,7 +3,7 @@ import { defineStore } from 'pinia';
 import { io } from 'socket.io-client';
 import { DataStatus } from '../scripts/enums/DataStatus';
 import StationAPIData from '../scripts/interfaces/api/StationAPIData';
-import ScheduledTrain from '../scripts/interfaces/ScheduledTrain';
+import {ScheduledTrain} from '../scripts/interfaces/ScheduledTrain';
 import Station from '../scripts/interfaces/Station';
 import StationRoutes from '../scripts/interfaces/StationRoutes';
 import Train from '../scripts/interfaces/Train';

From 3d0695a17b0eda90783001268c47ab0b86f88a70 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 13 Apr 2023 15:25:39 +0200
Subject: [PATCH 5/8] Poprawki w headerze i stopce

---
 src/App.scss                                  |  5 +
 src/App.vue                                   |  2 +
 src/components/App/AppHeader.vue              | 92 ++++++-------------
 src/components/App/StatusIndicator.vue        | 25 +++--
 src/components/Global/SelectBox.vue           | 36 ++------
 .../JournalView/JournalTimetablesList.vue     | 58 ++++++++----
 src/components/StationsView/StationTable.vue  |  4 +-
 src/scripts/utils/apiURLs.ts                  |  2 +-
 8 files changed, 94 insertions(+), 130 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 1033d9d..49e4daf 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -91,6 +91,11 @@ footer.app_footer {
   max-width: 100%;
   padding: 0.5em;
 
+  img {
+    width: 1.1em;
+    vertical-align: text-bottom;
+  }
+
   z-index: 10;
 
   background: #111;
diff --git a/src/App.vue b/src/App.vue
index 2e91da7..01fee68 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -23,6 +23,8 @@
       <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
       {{ new Date().getUTCFullYear() }} |
       <a :href="releaseURL" target="_blank">v{{ VERSION }}{{ isOnProductionHost ? '' : 'dev' }}</a>
+      <br />
+      <a href="https://discord.gg/x2mpNN3svk"><img :src="getIcon('discord', 'png')" alt="">&nbsp;<b>Discord Stacjownika</b></a>
 
       <div style="display: none">&int; ukryta taktyczna całka do programowania w HTMLu</div>
     </footer>
diff --git a/src/components/App/AppHeader.vue b/src/components/App/AppHeader.vue
index 77c1f9a..0126321 100644
--- a/src/components/App/AppHeader.vue
+++ b/src/components/App/AppHeader.vue
@@ -6,16 +6,6 @@
           <img :src="getIcon('pl')" alt="icon-pl" @click="changeLang('en')" v-if="currentLang == 'pl'" />
           <img :src="getIcon('en', 'jpg')" alt="icon-en" @click="changeLang('pl')" v-else />
         </span>
-
-        <span class="icons-bottom">
-          <a href="https://www.paypal.com/paypalme/spythere" target="_blank">
-            <img :src="getIcon('dollar')" alt="icon paypal" />
-          </a>
-
-          <a href="https://discord.gg/x2mpNN3svk" target="_blank">
-            <img :src="getIcon('discord', 'png')" alt="icon discord" />
-          </a>
-        </span>
       </div>
 
       <div class="header_body">
@@ -33,6 +23,12 @@
           <div class="info_counter">
             <img :src="getIcon('dispatcher')" alt="icon dispatcher" />
             <span class="text--primary">{{ onlineDispatchersCount }}</span>
+
+            <!-- <span class="g-tooltip">
+              <b class="text--primary">{{ factorU }}U</b>
+              <div class="content">Test</div>
+            </span> -->
+
             <span class="text--grayed"> / </span>
             <span class="text--primary">{{ onlineTrainsCount }}</span>
             <img :src="getIcon('train')" alt="icon train" />
@@ -98,11 +94,17 @@ export default defineComponent({
     onlineTrainsCount() {
       return this.store.trainList.filter((train) => train.online).length;
     },
+
     onlineDispatchersCount() {
       return this.store.stationList.filter(
         (station) => station.onlineInfo && station.onlineInfo.region == this.store.region.id
       ).length;
     },
+
+    factorU() {
+      return this.onlineDispatchersCount == 0 ? '-' : (this.onlineTrainsCount / this.onlineDispatchersCount).toFixed(2);
+    },
+
     computedRegions() {
       return options.regions.map((region) => {
         const regionStationCount =
@@ -135,22 +137,19 @@ export default defineComponent({
 
 .header {
   &_body {
-    max-width: 21em;
     position: relative;
-
-    @include smallScreen {
-      max-width: 18em;
-    }
   }
 
   &_container {
     display: flex;
     justify-content: center;
-    position: relative;
 
-    width: 1350px;
-    padding: 0.5em 0.3em 0 0.3em;
     border-radius: 0 0 1em 1em;
+
+    @include smallScreen {
+      position: relative;
+      margin-top: 0.5em;
+    }
   }
 
   &_brand {
@@ -158,6 +157,8 @@ export default defineComponent({
 
     img {
       width: 100%;
+      max-width: 20em;
+
       margin: 0 auto;
     }
   }
@@ -165,9 +166,7 @@ export default defineComponent({
   &_info {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
-    max-width: 100%;
-
-    font-size: 1.2em;
+    font-size: 1.15em;
   }
 
   &_links {
@@ -184,57 +183,20 @@ export default defineComponent({
     position: absolute;
     right: 0;
     top: 0;
-    height: 100%;
 
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    align-items: flex-end;
-    padding: 0.5em 0.5em;
+    padding: 0.5em;
 
-    @include smallScreen() {
-      right: auto;
-      left: 0.75em;
-      padding: 0;
-
-      align-items: center;
+    @include smallScreen {
+      transform: translateX(70%);
     }
   }
 }
 
 // ICONS
-.icons {
-  position: relative;
-
-  &-top {
-    img {
-      width: 2.5em;
-
-      cursor: pointer;
-    }
-
-    margin-bottom: 0.5em;
-  }
-
-  &-bottom {
-    display: flex;
-
-    a {
-      margin-left: 0.6em;
-      user-select: none;
-    }
-
-    img {
-      width: 1.9em;
-    }
-
-    @include smallScreen() {
-      flex-direction: column;
-
-      a {
-        margin: 0.25em 0;
-      }
-    }
+.icons-top {
+  img {
+    width: 2.5em;
+    cursor: pointer;
   }
 }
 
diff --git a/src/components/App/StatusIndicator.vue b/src/components/App/StatusIndicator.vue
index 0e4fdaf..0936a1c 100644
--- a/src/components/App/StatusIndicator.vue
+++ b/src/components/App/StatusIndicator.vue
@@ -303,9 +303,11 @@ export default defineComponent({
 
 .status-indicator {
   position: absolute;
-  left: 110%;
   bottom: 0;
+  right: 0;
   z-index: 100;
+
+  transform: translateX(1.5em);
 }
 
 .indicator {
@@ -330,7 +332,7 @@ export default defineComponent({
     background-color: #171717;
     border-radius: 0.75em;
 
-    min-width: 13em;
+    width: 13em;
     text-align: center;
     overflow: none;
 
@@ -354,22 +356,16 @@ export default defineComponent({
     }
 
     @include midScreen() {
-      left: 50%;
-      top: 100%;
-
-      transform: translate(-50%, 0);
-      margin-left: 0;
-      margin-top: 0.75em;
+      left: auto;
+      right: 200%;
 
       &::before {
-        border-left: 10px solid transparent;
         border-right: 10px solid transparent;
-        border-bottom: 10px solid #171717;
+        border-left: 12px solid #171717;
+        right: 0;
+        left: auto;
 
-        top: 0;
-        left: 50%;
-
-        transform: translate(-50%, -100%);
+        transform: translate(100%, -50%);
       }
     }
 
@@ -379,3 +375,4 @@ export default defineComponent({
   }
 }
 </style>
+
diff --git a/src/components/Global/SelectBox.vue b/src/components/Global/SelectBox.vue
index d4b90b0..7331c63 100644
--- a/src/components/Global/SelectBox.vue
+++ b/src/components/Global/SelectBox.vue
@@ -3,6 +3,10 @@
     <div class="select-box_content">
       <button class="selected" @click="toggleBox">
         <span>{{ computedSelectedItem.selectedValue || computedSelectedItem.value }}</span>
+
+        <div class="arrow">
+          <img :src="listOpen ? getIcon('arrow-asc') : getIcon('arrow-desc')" alt="arrow-icon" />
+        </div>
       </button>
 
       <ul class="options" :ref="(el) => (listRef = el as Element)">
@@ -21,10 +25,6 @@
         </li>
       </ul>
     </div>
-
-    <div class="arrow">
-      <img :src="listOpen ? getIcon('arrow-asc') : getIcon('arrow-desc')" alt="arrow-icon" />
-    </div>
   </div>
 </template>
 
@@ -129,46 +129,22 @@ export default defineComponent({
 }
 
 .select-box {
-  position: relative;
-  width: auto;
+  display: flex;
+  align-items: center;
 }
 
 .arrow {
-  position: absolute;
-  top: 50%;
-  right: 0;
-  padding: 0;
-
   img {
     vertical-align: middle;
     width: 1.35em;
   }
-
-  transform: translateY(-50%);
-
-  pointer-events: none;
 }
 
 button.selected {
-  background-color: transparent;
   color: paleturquoise;
 
-  font-size: 1em;
   font-weight: bold;
-
   padding: 0.1em 0.5em;
-  margin-right: 2em;
-
-  display: flex;
-
-
-  width: 100%;
-  cursor: pointer;
-
-  border: none;
-  outline: none;
-
-  text-align: left;
 
   &:focus {
     background-color: #262626;
diff --git a/src/components/JournalView/JournalTimetablesList.vue b/src/components/JournalView/JournalTimetablesList.vue
index 661a29d..d762435 100644
--- a/src/components/JournalView/JournalTimetablesList.vue
+++ b/src/components/JournalView/JournalTimetablesList.vue
@@ -1,7 +1,7 @@
 <template>
   <transition-group class="journal-list" tag="ul" name="list-anim">
     <li
-      v-for="{ timetable, sceneryList, revesedHistory, ...item } in computedTimetableHistory"
+      v-for="{ timetable, sceneryList, stockHistoryComp, ...item } in computedTimetableHistory"
       class="journal_item"
       :key="timetable.id"
       @click="item.showExtra.value = !item.showExtra.value"
@@ -130,7 +130,7 @@
         </button>
 
         <!-- Dodatkowe informacje -->
-        <div class="info-extended" v-if="timetable.stockString && item.showExtra.value">
+        <div class="info-extended" v-if="timetable.stockString && timetable.stockMass && item.showExtra.value">
           <hr />
 
           <div class="stock-specs">
@@ -140,35 +140,44 @@
             </span>
             <span class="badge specs-badge">
               <span>{{ $t('journal.stock-length') }}</span>
-              <span>{{ timetable.stockLength }}m</span>
+              <span>
+                {{
+                  item.currentHistoryIndex.value == 0
+                    ? timetable.stockLength
+                    : stockHistoryComp[item.currentHistoryIndex.value].stockLength || timetable.stockLength
+                }}m
+              </span>
             </span>
             <span class="badge specs-badge">
               <span>{{ $t('journal.stock-mass') }}</span>
-              <span>{{ Math.floor(timetable.stockMass! / 1000) }}t</span>
+              <span>
+                {{
+                  Math.floor(
+                    (item.currentHistoryIndex.value == 0
+                      ? timetable.stockMass!
+                      : stockHistoryComp[item.currentHistoryIndex.value].stockMass || timetable.stockMass) / 1000
+                  )
+                }}t
+              </span>
             </span>
           </div>
 
-          <div class="stock-history" v-if="revesedHistory.length > 1">
+          <div class="stock-history" v-if="stockHistoryComp.length > 1">
             <button
               class="btn--action"
-              v-for="(sh, i) in revesedHistory"
+              v-for="(sh, i) in stockHistoryComp"
               :data-checked="i == item.currentHistoryIndex.value"
               @click.stop="item.currentHistoryIndex.value = i"
             >
-              {{
-                new Date(Number(sh.split('@')[0])).toLocaleTimeString($i18n.locale, {
-                  hour: '2-digit',
-                  minute: '2-digit',
-                })
-              }}
+              {{ sh.updatedAt }}
             </button>
           </div>
 
           <ul class="stock-list">
             <li
-              v-for="(car, i) in (revesedHistory.length <= 1
+              v-for="(car, i) in (item.currentHistoryIndex.value == 0
                 ? timetable.stockString
-                : revesedHistory[item.currentHistoryIndex.value].split('@')[1]
+                : stockHistoryComp[item.currentHistoryIndex.value].stockString
               ).split(';')"
               :key="i"
             >
@@ -209,7 +218,22 @@ export default defineComponent({
       return this.timetableHistory.map((timetable) => ({
         timetable,
         sceneryList: this.getSceneryList(timetable),
-        revesedHistory: timetable.stockHistory.slice().reverse(),
+        stockHistoryComp: timetable.stockHistory
+          .slice()
+          .reverse()
+          .map((h) => {
+            const historyData = h.split('@');
+
+            return {
+              updatedAt: new Date(Number(historyData[0])).toLocaleTimeString(this.$i18n.locale, {
+                hour: '2-digit',
+                minute: '2-digit',
+              }),
+              stockString: historyData[1],
+              stockMass: Number(historyData[2]) || undefined,
+              stockLength: Number(historyData[3]) || undefined,
+            };
+          }),
         showExtra: ref(false),
         currentHistoryIndex: ref(0),
       }));
@@ -362,8 +386,8 @@ ul.stock-list {
   flex-wrap: wrap;
   gap: 0.5em;
   margin-top: 1em;
-  
-  button[data-checked=true] {
+
+  button[data-checked='true'] {
     color: $accentCol;
   }
 }
diff --git a/src/components/StationsView/StationTable.vue b/src/components/StationsView/StationTable.vue
index 629dccf..360483f 100644
--- a/src/components/StationsView/StationTable.vue
+++ b/src/components/StationsView/StationTable.vue
@@ -54,9 +54,7 @@
             </td>
 
             <td>
-              <b>
-                {{ station.generalInfo?.abbr }}
-              </b>
+              {{ station.generalInfo?.abbr }}
             </td>
 
             <td class="station_level">
diff --git a/src/scripts/utils/apiURLs.ts b/src/scripts/utils/apiURLs.ts
index fe47142..afe5bb2 100644
--- a/src/scripts/utils/apiURLs.ts
+++ b/src/scripts/utils/apiURLs.ts
@@ -1,7 +1,7 @@
 export const URLs = {
   stacjownikAPI:
     import.meta.env.VITE_APP_API_DEV == 1 && !import.meta.env.PROD
-      ? 'http://localhost:3000'
+      ? 'http://localhost:3001'
       : 'https://spythere.pl',
   stacjownikAPIDev: 'localhost:3000',
 };

From 5883e710be91b26637b4aaf48af0b1c3554c6428 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 13 Apr 2023 15:26:22 +0200
Subject: [PATCH 6/8] bump wersji: 1.14

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

diff --git a/package.json b/package.json
index 1a322ec..a4b30fd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "stacjownik",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "private": true,
   "scripts": {
     "dev": "vite",

From 0b746fce8c76a0b410f48b6a2d8698e097dd59e1 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 13 Apr 2023 15:32:41 +0200
Subject: [PATCH 7/8] hotfix headera

---
 src/components/App/AppHeader.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/App/AppHeader.vue b/src/components/App/AppHeader.vue
index 0126321..ae710b4 100644
--- a/src/components/App/AppHeader.vue
+++ b/src/components/App/AppHeader.vue
@@ -138,6 +138,7 @@ export default defineComponent({
 .header {
   &_body {
     position: relative;
+    max-width: 20em;
   }
 
   &_container {
@@ -157,7 +158,6 @@ export default defineComponent({
 
     img {
       width: 100%;
-      max-width: 20em;
 
       margin: 0 auto;
     }
@@ -187,7 +187,7 @@ export default defineComponent({
     padding: 0.5em;
 
     @include smallScreen {
-      transform: translateX(70%);
+      transform: translateX(85%);
     }
   }
 }

From 03e61083a78b2249781dbb43206fb5992d2aa93d Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 13 Apr 2023 15:37:34 +0200
Subject: [PATCH 8/8] =?UTF-8?q?t=C5=82umaczenie=20stopki?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue         | 2 +-
 src/locales/en.json | 3 +++
 src/locales/pl.json | 5 +++--
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 01fee68..3f7db36 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -24,7 +24,7 @@
       {{ new Date().getUTCFullYear() }} |
       <a :href="releaseURL" target="_blank">v{{ VERSION }}{{ isOnProductionHost ? '' : 'dev' }}</a>
       <br />
-      <a href="https://discord.gg/x2mpNN3svk"><img :src="getIcon('discord', 'png')" alt="">&nbsp;<b>Discord Stacjownika</b></a>
+      <a href="https://discord.gg/x2mpNN3svk"><img :src="getIcon('discord', 'png')" alt="">&nbsp;<b>{{ $t('footer.discord') }}</b></a>
 
       <div style="display: none">&int; ukryta taktyczna całka do programowania w HTMLu</div>
     </footer>
diff --git a/src/locales/en.json b/src/locales/en.json
index 309ca40..1a940bc 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -15,6 +15,9 @@
     "migration-confirm": "Roger that!",
     "offline": "App is in the offline mode!"
   },
+  "footer": {
+    "discord": "Stacjownik Discord server"
+  },
   "update": {
     "title": "New version of the app is available!",
     "paragraph1": "Enjoy the application and may the green signal be with you!",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index c146192..496bddf 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -15,7 +15,9 @@
     "migration-confirm": "Przyjąłem!",
     "offline": "Aplikacja w trybie offline!"
   },
-
+  "footer": {
+    "discord": "Serwer Discord Stacjownika"
+  },
   "update": {
     "title": "Nowa wersja Stacjownika jest dostępna!",
     "paragraph1": "Miłego korzystania z aplikacji i niech S2 będzie z wami!",
@@ -23,7 +25,6 @@
     "confirm-button": "ZAKTUALIZUJ",
     "later-button": "PÓŹNIEJ"
   },
-
   "data-status": {
     "S1-offline": "<b>Sygnał S1</b> <br> Aplikacja działa w trybie offline!",
     "S1a-connection": "<b>Sygnał S1a</b> <br> Błąd podczas próby połączenia się z API Stacjownika!",