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

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

{% block title %}Hello PublicController!{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        .hidden {
            display: none;
        }
    </style>
{% endblock %}

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

    <script src='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js'></script> 
    <script>
        function labourer() {
            window.location.href = '/admin/labourer/' + document.getElementById('app_admin_labourer').value;
        }

        mapboxgl.accessToken = '{{ mapbox_token }}'; 
        // Créer une carte des villes avec les codes postaux
        let map = new mapboxgl.Map({
            container: 'mapDashboard',
            style: 'https://api.maptiler.com/maps/basic-v2/style.json?key={{ maptiler_token }}',
            center: [2.3488, 48.8534], // Paris
            zoom: 10
        });

        // Ajouter les marqueurs pour chaque zone
        // Fonction pour récupérer tous les centroides des codes postaux en une seule requête
        async function getAllPostalCodesCoordinates() {
            const postalCodes = [{% for stat in stats %}'{{ stat.zone }}'{% if not loop.last %}, {% endif %}{% endfor %}];
            
            const query = `[out:json];
            
                (
                ${postalCodes.map(code => `
                    nwr["boundary"="postal_code"][postal_code=${code}];
                );
                out center;`;
            console.log(query);
            const response = await fetch('https://overpass-api.de/api/interpreter', {
                method: 'POST',
                body: query
            });
            
            const data = await response.json();
            return data.elements.reduce((acc, element) => {
                // On associe chaque code postal à ses coordonnées
                const postalCode = element.tags.postal_code;
                if (postalCode) {
                    acc[postalCode] = [element.lon, element.lat];
                }
                return acc;
            }, {});
        }

        // 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)`;
        }

        // On récupère toutes les coordonnées en une seule fois
        getAllPostalCodesCoordinates().then(coordinatesMap => {
            {% for stat in stats %}
            {% if not "-" in stat.zone  %}
                const coordinatesMapped{{ stat.zone }} = coordinatesMap['{{ stat.zone }}'];
                if (coordinatesMapped{{ stat.zone }}) {
                    const el = document.createElement('div');
                    el.style.width = '20px';
                    el.style.height = '20px';
                    el.style.borderRadius = '50%';
                    el.style.backgroundColor = getColorFromPercent({{ stat.completionPercent }});

                    new mapboxgl.Marker(el)
                        .setLngLat(coordinatesMapped{{ stat.zone }})
                        .setPopup(new mapboxgl.Popup().setHTML(`
                            <h3>{{ stat.zone }}</h3>
                            <p>Nombre de commerces: {{ stat.placesCount }}</p>
                            <p>Complétude: {{ stat.completionPercent }}%</p>
                        `))
                        .addTo(map);
                }
            {% endif %}
            {% endfor %}
        }); 
    </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 }} commerces</h2>
mapDashboard:
            <div id="mapDashboard"></div>
            <input class="form-control" type="text" id="app_admin_labourer" value="75013">
            <button class="btn btn-default" onclick="labourer() ">Labourer</button>


              <table class="table table-hover table-striped table-responsive">
                  <thead>
                      <tr>
                          <th>Zone</th>
                          <th>Nombre de commerces</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 }}</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>

              <h2>{{ places|length }} Lieux</h2>
              {# 
              <table class="table table-striped table-hover table-responsive">
                  <thead>
                      <tr>
                          <th>Nom</th>
                          <th>Email</th>
                          <th>Date de modification</th>
                          <th>Date de dernier contact</th>
                          <th>Date de dernière modification</th>
                          <th>Code postal</th>
                          <th>Actions</th>
              

                          
                      </tr>
                  </thead>
                  <tbody>
                      {% for place in places %}
                          <tr>
                              <td>{% if place.name %}
                                    <a href="{{ path('app_public_edit', {'zipcode': place.zipCode, 'name': place.name|url_encode, 'uuid': place.uuidForUrl}) }}">{{ place.name }}</a>
                                {% else %}
                                    <a href="{{ path('app_public_edit', {'zipcode': place.zipCode, 'name': '?', 'uuid': place.uuidForUrl}) }}"><i class="bi bi-question-circle"></i></a>
                                {% endif %} </td>
                              <td>{{ place.email }}</td>
                              <td>{{ place.modifiedDate | date('Y-m-d H:i:s') }}</td>
                              <td>{{ place.lastContactAttemptDate | date('Y-m-d H:i:s') }}</td>
                              <td>{{ place.modifiedDate | date('Y-m-d H:i:s') }}</td>
                                <td>{{ place.zipCode }}</td>
                                <td>
                                <a href="https://www.openstreetmap.org/{{place.osmKind}}/{{ place.osmId }}" target="_blank"><i class="bi bi-globe"></i></a>
                                
                                {% if place.name %}
                                    <a href="{{ path('app_public_edit', {'zipcode': place.zipCode, 'name': place.name|url_encode, 'uuid': place.uuidForUrl}) }}"><i class="bi bi-pencil"></i></a>
                                {% else %}
                                    <a href="{{ path('app_public_edit', {'zipcode': place.zipCode, 'name': '?', 'uuid': place.uuidForUrl}) }}"><i class="bi bi-pencil"></i></a>
                                {% endif %}

                                <a href="{{ path('app_admin_delete', {'id': place.id}) }}" onclick="return confirm('Êtes-vous sûr de vouloir supprimer ce lieu ?')"><i class="bi bi-trash"></i></a>
                                </td>
                          </tr>
                      {% endfor %}
                  </tbody>
              </table> 
              #}
          </div>
    </div>
</div>
{% endblock %}