Poprawki wyglądu zakładki pociągów i scenerii

src/components/TrainsView/TrainSchedule.vue

@@ -8,7 +8,11 @@
           class="schedule-item"
           v-for="(stop, i) in followingStops"
           :key="i"
-          :class="{ confirmed: stop.confirmed, stopped: stop.stopped }"
+          :class="{
+            confirmed: stop.confirmed,
+            stopped: stop.stopped,
+            delayed: stop.departureDelay > 0,
+          }"
         >
           <div class="progress-bar"></div>
 
@@ -24,7 +28,7 @@
           <span class="stop-info">
             <div class="info-indicator"></div>
 
-            <span class="info-distance">
+            <span class="info-distance" v-if="stop.stopDistance">
               {{ Math.floor(stop.stopDistance) }}
             </span>
 
@@ -41,7 +45,9 @@
                 p.
                 {{
                   stylizeTime(
-                    stop.arrivalRealTimeString,
+                    stop.confirmed
+                      ? stop.arrivalRealTimeString
+                      : stop.arrivalTimeString,
                     stop.arrivalDelay,
                     stop.confirmed
                   )
@@ -52,8 +58,9 @@
                 class="date-stop"
                 v-if="stop.stopTime"
                 :class="stop.stopType.replace(', ', '-')"
-                >{{ stop.stopTime }} {{ stop.stopType }}</span
               >
+                {{ stop.stopTime }} {{ stop.stopType }}
+              </span>
 
               <span
                 class="date-departure"
@@ -66,7 +73,9 @@
                 o.
                 {{
                   stylizeTime(
-                    stop.departureRealTimeString,
+                    stop.confirmed
+                      ? stop.departureRealTimeString
+                      : stop.departureTimeString,
                     stop.departureDelay,
                     stop.confirmed
                   )
@@ -112,8 +121,9 @@ export default class TrainSchedule extends Vue {
 
 .train-schedule {
   max-height: 600px;
-  // overflow: auto;
   margin-top: 2em;
+
+  overflow-y: auto;
 }
 
 .schedule-bar,
@@ -140,7 +150,7 @@ export default class TrainSchedule extends Vue {
 
 .schedule-wrapper {
   position: relative;
-  margin-left: 1.5em;
+  margin-left: 2em;
 }
 
 ul.schedule-list {
@@ -178,14 +188,16 @@ li.schedule-item > .stop-info {
   display: flex;
 
   position: relative;
+  text-align: center;
 
   .info-distance {
     position: absolute;
 
     top: 50%;
-    left: -1.8rem;
     transform: translate(-100%, -50%);
 
+    margin-left: -1.7rem;
+
     font-size: 0.8em;
     color: #d6d6d6;
   }
@@ -210,6 +222,9 @@ li.schedule-item > .stop-info {
   .info-name {
     background: rgb(0, 81, 187);
     padding: 0.3rem 0.5rem;
+
+    display: flex;
+    align-items: center;
   }
 
   .info-date {
@@ -227,11 +242,7 @@ li.schedule-item > .stop-info {
         background: #ce8d00;
       }
 
-      &.pt,
-      &.pm,
-      &.pt-pm {
-        background: #252525;
-      }
+      background: #252525;
     }
 
     .date-arrival,

src/components/TrainsView/TrainTable.vue

@@ -76,7 +76,7 @@
               </div>
             </div>
 
-            <div class="info-bottom">
+            <!-- <div class="info-bottom">
               <span
                 class="info-label user-badge"
                 :class="train.stopStatus || 'disconnected'"
@@ -96,7 +96,7 @@
                   </span>
                 </span>
               </span>
-            </div>
+            </div> -->
           </span>
 
           <span class="driver">
@@ -114,7 +114,13 @@
             </span>
 
             <span class="driver-loco">
-              <img :src="train.locoURL" @error="onImageError" />
+              <img
+                v-if="!missingLocoImages.includes(train.locoURL)"
+                :src="train.locoURL"
+                @error="onImageError"
+              />
+
+              <img v-else :src="defaultLocoImage" alt="unknown-train" />
             </span>
           </span>
 
@@ -177,9 +183,7 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch } from "vue-property-decorator";
-
-const unknownTrainImage = require("@/assets/unknown.png");
+import { Vue, Component, Prop } from "vue-property-decorator";
 
 import Train from "@/scripts/interfaces/Train";
 
@@ -194,6 +198,10 @@ export default class TrainTable extends Vue {
 
   showedSchedule = 0;
 
+  missingLocoImages: string[] = [];
+
+  defaultLocoImage = require("@/assets/unknown.png");
+
   ascSVG = require("@/assets/icon-arrow-asc.svg");
   descSVG = require("@/assets/icon-arrow-desc.svg");
 
@@ -211,7 +219,8 @@ export default class TrainTable extends Vue {
   }
 
   onImageError(e: Event) {
-    (e.target as HTMLImageElement).src = unknownTrainImage;
+    const imageEl = e.target as HTMLImageElement;
+    this.missingLocoImages.push(imageEl.src);
   }
 
   generateStopList(stops: any): string | undefined {
@@ -266,7 +275,7 @@ export default class TrainTable extends Vue {
   }
 
   &-row {
-    padding: 1rem;
+    padding: 1em;
     margin-bottom: 1rem;
 
     background-color: $primaryCol;
@@ -281,7 +290,6 @@ export default class TrainTable extends Vue {
         grid-template-columns: 1fr;
         grid-template-rows: repeat(3, minmax(100px, 1fr));
 
-        font-size: 1.25em;
         gap: 0.4em 0;
       }
 
@@ -298,8 +306,6 @@ export default class TrainTable extends Vue {
   justify-content: space-between;
 
   &-category {
-    font-size: 1.05em;
-
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -314,8 +320,6 @@ export default class TrainTable extends Vue {
       background: #1085b3;
       border-radius: 1em;
 
-      font-size: 0.85em;
-
       -moz-user-select: none;
       -webkit-user-select: none;
 
@@ -450,24 +454,22 @@ export default class TrainTable extends Vue {
 }
 
 .warning {
-  border-radius: 15px;
-  padding: 0.1em 1.2em;
+  padding: 0.1em 0.8em;
   margin-right: 0.5em;
 
   display: flex;
   align-items: center;
-
-  color: white;
+  color: black;
 
   font-weight: bold;
-  font-size: 0.7em;
+  font-size: 0.85em;
 
   &.twr {
-    border: 2px solid $twr;
+    background: $twr;
   }
 
   &.skr {
-    border: 2px solid $skr;
+    background: $twr;
   }
 }