add wristband path history info

src/components/AdminPage/ModbusPreview/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import {Container, Segment, Grid, List, Label} from 'semantic-ui-react';
+
+class ModbusPreview extends React.Component {
+
+    render() {
+
+        return (
+            null
+        )
+    }
+}
+
+export default ModbusPreview;

src/components/AdminPage/Wristband/WristbandInfo/ListItem.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import { Table, Button } from 'semantic-ui-react';
 
-const ListItem = ({ i18n, data, delWristband, editWristband }) => {
+const ListItem = ({ i18n, data, delWristband, editWristband, showPathInfo }) => {
 
     return (
         <Table.Row>
             <Table.Cell>
                 <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)}} />
             </Table.Cell>
             <Table.Cell>{data.mac}</Table.Cell>
             <Table.Cell>{data.name}</Table.Cell>

src/components/AdminPage/Wristband/WristbandInfo/WristbandPathInfo.js

@@ -0,0 +1,104 @@
+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;

src/components/AdminPage/Wristband/WristbandInfo/index.js

@@ -3,6 +3,7 @@ import { Container, Segment, Table, Button } from 'semantic-ui-react';
 import {getRequest} from '../../../../actions';
 import ListItem from './ListItem';
 import WristbandModal from './WristbandModal';
+import WristbandPathInfo from './WristbandPathInfo';
 
 const stateDefault = ()=>({
         list: [],
@@ -10,6 +11,11 @@ const stateDefault = ()=>({
             open: false,
             type: 0,
             data: {}
+        },
+        pathinfo: {
+            open: false,
+            mac: '',
+            name: ''
         }
     })
 
@@ -84,6 +90,24 @@ class WristbandInfo extends React.Component {
             })
     }
 
+    showPathInfo = (mac, name) => {
+        if(!mac) return ;
+        this.setState({
+            pathinfo:{
+                open: true,
+                mac,
+                name
+            }
+        })
+    }
+    closePathInfo = () => {
+        this.setState({
+            pathinfo: {
+                ...stateDefault().pathinfo
+            }
+        })
+    }
+
     render() {
         let { i18n } = this.props;
         return (
@@ -105,7 +129,7 @@ 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}/>
+                                    <ListItem key={idx} data={t} i18n={i18n} delWristband={this.delWristband} editWristband={this.openModal} showPathInfo={this.showPathInfo}/>
                                 ))
                             }
                         </Table.Body>
@@ -117,6 +141,13 @@ class WristbandInfo extends React.Component {
                     data={this.state.modal.data}
                     closeModal={this.closeModal}
                     submitModal={this.submitModal} />
+                <WristbandPathInfo i18n={i18n}
+                    open={this.state.pathinfo.open} 
+                    mac={this.state.pathinfo.mac}
+                    wbname={this.state.pathinfo.name}
+                    closeModal={this.closePathInfo}
+                    showDialog={this.props.showDialog}
+                    getRequest={getRequest} />
             </Container>
         )
     }

src/components/AdminPage/Wristband/index.js

@@ -49,10 +49,10 @@ class WristbandPage extends React.Component{
                                         定位點設定
                                     </Menu.Item>
                                     <Menu.Item active={this.state.page == 'locstatus'} onClick={()=>{ this.changePage('locstatus'); }}>
-                                        位置資訊
+                                        即時資訊總覽
                                     </Menu.Item>
                                     <Menu.Item active={this.state.page == 'locstatus_wloc'} onClick={()=>{ this.changePage('locstatus_wloc'); }}>
-                                        即時資訊總覽
+                                        位置資訊
                                     </Menu.Item>
                                 </Menu.Menu>
                             </Menu.Item>