diff --git a/frontend/www/goal.html b/frontend/www/goal.html
index db8c6534288d4e62543e0f3f4b145a81d1411ee4..8ab73f9f05a5843af0bc8125590cf91cc53a8068 100644
--- a/frontend/www/goal.html
+++ b/frontend/www/goal.html
@@ -22,30 +22,29 @@
<form class="row g-3" id="form-exercise">
<div class="col-lg-6 ">
<label for="inputName" class="form-label">Goal</label>
- <input type="text" class="form-control" id="inputName" name="name" readonly>
+ <input type="text" class="form-control" id="inputName" name="name" >
</div>
<div class="col-lg-6"></div>
<div class="col-lg-6">
<label for="inputDescription" class="form-label">Description</label>
- <textarea class="form-control" id="inputDescription" name="description" readonly></textarea>
+ <textarea class="form-control" id="inputDescription" name="description" ></textarea>
</div>
<div class="col-lg-6"></div>
<div class="col-lg-6">
<label for="inputDateTime" class="form-label">Goal reached within</label>
- <input type="datetime-local" class="form-control" id="inputDateTime" name="date" readonly>
+ <input type="datetime-local" class="form-control" id="inputDateTime" name="date" >
</div>
<div class="col-lg-6"></div>
<div class="col-lg-6">
<label for="inputMuscles" class="form-label">Connect to exercise</label>
- <select class="form-select" id="exercise-content" name="exercise" disabled="true">
+ <select class="form-select" id="exercise-content" name="exercise" >
</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 ">
- <input type="button" class="btn btn-secondary hide" id="btn-cancel-exercise" value="Cancel">
- <input type="button" class="btn btn-danger float-end hide" id="btn-delete-exercise" value="Delete">
+ <input type="button" class="btn btn-primary " id="btn-ok-exercise" value=" UPDATE ">
+ <input type="button" class="btn btn-secondary " id="btn-cancel-exercise" value="Cancel">
+ <input type="button" class="btn btn-danger float-end " id="btn-delete-exercise" value="Delete">
</div>
<div class="col-lg-6">
diff --git a/frontend/www/scripts/goal.js b/frontend/www/scripts/goal.js
index 3cc22e73a249a53931a11f618de686d458c706ef..a97ffca89d9993968cf53451d53e350f8c233690 100644
--- a/frontend/www/scripts/goal.js
+++ b/frontend/www/scripts/goal.js
@@ -4,62 +4,9 @@ let deleteButton;
let editButton;
let oldFormData;
-class MuscleGroup {
- constructor(type) {
- this.isValidType = false;
- this.validTypes = ["Legs", "Chest", "Back", "Arms", "Abdomen", "Shoulders"]
-
- this.type = this.validTypes.includes(type) ? type : undefined;
- };
-
- setMuscleGroupType = (newType) => {
- this.isValidType = false;
-
- if(this.validTypes.includes(newType)){
- this.isValidType = true;
- this.type = newType;
- }
- else{
- alert("Invalid muscle group!");
- }
-
- };
-
- getMuscleGroupType = () => {
- console.log(this.type, "SWIOEFIWEUFH")
- return this.type;
- }
-}
-
-function handleCancelButtonDuringEdit() {
- setReadOnly(true, "#form-exercise");
- document.querySelector("select").setAttribute("disabled", "")
- okButton.className += " hide";
- deleteButton.className += " hide";
- cancelButton.className += " hide";
- editButton.className = editButton.className.replace(" hide", "");
-
- cancelButton.removeEventListener("click", 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");
-
-}
function handleCancelButtonDuringCreate() {
- window.location.replace("exercises.html");
+ window.location.replace("goals.html");
}
async function createExercise() {
@@ -85,30 +32,15 @@ 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", "");
- deleteButton.className = deleteButton.className.replace(" hide", "");
-
- cancelButton.addEventListener("click", handleCancelButtonDuringEdit);
-
- let form = document.querySelector("#form-exercise");
- oldFormData = new FormData(form);
-}
async function deleteExercise(id) {
- let response = await sendRequest("DELETE", `${HOST}/api/exercises/${id}/`);
+ let response = await sendRequest("DELETE", `${HOST}/api/goal/${id}/`);
if (!response.ok) {
let data = await response.json();
let alert = createAlert(`Could not delete exercise ${id}`, data);
document.body.prepend(alert);
} else {
- window.location.replace("exercises.html");
+ window.location.replace("goals.html");
}
}
@@ -122,19 +54,25 @@ async function retrieveGoal(id) {
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 goalData = await response.json();
let form = document.querySelector("#form-exercise");
let formData = new FormData(form);
for (let key of formData.keys()) {
let selector
- key !== "muscleGroup" ? selector = `input[name="${key}"], textarea[name="${key}"]` : selector = `select[name=${key}]`
+ key !== "exercise" ? selector = `input[name="${key}"], textarea[name="${key}"]` : selector = `select[name=${key}]`
let input = form.querySelector(selector);
- let newVal = exerciseData[key];
+ let newVal = goalData[key];
+ if (key === "date") {
+ // Creating a valid datetime-local string with the correct local time
+ let date = new Date(newVal);
+ date = new Date(date.getTime() - (date.getTimezoneOffset() * 60 * 1000)).toISOString(); // get ISO format for local time
+ newVal = date.substring(0, newVal.length - 1); // remove Z (since this is a local time, not UTC)
+ }
+
input.value = newVal;
+
}
- document.querySelector("select").setAttribute("disabled", "")
}
}
@@ -145,38 +83,22 @@ async function updateExercise(id) {
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"),
- "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);
+ "description": formData.get("description"),
+ "date": formData.get("date"),
+ "exercise": formData.get("exercise")};
+
+ let response = await sendRequest("PUT", `${HOST}/api/goal/${id}/`, body);
if (!response.ok) {
let data = await response.json();
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");
- okButton.className += " hide";
- deleteButton.className += " hide";
- cancelButton.className += " hide";
- editButton.className = editButton.className.replace(" hide", "");
-
- cancelButton.removeEventListener("click", handleCancelButtonDuringEdit);
-
- oldFormData.delete("name");
- oldFormData.delete("description");
- oldFormData.delete("duration");
- oldFormData.delete("calories");
- oldFormData.delete("muscleGroup");
- oldFormData.delete("unit");
+ console.log(response)
+ window.location.replace("goals.html");
+
}
}
@@ -212,29 +134,25 @@ window.addEventListener("DOMContentLoaded", async () => {
cancelButton = document.querySelector("#btn-cancel-exercise");
okButton = document.querySelector("#btn-ok-exercise");
deleteButton = document.querySelector("#btn-delete-exercise");
- editButton = document.querySelector("#btn-edit-exercise");
oldFormData = null;
const urlParams = new URLSearchParams(window.location.search);
// view/edit
if (urlParams.has('id')) {
- const exerciseId = urlParams.get('id');
- await retrieveGoal(exerciseId);
+ const goalID = urlParams.get('id');
+ await retrieveGoal(goalID);
- editButton.addEventListener("click", handleEditExerciseButtonClick);
- deleteButton.addEventListener("click", (async (id) => await deleteExercise(id)).bind(undefined, exerciseId));
- okButton.addEventListener("click", (async (id) => await updateExercise(id)).bind(undefined, exerciseId));
- }
- //create
- else {
- setReadOnly(false, "#form-exercise");
+ deleteButton.addEventListener("click", (async (id) => await deleteExercise(id)).bind(undefined, goalID));
+ okButton.addEventListener("click", (async (id) => await updateExercise(id)).bind(undefined, goalID));
+ cancelButton.addEventListener("click", handleCancelButtonDuringCreate);
- editButton.className += " hide";
- okButton.className = okButton.className.replace(" hide", "");
+ }else{
cancelButton.className = cancelButton.className.replace(" hide", "");
+ cancelButton.className = cancelButton.className += "hide";
+ deleteButton.className = deleteButton.className += "hide";
okButton.addEventListener("click", async () => await createExercise());
- cancelButton.addEventListener("click", handleCancelButtonDuringCreate);
}
+
});