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

Improve Style + link

Browse Source
This commit is contained in:
Maxence G. de Montauzan
2017-05-04 17:00:48 +02:00
parent ecc216d15d
commit fe9638bcb5
8 changed files with 103 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
dashboard/package.json
View File

@@ -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",

2
dashboard/src/app/album.component.html
View File

@@ -1,5 +1,3 @@
<h1>Test</h1>
<h1>{{albumName}}</h1>
<ul class="heroes">

1
dashboard/src/app/album.component.ts
View File

@@ -28,7 +28,6 @@ export class AlbumComponent implements OnInit {
this.elsService.getAlbumSongs(this.albumName).subscribe(
data => {
console.log(data);
this.songs = data;
}
);

1
dashboard/src/app/app.component.ts
View File

@@ -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>

85
dashboard/src/app/dashboard.component.css
View File

@@ -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;
}
}
}

88
dashboard/src/app/dashboard.component.html
View File

@@ -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>

9
dashboard/src/app/dashboard.component.ts
View File

@@ -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) {

8
dashboard/src/app/sortby.pipe.ts
View File

@@ -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;
}
});