UI: Status widget: Implement advanced settings.
This commit is contained in:
Igor Kulikov
parent
291cabef4b
commit
b3d74adce8
@ -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}"
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
@ -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, []]
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user