80 lines
2.8 KiB
JavaScript
80 lines
2.8 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
const uploadSection = document.getElementById('uploadSection');
|
|
const reviewSection = document.getElementById('reviewSection');
|
|
const processingSection = document.getElementById('processingSection');
|
|
const dropZone = document.getElementById('dropZone');
|
|
const fileInput = document.getElementById('fileInput');
|
|
const startAutomationBtn = document.getElementById('startAutomationBtn');
|
|
const discardBtn = document.getElementById('discardBtn');
|
|
const uploadNewBtn = document.getElementById('uploadNewBtn');
|
|
|
|
function showSection(section) {
|
|
[uploadSection, reviewSection, processingSection].forEach(s => s.classList.add('d-none'));
|
|
section.classList.remove('d-none');
|
|
}
|
|
|
|
function handleFileSelect(file) {
|
|
if (!file) return;
|
|
|
|
showSection(processingSection);
|
|
|
|
// Simulate AI processing
|
|
setTimeout(() => {
|
|
// Mock data - in a real app, this would come from an API call
|
|
document.getElementById('firstName').value = 'Max';
|
|
document.getElementById('lastName').value = 'Mustermann';
|
|
document.getElementById('street').value = 'Musterstraße 1';
|
|
document.getElementById('zip').value = '12345';
|
|
document.getElementById('city').value = 'Berlin';
|
|
document.getElementById('dob').value = '1990-01-15';
|
|
showSection(reviewSection);
|
|
}, 2500);
|
|
}
|
|
|
|
// --- Event Listeners ---
|
|
|
|
dropZone.addEventListener('click', () => fileInput.click());
|
|
|
|
dropZone.addEventListener('dragover', (e) => {
|
|
e.preventDefault();
|
|
dropZone.classList.add('is-dragover');
|
|
});
|
|
|
|
dropZone.addEventListener('dragleave', (e) => {
|
|
e.preventDefault();
|
|
dropZone.classList.remove('is-dragover');
|
|
});
|
|
|
|
dropZone.addEventListener('drop', (e) => {
|
|
e.preventDefault();
|
|
dropZone.classList.remove('is-dragover');
|
|
if (e.dataTransfer.files.length) {
|
|
fileInput.files = e.dataTransfer.files;
|
|
handleFileSelect(fileInput.files[0]);
|
|
}
|
|
});
|
|
|
|
fileInput.addEventListener('change', () => {
|
|
if (fileInput.files.length) {
|
|
handleFileSelect(fileInput.files[0]);
|
|
}
|
|
});
|
|
|
|
startAutomationBtn.addEventListener('click', () => {
|
|
alert('This would start the automation process on the backend. This is just a UI mock-up for now!');
|
|
});
|
|
|
|
discardBtn.addEventListener('click', () => {
|
|
if(confirm('Are you sure you want to discard the extracted data?')) {
|
|
showSection(uploadSection);
|
|
}
|
|
});
|
|
|
|
uploadNewBtn.addEventListener('click', () => {
|
|
showSection(uploadSection);
|
|
});
|
|
|
|
// Initial state
|
|
showSection(uploadSection);
|
|
});
|