From 42591f6e76ae8b26d44d5e50045db586d8f8cd1c Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sun, 18 Aug 2024 23:03:00 +0200
Subject: [PATCH] chore: journal timetables styling improvements

---
 .../JournalTimetablesList.vue                 | 70 ++++++++++++-------
 .../JournalTimetables/TimetableDetails.vue    | 10 ++-
 .../JournalTimetables/TimetableGeneral.vue    | 13 ++--
 src/styles/JournalSection.scss                |  5 --
 4 files changed, 59 insertions(+), 39 deletions(-)

diff --git a/src/components/JournalView/JournalTimetables/JournalTimetablesList.vue b/src/components/JournalView/JournalTimetables/JournalTimetablesList.vue
index b1bfaa6..ee83d0e 100644
--- a/src/components/JournalView/JournalTimetables/JournalTimetablesList.vue
+++ b/src/components/JournalView/JournalTimetables/JournalTimetablesList.vue
@@ -17,17 +17,13 @@
         </div>
 
         <div v-else>
-          <ul class="journal-list">
-            <transition-group name="list-anim">
-              <li
-                v-for="{ timetable, showExtraInfo } in computedTimetableHistory"
-                class="journal_item"
-                :key="timetable.id"
-                @click="showExtraInfo.value = !showExtraInfo.value"
-              >
-                <div class="journal_item-info">
-                  <!-- General -->
-                  <TimetableGeneral :timetable="timetable" />
+          <transition-group name="list-anim" tag="ul" class="journal-list">
+            <li v-for="timetable in timetableHistory" class="journal_item" :key="timetable.id">
+              <div class="journal_item-info">
+                <!-- General -->
+                <TimetableGeneral :timetable="timetable" />
+
+                <div @click="toggleExtraInfo(timetable.id)" style="cursor: pointer">
                   <!-- Route -->
                   <span class="item-route">
                     <b>{{ timetable.route.replace('|', ' - ') }}</b>
@@ -35,16 +31,23 @@
 
                   <hr />
                   <!-- Stops -->
-                  <TimetableStops :timetable="timetable" :showExtraInfo="showExtraInfo.value" />
+                  <TimetableStops
+                    :timetable="timetable"
+                    :showExtraInfo="extraInfoIndexes.includes(timetable.id)"
+                  />
                   <!-- Status -->
                   <TimetableStatus :timetable="timetable" />
-
-                  <!-- Extra -->
-                  <TimetableDetails :timetable="timetable" :showExtraInfo="showExtraInfo.value" />
                 </div>
-              </li>
-            </transition-group>
-          </ul>
+
+                <!-- Extra -->
+                <TimetableDetails
+                  :timetable="timetable"
+                  :showExtraInfo="extraInfoIndexes.includes(timetable.id)"
+                  @toggle-extra-info="toggleExtraInfo"
+                />
+              </div>
+            </li>
+          </transition-group>
 
           <AddDataButton
             :list="timetableHistory"
@@ -57,6 +60,7 @@
     </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>
@@ -64,7 +68,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref } from 'vue';
+import { defineComponent, Prop, PropType, ref } from 'vue';
 
 import Loading from '../../Global/Loading.vue';
 import AddDataButton from '../../Global/AddDataButton.vue';
@@ -110,16 +114,30 @@ export default defineComponent({
   data() {
     return {
       Status,
-      store: useMainStore()
+      store: useMainStore(),
+      extraInfoIndexes: [] as number[]
     };
   },
 
-  computed: {
-    computedTimetableHistory() {
-      return this.timetableHistory.map((timetable) => ({
-        timetable,
-        showExtraInfo: ref(false)
-      }));
+  watch: {
+    timetableHistory: {
+      deep: true,
+      handler() {
+        console.log(this.$refs['list']);
+
+        // ?.scrollTo({ behavior: 'smooth', top: 0 });
+
+        // (this.$refs['list'] as HTMLUListElement).scrollTo({})
+      }
+    }
+  },
+
+  methods: {
+    toggleExtraInfo(id: number) {
+      const existingIdx = this.extraInfoIndexes.indexOf(id);
+
+      if (existingIdx != -1) this.extraInfoIndexes.splice(existingIdx, 1);
+      else this.extraInfoIndexes.push(id);
     }
   }
 });
diff --git a/src/components/JournalView/JournalTimetables/TimetableDetails.vue b/src/components/JournalView/JournalTimetables/TimetableDetails.vue
index 305cbe1..6f283af 100644
--- a/src/components/JournalView/JournalTimetables/TimetableDetails.vue
+++ b/src/components/JournalView/JournalTimetables/TimetableDetails.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="details-actions">
-      <button class="btn--action">
+      <button class="btn--action" @click="toggleExtraInfo">
         <b>{{ $t('journal.stock-info') }}</b>
         <img :src="`/images/icon-arrow-${showExtraInfo ? 'asc' : 'desc'}.svg`" alt="Arrow icon" />
       </button>
@@ -90,9 +90,11 @@ import modalTrainMixin from '../../../mixins/modalTrainMixin';
 
 export default defineComponent({
   components: { StockList },
-  
+
   mixins: [modalTrainMixin],
 
+  emits: ['toggleExtraInfo'],
+
   props: {
     showExtraInfo: {
       type: Boolean,
@@ -137,6 +139,10 @@ export default defineComponent({
       if (timetable?.terminated) return;
 
       this.selectModalTrainById(`${timetable.driverName}${timetable.trainNo}`, target);
+    },
+
+    toggleExtraInfo() {
+      this.$emit('toggleExtraInfo', this.timetable.id);
     }
   }
 });
diff --git a/src/components/JournalView/JournalTimetables/TimetableGeneral.vue b/src/components/JournalView/JournalTimetables/TimetableGeneral.vue
index 53ea5ce..d97349f 100644
--- a/src/components/JournalView/JournalTimetables/TimetableGeneral.vue
+++ b/src/components/JournalView/JournalTimetables/TimetableGeneral.vue
@@ -25,18 +25,19 @@
         {{ timetable.driverLevel < 2 ? 'L' : `${timetable.driverLevel}` }}
       </strong>
 
-      <strong
+      <router-link
         v-if="apiStore.donatorsData.includes(timetable.driverName)"
         class="text--donator"
         data-tooltip-type="DonatorTooltip"
         :data-tooltip-content="$t('donations.driver-message')"
+        :to="`/journal/timetables?search-driver=${timetable.driverName}`"
       >
-        {{ timetable.driverName }}
-      </strong>
+        <strong>{{ timetable.driverName }}</strong>
+      </router-link>
 
-      <strong v-else>
-        {{ timetable.driverName }}
-      </strong>
+      <router-link v-else :to="`/journal/timetables?search-driver=${timetable.driverName}`">
+        <strong>{{ timetable.driverName }}</strong>
+      </router-link>
     </span>
 
     <span class="general-time">
diff --git a/src/styles/JournalSection.scss b/src/styles/JournalSection.scss
index 3e18826..9158d72 100644
--- a/src/styles/JournalSection.scss
+++ b/src/styles/JournalSection.scss
@@ -38,16 +38,11 @@
   }
 }
 
-.journal_item {
-  cursor: pointer;
-}
-
 .journal_item,
 .journal_warning {
   background-color: #1a1a1a;
   padding: 1em;
   margin-bottom: 1em;
-  cursor: pointer;
 }
 
 .journal_top-bar {