webio-node/src/components/AdminPage/ActionLinkAddN/Condition/index.js

import React from 'react';
import { Segment, Input, Button, Form, Grid } from 'semantic-ui-react';
import Unit from './Unit';

const ops = [
    {
        "code": "0",
        "name": "等於"
    }, {
        "code": "1",
        "name": "大於"
    }, {
        "code": "2",
        "name": "小於"
    }, {
        "code": "3",
        "name": "大於等於"
    }, {
        "code": "4",
        "name": "小於等於"
    }, {
        "code": "5",
        "name": "不等於"
    }, {
        "code": "8",
        "name": "AND"
    }, {
        "code": "9",
        "name": "OR"
    }
];

const stateDefault = () => ({
    id1: {
        unit: '',
        data: {}
    },
    id2: {
        unit: '',
        data: {}
    },
    name: '',
    op: ''
})

const lcDef = () => ({
    type: 'lc',
    id: '',
    op: '',
    value: ''
})

const lnDef = () => ({
    type: 'ln',
    dev: ''
})

class ConditionField extends React.Component {
    state = {
        ...stateDefault()
    }

    changeUnitType = (id, type) => {
        let st = this.state;
        if(id in st){
            st[id].unit = type;
            if(type == ''){
                st[id].data = {}
            }else if(type == 'unit'){
                st[id].data = {...lnDef()}
            }else {
                st[id].data = {...lcDef()}
            }
            this.setState({
                ...st
            })
        }
    }

    updateData = (id, data) => {
        let st = this.state;
        if(id in st) {
            st[id].data = data;
            this.setState({
                ...st
            })
        }
    }

    clearField = () => {
        this.setState({
            ...stateDefault()
        })
    }

    joinGroup = () => {
        let id1 = {...this.state.id1};
        let id2 = {...this.state.id2};
        let {showDialog, addNewGroup} = this.props;
        if(!('type' in id1.data)){
            showDialog('請選擇元件');
        }else{
            if(id1.data.type == 'lc') {
                let chk = this.checkLC(id1.data);
                if(chk.status != 1) return showDialog(chk.message); 
            }else{
                let chk = this.checkLN(id1.data);
                if(chk.status != 1) return showDialog(chk.message); 
            }
        }

        if(!('type' in id2.data)){
            showDialog('請選擇元件');
        }else{
            if(id2.data.type == 'lc') {
                let chk = this.checkLC(id2.data);
                if(chk.status != 1) return showDialog(chk.message); 
            }else{
                let chk = this.checkLN(id2.data);
                if(chk.status != 1) return showDialog(chk.message); 
            }
        }

        if(!this.state.op) return showDialog('請選擇條件');
        if(!this.state.name) return showDialog('請輸入名稱');

        addNewGroup({
            name: this.state.name,
            op: this.state.op,
            type: 'ln',
            id1: id1.data,
            id2: id2.data
        }, this.clearField);
    }

    changeState = (tag, value) => {
        if(!tag) return ;
        if(tag == 'name'){
            this.setState({
                name: value
            })
        }
        if(tag == 'op'){
            this.setState({
                op: value
            })
        }
    }

    checkLC = (data) => {
        let json = {
            status: 0,
            message: ''
        };
        if(typeof data != 'object' || Object.keys(data).length == 0) return {...json, message: '請選擇元件'};
        if(!data.id) return {...json, message: '請選擇裝置'};
        if(!('op' in data) || data.op == '') return {...json, message: '請選擇條件'};
        if(!('value' in data) || data.value == '') return {...json, message: '請輸入數值'};
        return {...json, status: 1}
    }

    checkLN = (data) => {
        let json = {
            status: 0,
            message: ''
        };
        if(typeof data != 'object' || Object.keys(data).length == 0) return {...json, message: '請選擇元件'};
        if(!data.dev) return {...json, message: '請選擇群組'};
        return {...json, status: 1};
    }

    render() {
        let {i18n, showDialog, toggleLoading} = this.props;
        return (
            <Segment color="red">
                <Form.Field>
                    <Input label="節點名稱" value={this.state.name} onChange={(e,d)=>{ this.changeState('name', d.value) }} />
                </Form.Field>
                <Form.Field>
                    <label>觸發條件</label>
                    <select value={this.state.op} onChange={e=>{this.changeState('op', e.target.value)}}>
                        <option value="">請選擇觸發條件</option>
                        {
                            ops.map((t,idx) => {
                                if(t.code == 8 || t.code == 9) {
                                    return (
                                        <option key={idx} value={t.code}>{t.name}</option>
                                    )
                                }
                            })
                        }
                    </select>
                </Form.Field>
                <Grid columns={2} padded>
                    <Grid.Column>
                        <Unit i18n={i18n} id="id1" 
                            data={this.state.id1} 
                            groups={this.props.groups} 
                            ops={ops} 
                            toggleLoading={toggleLoading} 
                            showDialog={showDialog} 
                            updateData={this.updateData}
                            changeUnitType={this.changeUnitType}/>
                    </Grid.Column>
                    <Grid.Column>
                        <Unit i18n={i18n} id="id2" 
                            data={this.state.id2} 
                            groups={this.props.groups} 
                            ops={ops} 
                            toggleLoading={toggleLoading} 
                            showDialog={showDialog} 
                            updateData={this.updateData}
                            changeUnitType={this.changeUnitType}/>
                    </Grid.Column>
                </Grid>
                <div style={{textAlign: 'right'}}>
                    <Button content="加入" basic size="mini" color="blue" onClick={()=>{this.joinGroup()}} />
                    <Button content="清除" basic size="mini" color="red" onClick={()=>{this.clearField()}} />
                </div>
            </Segment>
        )
    }
}

export default ConditionField;