This commit is contained in:
2023-08-30 16:24:17 -04:00
parent ac0ecdff5e
commit 0c930a24ea
8 changed files with 34 additions and 10 deletions

View File

@@ -1,4 +1,4 @@
# PCS UI # Aviation Weather
# Getting Started # Getting Started
The main installed packages are the following: The main installed packages are the following:

15
docker-compose.yml Normal file
View File

@@ -0,0 +1,15 @@
version: '3'
services:
db:
image: postgres:latest
container_name: aviation-weather_db
environment:
POSTGRES_USER: ${POSTRGRES_USER}
POSTGRESS_PASSWORD: ${POSTGRES_PASSWORD}
POSTGRES_DB: ${POSTGRES_DB}
volumes:
- ./data:/var/lib/postgresql/data
ports:
-'5432:5432'
restart: unless-stopped

4
package-lock.json generated
View File

@@ -1,11 +1,11 @@
{ {
"name": "pcs-ui", "name": "aviation-weather",
"version": "0.1.0", "version": "0.1.0",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "pcs-ui", "name": "aviation-weather",
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.4.2", "@fortawesome/fontawesome-svg-core": "^6.4.2",

View File

@@ -1,5 +1,5 @@
{ {
"name": "pcs-ui", "name": "aviation-weather",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"scripts": { "scripts": {

View File

@@ -7,12 +7,20 @@ import '@fortawesome/fontawesome-svg-core/styles.css';
import { config } from '@fortawesome/fontawesome-svg-core'; import { config } from '@fortawesome/fontawesome-svg-core';
config.autoAddCss = false; /* eslint-disable import/first */ config.autoAddCss = false; /* eslint-disable import/first */
import 'styles/globals.css'; import 'styles/globals.css';
import Link from 'next/link';
export default function RootLayout({ children }: { children: React.ReactNode }) { export default function RootLayout({ children }: { children: React.ReactNode }) {
return ( return (
<html lang="en"> <html lang="en">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" /> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
<head>
<title>Aviation Weather</title>
</head>
<body className='bg-gray-600'> <body className='bg-gray-600'>
<div className="flex justify-between bg-gray-700 px-4 py-1 sm:px-6 select-none">
<h3 className="text-lg font-bold leading-6 text-gray-200">Aviation Weather</h3>
<Link className='text-base text-gray-200' href={'/profile'}>Profile</Link>
</div>
<RecoilRootWrapper>{children}</RecoilRootWrapper> <RecoilRootWrapper>{children}</RecoilRootWrapper>
</body> </body>
</html> </html>

View File

@@ -26,9 +26,6 @@ export default function Page() {
return <> return <>
<div className="bg-gray-700 px-4 py-1 sm:px-6">
<h3 className="text-lg font-bold leading-6 text-gray-200">Metar Map</h3>
</div>
<div> <div>
<Metar/> <Metar/>
</div> </div>

3
src/app/user/page.tsx Normal file
View File

@@ -0,0 +1,3 @@
export default function Profile() {
}

View File

@@ -4,6 +4,7 @@ import { Metar } from '@/js/weather';
import { faArrowsSpin, faLocationArrow, faLocationPin } from '@fortawesome/free-solid-svg-icons'; import { faArrowsSpin, faLocationArrow, faLocationPin } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { DivIcon } from 'leaflet'; import { DivIcon } from 'leaflet';
import Link from 'next/link';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import ReactDOMServer from 'react-dom/server'; import ReactDOMServer from 'react-dom/server';
import { MapContainer, Marker, Popup, TileLayer, Tooltip, useMapEvents } from 'react-leaflet'; import { MapContainer, Marker, Popup, TileLayer, Tooltip, useMapEvents } from 'react-leaflet';
@@ -117,9 +118,9 @@ function MapTiles({ airports }: {airports: 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> <Popup>
<div className="min-w-0 flex-1 select-none"> <div className="min-w-0 flex-1 select-none">
{/* <Link href={`/airport/${airport.icao}`}> */} <Link href={`/airport/${airport.icao}`}>
<h1 className="text-lg 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> */} </Link>
<hr/> <hr/>
<p className='text-sm font-medium text-gray-500'>{airport.metar?.raw_text}</p> <p className='text-sm font-medium text-gray-500'>{airport.metar?.raw_text}</p>
<div className='mt-2 flex'> <div className='mt-2 flex'>