{# -*- mode: jinja-html -*- #}
<h2>{% if not read_only %}Édition des c{% else %}C{%endif%}oefficients des modules vers les UEs</h2>
<div class="help">
    {% if not read_only %}
    <p>Double-cliquer pour changer une valeur.
        Les valeurs sont automatiquement enregistrées au fur et à mesure.
    </p>
    {% endif %}
    <p>Chaque ligne représente une ressource ou SAÉ, et chaque colonne une Unité d'Enseignement (UE).
    </p>
</div>
<form class="semestre_selector">
    <input type="hidden" name="formation_id" value="{{formation.id}}"></input>
    <div>
        <div>Semestre:
            <select onchange="this.form.submit()" name="semestre_idx" id="semestre_idx">
                {% for i in semestre_ids %}
                <option value="{{i}}" {%if semestre_idx==i%}selected{%endif%}>{{i}}</option>
                {% endfor %}
                <option value="" {%if semestre_idx is none%}selected{%endif%}>Tous</option>
            </select>
        </div>
        {% if formation.referentiel_competence %}
        <div>Parcours:
            <select onchange="this.form.submit()" name="parcours_id" id="semestre_idx">
                <option value="" {%if parcours_id is none%}selected{%endif%}>Tous</option>
                {% for parcour in formation.referentiel_competence.parcours %}
                <option value="{{parcour.id}}" {%if parcours_id==parcour.id%}selected{%endif%}> {{parcour.libelle}}
                    ({{parcour.code}})
                </option>
                {% endfor %}
            </select>
        </div>
        {% endif %}
        <div>
            <a class="stdlink" href="{{ 
        url_for('notes.ue_table', scodoc_dept=g.scodoc_dept, 
            formation_id=formation.id, semestre_idx=semestre_idx)
    }}">revenir à la formation</a>
        </div>
    </div>
</form>

<div class="tableau"></div>

<h4>Explications</h4>
<div class="help">
    <p>Ces coefficients permettent de calculer les moyennes d'Unités d'Enseignement (UE)
        à partir des notes des ressources et SAÉs. Chaque ligne correspond à un
        module (ressource ou SAÉ), et chaque colonne à une UE.</p>
    <p>Si la formation est associée à un référentiel de compétences, on peut
        restreindre l'affichage aux UE et modules de l'un des parcours à l'aide du
        menu "Parcours" au dessus du tableau. Les UEs et modules de tronc commun
        apparaissent toujours. </p>
    <p>Les cases grisées à droite et en bas donnent la somme des coefficients.</p>
</div>

<div class="tableau_legende">
    <div class="champs_coef_hors_parcours champs_legende"></div>
    <div class="help">module non associé au parcours de cette UE, le coef devrait être nul.</div>
</div>


<script>
    var read_only = {{ "true" if read_only else "false"}};
    $(function () {
        let data_url = "{{data_source}}";
        $.getJSON(data_url, function (data) {
            build_table(data);
        });
    });
    function save(obj) {
        var value = obj.innerText.trim();
        if (value.length == 0) {
            value = "0";
        }
        if (!/^[\d.,]+$/.test(value)) {
            message("Il est attendu un nombre");
            return false;
        }
        if (value == obj.dataset.data) {
            return true;	// Aucune modification, pas d'enregistrement mais on continue normalement
        }
        obj.dataset.data = value;
        obj.classList.add("wait");
        // XXX DEBUG
        // console.log(`
        //     x : ${getComputedStyle(obj).getPropertyValue("--x")}
        //     y : ${getComputedStyle(obj).getPropertyValue("--y")}
        //     data : ${value}
        //     ue_id: ${obj.dataset.ue_id}
        //     module_id : ${obj.dataset.module_id}
        // `);
        $.post("{{data_save}}",
            {
                module_id: obj.dataset.module_id,
                ue_id: obj.dataset.ue_id,
                coef: value
            },
            function (result) {
                obj.classList.remove("wait");
                if (obj.dataset.orig != value)
                    obj.classList.add("modified");
                else
                    obj.classList.remove("modified");
                // Lorsque les données sont bien enregistrées, on enlève 
                // l'indication que c'est bon au bout d'un temps
                //setTimeout(() => {
                //    obj.classList.remove("modified");
                //}, 1000);
            }
        );
        return true;
    }
</script>