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] =?UTF-8?q?feature:=20przej=C5=9Bcia=20pomi=C4=99dzy=20sta?=
 =?UTF-8?q?tusami=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]);
     },
   },