dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Update tags list on save SCADA symbol in XML mode. Fix SCADA symbol editor layout. Revert input field form style.

Browse Source
This commit is contained in:
Igor Kulikov 2024-09-20 19:35:51 +03:00
parent 26f9fae3e0
commit 66bf460aa8
6 changed files with 34 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts
View File

@ -234,6 +234,8 @@ const svgPartsRegex = /(<svg.*?>)(.*)<\/svg>/gms;
const tbNamespaceRegex = /<svg.*(xmlns:tb="https:\/\/thingsboard.io\/svg").*>/gms;
const tbTagRegex = /tb:tag="([^"]*)"/gms;
const generateElementId = () => {
const id = guid();
const firstChar = id.charAt(0);
@ -279,6 +281,17 @@ export const parseScadaSymbolMetadataFromContent = (svgContent: string): ScadaSy
}
};
export const parseScadaSymbolsTagsFromContent = (svgContent: string): string[] => {
const tags: string[] = [];
tbTagRegex.lastIndex = 0;
let tagsMatch = tbTagRegex.exec(svgContent);
while (tagsMatch !== null) {
tags.push(tagsMatch[1]);
tagsMatch = tbTagRegex.exec(svgContent);
}
return tags.filter((v, i, arr) => arr.indexOf(v) === i);
};
const parseScadaSymbolMetadataFromDom = (svgDoc: Document): ScadaSymbolMetadata => {
try {
const elements = svgDoc.getElementsByTagName('tb:metadata');

13
ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts
View File

@ -35,7 +35,10 @@ import {
} from '@home/pages/scada-symbol/scada-symbol-editor.models';
import { TbAnchorComponent } from '@shared/components/tb-anchor.component';
import { FormControl } from '@angular/forms';
import { removeScadaSymbolMetadata } from '@home/components/widget/lib/scada/scada-symbol.models';
import {
parseScadaSymbolsTagsFromContent,
removeScadaSymbolMetadata
} from '@home/components/widget/lib/scada/scada-symbol.models';
export interface ScadaSymbolEditorData {
scadaSymbolContent: string;
@ -167,6 +170,14 @@ export class ScadaSymbolEditorComponent implements OnInit, OnDestroy, AfterViewI
}
}
getTags(): string[] {
if (this.editorMode === 'svg') {
return this.scadaSymbolEditObject?.getTags();
} else {
return parseScadaSymbolsTagsFromContent(this.svgContent);
}
}
zoomIn() {
this.scadaSymbolEditObject.zoomIn();
}

4
ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.models.ts
View File

@ -411,6 +411,10 @@ export class ScadaSymbolEditObject {
this.callbacks.tagsUpdated(this.tags);
}
public getTags(): string[] {
return this.tags;
}
public tagHasStateRenderFunction(tag: string): boolean {
return this.callbacks.tagHasStateRenderFunction(tag);
}

1
ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.scss
View File

@ -61,6 +61,7 @@
flex: 1;
min-width: 0;
min-height: 0;
width: 50%;
max-width: 50%;
background: #fff;
&.preview {

4
ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts
View File

@ -211,6 +211,10 @@ export class ScadaSymbolComponent extends PageComponent
onApplyScadaSymbolConfig() {
if (this.scadaSymbolFormGroup.valid) {
if (this.symbolEditor.editorMode === 'xml') {
const tags = this.symbolEditor.getTags();
this.editObjectCallbacks.tagsUpdated(tags);
}
const metadata: ScadaSymbolMetadata = this.scadaSymbolFormGroup.get('metadata').value;
const scadaSymbolContent = this.prepareScadaSymbolContent(metadata);
const file = createFileFromContent(scadaSymbolContent, this.symbolData.imageResource.fileName,

2
ui-ngx/src/form.scss
View File

@ -395,13 +395,11 @@
padding-top: 8px;
padding-bottom: 8px;
min-height: 40px;
height: 40px;
width: auto;
.mdc-text-field__input, .mat-mdc-select {
font-weight: 400;
font-size: 14px;
line-height: 20px;
vertical-align: middle;
}
}
.mat-mdc-form-field-icon-prefix, .mat-mdc-form-field-icon-suffix,