2017-03-27 06:53:34 +00:00
|
|
|
import React from 'react';
|
2017-05-04 06:36:29 +00:00
|
|
|
import { Container, Segment, Table, Button, Label, Message } from 'semantic-ui-react';
|
2017-05-03 03:16:01 +00:00
|
|
|
import {getRequest} from '../../../actions';
|
|
|
|
import ListItem from './ListItem';
|
|
|
|
import IPCamModal from './IPCamModal';
|
2017-05-04 06:36:29 +00:00
|
|
|
import EvtModal from './EventModal';
|
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: {}
|
2017-05-04 06:36:29 +00:00
|
|
|
},
|
|
|
|
evt: {
|
|
|
|
open: false,
|
|
|
|
list: [],
|
|
|
|
name: '',
|
|
|
|
sel: -1,
|
|
|
|
id: -1
|
2017-05-03 03:16:01 +00:00
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
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);
|
2017-05-03 05:10:04 +00:00
|
|
|
let url = type == 1 ? '/api/ipcam/editipcam' : '/api/ipcam/addipcam';
|
|
|
|
fetch(url, getRequest(data))
|
2017-05-03 03:16:01 +00:00
|
|
|
.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-04 06:36:29 +00:00
|
|
|
getEvents = (id, name = '') => {
|
|
|
|
if(!id) return ;
|
|
|
|
if(id==-1) id = this.state.evt.id;
|
|
|
|
let {callConfirm, toggleLoading, showDialog} = this.props;
|
|
|
|
toggleLoading(1);
|
|
|
|
fetch('/api/ipcam/getevents', getRequest({id}))
|
|
|
|
.then(response=>response.json())
|
|
|
|
.then(json => {
|
|
|
|
toggleLoading(0);
|
|
|
|
if(json.status != 1) return showDialog(json.message);
|
|
|
|
this.setState({
|
|
|
|
evt: {
|
|
|
|
open: true,
|
|
|
|
list: json.data.record || [],
|
|
|
|
name: name != '' ? name : this.state.evt.name,
|
|
|
|
sel: -1,
|
|
|
|
id
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
closeEventModal = () => {
|
|
|
|
this.setState({
|
|
|
|
evt: {
|
|
|
|
...stateDefault().evt
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
changeSelectEvent = (idx) => {
|
|
|
|
if(!isFinite(idx) || idx < 0) return ;
|
|
|
|
this.setState({
|
|
|
|
evt:{
|
|
|
|
...this.state.evt,
|
|
|
|
sel: idx
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
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">
|
2017-05-04 06:36:29 +00:00
|
|
|
<Message>
|
|
|
|
<Message.Header>攝影機事件通知位址</Message.Header>
|
|
|
|
<p>
|
|
|
|
{`${location.protocol}//${location.host}${location.port != '' ? `:${location.port}` : ''}/camevent`}
|
|
|
|
</p>
|
|
|
|
</Message>
|
2017-05-03 03:16:01 +00:00
|
|
|
<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>
|
2017-05-04 06:36:29 +00:00
|
|
|
<Table.HeaderCell>FTP路徑</Table.HeaderCell>
|
2017-05-03 03:16:01 +00:00
|
|
|
<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}
|
2017-05-04 06:36:29 +00:00
|
|
|
openModal={this.openModal}
|
|
|
|
getEvents={this.getEvents} />
|
2017-05-03 03:16:01 +00:00
|
|
|
))
|
|
|
|
}
|
|
|
|
</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} />
|
2017-05-04 06:36:29 +00:00
|
|
|
<EvtModal i18n={i18n}
|
|
|
|
open={this.state.evt.open}
|
|
|
|
list={this.state.evt.list}
|
|
|
|
sel={this.state.evt.sel}
|
|
|
|
name={this.state.evt.name}
|
|
|
|
refreshEvt={this.getEvents}
|
|
|
|
closeEventModal={this.closeEventModal}
|
|
|
|
changeSelectEvent={this.changeSelectEvent} />
|
2017-05-03 03:16:01 +00:00
|
|
|
</Container>
|
2017-03-27 06:53:34 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default IPCamPage;
|