This commit is contained in:
insanity 2017-07-26 11:26:11 +09:00
parent 83858415f7
commit 7e42fd600b
2 changed files with 22 additions and 152 deletions

View File

@ -8,6 +8,7 @@ import {
} from 'semantic-ui-react';
import NoAuthProbe from '@overflow/noauthprobe/api/model/NoAuthProbe';
import Domain from '@overflow/domain/api/model/Domain';
import { ListContainer } from '@overflow/commons/react/component/ListContainer';
export interface StateProps {
}
@ -20,6 +21,7 @@ export type Props = StateProps & DispatchProps;
export interface State {
selected: NoAuthProbe[];
list: NoAuthProbe[];
}
export class NoauthProbeList extends React.Component<any, any> {
@ -31,6 +33,7 @@ export class NoauthProbeList extends React.Component<any, any> {
super(props, context);
this.state = {
selected: [],
list: null,
};
this.selectedIds = new Array();
}
@ -72,6 +75,9 @@ export class NoauthProbeList extends React.Component<any, any> {
},
},
];
this.setState({
list: this.data,
});
}
public handleSelect(id: string): void {
@ -86,6 +92,12 @@ export class NoauthProbeList extends React.Component<any, any> {
});
}
public handleSearch = (result: any[]): void => {
this.setState({
list: result,
});
}
public checkExist(id: string): boolean {
if (this.state.selected.indexOf(id) === -1) {
return false;
@ -109,8 +121,7 @@ export class NoauthProbeList extends React.Component<any, any> {
}
public render(): JSX.Element {
return (
let noauth =
<Container fluid>
<Table celled selectable striped>
<Table.Header>
@ -126,7 +137,7 @@ export class NoauthProbeList 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.id)} active={this.handleRowActive(probe.id)}>
<Table.Cell collapsing>
<Checkbox checked={this.checkExist(probe.id)} />
@ -149,8 +160,14 @@ export class NoauthProbeList extends React.Component<any, any> {
</Table.Row>
</Table.Footer>
</Table>
</Container>
</Container>;
return (
<ListContainer
contents={noauth}
data={this.data}
onSearch={this.handleSearch}
filter={null}
/>
);
}
}

View File

@ -1,147 +0,0 @@
import * as React from 'react';
import { Table,
Checkbox,
Button,
Header,
Container,
} from 'semantic-ui-react';
import NoAuthProbe from '@overflow/noauthprobe/api/model/NoAuthProbe';
export interface Props {
}
export interface State {
}
export class NoauthProbes extends React.Component<any, any> {
private data: any;
private selectedIds: Array<string>;
constructor(props: Props, context: State) {
super(props, context);
this.state = {
selected: [],
};
this.selectedIds = new Array();
}
public componentWillMount(): void {
this.data = [
{
'id': '11',
'MetaNoAuthProbeStatus': {
'name': 'NORMAL',
},
'hostName': 'insanity windows',
'macAddress': '14:fe:b5:9d:54:7e',
'ipAddress': '192.168.1.105',
'tempProbeKey': '45374d4egsdfw332',
'apiKey': '45374d4egsdfw332',
'domain': {
},
'probe': {
},
},
{
'id': '22',
'MetaNoAuthProbeStatus': {
'name': 'NORMAL',
},
'hostName': 'insanity ubuntu',
'macAddress': '14:fe:b5:9d:54:7e',
'ipAddress': '192.168.1.105',
'tempProbeKey': '45374d4egsdfw332',
'apiKey': '45374d4egsdfw332',
'domain': {
},
'probe': {
},
},
];
}
public handleSelect(id: string): void {
let idx = this.selectedIds.indexOf(id);
if (idx === -1) {
this.selectedIds.push(id);
} else {
this.selectedIds.splice(idx, 1);
}
this.setState({
selected: this.selectedIds,
});
}
public checkExist(id: string): boolean {
if (this.state.selected.indexOf(id) === -1) {
return false;
}
return true;
}
public handleAccept(): void {
alert(this.state.selected);
}
public handleDeny(): void {
alert(this.state.selected);
}
public handleRowActive(id: string):boolean {
if (this.state.selected.indexOf(id) === -1) {
return false;
}
return true;
}
public render(): JSX.Element {
return (
<Container fluid>
<Header as='h3' dividing>Noauth Probes</Header>
<Table celled selectable striped>
<Table.Header>
<Table.Row>
<Table.HeaderCell />
<Table.HeaderCell textAlign={'center'}>No.</Table.HeaderCell>
<Table.HeaderCell textAlign={'center'}>Host IP</Table.HeaderCell>
<Table.HeaderCell textAlign={'center'}>Host Mac</Table.HeaderCell>
<Table.HeaderCell textAlign={'center'}>Host Name</Table.HeaderCell>
<Table.HeaderCell textAlign={'center'}>Created At</Table.HeaderCell>
<Table.HeaderCell textAlign={'center'}>API Key</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{this.data.map((probe: any, index: number) => (
<Table.Row key={index} onClick={this.handleSelect.bind(this, probe.id)} active={this.handleRowActive(probe.id)}>
<Table.Cell collapsing>
<Checkbox checked={this.checkExist(probe.id)} />
</Table.Cell>
<Table.Cell textAlign={'center'}>{index + 1}</Table.Cell>
<Table.Cell textAlign={'center'}>{probe.ipAddress}</Table.Cell>
<Table.Cell textAlign={'center'}>{probe.macAddress}</Table.Cell>
<Table.Cell>{probe.hostName}</Table.Cell>
<Table.Cell textAlign={'center'}></Table.Cell>
<Table.Cell textAlign={'center'}>{probe.apiKey}</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table>
<Button primary floated={'right'} onClick={this.handleAccept.bind(this)}>Accept</Button>
<Button floated={'right'} onClick={this.handleDeny.bind(this)}>Deny</Button>
</Container>
);
}
}