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

import React from 'react';
import {Container, Grid, Segment, Header, CheckBox, Table, Input, Button} from 'semantic-ui-react';
import DoItem from './DoItem';
import DiItem from './DiItem';

class DIO extends React.Component {
	state = {
		do: [],
		di: [],
		doSt: {},
		diSt: {}
	}

	tick = null

	onNameChange = (key, name) => {
		let reg = new RegExp(`^${key}$`, 'i');
		if(/^do/i.test(key)) {
			let dos = [...this.state.do];
			for(let i in dos){
				if(reg.test(dos[i].doid)){
					dos[i].doname = name;
					this.setState({
						do: dos
					});
					break;
				}
			}
		}else{
			let dis = [...this.state.di];
			for(let i in dis){
				if(reg.test(dis[i].diid)){
					dis[i].diname = name;
					this.setState({
						di: dis
					});
					break;
				}
			}
		}
	}

	onLogicChange = (key, st) => {
		let reg = new RegExp(`^${key}$`, 'i');
		if(/^do/i.test(key)) {
			let dos = [...this.state.do];
			for(let i in dos){
				if(reg.test(dos[i].doid)){
					dos[i].dologic = st ? 1 : 0;
					this.setState({
						do: dos
					});
					break;
				}
			}
		}else{
			let dis = [...this.state.di];
			for(let i in dis){
				if(reg.test(dis[i].diid)){
					dis[i].dilogic = st ? 1 : 0;
					this.setState({
						di: dis
					});
					break;
				}
			}
		}
	}

	updateSetting = () => {
		let dos = [...this.state.do];
		let dis = [...this.state.di];
		let json = {};
		json.do = {};
		json.di = {};
		for(let i in dos) {
			json.do[dos[i].doid] = {
				name: dos[i].doname,
				logic: dos[i].dologic
			}
		}
		for(let i in dis){
			json.di[dis[i].diid] ={
				name: dis[i].diname,
				logic: dis[i].dilogic
			}
		}

		this.props.setDIOInfo(json);
	}

	doRun = (key, val) => {
		let reg = /^do([0-9]+)$/i;
		let m = key.match(reg);
		if(!m || !m[1]) return ;
		let pin = m[1];
		if(pin in this.state.doSt){
			let tmp = {...this.state.doSt};
			tmp[pin] = val ? 1 : 0;
			this.setState({
				doSt: tmp
			})
		}
		this.props.dotRun(pin, val ? 1 : 0);
	}

	componentWillReceiveProps(nextProps) {
		this.setState({
			do: nextProps.dio.do,
			di: nextProps.dio.di,
			diSt: nextProps.dio.diSt,
			doSt: nextProps.dio.doSt
		});
	}

	updateTick = () => {
		this.props.getIO();
	}

	componentDidMount() {
		this.props.getDIOInfo();
		this.props.getIO();
		this.tick = setInterval(this.updateTick, 5000);

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

	componentWillUnmount() {
		clearInterval(this.tick);
	}

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

		return (
			<Container>
				<Grid columns={2}>
					<Grid.Column>
						<Header as="h4" color="blue" content={i18n&&i18n.t ? i18n.t('page.dio.title.do'): ''}/>
						<Table>
							<Table.Body>
								{ 
									[1,2,3,4,5,6,7,8].map(t => {
										let tmp = this.state.do.filter(tt => tt.doid == `do${t}`);
										let dost = this.state.doSt[t] || 0;
										return <DoItem i18n={i18n} key={t} cusKey={`Do${t}`} data={tmp[0] || {}} onLogicChange={this.onLogicChange} onNameChange={this.onNameChange} status={dost} onDoRun={this.doRun}/>
									})
								 }
							</Table.Body>
						</Table>
					</Grid.Column>
					<Grid.Column>
						<Header as="h4" color="blue" content={i18n&&i18n.t ? i18n.t('page.dio.title.di'): ''}/>
						<Table>
							<Table.Body>
								{ 
									[1,2,3,4,5,6,7,8].map(t => {
										let tmp = this.state.di.filter(tt => tt.diid == `di${t}`);
										let dist = this.state.diSt[t] || 0;
										return <DiItem i18n={i18n} key={t} cusKey={`Di${t}`} data={tmp[0] || {}} onLogicChange={this.onLogicChange} onNameChange={this.onNameChange} status={dist} />
									})
								 }
							</Table.Body>
						</Table>
					</Grid.Column>
				</Grid>
				<Button type="button" style={{marginTop: '10px'}} fluid content={i18n&&i18n.t ? i18n.t('page.dio.form.button.update_setting') : ''} onClick={() => {this.updateSetting()}} />
			</Container>
		)
	}
}

export default DIO;