93 lines
4.0 KiB
HTML
93 lines
4.0 KiB
HTML
<div class="container">
|
|
<h1>{{albumName}}</h1>
|
|
|
|
<div class="alert alert-warning">
|
|
<h3>Debug Zone</h3>
|
|
Returned song: {{songs.length}}<br />
|
|
Theorical number song: {{ album ? album['Track Count'] : "" }}
|
|
<span *ngIf="album && (songs.length == album['Track Count'])" class="glyphicon glyphicon-ok" style="color:green"></span>
|
|
<span *ngIf="album && (songs.length != album['Track Count'])" class="glyphicon glyphicon-remove" style="color:red"></span>
|
|
</div>
|
|
|
|
<div class="row cardAdmin">
|
|
<div class="col-lg-3 col-md-3 col-sm-6">
|
|
<div class="panel panel-yellow">
|
|
<div class="panel-heading">
|
|
<div class="row">
|
|
<div class="col-xs-3">
|
|
<span class="glyphicon glyphicon-star stats_icon"></span>
|
|
</div>
|
|
<div class="col-xs-9 text-right">
|
|
<div>
|
|
<h3 *ngIf="!album"><span class="glyphicon glyphicon-refresh loading"></span></h3>
|
|
<h3 *ngIf="album">{{album.Rating}}/100</h3>
|
|
</div>
|
|
<div><br>Rating</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-3 col-sm-6">
|
|
<div class="panel panel-green">
|
|
<div class="panel-heading">
|
|
<div class="row">
|
|
<div class="col-xs-3">
|
|
<span class="glyphicon glyphicon-list-alt stats_icon"></span>
|
|
</div>
|
|
<div class="col-xs-9 text-right">
|
|
<div>
|
|
<h3 *ngIf="!album"><span class="glyphicon glyphicon-refresh loading"></span></h3>
|
|
<h3 *ngIf="album">{{album['Track Count']}}</h3>
|
|
</div>
|
|
<div><br>Songs</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-3 col-sm-6">
|
|
<div class="panel panel-purple">
|
|
<div class="panel-heading">
|
|
<div class="row">
|
|
<div class="col-xs-3">
|
|
<span class="glyphicon glyphicon-headphones stats_icon"></span>
|
|
</div>
|
|
<div class="col-xs-9 text-right">
|
|
<div>
|
|
<h3 *ngIf="!album"><span class="glyphicon glyphicon-refresh loading"></span></h3>
|
|
<h3 *ngIf="album">{{album['Play Count']}} list.</h3>
|
|
</div>
|
|
<div><br>~{{album['Play Count'] / album['Track Count'] | number:'1.0-0'}} listening avg.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-3 col-sm-6">
|
|
<div class="panel panel-blue">
|
|
<div class="panel-heading">
|
|
<div class="row">
|
|
<div class="col-xs-3">
|
|
<span class="glyphicon glyphicon-time stats_icon"></span>
|
|
</div>
|
|
<div class="col-xs-9 text-right">
|
|
<div>
|
|
<h3 *ngIf="!album"><span class="glyphicon glyphicon-refresh loading"></span></h3>
|
|
<h3 *ngIf="album">{{album['Total Time'] | convertMs}}</h3>
|
|
</div>
|
|
<div><br>Album time</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<app-song-table [songs]=songs (atBottom)=loadSongs()></app-song-table>
|
|
|
|
<button type="button" *ngIf="moreDataAvailable" class="btn btn-default" aria-label="More" (click)="loadSongs()">
|
|
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> More...
|
|
</button>
|
|
</div>
|