ScoDoc/app/templates/assiduites/pages/visu_assi_group.j2

{% extends "sco_page.j2" %}

{% block scripts %}
{{ super() }}
<script src="{{scu.STATIC_DIR}}/js/etud_info.js"></script>
<script src="{{scu.STATIC_DIR}}/js/date_utils.js"></script>
{% endblock %}

{% block app_content %}

<style>
label.stats_checkbox {
    font-weight: normal;
    margin-left: 16px;
}

table.dataTable.gt_table tr td.col_count {
    width: 3em;
}
table.dataTable.gt_table tr td.col_lien_ajout {
    padding-left: 1.5em;
    padding-right: 1.5em;
}
</style>

<h2>Visualisation de l'assiduité {{gr_tit|safe}}</h2>

<div class="stats-inputs">
    <label class="stats-label"> Date de début <input type="text" class="datepicker" name="stats_date_debut"
            id="stats_date_debut" value="{{date_debut}}"></label>
    <label class="stats-label"> Date de fin <input type="text" class="datepicker" name="stats_date_fin"
            id="stats_date_fin" value="{{date_fin}}"></label>
    <button onclick="stats()">Changer</button>

    <a style="margin-left:32px;" href="{{request.url}}&fmt=xlsx">{{scu.ICON_XLS|safe}}</a>

    <label class="stats_checkbox">
        <input type="checkbox" id="formsemestre_modimpls_box"> restreindre l'assiduité aux
        modules de ce semestre
    </label>

</div>

{{tableau | safe}}

<div class="help">
    Les comptes sont exprimés en {{ assi_metric | lower}}s.
</div>

<script>
    const date_debut = "{{date_debut}}";
    const date_fin = "{{date_fin}}";
    const group_ids = "{{group_ids}}";

    // Changement de la date de début ou de fin des statitiques
    // Recharge la page avec les nouvelles dates
    function stats() {
        const deb = Date.fromFRA(document.querySelector('#stats_date_debut').value);
        const fin = Date.fromFRA(document.querySelector('#stats_date_fin').value);
        let url = new URL(window.location.href);
        url.searchParams.set('date_debut', deb);
        url.searchParams.set('date_fin', fin);
        location.href = url.href;
    }

    window.addEventListener('load', () => {
        document.querySelector('#stats_date_debut').value = date_debut;
        document.querySelector('#stats_date_fin').value = date_fin;

        // La checkbox pour restreindre aux modules du semestre:
        var url = new URL(window.location.href);
        var checkbox = document.getElementById('formsemestre_modimpls_box');
        checkbox.checked = url.searchParams.has('formsemestre_modimpls_id');
        checkbox.addEventListener('change', function() {
            if (this.checked) {
                url.searchParams.set('formsemestre_modimpls_id', {{sco.formsemestre.id}});
            } else {
                url.searchParams.delete('formsemestre_modimpls_id');
            }
            window.location.href = url.href;
    });
    })

</script>

{% endblock %}