oedb-backend/oedb/resources/demo/templates/edit.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">
{% 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 - corriger le double-encodage
    window.eventData = null;
    try {
        // Utiliser directement les données JSON sans double-encodage
        window.eventData = {{ event_data|safe }};
        console.log('✅ Données événement chargées:', window.eventData);
    } catch (error) {
        console.error('❌ Erreur de chargement des données événement:', error);
        console.error('Données brutes JSON:', '{{ event_data|safe }}');

        // Afficher une erreur à l'utilisateur
        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 technique: ${error.message}</small>
                    </div>
                `;
                resultElement.style.display = 'block';
            }
        });
    }
</script>
<script src="/static/edit.js"></script>
{% endblock %}