Dodanie funkcjonalności aktywnych rj dla stacji (W.I.P.)

src/components/StationsView/StationCard.vue

@@ -152,55 +152,6 @@ export default class StationCard extends styleMixin {
       ? "L"
       : `${this.stationInfo.dispatcherExp}`;
   }
-
-  // toLocaleDate(timestamp: number) {
-  //   return new Date(timestamp).toLocaleDateString("pl-PL", {
-  //     hour: "2-digit",
-  //     minute: "2-digit",
-  //   });
-  // }
-
-  // get computedHistory() {
-  //   return this.history.sort((a, b) => {
-  //     if (a.occupiedFrom < b.occupiedFrom) return 1;
-  //     else return -1;
-  //   });
-  // }
-
-  // async loadHistory() {
-  //   const historyRef = await db
-  //     .collection("history")
-  //     .doc(this.stationInfo.stationName)
-  //     .collection("dispatcherHistory")
-  //     .get();
-
-  //   this.history = historyRef.docs
-  //     .filter((doc) => doc.data().occupiedTo != 0)
-  //     .map((doc) => {
-  //       const occupiedFrom = doc.data().occupiedFrom;
-  //       const occupiedTo = doc.data().occupiedTo;
-
-  //       const sameDay =
-  //         new Date(occupiedFrom).getDate() == new Date(occupiedTo).getDate();
-
-  //       return {
-  //         occupiedFrom,
-  //         occupiedTo,
-  //         dispatcher:
-  //           doc.data().currentDispatcherName || doc.data().dispatcherName,
-  //         sameDay,
-  //       };
-  //     });
-  // }
-
-  // @Watch("stationInfo")
-  // async onStationChange(val: any, oldVal: any) {
-  //   this.loadHistory();
-  // }
-
-  // created() {
-  //   this.loadHistory();
-  // }
 }
 </script>
 

src/components/StationsView/StationTable.vue

@@ -51,7 +51,7 @@
             <span
               v-if="station.online"
               :style="calculateExpStyle(station.dispatcherExp)"
-            >{{station.dispatcherExp < 2 ? 'L' : station.dispatcherExp}}</span>
+            >{{2 > station.dispatcherExp ? 'L' : station.dispatcherExp}}</span>
           </td>
           <td
             class="item-users"
@@ -118,7 +118,10 @@
             >{{station.routes.oneWay.noCatenary}}</span>
           </td>
 
-          <!-- <td class="item-tracks oneway"></td> -->
+          <td
+            class="active-timetables"
+            @click="() => showScheduledTrains(station)"
+          >{{station.scheduledTrains.length}}</td>
         </tr>
       </table>
     </div>
@@ -129,7 +132,11 @@
 import Vue from "vue";
 import { Component, Prop } from "vue-property-decorator";
 
+import { Getter } from "vuex-class";
+
 import Station from "@/scripts/interfaces/Station";
+import Train from "@/scripts/interfaces/Train";
+
 import styleMixin from "@/mixins/styleMixin";
 
 import Options from "@/components/StationsView/Options.vue";
@@ -144,6 +151,9 @@ export default class StationTable extends styleMixin {
   @Prop() readonly stations!: Station[];
   @Prop() readonly setFocusedStation!: () => void;
 
+  @Getter("trainsDataList") trains!: Train[];
+  @Getter("trainsDataState") state!: number;
+
   icons: { ascSVG; descSVG } = { ascSVG, descSVG };
   sorterActive: { index: number; dir: number } = { index: 0, dir: 1 };
 
@@ -156,6 +166,7 @@ export default class StationTable extends styleMixin {
     ["Maszyniści"],
     ["Informacje", "ogólne"],
     ["Szlaki", "2tor | 1tor"],
+    ["Aktywne RJ"],
   ];
 
   changeSorter(index: number) {
@@ -168,6 +179,14 @@ export default class StationTable extends styleMixin {
     this.sorterActive.index = index;
   }
 
+  get test() {
+    return this.trains;
+  }
+
+  showScheduledTrains(station) {
+    console.log(station.scheduledTrains);
+  }
+
   get computedStations() {
     const dir: number = this.sorterActive.dir;
 

src/components/TrainsView/TrainTable.vue

@@ -28,7 +28,9 @@
             </div>
 
             <div class="info-stations">
-              <i v-if="train.sceneries.length > 0">Przez: {{ train.sceneries }}</i>
+              <i
+                v-if="train.sceneries.length > 2"
+              >Przez: {{ mapTimetableSceneries(train.sceneries) }}</i>
             </div>
           </span>
         </a>
@@ -93,15 +95,19 @@
 
 <script lang="ts">
 import { Vue, Component, Prop } from "vue-property-decorator";
+import { Getter } from "vuex-class";
 
 const unknownTrainImage = require("@/assets/unknown.png");
 
 import Train from "@/scripts/interfaces/Train";
+import Station from "@/scripts/interfaces/Station";
 
 @Component
 export default class TrainTable extends Vue {
   @Prop() readonly computedTrains!: Train[];
 
+  @Getter("getAllStations") stations!: Station[];
+
   speedIcon: string = require("@/assets/icon-speed.svg");
   massIcon: string = require("@/assets/icon-mass.svg");
   lengthIcon: string = require("@/assets/icon-length.svg");
@@ -109,6 +115,22 @@ export default class TrainTable extends Vue {
   onImageError(e: Event) {
     (e.target as HTMLImageElement).src = unknownTrainImage;
   }
+
+  mapTimetableSceneries(sceneries: string[]): string {
+    let text = "";
+
+    for (let i = sceneries.length - 2; i > 0; i--) {
+      const station = this.stations.find(
+        (station) => station.stationHash == sceneries[i]
+      );
+
+      if (!station) continue;
+
+      text += `${station.stationName}${i > 1 ? ", " : ""}`;
+    }
+
+    return text;
+  }
 }
 </script>