Selection devices by page

This commit is contained in:
RubenPX 2022-04-29 14:06:09 +02:00
parent b88a514edf
commit 8bbca0301b
2 changed files with 37 additions and 29 deletions

View File

@ -215,34 +215,6 @@
}, 200);
}
/**
* Select all functionality
*/
const btnSelectAll = document.getElementById("SelectAllBTN");
const tableListCheckboxes = document.querySelectorAll(".deviceSelect");
function itemListCheckChanged(event) {
const isAllChecked = Array.from(tableListCheckboxes).map(itm => itm.checked);
if (isAllChecked.every(bool => bool == true)) {
btnSelectAll.checked = true;
btnSelectAll.indeterminate = false;
} else if (isAllChecked.every(bool => bool == false)) {
btnSelectAll.checked = false;
btnSelectAll.indeterminate = false;
} else {
btnSelectAll.indeterminate = true;
}
}
tableListCheckboxes.forEach(item => {
item.addEventListener("click", itemListCheckChanged);
})
btnSelectAll.addEventListener("click", event => {
const checkedState = event.target.checked;
tableListCheckboxes.forEach(ckeckbox => {ckeckbox.checked = checkedState});
})
/**
* Avoid hide dropdown when user clicked inside
*/

View File

@ -34,7 +34,7 @@ class TableController {
/**
* @returns Selected inputs in current page from device list
*/
static getAllSelectedDevicesInCurrentPage() {
static getAllSelectedDevicesInCurrentPage() {
return this.#tableRowsPage()
.filter(element => element.querySelector("input").checked)
.map(element => element.querySelector("input"))
@ -71,6 +71,42 @@ class TableController {
}
}
/**
* Select all functionality
*/
window.addEventListener("DOMContentLoaded", () => {
const btnSelectAll = document.getElementById("SelectAllBTN");
function itemListCheckChanged() {
const listDevices = TableController.getAllDevicesInCurrentPage()
const isAllChecked = listDevices.map(itm => itm.checked);
if (isAllChecked.every(bool => bool == true)) {
btnSelectAll.checked = true;
btnSelectAll.indeterminate = false;
} else if (isAllChecked.every(bool => bool == false)) {
btnSelectAll.checked = false;
btnSelectAll.indeterminate = false;
} else {
btnSelectAll.indeterminate = true;
}
}
TableController.getAllDevices().forEach(item => {
item.addEventListener("click", itemListCheckChanged);
})
btnSelectAll.addEventListener("click", event => {
const checkedState = event.target.checked;
TableController.getAllDevicesInCurrentPage().forEach(ckeckbox => { ckeckbox.checked = checkedState });
})
// https://github.com/fiduswriter/Simple-DataTables/wiki/Events
table.on("datatable.page", () => itemListCheckChanged());
table.on("datatable.perpage", () => itemListCheckChanged());
table.on("datatable.update", () => itemListCheckChanged());
})
function deviceSelect() {
const devices_count = TableController.getSelectedDevices().length;
get_device_list();