osm-commerces/templates/public/dashboard.html.twig

{% extends 'base.html.twig' %}

{% block title %}Tableau de bord{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href='{{ asset('js/maplibre/maplibre-gl.css') }}' rel='stylesheet' />
    <style>
        .hidden {
            display: none;
        }
        #mapDashboard {
            height: 400px;
            width: 100%;
            margin-bottom: 1rem;
        }
    </style>
{% endblock %}

{% block javascripts %}
    {{ parent() }}

    <script src='{{ asset('js/maplibre/maplibre-gl.js') }}'></script> 
    <script >
    

        // Fonction pour rechercher avec Addok
        

        // Créer et configurer la liste de suggestions
        const suggestionList = document.createElement('ul');
        suggestionList.style.cssText = `
            list-style: none;
            padding: 0;
            margin: 0;
            border: 1px solid #ccc;
            border-top: none;
            max-height: 200px;
            overflow-y: auto;
            position: absolute;
            background: white;
            width: 100%;
            z-index: 1000;
        `;

        // Configurer l'input de recherche
        document.addEventListener('DOMContentLoaded', () => {
            const searchInput = document.getElementById('app_admin_labourer');
            const inputContainer = searchInput.parentElement;
            
            // Ajouter un conteneur relatif pour le positionnement
            const searchWrapper = document.createElement('div');
            searchWrapper.style.position = 'relative';
            inputContainer.appendChild(searchWrapper);
            searchWrapper.appendChild(searchInput);
            searchWrapper.appendChild(suggestionList);

            let debounceTimer;

            searchInput.addEventListener('input', async (e) => {
                clearTimeout(debounceTimer);
                debounceTimer = setTimeout(async () => {
                    const query = e.target.value;
                    if (query.length < 2) {
                        suggestionList.innerHTML = '';
                        return;
                    }

                    const suggestions = await searchInseeCode(query);
                    suggestionList.innerHTML = '';
                    
                    if (suggestions.length === 0) {
                        const li = document.createElement('li');
                        li.style.cssText = `
                            padding: 8px 12px;
                            color: #666;
                            font-style: italic;
                        `;
                        li.textContent = 'Aucun résultat trouvé';
                        suggestionList.appendChild(li);
                        return;
                    }
                    
                    suggestions.forEach(suggestion => {
                        const li = document.createElement('li');
                        li.style.cssText = `
                            padding: 8px 12px;
                            cursor: pointer;
                            border-bottom: 1px solid #eee;
                        `;
                        li.textContent = suggestion.label;
                        
                        li.addEventListener('mouseenter', () => {
                            li.style.backgroundColor = '#f0f0f0';
                        });
                        
                        li.addEventListener('mouseleave', () => {
                            li.style.backgroundColor = 'white';
                        });
                        
                        li.addEventListener('click', () => {
                            searchInput.value = suggestion.postcode;
                            suggestionList.innerHTML = '';
                            labourer();
                        });
                        
                        suggestionList.appendChild(li);
                    });
                }, 300);
            });

            // Cacher la liste quand on clique ailleurs
            document.addEventListener('click', (e) => {
                if (!inputContainer.contains(e.target)) {
                    suggestionList.innerHTML = '';
                }
            });
        });
        // Définir la fonction labourer dans le scope global
        function labourer() {
            window.location.href = '/admin/labourer/' + document.getElementById('app_admin_labourer').value;
        }

        // Créer une carte des villes avec les codes postaux
        {# let map = new maplibregl.Map({
            container: 'mapDashboard',
            style: 'https://api.maptiler.com/maps/basic-v2/style.json?key={{ maptiler_token }}',
            center: [2.3488, 48.8534], // Paris
            zoom: 10
        }); #}
 
        // Fonction pour obtenir la couleur selon le pourcentage
        function getColorFromPercent(percent) {
            const red = Math.round(255 * (1 - percent/100));
            const green = Math.round(255 * (percent/100));
            return `rgb(${red}, ${green}, 0)`;
        }

       

        // Attendre le chargement du DOM
        document.addEventListener('DOMContentLoaded', async function() {
            // Récupérer le bouton labourer
            const btnLabourer = document.querySelector('#labourer');
            if (btnLabourer) {
                // Ajouter l'écouteur d'événement click
                btnLabourer.addEventListener('click', function() {
                    // Récupérer la valeur du code postal
                    const codePostal = document.querySelector('#app_admin_labourer').value;
                    // Rediriger vers la route de labourage avec le code postal
                    window.location.href = `/admin/labourer/${codePostal}`;
                });
            }

            const postalCodes = [{% for stat in stats %}'{{ stat.zone }}'{% if not loop.last %}, {% endif %}{% endfor %}];
            {% verbatim %}
            console.log(postalCodes);
            let postalLines = ``;
            postalCodes.forEach(code => {
                if (/^\d+$/.test(code)) {
                    postalLines += `
area["postal_code"="${code}"]->.searchArea_${code};
nwr["admin_level"="8"]["name"](area.searchArea_${code});`;
                }
            });
            const query = `[out:json][timeout:25];
(
${postalLines}
);
out body;
>;
out skel qt;`;
            {% endverbatim %}
 
             
 
        });
    </script>
{% endblock %}

{% block body %}
<div class="container mt-4">
    <div class="row">
        <div class="col-12">
            <h1>Dashboard</h1>
        </div>
        <div class="col-12">
            <h2>Statistiques : {{ stats|length }} codes postaux</h2>
 
            {# <div id="mapDashboard"></div> #}
            

              <table class="table table-hover table-striped table-responsive">
                  <thead>
                      <tr>
                          <th>Zone</th>
                          <th>Nombre de lieux</th>
                          <th>Complétude %</th>
                          <th>Actions</th>
                      </tr>
                  </thead>
                  <tbody>
                      {% for stat in stats %}
                          <tr>
                              <td>
                              <a href="{{ path('app_admin_stats', {'zip_code': stat.zone}) }}">{{ stat.zone }} {{ stat.name }}</a>
                              </td>
                              <td>{{ stat.placesCount }}</td>
                              <td style="background : rgba(0 , 255, 0, {{stat.completionPercent / 100 }} )">{{ stat.completionPercent }}</td>
                              <td>
                              <a class="btn btn-sm btn-primary" href="{{ path('app_admin_stats', {'zip_code': stat.zone}) }}"><i class="bi bi-eye"></i></a>
                              <a class="btn btn-sm btn-warning" href="{{ path('app_admin_labourer', {'zip_code': stat.zone}) }}"><i class="bi bi-arrow-repeat"></i></a>
                              <a class="btn btn-sm btn-danger" href="{{ path('app_admin_delete_by_zone', {'zip_code': stat.zone}) }}"><i class="bi bi-trash"></i></a>
                              </td>
                          </tr>
                      {% endfor %}
                  </tbody>
              </table>

              {% if totalPages > 1 %}
              <nav aria-label="Page navigation">
                  <ul class="pagination justify-content-center">
                      {% if currentPage > 1 %}
                          <li class="page-item">
                              <a class="page-link" href="{{ path('app_public_dashboard', {'page': currentPage - 1}) }}">Précédent</a>
                          </li>
                      {% endif %}
                      
                      {% for i in 1..totalPages %}
                          <li class="page-item {% if i == currentPage %}active{% endif %}">
                              <a class="page-link" href="{{ path('app_public_dashboard', {'page': i}) }}">{{ i }}</a>
                          </li>
                      {% endfor %}
                      
                      {% if currentPage < totalPages %}
                          <li class="page-item">
                              <a class="page-link" href="{{ path('app_public_dashboard', {'page': currentPage + 1}) }}">Suivant</a>
                          </li>
                      {% endif %}
                  </ul>
              </nav>
              {% endif %}

              <h2>{{ places_count }} Lieux</h2>
              <h2><button class="btn btn-primary" id="labourer">Labourer les mises à jour</button></h2>
              <label for="app_admin_labourer">Rechercher une ville par son nom 
              <div id="loading_search_insee" class="d-none">
                <div class="spinner-grow text-primary" role="status">
                    <span class="sr-only">Chargement...</span>
                </div>
              </div>
              </label>
              <input class="form-control" type="text" id="app_admin_labourer" placeholder="Entrez le nom d'une ville...">
              <div id="suggestionList" class="suggestion-list"></div>

          </div>
    </div>
</div>
{% endblock %}