Statystyki maszynistów

This commit is contained in:
2022-10-01 15:55:10 +02:00
parent beb2f3c0d4
commit ecf3a00cab
4 changed files with 90 additions and 137 deletions
+1 -31
View File
@@ -14,6 +14,7 @@
<div v-else> <div v-else>
<h3>STATYSTYKI WYSTAWIONYCH ROZKŁADÓW</h3> <h3>STATYSTYKI WYSTAWIONYCH ROZKŁADÓW</h3>
<div class="info-stats" v-if="store.dispatcherStatsData._count._all"> <div class="info-stats" v-if="store.dispatcherStatsData._count._all">
<span class="stat-badge"> <span class="stat-badge">
<span>LICZBA</span> <span>LICZBA</span>
@@ -162,42 +163,11 @@ h3 {
text-align: center; text-align: center;
} }
.info-stats {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 1em;
}
.last-timetables { .last-timetables {
overflow-y: auto; overflow-y: auto;
} }
.stat-badge {
margin-right: 0.5em;
padding-bottom: 1em;
span {
padding: 0.25em 0.3em;
}
span:first-child {
background-color: #4d4d4d;
}
span:last-child {
background-color: $accentCol;
color: black;
font-weight: bold;
}
}
@include smallScreen() {
.stats_card {
text-align: center;
left: 50%;
transform: translateX(-50%);
border-radius: 0 0 1em 1em;
}
}
</style> </style>
+36 -90
View File
@@ -1,51 +1,40 @@
<template> <template>
<div class="card-dimmer" @click="closeCard"></div> <div class="journal-stats" v-if="store.driverStatsData?._sum.routeDistance != null">
<h1>
STATYSTYKI MASZYNISTY <span class="text--primary">{{ store.driverStatsName.toUpperCase() }}</span>
</h1>
<div class="stats-card card"> <div class="info-stats">
<div> <span class="stat-badge">
<h2 class="card-title"> <span>ROZKŁADY JAZDY</span>
STATYSTYKI MASZYNISTY <span class="text--primary">{{ store.driverStatsName.toUpperCase() }}</span> <span>{{ store.driverStatsData._count.fulfilled }} / {{ store.driverStatsData._count._all }}</span>
</h2> </span>
<div class="loading" v-if="!store.driverStatsData">Ładowanie...</div> <span class="stat-badge">
<span>NAJDŁUŻSZY RJ</span>
<span> {{ store.driverStatsData._max.routeDistance.toFixed(2) }}km </span>
</span>
<div v-else> <span class="stat-badge">
<div class="info-stats" v-if="store.driverStatsData._sum.routeDistance != null"> <span>ŚREDNIA DŁUGOŚĆ RJ</span>
<span class="stat-badge"> <span> {{ store.driverStatsData._avg.routeDistance.toFixed(2) }}km </span>
<span>PRZEBYTO</span> </span>
<span>{{ store.driverStatsData._sum.routeDistance.toFixed(2) }}km</span>
</span>
<span class="stat-badge">
<span>PORZUCONO</span>
<span>
{{ (store.driverStatsData._sum.routeDistance - store.driverStatsData._sum.currentDistance).toFixed(2) }}km
</span>
</span>
<span class="stat-badge"> <span class="stat-badge">
<span>WYPEŁNIONO</span> <span>DYSTANS</span>
<span>{{ store.driverStatsData._count.fulfilled }} RJ</span> <span>
</span> {{ store.driverStatsData._sum.currentDistance.toFixed(2) }} /
{{ store.driverStatsData._sum.routeDistance.toFixed(2) }}km
</span>
</span>
<span class="stat-badge"> <span class="stat-badge">
<span>PORZUCONO</span> <span>STACJE</span>
<span>{{ store.driverStatsData._count._all - store.driverStatsData._count.fulfilled }} RJ</span> <span>
</span> {{ store.driverStatsData._sum.confirmedStopsCount }} /
{{ store.driverStatsData._sum.allStopsCount }}
<span class="stat-badge"> </span>
<span>ZATWIERDZONO</span> </span>
<span>{{ store.driverStatsData._sum.confirmedStopsCount }} stacji</span>
</span>
<span class="stat-badge">
<span>PORZUCONO</span>
<span>
{{ store.driverStatsData._sum.allStopsCount - store.driverStatsData._sum.confirmedStopsCount }}
stacji
</span>
</span>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
@@ -78,13 +67,9 @@ export default defineComponent({
}; };
}, },
activated() {
this.fetchDispatcherStats();
},
watch: { watch: {
driverStatsName(value: any) { driverStatsName(value: string) {
console.log(value); this.fetchDispatcherStats();
}, },
}, },
@@ -92,57 +77,18 @@ export default defineComponent({
async fetchDispatcherStats() { async fetchDispatcherStats() {
this.store.driverStatsData = undefined; this.store.driverStatsData = undefined;
if (!this.store.driverStatsName) return;
const statsData: DriverStatsAPIData = await ( const statsData: DriverStatsAPIData = await (
await axios.get(`${URLs.stacjownikAPI}/api/getDriverInfo?name=${this.store.driverStatsName}`) await axios.get(`${URLs.stacjownikAPI}/api/getDriverInfo?name=${this.store.driverStatsName}`)
).data; ).data;
const recentTimetablesData: TimetableHistory[] = await (
await axios.get(`${URLs.stacjownikAPI}/api/getTimetables?driverName=${this.store.driverStatsName}`)
).data;
this.store.driverStatsData = statsData; this.store.driverStatsData = statsData;
this.lastTimetables = recentTimetablesData || [];
},
closeCard() {
this.$emit('closeCard');
}, },
}, },
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../styles/responsive.scss'; @import '../../styles/JournalStats.scss';
@import '../../styles/card.scss';
.timetable-row {
display: grid;
grid-template-columns: 4fr 1fr 1fr 2fr 2fr;
gap: 0.2em;
margin: 0.5em 0;
text-align: center;
span {
min-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
background-color: #4d4d4d;
padding: 0.5em 0.2em;
}
@include smallScreen() {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
span {
padding: 0.2em 0.3em;
}
grid-template-columns: 1fr;
background-color: #4d4d4d;
}
}
</style> </style>
@@ -1,28 +1,22 @@
<template> <template>
<section class="journal-timetables"> <section class="journal-timetables">
<keep-alive>
<DriverStats v-if="statsCardOpen" @close-card="statsCardOpen = false" />
</keep-alive>
<div class="journal_wrapper"> <div class="journal_wrapper">
<JournalOptions <JournalOptions
@on-search-confirm="searchHistory" @on-search-confirm="searchHistory"
@on-options-reset="resetOptions" @on-options-reset="resetOptions"
:sorter-option-ids="['timetableId', 'beginDate', 'distance', 'total-stops']" :sorter-option-ids="['timetableId', 'beginDate', 'distance', 'total-stops']"
:filters="journalTimetableFilters" :filters="journalTimetableFilters"
:data-status="dataStatus" :data-status="dataStatus"
/> />
<DriverStats />
<!-- <button @click="statsCardOpen = true">Stats</button> --> <!-- <button @click="statsCardOpen = true">Stats</button> -->
<div class="list_wrapper" @scroll="handleScroll"> <div class="list_wrapper" @scroll="handleScroll">
<!-- <transition name="warning" mode="out-in"> --> <!-- <transition name="warning" mode="out-in"> -->
<!-- <div :key="dataStatus"> --> <!-- <div :key="dataStatus"> -->
<Loading <Loading v-if="dataStatus == DataStatus.Initialized || dataStatus == DataStatus.Loading" />
v-if="
dataStatus == DataStatus.Initialized || (dataStatus == DataStatus.Loading )
"
/>
<div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error"> <div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
{{ $t('app.error') }} {{ $t('app.error') }}
@@ -221,7 +215,8 @@ export default defineComponent({
const timestampTo = timestampFrom ? timestampFrom + 86400000 : undefined; const timestampTo = timestampFrom ? timestampFrom + 86400000 : undefined;
if (driverName) queries.push(`driverName=${driverName}`); if (driverName) queries.push(`driverName=${driverName}`);
if (trainNo) queries.push(trainNo.startsWith('#') ? `timetableId=${trainNo.replace('#', '')}` : `trainNo=${trainNo}`); if (trainNo)
queries.push(trainNo.startsWith('#') ? `timetableId=${trainNo.replace('#', '')}` : `trainNo=${trainNo}`);
if (authorName) queries.push(`authorName=${authorName}`); if (authorName) queries.push(`authorName=${authorName}`);
if (timestampFrom && timestampTo) queries.push(`timestampFrom=${timestampFrom}`, `timestampTo=${timestampTo}`); if (timestampFrom && timestampTo) queries.push(`timestampFrom=${timestampFrom}`, `timestampTo=${timestampTo}`);
+42
View File
@@ -0,0 +1,42 @@
@import 'variables.scss';
@import 'responsive.scss';
.journal-stats {
background-color: #1a1a1a;
padding: 1em;
margin-bottom: 1em;
}
.info-stats {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
margin-top: 1em;
}
.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 {
.journal-stats {
text-align: center;
}
.info-stats {
justify-content: center;
}
}