Spaces:
Running
Running
| document.addEventListener('DOMContentLoaded', function() { | |
| const dropZone = document.getElementById('dropZone'); | |
| const fileInput = document.getElementById('fileInput'); | |
| const browseBtn = document.getElementById('browseBtn'); | |
| const fileInfo = document.getElementById('fileInfo'); | |
| const fileName = document.getElementById('fileName'); | |
| const fileSize = document.getElementById('fileSize'); | |
| const removeFile = document.getElementById('removeFile'); | |
| const previewSection = document.getElementById('previewSection'); | |
| const previewBody = document.getElementById('previewBody'); | |
| const cancelBtn = document.getElementById('cancelBtn'); | |
| const processBtn = document.getElementById('processBtn'); | |
| const toast = document.getElementById('toast'); | |
| const toastMessage = document.getElementById('toastMessage'); | |
| let selectedFile = null; | |
| // Handle drag and drop events | |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { | |
| dropZone.addEventListener(eventName, preventDefaults, false); | |
| }); | |
| function preventDefaults(e) { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| } | |
| ['dragenter', 'dragover'].forEach(eventName => { | |
| dropZone.addEventListener(eventName, highlight, false); | |
| }); | |
| ['dragleave', 'drop'].forEach(eventName => { | |
| dropZone.addEventListener(eventName, unhighlight, false); | |
| }); | |
| function highlight() { | |
| dropZone.classList.add('highlight'); | |
| } | |
| function unhighlight() { | |
| dropZone.classList.remove('highlight'); | |
| } | |
| // Handle dropped files | |
| dropZone.addEventListener('drop', handleDrop, false); | |
| function handleDrop(e) { | |
| const dt = e.dataTransfer; | |
| const files = dt.files; | |
| handleFiles(files); | |
| } | |
| // Browse files button | |
| browseBtn.addEventListener('click', () => { | |
| fileInput.click(); | |
| }); | |
| fileInput.addEventListener('change', function() { | |
| handleFiles(this.files); | |
| }); | |
| // Remove file button | |
| removeFile.addEventListener('click', function() { | |
| resetFileUpload(); | |
| }); | |
| // Cancel button | |
| cancelBtn.addEventListener('click', function() { | |
| resetFileUpload(); | |
| }); | |
| // Process button | |
| processBtn.addEventListener('click', function() { | |
| if (!selectedFile) { | |
| showToast('Please upload a file first', 'error'); | |
| return; | |
| } | |
| const merchantId = document.getElementById('merchantId').value; | |
| if (!merchantId) { | |
| showToast('Please enter a merchant ID', 'error'); | |
| return; | |
| } | |
| // Simulate processing | |
| showToast('Processing bulk orders...', 'success'); | |
| setTimeout(() => { | |
| showToast('Bulk orders processed successfully!', 'success'); | |
| resetFileUpload(); | |
| }, 2000); | |
| }); | |
| function handleFiles(files) { | |
| if (files.length === 0) return; | |
| const file = files[0]; | |
| const validTypes = ['text/csv', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']; | |
| if (!validTypes.includes(file.type) && !file.name.match(/\.(csv|xlsx|xls)$/i)) { | |
| showToast('Invalid file type. Please upload a CSV or Excel file.', 'error'); | |
| dropZone.classList.add('error'); | |
| setTimeout(() => dropZone.classList.remove('error'), 2000); | |
| return; | |
| } | |
| selectedFile = file; | |
| displayFileInfo(file); | |
| showPreview(); | |
| } | |
| function displayFileInfo(file) { | |
| fileName.textContent = file.name; | |
| // Format file size | |
| const sizeInMB = (file.size / (1024 * 1024)).toFixed(2); | |
| fileSize.textContent = `${sizeInMB} MB`; | |
| fileInfo.classList.remove('hidden'); | |
| dropZone.classList.add('hidden'); | |
| } | |
| function showPreview() { | |
| // In a real app, you would parse the file and display actual data | |
| // For demo purposes, we'll show mock data | |
| previewBody.innerHTML = ''; | |
| // Add mock rows | |
| for (let i = 0; i < 5; i++) { | |
| const row = document.createElement('tr'); | |
| row.innerHTML = ` | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Product ${i+1}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${Math.floor(Math.random() * 10) + 1}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$${(Math.random() * 100).toFixed(2)}</td> | |
| `; | |
| previewBody.appendChild(row); | |
| } | |
| previewSection.classList.remove('hidden'); | |
| } | |
| function resetFileUpload() { | |
| selectedFile = null; | |
| fileInput.value = ''; | |
| fileInfo.classList.add('hidden'); | |
| previewSection.classList.add('hidden'); | |
| dropZone.classList.remove('hidden'); | |
| } | |
| function showToast(message, type = 'success') { | |
| toastMessage.textContent = message; | |
| toast.className = `fixed bottom-4 right-4 flex items-center ${type === 'success' ? 'toast-success' : 'toast-error'} px-4 py-2 rounded-md shadow-lg`; | |
| toast.classList.add('show'); | |
| setTimeout(() => { | |
| toast.classList.remove('show'); | |
| toast.classList.add('hide'); | |
| setTimeout(() => toast.classList.add('hidden'), 300); | |
| }, 3000); | |
| } | |
| }); |