<div class="assiduite-bubble"> </div> <script> const mt_start = {{ t_start }}; const mt_end = {{ t_end }}; /** * Création de la minitiline d'un étudiant * @param {Array[Assiduité]} assiduitesArray * @returns {HTMLElement} l'élément correspondant à la mini timeline */ function createMiniTimeline(assiduitesArray, day = null) { const array = [...assiduitesArray]; const date = day == null ? $("#date").datepicker("getDate") : new Date(day); const timeline = document.createElement("div"); timeline.className = "mini-timeline"; const timelineDate = date.startOf("day"); const dayStart = new Date(`${timelineDate.format("YYYY-MM-DD").substring(0,10)}T${numberToTime(mt_start)}`); 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 = getPeriodAsDate(); array.push({ date_debut: tlTimes.deb.format(), date_fin: tlTimes.fin.format(), etat: "CRENEAU", }); } // Pour chaque assiduité (et pour le créneau) on vient créer un block // le block est positionné en fonction de l'heure de début et de fin // et prend une largeur proportionnelle à la durée de l'assiduité array.forEach((assiduité) => { if(assiduité.etat == "CRENEAU" && readOnly) return; let startDate = new Date(Date.removeUTC(assiduité.date_debut)); let endDate = new Date(Date.removeUTC(assiduité.date_fin)); if (startDate.isBefore(dayStart)) { startDate = dayEnd.clone().startOf("day").add(mt_start, "hours"); } if (endDate.isAfter(dayEnd)) { endDate = dayEnd.clone().startOf("day").add(mt_end, "hours"); } const block = document.createElement("div"); block.className = "mini-timeline-block"; const duration = (new Duration(startDate, endDate)).minutes; const startOffset = (new Duration(dayStart, startDate)).minutes; const leftPercentage = (startOffset / dayDuration) * 100; const widthPercentage = (duration / dayDuration) * 100; block.style.left = `${leftPercentage}%`; block.style.width = `${widthPercentage}%`; if (assiduité.etat != "CRENEAU") { // Si on clique dessus on veut pouvoir // mettre à jour la timeline principale et modifier le moduleimpl_select block.addEventListener("click", () => { let deb = startDate.getHours() + startDate.getMinutes() / 60; let fin = endDate.getHours() + endDate.getMinutes() / 60; deb = Math.max(mt_start, deb); fin = Math.min(mt_end, fin); if (day == null) setPeriodValues(deb, fin); $("#moduleimpl_select").val(getModuleImplId(assiduité)) setTimeout(()=>{ $("#moduleimpl_select").trigger("change"); }, 0) }); //ajouter affichage assiduites on over setupAssiduiteBubble(block, assiduité); } // ajout couleur justificatif const justificatifs = assiduité.justificatifs || []; const justified = justificatifs.some( (justificatif) => justificatif.etat === "VALIDE" ) if(justified) block.classList.add("est_just"); block.classList.add(assiduité.etat.toLowerCase()); if(assiduité.etat != "CRENEAU") block.classList.add("color"); timeline.appendChild(block); }); return timeline; } // Ajout du "13h" sur la mini timeline function setMiniTick(timelineDate, dayStart, dayDuration) { const endDate = timelineDate.clone().startOf("day"); endDate.setHours(13, 0); const duration = new Duration(dayStart, endDate).minutes; const widthPercentage = (duration / dayDuration) * 100; const tick = document.createElement('span'); tick.className = "mini_tick" tick.textContent = "13h" tick.style.left = `${widthPercentage}%` return tick } </script>