122 lines
3.0 KiB
TypeScript
122 lines
3.0 KiB
TypeScript
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;
|