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>