Assiduites : Calendrier des assiduités

app/scodoc/html_sidebar.py

@@ -136,7 +136,7 @@ def sidebar(etudid: int = None):
                 )
         H.append(
             f"""
-            <li><a href="{ url_for('absences.CalAbs', scodoc_dept=g.scodoc_dept, etudid=etudid) }">Calendrier</a></li>
+            <li><a href="{ url_for('assiduites.calendrier_etud', scodoc_dept=g.scodoc_dept, etudid=etudid) }">Calendrier</a></li>
             <li><a href="{ url_for('assiduites.liste_assiduites_etud', scodoc_dept=g.scodoc_dept, etudid=etudid) }">Liste</a></li>
             </ul>
             """

app/static/js/assiduites.js

@@ -170,6 +170,21 @@ function sync_get(path, success, errors) {
     error: errors,
   });
 }
+/**
+ * Fait une requête GET de façon asynchrone
+ * @param {String} path adresse distante
+ * @param {CallableFunction} success fonction à effectuer en cas de succès
+ * @param {CallableFunction} errors fonction à effectuer en cas d'échec
+ */
+function async_get(path, success, errors) {
+  $.ajax({
+    async: true,
+    type: "GET",
+    url: path,
+    success: success,
+    error: errors,
+  });
+}
 /**
  * Fait une requête POST de façon synchrone
  * @param {String} path adresse distante

app/templates/assiduites/pages/calendrier.j2

@@ -0,0 +1,338 @@
+{% block pageContent %}
+{% include "assiduites/widgets/alert.j2" %}
+
+<div class="pageContent">
+    {{minitimeline | safe }}
+    <h2>Assiduités de {{sco.etud.nomprenom}}</h2>
+    <div class="calendrier">
+
+    </div>
+    <div class="annee">
+        <span>Année scolaire 2022-2023 Changer année: </span>
+        <select name="" id="annee" onchange="setterAnnee(this.value)">
+        </select>
+    </div>
+</div>
+
+
+<style>
+    .pageContent {
+        margin-top: 1vh;
+        max-width: var(--sco-content-max-width);
+    }
+
+    .calendrier {
+        display: flex;
+        justify-content: space-evenly;
+        flex-wrap: wrap;
+        border: 1px solid #444;
+    }
+
+    .month h2 {
+        text-align: center;
+    }
+
+    .day {
+        border: 1px solid #444;
+        border-radius: 8px;
+        padding: 0 5px;
+        text-align: center;
+        margin: 2px;
+        cursor: default;
+        font-size: 12px;
+        position: relative;
+    }
+
+    .day.est_just {
+        border-left: 10px solid #7059FF;
+    }
+
+    .day.est_just.invalide {
+        border-left: 10px solid #f64e4e;
+    }
+
+    .day .dayline {
+        position: absolute;
+        display: none;
+        left: -237%;
+        bottom: -420%;
+        z-index: 50;
+        width: 250px;
+        height: 75px;
+        background-color: #dedede;
+        border-radius: 15px;
+        padding: 5px;
+    }
+
+    .day:hover .dayline {
+        display: block;
+    }
+
+    .dayline .mini-timeline {
+        margin-top: 14%;
+    }
+
+    .dayline .mini_tick {
+        position: absolute;
+        text-align: center;
+        top: 0;
+        transform: translateY(-110%);
+        z-index: 50;
+    }
+
+    .dayline .mini_tick::after {
+        display: block;
+        content: "|";
+        position: absolute;
+        bottom: -69%;
+        z-index: 2;
+        transform: translateX(200%);
+    }
+</style>
+
+<script>
+    function getDaysBetweenDates(start, end) {
+        let now = moment(start);
+        let dates = [];
+
+        while (now.isSameOrBefore(end)) {
+            dates.push(now.clone());
+            now.add(1, "days");
+        }
+
+        return dates;
+    }
+
+    function organizeByMonth(dates) {
+        let datesByMonth = {};
+
+        dates.forEach((date) => {
+            let month = date.format("MMMM"); // Obtenir le mois
+
+            if (!datesByMonth[month]) {
+                datesByMonth[month] = [];
+            }
+
+            datesByMonth[month].push(date);
+        });
+
+        return datesByMonth;
+    }
+
+    function organizeAssiduitiesByDay(datesByMonth, assiduities, justificatifs) {
+        let assiduitiesByDay = {};
+
+        Object.keys(datesByMonth).forEach((month) => {
+            assiduitiesByDay[month] = {};
+
+            datesByMonth[month].forEach((date) => {
+                let dayAssiduities = assiduities.filter((assiduity) => {
+                    return moment.tz(date, TIMEZONE).isBetween(
+                        moment.tz(assiduity.date_debut, TIMEZONE),
+                        moment.tz(assiduity.date_fin, TIMEZONE),
+                        "day",
+                        "[]"
+                    )
+                });
+
+                let dayJustificatifs = justificatifs.filter((justif) => {
+                    return moment.tz(date, TIMEZONE).isBetween(
+                        moment.tz(justif.date_debut, TIMEZONE),
+                        moment.tz(justif.date_fin, TIMEZONE),
+                        "day",
+                        "[]"
+                    )
+                });
+
+                assiduitiesByDay[month][date.format("YYYY-MM-DD")] = {
+                    assiduites: dayAssiduities,
+                    justificatifs: dayJustificatifs
+                };
+            });
+        });
+
+        return assiduitiesByDay;
+    }
+
+    function getDayColor(etat) {
+        let color;
+        switch (etat.toUpperCase()) {
+            case "PRESENT":
+                color = "#6bdb83";
+                break;
+            case "ABSENT":
+                color = "#F1A69C";
+                break;
+            case "RETARD":
+                color = "#f0c865";
+                break;
+            case "NONWORK":
+                color = "#bd81ca"
+                break;
+            default:
+                color = "#FFF";
+                break;
+        }
+        return color;
+    }
+
+    function generateCalendar(assiduitiesByDay, nonWorkdays = []) {
+        const calendar = document.querySelector('.calendrier')
+        calendar.innerHTML = ""
+
+        const days = {
+            Mon: "Lun",
+            Tue: "Mar",
+            Wed: "Mer",
+            Thu: "Jeu",
+            Fri: "Ven",
+            Sat: "Sam",
+            Sun: "Dim",
+        };
+
+        const months = {
+            January: "Jan.",
+            February: "Fev.",
+            March: "Mar.",
+            April: "Avr.",
+            May: "Mai",
+            June: "Juin",
+            July: "Juil.",
+            August: "Août",
+            September: "Sep.",
+            October: "Oct.",
+            November: "Nov.",
+            December: "Déc.",
+        };
+
+        Object.keys(assiduitiesByDay).forEach((month) => {
+            const monthEl = document.createElement('div')
+            monthEl.classList.add("month")
+            const title = document.createElement('h2');
+            title.textContent = `${months[month]}`;
+            monthEl.appendChild(title)
+
+            const daysEl = document.createElement('div')
+            daysEl.classList.add('days');
+
+            Object.keys(assiduitiesByDay[month]).forEach((date) => {
+                let dayAssiduities = assiduitiesByDay[month][date].assiduites;
+                let dayJustificatifs = assiduitiesByDay[month][date].justificatifs;
+                let color = "white";
+
+                if (dayAssiduities.some((a) => a.etat.toLowerCase() === "absent")) color = "absent";
+                else if (dayAssiduities.some((a) => a.etat.toLowerCase() === "retard"))
+                    color = "retard";
+                else if (dayAssiduities.some((a) => a.etat.toLowerCase() === "present"))
+                    color = "present";
+                let est_just = ""
+                if (dayJustificatifs.some((j) => j.etat.toLowerCase() === "valide")) {
+                    est_just = "est_just";
+                } else if (dayJustificatifs.some((j) => j.etat.toLowerCase() !== "valide")) {
+                    est_just = "est_just invalide";
+                }
+                const momentDate = moment.tz(date, TIMEZONE);
+                let dayOfMonth = momentDate.format("D");
+                let dayOfWeek = momentDate.format("ddd");
+
+                dayOfWeek = days[dayOfWeek];
+
+                if (nonWorkdays.includes(dayOfWeek.toLowerCase())) color = "nonwork";
+
+                const day = document.createElement('div');
+                day.className = `day ${est_just}`
+
+                day.style.backgroundColor = getDayColor(color);
+
+                day.textContent = `${dayOfWeek} ${dayOfMonth}`;
+
+                if (!nonWorkdays.includes(dayOfWeek.toLowerCase())) {
+                    const cache = document.createElement('div')
+                    cache.classList.add('dayline');
+                    cache.appendChild(
+                        createMiniTimeline(dayAssiduities, date)
+                    )
+
+                    day.appendChild(cache)
+                }
+
+                daysEl.appendChild(day);
+            });
+            monthEl.appendChild(daysEl)
+            calendar.appendChild(monthEl)
+        });
+
+    }
+
+    function getEtudAssiduites(deb, fin, callback = () => { }) {
+        const url_api =
+            getUrl() +
+            `/api/assiduites/${etudid}/query?date_debut=${deb}&date_fin=${fin}`;
+        async_get(url_api, (data, status) => {
+            if (status === "success") {
+                callback(data);
+            }
+        });
+    }
+
+    function getEtudJustificatifs(deb, fin) {
+        let list = [];
+        const url_api =
+            getUrl() +
+            `/api/justificatifs/${etudid}/query?date_debut=${deb}&date_fin=${fin}`;
+        sync_get(url_api, (data, status) => {
+            if (status === "success") {
+                list = data;
+            }
+        });
+
+        return list
+    }
+
+    function generate(annee) {
+
+        if (annee < 1999 || annee > 2999) {
+            openAlertModal("Année impossible", document.createTextNode("L'année demandé n'existe pas."));
+            return;
+        }
+        const bornes = {
+            deb: `${annee}-09-01T00:00`,
+            fin: `${annee + 1}-06-30T23:59`
+        }
+
+        let assiduities = getEtudAssiduites(bornes.deb, bornes.fin, (data) => {
+            let dates = getDaysBetweenDates(bornes.deb, bornes.fin);
+            let datesByMonth = organizeByMonth(dates);
+            const justifs = getEtudJustificatifs(bornes.deb, bornes.fin);
+            console.log(justifs)
+            let assiduitiesByDay = organizeAssiduitiesByDay(datesByMonth, data, justifs);
+            generateCalendar(assiduitiesByDay, nonwork);
+        });
+
+    }
+
+    function setterAnnee(annee) {
+        annee = parseInt(annee);
+        document.querySelector('.annee span').textContent = `Année scolaire ${annee}-${annee + 1} Changer année: `
+        generate(annee)
+
+    }
+    const defAnnee = {{ annee }}
+    const etudid = {{ sco.etud.id }};
+    const nonwork = [{{ nonworkdays | safe }}];
+    window.onload = () => {
+        const select = document.querySelector('#annee');
+        for (let i = defAnnee + 1; i > defAnnee - 6; i--) {
+            const opt = document.createElement("option");
+            opt.value = i + "",
+                opt.textContent = i + "";
+            if (i === defAnnee) {
+                opt.selected = true;
+            }
+            select.appendChild(opt)
+        }
+        setterAnnee(defAnnee)
+    };
+
+</script>
+{% endblock pageContent %}

app/templates/assiduites/widgets/minitimeline.j2

@@ -11,9 +11,9 @@
      * @param {Array[Assiduité]} assiduitesArray
      * @returns {HTMLElement} l'élément correspondant à la mini timeline
      */
-    function createMiniTimeline(assiduitesArray) {
+    function createMiniTimeline(assiduitesArray, day = null) {
         const array = [...assiduitesArray];
-        const dateiso = document.getElementById("tl_date").value;
+        const dateiso = day == null ? document.getElementById("tl_date").value : day;
         const timeline = document.createElement("div");
         timeline.className = "mini-timeline";
         if (isSingleEtud()) {
@@ -26,15 +26,16 @@
 
         timeline.appendChild(setMiniTick(timelineDate, dayStart, dayDuration));
 
-        const tlTimes = getTimeLineTimes();
 
-        const period_assi = {
+
+        if (day == null) {
+            const tlTimes = getTimeLineTimes();
+            array.push({
                 date_debut: tlTimes.deb.format(),
                 date_fin: tlTimes.fin.format(),
                 etat: "CRENEAU",
-        };
+            });
-
+        }
-        array.push(period_assi);
 
         array.forEach((assiduité) => {
             const startDate = moment(assiduité.date_debut);
@@ -65,7 +66,7 @@
                     deb = Math.max(mt_start, deb);
                     fin = Math.min(mt_end, fin);
 
-                    setPeriodValues(deb, fin);
+                    if (day == null) setPeriodValues(deb, fin);
                     if (isSingleEtud()) {
                         updateSelectedSelect(getCurrentAssiduiteModuleImplId());
                         updateJustifyBtn();
@@ -288,4 +289,24 @@
         outline: 3px solid #7059FF;
         pointer-events: none;
     }
+
+    .mini-timeline-block.absent {
+        background-color: #F1A69C !important;
+    }
+
+    .mini-timeline-block.present {
+        background-color: #9CF1AF !important;
+    }
+
+    .mini-timeline-block.retard {
+        background-color: #F1D99C !important;
+    }
+
+    .mini-timeline-block.justified {
+        background-image: repeating-linear-gradient(135deg, transparent, transparent 4px, #7059FF 4px, #7059FF 8px);
+    }
+
+    .mini-timeline-block.invalid_justified {
+        background-image: repeating-linear-gradient(135deg, transparent, transparent 4px, #d61616 4px, #d61616 8px);
+    }
 </style>

app/templates/assiduites/widgets/tableau_base.j2

@@ -478,7 +478,7 @@
 
             const filterHead = html.querySelector('.filter-head');
             filterHead.innerHTML = ""
-            let cols = ["entry_date", "date_debut", "date_fin", "etat", "raison"];
+            let cols = ["entry_date", "date_debut", "date_fin", "etat", "raison", "fichier"];
 
             cols.forEach((k) => {
                 const label = document.createElement('label')

app/templates/sidebar.j2

@@ -69,7 +69,7 @@
                     etudid=sco.etud.id) }}">Billets</a></li>
             {% endif %}
             {% endif %}
-            <li><a href="{{ url_for('absences.CalAbs', scodoc_dept=g.scodoc_dept, 
+            <li><a href="{{ url_for('assiduites.calendrier_etud', scodoc_dept=g.scodoc_dept, 
                     etudid=sco.etud.id) }}">Calendrier</a></li>
             <li><a href="{{ url_for('assiduites.liste_assiduites_etud', scodoc_dept=g.scodoc_dept, 
                     etudid=sco.etud.id) }}">Liste</a></li>

app/views/assiduites.py

@@ -310,6 +310,50 @@ def ajout_justificatif_etud():
     ).build()
 
 
+@bp.route("/CalendrierAssiduitesEtud")
+@scodoc
+@permission_required(Permission.ScoView)
+def calendrier_etud():
+    """
+    calendrier_etud : Affichage d'un calendrier des assiduités de l'étudiant
+    Args:
+        etudid (int): l'identifiant de l'étudiant
+
+    Returns:
+        str: l'html généré
+    """
+
+    etudid = request.args.get("etudid", -1)
+    etud: Identite = Identite.query.get_or_404(etudid)
+    if etud.dept_id != g.scodoc_dept_id:
+        abort(404, "étudiant inexistant dans ce département")
+
+    header: str = html_sco_header.sco_header(
+        page_title="Calendrier des Assiduités",
+        init_qtip=True,
+        javascripts=[
+            "js/assiduites.js",
+            "libjs/moment.new.min.js",
+            "libjs/moment-timezone.js",
+        ],
+        cssstyles=CSSSTYLES
+        + [
+            "css/assiduites.css",
+        ],
+    )
+
+    return HTMLBuilder(
+        header,
+        render_template(
+            "assiduites/pages/calendrier.j2",
+            sco=ScoData(etud),
+            annee=scu.annee_scolaire(),
+            nonworkdays=_non_work_days(),
+            minitimeline=_mini_timeline(),
+        ),
+    ).build()
+
+
 @bp.route("/SignalAssiduiteGr")
 @scodoc
 @permission_required(Permission.ScoAbsChange)