overflow_backup_2018_0455/overflow_app
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-26 15:23:18 +09:00
commit f02e3e99e6
4 changed files with 179 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
src/ts/@overflow/meta/react/components/SensorItemTree.tsx
View File

@ -2,7 +2,16 @@ import * as React from 'react';
import * as _ from 'lodash';
// import update from 'immutability-helper';
import { Checkbox, Container, Label, Accordion, Icon, List, ListItemProps } from 'semantic-ui-react';
import {
Checkbox,
Container,
Label,
Accordion,
Icon,
List, Button,
ListItemProps,
CheckboxProps,
} from 'semantic-ui-react';
import MetaSensorItemType from '../../api/model/MetaSensorItemType';
@ -26,27 +35,29 @@ export type SensorItemTreeProps = SensorItemTreeStateProps & SensorItemTreeDispa
export interface SensorItemTreeState {
categoryState: Map<number, boolean>;
itemState: Map<number, boolean[]>;
itemState: Map<number, Array<boolean>>;
}
interface TreeItem {
metaSensorItemList: MetaSensorItem[];
metaSensorItemList: Array<MetaSensorItem>;
metaSensorItemType: MetaSensorItemType;
}
export class SensorItemTree extends React.Component<SensorItemTreeProps, SensorItemTreeState> {
private itemMap: Map<number, TreeItem>;
private selectedItemMap: Map<number, Array<MetaSensorItem>>;
constructor(props: any, context: any) {
super(props, context);
this.itemMap = new Map;
this.selectedItemMap = new Map,
this.state = {
categoryState: new Map(),
itemState: new Map(),
};
this.state = {
categoryState: new Map(),
itemState: new Map(),
};
this.sortItemMap();
// fs.readFile('../../../../../dh.json', this.handlJSONFile);
@ -64,27 +75,41 @@ export class SensorItemTree extends React.Component<SensorItemTreeProps, SensorI
item.metaSensorItemList = [];
item.metaSensorItemList.push(sensorItem);
item.metaSensorItemType = this.GetMetaSensorItemType(sensorItem.metaSensorItemType.id);
this.itemMap.set(sensorItem.id, item);
this.itemMap.set(sensorItem.metaSensorItemType.id, item);
}
});
}
public ViewSensorItemType(): JSX.Element[] {
let elems: JSX.Element[] = new Array();
this.itemMap.forEach((data: TreeItem, key: number) => {
// this.state.portState[key] = false;
// this.state.itemState[key] = new Array(data.metaSensorItemList.length).fill(false);
elems.push(
<List.Item key={key} >
<List.Item key={key + 1} >
<List.Icon name={this.state.categoryState[key] ? 'chevron up' : 'chevron down'} onClick={() => {
{/*let newPortState: Map<number, boolean> = new Map(this.state.portState);*/ }
let newCategoryState: Map<number, boolean> = _.cloneDeep(this.state.categoryState);
let newCategoryState: Map<number, boolean> = _.clone(this.state.categoryState);
newCategoryState[key] = !newCategoryState[key];
this.setState({ categoryState: newCategoryState });
}} />
<List.Content>
<List.Header> <Checkbox label={data.metaSensorItemType.name} /> </List.Header>
<List.Header> <Checkbox label={data.metaSensorItemType.name} onChange={
(event: React.FormEvent<HTMLInputElement>, checkProps: CheckboxProps) => {
let newItemState: Map<number, Array<boolean>> = _.clone(this.state.itemState);
if (newItemState[key] === undefined) {
newItemState[key] = new Array(data.metaSensorItemList.length).fill(false);
}
newItemState[key].fill(checkProps.checked);
if (checkProps.checked) {
this.selectedItemMap[key] = _.clone(data.metaSensorItemList);
} else {
this.selectedItemMap[key].length = 0;
}
this.setState({ itemState: newItemState });
}} /> </List.Header>
<List.Description>Category</List.Description>
{this.state.categoryState[key] ? this.ViewSensorItem(data.metaSensorItemList, key) : ''}
</List.Content>
@ -97,21 +122,38 @@ export class SensorItemTree extends React.Component<SensorItemTreeProps, SensorI
public ViewSensorItem(metaSensorItemList: MetaSensorItem[], parentKey: number): JSX.Element[] {
let elems: JSX.Element[] = new Array();
if (this.state.itemState[parentKey] === undefined) {
this.state.itemState[parentKey] = new Array(metaSensorItemList.length).fill(false);
}
metaSensorItemList.map((item: MetaSensorItem, idx: number) => {
let checkList: boolean[] = this.state.itemState[parentKey];
elems.push(
<List.List key={String(parentKey) + String(idx)} onClick={() => {
{/*let newPortState: Map<number, boolean> = new Map(this.state.portState);*/ }
let newItemState: Map<number, boolean[]> = _.cloneDeep(this.state.itemState[parentKey]);
newItemState[idx] = !newItemState[idx];
let newItemState: Map<number, Array<boolean>> = _.clone(this.state.itemState);
newItemState[parentKey][idx] = !newItemState[parentKey][idx];
this.setState({ itemState: newItemState });
}}>
<List.Item >
<List.Icon name='file' />
<List.Content>
<List.Header> <Checkbox label={item.name} checked={checkList[idx]} /></List.Header>
<List.Header> <Checkbox label={item.name} checked={this.state.itemState[parentKey][idx]} onChange={
(event: React.FormEvent<HTMLInputElement>, checkProps: CheckboxProps) => {
if(this.selectedItemMap[parentKey] === undefined) {
this.selectedItemMap[parentKey] = [];
}
if (checkProps.checked) {
this.selectedItemMap[parentKey].push(item);
} else {
let index: number = this.selectedItemMap[parentKey].indexOf(item);
if(index >= 0) {
this.selectedItemMap[parentKey].splice(index, 1);
}
}
}} /></List.Header>
<List.Description>Sensor Item</List.Description>
</List.Content>
</List.Item>
@ -128,6 +170,9 @@ export class SensorItemTree extends React.Component<SensorItemTreeProps, SensorI
<List selection>
{this.ViewSensorItemType()}
</List>
<Button label='test' onClick={() => {
console.log(this.selectedItemMap);
}} />
</Container>
);
}

124
src/ts/@overflow/probe/react/components/ProbeDown.tsx
View File

@ -4,8 +4,8 @@ import {
Menu,
Segment,
MenuItemProps,
Header,
Container,
Icon,
} from 'semantic-ui-react';
export interface StateProps {
@ -19,45 +19,84 @@ export interface DispatchProps {
export type Props = StateProps & DispatchProps;
export interface State {
activeItem: string[];
activeItem: string;
}
const osNames = ['Windows', 'Debian', 'Ubuntu', 'Fedora', 'CentOS'];
const osNames = [
{
'name': 'Windows',
'icon': 'windows',
},
{
'name': 'Ubuntu',
'icon': 'linux',
},
{
'name': 'Fedora',
'icon': 'linux',
},
{
'name': 'CentOS',
'icon': 'linux',
},
];
export class ProbeDown extends React.Component<any, any> {
constructor(props: Props, context: State) {
super(props, context);
this.state = { activeItem: osNames[0] };
this.state = {
activeItem: '',
};
}
public handleItemClick = (event: React.SyntheticEvent<HTMLAnchorElement>, data: MenuItemProps): void => {
this.setState({ activeItem: data.name });
}
console.log(data.name);
public ShowContent = (): JSX.Element => {
let os = this.state.activeItem;
if(os === '') {
return <div>Instruction page.</div>;
}
switch (os) {
case 'Windows': {
return <Windows />;
}
case 'Ubuntu': {
return <Ubuntu />;
}
case 'Fedora': {
return <Fedora />;
}
case 'CentOS': {
return <CentOS />;
}
default:
break;
}
return null;
}
public render(): JSX.Element {
const { activeItem } = this.state.activeItem;
return (
<Container fluid>
<Header as='h3' dividing>Probe Download</Header>
<Grid>
<Grid.Column width={4}>
<Menu fluid vertical tabular>
{osNames.map((os: string) => {
<Menu fluid vertical icon='labeled' pointing>
{osNames.map((item: any, index: number) => {
return (
<Menu.Item name={os} active={activeItem === os} onClick={this.handleItemClick} />
<Menu.Item key={index} name={item.name} active={this.state.activeItem === item.name} onClick={this.handleItemClick} >
<Icon name={item.icon} />
{item.name}
</Menu.Item>
);
})}
</Menu>
</Grid.Column>
<Grid.Column stretched width={12}>
<Segment vertical>
{this.state.activeItem} Download Page
<Segment>
{this.ShowContent()}
</Segment>
</Grid.Column>
</Grid>
@ -66,3 +105,58 @@ export class ProbeDown extends React.Component<any, any> {
}
}
export class Windows extends React.Component<any, any> {
constructor(props: Props, context: State) {
super(props, context);
}
public render(): JSX.Element {
return (
<div>
Windows Download Page
</div>
);
}
}
export class Ubuntu extends React.Component<any, any> {
constructor(props: Props, context: State) {
super(props, context);
}
public render(): JSX.Element {
return (
<Container fluid>
Ubuntu Download Page
</Container>
);
}
}
export class Fedora extends React.Component<any, any> {
constructor(props: Props, context: State) {
super(props, context);
}
public render(): JSX.Element {
return (
<Container fluid>
Fedora Download Page
</Container>
);
}
}
export class CentOS extends React.Component<any, any> {
constructor(props: Props, context: State) {
super(props, context);
}
public render(): JSX.Element {
return (
<Container fluid>
CentOS Download Page
</Container>
);
}
}

6
src/ts/@overflow/sensor/react/SensorList.tsx
View File

@ -1,4 +1,6 @@
import { connect, Dispatch } from 'react-redux';
import { push as routerPush } from 'react-router-redux';
import {
SensorList,
StateProps as SensorListStateProps,
@ -6,6 +8,7 @@ import {
} from './components/SensorList';
import State from '../redux/state/ReadAllByTarget';
import * as ReadAllByTargetActions from '../redux/action/read_all_by_target';
import * as ReadAllByProbeActions from '../redux/action/read_all_by_probe';
import * as ReadAllByDomainActions from '../redux/action/read_all_by_domain';
@ -30,6 +33,9 @@ export function mapDispatchToProps(dispatch: Dispatch<any>): SensorListDispatchP
onReadAllByDomain: (domain: Domain) => {
dispatch(ReadAllByDomainActions.request(domain));
},
onSensorSelect: (id: number) => {
dispatch(routerPush('/sensor/' + String(id)));
},
};
}

10
src/ts/@overflow/sensor/react/components/SensorList.tsx
View File

@ -16,12 +16,12 @@ export interface DispatchProps {
onReadAllByTarget?(target: Target): void;
onReadAllByProbe?(probe: Probe): void;
onReadAllByDomain?(domain: Domain): void;
onSensorSelect?(id: number): void;
}
export type SensorListProps = StateProps & DispatchProps;
export interface SensorListState {
isDetail: boolean;
selected: Sensor;
}
@ -34,7 +34,6 @@ export class SensorList extends React.Component<SensorListProps, SensorListState
super(props, context);
this.state = {
selected: null,
isDetail: false, // temp
};
}
@ -92,8 +91,9 @@ export class SensorList extends React.Component<SensorListProps, SensorListState
public handleSelect(selectedSensor: Sensor): void {
this.setState({
selected: selectedSensor,
isDetail: true,
});
this.props.onSensorSelect(selectedSensor.id);
}
public checkCellStatus(status: any): boolean {
@ -119,10 +119,6 @@ export class SensorList extends React.Component<SensorListProps, SensorListState
}
public render(): JSX.Element {
if (this.state.isDetail) {
// return (<SensorDetailContainer sensor={this.state.selected} />);
return (<SensorDetailContainer />);
}
return (
<Container fluid>
<Header as='h3' dividing>Sensors</Header>