date/time bug fixed

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">
 

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);
     }
+
 });