Commit 86deb92f authored by Christopher Collin Løkken's avatar Christopher Collin Løkken 🛀
Browse files

Merge branch 'fe-refactor-exercise' into 'master'

refactored exercise.js

See merge request !7
parents 65f8e23b 4a7205ad
Pipeline #172919 failed with stages
in 1 minute and 5 seconds
......@@ -3,43 +3,10 @@ let okButton;
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;
}
}
const validTypes = ["Legs", "Chest", "Back", "Arms", "Abdomen", "Shoulders"]
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);
setFormAccesToEdit(false)
let form = document.querySelector("#form-exercise");
if (oldFormData.has("name")) form.name.value = oldFormData.get("name");
......@@ -48,13 +15,6 @@ function handleCancelButtonDuringEdit() {
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");
}
......@@ -62,16 +22,21 @@ function handleCancelButtonDuringCreate() {
window.location.replace("exercises.html");
}
async function createExercise() {
document.querySelector("select").removeAttribute("disabled")
let form = document.querySelector("#form-exercise");
let formData = new FormData(form);
function createBodyFromForm(formData) {
let body = {"name": formData.get("name"),
"description": formData.get("description"),
"duration": formData.get("duration"),
"calories": formData.get("calories"),
"muscleGroup": formData.get("muscleGroup"),
"unit": formData.get("unit")};
return body
}
async function createExercise() {
document.querySelector("select").removeAttribute("disabled")
let form = document.querySelector("#form-exercise");
let formData = new FormData(form);
let body = createBodyFromForm(formData);
let response = await sendRequest("POST", `${HOST}/api/exercises/`, body);
......@@ -85,16 +50,7 @@ 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);
setFormAccesToEdit(true);
let form = document.querySelector("#form-exercise");
oldFormData = new FormData(form);
......@@ -114,8 +70,6 @@ async function deleteExercise(id) {
async function retrieveExercise(id) {
let response = await sendRequest("GET", `${HOST}/api/exercises/${id}/`);
console.log(response.ok)
if (!response.ok) {
let data = await response.json();
let alert = createAlert("Could not retrieve exercise data!", data);
......@@ -137,21 +91,41 @@ async function retrieveExercise(id) {
}
}
function setFormAccesToEdit(editable) {
let dropDown = document.querySelector("select")
setReadOnly(!editable, "#form-exercise");
if(editable) {
dropDown.removeAttribute("disabled")
okButton.className = okButton.className.replace(" hide", "");
cancelButton.className = cancelButton.className.replace(" hide", "");
deleteButton.className = deleteButton.className.replace(" hide", "");
editButton.className += " hide";
cancelButton.addEventListener("click", handleCancelButtonDuringEdit);
}
else {
dropDown.setAttribute("disabled", "")
okButton.className += " hide";
deleteButton.className += " hide";
cancelButton.className += " hide";
editButton.className = editButton.className.replace(" hide", "");
cancelButton.removeEventListener("click", handleCancelButtonDuringEdit);
}
}
async function updateExercise(id) {
let form = document.querySelector("#form-exercise");
let formData = new FormData(form);
let muscleGroupSelector = document.querySelector("select")
muscleGroupSelector.removeAttribute("disabled")
let muscleGroup = formData.get("muscleGroup")
let selectedMuscleGroup = validTypes.includes(muscleGroup) ? muscleGroup : undefined;
formData.set("muscleGroup", selectedMuscleGroup)
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 body = createBodyFromForm(formData)
let response = await sendRequest("PUT", `${HOST}/api/exercises/${id}/`, body);
if (!response.ok) {
......@@ -159,23 +133,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");
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");
setFormAccesToEdit(false)
}
}
......
Supports Markdown
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