Finished implementation of frontend functionality.

Styling and bugfixing next

frontend/src/app/services/dialog.service.ts

@@ -1,6 +1,9 @@
 import {Injectable} from '@angular/core';
 import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
 import {ErrorDialogComponent} from '../components/error-dialog/error-dialog.component';
+import {DetectedGameDto} from "../models/dtos/DetectedGameDto";
+import {MapGameDialogComponent} from "../components/map-game-dialog/map-game-dialog.component";
+import {UnmappedFileDto} from "../models/dtos/UnmappedFileDto";
 
 @Injectable({
   providedIn: 'root'
@@ -24,4 +27,33 @@ export class DialogService {
     this.dialog.open(ErrorDialogComponent, dialogConfig);
   }
 
+  public correctGameMappingDialog(game: DetectedGameDto): void {
+    const dialogConfig = new MatDialogConfig();
+
+    dialogConfig.disableClose = true;
+    dialogConfig.autoFocus = true;
+    dialogConfig.closeOnNavigation = true;
+
+    dialogConfig.data = {
+      path: game.path,
+      slug: game.slug
+    };
+
+    this.dialog.open(MapGameDialogComponent, dialogConfig);
+  }
+
+  public mapUnmappedGameDialog(unmappedFile: UnmappedFileDto): void {
+    const dialogConfig = new MatDialogConfig();
+
+    dialogConfig.disableClose = true;
+    dialogConfig.autoFocus = true;
+    dialogConfig.closeOnNavigation = true;
+
+    dialogConfig.data = {
+      path: unmappedFile.path
+    };
+
+    this.dialog.open(MapGameDialogComponent, dialogConfig);
+  }
+
 }

frontend/src/app/services/games.service.ts

@@ -1,7 +1,7 @@
 import {Injectable} from '@angular/core';
 import {GamesApi} from "../api/GamesApi";
 import {HttpClient} from "@angular/common/http";
-import {Observable} from "rxjs";
+import {map, Observable} from "rxjs";
 import {DetectedGameDto} from "../models/dtos/DetectedGameDto";
 import {GameOverviewDto} from "../models/dtos/GameOverviewDto";
 
@@ -16,7 +16,7 @@ export class GamesService implements GamesApi {
   }
 
   getAllGames(): Observable<DetectedGameDto[]> {
-    return this.http.get<DetectedGameDto[]>(this.apiPath);
+    return this.http.get<DetectedGameDto[]>(this.apiPath).pipe(map(games => games.sort((g1, g2) => g1.title.localeCompare(g2.title))));
   }
 
   getGame(slug: String): Observable<DetectedGameDto> {