ing

@overflow/meta/component/index.ts

@@ -1,3 +1,7 @@
-export const COMPONENTS = [
+import { MetaCrawlerInputItemComponent } from './meta-crawler-input-item.component';
+import { MetaCrawlerComponent } from './meta-crawler.component';
 
+export const COMPONENTS = [
+  MetaCrawlerInputItemComponent,
+  MetaCrawlerComponent,
 ];

@overflow/meta/component/meta-crawler-input-item.component.html

@@ -0,0 +1,17 @@
+<p-panel [showHeader]="false">
+  <div *ngIf="metaCrawlerInputItems; else info" class="ui-g ui-width-100-" style="height: 180px; overflow: auto">
+    <div class="ui-g-12" *ngFor="let metaCrawlerInputItem of metaCrawlerInputItems">
+      <span class="md-inputfield">
+        <input id="name" type="text" value="{{metaCrawlerInputItem.defaultValue}}" pInputText />
+        <label for="name">{{metaCrawlerInputItem.name}}</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/meta/component/meta-crawler-input-item.component.spec.ts

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

@overflow/meta/component/meta-crawler-input-item.component.ts

@@ -0,0 +1,105 @@
+import { Component, OnInit, Input, OnChanges, Output, EventEmitter } from '@angular/core';
+import { Store, select } from '@ngrx/store';
+
+import { Observable, of, Subscription } from 'rxjs';
+import { catchError, exhaustMap, map, tap, take } from 'rxjs/operators';
+
+import { RPCClientError } from '@loafer/ng-rpc';
+
+import { MetaCrawlerInputItem } from '@overflow/commons-typescript/model/meta';
+import { MetaCrawler } from '@overflow/commons-typescript/model/meta';
+import { MetaCrawlerInputItemService } from '../service/meta-crawler-input-item.service';
+
+
+@Component({
+  selector: 'of-meta-crawler-input-item',
+  templateUrl: './meta-crawler-input-item.component.html',
+})
+export class MetaCrawlerInputItemComponent implements OnInit, OnChanges {
+  @Input() metaCrawler: MetaCrawler;
+  @Output() credentialPassed = new EventEmitter<boolean>();
+
+
+  pending$: Observable<boolean>;
+  error$: Observable<any>;
+
+  metaCrawlerInputItems: MetaCrawlerInputItem[];
+  title: string;
+
+
+  constructor(
+    private store: Store<any>,
+    private metaCrawlerInputItemService: MetaCrawlerInputItemService
+  ) { }
+
+  ngOnInit() {
+  }
+
+  ngOnChanges() {
+    // this.getCrawlerAuthInputItems();
+    this.title = '3. Credentials';
+
+    // Temporary data
+    if (null == this.metaCrawler) {
+      return;
+    }
+    // this.title += ' for ' + this.metaCrawler.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);
+    // }
+
+    this.metaCrawlerInputItemService.readAllByMetaCrawler(this.metaCrawler)
+      .pipe(
+        tap(() => {
+          this.pending$ = of(true);
+        }),
+        map((metaCrawlerInputItems: MetaCrawlerInputItem[]) => {
+          this.metaCrawlerInputItems = metaCrawlerInputItems;
+        }),
+        catchError(error => {
+          this.error$ = of(error);
+          return of();
+        }),
+        tap(() => {
+          this.pending$ = of(false);
+        }),
+        take(1),
+    ).subscribe();
+
+  }
+
+  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);
+  }
+}

@overflow/meta/component/meta-crawler.component.html

@@ -0,0 +1,16 @@
+<div *ngIf="metaCrawlers; else info" class="ui-width-100-">
+  <p-orderList [value]="metaCrawlers" metaKeySelection="false" [listStyle]="{'height':'200px'}" [responsive]="true"  filterBy="name"
+    (onSelectionChange)="selected.emit($event.value[0])" class="ui_orderlist_controls_none">
+    <ng-template let-crawler pTemplate="item">
+      <div class="ui-helper-clearfix">
+        <div style="font-size:14px;margin:0">{{crawler.name}}</div>
+      </div>
+    </ng-template>
+  </p-orderList>
+</div>
+
+<ng-template #info>
+  <p-panel [showHeader]="false">
+    <div>개발자의 배려가 돋보이는 친절한 안내 메시지</div>
+  </p-panel>
+</ng-template>

@overflow/meta/component/meta-crawler.component.spec.ts

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

@overflow/meta/component/meta-crawler.component.ts

@@ -0,0 +1,49 @@
+import { Component, OnInit, Input, OnChanges, Output, EventEmitter } from '@angular/core';
+import { Store, select } from '@ngrx/store';
+import { Observable, of, Subscription } from 'rxjs';
+import { catchError, exhaustMap, map, tap, take } from 'rxjs/operators';
+
+import { RPCClientError } from '@loafer/ng-rpc';
+
+import { Target } from '@overflow/commons-typescript/model/target';
+import { MetaCrawler } from '@overflow/commons-typescript/model/meta';
+import { MetaCrawlerService } from '../service/meta-crawler.service';
+
+
+@Component({
+  selector: 'of-meta-crawler',
+  templateUrl: './meta-crawler.component.html',
+})
+export class MetaCrawlerComponent implements OnInit {
+  @Input() target: Target;
+  @Output() selected = new EventEmitter<MetaCrawler>();
+
+  metaCrawlers: MetaCrawler[];
+  pending$: Observable<boolean>;
+  error$: Observable<any>;
+
+  constructor(
+    private metaCrawlerService: MetaCrawlerService,
+  ) { }
+
+  ngOnInit() {
+    this.metaCrawlerService.readAll()
+      .pipe(
+        tap(() => {
+          this.pending$ = of(true);
+        }),
+        map((metaCrawlers: MetaCrawler[]) => {
+          this.metaCrawlers = metaCrawlers;
+        }),
+        catchError(error => {
+          this.error$ = of(error);
+          return of();
+        }),
+        tap(() => {
+          this.pending$ = of(false);
+        }),
+        take(1),
+    ).subscribe();
+  }
+
+}

@overflow/sensor/component/sensor-detail.component.ts

@@ -12,6 +12,7 @@ import { RPCClientError } from '@loafer/ng-rpc';
 import { Sensor } from '@overflow/commons-typescript/model/sensor';
 import { SensorService } from '../service/sensor.service';
 import { Target } from '@overflow/commons-typescript/model/target';
+import { MetaCrawler } from '@overflow/commons-typescript/model/meta';
 
 @Component({
   selector: 'of-sensor-detail',
@@ -28,6 +29,8 @@ export class SensorDetailComponent implements OnInit, OnDestroy {
   pending$: Observable<boolean>;
   error$: Observable<any>;
 
+  metaCrawler: MetaCrawler;
+
   constructor(
     private confirmationService: ConfirmationService,
     private store: Store<any>,
@@ -37,6 +40,8 @@ export class SensorDetailComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
+    if (0 < this.sensorID) {
+      // get sensor
       this.sensorService.read(this.sensorID)
         .pipe(
           tap(() => {
@@ -54,6 +59,11 @@ export class SensorDetailComponent implements OnInit, OnDestroy {
           }),
           take(1),
       ).subscribe();
+
+    } else {
+      // new sensor
+      this.sensor = {};
+    }
   }
 
   ngOnDestroy() {
@@ -77,5 +87,9 @@ export class SensorDetailComponent implements OnInit, OnDestroy {
       }
     });
   }
+
+  onMetaCrawlerSelected(metaCrawler: MetaCrawler) {
+    this.metaCrawler = metaCrawler;
+  }
 }
 

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

@@ -4,8 +4,6 @@ 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';
 
 
@@ -15,7 +13,7 @@ import { MetaCrawlerInputItem } from '@overflow/commons-typescript/model/meta';
 })
 export class CrawlerAuthComponent implements OnInit, OnChanges {
 
-  inputItems$ = this.listStore.pipe(select(ReadCrawlerInputItemSelector.select('inputs')));
+  inputItems$;
   inputItems: MetaCrawlerInputItem[];
   title: string;
 
@@ -24,7 +22,7 @@ export class CrawlerAuthComponent implements OnInit, OnChanges {
 
   constructor(
     private router: Router,
-    private listStore: Store<ListStore.State>,
+    private store: Store<any>,
   ) { }
 
   ngOnInit() {
@@ -77,7 +75,7 @@ export class CrawlerAuthComponent implements OnInit, OnChanges {
   }
 
   getCrawlerAuthInputItems() {
-    this.listStore.dispatch(new ListStore.ReadAll(this.crawler));
+    // this.listStore.dispatch(new ListStore.ReadAll(this.crawler));
   }
 
   testCredentials() {

@overflow/sensor/sensor.module.ts

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 
 import { UIModule } from '@overflow/shared/ui/ui.module';
+import { MetaModule } from '@overflow/meta/meta.module';
 
 import { COMPONENTS } from './component';
 import { SERVICES } from './service';
@@ -13,6 +14,7 @@ import { SensorItemModule } from '../sensor-item/sensor-item.module';
         CommonModule,
         FormsModule,
         UIModule,
+        MetaModule,
         SensorItemModule,
     ],
     declarations: [

package.json

@@ -37,7 +37,7 @@
     "@ngrx/router-store": "^5.2.0",
     "@ngrx/store": "^5.2.0",
     "@ngrx/store-devtools": "^5.2.0",
-    "@overflow/commons-typescript": "^0.0.7",
+    "@overflow/commons-typescript": "^0.0.8",
     "angular-google-recaptcha": "^1.0.3",
     "angular-l10n": "^5.0.0",
     "angularx-qrcode": "^1.1.7",