From fac8fced3eb12cd66484b3143b3e1087d554c809 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Mon, 9 Sep 2024 14:11:35 +0200
Subject: [PATCH] chore: removed journal list status animations

---
 src/components/Global/VehicleThumbnail.vue    |  2 +-
 .../JournalDispatchersList.vue                | 70 +++++++++----------
 .../JournalTimetables/EntryDetails.vue        | 19 +----
 .../JournalTimetablesList.vue                 | 64 ++++++++---------
 src/styles/animations.scss                    |  4 +-
 src/views/JournalTimetables.vue               |  8 ---
 6 files changed, 70 insertions(+), 97 deletions(-)

diff --git a/src/components/Global/VehicleThumbnail.vue b/src/components/Global/VehicleThumbnail.vue
index acdfc5e..e5c6c1b 100644
--- a/src/components/Global/VehicleThumbnail.vue
+++ b/src/components/Global/VehicleThumbnail.vue
@@ -37,7 +37,7 @@ function onImageLoad() {
     imgStatus.value = 'loaded';
   }
 
-  imgRef.value!.style.opacity = '1';
+  if (imgRef.value) imgRef.value.style.opacity = '1';
 }
 </script>
 
diff --git a/src/components/JournalView/JournalDispatchers/JournalDispatchersList.vue b/src/components/JournalView/JournalDispatchers/JournalDispatchersList.vue
index 9260f46..91942e0 100644
--- a/src/components/JournalView/JournalDispatchers/JournalDispatchersList.vue
+++ b/src/components/JournalView/JournalDispatchers/JournalDispatchersList.vue
@@ -1,48 +1,44 @@
 <template>
-  <transition name="status-anim" mode="out-in">
-    <div :key="dataStatus">
-      <div class="journal_warning" v-if="store.isOffline">
-        {{ $t('app.offline') }}
-      </div>
+  <div class="journal_warning" v-if="store.isOffline">
+    {{ $t('app.offline') }}
+  </div>
 
-      <Loading v-else-if="dataStatus == Status.Data.Loading" />
+  <Loading v-else-if="dataStatus == Status.Data.Loading" />
 
-      <div v-else-if="dataStatus == Status.Data.Error" class="journal_warning error">
-        {{ $t('app.error') }}
-      </div>
+  <div v-else-if="dataStatus == Status.Data.Error" class="journal_warning error">
+    {{ $t('app.error') }}
+  </div>
 
-      <div class="journal_warning" v-else-if="dispatcherHistory.length == 0">
-        {{ $t('app.no-result') }}
-      </div>
+  <div class="journal_warning" v-else-if="dispatcherHistory.length == 0">
+    {{ $t('app.no-result') }}
+  </div>
 
-      <ul v-else class="journal-list">
-        <transition-group name="list-anim">
-          <JournalDispatcherEntry
-            v-for="entry in dispatcherHistory"
-            :key="entry.id"
-            :entry="entry"
-            :onToggleShowExtraInfo="toggleExtraInfo"
-            :showExtraInfo="extraInfoIndexes.includes(entry.id)"
-          />
-        </transition-group>
+  <div v-else>
+    <transition-group name="list-anim" class="journal-list" tag="ul">
+      <JournalDispatcherEntry
+        v-for="entry in dispatcherHistory"
+        :key="entry.id"
+        :entry="entry"
+        :onToggleShowExtraInfo="toggleExtraInfo"
+        :showExtraInfo="extraInfoIndexes.includes(entry.id)"
+      />
+    </transition-group>
 
-        <AddDataButton
-          :list="dispatcherHistory"
-          :scrollDataLoaded="scrollDataLoaded"
-          :scrollNoMoreData="scrollNoMoreData"
-          @addHistoryData="addHistoryData"
-        />
-      </ul>
+    <AddDataButton
+      :list="dispatcherHistory"
+      :scrollDataLoaded="scrollDataLoaded"
+      :scrollNoMoreData="scrollNoMoreData"
+      @addHistoryData="addHistoryData"
+    />
+  </div>
 
-      <div class="journal_warning" v-if="scrollNoMoreData">
-        {{ $t('journal.no-further-data') }}
-      </div>
+  <div class="journal_warning" v-if="scrollNoMoreData">
+    {{ $t('journal.no-further-data') }}
+  </div>
 
-      <div class="journal_warning" v-else-if="!scrollDataLoaded">
-        {{ $t('journal.loading-further-data') }}
-      </div>
-    </div>
-  </transition>
+  <div class="journal_warning" v-else-if="!scrollDataLoaded">
+    {{ $t('journal.loading-further-data') }}
+  </div>
 </template>
 
 <script lang="ts">
diff --git a/src/components/JournalView/JournalTimetables/EntryDetails.vue b/src/components/JournalView/JournalTimetables/EntryDetails.vue
index 4259679..6983ce2 100644
--- a/src/components/JournalView/JournalTimetables/EntryDetails.vue
+++ b/src/components/JournalView/JournalTimetables/EntryDetails.vue
@@ -85,6 +85,7 @@
       <div v-if="timetable.stockString || stockHistory.length != 0">
         <div class="g-separator"></div>
         <b>{{ $t('journal.stock-preview') }}:</b>
+
         <div class="stock-history" v-if="stockHistory.length > 1">
           <button
             v-for="(sh, i) in stockHistory"
@@ -97,7 +98,7 @@
           </button>
         </div>
 
-        <div v-if="timetable.stockString">
+        <div v-if="timetable.stockString" style="margin-top: 1em">
           <StockList
             :trainStockList="
               (currentHistoryIndex == 0
@@ -235,22 +236,6 @@ hr {
   padding-top: 0.5em;
 }
 
-ul.stock-list {
-  display: flex;
-  align-items: flex-end;
-  overflow: auto;
-
-  padding-bottom: 0.5em;
-
-  li > div {
-    margin: 1em 0;
-
-    text-align: center;
-    color: #aaa;
-    font-size: 0.9em;
-  }
-}
-
 @include smallScreen() {
   .stock-specs {
     justify-content: center;
diff --git a/src/components/JournalView/JournalTimetables/JournalTimetablesList.vue b/src/components/JournalView/JournalTimetables/JournalTimetablesList.vue
index f8276fb..f82a881 100644
--- a/src/components/JournalView/JournalTimetables/JournalTimetablesList.vue
+++ b/src/components/JournalView/JournalTimetables/JournalTimetablesList.vue
@@ -1,41 +1,37 @@
 <template>
   <div>
-    <transition name="status-anim" mode="out-in">
-      <div :key="dataStatus">
-        <div class="journal_warning" v-if="store.isOffline">
-          {{ $t('app.offline') }}
-        </div>
+    <div class="journal_warning" v-if="store.isOffline">
+      {{ $t('app.offline') }}
+    </div>
 
-        <Loading v-else-if="dataStatus == Status.Data.Loading" />
+    <Loading v-else-if="dataStatus == Status.Data.Loading" />
 
-        <div v-else-if="dataStatus == Status.Data.Error" class="journal_warning error">
-          {{ $t('app.error') }}
-        </div>
+    <div v-else-if="dataStatus == Status.Data.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>
 
-        <ul v-else class="journal-list">
-          <transition-group name="list-anim">
-            <JournalTimetableEntry
-              v-for="(timetableEntry, i) in timetableHistory"
-              :key="timetableEntry.id"
-              :timetableEntry="timetableEntry"
-              :onToggleShowExtraInfo="() => toggleExtraInfo(timetableEntry.id)"
-              :showExtraInfo="extraInfoIndexes.includes(timetableEntry.id)"
-            />
-          </transition-group>
+    <div v-else>
+      <transition-group name="list-anim" class="journal-list" tag="ul">
+        <JournalTimetableEntry
+          v-for="(timetableEntry, i) in timetableHistory"
+          :key="timetableEntry.id"
+          :timetableEntry="timetableEntry"
+          :onToggleShowExtraInfo="() => toggleExtraInfo(timetableEntry.id)"
+          :showExtraInfo="extraInfoIndexes.includes(timetableEntry.id)"
+        />
+      </transition-group>
 
-          <AddDataButton
-            :list="timetableHistory"
-            :scrollDataLoaded="scrollDataLoaded"
-            :scrollNoMoreData="scrollNoMoreData"
-            @addHistoryData="addHistoryData"
-          />
-        </ul>
-      </div>
-    </transition>
+      <AddDataButton
+        :list="timetableHistory"
+        :scrollDataLoaded="scrollDataLoaded"
+        :scrollNoMoreData="scrollNoMoreData"
+        @addHistoryData="addHistoryData"
+      />
+    </div>
 
     <div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div>
 
@@ -91,10 +87,14 @@ export default defineComponent({
   },
 
   watch: {
-    timetableHistory: {
+    '$route.query': {
       deep: true,
       handler() {
         this.extraInfoIndexes.length = 0;
+
+        this.$nextTick(() => {
+          console.log(this.$el.querySelector('ul'));
+        });
       }
     }
   },
diff --git a/src/styles/animations.scss b/src/styles/animations.scss
index d489d17..f9db750 100644
--- a/src/styles/animations.scss
+++ b/src/styles/animations.scss
@@ -41,11 +41,11 @@ $animType: ease-in-out;
   }
 
   &-enter-active {
-    transition: all $animDuration ease-out;
+    transition: all $animDuration ease-in-out;
   }
 
   &-leave-active {
-    transition: all $animDuration ease-out;
+    transition: all $animDuration ease-in-out;
   }
 }
 
diff --git a/src/views/JournalTimetables.vue b/src/views/JournalTimetables.vue
index 927de8c..34a2434 100644
--- a/src/views/JournalTimetables.vue
+++ b/src/views/JournalTimetables.vue
@@ -306,14 +306,6 @@ export default defineComponent({
         this.searchersValues[v as Journal.TimetableSearchKey] = options[v] ?? '';
       });
 
-      // this.searchersValues['search-date'] = options['search-date'] ?? '';
-      // this.searchersValues['search-driver'] = options['search-driver'] ?? '';
-      // this.searchersValues['search-train'] = options['search-train'] ?? '';
-      // this.searchersValues['search-dispatcher'] = options['search-dispatcher'] ?? '';
-      // this.searchersValues['search-issuedFrom'] = options['search-issuedFrom'] ?? '';
-      // this.searchersValues['search-via'] = options['search-via'] ?? '';
-      // this.searchersValues['search-terminatingAt'] = options['search-terminatingAt'] ?? '';
-
       this.sorterActive.id =
         (options['sorter-active'] as Journal.TimetableSorterKey) ?? 'timetableId';