2018-04-30 08:12:31 +00:00
|
|
|
import { Component, ViewChild, OnInit, Input, AfterContentInit, OnDestroy } from '@angular/core';
|
|
|
|
import { Router, ActivatedRoute } from '@angular/router';
|
2018-04-16 08:28:39 +00:00
|
|
|
import { Sensor } from 'packages/sensor/model';
|
2018-04-30 08:12:31 +00:00
|
|
|
import { Infra } from 'packages/infra/model';
|
|
|
|
import { Store, select } from '@ngrx/store';
|
|
|
|
import { DetailSelector as InfraDetailSelector } from 'packages/infra/store';
|
|
|
|
import * as InfraDetailStore from 'packages/infra/store/detail';
|
|
|
|
import { Subscription } from 'rxjs/Subscription';
|
|
|
|
import { RPCClientError } from '@loafer/ng-rpc/protocol';
|
|
|
|
import { sensorListSelector } from 'packages/sensor/store';
|
|
|
|
import * as SensorListStore from 'packages/sensor/store/list';
|
2018-04-30 08:53:15 +00:00
|
|
|
import { PageParams, Page } from 'app/commons/model';
|
2018-04-30 10:59:32 +00:00
|
|
|
// import { target } from 'packages/target/store';
|
|
|
|
// import * as SensorListStore from 'packages/sensor/store/list';
|
2018-04-30 08:12:31 +00:00
|
|
|
|
2018-04-06 11:02:18 +00:00
|
|
|
|
2018-04-16 08:28:39 +00:00
|
|
|
@Component({
|
|
|
|
selector: 'of-target-detail',
|
|
|
|
templateUrl: './detail.component.html',
|
|
|
|
})
|
2018-04-30 08:12:31 +00:00
|
|
|
export class DetailComponent implements OnInit, AfterContentInit, OnDestroy {
|
2018-04-06 11:02:18 +00:00
|
|
|
|
2018-04-30 08:12:31 +00:00
|
|
|
infraSubscription$: Subscription;
|
|
|
|
infra$ = this.infraDetailStore.pipe(select(InfraDetailSelector.select('infra')));
|
|
|
|
sensorsSubscription$: Subscription;
|
|
|
|
sensors$ = this.sensorListStore.pipe(select(sensorListSelector.select('page')));
|
|
|
|
|
2018-04-30 10:59:32 +00:00
|
|
|
targetSubscription$: Subscription;
|
|
|
|
|
2018-04-30 08:53:15 +00:00
|
|
|
infraId = null;
|
2018-04-30 08:12:31 +00:00
|
|
|
infra: Infra;
|
2018-04-30 08:53:15 +00:00
|
|
|
sensors: Sensor[];
|
|
|
|
sensorsCount = 0;
|
2018-04-30 08:12:31 +00:00
|
|
|
sensorSettingDisplay = false;
|
|
|
|
|
2018-04-30 08:53:15 +00:00
|
|
|
pageSize = '10';
|
|
|
|
totalLength = 0;
|
|
|
|
currPage = 0;
|
|
|
|
|
2018-04-30 08:12:31 +00:00
|
|
|
constructor(
|
|
|
|
private router: Router,
|
|
|
|
private route: ActivatedRoute,
|
|
|
|
private infraDetailStore: Store<InfraDetailStore.State>,
|
|
|
|
private sensorListStore: Store<SensorListStore.State>
|
|
|
|
) { }
|
2018-04-06 11:02:18 +00:00
|
|
|
|
2018-04-16 08:28:39 +00:00
|
|
|
ngOnInit() {
|
2018-04-30 08:12:31 +00:00
|
|
|
this.infraSubscription$ = this.infra$.subscribe(
|
|
|
|
(infra: Infra) => {
|
|
|
|
this.infra = infra;
|
|
|
|
},
|
|
|
|
(error: RPCClientError) => {
|
|
|
|
console.log(error.response.message);
|
|
|
|
}
|
|
|
|
);
|
2018-04-30 08:53:15 +00:00
|
|
|
this.sensorsSubscription$ = this.sensors$.subscribe(
|
|
|
|
(page: Page) => {
|
|
|
|
if (page) {
|
|
|
|
this.sensorsCount = page.totalElements;
|
|
|
|
this.sensors = page.content;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
(error: RPCClientError) => {
|
|
|
|
console.log(error.response.message);
|
|
|
|
}
|
|
|
|
);
|
2018-04-16 08:28:39 +00:00
|
|
|
}
|
2018-04-06 11:02:18 +00:00
|
|
|
|
2018-04-16 08:28:39 +00:00
|
|
|
ngAfterContentInit() {
|
2018-04-30 08:53:15 +00:00
|
|
|
this.infraId = this.route.snapshot.paramMap.get('id');
|
|
|
|
this.getInfra();
|
|
|
|
this.getSensors(this.currPage);
|
2018-04-16 08:28:39 +00:00
|
|
|
}
|
2018-04-06 11:02:18 +00:00
|
|
|
|
2018-04-30 08:12:31 +00:00
|
|
|
ngOnDestroy() {
|
|
|
|
if (this.infraSubscription$) {
|
|
|
|
this.infraSubscription$.unsubscribe();
|
|
|
|
}
|
2018-04-16 08:28:39 +00:00
|
|
|
}
|
2018-04-06 11:02:18 +00:00
|
|
|
|
2018-04-30 08:53:15 +00:00
|
|
|
getInfra() {
|
|
|
|
this.infraDetailStore.dispatch(
|
|
|
|
new InfraDetailStore.Read(
|
|
|
|
{ id: this.infraId }
|
|
|
|
)
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
getSensors(pageIndex) {
|
|
|
|
const pageParams: PageParams = {
|
|
|
|
pageNo: pageIndex + '',
|
|
|
|
countPerPage: this.pageSize,
|
|
|
|
sortCol: 'id',
|
|
|
|
sortDirection: 'descending'
|
|
|
|
};
|
|
|
|
this.sensorListStore.dispatch(
|
|
|
|
new SensorListStore.ReadAllByInfra(
|
|
|
|
{ id: this.infraId, pageParams: pageParams }
|
|
|
|
)
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2018-04-30 08:12:31 +00:00
|
|
|
onAddSensor() {
|
|
|
|
this.sensorSettingDisplay = true;
|
2018-04-16 08:28:39 +00:00
|
|
|
}
|
2018-04-06 11:02:18 +00:00
|
|
|
|
2018-04-30 08:12:31 +00:00
|
|
|
onSensorSettingClose() {
|
|
|
|
this.sensorSettingDisplay = false;
|
2018-04-16 08:28:39 +00:00
|
|
|
}
|
2018-04-30 08:12:31 +00:00
|
|
|
|
2018-04-30 08:53:15 +00:00
|
|
|
onPaging(e) {
|
|
|
|
this.getSensors(e.page);
|
2018-04-30 10:59:32 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
onRowSelect(event) {
|
|
|
|
this.router.navigate(['sensor', event.data.id, 'info']);
|
|
|
|
}
|
|
|
|
|
|
|
|
onTraceroute() {
|
|
|
|
alert('지원 예정');
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
onDisplayNameChange(value: string) {
|
|
|
|
console.log(value);
|
|
|
|
// if (value === this.probe.displayName) {
|
|
|
|
// return;
|
|
|
|
// }
|
|
|
|
// this.probe.displayName = value;
|
|
|
|
// this.modifyStore.dispatch(
|
|
|
|
// new ModifyStore.Modify(this.probe)
|
|
|
|
// );
|
|
|
|
|
|
|
|
// const modifySuccessSubscription$: Subscription = this.modifySuccess$.subscribe(
|
|
|
|
// (probe: Probe) => {
|
|
|
|
// if (probe) {
|
|
|
|
// this.msgs = [];
|
|
|
|
// this.msgs.push({ severity: 'success', summary: 'Succeed', detail: 'Probe name has changed.' });
|
|
|
|
// }
|
|
|
|
// if (modifySuccessSubscription$) {
|
|
|
|
// modifySuccessSubscription$.unsubscribe();
|
|
|
|
// }
|
|
|
|
// },
|
|
|
|
// (error: RPCClientError) => {
|
|
|
|
// console.log(error.response.message);
|
|
|
|
// }
|
|
|
|
// );
|
|
|
|
}
|
|
|
|
|
|
|
|
onDisplayNameChangeKeypress(event, value) {
|
|
|
|
if (event.key === 'Enter') {
|
|
|
|
this.onDisplayNameChange(value);
|
|
|
|
}
|
|
|
|
}
|
2018-04-30 08:53:15 +00:00
|
|
|
|
2018-04-16 08:28:39 +00:00
|
|
|
}
|