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 18:54:15 +09:00
parent 75fb31b0b2
commit 63b5aa7d82
15 changed files with 301 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/app-routing.module.ts
View File

@ -3,8 +3,8 @@ import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
import { AuthGuard } from './commons/guard/auth.guard';
const routes: Routes = [
{ path: '', loadChildren: './pages/pages.module#PagesModule', canActivate: [AuthGuard] },
// { path: '', loadChildren: './pages/pages.module#PagesModule'},
// { path: '', loadChildren: './pages/pages.module#PagesModule', canActivate: [AuthGuard] },
{ path: '', loadChildren: './pages/pages.module#PagesModule'},
{ path: 'auth', loadChildren: './pages/auth/auth-page.module#AuthPageModule' },
// { path: 'errors', loadChildren: './pages/errors/errors-page.module#ErrorsPageModule' },
];

20
src/packages/meta/crawler-input-item/model/MetaCrawlerInputItem.ts
View File

@ -4,14 +4,14 @@ import { MetaCrawler } from 'packages/meta/crawler/model/MetaCrawler';
export interface MetaCrawlerInputItem {
id?: number;
inputType: MetaInputType;
crawler: MetaCrawler;
description: string;
name: string;
createDate: Date;
required: boolean;
defaultValue: string;
pattern: string;
keyName: string;
keyValue: string;
inputType?: MetaInputType;
crawler?: MetaCrawler;
description?: string;
name?: string;
createDate?: Date;
required?: boolean;
defaultValue?: string;
pattern?: string;
keyName?: string;
keyValue?: string;
}

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

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

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

@ -10,9 +10,10 @@ import * as SensorStore from '../../store';
import { RPCClientError } from '@loafer/ng-rpc/protocol';
import * as ListStore from '../../store/list';
import { sensorListSelector } from '../../store';
import { Domain } from '../../../domain/model';
import { Domain } from 'packages/domain/model';
import { AuthSelector } from 'packages/member/store';
import { Page, PageParams } from 'app/commons/model';
import { Target } from 'packages/target/model';
@Component({
selector: 'of-sensor-list',
@ -26,6 +27,8 @@ export class ListComponent implements OnInit, AfterContentInit {
totalLength = 0;
sensorSettingDisplay = false;
target: Target = null;
constructor(private router: Router,
private store: Store<ListStore.State>,
) { }
@ -41,6 +44,14 @@ export class ListComponent implements OnInit, AfterContentInit {
// console.log(error.response.message);
// }
// );
// Test
// this.target = {
// id: 1,
// createDate: new Date(),
// displayName: 'Alredy selected target',
// description: 'Desc..',
// };
}
ngAfterContentInit() {
@ -73,4 +84,8 @@ export class ListComponent implements OnInit, AfterContentInit {
this.sensorSettingDisplay = true;
}
onSensorSettingClose() {
this.sensorSettingDisplay = false;
}
}

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

@ -1,41 +1,13 @@
<p-panel header="3. Credential">
<p-panel header="{{title}}">
<div class="ui-g" style="height: 180px; overflow: auto">
<div class="ui-g-12">
<div class="ui-g-12" *ngFor="let item of inputItems">
<span class="md-inputfield">
<input id="name" type="text" pInputText />
<label for="name">User</label>
</span>
</div>
<div class="ui-g-12">
<span class="md-inputfield">
<input id="age" type="text" pInputText />
<label for="age">Password</label>
</span>
</div>
<div class="ui-g-12">
<span class="md-inputfield">
<input id="name" type="text" pInputText />
<label for="name">User</label>
</span>
</div>
<div class="ui-g-12">
<span class="md-inputfield">
<input id="age" type="text" pInputText />
<label for="age">Password</label>
</span>
</div>
<div class="ui-g-12">
<span class="md-inputfield">
<input id="name" type="text" pInputText />
<label for="name">User</label>
</span>
</div>
<div class="ui-g-12">
<span class="md-inputfield">
<input id="age" type="text" pInputText />
<label for="age">Password</label>
</span>
</div>
</div>
<button type="button" label="Test" icon="ui-icon-send" pButton></button>
<button *ngIf="crawler" type="button" label="Test" icon="ui-icon-send" pButton (click)="testCredentials()"></button>
</p-panel>

76
src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.ts
View File

@ -17,50 +17,66 @@ export class CrawlerAuthComponent implements OnInit, OnChanges {
inputItems$ = this.listStore.pipe(select(ReadCrawlerInputItemSelector.select('inputs')));
inputItems: MetaCrawlerInputItem[];
title: string;
@Output() testPassEvent = new EventEmitter<boolean>();
@Output() credentialPassed = new EventEmitter<boolean>();
@Input() crawler: MetaCrawler;
@Input() selectedCrawler: MetaCrawler;
constructor(
private router: Router,
private listStore: Store<ListStore.State>,
) { }
ngOnInit() {
this.inputItems$.subscribe(
(list: MetaCrawlerInputItem[]) => {
if (list !== null) {
if (this.inputItems !== list) {
this.testPassEvent.emit(false);
}
this.inputItems = list;
}
},
(error: RPCClientError) => {
console.log(error.response.message);
}
);
// this.inputItems$.subscribe(
// (list: MetaCrawlerInputItem[]) => {
// if (list !== null) {
// if (this.inputItems !== list) {
// this.testPassEvent.emit(false);
// }
// this.inputItems = list;
// }
// },
// (error: RPCClientError) => {
// console.log(error.response.message);
// }
// );
}
ngOnChanges() {
this.getCrawlerAuthInputItems();
// this.getCrawlerAuthInputItems();
this.title = '3. Credentials';
this.inputItems = [];
// Temporary data
if (null == this.crawler) {
return;
}
this.title += ' for ' + this.crawler.name;
for (let i = 0; i < 10; i++) {
const item: MetaCrawlerInputItem = {
};
this.inputItems.push(item);
}
}
getCrawlerAuthInputItems() {
this.listStore.dispatch(new ListStore.ReadAll(this.selectedCrawler));
}
this.listStore.dispatch(new ListStore.ReadAll(this.crawler));
}
testConnect() {
switch (this.selectedCrawler.id) {
case 1:
break;
case 2:
break;
case 3:
break;
default :
break;
}
this.testPassEvent.emit(true);
testCredentials() {
// switch (this.crawler.id) {
// case 1:
// break;
// case 2:
// break;
// case 3:
// break;
// default :
// break;
// }
this.credentialPassed.emit(true);
}
}

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

@ -1,7 +1,7 @@
<p-orderList [value]="crawlers" [listStyle]="{'height':'200px'}" [responsive]="true" header="2. Choose a Crawler" filterBy="name">
<p-orderList [value]="crawlers" [listStyle]="{'height':'200px'}" [responsive]="true" header="2. Choose a Crawler" filterBy="name"
(onSelectionChange)="onSelectionChange($event)">
<ng-template let-crawler pTemplate="item">
<div class="ui-helper-clearfix">
<!-- <img src="assets/demo/images/car/Audi.gif" style="display:inline-block;margin:2px 0 2px 2px" /> -->
<div style="font-size:14px;float:right;margin:15px 5px 0 0">{{crawler.name}}</div>
</div>
</ng-template>

37
src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.ts
View File

@ -17,14 +17,14 @@ import { MetaCrawler } from 'packages/meta/crawler/model/MetaCrawler';
export class CrawlerSelectorComponent implements OnInit, OnChanges, AfterContentInit {
crawlers$ = this.listStore.pipe(select(ReadAllCrawlerSelector.select('metaCrawlerList')));
@Input() selectedTarget: Target;
@Input() target: Target;
crawlers: MetaCrawler[];
@Output() crawlerSelectEvent = new EventEmitter<MetaCrawler>();
@Output() crawlerSelected = new EventEmitter<MetaCrawler>();
constructor(
private router: Router,
private listStore: Store<ListStore.State>,
) {}
) { }
ngOnInit() {
// this.crawlers$.subscribe(
@ -38,26 +38,31 @@ export class CrawlerSelectorComponent implements OnInit, OnChanges, AfterContent
// }
// );
// Temporary Data
this.crawlers = [];
for (let i = 0; i < 10; i++) {
const c: MetaCrawler = {
id: i,
name: 'CrawlerName' + i,
description: 'Description' + i,
};
this.crawlers.push(c);
}
}
ngAfterContentInit() {
this.listStore.dispatch(new ListStore.ReadAll());
// this.listStore.dispatch(new ListStore.ReadAll());
}
ngOnChanges() {
this.crawlers = [];
if (null == this.target) {
return;
}
// Temporary Data
for (let i = 0; i < 4; i++) {
const c: MetaCrawler = {
id: i,
name: 'CrawlerName' + i + ' For ' + this.target.displayName,
};
this.crawlers.push(c);
}
}
crawlerSelected(crawler: MetaCrawler) {
this.crawlerSelectEvent.emit(crawler);
onSelectionChange(event) {
this.crawlerSelected.emit(event.value[0]);
}
}

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

@ -1,4 +1,9 @@
<p-tree [value]="displayItems" selectionMode="checkbox" [(selection)]="selectedItems"></p-tree>
<p-panel header="4. Choose sensor items">
<div class="ui-g" style="height: 200px; overflow: auto">
<p-tree [value]="itemTreeNode" selectionMode="checkbox" [(selection)]="selectedItems" (onNodeSelect)="onNodeSelect($event)"
(onNodeUnselect)="onNodeUnselect($event)"></p-tree>
</div>
</p-panel>
<!-- <div>
<mat-card>

72
src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.ts
View File

@ -5,9 +5,10 @@ import { RPCClientError } from '@loafer/ng-rpc/protocol';
import * as ListStore from 'packages/meta/sensor-display-item/store/list';
import { ReadAllSensorDisplayItemByCrawlerSelector } from 'packages/meta/sensor-display-item/store';
import { MetaSensorDisplayItem } from 'packages/meta/sensor-display-item/model/MetaSensorDisplayItem';
import { MetaCrawler } from '../../../../meta/crawler/model/MetaCrawler';
import { MetaSensorItemType } from '../../../../meta/sensor-item-type/model/MetaSensorItemType';
import { MetaCrawler } from 'packages/meta/crawler/model/MetaCrawler';
import { MetaSensorItemType } from 'packages/meta/sensor-item-type/model/MetaSensorItemType';
import { TreeNode } from 'primeng/primeng';
import { Target } from 'packages/target/model';
@Component({
selector: 'of-sensor-item-selector',
@ -16,12 +17,14 @@ import { TreeNode } from 'primeng/primeng';
})
export class SensorItemSelectorComponent implements OnInit, OnChanges {
@Input() selectedCrawler: MetaCrawler;
@Output() itemSelectEvent = new EventEmitter<Set<MetaSensorDisplayItem>>();
@Input() target: Target;
@Input() crawler: MetaCrawler;
@Output() sensorItemsSelected = new EventEmitter<TreeNode[]>();
items$ = this.listStore.pipe(select(ReadAllSensorDisplayItemByCrawlerSelector.select('list')));
selectedItems: MetaSensorDisplayItem[];
treeNode: TreeNode[];
selectedItems: TreeNode[];
itemTreeNode: TreeNode[];
constructor(
private router: Router,
@ -29,6 +32,7 @@ export class SensorItemSelectorComponent implements OnInit, OnChanges {
) { }
ngOnInit() {
// this.selectedItems = new Set();
// this.items$.subscribe(
// (list: MetaSensorDisplayItem[]) => {
// if (list !== null) {
@ -39,6 +43,16 @@ export class SensorItemSelectorComponent implements OnInit, OnChanges {
// }
// );
}
ngOnChanges() {
// this.selectedItems.clear();
// this.listStore.dispatch(new ListStore.ReadAllByCrawler(this.crawler));
this.itemTreeNode = [];
if (!this.target || !this.crawler) {
return;
}
// Temporary data
const displayItems = [];
for (let i = 0; i < 10; i++) {
@ -53,7 +67,7 @@ export class SensorItemSelectorComponent implements OnInit, OnChanges {
const si: MetaSensorDisplayItem = {
id: i,
key: 'SensorDisplayItemKey' + i,
displayName: 'DisplayName' + i,
displayName: 'this.is.display.item.name' + i,
description: 'Description' + i,
default: isDefault,
itemType: t
@ -65,13 +79,49 @@ export class SensorItemSelectorComponent implements OnInit, OnChanges {
}
generateTreeData(items) {
this.itemTreeNode = [];
for (const item of items) {
const categoryNode = this.existCategory(item);
if (categoryNode === null) {
const childrenNode = [];
childrenNode.push(this.getChildNode(item));
const node = {
label: item.itemType.name,
children: childrenNode,
expanded: true,
};
this.itemTreeNode.push(node);
} else {
categoryNode.children.push(this.getChildNode(item));
}
}
}
getChildNode(item) {
const childNode = {
label: item.displayName,
expandedIcon: item.default ? 'ui-icon-star' : '',
collapsedIcon: item.default ? 'ui-icon-star' : '',
expanded: true,
data: item
};
return childNode;
}
existCategory(item: MetaSensorDisplayItem) {
let categoryNode = null;
for (const node of this.itemTreeNode) {
if (node.label === item.itemType.name) {
categoryNode = node;
}
}
return categoryNode;
}
ngOnChanges() {
// this.checkedSet.clear();
this.listStore.dispatch(new ListStore.ReadAllByCrawler(this.selectedCrawler));
onNodeSelect(event) {
this.sensorItemsSelected.emit(this.selectedItems);
}
onNodeUnselect(event) {
this.sensorItemsSelected.emit(this.selectedItems);
}
}

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

@ -1,16 +1,19 @@
<!-- <p-steps [model]="stepsItems"></p-steps> -->
<div class="ui-g">
<div class="ui-g-6">
<of-target-selector></of-target-selector>
<of-target-selector [target]="selectedTarget" (targetSelected)="onTargetSelect($event)"></of-target-selector>
</div>
<div class="ui-g-6">
<of-crawler-auth></of-crawler-auth>
<of-crawler-auth [crawler]="selectedCrawler" (credentialPassed)="onCredentialPass($event)"></of-crawler-auth>
</div>
<div class="ui-g-6">
<of-crawler-selector></of-crawler-selector>
<of-crawler-selector [target]="selectedTarget" (crawlerSelected)="onCrawlerSelect($event)"></of-crawler-selector>
</div>
<div class="ui-g-6">
<of-sensor-item-selector></of-sensor-item-selector>
<of-sensor-item-selector [target]="selectedTarget" [crawler]="selectedCrawler" (sensorItemsSelected)="onItemsSelect($event)"></of-sensor-item-selector>
</div>
</div>
<div>
<button pButton 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>
</div>

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

@ -1,4 +1,4 @@
import { Component, OnInit, Input, Inject, DoCheck, ViewEncapsulation } from '@angular/core';
import { Component, OnInit, Input, Inject, DoCheck, ViewEncapsulation, Output, EventEmitter, OnDestroy } from '@angular/core';
import { Target } from 'packages/target/model';
import { Infra } from 'packages/infra/model';
import { MetaCrawler } from 'packages/meta/crawler/model/MetaCrawler';
@ -9,6 +9,7 @@ import { RPCClientError } from '@loafer/ng-rpc/protocol';
import * as SensorItemKeyListStore from 'packages/sensor-item/store/key-list';
import { ReadSensorItemKeySelector } from 'packages/sensor-item/store';
import { MetaSensorItemKey } from 'packages/meta/sensor-item-key/model/MetaSensorItemKey';
import { TreeNode } from 'primeng/primeng';
@Component({
selector: 'of-sensor-setting',
@ -17,22 +18,16 @@ import { MetaSensorItemKey } from 'packages/meta/sensor-item-key/model/MetaSenso
})
export class SettingComponent implements OnInit, DoCheck {
@Output() close = new EventEmitter();
nextable = false;
sensorItemKeys$ = this.keyListStore.pipe(select(ReadSensorItemKeySelector.select('list')));
stepsItems = [
{
label: 'Target'
},
{
label: 'Crawler'
},
{
label: 'Credentials'
},
{
label: 'Sensor Items'
}
];
activeIndex = 1;
@Input() selectedTarget: Target;
selectedCrawler: MetaCrawler;
credentialPassed: boolean;
selectedSensorDisplayItems: MetaSensorDisplayItem[];
itemNodes: TreeNode[];
constructor(
private keyListStore: Store<SensorItemKeyListStore.State>,
@ -40,18 +35,62 @@ export class SettingComponent implements OnInit, DoCheck {
}
ngOnInit() {
this.sensorItemKeys$.subscribe(
(list: MetaSensorItemKey[]) => {
if (list !== null) {
console.log(list);
}
},
(error: RPCClientError) => {
console.log(error.response.message);
}
);
// this.sensorItemKeys$.subscribe(
// (list: MetaSensorItemKey[]) => {
// if (list !== null) {
// console.log(list);
// }
// },
// (error: RPCClientError) => {
// console.log(error.response.message);
// }
// );
}
ngDoCheck() {
try {
if (
this.selectedTarget === null ||
this.selectedCrawler === null ||
this.itemNodes === null ||
this.itemNodes.length === 0 ||
!this.credentialPassed
) {
this.nextable = false;
} else {
this.nextable = true;
}
} catch (exception) {}
}
onCancel() {
this.selectedTarget = null;
this.selectedCrawler = null;
this.credentialPassed = false;
this.selectedSensorDisplayItems = null;
this.close.emit();
}
onNext() {
this.selectedSensorDisplayItems = [];
for (const node of this.itemNodes) {
if (node.data && node.data !== undefined) {
this.selectedSensorDisplayItems.push(node.data);
}
}
console.log(this.selectedSensorDisplayItems);
}
onTargetSelect(t: Target) {
this.selectedTarget = t;
}
onCrawlerSelect(c: MetaCrawler) {
this.selectedCrawler = c;
}
onCredentialPass(b: boolean) {
this.credentialPassed = b;
}
onItemsSelect(nodes: TreeNode[]) {
this.itemNodes = nodes;
}
}

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

@ -1,11 +1,25 @@
<p-orderList [value]="targets" [listStyle]="{'height':'200px'}" [responsive]="true" header="1. Choose a target" filterBy="displayName">
<ng-template let-target pTemplate="item">
<div class="ui-helper-clearfix">
<!-- <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>
<p-orderList [value]="targets" [listStyle]="{'height':'200px'}" [responsive]="true" header="1. Choose a target" filterBy="displayName"
(onSelectionChange)="onSelectionChange($event)">
<ng-template let-target pTemplate="item">
<div class="ui-helper-clearfix">
<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>
</ng-template>
</p-orderList>
</div>
<!-- <div *ngIf="target">
<p-panel header="1. Target">
<div>
{{target.displayName}}
</div>
</ng-template>
</p-orderList>
<div>
{{target.description}}
</div>
</p-panel>
</div> -->
<!-- <div style="width:100%">
<mat-card>

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

@ -1,4 +1,4 @@
import { Component, OnInit, Output, EventEmitter, Input, AfterContentInit } from '@angular/core';
import { Component, OnInit, Output, EventEmitter, Input, AfterContentInit, OnChanges } from '@angular/core';
import { Router } from '@angular/router';
import { Target } from 'packages/target/model';
import { RPCClientError } from '@loafer/ng-rpc/protocol';
@ -14,12 +14,12 @@ import { SelectItem } from 'primeng/primeng';
selector: 'of-target-selector',
templateUrl: './target-selector.component.html',
})
export class TargetSelectorComponent implements OnInit {
export class TargetSelectorComponent implements OnInit, OnChanges {
targets$ = this.store.pipe(select(ListSelector.select('page')));
@Input() target: Target = null;
@Output() targetSelectEvent = new EventEmitter<Target>();
@Output() targetSelected = new EventEmitter<Target>();
targets: Target[] = null;
constructor(
@ -33,31 +33,24 @@ export class TargetSelectorComponent implements OnInit {
this.getTargetList();
} else {
this.targets.push(this.target);
this.targetSelected.emit(this.target);
}
this.targets$.subscribe(
(page: Page) => {
if (page !== null) {
this.convertInfraToTarget(page);
}
},
(error: RPCClientError) => {
console.log(error.response.message);
}
);
// Temporary data
for (let i = 0; i < 10; i++) {
const t: Target = {
id: i,
displayName: 'DisplayName' + i,
createDate: new Date(),
description: 'Description' + i,
};
this.targets.push(t);
}
// this.targets$.subscribe(
// (page: Page) => {
// if (page !== null) {
// this.convertInfraToTarget(page);
// }
// },
// (error: RPCClientError) => {
// console.log(error.response.message);
// }
// );
}
ngOnChanges() {
}
convertInfraToTarget(page: Page) {
for (const infra of page.content) {
@ -80,10 +73,21 @@ export class TargetSelectorComponent implements OnInit {
// console.log(error);
// }
// );
// Temporary data
for (let i = 0; i < 10; i++) {
const t: Target = {
id: i,
displayName: 'DisplayName' + i,
createDate: new Date(),
description: 'Description' + i,
};
this.targets.push(t);
}
}
targetSelected(t: Target) {
this.targetSelectEvent.emit(t);
onSelectionChange(event) {
this.targetSelected.emit(event.value[0]);
}
}

5
src/styles.scss
View File

@ -25,4 +25,9 @@
.ui-button-large {
font-size: 1.6em !important;
}
.ui-orderlist-controls {
display: none !important;
visibility: hidden;
}