santasri.pachhal/road-monitoring-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: implement project package segment lazy select

Browse Source
This commit is contained in:
santasri.pachhal
2026-06-18 16:30:06 +05:30
parent 6cf363dce1
commit 9e76b8e6d0
31 changed files with 513 additions and 1076 deletions
Download Patch File Download Diff File Expand all files Collapse all files

260
src/app/(modules)/upload/[videoId]/page.tsx
View File

@@ -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>
);
}

109
src/app/(modules)/upload/page.tsx
View File

@@ -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>