mirror of
https://forge.chapril.org/tykayn/osm-commerces
synced 2025-06-20 01:44:42 +02:00
278 lines
11 KiB
Twig
278 lines
11 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% block title %}Tableau de bord{% endblock %}
|
|
|
|
{% block stylesheets %}
|
|
{{ parent() }}
|
|
<link href='{{ asset('js/maplibre/maplibre-gl.css') }}' rel='stylesheet' />
|
|
<style>
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
#mapDashboard {
|
|
height: 400px;
|
|
width: 100%;
|
|
margin-bottom: 1rem;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block javascripts %}
|
|
{{ parent() }}
|
|
|
|
<script src='{{ asset('js/maplibre/maplibre-gl.js') }}'></script>
|
|
<script >
|
|
|
|
|
|
// Fonction pour rechercher avec Addok
|
|
async function searchPostalCode(query) {
|
|
try {
|
|
const response = await fetch(`https://api-adresse.data.gouv.fr/search/?q=${query}&type=municipality&autocomplete=1`);
|
|
const data = await response.json();
|
|
return data.features.map(feature => ({
|
|
label: `${feature.properties.city} (${feature.properties.postcode})`,
|
|
postcode: feature.properties.postcode,
|
|
city: feature.properties.city
|
|
}));
|
|
} catch (error) {
|
|
console.error('Erreur lors de la recherche:', error);
|
|
return [];
|
|
}
|
|
}
|
|
|
|
// Créer et configurer la liste de suggestions
|
|
const suggestionList = document.createElement('ul');
|
|
suggestionList.style.cssText = `
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
border: 1px solid #ccc;
|
|
border-top: none;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
position: absolute;
|
|
background: white;
|
|
width: 100%;
|
|
z-index: 1000;
|
|
`;
|
|
|
|
// Configurer l'input de recherche
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const searchInput = document.getElementById('app_admin_labourer');
|
|
const inputContainer = searchInput.parentElement;
|
|
|
|
// Ajouter un conteneur relatif pour le positionnement
|
|
const searchWrapper = document.createElement('div');
|
|
searchWrapper.style.position = 'relative';
|
|
inputContainer.appendChild(searchWrapper);
|
|
searchWrapper.appendChild(searchInput);
|
|
searchWrapper.appendChild(suggestionList);
|
|
|
|
let debounceTimer;
|
|
|
|
searchInput.addEventListener('input', async (e) => {
|
|
clearTimeout(debounceTimer);
|
|
debounceTimer = setTimeout(async () => {
|
|
const query = e.target.value;
|
|
if (query.length < 2) {
|
|
suggestionList.innerHTML = '';
|
|
return;
|
|
}
|
|
|
|
const suggestions = await searchPostalCode(query);
|
|
suggestionList.innerHTML = '';
|
|
|
|
if (suggestions.length === 0) {
|
|
const li = document.createElement('li');
|
|
li.style.cssText = `
|
|
padding: 8px 12px;
|
|
color: #666;
|
|
font-style: italic;
|
|
`;
|
|
li.textContent = 'Aucun résultat trouvé';
|
|
suggestionList.appendChild(li);
|
|
return;
|
|
}
|
|
|
|
suggestions.forEach(suggestion => {
|
|
const li = document.createElement('li');
|
|
li.style.cssText = `
|
|
padding: 8px 12px;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid #eee;
|
|
`;
|
|
li.textContent = suggestion.label;
|
|
|
|
li.addEventListener('mouseenter', () => {
|
|
li.style.backgroundColor = '#f0f0f0';
|
|
});
|
|
|
|
li.addEventListener('mouseleave', () => {
|
|
li.style.backgroundColor = 'white';
|
|
});
|
|
|
|
li.addEventListener('click', () => {
|
|
searchInput.value = suggestion.postcode;
|
|
suggestionList.innerHTML = '';
|
|
labourer();
|
|
});
|
|
|
|
suggestionList.appendChild(li);
|
|
});
|
|
}, 300);
|
|
});
|
|
|
|
// Cacher la liste quand on clique ailleurs
|
|
document.addEventListener('click', (e) => {
|
|
if (!inputContainer.contains(e.target)) {
|
|
suggestionList.innerHTML = '';
|
|
}
|
|
});
|
|
});
|
|
// Définir la fonction labourer dans le scope global
|
|
function labourer() {
|
|
window.location.href = '/admin/labourer/' + document.getElementById('app_admin_labourer').value;
|
|
}
|
|
|
|
// Créer une carte des villes avec les codes postaux
|
|
let map = new maplibregl.Map({
|
|
container: 'mapDashboard',
|
|
style: 'https://api.maptiler.com/maps/basic-v2/style.json?key={{ maptiler_token }}',
|
|
center: [2.3488, 48.8534], // Paris
|
|
zoom: 10
|
|
});
|
|
|
|
// 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)`;
|
|
}
|
|
|
|
|
|
|
|
// Attendre le chargement du DOM
|
|
document.addEventListener('DOMContentLoaded', async function() {
|
|
// 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}`;
|
|
});
|
|
}
|
|
|
|
const postalCodes = [{% for stat in stats %}'{{ stat.zone }}'{% if not loop.last %}, {% endif %}{% endfor %}];
|
|
{% verbatim %}
|
|
console.log(postalCodes);
|
|
let postalLines = ``;
|
|
postalCodes.forEach(code => {
|
|
if (/^\d+$/.test(code)) {
|
|
postalLines += `
|
|
area["postal_code"="${code}"]->.searchArea_${code};
|
|
nwr["admin_level"="8"]["name"](area.searchArea_${code});`;
|
|
}
|
|
});
|
|
const query = `[out:json][timeout:25];
|
|
(
|
|
${postalLines}
|
|
);
|
|
out body;
|
|
>;
|
|
out skel qt;`;
|
|
{% endverbatim %}
|
|
|
|
console.log(query);
|
|
console.log('https://overpass-api.de/api/interpreter');
|
|
const response = await fetch('https://overpass-api.de/api/interpreter', {
|
|
method: 'POST',
|
|
body: query
|
|
});
|
|
|
|
const data = await response.json();
|
|
console.log('data',data);
|
|
|
|
// Ajouter un marqueur pour chaque point de la réponse
|
|
const bounds = new maplibregl.LngLatBounds();
|
|
|
|
data.elements.forEach(element => {
|
|
if (element.lat && element.lon) {
|
|
bounds.extend([element.lon, element.lat]);
|
|
|
|
const el = document.createElement('div');
|
|
el.className = 'marker';
|
|
el.style.width = '10px';
|
|
el.style.height = '10px';
|
|
el.style.borderRadius = '50%';
|
|
el.style.backgroundColor = '#ff0000';
|
|
|
|
new maplibregl.Marker(el)
|
|
.setLngLat([element.lon, element.lat])
|
|
.setPopup(new maplibregl.Popup({ offset: 25 })
|
|
.setHTML(`<h4>${element.tags?.name || 'Sans nom'}</h4>`))
|
|
.addTo(map);
|
|
}
|
|
});
|
|
|
|
// Recentrer la carte sur les marqueurs
|
|
if (!bounds.isEmpty()) {
|
|
map.fitBounds(bounds, {
|
|
padding: 50
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="container mt-4">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<h1>Dashboard</h1>
|
|
</div>
|
|
<div class="col-12">
|
|
<h2>Statistiques : {{ stats|length }} codes postaux</h2>
|
|
|
|
<div id="mapDashboard"></div>
|
|
|
|
|
|
<table class="table table-hover table-striped table-responsive">
|
|
<thead>
|
|
<tr>
|
|
<th>Zone</th>
|
|
<th>Nombre de lieux</th>
|
|
<th>Complétude %</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for stat in stats %}
|
|
<tr>
|
|
<td>
|
|
<a href="{{ path('app_admin_stats', {'zip_code': stat.zone}) }}">{{ stat.zone }} {{ stat.name }}</a>
|
|
</td>
|
|
<td>{{ stat.placesCount }}</td>
|
|
<td style="background : rgba(0 , 255, 0, {{stat.completionPercent / 100 }} )">{{ stat.completionPercent }}</td>
|
|
<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>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
|
|
<h2>{{ places|length }} Lieux</h2>
|
|
<h2><button class="btn btn-primary" id="labourer">Labourer les mises à jour</button></h2>
|
|
<label for="app_admin_labourer">Rechercher une ville </label>
|
|
<input class="form-control" type="text" id="app_admin_labourer" value="75013">
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|