KRBL/ArgusSite
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

unlimited reports rows and pages with filters

Browse Source
This commit is contained in:
Ivan
2023-10-10 04:14:13 +03:00
parent fb3dcf80e3
commit 34bbbd0c1a
4 changed files with 546 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
static/scripts/table-reports.js
View File

@ -1,25 +1,11 @@
// Получаем высоту таблицы и определяем, сколько строк помещается на странице
let currentPage = 1;
let tableHeight = document.getElementById("table-area").offsetHeight;
let rowHeight = 60;
let rowsPerPage = Math.floor(tableHeight / rowHeight) - 3;
let filteredDevices = [...devices];
let timeRangeStart = null;
let timeRangeEnd = null;
const createTable = () => {
const table = document.getElementById("deviceTable");
const tbody = table.querySelector("tbody");
// Очищаем таблицу
tbody.innerHTML = "";
// Добавляем строки таблицы
const startIndex = (currentPage - 1) * rowsPerPage;
const endIndex = startIndex + rowsPerPage;
const devicesToDisplay = filteredDevices.slice(startIndex, endIndex);
devicesToDisplay.forEach((device) => {
devices.forEach((device) => {
const row = document.createElement("tr");
// Добавляем ячейки с данными
@ -57,137 +43,5 @@ const createTable = () => {
});
};
window.addEventListener("resize", function (event) {
tableHeight = document.getElementById("table-area").offsetHeight;
rowHeight = 60;
rowsPerPage = Math.floor(tableHeight / rowHeight) - 3;
createTable();
createPagination();
});
const createPagination = () => {
const count = document.getElementById("count");
count.textContent = `Всего результатов: ${filteredDevices.length}`;
const pagination = document.getElementById("pagination");
pagination.innerHTML = "";
const pageCount = Math.ceil(filteredDevices.length / rowsPerPage);
for (let i = 1; i <= pageCount; i++) {
const pageLink = document.createElement("a");
pageLink.href = "#";
if (i === currentPage) {
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();
const groupFilters = Array.from(
document.querySelectorAll('input[type="checkbox"].device-filter:checked')
).map((checkbox) => checkbox.value);
filteredDevices = devices.filter((device) => {
const searchString =
`${device.group} ${device.name} ${device.id} ${device.place} ${device.numberTS} ${device.time} ${device.place} ${device.geo} ${device.serial}`.toLowerCase();
const matchGroup =
groupFilters.length === 0 || groupFilters.includes(device.group) || groupFilters.includes(device.serial);
const matchSearch = !searchValue || searchString.includes(searchValue);
// Фильтр по временному диапазону
let matchTimeRange = true;
if (timeRangeStart) {
const startTimestamp = new Date(timeRangeStart).getTime();
const deviceTimestamp = parseTableTime(device.time); // Преобразование времени из таблицы
matchTimeRange = startTimestamp <= deviceTimestamp;
}
if (timeRangeEnd) {
const endTimestamp = new Date(timeRangeEnd).getTime();
const deviceTimestamp = parseTableTime(device.time); // Преобразование времени из таблицы
matchTimeRange = matchTimeRange && deviceTimestamp <= endTimestamp;
}
return matchGroup && 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);
});
// Обработчик изменения значения в поле начала временного диапазона
const timeRangeStartInput = document.getElementById("timeRangeStart");
timeRangeStartInput.addEventListener("change", () => {
timeRangeStart = timeRangeStartInput.value;
console.log(timeRangeStart);
applyFilterAndSearch();
});
// Обработчик изменения значения в поле конца временного диапазона
const timeRangeEndInput = document.getElementById("timeRangeEnd");
timeRangeEndInput.addEventListener("change", () => {
timeRangeEnd = timeRangeEndInput.value;
console.log(timeRangeEnd);
applyFilterAndSearch();
});
createTable();
createPagination();