ing

@overflow/sensor/component/setting/crawler-auth/crawler-auth.component.html

@@ -0,0 +1,17 @@
+<p-panel [showHeader]="false">
+  <div *ngIf="crawler; else info" class="ui-g ui-width-100-" style="height: 180px; overflow: auto">
+    <div class="ui-g-12" *ngFor="let item of inputItems">
+      <span class="md-inputfield">
+        <input id="name" type="text" pInputText />
+        <label for="name">User</label>
+      </span>
+    </div>
+  </div>
+  
+  <ng-template #info>
+    <div>개발자의 배려가 돋보이는 친절한 안내 메시지</div>
+  </ng-template>
+  <div dir="rtl">
+    <button *ngIf="crawler" type="button" label="Test" icon="ui-icon-send" pButton class="ui-button-width-fit" (click)="testCredentials()"></button>
+  </div>
+</p-panel>

@overflow/sensor/component/setting/crawler-auth/crawler-auth.component.spec.ts

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

@overflow/sensor/component/setting/crawler-auth/crawler-auth.component.ts

@@ -0,0 +1,96 @@
+import { Component, OnInit, Input, OnChanges, Output, EventEmitter } from '@angular/core';
+import { Router } from '@angular/router';
+import { MetaCrawler } from '@overflow/commons-typescript/model/meta';
+
+import { Store, select } from '@ngrx/store';
+import { RPCClientError } from '@loafer/ng-rpc';
+import * as ListStore from '@overflow/meta/crawler-input-item/store/list';
+import { ReadCrawlerInputItemSelector } from '@overflow/meta/crawler-input-item/store';
+import { MetaCrawlerInputItem } from '@overflow/commons-typescript/model/meta';
+
+
+@Component({
+  selector: 'of-crawler-auth',
+  templateUrl: './crawler-auth.component.html',
+})
+export class CrawlerAuthComponent implements OnInit, OnChanges {
+
+  inputItems$ = this.listStore.pipe(select(ReadCrawlerInputItemSelector.select('inputs')));
+  inputItems: MetaCrawlerInputItem[];
+  title: string;
+
+  @Output() credentialPassed = new EventEmitter<boolean>();
+  @Input() crawler: MetaCrawler;
+
+  constructor(
+    private router: Router,
+    private listStore: Store<ListStore.State>,
+  ) { }
+
+  ngOnInit() {
+    // this.inputItems$.subscribe(
+    //   (list: MetaCrawlerInputItem[]) => {
+    //     if (list !== null) {
+    //       if (this.inputItems !== list) {
+    //         this.testPassEvent.emit(false);
+    //       }
+    //       this.inputItems = list;
+    //     }
+    //   },
+    //   (error: RPCClientError) => {
+    //     console.log(error.response.message);
+    //   }
+    // );
+  }
+
+  ngOnChanges() {
+    // this.getCrawlerAuthInputItems();
+    this.title = '3. Credentials';
+
+    this.inputItems = [];
+    // Temporary data
+    if (null == this.crawler) {
+      return;
+    }
+    this.title += ' for ' + this.crawler.name;
+    for (let i = 0; i < 10; i++) {
+      const item: MetaCrawlerInputItem = {
+        id: i,
+        // inputType: {
+        //   id: i,
+        //   name:  '',
+        //   description: '',
+        // },
+        crawler: null,
+        description: '',
+        name: '',
+        createDate: new Date(),
+        required: true,
+        defaultValue: '',
+        pattern: '',
+        keyName: '',
+        keyValue: '',
+      };
+      this.inputItems.push(item);
+    }
+
+  }
+
+  getCrawlerAuthInputItems() {
+    this.listStore.dispatch(new ListStore.ReadAll(this.crawler));
+  }
+
+  testCredentials() {
+    // switch (this.crawler.id) {
+    //   case 1:
+    //     break;
+    //   case 2:
+    //     break;
+    //   case 3:
+    //     break;
+    //   default :
+    //     break;
+    // }
+    this.credentialPassed.emit(true);
+  }
+}