Spythere/stacjownik
1
0
Fork 0
mirror of https://github.com/Spythere/stacjownik.git synced 2026-05-03 13:28:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: journal daily stats styling

Browse Source
This commit is contained in:
Spythere
2024-08-20 13:16:37 +02:00
parent 86d178ef56
commit 8a2b453dc6
4 changed files with 58 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/JournalView/JournalDailyStats.vue
+57 -55
View File
@@ -1,29 +1,28 @@
<template> <template>
<section class="daily-stats"> <section class="daily-stats">
<span :data-active="statsStatus"> <span :data-active="statsStatus">
<span class="stats-list"> <h3>
<h3> {{ $t('journal.daily-stats.title') }}
{{ $t('journal.daily-stats.title') }} <b class="text--primary">{{ new Date().toLocaleDateString($i18n.locale) }}</b>
<b class="text--primary">{{ new Date().toLocaleDateString($i18n.locale) }}</b> </h3>
</h3>
<hr class="header-separator" /> <hr class="header-separator" />
<b v-if="statsStatus == Status.Data.Loading"> <b v-if="statsStatus == Status.Data.Loading">
{{ $t('app.loading') }} {{ $t('app.loading') }}
</b> </b>
<b class="text--error" v-else-if="statsStatus == Status.Data.Error"> <b class="text--error" v-else-if="statsStatus == Status.Data.Error">
{{ $t('journal.stats-error') }} {{ $t('journal.stats-error') }}
</b> </b>
<b v-else-if="topDispatchers.length == 0"> <b v-else-if="topDispatchers.length == 0">
{{ $t('journal.daily-stats.info') }} {{ $t('journal.daily-stats.info') }}
</b> </b>
<div v-else> <div v-else>
<div v-if="stats.totalTimetables"> <ul class="stats-list">
&bull; <li v-if="stats.totalTimetables">
<i18n-t keypath="journal.daily-stats.total"> <i18n-t keypath="journal.daily-stats.total">
<template #count> <template #count>
<b class="text--primary"> <b class="text--primary">
@@ -36,10 +35,9 @@
<b class="text--primary"> {{ stats.distanceSum?.toFixed(2) }} km</b> <b class="text--primary"> {{ stats.distanceSum?.toFixed(2) }} km</b>
</template> </template>
</i18n-t> </i18n-t>
</div> </li>
<div v-if="stats.maxTimetable"> <li v-if="stats.maxTimetable">
&bull;
<i18n-t keypath="journal.daily-stats.longest"> <i18n-t keypath="journal.daily-stats.longest">
<template #id> <template #id>
<router-link :to="`/journal/timetables?search-train=%23${stats.maxTimetable.id}`"> <router-link :to="`/journal/timetables?search-train=%23${stats.maxTimetable.id}`">
@@ -60,10 +58,9 @@
<b class="text--primary">{{ stats.maxTimetable.routeDistance }} km</b> <b class="text--primary">{{ stats.maxTimetable.routeDistance }} km</b>
</template> </template>
</i18n-t> </i18n-t>
</div> </li>
<div v-if="topDispatchers.length == 1"> <li v-if="topDispatchers.length == 1">
&bull;
<i18n-t keypath="journal.daily-stats.most-active-dr"> <i18n-t keypath="journal.daily-stats.most-active-dr">
<template #dispatcher> <template #dispatcher>
<router-link <router-link
@@ -79,10 +76,9 @@
</b> </b>
</template> </template>
</i18n-t> </i18n-t>
</div> </li>
<div v-if="topDispatchers.length > 1"> <li v-if="topDispatchers.length > 1">
&bull;
<i18n-t keypath="journal.daily-stats.most-active-dr-many"> <i18n-t keypath="journal.daily-stats.most-active-dr-many">
<template #dispatchers> <template #dispatchers>
<span v-for="(disp, i) in topDispatchers" :key="i"> <span v-for="(disp, i) in topDispatchers" :key="i">
@@ -103,10 +99,9 @@
</b> </b>
</template> </template>
</i18n-t> </i18n-t>
</div> </li>
<div v-if="stats.longestDuties.length > 0"> <li v-if="stats.longestDuties.length > 0">
&bull;
<i18n-t keypath="journal.daily-stats.longest-duties"> <i18n-t keypath="journal.daily-stats.longest-duties">
<template #dispatcher> <template #dispatcher>
<router-link <router-link
@@ -122,10 +117,9 @@
{{ calculateDuration(stats.longestDuties[0].duration) }} {{ calculateDuration(stats.longestDuties[0].duration) }}
</template> </template>
</i18n-t> </i18n-t>
</div> </li>
<div v-if="stats.mostActiveDrivers.length > 0"> <li v-if="stats.mostActiveDrivers.length > 0">
&bull;
<i18n-t keypath="journal.daily-stats.most-active-driver"> <i18n-t keypath="journal.daily-stats.most-active-driver">
<template #driver> <template #driver>
<router-link <router-link
@@ -138,30 +132,30 @@
<b class="text--primary">{{ stats.mostActiveDrivers[0].distance.toFixed(2) }} km</b> <b class="text--primary">{{ stats.mostActiveDrivers[0].distance.toFixed(2) }} km</b>
</template> </template>
</i18n-t> </i18n-t>
</div> </li>
</ul>
<hr class="section-separator" /> <hr class="section-separator" />
<div class="stats-badges"> <div class="stats-badges">
<span <span
class="stat-badge" class="badge stat-badge"
v-for="key in [ v-for="key in [
'rippedSwitches', 'rippedSwitches',
'derailments', 'derailments',
'skippedStopSignals', 'skippedStopSignals',
'radioStops', 'radioStops',
'kills' 'kills'
]" ]"
:key="key" :key="key"
> >
<span>{{ $t(`journal.daily-stats.${key}`) }}</span> <span>{{ $t(`journal.daily-stats.${key}`) }}</span>
<span>{{ <span>
Object.entries(stats.globalDiff).find(([k, v]) => k == key)?.[1] || '--' {{ Object.entries(stats.globalDiff).find(([k, v]) => k == key)?.[1] || '--' }}
}}</span>
</span> </span>
</div> </span>
</div> </div>
</span> </div>
</span> </span>
</section> </section>
</template> </template>
@@ -178,7 +172,6 @@ export default defineComponent({
name: 'journal-daily-stats', name: 'journal-daily-stats',
mixins: [dateMixin], mixins: [dateMixin],
// emits: ['toggleStatsOpen'],
data() { data() {
return { return {
@@ -193,7 +186,6 @@ export default defineComponent({
activated() { activated() {
this.startFetchingDailyStats(); this.startFetchingDailyStats();
// this.$emit('toggleStatsOpen', true);
}, },
deactivated() { deactivated() {
@@ -249,14 +241,24 @@ export default defineComponent({
.daily-stats { .daily-stats {
text-align: left; text-align: left;
} }
.daily-stats > span[data-active='0'] { .daily-stats > span[data-active='0'] {
opacity: 0.75; opacity: 0.75;
} }
ul.stats-list {
list-style: disc;
padding: 0 1em;
}
.stats-list a { .stats-list a {
text-decoration: underline; text-decoration: underline;
} }
.stats-list > li {
margin: 0.25em 0;
}
.stats-badges { .stats-badges {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
src/components/JournalView/JournalTimetables/JournalTimetablesList.vue
-13
View File
@@ -119,19 +119,6 @@ export default defineComponent({
}; };
}, },
watch: {
timetableHistory: {
deep: true,
handler() {
console.log(this.$refs['list']);
// ?.scrollTo({ behavior: 'smooth', top: 0 });
// (this.$refs['list'] as HTMLUListElement).scrollTo({})
}
}
},
methods: { methods: {
toggleExtraInfo(id: number) { toggleExtraInfo(id: number) {
const existingIdx = this.extraInfoIndexes.indexOf(id); const existingIdx = this.extraInfoIndexes.indexOf(id);
src/styles/JournalStats.scss
-16
View File
@@ -33,22 +33,6 @@ hr.section-separator {
gap: 0.5em; gap: 0.5em;
} }
.stat-badge {
display: flex;
span {
background-color: $accentCol;
color: black;
font-weight: bold;
padding: 0.2em 0.5em;
}
span:first-child {
background-color: #333;
color: white;
}
}
@include smallScreen { @include smallScreen {
.journal-stats { .journal-stats {
text-align: center; text-align: center;
src/styles/badge.scss
+1
View File
@@ -113,6 +113,7 @@
.stat-badge { .stat-badge {
margin: 0; margin: 0;
color: white;
& > span:first-child { & > span:first-child {
background-color: $accentCol; background-color: $accentCol;