145 lines
6.6 KiB
Twig
145 lines
6.6 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% block title %}{{ 'display.title'|trans }}{% endblock %}
|
|
|
|
{% block stylesheets %}
|
|
{{ parent() }}
|
|
<link href='{{ asset('js/maplibre/maplibre-gl.css') }}' rel='stylesheet'/>
|
|
<style>
|
|
#citiesMap {
|
|
height: 400px;
|
|
width: 100%;
|
|
margin-bottom: 1rem;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
{% if citiesForMap is not empty %}
|
|
<div id="cities" class="container">
|
|
|
|
<div class="alert-info alert">
|
|
Les contributrices et contributeurs aguerris d'OSM peuvent ajouter ici de quoi suivre les évolutions thématiques de complétion dans une ville donnée.
|
|
</div>
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h3><i class="bi bi-geo-alt"></i> Carte des villes disponibles</h3>
|
|
<p class="mb-0">Cliquez sur un marqueur pour voir les statistiques de la ville</p>
|
|
</div>
|
|
<a href="{{ path('app_public_add_city') }}" class="btn btn-success">
|
|
<i class="bi bi-plus-circle"></i> Ajouter ma ville
|
|
</a>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="map-container">
|
|
<div id="citiesMap"></div>
|
|
<div class="map-legend">
|
|
<div class="legend-item">
|
|
<div class="legend-color" style="background-color: #28a745;"></div>
|
|
<span>Complétion > 80%</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color" style="background-color: #17a2b8;"></div>
|
|
<span>Complétion 50-80%</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color" style="background-color: #ffc107;"></div>
|
|
<span>Complétion < 50%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row city-list ">
|
|
<div id="stats_bubble"></div>
|
|
<div class="mt-5">
|
|
<h2><i class="bi bi-geo-alt"></i> Villes disponibles</h2>
|
|
<p>Visualisez un tableau de bord de la complétion des commerces et autres lieux d'intérêt pour votre
|
|
ville grâce à OpenStreetMap</p>
|
|
|
|
</div>
|
|
{% set sorted_stats = stats|sort((a, b) => a.zone <=> b.zone) %}
|
|
{% for stat in sorted_stats %}
|
|
|
|
|
|
{% if stat.zone != 'undefined' and stat.zone matches '/^\\d+$/' %}
|
|
<a href="{{ path('app_admin_stats', {'insee_code': stat.zone}) }}"
|
|
class="list-group-item list-group-item-action d-flex p-4 rounded-3 justify-content-between align-items-center">
|
|
<div class="d-flex flex-column">
|
|
<span class="zone">{{ stat.zone }}</span>
|
|
<span class="name">{{ stat.name }}</span>
|
|
</div>
|
|
<div class="d-flex flex-column">
|
|
<span class="badge bg-primary rounded-pill">{{ stat.placesCount }} lieux</span>
|
|
<span class="badge rounded-pill completion {% if stat.completionPercent > 80 %}bg-success{% else %}bg-info{% endif %}">{{ stat.completionPercent }}%</span>
|
|
</div>
|
|
</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% include 'public/labourage-form.html.twig' %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
|
|
|
|
{% endblock %}
|
|
{% block javascripts %}
|
|
{{ parent() }}
|
|
<script src='{{ asset('js/maplibre/maplibre-gl.js') }}'></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize the map
|
|
const map = new maplibregl.Map({
|
|
container: 'citiesMap',
|
|
style: 'https://api.maptiler.com/maps/streets/style.json?key={{ maptiler_token }}',
|
|
center: [2.213749, 46.227638], // Center of France
|
|
zoom: 5
|
|
});
|
|
|
|
// Add navigation controls
|
|
map.addControl(new maplibregl.NavigationControl());
|
|
let color = '#ffc107'; // Yellow by default
|
|
// Add markers for each city
|
|
{% if citiesForMap is not empty %}
|
|
{% for city in citiesForMap %}
|
|
{% if city.lat and city.lon %}
|
|
// Determine marker color based on completion percentage
|
|
|
|
{% if city.completionPercent > 80 %}
|
|
color = '#28a745'; // Green for high completion
|
|
{% elseif city.completionPercent > 50 %}
|
|
color = '#17a2b8'; // Blue for medium completion
|
|
{% endif %}
|
|
|
|
// Create marker and popup
|
|
new maplibregl.Marker({color: color})
|
|
.setLngLat([{{ city.lon }}, {{ city.lat }}])
|
|
.setPopup(new maplibregl.Popup().setHTML(`
|
|
<strong>{{ city.name }}</strong><br>
|
|
Code INSEE: {{ city.zone }}<br>
|
|
Nombre de lieux: {{ city.placesCount }}<br>
|
|
Complétion: {{ city.completionPercent }}%<br>
|
|
<a href="{{ path('app_admin_stats', {'insee_code': city.zone}) }}" class="btn btn-sm btn-primary mt-2">
|
|
Voir les statistiques
|
|
</a>
|
|
`))
|
|
.addTo(map);
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
// Enable the labourage form
|
|
if (typeof enableLabourageForm === 'function') {
|
|
enableLabourageForm();
|
|
} else {
|
|
console.error('enableLabourageForm function not found');
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|