ScoDoc/app/templates/scolar/partition_editor.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>