Assiduite : signal_assiduites_diff tableau transposer + modifs mineurs

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;
+        width: 5em;
-        height: 2em;
+        border-radius: 8px;
-        border-radius: 50%;
     }
 
-    .grid-table {
+    .header {
-        display: grid;
+        background-color: #f9f9f9;
-        grid-template-columns: 200px repeat({{ etudiants|length }}, 1fr);
+        padding: 10px;
-        width: var(--sco-content-max-width);
+        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;
+    }
+
 </style>
 
 {% 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();
 
 
 <div id="fix">
-    <!-- Nouvelle période
+    <!-- Nouvelle Plage
-        Permet de créer une nouvelle ligne pour une nouvelle période
+        Permet de créer une nouvelle ligne pour une nouvelle Plage
         (
             Jour, -> datepicker
             Heure de début, -> timepicker
@@ -529,38 +571,34 @@ main();
             {{moduleimpl_select | safe}}
         </label>
 
-        <button id="add_periode" onclick="nouvellePeriode()">Ajouter une période</button>
+        <button id="add_periode" onclick="nouvellePeriode()">Ajouter une plage</button>
     </div>
-
+</div>
-
+<!-- Boutons d'actions
-    <!-- Boutons d'actions
         - Sauvegarder
         - Afficher la photo de profil
         - Assiduité par défaut (aucune, present, retard, absent)
     --->
-
+    <br>
-    <div id="actions" class="box">
+<div id="actions" class="flex">
+    <button id="save" onclick="sauvegarderAssiduites()">ENREGISTRER</button>
     <label for="pdp">
         Photo de profil :
         <input type="checkbox" name="pdp" id="pdp" checked onclick="afficherPDP(this.checked)">
     </label>
 
     <label for="etatDef">
-        Assiduité par défaut : 
+    Intialiser les étudiants comme : 
     <select name="etatDef" id="etatDef">
-            <option value="">Aucune</option>
+        <option value="">-</option>
-            <option value="present">Présence</option>
+        <option value="present">présents</option>
-            <option value="retard">Retard</option>
+        <option value="retard">en retard</option>
-            <option value="absent">Absence</option>
+        <option value="absent">absents</option>
     </select>
     </label>
     
-        <button id="save" onclick="sauvegarderAssiduites()">Sauvegarder l'assiduité</button>
-    </div>
 </div>
 
-<br>
-
 <!-- Tableau à double entrée 
         Colonne : Etudiants (Header = Nom, Prénom, Photo (si actif))
         Ligne : Période (Header = Jour, Heure de début, Heure de fin, ModuleImplId)
@@ -570,17 +608,27 @@ main();
     --->
 
 <div id="tableau-periode" class="grid-table">
-   <!-- Header de la première colonne -->
+    <!-- Première ligne : Plages -->
-    <div class="header sticky">Période</div>
+    <div class="ligne" id="tete-table">
-    <!-- Headers des autres colonnes (noms des étudiants) -->
+      <div class="cell header sticky">Étudiants</div>
+      {# <div class="cell header" periode-id="X">Plage X</div> #}
+    </div>
+    {# ... #}
+
+    <hr class="hidden" id="separator">
+
     {% for etud in etudiants %}
-    <div class="header etudinfo" data-etudid="{{etud.etudid}}" id="head-{{etud.etudid}}">
+    <div class="ligne" data-etudid="{{etud.etudid}}">
+      <div class="cell etudinfo sticky" id="head-{{etud.etudid}}">
           <img src="../../api/etudiant/etudid/{{etud.etudid}}/photo?size=small" alt="{{etud.nomprenom}}" class="pdp">
           <span>{{ etud.nomprenom }}</span>
       </div>
+      {# <div class="cell" periode-id="X">Assiduité Plage 1</div> #}
+
+    </div>
     {% endfor %}
 
-   <!-- Sera remplis avec les nouvelles périodes -->
+
 
 </div>