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

Signed-off-by: rodude123 <rodude123@gmail.com>

dist/api/index.php

@@ -59,6 +59,139 @@ $app->get("/timelineData/{timeline}", function (Request $request, Response $resp
     return $response->withStatus(404);
 });
 
+$app->patch("/timelineData/{timeline}/{id}", function (Request $request, Response $response, array $args)
+{
+    global $timelineData;
+    $data = $request->getParsedBody();
+    if ($args["timeline"] == "edu" && $args["id"] != "undefined")
+    {
+        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)
+    {
+        if (empty($data["dateFrom"]) || empty($data["dateTo"]) || empty($data["companyName"]) || empty($data["area"]) || empty($data["title"]))
+        {
+            // 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->updateWorkData($data["dateFrom"], $data["dateTo"], $data["companyName"], $data["area"], $data["title"], $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);
+    }
+
+    $response->getBody()->write(json_encode(array("error" => "The correct data was not sent")));
+    return $response->withStatus(400);
+});
+
+$app->delete("/timelineData/{timeline}/{id}", function (Request $request, Response $response, array $args)
+{
+    global $timelineData;
+    if ($args["timeline"] == "edu" && $args["id"] != null)
+    {
+        if (!$timelineData->deleteEduData($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)
+    {
+        if (!$timelineData->deleteWorkData($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);
+    }
+
+    $response->getBody()->write(json_encode(array("error" => "The correct data was not sent")));
+    return $response->withStatus(400);
+});
+
+$app->post("/timelineData/{timeline}", function (Request $request, Response $response, array $args)
+{
+    global $timelineData;
+    $data = $request->getParsedBody();
+    if ($args["timeline"] == "edu")
+    {
+        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);
+        }
+
+        $insertedID = $timelineData->addEduData($data["dateFrom"], $data["dateTo"], $data["grade"], $data["course"]);
+        if (!is_int($insertedID))
+        {
+            // uh oh something went wrong
+            $response->getBody()->write(json_encode(array("error" => "Something went wrong")));
+            return $response->withStatus(500);
+        }
+    
+        $response->getBody()->write(json_encode(array("ID" => $insertedID)));
+        return $response->withStatus(200);
+    }
+
+    if ($args["timeline"] == "work")
+    {
+        if (empty($data["dateFrom"]) || empty($data["companyName"]) || empty($data["area"]) || empty($data["title"]))
+        {
+            // 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 (empty($data["dateTo"]))
+        {
+            $data["dateTo"] = "";
+        }
+        
+        $insertedID = $timelineData->addWorkData($data["dateFrom"], $data["dateTo"], $data["companyName"], $data["area"], $data["title"]);
+        if (!is_int($insertedID))
+        {
+            // uh oh something went wrong
+            $response->getBody()->write(json_encode(array("error" => "Something went wrong")));
+            return $response->withStatus(500);
+        }
+        
+        $response->getBody()->write(json_encode(array("ID" => $insertedID)));
+        return $response->withStatus(200);
+    }
+
+    $response->getBody()->write(json_encode(array("error" => "The correct data was not sent")));
+    return $response->withStatus(400);
+});
+
 $app->get("/projectData", function (Request $request, Response $response)
 {
     global $projectData;
@@ -373,40 +506,8 @@ $app->post("/user/changePassword", function (Request $request, Response $respons
     return $response->withStatus(500);
 });
 
-$app->patch("/timelineData/{timeline}/{id}", function (Request $request, Response $response, array $args)
-{
-    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();

dist/api/timelineData.php

@@ -1,5 +1,7 @@
 <?php
+
 namespace api;
+
 use PDO;
 
 require_once "./config.php";
@@ -37,7 +39,7 @@ class timelineData
     function getWorkData(): array
     {
         $conn = dbConn();
-        $stmt = $conn->prepare("SELECT startPeriod, endPeriod, companyName, area, title  FROM work ORDER BY work.startPeriod DESC;");
+        $stmt = $conn->prepare("SELECT ID, startPeriod, endPeriod, companyName, area, title  FROM work ORDER BY work.startPeriod DESC;");
         $stmt->execute();
 
         // set the resulting array to associative
@@ -71,4 +73,103 @@ class timelineData
         return $stmt->execute();
     }
 
+    /**
+     * Update work data
+     * @param string $dateFrom - Start date
+     * @param string $dateTo - End date
+     * @param string $companyName - Company name
+     * @param string $area - Area
+     * @param string $title - Title
+     * @param string $id - ID of the work data
+     * @return bool - True if successful, false if not
+     */
+    public function updateWorkData(string $dateFrom, string $dateTo, string $companyName, string $area, string $title, string $id): bool
+    {
+        $conn = dbConn();
+        $stmt = $conn->prepare("UPDATE work SET startPeriod = :dateFrom, endPeriod = :dateTo, companyName = :companyName, area = :area, title = :title WHERE ID = :id;");
+        $stmt->bindParam(":dateFrom", $dateFrom);
+        $stmt->bindParam(":dateTo", $dateTo);
+        $stmt->bindParam(":companyName", $companyName);
+        $stmt->bindParam(":area", $area);
+        $stmt->bindParam(":title", $title);
+        $stmt->bindParam(":id", $id);
+        return $stmt->execute();
+    }
+
+    /**
+     * Delete education data by ID
+     * @param int $id
+     * @return bool - True if successful, false if not
+     */
+    function deleteEduData(int $id): bool
+    {
+        $conn = dbConn();
+        $stmt = $conn->prepare("DELETE FROM edu WHERE ID = :id;");
+        $stmt->bindParam(":id", $id);
+        return $stmt->execute();
+    }
+
+    /**
+     * Delete work data by ID
+     * @param int $id
+     * @return bool - True if successful, false if not
+     */
+    function deleteWorkData(int $id): bool
+    {
+        $conn = dbConn();
+        $stmt = $conn->prepare("DELETE FROM work WHERE ID = :id;");
+        $stmt->bindParam(":id", $id);
+        return $stmt->execute();
+    }
+    
+    /**
+     * Create new education data
+     * @param string $dateFrom - Start date
+     * @param string $dateTo - End date
+     * @param string $grade - Grade
+     * @param string $course - Course
+     * @return bool|int - ID of the new education data or false if not successful
+     */
+    function addEduData(string $dateFrom, string $dateTo, string $grade, string $course): bool|int
+    {
+        $conn = dbConn();
+        $stmt = $conn->prepare("INSERT INTO edu (startPeriod, endPeriod, grade, course) VALUES (:dateFrom, :dateTo, :grade, :course);");
+        $stmt->bindParam(":dateFrom", $dateFrom);
+        $stmt->bindParam(":dateTo", $dateTo);
+        $stmt->bindParam(":grade", $grade);
+        $stmt->bindParam(":course", $course);
+        
+        if($stmt->execute())
+        {
+            return $conn->lastInsertId();
+        }
+        return false;
+    }
+    
+    /**
+     * Create new work data
+     * @param string $dateFrom - Start date
+     * @param string $dateTo - End date
+     * @param string $companyName - Company name
+     * @param string $area - Area
+     * @param string $title - Title
+     * @return bool|int - ID of the new work data if successful, false if not
+     */
+    function addWorkData(string $dateFrom, string $dateTo, string $companyName, string $area, string $title): bool|int
+    {
+        $conn = dbConn();
+        $stmt = $conn->prepare("INSERT INTO work (startPeriod, endPeriod, companyName, area, title) VALUES (:dateFrom, :dateTo, :companyName, :area, :title);");
+        $stmt->bindParam(":dateFrom", $dateFrom);
+        $stmt->bindParam(":dateTo", $dateTo);
+        $stmt->bindParam(":companyName", $companyName);
+        $stmt->bindParam(":area", $area);
+        $stmt->bindParam(":title", $title);
+        
+        if($stmt->execute())
+        {
+            return $conn->lastInsertId();
+        }
+        return false;
+    }
+
 }

dist/editor/editor.html

@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Editor</title><link rel="stylesheet" href="css/main.css"><script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script></head><body><nav class="sideNav"><a href="#" class="closeBtn" id="navClose">&times;</a><ul><li><a href="#" class="active"><span>&lt;</span>CV<span>&gt;</span></a></li><li><a href="#"><span>&lt;</span>Projects<span>&gt;</span></a></li><li><a href="#"><span>&lt;</span>Settings<span>&gt;</span></a></li></ul></nav><main class="editor" style="margin-left: 250px;"><div class="title"><span id="navOpen">&#9776;</span><h1>Editor</h1></div><section id="curriculumVitae"><h2>curriculum vitae</h2><div class="cvGrid"><!-- https://codepen.io/keithwyland/pen/wqNqvy --><div><h3>Education</h3><div class="editorContainer"><form action="" method="POST"><div class="formControl"><label for="dateFrom">Date From</label> <input type="date" id="dateFrom" name="dateFrom"></div><div class="formControl"><label for="dateTo">Date To</label> <input type="date" id="dateTo" name="dateTo"></div><div class="formControl"><label for="grade">Grade</label> <input type="text" id="grade" name="grade"></div><div class="formControl"><label for="courseTitle">Course Title</label> <input type="text" id="courseTitle" name="courseTitle"></div><div class="error hidden" id="eduError"><button class="close" type="button">&times;</button><div></div></div><input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Add new course"></form><div class="timeline" id="edu"></div></div></div><div><h3>Work</h3><div class="timeline" id="work"></div></div></div></section></main><script src="js/editor.js"></script></body></html>
+<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Editor</title><link rel="stylesheet" href="css/main.css"><script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script></head><body><nav class="sideNav"><a href="#" class="closeBtn" id="navClose">&times;</a><ul><li><a href="#" class="active"><span>&lt;</span>CV<span>&gt;</span></a></li><li><a href="#"><span>&lt;</span>Projects<span>&gt;</span></a></li><li><a href="#"><span>&lt;</span>Settings<span>&gt;</span></a></li></ul></nav><main class="editor" style="margin-left: 250px;"><div class="title"><span id="navOpen">&#9776;</span><h1>Editor</h1></div><section id="curriculumVitae"><h2>curriculum vitae</h2><div class="cvGrid"><div><h3>Education</h3><div class="editorContainer"><form action="" method="POST" id="addEdu"><div class="formControl"><label for="dateFromE">Date From</label> <input type="date" id="dateFromE" name="dateFromE"></div><div class="formControl"><label for="dateToE">Date To</label> <input type="date" id="dateToE" name="dateToE"></div><div class="formControl"><label for="grade">Grade</label> <input type="text" id="grade" name="grade"></div><div class="formControl"><label for="courseTitle">Course Title</label> <input type="text" id="courseTitle" name="courseTitle"></div><div class="error hidden" id="eduError"><button class="close" type="button">&times;</button><div></div></div><input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Add new course"></form><div class="timeline" id="edu"></div></div></div><div><h3>Work</h3><div class="editorContainer"><form action="" method="POST" id="addWork"><div class="formControl"><label for="dateFromW">Date From</label> <input type="date" id="dateFromW" name="dateFromW"></div><div class="formControl"><label for="dateToW">Date To</label> <input type="date" id="dateToW" name="dateToW"></div><div class="formControl"><label for="company">Company</label> <input type="text" id="company" name="company"></div><div class="formControl"><label for="area">Area</label> <input type="text" id="area" name="area"></div><div class="formControl"><label for="jobTitle">Job Title</label> <input type="text" id="jobTitle" name="jobTitle"></div><div class="error hidden" id="workError"><button class="close" type="button">&times;</button><div></div></div><input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Add new job"></form><div class="timeline" id="work"></div></div></div></div></section></main><script src="js/editor.js"></script></body></html>

src/api/index.php

@@ -59,6 +59,139 @@ $app->get("/timelineData/{timeline}", function (Request $request, Response $resp
     return $response->withStatus(404);
 });
 
+$app->patch("/timelineData/{timeline}/{id}", function (Request $request, Response $response, array $args)
+{
+    global $timelineData;
+    $data = $request->getParsedBody();
+    if ($args["timeline"] == "edu" && $args["id"] != "undefined")
+    {
+        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)
+    {
+        if (empty($data["dateFrom"]) || empty($data["dateTo"]) || empty($data["companyName"]) || empty($data["area"]) || empty($data["title"]))
+        {
+            // 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->updateWorkData($data["dateFrom"], $data["dateTo"], $data["companyName"], $data["area"], $data["title"], $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);
+    }
+
+    $response->getBody()->write(json_encode(array("error" => "The correct data was not sent")));
+    return $response->withStatus(400);
+});
+
+$app->delete("/timelineData/{timeline}/{id}", function (Request $request, Response $response, array $args)
+{
+    global $timelineData;
+    if ($args["timeline"] == "edu" && $args["id"] != null)
+    {
+        if (!$timelineData->deleteEduData($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)
+    {
+        if (!$timelineData->deleteWorkData($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);
+    }
+
+    $response->getBody()->write(json_encode(array("error" => "The correct data was not sent")));
+    return $response->withStatus(400);
+});
+
+$app->post("/timelineData/{timeline}", function (Request $request, Response $response, array $args)
+{
+    global $timelineData;
+    $data = $request->getParsedBody();
+    if ($args["timeline"] == "edu")
+    {
+        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);
+        }
+
+        $insertedID = $timelineData->addEduData($data["dateFrom"], $data["dateTo"], $data["grade"], $data["course"]);
+        if (!is_int($insertedID))
+        {
+            // uh oh something went wrong
+            $response->getBody()->write(json_encode(array("error" => "Something went wrong")));
+            return $response->withStatus(500);
+        }
+    
+        $response->getBody()->write(json_encode(array("ID" => $insertedID)));
+        return $response->withStatus(200);
+    }
+
+    if ($args["timeline"] == "work")
+    {
+        if (empty($data["dateFrom"]) || empty($data["companyName"]) || empty($data["area"]) || empty($data["title"]))
+        {
+            // 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 (empty($data["dateTo"]))
+        {
+            $data["dateTo"] = "";
+        }
+        
+        $insertedID = $timelineData->addWorkData($data["dateFrom"], $data["dateTo"], $data["companyName"], $data["area"], $data["title"]);
+        if (!is_int($insertedID))
+        {
+            // uh oh something went wrong
+            $response->getBody()->write(json_encode(array("error" => "Something went wrong")));
+            return $response->withStatus(500);
+        }
+        
+        $response->getBody()->write(json_encode(array("ID" => $insertedID)));
+        return $response->withStatus(200);
+    }
+
+    $response->getBody()->write(json_encode(array("error" => "The correct data was not sent")));
+    return $response->withStatus(400);
+});
+
 $app->get("/projectData", function (Request $request, Response $response)
 {
     global $projectData;
@@ -373,40 +506,8 @@ $app->post("/user/changePassword", function (Request $request, Response $respons
     return $response->withStatus(500);
 });
 
-$app->patch("/timelineData/{timeline}/{id}", function (Request $request, Response $response, array $args)
-{
-    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();

src/api/timelineData.php

@@ -1,5 +1,7 @@
 <?php
+
 namespace api;
+
 use PDO;
 
 require_once "./config.php";
@@ -37,7 +39,7 @@ class timelineData
     function getWorkData(): array
     {
         $conn = dbConn();
-        $stmt = $conn->prepare("SELECT startPeriod, endPeriod, companyName, area, title  FROM work ORDER BY work.startPeriod DESC;");
+        $stmt = $conn->prepare("SELECT ID, startPeriod, endPeriod, companyName, area, title  FROM work ORDER BY work.startPeriod DESC;");
         $stmt->execute();
 
         // set the resulting array to associative
@@ -71,4 +73,103 @@ class timelineData
         return $stmt->execute();
     }
 
+    /**
+     * Update work data
+     * @param string $dateFrom - Start date
+     * @param string $dateTo - End date
+     * @param string $companyName - Company name
+     * @param string $area - Area
+     * @param string $title - Title
+     * @param string $id - ID of the work data
+     * @return bool - True if successful, false if not
+     */
+    public function updateWorkData(string $dateFrom, string $dateTo, string $companyName, string $area, string $title, string $id): bool
+    {
+        $conn = dbConn();
+        $stmt = $conn->prepare("UPDATE work SET startPeriod = :dateFrom, endPeriod = :dateTo, companyName = :companyName, area = :area, title = :title WHERE ID = :id;");
+        $stmt->bindParam(":dateFrom", $dateFrom);
+        $stmt->bindParam(":dateTo", $dateTo);
+        $stmt->bindParam(":companyName", $companyName);
+        $stmt->bindParam(":area", $area);
+        $stmt->bindParam(":title", $title);
+        $stmt->bindParam(":id", $id);
+        return $stmt->execute();
+    }
+
+    /**
+     * Delete education data by ID
+     * @param int $id
+     * @return bool - True if successful, false if not
+     */
+    function deleteEduData(int $id): bool
+    {
+        $conn = dbConn();
+        $stmt = $conn->prepare("DELETE FROM edu WHERE ID = :id;");
+        $stmt->bindParam(":id", $id);
+        return $stmt->execute();
+    }
+
+    /**
+     * Delete work data by ID
+     * @param int $id
+     * @return bool - True if successful, false if not
+     */
+    function deleteWorkData(int $id): bool
+    {
+        $conn = dbConn();
+        $stmt = $conn->prepare("DELETE FROM work WHERE ID = :id;");
+        $stmt->bindParam(":id", $id);
+        return $stmt->execute();
+    }
+    
+    /**
+     * Create new education data
+     * @param string $dateFrom - Start date
+     * @param string $dateTo - End date
+     * @param string $grade - Grade
+     * @param string $course - Course
+     * @return bool|int - ID of the new education data or false if not successful
+     */
+    function addEduData(string $dateFrom, string $dateTo, string $grade, string $course): bool|int
+    {
+        $conn = dbConn();
+        $stmt = $conn->prepare("INSERT INTO edu (startPeriod, endPeriod, grade, course) VALUES (:dateFrom, :dateTo, :grade, :course);");
+        $stmt->bindParam(":dateFrom", $dateFrom);
+        $stmt->bindParam(":dateTo", $dateTo);
+        $stmt->bindParam(":grade", $grade);
+        $stmt->bindParam(":course", $course);
+        
+        if($stmt->execute())
+        {
+            return $conn->lastInsertId();
+        }
+        return false;
+    }
+    
+    /**
+     * Create new work data
+     * @param string $dateFrom - Start date
+     * @param string $dateTo - End date
+     * @param string $companyName - Company name
+     * @param string $area - Area
+     * @param string $title - Title
+     * @return bool|int - ID of the new work data if successful, false if not
+     */
+    function addWorkData(string $dateFrom, string $dateTo, string $companyName, string $area, string $title): bool|int
+    {
+        $conn = dbConn();
+        $stmt = $conn->prepare("INSERT INTO work (startPeriod, endPeriod, companyName, area, title) VALUES (:dateFrom, :dateTo, :companyName, :area, :title);");
+        $stmt->bindParam(":dateFrom", $dateFrom);
+        $stmt->bindParam(":dateTo", $dateTo);
+        $stmt->bindParam(":companyName", $companyName);
+        $stmt->bindParam(":area", $area);
+        $stmt->bindParam(":title", $title);
+        
+        if($stmt->execute())
+        {
+            return $conn->lastInsertId();
+        }
+        return false;
+    }
+
 }

src/editor/css/editor.css

@@ -19,6 +19,10 @@ input[type="submit"] {
     cursor: pointer;
 }
 
+.timelineHeader {
+	font-weight: 400;	
+}
+
 div.editorContainer {
     display: flex;
     flex-direction: row;
@@ -40,10 +44,10 @@ div.modifyBtnContainer {
     margin-bottom: 0.5em;
 }
 
-div.dateContainer {
+div.dateContainer, div.companyAreaContainer {
     display: flex;
     flex-direction: row;
-    justify-content: center;
+    justify-content: flex-start;
     align-items: center;
     gap: 1em;
     margin-bottom: 0.5em;
@@ -103,20 +107,32 @@ section#curriculumVitae form.timelineItem.editing div.gradeContainer.formControl
 }
 
 section#curriculumVitae form.timelineItem:not(.editing) div.gradeContainer.formControl input,
-section#curriculumVitae form.timelineItem:not(.editing) .formControl .courseText {
+section#curriculumVitae form.timelineItem:not(.editing) div.companyAreaContainer.formControl input,
+section#curriculumVitae form.timelineItem:not(.editing) .formControl .courseText,
+section#curriculumVitae form.timelineItem:not(.editing) .formControl .jobTitleText {
     outline: none;
     border: none;
-    color: #FFFFFF;
     -webkit-border-radius: 0;
     -moz-border-radius: 0;
     border-radius: 0;
 }
 
+section#curriculumVitae form.timelineItem:not(.editing) div.gradeContainer.formControl > *,
+section#curriculumVitae form.timelineItem:not(.editing) div.companyAreaContainer.formControl > * {
+    color: hsl(0, 0%, 90%);
+}
+
+section#curriculumVitae form.timelineItem:not(.editing) .formControl .courseText,
+section#curriculumVitae form.timelineItem:not(.editing) .formControl .jobTitleText {
+    color: #FFFFFF;
+}
+
 section#curriculumVitae form.timelineItem:not(.editing) div.gradeContainer.formControl input {
     padding: 0 0.25em;
 }
 
-section#curriculumVitae form.timelineItem:not(.editing) div.formControl .courseText {
+section#curriculumVitae form.timelineItem:not(.editing) div.formControl .courseText, 
+section#curriculumVitae form.timelineItem:not(.editing) .formControl .courseText {
     padding: 0;
 }
 
@@ -127,3 +143,7 @@ section#curriculumVitae form.timelineItem:not(.editing) input[type=submit] {
 .courseText {
     resize: none;
 }
+
+section#curriculumVitae form.timelineItem:not(.editing) div.companyAreaContainer input {
+    width: 30%;
+}

src/editor/editor.html

@@ -24,20 +24,19 @@
         <section id="curriculumVitae">
             <h2>curriculum vitae</h2>
             <div class="cvGrid">
-                <!-- https://codepen.io/keithwyland/pen/wqNqvy -->
                 <div>
                     <h3>Education</h3>
 
                     <div class="editorContainer">
-                        <form action="" method="POST">
+                        <form action="" method="POST" id="addEdu">
                             <div class="formControl">
-                                <label for="dateFrom">Date From</label>
+                                <label for="dateFromE">Date From</label>
-                                <input type="date" id="dateFrom" name="dateFrom">
+                                <input type="date" id="dateFromE" name="dateFromE">
                             </div>
 
                             <div class="formControl">
-                                <label for="dateTo">Date To</label>
+                                <label for="dateToE">Date To</label>
-                                <input type="date" id="dateTo" name="dateTo">
+                                <input type="date" id="dateToE" name="dateToE">
                             </div>
 
                             <div class="formControl">
@@ -66,7 +65,44 @@
                 <div>
                     <h3>Work</h3>
 
+                    <div class="editorContainer">
+                        <form action="" method="POST" id="addWork">
+                            <div class="formControl">
+                                <label for="dateFromW">Date From</label>
+                                <input type="date" id="dateFromW" name="dateFromW">
+                            </div>
+
+                            <div class="formControl">
+                                <label for="dateToW">Date To</label>
+                                <input type="date" id="dateToW" name="dateToW">
+                            </div>
+
+                            <div class="formControl">
+                                <label for="company">Company</label>
+                                <input type="text" id="company" name="company">
+                            </div>
+                            
+                            <div class="formControl">
+                                <label for="area">Area</label>
+                                <input type="text" id="area" name="area">
+                            </div>
+
+                            <div class="formControl">
+                                <label for="jobTitle">Job Title</label>
+                                <input type="text" id="jobTitle" name="jobTitle">
+                            </div>
+
+                            <div class="error hidden" id="workError">
+                                <button class="close" type="button">&times;</button>
+                                <div></div>
+                            </div>
+
+                            <input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Add new job">
+                        </form>
+
                         <div class="timeline" id="work">
+
+                        </div>
                 </div>
             </div>
             </div>

src/editor/js/editor.js

@@ -1,15 +1,17 @@
 let dateOptions = {month: 'short', year: 'numeric'};
+
 document.addEventListener('DOMContentLoaded', () =>
 {
     // check if the user is logged in, if not redirect to log in
-    /*    fetch('/api/user/isLoggedIn').then(res => 
+        fetch('/api/user/isLoggedIn').then(res => 
         {
             if (!res.ok)
             {
                 window.location.href = './';
             }
-        });*/
+        });
-    document.querySelector("#dateFrom").max = new Date().toISOString().split("T")[0];
+    document.querySelector("#dateFromE").max = new Date().toISOString().split("T")[0];
+    document.querySelector("#dateFromW").max = new Date().toISOString().split("T")[0];
 
 
     fetch("/api/timelineData/edu").then(res =>
@@ -20,37 +22,24 @@ document.addEventListener('DOMContentLoaded', () =>
             {
                 for (let i = 0; i < json.length; i++)
                 {
-                    let id = json[i].ID;
+                    addEduData(json[i].ID, json[i].startPeriod, json[i].endPeriod, json[i].grade, json[i].course);
-                    let timelineItem = document.createElement("form")
+                }
-                    timelineItem.id = "timelineItem" + id;
+                return;
-                    timelineItem.classList.add("timelineItem");
+            }
-                    timelineItem.onsubmit = e => updateEduItem(id, e);
+            document.querySelector("#edu").innerHTML = "No education data found";
-                    timelineItem.innerHTML = `
+        })
-                    <div class="modifyBtnContainer">
+    });
-                        <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${id}" id="dateFrom${id}" onload="this.max = new Date().toISOString().split('T')[0]" value="${json[i]['startPeriod']}">
-                        -
-                        <input type="date" name="dateTo${id}" id="dateTo${id}" value="${json[i]['endPeriod']}">
-                    </div>
-					<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${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${id}" id="course${id}" cols="10" rows="3" disabled>${json[i]['course']}</textarea>
-					</div>
     
-                    <div class="error hidden" id="eduError${id}">
+    fetch("/api/timelineData/work").then(res =>
-                        <button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden');">&times;</button>
+    {
-                        <div></div>
+        res.json().then(json =>
-                    </div>
+        {
-					<input type="submit" value="Change">
+            if (res.ok)
-				`;
+            {
-                    document.getElementById("edu").appendChild(timelineItem);
+                for (let i = 0; i < json.length; i++)
+                {
+                    let endPeriod = json[i].endPeriod === null ? "Present" : json[i].endPeriod;
+                    addWorkData(json[i].ID, json[i].startPeriod, endPeriod, json[i].companyName, json[i].area, json[i].title);
                 }
                 return;
             }
@@ -73,6 +62,79 @@ document.querySelector("#navClose").addEventListener("click", () =>
     document.querySelector("#navOpen").style.visibility = "visible";
 });
 
+document.querySelector("#addEdu").addEventListener("submit", e =>
+{
+    e.preventDefault();
+    let data = new FormData();
+    data.append("dateFrom", document.querySelector("#dateFromE").value);
+    data.append("dateTo", document.querySelector("#dateToE").value);
+    data.append("grade", document.querySelector("#grade").value);
+    data.append("course", document.querySelector("#courseTitle").value);
+    
+    fetch("/api/timelineData/edu", {
+        method: "POST",
+        body: data,
+        headers: {
+            "Authentication": localStorage.getItem("token")
+        }
+    }).then(res => res.json().then(json => 
+    {
+        if (res.ok)
+        {
+            addEduData(json.ID, data.get("dateFrom"), data.get("dateTo"), data.get("grade"), data.get("course"), true);
+            document.querySelector("#addEdu").reset();
+            return;
+        }
+
+        if (res.status === 401)
+        {
+            window.location.href = "./";
+            return;
+        }
+
+        document.querySelector("#eduError").classList.remove("hidden");
+        document.querySelector("#eduError div").innerHTML = json.error;
+    }));
+});
+
+document.querySelector("#addWork").addEventListener("submit", e =>
+{
+    e.preventDefault();
+    let data = new FormData();
+    data.append("dateFrom", document.querySelector("#dateFromW").value);
+    data.append("dateTo", document.querySelector("#dateToW").value);
+    data.append("companyName", document.querySelector("#company").value);
+    data.append("area", document.querySelector("#area").value);
+    data.append("title", document.querySelector("#jobTitle").value);
+
+    fetch("/api/timelineData/work", {
+        method: "POST",
+        body: data,
+        headers: {
+            "Authentication": localStorage.getItem("token")
+        }
+    }).then(res => res.json().then(json =>
+    {
+        if (res.ok)
+        {
+            let endPeriod = data.get("dateTo") === null ? "Present" : data.get("dateTo ");
+            addWorkData(json.ID, data.get("dateFrom"), endPeriod, data.get("companyName"), data.get("area"), data.get("title"), true);
+            document.querySelector("#addEdu").reset();
+            return;
+        }
+
+        if (res.status === 401)
+        {
+            window.location.href = "./";
+            return;
+        }
+
+        document.querySelector("#eduError").classList.remove("hidden");
+        document.querySelector("#eduError div").innerHTML = json.error;
+    }));
+});
+
+
 /**
  * Switches the timeline item between edit and view mode
  * @param id the id of the timeline item
@@ -80,19 +142,131 @@ document.querySelector("#navClose").addEventListener("click", () =>
 function edit(id)
 {
     document.querySelector("#timelineItem" + id).classList.toggle("editing");
+    if (id.includes("e"))
+    {
         document.querySelector("#grade" + id).toggleAttribute("disabled");
         document.querySelector("#course" + id).toggleAttribute("disabled");
+        return;
+    }
+    document.querySelector("#companyName" + id).toggleAttribute("disabled");
+    document.querySelector("#area" + id).toggleAttribute("disabled");
+    document.querySelector("#jobTitle" + id).toggleAttribute("disabled");
 }
 
+/**
+ * Updates the education timeline item with the given id
+ * @param ID - the id of the course timeline item
+ * @param startPeriod - the start date of the course
+ * @param endPeriod - the end date of the course
+ * @param grade - the grade of the course
+ * @param course - the name of the course
+ * @param prepend - whether to prepend the timeline item to the timeline
+ */
+function addEduData(ID, startPeriod, endPeriod, grade, course, prepend=false) 
+{
+    let id = ID + "e";
+    let timelineItem = document.createElement("form")
+    timelineItem.id = "timelineItem" + id;
+    timelineItem.classList.add("timelineItem");
+    timelineItem.onsubmit = e => updateEduItem(ID, e);
+    timelineItem.innerHTML = `
+    <div class="modifyBtnContainer">
+        <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-solid fa-trash"></i></button>
+    </div>
+    <div class="dateContainer formControl">
+        <input type="date" name="dateFrom${id}" id="dateFrom${id}" onload="this.max = new Date().toISOString().split('T')[0]" value="${startPeriod}">
+        -
+        <input type="date" name="dateTo${id}" id="dateTo${id}" value="${endPeriod}">
+    </div>
+    <h3 class="timelineHeader" id="timelineHeader${id}">${new Date(startPeriod).toLocaleString('en-gb', dateOptions)} - ${new Date(endPeriod).toLocaleString('en-gb', dateOptions)}</h3>
+    <div class="gradeContainer formControl">
+        <label for="grade${id}">Grade:</label>
+        <input type="text" name="grade${id}" id="grade${id}" value="${grade}" disabled>
+    </div>
+    <div class="formControl">
+        <textarea class="courseText" name="course${id}" id="course${id}" cols="10" rows="3" disabled>${course}</textarea>
+    </div>
+    
+    <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">
+    `;
+    if (prepend)
+    {
+        document.querySelector("#edu").prepend(timelineItem);
+        return;
+    }
+    document.getElementById("edu").appendChild(timelineItem);
+}
+
+/**
+ * Adds a new work timeline item to the page
+ * @param ID - the id of the work timeline item
+ * @param startPeriod - the start date of the job
+ * @param endPeriod - the end date of the job
+ * @param companyName - the name of the company
+ * @param area - the area of the company
+ * @param jobTitle - the job title
+ * @param prepend - whether to prepend the timeline item to the timeline
+ */
+function addWorkData(ID, startPeriod, endPeriod, companyName, area, jobTitle, prepend=false)
+{
+    let id = ID + "w";
+    let timelineItem = document.createElement("form")
+    timelineItem.id = "timelineItem" + id;
+    timelineItem.classList.add("timelineItem");
+    timelineItem.onsubmit = e => updateWorkItem(ID, e);
+    timelineItem.innerHTML = `
+    <div class="modifyBtnContainer">
+        <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="deleteWorkItem(${ID})"><i class="fa-solid fa-trash"></i></button>
+    </div>
+    <div class="dateContainer formControl">
+        <input type="date" name="dateFrom${id}" id="dateFrom${id}" onload="this.max = new Date().toISOString().split('T')[0]" value="${startPeriod}">
+        -
+        <input type="date" name="dateTo${id}" id="dateTo${id}" value="${endPeriod === 'Present' ? '' : endPeriod}">
+    </div>
+    <h3 class="timelineHeader" id="timelineHeader${id}">${new Date(startPeriod).toLocaleString('en-gb', dateOptions)} - ${endPeriod === 'Present' ? '' : new Date(endPeriod).toLocaleString('en-gb', dateOptions)}</h3>
+    <div class="companyAreaContainer formControl">
+        <input type="text" name="companyName${id}" id="companyName${id}" value="${companyName}" disabled>
+        -
+        <input type="text" name="area${id}" id="area${id}" value="${area}" disabled>                      
+    </div>
+    <div class="formControl">
+        <textarea class="jobTitleText" name="jobTitle${id}" id="jobTitle${id}" cols="10" rows="3" disabled>${jobTitle}</textarea>
+    </div>
+    
+    <div class="error hidden" id="workError${id}">
+        <button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden');">&times;</button>
+        <div></div>
+    </div>
+    <input type="submit" value="Change">
+	`;
+    if (prepend)
+    {
+        document.querySelector("#work").prepend(timelineItem);
+        return;
+    }
+    
+    document.getElementById("work").appendChild(timelineItem);
+}
+
+/**
+ * Updates the edu timeline item with the given id
+ * @param id the id of the edu timeline item
+ * @param e the event that triggered the function
+ */
 function updateEduItem(id, e)
 {
     e.preventDefault();
-    
     let data = {}
-    data["dateFrom"] = document.querySelector("#dateFrom" + id).value;
+    data["dateFrom"] = document.querySelector(`#dateFrom${id}e`).value;
-    data["dateTo"] = document.querySelector("#dateTo" + id).value;
+    data["dateTo"] = document.querySelector(`#dateTo${id}e`).value;
-    data["grade"] = document.querySelector("#grade" + id).value;
+    data["grade"] = document.querySelector(`#grade${id}e`).value;
-    data["course"] = document.querySelector("#course" + id).value;
+    data["course"] = document.querySelector(`#course${id}e`).value;
     
     fetch("/api/timelineData/edu/" + id, {
         method: "PATCH",
@@ -105,10 +279,10 @@ function updateEduItem(id, e)
     {
         if (res.ok)
         {
-            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(`#timelineHeader${id}e`).innerHTML = new Date(document.querySelector(`#dateFrom${id}e`).value).toLocaleString('en-gb', dateOptions) + " - " + new Date(document.querySelector(`#dateTo${id}e`).value).toLocaleString('en-gb', dateOptions);
-            document.querySelector("#timelineItem" + id).classList.toggle("editing");
+            document.querySelector(`#timelineItem${id}e`).classList.toggle("editing");
-            document.querySelector("#grade" + id).setAttribute("disabled", "");
+            document.querySelector(`#grade${id}e`).setAttribute("disabled", "");
-            document.querySelector("#course" + id).setAttribute("disabled", "");
+            document.querySelector(`#course${id}e`).setAttribute("disabled", "");
             return;
         }
 
@@ -120,9 +294,114 @@ function updateEduItem(id, e)
         
         res.json().then(json =>
         {
-            document.querySelector("#eduError" + id).classList.remove("hidden");
+            document.querySelector(`#eduError${id}e`).classList.remove("hidden");
-            document.querySelector(`#eduError${id} div`).innerHTML = json.error;
+            document.querySelector(`#eduError${id}e div`).innerHTML = json.error;
         });
         
     })
 }
+
+/**
+ * Updates the work timeline item with the given id
+ * @param id the id of the work timeline item
+ * @param e the event that triggered the function
+ */
+function updateWorkItem(id, e)
+{
+    e.preventDefault();
+    let data = {}
+    data["dateFrom"] = document.querySelector(`#dateFrom${id}w`).value;
+    data["dateTo"] = document.querySelector(`#dateTo${id}w`).value;
+    data["companyName"] = document.querySelector(`#companyName${id}w`).value;
+    data["area"] = document.querySelector(`#area${id}w`).value;
+    data["title"] = document.querySelector(`#jobTitle${id}w`).value;
+    
+    fetch("/api/timelineData/work/" + id, {
+        method: "PATCH",
+        body: JSON.stringify(data),
+        headers: {
+            "Content-Type": "application/json",
+            "Authorization": "Bearer " + localStorage.getItem("token")
+        }
+    }).then(res => 
+    {
+        if(res.ok)
+        {
+            document.querySelector(`#timelineHeader${id}w`).innerHTML = new Date(document.querySelector(`#dateFrom${id}w`).value).toLocaleString('en-gb', dateOptions) + " - " + new Date(document.querySelector(`#dateTo${id}w`).value).toLocaleString('en-gb', dateOptions);
+            document.querySelector(`#timelineItem${id}w`).classList.toggle("editing");
+            document.querySelector(`#companyName${id}w`).setAttribute("disabled", "");
+            document.querySelector(`#area${id}w`).setAttribute("disabled", "");
+            document.querySelector(`#jobTitle${id}w`).setAttribute("disabled", "");
+            return;
+        }
+        
+        if (res.status === 401)
+        {
+            window.location.href = "./";
+            return;
+        }
+        
+        res.json().then(json =>
+        {
+            document.querySelector(`#workError${id}w`).classList.remove("hidden");
+            document.querySelector(`#workError${id}w div`).innerHTML = json.error;
+        });
+    });
+}
+
+/**
+ * Deletes the timeline item with the given id
+ * @param id the id of the timeline item
+ */
+function deleteEduItem(id)
+{
+    fetch("/api/timelineData/edu/" + id, {
+        method: "DELETE",
+        headers: {
+            "Authorization": "Bearer " + localStorage.getItem("token")
+        }
+    }).then(res => 
+    {
+        if (res.ok)
+        {
+            document.querySelector(`#timelineItem${id}e`).remove();
+            return;
+        }
+
+        if (res.status === 401)
+        {
+            window.location.href = "./";
+            return;
+        }
+        res.json().then(json => alert(json.error));
+    });
+}
+
+/**
+ * Updates the timeline item with the given id
+ * @param id the id of the timeline item
+ */
+function deleteWorkItem(id)
+{
+    fetch("/api/timelineData/work/" + id, {
+        method: "DELETE",
+        headers: {
+            "Authorization": "Bearer " + localStorage.getItem("token")
+        }
+    }).then(res =>
+    {
+        if (res.ok)
+        {
+            document.querySelector(`#timelineItem${id}w`).remove();
+            return;
+        }
+
+        if (res.status === 401)
+        {
+            window.location.href = "./";
+            return;
+        }
+        res.json().then(json => alert(json.error));
+
+    }); 
+}

src/js/main.js

@@ -139,8 +139,9 @@ function getTimelineData()
 				{
 					let timelineItem = document.createElement("div")
 					timelineItem.classList.add("timelineItem");
+					let endPeriod = item["endPeriod"] === null ? "Present" : new Date(item["endPeriod"]).toLocaleString('en-gb', dateOptions);
 					timelineItem.innerHTML = `
-					<h3 class="timelineHeader">${new Date(item["startPeriod"]).toLocaleString('en-gb', dateOptions)} - ${new Date(item["endPeriod"]).toLocaleString('en-gb', dateOptions)}</h3>
+					<h3 class="timelineHeader">${new Date(item["startPeriod"]).toLocaleString('en-gb', dateOptions)} - ${endPeriod}</h3>
 					<span>${item["companyName"]} - ${item["area"]}</span>
 					<p class="timelineText">${item["title"]}</p>
 				`;