{% include "assiduites/widgets/toast.j2" %} {% include "assiduites/widgets/alert.j2" %} {% block pageContent %} <div class="pageContent"> <h3>Signaler une absence, présence ou retard pour {{etud.html_link_fiche()|safe}}</h3> {% if saisie_eval %} <div id="saisie_eval"> <br> <h3> La saisie a été préconfigurée en fonction de l'évaluation. <br> Une fois la saisie terminée, cliquez sur le lien ci-dessous </h3> <a href="{{redirect_url}}">retourner sur la page de l'évaluation</a> </div> {% endif %} <section class="assi-form page"> <fieldset> <div class="assi-row"> <div class="assi-label"> <legend for="assi_date_debut" required>Date de début</legend> <input type="text" name="assi_date_debut" id="assi_date_debut" size="10" class="datepicker"> <input type="text" name="assi_heure_debut" id="assi_heure_debut" size="5" class="timepicker"> <span>Journée entière</span> <input type="checkbox" name="assi_journee" id="assi_journee"> </div> <div class="assi-label" id="date_fin"> <legend for="assi_date_fin" required>Date de fin</legend> <scodoc-datetime name="assi_date_fin" id="assi_date_fin"></scodoc-datetime> </div> </div> <div class="assi-row"> <div class="assi-label"> <legend for="assi_etat" required>État de l'assiduité</legend> <select name="assi_etat" id="assi_etat"> <option value="absent" selected>Absent</option> <option value="retard">Retard</option> <option value="present">Présent</option> </select> </div> </div> <div class="assi-row"> <div class="assi-label"> <legend for="assi_module" required>Module</legend> {% with moduleid="ajout_assiduite_module_impl",label=false %} {% include "assiduites/widgets/moduleimpl_dynamic_selector.j2" %} {% endwith %} </div> </div> <div class="assi-row"> <div class="assi-label"> <legend for="raison">Raison</legend> <textarea name="raison" id="raison" cols="75" rows="4" maxlength="500"></textarea> </div> </div> <div class="assi-row"> <button onclick="validerFormulaire(this)">Enregistrer</button> <button onclick="effacerFormulaire()">Remettre à zero</button> </div> </fieldset> </section> <section class="assi-liste"> {{tableau | safe }} </section> </div> <style> .assi-row { margin: 5px 0; } .assi-form fieldset { display: flex; flex-direction: column; justify-content: space-evenly; } .pageContent { max-width: var(--sco-content-max-width); margin-top: 15px; } .assi-label { margin: 0 10px; } [required]::after { content: "*"; color: var(--color-error); } </style> <script> $('.timepicker').timepicker({ timeFormat: 'HH:mm', interval: {{ scu.get_assiduites_time_config("assi_tick_time") }}, minTime: "{{ scu.get_assiduites_time_config("assi_morning_time") }}", maxTime: "{{ scu.get_assiduites_time_config("assi_afternoon_time") }}", defaultTime: 'now', startTime: "{{ scu.get_assiduites_time_config("assi_morning_time") }}", dynamic: false, dropdown: true, scrollbar: false }); function validateFields() { const field = document.querySelector('.assi-form') const { deb, fin } = getDates() const date_debut = new Date(deb); const date_fin = new Date(fin); if (deb == "" || fin == "" || !date_debut.isValid() || !date_fin.isValid()) { 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; } 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 fieldsToAssiduite() { const field = document.querySelector('.assi-form.page') const { deb, fin } = getDates() const etat = field.querySelector('#assi_etat').value; const raison = field.querySelector('#raison').value; const module = field.querySelector("#ajout_assiduite_module_impl").value; return { date_debut: new Date(deb).toFakeIso(), date_fin: new Date(fin).toFakeIso(), etat: etat, description: raison, moduleimpl_id: module, } } function validerFormulaire(btn) { if (!validateFields()) return const assiduite = fieldsToAssiduite(); let assiduite_id = null; createAssiduiteComplete(assiduite, etudid); updateTableau(); btn.disabled = true; setTimeout(() => { btn.disabled = false; }, 1000) } function effacerFormulaire() { const field = document.querySelector('.assi-form') field.querySelector('#assi_date_debut').value = ""; field.querySelector('#assi_date_fin').value = ""; field.querySelector('#assi_etat').value = "attente"; field.querySelector('#raison').value = ""; } function dayOnly() { const date_deb = document.getElementById("assi_date_debut"); const date_fin = document.getElementById("assi_date_fin"); if (document.getElementById('assi_journee').checked) { date_deb.setAttribute("show", "date") date_fin.setAttribute("show", "date") document.querySelector(`legend[for="assi_date_fin"]`).removeAttribute("required") } else { date_deb.removeAttribute("show") date_fin.removeAttribute("show") document.querySelector(`legend[for="assi_date_fin"]`).setAttribute("required", "") } } function getDates() { const date_deb = document.querySelector(".page #assi_date_debut") const date_fin = document.querySelector(".page #assi_date_fin") const journee = document.querySelector('.page #assi_journee').checked const deb = date_deb.valueAsObject.date + "T" + (journee ? assi_morning : date_deb.valueAsObject.time) let fin = "T" + (journee ? assi_evening : date_fin.valueAsObject.time) if (journee) { fin = (date_fin.valueAsObject.date || date_deb.valueAsObject.date) + fin } else { fin = date_fin.valueAsObject.date + fin } return { "deb": deb, "fin": fin, } } 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}}'; {% if saisie_eval %} const saisie_eval = true; const date_deb = "{{date_deb}}"; const date_fin = "{{date_fin}}"; const moduleimpl = {{ moduleimpl_id }}; {% else %} const saisie_eval = false; {% endif %} window.addEventListener("load", () => { document.getElementById('assi_journee').addEventListener('click', () => { dayOnly() }); dayOnly() if (saisie_eval) { document.getElementById("assi_date_debut").value = Date.removeUTC(date_deb); document.getElementById("assi_date_fin").value = Date.removeUTC(date_fin); } else { const today = (new Date()).format("YYYY-MM-DD"); document.getElementById("assi_date_debut").valueAsObject = { date: today, time: assi_morning } document.getElementById("assi_date_fin").valueAsObject = { time: assi_evening } } document.getElementById("assi_date_debut").addEventListener("blur", (event) => { updateSelect(null, "#ajout_assiduite_module_impl", event.target.valueAsObject.date) }) updateSelect(saisie_eval ? moduleimpl : "", "#ajout_assiduite_module_impl", document.getElementById("assi_date_debut").valueAsObject.date); }); </script> {% endblock pageContent %}