test

src/ts/components/Rest.tsx

@@ -17,9 +17,6 @@ export class OFRest {
             }
 
         };
-
-
-
     }
 
     public Call() {
@@ -28,10 +25,9 @@ export class OFRest {
             method: 'POST',
             headers: {
                 'Accept': 'application/json',
-                // mode: 'no-cors'
             },
             body: JSON.stringify(this.obj)
-        })
+        });
     }
 
 }

src/ts/containers/target/TargetList.tsx

@@ -1,152 +1,125 @@
 import * as React from 'react';
-
 import { List, ListItem, makeSelectable } from 'material-ui/List';
 import Subheader from 'material-ui/Subheader';
 import Paper from 'material-ui/Paper';
-
 import { OFRest } from '../../components/Rest';
 import * as Utils from '../../components/Utils';
-
 import RaisedButton from 'material-ui/RaisedButton';
+import {
+  Table,
+  TableBody,
+  TableHeader,
+  TableHeaderColumn,
+  TableFooter,
+  TableRow,
+  TableRowColumn,
+} from 'material-ui/Table';
 
-const styles = {
-  test: {
-    display: 'inline-block',
-    float: 'left',
-    width: '50%',
-    height: 550,
-  },
-  container: {
-    width: '80%',
-
-  }
-}
-
-let SelectableList = makeSelectable(List);
-
-function wrapState(ComposedComponent: any, par: any) {
-  return class SelectableList extends React.Component<any, any> {
-
-    componentWillMount() {
-      this.setState({
-        selectedIndex: -1,
-      });
-    }
-
-    handleRequestChange = (event: any, index: any) => {
-      this.setState({
-        selectedIndex: index,
-      });
-      par.handleSelect(index);
-    };
-
-    render() {
-      return (
-        <ComposedComponent
-          value={this.state.selectedIndex}
-          onChange={this.handleRequestChange}
-        >
-          {this.props.children}
-        </ComposedComponent>
-      );
-    }
-  };
-}
-
-var testRes = "[{\"id\":1,\"ip\":3232235882,\"port\":5432,\"targetType\":\"DATABASE\",\"vendorName\":\"PostgreSQL 9.5.0\",\"kinds\":\"PostgreSQL\",\"version\":\"9.5.0\",\"createDate\":1496631864025,\"member\":{\"id\":1,\"email\":\"insanity33@loafle.com\",\"pwSalt\":\"salktttt\",\"digest\":\"bbbbbbbbb\",\"name\":\"insanity3\",\"company\":\"loafle\",\"phone\":\"000-000-0000\",\"authorizedDate\":null}}]";
-
-var RES = JSON.parse(testRes);
 
 export class TargetList extends React.Component<any, any> {
   constructor(props: any, context: any) {
-    super(props, context)
-    SelectableList = wrapState(SelectableList, this);
-
-    this.componentWillMount = this.componentWillMount.bind(this)
-
-    this.getTargetList = this.getTargetList.bind(this);
-
-    
+    super(props, context);
+    this.state = {
+      selected: [],
+      targets: [],
+    };
   }
 
   componentWillMount() {
-
+    this.getTargetList();
   }
 
   getTargetList() {
-
-    let obj: any
-
+    let obj: any;
     obj = {
-      "id":"0",
-      "member":{
-        "id":"1"
+      "id": "0",
+      "member": {
+        "id": "1"
       }
     };
 
     let os: OFRest = new OFRest("Target", "List", obj);
-
+    var that: any = this;
     os.Call().then(function (res) {
       return res.json();
     }).then(function (json) {
-      
-      RES = JSON.parse(json)  
-      
+      let targetList = JSON.parse(json.resultStr);
+      that.setState({
+        targets: targetList,
+      });
     }).catch(function (err) {
       console.log(err);
     });
   }
 
-  handleSelect(idx: any) {
-    this.props.onChange(idx);
+
+  handleRowSelection = (selectedRows: any) => {
+    this.setState({
+      selected: selectedRows,
+    });
   }
 
-  handleSignUp() {
-    this.getTargetList()
+  handleNext = () => {
+    if (this.state.selected.length === 0) {
+      alert('Select a target to monitor');
+    }else {
+      alert("ID: "+ this.state.targets[this.state.selected[0]].id);
+    }
   }
 
+
+  isSelected = (index: any) => {
+    if (this.state.selected.indexOf(index) === -1) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+
   render() {
-    let num: number;
-    num = 1;
     return (
-      <div style={styles.container}>
+      <div >
 
-        <SelectableList>
-          <Subheader>Select a target to monitor</Subheader>
-          <ListItem
-            value={num++}
-            primaryText="192.168.1.0"
-            secondaryText={'Zone'}
-            initiallyOpen={true}
-            nestedItems={[
+        <Table
+          selectable={true}
+          multiSelectable={false}
+          onRowSelection={this.handleRowSelection.bind(this)}
+        >
+          <TableHeader
+            adjustForCheckbox={false}
+            enableSelectAll={false}
+            displaySelectAll={true}>
+            <TableRow >
+              <TableHeaderColumn >Host</TableHeaderColumn>
+              <TableHeaderColumn >Port</TableHeaderColumn>
+              <TableHeaderColumn >Type</TableHeaderColumn>
+              <TableHeaderColumn >Kind</TableHeaderColumn>
+              <TableHeaderColumn >Name</TableHeaderColumn>
+              <TableHeaderColumn >Version</TableHeaderColumn>
+            </TableRow>
+          </TableHeader>
+          <TableBody 
+            deselectOnClickaway={false}>
+            displayRowCheckbox={true}
+            >
+            {this.state.targets.map((row: any, index: number) => (
+              <TableRow key={index}
+                selected={this.isSelected(index)}
+              >
+                <TableRowColumn>{Utils.int2ip(row.ip)}</TableRowColumn>
+                <TableRowColumn>{row.port}</TableRowColumn>
+                <TableRowColumn>{row.targetType}</TableRowColumn>
+                <TableRowColumn>{row.kinds}</TableRowColumn>
+                <TableRowColumn>{row.vendorName}</TableRowColumn>
+                <TableRowColumn>{row.version}</TableRowColumn>
+              </TableRow>
+            ))};
 
+            </TableBody>
+        </Table>
 
-              RES.map(function (item: any, index: number) {
-
-                let port: string;
-                port = "Port : "
-
-
-                return (
-                  <ListItem
-                    value={num++}
-                    primaryText={Utils.int2ip(item.ip)}
-                    secondaryText={'Host'}
-                    initiallyOpen={true}
-                    nestedItems={[
-                      <ListItem
-                        value={num++}
-                        primaryText={item.vendorName}
-                        secondaryText={item.port} />,
-
-                    ]}
-                  />
-                )
-              })
-            ]}
-          />
-        </SelectableList>
-<RaisedButton label="Sign Up" primary={true} onClick={this.handleSignUp.bind(this)} />
+        <RaisedButton label="Next" primary={true} onClick={this.handleNext.bind(this)} style={{ margin: 20 }} />
 
       </div>
     );

tslint.json

@@ -1,5 +1,4 @@
 {
-  "extends": "tslint:recommended",
   "rules": {
     "indent": [
       true,
@@ -12,7 +11,7 @@
     "only-arrow-functions": [
       false, "allow-declarations", "allow-named-functions"
     ],
-    "no-console": false,
+    "no-console": [false],
     "prefer-const": false,
     "member-access": false,
     "no-unused-expression": true,