Fixing metar dialog

weather-service/README.md

@@ -1,3 +1,9 @@
+# Aviation Weather
+
+## UI
+
+## Service
+
 ## REST API
 The REST API for the weather service is described below.
 

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;

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) {
+  function metarIcon(airport: Airport) {
-    return new DivIcon({
+    if (airport.metar?.flight_category == 'VFR') {
-      html: ReactDOMServer.renderToString(
+      return new DivIcon({
-        <FaLocationPin className={`${iconSize()} ${metarTextColor(airport.metar)}`} />
+        html: ReactDOMServer.renderToString(
-      ),
+          <div>
-      className: 'metar-marker-icon'
+            <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(() => {
@@ -116,17 +142,9 @@ export default function MapTiles() {
         <Marker
           key={airport.icao}
           position={[airport.point.y, airport.point.x]}
-          icon={icon(airport)}
+          icon={metarIcon(airport)}
           eventHandlers={{
-            click: () => {
+            click: () => handleOpen(airport)
-              mapEvents.eachLayer((l) => {
-                if (l.getTooltip() && l.isTooltipOpen()) {
-                  console.log('l', l);
-                  l.closeTooltip();
-                }
-              });
-              handleOpen(airport);
-            }
           }}
         >
           {!isOpen && (

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 (
     <Modal
       title={
@@ -78,7 +52,8 @@ export default function MetarDialog({ airport, isOpen, onClose }: MetarDialogPro
     >
       <div className='min-w-0 flex-1'>
         <hr />
-        <p className='text-sm font-medium text-gray-500'>{airport.metar?.raw_text}</p>
+        {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 
@@ -98,19 +73,150 @@ export default function MetarDialog({ airport, isOpen, onClose }: MetarDialogPro
                 <></>
               )}
               {airport.metar && airport.metar.wind_dir_degrees && airport.metar.wind_dir_degrees == 'VRB' ? (
-                <FaArrowsSpin className='align-middle' />
+                <FaArrowsSpin className='align-middle pr-1.5' />
               ) : (
                 <></>
               )}
-              <span className='align-middle pl-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'}
+                  : `CALM`}
               </span>
             </span>
+            {airport.metar?.wx_string?.split(' ').map((wx) => <MetarIcon wx={wx} />)}
           </div>
-        </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>
+      <Row gutter={18}>
+        <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>
+        </Col>
+        <Col className='gutter-row' span={12}>
+          {metar.wx_string && metar.wx_string.split(' ').map((wx) => <MetarIcon wx={wx} />)}
+        </Col>
+      </Row>
+      <Row gutter={2}>Compass TBD Compass TBD Compass TBD Compass TBD Compass TB</Row>
+      <Row gutter={2}>
+        <Col></Col>
+      </Row>
+    </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 title={title}>
+      <span className={`rounded-full`}>{icon}</span>
+    </Tooltip>
+  );
+}