Migracja na Vite; poprawki funkcjonalności

src/App.vue

@@ -2,7 +2,7 @@
   <div class="scenery-selector" v-if="!selectedStation">
     <select name="scenery" id="select-scenery" v-model="selectedStation">
       <option :value="null" disabled>Wybierz scenerię</option>
-      <option v-for="s in onlineStations" :key="s" :value="s">{{ s.stationName }}</option>
+      <option v-for="s in onlineStations" :value="s">{{ s.stationName }}</option>
     </select>
   </div>
 
@@ -13,9 +13,9 @@
 import { provide, Ref, ref } from 'vue';
 import { defineComponent } from '@vue/runtime-core';
 import PragotronVue from './components/Pragotron.vue';
-
-import { StationResponse } from '@/interfaces/StationAPI';
-import StationData from '@/interfaces/StationData';
+import IStationData from './types/IStationData';
+import { ISceneryResponse } from './types/ISceneryReponse';
+import { IOnlineStationsResponse } from './types/IOnlineStationsResponse';
 
 export default defineComponent({
   components: {
@@ -23,13 +23,13 @@ export default defineComponent({
   },
 
   setup() {
-    const mockStation: StationData = {
-      stationName: 'Lisków',
+    const mockStation: IStationData = {
+      stationName: 'Czermin',
       nameAbbreviation: '',
       stationCheckpoints: [],
     };
 
-    const selectedStation = ref(mockStation) as Ref<null | StationData>;
+    const selectedStation = ref(mockStation) as Ref<null | IStationData>;
 
     provide('selectedStation', selectedStation);
 
@@ -39,40 +39,21 @@ export default defineComponent({
   },
 
   data: () => ({
-    onlineStations: [] as StationData[],
+    onlineStations: [] as IStationData[],
   }),
 
   async mounted() {
-    /*
-      0: "LCS Żywiec"
-      1: "https://td2.info.pl/scenerie/lcs-zywiec/"
-      2: "97, 139"
-      3: null
-      4: "10"
-      5: "NIE"
-      6: "współczesna"
-      7: "SCS"
-      8: "" - sbl
-      9: "" - blokady
-      10: 3
-      11: 0
-      12: 0
-      13: 0
-      14: "Węgierska Górka;Żywiec;Łodygowice;Wilkowice Bystra;BB Leszczyny;BB Lipnik, podg."
-      15: true
-      16: false
-      17: false
-    */
-
-    const stationDataArray: any[][] = await (await fetch('https://spythere.github.io/api/stationData.json')).json();
+    const stationDataArray: ISceneryResponse[] = await (
+      await fetch('https://spythere.github.io/api/stationData.json')
+    ).json();
 
     const stationDataJSON = stationDataArray.map((stationData) => ({
-      stationName: stationData[0] as string,
-      stationCheckpoints: stationData[14] ? (stationData[14] as string).split(';') : [],
+      stationName: stationData.name,
+      stationCheckpoints: stationData.checkpoints?.split(';') || [],
       nameAbbreviation: '',
     }));
 
-    const stationsAPIResponse: StationResponse = await (
+    const stationsAPIResponse: IOnlineStationsResponse = await (
       await fetch('https://api.td2.info.pl:9640/?method=getStationsOnline')
     ).json();
 
@@ -92,7 +73,7 @@ export default defineComponent({
           });
 
         return acc;
-      }, [] as StationData[])
+      }, [] as IStationData[])
       .sort((s1, s2) => (s1.stationName > s2.stationName ? 1 : -1));
   },
 });
@@ -141,3 +122,4 @@ option {
   }
 }
 </style>
+

src/components/Pragotron.vue

@@ -87,35 +87,16 @@
 
 import { defineComponent, inject, reactive, Ref } from 'vue';
 
-import stationAbbrevsJSON from '@/data/stationAbbrevs.json';
-import routeValues from '@/data/routeValues.json';
+import stationAbbrevsJSON from '../data/stationAbbrevs.json';
+import routeValues from '../data/routeValues.json';
 
-import { TrainResponse, TrainInfo } from '@/interfaces/TrainAPI';
-import { TimetableResponse, TimetableInfo, TimetableStopInfo } from '@/interfaces/TimetableAPI';
-import StationData from '@/interfaces/StationData';
+import { IDeparture } from '../types/IDeparture';
+import StationData from '../types/IStationData';
+import { ITimetableStop, ITrainResponse } from '../types/ITrainResponse';
 
 const stationAbbrevs: { [key: string]: string } = stationAbbrevsJSON;
 
-interface DepartureInfo {
-  timetableId: number;
-
-  routeTo: string;
-  routeVia: string;
-
-  trainNumber: string;
-
-  departureDate: Date;
-  departureDigits: string[];
-
-  delayMinutes: number;
-
-  tableValues: {
-    routeTo: string;
-    routeVia: string;
-  };
-}
-
-const departureInfoEmptyObj: DepartureInfo = {
+const departureInfoEmptyObj: IDeparture = {
   timetableId: -1,
 
   routeTo: '',
@@ -126,6 +107,9 @@ const departureInfoEmptyObj: DepartureInfo = {
   departureDate: new Date(0),
   departureDigits: [],
 
+  arrivalTimestamp: 0,
+  departureTimestamp: 0,
+
   delayMinutes: 0,
 
   tableValues: reactive({
@@ -142,7 +126,7 @@ export default defineComponent({
 
     lastRefreshTime: 0,
 
-    departureList: new Array(7).fill(0).map(() => ({ ...departureInfoEmptyObj })) as DepartureInfo[],
+    departureList: new Array(7).fill(0).map(() => ({ ...departureInfoEmptyObj })) as IDeparture[],
     departureRoutes: [''],
 
     currentRouteIndex: 0,
@@ -163,54 +147,58 @@ export default defineComponent({
       return (name in stationAbbrevs ? stationAbbrevs[name] : name).toUpperCase();
     },
 
-    // d = 0 -> time = time
-    // d = time -> time2 = time2-time
-    updateTableRows(time: number) {
+    update(time: number) {
       if (time >= this.lastRefreshTime + 125) {
-        this.departureList.forEach((dep, i) => {
-          if (dep.tableValues.routeTo.toLowerCase() != dep.routeTo.toLowerCase()) {
-            dep.tableValues.routeTo = this.departureRoutes[(this.currentRouteIndex + i) % this.departureRoutes.length];
-          }
-
-          if (dep.tableValues.routeVia.toLowerCase() != dep.routeVia.toLowerCase()) {
-            dep.tableValues.routeVia = this.departureRoutes[(this.currentRouteIndex + i + 1) % this.departureRoutes.length];
-          }
-        });
+        this.updateTableRows();
 
         this.currentRouteIndex = (this.currentRouteIndex + 1) % this.departureRoutes.length;
         this.lastRefreshTime = time;
       }
-
-      requestAnimationFrame(this.updateTableRows);
+      requestAnimationFrame(this.update);
     },
 
-    fillTable(departureUpdateList: DepartureInfo[] = []) {
-      for (let i = 0; i < 7; i++) {
+    // d = 0 -> time = time
+    // d = time -> time2 = time2-time
+    updateTableRows() {
+      this.departureList.forEach((dep, i) => {
+        if (dep.tableValues.routeTo.toLowerCase() != dep.routeTo.toLowerCase()) {
+          dep.tableValues.routeTo = this.departureRoutes[(this.currentRouteIndex + i) % this.departureRoutes.length];
+        }
+
+        if (dep.tableValues.routeVia.toLowerCase() != dep.routeVia.toLowerCase()) {
+          dep.tableValues.routeVia =
+            this.departureRoutes[(this.currentRouteIndex + i + 1) % this.departureRoutes.length];
+        }
+      });
+    },
+
+    fillTable(departureUpdateList: IDeparture[] = []) {
+      for (let i = 0; i < this.departureList.length; i++) {
         if (i <= departureUpdateList.length - 1) {
           const updateInfo = departureUpdateList[i];
           const existingInfo = this.departureList[i];
 
           // if (updateInfo.delayMinutes != existingInfo.delayMinutes) {
-          //   this.departureList[i].delayMinutes = updateInfo.delayMinutes;
+          //   this.sortedDepartureList[i].delayMinutes = updateInfo.delayMinutes;
           //   continue;
           // }
 
           // // Podmień jeśli
           // if (updateInfo.timetableId != existingInfo.timetableId) {
-          //   this.departureList[i] = updateInfo;
+          //   this.sortedDepartureList[i] = updateInfo;
           // }
-          
-          this.departureList[i] = updateInfo;
+
+          this.departureList[i] = { ...updateInfo };
           this.departureList[i].tableValues.routeTo = existingInfo.routeTo;
           this.departureList[i].tableValues.routeVia = existingInfo.routeVia;
-          
         } else {
           this.departureList[i] = departureInfoEmptyObj;
         }
       }
 
-      console.log(this.departureList);
+      console.log(departureUpdateList);
     },
+
     shuffleRoutes() {
       for (let i = 0; i < 25; i++) {
         const randIndex = Math.floor(Math.random() * routeValues.length);
@@ -223,96 +211,88 @@ export default defineComponent({
     },
 
     async fetchDepartureList() {
-      const trainsAPIResponse: TrainResponse = await (
-        await fetch('https://api.td2.info.pl:9640/?method=getTrainsOnline')
+      const trainsAPIResponse: ITrainResponse[] = await (
+        await fetch(`${import.meta.env.VITE_STACJOWNIK_API_URL}/api/getActiveTrainList`)
       ).json();
 
-      const departureList = (
-        await trainsAPIResponse.message.reduce(async (acc: Promise<DepartureInfo[]>, train: TrainInfo) => {
-          const timetableAPIResponse: TimetableResponse = await (
-            await fetch(`https://api.td2.info.pl:9640/?method=readFromSWDR&value=getTimetable%3B${train.trainNo}%3Beu`)
-          ).json();
+      if (!trainsAPIResponse) return;
 
-          const timetable: TimetableInfo = timetableAPIResponse.message;
+      const updatedDepartureList = trainsAPIResponse.reduce((list, train) => {
+        if (!train.timetable) return list;
 
-          if (!timetable.trainInfo) return acc;
-          if (!timetable.stopPoints) return acc;
+        const timetable = train.timetable;
 
-          const stopInfo: TimetableStopInfo | undefined = timetable.stopPoints.find(
-            (sp) => sp.pointNameRAW.toLowerCase() == this.selectedStation.stationName.toLowerCase()
-          );
+        const stopInfo: ITimetableStop | undefined = timetable.stopList.find(
+          (sp) => sp.stopNameRAW.toLowerCase() == this.selectedStation.stationName.toLowerCase()
+        );
 
-          if (!stopInfo) return acc;
-          if (!stopInfo.departureLine || !stopInfo.departureTime) return acc;
-          if (stopInfo.confirmed == 1) return acc;
+        if (!stopInfo || stopInfo.confirmed) return list;
 
-          const stopInfoIndex = timetable.stopPoints.indexOf(stopInfo);
-          const { timetableId, trainNo, route, trainCategoryCode } = timetable.trainInfo;
-          const { departureTime, departureDelay } = stopInfo;
+        const stopInfoIndex = timetable.stopList.indexOf(stopInfo);
+        const { departureTimestamp, departureDelay, arrivalTimestamp, departureLine } = stopInfo;
 
-          const routeVia =
-            timetable.stopPoints.find((stop, i) => {
-              if (
-                i > stopInfoIndex &&
-                i != (timetable.stopPoints || []).length - 1 &&
-                stop.pointName.includes('strong') &&
-                stop.pointStopTime &&
-                stop.pointStopTime > 0
-              )
-                return true;
+        const routeVia =
+          timetable.stopList.find((stop, i) => {
+            return (
+              i > stopInfoIndex &&
+              // i < timetable.stopList.length - 1,
+              stop.stopName.includes('strong') &&
+              stop.stopTime &&
+              stop.stopTime > 0
+            );
+          })?.stopNameRAW || '';
 
-              return false;
-            })?.pointNameRAW || '';
+        const departureDate = departureLine ? new Date(departureTimestamp) : undefined;
 
-          const departureDate = new Date(departureTime);
+        // [HH, MM, SS] - nienawidzę dat w JavaScripcie
+        const dateArray = departureDate?.toLocaleString('pl-PL').split(', ')[1].split(':') || [' ', ' ', ' ', ' '];
 
-          // [HH, MM, SS] - nienawidzę dat w JavaScripcie
-          const dateArray = departureDate.toLocaleString('pl-PL').split(', ')[1].split(':');
+        // [H,H,M,M] - ZABIJCIE MNIE BŁAGAM
+        const departureDigits = [...dateArray[0].split(''), ...dateArray[1].split('')];
 
-          // [H,H,M,M] - ZABIJCIE MNIE BŁAGAM
-          const departureDigits = [...dateArray[0].split(''), ...dateArray[1].split('')];
+        const routeTo = timetable.route.split('|')[1];
 
-          const routeTo = route.split('|')[1];
+        list.push({
+          trainNumber: `${timetable.category} ${train.trainNo}`,
+          timetableId: timetable.timetableId,
+          routeTo: routeTo,
+          routeVia: routeVia,
+          departureDate: departureDate,
+          departureDigits: departureDigits,
+          delayMinutes: departureDelay,
 
-          (await acc).push({
-            timetableId,
-            routeTo: routeTo,
-            routeVia,
-            trainNumber: `${trainCategoryCode} ${trainNo}`,
-            departureDate: new Date(departureTime),
-            departureDigits,
-            delayMinutes: departureDelay,
+          arrivalTimestamp,
+          departureTimestamp,
 
-            tableValues: reactive({
-              routeTo: '',
-              routeVia: '',
-            }),
-          });
+          tableValues: reactive({
+            routeTo: '',
+            routeVia: '',
+          }),
+        });
 
-          if (!this.departureRoutes.includes(routeVia)) this.departureRoutes.push(routeVia);
-          if (!this.departureRoutes.includes(routeTo)) this.departureRoutes.push(routeTo);
+        if (!this.departureRoutes.includes(routeVia)) this.departureRoutes.push(routeVia);
+        if (!this.departureRoutes.includes(routeTo)) this.departureRoutes.push(routeTo);
 
-          return acc;
-        }, Promise.resolve([]))
-      ).sort((d1, d2) => (d1.departureDate > d2.departureDate ? 1 : -1));
+        return list;
+      }, [] as IDeparture[]);
 
-      this.fillTable(departureList);
+      this.fillTable(
+        updatedDepartureList
+          // .filter((dep) => dep.departureDate)
+          .sort((dep1, dep2) => (dep1.departureDate?.getTime() || 0) - (dep2.departureDate?.getTime() || 0))
+      );
     },
   },
 
   async mounted() {
-    this.fillTable();
-    this.fetchDepartureList();
     this.shuffleRoutes();
+    await this.fetchDepartureList();
 
     setInterval(() => {
       this.fetchDepartureList();
-      this.shuffleRoutes();
-
-      console.log('Loading data');
     }, 10000);
 
-    requestAnimationFrame(this.updateTableRows);
+    requestAnimationFrame(this.update);
   },
 });
 </script>

src/interfaces/StationAPI.ts

@@ -1,24 +0,0 @@
-export interface StationInfo {
-    dispatcherId: number;
-    dispatcherName: string;
-    dispatcherIsSupporter: boolean;
-    stationName: string;
-    stationHash: string;
-    region: string;
-    maxUsers: number;
-    currentUsers: number;
-    spawn: number;
-    lastSeen: any;
-    dispatcherExp: number;
-    nameFromHeader: string;
-    spawnString: string;
-    networkConnectionString: string;
-    isOnline: number;
-    dispatcherRate: number;
-}
-
-export interface StationResponse {
-    success: boolean;
-    respCode: number;
-    message: StationInfo[];
-}

src/interfaces/TimetableAPI.ts

@@ -1,43 +0,0 @@
-export interface TimetableTrainInfo {
-    timetableId: number;
-    trainNo: number;
-    trainCategoryCode: string;
-    driverId: number;
-    driverName: string;
-    route: string;
-    twr: number;
-    skr: number;
-    sceneries: string[];
-}
-
-export interface TimetableStopInfo {
-    arrivalLine?: string;
-    arrivalTime?: Date;
-    arrivalDelay: number;
-    arrivalRealTime?: Date;
-    pointDistance: number;
-    pointName: string;
-    pointNameRAW: string;
-    entryId: number;
-    pointId: string;
-    comments?: any;
-    confirmed: number;
-    isStopped: number;
-    pointStopTime?: number;
-    pointStopType: string;
-    departureLine?: string;
-    departureTime?: Date;
-    departureDelay: number;
-    departureRealTime?: Date;
-}
-
-export interface TimetableInfo {
-    trainInfo?: TimetableTrainInfo;
-    stopPoints?: TimetableStopInfo[];
-}
-
-export interface TimetableResponse {
-    success: boolean;
-    respCode: number;
-    message: TimetableInfo;
-}

src/interfaces/TrainAPI.ts

@@ -1,23 +0,0 @@
-export interface TrainInfo {
-    trainNo: number;
-    driverId: number;
-    driverName: string;
-    driverIsSupporter: boolean;
-    station: any;
-    dataSignal: string;
-    dataSceneryConnection: string;
-    dataDistance: number;
-    dataCon: string;
-    dataSpeed: number;
-    dataMass: number;
-    dataLength: number;
-    region: string;
-    isOnline: number;
-    lastSeen: any;
-}
-
-export interface TrainResponse {
-    success: boolean;
-    respCode: number;
-    message: TrainInfo[];
-}

src/main.ts

@@ -1,4 +1,4 @@
-import { createApp } from "vue";
-import App from "./App.vue";
+import { createApp } from 'vue'
+import App from './App.vue'
 
-createApp(App).mount("#app");
+createApp(App).mount('#app')

src/types/IDeparture.ts

@@ -0,0 +1,21 @@
+interface IDepartureTableValues {
+    routeTo: string;
+    routeVia: string;
+}
+
+export interface IDeparture {
+    trainNumber: string;
+    timetableId: number;
+
+    routeTo: string;
+    routeVia: string;
+
+    arrivalTimestamp: number;
+    departureTimestamp: number;
+
+    delayMinutes: number,
+    departureDate?: Date,
+    departureDigits: string[],
+
+    tableValues: IDepartureTableValues;
+}

src/types/IOnlineStationsResponse.ts

@@ -0,0 +1,24 @@
+export interface IOnlineStation {
+  dispatcherId: number;
+  dispatcherName: string;
+  dispatcherIsSupporter: boolean;
+  stationName: string;
+  stationHash: string;
+  region: string;
+  maxUsers: number;
+  currentUsers: number;
+  spawn: number;
+  lastSeen: any;
+  dispatcherExp: number;
+  nameFromHeader: string;
+  spawnString: string;
+  networkConnectionString: string;
+  isOnline: number;
+  dispatcherRate: number;
+}
+
+export interface IOnlineStationsResponse {
+  success: boolean;
+  respCode: number;
+  message: IOnlineStation[];
+}

src/types/ISceneryReponse.ts

@@ -0,0 +1,17 @@
+export interface ISceneryResponse {
+  id: string;
+  name: string;
+  SUP: boolean;
+  authors: string;
+  availability: string;
+  backupJSON: string;
+  checkpoints: string;
+  controlType: string;
+  lines: string;
+  project: string;
+  reqLevel: number;
+  routes: string;
+  signalType: string;
+  supportersOnly?: boolean;
+  url: string;
+}

src/types/IStationData.ts

@@ -19,7 +19,7 @@
   17: false
 */
 
-export default interface StationData {
+export default interface IStationData {
   stationName: string;
   nameAbbreviation: string;
   stationCheckpoints: string[];

src/types/ITrainResponse.ts

@@ -0,0 +1,53 @@
+export interface ITimetableStop {
+  stopName: string;
+  stopNameRAW: string;
+  stopType: string;
+  stopDistance: number;
+  pointId: string;
+  comments?: string;
+  mainStop: boolean;
+  arrivalLine: string | null;
+  arrivalTimestamp: number;
+  arrivalRealTimestamp: number;
+  arrivalDelay: number;
+  departureLine: string | null;
+  departureTimestamp: number;
+  departureRealTimestamp: number;
+  departureDelay: number;
+  beginsHere: boolean;
+  terminatesHere: boolean;
+  confirmed: number;
+  stopped: number;
+  stopTime?: number;
+}
+
+export interface ITrainTimetable {
+  SKR: number;
+  TWR: number;
+  category: string;
+  stopList: ITimetableStop[];
+  route: string;
+  timetableId: number;
+  sceneries: string[];
+}
+
+export interface ITrainResponse {
+  trainNo: number;
+  mass: number;
+  speed: number;
+  length: number;
+  distance: number;
+  stockString: string;
+  driverName: string;
+  driverId: number;
+  driverIsSupporter: boolean;
+  currentStationHash: string;
+  currentStationName: string;
+  signal: string;
+  connectedTrack: string;
+  online: number;
+  lastSeen: any;
+  region: string;
+  isTimeout: boolean;
+  timetable: ITrainTimetable;
+}

src/vite-env.d.ts

@@ -1,4 +1,5 @@
-/* eslint-disable */
+/// <reference types="vite/client" />
+
 declare module '*.vue' {
   import type { DefineComponent } from 'vue'
   const component: DefineComponent<{}, {}, any>