{% extends "sco_page.j2" %} {% block title %} Calendrier de l'assiduité {% endblock title %} {% block styles %} {{ super() }} <link rel="stylesheet" href="{{scu.STATIC_DIR}}/css/minitimeline.css"> <link rel="stylesheet" href="{{scu.STATIC_DIR}}/css/assiduites.css"> {% endblock styles %} {% block app_content %} {% include "assiduites/widgets/alert.j2" %} <div class="pageContent"> <h2>Assiduité de {{sco.etud.html_link_fiche()|safe}}</h2> <div class="options"> <input type="checkbox" id="show_pres" name="show_pres" class="memo" {{'checked' if show_pres else ''}}><label for="show_pres">afficher les présences</label> <input type="checkbox" name="show_reta" id="show_reta" class="memo" {{'checked' if show_reta else ''}}><label for="show_reta">afficher les retards</label> <input type="checkbox" name="mode_demi" id="mode_demi" class="memo" {{'checked' if mode_demi else ''}}><label for="mode_demi">mode demi journée</label> </div> <div class="calendrier"> {% for mois,jours in calendrier.items() %} <div class="month"> <h3>{{mois}}</h3> <div class="days {{'demi' if mode_demi else ''}}"> {% for jour in jours %} {% if jour.is_non_work() %} <div class="day {{jour.get_class()}}"> <span>{{jour.get_nom()}}</span> {% else %} <div class="day {{jour.get_class(show_pres, show_reta) if not mode_demi else ''}}"> {% endif %} {% if mode_demi %} {% if not jour.is_non_work() %} <span>{{jour.get_nom()}}</span> <span class="{{jour.get_demi_class(True, show_pres,show_reta)}}"></span> <span class="{{jour.get_demi_class(False, show_pres,show_reta)}}"></span> {% endif %} {% else %} {% if not jour.is_non_work() %} <span>{{jour.get_nom(False)}}</span> {% endif %} {% endif %} {% if not jour.is_non_work() and jour.has_assiduites()%} <div class="dayline"> <div class="dayline-title"> <span>Assiduité du</span> <br> <span>{{jour.get_date()}}</span> {{jour.generate_minitimeline() | safe}} </div> </div> {% endif %} </div> {% endfor %} </div> </div> {% endfor %} </div> <div class="annee"> <span id="label-annee">Année scolaire 2022-2023</span><span id="label-changer" style="margin-left: 5px;">Changer année: </span> <select name="" id="annee"> </select> <span id="label-nom">Assiduité de {{sco.etud.nomprenom}}</span> </div> <div class="help"> <h3>Calendrier</h3> <p>Code couleur</p> <ul class="couleurs"> <li><span title="Vert" class="present demo"></span> → présence de l'étudiant lors de la période </li> <li><span title="Bleu clair" class="nonwork demo"></span> → la période n'est pas travaillée </li> <li><span title="Rouge" class="absent demo"></span> → absence de l'étudiant lors de la période </li> <li><span title="Rose" class="demo color absent est_just"></span> → absence justifiée </li> <li><span title="Orange" class="retard demo"></span> → retard de l'étudiant lors de la période </li> <li><span title="Jaune clair" class="demo color retard est_just"></span> → retard justifié </li> <li><span title="Quart Bleu" class="est_just demo"></span> → la période est couverte par un justificatif valide</li> <li><span title="Justif. non valide" class="invalide demo"></span> → la période est couverte par un justificatif non valide </li> <li><span title="Justif. en attente" class="attente demo"></span> → la période a un justificatif en attente de validation </li> </ul> <p>Vous pouvez passer le curseur sur les jours colorés afin de voir les informations supplémentaires</p> </div> <ul class="couleurs print"> <li><span title="Vert" class="present demo"></span> présence </li> <li><span title="Bleu clair" class="nonwork demo"></span> non travaillé </li> <li><span title="Rouge" class="absent demo"></span> absence </li> <li><span title="Rose" class="demo color absent est_just"></span> absence justifiée </li> <li><span title="Orange" class="retard demo"></span> retard </li> <li><span title="Jaune clair" class="demo color retard est_just"></span>retard justifié </li> <li><span title="Quart Bleu" class="est_just demo"></span> justificatif valide</li> <li><span title="Quart Violet" class="invalide demo"></span> justificatif non valide </li> </ul> </div> <style> .help .couleurs { grid-template-columns: 2; grid-template-rows: auto; display: grid; } .couleurs.print { display: none; } .help .couleurs li:nth-child(odd) { grid-column: 1; list-style-type: none; } .help .couleurs li:nth-child(even) { grid-column: 2; list-style-type: none; } .color.present { background-color: var(--color-present) !important; } .color.absent { background-color: var(--color-absent) !important; } .color.absent.est_just { background-color: var(--color-absent-justi) !important; } .color.retard { background-color: var(--color-retard) !important; } .color.retard.est_just { background-color: var(--color-retard-justi) !important; } .color.nonwork { background-color: var(--color-nonwork) !important; } .color { background-color: var(--color-defaut) !important; } .pageContent { margin-top: 1vh; max-width: var(--sco-content-max-width); } .calendrier { display: flex; justify-content: space-evenly; flex-wrap: wrap; border: 1px solid #444; border-radius: 12px; margin-bottom: 12px; } .month h3 { text-align: center; } .day, .demi .day.color.nonwork { text-align: left; margin: 2px; cursor: default; font-size: 13px; position: relative; font-weight: normal; min-width: 6em; display: flex; justify-content: start; } .color.est_just.sans_etat::before { content: ""; position: absolute; width: 25%; height: 100%; background-color: var(--color-justi) !important; right: 0; } .color.invalide::before { content: ""; position: absolute; width: 25%; height: 100%; right: 0; background-color: var(--color-justi-invalide) !important; } .color.attente::before, .color.modifie::before { content: ""; position: absolute; width: 25%; height: 100%; right: 0; background: repeating-linear-gradient( to bottom, var(--color-justi-attente-stripe) 0px, var(--color-justi-attente-stripe) 4px, var(--color-justi-attente) 4px, var(--color-justi-attente) 7px )!important; } .demo.invalide { background-color: var(--color-justi-invalide) !important; } .demo.attente { background: repeating-linear-gradient( to bottom, var(--color-justi-attente-stripe) 0px, var(--color-justi-attente-stripe) 4px, var(--color-justi-attente) 4px, var(--color-justi-attente) 7px )!important; } .demo.est_just { background-color: var(--color-justi) !important; } .demi .day.nonwork>span { flex: none; border: none; } .demi .day { border-radius: 0; } @media print { .couleurs.print { display: flex; justify-content: space-evenly; align-items: center; } .couleurs.print li { list-style-type: none !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .day, .demi .day.color.color.nonwork { min-width: 5em; font-size: 11px; } .demi .day>span:first-of-type { width: 2.5em; min-width: 2.5em; } .color { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .day.est_just, .demi .day span.est_just { background-image: none; } .day.invalide, .demi .day span.invalide { background-image: none; } .demi .day span.est_just::before { content: "J"; } .demi .day span.invalide::before { content: "JI"; } #sidebar, .help, h2, #annee, #label-changer, .options { display: none; } #label-nom, #label-justi { display: inline; } #gtrcontent { margin: 5px; } .annee { display: flex; justify-content: space-evenly; align-items: center; } } </style> <script> function getOptions() { return { "show_pres": document.getElementById("show_pres").checked, "show_reta": document.getElementById("show_reta").checked, "mode_demi": document.getElementById("mode_demi").checked, } } function updatePage(){ const url = new URL(location.href); const options = getOptions(); url.searchParams.set("annee", document.getElementById('annee').value); url.searchParams.set("mode_demi", options.mode_demi); url.searchParams.set("show_pres", options.show_pres); url.searchParams.set("show_reta", options.show_reta); if (location.href != url.href){ location.href = url.href } } const defAnnee = {{ annee }} let annees = {{ annees | safe }} annees = annees.filter((x, i) => annees.indexOf(x) === i) const etudid = {{ sco.etud.id }}; const select = document.querySelector('#annee'); annees.forEach((a) => { const opt = document.createElement("option"); opt.value = a + "", opt.textContent = `${a} - ${a + 1}`; if (a === defAnnee) { opt.selected = true; document.querySelector('.annee #label-annee').textContent = `Année scolaire ${a}-${a + 1}` } select.appendChild(opt) }) document.querySelectorAll('input[type="checkbox"].memo, #annee').forEach(el => { el.addEventListener('change', function() { updatePage(); })}); document.querySelectorAll('[assi_id]').forEach((el,i) => { el.addEventListener('click', ()=>{ const assi_id = el.getAttribute('assi_id'); window.open(`${SCO_URL}/Assiduites/tableau_assiduite_actions?type=assiduite&action=details&obj_id=${assi_id}`); }) }); </script> {% endblock app_content %}