sensor item tree

package.json

@@ -29,7 +29,7 @@
     "@ngrx/router-store": "^5.2.0",
     "@ngrx/store": "^5.2.0",
     "@ngrx/store-devtools": "^5.2.0",
-    "angular-tree-component": "^7.0.1",
+    "angular-tree-component": "^7.0.2",
     "angularx-qrcode": "^1.0.1",
     "angular-l10n": "^4.1.5",
     "core-js": "^2.5.3",

src/packages/meta/sensor-display-item/sensor-display-item-store.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { StoreModule } from '@ngrx/store';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import {
+  StoreRouterConnectingModule,
+  RouterStateSerializer,
+} from '@ngrx/router-store';
+import { EffectsModule } from '@ngrx/effects';
+import { combineReducers, ActionReducer, ActionReducerMap, MetaReducer } from '@ngrx/store';
+
+import {
+  REDUCERS,
+  EFFECTS,
+} from './store';
+
+import { MODULE } from './sensor-display-item.constant';
+
+@NgModule({
+  imports: [
+    StoreModule.forFeature(MODULE.name, REDUCERS),
+    EffectsModule.forFeature(EFFECTS),
+  ],
+})
+export class MetaSensorDisplayItemStoreModule { }

src/packages/meta/sensor-display-item/sensor-display-item.constant.ts

@@ -0,0 +1,3 @@
+export const MODULE = {
+  name: 'metaSensorDisplayItem'
+};

src/packages/meta/sensor-display-item/sensor-display-item.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import {  } from './crawler.module';
+
+import { MaterialModule } from 'packages/commons/material/material.module';
+import { SERVICES } from './service';
+import { MetaSensorDisplayItemStoreModule } from './sensor-display-item-store.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MetaSensorDisplayItemStoreModule
+  ],
+  declarations: [
+  ],
+  exports: [
+  ],
+  providers: [
+    SERVICES,
+  ]
+})
+export class MetaSensorDisplayItemModule { }

src/packages/meta/sensor-display-item/service/index.ts

@@ -0,0 +1,5 @@
+import { MetaSensorDisplayItemService } from './sensor-display-item.service';
+
+export const SERVICES = [
+    MetaSensorDisplayItemService,
+];

src/packages/meta/sensor-display-item/service/sensor-display-item.service.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+
+import 'rxjs/add/operator/map';
+
+import { RPCClient } from 'packages/core/rpc/client/RPCClient';
+import { MetaCrawler } from 'packages/meta/crawler/model/MetaCrawler';
+import { MetaSensorDisplayItem } from 'packages/meta/sensor-display-item/model/MetaSensorDisplayItem';
+
+
+@Injectable()
+export class MetaSensorDisplayItemService {
+
+  public constructor(
+    private rpcClient: RPCClient,
+  ) {
+
+  }
+
+  public readAllByMetaCrawler(c: MetaCrawler): Observable<MetaSensorDisplayItem[]> {
+    return this.rpcClient.call('MetaSensorDisplayItemService.readAllByCrawler', c);
+  }
+}

src/packages/meta/sensor-display-item/store/index.ts

@@ -0,0 +1,30 @@
+import {
+    createSelector,
+    createFeatureSelector,
+    ActionReducerMap,
+} from '@ngrx/store';
+
+import { StateSelector } from 'packages/core/ngrx/store';
+
+
+import * as ListStore from './list';
+import { MODULE } from '../sensor-display-item.constant';
+
+export interface State {
+    list: ListStore.State;
+}
+
+export const REDUCERS = {
+    list: ListStore.reducer,
+};
+
+export const EFFECTS = [
+    ListStore.Effects,
+];
+
+export const selectState = createFeatureSelector<State>(MODULE.name);
+
+export const ReadAllSensorDisplayItemByCrawlerSelector = new StateSelector<ListStore.State>(createSelector(
+    selectState,
+    (state: State) => state.list
+));

src/packages/meta/sensor-display-item/store/list/index.ts

@@ -0,0 +1,4 @@
+export * from './list.action';
+export * from './list.effect';
+export * from './list.reducer';
+export * from './list.state';

src/packages/meta/sensor-display-item/store/list/list.action.ts

@@ -0,0 +1,37 @@
+import { Action } from '@ngrx/store';
+
+import { RPCError } from 'packages/core/rpc/error';
+import { MetaCrawler } from '../../../crawler/model/MetaCrawler';
+import { MetaSensorDisplayItem } from '../../model/MetaSensorDisplayItem';
+
+
+export enum ActionType {
+  ReadAllByCrawler = '[meta.sensor-display-item] ReadAllByCrawler',
+  ReadAllByCrawlerSuccess = '[meta.sensor-display-item] ReadAllByCrawlerSuccess',
+  ReadAllByCrawlerFailure = '[meta.sensor-display-item] ReadAllByCrawlerFailure',
+}
+
+export class ReadAllByCrawler implements Action {
+  readonly type = ActionType.ReadAllByCrawler;
+
+  constructor(public payload: MetaCrawler) {}
+}
+
+export class ReadAllByCrawlerSuccess implements Action {
+  readonly type = ActionType.ReadAllByCrawlerSuccess;
+
+  constructor(public payload: MetaSensorDisplayItem[]) {}
+}
+
+export class ReadAllByCrawlerFailure implements Action {
+  readonly type = ActionType.ReadAllByCrawlerFailure;
+
+  constructor(public payload: RPCError) {}
+}
+
+export type Actions =
+  | ReadAllByCrawler
+  | ReadAllByCrawlerSuccess
+  | ReadAllByCrawlerFailure
+
+;

src/packages/meta/sensor-display-item/store/list/list.effect.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { Effects } from './list.effect';
+
+describe('List.Effects', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [Effects]
+    });
+  });
+
+  it('should be created', inject([Effects], (effects: Effects) => {
+    expect(effects).toBeTruthy();
+  }));
+});

src/packages/meta/sensor-display-item/store/list/list.effect.ts

@@ -0,0 +1,52 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Effect, Actions, ofType } from '@ngrx/effects';
+import { Action } from '@ngrx/store';
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/exhaustMap';
+import 'rxjs/add/operator/switchMap';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/take';
+
+import { RPCError } from 'packages/core/rpc/error';
+
+import { DomainMember } from 'packages/domain/model';
+
+
+import {
+  ReadAllByCrawler,
+  ReadAllByCrawlerSuccess,
+  ReadAllByCrawlerFailure,
+  ActionType,
+} from './list.action';
+import { MetaSensorDisplayItem } from '../../model/MetaSensorDisplayItem';
+import { MetaSensorDisplayItemService } from '../../service/sensor-display-item.service';
+
+@Injectable()
+export class Effects {
+
+  constructor(
+    private actions$: Actions,
+    private service: MetaSensorDisplayItemService,
+    private router: Router
+  ) { }
+
+  @Effect()
+  readAllByCrawler$: Observable<Action> = this.actions$
+    .ofType(ActionType.ReadAllByCrawler)
+    .map((action: ReadAllByCrawler) => action.payload)
+    .switchMap(payload => this.service.readAllByMetaCrawler(payload))
+    .map(list => {
+      return new ReadAllByCrawlerSuccess(list);
+    })
+    .catch((error: RPCError) => {
+      return of(new ReadAllByCrawlerFailure(error));
+    });
+
+}

src/packages/meta/sensor-display-item/store/list/list.reducer.ts

@@ -0,0 +1,43 @@
+import {
+  Actions,
+  ActionType,
+} from './list.action';
+
+import {
+  State,
+  initialState,
+} from './list.state';
+
+export function reducer(state = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.ReadAllByCrawler: {
+      return {
+        ...state,
+        error: null,
+        pending: true,
+      };
+    }
+
+    case ActionType.ReadAllByCrawlerSuccess: {
+      return {
+        ...state,
+        error: null,
+        pending: false,
+        list: action.payload
+      };
+    }
+
+    case ActionType.ReadAllByCrawlerFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        pending: false,
+        list: null,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}

src/packages/meta/sensor-display-item/store/list/list.state.ts

@@ -0,0 +1,15 @@
+import { RPCError } from 'packages/core/rpc/error';
+import { MetaSensorDisplayItem } from '../../model/MetaSensorDisplayItem';
+
+
+export interface State {
+  error: RPCError | null;
+  pending: boolean;
+  list: MetaSensorDisplayItem[] | null;
+}
+
+export const initialState: State = {
+  error: null,
+  pending: false,
+  list: null,
+};

src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.ts

@@ -29,8 +29,11 @@ export class CrawlerAuthComponent implements OnInit, OnChanges {
     this.inputItems$.subscribe(
       (list: MetaCrawlerInputItem[]) => {
         if (list !== null) {
-          this.inputItems = list;
+          console.log('###Auth Inputs###');
           console.log(list);
+          console.log('###################');
+          this.inputItems = list;
+          this.generateAuthComponent();
         }
       },
       (error: RPCError) => {
@@ -49,5 +52,7 @@ export class CrawlerAuthComponent implements OnInit, OnChanges {
   }
 
   generateAuthComponent() {
+    this.inputItems.map(function(v, i) {
+    });
   }
 }

src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.html

@@ -8,17 +8,17 @@
     <mat-card-content>
       <perfect-scrollbar style="height: 150px">
 
-        <tree-root id="tree2" [focused]="true" [nodes]="nodes">
+        <tree-root #tree [focused]="true" [nodes]="nodes" (updateData)="onTreeDataLoad($event)">
           <ng-template #treeNodeFullTemplate let-node let-index="index" let-templates="templates">
             <div class="tree-node">
-              <mat-checkbox [checked]="node.isActive" (change)="checkDiscoveryResult(node)"></mat-checkbox>
+              <tree-node-expander [node]="node" ></tree-node-expander>
-              <tree-node-expander [node]="node"></tree-node-expander>
+              <mat-checkbox [checked]="node.data.default" (change)="checkItem(node)"></mat-checkbox>
               <div
                 class="node-content-wrapper"
                 [class.node-content-wrapper-active]="node.isActive"
                 [class.node-content-wrapper-focused]="node.isFocused"
-                (click)="checkDiscoveryResult(node)">
+                (click)="checkItem(node)">
-                <span [class]="node.data.className" [class.title]="true">{{ node.data.title }}</span>
+                <span [class]="node.data.className" [class.title]="true">{{ node.data.title }} {{node.data.key}}</span>
 
               </div>
               <tree-node-children [node]="node" [templates]="templates"></tree-node-children>

src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.ts

@@ -1,127 +1,110 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnChanges, Input, Output, EventEmitter, ViewChild, AfterViewInit } from '@angular/core';
 import { Router } from '@angular/router';
+import { Store, select } from '@ngrx/store';
+import { RPCError } from 'packages/core/rpc/error';
 
+import * as ListStore from 'packages/meta/sensor-display-item/store/list';
+import { ReadAllSensorDisplayItemByCrawlerSelector } from 'packages/meta/sensor-display-item/store';
+import { MetaSensorDisplayItem } from 'packages/meta/sensor-display-item/model/MetaSensorDisplayItem';
+import { MetaCrawler } from '../../../../meta/crawler/model/MetaCrawler';
+import { ITreeOptions } from 'angular-tree-component';
 
 @Component({
   selector: 'of-sensor-item-selector',
   templateUrl: './sensor-item-selector.component.html',
   styleUrls: ['./sensor-item-selector.component.scss']
 })
-export class SensorItemSelectorComponent implements OnInit {
+export class SensorItemSelectorComponent implements OnInit, AfterViewInit, OnChanges {
 
-  nodes = [
+  @Input() selectedCrawler: MetaCrawler;
-    {
+  @Output() selectedItems = new EventEmitter<MetaSensorDisplayItem[]>();
-      title: 'host - 3232235781',
+  items$ = this.listStore.pipe(select(ReadAllSensorDisplayItemByCrawlerSelector.select('list')));
-      className: 'className3232235781',
+  sensorDisplayItems: MetaSensorDisplayItem[];
-      children: [
+  @ViewChild('tree') tree;
-        {
+  nodes;
-          title: 'Port - 22',
-          className: 'className22',
-          children: [
-            {
-              title: 'SSH',
-              className: 'classNameSSH'
-            }
-          ]
-        },
-        {
-          title: 'Port - 80',
-          className: 'className80',
-          children: [
-            {
-              title: 'HTTP',
-              className: 'classNameHTTP'
-            }
-          ]
-        },
-        {
-          title: 'Port - 1936',
-          className: 'className1936',
-          children: [
-            {
-              title: 'HTTP',
-              className: 'classNameHTTP'
-            }
-          ]
-        }
-      ]
-    },
-    {
-      title: 'host - 3232235781',
-      className: 'className3232235781',
-      children: [
-        {
-          title: 'Port - 22',
-          className: 'className22',
-          children: [
-            {
-              title: 'SSH',
-              className: 'classNameSSH'
-            }
-          ]
-        },
-        {
-          title: 'Port - 80',
-          className: 'className80',
-          children: [
-            {
-              title: 'HTTP',
-              className: 'classNameHTTP'
-            }
-          ]
-        },
-        {
-          title: 'Port - 1936',
-          className: 'className1936',
-          children: [
-            {
-              title: 'HTTP',
-              className: 'classNameHTTP'
-            }
-          ]
-        }
-      ]
-    },
-    {
-      title: 'host - 3232235781',
-      className: 'className3232235781',
-      children: [
-        {
-          title: 'Port - 22',
-          className: 'className22',
-          children: [
-            {
-              title: 'SSH',
-              className: 'classNameSSH'
-            }
-          ]
-        },
-        {
-          title: 'Port - 80',
-          className: 'className80',
-          children: [
-            {
-              title: 'HTTP',
-              className: 'classNameHTTP'
-            }
-          ]
-        },
-        {
-          title: 'Port - 1936',
-          className: 'className1936',
-          children: [
-            {
-              title: 'HTTP',
-              className: 'classNameHTTP'
-            }
-          ]
-        }
-      ]
-    }
-  ];
 
-  constructor(private router: Router) { }
+  constructor(
+    private router: Router,
+    private listStore: Store<ListStore.State>,
+  ) { }
 
   ngOnInit() {
+    this.items$.subscribe(
+      (list: MetaSensorDisplayItem[]) => {
+        if (list !== null) {
+          console.log('###Display Items###');
+          console.log(list);
+          console.log('###################');
+          this.sensorDisplayItems = list;
+          this.generateTreeNode(list);
+        }
+      },
+      (error: RPCError) => {
+        console.log(error.response.message);
+      }
+    );
+  }
+
+  ngAfterViewInit() {
+  }
+
+  ngOnChanges() {
+    this.listStore.dispatch(new ListStore.ReadAllByCrawler(this.selectedCrawler));
+  }
+
+  generateTreeNode(list: MetaSensorDisplayItem[]) {
+    this.nodes = new Array();
+    for (const item of list) {
+      const categoryNode = this.existCategory(item);
+      if (categoryNode === null) {
+        const childrenNode = new Array();
+        childrenNode.push(this.getChildNode(item));
+        const node = {
+          title: item.itemType.name,
+          children: childrenNode,
+          isExpanded: true
+        };
+        this.nodes.push(node);
+      } else {
+        categoryNode.children.push(this.getChildNode(item));
+      }
+    }
+  }
+
+  getChildNode(item) {
+    const childNode = {
+      title: item.displayName,
+      key: ' - ' + item.key,
+      default: item.default
+    };
+    return childNode;
+  }
+
+  existCategory(item: MetaSensorDisplayItem) {
+    let categoryNode = null;
+    for (const node of this.nodes) {
+      if (node.title === item.itemType.name) {
+        categoryNode = node;
+      }
+    }
+    return categoryNode;
+  }
+
+  checkItem(node) {
+    node.toggleActivated(true);
+    console.log(node);
+    // if (node.isActive) {
+    //   if (this.checkedSet.has(node.data) === false) {
+    //     this.checkedSet.add(node.data);
+    //   }
+    // } else {
+    //   if (this.checkedSet.has(node.data)) {
+    //     this.checkedSet.delete(node.data);
+    //   }
+    // }
+  }
+
+  onTreeDataLoad(tree) {
+    tree.treeModel.expandAll();
   }
 }

src/packages/sensor/component/setting/setting.component.html

@@ -11,7 +11,7 @@
       </mat-grid-tile>
 
       <mat-grid-tile [colspan]="1" [rowspan]="3" style="background-color: lightgrey">
-        <of-sensor-item-selector></of-sensor-item-selector>
+        <of-sensor-item-selector [selectedCrawler]="selectedCrawler" (itemSelectEvent)="handleItemSelection($event)"></of-sensor-item-selector>
       </mat-grid-tile>
 
       <mat-grid-tile [colspan]="1" [rowspan]="2" style="background-color: lightpink">

src/packages/sensor/sensor.module.ts

@@ -12,6 +12,7 @@ import { TreeModule } from 'angular-tree-component';
 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 import { MetaCrawlerModule } from '../meta/crawler/crawler.module';
 import { MetaCrawlerInputItemModule } from '../meta/crawler-input-item/crawler-input.module';
+import { MetaSensorDisplayItemModule } from '../meta/sensor-display-item/sensor-display-item.module';
 
 @NgModule({
   imports: [
@@ -22,7 +23,8 @@ import { MetaCrawlerInputItemModule } from '../meta/crawler-input-item/crawler-i
     TreeModule,
     PerfectScrollbarModule,
     MetaCrawlerModule,
-    MetaCrawlerInputItemModule
+    MetaCrawlerInputItemModule,
+    MetaSensorDisplayItemModule
   ],
   declarations: [
     COMPONENTS,

yarn.lock

@@ -559,13 +559,13 @@ angular-l10n@^4.1.5:
   dependencies:
     tslib "^1.7.1"
 
-angular-tree-component@^7.0.1:
+angular-tree-component@^7.0.2:
-  version "7.0.1"
+  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/angular-tree-component/-/angular-tree-component-7.0.1.tgz#fc8d0e72d8c34b87131a3ba2bd32ad20945689ac"
+  resolved "https://registry.yarnpkg.com/angular-tree-component/-/angular-tree-component-7.0.2.tgz#a70c2ed62b0bf5f14d20ada1e68fbc3649bdf783"
   dependencies:
-    lodash "4.17.4"
+    lodash "^4.17.4"
-    mobx ">=3"
+    mobx "^3.6.2"
-    mobx-angular ">=1"
+    mobx-angular "^2.1.1"
 
 angularx-qrcode@^1.0.1:
   version "1.0.1"
@@ -1425,12 +1425,6 @@ chownr@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.0.1.tgz#e2a75042a9551908bebd25b8523d5f9769d79181"
 
-cidr-range@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/cidr-range/-/cidr-range-1.0.6.tgz#8ce6a648dca7eceb34e82013c22479f843f1c452"
-  dependencies:
-    ip "^1.1.3"
-
 cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.4.tgz#8760e4ecc272f4c363532f926d874aae2c1397de"
@@ -3530,7 +3524,7 @@ ip@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/ip/-/ip-1.0.1.tgz#c7e356cdea225ae71b36d70f2e71a92ba4e42590"
 
-ip@^1.1.0, ip@^1.1.2, ip@^1.1.3, ip@^1.1.5:
+ip@^1.1.0, ip@^1.1.2, ip@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
 
@@ -4292,7 +4286,7 @@ lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
-lodash@4.17.4, lodash@^4.0.0, lodash@^4.11.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.3.0, lodash@^4.5.0, lodash@~4.17.4:
+lodash@^4.0.0, lodash@^4.11.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.3.0, lodash@^4.5.0, lodash@~4.17.4:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
@@ -4595,13 +4589,13 @@ mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkd
   dependencies:
     minimist "0.0.8"
 
-mobx-angular@>=1:
+mobx-angular@^2.1.1:
-  version "3.0.1"
+  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/mobx-angular/-/mobx-angular-3.0.1.tgz#881379acea563c0767550d1f7801ab3434449bb1"
+  resolved "https://registry.yarnpkg.com/mobx-angular/-/mobx-angular-2.2.0.tgz#f9612160eb585ef3343dfdb476185dbb7b49e1ef"
 
-mobx@>=3:
+mobx@^3.6.2:
-  version "4.0.1"
+  version "3.6.2"
-  resolved "https://registry.yarnpkg.com/mobx/-/mobx-4.0.1.tgz#321945580f7d3bf7b1f60ddaa1d623835683b5a2"
+  resolved "https://registry.yarnpkg.com/mobx/-/mobx-3.6.2.tgz#fb9f5ff5090539a1ad54e75dc4c098b602693320"
 
 module-deps@^4.0.8:
   version "4.1.1"