osm-labo/templates/admin/osmose_issues_map.html.twig

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

{% block title %}Carte des problèmes Osmose - {{ city.name }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        #map {
            height: 70vh;
            width: 100%;
            margin-bottom: 20px;
        }
        .filters {
            margin-bottom: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 5px;
        }
        .issue-list {
            max-height: 500px;
            overflow-y: auto;
        }
        .issue-item {
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 5px;
            background-color: #f8f9fa;
            border-left: 4px solid #007bff;
        }
        .issue-item.level-1 {
            border-left-color: #dc3545; /* Rouge pour les erreurs critiques */
        }
        .issue-item.level-2 {
            border-left-color: #fd7e14; /* Orange pour les erreurs importantes */
        }
        .issue-item.level-3 {
            border-left-color: #ffc107; /* Jaune pour les avertissements */
        }
        .marker-cluster-small {
            background-color: rgba(181, 226, 140, 0.6);
        }
        .marker-cluster-small div {
            background-color: rgba(110, 204, 57, 0.6);
        }
        .marker-cluster-medium {
            background-color: rgba(241, 211, 87, 0.6);
        }
        .marker-cluster-medium div {
            background-color: rgba(240, 194, 12, 0.6);
        }
        .marker-cluster-large {
            background-color: rgba(253, 156, 115, 0.6);
        }
        .marker-cluster-large div {
            background-color: rgba(241, 128, 23, 0.6);
        }
        .marker-level-1 {
            background-color: #dc3545;
            border-radius: 50%;
            width: 100%;
            height: 100%;
        }
        .marker-level-2 {
            background-color: #fd7e14;
            border-radius: 50%;
            width: 100%;
            height: 100%;
        }
        .marker-level-3 {
            background-color: #ffc107;
            border-radius: 50%;
            width: 100%;
            height: 100%;
        }
        .no-issues {
            padding: 20px;
            text-align: center;
            background-color: #f8f9fa;
            border-radius: 5px;
            margin-top: 20px;
        }
    </style>
{% endblock %}

{% block body %}
    <div class="container mt-4">
        <h1>Problèmes Osmose pour {{ city.name }}</h1>
        
        <div class="filters">
            <form method="get" action="{{ path('app_admin_osmose_issues_map', {'inseeCode': city.zone}) }}" class="row">
                <div class="col-md-6">
                    <label for="theme">Filtrer par thème</label>
                    <select name="theme" id="theme" class="form-select" onchange="this.form.submit()">
                        <option value="all" {{ theme == 'all' ? 'selected' : '' }}>Tous les thèmes</option>
                        {% for themeKey, themeLabel in themes %}
                            {% if themeKey != 'other' or issuesByTheme['other'] > 0 %}
                                <option value="{{ themeKey }}" {{ theme == themeKey ? 'selected' : '' }}>
                                    {{ themeLabel }}{% if issuesByTheme[themeKey] > 0 %} ({{ issuesByTheme[themeKey] }}){% endif %}
                                </option>
                            {% endif %}
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-6 text-end">
                    <div class="btn-group">
                        <a href="{{ osmoseApiUrl }}" target="_blank" class="btn btn-primary">
                            <i class="fas fa-external-link-alt"></i> Voir sur Osmose
                        </a>
                        <a href="{{ jsonOsmose }}" target="_blank" class="btn btn-success">
                            <i class="fas fa-download"></i> Télécharger GeoJSON
                        </a>
                    </div>
                </div>
            </form>
        </div>
        
        <!-- Statistiques des alertes -->
        <div class="row mb-4">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h5 class="card-title mb-0">Répartition par thème</h5>
                    </div>
                    <div class="card-body">
                        {% if osmoseIssues|length > 0 %}
                            <div class="row">
                                {% for themeKey, count in issuesByTheme %}
                                    {% if count > 0 %}
                                        <div class="col-md-6 mb-2">
                                            <div class="d-flex justify-content-between">
                                                <span>{{ themes[themeKey] }}</span>
                                                <span class="badge bg-primary">{{ count }}</span>
                                            </div>
                                            <div class="progress">
                                                <div class="progress-bar" role="progressbar" 
                                                    style="width: {{ (count / osmoseIssues|length * 100)|round }}%;" 
                                                    aria-valuenow="{{ count }}" 
                                                    aria-valuemin="0" 
                                                    aria-valuemax="{{ osmoseIssues|length }}">
                                                </div>
                                            </div>
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            </div>
                        {% else %}
                            <p class="text-center">Aucun problème trouvé</p>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h5 class="card-title mb-0">Répartition par niveau de sévérité</h5>
                    </div>
                    <div class="card-body">
                        {% if osmoseIssues|length > 0 %}
                            <div class="row">
                                <div class="col-md-12 mb-2">
                                    <div class="d-flex justify-content-between">
                                        <span>Critique</span>
                                        <span class="badge bg-danger">{{ issuesByLevel[1] }}</span>
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar bg-danger" role="progressbar" 
                                            style="width: {{ (issuesByLevel[1] / osmoseIssues|length * 100)|round }}%;" 
                                            aria-valuenow="{{ issuesByLevel[1] }}" 
                                            aria-valuemin="0" 
                                            aria-valuemax="{{ osmoseIssues|length }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12 mb-2">
                                    <div class="d-flex justify-content-between">
                                        <span>Important</span>
                                        <span class="badge bg-warning text-dark">{{ issuesByLevel[2] }}</span>
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar bg-warning" role="progressbar" 
                                            style="width: {{ (issuesByLevel[2] / osmoseIssues|length * 100)|round }}%;" 
                                            aria-valuenow="{{ issuesByLevel[2] }}" 
                                            aria-valuemin="0" 
                                            aria-valuemax="{{ osmoseIssues|length }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12 mb-2">
                                    <div class="d-flex justify-content-between">
                                        <span>Avertissement</span>
                                        <span class="badge bg-info">{{ issuesByLevel[3] }}</span>
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar bg-info" role="progressbar" 
                                            style="width: {{ (issuesByLevel[3] / osmoseIssues|length * 100)|round }}%;" 
                                            aria-valuenow="{{ issuesByLevel[3] }}" 
                                            aria-valuemin="0" 
                                            aria-valuemax="{{ osmoseIssues|length }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% else %}
                            <p class="text-center">Aucun problème trouvé</p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        
        <div id="map"></div>
        
        <div class="row mt-4">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                        <h3 class="mb-0">Liste des problèmes ({{ osmoseIssues|length }})</h3>
                        <div class="btn-group">
                            <button class="btn btn-sm btn-light" id="sort-by-level">Trier par sévérité</button>
                            <button class="btn btn-sm btn-light" id="sort-by-item">Trier par type</button>
                        </div>
                    </div>
                    <div class="card-body">
                        {% if osmoseIssues|length > 0 %}
                            <div class="issue-list">
                                {% for issue in osmoseIssues %}
                                    <div class="issue-item level-{{ issue.level }}" data-lat="{{ issue.lat }}" data-lon="{{ issue.lon }}" data-level="{{ issue.level }}" data-item="{{ issue.item }}">
                                        <div class="row">
                                            <div class="col-md-9">
                                                <h5>{{ issue.title }}</h5>
                                                {% if issue.subtitle %}
                                                    <p class="text-muted">{{ issue.subtitle }}</p>
                                                {% endif %}
                                                <div class="d-flex gap-2 mt-2">
                                                    <span class="badge bg-secondary">Item: {{ issue.item }}</span>
                                                    {% if issue.level == 1 %}
                                                        <span class="badge bg-danger">Critique</span>
                                                    {% elseif issue.level == 2 %}
                                                        <span class="badge bg-warning text-dark">Important</span>
                                                    {% elseif issue.level == 3 %}
                                                        <span class="badge bg-info">Avertissement</span>
                                                    {% endif %}
                                                </div>
                                            </div>
                                            <div class="col-md-3 text-end d-flex flex-column justify-content-between">
                                                <a href="{{ issue.url }}" target="_blank" class="btn btn-sm btn-primary mb-2">
                                                    <i class="fas fa-external-link-alt"></i> Voir sur Osmose
                                                </a>
                                                <button class="btn btn-sm btn-outline-secondary locate-on-map">
                                                    <i class="fas fa-map-marker-alt"></i> Localiser sur la carte
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="no-issues">
                                <p class="text-center">Aucun problème Osmose trouvé pour cette ville avec le filtre actuel.</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialiser la carte avec MapLibre
            const map = new maplibregl.Map({
                container: 'map',
                style: 'https://api.maptiler.com/maps/streets/style.json?key={{ maptiler_token|default("") }}', // Utiliser MapTiler si disponible
                center: [{{ city.lon }}, {{ city.lat }}], // Note: MapLibre uses [longitude, latitude] order
                zoom: 13
            });
            
            // Gérer les erreurs de chargement de la carte
            map.on('error', function(e) {
                console.error('Erreur de chargement de la carte:', e.error);
                document.getElementById('map').innerHTML = '<div class="alert alert-danger">Erreur de chargement de la carte. Veuillez réessayer plus tard.</div>';
            });
            
            // Ajouter les contrôles de navigation
            map.addControl(new maplibregl.NavigationControl());
            
            // Attendre que la carte soit chargée
            map.on('load', function() {
                // Créer une source de données pour les marqueurs
                const features = [];
                
                // Ajouter les marqueurs pour chaque problème
                {% for issue in osmoseIssues %}
                    features.push({
                        type: 'Feature',
                        geometry: {
                            type: 'Point',
                            coordinates: [{{ issue.lon }}, {{ issue.lat }}]
                        },
                        properties: {
                            title: "{{ issue.title|e('js') }}",
                            subtitle: "{{ issue.subtitle|e('js') }}",
                            item: "{{ issue.item }}",
                            url: "{{ issue.url }}",
                            level: "{{ issue.level }}"
                        }
                    });
                {% endfor %}
                
                // Vérifier s'il y a des problèmes à afficher
                if (features.length === 0) {
                    // Ajouter un message si aucun problème n'est trouvé
                    const mapContainer = document.getElementById('map');
                    mapContainer.insertAdjacentHTML('afterend', '<div class="alert alert-info mt-3">Aucun problème Osmose trouvé pour cette ville avec le filtre actuel.</div>');
                }
                
                // Ajouter la source de données à la carte
                map.addSource('issues', {
                    type: 'geojson',
                    data: {
                        type: 'FeatureCollection',
                        features: features
                    },
                    cluster: true,
                    clusterMaxZoom: 14,
                    clusterRadius: 50
                });
                
                // Ajouter une couche pour les clusters
                map.addLayer({
                    id: 'clusters',
                    type: 'circle',
                    source: 'issues',
                    filter: ['has', 'point_count'],
                    paint: {
                        'circle-color': [
                            'step',
                            ['get', 'point_count'],
                            'rgba(181, 226, 140, 0.6)',
                            10,
                            'rgba(241, 211, 87, 0.6)',
                            30,
                            'rgba(253, 156, 115, 0.6)'
                        ],
                        'circle-radius': [
                            'step',
                            ['get', 'point_count'],
                            20,
                            10,
                            30,
                            30,
                            40
                        ]
                    }
                });
                
                // Ajouter une couche pour le nombre de points dans chaque cluster
                map.addLayer({
                    id: 'cluster-count',
                    type: 'symbol',
                    source: 'issues',
                    filter: ['has', 'point_count'],
                    layout: {
                        'text-field': '{point_count_abbreviated}',
                        'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
                        'text-size': 12
                    }
                });
                
                // Ajouter une couche pour les points individuels
                map.addLayer({
                    id: 'unclustered-point',
                    type: 'circle',
                    source: 'issues',
                    filter: ['!', ['has', 'point_count']],
                    paint: {
                        'circle-color': [
                            'match',
                            ['get', 'level'],
                            '1', '#dc3545',
                            '2', '#fd7e14',
                            '3', '#ffc107',
                            '#007bff'
                        ],
                        'circle-radius': 10,
                        'circle-stroke-width': 1,
                        'circle-stroke-color': '#fff'
                    }
                });
                
                // Ajouter un événement de clic sur les clusters
                map.on('click', 'clusters', function(e) {
                    const features = map.queryRenderedFeatures(e.point, { layers: ['clusters'] });
                    const clusterId = features[0].properties.cluster_id;
                    
                    map.getSource('issues').getClusterExpansionZoom(clusterId, function(err, zoom) {
                        if (err) return;
                        
                        map.easeTo({
                            center: features[0].geometry.coordinates,
                            zoom: zoom
                        });
                    });
                });
                
                // Ajouter un événement de clic sur les points individuels
                map.on('click', 'unclustered-point', function(e) {
                    const coordinates = e.features[0].geometry.coordinates.slice();
                    const title = e.features[0].properties.title;
                    const subtitle = e.features[0].properties.subtitle;
                    const item = e.features[0].properties.item;
                    const url = e.features[0].properties.url;
                    
                    // Créer le contenu de la popup
                    let popupContent = `
                        <h5>${title}</h5>
                    `;
                    
                    if (subtitle) {
                        popupContent += `<p>${subtitle}</p>`;
                    }
                    
                    popupContent += `
                        <div>
                            <span class="badge bg-secondary">Item: ${item}</span>
                        </div>
                        <div class="mt-2">
                            <a href="${url}" target="_blank" class="btn btn-sm btn-primary">Voir sur Osmose</a>
                        </div>
                    `;
                    
                    // Assurer que si le zoom change, la popup reste à la bonne position
                    while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
                        coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
                    }
                    
                    new maplibregl.Popup()
                        .setLngLat(coordinates)
                        .setHTML(popupContent)
                        .addTo(map);
                });
                
                // Changer le curseur au survol des clusters et des points
                map.on('mouseenter', 'clusters', function() {
                    map.getCanvas().style.cursor = 'pointer';
                });
                map.on('mouseleave', 'clusters', function() {
                    map.getCanvas().style.cursor = '';
                });
                map.on('mouseenter', 'unclustered-point', function() {
                    map.getCanvas().style.cursor = 'pointer';
                });
                map.on('mouseleave', 'unclustered-point', function() {
                    map.getCanvas().style.cursor = '';
                });
                
                // Fonction pour localiser un problème sur la carte
                function locateIssueOnMap(lat, lon) {
                    map.flyTo({
                        center: [lon, lat],
                        zoom: 18
                    });
                    
                    // Simuler un clic sur le point pour ouvrir la popup
                    const features = map.queryRenderedFeatures(
                        map.project([lon, lat]),
                        { layers: ['unclustered-point'] }
                    );
                    
                    if (features.length > 0) {
                        map.fire('click', {
                            lngLat: { lng: lon, lat: lat },
                            point: map.project([lon, lat]),
                            features: [features[0]]
                        });
                    }
                }
                
                // Ajouter un événement de clic sur les boutons "Localiser sur la carte"
                document.querySelectorAll('.locate-on-map').forEach(function(button) {
                    button.addEventListener('click', function(e) {
                        e.stopPropagation(); // Empêcher la propagation au parent
                        const issueItem = this.closest('.issue-item');
                        const lat = parseFloat(issueItem.dataset.lat);
                        const lon = parseFloat(issueItem.dataset.lon);
                        locateIssueOnMap(lat, lon);
                    });
                });
                
                // Ajouter un événement de clic sur les éléments de la liste
                document.querySelectorAll('.issue-item').forEach(function(item) {
                    item.addEventListener('click', function() {
                        const lat = parseFloat(this.dataset.lat);
                        const lon = parseFloat(this.dataset.lon);
                        locateIssueOnMap(lat, lon);
                    });
                });
                
                // Ajuster la vue pour montrer tous les marqueurs si nécessaire
                if (features.length > 0) {
                    // Calculer les limites de tous les points
                    const bounds = new maplibregl.LngLatBounds();
                    features.forEach(function(feature) {
                        bounds.extend(feature.geometry.coordinates);
                    });
                    
                    map.fitBounds(bounds, {
                        padding: 50
                    });
                }
                
                // Fonctions de tri pour les problèmes
                function sortIssuesByLevel() {
                    const issueList = document.querySelector('.issue-list');
                    const issues = Array.from(issueList.querySelectorAll('.issue-item'));
                    
                    issues.sort(function(a, b) {
                        return parseInt(a.dataset.level) - parseInt(b.dataset.level);
                    });
                    
                    issues.forEach(function(issue) {
                        issueList.appendChild(issue);
                    });
                }
                
                function sortIssuesByItem() {
                    const issueList = document.querySelector('.issue-list');
                    const issues = Array.from(issueList.querySelectorAll('.issue-item'));
                    
                    issues.sort(function(a, b) {
                        return parseInt(a.dataset.item) - parseInt(b.dataset.item);
                    });
                    
                    issues.forEach(function(issue) {
                        issueList.appendChild(issue);
                    });
                }
                
                // Ajouter des événements de clic sur les boutons de tri
                document.getElementById('sort-by-level').addEventListener('click', sortIssuesByLevel);
                document.getElementById('sort-by-item').addEventListener('click', sortIssuesByItem);
            });
        });
    </script>
{% endblock %}