admin panel change into subsequent pages

static/js/admin_players.js

@@ -0,0 +1,43 @@
+async function run() {let players = await fetch("/admin/data/players").then(r => r.json());
+    let playersDiv = document.getElementById("players");
+    for (let i = 0; i < players.length; i++) {
+        let item = document.createElement("div");
+        let id = document.createElement("p");
+        let name = document.createElement("input");
+        let edit = document.createElement("button");
+        let del = document.createElement("button");
+        edit.textContent = "Edit";
+        del.textContent = "Delete";
+        id.textContent = players[i]["id"];
+        name.value = players[i]["name"];
+        item.style.display = "flex";
+        item.append(id, name, edit, del);
+        playersDiv.appendChild(item);
+        edit.addEventListener("click", async () => {
+            await fetch("/admin/edit/player", { method: "POST", body: JSON.stringify({ "id": players[i]["id"], "name": name.value }) });
+            window.location.reload();
+        })
+        del.addEventListener("click", async () => {
+            if (confirm("Delete item?")) {
+            await fetch("/admin/delete/player", { method: "POST", body: JSON.stringify({ "id": players[i]["id"] }) });
+            window.location.reload();}
+        })
+    }
+    let newPlayer = document.createElement("button");
+    newPlayer.textContent = "Add Player";
+    newPlayer.addEventListener("click", () => {
+        let item = document.createElement("div");
+        let name = document.createElement("input");
+        let save = document.createElement("button");
+        save.textContent = "Save";
+        item.append(name, save);
+        playersDiv.appendChild(item);
+        save.addEventListener("click", async () => {
+            await fetch("/admin/new/player", { method: "POST", body: JSON.stringify({ "name": name.value }) })
+            window.location.reload();
+        })
+    })
+    playersDiv.parentNode.append(newPlayer);
+}
+
+let _ = run();