sensor config

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

@@ -20,7 +20,7 @@ export class SensorItemSelectorComponent implements OnInit, OnChanges {
   @Output() itemSelectEvent = new EventEmitter<Set<MetaSensorDisplayItem>>();
   items$ = this.listStore.pipe(select(ReadAllSensorDisplayItemByCrawlerSelector.select('list')));
   nodes;
-  checkedSet: Set<MetaSensorDisplayItem>;
+  checkedSet: Set<MetaSensorDisplayItem> = new Set();
 
   constructor(
     private router: Router,
@@ -28,7 +28,6 @@ export class SensorItemSelectorComponent implements OnInit, OnChanges {
   ) { }
 
   ngOnInit() {
-    this.checkedSet = new Set();
     this.items$.subscribe(
       (list: MetaSensorDisplayItem[]) => {
         if (list !== null) {
@@ -42,6 +41,7 @@ export class SensorItemSelectorComponent implements OnInit, OnChanges {
   }
 
   ngOnChanges() {
+    this.checkedSet.clear();
     this.listStore.dispatch(new ListStore.ReadAllByCrawler(this.selectedCrawler));
   }
 

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

@@ -1,3 +1,32 @@
 <div>
-  result component
+  <mat-grid-list cols="2" rowHeight="5:1">
+
+    <mat-grid-tile [colspan]="1" [rowspan]="2" style="background-color: lightblue">
+      <div>
+        <div>
+          <mat-form-field hintLabel="Max 15 characters">
+            <input matInput #input maxlength="15" placeholder="Sensor Alias">
+            <mat-hint align="end">{{input.value?.length || 0}}/15</mat-hint>
+          </mat-form-field>
+        </div>
+        <div>
+          <div>Interval</div>
+          <mat-radio-group class="radio-group" [(ngModel)]="interval">
+            <mat-radio-button class="radio-button" *ngFor="let interval of intervals" [value]="interval">
+              {{interval}}
+            </mat-radio-button>
+          </mat-radio-group>
+        </div>
+      </div>
+    </mat-grid-tile>
+
+    <mat-grid-tile [colspan]="1" [rowspan]="2" style="background-color: lightcoral">
+      <of-info-table [data]="targetInfo"></of-info-table>
+    </mat-grid-tile>
+
+    <mat-grid-tile [colspan]="2" [rowspan]="3" style="background-color: lightpink">
+        Threshold and noti
+    </mat-grid-tile>
+
+  </mat-grid-list>
 </div>

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

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

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

@@ -1,5 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
 import { Router } from '@angular/router';
+import { MetaCrawler } from '../../../../meta/crawler/model/MetaCrawler';
 
 
 @Component({
@@ -9,8 +10,38 @@ import { Router } from '@angular/router';
 })
 export class SettingETCComponent implements OnInit {
 
+  @Input() selectedTarget;
+  @Input() selectedCrawler: MetaCrawler;
+  @Input() selectedItems;
+
+  intervals = [
+    '600 sec',
+    '400 sec',
+    '200 sec',
+  ];
+
+  targetInfo;
+
   constructor(private router: Router) { }
 
   ngOnInit() {
+    this.targetInfo = [
+      {
+        key: 'IP',
+        value: 'todo',
+      },
+      {
+        key: 'Mac Address',
+        value: 'todo',
+      },
+      {
+        key: 'OS',
+        value: 'todo',
+      },
+      {
+        key: 'Crawler',
+        value: this.selectedCrawler ? this.selectedCrawler.name : '',
+      },
+    ];
   }
 }

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

@@ -22,14 +22,16 @@
   </div>
 
   <div *ngIf="step === 2">
-    <of-sensor-setting-etc></of-sensor-setting-etc>
+    <of-sensor-setting-etc [selectedTarget]="selectedTarget" 
+    [selectedCrawler]="selectedCrawler"
+    [selectedItems]="selectedSensorDisplayItems"></of-sensor-setting-etc>
   </div>
 
   <div fxLayoutAlign="space-between stretch" [style.margin]="'5px'">
     <button mat-raised-button mat-dialog-close *ngIf="step === 1">Cancel</button>
     <button mat-raised-button *ngIf="step === 2" (click)="onPrev()">Prev</button>
 
-    <button mat-raised-button color="primary" (click)="onNext()" *ngIf="step === 1">Next</button>
+    <button mat-raised-button color="primary" (click)="onNext()" *ngIf="step === 1" [disabled]="!nextable">Next</button>
     <button mat-raised-button color="primary" (click)="onDone()" *ngIf="step === 2">Done</button>
   </div>
 </div>

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Inject } from '@angular/core';
+import { Component, OnInit, Input, Inject, DoCheck } from '@angular/core';
 import { Target } from '../../../target/model';
 import { MAT_DIALOG_DATA } from '@angular/material';
 import { Infra } from '../../../infra/model';
@@ -11,12 +11,13 @@ import { MetaSensorDisplayItem } from '../../../meta/sensor-display-item/model/M
   templateUrl: './setting.component.html',
   styleUrls: ['./setting.component.scss']
 })
-export class SettingComponent implements OnInit {
+export class SettingComponent implements OnInit, DoCheck {
 
   selectedTarget: Target = null;
   selectedCrawler: MetaCrawler = null;
   selectedSensorDisplayItems: Set<MetaSensorDisplayItem> = null;
   step = 1;
+  nextable = false;
 
   constructor(
     @Inject(MAT_DIALOG_DATA) public data: any
@@ -29,27 +30,21 @@ export class SettingComponent implements OnInit {
   ngOnInit() {
   }
 
-  onNext() {
-    const valid = this.validateSelection();
-    if (valid !== null) {
-      alert(valid);
-      return;
+  ngDoCheck() {
+    if (
+      this.selectedTarget === null ||
+      this.selectedCrawler === null ||
+      this.selectedSensorDisplayItems === null ||
+      this.selectedSensorDisplayItems.size === 0
+    ) {
+      this.nextable = false;
+    } else {
+      this.nextable = true;
     }
-    this.step += 1;
   }
 
-  validateSelection() {
-    let message = null;
-    if (this.selectedTarget === null) {
-      message = 'Target is not selected.';
-    }
-    if (this.selectedCrawler === null) {
-      message = 'Crawler is not selected.';
-    }
-    if (this.selectedSensorDisplayItems === null || this.selectedSensorDisplayItems.size === 0) {
-      message = 'SensorItem is not selected.';
-    }
-    return message;
+  onNext() {
+    this.step += 1;
   }
 
   onPrev() {
@@ -57,7 +52,7 @@ export class SettingComponent implements OnInit {
   }
 
   onDone() {
-    console.log('finished');
+    // SensorService.registSensorConfig(Sensor sensor, List<SensorItem> sensorItemList, String etcJson)
   }
 
   handleTargetSelection(t: Target) {

src/packages/sensor/sensor.module.ts

@@ -13,6 +13,7 @@ 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';
+import { InfoTableModule } from '../commons/component/info-table/info-table.module';
 
 @NgModule({
   imports: [
@@ -21,6 +22,7 @@ import { MetaSensorDisplayItemModule } from '../meta/sensor-display-item/sensor-
     FormsModule,
     SensorStoreModule,
     TreeModule,
+    InfoTableModule,
     PerfectScrollbarModule,
     MetaCrawlerModule,
     MetaCrawlerInputItemModule,