74 lines
1.9 KiB
HTML
74 lines
1.9 KiB
HTML
{% extends "layout.html" %}
|
|
|
|
{% block title %}Stats par type - OpenEventDatabase{% endblock %}
|
|
|
|
{% block css %}
|
|
<style>
|
|
table { width: 100%; border-collapse: collapse; }
|
|
th, td { padding: 8px 10px; border-bottom: 1px solid #eee; text-align: left; }
|
|
th { background: #f9fafb; }
|
|
.actions a { margin-right: 8px; }
|
|
.map-embed { width: 100%; height: 360px; border: 1px solid #ddd; border-radius: 4px; }
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block header %}Statistiques par type d'évènement (what){% endblock %}
|
|
|
|
{% block content %}
|
|
<p>Total: <strong>{{ total_events }}</strong> évènements</p>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Type (what)</th>
|
|
<th>Nombre</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for what, count in counts %}
|
|
<tr>
|
|
<td>{{ what }}</td>
|
|
<td>{{ count }}</td>
|
|
<td class="actions">
|
|
<a href="/event?what={{ what }}" target="_blank">Voir JSON</a>
|
|
<a href="/demo/stats?what={{ what }}#map">Voir sur la carte</a>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
|
|
{% if selected_what %}
|
|
<h2 id="map">Carte: {{ selected_what }}</h2>
|
|
<div id="mapDiv" class="map-embed"></div>
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
{% if selected_what %}
|
|
<script>
|
|
const map = new maplibregl.Map({
|
|
container: 'mapDiv',
|
|
style: 'https://tiles.openfreemap.org/styles/liberty',
|
|
center: [2.3522, 48.8566],
|
|
zoom: 4
|
|
});
|
|
map.addControl(new maplibregl.NavigationControl());
|
|
fetch('https://api.openeventdatabase.org/event?what={{ selected_what }}&limit=500')
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (!data.features || !data.features.length) return;
|
|
const bounds = new maplibregl.LngLatBounds();
|
|
data.features.forEach(f => {
|
|
if (f.geometry && f.geometry.type === 'Point') {
|
|
const c = f.geometry.coordinates;
|
|
new maplibregl.Marker().setLngLat(c).addTo(map);
|
|
bounds.extend(c);
|
|
}
|
|
});
|
|
if (!bounds.isEmpty()) map.fitBounds(bounds, { padding: 40, maxZoom: 12 });
|
|
});
|
|
</script>
|
|
{% endif %}
|
|
{% endblock %}
|
|
|