1
0
forked from ScoDoc/ScoDoc
ScoDoc-Front/app/templates/scolar/partition_editor.html
2022-07-24 21:52:26 +02:00

455 lines
15 KiB
HTML

{# -*- mode: jinja-html -*- #}
<h1>{% if not read_only %}Édition des p{% else %}P{%endif%}artitions</h1>
<div>
<label class="edition">
Edition des partitions
<input type="checkbox">
</label>
</div>
<main>
<div class="wait"></div>
<section id="zoneChoix">
<h2>Choix</h2>
<div class="filtres">
<div class="partitions">
<h3>Afficher les partitions</h3>
<div></div>
</div>
<div class="masques">
<h3>
Afficher les étudiants affectés aux groupes<br>
<small>Ne s'actualise pas automatiquement lors d'une modification</small>
</h3>
<div></div>
</div>
</div>
<div class="etudiants"></div>
</section>
<section id="zoneGroupes">
<h2>Groupes</h2>
<div class="groupes"></div>
</section>
</main>
<script>
go();
async function go() {
document.querySelector('.wait').style.display = "";
let params = (new URL(document.location)).searchParams;
let formsemestre_id = params.get('formsemestre_id');
let partitions = await fetchData("/ScoDoc/api/formsemestre/" + formsemestre_id + "/partitions");
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);
processEvents();
document.querySelector('.wait').style.display = "none";
}
function fetchData(request) {
return fetch(request)
.then(r => { return r.json() })
.then(data => {
return data;
}).catch(error => {
document.querySelector("main").innerHTML = "<h2>Une erreur s'est produite lors du transfert des données.</h2>";
throw 'Fin du script - données invalides';
})
}
function processDatas(partitions, etudiants) {
/* Filtres et groupes */
let outputPartitions = "<div>";
let outputMasques = "";
let outputGroupes = "";
Object.entries(partitions).forEach(([idPartition, partition]) => {
// Filtres
outputPartitions += `<div data-idpartition="${idPartition}"><span class="editing move">||</span><span>${partition.partition_name}</span><span class="editing modif">✏️</span><span class="editing suppr">❌</span></div>`;
outputMasques += `<div data-idpartition="${idPartition}"><div data-idpartition="${idPartition}" data-idgroupe=aucun>Non affectés - ${partition.partition_name}</div>`;
// Groupes
outputGroupes += `
<div class=partition data-idpartition="${idPartition}">
<h3>${partition.partition_name}</h3>
<div class=groupe data-idgroupe=aucun>
<div>Non affecté(s)</div>
<div class=etudiants></div>
</div>
${(() => {
let output = "";
Object.entries(partition.groups).forEach(([idGroupe, titreGroupe]) => {
/***************/
outputMasques += `<div data-idgroupe="${idGroupe}"><span class="editing move">||</span><span>${titreGroupe.name}</span><span class="editing modif">✏️</span><span class="editing suppr">❌</span></div>`;
/***************/
output += `
<div class=groupe data-idgroupe="${idGroupe}">
<div>${titreGroupe.name}</div>
<div class=etudiants></div>
</div>`;
})
return output;
})()}
</div>`;
outputMasques += `
<div class="editing ajoutGroupe">+</div>
</div>`;
})
document.querySelector(".filtres>.partitions>div").innerHTML = outputPartitions + `
<div class="editing ajoutPartition">+</div>
</div>`;
document.querySelector(".filtres>.masques>div").innerHTML = outputMasques;
document.querySelector("#zoneGroupes>.groupes").innerHTML = outputGroupes;
/* Etudiants */
output = "";
etudiants.forEach(etudiant => {
output += `
<div>
<div class=nom data-etudid="${etudiant.etudid}" data-nom="${etudiant.nom_disp}" data-prenom="${etudiant.prenom}">${etudiant.nom_disp} ${etudiant.prenom}<br><small>${etudiant.bac}</small></div>
${(() => {
let output = "<div class=grpPartitions>";
Object.entries(partitions).forEach(([idPartition, dataPartition]) => {
output += `
<div class=partition data-idpartition="${idPartition}">
<div>${dataPartition.partition_name}</div>
${(() => {
let output = "";
let affected = false;
Object.entries(dataPartition.groups).forEach(([idGroupe, titreGroupe]) => {
output += `
<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) {
affected = true;
document.querySelector(`#zoneGroupes [data-idgroupe="${idGroupe}"]>.etudiants`).innerHTML += templateEtudiantGroupes(etudiant);
}
})
if (!affected) {
document.querySelector(`#zoneGroupes [data-idpartition="${idPartition}"]>[data-idgroupe="aucun"]>.etudiants`).innerHTML += templateEtudiantGroupes(etudiant);
}
return `<label title="Aucun groupe"><input type=radio name="${idPartition}-${etudiant.etudid}" value="aucun" ${(!affected) ? "checked" : ""}><span class=aucun>❌</span></label>` + output;
})()}
</div>`;
})
return output + "</div>";
})()}
</div>`;
})
document.querySelector("#zoneChoix>.etudiants").innerHTML = output;
}
function templateEtudiantGroupes(etudiant) {
return `<div data-etudid="${etudiant.etudid}" data-nom="${etudiant.nom_disp}" data-prenom="${etudiant.prenom}">${etudiant.nom_disp} ${etudiant.prenom}</div>`
}
/******************************/
/* Gestionnaire d'événements */
/******************************/
function processEvents() {
/*--------------------*/
/* Edition partitions */
/*--------------------*/
document.querySelector(".edition>input").addEventListener("input", () => { document.querySelector("body").classList.toggle("editionActivated") });
document.querySelectorAll(".ajoutPartition, .ajoutGroupe").forEach(btnPlus => { btnPlus.addEventListener("click", addPartition) })
document.querySelectorAll(".modif").forEach(btn => { btn.addEventListener("click", editText) })
document.querySelectorAll(".suppr").forEach(btn => { btn.addEventListener("click", suppr) })
document.querySelectorAll(".move").forEach(btn => { btn.addEventListener("mousedown", moveStart) })
/*---------*/
/* Filtres */
/*---------*/
document.querySelectorAll(".filtres>div>div>div>div:not(.editing)").forEach(btn => { btn.addEventListener("click", filtre) })
/*--------------------*/
/* Changement groupe */
/*--------------------*/
document.querySelectorAll("#zoneChoix label").forEach(btn => { btn.addEventListener("mousedown", (event) => { event.preventDefault() }) });
document.querySelectorAll(".etudiants input").forEach(input => { input.addEventListener("input", assignment) })
}
/**********************/
/* Filtrage */
/**********************/
function filtre() {
if (document.querySelector("body").classList.contains("editionActivated")) {
return;
}
let nbUnselected = this.parentElement.querySelectorAll(".unselect").length;
let nbBtn = this.parentElement.children.length;
if (nbUnselected == 0) {
Array.from(this.parentElement.children).forEach(e => {
e.classList.toggle("unselect");
})
}
this.classList.toggle("unselect");
nbUnselected = this.parentElement.querySelectorAll(".unselect").length;
if (nbUnselected == nbBtn) {
Array.from(this.parentElement.children).forEach(e => {
e.classList.toggle("unselect");
})
}
if (!this.dataset.idgroupe) {
let groupesSelected = [];
this.parentElement.querySelectorAll(":not(.unselect)").forEach(e => {
groupesSelected.push(e.dataset.idpartition);
})
document.querySelectorAll(`
.etudiants .partition[data-idpartition],
#zoneGroupes [data-idpartition]
`).forEach(e => {
if (groupesSelected.includes(e.dataset.idpartition)) {
e.classList.remove("hide")
} else {
e.classList.add("hide")
}
})
} 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 => {
let found = true;
Object.entries(groupesSelected).forEach(([idpartition, tabGroupes]) => {
if (!tabGroupes.includes(
e.querySelector(`[data-idpartition="${idpartition}"] input:checked`).value
)
) {
found = false
}
})
if (found) {
e.classList.remove("hide")
} else {
e.classList.add("hide")
}
})
}
}
/****************************/
/* Affectation à un groupe */
/****************************/
function assignment() {
let groupe = this.parentElement.parentElement.parentElement.parentElement;
let nom = groupe.children[0].dataset.nom;
let prenom = groupe.children[0].dataset.prenom;
let etudid = groupe.children[0].dataset.etudid;
let idPartition = this.parentElement.parentElement.dataset.idpartition;
let idGroupe = this.value;
document.querySelector(`#zoneGroupes [data-idPartition="${idPartition}"] [data-etudid="${etudid}"]`).remove();
let etudiant = {
etudid: etudid,
nom_disp: nom,
prenom: prenom
}
let results = document.querySelector(`#zoneGroupes [data-idPartition="${idPartition}"] [data-idgroupe="${idGroupe}"]>.etudiants`);
results.innerHTML += templateEtudiantGroupes(etudiant);
/* Tri */
let results2 = [...results.children];
results2.sort((a, b) => {
return (a.dataset.nom + a.dataset.prenom).localeCompare(b.dataset.nom + b.dataset.prenom)
})
results.innerHTML = "";
results.append(...results2);
/* Save */
this.classList.add("saving");
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 => {
if (r.etudid == etudid) {
this.classList.remove("saving");
this.classList.add("saved");
setTimeout(() => { this.classList.remove("saved") }, 800);
return;
}
throw 'Les données retournées ne sont pas valides';
})
.catch(error => {
document.querySelector("main").innerHTML = "<h2>Une erreur s'est produite lors de la sauvegarde des données.</h2>";
})
}
/*******************/
/* Ajout partition */
/*******************/
function addPartition() {
let div = document.createElement("div");
div.innerHTML = `
<span class="editing move">||</span>
<span>Nouveau</span>
<span class="editing modif">✏️</span>
<span class="editing suppr">❌</span>`;
div.querySelector(".modif").addEventListener("click", editText);
div.querySelector(".suppr").addEventListener("click", suppr);
div.querySelector(".move").addEventListener("mousedown", moveStart);
this.parentElement.insertBefore(div, this);
// Save
}
/********************/
/* Edition du texte */
/********************/
function editText() {
//this.addEventListener("click", saveEditing, { once: true })
this.previousElementSibling.classList.add("editingText");
this.previousElementSibling.setAttribute("contenteditable", "true");
this.previousElementSibling.focus();
this.previousElementSibling.addEventListener("keydown", writing);
}
function writing(event) {
switch (event.key) {
case 'Enter':
saveEditing(this);
event.preventDefault();
break;
case 'Escape':
saveEditing(this);
event.preventDefault();
break;
}
}
function saveEditing(obj) {
obj.classList.remove("editingText");
obj.setAttribute("contenteditable", "false");
obj.removeEventListener("keydown", writing);
// Save
console.log(
obj.parentElement.dataset.idpartition || obj.parentElement.dataset.idgroupe,
obj.innerText);
}
/*********************************/
/* Suppression parcours / groupe */
/*********************************/
function suppr() {
if (this.parentElement.dataset.idpartition) {
var data = `data-idpartition="${this.parentElement.dataset.idpartition}"`;
} else {
var data = `data-idgroupe="${this.parentElement.dataset.idgroupe}"`;
}
let div = document.createElement("div");
div.className = "confirm";
div.innerHTML = `
<div>
<h1>Vous être sur le point de supprimer <span>${this.previousElementSibling.previousElementSibling.innerText}</span>, cette opération est irréversible</h1>
<div>
<div class="ok" ${data}>Supprimer</div>
<div class="nok">Annuler</div>
</div>
</div>
`;
document.body.append(div);
document.querySelector(".ok").addEventListener("click", supprConfirmed);
document.querySelector(".nok").addEventListener("click", closeConfirm);
}
function supprConfirmed() {
closeConfirm();
/* Suppression des éléments dans la page */
if (this.dataset.idpartition) {
document.querySelectorAll(`[data-idpartition="${this.dataset.idpartition}"]`).forEach(e => { e.remove() })
} else {
document.querySelectorAll(`[value="${this.dataset.idgroupe}"]`).forEach(e => {
if (e.checked == true) {
e.parentElement.parentElement.querySelector("label").click()
}
e.parentElement.remove()
})
document.querySelectorAll(`[data-idgroupe="${this.dataset.idgroupe}"]`).forEach(e => { e.remove() })
}
//Save
console.log(this.dataset.idpartition || this.dataset.idgroupe);
}
function closeConfirm() {
document.querySelector(".confirm").remove();
}
/*************************/
/* Changement de l'ordre */
/*************************/
let moveData = {};
function moveStart(event) {
moveData.x = event.pageX;
moveData.y = event.pageY;
moveData.element = this.parentElement;
moveData.element.classList.add("moving");
moveData.element.parentElement.classList.add('grabbing');
document.body.addEventListener("mousemove", move);
moveData.element.parentElement.querySelectorAll("div:not([data-idgroupe=aucun])").forEach(e => {
e.addEventListener("mouseup", newPosition)
})
document.body.addEventListener("mouseup", moveEnd);
}
function move(event) {
event.preventDefault();
moveData.element.style.transform = `translate(${event.pageX - moveData.x}px, ${event.pageY - moveData.y}px)`
}
function moveEnd() {
document.body.removeEventListener("mousemove", move);
document.body.removeEventListener("mouseup", moveEnd);
moveData.element.parentElement.classList.remove('grabbing');
moveData.element.style.transform = "";
moveData.element.classList.remove("moving");
moveData.element.parentElement.querySelectorAll("div:not([data-idgroupe=aucun])").forEach(e => {
e.removeEventListener("mouseup", newPosition)
})
moveData = {};
}
function newPosition() {
moveData.element.parentElement.insertBefore(moveData.element, this);
let positions = [];
Array.from(moveData.element.parentElement.children).forEach(e => {
if (e.dataset.idpartition || (e.dataset.idgroupe && e.dataset.idgroupe != "aucun")) {
positions.push(e.dataset.idpartition || e.dataset.idgroupe)
}
})
// Save positions
console.log(positions)
}
</script>