re commit
This commit is contained in:
@@ -0,0 +1,159 @@
|
||||
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;
|
||||
@@ -0,0 +1,40 @@
|
||||
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';
|
||||
import {convertTime} from '../../../tools';
|
||||
|
||||
const TimeForm = ({i18n, time, onSubmit}) => {
|
||||
return (
|
||||
<Form onSubmit={(e,data) => {
|
||||
e.preventDefault();
|
||||
onSubmit(data.formData);
|
||||
}} serializer={e => {
|
||||
let json = {};
|
||||
|
||||
json.time = e.querySelector('input').value || '';
|
||||
|
||||
return json;
|
||||
}}>
|
||||
<Table>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
<Table.Cell width={8} content={i18n && 't' in i18n ? i18n.t('page.system_info.form.label.sysdate') : ''} textAlign="center"/>
|
||||
<Table.Cell width={8} textAlign="center" >
|
||||
<Datetime dateFormat="YYYY-MM-DD" timeFormat="HH:mm" value={convertTime(time)} input={true} />
|
||||
</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_time') :''} />
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
</Table.Footer>
|
||||
</Table>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
|
||||
export default TimeForm;
|
||||
@@ -0,0 +1,57 @@
|
||||
import React from 'react';
|
||||
import {toggle_loading, get_network_info, get_system_time, add_dialog_msg,set_network_info, set_system_time} from '../../../actions';
|
||||
import Datetime from 'react-datetime';
|
||||
import {Container, Segment, Form, Header, Menu, Grid, Table, Input} from 'semantic-ui-react';
|
||||
import NetForm from './NetForm';
|
||||
import TimeForm from './TimeForm';
|
||||
import {convertTime,padding} from '../../../tools';
|
||||
|
||||
class SysInfo extends React.Component {
|
||||
|
||||
componentDidMount(){
|
||||
let {dispatch} = this.props;
|
||||
// get network
|
||||
dispatch(get_network_info());
|
||||
//get time
|
||||
dispatch(get_system_time());
|
||||
}
|
||||
|
||||
netSubmit = (data) => {
|
||||
let {dispatch, i18n} = this.props;
|
||||
if(!data.dhcpMode){
|
||||
if(!data.ip || !data.netmask || !data.gateway || !data.dns) return dispatch(add_dialog_msg(i18n && 't' in i18n ? i18n.t('tip.input_empty') : ''));
|
||||
}
|
||||
|
||||
dispatch(set_network_info(data.dhcpMode, data.ip, data.netmask, data.gateway, data.dns));
|
||||
}
|
||||
|
||||
timeSubmit = (data) => {
|
||||
let {dispatch, i18n} = this.props;
|
||||
let regex_date = /^([0-9]{4})\-([0-9]{2})\-([0-9]{2})\s([0-9]{1,2}):([0-9]{1,2})$/;
|
||||
if(!('time' in data) || !data.time.trim() || !regex_date.test(data.time.trim())) return dispatch(add_dialog_msg(i18n && 't' in i18n ? i18n.t('tip.datetime_format') : ''));
|
||||
let m = data.time.trim().match(regex_date);
|
||||
if(!m) return dispatch(add_dialog_msg(i18n && 't' in i18n ? i18n.t('tip.datetime_format') : ''));
|
||||
// MMDDHHmmYYYY
|
||||
let dstr = `${m[2]}${m[3]}${padding(m[4], 2)}${padding(m[5], 2)}${m[1]}`;
|
||||
|
||||
dispatch(set_system_time(dstr));
|
||||
}
|
||||
|
||||
render() {
|
||||
let {i18n, network, time} = this.props;
|
||||
return (
|
||||
<Container>
|
||||
<Segment>
|
||||
<Header as="h2" content={i18n && 't' in i18n ? i18n.t('page.system_info.title.sysinfo') : ''} />
|
||||
<NetForm i18n={i18n} network={network} onSubmit={this.netSubmit}/>
|
||||
</Segment>
|
||||
<Segment style={{marginBottom: '100px'}}>
|
||||
<Header as="h2" content={i18n && 't' in i18n ? i18n.t('page.system_info.title.timeinfo') : ''} />
|
||||
<TimeForm i18n={i18n} time={time} onSubmit={this.timeSubmit}/>
|
||||
</Segment>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default SysInfo;
|
||||
Reference in New Issue
Block a user