From 02c892a8899a10dace16ced937c3af92449dc544 Mon Sep 17 00:00:00 2001
From: Ben Sherriff <bsherriffj@gmail.com>
Date: Sun, 27 Aug 2023 16:46:46 -0400
Subject: [PATCH] style wind

---
 src/app/page.tsx             |  3 +++
 src/components/MetarGrid.tsx | 24 ++++++++++++++++++------
 src/js/weather.ts            |  6 +++---
 3 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 23cc836..2b6dfba 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -17,6 +17,9 @@ setAirport('KCJR', new Airport('Culpeper Regional Airport', 'KCJR'))
 setAirport('KHWY', new Airport('Warrenton-Fauquier Airport', 'KHWY'))
 setAirport('KRMN', new Airport('Stafford Regional Airport', 'KRMN'))
 setAirport('KEZF', new Airport('Shannon Airport', 'KEZF'))
+// setAirport('KMQI', new Airport('Test Airport', 'KMQI'))
+// setAirport('KEKQ', new Airport('Test Airport', 'KEKQ'))
+// setAirport('KCSV', new Airport('Test Airport', 'KCSV'))
 
 export default function Page() {
     return <>
diff --git a/src/components/MetarGrid.tsx b/src/components/MetarGrid.tsx
index faf87a9..888fed8 100644
--- a/src/components/MetarGrid.tsx
+++ b/src/components/MetarGrid.tsx
@@ -3,7 +3,7 @@ import { getAirports, setAirport } from "@/js/state";
 import { Metar, getMetars } from "@/js/weather"
 import Link from "next/link"
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faLocationArrow } from '@fortawesome/free-solid-svg-icons'
+import { faArrowsSpin, faLocationArrow } from '@fortawesome/free-solid-svg-icons'
 
 export default async function MetarGrid() {
     const airports: Airport[] = getAirports();
@@ -45,6 +45,14 @@ function MetarCard({ airport}: { airport: Airport}) {
         }
     }
 
+    function windColor(metar: Metar | undefined) {
+        if (Number(metar?.wind_speed_kt) <= 12) {
+            return 'bg-green-300';
+        } else if (Number(metar?.wind_speed_kt) > 12) {
+            return 'bg-orange-300';
+        }
+    }
+
     return (
         <div
             key={airport.metar?.station_id}
@@ -59,11 +67,15 @@ function MetarCard({ airport}: { airport: Airport}) {
                 <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">
-                        {airport.metar && airport.metar.wind_dir_degrees && airport.metar.wind_dir_degrees != 0?
-                            // <FontAwesomeIcon icon={faLocationArrow} size="2xs" style={{rotate: `${-45 + airport.metar.wind_dir_degrees}deg`}}/> : <></>
-                            <FontAwesomeIcon icon={faLocationArrow} style={{rotate: `${-45 + airport.metar.wind_dir_degrees}deg`}} className="pr-1"/>: <></>
-                        }
-                        {airport.metar?.wind_speed_kt} KT
+                        <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>
diff --git a/src/js/weather.ts b/src/js/weather.ts
index 78b0fcc..1440f95 100644
--- a/src/js/weather.ts
+++ b/src/js/weather.ts
@@ -15,12 +15,12 @@ export async function getMetars(airports: Airport[]): Promise<Metar[]> {
     const response = await axios
         .get(`${url}`)
         .catch((error) => console.error(`${error}`));
-    // const metars = new Map<string, Metar>();
     const metars: Metar[] = [];
     if (response != null && response != undefined) {
         const json = xml2json(response.data, { compact: true });
         const jsonObject = JSON.parse(json);
         let metarData = jsonObject?.response?.data?.METAR;
+        console.log(metarData);
         if (!Array.isArray(metarData)) {
             metarData = [metarData];
         }
@@ -50,7 +50,7 @@ export async function getMetars(airports: Airport[]): Promise<Metar[]> {
                 longitude: Number(data.longitude._text),
                 temp_c: Number(data.temp_c._text),
                 dewpoint_c: Number(data.dewpoint_c._text),
-                wind_dir_degrees: Number(data.wind_dir_degrees._text),
+                wind_dir_degrees: data.wind_dir_degrees._text,
                 wind_speed_kt: Number(data.wind_speed_kt._text),
                 visibility_statute_mi: data.visibility_statute_mi?._text,
                 altim_in_hg: Number(data.altim_in_hg?._text),
@@ -83,7 +83,7 @@ export interface Metar {
     longitude: number;
     temp_c: number;
     dewpoint_c: number;
-    wind_dir_degrees: number;
+    wind_dir_degrees: string;
     wind_speed_kt: number;
     visibility_statute_mi: string;
     altim_in_hg: number;