From d73b92500672b7c93422f1930ab693606f8a0286 Mon Sep 17 00:00:00 2001
From: Iziram <matthias.hartmann@iziram.fr>
Date: Tue, 28 May 2024 20:07:25 +0200
Subject: [PATCH] =?UTF-8?q?Assiduit=C3=A9=20:=20signal=5Fassiduites=5Fhedb?=
=?UTF-8?q?o=20:=20v1=20OK?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
app/static/js/date_utils.js | 20 +
.../pages/signal_assiduites_hebdo.j2 | 445 ++++++++++++++++--
app/views/assiduites.py | 40 ++
3 files changed, 462 insertions(+), 43 deletions(-)
diff --git a/app/static/js/date_utils.js b/app/static/js/date_utils.js
index 0db9d3b0..efdc120e 100644
--- a/app/static/js/date_utils.js
+++ b/app/static/js/date_utils.js
@@ -430,3 +430,23 @@ class Duration {
function hasTimeConflict(period, interval) {
return period.deb.isBefore(interval.fin) && period.fin.isAfter(interval.deb);
}
+
+// Fonction auxiliaire pour obtenir le numéro de semaine ISO d'une date donnée
+function getISOWeek(date) {
+ const target = new Date(date.valueOf());
+ const dayNr = (date.getUTCDay() + 6) % 7;
+ target.setUTCDate(target.getUTCDate() - dayNr + 3);
+ const firstThursday = target.valueOf();
+ target.setUTCMonth(0, 1);
+ if (target.getUTCDay() !== 4) {
+ target.setUTCMonth(0, 1 + ((4 - target.getUTCDay() + 7) % 7));
+ }
+ return 1 + Math.ceil((firstThursday - target) / 604800000);
+}
+
+// Fonction auxiliaire pour obtenir le nombre de semaines ISO dans une année donnée
+function getISOWeeksInYear(year) {
+ const date = new Date(year, 11, 31);
+ const week = getISOWeek(date);
+ return week === 1 ? getISOWeek(new Date(year, 11, 24)) : week;
+}
diff --git a/app/templates/assiduites/pages/signal_assiduites_hebdo.j2 b/app/templates/assiduites/pages/signal_assiduites_hebdo.j2
index 874f463b..5b2a7f28 100644
--- a/app/templates/assiduites/pages/signal_assiduites_hebdo.j2
+++ b/app/templates/assiduites/pages/signal_assiduites_hebdo.j2
@@ -7,8 +7,9 @@
<style>
.rbtn::before {
- width: 30px;
- height: 30px;
+ --size: 1.5em;
+ width: var(--size);
+ height: var(--size);
}
.ui-timepicker-container,
@@ -62,6 +63,7 @@
width: 100%;
max-width: 1600px;
position: relative;
+ table-layout: fixed;
}
th,
@@ -99,6 +101,13 @@
opacity: 0.5;
}
+ .grayed {
+ filter: brightness(0.5);
+ }
+ .conflit {
+ background-color: var(--color-conflit);
+ }
+
</style>
@@ -159,6 +168,10 @@
#confirmButton:hover {
background-color: var(--color-secondary);
}
+
+.etudinfo{
+ text-align: left;
+}
</style>
{% endblock styles %}
@@ -172,37 +185,359 @@
<script>
+ const etuds = [
+ {% for etud in etudiants %}
+ {
+ id: {{etud.etudid}},
+ nom: "{{etud.nom}}",
+ prenom: "{{etud.prenom}}"
+ },
+ {% endfor %}
+ ]
+
+ let days = [
+ {% for jour in hebdo_jours %}
+ {
+ date : new Date(Date.fromFRA("{{jour[1][1]}}")),
+ visible : "{{not jour[0]}}" == "True",
+ nom : "{{jour[1][0]}}",
+ },
+ {% endfor %}
+ ] // [0]=Lundi ... [6]=Dimanche -> à 00h00
+
+ //Une fonction d'action quand un bouton est cliqué
+ // 3 possibilités :
+ // - assiduite_id = null -> créer nv assi avec état du bouton
+ // - assiduite_id non null et bouton coché == etat assi -> suppression de l'assiduité
+ // - assiduite_id non null et bouton coché != etat assi -> modification de l'assiduité
+ async function actionButton(btn, same = false) {
+ let td = btn.parentElement;
+ let tr = td.parentElement;
+ let etudid = tr.getAttribute("etudid");
+ let etud = etuds.find((etud) => etud.id == etudid);
+ let etat = btn.value;
+ let assiduite_id = td.getAttribute("assiduite_id");
+ let dayInfo = [td.getAttribute("day"), td.getAttribute("time")]// [0]=[0..6] [1]=am/pm
+ let day = days[dayInfo[0]].date;
+ dayInfo[1] = dayInfo[1] == "am" ? "matin" : "apresmidi";
+ let deb = new Date(day.format('YYYY-MM-DD') + "T" + temps[dayInfo[1]].debut);
+ let fin = new Date(day.format('YYYY-MM-DD') + "T" + temps[dayInfo[1]].fin);
+
+ const assi = {
+ etudid: etudid,
+ etat: etat,
+ moduleimpl_id: document.getElementById("moduleimpl_select").value,
+ date_debut: deb.toFakeIso(),
+ date_fin: fin.toFakeIso(),
+ }
+
+ if (assiduite_id != "") {
+ if (same) {
+ // Suppression
+ await async_post(
+ `../../api/assiduite/delete`,
+ [assiduite_id],
+ (data) => {
+ if (data.success.length > 0) {
+ envoiToastEtudiant("remove", etud);
+ td.setAttribute("assiduite_id", "");
+ } else {
+ console.error(data.errors["0"].message);
+ erreurModuleImpl(data.errors["0"].message);
+
+ }
+ },
+ (error) => {
+ console.error("Erreur lors de la suppression de l'assiduité", error);
+
+ }
+ );
+ } else {
+ // Modification
+ await async_post(
+ `../../api/assiduite/${assiduite_id}/edit`,
+ assi,
+ (data) => {
+ envoiToastEtudiant(etat, etud);
+ },
+ (error) => {
+ console.error("Erreur lors de la modification de l'assiduité", error);
+ }
+ );
+ }
+ } else {
+ // Création
+ await async_post(
+ `../../api/assiduite/${etud.id}/create`,
+ [assi],
+ (data) => {
+ if (data.success.length > 0) {
+ envoiToastEtudiant(etat, etud);
+ //mise à jour de l'assiduité_id dans le td
+ td.setAttribute("assiduite_id", data.success["0"].message.assiduite_id);
+ } else {
+ console.error(data.errors["0"].message);
+ erreurModuleImpl(data.errors["0"].message);
+
+ }
+ },
+ (error) => {
+ console.error("Erreur lors de la création de l'assiduité", error);
+
+ }
+ );
+ }
+
+ }
+
+ async function recupAssiduitesHebdo(callback) {
+ const etudIds = etuds.map((etud) => etud.id).join(",");
+ const date_debut = days[0].date.startOf("day").format("YYYY-MM-DDTHH:mm");
+ const date_fin = days[6].date.endOf("day").format("YYYY-MM-DDTHH:mm");
+
+ url =
+ `../../api/assiduites/group/query?date_debut=${date_debut}` +
+ `&date_fin=${date_fin}&etudids=${etudIds}&with_justifs`;
+
+ await fetch(url)
+ .then((res) => {
+ if (!res.ok) {
+ throw new Error("Network response was not ok");
+ }
+ return res.json();
+ })
+ .then((data) => {
+ let assiduites = []
+ Object.keys(data).forEach((etudid) => {
+ assiduites.push(...data[etudid]);
+ });
+ callback(assiduites);
+ })
+ .catch((error) =>
+ console.error(
+ "There has been a problem with your fetch operation:",
+ error
+ )
+ );
+ }
+
+
+ function updateTable(assiduites) {
+
+ // Suppression existant
+ document.querySelectorAll("td.btns").forEach((el) => {
+ el.remove();
+ });
+
+ for (let i = 0; i < days.length; i++) {
+ let day = days[i].date;
+
+ let morningPeriod = {
+ deb: new Date(day.format('YYYY-MM-DD') + "T" + temps.matin.debut),
+ fin: new Date(day.format('YYYY-MM-DD') + "T" + temps.matin.fin),
+ }
+ let afternoonPeriod = {
+ deb: (new Date(day.format('YYYY-MM-DD') + "T" + temps.apresmidi.debut)),
+ fin: new Date(day.format('YYYY-MM-DD') + "T" + temps.apresmidi.fin),
+ }
+ const assiduitesByDay = {
+ matin: assiduites.filter((assi) => {
+ const period = {
+ deb: new Date(assi.date_debut),
+ fin: new Date(assi.date_fin)
+ }
+ return hasTimeConflict(period, morningPeriod);
+ }),
+ apresmidi: assiduites.filter((assi) => {
+ const period = {
+ deb: new Date(assi.date_debut),
+ fin: new Date(assi.date_fin)
+ }
+ return hasTimeConflict(period, afternoonPeriod);
+ })
+ };
+
+ // Récupération des tr étudiants
+ let trs = document.querySelectorAll("tr[etudid]");
+
+ trs.forEach((tr) => {
+ let etudid = tr.getAttribute("etudid");
+
+ if (!days[i].visible && i >= 5) {
+ return;
+ } else if (!days[i].visible) {
+ tr.insertAdjacentHTML("beforeend", "<td class='grayed btns' colspan='2'></td>");
+ return;
+ }
+
+ let etudAssiMorning = assiduitesByDay.matin.filter((a) => {
+ return a.etudid == etudid;
+ });
+ let etudAssiAfternoon = assiduitesByDay.apresmidi.filter((a) => {
+ return a.etudid == etudid;
+ });
+
+ // Créations des boutons
+ // matin
+ let tdMatin = document.createElement("td");
+ tdMatin.classList.add("btns");
+ tdMatin.setAttribute("day", i);
+ tdMatin.setAttribute("time", "am");
+
+ tr.appendChild(tdMatin);
+
+ // après-midi
+ let tdApresmidi = document.createElement("td");
+ tdApresmidi.classList.add("btns");
+ tdApresmidi.setAttribute("day", i);
+ tdApresmidi.setAttribute("time", "pm");
+ tr.appendChild(tdApresmidi);
+
+
+ // Peuplement des boutons en fonction des assiduités
+ boutons = `
+ <input type="checkbox" name="matin-${etudid}" id="matin-${etudid}"
+ class="rbtn present" value="present">
+ <input type="checkbox" name="matin-${etudid}" id="matin-${etudid}"
+ class="rbtn retard" value="retard">
+ <input type="checkbox" name="matin-${etudid}" id="matin-${etudid}"
+ class="rbtn absent" value="absent">
+ `
+
+ // matin
+ tdMatin.innerHTML = boutons
+ tdMatin.setAttribute("assiduite_id", "")
+ if (etudAssiMorning.length != 0) {
+ let assi = etudAssiMorning[0];
+ const deb = new Date(assi.date_debut);
+ const fin = new Date(assi.date_fin);
+
+ // si dates == periode -> cocher bouton correspondant
+ // Sinon supprimer boutons et mettre case "rouge" + tooltip
+
+ if (deb.isSame(morningPeriod.deb, "minutes") && fin.isSame(morningPeriod.fin, "minutes")) {
+ let etat = assi.etat.toLowerCase();
+ tdMatin.querySelector(`[value="${etat}"]`).checked = true;
+ tdMatin.setAttribute("assiduite_id", assi.assiduite_id);
+ } else {
+ tdMatin.innerHTML = ""
+ tdMatin.classList.add("conflit");
+ tdMatin.title = "Des assiduités existent déjà pour cette période"
+ tdMatin.setAttribute("data-tooltip", "");
+ }
+ }
+
+ // après-midi
+ tdApresmidi.innerHTML = boutons
+ tdApresmidi.setAttribute("assiduite_id", "")
+ if (etudAssiAfternoon.length != 0) {
+ let assi = etudAssiAfternoon[0];
+ const deb = new Date(assi.date_debut);
+ const fin = new Date(assi.date_fin);
+
+ // si dates == periode -> cocher bouton correspondant
+ // Sinon supprimer boutons et mettre case "rouge" + tooltip
+
+ if (deb.isSame(afternoonPeriod.deb, "minutes") && fin.isSame(afternoonPeriod.fin, "minutes")) {
+ let etat = assi.etat.toLowerCase();
+ tdApresmidi.querySelector(`[value="${etat}"]`).checked = true;
+ tdApresmidi.setAttribute("assiduite_id", assi.assiduite_id);
+ } else {
+ tdApresmidi.innerHTML = ""
+ tdApresmidi.classList.add("conflit");
+ tdApresmidi.title = "Des assiduités existent déjà pour cette période"
+ tdApresmidi.setAttribute("data-tooltip", "");
+ }
+ }
+
+ });
+ }
+
+ document.querySelectorAll("td .rbtn").forEach((el) => {
+ el.addEventListener("click", (e) => {
+ let target = e.target;
+ let parent = target.parentElement;
+ let inputs = parent.querySelectorAll(".rbtn");
+ inputs.forEach((input) => {
+ if (input != target) {
+ input.checked = false;
+ }
+ });
+ actionButton(target, !target.checked);
+ });
+ });
+
+ enableTooltips("table");
+
+ }
+
+ // Une fonction pour changer de semaine (précédente ou suivante)
+ // fait juste un location.href avec les bons paramètres
+ function changeWeek(prev = false) {
+ const currentUrl = new URL(window.location.href); // Récupère l'URL actuelle
+ const params = new URLSearchParams(currentUrl.search); // Récupère les paramètres de l'URL
+ let currentWeekParam = params.get('week');
+
+ // Extraire l'année et le numéro de semaine du paramètre de la semaine actuelle
+ const [year, week] = currentWeekParam.split('-W').map(Number);
+
+ // Calculer la nouvelle semaine et l'année
+ let newYear = year;
+ let newWeek = week + (prev ? -1 : 1);
+
+ if (newWeek < 1) {
+ newYear -= 1; // Passer à l'année précédente
+ newWeek = getISOWeeksInYear(newYear); // Dernière semaine de l'année précédente
+ } else if (newWeek > getISOWeeksInYear(newYear)) {
+ newYear += 1; // Passer à l'année suivante
+ newWeek = 1; // Première semaine de l'année suivante
+ }
+
+ // Formater le nouveau paramètre de semaine
+ const newWeekParam = `${newYear}-W${String(newWeek).padStart(2, '0')}`;
+ params.set('week', newWeekParam); // Mettre à jour le paramètre 'week'
+ currentUrl.search = params.toString(); // Mettre à jour les paramètres de l'URL
+ window.location.href = currentUrl.toString(); // Rediriger vers la nouvelle URL
+ }
+
+
+
+ // Une fonction pour gérer le bouton "tout le monde présent"
+ // coche tous les boutons de la colonne
+ function allPresent(day, time) {
+ // Version naive : coche tous les boutons de la colonne
+ // TODO - Optimiser avec une seule requête API
+ let inputs = document.querySelectorAll(`td[day="${day}"][time="${time}"] .rbtn[value="present"]`);
+ inputs.forEach((input) => {
+ input.click();
+ });
+ }
+
+</script>
+
+
+<script>
function updateTemps(temps){
let matin = document.getElementById("text-matin");
let apresmidi = document.getElementById("text-apresmidi");
matin.textContent = `${temps.matin.debut} à ${temps.matin.fin}`;
apresmidi.textContent = `${temps.apresmidi.debut} à ${temps.apresmidi.fin}`;
+
+ recupAssiduitesHebdo(updateTable);
}
const temps = {
matin: {
- debut: "09:00",
- fin: "12:00"
+ debut: "{{ scu.get_assiduites_time_config("assi_morning_time") }}",
+ fin: "{{ scu.get_assiduites_time_config("assi_lunch_time") }}"
},
apresmidi: {
- debut: "13:00",
- fin: "17:00"
+ debut: "{{ scu.get_assiduites_time_config("assi_lunch_time") }}",
+ fin: "{{ scu.get_assiduites_time_config("assi_afternoon_time") }}",
}
}
- document.querySelectorAll(".rbtn").forEach((el)=>{
- el.addEventListener("click", (e)=>{
- let target = e.target;
- let parent = target.parentElement;
- let inputs = parent.querySelectorAll(".rbtn");
-
- inputs.forEach((input)=>{
- if (input != target){
- input.checked = false;
- }
- });
- });
- });
+
document.getElementById("text-matin").addEventListener("click", (e)=>{
e.preventDefault();
@@ -283,10 +618,19 @@ document.addEventListener("DOMContentLoaded", ()=>{
modal.classList.remove("show");
}
});
+
+
+ document.querySelectorAll("th .rbtn").forEach((el)=>{
+ el.addEventListener("click", (e)=>{
+ allPresent(...el.id.split("-"));
+ e.preventDefault();
+ })
+ })
})
</script>
+
{% endblock scripts %}
{% block title %}
@@ -298,48 +642,63 @@ document.addEventListener("DOMContentLoaded", ()=>{
<h2>Signalement hebdomadaire de l'assiduité {{ gr | safe }}</h2>
<br>
<div id="actions" class="flex">
- <button>Semaine précédente</button>
+ <button onclick="changeWeek(true)">Semaine précédente</button>
<label for="moduleimpl_select">
Module:
{{moduleimpl_select | safe}}
</label>
- <button>Semaine suivante</button>
+ <button onclick="changeWeek(false)">Semaine suivante</button>
</div>
<h3 id="tableau-dates">
Le matin <a href="#" id="text-matin" title="Cliquer pour modifier les horaires">9h à 12h</a> et l'après-midi de <a href="#" id="text-apresmidi" title="Cliquer pour modifier les horaires">13h à 17h</a>
</h3>
-<table>
+<table id="table">
<thead>
<tr class="premier">
<th rowspan="2">Étudiants</th>
- <th colspan="2">Lundi</th>
- <th colspan="2">Mardi</th>
- <th colspan="2">Mercredi</th>
- <th colspan="2">Jeudi</th>
- <th colspan="2">Vendredi</th>
+
+ {% for jour in hebdo_jours %}
+
+ {% if not jour[0] or jour[1][0] not in ['Samedi', 'Dimanche'] %}
+ <th colspan="2" class="{{'grayed' if jour[0] else ''}}" >{{ jour[1][0] }} {{jour[1][1] }}</th>
+ {% endif %}
+
+ {% endfor %}
</tr>
<tr class="second">
- <th>Matin</th>
- <th>Après-midi</th>
- <th>Matin</th>
- <th>Après-midi</th>
- <th>Matin</th>
- <th>Après-midi</th>
- <th>Matin</th>
- <th>Après-midi</th>
- <th>Matin</th>
- <th>Après-midi</th>
+ {% for jour in hebdo_jours %}
+
+ {% if not jour[0] or jour[1][0] not in ['Samedi', 'Dimanche'] %}
+ <th class="{{'grayed' if jour[0] else ''}}">Matin</th>
+ <th class="{{'grayed' if jour[0] else ''}}">Après-midi</th>
+ {% endif %}
+ {% endfor %}
+ </tr>
+ <tr>
+ {# Ne pas afficher si preference "non presences" #}
+ <th></th>
+ {% for jour in hebdo_jours %}
+ {% if not jour[0] or jour[1][0] not in ['Samedi', 'Dimanche'] %}
+ <th class="{{'grayed' if jour[0] else ''}}">
+ <input title="Mettre tout le monde présent" data-tooltip type="checkbox" name="" id="{{loop.index - 1}}-am" class="rbtn present" {{'disabled' if jour[0] else ''}}>
+ </th>
+ <th class="{{'grayed' if jour[0] else ''}}">
+ <input title="Mettre tout le monde présent" data-tooltip type="checkbox" name="" id="{{loop.index - 1}}-pm" class="rbtn present" {{'disabled' if jour[0] else ''}}>
+ </th>
+ {% endif %}
+ {% endfor %}
+
</tr>
</thead>
<tbody>
{% for etud in etudiants %}
- <tr>
+ <tr etudid="{{etud.etudid}}" id="row-{{etud.etudid}}">
<td class="etudinfo" id="etud-{{etud.etudid}}">{{ etud.nomprenom }}</td>
- {# à changer par jour travaillés (sco pref) #}
- {% for day in ['lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi'] %}
- <td>
+ {# Sera rempli en JS #}
+ {# Ne pas afficher bouton présent si pref "non présences" #}
+ {# <td>
<input type="checkbox" name="" id="" class="rbtn present">
<input type="checkbox" name="" id="" class="rbtn retard">
<input type="checkbox" name="" id="" class="rbtn absent">
@@ -348,8 +707,7 @@ document.addEventListener("DOMContentLoaded", ()=>{
<input type="checkbox" name="" id="" class="rbtn present">
<input type="checkbox" name="" id="" class="rbtn retard">
<input type="checkbox" name="" id="" class="rbtn absent">
- </td>
- {% endfor %}
+ </td> #}
</tr>
{% endfor %}
</tbody>
@@ -373,4 +731,5 @@ document.addEventListener("DOMContentLoaded", ()=>{
</div>
{% include "assiduites/widgets/alert.j2" %}
+{% include "assiduites/widgets/toast.j2" %}
{% endblock app_content %}
\ No newline at end of file
diff --git a/app/views/assiduites.py b/app/views/assiduites.py
index 2dcfec2e..f84330b6 100644
--- a/app/views/assiduites.py
+++ b/app/views/assiduites.py
@@ -2072,6 +2072,45 @@ def signal_assiduites_hebdo():
# TODO vérif perm AbsChange -> readonly
+ # Gestion des jours
+ jours: dict[str, list[str]] = {
+ "lun": [
+ "Lundi",
+ datetime.datetime.strptime(week + "-1", "%G-W%V-%u").strftime("%d/%m/%Y"),
+ ],
+ "mar": [
+ "Mardi",
+ datetime.datetime.strptime(week + "-2", "%G-W%V-%u").strftime("%d/%m/%Y"),
+ ],
+ "mer": [
+ "Mercredi",
+ datetime.datetime.strptime(week + "-3", "%G-W%V-%u").strftime("%d/%m/%Y"),
+ ],
+ "jeu": [
+ "Jeudi",
+ datetime.datetime.strptime(week + "-4", "%G-W%V-%u").strftime("%d/%m/%Y"),
+ ],
+ "ven": [
+ "Vendredi",
+ datetime.datetime.strptime(week + "-5", "%G-W%V-%u").strftime("%d/%m/%Y"),
+ ],
+ "sam": [
+ "Samedi",
+ datetime.datetime.strptime(week + "-6", "%G-W%V-%u").strftime("%d/%m/%Y"),
+ ],
+ "dim": [
+ "Dimanche",
+ datetime.datetime.strptime(week + "-7", "%G-W%V-%u").strftime("%d/%m/%Y"),
+ ],
+ }
+
+ non_travail = sco_preferences.get_preference("non_travail")
+ non_travail = non_travail.replace(" ", "").split(",")
+
+ hebdo_jours: list[tuple[bool, str]] = []
+ for key, val in jours.items():
+ hebdo_jours.append((key in non_travail, val))
+
return render_template(
"assiduites/pages/signal_assiduites_hebdo.j2",
gr=gr_tit,
@@ -2079,6 +2118,7 @@ def signal_assiduites_hebdo():
moduleimpl_select=_module_selector(
formsemestre=formsemestre, moduleimpl_id=moduleimpl_id
),
+ hebdo_jours=hebdo_jours,
)
--
GitLab