add locStatus with location

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

@@ -7,6 +7,7 @@ const ListItem = ({i18n, data}) => {
     return (
         <Table.Row>
             <Table.Cell>{data.wristband}</Table.Cell>
+            <Table.Cell>{data.name}</Table.Cell>
             <Table.Cell>{data.locname}</Table.Cell>
             <Table.Cell>{data.val3 ? parseInt(data.val3, 16) : ''}</Table.Cell>
             <Table.Cell>{data.val4 ? `${parseInt(data.val4, 16)}%` : ''}</Table.Cell>

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

@@ -102,6 +102,12 @@ class LocStatus extends React.Component{
                                         this.renderSortIcon('mac')
                                     }
                                 </Table.HeaderCell>
+                                <Table.HeaderCell className="pointer" onClick={()=>{ this.handlerSort('name') }}>
+                                    手環名稱
+                                    {
+                                        this.renderSortIcon('name')
+                                    }
+                                </Table.HeaderCell>
                                 <Table.HeaderCell className="pointer" onClick={()=>{this.handlerSort('loc')}}>
                                     地點
                                     {this.renderSortIcon('loc')}

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import {Grid, Header, Container, Segment, List, Label} from 'semantic-ui-react';
+import {getRequest} from '../../../../actions';
+
+class LocStatusWloc extends React.Component {
+    state = {
+        loc: []
+    }
+
+    componentDidMount() {
+        this.getLocList();
+    }
+
+    getLocList = ()=>{
+        let {toggleLoading, showDialog} = this.props;
+        toggleLoading(1);
+        fetch('/api/wristband/getlocationlist', getRequest())
+            .then(response=>response.json())
+            .then(json=>{
+                toggleLoading(0);
+                if(json.status != 1) return showDialog(json.message);
+                this.setState({
+                    loc: json.data.record || []
+                }, ()=>{
+                    this.getStatus();
+                })
+            })
+    }
+
+    getStatus = () => {
+        let {toggleLoading, showDialog} = this.props;
+        fetch('/api/wristband/getstatus', getRequest())
+            .then(response=>response.json())
+            .then(json => {
+                if(json.status != 1) return showDialog(json.message);
+                let record = json.data.record || [];
+                let locs = this.state.loc;
+                for(let i in locs){
+                    locs[i].list = [];
+                }
+                for(let i in record) {
+                    let tmp = record[i];
+                    if(!tmp.locid) continue;
+                    for(let j in locs) {
+                        if(locs[j].serialnumber == tmp.locid) {
+                            locs[j].list.push(tmp);
+                        }
+                    }
+                }
+
+                this.setState({
+                    loc: locs
+                })
+            })
+    }
+
+    render() {
+
+        return (
+            <Container fluid>
+                <Grid columns={3}>
+                    {
+                        this.state.loc.map((t,idx) => (
+                            <Grid.Column key={idx} className="clearfix" >
+                                <Header as="h5" content={t.name} />
+                                <Segment style={{height: '400px', overflow: 'auto'}}>
+                                    <List>
+                                        {
+                                            t.list ? 
+                                            t.list.map((tt, idx) => (
+                                                <List.Item key={idx}>
+                                                    {
+                                                        tt.name ? (
+                                                            <Label basic color="blue" size="tiny" content={tt.name}/>
+                                                        ) : null
+                                                    }
+                                                    <Label basic color="teal" size="tiny" content={tt.mac}/>
+                                                </List.Item>
+                                            )) 
+                                            : null
+                                        }
+                                    </List>
+                                </Segment>
+                            </Grid.Column>
+                        ))
+                    }
+                </Grid>
+            </Container>
+        )
+    }
+}
+
+export default LocStatusWloc;

src/components/AdminPage/Wristband/index.js

@@ -3,6 +3,7 @@ import {Grid, Container, Segment, Menu, List} from 'semantic-ui-react';
 import LocStatus from '../../../containers/AdminPage/Wristband/LocStatus';
 import WristbandInfo from '../../../containers/AdminPage/Wristband/WristbandInfo';
 import Location from '../../../containers/AdminPage/Wristband/Location';
+import LocStatusWloc from '../../../containers/AdminPage/Wristband/LocStatusWloc';
 
 class WristbandPage extends React.Component{
     state = {
@@ -20,6 +21,8 @@ class WristbandPage extends React.Component{
         switch(this.state.page) {
             case 'locstatus':
                 return <LocStatus/>;
+            case 'locstatus_wloc':
+                return <LocStatusWloc />;
             case 'wristband':
                 return <WristbandInfo />;
             case 'location':
@@ -48,6 +51,9 @@ class WristbandPage extends React.Component{
                                     <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>
                         </Menu>

src/containers/AdminPage/Wristband/LocStatusWloc.js

@@ -0,0 +1,19 @@
+import { connect } from 'react-redux';
+import { add_dialog_msg, toggle_loading } from '../../../actions';
+import LocStatusPage from '../../../components/AdminPage/Wristband/LocStatusWloc';
+
+
+const mapStateToProps = (state) => ({
+    i18n: state.i18n
+});
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+    showDialog: (msg) => {
+        dispatch(add_dialog_msg(msg));
+    },
+    toggleLoading: (flag = false) => {
+        dispatch(toggle_loading(flag));
+    }
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(LocStatusPage);