From aa363115d39181f7a678ae6da3b8531e938ef306 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Wed, 12 Jan 2022 14:13:30 +0100
Subject: [PATCH] =?UTF-8?q?TrainTable:=20nowe=20dzia=C5=82anie=20widoku=20?=
 =?UTF-8?q?SRJP?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TrainsView/TrainOptions.vue  |  93 ++++++-----------
 src/components/TrainsView/TrainSchedule.vue |   4 +-
 src/components/TrainsView/TrainTable.vue    |  97 +++++++++---------
 src/data/decodedChars.json                  |  36 +++----
 src/views/TrainsView.vue                    | 107 +++++++-------------
 5 files changed, 136 insertions(+), 201 deletions(-)

diff --git a/src/components/TrainsView/TrainOptions.vue b/src/components/TrainsView/TrainOptions.vue
index 4277313..6336b0e 100644
--- a/src/components/TrainsView/TrainOptions.vue
+++ b/src/components/TrainsView/TrainOptions.vue
@@ -9,77 +9,57 @@
       />
 
       <div class="search-box">
-        <input
-          class="search-input"
-          v-model="searchedTrain"
-          :placeholder="$t('trains.search-train')"
-        />
+        <input class="search-input" v-model="searchedTrain" :placeholder="$t('trains.search-train')" />
 
-        <img
-          class="search-exit"
-          :src="exitIcon"
-          alt="exit-icon"
-          @click="() => (searchedTrain = '')"
-        />
+        <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedTrain = '')" />
       </div>
 
       <div class="search-box">
-        <input
-          class="search-input"
-          v-model="searchedDriver"
-          :placeholder="$t('trains.search-driver')"
-        />
+        <input class="search-input" v-model="searchedDriver" :placeholder="$t('trains.search-driver')" />
 
-        <img
-          class="search-exit"
-          :src="exitIcon"
-          alt="exit-icon"
-          @click="() => (searchedDriver = '')"
-        />
+        <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedDriver = '')" />
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "vue";
-import { useI18n } from "vue-i18n";
-import SelectBox from "../Global/SelectBox.vue";
+import { computed, defineComponent, inject, Ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import SelectBox from '../Global/SelectBox.vue';
 
 export default defineComponent({
   components: { SelectBox },
-  props: ["queryTrain"],
-  emits: ["changeSearchedTrain", "changeSearchedDriver", "changeSorter"],
+  emits: ['changeSearchedTrain', 'changeSearchedDriver', 'changeSorter'],
 
   data: () => ({
-    exitIcon: require("@/assets/icon-exit.svg"),
-    searchedTrain: "",
-    searchedDriver: "",
+    exitIcon: require('@/assets/icon-exit.svg'),
   }),
 
   setup() {
     const { t } = useI18n();
+    const queryTrain = inject('queryTrain') as Ref<string>;
 
     const sorterOptions = [
       {
-        id: "mass",
-        value: "masa",
+        id: 'mass',
+        value: 'masa',
       },
       {
-        id: "speed",
-        value: "prędkość",
+        id: 'speed',
+        value: 'prędkość',
       },
       {
-        id: "length",
-        value: "długość",
+        id: 'length',
+        value: 'długość',
       },
       {
-        id: "distance",
-        value: "kilometraż",
+        id: 'distance',
+        value: 'kilometraż',
       },
       {
-        id: "timetable",
-        value: "numer pociągu",
+        id: 'timetable',
+        value: 'numer pociągu',
       },
     ];
 
@@ -92,52 +72,41 @@ 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 = "";
+      this.searchedDriver = '';
     }
   },
 
   methods: {
-    chooseTrain(train: string) {
-      this.$emit("changeSearchedTrain", train);
-    },
-
-    chooseDriver(driverName: string) {
-      this.$emit("changeSearchedDriver", driverName);
-    },
-
     changeSorter(item: { id: string | number; value: string }) {
-      this.$emit("changeSorter", { id: item.id, dir: -1 });
+      this.sorterActive.id = item.id;
+      this.sorterActive.dir = -1;
     },
   },
 
   watch: {
-    searchedTrain(value: string) {
-      this.chooseTrain(value);
-    },
-
-    searchedDriver(value: string) {
-      this.chooseDriver(value);
-    },
-
     queryTrain(train: string) {
       if (!train) return;
-      if (train == "") return;
+      if (train == '') return;
 
       this.searchedTrain = train;
-      this.searchedDriver = "";
+      this.searchedDriver = '';
     },
   },
 });
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/responsive";
+@import '../../styles/responsive';
 
 .train-options {
   @include smallScreen() {
@@ -195,4 +164,4 @@ export default defineComponent({
     width: 1em;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/TrainsView/TrainSchedule.vue b/src/components/TrainsView/TrainSchedule.vue
index ec28a9f..e28491c 100644
--- a/src/components/TrainsView/TrainSchedule.vue
+++ b/src/components/TrainsView/TrainSchedule.vue
@@ -16,8 +16,10 @@
 
             <span class="stop-name">
               <span v-html="stop.stopName"></span>
-              <!-- <img v-if="stop.comments" :src="icons.warning" :title="`${$t('trains.comment')}: ${stop.comments}`"> -->
+              <img v-if="stop.comments" :src="icons.warning" :title="stop.comments">
               <!-- {{ decodeURIComponent(stop.comments) }} -->
+
+              <span v-html="stop.comments"></span>
             </span>
             <span class="stop-date">
               <span
diff --git a/src/components/TrainsView/TrainTable.vue b/src/components/TrainsView/TrainTable.vue
index 0d773e7..7b19e6d 100644
--- a/src/components/TrainsView/TrainTable.vue
+++ b/src/components/TrainsView/TrainTable.vue
@@ -5,25 +5,26 @@
     </div>
 
     <transition name="train-list-anim" mode="out-in">
-      <div :key="timetableLoaded">
-        <div class="table-info no-trains" v-if="computedTrains.length == 0 && timetableLoaded">
+      <div :key="timetableLoaded + searchedDriver + searchedTrain + sorterActive.id">
+        <div class="table-info no-trains" v-if="trains.length == 0 && timetableLoaded">
           {{ $t('trains.no-trains') }}
         </div>
 
-        <div class="table-info loading" v-if="computedTrains.length == 0 && !timetableLoaded">
+        <div class="table-info loading" v-if="trains.length == 0 && !timetableLoaded">
           {{ $t('trains.loading') }}
         </div>
 
         <ul class="train-list">
           <li
             class="train-row"
-            v-for="train in computedTrains.filter((_, i) => i < 10)"
+            v-for="train in trains"
             :key="train.trainNo + train.driverId"
             tabindex="0"
-            @keydown.enter="changeScheduleShowState(train.timetableData?.timetableId)"
+            @click="showTrainTimetable(train.trainNo, train.timetableData?.timetableId)"
+            @keydown.enter="showTrainTimetable(train.trainNo, train.timetableData?.timetableId)"
             :ref="(el) => registerReference(el, train.timetableData?.timetableId)"
           >
-            <div class="row-wrapper" @click="changeScheduleShowState(train.timetableData?.timetableId)">
+            <div class="row-wrapper">
               <span class="info">
                 <div class="info_timetable" v-if="!train.timetableData">
                   <div class="timetable_general">
@@ -60,7 +61,7 @@
                       <span class="activator">
                         SRJP
                         <img
-                          :src="showedSchedule == train.timetableData.timetableId ? icons.arrowAsc : icons.arrowDesc"
+                          :src="chosenSchedule == train.timetableData.timetableId ? icons.arrowAsc : icons.arrowDesc"
                           alt="arrow-icon"
                         />
                       </span>
@@ -127,6 +128,7 @@
                     {{ `${~~(train[stat.name] * (stat.multiplier || 1))}${stat.unit}` }}
                   </span>
                 </div>
+
                 <div class="stats-position">
                   <span v-for="stat in stats.position" :key="stat.name">
                     <div>
@@ -138,17 +140,11 @@
               </span>
             </div>
 
-            <transition name="unfold-timetable-anim" @enter="enter" @afterEnter="afterEnter" @leave="leave">
-              <TrainSchedule
-                v-if="showedSchedule === train.timetableData?.timetableId"
-                :followingStops="train.timetableData?.followingStops"
-                @click="changeScheduleShowState(train.timetableData?.timetableId)"
-              />
-            </transition>
+            <TrainSchedule
+              v-if="train.timetableData?.timetableId == chosenSchedule"
+              :followingStops="train.timetableData?.followingStops"
+            />
           </li>
-          <div class="table-info limit" v-if="timetableLoaded && computedTrains.length > 10">
-            {{ $t('trains.table-limit') }}
-          </div>
         </ul>
       </div>
     </transition>
@@ -156,7 +152,7 @@
 </template>
 
 <script lang="ts">
-import { computed, ComputedRef, defineComponent, Ref, ref } from '@vue/runtime-core';
+import { computed, ComputedRef, defineComponent, inject, Ref, ref } from '@vue/runtime-core';
 import { useStore } from '@/store';
 
 import defaultVehicleIconsJSON from '@/data/defaultVehicleIcons.json';
@@ -174,19 +170,13 @@ export default defineComponent({
   },
 
   props: {
-    computedTrains: {
+    trains: {
       type: Array as () => Train[],
       required: true,
     },
-
-    queryTrain: {
-      type: String,
-      required: false,
-    },
   },
 
   data: () => ({
-    showedSchedule: 0,
     defaultLocoImage: require('@/assets/unknown.png'),
 
     icons: {
@@ -242,21 +232,23 @@ export default defineComponent({
 
     const timetableDataStatus: ComputedRef<DataStatus> = computed(() => store.getters[GETTERS.timetableDataStatus]);
 
-    const queryTimetable = computed(() => {
-      const q = props.computedTrains.find((train) => train.trainNo === Number(props.queryTrain))?.timetableData;
+    const searchedTrain = inject('searchedTrain') as Ref<string>;
+    const searchedDriver = inject('searchedDriver') as Ref<string>;
+    const queryTrain = inject('queryTrain') as Ref<string>;
 
-      return q;
-    });
+    const chosenSchedule = ref(0);
 
     return {
       elList,
-      queryTimetable,
+      searchedTrain,
+      searchedDriver,
+      chosenSchedule,
+
+      sorterActive: inject('sorterActive') as { id: string | number; dir: number },
       timetableLoaded: computed(() => timetableDataStatus.value === DataStatus.Loaded),
       timetableError: computed(() => timetableDataStatus.value === DataStatus.Error),
       distanceLimitExceeded: computed(
-        () =>
-          props.computedTrains.findIndex(({ timetableData }) => timetableData && timetableData.routeDistance > 200) !=
-          -1
+        () => props.trains.findIndex(({ timetableData }) => timetableData && timetableData.routeDistance > 200) != -1
       ),
     };
   },
@@ -291,27 +283,34 @@ export default defineComponent({
     },
 
     focusOnTrain(trainNoStr: string) {
-      const timetableId = this.computedTrains.find((train) => train.trainNo == Number(trainNoStr))?.timetableData
-        ?.timetableId;
+      const timetableId = this.trains.find((train) => train.trainNo == Number(trainNoStr))?.timetableData?.timetableId;
 
       if (!timetableId) return;
 
-      this.changeScheduleShowState(timetableId);
+      this.showTrainTimetable(Number(trainNoStr), timetableId);
     },
 
-    changeScheduleShowState(timetableId: number | undefined) {
-      if (!timetableId || timetableId < 0) return;
+    showTrainTimetable(trainNo: number, timetableId: number | undefined) {      
+      if (!timetableId && this.trains.length == 1) this.searchedTrain = '';
 
-      this.showedSchedule = this.showedSchedule == timetableId ? 0 : timetableId;
+      if (!timetableId) return;
 
+      this.searchedTrain =
+        this.searchedTrain == trainNo.toString() && this.chosenSchedule != 0 ? '' : trainNo.toString();
+      this.chosenSchedule = this.chosenSchedule == timetableId ? 0 : timetableId;
+
+      this.scrollToTimetable(timetableId);
+    },
+
+    scrollToTimetable(timetableId: number) {
       setTimeout(() => {
         const currentEl = this.elList[timetableId];
 
         currentEl?.scrollIntoView({
           behavior: 'smooth',
-          block: this.showedSchedule == 0 ? 'nearest' : 'center',
+          block: 'center',
         });
-      }, 200);
+      }, 150);
     },
 
     onImageError(e: Event) {
@@ -325,7 +324,7 @@ export default defineComponent({
 
       return stops
         .reduce((acc: string[], stop: TrainStop, i: number) => {
-          if (stop.stopType.includes('ph'))
+          if (stop.stopType.includes('ph') && !stop.stopNameRAW.includes('po.'))
             acc.push(`<strong style='color:${stop.confirmed ? 'springgreen' : 'white'}'>${stop.stopName}</strong>`);
           else if (
             i > 0 &&
@@ -358,10 +357,6 @@ export default defineComponent({
       );
     },
   },
-
-  activated() {
-    if (this.queryTrain) this.focusOnTrain(this.queryTrain);
-  },
 });
 </script>
 
@@ -387,7 +382,7 @@ export default defineComponent({
   }
 
   &-leave-active {
-    transition: all 100ms ease-out 100ms;
+    transition: all 100ms ease-out;
   }
 }
 
@@ -448,7 +443,6 @@ img.train-image {
 .info {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
 
   & .timetable {
     &_hero {
@@ -458,6 +452,7 @@ img.train-image {
     &_general {
       display: flex;
       justify-content: space-between;
+      align-items: center;
     }
 
     &_srjp .activator {
@@ -551,17 +546,17 @@ img.train-image {
 }
 
 .stats {
+  font-size: 0.9em;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 
-  font-size: 0.9em;
-
   padding: 1em 0;
 
   &-main {
     display: flex;
-    margin-bottom: 1.5em;
+    justify-content: space-between;
+    align-items: center;
 
     & > span {
       display: flex;
diff --git a/src/data/decodedChars.json b/src/data/decodedChars.json
index 2f8c3f5..1168cdd 100644
--- a/src/data/decodedChars.json
+++ b/src/data/decodedChars.json
@@ -1,20 +1,20 @@
 {
-    "0D3": "Ó",
-    "0F3": "ó",
-    "104": "Ą",
-    "105": "ą", 
-    "106": "Ć",
-    "107": "ć",
-    "280": "Ę",
-    "281": "ę",
-    "141": "Ł",
-    "142": "ł",
-    "143": "Ń",
-    "144": "ń",
-    "15A": "Ś",
-    "15B": "ś",
-    "179": "Ź",
-    "17A": "ź",
-    "17B": "Ż",
-    "17C": "ż"
+    "&#x0D3": "Ó",
+    "&#x0F3": "ó",
+    "&#x104": "Ą",
+    "&#x105": "ą", 
+    "&#x106": "Ć",
+    "&#x107": "ć",
+    "&#x280": "Ę",
+    "&#x281": "ę",
+    "&#x141": "Ł",
+    "&#x142": "ł",
+    "&#x143": "Ń",
+    "&#x144": "ń",
+    "&#x15A": "Ś",
+    "&#x15B": "ś",
+    "&#x179": "Ź",
+    "&#x17A": "ź",
+    "&#x17B": "Ż",
+    "&#x17C": "ż"
 }
\ No newline at end of file
diff --git a/src/views/TrainsView.vue b/src/views/TrainsView.vue
index f4227f3..8d3a7dd 100644
--- a/src/views/TrainsView.vue
+++ b/src/views/TrainsView.vue
@@ -4,31 +4,26 @@
       <div class="options-bar">
         <TrainStats :trains="trainList" :trainStatsOpen="trainStatsOpen" />
 
-        <TrainOptions
-          :queryTrain="train"
-          @changeSorter="changeSorter"
-          @changeSearchedTrain="changeSearchedTrain"
-          @changeSearchedDriver="changeSearchedDriver"
-        />
+        <TrainOptions />
       </div>
 
-      <TrainTable :computedTrains="computedTrains" :queryTrain="train" />
+      <TrainTable :trains="computedTrains" />
     </div>
   </section>
 </template>
 
 <script lang="ts">
-import { computed, ComputedRef, defineComponent, provide, reactive, ref } from "vue";
+import { computed, ComputedRef, defineComponent, provide, reactive, Ref, ref } from 'vue';
 
-import { DataStatus } from "@/scripts/enums/DataStatus";
-import Train from "@/scripts/interfaces/Train";
+import { DataStatus } from '@/scripts/enums/DataStatus';
+import Train from '@/scripts/interfaces/Train';
 
-import TrainTable from "@/components/TrainsView/TrainTable.vue";
-import TrainStats from "@/components/TrainsView/TrainStats.vue";
-import TrainOptions from "@/components/TrainsView/TrainOptions.vue";
+import TrainTable from '@/components/TrainsView/TrainTable.vue';
+import TrainStats from '@/components/TrainsView/TrainStats.vue';
+import TrainOptions from '@/components/TrainsView/TrainOptions.vue';
 
-import { useStore } from "@/store";
-import { GETTERS } from "@/constants/storeConstants";
+import { useStore } from '@/store';
+import { GETTERS } from '@/constants/storeConstants';
 
 const filteredTrainList = (
   trainList: Train[],
@@ -39,39 +34,29 @@ const filteredTrainList = (
   return trainList
     .filter(
       (train) =>
-        (searchedTrain.length > 0
-          ? train.trainNo.toString().includes(searchedTrain)
-          : true) &&
-        (searchedDriver.length > 0
-          ? train.driverName
-              .toLowerCase()
-              .includes(searchedDriver.toLowerCase())
-          : true)
+        (searchedTrain.length > 0 ? train.trainNo.toString().includes(searchedTrain) : true) &&
+        (searchedDriver.length > 0 ? train.driverName.toLowerCase().includes(searchedDriver.toLowerCase()) : true)
     )
     .sort((a: Train, b: Train) => {
       switch (sorterActive.id) {
-        case "mass":
+        case 'mass':
           if (a.mass > b.mass) return sorterActive.dir;
           return -sorterActive.dir;
 
-        case "distance":
-          if (
-            (a.timetableData?.routeDistance || -1) >
-            (b.timetableData?.routeDistance || -1)
-          )
-            return sorterActive.dir;
+        case 'distance':
+          if ((a.timetableData?.routeDistance || -1) > (b.timetableData?.routeDistance || -1)) return sorterActive.dir;
 
           return -sorterActive.dir;
 
-        case "speed":
+        case 'speed':
           if (a.speed > b.speed) return sorterActive.dir;
           return -sorterActive.dir;
 
-        case "timetable":
+        case 'timetable':
           if (a.trainNo > b.trainNo) return sorterActive.dir;
           return -sorterActive.dir;
 
-        case "length":
+        case 'length':
           if (a.length > b.length) return sorterActive.dir;
           return -sorterActive.dir;
 
@@ -80,7 +65,7 @@ const filteredTrainList = (
       }
 
       return 0;
-    })
+    });
 };
 
 export default defineComponent({
@@ -90,38 +75,36 @@ export default defineComponent({
     TrainOptions,
   },
 
-  props: ["train"],
+  props: ['train'],
 
   data: () => ({
-    statsIcon: require("@/assets/icon-stats.svg"),
+    statsIcon: require('@/assets/icon-stats.svg'),
     trainStatsOpen: false,
-    queryTrain: "",
+    queryTrain: '',
   }),
 
-  setup() {
+  setup(props) {
     const store = useStore();
 
-    const trainList: ComputedRef<Train[]> = computed(
-      () => store.getters[GETTERS.trainList]
-    );
+    const trainList: ComputedRef<Train[]> = computed(() => store.getters[GETTERS.trainList]);
 
-    const timetableDataStatus: ComputedRef<DataStatus> = computed(
-      () => store.getters[GETTERS.timetableDataStatus]
-    );
+    const timetableDataStatus: ComputedRef<DataStatus> = computed(() => store.getters[GETTERS.timetableDataStatus]);
 
-    const sorterActive = ref({ id: "distance", dir: -1 });
-    const searchedDriver = ref("");
-    const searchedTrain = ref("");
+    const sorterActive = ref({ id: 'distance', dir: -1 });
+    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 [];
 
-      return filteredTrainList(
-        trainList.value,
-        searchedTrain.value,
-        searchedDriver.value,
-        sorterActive.value
-      );
+      return filteredTrainList(trainList.value, searchedTrain.value, searchedDriver.value, sorterActive.value);
     });
 
     /* Provide list for TrainStats category filter */
@@ -134,28 +117,14 @@ export default defineComponent({
       searchedTrain,
       searchedDriver,
       sorterActive,
-      chosenTrainCategories
+      chosenTrainCategories,
     };
   },
-
-  methods: {
-    changeSearchedTrain(trainNo: string) {
-      this.searchedTrain = trainNo;
-    },
-
-    changeSearchedDriver(name: string) {
-      this.searchedDriver = name;
-    },
-
-    changeSorter(sorter: { id: string; dir: number }) {
-      this.sorterActive = sorter;
-    },
-  },
 });
 </script>
 
 <style lang="scss" scoped>
-@import "../styles/responsive.scss";
+@import '../styles/responsive.scss';
 
 .trains-view {
   min-height: 100%;