Pobieranie danych z API; poprawki wizualne

src/components/OrderTrainPicker.vue

@@ -22,13 +22,29 @@
     </div>
 
     <div class="content">
-      Wybierz dyżurnego oraz scenerię, aby zobaczyć pociągi
+      <b v-if="!selectedSceneryName" class="text--accent"> Wybierz dyżurnego oraz scenerię, aby zobaczyć pociągi </b>
 
-      <ul>
+      <div v-else>
-        <li v-for="train in sceneryTrains">
+        <b class="text--accent">Kliknij na gracza, aby wypełnić obecny rozkaz jego danymi</b>
-          {{ train.trainNo }}
+
-        </li>
+        <p>Gracze bez rozkładu jazdy</p>
-      </ul>
+        <ul class="train-list">
+          <li v-for="train in sceneryTrains">
+            <b>{{ train.trainNo }} | {{ train.driverName }}</b>
+          </li>
+
+          <li class="no-trains" v-if="sceneryTrains.length == 0 && selectedSceneryName">Brak graczy na scenerii</li>
+        </ul>
+
+        <p>Aktywne rozkłady jazdy</p>
+        <ul class="train-list">
+          <li v-for="train in sceneryScheduledTrains">
+            <b>{{ train.trainNo }} | {{ train.driverName }}</b>
+          </li>
+
+          <li class="no-trains" v-if="sceneryScheduledTrains.length == 0">Brak aktywnych rozkładów</li>
+        </ul>
+      </div>
     </div>
   </div>
 </template>
@@ -36,15 +52,15 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import axios from 'axios';
-import { ApiSWDR } from '../types/apiTypes';
+import { ApiSWDR, ApiStacjownik } from '../types/apiTypes';
-import { ISceneryData, ITrainData } from '../types/dataTypes';
+import { ISceneryData } from '../types/dataTypes';
 
 export default defineComponent({
   name: 'order-train-picker',
   data() {
     return {
       sceneriesOnline: [] as ISceneryData[],
-      trainsOnline: [] as ITrainData[],
+      trainsOnline: [] as ApiStacjownik.IActiveTrain[],
 
       selectedSceneryName: null as string | null,
       selectedDispatcherName: null as string | null,
@@ -63,6 +79,10 @@ export default defineComponent({
   },
 
   computed: {
+    selectedSceneryHash() {
+      return this.sceneriesOnline.find((s) => this.selectedSceneryName == s.stationName)?.stationHash;
+    },
+
     sceneriesOnlinePL1() {
       return this.sceneriesOnline.filter((s) => s.region == 'eu' && s.isOnline);
     },
@@ -79,7 +99,18 @@ export default defineComponent({
     },
 
     sceneryTrains() {
-      return this.trainsOnline.filter((t) => t.isOnline && t.station?.stationName == this.selectedSceneryName);
+      return this.trainsOnline.filter(
+        (t) => t.online && t.currentStationName == this.selectedSceneryName && this.selectedSceneryName && !t.timetable
+      );
+    },
+
+    sceneryScheduledTrains() {
+      if (!this.selectedSceneryHash) return [];
+      const hash = this.selectedSceneryHash;
+
+      return this.trainsOnline
+        .filter((t) => t.timetable?.sceneries.includes(hash))
+        .sort((t1, t2) => t1.trainNo - t2.trainNo);
     },
   },
 
@@ -95,47 +126,80 @@ export default defineComponent({
     },
 
     async fetchTrainsOnline() {
-      const data: ApiSWDR.ITrainsOnline = await (
+      const data: ApiStacjownik.IActiveTrain[] = await (
-        await axios.get(`${import.meta.env['VITE_APP_SWDR_URL']}/?method=getTrainsOnline`)
+        await axios.get(`${import.meta.env['VITE_APP_API_URL']}/getActiveTrainList`)
       ).data;
 
-      if (!data.success) return;
+      if (!data) return;
 
-      this.trainsOnline = data.message;
+      this.trainsOnline = data;
     },
   },
 });
 </script>
 
 <style lang="scss" scoped>
+@import '../styles/global.scss';
+
 .order-train-picker {
-  padding: 1em 0;
+  padding: 1em;
+  height: 90vh;
+
+  overflow-y: auto;
 
   display: flex;
   flex-direction: column;
   align-items: center;
+
+  margin-top: 1em;
 }
 
 .options {
   display: flex;
   width: 100%;
+  gap: 1em;
 
-  padding: 0 2em;
+  select {
+    border: 2px solid white;
+    color: white;
+    font-size: 1em;
+    width: 100%;
+    margin: 0;
+    padding: 0.15em;
+  }
+
+  option {
+    color: black;
+  }
 }
 
 .content {
   margin-top: 1em;
-}
-
-select {
-  border: 2px solid white;
-  color: white;
-  font-size: 1em;
   width: 100%;
+  text-align: center;
+
+  p {
+    margin: 1em 0;
+    font-weight: bold;
+    font-size: 1.1em;
+  }
 }
 
-option {
+ul.train-list {
-  color: black;
+  li {
+    background-color: #111;
+    padding: 0.5em;
+    margin-top: 0.5em;
+
+    cursor: pointer;
+
+    &.no-trains {
+      font-weight: bold;
+      background-color: #222;
+
+      cursor: default;
+    }
+  }
 }
 </style>
 

src/types/apiTypes.ts

@@ -26,28 +26,94 @@ export declare module ApiSWDR {
     dispatcherRate: number;
   }
 
-  export interface ITrainsOnline {
+  // export interface ITrainsOnline {
-    success: boolean;
+  //   success: boolean;
-    respCode: number;
+  //   respCode: number;
-    message: ITrainsOnlineMessage[];
+  //   message: ITrainsOnlineMessage[];
-  }
+  // }
 
-  export interface ITrainsOnlineMessage {
+  // export interface ITrainsOnlineMessage {
-    trainNo: number;
+  //   trainNo: number;
-    driverId: number;
+  //   driverId: number;
-    driverName: string;
+  //   driverName: string;
-    driverIsSupporter: boolean;
+  //   driverIsSupporter: boolean;
-    dataSignal: string;
+  //   dataSignal: string;
-    dataSceneryConnection: string;
+  //   dataSceneryConnection: string;
-    dataDistance: number;
+  //   dataDistance: number;
-    dataCon: string;
+  //   dataCon: string;
-    dataSpeed: number;
+  //   dataSpeed: number;
-    dataMass: number;
+  //   dataMass: number;
-    dataLength: number;
+  //   dataLength: number;
-    region: string;
+  //   region: string;
-    isOnline: number;
+  //   isOnline: number;
-    lastSeen: number;
+  //   lastSeen: number;
-    station?: ISceneryData;
+  //   station?: ISceneryData;
-  }
+  // }
 }
 
+export declare module ApiStacjownik {
+  export interface IActiveTrain {
+    trainNo: number;
+
+    mass: number;
+    length: number;
+    speed: number;
+
+    signal: string;
+    distance: number;
+    connectedTrack: string;
+    stockString: string;
+
+    driverName: string;
+    driverId: number;
+    driverIsSupporter: boolean;
+
+    currentStationName: string;
+    currentStationHash?: string;
+
+    online: boolean;
+    lastSeen: number;
+
+    region: string;
+
+    timetable?: {
+      timetableId: number;
+      category: string;
+      route: string;
+      stopList: IActiveTrainStop[];
+      TWR: boolean;
+      SKR: boolean;
+      sceneries: string[];
+    };
+
+    isTimeout: boolean;
+  }
+
+  export interface IActiveTrainStop {
+    stopName: string;
+    stopNameRAW: string;
+    stopType: string;
+    stopDistance: number;
+    pointId: number;
+
+    mainStop: boolean;
+
+    arrivalLine: string;
+    arrivalTimestamp: number;
+    arrivalRealTimestamp: number;
+    arrivalDelay: number;
+
+    departureLine: string;
+    departureTimestamp: number;
+    departureRealTimestamp: number;
+    departureDelay: number;
+
+    comments?: any;
+
+    beginsHere: boolean;
+    terminatesHere: boolean;
+    confirmed: boolean;
+    stopped: boolean;
+    stopTime: number;
+  }
+} 

src/types/dataTypes.ts

@@ -17,21 +17,21 @@ export interface ISceneryData {
   dispatcherRate: number;
 }
 
-export interface ITrainData {
+// export interface ITrainData {
-  trainNo: number;
+//   trainNo: number;
-  driverId: number;
+//   driverId: number;
-  driverName: string;
+//   driverName: string;
-  driverIsSupporter: boolean;
+//   driverIsSupporter: boolean;
-  dataSignal: string;
+//   dataSignal: string;
-  dataSceneryConnection: string;
+//   dataSceneryConnection: string;
-  dataDistance: number;
+//   dataDistance: number;
-  dataCon: string;
+//   dataCon: string;
-  dataSpeed: number;
+//   dataSpeed: number;
-  dataMass: number;
+//   dataMass: number;
-  dataLength: number;
+//   dataLength: number;
-  region: string;
+//   region: string;
-  isOnline: number;
+//   isOnline: number;
-  lastSeen: number;
+//   lastSeen: number;
-  station?: ISceneryData;
+//   station?: ISceneryData;
-}
+// }