Durchstich zur Middleware - Datenbankverbindung

Fehlerfix, bzw. so das die App wieder läuft

src/app/app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -27,6 +28,7 @@ import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
     ErrorComponent,
   ],
   imports: [
+    HttpClientModule,
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,

src/app/dao/TabuMiddlewareService.ts

+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { environment } from '../../environments/environment';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TabuMiddlewareService {
+
+  constructor(private http: HttpClient) {
+  }
+
+  private async request(method: string, url: string, data?: any): Promise<any> {
+
+    const result = this.http.request(method, url, {
+      body: data,
+      responseType: 'json',
+      observe: 'body',
+    });
+    return new Promise((resolve, reject) => {
+      result.subscribe(resolve, reject);
+    });
+  }
+
+  getSpielSessions(): Promise<any> {
+    return this.request('GET', `${environment.tabuMiddlewareURL}SpielSession`);
+  }
+
+  addSpielSession(event: any): Promise<any> {
+    return this.request('POST', `${environment.tabuMiddlewareURL}addSpielSession`, event);
+  }
+}

src/app/error/error.component.html

@@ -3,7 +3,7 @@
     Leider konnte die Seite nicht erreicht werden, bitte überprüfen Sie den Link oder kehren Sie auf die <a href="router.navigate(['/overview'])">Startseite</a>  zurück
   </h3>
   <br>
-  <mat-progress-spinner color="primary" mode="mode" value="value">
+  <mat-progress-spinner color="primary" mode="determinate" value="value">
   </mat-progress-spinner>
 </div>
 

src/app/overview/overview.component.html

@@ -7,18 +7,16 @@
     <mat-card-title>Spielstand</mat-card-title>
     <mat-card-content>
       <br>
-      <center>
-        <table>
-          <tr>
-            <th>Team rot</th>
-            <th>Team blau</th>
-          </tr>
-          <tr>
-            <th>0</th>
-            <th>0</th>
-          </tr>
-        </table>
-      </center>
+      <table style="align-self: center; align-content: center; align-items: center">
+        <tr>
+          <th>Team rot</th>
+          <th>Team blau</th>
+        </tr>
+        <tr>
+          <th>0</th>
+          <th>0</th>
+        </tr>
+      </table>
     </mat-card-content>
     <mat-card-actions>
       <br>

src/app/select-game/select-game.component.html

 <div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 5em;">
-  <h1>Willkommen bei Tabu im Online-Multiplayer-Modus</h1>
-  <h2>Ideal im Lockdown!</h2>
+  <mat-card class="transparent">
+    <h1>Willkommen bei Tabu im Online-Multiplayer-Modus</h1>
+    <h2>Ideal im Lockdown!</h2>
+  </mat-card>
   <br>
   <br>
   <br>
-  <mat-card>
+  <mat-card class="transparent">
     <mat-card-title>Spielsuche</mat-card-title>
     <mat-card-subtitle>Finde ein Spiel über den Spielnamen oder erstelle ein neues</mat-card-subtitle>
     <mat-card-content>
@@ -16,7 +18,7 @@
       </form>
     </mat-card-content>
     <mat-card-actions>
-      <button mat-raised-button color="primary">Spiel erstellen</button>
+      <button mat-raised-button color="primary" (click)="getSpielSessions()">Spiel erstellen</button>
       <button mat-raised-button color="primary" (click)="joinGame($event)">Spiel beitreten</button>
     </mat-card-actions>
   </mat-card>

src/app/select-game/select-game.component.scss

@@ -7,3 +7,7 @@
 .example-full-width {
   width: 100%;
 }
+
+.transparent {
+  opacity: 90%;
+}

src/app/select-game/select-game.component.ts

 import { Component, OnInit } from '@angular/core';
 import {Router} from '@angular/router';
+import {TabuMiddlewareService} from '../dao/TabuMiddlewareService';
 
 @Component({
   selector: 'app-select-game',
@@ -8,16 +9,19 @@ import {Router} from '@angular/router';
 })
 export class SelectGameComponent implements OnInit {
 
-  constructor(private router: Router) { }
+  constructor(private router: Router,
+              private server: TabuMiddlewareService) { }
 
   ngOnInit(): void {
   }
 
-  getSpielname(event: any): void {
-    event.target.value;
+  getSpielSessions(): any {
+    console.log('Start')
+    const response = this.server.getSpielSessions();
+    console.log('Response:', response);
   }
 
-  joinGame(event:any): void {
+  joinGame(event: any): void {
     this.router.navigate(['/overview']);
   }
 }

src/environments/environment.prod.ts

 export const environment = {
-  production: true
+  production: true,
+  tabuMiddlewareURL: 'http://192.168.0.50:3150/'
 };

src/environments/environment.ts

@@ -3,7 +3,8 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  tabuMiddlewareURL: 'http://192.168.0.50:3150/'
 };
 
 /*