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

import React from 'react';
import {Container, Segment, List, Menu, Item, Grid} from 'semantic-ui-react';
import DeviceList from './DeviceList';
import ModbusModal from './ModbusModal';
import IOPanel from './IOPanel';
import IOModal from './IOModal';
import AIOModal from './AIOModal';

const defIOModalState = {
	open: false, 
	data: {},
	type: 0
}
const defAIOModalState = {
	open: false,
	list: [],
	iouid: 0
}

class ModbusPage extends React.Component {
	state = {
		mbModal: false,
		mbType: 0,
		mbData: {},
		showDev: "",
		ioModal:{
			...defIOModalState
		},
		aioModal:{
			...defAIOModalState
		}
	}

	componentDidMount() {
		this.props.getList();

		this.props.router.setRouteLeaveHook(this.props.route, () => {
			this.props.clearList();
		});
	}

	componentWillReceiveProps(nprop) {
		if(this.state.aioModal.open) {
			this.openAIOModal(this.state.aioModal.iouid, nprop.list);
		}
	}

	delModbus = id => {
		if(!id) return ;
		this.props.delModbus({id});
	}

	openModbusModal = (type, data = {}) => {
		this.setState({
			mbModal: true,
			mbType: type,
			mbData: data
		});
	}
	closeModbusModal = () => {
		this.setState({
			mbModal: false,
			mbData: {}
		})
	}
	submitModbusModal = (type, data = {}) => {
		let {i18n} = this.props;
		if(type == 1 && (!data.id)) return this.props.showDialog(i18n&&i18n.t ? i18n.t('tip.input_empty') : '');
		if(!data.name || !('node' in data) || data.node.length == 0) return this.props.showDialog(i18n&&i18n.t ? i18n.t('tip.input_empty') : '');

		if(type == 1){
			this.props.editModbus(data);
		}else{
			this.props.addModbus(data);
		}
		this.closeModbusModal();
	}
	selectDevToShow = (uid) => {
		this.setState({
			showDev: uid
		});
		this.props.getMBData({id: uid});
	}

	openIOModal = (type, data = {}) => {
		this.setState({
			ioModal: {
				open: true,
				type,
				data
			}
		});
	}
	closeIOModal = () =>{
		this.setState({
			ioModal: {
				...defIOModalState
			}
		})
	}
	submitIOModal = (type, data) => {
		let {i18n} = this.props;
		if((type == 1 && !data.id) || !('addr' in data) || !('num' in data) || !('type' in data)) return this.props.showDialog(i18n.t('tip.input_empty'));

		data.devuid = this.state.showDev;
		if(type == 1){
			this.props.editIOList(data);
		}else{
			data.id = this.state.showDev;
			this.props.addIOList(data);
		}
		this.closeIOModal();
	}
	delIOList = (id) => {
		if(!id) return ;
		this.props.delIOList({id, devuid: this.state.showDev});
	}
	openAIOModal = (id, nlist = []) => {
		if(!id) return ;
		let slist = nlist.length == 0 ? this.props.list : nlist;
		let dev = slist.filter(t => {
			if(t.uid == this.state.showDev) return t;
		});
		if(dev.length == 0) return ;
		let aio = dev[0].aioset || [];
		let list = aio.filter(t => {
			if(t.iouid == id) return t;
		});
		this.setState({
			aioModal:{
				open: true,
				list,
				iouid: id
			}
		});
	}
	closeAIOModal = () => {
		this.setState({
			aioModal:{
				...defAIOModalState
			}
		});
	}
	submitAIO = (type, data) => {
		data.devuid = this.state.showDev;
		if(type == 1){
			this.props.editAIO(data);
		}else{
			this.props.addAIO(data);
		}
		// this.closeAIOModal();
	}
	delAIO = (id) => {
		if(!id) return ;
		this.props.delAIO({id, devuid: this.state.showDev});
	}

	render() {
		let {i18n, list} = this.props;

		let dev = list.filter(t => {
			if(t.uid == this.state.showDev) return t;
		});

		return (
			<Container>
				<Menu>
					<Menu.Menu position="right">
						<Menu.Item name="新增裝置" icon="plus" onClick={()=>{this.openModbusModal(0)}}/>
					</Menu.Menu>
				</Menu>
				<Grid>
					<Grid.Column width={4}>
						<DeviceList i18n={i18n} 
							list={list} 
							delModbus={this.delModbus} 
							editModbus={this.openModbusModal} 
							showDev={this.state.showDev} 
							selectDevToShow={this.selectDevToShow}/>
					</Grid.Column>
					<Grid.Column width={12}>
						<IOPanel i18n={i18n} 
							show={dev.length > 0} 
							data={dev[0]} 
							ioModal={this.openIOModal}
							delIOList={this.delIOList}
							getStatus={this.props.getMBIOStatus}
							showAIOSet={this.openAIOModal} />
					</Grid.Column>
				</Grid>
				<ModbusModal i18n={i18n} open={this.state.mbModal} data={this.state.mbData} type={this.state.mbType} onSubmit={this.submitModbusModal} onClose={this.closeModbusModal} />
				<IOModal i18n={i18n}
					open={this.state.ioModal.open}
					type={this.state.ioModal.type}
					data={this.state.ioModal.data}
					onClose={this.closeIOModal}
					onSubmit={this.submitIOModal} />
				<AIOModal i18n={i18n}
					open={this.state.aioModal.open}
					iouid={this.state.aioModal.iouid}
					list={this.state.aioModal.list}
					onSubmit={this.submitAIO}
					delAIO={this.delAIO}
					onClose={this.closeAIOModal} />
			</Container>
		)
	}
}

export default ModbusPage;