bsherriff/aviation
1
1
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Implemented default airports, fixed loading airport endpoints

Browse Source
This commit is contained in:
Ben Sherriff
2023-09-09 21:54:44 -04:00
parent 17b76ade1f
commit c9699c16c3
19 changed files with 1138496 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
weather-ui/src/app/airport/[icao]/page.tsx
View File

@@ -1,13 +1,15 @@
import { getAirport } from "@/js/state";
import Link from "next/link";
import { getAirport } from '@/js/api/airport';
import { Airport } from '@/js/api/airport.types';
import Link from 'next/link';
export default function Page({ params }: { params: { icao: string } }) {
const airport = getAirport(params.icao);
return <>
<div className="border-b border-gray-200 bg-gray-400 px-4 py-5 sm:px-6 flex justify-between">
<h3 className="text-base font-semibold leading-6 text-gray-900">{airport?.name}</h3>
<Link href={"/"}>Back</Link>
</div>
</>;
}
export default async function Page({ params }: { params: { icao: string } }) {
const airport: Airport = await getAirport({ icao: params.icao });
return (
<>
<div className='border-b border-gray-200 bg-gray-400 px-4 py-5 sm:px-6 flex justify-between'>
<h3 className='text-base font-semibold leading-6 text-gray-900'>{airport?.name}</h3>
<Link href={'/'}>Back</Link>
</div>
</>
);
}

34
weather-ui/src/app/layout.tsx
View File

@@ -1,7 +1,6 @@
import React from 'react';
import RecoilRootWrapper from '@app/recoil-root-wrapper';
import '@fortawesome/fontawesome-svg-core/styles.css';
// Prevent fontawesome from adding its CSS since we did it manually above:
import { config } from '@fortawesome/fontawesome-svg-core';
@@ -9,20 +8,23 @@ config.autoAddCss = false;
import 'styles/globals.css';
import Link from 'next/link';
import 'styles/leaflet.css';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
<head>
<title>Aviation Weather</title>
</head>
<body className='bg-gray-600'>
<div className="flex justify-between bg-gray-700 px-4 py-1 sm:px-6 select-none">
<h3 className="text-lg font-bold leading-6 text-gray-200">Aviation Weather</h3>
<Link className='text-base text-gray-200' href={'/profile'}>Profile</Link>
</div>
<RecoilRootWrapper>{children}</RecoilRootWrapper>
</body>
</html>
);
return (
<html lang='en'>
<head>
<title>Aviation Weather</title>
</head>
<body className='bg-gray-600'>
<div className='flex justify-between bg-gray-700 px-4 py-1 sm:px-6 select-none'>
<h3 className='text-lg font-bold leading-6 text-gray-200'>Aviation Weather</h3>
<Link className='text-base text-gray-200' href={'/profile'}>
Profile
</Link>
</div>
<RecoilRootWrapper>{children}</RecoilRootWrapper>
</body>
</html>
);
}

28
weather-ui/src/app/page.tsx
View File

@@ -1,28 +1,12 @@
import React from 'react';
import { setAirport } from "@/js/state";
import { Airport } from "@/js/airport";
import Metar from '@/components/Metar';
// setAirport('KJYO', new Airport('Leesburg Executive Airport', 'KJYO'))
// setAirport('KHEF', new Airport('Manassas Regional Airpoirt', 'KHEF', 38.724, -77517))
// setAirport('KIAD', new Airport('Dulles International Airport', 'KIAD'))
// setAirport('KFDK', new Airport('Frederick Municipal Airport', 'KFDK'))
// setAirport('KMRB', new Airport('Eastern West Virginia Regional Airport', 'KMRB'))
// setAirport('KOKV', new Airport('Winchester Regional Airport', 'KOKV'))
// setAirport('KFRR', new Airport('Front Royal-Warren County Airport', 'KFRR'))
// setAirport('KLUA', new Airport('Luray Caverns Airport', 'KLUA'))
// setAirport('KSHD', new Airport('Shenandoah Valley Airport', 'KSHD'))
// setAirport('KCHO', new Airport('Charlottesville-Albemarle Airport', 'KCHO'))
// setAirport('KCJR', new Airport('Culpeper Regional Airport', 'KCJR'))
// setAirport('KHWY', new Airport('Warrenton-Fauquier Airport', 'KHWY'))
// setAirport('KRMN', new Airport('Stafford Regional Airport', 'KRMN'))
// setAirport('KEZF', new Airport('Shannon Airport', 'KEZF'))
// setAirport('KDCA', new Airport('Ronald Reagan Washington National Airport', 'KDCA'))
export default function Page() {
return <>
<div>
<Metar/>
</div>
return (
<>
<div>
<Metar />
</div>
</>
);
}

2
weather-ui/src/components/Metar.tsx
View File

@@ -19,7 +19,7 @@ export default async function Metar() {
let airports: Airport[] = [];
async function update() {
airports = await getAirports();
airports = await getAirports({ limit: 10, page: 1 });
const metars = await getMetars(airports);
for (let i = 0; i < metars.length; i++) {
airports[i].metar = metars[i];

7
weather-ui/src/components/MetarMap.tsx
View File

@@ -10,7 +10,7 @@ import ReactDOMServer from 'react-dom/server';
import { MapContainer, Marker, Popup, TileLayer, Tooltip, useMapEvents } from 'react-leaflet';
export default function Map({ airportString }: { airportString: string }) {
const [airports, setAirports] = useState<Airport[]>(JSON.parse(airportString));
const [airports] = useState<Airport[]>(JSON.parse(airportString));
return (
<MapContainer
@@ -35,6 +35,9 @@ function MapTiles({ airports }: { airports: Airport[] }) {
const mapEvents = useMapEvents({
zoomend: () => {
setZoomLevel(mapEvents.getZoom());
},
moveend: () => {
console.log(mapEvents.getBounds());
}
// mouseup: () => {
// setCenter([mapEvents.getCenter().lat, mapEvents.getCenter().lng]);
@@ -114,7 +117,7 @@ function MapTiles({ airports }: { airports: Airport[] }) {
/>
{airports.map((airport) => (
<>
<Marker position={[airport.latitude, airport.longitude]} icon={icon(airport)}>
<Marker key={airport.icao} position={[airport.latitude, airport.longitude]} icon={icon(airport)}>
<Tooltip className='metar-tooltip' direction='top' offset={[5, -5]} opacity={1}>
{airport.icao}
</Tooltip>

20
weather-ui/src/js/api/airport.ts
View File

@@ -1,7 +1,23 @@
import axios from 'axios';
import { Airport } from './airport.types';
export async function getAirports(): Promise<Airport[]> {
const response = await axios.get(`http://localhost:5000/airports`).catch((error) => console.error(error));
interface GetAirportsProps {
page: number;
limit: number;
}
interface GetAirportProps {
icao: string;
}
export async function getAirport({ icao }: GetAirportProps) {
const response = await axios.get(`http://localhost:5000/airports/${icao}`).catch((error) => console.error(error));
return response?.data;
}
export async function getAirports({ limit = 10, page = 1 }: GetAirportsProps): Promise<Airport[]> {
const response = await axios
.get(`http://localhost:5000/airports`, { params: { page: page, limit: limit } })
.catch((error) => console.error(error));
return response?.data;
}