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

test

Browse Source
This commit is contained in:
insanity 2017-05-28 21:56:08 +09:00
parent d48a953c55
commit fd014ff386
7 changed files with 287 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/ts/containers/config/crawlerSelector.tsx Normal file
View File

@ -0,0 +1,21 @@
import * as React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
export class CrawlerSelector extends React.Component<any, any> {
constructor(props: any, context: any) {
super(props, context)
this.state = {
};
}
render() {
return (
<MuiThemeProvider >
<div>
CrawlerSelector
</div>
</MuiThemeProvider>
);
}
}

21
src/ts/containers/config/itemSelector.tsx Normal file
View File

@ -0,0 +1,21 @@
import * as React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
export class ItemSelector extends React.Component<any, any> {
constructor(props: any, context: any) {
super(props, context)
this.state = {
};
}
render() {
return (
<MuiThemeProvider >
<div>
ItemSelector
</div>
</MuiThemeProvider>
);
}
}

118
src/ts/containers/config/sensorConfig.tsx Normal file
View File

@ -0,0 +1,118 @@
import * as React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {
Step,
Stepper,
StepLabel,
} from 'material-ui/Stepper';
import RaisedButton from 'material-ui/RaisedButton';
import FlatButton from 'material-ui/FlatButton';
import Divider from 'material-ui/Divider';
import { TargetSelector } from './targetSelector';
import { CrawlerSelector } from './crawlerSelector';
import { ItemSelector } from './itemSelector';
export class SensorConfig extends React.Component<any, any> {
constructor(props: any, context: any) {
super(props, context)
}
state = {
finished: false,
stepIndex: 0,
selected: -1
};
handleNext = () => {
const { stepIndex } = this.state;
this.setState({
stepIndex: stepIndex + 1,
finished: stepIndex >= 2,
});
if(this.state.stepIndex == 0) {
alert(this.state.selected);
}
};
handlePrev = () => {
const { stepIndex } = this.state;
if (stepIndex > 0) {
this.setState({ stepIndex: stepIndex - 1 });
}
};
handleChange(idx :any) {
this.setState({
selected : idx
});
}
getStepContent(stepIndex: any) {
switch (stepIndex) {
case 0:
return <TargetSelector onChange={this.handleChange.bind(this)} />;
case 1:
return <CrawlerSelector />;
case 2:
return <ItemSelector />;
default:
return 'errrrrrr';
}
}
render() {
return (
<MuiThemeProvider >
<div style={{ width: '100%', maxWidth: 900, margin: 'auto' }}>
<Stepper activeStep={this.state.stepIndex}>
<Step>
<StepLabel>MONITOR WHAT?</StepLabel>
</Step>
<Step>
<StepLabel>TECHNOLOGY USED?</StepLabel>
</Step>
<Step>
<StepLabel>SELEC ITEMS</StepLabel>
</Step>
</Stepper>
<Divider />
<div>
{this.state.finished ? (
<p>
<a
href="#"
onClick={(event) => {
event.preventDefault();
this.setState({ stepIndex: 0, finished: false });
}}
>
Click here
</a> to reset the example.
</p>
) : (
<div>
{this.getStepContent(this.state.stepIndex)}
<div style={{ marginTop: 12, marginBottom: 15, float: 'right' }}>
<FlatButton
label="Back"
disabled={this.state.stepIndex === 0}
onTouchTap={this.handlePrev}
style={{ marginRight: 12 }}
/>
<RaisedButton
label={this.state.stepIndex === 2 ? 'Finish' : 'Next'}
primary={true}
onTouchTap={this.handleNext}
/>
</div>
</div>
)}
</div>
</div>
</MuiThemeProvider>
);
}
}

99
src/ts/containers/config/targetSelector.tsx Normal file
View File

@ -0,0 +1,99 @@
import * as React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { List, ListItem, makeSelectable } from 'material-ui/List';
import Subheader from 'material-ui/Subheader';
import Checkbox from 'material-ui/Checkbox';
let SelectableList = makeSelectable(List);
function wrapState(ComposedComponent: any, par : any) {
return class SelectableList extends React.Component<any, any> {
constructor(props: any) {
super(props);
}
componentWillMount() {
this.setState({
selectedIndex: this.props.defaultValue,
});
}
handleRequestChange = (event: any, index: any) => {
par.handleSelect(index);
};
render() {
return (
<ComposedComponent
value={this.state.selectedIndex}
onChange={this.handleRequestChange}
>
{this.props.children}
</ComposedComponent>
);
}
};
}
export class TargetSelector extends React.Component<any, any> {
constructor(props: any, context: any) {
super(props, context)
this.state = {
};
SelectableList = wrapState(SelectableList, this);
}
handleSelect(idx : any) {
this.props.onChange(idx);
}
render() {
return (
<MuiThemeProvider >
<div>
<SelectableList ref={'list'} >
<Subheader>Select a target to monitor</Subheader>
<ListItem
value={1}
primaryText="192.168.1.0"
initiallyOpen={true}
nestedItems={[
<ListItem
value={2}
primaryText="192.168.1.11"
initiallyOpen={true}
nestedItems={[
<ListItem value={3} primaryText="Redis" secondaryText="5432" />,
<ListItem value={4} primaryText="FTP" secondaryText="5432" />,
]}
/>,
<ListItem
value={5}
primaryText="192.168.1.12"
initiallyOpen={true}
nestedItems={[
<ListItem value={6} primaryText="MySQL" secondaryText="5432" />,
<ListItem value={7} primaryText="SSH" secondaryText="5432" />,
]}
/>,
<ListItem
value={8}
primaryText="192.168.1.13"
initiallyOpen={true}
nestedItems={[
<ListItem value={9} primaryText="Tomcat" secondaryText="8080" />,
]}
/>,
]}
/>
</SelectableList>
</div>
</MuiThemeProvider>
);
}
}

24
src/ts/containers/prove/download.tsx
View File

@ -8,19 +8,19 @@ import Download from 'material-ui/svg-icons/file/file-download';
import Delete from 'material-ui/svg-icons/action/delete';
import ContentCopy from 'material-ui/svg-icons/content/content-copy';
import {InstallGuide} from './installguide';
import { InstallGuide } from './installguide';
const styles = {
osSelector : {
display: 'inline-block',
float: 'left',
osSelector: {
display: 'inline-block',
float: 'left',
},
content: {
display: 'inline-block',
float: 'left',
width : "85%",
height : 700,
padding : 20,
width: "85%",
height: 700,
padding: 20,
},
}
@ -29,14 +29,14 @@ export class ProveDownload extends React.Component<any, any> {
super(props, context)
this.state = {
selectedOSidx: 0,
selectedOSName : "Windows",
selectedOSName: "Windows",
};
}
handleOSChange = (event :any, menuItem: any, index: any) => {
handleOSChange = (event: any, menuItem: any, index: any) => {
this.setState({
selectedOSidx: index,
selectedOSName : menuItem.props.primaryText
selectedOSName: menuItem.props.primaryText
});
}
@ -45,7 +45,7 @@ export class ProveDownload extends React.Component<any, any> {
return (
<MuiThemeProvider >
<div>
<div>
<div>
<Paper style={styles.osSelector}>
<Menu onItemTouchTap={this.handleOSChange.bind(this)}>
@ -60,7 +60,7 @@ export class ProveDownload extends React.Component<any, any> {
</Paper>
<Paper style={styles.content}>
<InstallGuide idx={this.state.selectedOSidx} name={this.state.selectedOSName}/>
<InstallGuide idx={this.state.selectedOSidx} name={this.state.selectedOSName} />
</Paper>
</div>

28
src/ts/containers/prove/installguide.tsx
View File

@ -1,6 +1,6 @@
import * as React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {List, ListItem} from 'material-ui/List';
import { List, ListItem } from 'material-ui/List';
import ActionInfo from 'material-ui/svg-icons/action/info';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
@ -9,8 +9,8 @@ const styles = {
content: {
display: 'inline-block',
float: 'left',
width : "85%",
height : 700,
width: "85%",
height: 700,
},
}
@ -26,19 +26,19 @@ export class InstallGuide extends React.Component<any, any> {
const osIdx = this.props.idx;
let target = null;
if (osIdx == 0) {
target = <WindowsInstallGuide/>;
}else if (osIdx == 1) {
target = <UbuntuInstallGuide/>;
}else {
target = <WindowsInstallGuide />;
} else if (osIdx == 1) {
target = <UbuntuInstallGuide />;
} else {
target = <h2>Not support yet.</h2>;
}
return (
<MuiThemeProvider >
<div>
<div>
<h1>Installing on {this.props.name}</h1>
<ListItem primaryText="Blah Blah Blah..." disabled={true} leftIcon={<ActionInfo />} />
{target}
{target}
</div>
</MuiThemeProvider>
);
@ -52,7 +52,7 @@ export class WindowsInstallGuide extends React.Component<any, any> {
};
}
handleArchChange = (event :any, menuItem: any, value: any) => {
handleArchChange = (event: any, menuItem: any, value: any) => {
this.setState({
selectedArch: value,
});
@ -61,12 +61,12 @@ export class WindowsInstallGuide extends React.Component<any, any> {
render() {
return (
<MuiThemeProvider >
<div>
<div>
<SelectField
floatingLabelText="Architecture"
value={this.state.selectedArch}
onChange={this.handleArchChange}
>
>
<MenuItem value={0} primaryText="32bit" />
<MenuItem value={1} primaryText="64bit" />
</SelectField>
@ -87,9 +87,9 @@ export class UbuntuInstallGuide extends React.Component<any, any> {
render() {
return (
<MuiThemeProvider >
<div>
<div>
Ubuntu blah blah
</div>
</div>
</MuiThemeProvider>
);
}

3
src/ts/index.tsx
View File

@ -8,6 +8,7 @@ import { MemberEmailConfirm } from './containers/member/emailConfirm';
import { MemberLogin } from './containers/member/login';
import { Main } from './containers/Main';
import { ProveDownload } from './containers/prove/download';
import { SensorConfig } from './containers/config/sensorConfig';
import '../scss/index.scss';
@ -15,6 +16,6 @@ import '../scss/index.scss';
injectTapEventPlugin();
ReactDOM.render(
<ProveDownload />,
<SensorConfig />,
document.getElementById('example')
);