Dodano postawowe wyświetlanie odjazdów

src/App.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="scenery-selector" v-if="selectedStationName.length == 0">
+  <div class="scenery-selector" v-if="!selectedStation">
-    <select name="scenery" id="select-scenery" v-model="selectedStationName">
+    <select name="scenery" id="select-scenery" v-model="selectedStation">
-      <option value="" disabled>Wybierz scenerię</option>
+      <option :value="null" disabled>Wybierz scenerię</option>
-      <option v-for="name in onlineStationNames" :key="name">{{ name }}</option>
+      <option v-for="s in onlineStations" :key="s" :value="s">{{ s.stationName }}</option>
     </select>
   </div>
 
@@ -10,11 +10,14 @@
 </template>
 
 <script lang="ts">
-import { provide, ref } from 'vue';
+import { provide, Ref, ref } from 'vue';
 import { defineComponent } from '@vue/runtime-core';
 import PragotronVue from './components/Pragotron.vue';
 
-import { StationResponse, StationInfo } from '@/interfaces/StationAPI';
+import { StationResponse } from '@/interfaces/StationAPI';
+import StationData from '@/interfaces/StationData';
+
+import stationNameAbbrevs from '@/data/stationAbbrevs.json';
 
 export default defineComponent({
   components: {
@@ -22,34 +25,77 @@ export default defineComponent({
   },
 
   setup() {
-    const selectedStationName = ref('');
+    const mockStation: StationData = {
+      stationName: 'Lisków',
+      nameAbbreviation: '',
+      stationCheckpoints: [],
+    };
 
-    provide('selectedStationName', selectedStationName);
+    const selectedStation = ref(mockStation) as Ref<null | StationData>;
+
+    provide('selectedStation', selectedStation);
 
     return {
-      selectedStationName,
+      selectedStation,
     };
   },
 
   data: () => ({
-    onlineStationNames: [] as string[],
+    onlineStations: [] as StationData[],
   }),
 
   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 stationDataJSON = stationDataArray.map((stationData) => ({
+      stationName: stationData[0] as string,
+      stationCheckpoints: stationData[14] ? (stationData[14] as string).split(';') : [],
+      nameAbbreviation: stationNameAbbrevs.find((name) => (stationData[0] as string).includes(name[0]))?.[0] || '',
+    }));
+
     const stationsAPIResponse: StationResponse = await (
       await fetch('https://api.td2.info.pl:9640/?method=getStationsOnline')
     ).json();
 
-    this.onlineStationNames = stationsAPIResponse.message
+    this.onlineStations = stationsAPIResponse.message
       .reduce((acc, station) => {
         if (station.region != 'eu') return acc;
         if (!station.isOnline) return acc;
 
-        acc.push(station.stationName);
+        const savedStationData = stationDataJSON.find((data) => data.stationName == station.stationName);
+
+        if (savedStationData) acc.push(savedStationData);
+        else
+          acc.push({
+            stationName: station.stationName,
+            nameAbbreviation: '',
+            stationCheckpoints: [],
+          });
 
         return acc;
-      }, [] as string[])
+      }, [] as StationData[])
-      .sort((s1, s2) => (s1 > s2 ? 1 : -1));
+      .sort((s1, s2) => (s1.stationName > s2.stationName ? 1 : -1));
   },
 });
 </script>

src/components/Pragotron.vue

@@ -14,16 +14,17 @@
       </div>
 
       <div class="table">
-        <div class="row" v-for="i in new Array(8)" :key="i">
+        <div class="row" v-for="(departure, i) in departureList" :key="i">
-          <div class="row-content">
+          <div class="row-content" v-if="!departure"></div>
+          <div class="row-content" v-else>
             <span class="destination">
-              <div class="station-slider-slot"></div>
+              <div class="station-slider-slot">{{ departure.routeTo.toUpperCase() }}</div>
             </span>
             <span class="via-station">
-              <div class="station-slider-slot"></div>
+              <div class="station-slider-slot">{{ departure.routeVia.toUpperCase() }}</div>
             </span>
             <span class="train-class">
-              <div class="train-slider-slot"></div>
+              <div class="train-slider-slot">{{ departure.trainType }} {{ departure.trainNo }}</div>
             </span>
             <span class="departure-date">
               <span class="hours-slot"></span>
@@ -31,7 +32,7 @@
               <span class="seconds-slot"></span>
             </span>
             <span class="delay">
-              <div class="delay-slider-slot"></div>
+              <div class="delay-slider-slot" v-if="departure.delayMinutes > 0">{{ departure.delayMinutes }} min</div>
             </span>
           </div>
         </div>
@@ -45,77 +46,97 @@
 
 import { defineComponent, inject, Ref } from 'vue';
 
-import stationDataJSON from '@/data/stationList.json';
-
 import { TrainResponse, TrainInfo } from '@/interfaces/TrainAPI';
 import { TimetableResponse, TimetableInfo, TimetableStopInfo } from '@/interfaces/TimetableAPI';
+import StationData from '@/interfaces/StationData';
+
+interface DepartureInfo {
+  timetableId: number;
+
+  routeTo: string;
+  routeVia: string;
+
+  trainNo: number;
+  trainType: string;
+  departureDate: Date;
+  delayMinutes: number;
+}
 
 export default defineComponent({
   data: () => ({
     currentStationName: '',
-    stationDataJSON,
+    departureList: new Array(8).fill(null) as (DepartureInfo | null)[],
   }),
 
   setup() {
-    const selectedStationName = inject('selectedStationName') as Ref<string>;
+    const selectedStation = inject('selectedStation') as Ref<StationData>;
 
-    console.log(selectedStationName.value);
+    console.log(selectedStation.value.stationName);
 
     return {
-      selectedStationName,
+      selectedStation,
     };
   },
 
   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 trainsAPIResponse: TrainResponse = await (
       await fetch('https://api.td2.info.pl:9640/?method=getTrainsOnline')
     ).json();
 
-    const reducedList = await trainsAPIResponse.message.reduce(async (acc: Promise<string[]>, train: TrainInfo) => {
+    const departureList = (
-      const timetableAPIResponse: TimetableResponse = await (
+      await trainsAPIResponse.message.reduce(async (acc: Promise<DepartureInfo[]>, train: TrainInfo) => {
-        await fetch(`https://api.td2.info.pl:9640/?method=readFromSWDR&value=getTimetable%3B${train.trainNo}%3Beu`)
+        const timetableAPIResponse: TimetableResponse = await (
-      ).json();
+          await fetch(`https://api.td2.info.pl:9640/?method=readFromSWDR&value=getTimetable%3B${train.trainNo}%3Beu`)
+        ).json();
 
-      const timetable: TimetableInfo = timetableAPIResponse.message;
+        const timetable: TimetableInfo = timetableAPIResponse.message;
 
-      if (!timetable.trainInfo) return acc;
+        if (!timetable.trainInfo) return acc;
-      if (!timetable.stopPoints) return acc;
+        if (!timetable.stopPoints) return acc;
 
-      const stopInfo: TimetableStopInfo | undefined = timetable.stopPoints.find(
+        const stopInfo: TimetableStopInfo | undefined = timetable.stopPoints.find(
-        (sp) => sp.pointNameRAW == this.selectedStationName
+          (sp) => sp.pointNameRAW.toLowerCase() == this.selectedStation.stationName.toLowerCase()
-      );
+        );
 
-      if (!stopInfo) return acc;
+        if (!stopInfo) return acc;
-      if (!stopInfo.departureLine) return acc;
+        if (!stopInfo.departureLine || !stopInfo.departureTime) return acc;
-      if (stopInfo.confirmed == 1) return acc;
+        if (stopInfo.confirmed == 1) return acc;
 
-      (await acc).push(stopInfo.pointNameRAW + ': ' + timetable.trainInfo.driverName);
+        const stopInfoIndex = timetable.stopPoints.indexOf(stopInfo);
+        const { timetableId, trainNo, route, trainCategoryCode } = timetable.trainInfo;
+        const { departureTime, departureDelay } = stopInfo;
 
-      return acc;
+        const routeVia =
-    }, Promise.resolve([]));
+          timetable.stopPoints.find((stop, i) => {
+            if (
+              i > stopInfoIndex &&
+              i != (timetable.stopPoints || []).length - 1 &&
+              stop.pointName.includes('strong') &&
+              stop.pointStopTime &&
+              stop.pointStopTime > 0
+            )
+              return true;
 
-    console.log(reducedList);
+            return false;
+          })?.pointNameRAW || '';
+
+        (await acc).push({
+          timetableId,
+          routeTo: route.split('|')[1],
+          routeVia,
+          trainNo,
+          trainType: trainCategoryCode,
+          departureDate: departureTime,
+          delayMinutes: departureDelay,
+        });
+
+        return acc;
+      }, Promise.resolve([]))
+    ).sort((d1, d2) => (d1.departureDate > d2.departureDate ? 1 : -1));
+
+    const sortedList = new Array(8).fill(0).map((v, i) => (i > departureList.length ? null : departureList[i]));
+
+    this.departureList = sortedList;
   },
 });
 </script>
@@ -171,9 +192,11 @@ export default defineComponent({
     grid-template-columns: 2fr 2fr 1fr 1fr 1fr;
     height: 100%;
 
-    span {
+    align-items: center;
-      background: #333;
+    color: white;
-    }
+    font-size: 1.2em;
+
+    background: #333;
   }
 }
 </style>

src/interfaces/StationAPI.ts

@@ -21,4 +21,4 @@ export interface StationResponse {
     success: boolean;
     respCode: number;
     message: StationInfo[];
-}
+}

src/interfaces/StationData.ts

@@ -0,0 +1,26 @@
+/*
+  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
+*/
+
+export default interface StationData {
+    stationName: string;
+    nameAbbreviation: string;
+    stationCheckpoints: string[];
+}