add event details page, refacto templates

This commit is contained in:
Tykayn 2025-09-26 14:18:14 +02:00 committed by tykayn
parent eb8c42d0c0
commit 6548460478
4 changed files with 191 additions and 125 deletions

View file

@ -18,6 +18,19 @@ class DemoResource:
Handles the /demo endpoint and related demo pages.
"""
def __init__(self):
"""
Initialize the resource with a Jinja2 environment.
"""
# Set up Jinja2 environment
import jinja2
import os
template_dir = os.path.join(os.path.dirname(__file__), 'demo', 'templates')
self.jinja_env = jinja2.Environment(
loader=jinja2.FileSystemLoader(template_dir),
autoescape=jinja2.select_autoescape(['html', 'xml'])
)
def on_get_edit(self, req, resp, id=None):
"""
Handle GET requests to the /demo/edit endpoint.
@ -1995,63 +2008,22 @@ class DemoResource:
Show a map with the event location and a table of its properties.
"""
import requests
import json
logger.info(f"Processing GET request to /demo/by_id/{id}")
try:
resp.content_type = 'text/html'
r = requests.get(f"https://api.openeventdatabase.org/event/{id}")
r.raise_for_status()
feature = r.json()
html = f"""
<!DOCTYPE html>
<html lang=\"fr\">
<head>
<meta charset=\"UTF-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<title>Event {id} - OpenEventDatabase</title>
<script src=\"https://unpkg.com/maplibre-gl@3.0.0/dist/maplibre-gl.js\"></script>
<link href=\"https://unpkg.com/maplibre-gl@3.0.0/dist/maplibre-gl.css\" rel=\"stylesheet\" />
<style>
body {{ margin:0; font-family: Arial, sans-serif; }}
.container {{ max-width: 1100px; margin: 0 auto; padding: 12px; }}
#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; }}
.nav a {{ margin-right: 10px; }}
</style>
</head>
<body>
<div class=\"container\">
<div class=\"nav\">
<a href=\"/demo\">← Retour à la démo</a>
<a href=\"/demo/traffic\">Signaler trafic</a>
<a href=\"/demo/view-events\">Voir événements</a>
</div>
<h1>Évènement {id}</h1>
<div id=\"map\"></div>
<table>
<thead><tr><th>Clé</th><th>Valeur</th></tr></thead>
<tbody>
{''.join([f'<tr><td>{k}</td><td>{(v if not isinstance(v, dict) else str(v))}</td></tr>' for k,v in sorted((feature.get('properties') or {{}}).items())])}
</tbody>
</table>
</div>
<script>
const f = {feature};
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>
</body>
</html>
"""
# Load and render the template
template = self.jinja_env.get_template('event_details.html')
html = template.render(
id=id,
feature_json=json.dumps(feature),
properties=feature.get('properties') or {}
)
resp.text = html
resp.status = falcon.HTTP_200
logger.success(f"Successfully processed GET request to /demo/by_id/{id}")