forked from ScoDoc/ScoDoc
Assiduite : signal_assiduites_diff tableau transposer + modifs mineurs
This commit is contained in:
Iziram
parent
b74d525c28
commit
7af0dd1e1e
@ -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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user