Get Artist & details + lock loading system

Because with stats, scroll launch an undesired loading of data
So need to lock when loading data
This commit is contained in:
2017-05-05 03:26:57 +02:00
parent c9a55c8217
commit 879647564c
5 changed files with 36 additions and 27 deletions

View File

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

View File

@@ -15,10 +15,10 @@
</div> </div>
<div class="col-xs-9 text-right"> <div class="col-xs-9 text-right">
<div> <div>
<h3 *ngIf="!albumNames"><span class="glyphicon glyphicon-refresh loading"></span></h3> <h3 *ngIf="!artist"><span class="glyphicon glyphicon-refresh loading"></span></h3>
<h3 *ngIf="albumNames">{{albumNames.length}}</h3> <h3 *ngIf="artist">{{artist.Album?.length}}</h3>
</div> </div>
<div><br>Total time</div> <div><br>albums</div>
</div> </div>
</div> </div>
</div> </div>

View File

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

View File

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

View File

@@ -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;
}