sensor senting popup is in progress

package.json

@@ -29,7 +29,6 @@
         "@ngrx/store": "^5.2.0",
         "@ngrx/store-devtools": "^5.2.0",
         "angular-l10n": "^4.1.5",
-        "angular-tree-component": "^7.1.0",
         "angularx-qrcode": "^1.1.0",
         "ip-cidr": "^1.1.2",
         "reflect-metadata": "^0.1.12",

src/packages/infra/infra.module.ts

@@ -6,6 +6,7 @@ import { SERVICES } from './service';
 import { FormsModule } from '@angular/forms';
 import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module';
 import { DiscoveryModule } from 'packages/discovery/discovery.module';
+import { SensorModule } from '../sensor/sensor.module';
 
 
 @NgModule({
@@ -14,7 +15,8 @@ import { DiscoveryModule } from 'packages/discovery/discovery.module';
     InfraStoreModule,
     FormsModule,
     PrimeNGModules,
-    DiscoveryModule
+    DiscoveryModule,
+    SensorModule
   ],
   declarations: [
     COMPONENTS,

src/packages/meta/sensor-item-type/model/MetaSensorItemType.ts

@@ -1,6 +1,6 @@
 export interface MetaSensorItemType {
   id?: number;
-  name: string;
+  name?: string;
-  description: string;
+  description?: string;
-  createDate: Date;
+  createDate?: Date;
 }

src/packages/sensor/component/index.ts

@@ -1,27 +1,28 @@
 import { ListComponent } from './list/list.component';
 
-// import { SettingComponent } from './setting/setting.component';
+import { SettingComponent } from './setting/setting.component';
+import { TargetSelectorComponent } from './setting/target-selector/target-selector.component';
+import { CrawlerSelectorComponent } from './setting/crawler-selector/crawler-selector.component';
+import { CrawlerAuthComponent } from './setting/crawler-auth/crawler-auth.component';
+import { SensorItemSelectorComponent } from './setting/sensor-item-selector/sensor-item-selector.component';
 // import { SettingResultComponent } from './setting-result/setting-result.component';
 // import { FilterComponent } from './list/filter/filter.component';
 // import { ListComponent } from './list/list.component';
 // import { DetailComponent } from './detail/detail.component';
 // import { TargetSelectorComponent } from './setting/target-selector/target-selector.component';
-// import { CrawlerSelectorComponent } from './setting/crawler-selector/crawler-selector.component';
-// import { CrawlerAuthComponent } from './setting/crawler-auth/crawler-auth.component';
-// import { SensorItemSelectorComponent } from './setting/sensor-item-selector/sensor-item-selector.component';
 // import { SettingETCComponent } from './setting/setting-etc/setting-etc.component';
 // import { NameTagComponent } from './name-tag/name-tag.component';
 
 export const COMPONENTS = [
-//   SettingComponent,
+  SettingComponent,
+  TargetSelectorComponent,
+  CrawlerSelectorComponent,
+  CrawlerAuthComponent,
+  SensorItemSelectorComponent,
 //   SettingResultComponent,
   ListComponent,
 //   FilterComponent,
 //   DetailComponent,
-//   TargetSelectorComponent,
-//   CrawlerSelectorComponent,
-//   CrawlerAuthComponent,
-//   SensorItemSelectorComponent,
 //   SettingETCComponent,
 //   NameTagComponent,
 ];

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

@@ -1,4 +1,68 @@
-<div>
+<div class="card no-margin" style="height: 250px; overflow: auto">
+  <h1>3. Credential for </h1>
+
+  <div class="ui-g form-group">
+    <div class="ui-g-12 ui-md-2">
+      <label for="input">User</label>
+    </div>
+    <div class="ui-g-12 ui-md-4">
+      <span class="md-inputfield">
+        <input id="input" type="text" pInputText/>
+        <label>Username</label>
+      </span>
+    </div>
+  </div>
+
+  <div class="ui-g form-group">
+    <div class="ui-g-12 ui-md-2">
+      <label for="input">User</label>
+    </div>
+    <div class="ui-g-12 ui-md-4">
+      <span class="md-inputfield">
+        <input id="input" type="text" pInputText/>
+        <label>Username</label>
+      </span>
+    </div>
+  </div>
+
+  <div class="ui-g form-group">
+    <div class="ui-g-12 ui-md-2">
+      <label for="input">User</label>
+    </div>
+    <div class="ui-g-12 ui-md-4">
+      <span class="md-inputfield">
+        <input id="input" type="text" pInputText/>
+        <label>Username</label>
+      </span>
+    </div>
+  </div>
+
+  <div class="ui-g form-group">
+    <div class="ui-g-12 ui-md-2">
+      <label for="input">User</label>
+    </div>
+    <div class="ui-g-12 ui-md-4">
+      <span class="md-inputfield">
+        <input id="input" type="text" pInputText/>
+        <label>Username</label>
+      </span>
+    </div>
+  </div>
+
+  <div class="ui-g form-group">
+      <div class="ui-g-12 ui-md-2">
+        <label for="input">User</label>
+      </div>
+      <div class="ui-g-12 ui-md-4">
+        <span class="md-inputfield">
+          <input id="input" type="text" pInputText/>
+          <label>Username</label>
+        </span>
+      </div>
+    </div>
+
+</div>
+<!-- <div>
   <mat-card>
     <mat-card-header>
       <mat-card-title>Step 3</mat-card-title>
@@ -28,4 +92,4 @@
     </mat-card-content>
   </mat-card>
 
-</div>
+</div> -->

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

@@ -12,7 +12,6 @@ import { MetaCrawlerInputItem } from 'packages/meta/crawler-input-item/model/Met
 @Component({
   selector: 'of-crawler-auth',
   templateUrl: './crawler-auth.component.html',
-  styleUrls: ['./crawler-auth.component.scss']
 })
 export class CrawlerAuthComponent implements OnInit, OnChanges {
 

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

@@ -1,4 +1,14 @@
-<div>
+<p-orderList [value]="crawlers" [listStyle]="{'height':'200px'}" [responsive]="true" header="2. Choose a Crawler" filterBy="name">
+  <ng-template let-crawler pTemplate="item">
+    <div class="ui-helper-clearfix">
+      <!-- <img src="assets/demo/images/car/Audi.gif" style="display:inline-block;margin:2px 0 2px 2px" /> -->
+      <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{crawler.name}}</div>
+    </div>
+  </ng-template>
+</p-orderList>
+
+
+<!-- <div>
   <mat-card>
     <mat-card-header>
       <mat-card-title>Step 2</mat-card-title>
@@ -18,4 +28,4 @@
     </mat-card-content>
   </mat-card>
 
-</div>
+</div> -->

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

@@ -27,16 +27,27 @@ export class CrawlerSelectorComponent implements OnInit, OnChanges, AfterContent
   ) {}
 
   ngOnInit() {
-    this.crawlers$.subscribe(
+    // this.crawlers$.subscribe(
-      (list: MetaCrawler[]) => {
+    //   (list: MetaCrawler[]) => {
-        if (list !== null) {
+    //     if (list !== null) {
-          this.crawlers = list;
+    //       this.crawlers = list;
-        }
+    //     }
-      },
+    //   },
-      (error: RPCClientError) => {
+    //   (error: RPCClientError) => {
-        console.log(error.response.message);
+    //     console.log(error.response.message);
-      }
+    //   }
-    );
+    // );
+
+    // Temporary Data
+    this.crawlers = [];
+    for (let i = 0; i < 10; i++) {
+      const c: MetaCrawler = {
+        id: i,
+        name: 'CrawlerName' + i,
+        description: 'Description' + i,
+      };
+      this.crawlers.push(c);
+    }
   }
 
   ngAfterContentInit() {

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

@@ -1,4 +1,6 @@
-<div>
+<p-tree [value]="displayItems" selectionMode="checkbox" [(selection)]="selectedItems"></p-tree>
+
+<!-- <div>
   <mat-card>
     <mat-card-header>
       <mat-card-title>Step 4</mat-card-title>
@@ -31,4 +33,4 @@
     </mat-card-content>
   </mat-card>
 
-</div>
+</div> -->

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

@@ -2,12 +2,12 @@ import { Component, OnInit, OnChanges, Input, Output, EventEmitter, ViewChild, A
 import { Router } from '@angular/router';
 import { Store, select } from '@ngrx/store';
 import { RPCClientError } from '@loafer/ng-rpc/protocol';
-
 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';
+import { MetaSensorItemType } from '../../../../meta/sensor-item-type/model/MetaSensorItemType';
+import { TreeNode } from 'primeng/primeng';
 
 @Component({
   selector: 'of-sensor-item-selector',
@@ -19,8 +19,9 @@ export class SensorItemSelectorComponent implements OnInit, OnChanges {
   @Input() selectedCrawler: MetaCrawler;
   @Output() itemSelectEvent = new EventEmitter<Set<MetaSensorDisplayItem>>();
   items$ = this.listStore.pipe(select(ReadAllSensorDisplayItemByCrawlerSelector.select('list')));
-  nodes;
+
-  checkedSet: Set<MetaSensorDisplayItem> = new Set();
+  selectedItems: MetaSensorDisplayItem[];
+  treeNode: TreeNode[];
 
   constructor(
     private router: Router,
@@ -28,77 +29,49 @@ export class SensorItemSelectorComponent implements OnInit, OnChanges {
   ) { }
 
   ngOnInit() {
-    this.items$.subscribe(
+    // this.items$.subscribe(
-      (list: MetaSensorDisplayItem[]) => {
+    //   (list: MetaSensorDisplayItem[]) => {
-        if (list !== null) {
+    //     if (list !== null) {
-          this.generateTreeNode(list);
+    //     }
-        }
+    //   },
-      },
+    //   (error: RPCClientError) => {
-      (error: RPCClientError) => {
+    //     console.log(error.response.message);
-        console.log(error.response.message);
+    //   }
+    // );
+
+    // Temporary data
+    const displayItems = [];
+    for (let i = 0; i < 10; i++) {
+      let isDefault = false;
+      const t: MetaSensorItemType = {
+        name: 'CPU'
+      };
+      if (i % 2) {
+        isDefault = true;
+        t.name = 'Memory';
       }
-    );
+      const si: MetaSensorDisplayItem = {
+        id: i,
+        key: 'SensorDisplayItemKey' + i,
+        displayName: 'DisplayName' + i,
+        description: 'Description' + i,
+        default: isDefault,
+        itemType: t
+      };
+      displayItems.push(si);
+    }
+
+    this.generateTreeData(displayItems);
   }
 
+  generateTreeData(items) {
+
+  }
+
+
   ngOnChanges() {
-    this.checkedSet.clear();
+    // this.checkedSet.clear();
     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,
-        };
-        this.nodes.push(node);
-      } else {
-        categoryNode.children.push(this.getChildNode(item));
-      }
-    }
-    this.itemSelectEvent.emit(this.checkedSet);
-  }
-
-  getChildNode(item) {
-    const childNode = {
-      title: item.displayName,
-      key: ' - ' + item.key,
-      default: item.default,
-      displayItem: item
-    };
-    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);
-    if (node.isActive) {
-      if (this.checkedSet.has(node.data.displayItem) === false) {
-        this.checkedSet.add(node.data.displayItem);
-      }
-    } else {
-      if (this.checkedSet.has(node.data.displayItem)) {
-        this.checkedSet.delete(node.data.displayItem);
-      }
-    }
-    this.itemSelectEvent.emit(this.checkedSet);
-  }
-
-  onTreeDataLoad(tree) {
-    tree.treeModel.expandAll();
-  }
 }

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

@@ -1,37 +1,16 @@
-<div>
+<!-- <p-steps [model]="stepsItems"></p-steps> -->
-  <div [hidden]="step !== 1">
-    <mat-grid-list cols="2" rowHeight="5:1">
-<!-- isAllSelectable === 0 ? 3 : 1 -->
-      <mat-grid-tile [colspan]="1" [rowspan]="isAllSelectable ? 3 : 2" style="background-color: lightblue" (click)="onAreaClick(0)">
-        <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" (click)="onAreaClick(2)">
+<div class="ui-g">
-        <of-crawler-auth [selectedCrawler]="selectedCrawler" (testPassEvent)="handleTest($event)"></of-crawler-auth>
+  <div class="ui-g-6">
-      </mat-grid-tile>
+    <of-target-selector></of-target-selector>
-
-      <mat-grid-tile [colspan]="1" [rowspan]="3" style="background-color: lightgrey" (click)="onAreaClick(3)">
-        <of-sensor-item-selector [selectedCrawler]="selectedCrawler" (itemSelectEvent)="handleItemSelection($event)"></of-sensor-item-selector>
-      </mat-grid-tile>
-
-      <mat-grid-tile [colspan]="1" [rowspan]="isAllSelectable ? 2 : 3" style="background-color: lightpink" (click)="onAreaClick(1)">
-        <of-crawler-selector [selectedTarget]="selectedTarget" (crawlerSelectEvent)="handleCrawlerSelection($event)"></of-crawler-selector>
-      </mat-grid-tile>
-
-    </mat-grid-list>
   </div>
-
+  <div class="ui-g-6">
-  <div *ngIf="step === 2">
+    <of-crawler-auth></of-crawler-auth>
-    <of-sensor-setting-etc [selectedTarget]="selectedTarget" 
-    [selectedCrawler]="selectedCrawler"
-    [selectedItems]="selectedSensorDisplayItems"></of-sensor-setting-etc>
   </div>
-
+  <div class="ui-g-6">
-  <div fxLayoutAlign="space-between stretch" [style.margin]="'5px'">
+    <of-crawler-selector></of-crawler-selector>
-    <button mat-raised-button mat-dialog-close *ngIf="step === 1">Cancel</button>
+  </div>
-    <button mat-raised-button *ngIf="step === 2" (click)="onPrev()">Prev</button>
+  <div class="ui-g-6">
-
+    <of-sensor-item-selector></of-sensor-item-selector>
-    <button mat-raised-button color="primary" (click)="onNext()" *ngIf="step === 1" [disabled]="!nextable">Next</button>
-    <button mat-raised-button color="primary" [mat-dialog-close]="true" *ngIf="step === 2">Done</button>
   </div>
 </div>

src/packages/sensor/component/setting/setting.component.scss

@@ -1,31 +1,26 @@
-.example-card {
+.ui-steps .ui-steps-item {
-  width: 400px;
+    width: 25%;
 }
 
-.example-header-image {
+.ui-steps.steps-custom {
-  background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
+    margin-bottom: 30px;
-  background-size: cover;
+}
+ 
+.ui-steps.steps-custom .ui-steps-item .ui-menuitem-link {
+    height: 10px;
+    padding: 0 1em;
+}
+ 
+.ui-steps.steps-custom .ui-steps-item .ui-steps-number {
+    background-color: #0081c2;
+    color: #FFFFFF;
+    display: inline-block;
+    width: 36px;
+    border-radius: 50%;
+    margin-top: -14px;
+    margin-bottom: 10px;
 }
 
-.example-radio-group {
+.ui-steps.steps-custom .ui-steps-item .ui-steps-title {
-  display: inline-flex;
+    color: #555555;
-  flex-direction: column;
-}
-
-.example-radio-button {
-  margin: 5px;
-}
-
-.example-selected-value {
-  margin: 15px 0;
-}
-
-.example-form {
-  min-width: 150px;
-  max-width: 500px;
-  width: 100%;
-}
-
-.example-full-width {
-  width: 100%;
 }

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

@@ -1,111 +1,57 @@
-// import { Component, OnInit, Input, Inject, DoCheck } from '@angular/core';
+import { Component, OnInit, Input, Inject, DoCheck, ViewEncapsulation } from '@angular/core';
-// import { Target } from '../../../target/model';
+import { Target } from 'packages/target/model';
-// import { MAT_DIALOG_DATA, MatSnackBar } from '@angular/material';
+import { Infra } from 'packages/infra/model';
-// import { Infra } from '../../../infra/model';
+import { MetaCrawler } from 'packages/meta/crawler/model/MetaCrawler';
-// import { MetaCrawler } from '../../../meta/crawler/model/MetaCrawler';
+import { MetaSensorDisplayItem } from 'packages/meta/sensor-display-item/model/MetaSensorDisplayItem';
-// import { MetaSensorDisplayItem } from '../../../meta/sensor-display-item/model/MetaSensorDisplayItem';
 
-// import { Store, select } from '@ngrx/store';
+import { Store, select } from '@ngrx/store';
-// import { RPCClientError } from '@loafer/ng-rpc/protocol';
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
-// import * as SensorItemKeyListStore from 'packages/sensor-item/store/key-list';
+import * as SensorItemKeyListStore from 'packages/sensor-item/store/key-list';
-// import { ReadSensorItemKeySelector } from 'packages/sensor-item/store';
+import { ReadSensorItemKeySelector } from 'packages/sensor-item/store';
-// import { MetaSensorItemKey } from '../../../meta/sensor-item-key/model/MetaSensorItemKey';
+import { MetaSensorItemKey } from 'packages/meta/sensor-item-key/model/MetaSensorItemKey';
 
-// @Component({
+@Component({
-//   selector: 'of-sensor-setting',
+    selector: 'of-sensor-setting',
-//   templateUrl: './setting.component.html',
+    templateUrl: './setting.component.html',
-//   styleUrls: ['./setting.component.scss']
+    encapsulation: ViewEncapsulation.None
-// })
+})
-// export class SettingComponent implements OnInit, DoCheck {
+export class SettingComponent implements OnInit, DoCheck {
 
-//   selectedTarget: Target = null;
+    sensorItemKeys$ = this.keyListStore.pipe(select(ReadSensorItemKeySelector.select('list')));
-//   selectedCrawler: MetaCrawler = null;
+    stepsItems = [
-//   testPassed = false;
+        {
-//   selectedSensorDisplayItems: Set<MetaSensorDisplayItem> = null;
+            label: 'Target'
-//   step = 1;
+        },
-//   nextable = false;
+        {
-//   focus = 0;
+            label: 'Crawler'
-//   isAllSelectable = true;
+        },
+        {
+            label: 'Credentials'
+        },
+        {
+            label: 'Sensor Items'
+        }
+    ];
+    activeIndex = 1;
 
-//   sensorItemKeys$ = this.keyListStore.pipe(select(ReadSensorItemKeySelector.select('list')));
+    constructor(
+        private keyListStore: Store<SensorItemKeyListStore.State>,
+    ) {
+    }
 
-//   constructor(
+    ngOnInit() {
-//     @Inject(MAT_DIALOG_DATA) public data: any,
+        this.sensorItemKeys$.subscribe(
-//     public snackBar: MatSnackBar,
+            (list: MetaSensorItemKey[]) => {
-//     private keyListStore: Store<SensorItemKeyListStore.State>,
+                if (list !== null) {
-//   ) {
+                    console.log(list);
-//     if (data !== null) {
+                }
-//       this.isAllSelectable = false;
+            },
-//       this.selectedTarget = data.infra.target;
+            (error: RPCClientError) => {
-//     }
+                console.log(error.response.message);
-//   }
+            }
+        );
+    }
 
-//   ngOnInit() {
+    ngDoCheck() {
-//     this.sensorItemKeys$.subscribe(
+    }
-//       (list: MetaSensorItemKey[]) => {
+}
-//         if (list !== null) {
-//           console.log('#############################');
-//           console.log(list);
-//           console.log('#############################');
-//         }
-//       },
-//       (error: RPCClientError) => {
-//         console.log(error.response.message);
-//       }
-//     );
-//   }
-
-//   ngDoCheck() {
-//     if (
-//       this.selectedTarget === null ||
-//       this.selectedCrawler === null ||
-//       this.selectedSensorDisplayItems === null ||
-//       this.selectedSensorDisplayItems.size === 0 ||
-//       this.testPassed === false
-//     ) {
-//       this.nextable = false;
-//     } else {
-//       this.nextable = true;
-//     }
-//   }
-
-//   onNext() {
-//     this.step += 1;
-//   }
-
-//   onPrev() {
-//     this.step -= 1;
-//   }
-
-//   onDone() {
-//     this.openSnackBar('센서 등록해야되는데 아직 못함');
-//     // List<MetaSensorItemKey> SensorItemDependencyService.readAllByDisplayItem(MetaSensorDisplayItem displayItem)
-//     for (const displayItem of Array.from(this.selectedSensorDisplayItems)) {
-//       this.keyListStore.dispatch(new SensorItemKeyListStore.ReadAllByDisplayItem(displayItem));
-//     }
-//     // Sensor SensorService.registSensorConfig(Sensor sensor, List<SensorItem> sensorItemList, String etcJson)
-//   }
-
-//   openSnackBar(message: string) {
-//     this.snackBar.open(message, 'OK', {
-//       duration: 2000,
-//     });
-//   }
-
-//   handleTargetSelection(t: Target) {
-//     this.selectedTarget = t;
-//   }
-//   handleCrawlerSelection(c: MetaCrawler) {
-//     this.selectedCrawler = c;
-//   }
-//   handleItemSelection(itemSet: Set<MetaSensorDisplayItem>) {
-//     this.selectedSensorDisplayItems = itemSet;
-//   }
-//   handleTest(b: boolean) {
-//     this.testPassed = b;
-//   }
-
-//   onAreaClick(no: number) {
-//     this.focus = no;
-//   }
-// }

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

@@ -1,4 +1,13 @@
-<div style="width:100%">
+<p-orderList [value]="targets" [listStyle]="{'height':'200px'}" [responsive]="true" header="1. Choose a target" filterBy="displayName">
+  <ng-template let-target pTemplate="item">
+    <div class="ui-helper-clearfix">
+      <!-- <img src="assets/demo/images/car/BMW.gif" style="display:inline-block;margin:2px 0 2px 2px" /> -->
+      <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{target.displayName}}</div>
+    </div>
+  </ng-template>
+</p-orderList>
+
+<!-- <div style="width:100%">
   <mat-card>
     <mat-card-header>
       <mat-card-title>Step 1</mat-card-title>
@@ -18,4 +27,4 @@
     </mat-card-content>
   </mat-card>
 
-</div>
+</div> -->

src/packages/sensor/component/setting/target-selector/target-selector.component.scss

@@ -1,8 +0,0 @@
-.radio-group {
-  display: inline-flex;
-  flex-direction: column;
-}
-
-.radio-button {
-  margin: 5px;
-}

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

@@ -1,78 +1,89 @@
-// import { Component, OnInit, Output, EventEmitter, Input, AfterContentInit } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter, Input, AfterContentInit } from '@angular/core';
-// import { Router } from '@angular/router';
+import { Router } from '@angular/router';
-// import { MatRadioButton } from '@angular/material';
+import { Target } from 'packages/target/model';
-// import { Target } from 'packages/target/model';
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
-// import { RPCClientError } from '@loafer/ng-rpc/protocol';
+import { Domain } from 'packages/domain/model';
-// import { Domain } from 'packages/domain/model';
+import { AuthSelector } from 'packages/member/store';
-// import { AuthSelector } from 'packages/member/store';
+import * as ListStore from 'packages/infra/store/list';
-// import * as ListStore from 'packages/infra/store/list';
+import { ListSelector } from 'packages/infra/store';
-// import { ListSelector } from 'packages/infra/store';
+import { Store, select } from '@ngrx/store';
-// import { Store, select } from '@ngrx/store';
+import { Page, PageParams } from 'app/commons/model';
-// import { Page, PageParams } from 'app/commons/model';
+import { SelectItem } from 'primeng/primeng';
 
-// @Component({
+@Component({
-//   selector: 'of-target-selector',
+    selector: 'of-target-selector',
-//   templateUrl: './target-selector.component.html',
+    templateUrl: './target-selector.component.html',
-//   styleUrls: ['./target-selector.component.scss']
+})
-// })
+export class TargetSelectorComponent implements OnInit {
-// export class TargetSelectorComponent implements OnInit {
 
-//   targets$ = this.store.pipe(select(ListSelector.select('page')));
+    targets$ = this.store.pipe(select(ListSelector.select('page')));
 
-//   @Input() target: Target = null;
+    @Input() target: Target = null;
-//   @Output() targetSelectEvent = new EventEmitter<Target>();
+    @Output() targetSelectEvent = new EventEmitter<Target>();
-//   targets: Target[] = null;
+    targets: Target[] = null;
 
-//   constructor(
+    constructor(
-//     private router: Router,
+        private router: Router,
-//     private store: Store<ListStore.State>
+        private store: Store<ListStore.State>
-//   ) { }
+    ) { }
 
-//   ngOnInit() {
+    ngOnInit() {
-//     this.targets = new Array();
+        this.targets = new Array();
-//     if (this.target === null) {
+        if (this.target === null) {
-//       this.getTargetList();
+            this.getTargetList();
-//     } else {
+        } else {
-//       this.targets.push(this.target);
+            this.targets.push(this.target);
-//     }
+        }
 
-//     this.targets$.subscribe(
+        this.targets$.subscribe(
-//       (page: Page) => {
+            (page: Page) => {
-//         if (page !== null) {
+                if (page !== null) {
-//           this.convertInfraToTarget(page);
+                    this.convertInfraToTarget(page);
-//         }
+                }
-//       },
+            },
-//       (error: RPCClientError) => {
+            (error: RPCClientError) => {
-//         console.log(error.response.message);
+                console.log(error.response.message);
-//       }
+            }
-//     );
+        );
-//   }
 
-//   convertInfraToTarget(page: Page) {
+        // Temporary data
-//     for (const infra of page.content) {
+        for (let i = 0; i < 10; i++) {
-//       this.targets.push(infra.target);
+            const t: Target = {
-//     }
+                id: i,
-//   }
+                displayName: 'DisplayName' + i,
+                createDate: new Date(),
+                description: 'Description' + i,
+            };
+            this.targets.push(t);
+        }
+    }
 
-//   getTargetList() {
-//     this.store.select(AuthSelector.select('domain')).subscribe(
-//       (domain: Domain) => {
-//         const pageParams: PageParams = {
-//           pageNo: '0',
-//           countPerPage: '9999',
-//           sortCol: 'id',
-//           sortDirection: 'descending'
-//         };
-//         this.store.dispatch(new ListStore.ReadAllByDomain({ domain, pageParams }));
-//       },
-//       (error) => {
-//         console.log(error);
-//       }
-//     );
-//   }
 
-//   targetSelected(t: Target) {
+    convertInfraToTarget(page: Page) {
-//     this.targetSelectEvent.emit(t);
+        for (const infra of page.content) {
-//   }
+            this.targets.push(infra.target);
+        }
+    }
 
-// }
+    getTargetList() {
+        this.store.select(AuthSelector.select('domain')).subscribe(
+            (domain: Domain) => {
+                const pageParams: PageParams = {
+                    pageNo: '0',
+                    countPerPage: '9999',
+                    sortCol: 'id',
+                    sortDirection: 'descending'
+                };
+                this.store.dispatch(new ListStore.ReadAllByDomain({ domain, pageParams }));
+            },
+            (error) => {
+                console.log(error);
+            }
+        );
+    }
+
+    targetSelected(t: Target) {
+        this.targetSelectEvent.emit(t);
+    }
+
+}

src/packages/sensor/sensor.module.ts

@@ -1,13 +1,12 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-
+import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module';
 import { COMPONENTS } from './component';
 import { SERVICES } from './service';
 import { SensorStoreModule } from './sensor-store.module';
-import { TreeModule } from 'angular-tree-component';
+// import { MetaCrawlerModule } from '../meta/crawler/crawler.module';
-import { MetaCrawlerModule } from '../meta/crawler/crawler.module';
+// import { MetaSensorDisplayItemModule } from '../meta/sensor-display-item/sensor-display-item.module';
-import { MetaSensorDisplayItemModule } from '../meta/sensor-display-item/sensor-display-item.module';
 // import { SensorItemModule } from '../sensor-item/sensor-item.module';
 // import { MetaCrawlerInputItemModule } from '../meta/crawler-input-item/crawler-input.module';
 
@@ -16,10 +15,10 @@ import { MetaSensorDisplayItemModule } from '../meta/sensor-display-item/sensor-
         CommonModule,
         FormsModule,
         SensorStoreModule,
-        TreeModule,
+        PrimeNGModules,
-        MetaCrawlerModule,
+        // SensorItemModule,
-        MetaSensorDisplayItemModule,
+        // MetaCrawlerModule,
-        // SensorItemModule
+        // MetaSensorDisplayItemModule,
     ],
     declarations: [
         COMPONENTS,