diff --git a/apps/react/src/app/features/online-board/pages/index.ts b/apps/react/src/app/features/online-board/pages/index.ts index 091f187fa..ac6d77e88 100644 --- a/apps/react/src/app/features/online-board/pages/index.ts +++ b/apps/react/src/app/features/online-board/pages/index.ts @@ -1 +1,2 @@ export { OnlineBoardStartPage } from './online-board-start-page' +export { OnlineBoardSearchPage } from './online-board-search-page' diff --git a/apps/react/src/app/features/online-board/pages/online-board-search-page.scss b/apps/react/src/app/features/online-board/pages/online-board-search-page.scss new file mode 100644 index 000000000..3c761b549 --- /dev/null +++ b/apps/react/src/app/features/online-board/pages/online-board-search-page.scss @@ -0,0 +1,9 @@ +.online-board-search-page { + width: 100%; +} + +.online-board-search-page__content { + display: flex; + flex-direction: column; + gap: 16px; +} diff --git a/apps/react/src/app/features/online-board/pages/online-board-search-page.tsx b/apps/react/src/app/features/online-board/pages/online-board-search-page.tsx new file mode 100644 index 000000000..02740cbf6 --- /dev/null +++ b/apps/react/src/app/features/online-board/pages/online-board-search-page.tsx @@ -0,0 +1,120 @@ +import React, { useState, useEffect } from 'react' +import { useParams } from 'react-router-dom' +import axios from 'axios' +import { PageLayout } from '@app/components/page-layout' +import { PageTabs } from '@app/components/page-tabs' +import { PageLoader } from '@app/components/page-loader' +import { PageEmptyList } from '@app/components/page-empty-list' +import { DayTabs } from '@app/components/day-tabs' +import { OnlineBoardFilter } from '../components/online-board-filter' +import './online-board-search-page.scss' + +interface Flight { + id: string + flightNumber: string + status: string + departure: any + arrival: any + aircraft?: string + operator?: string +} + +export const OnlineBoardSearchPage: React.FC = () => { + const { params: encodedParams } = useParams<{ params: string }>() + const [selectedDate, setSelectedDate] = useState(new Date()) + const [flights, setFlights] = useState([]) + const [loading, setLoading] = useState(false) + const [error, setError] = useState(null) + const [searchParams, setSearchParams] = useState(null) + + useEffect(() => { + if (!encodedParams) return + + try { + const decoded = JSON.parse(atob(encodedParams)) + setSearchParams(decoded) + } catch (err) { + console.error('Failed to decode params:', err) + setError('Invalid search parameters') + } + }, [encodedParams]) + + useEffect(() => { + if (!searchParams) return + + const fetchFlights = async () => { + try { + setLoading(true) + setError(null) + + // Build API request based on search type + let endpoint = '/api/flights' + const queryParams: Record = { + date: selectedDate.toISOString().split('T')[0], + } + + if (searchParams.flightNumber) { + queryParams.flightNumber = searchParams.flightNumber + } + if (searchParams.departure) { + queryParams.departure = searchParams.departure + } + if (searchParams.arrival) { + queryParams.arrival = searchParams.arrival + } + if (searchParams.startTime) { + queryParams.startTime = searchParams.startTime + } + if (searchParams.endTime) { + queryParams.endTime = searchParams.endTime + } + + const response = await axios.get(endpoint, { params: queryParams }) + setFlights(response.data?.flights || []) + } catch (err) { + console.error('Flight search failed:', err) + setError('Failed to load flights') + setFlights([]) + } finally { + setLoading(false) + } + } + + fetchFlights() + }, [searchParams, selectedDate]) + + if (error) { + return ( +
+ + +
+ ) + } + + return ( +
+ + + + + } + stickyContent={ + + } + > +
+ {flights.length === 0 && !loading ? ( + + ) : ( +
Flights: {flights.length}
+ )} +
+
+
+ ) +}