add ipcam set page

config.json

@@ -20,7 +20,8 @@
         "db8": "jciocln",
         "db9": "jcbtwristband",
         "db10": "jcmblog",
-        "db11": "jciocserver"
+        "db11": "jciocserver",
+        "db12": "jcioccam"
     },
     "permission": {
         "dio": true,

includes/language/zh.json

@@ -66,6 +66,9 @@
     "ERR0064": "MAC Addr 輸入錯誤",
     "ERR0065": "版本輸入錯誤",
     "ERR0066": "SNMP Level輸入錯誤",
+    "ERR0067": "型號輸入錯誤",
+    "ERR0068": "事件數量輸入錯誤",
+    "ERR0069": "圖片數量輸入錯誤",
 
     "ERR7000": "命令執行失敗",
 

route/api/ipcam.js

@@ -13,22 +13,22 @@ router
     .get('/', (req, res, n) => {
         res.send({ name: 'WebIO IPCam API' });
     })
-    .post('*', async(req,res,n) => {
-        try{
+    .post('*', async(req, res, n) => {
+        try {
             res.db = await mysql.getConn();
-        }catch(e){
+        } catch (e) {
             console.log(`Get DB Connection ERROR ${e}`);
             return n('ERR8100');
         }
         n();
     })
-    .post('/getipcamlist', (req,res,n) => {
-        if(!config.permission.ipcam) return n('ERR9000');
+    .post('/getipcamlist', (req, res, n) => {
+        if (!config.permission.ipcam) return n('ERR9000');
 
         let query = "select * from ??.??";
-        let param = [config.db.db1, 'ipcam'];
+        let param = [config.db.db1, 'jcioccamset'];
         res.db.query(query, param, (err, row) => {
-            if(err) return rt.err(res,err,n,'ERR8000');
+            if (err) return rt.err(res, err, n, 'ERR8000');
 
             res.api_res = {
                 record: tool.checkArray(row)
@@ -37,62 +37,131 @@ router
             n();
         });
     })
-    .post('/addipcam', (req,res,n) => {
-        if(!config.permission.ipcam) return n('ERR9000');
-        if(!tool.checkPermission(req)) return n('ERR9000');
+    .post('/addipcam', (req, res, n) => {
+        if (!config.permission.ipcam) return n('ERR9000');
+        if (!tool.checkPermission(req)) return n('ERR9000');
         let arr = req.body;
-        if(!arr.data) return n('ERR0000');
-        if(!arr.data.ip) return n('ERR0010');
-        if(!arr.data.name) return n('ERR0026');
+        if (!arr.data) return n('ERR0000');
+        if (!arr.data.ip) return n("ERR0010");
+        if (!arr.data.name) return n('ERR0026');
+        if (!arr.data.model) return n('ERR0067');
+        if (!arr.data.maxevents) return n('ERR0068');
+        if (!arr.data.maximg) return n('ERR0069');
+        if (!/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(arr.data.ip)) return n('ERR0025');
 
-        if(!/^\d{1,3}\.\d{1,3}.\d{1,3}.\d{1,3}$/.test(arr.data.ip)) return n('ERR0025');
+        let u = '';
+        let obj = so.get(req.headers['x-auth-token'] || '');
+        if (obj != null && 'user' in obj && 'account' in obj.user) u = obj.user.account;
+
+        let active = arr.data.active == 1 ? 1 : 0;
 
         let query = "select count(*) as c from ??.?? where `ip` = ?";
-        let param = [config.db.db1, 'ipcam', arr.data.ip];
+        let param = [config.db.db1, 'jcioccamset', arr.data.ip];
         res.db.query(query, param, (err, row) => {
-            if(err || row.length == 0) return rt.err(res,err,n,'ERR8000');
-            if(row[0]['c'] > 0) return n('ERR0027');
+            if (err || row.length == 0) return rt.err(res, err, n, 'ERR8000');
+
+            if (row[0].c >= 1) return n('ERR0027');
+
+            let query = "insert into ??.?? (`ip`, `name`, `model`, `maxevents`, `maximg`, `active`, `cuser`, `muser`, `ctime`, `mtime` ) \
+                values (?, ?, ?, ?, ?, ?, ?, ?, unix_timestamp(), unix_timestamp())";
+            let param = [config.db.db1, 'jcioccamset', arr.data.ip, arr.data.name, arr.data.model, arr.data.maxevents, arr.data.maximg, active, u, u];
 
-            let query = "insert into ??.?? (`name`, `ip`) values (?,?)";
-            let param = [config.db.db1, 'ipcam', arr.data.name, arr.data.ip];
             res.db.query(query, param, (err, row) => {
-                if(err) return rt.err(res,err,n,'ERR8001');
+                if (err) return rt.err(res, err, n, 'ERR8001');
+
                 res.api_res = {
                     record: []
-                };
-                n();
-            });
-        });
-    })
-    .post('/delipcam', (req,res,n) => {
-        if(!config.permission.ipcam) return n('ERR9000');
-        if(!tool.checkPermission(req)) return n('ERR9000');
-        let arr = req.body;
-        if(!arr.data) return n('ERR0000');
-        if(!arr.data.id) return n('ERR0028');
-
-        let query = "delete from ??.?? where `uid` = ?";
-        let param = [config.db.db1, 'ipcam', arr.data.id];
-        res.db.query(query, param, (err, row) => {
-            if(err) return rt.err(res,err,n,'ERR8003');
-            res.api_res = {
-                record: []
-            };
+                }
                 n();
             })
         })
-    .post('/editipcam', (req,res,n) => {
-        if(!config.permission.ipcam) return n('ERR9000');
-        if(!tool.checkPermission(req)) return n('ERR9000');
+    })
+    .post('/editipcam', (req, res, n) => {
+        if (!config.permission.ipcam) return n('ERR9000');
+        if (!tool.checkPermission(req)) return n('ERR9000');
         let arr = req.body;
-        if(!arr.data) return n('ERR0000');
-        if(!arr.data.id) return n('ERR0028');
-        if(!arr.data.name) return n('ERR0026');
+        if (!arr.data) return n('ERR0000');
+        if (!arr.data.id) return n('ERR0028');
+        if (!arr.data.ip) return n("ERR0010");
+        if (!arr.data.name) return n('ERR0026');
+        if (!arr.data.model) return n('ERR0067');
+        if (!arr.data.maxevents) return n('ERR0068');
+        if (!arr.data.maximg) return n('ERR0069');
+        if (!/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(arr.data.ip)) return n('ERR0025');
+
+        let u = '';
+        let obj = so.get(req.headers['x-auth-token'] || '');
+        if (obj != null && 'user' in obj && 'account' in obj.user) u = obj.user.account;
+
+        let active = arr.data.active == 1 ? 1 : 0;
+
+        let query = "select count(*) as c from ??.?? where `ip` = ? and `uid` != ?";
+        let param = [config.db.db1, 'jcioccamset', arr.data.ip, arr.data.id];
+
+        res.db.query(query, param, (err, row) => {
+            if (err || row.length == 0) return rt.err(res, err, n, 'ERR8000');
+
+            if (row[0].c >= 1) return n('ERR0027');
+
+            let query = "update ??.?? set \
+                `ip` = ?, \
+                `name` = ?, \
+                `model` = ?, \
+                `maxevents` = ?, \
+                `maximg` = ?, \
+                `active` = ?, \
+                `muser` = ?, \
+                `mtime` = unix_timestamp() \
+                where \
+                `uid` = ?";
+            let param = [config.db.db1, 'jcioccamset', arr.data.ip, arr.data.name, arr.data.model, arr.data.maxevents, arr.data.maximg, active, u, arr.data.id];
+            res.db.query(query, param, (err, row) => {
+                if (err) return rt.err(res, err, n, 'ERR8002');
+
+                res.api_res = {
+                    record: []
+                }
+                n();
+            })
+        });
+    })
+    .post('/delipcam', (req, res, n) => {
+        if (!config.permission.ipcam) return n('ERR9000');
+        if (!tool.checkPermission(req)) return n('ERR9000');
+        let arr = req.body;
+        if (!arr.data) return n('ERR0000');
+        if (!arr.data.id) return n('ERR0028');
+
+        res.db.query(`use ${config.db.db1}`);
+        let query = "delete from ??.?? \
+            where `uid` = ?";
+        let param = [config.db.db1, 'jcioccamset', arr.data.id];
+
+        res.db.query(query, param, (err, row) => {
+            if (err) return rt.err(res, err, n, 'ERR8003');
+
+            res.api_res = {
+                record: []
+            }
+            n();
+        })
+    })
+    .post('/swipcamactive', (req, res, n) => {
+        if (!config.permission.ipcam) return n('ERR9000');
+        if (!tool.checkPermission(req)) return n('ERR9000');
+        let arr = req.body;
+        if (!arr.data) return n('ERR0000');
+        if (!arr.data.id) return n('ERR0028');
+
+        let query = "update ??.?? set \
+            `active` = case when `active` = 1 then 0 else 1 end \
+            where \
+            `uid` = ?";
+        let param = [config.db.db1, 'jcioccamset', arr.data.id];
+
+        res.db.query(query, param, (err, row) => {
+            if (err) return rt.err(res, err, n, 'ERR8002');
 
-        let query = "update ??.?? set `name` = ? where `uid` = ?";
-        let param = [config.db.db1, 'ipcam', arr.data.name, arr.data.id];
-        res.db.query(query, param, (err,row) => {
-            if(err) return rt.err(res,err,n,'ERR8002');
             res.api_res = {
                 record: []
             }

src/components/AdminPage/IPCam/IPCamModal.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Modal, Form, Grid, Button, Input, Checkbox } from 'semantic-ui-react';
+
+const IPCamModal = ({ i18n, open, type, data, closeModal, submitModal }) => {
+
+    return (
+        <Modal open={open}>
+            <Modal.Header content={type == 1 ? '修改資料' : '新增資料'} />
+            <Modal.Content>
+                <Form onSubmit={(e,d) => {
+                        e.preventDefault();
+                        submitModal(type, d.formData);
+                    }} serializer={e=>{
+                        let json = {};
+                        
+                        let name = e.querySelector('input[name="name"]');
+                        if(name && 'value' in name) json.name = name.value;
+                        let ip = e.querySelector('input[name="ip"]');
+                        if(ip && 'value' in ip) json.ip = ip.value;
+                        let model = e.querySelector('select[name="model"]');
+                        if(model && 'value' in model) json.model = model.value;
+                        let maxevents = e.querySelector('input[name="maxevents"]');
+                        if(maxevents && 'value' in maxevents) json.maxevents = maxevents.value;
+                        let maximg = e.querySelector('input[name="maximg"]');
+                        if(maximg && 'value' in maximg) json.maximg = maximg.value;
+                        let active = e.querySelector('input[type="checkbox"]');
+                        if(active && 'checked' in active) json.active = active.checked;
+                        if(type == 1) json.id = data.uid;
+
+                        return json;
+                    }}>
+                    <Form.Field>
+                        <Checkbox label="啟用裝置" defaultChecked={data.active == 1} name="active" />
+                    </Form.Field>
+                    <Form.Field>
+                        <Input name="name" label="名稱" defaultValue={data.name} />
+                    </Form.Field>
+                    <Form.Field>
+                        <Input name="ip" label="IP" defaultValue={data.ip} />
+                    </Form.Field>
+                    <Form.Field>
+                        <select defaultValue={data.model} name="model">
+                            <option value="">請選擇型號</option>
+                            <option value="axis">axis</option>
+                            <option value="grandstream">grandstream</option>
+                        </select>
+                    </Form.Field>
+                    <Form.Field>
+                        <Input name="maxevents" label="最大儲存事件數量(1-5)" defaultValue={data.maxevents} />
+                    </Form.Field>
+                    <Form.Field>
+                        <Input name="maximg" label="最大儲存圖片數量(1-10)" defaultValue={data.maximg} />
+                    </Form.Field>
+                    <Grid columns={2}>
+                        <Grid.Column>
+                            <Button type="submit" fluid content="送出" />
+                        </Grid.Column>
+                        <Grid.Column>
+                            <Button type="button" fluid content="取消" onClick={()=>{closeModal()}} />
+                        </Grid.Column>
+                    </Grid>
+                </Form>
+            </Modal.Content>
+        </Modal>
+    )
+}
+
+export default IPCamModal;

src/components/AdminPage/IPCam/ListItem.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import {Table, Button} from 'semantic-ui-react';
+
+const ListItem = ({ i18n, data, swActive, openModal, delIPCam }) => {
+
+    return (
+        <Table.Row>
+            <Table.Cell>
+                <Button basic content="修改" type="button" onClick={()=>openModal(1, data)} />
+                <Button basic content="刪除" type="button" onClick={()=>delIPCam(data.uid)}/>
+                <Button basic content={data.active == 1 ? '停用' : '啟用'} type="button" onClick={()=>swActive(data.uid)} />
+            </Table.Cell>
+            <Table.Cell>{data.name}</Table.Cell>
+            <Table.Cell>{data.ip}</Table.Cell>
+            <Table.Cell>{data.model}</Table.Cell>
+            <Table.Cell>{data.active == 1? '啟用' : '停用'}</Table.Cell>
+        </Table.Row>
+    )
+}
+
+export default ListItem;

src/components/AdminPage/IPCam/index.js

@@ -1,12 +1,142 @@
 import React from 'react';
-import {} from 'semantic-ui-react';
+import { Container, Segment, Table, Button, Label } from 'semantic-ui-react';
+import {getRequest} from '../../../actions';
+import ListItem from './ListItem';
+import IPCamModal from './IPCamModal';
 
-class IPCamPage extends React.Component{
 
-    render(){
+const stateDefault = ()=>({
+    list: [],
+    modal: {
+        type: 0,
+        open: false,
+        data: {}
+    }
+})
 
+class IPCamPage extends React.Component {
+    state = {
+        ...stateDefault()
+    }
+
+    componentDidMount(){
+        this.getList();
+    }
+
+    getList = () => {
+        let {toggleLoading, showDialog} = this.props;
+        toggleLoading(1);
+        fetch('/api/ipcam/getipcamlist', getRequest())
+            .then(response => response.json())
+            .then(json => {
+                toggleLoading(0);
+                if(json.status != 1) return showDialog(json.message);
+                let list = json.data.record || [];
+                this.setState({
+                    list
+                })
+            })
+    }
+
+    swActive = (id) => {
+        if(!id) return ;
+        let {toggleLoading, showDialog} = this.props;
+        toggleLoading(1);
+        fetch('/api/ipcam/swipcamactive', getRequest({id}))
+            .then(response=>response.json())
+            .then(json => {
+                toggleLoading(0);
+                if(json.status != 1) return showDialog(json.message);
+                this.getList();
+            })
+    }
+
+    openModal = (type, data = {}) => {
+        this.setState({
+            modal: {
+                type,
+                data,
+                open: true
+            }
+        })
+    }
+    closeModal = () => {
+        this.setState({
+            modal: {
+                ...stateDefault().modal
+            }
+        })
+    }
+    submitModal = (type, data = {}) => {
+        let {toggleLoading,showDialog} = this.props;
+        if(type == 1 && !data.id) return showDialog('資料讀取錯誤');
+        if(!data.maxevents || data.maxevents < 1 || data.maxevents > 5) return showDialog('事件數量請介於1-5間');
+        if(!data.maximg || data.maximg < 1 || data.maximg > 10) return showDialog('圖片數量請介於1-5間');
+        if(!data.name) return showDialog('請輸入名稱');
+        if(!data.ip) return showDialog('請輸入IP');
+        if(!data.model) return showDialog('請選擇型號');
+
+        toggleLoading(1);
+        fetch('/api/ipcam/addipcam', getRequest(data))
+            .then(response=>response.json())
+            .then(json => {
+                toggleLoading(0);
+                if(json.status != 1) return showDialog(json.message);
+                this.closeModal();
+                this.getList();
+            })
+    }
+
+    delIPCam = (id) => {
+        if(!id) return ;
+        let {callConfirm, toggleLoading, showDialog} = this.props;
+        callConfirm('確定要刪除此筆資料?', ()=>{
+            fetch('/api/ipcam/delipcam', getRequest({id}))
+                .then(response=>response.json())
+                .then(json => {
+                    if(json.status != 1) return showDialog(json.message);
+                    this.getList();
+                })
+        });
+    }
+
+    render() {
+        let {i18n} = this.props;
         return (
-            null
+            <Container>
+                <Segment className="clearfix">
+                    <Button basic content="新增" icon="plus" floated="right" type="button" style={{marginBottom: '15px'}} color="green" onClick={()=>{this.openModal(0)}} />
+                    <Table>
+                        <Table.Header>
+                            <Table.Row>
+                                <Table.HeaderCell>操作</Table.HeaderCell>
+                                <Table.HeaderCell>名稱</Table.HeaderCell>
+                                <Table.HeaderCell>IP</Table.HeaderCell>
+                                <Table.HeaderCell>型號</Table.HeaderCell>
+                                <Table.HeaderCell>啟用狀態</Table.HeaderCell>
+                            </Table.Row>
+                        </Table.Header>
+                        <Table.Body>
+                            {
+                                this.state.list.map((t,idx) => (
+                                    <ListItem key={idx} 
+                                        i18n={i18n} 
+                                        data={t}
+                                        swActive={this.swActive}
+                                        delIPCam={this.delIPCam}
+                                        openModal={this.openModal} />
+                                ))
+                            }
+                        </Table.Body>
+                    </Table>
+                </Segment>
+                <IPCamModal i18n={i18n}
+                    open={this.state.modal.open}
+                    data={this.state.modal.data}
+                    type={this.state.modal.type}
+                    closeModal={this.closeModal}
+                    submitModal={this.submitModal} />
+            </Container>
         )
     }
 }

src/containers/AdminPage/IPCam.js

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