Dodano rozwijanie RJ przy przenoszeniu z innej zakładki

src/components/TrainsView/TrainTable.vue

@@ -251,7 +251,7 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from "vue-property-decorator";
+import { Vue, Component, Prop, Emit, Watch } from "vue-property-decorator";
 
 import Train from "@/scripts/interfaces/Train";
 import TrainStop from "@/scripts/interfaces/TrainStop";
@@ -265,6 +265,7 @@ import { DataStatus } from "@/scripts/enums/DataStatus";
 export default class TrainTable extends Vue {
   @Prop() computedTrains!: Train[];
   @Prop() timetableDataStatus!: DataStatus;
+  @Prop() queryTrain!: string;
 
   showedSchedule = 0;
 
@@ -307,6 +308,17 @@ export default class TrainTable extends Vue {
     });
   }
 
+  @Watch("queryTrain")
+  onSearchedTrainChange(trainNo: string) {
+    const timetableId = this.computedTrains.find(
+      (train) => train.trainNo == parseInt(trainNo)
+    )?.timetableData?.timetableId;
+
+    if (!timetableId) return;
+
+    this.changeScheduleShowState(timetableId);
+  }
+
   onImageError(e: Event) {
     const imageEl = e.target as HTMLImageElement;
     this.missingLocoImages.push(imageEl.src);
@@ -314,6 +326,7 @@ export default class TrainTable extends Vue {
 
   generateStopList(stops: any): string | undefined {
     if (!stops) return "";
+
     return stops
       .reduce((acc, stop: TrainStop, i) => {
         if (stop.stopType.includes("ph"))
@@ -455,11 +468,11 @@ export default class TrainTable extends Vue {
   &-loco {
     width: 100%;
     text-align: center;
-  }
 
-  &-loco img {
+    & img {
-    width: 200px;
+      width: 200px;
-    max-width: 200px;
+      max-width: 200px;
+    }
   }
 }
 

src/scripts/interfaces/Timetable.ts

@@ -1,16 +0,0 @@
-export default interface Timetable {
-  trainNo: number;
-  driverName: string;
-  category: string;
-  stopName: string;
-  stopType: string;
-  arrivalTime: number;
-  arrivalDelay: number;
-  departureTime: number;
-  departureDelay: number;
-  confirmed: boolean;
-  stopped: boolean;
-  stopTime: number;
-  beginsHere: boolean;
-  terminatesHere: boolean;
-}

src/scripts/utils/storeUtils.ts

@@ -71,11 +71,13 @@ const parseSpawns = (spawnString: string) => {
 
 const getTimestamp = (date: string | null) => (date ? new Date(date).getTime() : 0);
 
-const timestampToString = (timestamp: number) =>
+const timestampToString = (timestamp: number | null) =>
-  new Date(timestamp).toLocaleTimeString("pl-PL", {
+  timestamp
-    hour: "2-digit",
+    ? new Date(timestamp).toLocaleTimeString("pl-PL", {
-    minute: "2-digit"
+        hour: "2-digit",
-  });
+        minute: "2-digit"
+      })
+    : "";
 
 const getTrainStopStatus = (stopInfo: TrainStop, timetableData: { currentStationName: string }, station: Station) => {
   let stopStatus: string = "",

src/store/store.ts

@@ -302,16 +302,16 @@ export default class Store extends VuexModule {
           mainStop: point.pointName.includes("strong"),
 
           arrivalLine: point.arrivalLine,
-          arrivalTimeString: point.arrivalTime,
+          arrivalTimeString: utils.timestampToString(arrivalTimestamp),
           arrivalTimestamp: arrivalTimestamp,
-          arrivalRealTimeString: point.arrivalRealTime,
+          arrivalRealTimeString: utils.timestampToString(arrivalRealTimestamp),
           arrivalRealTimestamp: arrivalRealTimestamp,
           arrivalDelay: point.arrivalDelay,
 
           departureLine: point.departureLine,
-          departureTimeString: point.departureTime,
+          departureTimeString: utils.timestampToString(departureTimestamp),
           departureTimestamp: departureTimestamp,
-          departureRealTimeString: point.departureRealTime,
+          departureRealTimeString: utils.timestampToString(departureRealTimestamp),
           departureRealTimestamp: departureRealTimestamp,
           departureDelay: point.departureDelay,
 

src/views/TrainsView.vue

@@ -15,6 +15,7 @@
       <TrainTable
         :computedTrains="computedTrains"
         :timetableDataStatus="timetableDataStatus"
+        :queryTrain="queryTrain"
       />
     </div>
   </section>