CalejoControl/static/dashboard.js

// Dashboard JavaScript for Calejo Control Adapter

// Tab management
function showTab(tabName) {
    // Hide all tabs
    document.querySelectorAll('.tab-content').forEach(tab => {
        tab.classList.remove('active');
    });
    document.querySelectorAll('.tab-button').forEach(button => {
        button.classList.remove('active');
    });
    
    // Show selected tab
    document.getElementById(tabName + '-tab').classList.add('active');
    event.target.classList.add('active');
    
    // Load data for the tab
    if (tabName === 'status') {
        loadStatus();
    } else if (tabName === 'logs') {
        loadLogs();
    }
}

// Alert management
function showAlert(message, type) {
    const alertsDiv = document.getElementById('alerts');
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert ${type}`;
    alertDiv.textContent = message;
    alertsDiv.appendChild(alertDiv);
    
    // Auto-remove after 5 seconds
    setTimeout(() => {
        alertDiv.remove();
    }, 5000);
}

// Status functions
async function loadStatus() {
    try {
        const response = await fetch('/api/v1/dashboard/status');
        const status = await response.json();
        
        const statusGrid = document.getElementById('status-grid');
        statusGrid.innerHTML = '';
        
        for (const [key, value] of Object.entries(status)) {
            const statusCard = document.createElement('div');
            statusCard.className = `status-card ${value}`;
            statusCard.innerHTML = `
                <h3>${key.replace('_', ' ').toUpperCase()}</h3>
                <p>${value.toUpperCase()}</p>
            `;
            statusGrid.appendChild(statusCard);
        }
    } catch (error) {
        console.error('Error loading status:', error);
        showAlert('Failed to load system status', 'error');
    }
}

function refreshStatus() {
    loadStatus();
}

// Configuration functions
async function loadConfiguration() {
    try {
        const response = await fetch('/api/v1/dashboard/config');
        const config = await response.json();
        
        // Populate form fields
        document.getElementById('db_host').value = config.database.db_host;
        document.getElementById('db_port').value = config.database.db_port;
        document.getElementById('db_name').value = config.database.db_name;
        document.getElementById('db_user').value = config.database.db_user;
        
        document.getElementById('opcua_enabled').checked = config.opcua.enabled;
        document.getElementById('opcua_port').value = config.opcua.port;
        
        document.getElementById('modbus_enabled').checked = config.modbus.enabled;
        document.getElementById('modbus_port').value = config.modbus.port;
        
        document.getElementById('rest_api_host').value = config.rest_api.host;
        document.getElementById('rest_api_port').value = config.rest_api.port;
        document.getElementById('rest_api_cors_enabled').checked = config.rest_api.cors_enabled;
        
        document.getElementById('health_monitor_port').value = config.monitoring.health_monitor_port;
        
        showAlert('Configuration loaded successfully', 'success');
    } catch (error) {
        console.error('Error loading configuration:', error);
        showAlert('Failed to load configuration', 'error');
    }
}

async function saveConfiguration() {
    try {
        const config = {
            database: {
                db_host: document.getElementById('db_host').value,
                db_port: parseInt(document.getElementById('db_port').value),
                db_name: document.getElementById('db_name').value,
                db_user: document.getElementById('db_user').value,
                db_password: document.getElementById('db_password').value
            },
            opcua: {
                enabled: document.getElementById('opcua_enabled').checked,
                host: 'localhost',
                port: parseInt(document.getElementById('opcua_port').value)
            },
            modbus: {
                enabled: document.getElementById('modbus_enabled').checked,
                host: 'localhost',
                port: parseInt(document.getElementById('modbus_port').value),
                unit_id: 1
            },
            rest_api: {
                enabled: true,
                host: document.getElementById('rest_api_host').value,
                port: parseInt(document.getElementById('rest_api_port').value),
                cors_enabled: document.getElementById('rest_api_cors_enabled').checked
            },
            monitoring: {
                health_monitor_port: parseInt(document.getElementById('health_monitor_port').value),
                metrics_enabled: true
            },
            security: {
                jwt_secret_key: '',
                api_key: ''
            }
        };
        
        const response = await fetch('/api/v1/dashboard/config', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(config)
        });
        
        const result = await response.json();
        
        if (result.valid) {
            showAlert('Configuration saved successfully', 'success');
            if (result.warnings.length > 0) {
                showAlert('Warnings: ' + result.warnings.join(', '), 'warning');
            }
        } else {
            showAlert('Configuration validation failed: ' + result.errors.join(', '), 'error');
        }
    } catch (error) {
        console.error('Error saving configuration:', error);
        showAlert('Failed to save configuration', 'error');
    }
}

async function validateConfiguration() {
    try {
        const config = {
            database: {
                db_host: document.getElementById('db_host').value,
                db_port: parseInt(document.getElementById('db_port').value),
                db_name: document.getElementById('db_name').value,
                db_user: document.getElementById('db_user').value,
                db_password: document.getElementById('db_password').value
            },
            opcua: {
                enabled: document.getElementById('opcua_enabled').checked,
                host: 'localhost',
                port: parseInt(document.getElementById('opcua_port').value)
            },
            modbus: {
                enabled: document.getElementById('modbus_enabled').checked,
                host: 'localhost',
                port: parseInt(document.getElementById('modbus_port').value),
                unit_id: 1
            },
            rest_api: {
                enabled: true,
                host: document.getElementById('rest_api_host').value,
                port: parseInt(document.getElementById('rest_api_port').value),
                cors_enabled: document.getElementById('rest_api_cors_enabled').checked
            },
            monitoring: {
                health_monitor_port: parseInt(document.getElementById('health_monitor_port').value),
                metrics_enabled: true
            },
            security: {
                jwt_secret_key: '',
                api_key: ''
            }
        };
        
        const response = await fetch('/api/v1/dashboard/config', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(config)
        });
        
        const result = await response.json();
        
        if (result.valid) {
            showAlert('Configuration is valid', 'success');
            if (result.warnings.length > 0) {
                showAlert('Warnings: ' + result.warnings.join(', '), 'warning');
            }
        } else {
            showAlert('Configuration validation failed: ' + result.errors.join(', '), 'error');
        }
    } catch (error) {
        console.error('Error validating configuration:', error);
        showAlert('Failed to validate configuration', 'error');
    }
}

// Logs functions
async function loadLogs() {
    try {
        const response = await fetch('/api/v1/dashboard/logs?limit=50');
        const data = await response.json();
        
        const logsContainer = document.getElementById('logs-container');
        logsContainer.innerHTML = '';
        
        data.logs.forEach(log => {
            const logEntry = document.createElement('div');
            logEntry.className = `log-entry ${log.level.toLowerCase()}`;
            logEntry.innerHTML = `
                <span style="color: #666;">${log.timestamp}</span>
                <span style="font-weight: bold; margin: 0 10px;">${log.level}</span>
                <span>${log.message}</span>
            `;
            logsContainer.appendChild(logEntry);
        });
    } catch (error) {
        console.error('Error loading logs:', error);
        showAlert('Failed to load logs', 'error');
    }
}

// Action functions
async function restartSystem() {
    if (confirm('Are you sure you want to restart the system? This will temporarily interrupt service.')) {
        try {
            const response = await fetch('/api/v1/dashboard/restart', {
                method: 'POST'
            });
            const result = await response.json();
            showAlert(`Restart initiated: ${result.message}`, 'success');
        } catch (error) {
            console.error('Error restarting system:', error);
            showAlert('Failed to restart system', 'error');
        }
    }
}

async function createBackup() {
    try {
        const response = await fetch('/api/v1/dashboard/backup');
        const result = await response.json();
        showAlert(`Backup initiated: ${result.message}`, 'success');
    } catch (error) {
        console.error('Error creating backup:', error);
        showAlert('Failed to create backup', 'error');
    }
}

async function runHealthCheck() {
    try {
        const response = await fetch('/health');
        const result = await response.json();
        showAlert(`Health check: ${result.status}`, 'success');
    } catch (error) {
        console.error('Error running health check:', error);
        showAlert('Health check failed', 'error');
    }
}

function viewMetrics() {
    window.open('/metrics', '_blank');
}

// Initialize dashboard on load
document.addEventListener('DOMContentLoaded', function() {
    // Load initial status
    loadStatus();
    
    // Auto-refresh status every 30 seconds
    setInterval(loadStatus, 30000);
});