From 562b9a64ca760fc7fa855d9f38da22232c6ea531 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sun, 16 Jan 2022 18:05:05 +0100
Subject: [PATCH] =?UTF-8?q?Naprawiono=20odno=C5=9Bnik=20do=20poci=C4=85gu?=
 =?UTF-8?q?=20na=20li=C5=9Bcie=20rozk=C5=82ad=C3=B3w=20scenerii?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TrainsView/TrainOptions.vue |  19 ----
 src/components/TrainsView/TrainTable.vue   | 106 ++++++++++-----------
 src/store/index.ts                         |   4 +-
 src/views/TrainsView.vue                   |  20 +++-
 4 files changed, 65 insertions(+), 84 deletions(-)

diff --git a/src/components/TrainsView/TrainOptions.vue b/src/components/TrainsView/TrainOptions.vue
index 6336b0e..0cd3fc6 100644
--- a/src/components/TrainsView/TrainOptions.vue
+++ b/src/components/TrainsView/TrainOptions.vue
@@ -38,7 +38,6 @@ export default defineComponent({
 
   setup() {
     const { t } = useI18n();
-    const queryTrain = inject('queryTrain') as Ref<string>;
 
     const sorterOptions = [
       {
@@ -72,36 +71,18 @@ export default defineComponent({
 
     return {
       translatedSorterOptions,
-      queryTrain,
       searchedTrain: inject('searchedTrain') as string,
       searchedDriver: inject('searchedDriver') as string,
       sorterActive: inject('sorterActive') as { id: string | number; dir: number },
     };
   },
 
-  mounted() {
-    if (this.queryTrain) {
-      this.searchedTrain = this.queryTrain;
-      this.searchedDriver = '';
-    }
-  },
-
   methods: {
     changeSorter(item: { id: string | number; value: string }) {
       this.sorterActive.id = item.id;
       this.sorterActive.dir = -1;
     },
   },
-
-  watch: {
-    queryTrain(train: string) {
-      if (!train) return;
-      if (train == '') return;
-
-      this.searchedTrain = train;
-      this.searchedDriver = '';
-    },
-  },
 });
 </script>
 
diff --git a/src/components/TrainsView/TrainTable.vue b/src/components/TrainsView/TrainTable.vue
index d8e20f4..c4e82ed 100644
--- a/src/components/TrainsView/TrainTable.vue
+++ b/src/components/TrainsView/TrainTable.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="train-table">
-    <div class="traffic-warning" v-if="distanceLimitExceeded">
-      {{ $t('trains.distance-exceeded') }}
-    </div>
-
     <transition name="train-list-anim" mode="out-in">
-      <div :key="timetableLoaded + searchedDriver + searchedTrain + sorterActive.id + currentPage">
+      <div :key="Number(timetableLoaded) + currentPage">
+        <div class="traffic-warning" v-if="distanceLimitExceeded">
+          {{ $t('trains.distance-exceeded') }}
+        </div>
+
         <div class="table-info no-trains" v-if="trains.length == 0 && timetableLoaded">
           {{ $t('trains.no-trains') }}
         </div>
@@ -57,17 +57,6 @@
                         <span style="color: gold"> {{ train.timetableData.routeDistance }} km </span>
                       </span>
                     </span>
-
-                    <span class="timetable_srjp g-tooltip">
-                      <span class="activator">
-                        SRJP
-                        <img
-                          :src="chosenSchedule == train.timetableData.timetableId ? icons.arrowAsc : icons.arrowDesc"
-                          alt="arrow-icon"
-                        />
-                      </span>
-                      <span class="content"> {{ $t('trains.detailed-timetable') }} {{ train.trainNo }} </span>
-                    </span>
                   </div>
 
                   <div class="timetable_route">
@@ -150,50 +139,52 @@
       </div>
     </transition>
 
-    <div class="paginator" v-if="timetableLoaded && currentTrains.length > 0">
-      <span
-        class="paginator_item"
-        :tabindex="currentPage == 0 ? -1 : 0"
-        :class="{ disabled: currentPage == 0 }"
-        @click="changePageTo(0)"
-        @keydown.enter="changePageTo(0)"
-      >
-        1&lt;
-      </span>
+    <transition name="train-list-anim">
+      <div class="paginator" v-if="timetableLoaded && currentTrains.length > 0">
+        <span
+          class="paginator_item"
+          :tabindex="currentPage == 0 ? -1 : 0"
+          :class="{ disabled: currentPage == 0 }"
+          @click="changePageTo(0)"
+          @keydown.enter="changePageTo(0)"
+        >
+          1&lt;
+        </span>
 
-      <span
-        class="paginator_item"
-        :tabindex="currentPage == 0 ? -1 : 0"
-        :class="{ disabled: currentPage == 0 }"
-        @click="changePageTo(currentPage - 1)"
-        @keydown.enter="changePageTo(currentPage - 1)"
-      >
-        &lt;
-      </span>
+        <span
+          class="paginator_item"
+          :tabindex="currentPage == 0 ? -1 : 0"
+          :class="{ disabled: currentPage == 0 }"
+          @click="changePageTo(currentPage - 1)"
+          @keydown.enter="changePageTo(currentPage - 1)"
+        >
+          &lt;
+        </span>
 
-      <span class="paginator_item page-number">
-        {{ currentPage + 1 }}
-      </span>
+        <span class="paginator_item page-number">
+          {{ currentPage + 1 }}
+        </span>
 
-      <span
-        class="paginator_item"
-        :tabindex="currentPage == paginatorPageCount - 1 ? -1 : 0"
-        :class="{ disabled: currentPage == paginatorPageCount - 1 }"
-        @click="changePageTo(currentPage + 1)"
-        @keydown.enter="changePageTo(currentPage + 1)"
-      >
-        &gt;
-      </span>
-      <span
-        class="paginator_item"
-        :tabindex="currentPage == paginatorPageCount - 1 ? -1 : 0"
-        :class="{ disabled: currentPage == paginatorPageCount - 1 }"
-        @click="changePageTo(paginatorPageCount - 1)"
-        @keydown.enter="changePageTo(paginatorPageCount - 1)"
-      >
-        &gt;{{ paginatorPageCount }}
-      </span>
-    </div>
+        <span
+          class="paginator_item"
+          :tabindex="currentPage == paginatorPageCount - 1 ? -1 : 0"
+          :class="{ disabled: currentPage == paginatorPageCount - 1 }"
+          @click="changePageTo(currentPage + 1)"
+          @keydown.enter="changePageTo(currentPage + 1)"
+        >
+          &gt;
+        </span>
+        <span
+          class="paginator_item"
+          :tabindex="currentPage == paginatorPageCount - 1 ? -1 : 0"
+          :class="{ disabled: currentPage == paginatorPageCount - 1 }"
+          @click="changePageTo(paginatorPageCount - 1)"
+          @keydown.enter="changePageTo(paginatorPageCount - 1)"
+        >
+          &gt;{{ paginatorPageCount }}
+        </span>
+      </div>
+    </transition>
   </div>
 </template>
 
@@ -660,7 +651,6 @@ img.train-image {
     &.page-number {
       font-weight: bold;
       color: gold;
-
     }
 
     &.disabled {
diff --git a/src/store/index.ts b/src/store/index.ts
index 4dd7ac3..9bd5622 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -404,7 +404,7 @@ export const store = createStore<State>({
               && station.generalInfo.checkpoints
               && station.generalInfo.checkpoints.length > 0
               && station.generalInfo.checkpoints.some(cp => cp.checkpointName.toLowerCase().includes(stop.stopNameRAW.toLowerCase())))
-              
+
               return true;
 
             return false;
@@ -471,7 +471,7 @@ export const store = createStore<State>({
             ...station.onlineInfo,
             scheduledTrains
           } : undefined
-         };
+        };
       });
 
       state.trainList = state.trainList.reduce((acc, train) => {
diff --git a/src/views/TrainsView.vue b/src/views/TrainsView.vue
index c3878d6..3b25e2d 100644
--- a/src/views/TrainsView.vue
+++ b/src/views/TrainsView.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts">
-import { computed, ComputedRef, defineComponent, provide, reactive, Ref, ref } from 'vue';
+import { computed, ComputedRef, defineComponent, provide, reactive, Ref, ref, watch } from 'vue';
 
 import { DataStatus } from '@/scripts/enums/DataStatus';
 import Train from '@/scripts/interfaces/Train';
@@ -80,7 +80,6 @@ export default defineComponent({
   data: () => ({
     statsIcon: require('@/assets/icon-stats.svg'),
     trainStatsOpen: false,
-    queryTrain: '',
   }),
 
   setup(props) {
@@ -94,12 +93,9 @@ export default defineComponent({
     const searchedDriver = ref('');
     const searchedTrain = ref('');
 
-    const queryTrain = ref(props.train) as Ref<string>;
-
     provide('searchedTrain', searchedTrain);
     provide('searchedDriver', searchedDriver);
     provide('sorterActive', sorterActive);
-    provide('queryTrain', queryTrain);
 
     const computedTrains: ComputedRef<Train[]> = computed(() => {
       if (timetableDataStatus.value != DataStatus.Loaded) return [];
@@ -120,6 +116,20 @@ export default defineComponent({
       chosenTrainCategories,
     };
   },
+
+  mounted() {
+    if (this.train) {
+      this.searchedTrain = this.train;
+      this.searchedDriver = '';
+    }
+  },
+
+  activated() {    
+    if (this.train) {
+      this.searchedTrain = this.train;
+      this.searchedDriver = '';
+    }
+  },
 });
 </script>