Spaces:
Running
Running
// 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); | |
} | |