From 6bfcb241334b82b21c3c6cfbb1352e10e46dba63 Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Wed, 29 Sep 2021 11:32:05 +0200
Subject: [PATCH] Client - add a workout + fix

---
 .../src/components/Common/CustomTextArea.vue  |   5 +
 .../components/Dashboard/Timeline/index.vue   |  20 +-
 fittrackee_client/src/components/NavBar.vue   |   4 +-
 .../src/components/Workout/WorkoutEdition.vue | 370 +++++++++++++++---
 .../src/locales/en/workouts.json              |  11 +-
 .../src/locales/fr/workouts.json              |   9 +-
 fittrackee_client/src/router/index.ts         |   6 +
 fittrackee_client/src/scss/base.scss          |   1 +
 .../src/store/modules/workouts/actions.ts     |  84 +++-
 .../src/store/modules/workouts/enums.ts       |   2 +
 .../src/store/modules/workouts/types.ts       |   9 +
 fittrackee_client/src/types/workouts.ts       |   6 +-
 fittrackee_client/src/views/AddWorkout.vue    |  47 +++
 fittrackee_client/src/views/EditWorkout.vue   |  15 +-
 14 files changed, 515 insertions(+), 74 deletions(-)
 create mode 100644 fittrackee_client/src/views/AddWorkout.vue

diff --git a/fittrackee_client/src/components/Common/CustomTextArea.vue b/fittrackee_client/src/components/Common/CustomTextArea.vue
index 458296f1..25d798b5 100644
--- a/fittrackee_client/src/components/Common/CustomTextArea.vue
+++ b/fittrackee_client/src/components/Common/CustomTextArea.vue
@@ -4,6 +4,7 @@
       :id="name"
       :name="name"
       :maxLenght="charLimit"
+      :disabled="disabled"
       v-model="text"
       @input="updateText"
     />
@@ -24,6 +25,10 @@
         type: Number,
         default: 500,
       },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
       input: {
         type: String,
         default: '',
diff --git a/fittrackee_client/src/components/Dashboard/Timeline/index.vue b/fittrackee_client/src/components/Dashboard/Timeline/index.vue
index 9cb577af..49d8fd07 100644
--- a/fittrackee_client/src/components/Dashboard/Timeline/index.vue
+++ b/fittrackee_client/src/components/Dashboard/Timeline/index.vue
@@ -2,15 +2,15 @@
   <div id="timeline">
     <div class="section-title">{{ t('workouts.LATEST_WORKOUTS') }}</div>
     <WorkoutCard
-      v-for="index in [...Array(workoutsToDisplayCount()).keys()]"
-      :workout="workouts.length > 0 ? workouts[index] : null"
+      v-for="workout in workouts"
+      :workout="workout"
       :sport="
         workouts.length > 0
-          ? sports.filter((s) => s.id === workouts[index].sport_id)[0]
+          ? sports.filter((s) => s.id === workout.sport_id)[0]
           : null
       "
       :user="user"
-      :key="index"
+      :key="workout.id"
     />
     <div v-if="workouts.length === 0" class="no-workouts">
       {{ t('workouts.NO_WORKOUTS') }}
@@ -56,7 +56,7 @@
         required: true,
       },
     },
-    setup(props) {
+    setup() {
       const store = useStore()
       const { t } = useI18n()
 
@@ -64,9 +64,6 @@
       const per_page = 5
       onBeforeMount(() => loadWorkouts())
 
-      const initWorkoutsCount =
-        props.user.nb_workouts >= per_page ? per_page : props.user.nb_workouts
-
       const workouts: ComputedRef<IWorkout[]> = computed(
         () => store.getters[WORKOUTS_STORE.GETTERS.USER_WORKOUTS]
       )
@@ -86,20 +83,13 @@
         page.value += 1
         loadWorkouts()
       }
-      function workoutsToDisplayCount() {
-        return workouts.value.length > initWorkoutsCount
-          ? workouts.value.length
-          : initWorkoutsCount
-      }
 
       return {
-        initWorkoutsCount,
         moreWorkoutsExist,
         per_page,
         workouts,
         t,
         loadMoreWorkouts,
-        workoutsToDisplayCount,
       }
     },
   })
diff --git a/fittrackee_client/src/components/NavBar.vue b/fittrackee_client/src/components/NavBar.vue
index f27d4b4a..43437075 100644
--- a/fittrackee_client/src/components/NavBar.vue
+++ b/fittrackee_client/src/components/NavBar.vue
@@ -28,7 +28,9 @@
             </div>
             <div class="nav-item">{{ t('statistics.STATISTICS') }}</div>
             <div class="nav-item">{{ t('administration.ADMIN') }}</div>
-            <div class="nav-item">{{ t('workouts.ADD_WORKOUT') }}</div>
+            <router-link class="nav-item" to="/workouts/add">
+              {{ t('workouts.ADD_WORKOUT') }}
+            </router-link>
             <div class="nav-item nav-separator" />
           </div>
         </div>
diff --git a/fittrackee_client/src/components/Workout/WorkoutEdition.vue b/fittrackee_client/src/components/Workout/WorkoutEdition.vue
index a68eeb24..17b98490 100644
--- a/fittrackee_client/src/components/Workout/WorkoutEdition.vue
+++ b/fittrackee_client/src/components/Workout/WorkoutEdition.vue
@@ -1,14 +1,45 @@
 <template>
   <div id="workout-edition">
     <Card :without-title="false">
-      <template #title>{{ t('workouts.EDIT_WORKOUT') }}</template>
+      <template #title>{{
+        t(`workouts.${isCreation ? 'ADD' : 'EDIT'}_WORKOUT`)
+      }}</template>
       <template #content>
         <div id="workout-form">
           <form @submit.prevent="updateWorkout">
             <div class="form-items">
+              <div class="form-item-radio" v-if="isCreation">
+                <div class="radio">
+                  <input
+                    id="withGpx"
+                    type="radio"
+                    :checked="withGpx"
+                    :disabled="loading"
+                    @click="updateWithGpx"
+                  />
+                  <label for="withGpx">{{ t('workouts.WITH_GPX') }}</label>
+                </div>
+                <div class="radio">
+                  <input
+                    id="withoutGpx"
+                    type="radio"
+                    :checked="!withGpx"
+                    :disabled="loading"
+                    @click="updateWithGpx"
+                  />
+                  <label for="withoutGpx">{{
+                    t('workouts.WITHOUT_GPX')
+                  }}</label>
+                </div>
+              </div>
               <div class="form-item">
                 <label> {{ t('workouts.SPORT', 1) }}: </label>
-                <select id="sport" v-model="workoutDataObject.sport_id">
+                <select
+                  id="sport"
+                  required
+                  :disabled="loading"
+                  v-model="workoutDataObject.sport_id"
+                >
                   <option
                     v-for="sport in translatedSports"
                     :value="sport.id"
@@ -18,38 +49,133 @@
                   </option>
                 </select>
               </div>
-              <div class="form-item">
+              <div class="form-item" v-if="isCreation && withGpx">
+                <label for="gpxFile">
+                  {{ t('workouts.GPX_FILE') }}
+                  <sup>
+                    <i class="fa fa-question-circle" aria-hidden="true" />
+                  </sup>
+                  {{ t('workouts.ZIP_FILE') }}
+                  <sup
+                    ><i class="fa fa-question-circle" aria-hidden="true" /></sup
+                  >:
+                </label>
+                <input
+                  id="gpxFile"
+                  name="gpxFile"
+                  type="file"
+                  accept=".gpx, .zip"
+                  :disabled="loading"
+                  @input="updateFile"
+                />
+              </div>
+              <div class="form-item" v-else>
                 <label for="title"> {{ t('workouts.TITLE') }}: </label>
                 <input
                   id="title"
                   name="title"
                   type="text"
+                  :required="!isCreation"
+                  :disabled="loading"
                   v-model="workoutDataObject.title"
                 />
               </div>
+              <div v-if="!withGpx">
+                <div class="workout-date-duration">
+                  <div class="form-item">
+                    <label>{{ t('workouts.WORKOUT_DATE') }}:</label>
+                    <div class="workout-date-time">
+                      <input
+                        id="workout-date"
+                        name="workout-date"
+                        type="date"
+                        required
+                        :disabled="loading"
+                        v-model="workoutDataObject.workoutDate"
+                      />
+                      <input
+                        id="workout-time"
+                        name="workout-time"
+                        class="workout-time"
+                        type="time"
+                        required
+                        :disabled="loading"
+                        v-model="workoutDataObject.workoutTime"
+                      />
+                    </div>
+                  </div>
+                  <div class="form-item">
+                    <label>{{ t('workouts.DURATION') }}:</label>
+                    <div>
+                      <input
+                        id="workout-duration-hour"
+                        name="workout-duration-hour"
+                        class="workout-duration"
+                        type="text"
+                        placeholder="HH"
+                        pattern="^([0-9]*[0-9])$"
+                        required
+                        :disabled="loading"
+                        v-model="workoutDataObject.workoutDurationHour"
+                      />
+                      :
+                      <input
+                        id="workout-duration-minutes"
+                        name="workout-duration-minutes"
+                        class="workout-duration"
+                        type="text"
+                        pattern="^([0-5][0-9])$"
+                        placeholder="MM"
+                        required
+                        :disabled="loading"
+                        v-model="workoutDataObject.workoutDurationMinutes"
+                      />
+                      :
+                      <input
+                        id="workout-duration-seconds"
+                        name="workout-duration-seconds"
+                        class="workout-duration"
+                        type="text"
+                        pattern="^([0-5][0-9])$"
+                        placeholder="SS"
+                        required
+                        :disabled="loading"
+                        v-model="workoutDataObject.workoutDurationSeconds"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div class="form-item">
+                  <label>{{ t('workouts.DISTANCE') }} (km):</label>
+                  <input
+                    type="number"
+                    min="0"
+                    step="0.1"
+                    required
+                    :disabled="loading"
+                    v-model="workoutDataObject.workoutDistance"
+                  />
+                </div>
+              </div>
               <div class="form-item">
                 <label> {{ t('workouts.NOTES') }}: </label>
                 <CustomTextArea
                   name="notes"
                   :input="workoutDataObject.notes"
+                  :disabled="loading"
                   @updateValue="updateNotes"
                 />
               </div>
             </div>
             <ErrorMessage :message="errorMessages" v-if="errorMessages" />
-            <div class="form-buttons">
-              <button class="confirm" type="submit">
+            <div v-if="loading">
+              <Loader />
+            </div>
+            <div v-else class="form-buttons">
+              <button class="confirm" type="submit" :disabled="loading">
                 {{ t('buttons.SUBMIT') }}
               </button>
-              <button
-                class="cancel"
-                @click="
-                  $router.push({
-                    name: 'Workout',
-                    params: { workoutId: workout.id },
-                  })
-                "
-              >
+              <button class="cancel" @click.prevent="onCancel">
                 {{ t('buttons.CANCEL') }}
               </button>
             </div>
@@ -67,18 +193,24 @@
     defineComponent,
     computed,
     reactive,
+    ref,
     watch,
+    onMounted,
     onUnmounted,
   } from 'vue'
   import { useI18n } from 'vue-i18n'
+  import { useRouter } from 'vue-router'
 
   import Card from '@/components/Common/Card.vue'
   import CustomTextArea from '@/components/Common/CustomTextArea.vue'
   import ErrorMessage from '@/components/Common/ErrorMessage.vue'
+  import Loader from '@/components/Common/Loader.vue'
   import { ROOT_STORE, WORKOUTS_STORE } from '@/store/constants'
   import { ISport } from '@/types/sports'
-  import { IWorkout } from '@/types/workouts'
+  import { IAuthUserProfile } from '@/types/user'
+  import { IWorkout, IWorkoutForm } from '@/types/workouts'
   import { useStore } from '@/use/useStore'
+  import { formatWorkoutDate, getDateWithTZ } from '@/utils/dates'
   import { translateSports } from '@/utils/sports'
 
   export default defineComponent({
@@ -87,20 +219,40 @@
       Card,
       CustomTextArea,
       ErrorMessage,
+      Loader,
     },
     props: {
+      authUser: {
+        type: Object as PropType<IAuthUserProfile>,
+        required: true,
+      },
+      isCreation: {
+        type: Boolean,
+        default: false,
+      },
+      loading: {
+        type: Boolean,
+        default: false,
+      },
       sports: {
         type: Object as PropType<ISport[]>,
         required: true,
       },
       workout: {
         type: Object as PropType<IWorkout>,
-        required: true,
+        required: false,
       },
     },
     setup(props) {
       const { t } = useI18n()
       const store = useStore()
+      const router = useRouter()
+
+      onMounted(() => {
+        if (props.workout && props.workout.id) {
+          formatWorkoutForm(props.workout)
+        }
+      })
 
       const translatedSports: ComputedRef<ISport[]> = computed(() =>
         translateSports(props.sports, t)
@@ -109,30 +261,112 @@
         () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
       )
       const workoutForm = reactive({
-        sport_id: 0,
+        sport_id: '',
         title: '',
         notes: '',
+        workoutDate: '',
+        workoutTime: '',
+        workoutDurationHour: '',
+        workoutDurationMinutes: '',
+        workoutDurationSeconds: '',
+        workoutDistance: '',
       })
+      let withGpx = ref(
+        props.workout ? props.workout.with_gpx : props.isCreation
+      )
+      let gpxFile: File | null = null
 
       function updateNotes(value: string) {
         workoutForm.notes = value
       }
+      function updateWithGpx() {
+        withGpx.value = !withGpx.value
+      }
+      function updateFile(event: Event & { target: HTMLInputElement }) {
+        if (event.target.files) {
+          gpxFile = event.target.files[0]
+        }
+      }
+      function formatWorkoutForm(workout: IWorkout) {
+        workoutForm.sport_id = `${workout.sport_id}`
+        workoutForm.title = workout.title
+        workoutForm.notes = workout.notes
+        if (!workout.with_gpx) {
+          const workoutDateTime = formatWorkoutDate(
+            getDateWithTZ(workout.workout_date, props.authUser.timezone),
+            'yyyy-MM-dd'
+          )
+          const duration = workout.duration.split(':')
+          workoutForm.workoutDistance = `${workout.distance}`
+          workoutForm.workoutDate = workoutDateTime.workout_date
+          workoutForm.workoutTime = workoutDateTime.workout_time
+          workoutForm.workoutDurationHour = duration[0]
+          workoutForm.workoutDurationMinutes = duration[1]
+          workoutForm.workoutDurationSeconds = duration[2]
+        }
+      }
+      function formatPayload(payload: IWorkoutForm) {
+        payload.title = workoutForm.title
+        payload.distance = +workoutForm.workoutDistance
+        payload.duration =
+          +workoutForm.workoutDurationHour * 3600 +
+          +workoutForm.workoutDurationMinutes * 60 +
+          +workoutForm.workoutDurationSeconds
+        payload.workout_date = `${workoutForm.workoutDate} ${workoutForm.workoutTime}`
+      }
       function updateWorkout() {
+        const payload: IWorkoutForm = {
+          sport_id: +workoutForm.sport_id,
+          notes: workoutForm.notes,
+        }
         if (props.workout) {
-          store.dispatch(WORKOUTS_STORE.ACTIONS.EDIT_WORKOUT, {
-            workoutId: props.workout.id,
-            data: workoutForm,
+          if (props.workout.with_gpx) {
+            store.dispatch(WORKOUTS_STORE.ACTIONS.EDIT_WORKOUT, {
+              workoutId: props.workout.id,
+              data: payload,
+            })
+          } else {
+            formatPayload(payload)
+            store.dispatch(
+              WORKOUTS_STORE.ACTIONS.ADD_WORKOUT_WITHOUT_GPX,
+              payload
+            )
+          }
+        } else {
+          if (withGpx.value) {
+            if (!gpxFile) {
+              throw new Error('No file provided !!')
+            }
+            payload.file = gpxFile
+            store.dispatch(WORKOUTS_STORE.ACTIONS.ADD_WORKOUT, payload)
+          } else {
+            formatPayload(payload)
+            store.dispatch(
+              WORKOUTS_STORE.ACTIONS.ADD_WORKOUT_WITHOUT_GPX,
+              payload
+            )
+          }
+        }
+      }
+      function onCancel() {
+        if (props.workout) {
+          router.push({
+            name: 'Workout',
+            params: { workoutId: props.workout.id },
           })
+        } else {
+          router.go(-1)
         }
       }
 
       watch(
         () => props.workout,
-        async (newWorkout: IWorkout | undefined) => {
-          if (newWorkout && newWorkout.id) {
-            workoutForm.sport_id = newWorkout.sport_id
-            workoutForm.title = newWorkout.title
-            workoutForm.notes = newWorkout.notes
+        async (
+          newWorkout: IWorkout | undefined,
+          previousWorkout: IWorkout | undefined
+        ) => {
+          if (newWorkout !== previousWorkout && newWorkout && newWorkout.id) {
+            formatWorkoutForm(newWorkout)
           }
         }
       )
@@ -143,8 +377,12 @@
         errorMessages,
         t,
         translatedSports,
+        withGpx,
         workoutDataObject: workoutForm,
+        onCancel,
+        updateFile,
         updateNotes,
+        updateWithGpx,
         updateWorkout,
       }
     },
@@ -155,42 +393,84 @@
   @import '~@/scss/base';
 
   #workout-edition {
-    margin: 25% auto;
+    margin: 100px auto;
     width: 700px;
+    @media screen and (max-width: $small-limit) {
+      width: 100%;
+      margin: 0 auto 50px auto;
+    }
 
     ::v-deep(.card) {
       .card-title {
         text-align: center;
         text-transform: uppercase;
       }
-      .card-content {
-        .form-items {
-          display: flex;
-          flex-direction: column;
 
-          .form-item {
+      .card-content {
+        @media screen and (max-width: $small-limit) {
+          padding: $default-padding 0;
+        }
+
+        #workout-form {
+          .form-items {
             display: flex;
             flex-direction: column;
-            padding: $default-padding;
 
-            label {
-              text-transform: capitalize;
+            input {
+              height: 20px;
+            }
+
+            .workout-date-duration {
+              display: flex;
+              flex-direction: row;
+              justify-content: space-between;
+
+              @media screen and (max-width: $small-limit) {
+                flex-direction: column;
+              }
+            }
+
+            .form-item {
+              display: flex;
+              flex-direction: column;
+              padding: $default-padding;
+
+              .workout-date-time {
+                display: flex;
+                #workout-date {
+                  margin-right: $default-margin;
+                }
+              }
+
+              .workout-duration {
+                width: 25px;
+              }
+            }
+
+            .form-item-radio {
+              display: flex;
+              justify-content: space-around;
+              .radio {
+                label {
+                  font-weight: normal;
+                }
+                input {
+                  margin-top: -2px;
+                  vertical-align: middle;
+                }
+              }
             }
           }
-        }
-        .form-buttons {
-          display: flex;
-          justify-content: flex-end;
-          button {
-            margin: $default-padding * 0.5;
+
+          .form-buttons {
+            display: flex;
+            justify-content: flex-end;
+            button {
+              margin: $default-padding * 0.5;
+            }
           }
         }
       }
     }
-
-    @media screen and (max-width: $small-limit) {
-      width: 100%;
-      margin: 15% auto;
-    }
   }
 </style>
diff --git a/fittrackee_client/src/locales/en/workouts.json b/fittrackee_client/src/locales/en/workouts.json
index d360740b..3fb38fc1 100644
--- a/fittrackee_client/src/locales/en/workouts.json
+++ b/fittrackee_client/src/locales/en/workouts.json
@@ -1,5 +1,5 @@
 {
-  "ADD_WORKOUT": "Add workout",
+  "ADD_WORKOUT": "Add a workout",
   "ANALYSIS": "analysis",
   "ASCENT": "ascent",
   "AVERAGE_SPEED": "average speed",
@@ -10,6 +10,7 @@
   "EDIT_WORKOUT": "Edit the workout",
   "ELEVATION": "elevation",
   "END": "end",
+  "GPX_FILE": "fichier .gpx",
   "KM": "km",
   "LATEST_WORKOUTS": "Latest workouts",
   "LOAD_MORE_WORKOUT": "Load more workouts",
@@ -27,7 +28,7 @@
   "NO_PREVIOUS_WORKOUT": "No previous workout",
   "NO_RECORDS": "No records.",
   "NO_WORKOUTS": "No workouts.",
-  "NOTES": "Notes",
+  "NOTES": "notes",
   "PAUSES": "pauses",
   "PREVIOUS_SEGMENT": "Previous segment",
   "PREVIOUS_WORKOUT": "Previous workout",
@@ -60,6 +61,10 @@
       "wind":  "wind"
     }
   },
+  "WITH_GPX": "with .gpx file",
+  "WITHOUT_GPX": "without .gpx file",
   "WORKOUT": "workout | workouts",
-  "WORKOUT_DELETION_CONFIRMATION": "Are you sure you want to delete this workout?"
+  "WORKOUT_DATE": "workout date",
+  "WORKOUT_DELETION_CONFIRMATION": "Are you sure you want to delete this workout?",
+  "ZIP_FILE": "or .zip file containing .gpx files"
 }
diff --git a/fittrackee_client/src/locales/fr/workouts.json b/fittrackee_client/src/locales/fr/workouts.json
index 00ff85aa..7b2c6fe0 100644
--- a/fittrackee_client/src/locales/fr/workouts.json
+++ b/fittrackee_client/src/locales/fr/workouts.json
@@ -10,6 +10,7 @@
   "EDIT_WORKOUT": "Modifier la séance",
   "ELEVATION": "altitude",
   "END": "fin",
+  "GPX_FILE": ".gpx file",
   "KM": "km",
   "LATEST_WORKOUTS": "Séances récentes",
   "LOAD_MORE_WORKOUT": "Charger les séances suivantes",
@@ -27,7 +28,7 @@
   "NO_PREVIOUS_WORKOUT": "Pas de séance précédente",
   "NO_RECORDS": "Pas de records.",
   "NO_WORKOUTS": "Pas de séances.",
-  "NOTES": "Notes",
+  "NOTES": "notes",
   "PAUSES": "pauses",
   "PREVIOUS_SEGMENT": "Segment précédent",
   "PREVIOUS_WORKOUT": "Séance précédente",
@@ -60,6 +61,10 @@
       "wind":  "venteux"
     }
   },
+  "WITH_GPX": "avec un fichier .gpx",
+  "WITHOUT_GPX": "sans fichier .gpx",
   "WORKOUT": "séance | séances",
-  "WORKOUT_DELETION_CONFIRMATION": "Etes-vous sûr de vouloir supprimer cette séance ?"
+  "WORKOUT_DATE": "date de la séance",
+  "WORKOUT_DELETION_CONFIRMATION": "Etes-vous sûr de vouloir supprimer cette séance ?",
+  "ZIP_FILE": "ou une archive .zip contenant des fichiers .gpx"
 }
diff --git a/fittrackee_client/src/router/index.ts b/fittrackee_client/src/router/index.ts
index 34a15be9..2d0cf1ec 100644
--- a/fittrackee_client/src/router/index.ts
+++ b/fittrackee_client/src/router/index.ts
@@ -2,6 +2,7 @@ import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 
 import store from '@/store'
 import { USER_STORE } from '@/store/constants'
+import AddWorkout from '@/views/AddWorkout.vue'
 import Dashboard from '@/views/DashBoard.vue'
 import EditWorkout from '@/views/EditWorkout.vue'
 import LoginOrRegister from '@/views/LoginOrRegister.vue'
@@ -43,6 +44,11 @@ const routes: Array<RouteRecordRaw> = [
     component: Workout,
     props: { displaySegment: true },
   },
+  {
+    path: '/workouts/add',
+    name: 'AddWorkout',
+    component: AddWorkout,
+  },
   { path: '/:pathMatch(.*)*', name: 'not-found', component: NotFoundView },
 ]
 
diff --git a/fittrackee_client/src/scss/base.scss b/fittrackee_client/src/scss/base.scss
index 97baf392..4d586a27 100644
--- a/fittrackee_client/src/scss/base.scss
+++ b/fittrackee_client/src/scss/base.scss
@@ -33,6 +33,7 @@ input, textarea, select {
   padding: $default-padding;
 
   &:disabled {
+    background-color:  var(--disabled-background-color);
     border-color: var(--disabled-color);
   }
 }
diff --git a/fittrackee_client/src/store/modules/workouts/actions.ts b/fittrackee_client/src/store/modules/workouts/actions.ts
index 381f2142..897ec137 100644
--- a/fittrackee_client/src/store/modules/workouts/actions.ts
+++ b/fittrackee_client/src/store/modules/workouts/actions.ts
@@ -2,13 +2,18 @@ import { ActionContext, ActionTree } from 'vuex'
 
 import authApi from '@/api/authApi'
 import router from '@/router'
-import { ROOT_STORE, WORKOUTS_STORE } from '@/store/constants'
+import { ROOT_STORE, USER_STORE, WORKOUTS_STORE } from '@/store/constants'
 import { IRootState } from '@/store/modules/root/types'
 import {
   IWorkoutsActions,
   IWorkoutsState,
 } from '@/store/modules/workouts/types'
-import { IWorkout, IWorkoutPayload, IWorkoutsPayload } from '@/types/workouts'
+import {
+  IWorkout,
+  IWorkoutForm,
+  IWorkoutPayload,
+  IWorkoutsPayload,
+} from '@/types/workouts'
 import { handleError } from '@/utils'
 
 const getWorkouts = (
@@ -113,37 +118,108 @@ export const actions: ActionTree<IWorkoutsState, IRootState> &
     payload: IWorkoutPayload
   ): void {
     context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
+    context.commit(WORKOUTS_STORE.MUTATIONS.SET_WORKOUT_LOADING, true)
     authApi
       .delete(`workouts/${payload.workoutId}`)
       .then(() => {
         context.commit(WORKOUTS_STORE.MUTATIONS.EMPTY_WORKOUT)
+        context.dispatch(USER_STORE.ACTIONS.GET_USER_PROFILE)
         router.push('/')
       })
       .catch((error) => {
         handleError(context, error)
       })
+      .finally(() =>
+        context.commit(WORKOUTS_STORE.MUTATIONS.SET_WORKOUT_LOADING, false)
+      )
   },
   [WORKOUTS_STORE.ACTIONS.EDIT_WORKOUT](
     context: ActionContext<IWorkoutsState, IRootState>,
     payload: IWorkoutPayload
   ): void {
     context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
+    context.commit(WORKOUTS_STORE.MUTATIONS.SET_WORKOUT_LOADING, true)
     authApi
       .patch(`workouts/${payload.workoutId}`, payload.data)
       .then(() => {
+        context.dispatch(USER_STORE.ACTIONS.GET_USER_PROFILE)
         context
           .dispatch(WORKOUTS_STORE.ACTIONS.GET_WORKOUT_DATA, {
             workoutId: payload.workoutId,
           })
-          .then(() =>
+          .then(() => {
             router.push({
               name: 'Workout',
               params: { workoutId: payload.workoutId },
             })
-          )
+          })
       })
       .catch((error) => {
         handleError(context, error)
       })
+      .finally(() =>
+        context.commit(WORKOUTS_STORE.MUTATIONS.SET_WORKOUT_LOADING, false)
+      )
+  },
+  [WORKOUTS_STORE.ACTIONS.ADD_WORKOUT](
+    context: ActionContext<IWorkoutsState, IRootState>,
+    payload: IWorkoutForm
+  ): void {
+    context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
+    context.commit(WORKOUTS_STORE.MUTATIONS.SET_WORKOUT_LOADING, true)
+    if (!payload.file) {
+      throw new Error('No gpx file provided')
+    }
+    const form = new FormData()
+    form.append('file', payload.file)
+    form.append(
+      'data',
+      `{"sport_id": ${payload.sport_id}, "notes": "${payload.notes}"}`
+    )
+    authApi
+      .post('workouts', form, {
+        headers: {
+          'content-type': 'multipart/form-data',
+        },
+      })
+      .then((res) => {
+        if (res.data.status === 'created') {
+          context.dispatch(USER_STORE.ACTIONS.GET_USER_PROFILE)
+          const workout: IWorkout = res.data.data.workouts[0]
+          router.push(
+            res.data.data.workouts.length === 1
+              ? `/workouts/${workout.id}`
+              : '/'
+          )
+        }
+      })
+      .catch((error) => {
+        handleError(context, error)
+      })
+      .finally(() =>
+        context.commit(WORKOUTS_STORE.MUTATIONS.SET_WORKOUT_LOADING, false)
+      )
+  },
+  [WORKOUTS_STORE.ACTIONS.ADD_WORKOUT_WITHOUT_GPX](
+    context: ActionContext<IWorkoutsState, IRootState>,
+    payload: IWorkoutForm
+  ): void {
+    context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
+    context.commit(WORKOUTS_STORE.MUTATIONS.SET_WORKOUT_LOADING, true)
+    authApi
+      .post('workouts/no_gpx', payload)
+      .then((res) => {
+        if (res.data.status === 'created') {
+          context.dispatch(USER_STORE.ACTIONS.GET_USER_PROFILE)
+          const workout: IWorkout = res.data.data.workouts[0]
+          router.push(`/workouts/${workout.id}`)
+        }
+      })
+      .catch((error) => {
+        handleError(context, error)
+      })
+      .finally(() =>
+        context.commit(WORKOUTS_STORE.MUTATIONS.SET_WORKOUT_LOADING, false)
+      )
   },
 }
diff --git a/fittrackee_client/src/store/modules/workouts/enums.ts b/fittrackee_client/src/store/modules/workouts/enums.ts
index 686a5929..5e3f2d91 100644
--- a/fittrackee_client/src/store/modules/workouts/enums.ts
+++ b/fittrackee_client/src/store/modules/workouts/enums.ts
@@ -1,4 +1,6 @@
 export enum WorkoutsActions {
+  ADD_WORKOUT = 'ADD_WORKOUT',
+  ADD_WORKOUT_WITHOUT_GPX = 'ADD_WORKOUT_WITHOUT_GPX',
   DELETE_WORKOUT = 'DELETE_WORKOUT',
   EDIT_WORKOUT = 'EDIT_WORKOUT',
   GET_CALENDAR_WORKOUTS = 'GET_CALENDAR_WORKOUTS',
diff --git a/fittrackee_client/src/store/modules/workouts/types.ts b/fittrackee_client/src/store/modules/workouts/types.ts
index f48c0124..fa10cd16 100644
--- a/fittrackee_client/src/store/modules/workouts/types.ts
+++ b/fittrackee_client/src/store/modules/workouts/types.ts
@@ -13,6 +13,7 @@ import {
   IWorkoutsPayload,
   IWorkoutData,
   IWorkoutPayload,
+  IWorkoutForm,
 } from '@/types/workouts'
 
 export interface IWorkoutsState {
@@ -42,6 +43,14 @@ export interface IWorkoutsActions {
     context: ActionContext<IWorkoutsState, IRootState>,
     payload: IWorkoutPayload
   ): void
+  [WORKOUTS_STORE.ACTIONS.ADD_WORKOUT](
+    context: ActionContext<IWorkoutsState, IRootState>,
+    payload: IWorkoutForm
+  ): void
+  [WORKOUTS_STORE.ACTIONS.ADD_WORKOUT_WITHOUT_GPX](
+    context: ActionContext<IWorkoutsState, IRootState>,
+    payload: IWorkoutForm
+  ): void
 }
 
 export interface IWorkoutsGetters {
diff --git a/fittrackee_client/src/types/workouts.ts b/fittrackee_client/src/types/workouts.ts
index 9cc6e047..7f24f1df 100644
--- a/fittrackee_client/src/types/workouts.ts
+++ b/fittrackee_client/src/types/workouts.ts
@@ -99,8 +99,12 @@ export interface IWorkoutObject {
 
 export interface IWorkoutForm {
   sport_id: number | null
-  title: string
   notes: string
+  title?: string
+  workout_date?: string
+  distance?: number
+  duration?: number
+  file?: Blob
 }
 
 export interface IWorkoutPayload {
diff --git a/fittrackee_client/src/views/AddWorkout.vue b/fittrackee_client/src/views/AddWorkout.vue
new file mode 100644
index 00000000..a0e88926
--- /dev/null
+++ b/fittrackee_client/src/views/AddWorkout.vue
@@ -0,0 +1,47 @@
+<template>
+  <div id="add-workout">
+    <div class="container">
+      <WorkoutEdition
+        :authUser="authUser"
+        :sports="sports"
+        :isCreation="true"
+        :loading="workoutData.loading"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent, ComputedRef } from 'vue'
+
+  import WorkoutEdition from '@/components/Workout/WorkoutEdition.vue'
+  import { SPORTS_STORE, USER_STORE, WORKOUTS_STORE } from '@/store/constants'
+  import { ISport } from '@/types/sports'
+  import { IAuthUserProfile } from '@/types/user'
+  import { IWorkoutData } from '@/types/workouts'
+  import { useStore } from '@/use/useStore'
+
+  export default defineComponent({
+    name: 'AddWorkout',
+    components: {
+      WorkoutEdition,
+    },
+    setup() {
+      const store = useStore()
+      const sports: ComputedRef<ISport[]> = computed(
+        () => store.getters[SPORTS_STORE.GETTERS.SPORTS]
+      )
+      const authUser: ComputedRef<IAuthUserProfile> = computed(
+        () => store.getters[USER_STORE.GETTERS.AUTH_USER_PROFILE]
+      )
+      const workoutData: ComputedRef<IWorkoutData> = computed(
+        () => store.getters[WORKOUTS_STORE.GETTERS.WORKOUT_DATA]
+      )
+      return { authUser, sports, workoutData }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/base';
+</style>
diff --git a/fittrackee_client/src/views/EditWorkout.vue b/fittrackee_client/src/views/EditWorkout.vue
index a99c305f..15708c26 100644
--- a/fittrackee_client/src/views/EditWorkout.vue
+++ b/fittrackee_client/src/views/EditWorkout.vue
@@ -1,7 +1,12 @@
 <template>
   <div id="edit-workout">
     <div class="container">
-      <WorkoutEdition :sports="sports" :workout="workoutData.workout" />
+      <WorkoutEdition
+        :authUser="authUser"
+        :sports="sports"
+        :workout="workoutData.workout"
+        :loading="workoutData.loading"
+      />
     </div>
   </div>
 </template>
@@ -17,8 +22,9 @@
   import { useRoute } from 'vue-router'
 
   import WorkoutEdition from '@/components/Workout/WorkoutEdition.vue'
-  import { SPORTS_STORE, WORKOUTS_STORE } from '@/store/constants'
+  import { SPORTS_STORE, USER_STORE, WORKOUTS_STORE } from '@/store/constants'
   import { ISport } from '@/types/sports'
+  import { IAuthUserProfile } from '@/types/user'
   import { IWorkoutData } from '@/types/workouts'
   import { useStore } from '@/use/useStore'
 
@@ -37,6 +43,9 @@
         })
       })
 
+      const authUser: ComputedRef<IAuthUserProfile> = computed(
+        () => store.getters[USER_STORE.GETTERS.AUTH_USER_PROFILE]
+      )
       const sports: ComputedRef<ISport[]> = computed(
         () => store.getters[SPORTS_STORE.GETTERS.SPORTS]
       )
@@ -53,7 +62,7 @@
         }
       )
 
-      return { sports, workoutData }
+      return { authUser, sports, workoutData }
     },
   })
 </script>