webio-node/src/components/AdminPage/ModbusCmd/index.js

86 lines
3.5 KiB
JavaScript
Raw Normal View History

2017-03-27 02:07:41 +00:00
import React from 'react';
import {Container, Segment, Input, Form, Button} from 'semantic-ui-react';
import {getRequest} from '../../../actions';
class ModbusCmdPage extends React.Component {
state = {
res: ''
}
handleSubmit = (data) => {
let {i18n} = this.props;
if(data.ip == '' || data.node == '' || data.func == '' || data.addr == '' || data.value == '') return this.props.showDialog(i18n&&i18n.t?i18n.t('tip.input_empty'):'');
this.props.toggleLoading(1);
this.setState({res:''})
fetch('/api/modbus/modbuscmd', getRequest(data))
.then(response=>response.json())
.then(json=>{
this.props.toggleLoading(0);
if(json.status != 1) return this.props.showDialog(json.message);
this.setState({
res: json.data.record[0].msg || ''
})
});
}
render() {
return (
<Container>
<Segment>
<Form onSubmit={(e,d)=>{
e.preventDefault();
this.handleSubmit(d.formData);
}} serializer={e=>{
let json = {
ip: '',
node: '',
func: '',
addr: '',
value: ''
};
let ip = e.querySelector('input[name="ip"]');
if(ip && 'value' in ip) json.ip = ip.value;
let node = e.querySelector('input[name="node"]');
if(node && 'value' in node) json.node = node.value;
let func = e.querySelector('input[name="func"]');
if(func && 'value' in func) json.func = func.value;
let addr = e.querySelector('input[name="addr"]');
if(addr && 'value' in addr) json.addr = addr.value;
let val = e.querySelector('input[name="val"]');
if(val && 'value' in val) json.value = val.value;
return json;
}}>
<Form.Field>
<Input name="ip" label="請輸入IP" defaultValue="127.0.0.1" />
</Form.Field>
<Form.Field>
<Input name="node" label="請輸入節點" />
</Form.Field>
<Form.Field>
<Input name="func" label="請輸入FunctionCode" />
</Form.Field>
<Form.Field>
<Input name="addr" label="請輸入位址" />
</Form.Field>
<Form.Field>
<Input name="val" label="請輸入數值" />
</Form.Field>
<Button type="submit" content="送出" fluid />
</Form>
</Segment>
<Segment>
{
this.state.res.split(/\n/).map((t,idx) => (
<div key={idx}>{t}</div>
))
}
</Segment>
</Container>
)
}
}
export default ModbusCmdPage;