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

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

const stateDefault = ()=>({
    list: [],
    modal: {
        type: 0,
        open: false,
        data: {}
    },
    evt: {
        open: false,
        list: [],
        name: '',
        sel: -1,
        id: -1
    }
})

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 > 10) return showDialog('事件數量請介於1-5間');
        if(!data.maximg || data.maximg < 1 || data.maximg > 20) 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();
                })
        });
    }

    getEvents = (id, name = '') => {
        if(!id) return ;
        if(id==-1) id = this.state.evt.id;
        let {callConfirm, toggleLoading, showDialog} = this.props;
        toggleLoading(1);
        fetch('/api/ipcam/getevents', getRequest({id}))
            .then(response=>response.json())
            .then(json => {
                toggleLoading(0);
                if(json.status != 1) return showDialog(json.message);
                this.setState({
                    evt: {
                        open: true,
                        list: json.data.record || [],
                        name: name != '' ? name : this.state.evt.name,
                        sel: -1,
                        id
                    }
                })
            })
    }
    closeEventModal = () => {
        this.setState({
            evt: {
                ...stateDefault().evt
            }
        })
    }
    changeSelectEvent = (idx) => {
        if(!isFinite(idx) || idx < 0) return ;
        this.setState({
            evt:{
                ...this.state.evt,
                sel: idx
            }
        })
    }

    delEvent = (dir) => {
        if(!dir) return ;
        let {callConfirm, toggleLoading, showDialog} = this.props;
        callConfirm('確定刪除這筆事件?', ()=>{
            toggleLoading(1);
            fetch('/api/ipcam/delevent', getRequest({dir}))
                .then(response=>response.json())
                .then(json => {
                    toggleLoading(0);
                    if(json.status != 1) return showDialog(json.message);
                    this.getEvents(-1);
                })
        })
    }

    render() {
        let {i18n} = this.props;
        return (
            <Container>
                <Segment className="clearfix">
                    <Message>
                        <Message.Header>攝影機事件通知位址</Message.Header>
                        <p>
                            {`${location.protocol}//${location.host}${location.port != '' ? `:${location.port}` : ''}/camevent`}
                        </p>
                    </Message>
                    <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>FTP路徑</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}
                                        getEvents={this.getEvents} />
                                ))
                            }
                        </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} />
                <EvtModal i18n={i18n}
                    open={this.state.evt.open}
                    list={this.state.evt.list}
                    sel={this.state.evt.sel}
                    name={this.state.evt.name}
                    refreshEvt={this.getEvents}
                    closeEventModal={this.closeEventModal}
                    changeSelectEvent={this.changeSelectEvent}
                    delEvent={this.delEvent} />
            </Container>
        )
    }
}

export default IPCamPage;