From 63f8ef59ae912f909b36a249bdbd81bc73081fda Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Sun, 26 Sep 2021 11:40:07 +0200
Subject: [PATCH] Client - display notes

---
 .../src/components/Workout/WorkoutNotes.vue   | 44 +++++++++++++++++++
 .../src/locales/en/workouts.json              |  2 +
 .../src/locales/fr/workouts.json              |  2 +
 fittrackee_client/src/views/Workout.vue       |  3 ++
 4 files changed, 51 insertions(+)
 create mode 100644 fittrackee_client/src/components/Workout/WorkoutNotes.vue

diff --git a/fittrackee_client/src/components/Workout/WorkoutNotes.vue b/fittrackee_client/src/components/Workout/WorkoutNotes.vue
new file mode 100644
index 00000000..03e2d034
--- /dev/null
+++ b/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>
diff --git a/fittrackee_client/src/locales/en/workouts.json b/fittrackee_client/src/locales/en/workouts.json
index 5484ee00..b6aa7645 100644
--- a/fittrackee_client/src/locales/en/workouts.json
+++ b/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",
diff --git a/fittrackee_client/src/locales/fr/workouts.json b/fittrackee_client/src/locales/fr/workouts.json
index 968e710b..c97ea5a6 100644
--- a/fittrackee_client/src/locales/fr/workouts.json
+++ b/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",
diff --git a/fittrackee_client/src/views/Workout.vue b/fittrackee_client/src/views/Workout.vue
index 2b17ede8..b7cbb7a4 100644
--- a/fittrackee_client/src/views/Workout.vue
+++ b/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()