maxenceg2m/iTunes
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

Migrate to Angular 4

Browse Source
This commit is contained in:
Maxence G. de Montauzan
2017-10-01 03:55:01 +02:00
parent b9bcc26258
commit 31fd9f27e9
55 changed files with 947 additions and 581 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
dashboard/src/app/album/album.component.html Normal file
View File

@@ -0,0 +1,119 @@
<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">
<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">
<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">
<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">
<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>
<table class="table table-striped" (window:scroll)="onScroll($event)">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Artist</th>
<th>Album</th>
<th>Album Artist</th>
<th>Play Count</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let song of songs | sortBy : 'Track Number'">
<td>{{song['Track Number'] ? (("0" + song['Track Number']).slice(-2)) : "--"}}</td>
<td [title]="song.Name">{{song.Name}}</td>
<td [title]="song.Artist"><a [routerLink]="['/artist', song.Artist]">{{song.Artist}}</a></td>
<td [title]="song.Album"><a [routerLink]="['/album', song.Album]">{{song.Album}}</a></td>
<td [title]="song.Album">{{song['Album Artist']}}</td>
<td [title]="song['Play Count']">{{song['Play Count']}}</td>
</tr>
</tbody>
</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>
<!-- Go to Top Button-->
<button type="button" class="btn btn-warning btn-top" [class.btn-top-is-visible]="atBottom"
aria-label="Top" (click)="scrollTop()">
<span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span>
</button>
</div>