up badges on stats

This commit is contained in:
Tykayn 2025-06-06 16:16:34 +02:00 committed by tykayn
parent abdd59e8c8
commit 86a870d1e7
3 changed files with 96 additions and 26 deletions

View file

@ -36,26 +36,46 @@
</div>
<div class="row">
<div class="col-md-3 col-12">
{{ stats.getCompletionPercent() }} % complété sur les critères donnés.
<span class="badge {% if stats.getCompletionPercent() > 85 %}bg-success{% else %}bg-warning{% endif %}">
{{ stats.getCompletionPercent() }} %
</span>
complété sur les critères donnés.
</div>
<div class="col-md-3 col-12">
<i class="bi bi-building"></i> {{ stats.places | length}} commerces dans la zone.
<span class="badge bg-primary">
<i class="bi bi-building"></i> {{ stats.places | length}}
</span>commerces dans la zone.
</div>
<div class="col-md-3 col-12">
<i class="bi bi-clock"></i> {{ stats.getAvecHoraires() }} commerces avec horaires.
<span class="badge bg-primary">
<i class="bi bi-clock"></i> {{ stats.getAvecHoraires() }}
</span>
commerces avec horaires.
</div>
<div class="col-md-3 col-12">
<i class="bi bi-map"></i> {{ stats.getAvecAdresse() }} commerces avec adresse.
<span class="badge bg-primary">
<i class="bi bi-map"></i> {{ stats.getAvecAdresse() }}
</span>
commerces avec adresse.
</div>
<div class="col-md-3 col-12">
<i class="bi bi-globe"></i> {{ stats.getAvecSite() }} commerces avec site web renseigné.
<span class="badge bg-primary">
<i class="bi bi-globe"></i> {{ stats.getAvecSite() }}
</span>
commerces avec site web renseigné.
</div>
<div class="col-md-3 col-12">
<span class="badge bg-primary">
<i class="bi bi-arrow-up-right"></i>
{{ stats.getAvecAccessibilite() }} commerces avec accessibilité PMR renseignée.
{{ stats.getAvecAccessibilite() }}
</span>
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.
<span class="badge bg-primary">
<i class="bi bi-chat-dots"></i> {{ stats.getAvecNote() }}
</span>
commerces avec note renseignée.
</div>
</div>
@ -66,7 +86,9 @@
</div>
</div>
<div id="map" class="mt-4" style="height: 400px;"></div>
<div id="attribution">
<a href="https://www.openstreetmap.org/copyright">Données OpenStreetMap</a>
</div>
</div>
<div class="card mt-4">
@ -155,6 +177,10 @@
function createPopupContent(element) {
console.log("createPopupContent",element);
const completion = calculateCompletion(element);
console.log("completion", completion);
let tagstable = '<table class="table table-bordered"><tr><th>Clé</th><th>Valeur</th></tr>';
if (element.tags) {
for (const tag in element.tags) {
@ -164,11 +190,12 @@
tagstable += '</table>';
return `
<a href="/admin/placeType/${element.type}/${element.id}">
<a class="btn btn-primary" href="/admin/placeType/${element.type}/${element.id}">
<i class="bi bi-pencil"></i> Modifier
<h3>${element.tags?.name || 'Sans nom'}</h3>
</a>
<br>
<a href="https://openstreetmap.org/${element.type}/${element.id}" target="_blank">OSM</a>
<a class="btn btn-secondary" href="https://openstreetmap.org/${element.type}/${element.id}"> <i class="bi bi-map"></i> OSM</a>
${tagstable}
`;
}
@ -250,6 +277,7 @@
}
let josm_elements = [];
features = [];
async function loadPlaces(map) {
try {
@ -310,7 +338,7 @@
const circle = turf.circle(
feature.properties.center,
0.02, // Rayon initial en kilomètres
5/1000, // Rayon initial en kilomètres
{ steps: 64, units: 'kilometers' }
);
@ -344,21 +372,8 @@
const element = overpassData[elementId];
if (element) {
const completion = calculateCompletion(element);
// Créer le contenu de la popup
const popupContent = `
<div class="popup-content">
<h5>${element.tags?.name || 'Sans nom'}</h5>
<p>Taux de complétion: ${Math.round(completion)}%</p>
<ul>
${Object.entries(element.tags || {})
.filter(([key]) => !['name'].includes(key))
.map(([key, value]) => `<li><strong>${key}:</strong> ${value}</li>`)
.join('')}
</ul>
</div>
`;
const popupContent = createPopupContent(element);
new maplibregl.Popup()
.setLngLat(e.lngLat)
@ -395,6 +410,45 @@
}
}
function draw_circle_containing_all_features(map) {
if (features.length === 0) return;
// Calculer le centre à partir de toutes les features
const center = features.reduce((acc, feature) => {
return [
acc[0] + feature.properties.center[0],
acc[1] + feature.properties.center[1]
];
}, [0, 0]).map(coord => coord / features.length);
// Calculer le rayon nécessaire pour couvrir tous les points
const radius = features.reduce((maxRadius, feature) => {
const distance = turf.distance(
center,
feature.properties.center,
{ units: 'kilometers' }
);
return Math.max(maxRadius, distance);
}, 0);
const circle = turf.circle(center, radius, { steps: 64, units: 'kilometers' });
map.addSource('circle', { type: 'geojson', data: circle });
map.addLayer({
id: 'circle',
type: 'fill',
source: 'circle',
paint: {
'fill-color': 'blue',
'fill-opacity': 0.25
}
});
// Ajouter un marqueur au centre du cercle
new maplibregl.Marker()
.setLngLat(center)
.addTo(map);
}
function updateCircles(map) {
if (!map) return;
@ -495,6 +549,8 @@
// Charger les lieux
loadPlaces(map);
draw_circle_containing_all_features(map);
});
sortTable();

View file

@ -43,7 +43,9 @@
<i class="bi bi-tag"></i>
{% endif %}
{{ commerce.mainTag }}
<a href="https://wiki.openstreetmap.org/wiki/FR:Tag:{{ commerce.mainTag }}">
{{ commerce.mainTag }}
</a>
</td>
<td class="{{ commerce.hasAddress() ? 'filled' : '' }}">{{ commerce.address }}</td>
<td class="{{ commerce.hasWebsite() ? 'filled' : '' }}">{{ commerce.website }}</td>