From 87b0a0283bf78b2de15a936261bbad1247590a2f Mon Sep 17 00:00:00 2001 From: insanity Date: Wed, 18 Apr 2018 20:28:53 +0900 Subject: [PATCH] sensor / senson-item module is in progress --- src/packages/sensor-item/component/index.ts | 8 +- .../component/list/list.component.html | 58 +++---------- .../component/list/list.component.scss | 14 ---- .../component/list/list.component.ts | 81 ++++++------------- .../sensor-item/sensor-item.module.ts | 47 ++++++----- .../component/detail/detail.component.html | 73 ++++++++++++++++- .../component/detail/detail.component.scss | 0 .../component/detail/detail.component.ts | 52 +++++++++++- .../name-tag/name-tag.component.html | 5 -- .../name-tag/name-tag.component.scss | 0 .../name-tag/name-tag.component.spec.ts | 0 .../component/name-tag/name-tag.component.ts | 59 -------------- src/packages/sensor/sensor.module.ts | 4 +- src/packages/sensor/service/sensor.service.ts | 4 + .../sensor/store/detail/detail.action.ts | 37 +++++++++ .../sensor/store/detail/detail.effect.spec.ts | 15 ++++ .../sensor/store/detail/detail.effect.ts | 49 +++++++++++ .../sensor/store/detail/detail.reducer.ts | 49 +++++++++++ .../sensor/store/detail/detail.state.ts | 15 ++++ src/packages/sensor/store/detail/index.ts | 4 + src/packages/sensor/store/index.ts | 10 +-- 21 files changed, 366 insertions(+), 218 deletions(-) delete mode 100644 src/packages/sensor-item/component/list/list.component.scss delete mode 100644 src/packages/sensor/component/detail/detail.component.scss delete mode 100644 src/packages/sensor/component/name-tag/name-tag.component.html delete mode 100644 src/packages/sensor/component/name-tag/name-tag.component.scss delete mode 100644 src/packages/sensor/component/name-tag/name-tag.component.spec.ts delete mode 100644 src/packages/sensor/component/name-tag/name-tag.component.ts create mode 100644 src/packages/sensor/store/detail/detail.action.ts create mode 100644 src/packages/sensor/store/detail/detail.effect.spec.ts create mode 100644 src/packages/sensor/store/detail/detail.effect.ts create mode 100644 src/packages/sensor/store/detail/detail.reducer.ts create mode 100644 src/packages/sensor/store/detail/detail.state.ts create mode 100644 src/packages/sensor/store/detail/index.ts diff --git a/src/packages/sensor-item/component/index.ts b/src/packages/sensor-item/component/index.ts index 2642cab..3b76d4f 100644 --- a/src/packages/sensor-item/component/index.ts +++ b/src/packages/sensor-item/component/index.ts @@ -1,5 +1,5 @@ -// import { ListComponent } from './list/list.component'; +import { ListComponent } from './list/list.component'; -// export const COMPONENTS = [ -// ListComponent, -// ]; +export const COMPONENTS = [ + ListComponent, +]; diff --git a/src/packages/sensor-item/component/list/list.component.html b/src/packages/sensor-item/component/list/list.component.html index bdc6b1f..f9049c2 100644 --- a/src/packages/sensor-item/component/list/list.component.html +++ b/src/packages/sensor-item/component/list/list.component.html @@ -1,45 +1,13 @@ -
- - - - Name - {{element.name}} - - - - IP - {{element.ip}} - - - - OS - {{element.os}} - - - - CIDR - {{element.cidr}} - - - - Targets - {{element.targetCnt}} - - - - Date - {{element.date}} - - - - AuthBy - {{element.authBy}} - - - - - - - - -
\ No newline at end of file +
SensorItem List
+ + + + {{rowIndex + 1}} + {{sensor.Description}} + {{sensor.status.name}} + {{sensor.crawler.name}} + ??? + {{sensor.createDate | date: 'dd.MM.yyyy'}} + + + \ No newline at end of file diff --git a/src/packages/sensor-item/component/list/list.component.scss b/src/packages/sensor-item/component/list/list.component.scss deleted file mode 100644 index 54b8a22..0000000 --- a/src/packages/sensor-item/component/list/list.component.scss +++ /dev/null @@ -1,14 +0,0 @@ -.example-container { - display: flex; - flex-direction: column; - min-width: 300px; - } - - .mat-table { - overflow: auto; - max-height: 500px; - } - - .mat-header-cell.mat-sort-header-sorted { - color: black; - } \ No newline at end of file diff --git a/src/packages/sensor-item/component/list/list.component.ts b/src/packages/sensor-item/component/list/list.component.ts index c6a2a9e..93241e9 100644 --- a/src/packages/sensor-item/component/list/list.component.ts +++ b/src/packages/sensor-item/component/list/list.component.ts @@ -1,63 +1,32 @@ -// import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core'; -// import { MatTableDataSource, MatSort } from '@angular/material'; -// import { AfterContentInit } from '@angular/core/src/metadata/lifecycle_hooks'; -// import { Router } from '@angular/router'; +import { Component, OnInit, AfterViewInit, AfterContentInit } from '@angular/core'; +import { Router } from '@angular/router'; +import { MetaSensorDisplayItem } from '../../../meta/sensor-display-item/model/MetaSensorDisplayItem'; -// export interface Probe { -// id: string; -// name: string; -// ip: string; -// os: string; -// cidr: string; -// targetCnt: number; -// date: string; -// authBy: string; -// } +export interface Probe { + id: string; + name: string; + ip: string; + os: string; + cidr: string; + targetCnt: number; + date: string; + authBy: string; +} -// @Component({ -// selector: 'of-sensor-item-list', -// templateUrl: './list.component.html', -// styleUrls: ['./list.component.scss'] -// }) -// export class ListComponent implements OnInit, AfterContentInit { +@Component({ + selector: 'of-sensor-item-list', + templateUrl: './list.component.html', +}) +export class ListComponent implements OnInit, AfterContentInit { -// displayedColumns = ['name', 'ip', 'os', 'cidr', 'targetCnt', 'date', 'authBy']; -// dataSource: MatTableDataSource; -// @ViewChild(MatSort) sort: MatSort; + sensorItems: MetaSensorDisplayItem[]; + ngAfterContentInit() { + } -// /** -// * Set the sort after the view init since this component will -// * be able to query its view for the initialized sort. -// */ -// ngAfterContentInit() { -// // temporary data -// const data: Probe[] = new Array(); -// for (let i = 0; i < 10; i++) { -// const p: Probe = { -// id: String('id' + i), -// name: String('name' + i), -// ip: String('ip' + i), -// os: String('os' + i), -// cidr: String('cidr' + i), -// targetCnt: i, -// date: String('date' + i), -// authBy: String('insanity') -// }; -// data.push(p); -// } + constructor(private router: Router) { } -// this.dataSource = new MatTableDataSource(data); -// this.dataSource.sort = this.sort; -// } - -// constructor(private router: Router) { } - -// ngOnInit() { -// } - -// handleRowClick(obj: Probe) { -// this.router.navigate(['probe', obj.id]); -// } -// } + ngOnInit() { + } +} diff --git a/src/packages/sensor-item/sensor-item.module.ts b/src/packages/sensor-item/sensor-item.module.ts index 35ed9b0..8f83309 100644 --- a/src/packages/sensor-item/sensor-item.module.ts +++ b/src/packages/sensor-item/sensor-item.module.ts @@ -1,25 +1,24 @@ -// import { NgModule } from '@angular/core'; -// import { CommonModule } from '@angular/common'; -// import { MaterialModule } from 'packages/commons/material/material.module'; -// import { COMPONENTS } from './component'; -// import { SensorItemStoreModule } from './sensor-item-store.module'; -// import { MetaSensorDisplayItemModule } from '../meta/sensor-display-item/sensor-display-item.module'; -// import { SERVICES } from './service'; +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { COMPONENTS } from './component'; +import { SensorItemStoreModule } from './sensor-item-store.module'; +import { SERVICES } from './service'; +import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module'; -// @NgModule({ -// imports: [ -// CommonModule, -// MaterialModule, -// SensorItemStoreModule, -// ], -// declarations: [ -// COMPONENTS, -// ], -// exports: [ -// COMPONENTS, -// ], -// providers: [ -// SERVICES, -// ], -// }) -// export class SensorItemModule { } +@NgModule({ + imports: [ + CommonModule, + SensorItemStoreModule, + PrimeNGModules, + ], + declarations: [ + COMPONENTS, + ], + exports: [ + COMPONENTS, + ], + providers: [ + SERVICES, + ], +}) +export class SensorItemModule { } diff --git a/src/packages/sensor/component/detail/detail.component.html b/src/packages/sensor/component/detail/detail.component.html index 7592354..0b00084 100644 --- a/src/packages/sensor/component/detail/detail.component.html +++ b/src/packages/sensor/component/detail/detail.component.html @@ -1 +1,72 @@ -

Sensor Detail

\ No newline at end of file +

Sensor Alias 출력

+ +
+
+ +
    +
  • + RUNNING +
    • +
+
+
+ +
+ +
    +
  • + STOPPED +
    • +
+
+ + +
+ + + +
+ +
+
+
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+
+ +
+

Monitored Items

+ +
+
+ + \ No newline at end of file diff --git a/src/packages/sensor/component/detail/detail.component.scss b/src/packages/sensor/component/detail/detail.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/packages/sensor/component/detail/detail.component.ts b/src/packages/sensor/component/detail/detail.component.ts index 42ffd10..7e0c491 100644 --- a/src/packages/sensor/component/detail/detail.component.ts +++ b/src/packages/sensor/component/detail/detail.component.ts @@ -1,19 +1,65 @@ -import { Component, OnInit, Inject } from '@angular/core'; +import { Component, OnInit, Inject, AfterContentInit } 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/protocol'; +import * as DetailStore from '../../store/detail'; +import { sensorSelector } from '../../store'; +import { Sensor } from '../../model'; @Component({ selector: 'of-sensor-detail', templateUrl: './detail.component.html', - styleUrls: ['./detail.component.scss'] + providers: [ConfirmationService] }) -export class DetailComponent implements OnInit { +export class DetailComponent implements OnInit, AfterContentInit { + + sensor$ = this.detailStore.pipe(select(sensorSelector.select('sensor'))); + sensor: Sensor; constructor( private route: ActivatedRoute, private router: Router, + private confirmationService: ConfirmationService, + private detailStore: Store, ) { } ngOnInit() { + 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 } + ) + ); + } + + onStartOrStop() { } + + onEdit() { } + + 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: () => { + } + }); } } diff --git a/src/packages/sensor/component/name-tag/name-tag.component.html b/src/packages/sensor/component/name-tag/name-tag.component.html deleted file mode 100644 index dbea0e5..0000000 --- a/src/packages/sensor/component/name-tag/name-tag.component.html +++ /dev/null @@ -1,5 +0,0 @@ - - - {{sensor.description}} - - \ No newline at end of file diff --git a/src/packages/sensor/component/name-tag/name-tag.component.scss b/src/packages/sensor/component/name-tag/name-tag.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/packages/sensor/component/name-tag/name-tag.component.spec.ts b/src/packages/sensor/component/name-tag/name-tag.component.spec.ts deleted file mode 100644 index e69de29..0000000 diff --git a/src/packages/sensor/component/name-tag/name-tag.component.ts b/src/packages/sensor/component/name-tag/name-tag.component.ts deleted file mode 100644 index aec80eb..0000000 --- a/src/packages/sensor/component/name-tag/name-tag.component.ts +++ /dev/null @@ -1,59 +0,0 @@ -// import { Component, OnInit, AfterViewInit, ViewChild, Input } from '@angular/core'; -// import { MatTableDataSource, MatSort, MatDialog } from '@angular/material'; -// import { AfterContentInit } from '@angular/core/src/metadata/lifecycle_hooks'; -// import { Router } from '@angular/router'; -// import { Sensor } from '../../model'; - -// import { Store, select } from '@ngrx/store'; - -// import * as SensorStore from '../../store'; - -// import { RPCClientError } from '@loafer/ng-rpc/protocol'; -// import * as ListStore from '../../store/list'; -// import { sensorListSelector } from '../../store'; -// import { Page, PageParams } from 'app/commons/model'; -// import { Target } from 'packages/target/model'; - -// @Component({ -// selector: 'of-sensor-name-tag', -// templateUrl: './name-tag.component.html', -// styleUrls: ['./name-tag.component.scss'] -// }) -// export class NameTagComponent implements OnInit, AfterContentInit { - -// sensorList$ = this.store.pipe(select(sensorListSelector.select('page'))); -// sensors: Sensor[]; -// @Input() target: Target; - -// constructor(private router: Router, -// private store: Store, -// private dialog: MatDialog, -// ) { } - -// ngOnInit() { -// this.sensorList$.subscribe( -// (page: Page) => { -// if (page != null) { -// this.sensors = page.content; -// } -// }, -// (error: RPCClientError) => { -// console.log(error.response.message); -// } -// ); -// } - -// ngAfterContentInit() { -// this.getSensors(0); -// } - -// getSensors(pageIndex: number) { -// const pageParams: PageParams = { -// pageNo: pageIndex + '', -// countPerPage: '9999', -// sortCol: 'id', -// sortDirection: 'descending' -// }; -// this.store.dispatch(new ListStore.ReadAllByTarget({ target: this.target, pageParams })); -// } -// } diff --git a/src/packages/sensor/sensor.module.ts b/src/packages/sensor/sensor.module.ts index 493b5ba..3a17a56 100644 --- a/src/packages/sensor/sensor.module.ts +++ b/src/packages/sensor/sensor.module.ts @@ -5,9 +5,9 @@ import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module'; import { COMPONENTS } from './component'; import { SERVICES } from './service'; import { SensorStoreModule } from './sensor-store.module'; +import { SensorItemModule } from '../sensor-item/sensor-item.module'; // import { MetaCrawlerModule } from '../meta/crawler/crawler.module'; // import { MetaSensorDisplayItemModule } from '../meta/sensor-display-item/sensor-display-item.module'; -// import { SensorItemModule } from '../sensor-item/sensor-item.module'; // import { MetaCrawlerInputItemModule } from '../meta/crawler-input-item/crawler-input.module'; @NgModule({ @@ -16,7 +16,7 @@ import { SensorStoreModule } from './sensor-store.module'; FormsModule, SensorStoreModule, PrimeNGModules, - // SensorItemModule, + SensorItemModule // MetaCrawlerModule, // MetaSensorDisplayItemModule, ], diff --git a/src/packages/sensor/service/sensor.service.ts b/src/packages/sensor/service/sensor.service.ts index 15c41ab..1987b1b 100644 --- a/src/packages/sensor/service/sensor.service.ts +++ b/src/packages/sensor/service/sensor.service.ts @@ -36,4 +36,8 @@ export class SensorService { public readAllByTarget(target: Target, pageParams: PageParams): Observable { return this.rpcService.call('SensorService.readAllByTarget', target, pageParams); } + + public read(id: string): Observable { + return this.rpcService.call('SensorService.read', id); + } } diff --git a/src/packages/sensor/store/detail/detail.action.ts b/src/packages/sensor/store/detail/detail.action.ts new file mode 100644 index 0000000..bf5550c --- /dev/null +++ b/src/packages/sensor/store/detail/detail.action.ts @@ -0,0 +1,37 @@ +import { Action } from '@ngrx/store'; + +import { RPCClientError } from '@loafer/ng-rpc/protocol'; + +import { Sensor } from '../../model'; + + +export enum ActionType { + Read = '[sensor.detail] Read', + ReadSuccess = '[sensor.detail] ReadSuccess', + ReadFailure = '[sensor.detail] ReadFailure', +} + +export class Read implements Action { + readonly type = ActionType.Read; + + constructor(public payload: {id: string}) {} +} + +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 type Actions = + | Read + | ReadSuccess + | ReadFailure +; diff --git a/src/packages/sensor/store/detail/detail.effect.spec.ts b/src/packages/sensor/store/detail/detail.effect.spec.ts new file mode 100644 index 0000000..b1c2217 --- /dev/null +++ b/src/packages/sensor/store/detail/detail.effect.spec.ts @@ -0,0 +1,15 @@ +import { TestBed, inject } from '@angular/core/testing'; + +import { Effects } from './detail.effect'; + +describe('ProbeDetail.Effects', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [Effects] + }); + }); + + it('should be created', inject([Effects], (effects: Effects) => { + expect(effects).toBeTruthy(); + })); +}); diff --git a/src/packages/sensor/store/detail/detail.effect.ts b/src/packages/sensor/store/detail/detail.effect.ts new file mode 100644 index 0000000..22a3e71 --- /dev/null +++ b/src/packages/sensor/store/detail/detail.effect.ts @@ -0,0 +1,49 @@ +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/protocol'; + +import { Sensor } from '../../model'; +import { SensorService } from '../../service/sensor.service'; + +import { + Read, + ReadFailure, + ReadSuccess, + ActionType +} from './detail.action'; + +@Injectable() +export class Effects { + + constructor( + private actions$: Actions, + private sensorService: SensorService, + private router: Router + ) { } + + @Effect() + read$: Observable = this.actions$ + .ofType(ActionType.Read) + .map((action: Read) => action.payload) + .switchMap(payload => this.sensorService.read(payload.id)) + .map(sensor => { + return new ReadSuccess(sensor); + }) + .catch((error: RPCClientError) => { + return of(new ReadFailure(error)); + }); +} diff --git a/src/packages/sensor/store/detail/detail.reducer.ts b/src/packages/sensor/store/detail/detail.reducer.ts new file mode 100644 index 0000000..e2ac411 --- /dev/null +++ b/src/packages/sensor/store/detail/detail.reducer.ts @@ -0,0 +1,49 @@ +import { + Read, + ReadFailure, + ReadSuccess, + ActionType, + Actions, +} from './detail.action'; + +import { + State, + initialState, +} from './detail.state'; + +import { Sensor } from '../../model'; + + +export function reducer(state = initialState, action: Actions): State { + switch (action.type) { + case ActionType.Read: { + return { + ...state, + error: null, + isPending: true, + }; + } + + case ActionType.ReadSuccess: { + return { + ...state, + error: null, + isPending: false, + sensor: action.payload, + }; + } + + case ActionType.ReadFailure: { + return { + ...state, + error: action.payload, + isPending: false, + sensor: null, + }; + } + + default: { + return state; + } + } +} diff --git a/src/packages/sensor/store/detail/detail.state.ts b/src/packages/sensor/store/detail/detail.state.ts new file mode 100644 index 0000000..6d846eb --- /dev/null +++ b/src/packages/sensor/store/detail/detail.state.ts @@ -0,0 +1,15 @@ +import { RPCClientError } from '@loafer/ng-rpc/protocol'; +import { Sensor } from '../../model'; +import { createEntityAdapter, EntityAdapter, EntityState } from '@ngrx/entity'; + +export interface State extends EntityState { + error: RPCClientError | null; + isPending: boolean; + sensor: Sensor | null; +} +export const adapter: EntityAdapter = createEntityAdapter(); +export const initialState: State = adapter.getInitialState({ + error: null, + isPending: false, + sensor: null, +}); diff --git a/src/packages/sensor/store/detail/index.ts b/src/packages/sensor/store/detail/index.ts new file mode 100644 index 0000000..23ae8ab --- /dev/null +++ b/src/packages/sensor/store/detail/index.ts @@ -0,0 +1,4 @@ +export * from './detail.action'; +export * from './detail.effect'; +export * from './detail.reducer'; +export * from './detail.state'; diff --git a/src/packages/sensor/store/index.ts b/src/packages/sensor/store/index.ts index 69c4705..b983318 100644 --- a/src/packages/sensor/store/index.ts +++ b/src/packages/sensor/store/index.ts @@ -9,21 +9,21 @@ import { StateSelector } from 'packages/core/ngrx/store'; import { MODULE } from '../sensor.constant'; import * as ListStore from './list'; -import * as RegistStore from './regist'; +import * as DetailStore from './detail'; export interface State { list: ListStore.State; - sensor: RegistStore.State; + sensor: DetailStore.State; } export const REDUCERS = { list: ListStore.reducer, - sensor: RegistStore.reducer, + sensor: DetailStore.reducer, }; export const EFFECTS = [ ListStore.Effects, - RegistStore.Effects, + DetailStore.Effects, ]; export const sensorState = createFeatureSelector(MODULE.name); @@ -32,7 +32,7 @@ export const sensorListSelector = new StateSelector(createSelec sensorState, (state: State) => state.list )); -export const sensorSelector = new StateSelector(createSelector( +export const sensorSelector = new StateSelector(createSelector( sensorState, (state: State) => state.sensor ));