Merge pull request #498 from GNS3/Support-for-editing-config-files

Ability to add custom symbols

src/app/components/preferences/common/symbols/symbols.component.html

@@ -1,7 +1,24 @@
 <mat-card>
+    <div class="menu">
+        <mat-radio-group aria-label="Select an option" class="radio-selection">
+            <mat-radio-button value="1" (click)="setFilter('all')" checked>All symbols</mat-radio-button>
+            <mat-radio-button value="2" (click)="setFilter('builtin')">Built-in symbols</mat-radio-button>
+            <mat-radio-button value="3" (click)="setFilter('custom')">Custom symbols</mat-radio-button>
+        </mat-radio-group>
+        <input
+            type="file"
+            accept=".svg, .bmp, .jpeg, .jpg, .gif, .png"
+            class="non-visible"
+            #file
+            (change)="uploadSymbolFile($event)"/>
+        <button mat-button (click)="file.click()">
+            <mat-icon>add</mat-icon>
+            Add symbol
+        </button>
+    </div><br/>
     <input matInput type="text" [(ngModel)]="searchText" placeholder="Search by filename"><br/><br/>
     <div class="wrapper">
-        <div class="buttonWrapper" *ngFor="let symbol of symbols | filenamefilter: searchText">
+        <div class="buttonWrapper" *ngFor="let symbol of filteredSymbols | filenamefilter: searchText">
             <button [ngClass]="{ buttonSelected: isSelected === symbol.symbol_id }" class="button" (click)="setSelected(symbol.symbol_id)">
                 <img [ngClass]="{ imageSelected: isSelected === symbol.symbol_id }" class="image" src="http://127.0.0.1:3080/v2/symbols/{{symbol.symbol_id}}/raw"/>
             </button>

src/app/components/preferences/common/symbols/symbols.component.scss

@@ -8,6 +8,11 @@
     outline: none;
 }
 
+.menu {
+    display: flex;
+    justify-content: space-between;
+}
+
 .button {
     background: border-box;
     border-width: 0px;
@@ -36,3 +41,15 @@
     grid-row-gap: 3em;
     grid-column-gap: 1em;
 }
+
+.radio-selection {
+    width: 90%;
+}
+
+.mat-radio-button ~ .mat-radio-button {
+    margin-left: 16px;
+}
+
+.non-visible {
+    display: none;
+}

src/app/components/preferences/common/symbols/symbols.component.ts

@@ -15,6 +15,7 @@ export class SymbolsComponent implements OnInit {
     @Output() symbolChanged = new EventEmitter<string>();
     
     symbols: Symbol[] = [];
+    filteredSymbols: Symbol[] = [];
     isSelected: string = '';
     searchText: string = '';
 
@@ -24,14 +25,55 @@ export class SymbolsComponent implements OnInit {
 
     ngOnInit() {
         this.isSelected = this.symbol;
+        this.loadSymbols();
+    }
 
-        this.symbolService.list(this.server).subscribe((symbols: Symbol[]) => {
-            this.symbols = symbols;
-        });
+    setFilter(filter: string) {
+        if (filter === 'all') {
+            this.filteredSymbols = this.symbols;
+        } else if (filter === 'builtin') {
+            this.filteredSymbols = this.symbols.filter(elem => elem.builtin);
+        } else {
+            this.filteredSymbols = this.symbols.filter(elem => !elem.builtin);
+        }
     }
 
     setSelected(symbol_id: string) {
         this.isSelected = symbol_id;
         this.symbolChanged.emit(this.isSelected);
     }
+
+    loadSymbols() {
+        this.symbolService.list(this.server).subscribe((symbols: Symbol[]) => {
+            this.symbols = symbols;
+            this.filteredSymbols = symbols;
+        });
+    }
+
+    public uploadSymbolFile(event) {
+        this.readSymbolFile(event.target);
+    }
+
+    private readSymbolFile(symbolInput) {
+        let file: File = symbolInput.files[0];
+        let fileName = symbolInput.files[0].name;
+        let fileReader: FileReader = new FileReader();
+        let imageToUpload = new Image();
+    
+        fileReader.onloadend = () => {
+            let image = fileReader.result;
+            let svg = this.createSvgFileForImage(image, imageToUpload);
+            this.symbolService.add(this.server, fileName, svg).subscribe(() => {
+                this.loadSymbols();
+            });
+        }
+            
+        imageToUpload.onload = () => { fileReader.readAsDataURL(file) };
+        imageToUpload.src = window.URL.createObjectURL(file);
+    }
+
+    private createSvgFileForImage(image: string|ArrayBuffer, imageToUpload: HTMLImageElement) {
+        return `<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" height=\"${imageToUpload.height}\" 
+                width=\"${imageToUpload.width}\">\n<image height=\"${imageToUpload.height}\" width=\"${imageToUpload.width}\" xlink:href=\"${image}\"/>\n</svg>`
+    }
 }

src/app/services/symbol.service.ts

@@ -15,6 +15,10 @@ export class SymbolService {
     return this.symbols.getValue().find((symbol: Symbol) => symbol.symbol_id === symbol_id);
   }
 
+  add(server: Server, symbolName: string, symbol: string) {
+    return this.httpServer.post(server, `/symbols/${symbolName}/raw`, symbol)
+  }
+
   load(server: Server): Observable<Symbol[]> {
     const subscription = this.list(server).subscribe((symbols: Symbol[]) => {
       const streams = symbols.map(symbol => this.raw(server, symbol.symbol_id));