sensor list complete
This commit is contained in:
insanity
@@ -53,7 +53,3 @@
|
||||
<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>
|
||||
@@ -4,7 +4,7 @@ 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 { sensorSelector } from '../../store';
|
||||
import { Sensor } from '@overflow/commons-typescript/model/sensor';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
|
||||
@@ -13,71 +13,71 @@ import { Subscription } from 'rxjs/Subscription';
|
||||
templateUrl: './detail.component.html',
|
||||
providers: [ConfirmationService]
|
||||
})
|
||||
export class DetailComponent implements OnInit, AfterContentInit, OnDestroy {
|
||||
export class DetailComponent {
|
||||
|
||||
sensorSubscription$: Subscription;
|
||||
sensor$ = this.detailStore.pipe(select(sensorSelector.select('sensor')));
|
||||
sensor: Sensor;
|
||||
sensorSettingDisplay: boolean;
|
||||
// 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;
|
||||
}
|
||||
// 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);
|
||||
}
|
||||
);
|
||||
}
|
||||
// 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 }
|
||||
)
|
||||
);
|
||||
}
|
||||
// ngAfterContentInit() {
|
||||
// const sensorId = this.route.snapshot.paramMap.get('id');
|
||||
// this.detailStore.dispatch(
|
||||
// new DetailStore.Read(
|
||||
// { id: sensorId }
|
||||
// )
|
||||
// );
|
||||
// }
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.sensorSubscription$) {
|
||||
this.sensorSubscription$.unsubscribe();
|
||||
}
|
||||
}
|
||||
// ngOnDestroy() {
|
||||
// if (this.sensorSubscription$) {
|
||||
// this.sensorSubscription$.unsubscribe();
|
||||
// }
|
||||
// }
|
||||
|
||||
onStartOrStop() { }
|
||||
// onStartOrStop() { }
|
||||
|
||||
onEdit() {
|
||||
this.sensorSettingDisplay = true;
|
||||
}
|
||||
// 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: () => {
|
||||
}
|
||||
});
|
||||
}
|
||||
// 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']);
|
||||
}
|
||||
// onTargetClick(target) {
|
||||
// // this.router.navigate(['sensors'], { queryParams: { target: target.id } });
|
||||
// this.router.navigate(['target', target.id, 'info']);
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
@@ -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 { CrawlerSelectorComponent } from './setting/crawler-selector/crawler-selector.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';
|
||||
|
||||
export const COMPONENTS = [
|
||||
SettingComponent,
|
||||
TargetSelectorComponent,
|
||||
CrawlerSelectorComponent,
|
||||
CrawlerAuthComponent,
|
||||
SensorItemSelectorComponent,
|
||||
SettingETCComponent,
|
||||
ListComponent,
|
||||
SensorListComponent,
|
||||
DetailComponent,
|
||||
// FilterComponent,
|
||||
// SettingETCComponent,
|
||||
|
||||
@@ -1,29 +1,26 @@
|
||||
<h1>Sensors</h1>
|
||||
|
||||
<div class="ui-g">
|
||||
<div class="ui-g-12">
|
||||
<p-panel [showHeader]="false" *ngIf="paramTarget">
|
||||
<div class="ui-key-value">
|
||||
<span>Status</span>
|
||||
<span class="ng-star-inserted"><i class="fa ui-icon-stop ui-status-icon ui-status-success"></i>Up</span>
|
||||
</div>
|
||||
<of-key-value [key]="'Alias'" [value]="paramTarget.target.displayName" 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]="'Type'" [value]="paramTarget.infraType.name" 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]="'Sensors'" [value]="'todo: count'" class="ui-key-value"></of-key-value>
|
||||
</p-panel>
|
||||
</div>
|
||||
<!-- <div class="ui-g">
|
||||
<div class="ui-g-12">
|
||||
<p-panel [showHeader]="false" *ngIf="paramTarget">
|
||||
<div class="ui-key-value">
|
||||
<span>Status</span>
|
||||
<span class="ng-star-inserted">
|
||||
<i class="fa ui-icon-stop ui-status-icon ui-status-success"></i>Up</span>
|
||||
</div>
|
||||
<of-key-value [key]="'Alias'" [value]="paramTarget.target.displayName" 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]="'Type'" [value]="paramTarget.infraType.name" 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]="'Sensors'" [value]="'todo: count'" class="ui-key-value"></of-key-value>
|
||||
</p-panel>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="ui-g">
|
||||
<div *ngIf="page" class="ui-g">
|
||||
<div class="ui-g-12">
|
||||
<div class="ui-g">
|
||||
<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>
|
||||
</div>
|
||||
<div class="ui-g-12 ui-md-7 ui-g-nopad">
|
||||
@@ -72,8 +69,8 @@
|
||||
<ng-template let-item pTemplate="item">
|
||||
<div class="clearfix ui-sensors ui-bottom-border-1">
|
||||
<div class="ui-g-12 ui-md-3 ui-lg-3 ui-sensor">
|
||||
<i class="fa ui-icon-devices ui-icon-lg"></i><br>
|
||||
{{item.target.id}} - {{item.target.displayName}}
|
||||
<i class="fa ui-icon-devices ui-icon-lg"></i>
|
||||
<br> {{item.target.id}} - {{item.target.displayName}}
|
||||
</div>
|
||||
<div class="ui-g-12 ui-md-9 ui-lg-9 ui-sensors-details">
|
||||
<div class="ui-g">
|
||||
@@ -85,8 +82,8 @@
|
||||
</div>
|
||||
<div class="ui-g-2" style="text-align: center !important">
|
||||
<div style="width:14px; height:14px; margin: auto;">
|
||||
<button type="button" pButton icon="ui-icon-add" (click)="onAddSensorWithTarget(item.target)"></button>
|
||||
</div>
|
||||
<button type="button" pButton icon="ui-icon-add" (click)="onAddSensorWithTarget(item.target)"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,98 +1,31 @@
|
||||
import { Component, OnInit, AfterViewInit, ViewChild, AfterContentInit, OnDestroy } from '@angular/core';
|
||||
import { Router, ActivatedRoute } from '@angular/router';
|
||||
import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
|
||||
import { Sensor } from '@overflow/commons-typescript/model/sensor';
|
||||
import { Store, select } from '@ngrx/store';
|
||||
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';
|
||||
|
||||
import { Page } from '@overflow/commons-typescript/model/commons/Page';
|
||||
|
||||
@Component({
|
||||
selector: 'of-sensor-list',
|
||||
templateUrl: './list.component.html',
|
||||
})
|
||||
export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
|
||||
export class SensorListComponent implements OnChanges {
|
||||
|
||||
sensorsSubscription$: Subscription;
|
||||
sensorList$ = this.store.pipe(select(sensorListSelector.select('page')));
|
||||
PAGE_SIZE = '99999';
|
||||
totalLength = 0;
|
||||
sensorSettingDisplay = false;
|
||||
@Input() page: Page<Sensor>;
|
||||
|
||||
sensors: Sensor[];
|
||||
target: Target = null;
|
||||
totalLength;
|
||||
targetSensor;
|
||||
|
||||
// filter
|
||||
targetOptions: SelectItem[];
|
||||
filteredName: string;
|
||||
selectedTargets: string[] = [];
|
||||
selectedStatus: string[] = [];
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private route: ActivatedRoute,
|
||||
private store: Store<ListStore.State>,
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
// 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);
|
||||
// }
|
||||
// );
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
this.generateSensorMap();
|
||||
}
|
||||
|
||||
generateSensorMap() {
|
||||
if (!this.page) {
|
||||
return;
|
||||
}
|
||||
const tempList = [];
|
||||
for (const sensor of this.sensors) {
|
||||
for (const sensor of this.page.content) {
|
||||
const targetNode = this.existTarget(sensor, tempList);
|
||||
if (targetNode === null) {
|
||||
const sensorsNode = [];
|
||||
@@ -109,20 +42,6 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
|
||||
}
|
||||
this.totalLength = tempList.length;
|
||||
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) {
|
||||
@@ -135,29 +54,40 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
|
||||
return targetNode;
|
||||
}
|
||||
|
||||
onAddSensor() {
|
||||
this.target = null;
|
||||
this.sensorSettingDisplay = true;
|
||||
}
|
||||
// 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;
|
||||
// }
|
||||
|
||||
onAddSensorWithTarget(target: Target) {
|
||||
this.target = target;
|
||||
this.sensorSettingDisplay = true;
|
||||
}
|
||||
// onAddSensor() {
|
||||
// this.target = null;
|
||||
// this.sensorSettingDisplay = true;
|
||||
// }
|
||||
|
||||
onSensorSettingClose() {
|
||||
this.sensorSettingDisplay = false;
|
||||
}
|
||||
onSensorClick(sensor) {
|
||||
this.router.navigate(['sensor', sensor.id, 'info']);
|
||||
}
|
||||
// onAddSensorWithTarget(target: Target) {
|
||||
// this.target = target;
|
||||
// this.sensorSettingDisplay = true;
|
||||
// }
|
||||
|
||||
onSearch() {
|
||||
console.log(this.filteredName);
|
||||
console.log(this.selectedTargets);
|
||||
console.log(this.selectedStatus);
|
||||
alert('서버-검색 기능 구현 필요');
|
||||
}
|
||||
// onSensorSettingClose() {
|
||||
// this.sensorSettingDisplay = false;
|
||||
// }
|
||||
// onSensorClick(sensor) {
|
||||
// this.router.navigate(['sensor', sensor.id, 'info']);
|
||||
// }
|
||||
|
||||
// onSearch() {
|
||||
// console.log(this.filteredName);
|
||||
// console.log(this.selectedTargets);
|
||||
// console.log(this.selectedStatus);
|
||||
// alert('서버-검색 기능 구현 필요');
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user