ScoDoc/app/templates/assiduites/pages/signal_assiduites_hebdo.j2

898 lines
29 KiB
Django/Jinja

{% extends "sco_page.j2" %}
{% block styles %}
{{ super() }}
<link rel="stylesheet" href="{{scu.STATIC_DIR}}/css/assiduites.css">
<link rel="stylesheet" href="{{scu.STATIC_DIR}}/css/minitimeline.css">
<style>
.rbtn::before {
--size: 1.5em;
width: var(--size);
height: var(--size);
}
.ui-timepicker-container,
#ui-datepicker-div {
z-index: 5 !important;
}
#new_periode,
#actions {
display: flex;
flex-direction: column;
width: fit-content;
gap: 0.5em;
}
#actions {
flex-direction: row;
align-items: center;
margin: 5px 0;
}
#actions label {
margin: 0;
}
#fix {
display: flex;
flex-direction: row;
gap: 1em;
justify-content: space-between;
width: fit-content;
}
#fix>.box {
border: 1px solid #444;
border-radius: 0.5em;
padding: 1em;
}
.timepicker {
width: 5em;
text-align: center;
}
#moduleimpl_select {
text-align: center;
}
table {
border-collapse: collapse;
width: 100%;
max-width: 1600px;
position: relative;
table-layout: fixed;
}
th,
td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
background-color: white;
}
th {
z-index: 1;
}
.premier th {
position: sticky;
top: 0;
background-color: white;
}
.second th {
position: sticky;
top: 38px;
background-color: white;
}
.sticky-col {
position: sticky;
left: 0;
z-index: 1;
}
.rbtn:not(:checked)::before {
opacity: 0.5;
}
.grayed {
filter: brightness(0.5);
}
.conflit {
background-color: var(--color-conflit);
}
.conflit_calendar{
font-size: 1.5em;
cursor: pointer;
}
</style>
<style>
.timePicker-modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}
.timePicker-modal.show {
display: block;
}
.timePicker-modal-content {
background-color: white;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 300px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
text-align: center;
}
.timePicker-close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.timePicker-close:hover,
.timePicker-close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.time-picker-container {
margin: 15px 0;
}
#confirmButton {
padding: 10px 20px;
font-size: 16px;
background-color: var(--color-primary);
color: white;
border: none;
cursor: pointer;
}
#confirmButton:hover {
background-color: var(--color-secondary);
}
.etudinfo{
text-align: left;
}
</style>
{% endblock styles %}
{% block scripts %}
{{ super() }}
<script src="{{scu.STATIC_DIR}}/js/etud_info.js"></script>
<script src="{{scu.STATIC_DIR}}/js/assiduites.js"></script>
<script src="{{scu.STATIC_DIR}}/js/date_utils.js"></script>
{% include "sco_timepicker.j2" %}
<script>
const readonly = "{{readonly | safe}}" == "True";
const non_present = "{{non_present | safe}}" == "True";
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(),
}
let cancelEvent = false;
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);
cancelEvent = true;
erreurModuleImpl(data.errors["0"].message);
}
},
(error) => {
console.error("Erreur lors de la suppression de l'assiduité", error);
cancelEvent = true;
}
);
} 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);
cancelEvent = true;
erreurModuleImpl(error.message);
}
);
}
} 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);
cancelEvent = true;
}
},
(error) => {
console.error("Erreur lors de la création de l'assiduité", error);
}
);
}
return cancelEvent;
}
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) {
const img_conflit = `
<a
class="conflit_calendar"
title="Des assiduités existent déjà pour cette période. Cliquez ici pour voir le calendrier de l'assiduité de l'étudiant"
data-tooltip
target="_blank"
>📅</a>`
// 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
let boutons = `
<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">
`
if (!non_present) {
boutons = `<input type="checkbox" name="matin-${etudid}" id="matin-${etudid}"
class="rbtn present" value="present">`+boutons;
}
// 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();
const input = tdMatin.querySelector(`[value="${etat}"]`)
if (input) {
input.checked = true;
}
tdMatin.setAttribute("assiduite_id", assi.assiduite_id);
let saisie = new Date(assi.entry_date).format("DD/MM/Y HH:mm");
saisie = saisie.split(" ").join(" à ");
let text = `noté ${etat} le ${saisie} par ${assi.user_nom_complet}`;
tdMatin.setAttribute("title", text);
tdMatin.setAttribute("data-tooltip", "");
} else {
tdMatin.innerHTML = img_conflit;
tdMatin.querySelector(".conflit_calendar").href = `calendrier_assi_etud?etudid=${etudid}`;
tdMatin.classList.add("conflit");
}
}
// 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();
const input = tdApresmidi.querySelector(`[value="${etat}"]`)
if (input) {
input.checked = true;
}
tdApresmidi.setAttribute("assiduite_id", assi.assiduite_id);
let saisie = new Date(assi.entry_date).format("DD/MM/Y HH:mm");
saisie = saisie.split(" ").join(" à ");
let text = `noté ${etat} le ${saisie} par ${assi.user_nom_complet}`;
tdApresmidi.setAttribute("title", text);
tdApresmidi.setAttribute("data-tooltip", "");
} else {
tdApresmidi.innerHTML = img_conflit;
tdApresmidi.querySelector(".conflit_calendar").href = `calendrier_assi_etud?etudid=${etudid}`;
tdApresmidi.classList.add("conflit");
}
}
});
}
document.querySelectorAll("td .rbtn").forEach((el) => {
el.addEventListener("click", async (e) => {
if (readonly) {
e.preventDefault();
return;
}
let target = e.target;
let parent = target.parentElement;
let isCancelled = await actionButton(target, !target.checked);
if (isCancelled) {
e.preventDefault();
target.checked = !target.checked;
return;
}
let inputs = parent.querySelectorAll(".rbtn");
inputs.forEach((input) => {
if (input != target) {
input.checked = false;
}
});
});
});
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 tds = document.querySelectorAll(`td[day="${day}"][time="${time}"]`);
const real_time = time == "am" ? "matin" : "apresmidi";
const assi = {
etat: "present",
moduleimpl_id: document.getElementById("moduleimpl_select").value,
date_debut: new Date(days[day].date.format('YYYY-MM-DD') + "T" + temps[real_time].debut).toFakeIso(),
date_fin: new Date(days[day].date.format('YYYY-MM-DD') + "T" + temps[real_time].fin).toFakeIso(),
}
let toCreate = []; // [{etudid:<int>}]
let toEdit = [];// [{etudid:<int>, assiduite_id:<int>}]
tds.forEach((td) => {
// on ne touche pas aux conflits
if (td.classList.contains("conflit")) {
return;
}
const tr = td.parentElement;
const etudid = Number(tr.getAttribute("etudid"));
const assiduite_id = td.getAttribute("assiduite_id");
if (assiduite_id == "") {
toCreate.push({ etudid: etudid });
} else {
toEdit.push({ etudid: etudid, assiduite_id: Number(assiduite_id) });
}
})
// Création
toCreate = toCreate.map((el) => {
return {
...assi,
etudid: el.etudid,
}
});
// Modification
toEdit = toEdit.map((el) => {
return {
...assi,
etudid: el.etudid,
assiduite_id: el.assiduite_id,
}
});
// Appel API
let counts = {
create: toCreate.length,
edit: toEdit.length
}
const promiseCreate = async_post(
`../../api/assiduites/create`,
toCreate,
async (data) => {
if (data.errors.length > 0) {
console.error(data.errors);
data.errors.forEach((err) => {
let obj = toCreate[err.indice];
let etu = etuds.find((el) => el.id == obj.etudid);
const text = document.createTextNode(`Erreur pour ${etu.nom} ${etu.prenom} : ${err.message}`);
const toast = generateToast(text, "var(--color-error)", 10);
pushToast(toast);
});
}
counts.create = data.success.length;
},
(error) => {
console.error("Erreur lors de la création de l'assiduité", error);
}
);
const promiseEdit = async_post(
`../../api/assiduites/edit`,
toEdit,
async (data) => {
if (data.errors.length > 0) {
console.error(data.errors);
data.errors.forEach((err) => {
let obj = toEdit[err.indice];
let etu = etuds.find((el) => el.id == obj.etudid);
const text = document.createTextNode(`Erreur pour ${etu.nom} ${etu.prenom} : ${err.message}`);
const toast = generateToast(text, "var(--color-error)");
pushToast(toast);
});
}
counts.edit = data.success.length;
},
(error) => {
console.error("Erreur lors de l'édition de l'assiduité", error);
}
);
// Affiche un loader
afficheLoader();
Promise.all([promiseCreate, promiseEdit]).then(async () => {
retirerLoader();
await recupAssiduitesHebdo(updateTable);
envoiToastTous("present", counts.create + counts.edit);
});
}
</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: "{{ scu.get_assiduites_time_config("assi_morning_time") }}",
fin: "{{ scu.get_assiduites_time_config("assi_lunch_time") }}"
},
apresmidi: {
debut: "{{ scu.get_assiduites_time_config("assi_lunch_time") }}",
fin: "{{ scu.get_assiduites_time_config("assi_afternoon_time") }}",
}
}
document.getElementById("text-matin").addEventListener("click", (e)=>{
e.preventDefault();
openModal(true);
});
document.getElementById("text-apresmidi").addEventListener("click", (e)=>{
e.preventDefault();
openModal(false);
});
updateTemps(temps);
</script>
<script>
function openModal(morning = true){
let text = morning ? "du matin" : "de l'après-midi";
const modal = document.getElementById("timePickerModal");
modal.querySelector("#timePicker-modal-text").textContent = text;
let time1 = $("#time1");
let time2 = $("#time2");
// Réinitialiser les champs
time1.val("");
time2.val("");
// Définir l'action du bouton de confirmation
document.getElementById("confirmButton").onclick = function(){
let debut = time1.val();
let fin = time2.val();
if (debut == "" || fin == ""){
alert("Veuillez remplir les deux champs");
return;
}
if (debut >= fin){
alert("L'heure de début doit être inférieure à l'heure de fin");
return;
}
if (morning){
if (fin > temps.apresmidi.debut){
alert("L'heure de fin du matin doit être inférieure à l'heure de début de l'après-midi");
return;
}
temps.matin.debut = debut;
temps.matin.fin = fin;
} else {
if (debut < temps.matin.fin){
alert("L'heure de début de l'après-midi doit être supérieure à l'heure de fin du matin");
return;
}
temps.apresmidi.debut = debut;
temps.apresmidi.fin = fin;
}
updateTemps(temps);
modal.classList.remove("show");
}
modal.classList.add("show");
}
document.addEventListener("DOMContentLoaded", ()=>{
const modal = document.getElementById("timePickerModal");
modal.querySelector(".timePicker-close").onclick = function() {
modal.classList.remove("show");
}
document.addEventListener('keyup', function(e) {
if (e.key === "Escape" && modal.classList.contains("show")) {
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 %}
{{ title }}
{% endblock title %}
{% block app_content %}
<h2>Signalement hebdomadaire de l'assiduité {{ gr | safe }}</h2>
<br>
<div id="actions" class="flex">
<button onclick="changeWeek(true)">Semaine précédente</button>
<label for="moduleimpl_select">
Module:
{{moduleimpl_select | safe}}
</label>
<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>
{% if readonly %}
<h4
title="Vous n'avez pas les permissions nécessaires afin de modifier les assiduités"
data-tooltip
>
Ouvert en mode <span class="rouge">lecture seule</span>.
</h4>
{% endif %}
<table id="table">
<thead>
<tr class="premier">
<th rowspan="2">Étudiants</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">
{% 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>
{% if not readonly and not non_present %}
<tr>
{# Ne pas afficher si preference "non presences" / "readonly" #}
<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>
{% endif %}
</thead>
<tbody>
{% for etud in etudiants %}
<tr etudid="{{etud.etudid}}" id="row-{{etud.etudid}}">
<td class="etudinfo" id="etud-{{etud.etudid}}">{{ etud.nom_prenom() }}</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">
</td>
<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">
</td> #}
</tr>
{% endfor %}
</tbody>
</table>
<div id="timePickerModal" class="timePicker-modal">
<div class="timePicker-modal-content">
<span class="timePicker-close">&times;</span>
<h2>Choisissez les horaires <span id="timePicker-modal-text"></span></h2>
<div class="time-picker-container">
<label for="time1">Début</label>
<input type="text" id="time1" name="time1" class="timepicker" placeholder="hh:mm">
</div>
<div class="time-picker-container">
<label for="time2">Fin</label>
<input type="text" id="time2" name="time2" class="timepicker" placeholder="hh:mm">
</div>
<span>
<button id="confirmButton">Confirmer</button>
</div>
</div>
{% include "assiduites/widgets/alert.j2" %}
{% include "assiduites/widgets/toast.j2" %}
{% endblock app_content %}