delete drivers, some fixes, table updates
This commit is contained in:
@ -1,114 +0,0 @@
|
||||
$("#continue-main").click(function () {
|
||||
document.getElementById("stage-details").checked = true;
|
||||
});
|
||||
|
||||
$("#continue-main-edit").click(function () {
|
||||
document.getElementById("stage-details-edit").checked = true;
|
||||
});
|
||||
|
||||
const container = document.getElementById("new-parameters");
|
||||
const content1 = document.getElementById("main");
|
||||
const content2 = document.getElementById("details");
|
||||
const btn1 = document.getElementById("continue-main");
|
||||
const content3 = document.getElementById("main-edit");
|
||||
const content4 = document.getElementById("details-edit");
|
||||
const btn2 = document.getElementById("continue-main-edit");
|
||||
const radioButtons = document.querySelectorAll(
|
||||
'input[type="radio"][name="newStage"]'
|
||||
);
|
||||
const radioButtonsEdit = document.querySelectorAll(
|
||||
'input[type="radio"][name="newStageEdit"]'
|
||||
);
|
||||
const duration = 100;
|
||||
|
||||
let activeContent = content1;
|
||||
|
||||
function switchContent(newContent) {
|
||||
fadeOut(activeContent, () => {
|
||||
fadeIn(newContent);
|
||||
activeContent = newContent;
|
||||
});
|
||||
}
|
||||
|
||||
function fadeIn(element) {
|
||||
element.style.opacity = 0;
|
||||
element.style.display = "block";
|
||||
let start = performance.now();
|
||||
|
||||
function animate(time) {
|
||||
let timeFraction = (time - start) / duration;
|
||||
if (timeFraction > 1) {
|
||||
element.style.opacity = 1;
|
||||
} else {
|
||||
element.style.opacity = timeFraction;
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
function fadeOut(element, callback) {
|
||||
element.style.opacity = 1;
|
||||
let start = performance.now();
|
||||
|
||||
function animate(time) {
|
||||
let timeFraction = (time - start) / duration;
|
||||
if (timeFraction > 1) {
|
||||
element.style.opacity = 0;
|
||||
element.style.display = "none";
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
} else {
|
||||
element.style.opacity = 1 - timeFraction;
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
btn1.addEventListener("click", () => {
|
||||
if (activeContent === content1) {
|
||||
switchContent(content2);
|
||||
} else {
|
||||
switchContent(content1);
|
||||
}
|
||||
});
|
||||
|
||||
btn2.addEventListener("click", () => {
|
||||
if (activeContent === content3) {
|
||||
switchContent(content4);
|
||||
} else {
|
||||
switchContent(content3);
|
||||
}
|
||||
});
|
||||
|
||||
for (let radioButton of radioButtons) {
|
||||
radioButton.addEventListener("change", () => {
|
||||
if (radioButton.value === "main") {
|
||||
switchContent(content1);
|
||||
} else if (radioButton.value === "details") {
|
||||
switchContent(content2);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
for (let radioButton of radioButtonsEdit) {
|
||||
radioButton.addEventListener("change", () => {
|
||||
if (radioButton.value === "main") {
|
||||
switchContent(content3);
|
||||
} else if (radioButton.value === "details") {
|
||||
switchContent(content4);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function truncateText(select) {
|
||||
var maxLength = 30;
|
||||
var option = select.options[select.selectedIndex];
|
||||
if (option.text.length > maxLength) {
|
||||
option.text = option.text.substring(0, maxLength) + "...";
|
||||
}
|
||||
}
|
File diff suppressed because one or more lines are too long
@ -1,176 +0,0 @@
|
||||
|
||||
|
||||
// Получаем высоту таблицы и определяем, сколько строк помещается на странице
|
||||
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.id;
|
||||
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.setAttribute("onclick", `deleteDriver(${device.id})`);
|
||||
trashButton.value = `delete-device-${device.id}`;
|
||||
trashButton.id = `delete-device-${device.id}`;
|
||||
const optionsButton = document.createElement("button");
|
||||
optionsButton.setAttribute("onclick", `openEdit(${device.id})`);
|
||||
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();
|
@ -21,23 +21,6 @@ const createTable = () => {
|
||||
|
||||
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");
|
||||
|
@ -19,23 +19,6 @@ const createTable = () => {
|
||||
|
||||
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");
|
||||
|
Reference in New Issue
Block a user