addlink page fin

config.json

@@ -8,7 +8,7 @@
     "db": {
         "user": "webio",
         "pass": "16055536",
-        "host": "192.168.98.227",
+        "host": "localhost",
         "port": "3306",
         "db1": "jcwebioc",
         "db2": "jciocer",

src/components/AdminPage/ActionLinkAdd/ActionItem.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import {List, Label, Button} from 'semantic-ui-react';
+
+const ActionItem = ({i18n, data, idx, removeAction}) => {
+
+    return (
+        <List.Item>
+            <Label basic content={`裝置名稱`} /><span>{data.devName}</span>
+            <Label basic content={`動作`} /><span>{data.actName}</span>
+            <Button floated="right" color="red" basic size="tiny" content="Delete" type="button" onClick={()=>{
+                    removeAction(idx);
+                }}/>
+        </List.Item>
+    )
+}
+
+export default ActionItem;

src/components/AdminPage/ActionLinkAdd/ActionSelect.js

@@ -0,0 +1,127 @@
+import React from 'react';
+import {Form, Button, Input, Segment} from 'semantic-ui-react';
+
+class ActionSelect extends React.Component{
+    state = {
+        showTemp: false,
+        temp: '0'
+    }
+
+    checkShowTemp = (cmd = '') => {
+        let c = cmd;
+        let cs = c.split(' ');
+        let showTemp = false;
+        if(cs[0] == 2) {
+            showTemp = true;
+        }
+
+        this.setState({
+            showTemp
+        });
+    }
+
+    updateTemp = (temp) => {
+        this.setState({
+            temp
+        })
+    }
+
+    render(){
+        let {i18n,list, unit, getList, addAction} = this.props;
+        let actlist = i18n&&i18n.getResource&&i18n.language ? i18n.getResource(i18n.language + '.translation.action_list') : [];
+        return (
+            <Form.Field>
+                <label>加入動作</label>
+                <Segment color="green" className="clearfix">
+                    <Form.Group inline>
+                        <Form.Field>
+                            <label>選擇裝置</label>
+                            <select ref="devType" onChange={e=>{
+                                    getList(unit, e.target.value);
+                                }}>
+                                <option value="">選擇裝置類型</option>
+                                <option value="do">DigitOutput</option>
+                                <option value="leone">LeOne</option>
+                                <option value="iogroup">IOGroup</option>
+                            </select>
+                        </Form.Field>
+                        <Form.Field>
+                            <select ref="devName">
+                                <option value="">選擇裝置</option>
+                                {
+                                    list.map((t,idx)=>(<option key={idx} value={t.id}>{t.name}</option>))
+                                }
+                            </select>
+                        </Form.Field>
+                    </Form.Group>
+                    <Form.Group inline>
+                        <Form.Field>
+                            <label>選擇動作</label>
+                            <select ref="act" onChange={e=>{
+                                    this.checkShowTemp(e.target.value);
+                                }}>
+                                <option value="">選擇動作</option>
+                                {
+                                    actlist.map((t,idx) => (
+                                        <option key={idx} value={t.cmd}>{t.name}</option>
+                                    ))
+                                }
+                            </select>
+                        </Form.Field>
+                        {
+                            this.state.showTemp ? 
+                            (
+                                <Form.Field>
+                                    <Input size="mini" placeholder="請輸入溫度" value={this.state.temp} onChange={(e,d) => {
+                                        this.updateTemp(d.value);
+                                    }} />
+                                </Form.Field>
+                            ) : null
+                        }
+                    </Form.Group>
+                    <Button floated="right" content="加入動作" size="tiny" basic color="orange" onClick={()=>{
+                            let type = this.refs.devType.value;
+                            let dev = this.refs.devName.value;
+                            let devName = this.refs.devName.options[this.refs.devName.selectedIndex].innerHTML;
+                            let act = this.refs.act.value;
+                            let actName = this.refs.act.options[this.refs.act.selectedIndex].innerHTML;
+                            let temp = this.state.temp;
+                            let prefix = '';
+
+                            switch(type){
+                                case 'do':
+                                    prefix = 'do';
+                                    break;
+                                case 'leone':
+                                    prefix = 'le';
+                                    break;
+                                case 'iogroup': 
+                                    prefix = 'iogroup';
+                                    break;
+                                default: 
+                                    return addAction(null);
+                            }
+
+                            if(!act) return addAction(null);
+                            if(act == 2) {
+                                act = `${act} ${temp}`;
+                                actName += ` ${temp}`;
+                            }
+
+                            let data = {
+                                id: `${prefix}${dev}`,
+                                act,
+                                actName,
+                                devName
+                            };
+
+                            return addAction(data);
+
+                        }} />
+                </Segment>
+            </Form.Field>
+        )
+    }
+}
+
+export default ActionSelect;

src/components/AdminPage/ActionLinkAdd/UnitItem.js

@@ -29,10 +29,98 @@ const ops = [
     }
 ]
 
+const stype = {
+    di: {
+        prefix: 'di',
+        dev: '',
+        op: '',
+        value: '',
+        mode: 'di_status'
+    },
+    leone: {
+        prefix: 'le',
+        dev: '',
+        op: '',
+        value: '',
+        mode: ''
+    },
+    unit: {
+        dev: ''
+    },
+    time: {
+        op: '',
+        dev: 'dt0',
+        mode: 'mode0',
+        year: '-',
+        week: '-',
+        month: '-',
+        day: '-',
+        hour: '-',
+        min: '-'
+    }
+}
+
 class UnitItem extends React.Component {
 
+    state = {
+        st: '',
+        data:{}
+    }
+
+    handleDataChange = (tag, value) => {
+        let {data} = this.state;
+        let {updateData} = this.props;
+        if(tag in data) {
+            data[tag] = value;
+        }
+
+        this.setState({
+            data
+        }, () => {
+            let {data} = this.state
+            let d = {...this.props.data.data}
+            let {st} = this.props.data;
+            
+            if(st == 'di' || st == 'leone'){
+                d.id = `${data.prefix}${data.dev},${data.mode}`;
+                d.op = data.op;
+                d.value = data.value;
+            }
+            if(st == 'unit') {
+                d.dev = data.dev;
+            }
+            if(st == 'time') {
+                d.id = `${data.dev},${data.mode}`;
+                d.op = data.op;
+                d.value = `${data.min}/${data.hour}/${data.day}/${data.month}/${data.week}/${data.year}`;
+            }
+
+            updateData(this.props.unit, d);
+        });
+    }
+
+    componentWillReceiveProps(np) {
+        let data = {...this.state.data};
+        
+        if(np.data.st != this.state.st){
+            
+            if(np.data.st in stype) {
+                data = {...stype[np.data.st]};
+            }else {
+                data = {}
+            }
+            
+        }
+        
+        this.setState({
+            data,
+            st: np.data.st
+        })
+    }
+    
     render() {
         let {unit, data, getList} = this.props;
+        
         return (
             <Grid.Column>
                 <Segment>
@@ -53,7 +141,7 @@ class UnitItem extends React.Component {
                     {  
                         !data.st
                         ? null
-                        : (<UnitPanel data={data}/>)
+                        : (<UnitPanel data={data} state={this.state.data} dataChange={this.handleDataChange}/>)
                     }
                 </Segment>
             </Grid.Column>
@@ -61,12 +149,34 @@ class UnitItem extends React.Component {
     }
 }
 
-const UnitPanel = ({data}) => {
+const UnitPanel = ({data, state, dataChange}) => {
     if (data.st == 'di') {
         return (
             <div>
-                <LC_List data={data} />
+                <select value={state.dev} onChange={(e) => {
-                <select>
+                        dataChange('dev', e.target.value);
+                    }}>
+                    <option value="">選擇裝置</option>
+                    {
+                        data.list.map((t, idx) => (
+                            <option key={idx} value={t.id}>{t.name}</option>
+                        ))
+                    }
+                </select>
+                <select value={state.op} onChange={e => {
+                        dataChange('op', e.target.value);
+                    }}>
+                    <option value="">選擇條件</option>
+                    {
+                        ops.map((t,idx) => {
+                            if(t.code == 8 || t.code == 9) return ;
+                            return (<option key={idx} value={t.code}>{t.name}</option>)
+                        })
+                    }
+                </select>
+                <select value={state.value} onChange={e => {
+                        dataChange('value', e.target.value);
+                    }}>
                     <option value="">選擇狀態</option>
                     <option value="0">0</option>
                     <option value="1">1</option>
@@ -77,20 +187,46 @@ const UnitPanel = ({data}) => {
     if(data.st == 'leone') {
         return (
             <div>
-                <LC_List data={data} />
+                <select value={state.dev} onChange={e => {
-                <select>
+                        dataChange('dev', e.target.value);
+                    }}>
+                    <option value="">選擇裝置</option>
+                    {
+                        data.list.map((t, idx) => (
+                            <option key={idx} value={t.id}>{t.name}</option>
+                        ))
+                    }
+                </select>
+                <select value={state.mode} onChange={e => {
+                        dataChange('mode', e.target.value);
+                    }}>
                     <option value="">選擇感測器</option>
                     <option value="leone_ttrigger1">溫度</option>
                     <option value="leone_htrigger1">濕度</option>
                 </select>
-                <Input size="mini" placeholder="請輸入數值" />
+                <select value={state.op} onChange={e => {
+                        dataChange('op', e.target.value);
+                    }}>
+                    <option value="">選擇條件</option>
+                    {
+                        ops.map((t,idx) => {
+                            if(t.code == 8 || t.code == 9) return ;
+                            return (<option key={idx} value={t.code}>{t.name}</option>)
+                        })
+                    }
+                </select>
+                <Input size="mini" placeholder="請輸入數值" value={state.value} onChange={(e,d) => {
+                        dataChange('value', d.value);
+                    }} />
             </div>
         )
     }
     if(data.st == 'unit') {
         return (
             <div>
-                <select>
+                <select value={state.dev} onChange={e => {
+                        dataChange('dev', e.target.value);
+                    }}>
                     <option value="">選擇群組</option>
                     {
                         data.list.map((t,idx) => (
@@ -101,22 +237,12 @@ const UnitPanel = ({data}) => {
             </div>
         )
     }
-
+    if(data.st == 'time') {
-    return null;
-}
-
-const LC_List = ({data}) => {
         return (
             <div>
-            <select>
+                <select value={state.op} onChange={e => {
-                <option value="">選擇裝置</option>
+                        dataChange('op', e.target.value);
-                {
+                    }}>
-                    data.list.map((t, idx) => (
-                        <option key={idx} value={t.id}>{t.name}</option>
-                    ))
-                }
-            </select>
-            <select>
                     <option value="">選擇條件</option>
                     {
                         ops.map((t,idx) => {
@@ -125,8 +251,29 @@ const LC_List = ({data}) => {
                         })
                     }
                 </select>
+                <Input size="mini" placeholder="年(不指定請留空)" value={state.year == '-' ? '' : state.year} onChange={(e,d) => {
+                        dataChange('year', d.value.length == 0 ? '-' : d.value);
+                    }} />
+                <Input size="mini" placeholder="週(不指定請留空)" value={state.week == '-' ? '' : state.week} onChange={(e,d) => {
+                        dataChange('week', d.value.length == 0 ? '-' : d.value);
+                    }} />
+                <Input size="mini" placeholder="月(不指定請留空)" value={state.month == '-' ? '' : state.month} onChange={(e,d) => {
+                        dataChange('month', d.value.length == 0 ? '-' : d.value);
+                    }} />
+                <Input size="mini" placeholder="日(不指定請留空)" value={state.day == '-' ? '' : state.day} onChange={(e,d) => {
+                        dataChange('day', d.value.length == 0 ? '-' : d.value);
+                    }} />
+                <Input size="mini" placeholder="時(不指定請留空)" value={state.hour == '-' ? '' : state.hour} onChange={(e,d) => {
+                        dataChange('hour', d.value.length == 0 ? '-' : d.value);
+                    }} />
+                <Input size="mini" placeholder="分(不指定請留空)" value={state.min == '-' ? '' : state.min} onChange={(e,d) => {
+                        dataChange('min', d.value.length == 0 ? '-' : d.value);
+                    }} />
             </div>
         )
+    }
+
+    return null;
 }
 
 export default UnitItem;

src/components/AdminPage/ActionLinkAdd/ViewTreeModal.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import {Modal, Form, Button} from 'semantic-ui-react';
+
+const ViewTree = ({i18n, open, data, closeView, removeNode}) => {
+    let seNode = null;
+    let nodeKey = Object.keys(data);
+    return (
+        <Modal open={open} onClose={()=>{closeView()}} >
+            <Modal.Header content="連動群組資料" />
+            <Modal.Content>
+                <Form as="div">
+                    <Form.Group inline>
+                        <Form.Field>
+                            <label>刪除節點</label>
+                            <select ref={node=>seNode=node}>
+                                {
+                                    nodeKey.map((t,idx)=>(
+                                        <option key={idx} value={t}>{data[t].name}</option>
+                                    ))
+                                }
+                            </select>
+                        </Form.Field>
+                        <Form.Field>
+                            <Button type="button" basic size="tiny" content="刪除節點" onClick={()=>{
+                                    if(!seNode) return ;
+                                    removeNode(seNode.value);
+                                }} />
+                        </Form.Field>
+                    </Form.Group>
+                </Form>
+                <pre>
+                    {
+                        JSON.stringify(data, null, 4)
+                    }
+                </pre>
+            </Modal.Content>
+        </Modal>
+    )
+}
+
+export default ViewTree;

src/components/AdminPage/ActionLinkAdd/index.js

@@ -6,15 +6,21 @@ import {
     Input,
     Button,
     Checkbox,
-    Grid
+    Grid,
+    Menu,
+    List
 } from 'semantic-ui-react';
 import {getRequest} from '../../../actions';
 import UnitItem from './UnitItem';
+import ActionSelect from './ActionSelect';
+import ActionItem from './ActionItem';
+import ViewTree from './ViewTreeModal';
 
-const defState = {
+const defState = () => ({
+    gidx: 0,
     groups: {},
-    edit: {
     active: false,
+    edit: {
         name: '',
         type: 'ln',
         op: '',
@@ -28,8 +34,11 @@ const defState = {
             list: [],
             data: {}
         }
-    }
+    },
-}
+    actDevlist: [],
+    items: [],
+    showTree: false
+})
 const gtype = {
     lc: {
         type: 'lc',
@@ -38,19 +47,21 @@ const gtype = {
         value: ''
     },
     ln: {
-        type: 'ln'
+        type: 'ln',
+        dev: ''
     }
 }
 
 class ActionLinkAdd extends React.Component {
     state = {
-        ...defState
+        ...defState()
     }
 
     getSelectList = (unit, type = '') => {
         if (!unit) {
             return;
         }
+        if(unit != 'act'){
             let edit = {
                 ...this.state.edit
             };
@@ -61,7 +72,7 @@ class ActionLinkAdd extends React.Component {
             edit[unit].data = {
                 ...gtype.lc
             }
-        if (type != 'di' && type != 'leone') {
+            if (type != 'di' && type != 'leone' && type != 'unit') {
                 return this.setState({edit});
             }
 
@@ -92,44 +103,248 @@ class ActionLinkAdd extends React.Component {
                 }
                 this.setState({edit})
             }
+        }else{
+            let actDevlist = [];
+            if(!type) {
+                this.setState({
+                    actDevlist
+                });
+                return ;
+            }
+            this.props.toggleLoading(1);
+            fetch('/api/system/getselectlist', getRequest({type}))
+                .then(response => response.json())
+                .then(json => {
+                    if (json.status != 1) 
+                        return this.props.showDialog(json.message);
+                    actDevlist = json.data.record || []
+                    this.setState({
+                        actDevlist
+                    }, ()=>{
+                        this.props.toggleLoading(0);
+                    })
+                })
+        }
+    }
+
+    updateData = (unit, data) => {
+        let {edit} = this.state;
+        if(!(unit in edit)) return ;
+        edit[unit].data = data;
+
+        this.setState({
+            edit
+        })
+    }
+
+    updateEditData = (tag, value) => {
+        let {edit} = this.state;
+        if(tag in edit){
+            edit[tag] = value;
+        }
+
+        this.setState({
+            edit
+        })
+    }
+
+    updateActive = (active = false) => {
+        this.setState({
+            active: active ? 1 : 0
+        })
+    }
+
+    joinUnit = () => {
+        let {edit} = this.state;
+        let {i18n} = this.props;
+        if(!edit.name || edit.op.length == 0 || Object.keys(edit.id1.data).length == 0 || Object.keys(edit.id2.data).length == 0) return this.props.showDialog(i18n&&i18n.t ? i18n.t('tip.input_empty') : '');
+        if(edit.id1.data.type == 'lc' && (edit.id1.data.id.length == 0 || edit.id1.data.op.length == 0 || edit.id1.data.value.length == 0)) return this.props.showDialog(i18n&&i18n.t ? i18n.t('tip.input_empty') : '');
+        if(edit.id2.data.type == 'lc' && (edit.id2.data.id.length == 0 || edit.id2.data.op.length == 0 || edit.id2.data.value.length == 0)) return this.props.showDialog(i18n&&i18n.t ? i18n.t('tip.input_empty') : '');
+        if(edit.id1.data.type == 'ln' && edit.id1.data.dev.length == 0) return this.props.showDialog(i18n&&i18n.t ? i18n.t('tip.input_empty') : '');
+        if(edit.id2.data.type == 'ln' && edit.id2.data.dev.length == 0) return this.props.showDialog(i18n&&i18n.t ? i18n.t('tip.input_empty') : '');
+
+        let unitKey = [];
+        if(edit.id1.data.type == 'lc'){
+            edit.id1 = {
+                ...edit.id1.data
+            }
+        }else if(edit.id1.data.type == 'ln'){
+            unitKey.push(edit.id1.data.dev)
+            edit.id1 = {
+                ...this.state.groups[edit.id1.data.dev]
+            }
+        }
+        if(edit.id2.data.type == 'lc'){
+            edit.id2 = {
+                ...edit.id2.data
+            }
+        }else if(edit.id2.data.type == 'ln'){
+            unitKey.push(edit.id2.data.dev)
+            edit.id2 = {
+                ...this.state.groups[edit.id2.data.dev]
+            }
+        }
+        let groups = {...this.state.groups};
+        for(let i in unitKey){
+            if(unitKey[i] in groups) delete groups[unitKey[i]];
+        }
+
+        groups[`unit${this.state.gidx}`] = {
+            ...edit
+        }
+
+        this.setState({
+            gidx: this.state.gidx+1,
+            groups: {...groups}
+        }, ()=>{
+            this.resetEdit()
+        })
+    }
+
+    resetEdit = () => {
+        this.setState({
+            edit:{
+                ...defState().edit
+            }
+        })
+    }
+
+    addAction = (item) => {
+        if(!item) return this.props.showDialog('動作請選擇完整');
+        let cmds = item.act.split(' ');
+        if(cmds.length != 2) return this.props.showDialog('動作選擇錯誤');
+        if(cmds[0] == 2 && (cmds[1] < 16 || cmds[1] > 30)) return this.props.showDialog('溫度範圍錯誤(16-30)');
+
+        this.setState({
+            items: [...this.state.items, item]
+        })
+    }
+
+    removeAction = (idx) => {
+        let items = [...this.state.items];
+        items.splice(idx, 1);
+        this.setState({
+            items
+        })
+    }
+
+    toggleView = (sw = false) => {
+        this.setState({
+            showTree: sw ? true : false
+        })
+    }
+
+    removeNode = (node) => {
+        if(!node) return ;
+        let groups = {...this.state.groups};
+        if(node in groups){
+            delete groups[node];
+            this.setState({
+                groups: {...groups}
+            })
+        }
+    }
+
+    saveLink = () => {
+        if(Object.keys(this.state.groups).length == 0) return this.props.showDialog('請先建立群組');
+        if(Object.keys(this.state.groups).length > 1) return this.props.showDialog('根節點數量大於一');
+        if(this.state.items.length == 0) return this.props.showDialog('請選擇動作');
+        let json = {
+            active: this.state.active,
+            link: this.state.groups[Object.keys(this.state.groups)[0]],
+            action: ''
+        }
+
+        let acts = this.state.items.map(t => {
+            return `${t.id},${t.act.replace(' ', ',')},0`
+        })
+
+        json.action = acts.join('|')
+
+        this.props.toggleLoading(1);
+        fetch('/api/link/addlink', getRequest(json))
+            .then(response => response.json())
+            .then(json => {
+                this.props.toggleLoading(0);
+                if(json.status != 1) return this.props.showDialog(json.message);
+                this.resetAll();
+            })
+    }
+
+    resetAll = () => {
+        this.setState({
+            ...defState()
+        })
     }
 
     render() {
-
+        let {i18n} = this.props;
         return (
             <Container>
+                <Menu >
+                    <Menu.Menu position="right">
+                        <Menu.Item content="ShowTree" onClick={()=>{
+                                this.toggleView(1)
+                            }}/>
+                        <Menu.Item content="Save" onClick={()=>{
+                                this.saveLink();
+                            }}/>
+                    </Menu.Menu>
+                </Menu>
                 <Form as={Segment}>
                     <Form.Field>
-                        <Checkbox label="啟用連動"/>
+                        <Checkbox label="啟用連動" checked={this.state.active == 1} onChange={(e,d) =>{
+                                this.updateActive(d.checked ? 1 : 0);
+                            }}/>
                     </Form.Field>
                     <Form.Field>
                         <label>建立條件群組</label>
                         <Segment color="red">
                             <Form.Field>
-                                <Input label="節點名稱"/>
+                                <Input label="節點名稱" value={this.state.edit.name} onChange={(e,d) => {
+                                    this.updateEditData('name', d.value);
+                                }}/>
                             </Form.Field>
                             <Form.Field>
                                 <label>觸發條件</label>
-                                <select>
+                                <select value={this.state.edit.op} onChange={(e) => {
+                                        this.updateEditData('op', e.target.value);
+                                    }}>
                                     <option value="">請選擇觸發條件</option>
                                     <option value="8">AND</option>
                                     <option value="9">OR</option>
                                 </select>
                             </Form.Field>
                             <Grid columns={2} padded>
-                                <UnitItem unit="id1" data={this.state.edit.id1} getList={this.getSelectList}/>
+                                <UnitItem unit="id1" data={this.state.edit.id1} getList={this.getSelectList} updateData={this.updateData}/>
-                                <UnitItem unit="id2" data={this.state.edit.id2} getList={this.getSelectList}/>
+                                <UnitItem unit="id2" data={this.state.edit.id2} getList={this.getSelectList} updateData={this.updateData}/>
                             </Grid>
                             <div
                                 style={{
                                 textAlign: 'right'
                             }}>
-                                <Button type="button" basic size="tiny" color="blue" content="加入"/>
+                                <Button type="button" basic size="tiny" color="blue" content="加入" onClick={()=>{
-                                <Button type="button" basic size="tiny" color="green" content="清除"/>
+                                        this.joinUnit();
+                                    }}/>
+                                <Button type="button" basic size="tiny" color="green" content="清除" onClick={()=>{this.resetEdit()}}/>
                             </div>
                         </Segment>
                     </Form.Field>
+                    <ActionSelect i18n={i18n} unit="act" list={this.state.actDevlist} getList={this.getSelectList} addAction={this.addAction} />
+                    <Form.Field>
+                        <label>裝置動作列表</label>
+                        <Segment color="blue">
+                            <List>
+                                {
+                                    this.state.items.map((t,idx) => (
+                                        <ActionItem key={idx} i18n={i18n} data={t} idx={idx} removeAction={this.removeAction}/>
+                                    ))
+                                }
+                            </List>
+                        </Segment>
+                    </Form.Field>
                 </Form>
+                <ViewTree i18n={i18n} data={this.state.groups} open={this.state.showTree} closeView={this.toggleView} removeNode={this.removeNode} />
             </Container>
         )
     }