Merge branch 'master' into release

This commit is contained in:
Jay 2017-04-21 15:41:46 +08:00
commit 588c5d77ab
4 changed files with 246 additions and 5 deletions

View File

@ -0,0 +1,74 @@
import React from 'react';
import {Modal, Input, Button, Form, Grid} from 'semantic-ui-react';
const CalModal = ({ i18n, onClose, onSubmit }) => {
return (
<Modal open={true}>
<Modal.Header content="數值換算" />
<Modal.Content>
<Form onSubmit={(e,d) => {
e.preventDefault();
onSubmit(d.formData);
}} serializer={e=>{
let json = {
r1: '',
r2: '',
s1: '',
s2: '',
val: ''
}
let r1 = e.querySelector('input[name="r1"]');
if(r1 && 'value' in r1) json.r1 = r1.value;
let r2 = e.querySelector('input[name="r2"]');
if(r2 && 'value' in r2) json.r2 = r2.value;
let s1 = e.querySelector('input[name="s1"]');
if(s1 && 'value' in s1) json.s1 = s1.value;
let s2 = e.querySelector('input[name="s2"]');
if(s2 && 'value' in s2) json.s2 = s2.value;
let val = e.querySelector('input[name="val"]');
if(val && 'value' in val) json.val = val.value;
return json;
}}>
<Form.Field>
<label>Range</label>
<Grid columns={2}>
<Grid.Column>
<Input label="RangeMin" name="r1" />
</Grid.Column>
<Grid.Column>
<Input label="RangeMax" name="r2" />
</Grid.Column>
</Grid>
</Form.Field>
<Form.Field>
<label>Scale</label>
<Grid columns={2}>
<Grid.Column>
<Input label="ScaleMin" name="s1" />
</Grid.Column>
<Grid.Column>
<Input label="ScaleMax" name="s2" />
</Grid.Column>
</Grid>
</Form.Field>
<Form.Field>
<Input label="輸入數值" name="val" />
</Form.Field>
<Grid columns={2}>
<Grid.Column>
<Button fluid content="送出" basic />
</Grid.Column>
<Grid.Column>
<Button fluid type="button" content="取消" basic onClick={()=>{onClose()}} />
</Grid.Column>
</Grid>
</Form>
</Modal.Content>
</Modal>
)
}
export default CalModal;

View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import {Form, Input} from 'semantic-ui-react'; import {Form, Input} from 'semantic-ui-react';
import { getRequest } from '../../../../actions'; import { getRequest } from '../../../../actions';
import CalModal from './CalModal';
class UnitLeone extends React.Component { class UnitLeone extends React.Component {
state = { state = {
@ -12,7 +13,8 @@ class UnitLeone extends React.Component {
funcName: '', funcName: '',
addr: '', addr: '',
value: '' value: ''
} },
modal: false
} }
componentDidMount() { componentDidMount() {
@ -27,6 +29,38 @@ class UnitLeone extends React.Component {
}) })
} }
renderModal = () => {
let {i18n} = this.props;
return (
this.state.modal ?
(
<CalModal i18n={i18n} onClose={this.closeModal} onSubmit={this.submitModal} />
): null
)
}
closeModal = () => {
this.setState({
modal: false
})
}
submitModal = (data) => {
if(!data) return ;
let {showDialog} = this.props;
let {r1, r2, s1, s2, val} = data;
if(!isFinite(r1) || !isFinite(r2) || !isFinite(s1) || !isFinite(s2) || !isFinite(val)) return showDialog('請勿輸入數字以外的內容');
let value = Math.round(((val - r1) * (s2 - s1)) / (r2 - r1));
this.setState({
data:{
...this.state.data,
value
}
}, ()=>{this.closeModal()})
}
changeState = (tag, value) =>{ changeState = (tag, value) =>{
let data = {...this.state.data}; let data = {...this.state.data};
@ -77,7 +111,7 @@ class UnitLeone extends React.Component {
let {i18n} = this.props; let {i18n} = this.props;
let dev = ''; let dev = '';
let m = this.state.data.dev.match(/(\d+)/); let m = this.state.data.dev.match(/(\d+)/);
console.log(this.state)
if(m!=null && m.length > 1){ if(m!=null && m.length > 1){
dev = m[1]; dev = m[1];
} }
@ -128,8 +162,21 @@ class UnitLeone extends React.Component {
<Input label="輸入位址" value={this.state.data.addr} onChange={(e,d) => {this.changeState('addr', d.value)}} /> <Input label="輸入位址" value={this.state.data.addr} onChange={(e,d) => {this.changeState('addr', d.value)}} />
</Form.Field> </Form.Field>
<Form.Field> <Form.Field>
<Input label="輸入數值" value={this.state.data.value} onChange={(e,d) => {this.changeState('value', d.value)}} /> <Input label="輸入數值"
value={this.state.data.value}
onChange={(e,d) => {this.changeState('value', d.value)}}
action={{
content:"數值換算",
basic: true,
onClick: ()=>{
this.setState({
modal: true
})
},
type: 'button'
}} />
</Form.Field> </Form.Field>
{this.renderModal()}
</div> </div>
) )
} }

View File

@ -0,0 +1,74 @@
import React from 'react';
import {Modal, Input, Button, Form, Grid} from 'semantic-ui-react';
const CalModal = ({ i18n, onClose, onSubmit }) => {
return (
<Modal open={true}>
<Modal.Header content="數值換算" />
<Modal.Content>
<Form onSubmit={(e,d) => {
e.preventDefault();
onSubmit(d.formData);
}} serializer={e=>{
let json = {
r1: '',
r2: '',
s1: '',
s2: '',
val: ''
}
let r1 = e.querySelector('input[name="r1"]');
if(r1 && 'value' in r1) json.r1 = r1.value;
let r2 = e.querySelector('input[name="r2"]');
if(r2 && 'value' in r2) json.r2 = r2.value;
let s1 = e.querySelector('input[name="s1"]');
if(s1 && 'value' in s1) json.s1 = s1.value;
let s2 = e.querySelector('input[name="s2"]');
if(s2 && 'value' in s2) json.s2 = s2.value;
let val = e.querySelector('input[name="val"]');
if(val && 'value' in val) json.val = val.value;
return json;
}}>
<Form.Field>
<label>Range</label>
<Grid columns={2}>
<Grid.Column>
<Input label="RangeMin" name="r1" />
</Grid.Column>
<Grid.Column>
<Input label="RangeMax" name="r2" />
</Grid.Column>
</Grid>
</Form.Field>
<Form.Field>
<label>Scale</label>
<Grid columns={2}>
<Grid.Column>
<Input label="ScaleMin" name="s1" />
</Grid.Column>
<Grid.Column>
<Input label="ScaleMax" name="s2" />
</Grid.Column>
</Grid>
</Form.Field>
<Form.Field>
<Input label="輸入數值" name="val" />
</Form.Field>
<Grid columns={2}>
<Grid.Column>
<Button fluid content="送出" basic />
</Grid.Column>
<Grid.Column>
<Button fluid type="button" content="取消" basic onClick={()=>{onClose()}} />
</Grid.Column>
</Grid>
</Form>
</Modal.Content>
</Modal>
)
}
export default CalModal;

View File

@ -1,11 +1,14 @@
import React from 'react'; import React from 'react';
import {Container, Segment, Input, Form, Button} from 'semantic-ui-react'; import {Container, Segment, Input, Form, Button} from 'semantic-ui-react';
import {getRequest} from '../../../actions'; import {getRequest} from '../../../actions';
import CalModal from './CalModal';
class ModbusCmdPage extends React.Component { class ModbusCmdPage extends React.Component {
state = { state = {
res: '' res: '',
value: '',
modal: false
} }
handleSubmit = (data) => { handleSubmit = (data) => {
@ -24,6 +27,35 @@ class ModbusCmdPage extends React.Component {
}); });
} }
renderModal = () => {
let {i18n} = this.props;
return (
this.state.modal ?
(
<CalModal i18n={i18n} onClose={this.closeModal} onSubmit={this.submitModal} />
): null
)
}
closeModal = () => {
this.setState({
modal: false
})
}
submitModal = (data) => {
if(!data) return ;
let {showDialog} = this.props;
let {r1, r2, s1, s2, val} = data;
if(!isFinite(r1) || !isFinite(r2) || !isFinite(s1) || !isFinite(s2) || !isFinite(val)) return showDialog('請勿輸入數字以外的內容');
let value = Math.round(((val - r1) * (s2 - s1)) / (r2 - r1));
this.setState({
value
}, ()=>{this.closeModal()})
}
render() { render() {
return ( return (
<Container> <Container>
@ -66,7 +98,20 @@ class ModbusCmdPage extends React.Component {
<Input name="addr" label="請輸入位址" /> <Input name="addr" label="請輸入位址" />
</Form.Field> </Form.Field>
<Form.Field> <Form.Field>
<Input name="val" label="請輸入數值" /> <Input name="val"
label="請輸入數值"
action={{
content: "數值換算",
basic: true,
type: 'button',
onClick: ()=>{
this.setState({
modal: true
})
}
}}
value={this.state.value}
onChange={(e,d) => {this.setState({value: d.value})}} />
</Form.Field> </Form.Field>
<Button type="submit" content="送出" fluid /> <Button type="submit" content="送出" fluid />
</Form> </Form>
@ -78,6 +123,7 @@ class ModbusCmdPage extends React.Component {
)) ))
} }
</Segment> </Segment>
{this.renderModal()}
</Container> </Container>
) )
} }