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

import React from 'react';
import {Container, Segment, Input, Form, Button} from 'semantic-ui-react';
import {getRequest} from '../../../actions';
import CalModal from './CalModal';

class ModbusCmdPage extends React.Component {

    state = {
        res: '',
        value: '',
        modal: false
    }

    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 || ''
                })
            });
    }

    renderModal = () => {
        let {i18n} = this.props;
        return (
            this.state.modal ? 
            (
                <CalModal i18n={i18n} onClose={this.closeModal} onSubmit={this.submitModal} />
            ): null
        )
    }

    closeModal = () => {
        this.setState({
            modal: false
        })
    }

    submitModal = (data) => {
        if(!data) return ;
        let {showDialog} = this.props;
        let {r1, r2, s1, s2, val} = data;
        if(!isFinite(r1) || !isFinite(r2) || !isFinite(s1) || !isFinite(s2) || !isFinite(val)) return showDialog('請勿輸入數字以外的內容');

        let value = Math.round(((val - r1) * (s2 - s1)) / (r2 - r1));

        this.setState({
            value
        }, ()=>{this.closeModal()})
    }

    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="請輸入數值" 
                                action={{
                                    content: "數值換算",
                                    basic: true,
                                    type: 'button',
                                    onClick: ()=>{
                                        this.setState({
                                            modal: true
                                        })
                                    }
                                }} 
                                value={this.state.value} 
                                onChange={(e,d) => {this.setState({value: d.value})}}  />
                        </Form.Field>
                        <Button type="submit" content="送出" fluid />
                    </Form>
                </Segment>
                <Segment>
                    {
                        this.state.res.split(/\n/).map((t,idx) => (
                            <div key={idx}>{t}</div>
                        ))
                    }
                </Segment>
                {this.renderModal()}
            </Container>
        )
    }
}

export default ModbusCmdPage;