mirror of
https://github.com/GNS3/gns3-web-ui.git
synced 2025-04-08 19:14:18 +00:00
Filtering symbols added
This commit is contained in:
parent
2fe8cc72aa
commit
6bca43563d
@ -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>
|
||||
|
@ -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;
|
||||
});
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user