ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-01-03 03:26:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix for symbol dialog

Browse Source
This commit is contained in:
piotrpekala7 2021-05-14 13:01:41 +02:00
parent c8f1a4d428
commit ca7b43a5c2
3 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/preferences/common/symbols/symbols.component.html
View File

@ -32,7 +32,7 @@
lazyimg lazyimg
[ngClass]="{ imageSelected: isSelected === symbol.symbol_id }" [ngClass]="{ imageSelected: isSelected === symbol.symbol_id }"
class="image" class="image"
[src]="getImageSourceForTemplate(symbol.symbol_id) | authImage: server | async" [src]="getImageSourceForTemplate(symbol.symbol_id)| authImage: server | async"
/> />
</button> </button>
</div> </div>

8
src/app/components/preferences/common/symbols/symbols.component.ts
View File

@ -1,4 +1,5 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { Server } from '../../../../models/server'; import { Server } from '../../../../models/server';
import { Symbol } from '../../../../models/symbol'; import { Symbol } from '../../../../models/symbol';
import { SymbolService } from '../../../../services/symbol.service'; import { SymbolService } from '../../../../services/symbol.service';
@ -18,7 +19,7 @@ export class SymbolsComponent implements OnInit {
isSelected: string = ''; isSelected: string = '';
searchText: string = ''; searchText: string = '';
constructor(private symbolService: SymbolService) {} constructor(private symbolService: SymbolService, private domSanitizer: DomSanitizer) {}
ngOnInit() { ngOnInit() {
this.isSelected = this.symbol; this.isSelected = this.symbol;
@ -76,6 +77,11 @@ export class SymbolsComponent implements OnInit {
width=\"${imageToUpload.width}\">\n<image height=\"${imageToUpload.height}\" width=\"${imageToUpload.width}\" xlink:href=\"${image}\"/>\n</svg>`; width=\"${imageToUpload.width}\">\n<image height=\"${imageToUpload.height}\" width=\"${imageToUpload.width}\" xlink:href=\"${image}\"/>\n</svg>`;
} }
getImage(symbolFilename: string) {
let symbol = this.symbolService.get(symbolFilename);
return this.domSanitizer.bypassSecurityTrustUrl(`data:image/svg+xml;base64,${btoa(symbol.raw)}`);
}
getImageSourceForTemplate(symbol: string) { getImageSourceForTemplate(symbol: string) {
return `${this.server.protocol}//${this.server.host}:${this.server.port}/v3/symbols/${symbol}/raw`; return `${this.server.protocol}//${this.server.host}:${this.server.port}/v3/symbols/${symbol}/raw`;
} }

6
src/app/filters/authImageFilter.ts
View File

@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core';
import { Console } from 'console'; import { Console } from 'console';
import { Server } from '../models/server'; import { Server } from '../models/server';
import { HttpServer } from '../services/http-server.service'; import { HttpServer } from '../services/http-server.service';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({ @Pipe({
name: 'authImage' name: 'authImage'
@ -9,7 +10,8 @@ import { HttpServer } from '../services/http-server.service';
export class AuthImageFilter implements PipeTransform { export class AuthImageFilter implements PipeTransform {
constructor( constructor(
private httpServer: HttpServer private httpServer: HttpServer,
private domSanitizer: DomSanitizer
) {} ) {}
async transform(src: string, server: Server) { async transform(src: string, server: Server) {
@ -17,7 +19,7 @@ export class AuthImageFilter implements PipeTransform {
const imageBlob: Blob = await this.httpServer.getBlob(server, url).toPromise(); const imageBlob: Blob = await this.httpServer.getBlob(server, url).toPromise();
const reader = new FileReader(); const reader = new FileReader();
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
reader.onloadend = () => resolve(reader.result as string); reader.onloadend = () => resolve(this.domSanitizer.bypassSecurityTrustUrl(reader.result as string));
reader.readAsDataURL(imageBlob); reader.readAsDataURL(imageBlob);
}); });
} }