fixed tree

This commit is contained in:
snoop 2017-07-24 15:38:27 +09:00
parent 8d78d69e39
commit da12a676ce
2 changed files with 192 additions and 1 deletions

View File

@ -0,0 +1,191 @@
import * as React from 'react';
// import update from 'immutability-helper';
import { Checkbox, Container, Label, Accordion, Icon, List, ListItemProps } from 'semantic-ui-react';
import MetaSensorItemType from '@overflow/meta/api/model/MetaSensorItemType';
import MetaSensorItem from '@overflow/meta/api/model/MetaSensorItem';
import * as Utils from '@overflow/commons/utils/Utils';
export interface SensorItemTreeStateProps {
}
export interface SensorItemTreeDispatchProps {
}
export type SensorItemTreeProps = SensorItemTreeStateProps & SensorItemTreeDispatchProps;
export interface SensorItemTreeState {
portState: { [key: number]: boolean };
}
interface TreeItem {
metaSensorItemList: MetaSensorItem[];
metaSensorItemType: MetaSensorItemType;
}
export class SensorItemTree extends React.Component<SensorItemTreeProps, SensorItemTreeState> {
private itemMap: Map<number, TreeItem>;
constructor(props: any, context: any) {
super(props, context);
this.itemMap = new Map;
this.state = {
portState: {},
};
// fs.readFile('../../../../../dh.json', this.handlJSONFile);
}
public componentWillMount(): void {
SensorJsonData.map((data: any, idx: number) => {
let sensorItem: MetaSensorItem = data;
if (this.itemMap.has(sensorItem.metaSensorItemType.id)) {
this.itemMap.get(sensorItem.metaSensorItemType.id).metaSensorItemList.push(sensorItem);
} else {
let item: TreeItem = {metaSensorItemList:null, metaSensorItemType:null};
item.metaSensorItemList = [];
item.metaSensorItemList.push(sensorItem);
item.metaSensorItemType = this.GetMetaSensorItemType(sensorItem.metaSensorItemType.id);
this.itemMap.set(sensorItem.id, item);
}
});
}
public render(): JSX.Element {
return (
<Container>
<List selection>
{}
{
this.itemMap.forEach((data: TreeItem, key: number) => {
{/*let data: TreeItem = this.itemMap[key];*/}
return (
<List.Item key={key} >
<List.Icon name='folder' onClick={() => {
{/*const newPortState = update.newContext()(this.state.portState, {
[hh.ip]: !this.state.portState[hh.ip]
});*/}
{/*this.setState({ portState: newPortState });*/ }
}} />
<List.Content>
{/*{data.metaSensorItemType.name}*/}
<List.Header> <Checkbox label='aaaa' /> </List.Header>
<List.Description>Category</List.Description>
{true ?
data.metaSensorItemList ? data.metaSensorItemList.map((item: MetaSensorItem, idx: number) => {
return (
<List.List key={idx * 1000}>
<List.Item>
<List.Icon name='folder' />
<List.Content>
<List.Header> <Checkbox label={item.name} /></List.Header>
<List.Description>Sensor Item</List.Description>
</List.Content>
</List.Item>
</List.List>
);
}) : '' : ''}
</List.Content>
</List.Item>
);
})}
</List>
</Container>
);
}
private GetMetaSensorItemType(id: number): MetaSensorItemType {
SensorTypeJsonData.map((data: any, idx: number) => {
let msit: MetaSensorItemType = data;
if (msit.id === id) {
return msit;
}
return null;
});
return null;
}
}
const SensorTypeJsonData = [
{
'id': 1,
'create_date': '2017-06-26T10:49:39Z',
'description': 'CPU blah blah blah',
'name': 'CPU',
},
{
'id': 2,
'create_date': '2017-06-26T10:49:39Z',
'description': 'MEMORY blah blah blah',
'name': 'MEMORY',
},
{
'id': 3,
'create_date': '2017-06-26T10:49:39Z',
'description': 'DISK blah blah blah',
'name': 'DISK',
},
];
const SensorJsonData = [
{
'id': 1,
'create_date': '2017-06-26T11:10:08Z',
'key': 'cpu.usage',
'name': 'CPU USAGE',
'metaSensorItemType': {
'id': 1,
},
},
{
'id': 2,
'create_date': '2017-06-26T11:10:08Z',
'key': 'cpu.free',
'name': 'CPU FREE',
'metaSensorItemType': {
'id': 1,
},
},
{
'id': 3,
'create_date': '2017-06-26T11:10:08Z',
'key': 'mem.usage',
'name': 'MEMORY USAGE',
'metaSensorItemType': {
'id': 2,
},
},
{
'id': 4,
'create_date': '2017-06-26T11:10:08Z',
'key': 'mem.free',
'name': 'MEMORY FREE',
'metaSensorItemType': {
'id': 2,
},
},
];
export default SensorItemTree;

View File

@ -21,7 +21,7 @@ export class SensorItems extends React.Component<Props, State> {
}
public componentWillMount(): void {
super.componentWillMount();
console.log('');
}
public render(): JSX.Element {