member_webapp/src/packages/target/component/detail/detail.component.ts

156 lines
4.1 KiB
TypeScript
Raw Normal View History

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-05-02 08:25:38 +00:00
import { Sensor } from '@overflow/commons-typescript/model/sensor';
import { Infra } from '@overflow/commons-typescript/model/infra';
2018-04-30 08:12:31 +00:00
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 12:04:58 +00:00
import { ModifySelector } from 'packages/target/store';
import * as TargetModifyStore from 'packages/target/store/modify';
2018-05-02 08:25:38 +00:00
import { Target } from '@overflow/commons-typescript/model/target';
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 12:04:58 +00:00
target$ = this.targetModifyStore.pipe(select(ModifySelector.select('target')));
2018-04-30 10:59:32 +00:00
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>,
2018-04-30 12:04:58 +00:00
private sensorListStore: Store<SensorListStore.State>,
private targetModifyStore: Store<TargetModifyStore.State>
2018-04-30 08:12:31 +00:00
) { }
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) {
2018-04-30 12:04:58 +00:00
if (value === this.infra.target.displayName) {
return;
}
const target = this.infra.target;
target.displayName = value;
this.targetModifyStore.dispatch(
new TargetModifyStore.Modify(target)
);
const modifySuccessSubscription$: Subscription = this.target$.subscribe(
(t: Target) => {
if (t) {
}
if (modifySuccessSubscription$) {
modifySuccessSubscription$.unsubscribe();
}
},
(error: RPCClientError) => {
console.log(error);
}
);
2018-04-30 10:59:32 +00:00
}
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
}