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,99 +110,86 @@
   </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(
-  },
-
-  watch: {
-    fillCheckpointName(val: boolean) {
-      window.localStorage.setItem('fill-checkpoint', `${val}`);
-    }
-  },
-
-  computed: {
-    selectedScenery() {
-      return this.activeData?.activeSceneries?.find(
       (scenery) =>
-          this.selectedSceneryId ==
+        selectedSceneryId.value ==
           `${scenery.stationName}|${scenery.stationHash}|${scenery.dispatcherName}|${scenery.region}` &&
-          this.selectedRegion == scenery.region
+        selectedRegion.value == scenery.region
+    ) ?? null
   );
-    },
+});
 
-    filteredSceneries() {
+const filteredSceneries = computed(() => {
-      return this.activeData?.activeSceneries
+  return activeData.value?.activeSceneries
-        ?.filter((s) => s.isOnline && s.region == this.selectedRegion)
+    ?.filter((s) => s.isOnline && s.region == selectedRegion.value)
     .sort((s1, s2) => s1.stationName.localeCompare(s2.stationName));
-    },
+});
 
-    checkpointNameList() {
+const checkpointNameList = computed(() => {
-      if (!this.selectedScenery) return [];
+  if (!selectedScenery.value) return [];
 
   const checkpoints =
-        this.sceneriesData?.find((s) => s.name == this.selectedScenery?.stationName)?.checkpoints ??
+    sceneriesData.value?.find((s) => s.name == selectedScenery.value?.stationName)?.checkpoints ??
     '';
 
-      if (checkpoints.length == 0) return [this.selectedScenery.stationName];
+  if (checkpoints.length == 0) return [selectedScenery.value.stationName];
 
   return checkpoints.split(';');
-    },
+});
 
-    sceneryTrains() {
+const sceneryTrains = computed(() => {
-      if (!this.selectedScenery || !this.activeData?.trains) return [];
+  if (!selectedScenery.value || !activeData.value?.trains) return [];
 
-      const scenery = this.selectedScenery;
+  const scenery = selectedScenery.value;
 
-      return this.activeData.trains
+  return activeData.value.trains
     ?.filter(
       (t) =>
         (t.currentStationName == scenery.stationName &&
@@ -216,55 +204,66 @@ export default defineComponent({
         t1.driverName.localeCompare(t2.driverName)
       );
     });
+});
+
+async function fetchSceneriesData() {
+  const data = (await http.get<ISceneryData[]>('api/getSceneries')).data;
+
+  sceneriesData.value = data ?? null;
 }
-  },
 
-  methods: {
+async function fetchActiveData() {
-    getRegionNameById,
+  const data = (await http.get<API.ActiveData.Response>('api/getActiveData')).data;
 
-    async fetchSceneriesData() {
+  activeData.value = data ?? null;
-      const data: ISceneryData[] = (await http.get<ISceneryData[]>('api/getSceneries')).data;
+}
 
-      this.sceneriesData = data;
+function selectCheckpointOption() {
-    },
+  selectedCheckpointName.value =
+    checkpointNameList.value.length == 0 ? null : checkpointNameList.value[0];
+}
 
-    async fetchActiveData() {
+function onAutofillChange() {
-      const data: API.ActiveData.Response = await (await http.get('api/getActiveData')).data;
+  StorageManager.setBooleanValue('fill-checkpoint', autofillCheckpointName.value);
+}
 
-      this.activeData = data;
+function fillOrderData(train: API.ActiveTrains.Data) {
-    },
+  if (!selectedScenery.value) return;
 
-    selectOption() {
+  const scenery = selectedScenery.value;
-      this.selectedCheckpointName =
-        this.checkpointNameList.length == 0 ? null : this.checkpointNameList[0];
-    },
 
-    fillOrder(trainNo: number) {
+  store.orderData.header.A = train.trainNo.toString();
-      if (!this.selectedScenery) return;
+  store.orderData.header.C = train.currentStationName;
+  store.orderData.header.D = scenery.stationName;
 
-      const chosenOrder = this.store[this.store.chosenOrderType];
+  store.orderData.footer.V = train.driverName;
-      chosenOrder.header.trainNo = trainNo.toString();
+  store.orderData.footer.W = scenery.dispatcherName;
-      chosenOrder.header.date = currentFormattedDate();
+  store.orderData.footer.Z = scenery.stationName + Date.now().toString();
 
-      this.store.orderFooter.dispatcherName = this.selectedScenery.dispatcherName;
+  // store.orderData.header
-      this.store.orderFooter.stationName =
-        this.selectedCheckpointName?.split(',')[0] || this.selectedScenery.stationName;
-      this.store.orderFooter.hour = currentFormattedHours();
-      this.store.orderFooter.minutes = currentFormattedMinutes();
 
-      if (this.fillCheckpointName) {
+  // const chosenOrder = store[this.store.chosenOrderType];
-        const sceneryAbbrev = this.sceneriesData?.find(
+  // chosenOrder.header.trainNo = trainNo.toString();
-          ({ name }) => name === this.selectedScenery!.stationName
+  // chosenOrder.header.date = currentFormattedDate();
+
+  // store.orderFooter.dispatcherName = selectedScenery.dispatcherName;
+  // store.orderFooter.stationName =
+  //   selectedCheckpointName?.split(',')[0] || selectedScenery.stationName;
+  // store.orderFooter.hour = currentFormattedHours();
+  // store.orderFooter.minutes = currentFormattedMinutes();
+
+  if (autofillCheckpointName.value) {
+    const sceneryAbbrev = sceneriesData.value?.find(
+      ({ name }) => name === selectedScenery!.value?.stationName
     )?.abbr;
 
-        this.store.orderFooter.checkpointName =
+    // store.orderFooter.checkpointName = sceneryAbbrev || store.orderFooter.stationName.slice(0, 2);
-          sceneryAbbrev || this.store.orderFooter.stationName.slice(0, 2);
   }
 
-      this.store.panelMode = 'OrderMessage';
+  store.panelMode = 'OrderMessage';
-    },
+}
 
-    handleQueries() {
+function handleQueries() {
   const query = new URLSearchParams(window.location.search);
 
   const id = query.get('sceneryId');
@@ -272,23 +271,21 @@ export default defineComponent({
   if (id) {
     const [sceneryName, sceneryRegion] = id.split('|');
 
-        this.selectedRegion = sceneryRegion;
+    selectedRegion.value = sceneryRegion;
 
-        const queryScenery = this.activeData?.activeSceneries?.find(
+    const queryScenery = activeData.value?.activeSceneries?.find(
       (sc) => sc.stationName == sceneryName && sc.region == sceneryRegion && sc.isOnline
     );
 
     if (queryScenery) {
-          this.selectedSceneryId = `${queryScenery.stationName}|${queryScenery.stationHash}|${queryScenery.dispatcherName}|${queryScenery.region}`;
+      selectedSceneryId.value = `${queryScenery.stationName}|${queryScenery.stationHash}|${queryScenery.dispatcherName}|${queryScenery.region}`;
 
-          this.selectOption();
+      selectCheckpointOption();
 
-          this.store.panelMode = 'OrderTrainPicker';
+      store.panelMode = 'OrderTrainPicker';
     }
   }
 }
-  }
-});
 </script>
 
 <style lang="scss" scoped>