From 262f01a05560621a50907a17d83ede9955e73078 Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Wed, 8 Sep 2021 18:35:32 +0200
Subject: [PATCH] Client - display records on Calendar

---
 .../UserCalendar/CalendarWorkout.vue          | 32 ++++++++++++++++++-
 .../src/locales/en/workouts.json              |  4 +++
 .../src/locales/fr/workouts.json              |  4 +++
 fittrackee_client/src/scss/base.scss          |  4 +++
 fittrackee_client/src/scss/colors.scss        |  1 +
 5 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarWorkout.vue b/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarWorkout.vue
index 0ccaad3c..5400832c 100644
--- a/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarWorkout.vue
+++ b/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarWorkout.vue
@@ -1,11 +1,24 @@
 <template>
   <div class="calendar-workout">
     <img alt="workout sport logo" :src="sportImg" :title="workout.title" />
+    <sup>
+      <i
+        v-if="workout.records.length > 0"
+        class="fa fa-trophy custom-fa-small"
+        aria-hidden="true"
+        :title="
+          workout.records.map(
+            (record) => ` ${t(`workouts.RECORD_${record.record_type}`)}`
+          )
+        "
+      />
+    </sup>
   </div>
 </template>
 
 <script lang="ts">
   import { defineComponent, PropType } from 'vue'
+  import { useI18n } from 'vue-i18n'
 
   import { IWorkout } from '@/types/workouts'
 
@@ -21,6 +34,10 @@
         required: true,
       },
     },
+    setup() {
+      const { t } = useI18n()
+      return { t }
+    },
   })
 </script>
 
@@ -28,17 +45,30 @@
   @import '~@/scss/base';
 
   .calendar-workout {
-    padding: 2px;
+    padding: 2px 0;
     img {
       max-width: 18px;
       max-height: 18px;
     }
+    sup {
+      position: relative;
+      top: -0.6em;
+      left: -0.4em;
+      .custom-fa-small {
+        font-size: 0.7em;
+      }
+    }
 
     @media screen and (max-width: $small-limit) {
       img {
         max-width: 14px;
         max-height: 14px;
       }
+      sup {
+        .custom-fa-small {
+          font-size: 0.6em;
+        }
+      }
     }
   }
 </style>
diff --git a/fittrackee_client/src/locales/en/workouts.json b/fittrackee_client/src/locales/en/workouts.json
index 21502a5b..f49c29cf 100644
--- a/fittrackee_client/src/locales/en/workouts.json
+++ b/fittrackee_client/src/locales/en/workouts.json
@@ -3,6 +3,10 @@
   "DISTANCE": "distance",
   "DURATION": "duration",
   "KM": "km",
+  "RECORD_AS": "Ave. speed",
+  "RECORD_FD": "Farest distance",
+  "RECORD_LD": "Longest duration",
+  "RECORD_MS": "Max. speed",
   "SPORT": "sport | sports",
   "WORKOUT": "workout | workouts"
 }
diff --git a/fittrackee_client/src/locales/fr/workouts.json b/fittrackee_client/src/locales/fr/workouts.json
index 7dc1e6b4..2f9fe809 100644
--- a/fittrackee_client/src/locales/fr/workouts.json
+++ b/fittrackee_client/src/locales/fr/workouts.json
@@ -3,6 +3,10 @@
   "DISTANCE": "distance",
   "DURATION": "durée",
   "KM": "km",
+  "RECORD_AS": "Vitesse moy.",
+  "RECORD_FD": "Distance la + longue",
+  "RECORD_LD": "Durée la + longue",
+  "RECORD_MS": "Vitesse max.",
   "SPORT": "sport | sports",
   "WORKOUT": "séance | séances"
 }
diff --git a/fittrackee_client/src/scss/base.scss b/fittrackee_client/src/scss/base.scss
index d329f711..910207f6 100644
--- a/fittrackee_client/src/scss/base.scss
+++ b/fittrackee_client/src/scss/base.scss
@@ -85,4 +85,8 @@ button {
 
 .upper {
   text-transform: uppercase;
+}
+
+.fa-trophy {
+  color: var(--workout-trophy-color)
 }
\ No newline at end of file
diff --git a/fittrackee_client/src/scss/colors.scss b/fittrackee_client/src/scss/colors.scss
index 47c591c5..aeecda3e 100644
--- a/fittrackee_client/src/scss/colors.scss
+++ b/fittrackee_client/src/scss/colors.scss
@@ -31,4 +31,5 @@
   --disabled-background-color: #e0e0e0;
   --disabled-color: #a3a3a3;
 
+  --workout-trophy-color: #daa520;
 }
\ No newline at end of file