From 58169e26f6f5eac0d227a334816f743b2bbf01e4 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 22 Dec 2022 01:45:43 +0100
Subject: [PATCH] Feedback i stylistyka statystyk RJ

---
 src/components/JournalView/DailyStats.vue | 85 +++++++++++++----------
 1 file changed, 50 insertions(+), 35 deletions(-)

diff --git a/src/components/JournalView/DailyStats.vue b/src/components/JournalView/DailyStats.vue
index 1d2e926..209ff5a 100644
--- a/src/components/JournalView/DailyStats.vue
+++ b/src/components/JournalView/DailyStats.vue
@@ -1,44 +1,55 @@
 <template>
   <section class="daily-stats">
     <span :data-active="data.statsStatus">
-      <b v-if="data.stats.distanceSum == null">
+      <b v-if="data.statsStatus == DataStatus.Loading">
+        Ładowanie...
+      </b>
+
+      <b v-else-if="data.stats.distanceSum == null">
         {{ $t('journal.daily-stats-info') }}
       </b>
 
-      <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.totalTimetables) }}
-            </b>
-          </template>
+      <span>
+        <div v-if="data.stats.totalTimetables">
+          &bull;
+          <i18n-t keypath="journal.timetable-stats-total">
+            <template #count>
+              <b class="text--primary">
+                {{ data.stats.totalTimetables }}
+                {{ $t('journal.timetable-count', data.stats.totalTimetables) }}
+              </b>
+            </template>
 
-          <template #distance>
-            <b class="text--primary"> {{ data.stats.distanceSum }} km </b>
-          </template>
-        </i18n-t>
+            <template #distance>
+              <b class="text--primary"> {{ data.stats.distanceSum }} km </b>
+            </template>
+          </i18n-t>
+        </div>
 
-        <i18n-t keypath="journal.timetable-stats-longest" tag="p">
-          <template #id>
-            <router-link :to="`/journal/timetables?timetableId=${data.stats.timetableId}`">
-              <b>{{ data.stats.timetableId }}</b>
-            </router-link>
-          </template>
-          <template #author>
-            <router-link :to="`/journal/dispatchers?dispatcherName=${data.stats.timetableAuthor}`">
-              <b>{{ data.stats.timetableAuthor }}</b>
-            </router-link>
-          </template>
-          <template #driver>
-            <b>{{ data.stats.timetableDriver }}</b>
-          </template>
-          <template #distance>
-            <b class="text--primary">{{ data.stats.timetableRouteDistance }} km</b>
-          </template>
-        </i18n-t>
+        <div v-if="data.stats.timetableId">
+          &bull;
+          <i18n-t keypath="journal.timetable-stats-longest">
+            <template #id>
+              <router-link :to="`/journal/timetables?timetableId=${data.stats.timetableId}`">
+                <b>{{ data.stats.timetableId }}</b>
+              </router-link>
+            </template>
+            <template #author>
+              <router-link :to="`/journal/dispatchers?dispatcherName=${data.stats.timetableAuthor}`">
+                <b>{{ data.stats.timetableAuthor }}</b>
+              </router-link>
+            </template>
+            <template #driver>
+              <b>{{ data.stats.timetableDriver }}</b>
+            </template>
+            <template #distance>
+              <b class="text--primary">{{ data.stats.timetableRouteDistance }} km</b>
+            </template>
+          </i18n-t>
+        </div>
 
-        <p v-if="firstPlaceDispatchers.length == 1">
+        <div v-if="firstPlaceDispatchers.length == 1">
+          &bull;
           <i18n-t keypath="journal.timetable-stats-most-active">
             <template #dispatcher>
               <router-link :to="`/journal/dispatchers?dispatcherName=${firstPlaceDispatchers[0].name}`">
@@ -52,9 +63,10 @@
               </b>
             </template>
           </i18n-t>
-        </p>
+        </div>
 
-        <p v-if="firstPlaceDispatchers.length > 1">
+        <div v-if="firstPlaceDispatchers.length > 1">
+          &bull;
           <i18n-t keypath="journal.timetable-stats-most-active-many">
             <template #dispatchers>
               <span v-for="(disp, i) in firstPlaceDispatchers">
@@ -75,7 +87,7 @@
               </b>
             </template>
           </i18n-t>
-        </p>
+        </div>
       </span>
     </span>
   </section>
@@ -160,6 +172,9 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
+.daily-stats {
+  text-align: left;
+}
 .daily-stats > span[data-active='0'] {
   opacity: 0.75;
 }