OneCompiler

Booking service

90

// booking.service.ts
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' }) export class BookingService { private apiUrl = 'http://localhost:8080'; // Update with actual backend URL

constructor(private http: HttpClient) {}

createBooking(booking: any): Observable<any> { return this.http.post(${this.apiUrl}/bookings, booking); }

getAllBookings(): Observable<any> { return this.http.get(${this.apiUrl}/bookings); }

getBookingById(id: string): Observable<any> { return this.http.get(this.apiUrl/bookings/{this.apiUrl}/bookings/{id}); }

getBookingsByUserId(userId: string): Observable<any> { return this.http.get(this.apiUrl/bookings/user/{this.apiUrl}/bookings/user/{userId}); }

updateBookingStatus(id: string, status: string): Observable<any> { return this.http.put(this.apiUrl/bookings/{this.apiUrl}/bookings/{id}/status?status=${status}, {}); }

deleteBooking(id: string): Observable<any> { return this.http.delete(this.apiUrl/bookings/{this.apiUrl}/bookings/{id}); } }

// booking.component.ts import { Component, OnInit } from '@angular/core'; import { BookingService } from '../services/booking.service';

@Component({ selector: 'app-booking', templateUrl: './booking.component.html', styleUrls: ['./booking.component.css'] }) export class BookingComponent implements OnInit { bookings: any[] = [];

constructor(private bookingService: BookingService) {}

ngOnInit() { this.loadBookings(); }

loadBookings() { this.bookingService.getAllBookings().subscribe( (data) => (this.bookings = data), (error) => console.error('Error fetching bookings', error) ); } }

// booking.component.html

<div> <h2>Bookings</h2> <ul> <li *ngFor="let booking of bookings">{{ booking.id }} - {{ booking.status }}</li> </ul> </div>// app.routes.ts import { Routes } from '@angular/router'; import { BookingComponent } from './booking/booking.component';

export const routes: Routes = [ { path: 'bookings', component: BookingComponent }, { path: '', redirectTo: '/bookings', pathMatch: 'full' } ];