{% include "assiduites/widgets/tableau_base.j2" %} <section class="alerte invisible"> <p>Attention, cet étudiant a trop d'absences</p> </section> <section class="nonvalide"> <!-- Tableaux des justificatifs à valider (attente / modifié ) --> <h4>Justificatifs en attente (ou modifiés)</h4> {% include "assiduites/widgets/tableau_justi.j2" %} </section> <div class="annee"> <span>Année scolaire 2022-2023 Changer année: </span> <select name="" id="annee" onchange="setterAnnee(this.value)"> </select> </div> <div class="legende"> <h3>Gestion des justificatifs</h3> <p> Faites <span style="font-style: italic;">clic droit</span> sur une ligne du tableau pour afficher le menu contextuel : <ul> <li>Détails : Affiche les détails du justificatif sélectionné</li> <li>Editer : Permet de modifier le justificatif (dates, etat, ajouter/supprimer fichier etc)</li> <li>Supprimer : Permet de supprimer le justificatif (Action Irréversible)</li> </ul> </p> </div> <script> function loadAll() { generate(defAnnee) } function getDeptJustificatifsFromPeriod(action) { const path = getUrl() + `/api/justificatifs/dept/${dept_id}/query?date_debut=${bornes.deb}&date_fin=${bornes.fin}&etat=attente,modifie` async_get( path, (data, status) => { console.log(data); justificatifCallBack(data); }, (data, status) => { console.error(data, status) } ) } function generate(annee) { if (annee < 1999 || annee > 2999) { openAlertModal("Année impossible", document.createTextNode("L'année demandé n'existe pas.")); return; } bornes = { deb: `${annee}-09-01T00:00`, fin: `${annee + 1}-06-30T23:59` } defAnnee = annee; getDeptJustificatifsFromPeriod() } function setterAnnee(annee) { annee = parseInt(annee); document.querySelector('.annee span').textContent = `Année scolaire ${annee}-${annee + 1} Changer année: ` generate(annee) } let defAnnee = {{ annee }}; let bornes = { deb: `${defAnnee}-09-01T00:00`, fin: `${defAnnee + 1}-06-30T23:59` } const dept_id = {{ dept_id }}; window.addEventListener('load', () => { filterJustificatifs = { "columns": [ "etudid", "entry_date", "date_debut", "date_fin", "etat", "raison", "fichier" ], "filters": { "etat": [ "attente", "modifie" ] } } const select = document.querySelector('#annee'); for (let i = defAnnee + 1; i > defAnnee - 6; i--) { const opt = document.createElement("option"); opt.value = i + "", opt.textContent = i + ""; if (i === defAnnee) { opt.selected = true; } select.appendChild(opt) } setterAnnee(defAnnee) }) </script> <style> .stats-values-item { display: flex; justify-content: space-evenly; align-items: center; flex-direction: column; } .stats { border: 1px solid #333; padding: 5px 2px; width: fit-content; } .stats-values { display: flex; justify-content: flex-start; gap: 15px; } .stats-values-item h5 { font-weight: bold; text-decoration-line: underline; } .stats-values-part { display: flex; flex-direction: column; } .alerte { display: flex; justify-content: center; align-items: center; padding: 10px; margin: 5px 0; border-radius: 7px; background-color: crimson; } .alerte.invisible { display: none; } .alerte p { font-size: larger; color: whitesmoke; } .suppr { margin: 5px 0; } </style>