up stats page

This commit is contained in:
Tykayn 2025-06-03 12:51:20 +02:00 committed by tykayn
parent a412cb977a
commit e4bf3753b0
9 changed files with 357 additions and 124 deletions

View file

@ -10,6 +10,8 @@
<div class="example-wrapper">
<h1>Labourage fait sur la zone "{{ zone }}" ✅</h1>
<a href="{{ path('app_admin_labourer', {'zip_code': stats.zone}) }}" class="btn btn-primary" id="labourer">Labourer les mises à jour</a>
<a href="{{ path('app_admin_stats', {'zip_code': stats.zone}) }}" class="btn btn-primary" id="labourer">Voir les résultats</a>
<p>
lieux trouvés en plus: {{ results|length }}

View file

@ -13,26 +13,45 @@
<h1 class="title">{{ 'display.stats'|trans }}</h1>
<p>
{{ stats.zone }}
{{ stats.name }}
</p>
{{ stats.getCompletionPercent() }} % complété sur les critères donnés.
<br>
<i class="bi bi-building"></i> {{ stats.getPlacesCount() }} commerces dans la zone.
<br>
<i class="bi bi-clock"></i> {{ stats.getAvecHoraires() }} commerces avec horaires.
<br>
<i class="bi bi-map"></i> {{ stats.getAvecAdresse() }} commerces avec adresse.
<br>
<i class="bi bi-globe"></i> {{ stats.getAvecSite() }} commerces avec site web renseigné.
<br>
<i class="bi bi-wheelchair"></i> {{ stats.getAvecAccessibilite() }} commerces avec accessibilité renseignée.
<br>
<i class="bi bi-chat-dots"></i> {{ stats.getAvecNote() }} commerces avec note renseignée.
<br>
</div>
<a href="{{ path('app_admin_labourer', {'zip_code': stats.zone}) }}" class="btn btn-primary" id="labourer">Labourer les mises à jour</a>
<div class="row">
<div class="col-md-3 col-12">
{{ stats.getCompletionPercent() }} % complété sur les critères donnés.
</div>
<div class="col-md-3 col-12">
<i class="bi bi-building"></i> {{ stats.getPlacesCount() }} commerces dans la zone.
</div>
<div class="col-md-3 col-12">
<i class="bi bi-clock"></i> {{ stats.getAvecHoraires() }} commerces avec horaires.
</div>
<div class="col-md-3 col-12">
<i class="bi bi-map"></i> {{ stats.getAvecAdresse() }} commerces avec adresse.
</div>
<div class="col-md-3 col-12">
<i class="bi bi-globe"></i> {{ stats.getAvecSite() }} commerces avec site web renseigné.
</div>
<div class="col-md-3 col-12">
<i class="bi bi-arrow-up-right"></i>
{{ stats.getAvecAccessibilite() }} commerces avec accessibilité PMR renseignée.
</div>
<div class="col-md-3 col-12">
<i class="bi bi-chat-dots"></i> {{ stats.getAvecNote() }} commerces avec note renseignée.
</div>
</div>
<div id="map" style="height: 400px;"></div>
{# <div id="query" style="height: 400px;"> #}
{# <pre>
{{query_places|raw}}
</pre> #}
</div>
<div class="card mt-4">
<h1 class="card-title">Tableau des lieux</h1>
<table class="table table-bordered">
<h1 class="card-title">Tableau des {{ stats.getPlacesCount() }} lieux</h1>
<a href="{{ path('app_admin_export_csv', {'zip_code': stats.zone}) }}" class="btn btn-primary">Exporter en CSV</a>
<table class="table table-bordered table-striped table-hover table-responsive">
{% include 'admin/stats/table-head.html.twig' %}
<tbody>
{% for commerce in stats.places %}
@ -41,24 +60,34 @@
</tbody>
</table>
</div>
<h2>requête overpass</h2>
<pre>
{{query_places|raw}}
</pre>
</div>
</div>
<script src='https://cdn.jsdelivr.net/npm/maplibre-gl@3.6.2/dist/maplibre-gl.js'></script>
<script>
const request = `[out:json][timeout:25];
area["postal_code"="{{ zip_code }}"]->.searchArea;
(
nw["amenity"]["cafe|bar|restaurant|library|cinema|fast_food"]["name"~"."](area.searchArea);
nw["shop"]["name"~"."](area.searchArea);
nw["tourism"="museum|hotel|chalet|apartment"]["name"~"."](area.searchArea);
nw["office"]["name"~"."](area.searchArea);
);
out center;
>;
out skel qt;
`;
const request = `{{query_places|raw}}`;
const zip_code = `{{stats.zone}}`;
async function fetchland() {
// Requête pour obtenir le contour administratif
const boundaryQuery = `[out:json][timeout:25];
area["postal_code"="${zip_code}"]->.searchArea;
(
relation["boundary"="postal_code"]["postal_code"="${zip_code}"](area.searchArea);
);
out body;
>;
out skel qt;`;
const encodedBoundaryRequest = encodeURIComponent(boundaryQuery);
const boundaryResponse = await fetch(`https://overpass-api.de/api/interpreter?data=${encodedBoundaryRequest}`);
const boundaryData = await boundaryResponse.json();
const encodedRequest = encodeURIComponent(request);
const overpassUrl = `https://overpass-api.de/api/interpreter?data=${encodedRequest}`;
const response = await fetch(overpassUrl);
@ -72,6 +101,40 @@
});
map.on('load', () => {
// Ajouter le contour administratif
if (boundaryData.elements && boundaryData.elements.length > 0) {
const boundary = boundaryData.elements[0];
if (boundary.members) {
const coordinates = boundary.members.map(member => {
if (member.type === 'node') {
return [member.lon, member.lat];
}
}).filter(coord => coord);
map.addSource('boundary', {
'type': 'geojson',
'data': {
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [coordinates]
}
}
});
map.addLayer({
'id': 'boundary-layer',
'type': 'fill',
'source': 'boundary',
'paint': {
'fill-color': '#088',
'fill-opacity': 0.1,
'fill-outline-color': '#000'
}
});
}
}
console.log('map chargé',data.elements);
data.elements.forEach(element => {
if(element.tags){
@ -83,10 +146,6 @@
const el = document.createElement('div');
el.className = 'marker';
el.style.width = '20px';
el.style.height = '20px';
el.style.borderRadius = '50%';
el.style.backgroundColor = '#ff0000';
let tagstable = '<table class="table table-bordered"><tr><th>Clé</th><th>Valeur</th></tr>';
if (element.tags) {
for (const tag in element.tags) {
@ -98,23 +157,20 @@
// Créer un élément div pour le texte du nom
const nameDiv = document.createElement('div');
nameDiv.className = 'marker-name';
nameDiv.style.position = 'absolute';
nameDiv.style.backgroundColor = 'white';
nameDiv.style.padding = '2px 5px';
nameDiv.style.borderRadius = '3px';
nameDiv.style.fontSize = '12px';
nameDiv.style.whiteSpace = 'nowrap';
nameDiv.style.transform = 'translate(-50%, -150%)';
nameDiv.textContent = element.tags?.name || 'Sans nom';
nameDiv.textContent = element.tags?.name || '(Sans nom)';
el.appendChild(nameDiv);
new maplibregl.Marker(el)
.setLngLat([element.lon, element.lat])
.setPopup(new maplibregl.Popup({ offset: 25 })
.setPopup(new maplibregl.Popup({
offset: 25,
anchor: 'bottom'
})
.setHTML(
`<a href="/admin/placeType/${element.type}/${element.id}" ><h3>${element.tags?.name || 'Sans nom'}</h3></a> <br><a href="https://openstreetmap.org/${element.type}/${element.id}" target="_blank">OSM</a> ${tagstable}`
)
)
)
)
.addTo(map);
}
});

View file

@ -1,11 +1,53 @@
<tr>
<td style="background-color: {{ commerce.hasAddress() ? 'yellowgreen' : 'transparent' }};">
<a href="{{ path('app_admin_commerce', {'id': commerce.id}) }}">{{ commerce.name }}</a>
<td class="{{ commerce.hasAddress() ? 'filled' : '' }}">
<a href="{{ path('app_admin_commerce', {'id': commerce.id}) }}">
{% if commerce.name is empty %}
<span class="no-name">
(sans nom)
</span>
{% else %}
{{ commerce.name }}
{% endif %}
</a>
</td>
<td style="background-color: {{ commerce.mainTag ? 'yellowgreen' : 'transparent' }};">{{ commerce.mainTag }}</td>
<td style="background-color: {{ commerce.hasAddress() ? 'yellowgreen' : 'transparent' }};">{{ commerce.address }}</td>
<td style="background-color: {{ commerce.hasWebsite() ? 'yellowgreen' : 'transparent' }};">{{ commerce.website }}</td>
<td style="background-color: {{ commerce.hasWheelchair() ? 'yellowgreen' : 'transparent' }};">{{ commerce.wheelchair }}</td>
<td style="background-color: {{ commerce.hasNote() ? 'yellowgreen' : 'transparent' }};">{{ commerce.note }}</td>
<td style="background-color: {{ commerce.hasNote() ? 'yellowgreen' : 'transparent' }};">{{ commerce.noteContent }}</td>
<td class="{{ commerce.mainTag ? 'filled' : '' }}">
{% if commerce.mainTag == 'amenity=restaurant' or commerce.mainTag == 'amenity=bar' or commerce.mainTag == 'amenity=cafe' %}
<i class="bi bi-fork-knife"></i>
{% elseif commerce.mainTag == 'amenity=townhall' or commerce.mainTag == 'amenity=community_centre' %}
<i class="bi bi-building"></i>
{% elseif commerce.mainTag == 'amenity=bank' or commerce.mainTag == 'amenity=atm' %}
<i class="bi bi-bank"></i>
{% elseif commerce.mainTag == 'amenity=pharmacy' or commerce.mainTag == 'amenity=hospital' or commerce.mainTag == 'amenity=clinic' %}
<i class="bi bi-hospital"></i>
{% elseif commerce.mainTag == 'amenity=school' or commerce.mainTag == 'amenity=kindergarten' or commerce.mainTag == 'amenity=university' %}
<i class="bi bi-school"></i>
{% elseif commerce.mainTag == 'amenity=library' or commerce.mainTag == 'amenity=museum' or commerce.mainTag == 'amenity=artwork' %}
<i class="bi bi-book"></i>
{% elseif commerce.mainTag == 'shop=car_repair' or commerce.mainTag == 'shop=car_parts' or commerce.mainTag == 'shop=car_wash' %}
<i class="bi bi-car-front"></i>
{% elseif commerce.mainTag == 'amenity=post_office' %}
<i class="bi bi-envelope"></i>
{% elseif commerce.mainTag == 'shop=convenience' %}
<i class="bi bi-shop"></i>
{% elseif commerce.mainTag == 'shop=supermarket' %}
<i class="bi bi-shop"></i>
{% elseif commerce.mainTag == 'shop=clothes' %}
<i class="bi bi-shop"></i>
{% else %}
<i class="bi bi-tag"></i>
{% endif %}
{{ commerce.mainTag }}
</td>
<td class="{{ commerce.hasAddress() ? 'filled' : '' }}">{{ commerce.address }}</td>
<td class="{{ commerce.hasWebsite() ? 'filled' : '' }}">{{ commerce.website }}</td>
<td class="{{ commerce.hasWheelchair() ? 'filled' : '' }}">{{ commerce.wheelchair }}</td>
<td class="{{ commerce.hasNote() ? 'filled' : '' }}">{{ commerce.note }}</td>
<td class="{{ commerce.noteContent ? 'filled' : '' }}">{{ commerce.noteContent }}</td>
</tr>

View file

@ -23,6 +23,112 @@
<script src='https://cdn.jsdelivr.net/npm/maplibre-gl@3.6.2/dist/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;
@ -60,35 +166,25 @@
}
const postalCodes = [{% for stat in stats %}'{{ stat.zone }}'{% if not loop.last %}, {% endif %}{% endfor %}];
{% verbatim %}
// exemple de recherche de villes par leur code postal:
// [out:json][timeout:25];
// (
// {{geocodeArea:76200}}->.searchArea_1;
// nwr["boundary"="administrative"]["admin_level"="8"]
// ["name"](area.searchArea_1);
// {{geocodeArea:76000}}->.searchArea_2;
// nwr["boundary"="administrative"]["admin_level"="8"]["name"](area.searchArea_2);
// ) ;
// out center;
{% endverbatim %}
{% verbatim %}
console.log(postalCodes);
let postalLines = ``;
postalCodes.forEach(code => {
if (/^\d+$/.test(code)) {
{% verbatim %}
postalLines += `\n{{geocodeArea:${code}}}->.searchArea_${code};\nnwr[admin_level=8]["name"](area.searchArea_${code});`
{% endverbatim %}
postalLines += `
area["postal_code"="${code}"]->.searchArea_${code};
nwr["admin_level"="8"]["name"](area.searchArea_${code});`;
}
});
const query = `[out:json][timeout:25];
(
${postalLines}
);
out center;` ;
(
${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', {
@ -141,9 +237,7 @@
<h2>Statistiques : {{ stats|length }} codes postaux</h2>
<div id="mapDashboard"></div>
<input class="form-control" type="text" id="app_admin_labourer" value="75013">
<button class="btn btn-primary" id="labourer">Labourer les mises à jour</button>
<table class="table table-hover table-striped table-responsive">
<thead>
@ -158,7 +252,7 @@
{% for stat in stats %}
<tr>
<td>
<a href="{{ path('app_admin_stats', {'zip_code': stat.zone}) }}">{{ stat.zone }}</a>
<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>
@ -173,7 +267,11 @@
</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>