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);

frontend/src/environments/environment.prod.ts

@@ -0,0 +1,6 @@
+import packageInfo from 'package.json';
+
+export const environment = {
+  production: true,
+  VERSION: packageInfo.version
+};

frontend/src/environments/environment.ts

@@ -0,0 +1,18 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+import packageInfo from 'package.json';
+
+export const environment = {
+  production: false,
+  VERSION: packageInfo.version
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

frontend/src/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Frontend</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+</head>
+<body class="mat-typography">
+  <app-root></app-root>
+</body>
+</html>

frontend/src/main.ts

@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

frontend/src/polyfills.ts

@@ -0,0 +1,53 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes recent versions of Safari, Chrome (including
+ * Opera), Edge on the desktop, and iOS and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

frontend/src/proxy.conf.json

@@ -0,0 +1,10 @@
+{
+  "/v1": {
+    "target": "http://localhost:8080",
+    "secure": false
+  },
+  "/swagger-ui": {
+    "target": "http://localhost:8080",
+    "secure": false
+  }
+}

frontend/src/styles.scss

@@ -0,0 +1,39 @@
+
+// Custom Theming for Angular Material
+// For more information: https://material.angular.io/guide/theming
+@use '@angular/material' as mat;
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+@include mat.core();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://material.io/design/color/
+$frontend-primary: mat.define-palette(mat.$indigo-palette);
+$frontend-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$frontend-warn: mat.define-palette(mat.$red-palette);
+
+// Create the theme object. A theme consists of configurations for individual
+// theming systems such as "color" or "typography".
+$frontend-theme: mat.define-light-theme((
+  color: (
+    primary: $frontend-primary,
+    accent: $frontend-accent,
+    warn: $frontend-warn,
+  )
+));
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include mat.all-component-themes($frontend-theme);
+
+/* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

frontend/src/test.ts

@@ -0,0 +1,26 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    <T>(id: string): T;
+    keys(): string[];
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+);
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().forEach(context);