Being able to edit a timeline item fully working as currently tested.

Signed-off-by: rodude123 <rodude123@gmail.com>
2022-10-09 23:32:50 +01:00
parent a5c7d16991
commit 7b04af165e
10 changed files with 163 additions and 44 deletions
@@ -373,10 +373,40 @@ $app->post("/user/changePassword", function (Request $request, Response $respons
    return $response->withStatus(500);
 });

-$app->post("/projectData", function (Request $request, Response $response)
+$app->patch("/timelineData/{timeline}/{id}", function (Request $request, Response $response, array $args)
 {
-    $response->getBody()->write(json_encode(array("test" => "test")));
-    return $response;
+    global $timelineData;
+    if ($args["timeline"] == "edu" && $args["id"] != "undefined")
+    {
+        $data = $request->getParsedBody();
+        if (empty($data["dateFrom"]) || empty($data["dateTo"]) || empty($data["grade"]) || empty($data["course"]))
+        {
+            // uh oh sent some empty data
+            $response->getBody()->write(json_encode(array("error" => "Only some of the data was sent")));
+            return $response->withStatus(400);
+        } 
+        
+        
+        if (!$timelineData->updateEduData($data["dateFrom"], $data["dateTo"], $data["grade"], $data["course"], $args["id"]))
+        {
+            // uh oh something went wrong
+            $response->getBody()->write(json_encode(array("error" => "Something went wrong")));
+            return $response->withStatus(500);
+        }
+        
+        return $response->withStatus(200);
+    }
+    
+    if ($args["timeline"] == "work" && $args["id"] != null)
+    {
+        
+        return $response->withStatus(200);   
+    }
+    
+    $response->getBody()->write(json_encode(array("error" => "The correct data was not sent")));
+    return $response->withStatus(400);
 });

+
+
 $app->run();
@@ -33,6 +33,7 @@ class middleware
     */
    function baseMiddleware(App $app): void
    {
+        $app->addBodyParsingMiddleware();
        $app->addRoutingMiddleware();
    }
    
@@ -17,7 +17,7 @@ class timelineData
    function getEduData(): array
    {
        $conn = dbConn();
-        $stmt = $conn->prepare("SELECT startPeriod, endPeriod, grade, course  FROM edu ORDER BY startPeriod DESC;");
+        $stmt = $conn->prepare("SELECT ID, startPeriod, endPeriod, grade, course  FROM edu ORDER BY startPeriod DESC;");
        $stmt->execute();

        // set the resulting array to associative
@@ -49,5 +49,26 @@ class timelineData
        }
        return array("errorMessage" => "Error, work data not found");
    }
-    
+
+    /**
+     * Update education data
+     * @param string $dateFrom - Start date
+     * @param string $dateTo - End date
+     * @param string $grade - Grade
+     * @param string $course - Course
+     * @param string $id - ID of the education data
+     * @return bool - True if successful, false if not
+     */
+    function updateEduData(string $dateFrom, string $dateTo, string $grade, string $course, string $id): bool
+    {
+        $conn = dbConn();
+        $stmt = $conn->prepare("UPDATE edu SET startPeriod = :dateFrom, endPeriod = :dateTo, grade = :grade, course = :course WHERE ID = :id;");
+        $stmt->bindParam(":dateFrom", $dateFrom);
+        $stmt->bindParam(":dateTo", $dateTo);
+        $stmt->bindParam(":grade", $grade);
+        $stmt->bindParam(":course", $course);
+        $stmt->bindParam(":id", $id);
+        return $stmt->execute();
+    }
+
 }
@@ -20,31 +20,32 @@ document.addEventListener('DOMContentLoaded', () =>
            {
                for (let i = 0; i < json.length; i++)
                {
+                    let id = json[i].ID;
                    let timelineItem = document.createElement("form")
-                    timelineItem.id = "timelineItem" + i;
+                    timelineItem.id = "timelineItem" + id;
                    timelineItem.classList.add("timelineItem");
-                    timelineItem.onsubmit = e => updateItem(i, e);
+                    timelineItem.onsubmit = e => updateEduItem(id, e);
                    timelineItem.innerHTML = `
                    <div class="modifyBtnContainer">
-                        <button class="edit" type="button" id="edit${i}" onclick="edit(${i})"><i class="fa-solid fa-pen-to-square"></i></button>
-                        <button class="delete" type="button" id="delete${i}"><i class="fa-solid fa-trash"></i></button>
+                        <button class="edit" type="button" id="edit${id}" onclick="edit(${id})"><i class="fa-solid fa-pen-to-square"></i></button>
+                        <button class="delete" type="button" id="delete${id}" onclick="deleteEduItem(${id})"><i class="fa- fa-trash"></i></button>
                    </div>
                    <div class="dateContainer formControl">
-                        <input type="date" name="dateFrom${i}" id="dateFrom${i}" onload="this.max = new Date().toISOString().split('T')[0]" value="${json[i]['startPeriod']}">
+                        <input type="date" name="dateFrom${id}" id="dateFrom${id}" onload="this.max = new Date().toISOString().split('T')[0]" value="${json[i]['startPeriod']}">
                        -
-                        <input type="date" name="dateTo${i}" id="dateTo${i}" value="${json[i]['endPeriod']}">
+                        <input type="date" name="dateTo${id}" id="dateTo${id}" value="${json[i]['endPeriod']}">
                    </div>
-					<h3 class="timelineHeader">${new Date(json[i]["startPeriod"]).toLocaleString('en-gb', dateOptions)} - ${new Date(json[i]["endPeriod"]).toLocaleString('en-gb', dateOptions)}</h3>
+					<h3 class="timelineHeader" id="timelineHeader${id}">${new Date(json[i]["startPeriod"]).toLocaleString('en-gb', dateOptions)} - ${new Date(json[i]["endPeriod"]).toLocaleString('en-gb', dateOptions)}</h3>
                    <div class="gradeContainer formControl">
-                        <label for="grade${i}">Grade:</label>
-                        <input type="text" name="grade${i}" id="grade${i}" value="${json[i]['grade']}" disabled>
+                        <label for="grade${id}">Grade:</label>
+                        <input type="text" name="grade${id}" id="grade${id}" value="${json[i]['grade']}" disabled>
                    </div>
 					<div class="formControl">
-					    <textarea class="courseText" name="course${i}" id="course${i}" cols="10" rows="3" disabled>${json[i]['course']}</textarea>
+					    <textarea class="courseText" name="course${id}" id="course${id}" cols="10" rows="3" disabled>${json[i]['course']}</textarea>
 					</div>
 					
-                    <div class="error hidden" id="eduError">
-                        <button class="close" type="button">&times;</button>
+                    <div class="error hidden" id="eduError${id}">
+                        <button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden');">&times;</button>
                        <div></div>
                    </div>
 					<input type="submit" value="Change">
@@ -72,42 +73,56 @@ document.querySelector("#navClose").addEventListener("click", () =>
    document.querySelector("#navOpen").style.visibility = "visible";
 });

-function edit(i)
+/**
+ * Switches the timeline item between edit and view mode
+ * @param id the id of the timeline item
+ */
+function edit(id)
 {
-    document.querySelector("#timelineItem" + i).classList.toggle("editing");
-    document.querySelector("#grade" + i).removeAttribute("disabled");
-    document.querySelector("#course" + i).removeAttribute("disabled");
+    document.querySelector("#timelineItem" + id).classList.toggle("editing");
+    document.querySelector("#grade" + id).toggleAttribute("disabled");
+    document.querySelector("#course" + id).toggleAttribute("disabled");
 }

-function updateItem(i, e)
+function updateEduItem(id, e)
 {
    e.preventDefault();
-    let data = new FormData();
-    data.append("dateFrom", document.querySelector("#dateFrom" + i).value);
-    data.append("dateTo", document.querySelector("#dateTo" + i).value);
-    data.append("grade", document.querySelector("#grade" + i).value);
-    data.append("course", document.querySelector("#course" + i).value);
    
-    fetch("/api/timelineData/edu/" + i, {
-        method: "PUT",
-        body: data,
+    let data = {}
+    data["dateFrom"] = document.querySelector("#dateFrom" + id).value;
+    data["dateTo"] = document.querySelector("#dateTo" + id).value;
+    data["grade"] = document.querySelector("#grade" + id).value;
+    data["course"] = document.querySelector("#course" + id).value;
+    
+    fetch("/api/timelineData/edu/" + id, {
+        method: "PATCH",
+        body: JSON.stringify(data),
        headers: {
+            "Content-Type": "application/json",
            "Authorization": "Bearer " + localStorage.getItem("token")
        }
    }).then(res =>
    {
        if (res.ok)
        {
-            document.querySelector("#timelineItem" + i).classList.toggle("editing");
-            document.querySelector("#grade" + i).setAttribute("disabled", "");
-            document.querySelector("#course" + i).setAttribute("disabled", "");
+            document.querySelector("#timelineHeader" + id).innerHTML = new Date(document.querySelector("#dateFrom" + id).value).toLocaleString('en-gb', dateOptions) + " - " + new Date(document.querySelector("#dateTo" + id).value).toLocaleString('en-gb', dateOptions);
+            document.querySelector("#timelineItem" + id).classList.toggle("editing");
+            document.querySelector("#grade" + id).setAttribute("disabled", "");
+            document.querySelector("#course" + id).setAttribute("disabled", "");
            return;
        }
+
+        if (res.status === 401)
+        {
+            window.location.href = "./";
+            return;
+        }        
        
        res.json().then(json =>
        {
-            alert(json.message);
-        })
+            document.querySelector("#eduError" + id).classList.remove("hidden");
+            document.querySelector(`#eduError${id} div`).innerHTML = json.error;
+        });
        
    })
 }
@@ -39,7 +39,7 @@ document.querySelector("#login form").addEventListener("submit", e =>
    {
            method: "POST", 
            body: loginData
-        }).then(res => res.json()).then(json =>
+        }).then(res => res.json().then(json =>
        {
            if (res.ok)
            {
@@ -53,7 +53,7 @@ document.querySelector("#login form").addEventListener("submit", e =>
                return;
            }
            showErrorMessage("Invalid username or password.", "login");
-        });
+        }));
       return; 
    }
    showErrorMessage("Please type in a username and password.", "login");