new ver actionLink page

includes/language/zh.json

@@ -65,6 +65,7 @@
     "ERR0063": "機器序號已存在",
     "ERR0064": "MAC Addr 輸入錯誤",
     "ERR0065": "版本輸入錯誤",
+    "ERR0066": "SNMP Level輸入錯誤",
 
     "ERR7000": "命令執行失敗",
 

route/api/server.js

@@ -53,6 +53,10 @@ router
             if (!arr.data.stype) return n('ERR0009');
             if (!arr.data.sname) return n('ERR0026');
             if (!arr.data.sver) return n('ERR0065');
+            if (arr.data.sver == 'v3' && !arr.data.v3level) return n('ERR0066');
+            if (arr.data.v3level) {
+
+            }
         }
     })
     .all('*', rt.send);

src/components/AdminPage/ActionLinkAddN/Condition/Unit/UnitDigitalInput.js

@@ -0,0 +1,105 @@
+import React from 'react';
+import {Input} from 'semantic-ui-react';
+import {getRequest} from '../../../../../actions';
+
+class UnitDigitalInput extends React.Component {
+    state = {
+        list: [],
+        data: {
+            id: '',
+            op: '',
+            value: ''
+        }
+    }
+
+    componentDidMount(){
+        let {showDialog, toggleLoading} = this.props;
+
+        toggleLoading(1);
+        fetch('/api/system/getselectlist', getRequest({type: 'di'}))
+            .then(response=>response.json())
+            .then(json=>{
+                toggleLoading(0);
+                if(json.status != 1) return showDialog(json.message);
+                this.setState({
+                    list: json.data.record || []
+                })
+            })
+    }
+
+    componentWillReceiveProps(np) {
+        let data = {...this.state.data};
+        if(np.data.id != data.id) data.id = np.data.id;
+        if(np.data.op != data.op) data.op = np.data.op;
+        if(np.data.value != data.value) data.value = np.data.op;
+
+        this.setState({
+            data: {...data}
+        })
+    }
+
+    changeState = (key, value) => {
+        let data = {
+            ...this.state.data
+        }
+        if(key == 'dev') {
+            data.id = value == '' ? '' : `di${value},di_status`;
+        }
+        if(key == 'op'){
+            data.op = value;
+        }
+        if(key == 'value') {
+            data.value = value;
+        }
+
+        this.setState({
+            data: {...data}
+        }, ()=>{ this.sendUpdate() });
+    }
+
+    sendUpdate = () => {
+        this.props.updateData({...this.props.data, ...this.state.data});
+    }
+
+    render() {
+        let {ops} = this.props;
+        let id = '';
+        if(this.state.data.id != '') {
+            let m = this.state.data.id.match(/(\d+)/);
+            if(m != null && m.length > 1){
+                id = m[1];
+            }
+        }
+        return (
+            <div>
+                <select value={id} onChange={e => {this.changeState('dev', e.target.value)}}>
+                    <option value="">選擇裝置</option>
+                    {
+                        this.state.list.map((t,idx) => (
+                            <option key={idx} value={t.id}>{t.name}</option>
+                        ))
+                    }
+                </select>
+                <select value={this.state.data.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 value={t.code} key={idx}>{t.name}</option>
+                                )
+                            }
+                        })
+                    }
+                </select>
+                <select value={this.state.data.value} onChange={e => {this.changeState('value', e.target.value)}}>
+                    <option value="">選擇狀態</option>
+                    <option value="0">0</option>
+                    <option value="1">1</option>
+                </select>
+            </div>
+        )
+    }
+}
+
+export default UnitDigitalInput;

src/components/AdminPage/ActionLinkAddN/Condition/Unit/UnitGroups.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import {Input} from 'semantic-ui-react';
+import {getRequest} from '../../../../../actions';
+
+class UnitGroups extends React.Component {
+
+    render() {
+        let {groups, data, updateData } = this.props;
+        return (
+            <div>
+                <select value={data.dev} onChange={e => {
+                        updateData({...data, dev: e.target.value});
+                    }}>
+                    <option value="">選擇群組</option>
+                    {
+                        Object.keys(groups).map((t,idx) => (
+                            <option key={idx} value={t}>{groups[t].name}</option>
+                        ))
+                    }
+                </select>
+            </div>
+        )
+    }
+}
+
+export default UnitGroups;

src/components/AdminPage/ActionLinkAddN/Condition/Unit/UnitLeone.js

@@ -0,0 +1,117 @@
+import React from 'react';
+import {Input} from 'semantic-ui-react';
+import {getRequest} from '../../../../../actions';
+
+class UnitLeone extends React.Component {
+    state = {
+        list: [],
+        data: {
+            id: '',
+            op: '',
+            mode: '',
+            value: ''
+        }
+    }
+
+    componentDidMount(){
+        let {showDialog, toggleLoading} = this.props;
+
+        toggleLoading(1);
+        fetch('/api/system/getselectlist', getRequest({type: 'leone'}))
+            .then(response=>response.json())
+            .then(json=>{
+                toggleLoading(0);
+                if(json.status != 1) return showDialog(json.message);
+                this.setState({
+                    list: json.data.record || []
+                })
+            })
+    }
+
+    componentWillReceiveProps(np) {
+        let data = {...this.state.data};
+        if(np.data.op != data.op) data.op = np.data.op;
+        if(np.data.value != data.value) data.value = np.data.op;
+
+        let id = np.data.id.split(',')[0];
+        let mode = np.data.id.split(',')[1];
+        if(id != data.id) data.id = id;
+        if(mode != data.mode) data.mode = mode;
+
+        this.setState({
+            data: {...data}
+        })
+    }
+
+    changeState = (key, value) => {
+        let data = {
+            ...this.state.data
+        }
+        if(key == 'dev') {
+            data.id = value == '' ? '' : `le${value}`;
+        }
+        if(key == 'mode'){
+            data.mode = value;
+        }
+        if(key == 'op'){
+            data.op = value;
+        }
+        if(key == 'value') {
+            data.value = value;
+        }
+
+        this.setState({
+            data: {...data}
+        }, ()=>{ this.sendUpdate() });
+    }
+
+    sendUpdate = () => {
+        let data = {...this.state.data};
+        data.id = `${data.id},${data.mode}`;
+        delete data.mode;
+        this.props.updateData({...this.props.data, ...data});
+    }
+
+    render() {
+        let {ops} = this.props;
+        let id = '';
+        if(this.state.data.id != '') {
+            let m = this.state.data.id.match(/(\d+)/);
+            if(m != null && m.length > 1){
+                id = m[1];
+            }
+        }
+        return (
+            <div>
+                <select value={id} onChange={e => {this.changeState('dev', e.target.value)}}>
+                    <option value="">選擇裝置</option>
+                    {
+                        this.state.list.map((t,idx) => (
+                            <option key={idx} value={t.id}>{t.name}</option>
+                        ))
+                    }
+                </select>
+                <select value={this.state.data.mode} onChange={e=>{this.changeState('mode', e.target.value)}}>
+                    <option value="">選擇感測器</option>
+                    <option value="leone_ttrigger1">溫度</option>
+                    <option value="leone_htrigger1">濕度</option>
+                </select>
+                <select value={this.state.data.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 value={t.code} key={idx}>{t.name}</option>
+                                )
+                            }
+                        })
+                    }
+                </select>
+                <Input placeholder="請輸入數值" value={this.state.data.value} onChange={(e, d)=>{this.changeState('value', d.value)}} />
+            </div>
+        )
+    }
+}
+
+export default UnitLeone;

src/components/AdminPage/ActionLinkAddN/Condition/Unit/UnitTime.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import {Input} from 'semantic-ui-react';
+import {getRequest} from '../../../../../actions';
+
+class UnitTime extends React.Component {
+    state = {
+        list: []
+    }
+
+    componentDidMount(){
+        
+    }
+
+    render() {
+        let {ops} = this.props;
+        return (
+            <div>
+                <select>
+                    <option value="">選擇條件</option>
+                    {
+                        ops.map((t,idx) => {
+                            if(t.code != 8 && t.code != 9) {
+                                return (
+                                    <option value={t.code} key={idx}>{t.name}</option>
+                                )
+                            }
+                        })
+                    }
+                </select>
+                <Input size="mini" placeholder="年(不指定請留空)" />
+                <Input size="mini" placeholder="週(不指定請留空)" />
+                <Input size="mini" placeholder="月(不指定請留空)" />
+                <Input size="mini" placeholder="日(不指定請留空)" />
+                <Input size="mini" placeholder="時(不指定請留空)" />
+                <Input size="mini" placeholder="分(不指定請留空)" />
+            </div>
+        )
+    }
+}
+
+export default UnitTime;

src/components/AdminPage/ActionLinkAddN/Condition/Unit/index.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import {Segment, Input, Form} from 'semantic-ui-react';
+import UnitLeone from './UnitLeone';
+import UnitDigitalInput from './UnitDigitalInput';
+import UnitTime from './UnitTime';
+import UnitGroups from './UnitGroups';
+
+class Unit extends React.Component {
+
+    handleChangeUnit = (val) => {
+        this.props.changeUnitType(this.props.id, val);
+    }
+
+    getUnitComponent = () => {
+        
+        let {data, ops, i18n, showDialog, toggleLoading, groups} = this.props;
+
+        switch(data.unit){
+            case 'leone':
+                return <UnitLeone ops={ops} data={data.data} i18n={i18n} showDialog={showDialog} toggleLoading={toggleLoading} updateData={this.updateData} />
+            case 'di':
+                return <UnitDigitalInput ops={ops} data={data.data} i18n={i18n} showDialog={showDialog} toggleLoading={toggleLoading} updateData={this.updateData} />
+            case 'time':
+                return <UnitTime ops={ops} data={data.data} i18n={i18n} showDialog={showDialog} toggleLoading={toggleLoading} updateData={this.updateData} />
+            case 'unit':
+                return <UnitGroups i18n={i18n} data={data.data} groups={groups} updateData={this.updateData} />
+            default: 
+                return null;
+        }
+    }
+
+    updateData = (data) => {
+        this.props.updateData(this.props.id, data);
+    }
+
+    render() {
+        let {ops, id} = this.props;
+        return (
+            <Segment>
+                <Form.Field>
+                    <label>選擇元件</label>
+                    <select value={this.props.data.unit} onChange={e => {
+                            this.handleChangeUnit(e.target.value);
+                        }}>
+                        <option value="">請選擇元件</option>
+                        <option value="leone">LeOne</option>
+                        <option value="di">DigitInput</option>
+                        <option value="time">時間</option>
+                        <option value="unit">已建立群組</option>
+                    </select>
+                </Form.Field>
+                {this.getUnitComponent()}
+            </Segment>
+        )
+    }
+}
+
+export default Unit;

src/components/AdminPage/ActionLinkAddN/Condition/index.js

@@ -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;

src/components/AdminPage/ActionLinkAddN/index.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import {
+    Container,
+    Segment,
+    Form,
+    Input,
+    Button,
+    Checkbox,
+    Grid,
+    Menu,
+    List
+} from 'semantic-ui-react';
+import ConditionField from './Condition';
+
+const stateDefault = ()=>({
+    groups: {
+        "g1":{
+            name: "aaa"
+        },
+        "g2":{
+            name: "bbb"
+        }
+    }
+})
+
+class ActionLinkAdd extends React.Component {
+    state = {
+        ...stateDefault()
+    }
+
+    render() {
+        let {i18n, showDialog, toggleLoading} = this.props;
+        return (
+            <Container>
+                <Menu>
+                    <Menu.Menu position="right">
+                        <Menu.Item content="ShowTree" onClick={()=>{}}/>
+                        <Menu.Item content="Save" onClick={()=>{}}/>
+                    </Menu.Menu>
+                </Menu>
+                <Form as={Segment}>
+                    <Form.Field>
+                        <Checkbox label="啟用連動" />
+                    </Form.Field>
+                    <Form.Field>
+                        <label>建立條件群組</label>
+                        <ConditionField i18n={i18n} showDialog={showDialog} toggleLoading={toggleLoading} groups={this.state.groups} />
+                    </Form.Field>
+                </Form>
+            </Container>
+        )
+    }
+}
+
+export default ActionLinkAdd;

src/containers/AdminPage/ActionLinkAdd.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import { add_dialog_msg, toggle_loading } from '../../actions';
-import ActionLinkAdd from '../../components/AdminPage/ActionLinkAdd';
+import ActionLinkAdd from '../../components/AdminPage/ActionLinkAddN';
 
 const mapStateToProps = (state) => ({
     i18n: state.i18n