Upload script.js

static/js/script.js

@@ -0,0 +1,159 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const uploadForm = document.getElementById('uploadForm');
+    const uploadBtn = document.getElementById('uploadBtn');
+    const btnText = uploadBtn.querySelector('.btn-text');
+    const loadingSpinner = uploadBtn.querySelector('.loading-spinner');
+    const resultsSection = document.getElementById('resultsSection');
+    const resultsContent = document.getElementById('resultsContent');
+    const clearBtn = document.getElementById('clearBtn');
+    const filenamesInput = document.getElementById('filenames');
+
+    // Form submission handler
+    uploadForm.addEventListener('submit', async function(e) {
+        e.preventDefault();
+        
+        const filenames = filenamesInput.value.trim();
+        if (!filenames) {
+            alert('Please enter at least one filename');
+            return;
+        }
+
+        // Show loading state
+        setLoadingState(true);
+        
+        try {
+            const formData = new FormData();
+            formData.append('filenames', filenames);
+            
+            const response = await fetch('/upload', {
+                method: 'POST',
+                body: formData
+            });
+            
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            
+            const results = await response.text();
+            displayResults(results);
+            
+        } catch (error) {
+            console.error('Upload error:', error);
+            displayResults(`❌ Error: ${error.message}`);
+        } finally {
+            setLoadingState(false);
+        }
+    });
+
+    // Clear results handler
+    clearBtn.addEventListener('click', function() {
+        resultsContent.textContent = '';
+        resultsSection.style.display = 'none';
+    });
+
+    // Auto-resize textarea
+    filenamesInput.addEventListener('input', function() {
+        this.style.height = 'auto';
+        this.style.height = Math.min(this.scrollHeight, 200) + 'px';
+    });
+
+    // Functions
+    function setLoadingState(isLoading) {
+        uploadBtn.disabled = isLoading;
+        
+        if (isLoading) {
+            btnText.style.display = 'none';
+            loadingSpinner.style.display = 'flex';
+        } else {
+            btnText.style.display = 'flex';
+            loadingSpinner.style.display = 'none';
+        }
+    }
+
+    function displayResults(results) {
+        // Format results with proper styling
+        const formattedResults = formatResults(results);
+        resultsContent.innerHTML = formattedResults;
+        resultsSection.style.display = 'block';
+        
+        // Scroll to results
+        resultsSection.scrollIntoView({ 
+            behavior: 'smooth', 
+            block: 'start' 
+        });
+    }
+
+    function formatResults(results) {
+        if (!results) return '<span class="error">No results received</span>';
+        
+        return results.split('\n').map(line => {
+            line = line.trim();
+            if (!line) return '';
+            
+            if (line.startsWith('✅')) {
+                return `<div class="success">${escapeHtml(line)}</div>`;
+            } else if (line.startsWith('❌')) {
+                return `<div class="error">${escapeHtml(line)}</div>`;
+            } else if (line.startsWith('⏩')) {
+                return `<div class="warning">${escapeHtml(line)}</div>`;
+            } else {
+                return `<div>${escapeHtml(line)}</div>`;
+            }
+        }).join('');
+    }
+
+    function escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    // Add some interactive effects
+    const uploadCard = document.querySelector('.upload-card');
+    
+    // Add subtle hover effect to form elements
+    const formElements = document.querySelectorAll('input, textarea, button');
+    formElements.forEach(element => {
+        element.addEventListener('focus', function() {
+            uploadCard.style.transform = 'translateY(-2px)';
+        });
+        
+        element.addEventListener('blur', function() {
+            uploadCard.style.transform = 'translateY(-5px)';
+        });
+    });
+
+    // Add keyboard shortcuts
+    document.addEventListener('keydown', function(e) {
+        // Ctrl/Cmd + Enter to submit form
+        if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+            e.preventDefault();
+            uploadForm.dispatchEvent(new Event('submit'));
+        }
+        
+        // Escape to clear results
+        if (e.key === 'Escape' && resultsSection.style.display !== 'none') {
+            clearBtn.click();
+        }
+    });
+
+    // Add tooltip for keyboard shortcuts
+    const tooltip = document.createElement('div');
+    tooltip.innerHTML = `
+        <div style="position: fixed; bottom: 20px; right: 20px; background: rgba(0,0,0,0.8); color: white; padding: 10px; border-radius: 8px; font-size: 0.8rem; z-index: 1000;">
+            <div><kbd>Ctrl+Enter</kbd> Submit form</div>
+            <div><kbd>Esc</kbd> Clear results</div>
+        </div>
+    `;
+    
+    // Show tooltip on first visit
+    setTimeout(() => {
+        document.body.appendChild(tooltip);
+        setTimeout(() => {
+            tooltip.style.opacity = '0';
+            tooltip.style.transition = 'opacity 0.5s';
+            setTimeout(() => tooltip.remove(), 500);
+        }, 3000);
+    }, 1000);
+});
+