refactor: modularize upload page into location, input, and settings sections
This commit is contained in:
@@ -0,0 +1,50 @@
|
||||
'use client';
|
||||
|
||||
import { FormField, SelectPopover } from '@/components/form';
|
||||
|
||||
const options = [
|
||||
{ value: 'yolo', label: 'Road Defect Detection' },
|
||||
{ value: 'yoloe', label: 'YOLOE Open-Vocabulary Detection' },
|
||||
{ value: 'yoloe_trained_vl', label: 'YOLOE With Vision Language Model' },
|
||||
{ value: 'culvert_detection', label: 'Culvert Detection' },
|
||||
{ value: 'combined', label: 'Road Defect Detection with vl' },
|
||||
] as const;
|
||||
|
||||
interface AnalysisSettingsSectionProps {
|
||||
value: string;
|
||||
onValueChange: (value: string) => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export function AnalysisSettingsSection({
|
||||
value,
|
||||
onValueChange,
|
||||
disabled = false,
|
||||
}: AnalysisSettingsSectionProps) {
|
||||
return (
|
||||
<section className="space-y-3">
|
||||
<div>
|
||||
<h2 className="text-sm font-semibold text-foreground">
|
||||
Analysis Settings
|
||||
</h2>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Select the AI model workflow for this job.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-3 md:grid-cols-2">
|
||||
<FormField id="analysis-method" label="Analysis Method">
|
||||
<SelectPopover
|
||||
options={options}
|
||||
value={value}
|
||||
onValueChange={onValueChange}
|
||||
disabled={disabled}
|
||||
placeholder="Select method"
|
||||
searchPlaceholder="Search methods"
|
||||
emptyMessage="No methods found."
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
50
src/app/(modules)/upload/components/InputDataSection.tsx
Normal file
50
src/app/(modules)/upload/components/InputDataSection.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
'use client';
|
||||
|
||||
import { UploadFileDropzone } from './UploadFileDropzone';
|
||||
|
||||
interface InputDataSectionProps {
|
||||
videoFile: File | null;
|
||||
gpsFile: File | null;
|
||||
onVideoFileChange: (file: File | null) => void;
|
||||
onGpsFileChange: (file: File | null) => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export function InputDataSection({
|
||||
videoFile,
|
||||
gpsFile,
|
||||
onVideoFileChange,
|
||||
onGpsFileChange,
|
||||
disabled = false,
|
||||
}: InputDataSectionProps) {
|
||||
return (
|
||||
<section className="space-y-3">
|
||||
<div>
|
||||
<h2 className="text-sm font-semibold text-foreground">Input Data</h2>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Attach the road video and GPS telemetry for processing.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-3 md:grid-cols-2">
|
||||
<UploadFileDropzone
|
||||
title="Drop video here or browse"
|
||||
description="Accepted formats: MP4, MOV, AVI, MKV"
|
||||
accept="video/*"
|
||||
file={videoFile}
|
||||
onFileChange={onVideoFileChange}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<UploadFileDropzone
|
||||
title="Drop GPS JSON here or browse"
|
||||
description="Accepted format: JSON telemetry file"
|
||||
accept=".json,application/json"
|
||||
file={gpsFile}
|
||||
onFileChange={onGpsFileChange}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
145
src/app/(modules)/upload/components/LocationSection.tsx
Normal file
145
src/app/(modules)/upload/components/LocationSection.tsx
Normal file
@@ -0,0 +1,145 @@
|
||||
'use client';
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
|
||||
import { FormField } from '@/components/form';
|
||||
import { PackageSelect } from '@/components/lookups/PackageSelect';
|
||||
import { ProjectSelect } from '@/components/lookups/ProjectSelect';
|
||||
import { SegmentSelect } from '@/components/lookups/SegmentSelect';
|
||||
import { packageService, projectService, chainageService } from '@/services/api';
|
||||
import type { Chainage, Package as PackageType, Project, SessionContext } from '@/types';
|
||||
|
||||
interface LocationSectionProps {
|
||||
value: SessionContext | null;
|
||||
onChange: (session: SessionContext | null) => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export function LocationSection({
|
||||
value,
|
||||
onChange,
|
||||
disabled = false,
|
||||
}: LocationSectionProps) {
|
||||
const [projectId, setProjectId] = useState(value?.projectId ?? '');
|
||||
const [packageId, setPackageId] = useState(value?.packageId ?? '');
|
||||
const [segmentId, setSegmentId] = useState(value?.chainageId ?? '');
|
||||
const [project, setProject] = useState<Project | null>(null);
|
||||
const [selectedPackage, setSelectedPackage] = useState<PackageType | null>(
|
||||
null,
|
||||
);
|
||||
const [segment, setSegment] = useState<Chainage | null>(null);
|
||||
|
||||
const latestProjectIdRef = useRef('');
|
||||
const latestPackageIdRef = useRef('');
|
||||
const latestSegmentIdRef = useRef('');
|
||||
|
||||
useEffect(() => {
|
||||
if (project && selectedPackage && segment) {
|
||||
onChange({
|
||||
projectId: project.id,
|
||||
projectName: project.name,
|
||||
packageId: selectedPackage.id,
|
||||
packageName: selectedPackage.name,
|
||||
chainageId: segment.id,
|
||||
chainageName: segment.segment_name,
|
||||
chainageDirection: segment.direction,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
onChange(null);
|
||||
}, [onChange, project, selectedPackage, segment]);
|
||||
|
||||
const handleProjectChange = useCallback((nextProjectId: string) => {
|
||||
latestProjectIdRef.current = nextProjectId;
|
||||
latestPackageIdRef.current = '';
|
||||
latestSegmentIdRef.current = '';
|
||||
setProjectId(nextProjectId);
|
||||
setPackageId('');
|
||||
setSegmentId('');
|
||||
setProject(null);
|
||||
setSelectedPackage(null);
|
||||
setSegment(null);
|
||||
|
||||
if (!nextProjectId) return;
|
||||
|
||||
void projectService.getProjectById(nextProjectId).then((nextProject) => {
|
||||
if (latestProjectIdRef.current === nextProjectId) {
|
||||
setProject(nextProject);
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handlePackageChange = useCallback((nextPackageId: string) => {
|
||||
latestPackageIdRef.current = nextPackageId;
|
||||
latestSegmentIdRef.current = '';
|
||||
setPackageId(nextPackageId);
|
||||
setSegmentId('');
|
||||
setSelectedPackage(null);
|
||||
setSegment(null);
|
||||
|
||||
if (!nextPackageId) return;
|
||||
|
||||
void packageService.getPackageById(nextPackageId).then((nextPackage) => {
|
||||
if (latestPackageIdRef.current === nextPackageId) {
|
||||
setSelectedPackage(nextPackage);
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleSegmentChange = useCallback((nextSegmentId: string) => {
|
||||
latestSegmentIdRef.current = nextSegmentId;
|
||||
setSegmentId(nextSegmentId);
|
||||
setSegment(null);
|
||||
|
||||
if (!nextSegmentId) return;
|
||||
|
||||
void chainageService.getChainageById(nextSegmentId).then((nextSegment) => {
|
||||
if (latestSegmentIdRef.current === nextSegmentId) {
|
||||
setSegment(nextSegment);
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="space-y-3">
|
||||
<div>
|
||||
<h2 className="text-sm font-semibold text-foreground">Location</h2>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Select the project hierarchy for this analysis job.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-3 md:grid-cols-3">
|
||||
<FormField label="Project" required>
|
||||
<ProjectSelect
|
||||
value={projectId}
|
||||
onValueChange={handleProjectChange}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Package" required>
|
||||
<PackageSelect
|
||||
value={packageId}
|
||||
onValueChange={handlePackageChange}
|
||||
projectId={projectId}
|
||||
enabled={Boolean(projectId)}
|
||||
disabled={disabled || !projectId}
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Segment" required>
|
||||
<SegmentSelect
|
||||
value={segmentId}
|
||||
onValueChange={handleSegmentChange}
|
||||
packageId={packageId}
|
||||
enabled={Boolean(packageId)}
|
||||
disabled={disabled || !packageId}
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
);
|
||||
}
|
||||
93
src/app/(modules)/upload/components/UploadFileDropzone.tsx
Normal file
93
src/app/(modules)/upload/components/UploadFileDropzone.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useState } from 'react';
|
||||
import { FileCheck2, UploadCloud } from 'lucide-react';
|
||||
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface UploadFileDropzoneProps {
|
||||
title: string;
|
||||
description: string;
|
||||
accept: string;
|
||||
file: File | null;
|
||||
onFileChange: (file: File | null) => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export function UploadFileDropzone({
|
||||
title,
|
||||
description,
|
||||
accept,
|
||||
file,
|
||||
onFileChange,
|
||||
disabled = false,
|
||||
}: UploadFileDropzoneProps) {
|
||||
const inputRef = useRef<HTMLInputElement | null>(null);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
|
||||
const handleFiles = (files: FileList | null) => {
|
||||
if (disabled) return;
|
||||
onFileChange(files?.[0] ?? null);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={disabled ? -1 : 0}
|
||||
aria-disabled={disabled}
|
||||
onClick={() => {
|
||||
if (!disabled) inputRef.current?.click();
|
||||
}}
|
||||
onKeyDown={(event) => {
|
||||
if (!disabled && (event.key === 'Enter' || event.key === ' ')) {
|
||||
event.preventDefault();
|
||||
inputRef.current?.click();
|
||||
}
|
||||
}}
|
||||
onDragOver={(event) => {
|
||||
event.preventDefault();
|
||||
if (!disabled) setIsDragging(true);
|
||||
}}
|
||||
onDragLeave={() => setIsDragging(false)}
|
||||
onDrop={(event) => {
|
||||
event.preventDefault();
|
||||
setIsDragging(false);
|
||||
handleFiles(event.dataTransfer.files);
|
||||
}}
|
||||
className={cn(
|
||||
'group flex min-h-32 cursor-pointer flex-col justify-between rounded-md border border-dashed bg-card/60 p-4 transition-colors',
|
||||
'hover:border-primary/60 hover:bg-secondary/40',
|
||||
isDragging && 'border-primary bg-secondary/60',
|
||||
disabled && 'pointer-events-none cursor-not-allowed opacity-60',
|
||||
)}
|
||||
>
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="file"
|
||||
accept={accept}
|
||||
className="hidden"
|
||||
onChange={(event) => handleFiles(event.target.files)}
|
||||
disabled={disabled}
|
||||
/>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex size-9 items-center justify-center rounded-md border bg-background">
|
||||
<UploadCloud className="size-4 text-muted-foreground" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-foreground">{title}</p>
|
||||
<p className="mt-1 text-xs text-muted-foreground">{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{file ? (
|
||||
<Badge variant="secondary" className="mt-4 max-w-full justify-start">
|
||||
<FileCheck2 className="size-3" />
|
||||
<span className="truncate">{file.name}</span>
|
||||
</Badge>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user