Partition editor : live update

This commit is contained in:
Sébastien Lehmann 2022-07-25 22:17:46 +02:00
parent 59d6205777
commit b15f755fcd
2 changed files with 194 additions and 14 deletions

View File

@ -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 { main {
font-family: Verdana, Geneva, Tahoma, sans-serif; font-family: Verdana, Geneva, Tahoma, sans-serif;
display: flex; display: flex;
@ -58,6 +88,8 @@ body:not(.editionActivated) .editing {
.move { .move {
cursor: grab; cursor: grab;
letter-spacing: -2px;
margin-right: 4px;
} }
.move:active { .move:active {

View File

@ -3,8 +3,8 @@
<div> <div>
<label class="edition"> <label class="edition">
Edition des partitions
<input type="checkbox"> <input type="checkbox">
Edition des partitions - tout s'enregistre automatiquement dès qu'il y a modification
</label> </label>
</div> </div>
@ -157,11 +157,17 @@
/******************************/ /******************************/
/* Gestionnaire d'événements */ /* Gestionnaire d'événements */
/******************************/ /******************************/
function input() {
document.querySelector("body").classList.toggle("editionActivated");
/*if (event.currentTarget.checked == false) {
go();
}*/
}
function processEvents() { function processEvents() {
/*--------------------*/ /*--------------------*/
/* Edition partitions */ /* 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(".ajoutPartition, .ajoutGroupe").forEach(btnPlus => { btnPlus.addEventListener("click", addPartition) })
document.querySelectorAll(".modif").forEach(btn => { btn.addEventListener("click", editText) }) document.querySelectorAll(".modif").forEach(btn => { btn.addEventListener("click", editText) })
document.querySelectorAll(".suppr").forEach(btn => { btn.addEventListener("click", suppr) }) document.querySelectorAll(".suppr").forEach(btn => { btn.addEventListener("click", suppr) })
@ -306,10 +312,22 @@
/* Ajout partition */ /* Ajout partition */
/*******************/ /*******************/
function addPartition() { 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"); let div = document.createElement("div");
div.innerHTML = ` div.innerHTML = `
<span class="editing move">||</span> <span class="editing move">||</span>
<span>Nouveau</span> <span>${name}</span>
<span class="editing modif">✏️</span> <span class="editing modif">✏️</span>
<span class="editing suppr"></span>`; <span class="editing suppr"></span>`;
@ -319,17 +337,41 @@
this.parentElement.insertBefore(div, this); this.parentElement.insertBefore(div, this);
// Save // 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 */ /* Edition du texte */
/********************/ /********************/
function editText() { function editText() {
//this.addEventListener("click", saveEditing, { once: true })
this.previousElementSibling.classList.add("editingText"); this.previousElementSibling.classList.add("editingText");
this.previousElementSibling.setAttribute("contenteditable", "true"); this.previousElementSibling.setAttribute("contenteditable", "true");
this.previousElementSibling.focus(); this.previousElementSibling.focus();
this.previousElementSibling.addEventListener("keydown", writing); this.previousElementSibling.addEventListener("keydown", writing);
} }
@ -350,10 +392,41 @@
obj.classList.remove("editingText"); obj.classList.remove("editingText");
obj.setAttribute("contenteditable", "false"); obj.setAttribute("contenteditable", "false");
obj.removeEventListener("keydown", writing); obj.removeEventListener("keydown", writing);
// Save // 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.className = "confirm";
div.innerHTML = ` div.innerHTML = `
<div> <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>
<div class="ok" ${data}>Supprimer</div> <div class="ok" ${data}>Supprimer</div>
<div class="nok">Annuler</div> <div class="nok">Annuler</div>
@ -386,6 +459,7 @@
/* Suppression des éléments dans la page */ /* Suppression des éléments dans la page */
if (this.dataset.idpartition) { if (this.dataset.idpartition) {
document.querySelectorAll(`[data-idpartition="${this.dataset.idpartition}"]`).forEach(e => { e.remove() }) document.querySelectorAll(`[data-idpartition="${this.dataset.idpartition}"]`).forEach(e => { e.remove() })
var url = "/ScoDoc/api/partition/" + this.dataset.idpartition + "/delete";
} else { } else {
document.querySelectorAll(`[value="${this.dataset.idgroupe}"]`).forEach(e => { document.querySelectorAll(`[value="${this.dataset.idgroupe}"]`).forEach(e => {
if (e.checked == true) { if (e.checked == true) {
@ -394,10 +468,17 @@
e.parentElement.remove() e.parentElement.remove()
}) })
document.querySelectorAll(`[data-idgroupe="${this.dataset.idgroupe}"]`).forEach(e => { e.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() { function closeConfirm() {
@ -443,13 +524,80 @@
let positions = []; let positions = [];
Array.from(moveData.element.parentElement.children).forEach(e => { 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 // 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> </script>