refactor: implement project package segment lazy select
This commit is contained in:
@@ -1,10 +1,12 @@
|
||||
'use client';
|
||||
|
||||
import type { ComponentProps } from 'react';
|
||||
import { useRef } from 'react';
|
||||
import type { FieldErrors, UseFormRegister } from 'react-hook-form';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
|
||||
import { FormField } from '@/components/form';
|
||||
import { ProjectSelect } from '@/components/lookups/ProjectSelect';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Dialog,
|
||||
@@ -15,14 +17,6 @@ import {
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import type { Project } from '@/types';
|
||||
|
||||
import type { PackageFormValues } from '../hooks/usePackageForm';
|
||||
|
||||
@@ -30,8 +24,6 @@ interface PackageDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
packageId?: string;
|
||||
projects: Project[];
|
||||
isProjectsLoading: boolean;
|
||||
projectId: string;
|
||||
onProjectChange: (projectId: string) => void;
|
||||
register: UseFormRegister<PackageFormValues>;
|
||||
@@ -46,8 +38,6 @@ export function PackageDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
packageId,
|
||||
projects,
|
||||
isProjectsLoading,
|
||||
projectId,
|
||||
onProjectChange,
|
||||
register,
|
||||
@@ -57,6 +47,7 @@ export function PackageDialog({
|
||||
canSubmit,
|
||||
isSaving,
|
||||
}: PackageDialogProps) {
|
||||
const projectSelectPortalRef = useRef<HTMLDivElement | null>(null);
|
||||
const projectErrorMessage = isSubmitted
|
||||
? errors.project_id?.message
|
||||
: undefined;
|
||||
@@ -95,25 +86,13 @@ export function PackageDialog({
|
||||
|
||||
{!packageId ? (
|
||||
<FormField label="Project" required error={projectErrorMessage}>
|
||||
<Select value={projectId} onValueChange={onProjectChange}>
|
||||
<SelectTrigger aria-invalid={!!projectErrorMessage}>
|
||||
{isProjectsLoading ? (
|
||||
<span className="flex items-center gap-2 text-muted-foreground">
|
||||
<Loader2 className="size-4 animate-spin" />
|
||||
Loading...
|
||||
</span>
|
||||
) : (
|
||||
<SelectValue placeholder="Choose a project" />
|
||||
)}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{projects.map((project) => (
|
||||
<SelectItem key={project.id} value={project.id}>
|
||||
{project.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<ProjectSelect
|
||||
value={projectId}
|
||||
onValueChange={onProjectChange}
|
||||
enabled={open}
|
||||
disabled={isSaving}
|
||||
portalContainer={projectSelectPortalRef}
|
||||
/>
|
||||
<input
|
||||
type="hidden"
|
||||
{...register('project_id')}
|
||||
@@ -205,6 +184,8 @@ export function PackageDialog({
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
|
||||
<div ref={projectSelectPortalRef} />
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
|
||||
@@ -113,8 +113,6 @@ export default function PackagePage() {
|
||||
open={isDialogOpen}
|
||||
onOpenChange={handleDialogOpenChange}
|
||||
packageId={packageId}
|
||||
projects={projects}
|
||||
isProjectsLoading={projectsQuery.isLoading}
|
||||
projectId={projectId}
|
||||
onProjectChange={setProjectId}
|
||||
register={register}
|
||||
|
||||
@@ -4,4 +4,6 @@ export const packageKeys = {
|
||||
all: ['packages'] as const,
|
||||
lists: () => [...packageKeys.all, 'list'] as const,
|
||||
list: (params: PaginationParams) => [...packageKeys.lists(), params] as const,
|
||||
details: () => [...packageKeys.all, 'detail'] as const,
|
||||
detail: (id: string) => [...packageKeys.details(), id] as const,
|
||||
};
|
||||
|
||||
@@ -4,4 +4,6 @@ export const projectKeys = {
|
||||
all: ['projects'] as const,
|
||||
lists: () => [...projectKeys.all, 'list'] as const,
|
||||
list: (params: PaginationParams) => [...projectKeys.lists(), params] as const,
|
||||
details: () => [...projectKeys.all, 'detail'] as const,
|
||||
detail: (id: string) => [...projectKeys.details(), id] as const,
|
||||
};
|
||||
|
||||
@@ -1,16 +1,11 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useMemo } from 'react';
|
||||
import { useRouter, useParams } from 'next/navigation';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useMemo } from 'react';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { Loader2, TrendingUp } from 'lucide-react';
|
||||
import VideoPlayerSection from '@/components/videoPlayerSection';
|
||||
import { PageHeader } from '@/components/page-header';
|
||||
import { sessionService } from '@/services/api';
|
||||
import { SessionContext, CompletedVideoResult, DetectionType } from '@/types';
|
||||
import { clearVideoFile } from '@/lib/video-storage';
|
||||
import { ROUTES } from '@/utils/routes';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { CompletedVideoResult, DetectionType } from '@/types';
|
||||
import { getDetectionModeConfig } from '@/constants/detectionModeConfig';
|
||||
import { useVideoResultsQuery } from '../hooks/useVideoResults';
|
||||
|
||||
@@ -26,9 +21,7 @@ const inferDetectionType = (data: CompletedVideoResult): DetectionType => {
|
||||
};
|
||||
|
||||
export default function VideoResultsPage() {
|
||||
const router = useRouter();
|
||||
const { videoId } = useParams() as { videoId: string };
|
||||
const [session, setSession] = useState<SessionContext | null>(null);
|
||||
|
||||
const {
|
||||
data: detectionData,
|
||||
@@ -48,22 +41,6 @@ export default function VideoResultsPage() {
|
||||
: 'Failed to load results'
|
||||
: null;
|
||||
|
||||
useEffect(() => {
|
||||
setSession(sessionService.loadSession());
|
||||
}, []);
|
||||
|
||||
const handleNewAnalysis = async () => {
|
||||
if (videoId) {
|
||||
try {
|
||||
await clearVideoFile(videoId);
|
||||
} catch (err) {
|
||||
console.error('Failed to clear video file:', err);
|
||||
}
|
||||
}
|
||||
sessionService.clearSession();
|
||||
router.push(ROUTES.UPLOAD);
|
||||
};
|
||||
|
||||
const getTitle = () => {
|
||||
const config = getDetectionModeConfig(detectionType);
|
||||
return `${config.label} Results`;
|
||||
@@ -71,55 +48,29 @@ export default function VideoResultsPage() {
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<Card className="flex flex-col items-center gap-4 p-8">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Loading detection results...
|
||||
</p>
|
||||
</Card>
|
||||
<div className="min-h-[60vh] flex items-center justify-center">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<Card className="flex flex-col items-center gap-6 p-8 text-center max-w-md">
|
||||
<p className="text-destructive font-medium">{error}</p>
|
||||
<div className="flex gap-4">
|
||||
<Button
|
||||
onClick={() => router.push(ROUTES.UPLOAD)}
|
||||
variant="outline"
|
||||
>
|
||||
Back to Upload
|
||||
</Button>
|
||||
<Button onClick={handleNewAnalysis}>New Analysis</Button>
|
||||
</div>
|
||||
</Card>
|
||||
<div className="min-h-[60vh] flex items-center justify-center">
|
||||
<p className="text-sm text-destructive">{error}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<main className="min-h-screen">
|
||||
<div className="container mx-auto px-6 py-10 max-w-[1600px]">
|
||||
<div className="mb-8">
|
||||
<PageHeader
|
||||
title={getTitle()}
|
||||
description={`Video ID: ${videoId}`}
|
||||
icon={TrendingUp}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-8">
|
||||
<PageHeader
|
||||
title={getTitle()}
|
||||
description={`Video ID: ${videoId}`}
|
||||
icon={TrendingUp}
|
||||
/>
|
||||
|
||||
{detectionData && (
|
||||
<VideoPlayerSection
|
||||
data={detectionData}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
{detectionData && <VideoPlayerSection data={detectionData} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,33 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { sessionService } from '@/services/api';
|
||||
import { ROUTES } from '@/utils/routes';
|
||||
|
||||
export default function ResultsPage() {
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
const storedSession = sessionService.loadSession();
|
||||
const videoData = sessionService.loadVideoData();
|
||||
|
||||
if (!sessionService.isSessionValid(storedSession) || !videoData?.videoId) {
|
||||
router.replace(ROUTES.UPLOAD);
|
||||
return;
|
||||
}
|
||||
|
||||
router.replace(`${ROUTES.RESULTS}/${videoData.videoId}`);
|
||||
}, [router]);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<Card className="flex flex-col items-center gap-4 p-8">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
||||
<p className="text-sm text-muted-foreground">Loading results...</p>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,10 +1,13 @@
|
||||
'use client';
|
||||
|
||||
import type { ComponentProps } from 'react';
|
||||
import { useRef } from 'react';
|
||||
import type { FieldErrors, UseFormRegister } from 'react-hook-form';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
|
||||
import { FormField } from '@/components/form';
|
||||
import { PackageSelect } from '@/components/lookups/PackageSelect';
|
||||
import { ProjectSelect } from '@/components/lookups/ProjectSelect';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Dialog,
|
||||
@@ -22,7 +25,6 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import type { Package, Project } from '@/types';
|
||||
|
||||
import type { SegmentFormValues } from '../hooks/useSegmentForm';
|
||||
|
||||
@@ -30,10 +32,6 @@ interface SegmentDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
segmentId?: string;
|
||||
projects: Project[];
|
||||
packages: Package[];
|
||||
isProjectsLoading: boolean;
|
||||
isPackagesLoading: boolean;
|
||||
projectId: string;
|
||||
onProjectChange: (projectId: string) => void;
|
||||
packageId: string;
|
||||
@@ -52,10 +50,6 @@ export function SegmentDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
segmentId,
|
||||
projects,
|
||||
packages,
|
||||
isProjectsLoading,
|
||||
isPackagesLoading,
|
||||
projectId,
|
||||
onProjectChange,
|
||||
packageId,
|
||||
@@ -69,6 +63,8 @@ export function SegmentDialog({
|
||||
canSubmit,
|
||||
isSaving,
|
||||
}: SegmentDialogProps) {
|
||||
const projectSelectPortalRef = useRef<HTMLDivElement | null>(null);
|
||||
const packageSelectPortalRef = useRef<HTMLDivElement | null>(null);
|
||||
const getError = (field: keyof SegmentFormValues) =>
|
||||
isSubmitted ? errors[field]?.message : undefined;
|
||||
|
||||
@@ -104,25 +100,13 @@ export function SegmentDialog({
|
||||
required
|
||||
error={getError('project_id')}
|
||||
>
|
||||
<Select value={projectId} onValueChange={onProjectChange}>
|
||||
<SelectTrigger aria-invalid={!!getError('project_id')}>
|
||||
{isProjectsLoading ? (
|
||||
<span className="flex items-center gap-2 text-muted-foreground">
|
||||
<Loader2 className="size-4 animate-spin" />
|
||||
Loading...
|
||||
</span>
|
||||
) : (
|
||||
<SelectValue placeholder="Choose a project" />
|
||||
)}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{projects.map((project) => (
|
||||
<SelectItem key={project.id} value={project.id}>
|
||||
{project.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<ProjectSelect
|
||||
value={projectId}
|
||||
onValueChange={onProjectChange}
|
||||
enabled={open}
|
||||
disabled={isSaving}
|
||||
portalContainer={projectSelectPortalRef}
|
||||
/>
|
||||
<input
|
||||
type="hidden"
|
||||
{...register('project_id')}
|
||||
@@ -136,35 +120,14 @@ export function SegmentDialog({
|
||||
required
|
||||
error={getError('package_id')}
|
||||
>
|
||||
<Select
|
||||
<PackageSelect
|
||||
value={packageId}
|
||||
onValueChange={onPackageChange}
|
||||
disabled={!projectId || isPackagesLoading}
|
||||
>
|
||||
<SelectTrigger aria-invalid={!!getError('package_id')}>
|
||||
{isPackagesLoading ? (
|
||||
<span className="flex items-center gap-2 text-muted-foreground">
|
||||
<Loader2 className="size-4 animate-spin" />
|
||||
Loading...
|
||||
</span>
|
||||
) : (
|
||||
<SelectValue
|
||||
placeholder={
|
||||
projectId
|
||||
? 'Choose a package'
|
||||
: 'Select project first'
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{packages.map((pkg) => (
|
||||
<SelectItem key={pkg.id} value={pkg.id}>
|
||||
{pkg.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
projectId={projectId}
|
||||
enabled={open && Boolean(projectId)}
|
||||
disabled={!projectId || isSaving}
|
||||
portalContainer={packageSelectPortalRef}
|
||||
/>
|
||||
<input
|
||||
type="hidden"
|
||||
{...register('package_id')}
|
||||
@@ -350,6 +313,9 @@ export function SegmentDialog({
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
|
||||
<div ref={projectSelectPortalRef} />
|
||||
<div ref={packageSelectPortalRef} />
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
|
||||
@@ -44,15 +44,6 @@ export function useAllPackageOptionsQuery() {
|
||||
});
|
||||
}
|
||||
|
||||
export function usePackagesByProjectQuery(projectId: string, enabled: boolean) {
|
||||
return useQuery({
|
||||
queryKey: ['packages', 'by-project', projectId],
|
||||
queryFn: () =>
|
||||
packageService.getPackagesByProject(projectId, { skip: 0, limit: 1000 }),
|
||||
enabled: enabled && Boolean(projectId),
|
||||
});
|
||||
}
|
||||
|
||||
export function useDeleteSegmentMutation() {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
|
||||
@@ -15,7 +15,6 @@ import { useSegmentForm } from './hooks/useSegmentForm';
|
||||
import {
|
||||
useAllPackageOptionsQuery,
|
||||
useDeleteSegmentMutation,
|
||||
usePackagesByProjectQuery,
|
||||
useProjectOptionsQuery,
|
||||
useSegmentsQuery,
|
||||
} from './hooks/useSegmentQueries';
|
||||
@@ -48,11 +47,6 @@ export default function SegmentPage() {
|
||||
canSubmit,
|
||||
isSaving,
|
||||
} = segmentForm;
|
||||
const projectPackagesQuery = usePackagesByProjectQuery(
|
||||
projectId,
|
||||
isDialogOpen,
|
||||
);
|
||||
|
||||
const openCreate = useCallback(() => {
|
||||
prepareCreateSegment();
|
||||
setIsDialogOpen(true);
|
||||
@@ -95,7 +89,6 @@ export default function SegmentPage() {
|
||||
|
||||
const projects = projectsQuery.data?.items ?? [];
|
||||
const allPackages = allPackagesQuery.data?.items ?? [];
|
||||
const projectPackages = projectPackagesQuery.data?.items ?? [];
|
||||
const segments = segmentsQuery.data?.items ?? [];
|
||||
const total = segmentsQuery.data?.totalItems ?? 0;
|
||||
const columns = useSegmentColumns(projects, allPackages);
|
||||
@@ -133,10 +126,6 @@ export default function SegmentPage() {
|
||||
open={isDialogOpen}
|
||||
onOpenChange={handleDialogOpenChange}
|
||||
segmentId={segmentId}
|
||||
projects={projects}
|
||||
packages={projectPackages}
|
||||
isProjectsLoading={projectsQuery.isLoading}
|
||||
isPackagesLoading={projectPackagesQuery.isLoading}
|
||||
projectId={projectId}
|
||||
onProjectChange={setProjectId}
|
||||
packageId={packageId}
|
||||
|
||||
@@ -4,4 +4,6 @@ export const segmentKeys = {
|
||||
all: ['segments'] as const,
|
||||
lists: () => [...segmentKeys.all, 'list'] as const,
|
||||
list: (params: PaginationParams) => [...segmentKeys.lists(), params] as const,
|
||||
details: () => [...segmentKeys.all, 'detail'] as const,
|
||||
detail: (id: string) => [...segmentKeys.details(), id] as const,
|
||||
};
|
||||
|
||||
32
src/app/(modules)/ticket/page.tsx
Normal file
32
src/app/(modules)/ticket/page.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
'use client';
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { PageHeader } from '@/components/page-header';
|
||||
import { Ticket } from 'lucide-react';
|
||||
|
||||
export default function TicketPage() {
|
||||
return (
|
||||
<div className="min-h-screen pb-12">
|
||||
<main>
|
||||
<div className="mb-10">
|
||||
<PageHeader
|
||||
title="Ticket"
|
||||
description="Uploaded video details will be shown here."
|
||||
icon={Ticket}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Ticket Page</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
This is ticket page for now.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,260 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import { useRouter, useParams } from 'next/navigation';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Loader2, TrendingUp, ArrowUp, ArrowDown } from 'lucide-react';
|
||||
import { PageHeader } from '@/components/page-header';
|
||||
import { sessionService, videoService } from '@/services/api';
|
||||
import { SessionContext } from '@/types';
|
||||
import { ROUTES } from '@/utils/routes';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
const API_URL = process.env.NEXT_PUBLIC_API_URL;
|
||||
const WS_URL = API_URL?.replace(/^https:\/\//, 'wss://').replace(
|
||||
/^http:\/\//,
|
||||
'ws://',
|
||||
);
|
||||
|
||||
export default function VideoProcessingPage() {
|
||||
const router = useRouter();
|
||||
const { videoId } = useParams() as { videoId: string };
|
||||
const [session, setSession] = useState<SessionContext | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
// Processing states
|
||||
const [progress, setProgress] = useState(0);
|
||||
const [statusMessage, setStatusMessage] = useState('Initializing...');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const wsRef = useRef<WebSocket | null>(null);
|
||||
|
||||
const connectWebSocket = useCallback(
|
||||
(vid: string) => {
|
||||
if (wsRef.current) return wsRef.current;
|
||||
|
||||
const ws = new WebSocket(`${WS_URL}/ws/${vid}`);
|
||||
wsRef.current = ws;
|
||||
|
||||
ws.onmessage = async (event) => {
|
||||
const data = JSON.parse(event.data);
|
||||
|
||||
if (data.type === 'progress' || data.progress !== undefined) {
|
||||
setProgress(data.progress || 0);
|
||||
let message = data.message || 'Processing...';
|
||||
const uniqueCount =
|
||||
data.unique_potholes ??
|
||||
data.unique_pothole ??
|
||||
data.unique_signboards ??
|
||||
data.unique_signboard ??
|
||||
data.unique_culverts ??
|
||||
data.unique_culvert ??
|
||||
data.unique_drain_issue;
|
||||
if (uniqueCount !== undefined) {
|
||||
message += ` | Unique: ${uniqueCount} | Total: ${data.total_detections || 0}`;
|
||||
}
|
||||
setStatusMessage(message);
|
||||
}
|
||||
|
||||
if (data.type === 'complete' || data.status === 'completed') {
|
||||
setStatusMessage('Processing completed! Finalizing...');
|
||||
ws.close();
|
||||
|
||||
// Navigate to results
|
||||
setTimeout(() => router.push(`/results/${vid}`), 1000);
|
||||
}
|
||||
|
||||
if (data.type === 'error') {
|
||||
setError('Error: ' + data.message);
|
||||
setStatusMessage('');
|
||||
ws.close();
|
||||
}
|
||||
};
|
||||
|
||||
ws.onerror = () => {
|
||||
setStatusMessage('Connection lost. Reconnecting...');
|
||||
wsRef.current = null;
|
||||
setTimeout(() => connectWebSocket(vid), 3000);
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
wsRef.current = null;
|
||||
};
|
||||
|
||||
return ws;
|
||||
},
|
||||
[router],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const storedSession = sessionService.loadSession();
|
||||
setSession(storedSession);
|
||||
|
||||
let isMounted = true;
|
||||
|
||||
const checkStatus = async () => {
|
||||
try {
|
||||
const statusData = await videoService.getVideoStatus(videoId);
|
||||
|
||||
if (!isMounted) return;
|
||||
|
||||
if (statusData.status === 'completed') {
|
||||
router.replace(`/results/${videoId}`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (statusData.status === 'error') {
|
||||
setError(
|
||||
statusData.message || 'An error occurred during processing.',
|
||||
);
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// If processing, start WebSocket
|
||||
setProgress(statusData.progress || 0);
|
||||
setStatusMessage(statusData.message || 'Resuming processing...');
|
||||
connectWebSocket(videoId);
|
||||
setIsLoading(false);
|
||||
} catch (err) {
|
||||
console.error('Status check failed:', err);
|
||||
if (isMounted) {
|
||||
setError('Failed to connect to server.');
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (videoId) {
|
||||
checkStatus();
|
||||
}
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
if (wsRef.current) {
|
||||
wsRef.current.close();
|
||||
wsRef.current = null;
|
||||
}
|
||||
};
|
||||
}, [videoId, router, connectWebSocket]);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<Card className="p-8">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<main className="min-h-screen flex flex-col">
|
||||
<div className="flex-1 container mx-auto px-6 py-6 max-w-340 flex flex-col">
|
||||
<div className="mb-6">
|
||||
<PageHeader
|
||||
title="Uploading Analysis"
|
||||
description={`Real-time analysis progress for video ID: ${videoId}`}
|
||||
icon={TrendingUp}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{session && (
|
||||
<div className="mb-6">
|
||||
<Card className="p-0 border shadow-sm overflow-hidden">
|
||||
<div className="flex flex-col md:flex-row md:items-center py-4 px-6 gap-6 bg-card">
|
||||
<div className="flex flex-wrap items-center gap-x-12 gap-y-4 flex-1">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-1.5">
|
||||
Project
|
||||
</span>
|
||||
<span className="text-base font-bold leading-tight">
|
||||
{session.projectName}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col border-l pl-12 border-border/60">
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-1.5">
|
||||
Package
|
||||
</span>
|
||||
<span className="text-sm font-semibold text-muted-foreground leading-tight">
|
||||
{session.packageName}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col border-l pl-12 border-border/60">
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-1.5">
|
||||
Segment
|
||||
</span>
|
||||
<span className="text-sm font-semibold text-muted-foreground leading-tight flex items-center gap-1.5">
|
||||
{session.chainageName}
|
||||
{session.chainageDirection && (
|
||||
<span className="inline-flex items-center gap-1 px-1 py-0.5 rounded bg-muted text-[10px] font-bold uppercase border">
|
||||
{session.chainageDirection === 'UP' ? (
|
||||
<ArrowUp className="h-2.5 w-2.5" />
|
||||
) : (
|
||||
<ArrowDown className="h-2.5 w-2.5" />
|
||||
)}
|
||||
{session.chainageDirection}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Card className="flex-1 flex flex-col items-center justify-center py-12 px-8 min-h-[450px]">
|
||||
<div className="flex flex-col items-center justify-center w-full max-w-2xl space-y-10">
|
||||
<div className="text-center space-y-4">
|
||||
<h2 className="text-3xl font-bold tracking-tight">
|
||||
Uploading ...
|
||||
</h2>
|
||||
<p className="text-sm font-mono text-muted-foreground tracking-widest">
|
||||
ID: {videoId}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="w-full space-y-4">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="font-bold text-muted-foreground text-xs uppercase tracking-widest">
|
||||
Progress
|
||||
</span>
|
||||
<span className="font-bold text-primary text-lg">
|
||||
{progress}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-4 rounded-full bg-secondary overflow-hidden border">
|
||||
<div
|
||||
className="h-full bg-primary transition-all duration-1000 ease-in-out"
|
||||
style={{ width: `${progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-center pt-2">
|
||||
<div className="inline-flex items-center gap-3 px-4 py-2 rounded-full border bg-secondary/30">
|
||||
<Loader2 className="h-4 w-4 animate-spin text-primary" />
|
||||
<p className="text-sm font-semibold">{statusMessage}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="w-full p-6 rounded-md bg-destructive/10 border border-destructive/20 text-center space-y-3">
|
||||
<p className="text-destructive font-medium">{error}</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => window.location.reload()}
|
||||
>
|
||||
Retry Connection
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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