train modal

src/App.vue

@@ -4,7 +4,7 @@
 
     <transition name="modal-anim">
       <keep-alive>
-        <TrainModal v-if="store.chosenModalTrainId" />
+        <TrainModal />
       </keep-alive>
     </transition>
 

src/components/TrainsView/TrainInfo.vue

@@ -93,7 +93,7 @@
       </div>
 
       <div class="general-status">
-        <div class="timetable-progress" v-if="train.timetableData">
+        <div class="status-timetable-progress" v-if="train.timetableData">
           <ProgressBar :progressPercent="confirmedPercentage(train.timetableData.followingStops)" />
 
           <span class="progress-distance">
@@ -117,19 +117,24 @@
         </div>
       </div>
 
-      <div v-if="extended">
+      <div class="general-stats" v-if="extended">
-        <span> {{ train.length }}m</span>
+        <div>
-        &bull;
+          <img src="/images/icon-length.svg" alt="length icon" />
-        <span> {{ (train.mass / 1000).toFixed(1) }}t</span>
+          {{ train.length }}m
-        <span v-if="train.stockList.length > 1">
+        </div>
-          &bull;
+
-          {{ $t('trains.cars') }}: {{ train.stockList.length - 1 }}
+        <div>
-        </span>
+          <img src="/images/icon-mass.svg" alt="mass icon" />
-        |
+          {{ (train.mass / 1000).toFixed(1) }}t
-        <span class="text--primary">{{ train.speed }} km/h</span>
+        </div>
+
+        <div>
+          <img src="/images/icon-speed.svg" alt="speed icon" />
+          {{ train.speed }} km/h
+        </div>
       </div>
 
-      <div class="driver_position text--grayed" style="margin-top: 0.25em">
+      <div class="text--grayed" style="margin-top: 0.25em">
         {{ displayTrainPosition(train) }}
       </div>
     </section>
@@ -296,6 +301,27 @@ export default defineComponent({
   gap: 0.25em;
 }
 
+.general-stats {
+  display: flex;
+  gap: 0.5em;
+  flex-wrap: wrap;
+
+  & > div {
+    display: flex;
+    align-items: center;
+    gap: 0.25em;
+  }
+
+  img {
+    width: 1.5em;
+  }
+}
+
+.general-timetable {
+  display: flex;
+  align-items: center;
+}
+
 .status-badges {
   display: flex;
   flex-wrap: wrap;
@@ -307,17 +333,7 @@ export default defineComponent({
   }
 }
 
-.general-timetable {
+.status-timetable-progress {
-  display: flex;
-  align-items: center;
-}
-
-.timetable-warnings {
-  display: flex;
-  gap: 0.25em;
-}
-
-.timetable-progress {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -327,6 +343,11 @@ export default defineComponent({
   margin-right: 0.25em;
 }
 
+.timetable-warnings {
+  display: flex;
+  gap: 0.25em;
+}
+
 @include smallScreen() {
   .train-info {
     grid-template-columns: 1fr;

src/components/TrainsView/TrainModal.vue

@@ -13,17 +13,27 @@ import { defineComponent } from 'vue';
 import modalTrainMixin from '../../mixins/modalTrainMixin';
 import TrainInfo from './TrainInfo.vue';
 import TrainSchedule from './TrainSchedule.vue';
+import Train from '../../scripts/interfaces/Train';
 
 export default defineComponent({
   components: { TrainInfo, TrainSchedule },
   mixins: [modalTrainMixin],
 
-  activated() {
+  computed: {
-    const contentEl = this.$refs['content'] as HTMLElement;
+    chosenTrain() {
+      return this.store.trainList.find((train) => train.trainId == this.store.chosenModalTrainId);
+    }
+  },
 
-    this.$nextTick(() => {
+  watch: {
-      contentEl.focus();
+    chosenTrain(train: Train | undefined) {
-    });
+      this.$nextTick(() => {
+        if (train) {
+          const contentEl = this.$refs['content'] as HTMLElement;
+          contentEl.focus();
+        }
+      });
+    }
   }
 });
 </script>

src/mixins/modalTrainMixin.ts

@@ -8,12 +8,6 @@ export default defineComponent({
     };
   },
 
-  computed: {
-    chosenTrain() {
-      return this.store.trainList.find((train) => train.trainId == this.store.chosenModalTrainId);
-    }
-  },
-
   methods: {
     selectModalTrain(trainId: string, target?: EventTarget | null) {
       this.store.chosenModalTrainId = trainId;

src/store/apiStore.ts

@@ -4,9 +4,6 @@ import { Status } from '../typings/common';
 import { StationJSONData } from './typings';
 import axios, { AxiosInstance } from 'axios';
 
-// Update seconds cron for active data scheduler
-const UPDATE_SECONDS = [3, 23, 43];
-
 export enum APIMode {
   PRODUCTION = 0,
   DEV = 1,