fixed
This commit is contained in:
parent
9688937838
commit
45cadce1e4
@ -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>
|
@ -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>
|
||||||
|
@ -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' />
|
||||||
|
Loading…
x
Reference in New Issue
Block a user