You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ze...@apache.org on 2020/10/02 20:40:35 UTC
[incubator-streampipes] branch STREAMPIPES-234 updated: Edit
categories in label configuration
This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch STREAMPIPES-234
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
The following commit(s) were added to refs/heads/STREAMPIPES-234 by this push:
new 46cc9c9 Edit categories in label configuration
46cc9c9 is described below
commit 46cc9c9200870a09444449b86246c40edb065c47
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Fri Oct 2 22:40:09 2020 +0200
Edit categories in label configuration
---
.../configure-labels.component.html | 55 ++++++++++++++--------
.../configure-labels/configure-labels.component.ts | 22 +++++++--
.../app/core-ui/labels/services/label.service.ts | 6 +--
3 files changed, 58 insertions(+), 25 deletions(-)
diff --git a/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.html b/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.html
index 7896e60..ac6b21c 100644
--- a/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.html
+++ b/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.html
@@ -1,33 +1,50 @@
<div fxLayout="column" fxLayoutAlign="space-around center">
- <h2>Categories</h2>
- <div fxFlex>
- <button mat-button mat-flat-button (click)="addCategory()">
- <mat-icon class="icon">add</mat-icon><span>Add new Category</span>
- </button>
- </div>
- <div style="padding-left: 5px; padding-right: 5px; border-radius: 50px; font-size: 20px;">
+ <div *ngIf="!editCategory">
+ <h2>Categories</h2>
<mat-form-field style="margin-top: -15px; margin-bottom: -10px">
- <mat-select [(value)]="selectedCategory">
+ <mat-label>Select Label Category</mat-label>
+ <mat-select [(value)]="selectedCategory" (selectionChange)="startEditCategory($event)">
+ <mat-option value="internal_placeholder"></mat-option>
<mat-option *ngFor="let category of categories" [value]="category">
{{category.name}}
</mat-option>
</mat-select>
</mat-form-field>
+ <button mat-button mat-flat-button (click)="addCategory()">
+ <mat-icon class="icon">add</mat-icon><span>Add new Category</span>
+ </button>
</div>
- <div fxLayout="column" fxLayoutAlign="center stretch">
- <sp-label-list-item
- *ngFor="let label of selectedCategory.labels;"
- (removeLabel)="removeLabel($event)"
- [label]="label">
+ <div *ngIf="editCategory" fxLayout="column">
+ <div fxLayout="row">
+ <h2>Edit Category</h2>
- </sp-label-list-item>
+ </div>
+ <div fxLayout="row" fxLayoutAlign="space-between center">
+ <mat-form-field>
+ <mat-label>Category Name</mat-label>
+ <input matInput type="text" [(ngModel)]="selectedCategory.name">
+ </mat-form-field>
+ <button mat-button mat-flat-button color="warn" (click)="addCategory()">
+ <mat-icon class="icon">delete</mat-icon>
+ </button>
+ </div>
+ <div fxLayout="column" fxLayoutAlign="center stretch">
+ <sp-label-list-item
+ *ngFor="let label of selectedCategory.labels;"
+ (removeLabel)="removeLabel($event)"
+ [label]="label">
+ </sp-label-list-item>
+ </div>
+ <div fxLayout="row" fxLayoutAlign="space-between center">
+ <button mat-button mat-flat-button (click)="addLabel()">
+ <mat-icon class="icon">add</mat-icon><span>Add new Label</span>
+ </button>
+ <button mat-button mat-raised-button color="primary" (click)="endEditCategory()">
+ <span>Back</span>
+ </button>
+ </div>
</div>
- <div fxFlex>
- <button mat-button mat-flat-button (click)="addLabel()">
- <mat-icon class="icon">add</mat-icon><span>Add new Label</span>
- </button>
- </div>
</div>
diff --git a/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.ts b/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.ts
index c2e331c..c4b0584 100644
--- a/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.ts
+++ b/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.ts
@@ -13,18 +13,34 @@ export class ConfigureLabelsComponent implements OnInit {
public categories: Category[];
public selectedCategory: Category;
+ public editCategory: boolean;
+
constructor(public colorService: ColorService, public labelService: LabelService) { }
ngOnInit(): void {
+ this.editCategory = false;
this.categories = this.labelService.getCategories();
- this.update();
}
- update() {
- this.selectedCategory = this.categories[0];
+ startEditCategory(value) {
+ if ('internal_placeholder' !== value.value) {
+ this.editCategory = true;
+ }
+ }
+
+ endEditCategory() {
+ this.selectedCategory = null;
+ this.editCategory = false;
}
addCategory() {
+ const c1 = new Category();
+ c1.name = '';
+ c1.labels = [];
+
+ this.categories.push(c1);
+ this.selectedCategory = c1;
+ this.editCategory = true;
}
addLabel() {
diff --git a/ui/src/app/core-ui/labels/services/label.service.ts b/ui/src/app/core-ui/labels/services/label.service.ts
index c3f29b2..b62d0ae 100644
--- a/ui/src/app/core-ui/labels/services/label.service.ts
+++ b/ui/src/app/core-ui/labels/services/label.service.ts
@@ -28,11 +28,11 @@ export class LabelService {
getCategories(): Category[] {
const c1 = new Category();
- c1.name = 'boxes';
+ c1.name = 'Straßenschild';
c1.labels = [];
- c1.labels.push(this.getLabel('blue', '#0000ff'));
- c1.labels.push(this.getLabel('red', '#ff0000'));
+ c1.labels.push(this.getLabel('Stop', '#0000ff'));
+ c1.labels.push(this.getLabel('50', '#ff0000'));
const c2 = new Category();
c2.name = 'furniture';