diff --git a/ui-ngx/src/app/core/http/widget.service.ts b/ui-ngx/src/app/core/http/widget.service.ts index 41bf604177..d6de011133 100644 --- a/ui-ngx/src/app/core/http/widget.service.ts +++ b/ui-ngx/src/app/core/http/widget.service.ts @@ -68,6 +68,10 @@ export class WidgetService { ); } + public getWidgetScopeVariables(): string[] { + return ['tinycolor', 'cssjs', 'moment', '$', 'jQuery']; + } + public getAllWidgetsBundles(config?: RequestConfig): Observable> { return this.loadWidgetsBundleCache(config).pipe( map(() => this.allWidgetsBundles) @@ -311,5 +315,4 @@ export class WidgetService { this.loadWidgetsBundleCacheSubject = undefined; this.widgetTypeInfosCache.clear(); } - } diff --git a/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-editor.component.html b/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-editor.component.html index c3f0b81850..21ae07c1f6 100644 --- a/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-editor.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-editor.component.html @@ -44,6 +44,7 @@ (ngModelChange)="onActionUpdated()" [fillHeight]="true" [functionArgs]="['$event', 'widgetContext', 'entityId', 'entityName', 'htmlTemplate', 'additionalParams', 'entityLabel']" + [globalVariables]="functionScopeVariables" [validationArgs]="[]" [editorCompleter]="customPrettyActionEditorCompleter"> diff --git a/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-editor.component.ts b/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-editor.component.ts index 60b28b32da..c98ee36259 100644 --- a/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-editor.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-editor.component.ts @@ -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>; @@ -68,8 +71,10 @@ export class CustomActionPrettyEditorComponent extends PageComponent implements private propagateChange = (_: any) => {}; - constructor(protected store: Store) { + constructor(protected store: Store, + private widgetService: WidgetService) { super(store); + this.functionScopeVariables = this.widgetService.getWidgetScopeVariables(); } ngOnInit(): void { diff --git a/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.html b/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.html index 6aa835cf84..3bbed25940 100644 --- a/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.html @@ -94,6 +94,7 @@ [(ngModel)]="action.customFunction" (ngModelChange)="notifyActionUpdated()" [functionArgs]="['$event', 'widgetContext', 'entityId', 'entityName', 'htmlTemplate', 'additionalParams', 'entityLabel']" + [globalVariables]="functionScopeVariables" [validationArgs]="[]" [editorCompleter]="customPrettyActionEditorCompleter"> diff --git a/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.ts b/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.ts index 1022668fd1..5c08fb04fe 100644 --- a/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.ts @@ -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, private translate: TranslateService, + private widgetService: WidgetService, private raf: RafService) { super(store); + this.functionScopeVariables = this.widgetService.getWidgetScopeVariables(); } ngOnInit(): void { diff --git a/ui-ngx/src/app/modules/home/components/widget/action/mobile-action-editor.component.html b/ui-ngx/src/app/modules/home/components/widget/action/mobile-action-editor.component.html index cdb4615068..401dfb8bd7 100644 --- a/ui-ngx/src/app/modules/home/components/widget/action/mobile-action-editor.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/action/mobile-action-editor.component.html @@ -35,6 +35,7 @@ formControlName="getLocationFunction" functionName="getLocation" [functionArgs]="['$event', 'widgetContext', 'entityId', 'entityName', 'additionalParams', 'entityLabel']" + [globalVariables]="functionScopeVariables" [editorCompleter]="customActionEditorCompleter" > @@ -43,6 +44,7 @@ formControlName="getPhoneNumberFunction" functionName="getPhoneNumber" [functionArgs]="['$event', 'widgetContext', 'entityId', 'entityName', 'additionalParams', 'entityLabel']" + [globalVariables]="functionScopeVariables" [editorCompleter]="customActionEditorCompleter" > @@ -54,6 +56,7 @@ formControlName="processImageFunction" functionName="processImage" [functionArgs]="['imageUrl', '$event', 'widgetContext', 'entityId', 'entityName', 'additionalParams', 'entityLabel']" + [globalVariables]="functionScopeVariables" [editorCompleter]="customActionEditorCompleter" > @@ -62,6 +65,7 @@ formControlName="processQrCodeFunction" functionName="processQrCode" [functionArgs]="['code', 'format', '$event', 'widgetContext', 'entityId', 'entityName', 'additionalParams', 'entityLabel']" + [globalVariables]="functionScopeVariables" [editorCompleter]="customActionEditorCompleter" > @@ -70,6 +74,7 @@ formControlName="processLocationFunction" functionName="processLocation" [functionArgs]="['latitude', 'longitude', '$event', 'widgetContext', 'entityId', 'entityName', 'additionalParams', 'entityLabel']" + [globalVariables]="functionScopeVariables" [editorCompleter]="customActionEditorCompleter" > @@ -81,6 +86,7 @@ formControlName="processLaunchResultFunction" functionName="processLaunchResult" [functionArgs]="['launched', '$event', 'widgetContext', 'entityId', 'entityName', 'additionalParams', 'entityLabel']" + [globalVariables]="functionScopeVariables" [editorCompleter]="customActionEditorCompleter" > @@ -89,12 +95,14 @@ formControlName="handleEmptyResultFunction" functionName="handleEmptyResult" [functionArgs]="['$event', 'widgetContext', 'entityId', 'entityName', 'additionalParams', 'entityLabel']" + [globalVariables]="functionScopeVariables" [editorCompleter]="customActionEditorCompleter" > diff --git a/ui-ngx/src/app/modules/home/components/widget/action/mobile-action-editor.component.ts b/ui-ngx/src/app/modules/home/components/widget/action/mobile-action-editor.component.ts index 966268faa3..ac6b6d9577 100644 --- a/ui-ngx/src/app/modules/home/components/widget/action/mobile-action-editor.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/action/mobile-action-editor.component.ts @@ -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, - private fb: FormBuilder) { + private fb: FormBuilder, + private widgetService: WidgetService) { + this.functionScopeVariables = this.widgetService.getWidgetScopeVariables(); } registerOnChange(fn: any): void { diff --git a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html index 2c7b826200..ec475e1c3e 100644 --- a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html @@ -171,6 +171,7 @@ diff --git a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts index 8930456636..7a70c50b0e 100644 --- a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts @@ -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, 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, @@ -109,6 +113,7 @@ export class WidgetActionDialogComponent extends DialogComponent @@ -78,6 +79,7 @@ diff --git a/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.ts index 5d1eabc4e4..23aced69c7 100644 --- a/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.ts @@ -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, 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 { diff --git a/ui-ngx/src/app/shared/components/js-func.component.ts b/ui-ngx/src/app/shared/components/js-func.component.ts index a068068991..abc0bc0d21 100644 --- a/ui-ngx/src/app/shared/components/js-func.component.ts +++ b/ui-ngx/src/app/shared/components/js-func.component.ts @@ -83,6 +83,8 @@ export class JsFuncComponent implements OnInit, OnDestroy, ControlValueAccessor, @Input() editorCompleter: TbEditorCompleter; + @Input() globalVariables: Array; + 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]); }