Globalny TrainModal; animacja przejścia

src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue

@@ -11,10 +11,10 @@
       v-for="(train, i) in computedStationTrains"
       class="badge user"
       :class="train.stopStatus"
-      :key="train.trainNo + i"
+      :key="train.trainId"
       tabindex="0"
-      @click="navigateTo('/trains', { trainNo: train.trainNo, driverName: train.driverName })"
-      @keydown.enter="navigateTo('/trains', { trainNo: train.trainNo, driverName: train.driverName })"
+      @click="selectTrain(train.trainId)"
+      @keydown.enter="selectTrain(train.trainId)"
     >
       <span class="user_train">{{ train.trainNo }}</span>
       <span class="user_name">{{ train.driverName }}</span>
@@ -29,6 +29,7 @@
 <script lang="ts">
 import routerMixin from '@/mixins/routerMixin';
 import Station from '@/scripts/interfaces/Station';
+import { useStore } from '@/store/store';
 import { computed, defineComponent } from 'vue';
 
 export default defineComponent({
@@ -42,6 +43,8 @@ export default defineComponent({
   },
 
   setup(props) {
+    const store = useStore();
+
     const computedStationTrains = computed(() => {
       if (!props.station) return [];
 
@@ -59,7 +62,7 @@ export default defineComponent({
       });
     });
 
-    return { computedStationTrains };
+    return { computedStationTrains, store };
   },
 
   data: () => ({
@@ -67,6 +70,12 @@ export default defineComponent({
       user: require('@/assets/icon-user.svg'),
     },
   }),
+
+  methods: {
+    selectTrain(trainId: string) {
+      this.store.chosenModalTrain = this.store.trainList.find((train) => train.trainId == trainId);
+    },
+  },
 });
 </script>
 
@@ -130,3 +139,4 @@ $disconnected: slategray;
   }
 }
 </style>
+

src/components/SceneryView/SceneryTimetable.vue

@@ -25,10 +25,6 @@
       </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"> -->
@@ -188,8 +184,6 @@ export default defineComponent({
       warning: require('@/assets/icon-warning.svg'),
       timetable: require('@/assets/icon-timetable.svg'),
     },
-
-    chosenTrainId: null as string | null,
   }),
 
   setup(props) {
@@ -238,12 +232,6 @@ export default defineComponent({
     };
   },
 
-  computed: {
-    chosenTrain() {
-      return this.store.trainList.find((train) => train.trainId == this.chosenTrainId);
-    },
-  },
-
   methods: {
     loadSelectedOption() {
       if (!this.station) return;
@@ -261,11 +249,7 @@ export default defineComponent({
     },
 
     selectTrain(trainId: string) {
-      this.chosenTrainId = trainId;
-    },
-
-    closeTrainModal() {
-      this.chosenTrainId = null;
+      this.store.chosenModalTrain = this.store.trainList.find((train) => train.trainId == trainId);
     },
   },