From fe9638bcb58032e6f19b02d96ef3b5787bddd9fc Mon Sep 17 00:00:00 2001
From: "Maxence G. de Montauzan" <maxence@gdemontauzan.fr>
Date: Thu, 4 May 2017 17:00:48 +0200
Subject: [PATCH] Improve Style + link

---
 dashboard/package.json                     |  4 +-
 dashboard/src/app/album.component.html     |  2 -
 dashboard/src/app/album.component.ts       |  1 -
 dashboard/src/app/app.component.ts         |  1 -
 dashboard/src/app/dashboard.component.css  | 85 ++++++---------------
 dashboard/src/app/dashboard.component.html | 88 +++++++++++++++++-----
 dashboard/src/app/dashboard.component.ts   |  9 ++-
 dashboard/src/app/sortby.pipe.ts           |  8 --
 8 files changed, 103 insertions(+), 95 deletions(-)

diff --git a/dashboard/package.json b/dashboard/package.json
index df18ef0..9b4efdb 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -37,7 +37,9 @@
     "systemjs": "0.19.40",
     "core-js": "^2.4.1",
     "rxjs": "5.0.1",
-    "zone.js": "^0.8.4"
+    "zone.js": "^0.8.4",
+    "bootstrap": "3.3.7",
+    "jquery": "1.9.1 - 2"
   },
   "devDependencies": {
     "concurrently": "^3.2.0",
diff --git a/dashboard/src/app/album.component.html b/dashboard/src/app/album.component.html
index 5807fa9..ce20a59 100644
--- a/dashboard/src/app/album.component.html
+++ b/dashboard/src/app/album.component.html
@@ -1,5 +1,3 @@
-<h1>Test</h1>
-
 <h1>{{albumName}}</h1>
 
 <ul class="heroes">
diff --git a/dashboard/src/app/album.component.ts b/dashboard/src/app/album.component.ts
index 24162e8..2eb79ce 100644
--- a/dashboard/src/app/album.component.ts
+++ b/dashboard/src/app/album.component.ts
@@ -28,7 +28,6 @@ export class AlbumComponent implements OnInit {
 
     this.elsService.getAlbumSongs(this.albumName).subscribe(
       data => {
-        console.log(data);
         this.songs = data;
       }
     );
diff --git a/dashboard/src/app/app.component.ts b/dashboard/src/app/app.component.ts
index fb04804..3c79b95 100644
--- a/dashboard/src/app/app.component.ts
+++ b/dashboard/src/app/app.component.ts
@@ -3,7 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'my-app',
   template: `
-    <h1>{{title}}</h1>
     <nav>
       <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
       <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
diff --git a/dashboard/src/app/dashboard.component.css b/dashboard/src/app/dashboard.component.css
index 07bb407..c5b287b 100644
--- a/dashboard/src/app/dashboard.component.css
+++ b/dashboard/src/app/dashboard.component.css
@@ -1,74 +1,33 @@
-[class*='col-'] {
-  float: left;
-  padding-right: 20px;
-  padding-bottom: 20px;
+.panel-stat {
+    min-height: 102px;
 }
 
-[class*='col-']:last-of-type {
-  padding-right: 0;
+.panel-green {
+  background-color: #16a085;
+  color:white;
+}
+.panel-yellow {
+  background-color: #f1c40f;
+  color:white;
 }
 
-a {
-  text-decoration: none;
+.panel-red {
+  background-color: #9b59b6;
+  color:white;
 }
 
-*, *:after, *:before {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
+.panel-blue {
+  background-color: #3498db;
+  color:white;
 }
 
-h3 {
-  text-align: center; margin-bottom: 0;
+.stats_icon {
+  font-size: 3em;
 }
 
-h4 {
-  position: relative;
-}
+.circle {
+  border-radius: 50%;
+  background-color: #9b59b6;
+  margin: 0 auto;
 
-.grid {
-  margin: 0;
-}
-
-.col-1-4 {
-  width: 25%;
-}
-
-.module {
-  padding: 20px;
-  text-align: center;
-  color: #eee;
-  max-height: 120px;
-  min-width: 120px;
-  background-color: #607D8B;
-  border-radius: 2px;
-}
-
-.module:hover {
-  background-color: #EEE;
-  cursor: pointer;
-  color: #607d8b;
-}
-
-.grid-pad {
-  padding: 10px 0;
-}
-
-.grid-pad > [class*='col-']:last-of-type {
-  padding-right: 20px;
-}
-
-@media (max-width: 600px) {
-  .module {
-    font-size: 10px;
-    max-height: 75px; }
-}
-
-@media (max-width: 1024px) {
-  .grid {
-    margin: 0;
-  }
-  .module {
-    min-width: 60px;
-  }
-}
+}
\ No newline at end of file
diff --git a/dashboard/src/app/dashboard.component.html b/dashboard/src/app/dashboard.component.html
index 03798af..d2827c9 100644
--- a/dashboard/src/app/dashboard.component.html
+++ b/dashboard/src/app/dashboard.component.html
@@ -1,20 +1,74 @@
-<h3>Important information</h3>
-<div class="grid grid-pad">
-  <div class="module hero">
-    <h4>{{totalTimeSt}}</h4>
-  </div>
-</div>
-<div class="grid grid-pad">
-  <div class="module hero">
-    <h4>{{totalSizeSt}}</h4>
-  </div>
-</div>
-<div class="grid grid-pad">
-  <div class="module hero">
-    <h4>{{trackCountSong}} chansons, {{trackCountArtist}} artistes, {{trackCountAlbum}} albums</h4>
-  </div>
+<div class="container">
+    <div class="error" *ngIf="errorMessage">{{errorMessage}}</div>
+
+    <h1>iTunes stats</h1>
+
+<br />
+<div class="row cardAdmin">
+    <div class="col-lg-4 col-md-4">
+        <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 class="huge"><h3>{{totalTimeSt}}</h3></div>
+                        <div><br>Total time</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-hdd stats_icon"></span>
+                    </div>
+                    <div class="col-xs-9 text-right">
+                        <div class="huge"><h3>{{totalSizeSt}}</h3></div>
+                        <div><br>Total size</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-lg-4 col-md-4">
+        <div class="panel panel-yellow">
+            <div class="panel-heading">
+                <div class="row">
+                    <div class="col-xs-3">
+                        <span class="glyphicon glyphicon-play stats_icon"></span>
+                    </div>
+                    <div class="col-xs-9 text-right">
+                        <div class="huge"><h3>{{trackCountSong}}</h3></div>
+                        <div><br>Total Songs</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 
-<div *ngFor="let e of mostPlayedSongs">
-  <h4>{{e['Play Count']}}: {{e.Name}} - {{e.Artist}} - {{e.Album}}</h4>
+<h3>Top Played Songs</h3>
+<table class="table table-striped">
+    <thead>
+      <tr>
+          <th>Track Name</th>
+          <th>Artist</th>
+          <th>Album</th>
+          <th>Play Count</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let song of mostPlayedSongs">
+          <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['Play Count']">{{song['Play Count']}}</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
\ No newline at end of file
diff --git a/dashboard/src/app/dashboard.component.ts b/dashboard/src/app/dashboard.component.ts
index 584f800..2f808ca 100644
--- a/dashboard/src/app/dashboard.component.ts
+++ b/dashboard/src/app/dashboard.component.ts
@@ -47,6 +47,11 @@ export class DashboardComponent implements OnInit {
     );
   }
 
+
+  /**
+   * UTILS FUNCTION - TODO MOVE
+   */
+
   convertMsToTime(ms: number): string {
     let x = ms / 1000
     let seconds = Math.round(x % 60)
@@ -58,8 +63,8 @@ export class DashboardComponent implements OnInit {
     x /= 24
     let days = Math.round(x);
 
-    // return days + "d" + hours + "h" + minutes + ":" + seconds;
-    return days + " days, " + hours + " hours, " + minutes + " minutes and " + seconds + " seconds";
+    return days + "d, " + hours + ":" + minutes + "." + seconds;
+    // return days + " days, " + hours + " hours, " + minutes + " minutes and " + seconds + " seconds";
   }
 
   convertSizeToString(size: number) {
diff --git a/dashboard/src/app/sortby.pipe.ts b/dashboard/src/app/sortby.pipe.ts
index 7ff497d..653ae7d 100644
--- a/dashboard/src/app/sortby.pipe.ts
+++ b/dashboard/src/app/sortby.pipe.ts
@@ -4,29 +4,21 @@ import { Pipe, PipeTransform } from '@angular/core';
 export class SortPipe implements PipeTransform {
   transform(array: Array<string>, args: string): Array<string> {
     array.sort((a: any, b: any) => {
-			console.log("a: " + a[args]);
-			console.log("b: " + b[args]);
 			if (a[args] == undefined && b[args] == undefined) {
-				console.log("und: " + 0)
 				return 0;
 			}
 			if (a[args] == undefined && b[args] != undefined) {
-				console.log("und: " + "-1")
 				return -1;
 			}
 			if (a[args] != undefined && b[args] == undefined) {
-				console.log("und: " + "-1")
 				return 1;
 			}
 
 	    if ( a[args] < b[args] ){
-				console.log(-1);
 	    	return -1;
 	    }else if( a[args] > b[args] ){
-				console.log(1);
 				return 1;
 	    }else{
-				console.log(0);
 	    	return 0;
 	    }
     });