68 lines
3.3 KiB
JavaScript
68 lines
3.3 KiB
JavaScript
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-M1124">AXIS-M1124</option>
|
|
<option value="GRANDSTREAM-GXV3610_HD">GRANDSTREAM-GXV3610_HD</option>
|
|
</select>
|
|
</Form.Field>
|
|
<Form.Field>
|
|
<Input name="maxevents" label="最大儲存事件數量(1-10)" defaultValue={data.maxevents} />
|
|
</Form.Field>
|
|
<Form.Field>
|
|
<Input name="maximg" label="最大儲存圖片數量(1-20)" 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; |