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

probe detail modify

Browse Source
This commit is contained in:
insanity 2017-08-23 11:43:06 +09:00
parent c53bc7961c
commit 8693fcec24
1 changed files with 118 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

181
src/ts/@overflow/probe/react/components/ProbeDetailInfo.tsx
View File

@ -8,8 +8,7 @@ import {
Container,
Input,
InputOnChangeData,
Loader,
Dimmer,
Icon,
} from 'semantic-ui-react';
import Probe from '@overflow/probe/api/model/Probe';
import { Discovery } from '@overflow/discovery/react/components/Discovery';
@ -17,8 +16,8 @@ import { Discovery } from '@overflow/discovery/react/components/Discovery';
import * as Utils from '@overflow/commons/util/Utils';
export interface StateProps {
id: string;
probe: Probe;
id?: string;
probe?: Probe;
}
export interface DispatchProps {
@ -32,6 +31,8 @@ export type Props = StateProps & DispatchProps;
export interface State {
name: string;
desc: string;
nameModifying: boolean;
descModifying: boolean;
}
@ -42,11 +43,14 @@ export class ProbeDetailInfo extends React.Component<Props, State> {
this.state = {
name: undefined,
desc: undefined,
nameModifying: false,
descModifying: false,
};
this.props.onRead(this.props.id);
}
public componentWillMount(): void {
this.props.onRead(this.props.id);
console.log('');
}
public handleStartStop(event: any, data: any): void {
@ -68,12 +72,18 @@ export class ProbeDetailInfo extends React.Component<Props, State> {
const p: Probe = this.props.probe;
p.displayName = this.state.name;
this.props.onModify(p);
this.setState({
nameModifying: false,
});
}
public handleDescModify = () => {
let p: Probe = this.props.probe;
p.description = this.state.desc;
this.props.onModify(p);
this.setState({
descModifying: false,
});
}
@ -83,64 +93,7 @@ export class ProbeDetailInfo extends React.Component<Props, State> {
}
return (
<Container fluid>
<Table celled={false} >
<Table.Body>
<Table.Row>
<Table.Cell collapsing>
<Header size='small'>Name</Header>
</Table.Cell>
<Table.Cell>
<Input action={{ color: 'teal', icon: 'edit', onClick: this.handleNameModify.bind(this) }}
defaultValue={this.props.probe.displayName} size='small' onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ name: data.value });
}} />
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell collapsing>
<Header size='small'>Status</Header>
</Table.Cell>
<Table.Cell>{this.props.probe.status.name}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell collapsing>
<Header size='small'>Created at</Header>
</Table.Cell>
<Table.Cell>{Utils.date2date(this.props.probe.createDate)}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell collapsing>
<Header size='small'>Authorized at</Header>
</Table.Cell>
<Table.Cell>{Utils.date2date(this.props.probe.authorizeDate)}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell collapsing>
<Header size='small'>Authorized by</Header>
</Table.Cell>
<Table.Cell>{this.props.probe.authorizeMember.name}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell collapsing>
<Header size='small'>Uptime</Header>
</Table.Cell>
<Table.Cell>todo.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell collapsing>
<Header size='small'>Description</Header>
</Table.Cell>
<Table.Cell>
<Input action={{ color: 'teal', icon: 'edit', onClick: this.handleDescModify }}
defaultValue={this.props.probe.description} size='small' onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ desc: data.value });
}} />
</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
{this.renderDetail()}
{this.showStopBtn()}
<Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
{/*{this.renderDiscovery()}*/}
@ -148,5 +101,107 @@ export class ProbeDetailInfo extends React.Component<Props, State> {
);
}
public renderDisplayName(): JSX.Element {
if (this.state.nameModifying) {
return (
<Input action={{ color: 'teal', icon: 'save', onClick: this.handleNameModify.bind(this) }}
defaultValue={this.props.probe.displayName} size='small' onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ name: data.value });
}} />
);
} else {
return (
<div>
{this.props.probe.displayName}
<Button icon circular size='mini'
onClick={() => this.setState({ name: this.props.probe.displayName, nameModifying: true })}>
<Icon name='edit' />
</Button>
</div>
);
}
}
public renderDescription(): JSX.Element {
if (this.state.descModifying) {
return (
<Input fluid action={{ color: 'teal', icon: 'save', onClick: this.handleDescModify.bind(this) }}
defaultValue={this.props.probe.description} size='small' onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ desc: data.value });
}} />
);
} else {
return (
<div>
{this.props.probe.description}
<Button icon circular size='mini'
onClick={() => this.setState({ desc: this.props.probe.description, descModifying: true })}>
<Icon name='edit' />
</Button>
</div>
);
}
}
private renderDetail(): JSX.Element {
if (this.props.probe === undefined) {
return null;
}
return (
<Table celled={false} >
<Table.Body>
<Table.Row>
<Table.Cell collapsing>
<Header size='small'>Name</Header>
</Table.Cell>
<Table.Cell>
{this.renderDisplayName()}
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell collapsing>
<Header size='small'>Status</Header>
</Table.Cell>
<Table.Cell>{this.props.probe.status.name}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell collapsing>
<Header size='small'>Created at</Header>
</Table.Cell>
<Table.Cell>{Utils.date2date(this.props.probe.createDate)}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell collapsing>
<Header size='small'>Authorized at</Header>
</Table.Cell>
<Table.Cell>{Utils.date2date(this.props.probe.authorizeDate)}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell collapsing>
<Header size='small'>Authorized by</Header>
</Table.Cell>
<Table.Cell>{this.props.probe.authorizeMember.name}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell collapsing>
<Header size='small'>Uptime</Header>
</Table.Cell>
<Table.Cell>todo.</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell collapsing>
<Header size='small'>Description</Header>
</Table.Cell>
<Table.Cell>
{this.renderDescription()}
</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
);
}
}