add ipcam set page

This commit is contained in:
Jay 2017-05-03 11:16:01 +08:00
parent 27cd09220e
commit 9ed476df9c
7 changed files with 348 additions and 53 deletions

View File

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

View File

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

View File

@ -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(!/^\d{1,3}\.\d{1,3}.\d{1,3}.\d{1,3}$/.test(arr.data.ip)) return n('ERR0025');
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');
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('/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.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');
.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');
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];
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');
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('/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');
if(!arr.data.name) return n('ERR0026');
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: []
}

View File

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

View File

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

View File

@ -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>
)
}
}

View File

@ -1,17 +1,20 @@
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) => ({
i18n: state.i18n
i18n: state.i18n
});
const mapDispatchToProps = (dispatch, ownProps) => ({
showDialog: (msg) => {
dispatch(add_dialog_msg(msg));
},
showDialog: (msg) => {
dispatch(add_dialog_msg(msg));
},
toggleLoading: (flag = false) => {
dispatch(toggle_loading(flag));
},
callConfirm: (msg, act = null) => {
dispatch(add_confirm(msg, act));
}
})