refactor: streamline camera form handling and update types for better consistency

2026-02-08 14:58:33 +07:00
parent d619534a73
commit 4af34eab3e
4 changed files with 38 additions and 84 deletions
--- 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<CameraFormModalProps> = ({
  isOnline = true,
  editingCamera,
 }) => {
-  const [form] = Form.useForm<CameraFormValues>();
+  const [form] = Form.useForm<MasterModel.Camera>();
  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<CameraFormModalProps> = ({
  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<CameraFormModalProps> = ({
        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<CameraFormModalProps> = ({

        <Form.Item
          label="Loại"
-          name="type"
+          name="cate_id"
          rules={[{ required: true, message: 'Vui lòng chọn loại' }]}
        >
          <Select options={CAMERA_TYPES} />
@@ -139,7 +116,7 @@ const CameraFormModal: React.FC<CameraFormModalProps> = ({

        <Form.Item
          label="Tài khoản"
-          name="account"
+          name="username"
          rules={[{ required: true, message: 'Vui lòng nhập tài khoản' }]}
        >
          <Input placeholder="nhập tài khoản" autoComplete="off" />
@@ -158,7 +135,7 @@ const CameraFormModal: React.FC<CameraFormModalProps> = ({

        <Form.Item
          label="Địa chỉ IP"
-          name="ipAddress"
+          name="ip"
          rules={[{ required: true, message: 'Vui lòng nhập địa chỉ IP' }]}
        >
          <Input placeholder="192.168.1.10" />
@@ -168,7 +145,7 @@ const CameraFormModal: React.FC<CameraFormModalProps> = ({
          <Col span={12}>
            <Form.Item
              label="Cổng RTSP"
-              name="rtspPort"
+              name="rtsp_port"
              rules={[{ required: true, message: 'Vui lòng nhập cổng RTSP' }]}
            >
              <InputNumber style={{ width: '100%' }} min={0} max={65535} />
@@ -177,7 +154,7 @@ const CameraFormModal: React.FC<CameraFormModalProps> = ({
          <Col span={12}>
            <Form.Item
              label="Cổng HTTP"
-              name="httpPort"
+              name="http_port"
              rules={[{ required: true, message: 'Vui lòng nhập cổng HTTP' }]}
            >
              <InputNumber style={{ width: '100%' }} min={0} max={65535} />
--- 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<CameraV6Props> = ({
  const { initialState } = useModel('@@initialState');
  const [selectedAlerts, setSelectedAlerts] = useState<string[]>([]);
  const [recordingMode, setRecordingMode] =
-    useState<MasterModel.CameraV6['record_type']>('none');
+    useState<MasterModel.CameraRecordType>('none');
  const [alarmConfig, setAlarmConfig] = useState<MasterModel.Alarm[] | null>(
    null,
  );
@@ -115,8 +112,9 @@ const CameraV6: React.FC<CameraV6Props> = ({

  const handleSubmitConfig = () => {
    onSubmit?.({
-      recordingMode,
-      selectedAlerts,
+      ...cameraConfig,
+      record_type: recordingMode,
+      record_alarm_list: recordingMode === 'alarm' ? selectedAlerts : [],
    });
  };

--- 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<MasterModel.CameraV6 | null>(
    null,
  );
-  const [mqttConnected, setMqttConnected] = useState(false);
  const [isOnline, setIsOnline] = useState(false);
  const [editingCamera, setEditingCamera] = useState<MasterModel.Camera | null>(
    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 <ConfigCameraV5 thing={thing} />;
    }

-    if (thingType === 'spole' || thingType === 'gmsv6') {
-      return (
-        <ConfigCameraV6
-          thing={thing}
-          cameraConfig={cameraConfig}
-          onSubmit={handleSubmitConfig}
-          isOnline={isOnline}
-        />
-      );
-    }
-
+    // Default: gmsv6, spole, and other types
    return (
      <ConfigCameraV6
        thing={thing}
--- a/src/services/master/typings/camera.d.ts
+++ b/src/services/master/typings/camera.d.ts
@@ -16,8 +16,10 @@ declare namespace MasterModel {
    cams?: Camera[];
  }

+  type CameraRecordType = 'none' | 'alarm' | 'all';
+
  interface CameraV6 extends CameraV5 {
-    record_type?: 'none' | 'alarm' | 'all';
+    record_type?: CameraRecordType;
    record_alarm_list?: string[];
  }