Informacja o statystykach

src/components/JournalView/DailyStats.vue

@@ -1,56 +1,67 @@
 <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>
+    <span :data-active="data.statsStatus">
+      <b v-if="data.stats.distanceSum == null">
+        {{ $t('journal.daily-stats-info') }}
+      </b>
 
-      <template #distance>
-        <b class="text--primary"> {{ data.stats.distanceSum }} km </b>
-      </template>
-    </i18n-t>
+      <span v-else>
+        <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>
 
-    <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>
+          <template #distance>
+            <b class="text--primary"> {{ data.stats.distanceSum }} 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>
+        <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>
+      </span>
+    </span>
   </section>
 </template>
 
 <script setup lang="ts">
 import axios from 'axios';
 import { reactive, ref } from 'vue';
+import { DataStatus } from '../../scripts/enums/DataStatus';
 import { ITimetablesDailyStats, ITimetablesDailyStatsResponse } from '../../scripts/interfaces/api/StatsAPIData';
 import { URLs } from '../../scripts/utils/apiURLs';
 
 const intervalId = ref(-1);
 
 const data = reactive({
+  statsStatus: DataStatus.Loading,
+
   stats: {
     totalTimetables: 0,
     distanceSum: 0,
@@ -87,8 +98,11 @@ async function fetchDailyTimetableStats() {
       dispatcherName: mostActiveDispatcher?.name || '',
       dispatcherTimetablesCount: mostActiveDispatcher?.count || 0,
     };
+
+    data.statsStatus = DataStatus.Loaded;
   } catch (error) {
     console.error('Ups! Wystąpił błąd podczas pobierania statystyk rozkładów jazdy...');
+    data.statsStatus = DataStatus.Error;
   }
 }
 
@@ -107,5 +121,9 @@ defineExpose({
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.daily-stats > span[data-active='0'] {
+  opacity: 0.75;
+}
+</style>
 

src/components/JournalView/JournalDriverStats.vue

@@ -39,11 +39,11 @@
       </div>
     </span>
 
-    <span v-else-if="store.driverStatsStatus == DataStatus.Loading">{{ $t('journal.stats-loading') }}</span>
-    <span v-else-if="store.driverStatsStatus == DataStatus.Error">
+    <b v-else-if="store.driverStatsStatus == DataStatus.Loading">{{ $t('journal.stats-loading') }}</b>
+    <b v-else-if="store.driverStatsStatus == DataStatus.Error">
       {{ $t('journal.stats-error ') }}
-    </span>
-    <span v-else>{{ $t('journal.driver-stats-info') }}</span>
+    </b>
+    <b v-else>{{ $t('journal.driver-stats-info') }}</b>
   </div>
 </template>
 

src/components/JournalView/JournalStats.vue

@@ -5,6 +5,7 @@
         v-for="tab in data.tabs"
         class="btn--filled"
         :data-selected="tab.name == store.currentStatsTab"
+        :data-inactive="tab.inactive"
         @click="onTabButtonClick(tab.name)"
       >
         {{ $t(tab.titlePath) }}
@@ -21,7 +22,7 @@
 </template>
 
 <script setup lang="ts">
-import { onActivated, onDeactivated, reactive, Ref, ref } from 'vue';
+import { computed, KeepAlive, onActivated, onDeactivated, reactive, Ref, ref, watch } from 'vue';
 import { useStore } from '../../store/store';
 import JournalDailyStats from './DailyStats.vue';
 import JournalDriverStats from './JournalDriverStats.vue';
@@ -43,8 +44,9 @@ let data = reactive({
     {
       name: 'driver',
       titlePath: 'journal.driver-stats-title',
+      inactive: true,
     },
-  ] as { name: TStatTab; titlePath: string }[],
+  ] as { name: TStatTab; titlePath: string; inactive?: boolean }[],
 });
 
 // Methods
@@ -60,35 +62,14 @@ onDeactivated(() => {
   dailyStatsComp.value?.stopFetchingDailyStats();
 });
 
-// Translation
+watch(
+  computed(() => store.driverStatsData),
+  (statsData) => {
+    console.log(statsData);
 
-// 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
+    data.tabs[1].inactive = statsData ? false : true;
+  }
+);
 </script>
 
 <style lang="scss" scoped>
@@ -103,10 +84,15 @@ onDeactivated(() => {
     font-weight: bold;
     border-radius: 0.4em 0.4em 0 0;
     padding: 0.5em 0.75em;
+    
+    &[data-inactive='true'] {
+      color: gray;
+    }
 
     &[data-selected='true'] {
       color: $accentCol;
     }
+
   }
 }
 </style>