UI: Status widget: Implement advanced settings.

application/src/main/data/json/system/widget_types/status_widget.json

@@ -14,7 +14,7 @@
     "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.actionWidget.onInit();\n}\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '180px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        displayRpcMessageToast: false\n    };\n};\n\nself.onDestroy = function() {\n}\n",
     "settingsSchema": "",
     "dataKeySettingsSchema": "{}\n",
-    "settingsDirective": "",
+    "settingsDirective": "tb-status-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-status-widget-basic-config",
     "defaultConfig": "{\"showTitle\":false,\"backgroundColor\":\"rgba(0, 0, 0, 0)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{},\"title\":\"Status widget\",\"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}"

ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.ts

@@ -180,6 +180,7 @@ export class StatusWidgetComponent extends
   private onDisabled(value: boolean): void {
     const newDisabled = !!value;
     if (this.disabled !== newDisabled) {
+      this.disabled = newDisabled;
       this.updateDisabledState(this.disabled);
     }
   }

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

@@ -0,0 +1,82 @@
+<!--
+
+    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]="statusWidgetSettingsForm">
+  <div class="tb-form-panel">
+    <div class="tb-form-panel-title" translate>widgets.status-widget.behavior</div>
+    <div class="tb-form-row">
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}" translate>widgets.rpc-state.initial-state</div>
+      <tb-get-value-action-settings fxFlex
+                                    panelTitle="widgets.rpc-state.initial-state"
+                                    [valueType]="valueType.BOOLEAN"
+                                    trueLabel="widgets.rpc-state.on"
+                                    falseLabel="widgets.rpc-state.off"
+                                    stateLabel="widgets.rpc-state.on"
+                                    [aliasController]="aliasController"
+                                    [targetDevice]="targetDevice"
+                                    [widgetType]="widgetType"
+                                    formControlName="initialState"></tb-get-value-action-settings>
+    </div>
+    <div class="tb-form-row">
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
+      <tb-get-value-action-settings fxFlex
+                                    panelTitle="widgets.rpc-state.disabled-state"
+                                    [valueType]="valueType.BOOLEAN"
+                                    stateLabel="widgets.rpc-state.disabled"
+                                    [aliasController]="aliasController"
+                                    [targetDevice]="targetDevice"
+                                    [widgetType]="widgetType"
+                                    formControlName="disabledState"></tb-get-value-action-settings>
+    </div>
+  </div>
+  <div class="tb-form-panel">
+    <div class="tb-form-panel-title" translate>widget-config.appearance</div>
+    <tb-image-cards-select rowHeight="1:1"
+                           [cols]="{columns: 3,
+                                    breakpoints: {
+                                      'lt-sm': 1,
+                                      'lt-md': 2
+                                    }}"
+                           label="{{ 'widgets.status-widget.layout' | translate }}" formControlName="layout">
+      <tb-image-cards-select-option *ngFor="let layout of statusWidgetLayouts"
+                                    [value]="layout"
+                                    [image]="statusWidgetLayoutImageMap.get(layout)">
+        {{ statusWidgetLayoutTranslationMap.get(layout) | translate }}
+      </tb-image-cards-select-option>
+    </tb-image-cards-select>
+  </div>
+  <div class="tb-form-panel">
+    <div fxLayout="row" fxLayoutAlign="space-between center">
+      <div class="tb-form-panel-title" translate>widget-config.card-style</div>
+      <tb-toggle-select [(ngModel)]="cardStyleMode"
+                        [ngModelOptions]="{ standalone: true }">
+        <tb-toggle-option value="on">{{ 'widgets.status-widget.on' | translate }}</tb-toggle-option>
+        <tb-toggle-option value="off">{{ 'widgets.status-widget.off' | translate }}</tb-toggle-option>
+      </tb-toggle-select>
+    </div>
+    <tb-status-widget-state-settings
+        *ngIf="cardStyleMode === 'on'"
+        [layout]="statusWidgetSettingsForm.get('layout').value"
+        formControlName="onState">
+    </tb-status-widget-state-settings>
+    <tb-status-widget-state-settings
+        *ngIf="cardStyleMode === 'off'"
+        [layout]="statusWidgetSettingsForm.get('layout').value"
+        formControlName="offState">
+    </tb-status-widget-state-settings>
+  </div>
+</ng-container>

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

@@ -0,0 +1,79 @@
+///
+/// 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, Injector } from '@angular/core';
+import { TargetDevice, WidgetSettings, WidgetSettingsComponent, widgetType } from '@shared/models/widget.models';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import {
+  statusWidgetDefaultSettings,
+  statusWidgetLayoutImages,
+  statusWidgetLayouts,
+  statusWidgetLayoutTranslations
+} from '@home/components/widget/lib/indicator/status-widget.models';
+import { ValueType } from '@shared/models/constants';
+
+@Component({
+  selector: 'tb-status-widget-settings',
+  templateUrl: './status-widget-settings.component.html',
+  styleUrls: ['./../widget-settings.scss'],
+})
+export class StatusWidgetSettingsComponent extends WidgetSettingsComponent {
+
+  get targetDevice(): TargetDevice {
+    return this.widgetConfig?.config?.targetDevice;
+  }
+
+  get widgetType(): widgetType {
+    return this.widgetConfig?.widgetType;
+  }
+
+  statusWidgetLayouts = statusWidgetLayouts;
+
+  statusWidgetLayoutTranslationMap = statusWidgetLayoutTranslations;
+  statusWidgetLayoutImageMap = statusWidgetLayoutImages;
+
+  valueType = ValueType;
+
+  statusWidgetSettingsForm: UntypedFormGroup;
+
+  cardStyleMode = 'on';
+
+  constructor(protected store: Store<AppState>,
+              private $injector: Injector,
+              private fb: UntypedFormBuilder) {
+    super(store);
+  }
+
+  protected settingsForm(): UntypedFormGroup {
+    return this.statusWidgetSettingsForm;
+  }
+
+  protected defaultSettings(): WidgetSettings {
+    return {...statusWidgetDefaultSettings};
+  }
+
+  protected onSettingsSet(settings: WidgetSettings) {
+    this.statusWidgetSettingsForm = this.fb.group({
+      initialState: [settings.initialState, []],
+      disabledState: [settings.disabledState, []],
+      layout: [settings.layout, []],
+      onState: [settings.onState, []],
+      offState: [settings.offState, []]
+    });
+  }
+}

ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts

@@ -342,6 +342,9 @@ import {
 import {
   TimeSeriesChartWidgetSettingsComponent
 } from '@home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component';
+import {
+  StatusWidgetSettingsComponent
+} from '@home/components/widget/lib/settings/indicator/status-widget-settings.component';
 
 @NgModule({
   declarations: [
@@ -464,7 +467,8 @@ import {
     TimeSeriesChartKeySettingsComponent,
     TimeSeriesChartLineSettingsComponent,
     TimeSeriesChartBarSettingsComponent,
-    TimeSeriesChartWidgetSettingsComponent
+    TimeSeriesChartWidgetSettingsComponent,
+    StatusWidgetSettingsComponent
   ],
   imports: [
     CommonModule,
@@ -592,7 +596,8 @@ import {
     TimeSeriesChartKeySettingsComponent,
     TimeSeriesChartLineSettingsComponent,
     TimeSeriesChartBarSettingsComponent,
-    TimeSeriesChartWidgetSettingsComponent
+    TimeSeriesChartWidgetSettingsComponent,
+    StatusWidgetSettingsComponent
   ]
 })
 export class WidgetSettingsModule {
@@ -685,5 +690,6 @@ export const widgetSettingsComponentsMap: {[key: string]: Type<IWidgetSettingsCo
   'tb-slider-widget-settings': SliderWidgetSettingsComponent,
   'tb-toggle-button-widget-settings': ToggleButtonWidgetSettingsComponent,
   'tb-time-series-chart-key-settings': TimeSeriesChartKeySettingsComponent,
-  'tb-time-series-chart-widget-settings': TimeSeriesChartWidgetSettingsComponent
+  'tb-time-series-chart-widget-settings': TimeSeriesChartWidgetSettingsComponent,
+  'tb-status-widget-settings': StatusWidgetSettingsComponent
 };