Add artist part

dashboard/src/app/app-routing.module.ts

@@ -3,6 +3,7 @@ import { RouterModule, Routes } from '@angular/router';
 
 import { DashboardComponent }   from './dashboard.component';
 import { AlbumComponent }   from './album.component';
+import { ArtistComponent }   from './artist.component';
 import { HeroesComponent }      from './heroes.component';
 import { HeroDetailComponent }  from './hero-detail.component';
 
@@ -12,6 +13,7 @@ const routes: Routes = [
   { path: 'detail/:id', component: HeroDetailComponent },
   { path: 'heroes',     component: HeroesComponent },
   { path: 'album/:name',      component: AlbumComponent }
+  { path: 'artist/:name',      component: ArtistComponent }
 ];
 
 @NgModule({

dashboard/src/app/app.module.ts

@@ -11,7 +11,8 @@ import { AppComponent }        from './app.component';
 import { HeroDetailComponent } from './hero-detail.component';
 import { HeroesComponent }     from './heroes.component';
 import { DashboardComponent }  from './dashboard.component'
-import { AlbumComponent }  from './album.component'
+import { AlbumComponent }      from './album.component'
+import { ArtistComponent }     from './artist.component'
 import { HeroService }         from './hero.service';
 
 import { ElsService }         from './els.service';
@@ -34,6 +35,7 @@ import { SortPipe } from './sortby.pipe'
     HeroesComponent,
     DashboardComponent,
     AlbumComponent,
+    ArtistComponent,
     SortPipe
   ],
   providers: [

dashboard/src/app/artist.component.html

@@ -0,0 +1,7 @@
+<h1>{{albumName}}</h1>
+
+<ul class="heroes">
+    <li *ngFor="let song of songs | sortBy : 'Track Number'" >
+        {{("0" + song['Track Number']).slice(-2)}}. {{song.Name}} -- {{song.Artist}} -- {{song.Album}}
+    </li>
+</ul>

dashboard/src/app/artist.component.ts

@@ -0,0 +1,35 @@
+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';
+
+@Component({
+  selector: 'artist-component',
+  templateUrl: './artist.component.html'
+//   styleUrls: [ './album.component.css' ]
+})
+
+export class ArtistComponent implements OnInit {
+  constructor(
+    private elsService: ElsService,
+    private route: ActivatedRoute,
+    private location: Location
+  ) { }
+
+  artistName = "";
+
+  songs: Array<Song> = [];
+
+  ngOnInit(): void {
+    this.route.params
+      .subscribe((params: Params) => this.artistName = params['name']);
+
+    this.elsService.getArtistSongs(this.artistName).subscribe(
+      data => {
+        this.songs = data;
+      }
+    );
+  }
+}

dashboard/src/app/els.service.ts

@@ -103,6 +103,24 @@ export class ElsService {
       });
   }
 
+  getArtistSongs(artistName: string, from: number = 0): Observable<Song[]> {
+    console.debug("Artist name: " + artistName + " - from: " + from);
+    return this.http
+      .post(this.elsUrl + "song/_search",
+            JSON.stringify({"query":{"match_phrase":{"Artist":artistName}},"size": ElsService.DEFAULT_SIZE, "from": from}), // TODO Dynamic size
+            {headers: this.headers})
+      .map(res => {
+        return res.json().hits.hits;
+      })
+      .map((hits: Array<any>) => {
+        let result:Array<Song> = [];
+        hits.forEach((hit) => {
+          result.push(hit._source);
+        });
+        return result;
+      });
+  }
+
   getAlbum(albumName: string): Observable<Album> {
     return this.http
       .post(this.elsUrl + "album/_search",