Statystyki maszynistów

src/components/JournalView/DailyStats.vue

@@ -0,0 +1,111 @@
+<template>
+  <section class="daily-stats">
+    <i18n-t keypath="journal.timetable-stats-total" tag="p">
+      <template #count>
+        <b class="text--primary">
+          {{ data.stats.totalTimetables }}
+          {{ $t('journal.timetable-count', data.stats.dispatcherTimetablesCount) }}
+        </b>
+      </template>
+
+      <template #distance>
+        <b class="text--primary"> {{ data.stats.distanceSum }} km </b>
+      </template>
+    </i18n-t>
+
+    <i18n-t keypath="journal.timetable-stats-longest" tag="p">
+      <template #id>
+        <b>{{ data.stats.timetableId }}</b>
+      </template>
+      <template #author>
+        <b>{{ data.stats.timetableAuthor }}</b>
+      </template>
+      <template #driver>
+        <b>{{ data.stats.timetableDriver }}</b>
+      </template>
+      <template #distance>
+        <b class="text--primary">{{ data.stats.timetableRouteDistance }} km</b>
+      </template>
+    </i18n-t>
+
+    <i18n-t keypath="journal.timetable-stats-most-active" tag="p">
+      <template #dispatcher>
+        <b>{{ data.stats.dispatcherName }}</b>
+      </template>
+      <template #count>
+        <b class="text--primary">
+          {{ data.stats.dispatcherTimetablesCount }}
+          {{ $t('journal.timetable-count', data.stats.dispatcherTimetablesCount) }}
+        </b>
+      </template>
+    </i18n-t>
+  </section>
+</template>
+
+<script setup lang="ts">
+import axios from 'axios';
+import { reactive, ref } from 'vue';
+import { ITimetablesDailyStats, ITimetablesDailyStatsResponse } from '../../scripts/interfaces/api/StatsAPIData';
+import { URLs } from '../../scripts/utils/apiURLs';
+
+const intervalId = ref(-1);
+
+const data = reactive({
+  stats: {
+    totalTimetables: 0,
+    distanceSum: 0,
+    distanceAvg: 0,
+    timetableAuthor: '',
+    timetableDriver: '',
+    timetableId: 0,
+    timetableRouteDistance: 0,
+    dispatcherName: '',
+    dispatcherTimetablesCount: 0,
+  } as ITimetablesDailyStats,
+});
+
+async function fetchDailyTimetableStats() {
+  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...');
+  }
+}
+
+function startFetchingDailyStats() {
+  fetchDailyTimetableStats();
+  intervalId.value = setInterval(fetchDailyTimetableStats, 60000);
+}
+
+function stopFetchingDailyStats() {
+  clearInterval(intervalId.value);
+}
+
+defineExpose({
+  startFetchingDailyStats,
+  stopFetchingDailyStats,
+});
+</script>
+
+<style lang="scss" scoped></style>
+

src/components/JournalView/DriverStats.vue

@@ -1,65 +0,0 @@
-<template>
-  <div class="journal-stats" v-if="store.driverStatsData">
-    <h1>
-      {{ $t('journal.stats-title') }} <span class="text--primary">{{ store.driverStatsName.toUpperCase() }}</span>
-    </h1>
-
-    <div class="info-stats">
-      <span class="stat-badge">
-        <span>{{ $t('journal.stats-timetables') }}</span>
-        <span>{{ store.driverStatsData._count.fulfilled }} / {{ store.driverStatsData._count._all }}</span>
-      </span>
-
-      <span class="stat-badge">
-        <span>{{ $t('journal.stats-longest-timetable') }}</span>
-        <span> {{ store.driverStatsData._max.routeDistance.toFixed(2) }}km </span>
-      </span>
-
-      <span class="stat-badge">
-        <span>{{ $t('journal.stats-avg-timetable') }}</span>
-        <span> {{ store.driverStatsData._avg.routeDistance.toFixed(2) }}km </span>
-      </span>
-
-      <span class="stat-badge">
-        <span>{{ $t('journal.stats-distance') }}</span>
-        <span>
-          {{ store.driverStatsData._sum.currentDistance.toFixed(2) }} /
-          {{ store.driverStatsData._sum.routeDistance.toFixed(2) }}km
-        </span>
-      </span>
-
-      <span class="stat-badge">
-        <span>{{ $t('journal.stats-stations') }}</span>
-        <span>
-          {{ store.driverStatsData._sum.confirmedStopsCount }} /
-          {{ store.driverStatsData._sum.allStopsCount }}
-        </span>
-      </span>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import axios from 'axios';
-import { computed, defineComponent, ref } from 'vue';
-import { DriverStatsAPIData } from '../../scripts/interfaces/api/DriverStatsAPIData';
-import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
-import { URLs } from '../../scripts/utils/apiURLs';
-import { useStore } from '../../store/store';
-
-export default defineComponent({
-  data() {
-    return {
-      test: Math.random(),
-      lastDispatcherName: '',
-      store: useStore(),
-
-      lastTimetables: [] as TimetableHistory[],
-    };
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/JournalStats.scss';
-</style>

src/components/JournalView/JournalDriverStats.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="journal-stats">
+    <span v-if="store.driverStatsData">
+      <h3>
+        {{ $t('journal.stats-title') }} <span class="text--primary">{{ store.driverStatsName.toUpperCase() }}</span>
+      </h3>
+
+      <div class="info-stats">
+        <span class="stat-badge">
+          <span>{{ $t('journal.stats-timetables') }}</span>
+          <span>{{ store.driverStatsData._count.fulfilled }} / {{ store.driverStatsData._count._all }}</span>
+        </span>
+
+        <span class="stat-badge">
+          <span>{{ $t('journal.stats-longest-timetable') }}</span>
+          <span> {{ store.driverStatsData._max.routeDistance.toFixed(2) }}km </span>
+        </span>
+
+        <span class="stat-badge">
+          <span>{{ $t('journal.stats-avg-timetable') }}</span>
+          <span> {{ store.driverStatsData._avg.routeDistance.toFixed(2) }}km </span>
+        </span>
+
+        <span class="stat-badge">
+          <span>{{ $t('journal.stats-distance') }}</span>
+          <span>
+            {{ store.driverStatsData._sum.currentDistance.toFixed(2) }} /
+            {{ store.driverStatsData._sum.routeDistance.toFixed(2) }}km
+          </span>
+        </span>
+
+        <span class="stat-badge">
+          <span>{{ $t('journal.stats-stations') }}</span>
+          <span>
+            {{ store.driverStatsData._sum.confirmedStopsCount }} /
+            {{ store.driverStatsData._sum.allStopsCount }}
+          </span>
+        </span>
+      </div>
+    </span>
+
+    <span v-else-if="store.driverStatsStatus == DataStatus.Loading">{{ $t('journal.stats-loading') }}</span>
+    <span v-else-if="store.driverStatsStatus == DataStatus.Error">
+      {{ $t('journal.stats-error ') }}
+    </span>
+    <span v-else>{{ $t('journal.driver-stats-info') }}</span>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { DataStatus } from '../../scripts/enums/DataStatus';
+import { useStore } from '../../store/store';
+
+export default defineComponent({
+  data() {
+    return {
+      store: useStore(),
+      DataStatus,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/JournalStats.scss';
+</style>

src/components/JournalView/JournalOptions.vue

@@ -155,7 +155,7 @@ export default defineComponent({
 
   watch: {
     async driverStatsName(value: string) {
-      await this.fetchDispatcherStats();
+      await this.fetchDriverStats();
       this.store.currentStatsTab = value ? 'driver' : 'daily';
     },
 
@@ -204,16 +204,27 @@ export default defineComponent({
   },
 
   methods: {
-    async fetchDispatcherStats() {
+    async fetchDriverStats() {
       this.store.driverStatsData = undefined;
 
-      if (!this.store.driverStatsName) return;
+      if (!this.store.driverStatsName) {
+        this.store.driverStatsStatus = DataStatus.Initialized;
+        return;
+      }
 
-      const statsData: DriverStatsAPIData = await (
+      try {
-        await axios.get(`${URLs.stacjownikAPI}/api/getDriverInfo?name=${this.store.driverStatsName}`)
+        this.store.driverStatsStatus = DataStatus.Loading;
-      ).data;
 
-      this.store.driverStatsData = statsData;
+        const statsData: DriverStatsAPIData = await (
+          await axios.get(`${URLs.stacjownikAPI}/api/getDriverInfo?name=${this.store.driverStatsName}`)
+        ).data;
+
+        this.store.driverStatsData = statsData;
+        this.store.driverStatsStatus = DataStatus.Loaded;
+      } catch (error) {
+        this.store.driverStatsStatus = DataStatus.Error;
+        console.error('Ups! Wystąpił błąd przy próbie pobrania statystyk maszynisty! :/');
+      }
     },
 
     // Override keyMixin function

src/components/JournalView/JournalStats.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="journal-stats">
+    <div class="tabs">
+      <button
+        v-for="tab in data.tabs"
+        class="btn--filled"
+        :data-selected="tab.name == store.currentStatsTab"
+        @click="onTabButtonClick(tab.name)"
+      >
+        {{ $t(tab.titlePath) }}
+      </button>
+    </div>
+
+    <div class="stats-tab">
+      <keep-alive>
+        <JournalDailyStats v-if="store.currentStatsTab == 'daily'" ref="dailyStatsComp" />
+        <JournalDriverStats v-else-if="store.currentStatsTab == 'driver'" />
+      </keep-alive>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onActivated, onDeactivated, reactive, Ref, ref } from 'vue';
+import { useStore } from '../../store/store';
+import JournalDailyStats from './DailyStats.vue';
+import JournalDriverStats from './JournalDriverStats.vue';
+
+// Types
+type TStatTab = 'daily' | 'driver';
+
+// Variables
+
+const store = useStore();
+const dailyStatsComp: Ref<InstanceType<typeof JournalDailyStats> | null> = ref(null);
+
+let data = reactive({
+  tabs: [
+    {
+      name: 'daily',
+      titlePath: 'journal.daily-stats-title',
+    },
+    {
+      name: 'driver',
+      titlePath: 'journal.driver-stats-title',
+    },
+  ] as { name: TStatTab; titlePath: string }[],
+});
+
+// Methods
+function onTabButtonClick(tab: TStatTab) {
+  store.currentStatsTab = tab;
+}
+
+onActivated(() => {
+  dailyStatsComp.value?.startFetchingDailyStats();
+});
+
+onDeactivated(() => {
+  dailyStatsComp.value?.stopFetchingDailyStats();
+});
+
+// Translation
+
+// 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}`
+// );
+
+// Hooks
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/JournalStats.scss';
+@import '../../styles/variables.scss';
+
+.tabs {
+  display: flex;
+  gap: 0.5em;
+
+  button {
+    font-weight: bold;
+    border-radius: 0.4em 0.4em 0 0;
+    padding: 0.5em 0.75em;
+
+    &[data-selected='true'] {
+      color: $accentCol;
+    }
+  }
+}
+</style>
+

src/components/JournalView/TimetablesStats.vue

@@ -1,168 +0,0 @@
-<template>
-  <div class="timetables-stats">
-    <div class="tabs">
-      <button
-        v-for="tab in data.tabs"
-        class="btn--filled"
-        :disabled="tab.disabled"
-        :data-disabled="tab.disabled"
-        :data-selected="tab.name == store.currentStatsTab"
-        @click="onTabButtonClick(tab.name, tab.disabled)"
-      >
-        {{ tab.title }}
-      </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, onDeactivated, reactive, ref, watch } 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';
-
-// Types
-type TStatTab = 'daily' | 'driver';
-
-// Variables
-
-const store = useStore();
-const intervalId = ref(-1);
-
-let data = reactive({
-  tabs: [
-    {
-      name: 'daily',
-      title: 'STATYSTYKI DNIA',
-      disabled: false,
-    },
-    {
-      name: 'driver',
-      title: 'STATYSTYKI GRACZA',
-      disabled: true,
-    },
-  ] as { name: TStatTab; title: string; disabled: boolean }[],
-  stats: {
-    totalTimetables: 0,
-    distanceSum: 0,
-    distanceAvg: 0,
-    timetableAuthor: '',
-    timetableDriver: '',
-    timetableId: 0,
-    timetableRouteDistance: 0,
-    dispatcherName: '',
-    dispatcherTimetablesCount: 0,
-  } as ITimetablesDailyStats,
-});
-
-// Methods
-function onTabButtonClick(tab: TStatTab, disabled: boolean) {
-  if (!disabled) store.currentStatsTab = tab;
-}
-
-async function fetchDailyTimetableStats() {
-  console.log('test');
-
-  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...');
-  }
-}
-// Translation
-
-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}`
-);
-
-// Hooks & watchers
-
-watch(
-  computed(() => store.driverStatsData),
-  (stats) => {
-    data.tabs[1].disabled = stats ? false : true;
-  }
-);
-
-onActivated(() => {
-  fetchDailyTimetableStats();
-  intervalId.value = setInterval(fetchDailyTimetableStats, 60000);
-});
-
-onDeactivated(() => {
-  clearInterval(intervalId.value);
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/JournalStats.scss';
-@import '../../styles/variables.scss';
-
-.tabs {
-  display: flex;
-  gap: 0.5em;
-
-  button {
-    font-weight: bold;
-    border-radius: 0.4em 0.4em 0 0;
-    padding: 0.5em 0.75em;
-
-    &[data-selected='true'] {
-      color: $accentCol;
-    }
-  }
-}
-
-.timetables-stats {
-  margin-bottom: 0.5em;
-}
-</style>
-

src/locales/en.json

@@ -264,9 +264,19 @@
     "stats-distance": "DISTANCE",
     "stats-stations": "STATIONS",
 
-    "timetables-stats-total": "Today, dispatchers made so far <b class='text--primary'>{count}</b> timetables with total distance of <b class='text--primary'>{distance}km</b>.",
+    "timetable-stats-total": "Today, dispatchers made so far {count} with total distance of {distance}",
-    "timetable-stats-longest": "Today's the longest timetable is <b>#{id}</b> made by <b>{author}</b> for <b>{driver}</b> - <b class='text--primary'>{distance}km</b>!",
+    "timetable-stats-longest": "Today's the longest timetable is #{id} made by {author} for {driver} - {distance}",
-    "timetable-stats-most-active": "The most active dispatcher is <b>{dispatcher}</b> who created <b class='text--primary'>{count}</b> timetables."
+    "timetable-stats-most-active": "The most active dispatcher is {dispatcher} who created {count}",
+
+    "timetable-count": "timetable | timetables",
+
+    "daily-stats-title": "DAILY STATS",
+    "driver-stats-title": "DRIVER STATS",
+
+    "driver-stats-info": "Enter a proper nickname into filters [F] to see user's driving statistics!",
+
+    "stats-loading": "Fetching statistics...",
+    "stats-error": "Oops! An unexpected error occurred while trying to fetch statistics! :/"
   },
   "scenery": {
     "users": "PLAYERS ONLINE",

src/locales/pl.json

@@ -268,9 +268,18 @@
     "stats-distance": "DYSTANS",
     "stats-stations": "STACJE",
 
-    "timetables-stats-total": "Dyżurni stworzyli dziś <b class='text--primary'>{count}</b> rozkładów jazdy o łącznym dystansie <b class='text--primary'>{distance}km</b>.",
+    "timetable-stats-total": "Dyżurni stworzyli dziś {count}  o łącznym dystansie {distance}",
-    "timetable-stats-longest": "Najdłuższym rozkładem jazdy jest dzisiaj <b>#{id}</b> stworzony przez dyżurnego <b>{author}</b> dla maszynisty <b>{driver}</b> - <b class='text--primary'>{distance}km</b>!",
+    "timetable-stats-longest": "Najdłuższym rozkładem jazdy jest dzisiaj #{id} stworzony przez dyżurnego {author} dla maszynisty {driver} - {distance}",
-    "timetable-stats-most-active": "Dzisiejszym najaktywniejszym dyżurnym jest <b>{dispatcher}</b>, który stworzył <b class='text--primary'>{count}</b> RJ."
+    "timetable-stats-most-active": "Dzisiejszym najaktywniejszym dyżurnym jest {dispatcher}, który stworzył {count}",
+
+    "timetable-count": "rozkład jazdy | rozkładów jazdy",
+
+    "daily-stats-title": "STATYSTYKI DNIA",
+    "driver-stats-title": "STATYSTYKI GRACZA",
+    "driver-stats-info": "Wpisz nazwę użytkownika w filtrach [F], aby zobaczyć jego statystyki maszynisty!",  
+
+    "stats-loading": "Pobieranie statystyk...",
+    "stats-error": "Ups! Wystąpił błąd podczas próby pobrania statystyk! :/"
   },
   "scenery": {
     "users": "GRACZE ONLINE",

src/store/store.ts

@@ -41,6 +41,7 @@ export const useStore = defineStore('store', {
 
       driverStatsName: '',
       driverStatsData: undefined,
+      driverStatsStatus: DataStatus.Initialized,
 
       chosenModalTrainId: undefined,
 

src/store/storeTypes.ts

@@ -29,6 +29,7 @@ export interface StoreState {
 
   driverStatsName: string;
   driverStatsData?: DriverStatsAPIData;
+  driverStatsStatus: DataStatus;
 
   chosenModalTrainId?: string;
 

src/styles/JournalStats.scss

@@ -1,7 +1,7 @@
 @import 'variables.scss';
 @import 'responsive.scss';
 
-.journal-stats {
+.stats-tab {
   background-color: #1a1a1a;
   padding: 1em;
   margin-bottom: 1em;

src/views/JournalTimetables.vue

@@ -3,7 +3,7 @@
     <JournalHeader />
     
     <div class="journal_wrapper">
-      <TimetablesStats />
+      <JournalStats />
 
       <JournalOptions
         @on-search-confirm="searchHistory"
@@ -54,7 +54,7 @@
 import { defineComponent, provide, reactive, Ref, ref } from 'vue';
 import axios from 'axios';
 
-import DriverStats from '../components/JournalView/DriverStats.vue';
+import DriverStats from '../components/JournalView/JournalDriverStats.vue';
 import Loading from '../components/Global/Loading.vue';
 import { JournalTimetableFilter, JournalTimetableSorter } from '../types/Journal/JournalTimetablesTypes';
 import dateMixin from '../mixins/dateMixin';
@@ -70,13 +70,13 @@ import modalTrainMixin from '../mixins/modalTrainMixin';
 import imageMixin from '../mixins/imageMixin';
 import JournalTimetablesList from '../components/JournalView/JournalTimetablesList.vue';
 import { journalTimetableFilters } from '../constants/Journal/JournalTimetablesConsts';
-import TimetablesStats from '../components/JournalView/TimetablesStats.vue';
+import JournalStats from '../components/JournalView/JournalStats.vue';
 import JournalHeader from '../components/JournalView/JournalHeader.vue';
 
 const TIMETABLES_API_URL = `${URLs.stacjownikAPI}/api/getTimetables`;
 
 export default defineComponent({
-  components: { DriverStats, Loading, JournalOptions, JournalTimetablesList, TimetablesStats, JournalHeader },
+  components: { DriverStats, Loading, JournalOptions, JournalTimetablesList, JournalStats, JournalHeader },
   mixins: [dateMixin, routerMixin, modalTrainMixin, imageMixin],
 
   name: 'JournalTimetables',