first commit
This commit is contained in:
Ivan
132
static/scripts/graphs.js
Normal file
132
static/scripts/graphs.js
Normal file
@ -0,0 +1,132 @@
|
||||
Chart.defaults.color = "rgba(0, 0, 0, 0.4)";
|
||||
Chart.defaults.font.size = 15;
|
||||
Chart.defaults.font.weight = 400;
|
||||
|
||||
var warningsData = {
|
||||
labels: [
|
||||
"9.03",
|
||||
"10.03",
|
||||
"11.03",
|
||||
"12.03",
|
||||
"13.03",
|
||||
"14.03",
|
||||
"15.03",
|
||||
"16.03",
|
||||
"17.03",
|
||||
"18.03",
|
||||
"19.03",
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
label: "Актуальный период",
|
||||
backgroundColor: "rgba(235, 146, 139, 1)",
|
||||
borderWidth: 0,
|
||||
borderRadius: 9,
|
||||
hoverBackgroundColor: "rgba(235, 146, 139, 0.8)",
|
||||
data: [1150, 1400, 2100, 900, 1200, 400, 950, 1400, 1250, 1150, 1650],
|
||||
grouped: false,
|
||||
},
|
||||
{
|
||||
label: "Предыдущий период",
|
||||
backgroundColor: "rgba(235, 146, 139, 0.5)",
|
||||
borderWidth: 0,
|
||||
borderRadius: 9,
|
||||
hoverBackgroundColor: "rgba(235, 146, 139, 0.3)",
|
||||
data: [2700, 1850, 1100, 1550, 2300, 2200, 1650, 1200, 1500, 1850, 800],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
var warningsOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
y: {
|
||||
grid: {
|
||||
display: true,
|
||||
color: "#D9D9D9",
|
||||
},
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
new Chart("chart-warnings", {
|
||||
type: "bar",
|
||||
options: warningsOptions,
|
||||
data: warningsData,
|
||||
});
|
||||
|
||||
var positionsData = {
|
||||
labels: [
|
||||
"9.03",
|
||||
"10.03",
|
||||
"11.03",
|
||||
"12.03",
|
||||
"13.03",
|
||||
"14.03",
|
||||
"15.03",
|
||||
"16.03",
|
||||
"17.03",
|
||||
"18.03",
|
||||
"19.03",
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
label: "Позиционирование",
|
||||
borderColor: "#8086F9",
|
||||
fill: false,
|
||||
data: [
|
||||
480000, 390000, 407000, 400000, 435000, 460000, 385000, 410000, 380000,
|
||||
410000, 410000,
|
||||
],
|
||||
pointStyle: false,
|
||||
pointRadius: 25,
|
||||
pointHoverRadius: 25,
|
||||
tension: 0.4,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
var positionsOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
labelStep: "3",
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
y: {
|
||||
stacked: true,
|
||||
grid: {
|
||||
display: true,
|
||||
color: "#D9D9D9",
|
||||
},
|
||||
ticks: {
|
||||
stepSize: 50000,
|
||||
},
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
new Chart("chart-positions", {
|
||||
type: "line",
|
||||
data: positionsData,
|
||||
options: positionsOptions,
|
||||
});
|
||||
10965
static/scripts/jquery.min.js
vendored
Normal file
10965
static/scripts/jquery.min.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
285
static/scripts/table-drivers.js
Normal file
285
static/scripts/table-drivers.js
Normal file
@ -0,0 +1,285 @@
|
||||
const devices = [
|
||||
{
|
||||
id: "2",
|
||||
group: "2-device-2",
|
||||
driverID: "233",
|
||||
name: "Иван",
|
||||
surname: "Спахов",
|
||||
numberTS: "008803559E",
|
||||
phone: "+7 999 123 45 67",
|
||||
mail: "spahov@mail.ru",
|
||||
driverCard: "RUD0000000000111",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
group: "2-device-1",
|
||||
driverID: "782",
|
||||
name: "Александр",
|
||||
surname: "Богаченко",
|
||||
numberTS: "0088036B78",
|
||||
phone: "+7 989 443 23 46",
|
||||
mail: "bogachenko@mail.ru",
|
||||
driverCard: "RUD0000000000111",
|
||||
},
|
||||
{
|
||||
id: "7",
|
||||
group: "2-device-4",
|
||||
driverID: "2943",
|
||||
name: "Михаил",
|
||||
surname: "Гукасян",
|
||||
numberTS: "009800852A",
|
||||
phone: "+7 909 133 55 67",
|
||||
mail: "agucasyan@mail.ru",
|
||||
driverCard: "RUD0000000000111",
|
||||
},
|
||||
{
|
||||
id: "8",
|
||||
group: "2-device-4",
|
||||
driverID: "87",
|
||||
name: "Марат",
|
||||
surname: "Шмидт",
|
||||
numberTS: "009800858D",
|
||||
phone: "+7 915 555 45 89",
|
||||
mail: "shmidt@mail.ru",
|
||||
driverCard: "RUD0000000000111",
|
||||
},
|
||||
{
|
||||
id: "9",
|
||||
group: "1-device-1",
|
||||
driverID: "823",
|
||||
name: "Никита",
|
||||
surname: "Ильяшенко",
|
||||
numberTS: "00980084FD",
|
||||
phone: "+7 909 123 45 67",
|
||||
mail: "iluashenko@mail.ru",
|
||||
driverCard: "RUD0000000000111",
|
||||
},
|
||||
{
|
||||
id: "10",
|
||||
group: "2-device-4",
|
||||
driverID: "15",
|
||||
name: "Валерий",
|
||||
surname: "Сараев",
|
||||
numberTS: "0088036B7F",
|
||||
phone: "+7 909 123 45 67",
|
||||
mail: "saraev@mail.ru",
|
||||
driverCard: "RUD0000000000111",
|
||||
},
|
||||
{
|
||||
id: "11",
|
||||
group: "2-device-3",
|
||||
driverID: "423",
|
||||
name: "Александр",
|
||||
surname: "Курочкин",
|
||||
numberTS: "00880302CD",
|
||||
phone: "+7 999 123 45 67",
|
||||
mail: "curochkin@mail.ru",
|
||||
driverCard: "RUD0000000000111",
|
||||
},
|
||||
{
|
||||
id: "12",
|
||||
group: "1-device-2",
|
||||
driverID: "6456",
|
||||
name: "Екатерина",
|
||||
surname: "Миненко",
|
||||
numberTS: "008802A035",
|
||||
phone: "+7 999 123 45 67",
|
||||
mail: "minenko@mail.ru",
|
||||
driverCard: "RUD0000000000111",
|
||||
},
|
||||
{
|
||||
id: "13",
|
||||
group: "3-device-1",
|
||||
driverID: "887",
|
||||
name: "Виталий",
|
||||
surname: "Гаспарян",
|
||||
numberTS: "008802A96A",
|
||||
phone: "+7 999 123 45 67",
|
||||
mail: "gosparyan@mail.ru",
|
||||
driverCard: "RUD0000000000111",
|
||||
},
|
||||
{
|
||||
id: "15",
|
||||
group: "1-device-1",
|
||||
driverID: "742",
|
||||
name: "Светлана",
|
||||
surname: "Амусова",
|
||||
numberTS: "00880302C7",
|
||||
phone: "+7 999 123 45 67",
|
||||
mail: "amusova@mail.ru",
|
||||
driverCard: "RUD0000000000111",
|
||||
},
|
||||
];
|
||||
|
||||
// Получаем высоту таблицы и определяем, сколько строк помещается на странице
|
||||
let currentPage = 1;
|
||||
let tableHeight = document.getElementById("table-area").offsetHeight;
|
||||
let rowHeight = 60;
|
||||
let rowsPerPage = Math.floor(tableHeight / rowHeight) - 2;
|
||||
let filteredDevices = [...devices];
|
||||
|
||||
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 driverID = document.createElement("td");
|
||||
driverID.textContent = device.driverID;
|
||||
row.appendChild(driverID);
|
||||
const name = document.createElement("td");
|
||||
name.textContent = device.name;
|
||||
row.appendChild(name);
|
||||
const surname = document.createElement("td");
|
||||
surname.textContent = device.surname;
|
||||
row.appendChild(surname);
|
||||
const numberTS = document.createElement("td");
|
||||
numberTS.textContent = device.numberTS;
|
||||
row.appendChild(numberTS);
|
||||
const phone = document.createElement("td");
|
||||
phone.textContent = device.phone;
|
||||
row.appendChild(phone);
|
||||
const mail = document.createElement("td");
|
||||
mail.textContent = device.mail;
|
||||
row.appendChild(mail);
|
||||
const driverCard = document.createElement("td");
|
||||
driverCard.textContent = device.driverCard;
|
||||
row.appendChild(driverCard);
|
||||
|
||||
// Добавляем кнопку удаления после каждого ряда
|
||||
const trashCell = document.createElement("td");
|
||||
trashCell.setAttribute("class", "optionsCell");
|
||||
const trashButton = document.createElement("button");
|
||||
trashButton.setAttribute("class", "trash");
|
||||
trashButton.value = `delete-device-${device.id}`;
|
||||
trashButton.id = `delete-device-${device.id}`;
|
||||
const optionsButton = document.createElement("button");
|
||||
optionsButton.setAttribute("class", "options");
|
||||
optionsButton.value = `options-device-${device.id}`;
|
||||
optionsButton.id = `options-device-${device.id}`;
|
||||
|
||||
trashCell.appendChild(optionsButton);
|
||||
trashCell.appendChild(trashButton);
|
||||
|
||||
row.appendChild(trashCell);
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
};
|
||||
|
||||
window.addEventListener("resize", function (event) {
|
||||
tableHeight = document.getElementById("table-area").offsetHeight;
|
||||
rowHeight = 60;
|
||||
rowsPerPage = Math.floor(tableHeight / rowHeight) - 2;
|
||||
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.driverID} ${device.name} ${device.number} ${device.surname} ${device.numberTS} ${device.phone} ${device.mail} ${device.driverCard}`.toLowerCase();
|
||||
const matchGroup =
|
||||
groupFilters.length === 0 || groupFilters.includes(device.group);
|
||||
const matchSearch = !searchValue || searchString.includes(searchValue);
|
||||
return matchGroup && matchSearch;
|
||||
});
|
||||
|
||||
currentPage = 1;
|
||||
createTable();
|
||||
createPagination();
|
||||
};
|
||||
|
||||
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();
|
||||
313
static/scripts/table-reports.js
Normal file
313
static/scripts/table-reports.js
Normal file
@ -0,0 +1,313 @@
|
||||
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();
|
||||
284
static/scripts/table-updates.js
Normal file
284
static/scripts/table-updates.js
Normal file
@ -0,0 +1,284 @@
|
||||
const devices = [
|
||||
{
|
||||
id: "1",
|
||||
group: "0001",
|
||||
name: "Трамваи",
|
||||
numberTS: "008803559E",
|
||||
time: "12.03.23 17:33",
|
||||
file: "X5H_V262_T191112.80_R0010_FS5.0",
|
||||
status: 100,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
group: "0001",
|
||||
name: "Электробусы",
|
||||
numberTS: "0088036B78",
|
||||
time: "12.03.23 17:33",
|
||||
file: "A5H_V262.B107_T220801.70_C3920",
|
||||
status: 60,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
group: "0002",
|
||||
name: "Трамваи",
|
||||
numberTS: "009800852A",
|
||||
time: "12.03.23 17:33",
|
||||
file: "A5H_V262.B107_T220801.70_C3920",
|
||||
status: 90,
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
group: "0003",
|
||||
name: "Троллейбусы",
|
||||
numberTS: "009800858D",
|
||||
time: "12.03.23 17:33",
|
||||
file: "A5H_V262.B107_T220801.70_C3920",
|
||||
status: 100,
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
group: "0003",
|
||||
name: "Электробусы",
|
||||
numberTS: "00980084FD",
|
||||
time: "12.03.23 17:33",
|
||||
file: "A5H_V262.B107_T220801.70_C3920",
|
||||
status: 100,
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
group: "0004",
|
||||
name: "Трамваи",
|
||||
numberTS: "0088036B7F",
|
||||
time: "12.03.23 17:33",
|
||||
file: "X5H_V262_T191112.80_R0010_FS5.0",
|
||||
status: 100,
|
||||
},
|
||||
{
|
||||
id: "7",
|
||||
group: "0005",
|
||||
name: "Старые ТС",
|
||||
numberTS: "00880302CD",
|
||||
time: "12.03.23 17:33",
|
||||
file: "X5H_V262_T191112.80_R0010_FS5.0",
|
||||
status: 20,
|
||||
},
|
||||
{
|
||||
id: "8",
|
||||
group: "0006",
|
||||
name: "Старые ТС",
|
||||
numberTS: "008802A035",
|
||||
time: "12.03.23 17:33",
|
||||
file: "X5H_V262_T191112.80_R0010_FS5.0",
|
||||
status: 100,
|
||||
},
|
||||
{
|
||||
id: "9",
|
||||
group: "0007",
|
||||
name: "Трамваи",
|
||||
numberTS: "008802A96A",
|
||||
time: "12.03.23 17:33",
|
||||
file: "X5H_V262_T191112.80_R0010_FS5.0",
|
||||
status: 100,
|
||||
},
|
||||
{
|
||||
id: "10",
|
||||
group: "0002",
|
||||
name: "Старые ТС",
|
||||
numberTS: "00880302C7",
|
||||
time: "12.03.23 17:33",
|
||||
file: "A5H_V262.B107_T220801.70_C3920",
|
||||
status: 35,
|
||||
},
|
||||
];
|
||||
|
||||
// Получаем высоту таблицы и определяем, сколько строк помещается на странице
|
||||
let currentPage = 1;
|
||||
let tableHeight = document.getElementById("table-area").offsetHeight;
|
||||
let rowHeight = 60;
|
||||
let rowsPerPage = Math.floor(tableHeight / rowHeight) - 3;
|
||||
let filteredDevices = [...devices];
|
||||
|
||||
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 numberTS = document.createElement("td");
|
||||
numberTS.textContent = device.numberTS;
|
||||
row.appendChild(numberTS);
|
||||
|
||||
// const statusСell = document.createElement("td");
|
||||
// const status = document.createElement("div");
|
||||
// status.setAttribute("class", "status");
|
||||
// if (device.status === 100) {
|
||||
// trashButton.setAttribute("class", "clockwise");
|
||||
// }
|
||||
// row.appendChild(statusСell);
|
||||
|
||||
const status = document.createElement("div");
|
||||
status.setAttribute("class", "status");
|
||||
status.style.width = "80px";
|
||||
status.style.backgroundColor = "rgba(0, 0, 0, 0.05)";
|
||||
|
||||
const fill = document.createElement("div");
|
||||
if (device.status === 100) {
|
||||
fill.style.width = `${device.status}%`;
|
||||
fill.style.height = "100%";
|
||||
fill.style.backgroundColor = "#32D74B";
|
||||
fill.style.borderRadius = "5px";
|
||||
} else {
|
||||
fill.style.width = `${device.status}%`;
|
||||
fill.style.height = "100%";
|
||||
fill.style.backgroundColor = "#FF453A";
|
||||
fill.style.borderRadius = "5px 0px 0px 5px";
|
||||
}
|
||||
|
||||
status.appendChild(fill);
|
||||
|
||||
const statusСell = document.createElement("td");
|
||||
statusСell.title = `Статус: ${device.status}%`;
|
||||
statusСell.appendChild(status);
|
||||
row.appendChild(statusСell);
|
||||
|
||||
const time = document.createElement("td");
|
||||
time.textContent = device.time;
|
||||
row.appendChild(time);
|
||||
const file = document.createElement("td");
|
||||
file.textContent = device.file;
|
||||
row.appendChild(file);
|
||||
|
||||
// Добавляем кнопку удаления после каждого ряда
|
||||
const trashCell = document.createElement("td");
|
||||
const trashButton = document.createElement("button");
|
||||
trashButton.setAttribute("class", "clockwise");
|
||||
trashButton.value = `delete-device-${device.id}`;
|
||||
trashButton.id = `delete-device-${device.id}`;
|
||||
|
||||
trashCell.appendChild(trashButton);
|
||||
|
||||
row.appendChild(trashCell);
|
||||
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.driverID} ${device.name} ${device.number} ${device.surname} ${device.numberTS} ${device.phone} ${device.mail} ${device.driverCard}`.toLowerCase();
|
||||
const matchGroup =
|
||||
groupFilters.length === 0 || groupFilters.includes(device.group);
|
||||
const matchSearch = !searchValue || searchString.includes(searchValue);
|
||||
return matchGroup && matchSearch;
|
||||
});
|
||||
|
||||
currentPage = 1;
|
||||
createTable();
|
||||
createPagination();
|
||||
};
|
||||
|
||||
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();
|
||||
340
static/scripts/table.js
Normal file
340
static/scripts/table.js
Normal file
@ -0,0 +1,340 @@
|
||||
const devices = [
|
||||
{
|
||||
id: "1",
|
||||
group: "2-device-1",
|
||||
name: "Трамваи",
|
||||
plate: "AB1234",
|
||||
serial: "008803559E",
|
||||
sim: "1234567890",
|
||||
channels: 12,
|
||||
ip: "192.168.0.1",
|
||||
port: 17891,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
group: "2-device-2",
|
||||
name: "Электробусы",
|
||||
plate: "BC2345",
|
||||
serial: "008803559E",
|
||||
sim: "2345678901",
|
||||
channels: 12,
|
||||
ip: "192.168.0.2",
|
||||
port: 17891,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
group: "2-device-1",
|
||||
name: "Трамваи",
|
||||
plate: "CD3456",
|
||||
serial: "009800852A",
|
||||
sim: "3456789012",
|
||||
channels: 16,
|
||||
ip: "192.168.0.3",
|
||||
port: 17891,
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
group: "2-device-3",
|
||||
name: "Троллейбусы",
|
||||
plate: "DE4567",
|
||||
serial: "009800858D",
|
||||
sim: "4567890123",
|
||||
channels: 12,
|
||||
ip: "192.168.0.4",
|
||||
port: 17891,
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
group: "2-device-2",
|
||||
name: "Электробусы",
|
||||
plate: "EF5678",
|
||||
serial: "00980084FD",
|
||||
sim: "5678901234",
|
||||
channels: 16,
|
||||
ip: "192.168.0.5",
|
||||
port: 17891,
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
group: "2-device-1",
|
||||
name: "Трамваи",
|
||||
plate: "FG6789",
|
||||
serial: "0088036B7F",
|
||||
sim: "6789012345",
|
||||
channels: 16,
|
||||
ip: "192.168.0.6",
|
||||
port: 17891,
|
||||
},
|
||||
{
|
||||
id: "7",
|
||||
group: "2-device-4",
|
||||
name: "Старые ТС",
|
||||
plate: "GH7890",
|
||||
serial: "00880302CD",
|
||||
sim: "7890123456",
|
||||
channels: 12,
|
||||
ip: "192.168.0.7",
|
||||
port: 17891,
|
||||
},
|
||||
{
|
||||
id: "8",
|
||||
group: "2-device-4",
|
||||
name: "Старые ТС",
|
||||
plate: "HI8901",
|
||||
serial: "008802A035",
|
||||
sim: "8901234567",
|
||||
channels: 12,
|
||||
ip: "192.168.0.8",
|
||||
port: 17891,
|
||||
},
|
||||
{
|
||||
id: "9",
|
||||
group: "1-device-1",
|
||||
name: "Трамваи",
|
||||
plate: "IJ9012",
|
||||
serial: "008802A96A",
|
||||
sim: "9012345678",
|
||||
channels: 16,
|
||||
ip: "192.168.0.9",
|
||||
port: 17891,
|
||||
},
|
||||
{
|
||||
id: "10",
|
||||
group: "2-device-4",
|
||||
name: "Старые ТС",
|
||||
plate: "КТ32376",
|
||||
serial: "00880302C7",
|
||||
sim: "7012345678",
|
||||
channels: 14,
|
||||
ip: "192.168.0.10",
|
||||
port: 17891,
|
||||
},
|
||||
{
|
||||
id: "11",
|
||||
group: "2-device-3",
|
||||
name: "Троллейбусы",
|
||||
plate: "ОА33277",
|
||||
serial: "008802A035",
|
||||
sim: "9034234348",
|
||||
channels: 12,
|
||||
ip: "192.168.0.11",
|
||||
port: 17891,
|
||||
},
|
||||
{
|
||||
id: "12",
|
||||
group: "1-device-2",
|
||||
name: "Маршрутки",
|
||||
plate: "КЛ987102",
|
||||
serial: "009800852A",
|
||||
sim: "9023345678",
|
||||
channels: 10,
|
||||
ip: "192.168.0.12",
|
||||
port: 17891,
|
||||
},
|
||||
{
|
||||
id: "13",
|
||||
group: "3-device-1",
|
||||
name: "Троллейбусы",
|
||||
plate: "КЛ987102",
|
||||
serial: "0088036B78",
|
||||
sim: "9023345678",
|
||||
channels: 8,
|
||||
ip: "192.168.0.13",
|
||||
port: 17891,
|
||||
},
|
||||
{
|
||||
id: "14",
|
||||
group: "3-device-1",
|
||||
name: "Маршрутки",
|
||||
plate: "КЛ987102",
|
||||
serial: "0088036B7F",
|
||||
sim: "9023345678",
|
||||
channels: 8,
|
||||
ip: "192.168.0.14",
|
||||
port: 17891,
|
||||
},
|
||||
{
|
||||
id: "15",
|
||||
group: "1-device-1",
|
||||
name: "Трамваи",
|
||||
plate: "КЛ987102",
|
||||
serial: "008802A96A",
|
||||
sim: "9023345678",
|
||||
channels: 16,
|
||||
ip: "192.168.0.15",
|
||||
port: 17891,
|
||||
},
|
||||
];
|
||||
|
||||
// Получаем высоту таблицы и определяем, сколько строк помещается на странице
|
||||
let currentPage = 1;
|
||||
let tableHeight = document.getElementById("table-area").offsetHeight;
|
||||
let rowHeight = 60;
|
||||
let rowsPerPage = Math.floor(tableHeight / rowHeight) - 2;
|
||||
let filteredDevices = [...devices];
|
||||
|
||||
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 plate = document.createElement("td");
|
||||
plate.textContent = device.plate;
|
||||
row.appendChild(plate);
|
||||
const serial = document.createElement("td");
|
||||
serial.textContent = device.serial;
|
||||
row.appendChild(serial);
|
||||
const sim = document.createElement("td");
|
||||
sim.textContent = device.sim;
|
||||
row.appendChild(sim);
|
||||
const channels = document.createElement("td");
|
||||
channels.textContent = device.channels;
|
||||
row.appendChild(channels);
|
||||
const ip = document.createElement("td");
|
||||
ip.textContent = device.ip;
|
||||
row.appendChild(ip);
|
||||
const port = document.createElement("td");
|
||||
port.textContent = device.port;
|
||||
row.appendChild(port);
|
||||
|
||||
// Добавляем кнопку удаления после каждого ряда
|
||||
const trashCell = document.createElement("td");
|
||||
trashCell.setAttribute("class", "optionsCell");
|
||||
const trashButton = document.createElement("button");
|
||||
trashButton.setAttribute("class", "trash");
|
||||
trashButton.value = `delete-device-${device.id}`;
|
||||
trashButton.id = `delete-device-${device.id}`;
|
||||
const optionsButton = document.createElement("button");
|
||||
optionsButton.setAttribute("class", "options");
|
||||
optionsButton.value = `options-device-${device.id}`;
|
||||
optionsButton.id = `options-device-${device.id}`;
|
||||
|
||||
trashCell.appendChild(optionsButton);
|
||||
trashCell.appendChild(trashButton);
|
||||
|
||||
row.appendChild(trashCell);
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
};
|
||||
|
||||
window.addEventListener("resize", function (event) {
|
||||
tableHeight = document.getElementById("table-area").offsetHeight;
|
||||
rowHeight = 60;
|
||||
rowsPerPage = Math.floor(tableHeight / rowHeight) - 2;
|
||||
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.plate} ${device.number} ${device.serial} ${device.sim} ${device.channels} ${device.ip} ${device.port}`.toLowerCase();
|
||||
const matchGroup =
|
||||
groupFilters.length === 0 || groupFilters.includes(device.group);
|
||||
const matchSearch = !searchValue || searchString.includes(searchValue);
|
||||
return matchGroup && matchSearch;
|
||||
});
|
||||
|
||||
currentPage = 1;
|
||||
createTable();
|
||||
createPagination();
|
||||
};
|
||||
|
||||
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();
|
||||
Reference in New Issue
Block a user