refactor: implement project package segment lazy select
This commit is contained in:
@@ -9,9 +9,9 @@ import {
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import { FormField } from '@/components/form';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
@@ -19,14 +19,14 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { Loader2, TrendingUp, ChevronRight } from 'lucide-react';
|
||||
import { Loader2, TrendingUp } from 'lucide-react';
|
||||
import { PageHeader } from '@/components/page-header';
|
||||
import { sessionService, videoService } from '@/services/api';
|
||||
import { videoService } from '@/services/api';
|
||||
import { SessionContext } from '@/types';
|
||||
import { storeVideoFile } from '@/lib/video-storage';
|
||||
import { ProjectSelectionSection } from '@/components/project-selection-section';
|
||||
import { Reveal } from '@/components/ui/reveal';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { ROUTES } from '@/utils/routes';
|
||||
|
||||
const DETECTION_METHODS = [
|
||||
{ value: 'yolo', label: 'Road Defect Detection' },
|
||||
@@ -63,9 +63,6 @@ export default function UploadPage() {
|
||||
const handleSelectionChange = useCallback(
|
||||
(selectedSession: SessionContext | null) => {
|
||||
setSession(selectedSession);
|
||||
if (selectedSession) {
|
||||
sessionService.saveSession(selectedSession);
|
||||
}
|
||||
},
|
||||
[],
|
||||
);
|
||||
@@ -96,19 +93,8 @@ export default function UploadPage() {
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const result = await videoService.uploadVideo(formData);
|
||||
|
||||
// Store file locally
|
||||
if (file) {
|
||||
try {
|
||||
await storeVideoFile(result.video_id, file);
|
||||
} catch (err) {
|
||||
console.error('Failed to store video file:', err);
|
||||
}
|
||||
}
|
||||
|
||||
sessionService.saveVideoData({ videoId: result.video_id });
|
||||
router.push(`/upload/${result.video_id}`);
|
||||
await videoService.uploadVideo(formData);
|
||||
router.push(ROUTES.TICKET);
|
||||
} catch (err) {
|
||||
let errorMessage = 'Upload failed';
|
||||
if (err instanceof TypeError && err.message === 'Failed to fetch') {
|
||||
@@ -131,7 +117,7 @@ export default function UploadPage() {
|
||||
}
|
||||
|
||||
const isSessionComplete = !!(
|
||||
session && sessionService.isSessionValid(session)
|
||||
session?.projectId && session.packageId && session.chainageId
|
||||
);
|
||||
const isFormValid = isSessionComplete && file && jsonFile;
|
||||
|
||||
@@ -187,40 +173,22 @@ export default function UploadPage() {
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="grid grid-cols-1 gap-6 text-sm">
|
||||
{/* Video File Input */}
|
||||
<div className="space-y-2">
|
||||
<Label
|
||||
htmlFor="video-file"
|
||||
className="text-sm font-semibold"
|
||||
>
|
||||
Video File <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<div className="relative group">
|
||||
<Input
|
||||
id="video-file"
|
||||
type="file"
|
||||
accept="video/*"
|
||||
onChange={(e) => {
|
||||
setFile(e.target.files?.[0] || null);
|
||||
setError(null);
|
||||
}}
|
||||
disabled={uploading || !isSessionComplete}
|
||||
className="h-12 bg-muted/30 border-dashed border-2 group-hover:border-primary/50 transition-colors cursor-pointer file:mr-4 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:bg-primary file:text-primary-foreground file:font-semibold file:text-xs"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
<FormField id="video-file" label="Video File" required>
|
||||
<Input
|
||||
id="video-file"
|
||||
type="file"
|
||||
accept="video/*"
|
||||
onChange={(e) => {
|
||||
setFile(e.target.files?.[0] || null);
|
||||
setError(null);
|
||||
}}
|
||||
disabled={uploading || !isSessionComplete}
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* JSON File Input */}
|
||||
<div className="space-y-2">
|
||||
<Label
|
||||
htmlFor="json-file"
|
||||
className="text-sm font-semibold"
|
||||
>
|
||||
GPS JSON File{' '}
|
||||
<span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<FormField id="json-file" label="GPS JSON File" required>
|
||||
<Input
|
||||
id="json-file"
|
||||
type="file"
|
||||
@@ -231,27 +199,16 @@ export default function UploadPage() {
|
||||
}}
|
||||
disabled={uploading || !isSessionComplete}
|
||||
required
|
||||
className="h-11 bg-muted/30 file:mr-3 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:bg-primary/10 file:text-primary file:font-medium file:text-xs"
|
||||
/>
|
||||
</div>
|
||||
</FormField>
|
||||
|
||||
{/* Select Method */}
|
||||
<div className="space-y-2">
|
||||
<Label
|
||||
htmlFor="select-method"
|
||||
className="text-sm font-semibold"
|
||||
>
|
||||
Analysis Method
|
||||
</Label>
|
||||
<FormField id="select-method" label="Analysis Method">
|
||||
<Select
|
||||
value={selectMethod}
|
||||
onValueChange={setSelectMethod}
|
||||
disabled={uploading || !isSessionComplete}
|
||||
>
|
||||
<SelectTrigger
|
||||
id="select-method"
|
||||
className="h-11 bg-muted/20"
|
||||
>
|
||||
<SelectTrigger id="select-method">
|
||||
<SelectValue placeholder="Select method" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@@ -262,7 +219,7 @@ export default function UploadPage() {
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</FormField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -273,23 +230,19 @@ export default function UploadPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Primary Action Button */}
|
||||
<div className="pt-2">
|
||||
<div>
|
||||
<Button
|
||||
onClick={handleUpload}
|
||||
disabled={!isFormValid || uploading}
|
||||
className="w-full h-14 font-extrabold uppercase tracking-wider"
|
||||
className="w-full"
|
||||
>
|
||||
{uploading ? (
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="flex items-center gap-2">
|
||||
<Loader2 className="h-5 w-5 animate-spin" />
|
||||
<span>Uploading...</span>
|
||||
</div>
|
||||
Uploading...
|
||||
</span>
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<span>Upload & Process Analysis</span>
|
||||
<ChevronRight className="h-5 w-5" />
|
||||
</div>
|
||||
'Upload and Process'
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user