admin panel, users, bug fixes

static/scripts/table-admin.js

@@ -0,0 +1,225 @@
+// Получаем высоту таблицы и определяем, сколько строк помещается на странице
+let currentPage = 1;
+let tableHeight = document.getElementById("content").offsetHeight;
+let rowHeight = 60;
+let rowsPerPage = Math.floor(tableHeight / rowHeight) - 3;
+let filteredUsers = [...users];
+let timeRangeStart = null;
+let timeRangeEnd = null;
+
+const createTable = () => {
+  const table = document.getElementById("adminTable");
+  const tbody = table.querySelector("tbody");
+  // Очищаем таблицу
+  tbody.innerHTML = "";
+
+  // Добавляем строки таблицы
+  const startIndex = (currentPage - 1) * rowsPerPage;
+  const endIndex = startIndex + rowsPerPage;
+  const usersToDisplay = filteredUsers.slice(startIndex, endIndex);
+
+  usersToDisplay.forEach((user) => {
+    const row = document.createElement("tr");
+
+    // Добавляем ячейку с данными
+    const dataCell = document.createElement("td");
+    dataCell.classList.add("user-data");
+
+    // Создаем контейнер для аватара и имени
+    const avatarContainer = document.createElement("div");
+    avatarContainer.classList.add("avatar-container");
+    avatarContainer.style.display = "inline-block"; 
+
+    // Добавляем аватар в контейнер
+    const avatar = document.createElement("div");
+    avatar.textContent = user.name[0] + user.surname[0]; // Инициалы
+    avatar.classList.add("avatar");
+    avatar.style.backgroundColor = getRandomColor(); // Добавляем случайный цвет фона (функция getRandomColor определена ниже)
+    avatar.style.color = "#fff"; // Устанавливаем белый цвет текста на фоне
+    avatar.style.borderRadius = "50%"; // Делаем аватар круглым
+    avatar.style.width = "45px"; // Устанавливаем ширину
+    avatar.style.height = "43px"; // Устанавливаем высоту
+    avatar.style.display = "flex"; // Делаем аватар flex-элементом
+    avatar.style.justifyContent = "center"; // Выравниваем содержимое по центру
+    avatar.style.alignItems = "center"; // Выравниваем содержимое по центру
+    avatar.style.fontSize = "17px"; // Устанавливаем размер шрифта
+    avatar.style.paddingTop = "2px"; // Устанавливаем отступ сверху
+    avatar.style.cursor = "default"; // Устанавливаем курсор в виде стрелки
+
+    // Добавляем аватар в контейнер
+    avatarContainer.appendChild(avatar);
+
+    // Добавляем имя в контейнер
+    const name = document.createElement("div");
+    name.textContent = user.name + " " + user.surname;
+    name.classList.add("user-name");
+    name.style.display = "inline-block";
+    name.style.marginLeft = "14px";
+
+    // Добавляем контейнер с аватаром и именем в ячейку
+    dataCell.appendChild(avatarContainer);
+    dataCell.appendChild(name);
+
+    // Добавляем ячейку с данными в строку
+    row.appendChild(dataCell);
+
+    // Добавляем ячейки с данными
+    // const name = document.createElement("td");
+    // name.textContent = user.name + " " + user.surname;
+    // row.appendChild(name);
+    const ID = document.createElement("td");
+    ID.textContent = user.id;
+    row.appendChild(ID);
+    const mail = document.createElement("td");
+    mail.textContent = user.email;
+    row.appendChild(mail);
+    const phone = document.createElement("td");
+    phone.textContent = user.phone;
+    row.appendChild(phone);
+    const date = document.createElement("td");
+    date.textContent = user.date;
+    row.appendChild(date);
+
+    const optionsCell = document.createElement("td");
+    optionsCell.setAttribute("class", "optionsCell");
+    const trashButton = document.createElement("button");
+    trashButton.setAttribute("class", "trash");
+    trashButton.setAttribute("onclick", `deleteUser(${user.id})`);
+    trashButton.value = `delete-user-${user.id}`;
+    trashButton.id = `delete-user-${user.id}`;
+    const optionsButton = document.createElement("button");
+    optionsButton.setAttribute("class", "options");
+    optionsButton.setAttribute("onclick", `location.href = '/admin/user/${user.id}';`);
+
+    optionsCell.appendChild(optionsButton);
+    optionsCell.appendChild(trashButton);
+
+    row.appendChild(optionsCell);
+    tbody.appendChild(row);
+  });
+};
+
+function getRandomColor() {
+  const letters = "0123456789ABCDEF";
+  let color = "#";
+  for (let i = 0; i < 6; i++) {
+      color += letters[Math.floor(Math.random() * 16)];
+  }
+  return color;
+};
+
+window.addEventListener("resize", function (event) {
+  tableHeight = document.getElementById("content").offsetHeight;
+  rowHeight = 60;
+  rowsPerPage = Math.floor(tableHeight / rowHeight) - 3;
+  createTable();
+  createPagination();
+});
+
+const createPagination = () => {
+  const count = document.getElementById("count");
+  count.textContent = `Всего результатов: ${filteredUsers.length}`;
+
+  const pagination = document.getElementById("pagination");
+  pagination.innerHTML = "";
+
+  const pageCount = Math.ceil(filteredUsers.length / rowsPerPage);
+  for (let i = 1; i <= pageCount; i++) {
+    const pageLink = document.createElement("a");
+    pageLink.href = "#";
+    if (i === currentPage) {
+      // document.querySelector("#device-all").checked = false;
+      pageLink.classList.add("active");
+    }
+    pageLink.textContent = i;
+    pageLink.addEventListener("click", (event) => {
+      event.preventDefault();
+      currentPage = i - 1;
+      currentPage = i;
+      createTable();
+      createPagination();
+    });
+    pagination.appendChild(pageLink);
+  }
+
+  //   var currentPageSpan = document.createElement("span");
+  //   currentPageSpan.textContent = currentPage;
+  //   pagination.appendChild(currentPageSpan);
+
+  // Добавляем кнопки "Next" и "Previous"
+
+  //   const prevButton = document.createElement("button");
+  //   prevButton.innerText = "Previous";
+  //   prevButton.onclick = () => {
+  //     if (currentPage === 1) return;
+  //     currentPage--;
+  //     createTable();
+  //   };
+  //   pagination.appendChild(prevButton);
+
+  //   const nextButton = document.createElement("button");
+  //   nextButton.innerText = "Next";
+  //   nextButton.onclick = () => {
+  //     if (currentPage === pageCount) return;
+  //     currentPage++;
+  //     createTable();
+  //   };
+  //   pagination.appendChild(nextButton);
+};
+
+const applyFilterAndSearch = () => {
+  const searchValue = searchInput.value.toLowerCase();
+
+  filteredUsers = users.filter((user) => {
+    const searchString =
+      `${user.id} ${user.name} ${user.surname} ${user.email} ${user.phone} ${user.date}`.toLowerCase();
+    const matchSearch = !searchValue || searchString.includes(searchValue);
+
+    // Фильтр по временному диапазону
+    let matchTimeRange = true;
+    if (timeRangeStart) {
+      const startTimestamp = new Date(timeRangeStart).getTime();
+      const deviceTimestamp = parseTableTime(user.time); // Преобразование времени из таблицы
+      matchTimeRange = startTimestamp <= deviceTimestamp;
+    }
+    if (timeRangeEnd) {
+      const endTimestamp = new Date(timeRangeEnd).getTime();
+      const deviceTimestamp = parseTableTime(user.time); // Преобразование времени из таблицы
+      matchTimeRange = matchTimeRange && deviceTimestamp <= endTimestamp;
+    }
+
+    return matchSearch && matchTimeRange;
+  });
+
+  currentPage = 1;
+  createTable();
+  createPagination();
+};
+
+// Функция для преобразования времени из таблицы в миллисекунды
+function parseTableTime(tableTime) {
+  // Парсинг даты и времени из строки формата "12.03.23 17:33"
+  const parts = tableTime.split(" ");
+  const dateParts = parts[0].split(".");
+  const timeParts = parts[1].split(":");
+  const year = 2000 + parseInt(dateParts[2]);
+  const month = parseInt(dateParts[1]) - 1; // Месяцы в JavaScript начинаются с 0
+  const day = parseInt(dateParts[0]);
+  const hours = parseInt(timeParts[0]);
+  const minutes = parseInt(timeParts[1]);
+  return new Date(year, month, day, hours, minutes).getTime();
+}
+
+const searchInput = document.getElementById("table-search");
+searchInput.addEventListener("input", applyFilterAndSearch);
+
+const filterCheckboxes = Array.from(
+  document.querySelectorAll('input[type="checkbox"].device-filter')
+);
+filterCheckboxes.forEach((checkbox) => {
+  checkbox.addEventListener("change", applyFilterAndSearch);
+});
+
+
+createTable();
+createPagination();