overflow_backup_2018_0455/test_web_router
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

filter

Browse Source
This commit is contained in:
insanity 2017-07-18 16:43:25 +09:00
parent d4948d1e6c
commit 3f1fa9d5f7
4 changed files with 123 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
src/ts/containers/test/Probes.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react';
import { Table, Header, Container } from 'semantic-ui-react';
import { Table, Header, Container, Form, Checkbox, Button } from 'semantic-ui-react';
import { ProbeDetails } from './ProbeDetails';
import { ListContainer } from './commons/ListContainer';
@ -12,6 +12,7 @@ export class Probes extends React.Component<any, any> {
this.state = {
selected: null,
isDetail: false,
list: [],
};
}
@ -23,7 +24,7 @@ export class Probes extends React.Component<any, any> {
"name": "STARTED"
},
"domain": {
"name": "overFlow's domain111"
"name": "asus"
},
"probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
"description": "description1111111111",
@ -34,7 +35,7 @@ export class Probes extends React.Component<any, any> {
"name": "STOPPED"
},
"domain": {
"name": "overFlow's domain222"
"name": "ottugi"
},
"probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
"description": "description22222222",
@ -45,7 +46,7 @@ export class Probes extends React.Component<any, any> {
"name": "STOPPED"
},
"domain": {
"name": "overFlow's domain333"
"name": "lg"
},
"probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
"description": "description33333",
@ -56,12 +57,15 @@ export class Probes extends React.Component<any, any> {
"name": "STARTED"
},
"domain": {
"name": "overFlow's domain444"
"name": "apple"
},
"probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
"description": "description4444",
},
];
this.setState({
list: this.data,
});
}
checkCellStatus(status: any): boolean {
@ -78,6 +82,39 @@ export class Probes extends React.Component<any, any> {
});
}
handleSearch(searchWord: string) {
console.log(searchWord);
let founds = new Array();
for (let probe of this.data) {
if (probe.domain.name.toLowerCase().indexOf(searchWord) !== -1
|| probe.description.toLowerCase().indexOf(searchWord) !== -1
|| probe.metaProbeStatus.name.toLowerCase().indexOf(searchWord) !== -1) {
founds.push(probe);
}
}
this.setState({
list: founds,
});
}
handleFilter(filterStr: string) {
if (filterStr === null) {
this.setState({
list: this.data,
});
return;
}
let founds = new Array();
for (let probe of this.data) {
if (probe.metaProbeStatus.name.indexOf(filterStr) !== -1) {
founds.push(probe);
}
}
this.setState({
list: founds,
});
}
render() {
if (this.state.isDetail) {
return <ProbeDetails probe={this.state.selected} onBack={() => this.setState({ isDetail: false })} />;
@ -96,10 +133,10 @@ export class Probes extends React.Component<any, any> {
</Table.Header>
<Table.Body>
{this.data.map((probe: any, index: number) => (
{this.state.list.map((probe: any, index: number) => (
<Table.Row key={index} onClick={this.handleSelect.bind(this, probe)}>
<Table.Cell >todo. {probe.name}</Table.Cell>
<Table.Cell>todo. {probe.cidr}</Table.Cell>
<Table.Cell >{probe.domain.name}</Table.Cell>
<Table.Cell>{index}</Table.Cell>
<Table.Cell negative={this.checkCellStatus(probe.metaProbeStatus)} textAlign={'center'}>{probe.metaProbeStatus.name}</Table.Cell>
<Table.Cell textAlign={'center'} >todo. {probe.targetCnt}</Table.Cell>
<Table.Cell textAlign={'center'} >todo. {probe.sensorCnt}</Table.Cell>
@ -110,7 +147,71 @@ export class Probes extends React.Component<any, any> {
</Container>;
return (
<ListContainer contents={probeList}/>
<ListContainer
contents={probeList}
filter={<ProbeFilter data={this.data} onFilter={this.handleFilter.bind(this)} />}
onSearch={this.handleSearch.bind(this)}
/>
);
}
}
export class ProbeFilter extends React.Component<any, any> {
constructor(props: any, context: any) {
super(props, context);
this.state = {
status: null,
};
}
handleChange(e: any, data: any) {
this.setState({
status: data.value,
});
this.props.onFilter(data.value);
}
handleReset(e: any, data: any) {
this.setState({
status: null,
});
this.props.onFilter(null);
}
render() {
//todo. getting MetaProbeStatus
let metaProbeStatus = [
{
"id": "1",
"name": "STARTED",
},
{
"id": "2",
"name": "STOPPED",
},
];
return (
<Form>
<Container fluid>
<Button size='mini' floated='right' basic content='Reset' onClick={this.handleReset.bind(this)} />
<Form.Field>
<b>Status</b>
</Form.Field>
{metaProbeStatus.map((item: any, index: number) => (
<Form.Field key={index}>
<Checkbox
radio
label={item.name}
name='status'
value={item.name}
checked={this.state.status === item.name}
onChange={this.handleChange.bind(this)}
/>
</Form.Field>
))}
</Container>
</Form>
);
}
}

2
src/ts/containers/test/TargetDetails.tsx
View File

@ -28,7 +28,7 @@ export class TargetDetails extends React.Component<any, any> {
return (
// <DetailContainer panes={items}/>
<Container>
<Container fluid>
<TargetBasicInfo probe={this.props.probe} />
<Sensors probe={this.props.probe} />
</Container>

19
src/ts/containers/test/commons/ListContainer.tsx
View File

@ -1,26 +1,31 @@
import * as React from 'react';
import { Grid } from 'semantic-ui-react';
import { Grid, Input, Form, Checkbox, Divider, Button } from 'semantic-ui-react';
export class ListContainer extends React.Component<any, any> {
private data: any = null;
constructor(props: any, context: any) {
super(props, context);
this.state = {
};
}
showContents() {
return this.props.contents;
handleSearch(e: any, data: any) {
this.props.onSearch(data.value.toLowerCase());
}
render() {
return (
<Grid>
<Grid.Column width={4} textAlign='center' color='grey'>
CHART AREA
<Grid.Column width={4}>
<Input icon='search' placeholder='Search...' onChange={this.handleSearch.bind(this)} fluid />
{/*filter */}
<Divider />
{this.props.filter}
</Grid.Column>
<Grid.Column stretched width={12} >
{this.showContents()}
{this.props.contents}
</Grid.Column>
</Grid>
);

33
src/ts/containers/test/commons/SideBarContainer.tsx
View File

@ -1,33 +0,0 @@
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>
);
}
}