Add MQTT publish request and response models, and implement publish route
- Introduced MQTTPublishRequest and MQTTPublishResponse models for handling MQTT message publishing. - Implemented a new POST route for publishing MQTT messages, including error handling and logging. - Enhanced the StandaloneAutoRecorder with improved logging during manual recording start. - Updated the frontend to include an MQTT Debug Panel for better monitoring and debugging capabilities.
This commit is contained in:
salirezav
120
vision-system-remote/src/components/MqttDebugPanel.tsx
Normal file
120
vision-system-remote/src/components/MqttDebugPanel.tsx
Normal file
@@ -0,0 +1,120 @@
|
||||
import React, { useState } from 'react'
|
||||
import { visionApi } from '../services/api'
|
||||
|
||||
interface MqttDebugPanelProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export const MqttDebugPanel: React.FC<MqttDebugPanelProps> = ({ isOpen, onClose }) => {
|
||||
const [loading, setLoading] = useState<string | null>(null)
|
||||
const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null)
|
||||
|
||||
const publishMessage = async (topic: string, payload: string) => {
|
||||
const action = `${topic.split('/').pop()} → ${payload}`
|
||||
setLoading(action)
|
||||
setMessage(null)
|
||||
|
||||
try {
|
||||
const result = await visionApi.publishMqttMessage(topic, payload, 0, false)
|
||||
if (result.success) {
|
||||
setMessage({ type: 'success', text: `Published: ${action}` })
|
||||
setTimeout(() => setMessage(null), 3000)
|
||||
} else {
|
||||
setMessage({ type: 'error', text: `Failed: ${result.message}` })
|
||||
}
|
||||
} catch (error: any) {
|
||||
setMessage({ type: 'error', text: `Error: ${error.message || 'Failed to publish message'}` })
|
||||
} finally {
|
||||
setLoading(null)
|
||||
}
|
||||
}
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
|
||||
<div className="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
|
||||
{/* Header */}
|
||||
<div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
|
||||
<h2 className="text-xl font-semibold text-gray-900">MQTT Debug Panel</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-gray-400 hover:text-gray-600 transition-colors"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6 space-y-6">
|
||||
{/* Message Status */}
|
||||
{message && (
|
||||
<div className={`p-3 rounded-md ${
|
||||
message.type === 'success'
|
||||
? 'bg-green-50 text-green-800 border border-green-200'
|
||||
: 'bg-red-50 text-red-800 border border-red-200'
|
||||
}`}>
|
||||
{message.text}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Vibratory Conveyor Section */}
|
||||
<div className="border border-gray-200 rounded-lg p-4">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-4">Vibratory Conveyor</h3>
|
||||
<p className="text-sm text-gray-600 mb-4">Topic: <code className="bg-gray-100 px-2 py-1 rounded">vision/vibratory_conveyor/state</code></p>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => publishMessage('vision/vibratory_conveyor/state', 'on')}
|
||||
disabled={loading !== null}
|
||||
className="flex-1 px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{loading === 'vibratory_conveyor → on' ? 'Publishing...' : 'Turn ON'}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => publishMessage('vision/vibratory_conveyor/state', 'off')}
|
||||
disabled={loading !== null}
|
||||
className="flex-1 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{loading === 'vibratory_conveyor → off' ? 'Publishing...' : 'Turn OFF'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Blower Separator Section */}
|
||||
<div className="border border-gray-200 rounded-lg p-4">
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-4">Blower Separator</h3>
|
||||
<p className="text-sm text-gray-600 mb-4">Topic: <code className="bg-gray-100 px-2 py-1 rounded">vision/blower_separator/state</code></p>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => publishMessage('vision/blower_separator/state', 'on')}
|
||||
disabled={loading !== null}
|
||||
className="flex-1 px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{loading === 'blower_separator → on' ? 'Publishing...' : 'Turn ON'}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => publishMessage('vision/blower_separator/state', 'off')}
|
||||
disabled={loading !== null}
|
||||
className="flex-1 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{loading === 'blower_separator → off' ? 'Publishing...' : 'Turn OFF'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||
<p className="text-sm text-blue-800">
|
||||
<strong>Note:</strong> These buttons publish MQTT messages to test auto-recording.
|
||||
Check the logs to see if cameras start/stop recording automatically.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user