osm-labo/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;
        }
        .suggestion-list {
            position: absolute;
            background: white;
            border: 1px solid #ddd;
            border-radius: 4px;
            max-height: 200px;
            overflow-y: auto;
            width: 100%;
            z-index: 1000;
            display: none;
        }
        .suggestion-item {
            padding: 8px 12px;
            cursor: pointer;
            border-bottom: 1px solid #eee;
        }
        .suggestion-item:hover {
            background-color: #f5f5f5;
        }
        .suggestion-name {
            font-weight: bold;
        }
        .suggestion-details {
            font-size: 0.9em;
            color: #666;
        }
        .suggestion-type {
            margin-right: 8px;
        }
        .search-container {
            position: relative;
            margin-bottom: 1rem;
        }
    </style>
{% endblock %}


{% block body %}
<div class="container">
    <div class="row">
        <div class="col-12">
            <h1 class="mb-4">Tableau de bord</h1>
        </div>
    </div>
    
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    Statistiques des villes (nombre de commerces)
                </div>
                <div class="card-body">
                    <canvas id="statsBubbleChart" style="min-height: 400px; width: 100%;"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h3 class="card-title">Labourer une ville</h3>
                    <form id="labourerForm">
                        <div class="search-container">
                            <input type="text" 
                                   id="citySearch" 
                                   class="form-control" 
                                   placeholder="Rechercher une ville..."
                                   autocomplete="off">
                            <div id="citySuggestions" class="suggestion-list"></div>
                        </div>
                        <input type="hidden" name="zip_code" id="selectedZipCode">
                        <button type="submit" class="btn btn-primary mt-3">Labourer cette ville</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-12">
            <h2>Statistiques par ville</h2>
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Ville</th>
                            <th>Code postal</th>
                            <th>Complétion</th>
                            <th>Nombre de commerces</th>
                            <th>Lieux par habitants</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for stat in stats %}
                            <tr>
                                <td><a href="{{ path('app_admin_stats', {'insee_code': stat.zone}) }}" title="Voir les statistiques de cette ville">
                                            {{ stat.name }}
                                        {% if not stat.name and stat.zone starts with '751' %}
                                            Paris {{ stat.zone|slice(-2) }}e. 

                                        {% endif %}
                                        </a></td>
                                <td>{{ stat.zone }}</td>
                                <td>{{ stat.completionPercent }}%</td>
                                <td>{{ stat.placesCount }}</td>   
                                <td>{{ (stat.placesCount / (stat.population or 1 ))|round(2) }}</td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <a href="{{ path('app_admin_stats', {'insee_code': stat.zone}) }}" class="btn btn-sm btn-primary" title="Voir les statistiques de cette ville">
                                            <i class="bi bi-eye"></i>   
                                        </a>
                                        <a href="{{ path('app_admin_labourer', {'insee_code': stat.zone}) }}" 
                                           class="btn btn-sm btn-success btn-labourer"
                                           data-zip-code="{{ stat.zone }}"
                                           title="Labourer cette ville"
                                           >
                                            <i class="bi bi-recycle"></i>
                                        </a>
                                        
                                        <a href="{{ path('app_admin_delete_by_zone', {'insee_code': stat.zone}) }}" 
                                           class="btn btn-sm btn-danger"
                                           onclick="return confirm('Êtes-vous sûr de vouloir supprimer cette zone ?')"
                                           title="Supprimer cette ville"
                                           >
                                            <i class="bi bi-trash"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}


{% block javascripts %}
    {{ parent() }}
    {# Les scripts sont maintenant gérés par Webpack Encore via app.js #}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const statsDataRaw = [
                {% for stat in stats %}
                    {% if stat.placesCount > 0 and stat.name is not null and stat.population > 0 %}
                    {
                        label: '{{ (stat.name ~ " (" ~ stat.zone ~ ")")|e('js') }}',
                        placesCount: {{ stat.placesCount }},
                        completion: {{ stat.completionPercent|default(0) }},
                        x: {{ stat.population }},
                        y: {{ (stat.placesCount / stat.population * 1000)|round(2) }}
                    },
                    {% endif %}
                {% endfor %}
            ];

            const ctx = document.getElementById('statsBubbleChart');
            if (ctx && statsDataRaw.length > 0) {
                const statsData = statsDataRaw.map(d => ({
                    ...d,
                    r: Math.sqrt(d.placesCount) * 2.5 // Utilise la racine carrée pour la taille, avec un facteur d'échelle
                }));

                new Chart(ctx.getContext('2d'), {
                    type: 'bubble',
                    data: {
                        datasets: [{
                            label: 'Commerces par ville',
                            data: statsData,
                            backgroundColor: statsData.map(d => `hsla(120, 60%, 70%, ${d.completion / 120 + 0.2})`),
                            borderColor: 'hsl(120, 60%, 40%)',
                            borderWidth: 1,
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                display: false
                            },
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        const data = context.dataset.data[context.dataIndex];
                                        let label = data.label || '';
                                        if (label) {
                                            label += ': ';
                                        }
                                        label += `${data.placesCount} commerces, ${data.y} pour 1000 hab., ${data.completion}% complétion`;
                                        return label;
                                    }
                                }
                            }
                        },
                        scales: {
                            x: {
                                type: 'logarithmic',
                                title: {
                                    display: true,
                                    text: 'Population (échelle log)'
                                }
                            },
                            y: {
                                title: {
                                    display: true,
                                    text: 'Commerces pour 1000 habitants'
                                }
                            }
                        }
                    }
                });
            }

            // La fonction est maintenant globale grâce à l'import dans app.js
            if (typeof colorizePercentageCells === 'function') {
                colorizePercentageCells('td:nth-child(3)');
            }

            // Gérer le formulaire de labourage
            const labourageForm = document.getElementById('labourerForm');
            const citySearchInput = document.getElementById('citySearch');
            const selectedZipCodeInput = document.getElementById('selectedZipCode');
            const labourageBtn = labourageForm.querySelector('button[type="submit"]');
            const originalBtnHtml = labourageBtn.innerHTML;

            if (labourageForm && citySearchInput && typeof setupCitySearch === 'function') {
                setupCitySearch('citySearch', 'citySuggestions', function (suggestion) {
                    // Afficher le spinner et désactiver le bouton
                    labourageBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Chargement...';
                    labourageBtn.disabled = true;
                    citySearchInput.disabled = true;

                    if (suggestion.insee) {
                        window.location.href = `/admin/labourer/${suggestion.insee}`;
                    } else if (suggestion.postcode) {
                        // Moins probable, mais en solution de repli
                        window.location.href = `/admin/labourer/${suggestion.postcode}`;
                    }
                });

                labourageForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    alert("Veuillez rechercher et sélectionner une ville directement dans la liste de suggestions.");
                });
            }
        });
    </script>
{% endblock %}