cleo/ScoDoc-PE
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'Partition editor : live update' (#459) from lehmann/ScoDoc-Front:master into master

Browse Source 
Reviewed-on: https://scodoc.org/git/ScoDoc/ScoDoc/pulls/459
This commit is contained in:
Emmanuel Viennet 2022-07-25 22:23:26 +02:00
commit 10e0aa28b2
2 changed files with 194 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
app/static/css/partition_editor.css
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 {
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 {

176
app/templates/scolar/partition_editor.html
View File

@ -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(
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 = "<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")) {
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 = "<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>