feat(#139): improve qualification match live page

frontend/src/app/components/qualification-matches/qualification-matches.component.html

@@ -9,7 +9,7 @@
     [viewOnly]="viewOnly()"
   ></app-qualification-match-line>
 }
-@if (qualificationMatches().length === 0) {
+@if (qualificationMatches().length === 0 && showEmptyMessage()) {
   <div class="no-matches-container">
     <h1>Its empty here</h1>
     <h2>There are no matches generated for the qualification phase yet.</h2>

frontend/src/app/components/qualification-matches/qualification-matches.component.ts

@@ -43,7 +43,7 @@ export class QualificationMatchesComponent {
   });
 
   scrollToRow = effect(() => {
-    if (this.viewOnly() && this.renderedRows()?.length) {
+    if (this.viewOnly() && this.renderedRows()?.length && this.enableScrolling()) {
       const index = Math.max(this.indexOfFirstNotFinishedGame() - 4, 0);
       const row = (this.renderedRows() as ElementRef[])[index].nativeElement;
       if (row) {
@@ -51,6 +51,9 @@ export class QualificationMatchesComponent {
       }
     }
   });
+  showEmptyMessage = input<boolean>(true);
+  sortPreviousMatchesDesc = input<boolean>(false);
+  enableScrolling = input<boolean>(false);
 
   triggerMarkTeamDrinksPickedUp(
     match: TournamentQualificationMatchDto,
@@ -98,6 +101,13 @@ export class QualificationMatchesComponent {
       const bDrinksCollected = (b.participants?.filter(p => p.isReady) || []).length;
       return bDrinksCollected - aDrinksCollected;
     });
+
+    if (this.sortPreviousMatchesDesc()) {
+      const otherMatches = result.filter(m => !m.endTime);
+      const previousMatches = result.filter(m => m.endTime).reverse();
+      result = otherMatches.concat(previousMatches);
+    }
+
     return result;
   }
 }

frontend/src/app/components/tournament/tournament-public-view/tournament-public-view.component.html

@@ -1,10 +1,31 @@
 <div class="content">
-  <div class="matches mat-elevation-z8">
-    <app-qualification-matches
-      [tournamentId]="tournamentId()"
-      [qualificationMatches]="qualificationMatches()"
-      [viewOnly]="true"
-    ></app-qualification-matches>
+  <div class="current-matches mat-elevation-z10">
+    <mat-card>
+      <mat-card-header>
+        <mat-card-title>Current matches</mat-card-title>
+      </mat-card-header>
+      <mat-card-content>
+        <app-qualification-matches
+          [tournamentId]="tournamentId()"
+          [qualificationMatches]="runningMatches()"
+          [viewOnly]="true"
+        ></app-qualification-matches>
+      </mat-card-content>
+    </mat-card>
+  </div>
+  <div class="next-matches mat-elevation-z8">
+    <mat-card>
+      <mat-card-header>
+        <mat-card-title>Next matches </mat-card-title>
+      </mat-card-header>
+      <mat-card-content>
+        <app-qualification-matches
+          [tournamentId]="tournamentId()"
+          [qualificationMatches]="nextMatches()"
+          [viewOnly]="true"
+        ></app-qualification-matches>
+      </mat-card-content>
+    </mat-card>
   </div>
   <div class="score-table mat-elevation-z8" #scoreContainer>
     <app-tournament-score-table
@@ -12,4 +33,21 @@
       [viewOnly]="true"
     ></app-tournament-score-table>
   </div>
+  <div class="previous-matches mat-elevation-z8">
+    <mat-card>
+      <mat-card-header>
+        <mat-card-title> Previous matches </mat-card-title>
+      </mat-card-header>
+      <mat-card-content>
+        <app-qualification-matches
+          [tournamentId]="tournamentId()"
+          [qualificationMatches]="playedMatches()"
+          [viewOnly]="true"
+          [showEmptyMessage]="false"
+          [sortPreviousMatchesDesc]="true"
+          [enableScrolling]="false"
+        ></app-qualification-matches>
+      </mat-card-content>
+    </mat-card>
+  </div>
 </div>

frontend/src/app/components/tournament/tournament-public-view/tournament-public-view.component.scss

@@ -2,18 +2,17 @@
 @use '../../../../theme/theme.scss' as theme;
 
 .content {
+  padding: 1.5rem;
   display: grid;
-  grid-template-areas:
-    'header header'
-    'matches score';
   grid-template-columns: 3fr 2fr;
-  grid-template-rows: auto 1fr;
+  grid-template-rows: auto 1fr 35vh;
   column-gap: var(--spacing2);
+  row-gap: var(--spacing2);
   overflow-y: hidden;
-  height: 100vh;
+  height: calc(100vh - 3rem);
 
   //dark mode
-  background-color: mat.get-theme-color(theme.$bb-dark-theme, background);
+  background-color: mat.get-theme-color(theme.$bb-dark-theme, neutral-variant, 20);
   color: var(--mat-table-row-item-label-text-color);
 }
 
@@ -22,17 +21,34 @@
 }
 
 .score-table {
-  grid-area: score;
-  margin-right: var(--spacing2);
-  margin-bottom: var(--spacing2);
-  margin-top: var(--spacing2);
+  grid-column: 2;
+  grid-row: 1 / span 2;
   overflow-y: hidden;
+  border-radius: 1rem;
 }
 
-.matches {
-  grid-area: matches;
-  margin-left: var(--spacing2);
-  margin-bottom: var(--spacing2);
-  margin-top: var(--spacing2);
-  overflow-y: hidden;
+.current-matches {
+  grid-row: 1;
+  grid-column: 1;
+  height: fit-content;
+  overflow-y: auto;
+  border-radius: 1rem;
 }
+
+.current-matches app-qualification-matches {
+  overflow-y: auto;
+}
+
+.next-matches {
+  grid-row: 2 / span 2;
+  overflow-y: hidden;
+  border-radius: 1rem;
+}
+
+.previous-matches {
+  grid-row: 3;
+  grid-column: 2;
+  overflow-y: hidden;
+  border-radius: 1rem;
+}
+

frontend/src/app/components/tournament/tournament-public-view/tournament-public-view.component.ts

@@ -1,6 +1,7 @@
 import {
   AfterViewInit,
   Component,
+  computed,
   ElementRef,
   inject,
   input,
@@ -10,7 +11,7 @@ import {
   viewChild,
 } from '@angular/core';
 import { MatButton } from '@angular/material/button';
-import { MatCard } from '@angular/material/card';
+import { MatCard, MatCardModule } from '@angular/material/card';
 import {
   QualificationTeamScoreDto,
   TournamentEndpointService,
@@ -41,6 +42,7 @@ import { QualificationMatchesComponent } from '../../qualification-matches/quali
     MatIcon,
     MatTooltip,
     QualificationMatchesComponent,
+    MatCardModule,
   ],
   templateUrl: './tournament-public-view.component.html',
   styleUrl: './tournament-public-view.component.scss',
@@ -52,6 +54,13 @@ export class TournamentPublicViewComponent implements OnInit, OnDestroy, AfterVi
   tournamentId = input<number>();
   scoreDtos = signal<QualificationTeamScoreDto[]>([]);
   qualificationMatches = signal<TournamentQualificationMatchDto[]>([]);
+  nextMatches = computed(() =>
+    this.qualificationMatches().filter(m => m.table === null && m.endTime === null),
+  );
+  runningMatches = computed(() => this.qualificationMatches().filter(m => m.table !== null));
+  playedMatches = computed(() =>
+    this.qualificationMatches().filter(m => m.table === null && m.endTime !== null),
+  );
   token = input<string>();
 
   scoreContainer = viewChild<ElementRef>('scoreContainer');