fixed tree
This commit is contained in:
parent
8d78d69e39
commit
da12a676ce
191
src/ts/@overflow/sensor/react/components/SensorItemTree.tsx
Normal file
191
src/ts/@overflow/sensor/react/components/SensorItemTree.tsx
Normal 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;
|
|
@ -21,7 +21,7 @@ export class SensorItems extends React.Component<Props, State> {
|
|||
}
|
||||
|
||||
public componentWillMount(): void {
|
||||
super.componentWillMount();
|
||||
console.log('');
|
||||
}
|
||||
|
||||
public render(): JSX.Element {
|
||||
|
|
Loading…
Reference in New Issue
Block a user