forked from ScoDoc/ScoDoc
330 lines
9.7 KiB
Django/Jinja
330 lines
9.7 KiB
Django/Jinja
{% include "assiduites/alert.j2" %}
|
|
{% include "assiduites/prompt.j2" %}
|
|
{% block app_content %}
|
|
|
|
<div class="pageContent">
|
|
|
|
<h2>Liste de l'assiduité et des justificatifs de <span class="rouge">{{sco.etud.nomprenom}}</span></h2>
|
|
|
|
<h3>Assiduités :</h3>
|
|
<table id="assiduiteTable">
|
|
<thead>
|
|
<tr>
|
|
<th>Début</th>
|
|
<th>Fin</th>
|
|
<th>État</th>
|
|
<th>Module</th>
|
|
<th>Justifiée</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tableBodyAssiduites">
|
|
</tbody>
|
|
</table>
|
|
<div id="paginationContainerAssiduites" class="pagination-container">
|
|
</div>
|
|
<h3>Justificatifs :</h3>
|
|
<table id="justificatifTable">
|
|
<thead>
|
|
<tr>
|
|
<th>Début</th>
|
|
<th>Fin</th>
|
|
<th>État</th>
|
|
<th>Raison</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tableBodyJustificatifs">
|
|
</tbody>
|
|
</table>
|
|
<div id="paginationContainerJustificatifs" class="pagination-container">
|
|
</div>
|
|
<ul id="contextMenu" class="context-menu">
|
|
<li id="detailOption">Detail</li>
|
|
<li id="editOption">Editer</li>
|
|
<li id="deleteOption">Supprimer</li>
|
|
</ul>
|
|
|
|
</div>
|
|
{% endblock app_content %}
|
|
|
|
<style>
|
|
.pageContent {
|
|
width: 100%;
|
|
max-width: 800px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
|
|
text-align: left;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
border: 1px solid #dddddd;
|
|
padding: 8px;
|
|
}
|
|
|
|
th {
|
|
background-color: #f2f2f2;
|
|
}
|
|
|
|
tr:hover {
|
|
filter: brightness(1.2)
|
|
}
|
|
|
|
.context-menu {
|
|
display: none;
|
|
position: absolute;
|
|
list-style-type: none;
|
|
padding: 10px 0;
|
|
background-color: #f9f9f9;
|
|
border: 1px solid #ccc;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.context-menu li {
|
|
padding: 8px 16px;
|
|
}
|
|
|
|
.context-menu li:hover {
|
|
background-color: #ddd;
|
|
}
|
|
|
|
.present {
|
|
background-color: #9CF1AF;
|
|
}
|
|
|
|
.absent,
|
|
.invalid {
|
|
background-color: #F1A69C;
|
|
}
|
|
|
|
.valid {
|
|
background-color: #8f7eff;
|
|
}
|
|
|
|
.retard {
|
|
background-color: #F1D99C;
|
|
}
|
|
|
|
/* Ajoutez des styles pour le conteneur de pagination et les boutons */
|
|
.pagination-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.pagination-button {
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
cursor: pointer;
|
|
background-color: #f9f9f9;
|
|
margin: 0 5px;
|
|
text-decoration: none;
|
|
color: #000;
|
|
}
|
|
|
|
.pagination-button:hover {
|
|
background-color: #ddd;
|
|
}
|
|
|
|
.pagination-button.active {
|
|
background-color: #007bff;
|
|
color: #fff;
|
|
border-color: #007bff;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
const etudid = {{ sco.etud.id }};
|
|
const paginationContainerAssiduites = document.getElementById("paginationContainerAssiduites");
|
|
const paginationContainerJustificatifs = document.getElementById("paginationContainerJustificatifs");
|
|
const itemsPerPage = 10;
|
|
let currentPageAssiduites = 1;
|
|
let currentPageJustificatifs = 1;
|
|
|
|
const tableBodyAssiduites = document.getElementById("tableBodyAssiduites");
|
|
const tableBodyJustificatifs = document.getElementById("tableBodyJustificatifs");
|
|
|
|
const contextMenu = document.getElementById("contextMenu");
|
|
const editOption = document.getElementById("editOption");
|
|
const deleteOption = document.getElementById("deleteOption");
|
|
let selectedRow;
|
|
|
|
document.addEventListener("click", () => {
|
|
contextMenu.style.display = "none";
|
|
});
|
|
|
|
editOption.addEventListener("click", () => {
|
|
if (selectedRow) {
|
|
// Code pour éditer la ligne sélectionnée
|
|
console.debug("Éditer :", selectedRow);
|
|
}
|
|
});
|
|
|
|
deleteOption.addEventListener("click", () => {
|
|
if (selectedRow) {
|
|
// Code pour supprimer la ligne sélectionnée
|
|
const type = selectedRow.getAttribute('type');
|
|
const obj_id = selectedRow.getAttribute('obj_id');
|
|
if (type == "assiduite") {
|
|
deleteAssiduite(obj_id);
|
|
|
|
} else {
|
|
deleteJustificatif(obj_id);
|
|
}
|
|
loadAll();
|
|
|
|
|
|
}
|
|
});
|
|
|
|
function renderTableAssiduites(page, assiduités) {
|
|
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(etat);
|
|
|
|
row.innerHTML = `
|
|
<td>${new Date(assiduite.date_debut).toLocaleString()}</td>
|
|
<td>${new Date(assiduite.date_fin).toLocaleString()}</td>
|
|
<td>${etat}</td>
|
|
<td>${assiduite.moduleimpl_id}</td> <td>${assiduite.est_just ? "Oui" : "Non"
|
|
}</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();
|
|
}
|
|
|
|
function renderTableJustificatifs(page, justificatifs) {
|
|
tableBodyJustificatifs.innerHTML = "";
|
|
const start = (page - 1) * itemsPerPage;
|
|
const end = start + itemsPerPage;
|
|
|
|
justificatifs.slice(start, end).forEach((justificatif) => {
|
|
const row = document.createElement("tr");
|
|
row.setAttribute('type', "justificatif");
|
|
row.setAttribute('obj_id', justificatif.justif_id);
|
|
|
|
const etat = justificatif.etat.toLowerCase();
|
|
|
|
if (etat == "valide") {
|
|
row.classList.add('valid');
|
|
} else {
|
|
row.classList.add('invalid')
|
|
}
|
|
|
|
row.innerHTML = `
|
|
<td>${new Date(justificatif.date_debut).toLocaleString()}</td>
|
|
<td>${new Date(justificatif.date_fin).toLocaleString()}</td>
|
|
<td>${etat}</td>
|
|
<td>${justificatif.raison}</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);
|
|
});
|
|
|
|
tableBodyJustificatifs.appendChild(row);
|
|
});
|
|
updateActivePaginationButton(false);
|
|
}
|
|
|
|
function renderPaginationButtons(array, assi = true) {
|
|
const totalPages = Math.ceil(array.length / itemsPerPage);
|
|
|
|
if (assi) {
|
|
paginationContainerAssiduites.innerHTML = ""
|
|
} else {
|
|
paginationContainerJustificatifs.innerHTML = ""
|
|
}
|
|
|
|
for (let i = 1; i <= totalPages; i++) {
|
|
const paginationButton = document.createElement("a");
|
|
paginationButton.textContent = i;
|
|
paginationButton.classList.add("pagination-button");
|
|
if (assi) {
|
|
paginationButton.addEventListener("click", () => {
|
|
currentPageAssiduites = i;
|
|
renderTableAssiduites(currentPageAssiduites, array);
|
|
});
|
|
paginationContainerAssiduites.appendChild(paginationButton);
|
|
} else {
|
|
paginationButton.addEventListener("click", () => {
|
|
currentPageJustificatifs = i;
|
|
renderTableAssiduites(currentPageJustificatifs, array);
|
|
});
|
|
paginationContainerJustificatifs.appendChild(paginationButton);
|
|
}
|
|
}
|
|
updateActivePaginationButton(assi);
|
|
}
|
|
function updateActivePaginationButton(assi = true) {
|
|
if (assi) {
|
|
const paginationButtons =
|
|
paginationContainerAssiduites.querySelectorAll("#paginationContainerAssiduites .pagination-button");
|
|
paginationButtons.forEach((button) => {
|
|
if (parseInt(button.textContent) === currentPageAssiduites) {
|
|
button.classList.add("active");
|
|
} else {
|
|
button.classList.remove("active");
|
|
}
|
|
});
|
|
} else {
|
|
const paginationButtons =
|
|
paginationContainerJustificatifs.querySelectorAll("#paginationContainerJustificatifs .pagination-button");
|
|
paginationButtons.forEach((button) => {
|
|
if (parseInt(button.textContent) === currentPageJustificatifs) {
|
|
button.classList.add("active");
|
|
} else {
|
|
button.classList.remove("active");
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function loadAll() {
|
|
getAllAssiduitesFromEtud(etudid, (assi) => {
|
|
renderTableAssiduites(currentPageAssiduites, assi);
|
|
renderPaginationButtons(assi), true;
|
|
})
|
|
|
|
getAllJustificatifsFromEtud(etudid, (assi) => {
|
|
renderTableJustificatifs(currentPageJustificatifs, assi);
|
|
renderPaginationButtons(assi, false);
|
|
})
|
|
}
|
|
|
|
window.onload = () => {
|
|
loadAll();
|
|
}
|
|
|
|
</script> |