Partition editor : live update

app/static/css/partition_editor.css

@@ -15,6 +15,36 @@
 	}
 }
 
+.message_curtom {
+	position: fixed;
+	bottom: 100%;
+	left: 50%;
+	z-index: 10;
+	padding: 20px;
+	border-radius: 0 0 10px 10px;
+	background: #90c;
+	color: #FFF;
+	font-size: 24px;
+	animation: message 3s;
+	transform: translate(-50%, 0);
+}
+
+@keyframes message {
+
+	20%,
+	80% {
+		transform: translate(-50%, 100%)
+	}
+}
+
+.edition{
+	background: #ddd;
+	border-radius: 8px;
+	padding: 8px 32px 8px 8px;
+	margin-bottom: 16px;
+	display: inline-block;
+}
+
 main {
 	font-family: Verdana, Geneva, Tahoma, sans-serif;
 	display: flex;
@@ -58,6 +88,8 @@ body:not(.editionActivated) .editing {
 
 .move {
 	cursor: grab;
+	letter-spacing: -2px;
+	margin-right: 4px;
 }
 
 .move:active {

app/templates/scolar/partition_editor.html

@@ -3,8 +3,8 @@
 
 <div>
 	<label class="edition">
-		Edition des partitions
 		<input type="checkbox">
+		Edition des partitions - tout s'enregistre automatiquement dès qu'il y a modification
 	</label>
 </div>
 
@@ -157,11 +157,17 @@
 	/******************************/
 	/* Gestionnaire d'événements  */
 	/******************************/
+	function input() {
+		document.querySelector("body").classList.toggle("editionActivated");
+		/*if (event.currentTarget.checked == false) {
+			go();
+		}*/
+	}
 	function processEvents() {
 		/*--------------------*/
 		/* Edition partitions */
 		/*--------------------*/
-		document.querySelector(".edition>input").addEventListener("input", () => { document.querySelector("body").classList.toggle("editionActivated") });
+		document.querySelector(".edition>input").addEventListener("input", input);
 		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) })
@@ -306,10 +312,22 @@
 	/* Ajout partition */
 	/*******************/
 	function addPartition() {
+		let date = new Date;
+		if (this.classList.contains("ajoutPartition")) {
+			var name = "Nouvelle " + date.getSeconds();
+			let params = (new URL(document.location)).searchParams;
+			let formsemestre_id = params.get('formsemestre_id');
+			var url = "/ScoDoc/api/formsemestre/" + formsemestre_id + "/partition/create";
+			var payload = { partition_name: name };
+		} else {
+			var name = "Nouveau " + date.getSeconds();
+			var url = `/ScoDoc/api/partition/${this.parentElement.dataset.idpartition}/group/create`;
+			var payload = { group_name: name };
+		}
 		let div = document.createElement("div");
 		div.innerHTML = `
 			<span class="editing move">||</span>
-			<span>Nouveau</span>
+			<span>${name}</span>
 			<span class="editing modif">✏️</span>
 			<span class="editing suppr">❌</span>`;
 
@@ -319,17 +337,41 @@
 		this.parentElement.insertBefore(div, this);
 
 		// Save
+		fetch(url,
+			{
+				method: "POST",
+				headers: {
+					'Accept': 'application/json',
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify(payload)
+			})
+			.then(r => { return r.json() })
+			.then(r => {
+				if (r.message == "invalid partition_name" || r.message == "invalid group_name") {
+					message("Le nom " + name + " existe déjà");
+					div.remove();
+					return;
+				}
+				if (this.classList.contains("ajoutPartition")) {
+					div.dataset.idpartition = r.id;
+				} else {
+					div.dataset.idgroupe = r.id;
+				}
+
+			})
+			.catch(error => {
+				document.querySelector("main").innerHTML = "<h2>Une erreur s'est produite lors de la sauvegarde des données.</h2>";
+			})
 	}
 
 	/********************/
 	/* 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);
 	}
 
@@ -350,10 +392,41 @@
 		obj.classList.remove("editingText");
 		obj.setAttribute("contenteditable", "false");
 		obj.removeEventListener("keydown", writing);
+
 		// Save
-		console.log(
+		if (obj.parentElement.dataset.idpartition) {
-			obj.parentElement.dataset.idpartition || obj.parentElement.dataset.idgroupe,
+			var url = `/ScoDoc/api/partition/${obj.parentElement.dataset.idpartition}/edit`;
-			obj.innerText);
+			var payload = { partition_name: obj.innerText }
+
+			document.querySelector(`.masques [data-idpartition="${obj.parentElement.dataset.idpartition}"][data-idgroupe="aucun"]`).innerText = "Non affectés - " + obj.innerText;
+			document.querySelectorAll(`#zoneChoix .etudiants [data-idpartition="${obj.parentElement.dataset.idpartition}"]>div`).forEach(e => { e.innerText = obj.innerText });
+			document.querySelector(`#zoneGroupes [data-idpartition="${obj.parentElement.dataset.idpartition}"]>h3`).innerText = obj.innerText;
+		} else {
+			var url = `/ScoDoc/api/group/${obj.parentElement.dataset.idgroupe}/edit`;
+			var payload = { group_name: obj.innerText }
+
+			document.querySelectorAll(`#zoneChoix .etudiants [value="${obj.parentElement.dataset.idgroupe}"]+span`).forEach(e => { e.innerText = obj.innerText });
+			document.querySelector(`#zoneGroupes [value="${obj.parentElement.dataset.idgroupe}"]>div`).innerText = obj.innerText;
+		}
+
+		fetch(url,
+			{
+				method: "POST",
+				headers: {
+					'Accept': 'application/json',
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify(payload)
+			})
+			.then(r => { return r.json() })
+			.then(r => {
+				if (!r) {
+					document.querySelector("main").innerHTML = "<h2>Une erreur s'est produite lors de la sauvegarde des données.</h2>";
+				}
+			})
+			.catch(error => {
+				document.querySelector("main").innerHTML = "<h2>Une erreur s'est produite lors de la sauvegarde des données.</h2>";
+			})
 	}
 
 	/*********************************/
@@ -369,7 +442,7 @@
 		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>
+				<h1>Vous être sur le point de supprimer <span>${this.previousElementSibling.previousElementSibling.innerText}</span>,<br>cette opération est irréversible</h1>
 				<div>
 					<div class="ok" ${data}>Supprimer</div>
 					<div class="nok">Annuler</div>
@@ -386,6 +459,7 @@
 		/* Suppression des éléments dans la page */
 		if (this.dataset.idpartition) {
 			document.querySelectorAll(`[data-idpartition="${this.dataset.idpartition}"]`).forEach(e => { e.remove() })
+			var url = "/ScoDoc/api/partition/" + this.dataset.idpartition + "/delete";
 		} else {
 			document.querySelectorAll(`[value="${this.dataset.idgroupe}"]`).forEach(e => {
 				if (e.checked == true) {
@@ -394,10 +468,17 @@
 				e.parentElement.remove()
 			})
 			document.querySelectorAll(`[data-idgroupe="${this.dataset.idgroupe}"]`).forEach(e => { e.remove() })
+			var url = "/ScoDoc/api/group/" + this.dataset.idgroupe + "/delete";
 		}
-		//Save
-		console.log(this.dataset.idpartition || this.dataset.idgroupe);
 
+		//Save
+		fetch(url, { method: "POST" })
+			.then(r => { return r.json() })
+			.then(r => {
+				if (r.OK != true) {
+					document.querySelector("main").innerHTML = "<h2>Une erreur s'est produite lors de la sauvegarde des données.</h2>";
+				}
+			})
 	}
 
 	function closeConfirm() {
@@ -443,13 +524,80 @@
 
 		let positions = [];
 		Array.from(moveData.element.parentElement.children).forEach(e => {
-			if (e.dataset.idpartition || (e.dataset.idgroupe && e.dataset.idgroupe != "aucun")) {
+			if ((e.dataset.idpartition && e.dataset.idgroupe != "aucun") || (e.dataset.idgroupe && e.dataset.idgroupe != "aucun")) {
-				positions.push(e.dataset.idpartition || e.dataset.idgroupe)
+				positions.push(parseInt(e.dataset.idgroupe || e.dataset.idpartition))
 			}
 		})
 
 		// Save positions
-		console.log(positions)
+		if (this.dataset.idpartition) {
+			let params = (new URL(document.location)).searchParams;
+			let formsemestre_id = params.get('formsemestre_id');
+			var url = `/ScoDoc/api/formsemestre/${formsemestre_id}/partitions/order`;
+
+			document.querySelectorAll(`#zoneChoix .masques>div`).forEach(parent => {
+				positions.forEach(position => {
+					parent.append(parent.querySelector(`[data-idpartition="${position}"]`))
+				})
+			})
+			document.querySelectorAll(`#zoneChoix .grpPartitions`).forEach(parent => {
+				positions.forEach(position => {
+					parent.append(parent.querySelector(`[data-idpartition="${position}"]`))
+				})
+			})
+			document.querySelectorAll(`#zoneGroupes>.groupes`).forEach(parent => {
+				positions.forEach(position => {
+					parent.append(parent.querySelector(`[data-idpartition="${position}"]`))
+				})
+			})
+		} else {
+			var url = `/ScoDoc/api/partition/${this.parentElement.dataset.idpartition}/groups/order`;
+
+			document.querySelectorAll(`#zoneChoix .etudiants .partition[data-idpartition="${this.parentElement.dataset.idpartition}"]`).forEach(partition => {
+				positions.forEach(position => {
+					partition.append(partition.querySelector(`[value="${position}"]`).parentElement)
+				})
+			})
+			document.querySelectorAll(`#zoneGroupes .partition[data-idpartition="${this.parentElement.dataset.idpartition}"]`).forEach(partition => {
+				positions.forEach(position => {
+					partition.append(partition.querySelector(`[data-idgroupe="${position}"]`))
+				})
+			})
+		}
+
+		fetch(url,
+			{
+				method: "POST",
+				headers: {
+					'Accept': 'application/json',
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify(positions)
+			})
+			.then(r => { return r.json() })
+			.then(r => {
+				if (!r) {
+					document.querySelector("main").innerHTML = "<h2>Une erreur s'est produite lors de la sauvegarde des données.</h2>";
+				}
+			})
+			.catch(error => {
+				document.querySelector("main").innerHTML = "<h2>Une erreur s'est produite lors de la sauvegarde des données.</h2>";
+			})
+
+	}
+
+	/*************************/
+	/* Message               */
+	/*************************/
+
+	function message(msg) {
+		var div = document.createElement("div");
+		div.className = "message_curtom";
+		div.innerHTML = msg;
+		document.querySelector("body").appendChild(div);
+		setTimeout(() => {
+			div.remove();
+		}, 3000);
 	}
 
 </script>