Select full list devices

This commit is contained in:
RubenPX 2022-05-03 12:13:15 +02:00
parent d7f7e4d2e5
commit 9d9514e68b
2 changed files with 20 additions and 0 deletions

View File

@ -76,6 +76,7 @@ class TableController {
*/ */
window.addEventListener("DOMContentLoaded", () => { window.addEventListener("DOMContentLoaded", () => {
const btnSelectAll = document.getElementById("SelectAllBTN"); const btnSelectAll = document.getElementById("SelectAllBTN");
const alertInfoDevices = document.getElementById("select-devices-info");
function itemListCheckChanged() { function itemListCheckChanged() {
const listDevices = TableController.getAllDevicesInCurrentPage() const listDevices = TableController.getAllDevicesInCurrentPage()
@ -84,11 +85,20 @@ window.addEventListener("DOMContentLoaded", () => {
if (isAllChecked.every(bool => bool == true)) { if (isAllChecked.every(bool => bool == true)) {
btnSelectAll.checked = true; btnSelectAll.checked = true;
btnSelectAll.indeterminate = false; btnSelectAll.indeterminate = false;
alertInfoDevices.innerHTML = `Selected devices: ${TableController.getSelectedDevices().length}
${
TableController.getAllDevices().length != TableController.getSelectedDevices().length
? `<a href="#" class="ml-3">Select all devices (${TableController.getAllDevices().length})</a>`
: ""
}`;
alertInfoDevices.classList.remove("d-none");
} else if (isAllChecked.every(bool => bool == false)) { } else if (isAllChecked.every(bool => bool == false)) {
btnSelectAll.checked = false; btnSelectAll.checked = false;
btnSelectAll.indeterminate = false; btnSelectAll.indeterminate = false;
alertInfoDevices.classList.add("d-none")
} else { } else {
btnSelectAll.indeterminate = true; btnSelectAll.indeterminate = true;
alertInfoDevices.classList.add("d-none")
} }
} }
@ -99,6 +109,12 @@ window.addEventListener("DOMContentLoaded", () => {
btnSelectAll.addEventListener("click", event => { btnSelectAll.addEventListener("click", event => {
const checkedState = event.target.checked; const checkedState = event.target.checked;
TableController.getAllDevicesInCurrentPage().forEach(ckeckbox => { ckeckbox.checked = checkedState }); TableController.getAllDevicesInCurrentPage().forEach(ckeckbox => { ckeckbox.checked = checkedState });
itemListCheckChanged()
})
alertInfoDevices.addEventListener("click", () => {
TableController.getAllDevices().forEach(ckeckbox => { ckeckbox.checked = true });
itemListCheckChanged()
}) })
// https://github.com/fiduswriter/Simple-DataTables/wiki/Events // https://github.com/fiduswriter/Simple-DataTables/wiki/Events

View File

@ -297,6 +297,10 @@
</div> </div>
{% endif %} {% endif %}
<div id="select-devices-info" class="alert alert-info mb-0 mt-3 d-none" role="alert">
If this text is showing is because there are an error
</div>
<div class="tab-content pt-2"> <div class="tab-content pt-2">
<form method="get"> <form method="get">
<div class="d-flex mt-4 mb-4"> <div class="d-flex mt-4 mb-4">