Globalny TrainModal; animacja przejścia

src/App.scss

@@ -17,6 +17,19 @@
   }
 }
 
+.modal-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all $animDuration $animType;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    transform: translateY(-25%);
+    opacity: 0;
+  }
+}
+
 .route {
   margin: 0 0.2em;
 

src/App.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="app_container">
     <UpdateModal />
-    
+
+    <transition name="modal-anim">
+      <keep-alive>
+        <TrainModal v-if="store.chosenModalTrain" />
+      </keep-alive>
+    </transition>
+
     <header class="app_header">
       <div class="header_container">
         <div class="header_icons">
@@ -59,7 +65,6 @@
 
     <main class="app_main">
       <router-view v-slot="{ Component }">
-        <!-- <transition name="view-anim" mode="out-in"> -->
         <keep-alive>
           <component :is="Component" :key="$route.path" />
         </keep-alive>
@@ -89,14 +94,16 @@ import StatusIndicator from '@/components/App/StatusIndicator.vue';
 import SelectBox from '@/components/Global/SelectBox.vue';
 import { useStore } from './store/store';
 import UpdateModal from './components/App/UpdateModal.vue';
+import TrainModal from './components/Global/TrainModal.vue';
 
 export default defineComponent({
   components: {
     Clock,
     StatusIndicator,
     SelectBox,
-    UpdateModal
+    UpdateModal,
-},
+    TrainModal,
+  },
 
   setup() {
     const store = useStore();

src/components/Global/TrainModal.vue

@@ -1,38 +1,21 @@
 <template>
-  <div class="train-modal" @keydown.esc="closeModal">
+  <div class="train-modal" v-if="store.chosenModalTrain" @keydown.esc="closeModal">
     <div class="modal_background" @click="closeModal"></div>
     <div class="modal_content" ref="content" tabindex="0">
-      <!-- <transition name="top-info-bar-anim">
-        <div class="top-info-bar" v-if="isTopBarVisible">
-          <span v-if="chosenTrain.timetableData">
-            <b class="text--primary">{{ chosenTrain.timetableData.category }} {{ chosenTrain.trainNo }}</b>
-            {{ chosenTrain.driverName }} &bull;
-            <b>{{ chosenTrain.timetableData.route.replace('|', ' > ') }}</b>
-            &bull;
-            {{ currentDistance(chosenTrain.timetableData.followingStops) }} km /
-            <span class="text--primary">{{ chosenTrain.timetableData.routeDistance }} km</span>
-            &bull;
-            <span class="text--grayed">{{ displayTrainPosition(chosenTrain) }}</span>
-            &bull;
-            {{ chosenTrain.speed }}km/h
-          </span>
-        </div>
-      </transition> -->
-
       <button class="btn exit" @click="closeModal">
         <img :src="icons.exit" alt="close card" />
       </button>
 
-      <TrainInfo :train="chosenTrain" :extended="false" ref="trainInfo" />
+      <TrainInfo :train="store.chosenModalTrain" :extended="false" ref="trainInfo" />
-      <TrainSchedule :train="chosenTrain" tabindex="0" />
+      <TrainSchedule :train="store.chosenModalTrain" tabindex="0" />
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import trainInfoMixin from '@/mixins/trainInfoMixin';
-import Train from '@/scripts/interfaces/Train';
+import { useStore } from '@/store/store';
-import { defineComponent, PropType } from 'vue';
+import { defineComponent } from 'vue';
 import TrainInfo from '../TrainsView/TrainInfo.vue';
 import TrainSchedule from '../TrainsView/TrainSchedule.vue';
 
@@ -40,8 +23,6 @@ export default defineComponent({
   components: { TrainInfo, TrainSchedule },
   mixins: [trainInfoMixin],
 
-  emits: ['closeModal'],
-
   data() {
     return {
       isTopBarVisible: false,
@@ -52,11 +33,12 @@ export default defineComponent({
     };
   },
 
-  props: {
+  setup() {
-    chosenTrain: {
+    const store = useStore();
-      type: Object as PropType<Train>,
+
-      required: true,
+    return {
-    },
+      store,
+    };
   },
 
   activated() {
@@ -65,23 +47,11 @@ export default defineComponent({
     this.$nextTick(() => {
       contentEl.focus();
     });
-
-    document.body.style.overflowY = 'hidden';
-    // document.body.blur();
-
-    // contentEl.addEventListener('scroll', this.handleContentScroll);
-  },
-
-  deactivated() {
-    document.body.style.overflowY = 'scroll';
-
-    // (this.$refs['content'] as HTMLElement).removeEventListener('scroll', this.handleContentScroll);
-    // this.isTopBarVisible = false;
   },
 
   methods: {
     closeModal() {
-      this.$emit('closeModal');
+      this.store.chosenModalTrain = undefined;
     },
 
     handleContentScroll(e: Event) {
@@ -120,7 +90,7 @@ export default defineComponent({
 
   padding: 0.25em;
 
-  z-index: 101;
+  z-index: 201;
 
   img {
     width: 1.5rem;
@@ -134,10 +104,9 @@ export default defineComponent({
   left: 0;
 
   width: 100%;
-  height: 100%;
 
   color: white;
-  z-index: 100;
+  z-index: 200;
 
   display: flex;
   justify-content: center;
@@ -149,8 +118,8 @@ export default defineComponent({
   position: absolute;
   top: 0;
   left: 0;
-  width: 100%;
+  width: 100vw;
-  height: 100%;
+  height: 100vh;
 
   cursor: pointer;
 
@@ -164,26 +133,10 @@ export default defineComponent({
   margin-top: 1em;
 
   width: 95vw;
-  height: 95vh;
+  max-height: 96vh;
 
   background-color: #1a1a1a;
-}
+  box-shadow: 0 0 15px 10px #0e0e0e;
-.top-info-bar {
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 100%;
-
-  padding: 0.5em 1em;
-  padding-right: 4em;
-  text-align: center;
-
-  overflow: hidden;
-
-  z-index: 101;
-
-  background-color: #000000dd;
 }
 
 @include midScreen {
@@ -194,10 +147,6 @@ export default defineComponent({
       width: 1.75rem;
     }
   }
-
-  .top-info-bar {
-    padding: 0.5em 1em;
-  }
 }
 
 @include smallScreen {
@@ -206,7 +155,7 @@ export default defineComponent({
   }
 
   .modal_content {
-    max-height: 75vh;
+    max-height: 85vh;
   }
 }
 </style>

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 })"
+      @click="selectTrain(train.trainId)"
-      @keydown.enter="navigateTo('/trains', { trainNo: train.trainNo, driverName: train.driverName })"
+      @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;
+      this.store.chosenModalTrain = this.store.trainList.find((train) => train.trainId == trainId);
-    },
-
-    closeTrainModal() {
-      this.chosenTrainId = null;
     },
   },
 

src/components/TrainsView/TrainSchedule.vue

@@ -191,10 +191,11 @@ $stopNameClr: #22a8d1;
   display: flex;
   justify-content: center;
 }
+
 ul.stock-list {
   display: flex;
   align-items: flex-end;
-  overflow-x: auto;
+  overflow: auto;
   padding-bottom: 1em;
 
   li > div {

src/components/TrainsView/TrainTable.vue

@@ -1,9 +1,5 @@
 <template>
-  <keep-alive>
+  <div class="train-table">
-    <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" />
     </button>
@@ -20,9 +16,9 @@
           <li
             class="train-row"
             v-for="train in currentTrains"
-            :key="train.trainNo + train.driverId"
+            :key="train.trainId"
-            @click.stop="toggleTimetable(train)"
+            @click.stop="selectTrain(train.trainId)"
-            @keydown.enter="toggleTimetable(train)"
+            @keydown.enter="selectTrain(train.trainId)"
           >
             <TrainInfo :train="train" />
           </li>
@@ -73,7 +69,6 @@ export default defineComponent({
     },
 
     defaultVehicleIcons: defaultVehicleIconsJSON,
-    chosenTrainId: null as string | null,
   }),
 
   setup(props) {
@@ -99,12 +94,6 @@ export default defineComponent({
     };
   },
 
-  computed: {
-    chosenTrain() {
-      return this.trains.find((train) => train.trainId == this.chosenTrainId);
-    },
-  },
-
   activated() {
     const query = this.$route.query;
 
@@ -113,15 +102,11 @@ export default defineComponent({
       this.searchedTrain = query.trainNo.toString();
 
       setTimeout(() => {
-        this.chosenTrainId = query.driverName + <string>query.trainNo;
+        this.selectTrain(query.driverName + <string>query.trainNo);
       }, 20);
     }
   },
 
-  deactivated() {
-    this.chosenTrainId = null;
-  },
-
   methods: {
     enter(el: HTMLElement) {
       const maxHeight = getComputedStyle(el).height;
@@ -147,17 +132,8 @@ export default defineComponent({
       }, 10);
     },
 
-    toggleTimetable(train: Train, state?: boolean) {
+    selectTrain(trainId: string) {
-      if (state !== undefined) {
+      this.store.chosenModalTrain = this.store.trainList.find((train) => train.trainId == trainId);
-        this.chosenTrainId = train.trainId;
-        return;
-      }
-
-      this.chosenTrainId = this.chosenTrainId && this.chosenTrainId == train.trainId ? null : train.trainId;
-    },
-
-    closeTimetable() {
-      this.chosenTrainId = null;
     },
   },
 });

src/scripts/interfaces/Station.ts

@@ -53,6 +53,7 @@ export default interface Station {
       driverName: string;
       driverId: number;
       trainNo: number;
+      trainId: string;
       stopStatus?: string;
     }[];
 

src/store/store.ts

@@ -41,6 +41,8 @@ export const useStore = defineStore('store', {
       driverStatsName: '',
       driverStatsData: undefined,
 
+      chosenModalTrain: undefined as Train | undefined,
+
       dataStatuses: {
         connection: DataStatus.Loading,
         sceneries: DataStatus.Loading,
@@ -202,7 +204,7 @@ export const useStore = defineStore('store', {
           (train) =>
             train?.region === this.region.id && train.online && train.currentStationName === stationAPIData.stationName
         )
-        .map((train) => ({ driverName: train.driverName, driverId: train.driverId, trainNo: train.trainNo }));
+        .map((train) => ({ driverName: train.driverName, driverId: train.driverId, trainNo: train.trainNo, trainId: train.trainId }));
     },
 
     setStationsOnlineInfo() {

src/store/storeTypes.ts

@@ -30,6 +30,8 @@ export interface StoreState {
   driverStatsName: string;
   driverStatsData?: DriverStatsAPIData;
 
+  chosenModalTrain?: Train;
+
   dataStatuses: {
     connection: DataStatus;
     sceneries: DataStatus;