UI: Added global scope variables in javascript functions

5 years ago · d08e6dba5d
12 changed files with 58 additions and 8 deletions
--- 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<Array<WidgetsBundle>> {
    return this.loadWidgetsBundleCache(config).pipe(
      map(() => this.allWidgetsBundles)
@ -311,5 +315,4 @@ export class WidgetService {
    this.loadWidgetsBundleCacheSubject = undefined;
    this.widgetTypeInfosCache.clear();
  }
-
 }
--- 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">
          </tb-js-func>
--- 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<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 {
--- 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">
    </tb-js-func>
--- 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<AppState>,
              private translate: TranslateService,
+              private widgetService: WidgetService,
              private raf: RafService) {
    super(store);
+    this.functionScopeVariables = this.widgetService.getWidgetScopeVariables();
  }

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

  registerOnChange(fn: any): void {
--- 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 @@
          <tb-js-func
            formControlName="customFunction"
            [functionArgs]="['$event', 'widgetContext', 'entityId', 'entityName', 'additionalParams', 'entityLabel']"
+            [globalVariables]="functionScopeVariables"
            [validationArgs]="[]"
            [editorCompleter]="customActionEditorCompleter"
          ></tb-js-func>
--- 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<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 {
--- a/ui-ngx/src/app/modules/home/components/widget/data-key-config.component.html
+++ b/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">
--- 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<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 {
--- 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<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]);
        }