osm-commerces/templates/admin/stats.html.twig

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

{% block title %}{{ 'display.stats'|trans }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href='https://cdn.jsdelivr.net/npm/maplibre-gl@3.6.2/dist/maplibre-gl.css' rel='stylesheet' />
{% endblock %}

{% block body %}
<div class="container">
    <div class="mt-4 p-4">
        <h1 class="title">{{ 'display.stats'|trans }}</h1>
        <p>
            {{ stats.zone }}
        </p>
         {{ stats.getCompletionPercent() }} % complété sur les critères donnés.
         <br>
         <i class="bi bi-building"></i> {{ stats.getPlacesCount() }} commerces dans la zone.
         <br>
         <i class="bi bi-clock"></i> {{ stats.getAvecHoraires() }} commerces avec horaires.
         <br>
         <i class="bi bi-map"></i> {{ stats.getAvecAdresse() }} commerces avec adresse.
         <br>
         <i class="bi bi-globe"></i> {{ stats.getAvecSite() }} commerces avec site web renseigné.
         <br>
         <i class="bi bi-wheelchair"></i> {{ stats.getAvecAccessibilite() }} commerces avec accessibilité renseignée.
         <br>
         <i class="bi bi-chat-dots"></i> {{ stats.getAvecNote() }} commerces avec note renseignée.
         <br>
    </div>
    <div id="map" style="height: 400px;"></div>
    <div class="card mt-4">
        <h1 class="card-title">Tableau des lieux</h1>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Nom ({{ stats.getPlacesCount() }})</th>
                    <th>Adresse ({{ stats.getAvecAdresse() }} / {{ stats.getPlacesCount() }})</th>
                    <th>Site web ({{ stats.getAvecSite() }} / {{ stats.getPlacesCount() }})</th>
                    <th>Accessibilité ({{ stats.getAvecAccessibilite() }} / {{ stats.getPlacesCount() }})</th>
                    <th>Note ({{ stats.getAvecNote() }} / {{ stats.getPlacesCount() }})</th>
                </tr>
            </thead>
            <tbody>
                {% for commerce in stats.places %}
                    <tr>
                        <td style="background-color: {{ commerce.hasAddress() ? 'yellowgreen' : 'transparent' }};">
                        <a href="{{ path('app_admin_commerce', {'id': commerce.id}) }}">{{ commerce.name }}</a>
                        </td>
                        <td style="background-color: {{ commerce.hasAddress() ? 'yellowgreen' : 'transparent' }};">{{ commerce.address }}</td>
                        <td style="background-color: {{ commerce.hasWebsite() ? 'yellowgreen' : 'transparent' }};">{{ commerce.website }}</td>
                        <td style="background-color: {{ commerce.hasWheelchair() ? 'yellowgreen' : 'transparent' }};">{{ commerce.wheelchair }}</td>
                        <td style="background-color: {{ commerce.hasNote() ? 'yellowgreen' : 'transparent' }};">{{ commerce.note }}</td>      
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<script src='https://cdn.jsdelivr.net/npm/maplibre-gl@3.6.2/dist/maplibre-gl.js'></script>
<script>
    const request = `[out:json][timeout:25];
    area["postal_code"="{{ zip_code }}"]->.searchArea;
    (
        nw["amenity"]["cafe|bar|restaurant|library|cinema|fast_food"]["name"~"."](area.searchArea);
        nw["shop"]["name"~"."](area.searchArea);
        nw["tourism"="museum|hotel|chalet|apartment"]["name"~"."](area.searchArea);
        nw["office"]["name"~"."](area.searchArea);
    );
    out center;
    >;
    out skel qt;
    `; 

    async function fetchland() {
        const encodedRequest = encodeURIComponent(request);
        const overpassUrl = `https://overpass-api.de/api/interpreter?data=${encodedRequest}`;
        const response = await fetch(overpassUrl);
        const data = await response.json();

        const map = new maplibregl.Map({
            container: 'map',
            style: 'https://api.maptiler.com/maps/basic-v2/style.json?key={{ maptiler_token }}',
            center: [2.3488, 48.8534],
            zoom: 12
        });

        map.on('load', () => {
            console.log(data.elements);
            data.elements.forEach(element => {
                if (element.lat && element.lon) {
                    const el = document.createElement('div');
                    el.className = 'marker';
                    el.style.width = '20px';
                    el.style.height = '20px';
                    el.style.borderRadius = '50%';
                    el.style.backgroundColor = '#ff0000';
                    let tagstable = '<table class="table table-bordered"><tr><th>Clé</th><th>Valeur</th></tr>';
                    if (element.tags) {
                        for (const tag in element.tags) {
                            tagstable += `<tr><td>${tag}</td><td>${element.tags[tag]}</td></tr>`;
                        }
                    }
                    tagstable += '</table>';

                    new maplibregl.Marker(el)
                        .setLngLat([element.lon, element.lat])
                        .setPopup(new maplibregl.Popup({ offset: 25 })
                            .setHTML(`<a href="https://openstreetmap.org/${element.type}/${element.id}" target="_blank"><h3>${element.tags?.name || 'Sans nom'}</h3></a> <br> ${tagstable}`))
                        .addTo(map);
                }
            });
        });

        // Calculer les limites (bounds) à partir des marqueurs
        const bounds = new maplibregl.LngLatBounds();
        data.elements.forEach(element => {
            if (element.lat && element.lon) {
                bounds.extend([element.lon, element.lat]);
            }
        });

        // Centrer et zoomer la carte pour inclure tous les marqueurs
        if (!bounds.isEmpty()) {
            map.fitBounds(bounds, {
                padding: 50 // Ajoute une marge autour des marqueurs
            });
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        const headers = document.querySelectorAll('th');
        headers.forEach(header => {
            const text = header.textContent;
            const match = text.match(/\((\d+)\s*\/\s*(\d+)\)/);
            if (match) {
                const [_, completed, total] = match;
                const ratio = completed / total;
                const alpha = ratio.toFixed(2);
                header.style.backgroundColor = `rgba(154, 205, 50, ${alpha})`;
            }
        });

        fetchland();
 
        sortTable();
    });
</script>
{% endblock %}