2017-03-27 06:53:34 +00:00
|
|
|
import React from 'react';
|
2017-05-03 03:16:01 +00:00
|
|
|
import { Container, Segment, Table, Button, Label } from 'semantic-ui-react';
|
|
|
|
import {getRequest} from '../../../actions';
|
|
|
|
import ListItem from './ListItem';
|
|
|
|
import IPCamModal from './IPCamModal';
|
2017-03-27 06:53:34 +00:00
|
|
|
|
|
|
|
|
2017-05-03 03:16:01 +00:00
|
|
|
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();
|
|
|
|
})
|
|
|
|
});
|
|
|
|
}
|
2017-03-27 06:53:34 +00:00
|
|
|
|
2017-05-03 03:16:01 +00:00
|
|
|
render() {
|
|
|
|
let {i18n} = this.props;
|
2017-03-27 06:53:34 +00:00
|
|
|
return (
|
2017-05-03 03:16:01 +00:00
|
|
|
<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>
|
2017-03-27 06:53:34 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default IPCamPage;
|