overflow_cloud/member_webapp
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sensor config popup is in progress

Browse Source
This commit is contained in:
insanity 2018-04-12 21:13:19 +09:00
parent 59be65ca67
commit 3d80b212d2
14 changed files with 140 additions and 295 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/packages/sensor/component/index.ts
View File

@ -5,6 +5,7 @@ import { TargetSelectorComponent } from './setting/target-selector/target-select
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';
import { SensorItemSelectorComponent } from './setting/sensor-item-selector/sensor-item-selector.component'; import { SensorItemSelectorComponent } from './setting/sensor-item-selector/sensor-item-selector.component';
import { SettingETCComponent } from './setting/setting-etc/setting-etc.component';
// import { SettingResultComponent } from './setting-result/setting-result.component'; // import { SettingResultComponent } from './setting-result/setting-result.component';
// import { FilterComponent } from './list/filter/filter.component'; // import { FilterComponent } from './list/filter/filter.component';
// import { ListComponent } from './list/list.component'; // import { ListComponent } from './list/list.component';
@ -19,10 +20,11 @@ export const COMPONENTS = [
CrawlerSelectorComponent, CrawlerSelectorComponent,
CrawlerAuthComponent, CrawlerAuthComponent,
SensorItemSelectorComponent, SensorItemSelectorComponent,
// SettingResultComponent, SettingETCComponent,
// SettingResultComponent,
ListComponent, ListComponent,
// FilterComponent, // FilterComponent,
// DetailComponent, // DetailComponent,
// SettingETCComponent, // SettingETCComponent,
// NameTagComponent, // NameTagComponent,
]; ];

4
src/packages/sensor/component/list/list.component.html
View File

@ -1,9 +1,11 @@
<div> <div>
<p-dialog [modal]="true" [width]="800" [(visible)]="sensorSettingDisplay" [showHeader]="false"> <p-dialog [modal]="true" [width]="800" [(visible)]="sensorSettingDisplay" [showHeader]="false">
<of-sensor-setting [selectedTarget]="target" (close)="onSensorSettingClose()"></of-sensor-setting> <of-sensor-setting [isAllTarget]="isAllTarget" [selectedTarget]="target" (close)="onSensorSettingClose()"></of-sensor-setting>
</p-dialog> </p-dialog>
<button type="button" label="Add Sensor" icon="ui-icon-add" pButton (click)="onAddSensor()"></button> <button type="button" label="Add Sensor" icon="ui-icon-add" pButton (click)="onAddSensor()"></button>
<button type="button" label="Add Sensor with Target" icon="ui-icon-add" pButton (click)="onAddSensorWithTarget()"></button>
<button type="button" label="Add Sensor with Target2" icon="ui-icon-add" pButton (click)="onAddSensorWithTarget2()"></button>
</div> </div>
<div>sensor list</div> <div>sensor list</div>

32
src/packages/sensor/component/list/list.component.ts
View File

@ -28,6 +28,7 @@ export class ListComponent implements OnInit, AfterContentInit {
sensorSettingDisplay = false; sensorSettingDisplay = false;
target: Target = null; target: Target = null;
isAllTarget = false;
constructor(private router: Router, constructor(private router: Router,
private store: Store<ListStore.State>, private store: Store<ListStore.State>,
@ -44,14 +45,6 @@ export class ListComponent implements OnInit, AfterContentInit {
// console.log(error.response.message); // console.log(error.response.message);
// } // }
// ); // );
// Test
// this.target = {
// id: 1,
// createDate: new Date(),
// displayName: 'Alredy selected target',
// description: 'Desc..',
// };
} }
ngAfterContentInit() { ngAfterContentInit() {
@ -81,11 +74,32 @@ export class ListComponent implements OnInit, AfterContentInit {
} }
onAddSensor() { onAddSensor() {
this.isAllTarget = true;
this.sensorSettingDisplay = true; this.sensorSettingDisplay = true;
} }
onAddSensorWithTarget() {
this.isAllTarget = false;
this.target = {
id: 1,
createDate: new Date(),
displayName: 'Alredy selected target111',
description: 'Desc..',
};
this.sensorSettingDisplay = true;
}
onAddSensorWithTarget2() {
this.isAllTarget = false;
this.target = {
id: 2,
createDate: new Date(),
displayName: 'Alredy selected target222',
description: 'Desc..',
};
this.sensorSettingDisplay = true;
}
onSensorSettingClose() { onSensorSettingClose() {
this.sensorSettingDisplay = false; this.sensorSettingDisplay = false;
} }
} }

7
src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.html
View File

@ -1,6 +1,5 @@
<p-panel header="{{title}}"> <p-panel header="{{title}}">
<div class="ui-g" style="height: 180px; overflow: auto"> <div *ngIf="crawler; else info" class="ui-g" style="height: 180px; overflow: auto">
<div class="ui-g-12" *ngFor="let item of inputItems"> <div class="ui-g-12" *ngFor="let item of inputItems">
<span class="md-inputfield"> <span class="md-inputfield">
<input id="name" type="text" pInputText /> <input id="name" type="text" pInputText />
@ -8,6 +7,10 @@
</span> </span>
</div> </div>
</div> </div>
<ng-template #info>
<div>개발자의 배려가 돋보이는 친절한 안내 메시지</div>
</ng-template>
<button *ngIf="crawler" type="button" label="Test" icon="ui-icon-send" pButton (click)="testCredentials()"></button> <button *ngIf="crawler" type="button" label="Test" icon="ui-icon-send" pButton (click)="testCredentials()"></button>
</p-panel> </p-panel>

45
src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.html
View File

@ -1,31 +1,16 @@
<p-orderList [value]="crawlers" [listStyle]="{'height':'200px'}" [responsive]="true" header="2. Choose a Crawler" filterBy="name" <div *ngIf="target; else info">
(onSelectionChange)="onSelectionChange($event)"> <p-orderList [value]="crawlers" [listStyle]="{'height':'200px'}" [responsive]="true" header="2. Choose a Crawler" filterBy="name"
<ng-template let-crawler pTemplate="item"> (onSelectionChange)="onSelectionChange($event)">
<div class="ui-helper-clearfix"> <ng-template let-crawler pTemplate="item">
<div style="font-size:14px;float:right;margin:15px 5px 0 0">{{crawler.name}}</div> <div class="ui-helper-clearfix">
</div> <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{crawler.name}}</div>
</ng-template> </div>
</p-orderList> </ng-template>
</p-orderList>
</div>
<ng-template #info>
<!-- <div> <p-panel header="2. Choose a Crawler">
<mat-card> <div>개발자의 배려가 돋보이는 친절한 안내 메시지</div>
<mat-card-header> </p-panel>
<mat-card-title>Step 2</mat-card-title> </ng-template>
<mat-card-subtitle>Crawler 선택</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<perfect-scrollbar style="height: 150px">
<mat-radio-group class="radio-group">
<mat-radio-button class="radio-button" *ngFor="let crawler of crawlers" value={{crawler.id}} (change)="crawlerSelected(crawler)" [checked]="crawler.id === selectedCrawlerId">
{{crawler.name}}
</mat-radio-button>
</mat-radio-group>
</perfect-scrollbar>
</mat-card-content>
</mat-card>
</div> -->

41
src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.html
View File

@ -1,41 +1,10 @@
<p-panel header="4. Choose sensor items"> <p-panel header="4. Choose sensor items">
<div class="ui-g" style="height: 200px; overflow: auto"> <div *ngIf="crawler && target; else info" class="ui-g" style="height: 200px; overflow: auto">
<p-tree [value]="itemTreeNode" selectionMode="checkbox" [(selection)]="selectedItems" (onNodeSelect)="onNodeSelect($event)" <p-tree [value]="itemTreeNode" selectionMode="checkbox" [(selection)]="selectedItems" (onNodeSelect)="onNodeSelect($event)"
(onNodeUnselect)="onNodeUnselect($event)"></p-tree> (onNodeUnselect)="onNodeUnselect($event)"></p-tree>
</div> </div>
</p-panel>
<!-- <div> <ng-template #info>
<mat-card> <div>개발자의 배려가 돋보이는 친절한 안내 메시지</div>
<mat-card-header> </ng-template>
<mat-card-title>Step 4</mat-card-title> </p-panel>
<mat-card-subtitle>Select Sensor Items</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<perfect-scrollbar style="height: 150px">
<tree-root #tree [focused]="true" [nodes]="nodes" (updateData)="onTreeDataLoad($event)">
<ng-template #treeNodeFullTemplate let-node let-index="index" let-templates="templates">
<div class="tree-node">
<tree-node-expander [node]="node" ></tree-node-expander>
<mat-checkbox [checked]="node.isActive" (change)="checkItem(node)"></mat-checkbox>
<div
class="node-content-wrapper"
[class.node-content-wrapper-active]="node.isActive"
[class.node-content-wrapper-focused]="node.isFocused"
(click)="checkItem(node)">
<mat-chip *ngIf="node.data.default" color="primary" (click)="checkItem(node)" >Recommend!</mat-chip>
<span [class]="node.data.className" [class.title]="true">{{ node.data.title }} {{node.data.key}}</span>
</div>
<tree-node-children [node]="node" [templates]="templates"></tree-node-children>
</div>
</ng-template>
</tree-root>
</perfect-scrollbar>
</mat-card-content>
</mat-card>
</div> -->

55
src/packages/sensor/component/setting/setting-etc/setting-etc.component.html
View File

@ -1,56 +1,3 @@
<div> <div>
<mat-grid-list cols="2" rowHeight="5:1"> page 2222222
<mat-grid-tile [colspan]="1" [rowspan]="2" style="background-color: lightblue">
<div>
<div>
<mat-form-field hintLabel="Max 15 characters">
<input matInput #input maxlength="15" placeholder="Sensor Alias">
<mat-hint align="end">{{input.value?.length || 0}}/15</mat-hint>
</mat-form-field>
</div>
<div>
<div>Interval</div>
<mat-radio-group class="radio-group" [(ngModel)]="interval">
<mat-radio-button class="radio-button" *ngFor="let interval of intervals" [value]="interval">
{{interval}}
</mat-radio-button>
</mat-radio-group>
</div>
</div>
</mat-grid-tile>
<mat-grid-tile [colspan]="1" [rowspan]="2" style="background-color: lightcoral">
<of-info-table [data]="targetInfo"></of-info-table>
</mat-grid-tile>
<mat-grid-tile [colspan]="2" [rowspan]="3" style="background-color: lightpink">
<!-- (change)="handleNotificationOn(item)" -->
<mat-list #items style="width: 70%">
<mat-list-item *ngFor="let item of selectedItems">
<h4 mat-line>{{item.displayName}}</h4>
<mat-slide-toggle [(ngModel)]="notiOn">[Notification]</mat-slide-toggle>
<!-- <p mat-line> {{item.key}} </p> -->
<h4 mat-line>
<!-- <div *ngIf="opened.indexOf(item.id) >= 0"> -->
<div *ngIf="notiOn">
<form>
<mat-form-field>
<input matInput placeholder="Min" value="">
</mat-form-field>
~
<mat-form-field>
<input matInput placeholder="Max" value="">
</mat-form-field>
</form>
</div>
</h4>
</mat-list-item>
</mat-list>
</mat-grid-tile>
</mat-grid-list>
</div> </div>

9
src/packages/sensor/component/setting/setting-etc/setting-etc.component.scss
View File

@ -1,9 +0,0 @@
.radio-group {
display: inline-flex;
flex-direction: column;
}
.radio-button {
margin: 5px;
}

78
src/packages/sensor/component/setting/setting-etc/setting-etc.component.ts
View File

@ -1,62 +1,32 @@
// import { Component, OnInit, Input } from '@angular/core'; import { Component, OnInit, Input } from '@angular/core';
// import { Router } from '@angular/router'; import { Router } from '@angular/router';
// import { MetaCrawler } from 'packages/meta/crawler/model/MetaCrawler'; import { MetaCrawler } from 'packages/meta/crawler/model/MetaCrawler';
// import { MetaSensorDisplayItem } from '../../../../meta/sensor-display-item/model/MetaSensorDisplayItem'; import { MetaSensorDisplayItem } from '../../../../meta/sensor-display-item/model/MetaSensorDisplayItem';
// import { Target } from 'packages/target/model'; import { Target } from 'packages/target/model';
// import { MatSnackBar } from '@angular/material';
// @Component({ @Component({
// selector: 'of-sensor-setting-etc', selector: 'of-sensor-setting-etc',
// templateUrl: './setting-etc.component.html', templateUrl: './setting-etc.component.html',
// styleUrls: ['./setting-etc.component.scss'] })
// }) export class SettingETCComponent implements OnInit {
// export class SettingETCComponent implements OnInit {
// @Input() selectedTarget: Target; @Input() selectedTarget: Target;
// @Input() selectedCrawler: MetaCrawler; @Input() selectedCrawler: MetaCrawler;
// @Input() selectedItems: MetaSensorDisplayItem[]; @Input() selectedItems: MetaSensorDisplayItem[];
// intervals = [ intervals = [
// '600 sec', '600 sec',
// '400 sec', '400 sec',
// '200 sec', '200 sec',
// ]; ];
// targetInfo;
// opened = [];
// constructor( constructor(
// private router: Router, private router: Router,
// private snackBar: MatSnackBar ) { }
// ) { }
// ngOnInit() { ngOnInit() {
// this.targetInfo = [ }
// {
// key: 'IP',
// value: 'todo',
// },
// {
// key: 'Mac Address',
// value: 'todo',
// },
// {
// key: 'OS',
// value: 'todo',
// },
// {
// key: 'Crawler',
// value: this.selectedCrawler ? this.selectedCrawler.name : '',
// },
// ];
// }
// onChange(e: any) { }
// this.opened = e;
// }
// handleTitleClick(e: Event) {
// e.preventDefault();
// }
// }

37
src/packages/sensor/component/setting/setting.component.html
View File

@ -1,19 +1,28 @@
<div class="ui-g"> <div [hidden]="step !== 1">
<div class="ui-g-6"> <div class="ui-g">
<of-target-selector [target]="selectedTarget" (targetSelected)="onTargetSelect($event)"></of-target-selector> <div class="ui-g-6">
</div> <of-target-selector [target]="selectedTarget" (targetSelected)="onTargetSelect($event)" [isAllTarget]="isAllTarget"></of-target-selector>
<div class="ui-g-6"> </div>
<of-crawler-auth [crawler]="selectedCrawler" (credentialPassed)="onCredentialPass($event)"></of-crawler-auth> <div class="ui-g-6">
</div> <of-crawler-auth [crawler]="selectedCrawler" (credentialPassed)="onCredentialPass($event)"></of-crawler-auth>
<div class="ui-g-6"> </div>
<of-crawler-selector [target]="selectedTarget" (crawlerSelected)="onCrawlerSelect($event)"></of-crawler-selector> <div class="ui-g-6">
</div> <of-crawler-selector [target]="selectedTarget" (crawlerSelected)="onCrawlerSelect($event)"></of-crawler-selector>
<div class="ui-g-6"> </div>
<of-sensor-item-selector [target]="selectedTarget" [crawler]="selectedCrawler" (sensorItemsSelected)="onItemsSelect($event)"></of-sensor-item-selector> <div class="ui-g-6">
<of-sensor-item-selector [target]="selectedTarget" [crawler]="selectedCrawler" (sensorItemsSelected)="onItemsSelect($event)"></of-sensor-item-selector>
</div>
</div> </div>
</div> </div>
<div *ngIf="step === 2">
<of-sensor-setting-etc [selectedTarget]="selectedTarget" [selectedCrawler]="selectedCrawler" [selectedItems]="selectedSensorDisplayItems"></of-sensor-setting-etc>
</div>
<div> <div>
<button pButton class="ui-button-danger" type="button" label="Cancel" icon="ui-icon-close" (click)="onCancel()"></button> <button pButton *ngIf="step === 1" class="ui-button-danger" type="button" label="Cancel" icon="ui-icon-close" (click)="onCancel()"></button>
<button pButton [disabled]="!nextable" type="button" label="Next" icon="fa-check" (click)="onNext()"></button> <button pButton *ngIf="step === 2" class="ui-button-danger" type="button" label="Prev" icon="ui-icon-close" (click)="onPrev()"></button>
<button pButton *ngIf="step === 1" [disabled]="!nextable" type="button" label="Next" icon="fa-check" (click)="onNext()"></button>
<button pButton *ngIf="step === 2" type="button" label="Done" icon="fa-check" (click)="onDone()"></button>
</div> </div>

26
src/packages/sensor/component/setting/setting.component.scss
View File

@ -1,26 +0,0 @@
.ui-steps .ui-steps-item {
width: 25%;
}
.ui-steps.steps-custom {
margin-bottom: 30px;
}
.ui-steps.steps-custom .ui-steps-item .ui-menuitem-link {
height: 10px;
padding: 0 1em;
}
.ui-steps.steps-custom .ui-steps-item .ui-steps-number {
background-color: #0081c2;
color: #FFFFFF;
display: inline-block;
width: 36px;
border-radius: 50%;
margin-top: -14px;
margin-bottom: 10px;
}
.ui-steps.steps-custom .ui-steps-item .ui-steps-title {
color: #555555;
}

29
src/packages/sensor/component/setting/setting.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit, Input, Inject, DoCheck, ViewEncapsulation, Output, EventEmitter, OnDestroy } from '@angular/core'; import { Component, OnInit, Input, Inject, DoCheck, ViewEncapsulation, Output, EventEmitter, OnDestroy, OnChanges } from '@angular/core';
import { Target } from 'packages/target/model'; import { Target } from 'packages/target/model';
import { Infra } from 'packages/infra/model'; import { Infra } from 'packages/infra/model';
import { MetaCrawler } from 'packages/meta/crawler/model/MetaCrawler'; import { MetaCrawler } from 'packages/meta/crawler/model/MetaCrawler';
@ -16,18 +16,18 @@ import { TreeNode } from 'primeng/primeng';
templateUrl: './setting.component.html', templateUrl: './setting.component.html',
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None
}) })
export class SettingComponent implements OnInit, DoCheck { export class SettingComponent implements OnInit, DoCheck, OnChanges {
@Input() isAllTarget: boolean;
@Input() selectedTarget: Target;
@Output() close = new EventEmitter(); @Output() close = new EventEmitter();
nextable = false; nextable = false;
sensorItemKeys$ = this.keyListStore.pipe(select(ReadSensorItemKeySelector.select('list'))); sensorItemKeys$ = this.keyListStore.pipe(select(ReadSensorItemKeySelector.select('list')));
@Input() selectedTarget: Target;
selectedCrawler: MetaCrawler; selectedCrawler: MetaCrawler;
credentialPassed: boolean; credentialPassed: boolean;
selectedSensorDisplayItems: MetaSensorDisplayItem[]; selectedSensorDisplayItems: MetaSensorDisplayItem[];
itemNodes: TreeNode[]; itemNodes: TreeNode[];
step = 1;
constructor( constructor(
private keyListStore: Store<SensorItemKeyListStore.State>, private keyListStore: Store<SensorItemKeyListStore.State>,
@ -47,6 +47,9 @@ export class SettingComponent implements OnInit, DoCheck {
// ); // );
} }
ngOnChanges() {
}
ngDoCheck() { ngDoCheck() {
try { try {
if ( if (
@ -60,18 +63,24 @@ export class SettingComponent implements OnInit, DoCheck {
} else { } else {
this.nextable = true; this.nextable = true;
} }
} catch (exception) {} } catch (exception) {
this.nextable = false;
}
} }
onCancel() { onCancel() {
this.selectedTarget = null;
this.selectedCrawler = null;
this.credentialPassed = false;
this.selectedSensorDisplayItems = null;
this.close.emit(); this.close.emit();
} }
onNext() { onNext() {
this.step += 1;
}
onPrev() {
this.step -= 1;
}
onDone() {
this.selectedSensorDisplayItems = []; this.selectedSensorDisplayItems = [];
for (const node of this.itemNodes) { for (const node of this.itemNodes) {
if (node.data && node.data !== undefined) { if (node.data && node.data !== undefined) {

51
src/packages/sensor/component/setting/target-selector/target-selector.component.html
View File

@ -1,44 +1,9 @@
<div> <p-orderList [value]="targets" [listStyle]="{'height':'200px'}" [responsive]="true" header="1. Choose a target" filterBy="displayName"
<p-orderList [value]="targets" [listStyle]="{'height':'200px'}" [responsive]="true" header="1. Choose a target" filterBy="displayName" (onSelectionChange)="onSelectionChange($event)">
(onSelectionChange)="onSelectionChange($event)"> <ng-template let-target pTemplate="item">
<ng-template let-target pTemplate="item"> <div class="ui-helper-clearfix">
<div class="ui-helper-clearfix"> <img src="assets/demo/images/car/BMW.gif" style="display:inline-block;margin:2px 0 2px 2px" />
<img src="assets/demo/images/car/BMW.gif" style="display:inline-block;margin:2px 0 2px 2px" /> <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{target.displayName}}</div>
<div style="font-size:14px;float:right;margin:15px 5px 0 0">{{target.displayName}}</div>
</div>
</ng-template>
</p-orderList>
</div>
<!-- <div *ngIf="target">
<p-panel header="1. Target">
<div>
{{target.displayName}}
</div> </div>
<div> </ng-template>
{{target.description}} </p-orderList>
</div>
</p-panel>
</div> -->
<!-- <div style="width:100%">
<mat-card>
<mat-card-header>
<mat-card-title>Step 1</mat-card-title>
<mat-card-subtitle>Select Target</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<perfect-scrollbar style="height: 150px">
<mat-radio-group class="radio-group" >
<mat-radio-button class="radio-button" *ngFor="let t of targets" value={{t.id}} (change)="targetSelected(t)" [checked]="targets.length === 1 && t.id === target.id">
{{t.displayName}}
</mat-radio-button>
</mat-radio-group>
</perfect-scrollbar>
</mat-card-content>
</mat-card>
</div> -->

9
src/packages/sensor/component/setting/target-selector/target-selector.component.ts
View File

@ -19,6 +19,7 @@ export class TargetSelectorComponent implements OnInit, OnChanges {
targets$ = this.store.pipe(select(ListSelector.select('page'))); targets$ = this.store.pipe(select(ListSelector.select('page')));
@Input() target: Target = null; @Input() target: Target = null;
@Input() isAllTarget: boolean;
@Output() targetSelected = new EventEmitter<Target>(); @Output() targetSelected = new EventEmitter<Target>();
targets: Target[] = null; targets: Target[] = null;
@ -33,7 +34,6 @@ export class TargetSelectorComponent implements OnInit, OnChanges {
this.getTargetList(); this.getTargetList();
} else { } else {
this.targets.push(this.target); this.targets.push(this.target);
this.targetSelected.emit(this.target);
} }
// this.targets$.subscribe( // this.targets$.subscribe(
@ -49,7 +49,12 @@ export class TargetSelectorComponent implements OnInit, OnChanges {
} }
ngOnChanges() { ngOnChanges() {
this.targets = new Array();
if (this.isAllTarget) {
this.getTargetList();
} else {
this.targets.push(this.target);
}
} }
convertInfraToTarget(page: Page) { convertInfraToTarget(page: Page) {