From 7502acf1dfb63f36156b3e57ec1fee3d101705ac Mon Sep 17 00:00:00 2001
From: Iziram <matthias.hartmann@iziram.fr>
Date: Wed, 15 Nov 2023 17:34:13 +0100
Subject: [PATCH] Assiduites : maj calendrier

---
 app/static/js/assiduites.js                  |  10 +-
 app/templates/assiduites/pages/bilan_etud.j2 |   2 +
 app/templates/assiduites/pages/calendrier.j2 | 295 +++++++++++++++++--
 app/views/assiduites.py                      |  10 +-
 4 files changed, 281 insertions(+), 36 deletions(-)

diff --git a/app/static/js/assiduites.js b/app/static/js/assiduites.js
index a58592cc2..fe9ee9d46 100644
--- a/app/static/js/assiduites.js
+++ b/app/static/js/assiduites.js
@@ -201,7 +201,8 @@ async function async_get(path, success, errors) {
       throw new Error("Network response was not ok.");
     }
   } catch (error) {
-    errors(error);
+    console.error(error);
+    if (errors) errors(error);
   }
 }
 
@@ -249,7 +250,8 @@ async function async_post(path, data, success, errors) {
       throw new Error("Network response was not ok.");
     }
   } catch (error) {
-    errors(error);
+    console.error(error);
+    if (errors) errors(error);
   }
 }
 
@@ -1162,7 +1164,7 @@ function getAllAssiduitesFromEtud(
             .replace("°", courant ? "&courant" : "")
         : ""
     }`;
-
+  //TODO Utiliser async_get au lieu de jquery
   $.ajax({
     async: true,
     type: "GET",
@@ -1744,6 +1746,8 @@ function getAllJustificatifsFromEtud(
     `/api/justificatifs/${etudid}${
       order ? "/query?order°".replace("°", courant ? "&courant" : "") : ""
     }`;
+
+  //TODO Utiliser async_get au lieu de jquery
   $.ajax({
     async: true,
     type: "GET",
diff --git a/app/templates/assiduites/pages/bilan_etud.j2 b/app/templates/assiduites/pages/bilan_etud.j2
index a1c3d0df4..77712bb1e 100644
--- a/app/templates/assiduites/pages/bilan_etud.j2
+++ b/app/templates/assiduites/pages/bilan_etud.j2
@@ -107,6 +107,7 @@
 
     function getAssiduitesCount(dateDeb, dateFin, query) {
         const url_api = getUrl() + `/api/assiduites/${etudid}/count/query?date_debut=${dateDeb}&date_fin=${dateFin}&${query}`;
+        //Utiliser async_get au lieu de Jquery
         return $.ajax({
             async: true,
             type: "GET",
@@ -120,6 +121,7 @@
     }
 
     function countAssiduites(dateDeb, dateFin) {
+        //TODO Utiliser Fetch when plutot que jquery
         $.when(
             getAssiduitesCount(dateDeb, dateFin, `etat=present`),
             getAssiduitesCount(dateDeb, dateFin, `etat=retard`),
diff --git a/app/templates/assiduites/pages/calendrier.j2 b/app/templates/assiduites/pages/calendrier.j2
index a6b270d9d..3b94e1bef 100644
--- a/app/templates/assiduites/pages/calendrier.j2
+++ b/app/templates/assiduites/pages/calendrier.j2
@@ -4,13 +4,23 @@
 <div class="pageContent">
     {{minitimeline | safe }}
     <h2>Assiduité de {{sco.etud.nomprenom}}</h2>
+
+    <div class="options">
+        <label for="show_pres">afficher les présences</label><input type="checkbox" id="show_pres" name="show_pres">
+        <label for="show_reta">afficher les retards</label><input type="checkbox" name="show_reta" id="show_reta">
+        <label for="mode_demi">mode demi journée</label><input type="checkbox" name="mode_demi" id="mode_demi">
+    </div>
+
     <div class="calendrier">
 
     </div>
     <div class="annee">
-        <span>Année scolaire 2022-2023 Changer année: </span>
+        <span id="label-annee">Année scolaire 2022-2023</span><span id="label-changer" style="margin-left: 5px;">Changer
+            année: </span>
         <select name="" id="annee" onchange="setterAnnee(this.value)">
         </select>
+
+        <span id="label-nom">Assiduité de {{sco.etud.nomprenom}}</span>
     </div>
 
     <div class="help">
@@ -34,7 +44,37 @@
 </div>
 
 
+
+
 <style>
+    :root {
+        --color-present: #6bdb83;
+        --color-absent: #F1A69C;
+        --color-retard: #f0c865;
+        --color-nonwork: #bd81ca;
+        --color-defaut: #FFF;
+    }
+
+    .color.present {
+        background-color: var(--color-present);
+    }
+
+    .color.absent {
+        background-color: var(--color-absent);
+    }
+
+    .color.retard {
+        background-color: var(--color-retard);
+    }
+
+    .color.nonwork {
+        background-color: var(--color-nonwork);
+    }
+
+    .color {
+        background-color: var(--color-defaut);
+    }
+
     .pageContent {
         margin-top: 1vh;
         max-width: var(--sco-content-max-width);
@@ -47,27 +87,36 @@
         border: 1px solid #444;
     }
 
-    .month h2 {
+    .month h3 {
         text-align: center;
     }
 
-    .day {
-        border: 1px solid #444;
-        border-radius: 8px;
-        padding: 0 5px;
+    .day,
+    .demi .day.color.color.nonwork {
+        /* border: 1px solid #444; */
+        /* border-radius: 8px; */
         text-align: center;
         margin: 2px;
         cursor: default;
         font-size: 12px;
         position: relative;
+        font-weight: bold;
+        min-width: 6em;
     }
 
-    .day.est_just {
-        border-left: 10px solid #7059FF;
+    .demi .day {
+        border-radius: none;
     }
 
-    .day.est_just.invalide {
-        border-left: 10px solid #f64e4e;
+    .day.est_just,
+    .demi .day span.est_just {
+        background-image: repeating-linear-gradient(135deg, transparent, transparent 4px, #7059FFA0 4px, #7059FFA0 8px);
+
+    }
+
+    .day.est_just.invalide,
+    .demi .day span.invalide {
+        background-image: repeating-linear-gradient(-135deg, transparent, transparent 4px, #d61616A0 4px, #d61616A0 8px);
     }
 
     .day .dayline {
@@ -107,6 +156,87 @@
         z-index: 2;
         transform: translateX(200%);
     }
+
+    #label-nom {
+        display: none;
+    }
+
+    .demi .day {
+        display: flex;
+        justify-content: space-evenly;
+    }
+
+    .demi .day>span {
+        display: block;
+        flex: 1;
+        text-align: center;
+        z-index: 1;
+        width: 100%;
+        border: 1px solid black;
+        /*border-radius: 3px;*/
+    }
+
+    .demi .day>span:first-of-type {
+        width: 3em;
+        min-width: 3em;
+    }
+
+    .options>* {
+        margin-right: 5px;
+    }
+
+    @media print {
+        .color.present {
+            background-color: var(--color-present) !important;
+            print-color-adjust: exact !important;
+        }
+
+        .color.absent {
+            background-color: var(--color-absent) !important;
+            print-color-adjust: exact !important;
+        }
+
+        .color.retard {
+            background-color: var(--color-retard) !important;
+            print-color-adjust: exact !important;
+        }
+
+        .color.nonwork {
+            background-color: var(--color-nonwork) !important;
+            print-color-adjust: exact !important;
+        }
+
+        .day.est_just,
+        .demi .day span.est_just {
+            background-image: repeating-linear-gradient(135deg, transparent, transparent 4px, #7059FFA0 4px, #7059FFA0 8px) !important;
+            print-color-adjust: exact !important;
+
+        }
+
+        .day.est_just.invalide,
+        .demi .day span.invalide {
+            print-color-adjust: exact !important;
+            background-image: repeating-linear-gradient(-135deg, transparent, transparent 4px, #d61616A0 4px, #d61616A0 8px) !important;
+        }
+
+
+        #sidebar,
+        .help,
+        h2,
+        #annee,
+        #label-changer,
+        .options {
+            display: none;
+        }
+
+        #label-nom {
+            display: inline;
+        }
+
+        #gtrcontent {
+            margin: 5px;
+        }
+    }
 </style>
 
 <script>
@@ -176,7 +306,7 @@
         let color;
         switch (etat.toUpperCase()) {
             case "PRESENT":
-                color = "#6bdb83";
+                color = "";
                 break;
             case "ABSENT":
                 color = "#F1A69C";
@@ -196,6 +326,7 @@
 
     function generateCalendar(assiduitiesByDay, nonWorkdays = []) {
         const calendar = document.querySelector('.calendrier')
+        const options = getOptions();
         calendar.innerHTML = ""
 
         const days = {
@@ -211,23 +342,25 @@
         Object.keys(assiduitiesByDay).forEach((month) => {
             const monthEl = document.createElement('div')
             monthEl.classList.add("month")
-            const title = document.createElement('h2');
+            const title = document.createElement('h3');
             title.textContent = `${month.capitalize()}`;
             monthEl.appendChild(title)
 
             const daysEl = document.createElement('div')
             daysEl.classList.add('days');
-
+            if (options.mode_demi) daysEl.classList.add("demi");
             Object.keys(assiduitiesByDay[month]).forEach((date) => {
                 let dayAssiduities = assiduitiesByDay[month][date].assiduites;
                 let dayJustificatifs = assiduitiesByDay[month][date].justificatifs;
-                let color = "white";
+                let color = "";
 
                 if (dayAssiduities.some((a) => a.etat.toLowerCase() === "absent")) color = "absent";
-                else if (dayAssiduities.some((a) => a.etat.toLowerCase() === "retard"))
+                else if (dayAssiduities.some((a) => a.etat.toLowerCase() === "retard") && options.show_reta)
                     color = "retard";
-                else if (dayAssiduities.some((a) => a.etat.toLowerCase() === "present"))
+                else if (dayAssiduities.some((a) => a.etat.toLowerCase() === "present") && options.show_pres)
                     color = "present";
+
+
                 let est_just = ""
                 if (dayJustificatifs.some((j) => j.etat.toLowerCase() === "valide")) {
                     est_just = "est_just";
@@ -239,15 +372,108 @@
                 let dayOfWeek = momentDate.getDay();
                 dayOfWeek = days[dayOfWeek];
 
-
-                if (nonWorkdays.includes(dayOfWeek.toLowerCase())) color = "nonwork";
-
+                let isWorkDay = nonWorkdays.includes(dayOfWeek.toLowerCase());
                 const day = document.createElement('div');
-                day.className = `day ${est_just}`
+                day.className = `day`;
+                if (isWorkDay) {
+                    color = "nonwork";
+                } else if (!options.mode_demi) {
+                    day.className = `day ${est_just}`;
+                }
 
-                day.style.backgroundColor = getDayColor(color);
+                if (options.mode_demi && !isWorkDay) {
+                    est_just = []
+                    // affichage n° jour + matin + aprem
 
-                day.textContent = `${dayOfWeek} ${dayOfMonth}`;
+                    const span_jour = document.createElement("span")
+                    span_jour.textContent = dayOfMonth + dayOfWeek[0];
+
+                    const span_matin = document.createElement("span");
+                    span_matin.classList.add("color");
+                    const matin = [new Date(date), new Date(date)]
+                    color = ""
+                    matin[0].setHours(0, 0, 0, 0)
+                    matin[1].setHours(12, 59, 59)
+
+                    const assiduitesMatin = dayAssiduities.filter((el) => {
+                        const deb = new Date(el.date_debut);
+                        const fin = new Date(el.date_fin);
+                        return deb.isBetween(matin[0], matin[1]) || fin.isBetween(matin[0], matin[1])
+                    })
+                    const justificatifsMatin = dayJustificatifs.filter((el) => {
+                        const deb = new Date(el.date_debut);
+                        const fin = new Date(el.date_fin);
+                        return deb.isBetween(matin[0], matin[1]) || fin.isBetween(matin[0], matin[1])
+                    })
+
+                    if (assiduitesMatin.some((a) => a.etat.toLowerCase() === "absent")) color = "absent";
+                    else if (assiduitesMatin.some((a) => a.etat.toLowerCase() === "retard") && options.show_reta)
+                        color = "retard";
+                    else if (assiduitesMatin.some((a) => a.etat.toLowerCase() === "present") && options.show_pres)
+                        color = "present";
+
+                    if (color != "") {
+                        span_matin.classList.add(color);
+                    }
+
+                    if (justificatifsMatin.some((j) => j.etat.toLowerCase() === "valide")) {
+                        est_just = ["est_just"];
+                    } else if (justificatifsMatin.some((j) => j.etat.toLowerCase() !== "valide")) {
+                        est_just = ["est_just", "invalide"];
+                    }
+
+                    span_matin.classList.add(...est_just)
+
+
+                    est_just = []
+                    const span_aprem = document.createElement("span");
+                    span_aprem.classList.add("color");
+                    const aprem = [new Date(date), new Date(date)]
+                    color = ""
+                    aprem[0].setHours(13, 0, 0, 0)
+                    aprem[1].setHours(23, 59, 59)
+
+                    const assiduitesAprem = dayAssiduities.filter((el) => {
+                        const deb = new Date(el.date_debut);
+                        const fin = new Date(el.date_fin);
+                        return deb.isBetween(aprem[0], aprem[1]) || fin.isBetween(aprem[0], aprem[1])
+                    })
+
+                    const justificatifsAprem = dayJustificatifs.filter((el) => {
+                        const deb = new Date(el.date_debut);
+                        const fin = new Date(el.date_fin);
+                        return deb.isBetween(aprem[0], aprem[1]) || fin.isBetween(aprem[0], aprem[1])
+                    })
+
+                    if (assiduitesAprem.some((a) => a.etat.toLowerCase() === "absent")) color = "absent";
+                    else if (assiduitesAprem.some((a) => a.etat.toLowerCase() === "retard") && options.show_reta)
+                        color = "retard";
+                    else if (assiduitesAprem.some((a) => a.etat.toLowerCase() === "present") && options.show_pres)
+                        color = "present";
+
+                    if (color != "") {
+                        span_aprem.classList.add(color);
+                    }
+
+                    if (justificatifsAprem.some((j) => j.etat.toLowerCase() === "valide")) {
+                        est_just = ["est_just"];;
+                    } else if (justificatifsAprem.some((j) => j.etat.toLowerCase() !== "valide")) {
+                        est_just = ["est_just", "invalide"];;
+                    }
+
+                    span_matin.classList.add(...est_just)
+
+                    day.appendChild(span_jour)
+                    day.appendChild(span_matin)
+                    day.appendChild(span_aprem)
+
+                } else {
+                    day.classList.add("color")
+                    if (color != "") {
+                        day.classList.add(color);
+                    }
+                    day.textContent = `${dayOfWeek} ${dayOfMonth}`;
+                }
 
                 if (!nonWorkdays.includes(dayOfWeek.toLowerCase()) && dayAssiduities.length > 0) {
                     const cache = document.createElement('div')
@@ -255,7 +481,6 @@
                     cache.appendChild(
                         createMiniTimeline(dayAssiduities, date)
                     )
-
                     day.appendChild(cache)
                 }
 
@@ -271,13 +496,19 @@
         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);
-            }
+        async_get(url_api, (data) => {
+            callback(data);
         });
     }
 
+    function getOptions() {
+        return {
+            "show_pres": document.getElementById("show_pres").checked,
+            "show_reta": document.getElementById("show_reta").checked,
+            "mode_demi": document.getElementById("mode_demi").checked,
+        }
+    }
+
     function getEtudJustificatifs(deb, fin) {
         let list = [];
         const url_api =
@@ -293,7 +524,6 @@
     }
 
     function generate(annee) {
-
         if (annee < 1999 || annee > 2999) {
             openAlertModal("Année impossible", document.createTextNode("L'année demandé n'existe pas."));
             return;
@@ -315,10 +545,11 @@
 
     function setterAnnee(annee) {
         annee = parseInt(annee);
-        document.querySelector('.annee span').textContent = `Année scolaire ${annee}-${annee + 1} Changer année: `
+        document.querySelector('.annee #label-annee').textContent = `Année scolaire ${annee}-${annee + 1}`
         generate(annee)
 
     }
+
     const defAnnee = {{ annee }}
     let annees = {{ annees | safe }}
     annees = annees.filter((x, i) => annees.indexOf(x) === i)
@@ -335,6 +566,12 @@
             }
             select.appendChild(opt)
         })
+
+        document.querySelectorAll(".options input").forEach((e) => {
+            e.addEventListener("click", () => {
+                setterAnnee(select.value)
+            })
+        })
         setterAnnee(defAnnee)
     };
 
diff --git a/app/views/assiduites.py b/app/views/assiduites.py
index 65e9735fe..564609722 100644
--- a/app/views/assiduites.py
+++ b/app/views/assiduites.py
@@ -535,10 +535,12 @@ def calendrier_etud():
     )
 
     # Récupération des années d'étude de l'étudiant
-    annees: list[int] = sorted(
-        [ins.formsemestre.date_debut.year for ins in etud.formsemestre_inscriptions],
-        reverse=True,
-    )
+    annees: list[int] = []
+    for ins in etud.formsemestre_inscriptions:
+        annees.extend(
+            (ins.formsemestre.date_debut.year, ins.formsemestre.date_fin.year)
+        )
+    annees = sorted(annees, reverse=True)
 
     # Transformation en une liste "json"
     # (sera utilisé pour générer le selecteur d'année)