ing
This commit is contained in:
59
@overflow/sensor/component/detail/detail.component.html
Normal file
59
@overflow/sensor/component/detail/detail.component.html
Normal file
@@ -0,0 +1,59 @@
|
||||
<div *ngIf="sensor">
|
||||
<h1>{{sensor.crawler.name}}</h1>
|
||||
|
||||
<div class="ui-g">
|
||||
<div class="ui-g-12 ui-md-3">
|
||||
<div *ngIf="sensor.status.name === 'RUNNING' ; else STOPPED">
|
||||
<div class="ui-messages ui-widget ui-corner-all ui-messages-success" style="display: block">
|
||||
<span class="ui-messages-icon fa fa-fw fa-2x fa-check"></span>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="ui-messages-summary" style="font-size:16px">RUNNING</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<ng-template #STOPPED>
|
||||
<div class="ui-messages ui-widget ui-corner-all ui-messages-error" style="display: block">
|
||||
<span class="ui-messages-icon fa fa-fw fa-2x fa-warning"></span>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="ui-messages-summary" style="font-size:16px">STOPPED</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
|
||||
<div class="ui-g-12 ui-md-9" dir="rtl" style="margin-top: 20px">
|
||||
<button class="ui-button-danger ui-button-width-fit" type="button" label="Remove" icon="ui-icon-close" pButton (click)="onRemove()"></button>
|
||||
<button class="ui-button-width-fit" type="button" label="Edit" pButton (click)="onEdit()"></button>
|
||||
<button class="ui-button-width-fit" type="button" label="Start/Stop" pButton (click)="onStartOrStop()"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui-g ui-top-space--0-5em">
|
||||
<div class="ui-g-12 ui-md-3">
|
||||
<p-panel [showHeader]="false">
|
||||
<div class="ui-g form-group ui-key-value">
|
||||
<of-key-value [key]="'ID'" [value]="sensor.id"></of-key-value>
|
||||
<of-key-value [key]="'Location'" [value]="sensor.target.displayName" [clickable]="true" (click)="onTargetClick(sensor.target)"></of-key-value>
|
||||
<of-key-value [key]="'Description'" [value]="sensor.description"></of-key-value>
|
||||
<of-key-value [key]="'Crawler Type'" [value]="sensor.crawler.name"></of-key-value>
|
||||
<of-key-value [key]="'Sensor Items'" [value]="sensor.itemCount"></of-key-value>
|
||||
<of-key-value [key]="'Created at'" [value]="sensor.createDate | date: 'dd/MM/yyyy'"></of-key-value>
|
||||
</div>
|
||||
</p-panel>
|
||||
</div>
|
||||
|
||||
<div class="ui-g-12 ui-md-9">
|
||||
<of-sensor-item-list></of-sensor-item-list>
|
||||
</div>
|
||||
</div>
|
||||
<p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
|
||||
</div>
|
||||
|
||||
|
||||
<p-dialog [modal]="true" [width]="800" [(visible)]="sensorSettingDisplay" [showHeader]="true" [closeOnEscape]="false">
|
||||
<of-sensor-setting [visible]="sensorSettingDisplay" (close)="onSensorSettingClose()"></of-sensor-setting>
|
||||
</p-dialog>
|
||||
25
@overflow/sensor/component/detail/detail.component.spec.ts
Normal file
25
@overflow/sensor/component/detail/detail.component.spec.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { DetailComponent } from './detail.component';
|
||||
|
||||
describe('DetailComponent', () => {
|
||||
let component: DetailComponent;
|
||||
let fixture: ComponentFixture<DetailComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ DetailComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DetailComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
83
@overflow/sensor/component/detail/detail.component.ts
Normal file
83
@overflow/sensor/component/detail/detail.component.ts
Normal file
@@ -0,0 +1,83 @@
|
||||
import { Component, OnInit, Inject, AfterContentInit, OnDestroy } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { ConfirmationService } from 'primeng/primeng';
|
||||
import { Store, select } from '@ngrx/store';
|
||||
import { RPCClientError } from '@loafer/ng-rpc';
|
||||
import * as DetailStore from '../../store/detail';
|
||||
import { sensorSelector } from '../../store';
|
||||
import { Sensor } from '@overflow/commons-typescript/model/sensor';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
|
||||
@Component({
|
||||
selector: 'of-sensor-detail',
|
||||
templateUrl: './detail.component.html',
|
||||
providers: [ConfirmationService]
|
||||
})
|
||||
export class DetailComponent implements OnInit, AfterContentInit, OnDestroy {
|
||||
|
||||
sensorSubscription$: Subscription;
|
||||
sensor$ = this.detailStore.pipe(select(sensorSelector.select('sensor')));
|
||||
sensor: Sensor;
|
||||
sensorSettingDisplay: boolean;
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private confirmationService: ConfirmationService,
|
||||
private detailStore: Store<DetailStore.State>,
|
||||
) {
|
||||
this.sensorSettingDisplay = false;
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.sensorSubscription$ = this.sensor$.subscribe(
|
||||
(sensor: Sensor) => {
|
||||
console.log(sensor);
|
||||
this.sensor = sensor;
|
||||
},
|
||||
(error: RPCClientError) => {
|
||||
console.log(error.response.message);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
ngAfterContentInit() {
|
||||
const sensorId = this.route.snapshot.paramMap.get('id');
|
||||
this.detailStore.dispatch(
|
||||
new DetailStore.Read(
|
||||
{ id: sensorId }
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.sensorSubscription$) {
|
||||
this.sensorSubscription$.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
onStartOrStop() { }
|
||||
|
||||
onEdit() {
|
||||
this.sensorSettingDisplay = true;
|
||||
}
|
||||
|
||||
onRemove() {
|
||||
this.confirmationService.confirm({
|
||||
header: 'Are you sure to remove this Sensor?',
|
||||
icon: 'fa fa-trash',
|
||||
message: 'All the related data will be deleted. ',
|
||||
accept: () => {
|
||||
alert('으앙 안돼 지우지마ㅠㅠ');
|
||||
},
|
||||
reject: () => {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onTargetClick(target) {
|
||||
// this.router.navigate(['sensors'], { queryParams: { target: target.id } });
|
||||
this.router.navigate(['target', target.id, 'info']);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user