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 09:48:03 UTC
[incubator-streampipes] branch STREAMPIPES-234 updated: Enable to
add and delete labels
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 69cbceb Enable to add and delete labels
69cbceb is described below
commit 69cbcebf3c6607e297d728c7d8ec24b1aa231ccb
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Fri Oct 2 11:47:36 2020 +0200
Enable to add and delete labels
---
ui/src/app/core-ui/core-ui.module.ts | 2 ++
.../configure-labels.component.html | 28 +++++++---------------
.../configure-labels/configure-labels.component.ts | 8 ++++++-
.../label-list-item/label-list-item.component.css | 0
.../label-list-item/label-list-item.component.html | 18 ++++++++++++++
.../label-list-item/label-list-item.component.ts | 25 +++++++++++++++++++
6 files changed, 61 insertions(+), 20 deletions(-)
diff --git a/ui/src/app/core-ui/core-ui.module.ts b/ui/src/app/core-ui/core-ui.module.ts
index c68d52d..1ffc90b 100644
--- a/ui/src/app/core-ui/core-ui.module.ts
+++ b/ui/src/app/core-ui/core-ui.module.ts
@@ -74,6 +74,7 @@ import { QuillModule } from 'ngx-quill';
import { CodemirrorModule } from '@ctrl/ngx-codemirror';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { ConfigureLabelsComponent } from './labels/components/configure-labels/configure-labels.component';
+import { LabelListItemComponent } from './labels/components/label-list-item/label-list-item.component';
@NgModule({
imports: [
@@ -126,6 +127,7 @@ import { ConfigureLabelsComponent } from './labels/components/configure-labels/c
StaticOneOfInputComponent,
StaticRuntimeResolvableAnyInputComponent,
StaticRuntimeResolvableOneOfInputComponent,
+ LabelListItemComponent,
],
providers: [
MatDatepickerModule,
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 d29362e..7896e60 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
@@ -15,26 +15,16 @@
</mat-select>
</mat-form-field>
</div>
- <mat-list>
- <mat-list-item *ngFor="let label of selectedCategory.labels;"
- style="height: 30px; padding-top: 5px; padding-buttom: 5px; border-radius: 50px; margin-bottom: 5px">
- <input matInput
- style="margin-top: -8px; margin-right: 10px; width: 20px;"
- autocomplete="off"
- [(colorPicker)]="label.color"
- (colorPickerChange)="label.color = $event"
- [cpPosition]="'bottom'"
- [style.background]="label.color" required
- />
-<!-- (blur)="emitUpdate()" -->
-<!-- [cpPresetColors] = "presetColors"/>-->
-<!-- <mat-icon-->
-<!-- matListIcon [style.color]="label.color" style="margin-top: -8px;">color_lens</mat-icon>-->
- <h4 style="margin-top: -3px;"> {{label.name}} </h4>
- <mat-icon style="margin-left: 20px; margin-top: -8px;">delete</mat-icon>
- </mat-list-item>
- </mat-list>
+ <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 fxFlex>
<button mat-button mat-flat-button (click)="addLabel()">
<mat-icon class="icon">add</mat-icon><span>Add new Label</span>
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 d867fc6..c2e331c 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
@@ -29,7 +29,13 @@ export class ConfigureLabelsComponent implements OnInit {
addLabel() {
const label = new Label();
- label.name = 'test';
+ label.name = '';
+ label.color = '#' + (Math.random() * 0xFFFFFF << 0).toString(16).padStart(6, '0');
+ this.selectedCategory.labels.push(label);
+ }
+
+ removeLabel(label) {
+ this.selectedCategory.labels = this.selectedCategory.labels.filter(obj => obj !== label);
}
}
diff --git a/ui/src/app/core-ui/labels/components/label-list-item/label-list-item.component.css b/ui/src/app/core-ui/labels/components/label-list-item/label-list-item.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/ui/src/app/core-ui/labels/components/label-list-item/label-list-item.component.html b/ui/src/app/core-ui/labels/components/label-list-item/label-list-item.component.html
new file mode 100644
index 0000000..5b8e925
--- /dev/null
+++ b/ui/src/app/core-ui/labels/components/label-list-item/label-list-item.component.html
@@ -0,0 +1,18 @@
+<div fxLayout="row" fxLayoutAlign="start center">
+ <div>
+ <input matInput
+ style="margin-right: 10px; width: 20px;"
+ autocomplete="off"
+ [(colorPicker)]="label.color"
+ (colorPickerChange)="label.color = $event"
+ [cpPosition]="'bottom'"
+ [style.background]="label.color" required
+ />
+ </div>
+ <mat-form-field>
+ <input matInput type="text" [(ngModel)]="label.name">
+ </mat-form-field>
+ <div>
+ <mat-icon style="margin-left: 20px; margin-top: 5px; cursor: pointer;" (click)="clickRemoveLabel()">remove</mat-icon>
+ </div>
+</div>
diff --git a/ui/src/app/core-ui/labels/components/label-list-item/label-list-item.component.ts b/ui/src/app/core-ui/labels/components/label-list-item/label-list-item.component.ts
new file mode 100644
index 0000000..be5678b
--- /dev/null
+++ b/ui/src/app/core-ui/labels/components/label-list-item/label-list-item.component.ts
@@ -0,0 +1,25 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Label } from '../../../../core-model/gen/streampipes-model';
+
+@Component({
+ selector: 'sp-label-list-item',
+ templateUrl: './label-list-item.component.html',
+ styleUrls: ['./label-list-item.component.css']
+})
+export class LabelListItemComponent implements OnInit {
+
+ @Input
+ label: Label;
+
+ @Output() removeLabel = new EventEmitter<Label>();
+
+ constructor() { }
+
+ ngOnInit(): void {
+ }
+
+ public clickRemoveLabel() {
+ this.removeLabel.emit(this.label);
+ }
+
+}