ScoDoc-Lille/app/static/js/scodoc.js

// JS for all ScoDoc pages (using jQuery UI)


$(function () {
    // Autocomplete recherche etudiants par nom
    $(".in-expnom").autocomplete(
        {
            delay: 300, // wait 300ms before suggestions
            minLength: 2, // min nb of chars before suggest
            position: { collision: 'flip' }, // automatic menu position up/down
            source: SCO_URL + "/search_etud_by_name",
            select: function (event, ui) {
                $(".in-expnom").val(ui.item.value);
                $("#form-chercheetud").submit();
            }
        });

    // Date picker
    $(".datepicker").datepicker({
        showOn: 'button',
        buttonImage: '/ScoDoc/static/icons/calendar_img.png',
        buttonImageOnly: true,
        dateFormat: 'dd/mm/yy',
        duration: 'fast',
    });
    $('.datepicker').datepicker('option', $.extend({ showMonthAfterYear: false },
        $.datepicker.regional['fr']));

    /* Barre menu */
    var sco_menu_position = { my: "left top", at: "left bottom" };
    $("#sco_menu").menu({
        position: sco_menu_position,
        blur: function () {
            $(this).menu("option", "position", sco_menu_position);
        },
        focus: function (e, ui) {
            if ($("#sco_menu").get(0) !== $(ui).get(0).item.parent().get(0)) {
                $(this).menu("option", "position", { my: "left top", at: "right top" });
            }
        }
    }).mouseleave(function (x, y) {
        $("#sco_menu").menu('collapseAll');
    });

    $("#sco_menu > li > a > span").switchClass("ui-icon-carat-1-e", "ui-icon-carat-1-s");

    /* Les menus isoles dropdown */
    $(".sco_dropdown_menu").menu({
        position: sco_menu_position
    }).mouseleave(function (x, y) {
        $(".sco_dropdown_menu").menu('collapseAll');
    }
    );
    $(".sco_dropdown_menu > li > a > span").switchClass("ui-icon-carat-1-e", "ui-icon-carat-1-s");

    /* up-to-date status */
    var update_div = document.getElementById("update_warning");
    if (update_div) {
        fetch('install_info').then(
            response => response.text()
        ).then(text => {
            update_div.innerHTML = text;
            if (text) {
                update_div.style.display = "block";
            }
        });
    }
});

// Affiche un message transitoire
function sco_message(msg, color) {
    if (color === undefined) {
        color = "green";
    }
    $('#sco_msg').html(msg).show();
    if (color) {
        $('#sco_msg').css('color', color);
    }
    setTimeout(
        function () {
            $('#sco_msg').fadeOut(
                'slow',
                function () {
                    $('#sco_msg').html('');
                }
            );
        },
        3000 // <-- duree affichage en milliseconds  
    );
}


function get_query_args() {
    var s = window.location.search; // eg "?x=1&y=2"
    var vars = {};
    s.replace(
        /[?&]+([^=&]+)=?([^&]*)?/gi, // regexp
        function (m, key, value) { // callback
            vars[key] = value !== undefined ? value : '';
        }
    );
    return vars;
}


// Tables (gen_tables)
$(function () {
    var table_options = {
        "paging": false,
        "searching": false,
        "info": false,
        /* "autoWidth" : false, */
        "fixedHeader": {
            "header": true,
            "footer": true
        },
        "orderCellsTop": true, // cellules ligne 1 pour tri 
        "aaSorting": [], // Prevent initial sorting
    };
    $('table.gt_table').DataTable(table_options);
    table_options["searching"] = true;
    $('table.gt_table_searchable').DataTable(table_options);
});


// Show tags (readonly)
function readOnlyTags(nodes) {
    // nodes are textareas, hide them and create a span showing tags
    for (var i = 0; i < nodes.length; i++) {
        var node = $(nodes[i]);
        node.hide();
        var tags = nodes[i].value.split(',');
        node.after('<span class="ro_tags"><span class="ro_tag">' + tags.join('</span><span class="ro_tag">') + '</span></span>');
    }
}

/* Editeur pour champs
 *   Usage: créer un élément avec data-oid (object id)
 *  La méthode d'URL save sera appelée en POST avec deux arguments: oid et value, 
 *  value contenant la valeur du champs.
 * Inspiré par les codes et conseils de Seb. L.
 */
class ScoFieldEditor {
    constructor(selector, save_url, read_only) {
        this.save_url = save_url;
        this.read_only = read_only;
        this.selector = selector;
        this.installListeners();
    }
    // Enregistre l'élément obj
    save(obj) {
        var value = obj.innerText.trim();
        if (value.length == 0) {
            value = "";
        }
        if (value == obj.dataset.value) {
            return true;	// Aucune modification, pas d'enregistrement mais on continue normalement
        }
        obj.classList.add("sco_wait");
        // DEBUG
        // console.log(`
        //     data : ${value},
        //     id: ${obj.dataset.oid}
        // `);

        $.post(this.save_url,
            {
                oid: obj.dataset.oid,
                value: value,
            },
            function (result) {
                obj.classList.remove("sco_wait");
                obj.classList.add("sco_modified");
            }
        );
        return true;
    }
    /*****************************/
    /* Gestion des évènements    */
    /*****************************/
    installListeners() {
        if (this.read_only) {
            return;
        }
        document.body.addEventListener("keydown", this.key);
        let editor = this;
        this.handleSelectCell = (event) => { editor.selectCell(event) };
        this.handleModifCell = (event) => { editor.modifCell(event) };
        this.handleBlur = (event) => { editor.blurCell(event) };
        this.handleKeyCell = (event) => { editor.keyCell(event) };
        document.querySelectorAll(this.selector).forEach(cellule => {
            cellule.addEventListener("click", this.handleSelectCell);
            cellule.addEventListener("dblclick", this.handleModifCell);
            cellule.addEventListener("blur", this.handleBlur);
        });
    }
    /*********************************/
    /* Interaction avec les cellules */
    /*********************************/
    blurCell(event) {
        let currentModif = document.querySelector(".sco_modifying");
        if (currentModif) {
            if (!this.save(currentModif)) {
                return;
            }
        }
    }
    selectCell(event) {
        let obj = event.currentTarget;
        if (obj) {
            if (obj.classList.contains("sco_modifying")) {
                return; // Cellule en cours de modification, ne pas sélectionner.
            }
            let currentModif = document.querySelector(".sco_modifying");
            if (currentModif) {
                if (!this.save(currentModif)) {
                    return;
                }
            }

            this.unselectCell();
            obj.classList.add("sco_selected");
        }
    }
    unselectCell() {
        document.querySelectorAll(".sco_selected, .sco_modifying").forEach(cellule => {
            cellule.classList.remove("sco_selected", "sco_modifying");
            cellule.removeAttribute("contentEditable");
            cellule.removeEventListener("keydown", this.handleKeyCell);
        });
    }
    modifCell(event) {
        let obj = event.currentTarget;
        if (obj) {
            obj.classList.add("sco_modifying");
            obj.contentEditable = true;
            obj.addEventListener("keydown", this.handleKeyCell);
            obj.focus();
        }
    }
    key(event) {
        switch (event.key) {
            case "Enter":
                this.modifCell(document.querySelector(".sco_selected"));
                event.preventDefault();
                break;
        }
    }
    keyCell(event) {
        let obj = event.currentTarget;
        if (obj) {
            if (event.key == "Enter") {
                event.preventDefault();
                event.stopPropagation();
                if (!this.save(obj)) {
                    return
                }
                obj.classList.remove("sco_modifying");
                // ArrowMove(0, 1);
                // modifCell(document.querySelector(".sco_selected"));
                this.unselectCell();
            }
        }
    }
}