Really same artist/album + stats

dashboard/src/app/artist.component.html

@@ -5,6 +5,27 @@
     Returned song: {{songs.length}}<br />
 </div>
 
+<div class="row cardAdmin">
+    <div class="col-lg-3 col-md-3">
+        <div class="panel panel-blue">
+            <div class="panel-heading">
+                <div class="row">
+                    <div class="col-xs-3">
+                        <span class="glyphicon glyphicon-cd stats_icon"></span>
+                    </div>
+                    <div class="col-xs-9 text-right">
+                        <div>
+                            <h3 *ngIf="!albumNames"><span class="glyphicon glyphicon-refresh loading"></span></h3>
+                            <h3 *ngIf="albumNames">{{albumNames.length}}</h3>
+                        </div>
+                        <div><br>Total time</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
 <table class="table table-striped" (window:scroll)="onScroll($event)">
 <thead>
     <tr>

dashboard/src/app/artist.component.ts

@@ -7,8 +7,8 @@ import { Song } from './object/song';
 
 @Component({
   selector: 'artist-component',
-  templateUrl: './artist.component.html'
+  templateUrl: './artist.component.html',
-//   styleUrls: [ './album.component.css' ]
+  styleUrls: [ './album.component.css', './dashboard.component.css' ]
 })
 
 export class ArtistComponent implements OnInit {
@@ -19,17 +19,64 @@ export class ArtistComponent implements OnInit {
   ) { }
 
   artistName = "";
-
   songs: Array<Song> = [];
 
+  moreDataAvailable: boolean = false;
+  atBottom: boolean = false;
+  albumNames: string[];
+
   ngOnInit(): void {
     this.route.params
       .subscribe((params: Params) => this.artistName = params['name']);
 
-    this.elsService.getArtistSongs(this.artistName).subscribe(
+    this.loadSongs();
+
+    this.elsService.getArtistAlbums(this.artistName).subscribe(data => this.albumNames = data );
+  }
+
+  // TODO Duplicate code!
+  loadSongs(): void {
+    this.elsService.getArtistSongs(this.artistName, this.songs.length).subscribe(
       data => {
-        this.songs = data;
+        console.log(this.moreDataAvailable);
+        this.moreDataAvailable = data.length == ElsService.DEFAULT_SIZE;
+
+        // Erase song array with result for first load, then add elements one by one
+        // instead use concat => concat will sort table at each load, very consuming! and not user friendly
+        if (this.songs.length == 0) {
+          this.songs = data;
+        } else {
+          data.forEach(song => {
+            this.songs.push(song);
+          });
+        }
       }
     );
   }
+
+  scrollTop(): void {
+    window.scrollTo(0,0);
+  }
+
+  /**
+   * Handle scroll:
+   * - load data if at bottom of screen (if needed)
+   * - hide/show "go to top" button
+   *
+   * @param event scroll event
+   */
+  onScroll(event: any) {
+    if (this.moreDataAvailable &&
+          (window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
+        this.loadSongs();
+    }
+
+    if (window.scrollY > window.innerHeight) {
+      this.atBottom = true;
+    }
+
+    if (window.scrollY == 0) {
+      this.atBottom = false;
+    }
+  }
 }

dashboard/src/app/els.service.ts

@@ -162,6 +162,27 @@ export class ElsService {
       });
   }
 
+  getArtistAlbums(artistName: string): Observable<string[]> {
+    return this.http
+      .post(this.elsUrl + "artist/_search",
+            JSON.stringify({"fields": "Album","query":{"match_phrase":{"Artist":artistName}},"size": ElsService.DEFAULT_SIZE}),
+            {headers: this.headers})
+      .map(res => res.json().hits.hits)
+      .map((hits: Array<any>) => {
+        // Theorically, my script prevent to found two documents with this query.
+        // But Prevention is better than cure as Shakespeare said
+        if (hits.length < 1) {
+          console.info('No artist "' + artistName + '" found.');
+          return undefined;
+        }
+        if (hits.length > 1) {
+          console.error('More than one artist "' + artistName + '" found, return the first.');
+          console.error('This is not normal!')
+        }
+        return hits[0].fields.Album;
+      });
+  }
+
   private handleError(error: any): Promise<any> {
     console.error('An error occurred', error); // for demo purposes only
     return Promise.reject(error.message || error);