admin ui changes

assets/script.js

@@ -20,6 +20,49 @@ function doAccountAction(requestData, successMessage, failureMessage, silent=fal
         });
 }
 
+function displayList(data, element_id, delete_function=null) {
+    const tableContainer = document.getElementById(element_id);
+    tableContainer.innerHTML = ""; // Clear previous content
+
+    const table = document.createElement("table");
+    table.classList.add("list-table");
+
+    // Create header row
+    const headerRow = table.insertRow(0);
+    for (const key in data[0]) {
+        const th = document.createElement("th");
+        th.appendChild(document.createTextNode(key));
+        headerRow.appendChild(th);
+    }
+
+    if(typeof delete_function === "function") {
+        const th = document.createElement("th");
+        th.appendChild(document.createTextNode("Delete"));
+        headerRow.appendChild(th);
+    }
+
+    // Create data rows
+    for (const line of data) {
+        const dataRow = table.insertRow();
+        for (const key in line) {
+            const td = document.createElement("td");
+            td.appendChild(document.createTextNode(line[key]));
+            dataRow.appendChild(td);
+        }
+        if(typeof delete_function === "function") {
+            const td = document.createElement("td");
+            let delete_button = document.createElement('button');
+            delete_button.onclick = function (){
+                delete_function(line.ID);
+            }
+            td.appendChild(delete_button);
+            dataRow.appendChild(td);
+        }
+    }
+
+    tableContainer.appendChild(table);
+}
+
 function handleResponse(data, SuccessMessage, failureMessage) {
     const StatusMessageElement = document.getElementById("StatusMessage");
 
@@ -33,11 +76,11 @@ function handleResponse(data, SuccessMessage, failureMessage) {
     StatusMessageElement.style.display = "block";
     setTimeout(() => {
         // Hide the status message after 3 seconds
-        StatusMessageElement.style.opacity = 0;
+        StatusMessageElement.style.opacity = "0";
         setTimeout(() => {
             StatusMessageElement.style.display = "none";
             // Reset opacity for future messages
-            StatusMessageElement.style.opacity = 1;
+            StatusMessageElement.style.opacity = "1";
         }, 500);
     }, 3000);
 }
@@ -46,6 +89,9 @@ function logout() {
     const data = new URLSearchParams();
     data.append("action", "logout");
 
-    doAccountAction(data, "Logout Successful!", "Logout failed.");
+    doAccountAction(data, "Logout Successful!", "Logout failed.").then(() => {
+        location.reload();
+        // Expected output: "Success!"
+    });
 }
 

assets/style.css

@@ -224,6 +224,9 @@ header ul li {
     transition: opacity 0.5s ease-in-out;
 }
 
+.list-table{
+    border: 2px solid var(--primary) ;
+}
 
 /*  <DASHBOARD STYLING>  */
 /*  ZAČÍNAJ VŠETKO S ".dashboard"  */

templates/adminActions.html

@@ -8,7 +8,7 @@
 
         const result = await doAccountAction(data, "Activation codes added Successfully!", "Activation codes addition failed.");
 
-        displayUserList(result.ActivationCodes);
+        displayList(result.ActivationCodes, "codeListTable", deleteActivationCode);
     }
 
     async function listUsers() {
@@ -18,37 +18,10 @@
         const result = await doAccountAction(data, "User list retrieved Successfully!", "User list retrieval failed.");
 
         if (result && result.Status === "Success") {
-            displayUserList(result.Users);
+            displayList(result.Users, "userListTable", deleteUser);
         }
     }
 
-    function displayUserList(users) {
-        const tableContainer = document.getElementById("userListTable");
-        tableContainer.innerHTML = ""; // Clear previous content
-
-        const table = document.createElement("table");
-        table.border = "1";
-
-        // Create header row
-        const headerRow = table.insertRow(0);
-        for (const key in users[0]) {
-            const th = document.createElement("th");
-            th.appendChild(document.createTextNode(key));
-            headerRow.appendChild(th);
-        }
-
-        // Create data rows
-        for (const user of users) {
-            const dataRow = table.insertRow();
-            for (const key in user) {
-                const td = document.createElement("td");
-                td.appendChild(document.createTextNode(user[key]));
-                dataRow.appendChild(td);
-            }
-        }
-
-        tableContainer.appendChild(table);
-    }
 
     async function listActivationCodes() {
         const data = new URLSearchParams();
@@ -56,72 +29,50 @@
 
         const result = await doAccountAction(data, "Activation code list retrieved Successfully!", "Activation code list retrieval failed.");
 
-        displayUserList(result.ActivationCodes);
+        displayList(result.ActivationCodes, "codeListTable", deleteActivationCode);
     }
 
-    function deleteUser() {
-        const userId = document.getElementById("userId").value;
+    function deleteUser(userId) {
 
         const data = new URLSearchParams();
         data.append("action", "delete_user");
         data.append("user_id", userId);
 
         doAccountAction(data, "User deleted Successfully!", "User deletion failed.");
+        listUsers();
     }
 
-    function deleteActivationCode() {
-        const activationCode = document.getElementById("activationCode").value;
+    function deleteActivationCode(activationCode) {
 
         const data = new URLSearchParams();
         data.append("action", "delete_activation_code");
         data.append("activation_code", activationCode);
 
         doAccountAction(data, "Activation code deleted Successfully!", "Activation code deletion failed.");
+        listActivationCodes();
     }
 </script>
 
-<table id="userListTable"></table>
 
 <div class="form-container" id="addActivationCodesForm">
-    <h1>Add Activation Codes</h1>
-    <form>
+    <h1>Activation Codes</h1>
+
+    <h2>List Activation Codes</h2>
+    <button type="button" onclick="listActivationCodes()">List Activation Codes</button><br>
+    <table id="codeListTable"></table>
+
+    <h2>Add Activation Codes</h2>
         <label for="activationCodeCount">Activation Code Count:</label>
         <input type="text" id="activationCodeCount" name="activationCodeCount" required><br>
-
         <button type="button" onclick="addActivationCodes()">Add Activation Codes</button>
-    </form>
 </div>
 
+<hr>
+
 <div class="form-container" id="listUsersForm">
     <h1>List Users</h1>
-    <form>
-        <button type="button" onclick="listUsers()">List Users</button>
-    </form>
+        <button type="button" onclick="listUsers()">List Users</button><br>
+        <table id="userListTable"></table>
 </div>
 
-<div class="form-container" id="listActivationCodesForm">
-    <h1>List Activation Codes</h1>
-    <form>
-        <button type="button" onclick="listActivationCodes()">List Activation Codes</button>
-    </form>
-</div>
-
-<div class="form-container" id="deleteUserForm">
-    <h1>Delete User</h1>
-    <form>
-        <label for="userId">User ID:</label>
-        <input type="text" id="userId" name="userId" required><br>
-
-        <button type="button" onclick="deleteUser()">Delete User</button>
-    </form>
-</div>
-
-<div class="form-container" id="deleteActivationCodeForm">
-    <h1>Delete Activation Code</h1>
-    <form>
-        <label for="activationCode">Activation Code:</label>
-        <input type="text" id="activationCode" name="activationCode" required><br>
-
-        <button type="button" onclick="deleteActivationCode()">Delete Activation Code</button>
-    </form>
-</div>
+<hr>