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 08:50:22 UTC
[incubator-streampipes] 02/02: Add color picker to configure label
component
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
commit c80b35c18565beb471940d7558ecb225aea9a266
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Fri Oct 2 10:49:58 2020 +0200
Add color picker to configure label component
---
.../configure-labels.component.html | 27 ++++++++++-----
.../configure-labels/configure-labels.component.ts | 21 +++---------
.../app/core-ui/labels/services/label.service.ts | 40 ++++++++++++++++++++++
3 files changed, 63 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 166c945..d29362e 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,6 +1,6 @@
<div fxLayout="column" fxLayoutAlign="space-around center">
- <h2>Labels</h2>
+ <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>
@@ -10,18 +10,29 @@
<mat-form-field style="margin-top: -15px; margin-bottom: -10px">
<mat-select [(value)]="selectedCategory">
<mat-option *ngFor="let category of categories" [value]="category">
- {{category}}
+ {{category.name}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<mat-list>
- <mat-list-item *ngFor="let label of _labels[selectedCategory]; index as i"
- [style.background-color]="_selectedLabel.label == label ? 'lightgrey' : 'white'"
- style="height: 30px; padding-top: 5px; padding-buttom: 5px; border-radius: 50px; margin-bottom: 5px"
- (click)="selectLabel({category: labelCategory, label: label})">
- <mat-icon matListIcon [style.color]="colorService.getColor(label)" style="margin-top: -8px;">color_lens</mat-icon>
- <h4 style="margin-top: -3px;"> {{label}} <label *ngIf="i < 10"> #{{i+1}}</label> </h4>
+ <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 fxFlex>
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 170cedd..d867fc6 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
@@ -1,7 +1,7 @@
import { Component, EventEmitter, HostListener, Input, OnInit, Output } from '@angular/core';
import { ColorService } from '../../../image/services/color.service';
import { LabelService } from '../../services/label.service';
-import { Label } from '../../../../core-model/gen/streampipes-model';
+import { Category, Label } from '../../../../core-model/gen/streampipes-model';
@Component({
selector: 'sp-configure-labels',
@@ -10,31 +10,18 @@ import { Label } from '../../../../core-model/gen/streampipes-model';
})
export class ConfigureLabelsComponent implements OnInit {
- @Input() enableShortCuts: boolean;
- @Output() labelChange: EventEmitter<{category, label}> = new EventEmitter<{category, label}>();
-
- public _labels;
- public _selectedLabel: {category, label};
- public categories;
- public selectedCategory;
+ public categories: Category[];
+ public selectedCategory: Category;
constructor(public colorService: ColorService, public labelService: LabelService) { }
ngOnInit(): void {
- this._labels = this.labelService.getLabels();
+ this.categories = this.labelService.getCategories();
this.update();
}
update() {
- this.categories = Object.keys(this._labels);
this.selectedCategory = this.categories[0];
- this._selectedLabel = {category: this.selectedCategory, label: this._labels[this.selectedCategory][0]};
- this.labelChange.emit(this._selectedLabel);
- }
-
- selectLabel(e: {category, label}) {
- this._selectedLabel = e;
- this.labelChange.emit(this._selectedLabel);
}
addCategory() {
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 bfef61e..c3f29b2 100644
--- a/ui/src/app/core-ui/labels/services/label.service.ts
+++ b/ui/src/app/core-ui/labels/services/label.service.ts
@@ -1,9 +1,11 @@
import { Injectable } from '@angular/core';
+import { Category, Label } from '../../../core-model/gen/streampipes-model';
@Injectable({
providedIn: 'root'
})
export class LabelService {
+ private categories = [];
constructor() { }
@@ -23,4 +25,42 @@ export class LabelService {
};
}
+ getCategories(): Category[] {
+
+ const c1 = new Category();
+ c1.name = 'boxes';
+
+ c1.labels = [];
+ c1.labels.push(this.getLabel('blue', '#0000ff'));
+ c1.labels.push(this.getLabel('red', '#ff0000'));
+
+ const c2 = new Category();
+ c2.name = 'furniture';
+
+ c2.labels = [];
+ c2.labels.push(this.getLabel('chair', '#7dff24'));
+ c2.labels.push(this.getLabel('couch', '#ff6ef7'));
+
+ this.categories.push(c1);
+ this.categories.push(c2);
+
+ return this.categories;
+ }
+
+
+ addCategory(c: Category) {
+ this.categories.push(c);
+ }
+
+ updateCategory(c: Category) {
+ this.categories.push(c);
+ }
+
+
+ private getLabel(name, color): Label {
+ const label1 = new Label();
+ label1.name = name;
+ label1.color = color;
+ return label1;
+ }
}