chore: backwards compatibility with train modal for ext. links

src/App.vue

@@ -6,7 +6,6 @@
     />
 
     <Tooltip />
-
     <AppHeader :current-lang="currentLang" @change-lang="changeLang" />
 
     <main class="app_main">

src/components/TrainsView/TrainModal.vue

@@ -1,103 +0,0 @@
-<template>
-  <div class="train-modal" v-if="chosenTrain" @keydown.esc="closeModal">
-    <div class="modal-background" @click="closeModal"></div>
-    <div class="modal-content" ref="content" tabindex="0">
-      <TrainInfo :train="chosenTrain" :extended="true" ref="trainInfo" />
-      <TrainSchedule :train="chosenTrain" tabindex="0" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import modalTrainMixin from '../../mixins/modalTrainMixin';
-import TrainInfo from './TrainInfo.vue';
-import TrainSchedule from './TrainSchedule.vue';
-import { Train } from '../../typings/common';
-
-export default defineComponent({
-  components: { TrainInfo, TrainSchedule },
-  mixins: [modalTrainMixin],
-
-  computed: {
-    chosenTrain() {
-      return this.store.trainList.find((train) => train.modalId == this.store.chosenModalTrainId);
-    }
-  },
-
-  watch: {
-    chosenTrain(train: Train | undefined) {
-      this.$nextTick(() => {
-        if (train) {
-          document.body.classList.add('no-scroll');
-          const contentEl = this.$refs['content'] as HTMLElement;
-          contentEl.focus();
-        } else {
-          (this.store.modalLastClickedTarget as any)?.focus();
-
-          setTimeout(() => {
-            document.body.classList.remove('no-scroll');
-          }, 90);
-        }
-      });
-    }
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-
-.train-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-
-  width: 100%;
-  height: 100%;
-
-  color: white;
-  z-index: 200;
-
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-
-  text-align: left;
-}
-
-.modal-background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-
-  cursor: pointer;
-
-  background-color: rgba(0, 0, 0, 0.55);
-}
-
-.modal-content {
-  position: relative;
-  overflow-y: scroll;
-
-  width: 95vw;
-  max-height: 95vh;
-  max-height: 95dvh;
-  margin-top: 1em;
-
-  background-color: #1a1a1a;
-  box-shadow: 0 0 15px 10px #0e0e0e;
-}
-
-@include midScreen {
-  .exit {
-    margin: 0.5em;
-
-    img {
-      width: 1.75rem;
-    }
-  }
-}
-</style>

src/mixins/modalTrainMixin.ts

@@ -1,30 +0,0 @@
-import { defineComponent } from 'vue';
-import { useMainStore } from '../store/mainStore';
-import { useTooltipStore } from '../store/tooltipStore';
-import { Train } from '../typings/common';
-
-export default defineComponent({
-  data() {
-    return {
-      store: useMainStore(),
-      tooltipStore: useTooltipStore()
-    };
-  },
-
-  methods: {
-    selectModalTrain(train: Train, target?: EventTarget | null) {
-      this.store.chosenModalTrainId = train.modalId;
-      if (target) this.store.modalLastClickedTarget = target;
-    },
-
-    selectModalTrainById(modalId: string, target?: EventTarget | null) {
-      this.store.chosenModalTrainId = modalId;
-      if (target) this.store.modalLastClickedTarget = target;
-    },
-
-    closeModal() {
-      this.store.chosenModalTrainId = undefined;
-      this.tooltipStore.hide();
-    }
-  }
-});

src/store/mainStore.ts

@@ -50,15 +50,6 @@ export const useMainStore = defineStore('mainStore', {
 
           const timetable = train.timetable;
 
-          // const sceneryNames =
-          //   train.timetable?.sceneries?.map(
-          //     (sceneryHash) =>
-          //       apiStore.activeData?.activeSceneries?.find((st) => st.stationHash === sceneryHash)
-          //         ?.stationName ??
-          //       apiStore.sceneryData.find((sd) => sd.hash === sceneryHash)?.name ??
-          //       sceneryHash
-          //   ) ?? [];
-
           const trainObj = {
             id: train.id,
             modalId: `${train.driverName}${train.trainNo}`, // simplified id for train modal
@@ -219,46 +210,6 @@ export const useMainStore = defineStore('mainStore', {
           });
         });
 
-        // train.timetableData.sceneryNames.forEach((name) => {
-        //   if (
-        //     acc.findIndex((v) => v.name == name && v.region == train.region) != -1 ||
-        //     apiStore.activeData?.activeSceneries?.findIndex(
-        //       (sc) =>
-        //         sc.stationName === name &&
-        //         sc.region == train.region &&
-        //         Date.now() - sc.lastSeen < 1000 * 60 * 2
-        //     ) != -1
-        //   )
-        //     return acc;
-
-        //   acc.push({
-        //     name: name,
-        //     hash: '',
-        //     region: train.region,
-        //     maxUsers: 0,
-        //     currentUsers: 0,
-        //     spawns: [],
-        //     dispatcherName: '',
-        //     dispatcherRate: 0,
-        //     dispatcherId: -1,
-        //     dispatcherExp: -1,
-        //     dispatcherIsSupporter: false,
-        //     dispatcherStatus: Status.ActiveDispatcher.FREE,
-        //     dispatcherTimestamp: -1,
-
-        //     isOnline: false,
-
-        //     stationTrains: [],
-        //     scheduledTrains: [],
-
-        //     scheduledTrainCount: {
-        //       all: 0,
-        //       confirmed: 0,
-        //       unconfirmed: 0
-        //     }
-        //   });
-        // });
-
         return acc;
       }, [] as ActiveScenery[]);
 

src/views/TrainsView.vue

@@ -24,6 +24,7 @@ import { TrainFilter, trainFilters } from '../components/TrainsView/typings';
 import { filteredTrainList } from '../managers/trainFilterManager';
 import TrainStats from '../components/TrainsView/TrainStats.vue';
 import { Train } from '../typings/common';
+import { useRoute, useRouter } from 'vue-router';
 
 export default defineComponent({
   components: {
@@ -55,6 +56,8 @@ export default defineComponent({
   }),
 
   setup() {
+    const router = useRouter();
+
     const store = useMainStore();
     const initTrainFilters = [...trainFilters.map((f) => ({ ...f }))];
 
@@ -88,6 +91,20 @@ export default defineComponent({
         sT.length > 0 || sD.length > 0 || sA.id != 'routeDistance' || areFiltersActive;
     });
 
+    // Backwards compatibility with external links leading to train modal
+    watch(
+      () => store.trainList,
+      (v) => {
+        if (v.length > 0 && router.currentRoute.value.query['trainId']) {
+          const queryTrainId = router.currentRoute.value.query['trainId'];
+          const train = store.trainList.find((t) => t.modalId == queryTrainId.toString());
+
+          if (!train) router.replace('/trains');
+          else router.replace(`/driver?trainId=${train.id}`);
+        }
+      }
+    );
+
     return {
       computedTrains,
       searchedTrain,