mirror of
https://forge.chapril.org/tykayn/osm-commerces
synced 2025-06-20 01:44:42 +02:00
up badges on stats
This commit is contained in:
parent
abdd59e8c8
commit
86a870d1e7
3 changed files with 96 additions and 26 deletions
|
@ -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();
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue