lehmann/ScoDoc-Front
1
0
Fork 0
forked from ScoDoc/ScoDoc
Code Pull Requests Activity

Assiduites : Fixes + fin page différée

Browse Source
This commit is contained in:
iziram 2023-06-14 17:53:19 +02:00
parent 452233dd1a
commit 1c0d0baf15
6 changed files with 367 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/static/css/assiduites.css
View File

@ -231,6 +231,8 @@
-webkit-appearance: none;
appearance: none;
cursor: pointer;
}
.rbtn::before {

74
app/static/js/assiduites.js
View File

@ -195,7 +195,7 @@ function sync_post(path, data, success, errors) {
* @param {CallableFunction} errors fonction à effectuer en cas d'échec
*/
function async_post(path, data, success, errors) {
$.ajax({
return $.ajax({
async: true,
type: "POST",
url: path,
@ -334,27 +334,22 @@ function executeMassActionQueue() {
};
//On exécute les fonctions de queue
let color;
switch (currentMassActionEtat.toUpperCase()) {
case "PRESENT":
color = "#6bdb83";
break;
case "ABSENT":
color = "#F1A69C";
break;
case "RETARD":
color = "#f0c865";
break;
default:
color = "#AAA";
break;
}
let count = 0;
if (currentMassActionEtat == "remove") {
count += supprimer();
const span = document.createElement("span");
span.innerHTML = `${count} assiduités ont été supprimées.`;
pushToast(generateToast(span, color, 5));
if (count > 0) {
span.innerHTML = `${count} assiduités ont été supprimées.`;
} else {
span.innerHTML = `Aucune assiduité n'a été supprimée.`;
}
pushToast(
generateToast(
span,
getToastColorFromEtat(currentMassActionEtat.toUpperCase()),
5
)
);
} else {
count += create();
count += edit();
@ -363,10 +358,22 @@ function executeMassActionQueue() {
? "En retard"
: currentMassActionEtat;
const span = document.createElement("span");
span.innerHTML = `${count} étudiants ont été mis <u><strong>${etat
.capitalize()
.trim()}</strong></u>`;
pushToast(generateToast(span, color, 5));
if (count > 0) {
span.innerHTML = `${count} étudiants ont été mis <u><strong>${etat
.capitalize()
.trim()}</strong></u>`;
} else {
span.innerHTML = `Aucun étudiant n'a été mis <u><strong>${etat
.capitalize()
.trim()}</strong></u>`;
}
pushToast(
generateToast(
span,
getToastColorFromEtat(currentMassActionEtat.toUpperCase()),
5
)
);
}
//On récupère les assiduités puis on regénère les lignes d'étudiants
getAssiduitesFromEtuds(true);
@ -1105,30 +1112,15 @@ function assiduiteAction(element) {
etatAffiche = "L'assiduité de %etud% a été retirée.";
}
let color;
switch (etat.toUpperCase()) {
case "PRESENT":
color = "#6bdb83";
break;
case "ABSENT":
color = "#F1A69C";
break;
case "RETARD":
color = "#f0c865";
break;
default:
color = "#AAA";
break;
}
const nom_prenom = `${etuds[etudid].nom.toUpperCase()} ${etuds[
etudid
].prenom.capitalize()}`;
const span = document.createElement("span");
span.innerHTML = etatAffiche.replace("%etud%", nom_prenom);
pushToast(generateToast(span, color, 5));
pushToast(
generateToast(span, getToastColorFromEtat(etat.toUpperCase()), 5)
);
}
actualizeEtud(etudid, !isSingleEtud);
@ -1322,7 +1314,7 @@ function getUserFromId(id) {
let name = "Non Renseigné";
sync_get(`/ScoDoc/api/user/${id}`, (data) => {
sync_get(getUrl() + `/api/user/${id}`, (data) => {
if (data.nom != "" && data.prenom != "") {
name = `${data.nom} ${data.prenom}`;
} else {

496
app/templates/assiduites/differee.j2
View File

@ -11,7 +11,7 @@
<div class="tr" etudid="{{etud.etudid}}">
<div class="td sticky">
<span>{{etud.nomprenom}}</span>
<img class="pdp-hover" src="/ScoDoc/GEII/api/etudiant/etudid/{{etud.etudid}}/photo?size=small">
<img class="pdp-hover" src="" alt="No Img" etudid="{{etud.etudid}}">
</div>
</div>
{% endfor %}
@ -76,7 +76,9 @@
text-align: center;
width: 225px;
border: 1px solid #ddd;
display: inline-block;
display: flex;
justify-content: center;
align-content: center;
}
.tr {
@ -213,6 +215,36 @@
cursor: not-allowed;
}
.th.error:hover .col-error {
display: block;
z-index: 2000;
background-color: crimson;
width: 100%;
min-height: 25%;
bottom: -25%;
transition: all 1s;
}
.col-error {
position: absolute;
display: none;
}
.mass {
display: flex;
justify-content: space-evenly;
align-items: center;
}
.mass input {
outline: none;
border: none;
}
.rbtn:disabled {
opacity: 0.7;
}
</style>
<script>
@ -238,20 +270,21 @@
th.setAttribute("col", col_id);
th.setAttribute("activated", "true");
th.innerHTML = `
<div class="col-error">La période n'est pas valide</div>
<div class="mini-form">
<div class="btngroup">
<span class="num">${col_id}</span>
<div class="btngroup" style="justify-content: flex-end;">
<button class="closeCol" onclick="removeColumn(this)">x</button>
</div>
<input type="datetime-local" id="dateStart">
<input type="datetime-local" id="dateEnd">
{{moduleimpl_select|safe}}
<select name="mass_action_${col_id}" id="mass_action_${col_id}" onchange="setEtatCol(${col_id},this.value)" disabled>
<option value="">Sélectionner une assiduité</option>
<option value="0">Présent</option>
<option value="1">Retard</option>
<option value="2">Absent</option>
</select>
<div id="mass_action_${col_id}" class="mass">
<input disabled="" type="radio" class="rbtn present" name="mass_action_${col_id}" value="present" onclick="massCol(this)">
<input disabled="" type="radio" class="rbtn retard" name="mass_action_${col_id}" value="retard" onclick="massCol(this)">
<input disabled="" type="radio" class="rbtn absent" name="mass_action_${col_id}" value="absent" onclick="massCol(this)">
<input disabled="" type="radio" class="rbtn aucun" name="mass_action_${col_id}" value="remove" onclick="massCol(this)">
</div>
</div>
`;
table
@ -277,6 +310,8 @@
})
} catch {
}
@ -285,6 +320,10 @@
getAndUpdateCol(col_id);
})
})
const sl = th.querySelector('select');
sl.addEventListener('change', () => {
editModuleImpl(sl);
})
let rows = table.querySelector(".tbody").querySelectorAll(".tr");
for (let i = 0; i < rows.length; i++) {
@ -293,17 +332,12 @@
td.classList.add("td", "etat");
const etudid = rows[i].getAttribute("etudid");
td.innerHTML = `
<div class="assi_rbtn">
<input type="radio" name="etat_${col_id}_${etudid}" value="present" disabled onchange="updateEtudAssiduite(this)">
<input type="radio" name="etat_${col_id}_${etudid}" value="retard" disabled onchange="updateEtudAssiduite(this)">
<input type="radio" name="etat_${col_id}_${etudid}" value="absent" disabled onchange="updateEtudAssiduite(this)">
<div class="assi_rbtn" etat="">
<input class="rbtn present" type="radio" name="etat_${col_id}_${etudid}" value="present" disabled onclick="updateEtudAssiduite(this)">
<input class="rbtn retard" type="radio" name="etat_${col_id}_${etudid}" value="retard" disabled onclick="updateEtudAssiduite(this)">
<input class="rbtn absent" type="radio" name="etat_${col_id}_${etudid}" value="absent" disabled onclick="updateEtudAssiduite(this)">
</div>
<br/>
<div class="assi_lbl">
<span>Present</span>
<span>Retard</span>
<span>Absent</span>
</div>
`;
@ -396,33 +430,15 @@
}
function setEtatLine(line, etatId) {
let inputs = [...line.querySelectorAll("input")]
inputs.forEach((el) => { el.checked = false })
if (etatId !== "") {
inputs[Number.parseInt(etatId)].checked = true;
inputs[Number.parseInt(etatId)].parentElement.setAttribute('etat', inputs[Number.parseInt(etatId)].value)
}
}
function getEtatCol(colId) {
const etats = {};
const tds = [...document.querySelectorAll(`.td[colid='${colId}']`)]
tds.forEach((td) => {
const tr = td.parentElement
const etudid = tr.getAttribute("etudid");
let inputs = [...td.querySelectorAll("input")]
etatInput = inputs.filter((e) => e.checked).pop()
if (etatInput == undefined) {
etats[etudid] = "";
} else {
etats[etudid] = etatInput.value;
}
})
return etats;
}
function _createAssiduites(inputDeb, inputFin, moduleSelect, etudid, etat, colId) {
if (moduleSelect == "") {
return {
@ -444,129 +460,9 @@
}
}
function getAndVerify() {
const assiduites = [];
const cols = [...document.querySelectorAll("[col]")];
const errors = [];
cols.forEach((col) => {
const col_id = col.getAttribute("col");
const etats = getEtatCol(col_id);
const inputDeb = col.querySelector("#dateStart").value;
const inputFin = col.querySelector("#dateEnd").value;
const moduleSelect = col.querySelector("#moduleimpl_select,.dynaSelect").value;
const d_debut = moment(inputDeb);
const d_fin = moment(inputFin);
if (inputDeb == "" || inputFin == "" || d_debut > d_fin) {
errors.push(`La période de la colonne n°${col_id} n'est pas valide`);
return;
}
{% if periode %}
const testPeriode = [
d_debut.isBefore("{{periode.deb}}"),
d_debut.isAfter("{{periode.fin}}"),
d_fin.isBefore("{{periode.deb}}"),
d_fin.isAfter("{{periode.fin}}"),
]
if (testPeriode.some((e) => e)) {
errors.push(`La période de la colonne n°${col_id} n'est pas dans le semestre`);
return;
}
{% endif %}
if (window.forceModule && moduleSelect == "") {
errors.push(`Le module de la colonne n°${col_id} n'a pas été entré. (Préférence de semestre)`);
return;
}
// TODO Mettre une erreur lorsque assiduité forcé (pref)
Object.keys(etats).forEach((key) => {
const etat = etats[key];
if (etat != "") {
assiduites.push(_createAssiduites(inputDeb, inputFin, moduleSelect, key, etat, col_id))
}
})
});
if (errors.length > 0) {
const texte = document.createElement("div");
errors.map((err) => document.createTextNode(err)).forEach((err) => {
texte.appendChild(err);
texte.appendChild(document.createElement('br'));
})
openAlertModal("Erreur(s) détéctée(s)", texte)
} else {
if (assiduites.length > 0) {
createAllAssiduites(assiduites);
}
}
}
function createAllAssiduites(createQueue) {
if (createQueue.length < 0)
return;
const path = getUrl() + `/api/assiduites/create`;
sync_post(
path,
createQueue,
(data, status) => {
const { success, errors } = data;
const indexes = [...Object.keys(errors)];
if (indexes.length > 0) {
const incriminated = indexes.map((i) => {
return createQueue[Number.parseInt(i)];
})
const error_message = document.createElement('div');
for (let i = 0; i < incriminated.length; i++) {
const err = errors[indexes[i]];
const crimi = incriminated[i];
const nom = document.querySelector(`[etudid='${crimi.etudid}']`).firstElementChild.textContent.trim();
const col = crimi.colid;
const div = document.createElement('div');
div.classList.add("err-assi")
const span = document.createElement("span");
span.setAttribute("title", err);
span.textContent = "ℹ️"
const span2 = document.createElement("span");
span2.textContent = `L'assiduité (Colonne n°${col}) de ${nom} n'a pas pu être enregistrée`;
div.appendChild(span2);
div.appendChild(span);
error_message.appendChild(div);
}
openAlertModal("Certaines assiduités non pas été enregistrées", error_message)
} else {
openAlertModal("Tous les assiduités ont bien été enregistrée", document.createTextNode(""), null, "#09AD2A")
}
},
(data, status) => {
//error
console.error(data, status);
}
);
}
function getAssiduitesCol(col_id, get = true) {
const col = document.querySelector(`[col='${col_id}']`);
const etats = getEtatCol(col_id);
const colErr = col.querySelector('.col-error')
const inputDeb = col.querySelector("#dateStart").value;
const inputFin = col.querySelector("#dateEnd").value;
@ -575,8 +471,8 @@
const d_fin = moment(inputFin).tz(TIMEZONE);
if (inputDeb == "" || inputFin == "" || d_debut > d_fin) {
//errors.push(`La période de la colonne n°${col_id} n'est pas valide`);
if (inputDeb == "" || inputFin == "" || d_debut >= d_fin) {
colErr.textContent = `La période de la colonne n'est pas valide`;
return 0x2;
}
@ -590,13 +486,13 @@
d_fin.isAfter(t_after),
]
if (testPeriode.some((e) => e)) {
//errors.push(`La période de la colonne n°${col_id} n'est pas dans le semestre`);
colErr.textContent = `La période de la colonne n'est pas dans le semestre`;
return 0x3;
}
{% endif %}
if (window.forceModule && moduleSelect == "") {
//errors.push(`Le module de la colonne n°${col_id} n'a pas été entré. (Préférence de semestre)`);
colErr.textContent = `Le module de la colonne n'a pas été entré. (Préférence de semestre)`;
return 0x4;
}
@ -638,6 +534,7 @@
setEtatLine(td, "")
const etu = td.parentElement.getAttribute('etudid');
const conflits = getAssiduitesConflict(etu, periode);
if (conflits.length == 0) {
td.setAttribute('assiduite_id', "-1");
} else if (conflits.length == 1 && isConflictSameAsPeriod(conflits[0], periode)) {
@ -650,7 +547,7 @@
const inputs = [...td.querySelectorAll('input')];
inputs.forEach((i) => {
i.disabled = true;
i.addEventListener('click', () => { /*updateEtudAssiduite(i)*/ });
})
}
})
@ -669,13 +566,17 @@
}
function getAndUpdateCol(colid) {
const column = document.querySelector(`[col='${colid}']`);
if (getAssiduitesCol(colid) == 0) {
document.querySelector(`[col='${colid}']`).classList.remove('error');
document.getElementById(`mass_action_${colid}`).removeAttribute('disabled')
column.classList.remove('error');
document.getElementById(`mass_action_${colid}`).querySelectorAll('.rbtn').forEach((el) => {
el.removeAttribute('disabled');
})
updateAssiduitesCol(colid)
} else {
const column = document.querySelector(`[col='${colid}']`)
document.getElementById(`mass_action_${colid}`).setAttribute('disabled', 'true')
document.getElementById(`mass_action_${colid}`).querySelectorAll('.rbtn').forEach((el) => {
el.setAttribute('disabled', '');
})
column.classList.add('error');
const tds = [...document.querySelectorAll(`.td[colid='${colid}']`)]
tds.forEach((el) => {
@ -729,9 +630,7 @@
break;
}
const nom_prenom = `${etuds[etudid].nom.toUpperCase()} ${etuds[
etudid
].prenom.capitalize()}`;
const nom_prenom = document.querySelector(`.tr[etudid="${etudid}"] .td span`).textContent
const span = document.createElement("span");
span.innerHTML = etatAffiche.replace("%etud%", nom_prenom);
@ -753,6 +652,7 @@
case "-1":
// création d'une nouvelle assiduité
const assiduite = _createAssiduites(deb, fin, moduleimpl, etudid, etat, colid);
rbtn.parentElement.setAttribute('etat', etat);
asyncCreateAssiduite(assiduite, (data) => {
if (Object.keys(data.success).length > 0) {
const assi_id = data.success['0'].assiduite_id;
@ -797,24 +697,37 @@
};
conflitResolver.open();
rbtn.checked = false;
break;
default:
// Une assiduité est déjà connue -> modifier assiduité
const edit = {
moduleimpl_id: moduleimpl == "" ? null : moduleimpl,
etat: etat,
assiduite_id: Number.parseInt(assi),
if (etat == rbtn.parentElement.getAttribute('etat')) {
asyncRemoveAssiduite(assi, () => {
etudLine.setAttribute('assiduite_id', "-1");
rbtn.parentElement.setAttribute('etat', "")
assiduites[etudid] = assiduites[etudid].filter((el) => { return el.assiduite_id != assi })
updateAllCol()
launchToast(etudid, "remove");
})
} else {
const edit = {
moduleimpl_id: moduleimpl == "" ? null : moduleimpl,
etat: etat,
assiduite_id: Number.parseInt(assi),
}
asyncEditAssiduite(edit, (data) => {
const obj = getAssiduite(etudid, assi);
obj.moduleimpl = edit.moduleimpl_id;
obj.etat = edit.etat;
launchToast(etudid, etat);
rbtn.parentElement.setAttribute('etat', etat)
})
}
asyncEditAssiduite(edit, (data) => {
const obj = getAssiduite(etudid, assi);
obj.moduleimpl = edit.moduleimpl_id;
obj.etat = edit.etat;
launchToast(etudid, etat);
})
break;
}
@ -837,6 +750,19 @@
);
}
function asyncRemoveAssiduite(assi, callback = () => { }) {
const path = getUrl() + `/api/assiduite/delete`;
async_post(
path,
[assi],
callback,
(data, status) => {
//error
console.error(data, status);
}
);
}
function asyncEditAssiduite(assi, callback = () => { }) {
const path = getUrl() + `/api/assiduite/${assi.assiduite_id}/edit`;
async_post(
@ -850,6 +776,200 @@
);
}
function asyncCreateAssiduiteGroup(assis, callback = () => { }) {
const path = getUrl() + `/api/assiduites/create`;
return async_post(
path,
assis,
callback,
(data, status) => {
//error
console.error(data, status);
}
);
}
function asyncEditAssiduiteGroup(assis, callback = () => { }) {
const path = getUrl() + `/api/assiduites/edit`;
return async_post(
path,
assis,
callback,
(data, status) => {
console.error(data, status);
}
);
}
function asyncDeleteAssiduiteGroup(assis, callback = () => { }) {
const path = getUrl() + `/api/assiduite/delete`;
async_post(
path,
assis,
callback,
(data, status) => {
//error
console.error(data, status);
}
);
}
function massCol(rbtn) {
const colid = rbtn.name.replace("mass_action_", "");
const col = document.querySelector(`[col="${colid}"]`);
const etat = rbtn.value;
const { moduleimpl, deb, fin } = getAssiduitesCol(colid, false);
const lines = [...document.querySelectorAll(`[assiduite_id][colid='${colid}']`)].filter((el) => {
return el.getAttribute('assiduite_id') != "conflit";
})
const toCreate = lines.filter((el) => { return el.getAttribute('assiduite_id') == '-1' })
const toEdit = lines.filter((el) => { return el.getAttribute('assiduite_id') != '-1' })
if (etat == "remove") {
const removeList = []
toEdit.forEach((el) => {
removeList.push(Number.parseInt(el.getAttribute('assiduite_id')))
})
asyncDeleteAssiduiteGroup(removeList, () => {
const span = document.createElement("span");
if (removeList.length > 0) {
span.innerHTML = `${removeList.length} assiduités ont été supprimées.`;
} else {
span.innerHTML = `Aucune assiduité n'a été supprimée.`;
}
toEdit.forEach((el) => {
const assi_id = Number.parseInt(el.getAttribute("assiduite_id"));
const etudid = Number.parseInt(el.parentElement.getAttribute('etudid'));
assiduites[etudid] = assiduites[etudid].filter((a) => { return a.assiduite_id != assi_id });
})
updateAllCol()
pushToast(generateToast(span, getToastColorFromEtat("remove"), 5));
})
} else {
const createList = []
const editList = []
toCreate.forEach((el) => {
const etudid = Number.parseInt(el.parentElement.getAttribute('etudid'));
createList.push(_createAssiduites(deb, fin, moduleimpl, etudid, etat, colid))
})
toEdit.forEach((el) => {
const edit = {
moduleimpl_id: moduleimpl == "" ? null : moduleimpl,
etat: etat,
assiduite_id: Number.parseInt(el.getAttribute('assiduite_id')),
etudid: Number.parseInt(el.parentElement.getAttribute('etudid')),
}
editList.push(edit);
})
$.when(
asyncCreateAssiduiteGroup(createList, (data) => {
}),
asyncEditAssiduiteGroup(editList, (data) => {
})
).done((c, e) => {
Object.keys(c[0].success).forEach((k) => {
const assiduite = createList[Number.parseInt(k)];
assiduite["assiduite_id"] = c[0].success[k].assiduite_id;
assiduites[assiduite.etudid].push(assiduite);
})
Object.keys(e[0].success).forEach((k) => {
const { etudid, assiduite_id, moduleimpl_id, etat } = editList[Number.parseInt(k)]
assiduites[etudid].map((a) => {
if (a.assiduite_id == assiduite_id) {
a.moduleimpl_id = moduleimpl_id
a.etat = etat.toUpperCase();
} else {
return a
}
})
})
updateAllCol();
const count = toCreate.length + toEdit.length;
const etatAffiche =
etat.toUpperCase() == "RETARD"
? "En retard"
: etat;
const span = document.createElement("span");
if (count > 0) {
span.innerHTML = `${count} étudiants ont été mis <u><strong>${etatAffiche
.capitalize()
.trim()}</strong></u>`;
} else {
span.innerHTML = `Aucun étudiant n'a été mis <u><strong>${etatAffiche
.capitalize()
.trim()}</strong></u>`;
}
pushToast(
generateToast(
span,
getToastColorFromEtat(etat.toUpperCase()),
5
)
);
})
}
rbtn.checked = false;
}
function editModuleImpl(select) {
const col = select.parentElement.parentElement
const colid = col.getAttribute('col')
const value = select.value;
const lines = [...document.querySelectorAll(`[assiduite_id][colid='${colid}']`)].filter((el) => {
return el.getAttribute('assiduite_id') != "conflit";
})
const toEdit = lines.filter((el) => { return el.getAttribute('assiduite_id') != '-1' })
let editList = toEdit.map((e) => {
return {
assiduite_id: Number.parseInt(e.getAttribute('assiduite_id')),
etudid: Number.parseInt(e.parentElement.getAttribute('etudid')),
moduleimpl_id: value,
}
});
asyncEditAssiduiteGroup(editList, (data) => {
Object.keys(data.success).forEach((k) => {
const { etudid, assiduite_id, moduleimpl_id } = editList[Number.parseInt(k)]
assiduites[etudid].map((a) => {
if (a.assiduite_id == assiduite_id) {
a.moduleimpl_id = moduleimpl_id
} else {
return a
}
})
})
if (Object.keys(data.success).length > 0) {
const span = document.createElement("span");
span.innerHTML = `Le module a bien été changé.`;
pushToast(generateToast(span, getToastColorFromEtat("remove"), 5));
}
})
}
window.addEventListener('load', () => {
document.getElementById("addColumn").addEventListener("click", () => {
createColumn();
@ -857,6 +977,10 @@
createColumn();
setEtuds();
document.querySelectorAll('.pdp-hover').forEach((el) => {
el.src = getUrl() + `/api/etudiant/etudid/${el.getAttribute('etudid')}/photo?size=small`;
})
}, { once: true });
</script>

3
app/templates/assiduites/signal_assiduites_diff.j2
View File

@ -5,4 +5,5 @@
{% include "assiduites/alert.j2" %}
{% include "assiduites/prompt.j2" %}
{% include "assiduites/conflict.j2" %}
{% include "assiduites/conflict.j2" %}
{% include "assiduites/toast.j2" %}

2
app/templates/assiduites/timeline.j2
View File

@ -56,7 +56,7 @@
function numberToTime(num) {
const integer = Math.floor(num);
const decimal = (num % 1) * 60;
const decimal = Math.round((num % 1) * 60);
let dec = `:${decimal}`;
if (decimal < 10) {

19
app/templates/assiduites/toast.j2
View File

@ -92,6 +92,25 @@
}
function getToastColorFromEtat(etat) {
let color;
switch (etat.toUpperCase()) {
case "PRESENT":
color = "#6bdb83";
break;
case "ABSENT":
color = "#F1A69C";
break;
case "RETARD":
color = "#f0c865";
break;
default:
color = "#AAA";
break;
}
return color;
}
</script>