add setting wristband
This commit is contained in:
@@ -138,7 +138,10 @@ class LocStatus extends React.Component{
|
||||
SOS
|
||||
{this.renderSortIcon('val9')}
|
||||
</Table.HeaderCell>
|
||||
<Table.HeaderCell>時間</Table.HeaderCell>
|
||||
<Table.HeaderCell className="pointer" onClick={()=>{this.handlerSort('time')}}>
|
||||
更新時間
|
||||
{this.renderSortIcon('time')}
|
||||
</Table.HeaderCell>
|
||||
{/*<Table.HeaderCell></Table.HeaderCell>*/}
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
import React from 'react';
|
||||
import { Table, Button } from 'semantic-ui-react';
|
||||
|
||||
const ListItem = ({ i18n, data, delWristband, editWristband }) => {
|
||||
|
||||
return (
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Button content="Edit" basic onClick={()=>{editWristband(1, data)}} />
|
||||
<Button content="Delete" basic onClick={()=>{delWristband(data.uid)}} />
|
||||
</Table.Cell>
|
||||
<Table.Cell>{data.mac}</Table.Cell>
|
||||
<Table.Cell>{data.name}</Table.Cell>
|
||||
</Table.Row>
|
||||
)
|
||||
}
|
||||
|
||||
export default ListItem;
|
||||
@@ -0,0 +1,67 @@
|
||||
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;
|
||||
@@ -0,0 +1,120 @@
|
||||
import React from 'react';
|
||||
import { Container, Segment, Table, Button } from 'semantic-ui-react';
|
||||
import {getRequest} from '../../../../actions';
|
||||
import ListItem from './ListItem';
|
||||
import WristbandModal from './WristbandModal';
|
||||
|
||||
const stateDefault = ()=>({
|
||||
list: [],
|
||||
modal: {
|
||||
open: false,
|
||||
type: 0,
|
||||
data: {}
|
||||
}
|
||||
})
|
||||
|
||||
class WristbandInfo extends React.Component {
|
||||
state = {
|
||||
...stateDefault()
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
this.getList();
|
||||
}
|
||||
|
||||
getList = () => {
|
||||
let {showDialog, toggleLoading} = this.props;
|
||||
|
||||
fetch('/api/wristband/getwristbandlist', getRequest())
|
||||
.then(response=>response.json())
|
||||
.then(json =>{
|
||||
if(json.status != 1) return showDialog(json.message);
|
||||
this.setState({
|
||||
list: json.data.record || []
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
delWristband = (id) => {
|
||||
if(!id) return ;
|
||||
|
||||
fetch('/api/wristband/delwristband', getRequest({id}))
|
||||
.then(response=>response.json())
|
||||
.then(json=>{
|
||||
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 {showDialog, toggleLoading} = this.props;
|
||||
if(type == 1 && !data.id) return showDialog('資料取得失敗');
|
||||
if(type == 0 && !data.mac) return showDialog('請填寫手環ID');
|
||||
|
||||
let url = type == 1 ? '/api/wristband/editwristband' : '/api/wristband/addwristband';
|
||||
|
||||
fetch(url, getRequest(data))
|
||||
.then(response=>response.json())
|
||||
.then(json => {
|
||||
if(json.status != 1) return showDialog(json.message);
|
||||
this.setState({
|
||||
modal: {...stateDefault().modal}
|
||||
}, ()=>{
|
||||
this.getList();
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
let { i18n } = this.props;
|
||||
return (
|
||||
<Container fluid>
|
||||
<Segment className="clearfix">
|
||||
<Button basic color="green" icon="plus" content="新增" floated="right" onClick={()=>{this.openModal(0)}} style={{marginBottom: '15px'}} />
|
||||
<Table>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell>操作</Table.HeaderCell>
|
||||
<Table.HeaderCell>手環ID</Table.HeaderCell>
|
||||
<Table.HeaderCell>手環名稱</Table.HeaderCell>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{
|
||||
this.state.list.map((t,idx) => (
|
||||
<ListItem key={idx} data={t} i18n={i18n} delWristband={this.delWristband} editWristband={this.openModal}/>
|
||||
))
|
||||
}
|
||||
</Table.Body>
|
||||
</Table>
|
||||
</Segment>
|
||||
<WristbandModal i18n={i18n}
|
||||
open={this.state.modal.open}
|
||||
type={this.state.modal.type}
|
||||
data={this.state.modal.data}
|
||||
closeModal={this.closeModal}
|
||||
submitModal={this.submitModal} />
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default WristbandInfo;
|
||||
@@ -1,6 +1,7 @@
|
||||
import React from 'react';
|
||||
import {Grid, Container, Segment, Menu, List} from 'semantic-ui-react';
|
||||
import LocStatus from '../../../containers/AdminPage/Wristband/LocStatus';
|
||||
import WristbandInfo from '../../../containers/AdminPage/Wristband/WristbandInfo';
|
||||
|
||||
class WristbandPage extends React.Component{
|
||||
state = {
|
||||
@@ -14,24 +15,30 @@ class WristbandPage extends React.Component{
|
||||
}
|
||||
|
||||
getRenderPage = () => {
|
||||
let {i18n} = this.props;
|
||||
switch(this.state.page) {
|
||||
case 'locstatus':
|
||||
return <LocStatus />;
|
||||
return <LocStatus/>;
|
||||
case 'wristband':
|
||||
return <WristbandInfo />
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
render(){
|
||||
|
||||
let {i18n} = this.props;
|
||||
return (
|
||||
<Container fluid>
|
||||
<Container fluid style={{paddingLeft: '10px', paddingRight: '10px'}}>
|
||||
<Grid>
|
||||
<Grid.Column width={4}>
|
||||
<Menu vertical={true}>
|
||||
<Menu vertical={true} fluid>
|
||||
<Menu.Item>
|
||||
<Menu.Header>主選單</Menu.Header>
|
||||
<Menu.Menu>
|
||||
<Menu.Item active={this.state.page == 'wristband'} onClick={()=>{this.changePage('wristband')}}>
|
||||
手環名稱設定
|
||||
</Menu.Item>
|
||||
<Menu.Item active={this.state.page == 'locstatus'} onClick={()=>{ this.changePage('locstatus'); }}>
|
||||
位置資訊
|
||||
</Menu.Item>
|
||||
|
||||
@@ -14,7 +14,7 @@ const DeviceSelect = ({i18n, querySelectList, page, permissions, devs, addSelect
|
||||
<option value="">{i18n&&i18n.t?i18n.t('select.dev_type') : ''}</option>
|
||||
{
|
||||
permissions.dio ?
|
||||
<option value="do">{i18n&&i18n.t ? i18n.t('select.digitoutput') : ''}</option> : null
|
||||
<option value="do">{i18n&&i18n.t ? i18n.t('select.digitaloutput') : ''}</option> : null
|
||||
}
|
||||
{
|
||||
permissions.leone ?
|
||||
|
||||
@@ -6,14 +6,14 @@ const AlertItem = ({i18n, name, type}) => {
|
||||
return (
|
||||
<Grid.Row columns={3} color="red">
|
||||
<Grid.Column>
|
||||
<Label basic content={type == 'di' ? "DigitInput" : "LeOne"} />
|
||||
<Label basic content={type == 'di' ? "DigitalInput" : "LeOne"} />
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
<Label basic content={i18n&&i18n.t ? i18n.t('dashboard.label.name') : ''} />{name}
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
<Label basic content={i18n&&i18n.t ? i18n.t('dashboard.label.status') : ''} />
|
||||
{i18n&&i18n.t ? ( type == 'di' ? i18n.t('dashboard.status.digitinput') : i18n.t('dashboard.status.leone') ): ''}
|
||||
{i18n&&i18n.t ? ( type == 'di' ? i18n.t('dashboard.status.digitalinput') : i18n.t('dashboard.status.leone') ): ''}
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user