diff --git a/src/App.vue b/src/App.vue index 56c1315..4ff42c9 100644 --- a/src/App.vue +++ b/src/App.vue @@ -4,7 +4,7 @@ - + diff --git a/src/components/TrainsView/TrainInfo.vue b/src/components/TrainsView/TrainInfo.vue index 4ad97ec..2174537 100644 --- a/src/components/TrainsView/TrainInfo.vue +++ b/src/components/TrainsView/TrainInfo.vue @@ -93,7 +93,7 @@
-
+
@@ -117,19 +117,24 @@
-
- {{ train.length }}m - • - {{ (train.mass / 1000).toFixed(1) }}t - - • - {{ $t('trains.cars') }}: {{ train.stockList.length - 1 }} - - | - {{ train.speed }} km/h +
+
+ length icon + {{ train.length }}m +
+ +
+ mass icon + {{ (train.mass / 1000).toFixed(1) }}t +
+ +
+ speed icon + {{ train.speed }} km/h +
-
+
{{ displayTrainPosition(train) }}
@@ -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 { - display: flex; - align-items: center; -} - -.timetable-warnings { - display: flex; - gap: 0.25em; -} - -.timetable-progress { +.status-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; diff --git a/src/components/TrainsView/TrainModal.vue b/src/components/TrainsView/TrainModal.vue index 2571bfd..471d0e6 100644 --- a/src/components/TrainsView/TrainModal.vue +++ b/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() { - const contentEl = this.$refs['content'] as HTMLElement; + computed: { + chosenTrain() { + return this.store.trainList.find((train) => train.trainId == this.store.chosenModalTrainId); + } + }, - this.$nextTick(() => { - contentEl.focus(); - }); + watch: { + chosenTrain(train: Train | undefined) { + this.$nextTick(() => { + if (train) { + const contentEl = this.$refs['content'] as HTMLElement; + contentEl.focus(); + } + }); + } } }); diff --git a/src/mixins/modalTrainMixin.ts b/src/mixins/modalTrainMixin.ts index d5fa784..0935a76 100644 --- a/src/mixins/modalTrainMixin.ts +++ b/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; diff --git a/src/store/apiStore.ts b/src/store/apiStore.ts index 1fa0166..1749f5e 100644 --- a/src/store/apiStore.ts +++ b/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,