2025-05-26 11:32:53 +02:00
{% extends 'base.html.twig' %}
{% block title %} Hello PublicController! {% endblock %}
{% block stylesheets %}
{{ parent ( ) }}
2025-06-01 19:52:56 +02:00
<link href='https://cdn.jsdelivr.net/npm/maplibre-gl@3.6.2/dist/maplibre-gl.css' rel='stylesheet' />
2025-05-26 11:32:53 +02:00
<style>
.hidden {
display: none;
}
2025-06-01 19:52:56 +02:00
#mapDashboard {
height: 400px;
width: 100%;
margin-bottom: 1rem;
}
2025-05-26 11:32:53 +02:00
</style>
{% endblock %}
2025-05-28 17:05:34 +02:00
{% block javascripts %}
{{ parent ( ) }}
2025-06-01 18:56:01 +02:00
2025-06-01 19:52:56 +02:00
<script src='https://cdn.jsdelivr.net/npm/maplibre-gl@3.6.2/dist/maplibre-gl.js'></script>
2025-06-01 23:35:15 +02:00
<script >
2025-06-01 19:52:56 +02:00
// Définir la fonction labourer dans le scope global
2025-05-28 17:05:34 +02:00
function labourer() {
window.location.href = '/admin/labourer/' + document.getElementById('app_admin_labourer').value;
}
2025-06-01 18:56:01 +02:00
// Créer une carte des villes avec les codes postaux
2025-06-01 19:52:56 +02:00
let map = new maplibregl.Map( {
2025-06-01 18:56:01 +02:00
container: 'mapDashboard',
style: 'https://api.maptiler.com/maps/basic-v2/style.json?key= {{ maptiler_token }} ',
center: [2.3488, 48.8534], // Paris
zoom: 10
});
2025-06-01 20:08:57 +02:00
// Fonction pour obtenir la couleur selon le pourcentage
function getColorFromPercent(percent) {
const red = Math.round(255 * (1 - percent/100));
const green = Math.round(255 * (percent/100));
return `rgb($ { red}, $ { green}, 0)`;
}
2025-06-01 18:56:01 +02:00
2025-06-01 20:08:57 +02:00
// Attendre le chargement du DOM
2025-06-01 23:35:15 +02:00
document.addEventListener('DOMContentLoaded', async function() {
2025-06-01 20:08:57 +02:00
// Récupérer le bouton labourer
const btnLabourer = document.querySelector('#labourer');
if (btnLabourer) {
// Ajouter l'écouteur d'événement click
btnLabourer.addEventListener('click', function() {
// Récupérer la valeur du code postal
const codePostal = document.querySelector('#app_admin_labourer').value;
// Rediriger vers la route de labourage avec le code postal
window.location.href = `/admin/labourer/$ { codePostal}`;
});
}
2025-06-01 23:35:15 +02:00
const postalCodes = [ {% for stat in stats %} ' {{ stat .zone }} ' {% if not loop .last %} , {% endif %} {% endfor %} ];
2025-06-01 23:58:00 +02:00
{% verbatim %}
// exemple de recherche de villes par leur code postal:
// [out:json][timeout:25];
// (
// {{ geocodeArea : 7 6 2 0 0 }} ->.searchArea_1;
// nwr["boundary"="administrative"]["admin_level"="8"]
// ["name"](area.searchArea_1);
// {{ geocodeArea : 7 6 0 0 0 }} ->.searchArea_2;
// nwr["boundary"="administrative"]["admin_level"="8"]["name"](area.searchArea_2);
// ) ;
// out center;
{% endverbatim %}
2025-06-01 20:08:57 +02:00
console.log(postalCodes);
2025-06-01 19:52:56 +02:00
let postalLines = ``;
postalCodes.forEach(code => {
if (/^\d+$/.test(code)) {
2025-06-01 23:58:00 +02:00
{% verbatim %}
postalLines += `\n {{ geocodeArea : $ { code }} }->.searchArea_$ { code};\nnwr[admin_level=8]["name"](area.searchArea_$ { code});`
{% endverbatim %}
2025-06-01 19:52:56 +02:00
}
});
2025-06-01 23:35:15 +02:00
const query = `[out:json][timeout:25];
2025-06-01 18:56:01 +02:00
(
2025-06-01 19:52:56 +02:00
$ { postalLines}
2025-06-01 18:56:01 +02:00
);
2025-06-01 19:52:56 +02:00
out center;` ;
2025-06-01 18:56:01 +02:00
console.log(query);
2025-06-01 23:35:15 +02:00
console.log('https://overpass-api.de/api/interpreter');
2025-06-01 18:56:01 +02:00
const response = await fetch('https://overpass-api.de/api/interpreter', {
method: 'POST',
body: query
});
const data = await response.json();
2025-06-01 23:35:15 +02:00
console.log('data',data);
2025-06-01 19:52:56 +02:00
2025-06-01 20:08:57 +02:00
// Ajouter un marqueur pour chaque point de la réponse
const bounds = new maplibregl.LngLatBounds();
2025-06-01 19:52:56 +02:00
2025-06-01 20:08:57 +02:00
data.elements.forEach(element => {
if (element.lat && element.lon) {
bounds.extend([element.lon, element.lat]);
2025-06-01 18:56:01 +02:00
const el = document.createElement('div');
2025-06-01 20:08:57 +02:00
el.className = 'marker';
el.style.width = '10px';
el.style.height = '10px';
2025-06-01 18:56:01 +02:00
el.style.borderRadius = '50%';
2025-06-01 20:08:57 +02:00
el.style.backgroundColor = '#ff0000';
2025-06-01 19:52:56 +02:00
new maplibregl.Marker(el)
2025-06-01 20:08:57 +02:00
.setLngLat([element.lon, element.lat])
.setPopup(new maplibregl.Popup( { offset: 25 })
.setHTML(`<h4>$ { element.tags?.name || 'Sans nom'}</h4>`))
2025-06-01 19:52:56 +02:00
.addTo(map);
2025-06-01 18:56:01 +02:00
}
2025-06-01 20:08:57 +02:00
});
// Recentrer la carte sur les marqueurs
2025-06-01 19:52:56 +02:00
if (!bounds.isEmpty()) {
map.fitBounds(bounds, {
padding: 50
});
}
});
2025-05-28 17:05:34 +02:00
</script>
{% endblock %}
2025-05-26 11:32:53 +02:00
{% block body %}
<div class="container mt-4">
<div class="row">
<div class="col-12">
<h1>Dashboard</h1>
</div>
<div class="col-12">
2025-06-01 19:52:56 +02:00
<h2>Statistiques : {{ stats | length }} codes postaux</h2>
2025-06-01 18:56:01 +02:00
<div id="mapDashboard"></div>
<input class="form-control" type="text" id="app_admin_labourer" value="75013">
2025-06-01 19:52:56 +02:00
<button class="btn btn-default" id="labourer" >Labourer</button>
2025-05-28 17:05:34 +02:00
2025-05-27 12:17:46 +02:00
<table class="table table-hover table-striped table-responsive">
2025-05-26 11:32:53 +02:00
<thead>
<tr>
<th>Zone</th>
<th>Nombre de commerces</th>
<th>Complétude %</th>
2025-05-28 16:24:34 +02:00
<th>Actions</th>
2025-05-26 11:32:53 +02:00
</tr>
</thead>
<tbody>
{% for stat in stats %}
<tr>
2025-05-28 16:24:34 +02:00
<td>
<a href=" {{ path ( 'app_admin_stats' , { 'zip_code' : stat .zone } ) }} "> {{ stat .zone }} </a>
</td>
2025-05-26 11:32:53 +02:00
<td> {{ stat .placesCount }} </td>
<td style="background : rgba(0 , 255, 0, {{ stat .completionPercent / 1 0 0 }} )"> {{ stat .completionPercent }} </td>
2025-05-28 16:24:34 +02:00
<td>
<a class="btn btn-sm btn-primary" href=" {{ path ( 'app_admin_stats' , { 'zip_code' : stat .zone } ) }} "><i class="bi bi-eye"></i></a>
<a class="btn btn-sm btn-warning" href=" {{ path ( 'app_admin_labourer' , { 'zip_code' : stat .zone } ) }} "><i class="bi bi-arrow-repeat"></i></a>
<a class="btn btn-sm btn-danger" href=" {{ path ( 'app_admin_delete_by_zone' , { 'zip_code' : stat .zone } ) }} "><i class="bi bi-trash"></i></a>
</td>
2025-05-26 11:32:53 +02:00
</tr>
{% endfor %}
</tbody>
</table>
2025-06-01 18:56:01 +02:00
<h2> {{ places | length }} Lieux</h2>
{ #
2025-05-27 12:17:46 +02:00
<table class="table table-striped table-hover table-responsive">
2025-05-26 11:32:53 +02:00
<thead>
<tr>
<th>Nom</th>
2025-06-01 19:52:56 +02:00
<th>Tag</th>
2025-05-26 11:32:53 +02:00
<th>Email</th>
<th>Date de modification</th>
<th>Date de dernier contact</th>
2025-05-26 12:57:10 +02:00
<th>Date de dernière modification</th>
<th>Code postal</th>
2025-05-28 16:24:34 +02:00
<th>Actions</th>
2025-05-26 12:57:10 +02:00
2025-05-26 11:32:53 +02:00
</tr>
</thead>
<tbody>
{% for place in places %}
<tr>
2025-06-01 19:52:56 +02:00
2025-05-28 16:24:34 +02:00
<td> {% if place .name %}
2025-05-29 15:42:08 +02:00
<a href=" {{ path ( 'app_public_edit' , { 'zipcode' : place .zipCode , 'name' : place .name | url_encode , 'uuid' : place .uuidForUrl } ) }} "> {{ place .name }} </a>
2025-05-28 16:24:34 +02:00
{% else %}
<a href=" {{ path ( 'app_public_edit' , { 'zipcode' : place .zipCode , 'name' : '?' , 'uuid' : place .uuidForUrl } ) }} "><i class="bi bi-question-circle"></i></a>
{% endif %} </td>
2025-06-01 19:52:56 +02:00
<td> {{ place .mainTag }} </td>
2025-05-26 11:32:53 +02:00
<td> {{ place .email }} </td>
<td> {{ place .modifiedDate | date ( 'Y-m-d H:i:s' ) }} </td>
<td> {{ place .lastContactAttemptDate | date ( 'Y-m-d H:i:s' ) }} </td>
<td> {{ place .modifiedDate | date ( 'Y-m-d H:i:s' ) }} </td>
2025-05-26 12:57:10 +02:00
<td> {{ place .zipCode }} </td>
<td>
2025-05-28 16:24:34 +02:00
<a href="https://www.openstreetmap.org/ {{ place .osmKind }} / {{ place .osmId }} " target="_blank"><i class="bi bi-globe"></i></a>
2025-05-26 12:57:10 +02:00
{% if place .name %}
2025-05-29 15:42:08 +02:00
<a href=" {{ path ( 'app_public_edit' , { 'zipcode' : place .zipCode , 'name' : place .name | url_encode , 'uuid' : place .uuidForUrl } ) }} "><i class="bi bi-pencil"></i></a>
2025-05-26 12:57:10 +02:00
{% else %}
2025-05-28 16:24:34 +02:00
<a href=" {{ path ( 'app_public_edit' , { 'zipcode' : place .zipCode , 'name' : '?' , 'uuid' : place .uuidForUrl } ) }} "><i class="bi bi-pencil"></i></a>
2025-05-26 12:57:10 +02:00
{% endif %}
2025-05-28 16:24:34 +02:00
<a href=" {{ path ( 'app_admin_delete' , { 'id' : place .id } ) }} " onclick="return confirm('Êtes-vous sûr de vouloir supprimer ce lieu ?')"><i class="bi bi-trash"></i></a>
2025-05-26 12:57:10 +02:00
</td>
2025-05-26 11:32:53 +02:00
</tr>
{% endfor %}
</tbody>
2025-06-01 18:56:01 +02:00
</table>
#}
2025-05-26 11:32:53 +02:00
</div>
</div>
</div>
{% endblock %}