diff --git a/src/app/pages/booking-input-page/booking-input-page.component.html b/src/app/pages/booking-input-page/booking-input-page.component.html
index 2526b705daa6280ada87bec6cb915645ac71053d..af773d576be82246330b2662d07dfc2469c24cd7 100644
--- a/src/app/pages/booking-input-page/booking-input-page.component.html
+++ b/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">
diff --git a/src/app/pages/booking-input-page/booking-input-page.component.ts b/src/app/pages/booking-input-page/booking-input-page.component.ts
index 4f64474a3f43c8619a93856be094c0c028db40a8..8db4a6a10474c12c0710bd061f1a2c5bc942d496 100644
--- a/src/app/pages/booking-input-page/booking-input-page.component.ts
+++ b/src/app/pages/booking-input-page/booking-input-page.component.ts
@@ -1,6 +1,12 @@
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
}
}