150 lines
5.9 KiB
JavaScript
150 lines
5.9 KiB
JavaScript
import React from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
import { Modal, List, Menu, Button, Input, Label, Table } from 'semantic-ui-react';
|
|
import Datetime from 'react-datetime';
|
|
import {convertTime, padding} from '../../../../tools'
|
|
|
|
const getDayTime = ()=>{
|
|
let d = new Date();
|
|
d.setHours(0, 0, 0, 0);
|
|
return d.getTime();
|
|
}
|
|
|
|
class WristbandPathInfo extends React.Component{
|
|
state = {
|
|
list: [],
|
|
page: 1,
|
|
maxPage: 1,
|
|
stime: (getDayTime()),
|
|
etime: (Date.now())
|
|
}
|
|
|
|
componentDidMount(){
|
|
|
|
}
|
|
|
|
closeView = () => {
|
|
this.setState({
|
|
list: [],
|
|
page: 1,
|
|
maxPage: 1,
|
|
stime: (getDayTime()),
|
|
etime: (Date.now())
|
|
}, ()=>{
|
|
this.props.closeModal();
|
|
})
|
|
}
|
|
|
|
getList = () => {
|
|
let {mac, showDialog, getRequest} = this.props;
|
|
fetch('/api/wristband/getwristbandhealthinfo', getRequest({
|
|
mac,
|
|
stime: Math.floor(this.state.stime / 1000),
|
|
etime: Math.floor(this.state.etime / 1000)
|
|
}))
|
|
.then(response=>response.json())
|
|
.then(json => {
|
|
if(json.status != 1) return showDialog(json.message);
|
|
let l = json.data.record || [];
|
|
this.setState({
|
|
list: l,
|
|
page: 1,
|
|
maxPage: Math.ceil(l.length / 20)
|
|
})
|
|
})
|
|
}
|
|
|
|
nextPage = () => {
|
|
let {page, maxPage} = this.state;
|
|
this.setState({
|
|
page: page >= maxPage ? maxPage : page+1
|
|
})
|
|
}
|
|
|
|
prevPage = () => {
|
|
let {page} = this.state;
|
|
this.setState({
|
|
page: page <= 1 ? 1 : page-1
|
|
})
|
|
}
|
|
|
|
render() {
|
|
let {closeModal, open} = this.props;
|
|
|
|
let tmpList = this.state.list.slice((this.state.page - 1) * 20, ((this.state.page - 1) * 20 + 20))
|
|
|
|
return (
|
|
<Modal open={open} onClose={()=>{this.closeView()}}>
|
|
<Modal.Header>
|
|
手環名稱: {this.props.wbname}
|
|
</Modal.Header>
|
|
<Modal.Content>
|
|
<Menu>
|
|
<Menu.Item>
|
|
<Input label="起始時間" input={
|
|
<Datetime dateFormat="YYYY-MM-DD"
|
|
timeFormat="HH:mm"
|
|
value={this.state.stime}
|
|
input={true}
|
|
onChange={(e)=>{ this.setState({stime: (e.valueOf())}) }} />
|
|
}/>
|
|
</Menu.Item>
|
|
<Menu.Item>
|
|
<Input label="結束時間" input={
|
|
<Datetime dateFormat="YYYY-MM-DD"
|
|
timeFormat="HH:mm"
|
|
value={this.state.etime}
|
|
input={true}
|
|
onChange={(e)=>{ this.setState({etime: (e.valueOf())}) }} />
|
|
}/>
|
|
</Menu.Item>
|
|
<Menu.Menu position="right">
|
|
<Menu.Item>
|
|
<Button type="button" content="搜尋" size="tiny" basic onClick={()=>{this.getList()}} />
|
|
</Menu.Item>
|
|
</Menu.Menu>
|
|
</Menu>
|
|
|
|
<div style={{textAlign: 'center'}}>
|
|
<Button content="上一頁" size="small" labelPosition="left" basic={true} color="black" icon="arrow left" onClick={() => {this.prevPage()}} />
|
|
<Label basic={true} color="blue" content={`${this.state.page || 1} / ${this.state.maxPage || 1}`} />
|
|
<Button content="下一頁" size="small" labelPosition="right" basic={true} color="black" icon="arrow right" onClick={() => {this.nextPage()}} />
|
|
</div>
|
|
|
|
<Table>
|
|
<Table.Header>
|
|
<Table.Row>
|
|
<Table.HeaderCell>HR</Table.HeaderCell>
|
|
<Table.HeaderCell>步數</Table.HeaderCell>
|
|
<Table.HeaderCell>SBP</Table.HeaderCell>
|
|
<Table.HeaderCell>DBP</Table.HeaderCell>
|
|
<Table.HeaderCell>卡路里</Table.HeaderCell>
|
|
<Table.HeaderCell>SOS</Table.HeaderCell>
|
|
<Table.HeaderCell>更新時間</Table.HeaderCell>
|
|
</Table.Row>
|
|
</Table.Header>
|
|
<Table.Body>
|
|
{
|
|
tmpList.map((t,idx) => {
|
|
return (
|
|
<Table.Row key={idx}>
|
|
<Table.Cell>{parseInt(t.wphyloghr, 16)}</Table.Cell>
|
|
<Table.Cell>{parseInt(t.wphylogsteps, 16)}</Table.Cell>
|
|
<Table.Cell>{parseInt(t.wphylogsbp, 16)}</Table.Cell>
|
|
<Table.Cell>{parseInt(t.wphylogdbp, 16)}</Table.Cell>
|
|
<Table.Cell>{parseInt(t.wphylogcal, 16)}</Table.Cell>
|
|
<Table.Cell>{parseInt(t.wphylogsos, 16)}</Table.Cell>
|
|
<Table.Cell>{convertTime(t.wphylogtst, true)}</Table.Cell>
|
|
</Table.Row>
|
|
)
|
|
})
|
|
}
|
|
</Table.Body>
|
|
</Table>
|
|
</Modal.Content>
|
|
</Modal>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default WristbandPathInfo; |