Merge branch 'master' of https://git.loafle.net/overflow/overflow-webapp

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/commons/logger/core/config.ts

@@ -0,0 +1,6 @@
+import { LoggerLevel } from './type';
+
+export class LoggerConfig {
+  level: LoggerLevel;
+  serverLogLevel: LoggerLevel;
+}

src/commons/logger/core/index.ts

@@ -0,0 +1,3 @@
+export * from './config';
+export * from './token';
+export * from './type';

src/commons/logger/core/token.ts

@@ -0,0 +1,4 @@
+import { Inject, Injectable, InjectionToken } from '@angular/core';
+import { LoggerLevel } from './type';
+
+export const LOGGER_LEVEL = new InjectionToken<LoggerLevel>('LoggerLevel');

src/commons/logger/core/type.ts

@@ -0,0 +1,26 @@
+export enum LoggerLevel {
+  TRACE = 0,
+  DEBUG,
+  INFO,
+  LOG,
+  WARN,
+  ERROR,
+  OFF,
+}
+
+export const LoggerLevelName = [
+  'TRACE',
+  'DEBUG',
+  'INFO',
+  'LOG',
+  'WARN',
+  'ERROR',
+  'OFF'
+];
+
+export interface ServerLoggingParameter {
+  level: string;
+  message: string;
+  addtional?: string;
+  timestamp: Date;
+}

src/commons/logger/logger.module.ts

@@ -0,0 +1,39 @@
+import {
+  NgModule,
+  ModuleWithProviders,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+
+
+
+
+
+@NgModule({
+})
+export class LoggerRootModule { }
+
+@NgModule({
+})
+export class LoggerFeatureModule { }
+
+@NgModule({
+})
+export class LoggerModule {
+  static forRoot(reducers: any): ModuleWithProviders {
+    return {
+      ngModule: LoggerRootModule,
+      providers: [
+      ],
+    };
+  }
+
+  static forFeature(featureName: string, reducers?: any): ModuleWithProviders {
+    return {
+      ngModule: LoggerFeatureModule,
+      providers: [
+      ],
+    };
+  }
+}

src/commons/logger/service/logger.service.ts

@@ -0,0 +1,93 @@
+import {
+  LoggerConfig,
+  LoggerLevel,
+} from '../core';
+
+
+export abstract class LoggerService {
+
+  public constructor(
+    private readonly config: LoggerConfig
+  ) {
+
+  }
+
+  public trace(message, ...additional: any[]): void {
+    this._log(LoggerLevel.TRACE, message, additional);
+  }
+
+  public debug(message, ...additional: any[]): void {
+    this._log(LoggerLevel.DEBUG, message, additional);
+  }
+
+  public info(message, ...additional: any[]): void {
+    this._log(LoggerLevel.INFO, message, additional);
+  }
+
+  public log(message, ...additional: any[]): void {
+    this._log(LoggerLevel.LOG, message, additional);
+  }
+
+  public warn(message, ...additional: any[]): void {
+    this._log(LoggerLevel.WARN, message, additional);
+  }
+
+  public error(message, ...additional: any[]): void {
+    this._log(LoggerLevel.ERROR, message, additional);
+  }
+
+  private _timestamp(): string {
+    return new Date().toISOString();
+  }
+
+  private _log(level: LoggerLevel, logOnServer: boolean, message, additional: any[] = []): void {
+    if (!message) {
+      return;
+    }
+
+    // Allow logging on server even if client log level is off
+    // if (logOnServer) {
+    //   this._logOnServer(level, message, additional);
+    // }
+
+    // if no message or the log level is less than the environ
+    if (level < this.config.level) {
+      return;
+    }
+
+    try {
+      message = typeof message === 'string' ? message
+        : JSON.stringify(message, null, 2);
+    } catch (e) {
+      additional = [message, ...additional];
+      message = 'The provided "message" value could not be parsed with JSON.stringify().';
+    }
+
+    // Coloring doesn't work in IE
+    // if (this._isIE) {
+    //   return this._logIE(level, message, additional);
+    // }
+
+    // const color = this._getColor(level);
+
+    // console.log(`%c${this._timestamp()} [${Levels[level]}]`, `color:${color}`, message, ...additional);
+  }
+
+  private _getColor(level: LoggerLevel): 'blue' | 'teal' | 'gray' | 'red' | undefined {
+    switch (level) {
+      case LoggerLevel.TRACE:
+        return 'blue';
+      case LoggerLevel.DEBUG:
+        return 'teal';
+      case LoggerLevel.INFO:
+      case LoggerLevel.LOG:
+        return 'gray';
+      case LoggerLevel.WARN:
+      case LoggerLevel.ERROR:
+        return 'red';
+      case LoggerLevel.OFF:
+      default:
+        return;
+    }
+  }
+}

src/commons/logger/store/logger.action.ts

@@ -0,0 +1,20 @@
+import { Action } from '@ngrx/store';
+
+import {
+  LoggerLevel,
+  ServerLoggingParameter,
+} from '../core';
+
+export enum ActionType {
+  ServerLogging = '[@@LOGGER] ServerLogging',
+}
+
+export class ServerLogging implements Action {
+  readonly type = ActionType.ServerLogging;
+
+  constructor(public payload: ServerLoggingParameter) {}
+}
+
+export type Actions =
+  | ServerLogging
+;

src/packages/core/rpc/protocol/json/RPCClientJSONCodec.ts

@@ -10,13 +10,13 @@ import {
 
 export interface ClientNotification {
   method: string;
-  params?: any[];
+  params?: string[];
 }
 
 export interface ClientRequest {
   jsonrpc: string;
   method: string;
-  params?: any[];
+  params?: string[];
   id?: number;
 }
 
@@ -29,10 +29,12 @@ export interface ClientResponse {
 
 export class RPCClientJSONCodec extends RPCClientCodec {
   public request(method: string, args: any[], id?: number): any {
+    const params = convertParamsToStringArray(args);
+
     const req: ClientRequest = {
       jsonrpc: '2.0',
       method: method,
-      params: args,
+      params: 0 === params.length ? null : params,
       id: id,
     };
     return JSON.stringify(req);
@@ -48,6 +50,35 @@ export class RPCClientJSONCodec extends RPCClientCodec {
   }
 }
 
+function convertParamsToStringArray(args: any[]): string[] | undefined {
+  const values: string[] = [];
+
+  if (undefined === args || null === args || 0 === args.length) {
+    return values;
+  }
+
+  for (let indexI = 0; indexI < args.length; indexI++) {
+    const arg = args[indexI];
+
+    switch (typeof arg) {
+      case 'boolean':
+      case 'number': // enum
+        values.push(String(arg));
+        break;
+      case 'string':
+        values.push(arg);
+        break;
+      case 'object':  // array, map
+        values.push(JSON.stringify(arg));
+        break;
+      default:
+        throw new Error(`Not supported type[${typeof arg}]`);
+    }
+  }
+
+  return values;
+}
+
 export class RPCClientJSONResponseCodec extends RPCClientResponseCodec {
   public constructor(private _res: ClientResponse) {
     super();

src/packages/meta/crawler-input-item/crawler-input-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 './crawler-input.constant';
+
+@NgModule({
+  imports: [
+    StoreModule.forFeature(MODULE.name, REDUCERS),
+    EffectsModule.forFeature(EFFECTS),
+  ],
+})
+export class MetaCrawlerInputItemStoreModule { }

src/packages/meta/crawler-input-item/crawler-input.constant.ts

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

src/packages/meta/crawler-input-item/crawler-input.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 { MetaCrawlerInputItemStoreModule } from './crawler-input-store.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MetaCrawlerInputItemStoreModule
+  ],
+  declarations: [
+  ],
+  exports: [
+  ],
+  providers: [
+    SERVICES,
+  ]
+})
+export class MetaCrawlerInputItemModule { }

src/packages/meta/crawler-input-item/service/crawler-input-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 { MetaCrawlerInputItem } from '../model/MetaCrawlerInputItem';
+import { MetaCrawler } from '../../crawler/model/MetaCrawler';
+
+
+@Injectable()
+export class MetaCrawlerInputItemService {
+
+  public constructor(
+    private rpcClient: RPCClient,
+  ) {
+
+  }
+
+  public readAllByMetaCrawler(c: MetaCrawler): Observable<MetaCrawlerInputItem[]> {
+    return this.rpcClient.call('MetaCrawlerInputItemService.readAllByMetaCrawler', c);
+  }
+}

src/packages/meta/crawler-input-item/service/index.ts

@@ -0,0 +1,5 @@
+import { MetaCrawlerInputItemService } from './crawler-input-item.service';
+
+export const SERVICES = [
+    MetaCrawlerInputItemService,
+];

src/packages/meta/crawler-input-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 '../crawler-input.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 ReadCrawlerInputItemSelector = new StateSelector<ListStore.State>(createSelector(
+    selectState,
+    (state: State) => state.list
+));

src/packages/meta/crawler-input-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/crawler-input-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 { MetaCrawlerInputItem } from '../../model/MetaCrawlerInputItem';
+
+
+export enum ActionType {
+  ReadAll = '[meta.crawler-input-list] ReadAll',
+  ReadAllSuccess = '[meta.crawler-input-list] ReadAllSuccess',
+  ReadAllFailure = '[meta.crawler-input-list] ReadAllFailure',
+}
+
+export class ReadAll implements Action {
+  readonly type = ActionType.ReadAll;
+
+  constructor(public payload: MetaCrawler) {}
+}
+
+export class ReadAllSuccess implements Action {
+  readonly type = ActionType.ReadAllSuccess;
+
+  constructor(public payload: MetaCrawlerInputItem[]) {}
+}
+
+export class ReadAllFailure implements Action {
+  readonly type = ActionType.ReadAllFailure;
+
+  constructor(public payload: RPCError) {}
+}
+
+export type Actions =
+  | ReadAll
+  | ReadAllSuccess
+  | ReadAllFailure
+
+;

src/packages/meta/crawler-input-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/crawler-input-item/store/list/list.effect.ts

@@ -0,0 +1,51 @@
+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 {
+  ReadAll,
+  ReadAllSuccess,
+  ReadAllFailure,
+  ActionType,
+} from './list.action';
+import { MetaCrawlerInputItemService } from '../../service/crawler-input-item.service';
+
+@Injectable()
+export class Effects {
+
+  constructor(
+    private actions$: Actions,
+    private service: MetaCrawlerInputItemService,
+    private router: Router
+  ) { }
+
+  @Effect()
+  readAll$: Observable<Action> = this.actions$
+    .ofType(ActionType.ReadAll)
+    .map((action: ReadAll) => action.payload)
+    .switchMap(payload => this.service.readAllByMetaCrawler(payload))
+    .map(list => {
+      return new ReadAllSuccess(list);
+    })
+    .catch((error: RPCError) => {
+      return of(new ReadAllFailure(error));
+    });
+
+}

src/packages/meta/crawler-input-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.ReadAll: {
+      return {
+        ...state,
+        error: null,
+        pending: true,
+      };
+    }
+
+    case ActionType.ReadAllSuccess: {
+      return {
+        ...state,
+        error: null,
+        pending: false,
+        inputs: action.payload
+      };
+    }
+
+    case ActionType.ReadAllFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        pending: false,
+        inputs: null,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}

src/packages/meta/crawler-input-item/store/list/list.state.ts

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

src/packages/meta/crawler/service/crawler.service.ts

@@ -17,6 +17,6 @@ export class MetaCrawlerService {
   }
 
   public readAll(): Observable<MetaCrawler[]> {
-    return this.rpcClient.call('CrawlerService.readAll');
+    return this.rpcClient.call('MetaCrawlerService.readAll');
   }
 }

src/packages/meta/crawler/store/index.ts

@@ -22,9 +22,9 @@ export const EFFECTS = [
     ListStore.Effects,
 ];
 
-export const selectNotificationState = createFeatureSelector<State>(MODULE.name);
+export const selectCrawlerState = createFeatureSelector<State>(MODULE.name);
 
 export const ReadAllCrawlerSelector = new StateSelector<ListStore.State>(createSelector(
-    selectNotificationState,
+    selectCrawlerState,
     (state: State) => state.crawlers
 ));

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

@@ -1,5 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input, OnChanges } from '@angular/core';
 import { Router } from '@angular/router';
+import { MetaCrawler } from '../../../../meta/crawler/model/MetaCrawler';
+
+import { Store, select } from '@ngrx/store';
+import { RPCError } from 'packages/core/rpc/error';
+import * as ListStore from 'packages/meta/crawler-input-item/store/list';
+import { ReadCrawlerInputItemSelector } from 'packages/meta/crawler-input-item/store';
+import { MetaCrawlerInputItem } from '../../../../meta/crawler-input-item/model/MetaCrawlerInputItem';
 
 
 @Component({
@@ -7,10 +14,45 @@ import { Router } from '@angular/router';
   templateUrl: './crawler-auth.component.html',
   styleUrls: ['./crawler-auth.component.scss']
 })
-export class CrawlerAuthComponent implements OnInit {
+export class CrawlerAuthComponent implements OnInit, OnChanges {
 
-  constructor(private router: Router) { }
+  inputItems$ = this.listStore.pipe(select(ReadCrawlerInputItemSelector.select('inputs')));
+  inputItems: MetaCrawlerInputItem[];
+
+  @Input() selectedCrawler: MetaCrawler;
+  constructor(
+    private router: Router,
+    private listStore: Store<ListStore.State>,
+  ) { }
 
   ngOnInit() {
+    this.inputItems$.subscribe(
+      (list: MetaCrawlerInputItem[]) => {
+        if (list !== null) {
+          console.log('###Auth Inputs###');
+          console.log(list);
+          console.log('###################');
+          this.inputItems = list;
+          this.generateAuthComponent();
+        }
+      },
+      (error: RPCError) => {
+        console.log(error.response.message);
+      }
+    );
+  }
+
+  ngOnChanges() {
+    if (this.selectedCrawler === null) { return; }
+    this.getCrawlerAuthInputItems();
+  }
+
+  getCrawlerAuthInputItems() {
+    this.listStore.dispatch(new ListStore.ReadAll(this.selectedCrawler));
+  }
+
+  generateAuthComponent() {
+    this.inputItems.map(function(v, i) {
+    });
   }
 }

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, OnChanges, AfterContentInit } from '@angular/core';
+import { Component, OnInit, Input, OnChanges, AfterContentInit, Output, EventEmitter } from '@angular/core';
 import { Router } from '@angular/router';
 import { Target } from 'packages/target/model';
 
@@ -16,11 +16,14 @@ import { MetaCrawler } from 'packages/meta/crawler/model/MetaCrawler';
 })
 export class CrawlerSelectorComponent implements OnInit, OnChanges, AfterContentInit {
 
-  crawlers$ = this.listStore.pipe(select(ReadAllCrawlerSelector.select('list')));
+  crawlers$ = this.listStore.pipe(select(ReadAllCrawlerSelector.select('metaCrawlerList')));
 
   @Input() selectedTarget: Target;
   crawlers: MetaCrawler[];
 
+  @Output() crawlerSelectEvent = new EventEmitter<MetaCrawler>();
+
+
   constructor(
     private router: Router,
     private listStore: Store<ListStore.State>,
@@ -30,7 +33,7 @@ export class CrawlerSelectorComponent implements OnInit, OnChanges, AfterContent
     this.crawlers$.subscribe(
       (list: MetaCrawler[]) => {
         if (list !== null) {
-          console.log(list);
+          this.crawlers = list;
         }
       },
       (error: RPCError) => {
@@ -44,21 +47,12 @@ export class CrawlerSelectorComponent implements OnInit, OnChanges, AfterContent
   }
 
   ngOnChanges() {
-    if (this.selectedTarget) {
-      console.log('Getting valid crawlers for ' + this.selectedTarget.displayName);
-    }
-
-    this.crawlers = new Array();
-    for (let i = 0; i < 3; i++) {
-      const c: MetaCrawler = {
-        id: i,
-        name: 'Crawler' + i,
-      };
-      this.crawlers.push(c);
-    }
+    // if (this.selectedTarget) {
+    //   console.log('Getting valid crawlers for ' + this.selectedTarget.displayName);
+    // }
   }
 
   crawlerSelected(crawler: MetaCrawler) {
-    // console.log(crawler);
+    this.crawlerSelectEvent.emit(crawler);
   }
 }

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

@@ -8,7 +8,23 @@
     <mat-card-content>
       <perfect-scrollbar style="height: 150px">
 
-        트리 들어가야됨
+        <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">
+              <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)="checkItem(node)">
+                <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>
+            </div>
+          </ng-template>
+        </tree-root>
         
       </perfect-scrollbar>
     </mat-card-content>

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

@@ -1,16 +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 {
 
-  constructor(private router: Router) { }
+  @Input() selectedCrawler: MetaCrawler;
+  @Output() selectedItems = new EventEmitter<MetaSensorDisplayItem[]>();
+  items$ = this.listStore.pipe(select(ReadAllSensorDisplayItemByCrawlerSelector.select('list')));
+  sensorDisplayItems: MetaSensorDisplayItem[];
+  @ViewChild('tree') tree;
+  nodes;
+
+  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

@@ -3,19 +3,19 @@
     <mat-grid-list cols="2" rowHeight="5:1">
 
       <mat-grid-tile [colspan]="1" [rowspan]="3" style="background-color: lightblue">
-        <of-target-selector [target]="selectedTarget" (targetSelectEvent)="handleTargetSelection($event)" [target]="target"></of-target-selector>
+        <of-target-selector [target]="selectedTarget" (targetSelectEvent)="handleTargetSelection($event)" ></of-target-selector>
       </mat-grid-tile>
 
       <mat-grid-tile [colspan]="1" [rowspan]="2" style="background-color: lightcoral">
-        <of-crawler-auth></of-crawler-auth>
+        <of-crawler-auth [selectedCrawler]="selectedCrawler"></of-crawler-auth>
       </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">
-        <of-crawler-selector [selectedTarget]="selectedTarget"></of-crawler-selector>
+        <of-crawler-selector [selectedTarget]="selectedTarget" (crawlerSelectEvent)="handleCrawlerSelection($event)"></of-crawler-selector>
       </mat-grid-tile>
 
     </mat-grid-list>

src/packages/sensor/component/setting/setting.component.ts

@@ -3,6 +3,7 @@ import { AfterContentInit } from '@angular/core/src/metadata/lifecycle_hooks';
 import { Target } from '../../../target/model';
 import { MAT_DIALOG_DATA } from '@angular/material';
 import { Infra } from '../../../infra/model';
+import { MetaCrawler } from '../../../meta/crawler/model/MetaCrawler';
 
 
 @Component({
@@ -13,6 +14,7 @@ import { Infra } from '../../../infra/model';
 export class SettingComponent implements OnInit, AfterContentInit {
 
   selectedTarget: Target = null;
+  selectedCrawler: MetaCrawler = null;
   step = 1;
 
   constructor(
@@ -46,4 +48,7 @@ export class SettingComponent implements OnInit, AfterContentInit {
   handleTargetSelection(t: Target) {
     this.selectedTarget = t;
   }
+  handleCrawlerSelection(c: MetaCrawler) {
+    this.selectedCrawler = c;
+  }
 }

src/packages/sensor/sensor.module.ts

@@ -11,6 +11,8 @@ import { SettingComponent } from './component/setting/setting.component';
 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: [
@@ -20,7 +22,9 @@ import { MetaCrawlerModule } from '../meta/crawler/crawler.module';
     SensorStoreModule,
     TreeModule,
     PerfectScrollbarModule,
-    MetaCrawlerModule
+    MetaCrawlerModule,
+    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:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/angular-tree-component/-/angular-tree-component-7.0.1.tgz#fc8d0e72d8c34b87131a3ba2bd32ad20945689ac"
+angular-tree-component@^7.0.2:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/angular-tree-component/-/angular-tree-component-7.0.2.tgz#a70c2ed62b0bf5f14d20ada1e68fbc3649bdf783"
   dependencies:
-    lodash "4.17.4"
-    mobx ">=3"
-    mobx-angular ">=1"
+    lodash "^4.17.4"
+    mobx "^3.6.2"
+    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:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/mobx-angular/-/mobx-angular-3.0.1.tgz#881379acea563c0767550d1f7801ab3434449bb1"
+mobx-angular@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/mobx-angular/-/mobx-angular-2.2.0.tgz#f9612160eb585ef3343dfdb476185dbb7b49e1ef"
 
-mobx@>=3:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/mobx/-/mobx-4.0.1.tgz#321945580f7d3bf7b1f60ddaa1d623835683b5a2"
+mobx@^3.6.2:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/mobx/-/mobx-3.6.2.tgz#fb9f5ff5090539a1ad54e75dc4c098b602693320"
 
 module-deps@^4.0.8:
   version "4.1.1"