Client - display notes

fittrackee_client/src/components/Workout/WorkoutNotes.vue

@@ -0,0 +1,44 @@
+<template>
+  <div id="workout-note">
+    <Card :without-title="false">
+      <template #title>{{ t('workouts.NOTES') }}</template>
+      <template #content>
+        {{ notes && notes !== '' ? notes : t('workouts.NO_NOTES') }}</template
+      >
+    </Card>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue'
+  import { useI18n } from 'vue-i18n'
+
+  import Card from '@/components/Common/Card.vue'
+
+  export default defineComponent({
+    name: 'WorkoutNotes',
+    components: {
+      Card,
+    },
+    props: {
+      notes: {
+        type: String,
+        required: false,
+      },
+    },
+    setup() {
+      const { t } = useI18n()
+      return { t }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/base.scss';
+
+  #workout-note {
+    ::v-deep(.card-content) {
+      font-style: italic;
+    }
+  }
+</style>

fittrackee_client/src/locales/en/workouts.json

@@ -17,9 +17,11 @@
   "NO_DATA_CLEANING": "data from gpx, without any cleaning",
   "NO_MAP": "No map",
   "NO_NEXT_WORKOUT": "No next workout",
+  "NO_NOTES": "No notes",
   "NO_PREVIOUS_WORKOUT": "No previous workout",
   "NO_RECORDS": "No records.",
   "NO_WORKOUTS": "No workouts.",
+  "NOTES": "Notes",
   "PAUSES": "pauses",
   "PREVIOUS_WORKOUT": "Previous workout",
   "RECORD": "record | records",

fittrackee_client/src/locales/fr/workouts.json

@@ -17,9 +17,11 @@
   "NO_DATA_CLEANING": "données issues du fichier gpx, sans correction",
   "NO_MAP": "Pas de carte",
   "NO_NEXT_WORKOUT": "Pas de séance suivante",
+  "NO_NOTES": "Pas de notes",
   "NO_PREVIOUS_WORKOUT": "Pas de séances précédente",
   "NO_RECORDS": "Pas de records.",
   "NO_WORKOUTS": "Pas de séances.",
+  "NOTES": "Notes",
   "PAUSES": "pauses",
   "PREVIOUS_WORKOUT": "Séance précédente",
   "RECORD": "record | records",

fittrackee_client/src/views/Workout.vue

@@ -21,6 +21,7 @@
             :authUser="authUser"
             @getCoordinates="updateCoordinates"
           />
+          <WorkoutNotes :notes="workout.workout.notes" />
         </div>
         <div v-else>
           <NotFound target="WORKOUT" />
@@ -46,6 +47,7 @@
   import NotFound from '@/components/Common/NotFound.vue'
   import WorkoutChart from '@/components/Workout/WorkoutChart/index.vue'
   import WorkoutDetail from '@/components/Workout/WorkoutDetail/index.vue'
+  import WorkoutNotes from '@/components/Workout/WorkoutNotes.vue'
   import { SPORTS_STORE, USER_STORE, WORKOUTS_STORE } from '@/store/constants'
   import { IAuthUserProfile } from '@/types/user'
   import { IWorkoutState, TCoordinates } from '@/types/workouts'
@@ -58,6 +60,7 @@
       NotFound,
       WorkoutChart,
       WorkoutDetail,
+      WorkoutNotes,
     },
     setup() {
       const route = useRoute()