Oznaczenia statusu postoju w sekcji maszynistów na stacji

src/components/StationsView/StationCard.vue

@@ -124,9 +124,9 @@
         <div class="users-content">
           <div
             class="user"
+            :class="train.stopStatus"
             v-for="train in computedStationTrains"
             :key="train.trainNo + train.driverName"
-            :class="{'no-timetable': !train.timetableData}"
           >
             <router-link
               :to="{ name: 'TrainsView', params: { passedSearchedTrain: train.trainNo.toString()}}"
@@ -145,7 +145,11 @@
       </div>
     </div>
 
-    <StationTimetable :class="{show: cardMode == 1}" :stationInfo="stationInfo" />
+    <StationTimetable
+      :class="{show: cardMode == 1}"
+      :scheduledTrains="computedScheduledTrains"
+      :stationName="stationInfo.stationName"
+    />
   </section>
 </template>
 
@@ -156,6 +160,7 @@ import { Getter } from "vuex-class";
 import styleMixin from "@/mixins/styleMixin";
 
 import Station from "@/scripts/interfaces/Station";
+import Train from "@/scripts/interfaces/Train";
 
 import StationTimetable from "@/components/StationsView/StationTimetable.vue";
 
@@ -167,7 +172,6 @@ import StationTimetable from "@/components/StationsView/StationTimetable.vue";
 export default class StationCard extends styleMixin {
   @Prop() stationInfo!: Station;
   @Prop() exit!: void;
-  @Getter('getTrainList') trains;
 
   cardMode: number = 0;
 
@@ -177,11 +181,34 @@ export default class StationCard extends styleMixin {
       : `${this.stationInfo.dispatcherExp}`;
   }
 
+  get computedScheduledTrains() {
+    return this.stationInfo.scheduledTrains.map(scheduledTrain => {
+      let stopStatus = "";
+      let stopLabel = "";
+
+      if (scheduledTrain.terminatesHere && scheduledTrain.confirmed) { stopStatus = "terminated"; stopLabel = "Skończył bieg" }
+      else if (!scheduledTrain.terminatesHere && scheduledTrain.confirmed) { stopStatus = "departed"; stopLabel = "Odprawiony" }
+      else if (scheduledTrain.currentStationName == this.stationInfo.stationName && !scheduledTrain.stopped) { stopStatus = "online"; stopLabel = "Na stacji" }
+      else if (scheduledTrain.currentStationName == this.stationInfo.stationName && scheduledTrain.stopped) { stopStatus = "stopped"; stopLabel = "Postój" }
+      else if (scheduledTrain.currentStationName != this.stationInfo.stationName) { stopStatus = "arriving"; stopLabel = "W drodze" }
+
+      return {
+        ...scheduledTrain,
+        stopStatus,
+        stopLabel
+      }
+    })
+  }
+
   get computedStationTrains() {
-    return this.stationInfo.stationTrains.map(stationTrain => ({
-      ...stationTrain,
-      timetableData: this.trains.find(train => train.timetableData && train.trainNo === stationTrain.trainNo)
-    }))
+    return this.stationInfo.stationTrains.map(stationTrain => {
+      const scheduledData = this.computedScheduledTrains.find(scheduledTrain => scheduledTrain.trainNo === stationTrain.trainNo);
+
+      return {
+        ...stationTrain,
+        stopStatus: scheduledData?.stopStatus || "no-timetable"
+      }
+    })
   }
 }
 </script>
@@ -401,6 +428,22 @@ export default class StationCard extends styleMixin {
           pointer-events: none;
         }
       }
+
+      &.departed {
+        border: 1px solid lime;
+      }
+
+      &.stopped {
+        border: 1px solid #ffa600;
+      }
+
+      &.online {
+        border: 1px solid gold;
+      }
+
+      &.terminated {
+        border: 1px solid red;
+      }
     }
   }
 }

src/components/StationsView/StationTimetable.vue

@@ -2,7 +2,7 @@
   <div class="station-timetable">
     <div class="timetable-wrapper">
       <div class="timetable-title title">
-        <div style="font-size: 1.5em;">{{stationInfo.stationName.toUpperCase()}}</div>
+        <div style="font-size: 1.5em;">{{stationName.toUpperCase()}}</div>
         <div style="font-size: 0.7em;">AKTYWNE ROZKŁADY JAZDY</div>
       </div>
 
@@ -26,28 +26,8 @@
               </span>
             </span>
 
-            <span class="general-confirmed">
-              <span
-                style="color: red"
-                v-if="scheduledTrain.terminatesHere && scheduledTrain.confimed"
-              >Skończył bieg</span>
-
-              <span
-                style="color: lime"
-                v-else-if="scheduledTrain.confirmed && !scheduledTrain.terminatesHere"
-              >Odprawiony</span>
-
-              <span
-                style="color: gold"
-                v-else-if="scheduledTrain.currentStationName == stationInfo.stationName && !scheduledTrain.stopped"
-              >Na stacji</span>
-
-              <span
-                style="color: #aaa"
-                v-else-if="!scheduledTrain.confirmed && scheduledTrain.currentStationName != stationInfo.stationName"
-              >W drodze</span>
-
-              <span style="color: orangered" v-else-if="scheduledTrain.stopped">Postój</span>
+            <span class="general-status">
+              <span :class="scheduledTrain.stopStatus">{{scheduledTrain.stopLabel}}</span>
             </span>
           </span>
 
@@ -87,15 +67,13 @@
 <script lang="ts">
 import { Component, Vue, Prop } from 'vue-property-decorator';
 
-import Station from "@/scripts/interfaces/Station";
-
-
 @Component
 export default class StationTimetable extends Vue {
-  @Prop() readonly stationInfo!: Station;
+  @Prop() readonly scheduledTrains;
+  @Prop() readonly stationName;
 
   get computedScheduledTrains() {
-    return this.stationInfo.scheduledTrains.sort((a, b) => {
+    return this.scheduledTrains.sort((a, b) => {
       if (a.arrivalTime > b.arrivalTime) return 1;
       else if ((a.arrivalTime < b.arrivalTime)) return -1;
 
@@ -240,6 +218,28 @@ export default class StationTimetable extends Vue {
   }
 }
 
+.general-status {
+  span.arriving {
+    color: #aaa;
+  }
+
+  span.departed {
+    color: lime;
+  }
+
+  span.stopped {
+    color: #ffa600;
+  }
+
+  span.online {
+    color: gold;
+  }
+
+  span.terminated {
+    color: red;
+  }
+}
+
 .schedule {
   &-arrival,
   &-stop,