src/components/App

src/components/TrainsView/TrainInfo.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="train-info">
     <div class="wrapper">
-      <train-info-simple :train="train" v-if="simpleView" />
-      <train-info-extended :train="train" v-else />
+      <train-info-simple :train="train" />
+   
+      <!-- <train-info-extended :train="train" v-else /> -->
     </div>
   </div>
 </template>
@@ -21,11 +22,6 @@ export default defineComponent({
       type: Object as () => Train,
       required: true,
     },
-
-    simpleView: {
-      type: Boolean,
-      default: false,
-    },
   },
 });
 </script>
@@ -35,10 +31,9 @@ export default defineComponent({
 
 .wrapper {
   font-size: 1em;
-  
+
   @include smallScreen() {
     font-size: 1.2em;
   }
-
 }
 </style>

src/components/TrainsView/TrainInfoSimple.vue

@@ -72,7 +72,7 @@
       </span>
     </section>
 
-    <section class="train-image" style="display: flex; justify-content: center; align-items: center;">
+    <section class="train-image" style="display: flex; justify-content: center; align-items: center">
       <img :src="train.locoURL" alt="Not Found" @error="onImageError" />
 
       <div class="text--grayed">
@@ -93,6 +93,8 @@
       </div>
     </section>
   </div>
+
+
 </template>
 
 <script lang="ts">
@@ -126,7 +128,9 @@ export default defineComponent({
       let progressBarString = `<span style="color: white"> ${percentage}% </span> `;
 
       for (let i = 0; i < 5; i++) {
-        progressBarString += `<span style="color: ${i < Math.round(percentage / 20) ? 'springgreen' : 'gray'}">▉</span>`;
+        progressBarString += `<span style="color: ${
+          i < Math.round(percentage / 20) ? 'springgreen' : 'gray'
+        }">▉</span>`;
       }
 
       return progressBarString;
@@ -163,11 +167,6 @@ export default defineComponent({
   padding: 1em;
   background-color: #202020;
   gap: 0.5em;
-
-  &:hover,
-  &:focus {
-    background: #292929;
-  }
 }
 
 .driver_position:first-letter {

src/components/TrainsView/TrainSchedule.vue

@@ -138,12 +138,16 @@ $stopNameClr: #22a8d1;
 }
 
 .train-schedule {
-  min-height: 400px;
+  max-height: 500px;
+  width: 100%;
 
   overflow-y: auto;
 
   z-index: 5;
 
+  background-color: #202020;
+  padding: 0 0.25em;
+
   @include smallScreen() {
     font-size: 1.1em;
   }
@@ -324,7 +328,7 @@ ul.stop_list > li.stop {
 
     margin-left: -1.75rem;
 
-    font-size: 0.85em;
+    font-size: 0.75em;
     color: #d6d6d6;
   }
 

src/components/TrainsView/TrainTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="train-table" @keydown.esc="closeTimetableCard">
+  <div class="train-table" @keydown.esc="closeTimetable" v-click-outside="closeTimetable">
     <transition name="anim" mode="out-in">
       <div :key="trainsDataStatus">
         <!-- <div class="traffic-warning" v-if="data.">
@@ -19,18 +19,21 @@
             class="train-row"
             v-for="train in currentTrains"
             :key="train.trainNo + train.driverId"
-            @click="showTrainTimetable(train)"
-            @keydown.enter="showTrainTimetable(train)"
+            @click="toggleTimetable(train)"
+            @keydown.enter="toggleTimetable(train)"
           >
             <TrainInfo :train="train" :simpleView="true" />
+
+            <train-schedule
+              v-if="train.timetableData && chosenTrainId == getTrainId(train)"
+              :followingStops="train.timetableData.followingStops"
+              ref="card-inner"
+              tabindex="0"
+            />
           </li>
         </ul>
       </div>
     </transition>
-
-    <span v-if="chosenTrain">
-      <train-timetable-card :train="chosenTrain" @close="closeTimetableCard" ref="card" />
-    </span>
   </div>
 </template>
 
@@ -85,24 +88,13 @@ export default defineComponent({
 
     const currentTrains = computed(() => {
       return props.trains;
-
-      //.slice(currentPage.value * PAGE_CAPACITY, currentPage.value * PAGE_CAPACITY + PAGE_CAPACITY);
     });
 
     const chosenTrainId = ref(null) as Ref<string | null>;
     const chosenTrain = computed(() =>
-      props.trains.find((train) => train.trainNo + train.driverName === chosenTrainId.value)
+      props.trains.find((train: Train) => train.trainNo + train.driverName === chosenTrainId.value)
     );
 
-    // watch([searchedTrain, searchedDriver], () => {
-    //   currentPage.value = 0;
-    // });
-
-    // watch(paginatorPageCount, (value) => {
-    //   if (currentPage.value >= value)
-    //     currentPage.value = paginatorPageCount.value - 1 < 0 ? 0 : paginatorPageCount.value - 1;
-    // });
-
     return {
       searchedTrain,
       searchedDriver,
@@ -144,13 +136,21 @@ export default defineComponent({
       }, 10);
     },
 
-    showTrainTimetable(train: Train) {
-      this.chosenTrainId = train.trainNo + train.driverName;
+    toggleTimetable(train: Train) {
+      this.chosenTrainId = this.chosenTrainId && this.chosenTrainId == this.getTrainId(train) ? null : this.getTrainId(train);
     },
 
-    closeTimetableCard() {
+    closeTimetable() {
       this.chosenTrainId = null;
     },
+
+    showTrainId(train: Train) {
+      console.log(this.getTrainId(train));
+    },
+
+    getTrainId(train: Train) {
+      return train.driverId.toString() + train.trainNo.toString();
+    }
   },
 });
 </script>