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

import React from 'react';
import {Container, Table, Segment, Form, Grid, Button} from 'semantic-ui-react';
import ScanForm from './ScanForm';
import {add_dialog_msg} from '../../../actions';
import SelectScan from './SelectScan';
import ListItem from './ListItem';
import LeOneModal from './LeOneModal';
import CmdModal from './CmdModal';

class LeOnePage extends React.Component {
	state = {
		modal: false,
		modalType: 0,
		modalData: {},
		cmd: false,
		cmdData: {
			id: 0,
			name: '',
			cmd: ''
		}
	}

	scanSubmit = (data) => {
		let {i18n} = this.props;

		if(!data.ip1.trim() || !data.ip2.trim() || !data.ip3.trim() || !data.password.trim()) 
			return this.props.showDialog(i18n&&i18n.t ? i18n.t('tip.input_empty') : '');

		// send to scan
		let json = {
			ip: `${data.ip1}.${data.ip2}.${data.ip3}`,
			password: data.password
		};

		this.props.scanLeOne(json);
	}

	doDelLeOne = (id) => {
		let {i18n} = this.props;
		if(!id) return;
		this.props.delLeOne({id});
	}

	openModal = (type, data = {}) => {
		this.setState({
			modal: true,
			modalType: type == 1 ? 1 : 0,
			modalData: data
		});
	}

	closeModal = () => {
		this.setState({
			modal: false,
			modalData: {}
		});
	}

	submitModal = (type, data ={}) => {
		let {i18n} = this.props;
		if((type == 1 && !data.id) || !data.name || !data.password || (type == 0 && !data.ip)) return this.props.showDialog(i18n&&i18n.t?i18n.t('tip.input_empty') : '')

		if(type == 0){
			this.props.addLeOne(data);
		}else{
			this.props.editLeOne(data);
		}

		this.closeModal();
	}

	openCmdModal = (id, name, cmd) => {
		this.setState({
			cmd: true,
			cmdData: {
				id,name,cmd
			}
		})
	}

	closeCmdModal = () => {
		this.setState({
			cmd: false,
			cmdData: {
				id: 0,
				name: '',
				cmd: ''
			}
		})
	}

	submitCmdModal = (data) => {
		let {i18n} = this.props;
		if(!data.devs || !data.cmd) return this.props.showDialog(i18n&&i18n.t ? i18n.t('tip.input_empty') : '');
		if(data.cmd.trim() == 2) return this.props.showDialog(i18n&&i18n.t ? i18n.t('tip.input_empty_temp') : '');

		let cmds = data.cmd.split(' ');
		if(cmds.length != 2) return this.props.showDialog(i18n&&i18n.t ? i18n.t('tip.input_empty') : '');
		if(cmds[0] == 2 && (cmds[1] <16 || cmds[1] > 30) ) return this.props.showDialog(i18n&&i18n.t ? i18n.t('tip.temp_format') : '');
		this.props.runCmd(data);
		this.closeCmdModal()
	}

	tick = null;

	runTick = () => {
		if(!this.props.scanning){
			this.props.getLeOneList(0);
		}
	}

	componentDidMount() {
		this.props.getLeOneList();
		this.tick = setInterval(this.runTick, 10000);
		this.props.router.setRouteLeaveHook(this.props.route, () => {
			this.props.clearList();
		})
	}

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

	componentWillReceiveProps(nextProps) {
		
	}

	render () {
		let {i18n, scanList, clearScan, addScanLeOne, list, status} = this.props;
		return (
			<Container>
				<Segment>
					<ScanForm i18n={i18n} onSubmit={this.scanSubmit} />
				</Segment>
				<Segment className="clearfix">
					<Button type="button" basic color="green" content={i18n&&i18n.t ? i18n.t('page.leone.table.button.add') : ''} style={{marginBottom: '10px'}} icon="plus" floated="right" onClick={() => {this.openModal(0)}} />
					<Table>
						<Table.Header>
							<Table.Row>
								<Table.HeaderCell>{i18n&&i18n.t ? i18n.t('page.leone.table.operate') : ''}</Table.HeaderCell>
								<Table.HeaderCell>{i18n&&i18n.t ? i18n.t('page.leone.table.name') : ''}</Table.HeaderCell>
								<Table.HeaderCell>{i18n&&i18n.t ? i18n.t('page.leone.table.ip') : ''}</Table.HeaderCell>
								<Table.HeaderCell>{i18n&&i18n.t ? i18n.t('page.leone.table.hsts') : ''}</Table.HeaderCell>
								<Table.HeaderCell>{i18n&&i18n.t ? i18n.t('page.leone.table.mode') : ''}</Table.HeaderCell>
								<Table.HeaderCell>{i18n&&i18n.t ? i18n.t('page.leone.table.password') : ''}</Table.HeaderCell>
								<Table.HeaderCell>{i18n&&i18n.t ? i18n.t('page.leone.table.update_time') : ''}</Table.HeaderCell>
								<Table.HeaderCell>{i18n&&i18n.t ? i18n.t('page.leone.table.control') : ''}</Table.HeaderCell>
							</Table.Row>
						</Table.Header>
						<Table.Body>
							 {
								 list.map(t => {
									 let st = {};
									 for(let i in status){
										 if(status[i].ip == t.leoneip) {
											 st = status[i];
											 break;
										 }
									 }
									 return <ListItem i18n={i18n} key={t.leonelistuid} status={st} data={t} delLeone={this.doDelLeOne} editLeone={this.openModal} runCmd={this.openCmdModal}/>
									})
							 }
						</Table.Body>
					</Table>
				</Segment>
				<SelectScan i18n={i18n} list={scanList} onClose={clearScan} onSubmit={addScanLeOne}/>
				<LeOneModal i18n={i18n} open={this.state.modal} type={this.state.modalType} data={this.state.modalData} onSubmit={this.submitModal} onClose={this.closeModal} />
				<CmdModal i18n={i18n} open={this.state.cmd} id={this.state.cmdData.id} devname={this.state.cmdData.name} cmd={this.state.cmdData.cmd} onSubmit={this.submitCmdModal} onClose={this.closeCmdModal} />
			</Container>
		)
	}
}

export default LeOnePage;