ScoDoc-PE/app/templates/assiduites/widgets/tableau_assi.j2

122 lines
4.1 KiB
Plaintext
Raw Normal View History

2023-06-20 15:50:56 +02:00
<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>