wristband path info add pager

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

@@ -13,6 +13,8 @@ const getDayTime = ()=>{
 class WristbandPathInfo extends React.Component{
     state = {
         list: [],
+        page: 1,
+        maxPage: 1,
         stime: (getDayTime()),
         etime: (Date.now())
     }
@@ -24,6 +26,8 @@ class WristbandPathInfo extends React.Component{
     closeView = () => {
         this.setState({
             list: [],
+            page: 1,
+            maxPage: 1,
             stime: (getDayTime()),
             etime: (Date.now())
         }, ()=>{
@@ -41,14 +45,34 @@ class WristbandPathInfo extends React.Component{
             .then(response=>response.json())
             .then(json => {
                 if(json.status != 1) return showDialog(json.message);
+                let l = json.data.record || [];
                 this.setState({
-                    list: json.data.record || []
+                    list: l,
+                    page: 1,
+                    maxPage: Math.ceil(l.length / 20)
                 })
             })
     }
 
+    nextPage = () => {
+        let {page, maxPage} = this.state;
+        this.setState({
+            page: page >= maxPage ? maxPage : page+1
+        })
+    }
+
+    prevPage = () => {
+        let {page} = this.state;
+        this.setState({
+            page: page <= 1 ? 1 : page-1
+        })
+    }
+
     render() {
         let {closeModal, open} = this.props;
+
+        let tmpList = this.state.list.slice((this.state.page - 1) * 20, ((this.state.page - 1) * 20 + 20))
+
         return (
             <Modal open={open} onClose={()=>{this.closeView()}}>
                 <Modal.Header>
@@ -80,9 +104,16 @@ class WristbandPathInfo extends React.Component{
                             </Menu.Item>
                         </Menu.Menu>
                     </Menu>
+
+                    <div style={{textAlign: 'center'}}>
+                        <Button content="上一頁" size="small" labelPosition="left" basic={true} color="black" icon="arrow left" onClick={() => {this.prevPage()}} />
+                        <Label basic={true} color="blue" content={`${this.state.page || 1} / ${this.state.maxPage || 1}`} />
+                        <Button content="下一頁" size="small" labelPosition="right" basic={true} color="black" icon="arrow right" onClick={() => {this.nextPage()}} />
+                    </div>
+
                     <List divided>
                         {
-                            this.state.list.map((t,idx) => {
+                            tmpList.map((t,idx) => {
                                 return (
                                     <List.Item key={idx}>
                                         {