(front) Add "All albums" page

Add nav button + button on dashboard

dashboard/src/app/albums/albums.component.html

@@ -0,0 +1,20 @@
+<div class="col-md-12">
+  <table class="table table-striped">
+      <thead>
+          <tr>
+              <th>Album</th>
+              <th>Track Count</th>
+              <th>Album Artist</th>
+              <th>Avg. Bit Rate</th>
+          </tr>
+      </thead>
+      <tbody>
+          <tr *ngFor="let album of albums">
+              <td>{{album.Album}}</td>
+              <td>{{album['Track Count']}}</td>
+              <td>{{album['Album Artist'] ? album['Album Artist'] : album.Artist }}</td>
+              <td>{{album['Avg Bit Rate']}}</td>
+          </tr>
+      </tbody>
+  </table>
+</div>

dashboard/src/app/albums/albums.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AlbumsComponent } from './albums.component';
+
+describe('AlbumsComponent', () => {
+  let component: AlbumsComponent;
+  let fixture: ComponentFixture<AlbumsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AlbumsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AlbumsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

dashboard/src/app/albums/albums.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+
+import { ElsService } from "../els.service";
+import { Album } from '../model/album';
+
+@Component({
+  selector: 'app-albums',
+  templateUrl: './albums.component.html',
+  styleUrls: ['./albums.component.css']
+})
+export class AlbumsComponent implements OnInit {
+
+  albums: Album[] = [];
+
+  constructor(private elsService: ElsService) { }
+
+  ngOnInit(): void {
+    this.elsService.getAlbums(20).subscribe(data => { this.albums = data; console.log(data);});
+  }
+
+}

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

@@ -6,11 +6,13 @@ import { AlbumComponent } from './album/album.component';
 import { ArtistComponent } from './artist/artist.component';
 import { GenreComponent } from './genre/genre.component';
 import { TopPlayedComponent } from './top-played/top-played.component';
+import { AlbumsComponent } from './albums/albums.component';
 
 const routes: Routes = [
   { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
   { path: 'dashboard',  component: DashboardComponent },
   { path: 'album/:name',      component: AlbumComponent },
+  { path: 'album',      component: AlbumsComponent },
   { path: 'artist/:name',      component: ArtistComponent },
   { path: 'genre/:name',      component: GenreComponent },
   { path: 'top-played',      component: TopPlayedComponent }

dashboard/src/app/app.component.html

@@ -1,4 +1,5 @@
 <nav>
-  <a class="btn-top" routerLink="/dashboard" routerLinkActive="active"><span class="glyphicon glyphicon-home"></span></a>
+  <a class="btn-top" routerLink="/dashboard" routerLinkActive="active"><span class="glyphicon glyphicon-home"></span></a><br />
+  <a class="btn-top" routerLink="/album" routerLinkActive="active"><span class="glyphicon glyphicon-cd"></span></a>
 </nav>
 <router-outlet></router-outlet>

dashboard/src/app/app.module.ts

@@ -19,6 +19,7 @@ import { ConvertMoreExactPipe } from './pipes/convert-more-exact.pipe';
 import { SortByPipe } from './pipes/sort-by.pipe';
 import { ConvertSizeToStringPipe } from './pipes/convert-size-to-string.pipe';
 import { RoundPipe } from './pipes/round.pipe';
+import { AlbumsComponent } from './albums/albums.component';
 
 @NgModule({
   imports: [
@@ -30,6 +31,7 @@ import { RoundPipe } from './pipes/round.pipe';
     AppComponent,
     DashboardComponent,
     AlbumComponent,
+    AlbumsComponent,
     ArtistComponent,
     GenreComponent,
     SongTableComponent,

dashboard/src/app/dashboard/dashboard.component.html

@@ -96,6 +96,8 @@
     </table>
 </div>
 
+<input type="button" class="btn btn-primary btn-lg btn-block" value="All Albums" routerLink="/album">
+
 <div class="col-md-12">
 <h3>Top Played Songs</h3>
     <table class="table table-striped">

dashboard/src/app/els.service.ts

@@ -244,6 +244,25 @@ export class ElsService {
       );
   }
 
+  getAlbums(size: number): Observable<Album[]> {
+    // http://localhost:9200/itunes-albums/_search
+    console.info('getAlbums');
+    return this.http
+      .post(this.elsUrl + ElsService.ALBUM_INDEX_NAME + ElsService.ACTION_SEARCH,
+        JSON.stringify({
+          'sort': [ {
+            'Avg Bit Rate': {
+              'order': 'asc'
+            }
+          } ],
+          'size': size
+        }), {headers: this.headers})
+      .pipe(
+        map(res => this.responseToAlbums(res)),
+        catchError(error => this.handleError(error, 'getAlbums'))
+      );
+  }
+
   getArtist(artistName: string): Observable<Artist> {
     return this.http
       .post(this.elsUrl + ElsService.ARTIST_INDEX_NAME + ElsService.ACTION_SEARCH,