add event details page, refacto templates
This commit is contained in:
Tykayn
tykayn
parent
eb8c42d0c0
commit
6548460478
4 changed files with 191 additions and 125 deletions
|
|
@ -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}")
|
||||
|
|
|
|||
45
oedb/resources/demo/templates/event_details.html
Normal file
45
oedb/resources/demo/templates/event_details.html
Normal file
|
|
@ -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 %}
|
||||
51
oedb/resources/demo/templates/layout.html
Normal file
51
oedb/resources/demo/templates/layout.html
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}OpenEventDatabase{% endblock %}</title>
|
||||
|
||||
<!-- Common CSS -->
|
||||
<link rel="stylesheet" href="/static/demo_styles.css">
|
||||
|
||||
<!-- Page-specific CSS -->
|
||||
{% block css %}{% endblock %}
|
||||
|
||||
<!-- Common JavaScript libraries -->
|
||||
<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" />
|
||||
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>
|
||||
|
||||
<!-- Page-specific head content -->
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- Navigation -->
|
||||
{% include 'partials/demo_nav.html' %}
|
||||
|
||||
<!-- Page header -->
|
||||
<header>
|
||||
<h1>{% block header %}OpenEventDatabase{% endblock %}</h1>
|
||||
</header>
|
||||
|
||||
<!-- Main content -->
|
||||
<main>
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
<div class="footer-content">
|
||||
<p>© 2025 OpenEventDatabase - <a href="https://source.cipherbliss.com/tykayn/oedb-backend">Source Code</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- Common JavaScript -->
|
||||
<script src="/static/demo_auth.js"></script>
|
||||
|
||||
<!-- Page-specific JavaScript -->
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,76 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Stats par type - OpenEventDatabase</title>
|
||||
<link rel="stylesheet" href="/static/demo_styles.css">
|
||||
<style>
|
||||
.container { max-width: 1100px; margin: 0 auto; background: #fff; padding: 16px; border-radius: 6px; }
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
{% include 'partials/demo_nav.html' %}
|
||||
<h1>Statistiques par type d'évènement (what)</h1>
|
||||
<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>
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% if selected_what %}
|
||||
<h2 id="map">Carte: {{ selected_what }}</h2>
|
||||
<link href="https://unpkg.com/maplibre-gl@3.0.0/dist/maplibre-gl.css" rel="stylesheet" />
|
||||
<script src="https://unpkg.com/maplibre-gl@3.0.0/dist/maplibre-gl.js"></script>
|
||||
<div id="mapDiv" class="map-embed"></div>
|
||||
<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('/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 %}
|
||||
</div>
|
||||
</body>
|
||||
</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('/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 %}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue