sensor config...

src/packages/sensor/component/index.ts

@@ -7,6 +7,7 @@ import { TargetSelectorComponent } from './setting/target-selector/target-select
 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';
 
 export const COMPONENTS = [
   SettingComponent,
@@ -17,5 +18,6 @@ export const COMPONENTS = [
   TargetSelectorComponent,
   CrawlerSelectorComponent,
   CrawlerAuthComponent,
-  SensorItemSelectorComponent
+  SensorItemSelectorComponent,
+  SettingETCComponent
 ];

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

@@ -0,0 +1,3 @@
+<div>
+  result component
+</div>

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingETCComponent } from './setting-etc.component';
+
+describe('SettingETCComponent', () => {
+  let component: SettingETCComponent;
+  let fixture: ComponentFixture<SettingETCComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SettingETCComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SettingETCComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+
+@Component({
+  selector: 'of-sensor-setting-etc',
+  templateUrl: './setting-etc.component.html',
+  styleUrls: ['./setting-etc.component.scss']
+})
+export class SettingETCComponent implements OnInit {
+
+  constructor(private router: Router) { }
+
+  ngOnInit() {
+  }
+}

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

@@ -1,19 +1,35 @@
-<mat-grid-list cols="2" rowHeight="200px">
+<div>
+  <div *ngIf="step === 1">
+    <mat-grid-list cols="2" rowHeight="5:1">
 
-  <mat-grid-tile [colspan]="1" [rowspan]="2" style="background-color: lightblue">
-    <of-target-selector (targetSelectEvent)="handleTargetSelection($event)"></of-target-selector>
-  </mat-grid-tile>
+      <mat-grid-tile [colspan]="1" [rowspan]="3" style="background-color: lightblue">
+        <of-target-selector (targetSelectEvent)="handleTargetSelection($event)"></of-target-selector>
+      </mat-grid-tile>
 
-  <mat-grid-tile [colspan]="1" [rowspan]="1" style="background-color: lightcoral">
-    <of-crawler-auth></of-crawler-auth>
-  </mat-grid-tile>
+      <mat-grid-tile [colspan]="1" [rowspan]="2" style="background-color: lightcoral">
+        <of-crawler-auth></of-crawler-auth>
+      </mat-grid-tile>
 
-  <mat-grid-tile [colspan]="1" [rowspan]="2" style="background-color: lightgrey">
-    <of-sensor-item-selector></of-sensor-item-selector>
-  </mat-grid-tile>
+      <mat-grid-tile [colspan]="1" [rowspan]="3" style="background-color: lightgrey">
+        <of-sensor-item-selector></of-sensor-item-selector>
+      </mat-grid-tile>
 
-  <mat-grid-tile [colspan]="1" [rowspan]="1" style="background-color: lightpink">
-    <of-crawler-selector [selectedTarget]="selectedTarget"></of-crawler-selector>
-  </mat-grid-tile>
+      <mat-grid-tile [colspan]="1" [rowspan]="2" style="background-color: lightpink">
+        <of-crawler-selector [selectedTarget]="selectedTarget"></of-crawler-selector>
+      </mat-grid-tile>
 
-</mat-grid-list>
+    </mat-grid-list>
+  </div>
+
+  <div *ngIf="step === 2">
+    <of-sensor-setting-etc></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)="onDone()" *ngIf="step === 2">Done</button>
+  </div>
+</div>

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

@@ -27,6 +27,14 @@ export class SettingComponent implements OnInit, AfterContentInit {
     this.step += 1;
   }
 
+  onPrev() {
+    this.step -= 1;
+  }
+
+  onDone() {
+    console.log('finished');
+  }
+
   handleTargetSelection(t: Target) {
     this.selectedTarget = t;
   }