Update static/index.html

static/index.html

@@ -264,448 +264,187 @@
     </div>
 
     <script>
-      let currentInvoiceData = null;
-let currentTaskId = null;
-let pollingInterval = null;
-
-const uploadArea = document.getElementById('upload-area');
-const fileInput = document.getElementById('file-input');
-const fileInfo = document.getElementById('file-info');
-const fileName = document.getElementById('file-name');
-const processing = document.getElementById('processing');
-const resultSection = document.getElementById('result-section');
-const resultContent = document.getElementById('result-content');
-const buttonsSection = document.getElementById('buttons-section');
-const errorMessage = document.getElementById('error-message');
-const successMessage = document.getElementById('success-message');
-const convertJsonBtn = document.getElementById('convert-json');
-const convertExcelBtn = document.getElementById('convert-excel');
-
-// Add progress elements if they don't exist
-let progressContainer = document.getElementById('progress-container');
-let progressBar = document.getElementById('progress-bar');
-let progressText = document.getElementById('progress-text');
-
-if (!progressContainer) {
-    // Create progress elements
-    progressContainer = document.createElement('div');
-    progressContainer.id = 'progress-container';
-    progressContainer.style.cssText = `
-        display: none;
-        margin: 20px 0;
-        padding: 15px;
-        background-color: #f8f9fa;
-        border-radius: 8px;
-        border: 1px solid #dee2e6;
-    `;
-    
-    progressBar = document.createElement('div');
-    progressBar.id = 'progress-bar';
-    progressBar.style.cssText = `
-        width: 100%;
-        height: 20px;
-        background-color: #e9ecef;
-        border-radius: 10px;
-        overflow: hidden;
-        margin-bottom: 10px;
-    `;
-    
-    const progressFill = document.createElement('div');
-    progressFill.id = 'progress-fill';
-    progressFill.style.cssText = `
-        height: 100%;
-        background: linear-gradient(90deg, #007bff, #0056b3);
-        width: 0%;
-        transition: width 0.3s ease;
-        border-radius: 10px;
-    `;
-    
-    progressText = document.createElement('div');
-    progressText.id = 'progress-text';
-    progressText.style.cssText = `
-        font-size: 14px;
-        color: #495057;
-        text-align: center;
-        font-weight: 500;
-    `;
-    
-    progressBar.appendChild(progressFill);
-    progressContainer.appendChild(progressBar);
-    progressContainer.appendChild(progressText);
-    
-    // Insert after processing div
-    processing.parentNode.insertBefore(progressContainer, processing.nextSibling);
-}
-
-uploadArea.addEventListener('click', () => fileInput.click());
-
-uploadArea.addEventListener('dragover', (e) => {
-    e.preventDefault();
-    uploadArea.classList.add('dragover');
-});
-
-uploadArea.addEventListener('dragleave', () => {
-    uploadArea.classList.remove('dragover');
-});
-
-uploadArea.addEventListener('drop', (e) => {
-    e.preventDefault();
-    uploadArea.classList.remove('dragover');
-    const files = e.dataTransfer.files;
-    if (files.length > 0) {
-        handleFile(files[0]);
-    }
-});
-
-fileInput.addEventListener('change', (e) => {
-    if (e.target.files.length > 0) {
-        handleFile(e.target.files[0]);
-    }
-});
-
-function hideMessages() {
-    errorMessage.style.display = 'none';
-    successMessage.style.display = 'none';
-}
-
-function showError(message) {
-    hideMessages();
-    errorMessage.textContent = message;
-    errorMessage.style.display = 'block';
-    hideProcessing();
-}
-
-function showSuccess(message) {
-    hideMessages();
-    successMessage.textContent = message;
-    successMessage.style.display = 'block';
-}
-
-function showProcessing() {
-    processing.style.display = 'block';
-    progressContainer.style.display = 'block';
-    updateProgress(0, 'Starting upload...');
-}
-
-function hideProcessing() {
-    processing.style.display = 'none';
-    progressContainer.style.display = 'none';
-    if (pollingInterval) {
-        clearInterval(pollingInterval);
-        pollingInterval = null;
-    }
-}
-
-function updateProgress(percentage, message) {
-    const progressFill = document.getElementById('progress-fill');
-    if (progressFill) {
-        progressFill.style.width = percentage + '%';
-    }
-    if (progressText) {
-        progressText.textContent = message;
-    }
-}
-
-function startPolling(taskId) {
-    let pollCount = 0;
-    const maxPolls = 150; // 5 minutes at 2-second intervals
-    
-    pollingInterval = setInterval(async () => {
-        pollCount++;
-        
-        if (pollCount > maxPolls) {
-            clearInterval(pollingInterval);
-            hideProcessing();
-            showError('Processing timeout. Please try again with a smaller file.');
-            return;
-        }
-        
-        try {
-            const response = await fetch(`/status/${taskId}`);
-            
-            if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
-            }
-            
-            const data = await response.json();
-            
-            if (data.status === 'completed') {
-                clearInterval(pollingInterval);
-                hideProcessing();
-                
-                if (data.result && data.result.success) {
-                    currentInvoiceData = data.result.data;
-                    resultContent.textContent = JSON.stringify(data.result.data, null, 2);
-                    resultSection.style.display = 'block';
-                    buttonsSection.style.display = 'block';
-                    
-                    const processingTime = data.result.processing_time ? 
-                        ` (${data.result.processing_time.toFixed(1)}s)` : '';
-                    showSuccess(`Invoice processed successfully!${processingTime}`);
-                } else {
-                    showError(data.result?.error || 'Processing failed');
-                }
-                
-            } else if (data.status === 'failed') {
-                clearInterval(pollingInterval);
-                hideProcessing();
-                showError(data.error || 'Processing failed');
-                
-            } else {
-                // Still processing - update progress
-                const progressPercentage = Math.min(20 + (pollCount * 2), 90);
-                updateProgress(progressPercentage, data.progress || 'Processing...');
+        let currentInvoiceData = null;
+        
+        const uploadArea = document.getElementById('upload-area');
+        const fileInput = document.getElementById('file-input');
+        const fileInfo = document.getElementById('file-info');
+        const fileName = document.getElementById('file-name');
+        const processing = document.getElementById('processing');
+        const resultSection = document.getElementById('result-section');
+        const resultContent = document.getElementById('result-content');
+        const buttonsSection = document.getElementById('buttons-section');
+        const errorMessage = document.getElementById('error-message');
+        const successMessage = document.getElementById('success-message');
+        const convertJsonBtn = document.getElementById('convert-json');
+        const convertExcelBtn = document.getElementById('convert-excel');
+        
+        uploadArea.addEventListener('click', () => fileInput.click());
+        
+        uploadArea.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            uploadArea.classList.add('dragover');
+        });
+        
+        uploadArea.addEventListener('dragleave', () => {
+            uploadArea.classList.remove('dragover');
+        });
+        
+        uploadArea.addEventListener('drop', (e) => {
+            e.preventDefault();
+            uploadArea.classList.remove('dragover');
+            const files = e.dataTransfer.files;
+            if (files.length > 0) {
+                handleFile(files[0]);
             }
-            
-        } catch (error) {
-            console.error('Polling error:', error);
-            // Don't stop polling on network errors, just log them
-            updateProgress(null, 'Network issue, retrying...');
-        }
-    }, 2000); // Poll every 2 seconds
-}
-
-async function handleFile(file) {
-    if (!file.name.toLowerCase().endsWith('.pdf')) {
-        showError('Please select a PDF file only.');
-        return;
-    }
-    
-    if (file.size > 50 * 1024 * 1024) {
-        showError('File size must be less than 50MB.');
-        return;
-    }
-    
-    fileName.textContent = file.name;
-    fileInfo.style.display = 'block';
-    
-    hideMessages();
-    resultSection.style.display = 'none';
-    buttonsSection.style.display = 'none';
-    showProcessing();
-    
-    const formData = new FormData();
-    formData.append('file', file);
-    
-    try {
-        // Determine which endpoint to use based on file size
-        const endpoint = file.size < 1024 * 1024 ? '/upload_sync' : '/upload'; // 1MB threshold
-        
-        updateProgress(10, 'Uploading file...');
-        
-        const response = await fetch(endpoint, {
-            method: 'POST',
-            body: formData
         });
         
-        if (!response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`);
-        }
-        
-        const data = await response.json();
-        
-        if (data.success) {
-            if (data.task_id) {
-                // Async processing
-                currentTaskId = data.task_id;
-                updateProgress(15, 'Processing started, please wait...');
-                startPolling(data.task_id);
-            } else {
-                // Sync processing (small files)
-                hideProcessing();
-                currentInvoiceData = data.data;
-                resultContent.textContent = JSON.stringify(data.data, null, 2);
-                resultSection.style.display = 'block';
-                buttonsSection.style.display = 'block';
-                
-                const processingTime = data.processing_time ? ` (${data.processing_time})` : '';
-                showSuccess(`Invoice processed successfully!${processingTime}`);
+        fileInput.addEventListener('change', (e) => {
+            if (e.target.files.length > 0) {
+                handleFile(e.target.files[0]);
             }
-        } else {
-            hideProcessing();
-            showError(data.error || 'Failed to process the invoice.');
+        });
+        
+        function hideMessages() {
+            errorMessage.style.display = 'none';
+            successMessage.style.display = 'none';
         }
         
-    } catch (error) {
-        hideProcessing();
-        console.error('Error:', error);
+        function showError(message) {
+            hideMessages();
+            errorMessage.textContent = message;
+            errorMessage.style.display = 'block';
+        }
         
-        if (error.message.includes('timeout') || error.message.includes('fetch')) {
-            showError('Connection timeout. Please check your internet connection and try again.');
-        } else {
-            showError('Network error occurred. Please try again.');
+        function showSuccess(message) {
+            hideMessages();
+            successMessage.textContent = message;
+            successMessage.style.display = 'block';
         }
-    }
-}
-
-// Add cancel processing functionality
-function addCancelButton() {
-    let cancelBtn = document.getElementById('cancel-btn');
-    if (!cancelBtn) {
-        cancelBtn = document.createElement('button');
-        cancelBtn.id = 'cancel-btn';
-        cancelBtn.textContent = 'Cancel Processing';
-        cancelBtn.style.cssText = `
-            margin-top: 10px;
-            padding: 8px 16px;
-            background-color: #dc3545;
-            color: white;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-            font-size: 14px;
-        `;
         
-        cancelBtn.addEventListener('click', () => {
-            if (pollingInterval) {
-                clearInterval(pollingInterval);
-                pollingInterval = null;
+        function handleFile(file) {
+            if (!file.name.toLowerCase().endsWith('.pdf')) {
+                showError('Please select a PDF file only.');
+                return;
             }
-            hideProcessing();
-            showError('Processing cancelled by user.');
-        });
-        
-        progressContainer.appendChild(cancelBtn);
-    }
-    
-    cancelBtn.style.display = pollingInterval ? 'inline-block' : 'none';
-}
-
-// Update showProcessing to include cancel button
-function showProcessing() {
-    processing.style.display = 'block';
-    progressContainer.style.display = 'block';
-    updateProgress(0, 'Starting upload...');
-    addCancelButton();
-}
-
-convertJsonBtn.addEventListener('click', async () => {
-    if (!currentInvoiceData) return;
-    
-    try {
-        const response = await fetch('/convert_json', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-                invoice_data: currentInvoiceData
+            
+            if (file.size > 50 * 1024 * 1024) {
+                showError('File size must be less than 50MB.');
+                return;
+            }
+            
+            fileName.textContent = file.name;
+            fileInfo.style.display = 'block';
+            
+            hideMessages();
+            resultSection.style.display = 'none';
+            buttonsSection.style.display = 'none';
+            processing.style.display = 'block';
+            
+            const formData = new FormData();
+            formData.append('file', file);
+            
+            fetch('/upload', {
+                method: 'POST',
+                body: formData
             })
-        });
+            .then(response => response.json())
+            .then(data => {
+                processing.style.display = 'none';
+                
+                if (data.success) {
+                    currentInvoiceData = data.data;
+                    resultContent.textContent = JSON.stringify(data.data, null, 2);
+                    resultSection.style.display = 'block';
+                    buttonsSection.style.display = 'block';
+                    showSuccess('Invoice processed successfully!');
+                } else {
+                    showError(data.error || 'Failed to process the invoice.');
+                }
+            })
+            .catch(error => {
+                processing.style.display = 'none';
+                showError('Network error occurred. Please try again.');
+                console.error('Error:', error);
+            });
+        }
         
-        const data = await response.json();
-        
-        if (data.success) {
-            const blob = new Blob([data.json_data], { type: 'application/json' });
-            const url = window.URL.createObjectURL(blob);
-            const a = document.createElement('a');
-            a.href = url;
-            a.download = data.filename;
-            document.body.appendChild(a);
-            a.click();
-            document.body.removeChild(a);
-            window.URL.revokeObjectURL(url);
-            showSuccess('JSON file downloaded successfully!');
-        } else {
-            showError(data.error || 'Failed to convert to JSON.');
-        }
-    } catch (error) {
-        showError('Network error occurred. Please try again.');
-        console.error('Error:', error);
-    }
-});
-
-convertExcelBtn.addEventListener('click', async () => {
-    if (!currentInvoiceData) return;
-    
-    try {
-        const response = await fetch('/convert_excel', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-                invoice_data: currentInvoiceData
+        convertJsonBtn.addEventListener('click', () => {
+            if (!currentInvoiceData) return;
+            
+            fetch('/convert_json', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    invoice_data: currentInvoiceData
+                })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    const blob = new Blob([data.json_data], { type: 'application/json' });
+                    const url = window.URL.createObjectURL(blob);
+                    const a = document.createElement('a');
+                    a.href = url;
+                    a.download = data.filename;
+                    document.body.appendChild(a);
+                    a.click();
+                    document.body.removeChild(a);
+                    window.URL.revokeObjectURL(url);
+                    showSuccess('JSON file downloaded successfully!');
+                } else {
+                    showError(data.error || 'Failed to convert to JSON.');
+                }
             })
+            .catch(error => {
+                showError('Network error occurred. Please try again.');
+                console.error('Error:', error);
+            });
         });
         
-        const data = await response.json();
-        
-        if (data.success) {
-            const binaryString = atob(data.excel_data);
-            const bytes = new Uint8Array(binaryString.length);
-            for (let i = 0; i < binaryString.length; i++) {
-                bytes[i] = binaryString.charCodeAt(i);
-            }
-            const blob = new Blob([bytes], { 
-                type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
+        convertExcelBtn.addEventListener('click', () => {
+            if (!currentInvoiceData) return;
+            
+            fetch('/convert_excel', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    invoice_data: currentInvoiceData
+                })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    const binaryString = atob(data.excel_data);
+                    const bytes = new Uint8Array(binaryString.length);
+                    for (let i = 0; i < binaryString.length; i++) {
+                        bytes[i] = binaryString.charCodeAt(i);
+                    }
+                    const blob = new Blob([bytes], { 
+                        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
+                    });
+                    const url = window.URL.createObjectURL(blob);
+                    const a = document.createElement('a');
+                    a.href = url;
+                    a.download = data.filename;
+                    document.body.appendChild(a);
+                    a.click();
+                    document.body.removeChild(a);
+                    window.URL.revokeObjectURL(url);
+                    showSuccess('Excel file downloaded successfully!');
+                } else {
+                    showError(data.error || 'Failed to convert to Excel.');
+                }
+            })
+            .catch(error => {
+                showError('Network error occurred. Please try again.');
+                console.error('Error:', error);
             });
-            const url = window.URL.createObjectURL(blob);
-            const a = document.createElement('a');
-            a.href = url;
-            a.download = data.filename;
-            document.body.appendChild(a);
-            a.click();
-            document.body.removeChild(a);
-            window.URL.revokeObjectURL(url);
-            showSuccess('Excel file downloaded successfully!');
-        } else {
-            showError(data.error || 'Failed to convert to Excel.');
-        }
-    } catch (error) {
-        showError('Network error occurred. Please try again.');
-        console.error('Error:', error);
-    }
-});
-
-// Add some additional CSS for better UX
-const additionalCSS = `
-    .upload-area.dragover {
-        border-color: #007bff;
-        background-color: #e7f3ff;
-    }
-    
-    #progress-container {
-        animation: fadeIn 0.3s ease-in;
-    }
-    
-    @keyframes fadeIn {
-        from { opacity: 0; transform: translateY(-10px); }
-        to { opacity: 1; transform: translateY(0); }
-    }
-    
-    #cancel-btn:hover {
-        background-color: #c82333;
-    }
-    
-    .processing-spinner {
-        display: inline-block;
-        width: 20px;
-        height: 20px;
-        border: 3px solid #f3f3f3;
-        border-top: 3px solid #007bff;
-        border-radius: 50%;
-        animation: spin 1s linear infinite;
-        margin-right: 10px;
-    }
-    
-    @keyframes spin {
-        0% { transform: rotate(0deg); }
-        100% { transform: rotate(360deg); }
-    }
-`;
-
-// Add CSS to head
-const styleSheet = document.createElement('style');
-styleSheet.textContent = additionalCSS;
-document.head.appendChild(styleSheet);
-
-// Add spinner to processing text
-if (processing) {
-    const spinner = document.createElement('div');
-    spinner.className = 'processing-spinner';
-    processing.insertBefore(spinner, processing.firstChild);
-}
+        });
     </script>
 </body>
 </html>