oedb-backend/oedb/resources/demo/static/view_events.js

// view_events.js - JavaScript for the view saved events page

// Global variables
let map;
let markers = [];

// Initialize the map when the page loads
document.addEventListener('DOMContentLoaded', function() {
    initMap();
    
    // Set up refresh button
    const refreshBtn = document.getElementById('refresh-btn');
    if (refreshBtn) {
        refreshBtn.addEventListener('click', loadEvents);
    }
    
    // Set up clear button
    const clearBtn = document.getElementById('clear-btn');
    if (clearBtn) {
        clearBtn.addEventListener('click', clearEvents);
    }
});

// Initialize the map
function initMap() {
    // Create the map
    map = new maplibregl.Map({
        container: 'map',
        style: 'https://tiles.openfreemap.org/styles/liberty',
        center: [2.2137, 46.2276], // Default center (center of metropolitan France)
        zoom: 5
    });
    
    // Add navigation controls
    map.addControl(new maplibregl.NavigationControl());
    
    // Add attribution control with OpenStreetMap attribution
    map.addControl(new maplibregl.AttributionControl({
        customAttribution: '© <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors'
    }));
    
    // Load events when the map is loaded
    map.on('load', function() {
        loadEvents();
    });
}

// Function to load events from localStorage
function loadEvents() {
    // Clear existing markers
    markers.forEach(marker => marker.remove());
    markers = [];
    
    // Get events from localStorage
    const savedEvents = JSON.parse(localStorage.getItem('oedb_events') || '[]');
    
    // Update event count
    document.getElementById('event-count').textContent = 
        `${savedEvents.length} event${savedEvents.length !== 1 ? 's' : ''} found`;
    
    // Clear event list
    const eventList = document.getElementById('event-list');
    eventList.innerHTML = '';
    
    // If no events, show message
    if (savedEvents.length === 0) {
        eventList.innerHTML = '<div class="no-events">No saved events found. Use the demo map to save events.</div>';
        return;
    }
    
    // Create bounds object to fit map to all markers
    const bounds = new maplibregl.LngLatBounds();
    
    // Add markers and list items for each event
    savedEvents.forEach((event, index) => {
        // Skip events without geometry
        if (!event.geometry || !event.geometry.coordinates) return;
        
        // Get coordinates
        const coordinates = event.geometry.coordinates;
        
        // Add marker to map
        const marker = new maplibregl.Marker()
            .setLngLat(coordinates)
            .addTo(map);
        
        // Add popup with event info
        const popup = new maplibregl.Popup({ offset: 25 })
            .setHTML(`
                <h3>${event.label || 'Unnamed Event'}</h3>
                <p><strong>Type:</strong> ${event.what || 'Unknown'}</p>
                <p><strong>Start:</strong> ${formatDate(event.start)}</p>
                <p><strong>End:</strong> ${formatDate(event.stop)}</p>
                ${event.description ? `<p><strong>Description:</strong> ${event.description}</p>` : ''}
                <button class="delete-event-btn" onclick="deleteEvent(${index})">Delete</button>
            `);
        
        marker.setPopup(popup);
        markers.push(marker);
        
        // Extend bounds to include this marker
        bounds.extend(coordinates);
        
        // Add to event list
        const eventItem = document.createElement('div');
        eventItem.className = 'event-item';
        eventItem.innerHTML = `
            <div class="event-header">
                <h3>${event.label || 'Unnamed Event'}</h3>
                <div class="event-actions">
                    <button class="zoom-btn" onclick="zoomToEvent(${coordinates[0]}, ${coordinates[1]})">
                        <i class="fas fa-search-location"></i>
                    </button>
                    <button class="delete-btn" onclick="deleteEvent(${index})">
                        <i class="fas fa-trash-alt"></i>
                    </button>
                </div>
            </div>
            <div class="event-details">
                <p><strong>Type:</strong> ${event.what || 'Unknown'}</p>
                <p><strong>When:</strong> ${formatDate(event.start)} to ${formatDate(event.stop)}</p>
                ${event.description ? `<p><strong>Description:</strong> ${event.description}</p>` : ''}
            </div>
        `;
        eventList.appendChild(eventItem);
    });
    
    // Fit map to bounds if we have any markers
    if (!bounds.isEmpty()) {
        map.fitBounds(bounds, { padding: 50 });
    }
}

// Format date for display
function formatDate(dateString) {
    if (!dateString) return 'Unknown';
    
    const date = new Date(dateString);
    return date.toLocaleString();
}

// Zoom to a specific event
function zoomToEvent(lng, lat) {
    map.flyTo({
        center: [lng, lat],
        zoom: 14
    });
}

// Delete an event
function deleteEvent(index) {
    // Get events from localStorage
    const savedEvents = JSON.parse(localStorage.getItem('oedb_events') || '[]');
    
    // Remove the event at the specified index
    savedEvents.splice(index, 1);
    
    // Save the updated events back to localStorage
    localStorage.setItem('oedb_events', JSON.stringify(savedEvents));
    
    // Reload the events
    loadEvents();
}

// Clear all events
function clearEvents() {
    if (confirm('Are you sure you want to delete all saved events?')) {
        // Clear events from localStorage
        localStorage.removeItem('oedb_events');
        
        // Reload the events
        loadEvents();
    }
}