Igor Kulikov
2 years ago
31 changed files with 1143 additions and 20 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,177 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2024 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. |
|||
|
|||
--> |
|||
<ng-container [formGroup]="toggleButtonWidgetConfigForm"> |
|||
<tb-target-device formControlName="targetDevice"></tb-target-device> |
|||
<div class="tb-form-panel"> |
|||
<div class="tb-form-panel-title" translate>widgets.toggle-button.behavior</div> |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}" translate>widgets.rpc-state.initial-state</div> |
|||
<tb-get-value-action-settings fxFlex |
|||
panelTitle="widgets.rpc-state.initial-state" |
|||
[valueType]="valueType.BOOLEAN" |
|||
trueLabel="widgets.toggle-button.checked" |
|||
falseLabel="widgets.toggle-button.unchecked" |
|||
stateLabel="widgets.toggle-button.checked" |
|||
[aliasController]="aliasController" |
|||
[targetDevice]="targetDevice" |
|||
[widgetType]="widgetType" |
|||
formControlName="initialState"></tb-get-value-action-settings> |
|||
</div> |
|||
<div class="tb-form-row space-between"> |
|||
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.toggle-button.check-hint' | translate}}" translate>widgets.toggle-button.check</div> |
|||
<tb-set-value-action-settings fxFlex |
|||
panelTitle="widgets.toggle-button.check" |
|||
[aliasController]="aliasController" |
|||
[targetDevice]="targetDevice" |
|||
[widgetType]="widgetType" |
|||
formControlName="checkState"></tb-set-value-action-settings> |
|||
</div> |
|||
<div class="tb-form-row space-between"> |
|||
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.toggle-button.uncheck-hint' | translate}}" translate>widgets.toggle-button.uncheck</div> |
|||
<tb-set-value-action-settings fxFlex |
|||
panelTitle="widgets.toggle-button.uncheck" |
|||
[aliasController]="aliasController" |
|||
[targetDevice]="targetDevice" |
|||
[widgetType]="widgetType" |
|||
formControlName="uncheckState"></tb-set-value-action-settings> |
|||
</div> |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div> |
|||
<tb-get-value-action-settings fxFlex |
|||
panelTitle="widgets.rpc-state.disabled-state" |
|||
[valueType]="valueType.BOOLEAN" |
|||
stateLabel="widgets.rpc-state.disabled" |
|||
[aliasController]="aliasController" |
|||
[targetDevice]="targetDevice" |
|||
[widgetType]="widgetType" |
|||
formControlName="disabledState"></tb-get-value-action-settings> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-panel"> |
|||
<div class="tb-form-panel-title" translate>widget-config.appearance</div> |
|||
<div class="tb-form-panel stroked tb-slide-toggle"> |
|||
<mat-expansion-panel class="tb-settings" [expanded]="!toggleButtonWidgetConfigForm.get('autoScale').value" disabled> |
|||
<mat-expansion-panel-header fxLayout="row wrap"> |
|||
<mat-panel-title> |
|||
<mat-slide-toggle class="mat-slide" formControlName="autoScale" (click)="$event.stopPropagation()" |
|||
fxLayoutAlign="center"> |
|||
{{ 'widgets.toggle-button.auto-scale' | translate }} |
|||
</mat-slide-toggle> |
|||
</mat-panel-title> |
|||
</mat-expansion-panel-header> |
|||
<ng-template matExpansionPanelContent> |
|||
<div class="tb-form-row"> |
|||
<mat-slide-toggle class="mat-slide" formControlName="horizontalFill"> |
|||
{{ 'widgets.toggle-button.horizontal-fill' | translate }} |
|||
</mat-slide-toggle> |
|||
</div> |
|||
<div class="tb-form-row"> |
|||
<mat-slide-toggle class="mat-slide" formControlName="verticalFill"> |
|||
{{ 'widgets.toggle-button.vertical-fill' | translate }} |
|||
</mat-slide-toggle> |
|||
</div> |
|||
</ng-template> |
|||
</mat-expansion-panel> |
|||
</div> |
|||
<div class="tb-form-row column-xs"> |
|||
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle"> |
|||
{{ 'widget-config.title' | translate }} |
|||
</mat-slide-toggle> |
|||
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|||
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic"> |
|||
<input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}"> |
|||
</mat-form-field> |
|||
<tb-font-settings formControlName="titleFont" |
|||
clearButton |
|||
[previewText]="toggleButtonWidgetConfigForm.get('title').value" |
|||
[initialPreviewStyle]="widgetConfig.config.titleStyle"> |
|||
</tb-font-settings> |
|||
<tb-color-input asBoxInput |
|||
colorClearButton |
|||
formControlName="titleColor"> |
|||
</tb-color-input> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-row column-xs"> |
|||
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon"> |
|||
{{ 'widget-config.card-icon' | translate }} |
|||
</mat-slide-toggle> |
|||
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|||
<mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic"> |
|||
<input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}"> |
|||
</mat-form-field> |
|||
<tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select> |
|||
<tb-material-icon-select asBoxInput |
|||
iconClearButton |
|||
[color]="toggleButtonWidgetConfigForm.get('iconColor').value" |
|||
formControlName="icon"> |
|||
</tb-material-icon-select> |
|||
<tb-color-input asBoxInput |
|||
colorClearButton |
|||
formControlName="iconColor"> |
|||
</tb-color-input> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-panel"> |
|||
<div fxLayout="row" fxLayoutAlign="space-between center"> |
|||
<div class="tb-form-panel-title" translate>widgets.toggle-button.button-appearance</div> |
|||
<tb-toggle-select [(ngModel)]="buttonAppearanceType" [ngModelOptions]="{standalone: true}"> |
|||
<tb-toggle-option value="checked">{{ 'widgets.toggle-button.checked' | translate }}</tb-toggle-option> |
|||
<tb-toggle-option value="unchecked">{{ 'widgets.toggle-button.unchecked' | translate }}</tb-toggle-option> |
|||
</tb-toggle-select> |
|||
</div> |
|||
<tb-widget-button-appearance |
|||
[fxShow]="buttonAppearanceType === 'checked'" |
|||
withBorderRadius |
|||
[withAutoScale]="false" |
|||
[autoScale]="toggleButtonWidgetConfigForm.get('autoScale').value" |
|||
formControlName="checkedAppearance"> |
|||
</tb-widget-button-appearance> |
|||
<tb-widget-button-appearance |
|||
[fxShow]="buttonAppearanceType === 'unchecked'" |
|||
withBorderRadius |
|||
[withAutoScale]="false" |
|||
[autoScale]="toggleButtonWidgetConfigForm.get('autoScale').value" |
|||
formControlName="uncheckedAppearance"> |
|||
</tb-widget-button-appearance> |
|||
</div> |
|||
<div class="tb-form-panel"> |
|||
<div class="tb-form-panel-title" translate>widget-config.card-appearance</div> |
|||
<div class="tb-form-row space-between"> |
|||
<div>{{ 'widgets.background.background' | translate }}</div> |
|||
<tb-background-settings formControlName="background"> |
|||
</tb-background-settings> |
|||
</div> |
|||
<div class="tb-form-row space-between column-lt-md"> |
|||
<div translate>widget-config.show-card-buttons</div> |
|||
<mat-chip-listbox multiple formControlName="cardButtons"> |
|||
<mat-chip-option value="fullscreen">{{ 'fullscreen.fullscreen' | translate }}</mat-chip-option> |
|||
</mat-chip-listbox> |
|||
</div> |
|||
<div class="tb-form-row space-between"> |
|||
<div>{{ 'widget-config.card-border-radius' | translate }}</div> |
|||
<mat-form-field appearance="outline" subscriptSizing="dynamic"> |
|||
<input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}"> |
|||
</mat-form-field> |
|||
</div> |
|||
</div> |
|||
<tb-widget-actions-panel |
|||
formControlName="actions"> |
|||
</tb-widget-actions-panel> |
|||
</ng-container> |
|||
@ -0,0 +1,192 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 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 { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models'; |
|||
import { WidgetConfigComponentData } from '@home/models/widget-component.models'; |
|||
import { TargetDevice, TargetDeviceType, WidgetConfig, } from '@shared/models/widget.models'; |
|||
import { WidgetConfigComponent } from '@home/components/widget/widget-config.component'; |
|||
import { isUndefined } from '@core/utils'; |
|||
import { ValueType } from '@shared/models/constants'; |
|||
import { cssSizeToStrSize, resolveCssSize } from '@shared/models/widget-settings.models'; |
|||
import { |
|||
toggleButtonDefaultSettings, |
|||
ToggleButtonWidgetSettings |
|||
} from '@home/components/widget/lib/button/toggle-button-widget.models'; |
|||
|
|||
type ButtonAppearanceType = 'checked' | 'unchecked'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-toggle-button-basic-config', |
|||
templateUrl: './toggle-button-basic-config.component.html', |
|||
styleUrls: ['../basic-config.scss'] |
|||
}) |
|||
export class ToggleButtonBasicConfigComponent extends BasicWidgetConfigComponent { |
|||
|
|||
get targetDevice(): TargetDevice { |
|||
return this.toggleButtonWidgetConfigForm.get('targetDevice').value; |
|||
} |
|||
|
|||
valueType = ValueType; |
|||
|
|||
buttonAppearanceType: ButtonAppearanceType = 'checked'; |
|||
|
|||
toggleButtonWidgetConfigForm: UntypedFormGroup; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
protected widgetConfigComponent: WidgetConfigComponent, |
|||
private fb: UntypedFormBuilder) { |
|||
super(store, widgetConfigComponent); |
|||
} |
|||
|
|||
protected configForm(): UntypedFormGroup { |
|||
return this.toggleButtonWidgetConfigForm; |
|||
} |
|||
|
|||
protected onConfigSet(configData: WidgetConfigComponentData) { |
|||
const settings: ToggleButtonWidgetSettings = {...toggleButtonDefaultSettings, ...(configData.config.settings || {})}; |
|||
const iconSize = resolveCssSize(configData.config.iconSize); |
|||
this.toggleButtonWidgetConfigForm = this.fb.group({ |
|||
targetDevice: [configData.config.targetDevice, []], |
|||
|
|||
initialState: [settings.initialState, []], |
|||
checkState: [settings.checkState, []], |
|||
uncheckState: [settings.uncheckState, []], |
|||
disabledState: [settings.disabledState, []], |
|||
|
|||
showTitle: [configData.config.showTitle, []], |
|||
title: [configData.config.title, []], |
|||
titleFont: [configData.config.titleFont, []], |
|||
titleColor: [configData.config.titleColor, []], |
|||
|
|||
showIcon: [configData.config.showTitleIcon, []], |
|||
iconSize: [iconSize[0], [Validators.min(0)]], |
|||
iconSizeUnit: [iconSize[1], []], |
|||
icon: [configData.config.titleIcon, []], |
|||
iconColor: [configData.config.iconColor, []], |
|||
|
|||
autoScale: [settings.autoScale, []], |
|||
horizontalFill: [settings.horizontalFill, []], |
|||
verticalFill: [settings.verticalFill, []], |
|||
|
|||
checkedAppearance: [settings.checkedAppearance, []], |
|||
uncheckedAppearance: [settings.uncheckedAppearance, []], |
|||
|
|||
background: [settings.background, []], |
|||
|
|||
cardButtons: [this.getCardButtons(configData.config), []], |
|||
borderRadius: [configData.config.borderRadius, []], |
|||
|
|||
actions: [configData.config.actions || {}, []] |
|||
}); |
|||
} |
|||
|
|||
protected prepareOutputConfig(config: any): WidgetConfigComponentData { |
|||
this.widgetConfig.config.targetDevice = config.targetDevice; |
|||
|
|||
this.widgetConfig.config.showTitle = config.showTitle; |
|||
this.widgetConfig.config.title = config.title; |
|||
this.widgetConfig.config.titleFont = config.titleFont; |
|||
this.widgetConfig.config.titleColor = config.titleColor; |
|||
|
|||
this.widgetConfig.config.showTitleIcon = config.showIcon; |
|||
this.widgetConfig.config.iconSize = cssSizeToStrSize(config.iconSize, config.iconSizeUnit); |
|||
this.widgetConfig.config.titleIcon = config.icon; |
|||
this.widgetConfig.config.iconColor = config.iconColor; |
|||
|
|||
this.widgetConfig.config.settings = this.widgetConfig.config.settings || {}; |
|||
|
|||
this.widgetConfig.config.settings.initialState = config.initialState; |
|||
this.widgetConfig.config.settings.checkState = config.checkState; |
|||
this.widgetConfig.config.settings.uncheckState = config.uncheckState; |
|||
this.widgetConfig.config.settings.disabledState = config.disabledState; |
|||
|
|||
this.widgetConfig.config.settings.autoScale = config.autoScale; |
|||
this.widgetConfig.config.settings.horizontalFill = config.horizontalFill; |
|||
this.widgetConfig.config.settings.verticalFill = config.verticalFill; |
|||
|
|||
this.widgetConfig.config.settings.checkedAppearance = config.checkedAppearance; |
|||
this.widgetConfig.config.settings.uncheckedAppearance = config.uncheckedAppearance; |
|||
|
|||
this.widgetConfig.config.settings.background = config.background; |
|||
|
|||
this.setCardButtons(config.cardButtons, this.widgetConfig.config); |
|||
this.widgetConfig.config.borderRadius = config.borderRadius; |
|||
|
|||
this.widgetConfig.config.actions = config.actions; |
|||
return this.widgetConfig; |
|||
} |
|||
|
|||
protected validatorTriggers(): string[] { |
|||
return ['showTitle', 'showIcon', 'autoScale']; |
|||
} |
|||
|
|||
protected updateValidators(emitEvent: boolean, trigger?: string) { |
|||
const showTitle: boolean = this.toggleButtonWidgetConfigForm.get('showTitle').value; |
|||
const showIcon: boolean = this.toggleButtonWidgetConfigForm.get('showIcon').value; |
|||
const autoScale: boolean = this.toggleButtonWidgetConfigForm.get('autoScale').value; |
|||
if (showTitle) { |
|||
this.toggleButtonWidgetConfigForm.get('title').enable(); |
|||
this.toggleButtonWidgetConfigForm.get('titleFont').enable(); |
|||
this.toggleButtonWidgetConfigForm.get('titleColor').enable(); |
|||
this.toggleButtonWidgetConfigForm.get('showIcon').enable({emitEvent: false}); |
|||
if (showIcon) { |
|||
this.toggleButtonWidgetConfigForm.get('iconSize').enable(); |
|||
this.toggleButtonWidgetConfigForm.get('iconSizeUnit').enable(); |
|||
this.toggleButtonWidgetConfigForm.get('icon').enable(); |
|||
this.toggleButtonWidgetConfigForm.get('iconColor').enable(); |
|||
} else { |
|||
this.toggleButtonWidgetConfigForm.get('iconSize').disable(); |
|||
this.toggleButtonWidgetConfigForm.get('iconSizeUnit').disable(); |
|||
this.toggleButtonWidgetConfigForm.get('icon').disable(); |
|||
this.toggleButtonWidgetConfigForm.get('iconColor').disable(); |
|||
} |
|||
} else { |
|||
this.toggleButtonWidgetConfigForm.get('title').disable(); |
|||
this.toggleButtonWidgetConfigForm.get('titleFont').disable(); |
|||
this.toggleButtonWidgetConfigForm.get('titleColor').disable(); |
|||
this.toggleButtonWidgetConfigForm.get('showIcon').disable({emitEvent: false}); |
|||
this.toggleButtonWidgetConfigForm.get('iconSize').disable(); |
|||
this.toggleButtonWidgetConfigForm.get('iconSizeUnit').disable(); |
|||
this.toggleButtonWidgetConfigForm.get('icon').disable(); |
|||
this.toggleButtonWidgetConfigForm.get('iconColor').disable(); |
|||
} |
|||
if (autoScale) { |
|||
this.toggleButtonWidgetConfigForm.get('horizontalFill').disable(); |
|||
this.toggleButtonWidgetConfigForm.get('verticalFill').disable(); |
|||
} else { |
|||
this.toggleButtonWidgetConfigForm.get('horizontalFill').enable(); |
|||
this.toggleButtonWidgetConfigForm.get('verticalFill').enable(); |
|||
} |
|||
} |
|||
|
|||
private getCardButtons(config: WidgetConfig): string[] { |
|||
const buttons: string[] = []; |
|||
if (isUndefined(config.enableFullscreen) || config.enableFullscreen) { |
|||
buttons.push('fullscreen'); |
|||
} |
|||
return buttons; |
|||
} |
|||
|
|||
private setCardButtons(buttons: string[], config: WidgetConfig) { |
|||
config.enableFullscreen = buttons.includes('fullscreen'); |
|||
} |
|||
|
|||
protected readonly TargetDeviceType = TargetDeviceType; |
|||
} |
|||
@ -0,0 +1,34 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2024 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. |
|||
|
|||
--> |
|||
<div class="tb-toggle-button-panel" [style]="backgroundStyle$ | async"> |
|||
<div class="tb-toggle-button-overlay" [style]="overlayStyle"></div> |
|||
<ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container> |
|||
<div class="tb-toggle-button-container" |
|||
[class.auto-scale]="autoScale" |
|||
[class.horizontal-fill]="horizontalFill" |
|||
[class.vertical-fill]="verticalFill"> |
|||
<tb-widget-button |
|||
[appearance]="appearance" |
|||
[autoScale]="autoScale" |
|||
[disabled]="disabled || (loading$ | async)" |
|||
[ctx]="ctx" |
|||
(clicked)="onClick($event)"> |
|||
</tb-widget-button> |
|||
</div> |
|||
<mat-progress-bar class="tb-action-widget-progress" style="height: 4px;" color="accent" mode="indeterminate" *ngIf="loading$ | async"></mat-progress-bar> |
|||
</div> |
|||
@ -0,0 +1,70 @@ |
|||
/** |
|||
* Copyright © 2016-2024 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-toggle-button-panel { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: relative; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 8px; |
|||
padding: 20px 24px 24px 24px; |
|||
|
|||
> div:not(.tb-toggle-button-overlay) { |
|||
z-index: 1; |
|||
} |
|||
|
|||
.tb-toggle-button-overlay { |
|||
position: absolute; |
|||
top: 12px; |
|||
left: 12px; |
|||
bottom: 12px; |
|||
right: 12px; |
|||
} |
|||
|
|||
div.tb-widget-title { |
|||
padding: 0; |
|||
} |
|||
|
|||
.tb-toggle-button-container { |
|||
flex: 1; |
|||
min-width: 0; |
|||
min-height: 0; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
&.auto-scale { |
|||
tb-widget-button { |
|||
flex: 1; |
|||
min-width: 0; |
|||
min-height: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
&.horizontal-fill { |
|||
tb-widget-button { |
|||
width: 100%; |
|||
} |
|||
} |
|||
&.vertical-fill { |
|||
tb-widget-button { |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,142 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 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, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; |
|||
import { BasicActionWidgetComponent, ValueSetter } from '@home/components/widget/lib/action/action-widget.models'; |
|||
import { ImagePipe } from '@shared/pipe/image.pipe'; |
|||
import { DomSanitizer } from '@angular/platform-browser'; |
|||
import { ValueType } from '@shared/models/constants'; |
|||
import { WidgetButtonAppearance } from '@shared/components/button/widget-button.models'; |
|||
import { |
|||
toggleButtonDefaultSettings, |
|||
ToggleButtonWidgetSettings |
|||
} from '@home/components/widget/lib/button/toggle-button-widget.models'; |
|||
import { Observable } from 'rxjs'; |
|||
import { backgroundStyle, ComponentStyle, overlayStyle } from '@shared/models/widget-settings.models'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-toggle-button-widget', |
|||
templateUrl: './toggle-button-widget.component.html', |
|||
styleUrls: ['../action/action-widget.scss', './toggle-button-widget.component.scss'], |
|||
encapsulation: ViewEncapsulation.None |
|||
}) |
|||
export class ToggleButtonWidgetComponent extends |
|||
BasicActionWidgetComponent implements OnInit, AfterViewInit, OnDestroy { |
|||
|
|||
settings: ToggleButtonWidgetSettings; |
|||
|
|||
backgroundStyle$: Observable<ComponentStyle>; |
|||
overlayStyle: ComponentStyle = {}; |
|||
|
|||
value = false; |
|||
disabled = false; |
|||
|
|||
autoScale: boolean; |
|||
horizontalFill: boolean; |
|||
verticalFill: boolean; |
|||
appearance: WidgetButtonAppearance; |
|||
|
|||
private checkValueSetter: ValueSetter<boolean>; |
|||
private uncheckValueSetter: ValueSetter<boolean>; |
|||
|
|||
constructor(protected imagePipe: ImagePipe, |
|||
protected sanitizer: DomSanitizer, |
|||
protected cd: ChangeDetectorRef) { |
|||
super(cd); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
super.ngOnInit(); |
|||
this.settings = {...toggleButtonDefaultSettings, ...this.ctx.settings}; |
|||
|
|||
this.autoScale = this.settings.autoScale; |
|||
this.horizontalFill = this.settings.horizontalFill; |
|||
this.verticalFill = this.settings.verticalFill; |
|||
|
|||
this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer); |
|||
this.overlayStyle = overlayStyle(this.settings.background.overlay); |
|||
|
|||
const getInitialStateSettings = |
|||
{...this.settings.initialState, actionLabel: this.ctx.translate.instant('widgets.rpc-state.initial-state')}; |
|||
this.createValueGetter(getInitialStateSettings, ValueType.BOOLEAN, { |
|||
next: (value) => this.onValue(value) |
|||
}); |
|||
|
|||
const disabledStateSettings = |
|||
{...this.settings.disabledState, actionLabel: this.ctx.translate.instant('widgets.button-state.disabled-state')}; |
|||
this.createValueGetter(disabledStateSettings, ValueType.BOOLEAN, { |
|||
next: (value) => this.onDisabled(value) |
|||
}); |
|||
|
|||
const checkStateSettings = {...this.settings.checkState, |
|||
actionLabel: this.ctx.translate.instant('widgets.toggle-button.check')}; |
|||
this.checkValueSetter = this.createValueSetter(checkStateSettings); |
|||
|
|||
const uncheckStateSettings = {...this.settings.uncheckState, |
|||
actionLabel: this.ctx.translate.instant('widgets.toggle-button.uncheck')}; |
|||
this.uncheckValueSetter = this.createValueSetter(uncheckStateSettings); |
|||
|
|||
this.appearance = this.value ? this.settings.checkedAppearance : this.settings.uncheckedAppearance; |
|||
} |
|||
|
|||
ngAfterViewInit(): void { |
|||
super.ngAfterViewInit(); |
|||
} |
|||
|
|||
ngOnDestroy() { |
|||
super.ngOnDestroy(); |
|||
} |
|||
|
|||
public onInit() { |
|||
super.onInit(); |
|||
const borderRadius = this.ctx.$widgetElement.css('borderRadius'); |
|||
this.overlayStyle = {...this.overlayStyle, ...{borderRadius}}; |
|||
this.cd.detectChanges(); |
|||
} |
|||
|
|||
private onValue(value: boolean): void { |
|||
const newValue = !!value; |
|||
if (this.value !== newValue) { |
|||
this.value = newValue; |
|||
this.appearance = this.value ? this.settings.checkedAppearance : this.settings.uncheckedAppearance; |
|||
this.cd.markForCheck(); |
|||
} |
|||
} |
|||
|
|||
private onDisabled(value: boolean): void { |
|||
const newDisabled = !!value; |
|||
if (this.disabled !== newDisabled) { |
|||
this.disabled = newDisabled; |
|||
this.cd.markForCheck(); |
|||
} |
|||
} |
|||
|
|||
public onClick(_$event: MouseEvent) { |
|||
if (!this.ctx.isEdit && !this.ctx.isPreview) { |
|||
this.onValue(!this.value); |
|||
const targetValue = this.value; |
|||
const targetSetter = targetValue ? this.checkValueSetter : this.uncheckValueSetter; |
|||
this.updateValue(targetSetter, targetValue, { |
|||
next: () => { |
|||
this.onValue(targetValue); |
|||
}, |
|||
error: () => { |
|||
this.onValue(!targetValue); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,143 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 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 { |
|||
WidgetButtonAppearance, |
|||
widgetButtonDefaultAppearance, |
|||
WidgetButtonType |
|||
} from '@shared/components/button/widget-button.models'; |
|||
import { |
|||
DataToValueType, |
|||
GetValueAction, |
|||
GetValueSettings, |
|||
SetValueAction, |
|||
SetValueSettings, |
|||
ValueToDataType |
|||
} from '@shared/models/action-widget-settings.models'; |
|||
import { BackgroundSettings, BackgroundType } from '@shared/models/widget-settings.models'; |
|||
import { AttributeScope } from '@shared/models/telemetry/telemetry.models'; |
|||
|
|||
export interface ToggleButtonWidgetSettings { |
|||
initialState: GetValueSettings<boolean>; |
|||
disabledState: GetValueSettings<boolean>; |
|||
checkState: SetValueSettings; |
|||
uncheckState: SetValueSettings; |
|||
autoScale: boolean; |
|||
horizontalFill: boolean; |
|||
verticalFill: boolean; |
|||
checkedAppearance: WidgetButtonAppearance; |
|||
uncheckedAppearance: WidgetButtonAppearance; |
|||
background: BackgroundSettings; |
|||
} |
|||
|
|||
export const toggleButtonDefaultSettings: ToggleButtonWidgetSettings = { |
|||
initialState: { |
|||
action: GetValueAction.EXECUTE_RPC, |
|||
defaultValue: false, |
|||
executeRpc: { |
|||
method: 'getState', |
|||
requestTimeout: 5000, |
|||
requestPersistent: false, |
|||
persistentPollingInterval: 1000 |
|||
}, |
|||
getAttribute: { |
|||
key: 'state', |
|||
scope: null |
|||
}, |
|||
getTimeSeries: { |
|||
key: 'state' |
|||
}, |
|||
dataToValue: { |
|||
type: DataToValueType.NONE, |
|||
compareToValue: true, |
|||
dataToValueFunction: '/* Should return boolean value */\nreturn data;' |
|||
} |
|||
}, |
|||
disabledState: { |
|||
action: GetValueAction.DO_NOTHING, |
|||
defaultValue: false, |
|||
getAttribute: { |
|||
key: 'state', |
|||
scope: null |
|||
}, |
|||
getTimeSeries: { |
|||
key: 'state' |
|||
}, |
|||
dataToValue: { |
|||
type: DataToValueType.NONE, |
|||
compareToValue: true, |
|||
dataToValueFunction: '/* Should return boolean value */\nreturn data;' |
|||
} |
|||
}, |
|||
checkState: { |
|||
action: SetValueAction.EXECUTE_RPC, |
|||
executeRpc: { |
|||
method: 'setState', |
|||
requestTimeout: 5000, |
|||
requestPersistent: false, |
|||
persistentPollingInterval: 1000 |
|||
}, |
|||
setAttribute: { |
|||
key: 'state', |
|||
scope: AttributeScope.SHARED_SCOPE |
|||
}, |
|||
putTimeSeries: { |
|||
key: 'state' |
|||
}, |
|||
valueToData: { |
|||
type: ValueToDataType.CONSTANT, |
|||
constantValue: true, |
|||
valueToDataFunction: '/* Convert input boolean value to RPC parameters or attribute/time-series value */\nreturn value;' |
|||
} |
|||
}, |
|||
uncheckState: { |
|||
action: SetValueAction.EXECUTE_RPC, |
|||
executeRpc: { |
|||
method: 'setState', |
|||
requestTimeout: 5000, |
|||
requestPersistent: false, |
|||
persistentPollingInterval: 1000 |
|||
}, |
|||
setAttribute: { |
|||
key: 'state', |
|||
scope: AttributeScope.SHARED_SCOPE |
|||
}, |
|||
putTimeSeries: { |
|||
key: 'state' |
|||
}, |
|||
valueToData: { |
|||
type: ValueToDataType.CONSTANT, |
|||
constantValue: false, |
|||
valueToDataFunction: '/* Convert input boolean value to RPC parameters or attribute/time-series value */ \n return value;' |
|||
} |
|||
}, |
|||
autoScale: true, |
|||
horizontalFill: true, |
|||
verticalFill: false, |
|||
checkedAppearance: {...widgetButtonDefaultAppearance, |
|||
type: WidgetButtonType.outlined, mainColor: '#198038', label: 'Opened', icon: 'mdi:lock-open-variant', borderRadius: '4px'}, |
|||
uncheckedAppearance: {...widgetButtonDefaultAppearance, |
|||
type: WidgetButtonType.filled, mainColor: '#D12730', label: 'Closed', icon: 'lock', borderRadius: '4px'}, |
|||
background: { |
|||
type: BackgroundType.color, |
|||
color: '#fff', |
|||
overlay: { |
|||
enabled: false, |
|||
color: 'rgba(255,255,255,0.72)', |
|||
blur: 3 |
|||
} |
|||
} |
|||
}; |
|||
@ -0,0 +1,119 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2024 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. |
|||
|
|||
--> |
|||
<ng-container [formGroup]="toggleButtonWidgetSettingsForm"> |
|||
<div class="tb-form-panel"> |
|||
<div class="tb-form-panel-title" translate>widgets.toggle-button.behavior</div> |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}" translate>widgets.rpc-state.initial-state</div> |
|||
<tb-get-value-action-settings fxFlex |
|||
panelTitle="widgets.rpc-state.initial-state" |
|||
[valueType]="valueType.BOOLEAN" |
|||
trueLabel="widgets.toggle-button.checked" |
|||
falseLabel="widgets.toggle-button.unchecked" |
|||
stateLabel="widgets.toggle-button.checked" |
|||
[aliasController]="aliasController" |
|||
[targetDevice]="targetDevice" |
|||
[widgetType]="widgetType" |
|||
formControlName="initialState"></tb-get-value-action-settings> |
|||
</div> |
|||
<div class="tb-form-row space-between"> |
|||
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.toggle-button.check-hint' | translate}}" translate>widgets.toggle-button.check</div> |
|||
<tb-set-value-action-settings fxFlex |
|||
panelTitle="widgets.toggle-button.check" |
|||
[aliasController]="aliasController" |
|||
[targetDevice]="targetDevice" |
|||
[widgetType]="widgetType" |
|||
formControlName="checkState"></tb-set-value-action-settings> |
|||
</div> |
|||
<div class="tb-form-row space-between"> |
|||
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.toggle-button.uncheck-hint' | translate}}" translate>widgets.toggle-button.uncheck</div> |
|||
<tb-set-value-action-settings fxFlex |
|||
panelTitle="widgets.toggle-button.uncheck" |
|||
[aliasController]="aliasController" |
|||
[targetDevice]="targetDevice" |
|||
[widgetType]="widgetType" |
|||
formControlName="uncheckState"></tb-set-value-action-settings> |
|||
</div> |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div> |
|||
<tb-get-value-action-settings fxFlex |
|||
panelTitle="widgets.rpc-state.disabled-state" |
|||
[valueType]="valueType.BOOLEAN" |
|||
stateLabel="widgets.rpc-state.disabled" |
|||
[aliasController]="aliasController" |
|||
[targetDevice]="targetDevice" |
|||
[widgetType]="widgetType" |
|||
formControlName="disabledState"></tb-get-value-action-settings> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-panel"> |
|||
<div class="tb-form-panel-title" translate>widget-config.appearance</div> |
|||
<div class="tb-form-panel stroked tb-slide-toggle"> |
|||
<mat-expansion-panel class="tb-settings" [expanded]="!toggleButtonWidgetSettingsForm.get('autoScale').value" disabled> |
|||
<mat-expansion-panel-header fxLayout="row wrap"> |
|||
<mat-panel-title> |
|||
<mat-slide-toggle class="mat-slide" formControlName="autoScale" (click)="$event.stopPropagation()" |
|||
fxLayoutAlign="center"> |
|||
{{ 'widgets.toggle-button.auto-scale' | translate }} |
|||
</mat-slide-toggle> |
|||
</mat-panel-title> |
|||
</mat-expansion-panel-header> |
|||
<ng-template matExpansionPanelContent> |
|||
<div class="tb-form-row"> |
|||
<mat-slide-toggle class="mat-slide" formControlName="horizontalFill"> |
|||
{{ 'widgets.toggle-button.horizontal-fill' | translate }} |
|||
</mat-slide-toggle> |
|||
</div> |
|||
<div class="tb-form-row"> |
|||
<mat-slide-toggle class="mat-slide" formControlName="verticalFill"> |
|||
{{ 'widgets.toggle-button.vertical-fill' | translate }} |
|||
</mat-slide-toggle> |
|||
</div> |
|||
</ng-template> |
|||
</mat-expansion-panel> |
|||
</div> |
|||
<div class="tb-form-row space-between"> |
|||
<div>{{ 'widgets.background.background' | translate }}</div> |
|||
<tb-background-settings formControlName="background"> |
|||
</tb-background-settings> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-panel"> |
|||
<div fxLayout="row" fxLayoutAlign="space-between center"> |
|||
<div class="tb-form-panel-title" translate>widgets.toggle-button.button-appearance</div> |
|||
<tb-toggle-select [(ngModel)]="buttonAppearanceType" [ngModelOptions]="{standalone: true}"> |
|||
<tb-toggle-option value="checked">{{ 'widgets.toggle-button.checked' | translate }}</tb-toggle-option> |
|||
<tb-toggle-option value="unchecked">{{ 'widgets.toggle-button.unchecked' | translate }}</tb-toggle-option> |
|||
</tb-toggle-select> |
|||
</div> |
|||
<tb-widget-button-appearance |
|||
[fxShow]="buttonAppearanceType === 'checked'" |
|||
withBorderRadius |
|||
[withAutoScale]="false" |
|||
[autoScale]="toggleButtonWidgetSettingsForm.get('autoScale').value" |
|||
formControlName="checkedAppearance"> |
|||
</tb-widget-button-appearance> |
|||
<tb-widget-button-appearance |
|||
[fxShow]="buttonAppearanceType === 'unchecked'" |
|||
withBorderRadius |
|||
[withAutoScale]="false" |
|||
[autoScale]="toggleButtonWidgetSettingsForm.get('autoScale').value" |
|||
formControlName="uncheckedAppearance"> |
|||
</tb-widget-button-appearance> |
|||
</div> |
|||
</ng-container> |
|||
@ -0,0 +1,94 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 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 { TargetDevice, WidgetSettings, WidgetSettingsComponent, widgetType } from '@shared/models/widget.models'; |
|||
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { ValueType } from '@shared/models/constants'; |
|||
import { toggleButtonDefaultSettings } from '@home/components/widget/lib/button/toggle-button-widget.models'; |
|||
|
|||
type ButtonAppearanceType = 'checked' | 'unchecked'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-toggle-button-widget-settings', |
|||
templateUrl: './toggle-button-widget-settings.component.html', |
|||
styleUrls: ['./../widget-settings.scss'] |
|||
}) |
|||
export class ToggleButtonWidgetSettingsComponent extends WidgetSettingsComponent { |
|||
|
|||
get targetDevice(): TargetDevice { |
|||
return this.widgetConfig?.config?.targetDevice; |
|||
} |
|||
|
|||
get widgetType(): widgetType { |
|||
return this.widgetConfig?.widgetType; |
|||
} |
|||
|
|||
valueType = ValueType; |
|||
|
|||
buttonAppearanceType: ButtonAppearanceType = 'checked'; |
|||
|
|||
toggleButtonWidgetSettingsForm: UntypedFormGroup; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
private fb: UntypedFormBuilder) { |
|||
super(store); |
|||
} |
|||
|
|||
protected settingsForm(): UntypedFormGroup { |
|||
return this.toggleButtonWidgetSettingsForm; |
|||
} |
|||
|
|||
protected defaultSettings(): WidgetSettings { |
|||
return {...toggleButtonDefaultSettings}; |
|||
} |
|||
|
|||
protected onSettingsSet(settings: WidgetSettings) { |
|||
this.toggleButtonWidgetSettingsForm = this.fb.group({ |
|||
initialState: [settings.initialState, []], |
|||
checkState: [settings.checkState, []], |
|||
uncheckState: [settings.uncheckState, []], |
|||
disabledState: [settings.disabledState, []], |
|||
|
|||
autoScale: [settings.autoScale, []], |
|||
horizontalFill: [settings.horizontalFill, []], |
|||
verticalFill: [settings.verticalFill, []], |
|||
|
|||
checkedAppearance: [settings.checkedAppearance, []], |
|||
uncheckedAppearance: [settings.uncheckedAppearance, []], |
|||
|
|||
background: [settings.background, []] |
|||
}); |
|||
} |
|||
|
|||
protected validatorTriggers(): string[] { |
|||
return ['autoScale']; |
|||
} |
|||
|
|||
protected updateValidators(emitEvent: boolean) { |
|||
const autoScale: boolean = this.toggleButtonWidgetSettingsForm.get('autoScale').value; |
|||
|
|||
if (autoScale) { |
|||
this.toggleButtonWidgetSettingsForm.get('horizontalFill').disable(); |
|||
this.toggleButtonWidgetSettingsForm.get('verticalFill').disable(); |
|||
} else { |
|||
this.toggleButtonWidgetSettingsForm.get('horizontalFill').enable(); |
|||
this.toggleButtonWidgetSettingsForm.get('verticalFill').enable(); |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue