webio-node/src/components/AdminPage/Wristband/LocStatus/index.js

import React from 'react';
import {Container, Segment, Table, Label, Checkbox, Icon} from 'semantic-ui-react';
import {getRequest} from '../../../../actions';
import ListItem from './ListItem';

const sort_icon = {
    "asc": "caret down",
    "desc": "caret up"
}

class LocStatus extends React.Component{
    state = {
        autoRefresh: false,
        list: [],
        sort: {
            field: '',
            order: ''
        }
    }
    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, 5000);
        }else{
            clearInterval(this.tick);
        }
    }

    runTick = () => {
        this.getList();
    }

    getList = () => {
        let {toggleLoading, showDialog} = this.props;
        let json = {
            sort: this.state.sort
        };

        fetch('/api/wristband/getstatus', getRequest(json))
            .then(response=>response.json())
            .then(json => {
                if(json.status != 1) return showDialog(json.message);
                this.setState({
                    list: [...(json.data.record || [])]
                })
            });
    }

    handlerSort = (tag) => {
        if(!tag) return ;
        let sort = this.state.sort;
        if(tag == sort.field){
            if(sort.order == 'asc') sort.order = 'desc';
            else sort.order = 'asc';
        }else{
            sort.field = tag;
            sort.order = 'asc';
        }

        this.setState({
            sort
        }, () => {
            this.getList();
        })
    }

    renderSortIcon = (tag) => {
        if(this.state.sort.field == tag)
            return (<Icon size="large" name={sort_icon[this.state.sort.order]} />);
        return null;
    }

    render (){
        let {i18n} = this.props;
        return (
            <Container fluid>
                <Segment className="clearfix">
                    <Checkbox toggle checked={this.state.autoRefresh} onChange={(e,d) => {this.changeRefresh()}} label="自動更新" />
                    <Table>
                        <Table.Header>
                            <Table.Row>
                                <Table.HeaderCell className="pointer" onClick={()=>{ this.handlerSort('mac') }}>
                                    手環ID
                                    {
                                        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')}
                                </Table.HeaderCell>
                                <Table.HeaderCell className="pointer" onClick={()=>{this.handlerSort('val3')}}>
                                    步數
                                    {
                                        this.renderSortIcon('val3')
                                    }
                                </Table.HeaderCell>
                                <Table.HeaderCell className="pointer" onClick={()=>{this.handlerSort('val4')}}>
                                    剩餘電量
                                    {
                                        this.renderSortIcon('val4')
                                    }
                                </Table.HeaderCell>
                                <Table.HeaderCell className="pointer" onClick={()=>{this.handlerSort('val2')}}>
                                    HR
                                    {this.renderSortIcon('val2')}
                                </Table.HeaderCell>
                                <Table.HeaderCell className="pointer" onClick={()=>{this.handlerSort('val5')}}>
                                    SBP
                                    {this.renderSortIcon('val5')}
                                </Table.HeaderCell>
                                <Table.HeaderCell className="pointer" onClick={()=>{this.handlerSort('val6')}}>
                                    DBP
                                    {this.renderSortIcon('val6')}
                                </Table.HeaderCell>
                                <Table.HeaderCell className="pointer" onClick={()=>{this.handlerSort('val7')}}>
                                    卡路里
                                    {this.renderSortIcon('val7')}
                                </Table.HeaderCell>
                                <Table.HeaderCell className="pointer" onClick={()=>{this.handlerSort('val9')}}>
                                    SOS
                                    {this.renderSortIcon('val9')}
                                </Table.HeaderCell>
                                <Table.HeaderCell className="pointer" onClick={()=>{this.handlerSort('time')}}>
                                    更新時間
                                    {this.renderSortIcon('time')}
                                </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;