Igor Kulikov
2 years ago
5 changed files with 172 additions and 4 deletions
@ -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, []] |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue