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

Statystyki DR (wip)

Browse Source
This commit is contained in:
Spythere
2023-12-16 17:49:54 +01:00
parent e0d3d2585d
commit f4be32aa39
8 changed files with 120 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/JournalView/JournalDispatcherStats.vue
+35 -134
View File
@@ -1,64 +1,51 @@
<template>
<div class="stats_container" v-click-outside="() => (cardVisible = false)">
<button class="stats_button" @click="toggleCard">
Statystyki dyżurnego {{ store.dispatcherStatsName }}
</button>
<div
class="journal-stats dispatcher"
v-if="store.dispatcherStatsName && store.dispatcherStatsData"
>
<span class="loading" v-if="!store.dispatcherStatsData._count._all">
Ten dyżurny nie ma jeszcze szczegółowych statystyk!
</span>
<div class="stats_card" v-if="store.dispatcherStatsName && cardVisible">
<div>
<Loading v-if="!store.dispatcherStatsData" />
<span v-else>
<h3>
<i18n-t keypath="journal.dispatcher-stats-title">
<template #name>
<span class="text--primary">{{ store.dispatcherStatsName.toUpperCase() }}</span>
</template>
</i18n-t>
</h3>
<div class="loading" v-else-if="!store.dispatcherStatsData._count._all">
Ten dyżurny nie ma jeszcze szczegółowych statystyk!
</div>
<hr class="header-separator" />
<div v-else>
<h3>STATYSTYKI WYSTAWIONYCH ROZKŁADÓW</h3>
<div class="info-stats" v-if="store.dispatcherStatsData._count._all">
<span class="stat-badge">
<span>LICZBA</span>
<span>{{ store.dispatcherStatsData._count._all }}</span>
</span>
<span class="stat-badge">
<span>SUMA (KM)</span>
<span>{{ store.dispatcherStatsData._sum.routeDistance.toFixed(2) }}km</span>
</span>
<span class="stat-badge">
<span>NAJDŁUŻSZY</span>
<span>{{ store.dispatcherStatsData._max.routeDistance.toFixed(2) }}km</span>
</span>
<span class="stat-badge">
<span>ŚREDNIO</span>
<span>{{ store.dispatcherStatsData._avg.routeDistance.toFixed(2) }}km</span>
</span>
</div>
<h3>OSTATNIE WYSTAWIONE ROZKŁADY</h3>
<div class="last-timetables">
<div class="timetable-row" v-for="timetable in timetables" :key="timetable.id">
#{{ timetable.timetableId }} |
<b>{{ timetable.trainCategoryCode }} {{ timetable.trainNo }}</b> |
{{ timetable.driverName }} ({{ timetable.routeDistance }}km)
<div>{{ timetable.route.replace('|', ' > ') }}</div>
</div>
</div>
</div>
<div class="info-stats" v-if="store.dispatcherStatsData._count._all">
<span class="stat-badge">
<span>LICZBA</span>
<span>{{ store.dispatcherStatsData._count._all }}</span>
</span>
<span class="stat-badge">
<span>SUMA (KM)</span>
<span>{{ store.dispatcherStatsData._sum.routeDistance.toFixed(2) }}km</span>
</span>
<span class="stat-badge">
<span>NAJDŁUŻSZY</span>
<span>{{ store.dispatcherStatsData._max.routeDistance.toFixed(2) }}km</span>
</span>
<span class="stat-badge">
<span>ŚREDNIO</span>
<span>{{ store.dispatcherStatsData._avg.routeDistance.toFixed(2) }}km</span>
</span>
</div>
</div>
</span>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { useMainStore } from '../../store/mainStore';
import Loading from '../Global/Loading.vue';
import { API } from '../../typings/api';
import http from '../../http';
export default defineComponent({
name: 'journal-dispatcher-stats',
components: { Loading },
setup() {
const store = useMainStore();
@@ -66,96 +53,10 @@ export default defineComponent({
return {
store
};
},
data() {
return {
cardVisible: false,
lastDispatcherName: '',
timetables: [] as API.TimetableHistory.Response
};
},
methods: {
toggleCard() {
if (!this.store.dispatcherStatsName) return;
this.cardVisible = !this.cardVisible;
if (this.cardVisible) this.fetchDispatcherStats();
},
async fetchDispatcherStats() {
if (this.lastDispatcherName != this.store.dispatcherStatsName) {
this.store.dispatcherStatsData = undefined;
}
const statsData: API.DispatcherStats.Response = await (
await http.get('api/getDispatcherInfo?name=${this.store.dispatcherStatsName}')
).data;
const timetables: API.TimetableHistory.Response = await (
await http.get('api/getTimetables?authorName=${this.store.dispatcherStatsName}')
).data;
this.timetables = timetables;
this.store.dispatcherStatsData = statsData;
this.lastDispatcherName = this.store.dispatcherStatsName;
}
}
});
</script>
<style lang="scss" scoped>
@import '../../styles/responsive.scss';
@import '../../styles/variables.scss';
.stats_container {
position: relative;
}
.stats_card {
position: absolute;
z-index: 999;
top: 120%;
right: 0;
width: 500px;
max-width: 97vw;
min-height: 100px;
overflow: auto;
border-radius: 1em 0 1em 1em;
background-color: #222222f1;
box-shadow: 0 3px 10px 5px #131313;
padding: 1em 0.5em;
}
.last-timetables {
max-height: 400px;
margin: 0.5em 0;
}
.timetable-row {
width: 95%;
margin: 0.5em auto;
padding: 0.5em;
background-color: #4d4d4d;
}
h2.card-title {
font-size: 1.8em;
}
h3 {
margin-top: 1em;
}
h2,
h3 {
text-align: center;
}
.last-timetables {
overflow-y: auto;
}
@import '../../styles/JournalStats.scss';
</style>
src/components/JournalView/JournalDriverStats.vue
+6 -3
View File
@@ -1,9 +1,12 @@
<template>
<div class="journal-stats" v-if="store.driverStatsData">
<div class="journal-stats driver" v-if="store.driverStatsData">
<span>
<h3>
{{ $t('journal.stats-title') }}
<span class="text--primary">{{ store.driverStatsName.toUpperCase() }}</span>
<i18n-t keypath="journal.driver-stats-title">
<template #name>
<span class="text--primary">{{ store.driverStatsName.toUpperCase() }}</span>
</template>
</i18n-t>
</h3>
<hr class="header-separator" />
src/components/JournalView/JournalOptions.vue
-28
View File
@@ -114,7 +114,6 @@ import { defineComponent, inject, PropType } from 'vue';
import keyMixin from '../../mixins/keyMixin';
import { useMainStore } from '../../store/mainStore';
import { Journal } from './typings';
import { API } from '../../typings/api';
import { Status } from '../../typings/common';
import http from '../../http';
@@ -181,10 +180,6 @@ export default defineComponent({
},
watch: {
async 'store.driverStatsName'() {
await this.fetchDriverStats();
},
async 'searchersValues.search-driver'(value: string | undefined) {
clearTimeout(this.searchTimeout);
@@ -203,29 +198,6 @@ export default defineComponent({
},
methods: {
async fetchDriverStats() {
this.store.driverStatsData = undefined;
if (!this.store.driverStatsName) {
this.store.driverStatsStatus = Status.Data.Initialized;
return;
}
try {
this.store.driverStatsStatus = Status.Data.Loading;
const statsData: API.DriverStats.Response = await (
await http.get(`api/getDriverInfo?name=${this.store.driverStatsName}`)
).data;
this.store.driverStatsData = statsData;
this.store.driverStatsStatus = Status.Data.Loaded;
} catch (error) {
this.store.driverStatsStatus = Status.Data.Error;
console.error('Ups! Wystąpił błąd przy próbie pobrania statystyk maszynisty! :/');
}
},
refreshData() {
this.$emit('onRefreshData');
},
src/components/JournalView/JournalStats.vue
+59 -12
View File
@@ -47,6 +47,9 @@ import { Journal } from './typings';
import JournalDailyStats from './JournalDailyStats.vue';
import JournalDispatcherStats from './JournalDispatcherStats.vue';
import JournalDriverStats from './JournalDriverStats.vue';
import { Status } from '../../typings/common';
import http from '../../http';
import { API } from '../../typings/api';
export default defineComponent({
components: { JournalDailyStats, JournalDriverStats, JournalDispatcherStats },
@@ -63,24 +66,68 @@ export default defineComponent({
currentStatsTab: null as Journal.StatsTab | null
};
},
mounted() {
// const storedTab = StorageManager.getStringValue('journalStatsTab');
// if (storedTab && storedTab !== '' && this.statsButtons.some((b) => b.tab == storedTab))
// this.currentStatsTab = storedTab as Journal.StatsTab;
watch: {
async 'mainStore.driverStatsName'(val) {
await this.fetchDriverStats();
},
async 'mainStore.dispatcherStatsName'() {
await this.fetchDispatcherStats();
}
},
// watch: {
// 'mainStore.driverStatsData'(newData, prevData) {
// this.currentStatsTab =
// JSON.stringify(prevData) !== JSON.stringify(newData) && newData !== undefined
// ? Journal.StatsTab.DRIVER_STATS
// : this.currentStatsTab;
// }
// },
methods: {
onTabButtonClick(tab: Journal.StatsTab) {
this.currentStatsTab = tab == this.currentStatsTab ? null : tab;
StorageManager.setStringValue('journalStatsTab', this.currentStatsTab ?? '');
},
async fetchDriverStats() {
if (!this.mainStore.driverStatsName) {
this.mainStore.driverStatsData = undefined;
this.mainStore.driverStatsStatus = Status.Data.Initialized;
return;
}
try {
this.mainStore.driverStatsStatus = Status.Data.Loading;
const statsData: API.DriverStats.Response = await (
await http.get(`api/getDriverInfo?name=${this.mainStore.driverStatsName}`)
).data;
this.mainStore.driverStatsData = statsData;
this.mainStore.driverStatsStatus = Status.Data.Loaded;
} catch (error) {
this.mainStore.driverStatsData = undefined;
this.mainStore.driverStatsStatus = Status.Data.Error;
console.error('Ups! Wystąpił błąd przy próbie pobrania statystyk maszynisty! :/');
}
},
async fetchDispatcherStats() {
if (!this.mainStore.dispatcherStatsName) {
this.mainStore.dispatcherStatsData = undefined;
return;
}
try {
const statsData: API.DispatcherStats.Response = await (
await http.get('api/getDispatcherInfo', {
params: {
name: this.mainStore.dispatcherStatsName
}
})
).data;
this.mainStore.dispatcherStatsData = statsData;
} catch (error) {
this.mainStore.dispatcherStatsData = undefined;
console.error('Ups! Wystąpił błąd przy próbie pobrania statystyk dyżurnego! :/');
}
}
}
});