add live page
This commit is contained in:
Tykayn
tykayn
parent
114bcca24e
commit
eb8c42d0c0
19 changed files with 2759 additions and 199 deletions
|
|
@ -59,6 +59,8 @@ class DemoResource:
|
|||
<title>Edit Event - 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" />
|
||||
<script src="https://unpkg.com/@mapbox/mapbox-gl-draw@1.4.3/dist/mapbox-gl-draw.js"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/@mapbox/mapbox-gl-draw@1.4.3/dist/mapbox-gl-draw.css" type="text/css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
|
||||
<style>
|
||||
body {{
|
||||
|
|
@ -231,7 +233,10 @@ class DemoResource:
|
|||
<div class="note">Click on the map to set the event location</div>
|
||||
</div>
|
||||
|
||||
<button type="submit">Update Event</button>
|
||||
<div style="display: flex; gap: 10px;">
|
||||
<button type="submit">Update Event</button>
|
||||
<button type="button" id="deleteButton" style="background-color: #dc3545;">Delete Event</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div id="result"></div>
|
||||
|
|
@ -406,6 +411,50 @@ class DemoResource:
|
|||
showResult(`Error: ${{error.message}}`, 'error');
|
||||
}});
|
||||
}});
|
||||
|
||||
// Handle delete button click
|
||||
document.getElementById('deleteButton').addEventListener('click', function() {{
|
||||
// Get event ID
|
||||
const eventId = document.getElementById('eventId').value;
|
||||
|
||||
// Show confirmation dialog
|
||||
if (confirm('Are you sure you want to delete this event? This action cannot be undone.')) {{
|
||||
// Submit delete request to API
|
||||
fetch(`/event/${{eventId}}`, {{
|
||||
method: 'DELETE',
|
||||
headers: {{
|
||||
'Content-Type': 'application/json'
|
||||
}}
|
||||
}})
|
||||
.then(response => {{
|
||||
if (response.ok) {{
|
||||
showResult('Event deleted successfully', 'success');
|
||||
|
||||
// Add link to go back to map
|
||||
const resultElement = document.getElementById('result');
|
||||
resultElement.innerHTML += `<p><a href="/demo">Back to Map</a></p>`;
|
||||
|
||||
// Disable form controls
|
||||
const formElements = document.querySelectorAll('#eventForm input, #eventForm select, #eventForm button');
|
||||
formElements.forEach(element => {{
|
||||
element.disabled = true;
|
||||
}});
|
||||
|
||||
// Redirect to demo page after 2 seconds
|
||||
setTimeout(() => {{
|
||||
window.location.href = '/demo';
|
||||
}}, 2000);
|
||||
}} else {{
|
||||
return response.text().then(text => {{
|
||||
throw new Error(text || response.statusText);
|
||||
}});
|
||||
}}
|
||||
}})
|
||||
.catch(error => {{
|
||||
showResult(`Error deleting event: ${{error.message}}`, 'error');
|
||||
}});
|
||||
}}
|
||||
}});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1940,5 +1989,76 @@ class DemoResource:
|
|||
"""
|
||||
return demo_view_events.on_get(req, resp)
|
||||
|
||||
def on_get_by_id(self, req, resp, id):
|
||||
"""
|
||||
Handle GET requests to /demo/by_id/{id}.
|
||||
Show a map with the event location and a table of its properties.
|
||||
"""
|
||||
import requests
|
||||
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>
|
||||
"""
|
||||
resp.text = html
|
||||
resp.status = falcon.HTTP_200
|
||||
logger.success(f"Successfully processed GET request to /demo/by_id/{id}")
|
||||
except Exception as e:
|
||||
logger.error(f"Error processing GET request to /demo/by_id/{id}: {e}")
|
||||
resp.status = falcon.HTTP_500
|
||||
resp.text = f"Error: {str(e)}"
|
||||
|
||||
# Create a global instance of DemoResource
|
||||
demo = DemoResource()
|
||||
Loading…
Add table
Add a link
Reference in a new issue