Spaces:
Running
Running
File size: 5,438 Bytes
c172ee5 2870d89 c172ee5 2870d89 c172ee5 2870d89 c172ee5 2870d89 c172ee5 2870d89 c172ee5 2870d89 c172ee5 2870d89 c172ee5 2870d89 c172ee5 2870d89 c172ee5 2870d89 c172ee5 2870d89 c172ee5 2870d89 c172ee5 2870d89 c172ee5 2870d89 c172ee5 2870d89 c172ee5 2870d89 c172ee5 2870d89 c172ee5 2870d89 c172ee5 2870d89 f22c61f 2870d89 c172ee5 2870d89 c172ee5 2870d89 c172ee5 2870d89 c172ee5 2870d89 c172ee5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 | 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);
}
}); |