tykayn/osm-commerces
1
0
Fork 0
mirror of https://forge.chapril.org/tykayn/osm-commerces synced 2025-10-09 17:02:46 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

handle missing elements in scripts, simplify stats page

Browse source
This commit is contained in:
Tykayn 2025-06-01 18:56:01 +02:00 • committed by tykayn
parent 1e30f360a1
commit 344e71d38f
9 changed files with 247 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

85
templates/public/dashboard.html.twig
View file

@ -14,10 +14,82 @@
{% block javascripts %}
{{ parent() }}
<script src='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js'></script>
<script>
function labourer() {
window.location.href = '/admin/labourer/' + document.getElementById('app_admin_labourer').value;
}
mapboxgl.accessToken = '{{ mapbox_token }}';
// Créer une carte des villes avec les codes postaux
let map = new mapboxgl.Map({
container: 'mapDashboard',
style: 'https://api.maptiler.com/maps/basic-v2/style.json?key={{ maptiler_token }}',
center: [2.3488, 48.8534], // Paris
zoom: 10
});
// Ajouter les marqueurs pour chaque zone
// Fonction pour récupérer tous les centroides des codes postaux en une seule requête
async function getAllPostalCodesCoordinates() {
const postalCodes = [{% for stat in stats %}'{{ stat.zone }}'{% if not loop.last %}, {% endif %}{% endfor %}];
const query = `[out:json];
(
${postalCodes.map(code => `
nwr["boundary"="postal_code"][postal_code=${code}];
);
out center;`;
console.log(query);
const response = await fetch('https://overpass-api.de/api/interpreter', {
method: 'POST',
body: query
});
const data = await response.json();
return data.elements.reduce((acc, element) => {
// On associe chaque code postal à ses coordonnées
const postalCode = element.tags.postal_code;
if (postalCode) {
acc[postalCode] = [element.lon, element.lat];
}
return acc;
}, {});
}
// 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)`;
}
// On récupère toutes les coordonnées en une seule fois
getAllPostalCodesCoordinates().then(coordinatesMap => {
{% for stat in stats %}
{% if not "-" in stat.zone %}
const coordinatesMapped{{ stat.zone }} = coordinatesMap['{{ stat.zone }}'];
if (coordinatesMapped{{ stat.zone }}) {
const el = document.createElement('div');
el.style.width = '20px';
el.style.height = '20px';
el.style.borderRadius = '50%';
el.style.backgroundColor = getColorFromPercent({{ stat.completionPercent }});
new mapboxgl.Marker(el)
.setLngLat(coordinatesMapped{{ stat.zone }})
.setPopup(new mapboxgl.Popup().setHTML(`
<h3>{{ stat.zone }}</h3>
<p>Nombre de commerces: {{ stat.placesCount }}</p>
<p>Complétude: {{ stat.completionPercent }}%</p>
`))
.addTo(map);
}
{% endif %}
{% endfor %}
});
</script>
{% endblock %}
@ -29,9 +101,10 @@
</div>
<div class="col-12">
<h2>Statistiques : {{ stats|length }} commerces</h2>
<input class="form-control" type="text" id="app_admin_labourer" value="75013">
<button class="btn btn-default" onclick="labourer() ">Labourer</button>
mapDashboard:
<div id="mapDashboard"></div>
<input class="form-control" type="text" id="app_admin_labourer" value="75013">
<button class="btn btn-default" onclick="labourer() ">Labourer</button>
<table class="table table-hover table-striped table-responsive">
@ -61,7 +134,8 @@
</tbody>
</table>
<h2>Lieux</h2>
<h2>{{ places|length }} Lieux</h2>
{#
<table class="table table-striped table-hover table-responsive">
<thead>
<tr>
@ -104,7 +178,8 @@
</tr>
{% endfor %}
</tbody>
</table>
</table>
#}
</div>
</div>
</div>

23
templates/public/edit.html.twig
View file

@ -4,7 +4,6 @@
{% block stylesheets %}
{{ parent() }}
<link href='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css' rel='stylesheet' />
<style>
.hidden { display: none; }
input[type="checkbox"] { width: 20px; height: 20px; }
@ -216,18 +215,18 @@
}
{% if commerce is not empty and mapbox_token is not empty and maptiler_token is not empty and commerce_overpass['@attributes'].lon is defined and commerce_overpass['@attributes'].lat is defined %}
mapboxgl.accessToken = '{{ mapbox_token }}';
map = new mapboxgl.Map({
container: 'map',
style: 'https://api.maptiler.com/maps/basic-v2/style.json?key={{ maptiler_token }}',
center: [{{ commerce_overpass['@attributes'].lon }}, {{ commerce_overpass['@attributes'].lat }}],
zoom: 17
});
mapboxgl.accessToken = '{{ mapbox_token }}';
map = new mapboxgl.Map({
container: 'map',
style: 'https://api.maptiler.com/maps/basic-v2/style.json?key={{ maptiler_token }}',
center: [{{ commerce_overpass['@attributes'].lon }}, {{ commerce_overpass['@attributes'].lat }}],
zoom: 17
});
new mapboxgl.Marker()
.setLngLat([{{ commerce_overpass['@attributes'].lon }}, {{ commerce_overpass['@attributes'].lat }}])
.setPopup(new mapboxgl.Popup({ offset: 25 }).setHTML('<h1>{{ commerce_overpass.tags_converted.name }}</h1>'))
.addTo(map);
new mapboxgl.Marker()
.setLngLat([{{ commerce_overpass['@attributes'].lon }}, {{ commerce_overpass['@attributes'].lat }}])
.setPopup(new mapboxgl.Popup({ offset: 25 }).setHTML('<h1>{{ commerce_overpass.tags_converted.name }}</h1><p>Completion:{{completion_percentage}}%</p>'))
.addTo(map);
{% endif %}
</script>