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('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 <>

22
src/components/MetarGrid.tsx
View File

@@ -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"/>: <></>
<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?.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>
</div>
</Link>

6
src/js/weather.ts
View File

@@ -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;