67 lines
3.2 KiB
JavaScript
67 lines
3.2 KiB
JavaScript
import React from 'react';
|
|
import { Modal, Form, Input, Button, Checkbox, Grid } from 'semantic-ui-react';
|
|
|
|
const WristbandModal = ({ 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 = {
|
|
name: '',
|
|
identity: '',
|
|
monitor: 0,
|
|
notify: 0,
|
|
id: type == 1 ? data.uid : '',
|
|
mac: ''
|
|
};
|
|
|
|
let mac = e.querySelector('input[name="mac"]');
|
|
if(mac && 'value' in mac) json.mac = mac.value;
|
|
let name = e.querySelector('input[name="name"]');
|
|
if(name && 'value' in name) json.name = name.value;
|
|
let identity = e.querySelector('input[name="identity"]');
|
|
if(identity && 'value' in identity) json.identity = identity.value;
|
|
let monitor = e.querySelector('input[name="monitor"]');
|
|
if(monitor && 'checked' in monitor) json.monitor = monitor.checked ? 1 : 0;
|
|
let notify = e.querySelector('input[name="notify"]');
|
|
if(notify && 'checked' in notify) json.notify = notify.checked ? 1 : 0;
|
|
|
|
return json;
|
|
}}>
|
|
<Form.Field>
|
|
<Input label="手環ID" name="mac" defaultValue={data.mac} disabled={type == 1} />
|
|
</Form.Field>
|
|
<Form.Field>
|
|
<Input label="名稱" name="name" defaultValue={data.name} />
|
|
</Form.Field>
|
|
<Form.Field>
|
|
<Input label="身份" name="identity" defaultValue={data.identity} />
|
|
</Form.Field>
|
|
<Form.Field>
|
|
<Checkbox label="監控" name="monitor" defaultChecked={data.monitor == 1} />
|
|
</Form.Field>
|
|
<Form.Field>
|
|
<Checkbox label="通知" name="notify" defaultChecked={data.notify == 1} />
|
|
</Form.Field>
|
|
<Form.Field>
|
|
<Checkbox label="啟用" name="switch" defaultChecked={data.switch == 1} />
|
|
</Form.Field>
|
|
<Grid columns={2}>
|
|
<Grid.Column>
|
|
<Button content="送出" fluid type="submit" />
|
|
</Grid.Column>
|
|
<Grid.Column>
|
|
<Button content="取消" fluid type="button" onClick={()=>{ closeModal() }} />
|
|
</Grid.Column>
|
|
</Grid>
|
|
</Form>
|
|
</Modal.Content>
|
|
</Modal>
|
|
)
|
|
}
|
|
export default WristbandModal; |