This commit is contained in:
Jay
2017-04-26 17:26:36 +08:00
parent b07e51ef7c
commit 712a78c4ed
4 changed files with 202 additions and 2 deletions
@@ -1,7 +1,7 @@
import React from 'react';
import { Table, Button } from 'semantic-ui-react';
const ListItem = ({ i18n, data, delWristband, editWristband, showPathInfo }) => {
const ListItem = ({ i18n, data, delWristband, editWristband, showPathInfo, showHealthInfo }) => {
return (
<Table.Row>
@@ -9,6 +9,7 @@ const ListItem = ({ i18n, data, delWristband, editWristband, showPathInfo }) =>
<Button content="Edit" basic onClick={()=>{editWristband(1, data)}} />
<Button content="Delete" basic onClick={()=>{delWristband(data.uid)}} />
<Button content="地點紀錄" basic onClick={()=>{showPathInfo(data.mac, data.name)}} />
<Button content="生理資訊紀錄" basic onClick={()=>{showHealthInfo(data.mac, data.name)}} />
</Table.Cell>
<Table.Cell>{data.mac}</Table.Cell>
<Table.Cell>{data.name}</Table.Cell>
@@ -0,0 +1,119 @@
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: [],
stime: (getDayTime()),
etime: (Date.now())
}
componentDidMount(){
}
closeView = () => {
this.setState({
list: [],
stime: (getDayTime()),
etime: (Date.now())
}, ()=>{
this.props.closeModal();
})
}
getList = () => {
let {mac, showDialog, getRequest} = this.props;
fetch('/api/wristband/getwristbandhealthpath', 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);
this.setState({
list: json.data.record || []
})
})
}
render() {
let {closeModal, open} = this.props;
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>
<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>
{
this.state.list.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;
@@ -4,6 +4,7 @@ import {getRequest} from '../../../../actions';
import ListItem from './ListItem';
import WristbandModal from './WristbandModal';
import WristbandPathInfo from './WristbandPathInfo';
import WristbandHealthInfo from './WristbandHealthInfo';
const stateDefault = ()=>({
list: [],
@@ -16,6 +17,11 @@ const stateDefault = ()=>({
open: false,
mac: '',
name: ''
},
healthinfo: {
open: false,
mac: '',
name: ''
}
})
@@ -111,6 +117,24 @@ class WristbandInfo extends React.Component {
})
}
showHealthInfo = (mac, name) => {
if(!mac) return ;
this.setState({
healthinfo:{
open: true,
mac,
name
}
})
}
closeHealthInfo = () => {
this.setState({
healthinfo: {
...stateDefault().healthinfo
}
})
}
render() {
let { i18n } = this.props;
return (
@@ -132,7 +156,12 @@ class WristbandInfo extends React.Component {
<Table.Body>
{
this.state.list.map((t,idx) => (
<ListItem key={idx} data={t} i18n={i18n} delWristband={this.delWristband} editWristband={this.openModal} showPathInfo={this.showPathInfo}/>
<ListItem key={idx} data={t}
i18n={i18n}
delWristband={this.delWristband}
editWristband={this.openModal}
showPathInfo={this.showPathInfo}
showHealthInfo={this.showHealthInfo} />
))
}
</Table.Body>
@@ -151,6 +180,13 @@ class WristbandInfo extends React.Component {
closeModal={this.closePathInfo}
showDialog={this.props.showDialog}
getRequest={getRequest} />
<WristbandHealthInfo i18n={i18n}
open={this.state.healthinfo.open}
mac={this.state.healthinfo.mac}
wbname={this.state.healthinfo.name}
closeModal={this.closeHealthInfo}
showDialog={this.props.showDialog}
getRequest={getRequest} />
</Container>
)
}