WIP: Implement frontend

2026-06-15 00:30:02 +00:00 · 2022-07-21 00:29:00 +02:00
parent 6b89690180
commit cc1e02a1ca
109 changed files with 22662 additions and 670 deletions
@@ -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();
+  });
+});
@@ -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();
+  }
+
+}
@@ -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;
+}
@@ -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>
@@ -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();
+  });
+});
@@ -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;
+      }
+    );
+  }
+
+}
@@ -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>
@@ -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;
+}
@@ -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();
+  });
+});
@@ -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}`);
+  }
+}
@@ -0,0 +1 @@
+<h2 fxLayoutAlign="center center">This component is currently not implemented.</h2>
@@ -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();
+  });
+});
@@ -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() {
+  }
+
+}
@@ -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>
@@ -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();
+  });
+});
@@ -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() {
+  }
+
+}
				`@@ -0,0 +1 @@`
				`<h2 fxLayoutAlign="center center">This component is currently not implemented.</h2>`