ing

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

@@ -1,5 +1,5 @@
 SENSOR_DETAIL_COMPONENT
-<!-- <div *ngIf="sensor">
+<div *ngIf="sensor">
     <h1>{{sensor.crawler.name}}</h1>
 
     <div class="ui-g">
@@ -53,4 +53,4 @@ SENSOR_DETAIL_COMPONENT
     </div>
     <p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
 </div>
- -->
+

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

@@ -1,82 +1,83 @@
-import { Component, OnInit, Inject, AfterContentInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, Inject, AfterContentInit, OnDestroy, Input } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+
-import { ConfirmationService } from 'primeng/primeng';
 import { Store, select } from '@ngrx/store';
+
+import { Observable, of, Subscription } from 'rxjs';
+import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
+
+import { ConfirmationService } from 'primeng/primeng';
+
 import { RPCClientError } from '@loafer/ng-rpc';
-// import { sensorSelector } from '../../store';
+
 import { Sensor } from '@overflow/commons-typescript/model/sensor';
-import { Subscription } from 'rxjs/Subscription';
+import { SensorService } from '../service/sensor.service';
 
 @Component({
   selector: 'of-sensor-detail',
   templateUrl: './sensor-detail.component.html',
   providers: [ConfirmationService]
 })
-export class SensorDetailComponent {
+export class SensorDetailComponent implements OnInit, OnDestroy {
+  @Input() sensorID: number;
 
-  // sensorSubscription$: Subscription;
+  sensor: Sensor;
-  // sensor$ = this.detailStore.pipe(select(sensorSelector.select('sensor')));
+  sensorSettingDisplay: boolean;
-  // sensor: Sensor;
-  // sensorSettingDisplay: boolean;
 
-  // constructor(
+  pending$: Observable<boolean>;
-  //   private route: ActivatedRoute,
+  error$: Observable<any>;
-  //   private router: Router,
-  //   private confirmationService: ConfirmationService,
-  //   private detailStore: Store<DetailStore.State>,
-  // ) {
-  //   this.sensorSettingDisplay = false;
-  // }
 
-  // ngOnInit() {
+  constructor(
-  //   this.sensorSubscription$ = this.sensor$.subscribe(
+    private confirmationService: ConfirmationService,
-  //     (sensor: Sensor) => {
+    private store: Store<any>,
-  //       console.log(sensor);
+    private sensorService: SensorService,
-  //       this.sensor = sensor;
+  ) {
-  //     },
+    this.sensorSettingDisplay = false;
-  //     (error: RPCClientError) => {
+  }
-  //       console.log(error.response.message);
-  //     }
-  //   );
-  // }
 
-  // ngAfterContentInit() {
+  ngOnInit() {
-  //   const sensorId = this.route.snapshot.paramMap.get('id');
+    this.sensorService.read(this.sensorID)
-  //   this.detailStore.dispatch(
+      .pipe(
-  //     new DetailStore.Read(
+        tap(() => {
-  //       { id: sensorId }
+          this.pending$ = of(true);
-  //     )
+        }),
-  //   );
+        map((sensor: Sensor) => {
-  // }
+          this.sensor = sensor;
+        }),
+        catchError(error => {
+          this.error$ = of(error);
+          return of();
+        }),
+        tap(() => {
+          this.pending$ = of(false);
+        }),
+    ).take(1).subscribe();
+  }
 
-  // ngOnDestroy() {
+  ngOnDestroy() {
-  //   if (this.sensorSubscription$) {
+  }
-  //     this.sensorSubscription$.unsubscribe();
-  //   }
-  // }
 
-  // onStartOrStop() { }
+  onStartOrStop() { }
 
-  // onEdit() {
+  onEdit() {
-  //   this.sensorSettingDisplay = true;
+    this.sensorSettingDisplay = true;
-  // }
+  }
 
-  // onRemove() {
+  onRemove() {
-  //   this.confirmationService.confirm({
+    this.confirmationService.confirm({
-  //     header: 'Are you sure to remove this Sensor?',
+      header: 'Are you sure to remove this Sensor?',
-  //     icon: 'fa fa-trash',
+      icon: 'fa fa-trash',
-  //     message: 'All the related data will be deleted. ',
+      message: 'All the related data will be deleted. ',
-  //     accept: () => {
+      accept: () => {
-  //       alert('으앙 안돼 지우지마ㅠㅠ');
+        alert('으앙 안돼 지우지마ㅠㅠ');
-  //     },
+      },
-  //     reject: () => {
+      reject: () => {
-  //     }
+      }
-  //   });
+    });
-  // }
+  }
 
-  // onTargetClick(target) {
+  onTargetClick(target) {
-  //   // this.router.navigate(['sensors'], { queryParams: { target: target.id } });
+    // this.router.navigate(['sensors'], { queryParams: { target: target.id } });
-  //   this.router.navigate(['target', target.id, 'info']);
+    // this.router.navigate(['target', target.id, 'info']);
-  // }
+  }
 }
 

@overflow/sensor/service/sensor.service.ts

@@ -39,7 +39,7 @@ export class SensorService {
   //   return this.rpcService.call('SensorService.readAllByTarget', target, pageParams);
   // }
 
-  public read(id: string): Observable<Sensor> {
+  public read(id: number): Observable<Sensor> {
     return this.rpcService.call<Sensor>('SensorService.read', id);
   }
 }

src/app/pages/sensors/sensor/sensor-page.component.html

@@ -1,4 +1,4 @@
 <of-sensor-list *ngIf="containerType === 1" (select)="onSensorSelect($event)" (addSensor)="onAddSensor($event)">
 </of-sensor-list>
-<of-sensor-detail *ngIf="containerType === 2"></of-sensor-detail>
+<of-sensor-detail *ngIf="containerType === 2" [sensorID]="sensorID"></of-sensor-detail>
 <of-sensor-setting *ngIf="containerType === 3"></of-sensor-setting>