Refactored code, working with database data
This commit is contained in:
@@ -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> {
|
||||
let airports = match web::block(|| Airports::find_all()).await.unwrap() {
|
||||
Ok(a) => a,
|
||||
async fn find_all() -> HttpResponse {
|
||||
match web::block(|| Airports::find_all()).await.unwrap() {
|
||||
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> {
|
||||
let airport = match Airports::find(id.into_inner()) {
|
||||
Ok(a) => a,
|
||||
async fn find(id: web::Path<i32>) -> HttpResponse {
|
||||
match Airports::find(id.into_inner()) {
|
||||
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> {
|
||||
let airport = match Airports::create(airport.into_inner()) {
|
||||
Ok(a) => a,
|
||||
async fn create(airport: web::Json<Airport>) -> HttpResponse {
|
||||
match Airports::create(airport.into_inner()) {
|
||||
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> {
|
||||
let airport = match Airports::update(id.into_inner(), airport.into_inner()) {
|
||||
Ok(a) => a,
|
||||
async fn update(id: web::Path<i32>, airport: web::Json<Airport>) -> HttpResponse {
|
||||
match Airports::update(id.into_inner(), airport.into_inner()) {
|
||||
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> {
|
||||
let deleted_airport = match Airports::delete(id.into_inner()) {
|
||||
Ok(a) => a,
|
||||
async fn delete(id: web::Path<i32>) -> HttpResponse {
|
||||
match Airports::delete(id.into_inner()) {
|
||||
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) {
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -1,37 +1,17 @@
|
||||
{
|
||||
"root": true,
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"plugins": [
|
||||
// "@typescript-eslint",
|
||||
// "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"
|
||||
],
|
||||
"parserOptions": {
|
||||
"project": ["./tsconfig.json"]
|
||||
}
|
||||
}]
|
||||
"root": true,
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"plugins": [
|
||||
"@typescript-eslint/eslint-plugin"
|
||||
],
|
||||
"extends": [
|
||||
"plugin:@typescript-eslint/recommended",
|
||||
"plugin:prettier/recommended"
|
||||
],
|
||||
"rules": {
|
||||
"@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"
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,8 @@
|
||||
{
|
||||
"trailingComma": "es5",
|
||||
"tabWidth": 4,
|
||||
"trailingComma": "none",
|
||||
"tabWidth": 2,
|
||||
"semi": true,
|
||||
"singleQuote": true,
|
||||
"printWidth": 100
|
||||
"jsxSingleQuote": true,
|
||||
"printWidth": 120
|
||||
}
|
||||
@@ -5,6 +5,6 @@ const nextConfig = {
|
||||
eslint: {
|
||||
ignoreDuringBuilds: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = nextConfig
|
||||
module.exports = nextConfig;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
autoprefixer: {}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -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'))
|
||||
|
||||
@@ -1,101 +1,31 @@
|
||||
import { Airport } from "@/js/airport";
|
||||
import { getAirports, setAirport } from "@/js/state";
|
||||
import { Metar, getMetars } from "@/js/weather"
|
||||
import Link from "next/link"
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { faArrowsSpin, faLocationArrow } from '@fortawesome/free-solid-svg-icons'
|
||||
import dynamic from "next/dynamic";
|
||||
import { Airport } from '@/js/api/airport.types';
|
||||
import { getAirports } from '@/js/api/airport';
|
||||
import { Metar } from '@/js/api/metar.types';
|
||||
import { getMetars } from '@/js/api/metar';
|
||||
import dynamic from 'next/dynamic';
|
||||
|
||||
export default async function Metar() {
|
||||
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">
|
||||
<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
|
||||
});
|
||||
|
||||
async function update() {
|
||||
const airports: Airport[] = 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 <>
|
||||
<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}/>
|
||||
))}
|
||||
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'>
|
||||
<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() {
|
||||
airports = await getAirports();
|
||||
const metars = await getMetars(airports);
|
||||
for (let i = 0; i < metars.length; i++) {
|
||||
airports[i].metar = metars[i];
|
||||
}
|
||||
}
|
||||
await update();
|
||||
|
||||
return <Map airportString={JSON.stringify(airports)} />;
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,20 +1,17 @@
|
||||
'use client';
|
||||
import { Airport } from '@/js/airport';
|
||||
import { Metar } from '@/js/weather';
|
||||
import { Airport } from '@/js/api/airport.types';
|
||||
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]}
|
||||
@@ -26,19 +23,19 @@ export default function Map({ airportString }: { airportString: string }) {
|
||||
className='overflow-y-hidden overflow-x-hidden'
|
||||
attributionControl={false}
|
||||
>
|
||||
<MapTiles airports={airports}/>
|
||||
</MapContainer>
|
||||
<MapTiles airports={airports} />
|
||||
</MapContainer>
|
||||
);
|
||||
}
|
||||
|
||||
function MapTiles({ airports }: {airports: Airport[] }) {
|
||||
function MapTiles({ airports }: { airports: Airport[] }) {
|
||||
const [zoomLevel, setZoomLevel] = useState(8);
|
||||
// const [dragging, setDragging] = useState(false);
|
||||
// const [center, setCenter] = useState([50, 10.5]);
|
||||
const mapEvents = useMapEvents({
|
||||
zoomend: () => {
|
||||
setZoomLevel(mapEvents.getZoom());
|
||||
},
|
||||
}
|
||||
// mouseup: () => {
|
||||
// setCenter([mapEvents.getCenter().lat, mapEvents.getCenter().lng]);
|
||||
// }
|
||||
@@ -46,45 +43,45 @@ 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';
|
||||
}
|
||||
}
|
||||
|
||||
function windColor(metar: Metar | undefined) {
|
||||
if (Number(metar?.wind_speed_kt) <= 9) {
|
||||
return 'bg-green-300';
|
||||
return 'bg-green-300';
|
||||
} else if (Number(metar?.wind_speed_kt) > 9) {
|
||||
return 'bg-orange-300';
|
||||
return 'bg-orange-300';
|
||||
} else if (Number(metar?.wind_speed_kt) > 12) {
|
||||
return 'bg-red-300';
|
||||
return 'bg-red-300';
|
||||
}
|
||||
}
|
||||
|
||||
function iconSize() {
|
||||
if (zoomLevel <= 4) {
|
||||
return 'text-xs'
|
||||
return 'text-xs';
|
||||
} else if (zoomLevel <= 5) {
|
||||
return 'text-sm';
|
||||
} else if (zoomLevel <= 6) {
|
||||
@@ -102,45 +99,69 @@ 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 <>
|
||||
<TileLayer
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
return (
|
||||
<>
|
||||
<TileLayer
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
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>
|
||||
<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?
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
<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 ? (
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Popup>
|
||||
</Marker>
|
||||
</Marker>
|
||||
</>
|
||||
))}
|
||||
</>;
|
||||
}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
7
weather-ui/src/js/api/airport.ts
Normal file
7
weather-ui/src/js/api/airport.ts
Normal file
@@ -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;
|
||||
}
|
||||
9
weather-ui/src/js/api/airport.types.ts
Normal file
9
weather-ui/src/js/api/airport.types.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import { Metar } from './metar.types';
|
||||
|
||||
export interface Airport {
|
||||
name: string;
|
||||
icao: string;
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
metar?: Metar;
|
||||
}
|
||||
10
weather-ui/src/js/api/metar.ts
Normal file
10
weather-ui/src/js/api/metar.ts
Normal file
@@ -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;
|
||||
}
|
||||
30
weather-ui/src/js/api/metar.types.ts
Normal file
30
weather-ui/src/js/api/metar.types.ts
Normal file
@@ -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;
|
||||
}
|
||||
@@ -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()];
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -1,11 +1,8 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
"./src/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
],
|
||||
content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
|
||||
theme: {
|
||||
extend: {},
|
||||
extend: {}
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
plugins: []
|
||||
};
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2015",
|
||||
"target": "ESNext",
|
||||
"downlevelIteration": true,
|
||||
"lib": [
|
||||
"dom",
|
||||
|
||||
Reference in New Issue
Block a user