sensor config

src/ts/containers/test/SensorConfiguration.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Icon, Step, Button, Table, Radio, Form } from 'semantic-ui-react';
+import { Icon, Step, Button, Table, Radio, Form, Container } from 'semantic-ui-react';
-import { Grid, Image, Label, Segment, Dropdown } from 'semantic-ui-react';
+import { Grid, Image, Label, Segment, Dropdown, Input } from 'semantic-ui-react';
 
 
 export class SensorConfiguration extends React.Component<any, any> {
@@ -113,12 +113,11 @@ export class ConfigStepper extends React.Component<any, any> {
         <br />
         {this.showContent()}
         <br />
-        <Button.Group floated={'right'}>
+        <Button.Group floated='right'> {/* floated 사용시 레이아웃 깨지는 현상 */}
-          <Button onClick={this.handlePrev.bind(this)} disabled={this.checkPrevDisabled()}>Prev</Button>
+          <Button content='Prev' icon='left arrow' labelPosition='left' onClick={this.handlePrev.bind(this)} disabled={this.checkPrevDisabled()} />
           <Button.Or />
-          <Button positive onClick={this.handleNext.bind(this)} disabled={this.checkNextDisabled()} >Next</Button>
+          <Button content='Next' icon='right arrow' labelPosition='right' positive onClick={this.handleNext.bind(this)} disabled={this.checkNextDisabled()} />
         </Button.Group>
-
       </div>
     );
   }
@@ -195,7 +194,8 @@ export class CrawlerSelector extends React.Component<any, any> {
               <br />
               <Dropdown openOnFocus
                 placeholder='Select Crawler' selection options={this.crawlers} onChange={this.handleCrawlerSelection.bind(this)} />
-
+              <br/>
+              <br/>
               <CrawlerAuthInputs crawler={this.state.selected} />
             </Segment>
           </Grid.Column>
@@ -208,29 +208,104 @@ export class CrawlerSelector extends React.Component<any, any> {
 
 export class CrawlerAuthInputs extends React.Component<any, any> {
 
+  private data: object[];
   constructor(props: any, context: any) {
     super(props, context);
     this.state = {
+      isVerifying: false,
     };
   }
 
   componentWillMount() {
+    this.data = [
+      {
+        "id": "1",
+        "metaInputType": {
+          "id": "1",
+          "name": "Text",
+        },
+        "name": "Community",
+        "required": "true",
+        "defaultValue": "public",
+        "keyName": "Community",
+        "keyValue": "",
+        "pattern": "regex..."
+      },
+      {
+        "id": "2",
+        "metaInputType": {
+          "id": "2",
+          "name": "Radio",
+        },
+        "name": "AuthType",
+        "required": "true",
+        "defaultValue": "",
+        "keyName": "AuthType",
+        "keyValue": "MD5|SHA",
+        "pattern": "regex..."
+      },
+    ];
+  }
 
+  handleVerify() {
+    this.setState({
+      isVerifying: true,
+    });
+  }
+
+  renderRow(item: any, index: number) {
+    let elem = new Array();
+    let key = index;
+    if (item.metaInputType.name === 'Text') {
+      elem.push(<Input placeholder={item.defaultValue} key={key} />);
+    }
+    else if (item.metaInputType.name === 'Radio') {
+      let itemValues = item.keyValue.split('|');
+      for (let itemValue of itemValues) {
+        elem.push(<Radio
+          key={key}
+          label={itemValue}
+          name='radioGroup'
+          value={itemValue}
+        />);
+        key++;
+      }
+    }
+
+    return <Table.Row>
+      <Table.Cell collapsing>{item.keyName}</Table.Cell>
+      <Table.Cell >{elem}</Table.Cell>
+    </Table.Row >;
   }
 
   render() {
-    let elem = null;
     if (this.props.crawler === null) {
-      elem = null;
+      return null;
-    } else {
-      elem =
-        <div>CrawlerAuthInputs</div>;
     }
-
     return (
-      <div>
+      <Table basic='very' celled collapsing >
-        {elem}
+        <Table.Header>
-      </div>
+          <Table.Row>
+            <Table.HeaderCell colSpan='2'>{this.props.crawler} 접속 정보</Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+
+        <Table.Body>
+          {this.data.map((item: any, index: number) => (
+            this.renderRow(item, index)
+          ))}
+        </Table.Body>
+
+        <Table.Footer>
+          <Table.Row>
+            <Table.HeaderCell />
+            <Table.HeaderCell colSpan='2'>
+              <Button primary floated={'right'} onClick={this.handleVerify.bind(this)} loading={this.state.isVerifying}>Verify</Button>
+            </Table.HeaderCell>
+          </Table.Row>
+
+        </Table.Footer>
+      </Table>
     );
   }
 }
@@ -258,7 +333,7 @@ export class ETCSelector extends React.Component<any, any> {
       interval: 5,
     };
   }
-  handleIntervalChange = (e: any, { value }: any) => this.setState({ interval : value });
+  handleIntervalChange = (e: any, { value }: any) => this.setState({ interval: value });
 
   render() {
     return (

src/ts/containers/test/TargetDetails.tsx

@@ -62,6 +62,7 @@ export class TargetDetails extends React.Component<any, any> {
         </Table>
         <Button content='Back' icon='left arrow' labelPosition='left' onClick={this.handleBack} />
         <Button primary floated={'right'} negative onClick={this.handleRemoveTarget}>Remove</Button>
+        <Button primary floated={'right'} negative onClick={this.handleRemoveTarget}>Add Sensor</Button>
 
         <Sensors target={this.props.target} />
 

src/ts/containers/test/Targets.tsx

@@ -38,6 +38,7 @@ export class Targets extends React.Component<any, any> {
         </Grid>
 
         <TargetDetails target={this.state.selected} />
+        
         <Modal
           open={this.state.openAddTarget}
         >