From c2f4724ca26e293811fd36827b5ad1b6c919cde5 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Sat, 19 Mar 2022 10:08:53 +0200 Subject: [PATCH 01/66] Ability to define component form for advanced widget settings and widget data keys --- .../add-widget-dialog.component.ts | 4 +- .../dashboard-page/edit-widget.component.ts | 4 +- .../home/components/home-components.module.ts | 5 + .../data-key-config-dialog.component.html | 1 + .../data-key-config-dialog.component.ts | 1 + .../widget/data-key-config.component.html | 5 +- .../widget/data-key-config.component.ts | 13 +- .../components/widget/data-keys.component.ts | 4 + .../qrcode-widget-settings.component.html | 36 ++++ .../qrcode-widget-settings.component.ts | 67 ++++++ .../lib/settings/widget-settings.module.ts | 42 ++++ .../widget/widget-component.service.ts | 2 + .../widget/widget-config.component.html | 7 +- .../widget/widget-config.component.ts | 7 +- .../widget/widget-settings.component.html | 24 +++ .../widget/widget-settings.component.scss | 22 ++ .../widget/widget-settings.component.ts | 201 ++++++++++++++++++ .../home/models/widget-component.models.ts | 6 + .../pages/widget/widget-editor.component.html | 12 ++ ui-ngx/src/app/shared/models/widget.models.ts | 127 ++++++++++- .../assets/locale/locale.constant-en_US.json | 11 +- 21 files changed, 587 insertions(+), 14 deletions(-) create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/widget-settings.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/widget-settings.component.scss create mode 100644 ui-ngx/src/app/modules/home/components/widget/widget-settings.component.ts diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.ts index 8e8745dd20..2e69f4adfd 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.ts @@ -91,7 +91,9 @@ export class AddWidgetDialogComponent extends DialogComponent
- - +
diff --git a/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.ts index bb9290a1a1..03d72101f1 100644 --- a/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.ts @@ -72,6 +72,9 @@ export class DataKeyConfigComponent extends PageComponent implements OnInit, Con @Input() dataKeySettingsSchema: any; + @Input() + dataKeySettingsDirective: string; + @Input() showPostProcessing = true; @@ -121,11 +124,15 @@ export class DataKeyConfigComponent extends PageComponent implements OnInit, Con type: DataKeyType.alarm }); } - if (this.dataKeySettingsSchema && this.dataKeySettingsSchema.schema) { + if (this.dataKeySettingsSchema && this.dataKeySettingsSchema.schema || + this.dataKeySettingsDirective && this.dataKeySettingsDirective.length) { this.displayAdvanced = true; this.dataKeySettingsData = { - schema: this.dataKeySettingsSchema.schema, - form: this.dataKeySettingsSchema.form || ['*'] + schema: this.dataKeySettingsSchema?.schema || { + type: 'object', + properties: {} + }, + form: this.dataKeySettingsSchema?.form || ['*'] }; this.dataKeySettingsFormGroup = this.fb.group({ settings: [null, []] diff --git a/ui-ngx/src/app/modules/home/components/widget/data-keys.component.ts b/ui-ngx/src/app/modules/home/components/widget/data-keys.component.ts index 781c30b02f..63e72905e7 100644 --- a/ui-ngx/src/app/modules/home/components/widget/data-keys.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/data-keys.component.ts @@ -113,6 +113,9 @@ export class DataKeysComponent implements ControlValueAccessor, OnInit, AfterVie @Input() datakeySettingsSchema: any; + @Input() + dataKeySettingsDirective: string; + @Input() callbacks: DataKeysCallbacks; @@ -395,6 +398,7 @@ export class DataKeysComponent implements ControlValueAccessor, OnInit, AfterVie data: { dataKey: deepClone(key), dataKeySettingsSchema: this.datakeySettingsSchema, + dataKeySettingsDirective: this.dataKeySettingsDirective, entityAliasId: this.entityAliasId, showPostProcessing: this.widgetType !== widgetType.alarm, callbacks: this.callbacks diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.html new file mode 100644 index 0000000000..6efcc3611b --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.html @@ -0,0 +1,36 @@ + +
+ + {{ 'widgets.qr-code.use-qr-code-text-function' | translate }} + + + widgets.qr-code.qr-code-text-pattern + + + {{ 'widgets.qr-code.qr-code-text-pattern-required' | translate }} + + +
+ + + +
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.ts new file mode 100644 index 0000000000..c9ed32b85a --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.ts @@ -0,0 +1,67 @@ +/// +/// 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 { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; + + +@Component({ + selector: 'tb-qrcode-widget-settings', + templateUrl: './qrcode-widget-settings.component.html', + styleUrls: [] +}) +export class QrCodeWidgetSettingsComponent extends WidgetSettingsComponent { + + qrCodeWidgetSettingsForm: FormGroup; + + constructor(protected store: Store, + private fb: FormBuilder) { + super(store); + } + + protected settingsForm(): FormGroup { + return this.qrCodeWidgetSettingsForm; + } + + protected onSettingsSet(settings: WidgetSettings) { + this.qrCodeWidgetSettingsForm = this.fb.group({ + qrCodeTextPattern: [settings ? settings.qrCodeTextPattern : '${entityName}', []], + useQrCodeTextFunction: [settings ? settings.useQrCodeTextFunction : false, []], + qrCodeTextFunction: [settings ? settings.qrCodeTextFunction : 'return data[0][\'entityName\'];', []] + }); + } + + protected validatorTriggers(): string[] { + return ['useQrCodeTextFunction']; + } + + protected updateValidators(emitEvent: boolean) { + const useQrCodeTextFunction: boolean = this.qrCodeWidgetSettingsForm.get('useQrCodeTextFunction').value; + if (useQrCodeTextFunction) { + this.qrCodeWidgetSettingsForm.get('qrCodeTextPattern').setValidators([]); + this.qrCodeWidgetSettingsForm.get('qrCodeTextFunction').setValidators([Validators.required]); + } else { + this.qrCodeWidgetSettingsForm.get('qrCodeTextPattern').setValidators([Validators.required]); + this.qrCodeWidgetSettingsForm.get('qrCodeTextFunction').setValidators([]); + } + this.qrCodeWidgetSettingsForm.get('qrCodeTextPattern').updateValueAndValidity({emitEvent}); + this.qrCodeWidgetSettingsForm.get('qrCodeTextFunction').updateValueAndValidity({emitEvent}); + } + +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts new file mode 100644 index 0000000000..7a10d51465 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts @@ -0,0 +1,42 @@ +/// +/// 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 { NgModule, Type } from '@angular/core'; +import { QrCodeWidgetSettingsComponent } from '@home/components/widget/lib/settings/qrcode-widget-settings.component'; +import { CommonModule } from '@angular/common'; +import { SharedModule } from '@shared/shared.module'; +import { SharedHomeComponentsModule } from '@home/components/shared-home-components.module'; +import { IWidgetSettingsComponent } from '@shared/models/widget.models'; + +@NgModule({ + declarations: [ + QrCodeWidgetSettingsComponent + ], + imports: [ + CommonModule, + SharedModule, + SharedHomeComponentsModule + ], + exports: [ + QrCodeWidgetSettingsComponent + ] +}) +export class WidgetSettingsModule { +} + +export const widgetSettingsComponentsMap: {[key: string]: Type} = { + 'tb-qrcode-widget-settings': QrCodeWidgetSettingsComponent +}; diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-component.service.ts b/ui-ngx/src/app/modules/home/components/widget/widget-component.service.ts index de88b73e3b..851854e331 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-component.service.ts +++ b/ui-ngx/src/app/modules/home/components/widget/widget-component.service.ts @@ -107,6 +107,8 @@ export class WidgetComponentService { controllerScript: this.utils.editWidgetInfo.controllerScript, settingsSchema: this.utils.editWidgetInfo.settingsSchema, dataKeySettingsSchema: this.utils.editWidgetInfo.dataKeySettingsSchema, + settingsDirective: this.utils.editWidgetInfo.settingsDirective, + dataKeySettingsDirective: this.utils.editWidgetInfo.dataKeySettingsDirective, defaultConfig: this.utils.editWidgetInfo.defaultConfig }, new WidgetTypeId('1'), new TenantId( NULL_UUID ), 'customWidgetBundle', undefined ); diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html index bb4ff8503e..9bfbcc71a9 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html @@ -190,6 +190,7 @@ [optDataKeys]="modelValue?.typeParameters?.dataKeysOptional" [aliasController]="aliasController" [datakeySettingsSchema]="modelValue?.dataKeySettingsSchema" + [dataKeySettingsDirective]="modelValue?.dataKeySettingsDirective" [callbacks]="widgetConfigCallbacks" [entityAliasId]="datasourceControl.get('entityAliasId').value" [formControl]="datasourceControl.get('dataKeys')"> @@ -283,6 +284,7 @@ [datasourceType]="alarmSourceSettings.get('type').value" [aliasController]="aliasController" [datakeySettingsSchema]="modelValue?.dataKeySettingsSchema" + [dataKeySettingsDirective]="modelValue?.dataKeySettingsDirective" [callbacks]="widgetConfigCallbacks" [entityAliasId]="alarmSourceSettings.get('entityAliasId').value" formControlName="dataKeys"> @@ -476,9 +478,10 @@
- - +
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts index c34698bafd..b3325e0de0 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts @@ -605,7 +605,7 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont widgetSettingsFormData.schema = deepClone(emptySettingsSchema); widgetSettingsFormData.form = deepClone(defaultSettingsForm); widgetSettingsFormData.groupInfoes = deepClone(emptySettingsGroupInfoes); - widgetSettingsFormData.model = {}; + widgetSettingsFormData.model = settings || {}; } this.advancedSettings.patchValue({ settings: widgetSettingsFormData }, {emitEvent: false}); } @@ -713,7 +713,8 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont } public displayAdvanced(): boolean { - return !!this.modelValue && !!this.modelValue.settingsSchema && !!this.modelValue.settingsSchema.schema; + return !!this.modelValue && (!!this.modelValue.settingsSchema && !!this.modelValue.settingsSchema.schema || + !!this.modelValue.settingsDirective && !!this.modelValue.settingsDirective.length); } public dndDatasourceMoved(index: number) { @@ -913,7 +914,7 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont valid: false } }; - } else if (!this.advancedSettings.valid) { + } else if (!this.advancedSettings.valid || (this.displayAdvanced() && !this.modelValue.config.settings)) { return { advancedSettings: { valid: false diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-settings.component.html new file mode 100644 index 0000000000..a9742c0545 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/widget-settings.component.html @@ -0,0 +1,24 @@ + +
+ +
{{definedDirectiveError}}
+ + +
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-settings.component.scss b/ui-ngx/src/app/modules/home/components/widget/widget-settings.component.scss new file mode 100644 index 0000000000..2afac0944b --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/widget-settings.component.scss @@ -0,0 +1,22 @@ +/** + * 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 { + .tb-settings-directive-error { + font-size: 13px; + font-weight: 400; + color: rgb(221, 44, 0); + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget-settings.component.ts new file mode 100644 index 0000000000..7b5e3f1b0f --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/widget-settings.component.ts @@ -0,0 +1,201 @@ +/// +/// 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 { + AfterViewInit, + Component, ComponentFactoryResolver, + ComponentRef, + forwardRef, + Input, + OnDestroy, + OnInit, + ViewChild, + ViewContainerRef +} from '@angular/core'; +import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms'; +import { + IRuleNodeConfigurationComponent, + RuleNodeConfiguration, + RuleNodeDefinition +} from '@shared/models/rule-node.models'; +import { Subscription } from 'rxjs'; +import { RuleChainService } from '@core/http/rule-chain.service'; +import { coerceBooleanProperty } from '@angular/cdk/coercion'; +import { TranslateService } from '@ngx-translate/core'; +import { JsonObjectEditComponent } from '@shared/components/json-object-edit.component'; +import { deepClone } from '@core/utils'; +import { RuleChainType } from '@shared/models/rule-chain.models'; +import { JsonFormComponent } from '@shared/components/json-form/json-form.component'; +import { JsonFormComponentData } from '@shared/components/json-form/json-form-component.models'; +import { IWidgetSettingsComponent, WidgetSettings } from '@shared/models/widget.models'; +import { widgetSettingsComponentsMap } from '@home/components/widget/lib/settings/widget-settings.module'; + +@Component({ + selector: 'tb-widget-settings', + templateUrl: './widget-settings.component.html', + styleUrls: ['./widget-settings.component.scss'], + providers: [{ + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => WidgetSettingsComponent), + multi: true + }] +}) +export class WidgetSettingsComponent implements ControlValueAccessor, OnInit, OnDestroy, AfterViewInit { + + @ViewChild('definedSettingsContent', {read: ViewContainerRef, static: true}) definedSettingsContainer: ViewContainerRef; + + @ViewChild('jsonFormComponent') jsonFormComponent: JsonFormComponent; + + @Input() + disabled: boolean; + + settingsDirectiveValue: string; + + @Input() + set settingsDirective(settingsDirective: string) { + if (this.settingsDirectiveValue !== settingsDirective) { + this.settingsDirectiveValue = settingsDirective; + if (this.settingsDirectiveValue) { + this.validateDefinedDirective(); + } + } + } + + get settingsDirective(): string { + return this.settingsDirectiveValue; + } + + definedDirectiveError: string; + + widgetSettingsFormGroup: FormGroup; + + changeSubscription: Subscription; + + private definedSettingsComponentRef: ComponentRef; + private definedSettingsComponent: IWidgetSettingsComponent; + + private widgetSettingsFormData: JsonFormComponentData; + + private propagateChange = (v: any) => { }; + + constructor(private translate: TranslateService, + private cfr: ComponentFactoryResolver, + private fb: FormBuilder) { + this.widgetSettingsFormGroup = this.fb.group({ + settings: [null, Validators.required] + }); + } + + registerOnChange(fn: any): void { + this.propagateChange = fn; + } + + registerOnTouched(fn: any): void { + } + + ngOnInit(): void { + } + + ngOnDestroy(): void { + if (this.definedSettingsComponentRef) { + this.definedSettingsComponentRef.destroy(); + } + } + + ngAfterViewInit(): void { + } + + setDisabledState(isDisabled: boolean): void { + this.disabled = isDisabled; + if (this.disabled) { + this.widgetSettingsFormGroup.disable({emitEvent: false}); + } else { + this.widgetSettingsFormGroup.enable({emitEvent: false}); + } + } + + writeValue(value: JsonFormComponentData): void { + this.widgetSettingsFormData = value; + if (this.changeSubscription) { + this.changeSubscription.unsubscribe(); + this.changeSubscription = null; + } + if (this.definedSettingsComponent) { + this.definedSettingsComponent.settings = this.widgetSettingsFormData.model; + this.changeSubscription = this.definedSettingsComponent.settingsChanged.subscribe((settings) => { + this.updateModel(settings); + }); + } else { + this.widgetSettingsFormGroup.get('settings').patchValue(this.widgetSettingsFormData, {emitEvent: false}); + this.changeSubscription = this.widgetSettingsFormGroup.get('settings').valueChanges.subscribe( + (widgetSettingsFormData: JsonFormComponentData) => { + this.updateModel(widgetSettingsFormData.model); + } + ); + } + } + + useDefinedDirective(): boolean { + return this.settingsDirective && + this.settingsDirective.length && !this.definedDirectiveError; + } + + useJsonForm(): boolean { + return !this.settingsDirective || !this.settingsDirective.length; + } + + private updateModel(settings: WidgetSettings) { + this.widgetSettingsFormData.model = settings; + if (this.definedSettingsComponent || this.widgetSettingsFormGroup.valid) { + this.propagateChange(this.widgetSettingsFormData); + } else { + this.propagateChange(null); + } + } + + private validateDefinedDirective() { + if (this.definedSettingsComponentRef) { + this.definedSettingsComponentRef.destroy(); + this.definedSettingsComponentRef = null; + } + if (this.settingsDirective && this.settingsDirective.length) { + const componentType = widgetSettingsComponentsMap[this.settingsDirective]; + if (!componentType) { + this.definedDirectiveError = this.translate.instant('widget-config.settings-component-not-found', + {selector: this.settingsDirective}); + } else { + if (this.changeSubscription) { + this.changeSubscription.unsubscribe(); + this.changeSubscription = null; + } + this.definedSettingsContainer.clear(); + const factory = this.cfr.resolveComponentFactory(componentType); + this.definedSettingsComponentRef = this.definedSettingsContainer.createComponent(factory); + this.definedSettingsComponent = this.definedSettingsComponentRef.instance; + this.definedSettingsComponent.settings = this.widgetSettingsFormData?.model; + this.changeSubscription = this.definedSettingsComponent.settingsChanged.subscribe((settings) => { + this.updateModel(settings); + }); + } + } + } + + validate() { + if (this.useDefinedDirective()) { + this.definedSettingsComponent.validate(); + } + } +} diff --git a/ui-ngx/src/app/modules/home/models/widget-component.models.ts b/ui-ngx/src/app/modules/home/models/widget-component.models.ts index 3bb727f4f5..49944cb0e5 100644 --- a/ui-ngx/src/app/modules/home/models/widget-component.models.ts +++ b/ui-ngx/src/app/modules/home/models/widget-component.models.ts @@ -424,6 +424,8 @@ export interface WidgetConfigComponentData { isDataEnabled: boolean; settingsSchema: JsonSettingsSchema; dataKeySettingsSchema: JsonSettingsSchema; + settingsDirective: string; + dataKeySettingsDirective: string; } export const MissingWidgetType: WidgetInfo = { @@ -510,6 +512,8 @@ export function toWidgetInfo(widgetTypeEntity: WidgetType): WidgetInfo { controllerScript: widgetTypeEntity.descriptor.controllerScript, settingsSchema: widgetTypeEntity.descriptor.settingsSchema, dataKeySettingsSchema: widgetTypeEntity.descriptor.dataKeySettingsSchema, + settingsDirective: widgetTypeEntity.descriptor.settingsDirective, + dataKeySettingsDirective: widgetTypeEntity.descriptor.dataKeySettingsDirective, defaultConfig: widgetTypeEntity.descriptor.defaultConfig }; } @@ -536,6 +540,8 @@ export function toWidgetType(widgetInfo: WidgetInfo, id: WidgetTypeId, tenantId: controllerScript: widgetInfo.controllerScript, settingsSchema: widgetInfo.settingsSchema, dataKeySettingsSchema: widgetInfo.dataKeySettingsSchema, + settingsDirective: widgetInfo.settingsDirective, + dataKeySettingsDirective: widgetInfo.dataKeySettingsDirective, defaultConfig: widgetInfo.defaultConfig }; return { diff --git a/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.html b/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.html index f3aa24f65c..ba0ded66cf 100644 --- a/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.html +++ b/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.html @@ -237,6 +237,18 @@ rows="2" maxlength="255"> {{descriptionInput.value?.length || 0}}/255 + + widget.settings-form-selector + + + + widget.data-key-settings-form-selector + + diff --git a/ui-ngx/src/app/shared/models/widget.models.ts b/ui-ngx/src/app/shared/models/widget.models.ts index 703cffcaee..45c8943753 100644 --- a/ui-ngx/src/app/shared/models/widget.models.ts +++ b/ui-ngx/src/app/shared/models/widget.models.ts @@ -25,6 +25,14 @@ import { EntityId } from '@shared/models/id/entity-id'; import * as moment_ from 'moment'; import { EntityDataPageLink, EntityFilter, KeyFilter } from '@shared/models/query/query.models'; import { PopoverPlacement } from '@shared/components/popover.models'; +import { PageComponent } from '@shared/components/page.component'; +import { AfterViewInit, Directive, EventEmitter, Inject, OnInit } from '@angular/core'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { AbstractControl, FormGroup } from '@angular/forms'; +import {RuleChainType} from "@shared/models/rule-chain.models"; +import {Observable} from "rxjs"; +import {RuleNodeConfiguration} from "@shared/models/rule-node.models"; export enum widgetType { timeseries = 'timeseries', @@ -143,6 +151,8 @@ export interface WidgetTypeDescriptor { controllerScript: string; settingsSchema?: string | any; dataKeySettingsSchema?: string | any; + settingsDirective?: string; + dataKeySettingsDirective?: string; defaultConfig: string; sizeX: number; sizeY: number; @@ -159,6 +169,7 @@ export interface WidgetTypeParameters { singleEntity?: boolean; warnOnPageDataOverflow?: boolean; ignoreDataUpdateOnIntervalTick?: boolean; + } export interface WidgetControllerDescriptor { @@ -483,6 +494,10 @@ export interface WidgetComparisonSettings { comparisonCustomIntervalValue?: number; } +export interface WidgetSettings { + [key: string]: any; +} + export interface WidgetConfig { title?: string; titleIcon?: string; @@ -512,7 +527,7 @@ export interface WidgetConfig { decimals?: number; noDataDisplayMessage?: string; actions?: {[actionSourceId: string]: Array}; - settings?: any; + settings?: WidgetSettings; alarmSource?: Datasource; alarmStatusList?: AlarmSearchStatus[]; alarmSeverityList?: AlarmSeverity[]; @@ -570,3 +585,113 @@ export interface WidgetSize { sizeX: number; sizeY: number; } + +export interface IWidgetSettingsComponent { + settings: WidgetSettings; + settingsChanged: Observable; + validate(); + [key: string]: any; +} + +@Directive() +// tslint:disable-next-line:directive-class-suffix +export abstract class WidgetSettingsComponent extends PageComponent implements + IWidgetSettingsComponent, OnInit, AfterViewInit { + + settingsValue: WidgetSettings; + + private settingsSet = false; + + set settings(value: WidgetSettings) { + this.settingsValue = value; + if (!this.settingsSet) { + this.settingsSet = true; + this.setupSettings(value); + } else { + this.updateSettings(value); + } + } + + get settings(): WidgetSettings { + return this.settingsValue; + } + + settingsChangedEmitter = new EventEmitter(); + settingsChanged = this.settingsChangedEmitter.asObservable(); + + protected constructor(@Inject(Store) protected store: Store) { + super(store); + } + + ngOnInit() {} + + ngAfterViewInit(): void { + setTimeout(() => { + if (!this.validateSettings()) { + this.settingsChangedEmitter.emit(null); + } + }, 0); + } + + validate() { + this.onValidate(); + } + + protected setupSettings(settings: WidgetSettings) { + this.onSettingsSet(this.prepareInputSettings(settings)); + this.updateValidators(false); + for (const trigger of this.validatorTriggers()) { + const path = trigger.split('.'); + let control: AbstractControl = this.settingsForm(); + for (const part of path) { + control = control.get(part); + } + control.valueChanges.subscribe(() => { + this.updateValidators(true, trigger); + }); + } + this.settingsForm().valueChanges.subscribe((updated: WidgetSettings) => { + this.onSettingsChanged(updated); + }); + } + + protected updateSettings(settings: WidgetSettings) { + this.settingsForm().reset(this.prepareInputSettings(settings), {emitEvent: false}); + this.updateValidators(false); + } + + protected updateValidators(emitEvent: boolean, trigger?: string) { + } + + protected validatorTriggers(): string[] { + return []; + } + + protected onSettingsChanged(updated: WidgetSettings) { + this.settingsValue = updated; + if (this.validateSettings()) { + this.settingsChangedEmitter.emit(this.prepareOutputSettings(updated)); + } else { + this.settingsChangedEmitter.emit(null); + } + } + + protected prepareInputSettings(settings: WidgetSettings): WidgetSettings { + return settings; + } + + protected prepareOutputSettings(settings: WidgetSettings): WidgetSettings { + return settings; + } + + protected validateSettings(): boolean { + return this.settingsForm().valid; + } + + protected onValidate() {} + + protected abstract settingsForm(): FormGroup; + + protected abstract onSettingsSet(settings: WidgetSettings); + +} diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index aab433c992..2ee01bb553 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -2985,6 +2985,8 @@ "widget-settings": "Widget settings", "description": "Description", "image-preview": "Image preview", + "settings-form-selector": "Settings form selector", + "data-key-settings-form-selector": "Data key settings form selector", "javascript": "Javascript", "js": "JS", "remove-widget-type-title": "Are you sure you want to remove the widget type '{{widgetName}}'?", @@ -3151,7 +3153,8 @@ "icon-size": "Icon size", "advanced-settings": "Advanced settings", "data-settings": "Data settings", - "no-data-display-message": "\"No data to display\" alternative message" + "no-data-display-message": "\"No data to display\" alternative message", + "settings-component-not-found": "Settings form component not found for selector '{{selector}}'" }, "widget-type": { "import": "Import widget type", @@ -3266,6 +3269,12 @@ "value": "Value" }, "invalid-qr-code-text": "Invalid input text for QR code. Input should have a string type", + "qr-code": { + "use-qr-code-text-function": "Use QR code text function", + "qr-code-text-pattern": "QR code text pattern (for ex. '${entityName} | ${keyName} - some text.')", + "qr-code-text-pattern-required": "QR code text pattern is required.", + "qr-code-text-function": "QR code text function" + }, "persistent-table": { "rpc-id": "RPC ID", "message-type": "Message type", From ec6a7ae5a4013e886a2ca2f6626ebc09bfff6900 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Tue, 22 Mar 2022 17:13:21 +0200 Subject: [PATCH 02/66] Add dashboard and widget reference to widget settings form. Add default value method. --- .../json/system/widget_bundles/cards.json | 3 ++- .../add-widget-dialog.component.html | 5 ++-- .../dashboard-page/edit-widget.component.html | 5 ++-- .../data-key-config-dialog.component.html | 2 ++ .../data-key-config-dialog.component.ts | 5 +++- .../widget/data-key-config.component.html | 2 ++ .../widget/data-key-config.component.ts | 9 ++++++- .../components/widget/data-keys.component.ts | 11 +++++++- .../qrcode-widget-settings.component.html | 3 ++- .../qrcode-widget-settings.component.ts | 26 ++++++++++++++----- .../widget/widget-config.component.html | 6 +++++ .../widget/widget-config.component.ts | 25 ++++++++---------- .../widget/widget-settings.component.ts | 14 ++++++++-- ui-ngx/src/app/shared/models/widget.models.ts | 17 +++++++++--- 14 files changed, 96 insertions(+), 37 deletions(-) diff --git a/application/src/main/data/json/system/widget_bundles/cards.json b/application/src/main/data/json/system/widget_bundles/cards.json index e852bcc9d5..90159f1b2c 100644 --- a/application/src/main/data/json/system/widget_bundles/cards.json +++ b/application/src/main/data/json/system/widget_bundles/cards.json @@ -163,8 +163,9 @@ "templateHtml": "\n", "templateCss": "#container {\n overflow: auto;\n}\n\n.tbDatasource-container {\n margin: 5px;\n padding: 8px;\n}\n\n.tbDatasource-title {\n font-size: 1.200rem;\n font-weight: 500;\n padding-bottom: 10px;\n}\n\n.tbDatasource-table {\n width: 100%;\n box-shadow: 0 0 10px #ccc;\n border-collapse: collapse;\n white-space: nowrap;\n font-size: 1.000rem;\n color: #757575;\n}\n\n.tbDatasource-table td {\n position: relative;\n border-top: 1px solid rgba(0, 0, 0, 0.12);\n border-bottom: 1px solid rgba(0, 0, 0, 0.12);\n padding: 0px 18px;\n box-sizing: border-box;\n}", "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n self.ctx.$scope.qrCodeWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n return {\n dataKeysOptional: true,\n datasourcesOptional: true\n };\n}\n\nself.onDestroy = function() {\n}\n\n", - "settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"QR Code\",\n \"properties\": {\n \"qrCodeTextPattern\": {\n \"title\": \"QR code text pattern (for ex. '${entityName} | ${keyName} - some text.')\",\n \"type\": \"string\",\n \"default\": \"${entityName}\"\n },\n \"useQrCodeTextFunction\": {\n \"title\": \"Use QR code text function\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"qrCodeTextFunction\": {\n \"title\": \"QR code text function: f(data)\",\n \"type\": \"string\",\n \"default\": \"return data[0]['entityName'];\"\n }\n },\n \"required\": []\n },\n \"form\": [\n \"useQrCodeTextFunction\",\n {\n \"key\": \"qrCodeTextPattern\",\n \"condition\": \"model.useQrCodeTextFunction !== true\"\n },\n {\n \"key\": \"qrCodeTextFunction\",\n \"type\": \"javascript\",\n \"helpId\": \"widget/lib/qrcode/qrcode_text_fn\",\n \"condition\": \"model.useQrCodeTextFunction === true\"\n }\n ]\n}\n", + "settingsSchema": "{}\n", "dataKeySettingsSchema": "{}\n", + "settingsDirective": "tb-qrcode-widget-settings", "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"entityAliasId\":null,\"filterId\":null,\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.7036904308224163,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"qrCodeTextPattern\":\"${entityName}\",\"useQrCodeTextFunction\":false,\"qrCodeTextFunction\":\"return data[0] ? data[0]['entityName'] : '';\"},\"title\":\"QR Code\"}" } }, diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html index 27c1e58b7d..99f5e6ebfd 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.html @@ -33,9 +33,8 @@ diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/edit-widget.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/edit-widget.component.html index 1305f08980..c3b80e541f 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/edit-widget.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/edit-widget.component.html @@ -20,9 +20,8 @@ diff --git a/ui-ngx/src/app/modules/home/components/widget/data-key-config-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/data-key-config-dialog.component.html index 371a8f6456..9cfe9611fc 100644 --- a/ui-ngx/src/app/modules/home/components/widget/data-key-config-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/data-key-config-dialog.component.html @@ -33,6 +33,8 @@ [dataKeySettingsSchema]="data.dataKeySettingsSchema" [dataKeySettingsDirective]="data.dataKeySettingsDirective" [entityAliasId]="data.entityAliasId" + [dashboard]="data.dashboard" + [widget]="data.widget" [showPostProcessing]="data.showPostProcessing" [callbacks]="data.callbacks" formControlName="dataKey"> diff --git a/ui-ngx/src/app/modules/home/components/widget/data-key-config-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/data-key-config-dialog.component.ts index 48957543d5..4e88f389dc 100644 --- a/ui-ngx/src/app/modules/home/components/widget/data-key-config-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/data-key-config-dialog.component.ts @@ -22,14 +22,17 @@ import { AppState } from '@core/core.state'; import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms'; import { Router } from '@angular/router'; import { DialogComponent } from '@shared/components/dialog.component'; -import { DataKey } from '@shared/models/widget.models'; +import { DataKey, Widget } from '@shared/models/widget.models'; import { DataKeysCallbacks } from './data-keys.component.models'; import { DataKeyConfigComponent } from '@home/components/widget/data-key-config.component'; +import { Dashboard } from '@shared/models/dashboard.models'; export interface DataKeyConfigDialogData { dataKey: DataKey; dataKeySettingsSchema: any; dataKeySettingsDirective: string; + dashboard: Dashboard; + widget: Widget; entityAliasId?: string; showPostProcessing?: boolean; callbacks?: DataKeysCallbacks; diff --git a/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.html b/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.html index eba2fc6bc9..f6e9acda1b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.html @@ -100,6 +100,8 @@
diff --git a/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.ts index 03d72101f1..9c23be8144 100644 --- a/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.ts @@ -18,7 +18,7 @@ import { Component, ElementRef, forwardRef, Input, OnInit, ViewChild } from '@an import { PageComponent } from '@shared/components/page.component'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; -import { DataKey } from '@shared/models/widget.models'; +import { DataKey, Widget } from '@shared/models/widget.models'; import { ControlValueAccessor, FormBuilder, @@ -41,6 +41,7 @@ import { alarmFields } from '@shared/models/alarm.models'; import { JsFuncComponent } from '@shared/components/js-func.component'; import { JsonFormComponentData } from '@shared/components/json-form/json-form-component.models'; import { WidgetService } from '@core/http/widget.service'; +import { Dashboard } from '@shared/models/dashboard.models'; @Component({ selector: 'tb-data-key-config', @@ -69,6 +70,12 @@ export class DataKeyConfigComponent extends PageComponent implements OnInit, Con @Input() callbacks: DataKeysCallbacks; + @Input() + dashboard: Dashboard; + + @Input() + widget: Widget; + @Input() dataKeySettingsSchema: any; diff --git a/ui-ngx/src/app/modules/home/components/widget/data-keys.component.ts b/ui-ngx/src/app/modules/home/components/widget/data-keys.component.ts index 63e72905e7..75f15327c5 100644 --- a/ui-ngx/src/app/modules/home/components/widget/data-keys.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/data-keys.component.ts @@ -46,7 +46,7 @@ import { MatAutocomplete } from '@angular/material/autocomplete'; import { MatChipInputEvent, MatChipList } from '@angular/material/chips'; import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; -import { DataKey, DatasourceType, widgetType } from '@shared/models/widget.models'; +import { DataKey, DatasourceType, Widget, widgetType } from '@shared/models/widget.models'; import { IAliasController } from '@core/api/widget-api.models'; import { DataKeysCallbacks } from './data-keys.component.models'; import { alarmFields } from '@shared/models/alarm.models'; @@ -61,6 +61,7 @@ import { } from '@home/components/widget/data-key-config-dialog.component'; import { deepClone } from '@core/utils'; import { MatChipDropEvent } from '@app/shared/components/mat-chip-draggable.directive'; +import { Dashboard } from '@shared/models/dashboard.models'; @Component({ selector: 'tb-data-keys', @@ -116,6 +117,12 @@ export class DataKeysComponent implements ControlValueAccessor, OnInit, AfterVie @Input() dataKeySettingsDirective: string; + @Input() + dashboard: Dashboard; + + @Input() + widget: Widget; + @Input() callbacks: DataKeysCallbacks; @@ -399,6 +406,8 @@ export class DataKeysComponent implements ControlValueAccessor, OnInit, AfterVie dataKey: deepClone(key), dataKeySettingsSchema: this.datakeySettingsSchema, dataKeySettingsDirective: this.dataKeySettingsDirective, + dashboard: this.dashboard, + widget: this.widget, entityAliasId: this.entityAliasId, showPostProcessing: this.widgetType !== widgetType.alarm, callbacks: this.callbacks diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.html index 6efcc3611b..29a10e1d58 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.html @@ -28,7 +28,8 @@
- diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.ts index c9ed32b85a..06e8d7d079 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.ts @@ -14,12 +14,12 @@ /// limitations under the License. /// -import { Component } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; -import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; - +import { JsFuncComponent } from '@shared/components/js-func.component'; @Component({ selector: 'tb-qrcode-widget-settings', @@ -28,6 +28,8 @@ import { AppState } from '@core/core.state'; }) export class QrCodeWidgetSettingsComponent extends WidgetSettingsComponent { + @ViewChild('qrCodeTextFunctionComponent', {static: true}) qrCodeTextFunctionComponent: JsFuncComponent; + qrCodeWidgetSettingsForm: FormGroup; constructor(protected store: Store, @@ -39,11 +41,19 @@ export class QrCodeWidgetSettingsComponent extends WidgetSettingsComponent { return this.qrCodeWidgetSettingsForm; } + protected defaultSettings(): WidgetSettings { + return { + qrCodeTextPattern: '${entityName}', + useQrCodeTextFunction: false, + qrCodeTextFunction: 'return data[0][\'entityName\'];' + }; + } + protected onSettingsSet(settings: WidgetSettings) { this.qrCodeWidgetSettingsForm = this.fb.group({ - qrCodeTextPattern: [settings ? settings.qrCodeTextPattern : '${entityName}', []], - useQrCodeTextFunction: [settings ? settings.useQrCodeTextFunction : false, []], - qrCodeTextFunction: [settings ? settings.qrCodeTextFunction : 'return data[0][\'entityName\'];', []] + qrCodeTextPattern: [settings.qrCodeTextPattern, []], + useQrCodeTextFunction: [settings.useQrCodeTextFunction, []], + qrCodeTextFunction: [settings.qrCodeTextFunction, []] }); } @@ -55,7 +65,9 @@ export class QrCodeWidgetSettingsComponent extends WidgetSettingsComponent { const useQrCodeTextFunction: boolean = this.qrCodeWidgetSettingsForm.get('useQrCodeTextFunction').value; if (useQrCodeTextFunction) { this.qrCodeWidgetSettingsForm.get('qrCodeTextPattern').setValidators([]); - this.qrCodeWidgetSettingsForm.get('qrCodeTextFunction').setValidators([Validators.required]); + this.qrCodeWidgetSettingsForm.get('qrCodeTextFunction').setValidators([Validators.required, + (control: AbstractControl) => this.qrCodeTextFunctionComponent.validate(control as FormControl) + ]); } else { this.qrCodeWidgetSettingsForm.get('qrCodeTextPattern').setValidators([Validators.required]); this.qrCodeWidgetSettingsForm.get('qrCodeTextFunction').setValidators([]); diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html index 9bfbcc71a9..4fc8387a93 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html @@ -191,6 +191,8 @@ [aliasController]="aliasController" [datakeySettingsSchema]="modelValue?.dataKeySettingsSchema" [dataKeySettingsDirective]="modelValue?.dataKeySettingsDirective" + [dashboard]="dashboard" + [widget]="widget" [callbacks]="widgetConfigCallbacks" [entityAliasId]="datasourceControl.get('entityAliasId').value" [formControl]="datasourceControl.get('dataKeys')"> @@ -285,6 +287,8 @@ [aliasController]="aliasController" [datakeySettingsSchema]="modelValue?.dataKeySettingsSchema" [dataKeySettingsDirective]="modelValue?.dataKeySettingsDirective" + [dashboard]="dashboard" + [widget]="widget" [callbacks]="widgetConfigCallbacks" [entityAliasId]="alarmSourceSettings.get('entityAliasId').value" formControlName="dataKeys"> @@ -480,6 +484,8 @@ fxLayout="column"> diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts index b3325e0de0..52bfb548ea 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts @@ -25,7 +25,7 @@ import { datasourceTypeTranslationMap, defaultLegendConfig, GroupInfo, - JsonSchema, + JsonSchema, Widget, widgetType } from '@shared/models/widget.models'; import { @@ -65,7 +65,7 @@ import { MatDialog } from '@angular/material/dialog'; import { EntityService } from '@core/http/entity.service'; import { JsonFormComponentData } from '@shared/components/json-form/json-form-component.models'; import { WidgetActionsData } from './action/manage-widget-actions.component.models'; -import { DashboardState } from '@shared/models/dashboard.models'; +import { Dashboard, DashboardState } from '@shared/models/dashboard.models'; import { entityFields } from '@shared/models/entity.models'; import { Filter, Filters } from '@shared/models/query/query.models'; import { FilterDialogComponent, FilterDialogData } from '@home/components/filter/filter-dialog.component'; @@ -126,17 +126,14 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont aliasController: IAliasController; @Input() - entityAliases: EntityAliases; + dashboard: Dashboard; @Input() - filters: Filters; + widget: Widget; @Input() functionsOnly: boolean; - @Input() - dashboardStates: {[id: string]: DashboardState }; - @Input() disabled: boolean; widgetType: widgetType; @@ -831,14 +828,14 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont data: { isAdd: true, allowedEntityTypes, - entityAliases: this.entityAliases, + entityAliases: this.dashboard.configuration.entityAliases, alias: singleEntityAlias } }).afterClosed().pipe( tap((entityAlias) => { if (entityAlias) { - this.entityAliases[entityAlias.id] = entityAlias; - this.aliasController.updateEntityAliases(this.entityAliases); + this.dashboard.configuration.entityAliases[entityAlias.id] = entityAlias; + this.aliasController.updateEntityAliases(this.dashboard.configuration.entityAliases); } }) ); @@ -852,14 +849,14 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], data: { isAdd: true, - filters: this.filters, + filters: this.dashboard.configuration.filters, filter: singleFilter } }).afterClosed().pipe( tap((result) => { if (result) { - this.filters[result.id] = result; - this.aliasController.updateFilters(this.filters); + this.dashboard.configuration.filters[result.id] = result; + this.aliasController.updateFilters(this.dashboard.configuration.filters); } }) ); @@ -881,7 +878,7 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont } private fetchDashboardStates(query: string): Array { - const stateIds = Object.keys(this.dashboardStates); + const stateIds = Object.keys(this.dashboard.configuration.states); const result = query ? stateIds.filter(this.createFilterForDashboardState(query)) : stateIds; if (result && result.length) { return result; diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget-settings.component.ts index 7b5e3f1b0f..9226c4e1f1 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/widget-settings.component.ts @@ -40,8 +40,9 @@ import { deepClone } from '@core/utils'; import { RuleChainType } from '@shared/models/rule-chain.models'; import { JsonFormComponent } from '@shared/components/json-form/json-form.component'; import { JsonFormComponentData } from '@shared/components/json-form/json-form-component.models'; -import { IWidgetSettingsComponent, WidgetSettings } from '@shared/models/widget.models'; +import { IWidgetSettingsComponent, Widget, WidgetSettings } from '@shared/models/widget.models'; import { widgetSettingsComponentsMap } from '@home/components/widget/lib/settings/widget-settings.module'; +import { Dashboard } from '@shared/models/dashboard.models'; @Component({ selector: 'tb-widget-settings', @@ -62,6 +63,12 @@ export class WidgetSettingsComponent implements ControlValueAccessor, OnInit, On @Input() disabled: boolean; + @Input() + dashboard: Dashboard; + + @Input() + widget: Widget; + settingsDirectiveValue: string; @Input() @@ -134,6 +141,8 @@ export class WidgetSettingsComponent implements ControlValueAccessor, OnInit, On this.changeSubscription = null; } if (this.definedSettingsComponent) { + this.definedSettingsComponent.dashboard = this.dashboard; + this.definedSettingsComponent.widget = this.widget; this.definedSettingsComponent.settings = this.widgetSettingsFormData.model; this.changeSubscription = this.definedSettingsComponent.settingsChanged.subscribe((settings) => { this.updateModel(settings); @@ -185,7 +194,8 @@ export class WidgetSettingsComponent implements ControlValueAccessor, OnInit, On const factory = this.cfr.resolveComponentFactory(componentType); this.definedSettingsComponentRef = this.definedSettingsContainer.createComponent(factory); this.definedSettingsComponent = this.definedSettingsComponentRef.instance; - this.definedSettingsComponent.settings = this.widgetSettingsFormData?.model; + this.definedSettingsComponent.dashboard = this.dashboard; + this.definedSettingsComponent.widget = this.widget; this.changeSubscription = this.definedSettingsComponent.settingsChanged.subscribe((settings) => { this.updateModel(settings); }); diff --git a/ui-ngx/src/app/shared/models/widget.models.ts b/ui-ngx/src/app/shared/models/widget.models.ts index 45c8943753..0d94484f7a 100644 --- a/ui-ngx/src/app/shared/models/widget.models.ts +++ b/ui-ngx/src/app/shared/models/widget.models.ts @@ -33,6 +33,7 @@ import { AbstractControl, FormGroup } from '@angular/forms'; import {RuleChainType} from "@shared/models/rule-chain.models"; import {Observable} from "rxjs"; import {RuleNodeConfiguration} from "@shared/models/rule-node.models"; +import { Dashboard } from '@shared/models/dashboard.models'; export enum widgetType { timeseries = 'timeseries', @@ -587,6 +588,8 @@ export interface WidgetSize { } export interface IWidgetSettingsComponent { + dashboard: Dashboard; + widget: Widget; settings: WidgetSettings; settingsChanged: Observable; validate(); @@ -598,17 +601,21 @@ export interface IWidgetSettingsComponent { export abstract class WidgetSettingsComponent extends PageComponent implements IWidgetSettingsComponent, OnInit, AfterViewInit { + dashboard: Dashboard; + + widget: Widget; + settingsValue: WidgetSettings; private settingsSet = false; set settings(value: WidgetSettings) { - this.settingsValue = value; + this.settingsValue = value || this.defaultSettings(); if (!this.settingsSet) { this.settingsSet = true; - this.setupSettings(value); + this.setupSettings(this.settingsValue); } else { - this.updateSettings(value); + this.updateSettings(this.settingsValue); } } @@ -694,4 +701,8 @@ export abstract class WidgetSettingsComponent extends PageComponent implements protected abstract onSettingsSet(settings: WidgetSettings); + protected defaultSettings(): WidgetSettings { + return {}; + } + } From ac56d06a55ba71681f26f5f32e40c0f3c1575a34 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Fri, 1 Apr 2022 17:03:57 +0300 Subject: [PATCH 03/66] UI: Settings forms for Timeseries table widget --- .../json/system/widget_bundles/cards.json | 15 ++- .../widget/data-key-config.component.ts | 2 +- .../qrcode-widget-settings.component.html | 16 +-- .../qrcode-widget-settings.component.ts | 23 ++-- ...meseries-table-key-settings.component.html | 67 +++++++++++ ...timeseries-table-key-settings.component.ts | 80 +++++++++++++ ...s-table-latest-key-settings.component.html | 74 ++++++++++++ ...ies-table-latest-key-settings.component.ts | 96 +++++++++++++++ ...eries-table-widget-settings.component.html | 95 +++++++++++++++ ...eseries-table-widget-settings.component.ts | 98 +++++++++++++++ .../lib/settings/widget-settings.module.ts | 24 +++- .../widget/lib/settings/widget-settings.scss | 113 ++++++++++++++++++ .../widget/widget-settings.component.ts | 4 + .../pages/widget/widget-editor.component.html | 6 + .../shared/components/js-func.component.html | 7 +- .../shared/components/js-func.component.scss | 5 +- .../shared/components/js-func.component.ts | 2 + ui-ngx/src/app/shared/models/widget.models.ts | 9 +- .../assets/locale/locale.constant-en_US.json | 27 +++++ 19 files changed, 726 insertions(+), 37 deletions(-) create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-key-settings.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-key-settings.component.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-latest-key-settings.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-latest-key-settings.component.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-widget-settings.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-widget-settings.component.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.scss diff --git a/application/src/main/data/json/system/widget_bundles/cards.json b/application/src/main/data/json/system/widget_bundles/cards.json index 23b30f017f..dafd87b14b 100644 --- a/application/src/main/data/json/system/widget_bundles/cards.json +++ b/application/src/main/data/json/system/widget_bundles/cards.json @@ -55,10 +55,13 @@ "templateHtml": "\n", "templateCss": "", "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n self.ctx.$scope.timeseriesTableWidget.onDataUpdated();\n}\n\nself.onLatestDataUpdated = function() {\n self.ctx.$scope.timeseriesTableWidget.onLatestDataUpdated();\n}\n\nself.typeParameters = function() {\n return {\n ignoreDataUpdateOnIntervalTick: true,\n hasAdditionalLatestDataKeys: true\n };\n}\n\nself.actionSources = function() {\n return {\n 'actionCellButton': {\n name: 'widget-action.action-cell-button',\n multiple: true,\n hasShowCondition: true\n },\n 'rowClick': {\n name: 'widget-action.row-click',\n multiple: false\n }\n };\n}\n\nself.onDestroy = function() {\n}\n", - "settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"TimeseriesTableSettings\",\n \"properties\": {\n \"enableSearch\": {\n \"title\": \"Enable search\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableStickyHeader\": {\n \"title\": \"Always display header\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableStickyAction\": {\n \"title\": \"Always display actions column\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"reserveSpaceForHiddenAction\": {\n \"title\": \"Hidden cell button actions display mode\",\n \"type\": \"string\",\n \"default\": \"true\"\n },\n \"showTimestamp\": {\n \"title\": \"Display timestamp column\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"showMilliseconds\": {\n \"title\": \"Display timestamp milliseconds\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"displayPagination\": {\n \"title\": \"Display pagination\",\n \"type\": \"boolean\",\n \"default\": true\n }, \n \"useEntityLabel\": {\n \"title\": \"Use entity label in tab name\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"defaultPageSize\": {\n \"title\": \"Default page size\",\n \"type\": \"number\",\n \"default\": 10\n },\n \"hideEmptyLines\": {\n \"title\": \"Hide empty lines\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"disableStickyHeader\": {\n \"title\": \"Disable sticky header\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"useRowStyleFunction\": {\n \"title\": \"Use row style function\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"rowStyleFunction\": {\n \"title\": \"Row style function: f(rowData, ctx)\",\n \"type\": \"string\",\n \"default\": \"\"\n }\n },\n \"required\": []\n },\n \"form\": [\n \"enableSearch\",\n \"enableStickyHeader\",\n \"enableStickyAction\",\n {\n \"key\": \"reserveSpaceForHiddenAction\",\n \"type\": \"rc-select\",\n \"multiple\": false,\n \"items\": [\n {\n \"value\": \"true\",\n \"label\": \"Show empty space instead of hidden cell button action\"\n },\n {\n \"value\": \"false\",\n \"label\": \"Don't reserve space for hidden action buttons\"\n }\n ]\n },\n \"showTimestamp\",\n \"showMilliseconds\",\n \"displayPagination\",\n \"useEntityLabel\",\n \"defaultPageSize\",\n \"hideEmptyLines\",\n \"useRowStyleFunction\",\n {\n \"key\": \"rowStyleFunction\",\n \"type\": \"javascript\",\n \"helpId\": \"widget/lib/timeseries/row_style_fn\",\n \"condition\": \"model.useRowStyleFunction === true\"\n }\n ]\n}", - "dataKeySettingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"DataKeySettings\",\n \"properties\": {\n \"useCellStyleFunction\": {\n \"title\": \"Use cell style function\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"cellStyleFunction\": {\n \"title\": \"Cell style function: f(value, rowData, ctx)\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"useCellContentFunction\": {\n \"title\": \"Use cell content function\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"cellContentFunction\": {\n \"title\": \"Cell content function: f(value, rowData, ctx)\",\n \"type\": \"string\",\n \"default\": \"\"\n }\n },\n \"required\": []\n },\n \"form\": [\n \"useCellStyleFunction\",\n {\n \"key\": \"cellStyleFunction\",\n \"type\": \"javascript\",\n \"helpId\": \"widget/lib/timeseries/cell_style_fn\",\n \"condition\": \"model.useCellStyleFunction === true\"\n },\n \"useCellContentFunction\",\n {\n \"key\": \"cellContentFunction\",\n \"type\": \"javascript\",\n \"helpId\": \"widget/lib/timeseries/cell_content_fn\",\n \"condition\": \"model.useCellContentFunction === true\"\n }\n ]\n}", - "latestDataKeySettingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"LatestDataKeySettings\",\n \"properties\": {\n \"show\": {\n \"title\": \"Show latest data column\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"order\": {\n \"title\": \"Latest data column order\",\n \"type\": \"number\"\n },\n \"useCellStyleFunction\": {\n \"title\": \"Use cell style function\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"cellStyleFunction\": {\n \"title\": \"Cell style function: f(value, rowData, ctx)\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"useCellContentFunction\": {\n \"title\": \"Use cell content function\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"cellContentFunction\": {\n \"title\": \"Cell content function: f(value, rowData, ctx)\",\n \"type\": \"string\",\n \"default\": \"\"\n }\n },\n \"required\": []\n },\n \"form\": [\n \"show\",\n {\n \"key\": \"order\",\n \"condition\": \"model.show === true\"\n },\n {\n \"key\": \"useCellStyleFunction\",\n \"condition\": \"model.show === true\"\n },\n {\n \"key\": \"cellStyleFunction\",\n \"type\": \"javascript\",\n \"helpId\": \"widget/lib/timeseries/cell_style_fn\",\n \"condition\": \"model.show === true && model.useCellStyleFunction === true\"\n },\n {\n \"key\": \"useCellContentFunction\",\n \"condition\": \"model.show === true\"\n },\n {\n \"key\": \"cellContentFunction\",\n \"type\": \"javascript\",\n \"helpId\": \"widget/lib/timeseries/cell_content_fn\",\n \"condition\": \"model.show === true && model.useCellContentFunction === true\"\n }\n ]\n}", - "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Temperature °C\",\"color\":\"#2196f3\",\"settings\":{\"useCellStyleFunction\":true,\"cellStyleFunction\":\"if (value) {\\n var percent = (value + 60)/120 * 100;\\n var color = tinycolor.mix('blue', 'red', amount = percent);\\n color.setAlpha(.5);\\n return {\\n paddingLeft: '20px',\\n color: '#ffffff',\\n background: color.toRgbString(),\\n fontSize: '18px'\\n };\\n} else {\\n return {};\\n}\"},\"_hash\":0.8587686344902596,\"funcBody\":\"var value = prevValue + Math.random() * 40 - 20;\\nvar multiplier = Math.pow(10, 1 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -60) {\\n\\tvalue = -60;\\n} else if (value > 60) {\\n\\tvalue = 60;\\n}\\nreturn value;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Humidity, %\",\"color\":\"#ffc107\",\"settings\":{\"useCellStyleFunction\":true,\"cellStyleFunction\":\"if (value) {\\n var percent = value;\\n var backgroundColor = tinycolor('blue');\\n backgroundColor.setAlpha(value/100);\\n var color = 'blue';\\n if (value > 50) {\\n color = 'white';\\n }\\n \\n return {\\n paddingLeft: '20px',\\n color: color,\\n background: backgroundColor.toRgbString(),\\n fontSize: '18px'\\n };\\n} else {\\n return {};\\n}\",\"useCellContentFunction\":false},\"_hash\":0.12775350966079668,\"funcBody\":\"var value = prevValue + Math.random() * 20 - 10;\\nvar multiplier = Math.pow(10, 1 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < 5) {\\n\\tvalue = 5;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":60000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"showTimestamp\":true,\"displayPagination\":true,\"defaultPageSize\":10},\"title\":\"Timeseries table\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"widgetStyle\":{},\"actions\":{},\"showTitleIcon\":false,\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\"}" + "settingsSchema": "", + "dataKeySettingsSchema": "", + "latestDataKeySettingsSchema": "", + "settingsDirective": "tb-timeseries-table-widget-settings", + "dataKeySettingsDirective": "tb-timeseries-table-key-settings", + "latestDataKeySettingsDirective": "tb-timeseries-table-latest-key-settings", + "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"entityAliasId\":null,\"filterId\":null,\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Temperature °C\",\"color\":\"#2196f3\",\"settings\":{\"useCellStyleFunction\":true,\"cellStyleFunction\":\"if (value) {\\n var percent = (value + 60)/120 * 100;\\n var color = tinycolor.mix('blue', 'red', percent);\\n color.setAlpha(.5);\\n return {\\n paddingLeft: '20px',\\n color: '#ffffff',\\n background: color.toRgbString(),\\n fontSize: '18px'\\n };\\n} else {\\n return {};\\n}\",\"useCellContentFunction\":false},\"_hash\":0.8587686344902596,\"funcBody\":\"var value = prevValue + Math.random() * 40 - 20;\\nvar multiplier = Math.pow(10, 1 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -60) {\\n\\tvalue = -60;\\n} else if (value > 60) {\\n\\tvalue = 60;\\n}\\nreturn value;\",\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Humidity, %\",\"color\":\"#ffc107\",\"settings\":{\"useCellStyleFunction\":true,\"cellStyleFunction\":\"if (value) {\\n var percent = value;\\n var backgroundColor = tinycolor('blue');\\n backgroundColor.setAlpha(value/100);\\n var color = 'blue';\\n if (value > 50) {\\n color = 'white';\\n }\\n \\n return {\\n paddingLeft: '20px',\\n color: color,\\n background: backgroundColor.toRgbString(),\\n fontSize: '18px'\\n };\\n} else {\\n return {};\\n}\",\"useCellContentFunction\":false},\"_hash\":0.12775350966079668,\"funcBody\":\"var value = prevValue + Math.random() * 20 - 10;\\nvar multiplier = Math.pow(10, 1 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < 5) {\\n\\tvalue = 5;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value;\"}],\"latestDataKeys\":null}],\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":60000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"showTimestamp\":true,\"displayPagination\":true,\"defaultPageSize\":10},\"title\":\"Timeseries table\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"widgetStyle\":{},\"actions\":{},\"showTitleIcon\":false,\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"displayTimewindow\":true}" } }, { @@ -164,8 +167,8 @@ "templateHtml": "\n", "templateCss": "#container {\n overflow: auto;\n}\n\n.tbDatasource-container {\n margin: 5px;\n padding: 8px;\n}\n\n.tbDatasource-title {\n font-size: 1.200rem;\n font-weight: 500;\n padding-bottom: 10px;\n}\n\n.tbDatasource-table {\n width: 100%;\n box-shadow: 0 0 10px #ccc;\n border-collapse: collapse;\n white-space: nowrap;\n font-size: 1.000rem;\n color: #757575;\n}\n\n.tbDatasource-table td {\n position: relative;\n border-top: 1px solid rgba(0, 0, 0, 0.12);\n border-bottom: 1px solid rgba(0, 0, 0, 0.12);\n padding: 0px 18px;\n box-sizing: border-box;\n}", "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n self.ctx.$scope.qrCodeWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n return {\n dataKeysOptional: true,\n datasourcesOptional: true\n };\n}\n\nself.onDestroy = function() {\n}\n\n", - "settingsSchema": "{}\n", - "dataKeySettingsSchema": "{}\n", + "settingsSchema": "", + "dataKeySettingsSchema": "", "settingsDirective": "tb-qrcode-widget-settings", "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"entityAliasId\":null,\"filterId\":null,\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.7036904308224163,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"qrCodeTextPattern\":\"${entityName}\",\"useQrCodeTextFunction\":false,\"qrCodeTextFunction\":\"return data[0] ? data[0]['entityName'] : '';\"},\"title\":\"QR Code\"}" } diff --git a/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.ts index 9c23be8144..b0d8847c1b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.ts @@ -287,7 +287,7 @@ export class DataKeyConfigComponent extends PageComponent implements OnInit, Con } }; } - if (this.displayAdvanced && !this.dataKeySettingsFormGroup.valid) { + if (this.displayAdvanced && (!this.dataKeySettingsFormGroup.valid || !this.modelValue.settings)) { return { dataKeySettings: { valid: false diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.html index 29a10e1d58..93d3b8086b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.html @@ -15,22 +15,22 @@ limitations under the License. --> -
- +
+ {{ 'widgets.qr-code.use-qr-code-text-function' | translate }} - - + + widgets.qr-code.qr-code-text-pattern {{ 'widgets.qr-code.qr-code-text-pattern-required' | translate }} -
- - +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.ts index 06e8d7d079..c9c43d2951 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.ts @@ -14,22 +14,19 @@ /// limitations under the License. /// -import { Component, ViewChild } from '@angular/core'; +import { Component } from '@angular/core'; import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; -import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; -import { JsFuncComponent } from '@shared/components/js-func.component'; @Component({ selector: 'tb-qrcode-widget-settings', templateUrl: './qrcode-widget-settings.component.html', - styleUrls: [] + styleUrls: ['./widget-settings.scss'] }) export class QrCodeWidgetSettingsComponent extends WidgetSettingsComponent { - @ViewChild('qrCodeTextFunctionComponent', {static: true}) qrCodeTextFunctionComponent: JsFuncComponent; - qrCodeWidgetSettingsForm: FormGroup; constructor(protected store: Store, @@ -51,8 +48,8 @@ export class QrCodeWidgetSettingsComponent extends WidgetSettingsComponent { protected onSettingsSet(settings: WidgetSettings) { this.qrCodeWidgetSettingsForm = this.fb.group({ - qrCodeTextPattern: [settings.qrCodeTextPattern, []], - useQrCodeTextFunction: [settings.useQrCodeTextFunction, []], + qrCodeTextPattern: [settings.qrCodeTextPattern, [Validators.required]], + useQrCodeTextFunction: [settings.useQrCodeTextFunction, [Validators.required]], qrCodeTextFunction: [settings.qrCodeTextFunction, []] }); } @@ -64,13 +61,11 @@ export class QrCodeWidgetSettingsComponent extends WidgetSettingsComponent { protected updateValidators(emitEvent: boolean) { const useQrCodeTextFunction: boolean = this.qrCodeWidgetSettingsForm.get('useQrCodeTextFunction').value; if (useQrCodeTextFunction) { - this.qrCodeWidgetSettingsForm.get('qrCodeTextPattern').setValidators([]); - this.qrCodeWidgetSettingsForm.get('qrCodeTextFunction').setValidators([Validators.required, - (control: AbstractControl) => this.qrCodeTextFunctionComponent.validate(control as FormControl) - ]); + this.qrCodeWidgetSettingsForm.get('qrCodeTextPattern').disable(); + this.qrCodeWidgetSettingsForm.get('qrCodeTextFunction').enable(); } else { - this.qrCodeWidgetSettingsForm.get('qrCodeTextPattern').setValidators([Validators.required]); - this.qrCodeWidgetSettingsForm.get('qrCodeTextFunction').setValidators([]); + this.qrCodeWidgetSettingsForm.get('qrCodeTextPattern').enable(); + this.qrCodeWidgetSettingsForm.get('qrCodeTextFunction').disable(); } this.qrCodeWidgetSettingsForm.get('qrCodeTextPattern').updateValueAndValidity({emitEvent}); this.qrCodeWidgetSettingsForm.get('qrCodeTextFunction').updateValueAndValidity({emitEvent}); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-key-settings.component.html new file mode 100644 index 0000000000..bf568fc3eb --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-key-settings.component.html @@ -0,0 +1,67 @@ + +
+
+ widgets.table.cell-style + + + + + {{ 'widgets.table.use-cell-style-function' | translate }} + + + + widget-config.advanced-settings + + + + + + + +
+
+ widgets.table.cell-content + + + + + {{ 'widgets.table.use-cell-content-function' | translate }} + + + + widget-config.advanced-settings + + + + + + + +
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-key-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-key-settings.component.ts new file mode 100644 index 0000000000..b2433dfde0 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-key-settings.component.ts @@ -0,0 +1,80 @@ +/// +/// 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 { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; + +@Component({ + selector: 'tb-timeseries-table-key-settings', + templateUrl: './timeseries-table-key-settings.component.html', + styleUrls: ['./widget-settings.scss'] +}) +export class TimeseriesTableKeySettingsComponent extends WidgetSettingsComponent { + + timeseriesTableKeySettingsForm: FormGroup; + + constructor(protected store: Store, + private fb: FormBuilder) { + super(store); + } + + protected settingsForm(): FormGroup { + return this.timeseriesTableKeySettingsForm; + } + + protected defaultSettings(): WidgetSettings { + return { + useCellStyleFunction: false, + cellStyleFunction: '', + useCellContentFunction: false, + cellContentFunction: '' + }; + } + + protected onSettingsSet(settings: WidgetSettings) { + this.timeseriesTableKeySettingsForm = this.fb.group({ + useCellStyleFunction: [settings.useCellStyleFunction, []], + cellStyleFunction: [settings.cellStyleFunction, [Validators.required]], + useCellContentFunction: [settings.useCellContentFunction, []], + cellContentFunction: [settings.cellContentFunction, [Validators.required]], + }); + } + + protected validatorTriggers(): string[] { + return ['useCellStyleFunction', 'useCellContentFunction']; + } + + protected updateValidators(emitEvent: boolean) { + const useCellStyleFunction: boolean = this.timeseriesTableKeySettingsForm.get('useCellStyleFunction').value; + const useCellContentFunction: boolean = this.timeseriesTableKeySettingsForm.get('useCellContentFunction').value; + if (useCellStyleFunction) { + this.timeseriesTableKeySettingsForm.get('cellStyleFunction').enable(); + } else { + this.timeseriesTableKeySettingsForm.get('cellStyleFunction').disable(); + } + if (useCellContentFunction) { + this.timeseriesTableKeySettingsForm.get('cellContentFunction').enable(); + } else { + this.timeseriesTableKeySettingsForm.get('cellContentFunction').disable(); + } + this.timeseriesTableKeySettingsForm.get('cellStyleFunction').updateValueAndValidity({emitEvent}); + this.timeseriesTableKeySettingsForm.get('cellContentFunction').updateValueAndValidity({emitEvent}); + } + +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-latest-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-latest-key-settings.component.html new file mode 100644 index 0000000000..b005b45ce8 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-latest-key-settings.component.html @@ -0,0 +1,74 @@ + +
+ + {{ 'widgets.table.show-latest-data-column' | translate }} + + + widgets.table.latest-data-column-order + + +
+ widgets.table.cell-style + + + + + {{ 'widgets.table.use-cell-style-function' | translate }} + + + + widget-config.advanced-settings + + + + + + + +
+
+ widgets.table.cell-content + + + + + {{ 'widgets.table.use-cell-content-function' | translate }} + + + + widget-config.advanced-settings + + + + + + + +
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-latest-key-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-latest-key-settings.component.ts new file mode 100644 index 0000000000..1d8d26ead3 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-latest-key-settings.component.ts @@ -0,0 +1,96 @@ +/// +/// 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 { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; + +@Component({ + selector: 'tb-timeseries-table-latest-key-settings', + templateUrl: './timeseries-table-latest-key-settings.component.html', + styleUrls: ['./widget-settings.scss'] +}) +export class TimeseriesTableLatestKeySettingsComponent extends WidgetSettingsComponent { + + timeseriesTableLatestKeySettingsForm: FormGroup; + + constructor(protected store: Store, + private fb: FormBuilder) { + super(store); + } + + protected settingsForm(): FormGroup { + return this.timeseriesTableLatestKeySettingsForm; + } + + protected defaultSettings(): WidgetSettings { + return { + show: true, + useCellStyleFunction: false, + cellStyleFunction: '', + useCellContentFunction: false, + cellContentFunction: '' + }; + } + + protected onSettingsSet(settings: WidgetSettings) { + this.timeseriesTableLatestKeySettingsForm = this.fb.group({ + show: [settings.show, []], + order: [settings.order, []], + useCellStyleFunction: [settings.useCellStyleFunction, []], + cellStyleFunction: [settings.cellStyleFunction, [Validators.required]], + useCellContentFunction: [settings.useCellContentFunction, []], + cellContentFunction: [settings.cellContentFunction, [Validators.required]], + }); + } + + protected validatorTriggers(): string[] { + return ['show', 'useCellStyleFunction', 'useCellContentFunction']; + } + + protected updateValidators(emitEvent: boolean) { + const show: boolean = this.timeseriesTableLatestKeySettingsForm.get('show').value; + if (show) { + this.timeseriesTableLatestKeySettingsForm.get('order').enable(); + this.timeseriesTableLatestKeySettingsForm.get('useCellStyleFunction').enable({emitEvent: false}); + this.timeseriesTableLatestKeySettingsForm.get('useCellContentFunction').enable({emitEvent: false}); + const useCellStyleFunction: boolean = this.timeseriesTableLatestKeySettingsForm.get('useCellStyleFunction').value; + const useCellContentFunction: boolean = this.timeseriesTableLatestKeySettingsForm.get('useCellContentFunction').value; + if (useCellStyleFunction) { + this.timeseriesTableLatestKeySettingsForm.get('cellStyleFunction').enable(); + } else { + this.timeseriesTableLatestKeySettingsForm.get('cellStyleFunction').disable(); + } + if (useCellContentFunction) { + this.timeseriesTableLatestKeySettingsForm.get('cellContentFunction').enable(); + } else { + this.timeseriesTableLatestKeySettingsForm.get('cellContentFunction').disable(); + } + } else { + this.timeseriesTableLatestKeySettingsForm.get('order').disable(); + this.timeseriesTableLatestKeySettingsForm.get('useCellStyleFunction').disable({emitEvent: false}); + this.timeseriesTableLatestKeySettingsForm.get('cellStyleFunction').disable(); + this.timeseriesTableLatestKeySettingsForm.get('useCellContentFunction').disable({emitEvent: false}); + this.timeseriesTableLatestKeySettingsForm.get('cellContentFunction').disable(); + } + this.timeseriesTableLatestKeySettingsForm.get('order').updateValueAndValidity({emitEvent}); + this.timeseriesTableLatestKeySettingsForm.get('cellStyleFunction').updateValueAndValidity({emitEvent}); + this.timeseriesTableLatestKeySettingsForm.get('cellContentFunction').updateValueAndValidity({emitEvent}); + } + +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-widget-settings.component.html new file mode 100644 index 0000000000..5f90fd6aed --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-widget-settings.component.html @@ -0,0 +1,95 @@ + +
+
+ widgets.table.common-table-settings +
+
+ + {{ 'widgets.table.enable-search' | translate }} + +
+
+ + {{ 'widgets.table.enable-sticky-header' | translate }} + + + {{ 'widgets.table.enable-sticky-action' | translate }} + +
+
+ + widgets.table.hidden-cell-button-display-mode + + + {{ 'widgets.table.show-empty-space-hidden-action' | translate }} + + + {{ 'widgets.table.dont-reserve-space-hidden-action' | translate }} + + + +
+ + {{ 'widgets.table.display-timestamp' | translate }} + + + {{ 'widgets.table.display-milliseconds' | translate }} + +
+ + {{ 'widgets.table.display-pagination' | translate }} + + + widgets.table.default-page-size + + +
+ + {{ 'widgets.table.use-entity-label-tab-name' | translate }} + + + {{ 'widgets.table.hide-empty-lines' | translate }} + +
+
+
+ widgets.table.row-style + + + + + {{ 'widgets.table.use-row-style-function' | translate }} + + + + widget-config.advanced-settings + + + + + + + +
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-widget-settings.component.ts new file mode 100644 index 0000000000..d28b4f081a --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-widget-settings.component.ts @@ -0,0 +1,98 @@ +/// +/// 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 { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; + +@Component({ + selector: 'tb-timeseries-table-widget-settings', + templateUrl: './timeseries-table-widget-settings.component.html', + styleUrls: ['./widget-settings.scss'] +}) +export class TimeseriesTableWidgetSettingsComponent extends WidgetSettingsComponent { + + timeseriesTableWidgetSettingsForm: FormGroup; + + constructor(protected store: Store, + private fb: FormBuilder) { + super(store); + } + + protected settingsForm(): FormGroup { + return this.timeseriesTableWidgetSettingsForm; + } + + protected defaultSettings(): WidgetSettings { + return { + enableSearch: true, + enableStickyHeader: true, + enableStickyAction: true, + reserveSpaceForHiddenAction: 'true', + showTimestamp: true, + showMilliseconds: false, + displayPagination: true, + useEntityLabel: false, + defaultPageSize: 10, + hideEmptyLines: false, + disableStickyHeader: false, + useRowStyleFunction: false, + rowStyleFunction: '' + }; + } + + protected onSettingsSet(settings: WidgetSettings) { + this.timeseriesTableWidgetSettingsForm = this.fb.group({ + enableSearch: [settings.enableSearch, []], + enableStickyHeader: [settings.enableStickyHeader, []], + enableStickyAction: [settings.enableStickyAction, []], + reserveSpaceForHiddenAction: [settings.reserveSpaceForHiddenAction, []], + showTimestamp: [settings.showTimestamp, []], + showMilliseconds: [settings.showMilliseconds, []], + displayPagination: [settings.displayPagination, []], + useEntityLabel: [settings.useEntityLabel, []], + defaultPageSize: [settings.defaultPageSize, [Validators.min(1)]], + hideEmptyLines: [settings.hideEmptyLines, []], + disableStickyHeader: [settings.disableStickyHeader, []], + useRowStyleFunction: [settings.useRowStyleFunction, []], + rowStyleFunction: [settings.rowStyleFunction, [Validators.required]] + }); + } + + protected validatorTriggers(): string[] { + return ['useRowStyleFunction', 'displayPagination']; + } + + protected updateValidators(emitEvent: boolean) { + const useRowStyleFunction: boolean = this.timeseriesTableWidgetSettingsForm.get('useRowStyleFunction').value; + const displayPagination: boolean = this.timeseriesTableWidgetSettingsForm.get('displayPagination').value; + if (useRowStyleFunction) { + this.timeseriesTableWidgetSettingsForm.get('rowStyleFunction').enable(); + } else { + this.timeseriesTableWidgetSettingsForm.get('rowStyleFunction').disable(); + } + if (displayPagination) { + this.timeseriesTableWidgetSettingsForm.get('defaultPageSize').enable(); + } else { + this.timeseriesTableWidgetSettingsForm.get('defaultPageSize').disable(); + } + this.timeseriesTableWidgetSettingsForm.get('rowStyleFunction').updateValueAndValidity({emitEvent}); + this.timeseriesTableWidgetSettingsForm.get('defaultPageSize').updateValueAndValidity({emitEvent}); + } + +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts index 7a10d51465..e31eef1f87 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts @@ -20,10 +20,22 @@ import { CommonModule } from '@angular/common'; import { SharedModule } from '@shared/shared.module'; import { SharedHomeComponentsModule } from '@home/components/shared-home-components.module'; import { IWidgetSettingsComponent } from '@shared/models/widget.models'; +import { + TimeseriesTableWidgetSettingsComponent +} from '@home/components/widget/lib/settings/timeseries-table-widget-settings.component'; +import { + TimeseriesTableKeySettingsComponent +} from '@home/components/widget/lib/settings/timeseries-table-key-settings.component'; +import { + TimeseriesTableLatestKeySettingsComponent +} from '@home/components/widget/lib/settings/timeseries-table-latest-key-settings.component'; @NgModule({ declarations: [ - QrCodeWidgetSettingsComponent + QrCodeWidgetSettingsComponent, + TimeseriesTableWidgetSettingsComponent, + TimeseriesTableKeySettingsComponent, + TimeseriesTableLatestKeySettingsComponent ], imports: [ CommonModule, @@ -31,12 +43,18 @@ import { IWidgetSettingsComponent } from '@shared/models/widget.models'; SharedHomeComponentsModule ], exports: [ - QrCodeWidgetSettingsComponent + QrCodeWidgetSettingsComponent, + TimeseriesTableWidgetSettingsComponent, + TimeseriesTableKeySettingsComponent, + TimeseriesTableLatestKeySettingsComponent ] }) export class WidgetSettingsModule { } export const widgetSettingsComponentsMap: {[key: string]: Type} = { - 'tb-qrcode-widget-settings': QrCodeWidgetSettingsComponent + 'tb-qrcode-widget-settings': QrCodeWidgetSettingsComponent, + 'tb-timeseries-table-widget-settings': TimeseriesTableWidgetSettingsComponent, + 'tb-timeseries-table-key-settings': TimeseriesTableKeySettingsComponent, + 'tb-timeseries-table-latest-key-settings': TimeseriesTableLatestKeySettingsComponent }; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.scss b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.scss new file mode 100644 index 0000000000..4b9e0edd97 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.scss @@ -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. + */ +:host { + .tb-widget-settings { + .fields-group { + padding: 0 16px 8px; + margin-bottom: 10px; + border: 1px groove rgba(0, 0, 0, .25); + border-radius: 4px; + + legend { + color: rgba(0, 0, 0, .7); + width: fit-content; + } + + legend + * { + margin-top: 16px; + } + + &.fields-group-slider { + padding: 0; + + legend { + margin-left: 16px; + } + + .tb-settings { + margin-top: 0; + padding: 0 16px 8px; + } + } + } + } +} + +:host ::ng-deep { + .tb-widget-settings { + .mat-checkbox-label { + white-space: normal; + } + + .mat-expansion-panel { + &.tb-settings { + box-shadow: none; + + .mat-content { + overflow: visible; + } + + .mat-expansion-panel-header { + padding: 0; + + &:hover { + background: none; + } + + .mat-expansion-indicator { + padding: 2px; + } + } + + .mat-expansion-panel-header-description { + align-items: center; + } + + .mat-expansion-panel-body { + padding: 0; + } + + .mat-checkbox-layout { + margin: 5px 0; + } + + .mat-checkbox-inner-container { + margin-right: 12px; + } + } + + .mat-expansion-panel-content { + font: inherit; + } + } + + .mat-slide { + margin: 8px 0; + } + + .slide-block { + display: block; + + &:not(:last-child) { + margin-bottom: 8px; + } + } + + .mat-slide-toggle-content { + white-space: normal; + } + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget-settings.component.ts index 9226c4e1f1..15919447ea 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/widget-settings.component.ts @@ -43,6 +43,7 @@ import { JsonFormComponentData } from '@shared/components/json-form/json-form-co import { IWidgetSettingsComponent, Widget, WidgetSettings } from '@shared/models/widget.models'; import { widgetSettingsComponentsMap } from '@home/components/widget/lib/settings/widget-settings.module'; import { Dashboard } from '@shared/models/dashboard.models'; +import { WidgetService } from '@core/http/widget.service'; @Component({ selector: 'tb-widget-settings', @@ -100,6 +101,7 @@ export class WidgetSettingsComponent implements ControlValueAccessor, OnInit, On constructor(private translate: TranslateService, private cfr: ComponentFactoryResolver, + private widgetService: WidgetService, private fb: FormBuilder) { this.widgetSettingsFormGroup = this.fb.group({ settings: [null, Validators.required] @@ -143,6 +145,7 @@ export class WidgetSettingsComponent implements ControlValueAccessor, OnInit, On if (this.definedSettingsComponent) { this.definedSettingsComponent.dashboard = this.dashboard; this.definedSettingsComponent.widget = this.widget; + this.definedSettingsComponent.functionScopeVariables = this.widgetService.getWidgetScopeVariables(); this.definedSettingsComponent.settings = this.widgetSettingsFormData.model; this.changeSubscription = this.definedSettingsComponent.settingsChanged.subscribe((settings) => { this.updateModel(settings); @@ -196,6 +199,7 @@ export class WidgetSettingsComponent implements ControlValueAccessor, OnInit, On this.definedSettingsComponent = this.definedSettingsComponentRef.instance; this.definedSettingsComponent.dashboard = this.dashboard; this.definedSettingsComponent.widget = this.widget; + this.definedSettingsComponent.functionScopeVariables = this.widgetService.getWidgetScopeVariables(); this.changeSubscription = this.definedSettingsComponent.settingsChanged.subscribe((settings) => { this.updateModel(settings); }); diff --git a/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.html b/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.html index 549230d6a3..13c03b7945 100644 --- a/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.html +++ b/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.html @@ -265,6 +265,12 @@ [(ngModel)]="widget.dataKeySettingsDirective" (ngModelChange)="isDirty = true"/> + + widget.latest-data-key-settings-form-selector + + diff --git a/ui-ngx/src/app/shared/components/js-func.component.html b/ui-ngx/src/app/shared/components/js-func.component.html index 3769e1ff45..a5f4040af1 100644 --- a/ui-ngx/src/app/shared/components/js-func.component.html +++ b/ui-ngx/src/app/shared/components/js-func.component.html @@ -19,7 +19,8 @@ tb-fullscreen [fullscreen]="fullscreen" fxLayout="column">
- + +
-
+
- +
diff --git a/ui-ngx/src/app/shared/components/js-func.component.scss b/ui-ngx/src/app/shared/components/js-func.component.scss index 6cb0154c88..3a7ddc3d09 100644 --- a/ui-ngx/src/app/shared/components/js-func.component.scss +++ b/ui-ngx/src/app/shared/components/js-func.component.scss @@ -26,9 +26,12 @@ .tb-js-func-panel { height: calc(100% - 80px); - margin-left: 15px; border: 1px solid #c0c0c0; + &:not(.tb-js-func-title) { + margin-left: 15px; + } + #tb-javascript-input { width: 100%; min-width: 200px; diff --git a/ui-ngx/src/app/shared/components/js-func.component.ts b/ui-ngx/src/app/shared/components/js-func.component.ts index 439677ffe5..be78c7480c 100644 --- a/ui-ngx/src/app/shared/components/js-func.component.ts +++ b/ui-ngx/src/app/shared/components/js-func.component.ts @@ -69,6 +69,8 @@ export class JsFuncComponent implements OnInit, OnDestroy, ControlValueAccessor, toastTargetId = `jsFuncEditor-${guid()}`; + @Input() functionTitle: string; + @Input() functionName: string; @Input() functionArgs: Array; diff --git a/ui-ngx/src/app/shared/models/widget.models.ts b/ui-ngx/src/app/shared/models/widget.models.ts index bbb2ea56d2..1f3cece5cb 100644 --- a/ui-ngx/src/app/shared/models/widget.models.ts +++ b/ui-ngx/src/app/shared/models/widget.models.ts @@ -615,6 +615,7 @@ export interface WidgetSize { export interface IWidgetSettingsComponent { dashboard: Dashboard; widget: Widget; + functionScopeVariables: string[]; settings: WidgetSettings; settingsChanged: Observable; validate(); @@ -630,12 +631,18 @@ export abstract class WidgetSettingsComponent extends PageComponent implements widget: Widget; + functionScopeVariables: string[]; + settingsValue: WidgetSettings; private settingsSet = false; set settings(value: WidgetSettings) { - this.settingsValue = value || this.defaultSettings(); + if (!value) { + this.settingsValue = this.defaultSettings(); + } else { + this.settingsValue = {...this.defaultSettings(), ...value}; + } if (!this.settingsSet) { this.settingsSet = true; this.setupSettings(this.settingsValue); diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index f904f10930..47d22d9b3f 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -3001,6 +3001,7 @@ "image-preview": "Image preview", "settings-form-selector": "Settings form selector", "data-key-settings-form-selector": "Data key settings form selector", + "latest-data-key-settings-form-selector": "Latest data key settings form selector", "javascript": "Javascript", "js": "JS", "remove-widget-type-title": "Are you sure you want to remove the widget type '{{widgetName}}'?", @@ -3366,6 +3367,32 @@ "drawCircleMarkerButton": "Create circle marker", "rotateButton": "Rotate polygon" } + }, + "table": { + "common-table-settings": "Common Table Settings", + "enable-search": "Enable search", + "enable-sticky-header": "Always display header", + "enable-sticky-action": "Always display actions column", + "hidden-cell-button-display-mode": "Hidden cell button actions display mode", + "show-empty-space-hidden-action": "Show empty space instead of hidden cell button action", + "dont-reserve-space-hidden-action": "Don't reserve space for hidden action buttons", + "display-timestamp": "Display timestamp column", + "display-milliseconds": "Display timestamp milliseconds", + "display-pagination": "Display pagination", + "default-page-size": "Default page size", + "use-entity-label-tab-name": "Use entity label in tab name", + "hide-empty-lines": "Hide empty lines", + "row-style": "Row style", + "use-row-style-function": "Use row style function", + "row-style-function": "Row style function", + "cell-style": "Cell style", + "use-cell-style-function": "Use cell style function", + "cell-style-function": "Cell style function", + "cell-content": "Cell content", + "use-cell-content-function": "Use cell content function", + "cell-content-function": "Cell content function", + "show-latest-data-column": "Show latest data column", + "latest-data-column-order": "Latest data column order" } }, "icon": { From 0177904eb20a8bf221e86afc79686d780b1a9686 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Fri, 1 Apr 2022 19:18:50 +0300 Subject: [PATCH 04/66] UI: Add markdown widget settings form --- .../json/system/widget_bundles/cards.json | 5 +- .../markdown-widget-settings.component.html | 38 +++++ .../markdown-widget-settings.component.ts | 76 +++++++++ .../lib/settings/widget-settings.module.ts | 12 +- .../app/shared/components/css.component.scss | 3 +- .../shared/components/js-func.component.html | 8 +- .../shared/components/js-func.component.scss | 22 ++- .../components/markdown-editor.component.html | 47 ++++++ .../components/markdown-editor.component.scss | 77 +++++++++ .../components/markdown-editor.component.ts | 154 ++++++++++++++++++ ui-ngx/src/app/shared/shared.module.ts | 3 + .../assets/locale/locale.constant-en_US.json | 8 + 12 files changed, 438 insertions(+), 15 deletions(-) create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/markdown-widget-settings.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/markdown-widget-settings.component.ts create mode 100644 ui-ngx/src/app/shared/components/markdown-editor.component.html create mode 100644 ui-ngx/src/app/shared/components/markdown-editor.component.scss create mode 100644 ui-ngx/src/app/shared/components/markdown-editor.component.ts diff --git a/application/src/main/data/json/system/widget_bundles/cards.json b/application/src/main/data/json/system/widget_bundles/cards.json index dafd87b14b..e574e1d98e 100644 --- a/application/src/main/data/json/system/widget_bundles/cards.json +++ b/application/src/main/data/json/system/widget_bundles/cards.json @@ -186,8 +186,9 @@ "templateHtml": "\n", "templateCss": "#container tb-markdown-widget {\n height: 100%;\n display: block;\n}\n\n#container tb-markdown-widget .tb-markdown-view {\n height: 100%;\n overflow: auto;\n}\n", "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n self.ctx.$scope.markdownWidget.onDataUpdated();\n}\n\nself.actionSources = function() {\n return {\n 'elementClick': {\n name: 'widget-action.element-click',\n multiple: true\n }\n };\n}\n\nself.typeParameters = function() {\n return {\n dataKeysOptional: true,\n datasourcesOptional: true,\n hasDataPageLink: true\n };\n}\n\nself.onDestroy = function() {\n}\n\n", - "settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"Markdown/HTML card\",\n \"properties\": {\n \"markdownTextPattern\": {\n \"title\": \"Markdown/HTML pattern (markdown or HTML with variables, for ex. '${entityName} or ${keyName} - some text.')\",\n \"type\": \"string\",\n \"default\": \"# Markdown/HTML card \\n - **Current entity**: **${entityName}**. \\n - **Current value**: **${Random}**.\"\n },\n \"markdownCss\": {\n \"title\": \"Markdown/HTML CSS\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"useMarkdownTextFunction\": {\n \"title\": \"Use markdown/HTML value function\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"markdownTextFunction\": {\n \"title\": \"Markdown/HTML value function: f(data)\",\n \"type\": \"string\",\n \"default\": \"return '# Some title\\\\n - Entity name: ' + data[0]['entityName'];\"\n }\n },\n \"required\": []\n },\n \"form\": [\n \"useMarkdownTextFunction\",\n {\n \"key\": \"markdownTextPattern\",\n \"type\": \"markdown\",\n \"condition\": \"model.useMarkdownTextFunction !== true\"\n },\n {\n \"key\": \"markdownTextFunction\",\n \"type\": \"javascript\",\n \"helpId\": \"widget/lib/markdown/markdown_text_fn\",\n \"condition\": \"model.useMarkdownTextFunction === true\"\n },\n {\n \"key\": \"markdownCss\",\n \"type\": \"css\"\n }\n ]\n}\n", - "dataKeySettingsSchema": "{}\n", + "settingsSchema": "", + "dataKeySettingsSchema": "", + "settingsDirective": "tb-markdown-widget-settings", "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"markdownTextPattern\":\"### Markdown/HTML card\\n - **Current entity**: ${entityName}.\\n - **Current value**: ${Random}.\",\"markdownTextFunction\":\"return '# Some title\\\\n - Entity name: ' + data[0]['entityName'];\",\"useMarkdownTextFunction\":false},\"title\":\"Markdown/HTML Card\",\"showTitleIcon\":false,\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"titleTooltip\":\"\",\"dropShadow\":true,\"enableFullscreen\":true,\"widgetStyle\":{},\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"showLegend\":false}" } }, diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/markdown-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/markdown-widget-settings.component.html new file mode 100644 index 0000000000..f586552d15 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/markdown-widget-settings.component.html @@ -0,0 +1,38 @@ + +
+ + {{ 'widgets.markdown.use-markdown-text-function' | translate }} + +
+ + +
+
+ + +
+ + +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/markdown-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/markdown-widget-settings.component.ts new file mode 100644 index 0000000000..db78d8b42f --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/markdown-widget-settings.component.ts @@ -0,0 +1,76 @@ +/// +/// 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 { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; + +@Component({ + selector: 'tb-markdown-widget-settings', + templateUrl: './markdown-widget-settings.component.html', + styleUrls: ['./widget-settings.scss'] +}) +export class MarkdownWidgetSettingsComponent extends WidgetSettingsComponent { + + markdownWidgetSettingsForm: FormGroup; + + constructor(protected store: Store, + private fb: FormBuilder) { + super(store); + } + + protected settingsForm(): FormGroup { + return this.markdownWidgetSettingsForm; + } + + protected defaultSettings(): WidgetSettings { + return { + useMarkdownTextFunction: false, + markdownTextPattern: '# Markdown/HTML card \\n - **Current entity**: **${entityName}**. \\n - **Current value**: **${Random}**.', + markdownTextFunction: 'return \'# Some title\\\\n - Entity name: \' + data[0][\'entityName\'];', + markdownCss: '' + }; + } + + protected onSettingsSet(settings: WidgetSettings) { + this.markdownWidgetSettingsForm = this.fb.group({ + useMarkdownTextFunction: [settings.useMarkdownTextFunction, []], + markdownTextPattern: [settings.markdownTextPattern, []], + markdownTextFunction: [settings.qrCodeTextFunction, []], + markdownCss: [settings.markdownCss, []] + }); + } + + protected validatorTriggers(): string[] { + return ['useMarkdownTextFunction']; + } + + protected updateValidators(emitEvent: boolean) { + const useMarkdownTextFunction: boolean = this.markdownWidgetSettingsForm.get('useMarkdownTextFunction').value; + if (useMarkdownTextFunction) { + this.markdownWidgetSettingsForm.get('markdownTextPattern').disable(); + this.markdownWidgetSettingsForm.get('markdownTextFunction').enable(); + } else { + this.markdownWidgetSettingsForm.get('markdownTextPattern').enable(); + this.markdownWidgetSettingsForm.get('markdownTextFunction').disable(); + } + this.markdownWidgetSettingsForm.get('markdownTextPattern').updateValueAndValidity({emitEvent}); + this.markdownWidgetSettingsForm.get('markdownTextFunction').updateValueAndValidity({emitEvent}); + } + +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts index e31eef1f87..03e04bed31 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts @@ -29,13 +29,17 @@ import { import { TimeseriesTableLatestKeySettingsComponent } from '@home/components/widget/lib/settings/timeseries-table-latest-key-settings.component'; +import { + MarkdownWidgetSettingsComponent +} from '@home/components/widget/lib/settings/markdown-widget-settings.component'; @NgModule({ declarations: [ QrCodeWidgetSettingsComponent, TimeseriesTableWidgetSettingsComponent, TimeseriesTableKeySettingsComponent, - TimeseriesTableLatestKeySettingsComponent + TimeseriesTableLatestKeySettingsComponent, + MarkdownWidgetSettingsComponent ], imports: [ CommonModule, @@ -46,7 +50,8 @@ import { QrCodeWidgetSettingsComponent, TimeseriesTableWidgetSettingsComponent, TimeseriesTableKeySettingsComponent, - TimeseriesTableLatestKeySettingsComponent + TimeseriesTableLatestKeySettingsComponent, + MarkdownWidgetSettingsComponent ] }) export class WidgetSettingsModule { @@ -56,5 +61,6 @@ export const widgetSettingsComponentsMap: {[key: string]: Type -
@@ -37,10 +37,10 @@
-
+
-
- +
+
diff --git a/ui-ngx/src/app/shared/components/js-func.component.scss b/ui-ngx/src/app/shared/components/js-func.component.scss index 3a7ddc3d09..6b11058333 100644 --- a/ui-ngx/src/app/shared/components/js-func.component.scss +++ b/ui-ngx/src/app/shared/components/js-func.component.scss @@ -24,14 +24,22 @@ height: 100%; } + &:not(.tb-js-func-title) { + .tb-js-func-panel { + margin-left: 15px; + } + } + + &.tb-js-func-title { + .tb-js-func-panel { + height: calc(100% - 40px); + } + } + .tb-js-func-panel { height: calc(100% - 80px); border: 1px solid #c0c0c0; - &:not(.tb-js-func-title) { - margin-left: 15px; - } - #tb-javascript-input { width: 100%; min-width: 200px; @@ -43,6 +51,12 @@ } } + &:not(.tb-fullscreen) { + &.tb-js-func-title { + padding-bottom: 15px; + } + } + .tb-js-func-toolbar { & > * { &:not(:last-child) { diff --git a/ui-ngx/src/app/shared/components/markdown-editor.component.html b/ui-ngx/src/app/shared/components/markdown-editor.component.html new file mode 100644 index 0000000000..e31ad8bc3f --- /dev/null +++ b/ui-ngx/src/app/shared/components/markdown-editor.component.html @@ -0,0 +1,47 @@ + +
+
+ +
+
+
+ + + +
+
+
+ +
+
+
+ +
+
diff --git a/ui-ngx/src/app/shared/components/markdown-editor.component.scss b/ui-ngx/src/app/shared/components/markdown-editor.component.scss new file mode 100644 index 0000000000..a4149c54d7 --- /dev/null +++ b/ui-ngx/src/app/shared/components/markdown-editor.component.scss @@ -0,0 +1,77 @@ +/** + * 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. + */ +.markdown-content { + min-width: 400px; + &.tb-edit-mode { + .tb-markdown-view-container { + border: 1px solid #c0c0c0; + } + .tb-markdown-view { + padding: 20px; + } + &:not(.tb-fullscreen) { + padding-bottom: 15px; + .markdown-content-editor { + min-height: 200px; + max-height: 200px; + height: 200px; + } + .tb-markdown-view-container { + min-height: 200px; + max-height: 200px; + height: 200px; + } + } + } + &.tb-fullscreen { + background: #fff; + .markdown-content-editor { + height: calc(100% - 40px); + } + } + .markdown-content-editor { + position: relative; + height: 100%; + } + .tb-markdown-editor { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid #c0c0c0; + } + .tb-markdown-view-container { + overflow: auto; + height: 100%; + } + .buttons-panel { + position: absolute; + top: 5px; + right: 24px; + z-index: 1; + button.edit-toggle { + min-width: 32px; + min-height: 15px; + padding: 4px; + margin: 0; + font-size: .8rem; + line-height: 15px; + color: #7b7b7b; + background: rgba(220, 220, 220, .35); + } + } +} diff --git a/ui-ngx/src/app/shared/components/markdown-editor.component.ts b/ui-ngx/src/app/shared/components/markdown-editor.component.ts new file mode 100644 index 0000000000..7c1c9c7c02 --- /dev/null +++ b/ui-ngx/src/app/shared/components/markdown-editor.component.ts @@ -0,0 +1,154 @@ +/// +/// 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, ElementRef, forwardRef, Input, OnInit, ViewChild } from '@angular/core'; +import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { Ace } from 'ace-builds'; +import { coerceBooleanProperty } from '@angular/cdk/coercion'; +import { getAce } from '@shared/models/ace/ace.models'; + +@Component({ + selector: 'tb-markdown-editor', + templateUrl: './markdown-editor.component.html', + styleUrls: ['./markdown-editor.component.scss'], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => MarkdownEditorComponent), + multi: true + } + ] +}) +export class MarkdownEditorComponent implements OnInit, ControlValueAccessor { + + @Input() label: string; + + @Input() disabled: boolean; + + @Input() readonly: boolean; + + @ViewChild('markdownEditor', {static: true}) + markdownEditorElmRef: ElementRef; + + private markdownEditor: Ace.Editor; + + editorMode = true; + + fullscreen = false; + + markdownValue: string; + renderValue: string; + + ignoreChange = false; + + private propagateChange = null; + + private requiredValue: boolean; + + get required(): boolean { + return this.requiredValue; + } + + @Input() + set required(value: boolean) { + this.requiredValue = coerceBooleanProperty(value); + } + + constructor() { + } + + ngOnInit(): void { + if (!this.readonly) { + const editorElement = this.markdownEditorElmRef.nativeElement; + let editorOptions: Partial = { + mode: 'ace/mode/markdown', + showGutter: true, + showPrintMargin: false, + readOnly: false + }; + + const advancedOptions = { + enableSnippets: true, + enableBasicAutocompletion: true, + enableLiveAutocompletion: true + }; + + editorOptions = {...editorOptions, ...advancedOptions}; + + getAce().subscribe( + (ace) => { + this.markdownEditor = ace.edit(editorElement, editorOptions); + this.markdownEditor.session.setUseWrapMode(false); + this.markdownEditor.setValue(this.markdownValue ? this.markdownValue : '', -1); + this.markdownEditor.on('change', () => { + if (!this.ignoreChange) { + this.updateView(); + } + }); + } + ); + + } + } + + registerOnChange(fn: any): void { + this.propagateChange = fn; + } + + registerOnTouched(fn: any): void { + } + + setDisabledState(isDisabled: boolean): void { + this.disabled = isDisabled; + } + + writeValue(value: string): void { + this.editorMode = true; + this.markdownValue = value; + this.renderValue = this.markdownValue ? this.markdownValue : ' '; + if (this.markdownEditor) { + this.ignoreChange = true; + this.markdownEditor.setValue(this.markdownValue ? this.markdownValue : '', -1); + this.ignoreChange = false; + } + } + + updateView() { + const editorValue = this.markdownEditor.getValue(); + if (this.markdownValue !== editorValue) { + this.markdownValue = editorValue; + this.renderValue = this.markdownValue ? this.markdownValue : ' '; + this.propagateChange(this.markdownValue); + } + } + + onFullscreen() { + if (this.markdownEditor) { + setTimeout(() => { + this.markdownEditor.resize(); + }, 0); + } + } + + toggleEditMode() { + this.editorMode = !this.editorMode; + if (this.editorMode && this.markdownEditor) { + setTimeout(() => { + this.markdownEditor.resize(); + }, 0); + } + } +} diff --git a/ui-ngx/src/app/shared/shared.module.ts b/ui-ngx/src/app/shared/shared.module.ts index a356fa5921..9d3d6864fe 100644 --- a/ui-ngx/src/app/shared/shared.module.ts +++ b/ui-ngx/src/app/shared/shared.module.ts @@ -79,6 +79,7 @@ import { EnumToArrayPipe } from '@shared/pipe/enum-to-array.pipe'; import { ClipboardModule } from 'ngx-clipboard'; import { ValueInputComponent } from '@shared/components/value-input.component'; import { MarkdownModule, MarkedOptions } from 'ngx-markdown'; +import { MarkdownEditorComponent } from '@shared/components/markdown-editor.component'; import { FullscreenDirective } from '@shared/components/fullscreen.directive'; import { HighlightPipe } from '@shared/pipe/highlight.pipe'; import { DashboardAutocompleteComponent } from '@shared/components/dashboard-autocomplete.component'; @@ -258,6 +259,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) KeyValMapComponent, NavTreeComponent, LedLightComponent, + MarkdownEditorComponent, NospacePipe, MillisecondsToTimeStringPipe, EnumToArrayPipe, @@ -452,6 +454,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) KeyValMapComponent, NavTreeComponent, LedLightComponent, + MarkdownEditorComponent, NospacePipe, MillisecondsToTimeStringPipe, EnumToArrayPipe, diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 47d22d9b3f..272ea90d7d 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -2390,6 +2390,8 @@ "error": "Login error" }, "markdown": { + "edit": "Edit", + "preview": "Preview", "copy-code": "Click to copy", "copied": "Copied!" }, @@ -3368,6 +3370,12 @@ "rotateButton": "Rotate polygon" } }, + "markdown": { + "use-markdown-text-function": "Use markdown/HTML value function", + "markdown-text-function": "Markdown/HTML value function", + "markdown-text-pattern": "Markdown/HTML pattern (markdown or HTML with variables, for ex. '${entityName} or ${keyName} - some text.')", + "markdown-css": "Markdown/HTML CSS" + }, "table": { "common-table-settings": "Common Table Settings", "enable-search": "Enable search", From 7cc553021bbf5c79af395a27da12334baf53b93f Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Sat, 2 Apr 2022 15:09:40 +0300 Subject: [PATCH 05/66] UI: Add label widget settings form --- .../json/system/widget_bundles/cards.json | 3 +- .../settings/label-widget-font.component.html | 71 +++++++++++ .../settings/label-widget-font.component.ts | 104 ++++++++++++++++ .../label-widget-label.component.html | 72 +++++++++++ .../label-widget-label.component.scss | 40 +++++++ .../settings/label-widget-label.component.ts | 113 ++++++++++++++++++ .../label-widget-settings.component.html | 49 ++++++++ .../label-widget-settings.component.scss | 32 +++++ .../label-widget-settings.component.ts | 92 ++++++++++++++ .../markdown-widget-settings.component.html | 24 ++-- .../qrcode-widget-settings.component.html | 15 ++- .../lib/settings/widget-settings.module.ts | 16 ++- .../assets/locale/locale.constant-en_US.json | 26 ++++ 13 files changed, 632 insertions(+), 25 deletions(-) create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-font.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-font.component.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-label.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-label.component.scss create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-label.component.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-settings.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-settings.component.scss create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-settings.component.ts diff --git a/application/src/main/data/json/system/widget_bundles/cards.json b/application/src/main/data/json/system/widget_bundles/cards.json index e574e1d98e..7debb29ff9 100644 --- a/application/src/main/data/json/system/widget_bundles/cards.json +++ b/application/src/main/data/json/system/widget_bundles/cards.json @@ -113,8 +113,9 @@ "templateHtml": "", "templateCss": "#container {\n overflow: auto;\n}\n\n.tbDatasource-container {\n margin: 5px;\n padding: 8px;\n}\n\n.tbDatasource-title {\n font-size: 1.200rem;\n font-weight: 500;\n padding-bottom: 10px;\n}\n\n.tbDatasource-table {\n width: 100%;\n box-shadow: 0 0 10px #ccc;\n border-collapse: collapse;\n white-space: nowrap;\n font-size: 1.000rem;\n color: #757575;\n}\n\n.tbDatasource-table td {\n position: relative;\n border-top: 1px solid rgba(0, 0, 0, 0.12);\n border-bottom: 1px solid rgba(0, 0, 0, 0.12);\n padding: 0px 18px;\n box-sizing: border-box;\n}", "controllerScript": "self.onInit = function() {\n self.ctx.varsRegex = /\\$\\{([^\\}]*)\\}/g;\n \n var imageUrl = self.ctx.settings.backgroundImageUrl ? self.ctx.settings.backgroundImageUrl :\n 'data:image/svg+xml;base64,PHN2ZyBpZD0ic3ZnMiIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwIiB3aWR0aD0iMTAwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgdmlld0JveD0iMCAwIDEwMCAxMDAiPgogPGcgaWQ9ImxheWVyMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtOTUyLjM2KSI+CiAgPHJlY3QgaWQ9InJlY3Q0Njg0IiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBoZWlnaHQ9Ijk5LjAxIiB3aWR0aD0iOTkuMDEiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiB5PSI5NTIuODYiIHg9Ii40OTUwNSIgc3Ryb2tlLXdpZHRoPSIuOTkwMTAiIGZpbGw9IiNlZWUiLz4KICA8dGV4dCBpZD0idGV4dDQ2ODYiIHN0eWxlPSJ3b3JkLXNwYWNpbmc6MHB4O2xldHRlci1zcGFjaW5nOjBweDt0ZXh0LWFuY2hvcjptaWRkbGU7dGV4dC1hbGlnbjpjZW50ZXIiIGZvbnQtd2VpZ2h0PSJib2xkIiB4bWw6c3BhY2U9InByZXNlcnZlIiBmb250LXNpemU9IjEwcHgiIGxpbmUtaGVpZ2h0PSIxMjUlIiB5PSI5NzAuNzI4MDkiIHg9IjQ5LjM5NjQ3NyIgZm9udC1mYW1pbHk9IlJvYm90byIgZmlsbD0iIzY2NjY2NiI+PHRzcGFuIGlkPSJ0c3BhbjQ2OTAiIHg9IjUwLjY0NjQ3NyIgeT0iOTcwLjcyODA5Ij5JbWFnZSBiYWNrZ3JvdW5kIDwvdHNwYW4+PHRzcGFuIGlkPSJ0c3BhbjQ2OTIiIHg9IjQ5LjM5NjQ3NyIgeT0iOTgzLjIyODA5Ij5pcyBub3QgY29uZmlndXJlZDwvdHNwYW4+PC90ZXh0PgogIDxyZWN0IGlkPSJyZWN0NDY5NCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgaGVpZ2h0PSIxOS4zNiIgd2lkdGg9IjY5LjM2IiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgeT0iOTkyLjY4IiB4PSIxNS4zMiIgc3Ryb2tlLXdpZHRoPSIuNjM5ODYiIGZpbGw9Im5vbmUiLz4KIDwvZz4KPC9zdmc+Cg==';\n\n self.ctx.$container.css('background', 'url(\"'+imageUrl+'\") no-repeat');\n self.ctx.$container.css('backgroundSize', 'contain');\n self.ctx.$container.css('backgroundPosition', '50% 50%');\n \n function processLabelPattern(pattern, data) {\n var match = self.ctx.varsRegex.exec(pattern);\n var replaceInfo = {};\n replaceInfo.variables = [];\n while (match !== null) {\n var variableInfo = {};\n variableInfo.dataKeyIndex = -1;\n var variable = match[0];\n var label = match[1];\n var valDec = 2;\n var splitVals = label.split(':');\n if (splitVals.length > 1) {\n label = splitVals[0];\n valDec = parseFloat(splitVals[1]);\n }\n variableInfo.variable = variable;\n variableInfo.valDec = valDec;\n \n if (label.startsWith('#')) {\n var keyIndexStr = label.substring(1);\n var n = Math.floor(Number(keyIndexStr));\n if (String(n) === keyIndexStr && n >= 0) {\n variableInfo.dataKeyIndex = n;\n }\n }\n if (variableInfo.dataKeyIndex === -1) {\n for (var i = 0; i < data.length; i++) {\n var datasourceData = data[i];\n var dataKey = datasourceData.dataKey;\n if (dataKey.label === label) {\n variableInfo.dataKeyIndex = i;\n break;\n }\n }\n }\n replaceInfo.variables.push(variableInfo);\n match = self.ctx.varsRegex.exec(pattern);\n }\n return replaceInfo;\n }\n\n var configuredLabels = self.ctx.settings.labels;\n if (!configuredLabels) {\n configuredLabels = [];\n }\n \n self.ctx.labels = [];\n\n for (var l = 0; l < configuredLabels.length; l++) {\n var labelConfig = configuredLabels[l];\n var localConfig = {};\n localConfig.font = {};\n \n localConfig.pattern = labelConfig.pattern ? labelConfig.pattern : '${#0}';\n localConfig.x = labelConfig.x ? labelConfig.x : 0;\n localConfig.y = labelConfig.y ? labelConfig.y : 0;\n localConfig.backgroundColor = labelConfig.backgroundColor ? labelConfig.backgroundColor : 'rgba(0,0,0,0)';\n \n var settingsFont = labelConfig.font;\n if (!settingsFont) {\n settingsFont = {};\n }\n \n localConfig.font.family = settingsFont.family || 'Roboto';\n localConfig.font.size = settingsFont.size ? settingsFont.size : 6;\n localConfig.font.style = settingsFont.style ? settingsFont.style : 'normal';\n localConfig.font.weight = settingsFont.weight ? settingsFont.weight : '500';\n localConfig.font.color = settingsFont.color ? settingsFont.color : '#fff';\n \n localConfig.replaceInfo = processLabelPattern(localConfig.pattern, self.ctx.data);\n \n var label = {};\n var labelElement = $('
');\n labelElement.css('position', 'absolute');\n labelElement.css('display', 'none');\n labelElement.css('top', '0');\n labelElement.css('left', '0');\n labelElement.css('backgroundColor', localConfig.backgroundColor);\n labelElement.css('color', localConfig.font.color);\n labelElement.css('fontFamily', localConfig.font.family);\n labelElement.css('fontStyle', localConfig.font.style);\n labelElement.css('fontWeight', localConfig.font.weight);\n \n labelElement.html(localConfig.pattern);\n self.ctx.$container.append(labelElement);\n label.element = labelElement;\n label.config = localConfig;\n label.htmlSet = false;\n label.visible = false;\n self.ctx.labels.push(label);\n }\n\n var bgImg = $('');\n bgImg.hide();\n bgImg.bind('load', function()\n {\n self.ctx.bImageHeight = $(this).height();\n self.ctx.bImageWidth = $(this).width();\n self.onResize();\n });\n self.ctx.$container.append(bgImg);\n bgImg.attr('src', imageUrl);\n \n self.onDataUpdated();\n}\n\nself.onDataUpdated = function() {\n updateLabels();\n}\n\nself.onResize = function() {\n if (self.ctx.bImageHeight && self.ctx.bImageWidth) {\n var backgroundRect = {};\n var imageRatio = self.ctx.bImageWidth / self.ctx.bImageHeight;\n var componentRatio = self.ctx.width / self.ctx.height;\n if (componentRatio >= imageRatio) {\n backgroundRect.top = 0;\n backgroundRect.bottom = 1.0;\n backgroundRect.xRatio = imageRatio / componentRatio;\n backgroundRect.yRatio = 1;\n var offset = (1 - backgroundRect.xRatio) / 2;\n backgroundRect.left = offset;\n backgroundRect.right = 1 - offset;\n } else {\n backgroundRect.left = 0;\n backgroundRect.right = 1.0;\n backgroundRect.xRatio = 1;\n backgroundRect.yRatio = componentRatio / imageRatio;\n var offset = (1 - backgroundRect.yRatio) / 2;\n backgroundRect.top = offset;\n backgroundRect.bottom = 1 - offset;\n }\n for (var l = 0; l < self.ctx.labels.length; l++) {\n var label = self.ctx.labels[l];\n var labelLeft = backgroundRect.left*100 + (label.config.x*backgroundRect.xRatio);\n var labelTop = backgroundRect.top*100 + (label.config.y*backgroundRect.yRatio);\n var fontSize = self.ctx.height * backgroundRect.yRatio * label.config.font.size / 100;\n label.element.css('top', labelTop + '%');\n label.element.css('left', labelLeft + '%');\n label.element.css('fontSize', fontSize + 'px');\n if (!label.visible) {\n label.element.css('display', 'block');\n label.visible = true;\n }\n }\n } \n}\n\n\nfunction isNumber(n) {\n return !isNaN(parseFloat(n)) && isFinite(n);\n}\n\nfunction padValue(val, dec, int) {\n var i = 0;\n var s, strVal, n;\n\n val = parseFloat(val);\n n = (val < 0);\n val = Math.abs(val);\n\n if (dec > 0) {\n strVal = val.toFixed(dec).toString().split('.');\n s = int - strVal[0].length;\n\n for (; i < s; ++i) {\n strVal[0] = '0' + strVal[0];\n }\n\n strVal = (n ? '-' : '') + strVal[0] + '.' + strVal[1];\n }\n\n else {\n strVal = Math.round(val).toString();\n s = int - strVal.length;\n\n for (; i < s; ++i) {\n strVal = '0' + strVal;\n }\n\n strVal = (n ? '-' : '') + strVal;\n }\n\n return strVal;\n}\n\nfunction updateLabels() {\n for (var l = 0; l < self.ctx.labels.length; l++) {\n var label = self.ctx.labels[l];\n var text = label.config.pattern;\n var replaceInfo = label.config.replaceInfo;\n var updated = false;\n for (var v = 0; v < replaceInfo.variables.length; v++) {\n var variableInfo = replaceInfo.variables[v];\n var txtVal = '';\n if (variableInfo.dataKeyIndex > -1) {\n var varData = self.ctx.data[variableInfo.dataKeyIndex].data;\n if (varData.length > 0) {\n var val = varData[varData.length-1][1];\n if (isNumber(val)) {\n txtVal = padValue(val, variableInfo.valDec, 0);\n updated = true;\n } else {\n txtVal = val;\n updated = true;\n }\n }\n }\n text = text.split(variableInfo.variable).join(txtVal);\n }\n if (updated || !label.htmlSet) {\n label.element.html(text);\n if (!label.htmlSet) {\n label.htmlSet = true;\n }\n }\n }\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n singleEntity: true\n };\n};\n\nself.onDestroy = function() {\n}\n", - "settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"Settings\",\n \"required\": [\"backgroundImageUrl\"],\n \"properties\": {\n \"backgroundImageUrl\": {\n \"title\": \"Background image\",\n \"type\": \"string\",\n \"default\": \"data:image/svg+xml;base64,PHN2ZyBpZD0ic3ZnMiIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwIiB3aWR0aD0iMTAwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgdmlld0JveD0iMCAwIDEwMCAxMDAiPgogPGcgaWQ9ImxheWVyMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtOTUyLjM2KSI+CiAgPHJlY3QgaWQ9InJlY3Q0Njg0IiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBoZWlnaHQ9Ijk5LjAxIiB3aWR0aD0iOTkuMDEiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiB5PSI5NTIuODYiIHg9Ii40OTUwNSIgc3Ryb2tlLXdpZHRoPSIuOTkwMTAiIGZpbGw9IiNlZWUiLz4KICA8dGV4dCBpZD0idGV4dDQ2ODYiIHN0eWxlPSJ3b3JkLXNwYWNpbmc6MHB4O2xldHRlci1zcGFjaW5nOjBweDt0ZXh0LWFuY2hvcjptaWRkbGU7dGV4dC1hbGlnbjpjZW50ZXIiIGZvbnQtd2VpZ2h0PSJib2xkIiB4bWw6c3BhY2U9InByZXNlcnZlIiBmb250LXNpemU9IjEwcHgiIGxpbmUtaGVpZ2h0PSIxMjUlIiB5PSI5NzAuNzI4MDkiIHg9IjQ5LjM5NjQ3NyIgZm9udC1mYW1pbHk9IlJvYm90byIgZmlsbD0iIzY2NjY2NiI+PHRzcGFuIGlkPSJ0c3BhbjQ2OTAiIHg9IjUwLjY0NjQ3NyIgeT0iOTcwLjcyODA5Ij5JbWFnZSBiYWNrZ3JvdW5kIDwvdHNwYW4+PHRzcGFuIGlkPSJ0c3BhbjQ2OTIiIHg9IjQ5LjM5NjQ3NyIgeT0iOTgzLjIyODA5Ij5pcyBub3QgY29uZmlndXJlZDwvdHNwYW4+PC90ZXh0PgogIDxyZWN0IGlkPSJyZWN0NDY5NCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgaGVpZ2h0PSIxOS4zNiIgd2lkdGg9IjY5LjM2IiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgeT0iOTkyLjY4IiB4PSIxNS4zMiIgc3Ryb2tlLXdpZHRoPSIuNjM5ODYiIGZpbGw9Im5vbmUiLz4KIDwvZz4KPC9zdmc+Cg==\"\n },\n \"labels\": {\n \"title\": \"Labels\",\n \"type\": \"array\",\n \"items\": {\n \"title\": \"Label\",\n \"type\": \"object\",\n \"required\": [\"pattern\"],\n \"properties\": {\n \"pattern\": {\n \"title\": \"Pattern ( for ex. 'Text ${keyName} units.' or '${#} units' )\",\n \"type\": \"string\",\n \"default\": \"${#0}\"\n },\n \"x\": {\n \"title\": \"X (Percentage relative to background)\",\n \"type\": \"number\",\n \"default\": 50\n },\n \"y\": {\n \"title\": \"Y (Percentage relative to background)\",\n \"type\": \"number\",\n \"default\": 50\n },\n \"backgroundColor\": {\n \"title\": \"Backround color\",\n \"type\": \"string\",\n \"default\": \"rgba(0,0,0,0)\"\n },\n \"font\": {\n \"type\": \"object\",\n \"properties\": {\n \"family\": {\n \"title\": \"Font family\",\n \"type\": \"string\",\n \"default\": \"Roboto\"\n },\n \"size\": {\n \"title\": \"Relative font size (percents)\",\n \"type\": \"number\",\n \"default\": 6\n },\n \"style\": {\n \"title\": \"Style\",\n \"type\": \"string\",\n \"default\": \"normal\"\n },\n \"weight\": {\n \"title\": \"Weight\",\n \"type\": \"string\",\n \"default\": \"500\"\n },\n \"color\": {\n \"title\": \"color\",\n \"type\": \"string\",\n \"default\": \"#fff\"\n }\n }\n }\n }\n }\n }\n }\n },\n \"form\": [\n {\n \"key\": \"backgroundImageUrl\",\n \"type\": \"image\"\n },\n {\n \"key\": \"labels\",\n \"items\": [\n \"labels[].pattern\",\n \"labels[].x\",\n \"labels[].y\",\n {\n \"key\": \"labels[].backgroundColor\",\n \"type\": \"color\"\n },\n \"labels[].font.family\",\n \"labels[].font.size\",\n {\n \"key\": \"labels[].font.style\",\n \"type\": \"rc-select\",\n \"multiple\": false,\n \"items\": [\n {\n \"value\": \"normal\",\n \"label\": \"Normal\"\n },\n {\n \"value\": \"italic\",\n \"label\": \"Italic\"\n },\n {\n \"value\": \"oblique\",\n \"label\": \"Oblique\"\n }\n ]\n\n },\n {\n \"key\": \"labels[].font.weight\",\n \"type\": \"rc-select\",\n \"multiple\": false,\n \"items\": [\n {\n \"value\": \"normal\",\n \"label\": \"Normal\"\n },\n {\n \"value\": \"bold\",\n \"label\": \"Bold\"\n },\n {\n \"value\": \"bolder\",\n \"label\": \"Bolder\"\n },\n {\n \"value\": \"lighter\",\n \"label\": \"Lighter\"\n },\n {\n \"value\": \"100\",\n \"label\": \"100\"\n },\n {\n \"value\": \"200\",\n \"label\": \"200\"\n },\n {\n \"value\": \"300\",\n \"label\": \"300\"\n },\n {\n \"value\": \"400\",\n \"label\": \"400\"\n },\n {\n \"value\": \"500\",\n \"label\": \"500\"\n },\n {\n \"value\": \"600\",\n \"label\": \"600\"\n },\n {\n \"value\": \"700\",\n \"label\": \"800\"\n },\n {\n \"value\": \"800\",\n \"label\": \"800\"\n },\n {\n \"value\": \"900\",\n \"label\": \"900\"\n }\n ]\n },\n {\n \"key\": \"labels[].font.color\",\n \"type\": \"color\"\n }\n ]\n }\n ]\n}", + "settingsSchema": "", "dataKeySettingsSchema": "{}\n", + "settingsDirective": "tb-label-widget-settings", "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"var\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"backgroundImageUrl\":\"data:image/svg+xml;base64,PHN2ZyBpZD0ic3ZnMiIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwIiB3aWR0aD0iMTAwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgdmlld0JveD0iMCAwIDEwMCAxMDAiPgogPGcgaWQ9ImxheWVyMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtOTUyLjM2KSI+CiAgPHJlY3QgaWQ9InJlY3Q0Njg0IiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBoZWlnaHQ9Ijk5LjAxIiB3aWR0aD0iOTkuMDEiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiB5PSI5NTIuODYiIHg9Ii40OTUwNSIgc3Ryb2tlLXdpZHRoPSIuOTkwMTAiIGZpbGw9IiNlZWUiLz4KICA8dGV4dCBpZD0idGV4dDQ2ODYiIHN0eWxlPSJ3b3JkLXNwYWNpbmc6MHB4O2xldHRlci1zcGFjaW5nOjBweDt0ZXh0LWFuY2hvcjptaWRkbGU7dGV4dC1hbGlnbjpjZW50ZXIiIGZvbnQtd2VpZ2h0PSJib2xkIiB4bWw6c3BhY2U9InByZXNlcnZlIiBmb250LXNpemU9IjEwcHgiIGxpbmUtaGVpZ2h0PSIxMjUlIiB5PSI5NzAuNzI4MDkiIHg9IjQ5LjM5NjQ3NyIgZm9udC1mYW1pbHk9IlJvYm90byIgZmlsbD0iIzY2NjY2NiI+PHRzcGFuIGlkPSJ0c3BhbjQ2OTAiIHg9IjUwLjY0NjQ3NyIgeT0iOTcwLjcyODA5Ij5JbWFnZSBiYWNrZ3JvdW5kIDwvdHNwYW4+PHRzcGFuIGlkPSJ0c3BhbjQ2OTIiIHg9IjQ5LjM5NjQ3NyIgeT0iOTgzLjIyODA5Ij5pcyBub3QgY29uZmlndXJlZDwvdHNwYW4+PC90ZXh0PgogIDxyZWN0IGlkPSJyZWN0NDY5NCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgaGVpZ2h0PSIxOS4zNiIgd2lkdGg9IjY5LjM2IiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgeT0iOTkyLjY4IiB4PSIxNS4zMiIgc3Ryb2tlLXdpZHRoPSIuNjM5ODYiIGZpbGw9Im5vbmUiLz4KIDwvZz4KPC9zdmc+Cg==\",\"labels\":[{\"pattern\":\"Value: ${#0:2} units.\",\"x\":20,\"y\":47,\"font\":{\"color\":\"#515151\",\"family\":\"Roboto\",\"size\":6,\"style\":\"normal\",\"weight\":\"500\"}}]},\"title\":\"Label widget\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400}}" } }, diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-font.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-font.component.html new file mode 100644 index 0000000000..1bd94abe6a --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-font.component.html @@ -0,0 +1,71 @@ + +
+ + widgets.label-widget.font-family + + + + widgets.label-widget.relative-font-size + + + + widgets.label-widget.font-style + + + {{ 'widgets.label-widget.font-style-normal' | translate }} + + + {{ 'widgets.label-widget.font-style-italic' | translate }} + + + {{ 'widgets.label-widget.font-style-oblique' | translate }} + + + + + widgets.label-widget.font-weight + + + {{ 'widgets.label-widget.font-weight-normal' | translate }} + + + {{ 'widgets.label-widget.font-weight-bold' | translate }} + + + {{ 'widgets.label-widget.font-weight-bolder' | translate }} + + + {{ 'widgets.label-widget.font-weight-lighter' | translate }} + + 100 + 200 + 300 + 400 + 500 + 600 + 700 + 800 + 900 + + + + +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-font.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-font.component.ts new file mode 100644 index 0000000000..e535f835c0 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-font.component.ts @@ -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, + 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); + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-label.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-label.component.html new file mode 100644 index 0000000000..6f067e88f9 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-label.component.html @@ -0,0 +1,72 @@ + + + +
+ +
+ {{ labelWidgetLabelFormGroup.get('pattern').value }} +
+ + + +
+ + +
+ +
+ + widgets.label-widget.label-pattern + + + {{ 'widgets.label-widget.label-pattern-required' | translate }} + + + +
+ widgets.label-widget.label-position +
+ + widgets.label-widget.x-pos + + + + widgets.label-widget.y-pos + + +
+
+ + +
+ widgets.label-widget.font-settings + +
+
+
+ + diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-label.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-label.component.scss new file mode 100644 index 0000000000..0df6cc0626 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-label.component.scss @@ -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; + } + } + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-label.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-label.component.ts new file mode 100644 index 0000000000..65f0cca39c --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-label.component.ts @@ -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, + 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); + } + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-settings.component.html new file mode 100644 index 0000000000..55e4a6816d --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-settings.component.html @@ -0,0 +1,49 @@ + +
+ + +
+ widgets.label-widget.labels +
+
+
+ + +
+
+
+ widgets.label-widget.no-labels +
+
+ +
+
+
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-settings.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-settings.component.scss new file mode 100644 index 0000000000..5125ee03e4 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-settings.component.scss @@ -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; + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-settings.component.ts new file mode 100644 index 0000000000..0535b55a33 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-settings.component.ts @@ -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, + 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 = []; + 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(); + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/markdown-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/markdown-widget-settings.component.html index f586552d15..3859a17e90 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/markdown-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/markdown-widget-settings.component.html @@ -19,19 +19,17 @@ {{ 'widgets.markdown.use-markdown-text-function' | translate }} -
- - -
-
- - -
+ + + + diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.html index 93d3b8086b..c38207c717 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.html @@ -26,12 +26,11 @@ {{ 'widgets.qr-code.qr-code-text-pattern-required' | translate }} -
- - -
+ +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts index 03e04bed31..ef2445f6c2 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts @@ -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${keyName} units.' or ${#<key index>} 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", From a6da5644a361322fb5c3e12674f224f991e36f86 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Sat, 2 Apr 2022 17:49:39 +0300 Subject: [PATCH 06/66] UI: Add simple card widget settings form --- .../json/system/widget_bundles/cards.json | 5 +- ...simple-card-widget-settings.component.html | 30 +++++++++++ .../simple-card-widget-settings.component.ts | 52 +++++++++++++++++++ .../lib/settings/widget-settings.module.ts | 12 +++-- .../assets/locale/locale.constant-en_US.json | 5 ++ 5 files changed, 99 insertions(+), 5 deletions(-) create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/simple-card-widget-settings.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/simple-card-widget-settings.component.ts diff --git a/application/src/main/data/json/system/widget_bundles/cards.json b/application/src/main/data/json/system/widget_bundles/cards.json index 7debb29ff9..f421f48b61 100644 --- a/application/src/main/data/json/system/widget_bundles/cards.json +++ b/application/src/main/data/json/system/widget_bundles/cards.json @@ -95,8 +95,9 @@ "templateHtml": "", "templateCss": "#container {\n overflow: auto;\n}\n\n.tbDatasource-container {\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n.tbDatasource-table {\n width: 100%;\n height: 100%;\n border-collapse: collapse;\n white-space: nowrap;\n font-weight: 100;\n text-align: right;\n}\n\n.tbDatasource-table td {\n padding: 12px;\n position: relative;\n box-sizing: border-box;\n}\n\n.tbDatasource-data-key {\n opacity: 0.7;\n font-weight: 400;\n font-size: 3.500rem;\n}\n\n.tbDatasource-value {\n font-size: 5.000rem;\n}", "controllerScript": "self.onInit = function() {\n\n self.ctx.labelPosition = self.ctx.settings.labelPosition || 'left';\n \n if (self.ctx.datasources.length > 0) {\n var tbDatasource = self.ctx.datasources[0];\n var datasourceId = 'tbDatasource' + 0;\n self.ctx.$container.append(\n \"
\"\n );\n \n self.ctx.datasourceContainer = $('#' + datasourceId,\n self.ctx.$container);\n \n var tableId = 'table' + 0;\n self.ctx.datasourceContainer.append(\n \"
\"\n );\n var table = $('#' + tableId, self.ctx.$container);\n if (self.ctx.labelPosition === 'top') {\n table.css('text-align', 'left');\n }\n \n if (tbDatasource.dataKeys.length > 0) {\n var dataKey = tbDatasource.dataKeys[0];\n var labelCellId = 'labelCell' + 0;\n var cellId = 'cell' + 0;\n if (self.ctx.labelPosition === 'left') {\n table.append(\n \"\" +\n dataKey.label +\n \"\");\n } else {\n table.append(\n \"\" +\n dataKey.label +\n \"\");\n }\n self.ctx.labelCell = $('#' + labelCellId, table);\n self.ctx.valueCell = $('#' + cellId, table);\n self.ctx.valueCell.html(0 + ' ' + self.ctx.units);\n }\n }\n \n $.fn.textWidth = function(){\n var html_org = $(this).html();\n var html_calc = '' + html_org + '';\n $(this).html(html_calc);\n var width = $(this).find('span:first').width();\n $(this).html(html_org);\n return width;\n }; \n \n self.onResize();\n};\n\nself.onDataUpdated = function() {\n \n function isNumber(n) {\n return !isNaN(parseFloat(n)) && isFinite(n);\n }\n\n if (self.ctx.valueCell && self.ctx.data.length > 0) {\n var cellData = self.ctx.data[0];\n if (cellData.data.length > 0) {\n var tvPair = cellData.data[cellData.data.length -\n 1];\n var value = tvPair[1];\n var txtValue;\n if (isNumber(value)) {\n var decimals = self.ctx.decimals;\n var units = self.ctx.units;\n if (self.ctx.datasources.length > 0 && self.ctx.datasources[0].dataKeys.length > 0) {\n dataKey = self.ctx.datasources[0].dataKeys[0];\n if (dataKey.decimals || dataKey.decimals === 0) {\n decimals = dataKey.decimals;\n }\n if (dataKey.units) {\n units = dataKey.units;\n }\n }\n txtValue = self.ctx.utils.formatValue(value, decimals, units, true);\n } else {\n txtValue = value;\n }\n self.ctx.valueCell.html(txtValue);\n var targetWidth;\n var minDelta;\n if (self.ctx.labelPosition === 'left') {\n targetWidth = self.ctx.datasourceContainer.width() - self.ctx.labelCell.width();\n minDelta = self.ctx.width/16 + self.ctx.padding;\n } else {\n targetWidth = self.ctx.datasourceContainer.width();\n minDelta = self.ctx.padding;\n }\n var delta = targetWidth - self.ctx.valueCell.textWidth();\n var fontSize = self.ctx.valueFontSize;\n if (targetWidth > minDelta) {\n while (delta < minDelta && fontSize > 6) {\n fontSize--;\n self.ctx.valueCell.css('font-size', fontSize+'px');\n delta = targetWidth - self.ctx.valueCell.textWidth();\n }\n }\n }\n } \n \n};\n\nself.onResize = function() {\n var labelFontSize;\n if (self.ctx.labelPosition === 'top') {\n self.ctx.padding = self.ctx.height/20;\n labelFontSize = self.ctx.height/4;\n self.ctx.valueFontSize = self.ctx.height/2;\n } else {\n self.ctx.padding = self.ctx.width/50;\n labelFontSize = self.ctx.height/2.5;\n self.ctx.valueFontSize = self.ctx.height/2;\n if (self.ctx.width/self.ctx.height <= 2.7) {\n labelFontSize = self.ctx.width/7;\n self.ctx.valueFontSize = self.ctx.width/6;\n }\n }\n self.ctx.padding = Math.min(12, self.ctx.padding);\n \n if (self.ctx.labelCell) {\n self.ctx.labelCell.css('font-size', labelFontSize+'px');\n self.ctx.labelCell.css('padding', self.ctx.padding+'px');\n }\n if (self.ctx.valueCell) {\n self.ctx.valueCell.css('font-size', self.ctx.valueFontSize+'px');\n self.ctx.valueCell.css('padding', self.ctx.padding+'px');\n } \n};\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n};\n\n\nself.onDestroy = function() {\n};\n", - "settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"Settings\",\n \"properties\": {\n \"labelPosition\": {\n \"title\": \"Label position\",\n \"type\": \"string\",\n \"default\": \"left\"\n }\n },\n \"required\": []\n },\n \"form\": [\n {\n \"key\": \"labelPosition\",\n \"type\": \"rc-select\",\n \"multiple\": false,\n \"items\": [\n {\n \"value\": \"left\",\n \"label\": \"Left\"\n },\n {\n \"value\": \"top\",\n \"label\": \"Top\"\n }\n ]\n }\n ]\n}", - "dataKeySettingsSchema": "{}\n", + "settingsSchema": "", + "dataKeySettingsSchema": "", + "settingsDirective": "tb-simple-card-widget-settings", "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Temp\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.2392660816082064,\"funcBody\":\"var value = prevValue + Math.random() * 40 - 20;\\nif (value < -60) {\\n\\tvalue = -60;\\n} else if (value > 60) {\\n\\tvalue = 60;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"#ff5722\",\"color\":\"rgba(255, 255, 255, 0.87)\",\"padding\":\"16px\",\"settings\":{\"labelPosition\":\"top\"},\"title\":\"Simple card\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"units\":\"°C\",\"decimals\":0,\"useDashboardTimewindow\":true,\"showLegend\":false,\"widgetStyle\":{},\"actions\":{}}" } }, diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/simple-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/simple-card-widget-settings.component.html new file mode 100644 index 0000000000..5fe97385c7 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/simple-card-widget-settings.component.html @@ -0,0 +1,30 @@ + +
+ + widgets.simple-card.label-position + + + {{ 'widgets.simple-card.label-position-left' | translate }} + + + {{ 'widgets.simple-card.label-position-top' | translate }} + + + +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/simple-card-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/simple-card-widget-settings.component.ts new file mode 100644 index 0000000000..d690c4f434 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/simple-card-widget-settings.component.ts @@ -0,0 +1,52 @@ +/// +/// 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 { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; + +@Component({ + selector: 'tb-simple-card-widget-settings', + templateUrl: './simple-card-widget-settings.component.html', + styleUrls: [] +}) +export class SimpleCardWidgetSettingsComponent extends WidgetSettingsComponent { + + simpleCardWidgetSettingsForm: FormGroup; + + constructor(protected store: Store, + private fb: FormBuilder) { + super(store); + } + + protected settingsForm(): FormGroup { + return this.simpleCardWidgetSettingsForm; + } + + protected defaultSettings(): WidgetSettings { + return { + labelPosition: 'left' + }; + } + + protected onSettingsSet(settings: WidgetSettings) { + this.simpleCardWidgetSettingsForm = this.fb.group({ + labelPosition: [settings.labelPosition, []] + }); + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts index ef2445f6c2..577738dbdb 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts @@ -35,6 +35,9 @@ import { 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'; +import { + SimpleCardWidgetSettingsComponent +} from '@home/components/widget/lib/settings/simple-card-widget-settings.component'; @NgModule({ declarations: [ @@ -45,7 +48,8 @@ import { LabelWidgetSettingsComponent } from '@home/components/widget/lib/settin MarkdownWidgetSettingsComponent, LabelWidgetFontComponent, LabelWidgetLabelComponent, - LabelWidgetSettingsComponent + LabelWidgetSettingsComponent, + SimpleCardWidgetSettingsComponent ], imports: [ CommonModule, @@ -60,7 +64,8 @@ import { LabelWidgetSettingsComponent } from '@home/components/widget/lib/settin MarkdownWidgetSettingsComponent, LabelWidgetFontComponent, LabelWidgetLabelComponent, - LabelWidgetSettingsComponent + LabelWidgetSettingsComponent, + SimpleCardWidgetSettingsComponent ] }) export class WidgetSettingsModule { @@ -72,5 +77,6 @@ export const widgetSettingsComponentsMap: {[key: string]: Type Date: Sat, 2 Apr 2022 18:27:01 +0300 Subject: [PATCH 07/66] UI: Add dashboard state widget settings form --- .../json/system/widget_bundles/cards.json | 5 +- ...board-state-widget-settings.component.html | 64 ++++++++++++ ...shboard-state-widget-settings.component.ts | 99 +++++++++++++++++++ .../lib/settings/widget-settings.module.ts | 12 ++- .../assets/locale/locale.constant-en_US.json | 8 ++ 5 files changed, 183 insertions(+), 5 deletions(-) create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/dashboard-state-widget-settings.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/dashboard-state-widget-settings.component.ts diff --git a/application/src/main/data/json/system/widget_bundles/cards.json b/application/src/main/data/json/system/widget_bundles/cards.json index f421f48b61..05a008080e 100644 --- a/application/src/main/data/json/system/widget_bundles/cards.json +++ b/application/src/main/data/json/system/widget_bundles/cards.json @@ -207,8 +207,9 @@ "templateHtml": "\n\n
\n
Dashboard state widget
\n
(Specify dashboard state id in the advanced widget settings)
\n
\n", "templateCss": ".dashboard-state-widget-prompt {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: 32px;\n font-weight: 500;\n color: #999;\n}\n\n.dashboard-state-widget-prompt .title {\n font-size: 32px;\n font-weight: 500;\n color: #999;\n}\n\n.dashboard-state-widget-prompt .subtitle {\n font-size: 24px;\n font-weight: normal;\n color: #999;\n text-align: center;\n}", "controllerScript": "self.onInit = function() {\n var $injector = self.ctx.$scope.$injector;\n self.ctx.$scope.stateId = self.ctx.settings.stateId || \"\";\n self.ctx.$scope.defaultAutofillLayout = self.ctx.settings.defaultAutofillLayout;\n self.ctx.$scope.defaultMargin = self.ctx.settings.defaultMargin;\n self.ctx.$scope.defaultBackgroundColor = self.ctx.settings.defaultBackgroundColor;\n self.ctx.$scope.syncParentStateParams = self.ctx.settings.syncParentStateParams !== false;\n}\n\n\nself.onDestroy = function() {\n}\n", - "settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"Settings\",\n \"required\": [],\n \"properties\": {\n \"stateId\": {\n \"title\": \"Dashboard state id\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"defaultAutofillLayout\": {\n \"title\": \"Autofill state layout height by default\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"defaultMargin\": {\n \"title\": \"Default widgets margin\",\n \"type\": \"number\",\n \"default\": 0\n },\n \"defaultBackgroundColor\": {\n \"title\": \"Default background color\",\n \"type\": \"string\",\n \"default\": \"#fff\"\n },\n \"syncParentStateParams\": {\n \"title\": \"Sync state params with parent dashboard\",\n \"type\": \"boolean\",\n \"default\": true\n }\n }\n },\n \"form\": [\n \"stateId\",\n \"defaultAutofillLayout\",\n \"defaultMargin\",\n {\n \"key\": \"defaultBackgroundColor\",\n \"type\": \"color\"\n },\n \"syncParentStateParams\"\n ]\n}", - "dataKeySettingsSchema": "{}\n", + "settingsSchema": "", + "dataKeySettingsSchema": "", + "settingsDirective": "tb-dashboard-state-widget-settings", "defaultConfig": "{\"datasources\":[{\"type\":\"static\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"syncParentStateParams\":true,\"defaultAutofillLayout\":true,\"defaultMargin\":0,\"defaultBackgroundColor\":\"#fff\"},\"title\":\"Dashboard state widget\",\"dropShadow\":true,\"enableFullscreen\":false,\"widgetStyle\":{},\"widgetCss\":\"\",\"noDataDisplayMessage\":\"\",\"showLegend\":false}" } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/dashboard-state-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/dashboard-state-widget-settings.component.html new file mode 100644 index 0000000000..a17d3a7a35 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/dashboard-state-widget-settings.component.html @@ -0,0 +1,64 @@ + +
+
+ widgets.dashboard-state.dashboard-state-settings + + + + + + + + + + + + + widget-config.advanced-settings + + + + + {{ 'widgets.dashboard-state.autofill-state-layout' | translate }} + + + widgets.dashboard-state.default-margin + + + + + + {{ 'widgets.dashboard-state.sync-parent-state-params' | translate }} + + + +
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/dashboard-state-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/dashboard-state-widget-settings.component.ts new file mode 100644 index 0000000000..7d2a11e9cc --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/dashboard-state-widget-settings.component.ts @@ -0,0 +1,99 @@ +/// +/// 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, ElementRef, ViewChild } from '@angular/core'; +import { WidgetActionType, WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { Observable, of } from 'rxjs'; +import { map, mergeMap, startWith } from 'rxjs/operators'; + +@Component({ + selector: 'tb-dashboard-state-widget-settings', + templateUrl: './dashboard-state-widget-settings.component.html', + styleUrls: ['./widget-settings.scss'] +}) +export class DashboardStateWidgetSettingsComponent extends WidgetSettingsComponent { + + @ViewChild('dashboardStateInput') dashboardStateInput: ElementRef; + + dashboardStateWidgetSettingsForm: FormGroup; + + filteredDashboardStates: Observable>; + dashboardStateSearchText = ''; + + constructor(protected store: Store, + private fb: FormBuilder) { + super(store); + } + + protected settingsForm(): FormGroup { + return this.dashboardStateWidgetSettingsForm; + } + + protected defaultSettings(): WidgetSettings { + return { + stateId: '', + defaultAutofillLayout: true, + defaultMargin: 0, + defaultBackgroundColor: '#fff', + syncParentStateParams: true + }; + } + + protected onSettingsSet(settings: WidgetSettings) { + this.dashboardStateWidgetSettingsForm = this.fb.group({ + stateId: [settings.stateId, []], + defaultAutofillLayout: [settings.defaultAutofillLayout, []], + defaultMargin: [settings.defaultMargin, [Validators.min(0)]], + defaultBackgroundColor: [settings.defaultBackgroundColor, []], + syncParentStateParams: [settings.syncParentStateParams, []] + }); + this.dashboardStateSearchText = ''; + this.filteredDashboardStates = this.dashboardStateWidgetSettingsForm.get('stateId').valueChanges + .pipe( + startWith(''), + map(value => value ? value : ''), + mergeMap(name => this.fetchDashboardStates(name) ) + ); + } + + public clearDashboardState(value: string = '') { + this.dashboardStateInput.nativeElement.value = value; + this.dashboardStateWidgetSettingsForm.get('stateId').patchValue(value, {emitEvent: true}); + setTimeout(() => { + this.dashboardStateInput.nativeElement.blur(); + this.dashboardStateInput.nativeElement.focus(); + }, 0); + } + + private fetchDashboardStates(searchText?: string): Observable> { + this.dashboardStateSearchText = searchText; + const stateIds = Object.keys(this.dashboard.configuration.states); + const result = searchText ? stateIds.filter(this.createFilterForDashboardState(searchText)) : stateIds; + if (result && result.length) { + return of(result); + } else { + return of([searchText]); + } + } + + private createFilterForDashboardState(query: string): (stateId: string) => boolean { + const lowercaseQuery = query.toLowerCase(); + return stateId => stateId.toLowerCase().indexOf(lowercaseQuery) === 0; + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts index 577738dbdb..13510dcd93 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts @@ -38,6 +38,9 @@ import { LabelWidgetSettingsComponent } from '@home/components/widget/lib/settin import { SimpleCardWidgetSettingsComponent } from '@home/components/widget/lib/settings/simple-card-widget-settings.component'; +import { + DashboardStateWidgetSettingsComponent +} from '@home/components/widget/lib/settings/dashboard-state-widget-settings.component'; @NgModule({ declarations: [ @@ -49,7 +52,8 @@ import { LabelWidgetFontComponent, LabelWidgetLabelComponent, LabelWidgetSettingsComponent, - SimpleCardWidgetSettingsComponent + SimpleCardWidgetSettingsComponent, + DashboardStateWidgetSettingsComponent ], imports: [ CommonModule, @@ -65,7 +69,8 @@ import { LabelWidgetFontComponent, LabelWidgetLabelComponent, LabelWidgetSettingsComponent, - SimpleCardWidgetSettingsComponent + SimpleCardWidgetSettingsComponent, + DashboardStateWidgetSettingsComponent ] }) export class WidgetSettingsModule { @@ -78,5 +83,6 @@ export const widgetSettingsComponentsMap: {[key: string]: Type Date: Sat, 2 Apr 2022 18:54:48 +0300 Subject: [PATCH 08/66] UI: Add entities hierarchy widget settings form --- .../json/system/widget_bundles/cards.json | 7 +- ...s-hierarchy-widget-settings.component.html | 74 +++++++++++++++++++ ...ies-hierarchy-widget-settings.component.ts | 64 ++++++++++++++++ .../lib/settings/widget-settings.module.ts | 12 ++- .../assets/locale/locale.constant-en_US.json | 13 ++++ 5 files changed, 164 insertions(+), 6 deletions(-) create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-hierarchy-widget-settings.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-hierarchy-widget-settings.component.ts diff --git a/application/src/main/data/json/system/widget_bundles/cards.json b/application/src/main/data/json/system/widget_bundles/cards.json index 05a008080e..aa7c991d52 100644 --- a/application/src/main/data/json/system/widget_bundles/cards.json +++ b/application/src/main/data/json/system/widget_bundles/cards.json @@ -151,9 +151,10 @@ "templateHtml": "\n", "templateCss": "", "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n self.ctx.$scope.entitiesHierarchyWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n return {\n dataKeysOptional: true\n };\n}\n\nself.actionSources = function() {\n return {\n 'nodeSelected': {\n name: 'widget-action.node-selected',\n multiple: false\n }\n };\n}\n\nself.onDestroy = function() {\n}\n", - "settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"EntitiesHierarchySettings\",\n \"properties\": {\n \"nodeRelationQueryFunction\": {\n \"title\": \"Node relations query function: f(nodeCtx)\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"nodeHasChildrenFunction\": {\n \"title\": \"Node has children function: f(nodeCtx)\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"nodeOpenedFunction\": {\n \"title\": \"Default node opened function: f(nodeCtx)\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"nodeDisabledFunction\": {\n \"title\": \"Node disabled function: f(nodeCtx)\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"nodeIconFunction\": {\n \"title\": \"Node icon function: f(nodeCtx)\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"nodeTextFunction\": {\n \"title\": \"Node text function: f(nodeCtx)\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"nodesSortFunction\": {\n \"title\": \"Nodes sort function: f(nodeCtx1, nodeCtx2)\",\n \"type\": \"string\",\n \"default\": \"\"\n }\n },\n \"required\": []\n },\n \"form\": [\n {\n \"key\": \"nodeRelationQueryFunction\",\n \"type\": \"javascript\",\n \"helpId\": \"widget/lib/entities_hierarchy/node_relation_query_fn\"\n },\n {\n \"key\": \"nodeHasChildrenFunction\",\n \"type\": \"javascript\",\n \"helpId\": \"widget/lib/entities_hierarchy/node_has_children_fn\"\n },\n {\n \"key\": \"nodeOpenedFunction\",\n \"type\": \"javascript\",\n \"helpId\": \"widget/lib/entities_hierarchy/node_opened_fn\"\n },\n {\n \"key\": \"nodeDisabledFunction\",\n \"type\": \"javascript\",\n \"helpId\": \"widget/lib/entities_hierarchy/node_disabled_fn\"\n },\n {\n \"key\": \"nodeIconFunction\",\n \"type\": \"javascript\",\n \"helpId\": \"widget/lib/entities_hierarchy/node_icon_fn\"\n },\n {\n \"key\": \"nodeTextFunction\",\n \"type\": \"javascript\",\n \"helpId\": \"widget/lib/entities_hierarchy/node_text_fn\"\n },\n {\n \"key\": \"nodesSortFunction\",\n \"type\": \"javascript\",\n \"helpId\": \"widget/lib/entities_hierarchy/nodes_sort_fn\"\n }\n ]\n}", - "dataKeySettingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"DataKeySettings\",\n \"properties\": {},\n \"required\": []\n },\n \"form\": []\n}", - "defaultConfig": "{\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":86400000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"4px\",\"settings\":{\"nodeRelationQueryFunction\":\"/**\\n\\n// Function should return relations query object for current node used to fetch entity children.\\n// Function can return 'default' string value. In this case default relations query will be used.\\n\\n// The following example code will construct simple relations query that will fetch relations of type 'Contains'\\n// from the current entity.\\n\\nvar entity = nodeCtx.entity;\\nvar query = {\\n parameters: {\\n rootId: entity.id.id,\\n rootType: entity.id.entityType,\\n direction: \\\"FROM\\\",\\n maxLevel: 1\\n },\\n filters: [{\\n relationType: \\\"Contains\\\",\\n entityTypes: []\\n }]\\n};\\nreturn query;\\n\\n**/\\n\",\"nodeHasChildrenFunction\":\"/**\\n\\n// Function should return boolean value indicating whether current node has children (whether it can be expanded).\\n\\n// The following example code will restrict entities hierarchy expansion up to third level.\\n\\nreturn nodeCtx.level <= 2;\\n\\n// The next example code will restrict entities expansion according to the value of example 'nodeHasChildren' attribute.\\n\\nvar data = nodeCtx.data;\\nif (data.hasOwnProperty('nodeHasChildren') && data['nodeHasChildren'] !== null) {\\n return data['nodeHasChildren'] === 'true';\\n} else {\\n return true;\\n}\\n \\n**/\\n \",\"nodeTextFunction\":\"/**\\n\\n// Function should return text (can be HTML code) for the current node.\\n\\n// The following example code will generate node text consisting of entity name and temperature if temperature value is present in entity attributes/timeseries.\\n\\nvar data = nodeCtx.data;\\nvar entity = nodeCtx.entity;\\nvar text = entity.name;\\nif (data.hasOwnProperty('temperature') && data['temperature'] !== null) {\\n text += \\\" \\\"+ data['temperature'] +\\\" °C\\\";\\n}\\nreturn text;\\n\\n**/\",\"nodeIconFunction\":\"/** \\n\\n// Function should return node icon info object.\\n// Resulting object should contain either 'materialIcon' or 'iconUrl' property. \\n// Where:\\n - 'materialIcon' - name of the material icon to be used from the Material Icons Library (https://material.io/tools/icons);\\n - 'iconUrl' - url of the external image to be used as node icon.\\n// Function can return 'default' string value. In this case default icons according to entity type will be used.\\n\\n// The following example code shows how to use external image for devices which name starts with 'Test' and use \\n// default icons for the rest of entities.\\n\\nvar entity = nodeCtx.entity;\\nif (entity.id.entityType === 'DEVICE' && entity.name.startsWith('Test')) {\\n return {iconUrl: 'https://avatars1.githubusercontent.com/u/14793288?v=4&s=117'};\\n} else {\\n return 'default';\\n}\\n \\n**/\",\"nodeDisabledFunction\":\"/**\\n\\n// Function should return boolean value indicating whether current node should be disabled (not selectable).\\n\\n// The following example code will disable current node according to the value of example 'nodeDisabled' attribute.\\n\\nvar data = nodeCtx.data;\\nif (data.hasOwnProperty('nodeDisabled') && data['nodeDisabled'] !== null) {\\n return data['nodeDisabled'] === 'true';\\n} else {\\n return false;\\n}\\n \\n**/\\n\",\"nodesSortFunction\":\"/**\\n\\n// This function is used to sort nodes of the same level. Function should compare two nodes and return \\n// integer value: \\n// - less than 0 - sort nodeCtx1 to an index lower than nodeCtx2\\n// - 0 - leave nodeCtx1 and nodeCtx2 unchanged with respect to each other\\n// - greater than 0 - sort nodeCtx2 to an index lower than nodeCtx1\\n\\n// The following example code will sort entities first by entity type in alphabetical order then\\n// by entity name in alphabetical order.\\n\\nvar result = nodeCtx1.entity.id.entityType.localeCompare(nodeCtx2.entity.id.entityType);\\nif (result === 0) {\\n result = nodeCtx1.entity.name.localeCompare(nodeCtx2.entity.name);\\n}\\nreturn result;\\n \\n**/\",\"nodeOpenedFunction\":\"/**\\n\\n// Function should return boolean value indicating whether current node should be opened (expanded) when it first loaded.\\n\\n// The following example code will open by default nodes up to third level.\\n\\nreturn nodeCtx.level <= 2;\\n\\n**/\\n \"},\"title\":\"Entities hierarchy\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"datasources\":[{\"type\":\"function\",\"name\":\"Simulated\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Sin\",\"color\":\"#2196f3\",\"settings\":{\"columnWidth\":\"0px\",\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.472295003170325,\"funcBody\":\"return Math.round(1000*Math.sin(time/5000));\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Cos\",\"color\":\"#4caf50\",\"settings\":{\"columnWidth\":\"0px\",\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.8926244886945558,\"funcBody\":\"return Math.round(1000*Math.cos(time/5000));\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#f44336\",\"settings\":{\"columnWidth\":\"0px\",\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.6401141393938932,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"widgetStyle\":{},\"actions\":{}}" + "settingsSchema": "", + "dataKeySettingsSchema": "", + "settingsDirective": "tb-entities-hierarchy-widget-settings", + "defaultConfig": "{\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":86400000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"4px\",\"settings\":{\"nodeRelationQueryFunction\":\"var entity = nodeCtx.entity;\\nvar query = {\\n parameters: {\\n rootId: entity.id.id,\\n rootType: entity.id.entityType,\\n direction: \\\"FROM\\\",\\n maxLevel: 1\\n },\\n filters: [{\\n relationType: \\\"Contains\\\",\\n entityTypes: []\\n }]\\n};\\nreturn query;\\n\\n/**\\n\\n// Function should return relations query object for current node used to fetch entity children.\\n// Function can return 'default' string value. In this case default relations query will be used.\\n\\n// The following example code will construct simple relations query that will fetch relations of type 'Contains'\\n// from the current entity.\\n\\nvar entity = nodeCtx.entity;\\nvar query = {\\n parameters: {\\n rootId: entity.id.id,\\n rootType: entity.id.entityType,\\n direction: \\\"FROM\\\",\\n maxLevel: 1\\n },\\n filters: [{\\n relationType: \\\"Contains\\\",\\n entityTypes: []\\n }]\\n};\\nreturn query;\\n\\n**/\\n\",\"nodeHasChildrenFunction\":\"/**\\n\\n// Function should return boolean value indicating whether current node has children (whether it can be expanded).\\n\\n// The following example code will restrict entities hierarchy expansion up to third level.\\n\\nreturn nodeCtx.level <= 2;\\n\\n// The next example code will restrict entities expansion according to the value of example 'nodeHasChildren' attribute.\\n\\nvar data = nodeCtx.data;\\nif (data.hasOwnProperty('nodeHasChildren') && data['nodeHasChildren'] !== null) {\\n return data['nodeHasChildren'] === 'true';\\n} else {\\n return true;\\n}\\n \\n**/\\n \",\"nodeOpenedFunction\":\"/**\\n\\n// Function should return boolean value indicating whether current node should be opened (expanded) when it first loaded.\\n\\n// The following example code will open by default nodes up to third level.\\n\\nreturn nodeCtx.level <= 2;\\n\\n**/\\n \",\"nodeDisabledFunction\":\"/**\\n\\n// Function should return boolean value indicating whether current node should be disabled (not selectable).\\n\\n// The following example code will disable current node according to the value of example 'nodeDisabled' attribute.\\n\\nvar data = nodeCtx.data;\\nif (data.hasOwnProperty('nodeDisabled') && data['nodeDisabled'] !== null) {\\n return data['nodeDisabled'] === 'true';\\n} else {\\n return false;\\n}\\n \\n**/\\n\",\"nodeIconFunction\":\"/** \\n\\n// Function should return node icon info object.\\n// Resulting object should contain either 'materialIcon' or 'iconUrl' property. \\n// Where:\\n - 'materialIcon' - name of the material icon to be used from the Material Icons Library (https://material.io/tools/icons);\\n - 'iconUrl' - url of the external image to be used as node icon.\\n// Function can return 'default' string value. In this case default icons according to entity type will be used.\\n\\n// The following example code shows how to use external image for devices which name starts with 'Test' and use \\n// default icons for the rest of entities.\\n\\nvar entity = nodeCtx.entity;\\nif (entity.id.entityType === 'DEVICE' && entity.name.startsWith('Test')) {\\n return {iconUrl: 'https://avatars1.githubusercontent.com/u/14793288?v=4&s=117'};\\n} else {\\n return 'default';\\n}\\n \\n**/\",\"nodeTextFunction\":\"/**\\n\\n// Function should return text (can be HTML code) for the current node.\\n\\n// The following example code will generate node text consisting of entity name and temperature if temperature value is present in entity attributes/timeseries.\\n\\nvar data = nodeCtx.data;\\nvar entity = nodeCtx.entity;\\nvar text = entity.name;\\nif (data.hasOwnProperty('temperature') && data['temperature'] !== null) {\\n text += \\\" \\\"+ data['temperature'] +\\\" °C\\\";\\n}\\nreturn text;\\n\\n**/\",\"nodesSortFunction\":\"/**\\n\\n// This function is used to sort nodes of the same level. Function should compare two nodes and return \\n// integer value: \\n// - less than 0 - sort nodeCtx1 to an index lower than nodeCtx2\\n// - 0 - leave nodeCtx1 and nodeCtx2 unchanged with respect to each other\\n// - greater than 0 - sort nodeCtx2 to an index lower than nodeCtx1\\n\\n// The following example code will sort entities first by entity type in alphabetical order then\\n// by entity name in alphabetical order.\\n\\nvar result = nodeCtx1.entity.id.entityType.localeCompare(nodeCtx2.entity.id.entityType);\\nif (result === 0) {\\n result = nodeCtx1.entity.name.localeCompare(nodeCtx2.entity.name);\\n}\\nreturn result;\\n \\n**/\"},\"title\":\"Entities hierarchy\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"datasources\":[{\"type\":\"function\",\"name\":\"Simulated\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Sin\",\"color\":\"#2196f3\",\"settings\":{\"columnWidth\":\"0px\",\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.472295003170325,\"funcBody\":\"return Math.round(1000*Math.sin(time/5000));\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Cos\",\"color\":\"#4caf50\",\"settings\":{\"columnWidth\":\"0px\",\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.8926244886945558,\"funcBody\":\"return Math.round(1000*Math.cos(time/5000));\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#f44336\",\"settings\":{\"columnWidth\":\"0px\",\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.6401141393938932,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"widgetStyle\":{},\"actions\":{}}" } }, { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-hierarchy-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-hierarchy-widget-settings.component.html new file mode 100644 index 0000000000..2a2f16d581 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-hierarchy-widget-settings.component.html @@ -0,0 +1,74 @@ + +
+
+ widgets.entities-hierarchy.hierarchy-data-settings + + + + +
+
+ widgets.entities-hierarchy.node-state-settings + + + + +
+
+ widgets.entities-hierarchy.display-settings + + + + +
+
+ widgets.entities-hierarchy.sort-settings + + +
+
+ diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-hierarchy-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-hierarchy-widget-settings.component.ts new file mode 100644 index 0000000000..c0757b4904 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-hierarchy-widget-settings.component.ts @@ -0,0 +1,64 @@ +/// +/// 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 { FormBuilder, FormGroup } from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; + +@Component({ + selector: 'tb-entities-hierarchy-widget-settings', + templateUrl: './entities-hierarchy-widget-settings.component.html', + styleUrls: ['./widget-settings.scss'] +}) +export class EntitiesHierarchyWidgetSettingsComponent extends WidgetSettingsComponent { + + entitiesHierarchyWidgetSettingsForm: FormGroup; + + constructor(protected store: Store, + private fb: FormBuilder) { + super(store); + } + + protected settingsForm(): FormGroup { + return this.entitiesHierarchyWidgetSettingsForm; + } + + protected defaultSettings(): WidgetSettings { + return { + nodeRelationQueryFunction: '', + nodeHasChildrenFunction: '', + nodeOpenedFunction: '', + nodeDisabledFunction: '', + nodeIconFunction: '', + nodeTextFunction: '', + nodesSortFunction: '', + }; + } + + protected onSettingsSet(settings: WidgetSettings) { + this.entitiesHierarchyWidgetSettingsForm = this.fb.group({ + nodeRelationQueryFunction: [settings.nodeRelationQueryFunction, []], + nodeHasChildrenFunction: [settings.nodeHasChildrenFunction, []], + nodeOpenedFunction: [settings.nodeOpenedFunction, []], + nodeDisabledFunction: [settings.nodeDisabledFunction, []], + nodeIconFunction: [settings.nodeIconFunction, []], + nodeTextFunction: [settings.nodeTextFunction, []], + nodesSortFunction: [settings.nodesSortFunction, []] + }); + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts index 13510dcd93..009e0fd3f7 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts @@ -41,6 +41,9 @@ import { import { DashboardStateWidgetSettingsComponent } from '@home/components/widget/lib/settings/dashboard-state-widget-settings.component'; +import { + EntitiesHierarchyWidgetSettingsComponent +} from '@home/components/widget/lib/settings/entities-hierarchy-widget-settings.component'; @NgModule({ declarations: [ @@ -53,7 +56,8 @@ import { LabelWidgetLabelComponent, LabelWidgetSettingsComponent, SimpleCardWidgetSettingsComponent, - DashboardStateWidgetSettingsComponent + DashboardStateWidgetSettingsComponent, + EntitiesHierarchyWidgetSettingsComponent ], imports: [ CommonModule, @@ -70,7 +74,8 @@ import { LabelWidgetLabelComponent, LabelWidgetSettingsComponent, SimpleCardWidgetSettingsComponent, - DashboardStateWidgetSettingsComponent + DashboardStateWidgetSettingsComponent, + EntitiesHierarchyWidgetSettingsComponent ] }) export class WidgetSettingsModule { @@ -84,5 +89,6 @@ export const widgetSettingsComponentsMap: {[key: string]: Type Date: Mon, 4 Apr 2022 13:14:41 +0300 Subject: [PATCH 09/66] UI: Add HTML card/HTML value card widget settings form --- .../json/system/widget_bundles/cards.json | 10 +- .../html-card-widget-settings.component.html | 25 +++ .../html-card-widget-settings.component.ts | 54 +++++ .../qrcode-widget-settings.component.html | 3 +- .../qrcode-widget-settings.component.ts | 2 +- .../lib/settings/widget-settings.module.ts | 12 +- .../app/shared/components/css.component.html | 2 +- .../app/shared/components/css.component.ts | 6 +- .../app/shared/components/html.component.html | 41 ++++ .../app/shared/components/html.component.scss | 65 ++++++ .../app/shared/components/html.component.ts | 211 ++++++++++++++++++ .../shared/components/js-func.component.html | 8 +- .../shared/components/js-func.component.ts | 9 +- .../components/markdown-editor.component.html | 2 +- ui-ngx/src/app/shared/shared.module.ts | 3 + .../assets/locale/locale.constant-en_US.json | 4 + 16 files changed, 440 insertions(+), 17 deletions(-) create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/html-card-widget-settings.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/html-card-widget-settings.component.ts create mode 100644 ui-ngx/src/app/shared/components/html.component.html create mode 100644 ui-ngx/src/app/shared/components/html.component.scss create mode 100644 ui-ngx/src/app/shared/components/html.component.ts diff --git a/application/src/main/data/json/system/widget_bundles/cards.json b/application/src/main/data/json/system/widget_bundles/cards.json index aa7c991d52..7a83eb1fe1 100644 --- a/application/src/main/data/json/system/widget_bundles/cards.json +++ b/application/src/main/data/json/system/widget_bundles/cards.json @@ -37,8 +37,9 @@ "templateHtml": "", "templateCss": "", "controllerScript": "self.onInit = function() {\n var $injector = self.ctx.$scope.$injector;\n var utils = $injector.get(self.ctx.servicesMap.get('utils'));\n\n var cssParser = new cssjs();\n cssParser.testMode = false;\n var namespace = 'html-card-' + hashCode(self.ctx.settings.cardCss);\n cssParser.cssPreviewNamespace = namespace;\n cssParser.createStyleElement(namespace, self.ctx.settings.cardCss);\n self.ctx.$container.addClass(namespace);\n var evtFnPrefix = 'htmlCard_' + Math.abs(hashCode(self.ctx.settings.cardCss + self.ctx.settings.cardHtml + self.ctx.widget.id));\n cardHtml = '
' + \n self.ctx.settings.cardHtml + \n '
';\n cardHtml = replaceCustomTranslations(cardHtml);\n self.ctx.$container.html(cardHtml);\n\n window[evtFnPrefix + '_onClickFn'] = function (event) {\n self.ctx.actionsApi.elementClick(event);\n }\n\n function hashCode(str) {\n var hash = 0;\n var i, char;\n if (str.length === 0) return hash;\n for (i = 0; i < str.length; i++) {\n char = str.charCodeAt(i);\n hash = ((hash << 5) - hash) + char;\n hash = hash & hash;\n }\n return hash;\n }\n \n function replaceCustomTranslations (pattern) {\n var customTranslationRegex = new RegExp('{i18n:[^{}]+}', 'g');\n pattern = pattern.replace(customTranslationRegex, getTranslationText);\n return pattern;\n }\n \n function getTranslationText (variable) {\n return utils.customTranslation(variable, variable);\n \n }\n}\n\nself.actionSources = function() {\n return {\n 'elementClick': {\n name: 'widget-action.element-click',\n multiple: true\n }\n };\n}\n\nself.onDestroy = function() {\n}\n", - "settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"Settings\",\n \"required\": [\"cardHtml\"],\n \"properties\": {\n \"cardCss\": {\n \"title\": \"CSS\",\n \"type\": \"string\",\n \"default\": \".card {\\n font-weight: bold; \\n}\"\n },\n \"cardHtml\": {\n \"title\": \"HTML\",\n \"type\": \"string\",\n \"default\": \"
HTML code here
\"\n }\n }\n },\n \"form\": [\n {\n \"key\": \"cardCss\",\n \"type\": \"css\"\n }, \n {\n \"key\": \"cardHtml\",\n \"type\": \"html\"\n } \n ]\n}", - "dataKeySettingsSchema": "{}\n", + "settingsSchema": "", + "dataKeySettingsSchema": "", + "settingsDirective": "tb-html-card-widget-settings", "defaultConfig": "{\"datasources\":[{\"type\":\"static\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"cardHtml\":\"
HTML code here
\",\"cardCss\":\".card {\\n font-weight: bold;\\n font-size: 32px;\\n color: #999;\\n width: 100%;\\n height: 100%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\"},\"title\":\"HTML Card\",\"dropShadow\":true}" } }, @@ -77,8 +78,9 @@ "templateHtml": "", "templateCss": "", "controllerScript": "self.onInit = function() {\n self.ctx.varsRegex = /\\$\\{([^\\}]*)\\}/g;\n self.ctx.htmlSet = false;\n \n var cssParser = new cssjs();\n cssParser.testMode = false;\n var namespace = 'html-value-card-' + hashCode(self.ctx.settings.cardCss);\n cssParser.cssPreviewNamespace = namespace;\n cssParser.createStyleElement(namespace, self.ctx.settings.cardCss);\n self.ctx.$container.addClass(namespace);\n var evtFnPrefix = 'htmlValueCard_' + Math.abs(hashCode(self.ctx.settings.cardCss + self.ctx.settings.cardHtml + self.ctx.widget.id));\n self.ctx.html = '
' + \n self.ctx.settings.cardHtml + \n '
';\n\n self.ctx.replaceInfo = processHtmlPattern(self.ctx.html, self.ctx.data);\n \n updateHtml();\n \n window[evtFnPrefix + '_onClickFn'] = function (event) {\n self.ctx.actionsApi.elementClick(event);\n }\n\n function hashCode(str) {\n var hash = 0;\n var i, char;\n if (str.length === 0) return hash;\n for (i = 0; i < str.length; i++) {\n char = str.charCodeAt(i);\n hash = ((hash << 5) - hash) + char;\n hash = hash & hash;\n }\n return hash;\n }\n \n function processHtmlPattern(pattern, data) {\n var match = self.ctx.varsRegex.exec(pattern);\n var replaceInfo = {};\n replaceInfo.variables = [];\n while (match !== null) {\n var variableInfo = {};\n variableInfo.dataKeyIndex = -1;\n var variable = match[0];\n var label = match[1];\n var valDec = 2;\n var splitVals = label.split(':');\n if (splitVals.length > 1) {\n label = splitVals[0];\n valDec = parseFloat(splitVals[1]);\n }\n variableInfo.variable = variable;\n variableInfo.valDec = valDec;\n if (label == 'entityName') {\n variableInfo.isEntityName = true;\n } else if (label == 'entityLabel') {\n variableInfo.isEntityLabel = true;\n } else if (label.startsWith('#')) {\n var keyIndexStr = label.substring(1);\n var n = Math.floor(Number(keyIndexStr));\n if (String(n) === keyIndexStr && n >= 0) {\n variableInfo.dataKeyIndex = n;\n }\n }\n if (!variableInfo.isEntityName && !variableInfo.isEntityLabel && variableInfo.dataKeyIndex === -1) {\n for (var i = 0; i < data.length; i++) {\n var datasourceData = data[i];\n var dataKey = datasourceData.dataKey;\n if (dataKey.label === label) {\n variableInfo.dataKeyIndex = i;\n break;\n }\n }\n }\n replaceInfo.variables.push(variableInfo);\n match = self.ctx.varsRegex.exec(pattern);\n }\n return replaceInfo;\n } \n}\n\nself.onDataUpdated = function() {\n updateHtml();\n}\n\nself.actionSources = function() {\n return {\n 'elementClick': {\n name: 'widget-action.element-click',\n multiple: true\n }\n };\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n singleEntity: true,\n dataKeysOptional: true\n };\n}\n\n\nself.onDestroy = function() {\n}\n\nfunction isNumber(n) {\n return !isNaN(parseFloat(n)) && isFinite(n);\n}\n\nfunction padValue(val, dec, int) {\n var i = 0;\n var s, strVal, n;\n\n val = parseFloat(val);\n n = (val < 0);\n val = Math.abs(val);\n\n if (dec > 0) {\n strVal = val.toFixed(dec).toString().split('.');\n s = int - strVal[0].length;\n\n for (; i < s; ++i) {\n strVal[0] = '0' + strVal[0];\n }\n\n strVal = (n ? '-' : '') + strVal[0] + '.' + strVal[1];\n }\n\n else {\n strVal = Math.round(val).toString();\n s = int - strVal.length;\n\n for (; i < s; ++i) {\n strVal = '0' + strVal;\n }\n\n strVal = (n ? '-' : '') + strVal;\n }\n\n return strVal;\n}\n\nfunction updateHtml() {\n var $injector = self.ctx.$scope.$injector;\n var utils = $injector.get(self.ctx.servicesMap.get('utils'));\n var text = self.ctx.html;\n var updated = false;\n for (var v in self.ctx.replaceInfo.variables) {\n var variableInfo = self.ctx.replaceInfo.variables[v];\n var txtVal = '';\n if (variableInfo.dataKeyIndex > -1) {\n var varData = self.ctx.data[variableInfo.dataKeyIndex].data;\n if (varData.length > 0) {\n var val = varData[varData.length-1][1];\n if (isNumber(val)) {\n txtVal = padValue(val, variableInfo.valDec, 0);\n } else {\n txtVal = val;\n }\n }\n } else if (variableInfo.isEntityName) {\n if (self.ctx.defaultSubscription.datasources.length) {\n txtVal = self.ctx.defaultSubscription.datasources[0].entityName;\n } else {\n txtVal = 'Unknown';\n }\n } else if (variableInfo.isEntityLabel) {\n if (self.ctx.defaultSubscription.datasources.length) {\n txtVal = self.ctx.defaultSubscription.datasources[0].entityLabel || self.ctx.defaultSubscription.datasources[0].entityName;\n } else {\n txtVal = 'Unknown';\n }\n }\n if (typeof variableInfo.lastVal === undefined ||\n variableInfo.lastVal !== txtVal) {\n updated = true;\n variableInfo.lastVal = txtVal;\n }\n text = text.split(variableInfo.variable).join(txtVal);\n }\n if (updated || !self.ctx.htmlSet) {\n text = replaceCustomTranslations(text);\n self.ctx.$container.html(text);\n if (!self.ctx.htmlSet) {\n self.ctx.htmlSet = true;\n }\n }\n \n function replaceCustomTranslations (pattern) {\n var customTranslationRegex = new RegExp('{i18n:[^{}]+}', 'g');\n pattern = pattern.replace(customTranslationRegex, getTranslationText);\n return pattern;\n }\n \n function getTranslationText (variable) {\n return utils.customTranslation(variable, variable);\n \n }\n}\n\n", - "settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"Settings\",\n \"required\": [\"cardHtml\"],\n \"properties\": {\n \"cardCss\": {\n \"title\": \"CSS\",\n \"type\": \"string\",\n \"default\": \".card {\\n font-weight: bold; \\n}\"\n },\n \"cardHtml\": {\n \"title\": \"HTML\",\n \"type\": \"string\",\n \"default\": \"
HTML code here
\"\n }\n }\n },\n \"form\": [\n {\n \"key\": \"cardCss\",\n \"type\": \"css\"\n }, \n {\n \"key\": \"cardHtml\",\n \"type\": \"html\"\n } \n ]\n}", - "dataKeySettingsSchema": "{}\n", + "settingsSchema": "", + "dataKeySettingsSchema": "", + "settingsDirective": "tb-html-card-widget-settings", "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"My value\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"return Math.random() * 5.45;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"cardCss\":\".card {\\n width: 100%;\\n height: 100%;\\n border: 2px solid #ccc;\\n box-sizing: border-box;\\n}\\n\\n.card .content {\\n padding: 20px;\\n display: flex;\\n flex-direction: row;\\n align-items: center;\\n justify-content: space-around;\\n height: 100%;\\n box-sizing: border-box;\\n}\\n\\n.card .content .column {\\n display: flex;\\n flex-direction: column; \\n justify-content: space-around;\\n height: 100%;\\n}\\n\\n.card h1 {\\n text-transform: uppercase;\\n color: #999;\\n font-size: 20px;\\n font-weight: bold;\\n margin: 0;\\n padding-bottom: 10px;\\n line-height: 32px;\\n}\\n\\n.card .value {\\n font-size: 38px;\\n font-weight: 200;\\n}\\n\\n.card .description {\\n font-size: 20px;\\n color: #999;\\n}\\n\",\"cardHtml\":\"
\\n
\\n
\\n

Value title

\\n
\\n ${My value:2} units.\\n
\\n
\\n Value description text\\n
\\n
\\n \\n
\\n
\"},\"title\":\"HTML Value Card\",\"dropShadow\":false,\"enableFullscreen\":true,\"widgetStyle\":{},\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"useDashboardTimewindow\":true,\"showLegend\":false,\"actions\":{}}" } }, diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/html-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/html-card-widget-settings.component.html new file mode 100644 index 0000000000..c95d3a8b98 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/html-card-widget-settings.component.html @@ -0,0 +1,25 @@ + +
+ + + + +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/html-card-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/html-card-widget-settings.component.ts new file mode 100644 index 0000000000..1dc0f398e0 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/html-card-widget-settings.component.ts @@ -0,0 +1,54 @@ +/// +/// 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 { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; + +@Component({ + selector: 'tb-html-card-widget-settings', + templateUrl: './html-card-widget-settings.component.html', + styleUrls: [] +}) +export class HtmlCardWidgetSettingsComponent extends WidgetSettingsComponent { + + htmlCardWidgetSettingsForm: FormGroup; + + constructor(protected store: Store, + private fb: FormBuilder) { + super(store); + } + + protected settingsForm(): FormGroup { + return this.htmlCardWidgetSettingsForm; + } + + protected defaultSettings(): WidgetSettings { + return { + cardHtml: '
HTML code here
', + cardCss: '.card {\n font-weight: bold; \n}' + }; + } + + protected onSettingsSet(settings: WidgetSettings) { + this.htmlCardWidgetSettingsForm = this.fb.group({ + cardHtml: [settings.cardHtml, [Validators.required]], + cardCss: [settings.cardCss, []] + }); + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.html index c38207c717..715d1f1fe6 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.html @@ -26,7 +26,8 @@ {{ 'widgets.qr-code.qr-code-text-pattern-required' | translate }} -
- + +
+
+ +
+
+
+
+
+
+ diff --git a/ui-ngx/src/app/shared/components/html.component.scss b/ui-ngx/src/app/shared/components/html.component.scss new file mode 100644 index 0000000000..585dca667a --- /dev/null +++ b/ui-ngx/src/app/shared/components/html.component.scss @@ -0,0 +1,65 @@ +/** + * 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. + */ +.tb-html { + position: relative; + + &.tb-disabled { + color: rgba(0, 0, 0, .38); + } + + &.fill-height { + height: 100%; + } + + .tb-html-content-panel { + height: calc(100% - 40px); + border: 1px solid #c0c0c0; + + #tb-html-input { + width: 100%; + min-width: 200px; + height: 100%; + + &:not(.fill-height) { + min-height: 200px; + } + } + } + + .tb-html-toolbar { + & > * { + &:not(:last-child) { + margin-right: 4px; + } + } + button.mat-button, button.mat-icon-button, button.mat-icon-button.tb-mat-32 { + background: rgba(220, 220, 220, .35); + align-items: center; + vertical-align: middle; + min-width: 32px; + min-height: 15px; + padding: 4px; + font-size: .8rem; + line-height: 15px; + &:not(.tb-help-popup-button) { + color: #7b7b7b; + } + } + .tb-help-popup-button-loading { + background: #f3f3f3; + } + } +} diff --git a/ui-ngx/src/app/shared/components/html.component.ts b/ui-ngx/src/app/shared/components/html.component.ts new file mode 100644 index 0000000000..696873507c --- /dev/null +++ b/ui-ngx/src/app/shared/components/html.component.ts @@ -0,0 +1,211 @@ +/// +/// 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 { + ChangeDetectorRef, + Component, + ElementRef, + forwardRef, + Input, + OnDestroy, + OnInit, + ViewChild, + ViewEncapsulation +} from '@angular/core'; +import { ControlValueAccessor, FormControl, NG_VALIDATORS, NG_VALUE_ACCESSOR, Validator } from '@angular/forms'; +import { Ace } from 'ace-builds'; +import { getAce } from '@shared/models/ace/ace.models'; +import { coerceBooleanProperty } from '@angular/cdk/coercion'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { UtilsService } from '@core/services/utils.service'; +import { TranslateService } from '@ngx-translate/core'; +import { CancelAnimationFrame, RafService } from '@core/services/raf.service'; +import { ResizeObserver } from '@juggle/resize-observer'; +import { beautifyHtml } from '@shared/models/beautify.models'; + +@Component({ + selector: 'tb-html', + templateUrl: './html.component.html', + styleUrls: ['./html.component.scss'], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => HtmlComponent), + multi: true + }, + { + provide: NG_VALIDATORS, + useExisting: forwardRef(() => HtmlComponent), + multi: true, + } + ], + encapsulation: ViewEncapsulation.None +}) +export class HtmlComponent implements OnInit, OnDestroy, ControlValueAccessor, Validator { + + @ViewChild('htmlEditor', {static: true}) + htmlEditorElmRef: ElementRef; + + private htmlEditor: Ace.Editor; + private editorsResizeCaf: CancelAnimationFrame; + private editorResize$: ResizeObserver; + private ignoreChange = false; + + @Input() label: string; + + @Input() disabled: boolean; + + @Input() fillHeight: boolean; + + private requiredValue: boolean; + get required(): boolean { + return this.requiredValue; + } + @Input() + set required(value: boolean) { + this.requiredValue = coerceBooleanProperty(value); + } + + fullscreen = false; + + modelValue: string; + + hasErrors = false; + + private propagateChange = null; + + constructor(public elementRef: ElementRef, + private utils: UtilsService, + private translate: TranslateService, + protected store: Store, + private raf: RafService, + private cd: ChangeDetectorRef) { + } + + ngOnInit(): void { + const editorElement = this.htmlEditorElmRef.nativeElement; + let editorOptions: Partial = { + mode: 'ace/mode/html', + showGutter: true, + showPrintMargin: true, + readOnly: this.disabled + }; + + const advancedOptions = { + enableSnippets: true, + enableBasicAutocompletion: true, + enableLiveAutocompletion: true + }; + + editorOptions = {...editorOptions, ...advancedOptions}; + getAce().subscribe( + (ace) => { + this.htmlEditor = ace.edit(editorElement, editorOptions); + this.htmlEditor.session.setUseWrapMode(true); + this.htmlEditor.setValue(this.modelValue ? this.modelValue : '', -1); + this.htmlEditor.setReadOnly(this.disabled); + this.htmlEditor.on('change', () => { + if (!this.ignoreChange) { + this.updateView(); + } + }); + // @ts-ignore + this.htmlEditor.session.on('changeAnnotation', () => { + const annotations = this.htmlEditor.session.getAnnotations(); + const hasErrors = annotations.filter(annotation => annotation.type === 'error').length > 0; + if (this.hasErrors !== hasErrors) { + this.hasErrors = hasErrors; + this.propagateChange(this.modelValue); + this.cd.markForCheck(); + } + }); + this.editorResize$ = new ResizeObserver(() => { + this.onAceEditorResize(); + }); + this.editorResize$.observe(editorElement); + } + ); + } + + ngOnDestroy(): void { + if (this.editorResize$) { + this.editorResize$.disconnect(); + } + } + + private onAceEditorResize() { + if (this.editorsResizeCaf) { + this.editorsResizeCaf(); + this.editorsResizeCaf = null; + } + this.editorsResizeCaf = this.raf.raf(() => { + this.htmlEditor.resize(); + this.htmlEditor.renderer.updateFull(); + }); + } + + registerOnChange(fn: any): void { + this.propagateChange = fn; + } + + registerOnTouched(fn: any): void { + } + + setDisabledState(isDisabled: boolean): void { + this.disabled = isDisabled; + if (this.htmlEditor) { + this.htmlEditor.setReadOnly(this.disabled); + } + } + + public validate(c: FormControl) { + return (!this.hasErrors) ? null : { + html: { + valid: false, + }, + }; + } + + beautifyHtml() { + beautifyHtml(this.modelValue, {indent_size: 4}).subscribe( + (res) => { + if (this.modelValue !== res) { + this.htmlEditor.setValue(res ? res : '', -1); + this.updateView(); + } + } + ); + } + + writeValue(value: string): void { + this.modelValue = value; + if (this.htmlEditor) { + this.ignoreChange = true; + this.htmlEditor.setValue(this.modelValue ? this.modelValue : '', -1); + this.ignoreChange = false; + } + } + + updateView() { + const editorValue = this.htmlEditor.getValue(); + if (this.modelValue !== editorValue) { + this.modelValue = editorValue; + this.propagateChange(this.modelValue); + this.cd.markForCheck(); + } + } +} diff --git a/ui-ngx/src/app/shared/components/js-func.component.html b/ui-ngx/src/app/shared/components/js-func.component.html index a57bb6c124..093bce582d 100644 --- a/ui-ngx/src/app/shared/components/js-func.component.html +++ b/ui-ngx/src/app/shared/components/js-func.component.html @@ -19,8 +19,10 @@ tb-fullscreen [fullscreen]="fullscreen" fxLayout="column">
- - + +
- +
diff --git a/ui-ngx/src/app/shared/components/js-func.component.ts b/ui-ngx/src/app/shared/components/js-func.component.ts index be78c7480c..ce995c1f1c 100644 --- a/ui-ngx/src/app/shared/components/js-func.component.ts +++ b/ui-ngx/src/app/shared/components/js-func.component.ts @@ -15,6 +15,7 @@ /// import { + ChangeDetectorRef, Component, ElementRef, forwardRef, @@ -125,13 +126,14 @@ export class JsFuncComponent implements OnInit, OnDestroy, ControlValueAccessor, errorAnnotationId = -1; private propagateChange = null; - private hasErrors = false; + public hasErrors = false; constructor(public elementRef: ElementRef, private utils: UtilsService, private translate: TranslateService, protected store: Store, - private raf: RafService) { + private raf: RafService, + private cd: ChangeDetectorRef) { } ngOnInit(): void { @@ -185,6 +187,7 @@ export class JsFuncComponent implements OnInit, OnDestroy, ControlValueAccessor, if (this.hasErrors !== hasErrors) { this.hasErrors = hasErrors; this.propagateChange(this.modelValue); + this.cd.markForCheck(); } }); } @@ -273,6 +276,7 @@ export class JsFuncComponent implements OnInit, OnDestroy, ControlValueAccessor, this.functionValid = this.validateJsFunc(); if (!this.functionValid) { this.propagateChange(this.modelValue); + this.cd.markForCheck(); this.store.dispatch(new ActionNotificationShow( { message: this.validationError, @@ -400,6 +404,7 @@ export class JsFuncComponent implements OnInit, OnDestroy, ControlValueAccessor, this.modelValue = editorValue; this.functionValid = true; this.propagateChange(this.modelValue); + this.cd.markForCheck(); } } } diff --git a/ui-ngx/src/app/shared/components/markdown-editor.component.html b/ui-ngx/src/app/shared/components/markdown-editor.component.html index e31ad8bc3f..53d4e95827 100644 --- a/ui-ngx/src/app/shared/components/markdown-editor.component.html +++ b/ui-ngx/src/app/shared/components/markdown-editor.component.html @@ -18,7 +18,7 @@
- +
diff --git a/ui-ngx/src/app/shared/shared.module.ts b/ui-ngx/src/app/shared/shared.module.ts index 9d3d6864fe..1222abea5a 100644 --- a/ui-ngx/src/app/shared/shared.module.ts +++ b/ui-ngx/src/app/shared/shared.module.ts @@ -159,6 +159,7 @@ import { HELP_MARKDOWN_COMPONENT_TOKEN, SHARED_MODULE_TOKEN } from '@shared/comp import { TbMarkdownComponent } from '@shared/components/markdown.component'; import { ProtobufContentComponent } from '@shared/components/protobuf-content.component'; import { CssComponent } from '@shared/components/css.component'; +import { HtmlComponent } from '@shared/components/html.component'; import { SafePipe } from '@shared/pipe/safe.pipe'; export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) { @@ -240,6 +241,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) JsonContentComponent, JsFuncComponent, CssComponent, + HtmlComponent, FabTriggerDirective, FabActionsDirective, FabToolbarComponent, @@ -389,6 +391,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) JsonContentComponent, JsFuncComponent, CssComponent, + HtmlComponent, FabTriggerDirective, FabActionsDirective, FabToolbarComponent, diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index bb722a026c..3482da92c3 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -3260,6 +3260,10 @@ "sort-settings": "Sort settings", "nodes-sort-function": "Nodes sort function" }, + "html-card": { + "html": "HTML", + "css": "CSS" + }, "input-widgets": { "attribute-not-allowed": "Attribute parameter cannot be used in this widget", "blocked-location": "Geolocation is blocked in your browser", From a735586f1ef6b5ff8de04403c13a693e3cb11e47 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Mon, 4 Apr 2022 14:07:35 +0300 Subject: [PATCH 10/66] UI: Add entities table widget and key settings form --- .../json/system/widget_bundles/cards.json | 8 +- ...entities-table-key-settings.component.html | 95 ++++++++++++++ .../entities-table-key-settings.component.ts | 86 +++++++++++++ ...ities-table-widget-settings.component.html | 116 +++++++++++++++++ ...ntities-table-widget-settings.component.ts | 118 ++++++++++++++++++ ...meseries-table-key-settings.component.html | 6 +- ...s-table-latest-key-settings.component.html | 6 +- ...eries-table-widget-settings.component.html | 3 +- .../lib/settings/widget-settings.module.ts | 18 ++- .../assets/locale/locale.constant-en_US.json | 17 ++- 10 files changed, 461 insertions(+), 12 deletions(-) create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-table-key-settings.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-table-key-settings.component.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-table-widget-settings.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-table-widget-settings.component.ts diff --git a/application/src/main/data/json/system/widget_bundles/cards.json b/application/src/main/data/json/system/widget_bundles/cards.json index 7a83eb1fe1..4930219741 100644 --- a/application/src/main/data/json/system/widget_bundles/cards.json +++ b/application/src/main/data/json/system/widget_bundles/cards.json @@ -135,9 +135,11 @@ "templateHtml": "\n", "templateCss": "", "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n self.ctx.$scope.entitiesTableWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n hasDataPageLink: true,\n warnOnPageDataOverflow: false,\n dataKeysOptional: true\n };\n}\n\nself.actionSources = function() {\n return {\n 'actionCellButton': {\n name: 'widget-action.action-cell-button',\n multiple: true,\n hasShowCondition: true\n },\n 'rowClick': {\n name: 'widget-action.row-click',\n multiple: false\n },\n 'rowDoubleClick': {\n name: 'widget-action.row-double-click',\n multiple: false\n }\n };\n}\n\nself.onDestroy = function() {\n}\n", - "settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"EntitiesTableSettings\",\n \"properties\": {\n \"entitiesTitle\": {\n \"title\": \"Entities table title\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"enableSearch\": {\n \"title\": \"Enable entities search\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableSelectColumnDisplay\": {\n \"title\": \"Enable select columns to display\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableStickyHeader\": {\n \"title\": \"Always display header\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableStickyAction\": {\n \"title\": \"Always display actions column\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"reserveSpaceForHiddenAction\": {\n \"title\": \"Hidden cell button actions display mode\",\n \"type\": \"string\",\n \"default\": \"true\"\n },\n \"displayEntityName\": {\n \"title\": \"Display entity name column\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"entityNameColumnTitle\": {\n \"title\": \"Entity name column title\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"displayEntityLabel\": {\n \"title\": \"Display entity label column\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"entityLabelColumnTitle\": {\n \"title\": \"Entity label column title\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"displayEntityType\": {\n \"title\": \"Display entity type column\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"displayPagination\": {\n \"title\": \"Display pagination\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"defaultPageSize\": {\n \"title\": \"Default page size\",\n \"type\": \"number\",\n \"default\": 10\n },\n \"defaultSortOrder\": {\n \"title\": \"Default sort order\",\n \"type\": \"string\",\n \"default\": \"entityName\"\n },\n \"useRowStyleFunction\": {\n \"title\": \"Use row style function\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"rowStyleFunction\": {\n \"title\": \"Row style function: f(entity, ctx)\",\n \"type\": \"string\",\n \"default\": \"\"\n }\n },\n \"required\": []\n },\n \"form\": [\n \"entitiesTitle\",\n \"enableSearch\",\n \"enableSelectColumnDisplay\",\n \"enableStickyHeader\",\n \"enableStickyAction\",\n {\n \"key\": \"reserveSpaceForHiddenAction\",\n \"type\": \"rc-select\",\n \"multiple\": false,\n \"items\": [\n {\n \"value\": \"true\",\n \"label\": \"Show empty space instead of hidden cell button action\"\n },\n {\n \"value\": \"false\",\n \"label\": \"Don't reserve space for hidden action buttons\"\n }\n ]\n },\n \"displayEntityName\",\n \"entityNameColumnTitle\",\n \"displayEntityLabel\",\n \"entityLabelColumnTitle\",\n \"displayEntityType\",\n \"displayPagination\",\n \"defaultPageSize\",\n \"defaultSortOrder\",\n \"useRowStyleFunction\",\n {\n \"key\": \"rowStyleFunction\",\n \"type\": \"javascript\",\n \"helpId\": \"widget/lib/entity/row_style_fn\",\n \"condition\": \"model.useRowStyleFunction === true\"\n }\n ]\n}", - "dataKeySettingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"DataKeySettings\",\n \"properties\": {\n \"columnWidth\": {\n \"title\": \"Column width (px or %)\",\n \"type\": \"string\",\n \"default\": \"0px\"\n },\n \"useCellStyleFunction\": {\n \"title\": \"Use cell style function\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"cellStyleFunction\": {\n \"title\": \"Cell style function: f(value, entity, ctx)\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"useCellContentFunction\": {\n \"title\": \"Use cell content function\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"cellContentFunction\": {\n \"title\": \"Cell content function: f(value, entity, ctx)\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"defaultColumnVisibility\": {\n \"title\": \"Default column visibility\",\n \"type\": \"string\",\n \"default\": \"visible\"\n },\n \"columnSelectionToDisplay\": {\n \"title\": \"Column selection in 'Columns to Display'\",\n \"type\": \"string\",\n \"default\": \"enabled\"\n }\n },\n \"required\": []\n },\n \"form\": [\n \"columnWidth\",\n \"useCellStyleFunction\",\n {\n \"key\": \"cellStyleFunction\",\n \"type\": \"javascript\",\n \"helpId\": \"widget/lib/entity/cell_style_fn\",\n \"condition\": \"model.useCellStyleFunction === true\"\n },\n \"useCellContentFunction\",\n {\n \"key\": \"cellContentFunction\",\n \"type\": \"javascript\",\n \"helpId\": \"widget/lib/entity/cell_content_fn\",\n \"condition\": \"model.useCellContentFunction === true\"\n },\n {\n \"key\": \"defaultColumnVisibility\",\n \"type\": \"rc-select\",\n \"multiple\": false,\n \"items\": [\n {\n \"value\": \"visible\",\n \"label\": \"Visible\"\n },\n {\n \"value\": \"hidden\",\n \"label\": \"Hidden\"\n } \n ]\n },\n {\n \"key\": \"columnSelectionToDisplay\",\n \"type\": \"rc-select\",\n \"multiple\": false,\n \"items\": [\n {\n \"value\": \"enabled\",\n \"label\": \"Enabled\"\n },\n {\n \"value\": \"disabled\",\n \"label\": \"Disabled\"\n } \n ]\n }\n ]\n}", - "defaultConfig": "{\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":86400000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"4px\",\"settings\":{\"enableSelection\":true,\"enableSearch\":true,\"displayDetails\":true,\"displayPagination\":true,\"defaultPageSize\":10,\"defaultSortOrder\":\"entityName\",\"displayEntityName\":true,\"displayEntityType\":true},\"title\":\"Entities table\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"datasources\":[{\"type\":\"function\",\"name\":\"Simulated\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Sin\",\"color\":\"#2196f3\",\"settings\":{\"columnWidth\":\"0px\",\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.472295003170325,\"funcBody\":\"return Math.round(1000*Math.sin(time/5000));\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Cos\",\"color\":\"#4caf50\",\"settings\":{\"columnWidth\":\"0px\",\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.8926244886945558,\"funcBody\":\"return Math.round(1000*Math.cos(time/5000));\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#f44336\",\"settings\":{\"columnWidth\":\"0px\",\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.6401141393938932,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}]}" + "settingsSchema": "", + "dataKeySettingsSchema": "", + "settingsDirective": "tb-entities-table-widget-settings", + "dataKeySettingsDirective": "tb-entities-table-key-settings", + "defaultConfig": "{\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":86400000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"4px\",\"settings\":{\"entitiesTitle\":\"\",\"enableSearch\":true,\"enableSelectColumnDisplay\":true,\"enableStickyHeader\":true,\"enableStickyAction\":true,\"reserveSpaceForHiddenAction\":\"true\",\"displayEntityName\":true,\"entityNameColumnTitle\":\"\",\"displayEntityLabel\":false,\"displayEntityType\":true,\"displayPagination\":true,\"defaultPageSize\":10,\"defaultSortOrder\":\"entityName\",\"useRowStyleFunction\":false},\"title\":\"Entities table\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"datasources\":[{\"type\":\"function\",\"name\":\"Simulated\",\"entityAliasId\":null,\"filterId\":null,\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Sin\",\"color\":\"#2196f3\",\"settings\":{\"columnWidth\":\"0px\",\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.472295003170325,\"funcBody\":\"return Math.round(1000*Math.sin(time/5000));\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Cos\",\"color\":\"#4caf50\",\"settings\":{\"columnWidth\":\"0px\",\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.8926244886945558,\"funcBody\":\"return Math.round(1000*Math.cos(time/5000));\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#f44336\",\"settings\":{\"columnWidth\":\"0px\",\"useCellStyleFunction\":false,\"useCellContentFunction\":false,\"defaultColumnVisibility\":\"visible\",\"columnSelectionToDisplay\":\"enabled\"},\"_hash\":0.6401141393938932,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\",\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}]}]}" } }, { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-table-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-table-key-settings.component.html new file mode 100644 index 0000000000..8714a5b820 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-table-key-settings.component.html @@ -0,0 +1,95 @@ + +
+ + widgets.table.column-width + + +
+ widgets.table.cell-style + + + + + {{ 'widgets.table.use-cell-style-function' | translate }} + + + + widget-config.advanced-settings + + + + + + + +
+
+ widgets.table.cell-content + + + + + {{ 'widgets.table.use-cell-content-function' | translate }} + + + + widget-config.advanced-settings + + + + + + + +
+ + widgets.table.default-column-visibility + + + {{ 'widgets.table.column-visibility-visible' | translate }} + + + {{ 'widgets.table.column-visibility-hidden' | translate }} + + + + + widgets.table.column-selection-to-display + + + {{ 'widgets.table.column-selection-to-display-enabled' | translate }} + + + {{ 'widgets.table.column-selection-to-display-disabled' | translate }} + + + +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-table-key-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-table-key-settings.component.ts new file mode 100644 index 0000000000..9ec2482de8 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-table-key-settings.component.ts @@ -0,0 +1,86 @@ +/// +/// 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 { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; + +@Component({ + selector: 'tb-entities-table-key-settings', + templateUrl: './entities-table-key-settings.component.html', + styleUrls: ['./widget-settings.scss'] +}) +export class EntitiesTableKeySettingsComponent extends WidgetSettingsComponent { + + entitiesTableKeySettingsForm: FormGroup; + + constructor(protected store: Store, + private fb: FormBuilder) { + super(store); + } + + protected settingsForm(): FormGroup { + return this.entitiesTableKeySettingsForm; + } + + protected defaultSettings(): WidgetSettings { + return { + columnWidth: '0px', + useCellStyleFunction: false, + cellStyleFunction: '', + useCellContentFunction: false, + cellContentFunction: '', + defaultColumnVisibility: 'visible', + columnSelectionToDisplay: 'enabled' + }; + } + + protected onSettingsSet(settings: WidgetSettings) { + this.entitiesTableKeySettingsForm = this.fb.group({ + columnWidth: [settings.columnWidth, []], + useCellStyleFunction: [settings.useCellStyleFunction, []], + cellStyleFunction: [settings.cellStyleFunction, [Validators.required]], + useCellContentFunction: [settings.useCellContentFunction, []], + cellContentFunction: [settings.cellContentFunction, [Validators.required]], + defaultColumnVisibility: [settings.defaultColumnVisibility, []], + columnSelectionToDisplay: [settings.columnSelectionToDisplay, []], + }); + } + + protected validatorTriggers(): string[] { + return ['useCellStyleFunction', 'useCellContentFunction']; + } + + protected updateValidators(emitEvent: boolean) { + const useCellStyleFunction: boolean = this.entitiesTableKeySettingsForm.get('useCellStyleFunction').value; + const useCellContentFunction: boolean = this.entitiesTableKeySettingsForm.get('useCellContentFunction').value; + if (useCellStyleFunction) { + this.entitiesTableKeySettingsForm.get('cellStyleFunction').enable(); + } else { + this.entitiesTableKeySettingsForm.get('cellStyleFunction').disable(); + } + if (useCellContentFunction) { + this.entitiesTableKeySettingsForm.get('cellContentFunction').enable(); + } else { + this.entitiesTableKeySettingsForm.get('cellContentFunction').disable(); + } + this.entitiesTableKeySettingsForm.get('cellStyleFunction').updateValueAndValidity({emitEvent}); + this.entitiesTableKeySettingsForm.get('cellContentFunction').updateValueAndValidity({emitEvent}); + } + +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-table-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-table-widget-settings.component.html new file mode 100644 index 0000000000..e58f083bea --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-table-widget-settings.component.html @@ -0,0 +1,116 @@ + +
+
+ widgets.table.common-table-settings + + widgets.table.entities-table-title + + +
+
+ + {{ 'widgets.table.enable-search' | translate }} + + + {{ 'widgets.table.enable-select-column-display' | translate }} + +
+
+ + {{ 'widgets.table.enable-sticky-header' | translate }} + + + {{ 'widgets.table.enable-sticky-action' | translate }} + +
+
+ + widgets.table.hidden-cell-button-display-mode + + + {{ 'widgets.table.show-empty-space-hidden-action' | translate }} + + + {{ 'widgets.table.dont-reserve-space-hidden-action' | translate }} + + + +
+
+ + {{ 'widgets.table.display-entity-name' | translate }} + + + widgets.table.entity-name-column-title + + +
+
+ + {{ 'widgets.table.display-entity-label' | translate }} + + + widgets.table.entity-label-column-title + + +
+ + {{ 'widgets.table.display-entity-type' | translate }} + +
+ + {{ 'widgets.table.display-pagination' | translate }} + + + widgets.table.default-page-size + + +
+ + widgets.table.default-sort-order + + +
+
+
+ widgets.table.row-style + + + + + {{ 'widgets.table.use-row-style-function' | translate }} + + + + widget-config.advanced-settings + + + + + + + +
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-table-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-table-widget-settings.component.ts new file mode 100644 index 0000000000..3d40a01484 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-table-widget-settings.component.ts @@ -0,0 +1,118 @@ +/// +/// 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 { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; + +@Component({ + selector: 'tb-entities-table-widget-settings', + templateUrl: './entities-table-widget-settings.component.html', + styleUrls: ['./widget-settings.scss'] +}) +export class EntitiesTableWidgetSettingsComponent extends WidgetSettingsComponent { + + entitiesTableWidgetSettingsForm: FormGroup; + + constructor(protected store: Store, + private fb: FormBuilder) { + super(store); + } + + protected settingsForm(): FormGroup { + return this.entitiesTableWidgetSettingsForm; + } + + protected defaultSettings(): WidgetSettings { + return { + entitiesTitle: '', + enableSearch: true, + enableSelectColumnDisplay: true, + enableStickyHeader: true, + enableStickyAction: true, + reserveSpaceForHiddenAction: 'true', + displayEntityName: true, + entityNameColumnTitle: '', + displayEntityLabel: false, + entityLabelColumnTitle: '', + displayEntityType: true, + displayPagination: true, + defaultPageSize: 10, + defaultSortOrder: 'entityName', + useRowStyleFunction: false, + rowStyleFunction: '' + }; + } + + protected onSettingsSet(settings: WidgetSettings) { + this.entitiesTableWidgetSettingsForm = this.fb.group({ + entitiesTitle: [settings.entitiesTitle, []], + enableSearch: [settings.enableSearch, []], + enableSelectColumnDisplay: [settings.enableSelectColumnDisplay, []], + enableStickyHeader: [settings.enableStickyHeader, []], + enableStickyAction: [settings.enableStickyAction, []], + reserveSpaceForHiddenAction: [settings.reserveSpaceForHiddenAction, []], + displayEntityName: [settings.displayEntityName, []], + entityNameColumnTitle: [settings.entityNameColumnTitle, []], + displayEntityLabel: [settings.displayEntityLabel, []], + entityLabelColumnTitle: [settings.entityLabelColumnTitle, []], + displayEntityType: [settings.displayEntityType, []], + displayPagination: [settings.displayPagination, []], + defaultPageSize: [settings.defaultPageSize, [Validators.min(1)]], + defaultSortOrder: [settings.defaultSortOrder, []], + useRowStyleFunction: [settings.useRowStyleFunction, []], + rowStyleFunction: [settings.rowStyleFunction, [Validators.required]] + }); + } + + protected validatorTriggers(): string[] { + return ['useRowStyleFunction', 'displayPagination', 'displayEntityName', 'displayEntityLabel']; + } + + protected updateValidators(emitEvent: boolean) { + const useRowStyleFunction: boolean = this.entitiesTableWidgetSettingsForm.get('useRowStyleFunction').value; + const displayPagination: boolean = this.entitiesTableWidgetSettingsForm.get('displayPagination').value; + const displayEntityName: boolean = this.entitiesTableWidgetSettingsForm.get('displayEntityName').value; + const displayEntityLabel: boolean = this.entitiesTableWidgetSettingsForm.get('displayEntityLabel').value; + if (useRowStyleFunction) { + this.entitiesTableWidgetSettingsForm.get('rowStyleFunction').enable(); + } else { + this.entitiesTableWidgetSettingsForm.get('rowStyleFunction').disable(); + } + if (displayPagination) { + this.entitiesTableWidgetSettingsForm.get('defaultPageSize').enable(); + } else { + this.entitiesTableWidgetSettingsForm.get('defaultPageSize').disable(); + } + if (displayEntityName) { + this.entitiesTableWidgetSettingsForm.get('entityNameColumnTitle').enable(); + } else { + this.entitiesTableWidgetSettingsForm.get('entityNameColumnTitle').disable(); + } + if (displayEntityLabel) { + this.entitiesTableWidgetSettingsForm.get('entityLabelColumnTitle').enable(); + } else { + this.entitiesTableWidgetSettingsForm.get('entityLabelColumnTitle').disable(); + } + this.entitiesTableWidgetSettingsForm.get('rowStyleFunction').updateValueAndValidity({emitEvent}); + this.entitiesTableWidgetSettingsForm.get('defaultPageSize').updateValueAndValidity({emitEvent}); + this.entitiesTableWidgetSettingsForm.get('entityNameColumnTitle').updateValueAndValidity({emitEvent}); + this.entitiesTableWidgetSettingsForm.get('entityLabelColumnTitle').updateValueAndValidity({emitEvent}); + } + +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-key-settings.component.html index bf568fc3eb..f8a2b852d2 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-key-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-key-settings.component.html @@ -31,7 +31,8 @@ - - - - - Date: Mon, 4 Apr 2022 14:12:56 +0300 Subject: [PATCH 11/66] UI: Refactoring --- ...board-state-widget-settings.component.html | 0 ...shboard-state-widget-settings.component.ts | 2 +- ...s-hierarchy-widget-settings.component.html | 0 ...ies-hierarchy-widget-settings.component.ts | 2 +- ...entities-table-key-settings.component.html | 0 .../entities-table-key-settings.component.ts | 2 +- ...ities-table-widget-settings.component.html | 0 ...ntities-table-widget-settings.component.ts | 2 +- .../html-card-widget-settings.component.html | 0 .../html-card-widget-settings.component.ts | 0 .../label-widget-font.component.html | 0 .../label-widget-font.component.ts | 0 .../label-widget-label.component.html | 0 .../label-widget-label.component.scss | 0 .../label-widget-label.component.ts | 4 +-- .../label-widget-settings.component.html | 0 .../label-widget-settings.component.scss | 2 +- .../label-widget-settings.component.ts | 4 +-- .../markdown-widget-settings.component.html | 0 .../markdown-widget-settings.component.ts | 2 +- .../qrcode-widget-settings.component.html | 0 .../qrcode-widget-settings.component.ts | 2 +- ...simple-card-widget-settings.component.html | 0 .../simple-card-widget-settings.component.ts | 0 ...meseries-table-key-settings.component.html | 0 ...timeseries-table-key-settings.component.ts | 2 +- ...s-table-latest-key-settings.component.html | 0 ...ies-table-latest-key-settings.component.ts | 2 +- ...eries-table-widget-settings.component.html | 0 ...eseries-table-widget-settings.component.ts | 2 +- .../lib/settings/widget-settings.module.ts | 28 +++++++++---------- 31 files changed, 28 insertions(+), 28 deletions(-) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/{ => cards}/dashboard-state-widget-settings.component.html (100%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/{ => cards}/dashboard-state-widget-settings.component.ts (98%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/{ => cards}/entities-hierarchy-widget-settings.component.html (100%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/{ => cards}/entities-hierarchy-widget-settings.component.ts (98%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/{ => cards}/entities-table-key-settings.component.html (100%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/{ => cards}/entities-table-key-settings.component.ts (98%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/{ => cards}/entities-table-widget-settings.component.html (100%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/{ => cards}/entities-table-widget-settings.component.ts (99%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/{ => cards}/html-card-widget-settings.component.html (100%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/{ => cards}/html-card-widget-settings.component.ts (100%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/{ => cards}/label-widget-font.component.html (100%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/{ => cards}/label-widget-font.component.ts (100%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/{ => cards}/label-widget-label.component.html (100%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/{ => cards}/label-widget-label.component.scss (100%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/{ => cards}/label-widget-label.component.ts (96%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/{ => cards}/label-widget-settings.component.html (100%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/{ => cards}/label-widget-settings.component.scss (94%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/{ => cards}/label-widget-settings.component.ts (97%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/{ => cards}/markdown-widget-settings.component.html (100%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/{ => cards}/markdown-widget-settings.component.ts (98%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/{ => cards}/qrcode-widget-settings.component.html (100%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/{ => cards}/qrcode-widget-settings.component.ts (98%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/{ => cards}/simple-card-widget-settings.component.html (100%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/{ => cards}/simple-card-widget-settings.component.ts (100%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/{ => cards}/timeseries-table-key-settings.component.html (100%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/{ => cards}/timeseries-table-key-settings.component.ts (98%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/{ => cards}/timeseries-table-latest-key-settings.component.html (100%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/{ => cards}/timeseries-table-latest-key-settings.component.ts (98%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/{ => cards}/timeseries-table-widget-settings.component.html (100%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/{ => cards}/timeseries-table-widget-settings.component.ts (98%) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/dashboard-state-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/dashboard-state-widget-settings.component.html similarity index 100% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/dashboard-state-widget-settings.component.html rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/dashboard-state-widget-settings.component.html diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/dashboard-state-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/dashboard-state-widget-settings.component.ts similarity index 98% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/dashboard-state-widget-settings.component.ts rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/dashboard-state-widget-settings.component.ts index 7d2a11e9cc..7c8d9de6e4 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/dashboard-state-widget-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/dashboard-state-widget-settings.component.ts @@ -25,7 +25,7 @@ import { map, mergeMap, startWith } from 'rxjs/operators'; @Component({ selector: 'tb-dashboard-state-widget-settings', templateUrl: './dashboard-state-widget-settings.component.html', - styleUrls: ['./widget-settings.scss'] + styleUrls: ['./../widget-settings.scss'] }) export class DashboardStateWidgetSettingsComponent extends WidgetSettingsComponent { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-hierarchy-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-hierarchy-widget-settings.component.html similarity index 100% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-hierarchy-widget-settings.component.html rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-hierarchy-widget-settings.component.html diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-hierarchy-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-hierarchy-widget-settings.component.ts similarity index 98% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-hierarchy-widget-settings.component.ts rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-hierarchy-widget-settings.component.ts index c0757b4904..d9e850b14f 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-hierarchy-widget-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-hierarchy-widget-settings.component.ts @@ -23,7 +23,7 @@ import { AppState } from '@core/core.state'; @Component({ selector: 'tb-entities-hierarchy-widget-settings', templateUrl: './entities-hierarchy-widget-settings.component.html', - styleUrls: ['./widget-settings.scss'] + styleUrls: ['./../widget-settings.scss'] }) export class EntitiesHierarchyWidgetSettingsComponent extends WidgetSettingsComponent { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-table-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-key-settings.component.html similarity index 100% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-table-key-settings.component.html rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-key-settings.component.html diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-table-key-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-key-settings.component.ts similarity index 98% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-table-key-settings.component.ts rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-key-settings.component.ts index 9ec2482de8..738e99223c 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-table-key-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-key-settings.component.ts @@ -23,7 +23,7 @@ import { AppState } from '@core/core.state'; @Component({ selector: 'tb-entities-table-key-settings', templateUrl: './entities-table-key-settings.component.html', - styleUrls: ['./widget-settings.scss'] + styleUrls: ['./../widget-settings.scss'] }) export class EntitiesTableKeySettingsComponent extends WidgetSettingsComponent { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-table-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-widget-settings.component.html similarity index 100% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-table-widget-settings.component.html rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-widget-settings.component.html diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-table-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-widget-settings.component.ts similarity index 99% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-table-widget-settings.component.ts rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-widget-settings.component.ts index 3d40a01484..789323679b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/entities-table-widget-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-widget-settings.component.ts @@ -23,7 +23,7 @@ import { AppState } from '@core/core.state'; @Component({ selector: 'tb-entities-table-widget-settings', templateUrl: './entities-table-widget-settings.component.html', - styleUrls: ['./widget-settings.scss'] + styleUrls: ['./../widget-settings.scss'] }) export class EntitiesTableWidgetSettingsComponent extends WidgetSettingsComponent { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/html-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/html-card-widget-settings.component.html similarity index 100% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/html-card-widget-settings.component.html rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/html-card-widget-settings.component.html diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/html-card-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/html-card-widget-settings.component.ts similarity index 100% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/html-card-widget-settings.component.ts rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/html-card-widget-settings.component.ts diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-font.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-font.component.html similarity index 100% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-font.component.html rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-font.component.html diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-font.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-font.component.ts similarity index 100% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-font.component.ts rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-font.component.ts diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-label.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html similarity index 100% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-label.component.html rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-label.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.scss similarity index 100% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-label.component.scss rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.scss diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-label.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.ts similarity index 96% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-label.component.ts rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.ts index 65f0cca39c..0c56e66e6f 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-label.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.ts @@ -20,7 +20,7 @@ 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'; +import { LabelWidgetFont } from '@home/components/widget/lib/settings/cards/label-widget-font.component'; export interface LabelWidgetLabel { pattern: string; @@ -33,7 +33,7 @@ export interface LabelWidgetLabel { @Component({ selector: 'tb-label-widget-label', templateUrl: './label-widget-label.component.html', - styleUrls: ['./label-widget-label.component.scss', './widget-settings.scss'], + styleUrls: ['./label-widget-label.component.scss', './../widget-settings.scss'], providers: [ { provide: NG_VALUE_ACCESSOR, diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.html similarity index 100% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-settings.component.html rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.html diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-settings.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.scss similarity index 94% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-settings.component.scss rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.scss index 5125ee03e4..563f2ae465 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-settings.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.scss @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -@import '../../../../../../../scss/constants'; +@import '../../../../../../../../scss/constants'; :host { .tb-label-widget-labels { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.ts similarity index 97% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-settings.component.ts rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.ts index 0535b55a33..cde33be48c 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/label-widget-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.ts @@ -19,12 +19,12 @@ import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.m 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'; +import { LabelWidgetLabel } from '@home/components/widget/lib/settings/cards/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'] + styleUrls: ['./label-widget-settings.component.scss', './../widget-settings.scss'] }) export class LabelWidgetSettingsComponent extends WidgetSettingsComponent { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/markdown-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/markdown-widget-settings.component.html similarity index 100% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/markdown-widget-settings.component.html rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/markdown-widget-settings.component.html diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/markdown-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/markdown-widget-settings.component.ts similarity index 98% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/markdown-widget-settings.component.ts rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/markdown-widget-settings.component.ts index db78d8b42f..59667b7b77 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/markdown-widget-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/markdown-widget-settings.component.ts @@ -23,7 +23,7 @@ import { AppState } from '@core/core.state'; @Component({ selector: 'tb-markdown-widget-settings', templateUrl: './markdown-widget-settings.component.html', - styleUrls: ['./widget-settings.scss'] + styleUrls: ['./../widget-settings.scss'] }) export class MarkdownWidgetSettingsComponent extends WidgetSettingsComponent { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/qrcode-widget-settings.component.html similarity index 100% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.html rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/qrcode-widget-settings.component.html diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/qrcode-widget-settings.component.ts similarity index 98% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.ts rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/qrcode-widget-settings.component.ts index 7405852357..f5c204a136 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/qrcode-widget-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/qrcode-widget-settings.component.ts @@ -23,7 +23,7 @@ import { AppState } from '@core/core.state'; @Component({ selector: 'tb-qrcode-widget-settings', templateUrl: './qrcode-widget-settings.component.html', - styleUrls: ['./widget-settings.scss'] + styleUrls: ['./../widget-settings.scss'] }) export class QrCodeWidgetSettingsComponent extends WidgetSettingsComponent { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/simple-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/simple-card-widget-settings.component.html similarity index 100% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/simple-card-widget-settings.component.html rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/simple-card-widget-settings.component.html diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/simple-card-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/simple-card-widget-settings.component.ts similarity index 100% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/simple-card-widget-settings.component.ts rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/simple-card-widget-settings.component.ts diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-key-settings.component.html similarity index 100% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-key-settings.component.html rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-key-settings.component.html diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-key-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-key-settings.component.ts similarity index 98% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-key-settings.component.ts rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-key-settings.component.ts index b2433dfde0..2330b95752 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-key-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-key-settings.component.ts @@ -23,7 +23,7 @@ import { AppState } from '@core/core.state'; @Component({ selector: 'tb-timeseries-table-key-settings', templateUrl: './timeseries-table-key-settings.component.html', - styleUrls: ['./widget-settings.scss'] + styleUrls: ['./../widget-settings.scss'] }) export class TimeseriesTableKeySettingsComponent extends WidgetSettingsComponent { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-latest-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-latest-key-settings.component.html similarity index 100% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-latest-key-settings.component.html rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-latest-key-settings.component.html diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-latest-key-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-latest-key-settings.component.ts similarity index 98% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-latest-key-settings.component.ts rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-latest-key-settings.component.ts index 1d8d26ead3..1abba3ae0b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-latest-key-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-latest-key-settings.component.ts @@ -23,7 +23,7 @@ import { AppState } from '@core/core.state'; @Component({ selector: 'tb-timeseries-table-latest-key-settings', templateUrl: './timeseries-table-latest-key-settings.component.html', - styleUrls: ['./widget-settings.scss'] + styleUrls: ['./../widget-settings.scss'] }) export class TimeseriesTableLatestKeySettingsComponent extends WidgetSettingsComponent { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html similarity index 100% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-widget-settings.component.html rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.ts similarity index 98% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-widget-settings.component.ts rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.ts index d28b4f081a..d7a6c83e8d 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/timeseries-table-widget-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.ts @@ -23,7 +23,7 @@ import { AppState } from '@core/core.state'; @Component({ selector: 'tb-timeseries-table-widget-settings', templateUrl: './timeseries-table-widget-settings.component.html', - styleUrls: ['./widget-settings.scss'] + styleUrls: ['./../widget-settings.scss'] }) export class TimeseriesTableWidgetSettingsComponent extends WidgetSettingsComponent { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts index 7098cf99a8..2beaed1d92 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts @@ -15,44 +15,44 @@ /// import { NgModule, Type } from '@angular/core'; -import { QrCodeWidgetSettingsComponent } from '@home/components/widget/lib/settings/qrcode-widget-settings.component'; +import { QrCodeWidgetSettingsComponent } from '@home/components/widget/lib/settings/cards/qrcode-widget-settings.component'; import { CommonModule } from '@angular/common'; import { SharedModule } from '@shared/shared.module'; import { SharedHomeComponentsModule } from '@home/components/shared-home-components.module'; import { IWidgetSettingsComponent } from '@shared/models/widget.models'; import { TimeseriesTableWidgetSettingsComponent -} from '@home/components/widget/lib/settings/timeseries-table-widget-settings.component'; +} from '@home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component'; import { TimeseriesTableKeySettingsComponent -} from '@home/components/widget/lib/settings/timeseries-table-key-settings.component'; +} from '@home/components/widget/lib/settings/cards/timeseries-table-key-settings.component'; import { TimeseriesTableLatestKeySettingsComponent -} from '@home/components/widget/lib/settings/timeseries-table-latest-key-settings.component'; +} from '@home/components/widget/lib/settings/cards/timeseries-table-latest-key-settings.component'; 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'; +} from '@home/components/widget/lib/settings/cards/markdown-widget-settings.component'; +import { LabelWidgetFontComponent } from '@home/components/widget/lib/settings/cards/label-widget-font.component'; +import { LabelWidgetLabelComponent } from '@home/components/widget/lib/settings/cards/label-widget-label.component'; +import { LabelWidgetSettingsComponent } from '@home/components/widget/lib/settings/cards/label-widget-settings.component'; import { SimpleCardWidgetSettingsComponent -} from '@home/components/widget/lib/settings/simple-card-widget-settings.component'; +} from '@home/components/widget/lib/settings/cards/simple-card-widget-settings.component'; import { DashboardStateWidgetSettingsComponent -} from '@home/components/widget/lib/settings/dashboard-state-widget-settings.component'; +} from '@home/components/widget/lib/settings/cards/dashboard-state-widget-settings.component'; import { EntitiesHierarchyWidgetSettingsComponent -} from '@home/components/widget/lib/settings/entities-hierarchy-widget-settings.component'; +} from '@home/components/widget/lib/settings/cards/entities-hierarchy-widget-settings.component'; import { HtmlCardWidgetSettingsComponent -} from '@home/components/widget/lib/settings/html-card-widget-settings.component'; +} from '@home/components/widget/lib/settings/cards/html-card-widget-settings.component'; import { EntitiesTableWidgetSettingsComponent -} from '@home/components/widget/lib/settings/entities-table-widget-settings.component'; +} from '@home/components/widget/lib/settings/cards/entities-table-widget-settings.component'; import { EntitiesTableKeySettingsComponent -} from '@home/components/widget/lib/settings/entities-table-key-settings.component'; +} from '@home/components/widget/lib/settings/cards/entities-table-key-settings.component'; @NgModule({ declarations: [ From 03828d2a1f633769c5799cce68ab105c71d6dec0 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Mon, 4 Apr 2022 15:58:58 +0300 Subject: [PATCH 12/66] UI: Add alarms table widget/key settings forms --- .../system/widget_bundles/alarm_widgets.json | 6 +- .../alarms-table-key-settings.component.html | 95 +++++++++++++++ .../alarms-table-key-settings.component.ts | 86 ++++++++++++++ ...larms-table-widget-settings.component.html | 110 ++++++++++++++++++ .../alarms-table-widget-settings.component.ts | 104 +++++++++++++++++ .../lib/settings/widget-settings.module.ts | 18 ++- .../assets/locale/locale.constant-en_US.json | 9 +- 7 files changed, 422 insertions(+), 6 deletions(-) create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-key-settings.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-key-settings.component.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.ts diff --git a/application/src/main/data/json/system/widget_bundles/alarm_widgets.json b/application/src/main/data/json/system/widget_bundles/alarm_widgets.json index a5b5146004..448fcaf52c 100644 --- a/application/src/main/data/json/system/widget_bundles/alarm_widgets.json +++ b/application/src/main/data/json/system/widget_bundles/alarm_widgets.json @@ -19,8 +19,10 @@ "templateHtml": "\n", "templateCss": "", "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n self.ctx.$scope.alarmsTableWidget.onDataUpdated();\n}\n\nself.actionSources = function() {\n return {\n 'actionCellButton': {\n name: 'widget-action.action-cell-button',\n multiple: true,\n hasShowCondition: true\n },\n 'rowClick': {\n name: 'widget-action.row-click',\n multiple: false\n }\n };\n}\n\nself.onDestroy = function() {\n}\n", - "settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"AlarmTableSettings\",\n \"properties\": {\n \"alarmsTitle\": {\n \"title\": \"Alarms table title\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"enableSelection\": {\n \"title\": \"Enable alarms selection\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableSearch\": {\n \"title\": \"Enable alarms search\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableSelectColumnDisplay\": {\n \"title\": \"Enable select columns to display\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableFilter\": {\n \"title\": \"Enable alarm filter\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableStickyHeader\": {\n \"title\": \"Always display header\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"enableStickyAction\": {\n \"title\": \"Always display actions column\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"reserveSpaceForHiddenAction\": {\n \"title\": \"Hidden cell button actions display mode\",\n \"type\": \"string\",\n \"default\": \"true\"\n },\n \"displayDetails\": {\n \"title\": \"Display alarm details\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"allowAcknowledgment\": {\n \"title\": \"Allow alarms acknowledgment\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"allowClear\": {\n \"title\": \"Allow alarms clear\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"displayPagination\": {\n \"title\": \"Display pagination\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"defaultPageSize\": {\n \"title\": \"Default page size\",\n \"type\": \"number\",\n \"default\": 10\n },\n \"defaultSortOrder\": {\n \"title\": \"Default sort order\",\n \"type\": \"string\",\n \"default\": \"-createdTime\"\n },\n \"useRowStyleFunction\": {\n \"title\": \"Use row style function\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"rowStyleFunction\": {\n \"title\": \"Row style function: f(alarm, ctx)\",\n \"type\": \"string\",\n \"default\": \"\"\n }\n },\n \"required\": []\n },\n \"form\": [\n \"alarmsTitle\",\n \"enableSelection\",\n \"enableSearch\",\n \"enableSelectColumnDisplay\",\n \"enableFilter\",\n \"enableStickyHeader\",\n \"enableStickyAction\",\n {\n \"key\": \"reserveSpaceForHiddenAction\",\n \"type\": \"rc-select\",\n \"multiple\": false,\n \"items\": [\n {\n \"value\": \"true\",\n \"label\": \"Show empty space instead of hidden cell button action\"\n },\n {\n \"value\": \"false\",\n \"label\": \"Don't reserve space for hidden action buttons\"\n }\n ]\n },\n \"displayDetails\",\n \"allowAcknowledgment\",\n \"allowClear\",\n \"displayPagination\",\n \"defaultPageSize\",\n \"defaultSortOrder\",\n \"useRowStyleFunction\",\n {\n \"key\": \"rowStyleFunction\",\n \"type\": \"javascript\",\n \"helpId\": \"widget/lib/alarm/row_style_fn\",\n \"condition\": \"model.useRowStyleFunction === true\"\n }\n ]\n}", - "dataKeySettingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"DataKeySettings\",\n \"properties\": {\n \"columnWidth\": {\n \"title\": \"Column width (px or %)\",\n \"type\": \"string\",\n \"default\": \"0px\"\n },\n \"useCellStyleFunction\": {\n \"title\": \"Use cell style function\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"cellStyleFunction\": {\n \"title\": \"Cell style function: f(value, alarm, ctx)\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"useCellContentFunction\": {\n \"title\": \"Use cell content function\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"cellContentFunction\": {\n \"title\": \"Cell content function: f(value, alarm, ctx)\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"defaultColumnVisibility\": {\n \"title\": \"Default column visibility\",\n \"type\": \"string\",\n \"default\": \"visible\"\n },\n \"columnSelectionToDisplay\": {\n \"title\": \"Column selection in 'Columns to Display'\",\n \"type\": \"string\",\n \"default\": \"enabled\"\n }\n },\n \"required\": []\n },\n \"form\": [\n \"columnWidth\",\n \"useCellStyleFunction\",\n {\n \"key\": \"cellStyleFunction\",\n \"type\": \"javascript\",\n \"helpId\": \"widget/lib/alarm/cell_style_fn\",\n \"condition\": \"model.useCellStyleFunction === true\"\n },\n \"useCellContentFunction\",\n {\n \"key\": \"cellContentFunction\",\n \"type\": \"javascript\",\n \"helpId\": \"widget/lib/alarm/cell_content_fn\",\n \"condition\": \"model.useCellContentFunction === true\"\n },\n {\n \"key\": \"defaultColumnVisibility\",\n \"type\": \"rc-select\",\n \"multiple\": false,\n \"items\": [\n {\n \"value\": \"visible\",\n \"label\": \"Visible\"\n },\n {\n \"value\": \"hidden\",\n \"label\": \"Hidden\"\n } \n ]\n },\n {\n \"key\": \"columnSelectionToDisplay\",\n \"type\": \"rc-select\",\n \"multiple\": false,\n \"items\": [\n {\n \"value\": \"enabled\",\n \"label\": \"Enabled\"\n },\n {\n \"value\": \"disabled\",\n \"label\": \"Disabled\"\n } \n ]\n }\n ]\n}", + "settingsSchema": "", + "dataKeySettingsSchema": "", + "settingsDirective": "tb-alarms-table-widget-settings", + "dataKeySettingsDirective": "tb-alarms-table-key-settings", "defaultConfig": "{\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":86400000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"4px\",\"settings\":{\"enableSelection\":true,\"enableSearch\":true,\"displayDetails\":true,\"allowAcknowledgment\":true,\"allowClear\":true,\"displayPagination\":true,\"defaultPageSize\":10,\"defaultSortOrder\":\"-createdTime\",\"enableSelectColumnDisplay\":true,\"enableStickyAction\":false,\"enableFilter\":true},\"title\":\"Alarms table\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"alarmSource\":{\"type\":\"function\",\"dataKeys\":[{\"name\":\"createdTime\",\"type\":\"alarm\",\"label\":\"Created time\",\"color\":\"#2196f3\",\"settings\":{\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.021092237451093787},{\"name\":\"originator\",\"type\":\"alarm\",\"label\":\"Originator\",\"color\":\"#4caf50\",\"settings\":{\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.2780007688856758},{\"name\":\"type\",\"type\":\"alarm\",\"label\":\"Type\",\"color\":\"#f44336\",\"settings\":{\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.7323586880398418},{\"name\":\"severity\",\"type\":\"alarm\",\"label\":\"Severity\",\"color\":\"#ffc107\",\"settings\":{\"useCellStyleFunction\":false,\"useCellContentFunction\":false},\"_hash\":0.09927019860088193},{\"name\":\"status\",\"type\":\"alarm\",\"label\":\"Status\",\"color\":\"#607d8b\",\"settings\":{\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.6588418951443418}],\"entityAliasId\":null,\"name\":\"alarms\"},\"alarmSearchStatus\":\"ANY\",\"alarmsPollingInterval\":5,\"showTitleIcon\":false,\"titleIcon\":\"more_horiz\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"titleTooltip\":\"\",\"widgetStyle\":{},\"displayTimewindow\":true,\"actions\":{},\"alarmStatusList\":[],\"alarmSeverityList\":[],\"alarmTypeList\":[],\"searchPropagatedAlarms\":false}" } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-key-settings.component.html new file mode 100644 index 0000000000..6931d256e8 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-key-settings.component.html @@ -0,0 +1,95 @@ + +
+ + widgets.table.column-width + + +
+ widgets.table.cell-style + + + + + {{ 'widgets.table.use-cell-style-function' | translate }} + + + + widget-config.advanced-settings + + + + + + + +
+
+ widgets.table.cell-content + + + + + {{ 'widgets.table.use-cell-content-function' | translate }} + + + + widget-config.advanced-settings + + + + + + + +
+ + widgets.table.default-column-visibility + + + {{ 'widgets.table.column-visibility-visible' | translate }} + + + {{ 'widgets.table.column-visibility-hidden' | translate }} + + + + + widgets.table.column-selection-to-display + + + {{ 'widgets.table.column-selection-to-display-enabled' | translate }} + + + {{ 'widgets.table.column-selection-to-display-disabled' | translate }} + + + +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-key-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-key-settings.component.ts new file mode 100644 index 0000000000..9f9cbbf5e1 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-key-settings.component.ts @@ -0,0 +1,86 @@ +/// +/// 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 { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; + +@Component({ + selector: 'tb-alarms-table-key-settings', + templateUrl: './alarms-table-key-settings.component.html', + styleUrls: ['./../widget-settings.scss'] +}) +export class AlarmsTableKeySettingsComponent extends WidgetSettingsComponent { + + alarmsTableKeySettingsForm: FormGroup; + + constructor(protected store: Store, + private fb: FormBuilder) { + super(store); + } + + protected settingsForm(): FormGroup { + return this.alarmsTableKeySettingsForm; + } + + protected defaultSettings(): WidgetSettings { + return { + columnWidth: '0px', + useCellStyleFunction: false, + cellStyleFunction: '', + useCellContentFunction: false, + cellContentFunction: '', + defaultColumnVisibility: 'visible', + columnSelectionToDisplay: 'enabled' + }; + } + + protected onSettingsSet(settings: WidgetSettings) { + this.alarmsTableKeySettingsForm = this.fb.group({ + columnWidth: [settings.columnWidth, []], + useCellStyleFunction: [settings.useCellStyleFunction, []], + cellStyleFunction: [settings.cellStyleFunction, [Validators.required]], + useCellContentFunction: [settings.useCellContentFunction, []], + cellContentFunction: [settings.cellContentFunction, [Validators.required]], + defaultColumnVisibility: [settings.defaultColumnVisibility, []], + columnSelectionToDisplay: [settings.columnSelectionToDisplay, []], + }); + } + + protected validatorTriggers(): string[] { + return ['useCellStyleFunction', 'useCellContentFunction']; + } + + protected updateValidators(emitEvent: boolean) { + const useCellStyleFunction: boolean = this.alarmsTableKeySettingsForm.get('useCellStyleFunction').value; + const useCellContentFunction: boolean = this.alarmsTableKeySettingsForm.get('useCellContentFunction').value; + if (useCellStyleFunction) { + this.alarmsTableKeySettingsForm.get('cellStyleFunction').enable(); + } else { + this.alarmsTableKeySettingsForm.get('cellStyleFunction').disable(); + } + if (useCellContentFunction) { + this.alarmsTableKeySettingsForm.get('cellContentFunction').enable(); + } else { + this.alarmsTableKeySettingsForm.get('cellContentFunction').disable(); + } + this.alarmsTableKeySettingsForm.get('cellStyleFunction').updateValueAndValidity({emitEvent}); + this.alarmsTableKeySettingsForm.get('cellContentFunction').updateValueAndValidity({emitEvent}); + } + +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html new file mode 100644 index 0000000000..3b5516c26c --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html @@ -0,0 +1,110 @@ + +
+
+ widgets.table.common-table-settings + + widgets.table.alarms-table-title + + +
+
+ + {{ 'widgets.table.enable-alarms-selection' | translate }} + + + {{ 'widgets.table.enable-alarms-search' | translate }} + + + {{ 'widgets.table.enable-select-column-display' | translate }} + + + {{ 'widgets.table.enable-alarm-filter' | translate }} + +
+
+ + {{ 'widgets.table.enable-sticky-header' | translate }} + + + {{ 'widgets.table.enable-sticky-action' | translate }} + +
+
+ + widgets.table.hidden-cell-button-display-mode + + + {{ 'widgets.table.show-empty-space-hidden-action' | translate }} + + + {{ 'widgets.table.dont-reserve-space-hidden-action' | translate }} + + + +
+ + {{ 'widgets.table.display-alarm-details' | translate }} + + + {{ 'widgets.table.allow-alarms-ack' | translate }} + + + {{ 'widgets.table.allow-alarms-clear' | translate }} + +
+ + {{ 'widgets.table.display-pagination' | translate }} + + + widgets.table.default-page-size + + +
+ + widgets.table.default-sort-order + + +
+
+
+ widgets.table.row-style + + + + + {{ 'widgets.table.use-row-style-function' | translate }} + + + + widget-config.advanced-settings + + + + + + + +
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.ts new file mode 100644 index 0000000000..c57ae7d6f5 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.ts @@ -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 } from '@angular/core'; +import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; + +@Component({ + selector: 'tb-alarms-table-widget-settings', + templateUrl: './alarms-table-widget-settings.component.html', + styleUrls: ['./../widget-settings.scss'] +}) +export class AlarmsTableWidgetSettingsComponent extends WidgetSettingsComponent { + + alarmsTableWidgetSettingsForm: FormGroup; + + constructor(protected store: Store, + private fb: FormBuilder) { + super(store); + } + + protected settingsForm(): FormGroup { + return this.alarmsTableWidgetSettingsForm; + } + + protected defaultSettings(): WidgetSettings { + return { + alarmsTitle: '', + enableSelection: true, + enableSearch: true, + enableSelectColumnDisplay: true, + enableFilter: true, + enableStickyHeader: true, + enableStickyAction: true, + reserveSpaceForHiddenAction: 'true', + displayDetails: true, + allowAcknowledgment: true, + allowClear: true, + displayPagination: true, + defaultPageSize: 10, + defaultSortOrder: '-createdTime', + useRowStyleFunction: false, + rowStyleFunction: '' + }; + } + + protected onSettingsSet(settings: WidgetSettings) { + this.alarmsTableWidgetSettingsForm = this.fb.group({ + alarmsTitle: [settings.alarmsTitle, []], + enableSelection: [settings.enableSelection, []], + enableSearch: [settings.enableSearch, []], + enableSelectColumnDisplay: [settings.enableSelectColumnDisplay, []], + enableFilter: [settings.enableFilter, []], + enableStickyHeader: [settings.enableStickyHeader, []], + enableStickyAction: [settings.enableStickyAction, []], + reserveSpaceForHiddenAction: [settings.reserveSpaceForHiddenAction, []], + displayDetails: [settings.displayDetails, []], + allowAcknowledgment: [settings.allowAcknowledgment, []], + allowClear: [settings.allowClear, []], + displayPagination: [settings.displayPagination, []], + defaultPageSize: [settings.defaultPageSize, [Validators.min(1)]], + defaultSortOrder: [settings.defaultSortOrder, []], + useRowStyleFunction: [settings.useRowStyleFunction, []], + rowStyleFunction: [settings.rowStyleFunction, [Validators.required]] + }); + } + + protected validatorTriggers(): string[] { + return ['useRowStyleFunction', 'displayPagination']; + } + + protected updateValidators(emitEvent: boolean) { + const useRowStyleFunction: boolean = this.alarmsTableWidgetSettingsForm.get('useRowStyleFunction').value; + const displayPagination: boolean = this.alarmsTableWidgetSettingsForm.get('displayPagination').value; + if (useRowStyleFunction) { + this.alarmsTableWidgetSettingsForm.get('rowStyleFunction').enable(); + } else { + this.alarmsTableWidgetSettingsForm.get('rowStyleFunction').disable(); + } + if (displayPagination) { + this.alarmsTableWidgetSettingsForm.get('defaultPageSize').enable(); + } else { + this.alarmsTableWidgetSettingsForm.get('defaultPageSize').disable(); + } + this.alarmsTableWidgetSettingsForm.get('rowStyleFunction').updateValueAndValidity({emitEvent}); + this.alarmsTableWidgetSettingsForm.get('defaultPageSize').updateValueAndValidity({emitEvent}); + } + +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts index 2beaed1d92..14e5cc21bf 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts @@ -53,6 +53,12 @@ import { import { EntitiesTableKeySettingsComponent } from '@home/components/widget/lib/settings/cards/entities-table-key-settings.component'; +import { + AlarmsTableWidgetSettingsComponent +} from '@home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component'; +import { + AlarmsTableKeySettingsComponent +} from '@home/components/widget/lib/settings/alarm/alarms-table-key-settings.component'; @NgModule({ declarations: [ @@ -69,7 +75,9 @@ import { EntitiesHierarchyWidgetSettingsComponent, HtmlCardWidgetSettingsComponent, EntitiesTableWidgetSettingsComponent, - EntitiesTableKeySettingsComponent + EntitiesTableKeySettingsComponent, + AlarmsTableWidgetSettingsComponent, + AlarmsTableKeySettingsComponent ], imports: [ CommonModule, @@ -90,7 +98,9 @@ import { EntitiesHierarchyWidgetSettingsComponent, HtmlCardWidgetSettingsComponent, EntitiesTableWidgetSettingsComponent, - EntitiesTableKeySettingsComponent + EntitiesTableKeySettingsComponent, + AlarmsTableWidgetSettingsComponent, + AlarmsTableKeySettingsComponent ] }) export class WidgetSettingsModule { @@ -108,5 +118,7 @@ export const widgetSettingsComponentsMap: {[key: string]: Type Date: Wed, 6 Apr 2022 16:07:42 +0300 Subject: [PATCH 13/66] UI: Add analogue gauges widget settings forms --- .../widget_bundles/analogue_gauges.json | 15 +- ui-ngx/package.json | 1 - .../widget/data-keys.component.html | 2 +- .../widget/data-keys.component.scss | 67 +- .../widget/lib/analogue-compass.models.ts | 319 -------- .../components/widget/lib/analogue-compass.ts | 10 +- .../widget/lib/analogue-gauge.models.ts | 771 ------------------ .../lib/analogue-linear-gauge.models.ts | 64 +- .../widget/lib/analogue-linear-gauge.ts | 9 +- .../lib/analogue-radial-gauge.models.ts | 31 +- .../widget/lib/analogue-radial-gauge.ts | 10 +- .../cards/label-widget-label.component.html | 6 +- .../cards/label-widget-label.component.ts | 4 +- .../label-widget-settings.component.html | 7 +- .../cards/label-widget-settings.component.ts | 19 +- .../widget-font.component.html} | 30 +- .../widget-font.component.ts} | 38 +- ...gue-compass-widget-settings.component.html | 172 ++++ ...logue-compass-widget-settings.component.ts | 171 ++++ ...logue-gauge-widget-settings.component.html | 336 ++++++++ ...nalogue-gauge-widget-settings.component.ts | 250 ++++++ ...-linear-gauge-widget-settings.component.ts | 66 ++ ...-radial-gauge-widget-settings.component.ts | 57 ++ .../gauge/gauge-highlight.component.html | 60 ++ .../gauge-highlight.component.scss} | 28 +- .../gauge/gauge-highlight.component.ts | 116 +++ .../lib/settings/widget-settings.module.ts | 33 +- .../widget/lib/settings/widget-settings.scss | 19 + .../widget/widget-config.component.html | 20 +- .../widget/widget-config.component.scss | 13 +- .../widget/widget-config.component.ts | 19 +- ui-ngx/src/app/shared/shared.module.ts | 6 +- .../assets/locale/locale.constant-en_US.json | 104 ++- ui-ngx/src/styles.scss | 14 + ui-ngx/yarn.lock | 7 - 35 files changed, 1536 insertions(+), 1358 deletions(-) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/{cards/label-widget-font.component.html => common/widget-font.component.html} (67%) rename ui-ngx/src/app/modules/home/components/widget/lib/settings/{cards/label-widget-font.component.ts => common/widget-font.component.ts} (70%) create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-linear-gauge-widget-settings.component.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-radial-gauge-widget-settings.component.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.html rename ui-ngx/src/app/modules/home/components/widget/lib/settings/{cards/label-widget-settings.component.scss => gauge/gauge-highlight.component.scss} (61%) create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.ts diff --git a/application/src/main/data/json/system/widget_bundles/analogue_gauges.json b/application/src/main/data/json/system/widget_bundles/analogue_gauges.json index 5a4eab0522..b2ae314324 100644 --- a/application/src/main/data/json/system/widget_bundles/analogue_gauges.json +++ b/application/src/main/data/json/system/widget_bundles/analogue_gauges.json @@ -18,9 +18,10 @@ "resources": [], "templateHtml": "", "templateCss": "", - "controllerScript": "self.onInit = function() {\n self.ctx.gauge = new TbAnalogueCompass(self.ctx, 'compass');\n}\n\nself.onDataUpdated = function() {\n self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.gauge.mobileModeChanged();\n}\n\nself.getSettingsSchema = function() {\n return TbAnalogueCompass.settingsSchema;\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n}\n\nself.onDestroy = function() {\n self.ctx.gauge.destroy();\n}\n", + "controllerScript": "self.onInit = function() {\n self.ctx.gauge = new TbAnalogueCompass(self.ctx, 'compass');\n}\n\nself.onDataUpdated = function() {\n self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n}\n\nself.onDestroy = function() {\n self.ctx.gauge.destroy();\n}\n", "settingsSchema": "{}", "dataKeySettingsSchema": "{}\n", + "settingsDirective": "tb-analogue-compass-widget-settings", "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"minorTicks\":22,\"needleCircleSize\":15,\"showBorder\":true,\"borderOuterWidth\":10,\"colorPlate\":\"#222\",\"colorMajorTicks\":\"#f5f5f5\",\"colorMinorTicks\":\"#ddd\",\"colorNeedle\":\"#f08080\",\"colorNeedleCircle\":\"#e8e8e8\",\"colorBorder\":\"#ccc\",\"majorTickFont\":{\"family\":\"Roboto\",\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#ccc\"},\"animation\":true,\"animationDuration\":500,\"animationRule\":\"cycle\",\"animationTarget\":\"needle\",\"majorTicks\":[\"N\",\"NE\",\"E\",\"SE\",\"S\",\"SW\",\"W\",\"NW\"]},\"title\":\"Compass\",\"dropShadow\":true,\"enableFullscreen\":true,\"widgetStyle\":{},\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"useDashboardTimewindow\":true,\"showLegend\":false,\"actions\":{}}" } }, @@ -36,9 +37,10 @@ "resources": [], "templateHtml": "\n", "templateCss": "", - "controllerScript": "self.onInit = function() {\n self.ctx.gauge = new TbAnalogueLinearGauge(self.ctx, 'linearGauge'); \n}\n\nself.onDataUpdated = function() {\n self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.gauge.mobileModeChanged();\n}\n\nself.getSettingsSchema = function() {\n return TbAnalogueLinearGauge.settingsSchema;\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n}\n\nself.onDestroy = function() {\n self.ctx.gauge.destroy();\n}\n", + "controllerScript": "self.onInit = function() {\n self.ctx.gauge = new TbAnalogueLinearGauge(self.ctx, 'linearGauge'); \n}\n\nself.onDataUpdated = function() {\n self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n}\n\nself.onDestroy = function() {\n self.ctx.gauge.destroy();\n}\n", "settingsSchema": "{}", "dataKeySettingsSchema": "{}\n", + "settingsDirective": "tb-analogue-linear-gauge-widget-settings", "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Temp\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.7282710489093589,\"funcBody\":\"var value = prevValue + Math.random() * 30 - 15;\\nif (value < -60) {\\n\\tvalue = -60;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"maxValue\":100,\"defaultColor\":\"#e64a19\",\"barStrokeWidth\":2.5,\"colorBar\":\"rgba(255, 255, 255, 0.4)\",\"colorBarEnd\":\"rgba(221, 221, 221, 0.38)\",\"showUnitTitle\":true,\"minorTicks\":2,\"valueBox\":true,\"valueInt\":3,\"colorPlate\":\"#fff\",\"colorMajorTicks\":\"#444\",\"colorMinorTicks\":\"#666\",\"colorNeedleShadowUp\":\"rgba(2,255,255,0.2)\",\"colorNeedleShadowDown\":\"rgba(188,143,143,0.45)\",\"colorValueBoxRect\":\"#888\",\"colorValueBoxRectEnd\":\"#666\",\"colorValueBoxBackground\":\"#babab2\",\"colorValueBoxShadow\":\"rgba(0,0,0,1)\",\"highlightsWidth\":10,\"animation\":true,\"animationDuration\":1500,\"animationRule\":\"linear\",\"showBorder\":false,\"majorTicksCount\":8,\"numbersFont\":{\"family\":\"Arial\",\"size\":18,\"style\":\"normal\",\"weight\":\"normal\",\"color\":\"#263238\"},\"titleFont\":{\"family\":\"Roboto\",\"size\":24,\"style\":\"normal\",\"weight\":\"normal\",\"color\":\"#78909c\"},\"unitsFont\":{\"family\":\"Roboto\",\"size\":26,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#37474f\"},\"valueFont\":{\"family\":\"Roboto\",\"size\":40,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#444\",\"shadowColor\":\"rgba(0,0,0,0.3)\"},\"minValue\":-60,\"highlights\":[{\"from\":-60,\"to\":-40,\"color\":\"#90caf9\"},{\"from\":-40,\"to\":-20,\"color\":\"rgba(144, 202, 249, 0.66)\"},{\"from\":-20,\"to\":0,\"color\":\"rgba(144, 202, 249, 0.33)\"},{\"from\":0,\"to\":20,\"color\":\"rgba(244, 67, 54, 0.2)\"},{\"from\":20,\"to\":40,\"color\":\"rgba(244, 67, 54, 0.4)\"},{\"from\":40,\"to\":60,\"color\":\"rgba(244, 67, 54, 0.6)\"},{\"from\":60,\"to\":80,\"color\":\"rgba(244, 67, 54, 0.8)\"},{\"from\":80,\"to\":100,\"color\":\"#f44336\"}],\"unitTitle\":\"Temperature\",\"units\":\"°C\",\"colorBarProgress\":\"#90caf9\",\"colorBarProgressEnd\":\"#f44336\",\"colorBarStroke\":\"#b0bec5\",\"valueDec\":1},\"title\":\"Thermometer scale\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400}}" } }, @@ -54,9 +56,10 @@ "resources": [], "templateHtml": "\n", "templateCss": "", - "controllerScript": "self.onInit = function() {\n self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge'); \n}\n\nself.onDataUpdated = function() {\n self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.gauge.mobileModeChanged();\n}\n\nself.getSettingsSchema = function() {\n return TbAnalogueRadialGauge.settingsSchema;\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n}\n\nself.onDestroy = function() {\n self.ctx.gauge.destroy();\n}\n", + "controllerScript": "self.onInit = function() {\n self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge'); \n}\n\nself.onDataUpdated = function() {\n self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n}\n\nself.onDestroy = function() {\n self.ctx.gauge.destroy();\n}\n", "settingsSchema": "{}", "dataKeySettingsSchema": "{}\n", + "settingsDirective": "tb-analogue-radial-gauge-widget-settings", "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Temperature\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.7282710489093589,\"funcBody\":\"var value = prevValue + Math.random() * 40 - 20;\\nif (value < -60) {\\n\\tvalue = -60;\\n} else if (value > 60) {\\n\\tvalue = 60;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"maxValue\":60,\"startAngle\":67.5,\"ticksAngle\":225,\"showBorder\":true,\"defaultColor\":\"#e65100\",\"needleCircleSize\":7,\"highlights\":[{\"from\":-60,\"to\":-50,\"color\":\"#42a5f5\"},{\"from\":-50,\"to\":-40,\"color\":\"rgba(66, 165, 245, 0.83)\"},{\"from\":-40,\"to\":-30,\"color\":\"rgba(66, 165, 245, 0.66)\"},{\"from\":-30,\"to\":-20,\"color\":\"rgba(66, 165, 245, 0.5)\"},{\"from\":-20,\"to\":-10,\"color\":\"rgba(66, 165, 245, 0.33)\"},{\"from\":-10,\"to\":0,\"color\":\"rgba(66, 165, 245, 0.16)\"},{\"from\":0,\"to\":10,\"color\":\"rgba(229, 115, 115, 0.16)\"},{\"from\":10,\"to\":20,\"color\":\"rgba(229, 115, 115, 0.33)\"},{\"from\":20,\"to\":30,\"color\":\"rgba(229, 115, 115, 0.5)\"},{\"from\":30,\"to\":40,\"color\":\"rgba(229, 115, 115, 0.66)\"},{\"from\":40,\"to\":50,\"color\":\"rgba(229, 115, 115, 0.83)\"},{\"from\":50,\"to\":60,\"color\":\"#e57373\"}],\"showUnitTitle\":true,\"colorPlate\":\"#cfd8dc\",\"colorMajorTicks\":\"#444\",\"colorMinorTicks\":\"#666\",\"minorTicks\":2,\"valueInt\":3,\"valueDec\":1,\"highlightsWidth\":15,\"valueBox\":true,\"animation\":true,\"animationDuration\":1000,\"animationRule\":\"bounce\",\"colorNeedleShadowUp\":\"rgba(2, 255, 255, 0)\",\"colorNeedleShadowDown\":\"rgba(188, 143, 143, 0.78)\",\"units\":\"°C\",\"majorTicksCount\":12,\"numbersFont\":{\"family\":\"Roboto\",\"size\":20,\"style\":\"normal\",\"weight\":\"normal\",\"color\":\"#263238\"},\"titleFont\":{\"family\":\"Roboto\",\"size\":24,\"style\":\"normal\",\"weight\":\"normal\",\"color\":\"#263238\"},\"unitsFont\":{\"family\":\"Roboto\",\"size\":28,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#616161\"},\"valueFont\":{\"family\":\"Segment7Standard\",\"size\":30,\"style\":\"normal\",\"weight\":\"normal\",\"shadowColor\":\"rgba(0, 0, 0, 0.49)\",\"color\":\"#444\"},\"colorValueBoxRect\":\"#888\",\"colorValueBoxRectEnd\":\"#666\",\"colorValueBoxBackground\":\"#babab2\",\"colorValueBoxShadow\":\"rgba(0,0,0,1)\",\"unitTitle\":\"Temperature\",\"minValue\":-60},\"title\":\"Temperature radial gauge\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400}}" } }, @@ -72,9 +75,10 @@ "resources": [], "templateHtml": "\n", "templateCss": "", - "controllerScript": "self.onInit = function() {\n self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge'); \n}\n\nself.onDataUpdated = function() {\n self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.gauge.mobileModeChanged();\n}\n\nself.getSettingsSchema = function() {\n return TbAnalogueRadialGauge.settingsSchema;\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n}\n\nself.onDestroy = function() {\n self.ctx.gauge.destroy();\n}\n", + "controllerScript": "self.onInit = function() {\n self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge'); \n}\n\nself.onDataUpdated = function() {\n self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.gauge.mobileModeChanged();\n}\n\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n}\n\nself.onDestroy = function() {\n self.ctx.gauge.destroy();\n}\n", "settingsSchema": "{}", "dataKeySettingsSchema": "{}\n", + "settingsDirective": "tb-analogue-radial-gauge-widget-settings", "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Speed\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.7282710489093589,\"funcBody\":\"var value = prevValue + Math.random() * 50 - 25;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 220) {\\n\\tvalue = 220;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"maxValue\":180,\"startAngle\":45,\"ticksAngle\":270,\"showBorder\":false,\"defaultColor\":\"#e65100\",\"needleCircleSize\":7,\"highlights\":[{\"from\":80,\"to\":120,\"color\":\"#fdd835\"},{\"color\":\"#e57373\",\"from\":120,\"to\":180}],\"showUnitTitle\":false,\"colorPlate\":\"#fff\",\"colorMajorTicks\":\"#444\",\"colorMinorTicks\":\"#666\",\"minorTicks\":2,\"valueInt\":3,\"minValue\":0,\"valueDec\":0,\"highlightsWidth\":15,\"valueBox\":true,\"animation\":true,\"animationDuration\":1500,\"animationRule\":\"linear\",\"colorNeedleShadowUp\":\"rgba(2, 255, 255, 0)\",\"colorNeedleShadowDown\":\"rgba(188, 143, 143, 0.78)\",\"units\":\"MPH\",\"majorTicksCount\":9,\"numbersFont\":{\"family\":\"Roboto\",\"size\":22,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#616161\"},\"titleFont\":{\"family\":\"Roboto\",\"size\":24,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#888\"},\"unitsFont\":{\"family\":\"Roboto\",\"size\":28,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#616161\"},\"valueFont\":{\"size\":32,\"style\":\"normal\",\"weight\":\"normal\",\"shadowColor\":\"rgba(0, 0, 0, 0.49)\",\"color\":\"#444\",\"family\":\"Segment7Standard\"},\"colorValueBoxRect\":\"#888\",\"colorValueBoxRectEnd\":\"#666\",\"colorValueBoxBackground\":\"#babab2\",\"colorValueBoxShadow\":\"rgba(0,0,0,1)\"},\"title\":\"Speed gauge\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400}}" } }, @@ -90,9 +94,10 @@ "resources": [], "templateHtml": "\n", "templateCss": "", - "controllerScript": "self.onInit = function() {\n self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge'); \n}\n\nself.onDataUpdated = function() {\n self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.gauge.mobileModeChanged();\n}\n\nself.getSettingsSchema = function() {\n return TbAnalogueRadialGauge.settingsSchema;\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n}\n\nself.onDestroy = function() {\n self.ctx.gauge.destroy();\n}\n", + "controllerScript": "self.onInit = function() {\n self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge'); \n}\n\nself.onDataUpdated = function() {\n self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n}\n\nself.onDestroy = function() {\n self.ctx.gauge.destroy();\n}\n", "settingsSchema": "{}", "dataKeySettingsSchema": "{}\n", + "settingsDirective": "tb-analogue-radial-gauge-widget-settings", "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Temp\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.7282710489093589,\"funcBody\":\"var value = prevValue + Math.random() * 50 - 25;\\nif (value < -100) {\\n\\tvalue = -100;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"maxValue\":100,\"startAngle\":45,\"ticksAngle\":270,\"showBorder\":true,\"defaultColor\":\"#e65100\",\"needleCircleSize\":10,\"highlights\":[],\"showUnitTitle\":true,\"colorPlate\":\"#fff\",\"colorMajorTicks\":\"#444\",\"colorMinorTicks\":\"#666\",\"minorTicks\":10,\"valueInt\":3,\"valueDec\":0,\"highlightsWidth\":15,\"valueBox\":true,\"animation\":true,\"animationDuration\":500,\"animationRule\":\"cycle\",\"colorNeedleShadowUp\":\"rgba(2, 255, 255, 0)\",\"numbersFont\":{\"family\":\"Roboto\",\"size\":18,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#616161\"},\"titleFont\":{\"family\":\"Roboto\",\"size\":24,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#888\"},\"unitsFont\":{\"family\":\"Roboto\",\"size\":22,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#616161\"},\"valueFont\":{\"family\":\"Segment7Standard\",\"size\":36,\"style\":\"normal\",\"weight\":\"normal\",\"shadowColor\":\"rgba(0, 0, 0, 0.49)\",\"color\":\"#444\"},\"minValue\":-100,\"colorNeedleShadowDown\":\"rgba(188,143,143,0.45)\",\"colorValueBoxRect\":\"#888\",\"colorValueBoxRectEnd\":\"#666\",\"colorValueBoxBackground\":\"#babab2\",\"colorValueBoxShadow\":\"rgba(0,0,0,1)\"},\"title\":\"Radial gauge\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400}}" } } diff --git a/ui-ngx/package.json b/ui-ngx/package.json index a6e28516a3..775454c11a 100644 --- a/ui-ngx/package.json +++ b/ui-ngx/package.json @@ -68,7 +68,6 @@ "ngx-clipboard": "^14.0.2", "ngx-color-picker": "^11.0.0", "ngx-daterangepicker-material": "^5.0.1", - "ngx-drag-drop": "^2.0.0", "ngx-flowchart": "https://github.com/thingsboard/ngx-flowchart.git#release/1.0.0", "ngx-hm-carousel": "^2.0.1", "ngx-markdown": "^12.0.1", diff --git a/ui-ngx/src/app/modules/home/components/widget/data-keys.component.html b/ui-ngx/src/app/modules/home/components/widget/data-keys.component.html index 216927fe76..3527a5ca2e 100644 --- a/ui-ngx/src/app/modules/home/components/widget/data-keys.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/data-keys.component.html @@ -17,7 +17,7 @@ --> - { - static get settingsSchema(): JsonSettingsSchema { - return analogueCompassSettingsSchemaValue; - } - constructor(ctx: WidgetContext, canvasId: string) { super(ctx, canvasId); } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/analogue-gauge.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/analogue-gauge.models.ts index 55fd12fc9f..de57c455d9 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/analogue-gauge.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/analogue-gauge.models.ts @@ -16,7 +16,6 @@ import * as CanvasGauges from 'canvas-gauges'; import { FontSettings, getFontFamily } from '@home/components/widget/lib/settings.models'; -import { JsonSettingsSchema } from '@shared/models/widget.models'; import { WidgetContext } from '@home/models/widget-component.models'; import { isDefined } from '@core/utils'; import * as tinycolor_ from 'tinycolor2'; @@ -67,776 +66,6 @@ export interface AnalogueGaugeSettings { animationRule: AnimationRule; } -export const analogueGaugeSettingsSchema: JsonSettingsSchema = { - schema: { - type: 'object', - title: 'Settings', - properties: { - minValue: { - title: 'Minimum value', - type: 'number', - default: 0 - }, - maxValue: { - title: 'Maximum value', - type: 'number', - default: 100 - }, - unitTitle: { - title: 'Unit title', - type: 'string', - default: null - }, - showUnitTitle: { - title: 'Show unit title', - type: 'boolean', - default: true - }, - majorTicksCount: { - title: 'Major ticks count', - type: 'number', - default: null - }, - minorTicks: { - title: 'Minor ticks count', - type: 'number', - default: 2 - }, - valueBox: { - title: 'Show value box', - type: 'boolean', - default: true - }, - valueInt: { - title: 'Digits count for integer part of value', - type: 'number', - default: 3 - }, - defaultColor: { - title: 'Default color', - type: 'string', - default: null - }, - colorPlate: { - title: 'Plate color', - type: 'string', - default: '#fff' - }, - colorMajorTicks: { - title: 'Major ticks color', - type: 'string', - default: '#444' - }, - colorMinorTicks: { - title: 'Minor ticks color', - type: 'string', - default: '#666' - }, - colorNeedle: { - title: 'Needle color', - type: 'string', - default: null - }, - colorNeedleEnd: { - title: 'Needle color - end gradient', - type: 'string', - default: null - }, - colorNeedleShadowUp: { - title: 'Upper half of the needle shadow color', - type: 'string', - default: 'rgba(2,255,255,0.2)' - }, - colorNeedleShadowDown: { - title: 'Drop shadow needle color.', - type: 'string', - default: 'rgba(188,143,143,0.45)' - }, - colorValueBoxRect: { - title: 'Value box rectangle stroke color', - type: 'string', - default: '#888' - }, - colorValueBoxRectEnd: { - title: 'Value box rectangle stroke color - end gradient', - type: 'string', - default: '#666' - }, - colorValueBoxBackground: { - title: 'Value box background color', - type: 'string', - default: '#babab2' - }, - colorValueBoxShadow: { - title: 'Value box shadow color', - type: 'string', - default: 'rgba(0,0,0,1)' - }, - highlights: { - title: 'Highlights', - type: 'array', - items: { - title: 'Highlight', - type: 'object', - properties: { - from: { - title: 'From', - type: 'number' - }, - to: { - title: 'To', - type: 'number' - }, - color: { - title: 'Color', - type: 'string' - } - } - } - }, - highlightsWidth: { - title: 'Highlights width', - type: 'number', - default: 15 - }, - showBorder: { - title: 'Show border', - type: 'boolean', - default: true - }, - numbersFont: { - title: 'Tick numbers font', - type: 'object', - properties: { - family: { - title: 'Font family', - type: 'string', - default: 'Roboto' - }, - size: { - title: 'Size', - type: 'number', - default: 18 - }, - style: { - title: 'Style', - type: 'string', - default: 'normal' - }, - weight: { - title: 'Weight', - type: 'string', - default: '500' - }, - color: { - title: 'color', - type: 'string', - default: null - } - } - }, - titleFont: { - title: 'Title text font', - type: 'object', - properties: { - family: { - title: 'Font family', - type: 'string', - default: 'Roboto' - }, - size: { - title: 'Size', - type: 'number', - default: 24 - }, - style: { - title: 'Style', - type: 'string', - default: 'normal' - }, - weight: { - title: 'Weight', - type: 'string', - default: '500' - }, - color: { - title: 'color', - type: 'string', - default: '#888' - } - } - }, - unitsFont: { - title: 'Units text font', - type: 'object', - properties: { - family: { - title: 'Font family', - type: 'string', - default: 'Roboto' - }, - size: { - title: 'Size', - type: 'number', - default: 22 - }, - style: { - title: 'Style', - type: 'string', - default: 'normal' - }, - weight: { - title: 'Weight', - type: 'string', - default: '500' - }, - color: { - title: 'color', - type: 'string', - default: '#888' - } - } - }, - valueFont: { - title: 'Value text font', - type: 'object', - properties: { - family: { - title: 'Font family', - type: 'string', - default: 'Roboto' - }, - size: { - title: 'Size', - type: 'number', - default: 40 - }, - style: { - title: 'Style', - type: 'string', - default: 'normal' - }, - weight: { - title: 'Weight', - type: 'string', - default: '500' - }, - color: { - title: 'color', - type: 'string', - default: '#444' - }, - shadowColor: { - title: 'Shadow color', - type: 'string', - default: 'rgba(0,0,0,0.3)' - } - } - }, - animation: { - title: 'Enable animation', - type: 'boolean', - default: true - }, - animationDuration: { - title: 'Animation duration', - type: 'number', - default: 500 - }, - animationRule: { - title: 'Animation rule', - type: 'string', - default: 'cycle' - } - }, - required: [] - }, - form: [ - 'minValue', - 'maxValue', - 'unitTitle', - 'showUnitTitle', - 'majorTicksCount', - 'minorTicks', - 'valueBox', - 'valueInt', - { - key: 'defaultColor', - type: 'color' - }, - { - key: 'colorPlate', - type: 'color' - }, - { - key: 'colorMajorTicks', - type: 'color' - }, - { - key: 'colorMinorTicks', - type: 'color' - }, - { - key: 'colorNeedle', - type: 'color' - }, - { - key: 'colorNeedleEnd', - type: 'color' - }, - { - key: 'colorNeedleShadowUp', - type: 'color' - }, - { - key: 'colorNeedleShadowDown', - type: 'color' - }, - { - key: 'colorValueBoxRect', - type: 'color' - }, - { - key: 'colorValueBoxRectEnd', - type: 'color' - }, - { - key: 'colorValueBoxBackground', - type: 'color' - }, - { - key: 'colorValueBoxShadow', - type: 'color' - }, - { - key: 'highlights', - items: [ - 'highlights[].from', - 'highlights[].to', - { - key: 'highlights[].color', - type: 'color' - } - ] - }, - 'highlightsWidth', - 'showBorder', - { - key: 'numbersFont', - items: [ - 'numbersFont.family', - 'numbersFont.size', - { - key: 'numbersFont.style', - type: 'rc-select', - multiple: false, - items: [ - { - value: 'normal', - label: 'Normal' - }, - { - value: 'italic', - label: 'Italic' - }, - { - value: 'oblique', - label: 'Oblique' - } - ] - }, - { - key: 'numbersFont.weight', - type: 'rc-select', - multiple: false, - items: [ - { - value: 'normal', - label: 'Normal' - }, - { - value: 'bold', - label: 'Bold' - }, - { - value: 'bolder', - label: 'Bolder' - }, - { - value: 'lighter', - label: 'Lighter' - }, - { - value: '100', - label: '100' - }, - { - value: '200', - label: '200' - }, - { - value: '300', - label: '300' - }, - { - value: '400', - label: '400' - }, - { - value: '500', - label: '500' - }, - { - value: '600', - label: '600' - }, - { - value: '700', - label: '700' - }, - { - value: '800', - label: '800' - }, - { - value: '900', - label: '900' - } - ] - }, - { - key: 'numbersFont.color', - type: 'color' - } - ] - }, - { - key: 'titleFont', - items: [ - 'titleFont.family', - 'titleFont.size', - { - key: 'titleFont.style', - type: 'rc-select', - multiple: false, - items: [ - { - value: 'normal', - label: 'Normal' - }, - { - value: 'italic', - label: 'Italic' - }, - { - value: 'oblique', - label: 'Oblique' - } - ] - }, - { - key: 'titleFont.weight', - type: 'rc-select', - multiple: false, - items: [ - { - value: 'normal', - label: 'Normal' - }, - { - value: 'bold', - label: 'Bold' - }, - { - value: 'bolder', - label: 'Bolder' - }, - { - value: 'lighter', - label: 'Lighter' - }, - { - value: '100', - label: '100' - }, - { - value: '200', - label: '200' - }, - { - value: '300', - label: '300' - }, - { - value: '400', - label: '400' - }, - { - value: '500', - label: '500' - }, - { - value: '600', - label: '600' - }, - { - value: '700', - label: '700' - }, - { - value: '800', - label: '800' - }, - { - value: '900', - label: '900' - } - ] - }, - { - key: 'titleFont.color', - type: 'color' - } - ] - }, - { - key: 'unitsFont', - items: [ - 'unitsFont.family', - 'unitsFont.size', - { - key: 'unitsFont.style', - type: 'rc-select', - multiple: false, - items: [ - { - value: 'normal', - label: 'Normal' - }, - { - value: 'italic', - label: 'Italic' - }, - { - value: 'oblique', - label: 'Oblique' - } - ] - }, - { - key: 'unitsFont.weight', - type: 'rc-select', - multiple: false, - items: [ - { - value: 'normal', - label: 'Normal' - }, - { - value: 'bold', - label: 'Bold' - }, - { - value: 'bolder', - label: 'Bolder' - }, - { - value: 'lighter', - label: 'Lighter' - }, - { - value: '100', - label: '100' - }, - { - value: '200', - label: '200' - }, - { - value: '300', - label: '300' - }, - { - value: '400', - label: '400' - }, - { - value: '500', - label: '500' - }, - { - value: '600', - label: '600' - }, - { - value: '700', - label: '700' - }, - { - value: '800', - label: '800' - }, - { - value: '900', - label: '900' - } - ] - }, - { - key: 'unitsFont.color', - type: 'color' - } - ] - }, - { - key: 'valueFont', - items: [ - 'valueFont.family', - 'valueFont.size', - { - key: 'valueFont.style', - type: 'rc-select', - multiple: false, - items: [ - { - value: 'normal', - label: 'Normal' - }, - { - value: 'italic', - label: 'Italic' - }, - { - value: 'oblique', - label: 'Oblique' - } - ] - }, - { - key: 'valueFont.weight', - type: 'rc-select', - multiple: false, - items: [ - { - value: 'normal', - label: 'Normal' - }, - { - value: 'bold', - label: 'Bold' - }, - { - value: 'bolder', - label: 'Bolder' - }, - { - value: 'lighter', - label: 'Lighter' - }, - { - value: '100', - label: '100' - }, - { - value: '200', - label: '200' - }, - { - value: '300', - label: '300' - }, - { - value: '400', - label: '400' - }, - { - value: '500', - label: '500' - }, - { - value: '600', - label: '600' - }, - { - value: '700', - label: '700' - }, - { - value: '800', - label: '800' - }, - { - value: '900', - label: '900' - } - ] - }, - { - key: 'valueFont.color', - type: 'color' - }, - { - key: 'valueFont.shadowColor', - type: 'color' - } - ] - }, - 'animation', - 'animationDuration', - { - key: 'animationRule', - type: 'rc-select', - multiple: false, - items: [ - { - value: 'linear', - label: 'Linear' - }, - { - value: 'quad', - label: 'Quad' - }, - { - value: 'quint', - label: 'Quint' - }, - { - value: 'cycle', - label: 'Cycle' - }, - { - value: 'bounce', - label: 'Bounce' - }, - { - value: 'elastic', - label: 'Elastic' - }, - { - value: 'dequad', - label: 'Dequad' - }, - { - value: 'dequint', - label: 'Dequint' - }, - { - value: 'decycle', - label: 'Decycle' - }, - { - value: 'debounce', - label: 'Debounce' - }, - { - value: 'delastic', - label: 'Delastic' - } - ] - } - ] -}; - export abstract class TbBaseGauge { private gauge: BaseGauge; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/analogue-linear-gauge.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/analogue-linear-gauge.models.ts index 29e9acf4ed..eeef69401c 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/analogue-linear-gauge.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/analogue-linear-gauge.models.ts @@ -14,9 +14,7 @@ /// limitations under the License. /// -import { JsonSettingsSchema } from '@shared/models/widget.models'; -import { AnalogueGaugeSettings, analogueGaugeSettingsSchema } from '@home/components/widget/lib/analogue-gauge.models'; -import { deepClone } from '@core/utils'; +import { AnalogueGaugeSettings } from '@home/components/widget/lib/analogue-gauge.models'; export interface AnalogueLinearGaugeSettings extends AnalogueGaugeSettings { barStrokeWidth: number; @@ -26,63 +24,3 @@ export interface AnalogueLinearGaugeSettings extends AnalogueGaugeSettings { colorBarProgress: string; colorBarProgressEnd: string; } - -export function getAnalogueLinearGaugeSettingsSchema(): JsonSettingsSchema { - const analogueLinearGaugeSettingsSchema = deepClone(analogueGaugeSettingsSchema); - analogueLinearGaugeSettingsSchema.schema.properties = - {...analogueLinearGaugeSettingsSchema.schema.properties, ...{ - barStrokeWidth: { - title: 'Bar stroke width', - type: 'number', - default: 2.5 - }, - colorBarStroke: { - title: 'Bar stroke color', - type: 'string', - default: null - }, - colorBar: { - title: 'Bar background color', - type: 'string', - default: '#fff' - }, - colorBarEnd: { - title: 'Bar background color - end gradient', - type: 'string', - default: '#ddd' - }, - colorBarProgress: { - title: 'Progress bar color', - type: 'string', - default: null - }, - colorBarProgressEnd: { - title: 'Progress bar color - end gradient', - type: 'string', - default: null - }}}; - analogueLinearGaugeSettingsSchema.form.unshift( - 'barStrokeWidth', - { - key: 'colorBarStroke', - type: 'color' - }, - { - key: 'colorBar', - type: 'color' - }, - { - key: 'colorBarEnd', - type: 'color' - }, - { - key: 'colorBarProgress', - type: 'color' - }, - { - key: 'colorBarProgressEnd', - type: 'color' - } - ); - return analogueLinearGaugeSettingsSchema; -} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/analogue-linear-gauge.ts b/ui-ngx/src/app/modules/home/components/widget/lib/analogue-linear-gauge.ts index 3f88ba1f6f..56ac45eada 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/analogue-linear-gauge.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/analogue-linear-gauge.ts @@ -19,8 +19,7 @@ import { JsonSettingsSchema } from '@shared/models/widget.models'; import { WidgetContext } from '@home/models/widget-component.models'; import { TbAnalogueGauge } from '@home/components/widget/lib/analogue-gauge.models'; import { - AnalogueLinearGaugeSettings, - getAnalogueLinearGaugeSettingsSchema + AnalogueLinearGaugeSettings } from '@home/components/widget/lib/analogue-linear-gauge.models'; import { isDefined } from '@core/utils'; import * as tinycolor_ from 'tinycolor2'; @@ -30,15 +29,9 @@ import BaseGauge = CanvasGauges.BaseGauge; const tinycolor = tinycolor_; -const analogueLinearGaugeSettingsSchemaValue = getAnalogueLinearGaugeSettingsSchema(); - // @dynamic export class TbAnalogueLinearGauge extends TbAnalogueGauge{ - static get settingsSchema(): JsonSettingsSchema { - return analogueLinearGaugeSettingsSchemaValue; - } - constructor(ctx: WidgetContext, canvasId: string) { super(ctx, canvasId); } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/analogue-radial-gauge.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/analogue-radial-gauge.models.ts index 2204572a97..60cdde278a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/analogue-radial-gauge.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/analogue-radial-gauge.models.ts @@ -14,39 +14,10 @@ /// limitations under the License. /// -import { JsonSettingsSchema } from '@shared/models/widget.models'; -import { AnalogueGaugeSettings, analogueGaugeSettingsSchema } from '@home/components/widget/lib/analogue-gauge.models'; -import { deepClone } from '@core/utils'; +import { AnalogueGaugeSettings } from '@home/components/widget/lib/analogue-gauge.models'; export interface AnalogueRadialGaugeSettings extends AnalogueGaugeSettings { startAngle: number; ticksAngle: number; needleCircleSize: number; } - -export function getAnalogueRadialGaugeSettingsSchema(): JsonSettingsSchema { - const analogueRadialGaugeSettingsSchema = deepClone(analogueGaugeSettingsSchema); - analogueRadialGaugeSettingsSchema.schema.properties = - {...analogueRadialGaugeSettingsSchema.schema.properties, ...{ - startAngle: { - title: 'Start ticks angle', - type: 'number', - default: 45 - }, - ticksAngle: { - title: 'Ticks angle', - type: 'number', - default: 270 - }, - needleCircleSize: { - title: 'Needle circle size', - type: 'number', - default: 10 - }}}; - analogueRadialGaugeSettingsSchema.form.unshift( - 'startAngle', - 'ticksAngle', - 'needleCircleSize' - ); - return analogueRadialGaugeSettingsSchema; -} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/analogue-radial-gauge.ts b/ui-ngx/src/app/modules/home/components/widget/lib/analogue-radial-gauge.ts index 297e229467..08e2e71de6 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/analogue-radial-gauge.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/analogue-radial-gauge.ts @@ -16,25 +16,17 @@ import * as CanvasGauges from 'canvas-gauges'; import { - AnalogueRadialGaugeSettings, - getAnalogueRadialGaugeSettingsSchema + AnalogueRadialGaugeSettings } from '@home/components/widget/lib/analogue-radial-gauge.models'; -import { JsonSettingsSchema } from '@shared/models/widget.models'; import { WidgetContext } from '@home/models/widget-component.models'; import { TbAnalogueGauge } from '@home/components/widget/lib/analogue-gauge.models'; import RadialGauge = CanvasGauges.RadialGauge; import RadialGaugeOptions = CanvasGauges.RadialGaugeOptions; import BaseGauge = CanvasGauges.BaseGauge; -const analogueRadialGaugeSettingsSchemaValue = getAnalogueRadialGaugeSettingsSchema(); - // @dynamic export class TbAnalogueRadialGauge extends TbAnalogueGauge{ - static get settingsSchema(): JsonSettingsSchema { - return analogueRadialGaugeSettingsSchemaValue; - } - constructor(ctx: WidgetContext, canvasId: string) { super(ctx, canvasId); } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html index 6f067e88f9..249ff0a32a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html @@ -50,11 +50,11 @@
widgets.label-widget.x-pos - + widgets.label-widget.y-pos - +
@@ -64,7 +64,7 @@
widgets.label-widget.font-settings - +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.ts index 0c56e66e6f..594d292704 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.ts @@ -20,14 +20,14 @@ 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/cards/label-widget-font.component'; +import { WidgetFont } from '@home/components/widget/lib/settings/common/widget-font.component'; export interface LabelWidgetLabel { pattern: string; x: number; y: number; backgroundColor: string; - font: LabelWidgetFont; + font: WidgetFont; } @Component({ diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.html index 55e4a6816d..472978c097 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.html @@ -23,12 +23,13 @@
widgets.label-widget.labels
-
-
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.ts index cde33be48c..e3ea2473b2 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.ts @@ -20,11 +20,12 @@ import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators } from ' import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { LabelWidgetLabel } from '@home/components/widget/lib/settings/cards/label-widget-label.component'; +import { CdkDragDrop } from '@angular/cdk/drag-drop'; @Component({ selector: 'tb-label-widget-settings', templateUrl: './label-widget-settings.component.html', - styleUrls: ['./label-widget-settings.component.scss', './../widget-settings.scss'] + styleUrls: ['./../widget-settings.scss'] }) export class LabelWidgetSettingsComponent extends WidgetSettingsComponent { @@ -63,8 +64,9 @@ export class LabelWidgetSettingsComponent extends WidgetSettingsComponent { return this.labelWidgetSettingsForm.get('labels') as FormArray; } - public trackByLabel(index: number, labelControl: AbstractControl): number { - return index; + public trackByLabel(index: number, labelControl: AbstractControl): any { + const label: LabelWidgetLabel = labelControl.value; + return label; } public removeLabel(index: number) { @@ -86,7 +88,16 @@ export class LabelWidgetSettingsComponent extends WidgetSettingsComponent { } }; const labelsArray = this.labelWidgetSettingsForm.get('labels') as FormArray; - labelsArray.push(this.fb.control(label, [Validators.required])); + const labelControl = this.fb.control(label, [Validators.required]); + (labelControl as any).new = true; + labelsArray.push(labelControl); this.labelWidgetSettingsForm.updateValueAndValidity(); } + + labelDrop(event: CdkDragDrop) { + const labelsArray = this.labelWidgetSettingsForm.get('labels') as FormArray; + const label = labelsArray.at(event.previousIndex); + labelsArray.removeAt(event.previousIndex); + labelsArray.insert(event.currentIndex, label); + } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-font.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html similarity index 67% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-font.component.html rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html index 1bd94abe6a..c8f4927c38 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-font.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html @@ -15,43 +15,43 @@ limitations under the License. --> -
+
- widgets.label-widget.font-family + widgets.widget-font.font-family - widgets.label-widget.relative-font-size + {{ sizeTitle }} - widgets.label-widget.font-style + widgets.widget-font.font-style - {{ 'widgets.label-widget.font-style-normal' | translate }} + {{ 'widgets.widget-font.font-style-normal' | translate }} - {{ 'widgets.label-widget.font-style-italic' | translate }} + {{ 'widgets.widget-font.font-style-italic' | translate }} - {{ 'widgets.label-widget.font-style-oblique' | translate }} + {{ 'widgets.widget-font.font-style-oblique' | translate }} - widgets.label-widget.font-weight + widgets.widget-font.font-weight - {{ 'widgets.label-widget.font-weight-normal' | translate }} + {{ 'widgets.widget-font.font-weight-normal' | translate }} - {{ 'widgets.label-widget.font-weight-bold' | translate }} + {{ 'widgets.widget-font.font-weight-bold' | translate }} - {{ 'widgets.label-widget.font-weight-bolder' | translate }} + {{ 'widgets.widget-font.font-weight-bolder' | translate }} - {{ 'widgets.label-widget.font-weight-lighter' | translate }} + {{ 'widgets.widget-font.font-weight-lighter' | translate }} 100 200 @@ -66,6 +66,10 @@ + label="{{ 'widgets.widget-font.color' | translate }}"> + +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-font.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.ts similarity index 70% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-font.component.ts rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.ts index e535f835c0..6600bb25a1 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-font.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.ts @@ -21,38 +21,45 @@ import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { TranslateService } from '@ngx-translate/core'; -export interface LabelWidgetFont { +export interface WidgetFont { family: string; size: number; style: 'normal' | 'italic' | 'oblique'; weight: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; color: string; + shadowColor?: string; } @Component({ - selector: 'tb-label-widget-font', - templateUrl: './label-widget-font.component.html', + selector: 'tb-widget-font', + templateUrl: './widget-font.component.html', styleUrls: [], providers: [ { provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => LabelWidgetFontComponent), + useExisting: forwardRef(() => WidgetFontComponent), multi: true } ] }) -export class LabelWidgetFontComponent extends PageComponent implements OnInit, ControlValueAccessor { +export class WidgetFontComponent extends PageComponent implements OnInit, ControlValueAccessor { @HostBinding('style.display') display = 'block'; @Input() disabled: boolean; - private modelValue: LabelWidgetFont; + @Input() + hasShadowColor = false; + + @Input() + sizeTitle = 'widgets.widget-font.size'; + + private modelValue: WidgetFont; private propagateChange = null; - public labelWidgetFontFormGroup: FormGroup; + public widgetFontFormGroup: FormGroup; constructor(protected store: Store, private translate: TranslateService, @@ -61,14 +68,17 @@ export class LabelWidgetFontComponent extends PageComponent implements OnInit, C } ngOnInit(): void { - this.labelWidgetFontFormGroup = this.fb.group({ + this.widgetFontFormGroup = this.fb.group({ family: [null, []], size: [null, [Validators.min(1)]], style: [null, []], weight: [null, []], color: [null, []] }); - this.labelWidgetFontFormGroup.valueChanges.subscribe(() => { + if (this.hasShadowColor) { + this.widgetFontFormGroup.addControl('shadowColor', this.fb.control(null, [])); + } + this.widgetFontFormGroup.valueChanges.subscribe(() => { this.updateModel(); }); } @@ -83,21 +93,21 @@ export class LabelWidgetFontComponent extends PageComponent implements OnInit, C setDisabledState(isDisabled: boolean): void { this.disabled = isDisabled; if (isDisabled) { - this.labelWidgetFontFormGroup.disable({emitEvent: false}); + this.widgetFontFormGroup.disable({emitEvent: false}); } else { - this.labelWidgetFontFormGroup.enable({emitEvent: false}); + this.widgetFontFormGroup.enable({emitEvent: false}); } } - writeValue(value: LabelWidgetFont): void { + writeValue(value: WidgetFont): void { this.modelValue = value; - this.labelWidgetFontFormGroup.patchValue( + this.widgetFontFormGroup.patchValue( value, {emitEvent: false} ); } private updateModel() { - const value: LabelWidgetFont = this.labelWidgetFontFormGroup.value; + const value: WidgetFont = this.widgetFontFormGroup.value; this.modelValue = value; this.propagateChange(this.modelValue); } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html new file mode 100644 index 0000000000..2e27effaf6 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html @@ -0,0 +1,172 @@ + +
+
+ widgets.gauge.ticks-settings + + widgets.gauge.major-ticks-names + + + {{tickName}} + cancel + + + + + + +
+ + widgets.gauge.minor-ticks-count + + + + +
+ + {{ 'widgets.gauge.show-stroke-ticks' | translate }} + +
+ widgets.gauge.major-ticks-font + +
+
+
+ widgets.gauge.plate-settings + + + + {{ 'widgets.gauge.show-plate-border' | translate }} + +
+ + + + widgets.gauge.border-width + + +
+
+
+ widgets.gauge.needle-settings + + widgets.gauge.needle-circle-size + + +
+ + + + +
+
+
+ widgets.gauge.animation-settings + + + + + {{ 'widgets.gauge.enable-animation' | translate }} + + + + widget-config.advanced-settings + + + +
+ + widgets.gauge.animation-duration + + + + widgets.gauge.animation-rule + + + {{ 'widgets.gauge.animation-linear' | translate }} + + + {{ 'widgets.gauge.animation-quad' | translate }} + + + {{ 'widgets.gauge.animation-quint' | translate }} + + + {{ 'widgets.gauge.animation-cycle' | translate }} + + + {{ 'widgets.gauge.animation-bounce' | translate }} + + + {{ 'widgets.gauge.animation-elastic' | translate }} + + + {{ 'widgets.gauge.animation-dequad' | translate }} + + + {{ 'widgets.gauge.animation-dequint' | translate }} + + + {{ 'widgets.gauge.animation-decycle' | translate }} + + + {{ 'widgets.gauge.animation-debounce' | translate }} + + + {{ 'widgets.gauge.animation-delastic' | translate }} + + + + + widgets.gauge.animation-target + + + {{ 'widgets.gauge.animation-target-needle' | translate }} + + + {{ 'widgets.gauge.animation-target-plate' | translate }} + + + +
+ + +
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.ts new file mode 100644 index 0000000000..4f110e2e8e --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.ts @@ -0,0 +1,171 @@ +/// +/// 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 { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { Component } from '@angular/core'; +import { MatChipInputEvent } from '@angular/material/chips'; +import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes'; +import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'; + +@Component({ + selector: 'tb-analogue-compass-widget-settings', + templateUrl: './analogue-compass-widget-settings.component.html', + styleUrls: ['./../widget-settings.scss'] +}) +export class AnalogueCompassWidgetSettingsComponent extends WidgetSettingsComponent { + + readonly separatorKeysCodes: number[] = [ENTER, COMMA, SEMICOLON]; + + analogueCompassWidgetSettingsForm: FormGroup; + + constructor(protected store: Store, + protected fb: FormBuilder) { + super(store); + } + + protected settingsForm(): FormGroup { + return this.analogueCompassWidgetSettingsForm; + } + + protected defaultSettings(): WidgetSettings { + return { + majorTicks: [], + minorTicks: 22, + showStrokeTicks: false, + needleCircleSize: 10, + showBorder: true, + borderOuterWidth: 10, + colorPlate: '#222', + colorMajorTicks: '#f5f5f5', + colorMinorTicks: '#ddd', + colorNeedle: '#f08080', + colorNeedleCircle: '#e8e8e8', + colorBorder: '#ccc', + majorTickFont: { + family: 'Roboto', + size: 20, + style: 'normal', + weight: '500', + color: '#ccc' + }, + animation: true, + animationDuration: 500, + animationRule: 'cycle', + animationTarget: 'needle' + }; + } + + protected onSettingsSet(settings: WidgetSettings) { + this.analogueCompassWidgetSettingsForm = this.fb.group({ + + // Ticks settings + majorTicks: [settings.majorTicks, []], + colorMajorTicks: [settings.colorMajorTicks, []], + minorTicks: [settings.minorTicks, [Validators.min(0)]], + colorMinorTicks: [settings.colorMinorTicks, []], + showStrokeTicks: [settings.showStrokeTicks, []], + majorTickFont: [settings.majorTickFont, []], + + // Plate settings + colorPlate: [settings.colorPlate, []], + showBorder: [settings.showBorder, []], + colorBorder: [settings.colorBorder, []], + borderOuterWidth: [settings.borderOuterWidth, [Validators.min(0)]], + + // Needle settings + needleCircleSize: [settings.needleCircleSize, [Validators.min(0)]], + colorNeedle: [settings.colorNeedle, []], + colorNeedleCircle: [settings.colorNeedleCircle, []], + + // Animation settings + animation: [settings.animation, []], + animationDuration: [settings.animationDuration, [Validators.min(0)]], + animationRule: [settings.animationRule, []], + animationTarget: [settings.animationTarget, []] + }); + } + + protected validatorTriggers(): string[] { + return ['showBorder', 'animation']; + } + + protected updateValidators(emitEvent: boolean) { + const showBorder: boolean = this.analogueCompassWidgetSettingsForm.get('showBorder').value; + const animation: boolean = this.analogueCompassWidgetSettingsForm.get('animation').value; + if (showBorder) { + this.analogueCompassWidgetSettingsForm.get('colorBorder').enable(); + this.analogueCompassWidgetSettingsForm.get('borderOuterWidth').enable(); + } else { + this.analogueCompassWidgetSettingsForm.get('colorBorder').disable(); + this.analogueCompassWidgetSettingsForm.get('borderOuterWidth').disable(); + } + if (animation) { + this.analogueCompassWidgetSettingsForm.get('animationDuration').enable(); + this.analogueCompassWidgetSettingsForm.get('animationRule').enable(); + this.analogueCompassWidgetSettingsForm.get('animationTarget').enable(); + } else { + this.analogueCompassWidgetSettingsForm.get('animationDuration').disable(); + this.analogueCompassWidgetSettingsForm.get('animationRule').disable(); + this.analogueCompassWidgetSettingsForm.get('animationTarget').disable(); + } + this.analogueCompassWidgetSettingsForm.get('colorBorder').updateValueAndValidity({emitEvent}); + this.analogueCompassWidgetSettingsForm.get('borderOuterWidth').updateValueAndValidity({emitEvent}); + this.analogueCompassWidgetSettingsForm.get('animationDuration').updateValueAndValidity({emitEvent}); + this.analogueCompassWidgetSettingsForm.get('animationRule').updateValueAndValidity({emitEvent}); + this.analogueCompassWidgetSettingsForm.get('animationTarget').updateValueAndValidity({emitEvent}); + } + + majorTicksNamesList(): string[] { + return this.analogueCompassWidgetSettingsForm.get('majorTicks').value; + } + + removeMajorTickName(tickName: string): void { + const tickNames: string[] = this.analogueCompassWidgetSettingsForm.get('majorTicks').value; + const index = tickNames.indexOf(tickName); + if (index >= 0) { + tickNames.splice(index, 1); + this.analogueCompassWidgetSettingsForm.get('majorTicks').setValue(tickNames); + this.analogueCompassWidgetSettingsForm.get('majorTicks').markAsDirty(); + } + } + + addMajorTickName(event: MatChipInputEvent): void { + const input = event.input; + const value = event.value; + + const tickNames: string[] = this.analogueCompassWidgetSettingsForm.get('majorTicks').value; + + if ((value || '').trim()) { + tickNames.push(value.trim()); + this.analogueCompassWidgetSettingsForm.get('majorTicks').setValue(tickNames); + this.analogueCompassWidgetSettingsForm.get('majorTicks').markAsDirty(); + } + + if (input) { + input.value = ''; + } + } + + majorTickNameDrop(event: CdkDragDrop): void { + const tickNames: string[] = this.analogueCompassWidgetSettingsForm.get('majorTicks').value; + moveItemInArray(tickNames, event.previousIndex, event.currentIndex); + this.analogueCompassWidgetSettingsForm.get('majorTicks').setValue(tickNames); + this.analogueCompassWidgetSettingsForm.get('majorTicks').markAsDirty(); + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html new file mode 100644 index 0000000000..b586c31f90 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html @@ -0,0 +1,336 @@ + +
+ + + + + + + + + + +
+ widgets.gauge.ticks-settings +
+ + widgets.gauge.min-value + + + + widgets.gauge.max-value + + +
+
+ + widgets.gauge.major-ticks-count + + + + +
+
+ + widgets.gauge.minor-ticks-count + + + + +
+
+ widgets.gauge.tick-numbers-font + +
+
+
+ widgets.gauge.unit-title-settings + + + + + {{ 'widgets.gauge.show-unit-title' | translate }} + + + + widget-config.advanced-settings + + + +
+ + widgets.gauge.unit-title + + +
+ widgets.gauge.title-font + +
+
+ + +
+
+ widgets.gauge.units-settings +
+ widgets.gauge.units-font + +
+
+
+ widgets.gauge.value-box-settings + + + + + {{ 'widgets.gauge.show-value-box' | translate }} + + + + widget-config.advanced-settings + + + +
+ + widgets.gauge.value-int + + +
+ widgets.gauge.value-font + +
+
+ + + + +
+
+ + + + +
+
+ + +
+
+ widgets.gauge.plate-settings + + + + {{ 'widgets.gauge.show-plate-border' | translate }} + +
+
+ widgets.gauge.needle-settings +
+ + + + +
+
+ + + + +
+
+
+ widgets.gauge.highlights-settings + + widgets.gauge.highlights-width + + +
+ widgets.gauge.highlights +
+
+
+ + +
+
+
+ widgets.gauge.no-highlights +
+
+ +
+
+
+
+
+ widgets.gauge.animation-settings + + + + + {{ 'widgets.gauge.enable-animation' | translate }} + + + + widget-config.advanced-settings + + + +
+ + widgets.gauge.animation-duration + + + + widgets.gauge.animation-rule + + + {{ 'widgets.gauge.animation-linear' | translate }} + + + {{ 'widgets.gauge.animation-quad' | translate }} + + + {{ 'widgets.gauge.animation-quint' | translate }} + + + {{ 'widgets.gauge.animation-cycle' | translate }} + + + {{ 'widgets.gauge.animation-bounce' | translate }} + + + {{ 'widgets.gauge.animation-elastic' | translate }} + + + {{ 'widgets.gauge.animation-dequad' | translate }} + + + {{ 'widgets.gauge.animation-dequint' | translate }} + + + {{ 'widgets.gauge.animation-decycle' | translate }} + + + {{ 'widgets.gauge.animation-debounce' | translate }} + + + {{ 'widgets.gauge.animation-delastic' | translate }} + + + +
+ + +
+
+ + +
+ widgets.gauge.radial-gauge-settings +
+ + widgets.gauge.start-ticks-angle + + + + widgets.gauge.ticks-angle + + +
+ + widgets.gauge.needle-circle-size + + +
+ + + +
+ widgets.gauge.linear-gauge-settings +
+ + widgets.gauge.bar-stroke-width + + + + +
+
+ + + + +
+
+ + + + +
+
+ diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.ts new file mode 100644 index 0000000000..246a268e93 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.ts @@ -0,0 +1,250 @@ +/// +/// 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 { 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 { GaugeHighlight } from '@home/components/widget/lib/settings/gauge/gauge-highlight.component'; +import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'; + +export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponent { + + analogueGaugeWidgetSettingsForm: FormGroup; + + ctx = { + settingsForm: null + }; + + constructor(protected store: Store, + protected fb: FormBuilder) { + super(store); + } + + protected settingsForm(): FormGroup { + return this.analogueGaugeWidgetSettingsForm; + } + + protected defaultSettings(): WidgetSettings { + return { + startAngle: 45, + ticksAngle: 270, + needleCircleSize: 10, + minValue: 0, + maxValue: 100, + showUnitTitle: true, + unitTitle: null, + majorTicksCount: null, + minorTicks: 2, + valueBox: true, + valueInt: 3, + defaultColor: null, + colorPlate: '#fff', + colorMajorTicks: '#444', + colorMinorTicks: '#666', + colorNeedle: null, + colorNeedleEnd: null, + colorNeedleShadowUp: 'rgba(2,255,255,0.2)', + colorNeedleShadowDown: 'rgba(188,143,143,0.45)', + colorValueBoxRect: '#888', + colorValueBoxRectEnd: '#666', + colorValueBoxBackground: '#babab2', + colorValueBoxShadow: 'rgba(0,0,0,1)', + highlights: [], + highlightsWidth: 15, + showBorder: true, + numbersFont: { + family: 'Roboto', + size: 18, + style: 'normal', + weight: '500', + color: null + }, + titleFont: { + family: 'Roboto', + size: 24, + style: 'normal', + weight: '500', + color: '#888' + }, + unitsFont: { + family: 'Roboto', + size: 22, + style: 'normal', + weight: '500', + color: '#888' + }, + valueFont: { + family: 'Roboto', + size: 40, + style: 'normal', + weight: '500', + color: '#444', + shadowColor: 'rgba(0,0,0,0.3)' + }, + animation: true, + animationDuration: 500, + animationRule: 'cycle' + }; + } + + protected onSettingsSet(settings: WidgetSettings) { + const highlightsControls: Array = []; + if (settings.highlights) { + settings.highlights.forEach((highlight) => { + highlightsControls.push(this.fb.control(highlight, [Validators.required])); + }); + } + this.analogueGaugeWidgetSettingsForm = this.fb.group({ + + // Radial gauge settings + startAngle: [settings.startAngle, [Validators.min(0), Validators.max(360)]], + ticksAngle: [settings.ticksAngle, [Validators.min(0), Validators.max(360)]], + needleCircleSize: [settings.needleCircleSize, [Validators.min(0)]], + + defaultColor: [settings.defaultColor, []], + + // Ticks settings + minValue: [settings.minValue, []], + maxValue: [settings.maxValue, []], + majorTicksCount: [settings.majorTicksCount, [Validators.min(0)]], + colorMajorTicks: [settings.colorMajorTicks, []], + minorTicks: [settings.majorTicksCount, [Validators.min(0)]], + colorMinorTicks: [settings.colorMinorTicks, []], + numbersFont: [settings.numbersFont, []], + + // Unit title settings + showUnitTitle: [settings.showUnitTitle, []], + unitTitle: [settings.unitTitle, []], + titleFont: [settings.titleFont, []], + + // Units settings + unitsFont: [settings.unitsFont, []], + + // Value box settings + valueBox: [settings.valueBox, []], + valueInt: [settings.valueInt, [Validators.min(0)]], + valueFont: [settings.valueFont, []], + colorValueBoxRect: [settings.colorValueBoxRect, []], + colorValueBoxRectEnd: [settings.colorValueBoxRectEnd, []], + colorValueBoxBackground: [settings.colorValueBoxBackground, []], + colorValueBoxShadow: [settings.colorValueBoxShadow, []], + + // Plate settings + showBorder: [settings.showBorder, []], + colorPlate: [settings.colorPlate, []], + + // Needle settings + colorNeedle: [settings.colorNeedle, []], + colorNeedleEnd: [settings.colorNeedleEnd, []], + colorNeedleShadowUp: [settings.colorNeedleShadowUp, []], + colorNeedleShadowDown: [settings.colorNeedleShadowDown, []], + + // Highlights settings + highlightsWidth: [settings.highlightsWidth, [Validators.min(0)]], + highlights: this.fb.array(highlightsControls), + + // Animation settings + animation: [settings.animation, []], + animationDuration: [settings.animationDuration, [Validators.min(0)]], + animationRule: [settings.animationRule, []], + }); + this.ctx.settingsForm = this.analogueGaugeWidgetSettingsForm; + } + + protected validatorTriggers(): string[] { + return ['showUnitTitle', 'valueBox', 'animation']; + } + + protected updateValidators(emitEvent: boolean) { + const showUnitTitle: boolean = this.analogueGaugeWidgetSettingsForm.get('showUnitTitle').value; + const valueBox: boolean = this.analogueGaugeWidgetSettingsForm.get('valueBox').value; + const animation: boolean = this.analogueGaugeWidgetSettingsForm.get('animation').value; + if (showUnitTitle) { + this.analogueGaugeWidgetSettingsForm.get('unitTitle').enable(); + this.analogueGaugeWidgetSettingsForm.get('titleFont').enable(); + } else { + this.analogueGaugeWidgetSettingsForm.get('unitTitle').disable(); + this.analogueGaugeWidgetSettingsForm.get('titleFont').disable(); + } + if (valueBox) { + this.analogueGaugeWidgetSettingsForm.get('valueInt').enable(); + this.analogueGaugeWidgetSettingsForm.get('valueFont').enable(); + this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRect').enable(); + this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRectEnd').enable(); + this.analogueGaugeWidgetSettingsForm.get('colorValueBoxBackground').enable(); + this.analogueGaugeWidgetSettingsForm.get('colorValueBoxShadow').enable(); + } else { + this.analogueGaugeWidgetSettingsForm.get('valueInt').disable(); + this.analogueGaugeWidgetSettingsForm.get('valueFont').disable(); + this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRect').disable(); + this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRectEnd').disable(); + this.analogueGaugeWidgetSettingsForm.get('colorValueBoxBackground').disable(); + this.analogueGaugeWidgetSettingsForm.get('colorValueBoxShadow').disable(); + } + if (animation) { + this.analogueGaugeWidgetSettingsForm.get('animationDuration').enable(); + this.analogueGaugeWidgetSettingsForm.get('animationRule').enable(); + } else { + this.analogueGaugeWidgetSettingsForm.get('animationDuration').disable(); + this.analogueGaugeWidgetSettingsForm.get('animationRule').disable(); + } + this.analogueGaugeWidgetSettingsForm.get('unitTitle').updateValueAndValidity({emitEvent}); + this.analogueGaugeWidgetSettingsForm.get('titleFont').updateValueAndValidity({emitEvent}); + this.analogueGaugeWidgetSettingsForm.get('valueInt').updateValueAndValidity({emitEvent}); + this.analogueGaugeWidgetSettingsForm.get('valueFont').updateValueAndValidity({emitEvent}); + this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRect').updateValueAndValidity({emitEvent}); + this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRectEnd').updateValueAndValidity({emitEvent}); + this.analogueGaugeWidgetSettingsForm.get('colorValueBoxBackground').updateValueAndValidity({emitEvent}); + this.analogueGaugeWidgetSettingsForm.get('colorValueBoxShadow').updateValueAndValidity({emitEvent}); + this.analogueGaugeWidgetSettingsForm.get('animationDuration').updateValueAndValidity({emitEvent}); + this.analogueGaugeWidgetSettingsForm.get('animationRule').updateValueAndValidity({emitEvent}); + } + + highlightsFormArray(): FormArray { + return this.analogueGaugeWidgetSettingsForm.get('highlights') as FormArray; + } + + public trackByHighlight(index: number, highlightControl: AbstractControl): any { + const highlight: GaugeHighlight = highlightControl.value; + return highlight; + } + + public removeHighlight(index: number) { + (this.analogueGaugeWidgetSettingsForm.get('highlights') as FormArray).removeAt(index); + } + + public addHighlight() { + const highlight: GaugeHighlight = { + from: null, + to: null, + color: null + }; + const highlightsArray = this.analogueGaugeWidgetSettingsForm.get('highlights') as FormArray; + const highlightControl = this.fb.control(highlight, [Validators.required]); + (highlightControl as any).new = true; + highlightsArray.push(highlightControl); + this.analogueGaugeWidgetSettingsForm.updateValueAndValidity(); + } + + highlightDrop(event: CdkDragDrop) { + const highlightsArray = this.analogueGaugeWidgetSettingsForm.get('highlights') as FormArray; + const highlight = highlightsArray.at(event.previousIndex); + highlightsArray.removeAt(event.previousIndex); + highlightsArray.insert(event.currentIndex, highlight); + } + +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-linear-gauge-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-linear-gauge-widget-settings.component.ts new file mode 100644 index 0000000000..d5a424cb6d --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-linear-gauge-widget-settings.component.ts @@ -0,0 +1,66 @@ +/// +/// 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 } from '@shared/models/widget.models'; +import { FormBuilder, Validators } from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { + AnalogueGaugeWidgetSettingsComponent +} from '@home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component'; + +@Component({ + selector: 'tb-analogue-linear-gauge-widget-settings', + templateUrl: './analogue-gauge-widget-settings.component.html', + styleUrls: ['./../widget-settings.scss'] +}) +export class AnalogueLinearGaugeWidgetSettingsComponent extends AnalogueGaugeWidgetSettingsComponent { + + gaugeType = 'linear'; + + constructor(protected store: Store, + protected fb: FormBuilder) { + super(store, fb); + } + + protected defaultSettings(): WidgetSettings { + const settings = super.defaultSettings(); + settings.barStrokeWidth = 2.5; + settings.colorBarStroke = null; + settings.colorBar = '#fff'; + settings.colorBarEnd = '#ddd'; + settings.colorBarProgress = null; + settings.colorBarProgressEnd = null; + return settings; + } + + protected onSettingsSet(settings: WidgetSettings) { + super.onSettingsSet(settings); + this.analogueGaugeWidgetSettingsForm.addControl('barStrokeWidth', + this.fb.control(settings.barStrokeWidth, [Validators.min(0)])); + this.analogueGaugeWidgetSettingsForm.addControl('colorBarStroke', + this.fb.control(settings.colorBarStroke, [])); + this.analogueGaugeWidgetSettingsForm.addControl('colorBar', + this.fb.control(settings.colorBar, [])); + this.analogueGaugeWidgetSettingsForm.addControl('colorBarEnd', + this.fb.control(settings.colorBarEnd, [])); + this.analogueGaugeWidgetSettingsForm.addControl('colorBarProgress', + this.fb.control(settings.colorBarProgress, [])); + this.analogueGaugeWidgetSettingsForm.addControl('colorBarProgressEnd', + this.fb.control(settings.colorBarProgressEnd, [])); + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-radial-gauge-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-radial-gauge-widget-settings.component.ts new file mode 100644 index 0000000000..0641fb5ab3 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-radial-gauge-widget-settings.component.ts @@ -0,0 +1,57 @@ +/// +/// 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 } from '@shared/models/widget.models'; +import { FormBuilder, Validators } from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { + AnalogueGaugeWidgetSettingsComponent +} from '@home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component'; + +@Component({ + selector: 'tb-analogue-radial-gauge-widget-settings', + templateUrl: './analogue-gauge-widget-settings.component.html', + styleUrls: ['./../widget-settings.scss'] +}) +export class AnalogueRadialGaugeWidgetSettingsComponent extends AnalogueGaugeWidgetSettingsComponent { + + gaugeType = 'radial'; + + constructor(protected store: Store, + protected fb: FormBuilder) { + super(store, fb); + } + + protected defaultSettings(): WidgetSettings { + const settings = super.defaultSettings(); + settings.startAngle = 45; + settings.ticksAngle = 270; + settings.needleCircleSize = 10; + return settings; + } + + protected onSettingsSet(settings: WidgetSettings) { + super.onSettingsSet(settings); + this.analogueGaugeWidgetSettingsForm.addControl('startAngle', + this.fb.control(settings.startAngle, [Validators.min(0), Validators.max(360)])); + this.analogueGaugeWidgetSettingsForm.addControl('ticksAngle', + this.fb.control(settings.ticksAngle, [Validators.min(0), Validators.max(360)])); + this.analogueGaugeWidgetSettingsForm.addControl('needleCircleSize', + this.fb.control(settings.needleCircleSize, [Validators.min(0)])); + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.html new file mode 100644 index 0000000000..3e1ffde7a3 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.html @@ -0,0 +1,60 @@ + + + +
+ +
+
{{ highlightRangeText() }}
+
+
+
+
+ + + +
+ + +
+ +
+
+ + widgets.gauge.highlight-from + + + + widgets.gauge.highlight-to + + +
+ + +
+
+ + diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.scss similarity index 61% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.scss rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.scss index 563f2ae465..bbed5bf6eb 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-settings.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.scss @@ -13,20 +13,28 @@ * 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; + display: block; + .mat-expansion-panel { + box-shadow: none; + &.gauge-highlight { + border: 1px groove rgba(0, 0, 0, .25); + .mat-expansion-panel-header { + padding: 0 24px 0 8px; + &.mat-expanded { + height: 48px; + } } } } +} - .tb-prompt{ - margin: 30px 0; +:host ::ng-deep { + .mat-expansion-panel { + &.gauge-highlight { + .mat-expansion-panel-body { + padding: 0 8px 8px; + } + } } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.ts new file mode 100644 index 0000000000..697600562e --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.ts @@ -0,0 +1,116 @@ +/// +/// 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 { isNumber } from '@core/utils'; + +export interface GaugeHighlight { + from: number; + to: number; + color: string; +} + +@Component({ + selector: 'tb-gauge-highlight', + templateUrl: './gauge-highlight.component.html', + styleUrls: ['./gauge-highlight.component.scss', './../widget-settings.scss'], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => GaugeHighlightComponent), + multi: true + } + ] +}) +export class GaugeHighlightComponent extends PageComponent implements OnInit, ControlValueAccessor { + + @Input() + disabled: boolean; + + @Input() + expanded = false; + + @Output() + removeHighlight = new EventEmitter(); + + private modelValue: GaugeHighlight; + + private propagateChange = null; + + public gaugeHighlightFormGroup: FormGroup; + + constructor(protected store: Store, + private translate: TranslateService, + private fb: FormBuilder) { + super(store); + } + + ngOnInit(): void { + this.gaugeHighlightFormGroup = this.fb.group({ + from: [null, []], + to: [null, []], + color: [null, []] + }); + this.gaugeHighlightFormGroup.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.gaugeHighlightFormGroup.disable({emitEvent: false}); + } else { + this.gaugeHighlightFormGroup.enable({emitEvent: false}); + } + } + + writeValue(value: GaugeHighlight): void { + this.modelValue = value; + this.gaugeHighlightFormGroup.patchValue( + value, {emitEvent: false} + ); + } + + highlightRangeText(): string { + const value: GaugeHighlight = this.gaugeHighlightFormGroup.value; + const from = isNumber(value.from) ? value.from : 0; + const to = isNumber(value.to) ? value.to : 0; + return `${from} - ${to}`; + } + + private updateModel() { + const value: GaugeHighlight = this.gaugeHighlightFormGroup.value; + this.modelValue = value; + if (this.gaugeHighlightFormGroup.valid) { + this.propagateChange(this.modelValue); + } else { + this.propagateChange(null); + } + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts index 14e5cc21bf..8e0f2b687d 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts @@ -32,7 +32,7 @@ import { import { MarkdownWidgetSettingsComponent } from '@home/components/widget/lib/settings/cards/markdown-widget-settings.component'; -import { LabelWidgetFontComponent } from '@home/components/widget/lib/settings/cards/label-widget-font.component'; +import { WidgetFontComponent } from '@home/components/widget/lib/settings/common/widget-font.component'; import { LabelWidgetLabelComponent } from '@home/components/widget/lib/settings/cards/label-widget-label.component'; import { LabelWidgetSettingsComponent } from '@home/components/widget/lib/settings/cards/label-widget-settings.component'; import { @@ -59,6 +59,16 @@ import { import { AlarmsTableKeySettingsComponent } from '@home/components/widget/lib/settings/alarm/alarms-table-key-settings.component'; +import { GaugeHighlightComponent } from '@home/components/widget/lib/settings/gauge/gauge-highlight.component'; +import { + AnalogueRadialGaugeWidgetSettingsComponent +} from '@home/components/widget/lib/settings/gauge/analogue-radial-gauge-widget-settings.component'; +import { + AnalogueLinearGaugeWidgetSettingsComponent +} from '@home/components/widget/lib/settings/gauge/analogue-linear-gauge-widget-settings.component'; +import { + AnalogueCompassWidgetSettingsComponent +} from '@home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component'; @NgModule({ declarations: [ @@ -67,7 +77,7 @@ import { TimeseriesTableKeySettingsComponent, TimeseriesTableLatestKeySettingsComponent, MarkdownWidgetSettingsComponent, - LabelWidgetFontComponent, + WidgetFontComponent, LabelWidgetLabelComponent, LabelWidgetSettingsComponent, SimpleCardWidgetSettingsComponent, @@ -77,7 +87,11 @@ import { EntitiesTableWidgetSettingsComponent, EntitiesTableKeySettingsComponent, AlarmsTableWidgetSettingsComponent, - AlarmsTableKeySettingsComponent + AlarmsTableKeySettingsComponent, + GaugeHighlightComponent, + AnalogueRadialGaugeWidgetSettingsComponent, + AnalogueLinearGaugeWidgetSettingsComponent, + AnalogueCompassWidgetSettingsComponent ], imports: [ CommonModule, @@ -90,7 +104,7 @@ import { TimeseriesTableKeySettingsComponent, TimeseriesTableLatestKeySettingsComponent, MarkdownWidgetSettingsComponent, - LabelWidgetFontComponent, + WidgetFontComponent, LabelWidgetLabelComponent, LabelWidgetSettingsComponent, SimpleCardWidgetSettingsComponent, @@ -100,7 +114,11 @@ import { EntitiesTableWidgetSettingsComponent, EntitiesTableKeySettingsComponent, AlarmsTableWidgetSettingsComponent, - AlarmsTableKeySettingsComponent + AlarmsTableKeySettingsComponent, + GaugeHighlightComponent, + AnalogueRadialGaugeWidgetSettingsComponent, + AnalogueLinearGaugeWidgetSettingsComponent, + AnalogueCompassWidgetSettingsComponent ] }) export class WidgetSettingsModule { @@ -120,5 +138,8 @@ export const widgetSettingsComponentsMap: {[key: string]: Type
- - - + + class="tb-datasource-list-item tb-draggable" cdkDrag + [cdkDragDisabled]="disabled">
+ label="{{ 'widgets.label-widget.background-color' | translate }}" openOnInput colorClearButton>
widgets.label-widget.font-settings diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source.component.html new file mode 100644 index 0000000000..d4e1e669f6 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source.component.html @@ -0,0 +1,76 @@ + +
+ + widgets.value-source.value-source + + + {{ 'widgets.value-source.predefined-value' | translate }} + + + {{ 'widgets.value-source.entity-attribute' | translate }} + + + + + widgets.value-source.value + + +
+ + {{ 'widgets.value-source.source-entity-alias' | translate }} + + + + + + + + + + {{ 'widgets.value-source.source-entity-attribute' | translate }} + + + + + + + + +
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source.component.ts new file mode 100644 index 0000000000..144904ca41 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/value-source.component.ts @@ -0,0 +1,255 @@ +/// +/// 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, ElementRef, forwardRef, HostBinding, Input, OnInit, ViewChild } 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 { IAliasController } from '@core/api/widget-api.models'; +import { Observable, of } from 'rxjs'; +import { catchError, map, mergeMap, publishReplay, refCount, tap } from 'rxjs/operators'; +import { DataKey } from '@shared/models/widget.models'; +import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; +import { EntityService } from '@core/http/entity.service'; + +export declare type ValueSource = 'predefinedValue' | 'entityAttribute'; + +export interface ValueSourceProperty { + valueSource: ValueSource; + entityAlias?: string; + attribute?: string; + value?: number; +} + +@Component({ + selector: 'tb-value-source', + templateUrl: './value-source.component.html', + styleUrls: [], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => ValueSourceComponent), + multi: true + } + ] +}) +export class ValueSourceComponent extends PageComponent implements OnInit, ControlValueAccessor { + + @HostBinding('style.display') display = 'block'; + + @ViewChild('entityAliasInput') entityAliasInput: ElementRef; + + @ViewChild('keyInput') keyInput: ElementRef; + + @Input() + disabled: boolean; + + @Input() + aliasController: IAliasController; + + private modelValue: ValueSourceProperty; + + private propagateChange = null; + + public valueSourceFormGroup: FormGroup; + + filteredEntityAliases: Observable>; + aliasSearchText = ''; + + filteredKeys: Observable>; + keySearchText = ''; + + private latestKeySearchResult: Array = null; + private keysFetchObservable$: Observable> = null; + + private entityAliasList: Array = []; + + constructor(protected store: Store, + private translate: TranslateService, + private entityService: EntityService, + private fb: FormBuilder) { + super(store); + } + + ngOnInit(): void { + this.valueSourceFormGroup = this.fb.group({ + valueSource: ['predefinedValue', []], + entityAlias: [null, []], + attribute: [null, []], + value: [null, []] + }); + this.valueSourceFormGroup.valueChanges.subscribe(() => { + this.updateModel(); + }); + this.valueSourceFormGroup.get('valueSource').valueChanges.subscribe(() => { + this.updateValidators(true); + }); + this.updateValidators(false); + + this.filteredEntityAliases = this.valueSourceFormGroup.get('entityAlias').valueChanges + .pipe( + tap(() => { + this.latestKeySearchResult = null; + this.keysFetchObservable$ = null; + this.valueSourceFormGroup.get('attribute').setValue(this.valueSourceFormGroup.get('attribute').value); + }), + map(value => value ? value : ''), + mergeMap(name => this.fetchEntityAliases(name) ) + ); + + this.filteredKeys = this.valueSourceFormGroup.get('attribute').valueChanges + .pipe( + map(value => value ? value : ''), + mergeMap(name => this.fetchKeys(name) ) + ); + + if (this.aliasController) { + const entityAliases = this.aliasController.getEntityAliases(); + for (const aliasId of Object.keys(entityAliases)) { + this.entityAliasList.push(entityAliases[aliasId].alias); + } + } + } + + registerOnChange(fn: any): void { + this.propagateChange = fn; + } + + registerOnTouched(fn: any): void { + } + + setDisabledState(isDisabled: boolean): void { + this.disabled = isDisabled; + if (isDisabled) { + this.valueSourceFormGroup.disable({emitEvent: false}); + } else { + this.valueSourceFormGroup.enable({emitEvent: false}); + } + } + + writeValue(value: ValueSourceProperty): void { + this.modelValue = value; + this.valueSourceFormGroup.patchValue( + value, {emitEvent: false} + ); + this.updateValidators(false); + } + + clearEntityAlias() { + this.valueSourceFormGroup.get('entityAlias').patchValue(null, {emitEvent: true}); + setTimeout(() => { + this.entityAliasInput.nativeElement.blur(); + this.entityAliasInput.nativeElement.focus(); + }, 0); + } + + clearKey() { + this.valueSourceFormGroup.get('attribute').patchValue(null, {emitEvent: true}); + setTimeout(() => { + this.keyInput.nativeElement.blur(); + this.keyInput.nativeElement.focus(); + }, 0); + } + + private fetchEntityAliases(searchText?: string): Observable> { + this.aliasSearchText = searchText; + let result = this.entityAliasList; + if (searchText && searchText.length) { + result = this.entityAliasList.filter((entityAlias) => entityAlias.toLowerCase().includes(searchText.toLowerCase())); + } + return of(result); + } + + private fetchKeys(searchText?: string): Observable> { + if (this.keySearchText !== searchText || this.latestKeySearchResult === null) { + this.keySearchText = searchText; + const dataKeyFilter = this.createKeyFilter(this.keySearchText); + return this.getKeys().pipe( + map(name => name.filter(dataKeyFilter)), + tap(res => this.latestKeySearchResult = res) + ); + } + return of(this.latestKeySearchResult); + } + + private getKeys() { + if (this.keysFetchObservable$ === null) { + let fetchObservable: Observable>; + let entityAliasId: string; + const entityAlias: string = this.valueSourceFormGroup.get('entityAlias').value; + if (entityAlias && this.aliasController) { + entityAliasId = this.aliasController.getEntityAliasId(entityAlias); + } + if (entityAliasId) { + const dataKeyTypes = [DataKeyType.attribute]; + fetchObservable = this.fetchEntityKeys(entityAliasId, dataKeyTypes); + } else { + fetchObservable = of([]); + } + this.keysFetchObservable$ = fetchObservable.pipe( + map((dataKeys) => dataKeys.map((dataKey) => dataKey.name)), + publishReplay(1), + refCount() + ); + } + return this.keysFetchObservable$; + } + + private fetchEntityKeys(entityAliasId: string, dataKeyTypes: Array): Observable> { + return this.aliasController.getAliasInfo(entityAliasId).pipe( + mergeMap((aliasInfo) => { + return this.entityService.getEntityKeysByEntityFilter( + aliasInfo.entityFilter, + dataKeyTypes, + {ignoreLoading: true, ignoreErrors: true} + ).pipe( + catchError(() => of([])) + ); + }), + catchError(() => of([] as Array)) + ); + } + + private createKeyFilter(query: string): (key: string) => boolean { + const lowercaseQuery = query.toLowerCase(); + return key => key.toLowerCase().startsWith(lowercaseQuery); + } + + private updateModel() { + const value: ValueSourceProperty = this.valueSourceFormGroup.value; + this.modelValue = value; + this.propagateChange(this.modelValue); + } + + private updateValidators(emitEvent?: boolean): void { + const valueSource: ValueSource = this.valueSourceFormGroup.get('valueSource').value; + if (valueSource === 'predefinedValue') { + this.valueSourceFormGroup.get('entityAlias').disable({emitEvent}); + this.valueSourceFormGroup.get('attribute').disable({emitEvent}); + this.valueSourceFormGroup.get('value').enable({emitEvent}); + } else if (valueSource === 'entityAttribute') { + this.valueSourceFormGroup.get('entityAlias').enable({emitEvent}); + this.valueSourceFormGroup.get('attribute').enable({emitEvent}); + this.valueSourceFormGroup.get('value').disable({emitEvent}); + } + this.valueSourceFormGroup.get('entityAlias').updateValueAndValidity({emitEvent: false}); + this.valueSourceFormGroup.get('attribute').updateValueAndValidity({emitEvent: false}); + this.valueSourceFormGroup.get('value').updateValueAndValidity({emitEvent: false}); + } + +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html index c8f4927c38..3cc8899bcc 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html @@ -66,10 +66,10 @@ + label="{{ 'widgets.widget-font.color' | translate }}" openOnInput colorClearButton> + label="{{ 'widgets.widget-font.shadow-color' | translate }}" openOnInput colorClearButton>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html index 2e27effaf6..c9fc848e95 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html @@ -39,7 +39,7 @@ + label="{{ 'widgets.gauge.major-ticks-color' | translate }}" openOnInput colorClearButton>
@@ -48,7 +48,7 @@ + label="{{ 'widgets.gauge.minor-ticks-color' | translate }}" openOnInput colorClearButton>
@@ -63,7 +63,7 @@ widgets.gauge.plate-settings + label="{{ 'widgets.gauge.plate-color' | translate }}" openOnInput colorClearButton> {{ 'widgets.gauge.show-plate-border' | translate }} @@ -71,7 +71,7 @@
+ label="{{ 'widgets.gauge.border-color' | translate }}" openOnInput colorClearButton> widgets.gauge.border-width @@ -88,11 +88,11 @@
+ label="{{ 'widgets.gauge.needle-color' | translate }}" openOnInput colorClearButton> + label="{{ 'widgets.gauge.needle-circle-color' | translate }}" openOnInput colorClearButton>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html index b586c31f90..f00e3d130d 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html @@ -26,7 +26,7 @@ + label="{{ 'widgets.gauge.default-color' | translate }}" openOnInput colorClearButton>
widgets.gauge.ticks-settings @@ -47,7 +47,7 @@ + label="{{ 'widgets.gauge.major-ticks-color' | translate }}" openOnInput colorClearButton>
@@ -57,7 +57,7 @@ + label="{{ 'widgets.gauge.minor-ticks-color' | translate }}" openOnInput colorClearButton>
@@ -127,21 +127,21 @@
+ label="{{ 'widgets.gauge.value-box-rect-stroke-color' | translate }}" openOnInput colorClearButton> + label="{{ 'widgets.gauge.value-box-rect-stroke-color-end' | translate }}" openOnInput colorClearButton>
+ label="{{ 'widgets.gauge.value-box-background-color' | translate }}" openOnInput colorClearButton> + label="{{ 'widgets.gauge.value-box-shadow-color' | translate }}" openOnInput colorClearButton>
@@ -152,7 +152,7 @@ widgets.gauge.plate-settings + label="{{ 'widgets.gauge.plate-color' | translate }}" openOnInput colorClearButton> {{ 'widgets.gauge.show-plate-border' | translate }} @@ -163,21 +163,21 @@
+ label="{{ 'widgets.gauge.needle-color' | translate }}" openOnInput colorClearButton> + label="{{ 'widgets.gauge.needle-color-end' | translate }}" openOnInput colorClearButton>
+ label="{{ 'widgets.gauge.needle-color-shadow-up' | translate }}" openOnInput colorClearButton> + label="{{ 'widgets.gauge.needle-color-shadow-down' | translate }}" openOnInput colorClearButton>
@@ -309,27 +309,27 @@ + label="{{ 'widgets.gauge.bar-stroke-color' | translate }}" openOnInput colorClearButton>
+ label="{{ 'widgets.gauge.bar-background-color' | translate }}" openOnInput colorClearButton> + label="{{ 'widgets.gauge.bar-background-color-end' | translate }}" openOnInput colorClearButton>
+ label="{{ 'widgets.gauge.progress-bar-color' | translate }}" openOnInput colorClearButton> + label="{{ 'widgets.gauge.progress-bar-color-end' | translate }}" openOnInput colorClearButton>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html new file mode 100644 index 0000000000..7ed47b81f0 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html @@ -0,0 +1,378 @@ + +
+
+ widgets.gauge.common-settings +
+ + widgets.gauge.min-value + + + + widgets.gauge.max-value + + +
+ + widgets.gauge.gauge-type + + + {{ 'widgets.gauge.gauge-type-arc' | translate }} + + + {{ 'widgets.gauge.gauge-type-donut' | translate }} + + + {{ 'widgets.gauge.gauge-type-horizontal-bar' | translate }} + + + {{ 'widgets.gauge.gauge-type-vertical-bar' | translate }} + + + + + widgets.gauge.donut-start-angle + + + + +
+
+ widgets.gauge.bar-settings + + widgets.gauge.relative-bar-width + + + + widgets.gauge.neon-glow-brightness + + +
+ + widgets.gauge.stripes-thickness + + + + {{ 'widgets.gauge.rounded-line-cap' | translate }} + +
+
+ widgets.gauge.bar-color-settings + + + + {{ 'widgets.gauge.use-precise-level-color-values' | translate }} + +
+ widgets.gauge.bar-colors +
+
+
+
+ drag_handle +
+ + + +
+
+
+ widgets.gauge.no-bar-colors +
+
+ +
+
+
+
+ widgets.gauge.fixed-level-colors +
+
+
+ + +
+
+
+ widgets.gauge.no-bar-colors +
+
+ +
+
+
+
+
+
+ widgets.gauge.gauge-title-settings + + + + + {{ 'widgets.gauge.show-gauge-title' | translate }} + + + + widget-config.advanced-settings + + + +
+ + widgets.gauge.gauge-title + + +
+ widgets.gauge.gauge-title-font + +
+
+ + +
+
+ widgets.gauge.unit-title-and-timestamp-settings +
+ + {{ 'widgets.gauge.show-unit-title' | translate }} + + + widgets.gauge.unit-title + + +
+
+ + {{ 'widgets.gauge.show-timestamp' | translate }} + + + widgets.gauge.timestamp-format + + +
+ + + + widget-config.advanced-settings + + + +
+ widgets.gauge.label-font + +
+ + +
+
+ widgets.gauge.value-settings + + + + + {{ 'widgets.gauge.show-value' | translate }} + + + + widget-config.advanced-settings + + + +
+ widgets.gauge.value-font + +
+ + +
+
+ widgets.gauge.min-max-settings + + + + + {{ 'widgets.gauge.show-min-max' | translate }} + + + + widget-config.advanced-settings + + + +
+ widgets.gauge.min-max-font + +
+ + +
+
+ widgets.gauge.ticks-settings + + + + + {{ 'widgets.gauge.show-ticks' | translate }} + + + + widget-config.advanced-settings + + + +
+ + widgets.gauge.tick-width + + + + +
+ widgets.gauge.tick-values +
+
+
+ + + +
+
+
+ widgets.gauge.no-tick-values +
+
+ +
+
+
+
+ + +
+
+ widgets.gauge.animation-settings + + + + + {{ 'widgets.gauge.enable-animation' | translate }} + + + + widget-config.advanced-settings + + + +
+ + widgets.gauge.animation-duration + + + + widgets.gauge.animation-rule + + + {{ 'widgets.gauge.animation-linear' | translate }} + + + {{ 'widgets.gauge.animation-quad' | translate }} + + + {{ 'widgets.gauge.animation-quint' | translate }} + + + {{ 'widgets.gauge.animation-cycle' | translate }} + + + {{ 'widgets.gauge.animation-bounce' | translate }} + + + {{ 'widgets.gauge.animation-elastic' | translate }} + + + {{ 'widgets.gauge.animation-dequad' | translate }} + + + {{ 'widgets.gauge.animation-dequint' | translate }} + + + {{ 'widgets.gauge.animation-decycle' | translate }} + + + {{ 'widgets.gauge.animation-debounce' | translate }} + + + {{ 'widgets.gauge.animation-delastic' | translate }} + + + +
+ + +
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.ts new file mode 100644 index 0000000000..40958f8965 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.ts @@ -0,0 +1,373 @@ +/// +/// 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 { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; +import { Component } from '@angular/core'; +import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { GaugeType } from '@home/components/widget/lib/canvas-digital-gauge'; +import { CdkDragDrop } from '@angular/cdk/drag-drop'; +import { GaugeHighlight } from '@home/components/widget/lib/settings/gauge/gauge-highlight.component'; +import { + FixedColorLevel, + fixedColorLevelValidator +} from '@home/components/widget/lib/settings/gauge/fixed-color-level.component'; +import { ValueSourceProperty } from '@home/components/widget/lib/settings/common/value-source.component'; + +@Component({ + selector: 'tb-digital-gauge-widget-settings', + templateUrl: './digital-gauge-widget-settings.component.html', + styleUrls: ['./../widget-settings.scss'] +}) +export class DigitalGaugeWidgetSettingsComponent extends WidgetSettingsComponent { + + digitalGaugeWidgetSettingsForm: FormGroup; + + constructor(protected store: Store, + protected fb: FormBuilder) { + super(store); + } + + protected settingsForm(): FormGroup { + return this.digitalGaugeWidgetSettingsForm; + } + + protected defaultSettings(): WidgetSettings { + return { + minValue: 0, + maxValue: 100, + gaugeType: 'arc', + donutStartAngle: 90, + neonGlowBrightness: 0, + dashThickness: 0, + roundedLineCap: false, + title: null, + showTitle: false, + unitTitle: null, + showUnitTitle: false, + showTimestamp: false, + timestampFormat: 'yyyy-MM-dd HH:mm:ss', + showValue: true, + showMinMax: true, + gaugeWidthScale: 0.75, + defaultColor: null, + gaugeColor: null, + useFixedLevelColor: false, + levelColors: [], + fixedLevelColors: [], + showTicks: false, + tickWidth: 4, + colorTicks: '#666', + ticksValue: [], + animation: true, + animationDuration: 500, + animationRule: 'linear', + titleFont: { + family: 'Roboto', + size: 12, + style: 'normal', + weight: '500', + color: null + }, + labelFont: { + family: 'Roboto', + size: 8, + style: 'normal', + weight: '500', + color: null + }, + valueFont: { + family: 'Roboto', + size: 18, + style: 'normal', + weight: '500', + color: null + }, + minMaxFont: { + family: 'Roboto', + size: 10, + style: 'normal', + weight: '500', + color: null + } + }; + } + + protected onSettingsSet(settings: WidgetSettings) { + + const levelColorsControls: Array = []; + const fixedLevelColorsControls: Array = []; + const ticksValueControls: Array = []; + if (settings.levelColors) { + settings.levelColors.forEach((levelColor) => { + levelColorsControls.push(this.fb.control(levelColor, [Validators.required])); + }); + } + if (settings.fixedLevelColors) { + settings.fixedLevelColors.forEach((fixedLevelColor) => { + fixedLevelColorsControls.push(this.fb.control(fixedLevelColor, [fixedColorLevelValidator])); + }); + } + if (settings.ticksValue) { + settings.ticksValue.forEach((tickValue) => { + ticksValueControls.push(this.fb.control(tickValue, [Validators.required])); + }); + } + + this.digitalGaugeWidgetSettingsForm = this.fb.group({ + + // Common gauge settings + minValue: [settings.minValue, []], + maxValue: [settings.maxValue, []], + gaugeType: [settings.gaugeType, []], + donutStartAngle: [settings.donutStartAngle, []], + defaultColor: [settings.defaultColor, []], + + // Gauge bar settings + gaugeWidthScale: [settings.gaugeWidthScale, [Validators.min(0)]], + neonGlowBrightness: [settings.neonGlowBrightness, [Validators.min(0), Validators.max(100)]], + dashThickness: [settings.dashThickness, [Validators.min(0)]], + roundedLineCap: [settings.roundedLineCap, []], + + // Gauge bar colors settings + gaugeColor: [settings.gaugeColor, []], + useFixedLevelColor: [settings.useFixedLevelColor, []], + levelColors: this.fb.array(levelColorsControls), + fixedLevelColors: this.fb.array(fixedLevelColorsControls), + + // Title settings + showTitle: [settings.showTitle, []], + title: [settings.title, []], + titleFont: [settings.titleFont, []], + + // Unit title/timestamp settings + showUnitTitle: [settings.showUnitTitle, []], + unitTitle: [settings.unitTitle, []], + showTimestamp: [settings.showTimestamp, []], + timestampFormat: [settings.timestampFormat, []], + labelFont: [settings.labelFont, []], + + // Value settings + showValue: [settings.showValue, []], + valueFont: [settings.valueFont, []], + + // Min/max labels settings + showMinMax: [settings.showMinMax, []], + minMaxFont: [settings.minMaxFont, []], + + // Ticks settings + showTicks: [settings.showTicks, []], + tickWidth: [settings.tickWidth, [Validators.min(0)]], + colorTicks: [settings.colorTicks, []], + ticksValue: this.fb.array(ticksValueControls), + + // Animation settings + animation: [settings.animation, []], + animationDuration: [settings.animationDuration, [Validators.min(0)]], + animationRule: [settings.animationRule, []] + + }); + } + + protected validatorTriggers(): string[] { + return ['gaugeType', 'showTitle', 'showUnitTitle', 'showValue', 'showMinMax', 'showTimestamp', 'useFixedLevelColor', 'showTicks', 'animation']; + } + + protected updateValidators(emitEvent: boolean) { + const gaugeType: GaugeType = this.digitalGaugeWidgetSettingsForm.get('gaugeType').value; + const showTitle: boolean = this.digitalGaugeWidgetSettingsForm.get('showTitle').value; + const showUnitTitle: boolean = this.digitalGaugeWidgetSettingsForm.get('showUnitTitle').value; + const showValue: boolean = this.digitalGaugeWidgetSettingsForm.get('showValue').value; + const showMinMax: boolean = this.digitalGaugeWidgetSettingsForm.get('showMinMax').value; + const showTimestamp: boolean = this.digitalGaugeWidgetSettingsForm.get('showTimestamp').value; + const useFixedLevelColor: boolean = this.digitalGaugeWidgetSettingsForm.get('useFixedLevelColor').value; + const showTicks: boolean = this.digitalGaugeWidgetSettingsForm.get('showTicks').value; + const animation: boolean = this.digitalGaugeWidgetSettingsForm.get('animation').value; + + if (gaugeType === 'donut') { + this.digitalGaugeWidgetSettingsForm.get('donutStartAngle').enable(); + } else { + this.digitalGaugeWidgetSettingsForm.get('donutStartAngle').disable(); + } + if (showTitle) { + this.digitalGaugeWidgetSettingsForm.get('title').enable(); + this.digitalGaugeWidgetSettingsForm.get('titleFont').enable(); + } else { + this.digitalGaugeWidgetSettingsForm.get('title').disable(); + this.digitalGaugeWidgetSettingsForm.get('titleFont').disable(); + } + if (showUnitTitle) { + this.digitalGaugeWidgetSettingsForm.get('unitTitle').enable(); + } else { + this.digitalGaugeWidgetSettingsForm.get('unitTitle').disable(); + } + if (showTimestamp) { + this.digitalGaugeWidgetSettingsForm.get('timestampFormat').enable(); + } else { + this.digitalGaugeWidgetSettingsForm.get('timestampFormat').disable(); + } + if (showUnitTitle || showTimestamp) { + this.digitalGaugeWidgetSettingsForm.get('labelFont').enable(); + } else { + this.digitalGaugeWidgetSettingsForm.get('labelFont').disable(); + } + if (showValue) { + this.digitalGaugeWidgetSettingsForm.get('valueFont').enable(); + } else { + this.digitalGaugeWidgetSettingsForm.get('valueFont').disable(); + } + if (showMinMax) { + this.digitalGaugeWidgetSettingsForm.get('minMaxFont').enable(); + } else { + this.digitalGaugeWidgetSettingsForm.get('minMaxFont').disable(); + } + if (useFixedLevelColor) { + this.digitalGaugeWidgetSettingsForm.get('fixedLevelColors').enable(); + this.digitalGaugeWidgetSettingsForm.get('levelColors').disable(); + } else { + this.digitalGaugeWidgetSettingsForm.get('fixedLevelColors').disable(); + this.digitalGaugeWidgetSettingsForm.get('levelColors').enable(); + } + if (showTicks) { + this.digitalGaugeWidgetSettingsForm.get('tickWidth').enable(); + this.digitalGaugeWidgetSettingsForm.get('colorTicks').enable(); + this.digitalGaugeWidgetSettingsForm.get('ticksValue').enable(); + } else { + this.digitalGaugeWidgetSettingsForm.get('tickWidth').disable(); + this.digitalGaugeWidgetSettingsForm.get('colorTicks').disable(); + this.digitalGaugeWidgetSettingsForm.get('ticksValue').disable(); + } + if (animation) { + this.digitalGaugeWidgetSettingsForm.get('animationDuration').enable(); + this.digitalGaugeWidgetSettingsForm.get('animationRule').enable(); + } else { + this.digitalGaugeWidgetSettingsForm.get('animationDuration').disable(); + this.digitalGaugeWidgetSettingsForm.get('animationRule').disable(); + } + this.digitalGaugeWidgetSettingsForm.get('donutStartAngle').updateValueAndValidity({emitEvent}); + this.digitalGaugeWidgetSettingsForm.get('title').updateValueAndValidity({emitEvent}); + this.digitalGaugeWidgetSettingsForm.get('titleFont').updateValueAndValidity({emitEvent}); + this.digitalGaugeWidgetSettingsForm.get('unitTitle').updateValueAndValidity({emitEvent}); + this.digitalGaugeWidgetSettingsForm.get('timestampFormat').updateValueAndValidity({emitEvent}); + this.digitalGaugeWidgetSettingsForm.get('labelFont').updateValueAndValidity({emitEvent}); + this.digitalGaugeWidgetSettingsForm.get('valueFont').updateValueAndValidity({emitEvent}); + this.digitalGaugeWidgetSettingsForm.get('minMaxFont').updateValueAndValidity({emitEvent}); + this.digitalGaugeWidgetSettingsForm.get('fixedLevelColors').updateValueAndValidity({emitEvent}); + this.digitalGaugeWidgetSettingsForm.get('levelColors').updateValueAndValidity({emitEvent}); + this.digitalGaugeWidgetSettingsForm.get('tickWidth').updateValueAndValidity({emitEvent}); + this.digitalGaugeWidgetSettingsForm.get('colorTicks').updateValueAndValidity({emitEvent}); + this.digitalGaugeWidgetSettingsForm.get('ticksValue').updateValueAndValidity({emitEvent}); + this.digitalGaugeWidgetSettingsForm.get('animationDuration').updateValueAndValidity({emitEvent}); + this.digitalGaugeWidgetSettingsForm.get('animationRule').updateValueAndValidity({emitEvent}); + } + + levelColorsFormArray(): FormArray { + return this.digitalGaugeWidgetSettingsForm.get('levelColors') as FormArray; + } + + public trackByLevelColor(index: number, levelColorControl: AbstractControl): any { + return index; + } + + public removeLevelColor(index: number) { + (this.digitalGaugeWidgetSettingsForm.get('levelColors') as FormArray).removeAt(index); + } + + public addLevelColor() { + const levelColorsArray = this.digitalGaugeWidgetSettingsForm.get('levelColors') as FormArray; + const levelColorControl = this.fb.control(null, []); + levelColorsArray.push(levelColorControl); + this.digitalGaugeWidgetSettingsForm.updateValueAndValidity(); + } + + levelColorDrop(event: CdkDragDrop) { + const levelColorsArray = this.digitalGaugeWidgetSettingsForm.get('levelColors') as FormArray; + const levelColor = levelColorsArray.at(event.previousIndex); + levelColorsArray.removeAt(event.previousIndex); + levelColorsArray.insert(event.currentIndex, levelColor); + } + + fixedLevelColorFormArray(): FormArray { + return this.digitalGaugeWidgetSettingsForm.get('fixedLevelColors') as FormArray; + } + + public trackByFixedLevelColor(index: number, fixedLevelColorControl: AbstractControl): any { + return fixedLevelColorControl; + } + + public removeFixedLevelColor(index: number) { + (this.digitalGaugeWidgetSettingsForm.get('fixedLevelColors') as FormArray).removeAt(index); + } + + public addFixedLevelColor() { + const fixedLevelColor: FixedColorLevel = { + from: { + valueSource: 'predefinedValue' + }, + to: { + valueSource: 'predefinedValue' + }, + color: null + }; + const fixedLevelColorsArray = this.digitalGaugeWidgetSettingsForm.get('fixedLevelColors') as FormArray; + const fixedLevelColorControl = this.fb.control(fixedLevelColor, [fixedColorLevelValidator]); + (fixedLevelColorControl as any).new = true; + fixedLevelColorsArray.push(fixedLevelColorControl); + this.digitalGaugeWidgetSettingsForm.updateValueAndValidity(); + if (!this.digitalGaugeWidgetSettingsForm.valid) { + this.onSettingsChanged(this.digitalGaugeWidgetSettingsForm.value); + } + } + + fixedLevelColorDrop(event: CdkDragDrop) { + const fixedLevelColorsArray = this.digitalGaugeWidgetSettingsForm.get('fixedLevelColors') as FormArray; + const fixedLevelColor = fixedLevelColorsArray.at(event.previousIndex); + fixedLevelColorsArray.removeAt(event.previousIndex); + fixedLevelColorsArray.insert(event.currentIndex, fixedLevelColor); + } + + tickValuesFormArray(): FormArray { + return this.digitalGaugeWidgetSettingsForm.get('ticksValue') as FormArray; + } + + public trackByTickValue(index: number, tickValueControl: AbstractControl): any { + return tickValueControl; + } + + public removeTickValue(index: number) { + (this.digitalGaugeWidgetSettingsForm.get('ticksValue') as FormArray).removeAt(index); + } + + public addTickValue() { + const tickValue: ValueSourceProperty = { + valueSource: 'predefinedValue' + }; + const tickValuesArray = this.digitalGaugeWidgetSettingsForm.get('ticksValue') as FormArray; + const tickValueControl = this.fb.control(tickValue, []); + (tickValueControl as any).new = true; + tickValuesArray.push(tickValueControl); + this.digitalGaugeWidgetSettingsForm.updateValueAndValidity(); + } + + tickValueDrop(event: CdkDragDrop) { + const tickValuesArray = this.digitalGaugeWidgetSettingsForm.get('ticksValue') as FormArray; + const tickValue = tickValuesArray.at(event.previousIndex); + tickValuesArray.removeAt(event.previousIndex); + tickValuesArray.insert(event.currentIndex, tickValue); + } + +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/fixed-color-level.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/fixed-color-level.component.html new file mode 100644 index 0000000000..01fec01d3a --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/fixed-color-level.component.html @@ -0,0 +1,59 @@ + + + +
+ +
+
{{ fixedColorLevelRangeText() }}
+
+
+
+
+ + + +
+ + +
+ +
+
+ widgets.gauge.from + +
+
+ widgets.gauge.to + +
+ + +
+
+ + diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/fixed-color-level.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/fixed-color-level.component.scss new file mode 100644 index 0000000000..16c23f47c2 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/fixed-color-level.component.scss @@ -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; + &.fixed-color-level { + 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 { + &.fixed-color-level { + .mat-expansion-panel-body { + padding: 0 8px 8px; + } + } + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/fixed-color-level.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/fixed-color-level.component.ts new file mode 100644 index 0000000000..f289b235b4 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/fixed-color-level.component.ts @@ -0,0 +1,147 @@ +/// +/// 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 { ValueSourceProperty } from '@home/components/widget/lib/settings/common/value-source.component'; +import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core'; +import { + AbstractControl, + ControlValueAccessor, + FormBuilder, + FormGroup, + NG_VALUE_ACCESSOR, ValidationErrors, + 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 { isNumber } from '@core/utils'; +import { IAliasController } from '@core/api/widget-api.models'; + +export interface FixedColorLevel { + from?: ValueSourceProperty; + to?: ValueSourceProperty; + color: string; +} + +export function fixedColorLevelValidator(control: AbstractControl): ValidationErrors | null { + const fixedColorLevel: FixedColorLevel = control.value; + if (!fixedColorLevel || !fixedColorLevel.color) { + return { + fixedColorLevel: true + }; + } + return null; +} + +@Component({ + selector: 'tb-fixed-color-level', + templateUrl: './fixed-color-level.component.html', + styleUrls: ['./fixed-color-level.component.scss', './../widget-settings.scss'], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => FixedColorLevelComponent), + multi: true + } + ] +}) +export class FixedColorLevelComponent extends PageComponent implements OnInit, ControlValueAccessor { + + @Input() + disabled: boolean; + + @Input() + expanded = false; + + @Input() + aliasController: IAliasController; + + @Output() + removeFixedColorLevel = new EventEmitter(); + + private modelValue: FixedColorLevel; + + private propagateChange = null; + + public fixedColorLevelFormGroup: FormGroup; + + constructor(protected store: Store, + private translate: TranslateService, + private fb: FormBuilder) { + super(store); + } + + ngOnInit(): void { + this.fixedColorLevelFormGroup = this.fb.group({ + from: [null, []], + to: [null, []], + color: [null, [Validators.required]] + }); + this.fixedColorLevelFormGroup.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.fixedColorLevelFormGroup.disable({emitEvent: false}); + } else { + this.fixedColorLevelFormGroup.enable({emitEvent: false}); + } + } + + writeValue(value: FixedColorLevel): void { + this.modelValue = value; + this.fixedColorLevelFormGroup.patchValue( + value, {emitEvent: false} + ); + } + + fixedColorLevelRangeText(): string { + const value: FixedColorLevel = this.fixedColorLevelFormGroup.value; + const from = this.valueSourcePropertyText(value?.from); + const to = this.valueSourcePropertyText(value?.to); + return `${from} - ${to}`; + } + + private valueSourcePropertyText(source?: ValueSourceProperty): string { + if (source) { + if (source.valueSource === 'predefinedValue') { + return `${isNumber(source.value) ? source.value : 0}`; + } else if (source.valueSource === 'entityAttribute') { + const alias = source.entityAlias || 'Undefined'; + const key = source.attribute || 'Undefined'; + return `${alias}.${key}`; + } + } + return 'Undefined'; + } + + private updateModel() { + const value: FixedColorLevel = this.fixedColorLevelFormGroup.value; + this.modelValue = value; + this.propagateChange(this.modelValue); + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.html index 3e1ffde7a3..80e4256e86 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.html @@ -52,7 +52,7 @@ + label="{{ 'widgets.gauge.highlight-color' | translate }}" openOnInput colorClearButton> diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/tick-value.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/tick-value.component.html new file mode 100644 index 0000000000..6c0c87e076 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/tick-value.component.html @@ -0,0 +1,44 @@ + + + +
+ +
+
{{ tickValueText() }}
+
+ + + +
+ + +
+ +
+ +
+
+ + diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/tick-value.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/tick-value.component.scss new file mode 100644 index 0000000000..002203e3d3 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/tick-value.component.scss @@ -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; + &.tick-value { + 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 { + &.tick-value { + .mat-expansion-panel-body { + padding: 0 8px 8px; + } + } + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/tick-value.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/tick-value.component.ts new file mode 100644 index 0000000000..7bf02ac9d0 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/tick-value.component.ts @@ -0,0 +1,120 @@ +/// +/// 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 { ValueSourceProperty } from '@home/components/widget/lib/settings/common/value-source.component'; +import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core'; +import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } 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 { isNumber } from '@core/utils'; +import { IAliasController } from '@core/api/widget-api.models'; + +@Component({ + selector: 'tb-tick-value', + templateUrl: './tick-value.component.html', + styleUrls: ['./tick-value.component.scss', './../widget-settings.scss'], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => TickValueComponent), + multi: true + } + ] +}) +export class TickValueComponent extends PageComponent implements OnInit, ControlValueAccessor { + + @Input() + disabled: boolean; + + @Input() + expanded = false; + + @Input() + aliasController: IAliasController; + + @Output() + removeTickValue = new EventEmitter(); + + private modelValue: ValueSourceProperty; + + private propagateChange = null; + + public tickValueFormGroup: FormGroup; + + constructor(protected store: Store, + private translate: TranslateService, + private fb: FormBuilder) { + super(store); + } + + ngOnInit(): void { + this.tickValueFormGroup = this.fb.group({ + tickValue: [null, []] + }); + this.tickValueFormGroup.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.tickValueFormGroup.disable({emitEvent: false}); + } else { + this.tickValueFormGroup.enable({emitEvent: false}); + } + } + + writeValue(value: ValueSourceProperty): void { + this.modelValue = value; + this.tickValueFormGroup.patchValue( + {tickValue: value}, {emitEvent: false} + ); + } + + tickValueText(): string { + const value: ValueSourceProperty = this.tickValueFormGroup.get('tickValue').value; + return this.valueSourcePropertyText(value); + } + + private valueSourcePropertyText(source?: ValueSourceProperty): string { + if (source) { + if (source.valueSource === 'predefinedValue') { + return `${isNumber(source.value) ? source.value : 0}`; + } else if (source.valueSource === 'entityAttribute') { + const alias = source.entityAlias || 'Undefined'; + const key = source.attribute || 'Undefined'; + return `${alias}.${key}`; + } + } + return 'Undefined'; + } + + private updateModel() { + const value: ValueSourceProperty = this.tickValueFormGroup.get('tickValue').value; + this.modelValue = value; + this.propagateChange(this.modelValue); + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts index 8e0f2b687d..a90bc9edf4 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts @@ -69,6 +69,12 @@ import { import { AnalogueCompassWidgetSettingsComponent } from '@home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component'; +import { + DigitalGaugeWidgetSettingsComponent +} from '@home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component'; +import { ValueSourceComponent } from '@home/components/widget/lib/settings/common/value-source.component'; +import { FixedColorLevelComponent } from '@home/components/widget/lib/settings/gauge/fixed-color-level.component'; +import { TickValueComponent } from '@home/components/widget/lib/settings/gauge/tick-value.component'; @NgModule({ declarations: [ @@ -91,7 +97,11 @@ import { GaugeHighlightComponent, AnalogueRadialGaugeWidgetSettingsComponent, AnalogueLinearGaugeWidgetSettingsComponent, - AnalogueCompassWidgetSettingsComponent + AnalogueCompassWidgetSettingsComponent, + DigitalGaugeWidgetSettingsComponent, + ValueSourceComponent, + FixedColorLevelComponent, + TickValueComponent ], imports: [ CommonModule, @@ -118,7 +128,11 @@ import { GaugeHighlightComponent, AnalogueRadialGaugeWidgetSettingsComponent, AnalogueLinearGaugeWidgetSettingsComponent, - AnalogueCompassWidgetSettingsComponent + AnalogueCompassWidgetSettingsComponent, + DigitalGaugeWidgetSettingsComponent, + ValueSourceComponent, + FixedColorLevelComponent, + TickValueComponent ] }) export class WidgetSettingsModule { @@ -141,5 +155,6 @@ export const widgetSettingsComponentsMap: {[key: string]: Type .mat-expansion-panel-content { + > .mat-expansion-panel-body { + padding: 0; + } } .mat-checkbox-layout { diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html index 256aa56746..3b764f0cf0 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html @@ -500,6 +500,7 @@ fxLayout="column"> diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.scss b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.scss index d714420909..d8f18a6fc5 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.scss @@ -139,8 +139,10 @@ .mat-expansion-panel-header-description { align-items: center; } - .mat-expansion-panel-body{ - padding: 0; + > .mat-expansion-panel-content { + > .mat-expansion-panel-body { + padding: 0; + } } .tb-json-object-panel, .tb-css-content-panel { margin: 0 0 8px; diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget-settings.component.ts index 15919447ea..c5fed3ff05 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/widget-settings.component.ts @@ -44,6 +44,7 @@ import { IWidgetSettingsComponent, Widget, WidgetSettings } from '@shared/models import { widgetSettingsComponentsMap } from '@home/components/widget/lib/settings/widget-settings.module'; import { Dashboard } from '@shared/models/dashboard.models'; import { WidgetService } from '@core/http/widget.service'; +import { IAliasController } from '@core/api/widget-api.models'; @Component({ selector: 'tb-widget-settings', @@ -64,6 +65,9 @@ export class WidgetSettingsComponent implements ControlValueAccessor, OnInit, On @Input() disabled: boolean; + @Input() + aliasController: IAliasController; + @Input() dashboard: Dashboard; @@ -143,6 +147,7 @@ export class WidgetSettingsComponent implements ControlValueAccessor, OnInit, On this.changeSubscription = null; } if (this.definedSettingsComponent) { + this.definedSettingsComponent.aliasController = this.aliasController; this.definedSettingsComponent.dashboard = this.dashboard; this.definedSettingsComponent.widget = this.widget; this.definedSettingsComponent.functionScopeVariables = this.widgetService.getWidgetScopeVariables(); @@ -197,6 +202,7 @@ export class WidgetSettingsComponent implements ControlValueAccessor, OnInit, On const factory = this.cfr.resolveComponentFactory(componentType); this.definedSettingsComponentRef = this.definedSettingsContainer.createComponent(factory); this.definedSettingsComponent = this.definedSettingsComponentRef.instance; + this.definedSettingsComponent.aliasController = this.aliasController; this.definedSettingsComponent.dashboard = this.dashboard; this.definedSettingsComponent.widget = this.widget; this.definedSettingsComponent.functionScopeVariables = this.widgetService.getWidgetScopeVariables(); diff --git a/ui-ngx/src/app/shared/components/color-input.component.html b/ui-ngx/src/app/shared/components/color-input.component.html index 16b6297a24..765178022b 100644 --- a/ui-ngx/src/app/shared/components/color-input.component.html +++ b/ui-ngx/src/app/shared/components/color-input.component.html @@ -23,7 +23,7 @@
- + + + + + + + + diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.ts new file mode 100644 index 0000000000..8accd374a6 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.ts @@ -0,0 +1,411 @@ +/// +/// 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, Input, OnInit } from '@angular/core'; +import { + AbstractControl, + ControlValueAccessor, + FormArray, + FormBuilder, + FormControl, + FormGroup, + NG_VALIDATORS, + NG_VALUE_ACCESSOR, + Validator, + Validators +} from '@angular/forms'; +import { PageComponent } from '@shared/components/page.component'; +import { ChartType, TbFlotSettings } from '@home/components/widget/lib/flot-widget.models'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { TranslateService } from '@ngx-translate/core'; +import { ComparisonDuration } from '@shared/models/time/time.models'; +import { WidgetService } from '@core/http/widget.service'; +import { fixedColorLevelValidator } from '@home/components/widget/lib/settings/gauge/fixed-color-level.component'; +import { CdkDragDrop } from '@angular/cdk/drag-drop'; +import { + LabelDataKey, + labelDataKeyValidator +} from '@home/components/widget/lib/settings/chart/label-data-key.component'; +import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; + +export function flotDefaultSettings(chartType: ChartType): Partial { + const settings: Partial = { + stack: false, + fontColor: '#545454', + fontSize: 10, + showTooltip: true, + tooltipIndividual: false, + tooltipCumulative: false, + hideZeros: false, + tooltipValueFormatter: '', + grid: { + verticalLines: true, + horizontalLines: true, + outlineWidth: 1, + color: '#545454', + backgroundColor: null, + tickColor: '#DDDDDD' + }, + xaxis: { + title: null, + showLabels: true, + color: null + }, + yaxis: { + min: null, + max: null, + title: null, + showLabels: true, + color: null, + tickSize: null, + tickDecimals: 0, + ticksFormatter: '' + } + }; + if (chartType === 'graph') { + settings.smoothLines = false; + settings.shadowSize = 4; + } + if (chartType === 'bar') { + settings.defaultBarWidth = 600; + settings.barAlignment = 'left'; + } + if (chartType === 'graph' || chartType === 'bar') { + settings.thresholdsLineWidth = null; + settings.comparisonEnabled = false; + settings.timeForComparison = 'previousInterval'; + settings.comparisonCustomIntervalValue = 7200000; + settings.xaxisSecond = { + title: null, + axisPosition: 'top', + showLabels: true + }; + settings.customLegendEnabled = false; + settings.dataKeysListForLabels = []; + } + return settings; +} + +@Component({ + selector: 'tb-flot-widget-settings', + templateUrl: './flot-widget-settings.component.html', + styleUrls: ['./../widget-settings.scss'], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => FlotWidgetSettingsComponent), + multi: true + }, + { + provide: NG_VALIDATORS, + useExisting: forwardRef(() => FlotWidgetSettingsComponent), + multi: true, + } + ] +}) +export class FlotWidgetSettingsComponent extends PageComponent implements OnInit, ControlValueAccessor, Validator { + + @Input() + disabled: boolean; + + @Input() + chartType: ChartType; + + functionScopeVariables = this.widgetService.getWidgetScopeVariables(); + + private modelValue: TbFlotSettings; + + private propagateChange = null; + + public flotSettingsFormGroup: FormGroup; + + constructor(protected store: Store, + private translate: TranslateService, + private widgetService: WidgetService, + private fb: FormBuilder) { + super(store); + } + + ngOnInit(): void { + this.flotSettingsFormGroup = this.fb.group({ + + // Common settings + + stack: [false, []], + fontSize: [10, [Validators.min(0)]], + fontColor: ['#545454', []], + + // Tooltip settings + + showTooltip: [true, []], + tooltipIndividual: [false, []], + tooltipCumulative: [false, []], + hideZeros: [false, []], + tooltipValueFormatter: ['', []], + + // Grid settings + + grid: this.fb.group({ + verticalLines: [true, []], + horizontalLines: [true, []], + outlineWidth: [1, [Validators.min(0)]], + color: ['#545454', []], + backgroundColor: [null, []], + tickColor: ['#DDDDDD', []] + }), + + // X axis settings + + xaxis: this.fb.group({ + title: [null, []], + + // --> X axis tick labels settings + + showLabels: [true, []], + color: [null, []], + }), + + // Y axis settings + + yaxis: this.fb.group({ + min: [null, []], + max: [null, []], + title: [null, []], + + // --> Y axis tick labels settings + + showLabels: [true, []], + color: [null, []], + tickSize: [null, [Validators.min(0)]], + tickDecimals: [0, [Validators.min(0)]], + ticksFormatter: ['', []] + }) + }); + if (this.chartType === 'graph') { + // Common settings + this.flotSettingsFormGroup.addControl('shadowSize', this.fb.control(4, [Validators.min(0)])); + this.flotSettingsFormGroup.addControl('smoothLines', this.fb.control(false, [])); + } else if (this.chartType === 'bar') { + // Common settings + this.flotSettingsFormGroup.addControl('defaultBarWidth', this.fb.control(600, [Validators.min(0)])); + this.flotSettingsFormGroup.addControl('barAlignment', this.fb.control('left', [])); + } + if (this.chartType === 'graph' || this.chartType === 'bar') { + // Common settings + this.flotSettingsFormGroup.addControl('thresholdsLineWidth', this.fb.control(null, [Validators.min(0)])); + + // Comparison settings + + this.flotSettingsFormGroup.addControl('comparisonEnabled', this.fb.control(false, [])); + this.flotSettingsFormGroup.addControl('timeForComparison', this.fb.control('previousInterval', [])); + this.flotSettingsFormGroup.addControl('comparisonCustomIntervalValue', this.fb.control(7200000, [Validators.min(0)])); + + // --> Comparison X axis settings + + this.flotSettingsFormGroup.addControl('xaxisSecond', this.fb.group({ + axisPosition: ['top', []], + title: [null, []], + showLabels: [true, []] + })); + + // Custom legend settings + + this.flotSettingsFormGroup.addControl('customLegendEnabled', this.fb.control(false, [])); + this.flotSettingsFormGroup.addControl('dataKeysListForLabels', this.fb.control(this.fb.array([]), [])); + } + + this.flotSettingsFormGroup.get('showTooltip').valueChanges.subscribe(() => { + this.updateValidators(true); + }); + + this.flotSettingsFormGroup.get('xaxis.showLabels').valueChanges.subscribe(() => { + this.updateValidators(true); + }); + + this.flotSettingsFormGroup.get('yaxis.showLabels').valueChanges.subscribe(() => { + this.updateValidators(true); + }); + + if (this.chartType === 'graph' || this.chartType === 'bar') { + this.flotSettingsFormGroup.get('comparisonEnabled').valueChanges.subscribe(() => { + this.updateValidators(true); + }); + this.flotSettingsFormGroup.get('timeForComparison').valueChanges.subscribe(() => { + this.updateValidators(true); + }); + this.flotSettingsFormGroup.get('customLegendEnabled').valueChanges.subscribe(() => { + this.updateValidators(true); + }); + } + + this.flotSettingsFormGroup.valueChanges.subscribe(() => { + this.updateModel(); + }); + + this.updateValidators(false); + } + + registerOnChange(fn: any): void { + this.propagateChange = fn; + } + + registerOnTouched(fn: any): void { + } + + setDisabledState(isDisabled: boolean): void { + this.disabled = isDisabled; + if (isDisabled) { + this.flotSettingsFormGroup.disable({emitEvent: false}); + } else { + this.flotSettingsFormGroup.enable({emitEvent: false}); + } + } + + writeValue(value: TbFlotSettings): void { + const dataKeysListForLabels = value?.dataKeysListForLabels; + this.modelValue = value; + this.flotSettingsFormGroup.patchValue( + value, {emitEvent: false} + ); + const dataKeysListForLabelsControls: Array = []; + if (dataKeysListForLabels && dataKeysListForLabels.length) { + dataKeysListForLabels.forEach((labelDataKey) => { + dataKeysListForLabelsControls.push(this.fb.control(labelDataKey, [labelDataKeyValidator])); + }); + } + this.flotSettingsFormGroup.setControl('dataKeysListForLabels', this.fb.array(dataKeysListForLabelsControls), {emitEvent: false}); + this.updateValidators(false); + } + + validate(c: FormControl) { + return (this.flotSettingsFormGroup.valid) ? null : { + flotSettings: { + valid: false, + }, + }; + } + + private updateModel() { + const value: TbFlotSettings = this.flotSettingsFormGroup.value; + this.modelValue = value; + this.propagateChange(this.modelValue); + } + + private updateValidators(emitEvent?: boolean): void { + const showTooltip: boolean = this.flotSettingsFormGroup.get('showTooltip').value; + const xaxisShowLabels: boolean = this.flotSettingsFormGroup.get('xaxis.showLabels').value; + const yaxisShowLabels: boolean = this.flotSettingsFormGroup.get('yaxis.showLabels').value; + + if (showTooltip) { + this.flotSettingsFormGroup.get('tooltipIndividual').enable({emitEvent}); + this.flotSettingsFormGroup.get('tooltipCumulative').enable({emitEvent}); + this.flotSettingsFormGroup.get('hideZeros').enable({emitEvent}); + this.flotSettingsFormGroup.get('tooltipValueFormatter').enable({emitEvent}); + } else { + this.flotSettingsFormGroup.get('tooltipIndividual').disable({emitEvent}); + this.flotSettingsFormGroup.get('tooltipCumulative').disable({emitEvent}); + this.flotSettingsFormGroup.get('hideZeros').disable({emitEvent}); + this.flotSettingsFormGroup.get('tooltipValueFormatter').disable({emitEvent}); + } + + if (xaxisShowLabels) { + this.flotSettingsFormGroup.get('xaxis.color').enable({emitEvent}); + } else { + this.flotSettingsFormGroup.get('xaxis.color').disable({emitEvent}); + } + + if (yaxisShowLabels) { + this.flotSettingsFormGroup.get('yaxis.color').enable({emitEvent}); + this.flotSettingsFormGroup.get('yaxis.tickSize').enable({emitEvent}); + this.flotSettingsFormGroup.get('yaxis.tickDecimals').enable({emitEvent}); + this.flotSettingsFormGroup.get('yaxis.ticksFormatter').enable({emitEvent}); + } else { + this.flotSettingsFormGroup.get('yaxis.color').disable({emitEvent}); + this.flotSettingsFormGroup.get('yaxis.tickSize').disable({emitEvent}); + this.flotSettingsFormGroup.get('yaxis.tickDecimals').disable({emitEvent}); + this.flotSettingsFormGroup.get('yaxis.ticksFormatter').disable({emitEvent}); + } + + this.flotSettingsFormGroup.get('tooltipIndividual').updateValueAndValidity({emitEvent: false}); + this.flotSettingsFormGroup.get('tooltipCumulative').updateValueAndValidity({emitEvent: false}); + this.flotSettingsFormGroup.get('hideZeros').updateValueAndValidity({emitEvent: false}); + this.flotSettingsFormGroup.get('tooltipValueFormatter').updateValueAndValidity({emitEvent: false}); + this.flotSettingsFormGroup.get('xaxis.color').updateValueAndValidity({emitEvent: false}); + this.flotSettingsFormGroup.get('yaxis.color').updateValueAndValidity({emitEvent: false}); + this.flotSettingsFormGroup.get('yaxis.tickSize').updateValueAndValidity({emitEvent: false}); + this.flotSettingsFormGroup.get('yaxis.tickDecimals').updateValueAndValidity({emitEvent: false}); + this.flotSettingsFormGroup.get('yaxis.ticksFormatter').updateValueAndValidity({emitEvent: false}); + + if (this.chartType === 'graph' || this.chartType === 'bar') { + const comparisonEnabled: boolean = this.flotSettingsFormGroup.get('comparisonEnabled').value; + const timeForComparison: ComparisonDuration = this.flotSettingsFormGroup.get('timeForComparison').value; + const customLegendEnabled: boolean = this.flotSettingsFormGroup.get('customLegendEnabled').value; + if (comparisonEnabled) { + this.flotSettingsFormGroup.get('timeForComparison').enable({emitEvent: false}); + if (timeForComparison === 'customInterval') { + this.flotSettingsFormGroup.get('comparisonCustomIntervalValue').enable({emitEvent}); + } else { + this.flotSettingsFormGroup.get('comparisonCustomIntervalValue').disable({emitEvent}); + } + } else { + this.flotSettingsFormGroup.get('timeForComparison').disable({emitEvent: false}); + this.flotSettingsFormGroup.get('comparisonCustomIntervalValue').disable({emitEvent}); + } + if (customLegendEnabled) { + this.flotSettingsFormGroup.get('dataKeysListForLabels').enable({emitEvent}); + } else { + this.flotSettingsFormGroup.get('dataKeysListForLabels').disable({emitEvent}); + } + + this.flotSettingsFormGroup.get('timeForComparison').updateValueAndValidity({emitEvent: false}); + this.flotSettingsFormGroup.get('comparisonCustomIntervalValue').updateValueAndValidity({emitEvent: false}); + this.flotSettingsFormGroup.get('dataKeysListForLabels').updateValueAndValidity({emitEvent: false}); + } + } + + dataKeysListForLabelsFormArray(): FormArray { + return this.flotSettingsFormGroup.get('dataKeysListForLabels') as FormArray; + } + + public trackByLabelDataKey(index: number, labelDataKeyControl: AbstractControl): any { + return labelDataKeyControl; + } + + public removeLabelDataKey(index: number) { + (this.flotSettingsFormGroup.get('dataKeysListForLabels') as FormArray).removeAt(index); + } + + public addLabelDataKey() { + const labelDataKey: LabelDataKey = { + name: null, + type: DataKeyType.attribute + }; + const dataKeysListForLabelsArray = this.flotSettingsFormGroup.get('dataKeysListForLabels') as FormArray; + const labelDataKeyControl = this.fb.control(labelDataKey, [labelDataKeyValidator]); + (labelDataKeyControl as any).new = true; + dataKeysListForLabelsArray.push(labelDataKeyControl); + this.flotSettingsFormGroup.updateValueAndValidity(); + } + + labelDataKeyDrop(event: CdkDragDrop) { + const dataKeysListForLabelsArray = this.flotSettingsFormGroup.get('dataKeysListForLabels') as FormArray; + const labelDataKey = dataKeysListForLabelsArray.at(event.previousIndex); + dataKeysListForLabelsArray.removeAt(event.previousIndex); + dataKeysListForLabelsArray.insert(event.currentIndex, labelDataKey); + } + +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/label-data-key.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/label-data-key.component.html new file mode 100644 index 0000000000..50dc16d6fb --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/label-data-key.component.html @@ -0,0 +1,63 @@ + + + +
+ +
+ {{ labelDataKeyText() }} +
+ + + +
+ + +
+ +
+
+ + widgets.chart.key-name + + + {{ 'widgets.chart.key-name-required' | translate }} + + + + widgets.chart.key-type + + + {{ 'widgets.chart.key-type-attribute' | translate }} + + + {{ 'widgets.chart.key-type-timeseries' | translate }} + + + +
+
+
+ + diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/label-data-key.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/label-data-key.component.scss new file mode 100644 index 0000000000..d82e4b34b9 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/label-data-key.component.scss @@ -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-data-key { + 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-data-key { + .mat-expansion-panel-body { + padding: 0 8px 8px; + } + } + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/label-data-key.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/label-data-key.component.ts new file mode 100644 index 0000000000..940c135c1e --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/label-data-key.component.ts @@ -0,0 +1,132 @@ +/// +/// 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 { + AbstractControl, + ControlValueAccessor, + FormBuilder, + FormGroup, + NG_VALUE_ACCESSOR, ValidationErrors, + 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 { DataKeyType } from '@shared/models/telemetry/telemetry.models'; + +export interface LabelDataKey { + name: string; + type: DataKeyType; +} + +export function labelDataKeyValidator(control: AbstractControl): ValidationErrors | null { + const labelDataKey: LabelDataKey = control.value; + if (!labelDataKey || !labelDataKey.name) { + return { + labelDataKey: true + }; + } + return null; +} + +@Component({ + selector: 'tb-label-data-key', + templateUrl: './label-data-key.component.html', + styleUrls: ['./label-data-key.component.scss', './../widget-settings.scss'], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => LabelDataKeyComponent), + multi: true + } + ] +}) +export class LabelDataKeyComponent extends PageComponent implements OnInit, ControlValueAccessor { + + @Input() + disabled: boolean; + + @Input() + expanded = false; + + @Output() + removeLabelDataKey = new EventEmitter(); + + private modelValue: LabelDataKey; + + private propagateChange = null; + + public labelDataKeyFormGroup: FormGroup; + + constructor(protected store: Store, + private translate: TranslateService, + private fb: FormBuilder) { + super(store); + } + + ngOnInit(): void { + this.labelDataKeyFormGroup = this.fb.group({ + name: [null, [Validators.required]], + type: [DataKeyType.attribute, [Validators.required]] + }); + this.labelDataKeyFormGroup.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.labelDataKeyFormGroup.disable({emitEvent: false}); + } else { + this.labelDataKeyFormGroup.enable({emitEvent: false}); + } + } + + writeValue(value: LabelDataKey): void { + this.modelValue = value; + this.labelDataKeyFormGroup.patchValue( + value, {emitEvent: false} + ); + } + + labelDataKeyText(): string { + const name: string = this.labelDataKeyFormGroup.get('name').value || ''; + const type: DataKeyType = this.labelDataKeyFormGroup.get('type').value; + let typeStr: string; + if (type === DataKeyType.attribute) { + typeStr = this.translate.instant('widgets.chart.key-type-attribute'); + } else if (type === DataKeyType.timeseries) { + typeStr = this.translate.instant('widgets.chart.key-type-timeseries'); + } + return `${name} (${typeStr})`; + } + + private updateModel() { + const value: LabelDataKey = this.labelDataKeyFormGroup.value; + this.modelValue = value; + this.propagateChange(this.modelValue); + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts index a90bc9edf4..8ee227e253 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts @@ -75,6 +75,14 @@ import { import { ValueSourceComponent } from '@home/components/widget/lib/settings/common/value-source.component'; import { FixedColorLevelComponent } from '@home/components/widget/lib/settings/gauge/fixed-color-level.component'; import { TickValueComponent } from '@home/components/widget/lib/settings/gauge/tick-value.component'; +import { FlotWidgetSettingsComponent } from '@home/components/widget/lib/settings/chart/flot-widget-settings.component'; +import { + FlotLineWidgetSettingsComponent +} from '@home/components/widget/lib/settings/chart/flot-line-widget-settings.component'; +import { LabelDataKeyComponent } from '@home/components/widget/lib/settings/chart/label-data-key.component'; +import { + FlotBarWidgetSettingsComponent +} from '@home/components/widget/lib/settings/chart/flot-bar-widget-settings.component'; @NgModule({ declarations: [ @@ -101,7 +109,11 @@ import { TickValueComponent } from '@home/components/widget/lib/settings/gauge/t DigitalGaugeWidgetSettingsComponent, ValueSourceComponent, FixedColorLevelComponent, - TickValueComponent + TickValueComponent, + FlotWidgetSettingsComponent, + LabelDataKeyComponent, + FlotLineWidgetSettingsComponent, + FlotBarWidgetSettingsComponent ], imports: [ CommonModule, @@ -132,7 +144,11 @@ import { TickValueComponent } from '@home/components/widget/lib/settings/gauge/t DigitalGaugeWidgetSettingsComponent, ValueSourceComponent, FixedColorLevelComponent, - TickValueComponent + TickValueComponent, + FlotWidgetSettingsComponent, + LabelDataKeyComponent, + FlotLineWidgetSettingsComponent, + FlotBarWidgetSettingsComponent ] }) export class WidgetSettingsModule { @@ -156,5 +172,7 @@ export const widgetSettingsComponentsMap: {[key: string]: Type { - this.onSettingsChanged(updated); + this.settingsForm().valueChanges.subscribe((updated: any) => { + this.onSettingsChanged(this.prepareOutputSettings(updated)); }); } @@ -713,7 +713,7 @@ export abstract class WidgetSettingsComponent extends PageComponent implements protected onSettingsChanged(updated: WidgetSettings) { this.settingsValue = updated; if (this.validateSettings()) { - this.settingsChangedEmitter.emit(this.prepareOutputSettings(updated)); + this.settingsChangedEmitter.emit(updated); } else { this.settingsChangedEmitter.emit(null); } @@ -723,7 +723,7 @@ export abstract class WidgetSettingsComponent extends PageComponent implements return settings; } - protected prepareOutputSettings(settings: WidgetSettings): WidgetSettings { + protected prepareOutputSettings(settings: any): WidgetSettings { return settings; } diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index c0e6c3b801..d4d47f3bfd 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -3182,13 +3182,75 @@ "invalid-widget-type-file-error": "Unable to import widget type: Invalid widget type data structure." }, "widgets": { + "chart": { + "common-settings": "Common settings", + "enable-stacking-mode": "Enable stacking mode", + "line-shadow-size": "Line shadow size", + "display-smooth-lines": "Display smooth (curved) lines", + "default-bar-width": "Default bar width for non-aggregated data (milliseconds)", + "bar-alignment": "Bar alignment", + "bar-alignment-left": "Left", + "bar-alignment-right": "Right", + "bar-alignment-center": "Center", + "default-font-size": "Default font size", + "default-font-color": "Default font color", + "thresholds-line-width": "Default line width for all thresholds", + "tooltip-settings": "Tooltip settings", + "show-tooltip": "Show tooltip", + "hover-individual-points": "Hover individual points", + "show-cumulative-values": "Show cumulative values in stacking mode", + "hide-zero-false-values": "Hide zero/false values from tooltip", + "tooltip-value-format-function": "Tooltip value format function", + "grid-settings": "Grid settings", + "show-vertical-lines": "Show vertical lines", + "show-horizontal-lines": "Show horizontal lines", + "grid-outline-border-width": "Grid outline/border width (px)", + "primary-color": "Primary color", + "background-color": "Background color", + "ticks-color": "Ticks color", + "xaxis-settings": "X axis settings", + "axis-title": "Axis title", + "xaxis-tick-labels-settings": "X axis tick labels settings", + "show-tick-labels": "Show axis tick labels", + "yaxis-settings": "Y axis settings", + "min-scale-value": "Minimum value on the scale", + "max-scale-value": "Maximum value on the scale", + "yaxis-tick-labels-settings": "Y axis tick labels settings", + "tick-step-size": "Step size between ticks", + "number-of-decimals": "The number of decimals to display", + "ticks-formatter-function": "Ticks formatter function", + "comparison-settings": "Comparison settings", + "enable-comparison": "Enable comparison", + "time-for-comparison": "Comparison period", + "time-for-comparison-previous-interval": "Previous interval (default)", + "time-for-comparison-days": "Day ago", + "time-for-comparison-weeks": "Week ago", + "time-for-comparison-months": "Month ago", + "time-for-comparison-years": "Year ago", + "time-for-comparison-custom-interval": "Custom interval", + "custom-interval-value": "Custom interval value (ms)", + "comparison-x-axis-settings": "Comparison X axis settings", + "axis-position": "Axis position", + "axis-position-top": "Top (default)", + "axis-position-bottom": "Bottom", + "custom-legend-settings": "Custom legend settings", + "enable-custom-legend": "Enable custom legend (this will allow you to use attribute/timeseries values in key labels)", + "key-name": "Key name", + "key-name-required": "Key name is required", + "key-type": "Key type", + "key-type-attribute": "Attribute", + "key-type-timeseries": "Timeseries", + "label-keys-list": "Keys list to use in labels", + "no-label-keys": "No keys configured", + "add-label-key": "Add new key" + }, "dashboard-state": { - "dashboard-state-settings": "Dashboard state settings", - "dashboard-state": "Dashboard state id", - "autofill-state-layout": "Autofill state layout height by default", - "default-margin": "Default widgets margin", - "default-background-color": "Default background color", - "sync-parent-state-params": "Sync state params with parent dashboard" + "dashboard-state-settings": "Dashboard state settings", + "dashboard-state": "Dashboard state id", + "autofill-state-layout": "Autofill state layout height by default", + "default-margin": "Default widgets margin", + "default-background-color": "Default background color", + "sync-parent-state-params": "Sync state params with parent dashboard" }, "date-range-navigator": { "localizationMap": { @@ -3248,137 +3310,137 @@ } }, "entities-hierarchy": { - "hierarchy-data-settings": "Hierarchy data settings", - "relations-query-function": "Node relations query function", - "has-children-function": "Node has children function", - "node-state-settings": "Node state settings", - "node-opened-function": "Default node opened function", - "node-disabled-function": "Node disabled function", - "display-settings": "Display settings", - "node-icon-function": "Node icon function", - "node-text-function": "Node text function", - "sort-settings": "Sort settings", - "nodes-sort-function": "Nodes sort function" + "hierarchy-data-settings": "Hierarchy data settings", + "relations-query-function": "Node relations query function", + "has-children-function": "Node has children function", + "node-state-settings": "Node state settings", + "node-opened-function": "Default node opened function", + "node-disabled-function": "Node disabled function", + "display-settings": "Display settings", + "node-icon-function": "Node icon function", + "node-text-function": "Node text function", + "sort-settings": "Sort settings", + "nodes-sort-function": "Nodes sort function" }, "gauge": { - "default-color": "Default color", - "radial-gauge-settings": "Radial gauge settings", - "ticks-settings": "Ticks settings", - "min-value": "Minimum value", - "max-value": "Maximum value", - "start-ticks-angle": "Start ticks angle", - "ticks-angle": "Ticks angle", - "major-ticks-count": "Major ticks count", - "major-ticks-color": "Major ticks color", - "minor-ticks-count": "Minor ticks count", - "minor-ticks-color": "Minor ticks color", - "tick-numbers-font": "Tick numbers font", - "unit-title-settings": "Unit title settings", - "show-unit-title": "Show unit title", - "unit-title": "Unit title", - "title-font": "Title text font", - "units-settings": "Units settings", - "units-font": "Units text font", - "value-box-settings": "Value box settings", - "show-value-box": "Show value box", - "value-int": "Digits count for integer part of value", - "value-font": "Value text font", - "value-box-rect-stroke-color": "Value box rectangle stroke color", - "value-box-rect-stroke-color-end": "Value box rectangle stroke color - end gradient", - "value-box-background-color": "Value box background color", - "value-box-shadow-color": "Value box shadow color", - "plate-settings": "Plate settings", - "show-plate-border": "Show plate border", - "plate-color": "Plate color", - "needle-settings": "Needle settings", - "needle-circle-size": "Needle circle size", - "needle-color": "Needle color", - "needle-color-end": "Needle color - end gradient", - "needle-color-shadow-up": "Upper half of the needle shadow color", - "needle-color-shadow-down": "Drop shadow needle color", - "highlights-settings": "Highlights settings", - "highlights-width": "Highlights width", - "highlights": "Highlights", - "highlight-from": "From", - "highlight-to": "To", - "highlight-color": "Color", - "no-highlights": "No highlights configured", - "add-highlight": "Add highlight", - "animation-settings": "Animation settings", - "enable-animation": "Enable animation", - "animation-duration": "Animation duration", - "animation-rule": "Animation rule", - "animation-linear": "Linear", - "animation-quad": "Quad", - "animation-quint": "Quint", - "animation-cycle": "Cycle", - "animation-bounce": "Bounce", - "animation-elastic": "Elastic", - "animation-dequad": "Dequad", - "animation-dequint": "Dequint", - "animation-decycle": "Decycle", - "animation-debounce": "Debounce", - "animation-delastic": "Delastic", - "linear-gauge-settings": "Linear gauge settings", - "bar-stroke-width": "Bar stroke width", - "bar-stroke-color": "Bar stroke color", - "bar-background-color": "Gauge bar background color", - "bar-background-color-end": "Bar background color - end gradient", - "progress-bar-color": "Progress bar color", - "progress-bar-color-end": "Progress bar color - end gradient", - "major-ticks-names": "Major ticks names", - "show-stroke-ticks": "Show ticks stroke", - "major-ticks-font": "Major ticks font", - "border-color": "Border color", - "border-width": "Border width", - "needle-circle-color": "Needle circle color", - "animation-target": "Animation target", - "animation-target-needle": "Needle", - "animation-target-plate": "Plate", - "common-settings": "Common gauge settings", - "gauge-type": "Gauge type", - "gauge-type-arc": "Arc", - "gauge-type-donut": "Donut", - "gauge-type-horizontal-bar": "Horizontal bar", - "gauge-type-vertical-bar": "Vertical bar", - "donut-start-angle": "Angle to start from", - "bar-settings": "Gauge bar settings", - "relative-bar-width": "Relative bar width", - "neon-glow-brightness": "Neon glow effect brightness, (0-100), 0 - disable effect", - "stripes-thickness": "Thickness of the stripes, 0 - no stripes", - "rounded-line-cap": "Display rounded line cap", - "bar-color-settings": "Bar color settings", - "use-precise-level-color-values": "Use precise color levels", - "bar-colors": "Bar colors, from lower to upper", - "color": "Color", - "no-bar-colors": "No bar colors configured", - "add-bar-color": "Add bar color", - "from": "From", - "to": "To", - "fixed-level-colors": "Bar colors using boundary values", - "gauge-title-settings": "Gauge title settings", - "show-gauge-title": "Show gauge title", - "gauge-title": "Gauge title", - "gauge-title-font": "Gauge title font", - "unit-title-and-timestamp-settings": "Unit title and timestamp settings", - "show-timestamp": "Show value timestamp", - "timestamp-format": "Timestamp format", - "label-font": "Font of label showing under value", - "value-settings": "Value settings", - "show-value": "Show value text", - "min-max-settings": "Minimum/maximum labels settings", - "show-min-max": "Show min and max values", - "min-max-font": "Font of minimum and maximum labels", - "show-ticks": "Show ticks", - "tick-width": "Tick width", - "tick-color": "Tick color", - "tick-values": "Tick values", - "no-tick-values": "No tick values configured", - "add-tick-value": "Add tick value" + "default-color": "Default color", + "radial-gauge-settings": "Radial gauge settings", + "ticks-settings": "Ticks settings", + "min-value": "Minimum value", + "max-value": "Maximum value", + "start-ticks-angle": "Start ticks angle", + "ticks-angle": "Ticks angle", + "major-ticks-count": "Major ticks count", + "major-ticks-color": "Major ticks color", + "minor-ticks-count": "Minor ticks count", + "minor-ticks-color": "Minor ticks color", + "tick-numbers-font": "Tick numbers font", + "unit-title-settings": "Unit title settings", + "show-unit-title": "Show unit title", + "unit-title": "Unit title", + "title-font": "Title text font", + "units-settings": "Units settings", + "units-font": "Units text font", + "value-box-settings": "Value box settings", + "show-value-box": "Show value box", + "value-int": "Digits count for integer part of value", + "value-font": "Value text font", + "value-box-rect-stroke-color": "Value box rectangle stroke color", + "value-box-rect-stroke-color-end": "Value box rectangle stroke color - end gradient", + "value-box-background-color": "Value box background color", + "value-box-shadow-color": "Value box shadow color", + "plate-settings": "Plate settings", + "show-plate-border": "Show plate border", + "plate-color": "Plate color", + "needle-settings": "Needle settings", + "needle-circle-size": "Needle circle size", + "needle-color": "Needle color", + "needle-color-end": "Needle color - end gradient", + "needle-color-shadow-up": "Upper half of the needle shadow color", + "needle-color-shadow-down": "Drop shadow needle color", + "highlights-settings": "Highlights settings", + "highlights-width": "Highlights width", + "highlights": "Highlights", + "highlight-from": "From", + "highlight-to": "To", + "highlight-color": "Color", + "no-highlights": "No highlights configured", + "add-highlight": "Add highlight", + "animation-settings": "Animation settings", + "enable-animation": "Enable animation", + "animation-duration": "Animation duration", + "animation-rule": "Animation rule", + "animation-linear": "Linear", + "animation-quad": "Quad", + "animation-quint": "Quint", + "animation-cycle": "Cycle", + "animation-bounce": "Bounce", + "animation-elastic": "Elastic", + "animation-dequad": "Dequad", + "animation-dequint": "Dequint", + "animation-decycle": "Decycle", + "animation-debounce": "Debounce", + "animation-delastic": "Delastic", + "linear-gauge-settings": "Linear gauge settings", + "bar-stroke-width": "Bar stroke width", + "bar-stroke-color": "Bar stroke color", + "bar-background-color": "Gauge bar background color", + "bar-background-color-end": "Bar background color - end gradient", + "progress-bar-color": "Progress bar color", + "progress-bar-color-end": "Progress bar color - end gradient", + "major-ticks-names": "Major ticks names", + "show-stroke-ticks": "Show ticks stroke", + "major-ticks-font": "Major ticks font", + "border-color": "Border color", + "border-width": "Border width", + "needle-circle-color": "Needle circle color", + "animation-target": "Animation target", + "animation-target-needle": "Needle", + "animation-target-plate": "Plate", + "common-settings": "Common gauge settings", + "gauge-type": "Gauge type", + "gauge-type-arc": "Arc", + "gauge-type-donut": "Donut", + "gauge-type-horizontal-bar": "Horizontal bar", + "gauge-type-vertical-bar": "Vertical bar", + "donut-start-angle": "Angle to start from", + "bar-settings": "Gauge bar settings", + "relative-bar-width": "Relative bar width", + "neon-glow-brightness": "Neon glow effect brightness, (0-100), 0 - disable effect", + "stripes-thickness": "Thickness of the stripes, 0 - no stripes", + "rounded-line-cap": "Display rounded line cap", + "bar-color-settings": "Bar color settings", + "use-precise-level-color-values": "Use precise color levels", + "bar-colors": "Bar colors, from lower to upper", + "color": "Color", + "no-bar-colors": "No bar colors configured", + "add-bar-color": "Add bar color", + "from": "From", + "to": "To", + "fixed-level-colors": "Bar colors using boundary values", + "gauge-title-settings": "Gauge title settings", + "show-gauge-title": "Show gauge title", + "gauge-title": "Gauge title", + "gauge-title-font": "Gauge title font", + "unit-title-and-timestamp-settings": "Unit title and timestamp settings", + "show-timestamp": "Show value timestamp", + "timestamp-format": "Timestamp format", + "label-font": "Font of label showing under value", + "value-settings": "Value settings", + "show-value": "Show value text", + "min-max-settings": "Minimum/maximum labels settings", + "show-min-max": "Show min and max values", + "min-max-font": "Font of minimum and maximum labels", + "show-ticks": "Show ticks", + "tick-width": "Tick width", + "tick-color": "Tick color", + "tick-values": "Tick values", + "no-tick-values": "No tick values configured", + "add-tick-value": "Add tick value" }, "html-card": { - "html": "HTML", - "css": "CSS" + "html": "HTML", + "css": "CSS" }, "input-widgets": { "attribute-not-allowed": "Attribute parameter cannot be used in this widget", @@ -3434,18 +3496,18 @@ "qr-code-text-function": "QR code text function" }, "label-widget": { - "label-pattern": "Pattern", - "label-pattern-hint": "Hint: for ex. 'Text ${keyName} units.' or ${#<key index>} 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" + "label-pattern": "Pattern", + "label-pattern-hint": "Hint: for ex. 'Text ${keyName} units.' or ${#<key index>} 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", @@ -3526,87 +3588,87 @@ } }, "markdown": { - "use-markdown-text-function": "Use markdown/HTML value function", - "markdown-text-function": "Markdown/HTML value function", - "markdown-text-pattern": "Markdown/HTML pattern (markdown or HTML with variables, for ex. '${entityName} or ${keyName} - some text.')", - "markdown-css": "Markdown/HTML CSS" + "use-markdown-text-function": "Use markdown/HTML value function", + "markdown-text-function": "Markdown/HTML value function", + "markdown-text-pattern": "Markdown/HTML pattern (markdown or HTML with variables, for ex. '${entityName} or ${keyName} - some text.')", + "markdown-css": "Markdown/HTML CSS" }, "simple-card": { - "label-position": "Label position", - "label-position-left": "Left", - "label-position-top": "Top" + "label-position": "Label position", + "label-position-left": "Left", + "label-position-top": "Top" }, "table": { - "common-table-settings": "Common Table Settings", - "enable-search": "Enable search", - "enable-sticky-header": "Always display header", - "enable-sticky-action": "Always display actions column", - "hidden-cell-button-display-mode": "Hidden cell button actions display mode", - "show-empty-space-hidden-action": "Show empty space instead of hidden cell button action", - "dont-reserve-space-hidden-action": "Don't reserve space for hidden action buttons", - "display-timestamp": "Display timestamp column", - "display-milliseconds": "Display timestamp milliseconds", - "display-pagination": "Display pagination", - "default-page-size": "Default page size", - "use-entity-label-tab-name": "Use entity label in tab name", - "hide-empty-lines": "Hide empty lines", - "row-style": "Row style", - "use-row-style-function": "Use row style function", - "row-style-function": "Row style function", - "cell-style": "Cell style", - "use-cell-style-function": "Use cell style function", - "cell-style-function": "Cell style function", - "cell-content": "Cell content", - "use-cell-content-function": "Use cell content function", - "cell-content-function": "Cell content function", - "show-latest-data-column": "Show latest data column", - "latest-data-column-order": "Latest data column order", - "entities-table-title": "Entities table title", - "enable-select-column-display": "Enable select columns to display", - "display-entity-name": "Display entity name column", - "entity-name-column-title": "Entity name column title", - "display-entity-label": "Display entity label column", - "entity-label-column-title": "Entity label column title", - "display-entity-type": "Display entity type column", - "default-sort-order": "Default sort order", - "column-width": "Column width (px or %)", - "default-column-visibility": "Default column visibility", - "column-visibility-visible": "Visible", - "column-visibility-hidden": "Hidden", - "column-selection-to-display": "Column selection in 'Columns to Display'", - "column-selection-to-display-enabled": "Enabled", - "column-selection-to-display-disabled": "Disabled", - "alarms-table-title": "Alarms table title", - "enable-alarms-selection": "Enable alarms selection", - "enable-alarms-search": "Enable alarms search", - "enable-alarm-filter": "Enable alarm filter", - "display-alarm-details": "Display alarm details", - "allow-alarms-ack": "Allow alarms acknowledgment", - "allow-alarms-clear": "Allow alarms clear" + "common-table-settings": "Common Table Settings", + "enable-search": "Enable search", + "enable-sticky-header": "Always display header", + "enable-sticky-action": "Always display actions column", + "hidden-cell-button-display-mode": "Hidden cell button actions display mode", + "show-empty-space-hidden-action": "Show empty space instead of hidden cell button action", + "dont-reserve-space-hidden-action": "Don't reserve space for hidden action buttons", + "display-timestamp": "Display timestamp column", + "display-milliseconds": "Display timestamp milliseconds", + "display-pagination": "Display pagination", + "default-page-size": "Default page size", + "use-entity-label-tab-name": "Use entity label in tab name", + "hide-empty-lines": "Hide empty lines", + "row-style": "Row style", + "use-row-style-function": "Use row style function", + "row-style-function": "Row style function", + "cell-style": "Cell style", + "use-cell-style-function": "Use cell style function", + "cell-style-function": "Cell style function", + "cell-content": "Cell content", + "use-cell-content-function": "Use cell content function", + "cell-content-function": "Cell content function", + "show-latest-data-column": "Show latest data column", + "latest-data-column-order": "Latest data column order", + "entities-table-title": "Entities table title", + "enable-select-column-display": "Enable select columns to display", + "display-entity-name": "Display entity name column", + "entity-name-column-title": "Entity name column title", + "display-entity-label": "Display entity label column", + "entity-label-column-title": "Entity label column title", + "display-entity-type": "Display entity type column", + "default-sort-order": "Default sort order", + "column-width": "Column width (px or %)", + "default-column-visibility": "Default column visibility", + "column-visibility-visible": "Visible", + "column-visibility-hidden": "Hidden", + "column-selection-to-display": "Column selection in 'Columns to Display'", + "column-selection-to-display-enabled": "Enabled", + "column-selection-to-display-disabled": "Disabled", + "alarms-table-title": "Alarms table title", + "enable-alarms-selection": "Enable alarms selection", + "enable-alarms-search": "Enable alarms search", + "enable-alarm-filter": "Enable alarm filter", + "display-alarm-details": "Display alarm details", + "allow-alarms-ack": "Allow alarms acknowledgment", + "allow-alarms-clear": "Allow alarms clear" }, "value-source": { - "value-source": "Value source", - "predefined-value": "Predefined value", - "entity-attribute": "Value taken from entity attribute", - "value": "Value", - "source-entity-alias": "Source entity alias", - "source-entity-attribute": "Source entity attribute" + "value-source": "Value source", + "predefined-value": "Predefined value", + "entity-attribute": "Value taken from entity attribute", + "value": "Value", + "source-entity-alias": "Source entity alias", + "source-entity-attribute": "Source entity attribute" }, "widget-font": { - "font-family": "Font family", - "size": "Size", - "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", - "shadow-color": "Shadow color" + "font-family": "Font family", + "size": "Size", + "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", + "shadow-color": "Shadow color" } }, "icon": { From 8fdf12bb2a06a022aa61bb3a569bf830bbc53e45 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Fri, 15 Apr 2022 18:23:57 +0300 Subject: [PATCH 16/66] UI: Add flot datakey and latest datakey settings forms --- .../json/system/widget_bundles/charts.json | 12 +- .../widget/lib/flot-widget.models.ts | 814 +----------------- .../home/components/widget/lib/flot-widget.ts | 15 - .../flot-bar-key-settings.component.html | 24 + .../chart/flot-bar-key-settings.component.ts | 55 ++ .../chart/flot-key-settings.component.html | 238 +++++ .../chart/flot-key-settings.component.ts | 333 +++++++ .../flot-latest-key-settings.component.html | 47 + .../flot-latest-key-settings.component.ts | 74 ++ .../flot-line-key-settings.component.html | 24 + .../chart/flot-line-key-settings.component.ts | 55 ++ .../chart/flot-threshold.component.html | 57 ++ .../chart/flot-threshold.component.scss | 40 + .../chart/flot-threshold.component.ts | 136 +++ .../chart/flot-widget-settings.component.ts | 1 - .../lib/settings/widget-settings.module.ts | 30 +- .../assets/locale/locale.constant-en_US.json | 35 +- 17 files changed, 1158 insertions(+), 832 deletions(-) create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-bar-key-settings.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-bar-key-settings.component.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-line-key-settings.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-line-key-settings.component.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.scss create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.ts diff --git a/application/src/main/data/json/system/widget_bundles/charts.json b/application/src/main/data/json/system/widget_bundles/charts.json index 83f75ae302..e612111e3a 100644 --- a/application/src/main/data/json/system/widget_bundles/charts.json +++ b/application/src/main/data/json/system/widget_bundles/charts.json @@ -146,10 +146,12 @@ "resources": [], "templateHtml": "", "templateCss": ".legend {\n font-size: 13px;\n line-height: 10px;\n}\n\n.legend table { \n border-spacing: 0px;\n border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n cursor: crosshair; \n}\n\n", - "controllerScript": "self.onInit = function() {\n self.ctx.flot = new TbFlot(self.ctx, 'state'); \n}\n\nself.onDataUpdated = function() {\n self.ctx.flot.update();\n}\n\nself.onLatestDataUpdated = function() {\n self.ctx.flot.latestDataUpdate();\n}\n\nself.onResize = function() {\n self.ctx.flot.resize();\n}\n\nself.typeParameters = function() {\n return {\n stateData: true,\n hasAdditionalLatestDataKeys: true\n };\n}\n\nself.onEditModeChanged = function() {\n self.ctx.flot.checkMouseEvents();\n}\n\nself.getDataKeySettingsSchema = function() {\n return TbFlot.datakeySettingsSchema(true, 'graph');\n}\n\nself.getLatestDataKeySettingsSchema = function() {\n return TbFlot.latestDatakeySettingsSchema();\n}\n\nself.onDestroy = function() {\n self.ctx.flot.destroy();\n}\n", + "controllerScript": "self.onInit = function() {\n self.ctx.flot = new TbFlot(self.ctx, 'state'); \n}\n\nself.onDataUpdated = function() {\n self.ctx.flot.update();\n}\n\nself.onLatestDataUpdated = function() {\n self.ctx.flot.latestDataUpdate();\n}\n\nself.onResize = function() {\n self.ctx.flot.resize();\n}\n\nself.typeParameters = function() {\n return {\n stateData: true,\n hasAdditionalLatestDataKeys: true\n };\n}\n\nself.onEditModeChanged = function() {\n self.ctx.flot.checkMouseEvents();\n}\n\nself.onDestroy = function() {\n self.ctx.flot.destroy();\n}\n", "settingsSchema": "{}", "dataKeySettingsSchema": "{}", "settingsDirective": "tb-flot-line-widget-settings", + "dataKeySettingsDirective": "tb-flot-line-key-settings", + "latestDataKeySettingsDirective": "tb-flot-latest-key-settings", "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Switch 1\",\"color\":\"#2196f3\",\"settings\":{\"showLines\":true,\"fillLines\":true,\"showPoints\":false,\"axisPosition\":\"left\",\"showSeparateAxis\":false},\"_hash\":0.8587686344902596,\"funcBody\":\"return Math.random() > 0.5 ? 1 : 0;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Switch 2\",\"color\":\"#ffc107\",\"settings\":{\"showLines\":true,\"fillLines\":false,\"showPoints\":false,\"axisPosition\":\"left\"},\"_hash\":0.12775350966079668,\"funcBody\":\"return Math.random() <= 0.5 ? 1 : 0;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"shadowSize\":4,\"fontColor\":\"#545454\",\"fontSize\":10,\"xaxis\":{\"showLabels\":true,\"color\":\"#545454\"},\"yaxis\":{\"showLabels\":true,\"color\":\"#545454\",\"ticksFormatter\":\"if (value > 0 && value <= 1) {\\n return 'On';\\n} else if (value === 0) {\\n return 'Off';\\n} else {\\n return '';\\n}\"},\"grid\":{\"color\":\"#545454\",\"tickColor\":\"#DDDDDD\",\"verticalLines\":true,\"horizontalLines\":true,\"outlineWidth\":1},\"stack\":false,\"tooltipIndividual\":false,\"tooltipValueFormatter\":\"if (value > 0 && value <= 1) {\\n return 'On';\\n} else if (value === 0) {\\n return 'Off';\\n} else {\\n return '';\\n}\",\"smoothLines\":false},\"title\":\"State Chart\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"mobileHeight\":null,\"widgetStyle\":{},\"useDashboardTimewindow\":true,\"showLegend\":true,\"actions\":{},\"legendConfig\":{\"direction\":\"column\",\",position\":\"bottom\",\"showMin\":false,\"showMax\":false,\"showAvg\":false,\"showTotal\":false}}" } }, @@ -165,11 +167,13 @@ "resources": [], "templateHtml": "", "templateCss": ".legend {\n font-size: 13px;\n line-height: 10px;\n}\n\n.legend table { \n border-spacing: 0px;\n border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n cursor: crosshair; \n}\n\n", - "controllerScript": "self.onInit = function() {\n self.ctx.flot = new TbFlot(self.ctx); \n}\n\nself.onDataUpdated = function() {\n self.ctx.flot.update();\n}\n\nself.onLatestDataUpdated = function() {\n self.ctx.flot.latestDataUpdate();\n}\n\nself.onResize = function() {\n self.ctx.flot.resize();\n}\n\nself.onEditModeChanged = function() {\n self.ctx.flot.checkMouseEvents();\n}\n\nself.getDataKeySettingsSchema = function() {\n return TbFlot.datakeySettingsSchema(true, 'graph');\n}\n\nself.getLatestDataKeySettingsSchema = function() {\n return TbFlot.latestDatakeySettingsSchema();\n}\n\nself.onDestroy = function() {\n self.ctx.flot.destroy();\n}\n\nself.typeParameters = function() {\n return {\n hasAdditionalLatestDataKeys: true\n };\n}\n", + "controllerScript": "self.onInit = function() {\n self.ctx.flot = new TbFlot(self.ctx); \n}\n\nself.onDataUpdated = function() {\n self.ctx.flot.update();\n}\n\nself.onLatestDataUpdated = function() {\n self.ctx.flot.latestDataUpdate();\n}\n\nself.onResize = function() {\n self.ctx.flot.resize();\n}\n\nself.onEditModeChanged = function() {\n self.ctx.flot.checkMouseEvents();\n}\n\nself.onDestroy = function() {\n self.ctx.flot.destroy();\n}\n\nself.typeParameters = function() {\n return {\n hasAdditionalLatestDataKeys: true\n };\n}\n", "settingsSchema": "{}", "dataKeySettingsSchema": "{}", "latestDataKeySettingsSchema": "{}", "settingsDirective": "tb-flot-line-widget-settings", + "dataKeySettingsDirective": "tb-flot-line-key-settings", + "latestDataKeySettingsDirective": "tb-flot-latest-key-settings", "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"First\",\"color\":\"#2196f3\",\"settings\":{\"showLines\":true,\"fillLines\":true,\"showPoints\":false},\"_hash\":0.8587686344902596,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Second\",\"color\":\"#ffc107\",\"settings\":{\"showLines\":true,\"fillLines\":false,\"showPoints\":false},\"_hash\":0.12775350966079668,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"shadowSize\":4,\"fontColor\":\"#545454\",\"fontSize\":10,\"xaxis\":{\"showLabels\":true,\"color\":\"#545454\"},\"yaxis\":{\"showLabels\":true,\"color\":\"#545454\"},\"grid\":{\"color\":\"#545454\",\"tickColor\":\"#DDDDDD\",\"verticalLines\":true,\"horizontalLines\":true,\"outlineWidth\":1},\"legend\":{\"show\":true,\"position\":\"nw\",\"backgroundColor\":\"#f0f0f0\",\"backgroundOpacity\":0.85,\"labelBoxBorderColor\":\"rgba(1, 1, 1, 0.45)\"},\"decimals\":1,\"stack\":false,\"tooltipIndividual\":false},\"title\":\"Timeseries Line Chart\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"mobileHeight\":null}" } }, @@ -185,10 +189,12 @@ "resources": [], "templateHtml": "", "templateCss": ".legend {\n font-size: 13px;\n line-height: 10px;\n}\n\n.legend table { \n border-spacing: 0px;\n border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n cursor: crosshair; \n}\n\n", - "controllerScript": "self.onInit = function() {\n self.ctx.flot = new TbFlot(self.ctx, 'bar'); \n}\n\nself.onDataUpdated = function() {\n self.ctx.flot.update();\n}\n\nself.onLatestDataUpdated = function() {\n self.ctx.flot.latestDataUpdate();\n}\n\nself.onResize = function() {\n self.ctx.flot.resize();\n}\n\nself.onEditModeChanged = function() {\n self.ctx.flot.checkMouseEvents();\n}\n\nself.getDataKeySettingsSchema = function() {\n return TbFlot.datakeySettingsSchema(false, 'bar');\n}\n\nself.getLatestDataKeySettingsSchema = function() {\n return TbFlot.latestDatakeySettingsSchema();\n}\n\nself.onDestroy = function() {\n self.ctx.flot.destroy();\n}\n\nself.typeParameters = function() {\n return {\n hasAdditionalLatestDataKeys: true\n };\n}\n", + "controllerScript": "self.onInit = function() {\n self.ctx.flot = new TbFlot(self.ctx, 'bar'); \n}\n\nself.onDataUpdated = function() {\n self.ctx.flot.update();\n}\n\nself.onLatestDataUpdated = function() {\n self.ctx.flot.latestDataUpdate();\n}\n\nself.onResize = function() {\n self.ctx.flot.resize();\n}\n\nself.onEditModeChanged = function() {\n self.ctx.flot.checkMouseEvents();\n}\n\nself.onDestroy = function() {\n self.ctx.flot.destroy();\n}\n\nself.typeParameters = function() {\n return {\n hasAdditionalLatestDataKeys: true\n };\n}\n", "settingsSchema": "{}", "dataKeySettingsSchema": "{}", "settingsDirective": "tb-flot-bar-widget-settings", + "dataKeySettingsDirective": "tb-flot-bar-key-settings", + "latestDataKeySettingsDirective": "tb-flot-latest-key-settings", "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"First\",\"color\":\"#2196f3\",\"settings\":{\"showLines\":false,\"fillLines\":false,\"showPoints\":false},\"_hash\":0.8587686344902596,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Second\",\"color\":\"#ffc107\",\"settings\":{\"showLines\":false,\"fillLines\":false,\"showPoints\":false},\"_hash\":0.12775350966079668,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000},\"aggregation\":{\"limit\":200,\"type\":\"AVG\"}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"shadowSize\":4,\"fontColor\":\"#545454\",\"fontSize\":10,\"xaxis\":{\"showLabels\":true,\"color\":\"#545454\"},\"yaxis\":{\"showLabels\":true,\"color\":\"#545454\"},\"grid\":{\"color\":\"#545454\",\"tickColor\":\"#DDDDDD\",\"verticalLines\":true,\"horizontalLines\":true,\"outlineWidth\":1},\"stack\":true,\"tooltipIndividual\":false,\"defaultBarWidth\":600},\"title\":\"Timeseries Bar Chart\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"mobileHeight\":null,\"widgetStyle\":{},\"useDashboardTimewindow\":true,\"showLegend\":true,\"actions\":{}}" } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.models.ts index 66317bf596..fcc524ad1e 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.models.ts @@ -18,7 +18,6 @@ /// import { DataKey, Datasource, DatasourceData, JsonSettingsSchema } from '@shared/models/widget.models'; -import * as moment_ from 'moment'; import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; import { ComparisonDuration } from '@shared/models/time/time.models'; @@ -163,13 +162,15 @@ export interface TbFlotLabelPatternSettings { settings?: any; } -export interface TbFlotGraphSettings extends TbFlotBaseSettings, TbFlotThresholdsSettings, TbFlotComparisonSettings, TbFlotCustomLegendSettings { +export interface TbFlotGraphSettings extends TbFlotBaseSettings, + TbFlotThresholdsSettings, TbFlotComparisonSettings, TbFlotCustomLegendSettings { smoothLines: boolean; } export declare type BarAlignment = 'left' | 'right' | 'center'; -export interface TbFlotBarSettings extends TbFlotBaseSettings, TbFlotThresholdsSettings, TbFlotComparisonSettings, TbFlotCustomLegendSettings { +export interface TbFlotBarSettings extends TbFlotBaseSettings, + TbFlotThresholdsSettings, TbFlotComparisonSettings, TbFlotCustomLegendSettings { defaultBarWidth: number; barAlignment: BarAlignment; } @@ -183,7 +184,7 @@ export interface TbFlotPieSettings { color: string; width: number; }; - showTooltip: boolean, + showTooltip: boolean; showLabels: boolean; fontColor: string; fontSize: number; @@ -241,480 +242,6 @@ export interface TbFlotLatestKeySettings { thresholdColor: string; } -export function flotSettingsSchema(chartType: ChartType): JsonSettingsSchema { - - const schema: JsonSettingsSchema = { - schema: { - type: 'object', - title: 'Settings', - properties: { - } - } - }; - - const properties: any = schema.schema.properties; - properties.stack = { - title: 'Stacking', - type: 'boolean', - default: false - }; - if (chartType === 'graph') { - properties.smoothLines = { - title: 'Display smooth (curved) lines', - type: 'boolean', - default: false - }; - } - if (chartType === 'bar') { - properties.defaultBarWidth = { - title: 'Default bar width for non-aggregated data (milliseconds)', - type: 'number', - default: 600 - }; - properties.barAlignment = { - title: 'Bar alignment', - type: 'string', - default: 'left' - }; - } - if (chartType === 'graph' || chartType === 'bar') { - properties.thresholdsLineWidth = { - title: 'Default line width for all thresholds', - type: 'number' - }; - } - properties.shadowSize = { - title: 'Shadow size', - type: 'number', - default: 4 - }; - properties.fontColor = { - title: 'Font color', - type: 'string', - default: '#545454' - }; - properties.fontSize = { - title: 'Font size', - type: 'number', - default: 10 - }; - properties.tooltipIndividual = { - title: 'Hover individual points', - type: 'boolean', - default: false - }; - properties.tooltipCumulative = { - title: 'Show cumulative values in stacking mode', - type: 'boolean', - default: false - }; - properties.tooltipValueFormatter = { - title: 'Tooltip value format function, f(value)', - type: 'string', - default: '' - }; - properties.hideZeros = { - title: 'Hide zero/false values from tooltip', - type: 'boolean', - default: false - }; - - properties.showTooltip = { - title: 'Show tooltip', - type: 'boolean', - default: true - }; - - properties.grid = { - title: 'Grid settings', - type: 'object', - properties: { - color: { - title: 'Primary color', - type: 'string', - default: '#545454' - }, - backgroundColor: { - title: 'Background color', - type: 'string', - default: null - }, - tickColor: { - title: 'Ticks color', - type: 'string', - default: '#DDDDDD' - }, - outlineWidth: { - title: 'Grid outline/border width (px)', - type: 'number', - default: 1 - }, - verticalLines: { - title: 'Show vertical lines', - type: 'boolean', - default: true - }, - horizontalLines: { - title: 'Show horizontal lines', - type: 'boolean', - default: true - } - } - }; - - properties.xaxis = { - title: 'X axis settings', - type: 'object', - properties: { - showLabels: { - title: 'Show labels', - type: 'boolean', - default: true - }, - title: { - title: 'Axis title', - type: 'string', - default: null - }, - color: { - title: 'Ticks color', - type: 'string', - default: null - } - } - }; - - properties.yaxis = { - title: 'Y axis settings', - type: 'object', - properties: { - min: { - title: 'Minimum value on the scale', - type: 'number', - default: null - }, - max: { - title: 'Maximum value on the scale', - type: 'number', - default: null - }, - showLabels: { - title: 'Show labels', - type: 'boolean', - default: true - }, - title: { - title: 'Axis title', - type: 'string', - default: null - }, - color: { - title: 'Ticks color', - type: 'string', - default: null - }, - ticksFormatter: { - title: 'Ticks formatter function, f(value)', - type: 'string', - default: '' - }, - tickDecimals: { - title: 'The number of decimals to display', - type: 'number', - default: 0 - }, - tickSize: { - title: 'Step size between ticks', - type: 'number', - default: null - } - } - }; - - schema.schema.required = []; - schema.form = ['stack']; - if (chartType === 'graph') { - schema.form.push('smoothLines'); - } - if (chartType === 'bar') { - schema.form.push('defaultBarWidth'); - schema.form.push({ - key: 'barAlignment', - type: 'rc-select', - multiple: false, - items: [ - { - value: 'left', - label: 'Left' - }, - { - value: 'right', - label: 'Right' - }, - { - value: 'center', - label: 'Center' - } - ] - }); - } - if (chartType === 'graph' || chartType === 'bar') { - schema.form.push('thresholdsLineWidth'); - } - schema.form.push('shadowSize'); - schema.form.push({ - key: 'fontColor', - type: 'color' - }); - schema.form.push('fontSize'); - schema.form.push('tooltipIndividual'); - schema.form.push('tooltipCumulative'); - schema.form.push({ - key: 'tooltipValueFormatter', - type: 'javascript', - helpId: 'widget/lib/flot/tooltip_value_format_fn' - }); - schema.form.push('hideZeros'); - schema.form.push('showTooltip'); - schema.form.push({ - key: 'grid', - items: [ - { - key: 'grid.color', - type: 'color' - }, - { - key: 'grid.backgroundColor', - type: 'color' - }, - { - key: 'grid.tickColor', - type: 'color' - }, - 'grid.outlineWidth', - 'grid.verticalLines', - 'grid.horizontalLines' - ] - }); - schema.form.push({ - key: 'xaxis', - items: [ - 'xaxis.showLabels', - 'xaxis.title', - { - key: 'xaxis.color', - type: 'color' - } - ] - }); - schema.form.push({ - key: 'yaxis', - items: [ - 'yaxis.min', - 'yaxis.max', - 'yaxis.tickDecimals', - 'yaxis.tickSize', - 'yaxis.showLabels', - 'yaxis.title', - { - key: 'yaxis.color', - type: 'color' - }, - { - key: 'yaxis.ticksFormatter', - type: 'javascript', - helpId: 'widget/lib/flot/ticks_formatter_fn' - } - ] - }); - if (chartType === 'graph' || chartType === 'bar') { - schema.groupInfoes = [{ - formIndex: 0, - GroupTitle: 'Common Settings' - }]; - schema.form = [schema.form]; - schema.schema.properties = {...schema.schema.properties, ...chartSettingsSchemaForComparison.schema.properties, ...chartSettingsSchemaForCustomLegend.schema.properties}; - schema.schema.required = schema.schema.required.concat(chartSettingsSchemaForComparison.schema.required, chartSettingsSchemaForCustomLegend.schema.required); - schema.form.push(chartSettingsSchemaForComparison.form, chartSettingsSchemaForCustomLegend.form); - schema.groupInfoes.push({ - formIndex: schema.groupInfoes.length, - GroupTitle: 'Comparison Settings' - }); - schema.groupInfoes.push({ - formIndex: schema.groupInfoes.length, - GroupTitle: 'Custom Legend Settings' - }); - } - return schema; -} - -const chartSettingsSchemaForComparison: JsonSettingsSchema = { - schema: { - title: 'Comparison Settings', - type: 'object', - properties: { - comparisonEnabled: { - title: 'Enable comparison', - type: 'boolean', - default: false - }, - timeForComparison: { - title: 'Time to show historical data', - type: 'string', - default: 'previousInterval' - }, - comparisonCustomIntervalValue: { - title: 'Custom interval value (ms)', - type: 'number', - default: 7200000 - }, - xaxisSecond: { - title: 'Second X axis', - type: 'object', - properties: { - axisPosition: { - title: 'Axis position', - type: 'string', - default: 'top' - }, - showLabels: { - title: 'Show labels', - type: 'boolean', - default: true - }, - title: { - title: 'Axis title', - type: 'string', - default: null - } - } - } - }, - required: [] - }, - form: [ - 'comparisonEnabled', - { - key: 'timeForComparison', - type: 'rc-select', - multiple: false, - items: [ - { - value: 'previousInterval', - label: 'Previous interval (default)' - }, - { - value: 'days', - label: 'Day ago' - }, - { - value: 'weeks', - label: 'Week ago' - }, - { - value: 'months', - label: 'Month ago' - }, - { - value: 'years', - label: 'Year ago' - }, - { - value: 'customInterval', - label: 'Custom interval' - } - ] - }, - { - key: 'comparisonCustomIntervalValue', - condition: 'model.timeForComparison === "customInterval"' - }, - { - key: 'xaxisSecond', - items: [ - { - key: 'xaxisSecond.axisPosition', - type: 'rc-select', - multiple: false, - items: [ - { - value: 'top', - label: 'Top (default)' - }, - { - value: 'bottom', - label: 'Bottom' - } - ] - }, - 'xaxisSecond.showLabels', - 'xaxisSecond.title', - ] - } - ] -}; - -const chartSettingsSchemaForCustomLegend: JsonSettingsSchema = { - schema: { - title: 'Custom Legend Settings', - type: 'object', - properties: { - customLegendEnabled: { - title: 'Enable custom legend (this will allow you to use attribute/timeseries values in key labels)', - type: 'boolean', - default: false - }, - dataKeysListForLabels: { - title: 'Datakeys list to use in labels', - type: 'array', - items: { - type: 'object', - properties: { - name: { - title: 'Key name', - type: 'string' - }, - type: { - title: 'Key type', - type: 'string', - default: 'attribute' - } - }, - required: [ - 'name' - ] - } - } - }, - required: [] - }, - form: [ - 'customLegendEnabled', - { - key: 'dataKeysListForLabels', - condition: 'model.customLegendEnabled === true', - items: [ - { - key: 'dataKeysListForLabels[].type', - type: 'rc-select', - multiple: false, - items: [ - { - value: 'attribute', - label: 'Attribute' - }, - { - value: 'timeseries', - label: 'Timeseries' - } - ] - }, - 'dataKeysListForLabels[].name' - ] - } - ] -}; - export const flotPieSettingsSchema: JsonSettingsSchema = { schema: { type: 'object', @@ -833,334 +360,3 @@ export const flotPieDatakeySettingsSchema: JsonSettingsSchema = { 'removeFromLegend' ] }; - -export function flotDatakeySettingsSchema(defaultShowLines: boolean, chartType: ChartType): JsonSettingsSchema { - const schema: JsonSettingsSchema = { - schema: { - type: 'object', - title: 'DataKeySettings', - properties: { - excludeFromStacking: { - title: 'Exclude from stacking(available in "Stacking" mode)', - type: 'boolean', - default: false - }, - hideDataByDefault: { - title: 'Data is hidden by default', - type: 'boolean', - default: false - }, - disableDataHiding: { - title: 'Disable data hiding', - type: 'boolean', - default: false - }, - removeFromLegend: { - title: 'Remove datakey from legend', - type: 'boolean', - default: false - }, - showLines: { - title: 'Show lines', - type: 'boolean', - default: defaultShowLines - }, - fillLines: { - title: 'Fill lines', - type: 'boolean', - default: false - }, - showPoints: { - title: 'Show points', - type: 'boolean', - default: false - }, - showPointShape: { - title: 'Select point shape:', - type: 'string', - default: 'circle' - }, - pointShapeFormatter: { - title: 'Point shape format function, f(ctx, x, y, radius, shadow)', - type: 'string', - default: 'var size = radius * Math.sqrt(Math.PI) / 2;\n' + - 'ctx.moveTo(x - size, y - size);\n' + - 'ctx.lineTo(x + size, y + size);\n' + - 'ctx.moveTo(x - size, y + size);\n' + - 'ctx.lineTo(x + size, y - size);' - }, - showPointsLineWidth: { - title: 'Line width of points', - type: 'number', - default: 5 - }, - showPointsRadius: { - title: 'Radius of points', - type: 'number', - default: 3 - }, - tooltipValueFormatter: { - title: 'Tooltip value format function, f(value)', - type: 'string', - default: '' - }, - showSeparateAxis: { - title: 'Show separate axis', - type: 'boolean', - default: false - }, - axisMin: { - title: 'Minimum value on the axis scale', - type: 'number', - default: null - }, - axisMax: { - title: 'Maximum value on the axis scale', - type: 'number', - default: null - }, - axisTitle: { - title: 'Axis title', - type: 'string', - default: '' - }, - axisTickDecimals: { - title: 'Axis tick number of digits after floating point', - type: 'number', - default: null - }, - axisTickSize: { - title: 'Axis step size between ticks', - type: 'number', - default: null - }, - axisPosition: { - title: 'Axis position', - type: 'string', - default: 'left' - }, - axisTicksFormatter: { - title: 'Ticks formatter function, f(value)', - type: 'string', - default: '' - } - }, - required: ['showLines', 'fillLines', 'showPoints'] - }, - form: [ - 'hideDataByDefault', - 'disableDataHiding', - 'removeFromLegend', - 'excludeFromStacking', - 'showLines', - 'fillLines', - 'showPoints', - { - key: 'showPointShape', - type: 'rc-select', - multiple: false, - items: [ - { - value: 'circle', - label: 'Circle' - }, - { - value: 'cross', - label: 'Cross' - }, - { - value: 'diamond', - label: 'Diamond' - }, - { - value: 'square', - label: 'Square' - }, - { - value: 'triangle', - label: 'Triangle' - }, - { - value: 'custom', - label: 'Custom function' - } - ] - }, - { - key: 'pointShapeFormatter', - type: 'javascript', - helpId: 'widget/lib/flot/point_shape_format_fn' - }, - 'showPointsLineWidth', - 'showPointsRadius', - { - key: 'tooltipValueFormatter', - type: 'javascript', - helpId: 'widget/lib/flot/tooltip_value_format_fn' - }, - 'showSeparateAxis', - 'axisMin', - 'axisMax', - 'axisTitle', - 'axisTickDecimals', - 'axisTickSize', - { - key: 'axisPosition', - type: 'rc-select', - multiple: false, - items: [ - { - value: 'left', - label: 'Left' - }, - { - value: 'right', - label: 'Right' - } - ] - }, - { - key: 'axisTicksFormatter', - type: 'javascript', - helpId: 'widget/lib/flot/ticks_formatter_fn' - } - ] - }; - - const properties = schema.schema.properties; - if (chartType === 'graph' || chartType === 'bar') { - properties.thresholds = { - title: 'Thresholds', - type: 'array', - items: { - title: 'Threshold', - type: 'object', - properties: { - thresholdValueSource: { - title: 'Threshold value source', - type: 'string', - default: 'predefinedValue' - }, - thresholdEntityAlias: { - title: 'Thresholds source entity alias', - type: 'string' - }, - thresholdAttribute: { - title: 'Threshold source entity attribute', - type: 'string' - }, - thresholdValue: { - title: 'Threshold value (if predefined value is selected)', - type: 'number' - }, - lineWidth: { - title: 'Line width', - type: 'number' - }, - color: { - title: 'Color', - type: 'string' - } - } - }, - required: [] - }; - schema.form.push({ - key: 'thresholds', - items: [ - { - key: 'thresholds[].thresholdValueSource', - type: 'rc-select', - multiple: false, - items: [ - { - value: 'predefinedValue', - label: 'Predefined value (Default)' - }, - { - value: 'entityAttribute', - label: 'Value taken from entity attribute' - } - ] - }, - 'thresholds[].thresholdValue', - 'thresholds[].thresholdEntityAlias', - 'thresholds[].thresholdAttribute', - { - key: 'thresholds[].color', - type: 'color' - }, - 'thresholds[].lineWidth' - ] - }); - properties.comparisonSettings = { - title: 'Comparison Settings', - type: 'object', - properties: { - showValuesForComparison: { - title: 'Show historical values for comparison', - type: 'boolean', - default: true - }, - comparisonValuesLabel: { - title: 'Historical values label', - type: 'string', - default: '' - }, - color: { - title: 'Color', - type: 'string', - default: '' - } - }, - required: ['showValuesForComparison'] - }; - schema.form.push({ - key: 'comparisonSettings', - items: [ - 'comparisonSettings.showValuesForComparison', - 'comparisonSettings.comparisonValuesLabel', - { - key: 'comparisonSettings.color', - type: 'color' - } - ] - }); - } - - return schema; -} - -export const flotLatestDatakeySettingsSchema: JsonSettingsSchema = { - schema: { - type: 'object', - title: 'LatestDataKeySettings', - properties: { - useAsThreshold: { - title: 'Use key value as threshold', - type: 'boolean', - default: false - }, - thresholdLineWidth: { - title: 'Threshold line width', - type: 'number' - }, - thresholdColor: { - title: 'Threshold color', - type: 'string' - } - } - }, - form: [ - 'useAsThreshold', - { - key: 'thresholdLineWidth', - condition: 'model.useAsThreshold === true' - }, - { - key: 'thresholdColor', - type: 'color', - condition: 'model.useAsThreshold === true' - }, - ] -}; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.ts b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.ts index 736cc30450..2ed20870dc 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.ts @@ -38,10 +38,8 @@ import { } from '@app/shared/models/widget.models'; import { ChartType, - flotDatakeySettingsSchema, flotLatestDatakeySettingsSchema, flotPieDatakeySettingsSchema, flotPieSettingsSchema, - flotSettingsSchema, TbFlotAxisOptions, TbFlotHoverInfo, TbFlotKeySettings, TbFlotLatestKeySettings, @@ -69,7 +67,6 @@ const moment = moment_; const flotPieSettingsSchemaValue = flotPieSettingsSchema; const flotPieDatakeySettingsSchemaValue = flotPieDatakeySettingsSchema; -const latestDatakeySettingsSchemaValue = flotLatestDatakeySettingsSchema; export class TbFlot { @@ -141,18 +138,6 @@ export class TbFlot { return flotPieDatakeySettingsSchemaValue; } - static settingsSchema(chartType: ChartType): JsonSettingsSchema { - return flotSettingsSchema(chartType); - } - - static datakeySettingsSchema(defaultShowLines: boolean, chartType: ChartType): JsonSettingsSchema { - return flotDatakeySettingsSchema(defaultShowLines, chartType); - } - - static latestDatakeySettingsSchema(): JsonSettingsSchema { - return latestDatakeySettingsSchemaValue; - } - constructor(private ctx: WidgetContext, private readonly chartType: ChartType) { this.chartType = this.chartType || 'line'; this.settings = ctx.settings as TbFlotSettings; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-bar-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-bar-key-settings.component.html new file mode 100644 index 0000000000..f96f2ddbff --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-bar-key-settings.component.html @@ -0,0 +1,24 @@ + + +
+ + +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-bar-key-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-bar-key-settings.component.ts new file mode 100644 index 0000000000..1dd9c73dd0 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-bar-key-settings.component.ts @@ -0,0 +1,55 @@ +/// +/// 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 { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { flotDataKeyDefaultSettings } from '@home/components/widget/lib/settings/chart/flot-key-settings.component'; + +@Component({ + selector: 'tb-flot-bar-key-settings', + templateUrl: './flot-bar-key-settings.component.html', + styleUrls: [] +}) +export class FlotBarKeySettingsComponent extends WidgetSettingsComponent { + + flotBarKeySettingsForm: FormGroup; + + constructor(protected store: Store, + private fb: FormBuilder) { + super(store); + } + + protected settingsForm(): FormGroup { + return this.flotBarKeySettingsForm; + } + + protected defaultSettings(): WidgetSettings { + return flotDataKeyDefaultSettings('bar'); + } + + protected onSettingsSet(settings: WidgetSettings) { + this.flotBarKeySettingsForm = this.fb.group({ + flotKeySettings: [settings, []] + }); + } + + protected prepareOutputSettings(settings: any): WidgetSettings { + return settings.flotKeySettings; + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html new file mode 100644 index 0000000000..81ebfc7c6f --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html @@ -0,0 +1,238 @@ + +
+
+ widgets.chart.common-settings + + {{ 'widgets.chart.data-is-hidden-by-default' | translate }} + + + {{ 'widgets.chart.disable-data-hiding' | translate }} + + + {{ 'widgets.chart.remove-from-legend' | translate }} + + + {{ 'widgets.chart.exclude-from-stacking' | translate }} + +
+
+ widgets.chart.line-settings + + + + + {{ 'widgets.chart.show-line' | translate }} + + + + widget-config.advanced-settings + + + +
+ + widgets.chart.line-width + + + + {{ 'widgets.chart.fill-line' | translate }} + +
+ + +
+
+ widgets.chart.points-settings + + + + + {{ 'widgets.chart.show-points' | translate }} + + + + widget-config.advanced-settings + + + +
+
+ + widgets.chart.points-line-width + + + + widgets.chart.points-radius + + +
+ + widgets.chart.point-shape + + + {{ 'widgets.chart.point-shape-circle' | translate }} + + + {{ 'widgets.chart.point-shape-cross' | translate }} + + + {{ 'widgets.chart.point-shape-diamond' | translate }} + + + {{ 'widgets.chart.point-shape-square' | translate }} + + + {{ 'widgets.chart.point-shape-triangle' | translate }} + + + {{ 'widgets.chart.point-shape-custom' | translate }} + + + + + +
+ + +
+
+ widgets.chart.tooltip-settings + + +
+
+ widgets.chart.yaxis-settings + + {{ 'widgets.chart.show-separate-axis' | translate }} + + + widgets.chart.axis-title + + +
+ + widgets.chart.min-scale-value + + + + widgets.chart.max-scale-value + + +
+ + widgets.chart.axis-position + + + {{ 'widgets.chart.axis-position-left' | translate }} + + + {{ 'widgets.chart.axis-position-right' | translate }} + + + +
+ widgets.chart.yaxis-tick-labels-settings +
+ + widgets.chart.tick-step-size + + + + widgets.chart.number-of-decimals + + +
+ + +
+
+
+ widgets.chart.thresholds +
+
+
+ + +
+
+
+ widgets.chart.no-thresholds +
+
+ +
+
+
+
+ widgets.chart.comparison-settings + + + + + {{ 'widgets.chart.show-values-for-comparison' | translate }} + + + + widget-config.advanced-settings + + + +
+ + widgets.chart.comparison-values-label + + + + +
+ + +
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.ts new file mode 100644 index 0000000000..a97ccc84a0 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.ts @@ -0,0 +1,333 @@ +/// +/// 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, Input, OnInit } from '@angular/core'; +import { + AbstractControl, + ControlValueAccessor, + FormArray, + FormBuilder, + FormControl, + FormGroup, + NG_VALIDATORS, + NG_VALUE_ACCESSOR, + Validator, + Validators +} from '@angular/forms'; +import { PageComponent } from '@shared/components/page.component'; +import { ChartType, TbFlotKeySettings, TbFlotKeyThreshold } from '@home/components/widget/lib/flot-widget.models'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { TranslateService } from '@ngx-translate/core'; +import { WidgetService } from '@core/http/widget.service'; +import { CdkDragDrop } from '@angular/cdk/drag-drop'; +import { IAliasController } from 'src/app/core/api/widget-api.models'; + +export function flotDataKeyDefaultSettings(chartType: ChartType): TbFlotKeySettings { + const settings: TbFlotKeySettings = { + // Common settings + hideDataByDefault: false, + disableDataHiding: false, + removeFromLegend: false, + excludeFromStacking: false, + + // Line settings + showLines: chartType === 'graph', + lineWidth: 1, + fillLines: false, + + // Points settings + showPoints: false, + showPointsLineWidth: 5, + showPointsRadius: 3, + showPointShape: 'circle', + pointShapeFormatter: 'var size = radius * Math.sqrt(Math.PI) / 2;\n' + + 'ctx.moveTo(x - size, y - size);\n' + + 'ctx.lineTo(x + size, y + size);\n' + + 'ctx.moveTo(x - size, y + size);\n' + + 'ctx.lineTo(x + size, y - size);', + + // Tooltip settings + tooltipValueFormatter: '', + + // Y axis settings + showSeparateAxis: false, + axisTitle: '', + axisMin: null, + axisMax: null, + axisPosition: 'left', + + // --> Y axis tick labels settings + axisTickSize: null, + axisTickDecimals: null, + axisTicksFormatter: '', + + // Thresholds + thresholds: [], + + // Comparison settings + comparisonSettings: { + showValuesForComparison: true, + comparisonValuesLabel: '', + color: '' + } + }; + return settings; +} + +@Component({ + selector: 'tb-flot-key-settings', + templateUrl: './flot-key-settings.component.html', + styleUrls: ['./../widget-settings.scss'], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => FlotKeySettingsComponent), + multi: true + }, + { + provide: NG_VALIDATORS, + useExisting: forwardRef(() => FlotKeySettingsComponent), + multi: true, + } + ] +}) +export class FlotKeySettingsComponent extends PageComponent implements OnInit, ControlValueAccessor, Validator { + + @Input() + disabled: boolean; + + @Input() + chartType: ChartType; + + @Input() + aliasController: IAliasController; + + functionScopeVariables = this.widgetService.getWidgetScopeVariables(); + + private modelValue: TbFlotKeySettings; + + private propagateChange = null; + + public flotKeySettingsFormGroup: FormGroup; + + constructor(protected store: Store, + private translate: TranslateService, + private widgetService: WidgetService, + private fb: FormBuilder) { + super(store); + } + + ngOnInit(): void { + this.flotKeySettingsFormGroup = this.fb.group({ + + // Common settings + + hideDataByDefault: [false, []], + disableDataHiding: [false, []], + removeFromLegend: [false, []], + excludeFromStacking: [false, []], + + // Line settings + + showLines: [this.chartType === 'graph', []], + lineWidth: [1, [Validators.min(0)]], + fillLines: [false, []], + + // Points settings + + showPoints: [false, []], + showPointsLineWidth: [5, [Validators.min(0)]], + showPointsRadius: [3, [Validators.min(0)]], + showPointShape: ['circle', []], + pointShapeFormatter: ['', []], + + // Tooltip settings + + tooltipValueFormatter: ['', []], + + // Y axis settings + + showSeparateAxis: [false, []], + axisTitle: [null, []], + axisMin: [null, []], + axisMax: [null, []], + axisPosition: ['left', []], + + // --> Y axis tick labels settings + + axisTickSize: [null, [Validators.min(0)]], + axisTickDecimals: [null, [Validators.min(0)]], + axisTicksFormatter: ['', []], + + // Thresholds + + thresholds: this.fb.array([]), + + // Comparison settings + + comparisonSettings: this.fb.group({ + showValuesForComparison: [true, []], + comparisonValuesLabel: ['', []], + color: ['', []] + }) + + }); + + this.flotKeySettingsFormGroup.get('showLines').valueChanges.subscribe(() => { + this.updateValidators(true); + }); + + this.flotKeySettingsFormGroup.get('showPoints').valueChanges.subscribe(() => { + this.updateValidators(true); + }); + + this.flotKeySettingsFormGroup.get('comparisonSettings.showValuesForComparison').valueChanges.subscribe(() => { + this.updateValidators(true); + }); + + this.flotKeySettingsFormGroup.valueChanges.subscribe(() => { + this.updateModel(); + }); + + this.updateValidators(false); + } + + registerOnChange(fn: any): void { + this.propagateChange = fn; + } + + registerOnTouched(fn: any): void { + } + + setDisabledState(isDisabled: boolean): void { + this.disabled = isDisabled; + if (isDisabled) { + this.flotKeySettingsFormGroup.disable({emitEvent: false}); + } else { + this.flotKeySettingsFormGroup.enable({emitEvent: false}); + } + } + + writeValue(value: TbFlotKeySettings): void { + const thresholds = value?.thresholds; + this.modelValue = value; + this.flotKeySettingsFormGroup.patchValue( + value, {emitEvent: false} + ); + const thresholdsControls: Array = []; + if (thresholds && thresholds.length) { + thresholds.forEach((threshold) => { + thresholdsControls.push(this.fb.control(threshold, [])); + }); + } + this.flotKeySettingsFormGroup.setControl('thresholds', this.fb.array(thresholdsControls), {emitEvent: false}); + this.updateValidators(false); + } + + validate(c: FormControl) { + return (this.flotKeySettingsFormGroup.valid) ? null : { + flotKeySettings: { + valid: false, + }, + }; + } + + private updateModel() { + const value: TbFlotKeySettings = this.flotKeySettingsFormGroup.value; + this.modelValue = value; + this.propagateChange(this.modelValue); + } + + private updateValidators(emitEvent?: boolean): void { + const showLines: boolean = this.flotKeySettingsFormGroup.get('showLines').value; + const showPoints: boolean = this.flotKeySettingsFormGroup.get('showPoints').value; + const showValuesForComparison: boolean = this.flotKeySettingsFormGroup.get('comparisonSettings.showValuesForComparison').value; + + if (showLines) { + this.flotKeySettingsFormGroup.get('lineWidth').enable({emitEvent}); + this.flotKeySettingsFormGroup.get('fillLines').enable({emitEvent}); + } else { + this.flotKeySettingsFormGroup.get('lineWidth').disable({emitEvent}); + this.flotKeySettingsFormGroup.get('fillLines').disable({emitEvent}); + } + + if (showPoints) { + this.flotKeySettingsFormGroup.get('showPointsLineWidth').enable({emitEvent}); + this.flotKeySettingsFormGroup.get('showPointsRadius').enable({emitEvent}); + this.flotKeySettingsFormGroup.get('showPointShape').enable({emitEvent}); + this.flotKeySettingsFormGroup.get('pointShapeFormatter').enable({emitEvent}); + } else { + this.flotKeySettingsFormGroup.get('showPointsLineWidth').disable({emitEvent}); + this.flotKeySettingsFormGroup.get('showPointsRadius').disable({emitEvent}); + this.flotKeySettingsFormGroup.get('showPointShape').disable({emitEvent}); + this.flotKeySettingsFormGroup.get('pointShapeFormatter').disable({emitEvent}); + } + + if (showValuesForComparison) { + this.flotKeySettingsFormGroup.get('comparisonSettings.comparisonValuesLabel').enable({emitEvent}); + this.flotKeySettingsFormGroup.get('comparisonSettings.color').enable({emitEvent}); + } else { + this.flotKeySettingsFormGroup.get('comparisonSettings.comparisonValuesLabel').disable({emitEvent}); + this.flotKeySettingsFormGroup.get('comparisonSettings.color').disable({emitEvent}); + } + + this.flotKeySettingsFormGroup.get('lineWidth').updateValueAndValidity({emitEvent: false}); + this.flotKeySettingsFormGroup.get('fillLines').updateValueAndValidity({emitEvent: false}); + this.flotKeySettingsFormGroup.get('showPointsLineWidth').updateValueAndValidity({emitEvent: false}); + this.flotKeySettingsFormGroup.get('showPointsRadius').updateValueAndValidity({emitEvent: false}); + this.flotKeySettingsFormGroup.get('showPointShape').updateValueAndValidity({emitEvent: false}); + this.flotKeySettingsFormGroup.get('pointShapeFormatter').updateValueAndValidity({emitEvent: false}); + this.flotKeySettingsFormGroup.get('comparisonSettings.comparisonValuesLabel').updateValueAndValidity({emitEvent: false}); + this.flotKeySettingsFormGroup.get('comparisonSettings.color').updateValueAndValidity({emitEvent: false}); + } + + thresholdsFormArray(): FormArray { + return this.flotKeySettingsFormGroup.get('thresholds') as FormArray; + } + + public trackByThreshold(index: number, thresholdControl: AbstractControl): any { + return thresholdControl; + } + + public removeThreshold(index: number) { + (this.flotKeySettingsFormGroup.get('thresholds') as FormArray).removeAt(index); + } + + public addThreshold() { + const threshold: TbFlotKeyThreshold = { + thresholdValueSource: 'predefinedValue', + thresholdEntityAlias: null, + thresholdAttribute: null, + thresholdValue: null, + lineWidth: null, + color: null + }; + const thresholdsArray = this.flotKeySettingsFormGroup.get('thresholds') as FormArray; + const thresholdControl = this.fb.control(threshold, []); + (thresholdControl as any).new = true; + thresholdsArray.push(thresholdControl); + this.flotKeySettingsFormGroup.updateValueAndValidity(); + } + + thresholdDrop(event: CdkDragDrop) { + const thresholdsArray = this.flotKeySettingsFormGroup.get('thresholds') as FormArray; + const threshold = thresholdsArray.at(event.previousIndex); + thresholdsArray.removeAt(event.previousIndex); + thresholdsArray.insert(event.currentIndex, threshold); + } + +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.html new file mode 100644 index 0000000000..0e210366d5 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.html @@ -0,0 +1,47 @@ + +
+
+ widgets.chart.threshold-settings + + + + + {{ 'widgets.chart.use-as-threshold' | translate }} + + + + widget-config.advanced-settings + + + +
+ + widgets.chart.threshold-line-width + + + + +
+ + +
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.ts new file mode 100644 index 0000000000..e3b4b5acf1 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.ts @@ -0,0 +1,74 @@ +/// +/// 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 { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; + +@Component({ + selector: 'tb-flot-latest-key-settings', + templateUrl: './flot-latest-key-settings.component.html', + styleUrls: ['./../widget-settings.scss'] +}) +export class FlotLatestKeySettingsComponent extends WidgetSettingsComponent { + + flotLatestKeySettingsForm: FormGroup; + + constructor(protected store: Store, + private fb: FormBuilder) { + super(store); + } + + protected settingsForm(): FormGroup { + return this.flotLatestKeySettingsForm; + } + + protected defaultSettings(): WidgetSettings { + return { + useAsThreshold: false, + thresholdLineWidth: null, + thresholdColor: null + }; + } + + protected onSettingsSet(settings: WidgetSettings) { + this.flotLatestKeySettingsForm = this.fb.group({ + useAsThreshold: [settings.useAsThreshold, []], + thresholdLineWidth: [settings.thresholdLineWidth, [Validators.min(0)]], + thresholdColor: [settings.thresholdColor, []] + }); + } + + protected validatorTriggers(): string[] { + return ['useAsThreshold']; + } + + protected updateValidators(emitEvent: boolean) { + const useAsThreshold: boolean = this.flotLatestKeySettingsForm.get('useAsThreshold').value; + if (useAsThreshold) { + this.flotLatestKeySettingsForm.get('thresholdLineWidth').enable(); + this.flotLatestKeySettingsForm.get('thresholdColor').enable(); + } else { + this.flotLatestKeySettingsForm.get('thresholdLineWidth').disable(); + this.flotLatestKeySettingsForm.get('thresholdColor').disable(); + } + this.flotLatestKeySettingsForm.get('thresholdLineWidth').updateValueAndValidity({emitEvent}); + this.flotLatestKeySettingsForm.get('thresholdColor').updateValueAndValidity({emitEvent}); + } + +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-line-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-line-key-settings.component.html new file mode 100644 index 0000000000..fbc179599f --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-line-key-settings.component.html @@ -0,0 +1,24 @@ + + +
+ + +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-line-key-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-line-key-settings.component.ts new file mode 100644 index 0000000000..46b83715fe --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-line-key-settings.component.ts @@ -0,0 +1,55 @@ +/// +/// 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 { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { flotDataKeyDefaultSettings } from '@home/components/widget/lib/settings/chart/flot-key-settings.component'; + +@Component({ + selector: 'tb-flot-line-key-settings', + templateUrl: './flot-line-key-settings.component.html', + styleUrls: [] +}) +export class FlotLineKeySettingsComponent extends WidgetSettingsComponent { + + flotLineKeySettingsForm: FormGroup; + + constructor(protected store: Store, + private fb: FormBuilder) { + super(store); + } + + protected settingsForm(): FormGroup { + return this.flotLineKeySettingsForm; + } + + protected defaultSettings(): WidgetSettings { + return flotDataKeyDefaultSettings('graph'); + } + + protected onSettingsSet(settings: WidgetSettings) { + this.flotLineKeySettingsForm = this.fb.group({ + flotKeySettings: [settings, []] + }); + } + + protected prepareOutputSettings(settings: any): WidgetSettings { + return settings.flotKeySettings; + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.html new file mode 100644 index 0000000000..9fdf98fec7 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.html @@ -0,0 +1,57 @@ + + + +
+ +
+
{{ thresholdText() }}
+
+
+
+
+ + + +
+ + +
+ +
+ +
+ + widgets.chart.line-width + + + + +
+
+
+ + diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.scss new file mode 100644 index 0000000000..06d9988e53 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.scss @@ -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; + &.flot-threshold { + 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 { + &.flot-threshold { + .mat-expansion-panel-body { + padding: 0 8px 8px; + } + } + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.ts new file mode 100644 index 0000000000..61f3a16176 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.ts @@ -0,0 +1,136 @@ +/// +/// 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 { ValueSourceProperty } from '@home/components/widget/lib/settings/common/value-source.component'; +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 { isNumber } from '@core/utils'; +import { IAliasController } from '@core/api/widget-api.models'; +import { TbFlotKeyThreshold } from '@home/components/widget/lib/flot-widget.models'; + +@Component({ + selector: 'tb-flot-threshold', + templateUrl: './flot-threshold.component.html', + styleUrls: ['./flot-threshold.component.scss', './../widget-settings.scss'], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => FlotThresholdComponent), + multi: true + } + ] +}) +export class FlotThresholdComponent extends PageComponent implements OnInit, ControlValueAccessor { + + @Input() + disabled: boolean; + + @Input() + expanded = false; + + @Input() + aliasController: IAliasController; + + @Output() + removeThreshold = new EventEmitter(); + + private modelValue: TbFlotKeyThreshold; + + private propagateChange = null; + + public thresholdFormGroup: FormGroup; + + constructor(protected store: Store, + private translate: TranslateService, + private fb: FormBuilder) { + super(store); + } + + ngOnInit(): void { + this.thresholdFormGroup = this.fb.group({ + valueSource: [null, []], + lineWidth: [null, [Validators.min(0)]], + color: [null, []] + }); + this.thresholdFormGroup.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.thresholdFormGroup.disable({emitEvent: false}); + } else { + this.thresholdFormGroup.enable({emitEvent: false}); + } + } + + writeValue(value: TbFlotKeyThreshold): void { + this.modelValue = value; + const valueSource: ValueSourceProperty = { + valueSource: value?.thresholdValueSource, + entityAlias: value?.thresholdEntityAlias, + attribute: value?.thresholdAttribute, + value: value?.thresholdValue + }; + this.thresholdFormGroup.patchValue( + {valueSource, lineWidth: value?.lineWidth, color: value?.color}, {emitEvent: false} + ); + } + + thresholdText(): string { + const value: ValueSourceProperty = this.thresholdFormGroup.get('valueSource').value; + return this.valueSourcePropertyText(value); + } + + private valueSourcePropertyText(source?: ValueSourceProperty): string { + if (source) { + if (source.valueSource === 'predefinedValue') { + return `${isNumber(source.value) ? source.value : 0}`; + } else if (source.valueSource === 'entityAttribute') { + const alias = source.entityAlias || 'Undefined'; + const key = source.attribute || 'Undefined'; + return `${alias}.${key}`; + } + } + return 'Undefined'; + } + + private updateModel() { + const value: {valueSource: ValueSourceProperty, lineWidth: number, color: string} = this.thresholdFormGroup.value; + this.modelValue = { + thresholdValueSource: value?.valueSource?.valueSource, + thresholdEntityAlias: value?.valueSource?.entityAlias, + thresholdAttribute: value?.valueSource?.attribute, + thresholdValue: value?.valueSource?.value, + lineWidth: value?.lineWidth, + color: value?.color + }; + this.propagateChange(this.modelValue); + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.ts index 8accd374a6..8d00d55b63 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.ts @@ -34,7 +34,6 @@ import { AppState } from '@core/core.state'; import { TranslateService } from '@ngx-translate/core'; import { ComparisonDuration } from '@shared/models/time/time.models'; import { WidgetService } from '@core/http/widget.service'; -import { fixedColorLevelValidator } from '@home/components/widget/lib/settings/gauge/fixed-color-level.component'; import { CdkDragDrop } from '@angular/cdk/drag-drop'; import { LabelDataKey, diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts index 8ee227e253..c6eb6ce5fe 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts @@ -83,6 +83,17 @@ import { LabelDataKeyComponent } from '@home/components/widget/lib/settings/char import { FlotBarWidgetSettingsComponent } from '@home/components/widget/lib/settings/chart/flot-bar-widget-settings.component'; +import { FlotThresholdComponent } from '@home/components/widget/lib/settings/chart/flot-threshold.component'; +import { FlotKeySettingsComponent } from '@home/components/widget/lib/settings/chart/flot-key-settings.component'; +import { + FlotLineKeySettingsComponent +} from '@home/components/widget/lib/settings/chart/flot-line-key-settings.component'; +import { + FlotBarKeySettingsComponent +} from '@home/components/widget/lib/settings/chart/flot-bar-key-settings.component'; +import { + FlotLatestKeySettingsComponent +} from '@home/components/widget/lib/settings/chart/flot-latest-key-settings.component'; @NgModule({ declarations: [ @@ -113,7 +124,12 @@ import { FlotWidgetSettingsComponent, LabelDataKeyComponent, FlotLineWidgetSettingsComponent, - FlotBarWidgetSettingsComponent + FlotBarWidgetSettingsComponent, + FlotThresholdComponent, + FlotKeySettingsComponent, + FlotLineKeySettingsComponent, + FlotBarKeySettingsComponent, + FlotLatestKeySettingsComponent ], imports: [ CommonModule, @@ -148,7 +164,12 @@ import { FlotWidgetSettingsComponent, LabelDataKeyComponent, FlotLineWidgetSettingsComponent, - FlotBarWidgetSettingsComponent + FlotBarWidgetSettingsComponent, + FlotThresholdComponent, + FlotKeySettingsComponent, + FlotLineKeySettingsComponent, + FlotBarKeySettingsComponent, + FlotLatestKeySettingsComponent ] }) export class WidgetSettingsModule { @@ -174,5 +195,8 @@ export const widgetSettingsComponentsMap: {[key: string]: Type