81 lines
2.9 KiB
JavaScript
81 lines
2.9 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
const dropZone = document.getElementById('drop-zone');
|
|
const fileInput = document.getElementById('csv-file');
|
|
const fileNameDisplay = document.getElementById('file-name-display');
|
|
const uploadForm = document.getElementById('upload-form');
|
|
const resultsSection = document.getElementById('results-section');
|
|
const analysisOutput = document.getElementById('analysis-output');
|
|
const submitButton = uploadForm.querySelector('button[type="submit"]');
|
|
const spinner = submitButton.querySelector('.spinner-border');
|
|
|
|
// Open file dialog when drop zone is clicked
|
|
dropZone.addEventListener('click', () => fileInput.click());
|
|
|
|
// Drag and drop events
|
|
dropZone.addEventListener('dragover', (e) => {
|
|
e.preventDefault();
|
|
dropZone.classList.add('drag-over');
|
|
});
|
|
|
|
dropZone.addEventListener('dragleave', () => {
|
|
dropZone.classList.remove('drag-over');
|
|
});
|
|
|
|
dropZone.addEventListener('drop', (e) => {
|
|
e.preventDefault();
|
|
dropZone.classList.remove('drag-over');
|
|
const files = e.dataTransfer.files;
|
|
if (files.length > 0) {
|
|
fileInput.files = files;
|
|
updateFileName();
|
|
}
|
|
});
|
|
|
|
// Update file name display on change
|
|
fileInput.addEventListener('change', updateFileName);
|
|
|
|
function updateFileName() {
|
|
if (fileInput.files.length > 0) {
|
|
fileNameDisplay.textContent = fileInput.files[0].name;
|
|
} else {
|
|
fileNameDisplay.textContent = 'No file selected';
|
|
}
|
|
}
|
|
|
|
// Handle form submission
|
|
uploadForm.addEventListener('submit', function (e) {
|
|
e.preventDefault();
|
|
|
|
if (fileInput.files.length === 0) {
|
|
alert('Please select a CSV file to analyze.');
|
|
return;
|
|
}
|
|
|
|
// Show spinner and disable button
|
|
spinner.classList.remove('d-none');
|
|
submitButton.disabled = true;
|
|
|
|
// --- FAKE LOADER FOR DEMO ---
|
|
// In the next step, we will replace this with a real AJAX call to the backend.
|
|
setTimeout(() => {
|
|
// Hide spinner and re-enable button
|
|
spinner.classList.add('d-none');
|
|
submitButton.disabled = false;
|
|
|
|
// Show results section with a placeholder message
|
|
resultsSection.style.display = 'block';
|
|
analysisOutput.innerHTML = `
|
|
<div class="text-center p-5">
|
|
<div class="spinner-border text-primary" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
<p class="mt-3">AI is analyzing your data... This will be implemented in the next step.</p>
|
|
</div>
|
|
`;
|
|
// Scroll to results
|
|
resultsSection.scrollIntoView({ behavior: 'smooth' });
|
|
|
|
}, 2000);
|
|
});
|
|
});
|