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

Merge remote-tracking branch 'origin/master'

Browse Source
This commit is contained in:
geek 2017-07-11 16:39:32 +09:00
commit 4ae87c574d
10 changed files with 216 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -33,6 +33,7 @@
"react": "^15.5.4",
"react-dom": "15.5.4",
"react-router-dom": "^4.1.1",
"react-tap-event-plugin": "^2.0.1"
"react-tap-event-plugin": "^2.0.1",
"semantic-ui-react": "^0.70.0"
}
}

5
src/ts/Routes.tsx
View File

@ -8,9 +8,8 @@ import { SignIn } from './containers/test/SignIn';
import { PWChange } from './containers/test/PWChange';
import { ProbeDown } from './containers/test/ProbeDown';
import { DiscoveryDetails } from './containers/test/DiscoveryDetails'
import { Components } from './containers/test/Components';
import { Layout } from './containers/test/layout/Layout'
export class Routes extends React.Component<any, any> {
@ -18,6 +17,7 @@ export class Routes extends React.Component<any, any> {
return (
<div>
<h1>React Redux sample</h1>
<li><Link to='/layout' >Layout</Link></li>
<li><Link to='/test' >TopBar</Link></li>
<li><Link to='/test2' >Signup</Link></li>
<li><Link to='/test3' >SignIn</Link></li>
@ -29,6 +29,7 @@ export class Routes extends React.Component<any, any> {
<Switch>
<Route exact path='/layout' component={Layout} />
<Route exact path='/test' component={TopBar} />
<Route exact path='/test2' component={SignUp} />
<Route exact path='/test3' component={SignIn} />

46
src/ts/containers/test/Components.tsx
View File

@ -7,12 +7,6 @@ import { Targets } from './Targets';
import Tab, { TabProps } from 'semantic-ui-react/dist/commonjs/modules/Tab';
const panes = [
{ menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },
{ menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },
{ menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },
];
export class Components extends React.Component<any, any> {
@ -29,41 +23,17 @@ export class Components extends React.Component<any, any> {
});
}
showContent() {
switch(this.state.no) {
case 0: {
return <Probes/>;
}
case 1: {
return <NoauthProbes/>;
}
case 2: {
return <SensorConfiguration/>;
}
case 3: {
return <Targets/>;
}
default: {
}
}
}
render() {
const panes = [
{ menuItem: 'Probes', render: () => <Tab.Pane attached={false}><Probes /></Tab.Pane> },
{ menuItem: 'Noauth Probes', render: () => <Tab.Pane attached={false}><NoauthProbes /></Tab.Pane> },
{ menuItem: 'Sensor Configuration', render: () => <Tab.Pane attached={false}><SensorConfiguration /></Tab.Pane> },
{ menuItem: 'Targets', render: () => <Tab.Pane attached={false}><Targets /></Tab.Pane> },
];
return (
<div style={{margin:'20px'}}>
{/*<Tab panes={panes} />*/}
<Button.Group>
<Button onClick={this.handleButton.bind(this, 0)}>Probe list</Button>
<Button onClick={this.handleButton.bind(this, 1)}>Noauth Probe list</Button>
<Button onClick={this.handleButton.bind(this, 2)}>Sensor Configuration</Button>
<Button onClick={this.handleButton.bind(this, 3)}>Target list</Button>
</Button.Group>
<div style={{margin:'20px'}}>
{this.showContent()}
</div>
</div>
<Tab menu={{ pointing: true }} panes={panes} />
);
}
}

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

@ -167,7 +167,7 @@ export class CrawlerSelector extends React.Component<any, any> {
key: crawler.id,
text: crawler.name,
value: crawler.name,
icon: 'windows',
icon: 'check', //or close?
};
crawlerOptions.push(option);
}

64
src/ts/containers/test/SignIn.tsx
View File

@ -1,6 +1,6 @@
import *as React from 'react'
import {
Icon, Label, Input,
Icon, Label, Input, InputOnChangeData,
Select, Button, Header, Modal
} from 'semantic-ui-react'
@ -15,32 +15,57 @@ export class SignIn extends React.Component<any, any> {
constructor(props: any, context: any) {
super(props, context);
this.state = {
forgotPopup: false,
sendComPopup: false,
email: '',
pass: '',
};
}
forgotPopupOpen = () => this.setState({ forgotPopup: true });
forgotPopupClose = () => this.setState({ forgotPopup: false });
forgotPopupOpen = () => this.setState({ forgotPopup: true });
PopupClose = () => this.setState({ forgotPopup: false, sendComPopup: false });
sendComOpen = () => {
this.setState({
forgotPopup: false,
sendComPopup: true,
});
}
onSignIn = () => {
console.log(this.state);
}
render() {
return (
<div>
<Label> Email </Label>
<Input placeholder='Email' />
<Input label='Email ' placeholder='Email' onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ email: data.value });
}} />
<br />
<Label> Password </Label>
<Input placeholder='Password' type='password' />
<Input label='Password ' placeholder='Password' type='password' onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ pass: data.value });
}} />
<br />
<Button onClick={this.forgotPopupOpen}>Forgot Password</Button>
<Modal size='small' open={this.state.forgotPopup} onClose={this.forgotPopupClose}>
<br />
<Button onClick={this.onSignIn}> Sign In </Button>
<Button href='/#/test2'> Sign Up </Button>
<Modal size='small' open={this.state.forgotPopup} onClose={this.PopupClose}>
<Modal.Header>Change your password Enter email address.</Modal.Header>
<Modal.Content >
<Label> Email </Label>
@ -48,16 +73,25 @@ forgotPopupOpen = () => this.setState({ forgotPopup: true });
</Modal.Content>
<Modal.Actions>
<Button basic color='blue' > Submit </Button>
<Button onClick={this.forgotPopupClose}> Cancel </Button>
<Button onClick={this.sendComOpen} basic color='blue' > Submit </Button>
<Button onClick={this.PopupClose}> Cancel </Button>
</Modal.Actions>
</Modal>
<Modal size='small' open={this.state.sendComPopup} onClose={this.PopupClose}>
<Modal.Header>Send Complete</Modal.Header>
<Modal.Content>
<Modal.Description>
<Header>비밀번호 변경이 신청 되었습니다.</Header>
<p>수신하신 메일의 주소에서 비밀번호 변경을 완료 하시기 바랍니다.</p>
</Modal.Description>
</Modal.Content>
<Modal.Actions>
<Button onClick={this.PopupClose}> 확인 </Button>
</Modal.Actions>
</Modal>
<br />
<Button> Sign In </Button>
<Button href='/#/test2'> Sign Up </Button>
</div>
);

87
src/ts/containers/test/SignUp.tsx
View File

@ -1,7 +1,7 @@
import *as React from 'react'
import {
Icon, Label, Input,
Select, Button
Icon, Label, Input, InputOnChangeData,
Select, Button, Dropdown
} from 'semantic-ui-react'
@ -20,6 +20,25 @@ export class SignUp extends React.Component<any, any> {
constructor(props: any, context: any) {
super(props, context);
this.state = {
email: '',
name: '',
pass: '',
passCon: '',
company: '',
phone: '',
country: '',
};
}
onSubmit = () => {
console.log(this.state)
}
onChange = (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
}
@ -29,31 +48,45 @@ export class SignUp extends React.Component<any, any> {
return (
<div>
<Label> Email </Label>
<Input placeholder='Email' />
<br/>
<Label> User Name </Label>
<Input placeholder='Name' />
<br/>
<Label> Password </Label>
<Input placeholder='Password' type='password' />
<br/>
<Label> Password Confirm </Label>
<Input placeholder='Password Confirm' type='password' />
<br/>
<Label> Company Name </Label>
<Input placeholder='Company' />
<br/>
<Label> Phone </Label>
<Select placeholder='Select your country' options={options} />
<Input placeholder='Phone' />
<br/>
<Button>
Sign Up
</Button>
<Button>
Cancel
</Button>
<Input label='Email ' value={this.state.email} placeholder='Email' onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ email: data.value });
}} />
<br />
<Input label='User Name ' placeholder='Name' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ name: data.value });
}} />
<br />
<Input label='Password ' placeholder='Password' type='password' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ pass: data.value });
}} />
<br />
<Input label='Password Confirm ' placeholder='Password Confirm' type='password' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ passCon: data.value });
}} />
<br />
<Input label='Company Name ' placeholder='Company' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ company: data.value });
}} />
<br />
<Input >
<Label> Phone </Label>
<Select value={this.state.country} placeholder='Select your country' options={options} onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ country: data.value });
}} />
<Input placeholder='phone' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ phone: data.value });
}} />
</Input>
<br />
<Button onClick={this.onSubmit}> Sign Up </Button>
<Button> Cancel </Button>
</div>
);
}

27
src/ts/containers/test/Targets.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react';
import { Table, Grid, Segment, Button, Container } from 'semantic-ui-react';
import { Table, Grid, Segment, Button, Container, Modal } from 'semantic-ui-react';
import { TargetDetails } from './TargetDetails';
export class Targets extends React.Component<any, any> {
@ -7,6 +7,7 @@ export class Targets extends React.Component<any, any> {
constructor(props: any, context: any) {
super(props, context);
this.state = {
openAddTarget: false,
};
}
@ -15,7 +16,9 @@ export class Targets extends React.Component<any, any> {
}
handleAddTarget() {
alert('Add a Target');
this.setState({
openAddTarget: true,
});
}
render() {
@ -29,12 +32,26 @@ export class Targets extends React.Component<any, any> {
</Grid.Column>
<Grid.Column>
<TargetTable />
<Button content='Add' icon='add' labelPosition='left' floated='right' positive onClick={this.handleAddTarget.bind(this)}/>
<Button content='Add' icon='add' labelPosition='left' floated='right' positive onClick={this.handleAddTarget.bind(this)} />
</Grid.Column>
</Grid.Row>
</Grid>
<TargetDetails target={this.state.selected}/>
<TargetDetails target={this.state.selected} />
<Modal
open={this.state.openAddTarget}
>
<Modal.Header>
Adding a Target
</Modal.Header>
<Modal.Content>
<p>contents</p>
</Modal.Content>
<Modal.Actions>
<Button negative onClick={ ()=> this.setState({openAddTarget:false}) }>Cancel</Button>
<Button positive labelPosition='right' icon='checkmark' content='Done' />
</Modal.Actions>
</Modal>
</Container>
);
}

22
src/ts/containers/test/layout/Footer.tsx Normal file
View File

@ -0,0 +1,22 @@
import * as React from 'react';
import { Container } from 'semantic-ui-react';
export class Footer extends React.Component<any, any> {
constructor(props: any, context: any) {
super(props, context);
this.state = {
};
}
render() {
return (
<Container>
Footer area
</Container>
);
}
}

21
src/ts/containers/test/layout/Header.tsx Normal file
View File

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

28
src/ts/containers/test/layout/Layout.tsx Normal file
View File

@ -0,0 +1,28 @@
import * as React from 'react';
import { Container } from 'semantic-ui-react';
import { Header } from './Header';
import { Footer } from './Footer';
export class Layout extends React.Component<any, any> {
constructor(props: any, context: any) {
super(props, context);
this.state = {
};
}
render() {
return (
<Container>
<Header />
<Container>
contents area
</Container>
<Footer />
</Container>
);
}
}