webio-node/src/components/AdminPage/IPCam/index.js

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


const stateDefault = ()=>({
    list: [],
    modal: {
        type: 0,
        open: false,
        data: {}
    }
})

class IPCamPage extends React.Component {
    state = {
        ...stateDefault()
    }

    componentDidMount(){
        this.getList();
    }

    getList = () => {
        let {toggleLoading, showDialog} = this.props;
        toggleLoading(1);
        fetch('/api/ipcam/getipcamlist', getRequest())
            .then(response => response.json())
            .then(json => {
                toggleLoading(0);
                if(json.status != 1) return showDialog(json.message);
                let list = json.data.record || [];
                this.setState({
                    list
                })
            })
    }

    swActive = (id) => {
        if(!id) return ;
        let {toggleLoading, showDialog} = this.props;
        toggleLoading(1);
        fetch('/api/ipcam/swipcamactive', getRequest({id}))
            .then(response=>response.json())
            .then(json => {
                toggleLoading(0);
                if(json.status != 1) return showDialog(json.message);
                this.getList();
            })
    }

    openModal = (type, data = {}) => {
        this.setState({
            modal: {
                type,
                data,
                open: true
            }
        })
    }
    closeModal = () => {
        this.setState({
            modal: {
                ...stateDefault().modal
            }
        })
    }
    submitModal = (type, data = {}) => {
        let {toggleLoading,showDialog} = this.props;
        if(type == 1 && !data.id) return showDialog('資料讀取錯誤');
        if(!data.maxevents || data.maxevents < 1 || data.maxevents > 5) return showDialog('事件數量請介於1-5間');
        if(!data.maximg || data.maximg < 1 || data.maximg > 10) return showDialog('圖片數量請介於1-5間');
        if(!data.name) return showDialog('請輸入名稱');
        if(!data.ip) return showDialog('請輸入IP');
        if(!data.model) return showDialog('請選擇型號');

        toggleLoading(1);
        let url = type == 1 ? '/api/ipcam/editipcam' : '/api/ipcam/addipcam';
        fetch(url, getRequest(data))
            .then(response=>response.json())
            .then(json => {
                toggleLoading(0);
                if(json.status != 1) return showDialog(json.message);
                this.closeModal();
                this.getList();
            })
    }

    delIPCam = (id) => {
        if(!id) return ;
        let {callConfirm, toggleLoading, showDialog} = this.props;
        callConfirm('確定要刪除此筆資料?', ()=>{
            fetch('/api/ipcam/delipcam', 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>
                <Segment className="clearfix">
                    <Button basic content="新增" icon="plus" floated="right" type="button" style={{marginBottom: '15px'}} color="green" onClick={()=>{this.openModal(0)}} />
                    <Table>
                        <Table.Header>
                            <Table.Row>
                                <Table.HeaderCell>操作</Table.HeaderCell>
                                <Table.HeaderCell>名稱</Table.HeaderCell>
                                <Table.HeaderCell>IP</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}
                                        swActive={this.swActive}
                                        delIPCam={this.delIPCam}
                                        openModal={this.openModal} />
                                ))
                            }
                        </Table.Body>
                    </Table>
                </Segment>
                <IPCamModal i18n={i18n}
                    open={this.state.modal.open}
                    data={this.state.modal.data}
                    type={this.state.modal.type}
                    closeModal={this.closeModal}
                    submitModal={this.submitModal} />
            </Container>
        )
    }
}

export default IPCamPage;