From 6d64f931fc556b448e62908afca33f4b3e381efe Mon Sep 17 00:00:00 2001
From: insanity <insanity@loafle.com>
Date: Mon, 17 Jul 2017 14:03:57 +0900
Subject: [PATCH 1/2] listcontainer

---
 src/ts/containers/test/ProbeDetails.tsx       | 10 +++----
 src/ts/containers/test/Probes.tsx             | 14 +++++----
 src/ts/containers/test/TargetDetails.tsx      | 16 ++++++----
 .../containers/test/commons/ListContainer.tsx | 30 +++++++++++++++++++
 src/ts/containers/test/layout/TitleBar.tsx    |  9 +++---
 5 files changed, 56 insertions(+), 23 deletions(-)
 create mode 100644 src/ts/containers/test/commons/ListContainer.tsx

diff --git a/src/ts/containers/test/ProbeDetails.tsx b/src/ts/containers/test/ProbeDetails.tsx
index fff8a5d..2e2aeb6 100644
--- a/src/ts/containers/test/ProbeDetails.tsx
+++ b/src/ts/containers/test/ProbeDetails.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Button, Table, Label, Segment, Header, Container } from 'semantic-ui-react';
 import { TargetTable } from './Targets';
-import { DetailContainer } from './commons/DetailContainer';
 
 export class ProbeDetails extends React.Component<any, any> {
 
@@ -16,12 +15,11 @@ export class ProbeDetails extends React.Component<any, any> {
   }
 
   render() {
-    const items = [
-      { name: 'Info', child: <ProbeBasicInfo probe={this.props.probe}/> },
-      { name: 'Targets', child: <TargetTable /> },
-    ];
     return (
-      <DetailContainer panes={items}/>
+      <Container>
+        <ProbeBasicInfo probe={this.props.probe} />
+        <TargetTable />
+      </Container>
     );
   }
 }
diff --git a/src/ts/containers/test/Probes.tsx b/src/ts/containers/test/Probes.tsx
index 976176b..87b8969 100644
--- a/src/ts/containers/test/Probes.tsx
+++ b/src/ts/containers/test/Probes.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Table, Header, Container } from 'semantic-ui-react';
 import { ProbeDetails } from './ProbeDetails';
-
+import { ListContainer } from './commons/ListContainer';
 
 export class Probes extends React.Component<any, any> {
 
@@ -80,10 +80,9 @@ export class Probes extends React.Component<any, any> {
 
   render() {
     if (this.state.isDetail) {
-      return <ProbeDetails probe={this.state.selected} onBack={()=>this.setState({isDetail:false})}/>;
-    } 
-
-    return (
+      return <ProbeDetails probe={this.state.selected} onBack={() => this.setState({ isDetail: false })} />;
+    }
+    let component =
       <Container fluid>
         <Header as='h3' dividing>Probe</Header>
         <Table selectable striped>
@@ -109,7 +108,10 @@ export class Probes extends React.Component<any, any> {
             ))}
           </Table.Body>
         </Table>
-      </Container>
+      </Container>;
+
+    return (
+      <ListContainer contents={component}/>
     );
   }
 }
diff --git a/src/ts/containers/test/TargetDetails.tsx b/src/ts/containers/test/TargetDetails.tsx
index 7135813..0773432 100644
--- a/src/ts/containers/test/TargetDetails.tsx
+++ b/src/ts/containers/test/TargetDetails.tsx
@@ -23,11 +23,15 @@ export class TargetDetails extends React.Component<any, any> {
 
     const items = [
       { name: 'Info', child: <TargetBasicInfo probe={this.props.probe} /> },
-      { name: 'Sensors', child: <Sensors probe={this.props.probe}/> },
+      { name: 'Sensors', child: <Sensors probe={this.props.probe} /> },
     ];
 
     return (
-      <DetailContainer panes={items}/>
+      // <DetailContainer panes={items}/>
+      <Container>
+        <TargetBasicInfo probe={this.props.probe} />
+        <Sensors probe={this.props.probe} />
+      </Container>
     );
   }
 }
@@ -55,7 +59,7 @@ export class TargetBasicInfo extends React.Component<any, any> {
             <Table.Row>
               <Table.Cell collapsing>
                 <Header size='small'>Name</Header>
-            </Table.Cell>
+              </Table.Cell>
               <Table.Cell>
                 ???
             </Table.Cell>
@@ -64,7 +68,7 @@ export class TargetBasicInfo extends React.Component<any, any> {
             <Table.Row>
               <Table.Cell collapsing>
                 <Header size='small'>Type</Header>
-            </Table.Cell>
+              </Table.Cell>
               <Table.Cell>
                 ????
             </Table.Cell>
@@ -73,7 +77,7 @@ export class TargetBasicInfo extends React.Component<any, any> {
             <Table.Row>
               <Table.Cell collapsing>
                 <Header size='small'>Sensor count</Header>
-            </Table.Cell>
+              </Table.Cell>
               <Table.Cell>
                 ???
             </Table.Cell>
@@ -82,7 +86,7 @@ export class TargetBasicInfo extends React.Component<any, any> {
             <Table.Row>
               <Table.Cell collapsing>
                 <Header size='small'>Created at</Header>
-            </Table.Cell>
+              </Table.Cell>
               <Table.Cell>
                 ???
             </Table.Cell>
diff --git a/src/ts/containers/test/commons/ListContainer.tsx b/src/ts/containers/test/commons/ListContainer.tsx
new file mode 100644
index 0000000..24e7f10
--- /dev/null
+++ b/src/ts/containers/test/commons/ListContainer.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { Grid } from 'semantic-ui-react';
+
+export class ListContainer extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  showContents() {
+    return this.props.contents;
+  }
+
+  render() {
+    const activeItem = this.state.activeItem;
+
+    return (
+      <Grid>
+        <Grid.Column width={4} textAlign='center' color='grey'>
+          Chart Area
+        </Grid.Column>
+        <Grid.Column stretched width={12} >
+          {this.showContents()}
+        </Grid.Column>
+      </Grid>
+    );
+  }
+}
\ No newline at end of file
diff --git a/src/ts/containers/test/layout/TitleBar.tsx b/src/ts/containers/test/layout/TitleBar.tsx
index da75f89..6b20f1e 100644
--- a/src/ts/containers/test/layout/TitleBar.tsx
+++ b/src/ts/containers/test/layout/TitleBar.tsx
@@ -9,20 +9,19 @@ export class TitleBar extends React.Component<any, any> {
     };
   }
 
-  handleMenu(idx: number) {
-    alert(idx);
-  }
-
   render() {
     let subMenus = [
       {
         "name": "Menu1",
+        "href": "#/test2"
       },
       {
         "name": "Menu2",
+        "href": "#/test3"
       },
       {
         "name": "Menu3",
+        "href": "#/test4"
       },
     ];
     return (
@@ -43,7 +42,7 @@ export class TitleBar extends React.Component<any, any> {
           <Grid.Column width='13'>
             <Menu secondary borderless>
               {subMenus.map((menu: any, index: number) => (
-                <Menu.Item name={menu.name} key={index} onClick={this.handleMenu.bind(this, index)}/>
+                <Menu.Item key={index} name={menu.name} href={menu.href} />
               ))}
             </Menu>
           </Grid.Column>

From 64c50077c2b3484a60a6051239cc82e1b424c6fc Mon Sep 17 00:00:00 2001
From: insanity <insanity@loafle.com>
Date: Mon, 17 Jul 2017 16:14:14 +0900
Subject: [PATCH 2/2] listcontainer

---
 src/ts/containers/test/ProbeDetails.tsx       |  2 +-
 src/ts/containers/test/Probes.tsx             |  5 ++-
 .../containers/test/commons/ListContainer.tsx |  4 +--
 .../test/commons/SideBarContainer.tsx         | 33 +++++++++++++++++++
 4 files changed, 37 insertions(+), 7 deletions(-)
 create mode 100644 src/ts/containers/test/commons/SideBarContainer.tsx

diff --git a/src/ts/containers/test/ProbeDetails.tsx b/src/ts/containers/test/ProbeDetails.tsx
index 2e2aeb6..3d14ab8 100644
--- a/src/ts/containers/test/ProbeDetails.tsx
+++ b/src/ts/containers/test/ProbeDetails.tsx
@@ -16,7 +16,7 @@ export class ProbeDetails extends React.Component<any, any> {
 
   render() {
     return (
-      <Container>
+      <Container fluid>
         <ProbeBasicInfo probe={this.props.probe} />
         <TargetTable />
       </Container>
diff --git a/src/ts/containers/test/Probes.tsx b/src/ts/containers/test/Probes.tsx
index 87b8969..dba2358 100644
--- a/src/ts/containers/test/Probes.tsx
+++ b/src/ts/containers/test/Probes.tsx
@@ -82,9 +82,8 @@ export class Probes extends React.Component<any, any> {
     if (this.state.isDetail) {
       return <ProbeDetails probe={this.state.selected} onBack={() => this.setState({ isDetail: false })} />;
     }
-    let component =
+    let probeList =
       <Container fluid>
-        <Header as='h3' dividing>Probe</Header>
         <Table selectable striped>
           <Table.Header>
             <Table.Row>
@@ -111,7 +110,7 @@ export class Probes extends React.Component<any, any> {
       </Container>;
 
     return (
-      <ListContainer contents={component}/>
+      <ListContainer contents={probeList}/>
     );
   }
 }
diff --git a/src/ts/containers/test/commons/ListContainer.tsx b/src/ts/containers/test/commons/ListContainer.tsx
index 24e7f10..b6a199a 100644
--- a/src/ts/containers/test/commons/ListContainer.tsx
+++ b/src/ts/containers/test/commons/ListContainer.tsx
@@ -14,12 +14,10 @@ export class ListContainer extends React.Component<any, any> {
   }
 
   render() {
-    const activeItem = this.state.activeItem;
-
     return (
       <Grid>
         <Grid.Column width={4} textAlign='center' color='grey'>
-          Chart Area
+          CHART AREA
         </Grid.Column>
         <Grid.Column stretched width={12} >
           {this.showContents()}
diff --git a/src/ts/containers/test/commons/SideBarContainer.tsx b/src/ts/containers/test/commons/SideBarContainer.tsx
new file mode 100644
index 0000000..a293064
--- /dev/null
+++ b/src/ts/containers/test/commons/SideBarContainer.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Sidebar, Segment } from 'semantic-ui-react';
+
+export class SideBarContainer extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  showContents() {
+    return this.props.contents;
+  }
+
+  render() {
+    return (
+        <Sidebar.Pushable as={Segment}>
+          <Sidebar
+            animation='overlay'
+            width='thin'
+            direction='right'
+            visible={true}
+            icon='labeled'
+            vertical
+            inverted
+          >
+          test contents
+          </Sidebar>  
+        </Sidebar.Pushable>
+    );
+  }
+}
\ No newline at end of file