From aa7a6b220ef47b1f8b97d4b15d951ed08769b482 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Mon, 2 Jan 2023 18:30:09 +0100
Subject: [PATCH 01/10] =?UTF-8?q?feature:=20lvl=20maszynisty=20przy=20dzie?=
 =?UTF-8?q?nniku=20i=20poci=C4=85gach?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../JournalView/JournalTimetablesList.vue        | 10 +++++++++-
 src/components/TrainsView/TrainInfo.vue          | 11 ++++++++---
 src/mixins/styleMixin.ts                         | 16 +++++++++++-----
 src/scripts/interfaces/Train.ts                  |  1 +
 src/scripts/interfaces/api/TimetablesAPIData.ts  |  4 ++++
 src/scripts/interfaces/api/TrainAPIData.ts       |  1 +
 src/store/store.ts                               |  1 +
 7 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/src/components/JournalView/JournalTimetablesList.vue b/src/components/JournalView/JournalTimetablesList.vue
index ee08f29..b798f17 100644
--- a/src/components/JournalView/JournalTimetablesList.vue
+++ b/src/components/JournalView/JournalTimetablesList.vue
@@ -17,6 +17,13 @@
             <b>{{ timetable.trainNo }}</b>
             | <span>{{ timetable.driverName }}</span> |
             <span class="text--grayed">#{{ timetable.id }}</span>
+
+            <span v-if="timetable.driverLevel">
+              |
+              <b :style="calculateTextExpStyle(timetable.driverLevel)">
+                {{ timetable.driverLevel < 2 ? 'L' : `${timetable.driverLevel} lvl` }}
+              </b>
+            </span>
           </span>
 
           <span>
@@ -140,6 +147,7 @@ import { defineComponent, PropType, ref } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
 import imageMixin from '../../mixins/imageMixin';
 import modalTrainMixin from '../../mixins/modalTrainMixin';
+import styleMixin from '../../mixins/styleMixin';
 import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
 
 export default defineComponent({
@@ -150,7 +158,7 @@ export default defineComponent({
     },
   },
 
-  mixins: [dateMixin, imageMixin, modalTrainMixin],
+  mixins: [dateMixin, imageMixin, modalTrainMixin, styleMixin],
 
   computed: {
     computedTimetableHistory() {
diff --git a/src/components/TrainsView/TrainInfo.vue b/src/components/TrainsView/TrainInfo.vue
index 59541d2..97d4585 100644
--- a/src/components/TrainsView/TrainInfo.vue
+++ b/src/components/TrainsView/TrainInfo.vue
@@ -14,8 +14,12 @@
           </strong>
           <strong class="train-number">&nbsp;{{ train.trainNo }}</strong>
           |
-          <span class="train-driver" :class="{ supporter: train.isSupporter }">{{ train.driverName }}</span>
-          
+          <!-- <span class="train-driver" :class="{ supporter: train.isSupporter }">{{ train.driverName }}</span> -->
+          {{ train.driverName }} |
+          <b :style="calculateTextExpStyle(train.driverLevel)">
+            {{ train.driverLevel < 2 ? 'L' : `${train.driverLevel} lvl` }}
+          </b>
+
           <b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
         </span>
       </div>
@@ -94,6 +98,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import imageMixin from '../../mixins/imageMixin';
+import styleMixin from '../../mixins/styleMixin';
 import trainInfoMixin from '../../mixins/trainInfoMixin';
 import Train from '../../scripts/interfaces/Train';
 
@@ -110,7 +115,7 @@ export default defineComponent({
     },
   },
 
-  mixins: [trainInfoMixin, imageMixin],
+  mixins: [trainInfoMixin, imageMixin, styleMixin],
 });
 </script>
 
diff --git a/src/mixins/styleMixin.ts b/src/mixins/styleMixin.ts
index 396180f..f7d9073 100644
--- a/src/mixins/styleMixin.ts
+++ b/src/mixins/styleMixin.ts
@@ -4,13 +4,19 @@ export default defineComponent({
   methods: {
     calculateExpStyle(exp: number, isSupporter = false): string {
       const bgColor = exp > -1 ? (exp < 2 ? '#26B0D9' : `hsl(${-exp * 5 + 100},  85%, 50%)`) : '#666';
-  
+
       const fontColor = exp > 14 || exp == -1 ? 'white' : 'black';
       const boxShadow = isSupporter ? `box-shadow: 0 0 10px 2px ${bgColor};` : '';
-  
+
       return `background-color: ${bgColor}; color: ${fontColor}; ${boxShadow}`;
     },
 
+    calculateTextExpStyle(exp: number): string {
+      const textColor = exp > -1 ? (exp < 2 ? '#26B0D9' : `hsl(${-exp * 5 + 100},  75%, 50%)`) : '#666';
+
+      return `color: ${textColor};`;
+    },
+
     statusClasses(occupiedTo: string) {
       let className = '';
 
@@ -41,6 +47,6 @@ export default defineComponent({
       }
 
       return className;
-    }
-  }
-})
+    },
+  },
+});
diff --git a/src/scripts/interfaces/Train.ts b/src/scripts/interfaces/Train.ts
index a57c8d6..b4e4dfb 100644
--- a/src/scripts/interfaces/Train.ts
+++ b/src/scripts/interfaces/Train.ts
@@ -12,6 +12,7 @@ export default interface Train {
   driverId: number;
   trainNo: number;
   driverName: string;
+  driverLevel: number;
   currentStationName: string;
   currentStationHash: string;
   locoURL: string;
diff --git a/src/scripts/interfaces/api/TimetablesAPIData.ts b/src/scripts/interfaces/api/TimetablesAPIData.ts
index c64ebfc..da13061 100644
--- a/src/scripts/interfaces/api/TimetablesAPIData.ts
+++ b/src/scripts/interfaces/api/TimetablesAPIData.ts
@@ -4,8 +4,12 @@ export interface TimetableHistory {
   timetableId: number;
   trainNo: number;
   trainCategoryCode: string;
+  
   driverId: number;
   driverName: string;
+  driverLevel: number | null;
+  driverIsSupporter: boolean;
+
   route: string;
   twr: number;
   skr: number;
diff --git a/src/scripts/interfaces/api/TrainAPIData.ts b/src/scripts/interfaces/api/TrainAPIData.ts
index f417ca4..3147114 100644
--- a/src/scripts/interfaces/api/TrainAPIData.ts
+++ b/src/scripts/interfaces/api/TrainAPIData.ts
@@ -13,6 +13,7 @@ export default interface TrainAPIData {
   driverName: string;
   driverId: number;
   driverIsSupporter: boolean;
+  driverLevel?: number;
 
   currentStationName: string;
   currentStationHash: string;
diff --git a/src/store/store.ts b/src/store/store.ts
index 85d7a1b..b72cdc8 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -101,6 +101,7 @@ export const useStore = defineStore('store', {
             isTimeout: train.isTimeout,
 
             isSupporter: train.driverIsSupporter,
+            driverLevel: train.driverLevel,
 
             timetableData: timetable
               ? {

From 25a248e95e57ec0229c551f9e0e30a44dae822a1 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Tue, 3 Jan 2023 14:51:19 +0100
Subject: [PATCH 02/10] feature: animacje list

---
 src/App.scss                                  |  6 +++-
 .../JournalView/JournalDispatchersList.vue    | 32 +++++++----------
 .../JournalView/JournalTimetablesList.vue     | 24 +++----------
 .../SceneryView/SceneryTimetable.vue          | 34 ++-----------------
 src/components/TrainsView/TrainTable.vue      |  6 ++--
 src/mixins/styleMixin.ts                      |  2 +-
 src/styles/animations.scss                    | 15 ++++++++
 src/styles/responsive.scss                    | 27 +++++++++------
 src/types/Journal/JournalTimetablesTypes.ts   |  2 +-
 src/views/JournalTimetables.vue               |  8 ++---
 10 files changed, 64 insertions(+), 92 deletions(-)
 create mode 100644 src/styles/animations.scss

diff --git a/src/App.scss b/src/App.scss
index 5032e35..4fb119d 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -46,7 +46,11 @@
   font-size: 1rem;
 
   @include smallScreen() {
-    font-size: calc(0.5rem + 1.3vw);
+    font-size: calc(0.5rem + 1.1vw);
+  }
+
+  @include screenLandscape() {
+    font-size: calc(0.45rem + 0.8vw);
   }
 }
 
diff --git a/src/components/JournalView/JournalDispatchersList.vue b/src/components/JournalView/JournalDispatchersList.vue
index 0f1fb42..6477299 100644
--- a/src/components/JournalView/JournalDispatchersList.vue
+++ b/src/components/JournalView/JournalDispatchersList.vue
@@ -1,6 +1,5 @@
 <template>
-  <ul class="journal-list">
-    <!-- <transition-group name="journal-list-anim"> -->
+  <transition-group class="journal-list" tag="ul" name="list-anim">
     <li v-for="item in computedDispatcherHistory" :class="{ sticky: typeof item == 'string' }">
       <div v-if="typeof item == 'string'" class="journal_day">
         {{ item }}
@@ -9,6 +8,7 @@
       <div
         v-else
         class="journal_item"
+        :key="item.timestampFrom + item.dispatcherId" 
         :class="{ online: item.isOnline }"
         @click="navigateToScenery(item.stationName, item.isOnline)"
         @keydown.enter="navigateToScenery(item.stationName, item.isOnline)"
@@ -44,8 +44,7 @@
         </span>
       </div>
     </li>
-    <!-- </transition-group> -->
-  </ul>
+  </transition-group>
 </template>
 
 <script lang="ts">
@@ -95,6 +94,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@import '../../styles/animations.scss';
 @import '../../styles/responsive.scss';
 @import '../../styles/JournalSection.scss';
 
@@ -117,9 +117,12 @@ li.sticky {
   display: flex;
   justify-content: space-between;
   align-items: center;
-
   flex-wrap: wrap;
+  text-align: left;
 
+  gap: 0.25em;
+
+  line-height: 1.7em;
   padding: 0.75em;
 
   &.online {
@@ -155,23 +158,12 @@ li.sticky {
 .dispatcher-level {
   display: inline-block;
   text-align: center;
-  line-height: 150%;
 
-  width: 25px;
-  height: 25px;
+  line-height: 1.45em;
+  width: 1.45em;
+  height: 1.45em;
 
-  margin-right: 0.5em;
+  margin-right: 0.45em;
   border-radius: 0.25em;
 }
-
-@include smallScreen() {
-  .journal_item {
-    flex-direction: column;
-
-    span {
-      margin-top: 0.25em;
-      text-align: center;
-    }
-  }
-}
 </style>
diff --git a/src/components/JournalView/JournalTimetablesList.vue b/src/components/JournalView/JournalTimetablesList.vue
index b798f17..b2954fc 100644
--- a/src/components/JournalView/JournalTimetablesList.vue
+++ b/src/components/JournalView/JournalTimetablesList.vue
@@ -1,9 +1,9 @@
 <template>
-  <ul class="journal-list">
+  <transition-group class="journal-list" tag="ul" name="list-anim">
     <li
       v-for="{ timetable, sceneryList, ...item } in computedTimetableHistory"
       class="journal_item"
-      :key="timetable.timetableId"
+      :key="timetable.id"
     >
       <div class="journal_item-info">
         <div class="info-top">
@@ -17,7 +17,6 @@
             <b>{{ timetable.trainNo }}</b>
             | <span>{{ timetable.driverName }}</span> |
             <span class="text--grayed">#{{ timetable.id }}</span>
-
             <span v-if="timetable.driverLevel">
               |
               <b :style="calculateTextExpStyle(timetable.driverLevel)">
@@ -25,7 +24,6 @@
               </b>
             </span>
           </span>
-
           <span>
             <b class="info-date">{{ localeDay(timetable.beginDate, $i18n.locale) }}</b>
             <b
@@ -46,26 +44,20 @@
             </b>
           </span>
         </div>
-
         <div class="info-route">
           <b>{{ timetable.route.replace('|', ' - ') }}</b>
         </div>
-
         <hr />
-
         <div class="scenery-list">
           <span v-for="(scenery, i) in sceneryList" :key="scenery.name" :class="{ confirmed: scenery.confirmed }">
             <span v-if="i > 0"> &gt;</span>
             {{ scenery.name }}
-
             <!-- Data odjazdu ze stacji początkowej -->
             <span v-if="i == 0" v-html="scenery.beginDateHTML"></span>
-
             <!-- Data przyjazdu do stacji końcowej -->
             <span v-if="i == sceneryList.length - 1" v-html="scenery.endDateHTML"> </span>
           </span>
         </div>
-
         <!-- Status RJ -->
         <div style="margin: 0.5em 0">
           <span>
@@ -87,7 +79,6 @@
             </b>
           </span>
         </div>
-
         <!-- Nick dyżurnego -->
         <div v-if="timetable.authorName">
           <b class="text--grayed">{{ $t('journal.dispatcher-name') }}&nbsp;</b>
@@ -95,7 +86,6 @@
             <b>{{ timetable.authorName }}</b>
           </router-link>
         </div>
-
         <button
           v-if="timetable.stockString"
           class="btn--option btn--show"
@@ -104,27 +94,22 @@
           {{ $t('journal.stock-info') }}
           <img :src="getIcon(`arrow-${item.showStock.value ? 'asc' : 'desc'}`)" alt="Arrow" />
         </button>
-
         <div class="info-extended" v-if="timetable.stockString && item.showStock.value">
           <hr />
-
           <div>
             <span class="badge info-badge">
               <span>{{ $t('journal.stock-max-speed') }}</span>
               <span>{{ timetable.maxSpeed }}km/h</span>
             </span>
-
             <span class="badge info-badge">
               <span>{{ $t('journal.stock-length') }}</span>
               <span>{{ timetable.stockLength }}m</span>
             </span>
-
             <span class="badge info-badge">
               <span>{{ $t('journal.stock-mass') }}</span>
               <span>{{ Math.floor(timetable.stockMass! / 1000) }}t</span>
             </span>
           </div>
-
           <ul class="stock-list">
             <li v-for="(car, i) in timetable.stockString.split(';')" :key="i">
               <img
@@ -132,14 +117,13 @@
                 :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>
 </template>
 
 <script lang="ts">
@@ -219,11 +203,13 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@import '../../styles/animations.scss';
 @import '../../styles/variables.scss';
 @import '../../styles/responsive.scss';
 @import '../../styles/badge.scss';
 @import '../../styles/JournalSection.scss';
 
+
 hr {
   margin: 0.25em 0;
 }
diff --git a/src/components/SceneryView/SceneryTimetable.vue b/src/components/SceneryView/SceneryTimetable.vue
index 997423f..7717f47 100644
--- a/src/components/SceneryView/SceneryTimetable.vue
+++ b/src/components/SceneryView/SceneryTimetable.vue
@@ -41,7 +41,7 @@
         {{ $t('scenery.no-timetables') }}
       </span>
 
-      <transition-group name="timetables-anim">
+      <transition-group name="list-anim">
         <div
           class="timetable-item"
           v-for="(scheduledTrain, i) in computedScheduledTrains"
@@ -272,22 +272,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../../styles/responsive.scss';
 @import '../../styles/variables.scss';
-
-.timetables-anim-move,
-.timetables-anim-enter-active,
-.timetables-anim-leave-active {
-  transition: all 250ms ease;
-}
-
-.timetables-anim-enter-from,
-.timetables-anim-leave-to {
-  opacity: 0;
-  transform: translateY(30px);
-}
-
-.timetables-anim-leave-active {
-  position: absolute;
-}
+@import '../../styles/animations.scss';
 
 .scenery-timetable {
   height: 100%;
@@ -486,21 +471,6 @@ export default defineComponent({
   font-size: 0.85em;
 }
 
-.scenery-timetable-list-anim {
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-  }
-
-  &-enter-active {
-    transition: all 100ms ease-out;
-  }
-
-  &-leave-active {
-    transition: all 100ms ease-out 100ms;
-  }
-}
-
 @include smallScreen {
   .timetable-item {
     grid-template-columns: 1fr;
diff --git a/src/components/TrainsView/TrainTable.vue b/src/components/TrainsView/TrainTable.vue
index 4ad0b96..8196d63 100644
--- a/src/components/TrainsView/TrainTable.vue
+++ b/src/components/TrainsView/TrainTable.vue
@@ -16,8 +16,7 @@
           <b class="warning-timeout">?</b>
           {{ $t('trains.timeout') }}
         </div> -->
-        
-        <ul class="train-list" v-else>
+        <transition-group name="list-anim" tag="ul" class="train-list" v-else>
           <li
             class="train-row"
             v-for="train in currentTrains"
@@ -27,7 +26,7 @@
           >
             <TrainInfo :train="train" />
           </li>
-        </ul>
+        </transition-group>
       </div>
     </transition>
   </div>
@@ -98,6 +97,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import '../../styles/responsive.scss';
+@import '../../styles/animations.scss';
 
 .anim {
   &-enter-from,
diff --git a/src/mixins/styleMixin.ts b/src/mixins/styleMixin.ts
index f7d9073..beb2090 100644
--- a/src/mixins/styleMixin.ts
+++ b/src/mixins/styleMixin.ts
@@ -8,7 +8,7 @@ export default defineComponent({
       const fontColor = exp > 14 || exp == -1 ? 'white' : 'black';
       const boxShadow = isSupporter ? `box-shadow: 0 0 10px 2px ${bgColor};` : '';
 
-      return `background-color: ${bgColor}; color: ${fontColor}; ${boxShadow}`;
+      return `background-color: ${bgColor}; color: ${fontColor}; ${boxShadow};`;
     },
 
     calculateTextExpStyle(exp: number): string {
diff --git a/src/styles/animations.scss b/src/styles/animations.scss
new file mode 100644
index 0000000..0d72d82
--- /dev/null
+++ b/src/styles/animations.scss
@@ -0,0 +1,15 @@
+.list-anim-move,
+.list-anim-enter-active,
+.list-anim-leave-active {
+  transition: all 250ms ease;
+}
+
+.list-anim-enter-from,
+.list-anim-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.list-anim-leave-active {
+  position: absolute;
+}
\ No newline at end of file
diff --git a/src/styles/responsive.scss b/src/styles/responsive.scss
index 76fbc8f..ee26fa7 100644
--- a/src/styles/responsive.scss
+++ b/src/styles/responsive.scss
@@ -1,18 +1,23 @@
 @mixin smallScreen() {
-    @media only screen and (max-width: 700px) {
-        @content;
-    }
+  @media only screen and (max-width: 700px) {
+    @content;
+  }
 }
 
-
 @mixin midScreen() {
-    @media only screen and (max-width: 1150px) {
-        @content;
-    }
+  @media only screen and (max-width: 1150px) {
+    @content;
+  }
+}
+
+@mixin screenLandscape() {
+  @media only screen and (orientation: landscape) and (max-device-height: 450px)  {
+    @content;
+  }
 }
 
 @mixin bigScreen() {
-    @media only screen and (min-width: 2000px) {
-        @content;
-    }
-}
\ No newline at end of file
+  @media only screen and (min-width: 2000px) {
+    @content;
+  }
+}
diff --git a/src/types/Journal/JournalTimetablesTypes.ts b/src/types/Journal/JournalTimetablesTypes.ts
index a03f5d9..cf0ad24 100644
--- a/src/types/Journal/JournalTimetablesTypes.ts
+++ b/src/types/Journal/JournalTimetablesTypes.ts
@@ -13,6 +13,6 @@ export interface JournalTimetableFilter {
 }
 
 export interface JournalTimetableSorter {
-  id:  'beginDate' | 'distance' | 'total-stops';
+  id:  'timetableId' | 'beginDate' | 'distance' | 'total-stops';
   dir: -1 | 1;
 }
diff --git a/src/views/JournalTimetables.vue b/src/views/JournalTimetables.vue
index 5173e0c..c8350ed 100644
--- a/src/views/JournalTimetables.vue
+++ b/src/views/JournalTimetables.vue
@@ -6,7 +6,7 @@
       <JournalOptions
         @on-search-confirm="fetchHistoryData"
         @on-options-reset="resetOptions"
-        :sorter-option-ids="[ 'beginDate', 'distance', 'total-stops']"
+        :sorter-option-ids="['timetableId', 'beginDate', 'distance', 'total-stops']"
         :filters="journalTimetableFilters"
         :currentOptionsActive="currentOptionsActive"
         :data-status="dataStatus"
@@ -111,7 +111,7 @@ export default defineComponent({
   }),
 
   setup() {
-    const sorterActive: JournalTimetableSorter = reactive({ id: 'beginDate', dir: 1 });
+    const sorterActive: JournalTimetableSorter = reactive({ id: 'timetableId', dir: 1 });
     const journalFilterActive = ref(journalTimetableFilters[0]);
 
     const searchersValues = reactive({
@@ -147,7 +147,7 @@ export default defineComponent({
   watch: {
     currentQueryArray(q: string[]) {
       this.currentOptionsActive =
-        q.length > 2 || q.some((qv) => qv.startsWith('sortBy=') && qv.split('=')[1] != 'beginDate');
+        q.length > 2 || q.some((qv) => qv.startsWith('sortBy=') && qv.split('=')[1]);
     },
   },
 
@@ -188,7 +188,7 @@ export default defineComponent({
       this.setSearchers('', '', '', '');
 
       this.journalFilterActive = this.journalTimetableFilters[0];
-      this.sorterActive.id = 'beginDate';
+      this.sorterActive.id = 'timetableId';
 
       this.fetchHistoryData();
     },

From 6a923a8e1d77e34c7d3e3c7bc9601a6a53b857c2 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Tue, 3 Jan 2023 14:57:36 +0100
Subject: [PATCH 03/10] feature: sygnatura dev w stopce

---
 src/App.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 868938f..2e91da7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -21,7 +21,8 @@
     <footer class="app_footer">
       &copy;
       <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
-      {{ new Date().getUTCFullYear() }} | <a :href="releaseURL" target="_blank">v{{ VERSION }}</a>
+      {{ new Date().getUTCFullYear() }} |
+      <a :href="releaseURL" target="_blank">v{{ VERSION }}{{ isOnProductionHost ? '' : 'dev' }}</a>
 
       <div style="display: none">&int; ukryta taktyczna całka do programowania w HTMLu</div>
     </footer>
@@ -86,6 +87,7 @@ export default defineComponent({
 
     currentLang: 'pl',
     releaseURL: '',
+    isOnProductionHost: location.hostname == 'stacjownik-td2.web.app',
   }),
 
   created() {

From 1747e15dc88fe4b969e0d2f46341adf037129e5c Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Tue, 3 Jan 2023 14:58:04 +0100
Subject: [PATCH 04/10] bump: 1.11.2

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

diff --git a/package.json b/package.json
index e444ffc..faa0726 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "stacjownik",
-  "version": "1.11.1",
+  "version": "1.11.2",
   "private": true,
   "scripts": {
     "dev": "vite",

From 715e66879fd95ef7804ab183dea742f49f342b82 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Wed, 4 Jan 2023 14:01:25 +0100
Subject: [PATCH 05/10] =?UTF-8?q?feature:=20przej=C5=9Bcia=20pomi=C4=99dzy?=
 =?UTF-8?q?=20statusami=20=C5=82adowa=C5=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../JournalView/JournalDispatchersList.vue    |  7 ++-
 src/components/TrainsView/TrainTable.vue      |  4 +-
 src/styles/JournalSection.scss                | 22 ++------
 src/styles/animations.scss                    | 16 ++++++
 src/views/JournalDispatchers.vue              | 48 ++++++++---------
 src/views/JournalTimetables.vue               | 51 +++++++++----------
 6 files changed, 77 insertions(+), 71 deletions(-)

diff --git a/src/components/JournalView/JournalDispatchersList.vue b/src/components/JournalView/JournalDispatchersList.vue
index 6477299..68880ac 100644
--- a/src/components/JournalView/JournalDispatchersList.vue
+++ b/src/components/JournalView/JournalDispatchersList.vue
@@ -1,6 +1,10 @@
 <template>
   <transition-group class="journal-list" tag="ul" name="list-anim">
-    <li v-for="item in computedDispatcherHistory" :class="{ sticky: typeof item == 'string' }">
+    <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>
@@ -8,7 +12,6 @@
       <div
         v-else
         class="journal_item"
-        :key="item.timestampFrom + item.dispatcherId" 
         :class="{ online: item.isOnline }"
         @click="navigateToScenery(item.stationName, item.isOnline)"
         @keydown.enter="navigateToScenery(item.stationName, item.isOnline)"
diff --git a/src/components/TrainsView/TrainTable.vue b/src/components/TrainsView/TrainTable.vue
index 8196d63..738e9ec 100644
--- a/src/components/TrainsView/TrainTable.vue
+++ b/src/components/TrainsView/TrainTable.vue
@@ -158,8 +158,8 @@ img.train-image {
 
 .train {
   &-list {
-    overflow: auto;
-
+    position: relative;
+    
     @include smallScreen() {
       width: 100%;
     }
diff --git a/src/styles/JournalSection.scss b/src/styles/JournalSection.scss
index 10faa90..6db9a7c 100644
--- a/src/styles/JournalSection.scss
+++ b/src/styles/JournalSection.scss
@@ -1,21 +1,5 @@
 @import 'responsive.scss';
-
-// Animations
-.warning {
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-  }
-
-  &-enter-active {
-    transition: all 150ms 100ms ease-out;
-  }
-
-  &-leave-active {
-    transition: all 150ms 100ms ease-out;
-  }
-}
-
+@import 'animations.scss';
 //Styles
 
 .list_wrapper {
@@ -26,6 +10,10 @@
   padding-right: 0.2em;
 }
 
+.journal-list {
+  position: relative;
+}
+
 .journal_wrapper {
   max-width: 1350px;
   width: 100%;
diff --git a/src/styles/animations.scss b/src/styles/animations.scss
index 0d72d82..27b3d9a 100644
--- a/src/styles/animations.scss
+++ b/src/styles/animations.scss
@@ -12,4 +12,20 @@
 
 .list-anim-leave-active {
   position: absolute;
+  width: 100%;
+}
+
+.status-anim {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-active {
+    transition: all 100ms ease-out;
+  }
+
+  &-leave-active {
+    transition: all 100ms ease-out;
+  }
 }
\ No newline at end of file
diff --git a/src/views/JournalDispatchers.vue b/src/views/JournalDispatchers.vue
index 2f1695d..c3de122 100644
--- a/src/views/JournalDispatchers.vue
+++ b/src/views/JournalDispatchers.vue
@@ -12,35 +12,35 @@
       />
 
       <div class="list_wrapper" @scroll="handleScroll">
-        <!-- <transition name="warning" mode="out-in"> -->
-        <!-- <div :key="dataStatus"> -->
-        <div class="journal_warning" v-if="store.isOffline">
-          {{ $t('app.offline') }}
-        </div>
+        <transition name="status-anim" mode="out-in">
+          <div :key="dataStatus">
+            <div class="journal_warning" v-if="store.isOffline">
+              {{ $t('app.offline') }}
+            </div>
 
-        <Loading v-else-if="dataStatus == DataStatus.Initialized || dataStatus == DataStatus.Loading" />
+            <Loading v-else-if="dataStatus == DataStatus.Initialized || dataStatus == DataStatus.Loading" />
 
-        <div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
-          {{ $t('app.error') }}
-        </div>
+            <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 class="journal_warning" v-else-if="historyList.length == 0">
+              {{ $t('app.no-result') }}
+            </div>
 
-        <div v-else>
-          <JournalDispatchersList :dispatcherHistory="computedHistoryList" />
+            <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> -->
+              <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') }}
diff --git a/src/views/JournalTimetables.vue b/src/views/JournalTimetables.vue
index c8350ed..74dbe0f 100644
--- a/src/views/JournalTimetables.vue
+++ b/src/views/JournalTimetables.vue
@@ -15,35 +15,35 @@
       <JournalStats />
 
       <div class="list_wrapper" @scroll="handleScroll">
-        <!-- <transition name="warning" mode="out-in"> -->
-        <!-- <div :key="dataStatus"> -->
-        <div class="journal_warning" v-if="store.isOffline">
-          {{ $t('app.offline') }}
-        </div>
+        <transition name="status-anim" mode="out-in">
+          <div :key="dataStatus">
+            <div class="journal_warning" v-if="store.isOffline">
+              {{ $t('app.offline') }}
+            </div>
 
-        <Loading v-else-if="dataStatus == DataStatus.Initialized || dataStatus == DataStatus.Loading" />
+            <Loading v-else-if="dataStatus == DataStatus.Initialized || dataStatus == DataStatus.Loading" />
 
-        <div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
-          {{ $t('app.error') }}
-        </div>
+            <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-if="timetableHistory.length == 0" class="journal_warning">
+              {{ $t('app.no-result') }}
+            </div>
 
-        <div v-else>
-          <JournalTimetablesList :timetableHistory="timetableHistory" />
+            <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> -->
+              <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>
@@ -146,8 +146,7 @@ export default defineComponent({
 
   watch: {
     currentQueryArray(q: string[]) {
-      this.currentOptionsActive =
-        q.length > 2 || q.some((qv) => qv.startsWith('sortBy=') && qv.split('=')[1]);
+      this.currentOptionsActive = q.length > 2 || q.some((qv) => qv.startsWith('sortBy=') && qv.split('=')[1]);
     },
   },
 

From 0e45bca5dab6b6a3ec0cedce1bfea81e7c69593e Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 5 Jan 2023 14:49:44 +0100
Subject: [PATCH 06/10] =?UTF-8?q?feature:=20przycisk=20od=C5=9Bwie=C5=BCan?=
 =?UTF-8?q?ia=20dziennik=C3=B3w?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icon-refresh.svg                   | 18 +++++++++++++++
 src/components/JournalView/JournalOptions.vue | 23 ++++++++++++++-----
 src/locales/en.json                           |  3 ++-
 src/locales/pl.json                           |  3 ++-
 src/styles/filters_options.scss               |  5 ++++
 src/views/JournalDispatchers.vue              |  1 +
 src/views/JournalTimetables.vue               | 12 ++++++----
 7 files changed, 53 insertions(+), 12 deletions(-)
 create mode 100644 src/assets/icon-refresh.svg

diff --git a/src/assets/icon-refresh.svg b/src/assets/icon-refresh.svg
new file mode 100644
index 0000000..23b7675
--- /dev/null
+++ b/src/assets/icon-refresh.svg
@@ -0,0 +1,18 @@
+<svg width="144" height="147" viewBox="0 0 144 147" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_1343_19)">
+<path d="M115.039 101.247C116.397 98.6665 115.405 95.4739 112.824 94.1167C110.243 92.7594 107.05 93.7514 105.693 96.3323L115.039 101.247ZM89.4447 44.0402L94.1179 46.4977L99.0329 37.1513L94.3597 34.6938L89.4447 44.0402ZM105.693 96.3323C95.7398 115.259 72.3278 122.534 53.4008 112.581L48.4858 121.927C72.5746 134.595 102.372 125.336 115.039 101.247L105.693 96.3323ZM53.4008 112.581C34.4739 102.627 27.1993 79.2155 37.1525 60.2885L27.8061 55.3735C15.1383 79.4623 24.397 109.259 48.4858 121.927L53.4008 112.581ZM37.1525 60.2885C47.1057 41.3616 70.5177 34.087 89.4447 44.0402L94.3597 34.6938C70.2709 22.026 40.4738 31.2846 27.8061 55.3735L37.1525 60.2885Z" fill="white"/>
+<path d="M91.2258 38.7627L101.056 20.0698L116.15 51.8695L81.3956 57.4555L91.2258 38.7627Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_1343_19" x="18.1328" y="20.0698" width="102.017" height="115.531" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1343_19"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1343_19" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/components/JournalView/JournalOptions.vue b/src/components/JournalView/JournalOptions.vue
index 9bc2449..a9766ed 100644
--- a/src/components/JournalView/JournalOptions.vue
+++ b/src/components/JournalView/JournalOptions.vue
@@ -2,11 +2,18 @@
   <div class="filters-options" @keydown.esc="showOptions = false">
     <div class="bg" v-if="showOptions" @click="showOptions = false"></div>
 
-    <button class="filter-button btn--filled btn--image" @click="showOptions = !showOptions" ref="button">
-      <img :src="getIcon('filter2')" alt="Open filters" />
-      {{ $t('options.filters') }} [F]
-      <span class="active-indicator" v-if="currentOptionsActive"></span>
-    </button>
+    <div class="actions-bar">
+      <button class="filter-button btn--filled btn--image" @click="showOptions = !showOptions" ref="button">
+        <img :src="getIcon('filter2')" alt="Open filters" />
+        {{ $t('options.filters') }} [F]
+        <span class="active-indicator" v-if="currentOptionsActive"></span>
+      </button>
+
+      <button class="filter-button btn--filled btn--image" @click="refreshData">
+        <img :src="getIcon('refresh')" alt="Refresh data" />
+        {{ $t('general.refresh') }}
+      </button>
+    </div>
 
     <datalist id="search-driver">
       <option v-for="sugg in driverSuggestions" :value="sugg"></option>
@@ -99,7 +106,7 @@ import SelectBox from '../Global/SelectBox.vue';
 
 export default defineComponent({
   components: { SelectBox, ActionButton },
-  emits: ['onSearchConfirm', 'onOptionsReset'],
+  emits: ['onSearchConfirm', 'onOptionsReset', 'onRefreshData'],
   mixins: [imageMixin, keyMixin],
 
   props: {
@@ -206,6 +213,10 @@ export default defineComponent({
       }
     },
 
+    refreshData() {
+      this.$emit('onRefreshData');
+    },
+
     startSearchTimeout(type: 'driver' | 'dispatcher', value: string) {
       if (this[`${type}Suggestions`].includes(value)) return;
 
diff --git a/src/locales/en.json b/src/locales/en.json
index 9da59ba..88d38a5 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,6 +1,7 @@
 {
   "general": {
-    "and": " and "
+    "and": " and ",
+    "refresh": "REFRESH"
   },
   "app": {
     "sceneries": "SCENERIES",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index dfc7394..f0cf76f 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -1,6 +1,7 @@
 {
   "general": {
-    "and": " oraz "
+    "and": " oraz ",
+    "refresh": "ODŚWIEŻ"
   },
   "app": {
     "sceneries": "SCENERIE",
diff --git a/src/styles/filters_options.scss b/src/styles/filters_options.scss
index 3e8cbd6..2daba67 100644
--- a/src/styles/filters_options.scss
+++ b/src/styles/filters_options.scss
@@ -6,6 +6,11 @@
   margin-bottom: 0.5em;
 }
 
+.actions-bar {
+  display: flex;
+  gap: 0.5em;
+}
+
 .filter-button .active-indicator {
   width: 7px;
   height: 7px;
diff --git a/src/views/JournalDispatchers.vue b/src/views/JournalDispatchers.vue
index c3de122..c2a517d 100644
--- a/src/views/JournalDispatchers.vue
+++ b/src/views/JournalDispatchers.vue
@@ -6,6 +6,7 @@
       <JournalOptions
         @on-search-confirm="fetchHistoryData"
         @on-options-reset="resetOptions"
+        @on-refresh-data="fetchHistoryData"
         :sorter-option-ids="['timestampFrom', 'duration']"
         :data-status="dataStatus"
         :current-options-active="currentOptionsActive"
diff --git a/src/views/JournalTimetables.vue b/src/views/JournalTimetables.vue
index 74dbe0f..bc5f61e 100644
--- a/src/views/JournalTimetables.vue
+++ b/src/views/JournalTimetables.vue
@@ -6,6 +6,7 @@
       <JournalOptions
         @on-search-confirm="fetchHistoryData"
         @on-options-reset="resetOptions"
+        @on-refresh-data="fetchHistoryData"
         :sorter-option-ids="['timetableId', 'beginDate', 'distance', 'total-stops']"
         :filters="journalTimetableFilters"
         :currentOptionsActive="currentOptionsActive"
@@ -53,12 +54,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, provide, reactive, Ref, ref, watch } from 'vue';
+import { defineComponent, provide, reactive, Ref, ref } from 'vue';
 import axios from 'axios';
 
 import DriverStats from '../components/JournalView/JournalDriverStats.vue';
 import Loading from '../components/Global/Loading.vue';
-import { JournalTimetableFilter, JournalTimetableSorter } from '../types/Journal/JournalTimetablesTypes';
+import { JournalTimetableSorter } from '../types/Journal/JournalTimetablesTypes';
 import dateMixin from '../mixins/dateMixin';
 import routerMixin from '../mixins/routerMixin';
 import { DataStatus } from '../scripts/enums/DataStatus';
@@ -145,8 +146,8 @@ export default defineComponent({
   },
 
   watch: {
-    currentQueryArray(q: string[]) {
-      this.currentOptionsActive = q.length > 2 || q.some((qv) => qv.startsWith('sortBy=') && qv.split('=')[1]);
+    currentQueryArray(q: string[]) {      
+      this.currentOptionsActive = q.length >= 2 || q.some((qv) => qv.startsWith('sortBy=') && qv.split('=')[1]);
     },
   },
 
@@ -161,6 +162,7 @@ export default defineComponent({
     this.fetchHistoryData();
   },
 
+
   methods: {
     handleScroll(e: Event) {
       const listElement = e.target as HTMLElement;
@@ -213,6 +215,8 @@ export default defineComponent({
     },
 
     async fetchHistoryData() {
+      if(this.dataStatus == DataStatus.Loading) return;
+
       const queries: string[] = [];
 
       const driverName = this.searchersValues['search-driver'].trim();

From b81d98cab78690ab45fda4d0db1cdc6e2556acf2 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 5 Jan 2023 15:58:17 +0100
Subject: [PATCH 07/10] =?UTF-8?q?fix:=20filtrowanie=20poci=C4=85g=C3=B3w?=
 =?UTF-8?q?=20offline?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TrainsView/TrainInfo.vue    |  57 ++++---
 src/constants/Trains/TrainOptionsConsts.ts |   4 +
 src/locales/en.json                        |   1 +
 src/locales/pl.json                        |   3 +-
 src/mixins/styleMixin.ts                   |   4 +-
 src/scripts/managers/trainFilterManager.ts | 171 +++++++++++----------
 src/views/TrainsView.vue                   |   2 +-
 7 files changed, 125 insertions(+), 117 deletions(-)

diff --git a/src/components/TrainsView/TrainInfo.vue b/src/components/TrainsView/TrainInfo.vue
index 97d4585..16f6123 100644
--- a/src/components/TrainsView/TrainInfo.vue
+++ b/src/components/TrainsView/TrainInfo.vue
@@ -2,26 +2,24 @@
   <div class="train-info" tabindex="0">
     <section class="train-route">
       <div class="train_general">
-        <span>
-          <span class="timetable-id" v-if="train.timetableData">#{{ train.timetableData.timetableId }}</span>
+        <b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
+        <span class="timetable-id" v-if="train.timetableData">#{{ train.timetableData.timetableId }}</span>
 
-          <span class="timetable_warnings">
-            <span class="train-badge twr" v-if="train.timetableData?.TWR">TWR</span>
-            <span class="train-badge skr" v-if="train.timetableData?.SKR">SKR</span>
-          </span>
-          <strong class="timetable-category" v-if="train.timetableData">
-            {{ train.timetableData.category }}
-          </strong>
-          <strong class="train-number">&nbsp;{{ train.trainNo }}</strong>
-          |
-          <!-- <span class="train-driver" :class="{ supporter: train.isSupporter }">{{ train.driverName }}</span> -->
-          {{ train.driverName }} |
-          <b :style="calculateTextExpStyle(train.driverLevel)">
-            {{ train.driverLevel < 2 ? 'L' : `${train.driverLevel} lvl` }}
-          </b>
-
-          <b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
+        <span class="timetable_warnings" v-if="train.timetableData?.TWR || train.timetableData?.SKR">
+          <span class="train-badge twr" v-if="train.timetableData?.TWR">TWR</span>
+          <span class="train-badge skr" v-if="train.timetableData?.SKR">SKR</span>
         </span>
+
+        <strong>
+          <span v-if="train.timetableData">{{ train.timetableData.category }}&nbsp;</span>
+          <span class="train-number">{{ train.trainNo }}</span>
+        </strong>
+        <span>|</span>
+        <span>{{ train.driverName }}</span>
+        <span>|</span>
+        <b :style="calculateTextExpStyle(train.driverLevel, train.isSupporter)">
+          {{ train.driverLevel < 2 ? 'L' : `${train.driverLevel} lvl` }}
+        </b>
       </div>
 
       <div class="timetable_route" v-if="train.timetableData">
@@ -44,9 +42,7 @@
       </div>
 
       <div class="timetable_progress" style="margin-top: 0.5em" v-if="train.timetableData">
-        <!-- <span> </span> -->
         <span class="timetable_progress-bar">
-          <!-- {{ confirmedPercentage(train.timetableData.followingStops) }}%&nbsp; -->
           <span class="bar-bg"></span>
           <span
             class="bar-fg"
@@ -154,7 +150,6 @@ export default defineComponent({
 }
 
 .timetable-id {
-  margin-right: 0.3em;
   color: #d2d2d2;
 }
 
@@ -164,11 +159,7 @@ export default defineComponent({
   display: inline-block;
   text-align: center;
 
-  width: 1.25em;
-  height: 1.25em;
-  border-radius: 50%;
-
-  margin-left: 0.25em;
+  padding: 0 0.25em;
 }
 
 .timetable_stops {
@@ -179,16 +170,19 @@ export default defineComponent({
   display: flex;
   align-items: center;
   flex-wrap: wrap;
+
+  gap: 0.25em;
 }
 .train-status-badges {
   display: flex;
   flex-wrap: wrap;
+
+  gap: 0.25em;
 }
 
 .train-badge {
-  padding: 0.15em 0.35em;
-  margin-right: 0.3em;
-
+  padding: 0.1em 0.2em;
+  border-radius: 0.2em;
   font-weight: bold;
 
   font-size: 0.9em;
@@ -202,7 +196,7 @@ export default defineComponent({
   }
 
   &.offline {
-    background-color: #b83b2d;
+    background-color: #9c362b;
   }
 }
 
@@ -221,6 +215,9 @@ export default defineComponent({
 }
 
 .timetable_warnings {
+  display: flex;
+  gap: 0.2em;
+
   color: black;
 }
 
diff --git a/src/constants/Trains/TrainOptionsConsts.ts b/src/constants/Trains/TrainOptionsConsts.ts
index 641f472..fff4f34 100644
--- a/src/constants/Trains/TrainOptionsConsts.ts
+++ b/src/constants/Trains/TrainOptionsConsts.ts
@@ -37,6 +37,10 @@ export const sorterOptions = [
     id: 'distance',
     value: 'kilometraż',
   },
+  {
+    id: 'id',
+    value: 'id rozkładu',
+  },
   {
     id: 'progress',
     value: 'przebyta trasa',
diff --git a/src/locales/en.json b/src/locales/en.json
index 88d38a5..130ff8c 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -103,6 +103,7 @@
     "sort-timetable": "train no.",
     "sort-progress": "route progress",
     "sort-delay": "current delay",
+    "sort-id": "timetable id",
 
     "sort-total-stops": "total stops",
     "sort-beginDate": "date",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index f0cf76f..4fbbd4c 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -104,7 +104,8 @@
     "sort-timetableId": "ID rozkładu",
     "sort-timestampFrom": "data",
     "sort-duration": "czas dyżuru",
-
+    "sort-id": "id rozkładu",
+    
     "sort-mass": "masa",
     "sort-speed": "prędkość",
     "sort-length": "długość",
diff --git a/src/mixins/styleMixin.ts b/src/mixins/styleMixin.ts
index beb2090..cc4747b 100644
--- a/src/mixins/styleMixin.ts
+++ b/src/mixins/styleMixin.ts
@@ -11,10 +11,10 @@ export default defineComponent({
       return `background-color: ${bgColor}; color: ${fontColor}; ${boxShadow};`;
     },
 
-    calculateTextExpStyle(exp: number): string {
+    calculateTextExpStyle(exp: number, isSupporter = false): string {
       const textColor = exp > -1 ? (exp < 2 ? '#26B0D9' : `hsl(${-exp * 5 + 100},  75%, 50%)`) : '#666';
 
-      return `color: ${textColor};`;
+      return `color: ${textColor}; ${isSupporter ? 'text-shadow: 0 0 10px ' + textColor : ''};`;
     },
 
     statusClasses(occupiedTo: string) {
diff --git a/src/scripts/managers/trainFilterManager.ts b/src/scripts/managers/trainFilterManager.ts
index df7e6ed..674ab58 100644
--- a/src/scripts/managers/trainFilterManager.ts
+++ b/src/scripts/managers/trainFilterManager.ts
@@ -1,115 +1,120 @@
-import { TrainFilter } from "../../types/Trains/TrainOptionsTypes";
-import { TrainFilterType } from "../enums/TrainFilterType";
-import Train from "../interfaces/Train";
-import TrainStop from "../interfaces/TrainStop";
+import { TrainFilter } from '../../types/Trains/TrainOptionsTypes';
+import { TrainFilterType } from '../enums/TrainFilterType';
+import Train from '../interfaces/Train';
+import TrainStop from '../interfaces/TrainStop';
 
 function confirmedPercentage(stops: TrainStop[] | undefined) {
-    if (!stops) return -1;
+  if (!stops) return -1;
 
-    return Number(((stops.filter((stop) => stop.confirmed).length / stops.length) * 100).toFixed(0));
-};
+  return Number(((stops.filter((stop) => stop.confirmed).length / stops.length) * 100).toFixed(0));
+}
 
 function currentDelay(stops: TrainStop[] | undefined) {
-    if (!stops) return -Infinity;
+  if (!stops) return -Infinity;
 
-    const delay =
-        stops.find((stop, i) => (i == 0 && !stop.confirmed) || (i > 0 && stops[i - 1].confirmed && !stop.confirmed))
-            ?.departureDelay || 0;
+  const delay =
+    stops.find((stop, i) => (i == 0 && !stop.confirmed) || (i > 0 && stops[i - 1].confirmed && !stop.confirmed))
+      ?.departureDelay || 0;
 
-    return delay;
-};
+  return delay;
+}
 
 function filterTrainList(trainList: Train[], searchedTrain: string, searchedDriver: string, filters: TrainFilter[]) {
-    return trainList.filter(
-        (train) => {
-            const isFiltered = filters.every(f => {
-                if (f.isActive) return true;
+  return trainList.filter((train) => {
+    const isFiltered = filters.every((f) => {
+      if (f.isActive) return true;
 
-                if (!train.timetableData) return filters.find(filter => filter.id == TrainFilterType.noTimetable)!.isActive;
+      if (!train.timetableData) return filters.find((filter) => filter.id == TrainFilterType.noTimetable)!.isActive;
 
-                switch (f.id) {
-                    case TrainFilterType.comments:
-                        return !train.timetableData.followingStops.some(stop => stop.comments);
-                    
-                    case TrainFilterType.twr:
-                        return !train.timetableData.TWR;
-                    
-                    case TrainFilterType.skr:
-                        return !train.timetableData.SKR;
-                    
-                    case TrainFilterType.passenger:
-                        return !/^[AMRE]\D{2}$/.test(train.timetableData.category);
-                    
-                    case TrainFilterType.freight:
-                        return !train.timetableData.category.startsWith('T');
-                    
-                    case TrainFilterType.other:
-                        return !/^[PXZL]\D{2}$/.test(train.timetableData.category);
-                    
-                    default:
-                        return true;
-                }
-            })
+      switch (f.id) {
+        case TrainFilterType.comments:
+          return !train.timetableData.followingStops.some((stop) => stop.comments);
 
-            return (searchedTrain.length > 0 ? train.trainNo.toString().startsWith(searchedTrain) : true) &&
-                (searchedDriver.length > 0 ? train.driverName.toLowerCase().startsWith(searchedDriver.toLowerCase()) : true) && isFiltered
-        }
+        case TrainFilterType.twr:
+          return !train.timetableData.TWR;
 
+        case TrainFilterType.skr:
+          return !train.timetableData.SKR;
+
+        case TrainFilterType.passenger:
+          return !/^[AMRE]\D{2}$/.test(train.timetableData.category);
+
+        case TrainFilterType.freight:
+          return !train.timetableData.category.startsWith('T');
+
+        case TrainFilterType.other:
+          return !/^[PXZL]\D{2}$/.test(train.timetableData.category);
+
+        default:
+          return true;
+      }
+    });
+
+    return (
+      (searchedTrain.length > 0 ? train.trainNo.toString().startsWith(searchedTrain) : true) &&
+      (searchedDriver.length > 0 ? train.driverName.toLowerCase().startsWith(searchedDriver.toLowerCase()) : true) &&
+      (!train.timetableData ? !train.online : true) &&
+      isFiltered
     );
+  });
 }
 
 function sortTrainList(trainList: Train[], sorterActive: { id: string; dir: number }) {
-    return trainList.sort((a: Train, b: Train) => {
-        switch (sorterActive.id) {
-            case 'mass':
-                if (a.mass > b.mass) return sorterActive.dir;
-                return -sorterActive.dir;
+  return trainList.sort((a: Train, b: Train) => {
+    switch (sorterActive.id) {
+      case 'id':
+        if ((a.timetableData?.timetableId || -1) > (b.timetableData?.timetableId || -1)) return sorterActive.dir;
 
-            case 'distance':
-                if ((a.timetableData?.routeDistance || -1) > (b.timetableData?.routeDistance || -1)) return sorterActive.dir;
+        return -sorterActive.dir;
 
-                return -sorterActive.dir;
+      case 'mass':
+        if (a.mass > b.mass) return sorterActive.dir;
+        return -sorterActive.dir;
 
-            case 'progress':
-                if (confirmedPercentage(a.timetableData?.followingStops) > confirmedPercentage(b.timetableData?.followingStops))
-                    return sorterActive.dir;
+      case 'distance':
+        if ((a.timetableData?.routeDistance || -1) > (b.timetableData?.routeDistance || -1)) return sorterActive.dir;
 
-                return -sorterActive.dir;
+        return -sorterActive.dir;
 
-            case 'delay':
-                if (currentDelay(a.timetableData?.followingStops) > currentDelay(b.timetableData?.followingStops))
-                    return sorterActive.dir;
+      case 'progress':
+        if (confirmedPercentage(a.timetableData?.followingStops) > confirmedPercentage(b.timetableData?.followingStops))
+          return sorterActive.dir;
 
-                return -sorterActive.dir;
+        return -sorterActive.dir;
 
-            case 'speed':
-                if (a.speed > b.speed) return sorterActive.dir;
-                return -sorterActive.dir;
+      case 'delay':
+        if (currentDelay(a.timetableData?.followingStops) > currentDelay(b.timetableData?.followingStops))
+          return sorterActive.dir;
 
-            case 'timetable':
-                if (a.trainNo > b.trainNo) return sorterActive.dir;
-                return -sorterActive.dir;
+        return -sorterActive.dir;
 
-            case 'length':
-                if (a.length > b.length) return sorterActive.dir;
-                return -sorterActive.dir;
+      case 'speed':
+        if (a.speed > b.speed) return sorterActive.dir;
+        return -sorterActive.dir;
 
-            default:
-                break;
-        }
+      case 'timetable':
+        if (a.trainNo > b.trainNo) return sorterActive.dir;
+        return -sorterActive.dir;
 
-        return 0;
-    });
+      case 'length':
+        if (a.length > b.length) return sorterActive.dir;
+        return -sorterActive.dir;
+
+      default:
+        break;
+    }
+
+    return 0;
+  });
 }
 
 export function filteredTrainList(
-    trainList: Train[],
-    searchedTrain: string,
-    searchedDriver: string,
-    sorterActive: { id: string; dir: number },
-    filters: TrainFilter[]
+  trainList: Train[],
+  searchedTrain: string,
+  searchedDriver: string,
+  sorterActive: { id: string; dir: number },
+  filters: TrainFilter[]
 ) {
-
-    const filtered = filterTrainList(trainList, searchedTrain, searchedDriver, filters);        
-    return [...sortTrainList(filtered, sorterActive)];
-};
\ No newline at end of file
+  const filtered = filterTrainList(trainList, searchedTrain, searchedDriver, filters);
+  return [...sortTrainList(filtered, sorterActive)];
+}
diff --git a/src/views/TrainsView.vue b/src/views/TrainsView.vue
index 92b74e3..dfac6ba 100644
--- a/src/views/TrainsView.vue
+++ b/src/views/TrainsView.vue
@@ -2,7 +2,7 @@
   <section class="trains-view">
     <div class="trains_wrapper">
       <TrainOptions
-        :sorter-option-ids="['distance', 'progress', 'delay', 'mass', 'speed', 'length']"
+        :sorter-option-ids="['distance', 'id', 'progress', 'delay', 'mass', 'speed', 'length']"
         :current-options-active="currentOptionsActive"
       />
 

From c29ddeb78ca3de2f1fbce2f1ef0d5b4c0d47de88 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 5 Jan 2023 15:59:14 +0100
Subject: [PATCH 08/10] fix: poziom 0 w dzienniku RJ

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

diff --git a/src/components/JournalView/JournalTimetablesList.vue b/src/components/JournalView/JournalTimetablesList.vue
index b2954fc..22313de 100644
--- a/src/components/JournalView/JournalTimetablesList.vue
+++ b/src/components/JournalView/JournalTimetablesList.vue
@@ -17,7 +17,7 @@
             <b>{{ timetable.trainNo }}</b>
             | <span>{{ timetable.driverName }}</span> |
             <span class="text--grayed">#{{ timetable.id }}</span>
-            <span v-if="timetable.driverLevel">
+            <span v-if="timetable.driverLevel !== null">
               |
               <b :style="calculateTextExpStyle(timetable.driverLevel)">
                 {{ timetable.driverLevel < 2 ? 'L' : `${timetable.driverLevel} lvl` }}

From cdf0b2a426686ac68d7ef202f5c2ba63d016c24c Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 5 Jan 2023 16:05:34 +0100
Subject: [PATCH 09/10] =?UTF-8?q?feature:=20nas=C5=82uchiwanie=20aktualiza?=
 =?UTF-8?q?cji?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/main.ts b/src/main.ts
index 0c09810..0382cfc 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,6 +7,7 @@ import plLang from './locales/pl.json';
 
 import { createI18n } from 'vue-i18n';
 import { createPinia } from 'pinia';
+import { registerSW } from 'virtual:pwa-register';
 
 const i18n = createI18n({
   locale: 'pl',
@@ -19,6 +20,15 @@ const i18n = createI18n({
   enableLegacy: false,
 });
 
+registerSW({
+  onRegistered(r) {
+    r &&
+      setInterval(() => {
+        r.update();
+      }, 60 * 60 * 1000);
+  },
+});
+
 const clickOutsideDirective: Directive = {
   mounted(el, binding) {
     el.clickOutsideEvent = (event: Event) => {

From 3f818069cd0b5fa5102bf6b4e2695151270516a9 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 5 Jan 2023 16:09:27 +0100
Subject: [PATCH 10/10] =?UTF-8?q?hotfix:=20pod=C5=9Bwietlenie=20sponsor?=
 =?UTF-8?q?=C3=B3w=20w=20dzienniku=20RJ?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/components/JournalView/JournalTimetablesList.vue b/src/components/JournalView/JournalTimetablesList.vue
index 22313de..36ad0bd 100644
--- a/src/components/JournalView/JournalTimetablesList.vue
+++ b/src/components/JournalView/JournalTimetablesList.vue
@@ -19,7 +19,7 @@
             <span class="text--grayed">#{{ timetable.id }}</span>
             <span v-if="timetable.driverLevel !== null">
               |
-              <b :style="calculateTextExpStyle(timetable.driverLevel)">
+              <b :style="calculateTextExpStyle(timetable.driverLevel, timetable.driverIsSupporter)">
                 {{ timetable.driverLevel < 2 ? 'L' : `${timetable.driverLevel} lvl` }}
               </b>
             </span>