static/js/main.js

// Main JavaScript for Web Scraper API UI

document.addEventListener('DOMContentLoaded', function() {
    // Get form and result elements
    const testForm = document.getElementById('test-form');
    const urlsTextarea = document.getElementById('urls');
    const spinner = document.getElementById('spinner');
    const resultSection = document.getElementById('result-section');
    const consolidatedResult = document.getElementById('consolidated-result');
    const rawResult = document.getElementById('raw-result');
    
    // Only set up event listener if the form exists (we're on the home page)
    if (testForm) {
        testForm.addEventListener('submit', async function(e) {
            e.preventDefault();
            
            // Get URLs from textarea (one per line)
            const urlsText = urlsTextarea.value.trim();
            if (!urlsText) {
                showError('Please enter at least one URL');
                return;
            }
            
            // Split by newline and filter out empty lines
            const urls = urlsText.split('\n')
                .map(url => url.trim())
                .filter(url => url.length > 0);
            
            if (urls.length === 0) {
                showError('Please enter at least one valid URL');
                return;
            }
            
            if (urls.length > 10) {
                showError('Maximum 10 URLs allowed per request');
                return;
            }
            
            // Show spinner, hide results
            spinner.classList.remove('d-none');
            resultSection.classList.add('d-none');
            
            try {
                // Make API request
                const response = await fetch('/api/scrape-and-consolidate', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ urls })
                });
                
                // Parse response
                const data = await response.json();
                
                // Update results
                if (response.ok) {
                    consolidatedResult.textContent = JSON.stringify(data.consolidated_data, null, 2);
                    rawResult.textContent = JSON.stringify(data.scraped_results, null, 2);
                    resultSection.classList.remove('d-none');
                } else {
                    showError(`Error: ${data.error || 'Unknown error occurred'}`);
                }
            } catch (error) {
                showError(`Error: ${error.message}`);
            } finally {
                // Hide spinner
                spinner.classList.add('d-none');
            }
        });
    }
    
    // Initialize Feather icons
    if (typeof feather !== 'undefined') {
        feather.replace();
    }
});

/**
 * Show error message to user
 * @param {string} message - Error message to display
 */
function showError(message) {
    // Check if alert container exists, create if not
    let alertContainer = document.getElementById('alert-container');
    
    if (!alertContainer) {
        alertContainer = document.createElement('div');
        alertContainer.id = 'alert-container';
        alertContainer.className = 'mt-3';
        
        // Insert after the form
        const testForm = document.getElementById('test-form');
        if (testForm) {
            testForm.after(alertContainer);
        }
    }
    
    // Create alert
    const alert = document.createElement('div');
    alert.className = 'alert alert-danger alert-dismissible fade show';
    alert.role = 'alert';
    
    // Create alert content
    alert.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    `;
    
    // Add alert to container
    alertContainer.innerHTML = '';
    alertContainer.appendChild(alert);
    
    // Auto-dismiss after 5 seconds
    setTimeout(() => {
        const bsAlert = new bootstrap.Alert(alert);
        bsAlert.close();
    }, 5000);
}