This commit is contained in:
Jay
2017-04-05 15:10:02 +08:00
parent 57a37b047f
commit b684672ad2
5 changed files with 256 additions and 108 deletions
@@ -14,6 +14,7 @@ const ListItem = ({i18n, data}) => {
<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.val9 ? `${parseInt(data.val9, 16)}` : ''}</Table.Cell>
<Table.Cell>{data.timestamp ? convertTime(data.timestamp, true) : ''}</Table.Cell>
</Table.Row>
)
@@ -1,12 +1,21 @@
import React from 'react';
import {Container, Segment, Table, Label, Checkbox} from 'semantic-ui-react';
import {Container, Segment, Table, Label, Checkbox, Icon} from 'semantic-ui-react';
import {getRequest} from '../../../../actions';
import ListItem from './ListItem';
const sort_icon = {
"asc": "caret down",
"desc": "caret up"
}
class LocStatus extends React.Component{
state = {
autoRefresh: false,
list: []
list: [],
sort: {
field: '',
order: ''
}
}
tick = null
@@ -40,7 +49,11 @@ class LocStatus extends React.Component{
getList = () => {
let {toggleLoading, showDialog} = this.props;
fetch('/api/wristband/getstatus', getRequest())
let json = {
sort: this.state.sort
};
fetch('/api/wristband/getstatus', getRequest(json))
.then(response=>response.json())
.then(json => {
if(json.status != 1) return showDialog(json.message);
@@ -50,6 +63,30 @@ class LocStatus extends React.Component{
});
}
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)
return (<Icon size="mini" corner name={sort_icon[this.state.sort.order]} />);
return null;
}
render (){
let {i18n} = this.props;
return (
@@ -59,14 +96,45 @@ class LocStatus extends React.Component{
<Table>
<Table.Header>
<Table.Row>
<Table.HeaderCell>手環ID</Table.HeaderCell>
<Table.HeaderCell className="pointer" onClick={()=>{ this.handlerSort('mac') }}>
手環ID
{
this.renderSortIcon('mac')
}
</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 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>
<Table.HeaderCell>時間</Table.HeaderCell>
{/*<Table.HeaderCell></Table.HeaderCell>*/}
</Table.Row>