98 lines
4.3 KiB
HTML
98 lines
4.3 KiB
HTML
<div class="container">
|
|
<h1>{{artistName}}</h1>
|
|
|
|
<div class="alert alert-warning">
|
|
<h3>Debug Zone</h3>
|
|
Returned song: {{songs.length}}<br />
|
|
Theorical song: {{ artist ? artist['Track Count'] : "" }}
|
|
<span *ngIf="artist && (songs.length == artist['Track Count'])" class="glyphicon glyphicon-ok" style="color:green"></span>
|
|
<span *ngIf="artist && (songs.length != artist['Track Count'])" class="glyphicon glyphicon-remove" style="color:red"></span>
|
|
<br />
|
|
Artist song:   {{countSong}}
|
|
<span *ngIf="artist && (songs.length == countSong)" class="glyphicon glyphicon-ok" style="color:green"></span>
|
|
<span *ngIf="artist && (songs.length != countSong)" 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="!artist"><span class="glyphicon glyphicon-refresh loading"></span></h3>
|
|
<h3 *ngIf="artist">{{artist.Rating}}/100</h3>
|
|
</div>
|
|
<div>Rating</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-cd stats_icon"></span>
|
|
</div>
|
|
<div class="col-xs-9 text-right">
|
|
<div>
|
|
<h3 *ngIf="!artist"><span class="glyphicon glyphicon-refresh loading"></span></h3>
|
|
<h3 *ngIf="artist">{{artist.Album?.length}}</h3>
|
|
</div>
|
|
<div>Albums</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="!artist"><span class="glyphicon glyphicon-refresh loading"></span></h3>
|
|
<h3 *ngIf="artist">{{artist['Track Count']}}</h3>
|
|
</div>
|
|
<div>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="!artist"><span class="glyphicon glyphicon-refresh loading"></span></h3>
|
|
<h3 *ngIf="artist">{{artist['Play Count']}} list.</h3>
|
|
</div>
|
|
<div *ngIf="artist">~{{artist['Play Count'] / artist['Track Count'] | number:'1.0-0'}} listening avg.</div>
|
|
<div *ngIf="!artist">Listening</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>
|