75 lines
3.0 KiB
HTML
75 lines
3.0 KiB
HTML
<div class="container">
|
|
<h1>Albums - {{this.albums.length}}</h1>
|
|
|
|
<div class="col-md-12">
|
|
<table class="table table-striped" style="white-space: nowrap;">
|
|
<thead>
|
|
<tr>
|
|
<th>Album</th>
|
|
<th>Track Count</th>
|
|
<th></th>
|
|
<th></th>
|
|
<th>Artist/Album Artist</th>
|
|
<th>Avg Bit Rate (min)</th>
|
|
<th>Play Count</th>
|
|
<th>Rating</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr *ngFor="let album of albums">
|
|
<td>
|
|
<a [routerLink]="['/album', album.Album]">{{album.Album}}</a>
|
|
<span class="glyphicon glyphicon-remove-circle" style="cursor:pointer;color:red;" (click)="exlude('Album', album)"></span>
|
|
</td>
|
|
|
|
<td>{{album['Track Count']}}</td>
|
|
|
|
<ng-template [ngIf]="album['Album Artist']" [ngIfElse]="artistSection">
|
|
<td>
|
|
<span class="glyphicon glyphicon-ban-circle" style="cursor:pointer;color:red;" (click)="exlude('Album Artist', album)"></span>
|
|
</td>
|
|
<td>
|
|
<span class="glyphicon glyphicon-zoom-in" style="cursor:pointer;" (click)="select('Album Artist', album)"></span>
|
|
</td>
|
|
<td>
|
|
<a [routerLink]="['/artist', album['Album Artist']]">{{album['Album Artist']}}</a>
|
|
</td>
|
|
</ng-template>
|
|
|
|
<ng-template #artistSection>
|
|
<td>
|
|
<span class="glyphicon glyphicon-ban-circle" style="cursor:pointer;color:red;" (click)="exlude('Artist', album)"></span>
|
|
</td>
|
|
<td>
|
|
<span class="glyphicon glyphicon-zoom-in" style="cursor:pointer;" (click)="select('Artist', album)"></span>
|
|
</td>
|
|
<td>
|
|
<a [routerLink]="['/artist', album.Artist[0]]">{{album.Artist}}</a>
|
|
</td>
|
|
</ng-template>
|
|
|
|
<td>
|
|
{{album['Avg Bit Rate']}}
|
|
<span *ngIf="album['Avg Bit Rate'] != album['Min Bit Rate']">({{album['Min Bit Rate']}})</span>
|
|
</td>
|
|
|
|
<td>
|
|
{{album['Play Count']}} ({{album['Play Count']/album['Track Count'] | number:'1.0-0'}}/songs)
|
|
</td>
|
|
|
|
<td class="star" [title]="(album['Album Rating Computed']?'Computed Rating: ':'Rating: ') + album['Album Rating']">
|
|
<span *ngFor="let item of numberToArray(album['Album Rating'], 20)">
|
|
<span class="glyphicon" [ngClass]="album['Album Rating Computed']?'glyphicon-star-empty':'glyphicon-star'"></span>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<button type="button" class="btn btn-danger btn-top" [class.btn-top-is-visible]="queryEdited"
|
|
aria-label="Reset filters" (click)="resetQuery()" title="Reset filters and reload datas">
|
|
<span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|