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

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2021-09-28 10:33:31 +03:00
parent d08e6dba5d
commit b29e208b95
8 changed files with 25 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -44,7 +44,7 @@
(ngModelChange)="onActionUpdated()"
[fillHeight]="true"
[functionArgs]="['$event', 'widgetContext', 'entityId', 'entityName', 'htmlTemplate', 'additionalParams', 'entityLabel']"
[globalVariables]="functionScopeVariables"
[disableUndefinedCheck]="true"
[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,7 +36,6 @@ 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',
@ -59,8 +58,6 @@ export class CustomActionPrettyEditorComponent extends PageComponent implements
fullscreen = false;
functionScopeVariables: string[];
@ViewChildren('leftPanel')
leftPanelElmRef: QueryList<ElementRef<HTMLElement>>;
@ -71,10 +68,8 @@ export class CustomActionPrettyEditorComponent extends PageComponent implements
private propagateChange = (_: any) => {};
constructor(protected store: Store<AppState>,
private widgetService: WidgetService) {
constructor(protected store: Store<AppState>) {
super(store);
this.functionScopeVariables = this.widgetService.getWidgetScopeVariables();
}
ngOnInit(): void {

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

@ -94,7 +94,7 @@
[(ngModel)]="action.customFunction"
(ngModelChange)="notifyActionUpdated()"
[functionArgs]="['$event', 'widgetContext', 'entityId', 'entityName', 'htmlTemplate', 'additionalParams', 'entityLabel']"
[globalVariables]="functionScopeVariables"
[disableUndefinedCheck]="true"
[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,7 +41,6 @@ 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',
@ -76,16 +75,12 @@ 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 {

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

@ -36,7 +36,7 @@ import {
getDefaultProcessLocationFunction,
getDefaultProcessQrCodeFunction
} from '@home/components/widget/action/mobile-action-editor.models';
import { WidgetService } from "@core/http/widget.service";
import { WidgetService } from '@core/http/widget.service';
@Component({
selector: 'tb-mobile-action-editor',

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

@ -47,7 +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";
import { WidgetService } from '@core/http/widget.service';
export interface WidgetActionDialogData {
isAdd: boolean;

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

@ -40,7 +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";
import { WidgetService } from '@core/http/widget.service';
@Component({
selector: 'tb-data-key-config',

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

@ -85,6 +85,8 @@ export class JsFuncComponent implements OnInit, OnDestroy, ControlValueAccessor,
@Input() globalVariables: Array<string>;
@Input() disableUndefinedCheck = false;
private noValidateValue: boolean;
get noValidate(): boolean {
return this.noValidateValue;
@ -167,32 +169,34 @@ export class JsFuncComponent implements OnInit, OnDestroy, ControlValueAccessor,
this.updateView();
}
});
// @ts-ignore
this.jsEditor.session.on('changeAnnotation', () => {
const annotations = this.jsEditor.session.getAnnotations();
annotations.filter(annotation => annotation.text.includes('is not defined')).forEach(annotation => {
annotation.type = 'error';
if (!this.disableUndefinedCheck) {
// @ts-ignore
this.jsEditor.session.on('changeAnnotation', () => {
const annotations = this.jsEditor.session.getAnnotations();
annotations.filter(annotation => annotation.text.includes('is not defined')).forEach(annotation => {
annotation.type = 'error';
});
this.jsEditor.renderer.setAnnotations(annotations);
const hasErrors = annotations.filter(annotation => annotation.type === 'error').length > 0;
if (this.hasErrors !== hasErrors) {
this.hasErrors = hasErrors;
this.propagateChange(this.modelValue);
}
});
this.jsEditor.renderer.setAnnotations(annotations);
const hasErrors = annotations.filter(annotation => annotation.type === 'error').length > 0;
if (this.hasErrors !== hasErrors) {
this.hasErrors = hasErrors;
this.propagateChange(this.modelValue);
}
});
}
// @ts-ignore
if (!!this.jsEditor.session.$worker) {
const jsWorkerOptions = {
undef: true,
undef: !this.disableUndefinedCheck,
unused: true,
globals: {}
};
if (this.functionArgs) {
if (!this.disableUndefinedCheck && this.functionArgs) {
this.functionArgs.forEach(arg => {
jsWorkerOptions.globals[arg] = false;
});
}
if (this.globalVariables) {
if (!this.disableUndefinedCheck && this.globalVariables) {
this.globalVariables.forEach(arg => {
jsWorkerOptions.globals[arg] = false;
});