Train picker: uzupełnianie danych

src/components/OrderTrainPicker.vue

@@ -29,7 +29,7 @@
 
         <p>Gracze bez rozkładu jazdy</p>
         <ul class="train-list">
-          <li v-for="train in sceneryTrains">
+          <li v-for="train in sceneryTrains" @click="fillOrder(train.trainNo)">
             <b>{{ train.trainNo }} | {{ train.driverName }}</b>
           </li>
 
@@ -38,7 +38,7 @@
 
         <p>Aktywne rozkłady jazdy</p>
         <ul class="train-list">
-          <li v-for="train in sceneryScheduledTrains">
+          <li v-for="train in sceneryScheduledTrains" @click="fillOrder(train.trainNo)">
             <b>{{ train.trainNo }} | {{ train.driverName }}</b>
           </li>
 
@@ -54,9 +54,12 @@ import { defineComponent } from 'vue';
 import axios from 'axios';
 import { ApiSWDR, ApiStacjownik } from '../types/apiTypes';
 import { ISceneryData } from '../types/dataTypes';
+import { useStore } from '../store/store';
+import { currentFormattedDate } from '../utils/dateUtils';
 
 export default defineComponent({
   name: 'order-train-picker',
+
   data() {
     return {
       sceneriesOnline: [] as ISceneryData[],
@@ -64,12 +67,22 @@ export default defineComponent({
 
       selectedSceneryName: null as string | null,
       selectedDispatcherName: null as string | null,
+
+      refreshInterval: -1,
+      store: useStore(),
     };
   },
 
-  mounted() {
+  activated() {
-    this.fetchSceneriesOnline();
+    this.fetchData();
-    this.fetchTrainsOnline();
+
+    this.refreshInterval = window.setInterval(() => {
+      this.fetchData();
+    }, 5 * 1000);
+  },
+
+  deactivated() {
+    window.clearInterval(this.refreshInterval);
   },
 
   watch: {
@@ -115,6 +128,11 @@ export default defineComponent({
   },
 
   methods: {
+    async fetchData() {
+      this.fetchSceneriesOnline();
+      this.fetchTrainsOnline();
+    },
+
     async fetchSceneriesOnline() {
       const data: ApiSWDR.IStationsOnline = await (
         await axios.get(`${import.meta.env['VITE_APP_SWDR_URL']}/?method=getStationsOnline`)
@@ -134,6 +152,19 @@ export default defineComponent({
 
       this.trainsOnline = data;
     },
+
+    fillOrder(trainNo: number) {
+      if(!this.selectedDispatcherName || !this.selectedSceneryName) return;
+
+      const chosenOrder = this.store[this.store.chosenOrderType];
+      chosenOrder.header.trainNo = trainNo.toString();
+      chosenOrder.header.date = currentFormattedDate();
+
+      this.store.orderFooter.dispatcherName = this.selectedDispatcherName;
+      this.store.orderFooter.stationName = this.selectedSceneryName;
+
+      this.store.orderMode = 'OrderMessage';
+    },
   },
 });
 </script>

src/store/store.ts

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia';
 import { IOrderN, IOrderO, IOrderS, TOrder } from '../types/orderTypes';
+import { currentFormattedDate } from '../utils/dateUtils';
 
 export const useStore = defineStore('store', {
   state: () => {
@@ -27,7 +28,7 @@ export const useStore = defineStore('store', {
         header: {
           orderNo: '1',
           trainNo: '',
-          date: new Date().toLocaleDateString('pl-PL', { day: 'numeric', month: 'numeric', year: 'numeric' }) + "r.",
+          date: currentFormattedDate(),
         },
 
         orderList: [
@@ -79,7 +80,7 @@ export const useStore = defineStore('store', {
         header: {
           orderNo: '1',
           trainNo: '',
-          date: new Date().toLocaleDateString('pl-PL', { day: 'numeric', month: 'numeric', year: 'numeric' }) + "r.",
+          date: currentFormattedDate(),
         },
 
         rows: [
@@ -141,7 +142,7 @@ export const useStore = defineStore('store', {
           orderNo: '1',
           trainNo: '',
           for: 'pociągu',
-          date: new Date().toLocaleDateString('pl-PL', { day: 'numeric', month: 'numeric', year: 'numeric' }) + "r.",
+          date: currentFormattedDate(),
         },
 
         rows: [
@@ -183,5 +184,3 @@ export const useStore = defineStore('store', {
   },
 });
 
-
-

src/utils/dateUtils.ts

@@ -0,0 +1,3 @@
+export function currentFormattedDate() {
+    return new Date().toLocaleDateString('pl-PL', { day: 'numeric', month: 'numeric', year: 'numeric' }) + 'r.';
+}