Merge branch 'master' into release

.gitignore

@@ -1 +1,3 @@
 node_modules
+public/js/admin_bundle.js
+public/js/index_bundle.js

VERSION

@@ -1 +1 @@
-webio-v0.0.2
+wristband-v0.0.1

app.js

@@ -7,6 +7,7 @@ const logger = require('morgan');
 const path = require('path');
 const config = require('./config');
 const so = require('./includes/storeObject');
+const exec = require('child_process').exec;
 
 const app = express();
 
@@ -57,3 +58,21 @@ app.get('/servcmd', (req, res) => {
     res.send({ status: `exit time ${Date.now()}` });
     setTimeout(() => { process.exit(1) }, 2000);
 });
+
+app.get('/fixmysql', (req, res) => {
+    exec('systemctl stop mysqld', (err, sout, serr) => {
+        let cmd = 'rm /home/www/mydb/aria*';
+        let json = {
+            rm: '',
+            restart: ''
+        };
+        exec(cmd, (err, stdout, stderr) => {
+            let cmd = 'systemctl restart mysqld';
+            json.rm = stdout;
+            exec(cmd, (err, sout, serr) => {
+                json.restart = sout;
+                res.send(json);
+            })
+        })
+    })
+});

config.json

@@ -29,11 +29,11 @@
         "iogroup": true,
         "iocmd": true,
         "schedule": true,
-        "modbus": true,
+        "modbus": false,
         "link": true,
-        "ipcam": true,
+        "ipcam": false,
         "wristband": true,
-        "server": true
+        "server": false
     },
     "cmdpath": {
         "manualip": "/home/www/cmd/manualip",

includes/language/zh.json

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

route/api/modbus.js

@@ -543,6 +543,7 @@ router
         if (!('func' in arr.data) || arr.data.func.length == 0) return n('ERR0055');
         if (!('addr' in arr.data) || arr.data.addr.length == 0) return n('ERR0048');
         if (!('value' in arr.data) || arr.data.value.length == 0) return n('ERR0049');
+        if (arr.data.value > 65535) return n('ERR0049');
 
         let cmd = `mbtcpm ${arr.data.ip} ${arr.data.node} ${arr.data.func} ${arr.data.addr} ${arr.data.value}`;
         res.api_res = {
@@ -590,6 +591,98 @@ router
             n();
         })
     })
+    .post('/getmodbustype', (req, res, n) => {
+        if (!config.permission.modbus) return n('ERR9000');
+        let arr = req.body;
+        if (!arr.data) return n('ERR0000');
+        if (!arr.data.id) return n('ERR0028');
+
+        let query = "select io.`type` \
+            from ??.?? io \
+            left join ??.?? dev \
+            on dev.`uid` = io.`devuid` \
+            where \
+            dev.`uid` = ? \
+            group by io.`type` \
+            order by io.`type` ";
+        let param = [config.db.db5, 'iolist', config.db.db5, 'device', arr.data.id];
+
+        res.db.query(query, param, (err, row) => {
+            if (err) return rt.err(res, err, n, 'ERR8000');
+
+            res.api_res = {
+                record: tool.checkArray(row)
+            }
+
+            n();
+        })
+    })
+    .post('/getmodbusport', (req, res, n) => {
+        if (!config.permission.modbus) return n('ERR9000')
+        let arr = req.body;
+        if (!arr.data) return n('ERR0000');
+        if (!arr.data.id) return n('ERR0028');
+        if (!arr.data.type) return n('ERR0009');
+
+        let type = arr.data.type;
+        if (type == 5) type = 1;
+        if (type == 6) type = 3;
+
+        if (type == 3 || type == 4) {
+            let query = "select a.`name`, a.`portnum` \
+                from ??.?? a \
+                left join ??.?? io \
+                on io.`uid` = a.`iouid` \
+                left join ??.?? dev \
+                on dev.`uid` = io.`devuid` \
+                where \
+                io.`type` = ? \
+                and dev.`uid` = ? ";
+            let param = [config.db.db5, 'aioset', config.db.db5, 'iolist', config.db.db5, 'device', type, arr.data.id];
+
+            res.db.query(query, param, (err, row) => {
+                if (err) return rt.err(res, err, n, 'ERR8000');
+
+                res.api_res = {
+                    record: tool.checkArray(row)
+                }
+
+                n();
+            });
+            return;
+        }
+
+        if (type == 1 || type == 2) {
+            let query = "select * \
+                from ??.?? io \
+                left join ??.?? dev \
+                on dev.`uid` = io.`devuid` \
+                where \
+                dev.`uid` = ? \
+                and io.`type` = ?";
+            let param = [config.db.db5, 'iolist', config.db.db5, 'device', arr.data.id, type];
+
+            res.db.query(query, param, (err, row) => {
+                if (err) return rt.err(res, err, n, 'ERR8000');
+                let arr = [];
+                let num = 0;
+                for (let i in row) {
+                    num += parseInt(row[i].num);
+                }
+                for (let i = 0; i < num; i++) {
+                    arr.push({ portnum: (i + 1), name: '' })
+                }
+
+                res.api_res = {
+                    record: arr
+                }
+                n();
+            })
+            return;
+        }
+
+        return n('ERR0009');
+    })
     .all('*', rt.send);
 
 module.exports = router;

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

route/api/wristband.js

@@ -131,8 +131,9 @@ router
         let query = "select w.`name`, w.`mac` as wristband, \
             coalesce(l.`name`, l2.`name`) as locname, \
             coalesce(case when tmp2.`wlocrtloc` = 'NG' then null else tmp2.`wlocrtloc` end, ll.`devid`) as locid, \
-            ll.*\
+            case when tmp2.`wlocrtloc` = 'NG' then 1 else 0 end as loss, \
-            from ??.?? w\
+            ll.* \
+            from ??.?? w \
             left join ??.?? tmp2 \
             on tmp2.`wlocrtmac` = w.`mac` \
             left join ??.?? ll \
@@ -354,6 +355,50 @@ router
             .catch(err => rt.err(res, err, n, 'ERR8000'));
 
     })
+    .post('/getwristbandhealthinfo', (req, res, n) => {
+        if (!config.permission.wristband) return n('ERR9000');
+        let arr = req.body;
+        if (!arr.data) return n('ERR0000');
+        if (!arr.data.mac) return n('ERR0060');
+        if (!arr.data.stime || !arr.data.etime) return n('ERR0015');
+
+        let pros = [];
+        let query = "select log.* \
+            from ??.?? log \
+            where \
+            log.`wphylogmac` = ? \
+            and log.`wphylogtst` >= ? \
+            and log.`wphylogtst` <= ? \
+            order by log.`wphylogtst` desc";
+        let param = [config.db.db9, 'wphylog', arr.data.mac, arr.data.stime, arr.data.etime];
+        pros.push(tool.promiseQuery(res, query, param, 'record'));
+
+        let rtq = "select * from ??.?? where `mac` = ?";
+        let rtp = [config.db.db9, 'wristband', arr.data.mac];
+        pros.push(tool.promiseQuery(res, rtq, rtp, 'rt'));
+
+        res.api_res = {
+            record: [],
+            rt: {
+                wristband: []
+            }
+        }
+
+        Promise.all(pros)
+            .then(d => {
+                for (let i in d) {
+                    let tmp = d[i];
+                    if (tmp.key == 'rt') {
+                        res.api_res.rt.wristband = tool.checkArray(tmp.data);
+                    }
+                    if (tmp.key == 'record') {
+                        res.api_res.record = tool.checkArray(tmp.data);
+                    }
+                }
+                return n();
+            })
+            .catch(err => rt.err(res, err, n, 'ERR8000'));
+    })
     .post('/getlocationlist', (req, res, n) => {
         if (!config.permission.wristband) return n('ERR9000');
 

src/actions/index.js

@@ -3,7 +3,7 @@
  * @param {string} msg 
  * @param {function} act 
  */
-export const add_dialog_msg =(msg, act) => ({
+export const add_dialog_msg = (msg, act) => ({
     type: 'dialog_addmsg',
     msg: msg,
     act: act || null
@@ -16,6 +16,16 @@ export const remove_dialog_msg = () => ({
     type: 'dialog_remove_first'
 });
 
+export const add_confirm = (msg, act = null) => ({
+    type: 'confirm_addmsg',
+    msg,
+    act
+})
+
+export const remove_confirm = () => ({
+    type: 'confirm_remove'
+})
+
 /**
  * set i18next object
  * @param {object} i18n i18next object
@@ -52,12 +62,12 @@ export const getRequest = (data = {}) => {
             'Accept': 'application/json',
             'Content-Type': 'application/json'
         },
-		mode:'cors'
+        mode: 'cors'
     };
     let token = sessionStorage.getItem('token');
-	if(token) json.headers['x-auth-token'] = token;
+    if (token) json.headers['x-auth-token'] = token;
 
-	json.body = JSON.stringify({data});
+    json.body = JSON.stringify({ data });
 
     return json;
 }
@@ -68,11 +78,11 @@ export const get_network_info = () => dispatch => {
         .then(response => response.json())
         .then(json => {
             dispatch(toggle_loading(0));
-			if(json.status != 1){
+            if (json.status != 1) {
                 return dispatch(add_dialog_msg(json.message));
             }
             let j = {};
-			if('data' in json && 'record' in json.data && json.data.record.length > 0) j = json.data.record[0];
+            if ('data' in json && 'record' in json.data && json.data.record.length > 0) j = json.data.record[0];
             return dispatch(network_info(j));
         });
 }
@@ -87,7 +97,7 @@ export const set_network_info = (dhcpMode, ip, netmask, gateway, dns) => dispatc
     let type = dhcpMode ? 'dhcp' : 'manual';
     let req = getRequest();
     let json = {
-		data:{
+        data: {
             type,
             ip,
             netmask,
@@ -100,7 +110,7 @@ export const set_network_info = (dhcpMode, ip, netmask, gateway, dns) => dispatc
         .then(response => response.json())
         .then(json => {
             dispatch(toggle_loading(0));
-			if(json.status != 1) return dispatch(add_dialog_msg(json.message));
+            if (json.status != 1) return dispatch(add_dialog_msg(json.message));
             return dispatch(get_network_info());
         });
 }
@@ -111,11 +121,11 @@ export const get_system_time = () => dispatch => {
         .then(response => response.json())
         .then(json => {
             dispatch(toggle_loading(0));
-			if(json.status != 1){
+            if (json.status != 1) {
                 return dispatch(add_dialog_msg(json.message));
             }
             let t = '';
-			if('data' in json && 'record' in json.data && json.data.record.length > 0) t = json.data.record[0].time;
+            if ('data' in json && 'record' in json.data && json.data.record.length > 0) t = json.data.record[0].time;
             return dispatch(system_time(t));
         });
 }
@@ -127,12 +137,12 @@ const system_time = (time) => ({
 
 export const set_system_time = time => dispatch => {
     dispatch(toggle_loading(1));
-	let req = getRequest({time});
+    let req = getRequest({ time });
     return fetch('/api/system/updatetime', req)
         .then(response => response.json())
         .then(json => {
             dispatch(toggle_loading(0));
-			if(json.status != 1) return dispatch(add_dialog_msg(json.message));
+            if (json.status != 1) return dispatch(add_dialog_msg(json.message));
             return dispatch(get_system_time());
         });
 }
@@ -144,7 +154,7 @@ export const get_user_list = () => dispatch => {
         .then(response => response.json())
         .then(json => {
             dispatch(toggle_loading(0));
-			if(json.status != 1) return dispatch(add_dialog_msg(json.message));
+            if (json.status != 1) return dispatch(add_dialog_msg(json.message));
             return dispatch(user_list(json.data.record));
         });
 }
@@ -161,7 +171,7 @@ const userApi = (url, data = {}) => dispatch => {
         .then(response => response.json())
         .then(json => {
             dispatch(toggle_loading(0));
-			if(json.status != 1) return dispatch(add_dialog_msg(json.message));
+            if (json.status != 1) return dispatch(add_dialog_msg(json.message));
             return dispatch(get_user_list());
         });
 }
@@ -184,7 +194,7 @@ export const get_dio_info = () => dispatch => {
         .then(response => response.json())
         .then(json => {
             dispatch(toggle_loading(0));
-			if(json.status != 1) return dispatch(add_dialog_msg(json.message));
+            if (json.status != 1) return dispatch(add_dialog_msg(json.message));
             return dispatch(dioinfo(json.data.rt.do || [], json.data.rt.di || []));
         });
 }
@@ -193,7 +203,7 @@ export const get_dio_status = () => dispatch => {
     return fetch('/api/dio/getio', getRequest())
         .then(response => response.json())
         .then(json => {
-			if(json.status != 1) return dispatch(add_dialog_msg(json.message));
+            if (json.status != 1) return dispatch(add_dialog_msg(json.message));
             return dispatch(diostatus(json.data.rt.do, json.data.rt.di));
         });
 }
@@ -202,7 +212,7 @@ export const set_do_status = (data) => dispatch => {
     return fetch('/api/dio/dotrun', getRequest(data))
         .then(response => response.json())
         .then(json => {
-			if(json.status != 1) return dispatch(add_dialog_msg(json.message));
+            if (json.status != 1) return dispatch(add_dialog_msg(json.message));
         })
 }
 
@@ -212,7 +222,7 @@ export const set_dio_info = (data) => dispatch => {
         .then(response => response.json())
         .then(json => {
             dispatch(toggle_loading(0));
-			if(json.status != 1) return dispatch(add_dialog_msg(json.message));
+            if (json.status != 1) return dispatch(add_dialog_msg(json.message));
             return dispatch(get_dio_info());
         })
 }
@@ -229,11 +239,11 @@ const dioinfo = (dod, did) => ({
 
 export const get_log_list = (p = 1) => dispatch => {
     dispatch(toggle_loading(1));
-	return fetch('/api/log/getlog', getRequest({p}))
+    return fetch('/api/log/getlog', getRequest({ p }))
         .then(response => response.json())
         .then(json => {
             dispatch(toggle_loading(0));
-			if(json.status != 1) return dispatch(add_dialog_msg(json.message));
+            if (json.status != 1) return dispatch(add_dialog_msg(json.message));
             return dispatch(loglist(json.data.record, json.data.page));
         });
 }
@@ -251,9 +261,9 @@ export const scan_leone = (data) => (dispatch, getState) => {
         .then(response => response.json())
         .then(json => {
             dispatch(toggle_loading(0));
-			if(json.status != 1) return dispatch(add_dialog_msg(json.message));
+            if (json.status != 1) return dispatch(add_dialog_msg(json.message));
-			let {i18n} = getState();
+            let { i18n } = getState();
-			if(json.data.record.length == 0) return dispatch(add_dialog_msg(i18n&&i18n.t? i18n.t('tip.scan_empty') : ''));
+            if (json.data.record.length == 0) return dispatch(add_dialog_msg(i18n && i18n.t ? i18n.t('tip.scan_empty') : ''));
             return dispatch(show_scan_leone(json.data.record));
         })
 }
@@ -264,7 +274,7 @@ export const clear_scan_leone = (clrRemote = false) => dispatch => {
     return fetch('/api/leone/clearscanleone', getRequest())
         .then(response => response.json())
         .then(json => {
-			return ;
+            return;
         });
 }
 
@@ -276,18 +286,18 @@ export const add_scan_leone = (data) => dispatch => {
         .then(json => {
             dispatch(toggle_loading(0));
             dispatch(clear_scan());
-			if(json.status != 1) return dispatch(add_dialog_msg(json.message));
+            if (json.status != 1) return dispatch(add_dialog_msg(json.message));
             return dispatch(get_leone_list());
         })
 }
 
 export const get_leone_list = (showLoading = true) => dispatch => {
-	if(showLoading) dispatch(toggle_loading(1));
+    if (showLoading) dispatch(toggle_loading(1));
     return fetch('/api/leone/getleonelist', getRequest())
         .then(response => response.json())
         .then(json => {
             dispatch(toggle_loading(0));
-			if(json.status != 1) return dispatch(add_dialog_msg(json.message));
+            if (json.status != 1) return dispatch(add_dialog_msg(json.message));
             return dispatch(leone_list(json.data.record, json.data.rt.status));
         });
 }
@@ -310,7 +320,7 @@ const leone_api = (url, data) => dispatch => {
         .then(response => response.json())
         .then(json => {
             dispatch(toggle_loading(0));
-			if(json.status != 1) return dispatch(add_dialog_msg(json.message));
+            if (json.status != 1) return dispatch(add_dialog_msg(json.message));
             return dispatch(get_leone_list());
         });
 }
@@ -340,8 +350,8 @@ export const io_cmd = (data, cb = null) => dispatch => {
         .then(response => response.json())
         .then(json => {
             dispatch(toggle_loading(0));
-			if(json.status != 1) return dispatch(add_dialog_msg(json.message));
+            if (json.status != 1) return dispatch(add_dialog_msg(json.message));
-			if(cb && typeof cb == 'function') return cb();
+            if (cb && typeof cb == 'function') return cb();
         });
 }
 
@@ -351,7 +361,7 @@ export const get_iogroup_list = () => dispatch => {
         .then(response => response.json())
         .then(json => {
             dispatch(toggle_loading(0));
-			if(json.status != 1) return dispatch(add_dialog_msg(json.message));
+            if (json.status != 1) return dispatch(add_dialog_msg(json.message));
             return dispatch(iogroup_list(json.data.record, json.data.rt.do, json.data.rt.leone));
         });
 }
@@ -369,7 +379,7 @@ const group_api = (url, data) => dispatch => {
         .then(response => response.json())
         .then(json => {
             dispatch(toggle_loading(0));
-			if(json.status != 1) return dispatch(add_dialog_msg(json.message));
+            if (json.status != 1) return dispatch(add_dialog_msg(json.message));
             return dispatch(get_iogroup_list());
         });
 }
@@ -390,7 +400,7 @@ export const get_select_list = (data) => dispatch => {
     return fetch('/api/system/getselectlist', getRequest(data))
         .then(response => response.json())
         .then(json => {
-			if(json.status != 1) return dispatch(add_dialog_msg(json.message));
+            if (json.status != 1) return dispatch(add_dialog_msg(json.message));
             return dispatch(select_list(json.data.record || []));
         })
 }
@@ -409,7 +419,7 @@ const schedule_api = (url, data) => dispatch => {
         .then(response => response.json())
         .then(json => {
             dispatch(toggle_loading(0));
-			if(json.status != 1) return dispatch(add_dialog_msg(json.message));
+            if (json.status != 1) return dispatch(add_dialog_msg(json.message));
             return dispatch(get_schedule_list());
         })
 }
@@ -428,7 +438,7 @@ export const get_schedule_list = () => dispatch => {
         .then(response => response.json())
         .then(json => {
             dispatch(toggle_loading(0));
-			if(json.status != 1) return dispatch(add_dialog_msg(json.message));
+            if (json.status != 1) return dispatch(add_dialog_msg(json.message));
             return dispatch(schedule_list(json.data.record || [], json.data.rt.do || [], json.data.rt.leone || [], json.data.rt.iogroup || []));
         })
 }
@@ -452,7 +462,7 @@ export const clear_userlist = () => ({
 export const clear_dio = () => ({
     type: 'clear_dio'
 });
-export const clear_leone =() => ({
+export const clear_leone = () => ({
     type: 'clear_leone'
 });
 export const clear_log = () => ({
@@ -471,7 +481,7 @@ export const get_modbus_list = () => dispatch => {
         .then(response => response.json())
         .then(json => {
             dispatch(toggle_loading(0));
-			if(json.status != 1 ) return dispatch(add_dialog_msg(json.message));
+            if (json.status != 1) return dispatch(add_dialog_msg(json.message));
             dispatch(modbus_list(json.data.record || []));
         });
 }
@@ -491,7 +501,7 @@ const modbus_api = (url, data) => dispatch => {
         .then(response => response.json())
         .then(json => {
             dispatch(toggle_loading(0));
-			if(json.status != 1) return dispatch(add_dialog_msg(json.message));
+            if (json.status != 1) return dispatch(add_dialog_msg(json.message));
             dispatch(get_modbus_list());
         })
 }
@@ -514,7 +524,7 @@ export const get_mb_data = data => dispatch => {
         .then(response => response.json())
         .then(json => {
             dispatch(toggle_loading(0));
-			if(json.status != 1) return dispatch(add_dialog_msg(json.message));
+            if (json.status != 1) return dispatch(add_dialog_msg(json.message));
             dispatch(mb_data(data.id, json.data.rt.iolist || [], json.data.rt.aioset || []));
         })
 }
@@ -530,7 +540,7 @@ export const get_mb_iostatus = data => dispatch => {
     return fetch('/api/modbus/getiostatus', getRequest(data))
         .then(response => response.json())
         .then(json => {
-			if(json.status != 1) return dispatch(add_dialog_msg(json.message));
+            if (json.status != 1) return dispatch(add_dialog_msg(json.message));
             dispatch(mb_iostatus(data.id, data.type, json.data.record || []));
         })
 }
@@ -548,8 +558,8 @@ const mb_iolist_api = (url, data) => dispatch => {
         .then(response => response.json())
         .then(json => {
             dispatch(toggle_loading(0));
-			if(json.status != 1) return dispatch(add_dialog_msg(json.message));
+            if (json.status != 1) return dispatch(add_dialog_msg(json.message));
-			dispatch(get_mb_data({id: data.devuid}));
+            dispatch(get_mb_data({ id: data.devuid }));
         });
 }
 
@@ -559,8 +569,8 @@ const mb_aio_api = (url, data) => dispatch => {
         .then(response => response.json())
         .then(json => {
             dispatch(toggle_loading(0));
-			if(json.status != 1) return dispatch(add_dialog_msg(json.message));
+            if (json.status != 1) return dispatch(add_dialog_msg(json.message));
-			dispatch(get_mb_data({id: data.devuid}));
+            dispatch(get_mb_data({ id: data.devuid }));
         });
 }
 
@@ -590,7 +600,7 @@ export const get_mb_log = data => dispatch => {
         .then(response => response.json())
         .then(json => {
             dispatch(toggle_loading(0));
-			if(json.status != 1) return dispatch(add_dialog_msg(json.message));
+            if (json.status != 1) return dispatch(add_dialog_msg(json.message));
             dispatch(mb_log(json.data.record || []));
         });
 }
@@ -606,7 +616,7 @@ export const get_link_list = () => dispatch => {
         .then(response => response.json())
         .then(json => {
             dispatch(toggle_loading(0));
-			if(json.status != 1) return dispatch(add_dialog_msg(json.message));
+            if (json.status != 1) return dispatch(add_dialog_msg(json.message));
             dispatch(link_list(json.data.record || []))
         })
 }
@@ -623,7 +633,7 @@ const link_api = (url, data) => dispatch => {
     return fetch(url, getRequest(data))
         .then(response => response.json())
         .then(json => {
-			if(json.status != 1) return dispatch(add_dialog_msg(json.message));
+            if (json.status != 1) return dispatch(add_dialog_msg(json.message));
             dispatch(get_link_list());
         })
 }
@@ -642,9 +652,9 @@ export const get_dashboard = () => dispatch => {
     return fetch('/api/system/dashboard', getRequest())
         .then(response => response.json())
         .then(json => {
-			if(json.status != 1) return dispatch(add_dialog_msg(json.message));
+            if (json.status != 1) return dispatch(add_dialog_msg(json.message));
             let rt = json.data.rt;
-			dispatch(dashboard(rt.ip[0]? rt.ip[0].ip : '', rt.version[0]? rt.version[0].version : '', rt.di, rt.leone))
+            dispatch(dashboard(rt.ip[0] ? rt.ip[0].ip : '', rt.version[0] ? rt.version[0].version : '', rt.di, rt.leone))
         })
 }
 

src/components/AdminPage/ActionLinkAdd/ActionSelect.js

@@ -1,127 +0,0 @@
-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

@@ -1,279 +0,0 @@
-import React from 'react';
-import {Grid, Form, Segment, Input} from 'semantic-ui-react';
-
-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 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>
-                    <Form.Field>
-                        <label>選擇元件</label>
-                        <select
-                            value={data.st}
-                            onChange={e => {
-                            getList(unit, 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>
-                    {  
-                        !data.st
-                        ? null
-                        : (<UnitPanel data={data} state={this.state.data} dataChange={this.handleDataChange}/>)
-                    }
-                </Segment>
-            </Grid.Column>
-        )
-    }
-}
-
-const UnitPanel = ({data, state, dataChange}) => {
-    if (data.st == 'di') {
-        return (
-            <div>
-                <select value={state.dev} onChange={(e) => {
-                        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>
-                </select>
-            </div>
-        )
-    }
-    if(data.st == 'leone') {
-        return (
-            <div>
-                <select value={state.dev} onChange={e => {
-                        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>
-                <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 value={state.dev} onChange={e => {
-                        dataChange('dev', e.target.value);
-                    }}>
-                    <option value="">選擇群組</option>
-                    {
-                        data.list.map((t,idx) => (
-                            <option key={idx} value={t.id}>{t.name}</option>
-                        ))
-                    }
-                </select>
-            </div>
-        )
-    }
-    if(data.st == 'time') {
-        return (
-            <div>
-                <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.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

@@ -1,41 +0,0 @@
-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

@@ -1,353 +0,0 @@
-import React from 'react';
-import {
-    Container,
-    Segment,
-    Form,
-    Input,
-    Button,
-    Checkbox,
-    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 = () => ({
-    gidx: 0,
-    groups: {},
-    active: false,
-    edit: {
-        name: '',
-        type: 'ln',
-        op: '',
-        id1: {
-            st: '',
-            list: [],
-            data: {}
-        },
-        id2: {
-            st: '',
-            list: [],
-            data: {}
-        }
-    },
-    actDevlist: [],
-    items: [],
-    showTree: false
-})
-const gtype = {
-    lc: {
-        type: 'lc',
-        id: '',
-        op: '',
-        value: ''
-    },
-    ln: {
-        type: 'ln',
-        dev: ''
-    }
-}
-
-class ActionLinkAdd extends React.Component {
-    state = {
-        ...defState()
-    }
-
-    getSelectList = (unit, type = '') => {
-        if (!unit) {
-            return;
-        }
-        if(unit != 'act'){
-            let edit = {
-                ...this.state.edit
-            };
-            if (!(unit in edit)) {
-                return;
-            }
-            edit[unit].st = type;
-            edit[unit].data = {
-                ...gtype.lc
-            }
-            if (type != 'di' && type != 'leone' && type != 'unit') {
-                return this.setState({edit});
-            }
-
-            if (type == 'di' || type == 'leone') {
-                this.props.toggleLoading(1);
-                let json = {
-                    type
-                };
-                fetch('/api/system/getselectlist', getRequest(json))
-                    .then(response => response.json())
-                    .then(json => {
-                        if (json.status != 1) 
-                            return this.props.showDialog(json.message);
-                        edit[unit].list = json.data.record || [];
-                        this.setState({edit}, () => {
-                            this.props.toggleLoading(0);
-                        });
-                    });
-            }
-            if(type == 'unit') {
-                let list = [];
-                for(let i in this.state.groups){
-                    list.push({id: i, name: this.state.groups[i].name});
-                }
-                edit[unit].list = list;
-                edit[unit].data = {
-                    ...gtype.ln
-                }
-                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="啟用連動" 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="節點名稱" value={this.state.edit.name} onChange={(e,d) => {
-                                    this.updateEditData('name', d.value);
-                                }}/>
-                            </Form.Field>
-                            <Form.Field>
-                                <label>觸發條件</label>
-                                <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} updateData={this.updateData}/>
-                                <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="加入" onClick={()=>{
-                                        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>
-        )
-    }
-}
-
-export default ActionLinkAdd;

src/components/AdminPage/ActionLinkAddN/ActionList/ListItem.js

@@ -1,17 +1,17 @@
 import React from 'react';
 import {List, Label, Button} from 'semantic-ui-react';
 
-const ActionItem = ({i18n, data, idx, removeAction}) => {
+const ListItem = ({ 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);
+                    removeAction(idx)
                 }}/>
         </List.Item>
     )
 }
 
-export default ActionItem;
+export default ListItem;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import {Segment, List} from 'semantic-ui-react';
+import ListItem from './ListItem';
+
+const ActionList = ({ i18n, list, removeAction }) => {
+
+    return (
+        <Segment color="blue">
+            <List divided>
+                {
+                    list.map((t,idx) => (
+                        <ListItem key={idx} i18n={i18n} data={t} idx={idx} removeAction={removeAction} />
+                    ))
+                }
+            </List>
+        </Segment>
+    )
+}
+
+export default ActionList;

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import {Modal, Input, Button, Form, Grid} from 'semantic-ui-react';
+
+const CalModal = ({ i18n, onClose, onSubmit }) => {
+
+    return (
+        <Modal open={true}>
+            <Modal.Header content="數值換算" />
+            <Modal.Content>
+                <Form onSubmit={(e,d) => {
+                        e.preventDefault();
+                        onSubmit(d.formData);
+                    }} serializer={e=>{
+                        let json = {
+                            r1: '',
+                            r2: '',
+                            s1: '',
+                            s2: '',
+                            val: ''
+                        }
+
+                        let r1 = e.querySelector('input[name="r1"]');
+                        if(r1 && 'value' in r1) json.r1 = r1.value;
+                        let r2 = e.querySelector('input[name="r2"]');
+                        if(r2 && 'value' in r2) json.r2 = r2.value;
+                        let s1 = e.querySelector('input[name="s1"]');
+                        if(s1 && 'value' in s1) json.s1 = s1.value;
+                        let s2 = e.querySelector('input[name="s2"]');
+                        if(s2 && 'value' in s2) json.s2 = s2.value;
+                        let val = e.querySelector('input[name="val"]');
+                        if(val && 'value' in val) json.val = val.value;
+
+                        return json;
+                    }}>
+                    <Form.Field>
+                        <label>Range</label>
+                        <Grid columns={2}>
+                            <Grid.Column>
+                                <Input label="RangeMin" name="r1" />
+                            </Grid.Column>
+                            <Grid.Column>
+                                <Input label="RangeMax" name="r2" />
+                            </Grid.Column>
+                        </Grid>
+                    </Form.Field>
+                    <Form.Field>
+                        <label>Scale</label>
+                        <Grid columns={2}>
+                            <Grid.Column>
+                                <Input label="ScaleMin" name="s1" />
+                            </Grid.Column>
+                            <Grid.Column>
+                                <Input label="ScaleMax" name="s2" />
+                            </Grid.Column>
+                        </Grid>
+                    </Form.Field>
+                    <Form.Field>
+                        <Input label="輸入數值" name="val" />
+                    </Form.Field>
+                    <Grid columns={2}>
+                        <Grid.Column>
+                            <Button fluid content="送出" basic />
+                        </Grid.Column>
+                        <Grid.Column>
+                            <Button fluid type="button" content="取消" basic onClick={()=>{onClose()}} />
+                        </Grid.Column>
+                    </Grid>
+                </Form>
+            </Modal.Content>
+        </Modal>
+    )
+}
+
+export default CalModal;

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

@@ -0,0 +1,84 @@
+import React from 'react';
+import {Form, Input} from 'semantic-ui-react';
+
+class StdAction extends React.Component{
+    state = {
+        name: '',
+        act: '',
+        temp: ''
+    }
+
+    changeState = (tag, value) => {
+        let data = {...this.state};
+        if(tag == 'act'){
+            data.name = value.name || '';
+            data.act = value.act || '';
+        }
+        if(tag == 'temp'){
+            data.temp = value;
+        }
+
+        this.setState({
+            ...data
+        }, () => {
+            this.updateAct();
+        })
+    }
+
+    showTemp = () => {
+        if(this.state.act == '2'){
+            return (
+                <Form.Field>
+                    <Input label="請輸入溫度" 
+                        placeholder="溫度請介於16-30間" 
+                        value={this.state.temp} 
+                        onChange={(e,d) => {this.changeState('temp', d.value)}} />
+                </Form.Field>
+            )
+        }
+
+        return null;
+    }
+
+    updateAct = ()=>{
+        let {updateAct} = this.props;
+        let act = this.state.act;
+        let temp = this.state.temp;
+
+        if(act == '2') act = `${act},${temp}`;
+        updateAct(act, this.state.name)
+    }
+
+    render(){
+        let {i18n} = this.props;
+        let actlist = i18n&&i18n.getResource&&i18n.language ? i18n.getResource(i18n.language + '.translation.action_list') : [];
+        return (
+            <div>
+                <Form.Field>
+                    <label>選擇動作</label>
+                    <select value={this.state.act} onChange={e=>{
+                            let el = e.target;
+                            let json = {
+                                name: '',
+                                act: ''
+                            }
+                            json.act = el.value;
+                            json.name = el.options[el.selectedIndex].innerHTML;
+
+                            this.changeState('act', json);
+                        }}>
+                        <option value="">選擇動作</option>
+                        {
+                            actlist.map((t,idx) => (
+                                <option key={idx} value={t.cmd.replace(' ', ',')}>{t.name}</option>
+                            ))
+                        }
+                    </select>
+                </Form.Field>
+                {this.showTemp()}
+            </div>
+        )
+    }
+}
+
+export default StdAction;

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

@@ -0,0 +1,98 @@
+import React from 'react';
+import {Form, Input} from 'semantic-ui-react';
+import { getRequest } from '../../../../actions';
+import StdAction from './StdAction';
+
+class UnitLeone extends React.Component {
+    state = {
+        list: [],
+        data: {
+            dev: '',
+            devName: '',
+            act: '',
+            actName: ''
+        }
+    }
+
+    componentDidMount() {
+        let { showDialog } = this.props;
+        fetch('/api/system/getselectlist', getRequest({ type: 'do' }))
+            .then(response => response.json())
+            .then(json => {
+                if (json.status != 1) return showDialog(json.message);
+                this.setState({
+                    list: json.data.record || []
+                })
+            })
+    }
+
+    changeState = (tag, value) =>{
+        let data = {...this.state.data};
+
+        if(tag == 'act') {
+            data.actName = value.name;
+            data.act = value.act;
+        }
+        if(tag == 'dev'){
+            data.dev = value.dev == '' ? '' : `do${value.dev}`;
+            data.devName = value.name;
+        }
+
+        this.setState({
+            data:{
+                ...data
+            }
+        }, ()=>{
+            this.updateData()
+        })
+    }
+
+    updateData = () => {
+        let data = {...this.state.data};
+        data.type = 'do';
+
+        this.props.updateData(data);
+    }
+
+    updateAct = (act, name) => {
+        this.changeState('act', {act, name});
+    }
+
+    render() {
+        let {i18n} = this.props;
+        let dev = '';
+        let m = this.state.data.dev.match(/(\d+)/);
+        if(m!=null && m.length > 1){
+            dev = m[1];
+        }
+        return (
+            <div>
+                <Form.Field>
+                    <label>選擇裝置</label>
+                    <select value={dev} onChange={e=>{
+                            let el = e.target;
+                            let json = {
+                                dev: '',
+                                name: ''
+                            };
+
+                            json.dev = el.value;
+                            json.name = el.options[el.selectedIndex].innerHTML;
+
+                            this.changeState('dev', json);
+                        }}>
+                        <option value="">選擇裝置</option>
+                        {
+                            this.state.list.map((t,idx) => (
+                                <option key={idx} value={t.id}>{t.name}</option>
+                            ))
+                        }
+                    </select>
+                </Form.Field>
+                <StdAction i18n={i18n} updateAct={this.updateAct} />
+            </div>
+        )
+    }
+}
+
+export default UnitLeone;

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

@@ -0,0 +1,98 @@
+import React from 'react';
+import {Form, Input} from 'semantic-ui-react';
+import { getRequest } from '../../../../actions';
+import StdAction from './StdAction';
+
+class UnitLeone extends React.Component {
+    state = {
+        list: [],
+        data: {
+            dev: '',
+            devName: '',
+            act: '',
+            actName: ''
+        }
+    }
+
+    componentDidMount() {
+        let { showDialog } = this.props;
+        fetch('/api/system/getselectlist', getRequest({ type: 'iogroup' }))
+            .then(response => response.json())
+            .then(json => {
+                if (json.status != 1) return showDialog(json.message);
+                this.setState({
+                    list: json.data.record || []
+                })
+            })
+    }
+
+    changeState = (tag, value) =>{
+        let data = {...this.state.data};
+
+        if(tag == 'act') {
+            data.actName = value.name;
+            data.act = value.act;
+        }
+        if(tag == 'dev'){
+            data.dev = value.dev == '' ? '' : `iogroup${value.dev}`;
+            data.devName = value.name;
+        }
+
+        this.setState({
+            data:{
+                ...data
+            }
+        }, ()=>{
+            this.updateData()
+        })
+    }
+
+    updateData = () => {
+        let data = {...this.state.data};
+        data.type = 'iogroup';
+
+        this.props.updateData(data);
+    }
+
+    updateAct = (act, name) => {
+        this.changeState('act', {act, name});
+    }
+
+    render() {
+        let {i18n} = this.props;
+        let dev = '';
+        let m = this.state.data.dev.match(/(\d+)/);
+        if(m!=null && m.length > 1){
+            dev = m[1];
+        }
+        return (
+            <div>
+                <Form.Field>
+                    <label>選擇裝置</label>
+                    <select value={dev} onChange={e=>{
+                            let el = e.target;
+                            let json = {
+                                dev: '',
+                                name: ''
+                            };
+
+                            json.dev = el.value;
+                            json.name = el.options[el.selectedIndex].innerHTML;
+
+                            this.changeState('dev', json);
+                        }}>
+                        <option value="">選擇裝置</option>
+                        {
+                            this.state.list.map((t,idx) => (
+                                <option key={idx} value={t.id}>{t.name}</option>
+                            ))
+                        }
+                    </select>
+                </Form.Field>
+                <StdAction i18n={i18n} updateAct={this.updateAct} />
+            </div>
+        )
+    }
+}
+
+export default UnitLeone;

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

@@ -0,0 +1,98 @@
+import React from 'react';
+import {Form, Input} from 'semantic-ui-react';
+import { getRequest } from '../../../../actions';
+import StdAction from './StdAction';
+
+class UnitLeone extends React.Component {
+    state = {
+        list: [],
+        data: {
+            dev: '',
+            devName: '',
+            act: '',
+            actName: ''
+        }
+    }
+
+    componentDidMount() {
+        let { showDialog } = this.props;
+        fetch('/api/system/getselectlist', getRequest({ type: 'leone' }))
+            .then(response => response.json())
+            .then(json => {
+                if (json.status != 1) return showDialog(json.message);
+                this.setState({
+                    list: json.data.record || []
+                })
+            })
+    }
+
+    changeState = (tag, value) =>{
+        let data = {...this.state.data};
+
+        if(tag == 'act') {
+            data.actName = value.name;
+            data.act = value.act;
+        }
+        if(tag == 'dev'){
+            data.dev = value.dev == '' ? '' : `le${value.dev}`;
+            data.devName = value.name;
+        }
+
+        this.setState({
+            data:{
+                ...data
+            }
+        }, ()=>{
+            this.updateData()
+        })
+    }
+
+    updateData = () => {
+        let data = {...this.state.data};
+        data.type = 'leone';
+
+        this.props.updateData(data);
+    }
+
+    updateAct = (act, name) => {
+        this.changeState('act', {act, name});
+    }
+
+    render() {
+        let {i18n} = this.props;
+        let dev = '';
+        let m = this.state.data.dev.match(/(\d+)/);
+        if(m!=null && m.length > 1){
+            dev = m[1];
+        }
+        return (
+            <div>
+                <Form.Field>
+                    <label>選擇裝置</label>
+                    <select value={dev} onChange={e=>{
+                            let el = e.target;
+                            let json = {
+                                dev: '',
+                                name: ''
+                            };
+
+                            json.dev = el.value;
+                            json.name = el.options[el.selectedIndex].innerHTML;
+
+                            this.changeState('dev', json);
+                        }}>
+                        <option value="">選擇裝置</option>
+                        {
+                            this.state.list.map((t,idx) => (
+                                <option key={idx} value={t.id}>{t.name}</option>
+                            ))
+                        }
+                    </select>
+                </Form.Field>
+                <StdAction i18n={i18n} updateAct={this.updateAct} />
+            </div>
+        )
+    }
+}
+
+export default UnitLeone;

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

@@ -0,0 +1,185 @@
+import React from 'react';
+import {Form, Input} from 'semantic-ui-react';
+import { getRequest } from '../../../../actions';
+import CalModal  from './CalModal';
+
+class UnitLeone extends React.Component {
+    state = {
+        list: [],
+        data: {
+            dev: '',
+            devName: '',
+            func: '',
+            funcName: '',
+            addr: '',
+            value: ''
+        },
+        modal: false
+    }
+
+    componentDidMount() {
+        let { showDialog } = this.props;
+        fetch('/api/system/getselectlist', getRequest({ type: 'modbus' }))
+            .then(response => response.json())
+            .then(json => {
+                if (json.status != 1) return showDialog(json.message);
+                this.setState({
+                    list: json.data.record || []
+                })
+            })
+    }
+
+    renderModal = () => {
+        let {i18n} = this.props;
+        return (
+            this.state.modal ? 
+            (
+                <CalModal i18n={i18n} onClose={this.closeModal} onSubmit={this.submitModal} />
+            ): null
+        )
+    }
+
+    closeModal = () => {
+        this.setState({
+            modal: false
+        })
+    }
+
+    submitModal = (data) => {
+        if(!data) return ;
+        let {showDialog} = this.props;
+        let {r1, r2, s1, s2, val} = data;
+        if(!isFinite(r1) || !isFinite(r2) || !isFinite(s1) || !isFinite(s2) || !isFinite(val)) return showDialog('請勿輸入數字以外的內容');
+
+        let value = Math.round(((val - r1) * (s2 - s1)) / (r2 - r1));
+
+        this.setState({
+            data:{
+                ...this.state.data,
+                value
+            }
+        }, ()=>{this.closeModal()})
+    }
+
+    changeState = (tag, value) =>{
+        let data = {...this.state.data};
+
+        if(tag == 'func') {
+            data.funcName = value.name;
+            data.func = value.func;
+        }
+        if(tag == 'dev'){
+            data.dev = value.dev == '' ? '' : `mb${value.dev}`;
+            data.devName = value.name;
+        }
+        if(tag == 'addr'){
+            data.addr = value;
+        }
+        if(tag == 'value'){
+            data.value = value;
+        }
+
+        this.setState({
+            data:{
+                ...data
+            }
+        }, ()=>{
+            this.updateData()
+        })
+    }
+
+    updateData = () => {
+        let data = {...this.state.data};
+        data.type = 'modbus';
+
+        data.act = `${data.func},${data.addr},${data.value}`;
+        data.actName = `${data.funcName} Addr:${data.addr} Value:${data.value}`;
+
+        delete data.func;
+        delete data.funcName;
+        delete data.addr;
+        delete data.value;
+
+        this.props.updateData(data);
+    }
+
+    updateAct = (act, name) => {
+        this.changeState('act', {act, name});
+    }
+
+    render() {
+        let {i18n} = this.props;
+        let dev = '';
+        let m = this.state.data.dev.match(/(\d+)/);
+        
+        if(m!=null && m.length > 1){
+            dev = m[1];
+        }
+        return (
+            <div>
+                <Form.Field>
+                    <label>選擇裝置</label>
+                    <select value={dev} onChange={e=>{
+                            let el = e.target;
+                            let json = {
+                                dev: '',
+                                name: ''
+                            };
+
+                            json.dev = el.value;
+                            json.name = el.options[el.selectedIndex].innerHTML;
+
+                            this.changeState('dev', json);
+                        }}>
+                        <option value="">選擇裝置</option>
+                        {
+                            this.state.list.map((t,idx) => (
+                                <option key={idx} value={t.id}>{t.name}</option>
+                            ))
+                        }
+                    </select>
+                </Form.Field>
+                <Form.Field>
+                    <label>選擇輸出類型</label>
+                    <select value={this.state.data.func} onChange={e=>{
+                            let el = e.target;
+                            let json = {
+                                func: '',
+                                name: ''
+                            };
+
+                            json.func = el.value;
+                            json.name = el.options[el.selectedIndex].innerHTML;
+
+                            this.changeState('func', json);
+                        }}>
+                        <option value="">輸出類型</option>
+                        <option value="5">DigitalOutput</option>
+                        <option value="6">AnalogOutput</option>
+                    </select>
+                </Form.Field>
+                <Form.Field>
+                    <Input label="輸入位址" value={this.state.data.addr} onChange={(e,d) => {this.changeState('addr', d.value)}} />
+                </Form.Field>
+                <Form.Field>
+                    <Input label="輸入數值" 
+                        value={this.state.data.value} 
+                        onChange={(e,d) => {this.changeState('value', d.value)}}
+                        action={{
+                            content:"數值換算",
+                            basic: true,
+                            onClick: ()=>{
+                                this.setState({
+                                    modal: true
+                                })
+                            },
+                            type: 'button'
+                        }} />
+                </Form.Field>
+                {this.renderModal()}
+            </div>
+        )
+    }
+}
+
+export default UnitLeone;

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

@@ -0,0 +1,135 @@
+import React from 'react';
+import {Segment, Button, Form, Input} from 'semantic-ui-react';
+import UnitLeone from './UnitLeone';
+import UnitDigitalOutput from './UnitDigitalOutput';
+import UnitIOGroup from './UnitIOGroup';
+import UnitModbus from './UnitModbus';
+
+const stateDefault = () => ({
+    unit: '',
+    act: {
+        type: '',
+        dev: '',
+        devName: '',
+        act: '',
+        actName: ''
+    }
+})
+
+class ActionSelect extends React.Component {
+
+    state = {
+        ...stateDefault()
+    }
+
+    changeUnit = (unit) => {
+        this.setState({
+            unit
+        })
+    }
+
+    getUnitComponent = () => {
+        let {unit} = this.state;
+        let {i18n, showDialog, toggleLoading} = this.props;
+
+        switch(unit){
+            case 'leone':
+                return (
+                    <UnitLeone i18n={i18n}
+                        data={this.state.act}
+                        showDialog={showDialog}
+                        toggleLoading={toggleLoading}
+                        updateData={this.updateData} />
+                )
+            case 'do':
+                return (
+                    <UnitDigitalOutput i18n={i18n}
+                        data={this.state.act}
+                        showDialog={showDialog}
+                        toggleLoading={toggleLoading}
+                        updateData={this.updateData} />
+                )
+            case 'iogroup':
+                return (
+                    <UnitIOGroup i18n={i18n}
+                        data={this.state.act}
+                        showDialog={showDialog}
+                        toggleLoading={toggleLoading}
+                        updateData={this.updateData} />
+                )
+            case 'modbus':
+                return (
+                    <UnitModbus i18n={i18n}
+                        data={this.state.act}
+                        showDialog={showDialog}
+                        toggleLoading={toggleLoading}
+                        updateData={this.updateData} />
+                )
+            default: 
+                return null;
+        }
+    }
+
+    updateData = (data) => {
+        let {act} = this.state;
+        for(let i in act){
+            act[i] = data[i] || ''
+        }
+        this.setState({
+            act
+        })
+    }
+
+    addAction = () => {
+        let {dev, devName, act, actName, type} = this.state.act;
+        let {showDialog} = this.props;
+        if(!dev || !act) return showDialog('請選擇動作資料');
+        if(type != 'modbus'){
+            let acts = act.split(',');
+            if(acts.length != 2 ) return showDialog('請選擇正確的動作');
+            if(acts[0] == '2'){
+                if(acts[1] < 16 || acts[1] > 30) return showDialog('冷氣溫度請介於16-30間');
+            }
+        }
+        if(type == 'modbus'){
+            let acts = act.split(',');
+            if(acts.length != 3) return showDialog('請把動作資料填寫完成');
+            if(acts[0] == '' || acts[1] == '' || acts[2] == '') return showDialog('請把動作資料填寫完成');
+        }
+
+        this.props.addNewAction({
+            dev,devName,act,actName,type
+        }, this.clearField);
+    }
+
+    clearField = () => {
+        this.setState({
+            ...stateDefault()
+        })
+    }
+
+    render() {
+
+        return (
+            <Segment color="green">
+                <Form.Field>
+                    <label>選擇裝置類型</label>
+                    <select value={this.state.unit} onChange={e=>{this.changeUnit(e.target.value)}}>
+                        <option value="">裝置類型</option>
+                        <option value="leone">LeOne</option>
+                        <option value="do">DigitalOutput</option>
+                        <option value="iogroup">IOGroup</option>
+                        <option value="modbus">Modbus</option>
+                    </select>
+                </Form.Field>
+                {this.getUnitComponent()}
+                <div style={{textAlign:'right', marginTop: '20px'}}>
+                    <Button content="加入" basic size="mini" color="blue" onClick={()=>{ this.addAction() }} />
+                    <Button content="清除" basic size="mini" color="red" onClick={()=>{this.clearField()}} />
+                </div>
+            </Segment>
+        )
+    }
+}
+
+export default ActionSelect;

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/UnitModbus.js

@@ -0,0 +1,200 @@
+import React from 'react';
+import {Input} from 'semantic-ui-react';
+import {getRequest} from '../../../../../actions';
+
+class UnitDigitalInput extends React.Component {
+    state = {
+        list: [],
+        typelist: [],
+        portlist: [],
+        data: {
+            id: '',
+            op: '',
+            type: '',
+            port: '',
+            value: ''
+        }
+    }
+
+    componentDidMount(){
+        let {showDialog, toggleLoading} = this.props;
+
+        toggleLoading(1);
+        fetch('/api/system/getselectlist', getRequest({type: 'modbus'}))
+            .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;
+
+        let id = (np.data.id || '').split(',')[0];
+        let type = ((np.data.id || '').split(',')[1] || '').split('|')[0] || '';
+        let port = ((np.data.id || '').split(',')[1] || '').split('|')[1] || '';
+
+        if(data.id != id ) data.id = id;
+        if(data.type != type ) data.type = type;
+        if(data.port != port ) data.port = port;
+
+        this.setState({
+            data: {...data}
+        })
+    }
+
+    getDevTypes = (id) => {
+        if(!id) return ;
+        let {i18n, showDialog} = this.props;
+        let typelist = i18n&&i18n.getResource&&i18n.language ? i18n.getResource(i18n.language + '.translation.porttype') : [];
+        fetch('/api/modbus/getmodbustype', getRequest({id}))
+            .then(response=>response.json())
+            .then(json => {
+                if(json.status != 1) return showDialog(json.message);
+                let arr = json.data.record || [];
+                for(let i in arr){
+                    for(let j in typelist) {
+                        if(arr[i].type == typelist[j].code){
+                            arr[i].name = typelist[j].name;
+                        }
+                    }
+                }
+
+                this.setState({
+                    typelist: arr, 
+                    portlist: [],
+                    data: {
+                        ...this.state.data,
+                        type: '',
+                        port: ''
+                    }
+                })
+            })
+    }
+
+    getDevPorts = (id, type) => {
+        if(!id || !type) return ;
+        let {i18n, showDialog} = this.props;
+        let mid = '';
+        let m = id.match(/(\d+)/);
+        if(m != null && m.length>1) mid = m[1];
+        fetch('/api/modbus/getmodbusport', getRequest({id: mid, type}))
+            .then(response=>response.json())
+            .then(json => {
+                if(json.status != 1) return showDialog(json.message);
+                let arr = json.data.record || [];
+
+                this.setState({
+                    portlist: arr,
+                    data: {
+                        ...this.state.data,
+                        port: ''
+                    }
+                })
+            })
+    }
+
+    changeState = (key, value) => {
+        let data = {
+            ...this.state.data
+        }
+        if(key == 'dev') {
+            data.id = value == '' ? '' : `mb${value}`;
+        }
+        if(key == 'op'){
+            data.op = value;
+        }
+        if(key == 'type') {
+            data.type = value
+        }
+        if(key == 'port') {
+            data.port = value
+        }
+        if(key == 'value') {
+            data.value = value;
+        }
+
+        this.setState({
+            data: {...data}
+        }, ()=>{ 
+            if(key == 'dev'){
+                this.getDevTypes(value);
+            }
+            if(key == 'type'){
+                this.getDevPorts(this.state.data.id, this.state.data.type)
+            }
+            this.sendUpdate()
+        });
+    }
+
+    sendUpdate = () => {
+        let data = {...this.state.data};
+        data.id = `${data.id},${data.type}|${data.port}`;
+        delete data.type;
+        delete data.port;
+        delete data.dev;
+        this.props.updateData({...this.props.data, ...data});
+    }
+
+    render() {
+        let {ops, i18n} = 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.type} onChange={e => {this.changeState('type', e.target.value)}}>
+                    <option value="">接口類型</option>
+                    {
+                        this.state.typelist.map((t,idx) => (
+                            <option key={idx} value={t.type}>{t.name}</option>
+                        ))
+                    }
+                </select>
+                <select value={this.state.data.port} onChange={e => {this.changeState('port', e.target.value)}}>
+                    <option value="">接口</option>
+                    {
+                        this.state.portlist.map((t,idx) => (
+                            <option key={idx} value={t.portnum}>{`Port ${t.portnum} ${t.name ? ` - ${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>
+                <Input label="請輸入數值" value={this.state.data.value} onChange={(e,d)=>{this.changeState('value', d.value)}} />
+            </div>
+        )
+    }
+}
+
+export default UnitDigitalInput;

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

@@ -0,0 +1,119 @@
+import React from 'react';
+import {Input} from 'semantic-ui-react';
+import {getRequest} from '../../../../../actions';
+
+class UnitTime extends React.Component {
+    state = {
+        list: [],
+        data: {
+            op: '',
+            id: 'dt0,mode0',
+            year: '-',
+            week: '-',
+            month: '-',
+            day: '-',
+            hour: '-',
+            min: '-'
+        }
+    }
+
+    componentWillReceiveProps(np) {
+        let data = {...this.state.data};
+        if(np.data.op != data.op) data.op = np.data.op;
+    
+        let year = np.data.value.split('|')[5] || '-';
+        let week = np.data.value.split('|')[4] || '-';
+        let month = np.data.value.split('|')[3] || '-';
+        let day = np.data.value.split('|')[2] || '-';
+        let hour = np.data.value.split('|')[1] || '-';
+        let min = np.data.value.split('|')[0] || '-';
+
+        if(year != data.year) data.year = year;
+        if(week != data.week) data.week = week;
+        if(month != data.month) data.month = month;
+        if(day != data.day) data.day = day;
+        if(hour != data.hour) data.hour = hour;
+        if(min != data.min) data.min = min;
+
+        this.setState({
+            data: {...data}
+        })
+    }
+
+    changeState = (key, value) => {
+        let data = {
+            ...this.state.data
+        }
+        if(key == 'op'){
+            data.op = value;
+        }
+        if(key == 'year') {
+            data.year = value == '' ? '-' : value;
+        }
+        if(key == 'week') {
+            data.week = value == '' ? '-' : value;
+        }
+        if(key == 'month') {
+            data.month = value == '' ? '-' : value;
+        }
+        if(key == 'day') {
+            data.day = value == '' ? '-' : value;
+        }
+        if(key == 'hour') {
+            data.hour = value == '' ? '-' : value;
+        }
+        if(key == 'min') {
+            data.min = value == '' ? '-' : value;
+        }
+
+        this.setState({
+            data: {...data}
+        }, ()=>{ this.sendUpdate() });
+    }
+
+    sendUpdate = () => {
+        let data = {...this.state.data};
+        data.value = `${data.min}|${data.hour}|${data.day}|${data.month}|${data.week}|${data.year}`;
+        delete data.year;
+        delete data.week;
+        delete data.month;
+        delete data.day;
+        delete data.hour;
+        delete data.min;
+        this.props.updateData({...this.props.data, ...data});
+    }
+
+    render() {
+        let {ops} = this.props;
+        return (
+            <div>
+                <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 size="mini" placeholder="年(不指定請留空)" value={this.state.data.year == '-' ? '' : this.state.data.year} 
+                    onChange={(e,d) => {this.changeState('year', d.value)}} />
+                <Input size="mini" placeholder="週(不指定請留空)" value={this.state.data.week == '-' ? '' : this.state.data.week} 
+                    onChange={(e,d) => {this.changeState('week', d.value)}} />
+                <Input size="mini" placeholder="月(不指定請留空)" value={this.state.data.month == '-' ? '' : this.state.data.month} 
+                    onChange={(e,d) => {this.changeState('month', d.value)}} />
+                <Input size="mini" placeholder="日(不指定請留空)" value={this.state.data.day == '-' ? '' : this.state.data.day} 
+                    onChange={(e,d) => {this.changeState('day', d.value)}} />
+                <Input size="mini" placeholder="時(不指定請留空)" value={this.state.data.hour == '-' ? '' : this.state.data.hour} 
+                    onChange={(e,d) => {this.changeState('hour', d.value)}} />
+                <Input size="mini" placeholder="分(不指定請留空)" value={this.state.data.min == '-' ? '' : this.state.data.min} 
+                    onChange={(e,d) => {this.changeState('min', d.value)}} />
+            </div>
+        )
+    }
+}
+
+export default UnitTime;

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

@@ -0,0 +1,63 @@
+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';
+import UnitModbus from './UnitModbus';
+
+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 'modbus':
+                return <UnitModbus 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) => {
+        console.log(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">DigitalInput</option>
+                        <option value="modbus">Modbus</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,225 @@
+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;

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

@@ -0,0 +1,175 @@
+import React from 'react';
+import {
+    Container,
+    Segment,
+    Form,
+    Input,
+    Button,
+    Checkbox,
+    Grid,
+    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: [],
+    showTree: false
+})
+
+class ActionLinkAdd extends React.Component {
+    state = {
+        ...stateDefault()
+    }
+
+    changeState = (tag, value) => {
+        if(tag == 'active'){
+            this.setState({
+                active: value?1:0
+            })
+        }
+    }
+
+    addNewGroup = (data, cb = null) => {
+        let devs = [];
+        let {groups} = this.state
+        if(data.id1.type == 'ln') devs.push(data.id1.dev)
+        if(data.id2.type == 'ln') devs.push(data.id2.dev)
+        
+        data.id1 = {...data.id1, ...groups[data.id1.dev]}
+        data.id2 = {...data.id2, ...groups[data.id2.dev]}
+        delete data.id1.dev;
+        delete data.id2.dev;
+
+        for(let i in devs){
+            if(devs[i] in groups) delete groups[devs[i]];
+        }
+
+        let idx = this.state.idx + 1;
+        groups[`unit${idx}`] = data;
+
+        this.setState({
+            groups,
+            idx
+        }, ()=>{
+            if(cb && typeof cb == 'function') cb();
+        })
+    }
+
+    addNewAction = (data, cb=null) => {
+        this.setState({
+            actions: [...this.state.actions, data]
+        }, ()=>{
+            if(cb && typeof cb == 'function') cb();
+        })
+    }
+
+    removeAction = (idx) => {
+        let {actions} = this.state;
+        actions.splice(idx, 1);
+        this.setState({
+            actions
+        })
+    }
+
+    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);
+                showDialog('新增完成');
+                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={()=>{ this.toggleShowTree(1) }}/>
+                        <Menu.Item content="Save" onClick={()=>{this.saveLink()}}/>
+                    </Menu.Menu>
+                </Menu>
+                <Form as={Segment}>
+                    <Form.Field>
+                        <Checkbox label="啟用連動" checked={this.state.active == 1} onChange={(e,d)=>{this.changeState('active', d.checked)}} />
+                    </Form.Field>
+                    <Form.Field>
+                        <label>建立條件群組</label>
+                        <ConditionField i18n={i18n} 
+                            showDialog={showDialog} 
+                            toggleLoading={toggleLoading} 
+                            groups={this.state.groups}
+                            addNewGroup={this.addNewGroup} />
+                    </Form.Field>
+                    <Form.Field>
+                        <label>加入動作</label>
+                        <ActionSelect i18n={i18n}
+                            showDialog={showDialog} 
+                            toggleLoading={toggleLoading}
+                            addNewAction={this.addNewAction}  />
+                    </Form.Field>
+                    <Form.Field>
+                        <label>已選擇動作</label>
+                        <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>
+        )
+    }
+}
+
+export default ActionLinkAdd;

src/components/AdminPage/ModbusCmd/CalModal.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import {Modal, Input, Button, Form, Grid} from 'semantic-ui-react';
+
+const CalModal = ({ i18n, onClose, onSubmit }) => {
+
+    return (
+        <Modal open={true}>
+            <Modal.Header content="數值換算" />
+            <Modal.Content>
+                <Form onSubmit={(e,d) => {
+                        e.preventDefault();
+                        onSubmit(d.formData);
+                    }} serializer={e=>{
+                        let json = {
+                            r1: '',
+                            r2: '',
+                            s1: '',
+                            s2: '',
+                            val: ''
+                        }
+
+                        let r1 = e.querySelector('input[name="r1"]');
+                        if(r1 && 'value' in r1) json.r1 = r1.value;
+                        let r2 = e.querySelector('input[name="r2"]');
+                        if(r2 && 'value' in r2) json.r2 = r2.value;
+                        let s1 = e.querySelector('input[name="s1"]');
+                        if(s1 && 'value' in s1) json.s1 = s1.value;
+                        let s2 = e.querySelector('input[name="s2"]');
+                        if(s2 && 'value' in s2) json.s2 = s2.value;
+                        let val = e.querySelector('input[name="val"]');
+                        if(val && 'value' in val) json.val = val.value;
+
+                        return json;
+                    }}>
+                    <Form.Field>
+                        <label>Range</label>
+                        <Grid columns={2}>
+                            <Grid.Column>
+                                <Input label="RangeMin" name="r1" />
+                            </Grid.Column>
+                            <Grid.Column>
+                                <Input label="RangeMax" name="r2" />
+                            </Grid.Column>
+                        </Grid>
+                    </Form.Field>
+                    <Form.Field>
+                        <label>Scale</label>
+                        <Grid columns={2}>
+                            <Grid.Column>
+                                <Input label="ScaleMin" name="s1" />
+                            </Grid.Column>
+                            <Grid.Column>
+                                <Input label="ScaleMax" name="s2" />
+                            </Grid.Column>
+                        </Grid>
+                    </Form.Field>
+                    <Form.Field>
+                        <Input label="輸入數值" name="val" />
+                    </Form.Field>
+                    <Grid columns={2}>
+                        <Grid.Column>
+                            <Button fluid content="送出" basic />
+                        </Grid.Column>
+                        <Grid.Column>
+                            <Button fluid type="button" content="取消" basic onClick={()=>{onClose()}} />
+                        </Grid.Column>
+                    </Grid>
+                </Form>
+            </Modal.Content>
+        </Modal>
+    )
+}
+
+export default CalModal;

src/components/AdminPage/ModbusCmd/index.js

@@ -1,11 +1,14 @@
 import React from 'react';
 import {Container, Segment, Input, Form, Button} from 'semantic-ui-react';
 import {getRequest} from '../../../actions';
+import CalModal from './CalModal';
 
 class ModbusCmdPage extends React.Component {
 
     state = {
-        res: ''
+        res: '',
+        value: '',
+        modal: false
     }
 
     handleSubmit = (data) => {
@@ -24,6 +27,35 @@ class ModbusCmdPage extends React.Component {
             });
     }
 
+    renderModal = () => {
+        let {i18n} = this.props;
+        return (
+            this.state.modal ? 
+            (
+                <CalModal i18n={i18n} onClose={this.closeModal} onSubmit={this.submitModal} />
+            ): null
+        )
+    }
+
+    closeModal = () => {
+        this.setState({
+            modal: false
+        })
+    }
+
+    submitModal = (data) => {
+        if(!data) return ;
+        let {showDialog} = this.props;
+        let {r1, r2, s1, s2, val} = data;
+        if(!isFinite(r1) || !isFinite(r2) || !isFinite(s1) || !isFinite(s2) || !isFinite(val)) return showDialog('請勿輸入數字以外的內容');
+
+        let value = Math.round(((val - r1) * (s2 - s1)) / (r2 - r1));
+
+        this.setState({
+            value
+        }, ()=>{this.closeModal()})
+    }
+
     render() {
         return (
             <Container>
@@ -66,7 +98,20 @@ class ModbusCmdPage extends React.Component {
                             <Input name="addr" label="請輸入位址" />
                         </Form.Field>
                         <Form.Field>
-                            <Input name="val" label="請輸入數值" />
+                            <Input name="val" 
+                                label="請輸入數值" 
+                                action={{
+                                    content: "數值換算",
+                                    basic: true,
+                                    type: 'button',
+                                    onClick: ()=>{
+                                        this.setState({
+                                            modal: true
+                                        })
+                                    }
+                                }} 
+                                value={this.state.value} 
+                                onChange={(e,d) => {this.setState({value: d.value})}}  />
                         </Form.Field>
                         <Button type="submit" content="送出" fluid />
                     </Form>
@@ -78,6 +123,7 @@ class ModbusCmdPage extends React.Component {
                         ))
                     }
                 </Segment>
+                {this.renderModal()}
             </Container>
         )
     }

src/components/AdminPage/Wristband/LocStatus/ListItem.js

@@ -5,7 +5,7 @@ import {convertTime, padding} from '../../../../tools';
 const ListItem = ({i18n, data}) => {
 
     return (
-        <Table.Row style={{color: padding(data.timestamp, 13, 1, '0') < (Date.now() - 60000) ? '#f00' : 'inherit'}}>
+        <Table.Row style={{color: data.loss != 0 ? '#f00' : 'inherit'}}>
             <Table.Cell>{data.wristband}</Table.Cell>
             <Table.Cell>{data.name}</Table.Cell>
             <Table.Cell>{data.locname}</Table.Cell>

src/components/AdminPage/Wristband/LocStatus/index.js

@@ -10,7 +10,7 @@ const sort_icon = {
 
 class LocStatus extends React.Component{
     state = {
-        autoRefresh: false,
+        autoRefresh: true,
         list: [],
         sort: {
             field: '',
@@ -21,6 +21,7 @@ class LocStatus extends React.Component{
 
     componentDidMount(){
         this.getList();
+        this.checkRefresh();
     }
 
     componentWillUnmount(){

src/components/AdminPage/Wristband/LocStatusWloc/index.js

@@ -94,7 +94,7 @@ class LocStatusWloc extends React.Component {
                                         {
                                             t.list ? 
                                             t.list.map((tt, idx) => {
-                                                let isExpire = padding(tt.timestamp, 13, 1, '0') < (Date.now() - 60000) ? true : false;
+                                                let isExpire = tt.loss == 1 ? true : false;
                                                 return (<List.Item key={idx}>
                                                     {
                                                         tt.name ? (

src/components/AdminPage/Wristband/Location/index.js

@@ -75,13 +75,15 @@ class Location extends React.Component {
 
     delLocation = (id) => {
         if(!id) return ;
-        let {showDialog} = this.props;
+        let {showDialog, callConfirm} = this.props;
+        callConfirm('確定要刪除這筆定位點資料?', ()=>{
             fetch('/api/wristband/dellocation', getRequest({id}))
                 .then(response => response.json())
                 .then(json => {
                     if(json.status != 1) return showDialog(json.message);
                     this.getList();
                 })
+        })
     }
 
     render() {

src/components/AdminPage/Wristband/WristbandInfo/ListItem.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Table, Button } from 'semantic-ui-react';
 
-const ListItem = ({ i18n, data, delWristband, editWristband, showPathInfo }) => {
+const ListItem = ({ i18n, data, delWristband, editWristband, showPathInfo, showHealthInfo }) => {
 
     return (
         <Table.Row>
@@ -9,6 +9,7 @@ const ListItem = ({ i18n, data, delWristband, editWristband, showPathInfo }) =>
                 <Button content="Edit" basic onClick={()=>{editWristband(1, data)}} />
                 <Button content="Delete" basic onClick={()=>{delWristband(data.uid)}} />
                 <Button content="地點紀錄" basic onClick={()=>{showPathInfo(data.mac, data.name)}} />
+                <Button content="生理資訊紀錄" basic onClick={()=>{showHealthInfo(data.mac, data.name)}} />
             </Table.Cell>
             <Table.Cell>{data.mac}</Table.Cell>
             <Table.Cell>{data.name}</Table.Cell>

src/components/AdminPage/Wristband/WristbandInfo/WristbandHealthInfo.js

@@ -0,0 +1,150 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Modal, List, Menu, Button, Input, Label, Table } from 'semantic-ui-react';
+import Datetime from 'react-datetime';
+import {convertTime, padding} from '../../../../tools'
+
+const getDayTime = ()=>{
+    let d = new Date();
+    d.setHours(0, 0, 0, 0);
+    return d.getTime();
+}
+
+class WristbandPathInfo extends React.Component{
+    state = {
+        list: [],
+        page: 1,
+        maxPage: 1,
+        stime: (getDayTime()),
+        etime: (Date.now())
+    }
+
+    componentDidMount(){
+
+    }
+
+    closeView = () => {
+        this.setState({
+            list: [],
+            page: 1,
+            maxPage: 1,
+            stime: (getDayTime()),
+            etime: (Date.now())
+        }, ()=>{
+            this.props.closeModal();
+        })
+    }
+
+    getList = () => {
+        let {mac, showDialog, getRequest} = this.props;
+        fetch('/api/wristband/getwristbandhealthinfo', getRequest({
+            mac,
+            stime: Math.floor(this.state.stime / 1000),
+            etime: Math.floor(this.state.etime / 1000)
+            }))
+            .then(response=>response.json())
+            .then(json => {
+                if(json.status != 1) return showDialog(json.message);
+                let l = json.data.record || [];
+                this.setState({
+                    list: l,
+                    page: 1,
+                    maxPage: Math.ceil(l.length / 20)
+                })
+            })
+    }
+
+    nextPage = () => {
+        let {page, maxPage} = this.state;
+        this.setState({
+            page: page >= maxPage ? maxPage : page+1
+        })
+    }
+
+    prevPage = () => {
+        let {page} = this.state;
+        this.setState({
+            page: page <= 1 ? 1 : page-1
+        })
+    }
+
+    render() {
+        let {closeModal, open} = this.props;
+
+        let tmpList = this.state.list.slice((this.state.page - 1) * 20, ((this.state.page - 1) * 20 + 20))
+
+        return (
+            <Modal open={open} onClose={()=>{this.closeView()}}>
+                <Modal.Header>
+                    手環名稱: {this.props.wbname}
+                </Modal.Header>
+                <Modal.Content>
+                    <Menu>
+                        <Menu.Item>
+                            <Input label="起始時間" input={
+                            <Datetime dateFormat="YYYY-MM-DD" 
+                                timeFormat="HH:mm" 
+                                value={this.state.stime} 
+                                input={true}
+                                onChange={(e)=>{ this.setState({stime: (e.valueOf())}) }} />
+                            }/>
+                        </Menu.Item>
+                        <Menu.Item>
+                            <Input label="結束時間" input={
+                            <Datetime dateFormat="YYYY-MM-DD" 
+                                timeFormat="HH:mm" 
+                                value={this.state.etime} 
+                                input={true}
+                                onChange={(e)=>{ this.setState({etime: (e.valueOf())}) }} />
+                            }/>
+                        </Menu.Item>
+                        <Menu.Menu position="right">
+                            <Menu.Item>
+                                <Button type="button" content="搜尋" size="tiny" basic onClick={()=>{this.getList()}} />
+                            </Menu.Item>
+                        </Menu.Menu>
+                    </Menu>
+
+                    <div style={{textAlign: 'center'}}>
+                        <Button content="上一頁" size="small" labelPosition="left" basic={true} color="black" icon="arrow left" onClick={() => {this.prevPage()}} />
+                        <Label basic={true} color="blue" content={`${this.state.page || 1} / ${this.state.maxPage || 1}`} />
+                        <Button content="下一頁" size="small" labelPosition="right" basic={true} color="black" icon="arrow right" onClick={() => {this.nextPage()}} />
+                    </div>
+
+                    <Table>
+                        <Table.Header>
+                            <Table.Row>
+                                <Table.HeaderCell>HR</Table.HeaderCell>
+                                <Table.HeaderCell>步數</Table.HeaderCell>
+                                <Table.HeaderCell>SBP</Table.HeaderCell>
+                                <Table.HeaderCell>DBP</Table.HeaderCell>
+                                <Table.HeaderCell>卡路里</Table.HeaderCell>
+                                <Table.HeaderCell>SOS</Table.HeaderCell>
+                                <Table.HeaderCell>更新時間</Table.HeaderCell>
+                            </Table.Row>
+                        </Table.Header>
+                        <Table.Body>
+                            {
+                                tmpList.map((t,idx) => {
+                                    return (
+                                        <Table.Row key={idx}>
+                                            <Table.Cell>{parseInt(t.wphyloghr, 16)}</Table.Cell>
+                                            <Table.Cell>{parseInt(t.wphylogsteps, 16)}</Table.Cell>
+                                            <Table.Cell>{parseInt(t.wphylogsbp, 16)}</Table.Cell>
+                                            <Table.Cell>{parseInt(t.wphylogdbp, 16)}</Table.Cell>
+                                            <Table.Cell>{parseInt(t.wphylogcal, 16)}</Table.Cell>
+                                            <Table.Cell>{parseInt(t.wphylogsos, 16)}</Table.Cell>
+                                            <Table.Cell>{convertTime(t.wphylogtst, true)}</Table.Cell>
+                                        </Table.Row>
+                                    )
+                                })
+                            }
+                        </Table.Body>
+                    </Table>
+                </Modal.Content>
+            </Modal>
+        )
+    }
+}
+
+export default WristbandPathInfo;

src/components/AdminPage/Wristband/WristbandInfo/WristbandPathInfo.js

@@ -13,6 +13,8 @@ const getDayTime = ()=>{
 class WristbandPathInfo extends React.Component{
     state = {
         list: [],
+        page: 1,
+        maxPage: 1,
         stime: (getDayTime()),
         etime: (Date.now())
     }
@@ -24,6 +26,8 @@ class WristbandPathInfo extends React.Component{
     closeView = () => {
         this.setState({
             list: [],
+            page: 1,
+            maxPage: 1,
             stime: (getDayTime()),
             etime: (Date.now())
         }, ()=>{
@@ -41,14 +45,34 @@ class WristbandPathInfo extends React.Component{
             .then(response=>response.json())
             .then(json => {
                 if(json.status != 1) return showDialog(json.message);
+                let l = json.data.record || [];
                 this.setState({
-                    list: json.data.record || []
+                    list: l,
+                    page: 1,
+                    maxPage: Math.ceil(l.length / 20)
                 })
             })
     }
 
+    nextPage = () => {
+        let {page, maxPage} = this.state;
+        this.setState({
+            page: page >= maxPage ? maxPage : page+1
+        })
+    }
+
+    prevPage = () => {
+        let {page} = this.state;
+        this.setState({
+            page: page <= 1 ? 1 : page-1
+        })
+    }
+
     render() {
         let {closeModal, open} = this.props;
+
+        let tmpList = this.state.list.slice((this.state.page - 1) * 20, ((this.state.page - 1) * 20 + 20))
+
         return (
             <Modal open={open} onClose={()=>{this.closeView()}}>
                 <Modal.Header>
@@ -80,9 +104,16 @@ class WristbandPathInfo extends React.Component{
                             </Menu.Item>
                         </Menu.Menu>
                     </Menu>
+
+                    <div style={{textAlign: 'center'}}>
+                        <Button content="上一頁" size="small" labelPosition="left" basic={true} color="black" icon="arrow left" onClick={() => {this.prevPage()}} />
+                        <Label basic={true} color="blue" content={`${this.state.page || 1} / ${this.state.maxPage || 1}`} />
+                        <Button content="下一頁" size="small" labelPosition="right" basic={true} color="black" icon="arrow right" onClick={() => {this.nextPage()}} />
+                    </div>
+
                     <List divided>
                         {
-                            this.state.list.map((t,idx) => {
+                            tmpList.map((t,idx) => {
                                 return (
                                     <List.Item key={idx}>
                                         {

src/components/AdminPage/Wristband/WristbandInfo/index.js

@@ -4,6 +4,7 @@ import {getRequest} from '../../../../actions';
 import ListItem from './ListItem';
 import WristbandModal from './WristbandModal';
 import WristbandPathInfo from './WristbandPathInfo';
+import WristbandHealthInfo from './WristbandHealthInfo';
 
 const stateDefault = ()=>({
         list: [],
@@ -16,6 +17,11 @@ const stateDefault = ()=>({
             open: false,
             mac: '',
             name: ''
+        },
+        healthinfo: {
+            open: false,
+            mac: '',
+            name: ''
         }
     })
 
@@ -44,13 +50,16 @@ class WristbandInfo extends React.Component {
 
     delWristband = (id) => {
         if(!id) return ;
+        let {showDialog, callConfirm} = this.props;
 
+        callConfirm('確定要刪除這筆手環資料?', ()=>{
             fetch('/api/wristband/delwristband', getRequest({id}))
                 .then(response=>response.json())
                 .then(json=>{
                     if(json.status!=1) return showDialog(json.message);
                     this.getList();
                 })
+        })
     }
 
     openModal = (type, data = {}) => {
@@ -108,6 +117,24 @@ class WristbandInfo extends React.Component {
         })
     }
 
+    showHealthInfo = (mac, name) => {
+        if(!mac) return ;
+        this.setState({
+            healthinfo:{
+                open: true,
+                mac,
+                name
+            }
+        })
+    }
+    closeHealthInfo = () => {
+        this.setState({
+            healthinfo: {
+                ...stateDefault().healthinfo
+            }
+        })
+    }
+
     render() {
         let { i18n } = this.props;
         return (
@@ -129,7 +156,12 @@ class WristbandInfo extends React.Component {
                         <Table.Body>
                             {
                                 this.state.list.map((t,idx) => (
-                                    <ListItem key={idx} data={t} i18n={i18n} delWristband={this.delWristband} editWristband={this.openModal} showPathInfo={this.showPathInfo}/>
+                                    <ListItem key={idx} data={t} 
+                                        i18n={i18n} 
+                                        delWristband={this.delWristband} 
+                                        editWristband={this.openModal} 
+                                        showPathInfo={this.showPathInfo}
+                                        showHealthInfo={this.showHealthInfo} />
                                 ))
                             }
                         </Table.Body>
@@ -148,6 +180,13 @@ class WristbandInfo extends React.Component {
                     closeModal={this.closePathInfo}
                     showDialog={this.props.showDialog}
                     getRequest={getRequest} />
+                <WristbandHealthInfo i18n={i18n}
+                    open={this.state.healthinfo.open} 
+                    mac={this.state.healthinfo.mac}
+                    wbname={this.state.healthinfo.name}
+                    closeModal={this.closeHealthInfo}
+                    showDialog={this.props.showDialog}
+                    getRequest={getRequest} />
             </Container>
         )
     }

src/components/ConfirmBox.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import {Modal, Button} from 'semantic-ui-react';
+
+const ConfirmBox = ({obj, getNext}) => (
+	<Modal open={obj && obj.msg != '' ? true : false} onClose={() => getNext()} style={{zIndex: "2001"}}>
+		<Modal.Content>{obj && obj.msg ? obj.msg : ''}</Modal.Content>
+		<Modal.Actions>
+			<Button onClick={() => getNext(true, obj.act)} content="Submit" />
+            <Button onClick={() => getNext()} content="Cancel" />
+		</Modal.Actions>
+	</Modal>
+);
+
+
+export default ConfirmBox;

src/components/Login/Form.js

@@ -15,7 +15,7 @@ const loginForm = ({i18n, page, onSubmit}) => {
 			  }}>
 			<Segment stacked={true} >
 				<Form.Field>
-					<Input icon="user" iconPosition="left" name="acc" placeholder={typeof i18n.t == 'function' ? i18n.t(`${page}.input.placeholder.account`) : ''} />
+					<Input icon="user" iconPosition="left" autoFocus={true} name="acc" placeholder={typeof i18n.t == 'function' ? i18n.t(`${page}.input.placeholder.account`) : ''} />
 				</Form.Field>
 				<Form.Field>
 					<Input icon="lock" iconPosition="left" name="pass" type="password" placeholder={typeof i18n.t == 'function' ? i18n.t(`${page}.input.placeholder.password`) : ''} />

src/containers/AdminPage/ActionLinkAdd.js

@@ -1,6 +1,6 @@
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
-import {add_dialog_msg, toggle_loading} from '../../actions';
+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

src/containers/AdminPage/Wristband/Location.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { add_dialog_msg, toggle_loading } from '../../../actions';
+import { add_dialog_msg, toggle_loading, add_confirm } from '../../../actions';
 import LocationPage from '../../../components/AdminPage/Wristband/Location';
 
 
@@ -13,6 +13,9 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
     },
     toggleLoading: (flag = false) => {
         dispatch(toggle_loading(flag));
+    },
+    callConfirm: (msg, act = null) => {
+        dispatch(add_confirm(msg, act))
     }
 })
 

src/containers/AdminPage/Wristband/WristbandInfo.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { add_dialog_msg, toggle_loading } from '../../../actions';
+import { add_dialog_msg, toggle_loading, add_confirm } from '../../../actions';
 import WristbandInfo from '../../../components/AdminPage/Wristband/WristbandInfo';
 
 
@@ -13,6 +13,9 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
     },
     toggleLoading: (flag = false) => {
         dispatch(toggle_loading(flag));
+    },
+    callConfirm: (msg, act = null) => {
+        dispatch(add_confirm(msg, act))
     }
 })
 

src/containers/AdminPage/Wristband/index.js

@@ -1,5 +1,5 @@
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
-import {add_dialog_msg, toggle_loading} from '../../../actions';
+import { add_dialog_msg, toggle_loading, add_confirm } from '../../../actions';
 import WristbandPage from '../../../components/AdminPage/Wristband';
 
 

src/containers/AdminPage/index.js

@@ -4,6 +4,7 @@ import Datetime from 'react-datetime';
 import MainMenu from '../../containers/MenuControl';
 import Loading from '../../containers/LoadingControl';
 import Dialog from '../DialogControl';
+import ConfirmBox from '../ConfirmControl';
 import Dashboard from '../../containers/DashBoard';
 import {toggle_dashboard} from '../../actions'
 
@@ -27,6 +28,7 @@ class AdmPage extends React.Component {
 			<div style={{height: '100%'}}>
 				<Loading />
 				<Dialog />
+				<ConfirmBox />
 				<MainMenu i18n={i18n} >
 					<Dashboard />
 					{children}

src/containers/ConfirmControl.js

@@ -0,0 +1,19 @@
+import { connect } from 'react-redux';
+import ConfirmBox from '../components/ConfirmBox';
+import { remove_confirm } from '../actions'
+
+const mapStateToProps = (state) => ({
+    obj: state.confirmbox[0] || null
+});
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+    getNext: (doit = false, act = null) => {
+        //get next dialog message
+        if (doit) {
+            if (typeof act == 'function') act();
+        }
+        dispatch(remove_confirm());
+    }
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(ConfirmBox);

src/reducers/confirmbox.js

@@ -0,0 +1,15 @@
+const confirmbox = (state = [], action) => {
+    switch (action.type) {
+        case 'confirm_addmsg':
+            return [...state, {
+                msg: action.msg,
+                act: action.act || null
+            }];
+        case 'confirm_remove':
+            return state.slice(1);
+        default:
+            return state;
+    }
+}
+
+export default confirmbox;

src/reducers/index.js

@@ -1,16 +1,18 @@
-import {combineReducers} from 'redux';
+import { combineReducers } from 'redux';
 import dialog from './dialog';
 import i18n from './i18n';
 import ui from './ui';
 import sysinfo from './sysinfo';
 import lists from './lists';
+import confirmbox from './confirmbox';
 
 const reducers = combineReducers({
     dialog,
     i18n,
     ui,
     sysinfo,
-	lists
+    lists,
+    confirmbox
 });
 
 export default reducers;