assets/js/components.js

// Components initialization for Patrol Control System

// Initialize all components when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
    // Initialize map if liveMap element exists
    const liveMapElement = document.getElementById('liveMap');
    if (liveMapElement) {
        initializeLiveMap();
    }
});

// Initialize live map with Leaflet
function initializeLiveMap() {
    if (typeof L === 'undefined') {
        console.log('Leaflet not loaded yet');
        return;
    }
    
    // Create map instance
    const map = L.map('liveMap').setView([48.8566, 2.3522], 13);
    
    // Add tile layer
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);
        
    // Add some sample markers for demo
    const samplePoints = [
        { lat: 48.8566, lng: 2.3522, title: 'Entrée Principale' },
        { lat: 48.8584, lng: 2.3545, title: 'Salle des Serveurs' },
        { lat: 48.8575, lng: 2.3518, title: 'Parking' },
        { lat: 48.8569, lng: 2.3515, title: 'Porte Arrière' }
    ];
    
    samplePoints.forEach(point => {
        const marker = L.marker([point.lat, point.lng]).addTo(map);
        marker.bindPopup(`<b>${point.title}</b>`);
        
    // Store map instance globally for updates
    window.liveMapInstance = map;
}

// Update map markers with real-time data
function updateMapMarkers() {
    if (!window.liveMapInstance) return;
    
    const map = window.liveMapInstance;
    
    // Simulate agent movements
    const markers = [];
    for (let i = 0; i < 5; i++) {
        const lat = 48.8566 + (Math.random() - 0.5) * 0.01;
        const lng = 2.3522 + (Math.random() - 0.5) * 0.01;
        
        const marker = L.marker([lat, lng]).addTo(map);
        marker.bindPopup(`<b>Agent ${i + 1}</b><br>Dernière position`));
        
        markers.push(marker);
    }
    
    // Store markers for cleanup
    window.liveMapMarkers = markers;
}