Add rating + love for artist view

NOTE: Need to refactor to have same layout for album/artist

dashboard/src/app/artist/artist.component.css

@@ -0,0 +1,18 @@
+.star {
+  color:rgb(38, 135, 251);
+}
+
+.table tbody > tr > td.star {
+  white-space: nowrap;
+}
+
+.heart {
+  color: rgb(251, 18, 79);
+  animation: pulse 1s ease infinite
+}
+
+@keyframes pulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.3); }
+  100% { transform: scale(1); }
+}

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

@@ -96,6 +96,8 @@
           <th>Album Artist</th>
           <th>Play Count</th>
           <th>Genre</th>
+          <th>Bit Rate</th>
+          <th>Rating</th>
       </tr>
   </thead>
   <tbody>
@@ -108,6 +110,22 @@
           <td>{{song['Album Artist'] ? song['Album Artist'] : "-" }}</td>
           <td>{{song['Play Count']}}</td>
           <td><a [routerLink]="['/genre', song.Genre]">{{song.Genre}}</a></td>
+          <td>{{song['Bit Rate']}}</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 *ngIf="song.Loved"><span class="glyphicon glyphicon-heart heart"></span></td>
       </tr>
   </tbody>
   </table>

dashboard/src/app/artist/artist.component.ts

@@ -11,7 +11,7 @@ import { SortByPipe } from './../sort-by.pipe';
 @Component({
   selector: 'app-artist',
   templateUrl: './artist.component.html',
-  styleUrls: [ './../album/album.component.css', './../dashboard.component.css' ]
+  styleUrls: [ './../album/album.component.css', './../dashboard.component.css', './artist.component.css' ]
 })
 
 export class ArtistComponent implements OnInit {