55 lines
1.6 KiB
JavaScript
55 lines
1.6 KiB
JavaScript
import React from 'react';
|
|
import {Modal, Form, Input, Grid, Button} from 'semantic-ui-react';
|
|
|
|
const ModbusModal = ({i18n, open, type, data, onSubmit, onClose}) => {
|
|
if(!i18n || Object.keys(i18n).length == 0) return null;
|
|
|
|
return (
|
|
<Modal open={open}>
|
|
<Modal.Header content={type == 1 ? '修改裝置' : '新增裝置'} />
|
|
<Modal.Content>
|
|
<Form onSubmit={(e, d) => {
|
|
e.preventDefault();
|
|
onSubmit(type, d.formData);
|
|
}} serializer={e => {
|
|
let json = {
|
|
name: '',
|
|
node: '',
|
|
type: '',
|
|
id: data.uid || '',
|
|
original_node: data.node || ''
|
|
};
|
|
|
|
let n = e.querySelector('input[name="name"]');
|
|
if(n && 'value' in n) json.name = n.value;
|
|
let nn = e.querySelector('input[name="node"]');
|
|
if(nn && 'value' in nn) json.node = nn.value;
|
|
let type = e.querySelector('input[name="type"]');
|
|
if(type && 'value' in type) json.type = type.value;
|
|
|
|
return json ;
|
|
}}>
|
|
<Form.Field>
|
|
<Input name="name" defaultValue={data.name || ''} label="Name"/>
|
|
</Form.Field>
|
|
<Form.Field>
|
|
<Input name="node" defaultValue={data.node} label="Node"/>
|
|
</Form.Field>
|
|
<Form.Field>
|
|
<Input name="type" defaultValue={data.type} label="Type" placeholder="預設請留空"/>
|
|
</Form.Field>
|
|
<Grid columns={2}>
|
|
<Grid.Column>
|
|
<Button content="Submit" fluid type="submit" />
|
|
</Grid.Column>
|
|
<Grid.Column>
|
|
<Button content="Cancel" fluid type="button" onClick={()=>{onClose()}} />
|
|
</Grid.Column>
|
|
</Grid>
|
|
</Form>
|
|
</Modal.Content>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export default ModbusModal; |