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

Refactored and cleaned up code

Browse Source
This commit is contained in:
Ben Sherriff
2023-09-13 23:35:22 -04:00
parent 68a442bed2
commit 4673a5ea07
16 changed files with 332 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
weather-ui/package.json
View File

@@ -9,18 +9,16 @@
"lint": "next lint" "lint": "next lint"
}, },
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.4.2", "@ant-design/cssinjs": "^1.17.0",
"@fortawesome/free-regular-svg-icons": "^6.4.2", "antd": "^5.9.0",
"@fortawesome/free-solid-svg-icons": "^6.4.2",
"@fortawesome/react-fontawesome": "^0.2.0",
"axios": "^1.4.0", "axios": "^1.4.0",
"leaflet": "^1.9.4", "leaflet": "^1.9.4",
"next": "^13.4.19", "next": "^13.4.19",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-icons": "^4.11.0",
"react-leaflet": "^4.2.1", "react-leaflet": "^4.2.1",
"recoil": "^0.7.7", "recoil": "^0.7.7"
"xml-js": "^1.6.11"
}, },
"devDependencies": { "devDependencies": {
"@types/leaflet": "^1.9.3", "@types/leaflet": "^1.9.3",

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

@@ -1,31 +1,33 @@
import React from 'react'; import React from 'react';
import RecoilRootWrapper from '@app/recoil-root-wrapper'; import RecoilRootWrapper from '@app/recoil-root-wrapper';
import Sidebar from '@/components/Sidebar';
import '@fortawesome/fontawesome-svg-core/styles.css'; import Topbar from '@/components/Topbar';
// Prevent fontawesome from adding its CSS since we did it manually above:
import { config } from '@fortawesome/fontawesome-svg-core';
config.autoAddCss = false;
import 'styles/globals.css'; import 'styles/globals.css';
import Link from 'next/link';
import 'styles/leaflet.css'; import 'styles/leaflet.css';
import StyledComponentsRegistry from '@/lib/AntdRegistry';
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout({ children }: { children: React.ReactNode }) { export default function RootLayout({ children }: { children: React.ReactNode }) {
return ( return (
<html lang='en'> <html lang='en' className='h-full bg-white'>
<head> <head>
<title>Aviation Weather</title> <title>Aviation Weather</title>
</head> </head>
<body className='bg-gray-600'> <body className={`${inter.className} wrapper h-full`}>
<div className='flex justify-between bg-gray-700 px-4 py-1 sm:px-6 select-none'> <RecoilRootWrapper>
<Link href={'/'}> <StyledComponentsRegistry>
<h3 className='text-lg font-bold leading-6 text-gray-200'>Aviation Weather</h3> <Topbar />
</Link> <Sidebar />
<Link className='text-base text-gray-200' href={'/profile'}> {children}
Profile </StyledComponentsRegistry>
</Link> </RecoilRootWrapper>
</div>
<RecoilRootWrapper>{children}</RecoilRootWrapper>
</body> </body>
</html> </html>
); );

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

@@ -1,12 +1,6 @@
import React from 'react'; import React from 'react';
import Metar from '@/components/Metar'; import Metar from '@/components/Metars';
export default function Page() { export default function Page() {
return ( return <Metar />;
<>
<div>
<Metar />
</div>
</>
);
} }

4
weather-ui/src/app/recoil-root-wrapper.tsx
View File

@@ -4,5 +4,5 @@ import { RecoilRoot } from 'recoil';
import React, { ReactNode } from 'react'; import React, { ReactNode } from 'react';
export default function RecoilRootWrapper({ children }: { children: ReactNode }) { export default function RecoilRootWrapper({ children }: { children: ReactNode }) {
return <RecoilRoot>{children}</RecoilRoot> return <RecoilRoot>{children}</RecoilRoot>;
}; }

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

@@ -1,197 +0,0 @@
'use client';
import { getAirports } from '@/js/api/airport';
import { Airport } from '@/js/api/airport.types';
import { getMetars } from '@/js/api/metar';
import { Metar } from '@/js/api/metar.types';
import { faArrowsSpin, faLocationArrow, faLocationPin } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { DivIcon, LatLngBounds } from 'leaflet';
import Link from 'next/link';
import { useEffect, useState } from 'react';
import ReactDOMServer from 'react-dom/server';
import { MapContainer, Marker, Popup, TileLayer, Tooltip, useMap, useMapEvents } from 'react-leaflet';
export default function Map() {
return (
<MapContainer
center={[38.7209, -77.5133]}
zoom={8}
maxZoom={12}
minZoom={1}
style={{ height: '96.5vh' }}
className='overflow-y-hidden overflow-x-hidden'
attributionControl={false}
>
<MapTiles />
</MapContainer>
);
}
function MapTiles() {
const [airports, setAirports] = useState<Airport[]>([]);
const [zoomLevel, setZoomLevel] = useState(8);
// const [dragging, setDragging] = useState(false);
const map = useMap();
const mapEvents = useMapEvents({
zoomend: async () => {
setZoomLevel(mapEvents.getZoom());
await updateAirports(mapEvents.getBounds());
},
movestart: () => {
// setDragging(true);
},
moveend: async () => {
// setDragging(false);
await updateAirports(mapEvents.getBounds());
}
});
async function updateAirports(bounds: LatLngBounds) {
const ne = bounds.getNorthEast();
const sw = bounds.getSouthWest();
const _airports = await getAirports({
bounds: {
northEast: { lat: ne.lat, lon: ne.lng },
southWest: { lat: sw.lat, lon: sw.lng }
},
limit: 100,
page: 1
});
const metars = await getMetars(_airports);
metars.forEach((metar) => {
_airports.forEach((airport) => {
if (metar.station_id == airport.icao) {
airport.metar = metar;
}
});
});
setAirports(_airports);
}
function metarBGColor(metar: Metar | undefined) {
if (metar?.flight_category == 'VFR') {
return 'bg-emerald-600';
} else if (metar?.flight_category == 'MVFR') {
return 'bg-blue-600';
} else if (metar?.flight_category == 'IFR') {
return 'bg-red-600';
} else if (metar?.flight_category == 'LIFR') {
return 'bg-purple-600';
} else {
return 'bg-black';
}
}
function metarTextColor(metar: Metar | undefined) {
if (metar?.flight_category == 'VFR') {
return 'text-emerald-700';
} else if (metar?.flight_category == 'MVFR') {
return 'text-blue-700';
} else if (metar?.flight_category == 'IFR') {
return 'text-red-700';
} else if (metar?.flight_category == 'LIFR') {
return 'text-purple-700';
} else {
return 'text-black/50';
}
}
function windColor(metar: Metar | undefined) {
if (Number(metar?.wind_speed_kt) <= 9) {
return 'bg-green-300';
} else if (Number(metar?.wind_speed_kt) > 9) {
return 'bg-orange-300';
} else if (Number(metar?.wind_speed_kt) > 12) {
return 'bg-red-300';
}
}
function iconSize() {
if (zoomLevel <= 4) {
return 'text-xs';
} else if (zoomLevel <= 5) {
return 'text-sm';
} else if (zoomLevel <= 6) {
return 'text-base';
} else if (zoomLevel <= 7) {
return 'text-lg';
} else if (zoomLevel <= 9) {
return 'text-2xl';
} else if (zoomLevel <= 11) {
return 'text-3xl';
} else if (zoomLevel >= 12) {
return 'text-4xl';
}
}
function icon(airport: Airport) {
return new DivIcon({
html: ReactDOMServer.renderToString(
<FontAwesomeIcon icon={faLocationPin} className={`${iconSize()} ${metarTextColor(airport.metar)}`} />
),
className: 'metar-marker-icon'
});
}
useEffect(() => {
updateAirports(map.getBounds());
}, []);
return (
<>
<TileLayer
attribution='&copy; <a href="https://www.osm.org/copyright">OpenStreetMap</a> contributors'
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
/>
{airports.map((airport) => (
<Marker key={airport.icao} position={[airport.point.y, airport.point.x]} icon={icon(airport)}>
<Tooltip className='metar-tooltip' direction='top' offset={[5, -5]} opacity={1}>
<b>{airport.icao}</b> - {airport.full_name}
</Tooltip>
<Popup>
<div className='min-w-0 flex-1 select-none'>
<Link href={`/airport/${airport.icao}`}>
<h1 className='text-base text-gray-900 pb-1'>
<span className='font-semibold'>{airport.icao}</span> {airport.full_name}
</h1>
</Link>
<hr />
<p className='text-sm font-medium text-gray-500'>{airport.metar?.raw_text}</p>
<div className='mt-2 flex'>
<span
className={`flex inline-block text-sm text-white ${metarBGColor(
airport.metar
)} py-2 px-4 rounded-full`}
>
{airport.metar?.flight_category ? airport.metar?.flight_category : 'UNKN'}
</span>
<div className='flex inline-block px-2'>
<span className={`text-sm text-black ${windColor(airport.metar)} py-2 px-2 rounded-full`}>
{airport.metar && airport.metar.wind_dir_degrees && Number(airport.metar.wind_dir_degrees) > 0 ? (
<FontAwesomeIcon
className='pr-1'
icon={faLocationArrow}
style={{ rotate: `${-45 + 180 + Number(airport.metar.wind_dir_degrees)}deg` }}
/>
) : (
<></>
)}
{airport.metar && airport.metar.wind_dir_degrees && airport.metar.wind_dir_degrees == 'VRB' ? (
<FontAwesomeIcon className='pr-1' icon={faArrowsSpin} />
) : (
<></>
)}
{airport.metar?.wind_speed_kt != undefined && airport.metar?.wind_speed_kt > 0
? `${airport.metar?.wind_speed_kt} KT`
: 'CALM'}
</span>
</div>
</div>
</div>
</Popup>
</Marker>
))}
</>
);
}

133
weather-ui/src/components/Metars/MapTiles.tsx Normal file
View File

@@ -0,0 +1,133 @@
'use client';
import { getAirports } from '@/js/api/airport';
import { Airport } from '@/js/api/airport.types';
import { getMetars } from '@/js/api/metar';
import { Metar } from '@/js/api/metar.types';
import { FaLocationPin } from 'react-icons/fa6';
import { DivIcon, LatLngBounds } from 'leaflet';
import { useEffect, useState } from 'react';
import ReactDOMServer from 'react-dom/server';
import { Marker, TileLayer, Tooltip, useMap, useMapEvents } from 'react-leaflet';
import MetarDialog from './MetarDialog';
export default function MapTiles() {
const [isOpen, setIsOpen] = useState(false);
const [airports, setAirports] = useState<Airport[]>([]);
const [selectedAirport, setSelectedAirport] = useState<Airport | undefined>();
const [zoomLevel, setZoomLevel] = useState(8);
// const [dragging, setDragging] = useState(false);
const map = useMap();
const mapEvents = useMapEvents({
zoomend: async () => {
setZoomLevel(mapEvents.getZoom());
await updateAirports(mapEvents.getBounds());
},
movestart: () => {
// setDragging(true);
},
moveend: async () => {
// setDragging(false);
await updateAirports(mapEvents.getBounds());
}
});
function handleOpen(airport: Airport) {
setSelectedAirport(airport);
setIsOpen(true);
}
async function updateAirports(bounds: LatLngBounds) {
const ne = bounds.getNorthEast();
const sw = bounds.getSouthWest();
const _airports = await getAirports({
bounds: {
northEast: { lat: ne.lat, lon: ne.lng },
southWest: { lat: sw.lat, lon: sw.lng }
},
limit: 100,
page: 1
});
const metars = await getMetars(_airports);
metars.forEach((metar) => {
_airports.forEach((airport) => {
if (metar.station_id == airport.icao) {
airport.metar = metar;
}
});
});
setAirports(_airports);
}
function metarTextColor(metar: Metar | undefined) {
if (metar?.flight_category == 'VFR') {
return 'text-emerald-700';
} else if (metar?.flight_category == 'MVFR') {
return 'text-blue-700';
} else if (metar?.flight_category == 'IFR') {
return 'text-red-700';
} else if (metar?.flight_category == 'LIFR') {
return 'text-purple-700';
} else {
return 'text-black/50';
}
}
function iconSize() {
if (zoomLevel <= 4) {
return 'text-xs';
} else if (zoomLevel <= 5) {
return 'text-sm';
} else if (zoomLevel <= 6) {
return 'text-base';
} else if (zoomLevel <= 7) {
return 'text-lg';
} else if (zoomLevel <= 9) {
return 'text-2xl';
} else if (zoomLevel <= 11) {
return 'text-3xl';
} else if (zoomLevel >= 12) {
return 'text-4xl';
}
}
function icon(airport: Airport) {
return new DivIcon({
html: ReactDOMServer.renderToString(
<FaLocationPin className={`${iconSize()} ${metarTextColor(airport.metar)}`} />
),
className: 'metar-marker-icon'
});
}
useEffect(() => {
updateAirports(map.getBounds());
}, []);
return (
<>
{selectedAirport && <MetarDialog isOpen={isOpen} onClose={() => setIsOpen(false)} airport={selectedAirport} />}
<TileLayer
attribution='&copy; <a href="https://www.osm.org/copyright">OpenStreetMap</a> contributors'
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
/>
{airports.map((airport) => (
<Marker
key={airport.icao}
position={[airport.point.y, airport.point.x]}
icon={icon(airport)}
eventHandlers={{
click: () => handleOpen(airport)
}}
>
{!isOpen && (
<Tooltip className='metar-tooltip' direction='top' offset={[5, -5]} opacity={1}>
<b>{airport.icao}</b> - {airport.full_name}
</Tooltip>
)}
</Marker>
))}
</>
);
}

71
weather-ui/src/components/Metars/MetarDialog.tsx Normal file
View File

@@ -0,0 +1,71 @@
import { Airport } from '@/js/api/airport.types';
import { Metar } from '@/js/api/metar.types';
import { FaArrowsSpin, FaLocationArrow } from 'react-icons/fa6';
import { Modal } from 'antd';
interface MetarDialogProps {
airport: Airport;
isOpen: boolean;
onClose(): void;
}
export default function MetarDialog({ airport, isOpen, onClose }: MetarDialogProps) {
function metarBGColor(metar: Metar | undefined) {
if (metar?.flight_category == 'VFR') {
return 'bg-emerald-600';
} else if (metar?.flight_category == 'MVFR') {
return 'bg-blue-600';
} else if (metar?.flight_category == 'IFR') {
return 'bg-red-600';
} else if (metar?.flight_category == 'LIFR') {
return 'bg-purple-600';
} else {
return 'bg-black';
}
}
function windColor(metar: Metar | undefined) {
if (Number(metar?.wind_speed_kt) <= 9) {
return 'bg-green-300';
} else if (Number(metar?.wind_speed_kt) > 9) {
return 'bg-orange-300';
} else if (Number(metar?.wind_speed_kt) > 12) {
return 'bg-red-300';
}
}
return (
<Modal title={`${airport.icao} ${airport.full_name}`} open={isOpen} onCancel={onClose} footer={[]}>
<div className='min-w-0 flex-1 select-none'>
<hr />
<p className='text-sm font-medium text-gray-500'>{airport.metar?.raw_text}</p>
<div className='mt-2 flex'>
<span
className={`flex inline-block text-sm text-white ${metarBGColor(airport.metar)} py-2 px-4 rounded-full`}
>
{airport.metar?.flight_category ? airport.metar?.flight_category : 'UNKN'}
</span>
<div className='flex inline-block px-2'>
<span className={`text-sm text-black ${windColor(airport.metar)} py-2 px-2 rounded-full`}>
{airport.metar && airport.metar.wind_dir_degrees && Number(airport.metar.wind_dir_degrees) > 0 ? (
<FaLocationArrow
className='pr-1'
style={{ rotate: `${-45 + 180 + Number(airport.metar.wind_dir_degrees)}deg` }}
/>
) : (
<></>
)}
{airport.metar && airport.metar.wind_dir_degrees && airport.metar.wind_dir_degrees == 'VRB' ? (
<FaArrowsSpin className='pr-1' />
) : (
<></>
)}
{airport.metar?.wind_speed_kt != undefined && airport.metar?.wind_speed_kt > 0
? `${airport.metar?.wind_speed_kt} KT`
: 'CALM'}
</span>
</div>
</div>
</div>
</Modal>
);
}

23
weather-ui/src/components/Metars/MetarMap.tsx Normal file
View File

@@ -0,0 +1,23 @@
'use client';
import { MapContainer } from 'react-leaflet';
import MapTiles from './MapTiles';
export default function Map({ className = '' }: { className?: string }) {
return (
<>
<MapContainer
center={[38.7209, -77.5133]}
zoom={8}
maxZoom={12}
minZoom={1}
id='map-container'
style={{ height: '94.5vh' }}
className={`${className} overflow-y-hidden overflow-x-hidden`}
attributionControl={false}
>
<MapTiles />
</MapContainer>
</>
);
}

7
weather-ui/src/components/Metar.tsx → weather-ui/src/components/Metars/index.tsx
View File

@@ -1,8 +1,8 @@
import { Metar } from '@/js/api/metar.types'; import { Metar } from '@/js/api/metar.types';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
export default async function Metar() { export default async function Metar({ className = '' }: { className?: string }) {
const Map = dynamic(() => import('@/components/MetarMap'), { const Map = dynamic(() => import('@/components/Metars/MetarMap'), {
loading: () => ( loading: () => (
<div className='grid min-h-full place-items-center px-6 py-24 sm:py-32 lg:px-8'> <div className='grid min-h-full place-items-center px-6 py-24 sm:py-32 lg:px-8'>
<div className='text-center'> <div className='text-center'>
@@ -12,6 +12,5 @@ export default async function Metar() {
), ),
ssr: false ssr: false
}); });
return <Map className={className} />;
return <Map />;
} }

11
weather-ui/src/components/Sidebar/Sidebar.css Normal file
View File

@@ -0,0 +1,11 @@
.sidebar {
width: 62px;
height: 100%;
display: flex;
flex-direction: column;
.option-group {
display: flex;
flex-direction: column;
}
}

5
weather-ui/src/components/Sidebar/index.tsx Normal file
View File

@@ -0,0 +1,5 @@
import './Sidebar.css';
export default function Sidebar() {
return <div className=''></div>;
}

27
weather-ui/src/components/Topbar/index.tsx Normal file
View File

@@ -0,0 +1,27 @@
'use client';
import { Avatar } from 'antd';
import Search from 'antd/es/input/Search';
import { useRouter } from 'next/navigation';
import { AiOutlineUser } from 'react-icons/ai';
export default function Topbar() {
const router = useRouter();
function onSearch(value: string) {
router.push(`/airports/${value}`);
}
return (
<nav className='w-screen flex bg-gray-700 text-gray-200'>
<Search
placeholder='Search Airports...'
onSearch={onSearch}
enterButton
className='p-2'
style={{ width: '20em' }}
/>
<Avatar shape='square' size={48} icon={<AiOutlineUser />} />
</nav>
);
}

14
weather-ui/src/lib/AntdRegistry.tsx Normal file
View File

@@ -0,0 +1,14 @@
'use client';
import React from 'react';
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
import type Entity from '@ant-design/cssinjs/es/Cache';
import { useServerInsertedHTML } from 'next/navigation';
const StyledComponentsRegistry = ({ children }: { children: React.ReactNode }) => {
const cache = React.useMemo<Entity>(() => createCache(), [createCache]);
useServerInsertedHTML(() => <style id='antd' dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }} />);
return <StyleProvider cache={cache}>{children}</StyleProvider>;
};
export default StyledComponentsRegistry;

116
weather-ui/styles/Home.module.css
View File

@@ -1,116 +0,0 @@
.container {
padding: 0 2rem;
}
.main {
min-height: 100vh;
padding: 4rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.footer {
display: flex;
flex: 1;
padding: 2rem 0;
border-top: 1px solid #eaeaea;
justify-content: center;
align-items: center;
}
.footer a {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
}
.title a {
color: #0070f3;
text-decoration: none;
}
.title a:hover,
.title a:focus,
.title a:active {
text-decoration: underline;
}
.title {
margin: 0;
line-height: 1.15;
font-size: 4rem;
}
.title,
.description {
text-align: center;
}
.description {
margin: 4rem 0;
line-height: 1.5;
font-size: 1.5rem;
}
.code {
background: #fafafa;
border-radius: 5px;
padding: 0.75rem;
font-size: 1.1rem;
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace;
}
.grid {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
max-width: 800px;
}
.card {
margin: 1rem;
padding: 1.5rem;
text-align: left;
color: inherit;
text-decoration: none;
border: 1px solid #eaeaea;
border-radius: 10px;
transition: color 0.15s ease, border-color 0.15s ease;
max-width: 300px;
}
.card:hover,
.card:focus,
.card:active {
color: #0070f3;
border-color: #0070f3;
}
.card h2 {
margin: 0 0 1rem 0;
font-size: 1.5rem;
}
.card p {
margin: 0;
font-size: 1.25rem;
line-height: 1.5;
}
.logo {
height: 1em;
margin-left: 0.5rem;
}
@media (max-width: 600px) {
.grid {
width: 100%;
flex-direction: column;
}
}

14
weather-ui/styles/globals.css
View File

@@ -33,4 +33,16 @@ a {
user-select: none; user-select: none;
pointer-events: none; pointer-events: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.4); box-shadow: 0 1px 3px rgba(0,0,0,0.4);
} }
.content {
display: flex;
flex-direction: row;
flex: 1;
overflow: hidden;
}
.wrapper > nav {
flex: 0 0 56px;
overflow: hidden;
}

5
weather-ui/tailwind.config.js
View File

@@ -4,5 +4,8 @@ module.exports = {
theme: { theme: {
extend: {} extend: {}
}, },
plugins: [] plugins: [],
corePlugins: {
preflight: false
}
}; };