feat(#142): remove ngx-time-picker

frontend/package.json

@@ -35,7 +35,6 @@
     "core-js": "3.36.1",
     "jquery": "3.7.1",
     "jwt-decode": "4.0.0",
-    "ngx-mat-timepicker": "^17.1.0",
     "puppeteer": "^22.11.2",
     "replace-in-files-cli": "^2.2.0",
     "rxjs": "7.8.1",

frontend/src/app/app.module.ts

@@ -38,7 +38,6 @@ import { CopyLinkDialogComponent } from './components/copy-link-dialog/copy-link
 import { TournamentOverviewComponent } from './components/tournament/tournament-overview/tournament-overview.component';
 import { TournamentTeamEditComponent } from './components/tournament-team-edit/tournament-team-edit.component';
 import { MatTable } from '@angular/material/table';
-import { NgxMatTimepickerComponent, NgxMatTimepickerDirective } from 'ngx-mat-timepicker';
 import { MatDatepicker } from '@angular/material/datepicker';
 import { HeaderCardComponent } from './components/header-card/header-card.component';
 
@@ -87,8 +86,6 @@ import { HeaderCardComponent } from './components/header-card/header-card.compon
     MatToolbar,
     MatTooltipModule,
     ReactiveFormsModule,
-    NgxMatTimepickerComponent,
-    NgxMatTimepickerDirective,
     MatDatepicker,
     HeaderCardComponent,
   ],

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

@@ -66,15 +66,11 @@
         <mat-label>Registration end time</mat-label>
         <input
           matInput
+          type="time"
           name="registrationEndTime"
           formControlName="registrationEndTime"
           required
-          format="24"
-          [ngxMatTimepicker]="timePicker"
-          placeholder="16:00"
-          readonly
         />
-        <mat-icon matSuffix (click)="timePicker.open()"> watch_later</mat-icon>
         @if (
           tournamentForm.controls.registrationEndTime.invalid &&
           tournamentForm.controls.maxParticipants.errors?.['required']
@@ -82,7 +78,6 @@
           <mat-error> Registration end time is required.</mat-error>
         }
       </mat-form-field>
-      <ngx-mat-timepicker color="primary" #timePicker></ngx-mat-timepicker>
 
       <mat-form-field appearance="outline">
         <mat-label>Maximum Participants</mat-label>

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

@@ -19,7 +19,6 @@ import { CreateTournamentDto, TournamentEndpointService } from 'openapi-generate
 import { Router, RouterLink } from '@angular/router';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { HttpErrorResponse } from '@angular/common/http';
-import { NgxMatTimepickerComponent, NgxMatTimepickerDirective } from 'ngx-mat-timepicker';
 import { isValidDate } from 'rxjs/internal/util/isDate';
 import { CustomDateAdapter } from '../../../adapters/date-adapter';
 
@@ -38,8 +37,6 @@ import { CustomDateAdapter } from '../../../adapters/date-adapter';
     MatCardModule,
     FormsModule,
     NgIf,
-    NgxMatTimepickerComponent,
-    NgxMatTimepickerDirective,
     ReactiveFormsModule,
     RouterLink,
   ],

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

@@ -63,15 +63,11 @@
         <mat-label>Registration end time</mat-label>
         <input
           matInput
+          type="time"
           name="registrationEndTime"
           formControlName="registrationEndTime"
           required
-          format="24"
-          [ngxMatTimepicker]="timePicker"
-          placeholder="16:00"
-          readonly
         />
-        <mat-icon matSuffix (click)="timePicker.open()"> watch_later</mat-icon>
         @if (
           tournamentForm.controls.registrationEndTime.invalid &&
           tournamentForm.controls.maxParticipants.errors?.['required']
@@ -79,7 +75,6 @@
           <mat-error> Registration end time is required.</mat-error>
         }
       </mat-form-field>
-      <ngx-mat-timepicker color="primary" #timePicker></ngx-mat-timepicker>
 
       <mat-form-field appearance="outline">
         <mat-label>Maximum Participants</mat-label>

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

@@ -19,7 +19,6 @@ import { MatListModule } from '@angular/material/list';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router, RouterLink } from '@angular/router';
 import { TournamentEndpointService, TournamentOverviewDto, TournamentUpdateDto } from '@api';
-import { NgxMatTimepickerComponent, NgxMatTimepickerDirective } from 'ngx-mat-timepicker';
 import { isValidDate } from 'rxjs/internal/util/isDate';
 import { CustomDateAdapter } from 'src/app/adapters/date-adapter';
 
@@ -36,8 +35,6 @@ import { CustomDateAdapter } from 'src/app/adapters/date-adapter';
     MatCardModule,
     FormsModule,
     NgIf,
-    NgxMatTimepickerComponent,
-    NgxMatTimepickerDirective,
     ReactiveFormsModule,
     RouterLink,
   ],
@@ -82,7 +79,7 @@ export class TournamentEditComponent implements OnInit {
         this.tournamentForm.setValue({
           name: data.name,
           registrationEndDate: date,
-          registrationEndTime: `${date.getHours()}:${date.getMinutes()}`, // USe UTCHours ?
+          registrationEndTime: `${this.getToDigitString(date.getHours())}:${this.getToDigitString(date.getMinutes())}`, // USe UTCHours ?
           maxParticipants: data.maxParticipants,
           description: data.description!,
         });
@@ -169,4 +166,11 @@ export class TournamentEditComponent implements OnInit {
       duration: 5000,
     });
   }
+
+  getToDigitString(value: number): string {
+    if (value < 10) {
+      return '0' + value;
+    }
+    return value.toString();
+  }
 }