added calibration-entry-management options
This commit is contained in:
averel10
316
src/components/CalibrationListModal.tsx
Normal file
316
src/components/CalibrationListModal.tsx
Normal file
@@ -0,0 +1,316 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState, useRef } from 'react';
|
||||
import { getCalibrationEntries, deleteCalibrationEntry, updateCalibrationOrder, deleteAllCalibrationEntries } from '@/app/actions/calibration';
|
||||
import Modal from '@/components/Modal';
|
||||
import { ExperimentCalibration } from '@/lib/model/experiment_calibration';
|
||||
import { useAudio } from './AudioProvider';
|
||||
|
||||
interface CalibrationListModalProps {
|
||||
experimentId: number;
|
||||
}
|
||||
|
||||
export default function CalibrationListModal({ experimentId }: CalibrationListModalProps) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [calibrationItems, setCalibrationItems] = useState<ExperimentCalibration[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [draggedItem, setDraggedItem] = useState<number | null>(null);
|
||||
const { currentAudioId, setCurrentAudio } = useAudio();
|
||||
const audioRef = useRef<HTMLAudioElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
loadCalibrationItems();
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
async function loadCalibrationItems() {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const result = await getCalibrationEntries(experimentId);
|
||||
if (result.success) {
|
||||
const sorted = [...result.data].sort((a, b) => a.order - b.order);
|
||||
setCalibrationItems(sorted);
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load calibration items');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(calibrationId: number) {
|
||||
if (!confirm('Are you sure you want to delete this calibration item?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await deleteCalibrationEntry(calibrationId, experimentId);
|
||||
setCalibrationItems(items => items.filter(item => item.id !== calibrationId));
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to delete item');
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDeleteAll() {
|
||||
if (!confirm('Are you sure you want to delete ALL calibration items? This cannot be undone.')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await deleteAllCalibrationEntries(experimentId);
|
||||
setCalibrationItems([]);
|
||||
if (audioRef.current) {
|
||||
audioRef.current.pause();
|
||||
audioRef.current.currentTime = 0;
|
||||
}
|
||||
setCurrentAudio(null);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to delete all items');
|
||||
}
|
||||
}
|
||||
|
||||
async function handleMoveUp(index: number) {
|
||||
if (index === 0) return;
|
||||
|
||||
const reorderedItems = [...calibrationItems];
|
||||
const temp = reorderedItems[index];
|
||||
reorderedItems[index] = reorderedItems[index - 1];
|
||||
reorderedItems[index - 1] = temp;
|
||||
setCalibrationItems(reorderedItems);
|
||||
|
||||
// Prepare order map
|
||||
const orderMap: Record<number, number> = {};
|
||||
reorderedItems.forEach((item, idx) => {
|
||||
orderMap[item.id] = idx;
|
||||
});
|
||||
|
||||
try {
|
||||
await updateCalibrationOrder(experimentId, orderMap);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to update order');
|
||||
// Revert on error
|
||||
await loadCalibrationItems();
|
||||
}
|
||||
}
|
||||
|
||||
async function handleMoveDown(index: number) {
|
||||
if (index === calibrationItems.length - 1) return;
|
||||
|
||||
const reorderedItems = [...calibrationItems];
|
||||
const temp = reorderedItems[index];
|
||||
reorderedItems[index] = reorderedItems[index + 1];
|
||||
reorderedItems[index + 1] = temp;
|
||||
setCalibrationItems(reorderedItems);
|
||||
|
||||
// Prepare order map
|
||||
const orderMap: Record<number, number> = {};
|
||||
reorderedItems.forEach((item, idx) => {
|
||||
orderMap[item.id] = idx;
|
||||
});
|
||||
|
||||
try {
|
||||
await updateCalibrationOrder(experimentId, orderMap);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to update order');
|
||||
// Revert on error
|
||||
await loadCalibrationItems();
|
||||
}
|
||||
}
|
||||
|
||||
function handlePlayAudio(calibrationId: number, filePath: string) {
|
||||
const audioId = `calibration-${calibrationId}`;
|
||||
|
||||
if (currentAudioId === audioId && audioRef.current && !audioRef.current.paused) {
|
||||
// Stop playing
|
||||
audioRef.current.pause();
|
||||
audioRef.current.currentTime = 0;
|
||||
setCurrentAudio(null);
|
||||
return;
|
||||
}
|
||||
|
||||
// Stop any currently playing audio
|
||||
if (audioRef.current) {
|
||||
audioRef.current.pause();
|
||||
audioRef.current.currentTime = 0;
|
||||
}
|
||||
|
||||
// Play new audio
|
||||
if (audioRef.current) {
|
||||
const fullPath = `/public${filePath}`;
|
||||
audioRef.current.src = fullPath;
|
||||
setCurrentAudio(audioId);
|
||||
audioRef.current.play().catch(err => console.error('Failed to play audio:', err));
|
||||
}
|
||||
}
|
||||
|
||||
function handleDragStart(index: number) {
|
||||
setDraggedItem(index);
|
||||
}
|
||||
|
||||
function handleDragOver(e: React.DragEvent, index: number) {
|
||||
e.preventDefault();
|
||||
if (draggedItem === null || draggedItem === index) return;
|
||||
|
||||
const reorderedItems = [...calibrationItems];
|
||||
const draggedItemContent = reorderedItems[draggedItem];
|
||||
reorderedItems.splice(draggedItem, 1);
|
||||
reorderedItems.splice(index, 0, draggedItemContent);
|
||||
setCalibrationItems(reorderedItems);
|
||||
setDraggedItem(index);
|
||||
}
|
||||
|
||||
async function handleDragEnd() {
|
||||
setDraggedItem(null);
|
||||
|
||||
// Update order in database
|
||||
const orderMap: Record<number, number> = {};
|
||||
calibrationItems.forEach((item, idx) => {
|
||||
orderMap[item.id] = idx;
|
||||
});
|
||||
|
||||
try {
|
||||
await updateCalibrationOrder(experimentId, orderMap);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to update order');
|
||||
// Revert on error
|
||||
await loadCalibrationItems();
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
onClick={() => setIsOpen(true)}
|
||||
className="mb-6 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"
|
||||
>
|
||||
📋 View Calibration List
|
||||
</button>
|
||||
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={() => {
|
||||
if (audioRef.current) {
|
||||
audioRef.current.pause();
|
||||
audioRef.current.currentTime = 0;
|
||||
}
|
||||
setCurrentAudio(null);
|
||||
setIsOpen(false);
|
||||
}}
|
||||
title="Calibration Items"
|
||||
actions={[
|
||||
{
|
||||
label: 'Close',
|
||||
onClick: () => setIsOpen(false),
|
||||
variant: 'secondary',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<audio
|
||||
ref={audioRef}
|
||||
onEnded={() => setCurrentAudio(null)}
|
||||
/>
|
||||
<div className="space-y-4">
|
||||
{error && (
|
||||
<div className="bg-red-50 border border-red-200 rounded p-3 text-sm text-red-700">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<div className="text-center text-gray-500">Loading...</div>
|
||||
) : calibrationItems.length === 0 ? (
|
||||
<div className="text-center text-gray-500">No calibration items found</div>
|
||||
) : (
|
||||
<div className="space-y-2 max-h-96 overflow-y-auto">
|
||||
{calibrationItems.map((item, index) => (
|
||||
<div
|
||||
key={item.id}
|
||||
draggable
|
||||
onDragStart={() => handleDragStart(index)}
|
||||
onDragOver={(e) => handleDragOver(e, index)}
|
||||
onDragEnd={handleDragEnd}
|
||||
className={`flex items-center gap-3 p-3 border rounded-lg transition-colors cursor-move ${
|
||||
draggedItem === index
|
||||
? 'bg-gray-100 border-gray-400 opacity-50'
|
||||
: 'bg-white border-gray-200 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm font-medium text-gray-900">{item.dialectLabel}</div>
|
||||
<div className="text-xs text-gray-500 truncate">{item.file}</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => handlePlayAudio(item.id, item.file)}
|
||||
className={`inline-flex items-center justify-center w-8 h-8 rounded-full transition-colors flex-shrink-0 ${
|
||||
currentAudioId === `calibration-${item.id}`
|
||||
? 'bg-red-500 hover:bg-red-600 text-white'
|
||||
: 'bg-blue-500 hover:bg-blue-600 text-white'
|
||||
}`}
|
||||
title={currentAudioId === `calibration-${item.id}` ? 'Stop' : 'Play'}
|
||||
>
|
||||
{currentAudioId === `calibration-${item.id}` ? (
|
||||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||
<rect x="6" y="4" width="2" height="12" />
|
||||
<rect x="12" y="4" width="2" height="12" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M6.3 2.841A1.5 1.5 0 004 4.11v11.78a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-1 flex-shrink-0">
|
||||
<button
|
||||
onClick={() => handleMoveUp(index)}
|
||||
disabled={index === 0}
|
||||
className="inline-flex items-center justify-center w-6 h-6 rounded bg-gray-200 hover:bg-gray-300 text-gray-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
title="Move up"
|
||||
>
|
||||
↑
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleMoveDown(index)}
|
||||
disabled={index === calibrationItems.length - 1}
|
||||
className="inline-flex items-center justify-center w-6 h-6 rounded bg-gray-200 hover:bg-gray-300 text-gray-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
title="Move down"
|
||||
>
|
||||
↓
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => handleDelete(item.id)}
|
||||
className="inline-flex items-center justify-center w-8 h-8 rounded text-red-600 hover:bg-red-50 transition-colors flex-shrink-0"
|
||||
title="Delete"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{calibrationItems.length > 0 && (
|
||||
<div className="text-xs text-gray-500 mt-4 p-2 bg-gray-50 rounded">
|
||||
💡 Drag items to reorder, or use the arrow buttons. Click the play button to preview audio.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{calibrationItems.length > 0 && (
|
||||
<button
|
||||
onClick={handleDeleteAll}
|
||||
className="w-full mt-4 px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 transition-colors text-sm font-medium"
|
||||
>
|
||||
🗑️ Delete All Items
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
368
src/components/UploadCalibrationModal.tsx
Normal file
368
src/components/UploadCalibrationModal.tsx
Normal file
@@ -0,0 +1,368 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { processCalibrationEntries } from '@/app/actions/upload';
|
||||
import Modal from '@/components/Modal';
|
||||
|
||||
interface UploadCalibrationModalProps {
|
||||
experimentId: number;
|
||||
}
|
||||
|
||||
export default function UploadCalibrationModal({
|
||||
experimentId,
|
||||
}: UploadCalibrationModalProps) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [files, setFiles] = useState<File[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [success, setSuccess] = useState(false);
|
||||
const [uploadQueue, setUploadQueue] = useState<Array<{ file: File; status: 'pending' | 'uploading' | 'completed' | 'failed'; message?: string; progress: number }>>([]);
|
||||
const [status, setStatus] = useState<string>('');
|
||||
|
||||
function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const selectedFiles = e.target.files ? Array.from(e.target.files) : [];
|
||||
if (selectedFiles.length > 0) {
|
||||
setFiles(selectedFiles);
|
||||
setError(null);
|
||||
// Initialize queue with pending status and 0 progress
|
||||
setUploadQueue(selectedFiles.map(file => ({ file, status: 'pending', progress: 0 })));
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setSuccess(false);
|
||||
|
||||
if (files.length === 0) {
|
||||
setError('Please select at least one ZIP file');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
// Process each file in the queue sequentially
|
||||
const newQueue = [...uploadQueue];
|
||||
|
||||
for (let i = 0; i < newQueue.length; i++) {
|
||||
const item = newQueue[i];
|
||||
item.status = 'uploading';
|
||||
item.progress = 0;
|
||||
setUploadQueue([...newQueue]);
|
||||
setStatus(`Processing file ${i + 1} of ${newQueue.length}: ${item.file.name}`);
|
||||
|
||||
try {
|
||||
// Upload with progress tracking
|
||||
const uploadResult = await uploadFileWithProgress(item.file, i, newQueue);
|
||||
|
||||
// Process the extracted data
|
||||
const processResult = await processCalibrationEntries(experimentId, uploadResult.tempDir);
|
||||
|
||||
if (!processResult.success) {
|
||||
item.status = 'failed';
|
||||
item.progress = 0;
|
||||
item.message = `✗ ${processResult.error || 'Processing failed'}`;
|
||||
} else {
|
||||
item.status = 'completed';
|
||||
item.progress = 100;
|
||||
item.message = `✓ Processed (${processResult.entriesCreated} entries)`;
|
||||
}
|
||||
} catch (err) {
|
||||
item.status = 'failed';
|
||||
item.progress = 0;
|
||||
item.message = `✗ ${err instanceof Error ? err.message : 'Network error'}`;
|
||||
}
|
||||
|
||||
setUploadQueue([...newQueue]);
|
||||
}
|
||||
|
||||
const failedCount = newQueue.filter(item => item.status === 'failed').length;
|
||||
const completedCount = newQueue.filter(item => item.status === 'completed').length;
|
||||
|
||||
if (failedCount === 0) {
|
||||
setSuccess(true);
|
||||
setStatus(`All files processed! (${completedCount}/${newQueue.length} completed)`);
|
||||
} else if (completedCount > 0) {
|
||||
setStatus(`Completed with errors: ${completedCount} succeeded, ${failedCount} failed`);
|
||||
} else {
|
||||
setError(`All files failed to process`);
|
||||
}
|
||||
|
||||
setFiles([]);
|
||||
|
||||
if (failedCount === 0) {
|
||||
setTimeout(() => {
|
||||
setSuccess(false);
|
||||
setIsOpen(false);
|
||||
setStatus('');
|
||||
setUploadQueue([]);
|
||||
window.location.reload();
|
||||
}, 2500);
|
||||
}
|
||||
} catch (err) {
|
||||
const errorMsg = err instanceof Error ? err.message : 'Failed to process uploads';
|
||||
setError(errorMsg);
|
||||
setStatus('');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
function uploadFileWithProgress(
|
||||
file: File,
|
||||
index: number,
|
||||
queue: Array<{ file: File; status: 'pending' | 'uploading' | 'completed' | 'failed'; progress: number; message?: string }>
|
||||
): Promise<{ tempDir: string }> {
|
||||
const MAX_RETRIES = 3;
|
||||
|
||||
return (async () => {
|
||||
let lastError: Error | null = null;
|
||||
|
||||
for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
|
||||
try {
|
||||
const result = await uploadAttempt(file, index, queue, attempt, MAX_RETRIES);
|
||||
return result;
|
||||
} catch (error) {
|
||||
lastError = error instanceof Error ? error : new Error('Unknown error');
|
||||
|
||||
if (attempt < MAX_RETRIES) {
|
||||
// Exponential backoff: 1s, 2s, 4s
|
||||
const delay = Math.pow(2, attempt - 1) * 1000;
|
||||
queue[index].message = `Retrying in ${delay / 1000}s... (attempt ${attempt}/${MAX_RETRIES})`;
|
||||
setUploadQueue([...queue]);
|
||||
|
||||
await new Promise(resolve => setTimeout(resolve, delay));
|
||||
queue[index].progress = 0; // Reset progress for next attempt
|
||||
setUploadQueue([...queue]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
throw lastError || new Error('Upload failed after all retries');
|
||||
})();
|
||||
}
|
||||
|
||||
function uploadAttempt(
|
||||
file: File,
|
||||
index: number,
|
||||
queue: Array<{ file: File; status: 'pending' | 'uploading' | 'completed' | 'failed'; progress: number; message?: string }>,
|
||||
attempt: number,
|
||||
maxRetries: number
|
||||
): Promise<{ tempDir: string }> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('experimentId', experimentId.toString());
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
|
||||
// Track upload progress
|
||||
xhr.upload.addEventListener('progress', (event) => {
|
||||
if (event.lengthComputable) {
|
||||
const progress = Math.round((event.loaded / event.total) * 100);
|
||||
queue[index].progress = progress;
|
||||
if (attempt > 1) {
|
||||
queue[index].message = `Uploading (retry ${attempt}/${maxRetries})`;
|
||||
}
|
||||
setUploadQueue([...queue]);
|
||||
}
|
||||
});
|
||||
|
||||
xhr.addEventListener('load', () => {
|
||||
if (xhr.status === 200) {
|
||||
try {
|
||||
const result = JSON.parse(xhr.responseText);
|
||||
if (result.success) {
|
||||
resolve(result);
|
||||
} else {
|
||||
reject(new Error(result.error || 'Upload failed'));
|
||||
}
|
||||
} catch (error) {
|
||||
reject(new Error('Failed to parse response'));
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
const error = JSON.parse(xhr.responseText);
|
||||
reject(new Error(error.error || `Upload failed with status ${xhr.status}`));
|
||||
} catch {
|
||||
reject(new Error(`Upload failed with status ${xhr.status}`));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
xhr.addEventListener('error', () => {
|
||||
reject(new Error('Network error'));
|
||||
});
|
||||
|
||||
xhr.addEventListener('abort', () => {
|
||||
reject(new Error('Upload aborted'));
|
||||
});
|
||||
|
||||
xhr.open('POST', '/api/upload-calibration');
|
||||
xhr.send(formData);
|
||||
});
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
if (!loading) {
|
||||
setIsOpen(false);
|
||||
setFiles([]);
|
||||
setError(null);
|
||||
setSuccess(false);
|
||||
setStatus('');
|
||||
setUploadQueue([]);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
onClick={() => setIsOpen(true)}
|
||||
className="mb-6 px-4 py-2 bg-purple-500 text-white rounded-md hover:bg-purple-600 transition-colors"
|
||||
>
|
||||
+ Upload Calibration
|
||||
</button>
|
||||
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={handleClose}
|
||||
title="Upload Calibration Audio"
|
||||
actions={[
|
||||
{
|
||||
label: 'Cancel',
|
||||
onClick: handleClose,
|
||||
variant: 'secondary',
|
||||
disabled: loading,
|
||||
},
|
||||
{
|
||||
label: loading ? `Processing ${uploadQueue.filter(f => f.status !== 'pending').length}/${uploadQueue.length}...` : 'Upload',
|
||||
onClick: () => {
|
||||
const form = document.getElementById(
|
||||
'uploadCalibrationForm'
|
||||
) as HTMLFormElement;
|
||||
form?.dispatchEvent(new Event('submit', { bubbles: true }));
|
||||
},
|
||||
variant: 'primary',
|
||||
disabled: loading || files.length === 0,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<form id="uploadCalibrationForm" onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="file" className="block text-sm font-medium mb-2">
|
||||
ZIP Files (Multiple)
|
||||
</label>
|
||||
<div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
|
||||
<input
|
||||
id="file"
|
||||
type="file"
|
||||
accept=".zip"
|
||||
multiple
|
||||
onChange={handleFileChange}
|
||||
disabled={loading}
|
||||
className="hidden"
|
||||
/>
|
||||
<label htmlFor="file" className="cursor-pointer block">
|
||||
{files.length > 0 ? (
|
||||
<div>
|
||||
<p className="text-sm font-medium text-blue-600">
|
||||
{files.length} file{files.length !== 1 ? 's' : ''} selected
|
||||
</p>
|
||||
<div className="mt-2 text-xs text-gray-600 max-h-24 overflow-y-auto">
|
||||
{files.map((f, idx) => (
|
||||
<div key={idx} className="py-1">
|
||||
{f.name} ({(f.size / 1024 / 1024).toFixed(2)} MB)
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-700">
|
||||
Click to select or drag and drop
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 mt-1">ZIP files only (multiple allowed)</p>
|
||||
</div>
|
||||
)}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-purple-50 border border-purple-200 rounded-lg p-4 text-sm text-purple-800">
|
||||
<p className="font-semibold mb-2">ZIP file should contain:</p>
|
||||
<ul className="list-disc list-inside space-y-1 text-xs">
|
||||
<li>
|
||||
<code className="bg-purple-100 px-1 rounded">metadata.csv</code>{' '}
|
||||
with columns: audio_file, dialect (order is auto-generated by line count)
|
||||
</li>
|
||||
<li>
|
||||
<code className="bg-purple-100 px-1 rounded">wavs/</code> subfolder with audio files (.wav)
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{uploadQueue.length > 0 && (
|
||||
<div className="bg-gray-50 border border-gray-200 rounded-lg p-4 space-y-3">
|
||||
<p className="font-semibold text-sm text-gray-700">Upload Queue:</p>
|
||||
<div className="space-y-2 max-h-48 overflow-y-auto">
|
||||
{uploadQueue.map((item, idx) => (
|
||||
<div key={idx} className="space-y-1">
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<span className={`font-medium ${
|
||||
item.status === 'completed' ? 'text-green-600' :
|
||||
item.status === 'failed' ? 'text-red-600' :
|
||||
item.status === 'uploading' ? 'text-blue-600' :
|
||||
'text-gray-600'
|
||||
}`}>
|
||||
{item.status === 'completed' ? '✓' :
|
||||
item.status === 'failed' ? '✗' :
|
||||
item.status === 'uploading' ? '⟳' :
|
||||
'○'}
|
||||
</span>
|
||||
<span className="flex-1 truncate">{item.file.name}</span>
|
||||
{item.progress > 0 && item.progress < 100 && (
|
||||
<span className="text-gray-500">{item.progress}%</span>
|
||||
)}
|
||||
{item.message && <span className="text-gray-500 text-xs">{item.message}</span>}
|
||||
</div>
|
||||
{item.status === 'uploading' && (
|
||||
<div className="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
|
||||
<div
|
||||
className="bg-blue-500 h-full transition-all duration-300"
|
||||
style={{ width: `${item.progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{item.status === 'completed' && (
|
||||
<div className="w-full bg-green-200 rounded-full h-2 overflow-hidden">
|
||||
<div className="bg-green-500 h-full w-full" />
|
||||
</div>
|
||||
)}
|
||||
{item.status === 'failed' && (
|
||||
<div className="w-full bg-red-200 rounded-full h-2 overflow-hidden">
|
||||
<div className="bg-red-500 h-full w-full" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="p-3 bg-red-100 border border-red-400 text-red-700 rounded text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{status && (
|
||||
<div className={`p-3 rounded text-sm ${success ? 'bg-green-100 border border-green-400 text-green-700' : 'bg-blue-100 border border-blue-400 text-blue-700'}`}>
|
||||
{status}
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user