new ver actionLink page

2017-04-14 18:09:20 +08:00
parent 29a5543c44
commit 12ff3a4020
11 changed files with 1638 additions and 1249 deletions
@@ -0,0 +1,151 @@
+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: {}
+    }
+})
+
+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 = () => {
+        console.log(this.state);
+    }
+
+    render() {
+        let {i18n, showDialog, toggleLoading} = this.props;
+        return (
+            <Segment color="red">
+                <Form.Field>
+                    <Input label="節點名稱" />
+                </Form.Field>
+                <Form.Field>
+                    <label>觸發條件</label>
+                    <select>
+                        <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;