feat: Implement camera management page and device location updates, including API, typings, and routing.

2026-01-26 11:18:36 +07:00
parent 17d246d5ef
commit 1f35516e44
10 changed files with 741 additions and 21 deletions
--- a/src/pages/Manager/Device/components/LocationModal.tsx
+++ b/src/pages/Manager/Device/components/LocationModal.tsx
@@ -0,0 +1,121 @@
+import { useIntl } from '@umijs/max';
+import { Form, Input, Modal } from 'antd';
+import React, { useEffect } from 'react';
+
+interface Props {
+  visible: boolean;
+  device: MasterModel.Thing | null;
+  onCancel: () => void;
+  onSubmit: (values: MasterModel.Thing) => void;
+}
+
+const LocationModal: React.FC<Props> = ({
+  visible,
+  device,
+  onCancel,
+  onSubmit,
+}) => {
+  const [form] = Form.useForm();
+  const intl = useIntl();
+
+  useEffect(() => {
+    if (device) {
+      form.setFieldsValue({
+        lat: device?.metadata?.lat || '',
+        lng: device?.metadata?.lng || '',
+      });
+    } else {
+      form.resetFields();
+    }
+  }, [device, form]);
+
+  return (
+    <Modal
+      title={intl.formatMessage({
+        id: 'master.devices.location.title',
+        defaultMessage: 'Update location',
+      })}
+      open={visible}
+      onCancel={onCancel}
+      onOk={() => form.submit()}
+      okText={intl.formatMessage({
+        id: 'master.devices.ok',
+        defaultMessage: 'OK',
+      })}
+      cancelText={intl.formatMessage({
+        id: 'master.devices.cancel',
+        defaultMessage: 'Cancel',
+      })}
+      destroyOnClose
+    >
+      <Form
+        form={form}
+        layout="vertical"
+        onFinish={(values) => {
+          const payload: MasterModel.Thing = {
+            id: device?.id,
+            name: device?.name,
+            key: device?.key,
+            metadata: {
+              ...device?.metadata,
+              lat: values.lat,
+              lng: values.lng,
+            },
+          };
+          onSubmit(payload);
+        }}
+        preserve={false}
+      >
+        <Form.Item
+          name="lat"
+          label={intl.formatMessage({
+            id: 'master.devices.location.latitude',
+            defaultMessage: 'Latitude',
+          })}
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage({
+                id: 'master.devices.location.latitude.required',
+                defaultMessage: 'Please enter latitude',
+              }),
+            },
+          ]}
+        >
+          <Input
+            placeholder={intl.formatMessage({
+              id: 'master.devices.location.placeholder',
+              defaultMessage: 'Enter data',
+            })}
+          />
+        </Form.Item>
+
+        <Form.Item
+          name="lng"
+          label={intl.formatMessage({
+            id: 'master.devices.location.longitude',
+            defaultMessage: 'Longitude',
+          })}
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage({
+                id: 'master.devices.location.longitude.required',
+                defaultMessage: 'Please enter longitude',
+              }),
+            },
+          ]}
+        >
+          <Input
+            placeholder={intl.formatMessage({
+              id: 'master.devices.location.placeholder',
+              defaultMessage: 'Enter data',
+            })}
+          />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default LocationModal;