refactor: order train picker setup

src/components/OrderTrainPicker.vue

@@ -6,7 +6,7 @@
           name="dispatcher-select"
           id="dispatcher-select"
           v-model="selectedSceneryId"
-          @change="selectOption"
+          @change="selectCheckpointOption"
         >
           <option :value="null" disabled>
             {{ $t('order-train-picker.placeholder-scenery-name') }}
@@ -24,7 +24,7 @@
           name="region-select"
           id="region-select"
           v-model="selectedRegion"
-          @change="selectOption"
+          @change="selectCheckpointOption"
         >
           <option :value="null" disabled>
             {{ $t('order-train-picker.placeholder-region-name') }}
@@ -61,7 +61,8 @@
           type="checkbox"
           name="fill-checkpoint"
           id="fill-checkpoint"
-          v-model="fillCheckpointName"
+          v-model="autofillCheckpointName"
+          @change="onAutofillChange()"
         />
         <span> {{ $t('order-train-picker.autofill-checkpoint-id') }}</span>
       </label>
@@ -82,7 +83,7 @@
           <li
             v-for="train in sceneryTrains"
             :key="train.trainNo + train.driverName"
-            @click="fillOrder(train.trainNo)"
+            @click="fillOrderData(train)"
           >
             <button class="g-button">
               <span
@@ -109,186 +110,182 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
 import { useStore } from '../store/store';
-import {
+
-  currentFormattedDate,
-  currentFormattedHours,
-  currentFormattedMinutes
-} from '../utils/dateUtils';
 import http from '../http';
 import { ISceneryData } from '../types/dataTypes';
 import { API } from '../types/apiTypes';
 import { getRegionNameById } from '../utils/sceneryUtils';
+import { computed, onActivated, onDeactivated, onMounted, ref } from 'vue';
+import StorageManager from '../managers/storageManager';
 
-export default defineComponent({
+const store = useStore();
-  name: 'order-train-picker',
+const regions = ['eu', 'cae', 'usw', 'us', 'ru'];
+const refreshInterval = ref(-1);
 
-  data() {
+let sceneriesData = ref<ISceneryData[] | null>(null);
-    return {
+let activeData = ref<API.ActiveData.Response | null>(null);
-      sceneriesData: undefined as ISceneryData[] | undefined,
-      activeData: undefined as API.ActiveData.Response | undefined,
 
-      selectedSceneryId: null as string | null,
+const selectedSceneryId = ref<string | null>(null);
-      selectedCheckpointName: null as string | null,
+const selectedCheckpointName = ref<string | null>(null);
-      selectedRegion: 'eu',
+const selectedRegion = ref('eu');
 
-      fillCheckpointName: false,
+const autofillCheckpointName = ref(false);
 
-      refreshInterval: -1,
+onMounted(() => {
-      store: useStore(),
+  autofillCheckpointName.value = StorageManager.getBooleanValue('fill-checkpoint');
+  fetchSceneriesData();
+});
 
-      regions: ['eu', 'cae', 'usw', 'us', 'ru']
+onActivated(async () => {
-    };
+  await fetchActiveData();
-  },
+  handleQueries();
 
-  created() {
+  window.clearInterval(refreshInterval.value);
-    this.fillCheckpointName = window.localStorage.getItem('fill-checkpoint') == 'true';
 
-    this.fetchSceneriesData();
+  refreshInterval.value = window.setInterval(() => {
-  },
+    fetchActiveData();
+  }, 25000);
+});
 
-  async activated() {
+onDeactivated(() => {
-    await this.fetchActiveData();
+  window.clearInterval(refreshInterval.value);
-    this.handleQueries();
+});
 
-    this.refreshInterval = window.setInterval(() => {
+const selectedScenery = computed(() => {
-      this.fetchActiveData();
+  if (activeData.value == null) return null;
-    }, 25 * 1000);
-  },
 
-  deactivated() {
+  return (
-    window.clearInterval(this.refreshInterval);
+    activeData.value.activeSceneries?.find(
-  },
+      (scenery) =>
+        selectedSceneryId.value ==
+          `${scenery.stationName}|${scenery.stationHash}|${scenery.dispatcherName}|${scenery.region}` &&
+        selectedRegion.value == scenery.region
+    ) ?? null
+  );
+});
 
-  watch: {
+const filteredSceneries = computed(() => {
-    fillCheckpointName(val: boolean) {
+  return activeData.value?.activeSceneries
-      window.localStorage.setItem('fill-checkpoint', `${val}`);
+    ?.filter((s) => s.isOnline && s.region == selectedRegion.value)
-    }
+    .sort((s1, s2) => s1.stationName.localeCompare(s2.stationName));
-  },
+});
 
-  computed: {
+const checkpointNameList = computed(() => {
-    selectedScenery() {
+  if (!selectedScenery.value) return [];
-      return this.activeData?.activeSceneries?.find(
+
-        (scenery) =>
+  const checkpoints =
-          this.selectedSceneryId ==
+    sceneriesData.value?.find((s) => s.name == selectedScenery.value?.stationName)?.checkpoints ??
-            `${scenery.stationName}|${scenery.stationHash}|${scenery.dispatcherName}|${scenery.region}` &&
+    '';
-          this.selectedRegion == scenery.region
+
+  if (checkpoints.length == 0) return [selectedScenery.value.stationName];
+
+  return checkpoints.split(';');
+});
+
+const sceneryTrains = computed(() => {
+  if (!selectedScenery.value || !activeData.value?.trains) return [];
+
+  const scenery = selectedScenery.value;
+
+  return activeData.value.trains
+    ?.filter(
+      (t) =>
+        (t.currentStationName == scenery.stationName &&
+          t.region == scenery.region &&
+          (t.online || t.lastSeen >= Date.now() - 60000)) ||
+        t.timetable?.path.includes(`${scenery.stationName} ${scenery.stationHash}.sc`)
+    )
+    .sort((t1, t2) => {
+      return (
+        (t2.currentStationName == scenery.stationName ? 1 : -1) -
+          (t1.currentStationName == scenery.stationName ? 1 : -1) ||
+        t1.driverName.localeCompare(t2.driverName)
       );
-    },
+    });
+});
 
-    filteredSceneries() {
+async function fetchSceneriesData() {
-      return this.activeData?.activeSceneries
+  const data = (await http.get<ISceneryData[]>('api/getSceneries')).data;
-        ?.filter((s) => s.isOnline && s.region == this.selectedRegion)
-        .sort((s1, s2) => s1.stationName.localeCompare(s2.stationName));
-    },
 
-    checkpointNameList() {
+  sceneriesData.value = data ?? null;
-      if (!this.selectedScenery) return [];
+}
 
-      const checkpoints =
+async function fetchActiveData() {
-        this.sceneriesData?.find((s) => s.name == this.selectedScenery?.stationName)?.checkpoints ??
+  const data = (await http.get<API.ActiveData.Response>('api/getActiveData')).data;
-        '';
 
-      if (checkpoints.length == 0) return [this.selectedScenery.stationName];
+  activeData.value = data ?? null;
+}
 
-      return checkpoints.split(';');
+function selectCheckpointOption() {
-    },
+  selectedCheckpointName.value =
+    checkpointNameList.value.length == 0 ? null : checkpointNameList.value[0];
+}
 
-    sceneryTrains() {
+function onAutofillChange() {
-      if (!this.selectedScenery || !this.activeData?.trains) return [];
+  StorageManager.setBooleanValue('fill-checkpoint', autofillCheckpointName.value);
+}
 
-      const scenery = this.selectedScenery;
+function fillOrderData(train: API.ActiveTrains.Data) {
+  if (!selectedScenery.value) return;
 
-      return this.activeData.trains
+  const scenery = selectedScenery.value;
-        ?.filter(
-          (t) =>
-            (t.currentStationName == scenery.stationName &&
-              t.region == scenery.region &&
-              (t.online || t.lastSeen >= Date.now() - 60000)) ||
-            t.timetable?.path.includes(`${scenery.stationName} ${scenery.stationHash}.sc`)
-        )
-        .sort((t1, t2) => {
-          return (
-            (t2.currentStationName == scenery.stationName ? 1 : -1) -
-              (t1.currentStationName == scenery.stationName ? 1 : -1) ||
-            t1.driverName.localeCompare(t2.driverName)
-          );
-        });
-    }
-  },
 
-  methods: {
+  store.orderData.header.A = train.trainNo.toString();
-    getRegionNameById,
+  store.orderData.header.C = train.currentStationName;
+  store.orderData.header.D = scenery.stationName;
 
-    async fetchSceneriesData() {
+  store.orderData.footer.V = train.driverName;
-      const data: ISceneryData[] = (await http.get<ISceneryData[]>('api/getSceneries')).data;
+  store.orderData.footer.W = scenery.dispatcherName;
+  store.orderData.footer.Z = scenery.stationName + Date.now().toString();
 
-      this.sceneriesData = data;
+  // store.orderData.header
-    },
 
-    async fetchActiveData() {
+  // const chosenOrder = store[this.store.chosenOrderType];
-      const data: API.ActiveData.Response = await (await http.get('api/getActiveData')).data;
+  // chosenOrder.header.trainNo = trainNo.toString();
+  // chosenOrder.header.date = currentFormattedDate();
 
-      this.activeData = data;
+  // store.orderFooter.dispatcherName = selectedScenery.dispatcherName;
-    },
+  // store.orderFooter.stationName =
+  //   selectedCheckpointName?.split(',')[0] || selectedScenery.stationName;
+  // store.orderFooter.hour = currentFormattedHours();
+  // store.orderFooter.minutes = currentFormattedMinutes();
 
-    selectOption() {
+  if (autofillCheckpointName.value) {
-      this.selectedCheckpointName =
+    const sceneryAbbrev = sceneriesData.value?.find(
-        this.checkpointNameList.length == 0 ? null : this.checkpointNameList[0];
+      ({ name }) => name === selectedScenery!.value?.stationName
-    },
+    )?.abbr;
 
-    fillOrder(trainNo: number) {
+    // store.orderFooter.checkpointName = sceneryAbbrev || store.orderFooter.stationName.slice(0, 2);
-      if (!this.selectedScenery) return;
+  }
 
-      const chosenOrder = this.store[this.store.chosenOrderType];
+  store.panelMode = 'OrderMessage';
-      chosenOrder.header.trainNo = trainNo.toString();
+}
-      chosenOrder.header.date = currentFormattedDate();
 
-      this.store.orderFooter.dispatcherName = this.selectedScenery.dispatcherName;
+function handleQueries() {
-      this.store.orderFooter.stationName =
+  const query = new URLSearchParams(window.location.search);
-        this.selectedCheckpointName?.split(',')[0] || this.selectedScenery.stationName;
-      this.store.orderFooter.hour = currentFormattedHours();
-      this.store.orderFooter.minutes = currentFormattedMinutes();
 
-      if (this.fillCheckpointName) {
+  const id = query.get('sceneryId');
-        const sceneryAbbrev = this.sceneriesData?.find(
-          ({ name }) => name === this.selectedScenery!.stationName
-        )?.abbr;
 
-        this.store.orderFooter.checkpointName =
+  if (id) {
-          sceneryAbbrev || this.store.orderFooter.stationName.slice(0, 2);
+    const [sceneryName, sceneryRegion] = id.split('|');
-      }
 
-      this.store.panelMode = 'OrderMessage';
+    selectedRegion.value = sceneryRegion;
-    },
 
-    handleQueries() {
+    const queryScenery = activeData.value?.activeSceneries?.find(
-      const query = new URLSearchParams(window.location.search);
+      (sc) => sc.stationName == sceneryName && sc.region == sceneryRegion && sc.isOnline
+    );
 
-      const id = query.get('sceneryId');
+    if (queryScenery) {
+      selectedSceneryId.value = `${queryScenery.stationName}|${queryScenery.stationHash}|${queryScenery.dispatcherName}|${queryScenery.region}`;
 
-      if (id) {
+      selectCheckpointOption();
-        const [sceneryName, sceneryRegion] = id.split('|');
 
-        this.selectedRegion = sceneryRegion;
+      store.panelMode = 'OrderTrainPicker';
-
-        const queryScenery = this.activeData?.activeSceneries?.find(
-          (sc) => sc.stationName == sceneryName && sc.region == sceneryRegion && sc.isOnline
-        );
-
-        if (queryScenery) {
-          this.selectedSceneryId = `${queryScenery.stationName}|${queryScenery.stationHash}|${queryScenery.dispatcherName}|${queryScenery.region}`;
-
-          this.selectOption();
-
-          this.store.panelMode = 'OrderTrainPicker';
-        }
-      }
     }
   }
-});
+}
 </script>
 
 <style lang="scss" scoped>