sensor list complete

This commit is contained in:
insanity 2018-05-27 23:17:07 +09:00
parent 3c4dbb64df
commit 1df1e0bb55
28 changed files with 463 additions and 261 deletions

View File

@ -14,7 +14,7 @@ import { Infra, InfraHost, InfraService } from '@overflow/commons-typescript/mod
import { Domain } from '@overflow/commons-typescript/model/domain'; import { Domain } from '@overflow/commons-typescript/model/domain';
import { AuthSelector } from '@overflow/member/store'; import { AuthSelector } from '@overflow/member/store';
import { sensorListSelector } from '@overflow/sensor/store'; // import { sensorListSelector } from '@overflow/sensor/store';
import * as SensorListStore from '@overflow/sensor/store/list'; import * as SensorListStore from '@overflow/sensor/store/list';
import { Sensor } from '@overflow/commons-typescript/model/sensor'; import { Sensor } from '@overflow/commons-typescript/model/sensor';
@ -35,7 +35,7 @@ export class MapComponent implements OnInit, AfterContentInit {
infraTree: TreeNode[] = []; infraTree: TreeNode[] = [];
infras$ = this.listStore.pipe(select(ListSelector.select('page'))); infras$ = this.listStore.pipe(select(ListSelector.select('page')));
sensors$ = this.sensorListStore.pipe(select(sensorListSelector.select('page'))); // sensors$ = this.sensorListStore.pipe(select(sensorListSelector.select('page')));
display = false; display = false;
loading = false; loading = false;
renameProbeVisible = false; renameProbeVisible = false;

View File

@ -1,13 +1,6 @@
import { ProbeDetailComponent } from './detail/detail.component'; import { ProbeDetailComponent } from './detail/detail.component';
import { ProbeListComponent } from './list/list.component'; import { ProbeListComponent } from './list/list.component';
import { ProbeDownloadComponent } from './download/download.component'; import { ProbeDownloadComponent } from './download/download.component';
import { ProbeListContainerComponent } from '../container/probe-list-container';
import { ProbeDetailContainerComponent } from '../container/probe-detail-container';
export const CONTAINERS = [
ProbeListContainerComponent,
ProbeDetailContainerComponent,
];
export const COMPONENTS = [ export const COMPONENTS = [
ProbeListComponent, ProbeListComponent,

View File

@ -0,0 +1,7 @@
import { ProbeListContainerComponent } from '../container/probe-list-container.component';
import { ProbeDetailContainerComponent } from '../container/probe-detail-container.component';
export const CONTAINER_COMPONENTS = [
ProbeListContainerComponent,
ProbeDetailContainerComponent,
];

View File

@ -1,4 +1,4 @@
import { Component, OnInit, Input, AfterViewInit, Output, EventEmitter, AfterContentInit, OnChanges, SimpleChanges } from '@angular/core'; import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { ProbeHost, Probe } from '@overflow/commons-typescript/model/probe'; import { ProbeHost, Probe } from '@overflow/commons-typescript/model/probe';
import { Store, select } from '@ngrx/store'; import { Store, select } from '@ngrx/store';
@ -8,7 +8,7 @@ import { ActivatedRoute } from '@angular/router';
@Component({ @Component({
selector: 'of-probe-detail-container', selector: 'of-probe-detail-container',
templateUrl: './probe-detail-container.html', templateUrl: './probe-detail-container.component.html',
}) })
export class ProbeDetailContainerComponent implements OnInit, OnChanges { export class ProbeDetailContainerComponent implements OnInit, OnChanges {

View File

@ -2,14 +2,14 @@ import { Component, EventEmitter, Output, OnInit } from '@angular/core';
import { ProbeHost } from '@overflow/commons-typescript/model/probe'; import { ProbeHost } from '@overflow/commons-typescript/model/probe';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { Store, select } from '@ngrx/store'; import { Store, select } from '@ngrx/store';
import * as ProbeStore from '../store/entity/probe'; import * as ProbeEntityStore from '../store/entity/probe';
import { ProbeEntitySelector, ProbeListContainerSelector } from '../store'; import { ProbeEntitySelector, ProbeListContainerSelector } from '../store';
import { AuthSelector } from '@overflow/member/store'; import { AuthSelector } from '@overflow/member/store';
import { Domain } from '@overflow/commons-typescript/model/domain'; import { Domain } from '@overflow/commons-typescript/model/domain';
@Component({ @Component({
selector: 'of-probe-list-container', selector: 'of-probe-list-container',
templateUrl: './probe-list-container.html', templateUrl: './probe-list-container.component.html',
}) })
export class ProbeListContainerComponent implements OnInit { export class ProbeListContainerComponent implements OnInit {
@ -17,7 +17,9 @@ export class ProbeListContainerComponent implements OnInit {
pending$: Observable<boolean>; pending$: Observable<boolean>;
@Output() select = new EventEmitter(); @Output() select = new EventEmitter();
constructor(private store: Store<ProbeStore.State>) { constructor(
private store: Store<ProbeEntityStore.State>,
) {
this.probeHosts$ = store.pipe(select(ProbeEntitySelector.selectAll)); this.probeHosts$ = store.pipe(select(ProbeEntitySelector.selectAll));
this.pending$ = store.pipe(select(ProbeListContainerSelector.selectPending)); this.pending$ = store.pipe(select(ProbeListContainerSelector.selectPending));
} }
@ -25,7 +27,7 @@ export class ProbeListContainerComponent implements OnInit {
ngOnInit() { ngOnInit() {
this.store.select(AuthSelector.select('domain')).subscribe( this.store.select(AuthSelector.select('domain')).subscribe(
(domain: Domain) => { (domain: Domain) => {
this.store.dispatch(new ProbeStore.ReadAllByDomainID(domain.id)); this.store.dispatch(new ProbeEntityStore.ReadAllByDomainID(domain.id));
}, },
(error) => { (error) => {
console.log(error); console.log(error);

View File

@ -1,7 +1,8 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { COMPONENTS, CONTAINERS } from './component'; import { COMPONENTS } from './component';
import { CONTAINER_COMPONENTS } from './container';
import { ProbeStoreModule } from './probe-store.module'; import { ProbeStoreModule } from './probe-store.module';
import { SERVICES } from './service'; import { SERVICES } from './service';
import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module'; import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module';
@ -21,11 +22,11 @@ import { KeyValueModule } from '@overflow/commons/component/key-value/key-value.
MetaCrawlerModule MetaCrawlerModule
], ],
declarations: [ declarations: [
CONTAINERS, CONTAINER_COMPONENTS,
COMPONENTS, COMPONENTS,
], ],
exports: [ exports: [
CONTAINERS, CONTAINER_COMPONENTS,
COMPONENTS, COMPONENTS,
], ],
providers: [ providers: [

View File

@ -53,7 +53,3 @@
<p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog> <p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
</div> </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>

View File

@ -4,7 +4,7 @@ import { ConfirmationService } from 'primeng/primeng';
import { Store, select } from '@ngrx/store'; import { Store, select } from '@ngrx/store';
import { RPCClientError } from '@loafer/ng-rpc'; import { RPCClientError } from '@loafer/ng-rpc';
import * as DetailStore from '../../store/detail'; import * as DetailStore from '../../store/detail';
import { sensorSelector } from '../../store'; // import { sensorSelector } from '../../store';
import { Sensor } from '@overflow/commons-typescript/model/sensor'; import { Sensor } from '@overflow/commons-typescript/model/sensor';
import { Subscription } from 'rxjs/Subscription'; import { Subscription } from 'rxjs/Subscription';
@ -13,71 +13,71 @@ import { Subscription } from 'rxjs/Subscription';
templateUrl: './detail.component.html', templateUrl: './detail.component.html',
providers: [ConfirmationService] providers: [ConfirmationService]
}) })
export class DetailComponent implements OnInit, AfterContentInit, OnDestroy { export class DetailComponent {
sensorSubscription$: Subscription; // sensorSubscription$: Subscription;
sensor$ = this.detailStore.pipe(select(sensorSelector.select('sensor'))); // sensor$ = this.detailStore.pipe(select(sensorSelector.select('sensor')));
sensor: Sensor; // sensor: Sensor;
sensorSettingDisplay: boolean; // sensorSettingDisplay: boolean;
constructor( // constructor(
private route: ActivatedRoute, // private route: ActivatedRoute,
private router: Router, // private router: Router,
private confirmationService: ConfirmationService, // private confirmationService: ConfirmationService,
private detailStore: Store<DetailStore.State>, // private detailStore: Store<DetailStore.State>,
) { // ) {
this.sensorSettingDisplay = false; // this.sensorSettingDisplay = false;
} // }
ngOnInit() { // ngOnInit() {
this.sensorSubscription$ = this.sensor$.subscribe( // this.sensorSubscription$ = this.sensor$.subscribe(
(sensor: Sensor) => { // (sensor: Sensor) => {
console.log(sensor); // console.log(sensor);
this.sensor = sensor; // this.sensor = sensor;
}, // },
(error: RPCClientError) => { // (error: RPCClientError) => {
console.log(error.response.message); // console.log(error.response.message);
} // }
); // );
} // }
ngAfterContentInit() { // ngAfterContentInit() {
const sensorId = this.route.snapshot.paramMap.get('id'); // const sensorId = this.route.snapshot.paramMap.get('id');
this.detailStore.dispatch( // this.detailStore.dispatch(
new DetailStore.Read( // new DetailStore.Read(
{ id: sensorId } // { id: sensorId }
) // )
); // );
} // }
ngOnDestroy() { // ngOnDestroy() {
if (this.sensorSubscription$) { // if (this.sensorSubscription$) {
this.sensorSubscription$.unsubscribe(); // 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']);
} // }
} }

View File

@ -1,6 +1,5 @@
import { ListComponent } from './list/list.component'; import { SensorListComponent } from './list/list.component';
import { SettingComponent } from './setting/setting.component';
import { TargetSelectorComponent } from './setting/target-selector/target-selector.component'; import { TargetSelectorComponent } from './setting/target-selector/target-selector.component';
import { CrawlerSelectorComponent } from './setting/crawler-selector/crawler-selector.component'; import { CrawlerSelectorComponent } from './setting/crawler-selector/crawler-selector.component';
import { CrawlerAuthComponent } from './setting/crawler-auth/crawler-auth.component'; import { CrawlerAuthComponent } from './setting/crawler-auth/crawler-auth.component';
@ -11,13 +10,12 @@ import { DetailComponent } from './detail/detail.component';
// import { TargetSelectorComponent } from './setting/target-selector/target-selector.component'; // import { TargetSelectorComponent } from './setting/target-selector/target-selector.component';
export const COMPONENTS = [ export const COMPONENTS = [
SettingComponent,
TargetSelectorComponent, TargetSelectorComponent,
CrawlerSelectorComponent, CrawlerSelectorComponent,
CrawlerAuthComponent, CrawlerAuthComponent,
SensorItemSelectorComponent, SensorItemSelectorComponent,
SettingETCComponent, SettingETCComponent,
ListComponent, SensorListComponent,
DetailComponent, DetailComponent,
// FilterComponent, // FilterComponent,
// SettingETCComponent, // SettingETCComponent,

View File

@ -1,29 +1,26 @@
<h1>Sensors</h1> <h1>Sensors</h1>
<div class="ui-g"> <!-- <div class="ui-g">
<div class="ui-g-12"> <div class="ui-g-12">
<p-panel [showHeader]="false" *ngIf="paramTarget"> <p-panel [showHeader]="false" *ngIf="paramTarget">
<div class="ui-key-value"> <div class="ui-key-value">
<span>Status</span> <span>Status</span>
<span class="ng-star-inserted"><i class="fa ui-icon-stop ui-status-icon ui-status-success"></i>Up</span> <span class="ng-star-inserted">
</div> <i class="fa ui-icon-stop ui-status-icon ui-status-success"></i>Up</span>
<of-key-value [key]="'Alias'" [value]="paramTarget.target.displayName" class="ui-key-value"></of-key-value> </div>
<of-key-value [key]="'Description'" [value]="paramTarget.target.description" class="ui-key-value"></of-key-value> <of-key-value [key]="'Alias'" [value]="paramTarget.target.displayName" class="ui-key-value"></of-key-value>
<of-key-value [key]="'Type'" [value]="paramTarget.infraType.name" class="ui-key-value"></of-key-value> <of-key-value [key]="'Description'" [value]="paramTarget.target.description" class="ui-key-value"></of-key-value>
<of-key-value [key]="'Created at'" [value]="paramTarget.createDate | date: 'dd/MM/yyyy'" class="ui-key-value"></of-key-value> <of-key-value [key]="'Type'" [value]="paramTarget.infraType.name" class="ui-key-value"></of-key-value>
<of-key-value [key]="'Sensors'" [value]="'todo: count'" class="ui-key-value"></of-key-value> <of-key-value [key]="'Created at'" [value]="paramTarget.createDate | date: 'dd/MM/yyyy'" class="ui-key-value"></of-key-value>
</p-panel> <of-key-value [key]="'Sensors'" [value]="'todo: count'" class="ui-key-value"></of-key-value>
</div> </p-panel>
</div> </div>
</div> -->
<div class="ui-g"> <div *ngIf="page" class="ui-g">
<div class="ui-g-12"> <div class="ui-g-12">
<div class="ui-g"> <div class="ui-g">
<div class="ui-g-12 ui-md-5 ui-g-nopad"> <div class="ui-g-12 ui-md-5 ui-g-nopad">
<p-dialog [modal]="true" [width]="800" [(visible)]="sensorSettingDisplay" [showHeader]="false" [closeOnEscape]="false">
<of-sensor-setting [visible]="sensorSettingDisplay" [preTarget]="target" (close)="onSensorSettingClose()"></of-sensor-setting>
</p-dialog>
<button type="button" label="Add Sensor" icon="ui-icon-add" pButton class="ui-button-large ui-button-width-fit" (click)="onAddSensor()"></button> <button type="button" label="Add Sensor" icon="ui-icon-add" pButton class="ui-button-large ui-button-width-fit" (click)="onAddSensor()"></button>
</div> </div>
<div class="ui-g-12 ui-md-7 ui-g-nopad"> <div class="ui-g-12 ui-md-7 ui-g-nopad">
@ -72,8 +69,8 @@
<ng-template let-item pTemplate="item"> <ng-template let-item pTemplate="item">
<div class="clearfix ui-sensors ui-bottom-border-1"> <div class="clearfix ui-sensors ui-bottom-border-1">
<div class="ui-g-12 ui-md-3 ui-lg-3 ui-sensor"> <div class="ui-g-12 ui-md-3 ui-lg-3 ui-sensor">
<i class="fa ui-icon-devices ui-icon-lg"></i><br> <i class="fa ui-icon-devices ui-icon-lg"></i>
{{item.target.id}} - {{item.target.displayName}} <br> {{item.target.id}} - {{item.target.displayName}}
</div> </div>
<div class="ui-g-12 ui-md-9 ui-lg-9 ui-sensors-details"> <div class="ui-g-12 ui-md-9 ui-lg-9 ui-sensors-details">
<div class="ui-g"> <div class="ui-g">
@ -85,8 +82,8 @@
</div> </div>
<div class="ui-g-2" style="text-align: center !important"> <div class="ui-g-2" style="text-align: center !important">
<div style="width:14px; height:14px; margin: auto;"> <div style="width:14px; height:14px; margin: auto;">
<button type="button" pButton icon="ui-icon-add" (click)="onAddSensorWithTarget(item.target)"></button> <button type="button" pButton icon="ui-icon-add" (click)="onAddSensorWithTarget(item.target)"></button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,98 +1,31 @@
import { Component, OnInit, AfterViewInit, ViewChild, AfterContentInit, OnDestroy } from '@angular/core'; import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Sensor } from '@overflow/commons-typescript/model/sensor'; import { Sensor } from '@overflow/commons-typescript/model/sensor';
import { Store, select } from '@ngrx/store'; import { Page } from '@overflow/commons-typescript/model/commons/Page';
import * as SensorStore from '../../store';
import { RPCClientError } from '@loafer/ng-rpc';
import * as ListStore from '../../store/list';
import { sensorListSelector } from '../../store';
import { Domain } from '@overflow/commons-typescript/model/domain';
import { AuthSelector } from '@overflow/member/store';
// import { Page, PageParams } from 'app/commons/model';
import { Target } from '@overflow/commons-typescript/model/target';
import { SettingComponent } from '../setting/setting.component';
import { SelectItem } from 'primeng/primeng';
import { Infra } from '@overflow/commons-typescript/model/infra';
import * as InfraDetailStore from '@overflow/infra/store/detail';
import { DetailSelector as InfraDetailSelector } from '@overflow/infra/store';
import { Subscription } from 'rxjs/Subscription';
@Component({ @Component({
selector: 'of-sensor-list', selector: 'of-sensor-list',
templateUrl: './list.component.html', templateUrl: './list.component.html',
}) })
export class ListComponent implements OnInit, AfterContentInit, OnDestroy { export class SensorListComponent implements OnChanges {
sensorsSubscription$: Subscription; @Input() page: Page<Sensor>;
sensorList$ = this.store.pipe(select(sensorListSelector.select('page')));
PAGE_SIZE = '99999';
totalLength = 0;
sensorSettingDisplay = false;
sensors: Sensor[]; totalLength;
target: Target = null;
targetSensor; targetSensor;
// filter
targetOptions: SelectItem[];
filteredName: string;
selectedTargets: string[] = [];
selectedStatus: string[] = [];
constructor( constructor(
private router: Router,
private route: ActivatedRoute,
private store: Store<ListStore.State>,
) { } ) { }
ngOnInit() { ngOnChanges(changes: SimpleChanges): void {
this.generateSensorMap();
// this.sensorsSubscription$ = this.sensorList$.subscribe(
// (page: Page) => {
// if (page != null) {
// this.sensors = page.content;
// this.generateSensorMap();
// }
// },
// (error: RPCClientError) => {
// console.log(error.response.message);
// }
// );
}
ngAfterContentInit() {
this.getSensors(0);
}
ngOnDestroy() {
if (this.sensorsSubscription$) {
this.sensorsSubscription$.unsubscribe();
}
}
getSensors(pageIndex: number) {
// this.store.select(AuthSelector.select('domain')).subscribe(
// (domain: Domain) => {
// const pageParams: PageParams = {
// pageNo: pageIndex + '',
// countPerPage: this.PAGE_SIZE,
// sortCol: 'id',
// sortDirection: 'descending'
// };
// this.store.dispatch(new ListStore.ReadAllByDomain({ domain, pageParams }));
// },
// (error) => {
// console.log(error);
// }
// );
} }
generateSensorMap() { generateSensorMap() {
if (!this.page) {
return;
}
const tempList = []; const tempList = [];
for (const sensor of this.sensors) { for (const sensor of this.page.content) {
const targetNode = this.existTarget(sensor, tempList); const targetNode = this.existTarget(sensor, tempList);
if (targetNode === null) { if (targetNode === null) {
const sensorsNode = []; const sensorsNode = [];
@ -109,20 +42,6 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
} }
this.totalLength = tempList.length; this.totalLength = tempList.length;
this.targetSensor = tempList; this.targetSensor = tempList;
this.generateTargetFilter();
}
generateTargetFilter() {
if (this.targetOptions) {
return;
}
const tempList = [];
for (const data of this.targetSensor) {
tempList.push({ label: data.target.displayName, value: data.target.id });
}
this.targetOptions = tempList;
} }
existTarget(sensor: Sensor, tempList) { existTarget(sensor: Sensor, tempList) {
@ -135,29 +54,40 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
return targetNode; return targetNode;
} }
onAddSensor() { // generateTargetFilter() {
this.target = null; // if (this.targetOptions) {
this.sensorSettingDisplay = true; // return;
} // }
// const tempList = [];
// for (const data of this.targetSensor) {
// tempList.push({ label: data.target.displayName, value: data.target.id });
// }
// this.targetOptions = tempList;
// }
onAddSensorWithTarget(target: Target) { // onAddSensor() {
this.target = target; // this.target = null;
this.sensorSettingDisplay = true; // this.sensorSettingDisplay = true;
} // }
onSensorSettingClose() { // onAddSensorWithTarget(target: Target) {
this.sensorSettingDisplay = false; // this.target = target;
} // this.sensorSettingDisplay = true;
onSensorClick(sensor) { // }
this.router.navigate(['sensor', sensor.id, 'info']);
}
onSearch() { // onSensorSettingClose() {
console.log(this.filteredName); // this.sensorSettingDisplay = false;
console.log(this.selectedTargets); // }
console.log(this.selectedStatus); // onSensorClick(sensor) {
alert('서버-검색 기능 구현 필요'); // this.router.navigate(['sensor', sensor.id, 'info']);
} // }
// onSearch() {
// console.log(this.filteredName);
// console.log(this.selectedTargets);
// console.log(this.selectedStatus);
// alert('서버-검색 기능 구현 필요');
// }
} }

View File

@ -1,5 +1,5 @@
import { SensorListContainerComponent } from './sensor-list-container'; import { SensorListContainerComponent } from './sensor-list-container.component';
import { SensorDetailContainerComponent } from './sensor-detail-container'; import { SensorDetailContainerComponent } from './sensor-detail-container.component';
export const CONTAINER_COMPONENTS = [ export const CONTAINER_COMPONENTS = [
SensorListContainerComponent, SensorListContainerComponent,

View File

@ -6,7 +6,7 @@ import { Store, select } from '@ngrx/store';
@Component({ @Component({
selector: 'of-sensor-detail-container', selector: 'of-sensor-detail-container',
templateUrl: './sensor-detail-container.html', templateUrl: './sensor-detail-container.component.html',
}) })
export class SensorDetailContainerComponent { export class SensorDetailContainerComponent {

View File

@ -0,0 +1 @@
<of-sensor-list [page]="page$ | async"></of-sensor-list>

View File

@ -0,0 +1,41 @@
import { Component, EventEmitter, Output, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Store, select } from '@ngrx/store';
import { Sensor } from '@overflow/commons-typescript/model/sensor';
import * as SensorEntityStore from '../store/entity/sensor';
import { SensorEntitySelector, SensorPageSelector } from '../store';
import { AuthSelector } from '../../member/store';
import { Domain } from '@overflow/commons-typescript/model/domain';
import { PageParams } from '@overflow/commons-typescript/model/commons/PageParams';
import { Page } from '@overflow/commons-typescript/model/commons/Page';
@Component({
selector: 'of-sensor-list-container',
templateUrl: './sensor-list-container.component.html',
})
export class SensorListContainerComponent implements OnInit {
page$: Observable<Page<Sensor>>;
@Output() select = new EventEmitter<Sensor>();
constructor(private store: Store<SensorEntityStore.State>) {
this.page$ = store.pipe(select(SensorPageSelector));
}
ngOnInit() {
this.store.select(AuthSelector.select('domain')).subscribe(
(domain: Domain) => {
const pageParams: PageParams = {
pageNo: 0,
countPerPage: 10,
sortCol: 'id',
sortDirection: 'descending',
};
this.store.dispatch(new SensorEntityStore.ReadAllByDomainID({domainID : domain.id, pageParams}));
},
(error) => {
console.log(error);
}
);
}
}

View File

@ -1 +0,0 @@
<of-sensor-list></of-sensor-list>

View File

@ -1,16 +0,0 @@
import { Component, EventEmitter, Output } from '@angular/core';
import { Observable } from 'rxjs';
import { Store, select } from '@ngrx/store';
import { Sensor } from '@overflow/commons-typescript/model/sensor';
// import * as ProbeStore from '../store/entity/probe';
// import { ProbeEntitySelector, ProbeListContainerSelector } from '../store';
@Component({
selector: 'of-sensor-list-container',
templateUrl: './sensor-list-container.html',
})
export class SensorListContainerComponent {
@Output() select = new EventEmitter<Sensor>();
}

View File

@ -10,6 +10,8 @@ import { SensorItem } from '@overflow/commons-typescript/model/sensor-item';
import { Sensor } from '@overflow/commons-typescript/model/sensor'; import { Sensor } from '@overflow/commons-typescript/model/sensor';
import { Domain } from '@overflow/commons-typescript/model/domain'; import { Domain } from '@overflow/commons-typescript/model/domain';
import { Target } from '@overflow/commons-typescript/model/target'; import { Target } from '@overflow/commons-typescript/model/target';
import { PageParams } from '@overflow/commons-typescript/model/commons/PageParams';
import { Page } from '@overflow/commons-typescript/model/commons/Page';
@Injectable() @Injectable()
@ -21,9 +23,9 @@ export class SensorService {
} }
// public readAllByDomain(domain: Domain, pageParams: PageParams): Observable<Page> { public readAllByDomainID(domainID: number, pageParams: PageParams): Observable<Page<Sensor>> {
// return this.rpcService.call('SensorService.readAllByDomain', domain, pageParams); return this.rpcService.call('SensorService.readAllByDomainID', domainID, pageParams);
// } }
public registSensorConfig(sensor: Sensor, sensorItems: SensorItem[]): Observable<Sensor> { public registSensorConfig(sensor: Sensor, sensorItems: SensorItem[]): Observable<Sensor> {
return this.rpcService.call('SensorService.registSensorConfig', sensor, sensorItems, null); return this.rpcService.call('SensorService.registSensorConfig', sensor, sensorItems, null);

View File

@ -0,0 +1,4 @@
export * from './sensor.action';
export * from './sensor.effect';
export * from './sensor.reducer';
export * from './sensor.state';

View File

@ -0,0 +1,85 @@
import { Action } from '@ngrx/store';
import { RPCClientError } from '@loafer/ng-rpc';
import { Sensor } from '@overflow/commons-typescript/model/sensor';
import { PageParams } from '@overflow/commons-typescript/model/commons/PageParams';
import { Page } from '@overflow/commons-typescript/model/commons/Page';
export enum ActionType {
ReadAllByDomainID = '[Sensor.list] ReadAllByDomainID',
ReadAllByDomainIDSuccess = '[Sensor.list] ReadAllByDomainIDSuccess',
ReadAllByDomainIDFailure = '[Sensor.list] ReadAllByDomainIDFailure',
Read = '[Sensor.detail] Read',
ReadSuccess = '[Sensor.detail] ReadSuccess',
ReadFailure = '[Sensor.detail] ReadFailure',
Modify = '[Sensor.detail] Modify',
ModifySuccess = '[Sensor.detail] ModifySuccess',
ModifyFailure = '[Sensor.detail] ModifyFailure',
}
export class ReadAllByDomainID implements Action {
readonly type = ActionType.ReadAllByDomainID;
constructor(public payload: {domainID: number, pageParams: PageParams}) {}
}
export class ReadAllByDomainIDSuccess implements Action {
readonly type = ActionType.ReadAllByDomainIDSuccess;
constructor(public payload: Page<Sensor>) {}
}
export class ReadAllByDomainIDFailure implements Action {
readonly type = ActionType.ReadAllByDomainIDFailure;
constructor(public payload: RPCClientError) {}
}
export class Read implements Action {
readonly type = ActionType.Read;
constructor(public payload: number) {}
}
export class ReadSuccess implements Action {
readonly type = ActionType.ReadSuccess;
constructor(public payload: Sensor) {}
}
export class ReadFailure implements Action {
readonly type = ActionType.ReadFailure;
constructor(public payload: RPCClientError) {}
}
export class Modify implements Action {
readonly type = ActionType.Modify;
constructor(public payload: Sensor) {}
}
export class ModifySuccess implements Action {
readonly type = ActionType.ModifySuccess;
constructor(public payload: Sensor) {}
}
export class ModifyFailure implements Action {
readonly type = ActionType.ModifyFailure;
constructor(public payload: RPCClientError) {}
}
export type Actions =
| ReadAllByDomainID
| ReadAllByDomainIDSuccess
| ReadAllByDomainIDFailure
| Read
| ReadSuccess
| ReadFailure
| Modify
| ModifySuccess
| ModifyFailure
;

View File

@ -0,0 +1,78 @@
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Effect, Actions, ofType } from '@ngrx/effects';
import { Action } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/exhaustMap';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/take';
import { RPCClientError } from '@loafer/ng-rpc';
import { Sensor } from '@overflow/commons-typescript/model/sensor';
import {
ReadAllByDomainID,
ReadAllByDomainIDFailure,
ReadAllByDomainIDSuccess,
Read,
ReadSuccess,
ReadFailure,
Modify,
ModifySuccess,
ModifyFailure,
ActionType
} from './sensor.action';
import { SensorService } from '../../../service/sensor.service';
@Injectable()
export class Effects {
constructor(
private actions$: Actions,
private sensorService: SensorService,
private router: Router
) { }
@Effect()
ReadAllByDomainID$: Observable<Action> = this.actions$
.ofType(ActionType.ReadAllByDomainID)
.map((action: ReadAllByDomainID) => action.payload)
.switchMap(payload => this.sensorService.readAllByDomainID(payload.domainID, payload.pageParams))
.map(page => {
return new ReadAllByDomainIDSuccess(page);
})
.catch((error: RPCClientError) => {
return of(new ReadAllByDomainIDFailure(error));
});
// @Effect()
// Read$: Observable<Action> = this.actions$
// .ofType(ActionType.Read)
// .map((action: Read) => action.payload)
// .switchMap(payload => this.sensorHostService.read(payload))
// .map(sensorHost => {
// return new ReadSuccess(sensorHost);
// })
// .catch((error: RPCClientError) => {
// return of(new ReadFailure(error));
// });
// @Effect()
// Modify$: Observable<Action> = this.actions$
// .ofType(ActionType.Modify)
// .map((action: Modify) => action.payload)
// .switchMap(payload => this.sensorService.modify(payload))
// .map(sensor => {
// return new ModifySuccess(sensor);
// })
// .catch((error: RPCClientError) => {
// return of(new ModifyFailure(error));
// });
}

View File

@ -0,0 +1,63 @@
import {
ActionType,
Actions,
} from './sensor.action';
import {
State,
initialState,
sensorAdapter,
} from './sensor.state';
export function reducer(state = initialState, action: Actions): State {
switch (action.type) {
case ActionType.ReadAllByDomainID: {
return {
...state,
error: null,
};
}
case ActionType.ReadAllByDomainIDSuccess: {
return sensorAdapter.setAll(action.payload.content, {...state, page: action.payload});
}
case ActionType.ReadAllByDomainIDFailure: {
return sensorAdapter.setError(action.payload, state);
}
case ActionType.Read: {
return {
...state,
error: null,
};
}
case ActionType.ReadSuccess: {
return sensorAdapter.setOne(action.payload, {...state, page: null});
}
case ActionType.ReadFailure: {
return sensorAdapter.setError(action.payload, state);
}
case ActionType.Modify: {
return {
...state,
error: null,
};
}
case ActionType.ModifySuccess: {
return sensorAdapter.upsertOne(action.payload, state);
}
case ActionType.ModifyFailure: {
return sensorAdapter.setError(action.payload, state);
}
default: {
return state;
}
}
}

View File

@ -0,0 +1,24 @@
import { RPCClientError } from '@loafer/ng-rpc';
import { ProbeHost } from '@overflow/commons-typescript/model/probe';
import { Selector, createSelector } from '@ngrx/store';
import { createEntityAdapter, EntityState } from '@loafer/ng-entity';
import { Page } from '@overflow/commons-typescript/model/commons/Page';
import { Sensor } from '@overflow/commons-typescript/model/sensor';
export const sensorAdapter = createEntityAdapter<Sensor, RPCClientError>();
export interface State extends EntityState<Sensor, RPCClientError> {
page: Page<Sensor>;
}
export const initialState: State = {
ids : [],
entities : null,
page: null,
error: null,
};
export function getSelectors<S>(selector: Selector<any, State>) {
return sensorAdapter.getSelectors(selector);
}

View File

@ -8,32 +8,30 @@ import { StateSelector } from '@overflow/core/ngrx/store';
import { MODULE } from '../sensor.constant'; import { MODULE } from '../sensor.constant';
import * as ListStore from './list'; import * as SensorEntityStore from './entity/sensor';
import * as DetailStore from './detail';
export interface State { export interface State {
list: ListStore.State; sensor: SensorEntityStore.State;
sensor: DetailStore.State;
} }
export const REDUCERS = { export const REDUCERS = {
list: ListStore.reducer, sensor: SensorEntityStore.reducer,
sensor: DetailStore.reducer,
}; };
export const EFFECTS = [ export const EFFECTS = [
ListStore.Effects, SensorEntityStore.Effects,
DetailStore.Effects,
]; ];
export const sensorState = createFeatureSelector<State>(MODULE.name); export const selectState = createFeatureSelector<State>(MODULE.name);
export const sensorListSelector = new StateSelector<ListStore.State>(createSelector( export const SensorEntitySelector = SensorEntityStore.getSelectors(createSelector(
sensorState, selectState,
(state: State) => state.list
));
export const sensorSelector = new StateSelector<DetailStore.State>(createSelector(
sensorState,
(state: State) => state.sensor (state: State) => state.sensor
)); ));
export const SensorPageSelector = createSelector(
selectState,
(state: State) => state.sensor.page
);

View File

@ -7,8 +7,7 @@ import { DetailSelector as InfraDetailSelector } from '@overflow/infra/store';
import * as InfraDetailStore from '@overflow/infra/store/detail'; import * as InfraDetailStore from '@overflow/infra/store/detail';
import { Subscription } from 'rxjs/Subscription'; import { Subscription } from 'rxjs/Subscription';
import { RPCClientError } from '@loafer/ng-rpc'; import { RPCClientError } from '@loafer/ng-rpc';
import { sensorListSelector } from '@overflow/sensor/store'; // import * as SensorListStore from '@overflow/sensor/store/list';
import * as SensorListStore from '@overflow/sensor/store/list';
// import { PageParams, Page } from 'app/commons/model'; // import { PageParams, Page } from 'app/commons/model';
import { ModifySelector } from '@overflow/target/store'; import { ModifySelector } from '@overflow/target/store';
import * as TargetModifyStore from '@overflow/target/store/modify'; import * as TargetModifyStore from '@overflow/target/store/modify';
@ -24,7 +23,7 @@ export class DetailComponent implements OnInit, AfterContentInit, OnDestroy {
infraSubscription$: Subscription; infraSubscription$: Subscription;
infra$ = this.infraDetailStore.pipe(select(InfraDetailSelector.select('infra'))); infra$ = this.infraDetailStore.pipe(select(InfraDetailSelector.select('infra')));
sensorsSubscription$: Subscription; sensorsSubscription$: Subscription;
sensors$ = this.sensorListStore.pipe(select(sensorListSelector.select('page'))); // sensors$ = this.sensorListStore.pipe(select(sensorListSelector.select('page')));
target$ = this.targetModifyStore.pipe(select(ModifySelector.select('target'))); target$ = this.targetModifyStore.pipe(select(ModifySelector.select('target')));
infraId = null; infraId = null;
@ -41,7 +40,7 @@ export class DetailComponent implements OnInit, AfterContentInit, OnDestroy {
private router: Router, private router: Router,
private route: ActivatedRoute, private route: ActivatedRoute,
private infraDetailStore: Store<InfraDetailStore.State>, private infraDetailStore: Store<InfraDetailStore.State>,
private sensorListStore: Store<SensorListStore.State>, // private sensorListStore: Store<SensorListStore.State>,
private targetModifyStore: Store<TargetModifyStore.State> private targetModifyStore: Store<TargetModifyStore.State>
) { } ) { }