new version addlink page

src/components/AdminPage/ActionLinkAddN/ActionSelect/UnitDigitalOutput.js

@@ -34,7 +34,7 @@ class UnitLeone extends React.Component {
             data.act = value.act;
         }
         if(tag == 'dev'){
-            data.dev = value.dev == '' ? '' : `le${value.dev}`;
+            data.dev = value.dev == '' ? '' : `do${value.dev}`;
             data.devName = value.name;
         }
 

src/components/AdminPage/ActionLinkAddN/ActionSelect/UnitIOGroup.js

@@ -34,7 +34,7 @@ class UnitLeone extends React.Component {
             data.act = value.act;
         }
         if(tag == 'dev'){
-            data.dev = value.dev == '' ? '' : `le${value.dev}`;
+            data.dev = value.dev == '' ? '' : `iogroup${value.dev}`;
             data.devName = value.name;
         }
 

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

@@ -127,7 +127,7 @@ class ConditionField extends React.Component {
         addNewGroup({
             name: this.state.name,
             op: this.state.op,
-            type: 'lc',
+            type: 'ln',
             id1: id1.data,
             id2: id2.data
         }, this.clearField);

src/components/AdminPage/ActionLinkAddN/ShowTree.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Modal, Header, Button, Form } from 'semantic-ui-react';
+
+const ShowTree = ({ i18n, open, data, onClose, delItem }) => {
+
+    return (
+        <Modal open={open} onClose={()=>{onClose(0)}}>
+            <Modal.Header content="連動群組資料" />
+            <Modal.Content>
+                <Form onSubmit={(e,d)=>{
+                        e.preventDefault();
+                        delItem(d.formData.key);
+                    }} serializer={e=>{
+                        let json = {key:''};
+                        let key = e.querySelector('select[name="key"]');
+                        if(key && 'value' in key) json.key = key.value;
+
+                        return json;
+                    }}>
+                    <Form.Group inline>
+                        <Form.Field>
+                            <label>選擇要刪除的群組</label>
+                            <select name="key">
+                                <option value="">選擇群組</option>
+                                {
+                                    Object.keys(data).map((t,idx) => (
+                                        <option key={idx} value={t}>{data[t].name}</option>
+                                    ))
+                                }
+                            </select>
+                        </Form.Field>
+                        <Form.Field>
+                            <Button type="submit" basic size="mini" content="刪除群組" />
+                        </Form.Field>
+                    </Form.Group>
+                </Form>
+                <pre>
+                    {
+                        JSON.stringify(data, null, 4)
+                    }
+                </pre>
+            </Modal.Content>
+        </Modal>
+    )
+}
+
+export default ShowTree;

src/components/AdminPage/ActionLinkAddN/index.js

@@ -10,15 +10,18 @@ import {
     Menu,
     List
 } from 'semantic-ui-react';
+import {getRequest} from '../../../actions';
 import ConditionField from './Condition';
 import ActionSelect from './ActionSelect';
 import ActionList from './ActionList';
+import ShowTree from './ShowTree';
 
 const stateDefault = ()=>({
     groups: {},
     idx: 0,
     active: 0,
-    actions: []
+    actions: [],
+    showTree: false
 })
 
 class ActionLinkAdd extends React.Component {
@@ -76,14 +79,66 @@ class ActionLinkAdd extends React.Component {
         })
     }
 
+    toggleShowTree = (flag) => {
+        this.setState({
+            showTree: flag ? true : false
+        })
+    }
+
+    delGroup = (key) => {
+        if(!key) return ;
+        let {groups} = this.state;
+        if(key in groups) delete groups[key];
+
+        this.setState({
+            groups
+        })
+    }
+
+    saveLink = () => {
+        let {showDialog, toggleLoading} = this.props;
+        if(this.state.actions.length == 0) return showDialog('請至少加入一個動作');
+        if(Object.keys(this.state.groups).length == 0) return showDialog('請建立群組');
+        if(Object.keys(this.state.groups).length > 1) return showDialog('根群組數量大於一，請合併或刪除');
+
+        let data = {
+            active: this.state.active,
+            action: '',
+            link: {}
+        }
+
+        let act = [];
+        for(let i in this.state.actions) {
+            let tmp = this.state.actions[i];
+            act.push(`${tmp.dev},${tmp.act},0`);
+        }
+
+        data.action = act.join('|');
+
+        data.link = this.state.groups[Object.keys(this.state.groups)[0]];
+
+        fetch('/api/link/addlink', getRequest(data))
+            .then(response=>response.json())
+            .then(json=>{
+                if(json.status != 1) return showDialog(json.message);
+                this.resetData()
+            })
+    }
+
+    resetData = ()=>{
+        this.setState({
+            ...stateDefault()
+        })
+    }
+
     render() {
         let {i18n, showDialog, toggleLoading} = this.props;
         return (
             <Container>
                 <Menu>
                     <Menu.Menu position="right">
-                        <Menu.Item content="ShowTree" onClick={()=>{ console.log(this.state) }}/>
-                        <Menu.Item content="Save" onClick={()=>{}}/>
+                        <Menu.Item content="ShowTree" onClick={()=>{ this.toggleShowTree(1) }}/>
+                        <Menu.Item content="Save" onClick={()=>{this.saveLink()}}/>
                     </Menu.Menu>
                 </Menu>
                 <Form as={Segment}>
@@ -110,6 +165,7 @@ class ActionLinkAdd extends React.Component {
                         <ActionList i18n={i18n} list={this.state.actions} removeAction={this.removeAction} />
                     </Form.Field>
                 </Form>
+                <ShowTree i18n={i18n} open={this.state.showTree} data={this.state.groups} onClose={this.toggleShowTree} delItem={this.delGroup} />
             </Container>
         )
     }