{% include "assiduites/widgets/toast.j2" %} {% block pageContent %} <div class="pageContent"> <h3>Justifier des absences ou retards</h3> {% include "assiduites/widgets/tableau_base.j2" %} <section class="liste"> <a class="icon filter" onclick="filterJusti()"></a> {% include "assiduites/widgets/tableau_justi.j2" %} </section> <section class="justi-form page"> <fieldset> <div class="justi-row"> <button onclick="validerFormulaire(this)">Créer le justificatif</button> <button onclick="effacerFormulaire()">Remettre à zero</button> </div> <div class="justi-row"> <div class="justi-label"> <legend for="justi_date_debut" required>Date de début</legend> <input type="datetime-local" name="justi_date_debut" id="justi_date_debut"> <span>Journée(s) entière(s)</span> <input type="checkbox" name="justi_journee" id="justi_journee"> </div> <div class="justi-label" id="date_fin"> <legend for="justi_date_fin" required>Date de fin</legend> <input type="datetime-local" name="justi_date_fin" id="justi_date_fin"> </div> </div> <div class="justi-row"> <div class="justi-label"> <legend for="justi_etat" required>Etat du justificatif</legend> <select name="justi_etat" id="justi_etat"> <option value="attente" selected>En Attente de validation</option> <option value="non_valide">Non Valide</option> <option value="modifie">Modifié</option> <option value="valide">Valide</option> </select> </div> </div> <div class="justi-row"> <div class="justi-label"> <legend for="justi_raison">Raison</legend> <textarea name="justi_raison" id="justi_raison" cols="50" rows="10" maxlength="500"></textarea> </div> </div> <div class="justi-row"> <div class="justi-sect"> </div> <div class="justi-label"> <legend for="justi_fich">Importer un fichier</legend> <input type="file" name="justi_fich" id="justi_fich" multiple> </div> </div> </fieldset> </section> <div class="legende"> <h3>Gestion des justificatifs</h3> <p> Faites <span style="font-style: italic;">clic droit</span> sur une ligne du tableau pour afficher le menu contextuel : <ul> <li>Détails : Affiche les détails du justificatif sélectionné</li> <li>Editer : Permet de modifier le justificatif (dates, etat, ajouter/supprimer fichier etc)</li> <li>Supprimer : Permet de supprimer le justificatif (Action Irréversible)</li> </ul> </p> <p>Cliquer sur l'icone d'entonoir afin de filtrer le tableau des justificatifs</p> </div> </div> <style> .justi-row { margin: 5px 0; } .justi-form fieldset { display: flex; flex-direction: column; justify-content: space-evenly; } .pageContent { max-width: var(--sco-content-max-width); margin-top: 15px; } .justi-label { margin: 0 10px; } [required]::after { content: "*"; color: crimson; } </style> <script> function validateFields() { const field = document.querySelector('.justi-form') const { deb, fin } = getDates() if (deb == "" || fin == "") { openAlertModal("Erreur détéctée", document.createTextNode("Il faut indiquer une date de début et une date de fin valide."), "", color = "crimson"); return false; } const date_debut = moment.tz(deb, TIMEZONE); const date_fin = moment.tz(fin, TIMEZONE); if (date_fin.isBefore(date_debut)) { openAlertModal("Erreur détéctée", document.createTextNode("La date de fin doit se trouver après la date de début."), "", color = "crimson"); return false; } return true } function fieldsToJustificatif() { const field = document.querySelector('.justi-form.page') const { deb, fin } = getDates() const etat = field.querySelector('#justi_etat').value; const raison = field.querySelector('#justi_raison').value; return { date_debut: moment.tz(deb, TIMEZONE).format(), date_fin: moment.tz(fin, TIMEZONE).format(), etat: etat, raison: raison, } } function importFiles(justif_id) { const field = document.querySelector('.justi-form') const in_files = field.querySelector('#justi_fich'); const path = getUrl() + `/api/justificatif/${justif_id}/import`; const requests = [] Array.from(in_files.files).forEach((f) => { pushToast(generateToast(document.createTextNode(`Importation du fichier : ${f.name} commencée`), color = "#f0c865")); const fd = new FormData(); fd.append('file', f); requests.push( $.ajax( { url: path, type: 'POST', data: fd, dateType: 'json', contentType: false, processData: false, success: () => { pushToast(generateToast(document.createTextNode(`Importation du fichier : ${f.name} finie`))); loadAll(); }, } ) ) }); if (in_files.files.length == 0) { loadAll(); } } function validerFormulaire(btn) { if (!validateFields()) return const justificatif = fieldsToJustificatif(); let justif_id = null; let couverture = null; createJustificatif(justificatif, (data) => { if (Object.keys(data.errors).length > 0) { console.error(data.errors); errorAlert(); } if (Object.keys(data.success).length > 0) { couverture = data.success[0].message.couverture justif_id = data.success[0].message.justif_id; importFiles(justif_id); return; } }) btn.disabled = true; setTimeout(() => { btn.disabled = false; }, 1000) } function effacerFormulaire() { const field = document.querySelector('.justi-form') field.querySelector('#justi_date_debut').value = ""; field.querySelector('#justi_date_fin').value = ""; field.querySelector('#justi_etat').value = "attente"; field.querySelector('#justi_raison').value = ""; field.querySelector('#justi_fich').value = ""; } function dayOnly() { const { deb, fin } = getDates(); if (document.getElementById('justi_journee').checked) { document.getElementById("justi_date_debut").type = "date" document.getElementById("justi_date_debut").value = deb.slice(0, deb.indexOf('T')) document.getElementById("justi_date_fin").type = "date" document.getElementById("justi_date_fin").value = fin.slice(0, fin.indexOf('T')) } else { document.getElementById("justi_date_debut").type = "datetime-local" document.getElementById("justi_date_debut").value = `${deb}T${assi_morning}` document.getElementById("justi_date_fin").type = "datetime-local" document.getElementById("justi_date_fin").value = `${fin}T${assi_evening}` } } function getDates() { if (document.querySelector('.page #justi_journee').checked) { const date_str_deb = document.querySelector(".page #justi_date_debut").value const date_str_fin = document.querySelector(".page #justi_date_fin").value return { "deb": date_str_deb ? `${date_str_deb}T${assi_morning}` : "", "fin": date_str_fin ? `${date_str_fin}T${assi_evening}` : "", } } return { "deb": document.querySelector(".page #justi_date_debut").value, "fin": document.querySelector(".page #justi_date_fin").value, } } const etudid = {{ sco.etud.id }}; const assi_limit_annee = "{{ assi_limit_annee }}" == "True" ? true : false; const assi_morning = '{{assi_morning}}'; const assi_evening = '{{assi_evening}}'; window.onload = () => { loadAll(); document.getElementById('justi_journee').addEventListener('click', () => { dayOnly() }); dayOnly() } </script> {% endblock pageContent %}