Migrated project into separate directories
This commit is contained in:
101
weather-ui/src/components/Metar.tsx
Normal file
101
weather-ui/src/components/Metar.tsx
Normal file
@@ -0,0 +1,101 @@
|
||||
import { Airport } from "@/js/airport";
|
||||
import { getAirports, setAirport } from "@/js/state";
|
||||
import { Metar, getMetars } from "@/js/weather"
|
||||
import Link from "next/link"
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { faArrowsSpin, faLocationArrow } from '@fortawesome/free-solid-svg-icons'
|
||||
import dynamic from "next/dynamic";
|
||||
|
||||
export default async function Metar() {
|
||||
const Map = dynamic(() => import("@/components/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
|
||||
});
|
||||
|
||||
async function update() {
|
||||
const airports: Airport[] = getAirports();
|
||||
const metars = await getMetars(airports);
|
||||
for (let i = 0; i < metars.length; i++) {
|
||||
airports[i].metar = metars[i];
|
||||
airports[i].latitude = metars[i].latitude;
|
||||
airports[i].longitude = metars[i].longitude;
|
||||
setAirport(airports[i].icao, airports[i]);
|
||||
}
|
||||
return getAirports();
|
||||
}
|
||||
await update();
|
||||
|
||||
return <>
|
||||
<Map airportString={JSON.stringify(getAirports())}/>
|
||||
</>
|
||||
}
|
||||
|
||||
export function MetarGrid() {
|
||||
const airports: Airport[] = getAirports();
|
||||
|
||||
return <>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
{airports.map((airport) => (
|
||||
<MetarCard airport={airport}/>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
|
||||
function MetarCard({ airport}: { airport: Airport}) {
|
||||
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-orange-600'
|
||||
} else if (metar?.flight_category == 'LIFR') {
|
||||
return 'bg-red-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 (
|
||||
<div
|
||||
key={airport.metar?.station_id}
|
||||
className={`relative flex items-center space-x-3 rounded-lg border border-gray-300 bg-white px-4 py-2 shadow-sm focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 hover:border-gray-400`}
|
||||
>
|
||||
<div className="min-w-0 flex-1">
|
||||
<Link href={`/airport/${airport.icao}`}>
|
||||
<span className="absolute inset-0" aria-hidden="true" />
|
||||
<p className="text-gray-900 pb-1"><span className='font-semibold'>{airport.icao}</span> {airport.name}</p>
|
||||
<hr/>
|
||||
<p className='text-sm font-medium text-gray-500'>{airport.metar?.raw_text}</p>
|
||||
<div className='mt-2'>
|
||||
<span className={`truncate text-sm text-white ${metarBGColor(airport.metar)} inline-block py-2 px-4 rounded-full`}>{airport.metar?.flight_category? airport.metar?.flight_category : 'UNKN'}</span>
|
||||
<span className="truncate inline-block py-2 px-2">
|
||||
<span className={`text-black ${windColor(airport.metar)} p-2 rounded-full mr-1`}>
|
||||
{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>
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
146
weather-ui/src/components/MetarMap.tsx
Normal file
146
weather-ui/src/components/MetarMap.tsx
Normal file
@@ -0,0 +1,146 @@
|
||||
'use client';
|
||||
import { Airport } from '@/js/airport';
|
||||
import { Metar } from '@/js/weather';
|
||||
import { faArrowsSpin, faLocationArrow, faLocationPin } from '@fortawesome/free-solid-svg-icons';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { DivIcon } from 'leaflet';
|
||||
import Link from 'next/link';
|
||||
import { useEffect, useState } from 'react';
|
||||
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));
|
||||
|
||||
useEffect(() => {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<MapContainer
|
||||
center={[38.7209, -77.5133]}
|
||||
zoom={8}
|
||||
maxZoom={12}
|
||||
minZoom={3}
|
||||
zoomControl={false}
|
||||
style={{ height: '96.5vh' }}
|
||||
className='overflow-y-hidden overflow-x-hidden'
|
||||
attributionControl={false}
|
||||
>
|
||||
<MapTiles airports={airports}/>
|
||||
</MapContainer>
|
||||
);
|
||||
}
|
||||
|
||||
function MapTiles({ airports }: {airports: Airport[] }) {
|
||||
const [zoomLevel, setZoomLevel] = useState(8);
|
||||
// const [dragging, setDragging] = useState(false);
|
||||
// const [center, setCenter] = useState([50, 10.5]);
|
||||
const mapEvents = useMapEvents({
|
||||
zoomend: () => {
|
||||
setZoomLevel(mapEvents.getZoom());
|
||||
},
|
||||
// mouseup: () => {
|
||||
// setCenter([mapEvents.getCenter().lat, mapEvents.getCenter().lng]);
|
||||
// }
|
||||
});
|
||||
|
||||
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-orange-600'
|
||||
} else if (metar?.flight_category == 'LIFR') {
|
||||
return 'bg-red-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-orange-700'
|
||||
} else if (metar?.flight_category == 'LIFR') {
|
||||
return 'text-red-700'
|
||||
} else {
|
||||
return 'text-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';
|
||||
}
|
||||
}
|
||||
|
||||
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'
|
||||
});
|
||||
}
|
||||
|
||||
return <>
|
||||
<TileLayer
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
/>
|
||||
{airports.map((airport) => (
|
||||
<>
|
||||
<Marker position={[airport.latitude, airport.longitude]} icon={icon(airport)}>
|
||||
<Tooltip className='metar-tooltip' direction="top" offset={[5, -5]} opacity={1}>{airport.icao}</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.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>
|
||||
</>
|
||||
))}
|
||||
</>;
|
||||
}
|
||||
Reference in New Issue
Block a user