From 16c2f5af60c8155d41e260884ca2b57c08e5c059 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Tue, 28 May 2024 19:16:46 +0300 Subject: [PATCH] UI: Improve SCADA synbol tags functions. --- .../widget/lib/svg/iot-svg.models.ts | 6 ++--- .../scada-symbol-metadata-tag.component.html | 2 +- .../scada-symbol-metadata-tag.component.ts | 25 +++++++++++++++---- .../scada-symbol-metadata-tags.component.ts | 6 ++--- .../scada-symbol-metadata.component.scss | 3 +++ .../pages/scada-symbol/scada-symbol.models.ts | 25 +++++++++---------- 6 files changed, 42 insertions(+), 25 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts index 61fdcb9b58..f2ed7c201b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts @@ -67,7 +67,7 @@ export type IotSvgTagStateRenderFunction = (ctx: IotSvgContext, element: Element export type IotSvgActionTrigger = 'click'; -export type IotSvgActionFunction = (ctx: IotSvgContext, event: Event) => void; +export type IotSvgActionFunction = (ctx: IotSvgContext, element: Element, event: Event) => void; export interface IotSvgAction { actionFunction?: string; action?: IotSvgActionFunction; @@ -427,7 +427,7 @@ export class IotSvgObject { if (tag.actions) { for (const trigger of Object.keys(tag.actions)) { const action = tag.actions[trigger]; - action.action = parseFunction(action.actionFunction, ['ctx', 'event']) || (() => {}); + action.action = parseFunction(action.actionFunction, ['ctx', 'element', 'event']) || (() => {}); } } } @@ -483,7 +483,7 @@ export class IotSvgObject { elements.forEach(element => { element.attr('cursor', 'pointer'); element.on(trigger, (event) => { - action.action(this.context, event); + action.action(this.context, element, event); }); }); } diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.html b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.html index 88302152c5..20dfc9b203 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.html +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.html @@ -71,7 +71,7 @@ [objectHighlightRules]="scadaSymbolClickActionHighlightRules" [propertyHighlightRules]="scadaSymbolClickActionPropertiesHighlightRules" [editorCompleter]="clickActionFunctionCompleter" - [functionArgs]="['ctx', 'event']" + [functionArgs]="['ctx', 'element', 'event']" helpId="widget/lib/timeseries/cell_style_fn"> diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts index 7b5e36266b..91de73e76c 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.ts @@ -15,7 +15,6 @@ /// import { - ChangeDetectorRef, Component, EventEmitter, forwardRef, @@ -29,9 +28,12 @@ import { } from '@angular/core'; import { ControlValueAccessor, + NG_VALIDATORS, NG_VALUE_ACCESSOR, UntypedFormBuilder, + UntypedFormControl, UntypedFormGroup, + Validator, Validators } from '@angular/forms'; import { IotSvgTag } from '@home/components/widget/lib/svg/iot-svg.models'; @@ -55,11 +57,16 @@ import { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ScadaSymbolMetadataTagComponent), multi: true + }, + { + provide: NG_VALIDATORS, + useExisting: forwardRef(() => ScadaSymbolMetadataTagComponent), + multi: true } ], encapsulation: ViewEncapsulation.None }) -export class ScadaSymbolMetadataTagComponent implements ControlValueAccessor, OnInit, OnChanges { +export class ScadaSymbolMetadataTagComponent implements ControlValueAccessor, OnInit, OnChanges, Validator { @ViewChild('tagSelect') tagSelect: MatSelect; @@ -108,8 +115,7 @@ export class ScadaSymbolMetadataTagComponent implements ControlValueAccessor, On private propagateChange = (_val: any) => {}; - constructor(private fb: UntypedFormBuilder, - private cd: ChangeDetectorRef) { + constructor(private fb: UntypedFormBuilder) { } ngOnInit() { @@ -143,7 +149,7 @@ export class ScadaSymbolMetadataTagComponent implements ControlValueAccessor, On this.propagateChange = fn; } - registerOnTouched(fn: any): void { + registerOnTouched(_fn: any): void { } setDisabledState(isDisabled: boolean): void { @@ -170,6 +176,15 @@ export class ScadaSymbolMetadataTagComponent implements ControlValueAccessor, On ); } + public validate(_c: UntypedFormControl) { + const valid = this.tagFormGroup.valid; + return valid ? null : { + tag: { + valid: false, + }, + }; + } + editTagStateRenderFunction(): void { this.openPanelWithCallback(this.expansionPanel, () => { this.openPanelWithCallback(this.renderFunctionExpansionPanel, () => { diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.ts index 3d77c90d0b..ae0a75b69f 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tags.component.ts @@ -131,7 +131,7 @@ export class ScadaSymbolMetadataTagsComponent implements ControlValueAccessor, O this.propagateChange = fn; } - registerOnTouched(fn: any): void { + registerOnTouched(_fn: any): void { } setDisabledState(isDisabled: boolean): void { @@ -148,7 +148,7 @@ export class ScadaSymbolMetadataTagsComponent implements ControlValueAccessor, O this.tagsFormGroup.setControl('tags', this.prepareTagsFormArray(tags), {emitEvent: false}); } - public validate(c: UntypedFormControl) { + public validate(_c: UntypedFormControl) { const valid = this.tagsFormGroup.valid; return valid ? null : { tags: { @@ -161,7 +161,7 @@ export class ScadaSymbolMetadataTagsComponent implements ControlValueAccessor, O return this.tagsFormGroup.get('tags') as UntypedFormArray; } - trackByTag(index: number, tagControl: AbstractControl): any { + trackByTag(_index: number, tagControl: AbstractControl): any { return tagControl; } diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.scss b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.scss index 75ab006bc0..2fec4381cc 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.scss +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata.component.scss @@ -73,6 +73,9 @@ } } } +} + +.tb-js-func { .ace_tb { &.ace_scada-symbol { &-ctx { diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts index 421ddce343..72571662f5 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.models.ts @@ -762,26 +762,26 @@ export class ScadaSymbolElement { const scadaSymbolCtxObjectHighlightRules: TbHighlightRule[] = [ { class: 'scada-symbol-ctx', - regex: /(?<=\W|^)(ctx)(?=\.)\b/ + regex: /(?<=\W|^)(ctx)(?=\W|$)\b/ } ]; export const scadaSymbolGeneralStateRenderHighlightRules: TbHighlightRule[] = scadaSymbolCtxObjectHighlightRules.concat({ class: 'scada-symbol-svg', - regex: /(?<=\W|^)(svg)(?=\.)\b/ + regex: /(?<=\W|^)(svg)(?=\W|$)\b/ }); export const scadaSymbolElementStateRenderHighlightRules: TbHighlightRule[] = scadaSymbolCtxObjectHighlightRules.concat({ class: 'scada-symbol-element', - regex: /(?<=\W|^)(element)(?=\.)\b/ + regex: /(?<=\W|^)(element)(?=\W|$)\b/ }); export const scadaSymbolClickActionHighlightRules: TbHighlightRule[] = - scadaSymbolCtxObjectHighlightRules.concat({ + scadaSymbolElementStateRenderHighlightRules.concat({ class: 'scada-symbol-event', - regex: /(?<=\W|^)(event)(?=\.)\b/ + regex: /(?<=\W|^)(event)(?=\W|$)\b/ }); const scadaSymbolCtxPropertyHighlightRules: TbHighlightRule[] = [ @@ -832,7 +832,7 @@ export const scadaSymbolElementStateRenderPropertiesHighlightRules: TbHighlightR }); export const scadaSymbolClickActionPropertiesHighlightRules: TbHighlightRule[] = - scadaSymbolCtxPropertyHighlightRules.concat({ + scadaSymbolElementStateRenderPropertiesHighlightRules.concat({ class: 'scada-symbol-event-properties', regex: /(?<=event\.)([a-zA-Z\$_\u00a1-\uffff][a-zA-Z\d\$_\u00a1-\uffff]*)\b/ }); @@ -860,14 +860,13 @@ export const elementStateRenderFunctionCompletions = (ctxCompletion: TbEditorCom }; export const clickActionFunctionCompletions = (ctxCompletion: TbEditorCompletion): TbEditorCompletions => { - return { - ctx: ctxCompletion, - event: { - meta: 'argument', - type: 'Event', - description: 'DOM event.' - }, + const completions = elementStateRenderFunctionCompletions(ctxCompletion); + completions.event = { + meta: 'argument', + type: 'Event', + description: 'DOM event.' }; + return completions; }; export const iotSvgContextCompletion = (metadata: IotSvgMetadata, tags: string[],