From b4647fe4e9ccbcdac76a3f23f8c1e2acb0d4b032 Mon Sep 17 00:00:00 2001
From: Aleksey Filippov <al.filippov@ulstu.ru>
Date: Thu, 7 Nov 2024 10:24:20 +0400
Subject: [PATCH] Add delete student function

---
 page-js.html | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/page-js.html b/page-js.html
index d450e8b..297f7b9 100644
--- a/page-js.html
+++ b/page-js.html
@@ -46,6 +46,7 @@
                 <th scope="col">E-Mail</th>
                 <th scope="col">Phone</th>
                 <th scope="col">Group</th>
+                <th scope="col"></th>
                 </tr>
             </thead>
             <tbody id="students">
@@ -56,11 +57,27 @@
         Автор, 2022
     </footer>
     <script type="module">
+        const deleteStudent = async (id) => {
+            // eslint-disable-next-line no-restricted-globals, no-alert
+            const answer = confirm(`Do you want to delete student with id = ${id}?`);
+            if (!answer) {
+                return;
+            }
+            const response = await fetch(`http://localhost:3001/students/${id}`, { method: "delete" });
+            if (!response.ok) {
+                throw new Error(`Response status: ${response.status}`);
+            }
+        };
+
         const getStudents = async () => {
             const students = document.getElementById("students");
+            students.innerHTML = "";
             const response = await fetch("http://localhost:3001/students?_expand=group");
+            if (!response.ok) {
+                throw new Error(`Response status: ${response.status}`);
+            }
             const data = await response.json();
-            data.forEach(element => {
+            data.forEach((element) => {
                 const createTd = (value) => {
                     const td = document.createElement("td");
                     td.innerText = value;
@@ -78,6 +95,15 @@
                 container.appendChild(createTd(element.email));
                 container.appendChild(createTd(element.phone));
                 container.appendChild(createTd(element.group.name));
+                const btn = document.createElement("button");
+                btn.setAttribute("type", "button");
+                btn.classList.add("btn", "btn-danger");
+                btn.innerHTML = "Delete";
+                container.appendChild(btn);
+                btn.addEventListener("click", async () => {
+                    await deleteStudent(element.id);
+                    getStudents();
+                });
                 students.appendChild(container);
             });
             console.log(data);