Igor Kulikov
2 years ago
28 changed files with 1814 additions and 111 deletions
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,65 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2024 The Thingsboard Authors |
||||
|
* |
||||
|
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
* you may not use this file except in compliance with the License. |
||||
|
* You may obtain a copy of the License at |
||||
|
* |
||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
* |
||||
|
* Unless required by applicable law or agreed to in writing, software |
||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
* See the License for the specific language governing permissions and |
||||
|
* limitations under the License. |
||||
|
*/ |
||||
|
package org.thingsboard.server.service.edge.instructions; |
||||
|
|
||||
|
import lombok.RequiredArgsConstructor; |
||||
|
import lombok.Setter; |
||||
|
import lombok.extern.slf4j.Slf4j; |
||||
|
import org.springframework.beans.factory.annotation.Value; |
||||
|
import org.thingsboard.server.service.install.InstallScripts; |
||||
|
|
||||
|
import java.io.IOException; |
||||
|
import java.nio.file.Files; |
||||
|
import java.nio.file.Path; |
||||
|
import java.nio.file.Paths; |
||||
|
|
||||
|
@Slf4j |
||||
|
@RequiredArgsConstructor |
||||
|
public abstract class BaseEdgeInstallUpgradeInstructionsService { |
||||
|
|
||||
|
private static final String EDGE_DIR = "edge"; |
||||
|
private static final String INSTRUCTIONS_DIR = "instructions"; |
||||
|
|
||||
|
private final InstallScripts installScripts; |
||||
|
|
||||
|
@Value("${app.version:unknown}") |
||||
|
@Setter |
||||
|
protected String appVersion; |
||||
|
|
||||
|
protected String readFile(Path file) { |
||||
|
try { |
||||
|
return Files.readString(file); |
||||
|
} catch (IOException e) { |
||||
|
log.warn("Failed to read file: {}", file, e); |
||||
|
throw new RuntimeException(e); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
protected String getTagVersion(String version) { |
||||
|
return version.endsWith(".0") ? version.substring(0, version.length() - 2) : version; |
||||
|
} |
||||
|
|
||||
|
protected Path resolveFile(String subDir, String... subDirs) { |
||||
|
return getEdgeInstructionsDir().resolve(Paths.get(subDir, subDirs)); |
||||
|
} |
||||
|
|
||||
|
protected Path getEdgeInstructionsDir() { |
||||
|
return Paths.get(installScripts.getDataDir(), InstallScripts.JSON_DIR, EDGE_DIR, INSTRUCTIONS_DIR, getBaseDirName()); |
||||
|
} |
||||
|
|
||||
|
protected abstract String getBaseDirName(); |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,88 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2024 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
you may not use this file except in compliance with the License. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<ng-container [formGroup]="labelCardWidgetConfigForm"> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widget-config.appearance</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="autoScale"> |
||||
|
{{ 'widgets.label-card.auto-scale' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<div class="fixed-title-width" translate>widgets.label-card.label</div> |
||||
|
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
<tb-font-settings formControlName="labelFont" |
||||
|
[previewText]="labelCardWidgetConfigForm.get('label').value"> |
||||
|
</tb-font-settings> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="labelColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon"> |
||||
|
{{ 'widgets.label-card.icon' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic"> |
||||
|
<input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
<tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select> |
||||
|
<tb-material-icon-select asBoxInput |
||||
|
iconClearButton |
||||
|
[color]="labelCardWidgetConfigForm.get('iconColor').value" |
||||
|
formControlName="icon"> |
||||
|
</tb-material-icon-select> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="iconColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widgets.background.background' | translate }}</div> |
||||
|
<tb-background-settings formControlName="background"> |
||||
|
</tb-background-settings> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between column-lt-md"> |
||||
|
<div translate>widget-config.show-card-buttons</div> |
||||
|
<mat-chip-listbox multiple formControlName="cardButtons"> |
||||
|
<mat-chip-option value="fullscreen">{{ 'fullscreen.fullscreen' | translate }}</mat-chip-option> |
||||
|
</mat-chip-listbox> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widget-config.card-border-radius' | translate }}</div> |
||||
|
<mat-form-field appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widget-config.card-padding' | translate }}</div> |
||||
|
<mat-form-field appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
<tb-widget-actions-panel |
||||
|
formControlName="actions"> |
||||
|
</tb-widget-actions-panel> |
||||
|
</ng-container> |
||||
@ -0,0 +1,130 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { Component } from '@angular/core'; |
||||
|
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models'; |
||||
|
import { WidgetConfigComponentData } from '@home/models/widget-component.models'; |
||||
|
import { WidgetConfig, } from '@shared/models/widget.models'; |
||||
|
import { WidgetConfigComponent } from '@home/components/widget/widget-config.component'; |
||||
|
import { isUndefined } from '@core/utils'; |
||||
|
import { |
||||
|
labelCardWidgetDefaultSettings, |
||||
|
LabelCardWidgetSettings |
||||
|
} from '@home/components/widget/lib/cards/label-card-widget.models'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-label-card-basic-config', |
||||
|
templateUrl: './label-card-basic-config.component.html', |
||||
|
styleUrls: ['../basic-config.scss'] |
||||
|
}) |
||||
|
export class LabelCardBasicConfigComponent extends BasicWidgetConfigComponent { |
||||
|
|
||||
|
labelCardWidgetConfigForm: UntypedFormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
protected widgetConfigComponent: WidgetConfigComponent, |
||||
|
private fb: UntypedFormBuilder) { |
||||
|
super(store, widgetConfigComponent); |
||||
|
} |
||||
|
|
||||
|
protected configForm(): UntypedFormGroup { |
||||
|
return this.labelCardWidgetConfigForm; |
||||
|
} |
||||
|
|
||||
|
protected onConfigSet(configData: WidgetConfigComponentData) { |
||||
|
const settings: LabelCardWidgetSettings = {...labelCardWidgetDefaultSettings, ...(configData.config.settings || {})}; |
||||
|
this.labelCardWidgetConfigForm = this.fb.group({ |
||||
|
autoScale: [settings.autoScale, []], |
||||
|
|
||||
|
label: [settings.label, []], |
||||
|
labelFont: [settings.labelFont, []], |
||||
|
labelColor: [settings.labelColor, []], |
||||
|
|
||||
|
showIcon: [settings.showIcon, []], |
||||
|
iconSize: [settings.iconSize, [Validators.min(0)]], |
||||
|
iconSizeUnit: [settings.iconSizeUnit, []], |
||||
|
icon: [settings.icon, []], |
||||
|
iconColor: [settings.iconColor, []], |
||||
|
|
||||
|
background: [settings.background, []], |
||||
|
|
||||
|
cardButtons: [this.getCardButtons(configData.config), []], |
||||
|
borderRadius: [configData.config.borderRadius, []], |
||||
|
padding: [settings.padding, []], |
||||
|
|
||||
|
actions: [configData.config.actions || {}, []] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
protected prepareOutputConfig(config: any): WidgetConfigComponentData { |
||||
|
this.widgetConfig.config.settings = this.widgetConfig.config.settings || {}; |
||||
|
|
||||
|
this.widgetConfig.config.settings.autoScale = config.autoScale; |
||||
|
|
||||
|
this.widgetConfig.config.settings.label = config.label; |
||||
|
this.widgetConfig.config.settings.labelFont = config.labelFont; |
||||
|
this.widgetConfig.config.settings.labelColor = config.labelColor; |
||||
|
|
||||
|
this.widgetConfig.config.settings.showIcon = config.showIcon; |
||||
|
this.widgetConfig.config.settings.iconSize = config.iconSize; |
||||
|
this.widgetConfig.config.settings.iconSizeUnit = config.iconSizeUnit; |
||||
|
this.widgetConfig.config.settings.icon = config.icon; |
||||
|
this.widgetConfig.config.settings.iconColor = config.iconColor; |
||||
|
|
||||
|
this.widgetConfig.config.settings.background = config.background; |
||||
|
|
||||
|
this.setCardButtons(config.cardButtons, this.widgetConfig.config); |
||||
|
this.widgetConfig.config.borderRadius = config.borderRadius; |
||||
|
this.widgetConfig.config.settings.padding = config.padding; |
||||
|
|
||||
|
this.widgetConfig.config.actions = config.actions; |
||||
|
return this.widgetConfig; |
||||
|
} |
||||
|
|
||||
|
protected validatorTriggers(): string[] { |
||||
|
return ['showIcon']; |
||||
|
} |
||||
|
|
||||
|
protected updateValidators(emitEvent: boolean, trigger?: string) { |
||||
|
const showIcon: boolean = this.labelCardWidgetConfigForm.get('showIcon').value; |
||||
|
if (showIcon) { |
||||
|
this.labelCardWidgetConfigForm.get('iconSize').enable(); |
||||
|
this.labelCardWidgetConfigForm.get('iconSizeUnit').enable(); |
||||
|
this.labelCardWidgetConfigForm.get('icon').enable(); |
||||
|
this.labelCardWidgetConfigForm.get('iconColor').enable(); |
||||
|
} else { |
||||
|
this.labelCardWidgetConfigForm.get('iconSize').disable(); |
||||
|
this.labelCardWidgetConfigForm.get('iconSizeUnit').disable(); |
||||
|
this.labelCardWidgetConfigForm.get('icon').disable(); |
||||
|
this.labelCardWidgetConfigForm.get('iconColor').disable(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private getCardButtons(config: WidgetConfig): string[] { |
||||
|
const buttons: string[] = []; |
||||
|
if (isUndefined(config.enableFullscreen) || config.enableFullscreen) { |
||||
|
buttons.push('fullscreen'); |
||||
|
} |
||||
|
return buttons; |
||||
|
} |
||||
|
|
||||
|
private setCardButtons(buttons: string[], config: WidgetConfig) { |
||||
|
config.enableFullscreen = buttons.includes('fullscreen'); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,114 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2024 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
you may not use this file except in compliance with the License. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<ng-container [formGroup]="labelValueCardWidgetConfigForm"> |
||||
|
<tb-timewindow-config-panel *ngIf="displayTimewindowConfig" |
||||
|
[onlyHistoryTimewindow]="onlyHistoryTimewindow()" |
||||
|
formControlName="timewindowConfig"> |
||||
|
</tb-timewindow-config-panel> |
||||
|
<tb-datasources |
||||
|
[configMode]="basicMode" |
||||
|
hideDatasourceLabel |
||||
|
hideDataKeyLabel |
||||
|
hideDataKeyColor |
||||
|
hideDataKeyUnits |
||||
|
hideDataKeyDecimals |
||||
|
formControlName="datasources"> |
||||
|
</tb-datasources> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widget-config.appearance</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="autoScale"> |
||||
|
{{ 'widgets.label-card.auto-scale' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel"> |
||||
|
{{ 'widgets.label-card.label' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
<tb-font-settings formControlName="labelFont" |
||||
|
[previewText]="labelValueCardWidgetConfigForm.get('label').value"> |
||||
|
</tb-font-settings> |
||||
|
<tb-color-settings formControlName="labelColor" settingsKey="{{'widgets.label-card.label' | translate }}"> |
||||
|
</tb-color-settings> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon"> |
||||
|
{{ 'widgets.label-card.icon' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic"> |
||||
|
<input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
<tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select> |
||||
|
<tb-material-icon-select asBoxInput |
||||
|
iconClearButton |
||||
|
[color]="labelValueCardWidgetConfigForm.get('iconColor').value?.color" |
||||
|
formControlName="icon"> |
||||
|
</tb-material-icon-select> |
||||
|
<tb-color-settings formControlName="iconColor" settingsKey="{{'widgets.label-card.icon' | translate }}"> |
||||
|
</tb-color-settings> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<div class="fixed-title-width" translate>widgets.label-value-card.value</div> |
||||
|
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<tb-unit-input class="flex" formControlName="units"></tb-unit-input> |
||||
|
<mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
<div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div> |
||||
|
</mat-form-field> |
||||
|
<tb-font-settings formControlName="valueFont" |
||||
|
[previewText]="valuePreviewFn"> |
||||
|
</tb-font-settings> |
||||
|
<tb-color-settings formControlName="valueColor" settingsKey="{{'widgets.label-value-card.value' | translate }}"> |
||||
|
</tb-color-settings> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widgets.background.background' | translate }}</div> |
||||
|
<tb-background-settings formControlName="background"> |
||||
|
</tb-background-settings> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between column-lt-md"> |
||||
|
<div translate>widget-config.show-card-buttons</div> |
||||
|
<mat-chip-listbox multiple formControlName="cardButtons"> |
||||
|
<mat-chip-option value="fullscreen">{{ 'fullscreen.fullscreen' | translate }}</mat-chip-option> |
||||
|
</mat-chip-listbox> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widget-config.card-border-radius' | translate }}</div> |
||||
|
<mat-form-field appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widget-config.card-padding' | translate }}</div> |
||||
|
<mat-form-field appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
<tb-widget-actions-panel |
||||
|
formControlName="actions"> |
||||
|
</tb-widget-actions-panel> |
||||
|
</ng-container> |
||||
@ -0,0 +1,191 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { Component } from '@angular/core'; |
||||
|
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models'; |
||||
|
import { WidgetConfigComponentData } from '@home/models/widget-component.models'; |
||||
|
import { |
||||
|
DataKey, |
||||
|
datasourcesHasAggregation, |
||||
|
datasourcesHasOnlyComparisonAggregation, |
||||
|
WidgetConfig, |
||||
|
} from '@shared/models/widget.models'; |
||||
|
import { WidgetConfigComponent } from '@home/components/widget/widget-config.component'; |
||||
|
import { formatValue, isUndefined } from '@core/utils'; |
||||
|
import { |
||||
|
labelValueCardWidgetDefaultSettings, |
||||
|
LabelValueCardWidgetSettings |
||||
|
} from '@home/components/widget/lib/cards/label-value-card-widget.models'; |
||||
|
import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; |
||||
|
import { |
||||
|
getTimewindowConfig, |
||||
|
setTimewindowConfig |
||||
|
} from '@home/components/widget/config/timewindow-config-panel.component'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-label-value-card-basic-config', |
||||
|
templateUrl: './label-value-card-basic-config.component.html', |
||||
|
styleUrls: ['../basic-config.scss'] |
||||
|
}) |
||||
|
export class LabelValueCardBasicConfigComponent extends BasicWidgetConfigComponent { |
||||
|
|
||||
|
public get displayTimewindowConfig(): boolean { |
||||
|
const datasources = this.labelValueCardWidgetConfigForm.get('datasources').value; |
||||
|
return datasourcesHasAggregation(datasources); |
||||
|
} |
||||
|
|
||||
|
public onlyHistoryTimewindow(): boolean { |
||||
|
const datasources = this.labelValueCardWidgetConfigForm.get('datasources').value; |
||||
|
return datasourcesHasOnlyComparisonAggregation(datasources); |
||||
|
} |
||||
|
|
||||
|
labelValueCardWidgetConfigForm: UntypedFormGroup; |
||||
|
|
||||
|
valuePreviewFn = this._valuePreviewFn.bind(this); |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
protected widgetConfigComponent: WidgetConfigComponent, |
||||
|
private fb: UntypedFormBuilder) { |
||||
|
super(store, widgetConfigComponent); |
||||
|
} |
||||
|
|
||||
|
protected configForm(): UntypedFormGroup { |
||||
|
return this.labelValueCardWidgetConfigForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultDataKeys(configData: WidgetConfigComponentData): DataKey[] { |
||||
|
return [{ name: 'temperature', label: 'Temperature', type: DataKeyType.timeseries }]; |
||||
|
} |
||||
|
|
||||
|
protected onConfigSet(configData: WidgetConfigComponentData) { |
||||
|
const settings: LabelValueCardWidgetSettings = {...labelValueCardWidgetDefaultSettings, ...(configData.config.settings || {})}; |
||||
|
this.labelValueCardWidgetConfigForm = this.fb.group({ |
||||
|
timewindowConfig: [getTimewindowConfig(configData.config), []], |
||||
|
datasources: [configData.config.datasources, []], |
||||
|
autoScale: [settings.autoScale, []], |
||||
|
|
||||
|
showLabel: [settings.showLabel, []], |
||||
|
label: [settings.label, []], |
||||
|
labelFont: [settings.labelFont, []], |
||||
|
labelColor: [settings.labelColor, []], |
||||
|
|
||||
|
showIcon: [settings.showIcon, []], |
||||
|
iconSize: [settings.iconSize, [Validators.min(0)]], |
||||
|
iconSizeUnit: [settings.iconSizeUnit, []], |
||||
|
icon: [settings.icon, []], |
||||
|
iconColor: [settings.iconColor, []], |
||||
|
|
||||
|
units: [configData.config.units, []], |
||||
|
decimals: [configData.config.decimals, []], |
||||
|
valueFont: [settings.valueFont, []], |
||||
|
valueColor: [settings.valueColor, []], |
||||
|
|
||||
|
background: [settings.background, []], |
||||
|
|
||||
|
cardButtons: [this.getCardButtons(configData.config), []], |
||||
|
borderRadius: [configData.config.borderRadius, []], |
||||
|
padding: [settings.padding, []], |
||||
|
|
||||
|
actions: [configData.config.actions || {}, []] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
protected prepareOutputConfig(config: any): WidgetConfigComponentData { |
||||
|
setTimewindowConfig(this.widgetConfig.config, config.timewindowConfig); |
||||
|
this.widgetConfig.config.datasources = config.datasources; |
||||
|
|
||||
|
this.widgetConfig.config.settings = this.widgetConfig.config.settings || {}; |
||||
|
|
||||
|
this.widgetConfig.config.settings.autoScale = config.autoScale; |
||||
|
|
||||
|
this.widgetConfig.config.settings.showLabel = config.showLabel; |
||||
|
this.widgetConfig.config.settings.label = config.label; |
||||
|
this.widgetConfig.config.settings.labelFont = config.labelFont; |
||||
|
this.widgetConfig.config.settings.labelColor = config.labelColor; |
||||
|
|
||||
|
this.widgetConfig.config.settings.showIcon = config.showIcon; |
||||
|
this.widgetConfig.config.settings.iconSize = config.iconSize; |
||||
|
this.widgetConfig.config.settings.iconSizeUnit = config.iconSizeUnit; |
||||
|
this.widgetConfig.config.settings.icon = config.icon; |
||||
|
this.widgetConfig.config.settings.iconColor = config.iconColor; |
||||
|
|
||||
|
this.widgetConfig.config.units = config.units; |
||||
|
this.widgetConfig.config.decimals = config.decimals; |
||||
|
this.widgetConfig.config.settings.valueFont = config.valueFont; |
||||
|
this.widgetConfig.config.settings.valueColor = config.valueColor; |
||||
|
|
||||
|
this.widgetConfig.config.settings.background = config.background; |
||||
|
|
||||
|
this.setCardButtons(config.cardButtons, this.widgetConfig.config); |
||||
|
this.widgetConfig.config.borderRadius = config.borderRadius; |
||||
|
this.widgetConfig.config.settings.padding = config.padding; |
||||
|
|
||||
|
this.widgetConfig.config.actions = config.actions; |
||||
|
return this.widgetConfig; |
||||
|
} |
||||
|
|
||||
|
protected validatorTriggers(): string[] { |
||||
|
return ['showLabel', 'showIcon']; |
||||
|
} |
||||
|
|
||||
|
protected updateValidators(emitEvent: boolean, trigger?: string) { |
||||
|
const showLabel: boolean = this.labelValueCardWidgetConfigForm.get('showLabel').value; |
||||
|
const showIcon: boolean = this.labelValueCardWidgetConfigForm.get('showIcon').value; |
||||
|
|
||||
|
if (showLabel) { |
||||
|
this.labelValueCardWidgetConfigForm.get('label').enable(); |
||||
|
this.labelValueCardWidgetConfigForm.get('labelFont').enable(); |
||||
|
this.labelValueCardWidgetConfigForm.get('labelColor').enable(); |
||||
|
} else { |
||||
|
this.labelValueCardWidgetConfigForm.get('label').disable(); |
||||
|
this.labelValueCardWidgetConfigForm.get('labelFont').disable(); |
||||
|
this.labelValueCardWidgetConfigForm.get('labelColor').disable(); |
||||
|
} |
||||
|
|
||||
|
if (showIcon) { |
||||
|
this.labelValueCardWidgetConfigForm.get('iconSize').enable(); |
||||
|
this.labelValueCardWidgetConfigForm.get('iconSizeUnit').enable(); |
||||
|
this.labelValueCardWidgetConfigForm.get('icon').enable(); |
||||
|
this.labelValueCardWidgetConfigForm.get('iconColor').enable(); |
||||
|
} else { |
||||
|
this.labelValueCardWidgetConfigForm.get('iconSize').disable(); |
||||
|
this.labelValueCardWidgetConfigForm.get('iconSizeUnit').disable(); |
||||
|
this.labelValueCardWidgetConfigForm.get('icon').disable(); |
||||
|
this.labelValueCardWidgetConfigForm.get('iconColor').disable(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private getCardButtons(config: WidgetConfig): string[] { |
||||
|
const buttons: string[] = []; |
||||
|
if (isUndefined(config.enableFullscreen) || config.enableFullscreen) { |
||||
|
buttons.push('fullscreen'); |
||||
|
} |
||||
|
return buttons; |
||||
|
} |
||||
|
|
||||
|
private setCardButtons(buttons: string[], config: WidgetConfig) { |
||||
|
config.enableFullscreen = buttons.includes('fullscreen'); |
||||
|
} |
||||
|
|
||||
|
private _valuePreviewFn(): string { |
||||
|
const units: string = this.labelValueCardWidgetConfigForm.get('units').value; |
||||
|
const decimals: number = this.labelValueCardWidgetConfigForm.get('decimals').value; |
||||
|
return formatValue(22, decimals, units, true); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,30 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2024 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
you may not use this file except in compliance with the License. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<div #labelCardPanel class="tb-label-card-panel" [style.padding]="padding" [style]="backgroundStyle$ | async" |
||||
|
[class.tb-label-card-pointer]="hasCardClickAction" (click)="cardClick($event)"> |
||||
|
<div class="tb-label-card-overlay" [style]="overlayStyle"></div> |
||||
|
<div class="tb-label-card-title-panel"> |
||||
|
<ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container> |
||||
|
</div> |
||||
|
<div #labelCardContent class="tb-label-card-content"> |
||||
|
<div #labelCardRow class="tb-label-card-row"> |
||||
|
<tb-icon *ngIf="showIcon" [style]="iconStyle">{{ icon }}</tb-icon> |
||||
|
<div [class.tb-label-card-label]="!settings.autoScale" [style]="labelStyle" [innerHTML]="label | safe:'html'"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,70 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2024 The Thingsboard Authors |
||||
|
* |
||||
|
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
* you may not use this file except in compliance with the License. |
||||
|
* You may obtain a copy of the License at |
||||
|
* |
||||
|
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
* |
||||
|
* Unless required by applicable law or agreed to in writing, software |
||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
* See the License for the specific language governing permissions and |
||||
|
* limitations under the License. |
||||
|
*/ |
||||
|
|
||||
|
.tb-label-card-panel { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 20px 24px; |
||||
|
&.tb-label-card-pointer { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
> div:not(.tb-label-card-overlay), > tb-icon { |
||||
|
z-index: 1; |
||||
|
} |
||||
|
.tb-label-card-overlay { |
||||
|
position: absolute; |
||||
|
top: 12px; |
||||
|
left: 12px; |
||||
|
bottom: 12px; |
||||
|
right: 12px; |
||||
|
} |
||||
|
> div.tb-label-card-title-panel { |
||||
|
position: absolute; |
||||
|
top: 12px; |
||||
|
left: 12px; |
||||
|
right: 12px; |
||||
|
z-index: 2; |
||||
|
} |
||||
|
div.tb-widget-title { |
||||
|
padding: 0; |
||||
|
} |
||||
|
.tb-label-card-content { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
.tb-label-card-row { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
gap: 8px; |
||||
|
} |
||||
|
.tb-label-card-label { |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
-webkit-line-clamp: 2; |
||||
|
display: -webkit-box; |
||||
|
-webkit-box-orient: vertical; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,170 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { |
||||
|
AfterViewInit, |
||||
|
ChangeDetectorRef, |
||||
|
Component, |
||||
|
ElementRef, |
||||
|
Input, |
||||
|
OnDestroy, |
||||
|
OnInit, |
||||
|
Renderer2, |
||||
|
TemplateRef, |
||||
|
ViewChild, |
||||
|
ViewEncapsulation |
||||
|
} from '@angular/core'; |
||||
|
import { |
||||
|
labelCardWidgetDefaultSettings, |
||||
|
LabelCardWidgetSettings |
||||
|
} from '@home/components/widget/lib/cards/label-card-widget.models'; |
||||
|
import { WidgetContext } from '@home/models/widget-component.models'; |
||||
|
import { Observable } from 'rxjs'; |
||||
|
import { |
||||
|
backgroundStyle, |
||||
|
ComponentStyle, |
||||
|
iconStyle, |
||||
|
overlayStyle, |
||||
|
resolveCssSize, |
||||
|
textStyle |
||||
|
} from '@shared/models/widget-settings.models'; |
||||
|
import { ResizeObserver } from '@juggle/resize-observer'; |
||||
|
import { ImagePipe } from '@shared/pipe/image.pipe'; |
||||
|
import { DomSanitizer } from '@angular/platform-browser'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-label-card-widget', |
||||
|
templateUrl: './label-card-widget.component.html', |
||||
|
styleUrls: ['./label-card-widget.component.scss'], |
||||
|
encapsulation: ViewEncapsulation.None |
||||
|
}) |
||||
|
export class LabelCardWidgetComponent implements OnInit, AfterViewInit, OnDestroy { |
||||
|
|
||||
|
@ViewChild('labelCardPanel', {static: false}) |
||||
|
labelCardPanel: ElementRef<HTMLElement>; |
||||
|
|
||||
|
@ViewChild('labelCardContent', {static: false}) |
||||
|
labelCardContent: ElementRef<HTMLElement>; |
||||
|
|
||||
|
@ViewChild('labelCardRow', {static: false}) |
||||
|
labelCardRow: ElementRef<HTMLElement>; |
||||
|
|
||||
|
settings: LabelCardWidgetSettings; |
||||
|
|
||||
|
@Input() |
||||
|
ctx: WidgetContext; |
||||
|
|
||||
|
@Input() |
||||
|
widgetTitlePanel: TemplateRef<any>; |
||||
|
|
||||
|
backgroundStyle$: Observable<ComponentStyle>; |
||||
|
overlayStyle: ComponentStyle = {}; |
||||
|
padding: string; |
||||
|
|
||||
|
label: string; |
||||
|
labelStyle: ComponentStyle = {}; |
||||
|
|
||||
|
showIcon = true; |
||||
|
icon = ''; |
||||
|
iconStyle: ComponentStyle = {}; |
||||
|
|
||||
|
hasCardClickAction = false; |
||||
|
|
||||
|
private panelResize$: ResizeObserver; |
||||
|
|
||||
|
constructor(private imagePipe: ImagePipe, |
||||
|
private sanitizer: DomSanitizer, |
||||
|
private renderer: Renderer2, |
||||
|
private cd: ChangeDetectorRef) { |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.ctx.$scope.labelCardWidget = this; |
||||
|
this.settings = {...labelCardWidgetDefaultSettings, ...this.ctx.settings}; |
||||
|
|
||||
|
this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer); |
||||
|
this.overlayStyle = overlayStyle(this.settings.background.overlay); |
||||
|
this.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding; |
||||
|
|
||||
|
this.showIcon = this.settings.showIcon; |
||||
|
this.icon = this.settings.icon; |
||||
|
this.iconStyle = iconStyle(this.settings.iconSize, this.settings.iconSizeUnit); |
||||
|
this.iconStyle.color = this.settings.iconColor; |
||||
|
|
||||
|
this.label = this.settings.label; |
||||
|
this.labelStyle = textStyle(this.settings.labelFont); |
||||
|
this.labelStyle.color = this.settings.labelColor; |
||||
|
|
||||
|
this.hasCardClickAction = this.ctx.actionsApi.getActionDescriptors('cardClick').length > 0; |
||||
|
} |
||||
|
|
||||
|
public ngAfterViewInit() { |
||||
|
if (this.settings.autoScale) { |
||||
|
this.renderer.setStyle(this.labelCardContent.nativeElement, 'overflow', 'visible'); |
||||
|
this.renderer.setStyle(this.labelCardContent.nativeElement, 'position', 'absolute'); |
||||
|
this.panelResize$ = new ResizeObserver(() => { |
||||
|
this.onResize(); |
||||
|
}); |
||||
|
this.panelResize$.observe(this.labelCardPanel.nativeElement); |
||||
|
this.onResize(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
ngOnDestroy() { |
||||
|
if (this.panelResize$) { |
||||
|
this.panelResize$.disconnect(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public onInit() { |
||||
|
const borderRadius = this.ctx.$widgetElement.css('borderRadius'); |
||||
|
this.overlayStyle = {...this.overlayStyle, ...{borderRadius}}; |
||||
|
this.cd.detectChanges(); |
||||
|
} |
||||
|
|
||||
|
public cardClick($event: Event) { |
||||
|
this.ctx.actionsApi.cardClick($event); |
||||
|
} |
||||
|
|
||||
|
private onResize() { |
||||
|
const paddingLeft = getComputedStyle(this.labelCardPanel.nativeElement).paddingLeft; |
||||
|
const paddingRight = getComputedStyle(this.labelCardPanel.nativeElement).paddingRight; |
||||
|
const paddingTop = getComputedStyle(this.labelCardPanel.nativeElement).paddingTop; |
||||
|
const paddingBottom = getComputedStyle(this.labelCardPanel.nativeElement).paddingBottom; |
||||
|
const pLeft = resolveCssSize(paddingLeft)[0]; |
||||
|
const pRight = resolveCssSize(paddingRight)[0]; |
||||
|
const pTop = resolveCssSize(paddingTop)[0]; |
||||
|
const pBottom = resolveCssSize(paddingBottom)[0]; |
||||
|
const panelWidth = this.labelCardPanel.nativeElement.getBoundingClientRect().width - (pLeft + pRight); |
||||
|
const panelHeight = this.labelCardPanel.nativeElement.getBoundingClientRect().height - (pTop + pBottom); |
||||
|
this.renderer.setStyle(this.labelCardContent.nativeElement, 'width', 'auto'); |
||||
|
this.renderer.setStyle(this.labelCardContent.nativeElement, 'transform', `none`); |
||||
|
const contentWidth = this.labelCardRow.nativeElement.getBoundingClientRect().width; |
||||
|
const contentHeight = this.labelCardRow.nativeElement.getBoundingClientRect().height; |
||||
|
const panelAspect = panelWidth / panelHeight; |
||||
|
const contentAspect = contentWidth / contentHeight; |
||||
|
let scale: number; |
||||
|
if (contentAspect > panelAspect) { |
||||
|
scale = panelWidth / contentWidth; |
||||
|
} else { |
||||
|
scale = panelHeight / contentHeight; |
||||
|
} |
||||
|
const width = panelWidth / scale; |
||||
|
this.renderer.setStyle(this.labelCardContent.nativeElement, 'width', width + 'px'); |
||||
|
this.renderer.setStyle(this.labelCardContent.nativeElement, 'transform', `scale(${scale})`); |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,60 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { BackgroundSettings, BackgroundType, cssUnit, Font } from '@shared/models/widget-settings.models'; |
||||
|
|
||||
|
export interface LabelCardWidgetSettings { |
||||
|
autoScale: boolean; |
||||
|
label: string; |
||||
|
labelFont: Font; |
||||
|
labelColor: string; |
||||
|
showIcon: boolean; |
||||
|
icon: string; |
||||
|
iconSize: number; |
||||
|
iconSizeUnit: cssUnit; |
||||
|
iconColor: string; |
||||
|
background: BackgroundSettings; |
||||
|
padding: string; |
||||
|
} |
||||
|
|
||||
|
export const labelCardWidgetDefaultSettings: LabelCardWidgetSettings = { |
||||
|
autoScale: true, |
||||
|
label: 'Thermostat', |
||||
|
labelFont: { |
||||
|
family: 'Roboto', |
||||
|
size: 20, |
||||
|
sizeUnit: 'px', |
||||
|
style: 'normal', |
||||
|
weight: '400', |
||||
|
lineHeight: '24px' |
||||
|
}, |
||||
|
labelColor: 'rgba(0, 0, 0, 0.87)', |
||||
|
showIcon: true, |
||||
|
icon: 'thermostat', |
||||
|
iconSize: 24, |
||||
|
iconSizeUnit: 'px', |
||||
|
iconColor: '#5469FF', |
||||
|
background: { |
||||
|
type: BackgroundType.color, |
||||
|
color: '#fff', |
||||
|
overlay: { |
||||
|
enabled: false, |
||||
|
color: 'rgba(255,255,255,0.72)', |
||||
|
blur: 3 |
||||
|
} |
||||
|
}, |
||||
|
padding: '12px' |
||||
|
}; |
||||
@ -0,0 +1,34 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2024 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
you may not use this file except in compliance with the License. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<div #labelCardPanel class="tb-label-value-card-panel" [style.padding]="padding" [style]="backgroundStyle$ | async" |
||||
|
[class.tb-label-value-card-pointer]="hasCardClickAction" (click)="cardClick($event)"> |
||||
|
<div class="tb-label-value-card-overlay" [style]="overlayStyle"></div> |
||||
|
<div class="tb-label-value-card-title-panel"> |
||||
|
<ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container> |
||||
|
</div> |
||||
|
<div #labelCardContent class="tb-label-value-card-content"> |
||||
|
<div #labelCardRow class="tb-label-value-card-row"> |
||||
|
<div *ngIf="showIcon || showLabel" class="tb-label-value-card-icon-label"> |
||||
|
<tb-icon *ngIf="showIcon" [style]="iconStyle" [style.color]="iconColor.color">{{ icon }}</tb-icon> |
||||
|
<div *ngIf="showLabel" [class.tb-label-value-card-label]="!settings.autoScale" [style]="labelStyle" [style.color]="labelColor.color" |
||||
|
[innerHTML]="label$ | async | safe:'html'"></div> |
||||
|
</div> |
||||
|
<div class="tb-label-value-card-value" [style]="valueStyle" [style.color]="valueColor.color">{{ valueText }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,80 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2024 The Thingsboard Authors |
||||
|
* |
||||
|
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
* you may not use this file except in compliance with the License. |
||||
|
* You may obtain a copy of the License at |
||||
|
* |
||||
|
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
* |
||||
|
* Unless required by applicable law or agreed to in writing, software |
||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
* See the License for the specific language governing permissions and |
||||
|
* limitations under the License. |
||||
|
*/ |
||||
|
|
||||
|
.tb-label-value-card-panel { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 20px 24px; |
||||
|
&.tb-label-value-card-pointer { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
> div:not(.tb-label-value-card-overlay), > tb-icon { |
||||
|
z-index: 1; |
||||
|
} |
||||
|
.tb-label-value-card-overlay { |
||||
|
position: absolute; |
||||
|
top: 12px; |
||||
|
left: 12px; |
||||
|
bottom: 12px; |
||||
|
right: 12px; |
||||
|
} |
||||
|
> div.tb-label-value-card-title-panel { |
||||
|
position: absolute; |
||||
|
top: 12px; |
||||
|
left: 12px; |
||||
|
right: 12px; |
||||
|
z-index: 2; |
||||
|
} |
||||
|
div.tb-widget-title { |
||||
|
padding: 0; |
||||
|
} |
||||
|
.tb-label-value-card-content { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
.tb-label-value-card-row { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
gap: 16px; |
||||
|
} |
||||
|
.tb-label-value-card-icon-label { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
gap: 8px; |
||||
|
} |
||||
|
.tb-label-value-card-label { |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
-webkit-line-clamp: 2; |
||||
|
display: -webkit-box; |
||||
|
-webkit-box-orient: vertical; |
||||
|
} |
||||
|
.tb-label-value-card-value { |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,218 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { |
||||
|
AfterViewInit, |
||||
|
ChangeDetectorRef, |
||||
|
Component, |
||||
|
ElementRef, |
||||
|
Input, |
||||
|
OnDestroy, |
||||
|
OnInit, |
||||
|
Renderer2, |
||||
|
TemplateRef, |
||||
|
ViewChild, |
||||
|
ViewEncapsulation |
||||
|
} from '@angular/core'; |
||||
|
import { WidgetContext } from '@home/models/widget-component.models'; |
||||
|
import { Observable } from 'rxjs'; |
||||
|
import { |
||||
|
backgroundStyle, |
||||
|
ColorProcessor, |
||||
|
ComponentStyle, |
||||
|
getDataKey, |
||||
|
getSingleTsValue, |
||||
|
iconStyle, |
||||
|
overlayStyle, |
||||
|
resolveCssSize, |
||||
|
textStyle |
||||
|
} from '@shared/models/widget-settings.models'; |
||||
|
import { ResizeObserver } from '@juggle/resize-observer'; |
||||
|
import { ImagePipe } from '@shared/pipe/image.pipe'; |
||||
|
import { DomSanitizer } from '@angular/platform-browser'; |
||||
|
import { |
||||
|
labelValueCardWidgetDefaultSettings, |
||||
|
LabelValueCardWidgetSettings |
||||
|
} from '@home/components/widget/lib/cards/label-value-card-widget.models'; |
||||
|
import { formatValue, isDefinedAndNotNull } from '@core/utils'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-label-value-card-widget', |
||||
|
templateUrl: './label-value-card-widget.component.html', |
||||
|
styleUrls: ['./label-value-card-widget.component.scss'], |
||||
|
encapsulation: ViewEncapsulation.None |
||||
|
}) |
||||
|
export class LabelValueCardWidgetComponent implements OnInit, AfterViewInit, OnDestroy { |
||||
|
|
||||
|
@ViewChild('labelCardPanel', {static: false}) |
||||
|
labelCardPanel: ElementRef<HTMLElement>; |
||||
|
|
||||
|
@ViewChild('labelCardContent', {static: false}) |
||||
|
labelCardContent: ElementRef<HTMLElement>; |
||||
|
|
||||
|
@ViewChild('labelCardRow', {static: false}) |
||||
|
labelCardRow: ElementRef<HTMLElement>; |
||||
|
|
||||
|
settings: LabelValueCardWidgetSettings; |
||||
|
|
||||
|
@Input() |
||||
|
ctx: WidgetContext; |
||||
|
|
||||
|
@Input() |
||||
|
widgetTitlePanel: TemplateRef<any>; |
||||
|
|
||||
|
backgroundStyle$: Observable<ComponentStyle>; |
||||
|
overlayStyle: ComponentStyle = {}; |
||||
|
padding: string; |
||||
|
|
||||
|
showLabel = true; |
||||
|
label$: Observable<string>; |
||||
|
labelStyle: ComponentStyle = {}; |
||||
|
labelColor: ColorProcessor; |
||||
|
|
||||
|
valueText = 'N/A'; |
||||
|
valueStyle: ComponentStyle = {}; |
||||
|
valueColor: ColorProcessor; |
||||
|
|
||||
|
showIcon = true; |
||||
|
icon = ''; |
||||
|
iconStyle: ComponentStyle = {}; |
||||
|
iconColor: ColorProcessor; |
||||
|
|
||||
|
hasCardClickAction = false; |
||||
|
|
||||
|
private panelResize$: ResizeObserver; |
||||
|
|
||||
|
private decimals = 0; |
||||
|
private units = ''; |
||||
|
|
||||
|
constructor(private imagePipe: ImagePipe, |
||||
|
private sanitizer: DomSanitizer, |
||||
|
private renderer: Renderer2, |
||||
|
private cd: ChangeDetectorRef) { |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.ctx.$scope.labelValueCardWidget = this; |
||||
|
this.settings = {...labelValueCardWidgetDefaultSettings, ...this.ctx.settings}; |
||||
|
|
||||
|
this.decimals = this.ctx.decimals; |
||||
|
this.units = this.ctx.units; |
||||
|
const dataKey = getDataKey(this.ctx.datasources); |
||||
|
if (isDefinedAndNotNull(dataKey?.decimals)) { |
||||
|
this.decimals = dataKey.decimals; |
||||
|
} |
||||
|
if (dataKey?.units) { |
||||
|
this.units = dataKey.units; |
||||
|
} |
||||
|
|
||||
|
this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer); |
||||
|
this.overlayStyle = overlayStyle(this.settings.background.overlay); |
||||
|
this.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding; |
||||
|
|
||||
|
this.showIcon = this.settings.showIcon; |
||||
|
this.icon = this.settings.icon; |
||||
|
this.iconStyle = iconStyle(this.settings.iconSize, this.settings.iconSizeUnit); |
||||
|
this.iconColor = ColorProcessor.fromSettings(this.settings.iconColor); |
||||
|
|
||||
|
this.showLabel = this.settings.showLabel; |
||||
|
const label = this.settings.label; |
||||
|
this.label$ = this.ctx.registerLabelPattern(label, this.label$); |
||||
|
this.labelStyle = textStyle(this.settings.labelFont); |
||||
|
this.labelColor = ColorProcessor.fromSettings(this.settings.labelColor); |
||||
|
this.valueStyle = textStyle(this.settings.valueFont); |
||||
|
this.valueColor = ColorProcessor.fromSettings(this.settings.valueColor); |
||||
|
|
||||
|
this.hasCardClickAction = this.ctx.actionsApi.getActionDescriptors('cardClick').length > 0; |
||||
|
} |
||||
|
|
||||
|
public ngAfterViewInit() { |
||||
|
if (this.settings.autoScale) { |
||||
|
this.renderer.setStyle(this.labelCardContent.nativeElement, 'overflow', 'visible'); |
||||
|
this.renderer.setStyle(this.labelCardContent.nativeElement, 'position', 'absolute'); |
||||
|
this.panelResize$ = new ResizeObserver(() => { |
||||
|
this.onResize(); |
||||
|
}); |
||||
|
this.panelResize$.observe(this.labelCardPanel.nativeElement); |
||||
|
this.onResize(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
ngOnDestroy() { |
||||
|
if (this.panelResize$) { |
||||
|
this.panelResize$.disconnect(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public onInit() { |
||||
|
const borderRadius = this.ctx.$widgetElement.css('borderRadius'); |
||||
|
this.overlayStyle = {...this.overlayStyle, ...{borderRadius}}; |
||||
|
this.cd.detectChanges(); |
||||
|
} |
||||
|
|
||||
|
public onDataUpdated() { |
||||
|
const tsValue = getSingleTsValue(this.ctx.data); |
||||
|
let value; |
||||
|
if (tsValue && isDefinedAndNotNull(tsValue[1]) && tsValue[0] !== 0) { |
||||
|
value = tsValue[1]; |
||||
|
this.valueText = formatValue(value, this.decimals, this.units, false); |
||||
|
} else { |
||||
|
this.valueText = 'N/A'; |
||||
|
} |
||||
|
this.iconColor.update(value); |
||||
|
this.labelColor.update(value); |
||||
|
this.valueColor.update(value); |
||||
|
this.cd.detectChanges(); |
||||
|
if (this.settings.autoScale) { |
||||
|
setTimeout(() => { |
||||
|
this.onResize(); |
||||
|
}, 0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public cardClick($event: Event) { |
||||
|
this.ctx.actionsApi.cardClick($event); |
||||
|
} |
||||
|
|
||||
|
private onResize() { |
||||
|
const paddingLeft = getComputedStyle(this.labelCardPanel.nativeElement).paddingLeft; |
||||
|
const paddingRight = getComputedStyle(this.labelCardPanel.nativeElement).paddingRight; |
||||
|
const paddingTop = getComputedStyle(this.labelCardPanel.nativeElement).paddingTop; |
||||
|
const paddingBottom = getComputedStyle(this.labelCardPanel.nativeElement).paddingBottom; |
||||
|
const pLeft = resolveCssSize(paddingLeft)[0]; |
||||
|
const pRight = resolveCssSize(paddingRight)[0]; |
||||
|
const pTop = resolveCssSize(paddingTop)[0]; |
||||
|
const pBottom = resolveCssSize(paddingBottom)[0]; |
||||
|
const panelWidth = this.labelCardPanel.nativeElement.getBoundingClientRect().width - (pLeft + pRight); |
||||
|
const panelHeight = this.labelCardPanel.nativeElement.getBoundingClientRect().height - (pTop + pBottom); |
||||
|
this.renderer.setStyle(this.labelCardContent.nativeElement, 'width', 'auto'); |
||||
|
this.renderer.setStyle(this.labelCardContent.nativeElement, 'transform', `none`); |
||||
|
const contentWidth = this.labelCardRow.nativeElement.getBoundingClientRect().width; |
||||
|
const contentHeight = this.labelCardRow.nativeElement.getBoundingClientRect().height; |
||||
|
const panelAspect = panelWidth / panelHeight; |
||||
|
const contentAspect = contentWidth / contentHeight; |
||||
|
let scale: number; |
||||
|
if (contentAspect > panelAspect) { |
||||
|
scale = panelWidth / contentWidth; |
||||
|
} else { |
||||
|
scale = panelHeight / contentHeight; |
||||
|
} |
||||
|
const width = panelWidth / scale; |
||||
|
this.renderer.setStyle(this.labelCardContent.nativeElement, 'width', width + 'px'); |
||||
|
this.renderer.setStyle(this.labelCardContent.nativeElement, 'transform', `scale(${scale})`); |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,80 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { |
||||
|
BackgroundSettings, |
||||
|
BackgroundType, |
||||
|
ColorSettings, |
||||
|
constantColor, |
||||
|
cssUnit, |
||||
|
Font |
||||
|
} from '@shared/models/widget-settings.models'; |
||||
|
|
||||
|
export interface LabelValueCardWidgetSettings { |
||||
|
autoScale: boolean; |
||||
|
showLabel: boolean; |
||||
|
label: string; |
||||
|
labelFont: Font; |
||||
|
labelColor: ColorSettings; |
||||
|
showIcon: boolean; |
||||
|
icon: string; |
||||
|
iconSize: number; |
||||
|
iconSizeUnit: cssUnit; |
||||
|
iconColor: ColorSettings; |
||||
|
valueFont: Font; |
||||
|
valueColor: ColorSettings; |
||||
|
background: BackgroundSettings; |
||||
|
padding: string; |
||||
|
} |
||||
|
|
||||
|
export const labelValueCardWidgetDefaultSettings: LabelValueCardWidgetSettings = { |
||||
|
autoScale: true, |
||||
|
showLabel: true, |
||||
|
label: 'Temperature', |
||||
|
labelFont: { |
||||
|
family: 'Roboto', |
||||
|
size: 20, |
||||
|
sizeUnit: 'px', |
||||
|
style: 'normal', |
||||
|
weight: '400', |
||||
|
lineHeight: '24px' |
||||
|
}, |
||||
|
labelColor: constantColor('rgba(0, 0, 0, 0.87)'), |
||||
|
showIcon: true, |
||||
|
icon: 'thermostat', |
||||
|
iconSize: 24, |
||||
|
iconSizeUnit: 'px', |
||||
|
iconColor: constantColor('#5469FF'), |
||||
|
valueFont: { |
||||
|
family: 'Roboto', |
||||
|
size: 20, |
||||
|
sizeUnit: 'px', |
||||
|
style: 'normal', |
||||
|
weight: '400', |
||||
|
lineHeight: '24px' |
||||
|
}, |
||||
|
valueColor: constantColor('rgba(0, 0, 0, 0.87)'), |
||||
|
background: { |
||||
|
type: BackgroundType.color, |
||||
|
color: '#fff', |
||||
|
overlay: { |
||||
|
enabled: false, |
||||
|
color: 'rgba(255,255,255,0.72)', |
||||
|
blur: 3 |
||||
|
} |
||||
|
}, |
||||
|
padding: '12px' |
||||
|
}; |
||||
@ -0,0 +1,73 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2024 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
you may not use this file except in compliance with the License. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<ng-container [formGroup]="labelCardWidgetSettingsForm"> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widgets.label-card.label-card-style</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="autoScale"> |
||||
|
{{ 'widgets.label-card.auto-scale' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<div class="fixed-title-width" translate>widgets.label-card.label</div> |
||||
|
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
<tb-font-settings formControlName="labelFont" |
||||
|
[previewText]="labelCardWidgetSettingsForm.get('label').value"> |
||||
|
</tb-font-settings> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="labelColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon"> |
||||
|
{{ 'widgets.label-card.icon' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic"> |
||||
|
<input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
<tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select> |
||||
|
<tb-material-icon-select asBoxInput |
||||
|
iconClearButton |
||||
|
[color]="labelCardWidgetSettingsForm.get('iconColor').value" |
||||
|
formControlName="icon"> |
||||
|
</tb-material-icon-select> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="iconColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widgets.background.background' | translate }}</div> |
||||
|
<tb-background-settings formControlName="background"> |
||||
|
</tb-background-settings> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widget-config.card-padding' | translate }}</div> |
||||
|
<mat-form-field appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
</ng-container> |
||||
@ -0,0 +1,83 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { Component } from '@angular/core'; |
||||
|
import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; |
||||
|
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { labelCardWidgetDefaultSettings } from '@home/components/widget/lib/cards/label-card-widget.models'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-label-card-widget-settings', |
||||
|
templateUrl: './label-card-widget-settings.component.html', |
||||
|
styleUrls: [] |
||||
|
}) |
||||
|
export class LabelCardWidgetSettingsComponent extends WidgetSettingsComponent { |
||||
|
|
||||
|
labelCardWidgetSettingsForm: UntypedFormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: UntypedFormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): UntypedFormGroup { |
||||
|
return this.labelCardWidgetSettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return {...labelCardWidgetDefaultSettings}; |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
this.labelCardWidgetSettingsForm = this.fb.group({ |
||||
|
autoScale: [settings.autoScale, []], |
||||
|
|
||||
|
label: [settings.label, []], |
||||
|
labelFont: [settings.labelFont, []], |
||||
|
labelColor: [settings.labelColor, []], |
||||
|
|
||||
|
showIcon: [settings.showIcon, []], |
||||
|
iconSize: [settings.iconSize, [Validators.min(0)]], |
||||
|
iconSizeUnit: [settings.iconSizeUnit, []], |
||||
|
icon: [settings.icon, []], |
||||
|
iconColor: [settings.iconColor, []], |
||||
|
|
||||
|
background: [settings.background, []], |
||||
|
padding: [settings.padding, []] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
protected validatorTriggers(): string[] { |
||||
|
return ['showIcon']; |
||||
|
} |
||||
|
|
||||
|
protected updateValidators(emitEvent: boolean) { |
||||
|
const showIcon: boolean = this.labelCardWidgetSettingsForm.get('showIcon').value; |
||||
|
if (showIcon) { |
||||
|
this.labelCardWidgetSettingsForm.get('iconSize').enable(); |
||||
|
this.labelCardWidgetSettingsForm.get('iconSizeUnit').enable(); |
||||
|
this.labelCardWidgetSettingsForm.get('icon').enable(); |
||||
|
this.labelCardWidgetSettingsForm.get('iconColor').enable(); |
||||
|
} else { |
||||
|
this.labelCardWidgetSettingsForm.get('iconSize').disable(); |
||||
|
this.labelCardWidgetSettingsForm.get('iconSizeUnit').disable(); |
||||
|
this.labelCardWidgetSettingsForm.get('icon').disable(); |
||||
|
this.labelCardWidgetSettingsForm.get('iconColor').disable(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,81 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2024 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
you may not use this file except in compliance with the License. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<ng-container [formGroup]="labelValueCardWidgetSettingsForm"> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widgets.label-value-card.label-value-card-style</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="autoScale"> |
||||
|
{{ 'widgets.label-card.auto-scale' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="showLabel"> |
||||
|
{{ 'widgets.label-card.label' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
<tb-font-settings formControlName="labelFont" |
||||
|
[previewText]="labelValueCardWidgetSettingsForm.get('label').value"> |
||||
|
</tb-font-settings> |
||||
|
<tb-color-settings formControlName="labelColor" settingsKey="{{'widgets.label-card.label' | translate }}"> |
||||
|
</tb-color-settings> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon"> |
||||
|
{{ 'widgets.label-card.icon' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic"> |
||||
|
<input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
<tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select> |
||||
|
<tb-material-icon-select asBoxInput |
||||
|
iconClearButton |
||||
|
[color]="labelValueCardWidgetSettingsForm.get('iconColor').value?.color" |
||||
|
formControlName="icon"> |
||||
|
</tb-material-icon-select> |
||||
|
<tb-color-settings formControlName="iconColor" settingsKey="{{'widgets.label-card.icon' | translate }}"> |
||||
|
</tb-color-settings> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div translate>widgets.label-value-card.value</div> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<tb-font-settings formControlName="valueFont" |
||||
|
[previewText]="valuePreviewFn"> |
||||
|
</tb-font-settings> |
||||
|
<tb-color-settings formControlName="valueColor" settingsKey="{{'widgets.label-value-card.value' | translate }}"> |
||||
|
</tb-color-settings> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widgets.background.background' | translate }}</div> |
||||
|
<tb-background-settings formControlName="background"> |
||||
|
</tb-background-settings> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widget-config.card-padding' | translate }}</div> |
||||
|
<mat-form-field appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
</ng-container> |
||||
@ -0,0 +1,108 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { Component } from '@angular/core'; |
||||
|
import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; |
||||
|
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { labelValueCardWidgetDefaultSettings } from '@home/components/widget/lib/cards/label-value-card-widget.models'; |
||||
|
import { formatValue } from '@core/utils'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-label-value-card-widget-settings', |
||||
|
templateUrl: './label-value-card-widget-settings.component.html', |
||||
|
styleUrls: [] |
||||
|
}) |
||||
|
export class LabelValueCardWidgetSettingsComponent extends WidgetSettingsComponent { |
||||
|
|
||||
|
labelValueCardWidgetSettingsForm: UntypedFormGroup; |
||||
|
|
||||
|
valuePreviewFn = this._valuePreviewFn.bind(this); |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: UntypedFormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): UntypedFormGroup { |
||||
|
return this.labelValueCardWidgetSettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return {...labelValueCardWidgetDefaultSettings}; |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
this.labelValueCardWidgetSettingsForm = this.fb.group({ |
||||
|
autoScale: [settings.autoScale, []], |
||||
|
|
||||
|
showLabel: [settings.showLabel, []], |
||||
|
label: [settings.label, []], |
||||
|
labelFont: [settings.labelFont, []], |
||||
|
labelColor: [settings.labelColor, []], |
||||
|
|
||||
|
showIcon: [settings.showIcon, []], |
||||
|
iconSize: [settings.iconSize, [Validators.min(0)]], |
||||
|
iconSizeUnit: [settings.iconSizeUnit, []], |
||||
|
icon: [settings.icon, []], |
||||
|
iconColor: [settings.iconColor, []], |
||||
|
|
||||
|
valueFont: [settings.valueFont, []], |
||||
|
valueColor: [settings.valueColor, []], |
||||
|
|
||||
|
background: [settings.background, []], |
||||
|
padding: [settings.padding, []] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
protected validatorTriggers(): string[] { |
||||
|
return ['showLabel', 'showIcon']; |
||||
|
} |
||||
|
|
||||
|
protected updateValidators(emitEvent: boolean) { |
||||
|
const showLabel: boolean = this.labelValueCardWidgetSettingsForm.get('showLabel').value; |
||||
|
const showIcon: boolean = this.labelValueCardWidgetSettingsForm.get('showIcon').value; |
||||
|
|
||||
|
if (showLabel) { |
||||
|
this.labelValueCardWidgetSettingsForm.get('label').enable(); |
||||
|
this.labelValueCardWidgetSettingsForm.get('labelFont').enable(); |
||||
|
this.labelValueCardWidgetSettingsForm.get('labelColor').enable(); |
||||
|
} else { |
||||
|
this.labelValueCardWidgetSettingsForm.get('label').disable(); |
||||
|
this.labelValueCardWidgetSettingsForm.get('labelFont').disable(); |
||||
|
this.labelValueCardWidgetSettingsForm.get('labelColor').disable(); |
||||
|
} |
||||
|
|
||||
|
if (showIcon) { |
||||
|
this.labelValueCardWidgetSettingsForm.get('iconSize').enable(); |
||||
|
this.labelValueCardWidgetSettingsForm.get('iconSizeUnit').enable(); |
||||
|
this.labelValueCardWidgetSettingsForm.get('icon').enable(); |
||||
|
this.labelValueCardWidgetSettingsForm.get('iconColor').enable(); |
||||
|
} else { |
||||
|
this.labelValueCardWidgetSettingsForm.get('iconSize').disable(); |
||||
|
this.labelValueCardWidgetSettingsForm.get('iconSizeUnit').disable(); |
||||
|
this.labelValueCardWidgetSettingsForm.get('icon').disable(); |
||||
|
this.labelValueCardWidgetSettingsForm.get('iconColor').disable(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private _valuePreviewFn(): string { |
||||
|
const units: string = this.widgetConfig.config.units; |
||||
|
const decimals: number = this.widgetConfig.config.decimals; |
||||
|
return formatValue(22, decimals, units, true); |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue