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

Design

Browse Source
This commit is contained in:
sunny 2017-07-14 18:13:35 +09:00
parent ae5afca541
commit 53fd767097
20 changed files with 325 additions and 392 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/ts/Routes.tsx
View File

@ -9,6 +9,7 @@ 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 { Sensors } from './containers/test/Sensors';
// import { Layout } from './containers/test/layout/Layout'
import { Tree } from './containers/test/commons/Tree';
@ -54,6 +55,8 @@ export class Routes extends React.Component<any, any> {
<Route exact path='/test14' component={Components} />
<Route exact path='/test21' component={Sensors} />
</Switch>
</div>

6
src/ts/containers/test/DiscoveryDetails.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react';
import { Button, Modal, Checkbox } from 'semantic-ui-react';
import { Button, Modal, Checkbox, Header, Container } from 'semantic-ui-react';
import { DiscoveryProbe } from './DiscoveryProbe';
import { DiscoveryTable } from './DiscoveryTable';
@ -56,7 +56,7 @@ export class DiscoveryDetails extends React.Component<any, any> {
render() {
return (
<div>
<Container fluid>
<div style={{ margin: '20px' }}>
<DiscoveryProbe probe={this.probeTemp}/>
</div>
@ -75,7 +75,7 @@ export class DiscoveryDetails extends React.Component<any, any> {
</Modal.Actions>
</Modal>
</div>
</Container>
);
}

7
src/ts/containers/test/DiscoveryProbe.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react';
import { Table, Label } from 'semantic-ui-react';
import { Table, Label, Header, Container } from 'semantic-ui-react';
export class DiscoveryProbe extends React.Component<any, any> {
@ -19,7 +19,8 @@ export class DiscoveryProbe extends React.Component<any, any> {
render() {
return (
<div>Probe Details...
<Container fluid>
<Header as='h3' dividing> Probe Details</Header>
<Table celled={false}>
<Table.Body>
<Table.Row>
@ -73,7 +74,7 @@ export class DiscoveryProbe extends React.Component<any, any> {
</Table.Body>
</Table>
</div>
</Container>
)
}

6
src/ts/containers/test/DiscoveryTable.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react';
import {Table, Button, Input, InputProps, ButtonProps, Dropdown } from 'semantic-ui-react';
import {Table, Button, Input, InputProps, ButtonProps, Dropdown, Container } from 'semantic-ui-react';
export class DiscoveryTable extends React.Component<any, any> {
@ -87,7 +87,7 @@ export class DiscoveryTable extends React.Component<any, any> {
render() {
return (
<div>
<Container fluid>
<Table celled>
<Table.Body>
<Table.Row>
@ -122,7 +122,7 @@ export class DiscoveryTable extends React.Component<any, any> {
</Table.Body>
</Table>
<Button floated='right' onClick={this.discoveryStartHandler.bind(this)}> Start </Button>
</div>
</Container>
);
}
}

20
src/ts/containers/test/NoauthProbes.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react';
import { Table, Checkbox, Button } from 'semantic-ui-react';
import { Table, Checkbox, Button, Header, Container } from 'semantic-ui-react';
export class NoauthProbes extends React.Component<any, any> {
@ -92,7 +92,8 @@ export class NoauthProbes extends React.Component<any, any> {
render() {
return (
<div>
<Container fluid>
<Header as='h3' dividing>Noauth Probes</Header>
<Table celled selectable striped>
<Table.Header>
<Table.Row>
@ -121,18 +122,11 @@ export class NoauthProbes extends React.Component<any, any> {
</Table.Row>
))}
</Table.Body>
<Table.Footer fullWidth>
<Table.Row>
<Table.HeaderCell />
<Table.HeaderCell colSpan='6'>
<Button primary floated={'right'} onClick={this.handleAccept.bind(this)}>Accept</Button>
<Button floated={'right'} onClick={this.handleDeny.bind(this)}>Deny</Button>
</Table.HeaderCell>
</Table.Row>
</Table.Footer>
</Table>
</div>
<Button primary floated={'right'} onClick={this.handleAccept.bind(this)}>Accept</Button>
<Button floated={'right'} onClick={this.handleDeny.bind(this)}>Deny</Button>
</Container>
);
}
}

48
src/ts/containers/test/PWChange.tsx
View File

@ -1,7 +1,7 @@
import *as React from 'react'
import {
Icon, Label, Input, InputOnChangeData,
Select, Button
Input, InputOnChangeData,
Select, Button, Grid, Form, Container
} from 'semantic-ui-react'
@ -34,24 +34,32 @@ export class PWChange extends React.Component<any, any> {
return (
<div>
<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 />
<Button onClick={this.onSubmit}> Submit </Button>
<Button> Cancel </Button>
</div>
<Container fluid>
<Grid>
<Grid.Row>
<Grid.Column mobile={16} tablet={5} computer={5}>
</Grid.Column>
<Grid.Column mobile={16} tablet={6} computer={6}>
<Form>
<Form.Input placeholder='Password' type='password' onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ pass: data.value });
}} />
<Form.Input placeholder='Password Confirm' type='password' onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ passCon: data.value });
}} />
<Form.Group>
<Button primary fluid style={{margin:'7'}} onClick={this.onSubmit}> Submit </Button>
<Button fluid style={{margin:'7'}}> Cancel </Button>
</Form.Group>
</Form>
</Grid.Column>
<Grid.Column mobile={16} tablet={4} computer={5}>
</Grid.Column>
</Grid.Row>
</Grid>
</Container>
);
}

102
src/ts/containers/test/ProbeDetails.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react';
import { Button, Table, Label, Segment, Header } from 'semantic-ui-react';
import { Button, Table, Label, Segment, Header, Container } from 'semantic-ui-react';
import { TargetTable } from './Targets';
import { DetailContainer } from './commons/DetailContainer';
@ -56,62 +56,54 @@ export class ProbeBasicInfo extends React.Component<any, any> {
render() {
return (
<Segment.Group>
<Segment inverted color='grey'>
<h4>Probe Details</h4>
</Segment>
<Segment>
<Table celled={false} basic='very'>
<Table.Body>
<Table.Row>
<Table.Cell>
<Header size='small'>Domain</Header>
</Table.Cell>
<Table.Cell>{this.props.probe.domain.name}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Header size='small'>Status</Header>
</Table.Cell>
<Table.Cell>{this.props.probe.metaProbeStatus.name}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Header size='small'>Host IP</Header>
</Table.Cell>
<Table.Cell>????</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Header size='small'>Host Name</Header>
</Table.Cell>
<Table.Cell>????</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Header size='small'>Authorized at</Header>
</Table.Cell>
<Table.Cell>{this.props.probe.createDate}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Header size='small'>Description</Header>
</Table.Cell>
<Table.Cell>{this.props.probe.description}</Table.Cell>
</Table.Row>
<Container fluid>
<Header as='h3' dividing>Probe Info</Header>
<Table celled={false}>
<Table.Body>
<Table.Row>
<Table.Cell collapsing>
<Header size='small'>Domain</Header>
</Table.Cell>
<Table.Cell>{this.props.probe.domain.name}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell collapsing>
<Header size='small'>Status</Header>
</Table.Cell>
<Table.Cell>{this.props.probe.metaProbeStatus.name}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell collapsing>
<Header size='small'>Host IP</Header>
</Table.Cell>
<Table.Cell>????</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell collapsing>
<Header size='small'>Host Name</Header>
</Table.Cell>
<Table.Cell>????</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell collapsing>
<Header size='small'>Authorized at</Header>
</Table.Cell>
<Table.Cell>{this.props.probe.createDate}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell collapsing>
<Header size='small'>Description</Header>
</Table.Cell>
<Table.Cell>{this.props.probe.description}</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
<Table.Row>
<Table.Cell colSpan='4'>
<Button content='Back' icon='left arrow' labelPosition='left' onClick={this.handleBack.bind(this)} />
<Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
{this.showStartStopBtn()}
<Button content='List' icon='list' labelPosition='left' onClick={this.handleBack.bind(this)} />
<Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
{this.showStartStopBtn()}
</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
</Segment>
</Segment.Group>
</Container>
);
}
}

43
src/ts/containers/test/ProbeDown.tsx
View File

@ -1,6 +1,6 @@
import *as React from 'react'
import {
Grid, Menu, Segment, MenuItemProps
Grid, Menu, Segment, MenuItemProps, Header, Container
} from 'semantic-ui-react'
@ -31,29 +31,30 @@ handleItemClick = (event: React.SyntheticEvent<HTMLAnchorElement>, data: MenuIte
const { activeItem } = this.state
return (
<div>
<Grid>
<Grid.Column width={4}>
<Menu fluid vertical tabular>
{osNames.map((os: string) => {
return (
<Menu.Item name={os} active={activeItem === os} onClick={this.handleItemClick} />
)
})}
<Container fluid>
<Header as='h3' dividing>Probe Download</Header>
<Grid>
<Grid.Column width={4}>
<Menu fluid vertical tabular>
{osNames.map((os: string) => {
return (
<Menu.Item name={os} active={activeItem === os} onClick={this.handleItemClick} />
)
})}
</Menu>
</Grid.Column>
</Menu>
</Grid.Column>
<Grid.Column stretched width={12}>
<Segment>
{this.state.activeItem} Download Page
</Segment>
</Grid.Column>
</Grid>
</div>
<Grid.Column stretched width={12}>
<Segment vertical>
{this.state.activeItem} Download Page
</Segment>
</Grid.Column>
</Grid>
</Container>
);
}

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

@ -1,5 +1,5 @@
import * as React from 'react';
import { Table } from 'semantic-ui-react';
import { Table, Header, Container } from 'semantic-ui-react';
import { ProbeDetails } from './ProbeDetails';
@ -84,29 +84,32 @@ export class Probes extends React.Component<any, any> {
}
return (
<Table selectable striped>
<Table.Header>
<Table.Row>
<Table.HeaderCell textAlign={'center'}>Name</Table.HeaderCell>
<Table.HeaderCell textAlign={'center'}>CIDR</Table.HeaderCell>
<Table.HeaderCell textAlign={'center'}>Status</Table.HeaderCell>
<Table.HeaderCell textAlign={'center'}>Target Count</Table.HeaderCell>
<Table.HeaderCell textAlign={'center'}>Sensor Count</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)}>
<Table.Cell >todo. {probe.name}</Table.Cell>
<Table.Cell>todo. {probe.cidr}</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>
<Container fluid>
<Header as='h3' dividing>Probe</Header>
<Table selectable striped>
<Table.Header>
<Table.Row>
<Table.HeaderCell textAlign={'center'}>Name</Table.HeaderCell>
<Table.HeaderCell textAlign={'center'}>CIDR</Table.HeaderCell>
<Table.HeaderCell textAlign={'center'}>Status</Table.HeaderCell>
<Table.HeaderCell textAlign={'center'}>Target Count</Table.HeaderCell>
<Table.HeaderCell textAlign={'center'}>Sensor Count</Table.HeaderCell>
</Table.Row>
))}
</Table.Body>
</Table>
</Table.Header>
<Table.Body>
{this.data.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 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>
</Table.Row>
))}
</Table.Body>
</Table>
</Container>
);
}
}

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

@ -93,8 +93,8 @@ export class ConfigStepper extends React.Component<any, any> {
render() {
return (
<div>
<Step.Group>
<Container fluid>
<Step.Group fluid>
<Step active={this.handleActive(1)} completed={this.handleCompleted(1)}>
<Icon name='settings' />
<Step.Content title='Step 1' description='골라골라 크롤러를 골라' />
@ -118,7 +118,7 @@ export class ConfigStepper extends React.Component<any, any> {
<Button.Or />
<Button content='Next' icon='right arrow' labelPosition='right' positive onClick={this.handleNext.bind(this)} disabled={this.checkNextDisabled()} />
</Button.Group>
</div>
</Container>
);
}
}
@ -197,26 +197,28 @@ export class CrawlerSelector extends React.Component<any, any> {
render() {
return (
<div>
<Grid columns={1}>
<Grid.Column>
<Segment raised>
<Loader active={this.state.isInstalling} size='large' >Installing the Crawler</Loader>
<Label color='red' ribbon>INFO</Label>
<span>Choose a Crawler type.</span>
<br />
<br />
<Dropdown openOnFocus
placeholder='Select Crawler' selection options={this.crawlers} onChange={this.handleCrawlerSelection.bind(this)} />
<Container fluid>
<Segment raised>
<Loader active={this.state.isInstalling} size='large' >Installing the Crawler</Loader>
<Icon name='checkmark' /> Choose a Crawler type.
<br />
<br />
<Grid>
<Grid.Row>
<Grid.Column width='4'>
<Dropdown openOnFocus
placeholder='Select Crawler' selection options={this.crawlers} onChange={this.handleCrawlerSelection.bind(this)} />
<br />
<br />
<CrawlerAuthInputs crawler={this.state.selected} />
</Segment>
</Grid.Column>
</Grid>
</div>
<br />
<br />
</Grid.Column>
<Grid.Column>
<CrawlerAuthInputs crawler={this.state.selected} />
</Grid.Column>
</Grid.Row>
</Grid>
</Segment>
</Container>
);
}
}

102
src/ts/containers/test/SensorDetails.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react';
import { Button, Table, Label, Segment, Header } from 'semantic-ui-react';
import { Button, Table, Label, Segment, Header, Container } from 'semantic-ui-react';
import { DetailContainer } from './commons/DetailContainer';
import { SensorItems } from './SensorItems';
@ -57,62 +57,54 @@ export class SensorBasicInfo extends React.Component<any, any> {
render() {
return (
<Segment.Group>
<Segment inverted color='grey'>
<h4>Probe Details</h4>
</Segment>
<Segment>
<Table celled={false} basic='very'>
<Table.Body>
<Table.Row>
<Table.Cell>
<Header size='small'>Domain</Header>
</Table.Cell>
<Table.Cell>{this.props.probe.domain.name}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Header size='small'>Status</Header>
</Table.Cell>
<Table.Cell>{this.props.probe.metaProbeStatus.name}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Header size='small'>Host IP</Header>
</Table.Cell>
<Table.Cell>????</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Header size='small'>Host Name</Header>
</Table.Cell>
<Table.Cell>????</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Header size='small'>Authorized at</Header>
</Table.Cell>
<Table.Cell>{this.props.probe.createDate}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Header size='small'>Description</Header>
</Table.Cell>
<Table.Cell>{this.props.probe.description}</Table.Cell>
</Table.Row>
<Container fluid>
<Header as='h3' dividing>Sensor Details</Header>
<Table celled={false}>
<Table.Body>
<Table.Row>
<Table.Cell>
<Header size='small'>Domain</Header>
</Table.Cell>
<Table.Cell>{this.props.probe.domain.name}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Header size='small'>Status</Header>
</Table.Cell>
<Table.Cell>{this.props.probe.metaProbeStatus.name}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Header size='small'>Host IP</Header>
</Table.Cell>
<Table.Cell>????</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Header size='small'>Host Name</Header>
</Table.Cell>
<Table.Cell>????</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Header size='small'>Authorized at</Header>
</Table.Cell>
<Table.Cell>{this.props.probe.createDate}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Header size='small'>Description</Header>
</Table.Cell>
<Table.Cell>{this.props.probe.description}</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
<Table.Row>
<Table.Cell colSpan='4'>
<Button content='Back' icon='left arrow' labelPosition='left' onClick={this.handleBack.bind(this)} />
<Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
{this.showStartStopBtn()}
<Button content='Back' icon='left arrow' labelPosition='left' onClick={this.handleBack.bind(this)} />
<Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
{this.showStartStopBtn()}
</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
</Segment>
</Segment.Group>
</Container>
);
}
}

7
src/ts/containers/test/SensorItems.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react';
import { Table, Button } from 'semantic-ui-react';
import { Table, Button, Header, Container } from 'semantic-ui-react';
export class SensorItems extends React.Component<any, any> {
@ -15,9 +15,10 @@ export class SensorItems extends React.Component<any, any> {
render() {
return (
<div>
<Container fluid>
<Header as='h3' dividing>Sensor Item</Header>
Sensor Item List
</div>
</Container>
);
}
}

7
src/ts/containers/test/Sensors.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react';
import { Table, Button } from 'semantic-ui-react';
import { Table, Button, Header, Container } from 'semantic-ui-react';
import { SensorDetails } from './SensorDetails';
export class Sensors extends React.Component<any, any> {
@ -98,7 +98,8 @@ export class Sensors extends React.Component<any, any> {
return <SensorDetails sensor={this.state.selected} />;
}
return (
<div>
<Container fluid>
<Header as='h3' dividing>Sensors</Header>
<Table celled selectable striped>
<Table.Header>
<Table.Row>
@ -124,7 +125,7 @@ export class Sensors extends React.Component<any, any> {
</Table.Body>
</Table>
<Button content='Add' icon='add' labelPosition='left' floated='right' positive onClick={this.handleAddSensor.bind(this)} />
</div>
</Container>
);
}
}

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

@ -1,7 +1,7 @@
import *as React from 'react'
import {
Icon, Label, Input, InputOnChangeData,
Select, Button, Header, Modal, Grid, Container, Segment
Input, InputOnChangeData,
Select, Button, Header, Modal, Grid, Form, Container
} from 'semantic-ui-react'
@ -52,43 +52,29 @@ export class SignIn extends React.Component<any, any> {
return (
<Container>
<Container fluid>
<Grid>
<Grid.Row>
<Grid.Column mobile={16} tablet={5} computer={5}>
</Grid.Column>
<Grid.Column mobile={16} tablet={6} computer={6}>
<Grid columns='equal'>
<Grid.Row style={{padding:'5'}}>
<Grid.Column>
<Input fluid placeholder='Email' onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ email: data.value });
}} />
</Grid.Column>
</Grid.Row>
<Grid.Row style={{padding:'5'}}>
<Grid.Column>
<Input fluid placeholder='Password' type='password' onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ pass: data.value });
}} />
</Grid.Column>
</Grid.Row>
<Grid.Row style={{padding:'5'}}>
<Grid.Column textAlign='right'>
<a style={{fontSize:10}} onClick={this.forgotPopupOpen}>Forgot Password</a>
</Grid.Column>
</Grid.Row>
<Grid.Row style={{padding:'5'}}>
<Grid.Column>
<Button fluid primary onClick={this.onSignIn}> Sign In </Button>
</Grid.Column>
<Grid.Column>
<Button fluid href='/#/test2'> Sign Up </Button>
</Grid.Column>
</Grid.Row>
</Grid>
<Form>
<Form.Input fluid placeholder='Email' onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ email: data.value });
}} />
<Form.Input fluid placeholder='Password' type='password' onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ pass: data.value });
}} />
<div style={{textAlign:'right'}}>
<a style={{fontSize:10}} onClick={this.forgotPopupOpen}>Forgot Password</a>
</div>
<Form.Group>
<Button fluid primary style={{margin:'7'}} onClick={this.onSignIn}> Sign In </Button>
<Button fluid style={{margin:'7'}} href='/#/test2'> Sign Up </Button>
</Form.Group>
</Form>
</Grid.Column>
<Grid.Column mobile={16} tablet={4} computer={5}>
</Grid.Column>
@ -127,7 +113,6 @@ export class SignIn extends React.Component<any, any> {
<Button primary onClick={this.PopupClose}> Ok </Button>
</Modal.Actions>
</Modal>
<br />
</Container>
);
}

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

@ -1,7 +1,7 @@
import *as React from 'react'
import {
Icon, Label, Input, InputOnChangeData,
Select, Button, Dropdown, Grid, Container, Form
Input, InputOnChangeData,
Select, Button, Dropdown, Grid, Form, Container
} from 'semantic-ui-react'
@ -47,111 +47,39 @@ export class SignUp extends React.Component<any, any> {
return (
<Container>
<Grid>
<Grid.Row>
<Grid.Column mobile={16} tablet={5} computer={5}>
</Grid.Column>
<Grid.Column mobile={16} tablet={6} computer={6}>
<Grid>
<Grid.Row style={{padding:'5'}}>
<Grid.Column>
<Input fluid value={this.state.email} placeholder='Email' onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ email: data.value });
}} />
</Grid.Column>
</Grid.Row>
<Grid.Row style={{padding:'5'}}>
<Grid.Column>
<Input fluid placeholder='Name' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ name: data.value });
}} />
</Grid.Column>
</Grid.Row>
<Grid.Row style={{padding:'5'}}>
<Grid.Column>
<Input fluid placeholder='Password' type='password' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ pass: data.value });
}} />
</Grid.Column>
</Grid.Row>
<Grid.Row style={{padding:'5'}}>
<Grid.Column>
<Input fluid placeholder='Password Confirm' type='password' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ passCon: data.value });
}} />
</Grid.Column>
</Grid.Row>
<Grid.Row style={{padding:'5'}}>
<Grid.Column>
<Input fluid placeholder='Company' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ company: data.value });
}} />
</Grid.Column>
</Grid.Row>
<Grid.Row style={{padding:'5'}}>
<Grid.Column>
<Input fluid>
<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>
</Grid.Column>
</Grid.Row>
<Grid.Row style={{padding:'5'}}>
<Grid.Column width='8'>
<Button primary fluid onClick={this.onSubmit}> Sign Up </Button>
</Grid.Column>
<Grid.Column width='8'>
<Button fluid> Cancel </Button>
</Grid.Column>
</Grid.Row>
</Grid>
</Grid.Column>
<Grid.Column mobile={16} tablet={4} computer={5}>
</Grid.Column>
</Grid.Row>
</Grid>
<Container fluid>
<Grid>
<Grid.Row>
<Grid.Column mobile={16} tablet={5} computer={5}>
</Grid.Column>
<Grid.Column mobile={16} tablet={6} computer={6}>
<Form>
<Form.Input fluid value={this.state.email} placeholder='Email' onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ email: data.value });
}} />
<Form.Input fluid placeholder='Name' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ name: data.value });
}} />
<Form.Input fluid placeholder='Password' type='password' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ pass: data.value });
}} />
<Form.Input fluid placeholder='Password Confirm' type='password' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ passCon: data.value });
}} />
<Form.Input fluid placeholder='Company' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ company: data.value });
}} />
<Form.Group>
<Form.Select value={this.state.country} placeholder='Select your country' options={options} onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ country: data.value });
}} />
<Form.Input placeholder='phone' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ phone: data.value });
}}
/>
</Form.Group>
<Form.Group>
<Button primary fluid style={{margin:'7'}} onClick={this.onSubmit}> Sign Up </Button>
<Button fluid style={{margin:'7'}}> Cancel </Button>
</Form.Group>
<Form.Input fluid value={this.state.email} placeholder='Email' onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ email: data.value });
}} />
<Form.Input fluid placeholder='Name' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ name: data.value });
}} />
<Form.Input fluid placeholder='Password' type='password' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ pass: data.value });
}} />
<Form.Input fluid placeholder='Password Confirm' type='password' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ passCon: data.value });
}} />
<Form.Input fluid placeholder='Company' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ company: data.value });
}} />
<Form.Select fluid value={this.state.country} placeholder='Select your country' options={options} onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ country: data.value });
}} />
<Form.Input fluid placeholder='phone' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ phone: data.value });
}} />
<Form.Group>
<Button primary fluid style={{margin:'7'}} onClick={this.onSubmit}> Sign Up </Button>
<Button fluid style={{margin:'7'}}> Cancel </Button>
</Form.Group>
</Form>
</Grid.Column>
<Grid.Column mobile={16} tablet={4} computer={5}>

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

@ -1,5 +1,5 @@
import * as React from 'react';
import { Button, Table } from 'semantic-ui-react';
import { Button, Table, Header, Container } from 'semantic-ui-react';
import { Sensors } from './Sensors';
import { DetailContainer } from './commons/DetailContainer';
@ -48,12 +48,13 @@ export class TargetBasicInfo extends React.Component<any, any> {
render() {
return (
<div>
<Table celled={true}>
<Container fluid>
<Header as='h3' dividing>Target Info</Header>
<Table celled={false}>
<Table.Body>
<Table.Row>
<Table.Cell collapsing>
Name
<Header size='small'>Name</Header>
</Table.Cell>
<Table.Cell>
???
@ -62,7 +63,7 @@ export class TargetBasicInfo extends React.Component<any, any> {
<Table.Row>
<Table.Cell collapsing>
Type
<Header size='small'>Type</Header>
</Table.Cell>
<Table.Cell>
????
@ -71,7 +72,7 @@ export class TargetBasicInfo extends React.Component<any, any> {
<Table.Row>
<Table.Cell collapsing>
Sensor count
<Header size='small'>Sensor count</Header>
</Table.Cell>
<Table.Cell>
???
@ -80,7 +81,7 @@ export class TargetBasicInfo extends React.Component<any, any> {
<Table.Row>
<Table.Cell collapsing>
Created at
<Header size='small'>Created at</Header>
</Table.Cell>
<Table.Cell>
???
@ -91,7 +92,7 @@ export class TargetBasicInfo extends React.Component<any, any> {
</Table>
<Button primary floated={'right'} negative onClick={this.handleRemoveTarget}>Remove</Button>
</div>
</Container>
);
}
}

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

@ -1,5 +1,5 @@
import * as React from 'react';
import { Table, Grid, Segment, Button, Container, Modal, Input } from 'semantic-ui-react';
import { Table, Button, Modal, Input, Header, Container } from 'semantic-ui-react';
import { TargetDetails } from './TargetDetails';
export class Targets extends React.Component<any, any> {
@ -28,9 +28,10 @@ export class Targets extends React.Component<any, any> {
];
return (
<Container>
<Container fluid>
{/*search bar */}
<TargetTable />
<br />
<Button content='Add' icon='add' labelPosition='left' floated='right' positive onClick={this.handleAddTarget.bind(this)} />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<TargetDetails target={this.state.selected} />
@ -129,7 +130,8 @@ export class TargetTable extends React.Component<any, any> {
render() {
return (
<div>
<Container fluid>
<Header as='h3' dividing>Targets</Header>
<Input icon='search' placeholder='Search...' onChange={this.handleSearch.bind(this)} />
<Table celled selectable striped>
<Table.Header>
@ -152,7 +154,7 @@ export class TargetTable extends React.Component<any, any> {
))}
</Table.Body>
</Table>
</div>
</Container>
);
}
}

9
src/ts/containers/test/TopBar.tsx
View File

@ -64,8 +64,13 @@ export class TopBar extends React.Component<any, any> {
<Menu.Item href='/' > Home </Menu.Item>
<Dropdown text='Monitoring' pointing className='link item'>
<Dropdown.Menu>
<Dropdown.Item href='#/test14'> Probe </Dropdown.Item>
<Dropdown.Item>Sensors</Dropdown.Item>
<Dropdown.Header icon='angle right' content='Probe'/>
<Dropdown.Divider />
<Dropdown.Item href='#/test14'> Probe List </Dropdown.Item>
<Dropdown.Item href='#/test14'> Noauth Probes </Dropdown.Item>
<Dropdown.Item href='#/test14'> Download </Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item href='#/test21'>Sensors</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>

1
src/ts/containers/test/layout/Footer.tsx
View File

@ -12,6 +12,7 @@ export class Footer extends React.Component<any, any> {
render() {
return (
<Segment vertical textAlign='center' size='tiny'>
<br />
Copyright LOAFLE.
</Segment>
);

49
src/ts/containers/test/layout/Layout.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react';
import { Container, Menu, Sidebar, Segment, Icon, Breadcrumb } from 'semantic-ui-react';
import { Container, Menu, Sidebar, Segment, Icon, Breadcrumb, Grid } from 'semantic-ui-react';
import { Header } from './Header';
import { Footer } from './Footer';
@ -24,7 +24,24 @@ export class Layout extends React.Component<any, any> {
render() {
return (
<div>
<Container fluid>
<Grid>
<Grid.Row>
<Grid.Column>
Left menu
</Grid.Column>
<Grid.Column>
<Grid.Row>
<Grid.Column>
Logo
</Grid.Column>
<Grid.Column>
Page Content
</Grid.Column>
</Grid.Row>
</Grid.Column>
</Grid.Row>
</Grid>
<Header onSidebar={this.onSidebar.bind(this)}/>
<Sidebar.Pushable as={Segment} vertical >
<Sidebar
@ -38,27 +55,23 @@ export class Layout extends React.Component<any, any> {
inverted
>
<Menu.Item name='home'>
<Icon name='home' />
Home
Notification 1
</Menu.Item>
<Menu.Item name='gamepad'>
<Icon name='gamepad' />
Games
</Menu.Item>
<Menu.Item name='camera'>
<Icon name='camera' />
Channels
Notification 2
</Menu.Item>
</Sidebar>
<Sidebar.Pusher >
<Breadcrumb style={{ padding: '5px 20px 0px' }} size='mini'>
<Breadcrumb.Section link>Home</Breadcrumb.Section>
<Breadcrumb.Divider icon='right angle' />
<Breadcrumb.Section link>Monitoring</Breadcrumb.Section>
<Breadcrumb.Divider icon='right angle' />
<Breadcrumb.Section active>Probe</Breadcrumb.Section>
</Breadcrumb>
<Container fluid textAlign='right' style={{ padding: '5px 20px 0px' }}>
<Breadcrumb size='mini'>
<Breadcrumb.Section link>Home</Breadcrumb.Section>
<Breadcrumb.Divider icon='right angle' />
<Breadcrumb.Section link>Monitoring</Breadcrumb.Section>
<Breadcrumb.Divider icon='right angle' />
<Breadcrumb.Section active>Probe</Breadcrumb.Section>
</Breadcrumb>
</Container>
<Segment vertical>
<Container>
@ -73,7 +86,7 @@ export class Layout extends React.Component<any, any> {
</Sidebar.Pushable>
</div>
</Container>
);
}
}