Fix: mylenie rozkładów jazdy dla AZ (ciąg dalszy)

src/components/TrainsView/TrainInfo.vue

@@ -0,0 +1,375 @@
+<template>
+  <div class="train-info">
+    <div class="wrapper">
+      <span class="info">
+        <div class="info_timetable" v-if="!train.timetableData">
+          <div class="timetable_general">
+            <span>
+              {{ train.trainNo }} |
+              <span style="color: gold">
+                {{ $t('trains.no-timetable') }}
+              </span>
+            </span>
+          </div>
+        </div>
+
+        <div class="info_timetable" v-else>
+          <div class="timetable_general">
+            <span class="timetable_hero">
+              <span class="timetable_warnings">
+                <span class="warning twr" v-if="train.timetableData.TWR">
+                  TWR
+                </span>
+
+                <span class="warning skr" v-if="train.timetableData.SKR">
+                  SKR
+                </span>
+              </span>
+
+              <span>
+                <strong>{{ train.timetableData.category }}</strong>
+                {{ train.trainNo }} |
+                <span style="color: gold"> {{ train.timetableData.routeDistance }} km </span>
+              </span>
+            </span>
+          </div>
+
+          <div class="timetable_route">
+            {{ train.timetableData.route.replace('|', ' - ') }}
+          </div>
+
+          <div class="timetable_stops">
+            <!-- <span v-if="train.timetableData.followingStops.length > 2">
+              {{ $t('trains.via-title') }}
+              <span v-html="displayStopList(train.timetableData.followingStops)"></span>
+            </span> -->
+          </div>
+        </div>
+
+        <div class="info_comments" v-if="getSceneriesWithComments(train.timetableData).length > 0">
+          <img
+            :src="icons.warning"
+            :title="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(train.timetableData).join(',')})`"
+          />
+        </div>
+      </span>
+
+      <span class="driver">
+        <div class="driver-info">
+          <span class="driver-name">
+            {{ train.driverName }}
+          </span>
+          &bull;
+          <span class="driver-type">
+            {{ train.locoType }}
+          </span>
+        </div>
+
+        <span class="driver-loco">
+          <div class="driver-cars">
+            <span v-if="train.cars.length > 0">
+              {{ $t('trains.cars') }}:
+              <span class="count">{{ train.cars.length }}</span>
+            </span>
+            <span v-else>{{ displayLocoInfo(train.locoType) }}</span>
+          </div>
+
+          <!-- <img class="train-image" hidden="true" :src="train.locoURL" :alt="train.locoType" @load="onImageLoad" /> -->
+        </span>
+      </span>
+
+      <!-- <span class="stats">
+        <div class="stats-main">
+          <span v-for="stat in STATS.main" :key="stat.name">
+            <img :src="require(`@/assets/icon-${stat.name}.svg`)" :alt="stat.name" />
+            {{ `${~~(train[stat.name] * (stat.multiplier || 1))}${stat.unit}` }}
+          </span>
+        </div>
+
+        <div class="stats-position">
+          <span v-for="stat in STATS.position" :key="stat.name">
+            <div><img :src="require(`@/assets/icon-${stat.name}.svg`)" :alt="stat.name" /> -</div>
+            {{ (train[stat.prop] || '---') + (stat.unit || '') }}
+          </span>
+        </div>
+      </span> -->
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Train from '@/scripts/interfaces/Train';
+import TrainStop from '@/scripts/interfaces/TrainStop';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    train: {
+      type: Object as () => Train,
+      required: true,
+    },
+  },
+
+  data: () => ({
+    icons: {
+      warning: require('@/assets/icon-warning.svg'),
+    },
+
+    STATS: {
+      main: [
+        {
+          name: 'mass',
+          unit: 't',
+          multiplier: 0.001,
+        },
+        {
+          name: 'speed',
+          unit: 'km/h',
+        },
+        {
+          name: 'length',
+          unit: 'm',
+        },
+      ],
+
+      position: [
+        {
+          name: 'scenery',
+          prop: 'currentStationName',
+        },
+        {
+          name: 'route',
+          prop: 'connectedTrack',
+        },
+        {
+          name: 'signal',
+          prop: 'signal',
+        },
+        {
+          name: 'distance',
+          prop: 'distance',
+          unit: 'm',
+        },
+      ],
+    },
+  }),
+
+  methods: {
+    displayStopList(stops: TrainStop[]): string | undefined {
+      if (!stops) return '';
+
+      return stops
+        .reduce((acc: string[], stop: TrainStop, i: number) => {
+          if (stop.stopType.includes('ph') && !stop.stopNameRAW.includes('po.'))
+            acc.push(`<strong style='color:${stop.confirmed ? 'springgreen' : 'white'}'>${stop.stopName}</strong>`);
+          else if (
+            i > 0 &&
+            i < stops.length - 1 &&
+            !stop.stopNameRAW.includes('po.') &&
+            !stop.stopNameRAW.includes('SBL')
+          )
+            acc.push(`<span style='color:${stop.confirmed ? 'springgreen' : 'lightgray'}'>${stop.stopName}</span>`);
+          return acc;
+        }, [])
+        .join(' > ');
+    },
+
+    displayLocoInfo(locoType: string) {
+      if (locoType.includes('EN')) return `${this.$t('trains.EZT')}`;
+      if (locoType.includes('SN')) return `${this.$t('trains.SZT')}`;
+      if (locoType.startsWith('E')) return `${this.$t('trains.loco-electric')}`;
+      if (locoType.startsWith('S')) return `${this.$t('trains.loco-diesel')}`;
+
+      return '';
+    },
+
+    getSceneriesWithComments(timetableData: Train['timetableData']) {
+      return (
+        timetableData?.followingStops.reduce((acc, stop) => {
+          if (stop.comments) acc.push(stop.stopNameRAW);
+
+          return acc;
+        }, [] as string[]) || []
+      );
+    },
+
+    onImageError(e: Event) {
+      const imageEl = e.target as HTMLImageElement;
+
+      imageEl.hidden = true;
+    },
+
+    onImageLoad(e: Event) {
+      const imageEl = e.target as HTMLImageElement;
+      imageEl.hidden = false;
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/responsive.scss';
+
+.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
+  grid-template-rows: 1fr;
+
+  @include smallScreen() {
+    font-size: 1.2em;
+  }
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  & .timetable {
+    &_hero {
+      display: flex;
+    }
+
+    &_general {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    &_srjp .activator {
+      display: flex;
+      align-items: center;
+
+      background-color: #22a8d1;
+      border-radius: 0.5em;
+      padding: 0.1em 0.35em;
+    }
+
+    &_route {
+      display: flex;
+      align-items: center;
+
+      font-weight: bold;
+
+      margin: 5px 0;
+
+      font-size: 1.1em;
+    }
+
+    &_stops {
+      margin-bottom: 10px;
+      font-size: 0.7em;
+    }
+
+    &_warnings {
+      display: flex;
+      color: black;
+
+      .warning {
+        padding: 0.1em 0.65em;
+        margin-right: 0.35em;
+
+        font-weight: bold;
+
+        &.twr {
+          background: var(--clr-twr);
+        }
+
+        &.skr {
+          background: var(--clr-skr);
+        }
+      }
+    }
+  }
+
+  &_comments {
+    img {
+      width: 1.75em;
+    }
+  }
+}
+
+.driver {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-flow: column;
+
+  grid-row: span 2;
+
+  padding: 2em 0;
+
+  &-info {
+    text-align: center;
+    word-wrap: break-word;
+  }
+
+  &-name {
+    font-weight: bold;
+  }
+
+  &-loco {
+    width: 100%;
+    text-align: center;
+  }
+
+  &-cars {
+    margin: 0.65em 0;
+    white-space: pre-wrap;
+    text-align: center;
+
+    color: #c5c5c5;
+
+    .count {
+      color: var(--clr-primary);
+    }
+  }
+}
+
+.stats {
+  font-size: 0.9em;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  padding: 1em 0;
+
+  &-main {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    & > span {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      width: 100%;
+    }
+
+    img {
+      margin: 0 0.3em;
+      width: 2em;
+    }
+  }
+
+  &-position {
+    display: flex;
+
+    margin-top: 1em;
+    text-align: center;
+
+    p {
+      color: var(--clr-accent);
+    }
+
+    & > span {
+      width: 100%;
+
+      img {
+        width: 2em;
+      }
+    }
+  }
+}
+</style>

src/components/TrainsView/TrainTable.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="train-table">
+    <train-timetable-card test="test" />
+
     <transition name="train-list-anim" mode="out-in">
       <div :key="Number(timetableLoaded) + currentPage">
         <div class="traffic-warning" v-if="distanceLimitExceeded">
@@ -22,124 +24,20 @@
             v-for="train in currentTrains"
             :key="train.trainNo + train.driverId"
             tabindex="0"
-            @click="showTrainTimetable(train.trainNo, train.timetableData?.timetableId)"
+            @click="showTrainTimetable(train.timetableData?.timetableId)"
-            @keydown.enter="showTrainTimetable(train.trainNo, train.timetableData?.timetableId)"
+            @keydown.enter="showTrainTimetable(train.timetableData?.timetableId)"
           >
-            <div class="row-wrapper">
+            <TrainInfo :train="train" />
-              <span class="info">
+            <!-- <TrainSchedule
-                <div class="info_timetable" v-if="!train.timetableData">
-                  <div class="timetable_general">
-                    <span>
-                      {{ train.trainNo }} |
-                      <span style="color: gold">
-                        {{ $t('trains.no-timetable') }}
-                      </span>
-                    </span>
-                  </div>
-                </div>
-
-                <div class="info_timetable" v-else>
-                  <div class="timetable_general">
-                    <span class="timetable_hero">
-                      <span class="timetable_warnings">
-                        <span class="warning twr" v-if="train.timetableData.TWR">
-                          TWR
-                        </span>
-
-                        <span class="warning skr" v-if="train.timetableData.SKR">
-                          SKR
-                        </span>
-                      </span>
-
-                      <span>
-                        <strong>{{ train.timetableData.category }}</strong>
-                        {{ train.trainNo }} |
-                        <span style="color: gold"> {{ train.timetableData.routeDistance }} km </span>
-                      </span>
-                    </span>
-                  </div>
-
-                  <div class="timetable_route">
-                    {{ train.timetableData.route.replace('|', ' - ') }}
-                  </div>
-
-                  <div class="timetable_stops">
-                    <span v-if="train.timetableData.followingStops.length > 2">
-                      {{ $t('trains.via-title') }}
-                      <span v-html="displayStopList(train.timetableData.followingStops)"></span>
-                    </span>
-                  </div>
-                </div>
-
-                <div class="info_comments" v-if="getSceneriesWithComments(train.timetableData).length > 0">
-                  <img
-                    :src="icons.warning"
-                    :title="
-                      `${$t('trains.timetable-comments')} (${getSceneriesWithComments(train.timetableData).join(',')})`
-                    "
-                  />
-                </div>
-              </span>
-
-              <span class="driver">
-                <div class="driver-info">
-                  <span class="driver-name">
-                    {{ train.driverName }}
-                  </span>
-                  &bull;
-                  <span class="driver-type">
-                    {{ train.locoType }}
-                  </span>
-                </div>
-
-                <span class="driver-loco">
-                  <div class="driver-cars">
-                    <span v-if="train.cars.length > 0">
-                      {{ $t('trains.cars') }}:
-                      <span class="count">{{ train.cars.length }}</span>
-                    </span>
-                    <span v-else>{{ displayLocoInfo(train.locoType) }}</span>
-                  </div>
-
-                  <img
-                    class="train-image"
-                    hidden="true"
-                    :src="train.locoURL"
-                    :alt="train.locoType"
-                    @load="onImageLoad"
-                  />
-                </span>
-              </span>
-
-              <span class="stats">
-                <div class="stats-main">
-                  <span v-for="stat in stats.main" :key="stat.name">
-                    <img :src="require(`@/assets/icon-${stat.name}.svg`)" :alt="stat.name" />
-                    {{ `${~~(train[stat.name] * (stat.multiplier || 1))}${stat.unit}` }}
-                  </span>
-                </div>
-
-                <div class="stats-position">
-                  <span v-for="stat in stats.position" :key="stat.name">
-                    <div>
-                      <img :src="require(`@/assets/icon-${stat.name}.svg`)" :alt="stat.name" />
-                    </div>
-                    {{ (train[stat.prop] || '---') + (stat.unit || '') }}
-                  </span>
-                </div>
-              </span>
-            </div>
-
-            <TrainSchedule
               v-if="train.timetableData?.timetableId == chosenSchedule"
               :followingStops="train.timetableData?.followingStops"
-            />
+            /> -->
           </li>
         </ul>
       </div>
     </transition>
 
-    <transition name="train-list-anim">
+    <!-- <transition name="train-list-anim">
       <div class="paginator" v-if="timetableLoaded && currentTrains.length > 0">
         <span
           class="paginator_item"
@@ -184,7 +82,7 @@
           &gt;{{ paginatorPageCount }}
         </span>
       </div>
-    </transition>
+    </transition> -->
   </div>
 </template>
 
@@ -195,15 +93,19 @@ import { useStore } from '@/store';
 import defaultVehicleIconsJSON from '@/data/defaultVehicleIcons.json';
 
 import Train from '@/scripts/interfaces/Train';
-import TrainStop from '@/scripts/interfaces/TrainStop';
+
 import TrainSchedule from '@/components/TrainsView/TrainSchedule.vue';
+import TrainInfo from '@/components/TrainsView/TrainInfo.vue';
 
 import { DataStatus } from '@/scripts/enums/DataStatus';
 import { GETTERS } from '@/constants/storeConstants';
+import TrainTimetableCard from './TrainTimetableCard.vue';
 
 export default defineComponent({
   components: {
     TrainSchedule,
+    TrainTimetableCard,
+    TrainInfo,
   },
 
   props: {
@@ -217,50 +119,11 @@ export default defineComponent({
     defaultLocoImage: require('@/assets/unknown.png'),
 
     icons: {
-      warning: require('@/assets/icon-warning.svg'),
       arrowAsc: require('@/assets/icon-arrow-asc.svg'),
       arrowDesc: require('@/assets/icon-arrow-desc.svg'),
     },
 
     defaultVehicleIcons: defaultVehicleIconsJSON,
-
-    stats: {
-      main: [
-        {
-          name: 'mass',
-          unit: 't',
-          multiplier: 0.001,
-        },
-        {
-          name: 'speed',
-          unit: 'km/h',
-        },
-        {
-          name: 'length',
-          unit: 'm',
-        },
-      ],
-
-      position: [
-        {
-          name: 'scenery',
-          prop: 'currentStationName',
-        },
-        {
-          name: 'route',
-          prop: 'connectedTrack',
-        },
-        {
-          name: 'signal',
-          prop: 'signal',
-        },
-        {
-          name: 'distance',
-          prop: 'distance',
-          unit: 'm',
-        },
-      ],
-    },
   }),
 
   setup(props) {
@@ -280,7 +143,9 @@ export default defineComponent({
     const paginatorPageCount = computed(() => Math.ceil(props.trains.length / PAGE_CAPACITY));
 
     const currentTrains = computed(() => {
-      return props.trains.slice(currentPage.value * PAGE_CAPACITY, currentPage.value * PAGE_CAPACITY + PAGE_CAPACITY);
+      return props.trains;
+
+      //.slice(currentPage.value * PAGE_CAPACITY, currentPage.value * PAGE_CAPACITY + PAGE_CAPACITY);
     });
 
     watch([searchedTrain, searchedDriver], () => {
@@ -335,62 +200,16 @@ export default defineComponent({
       }, 10);
     },
 
-    showTrainTimetable(trainNo: number, timetableId: number | undefined) {
+    showTrainTimetable(timetableId: number | undefined) {
-      if (!timetableId && this.trains.length == 1) this.searchedTrain = '';
+      if(!timetableId) return;
-      if (!timetableId) return;
 
-      this.searchedTrain =
+      console.log("Gituwa", timetableId);
-        this.searchedTrain == trainNo.toString() && this.chosenSchedule != 0 ? '' : trainNo.toString();
+      
-      this.chosenSchedule = this.chosenSchedule == timetableId ? 0 : timetableId;
+      // if (!timetableId && this.trains.length == 1) this.searchedTrain = '';
-    },
+      // if (!timetableId) return;
-
+      // this.searchedTrain =
-    onImageError(e: Event) {
+      //   this.searchedTrain == trainNo.toString() && this.chosenSchedule != 0 ? '' : trainNo.toString();
-      const imageEl = e.target as HTMLImageElement;
+      // this.chosenSchedule = this.chosenSchedule == timetableId ? 0 : timetableId;
-
-      imageEl.hidden = true;
-    },
-
-    onImageLoad(e: Event) {
-      const imageEl = e.target as HTMLImageElement;
-      imageEl.hidden = false;
-    },
-
-    displayStopList(stops: TrainStop[]): string | undefined {
-      if (!stops) return '';
-
-      return stops
-        .reduce((acc: string[], stop: TrainStop, i: number) => {
-          if (stop.stopType.includes('ph') && !stop.stopNameRAW.includes('po.'))
-            acc.push(`<strong style='color:${stop.confirmed ? 'springgreen' : 'white'}'>${stop.stopName}</strong>`);
-          else if (
-            i > 0 &&
-            i < stops.length - 1 &&
-            !stop.stopNameRAW.includes('po.') &&
-            !stop.stopNameRAW.includes('SBL')
-          )
-            acc.push(`<span style='color:${stop.confirmed ? 'springgreen' : 'lightgray'}'>${stop.stopName}</span>`);
-          return acc;
-        }, [])
-        .join(' > ');
-    },
-
-    displayLocoInfo(locoType: string) {
-      if (locoType.includes('EN')) return `${this.$t('trains.EZT')}`;
-      if (locoType.includes('SN')) return `${this.$t('trains.SZT')}`;
-      if (locoType.startsWith('E')) return `${this.$t('trains.loco-electric')}`;
-      if (locoType.startsWith('S')) return `${this.$t('trains.loco-diesel')}`;
-
-      return '';
-    },
-
-    getSceneriesWithComments(timetableData: Train['timetableData']) {
-      return (
-        timetableData?.followingStops.reduce((acc, stop) => {
-          if (stop.comments) acc.push(stop.stopNameRAW);
-
-          return acc;
-        }, [] as string[]) || []
-      );
     },
 
     changePageTo(index: number) {
@@ -449,6 +268,11 @@ img.train-image {
 
 .train {
   &-list {
+    max-height: 1000px;
+    overflow: auto;
+
+    padding-right: 0.5em;
+
     @include smallScreen() {
       width: 100%;
     }
@@ -460,16 +284,6 @@ img.train-image {
 
     background-color: var(--clr-secondary);
     cursor: pointer;
-
-    .row-wrapper {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
-      grid-template-rows: 1fr;
-
-      @include smallScreen() {
-        font-size: 1.2em;
-      }
-    }
   }
 
   &_cars {
@@ -480,159 +294,6 @@ img.train-image {
   }
 }
 
-.info {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-
-  & .timetable {
-    &_hero {
-      display: flex;
-    }
-
-    &_general {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-
-    &_srjp .activator {
-      display: flex;
-      align-items: center;
-
-      background-color: #22a8d1;
-      border-radius: 0.5em;
-      padding: 0.1em 0.35em;
-    }
-
-    &_route {
-      display: flex;
-      align-items: center;
-
-      font-weight: bold;
-
-      margin: 5px 0;
-
-      font-size: 1.1em;
-    }
-
-    &_stops {
-      margin-bottom: 10px;
-      font-size: 0.7em;
-    }
-
-    &_warnings {
-      display: flex;
-      color: black;
-
-      .warning {
-        padding: 0.1em 0.65em;
-        margin-right: 0.35em;
-
-        font-weight: bold;
-
-        &.twr {
-          background: var(--clr-twr);
-        }
-
-        &.skr {
-          background: var(--clr-skr);
-        }
-      }
-    }
-  }
-
-  &_comments {
-    img {
-      width: 1.75em;
-    }
-  }
-}
-
-.driver {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-flow: column;
-
-  grid-row: span 2;
-
-  padding: 2em 0;
-
-  &-info {
-    text-align: center;
-    word-wrap: break-word;
-  }
-
-  &-name {
-    font-weight: bold;
-  }
-
-  &-loco {
-    width: 100%;
-    text-align: center;
-  }
-
-  &-cars {
-    margin: 0.65em 0;
-    white-space: pre-wrap;
-    text-align: center;
-
-    color: #c5c5c5;
-
-    .count {
-      color: var(--clr-primary);
-    }
-  }
-}
-
-.stats {
-  font-size: 0.9em;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-
-  padding: 1em 0;
-
-  &-main {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    & > span {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      width: 100%;
-    }
-
-    img {
-      margin: 0 0.3em;
-      width: 2em;
-    }
-  }
-
-  &-position {
-    display: flex;
-
-    margin-top: 1em;
-    text-align: center;
-
-    p {
-      color: var(--clr-accent);
-    }
-
-    & > span {
-      width: 100%;
-
-      img {
-        width: 2em;
-      }
-    }
-  }
-}
-
 .paginator {
   display: flex;
   justify-content: center;

src/components/TrainsView/TrainTimetableCard.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+  </div>
+</template>
+
+<script lang="ts">
+import Train from '@/scripts/interfaces/Train';
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  props: {
+    train: {
+      type: Object as () => Train,
+      required: true
+    }
+  },
+  setup () {
+    
+
+    return {}
+  },
+
+  mounted() {
+    console.log("test");
+    
+  }
+})
+</script>
+
+<style scoped>
+
+</style>

src/store/index.ts

@@ -398,13 +398,16 @@ export const store = createStore<State>({
       state.stationList = state.stationList.map(station => {
         const stationName = station.name.toLowerCase();
 
-        const scheduledTrains: ScheduledTrain[] = timetableList.reduce((acc: ScheduledTrain[], timetable: Timetable) => {
+        console.log(stationName, station.onlineInfo?.hash);
+
+        const scheduledTrains: ScheduledTrain[] = timetableList.reduce((acc: ScheduledTrain[], timetable: Timetable) => {          
           if (!timetable.followingSceneries.includes(station.onlineInfo?.hash || "")) return acc;
 
           const stopInfoIndex = timetable.followingStops.findIndex(stop => {
             const stopName = stop.stopNameRAW.toLowerCase();
 
-            if (station.generalInfo?.name == "Arkadia Zdrój 2019" && stop.pointId != "1583014379097") return false;
+            // if (stop.stopName == "ARKADIA ZDRÓJ" && station.name == "Arkadia Zdrój 2019" && stop.pointId != "1583014379097") return false;
+            // if (stop.stopName == "ARKADIA ZDRÓJ" && station.name == "Arkadia Zdrój 2012" && stop.pointId != "1519258642187") return false;
             
             if (stationName === stopName) return true;
             if (stopName.includes(stationName) && !stop.stopName.includes("po.") && !stop.stopName.includes("podg.")) return true;
@@ -450,6 +453,8 @@ export const store = createStore<State>({
 
           for (const checkpoint of station.generalInfo.checkpoints) {
             timetableList.forEach(timetable => {
+              if (!timetable.followingSceneries.includes(station.onlineInfo?.hash || "")) return;
+
               timetable.followingStops
                 .filter(trainStop => trainStop.stopNameRAW.toLowerCase() === checkpoint.checkpointName.toLowerCase())
                 .forEach(trainStop => {