Assiduité : refonte signal_assiduites_group

app/static/css/assiduites.css

@@ -6,7 +6,9 @@
   --color-justi: #29b990;
   --color-justi-clair: #48f6ff;
   --color-justi-attente: yellow;
-  --color-justi-attente-stripe: #29b990; /* pink #fa25cb; */ /* #789dbb;*/
+  --color-justi-attente-stripe: #29b990;
+  /* pink #fa25cb; */
+  /* #789dbb;*/
   --color-justi-modifie: rgb(255, 230, 0);
   --color-justi-invalide: #a84476;
   --color-nonwork: #badfff;
@@ -28,27 +30,23 @@
   --color-defaut-dark: #444;
   --color-default-text: #1f1f1f;
 
-  --motif-justi: repeating-linear-gradient(
+  --motif-justi: repeating-linear-gradient(135deg,
-    135deg,
+      transparent,
-    transparent,
+      transparent 4px,
-    transparent 4px,
+      var(--color-justi) 4px,
-    var(--color-justi) 4px,
+      var(--color-justi) 8px);
-    var(--color-justi) 8px
+  --motif-justi-invalide: repeating-linear-gradient(-135deg,
-  );
+      transparent,
-  --motif-justi-invalide: repeating-linear-gradient(
+      transparent 4px,
-    -135deg,
+      var(--color-justi-invalide) 4px,
-    transparent,
+      var(--color-justi-invalide) 8px);
-    transparent 4px,
-    var(--color-justi-invalide) 4px,
-    var(--color-justi-invalide) 8px
-  );
 }
 
 * {
   box-sizing: border-box;
 }
 
-.selectors > * {
+.selectors>* {
   margin: 10px 0;
 }
 
@@ -339,6 +337,11 @@
   background-image: url(../icons/retard.svg);
 }
 
+.rbtn.conflit::before {
+  background-color: var(--color-absent);
+  background-image: url(../icons/solveur_conflits.svg);
+}
+
 .rbtn:checked:before {
   outline: 5px solid var(--color-primary);
   border-radius: 50%;
@@ -405,29 +408,11 @@
 .assiduite {
   position: absolute;
   top: 20px;
-  cursor: pointer;
   border-radius: 4px;
   z-index: 10;
   height: 100px;
   padding: 4px;
-}
+  border: 1px solid #444;
-
-.assiduite-info {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  justify-content: space-between;
-}
-
-.assiduite-id,
-.assiduite-period,
-.assiduite-state,
-.assiduite-user_id {
-  font-size: 12px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  text-align: center;
 }
 
 .assiduites-container {
@@ -438,7 +423,7 @@
   margin-bottom: 10px;
 }
 
-.action-buttons {
+.modal-buttons {
   position: absolute;
   text-align: center;
   display: flex;
@@ -449,48 +434,35 @@
   bottom: 5%;
 }
 
-/* Ajout de la classe CSS pour la bordure en pointillés */
-.assiduite.selected {
-  border: 2px dashed black;
-}
 
 .assiduite-special {
   height: 120px;
   position: absolute;
   z-index: 5;
-  border: 2px solid #000;
+  border: 5px solid var(--color-primary);
-  background-color: rgba(36, 36, 36, 0.25);
+  /* background-color: rgba(36, 36, 36, 0.25);
-  background-image: repeating-linear-gradient(
+  background-image: repeating-linear-gradient(135deg,
-    135deg,
+      transparent,
-    transparent,
+      transparent 5px,
-    transparent 5px,
+      rgba(81, 81, 81, 0.61) 5px,
-    rgba(81, 81, 81, 0.61) 5px,
+      rgba(81, 81, 81, 0.61) 10px); */
-    rgba(81, 81, 81, 0.61) 10px
-  );
   border-radius: 5px;
 }
 
-/*<== Info sur l'assiduité sélectionnée ==>*/
+.assiduite .assiduite-bubble {
-.modal-assiduite-content {
+  top: 5px;
-  background-color: #fefefe;
+  left: 50%;
-  margin: 5% auto;
+  transform: translateX(-50%);
-  padding: 20px;
-  border: 1px solid #888;
-  width: max-content;
-  position: relative;
-  border-radius: 10px;
-  display: none;
 }
 
-.modal-assiduite-content.show {
+.action-buttons {
-  display: block;
-}
-
-.modal-assiduite-content .infos {
   display: flex;
-  flex-direction: column;
+  justify-content: center;
-  justify-content: space-evenly;
+  align-items: center;
-  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 2px;
+  height: 100%;
+
 }
 
 /*<=== Mass Action ==>*/
@@ -500,57 +472,16 @@
   justify-content: flex-start;
   align-items: center;
   width: 100%;
-  margin: 2% 0;
+  gap: 4px;
 }
 
-.mass-selection span {
+
-  margin: 0 1%;
-}
 
 .mass-selection .rbtn {
   background-color: transparent;
   cursor: pointer;
 }
 
-/*<== Loader ==> */
-
-.loader-container {
-  display: none;
-  /* Cacher le loader par défaut */
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  /* Fond semi-transparent pour bloquer les clics */
-  z-index: 9999;
-  /* Placer le loader au-dessus de tout le contenu */
-}
-
-.loader {
-  border: 6px solid #f3f3f3;
-  border-radius: 50%;
-  border-top: 6px solid var(--color-primary);
-  width: 60px;
-  height: 60px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  animation: spin 2s linear infinite;
-}
-
-@keyframes spin {
-  0% {
-    transform: translate(-50%, -50%) rotate(0deg);
-  }
-
-  100% {
-    transform: translate(-50%, -50%) rotate(360deg);
-  }
-}
-
 .fieldsplit {
   display: flex;
   justify-content: flex-start;
@@ -569,7 +500,7 @@
   flex-direction: column;
 }
 
-#page-assiduite-content > * {
+#page-assiduite-content>* {
   margin: 1.5% 0;
 }
 
@@ -649,6 +580,7 @@
   margin-right: 24px;
   padding: 12px;
 }
+
 #options-tableau label {
   font-weight: normal;
   margin-right: 12px;
@@ -657,15 +589,20 @@
 section.assi-form {
   margin-bottom: 12px;
 }
+
 table.liste_assi td.date {
   width: 140px;
 }
+
 table.liste_assi.dataTable tbody td.date-debut {
   padding-left: 12px;
 }
+
 table.liste_assi td.actions {
-  white-space: nowrap; /* boutons horizontalement */
+  white-space: nowrap;
+  /* boutons horizontalement */
 }
+
 table.liste_assi td.actions a:last-child {
   padding-right: 12px;
 }
@@ -673,31 +610,154 @@ table.liste_assi td.actions a:last-child {
 tr.row-assiduite td {
   border-bottom: 1px solid grey;
 }
+
 table.liste_assi tbody tr td.assi-type {
   padding-left: 8px;
   padding-right: 4px;
 }
+
 tr.row-assiduite.absent td.assi-type {
   background-color: var(--color-absent-clair);
 }
+
 tr.row-assiduite.absent.justifiee td.assi-type {
   background-color: var(--color-absent-justi);
 }
+
 tr.row-assiduite.retard td.assi-type {
   background-color: var(--color-retard);
 }
+
 tr.row-assiduite.present td.assi-type {
   background-color: var(--color-present);
 }
+
 tr.row-justificatif.valide td.assi-type {
   background-color: var(--color-justi);
 }
+
 tr.row-justificatif.attente td.assi-type {
   background-color: var(--color-justi-attente);
 }
+
 tr.row-justificatif.modifie td.assi-type {
   background-color: var(--color-justi-modifie);
 }
+
 tr.row-justificatif.non_valide td.assi-type {
   background-color: var(--color-justi-invalide);
 }
+
+/* 
+
+<== Loader ==>
+
+*/
+/* HTML: <div class="loader"></div> */
+.loader {
+  width: 80px;
+  height: 70px;
+  border: 5px solid #000;
+  padding: 0 8px;
+  box-sizing: border-box;
+  background:
+    linear-gradient(#fff 0 0) 0 0/8px 20px,
+    linear-gradient(#fff 0 0) 100% 0/8px 20px,
+    radial-gradient(farthest-side, #fff 90%, #0000) 0 5px/8px 8px content-box,
+    #000;
+  background-repeat: no-repeat;
+  animation: l3 2s infinite linear;
+}
+
+@keyframes l3 {
+  25% {
+    background-position: 0 0, 100% 100%, 100% calc(100% - 5px)
+  }
+
+  50% {
+    background-position: 0 100%, 100% 100%, 0 calc(100% - 5px)
+  }
+
+  75% {
+    background-position: 0 100%, 100% 0, 100% 5px
+  }
+}
+
+#loader {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  transform: translate(-50%, -50%);
+  z-index: 1000;
+  background-color: rgba(255, 255, 255, 0.8);
+}
+
+/**
+  * <== Couleurs ==>
+  */
+
+.color.present {
+  background-color: var(--color-present) !important;
+}
+
+.color.absent {
+  background-color: var(--color-absent) !important;
+}
+
+.color.absent.est_just {
+  background-color: var(--color-absent-justi) !important;
+}
+
+.color.retard {
+  background-color: var(--color-retard) !important;
+}
+
+.color.retard.est_just {
+  background-color: var(--color-retard-justi) !important;
+}
+
+.color.nonwork {
+  background-color: var(--color-nonwork) !important;
+}
+
+.color {
+  background-color: var(--color-defaut) !important;
+}
+
+.color.est_just.sans_etat::before {
+  content: "";
+  position: absolute;
+  width: 25%;
+  height: 100%;
+  background-color: var(--color-justi) !important;
+  right: 0;
+}
+
+.color.invalide::before {
+  content: "";
+  position: absolute;
+  width: 25%;
+  height: 100%;
+  right: 0;
+  background-color: var(--color-justi-invalide) !important;
+}
+
+.color.attente::before,
+.color.modifie::before {
+  content: "";
+  position: absolute;
+  width: 25%;
+  height: 100%;
+  right: 0;
+  background: repeating-linear-gradient(to bottom,
+      var(--color-justi-attente-stripe) 0px,
+      var(--color-justi-attente-stripe) 4px,
+      var(--color-justi-attente) 4px,
+      var(--color-justi-attente) 7px) !important;
+}

app/static/icons/solveur_conflits.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg  fill="#000000" height="85" width="85" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 482.568 482.568" xml:space="preserve">
+<g>
+	<g opacity="0.7">
+		<path d="M116.993,203.218c13.4-1.8,26.8,2.8,36.3,12.3l24,24l22.7-22.6l-32.8-32.7c-5.1-5.1-5.1-13.4,0-18.5s13.4-5.1,18.5,0
+			l32.8,32.8l22.7-22.6l-24.1-24.1c-9.5-9.5-14.1-23-12.3-36.3c4-30.4-5.7-62.2-29-85.6c-23.8-23.8-56.4-33.4-87.3-28.8
+			c-4.9,0.7-6.9,6.8-3.4,10.3l30.9,30.9c14.7,14.7,14.7,38.5,0,53.1l-19,19c-14.7,14.7-38.5,14.7-53.1,0l-31-30.9
+			c-3.5-3.5-9.5-1.5-10.3,3.4c-4.6,30.9,5,63.5,28.8,87.3C54.793,197.518,86.593,207.218,116.993,203.218z"/>
+		<path d="M309.193,243.918l-22.7,22.6l134.8,134.8c5.1,5.1,5.1,13.4,0,18.5s-13.4,5.1-18.5,0l-134.8-134.8l-22.7,22.6l138.9,138.9
+			c17.6,17.6,46.1,17.5,63.7-0.1s17.6-46.1,0.1-63.7L309.193,243.918z"/>
+		<path d="M361.293,153.918h59.9l59.9-119.7l-29.9-29.9l-119.8,59.8v59.9l-162.8,162.3l-29.3-29.2l-118,118
+			c-24.6,24.6-24.6,64.4,0,89s64.4,24.6,89,0l118-118l-29.9-29.9L361.293,153.918z"/>
+	</g>
+</g>
+</svg>

app/templates/assiduites/pages/signal_assiduites_group.j2

@@ -13,6 +13,7 @@
 <script src="{{scu.STATIC_DIR}}/js/groups_view.js"></script>
 <script src="{{scu.STATIC_DIR}}/js/date_utils.js"></script>
 <script src="{{scu.STATIC_DIR}}/js/assiduites.js"></script>
+{% include "sco_timepicker.j2" %}
 
 <script>
 
@@ -20,33 +21,21 @@
     function getPeriodValues() {
         return [0, 23]
     }
+    {% else %}
+    setupTimeLine(()=>{creerTousLesEtudiants(etuds)})
     {% endif %}
 
+    
 
     const nonWorkDays = [{{ nonworkdays| safe }}];
-
     const readOnly = {{ readonly }};
 
-
-    setupDate();
-    updateDate();
-    if (!readOnly) {
-        setupTimeLine(() => {
-            generateAllEtudRow();
-        });
-    }
-
     window.forceModule = "{{ forcer_module }}"
     window.forceModule = window.forceModule == "True" ? true : false
-
     const etudsDefDem = {{ defdem  | safe }}
 
     const select = document.getElementById("moduleimpl_select");
 
-    select?.addEventListener('change', (e) => {
-        generateAllEtudRow();
-    });
-
     if (window.forceModule) {
         const btn = document.getElementById("validate_selectors");
 
@@ -63,12 +52,51 @@
             }
         });
     }
+
+    document.getElementById("pdp").addEventListener("change", (e) => {
+        creerTousLesEtudiants(etuds);
+    });
+
+    $('#date').on('change', async function(d) {
+        // On vérifie si la date est un jour travaillé
+        dateCouranteEstTravaillee();
+        
+
+
+        await recupAssiduites(etuds, $("#date").datepicker("getDate"));
+        creerTousLesEtudiants(etuds);
+    });
+
+    $("#moduleimpl_select").on("change", ()=>{
+        creerTousLesEtudiants(etuds);
+    });
+
+    $("#group_ids_sel").on("change", ()=>{
+        main();
+    })
+
+    const moduleimpls = {};
+    const inscriptionsModules = new Map();
+    let etuds = new Map();
+
+    async function main(){
+        dateCouranteEstTravaillee();
+        etuds = await recupEtuds($('#group_ids_sel').val());
+        if (etuds.size != 0){
+            await recupAssiduites(etuds, $("#date").datepicker("getDate"));
+        }
+        creerTousLesEtudiants(etuds);
+        
+    }
+
+    setTimeout(main, 0);
+
+
 </script>
 {% endblock scripts %}
 
 {% block styles %}
 {{ super() }}
-<link rel="stylesheet" href="{{scu.STATIC_DIR}}/libjs/bootstrap/css/bootstrap.min.css">
 <link rel="stylesheet" href="{{scu.STATIC_DIR}}/libjs/bootstrap/css/bootstrap-theme.min.css">
 <link rel="stylesheet" href="{{scu.STATIC_DIR}}/libjs/bootstrap-multiselect-1.1.2/bootstrap-multiselect.min.css">
 <link rel="stylesheet" href="{{scu.STATIC_DIR}}/css/assiduites.css">
@@ -77,14 +105,8 @@
 
 
 {% block app_content %}
-{% include "assiduites/widgets/toast.j2" %}
 
 {{ minitimeline|safe }}
-<style>
-    #moduleimpl_select {
-        max-width: 200px;
-    }
-</style>
 <section id="content">
 
     <div class="no-display">
@@ -104,15 +126,16 @@
     <fieldset class="selectors">
         <div class="infos">
             <div class="infos-button">Groupes&nbsp;: {{grp|safe}}</div>
-            <div class="infos-button" style="margin-left: 24px;">Date&nbsp;: <span style="margin-left: 8px;"
+            <div>
-                    id="datestr"></span>
+            <input type="text" name="date" id="date" class="datepicker" value="{{date}}">
-                <input type="text" name="tl_date" id="tl_date" value="{{ date }}" onchange="updateDate()">
             </div>
         </div>
     </fieldset>
+    <div style="display: {{'none' if readonly == 'true' else 'block'}};">
+    {{timeline|safe}}
+    </div>
 
     {% if readonly == "false" %}
-    {{timeline|safe}}
 
     <div style="margin: 1vh 0;">
         <div id="forcemodule" style="display: none; margin:10px 0px;">
@@ -123,46 +146,40 @@
     {% else %}
     {% endif %}
 
-    {% if readonly == "true" %}
+    <div>
-    <button id="validate_selectors" onclick="validateSelectors(this)">
+        <label for="pdp">
-        Voir l'assiduité
+            <span>Afficher les photos</span>
-    </button>
+            <input type="checkbox" name="pdp" id="pdp">
-    {% else %}
+        </label>
-    <button id="validate_selectors" onclick="validateSelectors(this)">
+    </div>
-        Faire la saisie
+    {% if readonly == "false" %}
-    </button>
+    <div class="mass-selection">
+        <span>Mettre tout le monde :</span>
+        <fieldset class="btns_field mass">
+            <input type="checkbox" value="present" name="mass_btn_assiduites" id="mass_rbtn_present"
+                class="rbtn present" onclick="mettreToutLeMonde('present', this)" title="Present">
+            <input type="checkbox" value="retard" name="mass_btn_assiduites" id="mass_rbtn_retard"
+                class="rbtn retard" onclick="mettreToutLeMonde('retard', this)" title="Retard">
+            <input type="checkbox" value="absent" name="mass_btn_assiduites" id="mass_rbtn_absent"
+                class="rbtn absent" onclick="mettreToutLeMonde('absent', this)" title="Absent">
+            <input type="checkbox" value="remove" name="mass_btn_assiduites" id="mass_rbtn_aucun"
+                class="rbtn aucun" onclick="mettreToutLeMonde('vide', this)" title="Supprimer">
+        </fieldset>
+    </div>
     {% endif %}
-
+    
 
     <div class="etud_holder">
         <p class="placeholder">
         </p>
     </div>
-    <div class="legende">
-        <h3>Explication diverses</h3>
-        <p>
-            Si la période indiquée par la timeline provoque un conflit d'assiduité pour un étudiant sa ligne deviendra
-            rouge.
-            <br>
-            Dans ce cas il faut résoudre manuellement le conflit : cliquez sur un des boutons d'assiduités pour ouvrir
-            le
-            résolveur de conflit.
-            <br>
-            Correspondance des couleurs :
-        </p>
-        <ul>
-            {% include "assiduites/widgets/legende_couleur.j2" %}
-        </ul>
-    </div>
-    <!-- Ajout d'un conteneur pour le loader -->
-    <div class="loader-container" id="loaderContainer">
-        <div class="loader"></div>
-    </div>
 
+    {% include "assiduites/widgets/toast.j2" %}
     {% include "assiduites/widgets/alert.j2" %}
     {% include "assiduites/widgets/prompt.j2" %}
     {% include "assiduites/widgets/conflict.j2" %}
+    
 
 </section>
 
-{% endblock app_content %}
+{% endblock app_content %}

app/templates/assiduites/widgets/conflict.j2

@@ -1,118 +1,100 @@
 <script>
-    /**
+/**
-     * Transformation d'une date de début en position sur la timeline
+ * Transformation d'une date de début en position sur la timeline
-     * @param {String} start
+ * @param {String} start
-     * @returns {String} un déplacement par rapport à la gauche en %
+ * @returns {String} un déplacement par rapport à la gauche en %
-     */
+ */
-    function getLeftPosition(start) {
+function getLeftPosition(start) {
-        const startTime = new Date(start);
+  const startTime = new Date(start);
-        const startMins = (startTime.getHours() - t_start) * 60 + startTime.getMinutes();
+  const startMins =
-        return (startMins / (t_end * 60 - t_start * 60)) * 100 + "%";
+    (startTime.getHours() - t_start) * 60 + startTime.getMinutes();
-    }
+  return (startMins / (t_end * 60 - t_start * 60)) * 100 + "%";
-    /**
+}
-    * Ajustement de l'espacement vertical entre les assiduités superposées
+/**
-    * @param {HTMLElement} container le conteneur des assiduités
+ * Ajustement de l'espacement vertical entre les assiduités superposées
-    * @param {String} start la date début de l'assiduité à placer
+ * @param {HTMLElement} container le conteneur des assiduités
-    * @param {String} end la date de fin de l'assiduité à placer
+ * @param {String} start la date début de l'assiduité à placer
-    * @returns {String} La position en px
+ * @param {String} end la date de fin de l'assiduité à placer
-    */
+ * @returns {String} La position en px
-    function getTopPosition(container, start, end) {
+ */
-        const overlaps = (a, b) => {
+function getTopPosition(container, start, end) {
-            return a.start < b.end && a.end > b.start;
+  const overlaps = (a, b) => {
-        };
+    return a.start < b.end && a.end > b.start;
+  };
 
-        const startTime = new Date(start);
+  const startTime = new Date(start);
-        const endTime = new Date(end);
+  const endTime = new Date(end);
-        const assiduiteDuration = { start: startTime, end: endTime };
+  const assiduiteDuration = { start: startTime, end: endTime };
 
-        let position = 0;
+  let position = 0;
-        let hasOverlap = true;
+  let hasOverlap = true;
 
-        while (hasOverlap) {
+  while (hasOverlap) {
-            hasOverlap = false;
+    hasOverlap = false;
-            Array.from(container.children).some((el) => {
+    Array.from(container.children).some((el) => {
-                const elStart = new Date(el.getAttribute("data-start"));
+      const elStart = new Date(el.getAttribute("data-start"));
-                const elEnd = new Date(el.getAttribute("data-end"));
+      const elEnd = new Date(el.getAttribute("data-end"));
-                const elDuration = { start: elStart, end: elEnd };
+      const elDuration = { start: elStart, end: elEnd };
 
-                if (overlaps(assiduiteDuration, elDuration)) {
+      if (overlaps(assiduiteDuration, elDuration)) {
-                    position += 25; // Pour ajuster l'espacement vertical entre les assiduités superposées
+        position += 25; // Pour ajuster l'espacement vertical entre les assiduités superposées
-                    hasOverlap = true;
+        hasOverlap = true;
-                    return true;
+        return true;
-                }
+      }
-                return false;
+      return false;
-            });
+    });
-        }
+  }
-        return position + "px";
+  return position + "px";
+}
+
+/**
+ * Calcule de la largeur de l'assiduité sur la timeline
+ * @param {String} start date iso de début
+ * @param {String} end date iso de fin
+ * @returns {String} la taille en %
+ */
+function getWidth(start, end) {
+  const startTime = new Date(start);
+  const endTime = new Date(end);
+
+  const duration = (endTime - startTime) / 1000 / 60;
+
+  const percent = (duration / (t_end * 60 - t_start * 60)) * 100;
+  return percent + "%";
+}
+
+function formatDateModal(date) {
+  return new Date(Date.removeUTC(date)).format("DD/MM/Y HH:mm");
+}
+
+class ConflitResolver {
+  constructor(assiduitesList, conflictPeriod, interval) {
+    this.list = assiduitesList;
+    this.conflictPeriod = conflictPeriod;
+    this.interval = interval;
+    this.selectedAssiduite = null;
+
+    this.element = undefined;
+
+    this.callbacks = {
+      delete: () => {},
+      split: () => {},
+      edit: () => {},
+    };
+  }
+
+  refresh(assiduitesList, periode) {
+    this.list = assiduitesList;
+    if (periode) {
+      this.conflictPeriod = periode;
     }
 
-    /**
+    this.render();
-     * Transformation d'un état en couleur
+  }
-     * @param {String} state l'état
-     * @returns {String} la couleur correspondant à l'état
-     */
-    function getColor(state) {
-        switch (state) {
-            case "PRESENT":
-                return "var(--color-present)";
-            case "ABSENT":
-                return "var(--color-absent)";
-            case "RETARD":
-                return "var(--color-retard)";
-            default:
-                return "var(--color-defaut-dark)";
-        }
-    }
 
-    /**
+  open() {
-    * Calcule de la largeur de l'assiduité sur la timeline
+    const html = `
-    * @param {String} start date iso de début
+                <div id="myModal" class="modal">
-    * @param {String} end date iso de fin
-    * @returns {String} la taille en %
-    */
-    function getWidth(start, end) {
-        const startTime = new Date(start);
-        const endTime = new Date(end);
-
-        const duration = (endTime - startTime) / 1000 / 60;
-
-        const percent = (duration / (t_end * 60 - t_start * 60)) * 100
-        return percent + "%";
-    }
-
-    class ConflitResolver {
-        constructor(assiduitesList, conflictPeriod, interval) {
-            this.list = assiduitesList;
-            this.conflictPeriod = conflictPeriod;
-            this.interval = interval;
-            this.selectedAssiduite = null;
-
-            this.element = undefined;
-
-            this.callbacks = {
-                delete: () => { },
-                split: () => { },
-                edit: () => { },
-            }
-        }
-
-        refresh(assiduitesList, periode) {
-            this.list = assiduitesList;
-            if (periode) {
-                this.conflictPeriod = periode;
-            }
-
-            this.render()
-
-        }
-
-        selectAssiduite() {
-
-        }
-
-        open() {
-            const html = `
-                        <div id="myModal" class="modal">
                     <div class="modal-content">
                         <span class="close">&times;</span>
                         <h2>Veuillez régler le conflit pour poursuivre</h2>
@@ -122,201 +104,264 @@
                             <div class="assiduites-container"></div>
                         </div>
 
-                        <div class="action-buttons">
+                        <div class="modal-buttons">
                             <button id="finish" class="btnPrompt">Quitter</button>
-                            <button id="delete" class="btnPrompt" disabled>Supprimer</button>
-                            <button id="split" class="btnPrompt" disabled>Séparer</button>
-                            <button id="edit" class="btnPrompt" disabled>Modifier l'état</button>
-                        </div>
-                    </div>
-
-                    <div class="modal-assiduite-content">
-                        <h2>Information de l'assiduité sélectionnée</h2>
-                        <div class="infos">
-                            <p>Assiduite id : <span id="modal-assiduite-id">A</span></p>
-                            <p>Etat : <span id="modal-assiduite-etat">B</span></p>
-                            <p>Date de début : <span id="modal-assiduite-deb">C</span></p>
-                            <p>Date de fin: <span id="modal-assiduite-fin">D</span></p>
-                            <p>Module : <span id="modal-assiduite-module">E</span></p>
-                            <p><span id="modal-assiduite-user">F</span></p>
                         </div>
                     </div>
                 </div>
             `;
 
-            document.body.insertAdjacentHTML("afterbegin", html);
+    document.body.insertAdjacentHTML("afterbegin", html);
-            this.element = document.getElementById('myModal');
+    this.element = document.getElementById("myModal");
-            this.deleteBtn = document.querySelector('#myModal #delete');
+    document.querySelector("#myModal #finish").addEventListener("click", () => {
-            this.editBtn = document.querySelector('#myModal #edit');
+      this.close();
-            this.splitBtn = document.querySelector('#myModal #split');
+    });
-            this.deleteBtn.addEventListener('click', () => { this.deleteAssiduiteModal() });
-            this.editBtn.addEventListener('click', () => { this.editAssiduiteModal() });
-            this.splitBtn.addEventListener('click', () => { this.splitAssiduiteModal() });
-            document.querySelector("#myModal #finish").addEventListener('click', () => { this.close() })
 
-            document.querySelector('#myModal .close').addEventListener('click', () => { this.close() })
+    document.querySelector("#myModal .close").addEventListener("click", () => {
+      this.close();
+    });
 
-            // fermeture du modal en appuyant sur echap
+    // fermeture du modal en appuyant sur echap
-            document.addEventListener('keydown', (e) => {
+    document.addEventListener(
-                if (e.key === 'Escape') {
+      "keydown",
-                    this.close()
+      (e) => {
-                }
+        if (e.key === "Escape") {
-            }, { once: true })
+          this.close();
-
-            this.render()
         }
+      },
+      { once: true }
+    );
 
+    this.render();
+  }
 
+  close() {
+    if (this.element) {
+      this.element.remove();
+    }
+  }
 
-        close() {
+  /**
-            if (this.element) {
+   * Génération du modal
-                this.element.remove()
+   */
+  render() {
+    const timeLabels = document.querySelector(".time-labels");
+    const assiduitesContainer = document.querySelector(".assiduites-container");
+
+    timeLabels.innerHTML = "";
+    assiduitesContainer.innerHTML = '<div class="assiduite-special"></div>';
+
+    // Ajout des labels d'heure sur la frise chronologique
+    for (let i = t_start; i <= t_end; i++) {
+      const timeLabel = document.createElement("div");
+      timeLabel.className = "time-label";
+      timeLabel.textContent = numberToTime(i);
+      timeLabels.appendChild(timeLabel);
+    }
+
+    //Placement de la période conflictuelle sur la timeline
+    const specialAssiduiteEl = document.querySelector(".assiduite-special");
+
+    specialAssiduiteEl.style.width = getWidth(
+      this.conflictPeriod.deb,
+      this.conflictPeriod.fin
+    );
+    specialAssiduiteEl.style.left = getLeftPosition(this.conflictPeriod.deb);
+    specialAssiduiteEl.style.top = "0";
+    specialAssiduiteEl.style.zIndex = "0"; // Place l'assiduité spéciale en arrière-plan
+    assiduitesContainer.appendChild(specialAssiduiteEl);
+
+    //Placement des assiduités sur la timeline
+    this.list.forEach((assiduite) => {
+      const period = {
+        deb: new Date(assiduite.date_debut),
+        fin: new Date(assiduite.date_fin),
+      };
+      if (!hasTimeConflict(period, this.interval)) {
+        return;
+      }
+      const el = document.createElement("div");
+      el.classList.add("assiduite", "color", assiduite.etat.toLowerCase());
+
+      el.style.width = getWidth(assiduite.date_debut, assiduite.date_fin);
+      el.style.left = getLeftPosition(assiduite.date_debut);
+      el.style.top = "10px";
+      el.setAttribute("data-id", assiduite.assiduite_id);
+      el.addEventListener("click", () => {});
+
+      // Génération des boutons d'action (supprimer, éditer, diviser)
+      const actionButtons = document.createElement("div");
+      actionButtons.className = "action-buttons";
+      const deleteButton = document.createElement("button");
+      deleteButton.textContent = "🗑️";
+      deleteButton.addEventListener("click", () => {
+        this.supprimerAssiduite(assiduite);
+      });
+      const editButton = document.createElement("button");
+      editButton.textContent = "📝";
+      editButton.addEventListener("click", () => {
+        this.editerAssiduite(assiduite);
+      });
+      const splitButton = document.createElement("button");
+      splitButton.textContent = "✂️";
+      splitButton.addEventListener("click", () => {
+        this.spliterAssiduite(assiduite);
+      });
+
+      actionButtons.appendChild(editButton);
+      actionButtons.appendChild(splitButton);
+      actionButtons.appendChild(deleteButton);
+      el.appendChild(actionButtons);
+
+      setupAssiduiteBubble(el, assiduite);
+      assiduitesContainer.appendChild(el);
+    });
+  }
+
+  supprimerAssiduite(assiduite) {
+    const html = `
+                <p>Êtes-vous sûr de vouloir supprimer cette assiduité ?</p>
+            `;
+    const div = document.createElement("div");
+    div.innerHTML = html;
+
+    openPromptModal(
+      "Suppression de l'assiduité",
+      div,
+      async (closePromptModal) => {
+        await async_post(
+          `../../api/assiduite/delete`,
+          [assiduite.assiduite_id],
+          async (data) => {
+            if (data.success.length > 0) {
+              const etud = etuds.get(Number(assiduite.etudid));
+              await MiseAJourLigneEtud(etud);
+              this.refresh(etud.assiduites, this.conflictPeriod);
+              closePromptModal();
+            } else {
+              console.error(data.errors["0"].message);
             }
-        }
+          },
+          (error) => {
+            console.error(
+              "Erreur lors de la suppression de l'assiduité",
+              error
+            );
+          }
+        );
+      },
+      () => {},
+      "var(--color-error)"
+    );
+  }
 
-        /**
+  editerAssiduite(assiduite) {
-        * Sélection d'une assiduité sur la timeline
+    // Select pour choisir l'état de l'assiduité
-        * @param {Assiduité} assiduite l'assiduité sélectionnée
+
-        */
+    const html = `
-        selectAssiduite(assiduite) {
+                <select id="etat" name="etat">
-            // Désélectionner l'assiduité précédemment sélectionnée
+                    <option disabled>Choisir un état</option>
-            if (this.selectedAssiduite) {
+                    <option value="present">Présent</option>
-                const prevSelectedEl = document.querySelector(
+                    <option value="absent">Absent</option>
-                    `.assiduite[data-id="${this.selectedAssiduite.assiduite_id}"]`
+                    <option value="retard">Retard</option>
-                );
+                </select>
-                if (prevSelectedEl) {
+            `;
-                    prevSelectedEl.classList.remove("selected");
+
-                }
+    const div = document.createElement("div");
+    div.innerHTML = html;
+    div.style.display = "flex";
+    div.style.justifyContent = "center";
+
+    openPromptModal(
+      "Modifier l'état de l'assiduité",
+      div,
+      async (closePromptModal) => {
+        const etatAssi = etat.value;
+        if (!etat) return true;
+
+        await async_post(
+            `../../api/assiduite/${assiduite.assiduite_id}/edit`,
+            {
+                etat: etatAssi,
+            },
+            async (data) => {
+                const etud = etuds.get(Number(assiduite.etudid));
+                await MiseAJourLigneEtud(etud);
+                this.refresh(etud.assiduites, this.conflictPeriod);
+                closePromptModal();
+            },
+            (error) => {
+                console.error("Erreur lors de la modification de l'assiduité", error);
             }
+        );
 
-            // Sélectionner la nouvelle assiduité
+      },
-            this.selectedAssiduite = assiduite;
+      () => {},
-            const selectedEl = document.querySelector(
+      "var(--color-present)"
-                `.assiduite[data-id="${assiduite.assiduite_id}"]`
+    );
-            );
+  }
-            if (selectedEl) {
-                selectedEl.classList.add("selected");
-            }
 
-            //Mise à jour de la partie information du modal
+  spliterAssiduite(assiduite) {
-            const selectedModal = document.querySelector(".modal-assiduite-content");
+    // Select pour choisir l'état de l'assiduité
+    const creneau = getPeriodAsDate()
+    creneau.deb = creneau.deb.format().substring(11,16)
+    creneau.fin = creneau.fin.format().substring(11,16)
+    const html = `
+                <p>La période conflictuelle s'étend de ${creneau.deb} à ${creneau.fin}</p>
+                <br>
+                <input type="text" id="promptTime" name="promptTime" class="timepicker"
+                placeholder="Cliquez pour choisir un horaire" required>
+            `;
 
-            selectedModal.classList.add("show");
+    const div = document.createElement("div");
+    div.innerHTML = html;
+    div.style.display = "flex";
+    div.style.justifyContent = "center";
+    div.style.flexDirection = "column";
 
-            document.getElementById("modal-assiduite-id").textContent =
+    openPromptModal(
-                assiduite.assiduite_id;
+      "Séparer l'assiduité",
-            document.getElementById(
+      div,
-                "modal-assiduite-user"
+      async (closePromptModal) => {
-            ).textContent = `saisie le ${formatDateModal(
+        const separateur = promptTime.value;
-                assiduite.entry_date,
+        if (separateur === "") return true;
-                "à"
-            )} \npar ${assiduite.user_id}`;
-            document.getElementById("modal-assiduite-module").textContent =
-                assiduite.moduleimpl_id;
-            document.getElementById("modal-assiduite-deb").textContent = formatDateModal(
-                assiduite.date_debut
-            );
-            document.getElementById("modal-assiduite-fin").textContent = formatDateModal(
-                assiduite.date_fin
-            );
-            document.getElementById("modal-assiduite-etat").textContent =
-                assiduite.etat.capitalize();
 
-            //Activation des boutons d'actions de conflit
+        const assiduiteAvant = {...assiduite};
-            this.deleteBtn.disabled = false;
+        const assiduiteAprès = {...assiduite};
-            this.splitBtn.disabled = false;
-            this.editBtn.disabled = false;
-        }
-        /**
-        * Suppression de l'assiduité sélectionnée
-        */
-        deleteAssiduiteModal() {
-            if (!this.selectedAssiduite) return;
-            deleteAssiduite(this.selectedAssiduite.assiduite_id);
 
-            this.callbacks.delete(this.selectedAssiduite)
+        assiduiteAvant.date_fin = assiduite.date_fin.substring(0,11) + separateur;
+        assiduiteAprès.date_debut = assiduite.date_debut.substring(0,11) + separateur;
 
-            this.refresh(assiduites[this.selectedAssiduite.etudid]);
+        // On supprime l'assiduité actuelle
+        await async_post(
+          "../../api/assiduite/delete",
+          [assiduite.assiduite_id],
+          (data)=>{console.log(data)},
+          ()=>{},
+        )
 
-            // Désélection de l'assiduité
+        // On ajoute les deux nouvelles assiduités
-            this.resetSelection();
+        await async_post(
-        }
+          "../../api/assiduites/create",
+          [assiduiteAvant, assiduiteAprès],
+          async (data)=>{
+            console.log(data);
+            const etud = etuds.get(Number(assiduite.etudid));
+            await MiseAJourLigneEtud(etud);
+            this.refresh(etud.assiduites, this.conflictPeriod);
+            closePromptModal();
+          },
+          ()=>{},
+        )
 
-        /**
+      },
-        * Division d'une assiduité
+      () => {},
-        */
+      "var(--color-retard)"
-        splitAssiduiteModal() {
+    );
-            //Préparation du prompt
+  
-            const htmlPrompt = `<legend>Entrez l'heure de séparation</legend>
+    // Initialisation du timepicker
-            <input type="text" id="promptTime" name="appt"required style="position: relative; z-index: 100000;">`;
+            const deb = assiduite.date_debut.substring(11,16);
-
+            const fin = assiduite.date_fin.substring(11,16);
-            const fieldSet = document.createElement("fieldset");
-            fieldSet.classList.add("fieldsplit", "timepicker");
-            fieldSet.innerHTML = htmlPrompt;
-
-            //Callback de division
-            const success = () => {
-                const separatorTime = document.getElementById("promptTime").value;
-                const dateString =
-                    getDate().format("YYYY-MM-DD") + `T${separatorTime}`;
-                const separtorDate = new Date(dateString);
-
-                const assiduite_debut = new Date(this.selectedAssiduite.date_debut);
-                const assiduite_fin = new Date(this.selectedAssiduite.date_fin);
-
-                if (
-                    separtorDate.isAfter(assiduite_debut) &&
-                    separtorDate.isBefore(assiduite_fin)
-                ) {
-                    const assiduite_avant = {
-                        etat: this.selectedAssiduite.etat,
-                        date_debut: assiduite_debut.toFakeIso(),
-                        date_fin: separtorDate.toFakeIso(),
-                    };
-
-                    const assiduite_apres = {
-                        etat: this.selectedAssiduite.etat,
-                        date_debut: separtorDate.toFakeIso(),
-                        date_fin: assiduite_fin.toFakeIso(),
-                    };
-
-                    if (this.selectedAssiduite.moduleimpl_id) {
-                        assiduite_apres["moduleimpl_id"] = this.selectedAssiduite.moduleimpl_id;
-                        assiduite_avant["moduleimpl_id"] = this.selectedAssiduite.moduleimpl_id;
-                    }
-
-                    deleteAssiduite(this.selectedAssiduite.assiduite_id);
-
-                    const path = getUrl() + `/api/assiduite/${this.selectedAssiduite.etudid}/create`;
-                    sync_post(
-                        path,
-                        [assiduite_avant, assiduite_apres],
-                        (data, status) => {
-                            //success
-                        },
-                        (data, status) => {
-                            //error
-                            console.error(data, status);
-                            errorAlert();
-                        }
-                    );
-
-                    this.callbacks.split(this.selectedAssiduite)
-                    this.refresh(assiduites[this.selectedAssiduite.etudid]);
-                    this.resetSelection();
-                } else {
-                    const att = document.createTextNode(
-                        "L'heure de séparation doit être compris dans la période de l'assiduité sélectionnée."
-                    );
-
-                    openAlertModal("Attention", att, "", "var(--color-warning)");
-                }
-            };
-
-            openPromptModal("Séparation de l'assiduité sélectionnée", fieldSet, success, () => { }, "var(--color-present)");
-            // Initialisation du timepicker
-            const deb = this.selectedAssiduite.date_debut.substring(11,16);
-            const fin = this.selectedAssiduite.date_fin.substring(11,16);
             setTimeout(()=>{
                 $('#promptTime').timepicker({
                 timeFormat: 'HH:mm',
@@ -331,150 +376,15 @@
             });
             }, 100
             );
-        }
+  }
 
-        /**
+  
-        * Modification d'une assiduité conflictuelle
+}
-        */
-        editAssiduiteModal() {
-            if (!this.selectedAssiduite) return;
-
-            //Préparation du modal d'édition
-            const htmlPrompt = `<legend>Entrez l'état de l'assiduité :</legend>
-            <select name="promptSelect" id="promptSelect" required>
-                <option value="">Choissez l'état</option>
-                <option value="present">Présent</option>
-                <option value="retard">En Retard</option>
-                <option value="absent">Absent</option>
-            </select>`;
-
-            const fieldSet = document.createElement("fieldset");
-            fieldSet.classList.add("fieldsplit");
-            fieldSet.innerHTML = htmlPrompt;
-
-            //Callback d'action d'édition
-            const success = () => {
-                const newState = document.getElementById("promptSelect").value;
-                if (!["present", "absent", "retard"].includes(newState.toLowerCase())) {
-                    const att = document.createTextNode(
-                        "L'état doit être 'present', 'absent' ou 'retard'."
-                    );
-                    openAlertModal("Attention", att, "", "var(--color-warning)");
-                    return;
-                }
-
-                // Actualiser l'affichage
-
-                editAssiduite(this.selectedAssiduite.assiduite_id, newState, [this.selectedAssiduite]);
-                this.callbacks.edit(this.selectedAssiduite)
-                this.refresh(assiduites[this.selectedAssiduite.etudid]);
-
-                // Désélection de l'assiduité
-                this.resetSelection();
-            };
-
-            //Affichage du prompt
-            openPromptModal("Modification de l'état de l'assiduité sélectionnée", fieldSet, success, () => { }, "var(--color-present)");
-        }
-
-        /**
-        * Génération du modal
-        */
-        render() {
-            const timeLabels = document.querySelector(".time-labels");
-            const assiduitesContainer = document.querySelector(".assiduites-container");
-
-            timeLabels.innerHTML = "";
-            assiduitesContainer.innerHTML = '<div class="assiduite-special"></div>';
-
-            // Ajout des labels d'heure sur la frise chronologique
-            for (let i = t_start; i <= t_end; i++) {
-                const timeLabel = document.createElement("div");
-                timeLabel.className = "time-label";
-                timeLabel.textContent = i < 10 ? `0${i}:00` : `${i}:00`;
-                timeLabels.appendChild(timeLabel);
-            }
-
-            //Placement de la période conflictuelle sur la timeline
-            const specialAssiduiteEl = document.querySelector(".assiduite-special");
-
-            specialAssiduiteEl.style.width = getWidth(
-                this.conflictPeriod.deb,
-                this.conflictPeriod.fin
-            );
-            specialAssiduiteEl.style.left = getLeftPosition(this.conflictPeriod.deb);
-            specialAssiduiteEl.style.top = "0";
-            specialAssiduiteEl.style.zIndex = "0"; // Place l'assiduité spéciale en arrière-plan
-            assiduitesContainer.appendChild(specialAssiduiteEl);
 
 
-
+    
-            //Placement des assiduités sur la timeline
-            this.list.forEach((assiduite) => {
-                const period = {
-                    deb: new Date(assiduite.date_debut),
-                    fin: new Date(assiduite.date_fin),
-                };
-                if (!hasTimeConflict(period, this.interval)) {
-                    return;
-                }
-                const el = document.createElement("div");
-                el.className = "assiduite";
-                el.style.backgroundColor = getColor(assiduite.etat);
 
 
-                el.style.width = getWidth(assiduite.date_debut, assiduite.date_fin);
-                el.style.left = getLeftPosition(assiduite.date_debut);
-                el.style.top = "10px";
-                el.setAttribute("data-id", assiduite.assiduite_id);
-                el.addEventListener("click", () => this.selectAssiduite(assiduite));
-
-                // Ajout des informations dans la visualisation d'une assiduité
-                const infoContainer = document.createElement("div");
-                infoContainer.className = "assiduite-info";
-
-                const idDiv = document.createElement("div");
-                idDiv.className = "assiduite-id";
-                idDiv.textContent = `ID: ${assiduite.assiduite_id}`;
-                infoContainer.appendChild(idDiv);
-
-                const periodDivDeb = document.createElement("div");
-                periodDivDeb.className = "assiduite-period";
-                periodDivDeb.textContent = `${formatDateModal(assiduite.date_debut)}`;
-                infoContainer.appendChild(periodDivDeb);
-                const periodDivFin = document.createElement("div");
-                periodDivFin.className = "assiduite-period";
-                periodDivFin.textContent = `${formatDateModal(assiduite.date_fin)}`;
-                infoContainer.appendChild(periodDivFin);
-
-                const stateDiv = document.createElement("div");
-                stateDiv.className = "assiduite-state";
-                stateDiv.textContent = `État: ${assiduite.etat.capitalize()}`;
-                infoContainer.appendChild(stateDiv);
-
-                const userIdDiv = document.createElement("div");
-                userIdDiv.className = "assiduite-user_id";
-                userIdDiv.textContent = `saisie le ${formatDateModal(
-                    assiduite.entry_date,
-                    "à"
-                )} \npar ${assiduite.user_id}`;
-                infoContainer.appendChild(userIdDiv);
-
-                el.appendChild(infoContainer);
-                assiduitesContainer.appendChild(el);
-            });
-        }
-        /**
-        * Remise à zéro de la sélection
-        * Désactivation des boutons d'actions de conflit
-        */
-        resetSelection() {
-            this.selectedAssiduite = null;
-            this.deleteBtn.disabled = true;
-            this.splitBtn.disabled = true;
-            this.editBtn.disabled = true;
-        }
-    }
 </script>
 <style>
 .ui-timepicker-container {

app/templates/assiduites/widgets/minitimeline.j2

@@ -13,23 +13,18 @@
      */
     function createMiniTimeline(assiduitesArray, day = null) {
         const array = [...assiduitesArray];
-        const date = day == null ? getDate() : new Date(day);
+        const date = day == null ? $("#date").datepicker("getDate") : new Date(day);
         const timeline = document.createElement("div");
         timeline.className = "mini-timeline";
-        if (isSingleEtud()) {
-            timeline.classList.add("single");
-        }
         const timelineDate = date.startOf("day");
-        const dayStart = timelineDate.clone().add(mt_start, "hours");
+        const dayStart = new Date(`${timelineDate.format("YYYY-MM-DD").substring(0,10)}T${numberToTime(mt_start)}`);
-        const dayEnd = timelineDate.clone().add(mt_end, "hours");
+        const dayEnd = new Date(`${timelineDate.format("YYYY-MM-DD").substring(0,10)}T${numberToTime(mt_end)}`);
         const dayDuration = new Duration(dayStart, dayEnd).minutes;
 
         timeline.appendChild(setMiniTick(timelineDate, dayStart, dayDuration));
 
-
-
         if (day == null) {
-            const tlTimes = getTimeLineTimes();
+            const tlTimes = getPeriodAsDate();
             array.push({
                 date_debut: tlTimes.deb.format(),
                 date_fin: tlTimes.fin.format(),
@@ -69,56 +64,20 @@
                     fin = Math.min(mt_end, fin);
 
                     if (day == null) setPeriodValues(deb, fin);
-                    if (isSingleEtud()) {
+
-                        updateSelectedSelect(getCurrentAssiduiteModuleImplId());
+                    $("#moduleimpl_select").val(getModuleImplId(assiduité))
-                        updateJustifyBtn();
+                    setTimeout(()=>{
-                    }
+                        $("#moduleimpl_select").trigger("change"); 
+                    }, 0)
                 });
                 //ajouter affichage assiduites on over
-                setupAssiduiteBuble(block, assiduité);
+                setupAssiduiteBubble(block, assiduité);
             }
 
-            const action = (justificatifs) => {
+            // TODO: ajout couleur justificatif
-                if (justificatifs.length > 0) {
-                    let j = "invalid_justified";
 
-                    justificatifs.forEach((ju) => {
+            block.classList.add(assiduité.etat.toLowerCase());
-                        if (ju.etat == "VALIDE") {
+            if(assiduité.etat != "CRENEAU") block.classList.add("color");
-                            j = "justified";
-                        }
-                    });
-
-                    block.classList.add(j);
-                }
-            };
-
-            if (assiduité.etudid) {
-                getJustificatifFromPeriod(
-                    {
-                        deb: new Date(assiduité.date_debut),
-                        fin: new Date(assiduité.date_fin),
-                    },
-                    assiduité.etudid,
-                    action
-                );
-            }
-
-            switch (assiduité.etat) {
-                case "PRESENT":
-                    block.classList.add("present");
-                    break;
-                case "RETARD":
-                    block.classList.add("retard");
-                    break;
-                case "ABSENT":
-                    block.classList.add("absent");
-                    break;
-                case "CRENEAU":
-                    block.classList.add("creneau");
-                    break;
-                default:
-                    block.style.backgroundColor = "white";
-            }
 
             timeline.appendChild(block);
         });
@@ -131,7 +90,13 @@
      * @param {HTMLElement} el l'élément survollé
      * @param {Assiduité} assiduite l'assiduité représentée par l'élément
      */
-    function setupAssiduiteBuble(el, assiduite) {
+    function setupAssiduiteBubble(el, assiduite) {
+
+        function formatDateModal(dateStr){
+            const date = new Date(Date.removeUTC(dateStr));
+            return date.format("DD/MM/Y HH:mm");
+        }
+
         if (!assiduite) return;
 
         const bubble = document.createElement('div');
@@ -140,7 +105,9 @@
 
         const idDiv = document.createElement("div");
         idDiv.className = "assiduite-id";
-        idDiv.textContent = `${getModuleImpl(assiduite)}`;
+        getModuleImpl(assiduite).then((modImpl) => {
+            idDiv.textContent = `${modImpl}`;
+        });
         bubble.appendChild(idDiv);
 
         const periodDivDeb = document.createElement("div");
@@ -159,7 +126,8 @@
 
         const motifDiv = document.createElement("div");
         stateDiv.className = "assiduite-why";
-        stateDiv.textContent = `Motif: ${assiduite.desc?.capitalize()}`;
+        const motif = ["", null, undefined].includes(assiduite.desc)  ? "Pas de motif" : assiduite.desc.capitalize();
+        stateDiv.textContent = `Motif: ${motif}`;
         bubble.appendChild(motifDiv);
 
         const userIdDiv = document.createElement("div");