webio-node/src/components/AdminPage/ActionLinkAddN/ActionSelect/UnitModbus.js

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

class UnitLeone extends React.Component {
    state = {
        list: [],
        data: {
            dev: '',
            devName: '',
            func: '',
            funcName: '',
            addr: '',
            value: ''
        },
        modal: false
    }

    componentDidMount() {
        let { showDialog } = this.props;
        fetch('/api/system/getselectlist', getRequest({ type: 'modbus' }))
            .then(response => response.json())
            .then(json => {
                if (json.status != 1) return showDialog(json.message);
                this.setState({
                    list: json.data.record || []
                })
            })
    }

    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({
            data:{
                ...this.state.data,
                value
            }
        }, ()=>{this.closeModal()})
    }

    changeState = (tag, value) =>{
        let data = {...this.state.data};

        if(tag == 'func') {
            data.funcName = value.name;
            data.func = value.func;
        }
        if(tag == 'dev'){
            data.dev = value.dev == '' ? '' : `mb${value.dev}`;
            data.devName = value.name;
        }
        if(tag == 'addr'){
            data.addr = value;
        }
        if(tag == 'value'){
            data.value = value;
        }

        this.setState({
            data:{
                ...data
            }
        }, ()=>{
            this.updateData()
        })
    }

    updateData = () => {
        let data = {...this.state.data};
        data.type = 'modbus';

        data.act = `${data.func},${data.addr},${data.value}`;
        data.actName = `${data.funcName} Addr:${data.addr} Value:${data.value}`;

        delete data.func;
        delete data.funcName;
        delete data.addr;
        delete data.value;

        this.props.updateData(data);
    }

    updateAct = (act, name) => {
        this.changeState('act', {act, name});
    }

    render() {
        let {i18n} = this.props;
        let dev = '';
        let m = this.state.data.dev.match(/(\d+)/);
        
        if(m!=null && m.length > 1){
            dev = m[1];
        }
        return (
            <div>
                <Form.Field>
                    <label>選擇裝置</label>
                    <select value={dev} onChange={e=>{
                            let el = e.target;
                            let json = {
                                dev: '',
                                name: ''
                            };

                            json.dev = el.value;
                            json.name = el.options[el.selectedIndex].innerHTML;

                            this.changeState('dev', json);
                        }}>
                        <option value="">選擇裝置</option>
                        {
                            this.state.list.map((t,idx) => (
                                <option key={idx} value={t.id}>{t.name}</option>
                            ))
                        }
                    </select>
                </Form.Field>
                <Form.Field>
                    <label>選擇輸出類型</label>
                    <select value={this.state.data.func} onChange={e=>{
                            let el = e.target;
                            let json = {
                                func: '',
                                name: ''
                            };

                            json.func = el.value;
                            json.name = el.options[el.selectedIndex].innerHTML;

                            this.changeState('func', json);
                        }}>
                        <option value="">輸出類型</option>
                        <option value="5">DigitalOutput</option>
                        <option value="6">AnalogOutput</option>
                    </select>
                </Form.Field>
                <Form.Field>
                    <Input label="輸入位址" value={this.state.data.addr} onChange={(e,d) => {this.changeState('addr', d.value)}} />
                </Form.Field>
                <Form.Field>
                    <Input label="輸入數值" 
                        value={this.state.data.value} 
                        onChange={(e,d) => {this.changeState('value', d.value)}}
                        action={{
                            content:"數值換算",
                            basic: true,
                            onClick: ()=>{
                                this.setState({
                                    modal: true
                                })
                            },
                            type: 'button'
                        }} />
                </Form.Field>
                {this.renderModal()}
            </div>
        )
    }
}

export default UnitLeone;