MonScoDocEssai/app/static/js/table_editor.js

/* 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);
}