Browse Source
[3.4] Advanced widget settings: replace auto-generated JSON forms with Angular componentspull/6555/head
Igor Kulikov
4 years ago
committed by
GitHub
GitHub
308 changed files with 24552 additions and 3943 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,95 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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. |
||||
|
|
||||
|
--> |
||||
|
<section class="tb-widget-settings" [formGroup]="alarmsTableKeySettingsForm" fxLayout="column"> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.table.column-width</mat-label> |
||||
|
<input matInput formControlName="columnWidth"> |
||||
|
</mat-form-field> |
||||
|
<fieldset class="fields-group fields-group-slider"> |
||||
|
<legend class="group-title" translate>widgets.table.cell-style</legend> |
||||
|
<mat-expansion-panel class="tb-settings" [expanded]="alarmsTableKeySettingsForm.get('useCellStyleFunction').value"> |
||||
|
<mat-expansion-panel-header fxLayout="row wrap"> |
||||
|
<mat-panel-title> |
||||
|
<mat-slide-toggle formControlName="useCellStyleFunction" (click)="$event.stopPropagation()" |
||||
|
fxLayoutAlign="center"> |
||||
|
{{ 'widgets.table.use-cell-style-function' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</mat-panel-title> |
||||
|
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate> |
||||
|
widget-config.advanced-settings |
||||
|
</mat-panel-description> |
||||
|
</mat-expansion-panel-header> |
||||
|
<ng-template matExpansionPanelContent> |
||||
|
<tb-js-func required |
||||
|
formControlName="cellStyleFunction" |
||||
|
[globalVariables]="functionScopeVariables" |
||||
|
[functionArgs]="['value', 'alarm', 'ctx']" |
||||
|
functionTitle="{{ 'widgets.table.cell-style-function' | translate }}" |
||||
|
helpId="widget/lib/alarm/cell_style_fn"> |
||||
|
</tb-js-func> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
|
</fieldset> |
||||
|
<fieldset class="fields-group fields-group-slider"> |
||||
|
<legend class="group-title" translate>widgets.table.cell-content</legend> |
||||
|
<mat-expansion-panel class="tb-settings" [expanded]="alarmsTableKeySettingsForm.get('useCellContentFunction').value"> |
||||
|
<mat-expansion-panel-header fxLayout="row wrap"> |
||||
|
<mat-panel-title> |
||||
|
<mat-slide-toggle formControlName="useCellContentFunction" (click)="$event.stopPropagation()" |
||||
|
fxLayoutAlign="center"> |
||||
|
{{ 'widgets.table.use-cell-content-function' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</mat-panel-title> |
||||
|
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate> |
||||
|
widget-config.advanced-settings |
||||
|
</mat-panel-description> |
||||
|
</mat-expansion-panel-header> |
||||
|
<ng-template matExpansionPanelContent> |
||||
|
<tb-js-func required |
||||
|
formControlName="cellContentFunction" |
||||
|
[globalVariables]="functionScopeVariables" |
||||
|
[functionArgs]="['value', 'alarm', 'ctx']" |
||||
|
functionTitle="{{ 'widgets.table.cell-content-function' | translate }}" |
||||
|
helpId="widget/lib/alarm/cell_content_fn"> |
||||
|
</tb-js-func> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
|
</fieldset> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.table.default-column-visibility</mat-label> |
||||
|
<mat-select formControlName="defaultColumnVisibility"> |
||||
|
<mat-option [value]="'visible'"> |
||||
|
{{ 'widgets.table.column-visibility-visible' | translate }} |
||||
|
</mat-option> |
||||
|
<mat-option [value]="'hidden'"> |
||||
|
{{ 'widgets.table.column-visibility-hidden' | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.table.column-selection-to-display</mat-label> |
||||
|
<mat-select formControlName="columnSelectionToDisplay"> |
||||
|
<mat-option [value]="'enabled'"> |
||||
|
{{ 'widgets.table.column-selection-to-display-enabled' | translate }} |
||||
|
</mat-option> |
||||
|
<mat-option [value]="'disabled'"> |
||||
|
{{ 'widgets.table.column-selection-to-display-disabled' | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
</section> |
||||
@ -0,0 +1,86 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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 { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; |
||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-alarms-table-key-settings', |
||||
|
templateUrl: './alarms-table-key-settings.component.html', |
||||
|
styleUrls: ['./../widget-settings.scss'] |
||||
|
}) |
||||
|
export class AlarmsTableKeySettingsComponent extends WidgetSettingsComponent { |
||||
|
|
||||
|
alarmsTableKeySettingsForm: FormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: FormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): FormGroup { |
||||
|
return this.alarmsTableKeySettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return { |
||||
|
columnWidth: '0px', |
||||
|
useCellStyleFunction: false, |
||||
|
cellStyleFunction: '', |
||||
|
useCellContentFunction: false, |
||||
|
cellContentFunction: '', |
||||
|
defaultColumnVisibility: 'visible', |
||||
|
columnSelectionToDisplay: 'enabled' |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
this.alarmsTableKeySettingsForm = this.fb.group({ |
||||
|
columnWidth: [settings.columnWidth, []], |
||||
|
useCellStyleFunction: [settings.useCellStyleFunction, []], |
||||
|
cellStyleFunction: [settings.cellStyleFunction, [Validators.required]], |
||||
|
useCellContentFunction: [settings.useCellContentFunction, []], |
||||
|
cellContentFunction: [settings.cellContentFunction, [Validators.required]], |
||||
|
defaultColumnVisibility: [settings.defaultColumnVisibility, []], |
||||
|
columnSelectionToDisplay: [settings.columnSelectionToDisplay, []], |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
protected validatorTriggers(): string[] { |
||||
|
return ['useCellStyleFunction', 'useCellContentFunction']; |
||||
|
} |
||||
|
|
||||
|
protected updateValidators(emitEvent: boolean) { |
||||
|
const useCellStyleFunction: boolean = this.alarmsTableKeySettingsForm.get('useCellStyleFunction').value; |
||||
|
const useCellContentFunction: boolean = this.alarmsTableKeySettingsForm.get('useCellContentFunction').value; |
||||
|
if (useCellStyleFunction) { |
||||
|
this.alarmsTableKeySettingsForm.get('cellStyleFunction').enable(); |
||||
|
} else { |
||||
|
this.alarmsTableKeySettingsForm.get('cellStyleFunction').disable(); |
||||
|
} |
||||
|
if (useCellContentFunction) { |
||||
|
this.alarmsTableKeySettingsForm.get('cellContentFunction').enable(); |
||||
|
} else { |
||||
|
this.alarmsTableKeySettingsForm.get('cellContentFunction').disable(); |
||||
|
} |
||||
|
this.alarmsTableKeySettingsForm.get('cellStyleFunction').updateValueAndValidity({emitEvent}); |
||||
|
this.alarmsTableKeySettingsForm.get('cellContentFunction').updateValueAndValidity({emitEvent}); |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,110 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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. |
||||
|
|
||||
|
--> |
||||
|
<section class="tb-widget-settings" [formGroup]="alarmsTableWidgetSettingsForm" fxLayout="column"> |
||||
|
<fieldset class="fields-group"> |
||||
|
<legend class="group-title" translate>widgets.table.common-table-settings</legend> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.table.alarms-table-title</mat-label> |
||||
|
<input matInput formControlName="alarmsTitle"> |
||||
|
</mat-form-field> |
||||
|
<section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px"> |
||||
|
<section fxLayout="column" fxFlex> |
||||
|
<mat-checkbox formControlName="enableSelection" style="margin-bottom: 16px;"> |
||||
|
{{ 'widgets.table.enable-alarms-selection' | translate }} |
||||
|
</mat-checkbox> |
||||
|
<mat-checkbox formControlName="enableSearch" style="margin-bottom: 16px;"> |
||||
|
{{ 'widgets.table.enable-alarms-search' | translate }} |
||||
|
</mat-checkbox> |
||||
|
<mat-checkbox formControlName="enableSelectColumnDisplay" style="margin-bottom: 16px;"> |
||||
|
{{ 'widgets.table.enable-select-column-display' | translate }} |
||||
|
</mat-checkbox> |
||||
|
<mat-checkbox formControlName="enableFilter" style="margin-bottom: 16px;"> |
||||
|
{{ 'widgets.table.enable-alarm-filter' | translate }} |
||||
|
</mat-checkbox> |
||||
|
</section> |
||||
|
<section fxLayout="column" fxFlex> |
||||
|
<mat-checkbox formControlName="enableStickyHeader" style="margin-bottom: 16px;"> |
||||
|
{{ 'widgets.table.enable-sticky-header' | translate }} |
||||
|
</mat-checkbox> |
||||
|
<mat-checkbox formControlName="enableStickyAction" style="margin-bottom: 16px;"> |
||||
|
{{ 'widgets.table.enable-sticky-action' | translate }} |
||||
|
</mat-checkbox> |
||||
|
</section> |
||||
|
</section> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.table.hidden-cell-button-display-mode</mat-label> |
||||
|
<mat-select formControlName="reserveSpaceForHiddenAction"> |
||||
|
<mat-option [value]="'true'"> |
||||
|
{{ 'widgets.table.show-empty-space-hidden-action' | translate }} |
||||
|
</mat-option> |
||||
|
<mat-option [value]="'false'"> |
||||
|
{{ 'widgets.table.dont-reserve-space-hidden-action' | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
<section fxLayout="column" fxLayoutGap="8px"> |
||||
|
<mat-slide-toggle fxFlex formControlName="displayDetails"> |
||||
|
{{ 'widgets.table.display-alarm-details' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<mat-slide-toggle formControlName="allowAcknowledgment"> |
||||
|
{{ 'widgets.table.allow-alarms-ack' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<mat-slide-toggle formControlName="allowClear"> |
||||
|
{{ 'widgets.table.allow-alarms-clear' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center"> |
||||
|
<mat-slide-toggle fxFlex formControlName="displayPagination"> |
||||
|
{{ 'widgets.table.display-pagination' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.table.default-page-size</mat-label> |
||||
|
<input matInput type="number" min="1" step="1" formControlName="defaultPageSize"> |
||||
|
</mat-form-field> |
||||
|
</section> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.table.default-sort-order</mat-label> |
||||
|
<input matInput formControlName="defaultSortOrder"> |
||||
|
</mat-form-field> |
||||
|
</section> |
||||
|
</fieldset> |
||||
|
<fieldset class="fields-group fields-group-slider"> |
||||
|
<legend class="group-title" translate>widgets.table.row-style</legend> |
||||
|
<mat-expansion-panel class="tb-settings" [expanded]="alarmsTableWidgetSettingsForm.get('useRowStyleFunction').value"> |
||||
|
<mat-expansion-panel-header fxLayout="row wrap"> |
||||
|
<mat-panel-title> |
||||
|
<mat-slide-toggle formControlName="useRowStyleFunction" (click)="$event.stopPropagation()" |
||||
|
fxLayoutAlign="center"> |
||||
|
{{ 'widgets.table.use-row-style-function' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</mat-panel-title> |
||||
|
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate> |
||||
|
widget-config.advanced-settings |
||||
|
</mat-panel-description> |
||||
|
</mat-expansion-panel-header> |
||||
|
<ng-template matExpansionPanelContent> |
||||
|
<tb-js-func required |
||||
|
formControlName="rowStyleFunction" |
||||
|
[globalVariables]="functionScopeVariables" |
||||
|
[functionArgs]="['alarm', 'ctx']" |
||||
|
functionTitle="{{ 'widgets.table.row-style-function' | translate }}" |
||||
|
helpId="widget/lib/alarm/row_style_fn"> |
||||
|
</tb-js-func> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
|
</fieldset> |
||||
|
</section> |
||||
@ -0,0 +1,104 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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 { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; |
||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-alarms-table-widget-settings', |
||||
|
templateUrl: './alarms-table-widget-settings.component.html', |
||||
|
styleUrls: ['./../widget-settings.scss'] |
||||
|
}) |
||||
|
export class AlarmsTableWidgetSettingsComponent extends WidgetSettingsComponent { |
||||
|
|
||||
|
alarmsTableWidgetSettingsForm: FormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: FormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): FormGroup { |
||||
|
return this.alarmsTableWidgetSettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return { |
||||
|
alarmsTitle: '', |
||||
|
enableSelection: true, |
||||
|
enableSearch: true, |
||||
|
enableSelectColumnDisplay: true, |
||||
|
enableFilter: true, |
||||
|
enableStickyHeader: true, |
||||
|
enableStickyAction: true, |
||||
|
reserveSpaceForHiddenAction: 'true', |
||||
|
displayDetails: true, |
||||
|
allowAcknowledgment: true, |
||||
|
allowClear: true, |
||||
|
displayPagination: true, |
||||
|
defaultPageSize: 10, |
||||
|
defaultSortOrder: '-createdTime', |
||||
|
useRowStyleFunction: false, |
||||
|
rowStyleFunction: '' |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
this.alarmsTableWidgetSettingsForm = this.fb.group({ |
||||
|
alarmsTitle: [settings.alarmsTitle, []], |
||||
|
enableSelection: [settings.enableSelection, []], |
||||
|
enableSearch: [settings.enableSearch, []], |
||||
|
enableSelectColumnDisplay: [settings.enableSelectColumnDisplay, []], |
||||
|
enableFilter: [settings.enableFilter, []], |
||||
|
enableStickyHeader: [settings.enableStickyHeader, []], |
||||
|
enableStickyAction: [settings.enableStickyAction, []], |
||||
|
reserveSpaceForHiddenAction: [settings.reserveSpaceForHiddenAction, []], |
||||
|
displayDetails: [settings.displayDetails, []], |
||||
|
allowAcknowledgment: [settings.allowAcknowledgment, []], |
||||
|
allowClear: [settings.allowClear, []], |
||||
|
displayPagination: [settings.displayPagination, []], |
||||
|
defaultPageSize: [settings.defaultPageSize, [Validators.min(1)]], |
||||
|
defaultSortOrder: [settings.defaultSortOrder, []], |
||||
|
useRowStyleFunction: [settings.useRowStyleFunction, []], |
||||
|
rowStyleFunction: [settings.rowStyleFunction, [Validators.required]] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
protected validatorTriggers(): string[] { |
||||
|
return ['useRowStyleFunction', 'displayPagination']; |
||||
|
} |
||||
|
|
||||
|
protected updateValidators(emitEvent: boolean) { |
||||
|
const useRowStyleFunction: boolean = this.alarmsTableWidgetSettingsForm.get('useRowStyleFunction').value; |
||||
|
const displayPagination: boolean = this.alarmsTableWidgetSettingsForm.get('displayPagination').value; |
||||
|
if (useRowStyleFunction) { |
||||
|
this.alarmsTableWidgetSettingsForm.get('rowStyleFunction').enable(); |
||||
|
} else { |
||||
|
this.alarmsTableWidgetSettingsForm.get('rowStyleFunction').disable(); |
||||
|
} |
||||
|
if (displayPagination) { |
||||
|
this.alarmsTableWidgetSettingsForm.get('defaultPageSize').enable(); |
||||
|
} else { |
||||
|
this.alarmsTableWidgetSettingsForm.get('defaultPageSize').disable(); |
||||
|
} |
||||
|
this.alarmsTableWidgetSettingsForm.get('rowStyleFunction').updateValueAndValidity({emitEvent}); |
||||
|
this.alarmsTableWidgetSettingsForm.get('defaultPageSize').updateValueAndValidity({emitEvent}); |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,65 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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. |
||||
|
|
||||
|
--> |
||||
|
<section class="tb-widget-settings" [formGroup]="dashboardStateWidgetSettingsForm" fxLayout="column"> |
||||
|
<fieldset class="fields-group"> |
||||
|
<legend class="group-title" translate>widgets.dashboard-state.dashboard-state-settings</legend> |
||||
|
<mat-form-field class="mat-block"> |
||||
|
<input matInput type="text" placeholder="{{ 'widgets.dashboard-state.dashboard-state' | translate }}" |
||||
|
#dashboardStateInput |
||||
|
formControlName="stateId" |
||||
|
[matAutocomplete]="dashboardStateAutocomplete"> |
||||
|
<button *ngIf="dashboardStateWidgetSettingsForm.get('stateId').value" |
||||
|
type="button" |
||||
|
matSuffix mat-icon-button aria-label="Clear" |
||||
|
(click)="clearDashboardState()"> |
||||
|
<mat-icon class="material-icons">close</mat-icon> |
||||
|
</button> |
||||
|
<mat-autocomplete |
||||
|
class="tb-autocomplete" |
||||
|
#dashboardStateAutocomplete="matAutocomplete"> |
||||
|
<mat-option *ngFor="let state of filteredDashboardStates | async" [value]="state"> |
||||
|
<span [innerHTML]="state | highlight:dashboardStateSearchText"></span> |
||||
|
</mat-option> |
||||
|
</mat-autocomplete> |
||||
|
</mat-form-field> |
||||
|
<mat-expansion-panel class="tb-settings"> |
||||
|
<mat-expansion-panel-header> |
||||
|
<mat-panel-description fxLayoutAlign="end" translate> |
||||
|
widget-config.advanced-settings |
||||
|
</mat-panel-description> |
||||
|
</mat-expansion-panel-header> |
||||
|
<ng-template matExpansionPanelContent> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="defaultAutofillLayout"> |
||||
|
{{ 'widgets.dashboard-state.autofill-state-layout' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.dashboard-state.default-margin</mat-label> |
||||
|
<input matInput type="number" min="0" step="1" formControlName="defaultMargin"> |
||||
|
</mat-form-field> |
||||
|
<tb-color-input |
||||
|
formControlName="defaultBackgroundColor" |
||||
|
icon="format_color_fill" |
||||
|
label="{{ 'widgets.dashboard-state.default-background-color' | translate }}" openOnInput colorClearButton> |
||||
|
</tb-color-input> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="syncParentStateParams"> |
||||
|
{{ 'widgets.dashboard-state.sync-parent-state-params' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
|
</fieldset> |
||||
|
</section> |
||||
@ -0,0 +1,99 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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, ElementRef, ViewChild } from '@angular/core'; |
||||
|
import { WidgetActionType, WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; |
||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { Observable, of } from 'rxjs'; |
||||
|
import { map, mergeMap, startWith } from 'rxjs/operators'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-dashboard-state-widget-settings', |
||||
|
templateUrl: './dashboard-state-widget-settings.component.html', |
||||
|
styleUrls: ['./../widget-settings.scss'] |
||||
|
}) |
||||
|
export class DashboardStateWidgetSettingsComponent extends WidgetSettingsComponent { |
||||
|
|
||||
|
@ViewChild('dashboardStateInput') dashboardStateInput: ElementRef; |
||||
|
|
||||
|
dashboardStateWidgetSettingsForm: FormGroup; |
||||
|
|
||||
|
filteredDashboardStates: Observable<Array<string>>; |
||||
|
dashboardStateSearchText = ''; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: FormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): FormGroup { |
||||
|
return this.dashboardStateWidgetSettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return { |
||||
|
stateId: '', |
||||
|
defaultAutofillLayout: true, |
||||
|
defaultMargin: 0, |
||||
|
defaultBackgroundColor: '#fff', |
||||
|
syncParentStateParams: true |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
this.dashboardStateWidgetSettingsForm = this.fb.group({ |
||||
|
stateId: [settings.stateId, []], |
||||
|
defaultAutofillLayout: [settings.defaultAutofillLayout, []], |
||||
|
defaultMargin: [settings.defaultMargin, [Validators.min(0)]], |
||||
|
defaultBackgroundColor: [settings.defaultBackgroundColor, []], |
||||
|
syncParentStateParams: [settings.syncParentStateParams, []] |
||||
|
}); |
||||
|
this.dashboardStateSearchText = ''; |
||||
|
this.filteredDashboardStates = this.dashboardStateWidgetSettingsForm.get('stateId').valueChanges |
||||
|
.pipe( |
||||
|
startWith(''), |
||||
|
map(value => value ? value : ''), |
||||
|
mergeMap(name => this.fetchDashboardStates(name) ) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
public clearDashboardState(value: string = '') { |
||||
|
this.dashboardStateInput.nativeElement.value = value; |
||||
|
this.dashboardStateWidgetSettingsForm.get('stateId').patchValue(value, {emitEvent: true}); |
||||
|
setTimeout(() => { |
||||
|
this.dashboardStateInput.nativeElement.blur(); |
||||
|
this.dashboardStateInput.nativeElement.focus(); |
||||
|
}, 0); |
||||
|
} |
||||
|
|
||||
|
private fetchDashboardStates(searchText?: string): Observable<Array<string>> { |
||||
|
this.dashboardStateSearchText = searchText; |
||||
|
const stateIds = Object.keys(this.dashboard.configuration.states); |
||||
|
const result = searchText ? stateIds.filter(this.createFilterForDashboardState(searchText)) : stateIds; |
||||
|
if (result && result.length) { |
||||
|
return of(result); |
||||
|
} else { |
||||
|
return of([searchText]); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private createFilterForDashboardState(query: string): (stateId: string) => boolean { |
||||
|
const lowercaseQuery = query.toLowerCase(); |
||||
|
return stateId => stateId.toLowerCase().indexOf(lowercaseQuery) === 0; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,22 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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. |
||||
|
|
||||
|
--> |
||||
|
<section class="tb-widget-settings" [formGroup]="edgeQuickOverviewWidgetSettingsForm" fxLayout="column"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="enableDefaultTitle"> |
||||
|
{{ 'widgets.edge.display-default-title' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</section> |
||||
@ -0,0 +1,52 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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 { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; |
||||
|
import { FormBuilder, FormGroup } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-edge-quick-overview-widget-settings', |
||||
|
templateUrl: './edge-quick-overview-widget-settings.component.html', |
||||
|
styleUrls: ['./../widget-settings.scss'] |
||||
|
}) |
||||
|
export class EdgeQuickOverviewWidgetSettingsComponent extends WidgetSettingsComponent { |
||||
|
|
||||
|
edgeQuickOverviewWidgetSettingsForm: FormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: FormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): FormGroup { |
||||
|
return this.edgeQuickOverviewWidgetSettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return { |
||||
|
enableDefaultTitle: true |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
this.edgeQuickOverviewWidgetSettingsForm = this.fb.group({ |
||||
|
enableDefaultTitle: [settings.enableDefaultTitle, []] |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,74 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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. |
||||
|
|
||||
|
--> |
||||
|
<section class="tb-widget-settings" [formGroup]="entitiesHierarchyWidgetSettingsForm" fxLayout="column"> |
||||
|
<fieldset class="fields-group"> |
||||
|
<legend class="group-title" translate>widgets.entities-hierarchy.hierarchy-data-settings</legend> |
||||
|
<tb-js-func formControlName="nodeRelationQueryFunction" |
||||
|
[globalVariables]="functionScopeVariables" |
||||
|
[functionArgs]="['nodeCtx']" |
||||
|
functionTitle="{{ 'widgets.entities-hierarchy.relations-query-function' | translate }}" |
||||
|
helpId="widget/lib/entities_hierarchy/node_relation_query_fn"> |
||||
|
</tb-js-func> |
||||
|
<tb-js-func formControlName="nodeHasChildrenFunction" |
||||
|
[globalVariables]="functionScopeVariables" |
||||
|
[functionArgs]="['nodeCtx']" |
||||
|
functionTitle="{{ 'widgets.entities-hierarchy.has-children-function' | translate }}" |
||||
|
helpId="widget/lib/entities_hierarchy/node_has_children_fn"> |
||||
|
</tb-js-func> |
||||
|
</fieldset> |
||||
|
<fieldset class="fields-group"> |
||||
|
<legend class="group-title" translate>widgets.entities-hierarchy.node-state-settings</legend> |
||||
|
<tb-js-func formControlName="nodeOpenedFunction" |
||||
|
[globalVariables]="functionScopeVariables" |
||||
|
[functionArgs]="['nodeCtx']" |
||||
|
functionTitle="{{ 'widgets.entities-hierarchy.node-opened-function' | translate }}" |
||||
|
helpId="widget/lib/entities_hierarchy/node_opened_fn"> |
||||
|
</tb-js-func> |
||||
|
<tb-js-func formControlName="nodeDisabledFunction" |
||||
|
[globalVariables]="functionScopeVariables" |
||||
|
[functionArgs]="['nodeCtx']" |
||||
|
functionTitle="{{ 'widgets.entities-hierarchy.node-disabled-function' | translate }}" |
||||
|
helpId="widget/lib/entities_hierarchy/node_disabled_fn"> |
||||
|
</tb-js-func> |
||||
|
</fieldset> |
||||
|
<fieldset class="fields-group"> |
||||
|
<legend class="group-title" translate>widgets.entities-hierarchy.display-settings</legend> |
||||
|
<tb-js-func formControlName="nodeIconFunction" |
||||
|
[globalVariables]="functionScopeVariables" |
||||
|
[functionArgs]="['nodeCtx']" |
||||
|
functionTitle="{{ 'widgets.entities-hierarchy.node-icon-function' | translate }}" |
||||
|
helpId="widget/lib/entities_hierarchy/node_icon_fn"> |
||||
|
</tb-js-func> |
||||
|
<tb-js-func formControlName="nodeTextFunction" |
||||
|
[globalVariables]="functionScopeVariables" |
||||
|
[functionArgs]="['nodeCtx']" |
||||
|
functionTitle="{{ 'widgets.entities-hierarchy.node-text-function' | translate }}" |
||||
|
helpId="widget/lib/entities_hierarchy/node_text_fn"> |
||||
|
</tb-js-func> |
||||
|
</fieldset> |
||||
|
<fieldset class="fields-group"> |
||||
|
<legend class="group-title" translate>widgets.entities-hierarchy.sort-settings</legend> |
||||
|
<tb-js-func formControlName="nodesSortFunction" |
||||
|
[globalVariables]="functionScopeVariables" |
||||
|
[functionArgs]="['nodeCtx1', 'nodeCtx2']" |
||||
|
functionTitle="{{ 'widgets.entities-hierarchy.nodes-sort-function' | translate }}" |
||||
|
helpId="widget/lib/entities_hierarchy/nodes_sort_fn"> |
||||
|
</tb-js-func> |
||||
|
</fieldset> |
||||
|
</section> |
||||
|
|
||||
@ -0,0 +1,64 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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 { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; |
||||
|
import { FormBuilder, FormGroup } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-entities-hierarchy-widget-settings', |
||||
|
templateUrl: './entities-hierarchy-widget-settings.component.html', |
||||
|
styleUrls: ['./../widget-settings.scss'] |
||||
|
}) |
||||
|
export class EntitiesHierarchyWidgetSettingsComponent extends WidgetSettingsComponent { |
||||
|
|
||||
|
entitiesHierarchyWidgetSettingsForm: FormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: FormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): FormGroup { |
||||
|
return this.entitiesHierarchyWidgetSettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return { |
||||
|
nodeRelationQueryFunction: '', |
||||
|
nodeHasChildrenFunction: '', |
||||
|
nodeOpenedFunction: '', |
||||
|
nodeDisabledFunction: '', |
||||
|
nodeIconFunction: '', |
||||
|
nodeTextFunction: '', |
||||
|
nodesSortFunction: '', |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
this.entitiesHierarchyWidgetSettingsForm = this.fb.group({ |
||||
|
nodeRelationQueryFunction: [settings.nodeRelationQueryFunction, []], |
||||
|
nodeHasChildrenFunction: [settings.nodeHasChildrenFunction, []], |
||||
|
nodeOpenedFunction: [settings.nodeOpenedFunction, []], |
||||
|
nodeDisabledFunction: [settings.nodeDisabledFunction, []], |
||||
|
nodeIconFunction: [settings.nodeIconFunction, []], |
||||
|
nodeTextFunction: [settings.nodeTextFunction, []], |
||||
|
nodesSortFunction: [settings.nodesSortFunction, []] |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,95 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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. |
||||
|
|
||||
|
--> |
||||
|
<section class="tb-widget-settings" [formGroup]="entitiesTableKeySettingsForm" fxLayout="column"> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.table.column-width</mat-label> |
||||
|
<input matInput formControlName="columnWidth"> |
||||
|
</mat-form-field> |
||||
|
<fieldset class="fields-group fields-group-slider"> |
||||
|
<legend class="group-title" translate>widgets.table.cell-style</legend> |
||||
|
<mat-expansion-panel class="tb-settings" [expanded]="entitiesTableKeySettingsForm.get('useCellStyleFunction').value"> |
||||
|
<mat-expansion-panel-header fxLayout="row wrap"> |
||||
|
<mat-panel-title> |
||||
|
<mat-slide-toggle formControlName="useCellStyleFunction" (click)="$event.stopPropagation()" |
||||
|
fxLayoutAlign="center"> |
||||
|
{{ 'widgets.table.use-cell-style-function' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</mat-panel-title> |
||||
|
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate> |
||||
|
widget-config.advanced-settings |
||||
|
</mat-panel-description> |
||||
|
</mat-expansion-panel-header> |
||||
|
<ng-template matExpansionPanelContent> |
||||
|
<tb-js-func required |
||||
|
formControlName="cellStyleFunction" |
||||
|
[globalVariables]="functionScopeVariables" |
||||
|
[functionArgs]="['value', 'entity', 'ctx']" |
||||
|
functionTitle="{{ 'widgets.table.cell-style-function' | translate }}" |
||||
|
helpId="widget/lib/entity/cell_style_fn"> |
||||
|
</tb-js-func> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
|
</fieldset> |
||||
|
<fieldset class="fields-group fields-group-slider"> |
||||
|
<legend class="group-title" translate>widgets.table.cell-content</legend> |
||||
|
<mat-expansion-panel class="tb-settings" [expanded]="entitiesTableKeySettingsForm.get('useCellContentFunction').value"> |
||||
|
<mat-expansion-panel-header fxLayout="row wrap"> |
||||
|
<mat-panel-title> |
||||
|
<mat-slide-toggle formControlName="useCellContentFunction" (click)="$event.stopPropagation()" |
||||
|
fxLayoutAlign="center"> |
||||
|
{{ 'widgets.table.use-cell-content-function' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</mat-panel-title> |
||||
|
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate> |
||||
|
widget-config.advanced-settings |
||||
|
</mat-panel-description> |
||||
|
</mat-expansion-panel-header> |
||||
|
<ng-template matExpansionPanelContent> |
||||
|
<tb-js-func required |
||||
|
formControlName="cellContentFunction" |
||||
|
[globalVariables]="functionScopeVariables" |
||||
|
[functionArgs]="['value', 'entity', 'ctx']" |
||||
|
functionTitle="{{ 'widgets.table.cell-content-function' | translate }}" |
||||
|
helpId="widget/lib/entity/cell_content_fn"> |
||||
|
</tb-js-func> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
|
</fieldset> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.table.default-column-visibility</mat-label> |
||||
|
<mat-select formControlName="defaultColumnVisibility"> |
||||
|
<mat-option [value]="'visible'"> |
||||
|
{{ 'widgets.table.column-visibility-visible' | translate }} |
||||
|
</mat-option> |
||||
|
<mat-option [value]="'hidden'"> |
||||
|
{{ 'widgets.table.column-visibility-hidden' | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.table.column-selection-to-display</mat-label> |
||||
|
<mat-select formControlName="columnSelectionToDisplay"> |
||||
|
<mat-option [value]="'enabled'"> |
||||
|
{{ 'widgets.table.column-selection-to-display-enabled' | translate }} |
||||
|
</mat-option> |
||||
|
<mat-option [value]="'disabled'"> |
||||
|
{{ 'widgets.table.column-selection-to-display-disabled' | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
</section> |
||||
@ -0,0 +1,86 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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 { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; |
||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-entities-table-key-settings', |
||||
|
templateUrl: './entities-table-key-settings.component.html', |
||||
|
styleUrls: ['./../widget-settings.scss'] |
||||
|
}) |
||||
|
export class EntitiesTableKeySettingsComponent extends WidgetSettingsComponent { |
||||
|
|
||||
|
entitiesTableKeySettingsForm: FormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: FormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): FormGroup { |
||||
|
return this.entitiesTableKeySettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return { |
||||
|
columnWidth: '0px', |
||||
|
useCellStyleFunction: false, |
||||
|
cellStyleFunction: '', |
||||
|
useCellContentFunction: false, |
||||
|
cellContentFunction: '', |
||||
|
defaultColumnVisibility: 'visible', |
||||
|
columnSelectionToDisplay: 'enabled' |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
this.entitiesTableKeySettingsForm = this.fb.group({ |
||||
|
columnWidth: [settings.columnWidth, []], |
||||
|
useCellStyleFunction: [settings.useCellStyleFunction, []], |
||||
|
cellStyleFunction: [settings.cellStyleFunction, [Validators.required]], |
||||
|
useCellContentFunction: [settings.useCellContentFunction, []], |
||||
|
cellContentFunction: [settings.cellContentFunction, [Validators.required]], |
||||
|
defaultColumnVisibility: [settings.defaultColumnVisibility, []], |
||||
|
columnSelectionToDisplay: [settings.columnSelectionToDisplay, []], |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
protected validatorTriggers(): string[] { |
||||
|
return ['useCellStyleFunction', 'useCellContentFunction']; |
||||
|
} |
||||
|
|
||||
|
protected updateValidators(emitEvent: boolean) { |
||||
|
const useCellStyleFunction: boolean = this.entitiesTableKeySettingsForm.get('useCellStyleFunction').value; |
||||
|
const useCellContentFunction: boolean = this.entitiesTableKeySettingsForm.get('useCellContentFunction').value; |
||||
|
if (useCellStyleFunction) { |
||||
|
this.entitiesTableKeySettingsForm.get('cellStyleFunction').enable(); |
||||
|
} else { |
||||
|
this.entitiesTableKeySettingsForm.get('cellStyleFunction').disable(); |
||||
|
} |
||||
|
if (useCellContentFunction) { |
||||
|
this.entitiesTableKeySettingsForm.get('cellContentFunction').enable(); |
||||
|
} else { |
||||
|
this.entitiesTableKeySettingsForm.get('cellContentFunction').disable(); |
||||
|
} |
||||
|
this.entitiesTableKeySettingsForm.get('cellStyleFunction').updateValueAndValidity({emitEvent}); |
||||
|
this.entitiesTableKeySettingsForm.get('cellContentFunction').updateValueAndValidity({emitEvent}); |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,116 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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. |
||||
|
|
||||
|
--> |
||||
|
<section class="tb-widget-settings" [formGroup]="entitiesTableWidgetSettingsForm" fxLayout="column"> |
||||
|
<fieldset class="fields-group"> |
||||
|
<legend class="group-title" translate>widgets.table.common-table-settings</legend> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.table.entities-table-title</mat-label> |
||||
|
<input matInput formControlName="entitiesTitle"> |
||||
|
</mat-form-field> |
||||
|
<section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px"> |
||||
|
<section fxLayout="column" fxFlex> |
||||
|
<mat-checkbox formControlName="enableSearch" style="margin-bottom: 16px;"> |
||||
|
{{ 'widgets.table.enable-search' | translate }} |
||||
|
</mat-checkbox> |
||||
|
<mat-checkbox formControlName="enableSelectColumnDisplay" style="margin-bottom: 16px;"> |
||||
|
{{ 'widgets.table.enable-select-column-display' | translate }} |
||||
|
</mat-checkbox> |
||||
|
</section> |
||||
|
<section fxLayout="column" fxFlex> |
||||
|
<mat-checkbox formControlName="enableStickyHeader" style="margin-bottom: 16px;"> |
||||
|
{{ 'widgets.table.enable-sticky-header' | translate }} |
||||
|
</mat-checkbox> |
||||
|
<mat-checkbox formControlName="enableStickyAction" style="margin-bottom: 16px;"> |
||||
|
{{ 'widgets.table.enable-sticky-action' | translate }} |
||||
|
</mat-checkbox> |
||||
|
</section> |
||||
|
</section> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.table.hidden-cell-button-display-mode</mat-label> |
||||
|
<mat-select formControlName="reserveSpaceForHiddenAction"> |
||||
|
<mat-option [value]="'true'"> |
||||
|
{{ 'widgets.table.show-empty-space-hidden-action' | translate }} |
||||
|
</mat-option> |
||||
|
<mat-option [value]="'false'"> |
||||
|
{{ 'widgets.table.dont-reserve-space-hidden-action' | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
<section fxLayout="column" fxLayoutGap="8px"> |
||||
|
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center"> |
||||
|
<mat-slide-toggle fxFlex formControlName="displayEntityName"> |
||||
|
{{ 'widgets.table.display-entity-name' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.table.entity-name-column-title</mat-label> |
||||
|
<input matInput formControlName="entityNameColumnTitle"> |
||||
|
</mat-form-field> |
||||
|
</section> |
||||
|
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center"> |
||||
|
<mat-slide-toggle fxFlex formControlName="displayEntityLabel"> |
||||
|
{{ 'widgets.table.display-entity-label' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.table.entity-label-column-title</mat-label> |
||||
|
<input matInput formControlName="entityLabelColumnTitle"> |
||||
|
</mat-form-field> |
||||
|
</section> |
||||
|
<mat-slide-toggle formControlName="displayEntityType"> |
||||
|
{{ 'widgets.table.display-entity-type' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center"> |
||||
|
<mat-slide-toggle fxFlex formControlName="displayPagination"> |
||||
|
{{ 'widgets.table.display-pagination' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.table.default-page-size</mat-label> |
||||
|
<input matInput type="number" min="1" step="1" formControlName="defaultPageSize"> |
||||
|
</mat-form-field> |
||||
|
</section> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.table.default-sort-order</mat-label> |
||||
|
<input matInput formControlName="defaultSortOrder"> |
||||
|
</mat-form-field> |
||||
|
</section> |
||||
|
</fieldset> |
||||
|
<fieldset class="fields-group fields-group-slider"> |
||||
|
<legend class="group-title" translate>widgets.table.row-style</legend> |
||||
|
<mat-expansion-panel class="tb-settings" [expanded]="entitiesTableWidgetSettingsForm.get('useRowStyleFunction').value"> |
||||
|
<mat-expansion-panel-header fxLayout="row wrap"> |
||||
|
<mat-panel-title> |
||||
|
<mat-slide-toggle formControlName="useRowStyleFunction" (click)="$event.stopPropagation()" |
||||
|
fxLayoutAlign="center"> |
||||
|
{{ 'widgets.table.use-row-style-function' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</mat-panel-title> |
||||
|
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate> |
||||
|
widget-config.advanced-settings |
||||
|
</mat-panel-description> |
||||
|
</mat-expansion-panel-header> |
||||
|
<ng-template matExpansionPanelContent> |
||||
|
<tb-js-func required |
||||
|
formControlName="rowStyleFunction" |
||||
|
[globalVariables]="functionScopeVariables" |
||||
|
[functionArgs]="['entity', 'ctx']" |
||||
|
functionTitle="{{ 'widgets.table.row-style-function' | translate }}" |
||||
|
helpId="widget/lib/entity/row_style_fn"> |
||||
|
</tb-js-func> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
|
</fieldset> |
||||
|
</section> |
||||
@ -0,0 +1,118 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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 { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; |
||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-entities-table-widget-settings', |
||||
|
templateUrl: './entities-table-widget-settings.component.html', |
||||
|
styleUrls: ['./../widget-settings.scss'] |
||||
|
}) |
||||
|
export class EntitiesTableWidgetSettingsComponent extends WidgetSettingsComponent { |
||||
|
|
||||
|
entitiesTableWidgetSettingsForm: FormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: FormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): FormGroup { |
||||
|
return this.entitiesTableWidgetSettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return { |
||||
|
entitiesTitle: '', |
||||
|
enableSearch: true, |
||||
|
enableSelectColumnDisplay: true, |
||||
|
enableStickyHeader: true, |
||||
|
enableStickyAction: true, |
||||
|
reserveSpaceForHiddenAction: 'true', |
||||
|
displayEntityName: true, |
||||
|
entityNameColumnTitle: '', |
||||
|
displayEntityLabel: false, |
||||
|
entityLabelColumnTitle: '', |
||||
|
displayEntityType: true, |
||||
|
displayPagination: true, |
||||
|
defaultPageSize: 10, |
||||
|
defaultSortOrder: 'entityName', |
||||
|
useRowStyleFunction: false, |
||||
|
rowStyleFunction: '' |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
this.entitiesTableWidgetSettingsForm = this.fb.group({ |
||||
|
entitiesTitle: [settings.entitiesTitle, []], |
||||
|
enableSearch: [settings.enableSearch, []], |
||||
|
enableSelectColumnDisplay: [settings.enableSelectColumnDisplay, []], |
||||
|
enableStickyHeader: [settings.enableStickyHeader, []], |
||||
|
enableStickyAction: [settings.enableStickyAction, []], |
||||
|
reserveSpaceForHiddenAction: [settings.reserveSpaceForHiddenAction, []], |
||||
|
displayEntityName: [settings.displayEntityName, []], |
||||
|
entityNameColumnTitle: [settings.entityNameColumnTitle, []], |
||||
|
displayEntityLabel: [settings.displayEntityLabel, []], |
||||
|
entityLabelColumnTitle: [settings.entityLabelColumnTitle, []], |
||||
|
displayEntityType: [settings.displayEntityType, []], |
||||
|
displayPagination: [settings.displayPagination, []], |
||||
|
defaultPageSize: [settings.defaultPageSize, [Validators.min(1)]], |
||||
|
defaultSortOrder: [settings.defaultSortOrder, []], |
||||
|
useRowStyleFunction: [settings.useRowStyleFunction, []], |
||||
|
rowStyleFunction: [settings.rowStyleFunction, [Validators.required]] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
protected validatorTriggers(): string[] { |
||||
|
return ['useRowStyleFunction', 'displayPagination', 'displayEntityName', 'displayEntityLabel']; |
||||
|
} |
||||
|
|
||||
|
protected updateValidators(emitEvent: boolean) { |
||||
|
const useRowStyleFunction: boolean = this.entitiesTableWidgetSettingsForm.get('useRowStyleFunction').value; |
||||
|
const displayPagination: boolean = this.entitiesTableWidgetSettingsForm.get('displayPagination').value; |
||||
|
const displayEntityName: boolean = this.entitiesTableWidgetSettingsForm.get('displayEntityName').value; |
||||
|
const displayEntityLabel: boolean = this.entitiesTableWidgetSettingsForm.get('displayEntityLabel').value; |
||||
|
if (useRowStyleFunction) { |
||||
|
this.entitiesTableWidgetSettingsForm.get('rowStyleFunction').enable(); |
||||
|
} else { |
||||
|
this.entitiesTableWidgetSettingsForm.get('rowStyleFunction').disable(); |
||||
|
} |
||||
|
if (displayPagination) { |
||||
|
this.entitiesTableWidgetSettingsForm.get('defaultPageSize').enable(); |
||||
|
} else { |
||||
|
this.entitiesTableWidgetSettingsForm.get('defaultPageSize').disable(); |
||||
|
} |
||||
|
if (displayEntityName) { |
||||
|
this.entitiesTableWidgetSettingsForm.get('entityNameColumnTitle').enable(); |
||||
|
} else { |
||||
|
this.entitiesTableWidgetSettingsForm.get('entityNameColumnTitle').disable(); |
||||
|
} |
||||
|
if (displayEntityLabel) { |
||||
|
this.entitiesTableWidgetSettingsForm.get('entityLabelColumnTitle').enable(); |
||||
|
} else { |
||||
|
this.entitiesTableWidgetSettingsForm.get('entityLabelColumnTitle').disable(); |
||||
|
} |
||||
|
this.entitiesTableWidgetSettingsForm.get('rowStyleFunction').updateValueAndValidity({emitEvent}); |
||||
|
this.entitiesTableWidgetSettingsForm.get('defaultPageSize').updateValueAndValidity({emitEvent}); |
||||
|
this.entitiesTableWidgetSettingsForm.get('entityNameColumnTitle').updateValueAndValidity({emitEvent}); |
||||
|
this.entitiesTableWidgetSettingsForm.get('entityLabelColumnTitle').updateValueAndValidity({emitEvent}); |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,25 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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. |
||||
|
|
||||
|
--> |
||||
|
<section [formGroup]="htmlCardWidgetSettingsForm" fxLayout="column"> |
||||
|
<tb-html formControlName="cardHtml" required |
||||
|
label="{{ 'widgets.html-card.html' | translate }}"> |
||||
|
</tb-html> |
||||
|
<tb-css formControlName="cardCss" |
||||
|
label="{{ 'widgets.html-card.css' | translate }}"> |
||||
|
</tb-css> |
||||
|
</section> |
||||
@ -0,0 +1,54 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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 { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; |
||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-html-card-widget-settings', |
||||
|
templateUrl: './html-card-widget-settings.component.html', |
||||
|
styleUrls: [] |
||||
|
}) |
||||
|
export class HtmlCardWidgetSettingsComponent extends WidgetSettingsComponent { |
||||
|
|
||||
|
htmlCardWidgetSettingsForm: FormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: FormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): FormGroup { |
||||
|
return this.htmlCardWidgetSettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return { |
||||
|
cardHtml: '<div class=\'card\'>HTML code here</div>', |
||||
|
cardCss: '.card {\n font-weight: bold; \n}' |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
this.htmlCardWidgetSettingsForm = this.fb.group({ |
||||
|
cardHtml: [settings.cardHtml, [Validators.required]], |
||||
|
cardCss: [settings.cardCss, []] |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,73 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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. |
||||
|
|
||||
|
--> |
||||
|
<mat-expansion-panel class="label-widget-label" fxFlex [formGroup]="labelWidgetLabelFormGroup" [(expanded)]="expanded"> |
||||
|
<mat-expansion-panel-header> |
||||
|
<div fxFlex fxLayout="row" fxLayoutAlign="start center"> |
||||
|
<mat-panel-title> |
||||
|
<div fxLayout="row" fxFlex fxLayoutAlign="start center"> |
||||
|
{{ labelWidgetLabelFormGroup.get('pattern').value }} |
||||
|
</div> |
||||
|
</mat-panel-title> |
||||
|
<span fxFlex></span> |
||||
|
<button *ngIf="!disabled" mat-icon-button style="min-width: 40px;" |
||||
|
type="button" |
||||
|
(click)="removeLabel.emit()" |
||||
|
matTooltip="{{ 'action.remove' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>delete</mat-icon> |
||||
|
</button> |
||||
|
</div> |
||||
|
</mat-expansion-panel-header> |
||||
|
<ng-template matExpansionPanelContent> |
||||
|
<div fxLayout="column" fxLayoutGap="0.5em"> |
||||
|
<mat-divider></mat-divider> |
||||
|
<section class="tb-widget-settings" fxLayout="column"> |
||||
|
<mat-form-field style="padding-bottom: 16px;"> |
||||
|
<mat-label translate>widgets.label-widget.label-pattern</mat-label> |
||||
|
<input required matInput formControlName="pattern"> |
||||
|
<mat-error *ngIf="labelWidgetLabelFormGroup.get('pattern').hasError('required')"> |
||||
|
{{ 'widgets.label-widget.label-pattern-required' | translate }} |
||||
|
</mat-error> |
||||
|
<mat-hint [innerHTML]="'widgets.label-widget.label-pattern-hint' | translate | safe: 'html'"></mat-hint> |
||||
|
</mat-form-field> |
||||
|
<fieldset class="fields-group"> |
||||
|
<legend class="group-title" translate>widgets.label-widget.label-position</legend> |
||||
|
<section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px"> |
||||
|
<mat-form-field fxFlex> |
||||
|
<mat-label translate>widgets.label-widget.x-pos</mat-label> |
||||
|
<input matInput type="number" min="0" max="100" formControlName="x"> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex> |
||||
|
<mat-label translate>widgets.label-widget.y-pos</mat-label> |
||||
|
<input matInput type="number" min="0" max="100" formControlName="y"> |
||||
|
</mat-form-field> |
||||
|
</section> |
||||
|
</fieldset> |
||||
|
<tb-color-input |
||||
|
formControlName="backgroundColor" |
||||
|
icon="format_color_fill" |
||||
|
label="{{ 'widgets.label-widget.background-color' | translate }}" openOnInput colorClearButton> |
||||
|
</tb-color-input> |
||||
|
<fieldset class="fields-group"> |
||||
|
<legend class="group-title" translate>widgets.label-widget.font-settings</legend> |
||||
|
<tb-widget-font formControlName="font" sizeTitle="widgets.widget-font.relative-font-size"></tb-widget-font> |
||||
|
</fieldset> |
||||
|
</section> |
||||
|
</div> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
@ -0,0 +1,40 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2022 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. |
||||
|
*/ |
||||
|
:host { |
||||
|
display: block; |
||||
|
.mat-expansion-panel { |
||||
|
box-shadow: none; |
||||
|
&.label-widget-label { |
||||
|
border: 1px groove rgba(0, 0, 0, .25); |
||||
|
.mat-expansion-panel-header { |
||||
|
padding: 0 24px 0 8px; |
||||
|
&.mat-expanded { |
||||
|
height: 48px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
:host ::ng-deep { |
||||
|
.mat-expansion-panel { |
||||
|
&.label-widget-label { |
||||
|
.mat-expansion-panel-body { |
||||
|
padding: 0 8px 8px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,113 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core'; |
||||
|
import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms'; |
||||
|
import { PageComponent } from '@shared/components/page.component'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { TranslateService } from '@ngx-translate/core'; |
||||
|
import { WidgetFont } from '@home/components/widget/lib/settings/common/widget-font.component'; |
||||
|
|
||||
|
export interface LabelWidgetLabel { |
||||
|
pattern: string; |
||||
|
x: number; |
||||
|
y: number; |
||||
|
backgroundColor: string; |
||||
|
font: WidgetFont; |
||||
|
} |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-label-widget-label', |
||||
|
templateUrl: './label-widget-label.component.html', |
||||
|
styleUrls: ['./label-widget-label.component.scss', './../widget-settings.scss'], |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => LabelWidgetLabelComponent), |
||||
|
multi: true |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
export class LabelWidgetLabelComponent extends PageComponent implements OnInit, ControlValueAccessor { |
||||
|
|
||||
|
@Input() |
||||
|
disabled: boolean; |
||||
|
|
||||
|
@Input() |
||||
|
expanded = false; |
||||
|
|
||||
|
@Output() |
||||
|
removeLabel = new EventEmitter(); |
||||
|
|
||||
|
private modelValue: LabelWidgetLabel; |
||||
|
|
||||
|
private propagateChange = null; |
||||
|
|
||||
|
public labelWidgetLabelFormGroup: FormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private translate: TranslateService, |
||||
|
private fb: FormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.labelWidgetLabelFormGroup = this.fb.group({ |
||||
|
pattern: [null, [Validators.required]], |
||||
|
x: [null, [Validators.min(0), Validators.max(100)]], |
||||
|
y: [null, [Validators.min(0), Validators.max(100)]], |
||||
|
backgroundColor: [null, []], |
||||
|
font: [null, []] |
||||
|
}); |
||||
|
this.labelWidgetLabelFormGroup.valueChanges.subscribe(() => { |
||||
|
this.updateModel(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
} |
||||
|
|
||||
|
setDisabledState(isDisabled: boolean): void { |
||||
|
this.disabled = isDisabled; |
||||
|
if (isDisabled) { |
||||
|
this.labelWidgetLabelFormGroup.disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.labelWidgetLabelFormGroup.enable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
writeValue(value: LabelWidgetLabel): void { |
||||
|
this.modelValue = value; |
||||
|
this.labelWidgetLabelFormGroup.patchValue( |
||||
|
value, {emitEvent: false} |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
private updateModel() { |
||||
|
const value: LabelWidgetLabel = this.labelWidgetLabelFormGroup.value; |
||||
|
this.modelValue = value; |
||||
|
if (this.labelWidgetLabelFormGroup.valid) { |
||||
|
this.propagateChange(this.modelValue); |
||||
|
} else { |
||||
|
this.propagateChange(null); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,50 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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. |
||||
|
|
||||
|
--> |
||||
|
<section class="tb-widget-settings" [formGroup]="labelWidgetSettingsForm" fxLayout="column"> |
||||
|
<tb-image-input required |
||||
|
label="{{ 'widgets.label-widget.background-image' | translate }}" |
||||
|
formControlName="backgroundImageUrl"> |
||||
|
</tb-image-input> |
||||
|
<fieldset class="fields-group"> |
||||
|
<legend class="group-title" translate>widgets.label-widget.labels</legend> |
||||
|
<div fxLayout="column"> |
||||
|
<div class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical" |
||||
|
(cdkDropListDropped)="labelDrop($event)"> |
||||
|
<div cdkDrag class="tb-draggable" *ngFor="let labelControl of labelsFormArray().controls; trackBy: trackByLabelControl; |
||||
|
let $index = index; last as isLast;" |
||||
|
fxLayout="column" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}"> |
||||
|
<tb-label-widget-label [formControl]="labelControl" |
||||
|
[expanded]="labelControl.new" |
||||
|
(removeLabel)="removeLabel($index)"> |
||||
|
</tb-label-widget-label> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div *ngIf="!labelsFormArray().controls.length"> |
||||
|
<span translate fxLayoutAlign="center center" |
||||
|
class="tb-prompt">widgets.label-widget.no-labels</span> |
||||
|
</div> |
||||
|
<div style="padding-top: 16px;"> |
||||
|
<button mat-raised-button color="primary" |
||||
|
type="button" |
||||
|
(click)="addLabel()"> |
||||
|
<span translate>widgets.label-widget.add-label</span> |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</fieldset> |
||||
|
</section> |
||||
@ -0,0 +1,110 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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 { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; |
||||
|
import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { LabelWidgetLabel } from '@home/components/widget/lib/settings/cards/label-widget-label.component'; |
||||
|
import { CdkDragDrop } from '@angular/cdk/drag-drop'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-label-widget-settings', |
||||
|
templateUrl: './label-widget-settings.component.html', |
||||
|
styleUrls: ['./../widget-settings.scss'] |
||||
|
}) |
||||
|
export class LabelWidgetSettingsComponent extends WidgetSettingsComponent { |
||||
|
|
||||
|
labelWidgetSettingsForm: FormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: FormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): FormGroup { |
||||
|
return this.labelWidgetSettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return { |
||||
|
backgroundImageUrl: 'data:image/svg+xml;base64,PHN2ZyBpZD0ic3ZnMiIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwIiB3aWR0aD0iMTAwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgdmlld0JveD0iMCAwIDEwMCAxMDAiPgogPGcgaWQ9ImxheWVyMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtOTUyLjM2KSI+CiAgPHJlY3QgaWQ9InJlY3Q0Njg0IiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBoZWlnaHQ9Ijk5LjAxIiB3aWR0aD0iOTkuMDEiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiB5PSI5NTIuODYiIHg9Ii40OTUwNSIgc3Ryb2tlLXdpZHRoPSIuOTkwMTAiIGZpbGw9IiNlZWUiLz4KICA8dGV4dCBpZD0idGV4dDQ2ODYiIHN0eWxlPSJ3b3JkLXNwYWNpbmc6MHB4O2xldHRlci1zcGFjaW5nOjBweDt0ZXh0LWFuY2hvcjptaWRkbGU7dGV4dC1hbGlnbjpjZW50ZXIiIGZvbnQtd2VpZ2h0PSJib2xkIiB4bWw6c3BhY2U9InByZXNlcnZlIiBmb250LXNpemU9IjEwcHgiIGxpbmUtaGVpZ2h0PSIxMjUlIiB5PSI5NzAuNzI4MDkiIHg9IjQ5LjM5NjQ3NyIgZm9udC1mYW1pbHk9IlJvYm90byIgZmlsbD0iIzY2NjY2NiI+PHRzcGFuIGlkPSJ0c3BhbjQ2OTAiIHg9IjUwLjY0NjQ3NyIgeT0iOTcwLjcyODA5Ij5JbWFnZSBiYWNrZ3JvdW5kIDwvdHNwYW4+PHRzcGFuIGlkPSJ0c3BhbjQ2OTIiIHg9IjQ5LjM5NjQ3NyIgeT0iOTgzLjIyODA5Ij5pcyBub3QgY29uZmlndXJlZDwvdHNwYW4+PC90ZXh0PgogIDxyZWN0IGlkPSJyZWN0NDY5NCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgaGVpZ2h0PSIxOS4zNiIgd2lkdGg9IjY5LjM2IiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgeT0iOTkyLjY4IiB4PSIxNS4zMiIgc3Ryb2tlLXdpZHRoPSIuNjM5ODYiIGZpbGw9Im5vbmUiLz4KIDwvZz4KPC9zdmc+Cg==', |
||||
|
labels: [] |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
this.labelWidgetSettingsForm = this.fb.group({ |
||||
|
backgroundImageUrl: [settings.backgroundImageUrl, [Validators.required]], |
||||
|
labels: this.prepareLabelsFormArray(settings.labels) |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
protected doUpdateSettings(settingsForm: FormGroup, settings: WidgetSettings) { |
||||
|
settingsForm.setControl('labels', this.prepareLabelsFormArray(settings.labels), {emitEvent: false}); |
||||
|
} |
||||
|
|
||||
|
private prepareLabelsFormArray(labels: LabelWidgetLabel[] | undefined): FormArray { |
||||
|
const labelsControls: Array<AbstractControl> = []; |
||||
|
if (labels) { |
||||
|
labels.forEach((label) => { |
||||
|
labelsControls.push(this.fb.control(label, [Validators.required])); |
||||
|
}); |
||||
|
} |
||||
|
return this.fb.array(labelsControls); |
||||
|
} |
||||
|
|
||||
|
labelsFormArray(): FormArray { |
||||
|
return this.labelWidgetSettingsForm.get('labels') as FormArray; |
||||
|
} |
||||
|
|
||||
|
public trackByLabelControl(index: number, labelControl: AbstractControl): any { |
||||
|
return labelControl; |
||||
|
} |
||||
|
|
||||
|
public removeLabel(index: number) { |
||||
|
(this.labelWidgetSettingsForm.get('labels') as FormArray).removeAt(index); |
||||
|
} |
||||
|
|
||||
|
public addLabel() { |
||||
|
const label: LabelWidgetLabel = { |
||||
|
pattern: '${#0}', |
||||
|
x: 50, |
||||
|
y: 50, |
||||
|
backgroundColor: 'rgba(0,0,0,0)', |
||||
|
font: { |
||||
|
family: 'Roboto', |
||||
|
size: 6, |
||||
|
style: 'normal', |
||||
|
weight: '500', |
||||
|
color: '#fff' |
||||
|
} |
||||
|
}; |
||||
|
const labelsArray = this.labelWidgetSettingsForm.get('labels') as FormArray; |
||||
|
const labelControl = this.fb.control(label, [Validators.required]); |
||||
|
(labelControl as any).new = true; |
||||
|
labelsArray.push(labelControl); |
||||
|
this.labelWidgetSettingsForm.updateValueAndValidity(); |
||||
|
} |
||||
|
|
||||
|
labelDrop(event: CdkDragDrop<string[]>) { |
||||
|
const labelsArray = this.labelWidgetSettingsForm.get('labels') as FormArray; |
||||
|
const label = labelsArray.at(event.previousIndex); |
||||
|
labelsArray.removeAt(event.previousIndex); |
||||
|
labelsArray.insert(event.currentIndex, label); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,36 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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. |
||||
|
|
||||
|
--> |
||||
|
<section class="tb-widget-settings" [formGroup]="markdownWidgetSettingsForm" fxLayout="column"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="useMarkdownTextFunction"> |
||||
|
{{ 'widgets.markdown.use-markdown-text-function' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<tb-js-func [fxShow]="markdownWidgetSettingsForm.get('useMarkdownTextFunction').value" |
||||
|
formControlName="markdownTextFunction" |
||||
|
[globalVariables]="functionScopeVariables" |
||||
|
[functionArgs]="['data']" |
||||
|
functionTitle="{{ 'widgets.markdown.markdown-text-function' | translate }}" |
||||
|
helpId="widget/lib/markdown/markdown_text_fn"> |
||||
|
</tb-js-func> |
||||
|
<tb-markdown-editor [fxShow]="!markdownWidgetSettingsForm.get('useMarkdownTextFunction').value" |
||||
|
formControlName="markdownTextPattern" |
||||
|
label="{{ 'widgets.markdown.markdown-text-pattern' | translate }}"> |
||||
|
</tb-markdown-editor> |
||||
|
<tb-css formControlName="markdownCss" |
||||
|
label="{{ 'widgets.markdown.markdown-css' | translate }}"> |
||||
|
</tb-css> |
||||
|
</section> |
||||
@ -0,0 +1,76 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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 { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; |
||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-markdown-widget-settings', |
||||
|
templateUrl: './markdown-widget-settings.component.html', |
||||
|
styleUrls: ['./../widget-settings.scss'] |
||||
|
}) |
||||
|
export class MarkdownWidgetSettingsComponent extends WidgetSettingsComponent { |
||||
|
|
||||
|
markdownWidgetSettingsForm: FormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: FormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): FormGroup { |
||||
|
return this.markdownWidgetSettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return { |
||||
|
useMarkdownTextFunction: false, |
||||
|
markdownTextPattern: '# Markdown/HTML card \\n - **Current entity**: **${entityName}**. \\n - **Current value**: **${Random}**.', |
||||
|
markdownTextFunction: 'return \'# Some title\\\\n - Entity name: \' + data[0][\'entityName\'];', |
||||
|
markdownCss: '' |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
this.markdownWidgetSettingsForm = this.fb.group({ |
||||
|
useMarkdownTextFunction: [settings.useMarkdownTextFunction, []], |
||||
|
markdownTextPattern: [settings.markdownTextPattern, []], |
||||
|
markdownTextFunction: [settings.qrCodeTextFunction, []], |
||||
|
markdownCss: [settings.markdownCss, []] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
protected validatorTriggers(): string[] { |
||||
|
return ['useMarkdownTextFunction']; |
||||
|
} |
||||
|
|
||||
|
protected updateValidators(emitEvent: boolean) { |
||||
|
const useMarkdownTextFunction: boolean = this.markdownWidgetSettingsForm.get('useMarkdownTextFunction').value; |
||||
|
if (useMarkdownTextFunction) { |
||||
|
this.markdownWidgetSettingsForm.get('markdownTextPattern').disable(); |
||||
|
this.markdownWidgetSettingsForm.get('markdownTextFunction').enable(); |
||||
|
} else { |
||||
|
this.markdownWidgetSettingsForm.get('markdownTextPattern').enable(); |
||||
|
this.markdownWidgetSettingsForm.get('markdownTextFunction').disable(); |
||||
|
} |
||||
|
this.markdownWidgetSettingsForm.get('markdownTextPattern').updateValueAndValidity({emitEvent}); |
||||
|
this.markdownWidgetSettingsForm.get('markdownTextFunction').updateValueAndValidity({emitEvent}); |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,37 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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. |
||||
|
|
||||
|
--> |
||||
|
<section class="tb-widget-settings" [formGroup]="qrCodeWidgetSettingsForm" fxLayout="column"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="useQrCodeTextFunction"> |
||||
|
{{ 'widgets.qr-code.use-qr-code-text-function' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<mat-form-field [fxShow]="!qrCodeWidgetSettingsForm.get('useQrCodeTextFunction').value"> |
||||
|
<mat-label translate>widgets.qr-code.qr-code-text-pattern</mat-label> |
||||
|
<input required matInput formControlName="qrCodeTextPattern"> |
||||
|
<mat-error *ngIf="qrCodeWidgetSettingsForm.get('qrCodeTextPattern').hasError('required')"> |
||||
|
{{ 'widgets.qr-code.qr-code-text-pattern-required' | translate }} |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
|
<tb-js-func required |
||||
|
[fxShow]="qrCodeWidgetSettingsForm.get('useQrCodeTextFunction').value" |
||||
|
formControlName="qrCodeTextFunction" |
||||
|
[globalVariables]="functionScopeVariables" |
||||
|
[functionArgs]="['data']" |
||||
|
functionTitle="{{ 'widgets.qr-code.qr-code-text-function' | translate }}" |
||||
|
helpId="widget/lib/qrcode/qrcode_text_fn"> |
||||
|
</tb-js-func> |
||||
|
</section> |
||||
@ -0,0 +1,74 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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 { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; |
||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-qrcode-widget-settings', |
||||
|
templateUrl: './qrcode-widget-settings.component.html', |
||||
|
styleUrls: ['./../widget-settings.scss'] |
||||
|
}) |
||||
|
export class QrCodeWidgetSettingsComponent extends WidgetSettingsComponent { |
||||
|
|
||||
|
qrCodeWidgetSettingsForm: FormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: FormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): FormGroup { |
||||
|
return this.qrCodeWidgetSettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return { |
||||
|
qrCodeTextPattern: '${entityName}', |
||||
|
useQrCodeTextFunction: false, |
||||
|
qrCodeTextFunction: 'return data[0][\'entityName\'];' |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
this.qrCodeWidgetSettingsForm = this.fb.group({ |
||||
|
qrCodeTextPattern: [settings.qrCodeTextPattern, [Validators.required]], |
||||
|
useQrCodeTextFunction: [settings.useQrCodeTextFunction, [Validators.required]], |
||||
|
qrCodeTextFunction: [settings.qrCodeTextFunction, [Validators.required]] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
protected validatorTriggers(): string[] { |
||||
|
return ['useQrCodeTextFunction']; |
||||
|
} |
||||
|
|
||||
|
protected updateValidators(emitEvent: boolean) { |
||||
|
const useQrCodeTextFunction: boolean = this.qrCodeWidgetSettingsForm.get('useQrCodeTextFunction').value; |
||||
|
if (useQrCodeTextFunction) { |
||||
|
this.qrCodeWidgetSettingsForm.get('qrCodeTextPattern').disable(); |
||||
|
this.qrCodeWidgetSettingsForm.get('qrCodeTextFunction').enable(); |
||||
|
} else { |
||||
|
this.qrCodeWidgetSettingsForm.get('qrCodeTextPattern').enable(); |
||||
|
this.qrCodeWidgetSettingsForm.get('qrCodeTextFunction').disable(); |
||||
|
} |
||||
|
this.qrCodeWidgetSettingsForm.get('qrCodeTextPattern').updateValueAndValidity({emitEvent}); |
||||
|
this.qrCodeWidgetSettingsForm.get('qrCodeTextFunction').updateValueAndValidity({emitEvent}); |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,30 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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. |
||||
|
|
||||
|
--> |
||||
|
<section [formGroup]="simpleCardWidgetSettingsForm" fxLayout="column"> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.simple-card.label-position</mat-label> |
||||
|
<mat-select formControlName="labelPosition"> |
||||
|
<mat-option [value]="'left'"> |
||||
|
{{ 'widgets.simple-card.label-position-left' | translate }} |
||||
|
</mat-option> |
||||
|
<mat-option [value]="'top'"> |
||||
|
{{ 'widgets.simple-card.label-position-top' | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
</section> |
||||
@ -0,0 +1,52 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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 { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; |
||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-simple-card-widget-settings', |
||||
|
templateUrl: './simple-card-widget-settings.component.html', |
||||
|
styleUrls: [] |
||||
|
}) |
||||
|
export class SimpleCardWidgetSettingsComponent extends WidgetSettingsComponent { |
||||
|
|
||||
|
simpleCardWidgetSettingsForm: FormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: FormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): FormGroup { |
||||
|
return this.simpleCardWidgetSettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return { |
||||
|
labelPosition: 'left' |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
this.simpleCardWidgetSettingsForm = this.fb.group({ |
||||
|
labelPosition: [settings.labelPosition, []] |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,69 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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. |
||||
|
|
||||
|
--> |
||||
|
<section class="tb-widget-settings" [formGroup]="timeseriesTableKeySettingsForm" fxLayout="column"> |
||||
|
<fieldset class="fields-group fields-group-slider"> |
||||
|
<legend class="group-title" translate>widgets.table.cell-style</legend> |
||||
|
<mat-expansion-panel class="tb-settings" [expanded]="timeseriesTableKeySettingsForm.get('useCellStyleFunction').value"> |
||||
|
<mat-expansion-panel-header fxLayout="row wrap"> |
||||
|
<mat-panel-title> |
||||
|
<mat-slide-toggle formControlName="useCellStyleFunction" (click)="$event.stopPropagation()" |
||||
|
fxLayoutAlign="center"> |
||||
|
{{ 'widgets.table.use-cell-style-function' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</mat-panel-title> |
||||
|
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate> |
||||
|
widget-config.advanced-settings |
||||
|
</mat-panel-description> |
||||
|
</mat-expansion-panel-header> |
||||
|
<ng-template matExpansionPanelContent> |
||||
|
<tb-js-func required |
||||
|
formControlName="cellStyleFunction" |
||||
|
[globalVariables]="functionScopeVariables" |
||||
|
[functionArgs]="['value', 'rowData', 'ctx']" |
||||
|
functionTitle="{{ 'widgets.table.cell-style-function' | translate }}" |
||||
|
helpId="widget/lib/timeseries/cell_style_fn"> |
||||
|
</tb-js-func> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
|
</fieldset> |
||||
|
<fieldset class="fields-group fields-group-slider"> |
||||
|
<legend class="group-title" translate>widgets.table.cell-content</legend> |
||||
|
<mat-expansion-panel class="tb-settings" [expanded]="timeseriesTableKeySettingsForm.get('useCellContentFunction').value"> |
||||
|
<mat-expansion-panel-header fxLayout="row wrap"> |
||||
|
<mat-panel-title> |
||||
|
<mat-slide-toggle formControlName="useCellContentFunction" (click)="$event.stopPropagation()" |
||||
|
fxLayoutAlign="center"> |
||||
|
{{ 'widgets.table.use-cell-content-function' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</mat-panel-title> |
||||
|
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate> |
||||
|
widget-config.advanced-settings |
||||
|
</mat-panel-description> |
||||
|
</mat-expansion-panel-header> |
||||
|
<ng-template matExpansionPanelContent> |
||||
|
<tb-js-func required |
||||
|
formControlName="cellContentFunction" |
||||
|
[globalVariables]="functionScopeVariables" |
||||
|
[functionArgs]="['value', 'rowData', 'ctx']" |
||||
|
functionTitle="{{ 'widgets.table.cell-content-function' | translate }}" |
||||
|
helpId="widget/lib/timeseries/cell_content_fn"> |
||||
|
</tb-js-func> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
|
</fieldset> |
||||
|
</section> |
||||
@ -0,0 +1,80 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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 { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; |
||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-timeseries-table-key-settings', |
||||
|
templateUrl: './timeseries-table-key-settings.component.html', |
||||
|
styleUrls: ['./../widget-settings.scss'] |
||||
|
}) |
||||
|
export class TimeseriesTableKeySettingsComponent extends WidgetSettingsComponent { |
||||
|
|
||||
|
timeseriesTableKeySettingsForm: FormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: FormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): FormGroup { |
||||
|
return this.timeseriesTableKeySettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return { |
||||
|
useCellStyleFunction: false, |
||||
|
cellStyleFunction: '', |
||||
|
useCellContentFunction: false, |
||||
|
cellContentFunction: '' |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
this.timeseriesTableKeySettingsForm = this.fb.group({ |
||||
|
useCellStyleFunction: [settings.useCellStyleFunction, []], |
||||
|
cellStyleFunction: [settings.cellStyleFunction, [Validators.required]], |
||||
|
useCellContentFunction: [settings.useCellContentFunction, []], |
||||
|
cellContentFunction: [settings.cellContentFunction, [Validators.required]], |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
protected validatorTriggers(): string[] { |
||||
|
return ['useCellStyleFunction', 'useCellContentFunction']; |
||||
|
} |
||||
|
|
||||
|
protected updateValidators(emitEvent: boolean) { |
||||
|
const useCellStyleFunction: boolean = this.timeseriesTableKeySettingsForm.get('useCellStyleFunction').value; |
||||
|
const useCellContentFunction: boolean = this.timeseriesTableKeySettingsForm.get('useCellContentFunction').value; |
||||
|
if (useCellStyleFunction) { |
||||
|
this.timeseriesTableKeySettingsForm.get('cellStyleFunction').enable(); |
||||
|
} else { |
||||
|
this.timeseriesTableKeySettingsForm.get('cellStyleFunction').disable(); |
||||
|
} |
||||
|
if (useCellContentFunction) { |
||||
|
this.timeseriesTableKeySettingsForm.get('cellContentFunction').enable(); |
||||
|
} else { |
||||
|
this.timeseriesTableKeySettingsForm.get('cellContentFunction').disable(); |
||||
|
} |
||||
|
this.timeseriesTableKeySettingsForm.get('cellStyleFunction').updateValueAndValidity({emitEvent}); |
||||
|
this.timeseriesTableKeySettingsForm.get('cellContentFunction').updateValueAndValidity({emitEvent}); |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,76 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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. |
||||
|
|
||||
|
--> |
||||
|
<section class="tb-widget-settings" [formGroup]="timeseriesTableLatestKeySettingsForm" fxLayout="column"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="show"> |
||||
|
{{ 'widgets.table.show-latest-data-column' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<mat-form-field [fxShow]="timeseriesTableLatestKeySettingsForm.get('show').value" fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.table.latest-data-column-order</mat-label> |
||||
|
<input matInput type="number" step="1" formControlName="order"> |
||||
|
</mat-form-field> |
||||
|
<fieldset [fxShow]="timeseriesTableLatestKeySettingsForm.get('show').value" class="fields-group fields-group-slider"> |
||||
|
<legend class="group-title" translate>widgets.table.cell-style</legend> |
||||
|
<mat-expansion-panel class="tb-settings" [expanded]="timeseriesTableLatestKeySettingsForm.get('useCellStyleFunction').value"> |
||||
|
<mat-expansion-panel-header fxLayout="row wrap"> |
||||
|
<mat-panel-title> |
||||
|
<mat-slide-toggle formControlName="useCellStyleFunction" (click)="$event.stopPropagation()" |
||||
|
fxLayoutAlign="center"> |
||||
|
{{ 'widgets.table.use-cell-style-function' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</mat-panel-title> |
||||
|
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate> |
||||
|
widget-config.advanced-settings |
||||
|
</mat-panel-description> |
||||
|
</mat-expansion-panel-header> |
||||
|
<ng-template matExpansionPanelContent> |
||||
|
<tb-js-func required |
||||
|
formControlName="cellStyleFunction" |
||||
|
[globalVariables]="functionScopeVariables" |
||||
|
[functionArgs]="['value', 'rowData', 'ctx']" |
||||
|
functionTitle="{{ 'widgets.table.cell-style-function' | translate }}" |
||||
|
helpId="widget/lib/timeseries/cell_style_fn"> |
||||
|
</tb-js-func> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
|
</fieldset> |
||||
|
<fieldset [fxShow]="timeseriesTableLatestKeySettingsForm.get('show').value" class="fields-group fields-group-slider"> |
||||
|
<legend class="group-title" translate>widgets.table.cell-content</legend> |
||||
|
<mat-expansion-panel class="tb-settings" [expanded]="timeseriesTableLatestKeySettingsForm.get('useCellContentFunction').value"> |
||||
|
<mat-expansion-panel-header fxLayout="row wrap"> |
||||
|
<mat-panel-title> |
||||
|
<mat-slide-toggle formControlName="useCellContentFunction" (click)="$event.stopPropagation()" |
||||
|
fxLayoutAlign="center"> |
||||
|
{{ 'widgets.table.use-cell-content-function' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</mat-panel-title> |
||||
|
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate> |
||||
|
widget-config.advanced-settings |
||||
|
</mat-panel-description> |
||||
|
</mat-expansion-panel-header> |
||||
|
<ng-template matExpansionPanelContent> |
||||
|
<tb-js-func required |
||||
|
formControlName="cellContentFunction" |
||||
|
[globalVariables]="functionScopeVariables" |
||||
|
[functionArgs]="['value', 'rowData', 'ctx']" |
||||
|
functionTitle="{{ 'widgets.table.cell-content-function' | translate }}" |
||||
|
helpId="widget/lib/timeseries/cell_content_fn"> |
||||
|
</tb-js-func> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
|
</fieldset> |
||||
|
</section> |
||||
@ -0,0 +1,96 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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 { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; |
||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-timeseries-table-latest-key-settings', |
||||
|
templateUrl: './timeseries-table-latest-key-settings.component.html', |
||||
|
styleUrls: ['./../widget-settings.scss'] |
||||
|
}) |
||||
|
export class TimeseriesTableLatestKeySettingsComponent extends WidgetSettingsComponent { |
||||
|
|
||||
|
timeseriesTableLatestKeySettingsForm: FormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: FormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): FormGroup { |
||||
|
return this.timeseriesTableLatestKeySettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return { |
||||
|
show: true, |
||||
|
useCellStyleFunction: false, |
||||
|
cellStyleFunction: '', |
||||
|
useCellContentFunction: false, |
||||
|
cellContentFunction: '' |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
this.timeseriesTableLatestKeySettingsForm = this.fb.group({ |
||||
|
show: [settings.show, []], |
||||
|
order: [settings.order, []], |
||||
|
useCellStyleFunction: [settings.useCellStyleFunction, []], |
||||
|
cellStyleFunction: [settings.cellStyleFunction, [Validators.required]], |
||||
|
useCellContentFunction: [settings.useCellContentFunction, []], |
||||
|
cellContentFunction: [settings.cellContentFunction, [Validators.required]], |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
protected validatorTriggers(): string[] { |
||||
|
return ['show', 'useCellStyleFunction', 'useCellContentFunction']; |
||||
|
} |
||||
|
|
||||
|
protected updateValidators(emitEvent: boolean) { |
||||
|
const show: boolean = this.timeseriesTableLatestKeySettingsForm.get('show').value; |
||||
|
if (show) { |
||||
|
this.timeseriesTableLatestKeySettingsForm.get('order').enable(); |
||||
|
this.timeseriesTableLatestKeySettingsForm.get('useCellStyleFunction').enable({emitEvent: false}); |
||||
|
this.timeseriesTableLatestKeySettingsForm.get('useCellContentFunction').enable({emitEvent: false}); |
||||
|
const useCellStyleFunction: boolean = this.timeseriesTableLatestKeySettingsForm.get('useCellStyleFunction').value; |
||||
|
const useCellContentFunction: boolean = this.timeseriesTableLatestKeySettingsForm.get('useCellContentFunction').value; |
||||
|
if (useCellStyleFunction) { |
||||
|
this.timeseriesTableLatestKeySettingsForm.get('cellStyleFunction').enable(); |
||||
|
} else { |
||||
|
this.timeseriesTableLatestKeySettingsForm.get('cellStyleFunction').disable(); |
||||
|
} |
||||
|
if (useCellContentFunction) { |
||||
|
this.timeseriesTableLatestKeySettingsForm.get('cellContentFunction').enable(); |
||||
|
} else { |
||||
|
this.timeseriesTableLatestKeySettingsForm.get('cellContentFunction').disable(); |
||||
|
} |
||||
|
} else { |
||||
|
this.timeseriesTableLatestKeySettingsForm.get('order').disable(); |
||||
|
this.timeseriesTableLatestKeySettingsForm.get('useCellStyleFunction').disable({emitEvent: false}); |
||||
|
this.timeseriesTableLatestKeySettingsForm.get('cellStyleFunction').disable(); |
||||
|
this.timeseriesTableLatestKeySettingsForm.get('useCellContentFunction').disable({emitEvent: false}); |
||||
|
this.timeseriesTableLatestKeySettingsForm.get('cellContentFunction').disable(); |
||||
|
} |
||||
|
this.timeseriesTableLatestKeySettingsForm.get('order').updateValueAndValidity({emitEvent}); |
||||
|
this.timeseriesTableLatestKeySettingsForm.get('cellStyleFunction').updateValueAndValidity({emitEvent}); |
||||
|
this.timeseriesTableLatestKeySettingsForm.get('cellContentFunction').updateValueAndValidity({emitEvent}); |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,96 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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. |
||||
|
|
||||
|
--> |
||||
|
<section class="tb-widget-settings" [formGroup]="timeseriesTableWidgetSettingsForm" fxLayout="column"> |
||||
|
<fieldset class="fields-group"> |
||||
|
<legend class="group-title" translate>widgets.table.common-table-settings</legend> |
||||
|
<section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px"> |
||||
|
<section fxLayout="column" fxFlex> |
||||
|
<mat-checkbox formControlName="enableSearch" style="margin-bottom: 16px;"> |
||||
|
{{ 'widgets.table.enable-search' | translate }} |
||||
|
</mat-checkbox> |
||||
|
</section> |
||||
|
<section fxLayout="column" fxFlex> |
||||
|
<mat-checkbox formControlName="enableStickyHeader" style="margin-bottom: 16px;"> |
||||
|
{{ 'widgets.table.enable-sticky-header' | translate }} |
||||
|
</mat-checkbox> |
||||
|
<mat-checkbox formControlName="enableStickyAction" style="margin-bottom: 16px;"> |
||||
|
{{ 'widgets.table.enable-sticky-action' | translate }} |
||||
|
</mat-checkbox> |
||||
|
</section> |
||||
|
</section> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.table.hidden-cell-button-display-mode</mat-label> |
||||
|
<mat-select formControlName="reserveSpaceForHiddenAction"> |
||||
|
<mat-option [value]="'true'"> |
||||
|
{{ 'widgets.table.show-empty-space-hidden-action' | translate }} |
||||
|
</mat-option> |
||||
|
<mat-option [value]="'false'"> |
||||
|
{{ 'widgets.table.dont-reserve-space-hidden-action' | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
<section fxLayout="column" fxLayoutGap="8px"> |
||||
|
<mat-slide-toggle formControlName="showTimestamp"> |
||||
|
{{ 'widgets.table.display-timestamp' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<mat-slide-toggle formControlName="showMilliseconds"> |
||||
|
{{ 'widgets.table.display-milliseconds' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center"> |
||||
|
<mat-slide-toggle fxFlex formControlName="displayPagination"> |
||||
|
{{ 'widgets.table.display-pagination' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.table.default-page-size</mat-label> |
||||
|
<input matInput type="number" min="1" step="1" formControlName="defaultPageSize"> |
||||
|
</mat-form-field> |
||||
|
</section> |
||||
|
<mat-slide-toggle formControlName="useEntityLabel"> |
||||
|
{{ 'widgets.table.use-entity-label-tab-name' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<mat-slide-toggle formControlName="hideEmptyLines"> |
||||
|
{{ 'widgets.table.hide-empty-lines' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</section> |
||||
|
</fieldset> |
||||
|
<fieldset class="fields-group fields-group-slider"> |
||||
|
<legend class="group-title" translate>widgets.table.row-style</legend> |
||||
|
<mat-expansion-panel class="tb-settings" [expanded]="timeseriesTableWidgetSettingsForm.get('useRowStyleFunction').value"> |
||||
|
<mat-expansion-panel-header fxLayout="row wrap"> |
||||
|
<mat-panel-title> |
||||
|
<mat-slide-toggle formControlName="useRowStyleFunction" (click)="$event.stopPropagation()" |
||||
|
fxLayoutAlign="center"> |
||||
|
{{ 'widgets.table.use-row-style-function' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</mat-panel-title> |
||||
|
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate> |
||||
|
widget-config.advanced-settings |
||||
|
</mat-panel-description> |
||||
|
</mat-expansion-panel-header> |
||||
|
<ng-template matExpansionPanelContent> |
||||
|
<tb-js-func required |
||||
|
formControlName="rowStyleFunction" |
||||
|
[globalVariables]="functionScopeVariables" |
||||
|
[functionArgs]="['rowData', 'ctx']" |
||||
|
functionTitle="{{ 'widgets.table.row-style-function' | translate }}" |
||||
|
helpId="widget/lib/timeseries/row_style_fn"> |
||||
|
</tb-js-func> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
|
</fieldset> |
||||
|
</section> |
||||
@ -0,0 +1,98 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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 { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; |
||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-timeseries-table-widget-settings', |
||||
|
templateUrl: './timeseries-table-widget-settings.component.html', |
||||
|
styleUrls: ['./../widget-settings.scss'] |
||||
|
}) |
||||
|
export class TimeseriesTableWidgetSettingsComponent extends WidgetSettingsComponent { |
||||
|
|
||||
|
timeseriesTableWidgetSettingsForm: FormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: FormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): FormGroup { |
||||
|
return this.timeseriesTableWidgetSettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return { |
||||
|
enableSearch: true, |
||||
|
enableStickyHeader: true, |
||||
|
enableStickyAction: true, |
||||
|
reserveSpaceForHiddenAction: 'true', |
||||
|
showTimestamp: true, |
||||
|
showMilliseconds: false, |
||||
|
displayPagination: true, |
||||
|
useEntityLabel: false, |
||||
|
defaultPageSize: 10, |
||||
|
hideEmptyLines: false, |
||||
|
disableStickyHeader: false, |
||||
|
useRowStyleFunction: false, |
||||
|
rowStyleFunction: '' |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
this.timeseriesTableWidgetSettingsForm = this.fb.group({ |
||||
|
enableSearch: [settings.enableSearch, []], |
||||
|
enableStickyHeader: [settings.enableStickyHeader, []], |
||||
|
enableStickyAction: [settings.enableStickyAction, []], |
||||
|
reserveSpaceForHiddenAction: [settings.reserveSpaceForHiddenAction, []], |
||||
|
showTimestamp: [settings.showTimestamp, []], |
||||
|
showMilliseconds: [settings.showMilliseconds, []], |
||||
|
displayPagination: [settings.displayPagination, []], |
||||
|
useEntityLabel: [settings.useEntityLabel, []], |
||||
|
defaultPageSize: [settings.defaultPageSize, [Validators.min(1)]], |
||||
|
hideEmptyLines: [settings.hideEmptyLines, []], |
||||
|
disableStickyHeader: [settings.disableStickyHeader, []], |
||||
|
useRowStyleFunction: [settings.useRowStyleFunction, []], |
||||
|
rowStyleFunction: [settings.rowStyleFunction, [Validators.required]] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
protected validatorTriggers(): string[] { |
||||
|
return ['useRowStyleFunction', 'displayPagination']; |
||||
|
} |
||||
|
|
||||
|
protected updateValidators(emitEvent: boolean) { |
||||
|
const useRowStyleFunction: boolean = this.timeseriesTableWidgetSettingsForm.get('useRowStyleFunction').value; |
||||
|
const displayPagination: boolean = this.timeseriesTableWidgetSettingsForm.get('displayPagination').value; |
||||
|
if (useRowStyleFunction) { |
||||
|
this.timeseriesTableWidgetSettingsForm.get('rowStyleFunction').enable(); |
||||
|
} else { |
||||
|
this.timeseriesTableWidgetSettingsForm.get('rowStyleFunction').disable(); |
||||
|
} |
||||
|
if (displayPagination) { |
||||
|
this.timeseriesTableWidgetSettingsForm.get('defaultPageSize').enable(); |
||||
|
} else { |
||||
|
this.timeseriesTableWidgetSettingsForm.get('defaultPageSize').disable(); |
||||
|
} |
||||
|
this.timeseriesTableWidgetSettingsForm.get('rowStyleFunction').updateValueAndValidity({emitEvent}); |
||||
|
this.timeseriesTableWidgetSettingsForm.get('defaultPageSize').updateValueAndValidity({emitEvent}); |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,25 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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. |
||||
|
|
||||
|
--> |
||||
|
<section class="tb-widget-settings" [formGroup]="chartWidgetSettingsForm" fxLayout="column"> |
||||
|
<fieldset class="fields-group"> |
||||
|
<legend class="group-title" translate>widgets.chart.common-settings</legend> |
||||
|
<mat-slide-toggle formControlName="showTooltip" class="slide-block"> |
||||
|
{{ 'widgets.chart.show-tooltip' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</fieldset> |
||||
|
</section> |
||||
@ -0,0 +1,52 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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 { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; |
||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-chart-widget-settings', |
||||
|
templateUrl: './chart-widget-settings.component.html', |
||||
|
styleUrls: ['./../widget-settings.scss'] |
||||
|
}) |
||||
|
export class ChartWidgetSettingsComponent extends WidgetSettingsComponent { |
||||
|
|
||||
|
chartWidgetSettingsForm: FormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: FormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): FormGroup { |
||||
|
return this.chartWidgetSettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return { |
||||
|
showTooltip: true |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
this.chartWidgetSettingsForm = this.fb.group({ |
||||
|
showTooltip: [settings.showTooltip, []] |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,64 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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. |
||||
|
|
||||
|
--> |
||||
|
<section class="tb-widget-settings" [formGroup]="doughnutChartWidgetSettingsForm" fxLayout="column"> |
||||
|
<fieldset class="fields-group"> |
||||
|
<legend class="group-title" translate>widgets.chart.common-settings</legend> |
||||
|
<mat-slide-toggle formControlName="showTooltip" class="slide-block"> |
||||
|
{{ 'widgets.chart.show-tooltip' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</fieldset> |
||||
|
<fieldset class="fields-group"> |
||||
|
<legend class="group-title" translate>widgets.chart.border-settings</legend> |
||||
|
<section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px"> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.chart.border-width</mat-label> |
||||
|
<input matInput type="number" min="0" formControlName="borderWidth"> |
||||
|
</mat-form-field> |
||||
|
<tb-color-input fxFlex |
||||
|
formControlName="borderColor" |
||||
|
icon="format_color_fill" |
||||
|
label="{{ 'widgets.chart.border-color' | translate }}" openOnInput colorClearButton> |
||||
|
</tb-color-input> |
||||
|
</section> |
||||
|
</fieldset> |
||||
|
<fieldset class="fields-group fields-group-slider" formGroupName="legend"> |
||||
|
<legend class="group-title" translate>widgets.chart.legend-settings</legend> |
||||
|
<mat-expansion-panel class="tb-settings" [expanded]="doughnutChartWidgetSettingsForm.get('legend.display').value"> |
||||
|
<mat-expansion-panel-header fxLayout="row wrap"> |
||||
|
<mat-panel-title> |
||||
|
<mat-slide-toggle formControlName="display" (click)="$event.stopPropagation()" |
||||
|
fxLayoutAlign="center"> |
||||
|
{{ 'widgets.chart.display-legend' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</mat-panel-title> |
||||
|
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate> |
||||
|
widget-config.advanced-settings |
||||
|
</mat-panel-description> |
||||
|
</mat-expansion-panel-header> |
||||
|
<ng-template matExpansionPanelContent> |
||||
|
<section fxLayout="column"> |
||||
|
<tb-color-input fxFlex |
||||
|
formControlName="labelsFontColor" |
||||
|
icon="format_color_fill" |
||||
|
label="{{ 'widgets.chart.labels-font-color' | translate }}" openOnInput colorClearButton> |
||||
|
</tb-color-input> |
||||
|
</section> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
|
</fieldset> |
||||
|
</section> |
||||
@ -0,0 +1,87 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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 { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; |
||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-doughnut-chart-widget-settings', |
||||
|
templateUrl: './doughnut-chart-widget-settings.component.html', |
||||
|
styleUrls: ['./../widget-settings.scss'] |
||||
|
}) |
||||
|
export class DoughnutChartWidgetSettingsComponent extends WidgetSettingsComponent { |
||||
|
|
||||
|
doughnutChartWidgetSettingsForm: FormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: FormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): FormGroup { |
||||
|
return this.doughnutChartWidgetSettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return { |
||||
|
showTooltip: true, |
||||
|
borderWidth: 5, |
||||
|
borderColor: '#fff', |
||||
|
legend: { |
||||
|
display: true, |
||||
|
labelsFontColor: '#666' |
||||
|
} |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
this.doughnutChartWidgetSettingsForm = this.fb.group({ |
||||
|
|
||||
|
// Common settings
|
||||
|
|
||||
|
showTooltip: [settings.showTooltip, []], |
||||
|
|
||||
|
// Border settings
|
||||
|
|
||||
|
borderWidth: [settings.borderWidth, [Validators.min(0)]], |
||||
|
borderColor: [settings.borderColor, []], |
||||
|
|
||||
|
// Legend settings
|
||||
|
|
||||
|
legend: this.fb.group({ |
||||
|
display: [settings.legend?.display, []], |
||||
|
labelsFontColor: [settings.legend?.labelsFontColor, []] |
||||
|
}) |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
protected validatorTriggers(): string[] { |
||||
|
return ['legend.display']; |
||||
|
} |
||||
|
|
||||
|
protected updateValidators(emitEvent: boolean) { |
||||
|
const displayLegend: boolean = this.doughnutChartWidgetSettingsForm.get('legend.display').value; |
||||
|
if (displayLegend) { |
||||
|
this.doughnutChartWidgetSettingsForm.get('legend.labelsFontColor').enable(); |
||||
|
} else { |
||||
|
this.doughnutChartWidgetSettingsForm.get('legend.labelsFontColor').disable(); |
||||
|
} |
||||
|
this.doughnutChartWidgetSettingsForm.get('legend.labelsFontColor').updateValueAndValidity({emitEvent}); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,24 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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. |
||||
|
|
||||
|
--> |
||||
|
|
||||
|
<section [formGroup]="flotBarKeySettingsForm" fxLayout="column"> |
||||
|
<tb-flot-key-settings formControlName="flotKeySettings" |
||||
|
[aliasController]="aliasController" |
||||
|
[chartType]="'bar'"> |
||||
|
</tb-flot-key-settings> |
||||
|
</section> |
||||
@ -0,0 +1,61 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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 { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; |
||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { flotDataKeyDefaultSettings } from '@home/components/widget/lib/settings/chart/flot-key-settings.component'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-flot-bar-key-settings', |
||||
|
templateUrl: './flot-bar-key-settings.component.html', |
||||
|
styleUrls: [] |
||||
|
}) |
||||
|
export class FlotBarKeySettingsComponent extends WidgetSettingsComponent { |
||||
|
|
||||
|
flotBarKeySettingsForm: FormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: FormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): FormGroup { |
||||
|
return this.flotBarKeySettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return flotDataKeyDefaultSettings('bar'); |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
this.flotBarKeySettingsForm = this.fb.group({ |
||||
|
flotKeySettings: [settings.flotKeySettings, []] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
protected prepareInputSettings(settings: WidgetSettings): WidgetSettings { |
||||
|
return { |
||||
|
flotKeySettings: settings |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
protected prepareOutputSettings(settings: any): WidgetSettings { |
||||
|
return settings.flotKeySettings; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,23 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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. |
||||
|
|
||||
|
--> |
||||
|
|
||||
|
<section [formGroup]="flotBarWidgetSettingsForm" fxLayout="column"> |
||||
|
<tb-flot-widget-settings formControlName="flotSettings" |
||||
|
[chartType]="'bar'"> |
||||
|
</tb-flot-widget-settings> |
||||
|
</section> |
||||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue