forked from ScoDoc/ScoDoc
Assiduites : maj calendrier
This commit is contained in:
Iziram
parent
3a963cb1b4
commit
7502acf1df
|
|
@ -201,7 +201,8 @@ async function async_get(path, success, errors) {
|
|||
throw new Error("Network response was not ok.");
|
||||
}
|
||||
} catch (error) {
|
||||
errors(error);
|
||||
console.error(error);
|
||||
if (errors) errors(error);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -249,7 +250,8 @@ async function async_post(path, data, success, errors) {
|
|||
throw new Error("Network response was not ok.");
|
||||
}
|
||||
} catch (error) {
|
||||
errors(error);
|
||||
console.error(error);
|
||||
if (errors) errors(error);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1162,7 +1164,7 @@ function getAllAssiduitesFromEtud(
|
|||
.replace("°", courant ? "&courant" : "")
|
||||
: ""
|
||||
}`;
|
||||
|
||||
//TODO Utiliser async_get au lieu de jquery
|
||||
$.ajax({
|
||||
async: true,
|
||||
type: "GET",
|
||||
|
|
@ -1744,6 +1746,8 @@ function getAllJustificatifsFromEtud(
|
|||
`/api/justificatifs/${etudid}${
|
||||
order ? "/query?order°".replace("°", courant ? "&courant" : "") : ""
|
||||
}`;
|
||||
|
||||
//TODO Utiliser async_get au lieu de jquery
|
||||
$.ajax({
|
||||
async: true,
|
||||
type: "GET",
|
||||
|
|
|
|||
|
|
@ -107,6 +107,7 @@
|
|||
|
||||
function getAssiduitesCount(dateDeb, dateFin, query) {
|
||||
const url_api = getUrl() + `/api/assiduites/${etudid}/count/query?date_debut=${dateDeb}&date_fin=${dateFin}&${query}`;
|
||||
//Utiliser async_get au lieu de Jquery
|
||||
return $.ajax({
|
||||
async: true,
|
||||
type: "GET",
|
||||
|
|
@ -120,6 +121,7 @@
|
|||
}
|
||||
|
||||
function countAssiduites(dateDeb, dateFin) {
|
||||
//TODO Utiliser Fetch when plutot que jquery
|
||||
$.when(
|
||||
getAssiduitesCount(dateDeb, dateFin, `etat=present`),
|
||||
getAssiduitesCount(dateDeb, dateFin, `etat=retard`),
|
||||
|
|
|
|||
|
|
@ -4,13 +4,23 @@
|
|||
<div class="pageContent">
|
||||
{{minitimeline | safe }}
|
||||
<h2>Assiduité de {{sco.etud.nomprenom}}</h2>
|
||||
|
||||
<div class="options">
|
||||
<label for="show_pres">afficher les présences</label><input type="checkbox" id="show_pres" name="show_pres">
|
||||
<label for="show_reta">afficher les retards</label><input type="checkbox" name="show_reta" id="show_reta">
|
||||
<label for="mode_demi">mode demi journée</label><input type="checkbox" name="mode_demi" id="mode_demi">
|
||||
</div>
|
||||
|
||||
<div class="calendrier">
|
||||
|
||||
</div>
|
||||
<div class="annee">
|
||||
<span>Année scolaire 2022-2023 Changer année: </span>
|
||||
<span id="label-annee">Année scolaire 2022-2023</span><span id="label-changer" style="margin-left: 5px;">Changer
|
||||
année: </span>
|
||||
<select name="" id="annee" onchange="setterAnnee(this.value)">
|
||||
</select>
|
||||
|
||||
<span id="label-nom">Assiduité de {{sco.etud.nomprenom}}</span>
|
||||
</div>
|
||||
|
||||
<div class="help">
|
||||
|
|
@ -34,7 +44,37 @@
|
|||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--color-present: #6bdb83;
|
||||
--color-absent: #F1A69C;
|
||||
--color-retard: #f0c865;
|
||||
--color-nonwork: #bd81ca;
|
||||
--color-defaut: #FFF;
|
||||
}
|
||||
|
||||
.color.present {
|
||||
background-color: var(--color-present);
|
||||
}
|
||||
|
||||
.color.absent {
|
||||
background-color: var(--color-absent);
|
||||
}
|
||||
|
||||
.color.retard {
|
||||
background-color: var(--color-retard);
|
||||
}
|
||||
|
||||
.color.nonwork {
|
||||
background-color: var(--color-nonwork);
|
||||
}
|
||||
|
||||
.color {
|
||||
background-color: var(--color-defaut);
|
||||
}
|
||||
|
||||
.pageContent {
|
||||
margin-top: 1vh;
|
||||
max-width: var(--sco-content-max-width);
|
||||
|
|
@ -47,27 +87,36 @@
|
|||
border: 1px solid #444;
|
||||
}
|
||||
|
||||
.month h2 {
|
||||
.month h3 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.day {
|
||||
border: 1px solid #444;
|
||||
border-radius: 8px;
|
||||
padding: 0 5px;
|
||||
.day,
|
||||
.demi .day.color.color.nonwork {
|
||||
/* border: 1px solid #444; */
|
||||
/* border-radius: 8px; */
|
||||
text-align: center;
|
||||
margin: 2px;
|
||||
cursor: default;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
min-width: 6em;
|
||||
}
|
||||
|
||||
.day.est_just {
|
||||
border-left: 10px solid #7059FF;
|
||||
.demi .day {
|
||||
border-radius: none;
|
||||
}
|
||||
|
||||
.day.est_just.invalide {
|
||||
border-left: 10px solid #f64e4e;
|
||||
.day.est_just,
|
||||
.demi .day span.est_just {
|
||||
background-image: repeating-linear-gradient(135deg, transparent, transparent 4px, #7059FFA0 4px, #7059FFA0 8px);
|
||||
|
||||
}
|
||||
|
||||
.day.est_just.invalide,
|
||||
.demi .day span.invalide {
|
||||
background-image: repeating-linear-gradient(-135deg, transparent, transparent 4px, #d61616A0 4px, #d61616A0 8px);
|
||||
}
|
||||
|
||||
.day .dayline {
|
||||
|
|
@ -107,6 +156,87 @@
|
|||
z-index: 2;
|
||||
transform: translateX(200%);
|
||||
}
|
||||
|
||||
#label-nom {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.demi .day {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.demi .day>span {
|
||||
display: block;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
border: 1px solid black;
|
||||
/*border-radius: 3px;*/
|
||||
}
|
||||
|
||||
.demi .day>span:first-of-type {
|
||||
width: 3em;
|
||||
min-width: 3em;
|
||||
}
|
||||
|
||||
.options>* {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.color.present {
|
||||
background-color: var(--color-present) !important;
|
||||
print-color-adjust: exact !important;
|
||||
}
|
||||
|
||||
.color.absent {
|
||||
background-color: var(--color-absent) !important;
|
||||
print-color-adjust: exact !important;
|
||||
}
|
||||
|
||||
.color.retard {
|
||||
background-color: var(--color-retard) !important;
|
||||
print-color-adjust: exact !important;
|
||||
}
|
||||
|
||||
.color.nonwork {
|
||||
background-color: var(--color-nonwork) !important;
|
||||
print-color-adjust: exact !important;
|
||||
}
|
||||
|
||||
.day.est_just,
|
||||
.demi .day span.est_just {
|
||||
background-image: repeating-linear-gradient(135deg, transparent, transparent 4px, #7059FFA0 4px, #7059FFA0 8px) !important;
|
||||
print-color-adjust: exact !important;
|
||||
|
||||
}
|
||||
|
||||
.day.est_just.invalide,
|
||||
.demi .day span.invalide {
|
||||
print-color-adjust: exact !important;
|
||||
background-image: repeating-linear-gradient(-135deg, transparent, transparent 4px, #d61616A0 4px, #d61616A0 8px) !important;
|
||||
}
|
||||
|
||||
|
||||
#sidebar,
|
||||
.help,
|
||||
h2,
|
||||
#annee,
|
||||
#label-changer,
|
||||
.options {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#label-nom {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#gtrcontent {
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
|
@ -176,7 +306,7 @@
|
|||
let color;
|
||||
switch (etat.toUpperCase()) {
|
||||
case "PRESENT":
|
||||
color = "#6bdb83";
|
||||
color = "";
|
||||
break;
|
||||
case "ABSENT":
|
||||
color = "#F1A69C";
|
||||
|
|
@ -196,6 +326,7 @@
|
|||
|
||||
function generateCalendar(assiduitiesByDay, nonWorkdays = []) {
|
||||
const calendar = document.querySelector('.calendrier')
|
||||
const options = getOptions();
|
||||
calendar.innerHTML = ""
|
||||
|
||||
const days = {
|
||||
|
|
@ -211,23 +342,25 @@
|
|||
Object.keys(assiduitiesByDay).forEach((month) => {
|
||||
const monthEl = document.createElement('div')
|
||||
monthEl.classList.add("month")
|
||||
const title = document.createElement('h2');
|
||||
const title = document.createElement('h3');
|
||||
title.textContent = `${month.capitalize()}`;
|
||||
monthEl.appendChild(title)
|
||||
|
||||
const daysEl = document.createElement('div')
|
||||
daysEl.classList.add('days');
|
||||
|
||||
if (options.mode_demi) daysEl.classList.add("demi");
|
||||
Object.keys(assiduitiesByDay[month]).forEach((date) => {
|
||||
let dayAssiduities = assiduitiesByDay[month][date].assiduites;
|
||||
let dayJustificatifs = assiduitiesByDay[month][date].justificatifs;
|
||||
let color = "white";
|
||||
let color = "";
|
||||
|
||||
if (dayAssiduities.some((a) => a.etat.toLowerCase() === "absent")) color = "absent";
|
||||
else if (dayAssiduities.some((a) => a.etat.toLowerCase() === "retard"))
|
||||
else if (dayAssiduities.some((a) => a.etat.toLowerCase() === "retard") && options.show_reta)
|
||||
color = "retard";
|
||||
else if (dayAssiduities.some((a) => a.etat.toLowerCase() === "present"))
|
||||
else if (dayAssiduities.some((a) => a.etat.toLowerCase() === "present") && options.show_pres)
|
||||
color = "present";
|
||||
|
||||
|
||||
let est_just = ""
|
||||
if (dayJustificatifs.some((j) => j.etat.toLowerCase() === "valide")) {
|
||||
est_just = "est_just";
|
||||
|
|
@ -239,15 +372,108 @@
|
|||
let dayOfWeek = momentDate.getDay();
|
||||
dayOfWeek = days[dayOfWeek];
|
||||
|
||||
|
||||
if (nonWorkdays.includes(dayOfWeek.toLowerCase())) color = "nonwork";
|
||||
|
||||
let isWorkDay = nonWorkdays.includes(dayOfWeek.toLowerCase());
|
||||
const day = document.createElement('div');
|
||||
day.className = `day ${est_just}`
|
||||
day.className = `day`;
|
||||
if (isWorkDay) {
|
||||
color = "nonwork";
|
||||
} else if (!options.mode_demi) {
|
||||
day.className = `day ${est_just}`;
|
||||
}
|
||||
|
||||
day.style.backgroundColor = getDayColor(color);
|
||||
if (options.mode_demi && !isWorkDay) {
|
||||
est_just = []
|
||||
// affichage n° jour + matin + aprem
|
||||
|
||||
day.textContent = `${dayOfWeek} ${dayOfMonth}`;
|
||||
const span_jour = document.createElement("span")
|
||||
span_jour.textContent = dayOfMonth + dayOfWeek[0];
|
||||
|
||||
const span_matin = document.createElement("span");
|
||||
span_matin.classList.add("color");
|
||||
const matin = [new Date(date), new Date(date)]
|
||||
color = ""
|
||||
matin[0].setHours(0, 0, 0, 0)
|
||||
matin[1].setHours(12, 59, 59)
|
||||
|
||||
const assiduitesMatin = dayAssiduities.filter((el) => {
|
||||
const deb = new Date(el.date_debut);
|
||||
const fin = new Date(el.date_fin);
|
||||
return deb.isBetween(matin[0], matin[1]) || fin.isBetween(matin[0], matin[1])
|
||||
})
|
||||
const justificatifsMatin = dayJustificatifs.filter((el) => {
|
||||
const deb = new Date(el.date_debut);
|
||||
const fin = new Date(el.date_fin);
|
||||
return deb.isBetween(matin[0], matin[1]) || fin.isBetween(matin[0], matin[1])
|
||||
})
|
||||
|
||||
if (assiduitesMatin.some((a) => a.etat.toLowerCase() === "absent")) color = "absent";
|
||||
else if (assiduitesMatin.some((a) => a.etat.toLowerCase() === "retard") && options.show_reta)
|
||||
color = "retard";
|
||||
else if (assiduitesMatin.some((a) => a.etat.toLowerCase() === "present") && options.show_pres)
|
||||
color = "present";
|
||||
|
||||
if (color != "") {
|
||||
span_matin.classList.add(color);
|
||||
}
|
||||
|
||||
if (justificatifsMatin.some((j) => j.etat.toLowerCase() === "valide")) {
|
||||
est_just = ["est_just"];
|
||||
} else if (justificatifsMatin.some((j) => j.etat.toLowerCase() !== "valide")) {
|
||||
est_just = ["est_just", "invalide"];
|
||||
}
|
||||
|
||||
span_matin.classList.add(...est_just)
|
||||
|
||||
|
||||
est_just = []
|
||||
const span_aprem = document.createElement("span");
|
||||
span_aprem.classList.add("color");
|
||||
const aprem = [new Date(date), new Date(date)]
|
||||
color = ""
|
||||
aprem[0].setHours(13, 0, 0, 0)
|
||||
aprem[1].setHours(23, 59, 59)
|
||||
|
||||
const assiduitesAprem = dayAssiduities.filter((el) => {
|
||||
const deb = new Date(el.date_debut);
|
||||
const fin = new Date(el.date_fin);
|
||||
return deb.isBetween(aprem[0], aprem[1]) || fin.isBetween(aprem[0], aprem[1])
|
||||
})
|
||||
|
||||
const justificatifsAprem = dayJustificatifs.filter((el) => {
|
||||
const deb = new Date(el.date_debut);
|
||||
const fin = new Date(el.date_fin);
|
||||
return deb.isBetween(aprem[0], aprem[1]) || fin.isBetween(aprem[0], aprem[1])
|
||||
})
|
||||
|
||||
if (assiduitesAprem.some((a) => a.etat.toLowerCase() === "absent")) color = "absent";
|
||||
else if (assiduitesAprem.some((a) => a.etat.toLowerCase() === "retard") && options.show_reta)
|
||||
color = "retard";
|
||||
else if (assiduitesAprem.some((a) => a.etat.toLowerCase() === "present") && options.show_pres)
|
||||
color = "present";
|
||||
|
||||
if (color != "") {
|
||||
span_aprem.classList.add(color);
|
||||
}
|
||||
|
||||
if (justificatifsAprem.some((j) => j.etat.toLowerCase() === "valide")) {
|
||||
est_just = ["est_just"];;
|
||||
} else if (justificatifsAprem.some((j) => j.etat.toLowerCase() !== "valide")) {
|
||||
est_just = ["est_just", "invalide"];;
|
||||
}
|
||||
|
||||
span_matin.classList.add(...est_just)
|
||||
|
||||
day.appendChild(span_jour)
|
||||
day.appendChild(span_matin)
|
||||
day.appendChild(span_aprem)
|
||||
|
||||
} else {
|
||||
day.classList.add("color")
|
||||
if (color != "") {
|
||||
day.classList.add(color);
|
||||
}
|
||||
day.textContent = `${dayOfWeek} ${dayOfMonth}`;
|
||||
}
|
||||
|
||||
if (!nonWorkdays.includes(dayOfWeek.toLowerCase()) && dayAssiduities.length > 0) {
|
||||
const cache = document.createElement('div')
|
||||
|
|
@ -255,7 +481,6 @@
|
|||
cache.appendChild(
|
||||
createMiniTimeline(dayAssiduities, date)
|
||||
)
|
||||
|
||||
day.appendChild(cache)
|
||||
}
|
||||
|
||||
|
|
@ -271,13 +496,19 @@
|
|||
const url_api =
|
||||
getUrl() +
|
||||
`/api/assiduites/${etudid}/query?date_debut=${deb}&date_fin=${fin}`;
|
||||
async_get(url_api, (data, status) => {
|
||||
if (status === "success") {
|
||||
callback(data);
|
||||
}
|
||||
async_get(url_api, (data) => {
|
||||
callback(data);
|
||||
});
|
||||
}
|
||||
|
||||
function getOptions() {
|
||||
return {
|
||||
"show_pres": document.getElementById("show_pres").checked,
|
||||
"show_reta": document.getElementById("show_reta").checked,
|
||||
"mode_demi": document.getElementById("mode_demi").checked,
|
||||
}
|
||||
}
|
||||
|
||||
function getEtudJustificatifs(deb, fin) {
|
||||
let list = [];
|
||||
const url_api =
|
||||
|
|
@ -293,7 +524,6 @@
|
|||
}
|
||||
|
||||
function generate(annee) {
|
||||
|
||||
if (annee < 1999 || annee > 2999) {
|
||||
openAlertModal("Année impossible", document.createTextNode("L'année demandé n'existe pas."));
|
||||
return;
|
||||
|
|
@ -315,10 +545,11 @@
|
|||
|
||||
function setterAnnee(annee) {
|
||||
annee = parseInt(annee);
|
||||
document.querySelector('.annee span').textContent = `Année scolaire ${annee}-${annee + 1} Changer année: `
|
||||
document.querySelector('.annee #label-annee').textContent = `Année scolaire ${annee}-${annee + 1}`
|
||||
generate(annee)
|
||||
|
||||
}
|
||||
|
||||
const defAnnee = {{ annee }}
|
||||
let annees = {{ annees | safe }}
|
||||
annees = annees.filter((x, i) => annees.indexOf(x) === i)
|
||||
|
|
@ -335,6 +566,12 @@
|
|||
}
|
||||
select.appendChild(opt)
|
||||
})
|
||||
|
||||
document.querySelectorAll(".options input").forEach((e) => {
|
||||
e.addEventListener("click", () => {
|
||||
setterAnnee(select.value)
|
||||
})
|
||||
})
|
||||
setterAnnee(defAnnee)
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -535,10 +535,12 @@ def calendrier_etud():
|
|||
)
|
||||
|
||||
# Récupération des années d'étude de l'étudiant
|
||||
annees: list[int] = sorted(
|
||||
[ins.formsemestre.date_debut.year for ins in etud.formsemestre_inscriptions],
|
||||
reverse=True,
|
||||
)
|
||||
annees: list[int] = []
|
||||
for ins in etud.formsemestre_inscriptions:
|
||||
annees.extend(
|
||||
(ins.formsemestre.date_debut.year, ins.formsemestre.date_fin.year)
|
||||
)
|
||||
annees = sorted(annees, reverse=True)
|
||||
|
||||
# Transformation en une liste "json"
|
||||
# (sera utilisé pour générer le selecteur d'année)
|
||||
|
|
|
|||
Loading…
Reference in New Issue