Refactored code, working with database data

weather-service/src/airports/routes.rs

@@ -1,67 +1,61 @@
 use crate::airports::{Airport, Airports};
-use crate::error_handler::CustomError;
 use actix_web::{delete, get, post, put, web, HttpResponse};
 use log::error;
 use serde_json::json;
 
 #[get("/airports")]
-async fn find_all() -> Result<HttpResponse, CustomError> {
+async fn find_all() -> HttpResponse {
-    let airports = match web::block(|| Airports::find_all()).await.unwrap() {
+    match web::block(|| Airports::find_all()).await.unwrap() {
-        Ok(a) => a,
+        Ok(a) => HttpResponse::Ok().json(a),
         Err(err) => {
             error!("{}", err);
-            return Err(err);
+            HttpResponse::InternalServerError().finish()
+        }
     }
-    };
-    Ok(HttpResponse::Ok().json(airports))
 }
 
 #[get("/airports/{id}")]
-async fn find(id: web::Path<i32>) -> Result<HttpResponse, CustomError> {
+async fn find(id: web::Path<i32>) -> HttpResponse {
-    let airport = match Airports::find(id.into_inner()) {
+    match Airports::find(id.into_inner()) {
-        Ok(a) => a,
+        Ok(a) => HttpResponse::Ok().json(a),
         Err(err) => {
             error!("{}", err);
-            return Err(err);
+            HttpResponse::InternalServerError().finish()
+        }
     }
-    };
-    Ok(HttpResponse::Ok().json(airport))
 }
 
 #[post("/airports")]
-async fn create(airport: web::Json<Airport>) -> Result<HttpResponse, CustomError> {
+async fn create(airport: web::Json<Airport>) -> HttpResponse {
-    let airport = match Airports::create(airport.into_inner()) {
+    match Airports::create(airport.into_inner()) {
-        Ok(a) => a,
+        Ok(a) => HttpResponse::Ok().json(a),
         Err(err) => {
             error!("{}", err);
-            return Err(err);
+            HttpResponse::InternalServerError().finish()
+        }
     }
-    };
-    Ok(HttpResponse::Ok().json(airport))
 }
 
 #[put("/airports/{id}")]
-async fn update(id: web::Path<i32>, airport: web::Json<Airport>) -> Result<HttpResponse, CustomError> {
+async fn update(id: web::Path<i32>, airport: web::Json<Airport>) -> HttpResponse {
-    let airport = match Airports::update(id.into_inner(), airport.into_inner()) {
+    match Airports::update(id.into_inner(), airport.into_inner()) {
-        Ok(a) => a,
+        Ok(a) => HttpResponse::Ok().json(a),
         Err(err) => {
             error!("{}", err);
-            return Err(err);
+            HttpResponse::InternalServerError().finish()
+        }
     }
-    };
-    Ok(HttpResponse::Ok().json(airport))
 }
 
 #[delete("/airports/{id}")]
-async fn delete(id: web::Path<i32>) -> Result<HttpResponse, CustomError> {
+async fn delete(id: web::Path<i32>) -> HttpResponse {
-    let deleted_airport = match Airports::delete(id.into_inner()) {
+    match Airports::delete(id.into_inner()) {
-        Ok(a) => a,
+        Ok(a) => HttpResponse::Ok().json(json!({ "deleted": a })),
         Err(err) => {
             error!("{}", err);
-            return Err(err);
+            HttpResponse::InternalServerError().finish()
+        }
     }
-    };
-    Ok(HttpResponse::Ok().json(json!({ "deleted": deleted_airport })))
 }
 
 pub fn init_routes(config: &mut web::ServiceConfig) {

weather-service/src/main.rs

@@ -6,6 +6,7 @@ extern crate diesel_migrations;
 use actix_cors::Cors;
 use actix_web::{App, HttpServer, middleware::Logger};
 use dotenv::dotenv;
+use env_logger::Env;
 use listenfd::ListenFd;
 use log::debug;
 use std::env;
@@ -22,7 +23,7 @@ async fn main() -> std::io::Result<()> {
     if std::env::var_os("RUST_LOG").is_none() {
         std::env::set_var("RUST_LOG", "info,actix=info,diesel_migrations=warn,reqwest=warn,hyper=warn");
     }
-    env_logger::init();
+    env_logger::init_from_env(Env::default().default_filter_or("info"));
     db::init();
 
     let mut listenfd = ListenFd::from_env();

weather-ui/.eslintrc.json

@@ -2,36 +2,16 @@
   "root": true,
   "parser": "@typescript-eslint/parser",
   "plugins": [
-        // "@typescript-eslint",
+    "@typescript-eslint/eslint-plugin"
-        // "prettier"
   ],
-    "extends": [
-        // "prettier",
-        // "eslint:recommended",
-        // "next/core-web-vitals",
-        // "plugin:import/typescript",
-        // "plugin:prettier/recommended",
-        // "plugin:react/recommended",
-        // "plugin:@typescript-eslint/recommended",
-        // "plugin:@typescript-eslint/eslint-recommended",
-        // "plugin:@typescript-eslint/recommended-requiring-type-checking"
-    ],
-    "rules": {
-        "react-hooks/rules-of-hooks": "off", // error
-        "react-hooks/exhaustive-deps": "off",
-        "prettier/prettier": "off",
-        "@typescript-eslint/no-unused-vars": "off", // error
-        "@typescript-eslint/no-unsafe-argument": "off"
-    },
-    "overrides": [
-        {
-          "files": ["*.ts", "*.tsx"],
   "extends": [
     "plugin:@typescript-eslint/recommended",
-            "plugin:@typescript-eslint/recommended-requiring-type-checking"
+    "plugin:prettier/recommended"
   ],
-          "parserOptions": {
+  "rules": {
-            "project": ["./tsconfig.json"]
+    "@typescript-eslint/interface-name-prefix": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-explicit-any": "off"
   }
-    }]
 }

weather-ui/.prettierrc.json

@@ -1,7 +1,8 @@
 {
-    "trailingComma": "es5",
+    "trailingComma": "none",
-    "tabWidth": 4,
+    "tabWidth": 2,
     "semi": true,
     "singleQuote": true,
-    "printWidth": 100
+    "jsxSingleQuote": true,
+    "printWidth": 120
 }

weather-ui/next.config.js

@@ -5,6 +5,6 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true
   }
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

weather-ui/postcss.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
     tailwindcss: {},
-    autoprefixer: {},
+    autoprefixer: {}
-  },
   }
+};

weather-ui/src/app/page.tsx

@@ -4,7 +4,7 @@ import { Airport } from "@/js/airport";
 import Metar from '@/components/Metar';
 
 // setAirport('KJYO', new Airport('Leesburg Executive Airport', 'KJYO'))
-setAirport('KHEF', new Airport('Manassas Regional Airpoirt', 'KHEF', 38.724, -77517))
+// setAirport('KHEF', new Airport('Manassas Regional Airpoirt', 'KHEF', 38.724, -77517))
 // setAirport('KIAD', new Airport('Dulles International Airport', 'KIAD'))
 // setAirport('KFDK', new Airport('Frederick Municipal Airport', 'KFDK'))
 // setAirport('KMRB', new Airport('Eastern West Virginia Regional Airport', 'KMRB'))

weather-ui/src/components/Metar.tsx

@@ -1,101 +1,31 @@
-import { Airport } from "@/js/airport";
+import { Airport } from '@/js/api/airport.types';
-import { getAirports, setAirport } from "@/js/state";
+import { getAirports } from '@/js/api/airport';
-import { Metar, getMetars } from "@/js/weather"
+import { Metar } from '@/js/api/metar.types';
-import Link from "next/link"
+import { getMetars } from '@/js/api/metar';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import dynamic from 'next/dynamic';
-import { faArrowsSpin, faLocationArrow } from '@fortawesome/free-solid-svg-icons'
-import dynamic from "next/dynamic";
 
 export default async function Metar() {
-    const Map = dynamic(() => import("@/components/MetarMap"), {
+  const Map = dynamic(() => import('@/components/MetarMap'), {
-        loading: () => <div className="grid min-h-full place-items-center px-6 py-24 sm:py-32 lg:px-8">
+    loading: () => (
-            <div className="text-center"><p className="mt-4 text-3xl font-bold tracking-tight text-gray-300 sm:text-5xl">Loading...</p></div>
+      <div className='grid min-h-full place-items-center px-6 py-24 sm:py-32 lg:px-8'>
-        </div>,
+        <div className='text-center'>
+          <p className='mt-4 text-3xl font-bold tracking-tight text-gray-300 sm:text-5xl'>Loading...</p>
+        </div>
+      </div>
+    ),
     ssr: false
   });
 
+  let airports: Airport[] = [];
+
   async function update() {
-        const airports: Airport[] = getAirports();
+    airports = await getAirports();
     const metars = await getMetars(airports);
     for (let i = 0; i < metars.length; i++) {
       airports[i].metar = metars[i];
-            airports[i].latitude = metars[i].latitude;
-            airports[i].longitude = metars[i].longitude;
-            setAirport(airports[i].icao, airports[i]);
     }
-        return getAirports();
   }
   await update();
 
-    return <>
+  return <Map airportString={JSON.stringify(airports)} />;
-        <Map airportString={JSON.stringify(getAirports())}/>
-    </>
-}
-
-export function MetarGrid() {
-    const airports: Airport[] = getAirports();
-
-    return <>
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-            {airports.map((airport) => (
-                <MetarCard airport={airport}/>
-            ))}
-        </div>
-    </>
-}
-
-function MetarCard({ airport}: { airport: Airport}) {
-    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-orange-600'
-        } else if (metar?.flight_category == 'LIFR') {
-            return 'bg-red-600'
-        } else {
-            return 'bg-black'
-        }
-    }
-
-    function windColor(metar: Metar | undefined) {
-        if (Number(metar?.wind_speed_kt) <= 9) {
-            return 'bg-green-300';
-        } else if (Number(metar?.wind_speed_kt) > 9) {
-            return 'bg-orange-300';
-        } else if (Number(metar?.wind_speed_kt) > 12) {
-            return 'bg-red-300';
-        }
-    }
-
-    return (
-        <div
-            key={airport.metar?.station_id}
-            className={`relative flex items-center space-x-3 rounded-lg border border-gray-300 bg-white px-4 py-2 shadow-sm focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 hover:border-gray-400`}
-        >
-            <div className="min-w-0 flex-1">
-            <Link href={`/airport/${airport.icao}`}>
-                <span className="absolute inset-0" aria-hidden="true" />
-                <p className="text-gray-900 pb-1"><span className='font-semibold'>{airport.icao}</span> {airport.name}</p>
-                <hr/>
-                <p className='text-sm font-medium text-gray-500'>{airport.metar?.raw_text}</p>
-                <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">
-                        <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>
-            </div>
-        </div>
-    );
 }

weather-ui/src/components/MetarMap.tsx

@@ -1,20 +1,17 @@
 'use client';
-import { Airport } from '@/js/airport';
+import { Airport } from '@/js/api/airport.types';
-import { Metar } from '@/js/weather';
+import { Metar } from '@/js/api/metar.types';
 import { faArrowsSpin, faLocationArrow, faLocationPin } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { DivIcon } from 'leaflet';
 import Link from 'next/link';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import ReactDOMServer from 'react-dom/server';
 import { MapContainer, Marker, Popup, TileLayer, Tooltip, useMapEvents } from 'react-leaflet';
 
 export default function Map({ airportString }: { airportString: string }) {
   const [airports, setAirports] = useState<Airport[]>(JSON.parse(airportString));
 
-  useEffect(() => {
-  }, []);
-
   return (
     <MapContainer
       center={[38.7209, -77.5133]}
@@ -38,7 +35,7 @@ function MapTiles({ airports }: {airports: Airport[] }) {
   const mapEvents = useMapEvents({
     zoomend: () => {
       setZoomLevel(mapEvents.getZoom());
-    },
+    }
     // mouseup: () => {
     //   setCenter([mapEvents.getCenter().lat, mapEvents.getCenter().lng]);
     // }
@@ -46,29 +43,29 @@ function MapTiles({ airports }: {airports: Airport[] }) {
 
   function metarBGColor(metar: Metar | undefined) {
     if (metar?.flight_category == 'VFR') {
-        return 'bg-emerald-600'
+      return 'bg-emerald-600';
     } else if (metar?.flight_category == 'MVFR') {
-        return 'bg-blue-600'
+      return 'bg-blue-600';
     } else if (metar?.flight_category == 'IFR') {
-        return 'bg-orange-600'
+      return 'bg-orange-600';
     } else if (metar?.flight_category == 'LIFR') {
-        return 'bg-red-600'
+      return 'bg-red-600';
     } else {
-        return 'bg-black'
+      return 'bg-black';
     }
   }
 
   function metarTextColor(metar: Metar | undefined) {
     if (metar?.flight_category == 'VFR') {
-        return 'text-emerald-700'
+      return 'text-emerald-700';
     } else if (metar?.flight_category == 'MVFR') {
-        return 'text-blue-700'
+      return 'text-blue-700';
     } else if (metar?.flight_category == 'IFR') {
-        return 'text-orange-700'
+      return 'text-orange-700';
     } else if (metar?.flight_category == 'LIFR') {
-        return 'text-red-700'
+      return 'text-red-700';
     } else {
-        return 'text-black'
+      return 'text-black';
     }
   }
 
@@ -84,7 +81,7 @@ function MapTiles({ airports }: {airports: Airport[] }) {
 
   function iconSize() {
     if (zoomLevel <= 4) {
-      return 'text-xs'
+      return 'text-xs';
     } else if (zoomLevel <= 5) {
       return 'text-sm';
     } else if (zoomLevel <= 6) {
@@ -102,38 +99,61 @@ function MapTiles({ airports }: {airports: Airport[] }) {
 
   function icon(airport: Airport) {
     return new DivIcon({
-      html: ReactDOMServer.renderToString(<FontAwesomeIcon icon={faLocationPin} className={`${iconSize()} ${metarTextColor(airport.metar)}`}/>),
+      html: ReactDOMServer.renderToString(
+        <FontAwesomeIcon icon={faLocationPin} className={`${iconSize()} ${metarTextColor(airport.metar)}`} />
+      ),
       className: 'metar-marker-icon'
     });
   }
 
-  return <>
+  return (
+    <>
       <TileLayer
         attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
       />
       {airports.map((airport) => (
         <>
           <Marker position={[airport.latitude, airport.longitude]} icon={icon(airport)}>
-          <Tooltip className='metar-tooltip' direction="top" offset={[5, -5]} opacity={1}>{airport.icao}</Tooltip>
+            <Tooltip className='metar-tooltip' direction='top' offset={[5, -5]} opacity={1}>
+              {airport.icao}
+            </Tooltip>
             <Popup>
-              <div className="min-w-0 flex-1 select-none">
+              <div className='min-w-0 flex-1 select-none'>
                 <Link href={`/airport/${airport.icao}`}>
-                  <h1 className="text-base text-gray-900 pb-1"><span className='font-semibold'>{airport.icao}</span> {airport.name}</h1>
+                  <h1 className='text-base text-gray-900 pb-1'>
+                    <span className='font-semibold'>{airport.icao}</span> {airport.name}
+                  </h1>
                 </Link>
                 <hr />
                 <p className='text-sm font-medium text-gray-500'>{airport.metar?.raw_text}</p>
                 <div className='mt-2 flex'>
-                    <span className={`flex inline-block text-sm text-white ${metarBGColor(airport.metar)} py-2 px-4 rounded-full`}>{airport.metar?.flight_category? airport.metar?.flight_category : 'UNKN'}</span>
+                  <span
-                    <div className="flex inline-block px-2">
+                    className={`flex inline-block text-sm text-white ${metarBGColor(
+                      airport.metar
+                    )} py-2 px-4 rounded-full`}
+                  >
+                    {airport.metar?.flight_category ? airport.metar?.flight_category : 'UNKN'}
+                  </span>
+                  <div className='flex inline-block px-2'>
                     <span className={`text-sm text-black ${windColor(airport.metar)} py-2 px-2 rounded-full`}>
-                          {airport.metar && airport.metar.wind_dir_degrees && Number(airport.metar.wind_dir_degrees) > 0?
+                      {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`}}/>: <></>
+                        <FontAwesomeIcon
-                          }
+                          className='pr-1'
-                          {airport.metar && airport.metar.wind_dir_degrees && airport.metar.wind_dir_degrees == 'VRB'?
+                          icon={faLocationArrow}
-                              <FontAwesomeIcon className="pr-1" icon={faArrowsSpin}/>: <></>
+                          style={{ rotate: `${-45 + 180 + Number(airport.metar.wind_dir_degrees)}deg` }}
-                          }
+                        />
-                          {airport.metar?.wind_speed_kt != undefined && airport.metar?.wind_speed_kt > 0? `${airport.metar?.wind_speed_kt} KT` : 'CALM'}
+                      ) : (
+                        <></>
+                      )}
+                      {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>
                   </div>
                 </div>
@@ -142,5 +162,6 @@ function MapTiles({ airports }: {airports: Airport[] }) {
           </Marker>
         </>
       ))}
-    </>;
+    </>
+  );
 }

weather-ui/src/js/airport.ts

@@ -1,17 +0,0 @@
-import { Metar } from "./weather";
-
-export class Airport {
-    name: string;
-    icao: string;
-    latitude: number;
-    longitude: number;
-    metar: Metar | undefined;
-
-    constructor(name: string, icao: string, latitude: number, longitude: number) {
-        this.name = name;
-        this.icao = icao;
-        this.latitude = latitude;
-        this.longitude = longitude;
-        this.metar = undefined;
-    }
-}

weather-ui/src/js/api/airport.ts

@@ -0,0 +1,7 @@
+import axios from 'axios';
+import { Airport } from './airport.types';
+
+export async function getAirports(): Promise<Airport[]> {
+  const response = await axios.get(`http://localhost:5000/airports`).catch((error) => console.error(error));
+  return response?.data;
+}

weather-ui/src/js/api/airport.types.ts

@@ -0,0 +1,9 @@
+import { Metar } from './metar.types';
+
+export interface Airport {
+  name: string;
+  icao: string;
+  latitude: number;
+  longitude: number;
+  metar?: Metar;
+}

weather-ui/src/js/api/metar.ts

@@ -0,0 +1,10 @@
+import axios from 'axios';
+import { Airport } from './airport.types';
+import { Metar } from './metar.types';
+
+export async function getMetars(airports: Airport[]): Promise<Metar[]> {
+  const stationICAOs: string = airports.map((airport) => airport.icao).join(',');
+  const url = `http://localhost:5000/metars/${stationICAOs}`;
+  const response = await axios.get(url).catch((error) => console.error(error));
+  return response?.data;
+}

weather-ui/src/js/api/metar.types.ts

@@ -0,0 +1,30 @@
+export interface Metar {
+  raw_text: string;
+  station_id: string;
+  observation_time: string;
+  latitude: number;
+  longitude: number;
+  temp_c: number;
+  dewpoint_c: number;
+  wind_dir_degrees: string;
+  wind_speed_kt: number;
+  visibility_statute_mi: string;
+  altim_in_hg: number;
+  sea_level_pressure_mb: number;
+  quality_control_flags: {
+    auto: boolean;
+    auto_station: boolean;
+  };
+  wx_string: string;
+  sky_condition: {
+    sky_cover: string;
+    cloud_base_ft_agl: number;
+  }[];
+  flight_category: string;
+  three_hr_pressure_tendency_mb: number;
+  metar_type: string;
+  maxT_c: number;
+  minT_c: number;
+  precip_in: number;
+  elevation_m: number;
+}

weather-ui/src/js/state.ts

@@ -1,15 +0,0 @@
-import { Airport } from "./airport";
-
-const airports: Map<string, Airport> = new Map();
-
-export function setAirport(icao: string, airport: Airport) {
-    airports.set(icao, airport);
-}
-
-export function getAirport(icao: string): Airport | undefined {
-    return airports.get(icao);
-}
-
-export function getAirports(): Airport[] {
-    return [...airports.values()];
-}

weather-ui/src/js/weather.ts

@@ -1,116 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unsafe-argument */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import axios from 'axios';
-// import { xml2json } from 'xml-js';
-import { Airport } from './airport';
-
-// const base_url = 'https://beta.aviationweather.gov/cgi-bin/data';
-
-export async function getMetars(airports: Airport[]): Promise<Metar[]> {
-    const stationICAOs: string = airports
-    .map((airport) => airport.icao)
-    .join(',');
-    const url = `http://localhost:5000/metars/KHEF`;
-    const response = await axios.get(url).catch((error) => console.error(error));
-    console.log(response);
-    return [];
-}
-
-// export async function getMetars(airports: Airport[]): Promise<Metar[]> {
-//     const stationICAOs: string = airports
-//         .map((airport) => airport.icao)
-//         .join(',');
-//     const url = `${base_url}/metar.php?ids=${stationICAOs}&format=xml`;
-//     const response = await axios
-//         .get(`${url}`)
-//         .catch((error) => console.error(`${error}`));
-//     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;
-//         if (!Array.isArray(metarData)) {
-//             metarData = [metarData];
-//         }
-//         for (const data of metarData) {
-//             const sky_condition: {
-//                 sky_cover: string;
-//                 cloud_base_ft_agl: number;
-//             }[] = [];
-//             if (Array.isArray(data.sky_condition)) {
-//                 for (const sc of data.sky_condition) {
-//                     sky_condition.push({
-//                         sky_cover: sc.sky_cover,
-//                         cloud_base_ft_agl: Number(sc.cloud_base_ft_agl)
-//                     })
-//                 }
-//             } else {
-//                 sky_condition.push({
-//                     sky_cover: data.sky_condition?.sky_cover,
-//                     cloud_base_ft_agl: Number(data.sky_condition?.cloud_base_ft_agl)
-//                 })
-//             }
-//             const metar: Metar = {
-//                 raw_text: data.raw_text._text,
-//                 station_id: data.station_id._text,
-//                 observation_time: data.observation_time._text,
-//                 latitude: Number(data.latitude._text),
-//                 longitude: Number(data.longitude._text),
-//                 temp_c: Number(data.temp_c._text),
-//                 dewpoint_c: Number(data.dewpoint_c._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),
-//                 sea_level_pressure_mb: data.sea_level_pressure_mb?._text,
-//                 quality_control_flags: {
-//                     auto: data.quality_control_flags?.auto?._text == 'TRUE',
-//                     auto_station: data.quality_control_flags?.auto_station?._text == 'TRUE',
-//                 },
-//                 wx_string: data.wx_string?._text,
-//                 sky_condition: sky_condition,
-//                 flight_category: data.flight_category._text,
-//                 three_hr_pressure_tendency_mb: data.three_hr_pressure_tendency_mb?._text,
-//                 metar_type: data.metar_type._text,
-//                 maxT_c: Number(data.maxT_c?._text),
-//                 minT_c: Number(data.minT_c?._text),
-//                 precip_in: Number(data.precip_in?._text),
-//                 elevation_m: Number(data.elevation_m._text),
-//             };
-//             metars.push(metar);
-//         }
-//     }
-//     return metars;
-// }
-
-export interface Metar {
-    raw_text: string;
-    station_id: string;
-    observation_time: string;
-    latitude: number;
-    longitude: number;
-    temp_c: number;
-    dewpoint_c: number;
-    wind_dir_degrees: string;
-    wind_speed_kt: number;
-    visibility_statute_mi: string;
-    altim_in_hg: number;
-    sea_level_pressure_mb: number;
-    quality_control_flags: {
-        auto: boolean;
-        auto_station: boolean;
-    };
-    wx_string: string;
-    sky_condition: {
-        sky_cover: string;
-        cloud_base_ft_agl: number;
-    }[];
-    flight_category: string;
-    three_hr_pressure_tendency_mb: number;
-    metar_type: string;
-    maxT_c: number;
-    minT_c: number;
-    precip_in: number;
-    elevation_m: number;
-}

weather-ui/tailwind.config.js

@@ -1,11 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
-    "./src/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
   theme: {
-    extend: {},
+    extend: {}
   },
-  plugins: [],
+  plugins: []
-}
+};
-

weather-ui/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "ES2015",
+    "target": "ESNext",
     "downlevelIteration": true,
     "lib": [
       "dom",