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

Updated UI with accounts and fixed routing

Browse Source
This commit is contained in:
Ben Sherriff
2025-04-13 21:35:08 -04:00
parent d5bc4cafb8
commit 592de030c8
24 changed files with 256 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
ui/src/App.css
View File

@@ -1,14 +1,3 @@
/* Ensure that the html and body take up the full height */
html,
body,
#root,
.App {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
/* Set up Flexbox layout */
.App {
display: flex;
@@ -16,11 +5,6 @@ body,
height: 100%;
}
.app-header {
background-color: #333;
color: #fff;
}
.map-wrapper {
flex: 1;
}

3
ui/src/App.tsx
View File

@@ -12,7 +12,6 @@ import { useEffect, useState } from 'react';
import { Airport } from '@lib/airport.types.ts';
import AirportDrawer from '@components/AirportDrawer.tsx';
import { getWeatherMapUrl } from '@lib/rainViewer.ts';
// import { IconRadar } from '@tabler/icons-react';
import Cookies from 'js-cookie';
import { UnstyledButton } from '@mantine/core';
// Fix Leaflet's default icon path issues with Webpack
@@ -107,7 +106,7 @@ function App() {
style={{ bottom: '80px' }}
className={`map-button ${showRadar ? 'active' : ''}`}
>
Radar
R
</UnstyledButton>
</div>
</div>

18
ui/src/components/Administration.tsx Normal file
View File

@@ -0,0 +1,18 @@
import { Header } from '@components/Header';
import { Navigate } from 'react-router';
import { useUserContext } from '@components/context/UserContext.tsx';
export function Administration() {
const { user } = useUserContext();
if (user == undefined) {
return <Navigate to={'/'} />;
}
return (
<>
<Header />
Todo: administration {user?.email}
</>
);
}

27
ui/src/components/AirportMarker.tsx
View File

@@ -34,18 +34,18 @@ export default function AirportMarker({
);
}
function getMarkerColor(flightCategory: 'VFR' | 'MVFR' | 'LIFR' | 'IFR' | 'UNKN'): string {
function getMarkerInfo(flightCategory: 'VFR' | 'MVFR' | 'LIFR' | 'IFR' | 'UNKN'): [string, number] {
switch (flightCategory) {
case 'IFR':
return '#ff0100';
return ['#ff0100', 5];
case 'LIFR':
return '#7f007f';
return ['#7f007f', 6];
case 'MVFR':
return '#00f';
return ['#00f', 7];
case 'VFR':
return '#018000';
return ['#018000', 8];
case 'UNKN':
return '#696969';
return ['#696969', 4];
}
}
@@ -61,7 +61,8 @@ function createCustomIcon(airport: Airport): L.DivIcon {
background-color: white;
display: flex;
align-items: center;
justify-content: center;">
justify-content: center;
z-index: {info[1]}">
<span style="color: black; font-size: 8px; font-weight: bold;">H</span>
</div>
`,
@@ -72,15 +73,16 @@ function createCustomIcon(airport: Airport): L.DivIcon {
} else {
// Default to a filled circle.
const flightCategory = airport.latest_metar?.flight_category || 'UNKN';
const color = getMarkerColor(flightCategory);
const info = getMarkerInfo(flightCategory);
if (flightCategory == 'UNKN') {
return L.divIcon({
html: `
<div style="
background-color: ${color};
background-color: ${info[0]};
width: 10px;
height: 10px;
border-radius: 50%;">
border-radius: 50%;
z-index: {info[1]}">
</div>
`,
className: '',
@@ -91,11 +93,12 @@ function createCustomIcon(airport: Airport): L.DivIcon {
return L.divIcon({
html: `
<div style="
background-color: ${color};
background-color: ${info[0]};
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid #fff;">
border: 2px solid #fff;
z-index: {info[1]}">
</div>
`,
className: '',

2
ui/src/components/Header/HeaderModal.tsx
View File

@@ -157,7 +157,7 @@ export function HeaderModal({ type, toggle, login, register }: HeaderModalProps)
/>
<PasswordInput
label='Password'
description='Passwords must be at least 10 characters long, contain at least one number, one uppercase letter, one lowercase letter, and one special character.'
description='Passwords must be at least 8 characters long, contain at least one number, one uppercase letter, one lowercase letter, and one special character.'
placeholder='Your password'
required
mt='md'

9
ui/src/components/Header/HeaderUser.tsx
View File

@@ -1,6 +1,7 @@
import { User } from '@/lib/account.types';
// import { setPicture } from "@/api/users";
import { Menu, UnstyledButton, Group, Avatar, Card, FileButton, Grid, Button, Text } from '@mantine/core';
import { useNavigate } from 'react-router';
// import './styles.css';
interface HeaderUserProps {
@@ -10,6 +11,8 @@ interface HeaderUserProps {
}
export default function HeaderUser({ user, profilePicture, logout }: HeaderUserProps) {
const navigate = useNavigate();
return (
<Menu shadow='md' width={200} openDelay={100} closeDelay={400} zIndex={1000}>
<Menu.Target>
@@ -66,7 +69,7 @@ export default function HeaderUser({ user, profilePicture, logout }: HeaderUserP
</Text>
<Grid mt='xl'>
<Grid.Col span={6}>
<Button fullWidth radius='md' size='xs' variant='default'>
<Button fullWidth radius='md' size='xs' variant='default' onClick={() => navigate('/profile')}>
Profile
</Button>
</Grid.Col>
@@ -75,9 +78,9 @@ export default function HeaderUser({ user, profilePicture, logout }: HeaderUserP
Logout
</Button>
</Grid.Col>
{user.role == 'admin' && (
{user.role == 'ADMIN' && (
<Grid.Col span={12}>
<Button fullWidth radius='md' size='xs' variant='default'>
<Button fullWidth radius='md' size='xs' variant='default' onClick={() => navigate('/administration')}>
Administration
</Button>
</Grid.Col>

17
ui/src/components/Header/index.tsx
View File

@@ -1,13 +1,12 @@
import { useState } from 'react';
import { Avatar, Box, Burger, Button, Group, Text } from '@mantine/core';
import { useDisclosure, useToggle } from '@mantine/hooks';
import classes from './Header.module.css';
import { HeaderModal } from '@components/Header/HeaderModal.tsx';
import { notifications } from '@mantine/notifications';
import Cookies from 'js-cookie';
import { User } from '@lib/account.types.ts';
import { login, logout, register } from '@lib/account.ts';
import HeaderUser from '@components/Header/HeaderUser.tsx';
import { useUserContext } from '@components/context/UserContext.tsx';
import { Link } from 'react-router';
// const links = [
// { link: '/', label: 'Map' },
@@ -16,9 +15,9 @@ import HeaderUser from '@components/Header/HeaderUser.tsx';
// ];
export function Header() {
const { user, setUser } = useUserContext();
const [opened, { toggle }] = useDisclosure(false);
const [modalType, modalToggle] = useToggle([undefined, 'login', 'register', 'reset']);
const [user, setUser] = useState<User | undefined>(undefined);
// const [active, setActive] = useState(links[0].link);
// const navItems = links.map((link) => (
@@ -62,8 +61,8 @@ export function Header() {
async function logoutUser(): Promise<void> {
await logout();
Cookies.remove('logged_in');
setUser(undefined);
window.location.reload();
}
async function registerUser({
@@ -131,12 +130,14 @@ export function Header() {
<Box>
<header className={classes.header}>
<Group justify='space-between' h='100%'>
<Burger opened={opened} onClick={toggle} hiddenFrom='sm' size='sm' />
<Group align='center' gap='xs'>
<Burger opened={opened} onClick={toggle} hiddenFrom='xs' size='sm' />
<Avatar src='/logo.svg' alt='logo' />
<Link to='/'>
<Avatar src='/logo.svg' alt='logo' onClick={toggle} />
</Link>
<Text>Aviation Data</Text>
</Group>
{/*<Group gap={5} visibleFrom='xs' className={classes.navGroup}>*/}
{/*<Group gap={5} visibleFrom='sm' className={classes.navGroup}>*/}
{/* {navItems}*/}
{/*</Group>*/}
<Group align='center' gap='xs'>

18
ui/src/components/Profile.tsx Normal file
View File

@@ -0,0 +1,18 @@
import { Header } from '@components/Header';
import { useUserContext } from '@components/context/UserContext.tsx';
import { Navigate } from 'react-router';
export function Profile() {
const { user } = useUserContext();
if (user == undefined) {
return <Navigate to={'/'} />;
}
return (
<>
<Header />
Todo: profile {user?.email}
</>
);
}

18
ui/src/components/context/UserContext.tsx Normal file
View File

@@ -0,0 +1,18 @@
import { User } from '@lib/account.types.ts';
import { createContext, useContext } from 'react';
interface UserContextType {
user?: User;
setUser: (user: User | undefined) => void;
loading: boolean;
}
export const UserContext = createContext<UserContextType>({
user: undefined,
setUser: () => {},
loading: true
});
export function useUserContext(): UserContextType {
return useContext(UserContext);
}

33
ui/src/components/context/UserProvider.tsx Normal file
View File

@@ -0,0 +1,33 @@
import { ReactNode, useEffect, useState } from 'react';
import { UserContext } from './UserContext.tsx';
import { refresh } from '@lib/account.ts';
import { User } from '@lib/account.types.ts';
import { Center, Loader } from '@mantine/core';
export function UserProvider({ children }: { children: ReactNode }) {
const [user, setUser] = useState<User | undefined>(undefined);
const [loading, setLoading] = useState(true);
useEffect(() => {
refresh().then((refreshUser) => {
if (refreshUser) {
setUser(refreshUser);
} else {
setUser(undefined);
}
setLoading(false);
});
}, []);
return (
<UserContext.Provider value={{ user, setUser, loading }}>
{loading ? (
<Center style={{ height: '100vh' }}>
<Loader size='xl' />
</Center>
) : (
<>{children}</>
)}
</UserContext.Provider>
);
}

9
ui/src/index.css
View File

@@ -0,0 +1,9 @@
/* Ensure that the html and body take up the full height */
html,
body,
#root {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}

36
ui/src/lib/account.ts
View File

@@ -1,6 +1,5 @@
import Cookies from 'js-cookie';
import { getRequest, postRequest } from '.';
import { RegisterUser, ResponseAuth, User } from './account.types';
import { RegisterUser, User } from './account.types';
export async function login(email: string, password: string): Promise<User | undefined> {
const response = await postRequest('account/login', { email, password });
@@ -24,40 +23,11 @@ export async function logout() {
return await postRequest('account/logout', {});
}
export async function refresh(refresh_token_rotation?: boolean): Promise<ResponseAuth | undefined> {
const response = await getRequest('account/refresh', { refresh_token_rotation });
export async function refresh(): Promise<User | undefined> {
const response = await getRequest('account/session');
if (response?.status === 200) {
return response.json();
} else {
return undefined;
}
}
export async function me(): Promise<ResponseAuth | undefined> {
const response = await getRequest('account/me');
if (response?.status === 200) {
return response.json();
} else {
return undefined;
}
}
/**
* Refreshes the logged_in cookie every interval. By default, the interval is 14 minutes.
* @param interval
* @returns interval id
*/
export function refreshLoggedIn(interval = 840000) {
let loggedIn = Cookies.get('logged_in');
const id = setInterval(async () => {
const cookie = Cookies.get('logged_in');
if (cookie != loggedIn) {
loggedIn = cookie;
const response = await refresh(true);
if (!response) {
Cookies.remove('logged_in');
}
}
}, interval);
return id;
}

5
ui/src/lib/account.types.ts
View File

@@ -1,8 +1,3 @@
export interface ResponseAuth {
token: string;
user: User;
}
export interface RegisterUser {
email: string;
password: string;

20
ui/src/main.tsx
View File

@@ -4,6 +4,10 @@ import './index.css';
import App from './App.tsx';
import { createTheme, MantineProvider } from '@mantine/core';
import { Notifications } from '@mantine/notifications';
import { UserProvider } from '@components/context/UserProvider.tsx';
import { BrowserRouter, Route, Routes } from 'react-router';
import { Profile } from '@components/Profile.tsx';
import { Administration } from '@components/Administration.tsx';
const theme = createTheme({
fontFamily: 'Inter, sans-serif'
@@ -11,9 +15,17 @@ const theme = createTheme({
createRoot(document.getElementById('root')!).render(
<StrictMode>
<MantineProvider theme={theme} defaultColorScheme={'dark'}>
<Notifications zIndex={2000} />
<App />
</MantineProvider>
<BrowserRouter>
<MantineProvider theme={theme} defaultColorScheme={'dark'}>
<Notifications zIndex={2000} />
<UserProvider>
<Routes>
<Route path='/' element={<App />} />
<Route path='/profile' element={<Profile />} />
<Route path='/administration' element={<Administration />} />
</Routes>
</UserProvider>
</MantineProvider>
</BrowserRouter>
</StrictMode>
);