From e290aa0213c39779a0ecf636fe87c7328946511e Mon Sep 17 00:00:00 2001
From: Andrea Acampora <andrea.acampora@studio.unibo.it>
Date: Mon, 2 Oct 2023 16:21:55 +0200
Subject: [PATCH] chore: add improvement section to profile

---
 src/pages/profile/Profile.vue | 416 ++++++++++++++++++++++------------
 1 file changed, 268 insertions(+), 148 deletions(-)

diff --git a/src/pages/profile/Profile.vue b/src/pages/profile/Profile.vue
index 5482226..13a1601 100644
--- a/src/pages/profile/Profile.vue
+++ b/src/pages/profile/Profile.vue
@@ -1,26 +1,35 @@
 <template>
-  <v-row class="mt-5">
-    <v-col cols="12" md="6" class="text-center">
-      <v-card v-if="editing" variant="flat" elevation="10">
-        <v-card-title class="text-left"><h3><i>Personal Information</i></h3></v-card-title>
+  <v-row class="mt-2">
+    <v-col md="1" />
+    <v-col cols="12" md="5" class="text-center">
+      <v-card variant="outlined" elevation="10">
+        <v-card-title><h2><i>Profile</i></h2></v-card-title>
         <v-form>
           <v-container>
-            <v-row justify="start" no-gutters>
-              <v-col cols="12" md="4">
+            <v-row justify="center">
+              <v-col cols="12" md="5">
                 <v-img :src="profilePicPath" alt="" height="150"/>
               </v-col>
-              <v-col cols="12" md="6" class="mt-8">
+              <v-col cols="12" md="5" class="mt-8">
                 <v-file-input
-                    label="New profile picture"
+                    label="Change profile picture"
                     accept="image/*"
                     v-model="files"
                     variant="outlined"
                     @change="handlePictureChange"
-                ></v-file-input>
+                >
+                  <template v-slot:prepend-inner>
+                    <v-icon size="large">
+                      <v-img
+                          :src="require('@/assets/img/icons/user.png')"
+                      />
+                    </v-icon>
+                  </template>
+                </v-file-input>
               </v-col>
             </v-row>
-            <v-row>
-              <v-col cols="12" md="4">
+            <v-row justify="center">
+              <v-col cols="12" md="5">
                 <v-text-field
                     label="Name"
                     v-model="user.name"
@@ -28,148 +37,286 @@
                     variant="outlined"
                     color="blue-darken-1"
                 >
+                  <template v-slot:prepend-inner>
+                    <v-icon size="large">
+                      <v-img
+                          :src="require('@/assets/img/icons/name.png')"
+                      />
+                    </v-icon>
+                  </template>
                 </v-text-field>
               </v-col>
-              <v-col cols="12" md="4">
+              <v-col cols="12" md="5">
                 <v-text-field
                     label="Surname"
                     v-model="user.surname"
                     clearable
                     variant="outlined"
                     color="blue-darken-1"
-                />
+                >
+                  <template v-slot:prepend-inner>
+                    <v-icon size="large">
+                      <v-img
+                          :src="require('@/assets/img/icons/name.png')"
+                      />
+                    </v-icon>
+                  </template>
+                </v-text-field>
               </v-col>
             </v-row>
-            <v-row no-gutters="">
-              <v-col cols="12" md="4" class="mr-2">
+            <v-row justify="center">
+              <v-col cols="12" md="5">
                 <v-text-field
                     label="City"
                     v-model="user.city"
                     clearable
                     variant="outlined"
                     color="blue-darken-1"
-                />
+                >
+                  <template v-slot:prepend-inner>
+                    <v-icon size="large">
+                      <v-img
+                          :src="require('@/assets/img/icons/city.png')"
+                      />
+                    </v-icon>
+                  </template>
+                </v-text-field>
               </v-col>
-              <v-col cols="12" md="4">
+              <v-col cols="12" md="5">
                 <v-text-field
                     label="Country"
                     v-model="user.country"
                     clearable
                     variant="outlined"
                     color="blue-darken-1"
-                />
+                >
+                  <template v-slot:prepend-inner>
+                    <v-icon size="large">
+                      <v-img
+                          :src="require('@/assets/img/icons/country.png')"
+                      />
+                    </v-icon>
+                  </template>
+                </v-text-field>
               </v-col>
-              <v-col cols="12" md="4"></v-col>
             </v-row>
-            <v-row no-gutters="">
-              <v-col cols="12" md="4" class="mr-2">
-                <v-text-field color="blue-darken-1" variant="outlined" type="number" label="Weight (Kg)" v-model="user.weight"/>
+            <v-row justify="center">
+              <v-col cols="12" md="5" class="mr-2">
+                <v-text-field
+                    color="blue-darken-1"
+                    variant="outlined"
+                    type="number"
+                    :min="0"
+                    :max="100"
+                    label="Age"
+                    v-model="user.age"
+                >
+                  <template v-slot:prepend-inner>
+                    <v-icon size="large">
+                      <v-img
+                          :src="require('@/assets/img/icons/age.png')"
+                      />
+                    </v-icon>
+                  </template>
+                </v-text-field>
               </v-col>
-              <v-col cols="12" md="4">
-                <v-text-field color="blue-darken-1" variant="outlined" clearable label="Height (Cm)" v-model="user.height"/>
+              <v-col cols="12" md="5">
+                <v-text-field color="blue-darken-1" variant="outlined" clearable label="Height (Cm)" v-model="user.height">
+                  <template v-slot:prepend-inner>
+                    <v-icon size="large">
+                      <v-img
+                          :src="require('@/assets/img/icons/height.png')"
+                      />
+                    </v-icon>
+                  </template>
+                </v-text-field>
               </v-col>
-              <v-col cols="12" md="4"></v-col>
             </v-row>
-            <v-row no-gutters>
+            <v-row justify="center">
               <v-col cols="10">
-                <v-textarea variant="outlined" color="blue-darken-1" clearable label="About Me" v-model="user.bio"/>
+                <v-textarea variant="outlined" color="blue-darken-1" clearable label="About Me" v-model="user.bio">
+                  <template v-slot:prepend-inner>
+                    <v-icon size="large">
+                      <v-img
+                          :src="require('@/assets/img/icons/bio.png')"
+                      />
+                    </v-icon>
+                  </template>
+                </v-textarea>
               </v-col>
             </v-row>
-            <v-row class="text-center" no-gutters justify="center">
+            <v-row class="text-center my-3" no-gutters justify="center">
               <v-btn
+                  size="small"
                   color="blue-darken-1"
                   variant="elevated"
                   elevation="6"
-                  class="my-5"
+                  class="mr-1"
                   @click="updateProfile"
               >
-                <strong>Update</strong>
+                Save
               </v-btn>
               <v-btn
+                  size="small"
                   color="red"
                   variant="elevated"
                   elevation="6"
-                  class="my-5 mr-1"
                   @click="cancelEditing"
                   to="/profile"
               >
-                <strong>CANCEL</strong>
+                CANCEL
               </v-btn>
             </v-row>
           </v-container>
         </v-form>
       </v-card>
     </v-col>
-    <v-col cols="12" md="6">
-      <v-card variant="flat" elevation="10" max-height="700">
-        <v-card-title class="text-left">
-          <h3><i>My improvements</i></h3>
+    <v-col md="1" />
+    <v-col cols="12" md="4">
+      <v-card variant="outlined" elevation="10" max-height="700">
+        <v-card-title class="text-center">
+          <h2><i>Improvements</i></h2>
         </v-card-title>
-        <v-card-text class="scroll">
-          <v-row class="text-center" justify="center">
-            <v-timeline density="default" align="start" side="end" class="scroll">
-              <v-timeline-item
-                  fill-dot
-                  :dot-color="displayAddNewImprovement ? 'red' : 'yellow'"
+        <v-img
+            :src="require('@/assets/img/icons/improvement.png')"
+            max-width="120px"
+            class="d-block ml-auto mr-auto mt-2"
+        />
+        <v-card-text>
+          <v-form>
+            <v-row justify="center" no-gutters>
+              <v-col cols="12" md="8">
+                <v-text-field
+                    readonly
+                    variant="outlined"
+                > {{  new Date().toLocaleDateString()}}
+                  <template v-slot:prepend-inner>
+                    <v-icon size="large">
+                      <v-img
+                          :src="require('@/assets/img/icons/calendar.png')"
+                      />
+                    </v-icon>
+                  </template>
+                </v-text-field>
+              </v-col>
+            </v-row>
+            <v-row justify="center" no-gutters>
+              <v-col cols="12" md="8">
+              <v-text-field
+                    type="number"
+                    label="Body Weight (Kg)"
+                    :min="0"
+                    :max="250"
+                    variant="outlined"
+                    v-model="improvement.bodyWeight"
+                >
+                <template v-slot:prepend-inner>
+                <v-icon size="large">
+                  <v-img
+                      :src="require('@/assets/img/icons/weight.png')"
+                  />
+                </v-icon>
+                </template>
+              </v-text-field>
+              </v-col>
+            </v-row>
+            <v-row justify="center" no-gutters>
+              <v-col cols="12" md="8">
+                <v-text-field
+                    type="number"
+                    label="Body Fat (%)"
+                    variant="outlined"
+                    :max="100"
+                    :min="0"
+                    v-model="improvement.bodyFat"
+                >
+                  <template v-slot:prepend-inner>
+                    <v-icon size="large">
+                      <v-img
+                          :src="require('@/assets/img/icons/body-fat.png')"
+                      />
+                    </v-icon>
+                  </template>
+                </v-text-field>
+              </v-col>
+            </v-row>
+            <v-row  justify="center" no-gutters>
+              <v-col cols="12" md="4">
+                <v-text-field
+                    type="number"
+                    label="Biceps (cm)"
+                    variant="outlined"
+                    v-model="improvement.biceps"
+                    :min="0"
+                    :max="50"
+                >
+                  <template v-slot:prepend-inner>
+                    <v-icon size="large">
+                      <v-img
+                          :src="require('@/assets/img/icons/biceps.png')"
+                      />
+                    </v-icon>
+                  </template>
+                </v-text-field>
+              </v-col>
+              <v-col cols="12" md="4">
+                <v-text-field
+                    type="number"
+                    label="Chest (cm)"
+                    variant="outlined"
+                    v-model="improvement.chest"
+                    :min="0"
+                    :max="100"
+                >
+                  <template v-slot:prepend-inner>
+                    <v-icon size="large">
+                      <v-img
+                          :src="require('@/assets/img/icons/chest.png')"
+                      />
+                    </v-icon>
+                  </template>
+                </v-text-field>
+              </v-col>
+              <v-col cols="12" md="4">
+                <v-text-field
+                    type="number"
+                    label="Quadriceps (cm)"
+                    variant="outlined"
+                    v-model="improvement.quadriceps"
+                    :min="0"
+                    :max="100"
+                >
+                  <template v-slot:prepend-inner>
+                    <v-icon size="large">
+                      <v-img
+                          :src="require('@/assets/img/icons/quadriceps.png')"
+                      />
+                    </v-icon>
+                  </template>
+                </v-text-field>
+              </v-col>
+            </v-row>
+            <v-row class="text-center mb-2" justify="center">
+              <v-btn
+                  variant="elevated"
                   size="small"
-                  :icon="displayAddNewImprovement ? 'mdi-minus' : 'mdi-plus'"
-              >
-                <v-btn v-if="!displayAddNewImprovement" @click="displayAddNewImprovement = true"> Add new</v-btn>
-                <v-card v-if="this.displayAddNewImprovement" variant="plain">
-                  <v-card-text>
-                    <v-date-picker
-                        hide-actions
-                        hide-weekdays
-                        input-mode="keyboard"
-                        variant="outlined"
-                        v-model="newImprovement.date"
-                    />
-                    <v-text-field
-                        type="number"
-                        variant="outlined"
-                        label="Kg"
-                        class="pt-2"
-                        v-model="newImprovement.weight"
-                    />
-                    <v-btn
-                        variant="elevated"
-                        size="small"
-                        color="paletteBlue"
-                        elevation="6"
-                        v-on:click.prevent
-                        @click="addNewImprovement"
-                    > Add
-                    </v-btn>
-                    <v-btn
-                        variant="flat"
-                        size="small"
-                        class="ml-1"
-                        color="red"
-                        elevation="6"
-                        v-on:click.prevent
-                        @click="this.displayAddNewImprovement=false"> Cancel
-                    </v-btn>
-
-                  </v-card-text>
-                </v-card>
-
-              </v-timeline-item>
-              <v-timeline-item
-                  v-for="(improvement,i) in improvements"
-                  :key="i"
+                  color="paletteBlue"
+                  elevation="6"
+                  v-on:click.prevent
+                  @click="addNewImprovement"
+              > Save
+              </v-btn>
+              <v-btn
+                  variant="flat"
                   size="small"
-                  dot-color="paletteBlue"
-                  fill-dot
-              >
-                <template v-slot:opposite>
-                  <h4>
-                    {{ improvement.date.toLocaleDateString() }}
-                  </h4>
-                </template>
-                <h4> {{ improvement.weight }} Kg </h4>
-              </v-timeline-item>
-            </v-timeline>
-          </v-row>
+                  class="ml-1"
+                  color="red"
+                  elevation="6"
+                  v-on:click.prevent
+                  @click="cancelEditing"> Cancel
+              </v-btn>
+            </v-row>
+          </v-form>
         </v-card-text>
       </v-card>
     </v-col>
@@ -178,12 +325,8 @@
 
 <script>
 import UserService from "@/services/user.service";
-import {VDatePicker} from 'vuetify/labs/VDatePicker'
 
 export default {
-  components: {
-    VDatePicker,
-  },
   data() {
     return {
       userId: this.$store.state.auth.user._id,
@@ -194,59 +337,27 @@ export default {
         surname: '',
         city: '',
         country: '',
-        weight: '',
+        age: '',
         height: '',
         bio: '',
         profilePic: '',
       },
-      improvements: [
-        {
-          date: new Date(),
-          weight: '100'
-        },
-        {
-          date: new Date(),
-          weight: '100'
-        },
-        {
-          date: new Date(),
-          weight: '100'
-        },
-        {
-          date: new Date(),
-          weight: '100'
-        },        {
-          date: new Date(),
-          weight: '100'
-        },        {
-          date: new Date(),
-          weight: '100'
-        },        {
-          date: new Date(),
-          weight: '100'
-        },
-        {
-          date: new Date(),
-          weight: '100'
-        },
-        {
-          date: new Date(),
-          weight: '100'
-        },
-
-      ],
-      newImprovement: {
-        date: new Date(),
-        weight: ""
-      },
-      displayAddNewImprovement: false,
       files: null,
       inputProfilePic: null,
       profilePicPath: null,
+      improvement: {
+        timeStamp: null,
+        bodyWeight: null,
+        bodyFat: null,
+        biceps: null,
+        chest: null,
+        quadriceps: null
+      },
     };
   },
   created() {
     this.fetchUserInfo()
+    this.fetchUserImprovement()
   },
   methods: {
     async fetchUserInfo() {
@@ -259,6 +370,15 @@ export default {
           }
       )
     },
+    async fetchUserImprovement() {
+      await UserService.getUserImprovement(this.userId).then(
+          res => {
+            if(res != null) {
+              this.improvement = res
+            }
+          }
+      )
+    },
     async updateProfile() {
       if (this.inputProfilePic !== null) {
         this.user.profilePic = this.inputProfilePic
@@ -276,9 +396,9 @@ export default {
         this.profilePicPath = URL.createObjectURL(this.inputProfilePic)
       }
     },
-    addNewImprovement() {
-      this.improvements.push(structuredClone(this.newImprovement))
-      this.displayAddNewImprovement = false
+    async addNewImprovement() {
+      this.improvement.timeStamp = Date.now()
+       await UserService.addImprovement(this.userId, this.improvement)
     },
   }
 };