MonScoDocEssai/app/templates/assiduites/pages/signal_assiduites_group.j2

102 lines
3.5 KiB
Django/Jinja

{% include "assiduites/widgets/toast.j2" %}
<section id="content">
<div class="no-display">
<span class="formsemestre_id">{{formsemestre_id}}</span>
<span id="formsemestre_date_debut">{{formsemestre_date_debut}}</span>
<span id="formsemestre_date_fin">{{formsemestre_date_fin}}</span>
</div>
<h2>
Saisie des assiduités {{gr_tit|safe}} {{sem}}
</h2>
<fieldset class="selectors">
<div>Groupes : {{grp|safe}}</div>
<div id="forcemodule" style="display: none;">Une préférence du semestre vous impose d'indiquer le module !</div>
<div>Module :{{moduleimpl_select|safe}}</div>
<div class="infos">
Date: <span id="datestr"></span>
<input type="date" name="tl_date" id="tl_date" value="{{ date }}" onchange="updateDate()">
</div>
</fieldset>
{{timeline|safe}}
<button id="validate_selectors" onclick="validateSelectors(this)">
Faire la saisie
</button>
<div class="etud_holder">
<p class="placeholder">
Veillez à choisir le groupe concerné par la saisie ainsi que la date de la saisie.
Après validation, il faudra recharger la page pour changer les informations de la saisie.
</p>
</div>
<div class="legende">
<h3>Explication diverses</h3>
<p>
Si la période indiquée par la timeline provoque un conflit d'assiduité pour un étudiant sa ligne deviendra
rouge.
<br>
Dans ce cas il faut résoudre manuellement le conflit : cliquez sur un des boutons d'assiduités pour ouvrir
le
résolveur de conflit.
<br>
Correspondance des couleurs :
</p>
<ul>
<li>Vert -> présence de l'étudiant lors de la période</li>
<li>Orange -> retard de l'étudiant lors de la période</li>
<li>Rouge -> absence de l'étudiant lors de la période</li>
<li>Hachure Bleu -> l'assiduité est justifiée par un justificatif valide</li>
<li>Hachure Rouge -> l'assiduité est justifiée par un justificatif non valide / en attente de validation
</li>
</ul>
</div>
<!-- Ajout d'un conteneur pour le loader -->
<div class="loader-container" id="loaderContainer">
<div class="loader"></div>
</div>
{% include "assiduites/widgets/alert.j2" %}
{% include "assiduites/widgets/prompt.j2" %}
{% include "assiduites/widgets/conflict.j2" %}
<script>
const nonWorkDays = [{{ nonworkdays| safe }}];
updateDate();
setupDate();
setupTimeLine();
window.forceModule = "{{ forcer_module }}"
window.forceModule = window.forceModule == "True" ? true : false
if (window.forceModule) {
const btn = document.getElementById("validate_selectors");
const select = document.getElementById("moduleimpl_select");
if (select.value == "") {
btn.disabled = true;
document.getElementById('forcemodule').style.display = "block";
}
select.addEventListener('change', (e) => {
if (e.target.value != "") {
btn.disabled = false;
document.getElementById('forcemodule').style.display = "none";
} else {
btn.disabled = true;
document.getElementById('forcemodule').style.display = "block";
}
});
}
</script>
</section>