dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of github.com:thingsboard/thingsboard

Browse Source
This commit is contained in:
Igor Kulikov 2023-10-23 18:31:07 +03:00
commit e211e5759f
21 changed files with 187 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
application/src/main/data/json/system/widget_types/state_chart.json
View File

@ -19,7 +19,7 @@
"latestDataKeySettingsDirective": "tb-flot-latest-key-settings",
"hasBasicMode": true,
"basicModeDirective": "tb-flot-basic-config",
"defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Switch 1\",\"color\":\"#2196f3\",\"settings\":{\"showLines\":true,\"fillLines\":true,\"showPoints\":false,\"axisPosition\":\"left\",\"showSeparateAxis\":false},\"_hash\":0.8587686344902596,\"funcBody\":\"return Math.random() > 0.5 ? 1 : 0;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Switch 2\",\"color\":\"#ffc107\",\"settings\":{\"showLines\":true,\"fillLines\":false,\"showPoints\":false,\"axisPosition\":\"left\"},\"_hash\":0.12775350966079668,\"funcBody\":\"return Math.random() <= 0.5 ? 1 : 0;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"stack\":false,\"fontSize\":10,\"fontColor\":\"#545454\",\"showTooltip\":true,\"tooltipIndividual\":false,\"tooltipCumulative\":false,\"hideZeros\":false,\"tooltipValueFormatter\":\"if (value > 0 && value <= 1) {\\n return 'On';\\n} else if (value === 0) {\\n return 'Off';\\n} else {\\n return '';\\n}\",\"grid\":{\"verticalLines\":true,\"horizontalLines\":true,\"outlineWidth\":1,\"color\":\"#545454\",\"backgroundColor\":null,\"tickColor\":\"#DDDDDD\"},\"xaxis\":{\"title\":null,\"showLabels\":true,\"color\":\"#545454\"},\"yaxis\":{\"min\":0,\"max\":1.2,\"title\":null,\"showLabels\":true,\"color\":\"#545454\",\"tickSize\":null,\"tickDecimals\":0,\"ticksFormatter\":\"if (value > 0 && value <= 1) {\\n return 'On';\\n} else if (value === 0) {\\n return 'Off';\\n} else {\\n return '';\\n}\"},\"shadowSize\":4,\"smoothLines\":false,\"comparisonEnabled\":false,\"timeForComparison\":\"previousInterval\",\"comparisonCustomIntervalValue\":7200000,\"xaxisSecond\":{\"axisPosition\":\"top\",\"title\":null,\"showLabels\":true},\"showLegend\":true,\"legendConfig\":{\"direction\":\"column\",\"position\":\"right\",\"sortDataKeys\":false,\"showMin\":false,\"showMax\":false,\"showAvg\":false,\"showTotal\":false,\"showLatest\":false},\"customLegendEnabled\":false,\"dataKeysListForLabels\":[]},\"title\":\"State Chart\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"mobileHeight\":null,\"widgetStyle\":{},\"useDashboardTimewindow\":true,\"showLegend\":true,\"actions\":{},\"legendConfig\":{\"direction\":\"column\",\",position\":\"bottom\",\"showMin\":false,\"showMax\":false,\"showAvg\":false,\"showTotal\":false},\"configMode\":\"basic\",\"showTitleIcon\":false,\"titleIcon\":\"waterfall_chart\",\"iconColor\":\"#1F6BDD\"}"
"defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Switch 1\",\"color\":\"#2196f3\",\"settings\":{\"showLines\":true,\"fillLines\":true,\"showPoints\":false,\"axisPosition\":\"left\",\"showSeparateAxis\":false},\"_hash\":0.8587686344902596,\"funcBody\":\"return Math.random() > 0.5 ? 1 : 0;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Switch 2\",\"color\":\"#ffc107\",\"settings\":{\"showLines\":true,\"fillLines\":false,\"showPoints\":false,\"axisPosition\":\"left\"},\"_hash\":0.12775350966079668,\"funcBody\":\"return Math.random() <= 0.5 ? 1 : 0;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"stack\":false,\"fontSize\":10,\"fontColor\":\"#545454\",\"showTooltip\":true,\"tooltipIndividual\":false,\"tooltipCumulative\":false,\"hideZeros\":false,\"tooltipValueFormatter\":\"if (value > 0 && value <= 1) {\\n return 'On';\\n} else if (value === 0) {\\n return 'Off';\\n} else {\\n return '';\\n}\",\"grid\":{\"verticalLines\":true,\"horizontalLines\":true,\"outlineWidth\":1,\"color\":\"#545454\",\"backgroundColor\":null,\"tickColor\":\"#DDDDDD\"},\"xaxis\":{\"title\":null,\"showLabels\":true,\"color\":\"#545454\"},\"yaxis\":{\"min\":0,\"max\":1.2,\"title\":null,\"showLabels\":true,\"color\":\"#545454\",\"tickSize\":null,\"tickDecimals\":0,\"ticksFormatter\":\"if (value > 0 && value <= 1) {\\n return 'On';\\n} else if (value === 0) {\\n return 'Off';\\n} else {\\n return '';\\n}\"},\"shadowSize\":4,\"smoothLines\":false,\"comparisonEnabled\":false,\"timeForComparison\":\"previousInterval\",\"comparisonCustomIntervalValue\":7200000,\"xaxisSecond\":{\"axisPosition\":\"top\",\"title\":null,\"showLabels\":true},\"showLegend\":true,\"legendConfig\":{\"direction\":\"column\",\"position\":\"right\",\"sortDataKeys\":false,\"showMin\":false,\"showMax\":false,\"showAvg\":false,\"showTotal\":false,\"showLatest\":false},\"customLegendEnabled\":false,\"dataKeysListForLabels\":[]},\"title\":\"State Chart\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"mobileHeight\":null,\"widgetStyle\":{},\"useDashboardTimewindow\":true,\"showLegend\":true,\"actions\":{},\"configMode\":\"basic\",\"showTitleIcon\":false,\"titleIcon\":\"waterfall_chart\",\"iconColor\":\"#1F6BDD\"}"
},
"externalId": null,
"tags": null

9
ui-ngx/src/app/core/http/widget.service.ts
View File

@ -236,6 +236,15 @@ export class WidgetService {
return this.http.get<PageData<WidgetTypeInfo>>(url, defaultHttpOptionsFromConfig(config));
}
public addWidgetFqnToWidgetBundle(widgetsBundleId: string, fqn: string, config?: RequestConfig) {
return this.getBundleWidgetTypeFqns(widgetsBundleId, config).pipe(
mergeMap(widgetsBundleFqn => {
widgetsBundleFqn.push(fqn);
return this.updateWidgetsBundleWidgetFqns(widgetsBundleId, widgetsBundleFqn, config);
})
);
}
public getWidgetTemplate(widgetTypeParam: widgetType,
config?: RequestConfig): Observable<WidgetInfo> {
const templateWidgetType = widgetTypesData.get(widgetTypeParam);

1
ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
View File

@ -110,6 +110,7 @@
<span class="tb-details-subtitle">{{ 'widgets-bundle.current' | translate }}</span>
<tb-widgets-bundle-select fxFlexOffset="5"
fxFlex
required
[selectFirstBundle]="false"
[selectBundleAlias]="selectedWidgetsBundleAlias"
[ngModel]="null"

6
ui-ngx/src/app/modules/home/components/import-export/import-export.service.ts
View File

@ -297,7 +297,7 @@ export class ImportExportService {
);
}
public importWidgetType(): Observable<WidgetType> {
public importWidgetType(): Observable<WidgetTypeDetails> {
return this.openImportDialog('widget.import', 'widget-type.widget-file').pipe(
mergeMap((widgetTypeDetails: WidgetTypeDetails) => {
if (!this.validateImportedWidgetTypeDetails(widgetTypeDetails)) {
@ -309,9 +309,7 @@ export class ImportExportService {
return this.widgetService.saveImportedWidgetTypeDetails(widgetTypeDetails);
}
}),
catchError((err) => {
return of(null);
})
catchError(() => of(null))
);
}

4
ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts
View File

@ -116,7 +116,7 @@ export class AggregatedValueCardWidgetComponent implements OnInit, AfterViewInit
ngOnInit(): void {
this.ctx.$scope.aggregatedValueCardWidget = this;
this.settings = {...aggregatedValueCardDefaultSettings, ...this.ctx.settings};
this.showSubtitle = this.settings.showSubtitle;
this.showSubtitle = this.settings.showSubtitle && this.ctx.datasources?.length > 0;
const subtitle = this.settings.subtitle;
this.subtitle$ = this.ctx.registerLabelPattern(subtitle, this.subtitle$);
this.subtitleStyle = textStyle(this.settings.subtitleFont);
@ -156,7 +156,7 @@ export class AggregatedValueCardWidgetComponent implements OnInit, AfterViewInit
}
ngAfterViewInit(): void {
if (this.showChart) {
if (this.showChart && this.ctx.datasources?.length) {
const settings = {
shadowSize: 0,
enableSelection: false,

4
ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.component.ts
View File

@ -60,7 +60,9 @@ export class FlotWidgetComponent implements OnInit {
this.settings = this.ctx.settings;
this.chartType = this.chartType || 'line';
this.configureLegend();
this.flot = new TbFlot(this.ctx, this.chartType, $(this.flotElement.nativeElement));
if (this.ctx.datasources?.length) {
this.flot = new TbFlot(this.ctx, this.chartType, $(this.flotElement.nativeElement));
}
}
private configureLegend(): void {

2
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.html
View File

@ -21,7 +21,7 @@
<div class="fixed-title-width" translate>date.format</div>
<mat-form-field class="tb-date-format-input" required fxFlex appearance="outline" subscriptSizing="dynamic">
<input matInput [formControl]="dateFormatFormControl" placeholder="{{ 'widget-config.set' | translate }}">
<div matSuffix tb-help-popup="date/date-format" [tb-help-popup-style]="{width: '800px'}"></div>
<div matIconSuffix tb-help-popup="date/date-format" [tb-help-popup-style]="{width: '800px'}"></div>
</mat-form-field>
</div>
<mat-divider></mat-divider>

10
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-settings-panel.component.scss
View File

@ -48,10 +48,12 @@
}
.mat-mdc-form-field.tb-date-format-input {
.mat-mdc-text-field-wrapper.mdc-text-field--outlined {
.mat-mdc-form-field-icon-suffix {
display: flex;
align-items: center;
line-height: normal;
.mat-mdc-form-field-flex {
.mat-mdc-form-field-icon-suffix {
display: flex;
align-items: center;
line-height: normal;
}
}
}
}

2
ui-ngx/src/app/modules/home/models/dashboard-component.models.ts
View File

@ -479,7 +479,7 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget {
backgroundColor: this.backgroundColor,
padding: this.padding,
margin: this.margin,
borderRadius: this.borderRadius};
borderRadius: this.borderRadius || 'unset' };
if (this.widget.config.widgetStyle) {
this.style = {...this.style, ...this.widget.config.widgetStyle};
}

24
ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html
View File

@ -15,7 +15,7 @@
limitations under the License.
-->
<form [formGroup]="saveWidgetTypeAsFormGroup" (ngSubmit)="saveAs()">
<form [formGroup]="saveWidgetTypeAsFormGroup" (ngSubmit)="saveAs()" style="width: 360px">
<mat-toolbar color="primary">
<h2 translate>widget.save-widget-as</h2>
<span fxFlex></span>
@ -29,16 +29,18 @@
</mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<div mat-dialog-content>
<fieldset>
<span translate>widget.save-widget-as-text</span>
<mat-form-field class="mat-block">
<mat-label translate>widget.title</mat-label>
<input matInput formControlName="title" required>
<mat-error *ngIf="saveWidgetTypeAsFormGroup.get('title').hasError('required')">
{{ 'widget.title-required' | translate }}
</mat-error>
</mat-form-field>
</fieldset>
<span translate>widget.save-widget-as-text</span>
<mat-form-field class="mat-block">
<mat-label translate>widget.title</mat-label>
<input matInput formControlName="title" required>
<mat-error *ngIf="saveWidgetTypeAsFormGroup.get('title').hasError('required')">
{{ 'widget.title-required' | translate }}
</mat-error>
</mat-form-field>
<tb-widgets-bundle-select
formControlName="widgetsBundle"
bundlesScope="{{bundlesScope}}">
</tb-widgets-bundle-select>
</div>
<div mat-dialog-actions fxLayoutAlign="end center">
<button mat-button color="primary"

24
ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.ts
View File

@ -18,12 +18,15 @@ import { Component, OnInit } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { DialogComponent } from '@shared/components/dialog.component';
import { Router } from '@angular/router';
import { getCurrentAuthUser } from '@core/auth/auth.selectors';
import { Authority } from '@shared/models/authority.enum';
export interface SaveWidgetTypeAsDialogResult {
widgetName: string;
widgetBundleId?: string;
}
@Component({
@ -34,18 +37,27 @@ export interface SaveWidgetTypeAsDialogResult {
export class SaveWidgetTypeAsDialogComponent extends
DialogComponent<SaveWidgetTypeAsDialogComponent, SaveWidgetTypeAsDialogResult> implements OnInit {
saveWidgetTypeAsFormGroup: UntypedFormGroup;
saveWidgetTypeAsFormGroup: FormGroup;
bundlesScope: string;
constructor(protected store: Store<AppState>,
protected router: Router,
public dialogRef: MatDialogRef<SaveWidgetTypeAsDialogComponent, SaveWidgetTypeAsDialogResult>,
public fb: UntypedFormBuilder) {
public fb: FormBuilder) {
super(store, router, dialogRef);
const authUser = getCurrentAuthUser(store);
if (authUser.authority === Authority.TENANT_ADMIN) {
this.bundlesScope = 'tenant';
} else {
this.bundlesScope = 'system';
}
}
ngOnInit(): void {
this.saveWidgetTypeAsFormGroup = this.fb.group({
title: [null, [Validators.required]]
title: [null, [Validators.required]],
widgetsBundle: [null]
});
}
@ -55,8 +67,10 @@ export class SaveWidgetTypeAsDialogComponent extends
saveAs(): void {
const widgetName: string = this.saveWidgetTypeAsFormGroup.get('title').value;
const widgetBundleId: string = this.saveWidgetTypeAsFormGroup.get('widgetsBundle').value?.id?.id;
const result: SaveWidgetTypeAsDialogResult = {
widgetName
widgetName,
widgetBundleId
};
this.dialogRef.close(result);
}

32
ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts
View File

@ -52,7 +52,7 @@ import {
SaveWidgetTypeAsDialogComponent,
SaveWidgetTypeAsDialogResult
} from '@home/pages/widget/save-widget-type-as-dialog.component';
import { forkJoin, Subscription } from 'rxjs';
import { forkJoin, mergeMap, of, Subscription } from 'rxjs';
import { ResizeObserver } from '@juggle/resize-observer';
import { widgetEditorCompleter } from '@home/pages/widget/widget-editor.models';
import { Observable } from 'rxjs/internal/Observable';
@ -563,7 +563,17 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe
private commitSaveWidget() {
const id = (this.widgetTypeDetails && this.widgetTypeDetails.id) ? this.widgetTypeDetails.id : undefined;
const createdTime = (this.widgetTypeDetails && this.widgetTypeDetails.createdTime) ? this.widgetTypeDetails.createdTime : undefined;
this.widgetService.saveWidgetTypeDetails(this.widget, id, createdTime).subscribe({
this.widgetService.saveWidgetTypeDetails(this.widget, id, createdTime).pipe(
mergeMap((widgetTypeDetails) => {
const widgetsBundleId = this.route.snapshot.params.widgetsBundleId as string;
if (widgetsBundleId && !id) {
return this.widgetService.addWidgetFqnToWidgetBundle(widgetsBundleId, widgetTypeDetails.fqn).pipe(
map(() => widgetTypeDetails)
);
}
return of(widgetTypeDetails);
})
).subscribe({
next: (widgetTypeDetails) => {
this.saveWidgetPending = false;
if (!this.widgetTypeDetails?.id) {
@ -595,11 +605,25 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe
config.title = this.widget.widgetName;
this.widget.defaultConfig = JSON.stringify(config);
this.isDirty = false;
this.widgetService.saveWidgetTypeDetails(this.widget, undefined, undefined).subscribe(
this.widgetService.saveWidgetTypeDetails(this.widget, undefined, undefined).pipe(
mergeMap((widget) => {
if (saveWidgetAsData.widgetBundleId) {
return this.widgetService.addWidgetFqnToWidgetBundle(saveWidgetAsData.widgetBundleId, widget.fqn).pipe(
map(() => widget)
);
}
return of(widget);
})
).subscribe(
{
next: (widgetTypeDetails) => {
this.saveWidgetAsPending = false;
this.router.navigate(['..', widgetTypeDetails.id.id], {relativeTo: this.route});
if (saveWidgetAsData.widgetBundleId) {
this.router.navigate(['resources', 'widgets-library', 'widgets-bundles',
saveWidgetAsData.widgetBundleId, widgetTypeDetails.id.id]);
} else {
this.router.navigate(['resources', 'widgets-library', 'widget-types', widgetTypeDetails.id.id]);
}
},
error: () => {
this.saveWidgetAsPending = false;

26
ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-widgets.component.html
View File

@ -27,6 +27,23 @@
</button>
<span class="mat-headline-5">{{ widgetsBundle.title }}: {{ 'widget.widgets' | translate }}</span>
<span fxFlex></span>
<button mat-icon-button [disabled]="isLoading$ | async"
*ngIf="!isReadOnly"
matTooltip="{{ 'widget.add-new-widget' | translate }}"
matTooltipPosition="above"
[matMenuTriggerFor]="addWidgetMenu">
<mat-icon>add</mat-icon>
</button>
<mat-menu #addWidgetMenu="matMenu" xPosition="before">
<button mat-menu-item (click)="addWidgetType($event)">
<mat-icon>insert_drive_file</mat-icon>
<span>{{ 'dashboard.create-new-widget' | translate }}</span>
</button>
<button mat-menu-item (click)="importWidgetType()">
<mat-icon>file_upload</mat-icon>
<span>{{ 'widget.import' | translate }}</span>
</button>
</mat-menu>
<button mat-icon-button
matTooltip="{{ 'widgets-bundle.export' | translate }}"
matTooltipPosition="above"
@ -83,18 +100,15 @@
</div>
</div>
<div *ngIf="editMode && !addMode && widgets?.length" class="tb-add-widget-button"
matTooltip="{{ 'widget.add' | translate }}"
matTooltip="{{ 'widget.add-existing-widget' | translate }}"
matTooltipPosition="above"
(click)="addWidgetMode()">
<tb-icon color="primary" class="tb-add-widget-icon">add</tb-icon>
</div>
<div *ngIf="editMode && !addMode && !widgets?.length" class="tb-add-widget-button-panel">
<div class="tb-add-widget-button-with-text"
matTooltip="{{ 'widget.add' | translate }}"
matTooltipPosition="above"
(click)="addWidgetMode()">
<div class="tb-add-widget-button-with-text" (click)="addWidgetMode()">
<tb-icon color="primary" class="tb-add-widget-icon">add</tb-icon>
<div class="tb-add-widget-button-text" translate>widget.add</div>
<div class="tb-add-widget-button-text" translate>widget.add-existing-widget</div>
</div>
</div>
<div *ngIf="isReadOnly && !widgets?.length" class="tb-no-data-available">

61
ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-widgets.component.ts
View File

@ -24,13 +24,17 @@ import { getCurrentAuthUser } from '@core/auth/auth.selectors';
import { Authority } from '@shared/models/authority.enum';
import { NULL_UUID } from '@shared/models/id/has-uuid';
import { WidgetsBundle } from '@shared/models/widgets-bundle.model';
import { WidgetTypeInfo } from '@shared/models/widget.models';
import { widgetType as WidgetDataType, WidgetTypeInfo } from '@shared/models/widget.models';
import { CdkDragDrop } from '@angular/cdk/drag-drop';
import { ImportExportService } from '@home/components/import-export/import-export.service';
import { WidgetService } from '@core/http/widget.service';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import { isDefinedAndNotNull } from '@core/utils';
import { FormControl, Validators } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { SelectWidgetTypeDialogComponent } from '@home/pages/widget/select-widget-type-dialog.component';
type WidgetTypeBundle = WithOptional<WidgetTypeInfo, 'widgetType'>;
@Component({
selector: 'tb-widgets-bundle-widget',
@ -47,7 +51,7 @@ export class WidgetsBundleWidgetsComponent extends PageComponent implements OnIn
isDirty = false;
widgetsBundle: WidgetsBundle;
widgets: Array<WidgetTypeInfo>;
widgets: Array<WidgetTypeBundle>;
excludeWidgetTypeIds: Array<string>;
addWidgetFormControl = new FormControl(null, [Validators.required]);
@ -58,7 +62,8 @@ export class WidgetsBundleWidgetsComponent extends PageComponent implements OnIn
private widgetsService: WidgetService,
private importExport: ImportExportService,
private sanitizer: DomSanitizer,
private cd: ChangeDetectorRef) {
private cd: ChangeDetectorRef,
private dialog: MatDialog) {
super(store);
this.authUser = getCurrentAuthUser(this.store);
this.widgetsBundle = this.route.snapshot.data.widgetsBundle;
@ -88,7 +93,7 @@ export class WidgetsBundleWidgetsComponent extends PageComponent implements OnIn
return '/assets/widget-preview-empty.svg';
}
trackByWidget(index: number, widget: WidgetTypeInfo): any {
trackByWidget(index: number, widget: WidgetTypeBundle): any {
return widget;
}
@ -109,27 +114,27 @@ export class WidgetsBundleWidgetsComponent extends PageComponent implements OnIn
this.addMode = false;
}
private addWidget(newWidget: WidgetTypeInfo) {
private addWidget(newWidget: WidgetTypeBundle) {
this.widgets.push(newWidget);
this.isDirty = true;
this.addMode = false;
}
openWidgetEditor($event: Event, widgetType: WidgetTypeInfo) {
openWidgetEditor($event: Event, widgetType: WidgetTypeBundle) {
if ($event) {
$event.stopPropagation();
}
this.router.navigate([widgetType.id.id], {relativeTo: this.route}).then(()=> {});
}
exportWidgetType($event: Event, widgetType: WidgetTypeInfo) {
exportWidgetType($event: Event, widgetType: WidgetTypeBundle) {
if ($event) {
$event.stopPropagation();
}
this.importExport.exportWidgetType(widgetType.id.id);
}
removeWidgetType($event: Event, widgetType: WidgetTypeInfo) {
removeWidgetType($event: Event, widgetType: WidgetTypeBundle) {
if ($event) {
$event.stopPropagation();
}
@ -176,4 +181,44 @@ export class WidgetsBundleWidgetsComponent extends PageComponent implements OnIn
});
}
addWidgetType($event: Event): void {
if ($event) {
$event.stopPropagation();
}
this.dialog.open<SelectWidgetTypeDialogComponent, any,
WidgetDataType>(SelectWidgetTypeDialogComponent, {
disableClose: true,
panelClass: ['tb-dialog', 'tb-fullscreen-dialog']
}).afterClosed().subscribe(
(type) => {
if (type) {
this.router.navigate([type], {relativeTo: this.route}).then(() => {});
}
}
);
}
importWidgetType() {
this.importExport.importWidgetType().subscribe(
(widgetType) => {
if (widgetType) {
const isExistWidget = this.widgets.some(widget => widget.id.id === widgetType.id.id);
if (isExistWidget) {
this.widgets = this.widgets.map(widget => widget.id.id !== widgetType.id.id ? widget : widgetType);
}
if (this.editMode) {
this.widgets.push(widgetType);
this.isDirty = true;
this.cd.markForCheck();
} else if (!isExistWidget) {
this.widgetsService.addWidgetFqnToWidgetBundle(this.widgetsBundle.id.id, widgetType.fqn).subscribe(() => {
this.widgets.push(widgetType);
this.cd.markForCheck();
});
}
}
}
);
}
}

4
ui-ngx/src/app/shared/components/widgets-bundle-select.component.html
View File

@ -19,9 +19,9 @@
<mat-select [required]="required"
[disabled]="disabled"
[(ngModel)]="widgetsBundle"
matInput
panelClass="tb-widgets-bundle-select"
placeholder="{{ 'widget.select-widgets-bundle' | translate }}"
(blur)="onTouched()"
(ngModelChange)="widgetsBundleChanged()">
<mat-select-trigger>
<div class="tb-bundle-item">
@ -29,6 +29,8 @@
<span translate class="tb-bundle-system" *ngIf="isSystem(widgetsBundle)">widgets-bundle.system</span>
</div>
</mat-select-trigger>
<mat-option [value]="null" *ngIf="!required">
</mat-option>
<mat-option *ngFor="let widgetsBundle of widgetsBundles$ | async" [value]="widgetsBundle">
<div class="tb-bundle-item">
<span>{{widgetsBundle.title}}</span>

16
ui-ngx/src/app/shared/components/widgets-bundle-select.component.ts
View File

@ -20,12 +20,12 @@ import { Observable } from 'rxjs';
import { map, share, tap } from 'rxjs/operators';
import { Store } from '@ngrx/store';
import { AppState } from '@app/core/core.state';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { WidgetsBundle } from '@shared/models/widgets-bundle.model';
import { WidgetService } from '@core/http/widget.service';
import { isDefined } from '@core/utils';
import { NULL_UUID } from '@shared/models/id/has-uuid';
import { getCurrentAuthState } from '@core/auth/auth.selectors';
import { coerceBoolean } from '@shared/decorators/coercion';
@Component({
selector: 'tb-widgets-bundle-select',
@ -44,19 +44,15 @@ export class WidgetsBundleSelectComponent implements ControlValueAccessor, OnIni
bundlesScope: 'system' | 'tenant';
@Input()
@coerceBoolean()
selectFirstBundle: boolean;
@Input()
selectBundleAlias: string;
private requiredValue: boolean;
get required(): boolean {
return this.requiredValue;
}
@Input()
set required(value: boolean) {
this.requiredValue = coerceBooleanProperty(value);
}
@coerceBoolean()
required: boolean;
@Input()
disabled: boolean;
@ -70,7 +66,8 @@ export class WidgetsBundleSelectComponent implements ControlValueAccessor, OnIni
widgetsBundle: WidgetsBundle | null;
private propagateChange = (v: any) => { };
onTouched = () => {};
private propagateChange: (value: any) => void = () => {};
constructor(private store: Store<AppState>,
private widgetService: WidgetService) {
@ -81,6 +78,7 @@ export class WidgetsBundleSelectComponent implements ControlValueAccessor, OnIni
}
registerOnTouched(fn: any): void {
this.onTouched = fn;
}
ngOnInit() {

7
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -3748,7 +3748,7 @@
"ui-resources-load-error": "Failed to load configuration ui resources.",
"invalid-target-rulechain": "Unable to resolve target rule chain!",
"test-script-function": "Test script function",
"script-lang-java-script": "Java Script",
"script-lang-java-script": "JavaScript",
"script-lang-tbel": "TBEL",
"message": "Message",
"message-type": "Message type",
@ -4388,6 +4388,7 @@
"volt": "Volt",
"kilovolts": "Kilovolts",
"dbmV": "dBmV",
"dbm": "dBm",
"volt-meter": "Volt-Meter",
"kilovolt-meter": "Kilovolt-Meter",
"megavolt-meter": "Megavolt-Meter",
@ -4759,7 +4760,7 @@
"no-widgets-text": "No widgets found",
"management": "Widget management",
"editor": "Widget Editor",
"confirm-to-exit-editor-html": "You have unsaved default widget settings.<br>Are you sure you want to leave this page?",
"confirm-to-exit-editor-html": "You have unsaved widget settings.<br>Are you sure you want to leave this page?",
"widget-type-not-found": "Problem loading widget configuration.<br>Probably associated\n widget type was removed.",
"widget-type-load-error": "Widget wasn't loaded due to the following errors:",
"remove": "Remove widget",
@ -4827,6 +4828,8 @@
"details": "Details",
"widget-details": "Widget details",
"add": "Add Widget",
"add-existing-widget": "Add existing widget",
"add-new-widget": "Add new widget",
"search-widgets": "Search widgets",
"selected-widgets": "{ count, plural, =1 {1 widget} other {# widgets} } selected",
"undo": "Undo widget changes",

2
ui-ngx/src/assets/locale/locale.constant-es_ES.json
View File

@ -3735,7 +3735,7 @@
"ui-resources-load-error": "Error al cargar los recursos de configuración UI.",
"invalid-target-rulechain": "No se puede resolver la cadena de reglas objetivo!",
"test-script-function": "Probar Script de función",
"script-lang-java-script": "Java Script",
"script-lang-java-script": "JavaScript",
"script-lang-tbel": "TBEL",
"message": "Mensaje",
"message-type": "Tipo de mensaje",

2
ui-ngx/src/assets/locale/locale.constant-zh_CN.json
View File

@ -3366,7 +3366,7 @@
"ui-resources-load-error": "加载配置UI资源失败。",
"invalid-target-rulechain": "无法解析目标规则链！",
"test-script-function": "测试脚本功能",
"script-lang-java-script": "Java Script",
"script-lang-java-script": "JavaScript",
"script-lang-tbel": "TBEL",
"message": "消息",
"message-type": "消息类型",

5
ui-ngx/src/assets/metadata/units.json
View File

@ -938,6 +938,11 @@
"symbol": "dBmV",
"tags": ["decibels millivolt","voltage level","signal","dBmV"]
},
{
"name": "unit.dbm",
"symbol": "dBm",
"tags": ["decibel milliwatts","output power","signal","dBm"]
},
{
"name": "unit.volt-meter",
"symbol": "V·m",

6
ui-ngx/src/typings/utils.d.ts vendored
View File

@ -19,3 +19,9 @@ type NestedKeyOf<ObjectType extends object> =
? `${Key}` | `${Key}.${NestedKeyOf<ObjectType[Key]> extends infer U extends string ? U : never}`
: `${Key}`
}[keyof ObjectType & (string | number)];
type AllKeyOf<T> = T extends never ? never : keyof T;
type Optional<T, K> = { [P in Extract<keyof T, K>]?: T[P] };
type WithOptional<T, K extends AllKeyOf<T>> = T extends never ? never : Omit<T, K> & Optional<T, K>;