ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-04-30 15:59:58 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Filtering symbols added

Browse Source
This commit is contained in:
Piotr Pekala 2019-09-03 10:42:16 -07:00
parent 2fe8cc72aa
commit 6bca43563d
2 changed files with 17 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,9 @@
<mat-card>
<div class="menu">
<mat-radio-group aria-label="Select an option" class="radio-selection">
<mat-radio-button value="1">All symbols</mat-radio-button>
<mat-radio-button value="2">Built-in symbols</mat-radio-button>
<mat-radio-button value="2">Custom symbols</mat-radio-button>
<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"
@ -15,10 +15,10 @@
<mat-icon>add</mat-icon>
Add symbol
</button>
</div><br/><br/>
</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>

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

@ -15,6 +15,7 @@ export class SymbolsComponent implements OnInit {
@Output() symbolChanged = new EventEmitter<string>();
symbols: Symbol[] = [];
filteredSymbols: Symbol[] = [];
isSelected: string = '';
searchText: string = '';
@ -27,6 +28,16 @@ export class SymbolsComponent implements OnInit {
this.loadSymbols();
}
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);
@ -35,6 +46,7 @@ export class SymbolsComponent implements OnInit {
loadSymbols() {
this.symbolService.list(this.server).subscribe((symbols: Symbol[]) => {
this.symbols = symbols;
this.filteredSymbols = symbols;
});
}