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 <[email protected]> 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; + } }
