diff --git a/app/templates/assiduites/pages/signal_assiduites_diff.j2 b/app/templates/assiduites/pages/signal_assiduites_diff.j2 index f19e59acb..120369fee 100644 --- a/app/templates/assiduites/pages/signal_assiduites_diff.j2 +++ b/app/templates/assiduites/pages/signal_assiduites_diff.j2 @@ -17,6 +17,15 @@ gap: 0.5em; } + #actions { + flex-direction: row; + align-items: center; + margin-bottom: 5px; + } + #actions label{ + margin: 0; + } + #fix { display: flex; flex-direction: row; @@ -49,21 +58,24 @@ } #tableau-periode { + display: flex; + flex-direction: column; overflow-x: scroll; max-width: var(--sco-content-max-width); } #tableau-periode .pdp { - width: 2em; - height: 2em; - border-radius: 50%; + width: 5em; + border-radius: 8px; } - .grid-table { - display: grid; - grid-template-columns: 200px repeat({{ etudiants|length }}, 1fr); - width: var(--sco-content-max-width); + .header { + background-color: #f9f9f9; + padding: 10px; + text-align: center; + border: 1px solid #ddd; } + .cell, .header { border: 1px solid #ddd; padding: 10px; @@ -74,19 +86,23 @@ } .header{ justify-content: space-between; - } - .cell{ + + .cell { + display: flex; + align-items: center; justify-content: center; - + border: 1px solid #ddd; + padding: 10px; + text-align: center; + width: 256px; } - .cell p{ text-align: center; } .sticky { position: sticky; - left: 0; + top: 0; background-color: #f9f9f9; z-index: 2; } @@ -95,12 +111,24 @@ display: block; top: 0; z-index: 0; + width: 100% !important; + min-width: inherit !important; + } + + .assi-btns { + display: flex; + gap: 4px; } .pointer{ cursor: pointer; } + .ligne{ + display: flex; + gap: 1px; + } + {% endblock styles %} @@ -124,6 +152,10 @@ function afficherPDP(checked) { } else { gtrcontent.removeAttribute("data-pdp"); } + + // On sauvegarde le choix dans le localStorage + localStorage.setItem("scodoc-signal_assiduites_diff-pdp", `${checked}`); + pdp.checked = checked; } /** @@ -156,7 +188,7 @@ async function nouvellePeriode(period = null) { moduleimpl_id = period.moduleimpl_id; }else{ //Sinon on vérifie qu'on a bien des valeurs - const text = document.createTextNode("Veuillez remplir tous les champs pour ajouter une période.") + const text = document.createTextNode("Veuillez remplir tous les champs pour ajouter une plage.") if (date == "" || debut == "" || fin == "" || moduleimpl_id == "") { openAlertModal( "Erreur", @@ -168,10 +200,11 @@ async function nouvellePeriode(period = null) { // On ajoute la nouvelle période au tableau let periodeDiv = document.createElement("div"); - periodeDiv.classList.add("cell", "sticky"); + periodeDiv.classList.add("cell", "header"); periodeDiv.id = `periode-${periodId}`; + const periodP = document.createElement("p"); - periodP.textContent = `Période du ${date} de ${debut} à ${fin}`; + periodP.textContent = `Plage du ${date} de ${debut} à ${fin}`; // On ajoute le moduleimpl const modP = document.createElement("p"); @@ -184,7 +217,7 @@ async function nouvellePeriode(period = null) { // On supprime toutes les cases du tableau correspondant à cette période document .querySelectorAll( - `.cell[data-periodeid="${periodeDiv.getAttribute("data-periodeid")}"]` + `[data-periodeid="${periodeDiv.getAttribute("data-periodeid")}"]` ) .forEach((e) => e.remove()); // On supprime la période de la Map periodes @@ -195,11 +228,11 @@ async function nouvellePeriode(period = null) { periodeDiv.appendChild(modP); periodeDiv.appendChild(close); periodeDiv.setAttribute("data-periodeid", periodId); - document.getElementById("tableau-periode").appendChild(periodeDiv); + document.getElementById("tete-table").appendChild(periodeDiv); // On récupère les étudiants (etudids) let etudids = [ - ...document.querySelectorAll("#tableau-periode .header[data-etudid]"), + ...document.querySelectorAll(".ligne[data-etudid]"), ].map((e) => e.getAttribute("data-etudid")); // On génère une date de début et de fin de la période @@ -249,7 +282,7 @@ async function nouvellePeriode(period = null) { cell.setAttribute("data-etudid", etudid); cell.setAttribute("data-periodeid", periodId); cell.id = `cell-${etudid}-${periodId}`; - document.getElementById("tableau-periode").appendChild(cell); + document.querySelector(`.ligne[data-etudid="${etudid}"]`).appendChild(cell); //Vérification inscription au module // Si l'étudiant n'est pas inscrit, on le notifie et on passe à l'étudiant suivant @@ -265,6 +298,10 @@ async function nouvellePeriode(period = null) { const assiduites = data[etudid]; // Si l'étudiant n'a pas d'assiduité, on crée les boutons assiduité if (assiduites.length == 0) { + + const assi_btns = document.createElement('div'); + assi_btns.classList.add('assi-btns'); + ["present", "retard", "absent"].forEach((value) => { const cbox = document.createElement("input"); cbox.type = "checkbox"; @@ -284,8 +321,9 @@ async function nouvellePeriode(period = null) { // Si une valeur par défaut est donnée alors on l'applique cbox.checked = etatDef.value == value; - cell.appendChild(cbox); + assi_btns.appendChild(cbox); }); + cell.appendChild(assi_btns); } else { // Si une (ou plus) assiduité sont trouvée pour la période // alors on affiche les informations de la première assiduité @@ -297,6 +335,8 @@ async function nouvellePeriode(period = null) { .catch((error) => { console.error("Error:", error); }); + + document.getElementById("tableau-periode").classList.remove("hidden"); } /** * Permet de récupérer la saisie puis créer les assiduités grâce à l'api @@ -337,6 +377,7 @@ function sauvegarderAssiduites() { } }); } + // Une fois les assiduités générées, on les envoie à l'api async_post( "../../api/assiduites/create", @@ -344,7 +385,7 @@ function sauvegarderAssiduites() { // Si la requête passe async (data) => { // On supprime toutes les cases du tableau pour le mettre à jour - document.querySelectorAll(".cell").forEach((e) => e.remove()); + document.querySelectorAll("[data-periodeid]").forEach((e)=>e.remove()) // On recrée les périodes // (cela permet de redemander les assiduités, donc mettre à jour les cases) @@ -402,7 +443,7 @@ function sauvegarderAssiduites() { const period = periodes.get(periodeId); const li = document.createElement("li"); // On affiche la période - li.textContent = `Période du ${period.date_debut.format( + li.textContent = `Plage du ${period.date_debut.format( "DD/MM/YYYY HH:mm" )} à ${period.date_fin.format("HH:mm")}`; @@ -474,7 +515,8 @@ if (window.forceModule) { * - On vérifie si la date est un jour travaillé */ async function main() { - afficherPDP(pdp.checked); + const checked = localStorage.getItem("scodoc-signal_assiduites_diff-pdp") == "true"; + afficherPDP(checked); $("#date").on("change", async function (d) { // On vérifie si la date est un jour travaillé dateCouranteEstTravaillee(); @@ -497,8 +539,8 @@ main();
- +
+
+ + -
- - - - - -
+ +
-
-
- -
Période
- + +
+
Étudiants
+ {#
Plage X
#} +
+ {# ... #} + + + {% for etud in etudiants %} -
- {{etud.nomprenom}} - {{ etud.nomprenom }} +
+
+ {{etud.nomprenom}} + {{ etud.nomprenom }} +
+ {#
Assiduité Plage 1
#} +
{% endfor %} - +