Finished implementation of frontend functionality.

Styling and bugfixing next

frontend/src/app/components/header/header.component.html

@@ -5,7 +5,11 @@
 
   <span class="spacer"></span>
 
-  <button mat-icon-button (click)="reloadLibrary()">
+  <button mat-icon-button (click)="reloadLibrary()" *ngIf="onLibraryManagementScreen()">
     <mat-icon>youtube_searched_for</mat-icon>
   </button>
+
+  <button mat-icon-button (click)="goToLibraryManagementScreen()">
+    <mat-icon>settings</mat-icon>
+  </button>
 </mat-toolbar>

frontend/src/app/components/header/header.component.ts

@@ -19,7 +19,7 @@ export class HeaderComponent {
   reloadLibrary(): void {
     this.libraryService.scanLibrary().pipe(timeInterval()).subscribe({
       next: value => this.snackBar.open(`Library scan completed in ${Math.trunc(value.interval / 1000)} seconds.`, undefined, {duration: 2000}),
-      error: error => this.snackBar.open(`Error while scanning library: ${error}`, undefined, {duration: 5000})
+      error: error => this.snackBar.open(`Error while scanning library: ${error.error.message}`, undefined, {duration: 5000})
     })
   }
 
@@ -27,8 +27,16 @@ export class HeaderComponent {
     this.router.navigate(['/']);
   }
 
+  goToLibraryManagementScreen(): void {
+    this.router.navigate(['/library-management']);
+  }
+
   notOnLibraryScreen(): boolean {
     return !(this.router.url === "/library");
   }
 
+  onLibraryManagementScreen(): boolean {
+    return this.router.url === "/library-management";
+  }
+
 }

frontend/src/app/components/not-implemented/not-implemented.component.html

@@ -1 +0,0 @@
-<h2 fxLayoutAlign="center center">This component is currently not implemented.</h2>

frontend/src/app/components/not-implemented/not-implemented.component.spec.ts

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

frontend/src/app/components/not-implemented/not-implemented.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-not-implemented',
-  templateUrl: './not-implemented.component.html',
-  styleUrls: ['./not-implemented.component.scss']
-})
-export class NotImplementedComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}