Rework statystyk RJ

2026-05-03 13:28:11 +00:00 · 2022-12-17 20:45:59 +01:00
parent d4fee84603
commit 651c60707a
2 changed files with 139 additions and 0 deletions
@@ -0,0 +1,113 @@
+<template>
+  <div class="timetables-stats">
+    <div class="tabs">
+      <button class="btn--filled" @click="store.currentStatsTab = 'daily'">STATYSTYKI DNIA</button>
+      <button v-if="store.driverStatsData" class="btn--filled" @click="store.currentStatsTab = 'driver'">
+        STATYSTYKI GRACZA
+      </button>
+    </div>
+
+    <div class="journal-stats" v-html="timetablesStats" v-if="store.currentStatsTab == 'daily'"></div>
+    <DriverStats v-else-if="store.currentStatsTab == 'driver'" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import axios from 'axios';
+import { computed, onActivated, reactive, Ref, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { ITimetablesDailyStats, ITimetablesDailyStatsResponse } from '../../scripts/interfaces/api/StatsAPIData';
+import { URLs } from '../../scripts/utils/apiURLs';
+import { useStore } from '../../store/store';
+import DriverStats from './DriverStats.vue';
+
+const store = useStore();
+
+let data = reactive({
+  stats: {
+    totalTimetables: 0,
+    distanceSum: 0,
+    distanceAvg: 0,
+    timetableAuthor: '',
+    timetableDriver: '',
+    timetableId: 0,
+    timetableRouteDistance: 0,
+    dispatcherName: '',
+    dispatcherTimetablesCount: 0,
+  } as ITimetablesDailyStats,
+});
+
+onActivated(async () => {
+  try {
+    const {
+      distanceAvg,
+      distanceSum,
+      maxTimetable,
+      totalTimetables,
+      mostActiveDispatcher,
+    }: ITimetablesDailyStatsResponse = await (
+      await axios.get(`${URLs.stacjownikAPI}/api/getDailyTimetableStats`)
+    ).data;
+
+    data.stats = {
+      totalTimetables,
+      distanceSum,
+      distanceAvg,
+      timetableAuthor: maxTimetable?.authorName || '',
+      timetableDriver: maxTimetable?.driverName || '',
+      timetableId: maxTimetable?.timetableId || 0,
+      timetableRouteDistance: maxTimetable?.routeDistance || 0,
+      dispatcherName: mostActiveDispatcher?.name || '',
+      dispatcherTimetablesCount: mostActiveDispatcher?.count || 0,
+    };
+  } catch (error) {
+    console.error('Ups! Wystąpił błąd podczas pobierania statystyk rozkładów jazdy...');
+  }
+});
+
+const { t } = useI18n();
+
+const totalTimetables = computed(() =>
+  t('journal.timetables-stats-total', { count: data.stats.totalTimetables, distance: data.stats.distanceSum })
+);
+
+const longestTimetable = computed(() =>
+  t('journal.timetable-stats-longest', {
+    id: data.stats.timetableId,
+    author: data.stats.timetableAuthor,
+    driver: data.stats.timetableDriver,
+    distance: data.stats.timetableRouteDistance,
+  })
+);
+
+const mostActiveDispatcher = computed(() =>
+  t('journal.timetable-stats-most-active', {
+    dispatcher: data.stats.dispatcherName,
+    count: data.stats.dispatcherTimetablesCount,
+  })
+);
+
+const timetablesStats = computed(
+  () => `&bull; ${totalTimetables.value}<br>&bull; ${longestTimetable.value}<br>&bull; ${mostActiveDispatcher.value}`
+);
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/JournalStats.scss';
+
+.tabs {
+  display: flex;
+  gap: 0.5em;
+
+  button {
+    font-weight: bold;
+    border-radius: 0.4em 0.4em 0 0;
+    padding: 0.5em 0.75em;
+  }
+}
+
+.timetables-stats {
+  margin-bottom: 0.5em;
+}
+</style>
+