lehmann/ScoDoc-Front
1
0
Fork 0
forked from ScoDoc/ScoDoc
Code Pull Requests Activity

Améliorations partition éditor

Browse Source
This commit is contained in:
Sébastien Lehmann 2022-07-24 00:18:32 +02:00
parent 1aaee35d64
commit a3fc5b0def
2 changed files with 54 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/static/css/partition_editor.css
View File

@ -41,7 +41,7 @@ main h3 {
margin-bottom: 8px; margin-bottom: 8px;
} }
.filtres>div>div { .filtres>div>div>div {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 4px; gap: 4px;
@ -49,7 +49,7 @@ main h3 {
margin: 4px 0; margin: 4px 0;
} }
.filtres>div>div>div { .filtres>div>div>div>div {
background: #09c; background: #09c;
color: #FFF; color: #FFF;
border-radius: 4px; border-radius: 4px;
@ -58,16 +58,16 @@ main h3 {
cursor: pointer; cursor: pointer;
} }
.filtres>div>div>div:hover { .filtres>div>div>div>div:hover {
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
} }
.filtres>div>div>div:active { .filtres>div>div>div>div:active {
box-shadow: 0 0 0 #000; box-shadow: 0 0 0 #000;
transform: translateY(2px); transform: translateY(2px);
} }
.filtres>div>div>.unselect { .filtres .unselect {
background: rgba(0, 153, 204, 0.5); background: rgba(0, 153, 204, 0.5);
} }
@ -101,6 +101,13 @@ main h3 {
#zoneChoix label { #zoneChoix label {
cursor: pointer; cursor: pointer;
display: flex;
align-items: center;
}
#zoneChoix span.aucun {
font-size: 10px;
background: #ddd;
} }
#zoneChoix .etudiants .partition>div, #zoneChoix .etudiants .partition>div,

74
app/templates/scolar/partition_editor.html
View File

@ -36,6 +36,10 @@
let partitions = await fetchData("/ScoDoc/api/formsemestre/" + formsemestre_id + "/partitions"); let partitions = await fetchData("/ScoDoc/api/formsemestre/" + formsemestre_id + "/partitions");
let etudiants = await fetchData("/ScoDoc/api/formsemestre/" + formsemestre_id + "/resultats"); let etudiants = await fetchData("/ScoDoc/api/formsemestre/" + formsemestre_id + "/resultats");
etudiants.sort((a, b) => {
return a.nom_short.localeCompare(b.nom_short)
})
processDatas(partitions, etudiants); processDatas(partitions, etudiants);
processEvents(); processEvents();
@ -56,13 +60,13 @@
function processDatas(partitions, etudiants) { function processDatas(partitions, etudiants) {
/* Filtres et groupes */ /* Filtres et groupes */
let outputPartitions = ""; let outputPartitions = "<div>";
let outputMasques = ""; let outputMasques = "";
let outputGroupes = ""; let outputGroupes = "";
Object.entries(partitions).forEach(([idPartition, partition]) => { Object.entries(partitions).forEach(([idPartition, partition]) => {
// Filtres // Filtres
outputPartitions += `<div data-idpartition="${idPartition}">${partition.partition_name}</div>`; outputPartitions += `<div data-idpartition="${idPartition}">${partition.partition_name}</div>`;
outputMasques += `<span style="flex-basis: 100%"></span><div data-idpartition="${idPartition}" data-idgroupe=aucun>${partition.partition_name} N/A</div>`; outputMasques += `<div data-idpartition="${idPartition}"><div data-idpartition="${idPartition}" data-idgroupe=aucun>Non affectés - ${partition.partition_name}</div>`;
// Groupes // Groupes
outputGroupes += ` outputGroupes += `
@ -87,8 +91,9 @@
return output; return output;
})()} })()}
</div>`; </div>`;
outputMasques += "</div>"
}) })
document.querySelector(".filtres>.partitions>div").innerHTML = outputPartitions; document.querySelector(".filtres>.partitions>div").innerHTML = outputPartitions + "</div>";
document.querySelector(".filtres>.masques>div").innerHTML = outputMasques; document.querySelector(".filtres>.masques>div").innerHTML = outputMasques;
document.querySelector("#zoneGroupes>.groupes").innerHTML = outputGroupes; document.querySelector("#zoneGroupes>.groupes").innerHTML = outputGroupes;
@ -110,7 +115,7 @@
let affected = false; let affected = false;
Object.entries(dataPartition.groups).forEach(([idGroupe, titreGroupe]) => { Object.entries(dataPartition.groups).forEach(([idGroupe, titreGroupe]) => {
output += ` output += `
<label><input type=radio name="${etudiant.etudid}-${idPartition}" value="${idGroupe}" ${(etudiant.partitions[idPartition] == idGroupe) ? "checked" : ""}><span>${titreGroupe.name}</span></label>`; <label><input type=radio name="${idPartition}-${etudiant.etudid}" value="${idGroupe}" ${(etudiant.partitions[idPartition] == idGroupe) ? "checked" : ""}><span>${titreGroupe.name}</span></label>`;
if (etudiant.partitions[idPartition] == idGroupe) { if (etudiant.partitions[idPartition] == idGroupe) {
affected = true; affected = true;
@ -120,7 +125,7 @@
if (!affected) { if (!affected) {
document.querySelector(`#zoneGroupes [data-idpartition="${idPartition}"]>[data-idgroupe="aucun"]>.etudiants`).innerHTML += templateEtudiantGroupes(etudiant); document.querySelector(`#zoneGroupes [data-idpartition="${idPartition}"]>[data-idgroupe="aucun"]>.etudiants`).innerHTML += templateEtudiantGroupes(etudiant);
} }
return `<label><input type=radio name="${etudiant.etudid}-${idPartition}" value="aucun" ${(!affected) ? "checked" : ""}><span>N/A</span></label>` + output; return `<label title="Aucun groupe"><input type=radio name="${idPartition}-${etudiant.etudid}" value="aucun" ${(!affected) ? "checked" : ""}><span class=aucun>❌</span></label>` + output;
})()} })()}
</div>`; </div>`;
}) })
@ -137,7 +142,7 @@
} }
function processEvents() { function processEvents() {
document.querySelectorAll(".filtres>div>div>div").forEach(btn => { document.querySelectorAll(".filtres>div>div>div>div").forEach(btn => {
btn.addEventListener("click", filtre); btn.addEventListener("click", filtre);
btn.addEventListener("mousedown", (event) => { event.preventDefault() }) // Eviter de sélectionner le texte si on clique plusieurs fois frénétiquement btn.addEventListener("mousedown", (event) => { event.preventDefault() }) // Eviter de sélectionner le texte si on clique plusieurs fois frénétiquement
}); });
@ -167,48 +172,42 @@
}) })
} }
if (!this.dataset.idgroupe) {
let groupesSelected = []; let groupesSelected = [];
this.parentElement.querySelectorAll(":not(.unselect)").forEach(e => { this.parentElement.querySelectorAll(":not(.unselect)").forEach(e => {
groupesSelected.push( groupesSelected.push(e.dataset.idpartition);
{
idpartition: e.dataset.idpartition,
idgroupe: e.dataset.idgroupe
}
);
}) })
if (!this.dataset.idgroupe) {
document.querySelectorAll(` document.querySelectorAll(`
.etudiants .partition[data-idpartition], .etudiants .partition[data-idpartition],
#zoneGroupes [data-idpartition] #zoneGroupes [data-idpartition]
`).forEach(e => { `).forEach(e => {
let found = false; if (groupesSelected.includes(e.dataset.idpartition)) {
for (let i = 0; i < groupesSelected.length; i++) {
if (groupesSelected[i].idpartition == e.dataset.idpartition) {
found = true;
break;
}
}
if (found) {
e.classList.remove("hide") e.classList.remove("hide")
} else { } else {
e.classList.add("hide") e.classList.add("hide")
} }
}) })
} else { } else {
let groupesSelected = {};
this.parentElement.parentElement.querySelectorAll("[data-idgroupe]:not(.unselect)").forEach(e => {
let idpartition = e.parentElement.dataset.idpartition;
if(!groupesSelected[idpartition]){
groupesSelected[idpartition] = [];
}
groupesSelected[idpartition].push(e.dataset.idgroupe)
})
document.querySelectorAll("#zoneChoix .etudiants>div").forEach(e => { document.querySelectorAll("#zoneChoix .etudiants>div").forEach(e => {
let found = false; let found = true;
for (let i = 0; i < groupesSelected.length; i++) { Object.entries(groupesSelected).forEach(([idpartition, tabGroupes])=>{
let partition = ""; if( !tabGroupes.includes(
if (groupesSelected[i].idpartition) { e.querySelector(`[data-idpartition="${idpartition}"] input:checked`).value
partition = `[data-idpartition="${groupesSelected[i].idpartition}"] `; )
} ){
if (e.querySelector(`${partition}input[value="${groupesSelected[i].idgroupe}"]:checked`)) { found = false
found = true;
break;
}
} }
})
if (found) { if (found) {
e.classList.remove("hide") e.classList.remove("hide")
} else { } else {
@ -247,10 +246,15 @@
/* Save */ /* Save */
this.classList.add("saving"); this.classList.add("saving");
fetch(`/ScoDoc/api/group/${idGroupe}/set_etudiant/${etudid}`, { method: "POST" }) if (idGroupe == "aucun") {
var url = `/ScoDoc/api/partition/${idPartition}/remove_etudiant/${etudid}`;
} else {
var url = `/ScoDoc/api/group/${idGroupe}/set_etudiant/${etudid}`
}
fetch(url, { method: "POST" })
.then(r => { return r.json() }) .then(r => { return r.json() })
.then(r => { .then(r => {
if (r.group_id == idGroupe && r.etudid == etudid) { if (r.etudid == etudid) {
this.classList.remove("saving"); this.classList.remove("saving");
this.classList.add("saved"); this.classList.add("saved");
setTimeout(() => { this.classList.remove("saved") }, 800); setTimeout(() => { this.classList.remove("saved") }, 800);