WIP: Proceed with frontend implementation

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

@@ -1,5 +1,5 @@
 <div class="game-cover-container">
-  <a routerLink="game/{{game.slug}}">
+  <a routerLink="/game/{{game.slug}}">
     <img src="{{'v1/images/' + game.coverId}}" alt="Cover of {{game.title}}">
   </a>
 </div>

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

@@ -1,5 +1,5 @@
 import {Component, Input, OnInit} from '@angular/core';
-import {DetectedGameDto} from "../../models/dtos/DetectedGameDto";
+import {GameOverviewDto} from "../../models/dtos/GameOverviewDto";
 
 @Component({
   selector: 'game-cover',
@@ -8,9 +8,10 @@ import {DetectedGameDto} from "../../models/dtos/DetectedGameDto";
 })
 export class GameCoverComponent implements OnInit {
 
-  @Input() game!: DetectedGameDto;
+  @Input() game!: GameOverviewDto;
 
-  constructor() { }
+  constructor() {
+  }
 
   ngOnInit(): void {
   }

frontend/src/app/components/game-detail-view/game-detail-view.component.html

@@ -1 +1 @@
-<p>game-detail-view works!</p>
+<pre><code>{{game | json}}</code></pre>

frontend/src/app/components/game-detail-view/game-detail-view.component.ts

@@ -1,4 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import {ActivatedRoute, Router} from "@angular/router";
+import {DetectedGameDto} from "../../models/dtos/DetectedGameDto";
+import {GamesService} from "../../services/games.service";
+import {HttpErrorResponse} from "@angular/common/http";
 
 @Component({
   selector: 'app-game-detail-view',
@@ -7,7 +11,24 @@ import { Component, OnInit } from '@angular/core';
 })
 export class GameDetailViewComponent implements OnInit {
 
-  constructor() { }
+  game!: DetectedGameDto;
+
+  constructor(private route: ActivatedRoute,
+              private router: Router,
+              private gamesService: GamesService) {
+    this.route.params.subscribe( params => {
+      this.gamesService.getGame(params['slug']).subscribe({
+          next: game => this.game = game,
+          error: error => {
+            if(error.status === 404) {
+              this.router.navigate(['/library']);
+            } else {
+              console.error(error);
+            }
+          }
+        });
+    });
+  }
 
   ngOnInit(): void {
   }

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

@@ -1,33 +1,2 @@
 <mat-toolbar role="heading">
-
-  <object type="image/svg+xml" data="../../../assets/graphics/game-radar-logo-tilted-interactive.svg" class="logo">
-    Game-Radar Logo
-  </object>
-
-  <nav mat-tab-nav-bar>
-    <a mat-tab-link *ngFor="let item of tabNavItems"
-       (click)="setActiveItem(item)"
-       [disabled]="!item.enabled"
-       routerLink="{{item.route}}"
-       routerLinkActive #rla="routerLinkActive"
-       [active]="rla.isActive">
-      <mat-icon class="menu-item-icon">{{item.icon}}</mat-icon>
-      {{item.title}}
-    </a>
-  </nav>
-
-  <span class="spacer"></span>
-
-  <p id="username" class="mat-hint">TestUser</p>
-
-  <button mat-icon-button [matMenuTriggerFor]="headerDropDown">
-    <mat-icon>more_vert</mat-icon>
-  </button>
-  <mat-menu #headerDropDown="matMenu">
-    <button mat-menu-item *ngFor="let item of dropDownItems"
-            (click)="item.action()">
-      <mat-icon>{{item.icon}}</mat-icon>
-      <span>{{item.title}}</span>
-    </button>
-  </mat-menu>
 </mat-toolbar>

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

@@ -1,6 +1,7 @@
 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',
@@ -9,15 +10,15 @@ import {DetectedGameDto} from "../../models/dtos/DetectedGameDto";
 })
 export class LibraryOverviewComponent implements AfterViewInit {
 
-  detectedGames: DetectedGameDto[] = [];
+  detectedGames: GameOverviewDto[] = [];
   loading: boolean = true;
 
   constructor(private gameServerService: GamesService) {
   }
 
   ngAfterViewInit(): void {
-    this.gameServerService.getAllGames().subscribe(
-      (detectedGames: DetectedGameDto[]) => {
+    this.gameServerService.getGameOverviews().subscribe(
+      (detectedGames: GameOverviewDto[]) => {
         this.detectedGames = detectedGames;
         this.loading = false;
       }