From fb56378f18a322c437308554cf83eaafa292fec5 Mon Sep 17 00:00:00 2001 From: Spythere Date: Fri, 7 Jun 2024 16:44:09 +0200 Subject: [PATCH] chore: redesigned scenery history tables --- .../SceneryView/SceneryDispatchersHistory.vue | 127 ++++++++------- .../SceneryView/SceneryTimetablesHistory.vue | 150 +++++++++++------- src/styles/sceneryViewTables.scss | 1 + src/typings/api.ts | 1 + 4 files changed, 170 insertions(+), 109 deletions(-) diff --git a/src/components/SceneryView/SceneryDispatchersHistory.vue b/src/components/SceneryView/SceneryDispatchersHistory.vue index 3e63a9c..dc7e8d3 100644 --- a/src/components/SceneryView/SceneryDispatchersHistory.vue +++ b/src/components/SceneryView/SceneryDispatchersHistory.vue @@ -3,64 +3,63 @@
-
+
{{ $t('scenery.history-list-empty') }}
- - - - - - - - - - - - - - - - - - -
{{ $t('scenery.dispatchers-history-hash') }}{{ $t('scenery.dispatchers-history-dispatcher') }}{{ $t('scenery.dispatchers-history-level') }}{{ $t('scenery.dispatchers-history-rate') }}{{ $t('scenery.dispatchers-history-date') }}
#{{ historyItem.stationHash }} +
+
+ + + #{{ historyItem.stationHash }} + + + {{ historyItem.dispatcherLevel >= 2 ? historyItem.dispatcherLevel : 'L' }} + + - {{ historyItem.dispatcherName }} + {{ historyItem.dispatcherName }} -
- - {{ historyItem.dispatcherLevel >= 2 ? historyItem.dispatcherLevel : 'L' }} - + - - - - {{ historyItem.dispatcherRate }} - -
- {{ $d(historyItem.timestampFrom) }} +
+ + Ocena: + {{ historyItem.dispatcherRate }} + + | + + Zmiany statusów: {{ historyItem.statusHistory.length }} + +
+ - {{ timestampToString(historyItem.timestampFrom) }} - - {{ timestampToString(historyItem.timestampTo) }} ({{ - calculateDuration(historyItem.currentDuration) - }}) -
+ + + {{ $d(historyItem.timestampFrom) }} -
- {{ $t('journal.online-since') }} - {{ timestampToString(historyItem.timestampFrom) }} - ({{ calculateDuration(historyItem.currentDuration) }}) -
-
+ {{ timestampToString(historyItem.timestampFrom) }} + - {{ timestampToString(historyItem.timestampTo) }} ({{ + calculateDuration(historyItem.currentDuration) + }}) + + + + {{ $t('journal.online-since') }} + {{ timestampToString(historyItem.timestampFrom) }} + ({{ calculateDuration(historyItem.currentDuration) }}) + + +
+
@@ -165,8 +164,29 @@ export default defineComponent({ overflow: auto; } +.history-list { + display: flex; + flex-direction: column; + gap: 0.5em; + text-align: left; +} + +.history-list > div { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + + gap: 0.5em; + padding: 0.5em; + background-color: #2b2b2b; + line-height: 1.75em; +} + .level-badge { - margin: 0 auto; + text-align: center; + display: inline-block; + line-height: 1.6em; } .dispatcher-online { @@ -174,13 +194,10 @@ export default defineComponent({ } @include smallScreen { - .history-list { - font-size: 1.1em; - } - .list-item { - align-items: center; + .history-list > div { flex-direction: column; + justify-content: center; + text-align: center; } } -../../store/storeTypes diff --git a/src/components/SceneryView/SceneryTimetablesHistory.vue b/src/components/SceneryView/SceneryTimetablesHistory.vue index 3f0ddf5..7636247 100644 --- a/src/components/SceneryView/SceneryTimetablesHistory.vue +++ b/src/components/SceneryView/SceneryTimetablesHistory.vue @@ -10,68 +10,80 @@ > {{ $t(`scenery.timetable-${mode}`) }} - - - -
-
+
{{ $t('scenery.history-list-empty') }}
- - - - - - - - - +
+
+ +
+ + {{ + timetableHistory.terminated + ? timetableHistory.fulfilled + ? '⦿' + : '⦻' + : '◯' + }} + + #{{ timetableHistory.id }} | + {{ timetableHistory.trainCategoryCode }} + {{ timetableHistory.trainNo }} + {{ timetableHistory.route.replace('|', ' ⇒ ') }} +
-
- - - - - - - - - - -
{{ $t('scenery.timetables-history-id') }}{{ $t('scenery.timetables-history-number') }}{{ $t('scenery.timetables-history-route') }}{{ $t('scenery.timetables-history-driver') }}{{ $t('scenery.timetables-history-author') }}{{ $t('scenery.timetables-history-date') }}
- - #{{ historyItem.id }} - - - {{ historyItem.trainCategoryCode }} - {{ historyItem.trainNo }} - {{ historyItem.route.replace('|', ' -> ') }} - - {{ historyItem.driverName }} - - - {{ historyItem.authorName }} - - {{ $t('scenery.timetable-author-unknown') }} - +
+ Wystawiony {{ localeDateTime( - historyItem.createdAt > historyItem.beginDate - ? historyItem.beginDate - : historyItem.createdAt, + timetableHistory.createdAt > timetableHistory.beginDate + ? timetableHistory.beginDate + : timetableHistory.createdAt, $i18n.locale ) }} -
+ + przez: + + + {{ timetableHistory.authorName }} + + + + dla maszynisty: + + + {{ timetableHistory.driverName }} + + +
+ + + +
+
@@ -90,13 +102,15 @@ import Loading from '../Global/Loading.vue'; import { API } from '../../typings/api'; import { ActiveScenery, Station, Status } from '../../typings/common'; import { useApiStore } from '../../store/apiStore'; +import routerMixin from '../../mixins/routerMixin'; +import { useMainStore } from '../../store/mainStore'; const historyModeList = ['issuedFrom', 'terminatingAt', 'via'] as const; type HistoryMode = (typeof historyModeList)[number]; export default defineComponent({ name: 'SceneryTimetablesHistory', - mixins: [dateMixin], + mixins: [dateMixin, routerMixin], props: { station: { type: Object as PropType @@ -112,6 +126,7 @@ export default defineComponent({ historyModeList, apiStore: useApiStore(), + mainStore: useMainStore(), dataStatus: Status.Data.Loading, DataStatus: Status.Data, @@ -203,10 +218,37 @@ export default defineComponent({ } } -table td a { - max-width: 200px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; +.history-list { + display: flex; + flex-direction: column; + gap: 0.5em; + text-align: left; } + +.history-list > div { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5em; + background-color: #2b2b2b; + line-height: 1.5em; +} + +.history-list > div > button > img { + width: 2em; + transform: rotate(180deg); +} + +.timetable-status-indicator { + &[data-fulfilled='true'] { + color: limegreen; + } +} + +// table td a { +// max-width: 100%; +// overflow: hidden; +// text-overflow: ellipsis; +// white-space: nowrap; +// } diff --git a/src/styles/sceneryViewTables.scss b/src/styles/sceneryViewTables.scss index a4d7a08..5d19433 100644 --- a/src/styles/sceneryViewTables.scss +++ b/src/styles/sceneryViewTables.scss @@ -1,5 +1,6 @@ table.scenery-history-table { width: 100%; + table-layout: fixed; min-width: 900px; border-collapse: collapse; diff --git a/src/typings/api.ts b/src/typings/api.ts index 2f97f43..a37e82a 100644 --- a/src/typings/api.ts +++ b/src/typings/api.ts @@ -39,6 +39,7 @@ export namespace API { stationName: string; timestampFrom: number; timestampTo?: number; + statusHistory: string[]; } }