From 714e254b540e5bfdfc57d3ad090488e83fa424d8 Mon Sep 17 00:00:00 2001 From: "Arzan Pour, Arshia (UG - Comp Sci & Elec Eng)" <aa04758@surrey.ac.uk> Date: Fri, 3 May 2024 17:45:33 +0000 Subject: [PATCH] FlighList bug fixed. --- .../components/BookingList/BookingList.scss | 6 +++ .../components/BookingList/BookingList.tsx | 47 +++++++++++++------ .../BookingView/BookingSeatCard.tsx | 4 +- .../CustomerBookings/CustomerBookings.scss | 9 ++++ .../CustomerBookings/CustomerBookings.tsx | 8 ++-- .../Dashboard/FlightCard/FlightCard.scss | 1 + .../src/components/FlightList/FlightList.scss | 11 ++++- .../src/components/FlightList/FlightList.tsx | 17 +++++-- .../src/services/BookingView/BookingView.ts | 3 +- 9 files changed, 82 insertions(+), 24 deletions(-) diff --git a/client/src/components/BookingList/BookingList.scss b/client/src/components/BookingList/BookingList.scss index 6f50c49..699c746 100644 --- a/client/src/components/BookingList/BookingList.scss +++ b/client/src/components/BookingList/BookingList.scss @@ -16,6 +16,12 @@ font-size: 1.25rem; } +.booking-list-subtitle { + color: gray; + font-size: 1rem; + text-align: center; +} + .booking-bold { font-weight: bold; } diff --git a/client/src/components/BookingList/BookingList.tsx b/client/src/components/BookingList/BookingList.tsx index 65500dd..d0b2da4 100644 --- a/client/src/components/BookingList/BookingList.tsx +++ b/client/src/components/BookingList/BookingList.tsx @@ -1,15 +1,19 @@ -import { useLoaderData, useLocation } from 'react-router-dom'; -import { IBookingList } from '../../services/BookingList/BookingList'; -import BookingCard from './BookingCard/BookingCard'; -import './BookingList.scss'; +import { useLoaderData, useLocation } from "react-router-dom"; +import { IBookingList } from "../../services/BookingList/BookingList"; +import BookingCard from "./BookingCard/BookingCard"; +import "./BookingList.scss"; function BookingList() { const data = useLoaderData() as IBookingList; const location = useLocation(); - const isEconomy = location.search.split('seatType=')[1] === 'economy'; - const origin = decodeURIComponent(location.search.split('origin=')[1].split('&')[0]); - const destination = decodeURIComponent(location.search.split('destination=')[1].split('&')[0]); - const date = location.search.split('date=')[1].split('&')[0]; + const isEconomy = location.search.split("seatType=")[1] === "economy"; + const origin = decodeURIComponent( + location.search.split("origin=")[1].split("&")[0] + ); + const destination = decodeURIComponent( + location.search.split("destination=")[1].split("&")[0] + ); + const date = location.search.split("date=")[1].split("&")[0]; return ( <> @@ -17,16 +21,31 @@ function BookingList() { <div className='card booking-list-card'> <div className='booking-list-title'> <span>Showing </span> - <span className='booking-bold'>{isEconomy ? 'Economy' : 'Business'}</span> + <span className='booking-bold'> + {isEconomy ? "Economy" : "Business"} + </span> <span> Flights for </span> - <span className='booking-bold'>{origin} - {destination}</span> + <span className='booking-bold'> + {origin} - {destination} + </span> <span> on </span> - <span className='booking-bold'>{new Date(date).toLocaleDateString()}</span> + <span className='booking-bold'> + {new Date(date).toLocaleDateString()} + </span> </div> - {data.flights.map((flight) => { - return <BookingCard key={flight.id} flight={flight}></BookingCard> - })} + {data.flights.length > 0 ? ( + data.flights.map((flight) => { + return ( + <BookingCard + key={flight.id} + flight={flight} + ></BookingCard> + ); + }) + ) : ( + <span className='booking-list-subtitle'>No Flights Available for Selected Parameters.</span> + )} </div> </div> </> diff --git a/client/src/components/BookingView/BookingSeatCard.tsx b/client/src/components/BookingView/BookingSeatCard.tsx index 9d312a7..0b6b91f 100644 --- a/client/src/components/BookingView/BookingSeatCard.tsx +++ b/client/src/components/BookingView/BookingSeatCard.tsx @@ -54,7 +54,9 @@ const BookingSeatCard = ({ seatId }: { seatId?: number }) => { }); }, [seatId]); - const seats = data.seats.$values.filter((seat) => seat.classType === data.booking.bookingClass && seat.isAvailable); + const bookingClassType = data.booking.bookingClass === 2 ? 0 : 1 + const seats = data.seats.$values.filter((seat) => seat.classType === bookingClassType && seat.isAvailable); + return ( <div className="card booking-view-card"> <h3>Seat Information</h3> diff --git a/client/src/components/CustomerBookings/CustomerBookings.scss b/client/src/components/CustomerBookings/CustomerBookings.scss index 37857b6..5e3342b 100644 --- a/client/src/components/CustomerBookings/CustomerBookings.scss +++ b/client/src/components/CustomerBookings/CustomerBookings.scss @@ -17,3 +17,12 @@ margin-top: 30px; margin-bottom: 30px; } + +.headings{ + text-align: center; + margin-bottom: 20px; +} + +.messages{ + text-align: center; +} diff --git a/client/src/components/CustomerBookings/CustomerBookings.tsx b/client/src/components/CustomerBookings/CustomerBookings.tsx index b7116ce..b5434f7 100644 --- a/client/src/components/CustomerBookings/CustomerBookings.tsx +++ b/client/src/components/CustomerBookings/CustomerBookings.tsx @@ -13,15 +13,17 @@ const CustomerBookings = () => { return ( <div className="page-view"> <div className="customer-booking-view"> - <h3>List of bookings</h3> - {bookings.map((booking) => ( + <h1 className="headings">List of bookings</h1> + {bookings.length > 0 ?(bookings.map((booking) => ( <CustomerBookingCard flightId={booking.flightId} flightType={flightType} bookingId={booking.id} key={booking.id} /> - ))} + ))):( + <p className="messages">No bookings have been made yet.</p> + ) } </div> </div> ); diff --git a/client/src/components/Dashboard/FlightCard/FlightCard.scss b/client/src/components/Dashboard/FlightCard/FlightCard.scss index 8163853..d121e1b 100644 --- a/client/src/components/Dashboard/FlightCard/FlightCard.scss +++ b/client/src/components/Dashboard/FlightCard/FlightCard.scss @@ -8,6 +8,7 @@ padding: 1rem; box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06); width: max-content; + margin-bottom: 20px; } .flight-path { diff --git a/client/src/components/FlightList/FlightList.scss b/client/src/components/FlightList/FlightList.scss index 90206bc..08e4ce7 100644 --- a/client/src/components/FlightList/FlightList.scss +++ b/client/src/components/FlightList/FlightList.scss @@ -8,9 +8,18 @@ .full-flight-list-card { display: flex; + flex-direction: column; align-items: center; width: 20vw; min-width: 350px; max-height: 100%; - overflow-y: scroll; +} + +.list-title { + font-size: 2rem; + margin-bottom: 20px; +} + +.list-subtitle { + font-size: 1rem; } diff --git a/client/src/components/FlightList/FlightList.tsx b/client/src/components/FlightList/FlightList.tsx index 6674565..86dee28 100644 --- a/client/src/components/FlightList/FlightList.tsx +++ b/client/src/components/FlightList/FlightList.tsx @@ -14,14 +14,23 @@ function FlightList() { return ( <> <div className='full-flight-list'> - <div className='card full-flight-list-card'> - { + <div className='full-flight-list-card'> + <span className='list-title'>Flight List</span> + {flights.length > 0 ? ( flights.map((flight) => { return ( - <FlightCard key={flight.id} flight={flight} extraInfo={true} /> + <FlightCard + key={flight.id} + flight={flight} + extraInfo={true} + /> ); }) - } + ) : ( + <span className='list-subtitle'> + No flights have been created yet. + </span> + )} </div> </div> </> diff --git a/client/src/services/BookingView/BookingView.ts b/client/src/services/BookingView/BookingView.ts index c11be3e..786488c 100644 --- a/client/src/services/BookingView/BookingView.ts +++ b/client/src/services/BookingView/BookingView.ts @@ -78,8 +78,9 @@ export async function GetFullBookingData( seatId: number ): Promise<IBookingData> { try { + console.log(seatId); const flight = Api.get(`Flight/${flightId}`, { withCredentials: true }); - const seats = Api.get(`Seat/${seatId}/seats`, { + const seats = Api.get(`Flight/${flightId}/seats`, { withCredentials: true, }); const [fdata, sdata] = await Promise.all([flight, seats]); -- GitLab