refactor: optimization of train schedules

src/components/SceneryView/SceneryInfo.vue

@@ -72,7 +72,7 @@
 
       <div class="info-lists">
         <!-- user list -->
-        <SceneryInfoUserList :onlineScenery="onlineScenery" />
+        <SceneryInfoUserList :onlineScenery="onlineScenery" :station="station" />
 
         <!-- spawn list -->
         <SceneryInfoSpawnList :onlineScenery="onlineScenery" />

src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue

@@ -13,13 +13,13 @@
       </li>
 
       <li
-        v-for="train in onlineScenery?.stationTrains"
+        v-for="{ train, status } in stationTrains"
         class="badge user"
-        :class="train.stopStatus"
-        :key="train.trainId"
         tabindex="0"
-        @click.prevent="selectModalTrain(train.trainId, $event.currentTarget)"
-        @keydown.enter="selectModalTrain(train.trainId, $event.currentTarget)"
+        :key="train.id"
+        :data-status="status"
+        @click.prevent="selectModalTrain(train.id, $event.currentTarget)"
+        @keydown.enter="selectModalTrain(train.id, $event.currentTarget)"
       >
         <span class="user_train">{{ train.trainNo }}</span>
         <span class="user_name">{{ train.driverName }}</span>
@@ -32,7 +32,9 @@
 import { PropType, defineComponent } from 'vue';
 import modalTrainMixin from '../../../mixins/modalTrainMixin';
 import routerMixin from '../../../mixins/routerMixin';
-import { ActiveScenery } from '../../../typings/common';
+import { ActiveScenery, Station, StopStatus } from '../../../typings/common';
+import { getTrainStopStatus } from '../utils';
+import { useMainStore } from '../../../store/mainStore';
 
 export default defineComponent({
   mixins: [routerMixin, modalTrainMixin],
@@ -41,6 +43,38 @@ export default defineComponent({
     onlineScenery: {
       type: Object as PropType<ActiveScenery>,
       required: false
+    },
+    station: {
+      type: Object as PropType<Station>
+    }
+  },
+
+  data() {
+    return {
+      mainStore: useMainStore()
+    };
+  },
+
+  computed: {
+    stationTrains() {
+      if (!this.onlineScenery) return;
+
+      const name = this.station?.generalInfo?.checkpoints[0] ?? this.onlineScenery.name;
+
+      return this.onlineScenery.stationTrains.map((train) => {
+        const stop = train.timetableData?.followingStops.find(
+          (stop) => stop.stopNameRAW.toLowerCase() == name.toLowerCase()
+        );
+
+        const status = stop
+          ? getTrainStopStatus(stop, train.currentStationName, this.onlineScenery!.name)
+          : 'no-timetable';
+
+        return {
+          train,
+          status
+        };
+      });
     }
   }
 });
@@ -74,31 +108,31 @@ ul {
     -webkit-transition: background-color 200ms;
   }
 
-  &.no-timetable .user_train {
+  &[data-status='no-timetable'] .user_train {
     background-color: $no-timetable;
   }
 
-  &.departed > &_train {
+  &[data-status='departed'] > &_train {
     background-color: $departed;
   }
 
-  &.stopped > &_train {
+  &[data-status='stopped'] > &_train {
     background-color: $stopped;
   }
 
-  &.online > &_train {
+  &[data-status='online'] > &_train {
     background-color: $online;
   }
 
-  &.terminated > &_train {
+  &[data-status='terminated'] > &_train {
     background-color: $terminated;
   }
 
-  &.disconnected > &_train {
+  &[data-status='disconnected'] > &_train {
     background-color: $disconnected;
   }
 
-  &.offline {
+  &[data-status='offline'] {
     background: firebrick;
     pointer-events: none;
   }

src/components/SceneryView/SceneryTimetable.vue

@@ -40,7 +40,7 @@
       <transition-group name="list-anim">
         <div
           style="padding-bottom: 5em"
-          v-if="apiStore.dataStatuses.connection == 0 && computedScheduledTrains.length == 0"
+          v-if="apiStore.dataStatuses.connection == 0 && sceneryTimetables.length == 0"
           key="list-loading"
         >
           <Loading />
@@ -48,7 +48,7 @@
 
         <span
           class="timetable-item empty"
-          v-else-if="computedScheduledTrains.length == 0 && !onlineScenery"
+          v-else-if="sceneryTimetables.length == 0 && !onlineScenery"
           key="list-offline"
         >
           {{ $t('scenery.offline') }}
@@ -56,7 +56,7 @@
 
         <div
           class="timetable-item empty"
-          v-else-if="computedScheduledTrains.length == 0"
+          v-else-if="sceneryTimetables.length == 0"
           key="list-no-timetables"
         >
           {{ $t('scenery.no-timetables') }}
@@ -65,59 +65,56 @@
         <div
           class="timetable-item"
           v-else
-          v-for="scheduledTrain in computedScheduledTrains"
-          :key="scheduledTrain.trainId + scheduledTrain.stopInfo.arrivalTimestamp"
+          v-for="row in sceneryTimetables"
+          :key="row.train.id + row.checkpointStop.arrivalTimestamp"
           tabindex="0"
-          @click.prevent.stop="selectModalTrain(scheduledTrain.trainId, $event.currentTarget)"
-          @keydown.enter.prevent="selectModalTrain(scheduledTrain.trainId, $event.currentTarget)"
+          @click.prevent.stop="selectModalTrain(row.train.id, $event.currentTarget)"
+          @keydown.enter.prevent="selectModalTrain(row.train.id, $event.currentTarget)"
         >
           <span class="timetable-general">
             <span class="general-info">
               <span class="info-number">
-                <strong>{{ scheduledTrain.category }}</strong>
-                {{ scheduledTrain.trainNo }}
+                <strong>{{ row.train.timetableData!.category }}</strong>
+                {{ row.train.trainNo }}
 
-                <span
-                  v-if="scheduledTrain.stopInfo.comments"
-                  :title="scheduledTrain.stopInfo.comments"
-                >
+                <span v-if="row.checkpointStop.comments" :title="row.checkpointStop.comments">
                   <img src="/images/icon-warning.svg" />
                 </span>
               </span>
               &nbsp;|&nbsp;
               <span>
-                {{ scheduledTrain.driverName }}
+                {{ row.train.driverName }}
               </span>
 
               <div class="info-route">
-                <strong>{{ scheduledTrain.beginsAt }} - {{ scheduledTrain.terminatesAt }}</strong>
+                <strong>{{ row.train.timetableData!.route.replace('|', ' - ') }}</strong>
               </div>
 
-              <ScheduledTrainStatus :scheduledTrain="scheduledTrain" />
+              <ScheduledTrainStatus :sceneryTimetableRow="row" />
             </span>
           </span>
 
           <span class="timetable-schedule">
             <span class="schedule-arrival">
-              <span class="arrival-time begins" v-if="scheduledTrain.stopInfo.beginsHere">
+              <span class="arrival-time begins" v-if="row.checkpointStop.beginsHere">
                 {{ $t('timetables.begins') }}
               </span>
 
               <span class="arrival-time" v-else>
-                <div v-if="scheduledTrain.stopInfo.arrivalDelay == 0">
-                  <span>{{ timestampToString(scheduledTrain.stopInfo.arrivalTimestamp) }}</span>
+                <div v-if="row.checkpointStop.arrivalDelay == 0">
+                  <span>{{ timestampToString(row.checkpointStop.arrivalTimestamp) }}</span>
                 </div>
                 <div v-else>
                   <div>
                     <s style="margin-right: 0.2em" class="text--grayed">{{
-                      timestampToString(scheduledTrain.stopInfo.arrivalTimestamp)
+                      timestampToString(row.checkpointStop.arrivalTimestamp)
                     }}</s>
                   </div>
 
                   <span>
-                    {{ timestampToString(scheduledTrain.stopInfo.arrivalRealTimestamp) }}
-                    ({{ scheduledTrain.stopInfo.arrivalDelay > 0 ? '+' : ''
-                    }}{{ scheduledTrain.stopInfo.arrivalDelay }})
+                    {{ timestampToString(row.checkpointStop.arrivalRealTimestamp) }}
+                    ({{ row.checkpointStop.arrivalDelay > 0 ? '+' : ''
+                    }}{{ row.checkpointStop.arrivalDelay }})
                   </span>
                 </div>
               </span>
@@ -125,41 +122,39 @@
 
             <span class="schedule-stop">
               <span class="stop-connection">
-                {{ scheduledTrain.arrivingLine }}
+                {{ row.arrivingLine }}
               </span>
 
               <span class="stop-time">
-                {{ scheduledTrain.stopInfo.stopTime || '' }}
-                {{
-                  scheduledTrain.stopInfo.stopTime ? scheduledTrain.stopInfo.stopType || 'pt' : ''
-                }}
+                {{ row.checkpointStop.stopTime || '' }}
+                {{ row.checkpointStop.stopTime ? row.checkpointStop.stopType || 'pt' : '' }}
               </span>
 
               <span class="stop-connection">
-                {{ scheduledTrain.departureLine }}
+                {{ row.departureLine }}
               </span>
             </span>
 
             <span class="schedule-departure">
-              <span class="departure-time terminates" v-if="scheduledTrain.stopInfo.terminatesHere">
+              <span class="departure-time terminates" v-if="row.checkpointStop.terminatesHere">
                 {{ $t('timetables.terminates') }}
               </span>
 
               <span class="departure-time" v-else>
-                <div v-if="scheduledTrain.stopInfo.departureDelay == 0">
-                  <span>{{ timestampToString(scheduledTrain.stopInfo.departureTimestamp) }}</span>
+                <div v-if="row.checkpointStop.departureDelay == 0">
+                  <span>{{ timestampToString(row.checkpointStop.departureTimestamp) }}</span>
                 </div>
                 <div v-else>
                   <div>
                     <s style="margin-right: 0.2em" class="text--grayed">{{
-                      timestampToString(scheduledTrain.stopInfo.departureTimestamp)
+                      timestampToString(row.checkpointStop.departureTimestamp)
                     }}</s>
                   </div>
 
                   <span>
-                    {{ timestampToString(scheduledTrain.stopInfo.departureRealTimestamp) }}
-                    ({{ scheduledTrain.stopInfo.departureDelay > 0 ? '+' : ''
-                    }}{{ scheduledTrain.stopInfo.departureDelay }})
+                    {{ timestampToString(row.checkpointStop.departureRealTimestamp) }}
+                    ({{ row.checkpointStop.departureDelay > 0 ? '+' : ''
+                    }}{{ row.checkpointStop.departureDelay }})
                   </span>
                 </div>
               </span>
@@ -183,6 +178,8 @@ import modalTrainMixin from '../../mixins/modalTrainMixin';
 import ScheduledTrainStatus from './ScheduledTrainStatus.vue';
 import { useApiStore } from '../../store/apiStore';
 import { ActiveScenery, Station } from '../../typings/common';
+import { SceneryTimetableRow } from './typings';
+import { getTrainStopStatus, stopStatusPriority } from './utils';
 
 export default defineComponent({
   name: 'SceneryTimetable',
@@ -204,10 +201,6 @@ export default defineComponent({
     listOpen: false
   }),
 
-  mounted() {
-    this.loadSelectedOption();
-  },
-
   activated() {
     this.loadSelectedOption();
   },
@@ -241,27 +234,105 @@ export default defineComponent({
       return url;
     },
 
-    computedScheduledTrains() {
+    sceneryTimetables(): SceneryTimetableRow[] {
       if (!this.station) return [];
+      if (!this.onlineScenery) return [];
 
-      return (
-        this.onlineScenery?.scheduledTrains
-          ?.filter(
-            (train) =>
-              train.checkpointName.toLocaleLowerCase() ==
-                (this.chosenCheckpoint || this.station!.name).toLocaleLowerCase() &&
-              train.region == this.mainStore.region.id
-          )
-          .sort((a, b) => {
-            if (a.stopStatusID > b.stopStatusID) return 1;
-            if (a.stopStatusID < b.stopStatusID) return -1;
+      return this.onlineScenery.scheduledTrains
+        .filter(
+          (ct) =>
+            ct.train.region == this.mainStore.region.id &&
+            this.chosenCheckpoint &&
+            ct.checkpointStop.stopNameRAW.toLowerCase() == this.chosenCheckpoint.toLowerCase()
+        )
+        .map((ct) => {
+          const trainStopStatus = getTrainStopStatus(
+            ct.checkpointStop,
+            ct.train.currentStationName,
+            this.station!.name
+          );
 
-            if (a.stopInfo.arrivalTimestamp > b.stopInfo.arrivalTimestamp) return 1;
-            if (a.stopInfo.arrivalTimestamp < b.stopInfo.arrivalTimestamp) return -1;
+          const trainStopIndex =
+            ct.train.timetableData?.followingStops.findIndex(
+              (stop) => stop.stopName == ct.checkpointStop.stopName
+            ) ?? -1;
 
-            return a.stopInfo.departureTimestamp > b.stopInfo.departureTimestamp ? 1 : -1;
-          }) || []
-      );
+          let prevStationName = '',
+            nextStationName = '';
+
+          let departureLine: string | null = null;
+          let arrivingLine: string | null = null;
+
+          let prevDepartureLine: string | null = null,
+            nextArrivalLine: string | null = null;
+
+          if (trainStopIndex > -1 && ct.train.timetableData?.followingStops !== undefined) {
+            for (let i = trainStopIndex; i >= 0; i--) {
+              const stop = ct.train.timetableData.followingStops[i];
+
+              if (
+                /strong|podg\.|pe\./g.test(stop.stopName) &&
+                !prevStationName &&
+                i <= trainStopIndex - 1
+              )
+                prevStationName = stop.stopNameRAW.replace(/,.*/g, '');
+
+              if (
+                stop.arrivalLine != null &&
+                !arrivingLine &&
+                !/-|_|it|sbl/gi.test(stop.arrivalLine)
+              ) {
+                arrivingLine = stop.arrivalLine;
+                prevDepartureLine =
+                  ct.train.timetableData.followingStops[i - 1]?.departureLine || null;
+              }
+            }
+
+            for (let i = trainStopIndex; i < ct.train.timetableData.followingStops.length; i++) {
+              const stop = ct.train.timetableData.followingStops[i];
+
+              if (
+                /strong|podg\.|pe\./g.test(stop.stopName) &&
+                !nextStationName &&
+                i > trainStopIndex
+              )
+                nextStationName = stop.stopNameRAW.replace(/,.*/g, '');
+
+              if (
+                stop.departureLine &&
+                !departureLine &&
+                !/-|_|it|sbl/gi.test(stop.departureLine)
+              ) {
+                departureLine = stop.departureLine;
+                nextArrivalLine = ct.train.timetableData.followingStops[i + 1]?.arrivalLine || null;
+              }
+            }
+          }
+
+          return {
+            checkpointStop: ct.checkpointStop,
+            train: ct.train,
+            prevDepartureLine,
+            nextArrivalLine,
+            departureLine,
+            arrivingLine,
+            prevStationName,
+            nextStationName,
+            status: trainStopStatus
+          };
+        })
+        .sort((a, b) => {
+          if (stopStatusPriority.indexOf(a.status) - stopStatusPriority.indexOf(b.status) < 0)
+            return -1;
+
+          if (stopStatusPriority.indexOf(a.status) - stopStatusPriority.indexOf(b.status) > 0)
+            return 1;
+
+          if (a.checkpointStop.arrivalTimestamp > b.checkpointStop.arrivalTimestamp) return 1;
+          if (a.checkpointStop.arrivalTimestamp < b.checkpointStop.arrivalTimestamp) return -1;
+
+          return a.checkpointStop.departureTimestamp > b.checkpointStop.departureTimestamp ? 1 : -1;
+        });
     }
   },
 

src/components/SceneryView/ScheduledTrainStatus.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="general-status">
     <span
-      :class="computedScheduledTrain.stopStatus"
+      :class="computedScheduledTrain.status"
       :title="computedScheduledTrain.stopStatusDescription"
     >
       {{ computedScheduledTrain.stopStatusIndicator }}
@@ -11,25 +11,21 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
-import { ScheduledTrain, StopStatus } from '../../typings/common';
-
-interface ScheduledTrainComp extends ScheduledTrain {
-  stopStatusIndicator: string;
-  stopStatusDescription: string;
-}
+import { StopStatus } from '../../typings/common';
+import { SceneryTimetableRow } from './typings';
 
 export default defineComponent({
   props: {
-    scheduledTrain: {
-      type: Object as PropType<ScheduledTrain>,
+    sceneryTimetableRow: {
+      type: Object as PropType<SceneryTimetableRow>,
       required: true
     }
   },
 
   computed: {
-    computedScheduledTrain(): ScheduledTrainComp {
-      const { prevDepartureLine, prevStationName, stopStatus, nextArrivalLine, nextStationName } =
-        this.scheduledTrain;
+    computedScheduledTrain() {
+      const { prevDepartureLine, prevStationName, nextArrivalLine, nextStationName, status } =
+        this.sceneryTimetableRow;
 
       const prevDepartureIndicator = prevDepartureLine
         ? `(${prevDepartureLine}) ${prevStationName}`
@@ -41,7 +37,7 @@ export default defineComponent({
       let stopStatusDescription = '',
         stopStatusIndicator = '';
 
-      switch (stopStatus) {
+      switch (status) {
         case StopStatus.ARRIVING:
           stopStatusIndicator = `${this.$t('timetables.from')}: ${prevDepartureIndicator}`;
           stopStatusDescription = this.$t('timetables.desc-arriving', {
@@ -56,7 +52,7 @@ export default defineComponent({
             ? `${this.$t('timetables.to')}: ${nextArrivalIndicator}`
             : `${this.$t('timetables.desc-end')}`;
           stopStatusDescription = nextArrivalLine
-            ? this.$t(`timetables.desc-${stopStatus}`, { nextStationName, nextArrivalLine })
+            ? this.$t(`timetables.desc-${status}`, { nextStationName, nextArrivalLine })
             : '';
           break;
 
@@ -85,7 +81,7 @@ export default defineComponent({
           break;
       }
       return {
-        ...this.scheduledTrain,
+        ...this.sceneryTimetableRow,
         stopStatusDescription,
         stopStatusIndicator
       };

src/components/SceneryView/typings.ts

@@ -0,0 +1,13 @@
+import { StopStatus, Train, TrainStop } from '../../typings/common';
+
+export interface SceneryTimetableRow {
+  checkpointStop: TrainStop;
+  train: Train;
+  prevDepartureLine: string | null;
+  nextArrivalLine: string | null;
+  departureLine: string | null;
+  arrivingLine: string | null;
+  prevStationName: string | null;
+  nextStationName: string | null;
+  status: StopStatus;
+}

src/components/SceneryView/utils.ts

@@ -0,0 +1,42 @@
+import { StopStatus, TrainStop } from '../../typings/common';
+
+export const stopStatusPriority = [
+  StopStatus.ONLINE,
+  StopStatus.STOPPED,
+  StopStatus.DEPARTED,
+  StopStatus.ARRIVING,
+  StopStatus.DEPARTED_AWAY,
+  StopStatus.TERMINATED
+];
+
+export function getTrainStopStatus(
+  stopInfo: TrainStop,
+  currentStationName: string,
+  sceneryName: string
+) {
+  if (stopInfo.terminatesHere && stopInfo.confirmed) {
+    return StopStatus.TERMINATED;
+  }
+
+  if (!stopInfo.terminatesHere && stopInfo.confirmed && currentStationName == sceneryName) {
+    return StopStatus.DEPARTED;
+  }
+
+  if (!stopInfo.terminatesHere && stopInfo.confirmed && currentStationName != sceneryName) {
+    return StopStatus.DEPARTED_AWAY;
+  }
+
+  if (currentStationName == sceneryName && !stopInfo.stopped) {
+    return StopStatus.ONLINE;
+  }
+
+  if (currentStationName == sceneryName && stopInfo.stopped) {
+    return StopStatus.STOPPED;
+  }
+
+  if (currentStationName != sceneryName) {
+    return StopStatus.ARRIVING;
+  }
+
+  return StopStatus.ONLINE;
+}