2017-03-31 01:19:16 +00:00
|
|
|
import React from 'react';
|
2017-04-05 07:10:02 +00:00
|
|
|
import {Container, Segment, Table, Label, Checkbox, Icon} from 'semantic-ui-react';
|
2017-03-31 01:19:16 +00:00
|
|
|
import {getRequest} from '../../../../actions';
|
|
|
|
import ListItem from './ListItem';
|
|
|
|
|
2017-04-05 07:10:02 +00:00
|
|
|
const sort_icon = {
|
|
|
|
"asc": "caret down",
|
|
|
|
"desc": "caret up"
|
|
|
|
}
|
|
|
|
|
2017-03-31 01:19:16 +00:00
|
|
|
class LocStatus extends React.Component{
|
|
|
|
state = {
|
|
|
|
autoRefresh: false,
|
2017-04-05 07:10:02 +00:00
|
|
|
list: [],
|
|
|
|
sort: {
|
|
|
|
field: '',
|
|
|
|
order: ''
|
|
|
|
}
|
2017-03-31 01:19:16 +00:00
|
|
|
}
|
|
|
|
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;
|
2017-04-05 07:10:02 +00:00
|
|
|
let json = {
|
|
|
|
sort: this.state.sort
|
|
|
|
};
|
|
|
|
|
|
|
|
fetch('/api/wristband/getstatus', getRequest(json))
|
2017-03-31 01:19:16 +00:00
|
|
|
.then(response=>response.json())
|
|
|
|
.then(json => {
|
|
|
|
if(json.status != 1) return showDialog(json.message);
|
|
|
|
this.setState({
|
|
|
|
list: [...(json.data.record || [])]
|
|
|
|
})
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2017-04-05 07:10:02 +00:00
|
|
|
handlerSort = (tag) => {
|
|
|
|
if(!tag) return ;
|
|
|
|
let sort = this.state.sort;
|
|
|
|
if(tag == sort.field){
|
|
|
|
if(sort.order == 'asc') sort.order = 'desc';
|
|
|
|
else sort.order = 'asc';
|
|
|
|
}else{
|
|
|
|
sort.field = tag;
|
|
|
|
sort.order = 'asc';
|
|
|
|
}
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
sort
|
|
|
|
}, () => {
|
|
|
|
this.getList();
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
renderSortIcon = (tag) => {
|
|
|
|
if(this.state.sort.field == tag)
|
2017-04-05 08:45:58 +00:00
|
|
|
return (<Icon size="large" name={sort_icon[this.state.sort.order]} />);
|
2017-04-05 07:10:02 +00:00
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2017-03-31 01:19:16 +00:00
|
|
|
render (){
|
|
|
|
let {i18n} = this.props;
|
|
|
|
return (
|
2017-04-05 09:54:23 +00:00
|
|
|
<Container fluid>
|
2017-03-31 01:19:16 +00:00
|
|
|
<Segment className="clearfix">
|
|
|
|
<Checkbox toggle checked={this.state.autoRefresh} onChange={(e,d) => {this.changeRefresh()}} label="自動更新" />
|
|
|
|
<Table>
|
|
|
|
<Table.Header>
|
|
|
|
<Table.Row>
|
2017-04-05 07:10:02 +00:00
|
|
|
<Table.HeaderCell className="pointer" onClick={()=>{ this.handlerSort('mac') }}>
|
|
|
|
手環ID
|
|
|
|
{
|
|
|
|
this.renderSortIcon('mac')
|
|
|
|
}
|
|
|
|
</Table.HeaderCell>
|
2017-04-05 08:45:58 +00:00
|
|
|
<Table.HeaderCell className="pointer" onClick={()=>{this.handlerSort('loc')}}>
|
|
|
|
地點
|
|
|
|
{this.renderSortIcon('loc')}
|
|
|
|
</Table.HeaderCell>
|
2017-04-05 07:10:02 +00:00
|
|
|
<Table.HeaderCell className="pointer" onClick={()=>{this.handlerSort('val3')}}>
|
|
|
|
步數
|
|
|
|
{
|
|
|
|
this.renderSortIcon('val3')
|
|
|
|
}
|
|
|
|
</Table.HeaderCell>
|
|
|
|
<Table.HeaderCell className="pointer" onClick={()=>{this.handlerSort('val4')}}>
|
|
|
|
剩餘電量
|
|
|
|
{
|
|
|
|
this.renderSortIcon('val4')
|
|
|
|
}
|
|
|
|
</Table.HeaderCell>
|
|
|
|
<Table.HeaderCell className="pointer" onClick={()=>{this.handlerSort('val2')}}>
|
|
|
|
HR
|
|
|
|
{this.renderSortIcon('val2')}
|
|
|
|
</Table.HeaderCell>
|
|
|
|
<Table.HeaderCell className="pointer" onClick={()=>{this.handlerSort('val5')}}>
|
|
|
|
SBP
|
|
|
|
{this.renderSortIcon('val5')}
|
|
|
|
</Table.HeaderCell>
|
|
|
|
<Table.HeaderCell className="pointer" onClick={()=>{this.handlerSort('val6')}}>
|
|
|
|
DBP
|
|
|
|
{this.renderSortIcon('val6')}
|
|
|
|
</Table.HeaderCell>
|
|
|
|
<Table.HeaderCell className="pointer" onClick={()=>{this.handlerSort('val7')}}>
|
|
|
|
卡路里
|
|
|
|
{this.renderSortIcon('val7')}
|
|
|
|
</Table.HeaderCell>
|
|
|
|
<Table.HeaderCell className="pointer" onClick={()=>{this.handlerSort('val9')}}>
|
|
|
|
SOS
|
|
|
|
{this.renderSortIcon('val9')}
|
|
|
|
</Table.HeaderCell>
|
2017-04-06 08:28:57 +00:00
|
|
|
<Table.HeaderCell className="pointer" onClick={()=>{this.handlerSort('time')}}>
|
|
|
|
更新時間
|
|
|
|
{this.renderSortIcon('time')}
|
|
|
|
</Table.HeaderCell>
|
2017-03-31 01:19:16 +00:00
|
|
|
{/*<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;
|