(front) Improve show rating stars

A big simplification of the display of rating

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

@@ -9,6 +9,7 @@
               <th>Track Count</th>
               <th>Artist/Album Artist</th>
               <th>Avg Bit Rate (min)</th>
+              <th>Rating</th>
           </tr>
       </thead>
       <tbody>
@@ -31,6 +32,12 @@
                 {{album['Avg Bit Rate']}}
                 <span *ngIf="album['Avg Bit Rate'] != album['Min Bit Rate']">({{album['Min Bit Rate']}})</span>
               </td>
+
+              <td class="star" [title]="(album['Album Rating Computed']?'Computed Rating: ':'Rating: ') + album['Album Rating']">
+              <span *ngFor="let item of numberToArray(album['Album Rating'], 20)">
+                <span class="glyphicon" [ngClass]="album['Album Rating Computed']?'glyphicon-star-empty':'glyphicon-star'"></span>
+              </span>
+              </td>
           </tr>
       </tbody>
   </table>

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

@@ -3,13 +3,15 @@ import { ElsAlbumService } from '../els-album.service';
 
 import { Album } from '../model/album';
 
+import { Utils } from '../utils';
+
 @Component({
   selector: 'app-albums',
   templateUrl: './albums.component.html',
   styleUrls: ['./albums.component.css']
 })
 export class AlbumsComponent implements OnInit {
-
+  numberToArray = Utils.numberToArray;
   albums: Album[] = [];
   filterQuery = ElsAlbumService.GET_ALBUMS_DEFAULT_QUERY;
 

dashboard/src/app/song-table/song-table.component.css

@@ -43,16 +43,6 @@
 }
 /***  END BOTTOM BUTTON PART  ***/
 
-
-/***  RATING STAR  ***/
-.star {
-    color:rgb(38, 135, 251);
-}
-.table tbody > tr > td.star {
-    white-space: nowrap;
-}
-
-
 /***  HEART  ***/
 .heart {
     color: rgb(251, 18, 79);

dashboard/src/app/song-table/song-table.component.html

@@ -32,20 +32,11 @@
       <td [title]="song['Bit Rate']">
         <span [class]="'signal signal-' + roundBitRate(song['Bit Rate'])"></span>
       </td>
-      <td *ngIf="!song['Rating Computed']" [title]="'Rating: ' + song.Rating" class="star">
-        <span *ngIf="song.Rating >= 20" class="glyphicon glyphicon-star"></span>
-        <span *ngIf="song.Rating >= 40" class="glyphicon glyphicon-star"></span>
-        <span *ngIf="song.Rating >= 60" class="glyphicon glyphicon-star"></span>
-        <span *ngIf="song.Rating >= 80" class="glyphicon glyphicon-star"></span>
-        <span *ngIf="song.Rating >= 100" class="glyphicon glyphicon-star"></span>
-      </td>
-      <td *ngIf="song['Rating Computed']" [title]="'Computed Rating: ' + song.Rating" class="star">
-        <span *ngIf="song.Rating >= 20" class="glyphicon glyphicon-star-empty"></span>
-        <span *ngIf="song.Rating >= 40" class="glyphicon glyphicon-star-empty"></span>
-        <span *ngIf="song.Rating >= 60" class="glyphicon glyphicon-star-empty"></span>
-        <span *ngIf="song.Rating >= 80" class="glyphicon glyphicon-star-empty"></span>
-        <span *ngIf="song.Rating >= 100" class="glyphicon glyphicon-star-empty"></span>
-      </td>
+      <td class="star" [title]="(song['Rating Computed']?'Computed Rating: ':'Rating: ') + song.Rating">
+        <span *ngFor="let item of numberToArray(song.Rating, 20)">
+          <span class="glyphicon" [ngClass]="song['Rating Computed']?'glyphicon-star-empty':'glyphicon-star'"></span>
+        </span>
+        </td>
       <td *ngIf="song.Loved" class="loved">
         <span class="glyphicon glyphicon-heart heart"></span>
       </td>

dashboard/src/app/song-table/song-table.component.ts

@@ -1,4 +1,5 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Utils } from '../utils';
 
 import { Song } from './../model/song';
 import { SortByPipe } from './../pipes/sort-by.pipe';
@@ -9,6 +10,7 @@ import { SortByPipe } from './../pipes/sort-by.pipe';
   styleUrls: ['./song-table.component.css']
 })
 export class SongTableComponent {
+  numberToArray = Utils.numberToArray;
   @Input() songs: Array<Song> = [];
   @Output() private atBottom = new EventEmitter();
 

dashboard/src/app/utils.spec.ts

@@ -0,0 +1,7 @@
+import { Utils } from './utils';
+
+describe('Utils', () => {
+  it('should create an instance', () => {
+    expect(new Utils()).toBeTruthy();
+  });
+});

dashboard/src/app/utils.ts

@@ -0,0 +1,16 @@
+export class Utils {
+
+  /**
+   * Convert a number to an array.
+   * Mainly used for rating: need to convert the number to use a ngFor
+   * @param n number to convert on a array of n cases
+   * @param d if you want to divide number, e.g. by 20 for rating (rating is one value out of one hundred)
+   */
+  public static numberToArray(n: number, d: number = 1): any[] {
+    if (!n) {
+      return Array(0)
+    }
+
+    return Array(n / d);
+  }
+}

dashboard/src/styles.css

@@ -30,6 +30,13 @@ body, input[text], button {
   to { -webkit-transform: rotate(360deg);}
 }
 
+/***  RATING STAR  ***/
+.star {
+  color:rgb(38, 135, 251);
+}
+.table tbody > tr > td.star {
+  white-space: nowrap;
+}
 
 /* . . . */
 /* everywhere else */