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

UI: Handle error on apply preview upload and download

Browse Source
This commit is contained in:
Artem Dzhereleiko 2025-04-11 09:34:44 +03:00
parent 9bcdc86d09
commit 413cc12126
3 changed files with 90 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -253,43 +253,47 @@ export class ScadaSymbolComponent extends PageComponent
enterPreviewMode() {
this.previewMetadata = this.scadaSymbolFormGroup.get('metadata').value;
this.symbolData.scadaSymbolContent = this.prepareScadaSymbolContent(this.previewMetadata);
this.previewScadaSymbolObjectSettings = {
behavior: {},
properties: {}
};
this.scadaPreviewFormGroup.patchValue({
scadaSymbolObjectSettings: this.previewScadaSymbolObjectSettings
}, {emitEvent: false});
this.scadaPreviewFormGroup.markAsPristine();
const settings: ScadaSymbolWidgetSettings = {...scadaSymbolWidgetDefaultSettings,
...{
try {
this.symbolData.scadaSymbolContent = this.prepareScadaSymbolContent(this.previewMetadata);
this.previewScadaSymbolObjectSettings = {
behavior: {},
properties: {}
};
this.scadaPreviewFormGroup.patchValue({
scadaSymbolObjectSettings: this.previewScadaSymbolObjectSettings
}, {emitEvent: false});
this.scadaPreviewFormGroup.markAsPristine();
const settings: ScadaSymbolWidgetSettings = {...scadaSymbolWidgetDefaultSettings,
...{
simulated: true,
scadaSymbolUrl: null,
scadaSymbolContent: this.symbolData.scadaSymbolContent,
scadaSymbolObjectSettings: this.previewScadaSymbolObjectSettings,
padding: '0',
background: colorBackground('rgba(0,0,0,0)')
}
};
this.previewWidget = {
typeFullFqn: 'system.scada_symbol',
type: widgetType.rpc,
sizeX: this.previewMetadata.widgetSizeX || 3,
sizeY: this.previewMetadata.widgetSizeY || 3,
row: 0,
col: 0,
config: {
settings,
showTitle: false,
dropShadow: false,
padding: '0',
margin: '0',
backgroundColor: 'rgba(0,0,0,0)'
}
};
this.previewWidgets = [this.previewWidget];
this.previewMode = true;
}
};
this.previewWidget = {
typeFullFqn: 'system.scada_symbol',
type: widgetType.rpc,
sizeX: this.previewMetadata.widgetSizeX || 3,
sizeY: this.previewMetadata.widgetSizeY || 3,
row: 0,
col: 0,
config: {
settings,
showTitle: false,
dropShadow: false,
padding: '0',
margin: '0',
backgroundColor: 'rgba(0,0,0,0)'
}
};
this.previewWidgets = [this.previewWidget];
this.previewMode = true;
} catch (e) {
this.store.dispatch(new ActionNotificationShow({ message: e.message, type: 'error' }));
}
}
exitPreviewMode() {
@ -379,19 +383,23 @@ export class ScadaSymbolComponent extends PageComponent
metadata = parseScadaSymbolMetadataFromContent(this.origSymbolData.scadaSymbolContent);
}
const linkElement = document.createElement('a');
const scadaSymbolContent = this.prepareScadaSymbolContent(metadata);
const blob = new Blob([scadaSymbolContent], { type: this.symbolData.imageResource.descriptor.mediaType });
const url = URL.createObjectURL(blob);
linkElement.setAttribute('href', url);
linkElement.setAttribute('download', this.symbolData.imageResource.fileName);
const clickEvent = new MouseEvent('click',
{
view: window,
bubbles: true,
cancelable: false
}
);
linkElement.dispatchEvent(clickEvent);
try {
const scadaSymbolContent = this.prepareScadaSymbolContent(metadata);
const blob = new Blob([scadaSymbolContent], { type: this.symbolData.imageResource.descriptor.mediaType });
const url = URL.createObjectURL(blob);
linkElement.setAttribute('href', url);
linkElement.setAttribute('download', this.symbolData.imageResource.fileName);
const clickEvent = new MouseEvent('click',
{
view: window,
bubbles: true,
cancelable: false
}
);
linkElement.dispatchEvent(clickEvent);
} catch (e) {
this.store.dispatch(new ActionNotificationShow({ message: e.message, type: 'error' }));
}
}
createWidget() {

2
ui-ngx/src/app/shared/components/image/upload-image-dialog.component.html
View File

@ -15,7 +15,7 @@
limitations under the License.
-->
<form [formGroup]="uploadImageFormGroup" (ngSubmit)="upload()" style="width: 560px;">
<form [formGroup]="uploadImageFormGroup" (ngSubmit)="upload()" style="width: 560px;" tb-toast toastTarget="uploadRoot">
<mat-toolbar color="primary">
<h2>{{ ( uploadImage ? (isScada ? 'scada.upload-symbol' : 'image.upload-image') : (isScada ? 'scada.update-symbol' : 'image.update-image') ) | translate }}</h2>
<span class="flex-1"></span>

63
ui-ngx/src/app/shared/components/image/upload-image-dialog.component.ts
View File

@ -41,6 +41,7 @@ import {
updateScadaSymbolMetadataInContent
} from '@home/components/widget/lib/scada/scada-symbol.models';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { ActionNotificationShow } from '@core/notification/notification.actions';
export interface UploadImageDialogData {
imageSubType: ResourceSubType;
@ -135,38 +136,48 @@ export class UploadImageDialogComponent extends
upload(): void {
this.submitted = true;
let file: File = this.uploadImageFormGroup.get('file').value;
if (this.uploadImage) {
const title: string = this.uploadImageFormGroup.get('title').value;
if (this.isScada) {
if (!this.scadaSymbolMetadata) {
this.scadaSymbolMetadata = emptyMetadata();
try {
if (this.uploadImage) {
const title: string = this.uploadImageFormGroup.get('title').value;
if (this.isScada) {
if (!this.scadaSymbolMetadata) {
this.scadaSymbolMetadata = emptyMetadata();
}
if (this.scadaSymbolMetadata.title !== title) {
this.scadaSymbolMetadata.title = title;
}
const newContent = updateScadaSymbolMetadataInContent(this.scadaSymbolContent, this.scadaSymbolMetadata);
file = updateFileContent(file, newContent);
}
if (this.scadaSymbolMetadata.title !== title) {
this.scadaSymbolMetadata.title = title;
}
const newContent = updateScadaSymbolMetadataInContent(this.scadaSymbolContent, this.scadaSymbolMetadata);
file = updateFileContent(file, newContent);
}
forkJoin([
this.imageService.uploadImage(file, title, this.data.imageSubType),
blobToBase64(file)
]).subscribe(([imageInfo, base64]) => {
this.dialogRef.close({image: Object.assign(imageInfo, {base64})});
});
} else {
if (this.isScada) {
blobToText(file).subscribe(scadaSymbolContent => {
this.dialogRef.close({scadaSymbolContent});
});
} else {
const image = this.data.image;
forkJoin([
this.imageService.updateImage(imageResourceType(image), image.resourceKey, file),
this.imageService.uploadImage(file, title, this.data.imageSubType),
blobToBase64(file)
]).subscribe(([imageInfo, base64]) => {
this.dialogRef.close({image:Object.assign(imageInfo, {base64})});
this.dialogRef.close({image: Object.assign(imageInfo, {base64})});
});
} else {
if (this.isScada) {
blobToText(file).subscribe(scadaSymbolContent => {
this.dialogRef.close({scadaSymbolContent});
});
} else {
const image = this.data.image;
forkJoin([
this.imageService.updateImage(imageResourceType(image), image.resourceKey, file),
blobToBase64(file)
]).subscribe(([imageInfo, base64]) => {
this.dialogRef.close({image:Object.assign(imageInfo, {base64})});
});
}
}
} catch (e) {
this.store.dispatch(new ActionNotificationShow({
message: e.message,
type: 'error',
verticalPosition: 'bottom',
horizontalPosition: 'right',
target: 'uploadRoot'
}));
}
}
}