Load more song for album (+ fake size)

Note how to have static var!

dashboard/src/app/album.component.html

@@ -35,4 +35,8 @@
         <td [title]="song['Play Count']">{{song['Play Count']}}</td>
     </tr>
 </tbody>
-</table>
+</table>
+
+<button type="button" *ngIf="more" class="btn btn-default" aria-label="More" (click)="loadMore()">
+    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> More...
+</button>

dashboard/src/app/album.component.ts

@@ -20,20 +20,29 @@ export class AlbumComponent implements OnInit {
   ) { }
 
   albumName = "";
-
   songs: Array<Song> = [];
-
   album: Album = new Album(); // If album not found, will be replaced by 'undefined'
+  more: boolean = false;
 
   ngOnInit(): void {
     this.route.params
       .subscribe((params: Params) => this.albumName = params['name']);
 
+    this.loadMore()
+
     this.elsService.getAlbum(this.albumName).subscribe(data => {
       this.album = data;
       console.log(this.album);
     });
 
-    this.elsService.getAlbumSongs(this.albumName).subscribe(data => this.songs = data);
+  }
+
+  loadMore(): void {
+    this.elsService.getAlbumSongs(this.albumName, this.songs.length).subscribe(
+      data => {
+        this.more = data.length == ElsService.DEFAULT_SIZE
+        this.songs = this.songs.concat(data); // TODO NOt contact, add!
+      }
+    );
   }
 }

dashboard/src/app/els.service.ts

@@ -13,6 +13,8 @@ export class ElsService {
   private elsUrl = 'http://localhost:9200/itunessongs/';
   private headers = new Headers({'Content-Type': 'application/json'});
 
+  public static readonly DEFAULT_SIZE:number = 5;
+
   constructor(private http: Http) { }
 
   getTime(): Promise<number> {
@@ -83,10 +85,11 @@ export class ElsService {
       // });
   }
 
-  getAlbumSongs(albumName: string): Observable<Song[]> {
+  getAlbumSongs(albumName: string, from: number = 0): Observable<Song[]> {
+    console.debug("Album name: " + albumName + " - from: " + from);
     return this.http
       .post(this.elsUrl + "song/_search",
-            JSON.stringify({"query":{"match_phrase":{"Album":albumName}},"size": 50}), // TODO Dynamic size
+            JSON.stringify({"query":{"match_phrase":{"Album":albumName}},"size": ElsService.DEFAULT_SIZE, "from": from}), // TODO Dynamic size
             {headers: this.headers})
       .map(res => {
         return res.json().hits.hits;
@@ -103,7 +106,7 @@ export class ElsService {
   getAlbum(albumName: string): Observable<Album> {
     return this.http
       .post(this.elsUrl + "album/_search",
-            JSON.stringify({"query":{"match_phrase":{"Album":albumName}},"size": 50}), // TODO Dynamic size
+            JSON.stringify({"query":{"match_phrase":{"Album":albumName}},"size": ElsService.DEFAULT_SIZE}), // TODO Dynamic size
             {headers: this.headers})
       .map(res => {
         return res.json().hits.hits;