fix(#178): fix table name in qualification

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

@@ -2,7 +2,14 @@
   class="qualification-line-container"
   [class.currently-playing-light]="match().startTime && !match().endTime && !viewOnly()"
   [class.currently-playing-dark]="match().startTime && !match().endTime && viewOnly()"
+  [class.admin-qualification-line-container]="!viewOnly()"
+  [class.public-qualification-line-container]="viewOnly()"
 >
+  @if (!viewOnly()) {
+    <div [class.table-light]="match().table?.name">
+      {{ match().table?.name }}
+    </div>
+  }
   <div
     class="qualification-team"
     [class.text-winner]="participant1()?.isWinner === true"
@@ -20,6 +27,7 @@
           class="team-action-button"
           data-cy="team1-action-button"
           mat-icon-button
+          [disabled]="disableMatchEdit()"
           aria-label="Mark team drinks as picked up for this match"
           (click)="markTeamDrinksPickedUp.emit(participant1()!)"
           [matTooltip]="'Mark team drinks as picked up for this match'"
@@ -32,13 +40,17 @@
     }
   </div>
   <div class="center-result-column">
-    @if (match().table && !match()?.winnerPoints) {
-      <p class="beerpong-table-name-floating">{{ match().table?.name }}</p>
+    @if (match().table && !match()?.winnerPoints && viewOnly()) {
+      <p [class.table-dark]="match().table?.name">{{ match().table?.name }}</p>
     }
     <div [matTooltip]="resultTooltip" aria-label="Enter match result">
       @if (match()?.winnerPoints) {
         @if (!viewOnly()) {
-          <button mat-button [disabled]="!matchHasStarted" (click)="openMatchResultDialog()">
+          <button
+            mat-button
+            [disabled]="!matchHasStarted || disableMatchEdit()"
+            (click)="openMatchResultDialog()"
+          >
             {{ matchResultString }}
           </button>
         } @else {
@@ -48,7 +60,7 @@
         @if (!viewOnly()) {
           <button
             mat-icon-button
-            [disabled]="!matchHasStarted"
+            [disabled]="!matchHasStarted || disableMatchEdit()"
             (click)="openMatchResultDialog()"
             data-cy="enter-match-results-btn"
           >
@@ -57,8 +69,6 @@
         } @else {
           @if (!match().table) {
             vs.
-          } @else {
-            &nbsp;
           }
         }
       }
@@ -81,6 +91,7 @@
           class="team-action-button"
           data-cy="team2-action-button"
           mat-icon-button
+          [disabled]="disableMatchEdit()"
           aria-label="Mark team drinks as picked up for this match"
           (click)="markTeamDrinksPickedUp.emit(participant2()!)"
           [matTooltip]="'Mark team drinks as picked up for this match'"

frontend/src/app/components/qualification-matches/qualification-match-line/qualification-match-line.component.scss

@@ -4,12 +4,19 @@
 .qualification-line-container {
   height: 3.2rem;
   display: grid;
-  grid-template-columns: 3fr 2fr 3fr 1fr;
   justify-items: center;
   align-items: center;
   border-bottom: 1px solid var(--mat-table-row-item-outline-color);
 }
 
+.admin-qualification-line-container {
+  grid-template-columns: 1fr 3fr 2fr 3fr 1fr;
+}
+
+.public-qualification-line-container {
+  grid-template-columns: 3fr 2fr 3fr 1fr;
+}
+
 .text-winner {
   text-decoration: underline;
   font-weight: bold;
@@ -22,7 +29,7 @@
 .team-action-button {
   position: absolute;
   top: -1.5rem;
-  right: -2.4rem;
+  right: -2.2rem;
   scale: 0.7;
   color: black;
 }
@@ -38,13 +45,6 @@
   align-items: center;
 }
 
-.beerpong-table-name-floating {
-  font-weight: bold;
-  margin: 0px;
-  // put this on top of the result display, I found no clean way to do this
-  margin-bottom: -20px;
-}
-
 .currently-playing-icon {
   position: absolute;
   top: -0.8rem;
@@ -88,3 +88,26 @@
 .currently-playing-dark {
   background-color: var(--color-background-dark-success);
 }
+
+.table-light {
+  font-size: 0.8rem;
+  margin: 0.5rem;
+  padding: 0.5rem;
+  background-color: var(--color-background-light-success);
+  text-align: center;
+  border-radius: 0.3rem;
+  cursor: default;
+  user-select: none;
+  box-shadow: 0 0 0.4rem 0.1rem var(--color-background-dark-success);
+}
+
+.table-dark {
+  font-weight: bold;
+  margin: 0.5rem;
+  padding: 0.5rem;
+  background-color: var(--color-background-dark-success);
+  text-align: center;
+  border-radius: 0.3rem;
+  cursor: default;
+  user-select: none;
+}

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

@@ -26,6 +26,7 @@ export class QualificationMatchLineComponent {
   tournamentId = input<number>();
   teams = input<Map<number, TeamDto>>();
   viewOnly = input<boolean>(false);
+  disableMatchEdit = input<boolean>(false);
   match = model<TournamentQualificationMatchDto>({});
 
   onMatchUpdate = output<TournamentQualificationMatchDto>();

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

@@ -7,6 +7,7 @@
     [tournamentId]="tournamentId()"
     [teams]="teamDtos()"
     [viewOnly]="viewOnly()"
+    [disableMatchEdit]="disableMatchEdit()"
   ></app-qualification-match-line>
 }
 @if (qualificationMatches().length === 0 && showEmptyMessage()) {

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

@@ -29,6 +29,7 @@ export class QualificationMatchesComponent {
   tournamentId = input.required<number>();
   viewOnly = input<boolean>(false);
   teamDtos = input<Map<number, TeamDto>>(new Map());
+  disableMatchEdit = input<boolean>(false);
   renderedRows = viewChildren<QueryList<ElementRef<HTMLTableRowElement>>>(
     'matchLineElement',
     // @ts-ignore - this is a bug in the typescript definitions

frontend/src/app/components/tournament/tournament-qualification-phase/tournament-qualification-phase.component.html

@@ -7,16 +7,10 @@
           Public live page
           <mat-icon>share</mat-icon>
         </button>
-        <div
-          [matTooltip]="
-            !qualificationMatchesFinished()
-              ? 'All qualification matches must be finished before starting the knockout phase.'
-              : ''
-          "
-        >
+        <div [matTooltip]="getStartKoPhaseButtonTooltip()">
           <button
             mat-flat-button
-            [disabled]="!qualificationMatchesFinished()"
+            [disabled]="!qualificationMatchesFinished() || koPhaseStarted()"
             (click)="startKoPhase()"
             color="primary"
           >
@@ -31,6 +25,7 @@
       [qualificationMatches]="qualificationMatches()"
       [tournamentId]="tournamentId()"
       [teamDtos]="teamDtos()"
+      [disableMatchEdit]="koPhaseStarted()"
       (generateQualificationMatches)="generateQualificationMatches()"
       (onMatchUpdate)="onMatchUpdate($event)"
       (markTeamDrinksPickedUp)="markTeamDrinksPickedUp($event)"

frontend/src/app/components/tournament/tournament-qualification-phase/tournament-qualification-phase.component.ts

@@ -75,6 +75,9 @@ export class TournamentQualificationPhaseComponent implements OnInit, OnDestroy
       this.qualificationMatches().length > 0
     );
   });
+  koPhaseStarted = computed(() => {
+    return this.tournament()?.allKoMatches !== undefined && this.tournament()!.allKoMatches > 0;
+  });
   tournament = signal<TournamentOverviewDto | undefined>(undefined);
 
   infoElement = viewChild<ElementRef>('qualifiedInfo');
@@ -343,4 +346,16 @@ export class TournamentQualificationPhaseComponent implements OnInit, OnDestroy
       title: 'Public link to qualification phase',
     });
   }
+
+  getStartKoPhaseButtonTooltip(): string {
+    if (this.koPhaseStarted()) {
+      return 'KO phase already started';
+    }
+
+    if (!this.qualificationMatchesFinished()) {
+      return 'Qualification matches not finished';
+    }
+
+    return 'Start KO phase';
+  }
 }