(front) Create 'To Sort' component

With a specific ELS Services to query element in a specific folder

TODO: Parameterize folder

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

@@ -7,6 +7,7 @@ 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';
+import { ToSortComponent } from './to-sort/to-sort.component';
 
 const routes: Routes = [
   { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
@@ -15,7 +16,8 @@ const routes: Routes = [
   { path: 'album',      component: AlbumsComponent },
   { path: 'artist/:name',      component: ArtistComponent },
   { path: 'genre/:name',      component: GenreComponent },
-  { path: 'top-played',      component: TopPlayedComponent }
+  { path: 'top-played',      component: TopPlayedComponent },
+  { path: 'to-sort',      component: ToSortComponent }
 ];
 
 @NgModule({

dashboard/src/app/app.component.html

@@ -1,5 +1,8 @@
 <nav>
-  <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>
+  <div class="btn-top">
+  <a routerLink="/dashboard" routerLinkActive="active"><span class="glyphicon glyphicon-home"></span></a><br />
+  <a routerLink="/album" routerLinkActive="active"><span class="glyphicon glyphicon-cd"></span></a>
+  <a routerLink="/to-sort" routerLinkActive="active"><span class="glyphicon glyphicon-sort"></span></a>
+</div>
 </nav>
 <router-outlet></router-outlet>

dashboard/src/app/app.module.ts

@@ -21,6 +21,7 @@ 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';
+import { ToSortComponent } from './to-sort/to-sort.component';
 
 @NgModule({
   imports: [
@@ -41,7 +42,8 @@ import { AlbumsComponent } from './albums/albums.component';
     SortByPipe,
     ConvertSizeToStringPipe,
     TopPlayedComponent,
-    RoundPipe
+    RoundPipe,
+    ToSortComponent
   ],
   providers: [
     ElsService,

dashboard/src/app/els-sort.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ElsSortService } from './els-sort.service';
+
+describe('ElsSortService', () => {
+  let service: ElsSortService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ElsSortService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

dashboard/src/app/els-sort.service.ts

@@ -0,0 +1,147 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { map, catchError } from 'rxjs/operators';
+import { ElsService } from './els.service';
+import { Album } from './model/album';
+import { Bucket } from './model/bucket';
+import { Song } from './model/song';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ElsSortService extends ElsService {
+
+  constructor(protected http: HttpClient) {
+    super(http);
+  }
+
+  getTime(): Promise<number> {
+    return this.http
+      .post<any>(this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_SEARCH,
+            JSON.stringify({
+              query: {
+                bool: {
+                  must_not: [
+                    {
+                      term: {
+                        "Location.tree": "/F:/Musique"
+                      }
+                    }
+                  ]
+                }
+              },
+              aggs: {
+                sum_time: {
+                  sum: { field: 'Total Time'}
+                }
+              },
+              'size': 0
+            }), {headers: this.headers})
+      .toPromise()
+      .then(res => res.aggregations.sum_time.value as number)
+      .catch(error => this.handleError(error, 'getTime()'));
+  }
+
+  getSize(): Promise<number> {
+    return this.http
+      .post<any>(this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_SEARCH,
+            JSON.stringify({
+              query: {
+                bool: {
+                  must_not: [
+                    {
+                      term: {
+                        "Location.tree": "/F:/Musique"
+                      }
+                    }
+                  ]
+                }
+              },
+              aggs: {
+                sum_time: {
+                  sum: { field: 'Size' }
+                }
+              },
+              'size': 0
+            }), {headers: this.headers})
+      .toPromise()
+      .then(res => res.aggregations.sum_time.value as number)
+      .catch(error => this.handleError(error, 'getSize()'));
+  }
+
+  getCountSong(): Promise<number> {
+    return this.http
+      .post<any>(this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_COUNT,
+        JSON.stringify({
+          query: {
+              bool: {
+                  must_not: [
+                      {
+                          term: {
+                              "Location.tree": "/F:/Musique"
+                          }
+                      }
+                  ]
+              }
+          }
+        }), {headers: this.headers})
+      .toPromise()
+      .then(res => res.count as number)
+      .catch(error => this.handleError(error, 'getCountSong()'));
+  }
+
+  getCountNeverListenSong(): Promise<number> {
+    return this.http
+      .post<any>(this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_COUNT,
+            JSON.stringify({
+              'query': {
+                'bool': {
+                  'must_not': [
+                    {
+                    'exists': { 'field': 'Play Count'}
+                  }, {
+                  term: {
+                    "Location.tree": "/F:/Musique"
+                  } }
+                ]
+                }
+              }
+            }), {headers: this.headers})
+      .toPromise()
+      .then(res => res.count as number)
+      .catch(error => this.handleError(error, 'getCountNeverListenSong()'));
+  }
+
+  getAlbums(): Observable<Bucket[]> {
+    return this.http
+      .post(this.elsUrl + ElsService.SONG_INDEX_NAME + ElsService.ACTION_SEARCH,
+        JSON.stringify({
+          query: {
+            bool: {
+              must_not: [
+                {
+                  term: {
+                    "Location.tree": "/F:/Musique"
+                  }
+                }
+              ]
+            }
+          },
+          'size': 0,
+          'aggs': {
+            'albums' : {
+              'terms': {
+                'field' : 'Album.raw',
+                'order': { '_term': 'asc' },
+                'size': 50
+              }
+            }
+          }
+        }), {headers: this.headers})
+      .pipe(
+        map(res => this.responseAggregationToBucket(res, "albums")),
+        catchError(error => this.handleError(error, 'getAlbums'))
+      );
+  }
+}

dashboard/src/app/els.service.ts

@@ -337,7 +337,7 @@ export class ElsService {
       // TODO Take in consideration "sum_other_doc_count"
   }
 
-  getArtistFromAlbumName(albumname: string): Observable<Album[]> {
+  getArtistFromAlbumName(albumname: string): Observable<Album[]> { // TODO Rename ?
     return this.http
       .post<any>(this.elsUrl + ElsService.ALBUM_INDEX_NAME + ElsService.ACTION_SEARCH,
             JSON.stringify({
@@ -406,7 +406,7 @@ export class ElsService {
    *
    * @param res Response to process
    */
-  private responseToSongs(res: any): Song[] {
+  protected responseToSongs(res: any): Song[] {
     const result: Array<Song> = [];
     res.hits.hits.forEach((hit) => {
       result.push(hit._source);
@@ -444,7 +444,7 @@ export class ElsService {
    * @param res Response to process
    * @param name Name of aggregation
    */
-  private responseAggregationToBucket(res: any, name: string): Bucket[] {
+  protected responseAggregationToBucket(res: any, name: string): Bucket[] {
     const result: Array<Bucket> = [];
     res.aggregations[name].buckets.forEach((bucket) => {
       result.push(bucket);

dashboard/src/app/to-sort/to-sort.component.css

@@ -0,0 +1,38 @@
+.panel-stat {
+  min-height: 102px;
+}
+
+.panel-green {
+background-color: #16a085;
+color:white;
+}
+.panel-yellow {
+background-color: #f1c40f;
+color:white;
+}
+
+.panel-red {
+background-color: #d9534f;
+color:white;
+}
+
+.panel-purple {
+background-color: #9b59b6;
+color:white;
+}
+
+.panel-blue {
+background-color: #3498db;
+color:white;
+}
+
+.stats_icon {
+font-size: 3em;
+}
+
+.circle {
+border-radius: 50%;
+background-color: #9b59b6;
+margin: 0 auto;
+
+}

dashboard/src/app/to-sort/to-sort.component.html

@@ -0,0 +1,130 @@
+<div class="container">
+  <h1>To sort Songs - </h1>
+
+<br />
+<div class="row cardAdmin">
+  <div class="col-lg-3 col-md-3">
+      <div class="panel panel-blue">
+          <div class="panel-heading">
+              <div class="row">
+                  <div class="col-xs-3">
+                      <span class="glyphicon glyphicon-time stats_icon"></span>
+                  </div>
+                  <div class="col-xs-9 text-right">
+                      <div>
+                          <h3 *ngIf="!totalTime"><span class="glyphicon glyphicon-refresh loading"></span></h3>
+                          <h3 *ngIf="totalTime">{{totalTime | convertMs}}</h3>
+                      </div>
+                      <div><br>Total time ({{totalTime | convertMoreExact}})</div>
+                  </div>
+              </div>
+          </div>
+      </div>
+  </div>
+  <div class="col-lg-3 col-md-3">
+      <div class="panel panel-green">
+          <div class="panel-heading">
+              <div class="row">
+                  <div class="col-xs-3">
+                      <span class="glyphicon glyphicon-hdd stats_icon"></span>
+                  </div>
+                  <div class="col-xs-9 text-right">
+                      <div>
+                          <h3 *ngIf="!totalSize"><span class="glyphicon glyphicon-refresh loading"></span></h3>
+                          <h3 *ngIf="totalSize">{{totalSize | convertSizeToString}}</h3>
+                      </div>
+                      <div><br>Total size</div>
+                  </div>
+              </div>
+          </div>
+      </div>
+  </div>
+  <div class="col-lg-3 col-md-3">
+      <div class="panel panel-yellow">
+          <div class="panel-heading">
+              <div class="row">
+                  <div class="col-xs-3">
+                      <span class="glyphicon glyphicon-play stats_icon"></span>
+                  </div>
+                  <div class="col-xs-9 text-right">
+                      <div>
+                          <h3 *ngIf="!trackCountSong"><span class="glyphicon glyphicon-refresh loading"></span></h3>
+                          <h3 *ngIf="trackCountSong">{{trackCountSong}}</h3>
+                      </div>
+                      <div><br>Total Songs</div>
+                  </div>
+              </div>
+          </div>
+      </div>
+  </div>
+  <div class="col-lg-3 col-md-3">
+      <div class="panel panel-red">
+          <div class="panel-heading">
+              <div class="row">
+                  <div class="col-xs-3">
+                      <span class="glyphicon glyphicon-stop stats_icon"></span>
+                  </div>
+                  <div class="col-xs-9 text-right">
+                      <div>
+                          <h3 *ngIf="!neverListenSong"><span class="glyphicon glyphicon-refresh loading"></span></h3>
+                          <h3 *ngIf="neverListenSong">{{neverListenSong}}</h3>
+                      </div>
+                      <div><br>Never list. songs (~{{neverListenSong / trackCountSong * 100 | round}}%)</div>
+                  </div>
+              </div>
+          </div>
+      </div>
+  </div>
+</div>
+
+<div class="col-md-12">
+  <table class="table table-striped" style="white-space: nowrap;">
+    <thead>
+        <tr>
+            <th>Album</th>
+            <th>Track Count</th>
+            <th>Artist/Album Artist</th>
+            <th>Play Count</th>
+            <th>Rating</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr *ngFor="let album of toSortAlbum">
+            <td>
+              <a [routerLink]="['/album', album.key]">{{album.key}}</a>&nbsp;
+            </td>
+
+            <td>{{albums[album.key]['Track Count']}}</td>
+
+            <ng-template [ngIf]="albums[album.key]['Album Artist']" [ngIfElse]="artistSection">
+              <td>
+                  <a [routerLink]="['/artist', albums[album.key]['Album Artist']]">{{albums[album.key]['Album Artist']}}</a>&nbsp;
+              </td>
+            </ng-template>
+
+            <ng-template #artistSection>
+              <td>
+                  <a [routerLink]="['/artist', albums[album.key].Artist[0]]">{{albums[album.key].Artist}}</a>&nbsp;
+              </td>
+            </ng-template>
+
+            <ng-template #artistSection>
+              <td>
+                  <a [routerLink]="['/artist', albums[album.key].Artist[0]]">{{albums[album.key].Artist}}</a>&nbsp;
+              </td>
+            </ng-template>
+
+            <td>
+              {{albums[album.key]['Play Count']}} ({{albums[album.key]['Play Count']/albums[album.key]['Track Count'] | number:'1.0-0'}}/songs)
+            </td>
+
+            <td class="star" [title]="(albums[album.key]['Album Rating Computed']?'Computed Rating: ':'Rating: ') + albums[album.key]['Album Rating']">
+            <span *ngFor="let item of numberToArray(albums[album.key]['Album Rating'], 20)">
+              <span class="glyphicon" [ngClass]="albums[album.key]['Album Rating Computed']?'glyphicon-star-empty':'glyphicon-star'"></span>
+            </span>
+            </td>
+        </tr>
+    </tbody>
+  </table>
+</div>
+</div>

dashboard/src/app/to-sort/to-sort.component.spec.ts

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

dashboard/src/app/to-sort/to-sort.component.ts

@@ -0,0 +1,89 @@
+import { Component, OnInit } from '@angular/core';
+import { ElsSortService } from '../els-sort.service';
+import { Album } from '../model/album';
+import { Bucket } from '../model/bucket';
+import { Song } from '../model/song';
+
+import { Utils } from '../utils';
+
+@Component({
+  selector: 'app-to-sort',
+  templateUrl: './to-sort.component.html',
+  styleUrls: ['./to-sort.component.css']
+})
+export class ToSortComponent implements OnInit {
+  numberToArray = Utils.numberToArray;
+  // Stats var
+  totalTime = 0;
+  totalSize = 0;
+  trackCountSong = 0;
+  neverListenSong = 0;
+
+  // Global var
+  toSortAlbum: Bucket[] = [];
+  albums = []
+
+  constructor(private elsService: ElsSortService) { }
+
+  ngOnInit(): void {
+    // **** GET STATS ****//
+    this.elsService.getTime().then(result => this.totalTime = result);
+    this.elsService.getSize().then(result => this.totalSize = result);
+    this.elsService.getCountSong().then(result => this.trackCountSong = result);
+    this.elsService.getCountNeverListenSong().then(result => this.neverListenSong = result);
+
+    // **** GET ALBUMS ****//
+    const tmpToSortAlbums: Bucket[] = [];
+    this.elsService.getAlbums().subscribe(buckets => {
+      buckets.forEach(bucket => {
+        if (tmpToSortAlbums.length === 0) {
+          tmpToSortAlbums.push(bucket);
+        } else {
+          let found = false;
+          tmpToSortAlbums.forEach(element => {
+            if (element.key === bucket.key) {
+              element.doc_count += bucket.doc_count;
+              found = true;
+            }
+          });
+          if (!found) {
+            tmpToSortAlbums.push(bucket);
+          }
+        }
+      });
+
+      this.toSortAlbum = tmpToSortAlbums;
+      this.toSortAlbum.forEach(bucket => this.getAlbum(bucket));
+      // console.log(this.toSortAlbum)
+      // console.log(this.albums)
+    });
+  }
+
+  private getAlbum(albumBucket: Bucket) {
+    // For each bucket.key (album name), get Album document
+    // Use track count to compare
+    this.elsService.getArtistFromAlbumName(albumBucket.key).subscribe(albums => {
+      // Identification of the good album
+      let goodAlbum;
+      if (albums.length > 1) {
+        // More than one result for an album name: search good by track count
+        albums.forEach(album => {
+          if (album['Track Count'] === albumBucket.doc_count) {
+            goodAlbum = album;
+          }
+        });
+      } else {
+        // Just one result for album name
+        goodAlbum = albums[0];
+      }
+
+      // TODO Crap security if no good album found
+      if (goodAlbum == undefined) {
+        goodAlbum = albums[0]
+      }
+
+      this.albums[albumBucket.key] = goodAlbum;
+    });
+  }
+
+}