add ipcam set page
This commit is contained in:
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user