split templates

oedb/resources/demo/static/view_events.js

@@ -0,0 +1,174 @@
+// 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();
+    }
+}