From 11c64405eb9f319acc623d3c6529232146e9d304 Mon Sep 17 00:00:00 2001 From: "Maxence G. de Montauzan" Date: Wed, 11 Oct 2017 00:33:43 +0200 Subject: [PATCH] Quickly add genre component --- dashboard/src/app/album/album.component.html | 2 + dashboard/src/app/app-routing.module.ts | 4 +- dashboard/src/app/app.module.ts | 2 + .../src/app/artist/artist.component.html | 2 + dashboard/src/app/dashboard.component.html | 6 +-- dashboard/src/app/els.service.ts | 24 ++++++++++ dashboard/src/app/genre/genre.component.css | 0 dashboard/src/app/genre/genre.component.html | 28 +++++++++++ .../src/app/genre/genre.component.spec.ts | 25 ++++++++++ dashboard/src/app/genre/genre.component.ts | 47 +++++++++++++++++++ 10 files changed, 136 insertions(+), 4 deletions(-) create mode 100644 dashboard/src/app/genre/genre.component.css create mode 100644 dashboard/src/app/genre/genre.component.html create mode 100644 dashboard/src/app/genre/genre.component.spec.ts create mode 100644 dashboard/src/app/genre/genre.component.ts diff --git a/dashboard/src/app/album/album.component.html b/dashboard/src/app/album/album.component.html index a724210..8e4c913 100644 --- a/dashboard/src/app/album/album.component.html +++ b/dashboard/src/app/album/album.component.html @@ -93,6 +93,7 @@ Album Album Artist Play Count + Genre @@ -103,6 +104,7 @@ {{song.Album}} {{song['Album Artist']}} {{song['Play Count']}} + {{song.Genre}} diff --git a/dashboard/src/app/app-routing.module.ts b/dashboard/src/app/app-routing.module.ts index aee2d78..ad2ff15 100644 --- a/dashboard/src/app/app-routing.module.ts +++ b/dashboard/src/app/app-routing.module.ts @@ -4,12 +4,14 @@ import { RouterModule, Routes } from '@angular/router'; import { DashboardComponent } from './dashboard.component'; import { AlbumComponent } from './album/album.component'; import { ArtistComponent } from './artist/artist.component'; +import { GenreComponent } from './genre/genre.component'; const routes: Routes = [ { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, { path: 'dashboard', component: DashboardComponent }, { path: 'album/:name', component: AlbumComponent }, - { path: 'artist/:name', component: ArtistComponent } + { path: 'artist/:name', component: ArtistComponent }, + { path: 'genre/:name', component: GenreComponent } ]; @NgModule({ diff --git a/dashboard/src/app/app.module.ts b/dashboard/src/app/app.module.ts index 5e16db1..78e8ff3 100644 --- a/dashboard/src/app/app.module.ts +++ b/dashboard/src/app/app.module.ts @@ -6,6 +6,7 @@ import { AppComponent } from './app.component'; import { DashboardComponent } from './dashboard.component'; import { AlbumComponent } from './album/album.component'; import { ArtistComponent } from './artist/artist.component'; +import { GenreComponent } from './genre/genre.component'; import { ElsService } from './els.service'; @@ -25,6 +26,7 @@ import { SortByPipe } from './sort-by.pipe'; DashboardComponent, AlbumComponent, ArtistComponent, + GenreComponent, ConvertMsPipe, SortByPipe ], diff --git a/dashboard/src/app/artist/artist.component.html b/dashboard/src/app/artist/artist.component.html index 0b65489..73089ce 100644 --- a/dashboard/src/app/artist/artist.component.html +++ b/dashboard/src/app/artist/artist.component.html @@ -95,6 +95,7 @@ Artist Album Artist Play Count + Genre @@ -106,6 +107,7 @@ {{song.Artist}} {{song['Album Artist'] ? song['Album Artist'] : "-" }} {{song['Play Count']}} + {{song.Genre}} diff --git a/dashboard/src/app/dashboard.component.html b/dashboard/src/app/dashboard.component.html index e5c7eaa..584f270 100644 --- a/dashboard/src/app/dashboard.component.html +++ b/dashboard/src/app/dashboard.component.html @@ -127,7 +127,7 @@ - {{genre.key}} + {{genre.key}} {{genre.doc_count}} @@ -144,10 +144,10 @@ - {{genre.key}} + {{genre.key}} {{genre.doc_count}} - \ No newline at end of file + diff --git a/dashboard/src/app/els.service.ts b/dashboard/src/app/els.service.ts index f268c05..39f595f 100644 --- a/dashboard/src/app/els.service.ts +++ b/dashboard/src/app/els.service.ts @@ -156,6 +156,30 @@ export class ElsService { }); } + getGenreSongs(genreName: string, from: number = 0): Observable { + console.info('getGenreSongs- Genre name: ' + genreName + ' - from: ' + from); + // TODO Code repetition => to refactor + return this.http + .post(this.elsUrl + 'song' + ElsService.ACTION_SEARCH, + JSON.stringify({ + 'query': { + 'match_phrase': { 'Genre': genreName } + }, + 'size': ElsService.DEFAULT_SIZE, + 'from': from + }), {headers: this.headers}) + .map(res => { + return res.json().hits.hits; + }) + .map((hits: Array) => { + const result: Array = []; + hits.forEach((hit) => { + result.push(hit._source); + }); + return result; + }); + } + getArtistSongs(artistName: string, from: number = 0): Observable { console.info('getArtistSongs- Artist name: ' + artistName + ' - from: ' + from); return this.http diff --git a/dashboard/src/app/genre/genre.component.css b/dashboard/src/app/genre/genre.component.css new file mode 100644 index 0000000..e69de29 diff --git a/dashboard/src/app/genre/genre.component.html b/dashboard/src/app/genre/genre.component.html new file mode 100644 index 0000000..525c4c0 --- /dev/null +++ b/dashboard/src/app/genre/genre.component.html @@ -0,0 +1,28 @@ +
+

{{genreName}}

+ + + + + + + + + + + + + + + + + + + + + + + + +
NameArtistAlbumAlbum ArtistPlay CountGenre
{{song['Track Number'] ? (("0" + song['Track Number']).slice(-2)) : "--"}}{{song.Name}}{{song.Artist}}{{song.Album}}{{song['Album Artist']}}{{song['Play Count']}}{{song.Genre}}
+
diff --git a/dashboard/src/app/genre/genre.component.spec.ts b/dashboard/src/app/genre/genre.component.spec.ts new file mode 100644 index 0000000..e35a5e0 --- /dev/null +++ b/dashboard/src/app/genre/genre.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GenreComponent } from './genre.component'; + +describe('GenreComponent', () => { + let component: GenreComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ GenreComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(GenreComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/dashboard/src/app/genre/genre.component.ts b/dashboard/src/app/genre/genre.component.ts new file mode 100644 index 0000000..74f5d77 --- /dev/null +++ b/dashboard/src/app/genre/genre.component.ts @@ -0,0 +1,47 @@ +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute, Params } from '@angular/router'; + +import { ElsService } from '../els.service'; + +import { Song } from '../object/song'; + +@Component({ + selector: 'app-genre', + templateUrl: './genre.component.html', + styleUrls: ['./genre.component.css'] +}) +export class GenreComponent implements OnInit { + genreName = ''; + songs: Array = []; + + constructor( + private elsService: ElsService, + private route: ActivatedRoute + ) { } + + ngOnInit() { + this.route.params + .subscribe((params: Params) => this.genreName = params['name']); + + this.loadSongs(); + } + + loadSongs(): any { + this.elsService.getGenreSongs(this.genreName, 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 { + data.forEach(song => { + this.songs.push(song); + }); + } + } + ); + } + +}