Fixing metar dialog

2023-09-21 20:21:23 -04:00
parent c86d8743ec
commit 8eaeeb9554
4 changed files with 197 additions and 67 deletions
--- 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(
-        <FaLocationPin className={`${iconSize()} ${metarTextColor(airport.metar)}`} />
-      ),
-      className: 'metar-marker-icon'
-    });
+  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(() => {
@@ -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: () => {
-              mapEvents.eachLayer((l) => {
-                if (l.getTooltip() && l.isTooltipOpen()) {
-                  console.log('l', l);
-                  l.closeTooltip();
-                }
-              });
-              handleOpen(airport);
-            }
+            click: () => handleOpen(airport)
          }}
        >
          {!isOpen && (
--- 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 (
    <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>
+  );
+}