fix: ensure date changes properly on booking page

- date changes properly for startTime and endTime

src/app/pages/booking-input-page/booking-input-page.component.html

@@ -27,59 +27,52 @@
       <div class="flex flex-col items-center w-full">
         <p-calendar
           inputId="calendar-24h"
-          [(ngModel)]="datetime24h"
           [showTime]="true"
           [inline]="true"
           [hourFormat]="String(24)"
           styleClass="w-full"
-          (ngModelChange)="synchronizeDateTime()"
         ></p-calendar>
       </div>
     </div>
-
-    <!-- Datum und Zeit Eingabe -->
-    <div class="lg:w-1/2 lg:pl-4">
-      <div class="mb-4">
-        <label for="date" class="block text-gray-700 font-medium mb-2">Datum</label>
-        <p-calendar
-          [(ngModel)]="date"
-          dateFormat="dd/mm/yy"
-          id="date"
-          class="w-full p-2 border border-gray-300 rounded-md"
-          showIcon="true"
-          inputStyleClass="w-full p-2 border border-gray-300 rounded-md"
-        ></p-calendar>
+    <form [formGroup]="timeDateForm">
+      <!-- Datum und Zeit Eingabe -->
+      <div class="lg:w-1/2 lg:pl-4">
+        <div class="mb-4">
+          <label for="date" class="block text-gray-700 font-medium mb-2">Datum</label>
+          <p-calendar
+            formControlName="date"
+            dateFormat="dd/mm/yy"
+            id="date"
+            class="w-full p-2 border border-gray-300 rounded-md"
+            showIcon="true"
+            inputStyleClass="w-full p-2 border border-gray-300 rounded-md"
+          ></p-calendar>
+        </div>
+        <div class="mb-4">
+          <label for="start-time" class="block text-gray-700 font-medium mb-2">Anfangszeit</label>
+          <p-calendar
+            formControlName="startTime"
+            timeOnly="true"
+            id="start-time"
+            class="w-full p-2 border border-gray-300 rounded-md"
+            showIcon="true"
+            inputStyleClass="w-full p-2 border border-gray-300 rounded-md"
+          ></p-calendar>
+        </div>
+        <div>
+          <label for="end-time" class="block text-gray-700 font-medium mb-2">Endzeit</label>
+          <p-calendar
+            formControlName="endTime"
+            timeOnly="true"
+            id="end-time"
+            class="w-full p-2 border border-gray-300 rounded-md"
+            showIcon="true"
+            inputStyleClass="w-full p-2 border border-gray-300 rounded-md"
+          ></p-calendar>
+        </div>
       </div>
-      <div class="mb-4">
-        <label for="start-time" class="block text-gray-700 font-medium mb-2">Anfangszeit</label>
-        <p-calendar
-          [(ngModel)]="startTime"
-          timeOnly="true"
-          id="start-time"
-          class="w-full p-2 border border-gray-300 rounded-md"
-          showIcon="true"
-          inputStyleClass="w-full p-2 border border-gray-300 rounded-md"
-        ></p-calendar>
-      </div>
-      <div>
-        <label for="end-time" class="block text-gray-700 font-medium mb-2">Endzeit</label>
-        <p-calendar
-          [(ngModel)]="endTime"
-          timeOnly="true"
-          id="end-time"
-          class="w-full p-2 border border-gray-300 rounded-md"
-          showIcon="true"
-          inputStyleClass="w-full p-2 border border-gray-300 rounded-md"
-        ></p-calendar>
-      </div>
-    </div>
+    </form>
   </div>
-
-  <!-- Filter Settings -->
-  <div class="mt-1">
-    <app-filter-settings></app-filter-settings>
-  </div>
-
   <!-- Weitere Informationen -->
   <h3 class="text-2xl font-semibold mb-4">Weitere Informationen</h3>
   <div class="mb-6">

src/app/pages/booking-input-page/booking-input-page.component.ts

 import { Component } from '@angular/core'
 import { FilterSettingsComponent } from '../../components/filter-settings/filter-settings.component'
-import { FormsModule } from '@angular/forms'
+import {
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms'
 import { CalendarModule } from 'primeng/calendar'
 import { CardModule } from 'primeng/card'
 import { HttpClientModule, HttpClient } from '@angular/common/http' // Importiere HttpClientModule und HttpClient
@@ -29,20 +35,21 @@ import { NgIf } from '@angular/common'
     HttpClientModule,
     ConfirmationDialogComponent,
     NgIf,
+    ReactiveFormsModule,
     // Füge HttpClientModule zu den Imports hinzu
   ],
   templateUrl: './booking-input-page.component.html',
   styleUrl: './booking-input-page.component.scss',
 })
 export class BookingInputPageComponent {
-  datetime24h: Date | undefined
-  date: Date
-  startTime: Date
-  endTime: Date
+  date: Date = new Date()
+  startTime: Date = new Date(new Date().getTime())
+  endTime: Date = new Date(new Date().setHours(new Date().getHours() + 1))
   bookingAvailable: boolean = false
   deskId: string | undefined
   private user: User | null = null
   protected readonly String = String
+  timeDateForm
   timeOptions: any = {
     hour: '2-digit',
     minute: '2-digit',
@@ -60,46 +67,62 @@ export class BookingInputPageComponent {
     private reservationService: ReservationService,
     private userService: UserService,
     private deskService: DeskService,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
+    private formBuilder: FormBuilder
   ) {
-    this.date = new Date()
     this.route.params.subscribe((params) => {
       this.deskId = params['deskId']
     })
     this.userService.getUserAsObservable().subscribe((user) => {
       this.user = user
     })
-    this.startTime = new Date()
-    this.endTime = new Date(new Date().setHours(new Date().getHours() + 1))
-  }
-
-  get timeAsString(): string | undefined {
-    return this.datetime24h?.toLocaleTimeString('de-DE', this.timeOptions)
+    this.timeDateForm = this.formBuilder.group({
+      date: new FormControl(this.date),
+      startTime: new FormControl(this.startTime),
+      endTime: new FormControl(this.endTime),
+    })
+    this.subscribeToDateChanges()
   }
-
-  get dateAsString(): string {
-    let dateStr = this.datetime24h?.toLocaleDateString('de-DE', this.dateOptions)
-    return dateStr ? dateStr.replace(',', '') : ''
+  subscribeToDateChanges() {
+    const dateControl = this.timeDateForm.get('date')
+    if (dateControl) {
+      dateControl.valueChanges.subscribe((newDate) => {
+        if (newDate) {
+          this.updateTimeDate(newDate)
+        }
+      })
+    } else return
   }
-
   get userId() {
     return this.user?.id
   }
+
   //UCT+1
-  toLocalISOString(date: Date) {
+  toLocalISOString(anyDate: Date) {
     //offset in hours
-    const offSet = date.getTimezoneOffset() / -60
-    const localTime = new Date(date.getTime() - date.getTimezoneOffset() * 60000)
+    const offSet = anyDate.getTimezoneOffset() / -60
+    let localTime = new Date(anyDate.getTime() - anyDate.getTimezoneOffset() * 60000)
     return localTime.toISOString()
   }
 
+  get startTimeControl() {
+    return this.timeDateForm.controls['startTime'].value
+  }
+
+  get endTimeControl() {
+    return this.timeDateForm.controls['endTime'].value
+  }
+
   onSubmit() {
+    if (!this.startTimeControl || !this.endTimeControl || !this.date) {
+      return
+    }
     const response = this.reservationService
       .confirmReservation({
         userId: this.userId,
         deskId: this.deskId,
-        startTime: this.toLocalISOString(this.startTime),
-        endTime: this.toLocalISOString(this.endTime),
+        startTime: this.toLocalISOString(this.startTimeControl),
+        endTime: this.toLocalISOString(this.endTimeControl),
         type: 'shared',
       } as SimpleReservationResponse)
       .subscribe({
@@ -112,12 +135,19 @@ export class BookingInputPageComponent {
       })
   }
 
-  synchronizeDateTime(): void {
-    if (this.datetime24h) {
-      this.date = new Date(this.datetime24h)
-      this.startTime = new Date(this.datetime24h)
-      this.endTime = new Date(this.datetime24h)
-      this.endTime.setHours(this.endTime.getHours() + 1) // Beispiel: Endzeit eine Stunde nach der Startzeit
-    }
+  updateTimeDate(newDate: Date): void {
+    const newStartTime = new Date(this.startTime)
+    const newEndTime = new Date(this.endTime)
+
+    newStartTime.setFullYear(newDate.getFullYear(), newDate.getMonth(), newDate.getDate())
+    newEndTime.setFullYear(newDate.getFullYear(), newDate.getMonth(), newDate.getDate())
+
+    this.timeDateForm.patchValue({
+      startTime: newStartTime,
+      endTime: newEndTime,
+    })
+
+    this.startTime = newStartTime
+    this.endTime = newEndTime
   }
 }