Przekierowanie do aktywnego RJ

src/components/JournalView/JournalTimetables.vue

@@ -37,8 +37,8 @@
                       <span>
                         <span
                           tabindex="0"
-                          @click="navigateToTrain(!item.terminated ? item.trainNo : null)"
+                          @click="navigateToTimetable(item)"
-                          @keydown.enter="navigateToTrain(!item.terminated ? item.trainNo : null)"
+                          @keydown.enter="navigateToTimetable(item)"
                           style="cursor: pointer"
                         >
                           <b class="text--primary">{{ item.trainCategoryCode }}&nbsp;</b>
@@ -157,6 +157,7 @@ import JournalOptions from '@/components/JournalView/JournalOptions.vue';
 import { URLs } from '@/scripts/utils/apiURLs';
 import { journalTimetableFilters } from '@/data/journalFilters';
 import { JournalFilterType } from '@/scripts/enums/JournalFilterType';
+import routerMixin from '@/mixins/routerMixin';
 
 const PROD_MODE = process.env.VUE_APP_JOURNAL_TIMETABLES_DEV != "1" || process.env.NODE_ENV === "production";
 
@@ -199,7 +200,7 @@ interface TimetableHistory {
 
 export default defineComponent({
   components: { SearchBox, ActionButton, JournalOptions },
-  mixins: [dateMixin],
+  mixins: [dateMixin, routerMixin],
 
   data: () => ({
     icons: {
@@ -268,21 +269,18 @@ export default defineComponent({
   },
 
   methods: {
+    navigateToTimetable(historyItem: TimetableHistory) {
+        if(historyItem.terminated) return;
+
+        this.navigateToTrain(historyItem.trainNo, historyItem.driverName);
+    },
+
     getSceneryList(historyItem: TimetableHistory) {
       return historyItem.sceneriesString
         .split('%')
         .map((name, i) => ({ name, confirmed: i < historyItem.confirmedStopsCount }));
     },
 
-    navigateToTrain(trainNo: number | null) {
-      if (!trainNo) return;
-
-      this.$router.push({
-        name: 'TrainsView',
-        query: { train: trainNo.toString() },
-      });
-    },
-
     handleScroll() {
       this.showReturnButton = window.scrollY > window.innerHeight;
 

src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue

@@ -12,8 +12,8 @@
       :class="train.stopStatus"
       :key="train.trainNo + i"
       tabindex="0"
-      @click="() => navigateToTrain(train.trainNo)"
+      @click="() => navigateToTrain(train.trainNo, train.driverName)"
-      @keydown.enter="navigateToTrain(train.trainNo)"
+      @keydown.enter="navigateToTrain(train.trainNo, train.driverName)"
     >
       <span class="user_train">{{ train.trainNo }}</span>
       <span class="user_name">{{ train.driverName }}</span>
@@ -26,10 +26,13 @@
 </template>
 
 <script lang="ts">
+import routerMixin from '@/mixins/routerMixin';
 import Station from '@/scripts/interfaces/Station';
 import { computed, defineComponent } from 'vue';
 
 export default defineComponent({
+  mixins: [routerMixin],
+
   props: {
     station: {
       type: Object as () => Station,
@@ -38,13 +41,15 @@ export default defineComponent({
   },
 
   setup(props) {
-    const computedStationTrains = computed(() => {
+    const computedStationTrains= computed(() => {
       if (!props.station) return [];
-      if (!props.station.onlineInfo) return [];
-      if (!props.station.onlineInfo.stationTrains) return [];
 
-      return props.station.onlineInfo.stationTrains.map((train) => {
+      const station = props.station as Station;
-        const scheduledTrainStatus = props.station.onlineInfo?.scheduledTrains?.find(
+      if (!station.onlineInfo) return [];
+      if (!station.onlineInfo.stationTrains) return [];
+
+      return station.onlineInfo.stationTrains.map((train) => {
+        const scheduledTrainStatus = station.onlineInfo?.scheduledTrains?.find(
           (st) => st.trainNo === train.trainNo
         );
 
@@ -63,15 +68,6 @@ export default defineComponent({
       user: require('@/assets/icon-user.svg'),
     },
   }),
-
-  methods: {
-    navigateToTrain(trainNo: number) {
-      this.$router.push({
-        name: 'TrainsView',
-        query: { train: trainNo.toString() },
-      });
-    },
-  },
 });
 </script>
 

src/components/SceneryView/SceneryTimetable.vue

@@ -44,8 +44,8 @@
           v-for="(scheduledTrain, i) in computedScheduledTrains"
           :key="i + 1"
           tabindex="0"
-          @click="navigateToTrain(scheduledTrain.trainNo)"
+          @click="navigateToTrain(scheduledTrain.trainNo, scheduledTrain.driverName)"
-          @keydown.enter="navigateToTrain(scheduledTrain.trainNo)"
+          @keydown.enter="navigateToTrain(scheduledTrain.trainNo, scheduledTrain.driverName)"
         >
           <span class="timetable-general">
             <span class="general-info">
@@ -90,7 +90,7 @@
                   <span>{{ timestampToString(scheduledTrain.stopInfo.arrivalTimestamp) }}</span>
                 </div>
                 <div v-else>
-                  <s style="margin-right: 0.2em;" class="text--grayed">{{
+                  <s style="margin-right: 0.2em" class="text--grayed">{{
                     timestampToString(scheduledTrain.stopInfo.arrivalTimestamp)
                   }}</s>
                   <span>
@@ -120,7 +120,7 @@
                   <span>{{ timestampToString(scheduledTrain.stopInfo.departureTimestamp) }}</span>
                 </div>
                 <div v-else>
-                  <s style="margin-right: 0.2em;" class="text--grayed">{{
+                  <s style="margin-right: 0.2em" class="text--grayed">{{
                     timestampToString(scheduledTrain.stopInfo.departureTimestamp)
                   }}</s>
 
@@ -149,12 +149,12 @@ import { GETTERS } from '@/constants/storeConstants';
 import { DataStatus } from '@/scripts/enums/DataStatus';
 import { ComputedRef } from 'vue';
 import dateMixin from '@/mixins/dateMixin';
-import TrainStop from '@/scripts/interfaces/TrainStop';
+import routerMixin from '@/mixins/routerMixin';
 
 export default defineComponent({
   components: { SelectBox },
 
-  mixins: [dateMixin],
+  mixins: [dateMixin, routerMixin],
 
   props: {
     station: {
@@ -192,10 +192,12 @@ export default defineComponent({
     const computedScheduledTrains = computed(() => {
       if (!props.station) return [];
 
+      const station = props.station as Station;
+
       let scheduledTrains =
-        props.station.generalInfo?.checkpoints.find((cp) => cp.checkpointName === selectedCheckpoint.value)
+        station.generalInfo?.checkpoints.find((cp) => cp.checkpointName === selectedCheckpoint.value)
           ?.scheduledTrains ||
-        props.station.onlineInfo?.scheduledTrains ||
+        station.onlineInfo?.scheduledTrains ||
         [];
 
       return (
@@ -234,13 +236,6 @@ export default defineComponent({
     selectCheckpoint(cp: { checkpointName: string }) {
       this.selectedCheckpoint = cp.checkpointName;
     },
-
-    navigateToTrain(trainNo: number) {
-      this.$router.push({
-        name: 'TrainsView',
-        query: { train: trainNo.toString() },
-      });
-    },
   },
 
   mounted() {

src/components/TrainsView/TrainOptions.vue

@@ -132,6 +132,8 @@ export default defineComponent({
 
     resetFilters() {
       this.filterList.forEach((f) => (f.isActive = true));
+      this.searchedDriver = "";
+      this.searchedTrain = "";
     },
   },
 });

src/components/TrainsView/TrainTable.vue

@@ -24,12 +24,7 @@
           >
             <TrainInfo :train="train" />
 
-            <TrainSchedule
+            <TrainSchedule v-if="chosenTrainId == getTrainId(train)" :train="train" ref="card-inner" tabindex="0" />
-              v-if="chosenTrainId == getTrainId(train)"
-              :train="train"
-              ref="card-inner"
-              tabindex="0"
-            />
           </li>
         </ul>
       </div>
@@ -38,7 +33,7 @@
 </template>
 
 <script lang="ts">
-import { computed, ComputedRef, defineComponent, inject, Ref } from '@vue/runtime-core';
+import { computed, ComputedRef, defineComponent, inject, Ref, watchEffect } from '@vue/runtime-core';
 import { useStore } from '@/store';
 
 import defaultVehicleIconsJSON from '@/data/defaultVehicleIcons.json';
@@ -50,7 +45,6 @@ import TrainInfo from '@/components/TrainsView/TrainInfo.vue';
 
 import { DataStatus } from '@/scripts/enums/DataStatus';
 import { GETTERS } from '@/constants/storeConstants';
-import { ref } from 'vue';
 
 export default defineComponent({
   components: {
@@ -74,6 +68,7 @@ export default defineComponent({
     },
 
     defaultVehicleIcons: defaultVehicleIconsJSON,
+    chosenTrainId: null as string | null,
   }),
 
   setup(props) {
@@ -88,19 +83,11 @@ export default defineComponent({
       return props.trains;
     });
 
-    const chosenTrainId = ref(null) as Ref<string | null>;
-    const chosenTrain = computed(() =>
-      props.trains.find((train: Train) => train.trainNo + train.driverName === chosenTrainId.value)
-    );
-
     return {
       searchedTrain,
       searchedDriver,
       currentTrains,
 
-      chosenTrain,
-      chosenTrainId,
-
       sorterActive: inject('sorterActive') as { id: string | number; dir: number },
       trainsDataStatus: computed(() => trainsDataStatus.value),
       distanceLimitExceeded: computed(
@@ -109,6 +96,27 @@ export default defineComponent({
     };
   },
 
+  activated() {
+    const query = this.$route.query;
+
+    if (query.trainNo && query.driverName) {
+      const train = (this.$store.getters[GETTERS.trainList] as Train[]).find(
+        (train) => train.trainNo == Number(query.trainNo) && train.driverName == query.driverName!.toString()
+      );
+
+      this.searchedDriver = query.driverName.toString();
+      this.searchedTrain = query.trainNo.toString();
+
+        setTimeout(() => {
+          this.chosenTrainId = query.driverName + <string>query.trainNo;
+        }, 20);
+    }
+  },
+
+  deactivated() {
+    this.chosenTrainId = null;
+  },
+
   methods: {
     enter(el: HTMLElement) {
       const maxHeight = getComputedStyle(el).height;
@@ -134,8 +142,16 @@ export default defineComponent({
       }, 10);
     },
 
-    toggleTimetable(train: Train) {
+    toggleTimetable(train: Train, state?: boolean) {
-      this.chosenTrainId = this.chosenTrainId && this.chosenTrainId == this.getTrainId(train) ? null : this.getTrainId(train);
+      const id = this.getTrainId(train);
+      console.log(id, this);
+
+      if (state !== undefined) {
+        this.chosenTrainId = state ? id : null;
+        return;
+      }
+
+      this.chosenTrainId = this.chosenTrainId && this.chosenTrainId == id ? null : id;
     },
 
     closeTimetable() {
@@ -147,8 +163,8 @@ export default defineComponent({
     },
 
     getTrainId(train: Train) {
-      return train.driverId.toString() + train.trainNo.toString();
+      return train.driverName + train.trainNo.toString();
-    }
+    },
   },
 });
 </script>

src/mixins/routerMixin.ts

@@ -0,0 +1,12 @@
+import { defineComponent } from "vue";
+
+export default defineComponent({
+    methods: {
+        navigateToTrain(trainNo: number, driverName: string) {
+            this.$router.push({
+                name: 'TrainsView',
+                query: { trainNo, driverName },
+            });
+        }
+    }
+})

src/router/index.ts

@@ -10,7 +10,7 @@ const routes: Array<RouteRecordRaw> = [
     path: "/trains",
     name: "TrainsView",
     component: () => import("@/views/TrainsView.vue"),
-    props: route => ({ train: route.query.train })
+    props: route => ({ train: route.query.train, driver: route.query.driver })
   },
   {
     path: "/scenery",

src/scripts/interfaces/Station.ts

@@ -52,6 +52,7 @@ export default interface Station {
 
     stationTrains?: {
       driverName: string;
+      driverId: number;
       trainNo: number;
       stopStatus?: string;
     }[];

src/store/index.ts

@@ -180,7 +180,7 @@ export const store = createStore<State>({
 
         const stationTrains = data.trains
           ?.filter(train => train?.region === this.state.region.id && train.online && train.currentStationName === stationAPI.stationName)
-          .map(train => ({ driverName: train.driverName, trainNo: train.trainNo }));
+          .map(train => ({ driverName: train.driverName, driverId: train.driverId, trainNo: train.trainNo }));
 
         station?.generalInfo?.checkpoints.forEach(cp => cp.scheduledTrains.length = 0);
 

src/views/TrainsView.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts">
-import { computed, ComputedRef, defineComponent, provide, reactive, ref, TrainFilter } from 'vue';
+import { computed, ComputedRef, defineComponent, PropType, provide, reactive, ref, TrainFilter } from 'vue';
 import { filteredTrainList } from '@/scripts/managers/trainFilterManager';
 import  { trainFilters } from "@/data/trainOptions";
 
@@ -32,7 +32,17 @@ export default defineComponent({
     TrainOptions,
   },
 
-  props: ['train'],
+  props: {
+    train: {
+      type: String,
+      required: false
+    },
+
+    driver: {
+      type: String,
+      required: false
+    }
+  },
 
   data: () => ({
     statsIcon: require('@/assets/icon-stats.svg'),
@@ -77,18 +87,15 @@ export default defineComponent({
     };
   },
 
-  mounted() {
-    if (this.train) {
-      this.searchedTrain = this.train;
-      this.searchedDriver = '';
-    }
-  },
-
   activated() {
-    if (this.train) {
+    if(this.train) {
       this.searchedTrain = this.train;
-      this.searchedDriver = '';
+      this.searchedDriver = this.driver || "";
     }
+    // if (this.train) {
+    //   this.searchedTrain = this.train;
+    //   if(this.x) this.searchedDriver = this.x;
+    // }
   },
 });
 </script>