Modal widoku pociągu

src/components/TrainsView/TrainInfo.vue

@@ -1,17 +1,9 @@
 <template>
-  <div class="train-info simple" tabindex="0">
-    <section>
+  <div class="train-info" tabindex="0">
+    <section class="train-route">
       <span>
         <div>
           <span>
-            <!-- <router-link
-              v-if="train.timetableData"
-              :to="`/journal/timetables?timetableId=${train.timetableData.timetableId}`"
-              style="color: #ddd; margin-right: 0.3em"
-            >
-              #{{ train.timetableData.timetableId }}
-            </router-link> -->
-
             <span class="timetable-id" v-if="train.timetableData">#{{ train.timetableData.timetableId }}</span>
 
             <span class="timetable_warnings">
@@ -96,8 +88,10 @@
       </span>
     </section>
 
-    <section class="train-image" style="display: flex; justify-content: center; align-items: center">
-      <img :src="train.locoURL" loading="lazy" alt="Loco image not found" @error="onImageError" />
+    <section class="train-stats">
+      <div>
+        <img :src="train.locoURL" loading="lazy" alt="Loco image not found" @error="onImageError" />
+      </div>
 
       <div class="text--grayed">
         {{ train.locoType }}
@@ -108,12 +102,10 @@
       </div>
 
       <div>
-        <div>
-          <span v-for="(stat, i) in STATS.main" :key="stat.name">
-            <span v-if="i > 0"> &bull; </span>
-            <span>{{ `${~~(train[stat.name] * (stat.multiplier || 1))}${stat.unit}` }} </span>
-          </span>
-        </div>
+        <span v-for="(stat, i) in STATS.main" :key="stat.name">
+          <span v-if="i > 0"> &bull; </span>
+          <span>{{ `${~~(train[stat.name] * (stat.multiplier || 1))}${stat.unit}` }} </span>
+        </span>
       </div>
     </section>
   </div>
@@ -130,6 +122,11 @@ export default defineComponent({
       type: Object as () => Train,
       required: true,
     },
+
+    extended: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   mixins: [trainInfoMixin],
@@ -153,9 +150,13 @@ export default defineComponent({
   margin-left: 0.5em;
 }
 
-.train-image {
+.train-stats {
   display: flex;
+  justify-content: center;
+  align-content: center;
+
   flex-direction: column;
+  text-align: center;
 
   img {
     margin: 0.5em 0;
@@ -163,7 +164,7 @@ export default defineComponent({
   }
 }
 
-.simple {
+.train-info {
   display: grid;
   grid-template-columns: 2fr 1fr;
   grid-template-rows: 1fr;
@@ -258,16 +259,20 @@ export default defineComponent({
 }
 
 @include smallScreen() {
-  .simple {
+  .train-info {
     grid-template-columns: 1fr;
     gap: 1em 0;
     text-align: center;
 
-    font-size: 1.25em;
+    font-size: 1.15em;
   }
 
-  .info-stats {
-    text-align: center;
+  .train-stats {
+    font-size: 1.1em;
+
+    img {
+      display: none;
+    }
   }
 
   .timetable_route {

src/components/TrainsView/TrainSchedule.vue

@@ -207,7 +207,6 @@ ul.stock-list {
 
 .schedule-wrapper {
   overflow-y: auto;
-  max-height: 500px;
   width: 100%;
   z-index: 5;
 

src/components/TrainsView/TrainTable.vue

@@ -1,4 +1,8 @@
 <template>
+  <keep-alive>
+    <TrainModal v-if="chosenTrain" :chosen-train="chosenTrain" @close-modal="closeTimetable" />
+  </keep-alive>
+
   <div class="train-table" @keydown.esc="closeTimetable">
     <button class="return-btn" @click="scrollToTop" v-if="showReturnButton">
       <img :src="icons.arrowAsc" alt="return arrow" />
@@ -17,12 +21,10 @@
             class="train-row"
             v-for="train in currentTrains"
             :key="train.trainNo + train.driverId"
-            @click="toggleTimetable(train)"
+            @click.stop="toggleTimetable(train)"
             @keydown.enter="toggleTimetable(train)"
           >
             <TrainInfo :train="train" />
-
-            <TrainSchedule v-if="chosenTrainId == getTrainId(train)" :train="train" ref="card-inner" tabindex="0" />
           </li>
         </ul>
       </div>
@@ -43,12 +45,14 @@ import TrainInfo from '@/components/TrainsView/TrainInfo.vue';
 import returnBtnMixin from '@/mixins/returnBtnMixin';
 import { useStore } from '@/store/store';
 import Loading from '../Global/Loading.vue';
+import TrainModal from '../Global/TrainModal.vue';
 
 export default defineComponent({
   components: {
     TrainSchedule,
     TrainInfo,
     Loading,
+    TrainModal,
   },
 
   mixins: [returnBtnMixin],
@@ -95,6 +99,12 @@ export default defineComponent({
     };
   },
 
+  computed: {
+    chosenTrain() {
+      return this.trains.find((train) => train.trainId == this.chosenTrainId);
+    },
+  },
+
   activated() {
     const query = this.$route.query;
 
@@ -138,23 +148,17 @@ export default defineComponent({
     },
 
     toggleTimetable(train: Train, state?: boolean) {
-      const id = this.getTrainId(train);
-
       if (state !== undefined) {
-        this.chosenTrainId = state ? id : null;
+        this.chosenTrainId = train.trainId;
         return;
       }
 
-      this.chosenTrainId = this.chosenTrainId && this.chosenTrainId == id ? null : id;
+      this.chosenTrainId = this.chosenTrainId && this.chosenTrainId == train.trainId ? null : train.trainId;
     },
 
     closeTimetable() {
       this.chosenTrainId = null;
     },
-
-    getTrainId(train: Train) {
-      return train.driverName + train.trainNo.toString();
-    },
   },
 });
 </script>