200 lines
No EOL
9 KiB
HTML
200 lines
No EOL
9 KiB
HTML
{% 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/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">
|
|
<script src="/static/event-types.js"></script>
|
|
{% endblock %}
|
|
|
|
{% block header %}Edit Event{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="properties-section" style="margin-bottom: 30px;">
|
|
<h3>Propriétés actuelles de l'événement</h3>
|
|
<div class="properties-table-container" style="max-height: 300px; overflow-y: auto; border: 1px solid #ddd; border-radius: 4px;">
|
|
<table id="propertiesTable" class="properties-table" style="width: 100%; border-collapse: collapse; font-family: monospace; font-size: 14px;">
|
|
<thead style="background-color: #f8f9fa; position: sticky; top: 0;">
|
|
<tr>
|
|
<th style="padding: 8px; text-align: left; border-bottom: 1px solid #ddd; font-weight: bold;">Propriété</th>
|
|
<th style="padding: 8px; text-align: left; border-bottom: 1px solid #ddd; font-weight: bold;">Valeur</th>
|
|
<th style="padding: 8px; text-align: left; border-bottom: 1px solid #ddd; font-weight: bold;">Type</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="propertiesTableBody">
|
|
<!-- Les propriétés seront ajoutées par JavaScript -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<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)<br>
|
|
<small style="color: #0078ff;">💡 Tapez au moins 2 caractères pour voir les suggestions avec emojis</small>
|
|
</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 style="margin-top: 10px;">
|
|
<button type="button" id="swapCoordinatesButton" style="background-color: #17a2b8; font-size: 14px; padding: 6px 12px;">
|
|
🔄 Inverser coordonnées (lat ↔ lon)
|
|
</button>
|
|
<small style="color: #666; margin-left: 10px;">
|
|
Utile si les coordonnées longitude/latitude ont été inversées
|
|
</small>
|
|
</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 - using proper JSON serialization
|
|
window.eventData = null;
|
|
|
|
try {
|
|
// Use Jinja2's tojson filter for proper JSON encoding
|
|
window.eventData = {{ event_data|tojson }};
|
|
console.log('✅ Données événement chargées via tojson:', window.eventData);
|
|
|
|
if (!window.eventData || window.eventData === null) {
|
|
throw new Error('Données d\'événement nulles depuis le template');
|
|
}
|
|
} catch (error) {
|
|
console.error('❌ Erreur de chargement des données depuis le template:', error);
|
|
|
|
// Fallback: try to fetch from API directly
|
|
const eventId = document.getElementById('eventId')?.value;
|
|
if (eventId) {
|
|
console.log('🔄 Fallback: Récupération directe depuis l\'API...');
|
|
fetch(`https://api.openeventdatabase.org/event/${eventId}`)
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error(`API returned ${response.status}: ${response.statusText}`);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
console.log('✅ Données récupérées depuis l\'API (fallback):', data);
|
|
window.eventData = data;
|
|
// Trigger form population
|
|
if (typeof populateForm === 'function') {
|
|
populateForm();
|
|
} else {
|
|
// Wait for edit.js to load
|
|
setTimeout(() => {
|
|
if (typeof populateForm === 'function') {
|
|
populateForm();
|
|
}
|
|
}, 100);
|
|
}
|
|
})
|
|
.catch(apiError => {
|
|
console.error('❌ Erreur API également:', apiError);
|
|
// Show error to user
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const resultElement = document.getElementById('result');
|
|
if (resultElement) {
|
|
resultElement.innerHTML = `
|
|
<div style="color: #dc3545; padding: 15px; background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px;">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
<strong>Erreur de chargement:</strong> Impossible de charger les données de l'événement.
|
|
<br><small>Erreur template: ${error.message}</small>
|
|
<br><small>Erreur API: ${apiError.message}</small>
|
|
<br><br>
|
|
<a href="/demo" class="button">Retour à la carte</a>
|
|
</div>
|
|
`;
|
|
resultElement.style.display = 'block';
|
|
}
|
|
});
|
|
});
|
|
} else {
|
|
console.error('❌ Aucun ID d\'événement trouvé pour le fallback API');
|
|
|
|
// Show error immediately
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const resultElement = document.getElementById('result');
|
|
if (resultElement) {
|
|
resultElement.innerHTML = `
|
|
<div style="color: #dc3545; padding: 15px; background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px;">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
<strong>Erreur:</strong> ID d'événement manquant et impossible de charger les données.
|
|
<br><br>
|
|
<a href="/demo" class="button">Retour à la carte</a>
|
|
</div>
|
|
`;
|
|
resultElement.style.display = 'block';
|
|
}
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
<script src="/static/edit.js"></script>
|
|
{% endblock %} |