Assiduité : signal_assiduites_hedbo : v1 OK

This commit is contained in:
Iziram 2024-05-28 20:07:25 +02:00
parent dea403b03d
commit d73b925006
3 changed files with 462 additions and 43 deletions

View File

@ -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;
}

View File

@ -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 %}

View File

@ -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,
)