Rozszerzony rozkład jazdy

src/components/TrainsView/TrainSchedule.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="train-schedule">
+  <div class="train-schedule" @click="click">
     <div class="schedule-wrapper">
       <div class="schedule-bar"></div>
 
@@ -63,6 +63,10 @@ export default class TrainSchedule extends Vue {
     return timeString + (delay != 0 ? " (" + (delay > 0 ? "+" : "") + delay.toString() + ")" : "");
   }
 
+  click() {
+    this.$emit('click')
+  }
+
 }
 </script>
 

src/components/TrainsView/TrainSearch.vue

@@ -28,6 +28,7 @@ export default class extends Vue {
   searchedDriver = "";
 
   @Prop() readonly passedSearchedTrain!: string;
+  @Prop() readonly focusedTrain!: string;
   // @Prop() readonly passedSearchedDriver!: string;
 
   @Watch("searchedTrain")
@@ -48,6 +49,14 @@ export default class extends Vue {
     }
   }
 
+  @Watch("focusedTrain")
+  onFocusedTrainChanged(val: string, oldVal: string) {
+    console.log(val);
+
+    this.searchedTrain = val;
+    this.searchedDriver = "";
+  }
+
   mounted() {
     if (this.passedSearchedTrain && this.passedSearchedTrain != "") {
       this.searchedTrain = this.passedSearchedTrain;

src/components/TrainsView/TrainTable.vue

@@ -8,6 +8,7 @@
         v-for="(train, i) in computedTrains"
         :key="i"
         :id="train.timetableData.timetableId"
+        @click="() => {changeFocusedTrain(train.trainNo);}"
       >
         <span class="train-info">
           <span class="info">
@@ -49,10 +50,7 @@
                 :class="{'online': train.online}"
               >{{train.online ? "ONLINE" : "OFFLINE"}}</span>
 
-              <button
-                class="button"
-                @click="changeScheduleShowState(train.timetableData.timetableId)"
-              >SZCZEGÓŁOWY ROZKŁAD</button>
+              <button class="button">SZCZEGÓŁOWY ROZKŁAD</button>
             </div>
           </span>
 
@@ -124,7 +122,7 @@
           :followingStops="train.timetableData.followingStops"
           :currentStationName="train.currentStationName"
           @click="changeScheduleShowState(train.timetableData.timetableId)"
-          v-if="showSchedules.includes(train.timetableData.timetableId)"
+          v-if="showedSchedule == train.timetableData.timetableId"
         />
       </li>
     </ul>
@@ -147,7 +145,7 @@ import TrainSchedule from "@/components/TrainsView/TrainSchedule.vue";
 export default class TrainTable extends Vue {
   @Prop() computedTrains!: Train[];
 
-  showSchedules: number[] = [];
+  showedSchedule = 0;
 
   speedIcon: string = require("@/assets/icon-speed.svg");
   massIcon: string = require("@/assets/icon-mass.svg");
@@ -159,8 +157,7 @@ export default class TrainTable extends Vue {
   routeIcon: string = require("@/assets/icon-route.svg");
 
   changeScheduleShowState(timetableId: number) {
-    if (this.showSchedules.includes(timetableId)) this.showSchedules.splice(this.showSchedules.indexOf(timetableId), 1)
-    else this.showSchedules.push(timetableId);
+    this.showedSchedule = timetableId;
   }
 
   onImageError(e: Event) {
@@ -177,6 +174,10 @@ export default class TrainTable extends Vue {
       return acc;
     }, []).join(" * ");
   }
+
+  changeFocusedTrain(trainNo: number) {
+    this.$emit('changeFocusedTrain', trainNo.toString());
+  }
 }
 </script>
 

src/data/stations.json

@@ -1,4 +1,5 @@
-[{
+[
+  {
     "stationName": "Blaszki",
     "stationURL": "https://td2.info.pl/scenerie/blaszki/",
     "stationLines": "",
@@ -1748,7 +1749,7 @@
   },
   {
     "stationName": "Hetmanice",
-    "stationURL": "https://td2.info.pl/dzial-trenerski/hetmanice-stacja-dla-poczatkujacych/",
+    "stationURL": "https://td2.info.pl/scenerie/hetmanice-stacja-dla-poczatkujacych/",
     "stationLines": "",
     "reqLevel": "0",
     "supportersOnly": "NIE",
@@ -1767,8 +1768,7 @@
       }
     },
     "default": false,
-    "nonPublic": false,
-    "unavailable": true
+    "nonPublic": false
   },
   {
     "stationName": "Starzynki",
@@ -1865,5 +1865,51 @@
     "nonPublic": false,
     "unavailable": true,
     "stops": ["Sroka, podg."]
+  },
+  {
+    "stationName": "Luzino",
+    "stationURL": "https://td2.info.pl/scenerie/luzino-6501/",
+    "stationLines": "",
+    "reqLevel": "3",
+    "supportersOnly": "NIE",
+    "signalType": "współczesna",
+    "controlType": "mechaniczne",
+    "SBL": "",
+    "twoWayBlock": "TAK",
+    "routes": {
+      "oneWay": {
+        "catenary": 2,
+        "noCatenary": 0
+      },
+      "twoWay": {
+        "catenary": 0,
+        "noCatenary": 0
+      }
+    },
+    "default": false,
+    "nonPublic": false
+  },
+  {
+    "stationName": "Zajączkowo",
+    "stationURL": "https://td2.info.pl/scenerie/zajaczkowo/",
+    "stationLines": "",
+    "reqLevel": "0",
+    "supportersOnly": "NIE",
+    "signalType": "kształtowa",
+    "controlType": "mechaniczne",
+    "SBL": "",
+    "twoWayBlock": "",
+    "routes": {
+      "oneWay": {
+        "catenary": 0,
+        "noCatenary": 2
+      },
+      "twoWay": {
+        "catenary": 0,
+        "noCatenary": 0
+      }
+    },
+    "default": false,
+    "nonPublic": false
   }
-]
+]

src/scripts/interfaces/TrainStop.ts

@@ -1,28 +1,28 @@
-export default interface {
-    stopName: string;
-    stopNameRAW: string;
-    stopType: string;
-    mainStop: boolean;
+export default interface TrainStop {
+  stopName: string;
+  stopNameRAW: string;
+  stopType: string;
+  mainStop: boolean;
 
-    arrivalLine: string;
-    arrivalTimeString: string;
-    arrivalTimestamp: number;
-    arrivalRealTimeString: string;
-    arrivalRealTimestamp: number;
-    arrivalDelay: number;
+  arrivalLine: string;
+  arrivalTimeString: string;
+  arrivalTimestamp: number;
+  arrivalRealTimeString: string;
+  arrivalRealTimestamp: number;
+  arrivalDelay: number;
 
-    departureLine: string;
-    departureTimeString: string;
-    departureTimestamp: number;
-    departureRealTimeString: string;
-    departureRealTimestamp: number;
-    departureDelay: number;
+  departureLine: string;
+  departureTimeString: string;
+  departureTimestamp: number;
+  departureRealTimeString: string;
+  departureRealTimestamp: number;
+  departureDelay: number;
 
-    comments?: any;
+  comments?: any;
 
-    beginsHere: boolean;
-    terminatesHere: boolean;
-    confirmed: boolean;
-    stopped: boolean;
-    stopTime: number;
-}
+  beginsHere: boolean;
+  terminatesHere: boolean;
+  confirmed: boolean;
+  stopped: boolean;
+  stopTime: number;
+}

src/store/store.ts

@@ -358,7 +358,7 @@ export default class Store extends VuexModule {
       const trainData = this.trainList.find(train => train.trainNo === updatedTrain.trainNo);
 
       if (trainData) acc.push({ ...trainData, ...updatedTrain });
-      else acc.push({ ...updatedTrain });
+      else acc.push({ ...updatedTrain   });
 
       return acc;
     }, [] as Train[]);

src/views/TrainsView.vue

@@ -7,11 +7,12 @@
           @changeSearchedTrain="changeSearchedTrain"
           @changeSearchedDriver="changeSearchedDriver"
           :passedSearchedTrain="passedSearchedTrain"
+          :focusedTrain="focusedTrain"
         />
       </div>
 
       <TrainStats :trains="trains" />
-      <TrainTable :computedTrains="computedTrains" />
+      <TrainTable :computedTrains="computedTrains" @changeFocusedTrain="changeFocusedTrain" />
     </div>
   </section>
 </template>
@@ -44,8 +45,10 @@ export default class TrainsView extends Vue {
   @Prop() readonly passedSearchedTrain!: string;
 
   sorterActive: { id: string; dir: number } = { id: "timetable", dir: 1 };
+
   searchedTrain: string = "";
   searchedDriver: string = "";
+  focusedTrain: string = "";
 
   changeSearchedTrain(trainNo: string) {
     this.searchedTrain = trainNo;
@@ -55,6 +58,10 @@ export default class TrainsView extends Vue {
     this.searchedDriver = name;
   }
 
+  changeFocusedTrain(trainNo: string) {
+    this.focusedTrain = this.focusedTrain === trainNo ? "" : trainNo;
+  }
+
   changeSorter(sorter: { id: string; dir: number }) {
     this.sorterActive = sorter;
   }