Informacja o statystykach

.github/workflows/firebase-hosting-pull-request.yml

@@ -1,16 +0,0 @@
-# This file was auto-generated by the Firebase CLI
-# https://github.com/firebase/firebase-tools
-
-name: Deploy to Firebase Hosting on PR
-'on': pull_request
-jobs:
-  build_and_preview:
-    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: FirebaseExtended/action-hosting-deploy@v0
-        with:
-          repoToken: '${{ secrets.GITHUB_TOKEN }}'
-          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_STACJOWNIK_TD2 }}'
-          projectId: stacjownik-td2

package.json

@@ -8,7 +8,7 @@
     "deploy": "yarn build && firebase deploy --only hosting",
     "preview": "vite preview"
   },
-  "dependencies": { 
+  "dependencies": {
     "core-js": "^3.12.1",
     "dotenv": "^16.0.3",
     "firebase": "^9.8.1",
@@ -22,10 +22,10 @@
   },
   "devDependencies": {
     "@types/node": "^18.11.1",
-    "@vitejs/plugin-vue": "^3.0.0",
+    "@vitejs/plugin-vue": "^4.0.0",
     "axios": "^1.1.2",
     "typescript": "^4.6.4",
-    "vite": "^3.0.0",
+    "vite": "^4.0.2",
     "vue-tsc": "^1.0.9"
   },
   "browserslist": [

src/components/App/Loading.vue

@@ -1,31 +0,0 @@
-<template>
-  <div class="loading">{{message}}</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  props: ["message"],
-});
-</script>
-
-<style lang="scss" scoped>
-.loading {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  min-height: 100%;
-
-  position: absolute;
-  top: 50%;
-  left: 50%;
-
-  transform: translate(-50%, -50%);
-
-  font-size: calc(0.75rem + 1vw);
-
-  color: #fdc62f;
-}
-</style>

src/components/Global/Loading.vue

@@ -20,7 +20,7 @@ export default defineComponent({
 .loading {
   position: absolute;
   left: 50%;
-  transform: translateX(-50%);
+  transform: translate(-50%, -50%);
 
   display: flex;
   justify-content: center;

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>

src/locales/en.json

@@ -271,8 +271,9 @@
     "timetable-count": "timetable | timetables",
 
     "daily-stats-title": "DAILY STATS",
-    "driver-stats-title": "DRIVER STATS",
+    "daily-stats-info": "Today's statistics are unavailable yet!",
 
+    "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...",

src/locales/pl.json

@@ -275,8 +275,10 @@
     "timetable-count": "rozkład jazdy | rozkładów jazdy",
 
     "daily-stats-title": "STATYSTYKI DNIA",
+    "daily-stats-info": "Dzisiejsze statystyki nie są jeszcze dostępne!",
+
     "driver-stats-title": "STATYSTYKI GRACZA",
-    "driver-stats-info": "Wpisz nazwę użytkownika w filtrach [F], aby zobaczyć jego statystyki maszynisty!",  
+    "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! :/"

src/styles/JournalStats.scss

@@ -5,6 +5,8 @@
   background-color: #1a1a1a;
   padding: 1em;
   margin-bottom: 1em;
+
+  border-radius: 0 0 1em 1em;
 }
 
 .info-stats {
@@ -40,3 +42,4 @@
     justify-content: center;
   }
 }
+