connect frontend and backend, redesign

backend/src/main/java/at/ac/tuwien/sepr/groupphase/backend/endpoint/TournamentEndpoint.java

@@ -12,6 +12,7 @@ import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.http.HttpStatus;
+import org.springframework.http.MediaType;
 import org.springframework.http.ResponseEntity;
 import org.springframework.security.access.annotation.Secured;
 import org.springframework.web.bind.annotation.RequestMapping;
@@ -42,7 +43,7 @@ public class TournamentEndpoint {
     }
 
     @ResponseStatus(HttpStatus.OK)
-    @GetMapping()
+    @GetMapping(produces = MediaType.APPLICATION_JSON_VALUE)
     @Operation(summary = "Get a list of all tournaments from a specific Organizer", security = @SecurityRequirement(name = "apiKey"))
     public ResponseEntity<List<TournamentListDto>> tournaments() {
         LOG.info("GET {}", BASE_ENDPOINT);

frontend/openapi-generated/api/tournamentEndpoint.service.ts

@@ -174,10 +174,10 @@ export class TournamentEndpointService {
      * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
      * @param reportProgress flag to report request and response progress.
      */
-    public tournaments(observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: '*/*', context?: HttpContext, transferCache?: boolean}): Observable<Array<TournamentListDto>>;
-    public tournaments(observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: '*/*', context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<Array<TournamentListDto>>>;
-    public tournaments(observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: '*/*', context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<Array<TournamentListDto>>>;
-    public tournaments(observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: '*/*', context?: HttpContext, transferCache?: boolean}): Observable<any> {
+    public tournaments(observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<Array<TournamentListDto>>;
+    public tournaments(observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<Array<TournamentListDto>>>;
+    public tournaments(observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<Array<TournamentListDto>>>;
+    public tournaments(observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<any> {
 
         let localVarHeaders = this.defaultHeaders;
 
@@ -185,7 +185,7 @@ export class TournamentEndpointService {
         if (localVarHttpHeaderAcceptSelected === undefined) {
             // to determine the Accept header
             const httpHeaderAccepts: string[] = [
-                '*/*'
+                'application/json'
             ];
             localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
         }

frontend/src/app/components/tournament-card/tournament-card.component.html

@@ -1,12 +1,22 @@
 <mat-card class="tournament-card">
-    <div class="left-color-bar"></div>
-    <div class="card-content">
-      <h3>{{ tournament.name }}</h3>
-      <p>20.04.2024</p>
+  <div class="left-color-bar"></div>
+  <div class="card-content">
+    <div class="card-header">
+      <h3 class="card-title">{{ tournament?.name }}</h3>
+      <button mat-icon-button>
+        <mat-icon>edit</mat-icon>
+      </button>
+    </div>
+    <div class="card-footer">
+      <p class="card-date">{{ tournament?.registrationEnd }}</p>
       <div class="card-icons">
-        <button mat-icon-button><mat-icon>edit</mat-icon></button>
-        <button mat-icon-button><mat-icon>delete</mat-icon></button>
+        <button mat-icon-button>
+          <mat-icon>play_arrow</mat-icon>
+        </button>
+        <button mat-icon-button>
+          <mat-icon>delete</mat-icon>
+        </button>
       </div>
     </div>
-
-  </mat-card>
+  </div>
+</mat-card>

frontend/src/app/components/tournament-card/tournament-card.component.scss

@@ -1,14 +1,12 @@
-
 .tournament-card {
   width: 30rem;
-  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.2);
+  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
   margin: 1rem;
-  position: relative;
   display: flex;
-  align-items: left;
+  border-radius: 0.5rem;
+  overflow: hidden;
 }
 
-
 .left-color-bar {
   background-color: #03A9F4;
   width: 3rem;
@@ -19,17 +17,48 @@
   
 .card-content {
   padding: 1rem;
-  margin-left: 5rem; /* 60px / 16px = 3.75rem */
+  margin-left: 5rem;
   flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.card-title {
+  font-size: 1.25rem; /* Larger font size for the title */
+  font-weight: 500; /* Medium font weight for better readability */
+}
+
+.card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.card-date {
+  font-size: 0.8rem; /* Default font size for the date */
+  color: #757575; /* Subtle color for the date */
+}
 
 .card-icons {
   display: flex;
-  align-items: center;
+  gap: 0.5rem;
+}
+
+.card-icons button {
+  color: #757575; /* Default color for icons */
 }
 
 mat-card {
   width: 100%;
-  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
-}
+  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
+  border-radius: 0.5rem;
+  display: flex;
+  align-items: stretch; /* Ensure children stretch to match height */
+}

frontend/src/app/components/tournament-card/tournament-card.component.ts

@@ -1,4 +1,5 @@
 import { Component, Input } from '@angular/core';
+import { TournamentListDto } from '../../../../openapi-generated';
 
 @Component({
   selector: 'app-tournament-card',
@@ -6,5 +7,5 @@ import { Component, Input } from '@angular/core';
   styleUrl: './tournament-card.component.scss',
 })
 export class TournamentCardComponent {
-  @Input() tournament: any;
+  @Input() tournament: TournamentListDto | undefined;
 }

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

@@ -1,6 +1,6 @@
 <!-- tournaments.component.html -->
 <h1>Tournaments</h1>
-<div *ngFor="let tournament of tournaments">
+<div *ngFor="let tournament of getTournaments()">
     <app-tournament-card [tournament]="tournament"></app-tournament-card>
 </div>
   

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

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { TournamentEndpointService, TournamentListDto } from '../../../../openapi-generated';
 
 @Component({
   selector: 'app-tournaments',
@@ -6,5 +7,28 @@ import { Component } from '@angular/core';
   styleUrl: './tournaments.component.scss',
 })
 export class TournamentsComponent {
-  tournaments = [{ name: 'tournaments 1' }, { name: 'tournaments 2' }];
+  tournaments: TournamentListDto[] = [];
+
+  constructor(private tournamentService: TournamentEndpointService) {}
+
+  ngOnInit() {
+    this.loadTournaments();
+  }
+
+  getTournaments(): TournamentListDto[] {
+    return this.tournaments;
+  }
+
+  private loadTournaments() {
+    this.tournamentService.tournaments().subscribe({
+      next: data => {
+        console.log('data');
+        console.log(data);
+        this.tournaments = data;
+      },
+      error: err => {
+        console.error('Failed to load tournaments', err);
+      },
+    });
+  }
 }