chore(profile): improved history list design

This commit is contained in:
2026-02-15 17:50:52 +01:00
parent 298f8a5f23
commit dcef8cdac8
2 changed files with 36 additions and 20 deletions
@@ -33,44 +33,52 @@
<img v-else src="/images/icon-timetable.svg" width="25" alt="timetable icon" /> <img v-else src="/images/icon-timetable.svg" width="25" alt="timetable icon" />
<b class="text--grayed"> <b
class="timestamp-indicator"
:data-online="
'isOnline' in entry.value
? entry.value.isOnline
: !entry.value.terminated && entry.type != 'IssuedTimetable'
"
>
{{ entry.date.toLocaleString('pl-PL', { dateStyle: 'long', timeStyle: 'short' }) }} {{ entry.date.toLocaleString('pl-PL', { dateStyle: 'long', timeStyle: 'short' }) }}
</b> <span v-if="'timestampTo' in entry.value && entry.value.timestampTo" u>
-
<b v-if="'timestampTo' in entry.value && entry.value.timestampTo" class="text--grayed"> {{
- new Date(entry.value.timestampTo).toLocaleString('pl-PL', {
{{ dateStyle:
new Date(entry.value.timestampTo).toLocaleString('pl-PL', { new Date(entry.value.timestampTo).getDay() == entry.date.getDay()
dateStyle: ? undefined
new Date(entry.value.timestampTo).getDay() == entry.date.getDay() : 'long',
? undefined timeStyle: 'short'
: 'long', })
timeStyle: 'short' }}
}) </span>
}}
</b> </b>
</div> </div>
<!-- Timetables --> <!-- Timetables -->
<div v-if="'trainNo' in entry.value"> <div v-if="'trainNo' in entry.value">
<b class="text--primary"> <b class="text--primary">
{{ entry.value.trainCategoryCode }} {{ entry.value.trainNo }} {{ entry.value.trainCategoryCode }}
</b> </b>
{{ ' ' }}
<b>{{ entry.value.trainNo }}</b>
<b class="text--grayed" v-if="entry.type == 'IssuedTimetable'"> <b class="text--grayed" v-if="entry.type == 'IssuedTimetable'">
{{ ' ' }} {{ t('profile.list.for') }}: {{ entry.value.driverName }} {{ ' ' }} {{ t('profile.list.for') }}: {{ entry.value.driverName }}
</b> </b>
{{ ' ' }} {{ ' ' }}
<b>{{ entry.value.route.replace('|', ' > ') }}</b> <b>{{ entry.value.route.replace('|', ' > ') }}</b>
{{ ' ' }} {{ ' ' }}
<b>({{ entry.value.currentDistance }} / {{ entry.value.routeDistance }}km) </b> <b>({{ entry.value.currentDistance }} km / {{ entry.value.routeDistance }} km) </b>
</div> </div>
<!-- Dispatchers --> <!-- Dispatchers -->
<div v-else> <div v-else>
<b class="text--primary">{{ entry.value.stationName }}</b> <b class="text--primary">{{ entry.value.stationName }}</b>
{{ ' - ' }} {{ ' - ' }}
<b> <b class="timestamp-indicator" :data-online="entry.value.isOnline">
<span v-if="entry.value.isOnline">{{ t('profile.list.since') }}: </span> <span v-if="entry.value.isOnline">{{ t('profile.list.online-since') }}: </span>
<span>{{ <span>{{
humanizeDuration( humanizeDuration(
(entry.value.timestampTo || Date.now()) - entry.value.timestampFrom (entry.value.timestampTo || Date.now()) - entry.value.timestampFrom
@@ -229,6 +237,14 @@ function toggleFilter(filterType: JournalEntryType) {
} }
} }
.timestamp-indicator {
color: #ccc;
&[data-online='true'] {
color: var(--clr-success);
}
}
@include responsive.midScreen { @include responsive.midScreen {
.history-list-box { .history-list-box {
max-height: 100vh; max-height: 100vh;
+2 -2
View File
@@ -638,7 +638,7 @@
"created-timetables-count": "wystawione RJ jako dyżurny ruchu", "created-timetables-count": "wystawione RJ jako dyżurny ruchu",
"longest-created-timetable": "najdłuższy wystawiony RJ", "longest-created-timetable": "najdłuższy wystawiony RJ",
"created-timetables-length-sum": "suma długości wystawionych RJ", "created-timetables-length-sum": "suma długości wystawionych RJ",
"no-dispatcher-stats": "Ten dyżurny nie wystawił jeszcze żadnego rozkładu jazdy" "no-dispatcher-stats": "Brak zapisanych wystawionych RJ"
}, },
"recent-stats": { "recent-stats": {
@@ -651,7 +651,7 @@
"list": { "list": {
"for": "dla", "for": "dla",
"since": "od" "online-since": "online od"
} }
} }
} }