add demo page

DEMO_ENDPOINT.md

@@ -0,0 +1,79 @@
+# Demo Endpoint Implementation
+
+## Overview
+
+A new endpoint `/demo` has been added to the OpenEventDatabase API. This endpoint serves an interactive HTML page with a MapLibre map that displays current events from the database.
+
+## Features
+
+- Interactive MapLibre map showing current events
+- Events are fetched from the `/event` endpoint with the current date
+- Each event is displayed as a marker on the map
+- Clicking on a marker shows a popup with event details
+- The map automatically zooms to fit all displayed events
+- Sidebar with links to other API endpoints and the GitHub repository
+
+## Implementation Details
+
+The implementation consists of the following components:
+
+1. **DemoResource Class**: A new resource class in `oedb/resources/demo.py` that handles GET requests to the `/demo` endpoint and returns an HTML page.
+
+2. **HTML Page**: The HTML page includes:
+   - MapLibre JS and CSS libraries
+   - Custom CSS for styling the page
+   - A full-screen map
+   - A sidebar with information and links
+
+3. **JavaScript**: The JavaScript code:
+   - Initializes a MapLibre map
+   - Fetches events from the `/event` endpoint
+   - Displays events as markers on the map
+   - Creates popups with event details
+   - Fits the map view to include all events
+
+4. **Route Registration**: The `/demo` endpoint is registered in `backend.py` with the line:
+   ```python
+   app.add_route('/demo', demo)
+   ```
+
+5. **Documentation**: The root endpoint (`/`) has been updated to include information about the demo endpoint.
+
+## How to Test
+
+To test the demo endpoint:
+
+1. Start the server:
+   ```bash
+   python3 backend.py
+   ```
+
+2. Open a web browser and navigate to:
+   ```
+   http://127.0.0.1:8080/demo
+   ```
+
+3. Verify that:
+   - The page loads correctly with a MapLibre map
+   - Events are displayed on the map (if there are events for the current date)
+   - Clicking on a marker shows a popup with event details
+   - Links to other endpoints work correctly
+
+## Troubleshooting
+
+If no events appear on the map:
+
+1. Check if there are events for the current date in the database
+2. Try adding a test event using the `/event` endpoint
+3. Check the browser console for any JavaScript errors
+4. Verify that the `/event` endpoint is working correctly by accessing it directly
+
+## Future Improvements
+
+Potential future improvements for the demo page:
+
+1. Add date selection to view events from different dates
+2. Add filtering options (by event type, location, etc.)
+3. Add a search box to find specific events
+4. Improve the mobile experience
+5. Add more interactive features to the map