Get Artist & details + lock loading system

Because with stats, scroll launch an undesired loading of data
So need to lock when loading data

dashboard/src/app/album.component.ts

@@ -31,11 +31,7 @@ export class AlbumComponent implements OnInit {
 
     this.loadSongs()
 
-    this.elsService.getAlbum(this.albumName).subscribe(data => {
-      this.album = data;
-      console.log(this.album);
-    });
-
+    this.elsService.getAlbum(this.albumName).subscribe(data => this.album = data);
   }
 
   loadSongs(): void {

dashboard/src/app/artist.component.html

@@ -15,10 +15,10 @@
                     </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>
+                            <h3 *ngIf="!artist"><span class="glyphicon glyphicon-refresh loading"></span></h3>
+                            <h3 *ngIf="artist">{{artist.Album?.length}}</h3>
                         </div>
-                        <div><br>Total time</div>
+                        <div><br>albums</div>
                     </div>
                 </div>
             </div>

dashboard/src/app/artist.component.ts

@@ -4,6 +4,7 @@ import { Location }               from '@angular/common'
 
 import { ElsService } from './els.service'
 import { Song } from './object/song';
+import { Artist } from './object/artist';
 
 @Component({
   selector: 'artist-component',
@@ -20,10 +21,10 @@ export class ArtistComponent implements OnInit {
 
   artistName = "";
   songs: Array<Song> = [];
-
+  artist: Artist = new Artist();
   moreDataAvailable: boolean = false;
   atBottom: boolean = false;
-  albumNames: string[];
+  lockLoadData: boolean = true;
 
   ngOnInit(): void {
     this.route.params
@@ -31,14 +32,13 @@ export class ArtistComponent implements OnInit {
 
     this.loadSongs();
 
-    this.elsService.getArtistAlbums(this.artistName).subscribe(data => this.albumNames = data );
+    this.elsService.getArtist(this.artistName).subscribe(data => this.artist = data);
   }
 
   // TODO Duplicate code!
   loadSongs(): void {
     this.elsService.getArtistSongs(this.artistName, this.songs.length).subscribe(
       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
@@ -50,6 +50,7 @@ export class ArtistComponent implements OnInit {
             this.songs.push(song);
           });
         }
+        this.lockLoadData = false;
       }
     );
   }
@@ -66,8 +67,9 @@ export class ArtistComponent implements OnInit {
    * @param event scroll event
    */
   onScroll(event: any) {
-    if (this.moreDataAvailable &&
+    if (this.moreDataAvailable && !this.lockLoadData &&
           (window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
+        this.lockLoadData = true;
         this.loadSongs();
     }
 

dashboard/src/app/els.service.ts

@@ -7,6 +7,7 @@ import 'rxjs/add/operator/map';
 
 import { Song }  from './object/song';
 import { Album } from './object/album';
+import { Artist } from './object/artist';
 
 @Injectable()
 export class ElsService {
@@ -118,17 +119,17 @@ export class ElsService {
     return this.http
       .post(this.elsUrl + "song/_search",
             JSON.stringify({
-    "query": {
-        "bool": {
-            "should": [
-                {"match_phrase" : { "Album Artist" : artistName }},
-                {"match_phrase" : { "Artist" : artistName }}
-            ]
-        }
-    },
-    "size": ElsService.DEFAULT_SIZE,
-    "from": from
-}),
+              "query": {
+                  "bool": {
+                      "should": [
+                          {"match_phrase" : { "Album Artist" : artistName }},
+                          {"match_phrase" : { "Artist" : artistName }}
+                      ]
+                  }
+              },
+              "size": ElsService.DEFAULT_SIZE,
+              "from": from
+              }),
             {headers: this.headers})
       .map(res => {
         return res.json().hits.hits;
@@ -162,10 +163,10 @@ export class ElsService {
       });
   }
 
-  getArtistAlbums(artistName: string): Observable<string[]> {
+  getArtist(artistName: string): Observable<Artist> {
     return this.http
       .post(this.elsUrl + "artist/_search",
-            JSON.stringify({"fields": "Album","query":{"match_phrase":{"Artist":artistName}},"size": ElsService.DEFAULT_SIZE}),
+            JSON.stringify({"query":{"match_phrase":{"Artist":artistName}},"size": ElsService.DEFAULT_SIZE}),
             {headers: this.headers})
       .map(res => res.json().hits.hits)
       .map((hits: Array<any>) => {
@@ -179,7 +180,7 @@ export class ElsService {
           console.error('More than one artist "' + artistName + '" found, return the first.');
           console.error('This is not normal!')
         }
-        return hits[0].fields.Album;
+        return hits[0]._source;
       });
   }
 

dashboard/src/app/object/artist.ts

@@ -0,0 +1,10 @@
+export class Artist {
+    Name: string;
+    Album: string[];
+    Artist: string;
+    Rating: number;
+    Genre: Array<string>;
+    "Track Count": number;
+    "Persistent ID": string;
+    "Play Count": number;
+}