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

Assiduites : Calendrier des assiduités

Browse Source
This commit is contained in:
iziram 2023-06-22 16:25:13 +02:00
parent c0b750dcfb
commit 280ceaa255
7 changed files with 431 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/scodoc/html_sidebar.py
View File

@ -136,7 +136,7 @@ def sidebar(etudid: int = None):
)
H.append(
f"""
<li><a href="{ url_for('absences.CalAbs', scodoc_dept=g.scodoc_dept, etudid=etudid) }">Calendrier</a></li>
<li><a href="{ url_for('assiduites.calendrier_etud', scodoc_dept=g.scodoc_dept, etudid=etudid) }">Calendrier</a></li>
<li><a href="{ url_for('assiduites.liste_assiduites_etud', scodoc_dept=g.scodoc_dept, etudid=etudid) }">Liste</a></li>
</ul>
"""

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

@ -170,6 +170,21 @@ function sync_get(path, success, errors) {
error: errors,
});
}
/**
* Fait une requête GET de façon asynchrone
* @param {String} path adresse distante
* @param {CallableFunction} success fonction à effectuer en cas de succès
* @param {CallableFunction} errors fonction à effectuer en cas d'échec
*/
function async_get(path, success, errors) {
$.ajax({
async: true,
type: "GET",
url: path,
success: success,
error: errors,
});
}
/**
* Fait une requête POST de façon synchrone
* @param {String} path adresse distante

338
app/templates/assiduites/pages/calendrier.j2 Normal file
View File

@ -0,0 +1,338 @@
{% block pageContent %}
{% include "assiduites/widgets/alert.j2" %}
<div class="pageContent">
{{minitimeline | safe }}
<h2>Assiduités de {{sco.etud.nomprenom}}</h2>
<div class="calendrier">
</div>
<div class="annee">
<span>Année scolaire 2022-2023 Changer année: </span>
<select name="" id="annee" onchange="setterAnnee(this.value)">
</select>
</div>
</div>
<style>
.pageContent {
margin-top: 1vh;
max-width: var(--sco-content-max-width);
}
.calendrier {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
border: 1px solid #444;
}
.month h2 {
text-align: center;
}
.day {
border: 1px solid #444;
border-radius: 8px;
padding: 0 5px;
text-align: center;
margin: 2px;
cursor: default;
font-size: 12px;
position: relative;
}
.day.est_just {
border-left: 10px solid #7059FF;
}
.day.est_just.invalide {
border-left: 10px solid #f64e4e;
}
.day .dayline {
position: absolute;
display: none;
left: -237%;
bottom: -420%;
z-index: 50;
width: 250px;
height: 75px;
background-color: #dedede;
border-radius: 15px;
padding: 5px;
}
.day:hover .dayline {
display: block;
}
.dayline .mini-timeline {
margin-top: 14%;
}
.dayline .mini_tick {
position: absolute;
text-align: center;
top: 0;
transform: translateY(-110%);
z-index: 50;
}
.dayline .mini_tick::after {
display: block;
content: "|";
position: absolute;
bottom: -69%;
z-index: 2;
transform: translateX(200%);
}
</style>
<script>
function getDaysBetweenDates(start, end) {
let now = moment(start);
let dates = [];
while (now.isSameOrBefore(end)) {
dates.push(now.clone());
now.add(1, "days");
}
return dates;
}
function organizeByMonth(dates) {
let datesByMonth = {};
dates.forEach((date) => {
let month = date.format("MMMM"); // Obtenir le mois
if (!datesByMonth[month]) {
datesByMonth[month] = [];
}
datesByMonth[month].push(date);
});
return datesByMonth;
}
function organizeAssiduitiesByDay(datesByMonth, assiduities, justificatifs) {
let assiduitiesByDay = {};
Object.keys(datesByMonth).forEach((month) => {
assiduitiesByDay[month] = {};
datesByMonth[month].forEach((date) => {
let dayAssiduities = assiduities.filter((assiduity) => {
return moment.tz(date, TIMEZONE).isBetween(
moment.tz(assiduity.date_debut, TIMEZONE),
moment.tz(assiduity.date_fin, TIMEZONE),
"day",
"[]"
)
});
let dayJustificatifs = justificatifs.filter((justif) => {
return moment.tz(date, TIMEZONE).isBetween(
moment.tz(justif.date_debut, TIMEZONE),
moment.tz(justif.date_fin, TIMEZONE),
"day",
"[]"
)
});
assiduitiesByDay[month][date.format("YYYY-MM-DD")] = {
assiduites: dayAssiduities,
justificatifs: dayJustificatifs
};
});
});
return assiduitiesByDay;
}
function getDayColor(etat) {
let color;
switch (etat.toUpperCase()) {
case "PRESENT":
color = "#6bdb83";
break;
case "ABSENT":
color = "#F1A69C";
break;
case "RETARD":
color = "#f0c865";
break;
case "NONWORK":
color = "#bd81ca"
break;
default:
color = "#FFF";
break;
}
return color;
}
function generateCalendar(assiduitiesByDay, nonWorkdays = []) {
const calendar = document.querySelector('.calendrier')
calendar.innerHTML = ""
const days = {
Mon: "Lun",
Tue: "Mar",
Wed: "Mer",
Thu: "Jeu",
Fri: "Ven",
Sat: "Sam",
Sun: "Dim",
};
const months = {
January: "Jan.",
February: "Fev.",
March: "Mar.",
April: "Avr.",
May: "Mai",
June: "Juin",
July: "Juil.",
August: "Août",
September: "Sep.",
October: "Oct.",
November: "Nov.",
December: "Déc.",
};
Object.keys(assiduitiesByDay).forEach((month) => {
const monthEl = document.createElement('div')
monthEl.classList.add("month")
const title = document.createElement('h2');
title.textContent = `${months[month]}`;
monthEl.appendChild(title)
const daysEl = document.createElement('div')
daysEl.classList.add('days');
Object.keys(assiduitiesByDay[month]).forEach((date) => {
let dayAssiduities = assiduitiesByDay[month][date].assiduites;
let dayJustificatifs = assiduitiesByDay[month][date].justificatifs;
let color = "white";
if (dayAssiduities.some((a) => a.etat.toLowerCase() === "absent")) color = "absent";
else if (dayAssiduities.some((a) => a.etat.toLowerCase() === "retard"))
color = "retard";
else if (dayAssiduities.some((a) => a.etat.toLowerCase() === "present"))
color = "present";
let est_just = ""
if (dayJustificatifs.some((j) => j.etat.toLowerCase() === "valide")) {
est_just = "est_just";
} else if (dayJustificatifs.some((j) => j.etat.toLowerCase() !== "valide")) {
est_just = "est_just invalide";
}
const momentDate = moment.tz(date, TIMEZONE);
let dayOfMonth = momentDate.format("D");
let dayOfWeek = momentDate.format("ddd");
dayOfWeek = days[dayOfWeek];
if (nonWorkdays.includes(dayOfWeek.toLowerCase())) color = "nonwork";
const day = document.createElement('div');
day.className = `day ${est_just}`
day.style.backgroundColor = getDayColor(color);
day.textContent = `${dayOfWeek} ${dayOfMonth}`;
if (!nonWorkdays.includes(dayOfWeek.toLowerCase())) {
const cache = document.createElement('div')
cache.classList.add('dayline');
cache.appendChild(
createMiniTimeline(dayAssiduities, date)
)
day.appendChild(cache)
}
daysEl.appendChild(day);
});
monthEl.appendChild(daysEl)
calendar.appendChild(monthEl)
});
}
function getEtudAssiduites(deb, fin, callback = () => { }) {
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);
}
});
}
function getEtudJustificatifs(deb, fin) {
let list = [];
const url_api =
getUrl() +
`/api/justificatifs/${etudid}/query?date_debut=${deb}&date_fin=${fin}`;
sync_get(url_api, (data, status) => {
if (status === "success") {
list = data;
}
});
return list
}
function generate(annee) {
if (annee < 1999 || annee > 2999) {
openAlertModal("Année impossible", document.createTextNode("L'année demandé n'existe pas."));
return;
}
const bornes = {
deb: `${annee}-09-01T00:00`,
fin: `${annee + 1}-06-30T23:59`
}
let assiduities = getEtudAssiduites(bornes.deb, bornes.fin, (data) => {
let dates = getDaysBetweenDates(bornes.deb, bornes.fin);
let datesByMonth = organizeByMonth(dates);
const justifs = getEtudJustificatifs(bornes.deb, bornes.fin);
console.log(justifs)
let assiduitiesByDay = organizeAssiduitiesByDay(datesByMonth, data, justifs);
generateCalendar(assiduitiesByDay, nonwork);
});
}
function setterAnnee(annee) {
annee = parseInt(annee);
document.querySelector('.annee span').textContent = `Année scolaire ${annee}-${annee + 1} Changer année: `
generate(annee)
}
const defAnnee = {{ annee }}
const etudid = {{ sco.etud.id }};
const nonwork = [{{ nonworkdays | safe }}];
window.onload = () => {
const select = document.querySelector('#annee');
for (let i = defAnnee + 1; i > defAnnee - 6; i--) {
const opt = document.createElement("option");
opt.value = i + "",
opt.textContent = i + "";
if (i === defAnnee) {
opt.selected = true;
}
select.appendChild(opt)
}
setterAnnee(defAnnee)
};
</script>
{% endblock pageContent %}

41
app/templates/assiduites/widgets/minitimeline.j2
View File

@ -11,9 +11,9 @@
* @param {Array[Assiduité]} assiduitesArray
* @returns {HTMLElement} l'élément correspondant à la mini timeline
*/
function createMiniTimeline(assiduitesArray) {
function createMiniTimeline(assiduitesArray, day = null) {
const array = [...assiduitesArray];
const dateiso = document.getElementById("tl_date").value;
const dateiso = day == null ? document.getElementById("tl_date").value : day;
const timeline = document.createElement("div");
timeline.className = "mini-timeline";
if (isSingleEtud()) {
@ -26,15 +26,16 @@
timeline.appendChild(setMiniTick(timelineDate, dayStart, dayDuration));
const tlTimes = getTimeLineTimes();
const period_assi = {
date_debut: tlTimes.deb.format(),
date_fin: tlTimes.fin.format(),
etat: "CRENEAU",
};
array.push(period_assi);
if (day == null) {
const tlTimes = getTimeLineTimes();
array.push({
date_debut: tlTimes.deb.format(),
date_fin: tlTimes.fin.format(),
etat: "CRENEAU",
});
}
array.forEach((assiduité) => {
const startDate = moment(assiduité.date_debut);
@ -65,7 +66,7 @@
deb = Math.max(mt_start, deb);
fin = Math.min(mt_end, fin);
setPeriodValues(deb, fin);
if (day == null) setPeriodValues(deb, fin);
if (isSingleEtud()) {
updateSelectedSelect(getCurrentAssiduiteModuleImplId());
updateJustifyBtn();
@ -288,4 +289,24 @@
outline: 3px solid #7059FF;
pointer-events: none;
}
.mini-timeline-block.absent {
background-color: #F1A69C !important;
}
.mini-timeline-block.present {
background-color: #9CF1AF !important;
}
.mini-timeline-block.retard {
background-color: #F1D99C !important;
}
.mini-timeline-block.justified {
background-image: repeating-linear-gradient(135deg, transparent, transparent 4px, #7059FF 4px, #7059FF 8px);
}
.mini-timeline-block.invalid_justified {
background-image: repeating-linear-gradient(135deg, transparent, transparent 4px, #d61616 4px, #d61616 8px);
}
</style>

2
app/templates/assiduites/widgets/tableau_base.j2
View File

@ -478,7 +478,7 @@
const filterHead = html.querySelector('.filter-head');
filterHead.innerHTML = ""
let cols = ["entry_date", "date_debut", "date_fin", "etat", "raison"];
let cols = ["entry_date", "date_debut", "date_fin", "etat", "raison", "fichier"];
cols.forEach((k) => {
const label = document.createElement('label')

2
app/templates/sidebar.j2
View File

@ -69,7 +69,7 @@
etudid=sco.etud.id) }}">Billets</a></li>
{% endif %}
{% endif %}
<li><a href="{{ url_for('absences.CalAbs', scodoc_dept=g.scodoc_dept,
<li><a href="{{ url_for('assiduites.calendrier_etud', scodoc_dept=g.scodoc_dept,
etudid=sco.etud.id) }}">Calendrier</a></li>
<li><a href="{{ url_for('assiduites.liste_assiduites_etud', scodoc_dept=g.scodoc_dept,
etudid=sco.etud.id) }}">Liste</a></li>

44
app/views/assiduites.py
View File

@ -310,6 +310,50 @@ def ajout_justificatif_etud():
).build()
@bp.route("/CalendrierAssiduitesEtud")
@scodoc
@permission_required(Permission.ScoView)
def calendrier_etud():
"""
calendrier_etud : Affichage d'un calendrier des assiduités de l'étudiant
Args:
etudid (int): l'identifiant de l'étudiant
Returns:
str: l'html généré
"""
etudid = request.args.get("etudid", -1)
etud: Identite = Identite.query.get_or_404(etudid)
if etud.dept_id != g.scodoc_dept_id:
abort(404, "étudiant inexistant dans ce département")
header: str = html_sco_header.sco_header(
page_title="Calendrier des Assiduités",
init_qtip=True,
javascripts=[
"js/assiduites.js",
"libjs/moment.new.min.js",
"libjs/moment-timezone.js",
],
cssstyles=CSSSTYLES
+ [
"css/assiduites.css",
],
)
return HTMLBuilder(
header,
render_template(
"assiduites/pages/calendrier.j2",
sco=ScoData(etud),
annee=scu.annee_scolaire(),
nonworkdays=_non_work_days(),
minitimeline=_mini_timeline(),
),
).build()
@bp.route("/SignalAssiduiteGr")
@scodoc
@permission_required(Permission.ScoAbsChange)