From e1d3144af92f2f98713e165ee7aa0eab23b5d65d Mon Sep 17 00:00:00 2001
From: lehmann <sebastien.lehmann@uha.fr>
Date: Sat, 23 Jul 2022 11:17:29 +0200
Subject: [PATCH] Partition editor V1 beta

---
 app/static/css/partition_editor.css        | 209 +++++++++++++++-
 app/templates/scolar/partition_editor.html | 264 ++++++++++++++++++++-
 2 files changed, 470 insertions(+), 3 deletions(-)

diff --git a/app/static/css/partition_editor.css b/app/static/css/partition_editor.css
index 63071608a..e6b8762fc 100644
--- a/app/static/css/partition_editor.css
+++ b/app/static/css/partition_editor.css
@@ -1 +1,208 @@
-// Editeur de partitions
\ No newline at end of file
+.wait {
+	position: fixed;
+	width: 50px;
+	height: 10px;
+	background: #424242;
+	top: calc(50% - 50px);
+	left: 50%;
+	margin-left: -25px;
+	animation: wait 0.6s ease-out alternate infinite;
+}
+
+@keyframes wait {
+	100% {
+		transform: translateY(-30px) rotate(360deg)
+	}
+}
+
+main {
+	font-family: Verdana, Geneva, Tahoma, sans-serif;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 32px;
+}
+
+main h2 {
+	border-bottom: 4px solid #09c;
+}
+
+main h2,
+main h3 {
+	font-weight: 400;
+}
+
+/*****************************/
+/* Zone Choix                */
+/*****************************/
+.filtres>div {
+	background: #ddd;
+	padding: 8px;
+	border-radius: 8px;
+	margin-bottom: 8px;
+}
+
+.filtres>div>div {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 4px;
+	row-gap: 2px;
+	margin: 4px 0;
+}
+
+.filtres>div>div>div {
+	background: #09c;
+	color: #FFF;
+	border-radius: 4px;
+	padding: 8px 32px;
+	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
+	cursor: pointer;
+}
+
+.filtres>div>div>div:hover {
+	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
+}
+
+.filtres>div>div>div:active {
+	box-shadow: 0 0 0 #000;
+	transform: translateY(2px);
+}
+
+.filtres>div>div>.unselect {
+	background: rgba(0, 153, 204, 0.5);
+}
+
+#zoneChoix .etudiants>div {
+	background: #FFF;
+	border: 1px solid #aaa;
+	border-radius: 4px;
+	padding: 4px 8px;
+	margin: 4px 0;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	gap: 8px;
+}
+
+#zoneChoix .etudiants .nom {
+	flex: 1;
+}
+
+#zoneChoix small {
+	color: #444;
+	font-style: italic;
+}
+
+#zoneChoix .etudiants .partition {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 4px;
+	margin-bottom: 4px;
+}
+
+#zoneChoix label {
+	cursor: pointer;
+}
+
+#zoneChoix .etudiants .partition>div,
+#zoneChoix .etudiants .partition span {
+	display: block;
+	padding: 4px 8px;
+	border: 1px solid #aaa;
+	border-radius: 4px;
+}
+
+#zoneChoix .etudiants .partition input {
+	display: none;
+}
+
+#zoneChoix .etudiants .partition input:checked:not([value=aucun])+span {
+	background: #c09;
+	border-color: #c09;
+	color: #fff;
+}
+
+#zoneChoix .etudiants .partition>:nth-child(1) {
+	background: #09c;
+	border-color: #09c;
+	color: #fff;
+}
+
+.hide {
+	display: none !important;
+}
+
+.saved+span {
+	position: relative;
+}
+
+.saving+span {
+	outline: 2px solid orange;
+}
+
+.saved+span::before {
+	content: '✔️';
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: rgba(0, 0, 0, 0.5);
+	border-radius: 4px;
+}
+
+/*****************************/
+/* Zone Groupes              */
+/*****************************/
+#zoneGroupes {
+	flex: 1;
+}
+
+#zoneGroupes .groupes {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-start;
+	gap: 16px;
+}
+
+#zoneGroupes .partition {
+	background: #ddd;
+	padding: 8px;
+	border-radius: 8px;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+h3 {
+	margin: 0;
+}
+
+#zoneGroupes .groupe {
+	background: #FFF;
+	border-radius: 8px;
+}
+
+#zoneGroupes .groupe>div {
+	padding: 8px 16px;
+}
+
+#zoneGroupes .groupe>div:nth-child(1) {
+	color: #09c;
+	border-bottom: 1px solid #aaa;
+}
+
+#zoneGroupes .etudiants {
+	counter-reset: cpt;
+}
+
+#zoneGroupes .etudiants>*::before {
+	counter-increment: cpt;
+	content: counter(cpt) " - ";
+}
+
+#zoneGroupes [data-idgroupe=aucun] {
+	background: #b5c2c3 !important;
+}
\ No newline at end of file
diff --git a/app/templates/scolar/partition_editor.html b/app/templates/scolar/partition_editor.html
index a5800ca42..475c62048 100644
--- a/app/templates/scolar/partition_editor.html
+++ b/app/templates/scolar/partition_editor.html
@@ -1,6 +1,266 @@
 {# -*- mode: jinja-html -*- #}
-<h2>{% if not read_only %}Édition des p{% else %}P{%endif%}artitions</h2>
+<h1>{% if not read_only %}Édition des p{% else %}P{%endif%}artitions</h1>
 
-<div>Une spécialité Mulhousaine vous sera prochainement servie ici</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() {
+		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");
+
+		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 = "";
+		let outputMasques = "";
+		let outputGroupes = "";
+		Object.entries(partitions).forEach(([idPartition, partition]) => {
+			// Filtres
+			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>`;
+
+			// 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}">${titreGroupe.name}</div>`;
+						/***************/
+						output += `
+								<div class=groupe data-idgroupe="${idGroupe}">
+									<div>${titreGroupe.name}</div>
+									<div class=etudiants></div>
+								</div>`;
+					})
+					return output;
+				})()}
+				</div>`;
+		})
+		document.querySelector(".filtres>.partitions>div").innerHTML = outputPartitions;
+		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="${etudiant.etudid}-${idPartition}" 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><input type=radio name="${etudiant.etudid}-${idPartition}" value="aucun" ${(!affected) ? "checked" : ""}><span>N/A</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>`
+	}
+
+	function processEvents() {
+		document.querySelectorAll(".filtres>div>div>div").forEach(btn => {
+			btn.addEventListener("click", filtre);
+			btn.addEventListener("mousedown", (event) => { event.preventDefault() }) // Eviter de sélectionner le texte si on clique plusieurs fois frénétiquement
+		});
+		document.querySelectorAll("#zoneChoix label").forEach(btn => { btn.addEventListener("mousedown", (event) => { event.preventDefault() }) });
+
+		document.querySelectorAll(".etudiants input").forEach(input => {
+			input.addEventListener("input", assignment);
+		})
+	}
+
+	function filtre() {
+
+		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");
+			})
+		}
+
+		let groupesSelected = [];
+		this.parentElement.querySelectorAll(":not(.unselect)").forEach(e => {
+			groupesSelected.push(
+				{
+					idpartition: e.dataset.idpartition,
+					idgroupe: e.dataset.idgroupe
+				}
+			);
+		})
+
+		if (!this.dataset.idgroupe) {
+			document.querySelectorAll(`
+				.etudiants .partition[data-idpartition],
+				#zoneGroupes [data-idpartition]
+			`).forEach(e => {
+				let found = false;
+				for (let i = 0; i < groupesSelected.length; i++) {
+					if (groupesSelected[i].idpartition == e.dataset.idpartition) {
+						found = true;
+						break;
+					}
+				}
+
+				if (found) {
+					e.classList.remove("hide")
+				} else {
+					e.classList.add("hide")
+				}
+			})
+		} else {
+			document.querySelectorAll("#zoneChoix .etudiants>div").forEach(e => {
+				let found = false;
+				for (let i = 0; i < groupesSelected.length; i++) {
+					let partition = "";
+					if (groupesSelected[i].idpartition) {
+						partition = `[data-idpartition="${groupesSelected[i].idpartition}"] `;
+					}
+					if (e.querySelector(`${partition}input[value="${groupesSelected[i].idgroupe}"]:checked`)) {
+						found = true;
+						break;
+					}
+				}
+				if (found) {
+					e.classList.remove("hide")
+				} else {
+					e.classList.add("hide")
+				}
+			})
+		}
+	}
+
+	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");
+		fetch(`/ScoDoc/api/group/${idGroupe}/set_etudiant/${etudid}`, { method: "POST" })
+			.then(r => { return r.json() })
+			.then(r => {
+				if (r.group_id == idGroupe && 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>";
+			})
+	}
+
+</script>
\ No newline at end of file