diff --git a/app/static/css/partition_editor.css b/app/static/css/partition_editor.css index 4f9915dc..ca8fccf0 100644 --- a/app/static/css/partition_editor.css +++ b/app/static/css/partition_editor.css @@ -15,6 +15,28 @@ } } +.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%) + } +} + main { font-family: Verdana, Geneva, Tahoma, sans-serif; display: flex; @@ -58,6 +80,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..a092975e 100644 --- a/app/templates/scolar/partition_editor.html +++ b/app/templates/scolar/partition_editor.html @@ -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,36 @@ 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; + } + div.dataset.idpartition = 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); } @@ -351,6 +388,35 @@ obj.setAttribute("contenteditable", "false"); obj.removeEventListener("keydown", writing); // Save + + if(obj.parentElement.dataset.idpartition){ + var url = `/ScoDoc/api/partition/${obj.parentElement.dataset.idpartition}/edit`; + var payload = { partition_name: obj.innerText } + } else { + var url = `/ScoDoc/api/group/${obj.parentElement.dataset.idgroupe}/edit`; + var payload = { group_name: 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.

"; + }) + + console.log( obj.parentElement.dataset.idpartition || obj.parentElement.dataset.idgroupe, obj.innerText); @@ -369,7 +435,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 +452,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 +461,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 != 1) { + document.querySelector("main").innerHTML = "

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

"; + } + }) } function closeConfirm() { @@ -444,12 +518,52 @@ 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) + positions.push(parseInt(e.dataset.idpartition || e.dataset.idgroupe)) } }) // 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`; + } else { + var url = `/ScoDoc/api/partition/${this.parentElement.dataset.idpartition}/groups/order`; + } + + 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