64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import { getAirport } from '@/api/airport';
|
|
import { Airport } from '@/api/airport.types';
|
|
import { getMetars } from '@/api/metar';
|
|
import { Metar } from '@/api/metar.types';
|
|
import { Grid, Title, Text } from '@mantine/core';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
export default function Page({ params }: { params: { icao: string } }) {
|
|
const [airport, setAirport] = useState<Airport | undefined>(undefined);
|
|
const [metar, setMetar] = useState<Metar | undefined>(undefined);
|
|
|
|
useEffect(() => {
|
|
async function loadAirport() {
|
|
const airportData = await getAirport({ icao: params.icao });
|
|
setAirport(airportData);
|
|
const metarData = await getMetars([airportData.icao]);
|
|
if (metarData.length > 0) {
|
|
setMetar(metarData[0]);
|
|
}
|
|
}
|
|
loadAirport();
|
|
}, []);
|
|
|
|
if (airport) {
|
|
return (
|
|
<Grid gutter={80} style={{ margin: '0 0.5em'}}>
|
|
<Grid.Col span={12}>
|
|
<Title className='title' order={1}>{airport.icao} - {airport.name}</Title>
|
|
<Text c="dimmed">
|
|
{airport.municipality} | {airport.iso_region} | {airport.iso_country}
|
|
</Text>
|
|
{metar && (
|
|
<Text c="dimmed">
|
|
{metar.raw_text}
|
|
</Text>
|
|
)}
|
|
<h3>Frequencies</h3>
|
|
{airport.frequencies.map((frequency) => (
|
|
<div key={frequency.frequency_mhz}>
|
|
<ul>
|
|
<li>{frequency.id}: {frequency.frequency_mhz} MHz</li>
|
|
</ul>
|
|
</div>
|
|
))}
|
|
<h3>Runway Information</h3>
|
|
{airport.runways.map((runway) => (
|
|
<div key={runway.id}>
|
|
<b>Runway {runway.id}</b>
|
|
<ul>
|
|
<li>Dimensions: {runway.length_ft} x {runway.width_ft} ft.</li>
|
|
<li>Surface: {runway.surface}</li>
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</Grid.Col>
|
|
</Grid>
|
|
);
|
|
} else {
|
|
return <></>;
|
|
}
|
|
}
|