Renamed directories
This commit is contained in:
159
ui/src/components/Metars/MapTiles.tsx
Normal file
159
ui/src/components/Metars/MapTiles.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
'use client';
|
||||
|
||||
import { getAirports } from '@/api/airport';
|
||||
import { Airport } from '@/api/airport.types';
|
||||
import { getMetars } from '@/api/metar';
|
||||
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 MetarModal from './MetarModal';
|
||||
import { BsCircle, BsCircleFill } from 'react-icons/bs';
|
||||
|
||||
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 { data: _airports } = await getAirports({
|
||||
bounds: {
|
||||
northEast: { lat: ne.lat, lon: ne.lng },
|
||||
southWest: { lat: sw.lat, lon: sw.lng }
|
||||
},
|
||||
limit: 100,
|
||||
page: 1
|
||||
});
|
||||
const { data: metars } = await getMetars(_airports);
|
||||
metars.forEach((metar) => {
|
||||
_airports.forEach((airport) => {
|
||||
if (metar.station_id == airport.icao) {
|
||||
airport.metar = metar;
|
||||
}
|
||||
});
|
||||
});
|
||||
setAirports(_airports);
|
||||
}
|
||||
|
||||
function iconSize() {
|
||||
console.log('zoom', zoomLevel);
|
||||
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 metarIcon(airport: Airport) {
|
||||
if (airport.metar?.flight_category == 'VFR') {
|
||||
return new DivIcon({
|
||||
html: ReactDOMServer.renderToString(
|
||||
<div>
|
||||
<BsCircle className={`${iconSize()} rounded-full bg-emerald-700`} />
|
||||
<span className={`${iconSize()} text-white`}>V</span>
|
||||
</div>
|
||||
),
|
||||
className: 'metar-marker-icon'
|
||||
});
|
||||
} else if (airport.metar?.flight_category == 'MVFR') {
|
||||
return new DivIcon({
|
||||
html: ReactDOMServer.renderToString(
|
||||
<div>
|
||||
<BsCircle className={`${iconSize()} rounded-full bg-blue-700`} />
|
||||
<span className={`${iconSize()} text-white`}>M</span>
|
||||
</div>
|
||||
),
|
||||
className: 'metar-marker-icon'
|
||||
});
|
||||
} else if (airport.metar?.flight_category == 'IFR') {
|
||||
return new DivIcon({
|
||||
html: ReactDOMServer.renderToString(
|
||||
<div>
|
||||
<BsCircle className={`${iconSize()} rounded-full bg-red-700`} />
|
||||
<span className={`${iconSize()} text-white`}>I</span>
|
||||
</div>
|
||||
),
|
||||
className: 'metar-marker-icon'
|
||||
});
|
||||
} else if (airport.metar?.flight_category == 'LIFR') {
|
||||
return new DivIcon({
|
||||
html: ReactDOMServer.renderToString(
|
||||
<div>
|
||||
<BsCircle className={`${iconSize()} rounded-full bg-purple-700`} />
|
||||
<span className={`${iconSize()} text-white`}>L</span>
|
||||
</div>
|
||||
),
|
||||
className: 'metar-marker-icon'
|
||||
});
|
||||
} else {
|
||||
return new DivIcon({
|
||||
html: ReactDOMServer.renderToString(<BsCircleFill className={`text-black`} />),
|
||||
className: 'metar-marker-icon'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
updateAirports(map.getBounds());
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
{selectedAirport && <MetarModal isOpen={isOpen} onClose={() => setIsOpen(false)} airport={selectedAirport} />}
|
||||
<TileLayer
|
||||
attribution='© <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={metarIcon(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>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
23
ui/src/components/Metars/MetarMap.tsx
Normal file
23
ui/src/components/Metars/MetarMap.tsx
Normal 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={14} // Zoomed in
|
||||
minZoom={3} // Zoomed out
|
||||
id='map-container'
|
||||
style={{ height: '94.5vh' }}
|
||||
className={`${className} overflow-y-hidden overflow-x-hidden`}
|
||||
attributionControl={false}
|
||||
>
|
||||
<MapTiles />
|
||||
</MapContainer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
216
ui/src/components/Metars/MetarModal.tsx
Normal file
216
ui/src/components/Metars/MetarModal.tsx
Normal file
@@ -0,0 +1,216 @@
|
||||
'use client';
|
||||
|
||||
import { Airport } from '@/api/airport.types';
|
||||
import { Metar } from '@/api/metar.types';
|
||||
import { FaArrowsSpin, FaLocationArrow } from 'react-icons/fa6';
|
||||
import Link from 'next/link';
|
||||
import { AiFillStar, AiOutlineStar } from 'react-icons/ai';
|
||||
import { BsFillCloudRainFill, BsFillCloudRainHeavyFill, BsFillCloudSleetFill, BsFillCloudSnowFill, BsQuestionLg } from 'react-icons/bs';
|
||||
import { useState } from 'react';
|
||||
import { Grid, Modal, Tooltip } from '@mantine/core';
|
||||
|
||||
interface MetarModalProps {
|
||||
airport: Airport;
|
||||
isOpen: boolean;
|
||||
onClose(): void;
|
||||
}
|
||||
|
||||
export default function MetarModal({ airport, isOpen, onClose }: MetarModalProps) {
|
||||
const [isFavorite, setIsFavorite] = useState(false);
|
||||
|
||||
function handleFavorite(value: boolean) {
|
||||
setIsFavorite(value);
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={
|
||||
<span className='flex justify-between'>
|
||||
<Link href={`/airport/${airport.icao}`}>
|
||||
{airport.icao} {airport.full_name}
|
||||
</Link>
|
||||
{isFavorite ? (
|
||||
<AiFillStar
|
||||
size={24}
|
||||
className='cursor-pointer text-blue-500 hover:text-blue-400'
|
||||
onClick={() => handleFavorite(false)}
|
||||
/>
|
||||
) : (
|
||||
<AiOutlineStar
|
||||
size={24}
|
||||
className='cursor-pointer text-blue-500 hover:text-blue-400'
|
||||
onClick={() => handleFavorite(true)}
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
}
|
||||
opened={isOpen}
|
||||
onClose={onClose}
|
||||
className='select-none'
|
||||
>
|
||||
<div className='min-w-0 flex-1'>
|
||||
<hr />
|
||||
{airport.metar && <MetarInfo metar={airport.metar} />}
|
||||
{/* <p className='text-sm font-medium text-gray-500'>{airport.metar?.raw_text}</p>
|
||||
<div className='mt-2 flex'>
|
||||
<span
|
||||
className={`flex inline-block align-middle text-sm text-white py-2 px-4 rounded-full
|
||||
${metarBGColor(airport.metar)}
|
||||
`}
|
||||
>
|
||||
{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-3 rounded-full`}>
|
||||
{airport.metar && airport.metar.wind_dir_degrees && Number(airport.metar.wind_dir_degrees) > 0 ? (
|
||||
<FaLocationArrow
|
||||
className='align-middle'
|
||||
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='align-middle pr-1.5' />
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
<span className='align-middle'>
|
||||
{airport.metar?.wind_speed_kt != undefined && airport.metar?.wind_speed_kt > 0
|
||||
? `${airport.metar?.wind_speed_kt} KT`
|
||||
: `CALM`}
|
||||
</span>
|
||||
</span>
|
||||
{airport.metar?.wx_string?.split(' ').map((wx) => <MetarIcon wx={wx} />)}
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
function MetarInfo({ metar }: { metar: Metar }) {
|
||||
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 (metar) {
|
||||
if (Number(metar.wind_speed_kt) <= 9) {
|
||||
return 'bg-green-300';
|
||||
} else if (Number(metar.wind_speed_kt) <= 12) {
|
||||
return 'bg-orange-300';
|
||||
} else {
|
||||
return 'bg-red-300';
|
||||
}
|
||||
} else {
|
||||
return 'gb-gray-100';
|
||||
}
|
||||
}
|
||||
|
||||
function metarIcon(weatherPhenomena: string) {
|
||||
if (weatherPhenomena == 'RA') {
|
||||
return <></>;
|
||||
} else {
|
||||
return <></>;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p className='text-xs font-small text-gray-500'>{metar.raw_text}</p>
|
||||
<Grid gutter={18}>
|
||||
<Grid.Col className='gutter-row' span={6}>
|
||||
<span
|
||||
className={`text-sm text-white py-2 px-4 rounded-full
|
||||
${metarBGColor(metar)}
|
||||
`}
|
||||
>
|
||||
{metar.flight_category ? metar.flight_category : 'UNKN'}
|
||||
</span>
|
||||
</Grid.Col>
|
||||
<Grid.Col className='gutter-row' span={12}>
|
||||
{metar.wx_string && metar.wx_string.split(' ').map((wx) => <MetarIcon wx={wx} />)}
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MetarIcon({ wx }: { wx: string }) {
|
||||
// let color = 'bg-gray-400';
|
||||
let title = '';
|
||||
let icon = undefined;
|
||||
if (wx.includes('DZ')) {
|
||||
title = 'Drizzle';
|
||||
icon = <BsFillCloudRainFill />;
|
||||
} else if (wx.includes('RA')) {
|
||||
title = 'Rain';
|
||||
icon = <BsFillCloudRainHeavyFill />;
|
||||
} else if (wx.includes('SN')) {
|
||||
title = 'Snow';
|
||||
icon = <BsFillCloudSnowFill />;
|
||||
} else if (wx.includes('SG')) {
|
||||
title = 'Snow Grains';
|
||||
icon = <BsFillCloudSnowFill />;
|
||||
} else if (wx.includes('IC')) {
|
||||
title = 'Ice Crystals';
|
||||
icon = <BsFillCloudSleetFill />;
|
||||
} else if (wx.includes('PL')) {
|
||||
title = 'Ice Pellets';
|
||||
icon = <BsFillCloudSleetFill />;
|
||||
} else if (wx.includes('GR')) {
|
||||
title = 'Hail';
|
||||
icon = <BsFillCloudSleetFill />;
|
||||
} else if (wx.includes('GS')) {
|
||||
title = 'Snow Pellets';
|
||||
icon = <BsFillCloudSleetFill />;
|
||||
} else if (wx.includes('BR')) {
|
||||
title = 'Mist';
|
||||
icon = <BsFillCloudRainHeavyFill />;
|
||||
} else if (wx.includes('FG')) {
|
||||
title = 'Fog';
|
||||
icon = <BsFillCloudRainHeavyFill />;
|
||||
} else if (wx.includes('FU')) {
|
||||
title = 'Smoke';
|
||||
icon = <BsFillCloudRainHeavyFill />;
|
||||
} else if (wx.includes('VA')) {
|
||||
title = 'Volcanic Ash';
|
||||
icon = <BsFillCloudRainHeavyFill />;
|
||||
} else if (wx.includes('DU')) {
|
||||
title = 'Dust';
|
||||
icon = <BsFillCloudRainHeavyFill />;
|
||||
} else if (wx.includes('SA')) {
|
||||
title = 'Sand';
|
||||
icon = <BsFillCloudRainHeavyFill />;
|
||||
} else if (wx.includes('HZ')) {
|
||||
title = 'Haze';
|
||||
icon = <BsFillCloudRainHeavyFill />;
|
||||
} else {
|
||||
title = 'Unknown';
|
||||
icon = <BsQuestionLg />;
|
||||
}
|
||||
|
||||
// if (wx.charAt(0) == '+') {
|
||||
// color = '';
|
||||
// } else if (wx.charAt(0) == '-') {
|
||||
// color = '';
|
||||
// } else {
|
||||
// color = '';
|
||||
// }
|
||||
return (
|
||||
<Tooltip label={title}>
|
||||
<span className={`rounded-full`}>{icon}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
16
ui/src/components/Metars/index.tsx
Normal file
16
ui/src/components/Metars/index.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import { Metar } from '@/api/metar.types';
|
||||
import dynamic from 'next/dynamic';
|
||||
|
||||
export default async function Metar({ className = '' }: { className?: string }) {
|
||||
const Map = dynamic(() => import('@/components/Metars/MetarMap'), {
|
||||
loading: () => (
|
||||
<div className='grid min-h-full place-items-center px-6 py-24 sm:py-32 lg:px-8'>
|
||||
<div className='text-center'>
|
||||
<p className='mt-4 text-3xl font-bold tracking-tight text-gray-300 sm:text-5xl'>Loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
ssr: false
|
||||
});
|
||||
return <Map className={className} />;
|
||||
}
|
||||
11
ui/src/components/Sidebar/Sidebar.css
Normal file
11
ui/src/components/Sidebar/Sidebar.css
Normal file
@@ -0,0 +1,11 @@
|
||||
.sidebar {
|
||||
width: 62px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.option-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
7
ui/src/components/Sidebar/index.tsx
Normal file
7
ui/src/components/Sidebar/index.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import './Sidebar.css';
|
||||
|
||||
export default function Sidebar() {
|
||||
return <div className=''></div>;
|
||||
}
|
||||
55
ui/src/components/Topbar/index.tsx
Normal file
55
ui/src/components/Topbar/index.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { AiOutlineUser } from 'react-icons/ai';
|
||||
import { useState } from 'react';
|
||||
import { getAirports } from '@/api/airport';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Autocomplete, Avatar } from '@mantine/core';
|
||||
|
||||
export default function Topbar() {
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const [airports, setAirports] = useState<{ key: string; value: string; label: string }[]>([]);
|
||||
const router = useRouter();
|
||||
|
||||
async function onChange(value: string) {
|
||||
setSearchValue(value);
|
||||
const airportData = await getAirports({ filter: value });
|
||||
setAirports(
|
||||
airportData.data.map((airport) => ({
|
||||
key: airport.icao,
|
||||
value: airport.icao,
|
||||
label: `${airport.icao} - ${airport.full_name}`
|
||||
}))
|
||||
);
|
||||
}
|
||||
|
||||
function onClick(value: string) {
|
||||
router.push(`/airport/${value}`);
|
||||
}
|
||||
|
||||
return (
|
||||
<nav style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<div style={{ display: 'flex' }}>
|
||||
<Link href={'/'} style={{ paddingLeft: '2em', paddingRight: '2em', margin: 'auto' }}>
|
||||
<span>Aviation Weather</span>
|
||||
</Link>
|
||||
<Autocomplete
|
||||
autoFocus
|
||||
radius='xl'
|
||||
placeholder='Search Airports...'
|
||||
limit={10}
|
||||
data={airports}
|
||||
value={searchValue}
|
||||
onChange={onChange}
|
||||
onBlur={() => setSearchValue('')}
|
||||
/>
|
||||
</div>
|
||||
<Link className='' href={'/profile'}>
|
||||
<Avatar>
|
||||
<AiOutlineUser />
|
||||
</Avatar>
|
||||
</Link>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user