WIP: Implement frontend

frontend/src/app/api/GamesApi.ts

@@ -0,0 +1,7 @@
+import {Observable} from "rxjs";
+import {DetectedGameDto} from "../models/dtos/DetectedGameDto";
+
+export interface GamesApi {
+  getAllGames(): Observable<DetectedGameDto[]>;
+  getAllGameMappings(): Observable<Map<string, string>>;
+}

frontend/src/app/app-routing.module.ts

@@ -0,0 +1,60 @@
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {FullpageLayoutComponent} from "./layouts/fullpage-layout/fullpage-layout.component";
+import {PageNotFoundComponent} from "./components/page-not-found/page-not-found.component";
+import {NavbarLayoutComponent} from "./layouts/navbar-layout/navbar-layout.component";
+import {NotImplementedComponent} from "./components/not-implemented/not-implemented.component";
+import {GameserverListComponent} from "./components/gameserver-list/gameserver-list.component";
+
+const appRoutes: Routes = [
+  {
+    path: '',
+    component: NavbarLayoutComponent,
+    children: [
+      {
+        path: 'library',
+        component: GameserverListComponent
+      },
+      {
+        path: 'games',
+        component: NotImplementedComponent
+      },
+      {
+        path: 'info',
+        component: NotImplementedComponent
+      },
+      {
+        path: 'config',
+        component: NotImplementedComponent
+      },
+      {
+        path: '',
+        redirectTo: '/library',
+        pathMatch: 'full'
+      }
+    ]
+  },
+  {
+    path: '',
+    component: FullpageLayoutComponent,
+    children: [
+      {
+        path: '',
+        redirectTo: '/login',
+        pathMatch: 'full'
+      }
+    ]
+  },
+  {
+    path: '**',
+    component: PageNotFoundComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(appRoutes)],
+  exports: [RouterModule]
+})
+
+export class AppRoutingModule {
+}

frontend/src/app/app.component.html

@@ -0,0 +1,5 @@
+<div fxLayout="column" fxFlexFill>
+  <div fxFlex>
+    <router-outlet class="hidden-router"></router-outlet>
+  </div>
+</div>

frontend/src/app/app.component.spec.ts

@@ -0,0 +1,31 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'frontend'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('frontend');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement;
+    expect(compiled.querySelector('.content span').textContent).toContain('frontend app is running!');
+  });
+});

frontend/src/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'frontend';
+}

frontend/src/app/app.module.ts

@@ -0,0 +1,82 @@
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+import {AppComponent} from './app.component';
+import {FullpageLayoutComponent} from "./layouts/fullpage-layout/fullpage-layout.component";
+import {NavbarLayoutComponent} from "./layouts/navbar-layout/navbar-layout.component";
+import {PageNotFoundComponent} from "./components/page-not-found/page-not-found.component";
+import {NotImplementedComponent} from "./components/not-implemented/not-implemented.component";
+import {HeaderComponent} from "./components/header/header.component";
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {FormsModule, ReactiveFormsModule} from "@angular/forms";
+import {MatFormFieldModule} from "@angular/material/form-field";
+import {MatCardModule} from "@angular/material/card";
+import {MatTabsModule} from "@angular/material/tabs";
+import {MatToolbarModule} from "@angular/material/toolbar";
+import {MatMenuModule} from "@angular/material/menu";
+import {MatIconModule} from "@angular/material/icon";
+import {AppRoutingModule} from "./app-routing.module";
+import {HTTP_INTERCEPTORS, HttpClientModule} from "@angular/common/http";
+import {ErrorInterceptor} from "./interceptor/error.interceptor";
+import {ApiUrlInterceptor} from "./interceptor/api-url.interceptor";
+import {ErrorDialogComponent} from "./components/error-dialog/error-dialog.component";
+import {MatDialogModule} from "@angular/material/dialog";
+import {MatButtonModule} from "@angular/material/button";
+import {MatInputModule} from "@angular/material/input";
+import {FlexModule} from "@angular/flex-layout";
+import {GameserverListComponent} from './components/gameserver-list/gameserver-list.component';
+import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
+import {MatTableModule} from "@angular/material/table";
+import {MatPaginatorModule} from "@angular/material/paginator";
+import {MatSortModule} from "@angular/material/sort";
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    HeaderComponent,
+    FullpageLayoutComponent,
+    NavbarLayoutComponent,
+    PageNotFoundComponent,
+    NotImplementedComponent,
+    ErrorDialogComponent,
+    GameserverListComponent
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    BrowserAnimationsModule,
+    FormsModule,
+    MatFormFieldModule,
+    MatCardModule,
+    MatTabsModule,
+    MatToolbarModule,
+    MatMenuModule,
+    MatIconModule,
+    HttpClientModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatDialogModule,
+    MatButtonModule,
+    MatInputModule,
+    FlexModule,
+    MatProgressSpinnerModule,
+    MatTableModule,
+    MatPaginatorModule,
+    MatSortModule
+  ],
+  providers: [
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: ApiUrlInterceptor,
+      multi: true
+    },
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: ErrorInterceptor,
+      multi: true
+    }
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule {
+}

frontend/src/app/components/error-dialog/error-dialog.component.spec.ts

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

frontend/src/app/components/error-dialog/error-dialog.component.ts

@@ -0,0 +1,32 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-error-dialog',
+  template: `
+    <h1 mat-dialog-title>Error</h1>
+    <mat-dialog-content>
+      {{message}}
+    </mat-dialog-content>
+    <mat-dialog-actions style="justify-content: end">
+      <button mat-raised-button color="primary" (click)="onClick()">OK</button>
+    </mat-dialog-actions>
+  `
+})
+export class ErrorDialogComponent implements OnInit {
+
+  message: string;
+
+  constructor(public dialogRef: MatDialogRef<ErrorDialogComponent>,
+              @Inject(MAT_DIALOG_DATA) data: any) {
+    this.message = data.message;
+  }
+
+  ngOnInit() {
+  }
+
+  onClick(): void {
+    this.dialogRef.close();
+  }
+
+}

frontend/src/app/components/gameserver-list/gameserver-list.component.css

@@ -0,0 +1,12 @@
+.fullscreen-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.15);
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

frontend/src/app/components/gameserver-list/gameserver-list.component.html

@@ -0,0 +1,14 @@
+<div fxFlexFill>
+  <div class="fullscreen-overlay" *ngIf="this.loading" fxLayout="column" fxLayoutAlign="center center">
+    <mat-spinner></mat-spinner>
+    <h2>Loading library...</h2>
+  </div>
+  <div fxLayout="row" fxLayoutAlign="center center">
+    <div *ngIf="!this.loading && this.detectedGames.length === 0">
+      <h2>No games in library.</h2>
+    </div>
+    <div fxFlexFill *ngIf="!this.loading && this.detectedGames.length > 0">
+      <img *ngFor="let game of detectedGames" src="{{'http://localhost:8080/v1/images/' + game.coverId}}">
+    </div>
+  </div>
+</div>

frontend/src/app/components/gameserver-list/gameserver-list.component.spec.ts

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

frontend/src/app/components/gameserver-list/gameserver-list.component.ts

@@ -0,0 +1,27 @@
+import {AfterViewInit, Component} from '@angular/core';
+import {GamesService} from "../../services/games.service";
+import {DetectedGameDto} from "../../models/dtos/DetectedGameDto";
+
+@Component({
+  selector: 'app-gameserver-list',
+  templateUrl: './gameserver-list.component.html',
+  styleUrls: ['./gameserver-list.component.css']
+})
+export class GameserverListComponent implements AfterViewInit {
+
+  detectedGames: DetectedGameDto[] = [];
+  loading: boolean = true;
+
+  constructor(private gameServerService: GamesService) {
+  }
+
+  ngAfterViewInit(): void {
+    this.gameServerService.getAllGames().subscribe(
+      (detectedGames: DetectedGameDto[]) => {
+        this.detectedGames = detectedGames;
+        this.loading = false;
+      }
+    );
+  }
+
+}

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

@@ -0,0 +1,33 @@
+<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/header/header.component.scss

@@ -0,0 +1,27 @@
+.menu-item-icon {
+  margin-right: 10px;
+}
+
+.logo {
+  width: 45px;
+  padding-right: 30px;
+  padding-left: 30px;
+}
+
+.drop-down {
+  float: right;
+}
+
+.mat-tab-nav-bar, .mat-tab-links, .mat-tab-link {
+  height: 64px;
+  user-select: none;
+}
+
+.spacer {
+  flex: 1 1 auto;
+}
+
+#username {
+  margin-right: 10px;
+  user-select: none;
+}

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

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

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

@@ -0,0 +1,40 @@
+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";
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss']
+})
+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) {
+  }
+
+  ngOnInit() {
+  }
+
+  setActiveItem(item: NavMenuItem) {
+    this.activeItem = item;
+    this.titleService.setTitle(`${Config.baseTitle} - ${item.title}`);
+  }
+}

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

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

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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,15 @@
+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() {
+  }
+
+}

frontend/src/app/components/page-not-found/page-not-found.component.html

@@ -0,0 +1,4 @@
+<div fxLayout="column" fxLayoutAlign="center center">
+  <h1>404</h1>
+  <p>The page you are looking for does not exist.</p>
+</div>

frontend/src/app/components/page-not-found/page-not-found.component.spec.ts

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

frontend/src/app/components/page-not-found/page-not-found.component.ts

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

frontend/src/app/config/Config.ts

@@ -0,0 +1,4 @@
+export class Config {
+  public static baseTitle = 'Game-Radar';
+  public static apiBasePath = '/v1';
+}

frontend/src/app/interceptor/api-url.interceptor.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { Config } from '../config/Config';
+
+@Injectable()
+export class ApiUrlInterceptor implements HttpInterceptor {
+
+  constructor() {
+  }
+
+  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    request = request.clone({
+      url: Config.apiBasePath + request.url
+    });
+    return next.handle(request);
+  }
+}

frontend/src/app/interceptor/error.interceptor.ts

@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
+import { Observable, throwError } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+import { ApiErrorResponse } from '../models/dtos/ApiErrorResponse';
+import { DialogService } from '../services/dialog.service';
+
+@Injectable()
+export class ErrorInterceptor implements HttpInterceptor {
+  constructor(private dialogService: DialogService) {
+  }
+
+  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    return next.handle(request).pipe(catchError((err: ApiErrorResponse) => {
+      switch (err.status) {
+        case 400:
+          if (err.error.message === 'Validation error') {
+            this.dialogService.showErrorDialog(JSON.stringify(err.error.errors));
+          } else {
+            this.dialogService.showErrorDialog(err.error.message);
+          }
+          break;
+        case 401:
+          this.dialogService.showErrorDialog(err.error.message);
+          break;
+        case 409:
+        case 500:
+          this.dialogService.showErrorDialog(err.error.message);
+          break;
+        case 503:
+        case 504:
+          this.dialogService.showErrorDialog('Can\'t reach the backend at the moment.\n' +
+            'Please ensure that the backend is running and try again');
+          break;
+      }
+      return throwError(err);
+    }));
+  }
+}

frontend/src/app/layouts/fullpage-layout/fullpage-layout.component.ts

@@ -0,0 +1,22 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-fullpage-layout',
+  template: `
+    <div fxLayout="column" fxFlexFill>
+      <div fxFlex>
+        <router-outlet class="hidden-router"></router-outlet>
+      </div>
+    </div>
+  `,
+  styles: []
+})
+export class FullpageLayoutComponent implements OnInit {
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+}

frontend/src/app/layouts/navbar-layout/navbar-layout.component.ts

@@ -0,0 +1,25 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-navbar-layout',
+  template: `
+    <div fxFlexFill>
+      <app-header></app-header>
+      <div fxLayout="column" fxLayoutAlign="space-around stretch">
+        <div fxFlex>
+          <router-outlet class="hidden-router"></router-outlet>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: []
+})
+export class NavbarLayoutComponent implements OnInit {
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+}

frontend/src/app/models/dtos/ApiErrorResponse.ts

@@ -0,0 +1,12 @@
+import { HttpErrorResponse } from '@angular/common/http';
+
+export interface ApiErrorResponse extends HttpErrorResponse {
+  error: {
+    timestamp: Date;
+    error: string;
+    status: number;
+    errors: object[];
+    message: string;
+    path: string;
+  };
+}

frontend/src/app/models/dtos/CompanyDto.ts

@@ -0,0 +1,5 @@
+export class CompanyDto {
+  slug!: string;
+  name!: string;
+  logoId?: string;
+}

frontend/src/app/models/dtos/DetectedGameDto.ts

@@ -0,0 +1,33 @@
+import {CompanyDto} from "./CompanyDto";
+import {GenreDto} from "./GenreDto";
+import {KeywordDto} from "./KeywordDto";
+import {PlayerPerspectiveDto} from "./PlayerPerspectiveDto";
+import {ThemeDto} from "./ThemeDto";
+
+export class DetectedGameDto {
+
+  slug!: string;
+  title!: string;
+  summary?: string;
+  releaseDate?: Date;
+  userRating?: number;
+  criticsRating?: number;
+  totalRating?: number;
+  category?: string;
+  offlineCoop?: boolean;
+  onlineCoop?: boolean;
+  lanSupport?: boolean;
+  maxPlayers?: boolean;
+  coverId!: string;
+  screenshotIds?: string[];
+  videoIds?: string[];
+  companies?: CompanyDto[];
+  genres?: GenreDto[];
+  keywords?: KeywordDto[];
+  themes?: ThemeDto[];
+  playerPerspectives?: PlayerPerspectiveDto[];
+
+  path!: string;
+  isFolder!: boolean;
+  confirmedMatch!: boolean;
+}

frontend/src/app/models/dtos/GenreDto.ts

@@ -0,0 +1,4 @@
+export class GenreDto {
+  slug!: string;
+  name?: string;
+}

frontend/src/app/models/dtos/KeywordDto.ts

@@ -0,0 +1,4 @@
+export class KeywordDto {
+  slug!: string;
+  name?: string;
+}

frontend/src/app/models/dtos/PlayerPerspectiveDto.ts

@@ -0,0 +1,4 @@
+export class PlayerPerspectiveDto {
+  slug!: string;
+  name?: string;
+}

frontend/src/app/models/dtos/ThemeDto.ts

@@ -0,0 +1,4 @@
+export class ThemeDto {
+  slug!: string;
+  name?: string;
+}

frontend/src/app/models/enums/Icon.ts

@@ -0,0 +1,20 @@
+export enum Icon {
+  dns = 'dns',
+  directions_car = 'directions_car',
+  list_alt = 'list_alt',
+  info = 'info',
+  lock_open = 'lock_open',
+  description = 'description',
+  help = 'help',
+  play_arrow = 'play_arrow',
+  stop = 'stop',
+  pause = 'pause',
+  error = 'error',
+  sync_problem = 'sync_problem',
+  settings = 'settings',
+  add = 'add',
+  edit = 'edit',
+  delete = 'delete',
+  remove = 'remove',
+  controller = 'sports_esports'
+}

frontend/src/app/models/objects/DropDownMenuItem.ts

@@ -0,0 +1,15 @@
+import { Icon } from '../enums/Icon';
+
+export class DropDownMenuItem {
+  title: string;
+  icon: Icon;
+  action: () => void;
+  enabled: boolean;
+
+  public constructor(title: string, icon: Icon, action: () => void, enabled: boolean) {
+    this.title = title;
+    this.icon = icon;
+    this.action = action;
+    this.enabled = enabled;
+  }
+}

frontend/src/app/models/objects/NavMenuItem.ts

@@ -0,0 +1,15 @@
+import { Icon } from '../enums/Icon';
+
+export class NavMenuItem {
+  title: string;
+  icon: Icon;
+  route: string;
+  enabled: boolean;
+
+  public constructor(title: string, icon: Icon, route: string, enabled: boolean) {
+    this.title = title;
+    this.icon = icon;
+    this.route = route;
+    this.enabled = enabled;
+  }
+}

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

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { DialogService } from './dialog.service';
+
+describe('DialogService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: DialogService = TestBed.get(DialogService);
+    expect(service).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,27 @@
+import {Injectable} from '@angular/core';
+import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
+import {ErrorDialogComponent} from '../components/error-dialog/error-dialog.component';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DialogService {
+
+  constructor(private dialog: MatDialog) {
+  }
+
+  public showErrorDialog(message: string): void {
+    const dialogConfig = new MatDialogConfig();
+
+    dialogConfig.disableClose = true;
+    dialogConfig.autoFocus = true;
+    dialogConfig.closeOnNavigation = true;
+
+    dialogConfig.data = {
+      message
+    };
+
+    this.dialog.open(ErrorDialogComponent, dialogConfig);
+  }
+
+}

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

@@ -0,0 +1,24 @@
+import {Injectable} from '@angular/core';
+import {GamesApi} from "../api/GamesApi";
+import {HttpClient} from "@angular/common/http";
+import {Observable} from "rxjs";
+import {DetectedGameDto} from "../models/dtos/DetectedGameDto";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class GamesService implements GamesApi {
+
+  private readonly apiPath = '/games';
+
+  constructor(private http: HttpClient) {
+  }
+
+  getAllGames(): Observable<DetectedGameDto[]> {
+    return this.http.get<DetectedGameDto[]>(this.apiPath);
+  }
+
+  getAllGameMappings(): Observable<Map<string, string>> {
+    return this.http.get<Map<string, string>>(`${this.apiPath}/game-mappings`);
+  }
+}

frontend/src/app/services/gameserver-api.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { GamesService } from './games.service';
+
+describe('GameserverApiService', () => {
+  let service: GamesService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(GamesService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

frontend/src/app/theme/default-theme.scss

@@ -0,0 +1,18 @@
+@use '~@angular/material' as mat;
+@import "~@angular/material/theming";
+
+@include mat.core();
+
+$custom-theme-primary: mat.define-palette(mat.$green-palette);
+$custom-theme-accent: mat.define-palette(mat.$grey-palette, A200, A100, A400);
+$custom-theme-warn: mat.define-palette(mat.$red-palette);
+
+$custom-theme: mat.define-dark-theme((
+  color: (
+    primary: $custom-theme-primary,
+    accent: $custom-theme-accent,
+    warn: $custom-theme-warn
+  )
+));
+
+@include mat.all-component-themes($custom-theme);