ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-06-13 20:48:12 +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
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> <mat-card>
<div class="menu"> <div class="menu">
<mat-radio-group aria-label="Select an option" class="radio-selection"> <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="1" (click)="setFilter('all')" checked>All symbols</mat-radio-button>
<mat-radio-button value="2">Built-in symbols</mat-radio-button> <mat-radio-button value="2" (click)="setFilter('builtin')">Built-in symbols</mat-radio-button>
<mat-radio-button value="2">Custom symbols</mat-radio-button> <mat-radio-button value="3" (click)="setFilter('custom')">Custom symbols</mat-radio-button>
</mat-radio-group> </mat-radio-group>
<input <input
type="file" type="file"
@ -15,10 +15,10 @@
<mat-icon>add</mat-icon> <mat-icon>add</mat-icon>
Add symbol Add symbol
</button> </button>
</div><br/><br/> </div><br/>
<input matInput type="text" [(ngModel)]="searchText" placeholder="Search by filename"><br/><br/> <input matInput type="text" [(ngModel)]="searchText" placeholder="Search by filename"><br/><br/>
<div class="wrapper"> <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)"> <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"/> <img [ngClass]="{ imageSelected: isSelected === symbol.symbol_id }" class="image" src="http://127.0.0.1:3080/v2/symbols/{{symbol.symbol_id}}/raw"/>
</button> </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>(); @Output() symbolChanged = new EventEmitter<string>();
symbols: Symbol[] = []; symbols: Symbol[] = [];
filteredSymbols: Symbol[] = [];
isSelected: string = ''; isSelected: string = '';
searchText: string = ''; searchText: string = '';
@ -27,6 +28,16 @@ export class SymbolsComponent implements OnInit {
this.loadSymbols(); 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) { setSelected(symbol_id: string) {
this.isSelected = symbol_id; this.isSelected = symbol_id;
this.symbolChanged.emit(this.isSelected); this.symbolChanged.emit(this.isSelected);
@ -35,6 +46,7 @@ export class SymbolsComponent implements OnInit {
loadSymbols() { loadSymbols() {
this.symbolService.list(this.server).subscribe((symbols: Symbol[]) => { this.symbolService.list(this.server).subscribe((symbols: Symbol[]) => {
this.symbols = symbols; this.symbols = symbols;
this.filteredSymbols = symbols;
}); });
} }