100 lines
2.6 KiB
TypeScript
100 lines
2.6 KiB
TypeScript
import { Component, OnInit } from '@angular/core';
|
|
import { ActivatedRoute, Params } from '@angular/router';
|
|
import { Location } from '@angular/common';
|
|
|
|
import { ElsService } from './../els.service';
|
|
import { Song } from './../object/song';
|
|
import { Artist } from './../object/artist';
|
|
|
|
import { SortByPipe } from './../sort-by.pipe';
|
|
|
|
@Component({
|
|
selector: 'app-artist-component',
|
|
templateUrl: './artist.component.html',
|
|
styleUrls: [ './../album/album.component.css', './../dashboard.component.css' ]
|
|
})
|
|
|
|
export class ArtistComponent implements OnInit {
|
|
artistName = '';
|
|
songs: Array<Song> = [];
|
|
artist: Artist = new Artist();
|
|
// To activate button in interface var
|
|
moreDataAvailable = false;
|
|
atBottom = false;
|
|
sortable = false;
|
|
|
|
lockLoadData = false;
|
|
|
|
constructor(
|
|
private elsService: ElsService,
|
|
private route: ActivatedRoute,
|
|
private location: Location
|
|
) { }
|
|
|
|
ngOnInit(): void {
|
|
this.route.params.subscribe((params: Params) => this.artistName = params['name']);
|
|
|
|
this.elsService.getArtist(this.artistName).subscribe(data => this.artist = data);
|
|
this.loadSongs();
|
|
}
|
|
|
|
// TODO Duplicate code!
|
|
loadSongs(): void {
|
|
if (this.lockLoadData) {
|
|
console.log('Loading data locked');
|
|
return;
|
|
}
|
|
|
|
this.lockLoadData = true;
|
|
this.elsService.getArtistSongs(this.artistName, this.songs.length).subscribe(
|
|
data => {
|
|
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 {
|
|
this.sortable = true;
|
|
data.forEach(song => {
|
|
this.songs.push(song);
|
|
});
|
|
}
|
|
console.log('Unlock load data');
|
|
this.lockLoadData = false;
|
|
}
|
|
);
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
|
|
sort(): void {
|
|
this.songs = new SortByPipe().transform(this.songs, 'Year', 'Album', 'Track Number', 'Play Count');
|
|
this.sortable = false;
|
|
}
|
|
}
|