Artem Dzhereleiko
1 year ago
22 changed files with 2165 additions and 130 deletions
@ -0,0 +1,51 @@ |
|||
{ |
|||
"fqn": "slider", |
|||
"name": "Value stepper", |
|||
"deprecated": false, |
|||
"image": "tb-image;/api/images/system/value-stepper-widget.svg", |
|||
"description": "Allows users to click the buttons to send commands to devices or update attributes/time series data. Configurable settings let users define how to retrieve the initial state and specify actions for each button.", |
|||
"descriptor": { |
|||
"type": "rpc", |
|||
"sizeX": 3.5, |
|||
"sizeY": 2, |
|||
"resources": [], |
|||
"templateHtml": "<tb-value-stepper-widget\n [ctx]='ctx'\n [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-stepper-widget>", |
|||
"templateCss": "", |
|||
"controllerScript": "self.onInit = function() {\n self.ctx.$scope.actionWidget.onInit();\n}\n\nself.typeParameters = function() {\n return {\n previewWidth: '230px',\n previewHeight: '110px',\n embedTitlePanel: true,\n displayRpcMessageToast: false\n };\n};\n\nself.onDestroy = function() {\n}\n", |
|||
"dataKeySettingsForm": [], |
|||
"settingsDirective": "tb-value-stepper-widget-settings", |
|||
"hasBasicMode": true, |
|||
"basicModeDirective": "tb-value-stepper-basic-config", |
|||
"defaultConfig": "{\"showTitle\":true,\"backgroundColor\":\"#ffffff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"initialState\":{\"action\":\"EXECUTE_RPC\",\"defaultValue\":0,\"executeRpc\":{\"method\":\"getState\",\"requestTimeout\":5000,\"requestPersistent\":false,\"persistentPollingInterval\":1000},\"getAttribute\":{\"key\":\"state\",\"scope\":null},\"getTimeSeries\":{\"key\":\"state\"},\"getAlarmStatus\":{\"severityList\":null,\"typeList\":null},\"dataToValue\":{\"type\":\"NONE\",\"compareToValue\":true,\"dataToValueFunction\":\"/* Should return integer value */\\nreturn data;\"}},\"disabledState\":{\"action\":\"DO_NOTHING\",\"defaultValue\":false,\"getAttribute\":{\"key\":\"state\",\"scope\":null},\"getTimeSeries\":{\"key\":\"state\"},\"getAlarmStatus\":{\"severityList\":null,\"typeList\":null},\"dataToValue\":{\"type\":\"NONE\",\"compareToValue\":true,\"dataToValueFunction\":\"/* Should return boolean value */\\nreturn data;\"}},\"leftButtonClick\":{\"action\":\"EXECUTE_RPC\",\"executeRpc\":{\"method\":\"setState\",\"requestTimeout\":5000,\"requestPersistent\":false,\"persistentPollingInterval\":1000},\"setAttribute\":{\"key\":\"state\",\"scope\":\"SERVER_SCOPE\"},\"putTimeSeries\":{\"key\":\"state\"},\"valueToData\":{\"type\":\"VALUE\",\"constantValue\":0,\"valueToDataFunction\":\"/* Convert input integer value to RPC parameters or attribute/time-series value */\\nreturn value;\"}},\"rightButtonClick\":{\"action\":\"EXECUTE_RPC\",\"executeRpc\":{\"method\":\"setState\",\"requestTimeout\":5000,\"requestPersistent\":false,\"persistentPollingInterval\":1000},\"setAttribute\":{\"key\":\"state\",\"scope\":\"SERVER_SCOPE\"},\"putTimeSeries\":{\"key\":\"state\"},\"valueToData\":{\"type\":\"VALUE\",\"constantValue\":0,\"valueToDataFunction\":\"/* Convert input integer value to RPC parameters or attribute/time-series value */\\nreturn value;\"}},\"appearance\":{\"type\":\"simplified\",\"autoScale\":true,\"minValueRange\":-100,\"maxValueRange\":100,\"valueStep\":0.5,\"showValueBox\":true,\"valueUnits\":\"\",\"valueDecimals\":1,\"valueFont\":{\"family\":\"Roboto\",\"weight\":\"500\",\"style\":\"normal\",\"size\":16,\"sizeUnit\":\"px\",\"lineHeight\":\"24px\"},\"valueColor\":\"#000\",\"valueBoxBackground\":\"rgba(0, 0, 0, 0.04)\",\"showBorder\":true,\"borderWidth\":1,\"borderColor\":\"#305680\"},\"buttonAppearance\":{\"leftButton\":{\"showButton\":true,\"icon\":\"arrow_back_ios_new\",\"iconSize\":24,\"iconSizeUnit\":\"px\",\"mainColorOn\":\"#3F52DD\",\"backgroundColorOn\":\"#FFFFFF\",\"mainColorDisabled\":\"rgba(0,0,0,0.12)\",\"backgroundColorDisabled\":\"#FFFFFF\",\"customStyle\":{\"enabled\":null,\"hovered\":null,\"pressed\":null,\"activated\":null,\"disabled\":null}},\"rightButton\":{\"showButton\":true,\"icon\":\"arrow_forward_ios\",\"iconSize\":24,\"iconSizeUnit\":\"px\",\"mainColorOn\":\"#3F52DD\",\"backgroundColorOn\":\"#FFFFFF\",\"mainColorDisabled\":\"rgba(0,0,0,0.12)\",\"backgroundColorDisabled\":\"#FFFFFF\",\"customStyle\":{\"enabled\":null,\"hovered\":null,\"pressed\":null,\"activated\":null,\"disabled\":null}}},\"background\":{\"type\":\"color\",\"color\":\"#fff\",\"overlay\":{\"enabled\":false,\"color\":\"rgba(255,255,255,0.72)\",\"blur\":3}},\"padding\":\"12px\"},\"title\":\"Value stepper\",\"dropShadow\":true,\"enableFullscreen\":false,\"widgetStyle\":{},\"actions\":{},\"widgetCss\":\"\",\"noDataDisplayMessage\":\"\",\"titleFont\":{\"size\":16,\"sizeUnit\":\"px\",\"family\":null,\"weight\":\"500\",\"style\":null,\"lineHeight\":\"24px\"},\"showTitleIcon\":false,\"titleTooltip\":\"\",\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"pageSize\":1024,\"titleIcon\":\"\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"14px\",\"configMode\":\"basic\",\"titleColor\":\"rgba(0, 0, 0, 0.87)\",\"datasources\":null,\"borderRadius\":null}" |
|||
}, |
|||
"resources": [ |
|||
{ |
|||
"link": "/api/images/system/value-stepper-widget.svg", |
|||
"title": "\"Value stepper\" system widget image", |
|||
"type": "IMAGE", |
|||
"subType": "IMAGE", |
|||
"fileName": "value-stepper-widget.svg", |
|||
"publicResourceKey": "s0UKoqbiMCcKVn0pD55XZzPUR89XlXAO", |
|||
"mediaType": "image/svg+xml", |
|||
"data": "PHN2ZyB3aWR0aD0iMjE0IiBoZWlnaHQ9Ijc2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbHRlcj0idXJsKCNhKSI+PHJlY3QgeD0iOC41IiB5PSI0LjUiIHdpZHRoPSIxOTciIGhlaWdodD0iNTkiIHJ4PSI0IiBmaWxsPSIjZmZmIiBzaGFwZS1yZW5kZXJpbmc9ImNyaXNwRWRnZXMiLz48cmVjdCB4PSI5IiB5PSI1IiB3aWR0aD0iMTk2IiBoZWlnaHQ9IjU4IiByeD0iMy41IiBzdHJva2U9IiMzMDU2ODAiIHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyIvPjxyZWN0IHg9IjIwLjUiIHk9IjE4IiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHJ4PSIxNiIgZmlsbD0iIzMwNTY4MCIvPjxwYXRoIGQ9Im0zOC41IDQwIDEuNDEtMS40MUwzNS4zMyAzNGw0LjU4LTQuNTlMMzguNSAyOGwtNiA2IDYgNloiIGZpbGw9IiNmZmYiLz48cmVjdCB4PSI2NSIgeT0iMTguNSIgd2lkdGg9Ijg0IiBoZWlnaHQ9IjMxIiByeD0iMy41IiBmaWxsPSIjMzA1NjgwIiBmaWxsLW9wYWNpdHk9Ii4wNCIvPjxyZWN0IHg9IjY1IiB5PSIxOC41IiB3aWR0aD0iODQiIGhlaWdodD0iMzEiIHJ4PSIzLjUiIHN0cm9rZT0iIzMwNTY4MCIvPjxwYXRoIGQ9Ik04OC41OSAzNy41VjM5aC03LjYzdi0xLjI5bDMuNy00LjA0Yy40MS0uNDYuNzMtLjg1Ljk3LTEuMTkuMjMtLjMzLjQtLjYzLjQ5LS45YTIuMyAyLjMgMCAwIDAtLjA2LTEuNzNjLS4xMy0uMjctLjMyLS41LS41OC0uNjVhMS43IDEuNyAwIDAgMC0uOTMtLjI0Yy0uNDIgMC0uNzcuMS0xLjA2LjI3LS4yOC4xOS0uNS40NC0uNjUuNzZhMi42IDIuNiAwIDAgMC0uMjIgMS4xaC0xLjg4YzAtLjY3LjE1LTEuMjcuNDYtMS44Mi4zLS41NS43My0uOTkgMS4zLTEuM2E0LjEgNC4xIDAgMCAxIDIuMDgtLjVjLjc2IDAgMS40LjEzIDEuOTQuMzguNTMuMjYuOTMuNjIgMS4yIDEuMDlhMy4zNiAzLjM2IDAgMCAxIC4yNSAyLjcyIDUgNSAwIDAgMS0uNDkgMS4wNCA5IDkgMCAwIDEtLjc0IDEuMDRjLS4yOC4zNS0uNi43LS45NCAxLjA1bC0yLjQ2IDIuNzFoNS4yNVptOS4yNy05Ljg4djEuMDRMOTMuMyAzOWgtMS45OGw0LjU0LTkuODhoLTUuOXYtMS41aDcuODlabTEuOTggMTAuNDRjMC0uMjkuMS0uNTMuMy0uNzMuMi0uMi40Ni0uMy44LS4zcy42LjEuOC4zYy4yLjIuMy40NC4zLjczYTEgMSAwIDAgMS0uMy43NGMtLjIuMi0uNDYuMy0uOC4zcy0uNi0uMS0uOC0uM2ExIDEgMCAwIDEtLjMtLjc0Wm02LjQ5LTQuMzUtMS41LS4zNy42MS01LjcyaDYuMTR2MS42SDEwN2wtLjMyIDIuNzlhMy42NyAzLjY3IDAgMCAxIDEuODEtLjQ2Yy41NCAwIDEuMDIuMDkgMS40NC4yNi40Mi4xNy43OS40MyAxLjA4Ljc2LjMuMzMuNTMuNzMuNjggMS4yYTUgNSAwIDAgMSAwIDMuMDcgMy4xNyAzLjE3IDAgMCAxLTEuODUgMi4wM2MtLjQ2LjE5LTEuMDEuMjktMS42NS4yOWE0LjYgNC42IDAgMCAxLTEuMzYtLjIgMy43MyAzLjczIDAgMCAxLTEuMTctLjYyIDMuMTQgMy4xNCAwIDAgMS0xLjE5LTIuNDJoMS44NWMuMDUuMzcuMTUuNjkuMy45NS4xNi4yNS4zOC40NS42NC41OGEyIDIgMCAwIDAgLjkyLjJjLjMyIDAgLjYtLjA1LjgzLS4xNi4yMy0uMTEuNDItLjI3LjU3LS40OC4xNS0uMjIuMjctLjQ3LjM0LS43NWEzLjYyIDMuNjIgMCAwIDAtLjAyLTEuODcgMS45OCAxLjk4IDAgMCAwLS4zOC0uNzJjLS4xNy0uMi0uMzgtLjM2LS42My0uNDdhMi4xMyAyLjEzIDAgMCAwLS44OC0uMTdjLS40NSAwLS44LjA3LTEuMDQuMi0uMjMuMTMtLjQ1LjI5LS42NS40OFptMTEuNzUtNC4xNmMwLS4zOC4xLS43Mi4yOC0xLjA0LjE5LS4zMi40NC0uNTcuNzUtLjc2YTEuOTYgMS45NiAwIDAgMSAyLjA1IDBjLjMxLjE5LjU2LjQ0Ljc0Ljc2LjE5LjMyLjI4LjY2LjI4IDEuMDRzLS4xLjczLS4yOCAxLjA1Yy0uMTguMzEtLjQzLjU2LS43NC43NGEyLjA0IDIuMDQgMCAwIDEtMi44LS43NCAyLjAzIDIuMDMgMCAwIDEtLjI4LTEuMDVabTEuMDUgMGExIDEgMCAwIDAgMSAxIC45Ny45NyAwIDAgMCAuOTgtMSAxIDEgMCAwIDAtLjI3LS43Mi45My45MyAwIDAgMC0uNy0uM2MtLjI4IDAtLjUxLjEtLjcxLjMtLjIuMi0uMy40My0uMy43MlptMTIuMTkgNS43NWgxLjk1YTQuNSA0LjUgMCAwIDEtLjYyIDEuOTkgMy43MiAzLjcyIDAgMCAxLTEuNSAxLjM3IDUgNSAwIDAgMS0yLjMzLjUgNC4xNSA0LjE1IDAgMCAxLTMuMzQtMS40NWMtLjQtLjQ4LS43MS0xLjA0LS45Mi0xLjctLjIxLS42Ni0uMzItMS40LS4zMi0yLjIydi0uOTVjMC0uODEuMS0xLjU1LjMyLTIuMjIuMjItLjY2LjUzLTEuMjIuOTQtMS42OS40LS40Ny45LS44NCAxLjQ2LTEuMDlhNC43OCA0Ljc4IDAgMCAxIDEuOTMtLjM3Yy45IDAgMS42Ny4xNyAyLjMuNS42Mi4zMyAxLjEuOCAxLjQ1IDEuMzguMzUuNTkuNTYgMS4yNi42NCAyLjAyaC0xLjk1Yy0uMDUtLjQ4LS4xNy0uOS0uMzUtMS4yNWExLjc3IDEuNzcgMCAwIDAtLjc2LS44IDIuNzMgMi43MyAwIDAgMC0xLjMzLS4yOGMtLjQ1IDAtLjg0LjA4LTEuMTcuMjVhMi4yIDIuMiAwIDAgMC0uODQuNzNjLS4yMi4zMy0uMzkuNzItLjUgMS4yLS4xMS40Ny0uMTcgMS0uMTcgMS42di45N2MwIC41Ny4wNSAxLjEuMTUgMS41Ni4xLjQ3LjI2Ljg2LjQ3IDEuMi4yMS4zMy40OC41OS44MS43Ny4zMy4xOC43Mi4yNyAxLjE4LjI3LjU2IDAgMS0uMDggMS4zNS0uMjYuMzUtLjE4LjYxLS40NC44LS43OC4xNy0uMzQuMy0uNzYuMzUtMS4yNVoiIGZpbGw9IiMwMDAiIGZpbGwtb3BhY2l0eT0iLjg3Ii8+PHJlY3QgeD0iMTYxLjUiIHk9IjE4IiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHJ4PSIxNiIgZmlsbD0iIzMwNTY4MCIvPjxwYXRoIGQ9Im0xNzUuNSAyOC0xLjQxIDEuNDEgNC41OCA0LjU5LTQuNTggNC41OUwxNzUuNSA0MGw2LTYtNi02WiIgZmlsbD0iI2ZmZiIvPjwvZz48ZGVmcz48ZmlsdGVyIGlkPSJhIiB4PSIuNSIgeT0iLjUiIHdpZHRoPSIyMTMiIGhlaWdodD0iNzUiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj48ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIgcmVzdWx0PSJoYXJkQWxwaGEiLz48ZmVPZmZzZXQgZHk9IjQiLz48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI0Ii8+PGZlQ29tcG9zaXRlIGluMj0iaGFyZEFscGhhIiBvcGVyYXRvcj0ib3V0Ii8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiLz48ZmVCbGVuZCBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJlZmZlY3QxX2Ryb3BTaGFkb3dfNTY2OV8xNjA3MDUiLz48ZmVCbGVuZCBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3dfNTY2OV8xNjA3MDUiIHJlc3VsdD0ic2hhcGUiLz48L2ZpbHRlcj48L2RlZnM+PC9zdmc+", |
|||
"public": true |
|||
} |
|||
], |
|||
"scada": false, |
|||
"tags": [ |
|||
"command", |
|||
"downlink", |
|||
"device configuration", |
|||
"device control", |
|||
"invocation", |
|||
"remote method", |
|||
"remote function", |
|||
"interface", |
|||
"subroutine call", |
|||
"inter-process communication", |
|||
"server request", |
|||
"update attribute", |
|||
"set attribute", |
|||
"add time-series" |
|||
] |
|||
} |
|||
@ -0,0 +1,297 @@ |
|||
<!-- |
|||
|
|||
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]="valueStepperWidgetConfigForm"> |
|||
<tb-target-device formControlName="targetDevice"></tb-target-device> |
|||
<div class="tb-form-panel"> |
|||
<div class="tb-form-panel-title" translate>widgets.value-stepper.behavior</div> |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.value-stepper.initial-state-hint' | translate}}" translate>widgets.value-stepper.initial-state</div> |
|||
<tb-get-value-action-settings class="flex-1" |
|||
panelTitle="{{ 'widgets.value-stepper.initial-state' | translate }}" |
|||
[valueType]="valueType.DOUBLE" |
|||
[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.value-stepper.left-button-click-hint' | translate}}" translate>widgets.value-stepper.left-button-click</div> |
|||
<tb-set-value-action-settings class="flex-1" |
|||
panelTitle="{{ 'widgets.value-stepper.left-button-click' | translate }}" |
|||
[valueType]="valueType.DOUBLE" |
|||
[aliasController]="aliasController" |
|||
[targetDevice]="targetDevice" |
|||
[widgetType]="widgetType" |
|||
formControlName="leftButtonClick"></tb-set-value-action-settings> |
|||
</div> |
|||
<div class="tb-form-row space-between"> |
|||
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.value-stepper.right-button-click-hint' | translate}}" translate>widgets.value-stepper.right-button-click</div> |
|||
<tb-set-value-action-settings class="flex-1" |
|||
panelTitle="{{ 'widgets.value-stepper.right-button-click' | translate }}" |
|||
[valueType]="valueType.DOUBLE" |
|||
[aliasController]="aliasController" |
|||
[targetDevice]="targetDevice" |
|||
[widgetType]="widgetType" |
|||
formControlName="rightButtonClick"></tb-set-value-action-settings> |
|||
</div> |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.disabled-state-hint' | translate}}" translate>widgets.button-state.disabled-state</div> |
|||
<tb-get-value-action-settings class="flex-1" |
|||
panelTitle="{{ 'widgets.button-state.disabled-state' | translate }}" |
|||
[valueType]="valueType.BOOLEAN" |
|||
stateLabel="{{ 'widgets.button-state.disabled' | translate }}" |
|||
[aliasController]="aliasController" |
|||
[targetDevice]="targetDevice" |
|||
[widgetType]="widgetType" |
|||
formControlName="disabledState"></tb-get-value-action-settings> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-panel" formGroupName="appearance"> |
|||
<div class="tb-form-panel-title" translate>widget-config.appearance</div> |
|||
<tb-image-cards-select rowHeight="2:1" |
|||
[cols]="{columns: 3, |
|||
breakpoints: { |
|||
'lt-sm': 1, |
|||
'lt-md': 2 |
|||
}}" |
|||
label="{{ 'widgets.button.layout' | translate }}" formControlName="type"> |
|||
<tb-image-cards-select-option *ngFor="let type of valueStepperTypes" |
|||
[value]="type" |
|||
[image]="valueStepperTypeImageMap.get(type)"> |
|||
{{ valueStepperTypeTranslationMap.get(type) | translate }} |
|||
</tb-image-cards-select-option> |
|||
</tb-image-cards-select> |
|||
<div class="tb-form-row"> |
|||
<mat-slide-toggle class="mat-slide" formControlName="autoScale"> |
|||
{{ 'widgets.value-stepper.auto-scale' | translate }} |
|||
</mat-slide-toggle> |
|||
</div> |
|||
|
|||
<div class="tb-form-row space-between column-xs"> |
|||
<div>{{ 'widgets.value-stepper.value-range' | translate }}</div> |
|||
<div class="flex flex-row items-center justify-start gap-2"> |
|||
<div class="tb-small-label" translate>widgets.value-stepper.min-range</div> |
|||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|||
<input matInput formControlName="minValueRange" type="number" placeholder="{{ 'widget-config.set' | translate }}"> |
|||
</mat-form-field> |
|||
<div class="tb-small-label" translate>widgets.value-stepper.max-range</div> |
|||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|||
<input matInput formControlName="maxValueRange" type="number" placeholder="{{ 'widget-config.set' | translate }}"> |
|||
</mat-form-field> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-row space-between"> |
|||
<div>{{ 'widgets.value-stepper.value-increment-decrement-step' | translate }}</div> |
|||
<mat-form-field appearance="outline" subscriptSizing="dynamic"> |
|||
<input matInput formControlName="valueStep" type="number" placeholder="{{ 'widget-config.set' | translate }}"> |
|||
</mat-form-field> |
|||
</div> |
|||
<div class="tb-form-row column-xs"> |
|||
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showValueBox"> |
|||
{{ 'widgets.value-stepper.value' | translate }} |
|||
</mat-slide-toggle> |
|||
<div class="flex flex-1 flex-row items-center justify-start gap-2"> |
|||
<tb-unit-input class="flex" formControlName="valueUnits"></tb-unit-input> |
|||
<mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic"> |
|||
<input matInput formControlName="valueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|||
<div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div> |
|||
</mat-form-field> |
|||
<tb-font-settings formControlName="valueFont" |
|||
[previewText]="valuePreviewFn"> |
|||
</tb-font-settings> |
|||
<tb-color-input asBoxInput |
|||
colorClearButton |
|||
formControlName="valueColor"> |
|||
</tb-color-input> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="tb-form-row space-between"> |
|||
<div>{{ 'widgets.value-stepper.value-box-background' | translate }}</div> |
|||
<tb-color-input asBoxInput |
|||
colorClearButton |
|||
formControlName="valueBoxBackground"> |
|||
</tb-color-input> |
|||
</div> |
|||
<div class="tb-form-row space-between column-xs"> |
|||
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showBorder"> |
|||
{{ 'widgets.value-stepper.border' | translate }} |
|||
</mat-slide-toggle> |
|||
<div class="flex flex-1 flex-row items-center justify-end gap-2"> |
|||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|||
<input matInput formControlName="borderWidth" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|||
<div matSuffix class="lt-md:!hidden">px</div> |
|||
</mat-form-field> |
|||
<tb-color-input asBoxInput |
|||
colorClearButton |
|||
formControlName="borderColor"> |
|||
</tb-color-input> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-panel" formGroupName="buttonAppearance"> |
|||
<div class="flex flex-row items-center justify-between"> |
|||
<div class="tb-form-panel-title" translate>widgets.value-stepper.button-appearance</div> |
|||
<tb-toggle-select [(ngModel)]="buttonAppearanceType" [ngModelOptions]="{standalone: true}"> |
|||
<tb-toggle-option value="left">{{ 'widgets.value-stepper.left' | translate }}</tb-toggle-option> |
|||
<tb-toggle-option value="right">{{ 'widgets.value-stepper.right' | translate }}</tb-toggle-option> |
|||
</tb-toggle-select> |
|||
</div> |
|||
<div class="tb-form-panel no-border no-padding" formGroupName="leftButton" [class.!hidden]="buttonAppearanceType !== 'left'"> |
|||
<div class="tb-form-row"> |
|||
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showButton"> |
|||
{{ 'widgets.value-stepper.left-button' | translate }} |
|||
</mat-slide-toggle> |
|||
</div> |
|||
<div class="tb-form-row"> |
|||
<div>{{ 'widgets.value-stepper.icon' | translate }}</div> |
|||
<div class="flex flex-1 flex-row items-center justify-start gap-2"> |
|||
<mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic"> |
|||
<input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}"> |
|||
</mat-form-field> |
|||
<tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select> |
|||
<tb-material-icon-select asBoxInput |
|||
iconClearButton |
|||
formControlName="icon"> |
|||
</tb-material-icon-select> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-row space-between column-xs"> |
|||
<div>{{ 'widgets.value-stepper.button-on-colors' | translate }}</div> |
|||
<div class="flex flex-row items-center justify-start gap-3"> |
|||
<div class="flex flex-row items-center justify-start gap-2"> |
|||
<div translate>widgets.value-stepper.main</div> |
|||
<tb-color-input asBoxInput |
|||
formControlName="mainColorOn"> |
|||
</tb-color-input> |
|||
</div> |
|||
<mat-divider vertical></mat-divider> |
|||
<div class="flex flex-row items-center justify-start gap-2"> |
|||
<div translate>widgets.value-stepper.background</div> |
|||
<tb-color-input asBoxInput |
|||
formControlName="backgroundColorOn"> |
|||
</tb-color-input> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-row space-between column-xs"> |
|||
<div>{{ 'widgets.value-stepper.disabled-colors' | translate }}</div> |
|||
<div class="flex flex-row items-center justify-start gap-3"> |
|||
<div class="flex flex-row items-center justify-start gap-2"> |
|||
<div translate>widgets.value-stepper.main</div> |
|||
<tb-color-input asBoxInput |
|||
formControlName="mainColorDisabled"> |
|||
</tb-color-input> |
|||
</div> |
|||
<mat-divider vertical></mat-divider> |
|||
<div class="flex flex-row items-center justify-start gap-2"> |
|||
<div translate>widgets.value-stepper.background</div> |
|||
<tb-color-input asBoxInput |
|||
formControlName="backgroundColorDisabled"> |
|||
</tb-color-input> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-panel no-border no-padding" formGroupName="rightButton" [class.!hidden]="buttonAppearanceType !== 'right'"> |
|||
<div class="tb-form-row"> |
|||
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showButton"> |
|||
{{ 'widgets.value-stepper.right-button' | translate }} |
|||
</mat-slide-toggle> |
|||
</div> |
|||
<div class="tb-form-row"> |
|||
<div>{{ 'widgets.value-stepper.icon' | translate }}</div> |
|||
<div class="flex flex-1 flex-row items-center justify-start gap-2"> |
|||
<mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic"> |
|||
<input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}"> |
|||
</mat-form-field> |
|||
<tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select> |
|||
<tb-material-icon-select asBoxInput |
|||
iconClearButton |
|||
formControlName="icon"> |
|||
</tb-material-icon-select> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-row space-between column-xs"> |
|||
<div>{{ 'widgets.value-stepper.button-on-colors' | translate }}</div> |
|||
<div class="flex flex-row items-center justify-start gap-3"> |
|||
<div class="flex flex-row items-center justify-start gap-2"> |
|||
<div translate>widgets.value-stepper.main</div> |
|||
<tb-color-input asBoxInput |
|||
formControlName="mainColorOn"> |
|||
</tb-color-input> |
|||
</div> |
|||
<mat-divider vertical></mat-divider> |
|||
<div class="flex flex-row items-center justify-start gap-2"> |
|||
<div translate>widgets.value-stepper.background</div> |
|||
<tb-color-input asBoxInput |
|||
formControlName="backgroundColorOn"> |
|||
</tb-color-input> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-row space-between column-xs"> |
|||
<div>{{ 'widgets.value-stepper.disabled-colors' | translate }}</div> |
|||
<div class="flex flex-row items-center justify-start gap-3"> |
|||
<div class="flex flex-row items-center justify-start gap-2"> |
|||
<div translate>widgets.value-stepper.main</div> |
|||
<tb-color-input asBoxInput |
|||
formControlName="mainColorDisabled"> |
|||
</tb-color-input> |
|||
</div> |
|||
<mat-divider vertical></mat-divider> |
|||
<div class="flex flex-row items-center justify-start gap-2"> |
|||
<div translate>widgets.value-stepper.background</div> |
|||
<tb-color-input asBoxInput |
|||
formControlName="backgroundColorDisabled"> |
|||
</tb-color-input> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</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 class="tb-form-row space-between"> |
|||
<div>{{ 'widget-config.card-padding' | translate }}</div> |
|||
<mat-form-field appearance="outline" subscriptSizing="dynamic"> |
|||
<input matInput formControlName="padding" 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,225 @@ |
|||
///
|
|||
/// 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, WidgetConfig, } from '@shared/models/widget.models'; |
|||
import { WidgetConfigComponent } from '@home/components/widget/widget-config.component'; |
|||
import { formatValue, isUndefined } from '@core/utils'; |
|||
import { ValueType } from '@shared/models/constants'; |
|||
import { |
|||
valueStepperDefaultSettings, |
|||
valueStepperTypeImages, |
|||
valueStepperTypes, |
|||
valueStepperTypeTranslations, |
|||
ValueStepperWidgetSettings |
|||
} from '@home/components/widget/lib/rpc/value-stepper-widget.models'; |
|||
|
|||
type ButtonAppearanceType = 'left' | 'right'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-value-stepper-basic-config', |
|||
templateUrl: './value-stepper-basic-config.component.html', |
|||
styleUrls: ['../basic-config.scss'] |
|||
}) |
|||
export class ValueStepperBasicConfigComponent extends BasicWidgetConfigComponent { |
|||
|
|||
get targetDevice(): TargetDevice { |
|||
return this.valueStepperWidgetConfigForm.get('targetDevice').value; |
|||
} |
|||
|
|||
valueStepperTypeTranslationMap = valueStepperTypeTranslations; |
|||
valueStepperTypes = valueStepperTypes; |
|||
valueStepperTypeImageMap = valueStepperTypeImages; |
|||
|
|||
buttonAppearanceType: ButtonAppearanceType = 'left'; |
|||
|
|||
valueType = ValueType; |
|||
|
|||
valueStepperWidgetConfigForm: UntypedFormGroup; |
|||
|
|||
valuePreviewFn = this._valuePreviewFn.bind(this); |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
protected widgetConfigComponent: WidgetConfigComponent, |
|||
private fb: UntypedFormBuilder) { |
|||
super(store, widgetConfigComponent); |
|||
} |
|||
|
|||
protected configForm(): UntypedFormGroup { |
|||
return this.valueStepperWidgetConfigForm; |
|||
} |
|||
|
|||
protected onConfigSet(configData: WidgetConfigComponentData) { |
|||
const settings: ValueStepperWidgetSettings = {...valueStepperDefaultSettings, ...(configData.config.settings || {})}; |
|||
this.valueStepperWidgetConfigForm = this.fb.group({ |
|||
targetDevice: [configData.config.targetDevice, []], |
|||
|
|||
initialState: [settings.initialState, []], |
|||
leftButtonClick: [settings.leftButtonClick, []], |
|||
rightButtonClick: [settings.rightButtonClick, []], |
|||
disabledState: [settings.disabledState, []], |
|||
|
|||
appearance: this.fb.group({ |
|||
type: [settings.appearance.type, []], |
|||
autoScale: [settings.appearance.autoScale, []], |
|||
minValueRange: [settings.appearance.minValueRange, []], |
|||
maxValueRange: [settings.appearance.maxValueRange, []], |
|||
valueStep: [settings.appearance.valueStep, [Validators.min(0)]], |
|||
showValueBox: [settings.appearance.showValueBox, []], |
|||
valueUnits: [settings.appearance.valueUnits, []], |
|||
valueDecimals: [settings.appearance.valueDecimals, []], |
|||
valueFont: [settings.appearance.valueFont, []], |
|||
valueColor: [settings.appearance.valueColor], |
|||
valueBoxBackground: [settings.appearance.valueBoxBackground, []], |
|||
showBorder: [settings.appearance.showBorder, []], |
|||
borderWidth: [settings.appearance.borderWidth, []], |
|||
borderColor: [settings.appearance.borderColor, []] |
|||
}), |
|||
|
|||
buttonAppearance: this.fb.group({ |
|||
leftButton: this.fb.group({ |
|||
showButton: [settings.buttonAppearance.leftButton.showButton], |
|||
icon: [settings.buttonAppearance.leftButton.icon], |
|||
iconSize: [settings.buttonAppearance.leftButton.iconSize], |
|||
iconSizeUnit: [settings.buttonAppearance.leftButton.iconSizeUnit], |
|||
mainColorOn: [settings.buttonAppearance.leftButton.mainColorOn, []], |
|||
backgroundColorOn: [settings.buttonAppearance.leftButton.backgroundColorOn, []], |
|||
mainColorDisabled: [settings.buttonAppearance.leftButton.mainColorDisabled, []], |
|||
backgroundColorDisabled: [settings.buttonAppearance.leftButton.backgroundColorDisabled, []] |
|||
}), |
|||
rightButton: this.fb.group({ |
|||
showButton: [settings.buttonAppearance.rightButton.showButton], |
|||
icon: [settings.buttonAppearance.rightButton.icon], |
|||
iconSize: [settings.buttonAppearance.rightButton.iconSize], |
|||
iconSizeUnit: [settings.buttonAppearance.rightButton.iconSizeUnit], |
|||
mainColorOn: [settings.buttonAppearance.rightButton.mainColorOn, []], |
|||
backgroundColorOn: [settings.buttonAppearance.rightButton.backgroundColorOn, []], |
|||
mainColorDisabled: [settings.buttonAppearance.rightButton.mainColorDisabled, []], |
|||
backgroundColorDisabled: [settings.buttonAppearance.rightButton.backgroundColorDisabled, []] |
|||
}) |
|||
}), |
|||
|
|||
background: [settings.background, []], |
|||
cardButtons: [this.getCardButtons(configData.config), []], |
|||
borderRadius: [configData.config.borderRadius, []], |
|||
padding: [settings.padding, []], |
|||
|
|||
actions: [configData.config.actions || {}, []] |
|||
}); |
|||
} |
|||
|
|||
|
|||
protected prepareOutputConfig(config: any): WidgetConfigComponentData { |
|||
this.widgetConfig.config.targetDevice = config.targetDevice; |
|||
this.widgetConfig.config.settings = this.widgetConfig.config.settings || {}; |
|||
this.widgetConfig.config.settings.initialState = config.initialState; |
|||
this.widgetConfig.config.settings.disabledState = config.disabledState; |
|||
this.widgetConfig.config.settings.leftButtonClick = config.leftButtonClick; |
|||
this.widgetConfig.config.settings.rightButtonClick = config.rightButtonClick; |
|||
this.widgetConfig.config.settings.appearance = config.appearance; |
|||
this.widgetConfig.config.settings.buttonAppearance = config.buttonAppearance; |
|||
|
|||
this.widgetConfig.config.settings.background = config.background; |
|||
this.setCardButtons(config.cardButtons, this.widgetConfig.config); |
|||
this.widgetConfig.config.borderRadius = config.borderRadius; |
|||
this.widgetConfig.config.settings.padding = config.padding; |
|||
this.widgetConfig.config.actions = config.actions; |
|||
|
|||
return this.widgetConfig; |
|||
} |
|||
|
|||
|
|||
protected validatorTriggers(): string[] { |
|||
return ['appearance.showValueBox', 'appearance.showBorder', |
|||
'buttonAppearance.leftButton.showButton', 'buttonAppearance.rightButton.showButton']; |
|||
} |
|||
|
|||
protected updateValidators(emitEvent: boolean, trigger?: string) { |
|||
const showValueBox: boolean = this.valueStepperWidgetConfigForm.get('appearance').get('showValueBox').value; |
|||
const showBorder: boolean = this.valueStepperWidgetConfigForm.get('appearance').get('showBorder').value; |
|||
const showLeftButton: boolean = this.valueStepperWidgetConfigForm.get('buttonAppearance').get('leftButton').get('showButton').value; |
|||
const showRightButton: boolean = this.valueStepperWidgetConfigForm.get('buttonAppearance').get('rightButton').get('showButton').value; |
|||
if (showValueBox) { |
|||
this.valueStepperWidgetConfigForm.get('appearance').get('valueUnits').enable(); |
|||
this.valueStepperWidgetConfigForm.get('appearance').get('valueDecimals').enable(); |
|||
this.valueStepperWidgetConfigForm.get('appearance').get('valueFont').enable(); |
|||
this.valueStepperWidgetConfigForm.get('appearance').get('valueColor').enable(); |
|||
this.valueStepperWidgetConfigForm.get('appearance').get('valueBoxBackground').enable(); |
|||
this.valueStepperWidgetConfigForm.get('appearance').get('showBorder').enable({emitEvent: false}); |
|||
if (showBorder) { |
|||
this.valueStepperWidgetConfigForm.get('appearance').get('borderWidth').enable(); |
|||
this.valueStepperWidgetConfigForm.get('appearance').get('borderColor').enable(); |
|||
} else { |
|||
this.valueStepperWidgetConfigForm.get('appearance').get('borderWidth').disable(); |
|||
this.valueStepperWidgetConfigForm.get('appearance').get('borderColor').disable(); |
|||
} |
|||
} else { |
|||
this.valueStepperWidgetConfigForm.get('appearance').get('valueUnits').disable(); |
|||
this.valueStepperWidgetConfigForm.get('appearance').get('valueDecimals').disable(); |
|||
this.valueStepperWidgetConfigForm.get('appearance').get('valueFont').disable(); |
|||
this.valueStepperWidgetConfigForm.get('appearance').get('valueColor').disable(); |
|||
this.valueStepperWidgetConfigForm.get('appearance').get('valueBoxBackground').disable(); |
|||
this.valueStepperWidgetConfigForm.get('appearance').get('showBorder').disable({emitEvent: false}); |
|||
this.valueStepperWidgetConfigForm.get('appearance').get('borderWidth').disable(); |
|||
this.valueStepperWidgetConfigForm.get('appearance').get('borderColor').disable(); |
|||
} |
|||
this.buttonValidators(showLeftButton, 'leftButton'); |
|||
this.buttonValidators(showRightButton, 'rightButton'); |
|||
} |
|||
|
|||
private buttonValidators(showButtonValue: boolean, button: string) { |
|||
if (showButtonValue) { |
|||
this.valueStepperWidgetConfigForm.get('buttonAppearance').get(button).get('icon').enable() |
|||
this.valueStepperWidgetConfigForm.get('buttonAppearance').get(button).get('iconSize').enable() |
|||
this.valueStepperWidgetConfigForm.get('buttonAppearance').get(button).get('iconSizeUnit').enable() |
|||
this.valueStepperWidgetConfigForm.get('buttonAppearance').get(button).get('mainColorOn').enable() |
|||
this.valueStepperWidgetConfigForm.get('buttonAppearance').get(button).get('backgroundColorOn').enable() |
|||
this.valueStepperWidgetConfigForm.get('buttonAppearance').get(button).get('mainColorDisabled').enable() |
|||
this.valueStepperWidgetConfigForm.get('buttonAppearance').get(button).get('backgroundColorDisabled').enable() |
|||
} else { |
|||
this.valueStepperWidgetConfigForm.get('buttonAppearance').get(button).get('icon').disable() |
|||
this.valueStepperWidgetConfigForm.get('buttonAppearance').get(button).get('iconSize').disable() |
|||
this.valueStepperWidgetConfigForm.get('buttonAppearance').get(button).get('iconSizeUnit').disable() |
|||
this.valueStepperWidgetConfigForm.get('buttonAppearance').get(button).get('mainColorOn').disable() |
|||
this.valueStepperWidgetConfigForm.get('buttonAppearance').get(button).get('backgroundColorOn').disable() |
|||
this.valueStepperWidgetConfigForm.get('buttonAppearance').get(button).get('mainColorDisabled').disable() |
|||
this.valueStepperWidgetConfigForm.get('buttonAppearance').get(button).get('backgroundColorDisabled').disable() |
|||
} |
|||
} |
|||
|
|||
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'); |
|||
} |
|||
|
|||
private _valuePreviewFn(): string { |
|||
const units: string = this.valueStepperWidgetConfigForm.get('appearance').get('valueUnits').value; |
|||
const decimals: number = this.valueStepperWidgetConfigForm.get('appearance').get('valueDecimals').value; |
|||
return formatValue(48, decimals, units, false); |
|||
} |
|||
} |
|||
@ -0,0 +1,43 @@ |
|||
<!-- |
|||
|
|||
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-value-stepper-panel" [style.padding]="padding" [style]="backgroundStyle$ | async"> |
|||
<div class="tb-value-stepper-overlay" [style]="overlayStyle"></div> |
|||
<ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container> |
|||
<div #stepperContent class="tb-value-stepper-content"> |
|||
<div [class.!hidden]="!showLeftButton" |
|||
#leftButton |
|||
class="tb-button-shape tb-button-shape-left" |
|||
[class.tb-button-pointer]="!leftDisabledState && (loading$ | async) === false"> |
|||
</div> |
|||
<div #valueBoxContainer |
|||
class="tb-value-stepper-value-box" |
|||
[class.!hidden]="!showValueBox" |
|||
[class.tb-value-stepper-value-box-disabled]="(disabledState$ | async) === true"> |
|||
<div #value |
|||
class="tb-value-stepper-value" |
|||
[class.tb-value-stepper-value-disabled]="(disabledState$ | async) === true" |
|||
[style]="valueStyle">{{ valueText }}</div> |
|||
</div> |
|||
<div [class.!hidden]="!showRightButton" |
|||
#rightButton |
|||
class="tb-button-shape tb-button-shape-right" |
|||
[class.tb-button-pointer]="!rightDisabledState && (loading$ | async) === false"> |
|||
</div> |
|||
</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,90 @@ |
|||
/** |
|||
* 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-value-stepper-panel { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: relative; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 16px; |
|||
padding: 20px 24px 24px 24px; |
|||
> div:not(.tb-value-stepper-overlay) { |
|||
z-index: 1; |
|||
} |
|||
.tb-value-stepper-overlay { |
|||
position: absolute; |
|||
top: 12px; |
|||
left: 12px; |
|||
bottom: 12px; |
|||
right: 12px; |
|||
} |
|||
div.tb-widget-title { |
|||
padding: 0; |
|||
} |
|||
.tb-value-stepper-content { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: center; |
|||
min-width: 0; |
|||
min-height: 0; |
|||
height: 100%; |
|||
.tb-value-stepper-value-box { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex: 1; |
|||
height: 32px; |
|||
padding: 0 12px; |
|||
border-radius: 4px; |
|||
.tb-value-stepper-value-disabled { |
|||
color: rgba(0, 0, 0, 0.38) !important; |
|||
} |
|||
&-disabled { |
|||
border-color: rgba(0, 0, 0, 0.38); |
|||
} |
|||
} |
|||
.tb-button-shape { |
|||
width: 32px; |
|||
height: 32px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
&-left { |
|||
margin-right: 12px; |
|||
} |
|||
&-right { |
|||
margin-left: 12px; |
|||
} |
|||
svg { |
|||
.tb-small-shadow { |
|||
filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.2)); |
|||
} |
|||
.tb-shadow { |
|||
filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.15)); |
|||
} |
|||
} |
|||
&.tb-button-pointer { |
|||
svg { |
|||
.tb-hover-circle { |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,388 @@ |
|||
///
|
|||
/// 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, |
|||
ElementRef, |
|||
NgZone, |
|||
OnDestroy, |
|||
OnInit, |
|||
Renderer2, |
|||
ViewChild, |
|||
ViewEncapsulation |
|||
} from '@angular/core'; |
|||
import { BasicActionWidgetComponent, ValueSetter } from '@home/components/widget/lib/action/action-widget.models'; |
|||
import { backgroundStyle, ComponentStyle, overlayStyle, textStyle } from '@shared/models/widget-settings.models'; |
|||
import { BehaviorSubject, combineLatest, Observable, Subject } from 'rxjs'; |
|||
import { ImagePipe } from '@shared/pipe/image.pipe'; |
|||
import { DomSanitizer } from '@angular/platform-browser'; |
|||
import { ValueType } from '@shared/models/constants'; |
|||
import { |
|||
PowerButtonLayout, |
|||
PowerButtonShape, |
|||
powerButtonShapeSize, |
|||
PowerButtonWidgetSettings |
|||
} from '@home/components/widget/lib/rpc/power-button-widget.models'; |
|||
import { SVG, Svg } from '@svgdotjs/svg.js'; |
|||
import { MatIconRegistry } from '@angular/material/icon'; |
|||
import { formatValue, isDefinedAndNotNull, isNumeric } from '@core/utils'; |
|||
import { |
|||
valueStepperDefaultSettings, |
|||
ValueStepperWidgetSettings |
|||
} from '@home/components/widget/lib/rpc/value-stepper-widget.models'; |
|||
import { UtilsService } from '@core/services/utils.service'; |
|||
import { takeUntil } from 'rxjs/operators'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-value-stepper-widget', |
|||
templateUrl: './value-stepper-widget.component.html', |
|||
styleUrls: ['../action/action-widget.scss', './value-stepper-widget.component.scss'], |
|||
encapsulation: ViewEncapsulation.None |
|||
}) |
|||
export class ValueStepperWidgetComponent extends |
|||
BasicActionWidgetComponent implements OnInit, AfterViewInit, OnDestroy { |
|||
|
|||
@ViewChild('leftButton', {static: false}) |
|||
leftButton: ElementRef<HTMLElement>; |
|||
|
|||
@ViewChild('rightButton', {static: false}) |
|||
rightButton: ElementRef<HTMLElement>; |
|||
|
|||
@ViewChild('stepperContent', {static: false}) |
|||
stepperContent: ElementRef<HTMLElement>; |
|||
|
|||
@ViewChild('valueBoxContainer', {static: false}) |
|||
valueBox: ElementRef<HTMLElement>; |
|||
|
|||
@ViewChild('value', {static: false}) |
|||
valueElement: ElementRef<HTMLElement>; |
|||
|
|||
settings: ValueStepperWidgetSettings; |
|||
|
|||
backgroundStyle$: Observable<ComponentStyle>; |
|||
overlayStyle: ComponentStyle = {}; |
|||
padding: string; |
|||
|
|||
valueStyle: ComponentStyle = {}; |
|||
value: number = null; |
|||
|
|||
autoScale = false; |
|||
|
|||
showValueBox = true; |
|||
showLeftButton = true; |
|||
showRightButton = true; |
|||
|
|||
valueText = 'N/A'; |
|||
|
|||
disabledState$ = new BehaviorSubject(false); |
|||
|
|||
private prevValue: number = null; |
|||
private shapeResize$: ResizeObserver; |
|||
private drawSvgShapePending = false; |
|||
private svgShapeLeft: Svg; |
|||
private svgShapeRight: Svg; |
|||
private powerButtonSvgShapeLeft: PowerButtonShape; |
|||
private powerButtonSvgShapeRight: PowerButtonShape; |
|||
|
|||
private disabledState = false; |
|||
public leftDisabledState = false; |
|||
public rightDisabledState = false; |
|||
|
|||
private valueSetterLeft: ValueSetter<number>; |
|||
private valueSetterRight: ValueSetter<number>; |
|||
|
|||
private leftDisabledState$ = new BehaviorSubject(false); |
|||
private rightDisabledState$ = new BehaviorSubject(false); |
|||
private readonly destroy$ = new Subject<void>(); |
|||
|
|||
constructor(protected imagePipe: ImagePipe, |
|||
protected sanitizer: DomSanitizer, |
|||
private renderer: Renderer2, |
|||
private iconRegistry: MatIconRegistry, |
|||
private utils: UtilsService, |
|||
private elementRef: ElementRef, |
|||
protected cd: ChangeDetectorRef, |
|||
protected zone: NgZone) { |
|||
super(cd); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
super.ngOnInit(); |
|||
this.settings = {...valueStepperDefaultSettings, ...this.ctx.settings}; |
|||
|
|||
this.autoScale = this.settings.appearance.autoScale; |
|||
|
|||
this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer); |
|||
this.overlayStyle = overlayStyle(this.settings.background.overlay); |
|||
this.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding; |
|||
|
|||
this.showValueBox = this.settings.appearance.showValueBox; |
|||
this.showLeftButton = this.settings.buttonAppearance.leftButton.showButton; |
|||
this.showRightButton = this.settings.buttonAppearance.rightButton.showButton; |
|||
this.valueStyle = textStyle(this.settings.appearance.valueFont); |
|||
this.valueStyle.color = this.settings.appearance.valueColor; |
|||
|
|||
if (this.showValueBox) { |
|||
const valueBoxCss = `.tb-value-stepper-value-box {\n`+ |
|||
`border: ${this.settings.appearance.showBorder ? |
|||
`${this.settings.appearance.borderWidth}px solid ${this.settings.appearance.borderColor}` : |
|||
'none'};\n`+
|
|||
`background-color: ${this.settings.appearance.valueBoxBackground}` + |
|||
`}`; |
|||
this.utils.applyCssToElement(this.renderer, this.elementRef.nativeElement, 'tb-value-stepper-value-box', valueBoxCss); |
|||
} |
|||
|
|||
const getInitialStateSettings = |
|||
{...this.settings.initialState, actionLabel: this.ctx.translate.instant('widgets.slider.initial-value')}; |
|||
this.createValueGetter(getInitialStateSettings, ValueType.INTEGER, { |
|||
next: (value) => this.onValue(value) |
|||
}); |
|||
const disabledStateSettings = |
|||
{...this.settings.disabledState, actionLabel: this.ctx.translate.instant('widgets.rpc-state.disabled-state')}; |
|||
this.createValueGetter(disabledStateSettings, ValueType.BOOLEAN, { |
|||
next: (value) => this.disabledState$.next(value) |
|||
}); |
|||
|
|||
const leftButtonClick = {...this.settings.leftButtonClick, |
|||
actionLabel: this.ctx.translate.instant('widgets.slider.on-value-change')}; |
|||
this.valueSetterLeft = this.createValueSetter(leftButtonClick); |
|||
|
|||
const rightButtonClick = {...this.settings.rightButtonClick, |
|||
actionLabel: this.ctx.translate.instant('widgets.slider.on-value-change')}; |
|||
this.valueSetterRight = this.createValueSetter(rightButtonClick); |
|||
|
|||
combineLatest([ |
|||
this.loading$, |
|||
this.disabledState$.asObservable(), |
|||
this.leftDisabledState$.asObservable() |
|||
]).pipe( |
|||
takeUntil(this.destroy$) |
|||
).subscribe(value => { |
|||
const state = value.includes(true); |
|||
this.updateLeftDisabledState(state) |
|||
}); |
|||
|
|||
combineLatest([ |
|||
this.loading$, |
|||
this.disabledState$.asObservable(), |
|||
this.rightDisabledState$.asObservable() |
|||
]).pipe( |
|||
takeUntil(this.destroy$) |
|||
).subscribe(value => { |
|||
const state = value.includes(true); |
|||
this.updateRightDisabledState(state) |
|||
}); |
|||
} |
|||
|
|||
ngAfterViewInit(): void { |
|||
if (this.drawSvgShapePending) { |
|||
this.drawSvg(); |
|||
} |
|||
super.ngAfterViewInit(); |
|||
} |
|||
|
|||
ngOnDestroy() { |
|||
if (this.shapeResize$) { |
|||
this.shapeResize$.disconnect(); |
|||
} |
|||
this.destroy$.next(); |
|||
this.destroy$.complete(); |
|||
super.ngOnDestroy(); |
|||
} |
|||
|
|||
public onInit() { |
|||
super.onInit(); |
|||
const borderRadius = this.ctx.$widgetElement.css('borderRadius'); |
|||
this.overlayStyle = {...this.overlayStyle, ...{borderRadius}}; |
|||
if (this.leftButton || this.rightButton) { |
|||
this.drawSvg(); |
|||
} else { |
|||
this.drawSvgShapePending = true; |
|||
} |
|||
this.cd.detectChanges(); |
|||
} |
|||
|
|||
private onValue(value: number): void { |
|||
this.value = value; |
|||
this.prevValue = value; |
|||
if ((this.value + this.settings.appearance.valueStep) >= this.settings.appearance.maxValueRange) { |
|||
this.rightDisabledState$.next(true); |
|||
} else { |
|||
this.rightDisabledState$.next(false); |
|||
} |
|||
if ((this.value - this.settings.appearance.valueStep) <= this.settings.appearance.minValueRange) { |
|||
this.leftDisabledState$.next(true); |
|||
} else { |
|||
this.leftDisabledState$.next(false); |
|||
} |
|||
this.updateValueText(); |
|||
this.cd.markForCheck(); |
|||
} |
|||
|
|||
private updateValueText() { |
|||
if (isDefinedAndNotNull(this.value) && isNumeric(this.value)) { |
|||
this.valueText = formatValue(this.value, this.settings.appearance.valueDecimals, this.settings.appearance.valueUnits, false); |
|||
} else { |
|||
this.valueText = 'N/A'; |
|||
} |
|||
} |
|||
|
|||
private onClick(rightButtonClick: boolean = false) { |
|||
this.updateValueText(); |
|||
if (!this.ctx.isEdit && !this.ctx.isPreview && !this.disabledState) { |
|||
const prevValue = this.prevValue; |
|||
const targetValue = rightButtonClick ? |
|||
(this.value + this.settings.appearance.valueStep) : |
|||
(this.value - this.settings.appearance.valueStep); |
|||
this.updateValue(rightButtonClick ? this.valueSetterRight : this.valueSetterLeft, targetValue, { |
|||
next: () => this.onValue(targetValue), |
|||
error: () => this.onValue(prevValue) |
|||
}); |
|||
} |
|||
} |
|||
|
|||
private drawSvg() { |
|||
let leftButtonSetting: PowerButtonWidgetSettings; |
|||
let rightButtonSetting: PowerButtonWidgetSettings; |
|||
if (this.showLeftButton) { |
|||
this.svgShapeLeft = SVG().addTo(this.leftButton.nativeElement).size(powerButtonShapeSize, powerButtonShapeSize); |
|||
this.renderer.setStyle(this.svgShapeLeft.node, 'overflow', 'visible'); |
|||
this.renderer.setStyle(this.svgShapeLeft.node, 'user-select', 'none'); |
|||
leftButtonSetting = { |
|||
layout: PowerButtonLayout[this.settings.appearance.type], |
|||
onButtonIcon: { |
|||
showIcon: true, |
|||
icon: this.settings.buttonAppearance.leftButton.icon, |
|||
iconSize: this.settings.buttonAppearance.leftButton.iconSize * 1.7, |
|||
iconSizeUnit: this.settings.buttonAppearance.leftButton.iconSizeUnit |
|||
}, |
|||
offButtonIcon: { |
|||
showIcon: true, |
|||
icon: this.settings.buttonAppearance.leftButton.icon, |
|||
iconSize: this.settings.buttonAppearance.leftButton.iconSize * 1.7, |
|||
iconSizeUnit: this.settings.buttonAppearance.leftButton.iconSizeUnit |
|||
}, |
|||
mainColorOn: this.settings.buttonAppearance.leftButton.mainColorOn, |
|||
backgroundColorOn: this.settings.buttonAppearance.leftButton.backgroundColorOn, |
|||
mainColorOff: this.settings.buttonAppearance.leftButton.mainColorOff, |
|||
backgroundColorOff: this.settings.buttonAppearance.leftButton.backgroundColorOff, |
|||
mainColorDisabled: this.settings.buttonAppearance.leftButton.mainColorDisabled, |
|||
backgroundColorDisabled: this.settings.buttonAppearance.leftButton.backgroundColorDisabled |
|||
}; |
|||
} |
|||
if (this.showRightButton) { |
|||
this.svgShapeRight = SVG().addTo(this.rightButton.nativeElement).size(powerButtonShapeSize, powerButtonShapeSize); |
|||
this.renderer.setStyle(this.svgShapeRight.node, 'overflow', 'visible'); |
|||
this.renderer.setStyle(this.svgShapeRight.node, 'user-select', 'none'); |
|||
|
|||
rightButtonSetting = { |
|||
layout: PowerButtonLayout[this.settings.appearance.type], |
|||
onButtonIcon: { |
|||
showIcon: true, |
|||
icon: this.settings.buttonAppearance.rightButton.icon, |
|||
iconSize: this.settings.buttonAppearance.rightButton.iconSize * 1.7, |
|||
iconSizeUnit: this.settings.buttonAppearance.rightButton.iconSizeUnit |
|||
}, |
|||
offButtonIcon: { |
|||
showIcon: true, |
|||
icon: this.settings.buttonAppearance.rightButton.icon, |
|||
iconSize: this.settings.buttonAppearance.rightButton.iconSize * 1.7, |
|||
iconSizeUnit: this.settings.buttonAppearance.rightButton.iconSizeUnit |
|||
}, |
|||
mainColorOn: this.settings.buttonAppearance.rightButton.mainColorOn, |
|||
backgroundColorOn: this.settings.buttonAppearance.rightButton.backgroundColorOn, |
|||
mainColorOff: this.settings.buttonAppearance.rightButton.mainColorOff, |
|||
backgroundColorOff: this.settings.buttonAppearance.rightButton.backgroundColorOff, |
|||
mainColorDisabled: this.settings.buttonAppearance.rightButton.mainColorDisabled, |
|||
backgroundColorDisabled: this.settings.buttonAppearance.rightButton.backgroundColorDisabled |
|||
}; |
|||
} |
|||
|
|||
this.zone.run(() => { |
|||
if (this.showLeftButton) { |
|||
this.powerButtonSvgShapeLeft = PowerButtonShape.fromSettings(this.ctx, this.svgShapeLeft, this.iconRegistry, |
|||
leftButtonSetting , true, this.leftDisabledState, () => this.onClick()); |
|||
} |
|||
if (this.showRightButton) { |
|||
this.powerButtonSvgShapeRight = PowerButtonShape.fromSettings(this.ctx, this.svgShapeRight, this.iconRegistry, |
|||
rightButtonSetting, true, this.rightDisabledState, () => this.onClick(true)); |
|||
} |
|||
}); |
|||
|
|||
this.shapeResize$ = new ResizeObserver(() => { |
|||
this.onResize(); |
|||
}); |
|||
if (this.autoScale) { |
|||
this.shapeResize$.observe(this.stepperContent.nativeElement); |
|||
} |
|||
if (this.showLeftButton) { |
|||
this.shapeResize$.observe(this.leftButton.nativeElement); |
|||
} |
|||
if (this.showRightButton) { |
|||
this.shapeResize$.observe(this.rightButton.nativeElement); |
|||
} |
|||
this.onResize(); |
|||
} |
|||
|
|||
private updateLeftDisabledState(disabled: boolean) { |
|||
this.leftDisabledState = disabled; |
|||
this.powerButtonSvgShapeLeft?.setDisabled(this.leftDisabledState); |
|||
this.cd.markForCheck(); |
|||
} |
|||
|
|||
|
|||
private updateRightDisabledState(disabled: boolean) { |
|||
this.rightDisabledState = disabled; |
|||
this.powerButtonSvgShapeRight?.setDisabled(this.rightDisabledState); |
|||
this.cd.markForCheck(); |
|||
} |
|||
|
|||
private onResize() { |
|||
const panelWidth = this.stepperContent.nativeElement.getBoundingClientRect().width; |
|||
const panelHeight = this.stepperContent.nativeElement.getBoundingClientRect().height; |
|||
|
|||
const minAspect = 0.2; |
|||
const avgContentHeight = 32; |
|||
const targetHeight = panelWidth * Math.min(panelHeight / panelWidth, minAspect); |
|||
const multiplier = targetHeight / avgContentHeight; |
|||
const size = avgContentHeight * multiplier; |
|||
|
|||
if (this.showValueBox) { |
|||
this.renderer.setStyle(this.valueBox?.nativeElement, 'height', `${size}px`); |
|||
this.renderer.setStyle(this.valueElement?.nativeElement, 'font-size', `${this.settings.appearance.valueFont.size * multiplier}px`); |
|||
} |
|||
if (this.showLeftButton) { |
|||
this.renderer.setStyle(this.leftButton?.nativeElement, 'width', `${size}px`); |
|||
this.renderer.setStyle(this.leftButton?.nativeElement, 'height', `${size}px`); |
|||
} |
|||
if (this.showRightButton) { |
|||
this.renderer.setStyle(this.rightButton?.nativeElement, 'width', `${size}px`); |
|||
this.renderer.setStyle(this.rightButton?.nativeElement, 'height', `${size}px`); |
|||
} |
|||
if (size) { |
|||
const scale = size / powerButtonShapeSize; |
|||
if (this.showLeftButton) { |
|||
this.renderer.setStyle(this.svgShapeLeft?.node, 'transform', `scale(${scale})`); |
|||
} |
|||
if (this.showRightButton) { |
|||
this.renderer.setStyle(this.svgShapeRight?.node, 'transform', `scale(${scale})`); |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,239 @@ |
|||
import { |
|||
DataToValueType, |
|||
GetValueAction, |
|||
GetValueSettings, SetValueAction, |
|||
SetValueSettings, ValueToDataType |
|||
} from '@shared/models/action-widget-settings.models'; |
|||
import { defaultWidgetAction, WidgetAction } from '@shared/models/widget.models'; |
|||
import { |
|||
ButtonToggleAppearance, segmentedButtonDefaultAppearance, |
|||
SegmentedButtonWidgetSettings |
|||
} from '@home/components/widget/lib/button/segmented-button-widget.models'; |
|||
import { WidgetButtonCustomStyles, WidgetButtonType } from '@shared/components/button/widget-button.models'; |
|||
import { BackgroundSettings, BackgroundType, cssUnit, Font } from '@shared/models/widget-settings.models'; |
|||
import { AttributeScope } from '@shared/models/telemetry/telemetry.models'; |
|||
|
|||
|
|||
const defaultMainColor = '#305680'; |
|||
|
|||
export enum ValueStepperType { |
|||
simplified = 'simplified', |
|||
default = 'default', |
|||
default_volume = 'default_volume' |
|||
} |
|||
|
|||
export const valueStepperTypes = Object.keys(ValueStepperType) as ValueStepperType[]; |
|||
|
|||
export const valueStepperTypeTranslations = new Map<ValueStepperType, string>( |
|||
[ |
|||
[ValueStepperType.simplified, 'widgets.value-stepper.simplified'], |
|||
[ValueStepperType.default, 'widgets.value-stepper.filled'], |
|||
[ValueStepperType.default_volume, 'widgets.value-stepper.volume'] |
|||
] |
|||
); |
|||
|
|||
export const valueStepperTypeImages = new Map<ValueStepperType, string>( |
|||
[ |
|||
[ValueStepperType.simplified, 'assets/widget/value-stepper/simplified.svg'], |
|||
[ValueStepperType.default, 'assets/widget/value-stepper/filled.svg'], |
|||
[ValueStepperType.default_volume, 'assets/widget/value-stepper/volume.svg'] |
|||
] |
|||
); |
|||
|
|||
export interface ValueStepperWidgetSettings { |
|||
initialState: GetValueSettings<number>; |
|||
leftButtonClick: SetValueSettings; |
|||
rightButtonClick: SetValueSettings; |
|||
disabledState: GetValueSettings<boolean>; |
|||
|
|||
appearance: ValueStepperAppearance; |
|||
buttonAppearance: { |
|||
leftButton: ValueStepperButtonAppearance; |
|||
rightButton: ValueStepperButtonAppearance; |
|||
} |
|||
|
|||
background: BackgroundSettings; |
|||
padding: string; |
|||
} |
|||
|
|||
export interface ValueStepperAppearance { |
|||
type: ValueStepperType; |
|||
autoScale: boolean; |
|||
minValueRange: number; |
|||
maxValueRange: number; |
|||
valueStep: number; |
|||
showValueBox: boolean; |
|||
valueUnits: string; |
|||
valueDecimals: number; |
|||
valueFont: Font; |
|||
valueColor: string; |
|||
valueBoxBackground: string; |
|||
showBorder: boolean; |
|||
borderWidth: number; |
|||
borderColor: string; |
|||
} |
|||
|
|||
export interface ValueStepperButtonAppearance { |
|||
showButton: boolean; |
|||
icon: string; |
|||
iconSize: number; |
|||
iconSizeUnit: cssUnit; |
|||
mainColorOn: string; |
|||
backgroundColorOn: string; |
|||
mainColorOff: string; |
|||
backgroundColorOff: string; |
|||
mainColorDisabled: string; |
|||
backgroundColorDisabled: string; |
|||
customStyle: WidgetButtonCustomStyles; |
|||
} |
|||
|
|||
export const valueStepperDefaultAppearance: ValueStepperAppearance = { |
|||
type: ValueStepperType.simplified, |
|||
autoScale: true, |
|||
minValueRange: -100, |
|||
maxValueRange: 100, |
|||
valueStep: 0.5, |
|||
showValueBox: true, |
|||
valueUnits: '', |
|||
valueDecimals: 1, |
|||
valueFont: { |
|||
family: 'Roboto', |
|||
weight: '500', |
|||
style: 'normal', |
|||
size: 16, |
|||
sizeUnit: 'px', |
|||
lineHeight: '24px' |
|||
}, |
|||
valueColor: '#000', |
|||
valueBoxBackground: 'rgba(0, 0, 0, 0.12)', |
|||
showBorder: true, |
|||
borderWidth: 1, |
|||
borderColor: defaultMainColor |
|||
} |
|||
|
|||
export const valueStepperButtonDefaultAppearance: ValueStepperButtonAppearance = { |
|||
showButton: true, |
|||
icon: '', |
|||
iconSize: 24, |
|||
iconSizeUnit: 'px', |
|||
|
|||
mainColorOn: '#3F52DD', |
|||
backgroundColorOn: '#FFFFFF', |
|||
mainColorOff: '#A2A2A2', |
|||
backgroundColorOff: '#FFFFFF', |
|||
mainColorDisabled: 'rgba(0,0,0,0.12)', |
|||
backgroundColorDisabled: '#FFFFFF', |
|||
customStyle: { |
|||
enabled: null, |
|||
hovered: null, |
|||
pressed: null, |
|||
activated: null, |
|||
disabled: null |
|||
} |
|||
} |
|||
|
|||
export const valueStepperDefaultSettings: ValueStepperWidgetSettings = { |
|||
initialState: { |
|||
action: GetValueAction.EXECUTE_RPC, |
|||
defaultValue: 0, |
|||
executeRpc: { |
|||
method: 'getState', |
|||
requestTimeout: 5000, |
|||
requestPersistent: false, |
|||
persistentPollingInterval: 1000 |
|||
}, |
|||
getAttribute: { |
|||
key: 'state', |
|||
scope: null |
|||
}, |
|||
getTimeSeries: { |
|||
key: 'state' |
|||
}, |
|||
getAlarmStatus: { |
|||
severityList: null, |
|||
typeList: null |
|||
}, |
|||
dataToValue: { |
|||
type: DataToValueType.NONE, |
|||
compareToValue: true, |
|||
dataToValueFunction: '/* Should return integer value */\nreturn data;' |
|||
} |
|||
}, |
|||
disabledState: { |
|||
action: GetValueAction.DO_NOTHING, |
|||
defaultValue: false, |
|||
getAttribute: { |
|||
key: 'state', |
|||
scope: null |
|||
}, |
|||
getTimeSeries: { |
|||
key: 'state' |
|||
}, |
|||
getAlarmStatus: { |
|||
severityList: null, |
|||
typeList: null |
|||
}, |
|||
dataToValue: { |
|||
type: DataToValueType.NONE, |
|||
compareToValue: true, |
|||
dataToValueFunction: '/* Should return boolean value */\nreturn data;' |
|||
} |
|||
}, |
|||
leftButtonClick: { |
|||
action: SetValueAction.EXECUTE_RPC, |
|||
executeRpc: { |
|||
method: 'setState', |
|||
requestTimeout: 5000, |
|||
requestPersistent: false, |
|||
persistentPollingInterval: 1000 |
|||
}, |
|||
setAttribute: { |
|||
key: 'state', |
|||
scope: AttributeScope.SERVER_SCOPE |
|||
}, |
|||
putTimeSeries: { |
|||
key: 'state' |
|||
}, |
|||
valueToData: { |
|||
type: ValueToDataType.VALUE, |
|||
constantValue: 0, |
|||
valueToDataFunction: '/* Convert input integer value to RPC parameters or attribute/time-series value */\nreturn value;' |
|||
} |
|||
}, |
|||
rightButtonClick: { |
|||
action: SetValueAction.EXECUTE_RPC, |
|||
executeRpc: { |
|||
method: 'setState', |
|||
requestTimeout: 5000, |
|||
requestPersistent: false, |
|||
persistentPollingInterval: 1000 |
|||
}, |
|||
setAttribute: { |
|||
key: 'state', |
|||
scope: AttributeScope.SERVER_SCOPE |
|||
}, |
|||
putTimeSeries: { |
|||
key: 'state' |
|||
}, |
|||
valueToData: { |
|||
type: ValueToDataType.VALUE, |
|||
constantValue: 0, |
|||
valueToDataFunction: '/* Convert input integer value to RPC parameters or attribute/time-series value */\nreturn value;' |
|||
} |
|||
}, |
|||
appearance: valueStepperDefaultAppearance, |
|||
buttonAppearance: { |
|||
leftButton: {...valueStepperButtonDefaultAppearance, icon: 'arrow_back_ios_new'}, |
|||
rightButton: {...valueStepperButtonDefaultAppearance, icon: 'arrow_forward_ios'} |
|||
}, |
|||
background: { |
|||
type: BackgroundType.color, |
|||
color: '#fff', |
|||
overlay: { |
|||
enabled: false, |
|||
color: 'rgba(255,255,255,0.72)', |
|||
blur: 3 |
|||
} |
|||
}, |
|||
padding: '12px' |
|||
}; |
|||
@ -0,0 +1,266 @@ |
|||
<!-- |
|||
|
|||
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]="valueStepperWidgetSettingsForm"> |
|||
<div class="tb-form-panel"> |
|||
<div class="tb-form-panel-title" translate>widgets.value-stepper.behavior</div> |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.value-stepper.initial-state-hint' | translate}}" translate>widgets.value-stepper.initial-state</div> |
|||
<tb-get-value-action-settings class="flex-1" |
|||
panelTitle="{{ 'widgets.value-stepper.initial-state' | translate }}" |
|||
[valueType]="valueType.DOUBLE" |
|||
[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.value-stepper.left-button-click-hint' | translate}}" translate>widgets.value-stepper.left-button-click</div> |
|||
<tb-set-value-action-settings class="flex-1" |
|||
panelTitle="{{ 'widgets.value-stepper.left-button-click' | translate }}" |
|||
[valueType]="valueType.DOUBLE" |
|||
[aliasController]="aliasController" |
|||
[targetDevice]="targetDevice" |
|||
[widgetType]="widgetType" |
|||
formControlName="leftButtonClick"></tb-set-value-action-settings> |
|||
</div> |
|||
<div class="tb-form-row space-between"> |
|||
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.value-stepper.right-button-click-hint' | translate}}" translate>widgets.value-stepper.right-button-click</div> |
|||
<tb-set-value-action-settings class="flex-1" |
|||
panelTitle="{{ 'widgets.value-stepper.right-button-click' | translate }}" |
|||
[valueType]="valueType.DOUBLE" |
|||
[aliasController]="aliasController" |
|||
[targetDevice]="targetDevice" |
|||
[widgetType]="widgetType" |
|||
formControlName="rightButtonClick"></tb-set-value-action-settings> |
|||
</div> |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.disabled-state-hint' | translate}}" translate>widgets.button-state.disabled-state</div> |
|||
<tb-get-value-action-settings class="flex-1" |
|||
panelTitle="{{ 'widgets.button-state.disabled-state' | translate }}" |
|||
[valueType]="valueType.BOOLEAN" |
|||
stateLabel="{{ 'widgets.button-state.disabled' | translate }}" |
|||
[aliasController]="aliasController" |
|||
[targetDevice]="targetDevice" |
|||
[widgetType]="widgetType" |
|||
formControlName="disabledState"></tb-get-value-action-settings> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-panel" formGroupName="appearance"> |
|||
<div class="tb-form-panel-title" translate>widget-config.appearance</div> |
|||
<tb-image-cards-select rowHeight="3:1" |
|||
[cols]="{columns: 2, |
|||
breakpoints: { |
|||
'lt-sm': 1 |
|||
}}" |
|||
label="{{ 'widgets.button.layout' | translate }}" formControlName="type"> |
|||
<tb-image-cards-select-option *ngFor="let type of valueStepperTypes" |
|||
[value]="type" |
|||
[image]="valueStepperTypeImageMap.get(type)"> |
|||
{{ valueStepperTypeTranslationMap.get(type) | translate }} |
|||
</tb-image-cards-select-option> |
|||
</tb-image-cards-select> |
|||
<div class="tb-form-row"> |
|||
<mat-slide-toggle class="mat-slide" formControlName="autoScale"> |
|||
{{ 'widgets.value-stepper.auto-scale' | translate }} |
|||
</mat-slide-toggle> |
|||
</div> |
|||
|
|||
<div class="tb-form-row space-between column-xs"> |
|||
<div>{{ 'widgets.value-stepper.value-range' | translate }}</div> |
|||
<div class="flex flex-row items-center justify-start gap-2"> |
|||
<div class="tb-small-label" translate>widgets.value-stepper.min-range</div> |
|||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|||
<input matInput formControlName="minValueRange" type="number" placeholder="{{ 'widget-config.set' | translate }}"> |
|||
</mat-form-field> |
|||
<div class="tb-small-label" translate>widgets.value-stepper.max-range</div> |
|||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|||
<input matInput formControlName="maxValueRange" type="number" placeholder="{{ 'widget-config.set' | translate }}"> |
|||
</mat-form-field> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-row space-between"> |
|||
<div>{{ 'widgets.value-stepper.value-increment-decrement-step' | translate }}</div> |
|||
<mat-form-field appearance="outline" subscriptSizing="dynamic"> |
|||
<input matInput formControlName="valueStep" type="number" placeholder="{{ 'widget-config.set' | translate }}"> |
|||
</mat-form-field> |
|||
</div> |
|||
<div class="tb-form-row column-xs"> |
|||
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showValueBox"> |
|||
{{ 'widgets.value-stepper.value' | translate }} |
|||
</mat-slide-toggle> |
|||
<div class="flex flex-1 flex-row items-center justify-start gap-2"> |
|||
<tb-unit-input class="flex" formControlName="valueUnits"></tb-unit-input> |
|||
<mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic"> |
|||
<input matInput formControlName="valueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|||
<div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div> |
|||
</mat-form-field> |
|||
<tb-font-settings formControlName="valueFont" |
|||
[previewText]="valuePreviewFn"> |
|||
</tb-font-settings> |
|||
<tb-color-input asBoxInput |
|||
colorClearButton |
|||
formControlName="valueColor"> |
|||
</tb-color-input> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="tb-form-row space-between"> |
|||
<div>{{ 'widgets.value-stepper.value-box-background' | translate }}</div> |
|||
<tb-color-input asBoxInput |
|||
colorClearButton |
|||
formControlName="valueBoxBackground"> |
|||
</tb-color-input> |
|||
</div> |
|||
<div class="tb-form-row space-between column-xs"> |
|||
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showBorder"> |
|||
{{ 'widgets.value-stepper.border' | translate }} |
|||
</mat-slide-toggle> |
|||
<div class="flex flex-1 flex-row items-center justify-end gap-2"> |
|||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
|||
<input matInput formControlName="borderWidth" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|||
<div matSuffix class="lt-md:!hidden">px</div> |
|||
</mat-form-field> |
|||
<tb-color-input asBoxInput |
|||
colorClearButton |
|||
formControlName="borderColor"> |
|||
</tb-color-input> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-panel" formGroupName="buttonAppearance"> |
|||
<div class="flex flex-row items-center justify-between"> |
|||
<div class="tb-form-panel-title" translate>widgets.value-stepper.button-appearance</div> |
|||
<tb-toggle-select [(ngModel)]="buttonAppearanceType" [ngModelOptions]="{standalone: true}"> |
|||
<tb-toggle-option value="left">{{ 'widgets.value-stepper.left' | translate }}</tb-toggle-option> |
|||
<tb-toggle-option value="right">{{ 'widgets.value-stepper.right' | translate }}</tb-toggle-option> |
|||
</tb-toggle-select> |
|||
</div> |
|||
<div class="tb-form-panel no-border no-padding" formGroupName="leftButton" [class.!hidden]="buttonAppearanceType !== 'left'"> |
|||
<div class="tb-form-row"> |
|||
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showButton"> |
|||
{{ 'widgets.value-stepper.left-button' | translate }} |
|||
</mat-slide-toggle> |
|||
</div> |
|||
<div class="tb-form-row"> |
|||
<div>{{ 'widgets.value-stepper.icon' | translate }}</div> |
|||
<div class="flex flex-1 flex-row items-center justify-start gap-2"> |
|||
<mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic"> |
|||
<input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}"> |
|||
</mat-form-field> |
|||
<tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select> |
|||
<tb-material-icon-select asBoxInput |
|||
iconClearButton |
|||
formControlName="icon"> |
|||
</tb-material-icon-select> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-row space-between column-xs"> |
|||
<div>{{ 'widgets.power-button.power-on-colors' | translate }}</div> |
|||
<div class="flex flex-row items-center justify-start gap-3"> |
|||
<div class="flex flex-row items-center justify-start gap-2"> |
|||
<div translate>widgets.power-button.main</div> |
|||
<tb-color-input asBoxInput |
|||
formControlName="mainColorOn"> |
|||
</tb-color-input> |
|||
</div> |
|||
<mat-divider vertical></mat-divider> |
|||
<div class="flex flex-row items-center justify-start gap-2"> |
|||
<div translate>widgets.power-button.background</div> |
|||
<tb-color-input asBoxInput |
|||
formControlName="backgroundColorOn"> |
|||
</tb-color-input> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-row space-between column-xs"> |
|||
<div>{{ 'widgets.power-button.disabled-colors' | translate }}</div> |
|||
<div class="flex flex-row items-center justify-start gap-3"> |
|||
<div class="flex flex-row items-center justify-start gap-2"> |
|||
<div translate>widgets.power-button.main</div> |
|||
<tb-color-input asBoxInput |
|||
formControlName="mainColorDisabled"> |
|||
</tb-color-input> |
|||
</div> |
|||
<mat-divider vertical></mat-divider> |
|||
<div class="flex flex-row items-center justify-start gap-2"> |
|||
<div translate>widgets.power-button.background</div> |
|||
<tb-color-input asBoxInput |
|||
formControlName="backgroundColorDisabled"> |
|||
</tb-color-input> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-panel no-border no-padding" formGroupName="rightButton" [class.!hidden]="buttonAppearanceType !== 'right'"> |
|||
<div class="tb-form-row"> |
|||
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showButton"> |
|||
{{ 'widgets.value-stepper.right-button' | translate }} |
|||
</mat-slide-toggle> |
|||
</div> |
|||
<div class="tb-form-row"> |
|||
<div>{{ 'widgets.value-stepper.icon' | translate }}</div> |
|||
<div class="flex flex-1 flex-row items-center justify-start gap-2"> |
|||
<mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic"> |
|||
<input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}"> |
|||
</mat-form-field> |
|||
<tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select> |
|||
<tb-material-icon-select asBoxInput |
|||
iconClearButton |
|||
formControlName="icon"> |
|||
</tb-material-icon-select> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-row space-between column-xs"> |
|||
<div>{{ 'widgets.power-button.power-on-colors' | translate }}</div> |
|||
<div class="flex flex-row items-center justify-start gap-3"> |
|||
<div class="flex flex-row items-center justify-start gap-2"> |
|||
<div translate>widgets.power-button.main</div> |
|||
<tb-color-input asBoxInput |
|||
formControlName="mainColorOn"> |
|||
</tb-color-input> |
|||
</div> |
|||
<mat-divider vertical></mat-divider> |
|||
<div class="flex flex-row items-center justify-start gap-2"> |
|||
<div translate>widgets.power-button.background</div> |
|||
<tb-color-input asBoxInput |
|||
formControlName="backgroundColorOn"> |
|||
</tb-color-input> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-row space-between column-xs"> |
|||
<div>{{ 'widgets.power-button.disabled-colors' | translate }}</div> |
|||
<div class="flex flex-row items-center justify-start gap-3"> |
|||
<div class="flex flex-row items-center justify-start gap-2"> |
|||
<div translate>widgets.power-button.main</div> |
|||
<tb-color-input asBoxInput |
|||
formControlName="mainColorDisabled"> |
|||
</tb-color-input> |
|||
</div> |
|||
<mat-divider vertical></mat-divider> |
|||
<div class="flex flex-row items-center justify-start gap-2"> |
|||
<div translate>widgets.power-button.background</div> |
|||
<tb-color-input asBoxInput |
|||
formControlName="backgroundColorDisabled"> |
|||
</tb-color-input> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</ng-container> |
|||
@ -0,0 +1,191 @@ |
|||
///
|
|||
/// 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, Validators } from '@angular/forms'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { ValueType } from '@shared/models/constants'; |
|||
import { getTargetDeviceFromDatasources } from '@shared/models/widget-settings.models'; |
|||
import { |
|||
valueStepperDefaultSettings, |
|||
valueStepperTypeImages, |
|||
valueStepperTypes, |
|||
valueStepperTypeTranslations |
|||
} from '@home/components/widget/lib/rpc/value-stepper-widget.models'; |
|||
import { formatValue } from '@core/utils'; |
|||
|
|||
type ButtonAppearanceType = 'left' | 'right'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-value-stepper-widget-settings', |
|||
templateUrl: './value-stepper-widget-settings.component.html', |
|||
styleUrls: ['../widget-settings.scss'] |
|||
}) |
|||
export class ValueStepperWidgetSettingsComponent extends WidgetSettingsComponent { |
|||
|
|||
get targetDevice(): TargetDevice { |
|||
const datasources = this.widgetConfig?.config?.datasources; |
|||
return getTargetDeviceFromDatasources(datasources); |
|||
} |
|||
|
|||
get widgetType(): widgetType { |
|||
return this.widgetConfig?.widgetType; |
|||
} |
|||
get borderRadius(): string { |
|||
return this.widgetConfig?.config?.borderRadius; |
|||
} |
|||
|
|||
valueType = ValueType; |
|||
|
|||
valueStepperWidgetSettingsForm: UntypedFormGroup; |
|||
|
|||
valueStepperTypeTranslationMap = valueStepperTypeTranslations; |
|||
valueStepperTypes = valueStepperTypes; |
|||
valueStepperTypeImageMap = valueStepperTypeImages; |
|||
|
|||
buttonAppearanceType: ButtonAppearanceType = 'left'; |
|||
|
|||
valuePreviewFn = this._valuePreviewFn.bind(this); |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
private fb: UntypedFormBuilder) { |
|||
super(store); |
|||
} |
|||
|
|||
protected settingsForm(): UntypedFormGroup { |
|||
return this.valueStepperWidgetSettingsForm; |
|||
} |
|||
|
|||
protected defaultSettings(): WidgetSettings { |
|||
return {...valueStepperDefaultSettings}; |
|||
} |
|||
|
|||
protected onSettingsSet(settings: WidgetSettings) { |
|||
this.valueStepperWidgetSettingsForm = this.fb.group({ |
|||
initialState: [settings.initialState, []], |
|||
leftButtonClick: [settings.leftButtonClick, []], |
|||
rightButtonClick: [settings.rightButtonClick, []], |
|||
disabledState: [settings.disabledState, []], |
|||
|
|||
appearance: this.fb.group({ |
|||
type: [settings.appearance.type, []], |
|||
autoScale: [settings.appearance.autoScale, []], |
|||
minValueRange: [settings.appearance.minValueRange, []], |
|||
maxValueRange: [settings.appearance.maxValueRange, []], |
|||
valueStep: [settings.appearance.valueStep, [Validators.min(0)]], |
|||
showValueBox: [settings.appearance.showValueBox, []], |
|||
valueUnits: [settings.appearance.valueUnits, []], |
|||
valueDecimals: [settings.appearance.valueDecimals, []], |
|||
valueFont: [settings.appearance.valueFont, []], |
|||
valueColor: [settings.appearance.valueColor], |
|||
valueBoxBackground: [settings.appearance.valueBoxBackground, []], |
|||
showBorder: [settings.appearance.showBorder, []], |
|||
borderWidth: [settings.appearance.borderWidth, []], |
|||
borderColor: [settings.appearance.borderColor, []] |
|||
}), |
|||
|
|||
buttonAppearance: this.fb.group({ |
|||
leftButton: this.fb.group({ |
|||
showButton: [settings.buttonAppearance.leftButton.showButton], |
|||
icon: [settings.buttonAppearance.leftButton.icon], |
|||
iconSize: [settings.buttonAppearance.leftButton.iconSize], |
|||
iconSizeUnit: [settings.buttonAppearance.leftButton.iconSizeUnit], |
|||
mainColorOn: [settings.buttonAppearance.leftButton.mainColorOn, []], |
|||
backgroundColorOn: [settings.buttonAppearance.leftButton.backgroundColorOn, []], |
|||
mainColorDisabled: [settings.buttonAppearance.leftButton.mainColorDisabled, []], |
|||
backgroundColorDisabled: [settings.buttonAppearance.leftButton.backgroundColorDisabled, []] |
|||
}), |
|||
rightButton: this.fb.group({ |
|||
showButton: [settings.buttonAppearance.rightButton.showButton], |
|||
icon: [settings.buttonAppearance.rightButton.icon], |
|||
iconSize: [settings.buttonAppearance.rightButton.iconSize], |
|||
iconSizeUnit: [settings.buttonAppearance.rightButton.iconSizeUnit], |
|||
mainColorOn: [settings.buttonAppearance.rightButton.mainColorOn, []], |
|||
backgroundColorOn: [settings.buttonAppearance.rightButton.backgroundColorOn, []], |
|||
mainColorDisabled: [settings.buttonAppearance.rightButton.mainColorDisabled, []], |
|||
backgroundColorDisabled: [settings.buttonAppearance.rightButton.backgroundColorDisabled, []] |
|||
}) |
|||
}) |
|||
}); |
|||
} |
|||
|
|||
|
|||
protected validatorTriggers(): string[] { |
|||
return ['appearance.showValueBox', 'appearance.showBorder', |
|||
'buttonAppearance.leftButton.showButton', 'buttonAppearance.rightButton.showButton']; |
|||
} |
|||
|
|||
protected updateValidators(_emitEvent: boolean): void { |
|||
const showValueBox: boolean = this.valueStepperWidgetSettingsForm.get('appearance').get('showValueBox').value; |
|||
const showBorder: boolean = this.valueStepperWidgetSettingsForm.get('appearance').get('showBorder').value; |
|||
const showLeftButton: boolean = this.valueStepperWidgetSettingsForm.get('buttonAppearance').get('leftButton').get('showButton').value; |
|||
const showRightButton: boolean = this.valueStepperWidgetSettingsForm.get('buttonAppearance').get('rightButton').get('showButton').value; |
|||
if (showValueBox) { |
|||
this.valueStepperWidgetSettingsForm.get('appearance').get('valueUnits').enable(); |
|||
this.valueStepperWidgetSettingsForm.get('appearance').get('valueDecimals').enable(); |
|||
this.valueStepperWidgetSettingsForm.get('appearance').get('valueFont').enable(); |
|||
this.valueStepperWidgetSettingsForm.get('appearance').get('valueColor').enable(); |
|||
this.valueStepperWidgetSettingsForm.get('appearance').get('valueBoxBackground').enable(); |
|||
this.valueStepperWidgetSettingsForm.get('appearance').get('showBorder').enable({emitEvent: false}); |
|||
if (showBorder) { |
|||
this.valueStepperWidgetSettingsForm.get('appearance').get('borderWidth').enable(); |
|||
this.valueStepperWidgetSettingsForm.get('appearance').get('borderColor').enable(); |
|||
} else { |
|||
this.valueStepperWidgetSettingsForm.get('appearance').get('borderWidth').disable(); |
|||
this.valueStepperWidgetSettingsForm.get('appearance').get('borderColor').disable(); |
|||
} |
|||
} else { |
|||
this.valueStepperWidgetSettingsForm.get('appearance').get('valueUnits').disable(); |
|||
this.valueStepperWidgetSettingsForm.get('appearance').get('valueDecimals').disable(); |
|||
this.valueStepperWidgetSettingsForm.get('appearance').get('valueFont').disable(); |
|||
this.valueStepperWidgetSettingsForm.get('appearance').get('valueColor').disable(); |
|||
this.valueStepperWidgetSettingsForm.get('appearance').get('valueBoxBackground').disable(); |
|||
this.valueStepperWidgetSettingsForm.get('appearance').get('showBorder').disable({emitEvent: false}); |
|||
this.valueStepperWidgetSettingsForm.get('appearance').get('borderWidth').disable(); |
|||
this.valueStepperWidgetSettingsForm.get('appearance').get('borderColor').disable(); |
|||
} |
|||
this.buttonValidators(showLeftButton, 'leftButton'); |
|||
this.buttonValidators(showRightButton, 'rightButton'); |
|||
} |
|||
|
|||
private buttonValidators(showButtonValue: boolean, button: string) { |
|||
if (showButtonValue) { |
|||
this.valueStepperWidgetSettingsForm.get('buttonAppearance').get(button).get('icon').enable() |
|||
this.valueStepperWidgetSettingsForm.get('buttonAppearance').get(button).get('iconSize').enable() |
|||
this.valueStepperWidgetSettingsForm.get('buttonAppearance').get(button).get('iconSizeUnit').enable() |
|||
this.valueStepperWidgetSettingsForm.get('buttonAppearance').get(button).get('mainColorOn').enable() |
|||
this.valueStepperWidgetSettingsForm.get('buttonAppearance').get(button).get('backgroundColorOn').enable() |
|||
this.valueStepperWidgetSettingsForm.get('buttonAppearance').get(button).get('mainColorDisabled').enable() |
|||
this.valueStepperWidgetSettingsForm.get('buttonAppearance').get(button).get('backgroundColorDisabled').enable() |
|||
} else { |
|||
this.valueStepperWidgetSettingsForm.get('buttonAppearance').get(button).get('icon').disable() |
|||
this.valueStepperWidgetSettingsForm.get('buttonAppearance').get(button).get('iconSize').disable() |
|||
this.valueStepperWidgetSettingsForm.get('buttonAppearance').get(button).get('iconSizeUnit').disable() |
|||
this.valueStepperWidgetSettingsForm.get('buttonAppearance').get(button).get('mainColorOn').disable() |
|||
this.valueStepperWidgetSettingsForm.get('buttonAppearance').get(button).get('backgroundColorOn').disable() |
|||
this.valueStepperWidgetSettingsForm.get('buttonAppearance').get(button).get('mainColorDisabled').disable() |
|||
this.valueStepperWidgetSettingsForm.get('buttonAppearance').get(button).get('backgroundColorDisabled').disable() |
|||
} |
|||
} |
|||
|
|||
private _valuePreviewFn(): string { |
|||
const units: string = this.valueStepperWidgetSettingsForm.get('appearance').get('valueUnits').value; |
|||
const decimals: number = this.valueStepperWidgetSettingsForm.get('appearance').get('valueDecimals').value; |
|||
return formatValue(48, decimals, units, false); |
|||
} |
|||
} |
|||
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
Loading…
Reference in new issue