Client - display records on Calendar

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>

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"
 }

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"
 }

fittrackee_client/src/scss/base.scss

@@ -85,4 +85,8 @@ button {
 
 .upper {
   text-transform: uppercase;
+}
+
+.fa-trophy {
+  color: var(--workout-trophy-color)
 }

fittrackee_client/src/scss/colors.scss

@@ -31,4 +31,5 @@
   --disabled-background-color: #e0e0e0;
   --disabled-color: #a3a3a3;
 
+  --workout-trophy-color: #daa520;
 }