update wristband api and add wristband ui
This commit is contained in:
@@ -5,7 +5,8 @@ const AIOForm = ({i18n, open, type, data, onSubmit, onClose}) => {
|
||||
if(!open) return null;
|
||||
let input = {
|
||||
name: data.name || '',
|
||||
portnum: data.portnum || '',
|
||||
portnum: data.portnum,
|
||||
type: data.type,
|
||||
scale_min: data.scale_min || 0,
|
||||
scale_max: data.scale_max || 0,
|
||||
range_min: data.range_min || 0,
|
||||
@@ -14,7 +15,8 @@ const AIOForm = ({i18n, open, type, data, onSubmit, onClose}) => {
|
||||
return (
|
||||
<Table.Row>
|
||||
<Table.Cell><Input name="name" onChange={(e,d)=>{input.name = d.value}} defaultValue={data.name || ''}/></Table.Cell>
|
||||
<Table.Cell><Input name="portnum" onChange={(e,d)=>{input.portnum = d.value}} defaultValue={data.portnum || ''}/></Table.Cell>
|
||||
<Table.Cell><Input name="portnum" onChange={(e,d)=>{input.portnum = d.value}} defaultValue={data.portnum}/></Table.Cell>
|
||||
<Table.Cell><Input name="type" onChange={(e,d)=>{input.type = d.value}} defaultValue={data.type}/></Table.Cell>
|
||||
<Table.Cell>
|
||||
<Input name="range_min" size="small" label="Min" onChange={(e,d)=>{input.range_min = d.value}} defaultValue={data.range_min || '0'}/>
|
||||
<Input name="range_max" size="small" label="Max" onChange={(e,d)=>{input.range_max = d.value}} defaultValue={data.range_max || '0'}/>
|
||||
|
||||
@@ -6,7 +6,8 @@ const AIOListItem = ({i18n, data, editAIO, delAIO}) => {
|
||||
return (
|
||||
<Table.Row>
|
||||
<Table.Cell>{data.name || ''}</Table.Cell>
|
||||
<Table.Cell>{data.portnum || ''}</Table.Cell>
|
||||
<Table.Cell>{data.portnum}</Table.Cell>
|
||||
<Table.Cell>{data.type}</Table.Cell>
|
||||
<Table.Cell>{data.range_min || 0} ~ {data.range_max || 0}</Table.Cell>
|
||||
<Table.Cell>{data.scale_min || 0} ~ {data.scale_max || 0}</Table.Cell>
|
||||
<Table.Cell>
|
||||
|
||||
@@ -47,6 +47,7 @@ class AIOModal extends React.Component {
|
||||
<Table.Row>
|
||||
<Table.HeaderCell>名稱</Table.HeaderCell>
|
||||
<Table.HeaderCell>接口號碼</Table.HeaderCell>
|
||||
<Table.HeaderCell>資料類型</Table.HeaderCell>
|
||||
<Table.HeaderCell>Range(Min-Max)</Table.HeaderCell>
|
||||
<Table.HeaderCell>Scale(Min-Max)</Table.HeaderCell>
|
||||
<Table.HeaderCell>操作</Table.HeaderCell>
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
import React from 'react';
|
||||
import {Table} from 'semantic-ui-react';
|
||||
import {convertTime} from '../../../../tools';
|
||||
|
||||
const ListItem = ({i18n, data}) => {
|
||||
|
||||
return (
|
||||
<Table.Row>
|
||||
<Table.Cell>{data.mac}</Table.Cell>
|
||||
<Table.Cell>{data.locname ? data.locname : data.last_locname}</Table.Cell>
|
||||
<Table.Cell>{data.val3 ? parseInt(data.val3, 16) : ''}</Table.Cell>
|
||||
<Table.Cell>{data.val4 ? `${parseInt(data.val4, 16)}%` : ''}</Table.Cell>
|
||||
<Table.Cell>{data.val2 ? `${parseInt(data.val2, 16)}` : ''}</Table.Cell>
|
||||
<Table.Cell>{data.val5 ? `${parseInt(data.val5, 16)}` : ''}</Table.Cell>
|
||||
<Table.Cell>{data.val6 ? `${parseInt(data.val6, 16)}` : ''}</Table.Cell>
|
||||
<Table.Cell>{data.val7 ? `${parseInt(data.val7, 16)}` : ''}</Table.Cell>
|
||||
<Table.Cell>{data.timestamp ? convertTime(data.timestamp, true) : ''}</Table.Cell>
|
||||
</Table.Row>
|
||||
)
|
||||
}
|
||||
|
||||
export default ListItem;
|
||||
@@ -0,0 +1,90 @@
|
||||
import React from 'react';
|
||||
import {Container, Segment, Table, Label, Checkbox} from 'semantic-ui-react';
|
||||
import {getRequest} from '../../../../actions';
|
||||
import ListItem from './ListItem';
|
||||
|
||||
class LocStatus extends React.Component{
|
||||
state = {
|
||||
autoRefresh: false,
|
||||
list: []
|
||||
}
|
||||
tick = null
|
||||
|
||||
componentDidMount(){
|
||||
this.getList();
|
||||
}
|
||||
|
||||
componentWillUnmount(){
|
||||
clearInterval(this.tick);
|
||||
}
|
||||
|
||||
changeRefresh = () => {
|
||||
this.setState({
|
||||
autoRefresh: !this.state.autoRefresh
|
||||
}, ()=>{
|
||||
this.checkRefresh();
|
||||
})
|
||||
}
|
||||
|
||||
checkRefresh = () => {
|
||||
if(this.state.autoRefresh) {
|
||||
this.tick = setInterval(this.runTick, 2000);
|
||||
}else{
|
||||
clearInterval(this.tick);
|
||||
}
|
||||
}
|
||||
|
||||
runTick = () => {
|
||||
this.getList();
|
||||
}
|
||||
|
||||
getList = () => {
|
||||
let {toggleLoading, showDialog} = this.props;
|
||||
fetch('/api/wristband/getstatus', getRequest())
|
||||
.then(response=>response.json())
|
||||
.then(json => {
|
||||
if(json.status != 1) return showDialog(json.message);
|
||||
this.setState({
|
||||
list: [...(json.data.record || [])]
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
render (){
|
||||
let {i18n} = this.props;
|
||||
return (
|
||||
<Container>
|
||||
<Segment className="clearfix">
|
||||
<Checkbox toggle checked={this.state.autoRefresh} onChange={(e,d) => {this.changeRefresh()}} label="自動更新" />
|
||||
<Table>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell>手環ID</Table.HeaderCell>
|
||||
<Table.HeaderCell>地點</Table.HeaderCell>
|
||||
<Table.HeaderCell>步數</Table.HeaderCell>
|
||||
<Table.HeaderCell>剩餘電量</Table.HeaderCell>
|
||||
<Table.HeaderCell>HR</Table.HeaderCell>
|
||||
<Table.HeaderCell>SBP</Table.HeaderCell>
|
||||
<Table.HeaderCell>DBP</Table.HeaderCell>
|
||||
<Table.HeaderCell>卡路里</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} />
|
||||
))
|
||||
}
|
||||
</Table.Body>
|
||||
</Table>
|
||||
</Segment>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default LocStatus;
|
||||
@@ -0,0 +1,51 @@
|
||||
import React from 'react';
|
||||
import {Grid, Container, Segment, Menu, List} from 'semantic-ui-react';
|
||||
import LocStatus from '../../../containers/AdminPage/Wristband/LocStatus';
|
||||
|
||||
class WristbandPage extends React.Component{
|
||||
state = {
|
||||
page: ''
|
||||
}
|
||||
|
||||
changePage = (page) => {
|
||||
this.setState({
|
||||
page
|
||||
})
|
||||
}
|
||||
|
||||
getRenderPage = () => {
|
||||
switch(this.state.page) {
|
||||
case 'locstatus':
|
||||
return <LocStatus />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
render(){
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Grid>
|
||||
<Grid.Column width={4}>
|
||||
<Menu vertical={true}>
|
||||
<Menu.Item>
|
||||
<Menu.Header>主選單</Menu.Header>
|
||||
<Menu.Menu>
|
||||
<Menu.Item active={this.state.page == 'locstatus'} onClick={()=>{ this.changePage('locstatus'); }}>
|
||||
位置資訊
|
||||
</Menu.Item>
|
||||
</Menu.Menu>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
</Grid.Column>
|
||||
<Grid.Column width={12}>
|
||||
{this.getRenderPage()}
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default WristbandPage;
|
||||
@@ -20,6 +20,7 @@ const MainMenu = ({i18n, show, toggleMenu, children, permissions, showDashboard,
|
||||
<MItem toLink="/admin/modbuslog" txt={i18n && 't' in i18n ? i18n.t('menu.item.modbuslog') : ''} permission={permissions.modbus} onClick={()=>toggleMenu()} />
|
||||
<MItem toLink="/admin/link" txt={i18n && 't' in i18n ? i18n.t('menu.item.link') : ''} permission={permissions.link} onClick={()=>toggleMenu()} />
|
||||
<MItem toLink="/admin/ipcam" txt={i18n && 't' in i18n ? i18n.t('menu.item.ipcam') : ''} permission={permissions.ipcam} onClick={()=>toggleMenu()} />
|
||||
<MItem toLink="/admin/wristband" txt={i18n && 't' in i18n ? i18n.t('menu.item.wristband') : ''} permission={permissions.wristband} onClick={()=>toggleMenu()} />
|
||||
<MItem toLink="/admin" txt={i18n && 't' in i18n ? i18n.t('menu.item.logout') : ''} permission={true} onClick={()=>{
|
||||
sessionStorage.clear();
|
||||
location.replace('/');
|
||||
|
||||
Reference in New Issue
Block a user