530 lines
No EOL
24 KiB
Twig
530 lines
No EOL
24 KiB
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">
|
|
<a href="{{ osmoseApiUrl }}" target="_blank" class="btn btn-primary">
|
|
<i class="fas fa-external-link-alt"></i> Voir sur Osmose
|
|
</a>
|
|
</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://demotiles.maplibre.org/style.json', // style URL
|
|
center: [{{ city.lon }}, {{ city.lat }}], // Note: MapLibre uses [longitude, latitude] order
|
|
zoom: 13
|
|
});
|
|
|
|
// 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 %}
|
|
|
|
// 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 %} |