WIP: Implement frontend

Implemented 1st version of game-detail-view

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

@@ -14,12 +14,3 @@
 .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

@@ -8,11 +8,14 @@
     <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">
+  <div class="content" fxLayout="row" fxFlexFill="100" *ngIf="!this.loading && this.detectedGames.length > 0">
+    <div fxFlex="10" fxHide fxShow.gt-md><!--SPACER--></div>
+    <div fxFlex="0 1 20"><!--FILTER--></div>
+    <div fxFlex fxLayout="row wrap" fxLayoutGap="16px grid">
+      <div *ngFor="let game of detectedGames">
         <game-cover [game]="game"></game-cover>
       </div>
     </div>
+    <div fxFlex="0 1 10" fxHide fxShow.gt-lg><!--SPACER--></div>
   </div>
 </div>

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

@@ -1,7 +1,6 @@
 import {AfterViewInit, Component} from '@angular/core';
 import {GamesService} from "../../services/games.service";
 import {DetectedGameDto} from "../../models/dtos/DetectedGameDto";
-import {GameOverviewDto} from "../../models/dtos/GameOverviewDto";
 
 @Component({
   selector: 'app-gameserver-list',
@@ -10,15 +9,15 @@ import {GameOverviewDto} from "../../models/dtos/GameOverviewDto";
 })
 export class LibraryOverviewComponent implements AfterViewInit {
 
-  detectedGames: GameOverviewDto[] = [];
+  detectedGames: DetectedGameDto[] = [];
   loading: boolean = true;
 
   constructor(private gameServerService: GamesService) {
   }
 
   ngAfterViewInit(): void {
-    this.gameServerService.getGameOverviews().subscribe(
-      (detectedGames: GameOverviewDto[]) => {
+    this.gameServerService.getAllGames().subscribe(
+      (detectedGames: DetectedGameDto[]) => {
         this.detectedGames = detectedGames;
         this.loading = false;
       }