mpetrov
2 years ago
18 changed files with 527 additions and 12 deletions
@ -0,0 +1,36 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2024 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<div class="flex flex-col gap-2 px-4"> |
|||
<div>{{ 'calculated-fields.arguments' | translate }}</div> |
|||
<div class="tb-form-table"> |
|||
<div class="tb-form-table-header"> |
|||
<div class="tb-form-table-header-cell w-1/4">{{ 'calculated-fields.argument-name' | translate }}</div> |
|||
<div class="tb-form-table-header-cell flex-1">{{ 'common.value' | translate }}</div> |
|||
</div> |
|||
<div class="tb-form-table-body"> |
|||
@for (group of argumentsFormArray.controls; track group) { |
|||
<div [formGroup]="group" class="tb-form-table-row"> |
|||
<mat-form-field appearance="outline" class="tb-inline-field w-1/4" subscriptSizing="dynamic"> |
|||
<input matInput formControlName="argumentName" placeholder="{{ 'action.set' | translate }}"> |
|||
</mat-form-field> |
|||
<tb-value-input class="flex-1" formControlName="value"/> |
|||
</div> |
|||
} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,88 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { Component, forwardRef } from '@angular/core'; |
|||
import { |
|||
ControlValueAccessor, |
|||
NG_VALIDATORS, |
|||
NG_VALUE_ACCESSOR, |
|||
Validator, |
|||
ValidationErrors, |
|||
FormBuilder, |
|||
FormGroup |
|||
} from '@angular/forms'; |
|||
import { PageComponent } from '@shared/components/page.component'; |
|||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-calculated-field-test-arguments', |
|||
templateUrl: './calculated-field-test-arguments.component.html', |
|||
providers: [ |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => CalculatedFieldTestArgumentsComponent), |
|||
multi: true |
|||
}, |
|||
{ |
|||
provide: NG_VALIDATORS, |
|||
useExisting: forwardRef(() => CalculatedFieldTestArgumentsComponent), |
|||
multi: true, |
|||
} |
|||
] |
|||
}) |
|||
export class CalculatedFieldTestArgumentsComponent extends PageComponent implements ControlValueAccessor, Validator { |
|||
|
|||
|
|||
argumentsFormArray = this.fb.array<FormGroup>([]); |
|||
|
|||
private propagateChange: (value: { argumentName: string; value: unknown }) => void; |
|||
|
|||
constructor(private fb: FormBuilder) { |
|||
super(); |
|||
this.argumentsFormArray.valueChanges |
|||
.pipe(takeUntilDestroyed()) |
|||
.subscribe(() => this.propagateChange(this.getValue())); |
|||
} |
|||
|
|||
registerOnChange(propagateChange: (value: { argumentName: string; value: unknown }) => void): void { |
|||
this.propagateChange = propagateChange; |
|||
} |
|||
|
|||
registerOnTouched(_): void { |
|||
} |
|||
|
|||
writeValue(argumentsObj: Record<string, unknown>): void { |
|||
this.argumentsFormArray.clear(); |
|||
Object.keys(argumentsObj).forEach(key => { |
|||
this.argumentsFormArray.push(this.fb.group({ |
|||
argumentName: [{ value: key, disabled: true}], |
|||
value: [argumentsObj[key]] |
|||
}) as FormGroup, {emitEvent: false}); |
|||
}); |
|||
} |
|||
|
|||
validate(): ValidationErrors | null { |
|||
return this.argumentsFormArray.valid ? null : { arguments: { valid: false } }; |
|||
} |
|||
|
|||
private getValue(): { argumentName: string; value: unknown } { |
|||
return this.argumentsFormArray.getRawValue().reduce((acc, rowItem) => { |
|||
const { argumentName, value } = rowItem; |
|||
acc[argumentName] = value; |
|||
return acc; |
|||
}, {}) as { argumentName: string; value: unknown }; |
|||
} |
|||
} |
|||
@ -0,0 +1,101 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2024 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<form class="test-dialog-container size-full" [formGroup]="calculatedFieldScriptTestFormGroup"> |
|||
<mat-toolbar class="flex justify-between" color="primary"> |
|||
<h2>{{ 'calculated-fields.test-script-function' | translate }} ({{ 'TBEL' }})</h2> |
|||
<button mat-icon-button |
|||
(click)="cancel()" |
|||
type="button"> |
|||
<mat-icon class="material-icons">close</mat-icon> |
|||
</button> |
|||
</mat-toolbar> |
|||
<div mat-dialog-content class="relative"> |
|||
<div class="tb-absolute-fill"> |
|||
<div class="tb-fullscreen-panel flex size-full flex-row"> |
|||
<div #leftPanel class="test-block-content overflow-hidden"> |
|||
<div class="relative size-full min-w-64"> |
|||
<div class="absolute right-28 top-[9px] z-10 text-[12px] font-bold"> |
|||
<span class="block-label">{{ 'calculated-fields.expression' | translate }}</span> |
|||
</div> |
|||
<tb-js-func |
|||
#expressionContent |
|||
formControlName="expression" |
|||
functionName="calculate" |
|||
[functionArgs]="functionArgs" |
|||
[disableUndefinedCheck]="true" |
|||
[fillHeight]="true" |
|||
[scriptLanguage]="ScriptLanguage.TBEL" |
|||
resultType="object" |
|||
helpId="[TODO]: [Calculated Fields] add valid link" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div #rightPanel> |
|||
<div #topRightPanel class="test-block-content"> |
|||
<div class="relative flex size-full min-w-96 gap-2"> |
|||
<div class="absolute right-4 top-[6px] z-10 text-[12px] font-bold"> |
|||
<span class="block-label">{{ 'calculated-fields.arguments' | translate }}</span> |
|||
</div> |
|||
<tb-calculated-field-test-arguments formControlName="arguments"/> |
|||
</div> |
|||
</div> |
|||
<div #bottomRightPanel class="test-block-content"> |
|||
<div class="relative size-full"> |
|||
<div class="absolute right-10 top-[6px] z-10 text-[12px] font-bold"> |
|||
<span class="block-label" translate>common.output</span> |
|||
</div> |
|||
<tb-json-content |
|||
class="flex-1" |
|||
formControlName="output" |
|||
label="{{ 'common.output' | translate }}" |
|||
[contentType]="ContentType.JSON" |
|||
validateContent="false" |
|||
readonly="true" |
|||
[fillHeight]="true" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div mat-dialog-actions class="flex flex-row"> |
|||
<button mat-button mat-raised-button color="primary" |
|||
type="button" |
|||
(click)="onTestScript()" |
|||
[disabled]="(isLoading$ | async) || calculatedFieldScriptTestFormGroup.invalid"> |
|||
{{ 'action.test' | translate }} |
|||
</button> |
|||
<span class="flex-1"></span> |
|||
<button mat-button color="primary" |
|||
type="button" |
|||
cdkFocusInitial |
|||
[disabled]="(isLoading$ | async)" |
|||
(click)="cancel()"> |
|||
{{ 'action.cancel' | translate }} |
|||
</button> |
|||
@if (data.withApply) { |
|||
<button mat-button mat-raised-button color="primary" |
|||
type="submit" |
|||
(click)="save()" |
|||
[disabled]="(isLoading$ | async) || calculatedFieldScriptTestFormGroup.get('expression').invalid || !calculatedFieldScriptTestFormGroup.get('expression').dirty"> |
|||
{{ 'action.save' | translate }} |
|||
</button> |
|||
} |
|||
</div> |
|||
</form> |
|||
@ -0,0 +1,51 @@ |
|||
/** |
|||
* Copyright © 2016-2024 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
:host { |
|||
.test-dialog-container { |
|||
.block-label { |
|||
padding: 4px; |
|||
color: #00acc1; |
|||
background: rgba(220, 220, 220, .35); |
|||
border-radius: 5px; |
|||
} |
|||
|
|||
.test-block-content { |
|||
padding-top: 5px; |
|||
padding-left: 5px; |
|||
border: 1px solid #c0c0c0; |
|||
} |
|||
} |
|||
} |
|||
|
|||
:host::ng-deep { |
|||
.test-dialog-container { |
|||
.gutter { |
|||
background-color: #eee; |
|||
background-repeat: no-repeat; |
|||
background-position: 50%; |
|||
} |
|||
|
|||
.gutter.gutter-horizontal { |
|||
cursor: col-resize; |
|||
background-image: url("../../../../../../../assets/split.js/grips/horizontal.png"); |
|||
} |
|||
|
|||
.gutter.gutter-vertical { |
|||
cursor: row-resize; |
|||
background-image: url("../../../../../../../assets/split.js/grips/vertical.png"); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,154 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { |
|||
AfterViewInit, |
|||
Component, |
|||
DestroyRef, |
|||
ElementRef, |
|||
Inject, |
|||
ViewChild, |
|||
} from '@angular/core'; |
|||
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { FormBuilder } from '@angular/forms'; |
|||
import { NEVER, Observable, of, switchMap } from 'rxjs'; |
|||
import { Router } from '@angular/router'; |
|||
import { DialogComponent } from '@shared/components/dialog.component'; |
|||
import { ContentType } from '@shared/models/constants'; |
|||
import { JsonContentComponent } from '@shared/components/json-content.component'; |
|||
import { ScriptLanguage } from '@shared/models/rule-node.models'; |
|||
import { ActionNotificationShow } from '@core/notification/notification.actions'; |
|||
import { beautifyJs } from '@shared/models/beautify.models'; |
|||
import { CalculatedFieldsService } from '@core/http/calculated-fields.service'; |
|||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
|||
import { CalculatedFieldScriptTestDialogData } from '@shared/models/calculated-field.models'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-calculated-field-script-test-dialog', |
|||
templateUrl: './calculated-field-script-test-dialog.component.html', |
|||
styleUrls: ['./calculated-field-script-test-dialog.component.scss'], |
|||
}) |
|||
export class CalculatedFieldScriptTestDialogComponent extends DialogComponent<CalculatedFieldScriptTestDialogComponent, |
|||
string> implements AfterViewInit { |
|||
|
|||
@ViewChild('leftPanel', {static: true}) leftPanelElmRef: ElementRef<HTMLElement>; |
|||
@ViewChild('rightPanel', {static: true}) rightPanelElmRef: ElementRef<HTMLElement>; |
|||
@ViewChild('topRightPanel', {static: true}) topRightPanelElmRef: ElementRef<HTMLElement>; |
|||
@ViewChild('bottomRightPanel', {static: true}) bottomRightPanelElmRef: ElementRef<HTMLElement>; |
|||
|
|||
@ViewChild('expressionContent', {static: true}) expressionContent: JsonContentComponent; |
|||
|
|||
calculatedFieldScriptTestFormGroup = this.fb.group({ |
|||
expression: [], |
|||
arguments: [], |
|||
output: [] |
|||
}); |
|||
|
|||
readonly ContentType = ContentType; |
|||
readonly ScriptLanguage = ScriptLanguage; |
|||
readonly functionArgs = Object.keys(this.data.arguments); |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
protected router: Router, |
|||
@Inject(MAT_DIALOG_DATA) public data: CalculatedFieldScriptTestDialogData, |
|||
protected dialogRef: MatDialogRef<CalculatedFieldScriptTestDialogComponent, string>, |
|||
private fb: FormBuilder, |
|||
private destroyRef: DestroyRef, |
|||
private calculatedFieldService: CalculatedFieldsService) { |
|||
super(store, router, dialogRef); |
|||
beautifyJs(this.data.expression, {indent_size: 4}).pipe(takeUntilDestroyed()).subscribe( |
|||
(res) => { |
|||
this.calculatedFieldScriptTestFormGroup.get('expression').patchValue(res, {emitEvent: false}); |
|||
} |
|||
); |
|||
this.calculatedFieldScriptTestFormGroup.get('arguments').patchValue(this.data.arguments, {emitEvent: false}); |
|||
} |
|||
|
|||
ngAfterViewInit(): void { |
|||
this.initSplitLayout( |
|||
this.leftPanelElmRef.nativeElement, |
|||
this.rightPanelElmRef.nativeElement, |
|||
this.topRightPanelElmRef.nativeElement, |
|||
this.bottomRightPanelElmRef.nativeElement |
|||
); |
|||
} |
|||
|
|||
cancel(): void { |
|||
this.dialogRef.close(null); |
|||
} |
|||
|
|||
onTestScript(): void { |
|||
this.testScript() |
|||
.pipe( |
|||
switchMap(output => beautifyJs(output, {indent_size: 4})), |
|||
takeUntilDestroyed(this.destroyRef) |
|||
) |
|||
.subscribe(output => this.calculatedFieldScriptTestFormGroup.get('output').setValue(output)); |
|||
} |
|||
|
|||
save(): void { |
|||
this.testScript().pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => { |
|||
this.calculatedFieldScriptTestFormGroup.get('expression').markAsPristine(); |
|||
this.dialogRef.close(this.calculatedFieldScriptTestFormGroup.get('expression').value); |
|||
}); |
|||
} |
|||
|
|||
private testScript(): Observable<string> { |
|||
if (this.checkInputParamErrors()) { |
|||
return this.calculatedFieldService.testScript({ |
|||
expression: this.calculatedFieldScriptTestFormGroup.get('expression').value, |
|||
arguments: this.calculatedFieldScriptTestFormGroup.get('arguments').value |
|||
}).pipe( |
|||
switchMap(result => { |
|||
if (result.error) { |
|||
this.store.dispatch(new ActionNotificationShow( |
|||
{ |
|||
message: result.error, |
|||
type: 'error' |
|||
})); |
|||
return NEVER; |
|||
} else { |
|||
return of(result.output); |
|||
} |
|||
}), |
|||
); |
|||
} else { |
|||
return NEVER; |
|||
} |
|||
} |
|||
|
|||
private checkInputParamErrors(): boolean { |
|||
this.expressionContent.validateOnSubmit(); |
|||
return !this.calculatedFieldScriptTestFormGroup.get('expression').invalid; |
|||
} |
|||
|
|||
private initSplitLayout(leftPanel, rightPanel, topRightPanel, bottomRightPanel): void { |
|||
Split([leftPanel, rightPanel], { |
|||
sizes: [50, 50], |
|||
gutterSize: 8, |
|||
cursor: 'col-resize' |
|||
}); |
|||
|
|||
Split([topRightPanel, bottomRightPanel], { |
|||
sizes: [50, 50], |
|||
gutterSize: 8, |
|||
cursor: 'row-resize', |
|||
direction: 'vertical' |
|||
}); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue