import {Component} from '@angular/core'; import {BoatsService} from "../services/boats.service"; import {ReservationService} from "../services/reservation.service"; @Component({ selector: 'app-reservation-view', templateUrl: './reservation-view.component.html', styleUrls: ['./reservation-view.component.css'] }) export class ReservationViewComponent { boats: { "id": string, "label": string }[] = []; boat: any; date: any; fromHour: any; toHour: any; hours: { "label": number, "class": string }[] = []; reservedHours: any[] = []; constructor(private boatService: BoatsService, private reservationService: ReservationService) { const today = new Date(); this.date = today.toISOString().split('T')[0]; for (let i = 7; i < 23; i++) { this.hours.push( { "label": i, "class": "free" } ) } } isDateFromPast() { return new Date(new Date().setHours(0, 0, 0)) >= new Date( this.date.split("-")[0], this.date.split("-")[1] - 1, this.date.split("-")[2], 1 ); } areHoursConflicting() { return this.hours.some(h => h.class === "conflict") } areHoursOrderWrong() { return this.fromHour >= this.toHour } isItTooLateToStart() { let now = new Date(new Date().setHours(0, 0, 0)) let selected = new Date( this.date.split("-")[0], this.date.split("-")[1] - 1, this.date.split("-")[2], 1 ) if (now > selected) { return true } else if (now.getDate() == selected.getDate()){ return this.fromHour <= new Date().getHours() } return false } isFormNotValid() { return this.areHoursOrderWrong() || this.areHoursConflicting() || this.isDateFromPast() || this.isItTooLateToStart() } makeReservation() { let reservation_info = { "userId": sessionStorage.getItem("username_id"), "boatId": this.boat, "date": this.date, "startHour": this.fromHour, "endHour": this.toHour } console.log("reservation_info: ", reservation_info) this.reservationService.createReservation(reservation_info) this.updateSquares() } async ngOnInit() { const items = this.boatService.getBoats().subscribe( (response) => { this.boats = response.map(val => ({ "id": val.id, "label": val.name + " | " + val.capacity + " | " + parseFloat(val.cost).toFixed(2) })); this.boat = this.boats[0].id this.fromHour = 7 this.toHour = 8 this.updateSquares() }, (error) => { // Handle any errors console.error(error); } ); } onBoatSelected() { const element = document.getElementById('boat') as HTMLInputElement; if (element) { this.boat = this.boats.find(b => b.label == element.value)!.id } else { console.error('Element with ID "boat" not found.'); } this.updateSquares() } onDateSelected() { const element = document.getElementById('date') as HTMLInputElement; if (element) { this.date = element.value } else { console.error('Element with ID "date" not found.'); } this.updateSquares() } onStartHourSelected() { const element = document.getElementById('from_hour') as HTMLInputElement; if (element) { this.fromHour = parseInt(element.value.split(":")[0]) } else { console.error('Element with ID "from_hour" not found.'); } this.updateSquares() } onEndHourSelected() { const element = document.getElementById('to_hour') as HTMLInputElement; if (element) { this.toHour = parseInt(element.value.split(":")[0]) } else { console.error('Element with ID "to_hour" not found.'); } this.updateSquares() } updateSquares() { this.reservationService.findReservations(parseInt(this.boat), this.date).subscribe( response => { console.log(response) this.reservedHours = response.map(reservation => [reservation.startHour, reservation.endHour] ) this.setHourSquaresByDatabase(this.reservedHours) this.setHourSquaresBySelectedHours() } ) } cleanSquares() { this.hours.forEach(h => h.class = "free") } setHourSquaresByDatabase(reservedHours: number[][]) { this.cleanSquares() reservedHours.forEach(res => { for (let i = res[0]; i < res[1]; i++) { this.hours.find(h => h.label == i)!.class = "taken" } }) } setHourSquaresBySelectedHours() { let currentHour; for (let i = this.fromHour; i < this.toHour; i++) { currentHour = this.hours.find(h => h.label == i) if (currentHour!.class == "taken") { currentHour!.class = "conflict" continue } currentHour!.class = "selected" } } }