oslo_boating_project/boat-reservation-view/src/app/reservation-view/reservation-view.component.ts

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"
    }
  }

}