Feat/add more fields

backend/secfit/workouts/models.py

@@ -76,11 +76,17 @@ class Exercise(models.Model):
     Attributes:
         name:        Name of the exercise type
         description: Description of the exercise type
+        duration:    Duration of one unit of the exercise
+        calories:    Calories spent per minute
+        muscleGroup: What major muscle group is used in the exercise
         unit:        Name of the unit for the exercise type (e.g., reps, seconds)
     """
 
     name = models.CharField(max_length=100)
     description = models.TextField()
+    duration = models.IntegerField(default=0)
+    calories = models.IntegerField(default=0)
+    muscleGroup = models.TextField(default="Legs")
     unit = models.CharField(max_length=50)
 
     def __str__(self):

backend/secfit/workouts/serializers.py

@@ -201,7 +201,7 @@ class WorkoutSerializer(serializers.HyperlinkedModelSerializer):
 class ExerciseSerializer(serializers.HyperlinkedModelSerializer):
     """Serializer for an Exercise. Hyperlinks are used for relationships by default.
 
-    Serialized fields: url, id, name, description, unit, instances
+    Serialized fields: url, id, name, description, duration, calories, muscle group, unit, instances
 
     Attributes:
         instances:  Associated exercise instances with this Exercise type. Hyperlinks.
@@ -213,7 +213,7 @@ class ExerciseSerializer(serializers.HyperlinkedModelSerializer):
 
     class Meta:
         model = Exercise
-        fields = ["url", "id", "name", "description", "unit", "instances"]
+        fields = ["url", "id", "name", "description", "duration", "calories", "muscleGroup", "unit", "instances"]
 
 
 class RememberMeSerializer(serializers.HyperlinkedModelSerializer):

frontend/www/exercise.html

@@ -35,6 +35,28 @@
                 <input type="text" class="form-control" id="inputUnit" name="unit" readonly>
             </div>
             <div class="col-lg-6"></div>
+            <div class="col-lg-6">
+                <label for="inputDuration" class="form-label"> Duration (Seconds per unit)</label>
+                <input type="number" class="form-control" id="inputDuration" name="duration" readonly></input>
+            </div>
+            <div class="col-lg-6"></div>
+            <div class="col-lg-6">
+                <label for="inputCalories" class="form-label"> Calories burned (kcal per minute)</label>
+                <input type="number" class="form-control" id="inputCalories" name="calories" readonly></input>
+            </div>
+            <div class="col-lg-6"></div>
+            <div class="col-lg-6">
+                <label for="inputMuscles" class="form-label">Muscle group used</label>
+                <select class="form-select" name="muscleGroup" disabled="true">
+                    <option value="Legs">Legs</option>
+                    <option value="Chest">Chest</option>
+                    <option value="Back">Back</option>
+                    <option value="Arms">Arms</option>
+                    <option value="Abdomen">Abdominals</option>
+                    <option value="Shoulders">Shoulders</option>
+                </select>
+            </div>
+            <div class="col-lg-6"></div>
             <div class="col-lg-6">
                 <input type="button" class="btn btn-primary hide" id="btn-ok-exercise" value="  OK  ">
                 <input type="button" class="btn btn-primary" id="btn-edit-exercise" value=" Edit ">

frontend/www/scripts/exercise.js

@@ -4,9 +4,21 @@ let deleteButton;
 let editButton;
 let oldFormData;
 
+class MuscleGroup { 
+    constructor(type) {
+        this.type = type;
+    };
+
+    setMuscleGroupType = (newType) => {
+        this.type = newType
+    };
+    
+    getMuscleGroupType = () => this.type;
+}
 
 function handleCancelButtonDuringEdit() {
     setReadOnly(true, "#form-exercise");
+    document.querySelector("select").setAttribute("disabled", "")
     okButton.className += " hide";
     deleteButton.className += " hide";
     cancelButton.className += " hide";
@@ -17,10 +29,16 @@ function handleCancelButtonDuringEdit() {
     let form = document.querySelector("#form-exercise");
     if (oldFormData.has("name")) form.name.value = oldFormData.get("name");
     if (oldFormData.has("description")) form.description.value = oldFormData.get("description");
+    if (oldFormData.has("duration")) form.duration.value = oldFormData.get("duration");
+    if (oldFormData.has("calories")) form.calories.value = oldFormData.get("calories");
+    if (oldFormData.has("muscleGroup")) form.muscleGroup.value = oldFormData.get("muscleGroup");
     if (oldFormData.has("unit")) form.unit.value = oldFormData.get("unit");
     
     oldFormData.delete("name");
     oldFormData.delete("description");
+    oldFormData.delete("duration");
+    oldFormData.delete("calories");
+    oldFormData.delete("muscleGroup");
     oldFormData.delete("unit");
 
 }
@@ -30,10 +48,14 @@ function handleCancelButtonDuringCreate() {
 }
 
 async function createExercise() {
+    document.querySelector("select").removeAttribute("disabled")
     let form = document.querySelector("#form-exercise");
     let formData = new FormData(form);
     let body = {"name": formData.get("name"), 
-                "description": formData.get("description"), 
+                "description": formData.get("description"),
+                "duration": formData.get("duration"),
+                "calories": formData.get("calories"),
+                "muscleGroup": formData.get("muscleGroup"), 
                 "unit": formData.get("unit")};
 
     let response = await sendRequest("POST", `${HOST}/api/exercises/`, body);
@@ -50,6 +72,8 @@ async function createExercise() {
 function handleEditExerciseButtonClick() {
     setReadOnly(false, "#form-exercise");
 
+    document.querySelector("select").removeAttribute("disabled")
+
     editButton.className += " hide";
     okButton.className = okButton.className.replace(" hide", "");
     cancelButton.className = cancelButton.className.replace(" hide", "");
@@ -74,30 +98,44 @@ async function deleteExercise(id) {
 
 async function retrieveExercise(id) {
     let response = await sendRequest("GET", `${HOST}/api/exercises/${id}/`);
-    console.log(response.ok);
+
+    console.log(response.ok)
+
     if (!response.ok) {
         let data = await response.json();
         let alert = createAlert("Could not retrieve exercise data!", data);
         document.body.prepend(alert);
     } else {
+        document.querySelector("select").removeAttribute("disabled")
         let exerciseData = await response.json();
         let form = document.querySelector("#form-exercise");
         let formData = new FormData(form);
 
         for (let key of formData.keys()) {
-            let selector = `input[name="${key}"], textarea[name="${key}"]`;
+            let selector
+            key !== "muscleGroup" ? selector = `input[name="${key}"], textarea[name="${key}"]` : selector = `select[name=${key}]`
             let input = form.querySelector(selector);
             let newVal = exerciseData[key];
             input.value = newVal;
         }
+        document.querySelector("select").setAttribute("disabled", "")
     }
 }
 
 async function updateExercise(id) {
     let form = document.querySelector("#form-exercise");
     let formData = new FormData(form);
+
+    let muscleGroupSelector = document.querySelector("select")
+    muscleGroupSelector.removeAttribute("disabled")
+
+    let selectedMuscleGroup = new MuscleGroup(formData.get("muscleGroup"));
+
     let body = {"name": formData.get("name"), 
-                "description": formData.get("description"), 
+                "description": formData.get("description"),
+                "duration": formData.get("duration"),
+                "calories": formData.get("calories"),
+                "muscleGroup": selectedMuscleGroup.getMuscleGroupType(),
                 "unit": formData.get("unit")};
     let response = await sendRequest("PUT", `${HOST}/api/exercises/${id}/`, body);
 
@@ -106,6 +144,7 @@ async function updateExercise(id) {
         let alert = createAlert(`Could not update exercise ${id}`, data);
         document.body.prepend(alert);
     } else {
+        muscleGroupSelector.setAttribute("disabled", "")
         // duplicate code from handleCancelButtonDuringEdit
         // you should refactor this
         setReadOnly(true, "#form-exercise");
@@ -118,6 +157,9 @@ async function updateExercise(id) {
         
         oldFormData.delete("name");
         oldFormData.delete("description");
+        oldFormData.delete("duration");
+        oldFormData.delete("calories");
+        oldFormData.delete("muscleGroup");
         oldFormData.delete("unit");
     }
 }