{"id":9616,"date":"2026-06-01T11:02:10","date_gmt":"2026-06-01T11:02:10","guid":{"rendered":"https:\/\/planifeducation.gouv.tg\/dpsse\/?page_id=9616"},"modified":"2026-06-01T12:48:02","modified_gmt":"2026-06-01T12:48:02","slug":"tableau-de-bord-ecoles-et-inspections-2","status":"publish","type":"page","link":"https:\/\/planifeducation.gouv.tg\/dpsse\/tableau-de-bord-ecoles-et-inspections-2\/","title":{"rendered":"Tableau de bord \u00e9coles et inspections"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"9616\" class=\"elementor elementor-9616\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-92af082 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"92af082\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-0c9cee5\" data-id=\"0c9cee5\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d0d5aba elementor-widget elementor-widget-html\" data-id=\"d0d5aba\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"schools-directory\">\r\n    <div id=\"loading-message\">\r\n        <div class=\"spinner\"><\/div>\r\n        <p>\ud83d\udd04 Chargement instantan\u00e9 des donn\u00e9es depuis le tableur...<\/p>\r\n    <\/div>\r\n\r\n    <div id=\"schools\" style=\"display: none;\">\r\n        <h2>\ud83d\udcc2 Consultation des tableaux de bord<\/h2>\r\n        \r\n        <div class=\"filter-box\">\r\n            <div class=\"form-group\">\r\n                <label for=\"region\">R\u00e9gion(s)<\/label>\r\n                <select id=\"region\" multiple=\"multiple\" style=\"width:100%\"><\/select>\r\n            <\/div>\r\n         \r\n            <div class=\"form-group\">\r\n                <label for=\"cycle\">Cycle(s)<\/label>\r\n                <select id=\"cycle\" multiple=\"multiple\" style=\"width:100%\" disabled><\/select>\r\n            <\/div>\r\n            \r\n            <div class=\"form-group\">\r\n                <label for=\"iepp\">Inspection(s) \/ IEPP<\/label>\r\n                <select id=\"iepp\" multiple=\"multiple\" style=\"width:100%\" disabled><\/select>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div id=\"pdf-container\">\r\n            <div class=\"table-header-actions\">\r\n                <h3>\ud83d\udcc4 Documents disponibles<\/h3>\r\n                <div class=\"page-size-selector\">\r\n                    <label for=\"page-size\">Lignes par page :<\/label>\r\n                    <select id=\"page-size\">\r\n                        <option value=\"5\">5<\/option>\r\n                        <option value=\"10\" selected>10<\/option>\r\n                        <option value=\"20\">20<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"table-wrapper\">\r\n                <table>\r\n                    <thead>\r\n                        <tr>\r\n                            <th>R\u00e9gion<\/th>\r\n                            <th>Cycle<\/th>\r\n                            <th>Inspection<\/th>\r\n                            <th>Etablissement<\/th>\r\n                            <th>Action<\/th>\r\n                        <\/tr>\r\n                    <\/thead>\r\n                    <tbody id=\"pdf-table-body\">\r\n                        <tr>\r\n                            <td colspan=\"5\" class=\"empty-text\">Veuillez s\u00e9lectionner au moins une inspection (IEPP)<\/td>\r\n                        <\/tr>\r\n                    <\/tbody>\r\n                <\/table>\r\n            <\/div>\r\n\r\n            <div class=\"pagination-container\" id=\"pagination\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n    \/* S'\u00e9tend sur toute la page *\/\r\n    .schools-directory { \r\n        display: block;\r\n        width: 100%; \r\n        max-width: 100%;\r\n        margin: 0 auto; \r\n        background: white; \r\n        border-radius: 12px; \r\n        box-shadow: 0 5px 20px rgba(0,0,0,0.08); \r\n        padding: 20px; \r\n        font-family: 'Segoe UI', sans-serif; \r\n    }\r\n    .schools-directory * { box-sizing: border-box; }\r\n    \r\n    \/* Filtres sur une seule ligne (Flexbox) avec espacement fluide *\/\r\n    .filter-box {\r\n        border: 1px solid #ccc;\r\n        padding: 15px;\r\n        margin: 20px 0;\r\n        background: #f9f9f9;\r\n        border-radius: 6px;\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        gap: 15px;\r\n    }\r\n    .filter-box .form-group { \r\n        flex: 1; \r\n        min-width: 200px; \/* Align\u00e9 sur mobile, c\u00f4te \u00e0 c\u00f4te sur PC *\/\r\n        margin-bottom: 0; \r\n    }\r\n    \r\n    #loading-message { text-align: center; color: #ff9800; padding: 40px 0; }\r\n    .spinner {\r\n        border: 4px solid #f3f3f3; border-top: 4px solid #ff9800; border-radius: 50%;\r\n        width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto 15px;\r\n    }\r\n    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\r\n    h2 { color: #2c3e50; border-bottom: 2px solid #f0f2f5; padding-bottom: 10px; }\r\n    label { display: block; margin-bottom: 8px; font-weight: 600; color: #34495e; font-size: 14px; }\r\n    \r\n    \/* Forcer Select2 \u00e0 prendre 100% du conteneur *\/\r\n    .select2-container { width: 100% !important; }\r\n    \r\n    #pdf-container { margin-top: 30px; background: #f8f9fa; padding: 20px; border-radius: 8px; border: 1px dashed #e6e9ed; }\r\n    \r\n    .table-header-actions {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        flex-wrap: wrap;\r\n        margin-bottom: 15px;\r\n    }\r\n    .table-header-actions h3 { margin: 0; }\r\n    .page-size-selector { display: flex; align-items: center; gap: 8px; }\r\n    .page-size-selector label { margin: 0; font-size: 13px; }\r\n    .page-size-selector select { padding: 4px 8px; border-radius: 4px; border: 1px solid #ccc; }\r\n\r\n    .table-wrapper { overflow-x: auto; width: 100%; }\r\n    table { width: 100%; border-collapse: collapse; background: white; }\r\n    th { background: #1a237e; color: white; text-align: left; }\r\n    td, th { padding: 12px 15px; font-size: 14px; border-bottom: 1px solid #e6e9ed; }\r\n    .btn-download { display: inline-block; background: #c0392b; color: white; text-decoration: none; padding: 6px 12px; border-radius: 4px; }\r\n    .btn-download:hover { background: #a93226; }\r\n    .empty-text { color: #aab2bd; font-style: italic; text-align: center; }\r\n\r\n    \/* Styles pour la pagination *\/\r\n    .pagination-container {\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        gap: 5px;\r\n        margin-top: 15px;\r\n    }\r\n    .pagination-container button {\r\n        background: white;\r\n        border: 1px solid #dcdde1;\r\n        color: #2f3640;\r\n        padding: 6px 12px;\r\n        cursor: pointer;\r\n        border-radius: 4px;\r\n        transition: all 0.2s ease;\r\n    }\r\n    .pagination-container button:hover:not(:disabled) {\r\n        background: #1a237e;\r\n        color: white;\r\n        border-color: #1a237e;\r\n    }\r\n    .pagination-container button.active {\r\n        background: #1a237e;\r\n        color: white;\r\n        border-color: #1a237e;\r\n        font-weight: bold;\r\n    }\r\n    .pagination-container button:disabled {\r\n        opacity: 0.5;\r\n        cursor: not-allowed;\r\n    }\r\n<\/style>\r\n\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/select2@4.1.0-rc.0\/dist\/css\/select2.min.css\" rel=\"stylesheet\" \/>\r\n<script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/select2@4.1.0-rc.0\/dist\/js\/select2.min.js\"><\/script>\r\n    \r\n<script>\r\n$(document).ready(function() {\r\n    \/\/ Initialisation de Select2\r\n    $('#region').select2({ placeholder: \"S\u00e9lectionnez une ou plusieurs r\u00e9gions\" });\r\n    $('#cycle').select2({ placeholder: \"S\u00e9lectionnez un ou plusieurs cycles\" });\r\n    $('#iepp').select2({ placeholder: \"S\u00e9lectionnez une ou plusieurs inspections\" });\r\n\r\n    var globalData = {};\r\n    var allFilteredDocuments = []; \/\/ Stocke les documents filtr\u00e9s pour la pagination\r\n    var currentPage = 1;\r\n    var pageSize = 10;\r\n    \r\n    var idSpreadsheet = \"1P-Hg2yc4kiSlqfNWbRrapOpQitAIFwQyOOmPQ4ClJJs\";\r\n    var nomOnglet = \"etablissement actifs\";\r\n    var urlWebApp = \"https:\/\/docs.google.com\/spreadsheets\/d\/\" + idSpreadsheet + \"\/gviz\/tq?tqx=out:csv&sheet=\" + encodeURIComponent(nomOnglet);\r\n\r\n    \/\/ R\u00e9cup\u00e9ration des donn\u00e9es\r\n    $.get(urlWebApp, function(csvText) {\r\n        var lines = csvText.split(\"\\n\");\r\n        var regionsAjoutees = [];\r\n        var $regionSelect = $('#region');\r\n        \r\n        $regionSelect.empty();\r\n\r\n        for (var i = 1; i < lines.length; i++) {\r\n            if (!lines[i].trim()) continue;\r\n\r\n            var columns = lines[i].split(\/,(?=(?:(?:[^\"]*\"){2})*[^\"]*$)\/);\r\n            \r\n            var region = columns[0] ? columns[0].replace(\/^\"|\"$\/g, '').trim() : \"\";\r\n            var cycle  = columns[1] ? columns[1].replace(\/^\"|\"$\/g, '').trim() : \"\";\r\n            var iepp   = columns[2] ? columns[2].replace(\/^\"|\"$\/g, '').trim() : \"\";\r\n            var school = columns[3] ? columns[3].replace(\/^\"|\"$\/g, '').trim() : \"\";\r\n            var name   = columns[4] ? columns[4].replace(\/^\"|\"$\/g, '').trim() : \"\";\r\n            var url    = columns[5] ? columns[5].replace(\/^\"|\"$\/g, '').trim() : \"\";\r\n\r\n            if (!region) continue;\r\n\r\n            if (!globalData[region]) globalData[region] = {};\r\n            if (!globalData[region][cycle]) globalData[region][cycle] = {};\r\n            if (!globalData[region][cycle][iepp]) globalData[region][cycle][iepp] = {};\r\n            if (!globalData[region][cycle][iepp][school]) globalData[region][cycle][iepp][school] = [];\r\n            \r\n            globalData[region][cycle][iepp][school].push({ \"name\": name, \"url\": url });\r\n\r\n            if ($.inArray(region, regionsAjoutees) === -1) {\r\n                regionsAjoutees.push(region);\r\n                $regionSelect.append('<option value=\"'+region+'\">'+region+'<\/option>');\r\n            }\r\n        }\r\n\r\n        $('#loading-message').hide();\r\n        $('#schools').show();\r\n\r\n    }).fail(function() {\r\n        $('#loading-message').html(\"\u274c Erreur de chargement. V\u00e9rifiez les droits de partage du Google Sheet.\");\r\n    });\r\n\r\n    \/\/ 1. Changement de R\u00e9gion(s)\r\n    $('#region').change(function() {\r\n        var selectedRegions = $(this).val() || [];\r\n        \r\n        $('#cycle').empty().prop('disabled', true);\r\n        $('#iepp').empty().prop('disabled', true);\r\n        resetTable();\r\n\r\n        if (selectedRegions.length > 0) {\r\n            var cyclesAjoutes = [];\r\n            $.each(selectedRegions, function(index, reg) {\r\n                if (globalData[reg]) {\r\n                    $.each(globalData[reg], function(cycle) {\r\n                        if (cycle && $.inArray(cycle, cyclesAjoutes) === -1) {\r\n                            cyclesAjoutes.push(cycle);\r\n                            $('#cycle').append('<option value=\"'+cycle+'\">'+cycle+'<\/option>');\r\n                        }\r\n                    });\r\n                }\r\n            });\r\n            $('#cycle').prop('disabled', false);\r\n        }\r\n        $('#cycle').trigger('change.select2');\r\n        $('#iepp').trigger('change.select2');\r\n    });\r\n    \r\n    \/\/ 2. Changement de Cycle(s)\r\n    $('#cycle').change(function() {\r\n        var selectedRegions = $('#region').val() || [];\r\n        var selectedCycles = $(this).val() || [];\r\n        \r\n        $('#iepp').empty().prop('disabled', true);\r\n        resetTable();\r\n\r\n        if (selectedRegions.length > 0 && selectedCycles.length > 0) {\r\n            var ieppAjoutes = [];\r\n            $.each(selectedRegions, function(i, reg) {\r\n                $.each(selectedCycles, function(j, cyc) {\r\n                    if (globalData[reg] && globalData[reg][cyc]) {\r\n                        $.each(globalData[reg][cyc], function(iepp) {\r\n                            if (iepp && $.inArray(iepp, ieppAjoutes) === -1) {\r\n                                ieppAjoutes.push(iepp);\r\n                                $('#iepp').append('<option value=\"'+iepp+'\">'+iepp+'<\/option>');\r\n                            }\r\n                        });\r\n                    }\r\n                });\r\n            });\r\n            $('#iepp').prop('disabled', false);\r\n        }\r\n        $('#iepp').trigger('change.select2');\r\n    });\r\n\r\n    \/\/ 3. Changement d'IEPP(s)\r\n    $('#iepp').change(function() {\r\n        var selectedRegions = $('#region').val() || [];\r\n        var selectedCycles = $('#cycle').val() || [];\r\n        var selectedIEPPs = $(this).val() || [];\r\n        \r\n        allFilteredDocuments = []; \/\/ On vide le tableau tampon\r\n        currentPage = 1;\r\n\r\n        if (selectedRegions.length > 0 && selectedCycles.length > 0 && selectedIEPPs.length > 0) {\r\n            \r\n            $.each(selectedRegions, function(i, reg) {\r\n                $.each(selectedCycles, function(j, cyc) {\r\n                    $.each(selectedIEPPs, function(k, iepp) {\r\n                        if (globalData[reg] && globalData[reg][cyc] && globalData[reg][cyc][iepp]) {\r\n                            $.each(globalData[reg][cyc][iepp], function(school, files) {\r\n                                $.each(files, function(l, file) {\r\n                                    allFilteredDocuments.push({\r\n                                        reg: reg,\r\n                                        cyc: cyc,\r\n                                        iepp: iepp,\r\n                                        name: school,\r\n                                        url: file.url\r\n                                    });\r\n                                });\r\n                            });\r\n                        }\r\n                    });\r\n                });\r\n            });\r\n\r\n            renderTable();\r\n        } else {\r\n            resetTable();\r\n        }\r\n    });\r\n\r\n    \/\/ Changement du nombre de lignes par page\r\n    $('#page-size').change(function() {\r\n        pageSize = parseInt($(this).val());\r\n        currentPage = 1;\r\n        renderTable();\r\n    });\r\n\r\n    \/\/ Fonction pour r\u00e9initialiser le tableau par d\u00e9faut\r\n    function resetTable() {\r\n        allFilteredDocuments = [];\r\n        $('#pdf-table-body').html('<tr><td colspan=\"5\" class=\"empty-text\">Veuillez s\u00e9lectionner au moins une inspection (IEPP)<\/td><\/tr>');\r\n        $('#pagination').empty();\r\n    }\r\n\r\n    \/\/ Fonction principale de rendu du tableau et de sa pagination\r\n    function renderTable() {\r\n        var $tableBody = $('#pdf-table-body');\r\n        var $paginationContainer = $('#pagination');\r\n        $tableBody.empty();\r\n        $paginationContainer.empty();\r\n\r\n        if (allFilteredDocuments.length === 0) {\r\n            $tableBody.html('<tr><td colspan=\"5\" class=\"empty-text\">Aucun document trouv\u00e9 pour cette s\u00e9lection.<\/td><\/tr>');\r\n            return;\r\n        }\r\n\r\n        \/\/ Calcul des index de d\u00e9coupage\r\n        var startIndex = (currentPage - 1) * pageSize;\r\n        var endIndex = Math.min(startIndex + pageSize, allFilteredDocuments.length);\r\n        var totalPages = Math.ceil(allFilteredDocuments.length \/ pageSize);\r\n\r\n        \/\/ Injection des lignes de la page courante\r\n        for (var i = startIndex; i < endIndex; i++) {\r\n            var doc = allFilteredDocuments[i];\r\n            var rowHtml = '<tr>' +\r\n                '<td>' + doc.reg + '<\/td>' +\r\n                '<td>' + doc.cyc + '<\/td>' +\r\n                '<td>' + doc.iepp + '<\/td>' +\r\n                '<td><strong>' + doc.name + '<\/strong><\/td>' +\r\n                '<td><a class=\"btn-download\" href=\"' + doc.url + '\" target=\"_blank\">T\u00e9l\u00e9charger \ud83d\udce5<\/a><\/td>' +\r\n            '<\/tr>';\r\n            $tableBody.append(rowHtml);\r\n        }\r\n\r\n        \/\/ Construction des boutons de pagination\r\n        if (totalPages > 1) {\r\n            \/\/ Bouton Pr\u00e9c\u00e9dent\r\n            var prevDisabled = currentPage === 1 ? 'disabled' : '';\r\n            $paginationContainer.append('<button '+ prevDisabled +' data-page=\"'+ (currentPage - 1) +'\">\u00ab Pr\u00e9c\u00e9dent<\/button>');\r\n\r\n            \/\/ Boutons de num\u00e9ros de pages\r\n            for (var p = 1; p <= totalPages; p++) {\r\n                var activeClass = currentPage === p ? 'class=\"active\"' : '';\r\n                $paginationContainer.append('<button '+ activeClass +' data-page=\"'+ p +'\">'+ p +'<\/button>');\r\n            }\r\n\r\n            \/\/ Bouton Suivant\r\n            var nextDisabled = currentPage === totalPages ? 'disabled' : '';\r\n            $paginationContainer.append('<button '+ nextDisabled +' data-page=\"'+ (currentPage + 1) +'\">Suivant \u00bb<\/button>');\r\n        }\r\n    }\r\n\r\n    \/\/ Gestion du clic sur les boutons de pagination\r\n    $(document).on('click', '#pagination button', function() {\r\n        var targetPage = parseInt($(this).data('page'));\r\n        if (targetPage) {\r\n            currentPage = targetPage;\r\n            renderTable();\r\n            \/\/ Optionnel : Scroll fluide vers le haut du tableau pour le confort\r\n            $('html, body').animate({ scrollTop: $(\"#pdf-container\").offset().top - 20 }, 300);\r\n        }\r\n    });\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\ud83d\udd04 Chargement instantan\u00e9 des donn\u00e9es depuis le tableur&#8230; \ud83d\udcc2 Consultation des tableaux de bord R\u00e9gion(s) Cycle(s) Inspection(s) \/ IEPP \ud83d\udcc4 Documents disponibles Lignes par page : 51020 R\u00e9gion Cycle Inspection Etablissement Action Veuillez s\u00e9lectionner au moins une inspection (IEPP)<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-9616","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/planifeducation.gouv.tg\/dpsse\/wp-json\/wp\/v2\/pages\/9616","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/planifeducation.gouv.tg\/dpsse\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/planifeducation.gouv.tg\/dpsse\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/planifeducation.gouv.tg\/dpsse\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/planifeducation.gouv.tg\/dpsse\/wp-json\/wp\/v2\/comments?post=9616"}],"version-history":[{"count":18,"href":"https:\/\/planifeducation.gouv.tg\/dpsse\/wp-json\/wp\/v2\/pages\/9616\/revisions"}],"predecessor-version":[{"id":9638,"href":"https:\/\/planifeducation.gouv.tg\/dpsse\/wp-json\/wp\/v2\/pages\/9616\/revisions\/9638"}],"wp:attachment":[{"href":"https:\/\/planifeducation.gouv.tg\/dpsse\/wp-json\/wp\/v2\/media?parent=9616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}