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

added leftmenu sensors

Browse Source
This commit is contained in:
snoop 2017-07-26 11:55:05 +09:00
parent 4497f31f99
commit c827892a86
2 changed files with 24 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/ts/@overflow/app/views/layout/LeftMenu.tsx
View File

@ -60,7 +60,7 @@ class LeftMenu extends React.Component<Props, State> {
<Menu.Item onClick={(e) => this.props.onChangeUrl('/probe_setup')} style={{ 'marginLeft': '30px' }}> <Menu.Item onClick={(e) => this.props.onChangeUrl('/probe_setup')} style={{ 'marginLeft': '30px' }}>
Probe Setup Probe Setup
</Menu.Item> </Menu.Item>
<Menu.Item href='#/' style={{ 'marginLeft': '30px' }}> <Menu.Item onClick={(e) => this.props.onChangeUrl('/sensors')} style={{ 'marginLeft': '30px' }}>
Sensors Sensors
</Menu.Item> </Menu.Item>
</Menu.Menu> </Menu.Menu>

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

@ -1,4 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import * as _ from 'lodash';
// import update from 'immutability-helper'; // import update from 'immutability-helper';
import { Checkbox, Container, Label, Accordion, Icon, List, ListItemProps } from 'semantic-ui-react'; import { Checkbox, Container, Label, Accordion, Icon, List, ListItemProps } from 'semantic-ui-react';
@ -24,7 +25,8 @@ export type SensorItemTreeProps = SensorItemTreeStateProps & SensorItemTreeDispa
export interface SensorItemTreeState { export interface SensorItemTreeState {
portState: Map<number, boolean>; categoryState: Map<number, boolean>;
itemState: Map<number, boolean[]>;
} }
interface TreeItem { interface TreeItem {
@ -42,7 +44,8 @@ export class SensorItemTree extends React.Component<SensorItemTreeProps, SensorI
this.itemMap = new Map; this.itemMap = new Map;
this.state = { this.state = {
portState: new Map(), categoryState: new Map(),
itemState: new Map(),
}; };
this.sortItemMap(); this.sortItemMap();
@ -72,17 +75,18 @@ export class SensorItemTree extends React.Component<SensorItemTreeProps, SensorI
// this.state.portState[key] = false; // this.state.portState[key] = false;
elems.push( elems.push(
<List.Item key={key} > <List.Item key={key} >
<List.Icon name={this.state.portState[key] ? 'chevron up' : 'chevron down'} onClick={() => { <List.Icon name={this.state.categoryState[key] ? 'chevron up' : 'chevron down'} onClick={() => {
let newPortState: Map<number, boolean> = new Map(this.state.portState); {/*let newPortState: Map<number, boolean> = new Map(this.state.portState);*/ }
newPortState[key] = true; let newCategoryState: Map<number, boolean> = _.cloneDeep(this.state.categoryState);
this.setState({ portState: newPortState }); newCategoryState[key] = !newCategoryState[key];
this.setState({ categoryState: newCategoryState });
}} /> }} />
<List.Content> <List.Content>
<List.Header> <Checkbox label={data.metaSensorItemType.name} /> </List.Header> <List.Header> <Checkbox label={data.metaSensorItemType.name} /> </List.Header>
<List.Description>Category</List.Description> <List.Description>Category</List.Description>
{this.state.portState[key] ? this.ViewSensorItem(data.metaSensorItemList) : ''} {this.state.categoryState[key] ? this.ViewSensorItem(data.metaSensorItemList, key) : ''}
</List.Content> </List.Content>
</List.Item>, </List.Item>,
); );
@ -91,15 +95,23 @@ export class SensorItemTree extends React.Component<SensorItemTreeProps, SensorI
return elems; return elems;
} }
public ViewSensorItem(metaSensorItemList: MetaSensorItem[]): JSX.Element[] { public ViewSensorItem(metaSensorItemList: MetaSensorItem[], parentKey: number): JSX.Element[] {
let elems: JSX.Element[] = new Array(); let elems: JSX.Element[] = new Array();
metaSensorItemList.map((item: MetaSensorItem, idx: number) => { metaSensorItemList.map((item: MetaSensorItem, idx: number) => {
let checkList: boolean[] = this.state.itemState[parentKey];
elems.push( elems.push(
<List.List key={idx * 1000}> <List.List key={String(parentKey) + String(idx)} onClick={() => {
<List.Item>
{/*let newPortState: Map<number, boolean> = new Map(this.state.portState);*/ }
let newItemState: Map<number, boolean[]> = _.cloneDeep(this.state.itemState[parentKey]);
newItemState[idx] = !newItemState[idx];
this.setState({ itemState: newItemState });
}}>
<List.Item >
<List.Icon name='file' /> <List.Icon name='file' />
<List.Content> <List.Content>
<List.Header> <Checkbox label={item.name} /></List.Header> <List.Header> <Checkbox label={item.name} checked={checkList[idx]} /></List.Header>
<List.Description>Sensor Item</List.Description> <List.Description>Sensor Item</List.Description>
</List.Content> </List.Content>
</List.Item> </List.Item>