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

Fixed some styling issues, fixed icons

Browse Source
This commit is contained in:
Ben Sherriff
2023-09-29 00:18:48 -04:00
parent 28886eb93b
commit 240aae606b
9 changed files with 145 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
ui/src/app/airport/[icao]/page.tsx
View File

@@ -1,8 +1,22 @@
import { getAirport } from '@/api/airport';
import Link from 'next/link';
'use client';
export default async function Page({ params }: { params: { icao: string } }) {
import { getAirport } from '@/api/airport';
import { Airport } from '@/api/airport.types';
import Link from 'next/link';
import { useEffect, useState } from 'react';
export default function Page({ params }: { params: { icao: string } }) {
const [airport, setAirport] = useState<Airport | undefined>(undefined);
useEffect(() => {
async function loadAirport() {
const { data: airport } = await getAirport({ icao: params.icao });
setAirport(airport);
}
loadAirport();
}, []);
if (airport) {
return (
<>
<div className=''>
@@ -11,4 +25,7 @@ export default async function Page({ params }: { params: { icao: string } }) {
</div>
</>
);
} else {
return <></>;
}
}

1
ui/src/app/page.tsx
View File

@@ -3,4 +3,5 @@ import Metar from '@/components/Metars';
export default function Page() {
return <Metar />;
// return <></>;
}

64
ui/src/components/Metars/MapTiles.tsx
View File

@@ -8,7 +8,7 @@ import { useEffect, useState } from 'react';
import ReactDOMServer from 'react-dom/server';
import { Marker, TileLayer, Tooltip, useMap, useMapEvents } from 'react-leaflet';
import MetarModal from './MetarModal';
import { BsCircle, BsCircleFill } from 'react-icons/bs';
import { Avatar, MantineProvider } from '@mantine/core';
export default function MapTiles() {
const [isOpen, setIsOpen] = useState(false);
@@ -60,20 +60,10 @@ export default function MapTiles() {
}
function iconSize() {
if (zoomLevel <= 4) {
return 'text-xs';
} else if (zoomLevel <= 5) {
return 'text-sm';
} else if (zoomLevel <= 6) {
return 'text-base';
} else if (zoomLevel <= 7) {
return 'text-lg';
} else if (zoomLevel <= 9) {
return 'text-2xl';
} else if (zoomLevel <= 11) {
return 'text-3xl';
} else if (zoomLevel >= 12) {
return 'text-4xl';
if (zoomLevel <= 5) {
return 'xs';
} else {
return 'sm';
}
}
@@ -81,46 +71,56 @@ export default function MapTiles() {
if (airport.metar?.flight_category == 'VFR') {
return new DivIcon({
html: ReactDOMServer.renderToString(
<div>
<BsCircle className={`${iconSize()} rounded-full bg-emerald-700`} />
<span className={`${iconSize()} text-white`}>V</span>
</div>
<MantineProvider>
<Avatar variant='filled' color='green' radius='xl' size={iconSize()}>
V
</Avatar>
</MantineProvider>
),
className: 'metar-marker-icon'
});
} else if (airport.metar?.flight_category == 'MVFR') {
return new DivIcon({
html: ReactDOMServer.renderToString(
<div>
<BsCircle className={`${iconSize()} rounded-full bg-blue-700`} />
<span className={`${iconSize()} text-white`}>M</span>
</div>
<MantineProvider>
<Avatar variant='filled' color='blue' radius='xl' size={iconSize()}>
M
</Avatar>
</MantineProvider>
),
className: 'metar-marker-icon'
});
} else if (airport.metar?.flight_category == 'IFR') {
return new DivIcon({
html: ReactDOMServer.renderToString(
<div>
<BsCircle className={`${iconSize()} rounded-full bg-red-700`} />
<span className={`${iconSize()} text-white`}>I</span>
</div>
<MantineProvider>
<Avatar variant='filled' color='red' radius='xl' size={iconSize()}>
I
</Avatar>
</MantineProvider>
),
className: 'metar-marker-icon'
});
} else if (airport.metar?.flight_category == 'LIFR') {
return new DivIcon({
html: ReactDOMServer.renderToString(
<div>
<BsCircle className={`${iconSize()} rounded-full bg-purple-700`} />
<span className={`${iconSize()} text-white`}>L</span>
</div>
<MantineProvider>
<Avatar variant='filled' color='purple' radius='xl' size={iconSize()}>
L
</Avatar>
</MantineProvider>
),
className: 'metar-marker-icon'
});
} else {
return new DivIcon({
html: ReactDOMServer.renderToString(<BsCircleFill className={`text-black`} />),
html: ReactDOMServer.renderToString(
<MantineProvider>
<Avatar variant='filled' color='black' radius='xl' size={iconSize()}>
U
</Avatar>
</MantineProvider>
),
className: 'metar-marker-icon'
});
}

5
ui/src/components/Metars/MetarMap.tsx
View File

@@ -2,8 +2,9 @@
import { MapContainer } from 'react-leaflet';
import MapTiles from './MapTiles';
import './metars.css';
export default function Map({ className = '' }: { className?: string }) {
export default function Map() {
return (
<>
<MapContainer
@@ -13,7 +14,7 @@ export default function Map({ className = '' }: { className?: string }) {
minZoom={3} // Zoomed out
id='map-container'
style={{ height: '94.5vh' }}
className={`${className} overflow-y-hidden overflow-x-hidden`}
className={`overflow-y-hidden overflow-x-hidden`}
attributionControl={false}
>
<MapTiles />

31
ui/src/components/Metars/MetarModal.tsx
View File

@@ -5,9 +5,16 @@ import { Metar } from '@/api/metar.types';
import { FaArrowsSpin, FaLocationArrow } from 'react-icons/fa6';
import Link from 'next/link';
import { AiFillStar, AiOutlineStar } from 'react-icons/ai';
import { BsFillCloudRainFill, BsFillCloudRainHeavyFill, BsFillCloudSleetFill, BsFillCloudSnowFill, BsQuestionLg } from 'react-icons/bs';
import {
BsFillCloudRainFill,
BsFillCloudRainHeavyFill,
BsFillCloudSleetFill,
BsFillCloudSnowFill,
BsQuestionLg
} from 'react-icons/bs';
import { useState } from 'react';
import { Grid, Modal, Tooltip } from '@mantine/core';
import './metars.css';
interface MetarModalProps {
airport: Airport;
@@ -23,31 +30,17 @@ export default function MetarModal({ airport, isOpen, onClose }: MetarModalProps
}
return (
<Modal
title={
<span className='flex justify-between'>
<Modal opened={isOpen} onClose={onClose} withCloseButton={false} size={'55rem'} className='modal'>
<span className='title'>
<Link href={`/airport/${airport.icao}`}>
{airport.icao} {airport.full_name}
</Link>
{isFavorite ? (
<AiFillStar
size={24}
className='cursor-pointer text-blue-500 hover:text-blue-400'
onClick={() => handleFavorite(false)}
/>
<AiFillStar size={24} className='star' onClick={() => handleFavorite(false)} />
) : (
<AiOutlineStar
size={24}
className='cursor-pointer text-blue-500 hover:text-blue-400'
onClick={() => handleFavorite(true)}
/>
<AiOutlineStar size={24} className='star' onClick={() => handleFavorite(true)} />
)}
</span>
}
opened={isOpen}
onClose={onClose}
className='select-none'
>
<div className='min-w-0 flex-1'>
<hr />
{airport.metar && <MetarInfo metar={airport.metar} />}

4
ui/src/components/Metars/index.tsx
View File

@@ -1,7 +1,7 @@
import { Metar } from '@/api/metar.types';
import dynamic from 'next/dynamic';
export default async function Metar({ className = '' }: { className?: string }) {
export default async function Metar() {
const Map = dynamic(() => import('@/components/Metars/MetarMap'), {
loading: () => (
<div className='grid min-h-full place-items-center px-6 py-24 sm:py-32 lg:px-8'>
@@ -12,5 +12,5 @@ export default async function Metar({ className = '' }: { className?: string })
),
ssr: false
});
return <Map className={className} />;
return <Map />;
}

18
ui/src/components/Metars/metars.css Normal file
View File

@@ -0,0 +1,18 @@
/* https://stackoverflow.com/questions/55291179/how-to-overlay-content-on-react-leaflet-z-index-problem */
.leaflet-control { z-index: 0 !important}
.leaflet-pane { z-index: 0 !important}
.leaflet-top, .leaflet-bottom {z-index: 0 !important}
.modal {
user-select: none;
}
.modal .title {
display: flex;
width: 100%;
justify-content: space-between;
}
.modal .star {
cursor: pointer;
}

21
ui/src/components/Topbar/index.tsx
View File

@@ -4,13 +4,14 @@ import Link from 'next/link';
import { AiOutlineUser } from 'react-icons/ai';
import { useState } from 'react';
import { getAirports } from '@/api/airport';
import { useRouter } from 'next/navigation';
// import { useRouter } from 'next/navigation';
import { Autocomplete, Avatar } from '@mantine/core';
import './topbar.css';
export default function Topbar() {
const [searchValue, setSearchValue] = useState('');
const [airports, setAirports] = useState<{ key: string; value: string; label: string }[]>([]);
const router = useRouter();
// const router = useRouter();
async function onChange(value: string) {
setSearchValue(value);
@@ -24,16 +25,17 @@ export default function Topbar() {
);
}
function onClick(value: string) {
router.push(`/airport/${value}`);
}
// function onClick(value: string) {
// router.push(`/airport/${value}`);
// }
return (
<nav style={{ display: 'flex', justifyContent: 'space-between' }}>
<div style={{ display: 'flex' }}>
<Link href={'/'} style={{ paddingLeft: '2em', paddingRight: '2em', margin: 'auto' }}>
<nav className='navbar'>
<div className='left'>
<Link href={'/'} className='title'>
<span>Aviation Weather</span>
</Link>
<div className='search'>
<Autocomplete
autoFocus
radius='xl'
@@ -45,7 +47,8 @@ export default function Topbar() {
onBlur={() => setSearchValue('')}
/>
</div>
<Link className='' href={'/profile'}>
</div>
<Link className='avatar' href={'/profile'}>
<Avatar>
<AiOutlineUser />
</Avatar>

19
ui/src/components/Topbar/topbar.css Normal file
View File

@@ -0,0 +1,19 @@
.navbar {
display: flex;
justify-content: space-between;
height: 46px;
}
.navbar .left {
display: flex;
}
.navbar .title {
padding-left: 2em;
padding-right: 2em;
margin: auto;
}
.navbar .left .search {
margin: auto;
}