Browse Source

UI: Refactoring and improvements

pull/11391/head
Igor Kulikov 2 years ago
parent
commit
0beeb99b99
  1. 4
      application/src/main/data/json/system/widget_bundles/cards.json
  2. 26
      application/src/main/data/json/system/widget_types/iot_svg.json
  3. 10
      ui-ngx/src/app/modules/home/components/widget/config/basic/button/action-button-basic-config.component.html
  4. 6
      ui-ngx/src/app/modules/home/components/widget/config/basic/button/command-button-basic-config.component.html
  5. 16
      ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html
  6. 16
      ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.html
  7. 12
      ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html
  8. 16
      ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html
  9. 8
      ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html
  10. 8
      ui-ngx/src/app/modules/home/components/widget/lib/settings/button/action-button-widget-settings.component.html
  11. 6
      ui-ngx/src/app/modules/home/components/widget/lib/settings/button/command-button-widget-settings.component.html
  12. 16
      ui-ngx/src/app/modules/home/components/widget/lib/settings/button/power-button-widget-settings.component.html
  13. 16
      ui-ngx/src/app/modules/home/components/widget/lib/settings/button/toggle-button-widget-settings.component.html
  14. 4
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings-panel.component.html
  15. 4
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings-panel.component.ts
  16. 12
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings.component.ts
  17. 2
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/set-value-action-settings-panel.component.html
  18. 2
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action-settings-panel.component.html
  19. 29
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.html
  20. 44
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.ts
  21. 6
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.models.ts
  22. 16
      ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html
  23. 8
      ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html
  24. 12
      ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html
  25. 46
      ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts
  26. 4
      ui-ngx/src/app/shared/components/value-input.component.html
  27. 12
      ui-ngx/src/app/shared/components/value-input.component.ts
  28. 33
      ui-ngx/src/app/shared/pipe/custom-translate.pipe.ts
  29. 4
      ui-ngx/src/app/shared/shared.module.ts
  30. 3
      ui-ngx/src/assets/locale/locale.constant-en_US.json
  31. 15
      ui-ngx/src/assets/widget/svg/drawing.svg

4
application/src/main/data/json/system/widget_bundles/cards.json

File diff suppressed because one or more lines are too long

26
application/src/main/data/json/system/widget_types/iot_svg.json

@ -0,0 +1,26 @@
{
"fqn": "iot_svg",
"name": "IoT SVG",
"deprecated": false,
"image": null,
"description": "IoT SVG",
"descriptor": {
"type": "rpc",
"sizeX": 3.5,
"sizeY": 3.5,
"resources": [],
"templateHtml": "<tb-iot-svg-widget\n [ctx]='ctx'\n [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-iot-svg-widget>",
"templateCss": "",
"controllerScript": "self.onInit = function() {\n self.ctx.$scope.actionWidget.onInit();\n}\n\nself.typeParameters = function() {\n return {\n previewWidth: '280px',\n previewHeight: '280px',\n embedTitlePanel: true,\n displayRpcMessageToast: false\n };\n};\n\nself.onDestroy = function() {\n}\n",
"settingsSchema": "",
"dataKeySettingsSchema": "{}\n",
"settingsDirective": "",
"hasBasicMode": true,
"basicModeDirective": "tb-iot-svg-basic-config",
"defaultConfig": "{\"showTitle\":true,\"backgroundColor\":\"#ffffff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{},\"title\":\"IoT SVG\",\"dropShadow\":true,\"enableFullscreen\":false,\"widgetStyle\":{},\"actions\":{},\"widgetCss\":\"\",\"noDataDisplayMessage\":\"\",\"titleFont\":{\"size\":16,\"sizeUnit\":\"px\",\"family\":\"Roboto\",\"weight\":\"500\",\"style\":null,\"lineHeight\":\"1.6\"},\"showTitleIcon\":false,\"titleTooltip\":\"\",\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"pageSize\":1024,\"titleIcon\":\"mdi:lightbulb-outline\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"configMode\":\"basic\",\"targetDevice\":null,\"titleColor\":null,\"borderRadius\":null}"
},
"tags": [
"svg",
"scada"
]
}

10
ui-ngx/src/app/modules/home/components/widget/config/basic/button/action-button-basic-config.component.html

@ -29,7 +29,7 @@
<div class="tb-form-row">
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.action-button.on-click-hint' | translate}}" translate>widgets.action-button.on-click</div>
<tb-widget-action-settings fxFlex
panelTitle="widgets.action-button.on-click"
panelTitle="{{ 'widgets.action-button.on-click' | translate }}"
[callbacks]="callbacks"
[widgetType]="widgetType"
formControlName="onClickAction">
@ -38,9 +38,9 @@
<div class="tb-form-row">
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.activated-state-hint' | translate}}" translate>widgets.button-state.activated-state</div>
<tb-get-value-action-settings fxFlex
panelTitle="widgets.button-state.activated-state"
panelTitle="{{ 'widgets.button-state.activated-state' | translate }}"
[valueType]="valueType.BOOLEAN"
stateLabel="widgets.button-state.activated"
stateLabel="{{ 'widgets.button-state.activated' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"
@ -49,9 +49,9 @@
<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 fxFlex
panelTitle="widgets.button-state.disabled-state"
panelTitle="{{ 'widgets.button-state.disabled-state' | translate }}"
[valueType]="valueType.BOOLEAN"
stateLabel="widgets.button-state.disabled"
stateLabel="{{ 'widgets.button-state.disabled' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"

6
ui-ngx/src/app/modules/home/components/widget/config/basic/button/command-button-basic-config.component.html

@ -22,7 +22,7 @@
<div class="tb-form-row space-between">
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.command-button.on-click-hint' | translate}}" translate>widgets.command-button.on-click</div>
<tb-set-value-action-settings fxFlex
panelTitle="widgets.command-button.on-click"
panelTitle="{{ 'widgets.command-button.on-click' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"
@ -31,9 +31,9 @@
<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 fxFlex
panelTitle="widgets.button-state.disabled-state"
panelTitle="{{ 'widgets.button-state.disabled-state' | translate }}"
[valueType]="valueType.BOOLEAN"
stateLabel="widgets.button-state.disabled"
stateLabel="{{ 'widgets.button-state.disabled' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"

16
ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html

@ -22,11 +22,11 @@
<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"
panelTitle="{{ 'widgets.rpc-state.initial-state' | translate }}"
[valueType]="valueType.BOOLEAN"
trueLabel="widgets.rpc-state.on"
falseLabel="widgets.rpc-state.off"
stateLabel="widgets.rpc-state.on"
trueLabel="{{ 'widgets.rpc-state.on' | translate }}"
falseLabel="{{ 'widgets.rpc-state.off' | translate }}"
stateLabel="{{ 'widgets.rpc-state.on' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"
@ -35,7 +35,7 @@
<div class="tb-form-row space-between">
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.power-button.power-on-hint' | translate}}" translate>widgets.power-button.power-on</div>
<tb-set-value-action-settings fxFlex
panelTitle="widgets.power-button.power-on"
panelTitle="{{ 'widgets.power-button.power-on' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"
@ -44,7 +44,7 @@
<div class="tb-form-row space-between">
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.power-button.power-off-hint' | translate}}" translate>widgets.power-button.power-off</div>
<tb-set-value-action-settings fxFlex
panelTitle="widgets.power-button.power-off"
panelTitle="{{ 'widgets.power-button.power-off' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"
@ -53,9 +53,9 @@
<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"
panelTitle="{{ 'widgets.rpc-state.disabled-state' | translate }}"
[valueType]="valueType.BOOLEAN"
stateLabel="widgets.rpc-state.disabled"
stateLabel="{{ 'widgets.rpc-state.disabled' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"

16
ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.html

@ -22,11 +22,11 @@
<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"
panelTitle="{{ 'widgets.rpc-state.initial-state' | translate }}"
[valueType]="valueType.BOOLEAN"
trueLabel="widgets.toggle-button.checked"
falseLabel="widgets.toggle-button.unchecked"
stateLabel="widgets.toggle-button.checked"
trueLabel="{{ 'widgets.toggle-button.checked' | translate }}"
falseLabel="{{ 'widgets.toggle-button.unchecked' | translate }}"
stateLabel="{{ 'widgets.toggle-button.checked' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"
@ -35,7 +35,7 @@
<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"
panelTitle="{{ 'widgets.toggle-button.check' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"
@ -44,7 +44,7 @@
<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"
panelTitle="{{ 'widgets.toggle-button.uncheck' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"
@ -53,9 +53,9 @@
<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"
panelTitle="{{ 'widgets.rpc-state.disabled-state' | translate }}"
[valueType]="valueType.BOOLEAN"
stateLabel="widgets.rpc-state.disabled"
stateLabel="{{ 'widgets.rpc-state.disabled' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"

12
ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html

@ -22,11 +22,11 @@
<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"
panelTitle="{{ 'widgets.rpc-state.initial-state' | translate }}"
[valueType]="valueType.BOOLEAN"
trueLabel="widgets.rpc-state.on"
falseLabel="widgets.rpc-state.off"
stateLabel="widgets.rpc-state.on"
trueLabel="{{ 'widgets.rpc-state.on' | translate }}"
falseLabel="{{ 'widgets.rpc-state.off' | translate }}"
stateLabel="{{ 'widgets.rpc-state.on' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"
@ -35,9 +35,9 @@
<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"
panelTitle="{{ 'widgets.rpc-state.disabled-state' | translate }}"
[valueType]="valueType.BOOLEAN"
stateLabel="widgets.rpc-state.disabled"
stateLabel="{{ 'widgets.rpc-state.disabled' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"

16
ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html

@ -22,11 +22,11 @@
<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"
panelTitle="{{ 'widgets.rpc-state.initial-state' | translate }}"
[valueType]="valueType.BOOLEAN"
trueLabel="widgets.rpc-state.on"
falseLabel="widgets.rpc-state.off"
stateLabel="widgets.rpc-state.on"
trueLabel="{{ 'widgets.rpc-state.on' | translate }}"
falseLabel="{{ 'widgets.rpc-state.off' | translate }}"
stateLabel="{{ 'widgets.rpc-state.on' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"
@ -35,7 +35,7 @@
<div class="tb-form-row space-between">
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.turn-on-hint' | translate}}" translate>widgets.rpc-state.turn-on</div>
<tb-set-value-action-settings fxFlex
panelTitle="widgets.rpc-state.turn-on"
panelTitle="{{ 'widgets.rpc-state.turn-on' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"
@ -44,7 +44,7 @@
<div class="tb-form-row space-between">
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.turn-off-hint' | translate}}" translate>widgets.rpc-state.turn-off</div>
<tb-set-value-action-settings fxFlex
panelTitle="widgets.rpc-state.turn-off"
panelTitle="{{ 'widgets.rpc-state.turn-off' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"
@ -53,9 +53,9 @@
<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"
panelTitle="{{ 'widgets.rpc-state.disabled-state' | translate }}"
[valueType]="valueType.BOOLEAN"
stateLabel="widgets.rpc-state.disabled"
stateLabel="{{ 'widgets.rpc-state.disabled' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"

8
ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html

@ -22,7 +22,7 @@
<div class="tb-form-row">
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.slider.initial-value-hint' | translate}}" translate>widgets.slider.initial-value</div>
<tb-get-value-action-settings fxFlex
panelTitle="widgets.slider.initial-value"
panelTitle="{{ 'widgets.slider.initial-value' | translate }}"
[valueType]="valueType.DOUBLE"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
@ -32,7 +32,7 @@
<div class="tb-form-row space-between">
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.slider.on-value-change-hint' | translate}}" translate>widgets.slider.on-value-change</div>
<tb-set-value-action-settings fxFlex
panelTitle="widgets.slider.on-value-change"
panelTitle="{{ 'widgets.slider.on-value-change' | translate }}"
[valueType]="valueType.DOUBLE"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
@ -42,9 +42,9 @@
<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"
panelTitle="{{ 'widgets.rpc-state.disabled-state' | translate }}"
[valueType]="valueType.BOOLEAN"
stateLabel="widgets.rpc-state.disabled"
stateLabel="{{ 'widgets.rpc-state.disabled' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"

8
ui-ngx/src/app/modules/home/components/widget/lib/settings/button/action-button-widget-settings.component.html

@ -21,9 +21,9 @@
<div class="tb-form-row">
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.activated-state-hint' | translate}}" translate>widgets.button-state.activated-state</div>
<tb-get-value-action-settings fxFlex
panelTitle="widgets.button-state.activated-state"
panelTitle="{{ 'widgets.button-state.activated-state' | translate }}"
[valueType]="valueType.BOOLEAN"
stateLabel="widgets.button-state.activated"
stateLabel="{{ 'widgets.button-state.activated' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"
@ -32,9 +32,9 @@
<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 fxFlex
panelTitle="widgets.button-state.disabled-state"
panelTitle="{{ 'widgets.button-state.disabled-state' | translate }}"
[valueType]="valueType.BOOLEAN"
stateLabel="widgets.button-state.disabled"
stateLabel="{{ 'widgets.button-state.disabled' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"

6
ui-ngx/src/app/modules/home/components/widget/lib/settings/button/command-button-widget-settings.component.html

@ -21,7 +21,7 @@
<div class="tb-form-row space-between">
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.command-button.on-click-hint' | translate}}" translate>widgets.command-button.on-click</div>
<tb-set-value-action-settings fxFlex
panelTitle="widgets.command-button.on-click"
panelTitle="{{ 'widgets.command-button.on-click' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"
@ -30,9 +30,9 @@
<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 fxFlex
panelTitle="widgets.button-state.disabled-state"
panelTitle="{{ 'widgets.button-state.disabled-state' | translate }}"
[valueType]="valueType.BOOLEAN"
stateLabel="widgets.button-state.disabled"
stateLabel="{{ 'widgets.button-state.disabled' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"

16
ui-ngx/src/app/modules/home/components/widget/lib/settings/button/power-button-widget-settings.component.html

@ -21,11 +21,11 @@
<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"
panelTitle="{{ 'widgets.rpc-state.initial-state' | translate }}"
[valueType]="valueType.BOOLEAN"
trueLabel="widgets.rpc-state.on"
falseLabel="widgets.rpc-state.off"
stateLabel="widgets.rpc-state.on"
trueLabel="{{ 'widgets.rpc-state.on' | translate }}"
falseLabel="{{ 'widgets.rpc-state.off' | translate }}"
stateLabel="{{ 'widgets.rpc-state.on' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"
@ -34,7 +34,7 @@
<div class="tb-form-row space-between">
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.power-button.power-on-hint' | translate}}" translate>widgets.power-button.power-on</div>
<tb-set-value-action-settings fxFlex
panelTitle="widgets.power-button.power-on "
panelTitle="{{ 'widgets.power-button.power-on' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"
@ -43,7 +43,7 @@
<div class="tb-form-row space-between">
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.power-button.power-off-hint' | translate}}" translate>widgets.power-button.power-off</div>
<tb-set-value-action-settings fxFlex
panelTitle="widgets.power-button.power-off"
panelTitle="{{ 'widgets.power-button.power-off' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"
@ -52,9 +52,9 @@
<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"
panelTitle="{{ 'widgets.rpc-state.disabled-state' | translate }}"
[valueType]="valueType.BOOLEAN"
stateLabel="widgets.rpc-state.disabled"
stateLabel="{{ 'widgets.rpc-state.disabled' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"

16
ui-ngx/src/app/modules/home/components/widget/lib/settings/button/toggle-button-widget-settings.component.html

@ -21,11 +21,11 @@
<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"
panelTitle="{{ 'widgets.rpc-state.initial-state' | translate }}"
[valueType]="valueType.BOOLEAN"
trueLabel="widgets.toggle-button.checked"
falseLabel="widgets.toggle-button.unchecked"
stateLabel="widgets.toggle-button.checked"
trueLabel="{{ 'widgets.toggle-button.checked' | translate }}"
falseLabel="{{ 'widgets.toggle-button.unchecked' | translate }}"
stateLabel="{{ 'widgets.toggle-button.checked' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"
@ -34,7 +34,7 @@
<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"
panelTitle="{{ 'widgets.toggle-button.check' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"
@ -43,7 +43,7 @@
<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"
panelTitle="{{ 'widgets.toggle-button.uncheck' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"
@ -52,9 +52,9 @@
<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"
panelTitle="{{ 'widgets.rpc-state.disabled-state' | translate }}"
[valueType]="valueType.BOOLEAN"
stateLabel="widgets.rpc-state.disabled"
stateLabel="{{ 'widgets.rpc-state.disabled' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"

4
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings-panel.component.html

@ -16,7 +16,7 @@
-->
<div class="tb-action-settings-panel" [formGroup]="getValueSettingsFormGroup">
<div class="tb-action-settings-title">{{ panelTitle | translate }}</div>
<div class="tb-action-settings-title">{{ panelTitle }}</div>
<div class="tb-action-settings-panel-content">
<div class="tb-form-row">
<div class="fixed-title-width" >{{ 'widgets.value-action.action' | translate }}</div>
@ -122,7 +122,7 @@
helpId="widget/lib/rpc/parse_value_fn">
</tb-js-func>
<div *ngIf="valueType === ValueType.BOOLEAN" class="tb-form-row align-start no-gap column-xs">
<div class="fixed-title-width fixed-title-height">{{ 'widgets.value-action.state-when-result-is' | translate:{state: (stateLabel | translate)} }}</div>
<div class="fixed-title-width fixed-title-height">{{ 'widgets.value-action.state-when-result-is' | translate:{state: stateLabel} }}</div>
<tb-value-input
fxFlex
[valueType]="(getValueSettingsFormGroup.get('action').value === getValueAction.GET_DASHBOARD_STATE &&

4
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings-panel.component.ts

@ -53,10 +53,10 @@ export class GetValueActionSettingsPanelComponent extends PageComponent implemen
valueType: ValueType;
@Input()
trueLabel = 'value.true';
trueLabel: string;
@Input()
falseLabel = 'value.false';
falseLabel: string;
@Input()
stateLabel: string;

12
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings.component.ts

@ -62,10 +62,10 @@ export class GetValueActionSettingsComponent implements OnInit, ControlValueAcce
valueType: ValueType;
@Input()
trueLabel = 'value.true';
trueLabel: string;
@Input()
falseLabel = 'value.false';
falseLabel: string;
@Input()
stateLabel: string;
@ -95,6 +95,12 @@ export class GetValueActionSettingsComponent implements OnInit, ControlValueAcce
private cd: ChangeDetectorRef) {}
ngOnInit(): void {
if (!this.trueLabel) {
this.trueLabel = this.translate.instant('value.true');
}
if (!this.falseLabel) {
this.falseLabel = this.translate.instant('value.false');
}
}
registerOnChange(fn: any): void {
@ -155,7 +161,7 @@ export class GetValueActionSettingsComponent implements OnInit, ControlValueAcce
case GetValueAction.DO_NOTHING:
if (this.valueType === ValueType.BOOLEAN) {
this.displayValue =
this.translate.instant(!!this.modelValue.defaultValue ? this.trueLabel : this.falseLabel);
!!this.modelValue.defaultValue ? this.trueLabel : this.falseLabel;
} else {
this.displayValue = this.modelValue.defaultValue + '';
}

2
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/set-value-action-settings-panel.component.html

@ -16,7 +16,7 @@
-->
<div class="tb-action-settings-panel" [formGroup]="setValueSettingsFormGroup">
<div class="tb-action-settings-title">{{ panelTitle | translate }}</div>
<div class="tb-action-settings-title">{{ panelTitle }}</div>
<div class="tb-action-settings-panel-content">
<div class="tb-form-row">
<div class="fixed-title-width" >{{ 'widgets.value-action.action' | translate }}</div>

2
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action-settings-panel.component.html

@ -16,7 +16,7 @@
-->
<div class="tb-action-settings-panel" [formGroup]="widgetActionFormGroup">
<div class="tb-action-settings-title">{{ panelTitle | translate }}</div>
<div class="tb-action-settings-title">{{ panelTitle }}</div>
<div class="tb-action-settings-panel-content">
<tb-widget-action
formControlName="widgetAction"

29
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.html

@ -15,16 +15,19 @@
limitations under the License.
-->
<ng-container [formGroup]="scadaObjectSettingsFormGroup">
<div>{{ metadata?.title }}</div>
<ng-container [formGroup]="iotSvgObjectSettingsFormGroup">
<div>{{ metadata?.title | customTranslate }}</div>
<div *ngIf="metadata?.behavior?.length" class="tb-form-panel">
<div class="tb-form-panel-title" translate>widgets.slider.behavior</div>
<div class="tb-form-panel-title" translate>iot-svg.behavior</div>
<div *ngFor="let behaviour of metadata.behavior" class="tb-form-row">
<div class="fixed-title-width">{{ behaviour.name }}</div>
<div class="fixed-title-width" tb-hint-tooltip-icon="{{ behaviour.hint | customTranslate }}">{{ behaviour.name | customTranslate }}</div>
<tb-get-value-action-settings *ngIf="behaviour.type === IotSvgBehaviorType.value"
fxFlex
panelTitle="{{ behaviour.name }}"
panelTitle="{{ behaviour.name | customTranslate }}"
[valueType]="behaviour.valueType"
[trueLabel]="behaviour.trueLabel | customTranslate"
[falseLabel]="behaviour.falseLabel | customTranslate"
[stateLabel]="behaviour.stateLabel | customTranslate"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"
@ -32,7 +35,7 @@
</tb-get-value-action-settings>
<tb-set-value-action-settings *ngIf="behaviour.type === IotSvgBehaviorType.action"
fxFlex
panelTitle="{{ behaviour.name }}"
panelTitle="{{ behaviour.name | customTranslate }}"
[valueType]="behaviour.valueType"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
@ -41,7 +44,7 @@
</tb-set-value-action-settings>
<tb-widget-action-settings *ngIf="behaviour.type === IotSvgBehaviorType.widgetAction"
fxFlex
panelTitle="{{ behaviour.name }}"
panelTitle="{{ behaviour.name | customTranslate }}"
[callbacks]="callbacks"
[widgetType]="widgetType"
formControlName="{{ behaviour.id }}">
@ -51,15 +54,15 @@
<div *ngIf="propertyRows?.length" class="tb-form-panel">
<div *ngFor="let propertyRow of propertyRows" class="tb-form-row space-between" [class]="propertyRow.rowClass">
<mat-slide-toggle *ngIf="propertyRow.switch" class="mat-slide fixed-title-width" formControlName="{{ propertyRow.switch.id }}">
{{ propertyRow.label }}
{{ propertyRow.label | customTranslate }}
</mat-slide-toggle>
<div *ngIf="!propertyRow.switch" class="fixed-title-width">{{ propertyRow.label }}</div>
<div *ngIf="!propertyRow.switch" class="fixed-title-width">{{ propertyRow.label | customTranslate }}</div>
<div fxLayout="row" fxFlex fxLayoutAlign="end center" fxLayoutGap="8px">
<ng-container *ngFor="let property of propertyRow.properties">
<div *ngIf="property.subLabel" class="tb-small-label">{{ property.subLabel }}</div>
<div *ngIf="property.subLabel" class="tb-small-label">{{ property.subLabel | customTranslate }}</div>
<mat-form-field *ngIf="property.type === 'string'" [class]="property.fieldClass" appearance="outline" subscriptSizing="dynamic">
<input matInput formControlName="{{ property.id }}" [required]="property.required" placeholder="{{ 'widget-config.set' | translate }}">
<div fxHide.lt-md matSuffix *ngIf="property.fieldSuffix">{{ property.fieldSuffix }}</div>
<div fxHide.lt-md matSuffix *ngIf="property.fieldSuffix">{{ property.fieldSuffix | customTranslate }}</div>
</mat-form-field>
<tb-color-input *ngIf="property.type === 'color'"
[required]="property.required"
@ -71,13 +74,13 @@
<tb-color-settings *ngIf="property.type === 'color-settings'"
[class]="property.fieldClass"
formControlName="{{ property.id }}"
settingsKey="{{ property.name }}">
settingsKey="{{ property.name | customTranslate }}">
</tb-color-settings>
<mat-form-field *ngIf="property.type === 'number'" [class]="property.fieldClass" appearance="outline" class="number" subscriptSizing="dynamic">
<input matInput formControlName="{{ property.id }}" [required]="property.required"
[min]="property.min" [max]="property.max" [step]="property.step"
type="number" placeholder="{{ 'widget-config.set' | translate }}">
<div fxHide.lt-md matSuffix *ngIf="property.fieldSuffix">{{ property.fieldSuffix }}</div>
<div fxHide.lt-md matSuffix *ngIf="property.fieldSuffix">{{ property.fieldSuffix | customTranslate }}</div>
</mat-form-field>
<tb-font-settings *ngIf="property.type === 'font'"
[class]="property.fieldClass"

44
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.component.ts

@ -29,8 +29,8 @@ import {
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import {
defaultScadaObjectSettings,
parseScadaObjectMetadataFromContent,
defaultIotSvgObjectSettings,
parseIotSvgMetadataFromContent,
IotSvgBehaviorType,
IotSvgMetadata,
IotSvgObjectSettings
@ -41,7 +41,7 @@ import { IAliasController } from '@core/api/widget-api.models';
import { TargetDevice, widgetType } from '@shared/models/widget.models';
import { isDefinedAndNotNull } from '@core/utils';
import {
ScadaPropertyRow,
IotSvgPropertyRow,
toPropertyRows
} from '@home/components/widget/lib/settings/common/svg/iot-svg-object-settings.models';
import { merge, Observable, Subscription } from 'rxjs';
@ -93,10 +93,10 @@ export class IotSvgObjectSettingsComponent implements OnInit, OnChanges, Control
private validatorTriggers: string[];
private validatorSubscription: Subscription;
public scadaObjectSettingsFormGroup: UntypedFormGroup;
public iotSvgObjectSettingsFormGroup: UntypedFormGroup;
metadata: IotSvgMetadata;
propertyRows: ScadaPropertyRow[];
propertyRows: IotSvgPropertyRow[];
constructor(protected store: Store<AppState>,
private fb: UntypedFormBuilder,
@ -105,8 +105,8 @@ export class IotSvgObjectSettingsComponent implements OnInit, OnChanges, Control
}
ngOnInit(): void {
this.scadaObjectSettingsFormGroup = this.fb.group({});
this.scadaObjectSettingsFormGroup.valueChanges.subscribe(() => {
this.iotSvgObjectSettingsFormGroup = this.fb.group({});
this.iotSvgObjectSettingsFormGroup.valueChanges.subscribe(() => {
this.updateModel();
});
this.loadMetadata();
@ -133,9 +133,9 @@ export class IotSvgObjectSettingsComponent implements OnInit, OnChanges, Control
setDisabledState(isDisabled: boolean): void {
this.disabled = isDisabled;
if (isDisabled) {
this.scadaObjectSettingsFormGroup.disable({emitEvent: false});
this.iotSvgObjectSettingsFormGroup.disable({emitEvent: false});
} else {
this.scadaObjectSettingsFormGroup.enable({emitEvent: false});
this.iotSvgObjectSettingsFormGroup.enable({emitEvent: false});
this.updateValidators();
}
}
@ -146,9 +146,9 @@ export class IotSvgObjectSettingsComponent implements OnInit, OnChanges, Control
}
validate(c: UntypedFormControl) {
const valid = this.scadaObjectSettingsFormGroup.valid;
const valid = this.iotSvgObjectSettingsFormGroup.valid;
return valid ? null : {
scadaObject: {
iotSvgObject: {
valid: false,
},
};
@ -162,13 +162,13 @@ export class IotSvgObjectSettingsComponent implements OnInit, OnChanges, Control
this.validatorTriggers = [];
this.http.get(this.svgPath, {responseType: 'text'}).subscribe(
(svgContent) => {
this.metadata = parseScadaObjectMetadataFromContent(svgContent);
this.metadata = parseIotSvgMetadataFromContent(svgContent);
this.propertyRows = toPropertyRows(this.metadata.properties);
for (const control of Object.keys(this.scadaObjectSettingsFormGroup.controls)) {
this.scadaObjectSettingsFormGroup.removeControl(control, {emitEvent: false});
for (const control of Object.keys(this.iotSvgObjectSettingsFormGroup.controls)) {
this.iotSvgObjectSettingsFormGroup.removeControl(control, {emitEvent: false});
}
for (const behaviour of this.metadata.behavior) {
this.scadaObjectSettingsFormGroup.addControl(behaviour.id, this.fb.control(null, []), {emitEvent: false});
this.iotSvgObjectSettingsFormGroup.addControl(behaviour.id, this.fb.control(null, []), {emitEvent: false});
}
for (const property of this.metadata.properties) {
if (property.disableOnProperty) {
@ -188,12 +188,12 @@ export class IotSvgObjectSettingsComponent implements OnInit, OnChanges, Control
validators.push(Validators.max(property.max));
}
}
this.scadaObjectSettingsFormGroup.addControl(property.id, this.fb.control(null, validators), {emitEvent: false});
this.iotSvgObjectSettingsFormGroup.addControl(property.id, this.fb.control(null, validators), {emitEvent: false});
}
if (this.validatorTriggers.length) {
const observables: Observable<any>[] = [];
for (const trigger of this.validatorTriggers) {
observables.push(this.scadaObjectSettingsFormGroup.get(trigger).valueChanges);
observables.push(this.iotSvgObjectSettingsFormGroup.get(trigger).valueChanges);
}
this.validatorSubscription = merge(...observables).subscribe(() => {
this.updateValidators();
@ -207,10 +207,10 @@ export class IotSvgObjectSettingsComponent implements OnInit, OnChanges, Control
private updateValidators() {
for (const trigger of this.validatorTriggers) {
const value: boolean = this.scadaObjectSettingsFormGroup.get(trigger).value;
const value: boolean = this.iotSvgObjectSettingsFormGroup.get(trigger).value;
this.metadata.properties.filter(p => p.disableOnProperty === trigger).forEach(
(p) => {
const control = this.scadaObjectSettingsFormGroup.get(p.id);
const control = this.iotSvgObjectSettingsFormGroup.get(p.id);
if (value) {
control.enable({emitEvent: false});
} else {
@ -223,9 +223,9 @@ export class IotSvgObjectSettingsComponent implements OnInit, OnChanges, Control
private setupValue() {
if (this.metadata) {
const defaults = defaultScadaObjectSettings(this.metadata);
const defaults = defaultIotSvgObjectSettings(this.metadata);
this.modelValue = {...defaults, ...this.modelValue};
this.scadaObjectSettingsFormGroup.patchValue(
this.iotSvgObjectSettingsFormGroup.patchValue(
this.modelValue, {emitEvent: false}
);
this.setDisabledState(this.disabled);
@ -233,7 +233,7 @@ export class IotSvgObjectSettingsComponent implements OnInit, OnChanges, Control
}
private updateModel() {
this.modelValue = this.scadaObjectSettingsFormGroup.getRawValue();
this.modelValue = this.iotSvgObjectSettingsFormGroup.getRawValue();
this.propagateChange(this.modelValue);
}

6
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/svg/iot-svg-object-settings.models.ts

@ -16,15 +16,15 @@
import { IotSvgProperty } from '@home/components/widget/lib/svg/iot-svg.models';
export interface ScadaPropertyRow {
export interface IotSvgPropertyRow {
label: string;
properties: IotSvgProperty[];
switch?: IotSvgProperty;
rowClass?: string;
}
export const toPropertyRows = (properties: IotSvgProperty[]): ScadaPropertyRow[] => {
const result: ScadaPropertyRow[] = [];
export const toPropertyRows = (properties: IotSvgProperty[]): IotSvgPropertyRow[] => {
const result: IotSvgPropertyRow[] = [];
for (const property of properties) {
let propertyRow = result.find(r => r.label === property.name);
if (!propertyRow) {

16
ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html

@ -21,11 +21,11 @@
<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"
panelTitle="{{ 'widgets.rpc-state.initial-state' | translate }}"
[valueType]="valueType.BOOLEAN"
trueLabel="widgets.rpc-state.on"
falseLabel="widgets.rpc-state.off"
stateLabel="widgets.rpc-state.on"
trueLabel="{{ 'widgets.rpc-state.on' | translate }}"
falseLabel="{{ 'widgets.rpc-state.off' | translate }}"
stateLabel="{{ 'widgets.rpc-state.on' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"
@ -34,7 +34,7 @@
<div class="tb-form-row space-between">
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.turn-on-hint' | translate}}" translate>widgets.rpc-state.turn-on</div>
<tb-set-value-action-settings fxFlex
panelTitle="widgets.rpc-state.turn-on"
panelTitle="{{ 'widgets.rpc-state.turn-on' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"
@ -43,7 +43,7 @@
<div class="tb-form-row space-between">
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.turn-off-hint' | translate}}" translate>widgets.rpc-state.turn-off</div>
<tb-set-value-action-settings fxFlex
panelTitle="widgets.rpc-state.turn-off"
panelTitle="{{ 'widgets.rpc-state.turn-off' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"
@ -52,9 +52,9 @@
<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"
panelTitle="{{ 'widgets.rpc-state.disabled-state' | translate }}"
[valueType]="valueType.BOOLEAN"
stateLabel="widgets.rpc-state.disabled"
stateLabel="{{ 'widgets.rpc-state.disabled' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"

8
ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html

@ -21,7 +21,7 @@
<div class="tb-form-row">
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.slider.initial-value-hint' | translate}}" translate>widgets.slider.initial-value</div>
<tb-get-value-action-settings fxFlex
panelTitle="widgets.slider.initial-value"
panelTitle="{{ 'widgets.slider.initial-value' | translate }}"
[valueType]="valueType.DOUBLE"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
@ -31,7 +31,7 @@
<div class="tb-form-row space-between">
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.slider.on-value-change-hint' | translate}}" translate>widgets.slider.on-value-change</div>
<tb-set-value-action-settings fxFlex
panelTitle="widgets.slider.on-value-change"
panelTitle="{{ 'widgets.slider.on-value-change' | translate }}"
[valueType]="valueType.DOUBLE"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
@ -41,9 +41,9 @@
<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"
panelTitle="{{ 'widgets.rpc-state.disabled-state' | translate }}"
[valueType]="valueType.BOOLEAN"
stateLabel="widgets.rpc-state.disabled"
stateLabel="{{ 'widgets.rpc-state.disabled' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"

12
ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html

@ -21,11 +21,11 @@
<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"
panelTitle="{{ 'widgets.rpc-state.initial-state' | translate }}"
[valueType]="valueType.BOOLEAN"
trueLabel="widgets.rpc-state.on"
falseLabel="widgets.rpc-state.off"
stateLabel="widgets.rpc-state.on"
trueLabel="{{ 'widgets.rpc-state.on' | translate }}"
falseLabel="{{ 'widgets.rpc-state.off' | translate }}"
stateLabel="{{ 'widgets.rpc-state.on' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"
@ -34,9 +34,9 @@
<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"
panelTitle="{{ 'widgets.rpc-state.disabled-state' | translate }}"
[valueType]="valueType.BOOLEAN"
stateLabel="widgets.rpc-state.disabled"
stateLabel="{{ 'widgets.rpc-state.disabled' | translate }}"
[aliasController]="aliasController"
[targetDevice]="targetDevice"
[widgetType]="widgetType"

46
ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts

@ -24,7 +24,14 @@ import {
SetValueSettings,
ValueToDataType
} from '@shared/models/action-widget-settings.models';
import { formatValue, isDefinedAndNotNull, isUndefinedOrNull, mergeDeep, parseFunction } from '@core/utils';
import {
createLabelFromSubscriptionEntityInfo,
formatValue,
isDefinedAndNotNull,
isUndefinedOrNull,
mergeDeep,
parseFunction
} from '@core/utils';
import { BehaviorSubject, forkJoin, Observable, Observer } from 'rxjs';
import { map, share } from 'rxjs/operators';
import { ValueAction, ValueGetter, ValueSetter } from '@home/components/widget/lib/action/action-widget.models';
@ -80,6 +87,7 @@ export enum IotSvgBehaviorType {
export interface IotSvgBehaviorBase {
id: string;
name: string;
hint?: string;
type: IotSvgBehaviorType;
}
@ -87,6 +95,9 @@ export interface IotSvgBehaviorValue extends IotSvgBehaviorBase {
valueType: ValueType;
defaultValue: any;
valueId: string;
trueLabel?: string;
falseLabel?: string;
stateLabel?: string;
}
export interface IotSvgBehaviorAction extends IotSvgBehaviorBase {
@ -121,23 +132,6 @@ export interface IotSvgNumberProperty extends IotSvgPropertyBase {
export type IotSvgProperty = IotSvgPropertyBase & IotSvgNumberProperty;
export type ScadaObjectElementActionTrigger = 'click';
export type ScadaObjectActionType = 'updateValue';
export type ScadaObjectActionUpdateValueType = 'toggle' | 'increment' | 'constant';
export interface ScadaObjectElementAction {
trigger: ScadaObjectElementActionTrigger;
enabledTriggerValues?: string[];
enabledConditionFunction?: string;
enabledCondition?: (values: {[key: string]: any}) => boolean;
actionType: ScadaObjectActionType;
updateValueId?: string;
updateValueType?: ScadaObjectActionUpdateValueType;
updateValueConstant?: any;
updateValueInc?: number;
}
export interface IotSvgMetadata {
title: string;
stateRenderFunction?: string;
@ -155,16 +149,16 @@ export const emptyMetadata: IotSvgMetadata = {
};
export const parseScadaObjectMetadataFromContent = (svgContent: string): IotSvgMetadata => {
export const parseIotSvgMetadataFromContent = (svgContent: string): IotSvgMetadata => {
try {
const svgDoc = new DOMParser().parseFromString(svgContent, 'image/svg+xml');
return parseScadaObjectMetadataFromDom(svgDoc);
return parseIotSvgMetadataFromDom(svgDoc);
} catch (_e) {
return emptyMetadata;
}
};
const parseScadaObjectMetadataFromDom = (svgDoc: Document): IotSvgMetadata => {
const parseIotSvgMetadataFromDom = (svgDoc: Document): IotSvgMetadata => {
try {
const elements = svgDoc.getElementsByTagName('tb:metadata');
if (elements.length) {
@ -232,7 +226,7 @@ const defaultWidgetActionSettings = (widgetAction: IotSvgBehavior): WidgetAction
stateEntityParamName: null
});
export const defaultScadaObjectSettings = (metadata: IotSvgMetadata): IotSvgObjectSettings => {
export const defaultIotSvgObjectSettings = (metadata: IotSvgMetadata): IotSvgObjectSettings => {
const settings: IotSvgObjectSettings = {};
for (const behavior of metadata.behavior) {
if (behavior.type === IotSvgBehaviorType.value) {
@ -285,8 +279,8 @@ export class IotSvgObject {
return this.ctx.http.get(this.svgPath, {responseType: 'text'}).pipe(
map((inputSvgContent) => {
const doc: XMLDocument = new DOMParser().parseFromString(inputSvgContent, 'image/svg+xml');
this.metadata = parseScadaObjectMetadataFromDom(doc);
const defaults = defaultScadaObjectSettings(this.metadata);
this.metadata = parseIotSvgMetadataFromDom(doc);
const defaults = defaultIotSvgObjectSettings(this.metadata);
this.settings = mergeDeep<IotSvgObjectSettings>({}, defaults, this.inputSettings || {});
this.prepareMetadata();
this.prepareSvgShape(doc);
@ -613,6 +607,10 @@ export class IotSvgObject {
if (isDefinedAndNotNull(value)) {
if (property.type === 'color-settings') {
return ColorProcessor.fromSettings(value);
} else if (property.type === 'string') {
const result = this.ctx.utilsService.customTranslation(value, value);
const entityInfo = this.ctx.defaultSubscription.getFirstEntityInfo();
return createLabelFromSubscriptionEntityInfo(entityInfo, result);
}
return value;
} else {

4
ui-ngx/src/app/shared/components/value-input.component.html

@ -70,8 +70,8 @@
</mat-form-field>
<mat-chip-listbox *ngIf="valueType === valueTypeEnum.BOOLEAN" fxFlex class="tb-boolean-input center-stretch"
[disabled]="disabled" name="value" #value="ngModel" [(ngModel)]="modelValue" (ngModelChange)="onValueChanged()">
<mat-chip-option [selectable]="!modelValue" [value]="true">{{ trueLabel | translate }}</mat-chip-option>
<mat-chip-option [selectable]="modelValue" [value]="false">{{ falseLabel | translate }}</mat-chip-option>
<mat-chip-option [selectable]="!modelValue" [value]="true">{{ trueLabel }}</mat-chip-option>
<mat-chip-option [selectable]="modelValue" [value]="false">{{ falseLabel }}</mat-chip-option>
</mat-chip-listbox>
<div *ngIf="valueType === valueTypeEnum.JSON" fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute">

12
ui-ngx/src/app/shared/components/value-input.component.ts

@ -35,6 +35,7 @@ import {
} from '@shared/components/dialog/json-object-edit-dialog.component';
import { BreakpointObserver } from '@angular/cdk/layout';
import { Subscription } from 'rxjs';
import { TranslateService } from '@ngx-translate/core';
type Layout = 'column' | 'row';
@ -67,10 +68,10 @@ export class ValueInputComponent implements OnInit, OnDestroy, OnChanges, Contro
valueType: ValueType;
@Input()
trueLabel = 'value.true';
trueLabel: string;
@Input()
falseLabel = 'value.false';
falseLabel: string;
@Input()
layout: ValueInputLayout | Layout = 'row';
@ -96,12 +97,19 @@ export class ValueInputComponent implements OnInit, OnDestroy, OnChanges, Contro
constructor(
private breakpointObserver: BreakpointObserver,
private cd: ChangeDetectorRef,
private translate: TranslateService,
public dialog: MatDialog,
) {
}
ngOnInit(): void {
if (!this.trueLabel) {
this.trueLabel = this.translate.instant('value.true');
}
if (!this.falseLabel) {
this.falseLabel = this.translate.instant('value.false');
}
this._subscription = new Subscription();
this.showValueType = !this.valueType;
this.computedLayout = this._computeLayout();

33
ui-ngx/src/app/shared/pipe/custom-translate.pipe.ts

@ -0,0 +1,33 @@
///
/// 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 { Pipe, PipeTransform } from '@angular/core';
import { UtilsService } from '@core/services/utils.service';
@Pipe({
name: 'customTranslate'
})
export class CustomTranslatePipe implements PipeTransform {
constructor(private utils: UtilsService) { }
transform(translationValue: string, defaultValue?: string): string {
if (!defaultValue) {
defaultValue = translationValue;
}
return this.utils.customTranslation(translationValue, defaultValue);
}
}

4
ui-ngx/src/app/shared/shared.module.ts

@ -218,6 +218,7 @@ import { EmbedImageDialogComponent } from '@shared/components/image/embed-image-
import { ImageGalleryDialogComponent } from '@shared/components/image/image-gallery-dialog.component';
import { RuleChainSelectPanelComponent } from '@shared/components/rule-chain/rule-chain-select-panel.component';
import { WidgetButtonComponent } from '@shared/components/button/widget-button.component';
import { CustomTranslatePipe } from '@shared/pipe/custom-translate.pipe';
export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) {
return markedOptionsService;
@ -236,6 +237,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
SafePipe,
ShortNumberPipe,
ImagePipe,
CustomTranslatePipe,
{
provide: FlowInjectionToken,
useValue: Flow
@ -361,6 +363,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
FileSizePipe,
DateAgoPipe,
ImagePipe,
CustomTranslatePipe,
SafePipe,
ShortNumberPipe,
SelectableColumnsPipe,
@ -614,6 +617,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
FileSizePipe,
DateAgoPipe,
ImagePipe,
CustomTranslatePipe,
SafePipe,
ShortNumberPipe,
SelectableColumnsPipe,

3
ui-ngx/src/assets/locale/locale.constant-en_US.json

@ -3216,6 +3216,9 @@
"error-entities": "There was an error creating {{count}} entities."
}
},
"iot-svg": {
"behavior": "Behavior"
},
"item": {
"selected": "Selected"
},

15
ui-ngx/src/assets/widget/svg/drawing.svg

@ -68,7 +68,9 @@
},
{
"id": "disabledState",
"name": "Disabled state",
"name": "{i18n:widgets.rpc-state.disabled-state}",
"hint": "{i18n:widgets.rpc-state.disabled-state-hint}",
"stateLabel": "{i18n:widgets.rpc-state.disabled}",
"type": "value",
"valueType": "BOOLEAN",
"defaultValue": false,
@ -77,6 +79,9 @@
{
"id": "onState",
"name": "On/Off state",
"trueLabel": "{i18n:widgets.rpc-state.on}",
"falseLabel": "{i18n:widgets.rpc-state.off}",
"stateLabel": "{i18n:widgets.rpc-state.on}",
"type": "value",
"valueType": "BOOLEAN",
"defaultValue": false,
@ -84,7 +89,8 @@
},
{
"id": "onUpdateState",
"name": "Power On",
"name": "{i18n:widgets.rpc-state.turn-on}",
"hint": "{i18n:widgets.rpc-state.turn-on-hint}",
"type": "action",
"valueType": "BOOLEAN",
"valueToDataType": "CONSTANT",
@ -92,7 +98,8 @@
},
{
"id": "offUpdateState",
"name": "Power Off",
"name": "{i18n:widgets.rpc-state.turn-off}",
"hint": "{i18n:widgets.rpc-state.turn-off-hint}",
"type": "action",
"valueType": "BOOLEAN",
"valueToDataType": "CONSTANT",
@ -124,7 +131,7 @@
"id": "levelTitle",
"name": "Level title",
"type": "string",
"default": "Level",
"default": "{i18n:widgets.battery-level.value}",
"disableOnProperty": "showLevelTitle",
"fieldClass": "flex"
},

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 18 KiB

Loading…
Cancel
Save