1
0
forked from ScoDoc/ScoDoc
ScoDoc/app/templates/assiduites/pages/bilan_etud.j2

257 lines
8.6 KiB
Plaintext
Raw Normal View History

{% extends "sco_page.j2" %}
{% block title %}
Bilan assiduité de {{sco.etud.nomprenom}}
{% endblock title %}
{% block styles %}
{{ super() }}
<link rel="stylesheet" href="{{scu.STATIC_DIR}}/css/assiduites.css">
<style>
.stats-values-item {
display: flex;
justify-content: space-evenly;
align-items: center;
flex-direction: column;
}
.stats {
border: 1px solid #333;
padding: 5px 2px;
width: fit-content;
}
.stats-values {
display: flex;
justify-content: flex-start;
gap: 15px;
}
.stats-values-item h5 {
font-weight: bold;
text-decoration-line: underline;
}
.stats-values-part {
display: flex;
flex-direction: column;
}
.scobox.alerte {
text-align: center;
border-radius: 7px;
background-color: var(--color-error);
}
.alerte.invisible {
display: none;
}
.alerte p {
font-size: larger;
color: whitesmoke;
}
.suppr {
margin: 5px 0;
}
</style>
{% endblock styles %}
2023-06-28 17:15:24 +02:00
{% block app_content %}
<div class="pageContent">
<h2>Bilan de l'assiduité de {{sco.etud.html_link_fiche()|safe}}</span></h2>
2023-06-28 17:15:24 +02:00
<div class="scobox alerte invisible">
2023-06-28 17:15:24 +02:00
<p>Attention, cet étudiant a trop d'absences</p>
</div>
2023-06-28 17:15:24 +02:00
<div class="scobox">
2023-06-28 17:15:24 +02:00
<!-- Statistiques d'assiduité (nb pres, nb retard, nb absence) + nb justifié -->
<h4>Statistiques d'assiduité</h4>
<div class="stats-inputs">
<label class="stats-label"> Date de début <input type="text" class="datepicker" name="stats_date_debut"
2023-11-15 14:11:47 +01:00
id="stats_date_debut" value="{{date_debut}}"></label>
<label class="stats-label"> Date de fin <input type="text" class="datepicker" name="stats_date_fin"
2023-11-15 14:11:47 +01:00
id="stats_date_fin" value="{{date_fin}}"></label>
2023-06-28 17:15:24 +02:00
<button onclick="stats()">Actualiser</button>
</div>
<div class="stats-values">
</div>
</div>
2023-06-28 17:15:24 +02:00
<div class="scobox">
2023-06-28 17:15:24 +02:00
<section class="nonvalide">
2024-01-19 17:06:01 +01:00
{{tableau | safe }}
2023-06-28 17:15:24 +02:00
</section>
</div>
2023-06-28 17:15:24 +02:00
<div class="legende">
2023-06-30 14:38:56 +02:00
<h3>Statistiques</h3>
<p>Un message d'alerte apparait si le nombre d'absence dépasse le seuil (indiqué dans les préférences du
département)</p>
2023-09-21 08:46:21 +02:00
<p>Les statistiques sont calculées entre les deux dates sélectionnées. Après modification des dates,
2023-06-30 14:38:56 +02:00
appuyer sur le bouton "Actualiser"</p>
{% include "assiduites/explication_etats_justifs.j2" %}
2023-06-28 17:15:24 +02:00
</div>
</div>
{% endblock app_content %}
{% block scripts %}
{{ super() }}
<script src="{{scu.STATIC_DIR}}/js/assiduites.js"></script>
<script src="{{scu.STATIC_DIR}}/js/date_utils.js"></script>
<script>
// Récupération des statistiques d'assiduité et affichage
// Fonction appelée lors du clic sur le bouton "Actualiser"
// Et au chargement de la page
2023-06-28 17:15:24 +02:00
function stats() {
// On prend les dates de début et de fin
// (format DD/MM/YYYY) et on les convertit en Date()
2023-06-28 17:15:24 +02:00
const dd_val = document.getElementById('stats_date_debut').value;
const df_val = document.getElementById('stats_date_fin').value;
2023-11-15 14:11:47 +01:00
let date_debut = new Date(Date.fromFRA(dd_val));
let date_fin = new Date(Date.fromFRA(df_val));
if (dd_val == "" || df_val == "" || !date_debut.isValid() || !date_debut.isValid()) {
2023-06-28 17:15:24 +02:00
openAlertModal("Dates invalides", document.createTextNode('Les dates sélectionnées sont invalides'));
return;
}
// On met les dates à 00h et 23h59 pour avoir la journée entière
2023-11-15 14:11:47 +01:00
date_debut = date_debut.startOf("day")
date_fin = date_fin.endOf("day")
2023-06-28 17:15:24 +02:00
2023-11-15 14:11:47 +01:00
if (date_debut.isAfter(date_fin)) {
2023-06-28 17:15:24 +02:00
openAlertModal("Dates invalides", document.createTextNode('La date de début se situe après la date de fin.'));
return;
}
// Appel à l'api et affichage des stats sur la page
2023-11-20 16:55:26 +01:00
countAssiduites(date_debut.toFakeIso(), date_fin.toFakeIso())
2023-06-28 17:15:24 +02:00
}
// Appel à l'api pour récupérer les statistiques d'assiduité
// Effectue l'action passée en paramètre sur les données récupérées
// dateDeb : date de début au format ISO
// dateFin : date de fin au format ISO
// action : fonction à appeler sur les données récupérées
2024-01-18 17:05:43 +01:00
function getAssiduitesCount(dateDeb, dateFin, action) {
const url_api = `../../api/assiduites/${etudid}/count/query?date_debut=${dateDeb}&date_fin=${dateFin}&etat=absent,retard,present&split`;
2024-01-18 17:05:43 +01:00
async_get(
url_api,
action,
()=>{},
);
}
function showStats(data){
// Initialisation d'un objet contenant les résultats
// Sera mis à jour avec le reste des valeurs dans la suite
// du code
2024-01-18 17:05:43 +01:00
const counter = {
"present": {
"total": data["present"],
2023-06-28 17:15:24 +02:00
},
2024-01-18 17:05:43 +01:00
"retard": {
"total": data["retard"],
"justi": data["retard"]["justifie"],
},
"absent": {
"total": data["absent"],
"justi": data["absent"]["justifie"],
}
}
// Reset du DOM
2024-01-18 17:05:43 +01:00
const values = document.querySelector('.stats-values');
values.innerHTML = "";
// Pour chaque état d'assiduité (present, retard, absent)
2024-01-18 17:05:43 +01:00
Object.keys(counter).forEach((key) => {
// On créé les éléments HTML qui serviront d'affichage
2024-01-18 17:05:43 +01:00
const item = document.createElement('div');
item.classList.add('stats-values-item');
const div = document.createElement('div');
div.classList.add('stats-values-part');
// Fonction anonyme pour éviter de réécrire tout le temps un test
// Si l'état est "present" alors cela renvoie "" (=> pas de nb justifié)
// Sinon cela renvoie "dont X justifiées"
2024-01-18 17:05:43 +01:00
const withJusti = (key, metric) => {
if (key == "present") return "";
return ` dont ${counter[key].justi[metric]} justifiées`
}
// HEURE : aroundie à 2 décimales.
2024-01-18 17:05:43 +01:00
const heure = document.createElement('span');
heure.textContent = `${counter[key].total.heure.toFixed(2)} heure(s)${withJusti(key, "heure")}`;
// DEMI-JOURNEE
2024-01-18 17:05:43 +01:00
const demi = document.createElement('span');
demi.textContent = `${counter[key].total.demi} demi-journée(s)${withJusti(key, "demi")}`;
// JOURNEE
2024-01-18 17:05:43 +01:00
const jour = document.createElement('span');
jour.textContent = `${counter[key].total.journee} journée(s)${withJusti(key, "journee")}`;
// On met à jour le DOM avec les valeurs calculées
// On met l'état en Titre pour chaque partie
2024-01-18 17:05:43 +01:00
div.append(jour, demi, heure);
const title = document.createElement('h5');
title.textContent = key.capitalize();
item.append(title, div)
values.appendChild(item);
2023-06-28 17:15:24 +02:00
});
2024-01-18 17:05:43 +01:00
// On vérifie si l'étudiant a trop d'absences
2024-01-18 17:05:43 +01:00
const nbAbs = data["absent"]["non_justifie"][assi_metric];
if (nbAbs > assi_seuil) {
// L'étudiant est au dessus du seuil (défini dans les préférences du département)
2024-01-18 17:05:43 +01:00
document.querySelector('.alerte').classList.remove('invisible');
document.querySelector('.alerte p').textContent = `Attention, cet étudiant a trop d'absences ${nbAbs} / ${assi_seuil} (${metriques[assi_metric]})`
} else {
document.querySelector('.alerte').classList.add('invisible');
}
2023-06-28 17:15:24 +02:00
}
function countAssiduites(dateDeb, dateFin) {
2024-01-18 17:05:43 +01:00
getAssiduitesCount(dateDeb, dateFin, showStats);
2023-06-28 17:15:24 +02:00
}
// Table de conversion des métriques
// Utilisé pour afficher les valeurs en fonction de la métrique
2023-06-28 17:15:24 +02:00
const metriques = {
"heure": "H.",
"demi": "1/2 J.",
"journee": "J."
}
// Récupération des données obligatoires pour les fonctions
// Depuis le contexte de la page (Jinja2)
2023-06-28 17:15:24 +02:00
const etudid = {{ sco.etud.id }};
const assi_metric = "{{ assi_metric | safe }}";
const assi_seuil = {{ assi_seuil }};
const assi_date_debut = "{{date_debut}}";
const assi_date_fin = "{{date_fin}}";
// Au chargement de la page, on met les dates par défaut
// Et on appelle la fonction stats() pour afficher les stats
2023-06-28 17:15:24 +02:00
window.addEventListener('load', () => {
document.getElementById('stats_date_fin').value = assi_date_fin;
document.getElementById('stats_date_debut').value = assi_date_debut;
stats();
})
</script>
{% endblock %}
2023-06-28 17:15:24 +02:00