56 lines
1.7 KiB
JavaScript
56 lines
1.7 KiB
JavaScript
/* table_editor, par Sébastien L.
|
|
*/
|
|
|
|
/******************************/
|
|
/* Gestion de la modification */
|
|
/******************************/
|
|
|
|
function editableOnOff() {
|
|
if (this.classList.toggle("active")) {
|
|
document.querySelectorAll("[data-editable=true]").forEach(cellule => {
|
|
cellule.contentEditable = true;
|
|
cellule.addEventListener("input", delayBeforeSave);
|
|
cellule.addEventListener("blur", save);
|
|
})
|
|
} else {
|
|
document.querySelectorAll("[data-editable=true]").forEach(cellule => {
|
|
cellule.removeAttribute("contentEditable");
|
|
cellule.removeEventListener("input", delayBeforeSave);
|
|
cellule.removeEventListener("blur", save);
|
|
})
|
|
}
|
|
}
|
|
|
|
let timeout = 0;
|
|
|
|
function delayBeforeSave() {
|
|
clearTimeout(timeout);
|
|
document.querySelector(".wait").classList.add("go");
|
|
timeout = setTimeout(() => { save(this) }, 2000);
|
|
}
|
|
|
|
/*****************************/
|
|
/* Mise en place des données */
|
|
/*****************************/
|
|
function build_table(data) {
|
|
let output = "";
|
|
|
|
data.forEach((cellule) => {
|
|
output += `
|
|
<div
|
|
class="${cellule.style}"
|
|
data-editable="${cellule.editable || "false"}"
|
|
data-module_id="${cellule.module_id}"
|
|
data-ue_id="${cellule.ue_id}"
|
|
style="
|
|
--x:${cellule.x};
|
|
--y:${cellule.y};
|
|
--nbX:${cellule.nbX};
|
|
--nbY: ${cellule.nbY};
|
|
">
|
|
${cellule.data}
|
|
</div>`;
|
|
})
|
|
document.querySelector(".tableau").innerHTML = output;
|
|
document.querySelector(".modifOnOff").addEventListener("click", editableOnOff);
|
|
} |