mirror of
https://forge.chapril.org/tykayn/osm-commerces
synced 2025-10-09 17:02:46 +02:00
retapage accueil, gestion de Demandes
This commit is contained in:
Tykayn
tykayn
parent
d777221d0d
commit
f4c5e048ff
26 changed files with 2498 additions and 292 deletions
138
templates/public/cities.html.twig
Normal file
138
templates/public/cities.html.twig
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
{% 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 %}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue