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>