1
0
forked from ScoDoc/ScoDoc
ScoDoc/app/templates/assiduites/widgets/minitimeline.j2

111 lines
4.5 KiB
Plaintext
Raw Normal View History

2023-04-17 15:44:55 +02:00
<div class="assiduite-bubble">
</div>
<script>
const mt_start = {{ t_start }};
const mt_end = {{ t_end }};
/**
* Création de la minitiline d'un étudiant
* @param {Array[Assiduité]} assiduitesArray
* @returns {HTMLElement} l'élément correspondant à la mini timeline
*/
function createMiniTimeline(assiduitesArray, day = null) {
const array = [...assiduitesArray];
const date = day == null ? $("#date").datepicker("getDate") : new Date(day);
const timeline = document.createElement("div");
timeline.className = "mini-timeline";
2023-11-20 16:55:26 +01:00
const timelineDate = date.startOf("day");
const dayStart = new Date(`${timelineDate.format("YYYY-MM-DD").substring(0,10)}T${numberToTime(mt_start)}`);
const dayEnd = new Date(`${timelineDate.format("YYYY-MM-DD").substring(0,10)}T${numberToTime(mt_end)}`);
2023-11-08 15:12:42 +01:00
const dayDuration = new Duration(dayStart, dayEnd).minutes;
timeline.appendChild(setMiniTick(timelineDate, dayStart, dayDuration));
if (day == null) {
const tlTimes = getPeriodAsDate();
array.push({
date_debut: tlTimes.deb.format(),
date_fin: tlTimes.fin.format(),
etat: "CRENEAU",
});
2023-11-20 16:55:26 +01:00
}
// Pour chaque assiduité (et pour le créneau) on vient créer un block
// le block est positionné en fonction de l'heure de début et de fin
// et prend une largeur proportionnelle à la durée de l'assiduité
array.forEach((assiduité) => {
if(assiduité.etat == "CRENEAU" && readOnly) return;
2023-11-20 16:55:26 +01:00
let startDate = new Date(Date.removeUTC(assiduité.date_debut));
let endDate = new Date(Date.removeUTC(assiduité.date_fin));
if (startDate.isBefore(dayStart)) {
2023-07-26 16:43:49 +02:00
startDate = dayEnd.clone().startOf("day").add(mt_start, "hours");
}
if (endDate.isAfter(dayEnd)) {
2023-07-26 16:43:49 +02:00
endDate = dayEnd.clone().startOf("day").add(mt_end, "hours");
}
const block = document.createElement("div");
block.className = "mini-timeline-block";
2023-11-20 16:55:26 +01:00
const duration = (new Duration(startDate, endDate)).minutes;
const startOffset = (new Duration(dayStart, startDate)).minutes;
const leftPercentage = (startOffset / dayDuration) * 100;
const widthPercentage = (duration / dayDuration) * 100;
2023-11-20 16:55:26 +01:00
block.style.left = `${leftPercentage}%`;
block.style.width = `${widthPercentage}%`;
if (assiduité.etat != "CRENEAU") {
// Si on clique dessus on veut pouvoir
// mettre à jour la timeline principale et modifier le moduleimpl_select
block.addEventListener("click", () => {
2023-11-08 15:12:42 +01:00
let deb = startDate.getHours() + startDate.getMinutes() / 60;
let fin = endDate.getHours() + endDate.getMinutes() / 60;
deb = Math.max(mt_start, deb);
fin = Math.min(mt_end, fin);
if (day == null) setPeriodValues(deb, fin);
$("#moduleimpl_select").val(getModuleImplId(assiduité))
setTimeout(()=>{
$("#moduleimpl_select").trigger("change");
}, 0)
});
//ajouter affichage assiduites on over
setupAssiduiteBubble(block, assiduité);
}
// ajout couleur justificatif
const justificatifs = assiduité.justificatifs || [];
const justified = justificatifs.some(
(justificatif) => justificatif.etat === "VALIDE"
)
if(justified) block.classList.add("est_just");
block.classList.add(assiduité.etat.toLowerCase());
if(assiduité.etat != "CRENEAU") block.classList.add("color");
timeline.appendChild(block);
});
return timeline;
}
// Ajout du "13h" sur la mini timeline
function setMiniTick(timelineDate, dayStart, dayDuration) {
2023-11-08 15:12:42 +01:00
const endDate = timelineDate.clone().startOf("day");
endDate.setHours(13, 0);
const duration = new Duration(dayStart, endDate).minutes;
const widthPercentage = (duration / dayDuration) * 100;
const tick = document.createElement('span');
tick.className = "mini_tick"
tick.textContent = "13h"
tick.style.left = `${widthPercentage}%`
return tick
}
</script>