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