Modal widoku pociągu

src/components/SceneryView/SceneryInfo.vue

@@ -103,6 +103,7 @@ export default defineComponent({
 
 <style lang="scss">
 @import '../../styles/responsive.scss';
+@import '../../styles/badge.scss';
 
 h3.section-header {
   margin: 0.5em 0;
@@ -143,32 +144,5 @@ h3.section-header {
   }
 }
 
-.badge {
-  font-weight: 600;
 
-  display: inline-block;
-  padding: 0;
-
-  background: #585858;
-
-  margin: 0.25em;
-
-  span {
-    display: inline-block;
-    padding: 0.2em 0.4em;
-  }
-
-  &-none {
-    font-weight: 600;
-
-    padding: 0.2em 0.4em;
-    background: firebrick;
-
-    text-align: center;
-
-    @include smallScreen() {
-      font-size: 1em;
-    }
-  }
-}
 </style>

src/components/SceneryView/SceneryTimetable.vue

@@ -25,6 +25,10 @@
       </div>
     </div>
 
+    <keep-alive>
+      <TrainModal v-if="chosenTrain" :chosen-train="chosenTrain" @close-modal="closeTrainModal" />
+    </keep-alive>
+
     <div class="timetable-list">
       <!-- <transition name="scenery-timetable-list-anim" mode="out-in"> -->
       <!-- <div :key="store.dataStatuses.trains + selectedCheckpoint" class="scenery-timetable-list"> -->
@@ -41,13 +45,8 @@
         v-for="(scheduledTrain, i) in computedScheduledTrains"
         :key="i + 1"
         tabindex="0"
-        @click="navigateTo('/trains', { trainNo: scheduledTrain.trainNo, driverName: scheduledTrain.driverName })"
-        @keydown.enter="
-          navigateTo('/trains', {
-            trainNo: scheduledTrain.trainNo,
-            driverName: scheduledTrain.driverName,
-          })
-        "
+        @click.prevent.stop="selectTrain(scheduledTrain.trainId)"
+        @keydown.enter.prevent="selectTrain(scheduledTrain.trainId)"
       >
         <span class="timetable-general">
           <span class="general-info">
@@ -166,11 +165,12 @@ import dateMixin from '@/mixins/dateMixin';
 import routerMixin from '@/mixins/routerMixin';
 import { useStore } from '@/store/store';
 import Loading from '../Global/Loading.vue';
+import TrainModal from '../Global/TrainModal.vue';
 
 export default defineComponent({
   name: 'SceneryTimetable',
 
-  components: { SelectBox, Loading },
+  components: { SelectBox, Loading, TrainModal },
 
   mixins: [dateMixin, routerMixin],
 
@@ -188,6 +188,8 @@ export default defineComponent({
       warning: require('@/assets/icon-warning.svg'),
       timetable: require('@/assets/icon-timetable.svg'),
     },
+
+    chosenTrainId: null as string | null,
   }),
 
   setup(props) {
@@ -236,6 +238,12 @@ export default defineComponent({
     };
   },
 
+  computed: {
+    chosenTrain() {
+      return this.store.trainList.find((train) => train.trainId == this.chosenTrainId);
+    },
+  },
+
   methods: {
     loadSelectedOption() {
       if (!this.station) return;
@@ -251,6 +259,14 @@ export default defineComponent({
     selectCheckpoint(cp: { checkpointName: string }) {
       this.selectedCheckpoint = cp.checkpointName;
     },
+
+    selectTrain(trainId: string) {
+      this.chosenTrainId = trainId;
+    },
+
+    closeTrainModal() {
+      this.chosenTrainId = null;
+    },
   },
 
   mounted() {