diff --git a/src/App.vue b/src/App.vue index 62ce117..a3b3f73 100644 --- a/src/App.vue +++ b/src/App.vue @@ -50,9 +50,9 @@ icon dispatcher - {{ data.activeStationCount }} + {{ dispatcherCount }} | - {{ data.activeTrainCount }} + {{ trainCount }} icon train @@ -70,9 +70,9 @@
- - - + + +
@@ -92,7 +92,7 @@ import Clock from '@/components/App/Clock.vue'; import StorageManager from '@/scripts/managers/storageManager'; -import { computed, ComputedRef, defineComponent, provide, ref } from 'vue'; +import { computed, ComputedRef, defineComponent, provide, reactive, Ref, ref } from 'vue'; import { GETTERS } from './constants/storeConstants'; import { StoreData } from './scripts/interfaces/StoreData'; import { useStore } from './store'; @@ -116,8 +116,8 @@ export default defineComponent({ () => store.getters[GETTERS.currentRegion] ); - const dataStatus = computed(() => data.value); - const sceneryDataStatus = computed(() => data.value.sceneryDataStatus); + const dataStatus = computed(() => data.value.sceneryDataStatus); + // const sceneryDataStatus = computed(() => data.value.sceneryDataStatus); const isFilterCardVisible = ref(false); @@ -129,13 +129,13 @@ export default defineComponent({ isFilterCardVisible, dataStatus, - sceneryDataStatus, dispatcherDataStatus: computed(() => data.value.dispatcherDataStatus), - timetableCount: data.value.trainList.filter((train) => train.timetableData).length, - onlineDispatcherCount: data.value.stationList.filter( - (station) => station.onlineInfo && station.onlineInfo.statusTimestamp > 0 - ).length, + trainCount: computed(() => data.value.trainList.length), + + dispatcherCount: computed( + () => data.value.stationList.filter((station) => station.onlineInfo).length + ), openFilterCard() { isFilterCardVisible.value = true; diff --git a/src/components/App/StatusIndicator.vue b/src/components/App/StatusIndicator.vue index 7e28c8e..95d9ee3 100644 --- a/src/components/App/StatusIndicator.vue +++ b/src/components/App/StatusIndicator.vue @@ -195,18 +195,9 @@ export default defineComponent({ watch: { dataStatus(storeData: StoreData) { - const dataConnectionStatus = storeData.dataConnectionStatus; const sceneryDataStatus = storeData.sceneryDataStatus; const trainsDataStatus = storeData.trainsDataStatus; const dispatcherDataStatus = storeData.dispatcherDataStatus; - const timetableDataStatus = storeData.timetableDataStatus; - - if (dataConnectionStatus == DataStatus.Error) { - this.setSignalStatus(dataConnectionStatus); - this.indicator.status = dataConnectionStatus; - this.indicator.message = 'data-status.S1a-connection'; - return; - } if (sceneryDataStatus == DataStatus.Error) { this.setSignalStatus(sceneryDataStatus); @@ -229,20 +220,6 @@ export default defineComponent({ return; } - if (timetableDataStatus == DataStatus.Warning) { - this.setSignalStatus(timetableDataStatus); - this.indicator.status = timetableDataStatus; - this.indicator.message = 'data-status.S5-timetables'; - return; - } - - if (timetableDataStatus == DataStatus.Loading) { - this.setSignalStatus(timetableDataStatus); - this.indicator.status = timetableDataStatus; - this.indicator.message = 'data-status.S3'; - return; - } - this.setSignalStatus(DataStatus.Loaded); this.indicator.status = DataStatus.Loaded; diff --git a/src/components/Global/StopDate.vue b/src/components/Global/StopDate.vue new file mode 100644 index 0000000..4c40918 --- /dev/null +++ b/src/components/Global/StopDate.vue @@ -0,0 +1,119 @@ + + + + + diff --git a/src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue b/src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue index 9661e5f..c9257cf 100644 --- a/src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue +++ b/src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue @@ -17,7 +17,7 @@ {{ $t(`status.${station.onlineInfo.statusID}`) }} - {{ station.onlineInfo.statusID == 'online' ? station.onlineInfo.statusTimeString : '' }} + {{ station.onlineInfo.statusID == 'online' ? timestampToString(station.onlineInfo.statusTimestamp) : '' }} @@ -31,9 +31,10 @@ import { defineComponent } from 'vue'; import styleMixin from '@/mixins/styleMixin'; import Station from '@/scripts/interfaces/Station'; +import dateMixin from '@/mixins/dateMixin'; export default defineComponent({ - mixins: [styleMixin], + mixins: [styleMixin, dateMixin ], props: { station: { type: Object as () => Station, diff --git a/src/components/SceneryView/SceneryTimetable.vue b/src/components/SceneryView/SceneryTimetable.vue index 1db7ec2..178c11e 100644 --- a/src/components/SceneryView/SceneryTimetable.vue +++ b/src/components/SceneryView/SceneryTimetable.vue @@ -21,8 +21,8 @@ -
- +
+ {{ $t('app.loading') }} @@ -65,18 +65,26 @@ - - + + + {{ $t('timetables.begins') }} - {{ scheduledTrain.stopInfo.arrivalTimeString }} ({{ scheduledTrain.stopInfo.arrivalDelay }}) +
+ {{ timestampToString(scheduledTrain.stopInfo.arrivalTimestamp) }} +
+
+ {{ + timestampToString(scheduledTrain.stopInfo.arrivalTimestamp) + }} + + {{ timestampToString(scheduledTrain.stopInfo.arrivalRealTimestamp) }} + ({{ scheduledTrain.stopInfo.arrivalDelay > 0 ? '+' : '' + }}{{ scheduledTrain.stopInfo.arrivalDelay }}) + +
-
@@ -88,15 +96,25 @@ - + + {{ $t('timetables.terminates') }} - {{ scheduledTrain.stopInfo.departureTimeString }} ({{ scheduledTrain.stopInfo.departureDelay }}) +
+ {{ timestampToString(scheduledTrain.stopInfo.departureTimestamp) }} +
+
+ {{ + timestampToString(scheduledTrain.stopInfo.departureTimestamp) + }} + + + {{ timestampToString(scheduledTrain.stopInfo.departureRealTimestamp) }} + ({{ scheduledTrain.stopInfo.departureDelay > 0 ? '+' : '' + }}{{ scheduledTrain.stopInfo.departureDelay }}) + +
@@ -115,10 +133,13 @@ import { useStore } from '@/store'; import { GETTERS } from '@/constants/storeConstants'; import { DataStatus } from '@/scripts/enums/DataStatus'; import { ComputedRef } from 'vue'; +import dateMixin from '@/mixins/dateMixin'; export default defineComponent({ components: { SelectBox }, + mixins: [dateMixin], + props: { station: { type: Object as () => Station, @@ -142,7 +163,7 @@ export default defineComponent({ const store = useStore(); - const timetableDataStatus = computed(() => store.getters[GETTERS.timetableDataStatus]) as ComputedRef; + const trainsDataStatus = computed(() => store.getters[GETTERS.trainsDataStatus]) as ComputedRef; const selectedCheckpoint = ref( props.station?.generalInfo?.checkpoints?.length == 0 @@ -176,7 +197,7 @@ export default defineComponent({ currentURL, selectedCheckpoint, computedScheduledTrains, - timetableDataStatus, + trainsDataStatus, }; }, @@ -317,11 +338,12 @@ h3 { &-schedule { display: grid; grid-template-columns: repeat(auto-fit, minmax(30px, 1fr)); - font-size: 1.3em; + font-size: 1.15em; @include smallScreen() { width: 100%; margin: 0.5em 0; + font-size: 1.4em; } } } @@ -378,7 +400,6 @@ h3 { .general-info { .info-number { color: $accentCol; - } .info-route { @@ -396,6 +417,8 @@ h3 { } .general-status { + margin-left: 0.5em; + span.arriving { color: #aaa; } @@ -449,6 +472,6 @@ h3 { .arrival-time.begins, .departure-time.terminates { - font-size: 0.75em; + font-size: 0.85em; } diff --git a/src/components/StationsView/StationTable.vue b/src/components/StationsView/StationTable.vue index bb50e78..9a03170 100644 --- a/src/components/StationsView/StationTable.vue +++ b/src/components/StationsView/StationTable.vue @@ -87,7 +87,7 @@ {{ $t(`status.${station.onlineInfo.statusID}`) }} - {{ station.onlineInfo.statusID == 'online' ? station.onlineInfo.statusTimeString : '' }} + {{ station.onlineInfo.statusID == 'online' ? timestampToString(station.onlineInfo.statusTimestamp) : '' }} @@ -102,7 +102,7 @@ {{ 2 > station.onlineInfo.dispatcherExp ? 'L' : station.onlineInfo.dispatcherExp }} @@ -231,6 +231,8 @@ import { computed, ComputedRef, defineComponent } from '@vue/runtime-core'; import { useStore } from '@/store'; import { GETTERS } from '@/constants/storeConstants'; import Station from '@/scripts/interfaces/Station'; +import { StoreData } from '@/scripts/interfaces/StoreData'; +import dateMixin from '@/mixins/dateMixin'; export default defineComponent({ props: { @@ -248,7 +250,7 @@ export default defineComponent({ changeSorter: { type: Function, required: true }, }, - mixins: [styleMixin], + mixins: [styleMixin, dateMixin], data: () => ({ likeIcon: require('@/assets/icon-like.svg'), @@ -275,10 +277,10 @@ export default defineComponent({ setup() { const store = useStore(); - const dataConnectionStatus: ComputedRef = computed(() => store.getters[GETTERS.dataStatus]); + const data: ComputedRef = computed(() => store.getters[GETTERS.allData]); const isDataLoaded = computed(() => { - return dataConnectionStatus.value == DataStatus.Loaded; + return data.value.sceneryDataStatus == DataStatus.Loaded; }); return { diff --git a/src/components/TrainsView/TrainSchedule.vue b/src/components/TrainsView/TrainSchedule.vue index 6c170d8..bcedd22 100644 --- a/src/components/TrainsView/TrainSchedule.vue +++ b/src/components/TrainsView/TrainSchedule.vue @@ -22,51 +22,8 @@
- - - - {{ stop.arrivalTimeString }} - {{ stop.arrivalRealTimeString }} - ({{ stop.arrivalDelay > 0 ? '+' : '' }}{{ stop.arrivalDelay }}) - - - {{ stop.arrivalTimeString }} - - - - - {{ stop.stopTime }} {{ stop.stopType == '' ? 'pt' : stop.stopType }} - - - - - {{ stop.departureTimeString }} - {{ stop.departureRealTimeString }} - - ({{ stop.departureDelay > 0 ? '+' : '' }}{{ stop.departureDelay }}) - - - - {{ stop.departureTimeString }} - - - +
@@ -88,10 +45,13 @@ diff --git a/src/views/StationsView.vue b/src/views/StationsView.vue index be76659..97ce7ec 100644 --- a/src/views/StationsView.vue +++ b/src/views/StationsView.vue @@ -90,18 +90,6 @@ export default defineComponent({ return filterManager.getFilteredStationList(store.getters[GETTERS.stationList]); }); - const getStatusClass = computed(() => { - if (data.value.dataConnectionStatus == DataStatus.Loading) return 'loading'; - if (data.value.dataConnectionStatus == DataStatus.Error) return 'error'; - return 'success'; - }); - - const timetableDataStatusClass = computed(() => { - if (data.value.timetableDataStatus == DataStatus.Loading) return 'loading'; - if (data.value.timetableDataStatus == DataStatus.Error) return 'error'; - return 'success'; - }); - const focusedStationInfo = computed(() => computedStations.value.find((station) => station.name === focusedStationName) ); @@ -110,8 +98,6 @@ export default defineComponent({ data, computedStations, filterManager, - getStatusClass, - timetableDataStatusClass, focusedStationName, focusedStationInfo, };