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 { ProbeDown } from './containers/test/ProbeDown';
import { DiscoveryDetails } from './containers/test/DiscoveryDetails' import { DiscoveryDetails } from './containers/test/DiscoveryDetails'
import { Components } from './containers/test/Components'; import { Components } from './containers/test/Components';
import { Sensors } from './containers/test/Sensors';
// import { Layout } from './containers/test/layout/Layout' // import { Layout } from './containers/test/layout/Layout'
import { Tree } from './containers/test/commons/Tree'; 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='/test14' component={Components} />
<Route exact path='/test21' component={Sensors} />
</Switch> </Switch>
</div> </div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,5 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import { Table } from 'semantic-ui-react'; import { Table, Header, Container } from 'semantic-ui-react';
import { ProbeDetails } from './ProbeDetails'; import { ProbeDetails } from './ProbeDetails';
@ -84,6 +84,8 @@ export class Probes extends React.Component<any, any> {
} }
return ( return (
<Container fluid>
<Header as='h3' dividing>Probe</Header>
<Table selectable striped> <Table selectable striped>
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
@ -107,6 +109,7 @@ export class Probes extends React.Component<any, any> {
))} ))}
</Table.Body> </Table.Body>
</Table> </Table>
</Container>
); );
} }
} }

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

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

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

@ -1,5 +1,5 @@
import * as React from 'react'; 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 { DetailContainer } from './commons/DetailContainer';
import { SensorItems } from './SensorItems'; import { SensorItems } from './SensorItems';
@ -57,12 +57,9 @@ export class SensorBasicInfo extends React.Component<any, any> {
render() { render() {
return ( return (
<Segment.Group> <Container fluid>
<Segment inverted color='grey'> <Header as='h3' dividing>Sensor Details</Header>
<h4>Probe Details</h4> <Table celled={false}>
</Segment>
<Segment>
<Table celled={false} basic='very'>
<Table.Body> <Table.Body>
<Table.Row> <Table.Row>
<Table.Cell> <Table.Cell>
@ -100,19 +97,14 @@ export class SensorBasicInfo extends React.Component<any, any> {
</Table.Cell> </Table.Cell>
<Table.Cell>{this.props.probe.description}</Table.Cell> <Table.Cell>{this.props.probe.description}</Table.Cell>
</Table.Row> </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='Back' icon='left arrow' labelPosition='left' onClick={this.handleBack.bind(this)} />
<Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} /> <Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
{this.showStartStopBtn()} {this.showStartStopBtn()}
</Table.Cell> </Container>
</Table.Row>
</Table.Body>
</Table>
</Segment>
</Segment.Group>
); );
} }
} }

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

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

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

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

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

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

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

@ -1,7 +1,7 @@
import *as React from 'react' import *as React from 'react'
import { import {
Icon, Label, Input, InputOnChangeData, Input, InputOnChangeData,
Select, Button, Dropdown, Grid, Container, Form Select, Button, Dropdown, Grid, Form, Container
} from 'semantic-ui-react' } from 'semantic-ui-react'
@ -47,76 +47,7 @@ export class SignUp extends React.Component<any, any> {
return ( 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>
<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>
<Grid> <Grid>
<Grid.Row> <Grid.Row>
<Grid.Column mobile={16} tablet={5} computer={5}> <Grid.Column mobile={16} tablet={5} computer={5}>
@ -139,15 +70,12 @@ export class SignUp extends React.Component<any, any> {
<Form.Input fluid placeholder='Company' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => { <Form.Input fluid placeholder='Company' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ company: data.value }); this.setState({ company: data.value });
}} /> }} />
<Form.Group> <Form.Select fluid value={this.state.country} placeholder='Select your country' options={options} onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
<Form.Select value={this.state.country} placeholder='Select your country' options={options} onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ country: data.value }); this.setState({ country: data.value });
}} /> }} />
<Form.Input placeholder='phone' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => { <Form.Input fluid placeholder='phone' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ phone: data.value }); this.setState({ phone: data.value });
}} }} />
/>
</Form.Group>
<Form.Group> <Form.Group>
<Button primary fluid style={{margin:'7'}} onClick={this.onSubmit}> Sign Up </Button> <Button primary fluid style={{margin:'7'}} onClick={this.onSubmit}> Sign Up </Button>
<Button fluid style={{margin:'7'}}> Cancel </Button> <Button fluid style={{margin:'7'}}> Cancel </Button>

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

@ -1,5 +1,5 @@
import * as React from 'react'; 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 { Sensors } from './Sensors';
import { DetailContainer } from './commons/DetailContainer'; import { DetailContainer } from './commons/DetailContainer';
@ -48,12 +48,13 @@ export class TargetBasicInfo extends React.Component<any, any> {
render() { render() {
return ( return (
<div> <Container fluid>
<Table celled={true}> <Header as='h3' dividing>Target Info</Header>
<Table celled={false}>
<Table.Body> <Table.Body>
<Table.Row> <Table.Row>
<Table.Cell collapsing> <Table.Cell collapsing>
Name <Header size='small'>Name</Header>
</Table.Cell> </Table.Cell>
<Table.Cell> <Table.Cell>
??? ???
@ -62,7 +63,7 @@ export class TargetBasicInfo extends React.Component<any, any> {
<Table.Row> <Table.Row>
<Table.Cell collapsing> <Table.Cell collapsing>
Type <Header size='small'>Type</Header>
</Table.Cell> </Table.Cell>
<Table.Cell> <Table.Cell>
???? ????
@ -71,7 +72,7 @@ export class TargetBasicInfo extends React.Component<any, any> {
<Table.Row> <Table.Row>
<Table.Cell collapsing> <Table.Cell collapsing>
Sensor count <Header size='small'>Sensor count</Header>
</Table.Cell> </Table.Cell>
<Table.Cell> <Table.Cell>
??? ???
@ -80,7 +81,7 @@ export class TargetBasicInfo extends React.Component<any, any> {
<Table.Row> <Table.Row>
<Table.Cell collapsing> <Table.Cell collapsing>
Created at <Header size='small'>Created at</Header>
</Table.Cell> </Table.Cell>
<Table.Cell> <Table.Cell>
??? ???
@ -91,7 +92,7 @@ export class TargetBasicInfo extends React.Component<any, any> {
</Table> </Table>
<Button primary floated={'right'} negative onClick={this.handleRemoveTarget}>Remove</Button> <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 * 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'; import { TargetDetails } from './TargetDetails';
export class Targets extends React.Component<any, any> { export class Targets extends React.Component<any, any> {
@ -28,9 +28,10 @@ export class Targets extends React.Component<any, any> {
]; ];
return ( return (
<Container> <Container fluid>
{/*search bar */} {/*search bar */}
<TargetTable /> <TargetTable />
<br />
<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)} />
<br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br />
<TargetDetails target={this.state.selected} /> <TargetDetails target={this.state.selected} />
@ -129,7 +130,8 @@ export class TargetTable extends React.Component<any, any> {
render() { render() {
return ( return (
<div> <Container fluid>
<Header as='h3' dividing>Targets</Header>
<Input icon='search' placeholder='Search...' onChange={this.handleSearch.bind(this)} /> <Input icon='search' placeholder='Search...' onChange={this.handleSearch.bind(this)} />
<Table celled selectable striped> <Table celled selectable striped>
<Table.Header> <Table.Header>
@ -152,7 +154,7 @@ export class TargetTable extends React.Component<any, any> {
))} ))}
</Table.Body> </Table.Body>
</Table> </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> <Menu.Item href='/' > Home </Menu.Item>
<Dropdown text='Monitoring' pointing className='link item'> <Dropdown text='Monitoring' pointing className='link item'>
<Dropdown.Menu> <Dropdown.Menu>
<Dropdown.Item href='#/test14'> Probe </Dropdown.Item> <Dropdown.Header icon='angle right' content='Probe'/>
<Dropdown.Item>Sensors</Dropdown.Item> <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.Menu>
</Dropdown> </Dropdown>

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

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

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

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