Removed *ngIf

src/app/components/player-registrations/player-registrations.component.html

@@ -14,7 +14,8 @@
                 </mat-checkbox>
               </div>
               <div class="col-md-4">
-                <ng-container *ngIf="eventRegistration.doublesEvent">
+                @if (eventRegistration.doublesEvent) {
+                  <ng-container>
                     <mat-form-field appearance="fill">
                       <mat-label>Partner</mat-label>
                       <mat-select [value]="eventRegistration.partner" [disabled]="!tournamentRegistration.editable || !eventRegistration.registered" [(ngModel)]="eventRegistration.partner">
@@ -25,12 +26,14 @@
                       </mat-select>
                     </mat-form-field>
                   </ng-container>
+                }
               </div>
               <div class="col-6"></div>
             </div>
           </ng-container>
         </mat-card-content>
-        <mat-card-actions *ngIf="tournamentRegistration.editable">
+        @if (tournamentRegistration.editable) {
+          <mat-card-actions>
               <button mat-button (click)="saveRegistration(tournamentRegistration, $event)" [disabled]="waitingForBackend">
                 <mat-icon>save</mat-icon>
                 Opslaan
@@ -40,11 +43,14 @@
                 Annuleren
               </a>
           </mat-card-actions>
+        }
       </mat-card>
-      <button mat-button (click)="this.showAll = true" *ngIf="!this.showAll">
+      @if (!this.showAll) {
+        <button mat-button (click)="this.showAll = true">
           <mat-icon>search</mat-icon>
           Toon oude toernooien
         </button>
+      }
     </mat-card-content>
   </mat-card>
 }

src/app/components/tournament-divide/tournament-divide.component.html

@@ -1,4 +1,5 @@
-<mat-card appearance="outlined" *ngIf="tournament">
+@if (tournament) {
+  <mat-card appearance="outlined">
     <mat-card-header>
       <h5>Indeling voor {{ tournament.name }}</h5>
     </mat-card-header>
@@ -21,9 +22,11 @@
                   <th scope="col" class="w-20">Naam</th>
                   <th scope="col" class="w-20">Club</th>
                   <th scope="col" class="w-10">Speelsterkte</th>
-                <th *ngIf="event.doublesEvent" scope="col" class="w-20">Partner</th>
+                  @if (event.doublesEvent) {
-                <th *ngIf="event.doublesEvent" scope="col" class="w-20">Club</th>
+                    <th scope="col" class="w-20">Partner</th>
-                <th *ngIf="event.doublesEvent" scope="col" class="w-10">Speelsterkte</th>
+                    <th scope="col" class="w-20">Club</th>
+                    <th scope="col" class="w-10">Speelsterkte</th>
+                  }
                 </tr>
                 </thead>
                 <tbody>
@@ -31,9 +34,11 @@
                   <td class="align-middle">{{ team.player1 | fullName }}</td>
                   <td class="align-middle">{{ team.player1.club }}</td>
                   <td class="align-middle">{{ getStrength(team.player1.strength.valueOf()) }}</td>
-                <td *ngIf="event.doublesEvent" class="align-middle">{{ team.player2 | fullName }}</td>
+                  @if (event.doublesEvent) {
-                <td *ngIf="event.doublesEvent" class="align-middle">{{ team.player2.club }}</td>
+                    <td class="align-middle">{{ team.player2 | fullName }}</td>
-                <td *ngIf="event.doublesEvent" class="align-middle">{{ getStrength(team.player2.strength.valueOf()) }}</td>
+                    <td class="align-middle">{{ team.player2.club }}</td>
+                    <td class="align-middle">{{ getStrength(team.player2.strength.valueOf()) }}</td>
+                  }
                 </tr>
                 </tbody>
               </table>
@@ -43,3 +48,4 @@
       </mat-card>
     </mat-card-content>
   </mat-card>
+}

src/app/components/tournament-draw/tournament-draw.component.html

@@ -1,4 +1,5 @@
-<mat-card appearance="outlined" *ngIf="tournament">
+@if (tournament) {
+  <mat-card appearance="outlined">
     <mat-card-header>
       <h5>Loting voor {{ tournament.name }}</h5>
     </mat-card-header>
@@ -37,4 +38,4 @@
       </mat-card>
     </mat-card-content>
   </mat-card>
-
+}

src/app/components/tournament-list/tournament-list.component.html

@@ -1,9 +1,4 @@
 <mat-card appearance="outlined">
-<!--
-  <mat-card-header>
-    <h5>Toernooien</h5>
-  </mat-card-header>
--->
   <mat-card-content>
     <table class="table table-hover">
       <thead class="thead-dark">
@@ -16,28 +11,68 @@
         </tr>
       </thead>
       <tbody>
-      <tr *ngFor="let tournament of tournaments">
+      @for (tournament of getActiveTournaments(); track tournament) {
+        <tr>
           <td class="align-middle">{{ tournament.id }}</td>
           <td class="align-middle"><a [routerLink]="['/tournaments', tournament.id, 'manage']">{{ tournament.name }}</a></td>
           <td class="align-middle">{{ tournament.date }}</td>
           <td class="align-middle">{{ Tournament.getStatus(tournament) }}</td>
           <td class="align-middle">
-          <a mat-button [routerLink]="['/tournaments', tournament.id, 'edit']" *ngIf="Tournament.getStatus(tournament) != 'Afgerond'">
+            @if (Tournament.getStatus(tournament) != 'Afgerond') {
+              <a mat-button [routerLink]="['/tournaments', tournament.id, 'edit']">
                 <mat-icon>edit</mat-icon>
                 Bewerk
               </a>
+            }
             <a mat-button [routerLink]="['/tournaments', tournament.id, 'registrations']">
               <mat-icon>group</mat-icon>
               Inschrijvingen
             </a>
-          <a mat-button (click)="clearDraw(tournament)" *ngIf="Tournament.getStatus(tournament) == 'Geloot'">
+            @if (Tournament.getStatus(tournament) == 'Geloot') {
+              <a mat-button (click)="clearDraw(tournament)">
                 <mat-icon>safety_divider</mat-icon>
                 Loting wissen
               </a>
+            }
           </td>
         </tr>
+      }
+      @if (showInactive) {
+        @for (tournament of getInactiveTournaments(); track tournament) {
+          <tr>
+            <td class="align-middle">{{ tournament.id }}</td>
+            <td class="align-middle"><a [routerLink]="['/tournaments', tournament.id, 'manage']">{{ tournament.name }}</a></td>
+            <td class="align-middle">{{ tournament.date }}</td>
+            <td class="align-middle">{{ Tournament.getStatus(tournament) }}</td>
+            <td class="align-middle">
+              @if (Tournament.getStatus(tournament) != 'Afgerond') {
+                <a mat-button [routerLink]="['/tournaments', tournament.id, 'edit']">
+                  <mat-icon>edit</mat-icon>
+                  Bewerk
+                </a>
+              }
+              <a mat-button [routerLink]="['/tournaments', tournament.id, 'registrations']">
+                <mat-icon>group</mat-icon>
+                Inschrijvingen
+              </a>
+              @if (Tournament.getStatus(tournament) == 'Geloot') {
+                <a mat-button (click)="clearDraw(tournament)">
+                  <mat-icon>safety_divider</mat-icon>
+                  Loting wissen
+                </a>
+              }
+            </td>
+          </tr>
+        }
+      }
       </tbody>
     </table>
+    @if (!showInactive) {
+      <a mat-button (click)="showInactive = true">
+        <mat-icon>expand</mat-icon>
+        Toon inactief
+      </a>
+    }
     <a mat-button routerLink="/tournaments/add">
       <mat-icon>add</mat-icon>
       Nieuw toernooi

src/app/components/tournament-list/tournament-list.component.ts

@@ -20,6 +20,7 @@ import {TitleService} from "../../service/title.service";
 export class TournamentListComponent implements OnInit, AfterContentChecked {
 
   tournaments: Tournament[];
+  showInactive: boolean = false;
 
   constructor(
     private tournamentService: TournamentService,
@@ -46,4 +47,14 @@ export class TournamentListComponent implements OnInit, AfterContentChecked {
     })
   }
 
+  getActiveTournaments(): Tournament[] {
+    if (!this.tournaments) return [];
+    return this.tournaments.filter(tournament => tournament.active);
+  }
+
+  getInactiveTournaments(): Tournament[] {
+    if (!this.tournaments) return [];
+    return this.tournaments.filter(tournament => !tournament.active);
+  }
+
 }

src/app/components/tournament-manage/tournament-manage.component.html

@@ -71,9 +71,11 @@
                             <th scope="col" class="w-20">Naam</th>
                             <th scope="col" class="w-20">Club</th>
                             <th scope="col" class="w-10">Speelsterkte</th>
-                            <th *ngIf="event.doublesEvent" scope="col" class="w-20">Partner</th>
+                            @if (event.doublesEvent) {
-                            <th *ngIf="event.doublesEvent" scope="col" class="w-20">Club</th>
+                              <th scope="col" class="w-20">Partner</th>
-                            <th *ngIf="event.doublesEvent" scope="col" class="w-10">Speelsterkte</th>
+                              <th scope="col" class="w-20">Club</th>
+                              <th scope="col" class="w-10">Speelsterkte</th>
+                            }
                           </tr>
                           </thead>
                           <tbody>
@@ -81,9 +83,11 @@
                             <td class="align-middle">{{ team.player1 | fullName }}</td>
                             <td class="align-middle">{{ team.player1.club }}</td>
                             <td class="align-middle">{{ getStrength(team.player1.strength.valueOf()) }}</td>
-                            <td *ngIf="event.doublesEvent" class="align-middle">{{ team.player2 | fullName }}</td>
+                            @if (event.doublesEvent) {
-                            <td *ngIf="event.doublesEvent" class="align-middle">{{ team.player2?.club }}</td>
+                              <td class="align-middle">{{ team.player2 | fullName }}</td>
-                            <td *ngIf="event.doublesEvent" class="align-middle">{{ getStrength(team.player2?.strength?.valueOf()) }}</td>
+                              <td class="align-middle">{{ team.player2?.club }}</td>
+                              <td class="align-middle">{{ getStrength(team.player2?.strength?.valueOf()) }}</td>
+                            }
                           </tr>
                           </tbody>
                         </table>

src/app/components/tournament-registrations/tournament-registrations.component.html

@@ -1,4 +1,5 @@
-<mat-card appearance="outlined" *ngIf="tournament">
+@if (tournament) {
+  <mat-card appearance="outlined">
     <mat-card-header>
       <h5>Inschrijvingen voor {{ tournament.name }}</h5>
     </mat-card-header>
@@ -13,16 +14,20 @@
               <tr>
                 <th scope="col" class="w-25">Naam</th>
                 <th scope="col" class="w-25">Club</th>
-              <th *ngIf="event.doublesEvent" scope="col" class="w-25">Partner</th>
+                @if (event.doublesEvent) {
-              <th *ngIf="event.doublesEvent" scope="col" class="w-25">Club</th>
+                  <th scope="col" class="w-25">Partner</th>
+                  <th scope="col" class="w-25">Club</th>
+                }
               </tr>
             </thead>
             <tbody>
               <tr *ngFor="let registration of event.registrations">
                 <td class="align-middle">{{ registration.player | fullName }}</td>
                 <td class="align-middle">{{ registration.player.club }}</td>
-              <td *ngIf="event.doublesEvent" class="align-middle">{{ registration.partner | fullName }}</td>
+                @if (event.doublesEvent) {
-              <td *ngIf="event.doublesEvent" class="align-middle">{{ registration.partner?.club }}</td>
+                  <td class="align-middle">{{ registration.partner?.club }}</td>
+                  <td class="align-middle">{{ registration.partner | fullName }}</td>
+                }
               </tr>
             </tbody>
           </table>
@@ -30,3 +35,4 @@
       </mat-card>
     </mat-card-content>
   </mat-card>
+}

src/app/components/tournament-validate/tournament-validate.component.html

@@ -36,16 +36,20 @@
             <tr>
               <th scope="col" class="w-25">Naam</th>
               <th scope="col" class="w-25">Club</th>
-              <th *ngIf="event.doublesEvent" scope="col" class="w-25">Partner</th>
+              @if (event.doublesEvent) {
-              <th *ngIf="event.doublesEvent" scope="col" class="w-25">Club</th>
+                <th scope="col" class="w-25">Partner</th>
+                <th scope="col" class="w-25">Club</th>
+              }
             </tr>
             </thead>
             <tbody>
             <tr *ngFor="let registration of event.registrations">
               <td class="align-middle">{{ registration.player | fullName }}</td>
               <td class="align-middle">{{ registration.player.club }}</td>
-              <td *ngIf="event.doublesEvent" class="align-middle">{{ registration.partner | fullName }}</td>
+              @if (event.doublesEvent) {
-              <td *ngIf="event.doublesEvent" class="align-middle">{{ registration.partner?.club }}</td>
+                <td class="align-middle">{{ registration.partner | fullName }}</td>
+                <td class="align-middle">{{ registration.partner?.club }}</td>
+              }
             </tr>
             </tbody>
           </table>
@@ -60,11 +64,6 @@
             <li *ngFor="let validation of getEventValidation(event.id)?.validations">
               <mat-icon class="text-{{ getColorForSeverity(validation.severity) }}">{{ getIconForSeverity(validation.severity) }}</mat-icon>
               <player-link [validationMessage]="validation.message"></player-link>
-<!--
-              <div *ngIf="validation.message">
-                <app-player-link [validationMessage]="'validation.message'"></app-player-link>
-              </div>
--->
             </li>
           </ul>
         </mat-expansion-panel>