Improve lock system + syle

Try to add a loadAll button without success...

dashboard/src/app/artist.component.html

@@ -98,11 +98,11 @@
 <tbody>
     <tr *ngFor="let song of songs | sortBy : 'Album':'Track Number'">
         <td>{{song['Track Number'] ? (("0" + song['Track Number']).slice(-2)) : "--"}}</td>
-        <td [title]="song.Name">{{song.Name}}</td>
-        <td [title]="song.Artist"><a [routerLink]="['/artist', song.Artist]">{{song.Artist}}</a></td>
-        <td [title]="song.Album"><a [routerLink]="['/album', song.Album]">{{song.Album}}</a></td>
-        <td [title]="song.Album">{{song['Album Artist'] ? song['Album Artist'] : "-" }}</td>
-        <td [title]="song['Play Count']">{{song['Play Count']}}</td>
+        <td>{{song.Name}}</td>
+        <td><a [routerLink]="['/artist', song.Artist]">{{song.Artist}}</a></td>
+        <td><a [routerLink]="['/album', song.Album]">{{song.Album}}</a></td>
+        <td>{{song['Album Artist'] ? song['Album Artist'] : "-" }}</td>
+        <td>{{song['Play Count']}}</td>
     </tr>
 </tbody>
 </table>
@@ -113,11 +113,11 @@
 
 <!-- Go to Top Button-->
 <button type="button" class="btn btn-warning btn-top" [class.btn-top-is-visible]="atBottom"
-    aria-label="Top" (click)="scrollTop()">
+    aria-label="Top" (click)="scrollTop()" title="Go back to Top!">
     <span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span>
 </button>
 <button type="button" class="btn btn-primary btn-top btn-sort" [class.btn-top-is-visible]="sortable"
-    aria-label="Top" (click)="sort()">
+    aria-label="Top" (click)="sort()" title="Sort by Album & Track Number">
     <span class="glyphicon glyphicon-sort-by-attributes" aria-hidden="true"></span>
 </button>
 </div>

dashboard/src/app/artist.component.ts

@@ -29,7 +29,7 @@ export class ArtistComponent implements OnInit {
   atBottom: boolean = false;
   sortable: boolean = false;
 
-  lockLoadData: boolean = true;
+  lockLoadData: boolean = false;
 
   ngOnInit(): void {
     this.route.params
@@ -42,6 +42,12 @@ export class ArtistComponent implements OnInit {
 
   // TODO Duplicate code!
   loadSongs(): void {
+    if (this.lockLoadData) {
+      console.debug("Loading data locked");
+      return;
+    }
+
+    this.lockLoadData = true;
     this.elsService.getArtistSongs(this.artistName, this.songs.length).subscribe(
       data => {
         this.moreDataAvailable = data.length == ElsService.DEFAULT_SIZE;
@@ -56,6 +62,7 @@ export class ArtistComponent implements OnInit {
             this.songs.push(song);
           });
         }
+        console.debug("Unlock load data");
         this.lockLoadData = false;
       }
     );
@@ -73,9 +80,8 @@ export class ArtistComponent implements OnInit {
    * @param event scroll event
    */
   onScroll(event: any) {
-    if (this.moreDataAvailable && !this.lockLoadData &&
+    if (this.moreDataAvailable &&
           (window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
-        this.lockLoadData = true;
         this.loadSongs();
     }
 

dashboard/src/app/els.service.ts

@@ -173,7 +173,6 @@ export class ElsService {
       .map((hits: Array<any>) => {
         // Theorically, my script prevent to found two documents with this query.
         // But Prevention is better than cure as Shakespeare said
-        console.log(hits.length);
         if (hits.length < 1) {
           console.info('No artist "' + artistName + '" found.');
           return undefined;