update wristband api and add wristband ui

2017-03-31 09:19:16 +08:00
parent e1ce5290da
commit f8f3cbe0d8
16 changed files with 1928 additions and 1126 deletions
@@ -0,0 +1,22 @@
+import React from 'react';
+import {Table} from 'semantic-ui-react';
+import {convertTime} from '../../../../tools';
+
+const ListItem = ({i18n, data}) => {
+
+    return (
+        <Table.Row>
+            <Table.Cell>{data.mac}</Table.Cell>
+            <Table.Cell>{data.locname ? data.locname : data.last_locname}</Table.Cell>
+            <Table.Cell>{data.val3 ? parseInt(data.val3, 16) : ''}</Table.Cell>
+            <Table.Cell>{data.val4 ? `${parseInt(data.val4, 16)}%` : ''}</Table.Cell>
+            <Table.Cell>{data.val2 ? `${parseInt(data.val2, 16)}` : ''}</Table.Cell>
+            <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.timestamp ? convertTime(data.timestamp, true) : ''}</Table.Cell>
+        </Table.Row>
+    )
+}
+
+export default ListItem;
@@ -0,0 +1,90 @@
+import React from 'react';
+import {Container, Segment, Table, Label, Checkbox} from 'semantic-ui-react';
+import {getRequest} from '../../../../actions';
+import ListItem from './ListItem';
+
+class LocStatus extends React.Component{
+    state = {
+        autoRefresh: false,
+        list: []
+    }
+    tick = null
+
+    componentDidMount(){
+        this.getList();
+    }
+
+    componentWillUnmount(){
+        clearInterval(this.tick);
+    }
+
+    changeRefresh = () => {
+        this.setState({
+            autoRefresh: !this.state.autoRefresh
+        }, ()=>{
+            this.checkRefresh();
+        })
+    }
+
+    checkRefresh = () => {
+        if(this.state.autoRefresh) {
+            this.tick = setInterval(this.runTick, 2000);
+        }else{
+            clearInterval(this.tick);
+        }
+    }
+
+    runTick = () => {
+        this.getList();
+    }
+
+    getList = () => {
+        let {toggleLoading, showDialog} = this.props;
+        fetch('/api/wristband/getstatus', getRequest())
+            .then(response=>response.json())
+            .then(json => {
+                if(json.status != 1) return showDialog(json.message);
+                this.setState({
+                    list: [...(json.data.record || [])]
+                })
+            });
+    }
+
+    render (){
+        let {i18n} = this.props;
+        return (
+            <Container>
+                <Segment className="clearfix">
+                    <Checkbox toggle checked={this.state.autoRefresh} onChange={(e,d) => {this.changeRefresh()}} label="自動更新" />
+                    <Table>
+                        <Table.Header>
+                            <Table.Row>
+                                <Table.HeaderCell>手環ID</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>時間</Table.HeaderCell>
+                                {/*<Table.HeaderCell></Table.HeaderCell>*/}
+                            </Table.Row>
+                        </Table.Header>
+                        <Table.Body>
+                            {
+                                this.state.list.map((t,idx)=>(
+                                    <ListItem key={idx} 
+                                        i18n={i18n} 
+                                        data={t} />
+                                ))
+                            }
+                        </Table.Body>
+                    </Table>
+                </Segment>
+            </Container>
+        )
+    }
+}
+
+export default LocStatus;
@@ -0,0 +1,51 @@
+import React from 'react';
+import {Grid, Container, Segment, Menu, List} from 'semantic-ui-react';
+import LocStatus from '../../../containers/AdminPage/Wristband/LocStatus';
+
+class WristbandPage extends React.Component{
+    state = {
+        page: ''
+    }
+
+    changePage = (page) => {
+        this.setState({
+            page
+        })
+    }
+
+    getRenderPage = () => {
+        switch(this.state.page) {
+            case 'locstatus':
+                return <LocStatus />;
+            default:
+                return null;
+        }
+    }
+
+    render(){
+
+        return (
+            <Container>
+                <Grid>
+                    <Grid.Column width={4}>
+                        <Menu vertical={true}>
+                            <Menu.Item>
+                                <Menu.Header>主選單</Menu.Header>
+                                <Menu.Menu>
+                                    <Menu.Item active={this.state.page == 'locstatus'} onClick={()=>{ this.changePage('locstatus'); }}>
+                                        位置資訊
+                                    </Menu.Item>
+                                </Menu.Menu>
+                            </Menu.Item>
+                        </Menu>
+                    </Grid.Column>
+                    <Grid.Column width={12}>
+                        {this.getRenderPage()}
+                    </Grid.Column>
+                </Grid>
+            </Container>
+        )
+    }
+}
+
+export default WristbandPage;