dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Add label widget settings form

Browse Source
This commit is contained in:
Igor Kulikov 2022-04-02 15:09:40 +03:00
parent 0177904eb2
commit 7cc553021b
13 changed files with 632 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
application/src/main/data/json/system/widget_bundles/cards.json
View File

File diff suppressed because one or more lines are too long

71
ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-font.component.html Normal file
View File

@ -0,0 +1,71 @@
<!--
Copyright © 2016-2022 The Thingsboard Authors
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<section [formGroup]="labelWidgetFontFormGroup" fxLayout="column">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.label-widget.font-family</mat-label>
<input matInput formControlName="family">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.label-widget.relative-font-size</mat-label>
<input matInput type="number" min="1" step="1" formControlName="size">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.label-widget.font-style</mat-label>
<mat-select formControlName="style">
<mat-option [value]="'normal'">
{{ 'widgets.label-widget.font-style-normal' | translate }}
</mat-option>
<mat-option [value]="'italic'">
{{ 'widgets.label-widget.font-style-italic' | translate }}
</mat-option>
<mat-option [value]="'oblique'">
{{ 'widgets.label-widget.font-style-oblique' | translate }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.label-widget.font-weight</mat-label>
<mat-select formControlName="weight">
<mat-option [value]="'normal'">
{{ 'widgets.label-widget.font-weight-normal' | translate }}
</mat-option>
<mat-option [value]="'bold'">
{{ 'widgets.label-widget.font-weight-bold' | translate }}
</mat-option>
<mat-option [value]="'bolder'">
{{ 'widgets.label-widget.font-weight-bolder' | translate }}
</mat-option>
<mat-option [value]="'lighter'">
{{ 'widgets.label-widget.font-weight-lighter' | translate }}
</mat-option>
<mat-option [value]="'100'">100</mat-option>
<mat-option [value]="'200'">200</mat-option>
<mat-option [value]="'300'">300</mat-option>
<mat-option [value]="'400'">400</mat-option>
<mat-option [value]="'500'">500</mat-option>
<mat-option [value]="'600'">600</mat-option>
<mat-option [value]="'700'">700</mat-option>
<mat-option [value]="'800'">800</mat-option>
<mat-option [value]="'900'">900</mat-option>
</mat-select>
</mat-form-field>
<tb-color-input
formControlName="color"
label="{{ 'widgets.label-widget.color' | translate }}">
</tb-color-input>
</section>

104
ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-font.component.ts Normal file
View File

@ -0,0 +1,104 @@
///
/// Copyright © 2016-2022 The Thingsboard Authors
///
/// Licensed under the Apache License, Version 2.0 (the "License");
/// you may not use this file except in compliance with the License.
/// You may obtain a copy of the License at
///
/// http://www.apache.org/licenses/LICENSE-2.0
///
/// Unless required by applicable law or agreed to in writing, software
/// distributed under the License is distributed on an "AS IS" BASIS,
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
/// See the License for the specific language governing permissions and
/// limitations under the License.
///
import { Component, forwardRef, HostBinding, Input, OnInit } from '@angular/core';
import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
import { PageComponent } from '@shared/components/page.component';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { TranslateService } from '@ngx-translate/core';
export interface LabelWidgetFont {
family: string;
size: number;
style: 'normal' | 'italic' | 'oblique';
weight: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
color: string;
}
@Component({
selector: 'tb-label-widget-font',
templateUrl: './label-widget-font.component.html',
styleUrls: [],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => LabelWidgetFontComponent),
multi: true
}
]
})
export class LabelWidgetFontComponent extends PageComponent implements OnInit, ControlValueAccessor {
@HostBinding('style.display') display = 'block';
@Input()
disabled: boolean;
private modelValue: LabelWidgetFont;
private propagateChange = null;
public labelWidgetFontFormGroup: FormGroup;
constructor(protected store: Store<AppState>,
private translate: TranslateService,
private fb: FormBuilder) {
super(store);
}
ngOnInit(): void {
this.labelWidgetFontFormGroup = this.fb.group({
family: [null, []],
size: [null, [Validators.min(1)]],
style: [null, []],
weight: [null, []],
color: [null, []]
});
this.labelWidgetFontFormGroup.valueChanges.subscribe(() => {
this.updateModel();
});
}
registerOnChange(fn: any): void {
this.propagateChange = fn;
}
registerOnTouched(fn: any): void {
}
setDisabledState(isDisabled: boolean): void {
this.disabled = isDisabled;
if (isDisabled) {
this.labelWidgetFontFormGroup.disable({emitEvent: false});
} else {
this.labelWidgetFontFormGroup.enable({emitEvent: false});
}
}
writeValue(value: LabelWidgetFont): void {
this.modelValue = value;
this.labelWidgetFontFormGroup.patchValue(
value, {emitEvent: false}
);
}
private updateModel() {
const value: LabelWidgetFont = this.labelWidgetFontFormGroup.value;
this.modelValue = value;
this.propagateChange(this.modelValue);
}
}

72
ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-label.component.html Normal file
View File

@ -0,0 +1,72 @@
<!--
Copyright © 2016-2022 The Thingsboard Authors
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<mat-expansion-panel class="label-widget-label" fxFlex [formGroup]="labelWidgetLabelFormGroup" [(expanded)]="expanded">
<mat-expansion-panel-header>
<div fxFlex fxLayout="row" fxLayoutAlign="start center">
<mat-panel-title>
<div fxLayout="row" fxFlex fxLayoutAlign="start center">
{{ labelWidgetLabelFormGroup.get('pattern').value }}
</div>
</mat-panel-title>
<span fxFlex></span>
<button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
type="button"
(click)="removeLabel.emit()"
matTooltip="{{ 'action.remove' | translate }}"
matTooltipPosition="above">
<mat-icon>delete</mat-icon>
</button>
</div>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<div fxLayout="column" fxLayoutGap="0.5em">
<mat-divider></mat-divider>
<section class="tb-widget-settings" fxLayout="column">
<mat-form-field style="padding-bottom: 16px;">
<mat-label translate>widgets.label-widget.label-pattern</mat-label>
<input required matInput formControlName="pattern">
<mat-error *ngIf="labelWidgetLabelFormGroup.get('pattern').hasError('required')">
{{ 'widgets.label-widget.label-pattern-required' | translate }}
</mat-error>
<mat-hint [innerHTML]="'widgets.label-widget.label-pattern-hint' | translate | safe: 'html'"></mat-hint>
</mat-form-field>
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.label-widget.label-position</legend>
<section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
<mat-form-field fxFlex>
<mat-label translate>widgets.label-widget.x-pos</mat-label>
<input matInput type="number" min="0" max="100" step="1" formControlName="x">
</mat-form-field>
<mat-form-field fxFlex>
<mat-label translate>widgets.label-widget.y-pos</mat-label>
<input matInput type="number" min="0" max="100" step="1" formControlName="y">
</mat-form-field>
</section>
</fieldset>
<tb-color-input
formControlName="backgroundColor"
label="{{ 'widgets.label-widget.background-color' | translate }}">
</tb-color-input>
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.label-widget.font-settings</legend>
<tb-label-widget-font formControlName="font"></tb-label-widget-font>
</fieldset>
</section>
</div>
</ng-template>
</mat-expansion-panel>

40
ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-label.component.scss Normal file
View File

@ -0,0 +1,40 @@
/**
* Copyright © 2016-2022 The Thingsboard Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
:host {
display: block;
.mat-expansion-panel {
box-shadow: none;
&.label-widget-label {
border: 1px groove rgba(0, 0, 0, .25);
.mat-expansion-panel-header {
padding: 0 24px 0 8px;
&.mat-expanded {
height: 48px;
}
}
}
}
}
:host ::ng-deep {
.mat-expansion-panel {
&.label-widget-label {
.mat-expansion-panel-body {
padding: 0 8px 8px;
}
}
}
}

113
ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-label.component.ts Normal file
View File

@ -0,0 +1,113 @@
///
/// Copyright © 2016-2022 The Thingsboard Authors
///
/// Licensed under the Apache License, Version 2.0 (the "License");
/// you may not use this file except in compliance with the License.
/// You may obtain a copy of the License at
///
/// http://www.apache.org/licenses/LICENSE-2.0
///
/// Unless required by applicable law or agreed to in writing, software
/// distributed under the License is distributed on an "AS IS" BASIS,
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
/// See the License for the specific language governing permissions and
/// limitations under the License.
///
import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core';
import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
import { PageComponent } from '@shared/components/page.component';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { TranslateService } from '@ngx-translate/core';
import { LabelWidgetFont } from '@home/components/widget/lib/settings/label-widget-font.component';
export interface LabelWidgetLabel {
pattern: string;
x: number;
y: number;
backgroundColor: string;
font: LabelWidgetFont;
}
@Component({
selector: 'tb-label-widget-label',
templateUrl: './label-widget-label.component.html',
styleUrls: ['./label-widget-label.component.scss', './widget-settings.scss'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => LabelWidgetLabelComponent),
multi: true
}
]
})
export class LabelWidgetLabelComponent extends PageComponent implements OnInit, ControlValueAccessor {
@Input()
disabled: boolean;
@Input()
expanded = false;
@Output()
removeLabel = new EventEmitter();
private modelValue: LabelWidgetLabel;
private propagateChange = null;
public labelWidgetLabelFormGroup: FormGroup;
constructor(protected store: Store<AppState>,
private translate: TranslateService,
private fb: FormBuilder) {
super(store);
}
ngOnInit(): void {
this.labelWidgetLabelFormGroup = this.fb.group({
pattern: [null, [Validators.required]],
x: [null, [Validators.min(0), Validators.max(100)]],
y: [null, [Validators.min(0), Validators.max(100)]],
backgroundColor: [null, []],
font: [null, []]
});
this.labelWidgetLabelFormGroup.valueChanges.subscribe(() => {
this.updateModel();
});
}
registerOnChange(fn: any): void {
this.propagateChange = fn;
}
registerOnTouched(fn: any): void {
}
setDisabledState(isDisabled: boolean): void {
this.disabled = isDisabled;
if (isDisabled) {
this.labelWidgetLabelFormGroup.disable({emitEvent: false});
} else {
this.labelWidgetLabelFormGroup.enable({emitEvent: false});
}
}
writeValue(value: LabelWidgetLabel): void {
this.modelValue = value;
this.labelWidgetLabelFormGroup.patchValue(
value, {emitEvent: false}
);
}
private updateModel() {
const value: LabelWidgetLabel = this.labelWidgetLabelFormGroup.value;
this.modelValue = value;
if (this.labelWidgetLabelFormGroup.valid) {
this.propagateChange(this.modelValue);
} else {
this.propagateChange(null);
}
}
}

49
ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-settings.component.html Normal file
View File

@ -0,0 +1,49 @@
<!--
Copyright © 2016-2022 The Thingsboard Authors
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<section class="tb-widget-settings" [formGroup]="labelWidgetSettingsForm" fxLayout="column">
<tb-image-input required
label="{{ 'widgets.label-widget.background-image' | translate }}"
formControlName="backgroundImageUrl">
</tb-image-input>
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.label-widget.labels</legend>
<div fxLayout="column">
<div class="tb-label-widget-labels">
<div *ngFor="let labelControl of labelsFormArray().controls; trackBy: trackByLabel;
let $index = index; last as isLast;"
fxLayout="column" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
<tb-label-widget-label [formControl]="labelControl"
[expanded]="$index === 0"
(removeLabel)="removeLabel($index)">
</tb-label-widget-label>
</div>
</div>
<div *ngIf="!labelsFormArray().controls.length">
<span translate fxLayoutAlign="center center"
class="tb-prompt">widgets.label-widget.no-labels</span>
</div>
<div style="padding-top: 16px;">
<button mat-raised-button color="primary"
type="button"
(click)="addLabel()">
<span translate>widgets.label-widget.add-label</span>
</button>
</div>
</div>
</fieldset>
</section>

32
ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-settings.component.scss Normal file
View File

@ -0,0 +1,32 @@
/**
* Copyright © 2016-2022 The Thingsboard Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import '../../../../../../../scss/constants';
:host {
.tb-label-widget-labels {
overflow-y: auto;
&.mat-padding {
padding: 8px;
@media #{$mat-gt-sm} {
padding: 16px;
}
}
}
.tb-prompt{
margin: 30px 0;
}
}

92
ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-settings.component.ts Normal file
View File

@ -0,0 +1,92 @@
///
/// Copyright © 2016-2022 The Thingsboard Authors
///
/// Licensed under the Apache License, Version 2.0 (the "License");
/// you may not use this file except in compliance with the License.
/// You may obtain a copy of the License at
///
/// http://www.apache.org/licenses/LICENSE-2.0
///
/// Unless required by applicable law or agreed to in writing, software
/// distributed under the License is distributed on an "AS IS" BASIS,
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
/// See the License for the specific language governing permissions and
/// limitations under the License.
///
import { Component } from '@angular/core';
import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { LabelWidgetLabel } from '@home/components/widget/lib/settings/label-widget-label.component';
@Component({
selector: 'tb-label-widget-settings',
templateUrl: './label-widget-settings.component.html',
styleUrls: ['./label-widget-settings.component.scss', './widget-settings.scss']
})
export class LabelWidgetSettingsComponent extends WidgetSettingsComponent {
labelWidgetSettingsForm: FormGroup;
constructor(protected store: Store<AppState>,
private fb: FormBuilder) {
super(store);
}
protected settingsForm(): FormGroup {
return this.labelWidgetSettingsForm;
}
protected defaultSettings(): WidgetSettings {
return {
backgroundImageUrl: 'data:image/svg+xml;base64,PHN2ZyBpZD0ic3ZnMiIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwIiB3aWR0aD0iMTAwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgdmlld0JveD0iMCAwIDEwMCAxMDAiPgogPGcgaWQ9ImxheWVyMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtOTUyLjM2KSI+CiAgPHJlY3QgaWQ9InJlY3Q0Njg0IiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBoZWlnaHQ9Ijk5LjAxIiB3aWR0aD0iOTkuMDEiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiB5PSI5NTIuODYiIHg9Ii40OTUwNSIgc3Ryb2tlLXdpZHRoPSIuOTkwMTAiIGZpbGw9IiNlZWUiLz4KICA8dGV4dCBpZD0idGV4dDQ2ODYiIHN0eWxlPSJ3b3JkLXNwYWNpbmc6MHB4O2xldHRlci1zcGFjaW5nOjBweDt0ZXh0LWFuY2hvcjptaWRkbGU7dGV4dC1hbGlnbjpjZW50ZXIiIGZvbnQtd2VpZ2h0PSJib2xkIiB4bWw6c3BhY2U9InByZXNlcnZlIiBmb250LXNpemU9IjEwcHgiIGxpbmUtaGVpZ2h0PSIxMjUlIiB5PSI5NzAuNzI4MDkiIHg9IjQ5LjM5NjQ3NyIgZm9udC1mYW1pbHk9IlJvYm90byIgZmlsbD0iIzY2NjY2NiI+PHRzcGFuIGlkPSJ0c3BhbjQ2OTAiIHg9IjUwLjY0NjQ3NyIgeT0iOTcwLjcyODA5Ij5JbWFnZSBiYWNrZ3JvdW5kIDwvdHNwYW4+PHRzcGFuIGlkPSJ0c3BhbjQ2OTIiIHg9IjQ5LjM5NjQ3NyIgeT0iOTgzLjIyODA5Ij5pcyBub3QgY29uZmlndXJlZDwvdHNwYW4+PC90ZXh0PgogIDxyZWN0IGlkPSJyZWN0NDY5NCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgaGVpZ2h0PSIxOS4zNiIgd2lkdGg9IjY5LjM2IiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgeT0iOTkyLjY4IiB4PSIxNS4zMiIgc3Ryb2tlLXdpZHRoPSIuNjM5ODYiIGZpbGw9Im5vbmUiLz4KIDwvZz4KPC9zdmc+Cg==',
labels: []
};
}
protected onSettingsSet(settings: WidgetSettings) {
const labelsControls: Array<AbstractControl> = [];
if (settings.labels) {
settings.labels.forEach((label) => {
labelsControls.push(this.fb.control(label, [Validators.required]));
});
}
this.labelWidgetSettingsForm = this.fb.group({
backgroundImageUrl: [settings.backgroundImageUrl, [Validators.required]],
labels: this.fb.array(labelsControls)
});
}
labelsFormArray(): FormArray {
return this.labelWidgetSettingsForm.get('labels') as FormArray;
}
public trackByLabel(index: number, labelControl: AbstractControl): number {
return index;
}
public removeLabel(index: number) {
(this.labelWidgetSettingsForm.get('labels') as FormArray).removeAt(index);
}
public addLabel() {
const label: LabelWidgetLabel = {
pattern: '${#0}',
x: 50,
y: 50,
backgroundColor: 'rgba(0,0,0,0)',
font: {
family: 'Roboto',
size: 6,
style: 'normal',
weight: '500',
color: '#fff'
}
};
const labelsArray = this.labelWidgetSettingsForm.get('labels') as FormArray;
labelsArray.push(this.fb.control(label, [Validators.required]));
this.labelWidgetSettingsForm.updateValueAndValidity();
}
}

24
ui-ngx/src/app/modules/home/components/widget/lib/settings/markdown-widget-settings.component.html
View File

@ -19,19 +19,17 @@
<mat-slide-toggle class="mat-slide" formControlName="useMarkdownTextFunction">
{{ 'widgets.markdown.use-markdown-text-function' | translate }}
</mat-slide-toggle>
<section fxLayout="column" [fxShow]="markdownWidgetSettingsForm.get('useMarkdownTextFunction').value">
<tb-js-func formControlName="markdownTextFunction"
[globalVariables]="functionScopeVariables"
[functionArgs]="['data']"
functionTitle="{{ 'widgets.markdown.markdown-text-function' | translate }}"
helpId="widget/lib/markdown/markdown_text_fn">
</tb-js-func>
</section>
<section fxLayout="column" [fxShow]="!markdownWidgetSettingsForm.get('useMarkdownTextFunction').value">
<tb-markdown-editor formControlName="markdownTextPattern"
label="{{ 'widgets.markdown.markdown-text-pattern' | translate }}">
</tb-markdown-editor>
</section>
<tb-js-func [fxShow]="markdownWidgetSettingsForm.get('useMarkdownTextFunction').value"
formControlName="markdownTextFunction"
[globalVariables]="functionScopeVariables"
[functionArgs]="['data']"
functionTitle="{{ 'widgets.markdown.markdown-text-function' | translate }}"
helpId="widget/lib/markdown/markdown_text_fn">
</tb-js-func>
<tb-markdown-editor [fxShow]="!markdownWidgetSettingsForm.get('useMarkdownTextFunction').value"
formControlName="markdownTextPattern"
label="{{ 'widgets.markdown.markdown-text-pattern' | translate }}">
</tb-markdown-editor>
<tb-css formControlName="markdownCss"
label="{{ 'widgets.markdown.markdown-css' | translate }}">
</tb-css>

15
ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.html
View File

@ -26,12 +26,11 @@
{{ 'widgets.qr-code.qr-code-text-pattern-required' | translate }}
</mat-error>
</mat-form-field>
<section fxLayout="column" [fxShow]="qrCodeWidgetSettingsForm.get('useQrCodeTextFunction').value">
<tb-js-func formControlName="qrCodeTextFunction"
[globalVariables]="functionScopeVariables"
[functionArgs]="['data']"
functionTitle="{{ 'widgets.qr-code.qr-code-text-function' | translate }}"
helpId="widget/lib/qrcode/qrcode_text_fn">
</tb-js-func>
</section>
<tb-js-func [fxShow]="qrCodeWidgetSettingsForm.get('useQrCodeTextFunction').value"
formControlName="qrCodeTextFunction"
[globalVariables]="functionScopeVariables"
[functionArgs]="['data']"
functionTitle="{{ 'widgets.qr-code.qr-code-text-function' | translate }}"
helpId="widget/lib/qrcode/qrcode_text_fn">
</tb-js-func>
</section>

16
ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts
View File

@ -32,6 +32,9 @@ import {
import {
MarkdownWidgetSettingsComponent
} from '@home/components/widget/lib/settings/markdown-widget-settings.component';
import { LabelWidgetFontComponent } from '@home/components/widget/lib/settings/label-widget-font.component';
import { LabelWidgetLabelComponent } from '@home/components/widget/lib/settings/label-widget-label.component';
import { LabelWidgetSettingsComponent } from '@home/components/widget/lib/settings/label-widget-settings.component';
@NgModule({
declarations: [
@ -39,7 +42,10 @@ import {
TimeseriesTableWidgetSettingsComponent,
TimeseriesTableKeySettingsComponent,
TimeseriesTableLatestKeySettingsComponent,
MarkdownWidgetSettingsComponent
MarkdownWidgetSettingsComponent,
LabelWidgetFontComponent,
LabelWidgetLabelComponent,
LabelWidgetSettingsComponent
],
imports: [
CommonModule,
@ -51,7 +57,10 @@ import {
TimeseriesTableWidgetSettingsComponent,
TimeseriesTableKeySettingsComponent,
TimeseriesTableLatestKeySettingsComponent,
MarkdownWidgetSettingsComponent
MarkdownWidgetSettingsComponent,
LabelWidgetFontComponent,
LabelWidgetLabelComponent,
LabelWidgetSettingsComponent
]
})
export class WidgetSettingsModule {
@ -62,5 +71,6 @@ export const widgetSettingsComponentsMap: {[key: string]: Type<IWidgetSettingsCo
'tb-timeseries-table-widget-settings': TimeseriesTableWidgetSettingsComponent,
'tb-timeseries-table-key-settings': TimeseriesTableKeySettingsComponent,
'tb-timeseries-table-latest-key-settings': TimeseriesTableLatestKeySettingsComponent,
'tb-markdown-widget-settings': MarkdownWidgetSettingsComponent
'tb-markdown-widget-settings': MarkdownWidgetSettingsComponent,
'tb-label-widget-settings': LabelWidgetSettingsComponent
};

26
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -3292,6 +3292,32 @@
"qr-code-text-pattern-required": "QR code text pattern is required.",
"qr-code-text-function": "QR code text function"
},
"label-widget": {
"font-family": "Font family",
"relative-font-size": "Relative font size (percents)",
"font-style": "Style",
"font-style-normal": "Normal",
"font-style-italic": "Italic",
"font-style-oblique": "Oblique",
"font-weight": "Weight",
"font-weight-normal": "Normal",
"font-weight-bold": "Bold",
"font-weight-bolder": "Bolder",
"font-weight-lighter": "Lighter",
"color": "Color",
"label-pattern": "Pattern",
"label-pattern-hint": "Hint: for ex. 'Text <code><span style=\"color: #000;\">$&#123;</span>keyName<span style=\"color: #000;\">&#125;</span></code> units.' or <code><span style=\"color: #000;\">$&#123;</span>#&lt;key index&gt;<span style=\"color: #000;\">&#125;</span></code> units'",
"label-pattern-required": "Pattern is required",
"label-position": "Position (Percentage relative to background)",
"x-pos": "X",
"y-pos": "Y",
"background-color": "Background color",
"font-settings": "Font settings",
"background-image": "Background image",
"labels": "Labels",
"no-labels": "No labels configured",
"add-label": "Add label"
},
"persistent-table": {
"rpc-id": "RPC ID",
"message-type": "Message type",