split templates
This commit is contained in:
Tykayn
tykayn
parent
6548460478
commit
9aa8da5872
22 changed files with 2980 additions and 2384 deletions
53
oedb/resources/demo/templates/by_what.html
Normal file
53
oedb/resources/demo/templates/by_what.html
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
{% extends "layout.html" %}
|
||||
|
||||
{% block title %}Events by Type - OpenEventDatabase{% endblock %}
|
||||
|
||||
{% block css %}
|
||||
<style>
|
||||
ul { padding-left: 20px; }
|
||||
li { margin-bottom: 8px; }
|
||||
.event-count {
|
||||
color: #666;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block header %}Events by Type{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<p>This page lists all events from the OpenEventDatabase organized by their type.</p>
|
||||
|
||||
{% if events_by_what %}
|
||||
<!-- Quick navigation -->
|
||||
<h2>Quick Navigation</h2>
|
||||
<ul>
|
||||
{% for what_type in sorted_what_types %}
|
||||
<li>
|
||||
<a href="#what-{{ what_type|replace(' ', '-') }}">{{ what_type }}</a>
|
||||
<span class="event-count">({{ events_by_what[what_type]|length }} events)</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<!-- Sections for each event type -->
|
||||
{% for what_type in sorted_what_types %}
|
||||
<h2 id="what-{{ what_type|replace(' ', '-') }}">
|
||||
{{ what_type }}
|
||||
<span class="event-count">({{ events_by_what[what_type]|length }} events)</span>
|
||||
</h2>
|
||||
<ul>
|
||||
{% for event in events_by_what[what_type]|sort(attribute='label') %}
|
||||
<li>
|
||||
<a href="/event/{{ event.id }}">{{ event.label or 'Unnamed Event' }}</a>
|
||||
<small>
|
||||
[<a href="https://www.openstreetmap.org/?mlat={{ event.coordinates[1] }}&mlon={{ event.coordinates[0] }}&zoom=15">map</a>]
|
||||
</small>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<p>No events found in the database.</p>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
90
oedb/resources/demo/templates/edit.html
Normal file
90
oedb/resources/demo/templates/edit.html
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
{% extends "layout.html" %}
|
||||
|
||||
{% block title %}Edit Event - OpenEventDatabase{% endblock %}
|
||||
|
||||
{% block css %}
|
||||
<link rel="stylesheet" href="/static/edit.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
<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">
|
||||
{% endblock %}
|
||||
|
||||
{% block header %}Edit Event{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<form id="eventForm">
|
||||
<input type="hidden" id="eventId" value="{{ id }}">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="label" class="required">Event Name</label>
|
||||
<input type="text" id="label" name="label" required>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="type" class="required">Event Type</label>
|
||||
<select id="type" name="type" required>
|
||||
<option value="scheduled">Scheduled</option>
|
||||
<option value="forecast">Forecast</option>
|
||||
<option value="unscheduled">Unscheduled</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="what" class="required">What</label>
|
||||
<input type="text" id="what" name="what" placeholder="e.g., sport.match.football" required>
|
||||
<div class="note">Category of the event (e.g., sport.match.football, culture.festival)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="what_series">What: Series</label>
|
||||
<input type="text" id="what_series" name="what_series" placeholder="e.g., Euro 2024">
|
||||
<div class="note">Series or group the event belongs to (e.g., Euro 2024, Summer Festival 2023)</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="where">Where</label>
|
||||
<input type="text" id="where" name="where" placeholder="e.g., Stadium Name">
|
||||
<div class="note">Specific location name (e.g., Eiffel Tower, Wembley Stadium)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="start" class="required">Start Time</label>
|
||||
<input type="datetime-local" id="start" name="start" required value="">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="stop" class="required">End Time</label>
|
||||
<input type="datetime-local" id="stop" name="stop" required value="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="required">Location</label>
|
||||
<div id="map"></div>
|
||||
<div class="note">Click on the map to set the event location</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
// Event data from API
|
||||
const eventData = JSON.parse('{{ event_data|tojson|safe }}');
|
||||
</script>
|
||||
<script src="/static/edit.js"></script>
|
||||
{% endblock %}
|
||||
36
oedb/resources/demo/templates/map_by_what.html
Normal file
36
oedb/resources/demo/templates/map_by_what.html
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
{% extends "layout.html" %}
|
||||
|
||||
{% block title %}Map by Event Type - OpenEventDatabase{% endblock %}
|
||||
|
||||
{% block css %}
|
||||
<link rel="stylesheet" href="/static/map_by_what.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block header %}Map by Event Type{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div id="map"></div>
|
||||
|
||||
<div class="map-overlay">
|
||||
<p>This map shows events from the OpenEventDatabase filtered by their type.</p>
|
||||
<p>Use the filter panel on the right to show/hide different event types.</p>
|
||||
<div id="event-info">
|
||||
<p>Loading events...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-overlay">
|
||||
<h3>Filter by Event Type</h3>
|
||||
<div>
|
||||
<button id="select-all">Select All</button>
|
||||
<button id="deselect-all">Deselect All</button>
|
||||
</div>
|
||||
<ul id="filter-list" class="filter-list">
|
||||
<li>Loading event types...</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script src="/static/map_by_what.js"></script>
|
||||
{% endblock %}
|
||||
166
oedb/resources/demo/templates/search.html
Normal file
166
oedb/resources/demo/templates/search.html
Normal file
|
|
@ -0,0 +1,166 @@
|
|||
{% extends "layout.html" %}
|
||||
|
||||
{% block title %}Search Events - OpenEventDatabase{% endblock %}
|
||||
|
||||
{% block css %}
|
||||
<link rel="stylesheet" href="/static/search.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
<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">
|
||||
{% endblock %}
|
||||
|
||||
{% block header %}Search Events{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<form id="searchForm">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="what">Event Type</label>
|
||||
<input type="text" id="what" name="what" placeholder="e.g., sport.match.football">
|
||||
<div class="note">Category of the event (e.g., sport.match.football, culture.festival)</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="type">Event Type</label>
|
||||
<select id="type" name="type">
|
||||
<option value="">Any</option>
|
||||
<option value="scheduled">Scheduled</option>
|
||||
<option value="forecast">Forecast</option>
|
||||
<option value="unscheduled">Unscheduled</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="when">When</label>
|
||||
<select id="when" name="when">
|
||||
<option value="now">Now</option>
|
||||
<option value="today">Today</option>
|
||||
<option value="yesterday">Yesterday</option>
|
||||
<option value="tomorrow">Tomorrow</option>
|
||||
<option value="lasthour">Last Hour</option>
|
||||
<option value="nexthour">Next Hour</option>
|
||||
<option value="last7days">Last 7 Days</option>
|
||||
<option value="next7days">Next 7 Days</option>
|
||||
<option value="last30days">Last 30 Days</option>
|
||||
<option value="next30days">Next 30 Days</option>
|
||||
<option value="custom">Custom Range</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="customDateGroup" style="display: none;">
|
||||
<label for="start">Start Date</label>
|
||||
<input type="datetime-local" id="start" name="start">
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="customDateEndGroup" style="display: none;">
|
||||
<label for="stop">End Date</label>
|
||||
<input type="datetime-local" id="stop" name="stop">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="near">Near (Longitude, Latitude, Distance in meters)</label>
|
||||
<input type="text" id="near" name="near" placeholder="e.g., 2.3522,48.8566,10000">
|
||||
<div class="note">Search for events near a specific location (e.g., 2.3522,48.8566,10000 for events within 10km of Paris)</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="bbox">Bounding Box (East, South, West, North)</label>
|
||||
<input type="text" id="bbox" name="bbox" placeholder="e.g., -5.0,41.0,10.0,52.0">
|
||||
<div class="note">Search for events within a geographic bounding box</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="where_osm">OpenStreetMap ID</label>
|
||||
<input type="text" id="where_osm" name="where:osm" placeholder="e.g., R12345">
|
||||
<div class="note">Search for events associated with a specific OpenStreetMap ID</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="where_wikidata">Wikidata ID</label>
|
||||
<input type="text" id="where_wikidata" name="where:wikidata" placeholder="e.g., Q90">
|
||||
<div class="note">Search for events associated with a specific Wikidata ID</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="limit">Result Limit</label>
|
||||
<input type="number" id="limit" name="limit" value="200" min="1" max="1000">
|
||||
<div class="note">Maximum number of results to return (default: 200)</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="geom">Geometry Detail</label>
|
||||
<select id="geom" name="geom">
|
||||
<option value="">Default (Centroid)</option>
|
||||
<option value="full">Full Geometry</option>
|
||||
<option value="only">Geometry Only</option>
|
||||
<option value="0.01">Simplified (0.01)</option>
|
||||
</select>
|
||||
<div class="note">Controls the level of detail in the geometry portion of the response</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Search Area (Draw on Map)</label>
|
||||
<div id="map"></div>
|
||||
<div class="note">Draw a polygon on the map to define the search area, or use the form fields above</div>
|
||||
</div>
|
||||
|
||||
<button type="submit">Search Events</button>
|
||||
</form>
|
||||
|
||||
<div id="result"></div>
|
||||
|
||||
<div id="resultsContainer" style="display: none;">
|
||||
<h2>Search Results</h2>
|
||||
|
||||
<div class="tabs-container">
|
||||
<div class="tab-buttons">
|
||||
<div class="tab-button active" data-tab="map-tab">Map View</div>
|
||||
<div class="tab-button" data-tab="table-tab">Table View</div>
|
||||
</div>
|
||||
|
||||
<div id="map-tab" class="tab-content active">
|
||||
<div id="resultsMap" style="width: 100%; height: 500px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="table-tab" class="tab-content">
|
||||
<table class="results-table" id="resultsTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Label</th>
|
||||
<th>Type</th>
|
||||
<th>What</th>
|
||||
<th>Where</th>
|
||||
<th>Start</th>
|
||||
<th>Stop</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- Results will be added here dynamically -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="download-buttons">
|
||||
<button id="downloadCsv" class="download-button">Download CSV</button>
|
||||
<button id="downloadJson" class="download-button">Download JSON</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script src="/static/search.js"></script>
|
||||
{% endblock %}
|
||||
275
oedb/resources/demo/templates/traffic_new.html
Normal file
275
oedb/resources/demo/templates/traffic_new.html
Normal file
|
|
@ -0,0 +1,275 @@
|
|||
{% extends "layout.html" %}
|
||||
|
||||
{% block title %}Report Traffic Jam - OpenEventDatabase{% endblock %}
|
||||
|
||||
{% block css %}
|
||||
<link rel="stylesheet" href="/static/traffic.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block header %}Report Road Issue{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Hidden OAuth2 configuration for the JavaScript module -->
|
||||
<input type="hidden" id="osmClientId" value="{{ client_id }}">
|
||||
<input type="hidden" id="osmClientSecret" value="{{ client_secret }}">
|
||||
<input type="hidden" id="osmRedirectUri" value="{{ client_redirect }}">
|
||||
<!-- Hidden Panoramax configuration (upload endpoint and token) -->
|
||||
<input type="hidden" id="panoramaxUploadUrl" value="{{ panoramax_upload_url }}">
|
||||
<input type="hidden" id="panoramaxToken" value="{{ panoramax_token }}">
|
||||
|
||||
<!-- Authentication section will be rendered by JavaScript or server-side -->
|
||||
<div id="auth-section">
|
||||
{% if is_authenticated %}
|
||||
<div class="auth-info">
|
||||
<div>
|
||||
<p>Logged in as <strong>{{ osm_username }}</strong></p>
|
||||
<p><a href="https://www.openstreetmap.org/user/{{ osm_username }}" >View OSM Profile</a></p>
|
||||
<input type="hidden" id="osmUsername" value="{{ osm_username }}">
|
||||
<input type="hidden" id="osmUserId" value="{{ osm_user_id }}">
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<p>Authenticate with your OpenStreetMap account to include your username in the traffic report.</p>
|
||||
<a href="https://www.openstreetmap.org/oauth2/authorize?client_id={{ client_id }}&redirect_uri={{ client_redirect }}&response_type=code&scope={{ client_authorizations }}" class="osm-login-btn">
|
||||
<span class="osm-logo"></span>
|
||||
Login with OpenStreetMap
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<script>
|
||||
// Préserve l'affichage serveur si présent, sinon laisse traffic.js/dema_auth gérer
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const hasServerAuth = document.getElementById('osmUsername') && document.getElementById('osmUsername').value;
|
||||
if (hasServerAuth) return;
|
||||
if (window.osmAuth && osmAuth.renderAuthSection) {
|
||||
const clientId = document.getElementById('osmClientId').value;
|
||||
const redirectUri = document.getElementById('osmRedirectUri').value;
|
||||
const authSection = document.getElementById('auth-section');
|
||||
authSection.innerHTML = osmAuth.renderAuthSection(clientId, redirectUri);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<h3>Select Issue Type</h3>
|
||||
|
||||
<!-- Tab Navigation -->
|
||||
<div class="tabs">
|
||||
<div class="tab-item active" data-tab="road">
|
||||
<i class="fas fa-road"></i> Route
|
||||
</div>
|
||||
<div class="tab-item" data-tab="rail">
|
||||
<i class="fas fa-train"></i> Rail
|
||||
</div>
|
||||
<div class="tab-item" data-tab="weather">
|
||||
<i class="fas fa-cloud-sun-rain"></i> Météo
|
||||
</div>
|
||||
<div class="tab-item" data-tab="emergency">
|
||||
<i class="fas fa-exclamation-circle"></i> Urgences
|
||||
</div>
|
||||
<div class="tab-item" data-tab="civic">
|
||||
<i class="fas fa-bicycle"></i> Cycles
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab Content -->
|
||||
<div class="tab-content">
|
||||
<!-- Road Tab -->
|
||||
<div class="tab-pane active" id="road-tab">
|
||||
<div class="issue-buttons">
|
||||
<div class="issue-button road pothole" onclick="fillForm('pothole')">
|
||||
<i class="fas fa-dot-circle"></i>
|
||||
Pothole
|
||||
</div>
|
||||
<div class="issue-button road obstacle" onclick="fillForm('obstacle')">
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
Obstacle
|
||||
</div>
|
||||
<div class="issue-button road vehicle" onclick="fillForm('vehicle')">
|
||||
<i class="fas fa-car"></i>
|
||||
Véhicule sur le bas côté de la route
|
||||
</div>
|
||||
<div class="issue-button road danger" onclick="fillForm('danger')">
|
||||
<i class="fas fa-skull-crossbones"></i>
|
||||
Danger
|
||||
</div>
|
||||
<div class="issue-button road accident" onclick="fillForm('accident')">
|
||||
<i class="fas fa-car-crash"></i>
|
||||
Accident
|
||||
</div>
|
||||
<div class="issue-button road flooded-road" onclick="fillForm('flooded_road')">
|
||||
<i class="fas fa-water"></i>
|
||||
Route inondée
|
||||
</div>
|
||||
<div class="issue-button road roadwork" onclick="fillForm('roadwork')">
|
||||
<i class="fas fa-hard-hat"></i>
|
||||
Travaux
|
||||
</div>
|
||||
<div class="issue-button road traffic-jam" onclick="fillForm('traffic_jam')">
|
||||
<i class="fas fa-traffic-light"></i>
|
||||
Embouteillage
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rail Tab -->
|
||||
<div class="tab-pane" id="rail-tab">
|
||||
<div class="issue-buttons">
|
||||
<div class="issue-button rail delay" onclick="fillForm('rail_delay')">
|
||||
<i class="fas fa-clock"></i>
|
||||
Retard
|
||||
</div>
|
||||
<div class="issue-button rail cancellation" onclick="fillForm('rail_cancellation')">
|
||||
<i class="fas fa-ban"></i>
|
||||
Annulation
|
||||
</div>
|
||||
<div class="issue-button rail works" onclick="fillForm('rail_works')">
|
||||
<i class="fas fa-tools"></i>
|
||||
Travaux
|
||||
</div>
|
||||
<div class="issue-button rail incident" onclick="fillForm('rail_incident')">
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
Incident
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Weather Tab -->
|
||||
<div class="tab-pane" id="weather-tab">
|
||||
<div class="issue-buttons">
|
||||
<div class="issue-button weather storm" onclick="fillForm('weather_storm')">
|
||||
<i class="fas fa-bolt"></i>
|
||||
Orage
|
||||
</div>
|
||||
<div class="issue-button weather flood" onclick="fillForm('weather_flood')">
|
||||
<i class="fas fa-water"></i>
|
||||
Inondation
|
||||
</div>
|
||||
<div class="issue-button weather snow" onclick="fillForm('weather_snow')">
|
||||
<i class="fas fa-snowflake"></i>
|
||||
Neige
|
||||
</div>
|
||||
<div class="issue-button weather fog" onclick="fillForm('weather_fog')">
|
||||
<i class="fas fa-smog"></i>
|
||||
Brouillard
|
||||
</div>
|
||||
<div class="issue-button weather heat" onclick="fillForm('weather_heat')">
|
||||
<i class="fas fa-temperature-high"></i>
|
||||
Canicule
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Emergency Tab -->
|
||||
<div class="tab-pane" id="emergency-tab">
|
||||
<div class="issue-buttons">
|
||||
<div class="issue-button emergency fire" onclick="fillForm('emergency_fire')">
|
||||
<i class="fas fa-fire"></i>
|
||||
Incendie
|
||||
</div>
|
||||
<div class="issue-button emergency medical" onclick="fillForm('emergency_medical')">
|
||||
<i class="fas fa-ambulance"></i>
|
||||
Urgence médicale
|
||||
</div>
|
||||
<div class="issue-button emergency police" onclick="fillForm('emergency_police')">
|
||||
<i class="fas fa-shield-alt"></i>
|
||||
Intervention police
|
||||
</div>
|
||||
<div class="issue-button emergency evacuation" onclick="fillForm('emergency_evacuation')">
|
||||
<i class="fas fa-running"></i>
|
||||
Évacuation
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Civic Tab -->
|
||||
<div class="tab-pane" id="civic-tab">
|
||||
<div class="issue-buttons">
|
||||
<div class="issue-button civic bike-lane" onclick="fillForm('civic_bike_lane')">
|
||||
<i class="fas fa-bicycle"></i>
|
||||
Problème piste cyclable
|
||||
</div>
|
||||
<div class="issue-button civic sidewalk" onclick="fillForm('civic_sidewalk')">
|
||||
<i class="fas fa-walking"></i>
|
||||
Problème trottoir
|
||||
</div>
|
||||
<div class="issue-button civic lighting" onclick="fillForm('civic_lighting')">
|
||||
<i class="fas fa-lightbulb"></i>
|
||||
Éclairage défectueux
|
||||
</div>
|
||||
<div class="issue-button civic garbage" onclick="fillForm('civic_garbage')">
|
||||
<i class="fas fa-trash"></i>
|
||||
Déchets
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Report Details</h3>
|
||||
|
||||
<form id="reportForm" class="report-form">
|
||||
<div class="form-group">
|
||||
<label for="what" class="required">Type d'événement</label>
|
||||
<input type="text" id="what" name="what" required placeholder="e.g., road.hazard.pothole">
|
||||
<div class="note">Catégorie de l'événement (e.g., road.hazard.pothole, road.traffic.jam)</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="label" class="required">Titre</label>
|
||||
<input type="text" id="label" name="label" required placeholder="e.g., Nid de poule sur la D123">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="description">Description</label>
|
||||
<textarea id="description" name="description" rows="3" placeholder="Description détaillée du problème"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="type">Type de rapport</label>
|
||||
<select id="type" name="type">
|
||||
<option value="unscheduled">Non planifié (incident)</option>
|
||||
<option value="scheduled">Planifié (travaux)</option>
|
||||
<option value="forecast">Prévision</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="start" class="required">Début</label>
|
||||
<input type="datetime-local" id="start" name="start" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="stop" class="required">Fin (estimée)</label>
|
||||
<input type="datetime-local" id="stop" name="stop" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="photo">Photos</label>
|
||||
<input type="file" id="photo" name="photo" accept="image/*" multiple>
|
||||
<div class="note">Vous pouvez ajouter plusieurs photos (optionnel)</div>
|
||||
<div id="photoPreview" class="photo-preview-container"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="required">Localisation</label>
|
||||
<div id="map"></div>
|
||||
<div class="note">Cliquez sur la carte pour définir la localisation du problème ou utilisez le bouton "Obtenir ma position actuelle"</div>
|
||||
</div>
|
||||
|
||||
<button id="report_issue_button" type="submit" disabled>Signaler le problème</button>
|
||||
</form>
|
||||
|
||||
<div id="result"></div>
|
||||
|
||||
<a href="/demo/view-events" class="view-saved-events">
|
||||
<i class="fas fa-map-marked-alt"></i> Voir tous les événements enregistrés sur la carte
|
||||
</a>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script src="/static/traffic.js"></script>
|
||||
{% endblock %}
|
||||
157
oedb/resources/demo/templates/view_events_new.html
Normal file
157
oedb/resources/demo/templates/view_events_new.html
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
{% extends "layout.html" %}
|
||||
|
||||
{% block title %}View Saved Events - OpenEventDatabase{% endblock %}
|
||||
|
||||
{% block css %}
|
||||
<style>
|
||||
#map {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.map-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
margin: 20px;
|
||||
padding: 15px;
|
||||
width: 300px;
|
||||
border-radius: 5px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.event-list {
|
||||
margin-top: 15px;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.event-item {
|
||||
background: white;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.event-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.event-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.event-actions {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.event-details {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.event-details p {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.no-events {
|
||||
padding: 10px;
|
||||
background: #f8f8f8;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.zoom-btn, .delete-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.zoom-btn {
|
||||
color: #0078ff;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
color: #dc3545;
|
||||
}
|
||||
|
||||
.danger {
|
||||
background-color: #dc3545;
|
||||
}
|
||||
|
||||
.danger:hover {
|
||||
background-color: #c82333;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block header %}Your Saved Events{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- Hidden OAuth2 configuration for the JavaScript module -->
|
||||
<input type="hidden" id="osmClientId" value="{{ client_id }}">
|
||||
<input type="hidden" id="osmClientSecret" value="{{ client_secret }}">
|
||||
<input type="hidden" id="osmRedirectUri" value="{{ client_redirect }}">
|
||||
|
||||
<div class="map-overlay">
|
||||
<!-- Authentication section -->
|
||||
<div id="auth-section" class="auth-section">
|
||||
<h3>OpenStreetMap Authentication</h3>
|
||||
<p>Authenticate with your OpenStreetMap account to include your username in reports.</p>
|
||||
<a href="https://www.openstreetmap.org/oauth2/authorize?client_id={{ client_id }}&redirect_uri={{ client_redirect }}&response_type=code&scope=read_prefs" class="osm-login-btn">
|
||||
<span class="osm-logo"></span>
|
||||
Login with OpenStreetMap
|
||||
</a>
|
||||
<script>
|
||||
// Replace server-side auth section with JavaScript-rendered version if available
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
if (window.osmAuth) {
|
||||
const clientId = document.getElementById('osmClientId').value;
|
||||
const redirectUri = document.getElementById('osmRedirectUri').value;
|
||||
const authSection = document.getElementById('auth-section');
|
||||
|
||||
// Only replace if osmAuth is loaded and has renderAuthSection method
|
||||
if (osmAuth.renderAuthSection) {
|
||||
authSection.innerHTML = osmAuth.renderAuthSection(clientId, redirectUri);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<div id="event-count"></div>
|
||||
|
||||
<div id="event-list" class="event-list"></div>
|
||||
|
||||
<div class="controls">
|
||||
<button id="refresh-btn">
|
||||
<i class="fas fa-sync-alt"></i> Refresh
|
||||
</button>
|
||||
<button id="clear-btn" class="danger">
|
||||
<i class="fas fa-trash-alt"></i> Clear All
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script src="/static/view_events.js"></script>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue