314 lines
10 KiB
JavaScript
314 lines
10 KiB
JavaScript
const devices = [
|
||
{
|
||
id: "1",
|
||
group: "0001",
|
||
name: "Разговор по телефону",
|
||
reportID: "354",
|
||
plate: "AO30877",
|
||
numberTS: "008803559E",
|
||
time: "12.03.23 17:33",
|
||
place: "59.852371, 30.344543",
|
||
},
|
||
{
|
||
id: "2",
|
||
group: "0001",
|
||
name: "Водитель зевает",
|
||
reportID: "353",
|
||
plate: "AO64377",
|
||
numberTS: "0088036B78",
|
||
time: "12.03.23 14:26",
|
||
place: "60.058236, 30.315283",
|
||
},
|
||
{
|
||
id: "3",
|
||
group: "0002",
|
||
name: "Усталость",
|
||
reportID: "352",
|
||
plate: "ГД44377",
|
||
numberTS: "009800852A",
|
||
time: "12.03.23 10:07",
|
||
place: "59.878256, 30.31962",
|
||
},
|
||
{
|
||
id: "4",
|
||
group: "0003",
|
||
name: "Водитель зевает",
|
||
reportID: "351",
|
||
plate: "УА86577",
|
||
numberTS: "009800858D",
|
||
time: "12.03.23 09:56",
|
||
place: "60.045981, 30.4134",
|
||
},
|
||
{
|
||
id: "5",
|
||
group: "0003",
|
||
name: "Разговор по телефону",
|
||
reportID: "350",
|
||
plate: "БВ74665",
|
||
numberTS: "00980084FD",
|
||
time: "11.03.23 20:43",
|
||
place: "59.83257, 30.389893",
|
||
},
|
||
{
|
||
id: "6",
|
||
group: "0004",
|
||
name: "Разговор по телефону",
|
||
reportID: "349",
|
||
plate: "ЦУ445101",
|
||
numberTS: "0088036B7F",
|
||
time: "11.03.23 19:17",
|
||
place: "59.959926, 30.42224",
|
||
},
|
||
{
|
||
id: "7",
|
||
group: "0005",
|
||
name: "Усталость",
|
||
reportID: "348",
|
||
plate: "КТ32376",
|
||
numberTS: "00880302CD",
|
||
time: "11.03.23 15:32",
|
||
place: "60.046346, 30.405688",
|
||
},
|
||
{
|
||
id: "8",
|
||
group: "0006",
|
||
name: "Курение за рулём",
|
||
reportID: "347",
|
||
plate: "ОА33277",
|
||
numberTS: "008802A035",
|
||
time: "11.03.23 15:06",
|
||
place: "59.956626, 30.234408",
|
||
},
|
||
{
|
||
id: "9",
|
||
group: "0007",
|
||
name: "Водитель отвлекся",
|
||
reportID: "346",
|
||
plate: "КЛ987102",
|
||
numberTS: "008802A96A",
|
||
time: "11.03.23 12:44",
|
||
place: "59.956626, 30.234408",
|
||
},
|
||
{
|
||
id: "10",
|
||
group: "0002",
|
||
name: "Водитель отвлекся",
|
||
reportID: "345",
|
||
plate: "АУ22377",
|
||
numberTS: "00880302C7",
|
||
time: "11.03.23 11:40",
|
||
place: "59.956626, 30.234408",
|
||
},
|
||
];
|
||
|
||
// Получаем высоту таблицы и определяем, сколько строк помещается на странице
|
||
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) => {
|
||
const row = document.createElement("tr");
|
||
// Добавляем чекбокс перед каждым рядом
|
||
const checkboxCell = document.createElement("td");
|
||
const checkbox = document.createElement("input");
|
||
checkbox.type = "checkbox";
|
||
checkbox.value = `device-${device.id}`;
|
||
checkbox.id = `device-${device.id}`;
|
||
|
||
const checkboxLabel = document.createElement("label");
|
||
checkboxLabel.setAttribute("for", `device-${device.id}`);
|
||
|
||
const checkboxDiv = document.createElement("div");
|
||
checkboxDiv.setAttribute("class", "checkmark");
|
||
checkboxLabel.appendChild(checkboxDiv);
|
||
|
||
checkboxCell.appendChild(checkbox);
|
||
checkboxCell.appendChild(checkboxLabel);
|
||
row.appendChild(checkboxCell);
|
||
|
||
// Добавляем ячейки с данными
|
||
const name = document.createElement("td");
|
||
name.textContent = device.name;
|
||
row.appendChild(name);
|
||
const reportID = document.createElement("td");
|
||
reportID.textContent = device.reportID;
|
||
row.appendChild(reportID);
|
||
const plate = document.createElement("td");
|
||
plate.textContent = device.plate;
|
||
row.appendChild(plate);
|
||
const numberTS = document.createElement("td");
|
||
numberTS.textContent = device.numberTS;
|
||
row.appendChild(numberTS);
|
||
const time = document.createElement("td");
|
||
time.textContent = device.time;
|
||
row.appendChild(time);
|
||
const place = document.createElement("td");
|
||
place.textContent = device.place;
|
||
row.appendChild(place);
|
||
|
||
// Добавляем кнопку удаления после каждого ряда
|
||
const shareCell = document.createElement("td");
|
||
const shareButton = document.createElement("button");
|
||
shareButton.setAttribute("class", "share");
|
||
shareButton.setAttribute("onclick", "location.href = '/reports/346';");
|
||
shareButton.value = `delete-device-${device.id}`;
|
||
shareButton.id = `delete-device-${device.id}`;
|
||
|
||
shareCell.appendChild(shareButton);
|
||
|
||
row.appendChild(shareCell);
|
||
tbody.appendChild(row);
|
||
});
|
||
};
|
||
|
||
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) {
|
||
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();
|
||
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.reportID} ${device.place} ${device.numberTS} ${device.time} ${device.place}`.toLowerCase();
|
||
const matchGroup =
|
||
groupFilters.length === 0 || groupFilters.includes(device.group);
|
||
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();
|