Refactoring

Move Top Played part.
Move pipes and dashboard
Rename object folder to model
Doc pipes

dashboard/src/app/album/album.component.ts

@@ -3,14 +3,14 @@ import { ActivatedRoute, Params } from '@angular/router';
 import { Location } from '@angular/common';
 
 import { ElsService } from './../els.service';
-import { Song } from './../object/song';
-import { Album } from './../object/album';
+import { Song } from './../model/song';
+import { Album } from './../model/album';
 import { SongTableComponent } from '../song-table/song-table.component';
 
 @Component({
   selector: 'app-album',
   templateUrl: './album.component.html',
-  styleUrls: [ './album.component.css', './../dashboard.component.css' ]
+  styleUrls: [ './album.component.css', './../dashboard/dashboard.component.css' ]
 })
 
 export class AlbumComponent implements OnInit {

dashboard/src/app/app-routing.module.ts

@@ -1,11 +1,12 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { DashboardComponent } from './dashboard.component';
+import { DashboardComponent } from './dashboard/dashboard.component';
 import { AlbumComponent } from './album/album.component';
 import { ArtistComponent } from './artist/artist.component';
 import { GenreComponent } from './genre/genre.component';
 import { LastAddedComponent } from './last-added/last-added.component';
+import { TopPlayedComponent } from './top-played/top-played.component';
 
 const routes: Routes = [
   { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
@@ -13,7 +14,8 @@ const routes: Routes = [
   { path: 'album/:name',      component: AlbumComponent },
   { path: 'artist/:name',      component: ArtistComponent },
   { path: 'genre/:name',      component: GenreComponent },
-  { path: 'lastAdded',      component: LastAddedComponent }
+  { path: 'lastAdded',      component: LastAddedComponent },
+  { path: 'top-played',      component: TopPlayedComponent }
 ];
 
 @NgModule({

dashboard/src/app/app.module.ts

@@ -3,22 +3,22 @@ import { BrowserModule } from '@angular/platform-browser';
 import { HttpModule } from '@angular/http';
 
 import { AppComponent } from './app.component';
-import { DashboardComponent } from './dashboard.component';
+import { DashboardComponent } from './dashboard/dashboard.component';
 import { AlbumComponent } from './album/album.component';
 import { ArtistComponent } from './artist/artist.component';
 import { GenreComponent } from './genre/genre.component';
 import { SongTableComponent } from './song-table/song-table.component';
+import { LastAddedComponent } from './last-added/last-added.component';
+import { TopPlayedComponent } from './top-played/top-played.component';
 
 import { ElsService } from './els.service';
 
 import { AppRoutingModule } from './app-routing.module';
 
-import { ConvertMsPipe } from './convertms.pipe';
-import { ConvertMoreExactPipe } from './convert-more-exact.pipe';
-import { SortByPipe } from './sort-by.pipe';
-import { ConvertSizeToStringPipe } from './convert-size-to-string.pipe';
-
-import { LastAddedComponent } from './last-added/last-added.component';
+import { ConvertMsPipe } from './pipes/convertms.pipe';
+import { ConvertMoreExactPipe } from './pipes/convert-more-exact.pipe';
+import { SortByPipe } from './pipes/sort-by.pipe';
+import { ConvertSizeToStringPipe } from './pipes/convert-size-to-string.pipe';
 
 @NgModule({
   imports: [
@@ -37,7 +37,8 @@ import { LastAddedComponent } from './last-added/last-added.component';
     ConvertMsPipe,
     ConvertMoreExactPipe,
     SortByPipe,
-    ConvertSizeToStringPipe
+    ConvertSizeToStringPipe,
+    TopPlayedComponent
   ],
   providers: [
     ElsService

dashboard/src/app/artist/artist.component.ts

@@ -3,14 +3,14 @@ import { ActivatedRoute, Params } from '@angular/router';
 import { Location } from '@angular/common';
 
 import { ElsService } from './../els.service';
-import { Song } from './../object/song';
-import { Artist } from './../object/artist';
+import { Song } from './../model/song';
+import { Artist } from './../model/artist';
 import { SongTableComponent } from '../song-table/song-table.component';
 
 @Component({
   selector: 'app-artist',
   templateUrl: './artist.component.html',
-  styleUrls: [ './../album/album.component.css', './../dashboard.component.css', './artist.component.css' ]
+  styleUrls: [ './../album/album.component.css', './../dashboard/dashboard.component.css', './artist.component.css' ]
 })
 
 export class ArtistComponent implements OnInit {

dashboard/src/app/convertms.pipe.spec.ts

@@ -1,8 +0,0 @@
-import { ConvertmsPipe } from './convertms.pipe';
-
-describe('ConvertmsPipe', () => {
-  it('create an instance', () => {
-    const pipe = new ConvertmsPipe();
-    expect(pipe).toBeTruthy();
-  });
-});

dashboard/src/app/dashboard/dashboard.component.html

@@ -118,110 +118,9 @@
         </tr>
     </tbody>
     </table>
+    <h3><a [routerLink]="['/top-played']">Top Played page</a></h3>
 </div>
 
-<div class="col-md-12">
-    <h3>Top Played Album (Naive Way)</h3>
-    <div class="alert alert-info">
-        <strong>Caution:</strong> In this list, albums with more than 10 artists are ignored.
-    </div>
-    <table class="table table-striped">
-    <thead>
-        <tr>
-            <th>Album</th>
-            <th>Artist Name</th>
-            <th>Track Count</th>
-            <th>Play Count</th>
-            <th>Average Play</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr *ngFor="let album of mostPlayedAlbumsNaive">
-            <td><b>{{album.Name}}</b></td>
-            <td>{{album['Album Artist'] ? album['Album Artist'] : album.Artist}}</td>
-            <td>{{album['Track Count']}}</td>
-            <td>{{album['Play Count']}}</td>
-            <td>{{album['Play Count'] / album['Track Count']}}</td>
-        </tr>
-    </tbody>
-    </table>
-</div>
-
-<div class="col-md-12">
-    <h3>Top Played Album (avg. play way)</h3>
-    <table class="table table-striped">
-    <thead>
-        <tr>
-            <th>Album</th>
-            <th>Artist Name</th>
-            <th>Track Count</th>
-            <th>Play Count</th>
-            <th>Average Play</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr *ngFor="let album of mostPlayedAlbums">
-            <td><b>{{album.Name}}</b></td>
-            <td>{{album['Album Artist'] ? album['Album Artist'] : album.Artist}}</td>
-            <td>{{album['Track Count']}}</td>
-            <td>{{album['Play Count']}}</td>
-            <td>{{album['Play Count'] / album['Track Count']}}</td>
-        </tr>
-    </tbody>
-    </table>
-</div>
-
-<div class="col-md-12">
-        <h3>Top Played Artist (Naive Way)</h3>
-        <!-- <div class="alert alert-info"> -->
-            <!-- <strong>Caution:</strong> In this list, artist with more than 10 artists are ignored. -->
-        <!-- </div> -->
-        <table class="table table-striped">
-        <thead>
-            <tr>
-                <th>Artist</th>
-                <th>Album Count</th>
-                <th>Track Count</th>
-                <th>Play Count</th>
-                <th>Average Play</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr *ngFor="let artist of mostPlayedArtistsNaive">
-                <td><b>{{artist.Name}}</b></td>
-                <td>{{artist.Album.length}}</td>
-                <td>{{artist['Track Count']}}</td>
-                <td>{{artist['Play Count']}}</td>
-                <td>{{artist['Play Count'] / artist['Track Count']}}</td>
-            </tr>
-        </tbody>
-        </table>
-    </div>
-
-    <div class="col-md-12">
-        <h3>Top Played Artist (avg. play way)</h3>
-        <table class="table table-striped">
-        <thead>
-            <tr>
-                <th>Artist</th>
-                <th>Album Count</th>
-                <th>Track Count</th>
-                <th>Play Count</th>
-                <th>Average Play</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr *ngFor="let artist of mostPlayedArtists">
-                <td><b>{{artist.Name}}</b></td>
-                <td>{{artist.Album.length}}</td>
-                <td>{{artist['Track Count']}}</td>
-                <td>{{artist['Play Count']}}</td>
-                <td>{{artist['Play Count'] / artist['Track Count']}}</td>
-            </tr>
-        </tbody>
-        </table>
-    </div>
-
 <div class="col-md-6">
     <h3>Top Genres</h3>
     <table class="table table-striped">

dashboard/src/app/dashboard/dashboard.component.ts

@@ -1,10 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 
-import { ElsService } from './els.service';
-import { Song } from './object/song';
-import { Bucket } from './object/bucket';
-import { Album } from './object/album';
-import { Artist } from './object/artist';
+import { ElsService } from './../els.service';
+import { Song } from './../model/song';
+import { Bucket } from './../model/bucket';
+import { Album } from './../model/album';
+import { Artist } from './../model/artist';
 
 @Component({
   selector: 'app-dashboard',
@@ -27,12 +27,6 @@ export class DashboardComponent implements OnInit {
 
   mostPlayedSongs: Song[] = [];
 
-  mostPlayedAlbums: Album[] = [];
-  mostPlayedAlbumsNaive: Album[] = [];
-
-  mostPlayedArtists: Artist[] = [];
-  mostPlayedArtistsNaive: Artist[] = [];
-
   lastAddedAlbums: Bucket[] = [];
   albumArtists = [];
 
@@ -59,36 +53,6 @@ export class DashboardComponent implements OnInit {
       data => this.mostPlayedSongs = data
     );
 
-    this.elsService.getMostPlayedAlbumNaive()
-    .then(result => {
-      result.forEach(album => {
-        if (album.Artist.length <= 10) {
-          this.mostPlayedAlbumsNaive.push(album);
-        }
-      });
-      this.mostPlayedAlbumsNaive.splice(10, this.mostPlayedAlbumsNaive.length);
-    });
-
-    this.elsService.getMostPlayedAlbum().subscribe(result => {
-      this.mostPlayedAlbums = result;
-      // this.mostPlayedAlbums.splice
-    });
-
-    this.elsService.getMostPlayedArtistNaive()
-    .then(result => {
-      this.mostPlayedArtistsNaive = result;
-    });
-
-    this.elsService.getMostPlayedArtist().subscribe(result => {
-      result.forEach(artist => {
-        if (artist['Track Count'] > 10) {
-          this.mostPlayedArtists.push(artist);
-        }
-      });
-    });
-
-
-
     this.elsService.getGenres().subscribe(data => this.topGenres = data);
     this.elsService.getGenres('asc').subscribe(data => this.bottomGenres = data);
     // this.elsService.getGenreCount().subscribe(data => console.log(data));

dashboard/src/app/els.service.ts

@@ -5,10 +5,10 @@ import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/toPromise';
 import 'rxjs/add/operator/map';
 
-import { Song } from './object/song';
-import { Album } from './object/album';
-import { Artist } from './object/artist';
-import { Bucket } from './object/bucket';
+import { Song } from './model/song';
+import { Album } from './model/album';
+import { Artist } from './model/artist';
+import { Bucket } from './model/bucket';
 
 @Injectable()
 export class ElsService {

dashboard/src/app/genre/genre.component.ts

@@ -4,7 +4,7 @@ import { ActivatedRoute, Params } from '@angular/router';
 import { ElsService } from '../els.service';
 import { SongTableComponent } from '../song-table/song-table.component';
 
-import { Song } from '../object/song';
+import { Song } from '../model/song';
 
 @Component({
   selector: 'app-genre',

dashboard/src/app/pipes/convert-more-exact.pipe.ts

@@ -5,6 +5,10 @@ import { Pipe, PipeTransform } from '@angular/core';
 })
 export class ConvertMoreExactPipe implements PipeTransform {
 
+  /**
+   * Convert milliseconds to rounded time e.g. ~84d
+   * @param timeMs time in milliseconds
+   */
   transform(timeMs: number): string  {
     let x = timeMs / 1000;
 

dashboard/src/app/pipes/convert-size-to-string.pipe.ts

@@ -5,6 +5,10 @@ import { Pipe, PipeTransform } from '@angular/core';
 })
 export class ConvertSizeToStringPipe implements PipeTransform {
 
+  /**
+   * Convert size to human readable size
+   * @param size size in byte
+   */
   transform(size: number): any {
     const units = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB'];
 

dashboard/src/app/pipes/convertms.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { ConvertMsPipe } from './convertms.pipe';
+
+describe('ConvertMsPipe', () => {
+  it('create an instance', () => {
+    const pipe = new ConvertMsPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

dashboard/src/app/pipes/convertms.pipe.ts

@@ -5,6 +5,10 @@ import { Pipe, PipeTransform } from '@angular/core';
 })
 export class ConvertMsPipe implements PipeTransform {
 
+  /**
+   * Convert milliseconds to "readable" duration e.g. 1d21h35m24s
+   * @param timeMs time in milliseconds
+   */
   transform(timeMs: number): string {
     let x = timeMs / 1000;
 

dashboard/src/app/song-table/song-table.component.ts

@@ -1,7 +1,7 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 
-import { Song } from './../object/song';
-import { SortByPipe } from './../sort-by.pipe';
+import { Song } from './../model/song';
+import { SortByPipe } from './../pipes/sort-by.pipe';
 
 @Component({
   selector: 'app-song-table',
@@ -14,7 +14,7 @@ export class SongTableComponent {
 
   // To activate button in interface var
   bottomReached = false;
-  private sortable: boolean;
+  sortable: boolean;
 
   constructor() { }
 

dashboard/src/app/top-played/top-played.component.html

@@ -0,0 +1,111 @@
+<div class="container">
+<div class="col-md-12">
+  <h3>Top Played Album (Naive Way)</h3>
+  <div class="alert alert-info">
+    <strong>Caution:</strong> In this list, albums with more than 10 artists are ignored.
+  </div>
+  <table class="table table-striped">
+    <thead>
+      <tr>
+        <th>Album</th>
+        <th>Artist Name</th>
+        <th>Track Count</th>
+        <th>Play Count</th>
+        <th>Average Play</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let album of mostPlayedAlbumsNaive">
+        <td>
+          <b>{{album.Name}}</b>
+        </td>
+        <td>{{album['Album Artist'] ? album['Album Artist'] : album.Artist}}</td>
+        <td>{{album['Track Count']}}</td>
+        <td>{{album['Play Count']}}</td>
+        <td>{{album['Play Count'] / album['Track Count']}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<div class="col-md-12">
+  <h3>Top Played Album (avg. play way)</h3>
+  <table class="table table-striped">
+    <thead>
+      <tr>
+        <th>Album</th>
+        <th>Artist Name</th>
+        <th>Track Count</th>
+        <th>Play Count</th>
+        <th>Average Play</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let album of mostPlayedAlbums">
+        <td>
+          <b>{{album.Name}}</b>
+        </td>
+        <td>{{album['Album Artist'] ? album['Album Artist'] : album.Artist}}</td>
+        <td>{{album['Track Count']}}</td>
+        <td>{{album['Play Count']}}</td>
+        <td>{{album['Play Count'] / album['Track Count']}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<div class="col-md-12">
+  <h3>Top Played Artist (Naive Way)</h3>
+  <!-- <div class="alert alert-info"> -->
+  <!-- <strong>Caution:</strong> In this list, artist with more than 10 artists are ignored. -->
+  <!-- </div> -->
+  <table class="table table-striped">
+    <thead>
+      <tr>
+        <th>Artist</th>
+        <th>Album Count</th>
+        <th>Track Count</th>
+        <th>Play Count</th>
+        <th>Average Play</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let artist of mostPlayedArtistsNaive">
+        <td>
+          <b>{{artist.Name}}</b>
+        </td>
+        <td>{{artist.Album.length}}</td>
+        <td>{{artist['Track Count']}}</td>
+        <td>{{artist['Play Count']}}</td>
+        <td>{{artist['Play Count'] / artist['Track Count']}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<div class="col-md-12">
+  <h3>Top Played Artist (avg. play way)</h3>
+  <table class="table table-striped">
+    <thead>
+      <tr>
+        <th>Artist</th>
+        <th>Album Count</th>
+        <th>Track Count</th>
+        <th>Play Count</th>
+        <th>Average Play</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let artist of mostPlayedArtists">
+        <td>
+          <b>{{artist.Name}}</b>
+        </td>
+        <td>{{artist.Album.length}}</td>
+        <td>{{artist['Track Count']}}</td>
+        <td>{{artist['Play Count']}}</td>
+        <td>{{artist['Play Count'] / artist['Track Count']}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+</div>

dashboard/src/app/top-played/top-played.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TopPlayedComponent } from './top-played.component';
+
+describe('TopPlayedComponent', () => {
+  let component: TopPlayedComponent;
+  let fixture: ComponentFixture<TopPlayedComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TopPlayedComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TopPlayedComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

dashboard/src/app/top-played/top-played.component.ts

@@ -0,0 +1,50 @@
+import { Component, OnInit } from '@angular/core';
+
+import { ElsService } from '../els.service';
+import { Album } from '../model/album';
+import { Artist } from '../model/artist';
+
+@Component({
+  selector: 'app-top-played',
+  templateUrl: './top-played.component.html',
+  styleUrls: ['./top-played.component.css']
+})
+export class TopPlayedComponent implements OnInit {
+  mostPlayedAlbumsNaive: Album[] = [];
+  mostPlayedAlbums: Album[] = [];
+  mostPlayedArtistsNaive: Artist[] = [];
+  mostPlayedArtists: Artist[] = [];
+
+  constructor(private elsService: ElsService) { }
+
+  ngOnInit() {
+    this.elsService.getMostPlayedAlbumNaive()
+    .then(result => {
+      result.forEach(album => {
+        if (album.Artist.length <= 10) {
+          this.mostPlayedAlbumsNaive.push(album);
+        }
+      });
+      this.mostPlayedAlbumsNaive.splice(10, this.mostPlayedAlbumsNaive.length);
+    });
+
+    this.elsService.getMostPlayedAlbum().subscribe(result => {
+      this.mostPlayedAlbums = result;
+      // this.mostPlayedAlbums.splice
+    });
+
+    this.elsService.getMostPlayedArtistNaive()
+    .then(result => {
+      this.mostPlayedArtistsNaive = result;
+    });
+
+    this.elsService.getMostPlayedArtist().subscribe(result => {
+      result.forEach(artist => {
+        if (artist['Track Count'] > 10) {
+          this.mostPlayedArtists.push(artist);
+        }
+      });
+    });
+  }
+
+}