MODEL/usda-vision
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance CameraPage UI and improve loading indicators

Browse Source 
- Updated loading indicators with larger sizes and improved animations for better visibility.
- Enhanced error banner styling and increased padding for a more user-friendly experience.
- Adjusted stream status and recording status sections for improved readability and consistency in font sizes.
- Refined MQTT message log display with better spacing and text sizes for clearer information presentation.
- Improved overall layout and styling of the CameraPage component for a more polished user interface.
This commit is contained in:
salirezav
2025-12-01 15:40:32 -05:00
parent b3a94d2d4f
commit cb48020932
1 changed files with 70 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
management-dashboard-web-app/src/components/CameraPage.tsx
View File

@@ -279,10 +279,10 @@ export function CameraPage({ cameraName }: CameraPageProps) {
if (loading) {
return (
<div className="min-h-screen flex items-center justify-center bg-gray-900">
<div className="h-screen flex items-center justify-center bg-gray-900">
<div className="text-center text-white">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-white mx-auto"></div>
<p className="mt-4">Loading camera data...</p>
<div className="animate-spin rounded-full h-16 w-16 border-b-3 border-white mx-auto"></div>
<p className="mt-6 text-2xl font-semibold">Loading camera data...</p>
</div>
</div>
)
@@ -291,23 +291,23 @@ export function CameraPage({ cameraName }: CameraPageProps) {
const healthStatus = getHealthStatus()
return (
<div className="min-h-screen bg-gray-900 flex">
<div className="h-screen bg-gray-900 flex overflow-hidden">
{/* Left Side - Live Stream (3/5) */}
<div className="flex-[3] flex flex-col bg-black">
<div className="flex-[3] flex flex-col bg-black overflow-hidden">
{/* Auto-recording Error Banner */}
{autoRecordingError && (
<div className="bg-red-600 text-white px-4 py-3 flex items-center justify-between animate-pulse">
<div className="flex items-center space-x-2">
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<div className="bg-red-600 text-white px-6 py-5 flex items-center justify-between animate-pulse">
<div className="flex items-center space-x-3">
<svg className="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
</svg>
<span className="font-semibold">{autoRecordingError}</span>
<span className="font-semibold text-xl">{autoRecordingError}</span>
</div>
<button
onClick={() => setAutoRecordingError(null)}
className="text-white hover:text-gray-200"
className="text-white hover:text-gray-200 p-2"
>
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<svg className="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
</svg>
</button>
@@ -315,7 +315,7 @@ export function CameraPage({ cameraName }: CameraPageProps) {
)}
{/* Stream Container */}
<div className="flex-1 flex items-center justify-center relative">
<div className="flex-1 flex items-center justify-center relative min-h-0">
{isStreaming && streamStatus === 'streaming' ? (
<img
ref={imgRef}
@@ -340,32 +340,32 @@ export function CameraPage({ cameraName }: CameraPageProps) {
/>
) : streamStatus === 'starting' ? (
<div className="text-center text-white">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-white mx-auto mb-4"></div>
<p className="text-lg">Starting stream...</p>
<div className="animate-spin rounded-full h-16 w-16 border-b-3 border-white mx-auto mb-6"></div>
<p className="text-2xl font-semibold">Starting stream...</p>
</div>
) : (
<div className="text-center text-gray-500">
<svg className="w-24 h-24 mx-auto mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-32 h-32 mx-auto mb-6 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
<p className="text-lg">Stream not active</p>
<p className="text-sm mt-2">Click "Start Stream" to begin</p>
<p className="text-2xl font-semibold">Stream not active</p>
<p className="text-xl mt-4">Click "Start Stream" to begin</p>
</div>
)}
{/* Camera Label Overlay */}
<div className="absolute top-4 left-4 z-10">
<div className="bg-black bg-opacity-75 text-white px-3 py-1 rounded-md text-sm font-medium">
<div className="absolute top-6 left-6 z-10">
<div className="bg-black bg-opacity-75 text-white px-5 py-3 rounded-lg text-xl font-semibold">
{cameraName} - Live View
</div>
</div>
{/* Stream Status Indicator */}
{isStreaming && (
<div className="absolute bottom-4 right-4 z-10">
<div className="flex items-center space-x-2 bg-black bg-opacity-75 text-white px-3 py-1 rounded-md">
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
<span className="text-sm">LIVE</span>
<div className="absolute bottom-6 right-6 z-10">
<div className="flex items-center space-x-3 bg-black bg-opacity-75 text-white px-5 py-3 rounded-lg">
<div className="w-4 h-4 bg-green-500 rounded-full animate-pulse"></div>
<span className="text-xl font-semibold">LIVE</span>
</div>
</div>
)}
@@ -373,27 +373,27 @@ export function CameraPage({ cameraName }: CameraPageProps) {
</div>
{/* Right Side - Controls & Info (2/5) */}
<div className="flex-[2] bg-gray-800 text-white p-6 overflow-y-auto">
<h1 className="text-2xl font-bold mb-6">{cameraName.toUpperCase()}</h1>
<div className="flex-[2] bg-gray-800 text-white p-8 overflow-y-auto h-full">
<h1 className="text-4xl font-bold mb-8">{cameraName.toUpperCase()}</h1>
{/* Health Status */}
<div className="mb-6">
<h2 className="text-lg font-semibold mb-2">Health Status</h2>
<div className={`p-3 rounded-md ${
<div className="mb-8">
<h2 className="text-2xl font-semibold mb-4">Health Status</h2>
<div className={`p-5 rounded-lg ${
healthStatus.status === 'healthy' ? 'bg-green-600' :
healthStatus.status === 'error' ? 'bg-red-600' :
'bg-yellow-600'
}`}>
<div className="flex items-center space-x-2">
<div className={`w-3 h-3 rounded-full ${
<div className="flex items-center space-x-3">
<div className={`w-5 h-5 rounded-full ${
healthStatus.status === 'healthy' ? 'bg-green-200' :
healthStatus.status === 'error' ? 'bg-red-200' :
'bg-yellow-200'
}`}></div>
<span className="font-medium">{healthStatus.message}</span>
<span className="font-medium text-xl">{healthStatus.message}</span>
</div>
{cameraStatus?.device_info && (
<div className="mt-2 text-sm opacity-90">
<div className="mt-4 text-lg opacity-90">
<div>Model: {cameraStatus.device_info.model || 'N/A'}</div>
<div>Serial: {cameraStatus.device_info.serial_number || 'N/A'}</div>
</div>
@@ -402,12 +402,12 @@ export function CameraPage({ cameraName }: CameraPageProps) {
</div>
{/* Stream Controls */}
<div className="mb-6">
<h2 className="text-lg font-semibold mb-2">Stream Control</h2>
<div className="bg-gray-700 p-4 rounded-md">
<div className="mb-3">
<div className="text-sm text-gray-300 mb-1">Status:</div>
<div className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
<div className="mb-8">
<h2 className="text-2xl font-semibold mb-4">Stream Control</h2>
<div className="bg-gray-700 p-6 rounded-lg">
<div className="mb-5">
<div className="text-xl text-gray-300 mb-2">Status:</div>
<div className={`inline-flex items-center px-4 py-2 rounded-full text-lg font-medium ${
streamStatus === 'streaming' ? 'bg-green-600 text-white' :
streamStatus === 'error' ? 'bg-red-600 text-white' :
'bg-gray-600 text-gray-200'
@@ -415,11 +415,11 @@ export function CameraPage({ cameraName }: CameraPageProps) {
{getStreamStatusText()}
</div>
</div>
<div className="flex space-x-2">
<div className="flex space-x-3">
<button
onClick={isStreaming ? stopStreaming : startStreaming}
disabled={streamStatus === 'starting' || streamStatus === 'stopping'}
className={`flex-1 px-4 py-2 rounded-md font-medium transition-colors ${
className={`flex-1 px-6 py-4 rounded-lg font-semibold text-xl transition-colors ${
isStreaming
? 'bg-red-600 hover:bg-red-700 disabled:bg-red-800'
: 'bg-blue-600 hover:bg-blue-700 disabled:bg-blue-800'
@@ -432,26 +432,26 @@ export function CameraPage({ cameraName }: CameraPageProps) {
</div>
{/* Recording Status */}
<div className="mb-6">
<h2 className="text-lg font-semibold mb-2">Recording Status</h2>
<div className="bg-gray-700 p-4 rounded-md">
<div className="mb-3">
<div className="text-sm text-gray-300 mb-1">Status:</div>
<div className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
<div className="mb-8">
<h2 className="text-2xl font-semibold mb-4">Recording Status</h2>
<div className="bg-gray-700 p-6 rounded-lg">
<div className="mb-5">
<div className="text-xl text-gray-300 mb-2">Status:</div>
<div className={`inline-flex items-center px-4 py-2 rounded-full text-lg font-medium ${
isRecording ? 'bg-red-600 text-white' : 'bg-gray-600 text-gray-200'
}`}>
{isRecording ? 'Recording Now' : 'Not Recording'}
</div>
</div>
{isRecording && cameraStatus?.current_recording_file && (
<div className="text-sm text-gray-300 mb-2">
<div className="text-lg text-gray-300 mb-4">
File: {cameraStatus.current_recording_file.split('/').pop()}
</div>
)}
<div className="flex space-x-2">
<div className="flex space-x-3">
<button
onClick={isRecording ? stopRecording : startRecording}
className={`flex-1 px-4 py-2 rounded-md font-medium transition-colors ${
className={`flex-1 px-6 py-4 rounded-lg font-semibold text-xl transition-colors ${
isRecording
? 'bg-red-600 hover:bg-red-700'
: 'bg-green-600 hover:bg-green-700'
@@ -464,33 +464,33 @@ export function CameraPage({ cameraName }: CameraPageProps) {
</div>
{/* MQTT Message Log */}
<div className="mb-6">
<h2 className="text-lg font-semibold mb-2">MQTT Message Log</h2>
<div className="bg-gray-700 rounded-md overflow-hidden">
<div className="max-h-64 overflow-y-auto p-2 space-y-2">
<div className="mb-8">
<h2 className="text-2xl font-semibold mb-4">MQTT Message Log</h2>
<div className="bg-gray-700 rounded-lg overflow-hidden">
<div className="max-h-96 overflow-y-auto p-4 space-y-3">
{mqttEvents.length === 0 ? (
<div className="text-center text-gray-400 py-4">
<div className="text-center text-gray-400 py-6 text-lg">
No MQTT messages received yet
</div>
) : (
mqttEvents.map((event, index) => (
<div
key={`${event.message_number}-${index}`}
className="bg-gray-800 p-2 rounded text-sm"
className="bg-gray-800 p-4 rounded-lg text-base"
>
<div className="flex justify-between items-start mb-1">
<span className="font-medium text-blue-300">{event.machine_name}</span>
<span className="text-gray-400 text-xs">{formatTimestamp(event.timestamp)}</span>
<div className="flex justify-between items-start mb-2">
<span className="font-semibold text-blue-300 text-lg">{event.machine_name}</span>
<span className="text-gray-400 text-base">{formatTimestamp(event.timestamp)}</span>
</div>
<div className="text-gray-300">
<div className="text-gray-300 text-lg">
<span className="text-gray-400">State: </span>
<span className={`font-medium ${
<span className={`font-semibold ${
event.normalized_state === 'on' ? 'text-green-400' : 'text-red-400'
}`}>
{event.normalized_state.toUpperCase()}
</span>
</div>
<div className="text-xs text-gray-500 mt-1">
<div className="text-base text-gray-500 mt-2">
Topic: {event.topic}
</div>
</div>
@@ -502,20 +502,20 @@ export function CameraPage({ cameraName }: CameraPageProps) {
{/* Auto-Recording Info */}
{cameraStatus && cameraStatus.auto_recording_enabled && (
<div className="mb-6">
<h2 className="text-lg font-semibold mb-2">Auto-Recording</h2>
<div className="bg-gray-700 p-4 rounded-md">
<div className="text-sm text-gray-300">
<div className="mb-1">
<span className="text-green-400">✓ Enabled</span>
<div className="mb-8">
<h2 className="text-2xl font-semibold mb-4">Auto-Recording</h2>
<div className="bg-gray-700 p-6 rounded-lg">
<div className="text-lg text-gray-300">
<div className="mb-3">
<span className="text-green-400 text-xl font-semibold">✓ Enabled</span>
</div>
{cameraConfig && (
<div className="text-xs mt-2">
Machine Topic: <span className="font-mono">{cameraConfig.machine_topic}</span>
<div className="text-base mt-3">
Machine Topic: <span className="font-mono text-lg">{cameraConfig.machine_topic}</span>
</div>
)}
{cameraStatus.auto_recording_failure_count > 0 && (
<div className="text-red-400 mt-2 text-xs">
<div className="text-red-400 mt-3 text-lg font-semibold">
Failures: {cameraStatus.auto_recording_failure_count}
</div>
)}