From 4af34eab3e277f995e470e1bc2a38dc253e42053 Mon Sep 17 00:00:00 2001 From: MinhNN Date: Sun, 8 Feb 2026 14:58:33 +0700 Subject: [PATCH] refactor: streamline camera form handling and update types for better consistency --- .../Camera/components/CameraFormModal.tsx | 59 ++++++------------- .../Camera/components/ConfigCameraV6.tsx | 12 ++-- src/pages/Manager/Device/Camera/index.tsx | 47 ++++----------- src/services/master/typings/camera.d.ts | 4 +- 4 files changed, 38 insertions(+), 84 deletions(-) diff --git a/src/pages/Manager/Device/Camera/components/CameraFormModal.tsx b/src/pages/Manager/Device/Camera/components/CameraFormModal.tsx index 3863024..6501a4e 100644 --- a/src/pages/Manager/Device/Camera/components/CameraFormModal.tsx +++ b/src/pages/Manager/Device/Camera/components/CameraFormModal.tsx @@ -17,18 +17,6 @@ const CAMERA_TYPES = [ { label: 'GENERIC', value: 'GENERIC' }, ]; -interface CameraFormValues { - name: string; - type: string; - account: string; - password: string; - ipAddress: string; - rtspPort: number; - httpPort: number; - stream: number; - channel: number; -} - interface CameraFormModalProps { open: boolean; onCancel: () => void; @@ -44,22 +32,17 @@ const CameraFormModal: React.FC = ({ isOnline = true, editingCamera, }) => { - const [form] = Form.useForm(); + const [form] = Form.useForm(); const isEditMode = !!editingCamera; // Populate form when editing useEffect(() => { if (open && editingCamera) { form.setFieldsValue({ - name: editingCamera.name || '', - type: editingCamera.cate_id || 'HIKVISION', - account: editingCamera.username || '', - password: editingCamera.password || '', - ipAddress: editingCamera.ip || '', - rtspPort: editingCamera.rtsp_port || 554, - httpPort: editingCamera.http_port || 80, - stream: editingCamera.stream || 0, - channel: editingCamera.channel || 0, + ...editingCamera, + cate_id: editingCamera.cate_id || 'HIKVISION', + rtsp_port: editingCamera.rtsp_port || 554, + http_port: editingCamera.http_port || 80, }); } else if (open) { form.resetFields(); @@ -69,19 +52,12 @@ const CameraFormModal: React.FC = ({ const handleSubmit = async () => { try { const values = await form.validateFields(); - // Convert form values to MasterModel.Camera format + // Values already in MasterModel.Camera format const camera: MasterModel.Camera = { - // Keep existing ID when editing, generate new ID when creating + ...editingCamera, + ...values, + // Ensure ID is set for new cameras id: editingCamera?.id || `cam_${Date.now()}`, - name: values.name, - cate_id: values.type, - ip: values.ipAddress, - rtsp_port: values.rtspPort, - http_port: values.httpPort, - stream: values.stream, - channel: values.channel, - username: values.account, - password: values.password, }; onSubmit(camera); form.resetFields(); @@ -114,9 +90,10 @@ const CameraFormModal: React.FC = ({ form={form} layout="vertical" initialValues={{ - type: 'HIKVISION', - rtspPort: 554, - httpPort: 80, + cate_id: 'HIKVISION', + ip: '192.168.1.10', + rtsp_port: 554, + http_port: 80, stream: 0, channel: 0, }} @@ -131,7 +108,7 @@ const CameraFormModal: React.FC = ({ @@ -158,7 +135,7 @@ const CameraFormModal: React.FC = ({ @@ -168,7 +145,7 @@ const CameraFormModal: React.FC = ({ @@ -177,7 +154,7 @@ const CameraFormModal: React.FC = ({ diff --git a/src/pages/Manager/Device/Camera/components/ConfigCameraV6.tsx b/src/pages/Manager/Device/Camera/components/ConfigCameraV6.tsx index ef80744..76c8d80 100644 --- a/src/pages/Manager/Device/Camera/components/ConfigCameraV6.tsx +++ b/src/pages/Manager/Device/Camera/components/ConfigCameraV6.tsx @@ -24,10 +24,7 @@ const RECORDING_MODES = [ interface CameraV6Props { thing: MasterModel.Thing | null; cameraConfig?: MasterModel.CameraV6 | null; - onSubmit?: (config: { - recordingMode: MasterModel.CameraV6['record_type']; - selectedAlerts: string[]; - }) => void; + onSubmit?: (config: MasterModel.CameraV6) => void; isOnline?: boolean; } @@ -41,7 +38,7 @@ const CameraV6: React.FC = ({ const { initialState } = useModel('@@initialState'); const [selectedAlerts, setSelectedAlerts] = useState([]); const [recordingMode, setRecordingMode] = - useState('none'); + useState('none'); const [alarmConfig, setAlarmConfig] = useState( null, ); @@ -115,8 +112,9 @@ const CameraV6: React.FC = ({ const handleSubmitConfig = () => { onSubmit?.({ - recordingMode, - selectedAlerts, + ...cameraConfig, + record_type: recordingMode, + record_alarm_list: recordingMode === 'alarm' ? selectedAlerts : [], }); }; diff --git a/src/pages/Manager/Device/Camera/index.tsx b/src/pages/Manager/Device/Camera/index.tsx index 72ca7d3..3dbcc30 100644 --- a/src/pages/Manager/Device/Camera/index.tsx +++ b/src/pages/Manager/Device/Camera/index.tsx @@ -22,7 +22,6 @@ const CameraConfigPage = () => { const [cameraConfig, setCameraConfig] = useState( null, ); - const [mqttConnected, setMqttConnected] = useState(false); const [isOnline, setIsOnline] = useState(false); const [editingCamera, setEditingCamera] = useState( null, @@ -43,18 +42,15 @@ const CameraConfigPage = () => { }); const unConnect = mqttClient.onConnect(() => { - console.log('MQTT Connected successfully!'); - setMqttConnected(true); + // MQTT connected }); const unError = mqttClient.onError((error) => { console.error('MQTT Error:', error); - setMqttConnected(false); }); const unClose = mqttClient.onClose(() => { - console.log('MQTT Connection closed'); - setMqttConnected(false); + // MQTT connection closed }); return () => { @@ -140,6 +136,11 @@ const CameraConfigPage = () => { // Core function to send camera config via MQTT const sendCameraConfig = (configPayload: MasterModel.CameraV6) => { + // Skip sending for gmsv5 + if (thing?.metadata?.type === 'gmsv5') { + return true; + } + // Check if device is online if (!isOnline) { message.error('Thiết bị đang ngoại tuyến, không thể gửi cấu hình'); @@ -230,44 +231,20 @@ const CameraConfigPage = () => { }; // Handle recording config submission from ConfigCameraV6 - const handleSubmitConfig = (configPayload: { - recordingMode: MasterModel.CameraV6['record_type']; - selectedAlerts: string[]; - }) => { - // Chỉ gửi record_alarm_list khi record_type = alarm - const fullConfig: MasterModel.CameraV6 = { - cams: cameraConfig?.cams || [], - record_type: configPayload.recordingMode, - ...(configPayload.recordingMode === 'alarm' && { - record_alarm_list: configPayload.selectedAlerts, - }), - }; - - if (sendCameraConfig(fullConfig)) { + const handleSubmitConfig = (configPayload: MasterModel.CameraV6) => { + if (sendCameraConfig(configPayload)) { // Update local state - setCameraConfig(fullConfig); + setCameraConfig(configPayload); } }; // Helper function to determine which camera component to render const renderCameraRecordingComponent = () => { - const thingType = thing?.metadata?.type; - - if (thingType === 'gmsv5') { + if (thing?.metadata?.type === 'gmsv5') { return ; } - if (thingType === 'spole' || thingType === 'gmsv6') { - return ( - - ); - } - + // Default: gmsv6, spole, and other types return (