From 890fcffd5efd470c9db61fe52491534edc226b2a Mon Sep 17 00:00:00 2001
From: insanity <insanity@loafle.com>
Date: Mon, 19 Mar 2018 20:14:51 +0900
Subject: [PATCH] sensor config..

---
 .../crawler-selector.component.html           |  8 ++++-
 .../crawler-selector.component.scss           |  8 +++++
 .../crawler-selector.component.ts             | 31 ++++++++++++++--
 .../component/setting/setting.component.html  |  4 +--
 .../component/setting/setting.component.ts    |  6 ++++
 .../target-selector.component.html            | 12 +++----
 .../target-selector.component.scss            |  8 +++++
 .../target-selector.component.ts              | 36 +++++++++----------
 8 files changed, 83 insertions(+), 30 deletions(-)

diff --git a/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.html b/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.html
index ad139e4..f836d19 100644
--- a/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.html
+++ b/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>
diff --git a/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.scss b/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.scss
index e69de29..5503c56 100644
--- a/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.scss
+++ b/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;
+}
diff --git a/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.ts b/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.ts
index 9e9b028..e166f47 100644
--- a/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.ts
+++ b/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);
+  }
 }
diff --git a/src/packages/sensor/component/setting/setting.component.html b/src/packages/sensor/component/setting/setting.component.html
index d0fccb0..1fccd63 100644
--- a/src/packages/sensor/component/setting/setting.component.html
+++ b/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>
\ No newline at end of file
diff --git a/src/packages/sensor/component/setting/setting.component.ts b/src/packages/sensor/component/setting/setting.component.ts
index 59a8fec..25d3a5e 100644
--- a/src/packages/sensor/component/setting/setting.component.ts
+++ b/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;
+  }
 }
diff --git a/src/packages/sensor/component/setting/target-selector/target-selector.component.html b/src/packages/sensor/component/setting/target-selector/target-selector.component.html
index 6bc0369..715f8c8 100644
--- a/src/packages/sensor/component/setting/target-selector/target-selector.component.html
+++ b/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-list-option *ngFor="let target of targets">
-                {{target.name}}
-              </mat-list-option>
-            </mat-selection-list>
+        <mat-radio-group class="radio-group" >
+          <mat-radio-button class="radio-button" *ngFor="let target of targets" value={{target.id}} (change)="targetSelected(target)">
+            {{target.displayName}}
+          </mat-radio-button>
+        </mat-radio-group>
 
       </perfect-scrollbar>
     </mat-card-content>
diff --git a/src/packages/sensor/component/setting/target-selector/target-selector.component.scss b/src/packages/sensor/component/setting/target-selector/target-selector.component.scss
index e69de29..5503c56 100644
--- a/src/packages/sensor/component/setting/target-selector/target-selector.component.scss
+++ b/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;
+}
diff --git a/src/packages/sensor/component/setting/target-selector/target-selector.component.ts b/src/packages/sensor/component/setting/target-selector/target-selector.component.ts
index 3cb7fd7..3ffbe97 100644
--- a/src/packages/sensor/component/setting/target-selector/target-selector.component.ts
+++ b/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 = [
-    {
-      'name': 'Target1'
-    },
-    {
-      'name': 'Target2'
-    },
-    {
-      'name': 'Target3'
-    },
-    {
-      'name': 'Target4'
-    },
-    {
-      'name': 'Target5'
-    },
-  ];
+  @Output() targetSelectEvent = new EventEmitter<Target>();
+  targets: Target[] = null;
+
   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);
   }
 }