Skip to content
Snippets Groups Projects
Commit 454811a5 authored by hollum's avatar hollum
Browse files

date/time bug fixed

parent a5f12a9c
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/www/goal.html
+ 7
− 8
View file @ 454811a5
......@@ -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">
......
frontend/www/scripts/goal.js
+ 31
− 113
View file @ 454811a5
......@@ -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);
}
});
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment