bsherriff/aviation
1
1
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

style wind

Browse Source
This commit is contained in:
Ben Sherriff
2023-08-27 16:46:46 -04:00
parent bea8fc6895
commit 02c892a889
3 changed files with 24 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/page.tsx
View File

@@ -17,6 +17,9 @@ setAirport('KCJR', new Airport('Culpeper Regional Airport', 'KCJR'))
setAirport('KHWY', new Airport('Warrenton-Fauquier Airport', 'KHWY')) setAirport('KHWY', new Airport('Warrenton-Fauquier Airport', 'KHWY'))
setAirport('KRMN', new Airport('Stafford Regional Airport', 'KRMN')) setAirport('KRMN', new Airport('Stafford Regional Airport', 'KRMN'))
setAirport('KEZF', new Airport('Shannon Airport', 'KEZF')) 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() { export default function Page() {
return <> return <>

24
src/components/MetarGrid.tsx
View File

@@ -3,7 +3,7 @@ import { getAirports, setAirport } from "@/js/state";
import { Metar, getMetars } from "@/js/weather" import { Metar, getMetars } from "@/js/weather"
import Link from "next/link" import Link from "next/link"
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' 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() { export default async function MetarGrid() {
const airports: Airport[] = getAirports(); 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 ( return (
<div <div
key={airport.metar?.station_id} key={airport.metar?.station_id}
@@ -59,11 +67,15 @@ function MetarCard({ airport}: { airport: Airport}) {
<div className='mt-2'> <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 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="truncate inline-block py-2 px-2">
{airport.metar && airport.metar.wind_dir_degrees && airport.metar.wind_dir_degrees != 0? <span className={`text-black ${windColor(airport.metar)} p-2 rounded-full mr-1`}>
// <FontAwesomeIcon icon={faLocationArrow} size="2xs" style={{rotate: `${-45 + airport.metar.wind_dir_degrees}deg`}}/> : <></> {airport.metar && airport.metar.wind_dir_degrees && Number(airport.metar.wind_dir_degrees) > 0?
<FontAwesomeIcon icon={faLocationArrow} style={{rotate: `${-45 + airport.metar.wind_dir_degrees}deg`}} className="pr-1"/>: <></> <FontAwesomeIcon className="pr-1" icon={faLocationArrow} style={{rotate: `${-45 + 180 + Number(airport.metar.wind_dir_degrees)}deg`}}/>: <></>
} }
{airport.metar?.wind_speed_kt} KT {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> </span>
</div> </div>
</Link> </Link>

6
src/js/weather.ts
View File

@@ -15,12 +15,12 @@ export async function getMetars(airports: Airport[]): Promise<Metar[]> {
const response = await axios const response = await axios
.get(`${url}`) .get(`${url}`)
.catch((error) => console.error(`${error}`)); .catch((error) => console.error(`${error}`));
// const metars = new Map<string, Metar>();
const metars: Metar[] = []; const metars: Metar[] = [];
if (response != null && response != undefined) { if (response != null && response != undefined) {
const json = xml2json(response.data, { compact: true }); const json = xml2json(response.data, { compact: true });
const jsonObject = JSON.parse(json); const jsonObject = JSON.parse(json);
let metarData = jsonObject?.response?.data?.METAR; let metarData = jsonObject?.response?.data?.METAR;
console.log(metarData);
if (!Array.isArray(metarData)) { if (!Array.isArray(metarData)) {
metarData = [metarData]; metarData = [metarData];
} }
@@ -50,7 +50,7 @@ export async function getMetars(airports: Airport[]): Promise<Metar[]> {
longitude: Number(data.longitude._text), longitude: Number(data.longitude._text),
temp_c: Number(data.temp_c._text), temp_c: Number(data.temp_c._text),
dewpoint_c: Number(data.dewpoint_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), wind_speed_kt: Number(data.wind_speed_kt._text),
visibility_statute_mi: data.visibility_statute_mi?._text, visibility_statute_mi: data.visibility_statute_mi?._text,
altim_in_hg: Number(data.altim_in_hg?._text), altim_in_hg: Number(data.altim_in_hg?._text),
@@ -83,7 +83,7 @@ export interface Metar {
longitude: number; longitude: number;
temp_c: number; temp_c: number;
dewpoint_c: number; dewpoint_c: number;
wind_dir_degrees: number; wind_dir_degrees: string;
wind_speed_kt: number; wind_speed_kt: number;
visibility_statute_mi: string; visibility_statute_mi: string;
altim_in_hg: number; altim_in_hg: number;