From 8eaeeb9554a6eb6c825b21ca71b9c7db10e6dc2c Mon Sep 17 00:00:00 2001 From: Ben Sherriff Date: Thu, 21 Sep 2023 20:21:23 -0400 Subject: [PATCH] Fixing metar dialog --- weather-service/README.md | 6 + weather-ui/src/app/_api/metar.types.ts | 2 +- .../src/app/_components/Metars/MapTiles.tsx | 84 +++++---- .../app/_components/Metars/MetarDialog.tsx | 172 ++++++++++++++---- 4 files changed, 197 insertions(+), 67 deletions(-) diff --git a/weather-service/README.md b/weather-service/README.md index 1ec6484..7858e09 100644 --- a/weather-service/README.md +++ b/weather-service/README.md @@ -1,3 +1,9 @@ +# Aviation Weather + +## UI + +## Service + ## REST API The REST API for the weather service is described below. diff --git a/weather-ui/src/app/_api/metar.types.ts b/weather-ui/src/app/_api/metar.types.ts index 0a87cec..c2b75b5 100644 --- a/weather-ui/src/app/_api/metar.types.ts +++ b/weather-ui/src/app/_api/metar.types.ts @@ -20,7 +20,7 @@ export interface Metar { sky_cover: string; cloud_base_ft_agl: number; }[]; - flight_category: string; + flight_category: 'VFR' | 'MVFR' | 'LIFR' | 'IFR' | 'UNKN'; three_hr_pressure_tendency_mb: number; metar_type: string; maxT_c: number; diff --git a/weather-ui/src/app/_components/Metars/MapTiles.tsx b/weather-ui/src/app/_components/Metars/MapTiles.tsx index 4b3c958..07d48c6 100644 --- a/weather-ui/src/app/_components/Metars/MapTiles.tsx +++ b/weather-ui/src/app/_components/Metars/MapTiles.tsx @@ -3,13 +3,12 @@ import { getAirports } from '@/app/_api/airport'; import { Airport } from '@/app/_api/airport.types'; import { getMetars } from '@/app/_api/metar'; -import { Metar } from '@/app/_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'; +import { BsCircle, BsCircleFill } from 'react-icons/bs'; export default function MapTiles() { const [isOpen, setIsOpen] = useState(false); @@ -60,21 +59,8 @@ export default function MapTiles() { 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() { + console.log('zoom', zoomLevel); if (zoomLevel <= 4) { return 'text-xs'; } else if (zoomLevel <= 5) { @@ -92,13 +78,53 @@ export default function MapTiles() { } } - function icon(airport: Airport) { - return new DivIcon({ - html: ReactDOMServer.renderToString( - - ), - className: 'metar-marker-icon' - }); + function metarIcon(airport: Airport) { + if (airport.metar?.flight_category == 'VFR') { + return new DivIcon({ + html: ReactDOMServer.renderToString( +
+ + V +
+ ), + className: 'metar-marker-icon' + }); + } else if (airport.metar?.flight_category == 'MVFR') { + return new DivIcon({ + html: ReactDOMServer.renderToString( +
+ + M +
+ ), + className: 'metar-marker-icon' + }); + } else if (airport.metar?.flight_category == 'IFR') { + return new DivIcon({ + html: ReactDOMServer.renderToString( +
+ + I +
+ ), + className: 'metar-marker-icon' + }); + } else if (airport.metar?.flight_category == 'LIFR') { + return new DivIcon({ + html: ReactDOMServer.renderToString( +
+ + L +
+ ), + className: 'metar-marker-icon' + }); + } else { + return new DivIcon({ + html: ReactDOMServer.renderToString(), + className: 'metar-marker-icon' + }); + } } useEffect(() => { @@ -116,17 +142,9 @@ export default function MapTiles() { { - mapEvents.eachLayer((l) => { - if (l.getTooltip() && l.isTooltipOpen()) { - console.log('l', l); - l.closeTooltip(); - } - }); - handleOpen(airport); - } + click: () => handleOpen(airport) }} > {!isOpen && ( diff --git a/weather-ui/src/app/_components/Metars/MetarDialog.tsx b/weather-ui/src/app/_components/Metars/MetarDialog.tsx index 5876fdf..d4ec951 100644 --- a/weather-ui/src/app/_components/Metars/MetarDialog.tsx +++ b/weather-ui/src/app/_components/Metars/MetarDialog.tsx @@ -3,9 +3,10 @@ import { Airport } from '@/app/_api/airport.types'; import { Metar } from '@/app/_api/metar.types'; import { FaArrowsSpin, FaLocationArrow } from 'react-icons/fa6'; -import { Modal } from 'antd'; +import { Col, Grid, Modal, Row, Tooltip } from 'antd'; 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'; interface MetarDialogProps { @@ -21,33 +22,6 @@ export default function MetarDialog({ airport, isOpen, onClose }: MetarDialogPro setIsFavorite(value); } - 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'; - } - } return (
-

{airport.metar?.raw_text}

+ {airport.metar && } + {/*

{airport.metar?.raw_text}

)} {airport.metar && airport.metar.wind_dir_degrees && airport.metar.wind_dir_degrees == 'VRB' ? ( - + ) : ( <> )} - + {airport.metar?.wind_speed_kt != undefined && airport.metar?.wind_speed_kt > 0 ? `${airport.metar?.wind_speed_kt} KT` - : 'CALM'} + : `CALM`} + {airport.metar?.wx_string?.split(' ').map((wx) => )}
-
+ */} ); } + +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 ( +
+

{metar.raw_text}

+ + + + {metar.flight_category ? metar.flight_category : 'UNKN'} + + + + {metar.wx_string && metar.wx_string.split(' ').map((wx) => )} + + + Compass TBD Compass TBD Compass TBD Compass TBD Compass TB + + + +
+ ); +} + +function MetarIcon({ wx }: { wx: string }) { + // let color = 'bg-gray-400'; + let title = ''; + let icon = undefined; + if (wx.includes('DZ')) { + title = 'Drizzle'; + icon = ; + } else if (wx.includes('RA')) { + title = 'Rain'; + icon = ; + } else if (wx.includes('SN')) { + title = 'Snow'; + icon = ; + } else if (wx.includes('SG')) { + title = 'Snow Grains'; + icon = ; + } else if (wx.includes('IC')) { + title = 'Ice Crystals'; + icon = ; + } else if (wx.includes('PL')) { + title = 'Ice Pellets'; + icon = ; + } else if (wx.includes('GR')) { + title = 'Hail'; + icon = ; + } else if (wx.includes('GS')) { + title = 'Snow Pellets'; + icon = ; + } else if (wx.includes('BR')) { + title = 'Mist'; + icon = ; + } else if (wx.includes('FG')) { + title = 'Fog'; + icon = ; + } else if (wx.includes('FU')) { + title = 'Smoke'; + icon = ; + } else if (wx.includes('VA')) { + title = 'Volcanic Ash'; + icon = ; + } else if (wx.includes('DU')) { + title = 'Dust'; + icon = ; + } else if (wx.includes('SA')) { + title = 'Sand'; + icon = ; + } else if (wx.includes('HZ')) { + title = 'Haze'; + icon = ; + } else { + title = 'Unknown'; + icon = ; + } + + // if (wx.charAt(0) == '+') { + // color = ''; + // } else if (wx.charAt(0) == '-') { + // color = ''; + // } else { + // color = ''; + // } + return ( + + {icon} + + ); +}