diff --git a/client/src/components/BookingList/BookingList.scss b/client/src/components/BookingList/BookingList.scss
index 6f50c49d5973231d5bd3bc401f406882f393ce78..699c746591eaf165bbac9eae9b0e365daf888d93 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 65500dda504c895987c4a266bfd7236c6e858419..d0b2da4f56d8a6a9c38b5b7a92c705f91b9e8e79 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 9d312a73e69a5f3906710b625a86a1781a9a330f..0b6b91f82929b57a3193418c4b2492261aefe0fc 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 37857b62a3b543b8b49b9c83c80f9ecdfdd2b21e..5e3342ba319f373f1dea0e2fea422f83caa6db2a 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 b7116ce14108ebc2bd5302018d46418d0a985308..b5434f7f1c47322394410028b7b49a647bfcf44b 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 8163853c6a9205753faa0b1270484b1eec3dda55..d121e1b81a5c6555a5961e4d8e2ac9c1f03c8f2d 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 90206bcd15fd1e55e6734e50a4735e5309f0fc51..08e4ce7936746163638da37e2039136180ae8b95 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 6674565c0442ce73505cb544b2ce0d39658f3eda..86dee2886d529ff3c72a96b7caf55cd01f090b4f 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 c11be3ebfe54af1c0c3176b1cdd09002917df148..786488c33f4b51d6753f6ae9cc7920b41de23217 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]);