src/templates/admin.tera

@@ -58,17 +58,32 @@
     <p>Color: <span id="td_color"></span></p>
     <p>Players: <span id="td_players"></span></p>
   </dialog>
+  <dialog id="edit_dialog">
+    <form id="edit_form">
+      <p><label for="time">Edit start time</label></p>
+      <input type="text" id="start_time_edit" name="start_time" value="hmmm"/>
+      <p><label for="time">Edit end time</label></p>
+      <input type="text" id="end_time_edit" name="end_time" value="hmmm2"/>
+      <br>
+      <input type="submit" value="Send"/>
+    </form>
+  </dialog>
   <script>
     const games_form = document.getElementById("games_form");
     const table_body = document.getElementById("games_table");
     const team_dialog = document.getElementById("team_dialog");
+    const edit_dialog = document.getElementById("edit_dialog");
     const td_name = document.getElementById("td_name");
     const td_color = document.getElementById("td_color");
     const td_players = document.getElementById("td_players");
+    const start_time_edit = document.getElementById("start_time_edit");
+    const end_time_edit = document.getElementById("end_time_edit");
     const query_form = document.getElementById("query_form");
+    const edit_form = document.getElementById("edit_form");
 
     games_form.addEventListener("submit", refresh_games);
     query_form.addEventListener("submit", submit_query);
+    edit_form.addEventListener("submit", submit_edit);
 
     function submit_query(event) {
 	event.preventDefault();
@@ -92,6 +107,29 @@
 		console.error("Fetching data failed: ", error);
 	    });
     }
+    function submit_edit(event) {
+	event.preventDefault();
+	/*fetch("/admin/query", {
+	    method: "POST",
+	    body: new URLSearchParams({
+		'query': document.getElementById("query").value,
+	    })
+	})
+	    .then(res => {
+		if (!res.ok) {
+		    throw new Error(`Response status: ${res.status}`);
+		}
+		return res.json();
+	    })
+	    .then((data) => {
+		document.getElementById("query_result").textContent = JSON.stringify(data, null, 2);
+		console.log(data);
+	    })
+	    .catch(error => {
+		console.error("Fetching data failed: ", error);
+            });*/
+        console.log("should handle this");
+    }
     function refresh_games(event) {
       event.preventDefault();
       fetch("/admin/games")
@@ -119,7 +157,7 @@
 		    link.classList.add("standalone-link");
 		    link.onclick = function(e) {
 			e.preventDefault();
-			showModal(name, color, players);
+			showPlayersModal(name, color, players);
 		    };
 		    row_teams.append(link);
 		    console.log(team);
@@ -128,10 +166,20 @@
                 row_start.textContent = item['start_time'];
 		const row_end = document.createElement("td");
                 row_end.textContent = item['end_time'];
+                const edit_cell = document.createElement("td");
+                const edit_button = document.createElement("a");
+                edit_button.href = "#";
+                edit_button.textContent = "edit";
+                edit_button.onclick = function(e) {
+                    e.preventDefault();
+                    showEditModal(item['code'], item['start_time'], item['end_time']);
+                }
+                edit_cell.appendChild(edit_button);
 		row.appendChild(row_head);
 		row.appendChild(row_teams);
 		row.appendChild(row_start);
-		row.appendChild(row_end);
+                row.appendChild(row_end);
+                row.appendChild(edit_cell);
 		table_body.appendChild(row);
 	    });
 	})
@@ -139,12 +187,17 @@
           console.error("Fetching data failed:", error);
         });
     }
-    function showModal(name, color, players) {
+    function showPlayersModal(name, color, players) {
 	td_name.textContent = name;
 	td_color.textContent = color;
 	td_players.textContent = players.map((e)=>e['username']);
 	team_dialog.showModal();
     }
+    function showEditModal(code, start_time, end_time) {
+        start_time_edit.value = start_time;
+        end_time_edit.value = end_time;
+        edit_dialog.showModal()
+    }
   </script>
 </body>
 </html>