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

Merge branch 'master' of https://git.loafle.net/overflow/Test_Web_Router

Browse Source
This commit is contained in:
snoop 2017-07-19 17:31:50 +09:00
commit 663966d38c
10 changed files with 171 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -12,6 +12,7 @@
"@types/react-dom": "^15.5.0",
"@types/react-router-dom": "^4.0.4",
"@types/react-tap-event-plugin": "^0.0.30",
"@types/lodash": "^4.14.69",
"awesome-typescript-loader": "^3.1.3",
"css-loader": "^0.28.2",
"copy-webpack-plugin": "^4.0.1",
@ -34,6 +35,7 @@
"react-dom": "15.5.4",
"react-router-dom": "^4.1.1",
"react-tap-event-plugin": "^2.0.1",
"semantic-ui-react": "^0.70.0"
"semantic-ui-react": "^0.70.0",
"lodash": "^4.17.4"
}
}

2
src/ts/Routes.tsx
View File

@ -12,6 +12,7 @@ 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';
import { TableExampleSortable } from './containers/test/TableExampleSortable'
export class Blank extends React.Component<any, any> {
render() {
@ -52,6 +53,7 @@ export class Routes extends React.Component<any, any> {
<Route exact path='/test5' component={ProbeDown} />
<Route exact path='/test6' component={DiscoveryDetails} />
<Route exact path='/test7' component={Tree} />
<Route exact path='/test8' component={TableExampleSortable} />
<Route exact path='/test14' component={Components} />

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

@ -26,7 +26,7 @@ export class Probes extends React.Component<any, any> {
"domain": {
"name": "asus"
},
"probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
"probeKey": "1AGBLKDFJ2452ASDGFL2KWJLKSDJ",
"description": "description1111111111",
},
{
@ -37,7 +37,7 @@ export class Probes extends React.Component<any, any> {
"domain": {
"name": "ottugi"
},
"probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
"probeKey": "2AGBLKDFJ2452ASDGFL2KWJLKSDJ",
"description": "description22222222",
},
{
@ -48,7 +48,7 @@ export class Probes extends React.Component<any, any> {
"domain": {
"name": "lg"
},
"probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
"probeKey": "3AGBLKDFJ2452ASDGFL2KWJLKSDJ",
"description": "description33333",
},
{
@ -59,7 +59,7 @@ export class Probes extends React.Component<any, any> {
"domain": {
"name": "apple"
},
"probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
"probeKey": "4AGBLKDFJ2452ASDGFL2KWJLKSDJ",
"description": "description4444",
},
];
@ -82,17 +82,9 @@ export class Probes extends React.Component<any, any> {
});
}
handleSearch(searchWord: string) {
let founds = new Array();
for (let probe of this.data) {
if (probe.domain.name.toLowerCase().indexOf(searchWord) !== -1
|| probe.description.toLowerCase().indexOf(searchWord) !== -1
|| probe.metaProbeStatus.name.toLowerCase().indexOf(searchWord) !== -1) {
founds.push(probe);
}
}
handleSearch(result: object[]) {
this.setState({
list: founds,
list: result,
});
}
@ -115,7 +107,7 @@ export class Probes extends React.Component<any, any> {
}
renderRows() {
if(this.state.list.length === 0) {
if (this.state.list.length === 0) {
return <Table.Row error >
<Table.Cell textAlign='center' colSpan='5'>No results found.</Table.Cell>
</Table.Row>;
@ -131,6 +123,7 @@ export class Probes extends React.Component<any, any> {
));
}
render() {
if (this.state.isDetail) {
return <ProbeDetails probe={this.state.selected} onBack={() => this.setState({ isDetail: false })} />;
@ -157,8 +150,9 @@ export class Probes extends React.Component<any, any> {
return (
<ListContainer
contents={probeList}
filter={<ProbeFilter data={this.data} onFilter={this.handleFilter.bind(this)} />}
data={this.data}
onSearch={this.handleSearch.bind(this)}
filter={<ProbeFilter onFilter={this.handleFilter.bind(this)} />}
/>
);
}

74
src/ts/containers/test/TableExampleSortable.tsx Normal file
View File

@ -0,0 +1,74 @@
import * as _ from 'lodash';
import * as React from 'react';
import { Table } from 'semantic-ui-react';
const tableData = [
{ name: 'John', age: 15, gender: 'Male' },
{ name: 'Amber', age: 40, gender: 'Female' },
{ name: 'Leslie', age: 25, gender: 'Female' },
{ name: 'Ben', age: 70, gender: 'Male' },
];
export class TableExampleSortable extends React.Component<any, any> {
constructor(props: any, context: any) {
super(props, context);
this.state = {
column: null,
data: tableData,
direction: null,
};
}
handleSort = (clickedColumn:any) => () => {
const { column, data, direction } = this.state
if (column !== clickedColumn) {
this.setState({
column: clickedColumn,
data: _.sortBy(data, [clickedColumn]),
direction: 'ascending',
});
return
}
this.setState({
data: data.reverse(),
direction: direction === 'ascending' ? 'descending' : 'ascending',
})
};
render() {
const { column, data, direction } = this.state;
return (
<Table sortable celled fixed>
<Table.Header>
<Table.Row>
<Table.HeaderCell sorted={column === 'name' ? direction : null} onClick={this.handleSort('name')}>
Name
</Table.HeaderCell>
<Table.HeaderCell sorted={column === 'age' ? direction : null} onClick={this.handleSort('age')}>
Age
</Table.HeaderCell>
<Table.HeaderCell sorted={column === 'gender' ? direction : null} onClick={this.handleSort('gender')}>
Gender
</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{_.map(data, ({ age, gender, name }) => (
<Table.Row key={name}>
<Table.Cell>{name}</Table.Cell>
<Table.Cell>{age}</Table.Cell>
<Table.Cell>{gender}</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table>
)
}
}

53
src/ts/containers/test/commons/ListContainer.tsx
View File

@ -1,26 +1,67 @@
import * as React from 'react';
import { Grid, Input, Form, Checkbox, Divider, Button } from 'semantic-ui-react';
import { Grid, Input, Form, Checkbox, Divider } from 'semantic-ui-react';
export class ListContainer extends React.Component<any, any> {
private data: any = null;
private found: boolean = false;
constructor(props: any, context: any) {
super(props, context);
this.state = {
};
}
handleSearch(e: any, data: any) {
this.props.onSearch(data.value.toLowerCase());
let searchWord = data.value;
let items: object[];
items = this.props.data;
let item: any;
let result = new Array();
for (item of items) {
this.search(item, searchWord);
if (this.found) {
result.push(item);
}
this.found = false;
}
this.props.onSearch(result);
}
handleSearchInput(e: any, data: any) {
this.setState({
searchWord: data.value,
});
}
search(item: any, searchWord: string) {
let key: any;
for (key in item) {
if (this.isString(item[key])) {
if (item[key].toLowerCase().indexOf(searchWord.toLowerCase()) !== -1) {
this.found = true;
}
} else {
this.search(item[key], searchWord);
}
}
}
isString(val: any): boolean {
if (typeof val === 'string') {
return true;
}
return false;
}
render() {
return (
<Grid>
<Grid.Column width={4}>
<Input icon='search' placeholder='Search...' onChange={this.handleSearch.bind(this)} fluid />
{/*filter */}
<Input icon='search' label={{ icon: 'asterisk' }}
labelPosition='left corner' placeholder='Search...' onChange={this.handleSearch.bind(this)} fluid/>
<Divider />
{this.props.filter}
</Grid.Column>

4
src/ts/containers/test/layout/Header.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react';
import { Container } from 'semantic-ui-react';
import { Container, Divider } from 'semantic-ui-react';
import { TopBar } from '../TopBar';
import { LogoBar } from './LogoBar';
import { TitleBar } from './TitleBar';
@ -16,7 +16,9 @@ export class Header extends React.Component<any, any> {
return (
<Container fluid>
<LogoBar />
<Divider />
<TitleBar />
<Divider />
</Container>
// <TopBar onSidebar={this.props.onSidebar}/>
);

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

@ -28,7 +28,7 @@ export class Layout extends React.Component<any, any> {
<Container fluid>
<Grid>
<Grid.Row>
<Grid.Column width='2'>
<Grid.Column width='2' style={{margin:'0px'}}>
<LeftMenu />
</Grid.Column>
<Grid.Column width='14'>

29
src/ts/containers/test/layout/LeftMenu.tsx
View File

@ -24,15 +24,17 @@ export class LeftMenu extends React.Component<any, any> {
<Segment inverted className='fullHeight'>
<Menu inverted secondary vertical fluid icon='labeled' >
<Menu.Item name='User' >
<Menu.Item name='User' href='/' >
<Icon name='user' />
</Menu.Item>
<Menu.Item name='Home' >
<Menu.Item name='Home' href='/' >
<Icon name='home' />
Home
</Menu.Item>
<Menu.Item name='Monitoring' >
<Menu.Item name='Monitoring' href='/' >
<Icon name='bar graph' />
Monitoring
{/*
<Dropdown text='Monitoring' pointing>
<Dropdown.Menu>
<Dropdown.Header>Monitoring</Dropdown.Header>
@ -40,43 +42,45 @@ export class LeftMenu extends React.Component<any, any> {
<Dropdown.Item>Sensors</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
*/}
</Menu.Item>
<Menu.Item name='Infrastructure' >
<Menu.Item name='Infrastructure' href='/' >
<Icon name='sitemap' />
Infrastructure
{/*
<Dropdown text='Infrastructure' >
<Dropdown.Menu>
<Dropdown.Header>Infrastructure</Dropdown.Header>
<Dropdown.Item>Maps</Dropdown.Item>
<Dropdown.Item>Targets</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
*/}
</Menu.Item>
<Menu.Item name='Dashboard' >
<Menu.Item name='Dashboard' href='/' >
<Icon name='industry' />
Dashboard
</Menu.Item>
<Menu.Item name='Metrics' >
<Menu.Item name='Metrics' href='/' >
<Icon name='tasks' />
Metrics
</Menu.Item>
<Menu.Item name='Alerts' >
<Menu.Item name='Alerts' href='/' >
<Icon name='alarm' />
Alerts
</Menu.Item>
<Menu.Item name='History' >
<Menu.Item name='History' href='/' >
<Icon name='book' />
History
</Menu.Item>
<Menu.Item>
<Menu.Item href='/'>
<Icon name='play circle' />
<Dropdown text='Custom'>
<Dropdown.Menu>
@ -88,10 +92,11 @@ export class LeftMenu extends React.Component<any, any> {
<Dropdown.Item href='#/test14'> Insanity </Dropdown.Item>
<Dropdown.Item href='#/test6'>DiscoveryDetails</Dropdown.Item>
<Dropdown.Item href='#/test7'>Tree</Dropdown.Item>
<Dropdown.Item href='#/test8'>TableExampleSortable</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Menu.Item>
<Menu.Item name='Settings' >
<Menu.Item name='Settings' href='/' >
<Icon name='setting' />
Settings
</Menu.Item>

8
src/ts/containers/test/layout/LogoBar.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react';
import { Menu, Header } from 'semantic-ui-react';
import { Menu, Header, Container } from 'semantic-ui-react';
export class LogoBar extends React.Component<any, any> {
@ -19,7 +19,7 @@ export class LogoBar extends React.Component<any, any> {
render() {
return (
<div>
<Container fluid>
<Menu borderless secondary >
<Menu.Item
name='logo'
@ -29,11 +29,11 @@ export class LogoBar extends React.Component<any, any> {
</Menu.Item>
<Menu.Item
position='right'
icon='bell outline'
icon='bell'
onClick={this.handleNotiClick}
/>
</Menu>
</div>
</Container>
);
}
}

19
src/ts/containers/test/layout/TitleBar.tsx
View File

@ -28,15 +28,16 @@ export class TitleBar extends React.Component<any, any> {
<Grid>
<Grid.Row>
<Grid.Column width='3'>
<Header as='h3'>Page Title<Header.Subheader>
<Breadcrumb>
<Breadcrumb.Section link>Home</Breadcrumb.Section>
<Breadcrumb.Divider />
<Breadcrumb.Section link>Monitoring</Breadcrumb.Section>
<Breadcrumb.Divider />
<Breadcrumb.Section active>Probes</Breadcrumb.Section>
</Breadcrumb>
</Header.Subheader>
<Header as='h3'>Page Title
<Header.Subheader>
<Breadcrumb size='tiny'>
<Breadcrumb.Section link>Home</Breadcrumb.Section>
<Breadcrumb.Divider />
<Breadcrumb.Section link>Monitoring</Breadcrumb.Section>
<Breadcrumb.Divider />
<Breadcrumb.Section active>Probes</Breadcrumb.Section>
</Breadcrumb>
</Header.Subheader>
</Header>
</Grid.Column>
<Grid.Column width='13'>