Add more timestamps and details.

index.php

@@ -285,6 +285,12 @@ else if (!empty($_POST["action"]))
 			}
 			
 			$now = time();
+			$created = $now;
+			
+			if (!empty($id_to_edit) && !empty($model["list"][$id_to_edit]) && !empty($model["list"][$id_to_edit]["created"]))
+			{
+				$created = $model["list"][$id_to_edit]["created"];
+			}
 			
 			if (empty($model["list"]))
 			{
@@ -296,7 +302,7 @@ else if (!empty($_POST["action"]))
 				"description" => $description,
 				"deadline" => $deadline,
 				"category" => $category,
-				"created" => $now,
+				"created" => $created,
 				"modified" => $now,
 			);
 			
@@ -503,10 +509,44 @@ function todo_list(array $model = []) : string
 				$te->set_block_template("MAIN_ITEM_SUMMARY", "MAIN_ITEM_SUMMARY_DESC");
 			}
 			
+			unset($deadline);
+			$deadline = date("Y-m-d", intval($item["deadline"]));
+			if (empty($deadline))
+			{
+				$deadline = "N/A";
+			}
+			
+			unset($created);
+			$created = date("Y-m-d", intval($item["created"]));
+			if (empty($created))
+			{
+				$created = "N/A";
+			}
+			
+			unset($modified);
+			$modified = date("Y-m-d", intval($item["modified"]));
+			if (empty($modified))
+			{
+				$modified = "N/A";
+			}
+			
+			unset($category);
+			$category = $item["category"];
+			$category_raw = $item["category"];
+			if (empty($category))
+			{
+				$category = "Uncategorized";
+			}
+			
 			$te->append_argumented_block("MAIN_CATEGORY_ITEMS", "MAIN_ITEM", [ 
 				"MAIN_ITEM_ID" => $key,
-				"MAIN_ITEM_TITLE" => $item["title"],
-				"MAIN_ITEM_DESCRIPTION" => $item["description"],
+				"MAIN_ITEM_TITLE" => str_replace([ "\"", "'" ], [ """, "'" ], $item["title"]),
+				"MAIN_ITEM_DESCRIPTION" => str_replace([ "\"", "'" ], [ """, "'" ], $item["description"]),
+				"MAIN_ITEM_CATEGORY" => str_replace([ "\"", "'" ], [ """, "'" ], $category),
+				"MAIN_ITEM_CATEGORY_RAW" => $category_raw,
+				"MAIN_ITEM_DEADLINE" => $deadline,
+				"MAIN_ITEM_CREATED" => $created,
+				"MAIN_ITEM_MODIFIED" => $modified,
 			]);
 		}
 		

templates/add-form.html

@@ -1,8 +1,9 @@
 <div class="todo-add-container">
 	<details>
-		<summary>New</summary>
+		<summary id="addFormSummary">New</summary>
 		<form action="./" method="POST" autocomplete="off">
-			<input type="hidden" name="action" value="add" />
+			<input id="add_form_action" type="hidden" name="action" value="add" />
+			<input id="todo_item_id" type="hidden" name="todo_item_id" value="" />
 			<div class="todo-add-div">
 				<p>{{ ADD_NOTICE }}</p>
 			</div>
@@ -30,7 +31,7 @@
 			</div>
 			
 			<div class="todo-add-div">
-				<input class="todo-add-button" type="submit" value="Add" />
+				<input id="add_form_button" class="todo-add-button" type="submit" value="Add" />
 			</div>
 		</form>
 	</details>

templates/main-item.html

@@ -2,6 +2,12 @@
 	<details>
 		<summary>{{ MAIN_ITEM_SUMMARY }}</summary>
 		
+		<small><i>Created: {{ MAIN_ITEM_CREATED }}</i></small><br>
+		<small><i>Modified: {{ MAIN_ITEM_MODIFIED }}</i></small><br>
+		Deadline: {{ MAIN_ITEM_DEADLINE }}<br>
+		Category: {{ MAIN_ITEM_CATEGORY }}<br>
+		<br>
+		
 		<form action="./" method="POST">
 			<input type="hidden" name="action" value="delay" />
 			<input type="hidden" name="delay_by" value="-1 week" />
@@ -35,6 +41,10 @@
 		<div style="display:inline-block;width:1em;"></div>
 		<div style="display:inline-block;width:1em;"></div>
 		
+		<form onsubmit="return false">
+			<input type="submit" value="Edit" onclick="editNote('{{ MAIN_ITEM_ID }}', '{{ MAIN_ITEM_TITLE }}', '{{ MAIN_ITEM_DESCRIPTION }}', '{{ MAIN_ITEM_DEADLINE }}', '{{ MAIN_ITEM_CATEGORY_RAW }}')" />
+		</form>
+		
 		<form action="./" method="POST">
 			<input type="hidden" name="action" value="remove" />
 			<input type="hidden" name="todo_item_id" value="{{ MAIN_ITEM_ID }}" />

templates/script.js

@@ -1,3 +1,5 @@
+var autoClose = true;
+
 document.addEventListener("DOMContentLoaded", function(){
     // Fetch all the details element.
 	const details = document.querySelectorAll("details");
@@ -6,11 +8,32 @@ document.addEventListener("DOMContentLoaded", function(){
 	details.forEach((targetDetail) => {
 		targetDetail.addEventListener("click", () => {
 			// Close all the details that are not targetDetail.
+			if (autoClose) {
 				details.forEach((detail) => {
 					if (detail !== targetDetail) {
 						detail.removeAttribute("open");
 					}
 				});
+			}
 		});
 	});
 });
+
+function editNote(id, title, description, deadline, category) {
+	document.getElementById("add_form_action").value = "edit";
+	document.getElementById("add_form_button").value = "Edit";
+	
+	document.getElementById("todo_item_id").value = id.toString();
+	document.getElementById("todo_title").value = title;
+	document.getElementById("todo_description").value = description;
+	document.getElementById("todo_deadline").value = deadline;
+	document.getElementById("todo_category").value = category;
+	
+	setTimeout(
+		function() {
+			document.getElementById("addFormSummary").click();
+		}, 
+		5);
+	
+	// document.getElementById("addFormSummary").click();
+}