Start to show album

dashboard/requestAlbum.txt

@@ -0,0 +1,44 @@
+POST http://localhost:9200/itunessongs/_search
+content-type: application/json
+User-Agent: vscode-restclient
+
+{
+    "query": {
+        "match" : {
+            "Album" : {
+                "query": "Our Love To Admire",
+                 "operator" : "and"
+            }
+        }
+    },
+    "size": 20
+}
+
+POST http://localhost:9200/itunessongs/_search
+content-type: application/json
+User-Agent: vscode-restclient
+
+{
+    "query": {
+        "match_phrase" : {
+            "Album" : "Our Love"
+        }
+    },
+    "size": 20
+}
+
+POST http://localhost:9200/itunessongs/_search
+content-type: application/json
+User-Agent: vscode-restclient
+
+{
+    "query": {
+        "bool": {
+            "must": [
+                {"match_phrase" : { "Album" : "Our Love" }},
+                {"match_phrase" : { "Artist" : "Caribou." }}
+            ]
+        }
+    },
+    "size": 20
+}

dashboard/src/app/album.component.html

@@ -0,0 +1,9 @@
+<h1>Test</h1>
+
+<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}})
+    </li>
+</ul>

dashboard/src/app/album.component.ts

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

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

@@ -2,6 +2,7 @@ import { NgModule }             from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 import { DashboardComponent }   from './dashboard.component';
+import { AlbumComponent }   from './album.component';
 import { HeroesComponent }      from './heroes.component';
 import { HeroDetailComponent }  from './hero-detail.component';
 
@@ -9,7 +10,8 @@ const routes: Routes = [
   { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
   { path: 'dashboard',  component: DashboardComponent },
   { path: 'detail/:id', component: HeroDetailComponent },
-  { path: 'heroes',     component: HeroesComponent }
+  { path: 'heroes',     component: HeroesComponent },
+  { path: 'album/:name',      component: AlbumComponent }
 ];
 
 @NgModule({

dashboard/src/app/app.module.ts

@@ -11,12 +11,15 @@ 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 { HeroService }         from './hero.service';
 
 import { ElsService }         from './els.service';
 
 import { AppRoutingModule } from './app-routing.module'
 
+import { SortPipe } from './sortby.pipe'
+
 @NgModule({
   imports:      [
     BrowserModule,
@@ -29,7 +32,9 @@ import { AppRoutingModule } from './app-routing.module'
     AppComponent,
     HeroDetailComponent,
     HeroesComponent,
-    DashboardComponent
+    DashboardComponent,
+    AlbumComponent,
+    SortPipe
   ],
   providers: [
     HeroService,

dashboard/src/app/dashboard.component.html

@@ -16,5 +16,5 @@
 </div>
 
 <div *ngFor="let e of mostPlayedSongs">
-  <h4>{{e['Play Count']}}: {{e.Name}} - {{e.Artist}}</h4>
+  <h4>{{e['Play Count']}}: {{e.Name}} - {{e.Artist}} - {{e.Album}}</h4>
 </div>

dashboard/src/app/els.service.ts

@@ -64,6 +64,23 @@ export class ElsService {
       // });
   }
 
+  getAlbumSongs(albumName: string): Observable<Song[]> {
+    return this.http
+      .post(this.elsUrl + "song/_search",
+            JSON.stringify({"query":{"match_phrase":{"Album":albumName}},"size": 20}), // 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;
+      });
+  }
+
   private handleError(error: any): Promise<any> {
     console.error('An error occurred', error); // for demo purposes only
     return Promise.reject(error.message || error);

dashboard/src/app/object/song.ts

@@ -2,4 +2,6 @@ export class Song {
     Name: string;
     Artist: string;
     "Play Count": number;
+    Album: string;
+    "Track Number": number; // TODO Default property
 }

dashboard/src/app/sortby.pipe.ts

@@ -0,0 +1,35 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({name: "sortBy"})
+export class SortPipe implements PipeTransform {
+  transform(array: Array<string>, args: string): Array<string> {
+    array.sort((a: any, b: any) => {
+			console.log("a: " + a[args]);
+			console.log("b: " + b[args]);
+			if (a[args] == undefined && b[args] == undefined) {
+				console.log("und: " + 0)
+				return 0;
+			}
+			if (a[args] == undefined && b[args] != undefined) {
+				console.log("und: " + "-1")
+				return -1;
+			}
+			if (a[args] != undefined && b[args] == undefined) {
+				console.log("und: " + "-1")
+				return 1;
+			}
+
+	    if ( a[args] < b[args] ){
+				console.log(-1);
+	    	return -1;
+	    }else if( a[args] > b[args] ){
+				console.log(1);
+				return 1;
+	    }else{
+				console.log(0);
+	    	return 0;
+	    }
+    });
+    return array;
+  }
+}