Assiduités : Page Liste Assiduites / Justifs (WIP)

This commit is contained in:
iziram 2023-04-20 18:04:21 +02:00
parent f26ecb1f8a
commit e00fc8dd09
7 changed files with 434 additions and 8 deletions

View File

@ -341,6 +341,7 @@ def justif_delete():
else: else:
output["success"][f"{i}"] = {"OK": True} output["success"][f"{i}"] = {"OK": True}
db.session.commit() db.session.commit()
return jsonify(output) return jsonify(output)
@ -356,8 +357,12 @@ def _delete_singular(justif_id: int, database):
if archive_name is not None: if archive_name is not None:
archiver: JustificatifArchiver = JustificatifArchiver() archiver: JustificatifArchiver = JustificatifArchiver()
archiver.delete_justificatif(justificatif_unique.etudid, archive_name) archiver.delete_justificatif(justificatif_unique.etudid, archive_name)
database.session.delete(justificatif_unique) database.session.delete(justificatif_unique)
compute_assiduites_justified(
Justificatif.query.filter_by(etudid=justificatif_unique.etudid), True
)
return (200, "OK") return (200, "OK")

View File

@ -138,7 +138,7 @@ def sidebar(etudid: int = None):
H.append( H.append(
f""" f"""
<li><a href="{ url_for('absences.CalAbs', scodoc_dept=g.scodoc_dept, etudid=etudid) }">Calendrier</a></li> <li><a href="{ url_for('absences.CalAbs', scodoc_dept=g.scodoc_dept, etudid=etudid) }">Calendrier</a></li>
<li><a href="{ url_for('absences.ListeAbsEtud', scodoc_dept=g.scodoc_dept, etudid=etudid) }">Liste</a></li> <li><a href="{ url_for('assiduites.liste_assiduites_etud', scodoc_dept=g.scodoc_dept, etudid=etudid) }">Liste</a></li>
</ul> </ul>
""" """
) )

View File

@ -482,4 +482,8 @@
#page-assiduite-content>* { #page-assiduite-content>* {
margin: 1.5% 0; margin: 1.5% 0;
}
.rouge {
color: crimson;
} }

View File

@ -856,6 +856,23 @@ function actualizeEtudAssiduite(etudid, has_formsemestre = true) {
}); });
} }
function getAllAssiduitesFromEtud(etudid, action) {
const url_api = getUrl() + `/api/assiduites/${etudid}`;
$.ajax({
async: true,
type: "GET",
url: url_api,
success: (data, status) => {
if (status === "success") {
assiduites[etudid] = data;
action(data);
}
},
error: () => {},
});
}
/** /**
* Déclenchement d'une action après appuie sur un bouton d'assiduité * Déclenchement d'une action après appuie sur un bouton d'assiduité
* @param {HTMLInputElement} element Bouton d'assiduité appuyé * @param {HTMLInputElement} element Bouton d'assiduité appuyé
@ -1100,10 +1117,6 @@ function createMiniTimeline(assiduitesArray) {
} }
//ajouter affichage assiduites on over //ajouter affichage assiduites on over
setupAssiduiteBuble(block, assiduité); setupAssiduiteBuble(block, assiduité);
if (assiduité.est_just) {
block.classList.add("justified");
}
} }
const action = (justificatifs) => { const action = (justificatifs) => {
@ -1675,7 +1688,7 @@ window.onload = () => {
splitAssiduiteModal(selectedAssiduite); splitAssiduiteModal(selectedAssiduite);
} }
}); });
editBtn.addEventListener("click", () => { editBtn?.addEventListener("click", () => {
if (selectedAssiduite) { if (selectedAssiduite) {
editAssiduiteModal(selectedAssiduite); editAssiduiteModal(selectedAssiduite);
} }
@ -1934,3 +1947,35 @@ function createJustificatif(justif) {
} }
); );
} }
function getAllJustificatifsFromEtud(etudid, action) {
const url_api = getUrl() + `/api/justificatifs/${etudid}`;
$.ajax({
async: true,
type: "GET",
url: url_api,
success: (data, status) => {
if (status === "success") {
action(data);
}
},
error: () => {},
});
}
function deleteJustificatif(justif_id) {
const path = getUrl() + `/api/justificatif/delete`;
sync_post(
path,
[justif_id],
(data, status) => {
//success
if (data.success.length > 0) {
}
},
(data, status) => {
//error
console.error(data, status);
}
);
}

View File

@ -0,0 +1,330 @@
{% 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>

View File

@ -73,7 +73,7 @@
{% endif %} {% endif %}
<li><a href="{{ url_for('absences.CalAbs', scodoc_dept=g.scodoc_dept, <li><a href="{{ url_for('absences.CalAbs', scodoc_dept=g.scodoc_dept,
etudid=sco.etud.id) }}">Calendrier</a></li> etudid=sco.etud.id) }}">Calendrier</a></li>
<li><a href="{{ url_for('absences.ListeAbsEtud', scodoc_dept=g.scodoc_dept, <li><a href="{{ url_for('assiduites.liste_assiduites_etud', scodoc_dept=g.scodoc_dept,
etudid=sco.etud.id) }}">Liste</a></li> etudid=sco.etud.id) }}">Liste</a></li>
</ul> </ul>
{% endif %} {% endif %}

View File

@ -201,6 +201,48 @@ def signal_assiduites_etud():
).build() ).build()
@bp.route("/ListeAssiduitesEtud")
@scodoc
@permission_required(Permission.ScoAbsChange)
def liste_assiduites_etud():
"""
liste_assiduites_etud Affichage de toutes les assiduites et justificatifs d'un etudiant
Args:
etudid (int): l'identifiant de l'étudiant
Returns:
str: l'html généré
"""
etudid = request.args.get("etudid", -1)
etud: Identite = Identite.query.get_or_404(etudid)
if etud.dept_id != g.scodoc_dept_id:
abort(404, "étudiant inexistant dans ce département")
header: str = html_sco_header.sco_header(
page_title="Liste des assiduités",
init_qtip=True,
javascripts=[
"js/assiduites.js",
"libjs/moment.new.min.js",
"libjs/moment-timezone.js",
],
cssstyles=CSSSTYLES
+ [
"css/assiduites.css",
],
)
return HTMLBuilder(
header,
render_template(
"assiduites/liste_assiduites.j2",
sco=ScoData(etud),
date=datetime.date.today().isoformat(),
),
).build()
@bp.route("/SignalAssiduiteGr") @bp.route("/SignalAssiduiteGr")
@scodoc @scodoc
@permission_required(Permission.ScoAbsChange) @permission_required(Permission.ScoAbsChange)