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
+              <button class="button">SZCZEGÓŁOWY ROZKŁAD</button>
-                class="button"
-                @click="changeScheduleShowState(train.timetableData.timetableId)"
-              >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)
+    this.showedSchedule = timetableId;
-    else this.showSchedules.push(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,
+    "nonPublic": false
-    "unavailable": true
   },
   {
     "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,4 +1,4 @@
-export default interface {
+export default interface TrainStop {
   stopName: string;
   stopNameRAW: string;
   stopType: string;

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;
   }