Assiduite : signal_assiduites_diff tableau transposer + modifs mineurs

This commit is contained in:
Iziram 2024-03-18 17:37:23 +01:00
parent b74d525c28
commit 7af0dd1e1e

View File

@ -17,6 +17,15 @@
gap: 0.5em;
}
#actions {
flex-direction: row;
align-items: center;
margin-bottom: 5px;
}
#actions label{
margin: 0;
}
#fix {
display: flex;
flex-direction: row;
@ -49,21 +58,24 @@
}
#tableau-periode {
display: flex;
flex-direction: column;
overflow-x: scroll;
max-width: var(--sco-content-max-width);
}
#tableau-periode .pdp {
width: 2em;
height: 2em;
border-radius: 50%;
width: 5em;
border-radius: 8px;
}
.grid-table {
display: grid;
grid-template-columns: 200px repeat({{ etudiants|length }}, 1fr);
width: var(--sco-content-max-width);
.header {
background-color: #f9f9f9;
padding: 10px;
text-align: center;
border: 1px solid #ddd;
}
.cell, .header {
border: 1px solid #ddd;
padding: 10px;
@ -74,19 +86,23 @@
}
.header{
justify-content: space-between;
}
.cell{
.cell {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ddd;
padding: 10px;
text-align: center;
width: 256px;
}
.cell p{
text-align: center;
}
.sticky {
position: sticky;
left: 0;
top: 0;
background-color: #f9f9f9;
z-index: 2;
}
@ -95,12 +111,24 @@
display: block;
top: 0;
z-index: 0;
width: 100% !important;
min-width: inherit !important;
}
.assi-btns {
display: flex;
gap: 4px;
}
.pointer{
cursor: pointer;
}
.ligne{
display: flex;
gap: 1px;
}
</style>
{% endblock styles %}
@ -124,6 +152,10 @@ function afficherPDP(checked) {
} else {
gtrcontent.removeAttribute("data-pdp");
}
// On sauvegarde le choix dans le localStorage
localStorage.setItem("scodoc-signal_assiduites_diff-pdp", `${checked}`);
pdp.checked = checked;
}
/**
@ -156,7 +188,7 @@ async function nouvellePeriode(period = null) {
moduleimpl_id = period.moduleimpl_id;
}else{
//Sinon on vérifie qu'on a bien des valeurs
const text = document.createTextNode("Veuillez remplir tous les champs pour ajouter une période.")
const text = document.createTextNode("Veuillez remplir tous les champs pour ajouter une plage.")
if (date == "" || debut == "" || fin == "" || moduleimpl_id == "") {
openAlertModal(
"Erreur",
@ -168,10 +200,11 @@ async function nouvellePeriode(period = null) {
// On ajoute la nouvelle période au tableau
let periodeDiv = document.createElement("div");
periodeDiv.classList.add("cell", "sticky");
periodeDiv.classList.add("cell", "header");
periodeDiv.id = `periode-${periodId}`;
const periodP = document.createElement("p");
periodP.textContent = `Période du ${date} de ${debut} à ${fin}`;
periodP.textContent = `Plage du ${date} de ${debut} à ${fin}`;
// On ajoute le moduleimpl
const modP = document.createElement("p");
@ -184,7 +217,7 @@ async function nouvellePeriode(period = null) {
// On supprime toutes les cases du tableau correspondant à cette période
document
.querySelectorAll(
`.cell[data-periodeid="${periodeDiv.getAttribute("data-periodeid")}"]`
`[data-periodeid="${periodeDiv.getAttribute("data-periodeid")}"]`
)
.forEach((e) => e.remove());
// On supprime la période de la Map periodes
@ -195,11 +228,11 @@ async function nouvellePeriode(period = null) {
periodeDiv.appendChild(modP);
periodeDiv.appendChild(close);
periodeDiv.setAttribute("data-periodeid", periodId);
document.getElementById("tableau-periode").appendChild(periodeDiv);
document.getElementById("tete-table").appendChild(periodeDiv);
// On récupère les étudiants (etudids)
let etudids = [
...document.querySelectorAll("#tableau-periode .header[data-etudid]"),
...document.querySelectorAll(".ligne[data-etudid]"),
].map((e) => e.getAttribute("data-etudid"));
// On génère une date de début et de fin de la période
@ -249,7 +282,7 @@ async function nouvellePeriode(period = null) {
cell.setAttribute("data-etudid", etudid);
cell.setAttribute("data-periodeid", periodId);
cell.id = `cell-${etudid}-${periodId}`;
document.getElementById("tableau-periode").appendChild(cell);
document.querySelector(`.ligne[data-etudid="${etudid}"]`).appendChild(cell);
//Vérification inscription au module
// Si l'étudiant n'est pas inscrit, on le notifie et on passe à l'étudiant suivant
@ -265,6 +298,10 @@ async function nouvellePeriode(period = null) {
const assiduites = data[etudid];
// Si l'étudiant n'a pas d'assiduité, on crée les boutons assiduité
if (assiduites.length == 0) {
const assi_btns = document.createElement('div');
assi_btns.classList.add('assi-btns');
["present", "retard", "absent"].forEach((value) => {
const cbox = document.createElement("input");
cbox.type = "checkbox";
@ -284,8 +321,9 @@ async function nouvellePeriode(period = null) {
// Si une valeur par défaut est donnée alors on l'applique
cbox.checked = etatDef.value == value;
cell.appendChild(cbox);
assi_btns.appendChild(cbox);
});
cell.appendChild(assi_btns);
} else {
// Si une (ou plus) assiduité sont trouvée pour la période
// alors on affiche les informations de la première assiduité
@ -297,6 +335,8 @@ async function nouvellePeriode(period = null) {
.catch((error) => {
console.error("Error:", error);
});
document.getElementById("tableau-periode").classList.remove("hidden");
}
/**
* Permet de récupérer la saisie puis créer les assiduités grâce à l'api
@ -337,6 +377,7 @@ function sauvegarderAssiduites() {
}
});
}
// Une fois les assiduités générées, on les envoie à l'api
async_post(
"../../api/assiduites/create",
@ -344,7 +385,7 @@ function sauvegarderAssiduites() {
// Si la requête passe
async (data) => {
// On supprime toutes les cases du tableau pour le mettre à jour
document.querySelectorAll(".cell").forEach((e) => e.remove());
document.querySelectorAll("[data-periodeid]").forEach((e)=>e.remove())
// On recrée les périodes
// (cela permet de redemander les assiduités, donc mettre à jour les cases)
@ -402,7 +443,7 @@ function sauvegarderAssiduites() {
const period = periodes.get(periodeId);
const li = document.createElement("li");
// On affiche la période
li.textContent = `Période du ${period.date_debut.format(
li.textContent = `Plage du ${period.date_debut.format(
"DD/MM/YYYY HH:mm"
)} à ${period.date_fin.format("HH:mm")}`;
@ -474,7 +515,8 @@ if (window.forceModule) {
* - On vérifie si la date est un jour travaillé
*/
async function main() {
afficherPDP(pdp.checked);
const checked = localStorage.getItem("scodoc-signal_assiduites_diff-pdp") == "true";
afficherPDP(checked);
$("#date").on("change", async function (d) {
// On vérifie si la date est un jour travaillé
dateCouranteEstTravaillee();
@ -497,8 +539,8 @@ main();
<div id="fix">
<!-- Nouvelle période
Permet de créer une nouvelle ligne pour une nouvelle période
<!-- Nouvelle Plage
Permet de créer une nouvelle ligne pour une nouvelle Plage
(
Jour, -> datepicker
Heure de début, -> timepicker
@ -529,38 +571,34 @@ main();
{{moduleimpl_select | safe}}
</label>
<button id="add_periode" onclick="nouvellePeriode()">Ajouter une période</button>
<button id="add_periode" onclick="nouvellePeriode()">Ajouter une plage</button>
</div>
<!-- Boutons d'actions
</div>
<!-- Boutons d'actions
- Sauvegarder
- Afficher la photo de profil
- Assiduité par défaut (aucune, present, retard, absent)
--->
<div id="actions" class="box">
<br>
<div id="actions" class="flex">
<button id="save" onclick="sauvegarderAssiduites()">ENREGISTRER</button>
<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 :
Intialiser les étudiants comme :
<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>
<option value="">-</option>
<option value="present">présents</option>
<option value="retard">en retard</option>
<option value="absent">absents</option>
</select>
</label>
<button id="save" onclick="sauvegarderAssiduites()">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)
@ -570,17 +608,27 @@ main();
--->
<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) -->
<!-- Première ligne : Plages -->
<div class="ligne" id="tete-table">
<div class="cell header sticky">Étudiants</div>
{# <div class="cell header" periode-id="X">Plage X</div> #}
</div>
{# ... #}
<hr class="hidden" id="separator">
{% for etud in etudiants %}
<div class="header etudinfo" data-etudid="{{etud.etudid}}" id="head-{{etud.etudid}}">
<div class="ligne" data-etudid="{{etud.etudid}}">
<div class="cell etudinfo sticky" id="head-{{etud.etudid}}">
<img src="../../api/etudiant/etudid/{{etud.etudid}}/photo?size=small" alt="{{etud.nomprenom}}" class="pdp">
<span>{{ etud.nomprenom }}</span>
</div>
{# <div class="cell" periode-id="X">Assiduité Plage 1</div> #}
</div>
{% endfor %}
<!-- Sera remplis avec les nouvelles périodes -->
</div>