fix: stop labels statuses

src/components/TrainsView/StopLabel.vue

@@ -8,15 +8,9 @@
     <span
       v-if="stop.position != 'begin'"
       class="date arrival"
-      :data-status="
+      :data-status-delayed="stop.arrivalDelay > 0"
-        stop.arrivalDelay > 0 && stop.status != 'unconfirmed'
+      :data-status-preponed="stop.arrivalDelay < 0"
-          ? 'delayed'
+      :data-status="stop.status"
-          : stop.arrivalDelay < 0 && stop.status != 'unconfirmed'
-            ? 'preponed'
-            : stop.arrivalDelay == 0 && stop.status == 'confirmed'
-              ? 'on-time'
-              : ''
-      "
     >
       p.
       <span v-if="stop.arrivalDelay != 0 && stop.status != 'unconfirmed'">
@@ -31,10 +25,7 @@
     </span>
 
     <span
-      v-if="
+      v-if="stop.duration"
-        stop.duration ||
-        (stop.status == 'stopped' && stop.position != 'begin' && stop.departureDelay > 0)
-      "
       class="date stop"
       :data-stop-types="stop.type.replace(', ', '-')"
       :data-stop-status="stop.departureDelay > 0 && !stop.duration ? 'delayed' : ''"
@@ -53,20 +44,12 @@
         (stop.duration != 0 || stop.status == 'stopped' || stop.departureDelay != stop.arrivalDelay)
       "
       class="date departure"
-      :data-status="
+      :data-status-delayed="stop.departureDelay > 0"
-        stop.departureDelay > 0 && stop.status == 'confirmed'
+      :data-status-preponed="stop.departureDelay < 0"
-          ? 'delayed'
+      :data-status-confirmed="stop.status == 'confirmed'"
-          : stop.departureDelay < 0 && stop.status == 'confirmed'
-            ? 'preponed'
-            : stop.departureDelay == 0 && stop.status == 'confirmed'
-              ? 'on-time'
-              : ''
-      "
     >
       o.
-      <span
+      <span v-if="stop.departureDelay != 0 && stop.status == 'confirmed'">
-        v-if="stop.departureDelay != 0 && (stop.status == 'confirmed' || stop.status == 'stopped')"
-      >
         <s>{{ timestampToString(stop.departureScheduled) }}</s>
         {{ timestampToString(stop.departureReal) }}
 
@@ -105,6 +88,10 @@ $stopExchangeClr: #db8e29;
 $stopDefaultClr: #252525;
 $stopNameClr: #303030;
 
+s {
+  color: #ccc;
+}
+
 .stop-label {
   display: flex;
   flex-wrap: wrap;
@@ -157,28 +144,45 @@ $stopNameClr: #303030;
       color: $delayedClr;
     }
   }
+}
 
-  .arrival,
+.stop .arrival {
-  .departure {
+  &[data-status='confirmed'][data-status-delayed='true'] {
-    &[data-status='delayed'] {
-      s {
-        color: #ccc;
-      }
-
     span {
       color: $delayedClr;
     }
   }
 
-    &[data-status='preponed'] {
+  &[data-status='confirmed'][data-status-preponed='true'] {
-      s {
-        color: #ccc;
-      }
-
     span {
       color: $preponedClr;
     }
   }
+
+  &[data-status='stopped'][data-status-preponed='true'] {
+    span {
+      color: $preponedClr;
+    }
+  }
+
+  &[data-status='stopped'][data-status-delayed='true'] {
+    span {
+      color: $delayedClr;
+    }
+  }
+}
+
+.stop .departure[data-status-confirmed='true'] {
+  &[data-status-delayed='true'] {
+    span {
+      color: $delayedClr;
+    }
+  }
+
+  &[data-status-preponed='true'] {
+    span {
+      color: $preponedClr;
+    }
   }
 }
 </style>

src/mixins/trainInfoMixin.ts

@@ -108,16 +108,19 @@ export default defineComponent({
     },
 
     currentDelay(stops: TrainStop[]) {
-      const delay =
+      const lastConfirmedStop = stops.find(
-        stops.find(
         (stop, i) =>
-            (i == 0 && !stop.confirmed) || (i > 0 && stops[i - 1].confirmed && !stop.confirmed)
+          (i == 0 && !stop.confirmed) ||
-        )?.departureDelay || 0;
+          (i > 0 && stops[i - 1].confirmed && !stop.confirmed) ||
+          (stops[i + 1] == undefined && stop.confirmed)
+      );
 
-      if (delay > 0)
+      const lastDelay = lastConfirmedStop?.departureDelay ?? lastConfirmedStop?.arrivalDelay ?? 0;
-        return `<span style='color: salmon'>${this.$t('trains.delayed')} ${delay} min</span>`;
+
-      else if (delay < 0)
+      if (lastDelay > 0)
-        return `<span style='color: lightgreen'>${this.$t('trains.preponed')} ${delay} min</span>`;
+        return `<span style='color: salmon'>${this.$t('trains.delayed')} ${lastDelay} min</span>`;
+      else if (lastDelay < 0)
+        return `<span style='color: lightgreen'>${this.$t('trains.preponed')} ${lastDelay} min</span>`;
       else return this.$t('trains.on-time');
     },