From 0dca037e3aa708d1099fdea7e747a2e79d39ad8f Mon Sep 17 00:00:00 2001
From: Mouaz Abdelsamad <ma03081@surrey.ac.uk>
Date: Sat, 20 Apr 2024 00:27:11 +0100
Subject: [PATCH] display actual flight info
---
.../Dashboard/FlightCard/FlightCard.tsx | 17 +++++++-------
.../components/Dashboard/Flights/Flights.scss | 1 +
.../components/Dashboard/Flights/Flights.tsx | 22 +++++++++++--------
.../services/Dashboard/AirlineDashboard.ts | 7 +++---
.../services/Dashboard/CustomerDashboard.ts | 7 +++---
5 files changed, 31 insertions(+), 23 deletions(-)
diff --git a/client/src/components/Dashboard/FlightCard/FlightCard.tsx b/client/src/components/Dashboard/FlightCard/FlightCard.tsx
index 1d19058..dd3a998 100644
--- a/client/src/components/Dashboard/FlightCard/FlightCard.tsx
+++ b/client/src/components/Dashboard/FlightCard/FlightCard.tsx
@@ -11,16 +11,17 @@ interface IFlightCard {
function FlightCard({ flight, extraInfo }: IFlightCard) {
return (
<>
- <div className='flight-card'>
- <span>{flight.id}</span>
- {extraInfo && <span>Departure Time: {new Date(flight.departureTime).toLocaleString()}</span>}
- {extraInfo && <span>Arrival Time: {new Date(flight.arrivalTime).toLocaleString()}</span>}
- <span className='flight-path'>{airportCode(flight.origin)} - {airportCode(flight.destination)}</span>
- <span>{flight.origin} - {flight.destination}</span>
- <Link to={'/flight/' + flight.id}>View Flight</Link>
- </div>
+
+ <div className='flight-card'>
+ <span>Flight Number: {flight.id}</span>
+ <span>Departure Time: {new Date(flight.departureTime).toLocaleString()}</span>
+ <span>Arrival Time: {new Date(flight.arrivalTime).toLocaleString()}</span>
+ <span className='flight-path'>{flight.origin} - {flight.destination}</span>
+ <Link to={'/Flight/' + flight.id}>View Flight</Link>
+ </div>
</>
);
}
export default FlightCard;
+
diff --git a/client/src/components/Dashboard/Flights/Flights.scss b/client/src/components/Dashboard/Flights/Flights.scss
index 9cabf46..ad5eea8 100644
--- a/client/src/components/Dashboard/Flights/Flights.scss
+++ b/client/src/components/Dashboard/Flights/Flights.scss
@@ -22,6 +22,7 @@
border-radius: 5px;
background-color: var(--main);
color: white;
+ margin-left: 25px;
}
.view-more:hover {
diff --git a/client/src/components/Dashboard/Flights/Flights.tsx b/client/src/components/Dashboard/Flights/Flights.tsx
index 7b6e1f8..aa2f3ad 100644
--- a/client/src/components/Dashboard/Flights/Flights.tsx
+++ b/client/src/components/Dashboard/Flights/Flights.tsx
@@ -7,7 +7,8 @@ import { Link } from 'react-router-dom';
function Flights() {
const data = useLoaderData() as ICustomerDashboardData | IAirlineDashboardData;
-
+ console.log(data)
+ console.log("bitch pls")
if (data.type === 'customer') {
return (
<>
@@ -20,8 +21,9 @@ function Flights() {
</div>
<div className='flight-list'>
{data.upcomingFlights.length > 0
- ? data.upcomingFlights.slice(0,3).map((flight) => {
- return <FlightCard key={flight.id} flight={flight}></FlightCard>
+ ? data.upcomingFlights.slice(0,3).map((item) => {
+ // Only pass the flight data to the FlightCard
+ return <FlightCard key={item.flight.id} flight={item.flight}></FlightCard>
})
: <div>No Upcoming Flights</div>}
</div>
@@ -33,23 +35,25 @@ function Flights() {
<button type='button' className='view-more'>View more</button>
</div>
<div className='flight-list'>
- {data.upcomingFlights.length > 0
- ? data.flightsHistory.slice(0,3).map((flight) => {
- return <FlightCard key={flight.id} flight={flight}></FlightCard>
+ {data.flightsHistory.length > 0
+ ? data.flightsHistory.slice(0,3).map((item) => {
+ // Only pass the flight data to the FlightCard
+ return <FlightCard key={item.flight.id} flight={item.flight}></FlightCard>
})
: <div>No Flights History</div>}
</div>
</div>
</>
);
- } else {
+ }
+ else {
return (
<>
<div className='flights'>
<div className='flex-row'>
- <span className='flights-title'>Upcoming Flights</span>
+ <span className='flights-title'>Flights List</span>
<Link to="/register-flight">
- <button type='button' className='add-flight'>Add flight</button>
+ <button type='button' className='view-more'>Add flight</button>
</Link>
</div>
<div className='flight-list'>
diff --git a/client/src/services/Dashboard/AirlineDashboard.ts b/client/src/services/Dashboard/AirlineDashboard.ts
index 37c9702..4a358bf 100644
--- a/client/src/services/Dashboard/AirlineDashboard.ts
+++ b/client/src/services/Dashboard/AirlineDashboard.ts
@@ -34,12 +34,13 @@ export interface IAirlineDashboardData {
export async function GetAirlineDashboardData({request}: {request: Request}): Promise<IAirlineDashboardData> {
try {
const id = getSearchParam(request.url, 'id');
- const result = await Api.get(`Flight?airlineId=${id}`, { withCredentials: true });
+ const response = await Api.get(`Flight?airlineId=${id}`, { withCredentials: true });
+ const flights = response.data.$values;
return {
type: 'airline',
- flightList : result.data
+ flightList: flights
};
} catch (error) {
throw error;
}
-}
+}
\ No newline at end of file
diff --git a/client/src/services/Dashboard/CustomerDashboard.ts b/client/src/services/Dashboard/CustomerDashboard.ts
index cff674c..f3bd27c 100644
--- a/client/src/services/Dashboard/CustomerDashboard.ts
+++ b/client/src/services/Dashboard/CustomerDashboard.ts
@@ -31,10 +31,10 @@ export interface ICustomerDashboardData {
flightsHistory: IFlight[];
}
-export async function GetCustomerDashboardData({ request } : { request: Request }): Promise<ICustomerDashboardData> {
+export async function GetCustomerDashboardData(): Promise<ICustomerDashboardData> {
try {
- const upcomingFlights = Api.get('', {withCredentials: true});
- const flightsHistory = Api.get('', {withCredentials: true});
+ const upcomingFlights = Api.get('Booking/upcoming', { withCredentials: true });
+ const flightsHistory = Api.get('Booking/history', { withCredentials: true });
const [uData, hData] = await Promise.all([upcomingFlights, flightsHistory]);
return {
@@ -46,3 +46,4 @@ export async function GetCustomerDashboardData({ request } : { request: Request
throw error;
}
}
+
--
GitLab