Lista pociągów: dodano pociągi bez rozkładów

src/components/TrainsView/TrainTable.vue

@@ -1,22 +1,27 @@
 <template>
   <div class="train-table">
-    <div class="no-trains" v-if="computedTrains.length == 0">
+    <div class="no-trains" v-if="computedTrains.length == 0 && timetableLoaded">
       {{ $t("trains.no-trains") }}
     </div>
 
+    <div
+      class="no-trains"
+      v-if="computedTrains.length == 0 && !timetableLoaded"
+    >
+      {{ $t("trains.loading") }}
+    </div>
+
     <ul class="train-list">
       <li
         class="train-row"
         v-for="(train, i) in computedTrains"
         :key="i"
-        :id="train.timetableData.timetableId"
-        :ref="train.timetableData.timetableId"
+        :id="train.driverId + train.trainNo"
       >
+        <!-- :ref="train.timetableData.timetableId" -->
         <span class="wrapper">
-          <span
-            class="info"
-            @click="changeScheduleShowState(train.timetableData.timetableId)"
-          >
+          <span class="info" v-if="train.timetableData">
+            <!-- @click="changeScheduleShowState(train.timetableData.timetableId)" -->
             <div class="info-main">
               <div class="info-top">
                 <div class="top-category">
@@ -152,6 +157,7 @@
         </span>
 
         <TrainSchedule
+          v-if="train.timetableData"
           :followingStops="train.timetableData.followingStops"
           :currentStationName="train.currentStationName"
           @click="changeScheduleShowState(train.timetableData.timetableId)"
@@ -169,12 +175,14 @@ import Train from "@/scripts/interfaces/Train";
 
 import TrainSchedule from "@/components/TrainsView/TrainSchedule.vue";
 import TrainStop from "@/scripts/interfaces/TrainStop";
+import { DataStatus } from "@/scripts/enums/DataStatus";
 
 @Component({
   components: { TrainSchedule },
 })
 export default class TrainTable extends Vue {
   @Prop() computedTrains!: Train[];
+  @Prop() timetableDataStatus!: DataStatus;
 
   showedSchedule = 0;
 
@@ -194,6 +202,14 @@ export default class TrainTable extends Vue {
   signalIcon: string = require("@/assets/icon-signal.svg");
   routeIcon: string = require("@/assets/icon-route.svg");
 
+  get timetableLoaded() {
+    return this.timetableDataStatus == DataStatus.Loaded;
+  }
+
+  get timetableError() {
+    return this.timetableDataStatus == DataStatus.Error;
+  }
+
   focusOnTrain(timetableId: number) {
     const currentEl: HTMLElement = this.$refs[timetableId][0];
 

src/lang/en.json

@@ -88,6 +88,7 @@
   },
   "trains": {
     "no-trains": "Oops! No trains online!",
+    "loading": "Loading train data...",
     "stats": "TRAFFIC STATISTICS",
     "stats-speed": "TRAINS SPEED (MIN | AVG | MAX) [km/h]",
     "stats-length": "TIMETABLES LENGTH (MIN | AVG | MAX) [km]",

src/lang/pl.json

@@ -88,6 +88,7 @@
   },
   "trains": {
     "no-trains": "Brak pociągów online!",
+    "loading": "Pobieranie danych o pociągach...",
     "stats": "STATYSTYKI RUCHU",
     "stats-speed": "PRĘDKOŚCI POCIĄGÓW (MIN | ŚR | MAX) [km/h]",
     "stats-length": "DŁUGOŚCI ROZKŁADÓW (MIN | ŚR | MAX) [km]",

src/scripts/enums/DataStatus.ts

@@ -1,8 +1,6 @@
-const enum DataStatus {
+export const enum DataStatus {
   Initialized = -1,
   Loading = 0,
   Error = 1,
   Loaded = 2
 }
-
-export default DataStatus;

src/scripts/interfaces/StoreData.ts

@@ -1,4 +1,4 @@
-import DataStatus from "../enums/DataStatus";
+import { DataStatus } from "../enums/DataStatus";
 import Station from "./Station";
 import Train from "./Train";
 

src/store/store.ts

@@ -8,7 +8,7 @@ import Train from "@/scripts/interfaces/Train";
 import TrainStop from "@/scripts/interfaces/TrainStop";
 
 import utils from "@/scripts/utils/storeUtils";
-import DataStatus from "@/scripts/enums/DataStatus";
+import { DataStatus } from "@/scripts/enums/DataStatus";
 import { StoreData } from "@/scripts/interfaces/StoreData";
 
 interface TimetableData {
@@ -59,7 +59,7 @@ export default class Store extends VuexModule {
 
   private dataConnectionStatus: DataStatus = DataStatus.Loading;
   private sceneryDataStatus: DataStatus = DataStatus.Loading;
-  private timetableLoaded: DataStatus = DataStatus.Loading;
+  private timetableDataStatus: DataStatus = DataStatus.Loading;
 
   private stationList: Station[] = [];
   private trainList: Train[] = [];
@@ -74,7 +74,7 @@ export default class Store extends VuexModule {
       activeStationCount: this.stationCount,
 
       dataConnectionStatus: this.dataConnectionStatus,
-      timetableDataStatus: this.timetableLoaded
+      timetableDataStatus: this.timetableDataStatus
     };
   }
 
@@ -87,12 +87,13 @@ export default class Store extends VuexModule {
   }
 
   get getTimetableDataStatus() {
-    return this.timetableLoaded;
+    return this.timetableDataStatus;
   }
 
   get getDataStatus() {
     return this.dataConnectionStatus;
   }
+
   get getSceneryDataStatus() {
     return this.sceneryDataStatus;
   }
@@ -481,17 +482,15 @@ export default class Store extends VuexModule {
     this.trainList = this.trainList.reduce((acc, train) => {
       const timetableData = timetableList.find(data => data && data.trainNo === train.trainNo);
 
-      if (timetableData) {
-        const trainData = this.stationList
-          .find(station => station.stationName === train.currentStationName)
-          ?.scheduledTrains.find(stationTrain => stationTrain.trainNo === train.trainNo);
+      const trainStopData = this.stationList
+        .find(station => station.stationName === train.currentStationName)
+        ?.scheduledTrains.find(stationTrain => stationTrain.trainNo === train.trainNo);
 
-        acc.push({ ...train, timetableData, stopStatus: trainData?.stopStatus || "", stopLabel: trainData?.stopLabel || "" });
-      }
+      acc.push({ ...train, timetableData, stopStatus: trainStopData?.stopStatus || "", stopLabel: trainStopData?.stopLabel || "" });
 
       return acc;
     }, [] as Train[]);
 
-    this.timetableLoaded = DataStatus.Loaded;
+    this.timetableDataStatus = DataStatus.Loaded;
   }
 }

src/views/SceneryView.vue

@@ -33,7 +33,7 @@ import Station from "@/scripts/interfaces/Station";
 import SceneryInfo from "@/components/SceneryView/SceneryInfo.vue";
 import SceneryTimetable from "@/components/SceneryView/SceneryTimetable.vue";
 import { StoreData } from "@/scripts/interfaces/StoreData";
-import DataStatus from "@/scripts/enums/DataStatus";
+import { DataStatus } from "@/scripts/enums/DataStatus";
 import ActionButton from "@/components/Global/ActionButton.vue";
 
 @Component({

src/views/StationsView.vue

@@ -74,7 +74,7 @@ import FilterCard from "@/components/StationsView/FilterCard.vue";
 import DonationModal from "@/components/Global/DonationModal.vue";
 import ActionButton from "@/components/Global/ActionButton.vue";
 import { StoreData } from "@/scripts/interfaces/StoreData";
-import DataStatus from "@/scripts/enums/DataStatus";
+import { DataStatus } from "@/scripts/enums/DataStatus";
 
 @Component({
   components: {

src/views/TrainsView.vue

@@ -19,7 +19,10 @@
         />
       </div>
 
-      <TrainTable :computedTrains="computedTrains" />
+      <TrainTable
+        :computedTrains="computedTrains"
+        :timetableDataStatus="timetableDataStatus"
+      />
     </div>
   </section>
 </template>
@@ -35,6 +38,7 @@ import TrainTable from "@/components/TrainsView/TrainTable.vue";
 import TrainStats from "@/components/TrainsView/TrainStats.vue";
 import TrainOptions from "@/components/TrainsView/TrainOptions.vue";
 import ActionButton from "@/components/Global/ActionButton.vue";
+import { DataStatus } from "@/scripts/enums/DataStatus";
 
 @Component({
   components: {
@@ -46,6 +50,7 @@ import ActionButton from "@/components/Global/ActionButton.vue";
 })
 export default class TrainsView extends Vue {
   @Getter("getTrainList") trains!: Train[];
+  @Getter("getTimetableDataStatus") timetableDataStatus!: DataStatus;
 
   // Passed in route as query parameters
   @Prop() readonly queryTrain!: string;
@@ -76,50 +81,54 @@ export default class TrainsView extends Vue {
   }
 
   get computedTrains() {
-    return this.trains
-      .filter(
-        (train) =>
-          train.timetableData &&
-          (this.searchedTrain.length > 0
-            ? train.trainNo.toString().includes(this.searchedTrain)
-            : true) &&
-          (this.searchedDriver.length > 0
-            ? train.driverName
-                .toLowerCase()
-                .includes(this.searchedDriver.toLowerCase())
-            : true)
-      )
-      .sort((a, b) => {
-        switch (this.sorterActive.id) {
-          case "mass":
-            if (a.mass > b.mass) return this.sorterActive.dir;
-            else return -this.sorterActive.dir;
+    return this.timetableDataStatus != DataStatus.Loaded
+      ? []
+      : this.trains
+          .filter(
+            (train) =>
+              train.online &&
+              (this.searchedTrain.length > 0
+                ? train.trainNo.toString().includes(this.searchedTrain)
+                : true) &&
+              (this.searchedDriver.length > 0
+                ? train.driverName
+                    .toLowerCase()
+                    .includes(this.searchedDriver.toLowerCase())
+                : true)
+          )
+          .sort((a, b) => {
+            switch (this.sorterActive.id) {
+              case "mass":
+                if (a.mass > b.mass) return this.sorterActive.dir;
+                return -this.sorterActive.dir;
 
-          case "distance":
-            if (!a.timetableData || !b.timetableData) return 0;
+              case "distance":
+                if (
+                  (a.timetableData?.routeDistance || -1) >
+                  (b.timetableData?.routeDistance || -1)
+                )
+                  return this.sorterActive.dir;
 
-            if (a.timetableData.routeDistance > b.timetableData.routeDistance)
-              return this.sorterActive.dir;
-            else return -this.sorterActive.dir;
+                return -this.sorterActive.dir;
 
-          case "speed":
-            if (a.speed > b.speed) return this.sorterActive.dir;
-            else return -this.sorterActive.dir;
+              case "speed":
+                if (a.speed > b.speed) return this.sorterActive.dir;
+                return -this.sorterActive.dir;
 
-          case "timetable":
-            if (a.trainNo > b.trainNo) return this.sorterActive.dir;
-            else return -this.sorterActive.dir;
+              case "timetable":
+                if (a.trainNo > b.trainNo) return this.sorterActive.dir;
+                return -this.sorterActive.dir;
 
-          case "length":
-            if (a.length > b.length) return this.sorterActive.dir;
-            else return -this.sorterActive.dir;
+              case "length":
+                if (a.length > b.length) return this.sorterActive.dir;
+                return -this.sorterActive.dir;
 
-          default:
-            break;
-        }
+              default:
+                break;
+            }
 
-        return 0;
-      });
+            return 0;
+          });
   }
 }
 </script>