Skip to content
Snippets Groups Projects
Commit d6b8960a authored by Sigurd's avatar Sigurd
Browse files

Merge branch 'refactor/frontend'

parents 97bbb7ec a9d774e5
No related branches found
No related tags found
No related merge requests found
Pipeline #169715 passed with stage
Stage:
    in 28 seconds
    Hide whitespace changes
    Inline Side-by-side
    frontend/www/scripts/exercise.js
    + 65
    − 67
    View file @ d6b8960a
    ......@@ -10,7 +10,7 @@ class MuscleGroup {
    this.validTypes = ["Legs", "Chest", "Back", "Arms", "Abdomen", "Shoulders"]
    this.type = this.validTypes.includes(type) ? type : undefined;
    };
    }
    setMuscleGroupType = (newType) => {
    this.isValidType = false;
    ......@@ -23,7 +23,7 @@ class MuscleGroup {
    alert("Invalid muscle group!");
    }
    };
    }
    getMuscleGroupType = () => {
    console.log(this.type, "SWIOEFIWEUFH")
    ......@@ -41,7 +41,7 @@ function handleCancelButtonDuringEdit() {
    cancelButton.removeEventListener("click", handleCancelButtonDuringEdit);
    let form = document.querySelector("#form-exercise");
    const 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");
    ......@@ -64,24 +64,24 @@ 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"),
    const form = document.querySelector("#form-exercise");
    const formData = new FormData(form);
    const 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")};
    let response = await sendRequest("POST", `${HOST}/api/exercises/`, body);
    const response = await sendRequest("POST", `${HOST}/api/exercises/`, body);
    if (response.ok) {
    window.location.replace("exercises.html");
    } else {
    let data = await response.json();
    let alert = createAlert("Could not create new exercise!", data);
    document.body.prepend(alert);
    return;
    }
    const data = await response.json();
    const alert = createAlert("Could not create new exercise!", data);
    document.body.prepend(alert);
    }
    function handleEditExerciseButtonClick() {
    ......@@ -96,15 +96,15 @@ function handleEditExerciseButtonClick() {
    cancelButton.addEventListener("click", handleCancelButtonDuringEdit);
    let form = document.querySelector("#form-exercise");
    const form = document.querySelector("#form-exercise");
    oldFormData = new FormData(form);
    }
    async function deleteExercise(id) {
    let response = await sendRequest("DELETE", `${HOST}/api/exercises/${id}/`);
    const response = await sendRequest("DELETE", `${HOST}/api/exercises/${id}/`);
    if (!response.ok) {
    let data = await response.json();
    let alert = createAlert(`Could not delete exercise ${id}`, data);
    const data = await response.json();
    const alert = createAlert(`Could not delete exercise ${id}`, data);
    document.body.prepend(alert);
    } else {
    window.location.replace("exercises.html");
    ......@@ -112,71 +112,70 @@ async function deleteExercise(id) {
    }
    async function retrieveExercise(id) {
    let response = await sendRequest("GET", `${HOST}/api/exercises/${id}/`);
    const 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);
    const data = await response.json();
    const 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
    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", "")
    return;
    }
    document.querySelector("select").removeAttribute("disabled")
    const exerciseData = await response.json();
    const form = document.querySelector("#form-exercise");
    const formData = new FormData(form);
    for (const key of formData.keys()) {
    const selector = key !== "muscleGroup" ? `input[name="${key}"], textarea[name="${key}"]` : `select[name=${key}]`
    const input = form.querySelector(selector);
    const 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);
    const form = document.querySelector("#form-exercise");
    const formData = new FormData(form);
    let muscleGroupSelector = document.querySelector("select")
    const muscleGroupSelector = document.querySelector("select")
    muscleGroupSelector.removeAttribute("disabled")
    let selectedMuscleGroup = new MuscleGroup(formData.get("muscleGroup"));
    const selectedMuscleGroup = new MuscleGroup(formData.get("muscleGroup"));
    let body = {"name": formData.get("name"),
    const 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);
    const response = await sendRequest("PUT", `${HOST}/api/exercises/${id}/`, body);
    if (!response.ok) {
    let data = await response.json();
    let alert = createAlert(`Could not update exercise ${id}`, data);
    const data = await response.json();
    const 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", "");
    return;
    }
    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);
    cancelButton.removeEventListener("click", handleCancelButtonDuringEdit);
    oldFormData.delete("name");
    oldFormData.delete("description");
    oldFormData.delete("duration");
    oldFormData.delete("calories");
    oldFormData.delete("muscleGroup");
    oldFormData.delete("unit");
    }
    oldFormData.delete("name");
    oldFormData.delete("description");
    oldFormData.delete("duration");
    oldFormData.delete("calories");
    oldFormData.delete("muscleGroup");
    oldFormData.delete("unit");
    }
    window.addEventListener("DOMContentLoaded", async () => {
    ......@@ -194,18 +193,17 @@ window.addEventListener("DOMContentLoaded", async () => {
    await retrieveExercise(exerciseId);
    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));
    deleteButton.addEventListener("click", (async (id) => deleteExercise(id)).bind(undefined, exerciseId));
    okButton.addEventListener("click", (async (id) => updateExercise(id)).bind(undefined, exerciseId));
    return;
    }
    //create
    else {
    setReadOnly(false, "#form-exercise");
    setReadOnly(false, "#form-exercise");
    editButton.className += " hide";
    okButton.className = okButton.className.replace(" hide", "");
    cancelButton.className = cancelButton.className.replace(" hide", "");
    editButton.className += " hide";
    okButton.className = okButton.className.replace(" hide", "");
    cancelButton.className = cancelButton.className.replace(" hide", "");
    okButton.addEventListener("click", async () => await createExercise());
    cancelButton.addEventListener("click", handleCancelButtonDuringCreate);
    }
    okButton.addEventListener("click", async () => createExercise());
    cancelButton.addEventListener("click", handleCancelButtonDuringCreate);
    });
    \ No newline at end of file
    frontend/www/scripts/gallery.js
    + 22
    − 27
    View file @ d6b8960a
    let goBackButton;
    let submitNewFileButton;
    async function retrieveWorkoutImages(id) {
    let workoutData = null;
    let response = await sendRequest("GET", `${HOST}/api/workouts/${id}/`);
    const response = await sendRequest("GET", `${HOST}/api/workouts/${id}/`);
    if (!response.ok) {
    let data = await response.json();
    let alert = createAlert("Could not retrieve workout data!", data);
    const data = await response.json();
    const alert = createAlert("Could not retrieve workout data!", data);
    document.body.prepend(alert);
    } else {
    workoutData = await response.json();
    document.getElementById("workout-title").innerHTML = "Workout name: " + workoutData["name"];
    document.getElementById("workout-owner").innerHTML = "Owner: " + workoutData["owner_username"];
    document.getElementById("workout-title").innerHTML = `Workout name: ${workoutData.name}`;
    document.getElementById("workout-owner").innerHTML = `Owner: ${workoutData.owner_username}`;
    let hasNoImages = workoutData.files.length == 0;
    let noImageText = document.querySelector("#no-images-text");
    const hasNoImages = workoutData.files.length == 0;
    const noImageText = document.querySelector("#no-images-text");
    if(hasNoImages){
    noImageText.classList.remove("hide");
    ......@@ -25,34 +24,34 @@ async function retrieveWorkoutImages(id) {
    noImageText.classList.add("hide");
    let filesDiv = document.getElementById("img-collection");
    let filesDeleteDiv = document.getElementById("img-collection-delete");
    const filesDiv = document.getElementById("img-collection");
    const filesDeleteDiv = document.getElementById("img-collection-delete");
    const currentImageFileElement = document.querySelector("#current");
    let isFirstImg = true;
    let fileCounter = 0;
    for (let file of workoutData.files) {
    let a = document.createElement("a");
    for (const file of workoutData.files) {
    const a = document.createElement("a");
    a.href = file.file;
    let pathArray = file.file.split("/");
    const pathArray = file.file.split("/");
    a.text = pathArray[pathArray.length - 1];
    a.className = "me-2";
    let isImage = ["jpg", "png", "gif", "jpeg", "JPG", "PNG", "GIF", "JPEG"].includes(a.text.split(".")[1]);
    const isImage = ["jpg", "png", "gif", "jpeg", "JPG", "PNG", "GIF", "JPEG"].includes(a.text.split(".")[1]);
    if(isImage){
    let deleteImgButton = document.createElement("input");
    const deleteImgButton = document.createElement("input");
    deleteImgButton.type = "button";
    deleteImgButton.className = "btn btn-close";
    deleteImgButton.id = file.url.split("/")[file.url.split("/").length - 2];
    deleteImgButton.addEventListener('click', () => handleDeleteImgClick(deleteImgButton.id, "DELETE", `Could not delete workout ${deleteImgButton.id}!`, HOST, ["jpg", "png", "gif", "jpeg", "JPG", "PNG", "GIF", "JPEG"]));
    filesDeleteDiv.appendChild(deleteImgButton);
    let img = document.createElement("img");
    const img = document.createElement("img");
    img.src = file.file;
    filesDiv.appendChild(img);
    ......@@ -89,9 +88,9 @@ async function retrieveWorkoutImages(id) {
    }
    async function validateImgFileType(id, host_variable, acceptedFileTypes) {
    let file = await sendRequest("GET", `${host_variable}/api/workout-files/${id}/`);
    let fileData = await file.json();
    let fileType = fileData.file.split("/")[fileData.file.split("/").length - 1].split(".")[1];
    const file = await sendRequest("GET", `${host_variable}/api/workout-files/${id}/`);
    const fileData = await file.json();
    const fileType = fileData.file.split("/")[fileData.file.split("/").length - 1].split(".")[1];
    return acceptedFileTypes.includes(fileType);
    }
    ......@@ -102,11 +101,11 @@ async function handleDeleteImgClick (id, http_keyword, fail_alert_text, host_var
    return
    }
    let response = await sendRequest(http_keyword, `${host_variable}/api/workout-files/${id}/`);
    const response = await sendRequest(http_keyword, `${host_variable}/api/workout-files/${id}/`);
    if (!response.ok) {
    let data = await response.json();
    let alert = createAlert(fail_alert_text, data);
    const data = await response.json();
    const alert = createAlert(fail_alert_text, data);
    document.body.prepend(alert);
    } else {
    location.reload();
    ......@@ -122,10 +121,6 @@ function handleGoBackToWorkoutClick() {
    window.addEventListener("DOMContentLoaded", async () => {
    goBackButton = document.querySelector("#btn-back-workout");
    goBackButton.addEventListener('click', handleGoBackToWorkoutClick);
    const urlParams = new URLSearchParams(window.location.search);
    const id = urlParams.get('id');
    let workoutData = await retrieveWorkoutImages(id);
    goBackButton.addEventListener('click', handleGoBackToWorkoutClick);
    });
    \ No newline at end of file
    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