wristband first

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

@@ -37,7 +37,7 @@ class LocStatus extends React.Component{
 
     checkRefresh = () => {
         if(this.state.autoRefresh) {
-            this.tick = setInterval(this.runTick, 2000);
+            this.tick = setInterval(this.runTick, 5000);
         }else{
             clearInterval(this.tick);
         }

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

@@ -1,6 +1,8 @@
 import React from 'react';
-import {Container, Segment, Button} from 'semantic-ui-react';
+import {Container, Segment, Button, Table} from 'semantic-ui-react';
 import {getRequest} from '../../../../actions';
+import ListItem from './ListItem';
+import LocationModal from './LocationModal';
 
 const stateDefault = ()=>({
     list: [],
@@ -35,13 +37,87 @@ class Location extends React.Component {
             })
     }
 
+    openModal = (type, data = {}) =>{
+        this.setState({
+            modal: {
+                open: true, 
+                type, 
+                data
+            }
+        })
+    }
+    closeModal = () => {
+        this.setState({
+            modal:{
+                ...stateDefault().modal
+            }
+        })
+    }
+    submitModal = (type, data) => {
+        let {showDialog} = this.props;
+        if(type == 1 && !data.id) return showDialog('資料取得失敗');
+        if(type == 0 && !data.sn) return showDialog('請填寫裝置序號');
+
+        let url = type == 1 ? '/api/wristband/editlocation' : '/api/wristband/addlocation';
+        fetch(url, getRequest(data))
+            .then(response => response.json())
+            .then(json => {
+                if(json.status != 1) return showDialog(json.message);
+                this.setState({
+                    modal: {
+                        ...stateDefault().modal
+                    }
+                }, ()=>{
+                    this.getList();
+                })
+            })
+    }
+
+    delLocation = (id) => {
+        if(!id) return ;
+        let {showDialog} = this.props;
+        fetch('/api/wristband/dellocation', getRequest({id}))
+            .then(response => response.json())
+            .then(json => {
+                if(json.status != 1) return showDialog(json.message);
+                this.getList();
+            })
+    }
+
     render() {
-    
+        let {i18n} = this.props;    
         return (
             <Container fluid>
                 <Segment className="clearfix">
-                    <Button floated="right" basic color="green" style={{marginBottom: '15px'}} content="新增" icon="plus" />
+                    <Button floated="right" basic color="green" style={{marginBottom: '15px'}} content="新增" icon="plus" onClick={()=>{this.openModal(0)}} />
+                    <Table>
+                        <Table.Header>
+                            <Table.Row>
+                                <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}
+                                        delLocation={this.delLocation}
+                                        editLocation={this.openModal} />
+                                ))
+                            }
+                        </Table.Body>
+                    </Table>
                 </Segment>
+                <LocationModal
+                    i18n={i18n}
+                    open={this.state.modal.open}
+                    type={this.state.modal.type}
+                    data={this.state.modal.data}
+                    closeModal={this.closeModal}
+                    submitModal={this.submitModal} />
             </Container>
         )
     }

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

@@ -17,7 +17,8 @@ const WristbandModal = ({ i18n, open, type, data, closeModal, submitModal }) =>
                             monitor: 0,
                             notify: 0,
                             id: type == 1 ? data.uid : '',
-                            mac: ''
+                            mac: '',
+                            switch: 0
                         };
 
                         let mac = e.querySelector('input[name="mac"]');
@@ -30,6 +31,8 @@ const WristbandModal = ({ i18n, open, type, data, closeModal, submitModal }) =>
                         if(monitor && 'checked' in monitor) json.monitor = monitor.checked ? 1 : 0;
                         let notify = e.querySelector('input[name="notify"]');
                         if(notify && 'checked' in notify) json.notify = notify.checked ? 1 : 0;
+                        let sw = e.querySelector('input[name="switch"]');
+                        if(sw && 'checked' in sw) json.switch = sw.checked ? 1 : 0;
 
                         return json;
                     }}>