Assiduité : page signal_assiduites_diff WIP

This commit is contained in:
Iziram 2024-03-13 16:35:56 +01:00
parent d14f7e21b7
commit 56ec4ba43d
5 changed files with 424 additions and 188 deletions

View File

@ -837,3 +837,64 @@ function dateCouranteEstTravaillee() {
}
return true;
}
/**
* Ajout de la visualisation des assiduités de la mini timeline
* @param {HTMLElement} el l'élément survollé
* @param {Assiduité} assiduite l'assiduité représentée par l'élément
*/
function setupAssiduiteBubble(el, assiduite) {
function formatDateModal(dateStr) {
const date = new Date(Date.removeUTC(dateStr));
return date.format("DD/MM/Y HH:mm");
}
if (!assiduite) return;
const bubble = document.createElement("div");
bubble.className = "assiduite-bubble";
bubble.classList.add(assiduite.etat.toLowerCase());
const idDiv = document.createElement("div");
idDiv.className = "assiduite-id";
getModuleImpl(assiduite).then((modImpl) => {
idDiv.textContent = `${modImpl}`;
});
bubble.appendChild(idDiv);
const periodDivDeb = document.createElement("div");
periodDivDeb.className = "assiduite-period";
periodDivDeb.textContent = `${formatDateModal(assiduite.date_debut)}`;
bubble.appendChild(periodDivDeb);
const periodDivFin = document.createElement("div");
periodDivFin.className = "assiduite-period";
periodDivFin.textContent = `${formatDateModal(assiduite.date_fin)}`;
bubble.appendChild(periodDivFin);
const stateDiv = document.createElement("div");
stateDiv.className = "assiduite-state";
stateDiv.textContent = `État: ${assiduite.etat.capitalize()}`;
bubble.appendChild(stateDiv);
const motifDiv = document.createElement("div");
stateDiv.className = "assiduite-why";
const motif = ["", null, undefined].includes(assiduite.desc)
? "Pas de motif"
: assiduite.desc.capitalize();
stateDiv.textContent = `Motif: ${motif}`;
bubble.appendChild(motifDiv);
const userIdDiv = document.createElement("div");
userIdDiv.className = "assiduite-user_id";
userIdDiv.textContent = `saisie le ${formatDateModal(
assiduite.entry_date,
" à "
)}`;
if (assiduite.user_id != null) {
userIdDiv.textContent += `\npar ${assiduite.user_nom_complet}`;
}
bubble.appendChild(userIdDiv);
el.appendChild(bubble);
}

View File

@ -1,101 +1,371 @@
{#
- TODO : revoir le fonctionnement de cette page (trop lente / complexe)
- Utiliser majoritairement du python
#}
{% extends "sco_page.j2" %}
{% block styles %}
{{ super() }}
<link rel="stylesheet" href="{{scu.STATIC_DIR}}/css/assiduites.css">
{{ super() }}
<link rel="stylesheet" href="{{scu.STATIC_DIR}}/css/assiduites.css">
<link rel="stylesheet" href="{{scu.STATIC_DIR}}/css/minitimeline.css">
<style>
.ui-timepicker-container,#ui-datepicker-div{
z-index: 5 !important;
}
#new_periode,
#actions {
display: flex;
flex-direction: column;
width: fit-content;
gap: 0.5em;
}
#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 {
width: 10em;
}
#gtrcontent .pdp {
display: none;
}
#gtrcontent[data-pdp="true"] .pdp {
display: block;
}
#tableau-periode {
overflow-x: scroll;
max-width: var(--sco-content-max-width);
}
#tableau-periode .pdp {
width: 2em;
height: 2em;
border-radius: 50%;
}
.grid-table {
display: grid;
grid-template-columns: 200px repeat({{ etudiants|length }}, 1fr);
width: var(--sco-content-max-width);
}
.cell, .header {
border: 1px solid #ddd;
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
background-color: #f9f9f9;
}
.header{
justify-content: space-between;
}
.cell{
justify-content: center;
}
.cell p{
text-align: center;
}
.sticky {
position: sticky;
left: 0;
background-color: #f9f9f9;
z-index: 2;
}
.cell .assiduite-bubble {
display: block;
top: 0;
z-index: 0;
}
</style>
{# Temporaire #}
<style>
.wip::before{
content: "WIP 🚧";
font-size: 1.5em;
margin: 2px;
color: red;
}
</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>
function afficherPDP(checked) {
if (checked) {
gtrcontent.setAttribute("data-pdp", "true");
} else {
gtrcontent.removeAttribute("data-pdp");
}
}
async function nouvellePeriode(){
periodeId++;
// On récupère les valeurs des inputs
let date = document.getElementById("date").value;
let debut = document.getElementById("debut").value;
let fin = document.getElementById("fin").value;
let moduleimpl_id = document.getElementById("moduleimpl_select").value;
const moduleimpl = await getModuleImpl({moduleimpl_id: moduleimpl_id});
// On ajoute la nouvelle période au tableau
let periodeDiv = document.createElement("div");
periodeDiv.classList.add("cell", "sticky");
const periodP = document.createElement("p");
periodP.textContent = `Période du ${date} de ${debut} à ${fin}`;
const modP = document.createElement("p");
modP.textContent = moduleimpl;
const close = document.createElement("button");
close.textContent = "❌";
close.addEventListener("click", (event)=>{
document.querySelectorAll(`.cell[data-periodeid="${periodeDiv.getAttribute('data-periodeid')}"]`).forEach((e)=>e.remove());
});
periodeDiv.appendChild(periodP);
periodeDiv.appendChild(modP);
periodeDiv.appendChild(close);
periodeDiv.setAttribute("data-periodeid", periodeId);
document.getElementById("tableau-periode").appendChild(periodeDiv);
let etudids = [...document
.querySelectorAll("#tableau-periode .header[data-etudid]")]
.map((e)=>e.getAttribute("data-etudid"));
const date_debut = new Date($("#date").datepicker("getDate").format("YYYY-MM-DD") + "T" + debut);
const date_fin = new Date($("#date").datepicker("getDate").format("YYYY-MM-DD") + "T" + fin);
date_debut.add(1, "seconds")
const url =
`../../api/assiduites/group/query?date_debut=${date_debut.toFakeIso()}` +
`&date_fin=${date_fin.toFakeIso()}&etudids=${etudids.join(',')}&with_justifs`;
await fetch(url)
.then((res) => {
if (!res.ok) {
throw new Error("Network response was not ok");
}
return res.json();
})
.then((data)=>{
Object.entries(data).forEach(([etudid, assiduites]) => {
let cell = document.createElement("div");
cell.classList.add("cell");
cell.setAttribute("data-etudid", etudid);
cell.setAttribute("data-periodeid", periodeId);
if (assiduites.length == 0) {
["present", "retard", "absent"].forEach((value) => {
const cbox = document.createElement('input');
cbox.type = "checkbox";
cbox.value = value;
cbox.name = `rbtn_${etudid}_${periodeId}`
cbox.classList.add("rbtn", value);
cbox.addEventListener('click', (event)=>{
const parent = event.target.parentElement;
parent.querySelectorAll(".rbtn").forEach((ele)=>{
if(ele.value != value){
ele.checked = false;
}
})
})
cbox.checked = etatDef.value == value
cell.appendChild(cbox);
});
}else{
setupAssiduiteBubble(cell, assiduites[0])
}
document.getElementById("tableau-periode").appendChild(cell);
});
}).catch((error)=>{
console.error('Error:', error);
});
}
let periodeId = 0;
const moduleimpls = new Map();
const nonWorkDays = [{{ nonworkdays| safe }}];
window.forceModule = "{{ forcer_module }}" == "True"
if (window.forceModule) {
if (moduleimpl_select.value == "") {
document.getElementById('forcemodule').style.display = "block";
add_periode.disabled = true;
}
moduleimpl_select?.addEventListener('change', (e) => {
if (e.target.value != "") {
document.getElementById('forcemodule').style.display = "none";
add_periode.disabled = false;
} else {
document.getElementById('forcemodule').style.display = "block";
add_periode.disabled = true;
}
});
}
async function main(){
afficherPDP(pdp.checked);
$('#date').on('change', async function(d) {
// On vérifie si la date est un jour travaillé
dateCouranteEstTravaillee();
});
}
main();
</script>
{% endblock scripts %}
{% block title %}
{{title}}
{{title}}
{% endblock title %}
{% block app_content %}
{% include "assiduites/widgets/alert.j2" %}
{% include "assiduites/widgets/prompt.j2" %}
{% include "assiduites/widgets/conflict.j2" %}
{% include "assiduites/widgets/toast.j2" %}
<script src="{{scu.STATIC_DIR}}/js/date_utils.js"></script>
<h2>Signalement différé de l'assiduité {{gr |safe}}</h2>
<div class="ue_warning">Attention, cette page utilise des couleurs et conventions différentes
de celles des autres pages ScoDoc: elle sera prochainement modifée, merci de votre patience.
</div>
<h3>{{sem | safe }}</h3>
<div id="fix">
<!-- Nouvelle période
Permet de créer une nouvelle ligne pour une nouvelle période
(
Jour, -> datepicker
Heure de début, -> timepicker
Heure de fin -> timepicker
ModuleImplId -> select (liste des modules tout semestre confondu)
)
--->
{{diff | safe}}
<div id="new_periode" class="box">
<h4>Nouvelle période</h4>
<label for="date">
Date :
<input type="text" name="date" id="date" class="datepicker">
</label>
<label for="debut">
Heure de début :
<input type="text" name="debut" id="debut" class="timepicker">
</label>
<label for="fin">
Heure de fin :
<input type="text" name="fin" id="fin" class="timepicker">
</label>
<div class="help">
<h3>Explication de la saisie différée</h3>
<p>Si la colonne n'est pas valide elle sera affichée en rouge, passez le curseur sur la colonne pour afficher
le message d'erreur</p>
<p>Sélectionner la date de début de la colonne mettra automatiquement la date de fin à la durée d'une séance
(préférence de département)</p>
<p>Modifier le module alors que des informations d'assiduité sont déjà enregistrées pour la période changera leur
module.</p>
<p>Il y a 4 boutons sur la colonne permettant d'enregistrer l'information pour tous les étudiants</p>
<p>Le dernier des boutons retire l'information présente.</p>
<p>Vous pouvez ajouter des colonnes en appuyant sur le bouton + </p>
<p>Vous pouvez supprimer une colonne en appuyant sur la croix qui se situe dans le coin haut droit de la colonne.
</p>
<label for="moduleimpl_select">
<div id="forcemodule" style="display: none; margin:10px 0px;">
Vous devez spécifier le module ! (voir réglage préférence du semestre)
</div>
Module :
{{moduleimpl_select | safe}}
</label>
<button id="add_periode" onclick="nouvellePeriode()">Ajouter une période</button>
</div>
<!-- Boutons d'actions
- Sauvegarder
- Afficher la photo de profil
- Assiduité par défaut (aucune, present, retard, absent)
? - Import Excel (fournie un fichier excel
avec les étudiants et les périodes préremplis)
--->
<div id="actions" class="box">
<h4>Actions</h4>
<label for="pdp">
Photo de profil :
<input type="checkbox" name="pdp" id="pdp" checked onclick="afficherPDP(this.checked)">
</label>
<label for="etatDef">
Assiduité par défaut :
<select name="etatDef" id="etatDef">
<option value="">Aucune</option>
<option value="present">Présence</option>
<option value="retard">Retard</option>
<option value="absent">Absence</option>
</select>
</label>
<label for="excel" class="wip">
Importer Excel :
<input type="file" name="excel" id="excel" accept=".xlsx, .xls, .csv">
</label>
<button class="wip" id="save wip">Sauvegarder l'assiduité</button>
</div>
</div>
<br>
<!-- Tableau à double entrée
Colonne : Etudiants (Header = Nom, Prénom, Photo (si actif))
Ligne : Période (Header = Jour, Heure de début, Heure de fin, ModuleImplId)
Contenu :
- bouton assiduité (présent, retard, absent)
- Bouton conflit si conflit de période
--->
<div id="tableau-periode" class="grid-table">
<!-- Header de la première colonne -->
<div class="header sticky">Période</div>
<!-- Headers des autres colonnes (noms des étudiants) -->
{% for etud in etudiants %}
<div class="header etudinfo" data-etudid="{{etud.etudid}}" id="head-{{etud.etudid}}">
<img src="../../api/etudiant/etudid/{{etud.etudid}}/photo?size=small" alt="{{etud.nomprenom}}" class="pdp">
<span>{{ etud.nomprenom }}</span>
</div>
{% endfor %}
<!-- Sera remplis avec les nouvelles périodes -->
</div>
{% include "assiduites/widgets/alert.j2" %}
{% endblock app_content %}
{% block scripts %}
{{ super() }}
<script src="{{scu.STATIC_DIR}}/js/etud_info.js"></script>
<script src="{{scu.STATIC_DIR}}/js/assiduites.js"></script>
<script>
const etudsDefDem = {{ defdem | safe }}
const timeMorning = "{{ timeMorning | safe}}";
const timeNoon = "{{ timeNoon | safe}}";
const timeEvening = "{{ timeEvening | safe}}";
const defaultDates = {{ defaultDates | safe }}
const nonWorkDays = [{{ nonworkdays| safe }}];
window.addEventListener('load', () => {
[...document.querySelectorAll('.tr[etudid]')].forEach((a) => {
try {
if (a.getAttribute("etudid") in etudsDefDem) {
defdem = etudsDefDem[a.getAttribute("etudid")] == "D" ? "dem" : "def";
a.classList.add(defdem);
}
} catch (_) { }
});
if (defaultDates != null) {
defaultDates.forEach((dateString) => {
d = new Date(dateString);
if (isNonWorkDay(d, nonWorkDays)) return;
matin = `${dateString}T${timeMorning}`;
midi = `${dateString}T${timeNoon}`;
soir = `${dateString}T${timeEvening}`;
console.log(matin, midi, soir)
createColumn(matin, midi);
createColumn(midi, soir);
});
updateAllCol();
} else {
createColumn();
}
})
</script>
{% endblock scripts %}

View File

@ -30,8 +30,8 @@
const nonWorkDays = [{{ nonworkdays| safe }}];
const readOnly = {{ readonly }};
window.forceModule = "{{ forcer_module }}"
window.forceModule = window.forceModule == "True" ? true : false
window.forceModule = "{{ forcer_module }}" == "True"
const etudsDefDem = {{ defdem | safe }}
const select = document.getElementById("moduleimpl_select");

View File

@ -85,66 +85,6 @@
return timeline;
}
/**
* Ajout de la visualisation des assiduités de la mini timeline
* @param {HTMLElement} el l'élément survollé
* @param {Assiduité} assiduite l'assiduité représentée par l'élément
*/
function setupAssiduiteBubble(el, assiduite) {
function formatDateModal(dateStr){
const date = new Date(Date.removeUTC(dateStr));
return date.format("DD/MM/Y HH:mm");
}
if (!assiduite) return;
const bubble = document.createElement('div');
bubble.className = "assiduite-bubble";
bubble.classList.add(assiduite.etat.toLowerCase());
const idDiv = document.createElement("div");
idDiv.className = "assiduite-id";
getModuleImpl(assiduite).then((modImpl) => {
idDiv.textContent = `${modImpl}`;
});
bubble.appendChild(idDiv);
const periodDivDeb = document.createElement("div");
periodDivDeb.className = "assiduite-period";
periodDivDeb.textContent = `${formatDateModal(assiduite.date_debut)}`;
bubble.appendChild(periodDivDeb);
const periodDivFin = document.createElement("div");
periodDivFin.className = "assiduite-period";
periodDivFin.textContent = `${formatDateModal(assiduite.date_fin)}`;
bubble.appendChild(periodDivFin);
const stateDiv = document.createElement("div");
stateDiv.className = "assiduite-state";
stateDiv.textContent = `État: ${assiduite.etat.capitalize()}`;
bubble.appendChild(stateDiv);
const motifDiv = document.createElement("div");
stateDiv.className = "assiduite-why";
const motif = ["", null, undefined].includes(assiduite.desc) ? "Pas de motif" : assiduite.desc.capitalize();
stateDiv.textContent = `Motif: ${motif}`;
bubble.appendChild(motifDiv);
const userIdDiv = document.createElement("div");
userIdDiv.className = "assiduite-user_id";
userIdDiv.textContent = `saisie le ${formatDateModal(
assiduite.entry_date,
" à "
)}`;
if (assiduite.user_id != null) {
userIdDiv.textContent += `\npar ${assiduite.user_nom_complet}`
}
bubble.appendChild(userIdDiv);
el.appendChild(bubble);
}
function setMiniTick(timelineDate, dayStart, dayDuration) {
const endDate = timelineDate.clone().startOf("day");
endDate.setHours(13, 0);

View File

@ -1813,33 +1813,8 @@ def signal_assiduites_diff():
formsemestre_id: int = request.args.get("formsemestre_id", -1)
formsemestre: FormSemestre = FormSemestre.get_formsemestre(formsemestre_id)
date: str = request.args.get("jour", datetime.date.today().isoformat())
date_deb: str = request.args.get("date_deb")
date_fin: str = request.args.get("date_fin")
semaine: str = request.args.get("semaine")
# Dans le cas où on donne une semaine plutot qu'un jour
if semaine is not None:
# On génère la semaine iso à partir de l'anne scolaire.
semaine = (
f"{scu.annee_scolaire()}-W{semaine}" if "W" not in semaine else semaine
)
# On met à jour les dates avec le date de debut et fin de semaine
date_deb: datetime.date = datetime.datetime.strptime(
semaine + "-1", "%Y-W%W-%w"
)
date_fin: datetime.date = date_deb + datetime.timedelta(days=6)
etudiants: list[Identite] = []
# --- Vérification de la date ---
real_date = scu.is_iso_formated(date, True).date()
if real_date < formsemestre.date_debut:
date = formsemestre.date_debut.isoformat()
elif real_date > formsemestre.date_fin:
date = formsemestre.date_fin.isoformat()
# Vérification des groupes
if group_ids is None:
group_ids = []
@ -1875,26 +1850,16 @@ def signal_assiduites_diff():
return render_template(
"assiduites/pages/signal_assiduites_diff.j2",
defaultDates=_get_days_between_dates(date_deb, date_fin),
defdem=_get_etuds_dem_def(formsemestre),
diff=_differee(
etudiants=etudiants,
moduleimpl_select=_module_selector(
formsemestre, request.args.get("moduleimpl_id", None)
),
date=date,
periode={
"deb": formsemestre.date_debut.isoformat(),
"fin": formsemestre.date_fin.isoformat(),
},
),
etudiants=etudiants,
moduleimpl_select=_module_selector(formsemestre=formsemestre),
gr=gr_tit,
nonworkdays=_non_work_days(),
sco=ScoData(formsemestre=formsemestre),
sem=formsemestre.titre_num(),
timeEvening=ScoDocSiteConfig.get("assi_afternoon_time", "18:00:00"),
timeMorning=ScoDocSiteConfig.get("assi_morning_time", "08:00:00"),
timeNoon=ScoDocSiteConfig.get("assi_lunch_time", "13:00:00"),
forcer_module=sco_preferences.get_preference(
"forcer_module",
formsemestre_id=formsemestre_id,
dept_id=g.scodoc_dept_id,
),
)