From 768bad6e2d516dac130c40c8582ffe1f0a08c589 Mon Sep 17 00:00:00 2001
From: Jay <admin@trj.tw>
Date: Fri, 21 Apr 2017 15:41:28 +0800
Subject: [PATCH] add modbus value convert modal

---
 .../ActionLinkAddN/ActionSelect/CalModal.js   | 74 +++++++++++++++++++
 .../ActionLinkAddN/ActionSelect/UnitModbus.js | 53 ++++++++++++-
 .../AdminPage/ModbusCmd/CalModal.js           | 74 +++++++++++++++++++
 src/components/AdminPage/ModbusCmd/index.js   | 50 ++++++++++++-
 4 files changed, 246 insertions(+), 5 deletions(-)
 create mode 100644 src/components/AdminPage/ActionLinkAddN/ActionSelect/CalModal.js
 create mode 100644 src/components/AdminPage/ModbusCmd/CalModal.js

diff --git a/src/components/AdminPage/ActionLinkAddN/ActionSelect/CalModal.js b/src/components/AdminPage/ActionLinkAddN/ActionSelect/CalModal.js
new file mode 100644
index 0000000..baa457c
--- /dev/null
+++ b/src/components/AdminPage/ActionLinkAddN/ActionSelect/CalModal.js
@@ -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;
\ No newline at end of file
diff --git a/src/components/AdminPage/ActionLinkAddN/ActionSelect/UnitModbus.js b/src/components/AdminPage/ActionLinkAddN/ActionSelect/UnitModbus.js
index 597a612..2806e36 100644
--- a/src/components/AdminPage/ActionLinkAddN/ActionSelect/UnitModbus.js
+++ b/src/components/AdminPage/ActionLinkAddN/ActionSelect/UnitModbus.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import {Form, Input} from 'semantic-ui-react';
 import { getRequest } from '../../../../actions';
+import CalModal  from './CalModal';
 
 class UnitLeone extends React.Component {
     state = {
@@ -12,7 +13,8 @@ class UnitLeone extends React.Component {
             funcName: '',
             addr: '',
             value: ''
-        }
+        },
+        modal: false
     }
 
     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) =>{
         let data = {...this.state.data};
 
@@ -77,7 +111,7 @@ class UnitLeone extends React.Component {
         let {i18n} = this.props;
         let dev = '';
         let m = this.state.data.dev.match(/(\d+)/);
-        console.log(this.state)
+        
         if(m!=null && m.length > 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)}} />
                 </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>
+                {this.renderModal()}
             </div>
         )
     }
diff --git a/src/components/AdminPage/ModbusCmd/CalModal.js b/src/components/AdminPage/ModbusCmd/CalModal.js
new file mode 100644
index 0000000..baa457c
--- /dev/null
+++ b/src/components/AdminPage/ModbusCmd/CalModal.js
@@ -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;
\ No newline at end of file
diff --git a/src/components/AdminPage/ModbusCmd/index.js b/src/components/AdminPage/ModbusCmd/index.js
index fbcffae..1dcf577 100644
--- a/src/components/AdminPage/ModbusCmd/index.js
+++ b/src/components/AdminPage/ModbusCmd/index.js
@@ -1,11 +1,14 @@
 import React from 'react';
 import {Container, Segment, Input, Form, Button} from 'semantic-ui-react';
 import {getRequest} from '../../../actions';
+import CalModal from './CalModal';
 
 class ModbusCmdPage extends React.Component {
 
     state = {
-        res: ''
+        res: '',
+        value: '',
+        modal: false
     }
 
     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() {
         return (
             <Container>
@@ -66,7 +98,20 @@ class ModbusCmdPage extends React.Component {
                             <Input name="addr" label="請輸入位址" />
                         </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>
                         <Button type="submit" content="送出" fluid />
                     </Form>
@@ -78,6 +123,7 @@ class ModbusCmdPage extends React.Component {
                         ))
                     }
                 </Segment>
+                {this.renderModal()}
             </Container>
         )
     }