ScoDoc-Lille/app/templates/assiduites/widgets/conflict.j2

393 lines
12 KiB
Django/Jinja

<script>
/**
* Transformation d'une date de début en position sur la timeline
* @param {String} start
* @returns {String} un déplacement par rapport à la gauche en %
*/
function getLeftPosition(start) {
const startTime = new Date(start);
const startMins =
(startTime.getHours() - t_start) * 60 + startTime.getMinutes();
return (startMins / (t_end * 60 - t_start * 60)) * 100 + "%";
}
/**
* Ajustement de l'espacement vertical entre les assiduités superposées
* @param {HTMLElement} container le conteneur des assiduités
* @param {String} start la date début de l'assiduité à placer
* @param {String} end la date de fin de l'assiduité à placer
* @returns {String} La position en px
*/
function getTopPosition(container, start, end) {
const overlaps = (a, b) => {
return a.start < b.end && a.end > b.start;
};
const startTime = new Date(start);
const endTime = new Date(end);
const assiduiteDuration = { start: startTime, end: endTime };
let position = 0;
let hasOverlap = true;
while (hasOverlap) {
hasOverlap = false;
Array.from(container.children).some((el) => {
const elStart = new Date(el.getAttribute("data-start"));
const elEnd = new Date(el.getAttribute("data-end"));
const elDuration = { start: elStart, end: elEnd };
if (overlaps(assiduiteDuration, elDuration)) {
position += 25; // Pour ajuster l'espacement vertical entre les assiduités superposées
hasOverlap = true;
return true;
}
return false;
});
}
return position + "px";
}
/**
* Calcule de la largeur de l'assiduité sur la timeline
* @param {String} start date iso de début
* @param {String} end date iso de fin
* @returns {String} la taille en %
*/
function getWidth(start, end) {
const startTime = new Date(start);
const endTime = new Date(end);
const duration = (endTime - startTime) / 1000 / 60;
const percent = Math.min((duration / (t_end * 60 - t_start * 60)) * 100, 100);
return percent + "%";
}
function formatDateModal(date) {
return new Date(Date.removeUTC(date)).format("DD/MM/Y HH:mm");
}
class ConflitResolver {
constructor(assiduitesList, conflictPeriod, interval) {
this.list = assiduitesList;
this.conflictPeriod = conflictPeriod;
this.interval = interval;
this.selectedAssiduite = null;
this.element = undefined;
this.callbacks = {
delete: () => {},
split: () => {},
edit: () => {},
};
}
refresh(assiduitesList, periode) {
this.list = assiduitesList;
if (periode) {
this.conflictPeriod = periode;
}
this.render();
}
open() {
const html = `
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<h2>Veuillez régler le conflit pour poursuivre</h2>
<!-- Ajout de la frise chronologique -->
<div class="modal-timeline">
<div class="time-labels"></div>
<div class="assiduites-container"></div>
</div>
<div class="modal-buttons">
<button id="finish" class="btnPrompt">Quitter</button>
</div>
</div>
</div>
`;
document.body.insertAdjacentHTML("afterbegin", html);
this.element = document.getElementById("myModal");
document.querySelector("#myModal #finish").addEventListener("click", () => {
this.close();
});
document.querySelector("#myModal .close").addEventListener("click", () => {
this.close();
});
// fermeture du modal en appuyant sur echap
document.addEventListener(
"keydown",
(e) => {
if (e.key === "Escape") {
this.close();
}
},
{ once: true }
);
this.render();
}
close() {
if (this.element) {
this.element.remove();
}
}
/**
* Génération du modal
*/
render() {
const timeLabels = document.querySelector(".time-labels");
const assiduitesContainer = document.querySelector(".assiduites-container");
timeLabels.innerHTML = "";
assiduitesContainer.innerHTML = '<div class="assiduite-special"></div>';
// Ajout des labels d'heure sur la frise chronologique
for (let i = t_start; i <= t_end; i++) {
const timeLabel = document.createElement("div");
timeLabel.className = "time-label";
timeLabel.textContent = numberToTime(i);
timeLabels.appendChild(timeLabel);
}
//Placement de la période conflictuelle sur la timeline
const specialAssiduiteEl = document.querySelector(".assiduite-special");
specialAssiduiteEl.style.width = getWidth(
this.conflictPeriod.deb,
this.conflictPeriod.fin
);
specialAssiduiteEl.style.left = getLeftPosition(this.conflictPeriod.deb);
specialAssiduiteEl.style.top = "0";
specialAssiduiteEl.style.zIndex = "0"; // Place l'assiduité spéciale en arrière-plan
assiduitesContainer.appendChild(specialAssiduiteEl);
//Placement des assiduités sur la timeline
this.list.forEach((assiduite) => {
const period = {
deb: new Date(assiduite.date_debut),
fin: new Date(assiduite.date_fin),
};
if (!hasTimeConflict(period, this.interval)) {
return;
}
const el = document.createElement("div");
el.classList.add("assiduite", "color", assiduite.etat.toLowerCase());
el.style.width = getWidth(assiduite.date_debut, assiduite.date_fin);
el.style.left = getLeftPosition(assiduite.date_debut);
el.style.top = "10px";
el.setAttribute("data-id", assiduite.assiduite_id);
el.addEventListener("click", () => {});
// Génération des boutons d'action (supprimer, éditer, diviser)
const actionButtons = document.createElement("div");
actionButtons.className = "action-buttons";
const deleteButton = document.createElement("button");
deleteButton.textContent = "🗑️";
deleteButton.addEventListener("click", () => {
this.supprimerAssiduite(assiduite);
});
const editButton = document.createElement("button");
editButton.textContent = "📝";
editButton.addEventListener("click", () => {
this.editerAssiduite(assiduite);
});
const splitButton = document.createElement("button");
splitButton.textContent = "✂️";
splitButton.addEventListener("click", () => {
this.spliterAssiduite(assiduite);
});
actionButtons.appendChild(editButton);
actionButtons.appendChild(splitButton);
actionButtons.appendChild(deleteButton);
el.appendChild(actionButtons);
setupAssiduiteBubble(el, assiduite);
assiduitesContainer.appendChild(el);
});
}
supprimerAssiduite(assiduite) {
const html = `
<p>Êtes-vous sûr de vouloir supprimer cette assiduité ?</p>
`;
const div = document.createElement("div");
div.innerHTML = html;
openPromptModal(
"Suppression de l'assiduité",
div,
async (closePromptModal) => {
await async_post(
`../../api/assiduite/delete`,
[assiduite.assiduite_id],
async (data) => {
if (data.success.length > 0) {
const etud = etuds.get(Number(assiduite.etudid));
await MiseAJourLigneEtud(etud);
this.refresh(etud.assiduites, this.conflictPeriod);
closePromptModal();
} else {
console.error(data.errors["0"].message);
}
},
(error) => {
console.error(
"Erreur lors de la suppression de l'assiduité",
error
);
}
);
},
() => {},
"var(--color-error)"
);
}
editerAssiduite(assiduite) {
// Select pour choisir l'état de l'assiduité
const html = `
<select id="etat" name="etat">
<option disabled>Choisir un état</option>
<option value="present">Présent</option>
<option value="absent">Absent</option>
<option value="retard">Retard</option>
</select>
`;
const div = document.createElement("div");
div.innerHTML = html;
div.style.display = "flex";
div.style.justifyContent = "center";
openPromptModal(
"Modifier l'état de l'assiduité",
div,
async (closePromptModal) => {
const etatAssi = etat.value;
if (!etat) return true;
await async_post(
`../../api/assiduite/${assiduite.assiduite_id}/edit`,
{
etat: etatAssi,
},
async (data) => {
const etud = etuds.get(Number(assiduite.etudid));
await MiseAJourLigneEtud(etud);
this.refresh(etud.assiduites, this.conflictPeriod);
closePromptModal();
},
(error) => {
console.error("Erreur lors de la modification de l'assiduité", error);
}
);
},
() => {},
"var(--color-present)"
);
}
spliterAssiduite(assiduite) {
// Select pour choisir l'état de l'assiduité
const creneau = getPeriodAsDate()
creneau.deb = creneau.deb.format().substring(11,16)
creneau.fin = creneau.fin.format().substring(11,16)
const html = `
<p>La période conflictuelle s'étend de ${creneau.deb} à ${creneau.fin}</p>
<br>
<input type="text" id="promptTime" name="promptTime" class="timepicker"
placeholder="Cliquez pour choisir un horaire" required>
`;
const div = document.createElement("div");
div.innerHTML = html;
div.style.display = "flex";
div.style.justifyContent = "center";
div.style.flexDirection = "column";
openPromptModal(
"Séparer l'assiduité",
div,
async (closePromptModal) => {
const separateur = promptTime.value;
if (separateur === "") return true;
const assiduiteAvant = {...assiduite};
const assiduiteAprès = {...assiduite};
assiduiteAvant.date_fin = assiduite.date_fin.substring(0,11) + separateur;
assiduiteAprès.date_debut = assiduite.date_debut.substring(0,11) + separateur;
// On supprime l'assiduité actuelle
await async_post(
"../../api/assiduite/delete",
[assiduite.assiduite_id],
(data)=>{console.log(data)},
()=>{},
)
// On ajoute les deux nouvelles assiduités
await async_post(
"../../api/assiduites/create",
[assiduiteAvant, assiduiteAprès],
async (data)=>{
console.log(data);
const etud = etuds.get(Number(assiduite.etudid));
await MiseAJourLigneEtud(etud);
this.refresh(etud.assiduites, this.conflictPeriod);
closePromptModal();
},
()=>{},
)
},
() => {},
"var(--color-retard)"
);
// Initialisation du timepicker
const deb = assiduite.date_debut.substring(11,16);
const fin = assiduite.date_fin.substring(11,16);
setTimeout(()=>{
$('#promptTime').timepicker({
timeFormat: 'HH:mm',
interval: 60 * tick_delay,
minTime: deb,
startTime: deb,
maxTime: fin,
dynamic: false,
dropdown: true,
scrollbar: false,
});
}, 100
);
}
}
</script>
<style>
.ui-timepicker-container {
z-index: 100000 !important;
}
</style>