feat: router links embeded into timetable stop names

src/components/SceneryView/SceneryTimetable.vue

@@ -214,6 +214,12 @@ export default defineComponent({
     this.loadSelectedOption();
   },
 
+  watch: {
+    station() {
+      this.loadSelectedOption();
+    }
+  },
+
   setup(props) {
     const route = useRoute();
     const currentURL = computed(() => `${location.origin}${route.fullPath}`);

src/components/TrainsView/StopLabel.vue

@@ -3,7 +3,9 @@
     class="stop-label"
     :data-minor="stop.isSBL || (stop.nameRaw.endsWith(', po.') && !stop.duration)"
   >
-    <span class="name" v-html="stop.nameHtml"></span>
+    <router-link :to="`/scenery?station=${stop.sceneryName}`" @click="closeModal">
+      <span class="name" v-html="stop.nameHtml"></span>
+    </router-link>
 
     <span
       v-if="stop.position != 'begin'"
@@ -67,9 +69,10 @@
 import { PropType, defineComponent } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
 import { TrainScheduleStop } from './TrainSchedule.vue';
+import modalTrainMixin from '../../mixins/modalTrainMixin';
 
 export default defineComponent({
-  mixins: [dateMixin],
+  mixins: [dateMixin, modalTrainMixin],
 
   props: {
     stop: {

src/components/TrainsView/TrainSchedule.vue

@@ -165,20 +165,18 @@ export default defineComponent({
 
   computed: {
     scheduleStops(): TrainScheduleStop[] {
-      let currentSceneryIndex = 0;
+      if (!this.train.timetableData) return [];
+
+      const { timetablePath } = this.train.timetableData;
+      let currentPathIndex = 0;
 
       return (
         this.train.timetableData?.followingStops.map((stop, i, arr) => {
           const isExternal =
-            i > 0 &&
-            stop.arrivalLine != null &&
-            (stop.arrivalLine != arr[i - 1].departureLine ||
-              (stop.arrivalLine == arr[i - 1].departureLine &&
-                !/-|_|(^it\d+)|(^sbl)/gi.test(stop.arrivalLine)));
+            i < arr.length - 1 &&
+            stop.departureLine === timetablePath[currentPathIndex].departureRouteExt;
 
-          if (isExternal) currentSceneryIndex++;
-
-          const sceneryName = this.train.timetableData!.sceneryNames[currentSceneryIndex];
+          const sceneryName = timetablePath[currentPathIndex].stationName;
           const sceneryInfo = this.apiStore.sceneryData.find((st) => st.name == sceneryName);
 
           const arrivalLineInfo = sceneryInfo?.routesInfo.find(
@@ -189,6 +187,8 @@ export default defineComponent({
             (r) => r.routeName == stop.departureLine
           );
 
+          if (isExternal) currentPathIndex++;
+
           return {
             nameHtml: stop.stopName,
             nameRaw: stop.stopNameRAW,

src/store/mainStore.ts

@@ -50,14 +50,14 @@ 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 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,
@@ -96,7 +96,7 @@ export const useMainStore = defineStore('mainStore', {
                   followingStops: timetable.stopList,
                   routeDistance: timetable.stopList[timetable.stopList.length - 1].stopDistance,
                   sceneries: timetable.sceneries,
-                  sceneryNames: sceneryNames.reverse(),
+                  // sceneryNames: sceneryNames.reverse(),
                   timetablePath: timetable.path.split(';').map((pathElementString) => {
                     const [arrival, station, departure] = pathElementString.split(',');
 
@@ -169,12 +169,15 @@ export const useMainStore = defineStore('mainStore', {
       const offlineActiveSceneries = this.trainList.reduce((acc, train) => {
         if (!train.timetableData) return acc;
 
-        train.timetableData.sceneryNames.forEach((name) => {
+        train.timetableData.timetablePath.forEach((p) => {
           if (
-            acc.findIndex((v) => v.name == name && v.region == train.region) != -1 ||
+            acc.findIndex(
+              (v) =>
+                (v.name == p.stationName || v.hash == p.stationHash) && v.region == train.region
+            ) != -1 ||
             apiStore.activeData?.activeSceneries?.findIndex(
               (sc) =>
-                sc.stationName === name &&
+                (sc.stationName == p.stationName || sc.stationHash == p.stationHash) &&
                 sc.region == train.region &&
                 Date.now() - sc.lastSeen < 1000 * 60 * 2
             ) != -1
@@ -182,7 +185,7 @@ export const useMainStore = defineStore('mainStore', {
             return acc;
 
           acc.push({
-            name: name,
+            name: p.stationName,
             hash: '',
             region: train.region,
             maxUsers: 0,
@@ -209,6 +212,46 @@ 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/typings/common.ts

@@ -79,7 +79,6 @@ export interface Train {
     SKR: boolean;
     routeDistance: number;
     sceneries: string[];
-    sceneryNames: string[];
     timetablePath: TimetablePathElement[];
   };
 }

src/views/SceneryView.vue

@@ -13,6 +13,7 @@
           :station="stationInfo"
           :onlineScenery="onlineSceneryInfo"
         />
+        
         <SceneryInfo :station="stationInfo" :onlineScenery="onlineSceneryInfo" />
       </div>