кнопка адмена

nrdkwebsite/Pages/users.cshtml

@@ -3,21 +3,37 @@
 
 <style>
     td, th {
-      padding: 5px 10px;
+        padding: 5px 10px;
     }
     .center {
-      margin-left: auto;
-      margin-right: auto;
-      border-collapse: collapse;
-      border: 1px black;
+        margin-left: auto;
+        margin-right: auto;
+        font-size: x-large;
+    }
+    table, th, td {
+        border: 3px white solid;
+        border-collapse: collapse;
+    }
+    .admin {
+        margin-top: 50px;
+        border: 5px black solid;
+        background: white;
+        font-size: x-large;
+    }
+    .admin:hover {
+        background: black;
+        border: 5px white solid;
+        color: white;
+        transition: all;
+        transition-duration: 300ms;
     }
 </style>
-Всего в таблице записей: <span id="count"></span>
 <div>
     <table class="center" id="users">
         <tr><th>Айди</th><th>Никнейм</th><th>Масть</th></tr> <!--ряд с ячейками заголовков-->
-        <tr class="loading"><td>Loading...</td><td>Loading...</td><td>Loading...</td></tr> <!--ряд с ячейками тела таблицы-->
+        <tr id="loading"><td>Loading...</td><td>Loading...</td><td>Loading...</td></tr> <!--ряд с ячейками тела таблицы-->
     </table>
+    <button class="admin" onclick="admin()" id="admin">РЕЖИМ АДМИНА</button>
 </div>
 
 <script src="~/js/site.js"></script>

nrdkwebsite/wwwroot/js/site.js

@@ -1,5 +1,5 @@
-console.log("Start!")
-alert("startaed!")
+const loading = document.getElementById("loading");
+let loadingLive = true
 async function getUsers() {
     // отправляет запрос и получаем ответ
     const response = await fetch("/api/users", {
@@ -10,29 +10,46 @@ async function getUsers() {
     if (response.ok === true) {
         // получаем данные
         const users = await response.json();
-        const table = document.querySelector("#users");
-        const count = document.querySelector("#count")
-        count.outerHTML = "1";
-        document.querySelector("#loading").destroy();
+        const table = document.getElementById("users");
+        if (loadingLive) {
+            loading.remove();
+            loadingLive = false
+        }
+        users.forEach(user => table.append(create(user)));
+        return users;
     }
 }
-// Получение одного пользователя
-async function getUser(id) {
-    const response = await fetch(`/api/users/${id}`, {
-        method: "GET",
-        headers: { "Accept": "application/json" }
-    });
-    if (response.ok === true) {
-        const user = await response.json();
-        document.getElementById("userId").value = user.id;
-        document.getElementById("userName").value = user.nickname;
-        document.getElementById("userMast").value = user.mast;
-    }
-    else {
-        // если произошла ошибка, получаем сообщение об ошибке
-        const error = await response.json();
-        console.log(error.message); // и выводим его на консоль
-    }
+
+function create(user) {
+    let tr = document.createElement("tr");
+    let tdName = document.createElement("td");
+    let tdMast = document.createElement("td");
+    let tdId = document.createElement("td");
+    let tdBut = document.createElement("td");
+    let ButtDel = document.createElement("button");
+    let ButtEdit = document.createElement("button");
+    tdId.append(user.id);
+    tdName.append(user.nickname);
+    tdMast.append(user.mast);
+    ButtDel.append("УДАЛИТЬ");
+    ButtEdit.append("ИЗМЕНИТЬ");
+    tdBut.append(ButtDel, ButtEdit);
+    tdBut.id = "ADMINBUT" + user.id;
+    tdBut.className = "ADMINBUT"
+    tdBut.style.display = "none";
+    tr.append(tdId, tdName, tdMast, tdBut);
+    return tr;
 }
 // Добавление пользователя
-await getUsers();
+console.log(getUsers());
+console.log("loaded!");
+
+
+function admin() {
+    document.body.style.background = "black";
+    document.getElementById("admin").remove();
+    let adminbuttons = document.getElementsByClassName("ADMINBUT");
+    for (let item of adminbuttons) {
+        item.style.display = "inline";
+    }
+}