forked from ScoDoc/ScoDoc
Merge pull request 'Partition editor : live update' (#459) from lehmann/ScoDoc-Front:master into master
Reviewed-on: https://scodoc.org/git/ScoDoc/ScoDoc/pulls/459
This commit is contained in:
commit
10e0aa28b2
@ -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 {
|
||||
|
||||
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user