Merge branch 'development'

src/components/Global/ActionButton.vue

@@ -25,7 +25,6 @@ export default defineComponent({});
   font-size: 1em;
   font-weight: 500;
 
-  outline: none;
   padding: 0.35em 0.65em;
   cursor: pointer;
 

src/components/TrainsView/TrainInfo.vue

@@ -1,30 +1,144 @@
 <template>
-  <div class="train-info">
+  <div class="train-info simple" tabindex="0">
-    <div class="wrapper">
+    <section>
-      <train-info-simple :train="train" v-if="simpleView" />
+      <span>
-      <train-info-extended :train="train" v-else />
+        <div>
-    </div>
+          <span>
+            <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>
+            <strong v-if="train.timetableData">{{ train.timetableData.category }}&nbsp;</strong>
+            <strong>{{ train.trainNo }}</strong>
+            <span>&nbsp;| {{ train.driverName }}</span>
+          </span>
+
+          <img
+            class="image-offline"
+            style="height: 1em"
+            v-if="!train.currentStationHash"
+            :src="icons.offline"
+            alt="offline"
+            :title="$t('trains.offline')"
+          />
+        </div>
+
+        <div class="timetable_route">
+          <strong v-if="train.timetableData">{{ train.timetableData.route.replace('|', ' - ') }}</strong>
+          <img
+            v-if="getSceneriesWithComments(train.timetableData).length > 0"
+            class="image-warning"
+            :src="icons.warning"
+            :title="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(train.timetableData)})`"
+          />
+        </div>
+
+        <hr style="margin: 0.25em 0" />
+
+        <div class="timetable_stops" v-if="train.timetableData">
+          <span v-if="train.timetableData.followingStops.length > 2">
+            {{ $t('trains.via-title') }}
+            <span v-html="displayStopList(train.timetableData.followingStops)"></span>
+          </span>
+        </div>
+
+        <div class="timetable_progress" style="margin-top: 0.5em" v-if="train.timetableData">
+          <span class="timetable_progress-bar">
+            <span class="bar-bg"></span>
+            <span class="bar-fg" :style="{ width: `${Math.floor(confirmedPercentage(train.timetableData.followingStops))}%` }"></span>
+          </span>
+
+          <span>
+            &nbsp;{{ currentDistance(train.timetableData.followingStops) }} km /
+            <span class="text--primary"> {{ train.timetableData.routeDistance }} km </span>
+            |
+            <span v-html="currentDelay(train.timetableData.followingStops)"></span>
+          </span>
+        </div>
+
+        <div class="driver_position text--grayed" style="margin-top: 0.25em">
+          <span v-if="train.currentStationHash">
+            {{ $t('trains.current-scenery') }} <span>{{ train['currentStationName'] }}&nbsp;</span>
+          </span>
+
+          <span v-else>
+            {{ $t('trains.current-scenery') }}
+            <span>{{ train['currentStationName'].replace(/.[a-zA-Z0-9]+.sc/, '') }} (offline)&nbsp;</span>
+          </span>
+
+          <span v-if="train.signal">
+            {{ $t('trains.current-signal') }} <span>{{ train['signal'] }}&nbsp;</span>
+          </span>
+
+          <span v-if="train.connectedTrack">
+            {{ $t('trains.current-track') }} <span>{{ train['connectedTrack'] }}&nbsp;</span>
+          </span>
+
+          <span v-if="train.distance">({{ displayDistance(train.distance) }})</span>
+        </div>
+      </span>
+    </section>
+
+    <section class="train-image" style="display: flex; justify-content: center; align-items: center">
+      <img :src="train.locoURL" alt="Not Found" @error="onImageError" />
+
+      <div class="text--grayed">
+        {{ train.locoType }}
+        <span v-if="train.cars.length > 0">
+          &nbsp;&bull; {{ $t('trains.cars') }}:
+          <span class="count">{{ train.cars.length }}</span>
+        </span>
+      </div>
+
+      <div>
+        <div>
+          <span v-for="(stat, i) in STATS.main" :key="stat.name">
+            <span v-if="i > 0"> &bull; </span>
+            <span>{{ `${~~(train[stat.name] * (stat.multiplier || 1))}${stat.unit}` }} </span>
+          </span>
+        </div>
+      </div>
+    </section>
   </div>
 </template>
 
 <script lang="ts">
+import trainInfoMixin from '@/mixins/trainInfoMixin';
 import Train from '@/scripts/interfaces/Train';
 import { defineComponent } from 'vue';
-import TrainInfoExtended from './TrainInfoExtended.vue';
-import TrainInfoSimple from './TrainInfoSimple.vue';
 
 export default defineComponent({
-  components: { TrainInfoSimple, TrainInfoExtended },
-
   props: {
     train: {
       type: Object as () => Train,
       required: true,
     },
+  },
 
-    simpleView: {
+  mixins: [trainInfoMixin],
-      type: Boolean,
+
-      default: false,
+  data: () => ({
+    icons: {
+      warning: require('@/assets/icon-warning.svg'),
+      offline: require('@/assets/icon-offline.svg'),
+    },
+  }),
+
+  methods: {
+    generateProgressBar(train: Train) {
+      if (!train.timetableData) return '';
+
+      const percentage = Math.floor(Number(this.confirmedPercentage(train.timetableData.followingStops)));
+
+      let progressBarString = `<span style="color: white"> ${percentage}% </span> `;
+
+      for (let i = 0; i < 5; i++) {
+        progressBarString += `<span style="color: ${
+          i < Math.round(percentage / 20) ? 'springgreen' : 'gray'
+        }">▉</span>`;
+      }
+
+      return progressBarString;
     },
   },
 });
@@ -33,12 +147,134 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../../styles/responsive.scss';
 
-.wrapper {
+.image-warning,
-  font-size: 1em;
+.image-offline {
-  
+  height: 1em;
-  @include smallScreen() {
+
-    font-size: 1.2em;
+  margin-left: 0.5em;
+}
+
+.train-image {
+  display: flex;
+  flex-direction: column;
+
+  img {
+    margin: 0.5em 0;
+    width: 12em;
+  }
+}
+
+.simple {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  grid-template-rows: 1fr;
+
+  padding: 1em;
+  background-color: #202020;
+  gap: 0.5em;
+}
+
+.driver_position:first-letter {
+  text-transform: capitalize;
+}
+
+.timetable_stops {
+  font-size: 0.75em;
+}
+
+.timetable_route {
+  display: flex;
+  align-items: center;
+
+  margin-top: 0.5em;
+}
+
+.timetable_warnings {
+  color: black;
+
+  .warning {
+    padding: 0.1em 0.5em;
+    margin-right: 0.2em;
+
+    font-weight: bold;
+
+    &.twr {
+      background: var(--clr-twr);
+    }
+
+    &.skr {
+      background: var(--clr-skr);
+    }
+  }
+}
+
+.timetable_progress {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.timetable_progress-bar {
+  position: relative;
+
+  width: 100px;
+  height: 1em;
+
+  .bar-fg,
+  .bar-bg {
+    position: absolute;
+    height: 1em;
+    width: 100%;
   }
 
+  .bar-fg {
+    background-color: springgreen;
+  }
+
+  .bar-bg {
+    background-color: #5b5b5b;
+  }
+}
+
+.comments {
+  display: flex;
+  align-items: center;
+
+  font-size: 0.9em;
+
+  margin-top: 1em;
+
+  img {
+    margin-right: 0.5em;
+  }
+}
+
+@include smallScreen() {
+  .simple {
+    grid-template-columns: 1fr;
+    gap: 1em 0;
+    text-align: center;
+  }
+
+  .info-stats {
+    text-align: center;
+  }
+
+  .timetable_route {
+    justify-content: center;
+  }
+
+  .timetable_progress {
+    justify-content: center;
+  }
+
+  .comments {
+    flex-direction: column;
+    justify-content: center;
+
+    img {
+      margin: 0 0 0.5em 0;
+    }
+  }
 }
 </style>

src/components/TrainsView/TrainInfoExtended.vue

@@ -1,305 +0,0 @@
-<template>
-  <div class="train-info extended">
-    <section class="info-timetable">
-      <div v-if="!train.timetableData">
-        <div class="timetable_general">
-          <span>
-            {{ train.trainNo }} |
-            <span>{{ train.driverName }}</span>
-          </span>
-        </div>
-      </div>
-
-      <div 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 class="timetable_driver-stats">
-              <span>
-                <b>{{ train.timetableData.category }}</b>
-                <b>{{ ' ' + train.trainNo }}</b> |
-
-                <span>{{ train.driverName }}</span>
-              </span>
-
-              <img
-                class="image-offline"
-                v-if="!train.currentStationHash"
-                :src="icons.offline"
-                alt="offline"
-                :title="$t('trains.offline')"
-              />
-
-              <span class="hide-info" @click="toggleInfo">
-                <img :src="icons.ascArrow" :class="{ hidden: !isInfoShown }" />
-                <span>{{ isInfoShown ? 'Ukryj' : 'Pokaż' }} informacje</span>
-              </span>
-            </span>
-          </span>
-        </div>
-
-        <div class="timetable_route">
-          {{ train.timetableData.route.replace('|', ' - ') }}
-        </div>
-
-        <div class="timetable_stops" v-if="isInfoShown">
-          <span v-if="train.timetableData.followingStops.length > 2">
-            {{ $t('trains.via-title') }}
-            <span v-html="displayStopList(train.timetableData.followingStops)"></span>
-          </span>
-        </div>
-
-        <div class="timetable_comments" v-if="getSceneriesWithComments(train.timetableData).length > 0 && isInfoShown">
-          {{ $t('trains.comment') }} <b>{{ getSceneriesWithComments(train.timetableData) }}</b>
-        </div>
-      </div>
-    </section>
-
-    <section class="info-driver" v-show="isInfoShown">
-      <div class="driver_cars">
-        <!-- <span v-else>{{ displayLocoInfo(train.locoType) }}</span> -->
-      </div>
-
-      <div class="color: #444;">
-        <span v-if="train.timetableData">
-          <span class="text--primary"> {{ train.timetableData.routeDistance }} </span>km &bull;
-        </span>
-        <span v-for="(stat, i) in STATS.main" :key="stat.name">
-          <span v-if="i > 0">&nbsp;&bull;&nbsp;</span>
-          <span class="text--primary">{{ `${~~(train[stat.name] * (stat.multiplier || 1))}` }}</span>
-          <span>{{ stat.unit }}</span>
-        </span>
-      </div>
-
-      <div class="driver_position">
-        <span v-if="train.currentStationHash">
-          {{ $t('trains.current-scenery') }} <b class="text--primary">{{ train['currentStationName'] }}&nbsp;</b>
-        </span>
-
-        <span v-else>
-          {{ $t('trains.current-scenery') }}
-          <span
-            ><b class="text--primary">{{ train['currentStationName'].replace(/.[a-zA-Z0-9]+.sc/, '') }}</b>
-            (offline)&nbsp;</span
-          >
-        </span>
-
-        <span v-if="train.signal">
-          {{ $t('trains.current-signal') }} <b class="text--primary">{{ train['signal'] }}&nbsp;</b>
-        </span>
-
-        <span v-if="train.connectedTrack">
-          {{ $t('trains.current-track') }} <b class="text--primary">{{ train['connectedTrack'] }}&nbsp;</b>
-        </span>
-
-        <span v-if="train.distance">({{ displayDistance(train.distance) }})</span>
-      </div>
-
-      <div style="margin-top: 0.5em;">
-        <b class="text--grayed"> {{ train.locoType }} </b>
-
-        <span v-if="train.cars.length > 0">
-          &nbsp;&bull; {{ $t('trains.cars') }}:
-          <span class="count">{{ train.cars.length }}</span>
-        </span>
-      </div>
-
-      <div class="driver_stock">
-        <img class="train-image" :src="train.locoURL" alt="loco" @error="onImageError" />
-
-        <img v-if="train.locoType.startsWith('EN')" :src="train.locoURL.replace('rb', 's')" alt="" />
-        <img v-if="train.locoType.startsWith('EN71')" :src="train.locoURL.replace('rb', 's')" alt="" />
-        <img v-if="train.locoType.startsWith('EN')" :src="train.locoURL.replace('rb', 'ra')" alt="" />
-
-        <img
-          v-for="(car, i) in train.cars"
-          :key="i"
-          :src="`https://rj.td2.info.pl/dist/img/thumbnails/${car.split(':')[0]}.png`"
-          @error="onImageError"
-          alt="car"
-        />
-      </div>
-    </section>
-  </div>
-</template>
-
-<script lang="ts">
-import trainInfoMixin from '@/mixins/trainInfoMixin';
-import Train from '@/scripts/interfaces/Train';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  props: {
-    train: {
-      type: Object as () => Train,
-      required: true,
-    },
-  },
-
-  mixins: [trainInfoMixin],
-
-  data: () => ({
-    icons: {
-      warning: require('@/assets/icon-warning.svg'),
-      ascArrow: require('@/assets/icon-arrow-asc.svg'),
-      offline: require('@/assets/icon-offline.svg'),
-    },
-
-    isInfoShown: true,
-  }),
-
-  methods: {
-    toggleInfo() {
-      this.isInfoShown = !this.isInfoShown;
-    },
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-.image-warning,
-.image-offline {
-  width: 1em;
-  height: 1em;
-
-  margin-left: 0.5em;
-}
-
-.extended {
-  margin-top: 0.5em;
-  padding: 1em;
-}
-
-.hide-info {
-  margin-left: 1em;
-
-  img {
-    width: 1.3em;
-    vertical-align: text-bottom;
-
-    &.hidden {
-      transform: rotate(180deg);
-    }
-  }
-
-  cursor: pointer;
-}
-
-.info-timetable {
-  display: flex;
-}
-
-.timetable {
-  &_general {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  &_hero {
-    display: flex;
-  }
-
-  &_srjp .activator {
-    display: flex;
-    align-items: center;
-
-    background-color: #22a8d1;
-    border-radius: 0.5em;
-    padding: 0.1em 0.35em;
-  }
-
-  &_route {
-    font-weight: bold;
-
-    margin: 5px 0;
-
-    font-size: 1.1em;
-  }
-
-  &_stops {
-    margin-bottom: 10px;
-    font-size: 0.8em;
-  }
-
-  &_comments {
-    color: salmon;
-  }
-
-  &_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);
-      }
-    }
-  }
-}
-
-.driver {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-flow: column;
-
-  padding-top: 1em;
-
-  &_header {
-    text-align: center;
-    word-wrap: break-word;
-    margin-top: 1em;
-  }
-
-  &_cars {
-    margin: 0.65em 0;
-    white-space: pre-wrap;
-    text-align: center;
-
-    color: #c5c5c5;
-
-    .count {
-      color: var(--clr-primary);
-    }
-  }
-
-  &_stock {
-    display: flex;
-    align-items: flex-end;
-    overflow-x: auto;
-
-    width: 100%;
-
-    padding: 0.5em 0;
-  }
-
-  &_position {
-    span {
-      text-align: center;
-    }
-
-    &:first-letter {
-      text-transform: capitalize;
-    }
-  }
-}
-</style>

src/components/TrainsView/TrainInfoSimple.vue

@@ -1,244 +0,0 @@
-<template>
-  <div class="train-info simple" tabindex="0">
-    <section>
-      <span>
-        <div>
-          <span>
-            <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>
-            <strong v-if="train.timetableData">{{ train.timetableData.category }}&nbsp;</strong>
-            <strong>{{ train.trainNo }}</strong>
-            <span>&nbsp;| {{ train.driverName }}</span>
-          </span>
-
-          <img
-            class="image-offline"
-            style="height: 1em"
-            v-if="!train.currentStationHash"
-            :src="icons.offline"
-            alt="offline"
-            :title="$t('trains.offline')"
-          />
-        </div>
-
-        <div class="timetable_route">
-          <strong v-if="train.timetableData">{{ train.timetableData.route.replace('|', ' - ') }}</strong>
-          <img
-            v-if="getSceneriesWithComments(train.timetableData).length > 0"
-            class="image-warning"
-            :src="icons.warning"
-            :title="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(train.timetableData)})`"
-          />
-        </div>
-
-        <hr style="margin: 0.25em 0" />
-
-        <div class="timetable_stops" v-if="train.timetableData">
-          <span v-if="train.timetableData.followingStops.length > 2">
-            {{ $t('trains.via-title') }}
-            <span v-html="displayStopList(train.timetableData.followingStops)"></span>
-          </span>
-        </div>
-        <div style="margin-top: 0.5em" v-if="train.timetableData">
-          <span style="color: gray" v-html="generateProgressBar(train)"></span>
-          &nbsp;{{ currentDistance(train.timetableData.followingStops) }} km /
-          <span class="text--primary"> {{ train.timetableData.routeDistance }} km </span>
-          |
-          <span v-html="currentDelay(train.timetableData.followingStops)"></span>
-        </div>
-
-        <div class="driver_position text--grayed" style="margin-top: 0.25em">
-          <span v-if="train.currentStationHash">
-            {{ $t('trains.current-scenery') }} <span>{{ train['currentStationName'] }}&nbsp;</span>
-          </span>
-
-          <span v-else>
-            {{ $t('trains.current-scenery') }}
-            <span>{{ train['currentStationName'].replace(/.[a-zA-Z0-9]+.sc/, '') }} (offline)&nbsp;</span>
-          </span>
-
-          <span v-if="train.signal">
-            {{ $t('trains.current-signal') }} <span>{{ train['signal'] }}&nbsp;</span>
-          </span>
-
-          <span v-if="train.connectedTrack">
-            {{ $t('trains.current-track') }} <span>{{ train['connectedTrack'] }}&nbsp;</span>
-          </span>
-
-          <span v-if="train.distance">({{ displayDistance(train.distance) }})</span>
-        </div>
-      </span>
-    </section>
-
-    <section class="train-image" style="display: flex; justify-content: center; align-items: center;">
-      <img :src="train.locoURL" alt="Not Found" @error="onImageError" />
-
-      <div class="text--grayed">
-        {{ train.locoType }}
-        <span v-if="train.cars.length > 0">
-          &nbsp;&bull; {{ $t('trains.cars') }}:
-          <span class="count">{{ train.cars.length }}</span>
-        </span>
-      </div>
-
-      <div>
-        <div>
-          <span v-for="(stat, i) in STATS.main" :key="stat.name">
-            <span v-if="i > 0"> &bull; </span>
-            <span>{{ `${~~(train[stat.name] * (stat.multiplier || 1))}${stat.unit}` }} </span>
-          </span>
-        </div>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script lang="ts">
-import trainInfoMixin from '@/mixins/trainInfoMixin';
-import Train from '@/scripts/interfaces/Train';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  props: {
-    train: {
-      type: Object as () => Train,
-      required: true,
-    },
-  },
-
-  mixins: [trainInfoMixin],
-
-  data: () => ({
-    icons: {
-      warning: require('@/assets/icon-warning.svg'),
-      offline: require('@/assets/icon-offline.svg'),
-    },
-  }),
-
-  methods: {
-    generateProgressBar(train: Train) {
-      if (!train.timetableData) return '';
-
-      const percentage = Math.floor(Number(this.confirmedPercentage(train.timetableData.followingStops)));
-
-      let progressBarString = `<span style="color: white"> ${percentage}% </span> `;
-
-      for (let i = 0; i < 5; i++) {
-        progressBarString += `<span style="color: ${i < Math.round(percentage / 20) ? 'springgreen' : 'gray'}">▉</span>`;
-      }
-
-      return progressBarString;
-    },
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-
-.image-warning,
-.image-offline {
-  height: 1em;
-
-  margin-left: 0.5em;
-}
-
-.train-image {
-  display: flex;
-  flex-direction: column;
-
-  img {
-    margin: 0.5em 0;
-    width: 12em;
-  }
-}
-
-.simple {
-  display: grid;
-  grid-template-columns: 2fr 1fr;
-  grid-template-rows: 1fr;
-
-  padding: 1em;
-  background-color: #202020;
-  gap: 0.5em;
-
-  &:hover,
-  &:focus {
-    background: #292929;
-  }
-}
-
-.driver_position:first-letter {
-  text-transform: capitalize;
-}
-
-.timetable_stops {
-  font-size: 0.75em;
-}
-
-.timetable_route {
-  display: flex;
-  align-items: center;
-
-  margin-top: 0.5em;
-}
-
-.timetable_warnings {
-  color: black;
-
-  .warning {
-    padding: 0.1em 0.5em;
-    margin-right: 0.2em;
-
-    font-weight: bold;
-
-    &.twr {
-      background: var(--clr-twr);
-    }
-
-    &.skr {
-      background: var(--clr-skr);
-    }
-  }
-}
-
-.comments {
-  display: flex;
-  align-items: center;
-
-  font-size: 0.9em;
-
-  margin-top: 1em;
-
-  img {
-    margin-right: 0.5em;
-  }
-}
-
-@include smallScreen() {
-  .simple {
-    grid-template-columns: 1fr;
-    gap: 1em 0;
-    text-align: center;
-  }
-
-  .info-stats {
-    text-align: center;
-  }
-
-  .timetable_route {
-    justify-content: center;
-  }
-
-  .comments {
-    flex-direction: column;
-    justify-content: center;
-
-    img {
-      margin: 0 0 0.5em 0;
-    }
-  }
-}
-</style>

src/components/TrainsView/TrainSchedule.vue

@@ -1,8 +1,43 @@
-p<template>
+p
+<template>
   <div class="train-schedule" @click="toggleShowState">
+    <div class="train-stock">
+      <ul class="stock-list">
+        <li>
+          <img class="train-image" :src="train.locoURL" alt="loco" @error="onImageError" />
+          <div>{{ train.locoType }}</div>
+        </li>
+
+        <li v-if="train.locoType.startsWith('EN')">
+          <img :src="train.locoURL.replace('rb', 's')" @error="onImageError" alt="" />
+          <div>{{ train.locoType }}S</div>
+        </li>
+
+        <li v-if="train.locoType.startsWith('EN71')">
+          <img :src="train.locoURL.replace('rb', 's')" @error="onImageError" alt="" />
+          <div>{{ train.locoType }}S</div>
+        </li>
+
+        <li v-if="train.locoType.startsWith('EN')">
+          <img :src="train.locoURL.replace('rb', 'ra')" @error="onImageError" alt="" />
+          <div>{{ train.locoType }}RA</div>
+        </li>
+
+        <li v-for="(car, i) in train.cars" :key="i">
+          <img
+            :src="`https://rj.td2.info.pl/dist/img/thumbnails/${car.split(':')[0]}.png`"
+            @error="onImageError"
+            alt="car"
+          />
+
+          <div>{{ car.replace(/_/g, ' ').split(":")[0] }}</div>
+        </li>
+      </ul>
+    </div>
+
     <div class="schedule-wrapper">
       <ul class="stop_list">
-        <li v-for="(stop, i) in followingStops" :key="i" class="stop" :class="addClasses(stop, i)">
+        <li v-for="(stop, i) in train.timetableData!.followingStops" :key="i" class="stop" :class="addClasses(stop, i)">
           <span class="stop_info">
             <div class="indicator"></div>
 
@@ -19,25 +54,25 @@ p<template>
             <stop-date :stop="stop" />
           </span>
 
-          <div class="stop_line" v-if="i < followingStops.length - 1">
+          <div class="stop_line" v-if="i < train.timetableData!.followingStops.length - 1">
             <div class="progress-bar"></div>
 
-            <div v-if="stop.comments" style="color: salmon;">
+            <div v-if="stop.comments" style="color: salmon">
               <b>{{ stop.stopNameRAW }} </b>: <span v-html="stop.comments"></span>
             </div>
 
-            <span v-if="stop.departureLine == followingStops[i + 1].arrivalLine">
+            <span v-if="stop.departureLine == train.timetableData!.followingStops[i + 1].arrivalLine">
               {{ stop.departureLine }}
             </span>
 
             <span v-else>
               {{ stop.departureLine }} /
-              {{ followingStops[i + 1].arrivalLine }}
+              {{ train.timetableData!.followingStops[i + 1].arrivalLine }}
             </span>
           </div>
 
           <div class="stop_line" v-else>
-            <div v-if="stop.comments" style="color: salmon;">
+            <div v-if="stop.comments" style="color: salmon">
               <b>{{ stop.stopNameRAW }} </b>: <span v-html="stop.comments"></span>
             </div>
           </div>
@@ -48,16 +83,17 @@ p<template>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from '@vue/runtime-core';
+import { computed, defineComponent, PropType } from '@vue/runtime-core';
 import dateMixin from '@/mixins/dateMixin';
 import TrainStop from '@/scripts/interfaces/TrainStop';
 import StopDate from '../Global/StopDate.vue';
+import Train from '@/scripts/interfaces/Train';
 
 export default defineComponent({
   components: { StopDate },
   props: {
-    followingStops: {
+    train: {
-      type: Array as () => TrainStop[],
+      type: Object as PropType<Train>,
       required: true,
     },
   },
@@ -75,20 +111,20 @@ export default defineComponent({
   setup(props) {
     return {
       lastConfirmed: computed(() => {
-        return props.followingStops.findIndex(
+        return props.train.timetableData!.followingStops.findIndex(
           (stop, i, stops) => stop.confirmed && !stops[i + 1]?.confirmed && !stops[i + 1]?.stopped
         );
       }),
       activeMinorStops: computed(() => {
-        const lastMajorConfirmed = props.followingStops.findIndex(
+        const lastMajorConfirmed = props.train.timetableData!.followingStops.findIndex(
           (stop, i, stops) => stop.confirmed && !stops[i + 1]?.confirmed
         );
 
         const activeMinorStopList: number[] = [];
-        if (lastMajorConfirmed + 1 >= props.followingStops.length) return activeMinorStopList;
+        if (lastMajorConfirmed + 1 >= props.train.timetableData!.followingStops.length) return activeMinorStopList;
 
-        for (let i = lastMajorConfirmed + 1; i < props.followingStops.length; i++) {
+        for (let i = lastMajorConfirmed + 1; i < props.train.timetableData!.followingStops.length; i++) {
-          if (props.followingStops[i].stopNameRAW.includes('po.')) activeMinorStopList.push(i);
+          if (props.train.timetableData!.followingStops[i].stopNameRAW.includes('po.')) activeMinorStopList.push(i);
           else break;
         }
 
@@ -115,6 +151,11 @@ export default defineComponent({
         'last-confirmed': index == this.lastConfirmed && !stop.terminatesHere,
       };
     },
+
+    onImageError(e: Event) {
+      const imageEl = e.target as HTMLImageElement;
+      imageEl.src = require('@/assets/unknown.png');
+    },
   },
 });
 </script>
@@ -138,19 +179,39 @@ $stopNameClr: #22a8d1;
 }
 
 .train-schedule {
-  min-height: 400px;
+  background-color: #202020;
-
+  padding: 0 0.25em;
-  overflow-y: auto;
-
-  z-index: 5;
 
   @include smallScreen() {
     font-size: 1.1em;
   }
 }
 
+.train-stock {
+  padding: 0.25em 0.5em;
+  display: flex;
+  justify-content: center;
+}
+ul.stock-list {
+  display: flex;
+  align-items: end;
+  overflow-x: auto;
+  padding-bottom: 1em;
+
+  li > div {
+    text-align: center;
+    color: #aaa;
+    font-size: 0.9em;
+  }
+}
+
 .schedule-wrapper {
-  margin-left: 2.5rem;
+  overflow-y: auto;
+  max-height: 500px;
+  width: 100%;
+  z-index: 5;
+
+  margin-top: 1em;
 }
 
 .progress-bar {
@@ -200,6 +261,10 @@ $stopNameClr: #22a8d1;
   }
 }
 
+ul.stop_list {
+  margin-left: 2.5em;
+}
+
 ul.stop_list > li.stop {
   position: relative;
 
@@ -324,7 +389,7 @@ ul.stop_list > li.stop {
 
     margin-left: -1.75rem;
 
-    font-size: 0.85em;
+    font-size: 0.75em;
     color: #d6d6d6;
   }
 

src/components/TrainsView/TrainTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="train-table" @keydown.esc="closeTimetableCard">
+  <div class="train-table" @keydown.esc="closeTimetable" v-click-outside="closeTimetable">
     <transition name="anim" mode="out-in">
       <div :key="trainsDataStatus">
         <!-- <div class="traffic-warning" v-if="data.">
@@ -19,18 +19,21 @@
             class="train-row"
             v-for="train in currentTrains"
             :key="train.trainNo + train.driverId"
-            @click="showTrainTimetable(train)"
+            @click="toggleTimetable(train)"
-            @keydown.enter="showTrainTimetable(train)"
+            @keydown.enter="toggleTimetable(train)"
           >
-            <TrainInfo :train="train" :simpleView="true" />
+            <TrainInfo :train="train" />
+
+            <TrainSchedule
+              v-if="train.timetableData && chosenTrainId == getTrainId(train)"
+              :train="train"
+              ref="card-inner"
+              tabindex="0"
+            />
           </li>
         </ul>
       </div>
     </transition>
-
-    <span v-if="chosenTrain">
-      <train-timetable-card :train="chosenTrain" @close="closeTimetableCard" ref="card" />
-    </span>
   </div>
 </template>
 
@@ -47,13 +50,11 @@ import TrainInfo from '@/components/TrainsView/TrainInfo.vue';
 
 import { DataStatus } from '@/scripts/enums/DataStatus';
 import { GETTERS } from '@/constants/storeConstants';
-import TrainTimetableCard from './TrainTimetableCard.vue';
 import { ref } from 'vue';
 
 export default defineComponent({
   components: {
     TrainSchedule,
-    TrainTimetableCard,
     TrainInfo,
   },
 
@@ -85,24 +86,13 @@ export default defineComponent({
 
     const currentTrains = computed(() => {
       return props.trains;
-
-      //.slice(currentPage.value * PAGE_CAPACITY, currentPage.value * PAGE_CAPACITY + PAGE_CAPACITY);
     });
 
     const chosenTrainId = ref(null) as Ref<string | null>;
     const chosenTrain = computed(() =>
-      props.trains.find((train) => train.trainNo + train.driverName === chosenTrainId.value)
+      props.trains.find((train: Train) => train.trainNo + train.driverName === chosenTrainId.value)
     );
 
-    // watch([searchedTrain, searchedDriver], () => {
-    //   currentPage.value = 0;
-    // });
-
-    // watch(paginatorPageCount, (value) => {
-    //   if (currentPage.value >= value)
-    //     currentPage.value = paginatorPageCount.value - 1 < 0 ? 0 : paginatorPageCount.value - 1;
-    // });
-
     return {
       searchedTrain,
       searchedDriver,
@@ -144,13 +134,21 @@ export default defineComponent({
       }, 10);
     },
 
-    showTrainTimetable(train: Train) {
+    toggleTimetable(train: Train) {
-      this.chosenTrainId = train.trainNo + train.driverName;
+      this.chosenTrainId = this.chosenTrainId && this.chosenTrainId == this.getTrainId(train) ? null : this.getTrainId(train);
     },
 
-    closeTimetableCard() {
+    closeTimetable() {
       this.chosenTrainId = null;
     },
+
+    showTrainId(train: Train) {
+      console.log(this.getTrainId(train));
+    },
+
+    getTrainId(train: Train) {
+      return train.driverId.toString() + train.trainNo.toString();
+    }
   },
 });
 </script>

src/components/TrainsView/TrainTimetableCard.vue

@@ -1,80 +0,0 @@
-<template>
-  <div class="bg-dimmer" @click="close"></div>
-  <section class="train-timetable-card card">
-    <div class="card-exit" @click="close" @keydown.enter="close" tabindex="0">
-      <img :src="icons.exit" alt="icon-exit" />
-    </div>
-
-    <train-info :train="train" />
-    <train-schedule
-      v-if="train.timetableData"
-      :followingStops="train.timetableData.followingStops"
-      ref="card-inner"
-      tabindex="0"
-    />
-  </section>
-</template>
-
-<script lang="ts">
-import Train from '@/scripts/interfaces/Train';
-import { defineComponent } from 'vue';
-import TrainInfo from './TrainInfo.vue';
-import TrainSchedule from './TrainSchedule.vue';
-
-export default defineComponent({
-  components: { TrainInfo, TrainSchedule },
-  emits: ['close'],
-
-  data: () => ({
-    icons: {
-      exit: require('@/assets/icon-exit.svg'),
-    },
-  }),
-  props: {
-    train: {
-      type: Object as () => Train,
-      required: true,
-    },
-  },
-  setup() {
-    return {};
-  },
-
-  methods: {
-    close() {
-      this.$emit('close');
-    },
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/card';
-
-.bg-dimmer {
-  position: fixed;
-
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-
-  z-index: 25;
-
-  background: rgba(black, 0.5);
-}
-
-.train-timetable-card {
-  padding: 0.5em;
-
-  width: 95%;
-  max-width: 1300px;
-  max-height: calc(100vh - 2em);
-
-  background-color: #202020;
-  
-
-  top: 0;
-  transform: translate(-50%, 1em);
-}
-</style>

src/mixins/trainInfoMixin.ts

@@ -68,7 +68,7 @@ export default defineComponent({
         },
 
         confirmedPercentage(stops: TrainStop[]) {
-            return ((stops.filter((stop) => stop.confirmed).length / stops.length) * 100).toFixed(0);
+            return Number(((stops.filter((stop) => stop.confirmed).length / stops.length) * 100).toFixed(0));
         },
 
         currentDelay(stops: TrainStop[]) {
@@ -100,7 +100,7 @@ export default defineComponent({
             const moreCount = commentList.length - 10;
 
 
-            return commentList.slice(0,10).join(", ") + (moreCount > 0 ? `... (+${moreCount})` : '');
+            return commentList.slice(0, 10).join(", ") + (moreCount > 0 ? `... (+${moreCount})` : '');
         },
 
         displayDistance(distance: number) {