From 1c0d0baf150c439a645d97a7bed65ab40f40fca7 Mon Sep 17 00:00:00 2001
From: iziram <matthias.hartmann@iziram.fr>
Date: Wed, 14 Jun 2023 17:53:19 +0200
Subject: [PATCH] =?UTF-8?q?Assiduites=20:=20Fixes=20+=20fin=20page=20diff?=
 =?UTF-8?q?=C3=A9r=C3=A9e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/static/css/assiduites.css                 |   2 +
 app/static/js/assiduites.js                   |  74 ++-
 app/templates/assiduites/differee.j2          | 496 +++++++++++-------
 .../assiduites/signal_assiduites_diff.j2      |   3 +-
 app/templates/assiduites/timeline.j2          |   2 +-
 app/templates/assiduites/toast.j2             |  19 +
 6 files changed, 367 insertions(+), 229 deletions(-)

diff --git a/app/static/css/assiduites.css b/app/static/css/assiduites.css
index 2b8e1d573f..be4a8842c0 100644
--- a/app/static/css/assiduites.css
+++ b/app/static/css/assiduites.css
@@ -231,6 +231,8 @@
     -webkit-appearance: none;
     appearance: none;
 
+    cursor: pointer;
+
 }
 
 .rbtn::before {
diff --git a/app/static/js/assiduites.js b/app/static/js/assiduites.js
index e543fad6f4..2bafa4cd72 100644
--- a/app/static/js/assiduites.js
+++ b/app/static/js/assiduites.js
@@ -195,7 +195,7 @@ function sync_post(path, data, success, errors) {
  * @param {CallableFunction} errors fonction à effectuer en cas d'échec
  */
 function async_post(path, data, success, errors) {
-  $.ajax({
+  return $.ajax({
     async: true,
     type: "POST",
     url: path,
@@ -334,27 +334,22 @@ function executeMassActionQueue() {
   };
 
   //On exécute les fonctions de queue
-  let color;
-  switch (currentMassActionEtat.toUpperCase()) {
-    case "PRESENT":
-      color = "#6bdb83";
-      break;
-    case "ABSENT":
-      color = "#F1A69C";
-      break;
-    case "RETARD":
-      color = "#f0c865";
-      break;
-    default:
-      color = "#AAA";
-      break;
-  }
   let count = 0;
   if (currentMassActionEtat == "remove") {
     count += supprimer();
     const span = document.createElement("span");
-    span.innerHTML = `${count} assiduités ont été supprimées.`;
-    pushToast(generateToast(span, color, 5));
+    if (count > 0) {
+      span.innerHTML = `${count} assiduités ont été supprimées.`;
+    } else {
+      span.innerHTML = `Aucune assiduité n'a été supprimée.`;
+    }
+    pushToast(
+      generateToast(
+        span,
+        getToastColorFromEtat(currentMassActionEtat.toUpperCase()),
+        5
+      )
+    );
   } else {
     count += create();
     count += edit();
@@ -363,10 +358,22 @@ function executeMassActionQueue() {
         ? "En retard"
         : currentMassActionEtat;
     const span = document.createElement("span");
-    span.innerHTML = `${count} étudiants ont été mis <u><strong>${etat
-      .capitalize()
-      .trim()}</strong></u>`;
-    pushToast(generateToast(span, color, 5));
+    if (count > 0) {
+      span.innerHTML = `${count} étudiants ont été mis <u><strong>${etat
+        .capitalize()
+        .trim()}</strong></u>`;
+    } else {
+      span.innerHTML = `Aucun étudiant n'a été mis <u><strong>${etat
+        .capitalize()
+        .trim()}</strong></u>`;
+    }
+    pushToast(
+      generateToast(
+        span,
+        getToastColorFromEtat(currentMassActionEtat.toUpperCase()),
+        5
+      )
+    );
   }
   //On récupère les assiduités puis on regénère les lignes d'étudiants
   getAssiduitesFromEtuds(true);
@@ -1105,30 +1112,15 @@ function assiduiteAction(element) {
           etatAffiche = "L'assiduité de %etud% a été retirée.";
       }
 
-      let color;
-
-      switch (etat.toUpperCase()) {
-        case "PRESENT":
-          color = "#6bdb83";
-          break;
-        case "ABSENT":
-          color = "#F1A69C";
-          break;
-        case "RETARD":
-          color = "#f0c865";
-          break;
-        default:
-          color = "#AAA";
-          break;
-      }
-
       const nom_prenom = `${etuds[etudid].nom.toUpperCase()} ${etuds[
         etudid
       ].prenom.capitalize()}`;
       const span = document.createElement("span");
       span.innerHTML = etatAffiche.replace("%etud%", nom_prenom);
 
-      pushToast(generateToast(span, color, 5));
+      pushToast(
+        generateToast(span, getToastColorFromEtat(etat.toUpperCase()), 5)
+      );
     }
 
     actualizeEtud(etudid, !isSingleEtud);
@@ -1322,7 +1314,7 @@ function getUserFromId(id) {
 
   let name = "Non Renseigné";
 
-  sync_get(`/ScoDoc/api/user/${id}`, (data) => {
+  sync_get(getUrl() + `/api/user/${id}`, (data) => {
     if (data.nom != "" && data.prenom != "") {
       name = `${data.nom} ${data.prenom}`;
     } else {
diff --git a/app/templates/assiduites/differee.j2 b/app/templates/assiduites/differee.j2
index 756bdf88eb..e1a356ae9a 100644
--- a/app/templates/assiduites/differee.j2
+++ b/app/templates/assiduites/differee.j2
@@ -11,7 +11,7 @@
         <div class="tr" etudid="{{etud.etudid}}">
             <div class="td sticky">
                 <span>{{etud.nomprenom}}</span>
-                <img class="pdp-hover" src="/ScoDoc/GEII/api/etudiant/etudid/{{etud.etudid}}/photo?size=small">
+                <img class="pdp-hover" src="" alt="No Img" etudid="{{etud.etudid}}">
             </div>
         </div>
         {% endfor %}
@@ -76,7 +76,9 @@
         text-align: center;
         width: 225px;
         border: 1px solid #ddd;
-        display: inline-block;
+        display: flex;
+        justify-content: center;
+        align-content: center;
     }
 
     .tr {
@@ -213,6 +215,36 @@
         cursor: not-allowed;
 
     }
+
+    .th.error:hover .col-error {
+        display: block;
+        z-index: 2000;
+        background-color: crimson;
+        width: 100%;
+        min-height: 25%;
+        bottom: -25%;
+        transition: all 1s;
+    }
+
+    .col-error {
+        position: absolute;
+        display: none;
+    }
+
+    .mass {
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;
+    }
+
+    .mass input {
+        outline: none;
+        border: none;
+    }
+
+    .rbtn:disabled {
+        opacity: 0.7;
+    }
 </style>
 
 <script>
@@ -238,20 +270,21 @@
         th.setAttribute("col", col_id);
         th.setAttribute("activated", "true");
         th.innerHTML = `
+        <div class="col-error">La période n'est pas valide</div>
       <div class="mini-form">
-          <div class="btngroup">
-                <span class="num">${col_id}</span>
+          <div class="btngroup" style="justify-content: flex-end;">
                 <button class="closeCol" onclick="removeColumn(this)">x</button>
           </div>
           <input type="datetime-local" id="dateStart">
           <input type="datetime-local" id="dateEnd">
           {{moduleimpl_select|safe}}
-          <select name="mass_action_${col_id}" id="mass_action_${col_id}" onchange="setEtatCol(${col_id},this.value)" disabled>
-            <option value="">Sélectionner une assiduité</option>
-            <option value="0">Présent</option>
-            <option value="1">Retard</option>
-            <option value="2">Absent</option>
-          </select>
+          <div id="mass_action_${col_id}" class="mass">
+          <input disabled="" type="radio" class="rbtn present" name="mass_action_${col_id}" value="present" onclick="massCol(this)">
+          <input disabled="" type="radio" class="rbtn retard" name="mass_action_${col_id}" value="retard" onclick="massCol(this)">
+          <input disabled="" type="radio" class="rbtn absent" name="mass_action_${col_id}" value="absent" onclick="massCol(this)">
+          <input disabled="" type="radio" class="rbtn aucun" name="mass_action_${col_id}" value="remove" onclick="massCol(this)">
+          
+          </div>
       </div>
       `;
         table
@@ -277,6 +310,8 @@
             })
 
 
+
+
         } catch {
         }
 
@@ -285,6 +320,10 @@
                 getAndUpdateCol(col_id);
             })
         })
+        const sl = th.querySelector('select');
+        sl.addEventListener('change', () => {
+            editModuleImpl(sl);
+        })
 
         let rows = table.querySelector(".tbody").querySelectorAll(".tr");
         for (let i = 0; i < rows.length; i++) {
@@ -293,17 +332,12 @@
             td.classList.add("td", "etat");
             const etudid = rows[i].getAttribute("etudid");
             td.innerHTML = `
-              <div class="assi_rbtn">
-                <input type="radio" name="etat_${col_id}_${etudid}" value="present" disabled onchange="updateEtudAssiduite(this)">
-                <input type="radio" name="etat_${col_id}_${etudid}" value="retard" disabled onchange="updateEtudAssiduite(this)">
-                <input type="radio" name="etat_${col_id}_${etudid}" value="absent" disabled onchange="updateEtudAssiduite(this)">
+              <div class="assi_rbtn" etat="">
+                <input class="rbtn present" type="radio" name="etat_${col_id}_${etudid}" value="present" disabled onclick="updateEtudAssiduite(this)">
+                <input class="rbtn retard" type="radio" name="etat_${col_id}_${etudid}" value="retard" disabled onclick="updateEtudAssiduite(this)">
+                <input class="rbtn absent" type="radio" name="etat_${col_id}_${etudid}" value="absent" disabled onclick="updateEtudAssiduite(this)">
               </div>
               <br/>
-              <div class="assi_lbl">
-                <span>Present</span>
-                <span>Retard</span>
-                <span>Absent</span>
-              </div>
             `;
 
 
@@ -396,33 +430,15 @@
     }
 
     function setEtatLine(line, etatId) {
+
         let inputs = [...line.querySelectorAll("input")]
         inputs.forEach((el) => { el.checked = false })
         if (etatId !== "") {
             inputs[Number.parseInt(etatId)].checked = true;
+            inputs[Number.parseInt(etatId)].parentElement.setAttribute('etat', inputs[Number.parseInt(etatId)].value)
         }
     }
 
-    function getEtatCol(colId) {
-        const etats = {};
-        const tds = [...document.querySelectorAll(`.td[colid='${colId}']`)]
-        tds.forEach((td) => {
-            const tr = td.parentElement
-            const etudid = tr.getAttribute("etudid");
-            let inputs = [...td.querySelectorAll("input")]
-
-            etatInput = inputs.filter((e) => e.checked).pop()
-
-            if (etatInput == undefined) {
-                etats[etudid] = "";
-            } else {
-                etats[etudid] = etatInput.value;
-            }
-        })
-
-        return etats;
-    }
-
     function _createAssiduites(inputDeb, inputFin, moduleSelect, etudid, etat, colId) {
         if (moduleSelect == "") {
             return {
@@ -444,129 +460,9 @@
         }
     }
 
-    function getAndVerify() {
-        const assiduites = [];
-        const cols = [...document.querySelectorAll("[col]")];
-        const errors = [];
-
-        cols.forEach((col) => {
-            const col_id = col.getAttribute("col");
-            const etats = getEtatCol(col_id);
-
-            const inputDeb = col.querySelector("#dateStart").value;
-            const inputFin = col.querySelector("#dateEnd").value;
-            const moduleSelect = col.querySelector("#moduleimpl_select,.dynaSelect").value;
-
-            const d_debut = moment(inputDeb);
-            const d_fin = moment(inputFin);
-
-            if (inputDeb == "" || inputFin == "" || d_debut > d_fin) {
-                errors.push(`La période de la colonne n°${col_id} n'est pas valide`);
-                return;
-            }
-
-            {% if periode %}
-
-            const testPeriode = [
-                d_debut.isBefore("{{periode.deb}}"),
-                d_debut.isAfter("{{periode.fin}}"),
-                d_fin.isBefore("{{periode.deb}}"),
-                d_fin.isAfter("{{periode.fin}}"),
-            ]
-            if (testPeriode.some((e) => e)) {
-                errors.push(`La période de la colonne n°${col_id} n'est pas dans le semestre`);
-                return;
-            }
-            {% endif %}
-
-            if (window.forceModule && moduleSelect == "") {
-                errors.push(`Le module de la colonne n°${col_id} n'a pas été entré. (Préférence de semestre)`);
-                return;
-            }
-            // TODO Mettre une erreur lorsque assiduité forcé (pref)
-
-            Object.keys(etats).forEach((key) => {
-                const etat = etats[key];
-
-                if (etat != "") {
-                    assiduites.push(_createAssiduites(inputDeb, inputFin, moduleSelect, key, etat, col_id))
-                }
-            })
-        });
-
-        if (errors.length > 0) {
-            const texte = document.createElement("div");
-            errors.map((err) => document.createTextNode(err)).forEach((err) => {
-                texte.appendChild(err);
-                texte.appendChild(document.createElement('br'));
-            })
-
-            openAlertModal("Erreur(s) détéctée(s)", texte)
-        } else {
-            if (assiduites.length > 0) {
-                createAllAssiduites(assiduites);
-            }
-        }
-
-
-    }
-
-    function createAllAssiduites(createQueue) {
-        if (createQueue.length < 0)
-            return;
-        const path = getUrl() + `/api/assiduites/create`;
-        sync_post(
-            path,
-            createQueue,
-            (data, status) => {
-                const { success, errors } = data;
-
-                const indexes = [...Object.keys(errors)];
-                if (indexes.length > 0) {
-                    const incriminated = indexes.map((i) => {
-                        return createQueue[Number.parseInt(i)];
-                    })
-
-                    const error_message = document.createElement('div');
-
-                    for (let i = 0; i < incriminated.length; i++) {
-                        const err = errors[indexes[i]];
-                        const crimi = incriminated[i];
-                        const nom = document.querySelector(`[etudid='${crimi.etudid}']`).firstElementChild.textContent.trim();
-                        const col = crimi.colid;
-
-                        const div = document.createElement('div');
-                        div.classList.add("err-assi")
-                        const span = document.createElement("span");
-                        span.setAttribute("title", err);
-                        span.textContent = "ℹ️"
-
-                        const span2 = document.createElement("span");
-                        span2.textContent = `L'assiduité (Colonne n°${col}) de ${nom} n'a pas pu être enregistrée`;
-
-                        div.appendChild(span2);
-                        div.appendChild(span);
-
-                        error_message.appendChild(div);
-                    }
-
-                    openAlertModal("Certaines assiduités non pas été enregistrées", error_message)
-
-                } else {
-                    openAlertModal("Tous les assiduités ont bien été enregistrée", document.createTextNode(""), null, "#09AD2A")
-                }
-            },
-            (data, status) => {
-                //error
-                console.error(data, status);
-            }
-        );
-    }
-
     function getAssiduitesCol(col_id, get = true) {
         const col = document.querySelector(`[col='${col_id}']`);
-
-        const etats = getEtatCol(col_id);
+        const colErr = col.querySelector('.col-error')
 
         const inputDeb = col.querySelector("#dateStart").value;
         const inputFin = col.querySelector("#dateEnd").value;
@@ -575,8 +471,8 @@
         const d_fin = moment(inputFin).tz(TIMEZONE);
 
 
-        if (inputDeb == "" || inputFin == "" || d_debut > d_fin) {
-            //errors.push(`La période de la colonne n°${col_id} n'est pas valide`);
+        if (inputDeb == "" || inputFin == "" || d_debut >= d_fin) {
+            colErr.textContent = `La période de la colonne n'est pas valide`;
             return 0x2;
         }
 
@@ -590,13 +486,13 @@
             d_fin.isAfter(t_after),
         ]
         if (testPeriode.some((e) => e)) {
-            //errors.push(`La période de la colonne n°${col_id} n'est pas dans le semestre`);
+            colErr.textContent = `La période de la colonne n'est pas dans le semestre`;
             return 0x3;
         }
         {% endif %}
 
         if (window.forceModule && moduleSelect == "") {
-            //errors.push(`Le module de la colonne n°${col_id} n'a pas été entré. (Préférence de semestre)`);
+            colErr.textContent = `Le module de la colonne n'a pas été entré. (Préférence de semestre)`;
             return 0x4;
         }
 
@@ -638,6 +534,7 @@
             setEtatLine(td, "")
             const etu = td.parentElement.getAttribute('etudid');
             const conflits = getAssiduitesConflict(etu, periode);
+
             if (conflits.length == 0) {
                 td.setAttribute('assiduite_id', "-1");
             } else if (conflits.length == 1 && isConflictSameAsPeriod(conflits[0], periode)) {
@@ -650,7 +547,7 @@
                 const inputs = [...td.querySelectorAll('input')];
                 inputs.forEach((i) => {
                     i.disabled = true;
-                    i.addEventListener('click', () => { /*updateEtudAssiduite(i)*/ });
+
                 })
             }
         })
@@ -669,13 +566,17 @@
     }
 
     function getAndUpdateCol(colid) {
+        const column = document.querySelector(`[col='${colid}']`);
         if (getAssiduitesCol(colid) == 0) {
-            document.querySelector(`[col='${colid}']`).classList.remove('error');
-            document.getElementById(`mass_action_${colid}`).removeAttribute('disabled')
+            column.classList.remove('error');
+            document.getElementById(`mass_action_${colid}`).querySelectorAll('.rbtn').forEach((el) => {
+                el.removeAttribute('disabled');
+            })
             updateAssiduitesCol(colid)
         } else {
-            const column = document.querySelector(`[col='${colid}']`)
-            document.getElementById(`mass_action_${colid}`).setAttribute('disabled', 'true')
+            document.getElementById(`mass_action_${colid}`).querySelectorAll('.rbtn').forEach((el) => {
+                el.setAttribute('disabled', '');
+            })
             column.classList.add('error');
             const tds = [...document.querySelectorAll(`.td[colid='${colid}']`)]
             tds.forEach((el) => {
@@ -729,9 +630,7 @@
                 break;
         }
 
-        const nom_prenom = `${etuds[etudid].nom.toUpperCase()} ${etuds[
-            etudid
-        ].prenom.capitalize()}`;
+        const nom_prenom = document.querySelector(`.tr[etudid="${etudid}"] .td span`).textContent
         const span = document.createElement("span");
         span.innerHTML = etatAffiche.replace("%etud%", nom_prenom);
 
@@ -753,6 +652,7 @@
             case "-1":
                 // création d'une nouvelle assiduité
                 const assiduite = _createAssiduites(deb, fin, moduleimpl, etudid, etat, colid);
+                rbtn.parentElement.setAttribute('etat', etat);
                 asyncCreateAssiduite(assiduite, (data) => {
                     if (Object.keys(data.success).length > 0) {
                         const assi_id = data.success['0'].assiduite_id;
@@ -797,24 +697,37 @@
                 };
 
                 conflitResolver.open();
+                rbtn.checked = false;
                 break;
             default:
                 // Une assiduité est déjà connue -> modifier assiduité
-                const edit = {
-                    moduleimpl_id: moduleimpl == "" ? null : moduleimpl,
-                    etat: etat,
-                    assiduite_id: Number.parseInt(assi),
+
+                if (etat == rbtn.parentElement.getAttribute('etat')) {
+                    asyncRemoveAssiduite(assi, () => {
+                        etudLine.setAttribute('assiduite_id', "-1");
+                        rbtn.parentElement.setAttribute('etat', "")
+                        assiduites[etudid] = assiduites[etudid].filter((el) => { return el.assiduite_id != assi })
+                        updateAllCol()
+                        launchToast(etudid, "remove");
+                    })
+                } else {
+                    const edit = {
+                        moduleimpl_id: moduleimpl == "" ? null : moduleimpl,
+                        etat: etat,
+                        assiduite_id: Number.parseInt(assi),
+                    }
+
+                    asyncEditAssiduite(edit, (data) => {
+                        const obj = getAssiduite(etudid, assi);
+
+                        obj.moduleimpl = edit.moduleimpl_id;
+                        obj.etat = edit.etat;
+
+                        launchToast(etudid, etat);
+                        rbtn.parentElement.setAttribute('etat', etat)
+
+                    })
                 }
-
-                asyncEditAssiduite(edit, (data) => {
-                    const obj = getAssiduite(etudid, assi);
-
-                    obj.moduleimpl = edit.moduleimpl_id;
-                    obj.etat = edit.etat;
-
-                    launchToast(etudid, etat);
-                })
-
                 break;
         }
 
@@ -837,6 +750,19 @@
         );
     }
 
+    function asyncRemoveAssiduite(assi, callback = () => { }) {
+        const path = getUrl() + `/api/assiduite/delete`;
+        async_post(
+            path,
+            [assi],
+            callback,
+            (data, status) => {
+                //error
+                console.error(data, status);
+            }
+        );
+    }
+
     function asyncEditAssiduite(assi, callback = () => { }) {
         const path = getUrl() + `/api/assiduite/${assi.assiduite_id}/edit`;
         async_post(
@@ -850,6 +776,200 @@
         );
     }
 
+    function asyncCreateAssiduiteGroup(assis, callback = () => { }) {
+        const path = getUrl() + `/api/assiduites/create`;
+        return async_post(
+            path,
+            assis,
+            callback,
+            (data, status) => {
+                //error
+                console.error(data, status);
+            }
+        );
+    }
+
+    function asyncEditAssiduiteGroup(assis, callback = () => { }) {
+        const path = getUrl() + `/api/assiduites/edit`;
+        return async_post(
+            path,
+            assis,
+            callback,
+            (data, status) => {
+                console.error(data, status);
+            }
+        );
+    }
+
+    function asyncDeleteAssiduiteGroup(assis, callback = () => { }) {
+        const path = getUrl() + `/api/assiduite/delete`;
+        async_post(
+            path,
+            assis,
+            callback,
+            (data, status) => {
+                //error
+                console.error(data, status);
+            }
+        );
+    }
+
+    function massCol(rbtn) {
+        const colid = rbtn.name.replace("mass_action_", "");
+        const col = document.querySelector(`[col="${colid}"]`);
+        const etat = rbtn.value;
+
+        const { moduleimpl, deb, fin } = getAssiduitesCol(colid, false);
+
+        const lines = [...document.querySelectorAll(`[assiduite_id][colid='${colid}']`)].filter((el) => {
+            return el.getAttribute('assiduite_id') != "conflit";
+        })
+
+        const toCreate = lines.filter((el) => { return el.getAttribute('assiduite_id') == '-1' })
+        const toEdit = lines.filter((el) => { return el.getAttribute('assiduite_id') != '-1' })
+
+        if (etat == "remove") {
+            const removeList = []
+            toEdit.forEach((el) => {
+                removeList.push(Number.parseInt(el.getAttribute('assiduite_id')))
+            })
+
+            asyncDeleteAssiduiteGroup(removeList, () => {
+                const span = document.createElement("span");
+                if (removeList.length > 0) {
+                    span.innerHTML = `${removeList.length} assiduités ont été supprimées.`;
+                } else {
+                    span.innerHTML = `Aucune assiduité n'a été supprimée.`;
+                }
+
+                toEdit.forEach((el) => {
+                    const assi_id = Number.parseInt(el.getAttribute("assiduite_id"));
+                    const etudid = Number.parseInt(el.parentElement.getAttribute('etudid'));
+                    assiduites[etudid] = assiduites[etudid].filter((a) => { return a.assiduite_id != assi_id });
+                })
+
+                updateAllCol()
+
+                pushToast(generateToast(span, getToastColorFromEtat("remove"), 5));
+            })
+        } else {
+
+            const createList = []
+            const editList = []
+
+            toCreate.forEach((el) => {
+                const etudid = Number.parseInt(el.parentElement.getAttribute('etudid'));
+                createList.push(_createAssiduites(deb, fin, moduleimpl, etudid, etat, colid))
+            })
+            toEdit.forEach((el) => {
+                const edit = {
+                    moduleimpl_id: moduleimpl == "" ? null : moduleimpl,
+                    etat: etat,
+                    assiduite_id: Number.parseInt(el.getAttribute('assiduite_id')),
+                    etudid: Number.parseInt(el.parentElement.getAttribute('etudid')),
+                }
+
+                editList.push(edit);
+            })
+
+            $.when(
+                asyncCreateAssiduiteGroup(createList, (data) => {
+
+                }),
+
+                asyncEditAssiduiteGroup(editList, (data) => {
+
+                })
+            ).done((c, e) => {
+                Object.keys(c[0].success).forEach((k) => {
+                    const assiduite = createList[Number.parseInt(k)];
+                    assiduite["assiduite_id"] = c[0].success[k].assiduite_id;
+                    assiduites[assiduite.etudid].push(assiduite);
+                })
+                Object.keys(e[0].success).forEach((k) => {
+                    const { etudid, assiduite_id, moduleimpl_id, etat } = editList[Number.parseInt(k)]
+                    assiduites[etudid].map((a) => {
+                        if (a.assiduite_id == assiduite_id) {
+                            a.moduleimpl_id = moduleimpl_id
+                            a.etat = etat.toUpperCase();
+                        } else {
+                            return a
+                        }
+                    })
+                })
+
+                updateAllCol();
+
+
+                const count = toCreate.length + toEdit.length;
+                const etatAffiche =
+                    etat.toUpperCase() == "RETARD"
+                        ? "En retard"
+                        : etat;
+                const span = document.createElement("span");
+                if (count > 0) {
+                    span.innerHTML = `${count} étudiants ont été mis <u><strong>${etatAffiche
+                        .capitalize()
+                        .trim()}</strong></u>`;
+                } else {
+                    span.innerHTML = `Aucun étudiant n'a été mis <u><strong>${etatAffiche
+                        .capitalize()
+                        .trim()}</strong></u>`;
+                }
+
+                pushToast(
+                    generateToast(
+                        span,
+                        getToastColorFromEtat(etat.toUpperCase()),
+                        5
+                    )
+                );
+            })
+        }
+        rbtn.checked = false;
+    }
+
+    function editModuleImpl(select) {
+        const col = select.parentElement.parentElement
+        const colid = col.getAttribute('col')
+        const value = select.value;
+
+        const lines = [...document.querySelectorAll(`[assiduite_id][colid='${colid}']`)].filter((el) => {
+            return el.getAttribute('assiduite_id') != "conflit";
+        })
+
+        const toEdit = lines.filter((el) => { return el.getAttribute('assiduite_id') != '-1' })
+
+        let editList = toEdit.map((e) => {
+            return {
+                assiduite_id: Number.parseInt(e.getAttribute('assiduite_id')),
+                etudid: Number.parseInt(e.parentElement.getAttribute('etudid')),
+                moduleimpl_id: value,
+            }
+        });
+
+        asyncEditAssiduiteGroup(editList, (data) => {
+            Object.keys(data.success).forEach((k) => {
+                const { etudid, assiduite_id, moduleimpl_id } = editList[Number.parseInt(k)]
+                assiduites[etudid].map((a) => {
+                    if (a.assiduite_id == assiduite_id) {
+                        a.moduleimpl_id = moduleimpl_id
+                    } else {
+                        return a
+                    }
+                })
+            })
+
+            if (Object.keys(data.success).length > 0) {
+                const span = document.createElement("span");
+                span.innerHTML = `Le module a bien été changé.`;
+
+                pushToast(generateToast(span, getToastColorFromEtat("remove"), 5));
+            }
+
+        })
+    }
+
     window.addEventListener('load', () => {
         document.getElementById("addColumn").addEventListener("click", () => {
             createColumn();
@@ -857,6 +977,10 @@
 
         createColumn();
         setEtuds();
+
+        document.querySelectorAll('.pdp-hover').forEach((el) => {
+            el.src = getUrl() + `/api/etudiant/etudid/${el.getAttribute('etudid')}/photo?size=small`;
+        })
     }, { once: true });
 
 </script>
\ No newline at end of file
diff --git a/app/templates/assiduites/signal_assiduites_diff.j2 b/app/templates/assiduites/signal_assiduites_diff.j2
index be5f4a40b3..9735aa8a03 100644
--- a/app/templates/assiduites/signal_assiduites_diff.j2
+++ b/app/templates/assiduites/signal_assiduites_diff.j2
@@ -5,4 +5,5 @@
 
 {% include "assiduites/alert.j2" %}
 {% include "assiduites/prompt.j2" %}
-{% include "assiduites/conflict.j2" %}
\ No newline at end of file
+{% include "assiduites/conflict.j2" %}
+{% include "assiduites/toast.j2" %}
\ No newline at end of file
diff --git a/app/templates/assiduites/timeline.j2 b/app/templates/assiduites/timeline.j2
index 5a53ce6514..4f77c86d17 100644
--- a/app/templates/assiduites/timeline.j2
+++ b/app/templates/assiduites/timeline.j2
@@ -56,7 +56,7 @@
 
     function numberToTime(num) {
         const integer = Math.floor(num);
-        const decimal = (num % 1) * 60;
+        const decimal = Math.round((num % 1) * 60);
 
         let dec = `:${decimal}`;
         if (decimal < 10) {
diff --git a/app/templates/assiduites/toast.j2 b/app/templates/assiduites/toast.j2
index f1a0becffd..e15994529b 100644
--- a/app/templates/assiduites/toast.j2
+++ b/app/templates/assiduites/toast.j2
@@ -92,6 +92,25 @@
     }
 
 
+    function getToastColorFromEtat(etat) {
+        let color;
+        switch (etat.toUpperCase()) {
+            case "PRESENT":
+                color = "#6bdb83";
+                break;
+            case "ABSENT":
+                color = "#F1A69C";
+                break;
+            case "RETARD":
+                color = "#f0c865";
+                break;
+            default:
+                color = "#AAA";
+                break;
+        }
+        return color;
+    }
+
 
 
 </script>
\ No newline at end of file