90 lines
2.9 KiB
JavaScript
90 lines
2.9 KiB
JavaScript
|
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;
|