webio-node/src/components/AdminPage/SystemInfo/NetForm.js

import React from 'react';
import {} from '../../../actions';
import Datetime from 'react-datetime';
import {Container, Segment, Form, Header, Menu, Grid, Table, Input, Button} from 'semantic-ui-react';

class NetForm extends React.Component {
	state = {
		input: this.props.network && 'NETWORKMODE' in this.props.network && this.props.network['NETWORKMODE'] == 1 ? false : true,
		ip: '',
		netmask: '',
		gateway: '',
		dns: ''
	}

	changeActive = (active) => {
		this.setState({input: active});
	}

	setInputState = (name, val) => {
		let json = {};
		json[name] = val;
		this.setState(json);
	}

	componentWillReceiveProps(nextProps) {
		// if(this.props.network['IP'] != nextProps.network['IP']){
			// this.setState({ip: nextProps.network.ip});
			this.setInputState('ip', nextProps.network['IP']);
		// }
		// if(this.props.network['NETMASK'] != nextProps.network['NETMASK']){
			// this.setState({netmask: nextProps.network.netmask});
			this.setInputState('netmask', nextProps.network['NETMASK']);
		// }
		// if(this.props.network['GATEWAY'] != nextProps.network['GATEWAY']){
			// this.setState({gateway: nextProps.network['GATEWAY]});
			this.setInputState('gateway', nextProps.network['GATEWAY']);
		// }
		// if(this.props.network['DNS'] !== nextProps.network['DNS']){
			// this.setState({dns: nextProps.network['DNS]});
			this.setInputState('dns', nextProps.network['DNS']);
		// }
	}

	render() {
		let {i18n, network, onSubmit} = this.props;
		return (
			<div>
			<Menu widths={2}>
				<Menu.Item active={this.state.input} content={i18n && 't' in i18n ? i18n.t('page.system_info.form.button.dhcpip') : ''} onClick={()=>{this.changeActive(true)}}/>
				<Menu.Item active={!this.state.input} content={i18n && 't' in i18n ? i18n.t('page.system_info.form.button.manualip') : ''} onClick={()=>{this.changeActive(false)}}/>
			</Menu>
			<Form onSubmit={(e,data) => {
					e.preventDefault();
					onSubmit(data.formData);
				}} serializer={e => {
					let json = {
						ip: e.querySelector('input[name="ip"]').value,
						netmask: e.querySelector('input[name="netmask"]').value,
						gateway: e.querySelector('input[name="gateway"]').value,
						dns: e.querySelector('input[name="dns"]').value,
						dhcpMode: this.state.input
					}

					return json;
				}}>
				<Table>
					<Table.Body>
						<Table.Row>
							<Table.Cell width={8} content={i18n && 't' in i18n ? i18n.t('page.system_info.form.label.ip') : ''} textAlign="center"/>
							<Table.Cell width={8} textAlign="center" >
								<Input fluid name="ip" value={this.state.ip} disabled={this.state.input} onChange={e=>{this.setInputState('ip', e.target.value)}}/>
							</Table.Cell>
						</Table.Row>
						<Table.Row>
							<Table.Cell width={8} content={i18n && 't' in i18n ? i18n.t('page.system_info.form.label.netmask') : ''} textAlign="center"/>
							<Table.Cell width={8} textAlign="center" >
								<Input fluid name="netmask" value={this.state.netmask} disabled={this.state.input} onChange={e=>{this.setInputState('netmask', e.target.value)}}/>
							</Table.Cell>
						</Table.Row>
						<Table.Row>
							<Table.Cell width={8} content={i18n && 't' in i18n ? i18n.t('page.system_info.form.label.gateway') : ''} textAlign="center"/>
							<Table.Cell width={8} textAlign="center" >
								<Input fluid name="gateway" value={this.state.gateway} disabled={this.state.input} onChange={e=>{this.setInputState('gateway', e.target.value)}}/>
							</Table.Cell>
						</Table.Row>
						<Table.Row>
							<Table.Cell width={8} content={i18n && 't' in i18n ? i18n.t('page.system_info.form.label.dns') : ''} textAlign="center"/>
							<Table.Cell width={8} textAlign="center" >
								<Input fluid name="dns" value={this.state.dns} disabled={this.state.input} onChange={e=>{this.setInputState('dns', e.target.value)}}/>
							</Table.Cell>
						</Table.Row>
					</Table.Body>
					<Table.Footer>
						<Table.Row>
							<Table.Cell colSpan="2">
								<Button type="submit" fluid content={i18n && 't' in i18n ? i18n.t('page.system_info.form.button.update_network') :''}/>
							</Table.Cell>
						</Table.Row>
					</Table.Footer>
				</Table>
			</Form>
			</div>
		)
	}
}

/*const NetForm = ({i18n, onSubmit, network}) => (
	<Form onSubmit={(e,data) => {
		 	e.preventDefault();
			onSubmit(data.formData);
		 }} serializer={e => {
			let json = {
				ip: e.querySelector('input[name="ip"]').value,
				netmask: e.querySelector('input[name="netmask"]').value,
				gateway: e.querySelector('input[name="gateway"]').value,
				dns: e.querySelector('input[name="dns"]').value
			}

			return json;
		}}>
		<Table>
			<Table.Body>
				<Table.Row>
					<Table.Cell width={8} content={i18n && 't' in i18n ? i18n.t('page.system_info.form.label.ip') : ''} textAlign="center"/>
					<Table.Cell width={8} textAlign="center" >
						<Input fluid name="ip" value={network['IP'] || ''} />
					</Table.Cell>
				</Table.Row>
				<Table.Row>
					<Table.Cell width={8} content={i18n && 't' in i18n ? i18n.t('page.system_info.form.label.netmask') : ''} textAlign="center"/>
					<Table.Cell width={8} textAlign="center" >
						<Input fluid name="netmask" value={network['NETMASK'] || ''} />
					</Table.Cell>
				</Table.Row>
				<Table.Row>
					<Table.Cell width={8} content={i18n && 't' in i18n ? i18n.t('page.system_info.form.label.gateway') : ''} textAlign="center"/>
					<Table.Cell width={8} textAlign="center" >
						<Input fluid name="gateway" value={network['GATEWAY'] || ''} />
					</Table.Cell>
				</Table.Row>
				<Table.Row>
					<Table.Cell width={8} content={i18n && 't' in i18n ? i18n.t('page.system_info.form.label.dns') : ''} textAlign="center"/>
					<Table.Cell width={8} textAlign="center" >
						<Input fluid name="dns" value={network['DNS'] || ''} />
					</Table.Cell>
				</Table.Row>
			</Table.Body>
			<Table.Footer>
				<Table.Row>
					<Table.Cell colSpan="2">
						<Button type="submit" fluid content={i18n && 't' in i18n ? i18n.t('page.system_info.form.button.update_network') :''}/>
					</Table.Cell>
				</Table.Row>
			</Table.Footer>
		</Table>
	</Form>
)*/

export default NetForm;