bmc_hub/app/alert_notes/frontend/alert_check.js

/**
 * Alert Notes JavaScript Module
 * Handles loading and displaying alert notes for customers and contacts
 */

/**
 * Load and display alerts for an entity
 * @param {string} entityType - 'customer' or 'contact'
 * @param {number} entityId - The entity ID
 * @param {string} mode - 'inline' (show in page) or 'modal' (show popup)
 * @param {string} containerId - Optional container ID for inline mode (default: 'alert-notes-container')
 */
async function loadAndDisplayAlerts(entityType, entityId, mode = 'inline', containerId = 'alert-notes-container') {
    try {
        const response = await fetch(`/api/v1/alert-notes/check?entity_type=${entityType}&entity_id=${entityId}`, {
            credentials: 'include'
        });
        
        if (!response.ok) {
            console.error('Failed to fetch alerts:', response.status);
            return;
        }
        
        const data = await response.json();
        
        if (!data.has_alerts) {
            // No alerts - clear container if in inline mode
            if (mode === 'inline') {
                const container = document.getElementById(containerId);
                if (container) {
                    container.innerHTML = '';
                }
            }
            return;
        }
        
        // Store for later use
        window.currentAlertData = data;
        
        if (mode === 'modal') {
            // Show modal popup
            showAlertModal(data.alerts);
        } else {
            // Show inline
            displayAlertsInline(data.alerts, containerId, data.user_has_acknowledged);
        }
        
    } catch (error) {
        console.error('Error loading alerts:', error);
    }
}

/**
 * Display alerts inline in a container
 * @param {Array} alerts - Array of alert objects
 * @param {string} containerId - Container element ID
 * @param {boolean} userHasAcknowledged - Whether user has acknowledged all
 */
function displayAlertsInline(alerts, containerId, userHasAcknowledged) {
    const container = document.getElementById(containerId);
    if (!container) {
        console.error('Alert container not found:', containerId);
        return;
    }
    
    // Clear existing content
    container.innerHTML = '';
    
    // Add each alert
    alerts.forEach(alert => {
        // Set user_has_acknowledged on individual alert if needed
        alert.user_has_acknowledged = userHasAcknowledged;
        
        // Render using the renderAlertBox function from alert_box.html
        const alertHtml = renderAlertBox(alert);
        container.innerHTML += alertHtml;
    });
}

/**
 * Acknowledge a single alert
 * @param {number} alertId - The alert ID
 * @param {HTMLElement} buttonElement - The button that was clicked
 */
async function acknowledgeAlert(alertId, buttonElement) {
    try {
        const response = await fetch(`/api/v1/alert-notes/${alertId}/acknowledge`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            credentials: 'include'
        });
        
        const data = await response.json();
        
        if (data.status === 'acknowledged' || data.status === 'already_acknowledged') {
            // Remove the alert box with fade animation
            const alertBox = buttonElement.closest('.alert-note-box');
            if (alertBox) {
                alertBox.style.opacity = '0';
                alertBox.style.transform = 'translateX(-20px)';
                alertBox.style.transition = 'all 0.3s';
                setTimeout(() => alertBox.remove(), 300);
            }
        }
    } catch (error) {
        console.error('Error acknowledging alert:', error);
        alert('Kunne ikke markere som læst. Prøv igen.');
    }
}

/**
 * Initialize alert checking on page load
 * Call this from your page's DOMContentLoaded or similar
 * @param {string} entityType - 'customer' or 'contact'
 * @param {number} entityId - The entity ID
 * @param {Object} options - Optional settings {mode: 'inline'|'modal', containerId: 'element-id'}
 */
function initAlertNotes(entityType, entityId, options = {}) {
    const mode = options.mode || 'inline';
    const containerId = options.containerId || 'alert-notes-container';
    
    loadAndDisplayAlerts(entityType, entityId, mode, containerId);
}

// Make functions globally available
window.loadAndDisplayAlerts = loadAndDisplayAlerts;
window.displayAlertsInline = displayAlertsInline;
window.acknowledgeAlert = acknowledgeAlert;
window.initAlertNotes = initAlertNotes;