WIP: Implement frontend

frontend/src/app/components/game-cover/game-cover.component.scss

@@ -6,6 +6,6 @@
   @include mat.elevation(4);
 
   &:hover {
-    @include mat.elevation(12);
+    @include mat.elevation(24);
   }
 }

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

@@ -1,2 +1,8 @@
 <mat-toolbar role="heading">
+
+  <span class="spacer"></span>
+
+  <button mat-icon-button (click)="reloadLibrary()">
+    <mat-icon>youtube_searched_for</mat-icon>
+  </button>
 </mat-toolbar>

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

@@ -1,9 +1,8 @@
 import {Component, OnInit} from '@angular/core';
 import {NavMenuItem} from '../../models/objects/NavMenuItem';
-import {Title} from '@angular/platform-browser';
-import {Config} from '../../config/Config';
-import {Icon} from '../../models/enums/Icon';
-import {DropDownMenuItem} from "../../models/objects/DropDownMenuItem";
+import {LibraryService} from "../../services/library.service";
+import {MatSnackBar} from '@angular/material/snack-bar';
+import {timeInterval} from "rxjs";
 
 @Component({
   selector: 'app-header',
@@ -12,29 +11,19 @@ import {DropDownMenuItem} from "../../models/objects/DropDownMenuItem";
 })
 export class HeaderComponent implements OnInit {
 
-  tabNavItems: NavMenuItem[] = [
-    new NavMenuItem('Servers', Icon.dns, '/servers', true),
-    new NavMenuItem('Games', Icon.controller, '/games', true),
-    new NavMenuItem('Info', Icon.info, '/info', true),
-    new NavMenuItem('Config', Icon.settings, '/config', true),
-  ];
-
-  dropDownItems: DropDownMenuItem[] = [
-    new DropDownMenuItem('Log out', Icon.lock_open, () => {
-      alert("Logout not implemented");
-    }, true)
-  ];
-
   activeItem: NavMenuItem | undefined;
 
-  constructor(private titleService: Title) {
+  constructor(private libraryService: LibraryService,
+              private snackBar: MatSnackBar) {
   }
 
   ngOnInit() {
   }
 
-  setActiveItem(item: NavMenuItem) {
-    this.activeItem = item;
-    this.titleService.setTitle(`${Config.baseTitle} - ${item.title}`);
+  reloadLibrary() {
+    this.libraryService.scanLibrary().pipe(timeInterval()).subscribe({
+      next: value => this.snackBar.open(`Library scan completed in ${Math.trunc(value.interval/1000)} seconds.`),
+      error: error => this.snackBar.open(`Error while scanning library: ${error}`)
+    })
   }
 }

frontend/src/app/components/library-overview/library-overview.component.css

@@ -10,3 +10,16 @@
   align-items: center;
   justify-content: center;
 }
+
+.content {
+  padding: 16px;
+}
+
+.content > mat-card {
+  margin-bottom: 16px;
+}
+
+.column-label {
+  margin-right: 8px;
+  font-size: 1rem;
+}

frontend/src/app/components/library-overview/library-overview.component.html

@@ -3,12 +3,16 @@
     <mat-spinner></mat-spinner>
     <h2>Loading library...</h2>
   </div>
-  <div fxLayout="row" fxLayoutAlign="center center">
-    <div *ngIf="!this.loading && this.detectedGames.length === 0">
-      <h2>Your game library is empty!</h2>
-    </div>
-    <div fxLayout="row" fxLayoutGap="12px" [style.margin-top.px]="12" *ngIf="!this.loading && this.detectedGames.length > 0">
-      <game-cover fxLayout="column" *ngFor="let game of detectedGames" [game]="game"></game-cover>
+
+  <div fxLayout="row" fxLayoutAlign="center center" *ngIf="!this.loading && this.detectedGames.length === 0">
+    <h2>Your game library is empty!</h2>
+  </div>
+
+  <div class="content">
+    <div fxLayout="row wrap" fxLayoutGap="16px grid">
+      <div fxFlex="25% 1" fxFlex.xs="100%" fxFlex.sm="33%" *ngFor="let game of detectedGames">
+        <game-cover [game]="game"></game-cover>
+      </div>
     </div>
   </div>
 </div>