tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

UI: Advanced gauge settings

pull/9485/head
Artem Dzhereleiko 3 years ago
parent
384c5db084
commit
e70530e4ca
7 changed files with 584 additions and 572 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 38
      ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.ts
  2. 78
      ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.html
  3. 291
      ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html
  4. 42
      ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.ts
  5. 615
      ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html
  6. 69
      ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.ts
  7. 23
      ui-ngx/src/assets/locale/locale.constant-en_US.json

38
ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.ts
View File

@ -14,8 +14,7 @@
/// limitations under the License. /// limitations under the License.
/// ///
import { ChangeDetectorRef, Component, Injector } from '@angular/core'; import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state'; import { AppState } from '@core/core.state';
import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models'; import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
@ -27,33 +26,13 @@ import {
WidgetConfig, WidgetConfig,
} from '@shared/models/widget.models'; } from '@shared/models/widget.models';
import { WidgetConfigComponent } from '@home/components/widget/widget-config.component'; import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
import { import {
getTimewindowConfig, getTimewindowConfig,
setTimewindowConfig setTimewindowConfig
} from '@home/components/widget/config/timewindow-config-panel.component'; } from '@home/components/widget/config/timewindow-config-panel.component';
import { formatValue, isDefinedAndNotNull, isUndefined } from '@core/utils'; import { formatValue, isUndefined } from '@core/utils';
import { import { ColorType } from '@shared/models/widget-settings.models';
ColorType,
DateFormatProcessor,
DateFormatSettings,
getLabel,
setLabel
} from '@shared/models/widget-settings.models';
import {
valueCardDefaultSettings,
ValueCardLayout,
valueCardLayoutImages,
valueCardLayouts,
valueCardLayoutTranslations,
ValueCardWidgetSettings
} from '@home/components/widget/lib/cards/value-card-widget.models';
// @Component({
// selector: 'tb-radial-gauge-basic-config',
// templateUrl: './analog-gauge-basic-config.component.html',
// styleUrls: ['../basic-config.scss']
// })
export class GaugeBasicConfigComponent extends BasicWidgetConfigComponent { export class GaugeBasicConfigComponent extends BasicWidgetConfigComponent {
public get displayTimewindowConfig(): boolean { public get displayTimewindowConfig(): boolean {
@ -94,21 +73,21 @@ export class GaugeBasicConfigComponent extends BasicWidgetConfigComponent {
showUnitTitle: [configData.config.settings?.showUnitTitle, []], showUnitTitle: [configData.config.settings?.showUnitTitle, []],
unitTitle: [configData.config.settings?.unitTitle, []], unitTitle: [configData.config.settings?.unitTitle, []],
titleFont: [configData.config.settings?.titleFont, []], titleFont: [configData.config.settings?.titleFont, []],
titleColor: [configData.config.settings?.titleFont.color, []], titleColor: [configData.config.settings?.titleFont?.color, []],
units: [configData.config.units, []], units: [configData.config.units, []],
unitsFont: [configData.config.settings?.unitsFont, []], unitsFont: [configData.config.settings?.unitsFont, []],
unitsColor: [configData.config.settings?.unitsFont.color, []], unitsColor: [configData.config.settings?.unitsFont?.color, []],
valueBox: [configData.config.settings?.valueBox, []], valueBox: [configData.config.settings?.valueBox, []],
valueInt: [configData.config.settings?.valueInt, []], valueInt: [configData.config.settings?.valueInt, []],
valueFont: [configData.config.settings?.valueFont, []], valueFont: [configData.config.settings?.valueFont, []],
valueColor: [configData.config.settings?.valueFont.color, []], valueColor: [configData.config.settings?.valueFont?.color, []],
minValue: [configData.config.settings?.minValue, []], minValue: [configData.config.settings?.minValue, []],
maxValue: [configData.config.settings?.maxValue, []], maxValue: [configData.config.settings?.maxValue, []],
numbersFont: [configData.config.settings?.numbersFont, []], numbersFont: [configData.config.settings?.numbersFont, []],
numbersColor: [configData.config.settings?.numbersFont.color, []], numbersColor: [configData.config.settings?.numbersFont?.color, []],
colorBarStroke: [configData.config.settings?.colorBarStroke, []], colorBarStroke: [configData.config.settings?.colorBarStroke, []],
@ -129,7 +108,6 @@ export class GaugeBasicConfigComponent extends BasicWidgetConfigComponent {
protected prepareOutputConfig(config: any): WidgetConfigComponentData { protected prepareOutputConfig(config: any): WidgetConfigComponentData {
setTimewindowConfig(this.widgetConfig.config, config.timewindowConfig); setTimewindowConfig(this.widgetConfig.config, config.timewindowConfig);
this.widgetConfig.config.datasources = config.datasources; this.widgetConfig.config.datasources = config.datasources;
// setLabel(config.label, this.widgetConfig.config.datasources);
this.widgetConfig.config.actions = config.actions; this.widgetConfig.config.actions = config.actions;
this.widgetConfig.config.settings = this.widgetConfig.config.settings || {}; this.widgetConfig.config.settings = this.widgetConfig.config.settings || {};

78
ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.html
View File

@ -83,47 +83,47 @@
</tb-string-items-list> </tb-string-items-list>
</div> </div>
</div> </div>
<div class="tb-form-row space-between"> <div class="tb-form-row space-between">
<div translate>widgets.gauge.label-style</div> <div translate>widgets.gauge.label-style</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<tb-font-settings formControlName="majorTickFont" <tb-font-settings formControlName="majorTickFont"
disabledLineHeight> disabledLineHeight>
</tb-font-settings> </tb-font-settings>
<tb-color-input asBoxInput <tb-color-input asBoxInput
colorClearButton colorClearButton
formControlName="majorTickColor"> formControlName="majorTickColor">
</tb-color-input> </tb-color-input>
</div>
</div> </div>
</div>
<div class="tb-form-row space-between"> <div class="tb-form-row space-between">
<div translate>widgets.gauge.major-ticks-color</div> <div translate>widgets.gauge.major-ticks-color</div>
<tb-color-input asBoxInput <tb-color-input asBoxInput
colorClearButton colorClearButton
formControlName="colorMajorTicks"> formControlName="colorMajorTicks">
</tb-color-input> </tb-color-input>
</div> </div>
<div class="tb-form-row space-between"> <div class="tb-form-row space-between">
<div translate>widgets.gauge.minor-ticks-color</div> <div translate>widgets.gauge.minor-ticks-color</div>
<tb-color-input asBoxInput <tb-color-input asBoxInput
colorClearButton colorClearButton
formControlName="colorMinorTicks"> formControlName="colorMinorTicks">
</tb-color-input> </tb-color-input>
</div> </div>
<div class="tb-form-row space-between"> <div class="tb-form-row space-between">
<div translate>widgets.gauge.needle-color</div> <div translate>widgets.gauge.needle-color</div>
<tb-color-input asBoxInput <tb-color-input asBoxInput
colorClearButton colorClearButton
formControlName="colorNeedle"> formControlName="colorNeedle">
</tb-color-input> </tb-color-input>
</div> </div>
<div class="tb-form-row space-between"> <div class="tb-form-row space-between">
<div translate>widgets.gauge.plate-color</div> <div translate>widgets.gauge.plate-color</div>
<tb-color-input asBoxInput <tb-color-input asBoxInput
colorClearButton colorClearButton
formControlName="colorPlate"> formControlName="colorPlate">
</tb-color-input> </tb-color-input>
</div> </div>
</div> </div>
<div class="tb-form-panel"> <div class="tb-form-panel">

291
ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html
View File

@ -15,153 +15,127 @@
limitations under the License. limitations under the License.
--> -->
<section class="tb-widget-settings" [formGroup]="analogueCompassWidgetSettingsForm" fxLayout="column"> <ng-container [formGroup]="analogueCompassWidgetSettingsForm">
<fieldset class="fields-group"> <div class="tb-form-panel">
<legend class="group-title" translate>widgets.gauge.ticks-settings</legend> <div class="tb-form-panel-title" translate>widgets.gauge.ticks-settings</div>
<mat-form-field fxFlex class="mat-block" floatLabel="always"> <div class="tb-form-row">
<mat-label translate>widgets.gauge.major-ticks-names</mat-label> <div class="fixed-title-width" translate>widgets.gauge.labels</div>
<mat-chip-grid class="tb-drop-list" <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
#majorTicksNamesChipList <tb-string-items-list
cdkDropList style="display: flex"
cdkDropListOrientation="horizontal" fxFlex
(cdkDropListDropped)="majorTickNameDrop($event)" appearance="outline"
formControlName="majorTicks"> subscriptSizing="dynamic"
<mat-chip-row class="tb-draggable" cdkDrag *ngFor="let tickName of majorTicksNamesList()" editable
[removable]="true" (removed)="removeMajorTickName(tickName)"> formControlName="majorTicks">
{{tickName}} </tb-string-items-list>
<mat-icon matChipRemove>cancel</mat-icon> </div>
</mat-chip-row> </div>
<input [matChipInputFor]="majorTicksNamesChipList" <div class="tb-form-row space-between">
[matChipInputSeparatorKeyCodes]="separatorKeysCodes" <div translate>widgets.gauge.label-style</div>
matChipInputAddOnBlur <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
(matChipInputTokenEnd)="addMajorTickName($event)"> <tb-font-settings formControlName="majorTickFont"
</mat-chip-grid> disabledLineHeight>
</mat-form-field> </tb-font-settings>
<tb-color-input fxFlex <tb-color-input asBoxInput
formControlName="colorMajorTicks" colorClearButton
icon="format_color_fill" formControlName="majorTickColor">
label="{{ 'widgets.gauge.major-ticks-color' | translate }}" openOnInput colorClearButton> </tb-color-input>
</tb-color-input> </div>
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center"> </div>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gauge.minor-ticks-count</mat-label> <div class="tb-form-row space-between">
<input matInput type="number" min="0" formControlName="minorTicks"> <div translate>widgets.gauge.major-ticks</div>
</mat-form-field> <tb-color-input asBoxInput
<tb-color-input fxFlex colorClearButton
formControlName="colorMinorTicks" formControlName="colorMajorTicks">
icon="format_color_fill"
label="{{ 'widgets.gauge.minor-ticks-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
</section>
<mat-slide-toggle formControlName="showStrokeTicks" class="slide-block">
{{ 'widgets.gauge.show-stroke-ticks' | translate }}
</mat-slide-toggle>
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.gauge.major-ticks-font</legend>
<tb-widget-font formControlName="majorTickFont"></tb-widget-font>
</fieldset>
</fieldset>
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.gauge.plate-settings</legend>
<tb-color-input fxFlex
formControlName="colorPlate"
icon="format_color_fill"
label="{{ 'widgets.gauge.plate-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<mat-slide-toggle formControlName="showBorder" class="slide-block">
{{ 'widgets.gauge.show-plate-border' | translate }}
</mat-slide-toggle>
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
<tb-color-input fxFlex
formControlName="colorBorder"
icon="format_color_fill"
label="{{ 'widgets.gauge.border-color' | translate }}" openOnInput colorClearButton>
</tb-color-input> </tb-color-input>
<mat-form-field fxFlex class="mat-block"> </div>
<mat-label translate>widgets.gauge.border-width</mat-label> <div class="tb-form-row space-between">
<input matInput type="number" min="0" formControlName="borderOuterWidth"> <div translate>widgets.gauge.minor-ticks</div>
</mat-form-field> <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
</section> <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
</fieldset> <input matInput type="number" min="0" formControlName="minorTicks">
<fieldset class="fields-group"> </mat-form-field>
<legend class="group-title" translate>widgets.gauge.needle-settings</legend> <tb-color-input asBoxInput
<mat-form-field fxFlex class="mat-block"> colorClearButton
<mat-label translate>widgets.gauge.needle-circle-size</mat-label> formControlName="colorMinorTicks">
<input matInput type="number" min="0" formControlName="needleCircleSize"> </tb-color-input>
</mat-form-field> </div>
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center"> </div>
<tb-color-input fxFlex
formControlName="colorNeedle" <div class="tb-form-row">
icon="format_color_fill" <mat-slide-toggle class="mat-slide" formControlName="showStrokeTicks">
label="{{ 'widgets.gauge.needle-color' | translate }}" openOnInput colorClearButton> {{ 'widgets.gauge.show-stroke-ticks' | translate }}
</mat-slide-toggle>
</div>
</div>
<div class="tb-form-panel">
<div class="tb-form-panel-title" translate>widgets.gauge.plate-settings</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.plate-color</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorPlate">
</tb-color-input> </tb-color-input>
<tb-color-input fxFlex </div>
formControlName="colorNeedleCircle" <div class="tb-form-row space-between column-xs">
icon="format_color_fill" <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showBorder">
label="{{ 'widgets.gauge.needle-circle-color' | translate }}" openOnInput colorClearButton> {{ 'widgets.gauge.show-plate-border' | translate }}
</mat-slide-toggle>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<mat-form-field class="number" appearance="outline" subscriptSizing="dynamic">
<input matInput min="0" formControlName="borderOuterWidth" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorBorder">
</tb-color-input>
</div>
</div>
</div>
<div class="tb-form-panel">
<div class="tb-form-panel-title" translate>widgets.gauge.needle-settings</div>
<div class="tb-form-row space-between column-xs">
<div translate>widgets.gauge.needle-circle</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<mat-form-field class="number" appearance="outline" subscriptSizing="dynamic">
<input matInput min="0" formControlName="needleCircleSize" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorNeedleCircle">
</tb-color-input>
</div>
</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.needle-color</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorNeedle">
</tb-color-input> </tb-color-input>
</section> </div>
</fieldset> </div>
<fieldset class="fields-group fields-group-slider">
<legend class="group-title" translate>widgets.gauge.animation-settings</legend> <div class="tb-form-panel tb-slide-toggle">
<mat-expansion-panel class="tb-settings" [expanded]="analogueCompassWidgetSettingsForm.get('animation').value"> <mat-expansion-panel class="tb-settings" [expanded]="analogueCompassWidgetSettingsForm.get('animation').value">
<mat-expansion-panel-header fxLayout="row wrap"> <mat-expansion-panel-header fxLayout="row wrap">
<mat-panel-title> <mat-panel-title>
<mat-slide-toggle formControlName="animation" (click)="$event.stopPropagation()" <mat-slide-toggle class="mat-slide" formControlName="animation" (click)="$event.stopPropagation()"
fxLayoutAlign="center"> fxLayoutAlign="center">
{{ 'widgets.gauge.enable-animation' | translate }} {{ 'widgets.gauge.enable-animation' | translate }}
</mat-slide-toggle> </mat-slide-toggle>
</mat-panel-title> </mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate> <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
widget-config.advanced-settings widget-config.advanced-settings
</mat-panel-description> </mat-panel-description>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<ng-template matExpansionPanelContent> <ng-template matExpansionPanelContent>
<section fxLayout="column"> <div class="tb-form-row">
<mat-form-field fxFlex class="mat-block"> <div class="fixed-title-width" translate>widgets.gauge.animation-target</div>
<mat-label translate>widgets.gauge.animation-duration</mat-label> <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
<input matInput type="number" min="0" formControlName="animationDuration">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gauge.animation-rule</mat-label>
<mat-select formControlName="animationRule">
<mat-option [value]="'linear'">
{{ 'widgets.gauge.animation-linear' | translate }}
</mat-option>
<mat-option [value]="'quad'">
{{ 'widgets.gauge.animation-quad' | translate }}
</mat-option>
<mat-option [value]="'quint'">
{{ 'widgets.gauge.animation-quint' | translate }}
</mat-option>
<mat-option [value]="'cycle'">
{{ 'widgets.gauge.animation-cycle' | translate }}
</mat-option>
<mat-option [value]="'bounce'">
{{ 'widgets.gauge.animation-bounce' | translate }}
</mat-option>
<mat-option [value]="'elastic'">
{{ 'widgets.gauge.animation-elastic' | translate }}
</mat-option>
<mat-option [value]="'dequad'">
{{ 'widgets.gauge.animation-dequad' | translate }}
</mat-option>
<mat-option [value]="'dequint'">
{{ 'widgets.gauge.animation-dequint' | translate }}
</mat-option>
<mat-option [value]="'decycle'">
{{ 'widgets.gauge.animation-decycle' | translate }}
</mat-option>
<mat-option [value]="'debounce'">
{{ 'widgets.gauge.animation-debounce' | translate }}
</mat-option>
<mat-option [value]="'delastic'">
{{ 'widgets.gauge.animation-delastic' | translate }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gauge.animation-target</mat-label>
<mat-select formControlName="animationTarget"> <mat-select formControlName="animationTarget">
<mat-option [value]="'needle'"> <mat-option [value]="'needle'">
{{ 'widgets.gauge.animation-target-needle' | translate }} {{ 'widgets.gauge.animation-target-needle' | translate }}
@ -171,8 +145,53 @@
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</section> </div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.animation-duration-rule</div>
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput type="number" min="0" formControlName="animationDuration" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
<mat-form-field appearance="outline" subscriptSizing="dynamic">
<mat-select formControlName="animationRule">
<mat-option [value]="'linear'">
{{ 'widgets.gauge.animation-linear' | translate }}
</mat-option>
<mat-option [value]="'quad'">
{{ 'widgets.gauge.animation-quad' | translate }}
</mat-option>
<mat-option [value]="'quint'">
{{ 'widgets.gauge.animation-quint' | translate }}
</mat-option>
<mat-option [value]="'cycle'">
{{ 'widgets.gauge.animation-cycle' | translate }}
</mat-option>
<mat-option [value]="'bounce'">
{{ 'widgets.gauge.animation-bounce' | translate }}
</mat-option>
<mat-option [value]="'elastic'">
{{ 'widgets.gauge.animation-elastic' | translate }}
</mat-option>
<mat-option [value]="'dequad'">
{{ 'widgets.gauge.animation-dequad' | translate }}
</mat-option>
<mat-option [value]="'dequint'">
{{ 'widgets.gauge.animation-dequint' | translate }}
</mat-option>
<mat-option [value]="'decycle'">
{{ 'widgets.gauge.animation-decycle' | translate }}
</mat-option>
<mat-option [value]="'debounce'">
{{ 'widgets.gauge.animation-debounce' | translate }}
</mat-option>
<mat-option [value]="'delastic'">
{{ 'widgets.gauge.animation-delastic' | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</ng-template> </ng-template>
</mat-expansion-panel> </mat-expansion-panel>
</fieldset> </div>
</section> </ng-container>

42
ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.ts
View File

@ -19,9 +19,7 @@ import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state'; import { AppState } from '@core/core.state';
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { MatChipInputEvent } from '@angular/material/chips';
import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes'; import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
@Component({ @Component({
selector: 'tb-analogue-compass-widget-settings', selector: 'tb-analogue-compass-widget-settings',
@ -81,6 +79,7 @@ export class AnalogueCompassWidgetSettingsComponent extends WidgetSettingsCompon
colorMinorTicks: [settings.colorMinorTicks, []], colorMinorTicks: [settings.colorMinorTicks, []],
showStrokeTicks: [settings.showStrokeTicks, []], showStrokeTicks: [settings.showStrokeTicks, []],
majorTickFont: [settings.majorTickFont, []], majorTickFont: [settings.majorTickFont, []],
majorTickColor: [settings.majorTickFont.color, []],
// Plate settings // Plate settings
colorPlate: [settings.colorPlate, []], colorPlate: [settings.colorPlate, []],
@ -131,41 +130,8 @@ export class AnalogueCompassWidgetSettingsComponent extends WidgetSettingsCompon
this.analogueCompassWidgetSettingsForm.get('animationTarget').updateValueAndValidity({emitEvent}); this.analogueCompassWidgetSettingsForm.get('animationTarget').updateValueAndValidity({emitEvent});
} }
majorTicksNamesList(): string[] { protected prepareOutputSettings(settings) {
return this.analogueCompassWidgetSettingsForm.get('majorTicks').value; settings.majorTickFont.color = this.analogueCompassWidgetSettingsForm.get('majorTickColor').value;
} return settings;
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.chipInput.inputElement;
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<string[]>): 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();
} }
} }

615
ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html
View File

@ -15,7 +15,7 @@
limitations under the License. limitations under the License.
--> -->
<section class="tb-widget-settings" [formGroup]="analogueGaugeWidgetSettingsForm" fxLayout="column"> <ng-container [formGroup]="analogueGaugeWidgetSettingsForm">
<ng-container [ngSwitch]="gaugeType"> <ng-container [ngSwitch]="gaugeType">
<ng-container *ngSwitchCase="'radial'"> <ng-container *ngSwitchCase="'radial'">
<ng-container *ngTemplateOutlet="radialGauge; context: ctx "></ng-container> <ng-container *ngTemplateOutlet="radialGauge; context: ctx "></ng-container>
@ -24,330 +24,383 @@
<ng-container *ngTemplateOutlet="linearGauge; context: ctx "></ng-container> <ng-container *ngTemplateOutlet="linearGauge; context: ctx "></ng-container>
</ng-container> </ng-container>
</ng-container> </ng-container>
<tb-color-input
formControlName="defaultColor" <div class="tb-form-panel">
icon="format_color_fill" <div class="tb-form-panel-title" translate>widgets.gauge.ticks-settings</div>
label="{{ 'widgets.gauge.default-color' | translate }}" openOnInput colorClearButton> <div class="tb-form-row space-between column-xs">
</tb-color-input> <div translate>widgets.gauge.ticks</div>
<fieldset class="fields-group"> <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<legend class="group-title" translate>widgets.gauge.ticks-settings</legend> <div class="tb-small-label" translate>widgets.gauge.min-value-short</div>
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px"> <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<mat-form-field fxFlex class="mat-block"> <input matInput formControlName="minValue" type="number" step="1" placeholder="{{ 'widget-config.set' | translate }}">
<mat-label translate>widgets.gauge.min-value</mat-label> </mat-form-field>
<input matInput type="number" formControlName="minValue"> <div class="tb-small-label" translate>widgets.gauge.max-value-short</div>
</mat-form-field> <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<mat-form-field fxFlex class="mat-block"> <input matInput formControlName="maxValue" type="number" step="1" placeholder="{{ 'widget-config.set' | translate }}">
<mat-label translate>widgets.gauge.max-value</mat-label> </mat-form-field>
<input matInput type="number" formControlName="maxValue"> <tb-font-settings formControlName="numbersFont"
</mat-form-field> disabledLineHeight>
</section> </tb-font-settings>
<section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center"> <tb-color-input asBoxInput
<mat-form-field fxFlex class="mat-block"> colorClearButton
<mat-label translate>widgets.gauge.major-ticks-count</mat-label> formControlName="numbersColor">
<input matInput type="number" min="0" formControlName="majorTicksCount"> </tb-color-input>
</mat-form-field> </div>
<tb-color-input fxFlex </div>
formControlName="colorMajorTicks"
icon="format_color_fill" <div class="tb-form-row space-between column-xs">
label="{{ 'widgets.gauge.major-ticks-color' | translate }}" openOnInput colorClearButton> <div translate>widgets.gauge.major-ticks-count</div>
</tb-color-input> <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
</section> <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center"> <input matInput formControlName="majorTicksCount" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
<mat-form-field fxFlex class="mat-block"> </mat-form-field>
<mat-label translate>widgets.gauge.minor-ticks-count</mat-label> <tb-color-input asBoxInput
<input matInput type="number" min="0" formControlName="minorTicks"> colorClearButton
</mat-form-field> formControlName="colorMajorTicks">
<tb-color-input fxFlex </tb-color-input>
formControlName="colorMinorTicks" </div>
icon="format_color_fill" </div>
label="{{ 'widgets.gauge.minor-ticks-color' | translate }}" openOnInput colorClearButton>
</tb-color-input> <div class="tb-form-row space-between column-xs">
</section> <div translate>widgets.gauge.minor-ticks-count</div>
<fieldset class="fields-group"> <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<legend class="group-title" translate>widgets.gauge.tick-numbers-font</legend> <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<tb-widget-font formControlName="numbersFont"></tb-widget-font> <input matInput formControlName="minorTicks" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
</fieldset> </mat-form-field>
</fieldset> <tb-color-input asBoxInput
<fieldset class="fields-group fields-group-slider"> colorClearButton
<legend class="group-title" translate>widgets.gauge.unit-title-settings</legend> formControlName="colorMinorTicks">
<mat-expansion-panel class="tb-settings" [expanded]="analogueGaugeWidgetSettingsForm.get('showUnitTitle').value"> </tb-color-input>
<mat-expansion-panel-header fxLayout="row wrap"> </div>
<mat-panel-title> </div>
<mat-slide-toggle formControlName="showUnitTitle" (click)="$event.stopPropagation()" </div>
fxLayoutAlign="center">
{{ 'widgets.gauge.show-unit-title' | translate }} <div class="tb-form-panel">
</mat-slide-toggle> <div class="tb-form-panel-title" translate>widgets.gauge.units-settings</div>
</mat-panel-title> <div class="tb-form-row column-xs">
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate> <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showUnitTitle">
widget-config.advanced-settings {{ 'widgets.gauge.units-title' | translate }}
</mat-panel-description> </mat-slide-toggle>
</mat-expansion-panel-header> <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<ng-template matExpansionPanelContent> <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
<section fxLayout="column"> <input matInput formControlName="unitTitle" placeholder="{{ 'widget-config.set' | translate }}">
<mat-form-field fxFlex class="mat-block"> </mat-form-field>
<mat-label translate>widgets.gauge.unit-title</mat-label> <tb-font-settings formControlName="titleFont"
<input matInput formControlName="unitTitle"> disabledLineHeight
</mat-form-field> [previewText]="analogueGaugeWidgetSettingsForm.get('unitTitle').value">
<fieldset class="fields-group"> </tb-font-settings>
<legend class="group-title" translate>widgets.gauge.title-font</legend> <tb-color-input asBoxInput
<tb-widget-font formControlName="titleFont"></tb-widget-font> colorClearButton
</fieldset> formControlName="titleColor">
</section> </tb-color-input>
</ng-template> </div>
</mat-expansion-panel> </div>
</fieldset>
<fieldset class="fields-group"> <div class="tb-form-row space-between">
<legend class="group-title" translate>widgets.gauge.units-settings</legend> <div translate>widget-config.units-short</div>
<fieldset class="fields-group"> <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<legend class="group-title" translate>widgets.gauge.units-font</legend> <tb-font-settings formControlName="unitsFont"
<tb-widget-font formControlName="unitsFont"></tb-widget-font> disabledLineHeight>
</fieldset> </tb-font-settings>
</fieldset> <tb-color-input asBoxInput
<fieldset class="fields-group fields-group-slider"> colorClearButton
<legend class="group-title" translate>widgets.gauge.value-box-settings</legend> formControlName="unitsColor">
</tb-color-input>
</div>
</div>
</div>
<div class="tb-form-panel tb-slide-toggle">
<mat-expansion-panel class="tb-settings" [expanded]="analogueGaugeWidgetSettingsForm.get('valueBox').value"> <mat-expansion-panel class="tb-settings" [expanded]="analogueGaugeWidgetSettingsForm.get('valueBox').value">
<mat-expansion-panel-header fxLayout="row wrap"> <mat-expansion-panel-header fxLayout="row wrap">
<mat-panel-title> <mat-panel-title>
<mat-slide-toggle formControlName="valueBox" (click)="$event.stopPropagation()" <mat-slide-toggle class="mat-slide" formControlName="valueBox" (click)="$event.stopPropagation()"
fxLayoutAlign="center"> fxLayoutAlign="center">
{{ 'widgets.gauge.show-value-box' | translate }} {{ 'widgets.gauge.value-box' | translate }}
</mat-slide-toggle> </mat-slide-toggle>
</mat-panel-title> </mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate> <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
widget-config.advanced-settings widget-config.advanced-settings
</mat-panel-description> </mat-panel-description>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<ng-template matExpansionPanelContent> <ng-template matExpansionPanelContent>
<section fxLayout="column"> <div class="tb-form-row space-between">
<mat-form-field fxFlex class="mat-block"> <div translate>widgets.gauge.value-int</div>
<mat-label translate>widgets.gauge.value-int</mat-label> <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput type="number" min="0" step="1" formControlName="valueInt"> <input matInput type="number" min="0" step="1" formControlName="valueInt" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field> </mat-form-field>
<fieldset class="fields-group"> </div>
<legend class="group-title" translate>widgets.gauge.value-font</legend> <div class="tb-form-panel">
<tb-widget-font formControlName="valueFont" [hasShadowColor]="true"></tb-widget-font> <div class="tb-form-panel-title" translate>widgets.gauge.value-text</div>
</fieldset> <div class="tb-form-row space-between">
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px"> <div translate>widgets.gauge.value-text</div>
<tb-color-input fxFlex <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
formControlName="colorValueBoxRect" <tb-font-settings formControlName="valueFont"
icon="format_color_fill" disabledLineHeight>
label="{{ 'widgets.gauge.value-box-rect-stroke-color' | translate }}" openOnInput colorClearButton> </tb-font-settings>
<tb-color-input asBoxInput
colorClearButton
formControlName="valueColor">
</tb-color-input>
</div>
</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.value-text-shadow</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="valueColorShadow">
</tb-color-input> </tb-color-input>
<tb-color-input fxFlex </div>
formControlName="colorValueBoxRectEnd" </div>
icon="format_color_fill" <div class="tb-form-panel">
label="{{ 'widgets.gauge.value-box-rect-stroke-color-end' | translate }}" openOnInput colorClearButton> <div class="tb-form-panel-title" translate>widgets.gauge.value-box</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.rect-stroke-color-start</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorValueBoxRect">
</tb-color-input>
</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.rect-stroke-color-end</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorValueBoxRectEnd">
</tb-color-input> </tb-color-input>
</section> </div>
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<tb-color-input fxFlex <div class="tb-form-row space-between">
formControlName="colorValueBoxBackground" <div translate>widgets.gauge.background-color</div>
icon="format_color_fill" <tb-color-input asBoxInput
label="{{ 'widgets.gauge.value-box-background-color' | translate }}" openOnInput colorClearButton> colorClearButton
formControlName="colorValueBoxBackground">
</tb-color-input> </tb-color-input>
<tb-color-input fxFlex </div>
formControlName="colorValueBoxShadow"
icon="format_color_fill" <div class="tb-form-row space-between">
label="{{ 'widgets.gauge.value-box-shadow-color' | translate }}" openOnInput colorClearButton> <div translate>widgets.gauge.shadow-color</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorValueBoxShadow">
</tb-color-input> </tb-color-input>
</section> </div>
</section> </div>
</ng-template> </ng-template>
</mat-expansion-panel> </mat-expansion-panel>
</fieldset> </div>
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.gauge.plate-settings</legend> <div class="tb-form-panel">
<tb-color-input fxFlex <div class="tb-form-panel-title" translate>widgets.gauge.plate-settings</div>
formControlName="colorPlate" <div class="tb-form-row space-between">
icon="format_color_fill" <div translate>widgets.gauge.plate-color</div>
label="{{ 'widgets.gauge.plate-color' | translate }}" openOnInput colorClearButton> <tb-color-input asBoxInput
</tb-color-input> colorClearButton
<mat-slide-toggle formControlName="showBorder"> formControlName="colorPlate">
{{ 'widgets.gauge.show-plate-border' | translate }}
</mat-slide-toggle>
</fieldset>
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.gauge.needle-settings</legend>
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<tb-color-input fxFlex
formControlName="colorNeedle"
icon="format_color_fill"
label="{{ 'widgets.gauge.needle-color' | translate }}" openOnInput colorClearButton>
</tb-color-input> </tb-color-input>
<tb-color-input fxFlex </div>
formControlName="colorNeedleEnd" <div class="tb-form-row">
icon="format_color_fill" <mat-slide-toggle class="mat-slide" formControlName="showBorder">
label="{{ 'widgets.gauge.needle-color-end' | translate }}" openOnInput colorClearButton> {{ 'widgets.gauge.show-plate-border' | translate }}
</mat-slide-toggle>
</div>
</div>
<div class="tb-form-panel">
<div class="tb-form-panel-title" translate>widgets.gauge.needle-settings</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.needle-color-start</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorNeedle">
</tb-color-input> </tb-color-input>
</section> </div>
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<tb-color-input fxFlex <div class="tb-form-row space-between">
formControlName="colorNeedleShadowUp" <div translate>widgets.gauge.needle-color-end</div>
icon="format_color_fill" <tb-color-input asBoxInput
label="{{ 'widgets.gauge.needle-color-shadow-up' | translate }}" openOnInput colorClearButton> colorClearButton
formControlName="colorNeedleEnd">
</tb-color-input> </tb-color-input>
<tb-color-input fxFlex </div>
formControlName="colorNeedleShadowDown"
icon="format_color_fill" <div class="tb-form-row space-between">
label="{{ 'widgets.gauge.needle-color-shadow-down' | translate }}" openOnInput colorClearButton> <div translate>widgets.gauge.needle-color-shadow-up</div>
<tb-color-input asBoxInput
colorClearButton
formControlName="colorNeedleShadowUp">
</tb-color-input> </tb-color-input>
</section> </div>
</fieldset>
<fieldset class="fields-group"> <div class="tb-form-row space-between">
<legend class="group-title" translate>widgets.gauge.highlights-settings</legend> <div translate>widgets.gauge.needle-color-shadow-down</div>
<mat-form-field fxFlex class="mat-block"> <tb-color-input asBoxInput
<mat-label translate>widgets.gauge.highlights-width</mat-label> colorClearButton
<input matInput type="number" min="0" formControlName="highlightsWidth"> formControlName="colorNeedleShadowDown">
</mat-form-field> </tb-color-input>
<fieldset class="fields-group"> </div>
<legend class="group-title" translate>widgets.gauge.highlights</legend> </div>
<div fxLayout="column">
<div class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical" <div class="tb-form-panel">
(cdkDropListDropped)="highlightDrop($event)"> <div class="tb-form-panel-title" translate>widgets.gauge.scale-settings</div>
<div cdkDrag class="tb-draggable" *ngFor="let highlightControl of highlightsFormArray().controls; trackBy: trackByHighlightControl; <div class="tb-form-row space-between">
let $index = index; last as isLast;" <div translate>widgets.gauge.scale</div>
fxLayout="column" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}"> <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<tb-gauge-highlight [formControl]="highlightControl" <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
[expanded]="highlightControl.new" <input matInput type="number" min="0" formControlName="highlightsWidth">
(removeHighlight)="removeHighlight($index)"> </mat-form-field>
</tb-gauge-highlight> <tb-color-settings formControlName="highlights">
</div> <!-- [disabledColorType]="[colorType.constant, colorType.function]"-->
</div> </tb-color-settings>
<div *ngIf="!highlightsFormArray().controls.length">
<span translate fxLayoutAlign="center center"
class="tb-prompt">widgets.gauge.no-highlights</span>
</div>
<div style="padding-top: 16px;">
<button mat-raised-button color="primary"
type="button"
(click)="addHighlight()">
<span translate>widgets.gauge.add-highlight</span>
</button>
</div>
</div> </div>
</fieldset> </div>
</fieldset> </div>
<fieldset class="fields-group fields-group-slider">
<legend class="group-title" translate>widgets.gauge.animation-settings</legend> <div class="tb-form-panel tb-slide-toggle">
<mat-expansion-panel class="tb-settings" [expanded]="analogueGaugeWidgetSettingsForm.get('animation').value"> <mat-expansion-panel class="tb-settings" [expanded]="analogueGaugeWidgetSettingsForm.get('animation').value">
<mat-expansion-panel-header fxLayout="row wrap"> <mat-expansion-panel-header fxLayout="row wrap">
<mat-panel-title> <mat-panel-title>
<mat-slide-toggle formControlName="animation" (click)="$event.stopPropagation()" <mat-slide-toggle class="mat-slide" formControlName="animation" (click)="$event.stopPropagation()"
fxLayoutAlign="center"> fxLayoutAlign="center">
{{ 'widgets.gauge.enable-animation' | translate }} {{ 'widgets.gauge.enable-animation' | translate }}
</mat-slide-toggle> </mat-slide-toggle>
</mat-panel-title> </mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate> <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
widget-config.advanced-settings widget-config.advanced-settings
</mat-panel-description> </mat-panel-description>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<ng-template matExpansionPanelContent> <ng-template matExpansionPanelContent>
<section fxLayout="column"> <div class="tb-form-row space-between">
<mat-form-field fxFlex class="mat-block"> <div translate>widgets.gauge.animation-duration-rule</div>
<mat-label translate>widgets.gauge.animation-duration</mat-label> <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<input matInput type="number" min="0" formControlName="animationDuration"> <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
</mat-form-field> <input matInput type="number" min="0" formControlName="animationDuration" placeholder="{{ 'widget-config.set' | translate }}">
<mat-form-field fxFlex class="mat-block"> </mat-form-field>
<mat-label translate>widgets.gauge.animation-rule</mat-label> <mat-form-field appearance="outline" subscriptSizing="dynamic">
<mat-select formControlName="animationRule"> <mat-select formControlName="animationRule">
<mat-option [value]="'linear'"> <mat-option [value]="'linear'">
{{ 'widgets.gauge.animation-linear' | translate }} {{ 'widgets.gauge.animation-linear' | translate }}
</mat-option> </mat-option>
<mat-option [value]="'quad'"> <mat-option [value]="'quad'">
{{ 'widgets.gauge.animation-quad' | translate }} {{ 'widgets.gauge.animation-quad' | translate }}
</mat-option> </mat-option>
<mat-option [value]="'quint'"> <mat-option [value]="'quint'">
{{ 'widgets.gauge.animation-quint' | translate }} {{ 'widgets.gauge.animation-quint' | translate }}
</mat-option> </mat-option>
<mat-option [value]="'cycle'"> <mat-option [value]="'cycle'">
{{ 'widgets.gauge.animation-cycle' | translate }} {{ 'widgets.gauge.animation-cycle' | translate }}
</mat-option> </mat-option>
<mat-option [value]="'bounce'"> <mat-option [value]="'bounce'">
{{ 'widgets.gauge.animation-bounce' | translate }} {{ 'widgets.gauge.animation-bounce' | translate }}
</mat-option> </mat-option>
<mat-option [value]="'elastic'"> <mat-option [value]="'elastic'">
{{ 'widgets.gauge.animation-elastic' | translate }} {{ 'widgets.gauge.animation-elastic' | translate }}
</mat-option> </mat-option>
<mat-option [value]="'dequad'"> <mat-option [value]="'dequad'">
{{ 'widgets.gauge.animation-dequad' | translate }} {{ 'widgets.gauge.animation-dequad' | translate }}
</mat-option> </mat-option>
<mat-option [value]="'dequint'"> <mat-option [value]="'dequint'">
{{ 'widgets.gauge.animation-dequint' | translate }} {{ 'widgets.gauge.animation-dequint' | translate }}
</mat-option> </mat-option>
<mat-option [value]="'decycle'"> <mat-option [value]="'decycle'">
{{ 'widgets.gauge.animation-decycle' | translate }} {{ 'widgets.gauge.animation-decycle' | translate }}
</mat-option> </mat-option>
<mat-option [value]="'debounce'"> <mat-option [value]="'debounce'">
{{ 'widgets.gauge.animation-debounce' | translate }} {{ 'widgets.gauge.animation-debounce' | translate }}
</mat-option> </mat-option>
<mat-option [value]="'delastic'"> <mat-option [value]="'delastic'">
{{ 'widgets.gauge.animation-delastic' | translate }} {{ 'widgets.gauge.animation-delastic' | translate }}
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</section> </div>
</div>
</ng-template> </ng-template>
</mat-expansion-panel> </mat-expansion-panel>
</fieldset> </div>
</section> </ng-container>
<ng-template #radialGauge let-settingsForm="settingsForm"> <ng-template #radialGauge let-settingsForm="settingsForm">
<fieldset class="fields-group" [formGroup]="settingsForm"> <div class="tb-form-panel" [formGroup]="settingsForm">
<legend class="group-title" translate>widgets.gauge.radial-gauge-settings</legend> <div class="tb-form-panel-title" translate>widgets.gauge.radial-gauge-settings</div>
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center"> <div class="tb-form-row space-between">
<mat-form-field fxFlex class="mat-block"> <div translate>widgets.gauge.start-ticks-angle</div>
<mat-label translate>widgets.gauge.start-ticks-angle</mat-label> <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput type="number" min="0" max="360" formControlName="startAngle"> <input matInput formControlName="startAngle" type="number" min="0" max="360" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
</div>
<div class="tb-form-row space-between">
<div translate>widgets.gauge.ticks-angle</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput formControlName="ticksAngle" type="number" min="0" max="360" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex class="mat-block"> </div>
<mat-label translate>widgets.gauge.ticks-angle</mat-label> <div class="tb-form-row space-between">
<input matInput type="number" min="0" max="360" formControlName="ticksAngle"> <div translate>widgets.gauge.needle-circle-size</div>
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput formControlName="needleCircleSize" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field> </mat-form-field>
</section> </div>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gauge.needle-circle-size</mat-label> <ng-container *ngTemplateOutlet="arrowScaleDefaultColor"></ng-container>
<input matInput type="number" min="0" formControlName="needleCircleSize"> </div>
</mat-form-field>
</fieldset>
</ng-template> </ng-template>
<ng-template #linearGauge let-settingsForm="settingsForm"> <ng-template #linearGauge let-settingsForm="settingsForm">
<fieldset class="fields-group" [formGroup]="settingsForm"> <div class="tb-form-panel" [formGroup]="settingsForm">
<legend class="group-title" translate>widgets.gauge.linear-gauge-settings</legend> <div class="tb-form-panel-title" translate>widgets.gauge.linear-gauge-settings</div>
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px"> <div class="tb-form-row space-between">
<mat-form-field fxFlex class="mat-block"> <div translate>widgets.gauge.bar-stroke</div>
<mat-label translate>widgets.gauge.bar-stroke-width</mat-label> <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<input matInput type="number" min="0" formControlName="barStrokeWidth"> <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
</mat-form-field> <input matInput type="number" min="0" formControlName="barStrokeWidth" placeholder="{{ 'widget-config.set' | translate }}">
<tb-color-input fxFlex </mat-form-field>
formControlName="colorBarStroke" <tb-color-input asBoxInput
icon="format_color_fill" colorClearButton
label="{{ 'widgets.gauge.bar-stroke-color' | translate }}" openOnInput colorClearButton> formControlName="colorBar">
</tb-color-input> </tb-color-input>
</section> </div>
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px"> </div>
<tb-color-input fxFlex
formControlName="colorBar" <div class="tb-form-row space-between">
icon="format_color_fill" <div translate>widgets.gauge.bar-background-color</div>
label="{{ 'widgets.gauge.bar-background-color' | translate }}" openOnInput colorClearButton> <tb-color-input asBoxInput
colorClearButton
formControlName="colorBar">
</tb-color-input> </tb-color-input>
<tb-color-input fxFlex </div>
formControlName="colorBarEnd" <div class="tb-form-row space-between">
icon="format_color_fill" <div translate>widgets.gauge.bar-background-color-end</div>
label="{{ 'widgets.gauge.bar-background-color-end' | translate }}" openOnInput colorClearButton> <tb-color-input asBoxInput
colorClearButton
formControlName="colorBarEnd">
</tb-color-input> </tb-color-input>
</section> </div>
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
<tb-color-input fxFlex <div class="tb-form-row space-between">
formControlName="colorBarProgress" <div translate>widgets.gauge.progress-bar-color-start</div>
icon="format_color_fill" <tb-color-input asBoxInput
label="{{ 'widgets.gauge.progress-bar-color' | translate }}" openOnInput colorClearButton> colorClearButton
formControlName="colorBarProgress">
</tb-color-input> </tb-color-input>
<tb-color-input fxFlex </div>
formControlName="colorBarProgressEnd" <div class="tb-form-row space-between">
icon="format_color_fill" <div translate>widgets.gauge.progress-bar-color-end</div>
label="{{ 'widgets.gauge.progress-bar-color-end' | translate }}" openOnInput colorClearButton> <tb-color-input asBoxInput
colorClearButton
formControlName="colorBarProgressEnd">
</tb-color-input> </tb-color-input>
</section> </div>
</fieldset> <ng-container *ngTemplateOutlet="arrowScaleDefaultColor"></ng-container>
</div>
</ng-template>
<ng-template #arrowScaleDefaultColor>
<div class="tb-form-row space-between" [formGroup]="analogueGaugeWidgetSettingsForm">
<div>{{ 'widgets.gauge.arrow-and-scale-color' | translate }}</div>
<tb-color-input asBoxInput
formControlName="defaultColor">
</tb-color-input>
</div>
</ng-template> </ng-template>

69
ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.ts
View File

@ -15,11 +15,10 @@
/// ///
import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
import { AbstractControl, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state'; import { AppState } from '@core/core.state';
import { GaugeHighlight } from '@home/components/widget/lib/settings/gauge/gauge-highlight.component'; import { GaugeHighlight } from '@home/components/widget/lib/settings/gauge/gauge-highlight.component';
import { CdkDragDrop } from '@angular/cdk/drag-drop';
export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponent { export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponent {
@ -119,19 +118,24 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen
minorTicks: [settings.majorTicksCount, [Validators.min(0)]], minorTicks: [settings.majorTicksCount, [Validators.min(0)]],
colorMinorTicks: [settings.colorMinorTicks, []], colorMinorTicks: [settings.colorMinorTicks, []],
numbersFont: [settings.numbersFont, []], numbersFont: [settings.numbersFont, []],
numbersColor: [settings.numbersFont.color, []],
// Unit title settings // Unit title settings
showUnitTitle: [settings.showUnitTitle, []], showUnitTitle: [settings.showUnitTitle, []],
unitTitle: [settings.unitTitle, []], unitTitle: [settings.unitTitle, []],
titleFont: [settings.titleFont, []], titleFont: [settings.titleFont, []],
titleColor: [settings.titleFont.color, []],
// Units settings // Units settings
unitsFont: [settings.unitsFont, []], unitsFont: [settings.unitsFont, []],
unitsColor: [settings.unitsFont.color, []],
// Value box settings // Value box settings
valueBox: [settings.valueBox, []], valueBox: [settings.valueBox, []],
valueInt: [settings.valueInt, [Validators.min(0)]], valueInt: [settings.valueInt, [Validators.min(0)]],
valueFont: [settings.valueFont, []], valueFont: [settings.valueFont, []],
valueColor: [settings.valueFont.color, []],
valueColorShadow: [settings.valueFont.shadowColor, []],
colorValueBoxRect: [settings.colorValueBoxRect, []], colorValueBoxRect: [settings.colorValueBoxRect, []],
colorValueBoxRectEnd: [settings.colorValueBoxRectEnd, []], colorValueBoxRectEnd: [settings.colorValueBoxRectEnd, []],
colorValueBoxBackground: [settings.colorValueBoxBackground, []], colorValueBoxBackground: [settings.colorValueBoxBackground, []],
@ -149,7 +153,7 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen
// Highlights settings // Highlights settings
highlightsWidth: [settings.highlightsWidth, [Validators.min(0)]], highlightsWidth: [settings.highlightsWidth, [Validators.min(0)]],
highlights: this.prepareHighlightsFormArray(settings.highlights), highlights: this.prepareHighlights(settings.highlights),
// Animation settings // Animation settings
animation: [settings.animation, []], animation: [settings.animation, []],
@ -170,13 +174,16 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen
if (showUnitTitle) { if (showUnitTitle) {
this.analogueGaugeWidgetSettingsForm.get('unitTitle').enable(); this.analogueGaugeWidgetSettingsForm.get('unitTitle').enable();
this.analogueGaugeWidgetSettingsForm.get('titleFont').enable(); this.analogueGaugeWidgetSettingsForm.get('titleFont').enable();
this.analogueGaugeWidgetSettingsForm.get('titleColor').enable();
} else { } else {
this.analogueGaugeWidgetSettingsForm.get('unitTitle').disable(); this.analogueGaugeWidgetSettingsForm.get('unitTitle').disable();
this.analogueGaugeWidgetSettingsForm.get('titleFont').disable(); this.analogueGaugeWidgetSettingsForm.get('titleFont').disable();
this.analogueGaugeWidgetSettingsForm.get('titleColor').disable();
} }
if (valueBox) { if (valueBox) {
this.analogueGaugeWidgetSettingsForm.get('valueInt').enable(); this.analogueGaugeWidgetSettingsForm.get('valueInt').enable();
this.analogueGaugeWidgetSettingsForm.get('valueFont').enable(); this.analogueGaugeWidgetSettingsForm.get('valueFont').enable();
this.analogueGaugeWidgetSettingsForm.get('valueColor').enable();
this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRect').enable(); this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRect').enable();
this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRectEnd').enable(); this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRectEnd').enable();
this.analogueGaugeWidgetSettingsForm.get('colorValueBoxBackground').enable(); this.analogueGaugeWidgetSettingsForm.get('colorValueBoxBackground').enable();
@ -184,6 +191,7 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen
} else { } else {
this.analogueGaugeWidgetSettingsForm.get('valueInt').disable(); this.analogueGaugeWidgetSettingsForm.get('valueInt').disable();
this.analogueGaugeWidgetSettingsForm.get('valueFont').disable(); this.analogueGaugeWidgetSettingsForm.get('valueFont').disable();
this.analogueGaugeWidgetSettingsForm.get('valueColor').disable();
this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRect').disable(); this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRect').disable();
this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRectEnd').disable(); this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRectEnd').disable();
this.analogueGaugeWidgetSettingsForm.get('colorValueBoxBackground').disable(); this.analogueGaugeWidgetSettingsForm.get('colorValueBoxBackground').disable();
@ -198,8 +206,10 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen
} }
this.analogueGaugeWidgetSettingsForm.get('unitTitle').updateValueAndValidity({emitEvent}); this.analogueGaugeWidgetSettingsForm.get('unitTitle').updateValueAndValidity({emitEvent});
this.analogueGaugeWidgetSettingsForm.get('titleFont').updateValueAndValidity({emitEvent}); this.analogueGaugeWidgetSettingsForm.get('titleFont').updateValueAndValidity({emitEvent});
this.analogueGaugeWidgetSettingsForm.get('titleColor').updateValueAndValidity({emitEvent});
this.analogueGaugeWidgetSettingsForm.get('valueInt').updateValueAndValidity({emitEvent}); this.analogueGaugeWidgetSettingsForm.get('valueInt').updateValueAndValidity({emitEvent});
this.analogueGaugeWidgetSettingsForm.get('valueFont').updateValueAndValidity({emitEvent}); this.analogueGaugeWidgetSettingsForm.get('valueFont').updateValueAndValidity({emitEvent});
this.analogueGaugeWidgetSettingsForm.get('valueColor').updateValueAndValidity({emitEvent});
this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRect').updateValueAndValidity({emitEvent}); this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRect').updateValueAndValidity({emitEvent});
this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRectEnd').updateValueAndValidity({emitEvent}); this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRectEnd').updateValueAndValidity({emitEvent});
this.analogueGaugeWidgetSettingsForm.get('colorValueBoxBackground').updateValueAndValidity({emitEvent}); this.analogueGaugeWidgetSettingsForm.get('colorValueBoxBackground').updateValueAndValidity({emitEvent});
@ -208,50 +218,21 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen
this.analogueGaugeWidgetSettingsForm.get('animationRule').updateValueAndValidity({emitEvent}); this.analogueGaugeWidgetSettingsForm.get('animationRule').updateValueAndValidity({emitEvent});
} }
protected doUpdateSettings(settingsForm: UntypedFormGroup, settings: WidgetSettings) { protected prepareOutputSettings(settings) {
settingsForm.setControl('highlights', this.prepareHighlightsFormArray(settings.highlights), {emitEvent: false}); settings.numbersFont.color = this.analogueGaugeWidgetSettingsForm.get('numbersColor').value;
} if (settings.titleFont) {
settings.titleFont.color = this.analogueGaugeWidgetSettingsForm.get('titleColor').value;
private prepareHighlightsFormArray(highlights: GaugeHighlight[] | undefined): UntypedFormArray {
const highlightsControls: Array<AbstractControl> = [];
if (highlights) {
highlights.forEach((highlight) => {
highlightsControls.push(this.fb.control(highlight, [Validators.required]));
});
} }
return this.fb.array(highlightsControls); settings.unitsFont.color = this.analogueGaugeWidgetSettingsForm.get('unitsColor').value;
} if (settings.valueFont) {
settings.valueFont.color = this.analogueGaugeWidgetSettingsForm.get('valueColor').value;
highlightsFormArray(): UntypedFormArray { settings.valueFont.shadowColor = this.analogueGaugeWidgetSettingsForm.get('valueColorShadow').value;
return this.analogueGaugeWidgetSettingsForm.get('highlights') as UntypedFormArray; }
} return settings;
public trackByHighlightControl(index: number, highlightControl: AbstractControl): any {
return highlightControl;
}
public removeHighlight(index: number) {
(this.analogueGaugeWidgetSettingsForm.get('highlights') as UntypedFormArray).removeAt(index);
}
public addHighlight() {
const highlight: GaugeHighlight = {
from: null,
to: null,
color: null
};
const highlightsArray = this.analogueGaugeWidgetSettingsForm.get('highlights') as UntypedFormArray;
const highlightControl = this.fb.control(highlight, [Validators.required]);
(highlightControl as any).new = true;
highlightsArray.push(highlightControl);
this.analogueGaugeWidgetSettingsForm.updateValueAndValidity();
} }
highlightDrop(event: CdkDragDrop<string[]>) { private prepareHighlights(highlights: GaugeHighlight[] | undefined) {
const highlightsArray = this.analogueGaugeWidgetSettingsForm.get('highlights') as UntypedFormArray; return {type: 'range', rangeList: highlights};
const highlight = highlightsArray.at(event.previousIndex);
highlightsArray.removeAt(event.previousIndex);
highlightsArray.insert(event.currentIndex, highlight);
} }
} }

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

@ -5362,8 +5362,10 @@
"max-value-short": "max", "max-value-short": "max",
"start-ticks-angle": "Start ticks angle", "start-ticks-angle": "Start ticks angle",
"ticks-angle": "Ticks angle", "ticks-angle": "Ticks angle",
"major-ticks": "Major ticks",
"major-ticks-count": "Major ticks count", "major-ticks-count": "Major ticks count",
"major-ticks-color": "Major ticks color", "major-ticks-color": "Major ticks color",
"minor-ticks": "Minor ticks",
"minor-ticks-count": "Minor ticks count", "minor-ticks-count": "Minor ticks count",
"minor-ticks-color": "Minor ticks color", "minor-ticks-color": "Minor ticks color",
"tick-numbers-font": "Tick numbers font", "tick-numbers-font": "Tick numbers font",
@ -5375,21 +5377,29 @@
"units-font": "Units text font", "units-font": "Units text font",
"value-box-settings": "Value box settings", "value-box-settings": "Value box settings",
"show-value-box": "Show value box", "show-value-box": "Show value box",
"value-box": "Value box",
"value-int": "Digits count for integer part of value", "value-int": "Digits count for integer part of value",
"value-text": "Value text",
"value-text-shadow": "Value text shadow",
"value-font": "Value text font", "value-font": "Value text font",
"rect-stroke-color-start": "Rectangle stroke color - start gradient",
"rect-stroke-color-end": "Rectangle stroke color - end gradient",
"background-color": "Background color",
"shadow-color": "Shadow color",
"value-box-rect-stroke-color": "Value box rectangle stroke color", "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-rect-stroke-color-end": "Value box rectangle stroke color - end gradient",
"value-box-background-color": "Value box background color", "value-box-background-color": "Value box background color",
"value-box-shadow-color": "Value box shadow color", "value-box-shadow-color": "Value box shadow color",
"plate-settings": "Plate settings", "plate-settings": "Plate settings",
"show-plate-border": "Show plate border", "show-plate-border": "Plate border",
"plate-color": "Plate color", "plate-color": "Plate color",
"needle-settings": "Needle settings", "needle-settings": "Needle settings",
"needle-circle-size": "Needle circle size", "needle-circle-size": "Needle circle size",
"needle-color": "Needle color", "needle-color": "Needle color",
"needle-color-start": "Needle color - start gradient",
"needle-color-end": "Needle color - end gradient", "needle-color-end": "Needle color - end gradient",
"needle-color-shadow-up": "Upper half of the needle shadow color", "needle-color-shadow-up": "Upper half of the needle shadow color",
"needle-color-shadow-down": "Drop shadow needle color", "needle-color-shadow-down": "Drop shadow",
"highlights-settings": "Highlights settings", "highlights-settings": "Highlights settings",
"highlights-width": "Highlights width", "highlights-width": "Highlights width",
"highlights": "Highlights", "highlights": "Highlights",
@ -5399,7 +5409,8 @@
"no-highlights": "No highlights configured", "no-highlights": "No highlights configured",
"add-highlight": "Add highlight", "add-highlight": "Add highlight",
"animation-settings": "Animation settings", "animation-settings": "Animation settings",
"enable-animation": "Enable animation", "enable-animation": "Animation",
"animation-duration-rule": "Animation duration and rule",
"animation-duration": "Animation duration", "animation-duration": "Animation duration",
"animation-rule": "Animation rule", "animation-rule": "Animation rule",
"animation-linear": "Linear", "animation-linear": "Linear",
@ -5414,9 +5425,10 @@
"animation-debounce": "Debounce", "animation-debounce": "Debounce",
"animation-delastic": "Delastic", "animation-delastic": "Delastic",
"linear-gauge-settings": "Linear gauge settings", "linear-gauge-settings": "Linear gauge settings",
"bar-stroke": "Bar stroke",
"bar-stroke-width": "Bar stroke width", "bar-stroke-width": "Bar stroke width",
"bar-stroke-color": "Bar stroke color", "bar-stroke-color": "Bar stroke color",
"bar-background-color": "Gauge bar background color", "bar-background-color": "Bar background color - start gradient",
"bar-background-color-end": "Bar background color - end gradient", "bar-background-color-end": "Bar background color - end gradient",
"progress-bar-color": "Progress bar color", "progress-bar-color": "Progress bar color",
"progress-bar": "Progress bar", "progress-bar": "Progress bar",
@ -5427,6 +5439,7 @@
"major-ticks-font": "Major ticks font", "major-ticks-font": "Major ticks font",
"border-color": "Border color", "border-color": "Border color",
"border-width": "Border width", "border-width": "Border width",
"needle-circle": "Needle circle",
"needle-circle-color": "Needle circle color", "needle-circle-color": "Needle circle color",
"animation-target": "Animation target", "animation-target": "Animation target",
"animation-target-needle": "Needle", "animation-target-needle": "Needle",
@ -5476,6 +5489,8 @@
"value": "Value", "value": "Value",
"ticks": "Ticks", "ticks": "Ticks",
"arrow-and-scale-color": "Arrow and scale default color", "arrow-and-scale-color": "Arrow and scale default color",
"scale-settings": "Scale settings",
"scale": "Scale",
"scale-color": "Scale colors", "scale-color": "Scale colors",
"compass-appearance": "Compass appearance", "compass-appearance": "Compass appearance",
"labels": "Labels", "labels": "Labels",

Write Preview
Loading…
Cancel
Save