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

{% extends "sco_page.j2" %}

{% block title %}
{{title}}
{% endblock title %}


{% block scripts %}
{{ super() }}
<script src="{{scu.STATIC_DIR}}/libjs/purl.js"></script>
<script src="{{scu.STATIC_DIR}}/js/etud_info.js"></script>
<script src="{{scu.STATIC_DIR}}/js/groups_view.js"></script>
<script src="{{scu.STATIC_DIR}}/js/date_utils.js"></script>
<script src="{{scu.STATIC_DIR}}/js/assiduites.js"></script>
{% include "sco_timepicker.j2" %}

<script>

    {% if readonly != "false" %}
    function getPeriodValues() {
        return [0, 23]
    }
    {% else %}
    setupTimeLine(()=>{creerTousLesEtudiants(etuds)})
    {% endif %}



    const nonWorkDays = [{{ nonworkdays| safe }}];
    const readOnly = {{ readonly }};

    window.forceModule = "{{ forcer_module }}" == "True"
    window.nonPresent = {{ 'true' if non_present else 'false' }};

    const etudsDefDem = {{ defdem  | safe }}

    const select = document.getElementById("moduleimpl_select");

    if (window.forceModule) {
        const btn = document.getElementById("validate_selectors");


        if (!readOnly && select.value == "") {
            document.getElementById('forcemodule').style.display = "block";
        }

        select?.addEventListener('change', (e) => {
            if (e.target.value != "") {
                document.getElementById('forcemodule').style.display = "none";
            } else {
                document.getElementById('forcemodule').style.display = "block";
            }
        });
    }

    document.getElementById("pdp").addEventListener("change", (e) => {
        afficherPDP(e.target.checked);
        //creerTousLesEtudiants(etuds);
    });

    $('#date').on('change', async function(d) {
        // On vérifie si la date est un jour travaillé
        dateCouranteEstTravaillee();



        await recupAssiduites(etuds, $("#date").datepicker("getDate"));
        creerTousLesEtudiants(etuds);
    });

    $("#moduleimpl_select").on("change", ()=>{
        creerTousLesEtudiants(etuds);
    });

    const group_sel = document.querySelector("#group_ids_sel")
    group_sel.on((values)=>{
        main();
    });

    const moduleimpls = {};
    const inscriptionsModules = new Map();
    let etuds = new Map();

    async function main(){
        dateCouranteEstTravaillee();
        let group_ids = group_sel.value;
        etuds = await recupEtuds(group_ids);
        if (etuds.size != 0){
            await recupAssiduites(etuds, $("#date").datepicker("getDate"));
        }
        creerTousLesEtudiants(etuds);

        // affichage ou non des PDP
        afficherPDP(localStorage.getItem("scodoc-etud-pdp") == "true" )
    }

    setTimeout(main, 0);


</script>
{% endblock scripts %}

{% block styles %}
{{ super() }}
{# <link rel="stylesheet" href="{{scu.STATIC_DIR}}/libjs/bootstrap/css/bootstrap.min.css"> #}
<link rel="stylesheet" href="{{scu.STATIC_DIR}}/css/assiduites.css">
<link rel="stylesheet" href="{{scu.STATIC_DIR}}/css/minitimeline.css">

<style>
    #retour-haut{
        position: fixed;
        bottom: 10px;
        right: 10px;
        font-size: 3em;
        padding: 5px;
        border-radius: 5px;
        text-decoration: none;
        z-index: 100;
    }

    html{
        scroll-behavior: smooth !important;
    }

    .date-input{
        display: flex;
        gap: 4px;
    }

</style>

{% endblock styles %}


{% block app_content %}

{{ minitimeline|safe }}
<section id="content">

    <a id="retour-haut" href="#gtrcontent">
    ⬆️
    </a>

    <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>
        {% if readonly == "true" %}
        Assiduité {{gr_tit|safe}} {{sem}} (lecture seule)
        {% else %}
        Saisie de l'assiduité {{gr_tit|safe}} {{sem}}
        {% endif %}
    </h2>

    <fieldset class="selectors">
        <div class="infos">
            <div class="infos-button">Groupes&nbsp;: {{grp|safe}}</div>
            <div class="date-input">
                <button class="btn_date btn btn-secondary" onclick="jourSuivant(true)">
                &LeftArrowBar;
                </button>
                <div>
                    <input type="text" name="date" id="date" class="datepicker" value="{{date}}">
                </div>
                <button class="btn_date btn btn-secondary" onclick="jourSuivant(false)">
                &RightArrowBar;
                </button>
            </div>
        </div>
    </fieldset>
    <div style="display: {{'none' if readonly == 'true' else 'block'}};">
    {{timeline|safe}}
        <div class="time-buttons">
            <button class=" btn btn-secondary" onclick="setPeriodValues(t_start, t_mid)">Matin</button>
            <button class=" btn btn-secondary" onclick="setPeriodValues(t_mid, t_end)">Après-Midi</button>
        </div>
    </div>

    {% if readonly == "false" %}

    <div style="margin: 1vh 0;">
        <div id="forcemodule" style="display: none; margin:10px 0px;">
            Vous devez spécifier le module ! (voir réglage préférence du semestre)
        </div>
        <div>Module&nbsp;: {{moduleimpl_select|safe}}</div>
    </div>
    {% else %}
    {% endif %}

    <div>
        <label for="pdp">
            <span>Afficher les photos</span>
            <input type="checkbox" name="pdp" id="pdp">
        </label>
    </div>
    {% if readonly == "false" %}
    <div class="mass-selection">
        <span>Mettre tout le monde :</span>
        <fieldset class="btns_field mass">
            {% if not non_present %}
            <input type="checkbox" value="present" name="mass_btn_assiduites" id="mass_rbtn_present"
                class="rbtn present" onclick="mettreToutLeMonde('present', this)" title="Indique l'état Présent pour tous les étudiants" data-tooltip>
            {% endif %}
            <input type="checkbox" value="retard" name="mass_btn_assiduites" id="mass_rbtn_retard"
                class="rbtn retard" onclick="mettreToutLeMonde('retard', this)" title="Indique l'état Retard pour tous les étudiants" data-tooltip>
            <input type="checkbox" value="absent" name="mass_btn_assiduites" id="mass_rbtn_absent"
                class="rbtn absent" onclick="mettreToutLeMonde('absent', this)" title="Indique l'état Absent pour tous les étudiants" data-tooltip>
            <input type="checkbox" value="remove" name="mass_btn_assiduites" id="mass_rbtn_aucun"
                class="rbtn aucun" onclick="mettreToutLeMonde('vide', this)" title="Retire l'état pour tous les étudiants" data-tooltip>
        </fieldset>
        <em>Les saisies ci-dessous sont enregistrées au fur et à mesure.</em>
    </div>
    {% endif %}


    <div class="etud_holder">
        <p class="placeholder">
        </p>
    </div>

    <div class="help">
        <h3>Calendrier</h3>
        {% include "assiduites/widgets/legende_couleur.j2" %}
    </div>

    {% include "assiduites/widgets/toast.j2" %}
    {% include "assiduites/widgets/alert.j2" %}
    {% include "assiduites/widgets/prompt.j2" %}
    {% include "assiduites/widgets/conflict.j2" %}


</section>

{% endblock app_content %}