chore: redesigned train schedule list

src/components/TrainsView/StopLabel.vue

@@ -9,12 +9,13 @@
         stop.arrivalDelay > 0 && stop.status != 'unconfirmed'
           ? 'delayed'
           : stop.arrivalDelay < 0 && stop.status != 'unconfirmed'
-          ? 'preponed'
+            ? 'preponed'
-          : stop.arrivalDelay == 0 && stop.status == 'confirmed'
+            : stop.arrivalDelay == 0 && stop.status == 'confirmed'
-          ? 'on-time'
+              ? 'on-time'
-          : ''
+              : ''
       "
     >
+      p.
       <span v-if="stop.arrivalDelay != 0 && stop.status != 'unconfirmed'">
         <s>{{ timestampToString(stop.arrivalScheduled) }}</s>
         {{ timestampToString(stop.arrivalReal) }}
@@ -39,7 +40,11 @@
         stop.departureDelay - stop.arrivalDelay > 0 && !stop.duration ? 'delayed' : ''
       "
     >
-      {{ stop.duration || stop.departureDelay - stop.arrivalDelay }}
+      {{
+        stop.duration == 0 && stop.departureDelay > 0
+          ? stop.departureDelay - stop.arrivalDelay
+          : stop.duration
+      }}
       {{ stop.type == '' ? 'pt' : stop.type }}
     </span>
 
@@ -53,12 +58,13 @@
         stop.departureDelay > 0 && stop.status == 'confirmed'
           ? 'delayed'
           : stop.departureDelay < 0 && stop.status == 'confirmed'
-          ? 'preponed'
+            ? 'preponed'
-          : stop.departureDelay == 0 && stop.status == 'confirmed'
+            : stop.departureDelay == 0 && stop.status == 'confirmed'
-          ? 'on-time'
+              ? 'on-time'
-          : ''
+              : ''
       "
     >
+      o.
       <span v-if="stop.departureDelay != 0 && stop.status == 'confirmed'">
         <s>{{ timestampToString(stop.departureScheduled) }}</s>
         {{ timestampToString(stop.departureReal) }}
@@ -96,7 +102,7 @@ $delayedClr: salmon;
 $dateClr: #525151;
 $stopExchangeClr: #db8e29;
 $stopDefaultClr: #252525;
-$stopNameClr: #22a8d1;
+$stopNameClr: #303030;
 
 .stop-label {
   display: flex;
@@ -117,6 +123,7 @@ $stopNameClr: #22a8d1;
 
   .name {
     background: $stopNameClr;
+    border-radius: 0.5em 0 0 0.5em;
     padding: 0.3em 0.5em;
 
     display: flex;
@@ -130,6 +137,10 @@ $stopNameClr: #22a8d1;
   .date {
     background: $dateClr;
     padding: 0.3em 0.5em;
+
+    &:last-child {
+      border-radius: 0 0.5em 0.5em 0;
+    }
   }
 
   .stop {
@@ -150,7 +161,7 @@ $stopNameClr: #22a8d1;
   .departure {
     &[data-status='delayed'] {
       s {
-        color: #999;
+        color: #ccc;
       }
 
       span {
@@ -160,7 +171,7 @@ $stopNameClr: #22a8d1;
 
     &[data-status='preponed'] {
       s {
-        color: #999;
+        color: #ccc;
       }
 
       span {

src/components/TrainsView/TrainSchedule.vue

@@ -14,7 +14,6 @@
           :data-stop-type="stop.type"
           :data-minor-stop-active="stop.isActive"
           :data-last-confirmed="stop.isLastConfirmed"
-          x
         >
           <span class="stop_info">
             <span class="distance">
@@ -48,51 +47,46 @@
               <span
                 v-if="
                   stop.departureLine &&
-                  stop.departureLine == scheduleStops[i + 1]?.arrivalLine &&
+                  scheduleStops[i + 1] != undefined &&
-                  !/sbl/gi.test(stop.departureLine)
+                  !/-|_|(^it\d+)|(^sbl)/gi.test(stop.departureLine)
                 "
               >
-                {{ stop.departureLine }}
-              </span>
-
-              <span v-else-if="stop.departureLine && !/sbl/gi.test(stop.departureLine)">
                 <div class="scenery-route">
-                  <span> {{ stop.departureLine }} | {{ stop.departureLineSpeed }}</span>
+                  <span>{{ stop.departureLine }}</span>
-
+                  <span v-if="stop.departureLineInfo">
-                  <img
+                    | {{ stop.departureLineInfo.routeSpeed }}
-                    v-if="stop.departureLineElectrified == false"
+                    <span v-if="stop.departureLineInfo.isElectric">⚡</span>
-                    src="/images/icon-w4a.png"
+                    <img
-                    title="szlak spalinowy"
+                      v-else
-                    width="15"
+                      src="/images/icon-we4a.png"
-                  />
+                      :title="$t('trains.we4a-tooltip')"
-
+                      width="12"
-                  <span v-if="stop.departureLineElectrified == true">⚡</span>
+                    />
+                  </span>
                 </div>
 
                 <div
+                  v-if="stop.sceneryName != scheduleStops[i + 1]?.sceneryName"
                   class="scenery-change-name"
-                  v-if="
-                    i < scheduleStops.length - 1 &&
-                    stop.sceneryName != scheduleStops[i + 1].sceneryName
-                  "
                 >
-                  {{ scheduleStops[i + 1].sceneryName }}
+                  <span>{{ scheduleStops[i + 1].sceneryName }}</span>
+                  <span v-if="stop.departureLineInfo?.routeTracks == 1"> &UpDownArrow;</span>
+                  <span v-else> &UpArrowDownArrow;</span>
                 </div>
 
                 <div class="scenery-route">
-                  <span>
+                  <span> {{ scheduleStops[i + 1].arrivalLine }}</span>
-                    {{ scheduleStops[i + 1].arrivalLine }} |
+
-                    {{ scheduleStops[i + 1].arrivalLineSpeed }}
+                  <span v-if="scheduleStops[i + 1].arrivalLineInfo">
+                    | {{ scheduleStops[i + 1].arrivalLineInfo!.routeSpeed }}
+                    <span v-if="scheduleStops[i + 1].arrivalLineInfo!.isElectric">⚡</span>
+                    <img
+                      v-else
+                      src="/images/icon-we4a.png"
+                      :title="$t('trains.we4a-tooltip')"
+                      width="12"
+                    />
                   </span>
-
-                  <img
-                    v-if="scheduleStops[i + 1].arrivalLineElectrified == false"
-                    src="/images/icon-w4a.png"
-                    title="szlak spalinowy"
-                    width="15"
-                  />
-
-                  <span v-if="scheduleStops[i + 1].arrivalLineElectrified == true">⚡</span>
                 </div>
               </span>
             </div>
@@ -110,7 +104,7 @@ import StopLabel from './StopLabel.vue';
 import StockList from '../Global/StockList.vue';
 import { useMainStore } from '../../store/mainStore';
 import { useApiStore } from '../../store/apiStore';
-import { Train } from '../../typings/common';
+import { StationRoutesInfo, Train } from '../../typings/common';
 
 export interface TrainScheduleStop {
   nameHtml: string;
@@ -136,17 +130,15 @@ export interface TrainScheduleStop {
   isSBL: boolean;
 
   sceneryName: string | null;
-  sceneryHash: string;
   distance: number;
 
   arrivalLine: string | null;
   departureLine: string | null;
 
-  arrivalLineSpeed: number;
+  arrivalLineInfo?: StationRoutesInfo;
-  arrivalLineElectrified: boolean | null;
+  departureLineInfo?: StationRoutesInfo;
 
-  departureLineSpeed: number;
+  isExternal: boolean;
-  departureLineElectrified: boolean | null;
 
   comments: string | null;
 }
@@ -177,13 +169,14 @@ export default defineComponent({
 
       return (
         this.train.timetableData?.followingStops.map((stop, i, arr) => {
-          if (
+          const isExternal =
             i > 0 &&
-            stop.arrivalLine &&
+            stop.arrivalLine != null &&
-            stop.arrivalLine != arr[i - 1].departureLine &&
+            (stop.arrivalLine != arr[i - 1].departureLine ||
-            !/sbl/gi.test(stop.arrivalLine)
+              (stop.arrivalLine == arr[i - 1].departureLine &&
-          )
+                !/-|_|(^it\d+)|(^sbl)/gi.test(stop.arrivalLine)));
-            currentSceneryIndex++;
+
+          if (isExternal) currentSceneryIndex++;
 
           const sceneryName = this.train.timetableData!.sceneryNames[currentSceneryIndex];
           const sceneryInfo = this.apiStore.sceneryData.find((st) => st.name == sceneryName);
@@ -214,12 +207,12 @@ export default defineComponent({
             comments: stop.comments ?? null,
 
             arrivalLine: stop.arrivalLine,
-            arrivalLineSpeed: arrivalLineInfo?.routeSpeed ?? 0,
-            arrivalLineElectrified: arrivalLineInfo?.isElectric ?? null,
-
             departureLine: stop.departureLine,
-            departureLineSpeed: departureLineInfo?.routeSpeed ?? 0,
+
-            departureLineElectrified: departureLineInfo?.isElectric ?? null,
+            arrivalLineInfo: arrivalLineInfo,
+            departureLineInfo: departureLineInfo,
+
+            isExternal,
 
             type: stop.stopType,
             distance: stop.stopDistance,
@@ -227,7 +220,6 @@ export default defineComponent({
             isLastConfirmed: this.lastConfirmed === i && !stop.terminatesHere,
             isSBL: /sbl/gi.test(stop.stopName),
             position: stop.beginsHere ? 'begin' : stop.terminatesHere ? 'end' : 'en-route',
-            sceneryHash: '',
             sceneryName,
             status: stop.confirmed ? 'confirmed' : stop.stopped ? 'stopped' : 'unconfirmed'
           };
@@ -531,9 +523,9 @@ $blinkAnim: 0.5s ease-in-out alternate infinite blink;
 }
 
 .scenery-route {
-  display: flex;
+  img {
-  align-items: center;
+    vertical-align: middle;
-  gap: 5px;
+  }
 }
 
 .scenery-change-name {

src/locales/en.json

@@ -332,6 +332,7 @@
     "current-track": "on track",
 
     "vmax-tooltip": "Maximum train speed based on rolling stock vehicles - braked weight is not included",
+    "we4a-tooltip": "Non-electrified track",
 
     "delayed": "Delayed: ",
     "preponed": "Ahead of schedule: ",

src/locales/pl.json

@@ -318,6 +318,7 @@
     "current-track": "na szlaku",
 
     "vmax-tooltip": "Maksymalna prędkość na podstawie pojazdów w składzie - nie bierze pod uwagę masy hamowania",
+    "we4a-tooltip": "Szlak niezelektryfikowany",
 
     "delayed": "Opóźniony: ",
     "preponed": "Przed czasem: ",