From 28813237f2d509fdae92767c37d1dca963e7fd44 Mon Sep 17 00:00:00 2001 From: lehmann Date: Sun, 8 Jan 2023 17:31:15 +0100 Subject: [PATCH] Nouvelle version editeur partitions --- app/static/css/partition_editor.css | 197 +++++++-- app/templates/scolar/partition_editor.html | 472 +++++++++++++-------- 2 files changed, 448 insertions(+), 221 deletions(-) diff --git a/app/static/css/partition_editor.css b/app/static/css/partition_editor.css index b0b89fef..ae9adf9a 100644 --- a/app/static/css/partition_editor.css +++ b/app/static/css/partition_editor.css @@ -1,3 +1,7 @@ +html { + overflow-x: hidden; +} + .wait { position: fixed; width: 50px; @@ -44,19 +48,43 @@ margin-bottom: 16px; display: inline-block; cursor: pointer; + pointer-events: none; +} + +.loaded .edition { + pointer-events: initial; +} + +.filtres>label { + display: none; +} + +.editionActivated .valider { + display: block; + width: fit-content; + margin-left: auto; + padding: 8px 32px; + background: #90c; + color: #fff; + box-shadow: 0 2px 2px rgb(0, 0, 0, 0.25); + border-radius: 4px; + cursor: pointer; } main { font-family: Verdana, Geneva, Tahoma, sans-serif; display: flex; flex-wrap: wrap; - gap: 32px; - row-gap: 4px; + gap: 8px; margin-right: 16px; + padding: 8px; + border-radius: 12px; + background: #424242; } main h2 { border-bottom: 4px solid #09c; + font-size: 150% !important; } main h2, @@ -64,11 +92,22 @@ main h3 { font-weight: 400; } -body:not(.editionActivated) .editing { - display: none !important; +section { + background: #fff; + padding: 8px; + border-radius: 8px; } -.editionActivated #zoneChoix .etudiants>div { +body:not(.editionActivated) .editing { + display: none; +} + +.nonEditable .editing { + display: none; +} + +.editionActivated #zoneChoix, +.editionActivated #zoneGroupes { pointer-events: none; opacity: 0.2; } @@ -80,7 +119,9 @@ body:not(.editionActivated) .editing { } @keyframes boing { - 100% {transform: translateY(-20px)} + 100% { + transform: translateY(-20px) + } } /****************/ @@ -89,13 +130,19 @@ body:not(.editionActivated) .editing { background: #0c9 !important; padding: 8px 16px !important; cursor: pointer; + color: #fff; + box-shadow: 0 2px 2px rgb(0, 0, 0, 0.25); + border-radius: 4px; + text-align: center; + margin-bottom: 4px; + width: fit-content; } .move, .modif, .suppr { color: #000; - padding: 4px; + padding: 0 4px; cursor: pointer; } @@ -172,10 +219,31 @@ body.editionActivated .filtres>div>div>div>div { .moving { opacity: 0.8; pointer-events: none; - ; } -.grabbing>div:not([data-idgroupe="aucun"]):hover:before { +.grabbing>div[data-idpartition]:not([data-idgroupe]):hover:before { + content: ""; + position: absolute; + left: -4px; + right: -4px; + bottom: calc(100% + 1px); + height: 2px; + width: auto; + background: #c44; + animation: insertPartion 0.2s infinite alternate ease-in-out; +} + +@keyframes insertPartion { + 0% { + transform: translateX(-4px) + } + + 100% { + transform: translateX(4px) + } +} + +.grabbing>*:not([data-idgroupe="aucun"]):hover:before { content: ""; position: absolute; bottom: -4px; @@ -183,10 +251,10 @@ body.editionActivated .filtres>div>div>div>div { right: calc(100% + 1px); width: 2px; background: #c44; - animation: insert 0.2s infinite alternate ease-in-out; + animation: insertGroupe 0.2s infinite alternate ease-in-out; } -@keyframes insert { +@keyframes insertGroupe { 0% { transform: translateY(-4px) } @@ -197,51 +265,77 @@ body.editionActivated .filtres>div>div>div>div { } /*****************************/ -/* Zone Partitions */ +/* Zone Filtres */ /*****************************/ #zonePartitions { width: 100%; } -.filtres { - display: table; +#zonePartitions>div { + width: fit-content; } -.filtres>div { - background: #ddd; +#zonePartitions h3{ + display: flex; +} +#zonePartitions h3 .onoff{ + margin-left: auto; + cursor: pointer; + display: flex; + align-items: center; + gap: 4px; + font-size: 16px; +} + +#zonePartitions .filtres { + width: fit-content; +} + +#zonePartitions .filtres>div { + background: #eee; padding: 8px; border-radius: 8px; margin-bottom: 8px; + position: relative; } -.filtres>div>div>div { +#zonePartitions .filtres .groupes { display: flex; flex-wrap: wrap; gap: 4px; row-gap: 2px; - margin: 8px 0; + margin: 4px 0 0 0; } -.filtres>div>div>div>div { +#zonePartitions .filtres .groupes>div { + position: relative; background: #09c; color: #FFF; border-radius: 4px; padding: 8px 32px; + margin: 0; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25); } -body:not(.editionActivated) .filtres>div>div>div>div { +body:not(.editionActivated) .filtres .groupes>div { cursor: pointer; } -body:not(.editionActivated) .filtres>div>div>div>div:hover { - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6); +body:not(.editionActivated) .filtres .groupes>div:hover { + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6) !important; } -body:not(.editionActivated) .filtres>div>div>div>div:active { - box-shadow: 0 0 0 #000; +body:not(.editionActivated) .filtres .groupes>div:active { + box-shadow: 0 0 0 #000 !important; transform: translateY(2px); } +body.editionActivated .filtres [data-idgroupe=aucun]{ + display: none; +} + +body.editionActivated .filtres .nonEditable .move{ + display: initial; +} .filtres .unselect { background: rgba(0, 153, 204, 0.5); @@ -250,12 +344,37 @@ body:not(.editionActivated) .filtres>div>div>div>div:active { /*****************************/ /* Zone Etudiants */ /*****************************/ +#zoneChoix>.autoAffectation{ + background: #3c3c3c; + color: #fff; + padding: 4px 8px; + margin-bottom: 16px; + border-radius: 4px; +} +#zoneChoix>.autoAffectation>select{ + border: none; + padding: 4px 16px; + border-radius: 4px; +} +#zoneChoix>.autoAffectation>.affectationGo{ + display: inline-block; + background: #0c9; + padding: 8px 16px; + cursor: pointer; + color: #fff; + box-shadow: 0 2px 2px rgb(0 0 0 / 25%); + border-radius: 4px; + text-align: center; + margin-top: 4px; + margin-bottom: 4px; + width: fit-content; +} #zoneChoix .etudiants>div { background: #FFF; border: 1px solid #aaa; border-radius: 4px; padding: 4px 8px; - margin: 4px 0; + margin: -1px 0; display: flex; flex-wrap: wrap; justify-content: space-between; @@ -266,16 +385,22 @@ body:not(.editionActivated) .filtres>div>div>div>div:active { flex: 1; } -#zoneChoix small { +#zoneChoix .small { color: #444; + font-size: 8px; font-style: italic; } +#zoneChoix .etudiants .grpPartitions { + display: flex; + flex-direction: column; + gap: 2px; +} + #zoneChoix .etudiants .partition { display: flex; flex-wrap: wrap; gap: 4px; - margin-bottom: 4px; } #zoneChoix label { @@ -313,9 +438,12 @@ body:not(.editionActivated) .filtres>div>div>div>div:active { color: #fff; } -.hide { +section:not(#zonePartitions) .hide { display: none !important; } +#zonePartitions .hide{ + opacity: 0.4; +} .saved+span { position: relative; @@ -346,11 +474,8 @@ body:not(.editionActivated) .filtres>div>div>div>div:active { flex: 1; } -#zoneGroupes .groupes { - display: flex; - flex-wrap: wrap; - align-items: flex-start; - gap: 16px; +#zoneGroupes h3 { + width: 100%; } #zoneGroupes .partition { @@ -358,8 +483,9 @@ body:not(.editionActivated) .filtres>div>div>div>div:active { padding: 8px; border-radius: 8px; display: flex; - flex-direction: column; + flex-wrap: wrap; gap: 8px; + margin-bottom: 8px; } h3 { @@ -390,5 +516,6 @@ h3 { } #zoneGroupes [data-idgroupe=aucun] { - background: #b5c2c3 !important; + background: #3c3c3c !important; + color: #fff; } \ No newline at end of file diff --git a/app/templates/scolar/partition_editor.html b/app/templates/scolar/partition_editor.html index 6faf8409..9c300176 100644 --- a/app/templates/scolar/partition_editor.html +++ b/app/templates/scolar/partition_editor.html @@ -5,30 +5,30 @@
-

Partitions et groupes

+

Filtres

-
-
-

Afficher les partitions

-
-
-
-

- Afficher les étudiants affectés aux groupes
- Ne s'actualise pas automatiquement lors d'une modification -

-
-
+
+
+
Ajouter une partition
+
+

Etudiants

+
+ Affecter automatiquement les étudiants du groupe
+ + vers le groupe + +
Valider
+
@@ -55,7 +55,9 @@ processDatas(partitions, etudiants); processEvents(); + listeGroupesAutoaffectation(); + document.querySelector("body").classList.add("loaded"); document.querySelector('.wait').style.display = "none"; } @@ -73,22 +75,25 @@ function processDatas(partitions, etudiants) { /* Filtres et groupes */ - let outputPartitions = "
"; - let outputMasques = ""; + let divFiltres = document.querySelector(".filtres"); let outputGroupes = ""; let arrayPartitions = Object.values(partitions).sort((a, b) => { return a.numero - b.numero; }) arrayPartitions.forEach((partition) => { - // Filtres - if (partition.groups_editable) { - outputPartitions += `
||${partition.partition_name}✏️❌
`; - } else { - outputPartitions += `
${partition.partition_name}
`; - } - outputMasques += `
Non affectés - ${partition.partition_name}
`; + let divPartition = templateFiltres_partition(partition); + divFiltres.appendChild(divPartition); + + let arrayGroups = Object.values(partition.groups).sort((a, b) => { + return a.numero - b.numero; + }) + + arrayGroups.forEach((groupe) => { + let divPlus = divPartition.querySelector(".ajoutGroupe"); + divPlus.parentElement.insertBefore(templateFiltres_groupe(groupe), divPlus); + }) // Groupes outputGroupes += ` @@ -104,35 +109,21 @@ }) let output = ""; arrayGroups.forEach((groupe) => { - /***************/ - if (partition.groups_editable) { - outputMasques += `
||${groupe.group_name}✏️❌
`; - } else { - outputMasques += `
${groupe.group_name}
`; - } - /***************/ output += templateGroupe_zoneGroupes(groupe.id, groupe.group_name); }) return output; })()}
`; - outputMasques += ` -
+
-
`; }) - document.querySelector(".filtres>.partitions>div").innerHTML = outputPartitions + ` -
+
- `; - document.querySelector(".filtres>.masques>div").innerHTML = outputMasques; - document.querySelector("#zoneGroupes>.groupes").innerHTML = outputGroupes; + document.querySelector("#zoneGroupes>.groupes").innerHTML = outputGroupes; /* Etudiants */ output = ""; etudiants.forEach(etudiant => { output += `
-
${etudiant.nom_disp} ${etudiant.prenom}
${etudiant.bac}
+
${etudiant.nom_disp} ${etudiant.prenom}
${etudiant.bac}
${(() => { let output = "
"; arrayPartitions.forEach((partition) => { @@ -168,6 +159,58 @@ document.querySelector("#zoneChoix>.etudiants").innerHTML = output; } + function templateFiltres_partition(partition) { + let div = document.createElement("div"); + div.dataset.idpartition = partition.id; + if (partition.groups_editable == false) { + div.classList.add("nonEditable"); + } + div.innerHTML = ` + +

+ || + ${partition.partition_name} + ✏️ + ❌ + +
Masquer
+

+ + +
+
+ Non affectés +
+
+
+
`; + + div.querySelector(".move").addEventListener("mousedown", moveStart); + div.querySelector(".modif").addEventListener("click", editText); + div.querySelector(".suppr").addEventListener("click", suppr); + div.querySelector(".onoff").addEventListener("click", masquerPartitions); + div.querySelector("[data-idgroupe]").addEventListener("click", filtre); + div.querySelector(".ajoutGroupe").addEventListener("click", addGroupe); + + return div; + } + + function templateFiltres_groupe(groupe) { + let div = document.createElement("div"); + div.dataset.idgroupe = groupe.id; + div.innerHTML = ` + || + ${groupe.group_name} + ✏️ + ❌`; + + div.addEventListener("click", filtre); + div.querySelector(".move").addEventListener("mousedown", moveStart); + div.querySelector(".modif").addEventListener("click", editText); + div.querySelector(".suppr").addEventListener("click", suppr); + + return div; + } + function templateGroupe_zoneGroupes(idGroupe, name) { return `
${name}
@@ -179,6 +222,24 @@ return `
${etudiant.nom_disp} ${etudiant.prenom}
` } + function listeGroupesAutoaffectation() { + let output = ''; + + document.querySelectorAll('#zonePartitions .filtres>div').forEach(partition => { + + output += ``; + partition.querySelectorAll('[data-idgroupe]:not([data-idgroupe="aucun"])').forEach(groupe => { + output += ``; + }) + output += ""; + + }) + + document.querySelector("#affectationFrom").innerHTML = output; + document.querySelector("#affectationTo").innerHTML = output; + + } + /******************************/ /* Gestionnaire d'événements */ /******************************/ @@ -187,11 +248,11 @@ if (!editing) { document.querySelector("body").classList.toggle("editionActivated"); return; - } + } this.checked = true; - if(!editing.classList.contains("highlight")) { + if (!editing.classList.contains("highlight")) { editing.classList.add("highlight"); - setTimeout(()=>{editing.classList.remove("highlight")}, 1000); + setTimeout(() => { editing.classList.remove("highlight") }, 1000); } } function processEvents() { @@ -199,26 +260,25 @@ /* Edition partitions */ /*--------------------*/ document.querySelector(".edition>input").addEventListener("input", setEditMode); - 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) }) - document.querySelectorAll(".move").forEach(btn => { btn.addEventListener("mousedown", moveStart) }) - - /*---------*/ - /* Filtres */ - /*---------*/ - document.querySelectorAll(".filtres>div>div>div>div:not(.editing)").forEach(btn => { btn.addEventListener("click", filtre) }) + document.querySelectorAll(".ajoutPartition").forEach(btnPlus => { btnPlus.addEventListener("click", addPartition) }) /*--------------------*/ /* Changement groupe */ /*--------------------*/ document.querySelectorAll("label").forEach(btn => { btn.addEventListener("mousedown", (event) => { event.preventDefault() }) }); document.querySelectorAll(".etudiants input").forEach(input => { input.addEventListener("input", assignment) }) + document.querySelector(".affectationGo").addEventListener("click", affectationGo); } /**********************/ /* Filtrage */ /**********************/ + function masquerPartitions() { + let idPartition = this.closest("[data-idpartition]").dataset.idpartition; + document.querySelectorAll(`[data-idpartition="${idPartition}"]`).forEach(e => { + e.classList.toggle("hide"); + }) + } function filtre() { if (document.querySelector("body").classList.contains("editionActivated")) { return; @@ -241,7 +301,7 @@ }) } - if (!this.dataset.idgroupe) { + /*if (!this.dataset.idgroupe) { // Partitions let groupesSelected = []; this.parentElement.querySelectorAll(":not(.unselect)").forEach(e => { @@ -257,39 +317,51 @@ e.classList.add("hide") } }) - } else { - // Groupes - let groupesSelected = {}; + } else {*/ + // Groupes + let groupesSelected = {}; - this.parentElement.parentElement.querySelectorAll("[data-idgroupe]:not(.unselect)").forEach(e => { - let idpartition = e.parentElement.dataset.idpartition; - if (!groupesSelected[idpartition]) { - groupesSelected[idpartition] = []; - } - groupesSelected[idpartition].push(e.dataset.idgroupe) - }) - document.querySelectorAll("#zoneChoix .etudiants>div").forEach(e => { - let found = true; - Object.entries(groupesSelected).forEach(([idpartition, tabGroupes]) => { - if (!tabGroupes.includes( - e.querySelector(`[data-idpartition="${idpartition}"] input:checked`).value - ) - ) { - found = false - } - }) - - if (found) { - e.classList.remove("hide") - } else { - e.classList.add("hide") + this.parentElement.parentElement.querySelectorAll("[data-idgroupe]:not(.unselect)").forEach(e => { + let idpartition = e.parentElement.dataset.idpartition; + if (!groupesSelected[idpartition]) { + groupesSelected[idpartition] = []; + } + groupesSelected[idpartition].push(e.dataset.idgroupe) + }) + document.querySelectorAll("#zoneChoix .etudiants>div").forEach(e => { + let found = true; + Object.entries(groupesSelected).forEach(([idpartition, tabGroupes]) => { + if (!tabGroupes.includes( + e.querySelector(`[data-idpartition="${idpartition}"] input:checked`).value + ) + ) { + found = false } }) - } + + if (found) { + e.classList.remove("hide") + } else { + e.classList.add("hide") + } + }) + //} } /****************************/ /* Affectation à un groupe */ /****************************/ + function affectationGo(){ + let from = document.querySelector("#affectationFrom").value; + let to = document.querySelector("#affectationTo").value; + + if(!from || !to){ + return; + } + + document.querySelectorAll(`#zoneChoix .etudiants [value="${from}"]:checked`).forEach(groupeSelected=>{ + groupeSelected.closest(".grpPartitions").querySelector(`[value="${to}"]`).click(); + }) + } function assignment() { let groupe = this.parentElement.parentElement.parentElement.parentElement; let nom = groupe.children[0].dataset.nom; @@ -346,32 +418,12 @@ /****************************/ function addPartition() { let date = new Date; - if (this.classList.contains("ajoutPartition")) { - // Partition - var name = "Nouvelle " + date.getSeconds(); - let params = (new URL(document.location)).searchParams; - let formsemestre_id = params.get('formsemestre_id'); - var url = "/ScoDoc/{{formsemestre.departement.acronym}}/api/formsemestre/" + formsemestre_id + "/partition/create"; - var payload = { partition_name: name }; - } else { - // Groupe - var name = "Nouveau " + date.getSeconds(); - var url = `/ScoDoc/{{formsemestre.departement.acronym}}/api/partition/${this.parentElement.dataset.idpartition}/group/create`; - var payload = { group_name: name }; - } - var div = document.createElement("div"); - div.innerHTML = ` - || - ${name} - ✏️ - ❌`; - div.querySelector(".modif").addEventListener("click", editText); - div.querySelector(".suppr").addEventListener("click", suppr); - div.querySelector(".move").addEventListener("mousedown", moveStart); - this.parentElement.insertBefore(div, this); - - div.querySelector(".modif").click(); + var name = "Nouvelle " + date.getSeconds(); + let params = (new URL(document.location)).searchParams; + let formsemestre_id = params.get('formsemestre_id'); + var url = "/ScoDoc/{{formsemestre.departement.acronym}}/api/formsemestre/" + formsemestre_id + "/partition/create"; + var payload = { partition_name: name }; // Save fetch(url, @@ -390,76 +442,110 @@ div.remove(); return; } - if (this.classList.contains("ajoutPartition")) { - div.dataset.idpartition = r.id; - // Ajout dans la zone masques - div = document.createElement("div"); - div.dataset.idpartition = r.id; - div.innerHTML = ` -
Non affectés - ${name}
-
+
`; - - div.querySelector("div").addEventListener("click", filtre); - div.querySelector(".ajoutGroupe").addEventListener("click", addPartition); - - document.querySelector("#zonePartitions .masques>div").appendChild(div); - - // Ajout de la zone pour chaque étudiant - let outputGroupes = ""; - - document.querySelectorAll("#zoneChoix .grpPartitions").forEach(e => { - let etudid = e.previousElementSibling.dataset.etudid; - - // Préparation pour la section suivante - let etudiant = { - etudid: etudid, - nom_disp: e.previousElementSibling.dataset.nom, - prenom: e.previousElementSibling.dataset.prenom - } - outputGroupes += templateEtudiant_zoneGroupes(etudiant); - //////////////////////// - - let div = document.createElement("div"); - div.className = "partition"; - div.dataset.idpartition = r.id; - div.innerHTML = ` -
${name}
- - `; - div.querySelector("input").addEventListener("input", assignment); - e.appendChild(div); - }); - - // Ajout de la zone groupes - document.querySelector("#zoneGroupes>.groupes").innerHTML += ` -
-

${name}

-
-
Non affecté(s)
-
${outputGroupes}
-
-
`; - } else { - div.dataset.idgroupe = r.id; - - // Ajout du bouton pour chaque étudiant - let idpartition = this.parentElement.dataset.idpartition; - document.querySelectorAll(`#zoneChoix .etudiants [data-idpartition="${idpartition}"]`).forEach(e => { - let etudid = e.parentElement.parentElement.dataset.etudid; - let label = document.createElement("label"); - label.innerHTML = `${name}`; - label.querySelector("input").addEventListener("input", assignment); - e.appendChild(label); - }) - - // Ajout du groupe dans la zone Groupes - document.querySelector(`#zoneGroupes .partition[data-idpartition="${idpartition}"]`).innerHTML += templateGroupe_zoneGroupes(r.id, name); + // Ajout dans la zone filtres + let partition = { + id: r.id, + partition_name: name } + let divPartition = templateFiltres_partition(partition); + document.querySelector("#zonePartitions .filtres").appendChild(divPartition); + divPartition.querySelector(".modif").click(); + + // Ajout de la zone pour chaque étudiant + let outputGroupes = ""; + + document.querySelectorAll("#zoneChoix .grpPartitions").forEach(e => { + let etudid = e.previousElementSibling.dataset.etudid; + + // Préparation pour la section suivante + let etudiant = { + etudid: etudid, + nom_disp: e.previousElementSibling.dataset.nom, + prenom: e.previousElementSibling.dataset.prenom + } + outputGroupes += templateEtudiant_zoneGroupes(etudiant); + //////////////////////// + + let div = document.createElement("div"); + div.className = "partition"; + div.dataset.idpartition = r.id; + div.innerHTML = ` +
${name}
+ + `; + div.querySelector("input").addEventListener("input", assignment); + e.appendChild(div); + }); + + // Ajout de la zone groupes + document.querySelector("#zoneGroupes>.groupes").innerHTML += ` +
+

${name}

+
+
Non affecté(s)
+
${outputGroupes}
+
+
`; + + listeGroupesAutoaffectation(); + }) + .catch(error => { + document.querySelector("main").innerHTML = "

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

"; + }) + } + + function addGroupe() { + let date = new Date; + // Groupe + var name = "Nouveau " + date.getSeconds(); + let idPartition = this.parentElement.previousElementSibling.dataset.idpartition; + var url = `/ScoDoc/{{formsemestre.departement.acronym}}/api/partition/${idPartition}/group/create`; + var payload = { group_name: name }; + + 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à"); + return; + } + + let groupe = { + id: r.id, + group_name: name + } + let divGroupe = templateFiltres_groupe(groupe); + this.parentElement.insertBefore(divGroupe, this); + + // Ajout du bouton pour chaque étudiant + document.querySelectorAll(`#zoneChoix .etudiants [data-idpartition="${idPartition}"]`).forEach(e => { + let etudid = e.parentElement.previousElementSibling.dataset.etudid; + let label = document.createElement("label"); + label.innerHTML = `${name}`; + label.querySelector("input").addEventListener("input", assignment); + e.appendChild(label); + }) + + // Ajout du groupe dans la zone Groupes + document.querySelector(`#zoneGroupes .partition[data-idpartition="${idPartition}"]`).innerHTML += templateGroupe_zoneGroupes(r.id, name); + + // Lancement de l'édition du nom + divGroupe.querySelector(".modif").click(); + + listeGroupesAutoaffectation(); }) .catch(error => { document.querySelector("main").innerHTML = "

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

"; @@ -474,6 +560,7 @@ e.classList.add("editingText"); e.setAttribute("contenteditable", "true"); e.addEventListener("keydown", writing); + e.addEventListener("focusout", () => { saveEditing(this.previousElementSibling) }); // On sélectionne la zone const range = document.createRange(); @@ -506,7 +593,6 @@ var url = `/ScoDoc/{{formsemestre.departement.acronym}}/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 { @@ -531,6 +617,7 @@ if (!r) { document.querySelector("main").innerHTML = "

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

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

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

"; @@ -586,6 +673,7 @@ if (r.OK != true) { document.querySelector("main").innerHTML = "

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

"; } + listeGroupesAutoaffectation(); }) } @@ -600,14 +688,21 @@ function moveStart(event) { moveData.x = event.pageX; moveData.y = event.pageY; - moveData.element = this.parentElement; + if (this.parentElement.dataset.idpartition) { + moveData.element = this.parentElement.parentElement; + } else { + moveData.element = this.parentElement; + } moveData.element.classList.add("moving"); moveData.element.parentElement.classList.add('grabbing'); document.body.addEventListener("mousemove", move); - moveData.element.parentElement.querySelectorAll("div:not([data-idgroupe=aucun])").forEach(e => { - e.addEventListener("mouseup", newPosition) - }) document.body.addEventListener("mouseup", moveEnd); + Array.from(moveData.element.parentElement.children).forEach(e => { + if ((e.dataset.idpartition && e.classname != "nonEditable") || + (e.dataset.idgroupe != "aucun")) { + e.addEventListener("mouseup", newPosition) + } + }) } function move(event) { @@ -621,24 +716,28 @@ moveData.element.parentElement.classList.remove('grabbing'); moveData.element.style.transform = ""; moveData.element.classList.remove("moving"); - moveData.element.parentElement.querySelectorAll("div:not([data-idgroupe=aucun])").forEach(e => { - e.removeEventListener("mouseup", newPosition) + Array.from(moveData.element.parentElement.children).forEach(e => { + if ((e.dataset.idpartition && e.classname != "nonEditable") || + (e.dataset.idgroupe && e.dataset.idgroupe != "aucun")) { + e.removeEventListener("mouseup", newPosition) + } }) moveData = {}; } - function newPosition() { + function newPosition(event) { moveData.element.parentElement.insertBefore(moveData.element, this); let positions = []; Array.from(moveData.element.parentElement.children).forEach(e => { - if ((e.dataset.idpartition && e.dataset.idgroupe != "aucun") || (e.dataset.idgroupe && e.dataset.idgroupe != "aucun")) { - positions.push(parseInt(e.dataset.idgroupe || e.dataset.idpartition)) + if ((e.dataset.idpartition && e.classname != "nonEditable") || + (e.dataset.idgroupe && e.dataset.idgroupe != "aucun")) { + positions.push(parseInt(e.dataset.idpartition || e.dataset.idgroupe)) } }) // Save positions - if (this.parentElement.parentElement.parentElement.className == "partitions") { + if (this.dataset.idpartition) { let params = (new URL(document.location)).searchParams; let formsemestre_id = params.get('formsemestre_id'); var url = `/ScoDoc/{{formsemestre.departement.acronym}}/api/formsemestre/${formsemestre_id}/partitions/order`; @@ -659,14 +758,15 @@ }) }) } else { - var url = `/ScoDoc/{{formsemestre.departement.acronym}}/api/partition/${this.parentElement.dataset.idpartition}/groups/order`; + let idPartition = this.closest("[data-idpartition]").dataset.idpartition; + var url = `/ScoDoc/{{formsemestre.departement.acronym}}/api/partition/${idPartition}/groups/order`; - document.querySelectorAll(`#zoneChoix .etudiants .partition[data-idpartition="${this.parentElement.dataset.idpartition}"]`).forEach(partition => { + document.querySelectorAll(`#zoneChoix .etudiants .partition[data-idpartition="${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 => { + document.querySelectorAll(`#zoneGroupes .partition[data-idpartition="${idPartition}"]`).forEach(partition => { positions.forEach(position => { partition.append(partition.querySelector(`[data-idgroupe="${position}"]`)) }) @@ -687,11 +787,11 @@ if (!r) { document.querySelector("main").innerHTML = "

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

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

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

"; }) - } /*************************/