add event details page, refacto templates

oedb/resources/demo/templates/event_details.html

@@ -0,0 +1,45 @@
+{% extends "layout.html" %}
+
+{% block title %}Event {{ id }} - OpenEventDatabase{% endblock %}
+
+{% block css %}
+<style>
+    #map { width:100%; height: 360px; border:1px solid #ddd; border-radius:4px; }
+    table { width:100%; border-collapse: collapse; margin-top:12px; }
+    th, td { padding: 6px 8px; border-bottom: 1px solid #eee; text-align:left; }
+    th { background:#f9fafb; }
+</style>
+{% endblock %}
+
+{% block header %}Évènement {{ id }}{% endblock %}
+
+{% block content %}
+<div id="map"></div>
+<table>
+    <thead><tr><th>Clé</th><th>Valeur</th></tr></thead>
+    <tbody>
+        {% for key, value in properties.items()|sort %}
+        <tr>
+            <td>{{ key }}</td>
+            <td>{{ value }}</td>
+        </tr>
+        {% endfor %}
+    </tbody>
+</table>
+{% endblock %}
+
+{% block scripts %}
+<script>
+    const f = JSON.parse('{{ feature_json|safe }}');
+    const map = new maplibregl.Map({
+        container: 'map',
+        style: 'https://tiles.openfreemap.org/styles/liberty',
+        center: f.geometry && f.geometry.coordinates ? f.geometry.coordinates : [2.3522,48.8566],
+        zoom: 12
+    });
+    map.addControl(new maplibregl.NavigationControl());
+    if (f.geometry && f.geometry.type === 'Point') {
+        new maplibregl.Marker().setLngLat(f.geometry.coordinates).addTo(map);
+    }
+</script>
+{% endblock %}