haproxy-dashboard/static/js/form.js

(() => {
    'use strict';
    
    // Helper functions (shared)
    const $ = (sel, root = document) => root.querySelector(sel);
    const $$ = (sel, root = document) => Array.from(root.querySelectorAll(sel));
    
    // ===== HEALTH CHECK FIELDS (Protocol-dependent) =====
    const protocolSelect = document.getElementById('protocol');
    const healthCheckFields = document.getElementById('health_check_fields');
    const tcpHealthCheck = document.getElementById('tcp_health_check');
    
    const onProtocolChange = () => {
        if (protocolSelect?.value === 'http') {
            const healthCheckParent = document.getElementById('health_check')?.parentElement.parentElement;
            if (healthCheckParent) healthCheckParent.style.display = 'block';
            if (tcpHealthCheck) tcpHealthCheck.style.display = 'none';
        } else {
            const healthCheckParent = document.getElementById('health_check')?.parentElement.parentElement;
            if (healthCheckParent) healthCheckParent.style.display = 'none';
            if (tcpHealthCheck) tcpHealthCheck.style.display = 'flex';
        }
    };
    
    protocolSelect?.addEventListener('change', onProtocolChange);
    
    // ===== STICKY SESSION FIELDS =====
    const stickyCheckbox = document.getElementById('sticky_session');
    const stickyFields = document.getElementById('sticky_fields');
    
    stickyCheckbox?.addEventListener('change', function() {
        stickyFields?.classList.toggle('d-none', !this.checked);
    });
    
    // ===== HEALTH CHECK LINK FIELD =====
    const healthCheckbox = document.getElementById('health_check');
    healthCheckbox?.addEventListener('change', function() {
        document.getElementById('health_check_fields')?.classList.toggle('d-none', !this.checked);
    });
    
    // ===== CUSTOM HEADER FIELDS =====
    const headerCheckbox = document.getElementById('add_header');
    const headerFields = document.querySelectorAll('#header_fields');
    
    headerCheckbox?.addEventListener('change', function() {
        headerFields.forEach(field => field.classList.toggle('d-none', !this.checked));
    });
    
    // ===== NO-LB MODE HANDLING =====
    const lbMethodSelect = $('#lb_method');
    const backendServersContainer = $('#backend_servers_container');
    const addServerBtn = $('#add_backend_btn');
    
    const onLbMethodChange = () => {
        const isNoLb = lbMethodSelect?.value === 'no-lb';
        
        if (isNoLb) {
            // Hide add server button
            if (addServerBtn) addServerBtn.classList.add('d-none');
            
            // Keep only first server and remove others
            const serverRows = $$('.backend-server-row', backendServersContainer);
            serverRows.forEach((row, idx) => {
                if (idx > 0) row.remove();
            });
            
            // Add info about no-lb mode if it doesn't exist
            if (!$('.no-lb-info')) {
                const info = document.createElement('div');
                info.className = 'alert alert-info alert-sm no-lb-info mt-2';
                info.innerHTML = '<i class="bi bi-info-circle me-2"></i><small>Mode <strong>no-lb</strong>: frontend → backend → single server. You can still enable XSS, DOS, SQL injection protection etc.</small>';
                if (backendServersContainer?.parentElement) {
                    backendServersContainer.parentElement.appendChild(info);
                }
            }
        } else {
            // Show add server button
            if (addServerBtn) addServerBtn.classList.remove('d-none');
            
            // Remove no-lb info
            const info = $('.no-lb-info');
            if (info) info.remove();
        }
    };
    
    lbMethodSelect?.addEventListener('change', onLbMethodChange);
    if (lbMethodSelect) onLbMethodChange();
    
    // ===== BACKEND SERVER ROWS (Dynamic Add/Remove) =====
    let serverCount = 1;
    const container = $('#backend_servers_container');
    const addBtn = $('#add_backend_btn');
    
    const createRow = () => {
        serverCount++;
        const row = document.createElement('div');
        row.className = 'row g-3 backend-server-row mt-1';
        row.innerHTML = `
            <div class="col-md-3">
                <input type="text" class="form-control" name="backend_server_names[]" placeholder="server${serverCount}" required>
            </div>
            <div class="col-md-4">
                <input type="text" class="form-control" name="backend_server_ips[]" placeholder="192.168.1.${serverCount}" required>
            </div>
            <div class="col-md-2">
                <input type="number" class="form-control" name="backend_server_ports[]" placeholder="80" min="1" max="65535" required>
            </div>
            <div class="col-md-2">
                <input type="number" class="form-control" name="backend_server_maxconns[]" placeholder="100">
            </div>
            <div class="col-md-1">
                <button type="button" class="btn btn-danger btn-sm w-100 remove-server">
                    <i class="bi bi-trash"></i>
                </button>
            </div>
        `;
        
        const removeBtn = row.querySelector('.remove-server');
        removeBtn.addEventListener('click', () => row.remove());
        
        return row;
    };
    
    addBtn?.addEventListener('click', () => {
        if (container) {
            container.appendChild(createRow());
        }
    });
    
    // Remove button for dynamically added rows
    container?.addEventListener('click', (e) => {
        if (e.target.closest('.remove-server')) {
            e.target.closest('.backend-server-row').remove();
        }
    });
    
})();