diff --git a/client/src/components/Dashboard/Flights/Flights.tsx b/client/src/components/Dashboard/Flights/Flights.tsx index 9739ea66fd5fd9e0f82b51ea858a6c9ebb5c8e27..7b6e1f85185d297bbfa631856c70449367245707 100644 --- a/client/src/components/Dashboard/Flights/Flights.tsx +++ b/client/src/components/Dashboard/Flights/Flights.tsx @@ -2,8 +2,8 @@ import { useLoaderData } from 'react-router'; import { ICustomerDashboardData } from '../../../services/Dashboard/CustomerDashboard'; import { IAirlineDashboardData } from '../../../services/Dashboard/AirlineDashboard'; import FlightCard from '../FlightCard/FlightCard'; -import FlightCreationForm from '../../FlightCreationForm/FlightCreationForm'; import './Flights.scss'; +import { Link } from 'react-router-dom'; function Flights() { const data = useLoaderData() as ICustomerDashboardData | IAirlineDashboardData; @@ -14,11 +14,13 @@ function Flights() { <div className='flights'> <div className='flex-row'> <span className='flights-title'>Upcoming Flights</span> - <button type='submit' className='view-more'>View more</button> + <Link to={"/"}> + <button type='button' className='view-more'>View more</button> + </Link> </div> <div className='flight-list'> {data.upcomingFlights.length > 0 - ? data.upcomingFlights.map((flight) => { + ? data.upcomingFlights.slice(0,3).map((flight) => { return <FlightCard key={flight.id} flight={flight}></FlightCard> }) : <div>No Upcoming Flights</div>} @@ -28,11 +30,11 @@ function Flights() { <div className='flights'> <div className='flex-row'> <span className='flights-title'>Flights History</span> - <button type='submit' className='view-more'>View more</button> + <button type='button' className='view-more'>View more</button> </div> <div className='flight-list'> {data.upcomingFlights.length > 0 - ? data.flightsHistory.map((flight) => { + ? data.flightsHistory.slice(0,3).map((flight) => { return <FlightCard key={flight.id} flight={flight}></FlightCard> }) : <div>No Flights History</div>} @@ -43,8 +45,20 @@ function Flights() { } else { return ( <> - <div> - <FlightCreationForm></FlightCreationForm> + <div className='flights'> + <div className='flex-row'> + <span className='flights-title'>Upcoming Flights</span> + <Link to="/register-flight"> + <button type='button' className='add-flight'>Add flight</button> + </Link> + </div> + <div className='flight-list'> + {data.flightList.length > 0 + ? data.flightList.slice(0,3).map((flight) => { + return <FlightCard key={flight.id} flight={flight}></FlightCard> + }) + : <div>No Flights have been created yet.</div>} + </div> </div> </> ); diff --git a/client/src/main.tsx b/client/src/main.tsx index 9904a9ee69eda4a8ddce9aa805745da420bd32b9..1989c3ac260a199058faef4752e097c990105822 100644 --- a/client/src/main.tsx +++ b/client/src/main.tsx @@ -20,6 +20,7 @@ import { GetFlightData } from './services/Flight/Flight.ts'; import { GetFlightList } from './services/FlightList/FlightList.ts'; import { GetBookingList } from './services/BookingList/BookingList.ts'; import './index.scss'; +import FlightCreationForm from './components/FlightCreationForm/FlightCreationForm.tsx'; const router = createBrowserRouter([ { @@ -76,6 +77,10 @@ const router = createBrowserRouter([ path: 'booking/list', loader: GetBookingList, element: <BookingList></BookingList> + }, + { + path: 'register-flight', + element: <FlightCreationForm></FlightCreationForm> } ] } diff --git a/client/src/services/Dashboard/AirlineDashboard.ts b/client/src/services/Dashboard/AirlineDashboard.ts index 3600759203a56849066fbb9075b6e8847218dedc..81e6d63fa0cf201f8bede562f5f2ce480bca98fc 100644 --- a/client/src/services/Dashboard/AirlineDashboard.ts +++ b/client/src/services/Dashboard/AirlineDashboard.ts @@ -1,9 +1,42 @@ +import Api from "../../helpers/Api"; +import { getSearchParam } from "../../helpers/SearchParams"; + +export interface ISeat { + id: number; + classType: number; + seatNumber: string; + isAvailable: boolean; +} + +export interface ISeats { + $id: string; + $values: ISeat[]; +} + +export interface IFlight { + id: number; + origin: string; + destination: string; + arrivalTime: string; + departureTime: string; + economyCapacity: number; + businessCapacity: number; + economyPrice: number; + businessPrice: number; + seats: ISeats +} + export interface IAirlineDashboardData { type: 'airline' + flightList: IFlight[]; } -export async function GetAirlineDashboardData(): Promise<IAirlineDashboardData> { - return { - type: 'airline' - }; +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 }); + return result.data; + } catch (error) { + throw error; + } } diff --git a/client/src/services/Dashboard/CustomerDashboard.ts b/client/src/services/Dashboard/CustomerDashboard.ts index c05a16f6b5ba461863973a17a342293dbb07b4f2..03946610bf06c899918dda3763807494197a4b76 100644 --- a/client/src/services/Dashboard/CustomerDashboard.ts +++ b/client/src/services/Dashboard/CustomerDashboard.ts @@ -1,3 +1,5 @@ +import Api from "../../helpers/Api"; + export interface ISeat { id: number; classType: number; @@ -30,9 +32,17 @@ export interface ICustomerDashboardData { } export async function GetCustomerDashboardData(): Promise<ICustomerDashboardData> { - return { - type: 'customer', - upcomingFlights: [], - flightsHistory: [] + try { + const upcomingFlights = Api.get('', {withCredentials: true}); + const flightsHistory = Api.get('', {withCredentials: true}); + const [uData, hData] = await Promise.all([upcomingFlights, flightsHistory]); + + return { + type: 'customer', + upcomingFlights: uData.data, + flightsHistory: hData.data + }; + } catch (error) { + throw error; } }