discovery

src/ts/containers/test/DiscoveryDetails.tsx

@@ -1,14 +1,19 @@
 import * as React from 'react';
+import { Button, Modal, Checkbox } from 'semantic-ui-react';
 import { DiscoveryProbe } from './DiscoveryProbe';
 import { DiscoveryTable } from './DiscoveryTable';
 
 export class DiscoveryDetails extends React.Component<any, any> {
 
   private probeTemp: any;
+  private submitData: any;
 
   constructor(props: any, context: any) {
     super(props, context);
-    this.state = {};
+    this.handleProbeChange.bind(this);
+    this.state = {
+      startPopup:false
+    };
   }
 
   componentWillMount() {
@@ -37,8 +42,18 @@ export class DiscoveryDetails extends React.Component<any, any> {
 
   handleProbeChange(obj: any) {
     console.log(obj)
+    this.setState({ startPopup:true });
+    this.submitData = obj;
   }
 
+  handleSubmit() {
+    console.log(this.submitData)
+  }
+
+  handleCancel= () => this.setState({ startPopup: false });
+
+  handlePopupClose = () => this.setState({ startPopup: false });
+
   render() {
     return (
       <div>
@@ -46,8 +61,20 @@ export class DiscoveryDetails extends React.Component<any, any> {
           <DiscoveryProbe probe={this.probeTemp}/>
         </div>
         <div style={{ margin: '20px' }}>
-          <DiscoveryTable onProbeChange={this.handleProbeChange} />
+          <DiscoveryTable onProbeChange={this.handleProbeChange.bind(this)} />
         </div>
+
+        <Modal size='small' open={this.state.startPopup} onClose={this.handlePopupClose}>
+          <Modal.Header>Change your password Enter email address.</Modal.Header>
+          <Modal.Content >
+            <Checkbox label='IP' />
+          </Modal.Content>
+          <Modal.Actions>
+            <Button onClick={this.handleSubmit} basic color='blue'  >              Submit      </Button>
+            <Button onClick={this.handleCancel}>              Cancel      </Button>
+          </Modal.Actions>
+        </Modal>
+
       </div>
 
     );

src/ts/containers/test/DiscoveryTable.tsx

@@ -1,25 +1,67 @@
 import * as React from 'react';
-import { Table, Button, Input } from 'semantic-ui-react';
+import {Table, Button, Input, InputProps, ButtonProps} from 'semantic-ui-react';
 
 export class DiscoveryTable extends React.Component<any, any> {
 
   constructor(props: any, context: any) {
     super(props, context);
     this.state = {
+      startIp: null,
       endIP: null,
+      excludeIp: null,
+      startPort: null,
+      endPort: null
     };
   }
 
-  handleEndIpInput(event: React.SyntheticEvent<HTMLAnchorElement>, data: any) {
-    console.log(data.value);
-    this.setState({
-      endIP: data.value,
-    });
+  handleInput(event: React.SyntheticEvent<HTMLInputElement>, data: InputProps) {
+    // console.log( data.value);
+    // console.log( event.target);
+    // console.log(data.tabIndex);
 
+    let value: string = data.value;
+    switch (data.tabIndex) {
+      case '0':{
+        this.setState({
+          startIp: value,
+        });
+        break;
+      }
+      case '1':{
+        this.setState({
+          endIP: value,
+        });
+        break;
+      }
+      case '2':{
+        this.setState({
+          excludeIp: value,
+        });
+        break;
+      }
+      case '3':{
+        this.setState({
+          startPort: value,
+        });
+        break;
+      }
+      case '4':{
+        this.setState({
+          endPort: value,
+        });
+        break;
+      }
+      default:{
+        console.log("Error");
+        break;
+      }
+    }
+
+    console.log(this.state.startPort);
   }
 
-  discoveryStartHandler(event: React.SyntheticEvent<HTMLAnchorElement>, data: any) {
-    this.props.onProbeChange(data);
+  discoveryStartHandler(event: React.SyntheticEvent<HTMLButtonElement>, data: ButtonProps) {
+    this.props.onProbeChange(this.state);
   }
 
   render() {
@@ -29,23 +71,23 @@ export class DiscoveryTable extends React.Component<any, any> {
           <Table.Body>
             <Table.Row>
               <Table.Cell width='1'>Start IP</Table.Cell>
-              <Table.Cell width='6'><Input size='large' placeholder='Start IP'  /></Table.Cell>
+              <Table.Cell width='6'><Input tabIndex='0' size='large' placeholder='Start IP' onChange={this.handleInput.bind(this)} /></Table.Cell>
             </Table.Row>
             <Table.Row>
               <Table.Cell>End IP</Table.Cell>
-              <Table.Cell><Input size='large' placeholder='End IP' onChange={this.handleEndIpInput.bind(this)} /></Table.Cell>
+              <Table.Cell><Input tabIndex='1' size='large' placeholder='End IP' onChange={this.handleInput.bind(this)} /></Table.Cell>
             </Table.Row>
             <Table.Row>
               <Table.Cell>Exclude IP</Table.Cell>
-              <Table.Cell><Input  size='large' placeholder='Exclude IP' /></Table.Cell>
+              <Table.Cell><Input tabIndex='2' size='large' placeholder='Exclude IP' onChange={this.handleInput.bind(this)} /></Table.Cell>
             </Table.Row>
             <Table.Row>
               <Table.Cell>Start Port</Table.Cell>
-              <Table.Cell><Input size='large' placeholder='Start Port' /></Table.Cell>
+              <Table.Cell><Input tabIndex='3' size='large' placeholder='Start Port' onChange={this.handleInput.bind(this)} /></Table.Cell>
             </Table.Row>
             <Table.Row>
               <Table.Cell>End Port</Table.Cell>
-              <Table.Cell><Input size='large' placeholder='End Port' /></Table.Cell>
+              <Table.Cell><Input tabIndex='4' size='large' placeholder='End Port' onChange={this.handleInput.bind(this)} /></Table.Cell>
             </Table.Row>
           </Table.Body>
         </Table>