From b15f755fcd19488eacc947db1707e27ea2a4ef0f Mon Sep 17 00:00:00 2001 From: lehmann Date: Mon, 25 Jul 2022 22:17:46 +0200 Subject: [PATCH] Partition editor : live update --- app/static/css/partition_editor.css | 32 ++++ app/templates/scolar/partition_editor.html | 176 +++++++++++++++++++-- 2 files changed, 194 insertions(+), 14 deletions(-) diff --git a/app/static/css/partition_editor.css b/app/static/css/partition_editor.css index 4f9915dc..15190520 100644 --- a/app/static/css/partition_editor.css +++ b/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 { diff --git a/app/templates/scolar/partition_editor.html b/app/templates/scolar/partition_editor.html index 7b6d8a9e..bd34fe57 100644 --- a/app/templates/scolar/partition_editor.html +++ b/app/templates/scolar/partition_editor.html @@ -3,8 +3,8 @@
@@ -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 = ` || - Nouveau + ${name} ✏️ ❌`; @@ -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 = "

Une erreur s'est produite lors de la sauvegarde des données.

"; + }) } /********************/ /* 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( - obj.parentElement.dataset.idpartition || obj.parentElement.dataset.idgroupe, - obj.innerText); + if (obj.parentElement.dataset.idpartition) { + var url = `/ScoDoc/api/partition/${obj.parentElement.dataset.idpartition}/edit`; + 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 = "

Une erreur s'est produite lors de la sauvegarde des données.

"; + } + }) + .catch(error => { + document.querySelector("main").innerHTML = "

Une erreur s'est produite lors de la sauvegarde des données.

"; + }) } /*********************************/ @@ -369,7 +442,7 @@ div.className = "confirm"; div.innerHTML = `
-

Vous être sur le point de supprimer ${this.previousElementSibling.previousElementSibling.innerText}, cette opération est irréversible

+

Vous être sur le point de supprimer ${this.previousElementSibling.previousElementSibling.innerText},
cette opération est irréversible

Supprimer
Annuler
@@ -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 = "

Une erreur s'est produite lors de la sauvegarde des données.

"; + } + }) } 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")) { - positions.push(e.dataset.idpartition || e.dataset.idgroupe) + if ((e.dataset.idpartition && e.dataset.idgroupe != "aucun") || (e.dataset.idgroupe && e.dataset.idgroupe != "aucun")) { + 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 = "

Une erreur s'est produite lors de la sauvegarde des données.

"; + } + }) + .catch(error => { + document.querySelector("main").innerHTML = "

Une erreur s'est produite lors de la sauvegarde des données.

"; + }) + + } + + /*************************/ + /* 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); } \ No newline at end of file