fixed sensor tree

src/ts/@overflow/app/views/layout/SensorDetailLayout.tsx

@@ -8,6 +8,7 @@ import LeftMenu from './LeftMenu';
 import SensorSetup from '../monitoring/sensor/Setup';
 import SensorDetailInfo from '../monitoring/sensor/DetailInfo';
 import SensorDetailItems from '../monitoring/sensor/DetailItems';
+import SensorItemTree from '../monitoring/sensor/ItemTree';
 
 export interface Props extends RouteComponentProps<any> {
 }
@@ -34,6 +35,14 @@ class SensorDetailLayout extends React.Component<Props, State> {
         'name': 'Items',
         'path': this.state.currUrl + '/items',
       },
+      {
+        'name': 'Setup',
+        'path': this.state.currUrl + '/setup',
+      },
+       {
+        'name': 'Tree',
+        'path': this.state.currUrl + '/tree',
+      },
     ];
     return (
       <Container fluid>
@@ -47,7 +56,8 @@ class SensorDetailLayout extends React.Component<Props, State> {
             <Route exact={true} path={`${this.props.match.url}/:id/info`} component={SensorDetailInfo} />
             <Route exact={true} path={`${this.props.match.url}/:id/items`} component={SensorDetailItems} />
             {/*<Route path={`${this.props.match.url}/:id/history/`} component={EmailConfirm}/>*/}
-            <Route exact={true} path={`${this.props.match.url}/setup`} component={SensorSetup} />
+            <Route exact={true} path={`${this.props.match.url}/:id/setup`} component={SensorSetup} />
+            <Route exact={true} path={`${this.props.match.url}/:id/tree`} component={SensorItemTree} />
           </Switch>
           <Footer />
         </Segment>

src/ts/@overflow/app/views/monitoring/sensor/ItemTree.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { RouteComponentProps } from 'react-router';
+import SensorItemTreeContainer from '@overflow/meta/react/SensorItemTree';
+import WebSocketRPC from '@overflow/commons/websocket/WebSocketRPC';
+import AppContext from '@overflow/commons/context';
+import inject from '@overflow/commons/context/decorator/inject';
+
+class SensorItemTree extends React.Component<RouteComponentProps<object>, object> {
+  @inject()
+  private client: WebSocketRPC;
+
+  public constructor(props?: RouteComponentProps<object>, context?: object) {
+    super(props, context);
+
+    let con = AppContext.get<WebSocketRPC>();
+  }
+
+  public render(): JSX.Element {
+    return (
+        <SensorItemTreeContainer />
+    );
+  }
+
+  private test(@inject() c: WebSocketRPC): void {
+    console.log('');
+  }
+}
+
+
+export default SensorItemTree;

src/ts/@overflow/meta/react/SensorItemTree.tsx

@@ -0,0 +1,26 @@
+import { connect, Dispatch } from 'react-redux';
+import {
+  SensorItemTree,
+  SensorItemTreeStateProps,
+  SensorItemTreeDispatchProps,
+} from './components/SensorItemTree';
+import State from '../redux/state/SensorItemReadAll';
+
+import * as SensorItemReadAllActions from '../redux/action/sensor_item_read_all';
+
+export function mapStateToProps(state: any): SensorItemTreeStateProps {
+  return {
+
+  };
+}
+
+export function mapDispatchToProps(dispatch: Dispatch<any>): SensorItemTreeDispatchProps {
+  return {
+    onRead: () => {
+      dispatch(SensorItemReadAllActions.request());
+    },
+  };
+}
+
+
+export default connect(mapStateToProps, mapDispatchToProps)(SensorItemTree);

src/ts/@overflow/meta/react/components/SensorItemTree.tsx

@@ -4,8 +4,8 @@ import * as React from 'react';
 import { Checkbox, Container, Label, Accordion, Icon, List, ListItemProps } from 'semantic-ui-react';
 
 
-import MetaSensorItemType from '@overflow/meta/api/model/MetaSensorItemType';
-import MetaSensorItem from '@overflow/meta/api/model/MetaSensorItem';
+import MetaSensorItemType from '../../api/model/MetaSensorItemType';
+import MetaSensorItem from '../../api/model/MetaSensorItem';
 
 import * as Utils from '@overflow/commons/utils/Utils';
 
@@ -16,6 +16,7 @@ export interface SensorItemTreeStateProps {
 }
 
 export interface SensorItemTreeDispatchProps {
+  onReadAll?(): void;
 }
 
 
@@ -43,12 +44,12 @@ export class SensorItemTree extends React.Component<SensorItemTreeProps, SensorI
     this.state = {
       portState: {},
     };
-
+    this.sortItemMap();
 
     // fs.readFile('../../../../../dh.json', this.handlJSONFile);
   }
 
-  public componentWillMount(): void {
+  public sortItemMap(): void {
 
     SensorJsonData.map((data: any, idx: number) => {
       let sensorItem: MetaSensorItem = data;
@@ -56,7 +57,7 @@ export class SensorItemTree extends React.Component<SensorItemTreeProps, SensorI
       if (this.itemMap.has(sensorItem.metaSensorItemType.id)) {
         this.itemMap.get(sensorItem.metaSensorItemType.id).metaSensorItemList.push(sensorItem);
       } else {
-        let item: TreeItem = {metaSensorItemList:null, metaSensorItemType:null};
+        let item: TreeItem = { metaSensorItemList: null, metaSensorItemType: null };
         item.metaSensorItemList = [];
         item.metaSensorItemList.push(sensorItem);
         item.metaSensorItemType = this.GetMetaSensorItemType(sensorItem.metaSensorItemType.id);
@@ -65,70 +66,75 @@ export class SensorItemTree extends React.Component<SensorItemTreeProps, SensorI
     });
   }
 
+  public ViewSensorItemType(): JSX.Element[] {
+    let elems: JSX.Element[] = new Array();
+    this.itemMap.forEach((data: TreeItem, key: number) => {
+      elems.push(
+        <List.Item key={key} >
+          <List.Icon name='chevron up' />
+          <List.Content>
+            <List.Header> <Checkbox label={data.metaSensorItemType.name} />   </List.Header>
+            <List.Description>Category</List.Description>
+            {this.ViewSensorItem(data.metaSensorItemList)}
+          </List.Content>
+        </List.Item>,
+      );
+    });
+
+    return elems;
+  }
+
+  public ViewSensorItem(metaSensorItemList: MetaSensorItem[]): JSX.Element[] {
+    let elems: JSX.Element[] = new Array();
+    metaSensorItemList.map((item: MetaSensorItem, idx: number) => {
+      elems.push(
+        <List.List key={idx * 1000}>
+          <List.Item>
+            <List.Icon name='file' />
+            <List.Content>
+              <List.Header> <Checkbox label={item.name} /></List.Header>
+              <List.Description>Sensor Item</List.Description>
+            </List.Content>
+          </List.Item>
+        </List.List>,
+      );
+    });
+
+    return elems;
+  }
+
   public render(): JSX.Element {
     return (
       <Container>
         <List selection>
-          {}
-          {
-
-             this.itemMap.forEach((data: TreeItem, key: number) => {
-              {/*let data: TreeItem = this.itemMap[key];*/}
-              return (
-                <List.Item key={key} >
-
-                  <List.Icon name='folder' onClick={() => {
-
-                    {/*const newPortState = update.newContext()(this.state.portState, {
-                      [hh.ip]: !this.state.portState[hh.ip]
-                    });*/}
-
-                    {/*this.setState({ portState: newPortState });*/ }
-
-                  }} />
-
-                  <List.Content>
-{/*{data.metaSensorItemType.name}*/}
-                    <List.Header> <Checkbox label='aaaa' />   </List.Header>
-                    <List.Description>Category</List.Description>
-                    {true ?
-                      data.metaSensorItemList ? data.metaSensorItemList.map((item: MetaSensorItem, idx: number) => {
-
-                        return (
-                          <List.List key={idx * 1000}>
-                            <List.Item>
-                              <List.Icon name='folder' />
-                              <List.Content>
-                                <List.Header> <Checkbox label={item.name} /></List.Header>
-                                <List.Description>Sensor Item</List.Description>
-                              </List.Content>
-                            </List.Item>
-                          </List.List>
-                        );
-                      }) : '' : ''}
-                  </List.Content>
-                </List.Item>
-              );
-            })}
+          {this.ViewSensorItemType()}
         </List>
       </Container>
     );
   }
 
   private GetMetaSensorItemType(id: number): MetaSensorItemType {
-    SensorTypeJsonData.map((data: any, idx: number) => {
-      let msit: MetaSensorItemType = data;
+
+    for (let i: number = 0; i < SensorTypeJsonData.length; ++i) {
+      let msit: MetaSensorItemType = SensorTypeJsonData[i];
       if (msit.id === id) {
         return msit;
       }
-      return null;
-    });
+    }
     return null;
+    // SensorTypeJsonData.map((data: any, idx: number) => {
+    //   let msit: MetaSensorItemType = data;
+    //   if (msit.id === id) {
+    //     return msit;
+    //   }
+    //   return null;
+    // });
+    // return null;
   }
 
 }
 
-const SensorTypeJsonData = [
+const SensorTypeJsonData: any = [
   {
     'id': 1,
     'create_date': '2017-06-26T10:49:39Z',

src/ts/@overflow/meta/redux/state/SensorItemReadAll.ts

@@ -0,0 +1,12 @@
+
+export interface State {
+  readonly isGetSensorItemAll: boolean;
+  readonly error?: Error;
+}
+
+export const defaultState: State = {
+  isGetSensorItemAll: undefined,
+  error: undefined,
+};
+
+export default State;

src/ts/@overflow/sensor/react/components/SensorDetailItems.tsx

@@ -51,7 +51,7 @@ export class SensorDetailItems extends React.Component<Props, State> {
             {
               this.state.sensorItemList.map((sensorItem: SensorItem, idx: number) => {
                 return (
-                  <Table.Row>
+                  <Table.Row key={idx}>
                     <Table.Cell>{idx}</Table.Cell>
                     <Table.Cell>{sensorItem.item.metaSensorItemType.name}</Table.Cell>
                     <Table.Cell>{sensorItem.item.name}</Table.Cell>