This commit is contained in:
snoop 2017-07-18 11:14:14 +09:00
parent 9688937838
commit 45cadce1e4
3 changed files with 34 additions and 14 deletions

View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Hello React!</title> <title>Hello React!</title>
@ -7,10 +8,17 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.0/es6-promise.auto.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.0/es6-promise.auto.js"></script>
<![endif]--> <![endif]-->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"></link> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"></link>
</head> <style type="text/css">
.fullHeight {
height: 100%;
}
</style>
</head>
<body> <body>
<div id="react-container"></div> <div id="react-container"></div>
<script src="./vendor.js"></script> <script src="./vendor.js"></script>
<script src="./app.js"></script> <script src="./app.js"></script>
</body> </body>
</html>
</html>

View File

@ -16,7 +16,7 @@ export class Tree extends React.Component<any, any> {
super(props, context); super(props, context);
this.state = { this.state = {
portState: false,
}; };
@ -37,21 +37,27 @@ export class Tree extends React.Component<any, any> {
jsonData.map((data: any, index: number) => { jsonData.map((data: any, index: number) => {
let hh: Host = data; let hh: Host = data;
{/*this.state.portState[hh.ip] = false;*/}
return ( return (
<List.Item key={index}> <List.Item key={index}>
<List.Icon name='folder' /> <List.Icon name='folder' onClick={() => {
{/*this.state.portState[hh.ip] = !this.state.portState[hh.ip];*/}
console.log(this.state.portState)
this.setState({portState:!this.state.portState});
}}/>
<List.Content> <List.Content>
<List.Header>{Utils.int2ip(hh.ip)} {hh.os}</List.Header>
<List.Header> <Checkbox label={Utils.int2ip(hh.ip) + ' ' + hh.os} /> </List.Header>
<List.Description>Host</List.Description> <List.Description>Host</List.Description>
{hh.ports ? hh.ports.map((port: Port, idx: number) => { {this.state.portState?
hh.ports ? hh.ports.map((port: Port, idx: number) => {
return ( return (
<List.List key={idx * 1000}> <List.List key={idx * 1000}>
<List.Item> <List.Item>
<List.Icon name='folder' /> <List.Icon name='folder' />
<List.Content> <List.Content>
<List.Header>{port.portNumber} {port.portType}</List.Header> <List.Header> <Checkbox label={port.portNumber + ' ' + port.portType} /></List.Header>
<List.Description>Port</List.Description> <List.Description>Port</List.Description>
{port.services ? port.services.map((service: Service, sIdx: number) => { {port.services ? port.services.map((service: Service, sIdx: number) => {
return ( return (
@ -59,7 +65,7 @@ export class Tree extends React.Component<any, any> {
<List.Item> <List.Item>
<List.Icon name='folder' /> <List.Icon name='folder' />
<List.Content> <List.Content>
<List.Header>{service.serviceName} {service.portType}</List.Header> <List.Header><Checkbox label={service.serviceName + ' ' + service.portType} /></List.Header>
<List.Description>Service</List.Description> <List.Description>Service</List.Description>
</List.Content> </List.Content>
</List.Item> </List.Item>
@ -70,7 +76,7 @@ export class Tree extends React.Component<any, any> {
</List.Item> </List.Item>
</List.List> </List.List>
); );
}) : ''} }) : '' :''}
</List.Content> </List.Content>
</List.Item> </List.Item>

View File

@ -10,13 +10,19 @@ export class LeftMenu extends React.Component<any, any> {
super(props, context); super(props, context);
this.state = { this.state = {
}; };
window.addEventListener('resize', () => {
console.log(window);
})
} }
render() { render() {
return ( return (
<Container fluid > <Container fluid className='fullHeight'>
<Segment inverted> <Segment inverted className='fullHeight'>
<Menu inverted secondary vertical fluid icon='labeled'> <Menu inverted secondary vertical fluid icon='labeled' >
<Menu.Item name='User' > <Menu.Item name='User' >
<Icon name='user' /> <Icon name='user' />