UI: Added global scope variables in javascript functions

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<Array<WidgetsBundle>> {
     return this.loadWidgetsBundleCache(config).pipe(
       map(() => this.allWidgetsBundles)
@@ -311,5 +315,4 @@ export class WidgetService {
     this.loadWidgetsBundleCacheSubject = undefined;
     this.widgetTypeInfosCache.clear();
   }
-
 }

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">
           </tb-js-func>

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<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 {

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">
     </tb-js-func>

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<AppState>,
               private translate: TranslateService,
+              private widgetService: WidgetService,
               private raf: RafService) {
     super(store);
+    this.functionScopeVariables = this.widgetService.getWidgetScopeVariables();
   }
 
   ngOnInit(): void {

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"
       ></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>

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<AppState>,
-              private fb: FormBuilder) {
+              private fb: FormBuilder,
+              private widgetService: WidgetService) {
+    this.functionScopeVariables = this.widgetService.getWidgetScopeVariables();
   }
 
   registerOnChange(fn: any): void {

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

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

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<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 {

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

@@ -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">

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<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 {

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<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]);
         }