ScoDoc/app/templates/assiduites/widgets/minitimeline.j2

<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>