Improve top played part

Sort by avg. play + Slice
Add round pipe
Comment ELS Service

dashboard/src/app/app.module.ts

@@ -19,6 +19,7 @@ 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';
+import { RoundPipe } from './pipes/round.pipe';
 
 @NgModule({
   imports: [
@@ -38,7 +39,8 @@ import { ConvertSizeToStringPipe } from './pipes/convert-size-to-string.pipe';
     ConvertMoreExactPipe,
     SortByPipe,
     ConvertSizeToStringPipe,
-    TopPlayedComponent
+    TopPlayedComponent,
+    RoundPipe
   ],
   providers: [
     ElsService

dashboard/src/app/els.service.ts

@@ -114,6 +114,9 @@ export class ElsService {
       .map(res => this.responseToSongs(res));
   }
 
+  /**
+   * A basic get of albums ordered by 'Play Count' field.
+   */
   getMostPlayedAlbumNaive(): Promise<Album[]> {
     return this.http
       .get(this.elsUrl + 'album' + ElsService.ACTION_SEARCH + '?sort=Play Count:desc&size=20')
@@ -123,6 +126,10 @@ export class ElsService {
     // TODO Excluse 'Divers' + compilation
   }
 
+  /**
+   * More complicated query to calculate Avg. Play and get  top ordrered by this results.
+   * Result is in '.hits.hits[].sort' field - not casted by conversion method
+   */
   getMostPlayedAlbum(): Observable<Album[]> {
     return this.http
       .post(this.elsUrl + 'album' + ElsService.ACTION_SEARCH,

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

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

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

@@ -0,0 +1,21 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'round'
+})
+export class RoundPipe implements PipeTransform {
+
+  /**
+   * Round a value
+   * @param value value to round
+   * @param precision number of numbers to keep after coma - 1 if unspecified
+   */
+  transform(value: number, precision?: number): number {
+    if (precision === undefined) {
+      precision = 1;
+    }
+    const factor = Math.pow(10, precision);
+    return Math.round(value * factor) / factor;
+  }
+
+}

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

@@ -22,7 +22,7 @@
         <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>
+        <td>{{album['Play Count'] / album['Track Count'] | round}}</td>
       </tr>
     </tbody>
   </table>
@@ -48,7 +48,7 @@
         <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>
+        <td>{{album['Play Count'] / album['Track Count'] | round}}</td>
       </tr>
     </tbody>
   </table>
@@ -77,7 +77,7 @@
         <td>{{artist.Album.length}}</td>
         <td>{{artist['Track Count']}}</td>
         <td>{{artist['Play Count']}}</td>
-        <td>{{artist['Play Count'] / artist['Track Count']}}</td>
+        <td>{{artist['Play Count'] / artist['Track Count'] | round}}</td>
       </tr>
     </tbody>
   </table>
@@ -103,7 +103,7 @@
         <td>{{artist.Album.length}}</td>
         <td>{{artist['Track Count']}}</td>
         <td>{{artist['Play Count']}}</td>
-        <td>{{artist['Play Count'] / artist['Track Count']}}</td>
+        <td>{{artist['Play Count'] / artist['Track Count'] | round}}</td>
       </tr>
     </tbody>
   </table>

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

@@ -25,17 +25,22 @@ export class TopPlayedComponent implements OnInit {
           this.mostPlayedAlbumsNaive.push(album);
         }
       });
-      this.mostPlayedAlbumsNaive.splice(10, this.mostPlayedAlbumsNaive.length);
+
+      this.mostPlayedAlbumsNaive.sort((a: any, b: any) => this.sortByAveragePlay(a, b)).splice(10);
     });
 
     this.elsService.getMostPlayedAlbum().subscribe(result => {
       this.mostPlayedAlbums = result;
-      // this.mostPlayedAlbums.splice
+
+      this.mostPlayedAlbums.sort((a: any, b: any) => this.sortByAveragePlay(a, b)).splice(10);
+      // TODO Load more! (Use a )
     });
 
     this.elsService.getMostPlayedArtistNaive()
     .then(result => {
       this.mostPlayedArtistsNaive = result;
+
+      this.mostPlayedArtistsNaive.sort((a: any, b: any) => this.sortByAveragePlay(a, b)).splice(10);
     });
 
     this.elsService.getMostPlayedArtist().subscribe(result => {
@@ -44,7 +49,17 @@ export class TopPlayedComponent implements OnInit {
           this.mostPlayedArtists.push(artist);
         }
       });
+
+      this.mostPlayedArtists.sort((a: any, b: any) => this.sortByAveragePlay(a, b)).splice(10);
     });
   }
 
+  sortByAveragePlay(a: any, b: any) {
+    if ((a['Play Count'] / a['Track Count']) < (b['Play Count'] / b['Track Count'])) {
+      return 1;
+    } else {
+      return -1;
+    }
+  }
+
 }