mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 13:28:11 +00:00
refactor(journal): removed seperate driver & dispatcher stats dropdowns; added button leading to player profile view
This commit is contained in:
@@ -1,85 +0,0 @@
|
||||
<template>
|
||||
<div class="journal-stats dispatcher" v-if="dispatcherName && stats">
|
||||
<span class="loading" v-if="!stats.issuedTimetables && !stats.services">
|
||||
{{ $t('journal.dispatcher-stats.empty') }}
|
||||
</span>
|
||||
|
||||
<span v-else>
|
||||
<h3>
|
||||
<i18n-t keypath="journal.dispatcher-stats.title">
|
||||
<template #name>
|
||||
<span class="text--primary">{{ dispatcherName.toUpperCase() }}</span>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</h3>
|
||||
|
||||
<hr class="header-separator" />
|
||||
|
||||
<div class="info-stats">
|
||||
<span class="badge stat-badge" v-if="stats.services">
|
||||
<span>{{ $t('journal.dispatcher-stats.services-count') }}</span>
|
||||
<span>{{ stats.services.count }}</span>
|
||||
</span>
|
||||
|
||||
<span class="badge stat-badge" v-if="stats.services">
|
||||
<span>{{ $t('journal.dispatcher-stats.service-max') }}</span>
|
||||
<span>{{ calculateDuration(stats.services.durationMax) }}</span>
|
||||
</span>
|
||||
|
||||
<span class="badge stat-badge" v-if="stats.services">
|
||||
<span>{{ $t('journal.dispatcher-stats.service-avg') }}</span>
|
||||
<span>{{ calculateDuration(stats.services.durationAvg) }}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<hr class="section-separator" v-if="stats.issuedTimetables" />
|
||||
|
||||
<div class="info-stats" v-if="stats.issuedTimetables">
|
||||
<span class="badge stat-badge">
|
||||
<span>{{ $t('journal.dispatcher-stats.timetables-count') }}</span>
|
||||
<span>{{ stats.issuedTimetables.count }}</span>
|
||||
</span>
|
||||
|
||||
<span class="badge stat-badge">
|
||||
<span>{{ $t('journal.dispatcher-stats.timetables-sum') }}</span>
|
||||
<span>{{ stats.issuedTimetables.distanceSum.toFixed(2) }}km</span>
|
||||
</span>
|
||||
|
||||
<span class="badge stat-badge">
|
||||
<span>{{ $t('journal.dispatcher-stats.timetables-max') }}</span>
|
||||
<span>{{ stats.issuedTimetables.distanceMax.toFixed(2) }}km</span>
|
||||
</span>
|
||||
|
||||
<span class="badge stat-badge">
|
||||
<span>{{ $t('journal.dispatcher-stats.timetables-avg') }}</span>
|
||||
<span>{{ stats.issuedTimetables.distanceAvg.toFixed(2) }}km</span>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import dateMixin from '../../../mixins/dateMixin';
|
||||
import { useMainStore } from '../../../store/mainStore';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'journal-dispatcher-stats',
|
||||
|
||||
mixins: [dateMixin],
|
||||
|
||||
setup() {
|
||||
const store = useMainStore();
|
||||
|
||||
return {
|
||||
stats: store.dispatcherStatsData,
|
||||
dispatcherName: store.dispatcherStatsName
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use '../../../styles/journal-stats';
|
||||
</style>
|
||||
@@ -2,87 +2,70 @@
|
||||
<div
|
||||
class="journal-stats dropdown"
|
||||
v-if="!mainStore.isOffline"
|
||||
@keydown.esc="currentStatsTab = null"
|
||||
@keydown.esc="isDropdownOpen = false"
|
||||
>
|
||||
<div
|
||||
class="dropdown_background"
|
||||
v-if="currentStatsTab !== null"
|
||||
@click="currentStatsTab = null"
|
||||
></div>
|
||||
<div class="dropdown_background" v-if="isDropdownOpen" @click="isDropdownOpen = false"></div>
|
||||
|
||||
<div class="actions-bar">
|
||||
<button class="btn--filled btn--image" @click="toggleDropdown">
|
||||
<img :src="`/images/icon-stats.svg`" alt="stats icon" />
|
||||
{{ $t('journal.daily-stats.button') }}
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-for="button in statsButtons"
|
||||
:key="button.tab"
|
||||
class="btn--filled btn--image"
|
||||
:data-selected="button.tab == currentStatsTab"
|
||||
:data-disabled="button.disabled"
|
||||
:disabled="button.disabled"
|
||||
@click="onTabButtonClick(button.tab)"
|
||||
:data-disabled="chosenPlayerId == -1"
|
||||
@click="navigateToProfile"
|
||||
>
|
||||
<img
|
||||
v-if="button.iconName"
|
||||
:src="`/images/icon-${button.iconName}.svg`"
|
||||
:alt="button.iconName"
|
||||
/>
|
||||
{{ $t(button.localeKey) }}
|
||||
<img :src="`/images/icon-user.svg`" alt="user icon" />
|
||||
{{ $t('profile.journal-button') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<transition name="dropdown-anim">
|
||||
<div
|
||||
class="dropdown_wrapper"
|
||||
:class="{ 'dropdown-align-right': true }"
|
||||
v-if="currentStatsTab !== null"
|
||||
>
|
||||
<div class="dropdown_wrapper" v-if="isDropdownOpen">
|
||||
<keep-alive>
|
||||
<component :is="currentStatsTab" :key="currentStatsTab"></component>
|
||||
<JournalDailyStats />
|
||||
</keep-alive>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { useMainStore } from '../../store/mainStore';
|
||||
import StorageManager from '../../managers/storageManager';
|
||||
import { Journal } from './typings';
|
||||
import JournalDailyStats from './JournalDailyStats.vue';
|
||||
import JournalDispatcherStats from '../JournalView/JournalDispatchers/JournalDispatcherStats.vue';
|
||||
import JournalDriverStats from '../JournalView/JournalTimetables/JournalDriverStats.vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
export default defineComponent({
|
||||
components: { JournalDailyStats, JournalDriverStats, JournalDispatcherStats },
|
||||
props: {
|
||||
statsButtons: {
|
||||
type: Array as PropType<Journal.StatsButton[]>,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Journal,
|
||||
mainStore: useMainStore(),
|
||||
currentStatsTab: null as Journal.StatsTab | null
|
||||
};
|
||||
},
|
||||
const router = useRouter();
|
||||
|
||||
methods: {
|
||||
onTabButtonClick(tab: Journal.StatsTab) {
|
||||
this.currentStatsTab = tab == this.currentStatsTab ? null : tab;
|
||||
|
||||
StorageManager.setStringValue('journalStatsTab', this.currentStatsTab ?? '');
|
||||
}
|
||||
const props = defineProps({
|
||||
chosenPlayerId: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const mainStore = useMainStore();
|
||||
const isDropdownOpen = ref(false);
|
||||
|
||||
function toggleDropdown() {
|
||||
isDropdownOpen.value = !isDropdownOpen.value;
|
||||
}
|
||||
|
||||
function navigateToProfile() {
|
||||
if (props.chosenPlayerId == -1) return;
|
||||
|
||||
router.push(`/profile?playerId=${props.chosenPlayerId}`);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use '../../styles/dropdown';
|
||||
@use '../../styles/dropdown-filters';
|
||||
|
||||
.dropdown_wrapper.dropdown-align-right {
|
||||
.dropdown_wrapper {
|
||||
left: auto;
|
||||
right: 0;
|
||||
max-width: 700px;
|
||||
|
||||
@@ -1,105 +0,0 @@
|
||||
<template>
|
||||
<div class="journal-stats driver" v-if="store.driverStatsData">
|
||||
<span>
|
||||
<h3>
|
||||
<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" />
|
||||
|
||||
<div class="info-stats">
|
||||
<span class="badge stat-badge">
|
||||
<span>{{ $t('journal.driver-stats.longest-timetable') }}</span>
|
||||
<span> {{ store.driverStatsData._max.routeDistance.toFixed(2) }}km </span>
|
||||
</span>
|
||||
|
||||
<span class="badge stat-badge">
|
||||
<span>{{ $t('journal.driver-stats.avg-timetable') }}</span>
|
||||
<span> {{ store.driverStatsData._avg.routeDistance.toFixed(2) }}km </span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<hr class="section-separator" />
|
||||
|
||||
<div class="info-stats">
|
||||
<span class="badge stat-badge">
|
||||
<span>{{ $t('journal.driver-stats.timetables') }}</span>
|
||||
<span>
|
||||
{{ store.driverStatsData._count.fulfilled }} /
|
||||
{{ store.driverStatsData._count._all }}
|
||||
|
||||
<template v-if="store.driverStatsData._count._all > 0">
|
||||
({{
|
||||
(
|
||||
(store.driverStatsData._count.fulfilled / store.driverStatsData._count._all) *
|
||||
100
|
||||
).toFixed(2)
|
||||
}}%)
|
||||
</template>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span class="badge stat-badge">
|
||||
<span>{{ $t('journal.driver-stats.distance') }}</span>
|
||||
<span>
|
||||
{{ store.driverStatsData._sum.currentDistance.toFixed(2) }} /
|
||||
{{ store.driverStatsData._sum.routeDistance.toFixed(2) }}km
|
||||
|
||||
<template v-if="store.driverStatsData._sum.routeDistance > 0">
|
||||
({{
|
||||
(
|
||||
(store.driverStatsData._sum.currentDistance /
|
||||
store.driverStatsData._sum.routeDistance) *
|
||||
100
|
||||
).toFixed(2)
|
||||
}}%)
|
||||
</template>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span class="badge stat-badge">
|
||||
<span>{{ $t('journal.driver-stats.stations') }}</span>
|
||||
<span>
|
||||
{{ store.driverStatsData._sum.confirmedStopsCount }} /
|
||||
{{ store.driverStatsData._sum.allStopsCount }}
|
||||
|
||||
<template v-if="store.driverStatsData._sum.allStopsCount > 0">
|
||||
({{
|
||||
(
|
||||
(store.driverStatsData._sum.confirmedStopsCount /
|
||||
store.driverStatsData._sum.allStopsCount) *
|
||||
100
|
||||
).toFixed(2)
|
||||
}}%)
|
||||
</template>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { useMainStore } from '../../../store/mainStore';
|
||||
import { Status } from '../../../typings/common';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'journal-driver-stats',
|
||||
|
||||
data() {
|
||||
return {
|
||||
store: useMainStore(),
|
||||
Status: Status
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use '../../../styles/journal-stats';
|
||||
</style>
|
||||
@@ -62,19 +62,6 @@ export namespace Journal {
|
||||
default: boolean;
|
||||
}
|
||||
|
||||
export enum StatsTab {
|
||||
DRIVER_STATS = 'journal-driver-stats',
|
||||
DISPATCHER_STATS = 'journal-dispatcher-stats',
|
||||
DAILY_STATS = 'journal-daily-stats'
|
||||
}
|
||||
|
||||
export interface StatsButton {
|
||||
tab: StatsTab;
|
||||
localeKey: string;
|
||||
iconName: string;
|
||||
disabled: boolean;
|
||||
}
|
||||
|
||||
export interface TimetableStopDetails {
|
||||
stopName: string;
|
||||
arrivalTimestamp: number;
|
||||
|
||||
Reference in New Issue
Block a user