From 246bd5fa80eb8a63d43df43eed2f6a2b4e753c49 Mon Sep 17 00:00:00 2001
From: Haakon Gunleiksrud <haakogun@stud.ntnu.no>
Date: Mon, 18 Oct 2021 18:50:31 +0000
Subject: [PATCH] Feat/add more fields
---
backend/secfit/workouts/models.py | 6 ++++
backend/secfit/workouts/serializers.py | 4 +--
frontend/www/exercise.html | 22 ++++++++++++
frontend/www/scripts/exercise.js | 50 +++++++++++++++++++++++---
4 files changed, 76 insertions(+), 6 deletions(-)
diff --git a/backend/secfit/workouts/models.py b/backend/secfit/workouts/models.py
index 5e3c6d1..0f6214f 100644
--- a/backend/secfit/workouts/models.py
+++ b/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):
diff --git a/backend/secfit/workouts/serializers.py b/backend/secfit/workouts/serializers.py
index a966ed3..6abbe31 100644
--- a/backend/secfit/workouts/serializers.py
+++ b/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):
diff --git a/frontend/www/exercise.html b/frontend/www/exercise.html
index 741bca0..b229e0d 100644
--- a/frontend/www/exercise.html
+++ b/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 ">
diff --git a/frontend/www/scripts/exercise.js b/frontend/www/scripts/exercise.js
index aa99f0e..b2f7438 100644
--- a/frontend/www/scripts/exercise.js
+++ b/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");
}
}
--
GitLab