Stats for Album

dashboard/src/app/album.component.html

@@ -1,3 +1,4 @@
+<div class="container">
 <h1>{{albumName}}</h1>
 
 <div class="alert alert-warning">
@@ -8,13 +9,62 @@
     <span *ngIf="album && (songs.length != album['Track Count'])" class="glyphicon glyphicon-remove" style="color:red"></span>
 </div>
 
-<!-- TODO Album Details-->
+<div class="row cardAdmin">
-
+    <div class="col-lg-4 col-md-4">
-<!--<ul class="heroes">
+        <div class="panel panel-yellow">
-    <li *ngFor="let song of songs | sortBy : 'Track Number'" >
+            <div class="panel-heading">
-        {{("0" + song['Track Number']).slice(-2)}}. {{song.Name}} ({{song.Artist}}) [{{song.Album}}]
+                <div class="row">
-    </li>
+                    <div class="col-xs-3">
-</ul>-->
+                        <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-4 col-md-4">
+        <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-4 col-md-4">
+        <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>
 
 <table class="table table-striped" (window:scroll)="onScroll($event)">
 <thead>
@@ -48,3 +98,4 @@
     aria-label="Top" (click)="scrollTop()">
     <span class="glyphicon glyphicon-menu-up" style="color:white" aria-hidden="true"></span>
 </button>
+</div>

dashboard/src/app/album.component.ts

@@ -9,7 +9,7 @@ import { Album } from './object/album';
 @Component({
   selector: 'album-component',
   templateUrl: './album.component.html',
-  styleUrls: [ './album.component.css' ]
+  styleUrls: [ './album.component.css', './dashboard.component.css' ]
 })
 
 export class AlbumComponent implements OnInit {