104 lines
3.6 KiB
JavaScript
104 lines
3.6 KiB
JavaScript
import React from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
import { Modal, List, Menu, Button, Input, Label } 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/getwristbandlocpath', 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>
|
|
<List divided>
|
|
{
|
|
this.state.list.map((t,idx) => {
|
|
return (
|
|
<List.Item key={idx}>
|
|
{
|
|
t.devname ?
|
|
`時間 ${convertTime(t.wloclogtst, true)} 位於 ${t.devname} 附近` :
|
|
`時間 ${convertTime(t.wloclogtst, true)} 不在範圍內`
|
|
}
|
|
</List.Item>
|
|
)
|
|
})
|
|
}
|
|
</List>
|
|
</Modal.Content>
|
|
</Modal>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default WristbandPathInfo; |