<table id="assiduiteTable"> <thead> <tr> <th> <div> <span>Début</span> <a class="icon order" onclick="order('date_debut', assiduiteCallBack, this)"></a> </div> </th> <th> <div> <span>Fin</span> <a class="icon order" onclick="order('date_fin', assiduiteCallBack, this)"></a> </div> </th> <th> <div> <span>État</span> <a class="icon order" onclick="order('etat', assiduiteCallBack, this)"></a> </div> </th> <th> <div> <span>Module</span> <a class="icon order" onclick="order('moduleimpl_id', assiduiteCallBack, this)"></a> </div> </th> <th> <div> <span>Justifiée</span> <a class="icon order" onclick="order('est_just', assiduiteCallBack, this)"></a> </div> </th> </tr> </thead> <tbody id="tableBodyAssiduites"> </tbody> </table> <div id="paginationContainerAssiduites" class="pagination-container"> </div> <script> const paginationContainerAssiduites = document.getElementById("paginationContainerAssiduites"); let currentPageAssiduites = 1; let orderAssiduites = true; let filterAssiduites = { columns: [ "entry_date", "date_debut", "date_fin", "etat", "moduleimpl_id", "est_just" ], filters: {} } const tableBodyAssiduites = document.getElementById("tableBodyAssiduites"); function assiduiteCallBack(assi) { assi = filterArray(assi, filterAssiduites.filters) renderTableAssiduites(currentPageAssiduites, assi); renderPaginationButtons(assi); } const moduleimpls = {} function getModuleImpl(id) { if (id == null || id == undefined) { moduleimpls[id] = "Pas de module" } if (id in moduleimpls) { return moduleimpls[id]; } const url_api = getUrl() + `/api/moduleimpl/${id}`; sync_get(url_api, (data) => { moduleimpls[id] = `${data.module.code} ${data.module.abbrev}`; }, (data) => { moduleimpls[id] = "Pas de module" }); return moduleimpls[id]; } function renderTableAssiduites(page, assiduités) { generateTableHead(filterAssiduites.columns, true) tableBodyAssiduites.innerHTML = ""; const start = (page - 1) * itemsPerPage; const end = start + itemsPerPage; assiduités.slice(start, end).forEach((assiduite) => { const row = document.createElement("tr"); row.setAttribute('type', "assiduite"); row.setAttribute('obj_id', assiduite.assiduite_id); const etat = assiduite.etat.toLowerCase(); row.classList.add(`l-${etat}`); filterAssiduites.columns.forEach((k) => { const td = document.createElement('td'); if (k.indexOf('date') != -1) { td.textContent = moment.tz(assiduite[k], TIMEZONE).format(`DD/MM/Y HH:mm`) } else if (k.indexOf("module") != -1) { td.textContent = getModuleImpl(assiduite.moduleimpl_id); } else if (k.indexOf('est_just') != -1) { td.textContent = assiduite[k] ? "Oui" : "Non" } else { td.textContent = assiduite[k].capitalize() } row.appendChild(td) }) row.addEventListener("contextmenu", (e) => { e.preventDefault(); selectedRow = e.target.parentElement; contextMenu.style.top = `${e.clientY}px`; contextMenu.style.left = `${e.clientX}px`; contextMenu.style.display = "block"; console.log(selectedRow); }); tableBodyAssiduites.appendChild(row); }); updateActivePaginationButton(); } </script>