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

UI: Added global scope variables in javascript functions

Browse Source
This commit is contained in:
Vladyslav Prykhodko 2021-09-28 08:41:39 +03:00
parent 894a1df1f6
commit d08e6dba5d
12 changed files with 58 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -68,6 +68,10 @@ export class WidgetService {
);
}
public getWidgetScopeVariables(): string[] {
return ['tinycolor', 'cssjs', 'moment', '$', 'jQuery'];
}
public getAllWidgetsBundles(config?: RequestConfig): Observable<Array<WidgetsBundle>> {
return this.loadWidgetsBundleCache(config).pipe(
map(() => this.allWidgetsBundles)
@ -311,5 +315,4 @@ export class WidgetService {
this.loadWidgetsBundleCacheSubject = undefined;
this.widgetTypeInfosCache.clear();
}
}

1
ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-editor.component.html
View File

@ -44,6 +44,7 @@
(ngModelChange)="onActionUpdated()"
[fillHeight]="true"
[functionArgs]="['$event', 'widgetContext', 'entityId', 'entityName', 'htmlTemplate', 'additionalParams', 'entityLabel']"
[globalVariables]="functionScopeVariables"
[validationArgs]="[]"
[editorCompleter]="customPrettyActionEditorCompleter">
</tb-js-func>

7
ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-editor.component.ts
View File

@ -36,6 +36,7 @@ import { AppState } from '@core/core.state';
import { combineLatest } from 'rxjs';
import { CustomActionDescriptor } from '@shared/models/widget.models';
import { CustomPrettyActionEditorCompleter } from '@home/components/widget/action/custom-action.models';
import { WidgetService } from "@core/http/widget.service";
@Component({
selector: 'tb-custom-action-pretty-editor',
@ -58,6 +59,8 @@ export class CustomActionPrettyEditorComponent extends PageComponent implements
fullscreen = false;
functionScopeVariables: string[];
@ViewChildren('leftPanel')
leftPanelElmRef: QueryList<ElementRef<HTMLElement>>;
@ -68,8 +71,10 @@ export class CustomActionPrettyEditorComponent extends PageComponent implements
private propagateChange = (_: any) => {};
constructor(protected store: Store<AppState>) {
constructor(protected store: Store<AppState>,
private widgetService: WidgetService) {
super(store);
this.functionScopeVariables = this.widgetService.getWidgetScopeVariables();
}
ngOnInit(): void {

1
ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.html
View File

@ -94,6 +94,7 @@
[(ngModel)]="action.customFunction"
(ngModelChange)="notifyActionUpdated()"
[functionArgs]="['$event', 'widgetContext', 'entityId', 'entityName', 'htmlTemplate', 'additionalParams', 'entityLabel']"
[globalVariables]="functionScopeVariables"
[validationArgs]="[]"
[editorCompleter]="customPrettyActionEditorCompleter">
</tb-js-func>

5
ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.ts
View File

@ -41,6 +41,7 @@ import { forkJoin, from } from 'rxjs';
import { map, tap } from 'rxjs/operators';
import { getAce } from '@shared/models/ace/ace.models';
import { beautifyCss, beautifyHtml } from '@shared/models/beautify.models';
import { WidgetService } from "@core/http/widget.service";
@Component({
selector: 'tb-custom-action-pretty-resources-tabs',
@ -75,12 +76,16 @@ export class CustomActionPrettyResourcesTabsComponent extends PageComponent impl
cssEditor: Ace.Editor;
setValuesPending = false;
functionScopeVariables: string[];
customPrettyActionEditorCompleter = CustomPrettyActionEditorCompleter;
constructor(protected store: Store<AppState>,
private translate: TranslateService,
private widgetService: WidgetService,
private raf: RafService) {
super(store);
this.functionScopeVariables = this.widgetService.getWidgetScopeVariables();
}
ngOnInit(): void {

8
ui-ngx/src/app/modules/home/components/widget/action/mobile-action-editor.component.html
View File

@ -35,6 +35,7 @@
formControlName="getLocationFunction"
functionName="getLocation"
[functionArgs]="['$event', 'widgetContext', 'entityId', 'entityName', 'additionalParams', 'entityLabel']"
[globalVariables]="functionScopeVariables"
[editorCompleter]="customActionEditorCompleter"
></tb-js-func>
</ng-template>
@ -43,6 +44,7 @@
formControlName="getPhoneNumberFunction"
functionName="getPhoneNumber"
[functionArgs]="['$event', 'widgetContext', 'entityId', 'entityName', 'additionalParams', 'entityLabel']"
[globalVariables]="functionScopeVariables"
[editorCompleter]="customActionEditorCompleter"
></tb-js-func>
</ng-template>
@ -54,6 +56,7 @@
formControlName="processImageFunction"
functionName="processImage"
[functionArgs]="['imageUrl', '$event', 'widgetContext', 'entityId', 'entityName', 'additionalParams', 'entityLabel']"
[globalVariables]="functionScopeVariables"
[editorCompleter]="customActionEditorCompleter"
></tb-js-func>
</ng-template>
@ -62,6 +65,7 @@
formControlName="processQrCodeFunction"
functionName="processQrCode"
[functionArgs]="['code', 'format', '$event', 'widgetContext', 'entityId', 'entityName', 'additionalParams', 'entityLabel']"
[globalVariables]="functionScopeVariables"
[editorCompleter]="customActionEditorCompleter"
></tb-js-func>
</ng-template>
@ -70,6 +74,7 @@
formControlName="processLocationFunction"
functionName="processLocation"
[functionArgs]="['latitude', 'longitude', '$event', 'widgetContext', 'entityId', 'entityName', 'additionalParams', 'entityLabel']"
[globalVariables]="functionScopeVariables"
[editorCompleter]="customActionEditorCompleter"
></tb-js-func>
</ng-template>
@ -81,6 +86,7 @@
formControlName="processLaunchResultFunction"
functionName="processLaunchResult"
[functionArgs]="['launched', '$event', 'widgetContext', 'entityId', 'entityName', 'additionalParams', 'entityLabel']"
[globalVariables]="functionScopeVariables"
[editorCompleter]="customActionEditorCompleter"
></tb-js-func>
</ng-template>
@ -89,12 +95,14 @@
formControlName="handleEmptyResultFunction"
functionName="handleEmptyResult"
[functionArgs]="['$event', 'widgetContext', 'entityId', 'entityName', 'additionalParams', 'entityLabel']"
[globalVariables]="functionScopeVariables"
[editorCompleter]="customActionEditorCompleter"
></tb-js-func>
<tb-js-func *ngIf="mobileActionFormGroup.get('type').value"
formControlName="handleErrorFunction"
functionName="handleError"
[functionArgs]="['error', '$event', 'widgetContext', 'entityId', 'entityName', 'additionalParams', 'entityLabel']"
[globalVariables]="functionScopeVariables"
[editorCompleter]="customActionEditorCompleter"
></tb-js-func>
</div>

19
ui-ngx/src/app/modules/home/components/widget/action/mobile-action-editor.component.ts
View File

@ -14,26 +14,29 @@
/// limitations under the License.
///
import { Component, forwardRef, Input, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
import { Component, forwardRef, Input, OnInit, QueryList, ViewChildren } from '@angular/core';
import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
import { Store } from '@ngrx/store';
import { AppState } from '@app/core/core.state';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { deepClone } from '@core/utils';
import {
WidgetMobileActionDescriptor,
WidgetMobileActionType, widgetMobileActionTypeTranslationMap
WidgetMobileActionType,
widgetMobileActionTypeTranslationMap
} from '@shared/models/widget.models';
import { CustomActionEditorCompleter } from '@home/components/widget/action/custom-action.models';
import { JsFuncComponent } from '@shared/components/js-func.component';
import {
getDefaultGetLocationFunction, getDefaultGetPhoneNumberFunction,
getDefaultGetLocationFunction,
getDefaultGetPhoneNumberFunction,
getDefaultHandleEmptyResultFunction,
getDefaultHandleErrorFunction,
getDefaultProcessImageFunction,
getDefaultProcessLaunchResultFunction, getDefaultProcessLocationFunction,
getDefaultProcessLaunchResultFunction,
getDefaultProcessLocationFunction,
getDefaultProcessQrCodeFunction
} from '@home/components/widget/action/mobile-action-editor.models';
import { WidgetService } from "@core/http/widget.service";
@Component({
selector: 'tb-mobile-action-editor',
@ -58,6 +61,8 @@ export class MobileActionEditorComponent implements ControlValueAccessor, OnInit
mobileActionFormGroup: FormGroup;
mobileActionTypeFormGroup: FormGroup;
functionScopeVariables: string[];
private requiredValue: boolean;
get required(): boolean {
return this.requiredValue;
@ -73,7 +78,9 @@ export class MobileActionEditorComponent implements ControlValueAccessor, OnInit
private propagateChange = (v: any) => { };
constructor(private store: Store<AppState>,
private fb: FormBuilder) {
private fb: FormBuilder,
private widgetService: WidgetService) {
this.functionScopeVariables = this.widgetService.getWidgetScopeVariables();
}
registerOnChange(fn: any): void {

1
ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html
View File

@ -171,6 +171,7 @@
<tb-js-func
formControlName="customFunction"
[functionArgs]="['$event', 'widgetContext', 'entityId', 'entityName', 'additionalParams', 'entityLabel']"
[globalVariables]="functionScopeVariables"
[validationArgs]="[]"
[editorCompleter]="customActionEditorCompleter"
></tb-js-func>

5
ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
View File

@ -47,6 +47,7 @@ import { CustomActionEditorCompleter } from '@home/components/widget/action/cust
import { isDefinedAndNotNull } from '@core/utils';
import { MobileActionEditorComponent } from '@home/components/widget/action/mobile-action-editor.component';
import { widgetType } from '@shared/models/widget.models';
import { WidgetService } from "@core/http/widget.service";
export interface WidgetActionDialogData {
isAdd: boolean;
@ -88,11 +89,14 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
submitted = false;
widgetType = widgetType;
functionScopeVariables: string[];
constructor(protected store: Store<AppState>,
protected router: Router,
private utils: UtilsService,
private dashboardService: DashboardService,
private dashboardUtils: DashboardUtilsService,
private widgetService: WidgetService,
@Inject(MAT_DIALOG_DATA) public data: WidgetActionDialogData,
@SkipSelf() private errorStateMatcher: ErrorStateMatcher,
public dialogRef: MatDialogRef<WidgetActionDialogComponent, WidgetActionDescriptorInfo>,
@ -109,6 +113,7 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
} else {
this.action = this.data.action;
}
this.functionScopeVariables = this.widgetService.getWidgetScopeVariables();
}
ngOnInit(): void {

2
ui-ngx/src/app/modules/home/components/widget/data-key-config.component.html
View File

@ -67,6 +67,7 @@
<br/>
<tb-js-func #funcBodyEdit
[functionArgs]="['time', 'prevValue']"
[globalVariables]="functionScopeVariables"
[validationArgs]="[[1, 1],[1, '1']]"
resultType="any"
formControlName="funcBody">
@ -78,6 +79,7 @@
</mat-checkbox>
<tb-js-func *ngIf="dataKeyFormGroup.get('usePostProcessing').value" #postFuncBodyEdit
[functionArgs]="['time', 'value', 'prevValue', 'timePrev', 'prevOrigValue']"
[globalVariables]="functionScopeVariables"
[validationArgs]="[[1, 1, 1, 1, 1],[1, '1', '1', 1, '1']]"
resultType="any"
formControlName="postFuncBody">

5
ui-ngx/src/app/modules/home/components/widget/data-key-config.component.ts
View File

@ -40,6 +40,7 @@ import { map, mergeMap, publishReplay, refCount, tap } from 'rxjs/operators';
import { alarmFields } from '@shared/models/alarm.models';
import { JsFuncComponent } from '@shared/components/js-func.component';
import { JsonFormComponentData } from '@shared/components/json-form/json-form-component.models';
import { WidgetService } from "@core/http/widget.service";
@Component({
selector: 'tb-data-key-config',
@ -99,13 +100,17 @@ export class DataKeyConfigComponent extends PageComponent implements OnInit, Con
keySearchText = '';
functionScopeVariables: string[];
constructor(protected store: Store<AppState>,
private utils: UtilsService,
private entityService: EntityService,
private dialog: MatDialog,
private translate: TranslateService,
private widgetService: WidgetService,
private fb: FormBuilder) {
super(store);
this.functionScopeVariables = this.widgetService.getWidgetScopeVariables();
}
ngOnInit(): void {

7
ui-ngx/src/app/shared/components/js-func.component.ts
View File

@ -83,6 +83,8 @@ export class JsFuncComponent implements OnInit, OnDestroy, ControlValueAccessor,
@Input() editorCompleter: TbEditorCompleter;
@Input() globalVariables: Array<string>;
private noValidateValue: boolean;
get noValidate(): boolean {
return this.noValidateValue;
@ -190,6 +192,11 @@ export class JsFuncComponent implements OnInit, OnDestroy, ControlValueAccessor,
jsWorkerOptions.globals[arg] = false;
});
}
if (this.globalVariables) {
this.globalVariables.forEach(arg => {
jsWorkerOptions.globals[arg] = false;
});
}
// @ts-ignore
this.jsEditor.session.$worker.send('changeOptions', [jsWorkerOptions]);
}