sensor config..

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

@@ -7,7 +7,13 @@
 
     <mat-card-content>
       <perfect-scrollbar style="height: 150px">
-        크롤러 골라야됨
+
+        <mat-radio-group class="radio-group">
+          <mat-radio-button class="radio-button" *ngFor="let crawler of crawlers" value={{crawler.id}} (change)="crawlerSelected(crawler)">
+            {{crawler.name}}
+          </mat-radio-button>
+        </mat-radio-group>
+     
       </perfect-scrollbar>
     </mat-card-content>
   </mat-card>

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

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

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

@@ -1,5 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input, OnChanges } from '@angular/core';
 import { Router } from '@angular/router';
+import { Target } from 'packages/target/model';
+import { MetaCrawler } from '../../../../meta/model';
 
 
 @Component({
@@ -7,10 +9,33 @@ import { Router } from '@angular/router';
   templateUrl: './crawler-selector.component.html',
   styleUrls: ['./crawler-selector.component.scss']
 })
-export class CrawlerSelectorComponent implements OnInit {
+export class CrawlerSelectorComponent implements OnInit, OnChanges {
 
-  constructor(private router: Router) { }
+  @Input() selectedTarget: Target;
+  crawlers: MetaCrawler[];
+
+  constructor(private router: Router) {
+  }
 
   ngOnInit() {
   }
+
+  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);
+    }
+  }
+
+  crawlerSelected(crawler: MetaCrawler) {
+    // console.log(crawler);
+  }
 }

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

@@ -1,7 +1,7 @@
 <mat-grid-list cols="2" rowHeight="200px">
 
   <mat-grid-tile [colspan]="1" [rowspan]="2" style="background-color: lightblue">
-    <of-target-selector></of-target-selector>
+    <of-target-selector (targetSelectEvent)="handleTargetSelection($event)"></of-target-selector>
   </mat-grid-tile>
 
   <mat-grid-tile [colspan]="1" [rowspan]="1" style="background-color: lightcoral">
@@ -13,7 +13,7 @@
   </mat-grid-tile>
 
   <mat-grid-tile [colspan]="1" [rowspan]="1" style="background-color: lightpink">
-    <of-crawler-selector></of-crawler-selector>
+    <of-crawler-selector [selectedTarget]="selectedTarget"></of-crawler-selector>
   </mat-grid-tile>
 
 </mat-grid-list>

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

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { AfterContentInit } from '@angular/core/src/metadata/lifecycle_hooks';
+import { Target } from '../../../target/model';
 
 
 @Component({
@@ -9,6 +10,7 @@ import { AfterContentInit } from '@angular/core/src/metadata/lifecycle_hooks';
 })
 export class SettingComponent implements OnInit, AfterContentInit {
 
+  selectedTarget: Target = null;
   step = 1;
 
   constructor() { }
@@ -24,4 +26,8 @@ export class SettingComponent implements OnInit, AfterContentInit {
   onNext() {
     this.step += 1;
   }
+
+  handleTargetSelection(t: Target) {
+    this.selectedTarget = t;
+  }
 }

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

@@ -1,4 +1,4 @@
-<div>
+<div style="width:100%">
   <mat-card>
     <mat-card-header>
       <mat-card-title>Step 1</mat-card-title>
@@ -8,11 +8,11 @@
     <mat-card-content>
       <perfect-scrollbar style="height: 150px">
 
-          <mat-selection-list>
+        <mat-radio-group class="radio-group" >
-              <mat-list-option *ngFor="let target of targets">
+          <mat-radio-button class="radio-button" *ngFor="let target of targets" value={{target.id}} (change)="targetSelected(target)">
-                {{target.name}}
+            {{target.displayName}}
-              </mat-list-option>
+          </mat-radio-button>
-            </mat-selection-list>
+        </mat-radio-group>
 
       </perfect-scrollbar>
     </mat-card-content>

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

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

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

@@ -1,5 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
 import { Router } from '@angular/router';
+import { MatRadioButton } from '@angular/material';
+import { Target } from 'packages/target/model';
 
 
 @Component({
@@ -9,25 +11,23 @@ import { Router } from '@angular/router';
 })
 export class TargetSelectorComponent implements OnInit {
 
-  targets = [
+  @Output() targetSelectEvent = new EventEmitter<Target>();
-    {
+  targets: Target[] = null;
-      'name': 'Target1'
+
-    },
-    {
-      'name': 'Target2'
-    },
-    {
-      'name': 'Target3'
-    },
-    {
-      'name': 'Target4'
-    },
-    {
-      'name': 'Target5'
-    },
-  ];
   constructor(private router: Router) { }
 
   ngOnInit() {
+    this.targets = new Array();
+    for (let i = 0; i < 10; i++) {
+      const t: Target = {
+        id: i,
+        displayName: 'Target' + i,
+      };
+      this.targets.push(t);
+    }
+  }
+
+  targetSelected(t: Target) {
+    this.targetSelectEvent.emit(t);
   }
 }