feat: loading timetable from url params

src/App.vue

@@ -19,13 +19,26 @@ const apiStore = useApiStore();
 const globalStore = useGlobalStore();
 const i18n = useI18n();
 
-onMounted(() => {
+onMounted(async () => {
-  apiStore.setupAPIData();
-
   setupLocale();
   setupDarkMode();
   loadStorageTimetables();
   setupAfterPrintClose();
+
+  await apiStore.setupAPIData();
+
+  const query = new URLSearchParams(window.location.search);
+
+  if (query.has('id')) {
+    const id = query.get('id')!;
+
+    const queryTrain = apiStore.activeData?.trains.find((train) => train.id == id);
+
+    if (queryTrain) {
+      globalStore.selectedTrainId = id;
+      globalStore.selectedActiveTrain = queryTrain;
+    }
+  }
 });
 
 function loadStorageTimetables() {

src/components/Timetable/TimetableSelect.vue

@@ -16,7 +16,7 @@
       id="trains-select"
       class="bg-zinc-800 p-1 rounded-md print:hidden w-full"
       :disabled="apiStore.activeDataStatus != DataStatus.SUCCESS"
-      v-model="selectedTrainId"
+      v-model="globalStore.selectedTrainId"
       v-if="globalStore.viewMode == 'active'"
       @change="selectTrain"
     >
@@ -76,9 +76,6 @@ import type { TimetableData } from '../../types/common.types';
 const apiStore = useApiStore();
 const globalStore = useGlobalStore();
 
-// Variables & refs
-let selectedTrainId = ref(null) as Ref<string | null>;
-
 // Computed
 const isTimetableSaved = computed(() => {
   if (!globalStore.currentTimetableData) return false;
@@ -90,7 +87,7 @@ const isTimetableSaved = computed(() => {
 function selectTrain() {
   if (!apiStore.activeData) return;
 
-  globalStore.selectedActiveTrain = globalStore.activeTimetableTrains.find((train) => train.id == selectedTrainId.value) ?? null;
+  globalStore.selectedActiveTrain = globalStore.activeTimetableTrains.find((train) => train.id == globalStore.selectedTrainId) ?? null;
 
   if (globalStore.selectedActiveTrain != null) {
     globalStore.generatedDate = new Date();

src/stores/api.store.ts

@@ -41,7 +41,8 @@ export const useApiStore = defineStore('api', {
       });
 
       this.fetchSceneriesData();
-      this.fetchActiveData();
+      await this.fetchActiveData();
+
 
       setInterval(() => {
         this.fetchActiveData();

src/stores/global.store.ts

@@ -8,6 +8,7 @@ export const useGlobalStore = defineStore('global', {
     darkMode: false,
     viewMode: 'active' as ViewMode,
 
+    selectedTrainId: null as string | null,
     selectedActiveTrain: null as ActiveTrain | null,
     selectedStorageTimetable: null as TimetableData | null,
     storageTimetables: {} as Record<number, TimetableData>,