tykayn/osm-labo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

menu latéral ville

Browse source
This commit is contained in:
Tykayn 2025-07-16 17:31:15 +02:00 • committed by tykayn
parent f4c5e048ff
commit 2e459122b5
11 changed files with 1008 additions and 236 deletions
Download patch file Download diff file Expand all files Collapse all files

73
templates/admin/_city_sidebar.html.twig Normal file
View file

@ -0,0 +1,73 @@
{# City Sidebar Template #}
<div class="city-sidebar">
<h5 class="mb-3">{{ stats.name }}</h5>
<p class="badge {% if stats.getCompletionPercent() > 85 %}bg-success{% else %}bg-warning{% endif %} mb-3">
{{ stats.getCompletionPercent() }}% complété
</p>
<!-- Sections de la page -->
<div class="sidebar-heading">Sections</div>
<nav class="nav flex-column">
<a class="nav-link {% if active_menu == 'info-generales' %}active{% endif %}" href="{{ path('app_admin_stats', {'insee_code': stats.zone}) }}#info-generales">
<i class="bi bi-info-circle"></i> Informations générales
</a>
<a class="nav-link {% if active_menu == 'themes' %}active{% endif %}" href="{{ path('app_admin_stats', {'insee_code': stats.zone}) }}#themes">
<i class="bi bi-tags"></i> Thèmes
</a>
<a class="nav-link {% if active_menu == 'carte' %}active{% endif %}" href="{{ path('app_admin_stats', {'insee_code': stats.zone}) }}#carte">
<i class="bi bi-map"></i> Carte
</a>
<a class="nav-link {% if active_menu == 'graphiques' %}active{% endif %}" href="{{ path('app_admin_stats', {'insee_code': stats.zone}) }}#graphiques">
<i class="bi bi-graph-up"></i> Graphiques
</a>
<a class="nav-link {% if active_menu == 'lieux' %}active{% endif %}" href="{{ path('app_admin_stats', {'insee_code': stats.zone}) }}#lieux">
<i class="bi bi-building"></i> Lieux
</a>
<a class="nav-link {% if active_menu == 'podium' %}active{% endif %}" href="{{ path('app_admin_stats', {'insee_code': stats.zone}) }}#podium">
<i class="bi bi-trophy"></i> Podium
</a>
</nav>
<!-- Pages liées -->
<div class="sidebar-heading">Pages liées</div>
<nav class="nav flex-column">
<a class="nav-link {% if active_menu == 'labourer' %}active{% endif %}" href="{{ path('app_admin_labourer', {'insee_code': stats.zone, 'deleteMissing': 1}) }}">
<i class="bi bi-tools"></i> Labourer les mises à jour
</a>
<a class="nav-link {% if active_menu == 'followup_graph' %}active{% endif %}" href="{{ path('admin_followup_graph', {'insee_code': stats.zone}) }}">
<i class="bi bi-graph-up"></i> Suivi OSM (graphes)
</a>
<a class="nav-link {% if active_menu == 'stats_evolutions' %}active{% endif %}" href="{{ path('app_public_stats_evolutions', {'insee_code': stats.zone}) }}">
<i class="bi bi-activity"></i> Évolutions des objets
</a>
<a class="nav-link {% if active_menu == 'street_completion' %}active{% endif %}" href="{{ path('admin_street_completion', {'insee_code': stats.zone}) }}">
<i class="bi bi-signpost"></i> Complétion des rues
</a>
<a class="nav-link {% if active_menu == 'speed_limit' %}active{% endif %}" href="{{ path('admin_speed_limit', {'insee_code': stats.zone}) }}">
<i class="bi bi-speedometer2"></i> Limites de vitesse
</a>
<a class="nav-link {% if active_menu == 'city_demandes' %}active{% endif %}" href="{{ path('app_public_city_demandes', {'insee_code': stats.zone}) }}">
<i class="bi bi-list-check"></i> Demandes
</a>
</nav>
<!-- Flux RSS -->
<div class="sidebar-heading">Flux RSS</div>
<nav class="nav flex-column">
<a class="nav-link" href="{{ path('app_public_rss_city_demandes', {'insee_code': stats.zone}) }}" target="_blank">
<i class="bi bi-rss"></i> Demandes
</a>
<a class="nav-link" href="{{ path('app_public_rss_city_themes', {'insee_code': stats.zone}) }}" target="_blank">
<i class="bi bi-rss"></i> Changements thématiques
</a>
</nav>
<!-- Actions -->
<div class="sidebar-heading">Actions</div>
<button id="openInJOSM" class="btn btn-secondary btn-sm w-100 mb-2">
<i class="bi bi-map"></i> Ouvrir dans JOSM
</button>
<a href="{{ path('app_admin_labourer', {'insee_code': stats.zone, 'deleteMissing': 1, 'disableFollowUpCleanup': 1}) }}" class="btn btn-warning btn-sm w-100" title="Labourer sans nettoyer les suivis OSM">
<i class="bi bi-shield-check"></i> Labourer (sans nettoyage)
</a>
</div>

175
templates/admin/stats.html.twig
View file

@ -6,6 +6,7 @@
{% block stylesheets %}
{{ parent() }}
<link href='{{ asset('js/maplibre/maplibre-gl.css') }}' rel='stylesheet' />
<link href='{{ asset('css/city-sidebar.css') }}' rel='stylesheet' />
<style>
.completion-circle {
fill-opacity: 0.6;
@ -62,26 +63,26 @@
background: #388e3c;
border-color: #1b5e20;
}
.compact-theme-card {
transition: transform 0.2s ease-in-out;
}
.compact-theme-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}
.theme-title a {
font-size: 0.85rem;
line-height: 1.2;
}
.theme-stats {
font-size: 0.75rem;
color: #6c757d;
}
.theme-actions .btn {
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
@ -115,35 +116,22 @@
{% block body %}
<div class="container">
<div class="mt-4 p-4">
<div class="row">
<div class="col-md-6 col-12">
<h1 class="title">{{ 'display.stats'|trans }} - {{ stats.zone }}
{{ stats.name }} - {{ stats.completionPercent }}% complété</h1>
</div>
<div class="col-md-6 col-12">
<a href="{{ path('app_admin_labourer', {'insee_code': stats.zone, 'deleteMissing': 1}) }}" class="btn btn-primary" id="labourer">Labourer les mises à jour</a>
<a href="{{ path('app_admin_labourer', {'insee_code': stats.zone, 'deleteMissing': 1, 'disableFollowUpCleanup': 1}) }}" class="btn btn-warning ms-2" id="labourer-no-cleanup" title="Labourer sans nettoyer les suivis OSM">
<i class="bi bi-shield-check"></i> Labourer (sans nettoyage)
</a>
<a href="{{ path('admin_followup_graph', {'insee_code': stats.zone}) }}" class="btn btn-info ms-2" id="followup-graph-link">
<i class="bi bi-graph-up"></i> Suivi OSM (graphes)
</a>
<button id="openInJOSM" class="btn btn-secondary ms-2">
<i class="bi bi-map"></i> Ouvrir dans JOSM
</button>
<a href="{{ path('app_public_stats_evolutions', {'insee_code': stats.zone}) }}" class="btn btn-outline-info ms-2">
<i class="bi bi-activity"></i> Évolutions des objets
</a>
<a href="{{ path('admin_street_completion', {'insee_code': stats.zone}) }}" class="btn btn-outline-success ms-2">
<i class="bi bi-signpost"></i> Complétion des rues
</a>
<a href="{{ path('admin_speed_limit', {'insee_code': stats.zone}) }}" class="btn btn-outline-danger ms-2">
<i class="bi bi-speedometer2"></i> Limites de vitesse
</a>
</div>
<div class="container-fluid">
<div class="row">
<!-- Sidebar de navigation -->
<div class="col-12">
{% include 'admin/_city_sidebar.html.twig' with {'stats': stats, 'active_menu': 'info-generales'} %}
</div>
<!-- Contenu principal -->
<div class="col-md-9 col-lg-10 main-content">
<div class="p-4">
<div class="row">
<div class="col-12">
<h1 class="title" id="info-generales">{{ 'display.stats'|trans }} - {{ stats.zone }}
{{ stats.name }} - {{ stats.completionPercent }}% complété</h1>
</div>
</div>
{% if stats.population %}
<div class="row mb-3">
<div class="col-md-4 col-12">
@ -184,17 +172,17 @@
</div>
{% endif %}
{% endif %}
{% if stats.dateLabourageDone %}
<div class="alert alert-info">
Dernier labourage : {{ include('admin/_labourage_time_ago.html.twig', { date: stats.dateLabourageDone }) }}
</div>
{% endif %}
<div class="row">
<div id="followups">
{% set overpass_type_queries = {
'fire_hydrant': 'nwr["emergency"="fire_hydrant"](area.searchArea);',
@ -222,8 +210,9 @@
'infrastructure': ['toilets', 'recycling', 'substation']
} %}
<div class="row mb-4">
<div class="row mb-4" id="themes">
<div class="col-12">
<h2 class="section-anchor">Thèmes</h2>
<ul class="nav nav-tabs" id="themeTabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="tab-table" data-bs-toggle="tab" data-bs-target="#tabTableContent" type="button" role="tab" aria-controls="tabTableContent" aria-selected="true">Tableau</button>
@ -427,14 +416,16 @@
</div>
</div>
<div id="maploader">
<div class="spinner-border" role="status">
<i class="bi bi-load bi-spin"></i>
<span class="visually-hidden">Chargement de la carte...</span>
</div>
</div>
<div id="carte" class="section-anchor">
<h2>Carte</h2>
<div id="maploader">
<div class="spinner-border" role="status">
<i class="bi bi-load bi-spin"></i>
<span class="visually-hidden">Chargement de la carte...</span>
</div>
</div>
<div class="d-flex justify-content-end mb-2">
<div class="btn-group" role="group">
<button type="button" class="btn btn-outline-primary" id="circleMarkersBtn">
@ -449,26 +440,27 @@
</button>
</div>
<div id="map" style="height: 400px; width: 100%; margin-bottom: 1rem;"></div>
<div class="row ">
<div class="col-md-6 col-12 ">
<canvas id="repartition_tags" width="600" height="400" style="max-width:100%; margin: 20px 0;"></canvas>
<div id="graphiques" class="section-anchor">
<h2>Graphiques</h2>
<div class="row">
<div class="col-md-6 col-12">
<canvas id="repartition_tags" width="600" height="400" style="max-width:100%; margin: 20px 0;"></canvas>
</div>
<div class="col-md-6 col-12">
<div class="card">
<div class="card-header">
<i class="bi bi-calendar-event"></i> Fréquence des mises à jour par trimestre pour {{stats.name}}
</div>
<div class="card-body">
<canvas id="modificationsByQuarterChart" style="min-height: 250px; width: 100%;"></canvas>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-12 ">
<div class="card">
<div class="card-header">
<i class="bi bi-calendar-event"></i> Fréquence des mises à jour par trimestre pour {{stats.name}}
</div>
<div class="card-body">
<canvas id="modificationsByQuarterChart" style="min-height: 250px; width: 100%;"></canvas>
</div>
</div>
</div>
</div>
<div id="attribution">
<a href="https://www.openstreetmap.org/copyright">Données OpenStreetMap</a>
@ -479,9 +471,9 @@
<canvas id="distribution_completion" class="mt-4 mb-4" height="400"></canvas>
<div class="row">
<div class="row" id="lieux">
<div class="col-md-6 col-12">
<h1 class="card-title p-4">Tableau des {{ stats.places |length }} lieux</h1>
<h1 class="card-title p-4 section-anchor">Tableau des {{ stats.places |length }} lieux</h1>
</div>
<div class="col-md-6 col-12">
<div class="btn-group mt-4" role="group">
@ -507,8 +499,8 @@
</tbody>
</table>
</div>
</div>
<div class="card mt-4" id="podium">
@ -574,7 +566,7 @@
<div class="card-header">
<h2>Requête Overpass</h2>
<div id=overPassRequest >
<pre>
{{overpass}}
</pre>
@ -609,9 +601,9 @@
<div class="accordion mb-3" id="accordionStats">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
</div>
</div>
<h2 class="accordion-header" id="headingOne"></h2>
</div>
</div>
<!-- Espace de dump JSON -->
<div id="ctc-json-dump-container" class="mt-4" style="display:none;">
@ -653,8 +645,12 @@
</div>
</div>
</div>
<div id="ctc-json-error" class="alert alert-danger mt-4" style="display:none;"></div>
</div>
</div>
</div>
</div>
{% endblock %}
@ -935,7 +931,7 @@
x: { title: { display: true, text: 'Trimestre' } }
}
}
});
} else if (modifCanvas) {
modifCanvas.parentNode.innerHTML = '<div class="alert alert-info">Aucune donnée de modification disponible pour cette ville.</div>';
@ -1026,20 +1022,17 @@
const completionValues = completionLabels.map(label => completionDistribution[label]);
const dc = document.getElementById('distribution_completion');
if(dc ){
if(dc){
const completionCtx = dc.getContext ? dc.getContext('2d') : null;
if(!completionCtx){
console.log('pas de completionCtx' )
return ;
}
console.log('pas de completionCtx');
} else {
new Chart(completionCtx, {
type: 'line',
type: 'bar',
data: {
labels: completionLabels,
tension: 0.3,
datasets: [{
label: 'Distribution du Taux de Complétion',
label: 'Évolution du taux de complétion',
data: completionValues,
backgroundColor: 'rgba(75, 192, 192, 0.5)',
borderColor: 'rgba(75, 192, 192, 1)',
@ -1052,13 +1045,23 @@ if(dc ){
beginAtZero: true
}
},
responsive: true,
responsive: true,
plugins: {
title: {
display: true,
text: 'Évolution du taux de complétion',
font: {
size: 16
}
}
}
}
});
}else{
console.log('pas de distribution_completion')
}
} else {
console.log('pas de distribution_completion');
}
});
</script>
<script>