cent-filtres/Views/inc/filters.js

jQuery( document ).ready(function($) {

    /** Filtrage des propositions **/

        // On crée les var : boite à filtre, et un tableua pour stocker lesdits filtres
        var filters_div = $('#filters-container');
        var current_filters = new Object();


    /**
     * filter_actions
     * ajoute ou supprime les filtres au tableau et la classe selected aux filtres, en fonction de l'élément (et de si c'est select ou statut)
     *
     */

    function filters_action(elem, currentFilters) {
        //Si c'est le select qui a changé, on supprime les filtres par catégorie existants
        if (elem.nodeName === 'OPTION') {
            $('#filters_cat_select option').removeClass('active');
            currentFilters = new Object();
            $(filters_div).children().remove();
        }

        // Si la valeur est nulle on arrête tout
        if (!elem.hasAttribute('filter-id')) {
            $(filters_div).trigger("filters-changed", [currentFilters]);
            changePie(elem, currentFilters);
            return currentFilters;
        }

        //Sinon s'occupe du tableau et de la classe
        var filter_id = elem.getAttribute('filter-id');
        var filter_label = elem.getAttribute('filter-label');

        // Si c'est un filtre de thématique qui a été supprimé, on réinitialise le select et les filtres
        if ($(elem).hasClass('measure-filter') && !isNaN(parseInt(filter_id))) {
            $('#filters_cat_select').prop('selectedIndex', 0);
            // TODO : supprimer les autres filtres (status) si on supprime une catégorie
        }

        // Il y est déjà : on supprime le filtre
        if (filter_id in currentFilters) {
            //suppression du tableau
            delete currentFilters[filter_id];
            //suppression de la barre des filtres
            $(filters_div).children('[filter-id="' + filter_id + '"]').remove();
        }
        // il y est pas : on l'ajoute
        else {
            //ajout dans le tableau
            currentFilters[filter_id] = filter_label;
            // Ajout dans la barre
            var htmlFilter = "<div class='measure-filter' filter-id='" + filter_id + "'><p class='name'>" + filter_label + "</p><div class='filter-close'>+</div></div>";
            filters_div.append(htmlFilter);
        }

        // on switche la classe
        $('#measures-filters-container [filter-id="' + filter_id + '"]').toggleClass('active');

        console.log($(elem).attr('filter-id'));
        if(!isNaN(filter_id)){
            changePie(elem, currentFilters);
        }

        // Enfin on déclenche l'event filters-change
        $(filters_div).trigger("filters-changed", [currentFilters]);

        // On renvoie la liste des filtres mise à jour;
        return currentFilters;
    }

    // Au clic sur un élément (ou change du select), on appelle la fonction avec l'élément (id&label) en argument

    //Les statuts
    $(".home-legend-item .status-title, .pie .pie__segment").click(function(){
        current_filters = filters_action(this, current_filters);
    });
    // les catégories
    $("#filters_cat_select").change(function(){
        var elem = $(this).children(':selected').get(0);
        current_filters = filters_action(elem, current_filters);

        // on change la pie
        changePie(elem, current_filters);
    });
    // La barre de filtres

    $("body").on("click", "div.filters-container .filter-close",  function (){
        elem = $(this).closest('.measure-filter').get(0);
        current_filters = filters_action(elem, current_filters);

    });

    /**
     * filters-changed
     * Evènement gérant l'affichage/masquage des mesures selon les filtres
     */
     $(filters_div).on("filters-changed", function(event, currentFilters) {

         var measures = $("article.measure-wrapper");

         // si aucun filtre on affiche tout
         if ($.isEmptyObject(currentFilters)) {
             measures.show();
             return;
         }

         // On récupère les filtres triés
         var filters = filtersSeparation(currentFilters);

         // On filtre pour afficher/masquer ce qui correspond aux bonnes classe
         measures.filter(filters[0] + filters[1].join(', ' + filters[0] )).show();
         measures.not(filters[0] + filters[1].join(', ' + filters[0] )).hide();

     });
    /**
     * filtersSeparation
     * Spare les filtres en catégories et statuts
     */
    function filtersSeparation(currentFilters){

        // On parcourt le tableau actuel des filtres, et on récupère les ID
        var idsToShow = Object.keys(currentFilters);
        // séparer catégories et statut : si une valeur nupérique est présente dans les filtres, on la récupère et l'extrait.
        var cat = '';
        var status = [];

        // On parcourt la liste des id et on sépare cat et stat
        for (var i = 0; i < idsToShow.length; i++) {

            // Si c'est numérique c'est une catégorie (AND)
            if (!isNaN(parseInt(idsToShow[i]))) {
                cat = '.' + idsToShow[i];
            }
            //sinon c'est un statut (OR)
            else {
                status.push('.' + idsToShow[i]);
            }
        }

        return [cat, status];
    }


    /**
     * ChangePie
     * Met à jour le pie chart à partir de l'option selectionnée
     */

    function changePie(elem, currentFilters) {
        var container = $('div#measures-filters-container');
        var measures = $('div#measures-container');


        // On récupère les filtres triés
        var filters = filtersSeparation(currentFilters);


        // C'est parti pour les calculs !

        // Pour chaque statut, on calcule en fonction des filtres
        var statusNames = ["validated", 'partially-validated', "discussed", "danger",  "rejected", "undiscussed"];
        //total des mesures
        var counts = {'total': measures.children('.measure-wrapper' + filters[0]).length};

        var offset = 0;
        for (var i = 0; i < statusNames.length; i++) {
            // on compte
            counts[statusNames[i]] =  measures.children('.measure-wrapper' + filters[0] + '.' + statusNames[i]).length;

            var percent = counts[statusNames[i]] * 100 / counts['total'];
            var huge = percent > 50 ? 1 : 0;

            // on change les custom val

            container.find('.pie .pie__segment.' + statusNames[i]).css('--value', percent);
            container.find('.pie .pie__segment.' + statusNames[i]).css('--offset', offset);
            container.find('.pie .pie__segment.' + statusNames[i]).css('--over50', huge);
            container.find('.statusTotal.' + statusNames[i]).text(counts[statusNames[i]]);

            //mise à jour de l'offset
            offset = offset + percent;
        }

    }




    /**
     * Recherche de type texte
     *
     */

    var css_selector = ".measure-wrapper, .measure-wrapper";

    /* Par recherche texte */
    function clearSearchField() {
        $(".search-container #measure-search").val("");
    }

    $(".search-container #measure-search").keyup(function() {

        // récupération du query actuel
        var query = $.trim($(this).val());

        if (query === "") { // si il est vide on affiche tout
            // on affiche toutes les propositions, en tenant compte des filtres éventuels
            $(css_selector).show();
        }
        else {
            // on va chercher les mentions de ce query dans les mesures et on cache celles qui ne l'ont pas
            $(css_selector).show().not(':Contains(' + query + ')').hide();
        }
    });

    $(".search-container #measure-search-reset").click(function () {
        clearSearchField();
        $(".search-container #measure-search").trigger("keyup");
    });




});