Updated airport data, fixed loader/header
This commit is contained in:
@@ -5,18 +5,14 @@ const nextConfig = {
|
||||
eslint: {
|
||||
ignoreDuringBuilds: true
|
||||
},
|
||||
// webpackDevMiddleware: (config) => {
|
||||
// config.watchOptions = {
|
||||
// poll: 1000,
|
||||
// aggregateTimeout: 300
|
||||
// };
|
||||
// return config;
|
||||
// },
|
||||
publicRuntimeConfig: {
|
||||
// remove private variables from processEnv
|
||||
processEnv: Object.fromEntries(Object.entries(process.env).filter(([key]) => key.includes('NEXT_PUBLIC_')))
|
||||
},
|
||||
output: 'standalone'
|
||||
output: 'standalone',
|
||||
experimental: {
|
||||
optimizePackageImports: ['@mantine/core', '@mantine/hooks'],
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = nextConfig;
|
||||
|
||||
9
ui/package-lock.json
generated
9
ui/package-lock.json
generated
@@ -38,7 +38,8 @@
|
||||
"eslint-plugin-prettier": "^5.1.0",
|
||||
"postcss": "^8.4.32",
|
||||
"postcss-import": "^15.1.0",
|
||||
"postcss-preset-mantine": "^1.12.0",
|
||||
"postcss-preset-mantine": "^1.12.1",
|
||||
"postcss-simple-vars": "^7.0.1",
|
||||
"prettier": "^3.1.1",
|
||||
"typescript": "5.3.3"
|
||||
}
|
||||
@@ -4034,9 +4035,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-preset-mantine": {
|
||||
"version": "1.12.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-preset-mantine/-/postcss-preset-mantine-1.12.0.tgz",
|
||||
"integrity": "sha512-WLsejZoNtsrpOEi/CItn98e+4NpgT/Av28XWfY0CqiWgd2NDOOxtEUNdPGtB33pGLwaV8FrhTpIhAIO8palTOw==",
|
||||
"version": "1.12.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-preset-mantine/-/postcss-preset-mantine-1.12.1.tgz",
|
||||
"integrity": "sha512-N1biscmlvJHYPWN6znrlFre80wh9baAaMETfERn8acQJykioGYmHIJLpQSwUSxqq/PG8QbayUyOnHgBV/tsZyA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"postcss-mixins": "^9.0.4",
|
||||
|
||||
@@ -39,7 +39,8 @@
|
||||
"eslint-plugin-prettier": "^5.1.0",
|
||||
"postcss": "^8.4.32",
|
||||
"postcss-import": "^15.1.0",
|
||||
"postcss-preset-mantine": "^1.12.0",
|
||||
"postcss-preset-mantine": "^1.12.1",
|
||||
"postcss-simple-vars": "^7.0.1",
|
||||
"prettier": "^3.1.1",
|
||||
"typescript": "5.3.3"
|
||||
}
|
||||
|
||||
@@ -1,6 +1,15 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
'postcss-preset-mantine': {},
|
||||
'postcss-simple-vars': {
|
||||
variables: {
|
||||
'mantine-breakpoint-xs': '36em',
|
||||
'mantine-breakpoint-sm': '48em',
|
||||
'mantine-breakpoint-md': '62em',
|
||||
'mantine-breakpoint-lg': '75em',
|
||||
'mantine-breakpoint-xl': '88em',
|
||||
},
|
||||
},
|
||||
'postcss-import': {},
|
||||
autoprefixer: {}
|
||||
}
|
||||
|
||||
7
ui/public/icons/VFR.svg
Normal file
7
ui/public/icons/VFR.svg
Normal file
@@ -0,0 +1,7 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="svg874" width="185.96mm" height="185.96mm" version="1.1" viewBox="0 0 185.96 185.96" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle id="path1419" cx="92.99" cy="92.983" r="92.982" fill="#28a745"/>
|
||||
<g id="text1423" fill="#fff" stroke-width="13.795" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal" aria-label="V">
|
||||
<path id="path821" d="m120.94 45.222h17.819l-36.787 105.05h-18.106l-36.644-105.05h17.675l21.914 65.312q1.7244 4.6703 3.6644 12.071 1.94 7.3288 2.5148 10.921 0.93406-5.4606 2.874-12.646 1.94-7.1851 3.1614-10.634z" fill="#fff" stroke-width="13.795"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 695 B |
12
ui/public/icons/ifr.svg
Normal file
12
ui/public/icons/ifr.svg
Normal file
@@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g transform="matrix(2.5585,0,0,2.52891,-36.3432,-32.3701)">
|
||||
<ellipse cx="39.22" cy="38.107" rx="25.015" ry="25.307" style="fill:rgb(255,0,0);"/>
|
||||
</g>
|
||||
<g transform="matrix(130.653,0,0,130.653,45.627,110.762)">
|
||||
<g transform="matrix(1,0,0,1,0.277832,0)">
|
||||
</g>
|
||||
<text x="0px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:1px;fill:white;">I</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 871 B |
12
ui/public/icons/lifr.svg
Normal file
12
ui/public/icons/lifr.svg
Normal file
@@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g transform="matrix(2.5585,0,0,2.52891,-36.3432,-32.3701)">
|
||||
<ellipse cx="39.22" cy="38.107" rx="25.015" ry="25.307" style="fill:rgb(128,0,128);"/>
|
||||
</g>
|
||||
<g transform="matrix(128.435,0,0,128.435,25.8707,109.968)">
|
||||
<g transform="matrix(1,0,0,1,0.556152,0)">
|
||||
</g>
|
||||
<text x="0px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:1px;fill:white;">L</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 874 B |
12
ui/public/icons/mvfr.svg
Normal file
12
ui/public/icons/mvfr.svg
Normal file
@@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g transform="matrix(2.5585,0,0,2.52891,-36.3432,-32.3701)">
|
||||
<ellipse cx="39.22" cy="38.107" rx="25.015" ry="25.307" style="fill:rgb(0,0,255);"/>
|
||||
</g>
|
||||
<g transform="matrix(238.636,0,0,238.636,-4483.2,-6772.13)">
|
||||
<g transform="matrix(0.50957,0,0,0.50957,19.2676,28.829)">
|
||||
</g>
|
||||
<text x="18.843px" y="28.829px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:0.51px;fill:white;">M</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 902 B |
12
ui/public/icons/unkn.svg
Normal file
12
ui/public/icons/unkn.svg
Normal file
@@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g transform="matrix(2.5585,0,0,2.52891,-36.3432,-32.3701)">
|
||||
<ellipse cx="39.22" cy="38.107" rx="25.015" ry="25.307" style="fill:rgb(62,62,62);"/>
|
||||
</g>
|
||||
<g transform="matrix(238.636,0,0,238.636,-4476.43,-6772.87)">
|
||||
<g transform="matrix(0.50957,0,0,0.50957,19.2111,28.829)">
|
||||
</g>
|
||||
<text x="18.843px" y="28.829px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:0.51px;fill:white;">U</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 904 B |
@@ -1,34 +1,32 @@
|
||||
import React from 'react';
|
||||
import RecoilRootWrapper from '@app/recoil-root-wrapper';
|
||||
import Header from '@/components/Header';
|
||||
import { Inter } from 'next/font/google';
|
||||
import { MantineProvider } from '@mantine/core';
|
||||
import { ModalsProvider } from '@mantine/modals';
|
||||
import 'styles/globals.css';
|
||||
import 'styles/leaflet.css';
|
||||
import '@mantine/core/styles.css';
|
||||
import { Notifications } from '@mantine/notifications';
|
||||
import Loader from '@/components/Loader';
|
||||
|
||||
export const metadata = {
|
||||
title: 'Aviation Weather',
|
||||
description: ''
|
||||
};
|
||||
|
||||
const inter = Inter({ subsets: ['latin'] });
|
||||
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html lang='en' className='h-full bg-white'>
|
||||
<html lang='en'>
|
||||
<head>
|
||||
<title>Aviation Weather</title>
|
||||
</head>
|
||||
<body className={`${inter.className} wrapper h-full`}>
|
||||
<body>
|
||||
<MantineProvider>
|
||||
<Notifications />
|
||||
<ModalsProvider>
|
||||
<RecoilRootWrapper>
|
||||
<Header />
|
||||
{children}
|
||||
<Loader>
|
||||
{children}
|
||||
</Loader>
|
||||
</RecoilRootWrapper>
|
||||
</ModalsProvider>
|
||||
</MantineProvider>
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
'use client';
|
||||
|
||||
import { login, register, refreshLoggedIn } from '@/api/auth';
|
||||
import { User } from '@/api/auth.types';
|
||||
import {
|
||||
Modal,
|
||||
Container,
|
||||
@@ -16,16 +14,15 @@ import {
|
||||
Text
|
||||
} from '@mantine/core';
|
||||
import { useForm } from '@mantine/form';
|
||||
import { notifications } from '@mantine/notifications';
|
||||
|
||||
interface HeaderModalProps {
|
||||
type?: string;
|
||||
toggle: any;
|
||||
setUser: (user: User) => void;
|
||||
setRefreshId: (id: NodeJS.Timeout) => void;
|
||||
login: ({ email, password }: { email: string, password: string }) => Promise<boolean>;
|
||||
register: ({ firstName, lastName, email, password }: { firstName: string, lastName: string, email: string, password: string }) => Promise<boolean>;
|
||||
}
|
||||
|
||||
export function HeaderModal({ type, toggle, setUser, setRefreshId }: HeaderModalProps) {
|
||||
export function HeaderModal({ type, toggle, login, register }: HeaderModalProps) {
|
||||
function passwordValidator(value: string) {
|
||||
if (value.trim().length < 10) {
|
||||
return 'Password must be at least 10 characters';
|
||||
@@ -129,52 +126,9 @@ export function HeaderModal({ type, toggle, setUser, setRefreshId }: HeaderModal
|
||||
<Paper withBorder shadow='md' p={30} mt={30} radius='md'>
|
||||
<form
|
||||
onSubmit={registerForm.onSubmit(async (values) => {
|
||||
const id = notifications.show({
|
||||
loading: true,
|
||||
title: `Creating account`,
|
||||
message: `Please wait...`,
|
||||
autoClose: false,
|
||||
withCloseButton: false
|
||||
});
|
||||
const registerResponse = await register({
|
||||
first_name: values.firstName,
|
||||
last_name: values.lastName,
|
||||
email: values.email,
|
||||
password: values.password
|
||||
});
|
||||
if (registerResponse) {
|
||||
const loginResponse = await login(values.email, values.password);
|
||||
if (loginResponse) {
|
||||
setUser(loginResponse.user);
|
||||
setRefreshId(refreshLoggedIn());
|
||||
onClose();
|
||||
notifications.update({
|
||||
id,
|
||||
title: `Account created`,
|
||||
message: `Welcome ${loginResponse.user.first_name}!`,
|
||||
color: 'green',
|
||||
autoClose: 2000,
|
||||
loading: false
|
||||
});
|
||||
} else {
|
||||
notifications.update({
|
||||
id,
|
||||
title: `Unable to Login`,
|
||||
message: `Please try again.`,
|
||||
color: 'red',
|
||||
autoClose: 2000,
|
||||
loading: false
|
||||
});
|
||||
}
|
||||
} else {
|
||||
notifications.update({
|
||||
id,
|
||||
title: `Unable to Register`,
|
||||
message: `Please try again.`,
|
||||
color: 'error',
|
||||
autoClose: 2000,
|
||||
loading: false
|
||||
});
|
||||
const success = await register(values);
|
||||
if (success) {
|
||||
onClose();
|
||||
}
|
||||
})}
|
||||
>
|
||||
@@ -219,18 +173,9 @@ export function HeaderModal({ type, toggle, setUser, setRefreshId }: HeaderModal
|
||||
<Paper withBorder shadow='md' p={30} mt={30} radius='md'>
|
||||
<form
|
||||
onSubmit={loginForm.onSubmit(async (values) => {
|
||||
const response = await login(values.email, values.password);
|
||||
if (response) {
|
||||
setUser(response.user);
|
||||
setRefreshId(refreshLoggedIn());
|
||||
const success = await login(values);
|
||||
if (success) {
|
||||
onClose();
|
||||
} else {
|
||||
notifications.show({
|
||||
title: `Unable to Login`,
|
||||
message: `Please try again.`,
|
||||
color: 'red',
|
||||
autoClose: 2000
|
||||
});
|
||||
}
|
||||
})}
|
||||
>
|
||||
|
||||
@@ -1,55 +1,31 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useState } from 'react';
|
||||
import { getAirport, getAirports } from '@/api/airport';
|
||||
import { Autocomplete, Avatar, Button, Card, FileButton, Grid, Group, Menu, Text, UnstyledButton } from '@mantine/core';
|
||||
import './header.css';
|
||||
import { refresh, refreshLoggedIn, logout } from '@/api/auth';
|
||||
import Cookies from 'js-cookie';
|
||||
import { useRecoilState } from 'recoil';
|
||||
import { userState } from '@/state/auth';
|
||||
import { getFavorites, getPicture, setPicture } from '@/api/users';
|
||||
import { SetterOrUpdater, useRecoilState } from 'recoil';
|
||||
import { setPicture } from '@/api/users';
|
||||
import { useToggle } from '@mantine/hooks';
|
||||
import { HeaderModal } from './HeaderModal';
|
||||
import { favoritesState } from '@/state/user';
|
||||
import { coordinatesState, zoomState } from '@/state/map';
|
||||
import { coordinatesState } from '@/state/map';
|
||||
import { User } from '@/api/auth.types';
|
||||
|
||||
export default function Header() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
interface HeaderProps {
|
||||
user: User | undefined;
|
||||
profilePicture: File | undefined;
|
||||
setProfilePicture: SetterOrUpdater<File | undefined>;
|
||||
login: ({ email, password }: { email: string, password: string }) => Promise<boolean>;
|
||||
logout: () => Promise<void>;
|
||||
register: ({ firstName, lastName, email, password }: { firstName: string, lastName: string, email: string, password: string }) => Promise<boolean>;
|
||||
}
|
||||
|
||||
export default function Header({ user, profilePicture, setProfilePicture, login, logout, register }: HeaderProps) {
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const [airports, setAirports] = useState<{ key: string; value: string; label: string }[]>([]);
|
||||
const [modalType, toggle] = useToggle([undefined, 'login', 'register', 'reset']);
|
||||
const [user, setUser] = useRecoilState(userState);
|
||||
const [favorites, setFavorites] = useRecoilState(favoritesState);
|
||||
const [refreshId, setRefreshId] = useState<NodeJS.Timeout | undefined>(undefined);
|
||||
const [profilePicture, setProfilePicture] = useState<File | null>(null);
|
||||
const [coordinates, setCoordinates] = useRecoilState(coordinatesState);
|
||||
const [zoom, setZoom] = useRecoilState(zoomState);
|
||||
|
||||
useEffect(() => {
|
||||
if (!user || !Cookies.get('logged_in')) {
|
||||
refresh().then((response) => {
|
||||
if (response) {
|
||||
setRefreshId(refreshLoggedIn());
|
||||
setUser(response.user);
|
||||
getFavorites().then((response) => {
|
||||
if (response) {
|
||||
setFavorites(response);
|
||||
}
|
||||
});
|
||||
if (response.user.profile_picture) {
|
||||
getPicture().then((response) => {
|
||||
if (response) {
|
||||
setProfilePicture(response as File);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
setLoading(false);
|
||||
}, [user]);
|
||||
const [_, setCoordinates] = useRecoilState(coordinatesState);
|
||||
|
||||
async function onChange(value: string) {
|
||||
setSearchValue(value);
|
||||
@@ -91,160 +67,130 @@ export default function Header() {
|
||||
</div>
|
||||
</div>
|
||||
<UserSection
|
||||
user={user}
|
||||
profilePicture={profilePicture}
|
||||
setProfilePicture={setProfilePicture}
|
||||
toggle={toggle}
|
||||
setFavorites={setFavorites}
|
||||
refreshId={refreshId}
|
||||
loading={loading}
|
||||
logout={logout}
|
||||
/>
|
||||
</nav>
|
||||
<HeaderModal
|
||||
type={modalType}
|
||||
toggle={toggle}
|
||||
setUser={(u) => {
|
||||
setUser(u);
|
||||
getFavorites().then((response) => {
|
||||
if (response) {
|
||||
setFavorites(response);
|
||||
}
|
||||
});
|
||||
if (u.profile_picture) {
|
||||
getPicture().then((response) => {
|
||||
if (response) {
|
||||
setProfilePicture(response as File);
|
||||
}
|
||||
});
|
||||
}
|
||||
}}
|
||||
setRefreshId={setRefreshId}
|
||||
login={login}
|
||||
register={register}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
interface UserSectionProps {
|
||||
profilePicture: File | null;
|
||||
setProfilePicture: (picture: File | null) => void;
|
||||
user: User | undefined;
|
||||
profilePicture: File | undefined;
|
||||
setProfilePicture: SetterOrUpdater<File | undefined>;
|
||||
toggle: (type: string) => void;
|
||||
setFavorites: (favorites: string[]) => void;
|
||||
refreshId: NodeJS.Timeout | undefined;
|
||||
loading: boolean;
|
||||
logout: () => Promise<void>;
|
||||
}
|
||||
|
||||
function UserSection({ profilePicture, setProfilePicture, setFavorites, refreshId, toggle, loading }: UserSectionProps) {
|
||||
const [user, setUser] = useRecoilState(userState);
|
||||
function UserSection({ user, profilePicture, setProfilePicture, logout, toggle }: UserSectionProps) {
|
||||
|
||||
return (
|
||||
<div className='user-section'>
|
||||
{loading ? (
|
||||
<></>
|
||||
) : (
|
||||
<>
|
||||
{user ? (
|
||||
<Menu shadow='md' width={200} openDelay={100} closeDelay={400}>
|
||||
<Menu.Target>
|
||||
<UnstyledButton className='user user-button'>
|
||||
<Group>
|
||||
<Avatar src={profilePicture ? URL.createObjectURL(profilePicture) : undefined} />
|
||||
<div style={{ flex: 1 }}>
|
||||
<Text size='sm' fw={500}>
|
||||
{user.first_name} {user.last_name}
|
||||
</Text>
|
||||
<Text c='dimmed' size='xs' style={{ textTransform: 'uppercase' }}>
|
||||
{user.role}
|
||||
</Text>
|
||||
</div>
|
||||
</Group>
|
||||
</UnstyledButton>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown p={0}>
|
||||
<Card>
|
||||
<Card.Section h={140} style={{ backgroundColor: '#4481e3' }} />
|
||||
<FileButton
|
||||
onChange={(payload) => {
|
||||
if (payload) {
|
||||
setPicture(payload).then((response) => {
|
||||
if (response) {
|
||||
setProfilePicture(payload);
|
||||
}
|
||||
});
|
||||
}
|
||||
}}
|
||||
accept='image/png,image/jpeg,image/jpg'
|
||||
multiple={false}
|
||||
>
|
||||
{(props) => (
|
||||
<Avatar
|
||||
{...props}
|
||||
component='button'
|
||||
size={80}
|
||||
radius={80}
|
||||
mx={'auto'}
|
||||
mt={-30}
|
||||
style={{ cursor: 'pointer' }}
|
||||
bg={profilePicture ? 'transparent' : 'white'}
|
||||
src={profilePicture ? URL.createObjectURL(profilePicture) : undefined}
|
||||
/>
|
||||
)}
|
||||
</FileButton>
|
||||
<Text ta='center' fz='lg' fw={500} mt='sm'>
|
||||
{user.first_name} {user.last_name}
|
||||
</Text>
|
||||
<Text ta='center' fz='sm' c='dimmed' style={{ textTransform: 'uppercase' }}>
|
||||
{user.role}
|
||||
</Text>
|
||||
<Grid mt='xl'>
|
||||
<Grid.Col span={6}>
|
||||
<Link href='/profile'>
|
||||
<>
|
||||
{user ? (
|
||||
<Menu shadow='md' width={200} openDelay={100} closeDelay={400}>
|
||||
<Menu.Target>
|
||||
<UnstyledButton className='user user-button'>
|
||||
<Group>
|
||||
<Avatar src={profilePicture ? URL.createObjectURL(profilePicture) : undefined} />
|
||||
<div style={{ flex: 1 }}>
|
||||
<Text size='sm' fw={500}>
|
||||
{user.first_name} {user.last_name}
|
||||
</Text>
|
||||
<Text c='dimmed' size='xs' style={{ textTransform: 'uppercase' }}>
|
||||
{user.role}
|
||||
</Text>
|
||||
</div>
|
||||
</Group>
|
||||
</UnstyledButton>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown p={0}>
|
||||
<Card>
|
||||
<Card.Section h={140} style={{ backgroundColor: '#4481e3' }} />
|
||||
<FileButton
|
||||
onChange={(payload) => {
|
||||
if (payload) {
|
||||
setPicture(payload).then((response) => {
|
||||
if (response) {
|
||||
setProfilePicture(payload);
|
||||
}
|
||||
});
|
||||
}
|
||||
}}
|
||||
accept='image/png,image/jpeg,image/jpg'
|
||||
multiple={false}
|
||||
>
|
||||
{(props) => (
|
||||
<Avatar
|
||||
{...props}
|
||||
component='button'
|
||||
size={80}
|
||||
radius={80}
|
||||
mx={'auto'}
|
||||
mt={-30}
|
||||
style={{ cursor: 'pointer' }}
|
||||
bg={profilePicture ? 'transparent' : 'white'}
|
||||
src={profilePicture ? URL.createObjectURL(profilePicture) : undefined}
|
||||
/>
|
||||
)}
|
||||
</FileButton>
|
||||
<Text ta='center' fz='lg' fw={500} mt='sm'>
|
||||
{user.first_name} {user.last_name}
|
||||
</Text>
|
||||
<Text ta='center' fz='sm' c='dimmed' style={{ textTransform: 'uppercase' }}>
|
||||
{user.role}
|
||||
</Text>
|
||||
<Grid mt='xl'>
|
||||
<Grid.Col span={6}>
|
||||
<Link href='/profile'>
|
||||
<Button fullWidth radius='md' size='xs' variant='default'>
|
||||
Profile
|
||||
</Button>
|
||||
</Link>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<Button
|
||||
fullWidth
|
||||
radius='md'
|
||||
size='xs'
|
||||
variant='default'
|
||||
onClick={logout}
|
||||
>
|
||||
Logout
|
||||
</Button>
|
||||
</Grid.Col>
|
||||
{user.role == 'admin' && (
|
||||
<Grid.Col span={12}>
|
||||
<Link href='/admin'>
|
||||
<Button fullWidth radius='md' size='xs' variant='default'>
|
||||
Profile
|
||||
Administration
|
||||
</Button>
|
||||
</Link>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<Button
|
||||
fullWidth
|
||||
radius='md'
|
||||
size='xs'
|
||||
variant='default'
|
||||
onClick={async () => {
|
||||
await logout();
|
||||
Cookies.remove('logged_in');
|
||||
setUser(undefined);
|
||||
setFavorites([]);
|
||||
setProfilePicture(null);
|
||||
if (refreshId) {
|
||||
clearInterval(refreshId);
|
||||
}
|
||||
}}
|
||||
>
|
||||
Logout
|
||||
</Button>
|
||||
</Grid.Col>
|
||||
{user.role == 'admin' && (
|
||||
<Grid.Col span={12}>
|
||||
<Link href='/admin'>
|
||||
<Button fullWidth radius='md' size='xs' variant='default'>
|
||||
Administration
|
||||
</Button>
|
||||
</Link>
|
||||
</Grid.Col>
|
||||
)}
|
||||
</Grid>
|
||||
</Card>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
) : (
|
||||
<Group className='user'>
|
||||
<Button onClick={() => toggle('login')}>Login</Button>
|
||||
<Button variant='outline' onClick={() => toggle('register')}>
|
||||
Sign up
|
||||
</Button>
|
||||
</Group>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
)}
|
||||
</Grid>
|
||||
</Card>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
) : (
|
||||
<Group className='user'>
|
||||
<Button onClick={() => toggle('login')}>Login</Button>
|
||||
<Button variant='outline' onClick={() => toggle('register')}>
|
||||
Sign up
|
||||
</Button>
|
||||
</Group>
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
149
ui/src/components/Loader.tsx
Normal file
149
ui/src/components/Loader.tsx
Normal file
@@ -0,0 +1,149 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import Header from "./Header";
|
||||
import { useRecoilState } from "recoil";
|
||||
import { refreshIdState, userState } from "@/state/auth";
|
||||
import { login, logout, refresh, refreshLoggedIn, register } from "@/api/auth";
|
||||
import { getFavorites, getPicture } from "@/api/users";
|
||||
import Cookies from "js-cookie";
|
||||
import { favoritesState, profilePictureState } from "@/state/user";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
|
||||
export default function Loader({ children }: { children: any }) {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [user, setUser] = useRecoilState(userState);
|
||||
const [refreshId, setRefreshId] = useRecoilState(refreshIdState);
|
||||
const [_, setFavorites] = useRecoilState(favoritesState);
|
||||
const [profilePicture, setProfilePicture] = useRecoilState(profilePictureState);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
if (!user || !Cookies.get("logged_in")) {
|
||||
refreshUser();
|
||||
}
|
||||
setLoading(false);
|
||||
}, [user]);
|
||||
|
||||
function refreshUser() {
|
||||
refresh().then((response) => {
|
||||
if (response) {
|
||||
setRefreshId(refreshLoggedIn());
|
||||
setUser(response.user);
|
||||
getFavorites().then((response) => {
|
||||
if (response) {
|
||||
setFavorites(response);
|
||||
}
|
||||
});
|
||||
if (response.user.profile_picture) {
|
||||
getPicture().then((response) => {
|
||||
if (response) {
|
||||
setProfilePicture(response as File);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function loginUser({ email, password }: { email: string, password: string}): Promise<boolean> {
|
||||
const loginResponse = await login(email, password);
|
||||
if (loginResponse) {
|
||||
setUser(loginResponse.user);
|
||||
setRefreshId(refreshLoggedIn());
|
||||
notifications.show({
|
||||
title: `Welcome back ${loginResponse.user.first_name}!`,
|
||||
message: `You have been logged in.`,
|
||||
color: 'green',
|
||||
autoClose: 2000,
|
||||
loading: false
|
||||
});
|
||||
return true;
|
||||
} else {
|
||||
notifications.show({
|
||||
title: `Unable to Login`,
|
||||
message: `Please try again.`,
|
||||
color: 'red',
|
||||
autoClose: 2000,
|
||||
loading: false
|
||||
});
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
async function logoutUser(): Promise<void> {
|
||||
await logout();
|
||||
Cookies.remove("logged_in");
|
||||
setUser(undefined);
|
||||
setFavorites([]);
|
||||
setProfilePicture(undefined);
|
||||
if (refreshId) {
|
||||
clearInterval(refreshId);
|
||||
setRefreshId(undefined);
|
||||
}
|
||||
}
|
||||
|
||||
async function registerUser({ firstName, lastName, email, password }: { firstName: string, lastName: string, email: string, password: string }): Promise<boolean> {
|
||||
const id = notifications.show({
|
||||
loading: true,
|
||||
title: `Creating account`,
|
||||
message: `Please wait...`,
|
||||
autoClose: false,
|
||||
withCloseButton: false
|
||||
});
|
||||
const registerResponse = await register({
|
||||
first_name: firstName,
|
||||
last_name: lastName,
|
||||
email: email,
|
||||
password: password
|
||||
});
|
||||
if (registerResponse) {
|
||||
const loginResponse = await login(email, password);
|
||||
if (loginResponse) {
|
||||
setUser(loginResponse.user);
|
||||
setRefreshId(refreshLoggedIn());
|
||||
notifications.update({
|
||||
id,
|
||||
title: `Account created`,
|
||||
message: `Welcome ${loginResponse.user.first_name}!`,
|
||||
color: 'green',
|
||||
autoClose: 2000,
|
||||
loading: false
|
||||
});
|
||||
return true;
|
||||
} else {
|
||||
notifications.update({
|
||||
id,
|
||||
title: `Unable to Login`,
|
||||
message: `Please try again.`,
|
||||
color: 'red',
|
||||
autoClose: 2000,
|
||||
loading: false
|
||||
});
|
||||
}
|
||||
} else {
|
||||
notifications.update({
|
||||
id,
|
||||
title: `Unable to Register`,
|
||||
message: `Please try again.`,
|
||||
color: 'error',
|
||||
autoClose: 2000,
|
||||
loading: false
|
||||
});
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{loading ? (
|
||||
<></>
|
||||
) : (
|
||||
<>
|
||||
<Header user={user} profilePicture={profilePicture} setProfilePicture={setProfilePicture} login={loginUser} logout={logoutUser} register={registerUser} />
|
||||
{children}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -3,12 +3,10 @@
|
||||
import { getAirports } from '@/api/airport';
|
||||
import { Airport, AirportOrderField } from '@/api/airport.types';
|
||||
import { getMetars } from '@/api/metar';
|
||||
import { DivIcon, LatLngBounds } from 'leaflet';
|
||||
import { LatLngBounds, icon } from 'leaflet';
|
||||
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 { Avatar, MantineProvider } from '@mantine/core';
|
||||
import { useRecoilState, useRecoilValue } from 'recoil';
|
||||
import { coordinatesState, zoomState } from '@/state/map';
|
||||
|
||||
@@ -72,31 +70,20 @@ export default function MapTiles() {
|
||||
}
|
||||
|
||||
function metarIcon(airport: Airport) {
|
||||
function innerIcon({ tag, color, size = 'xs' }: { tag: string; color: string; size?: string }) {
|
||||
return new DivIcon({
|
||||
html: ReactDOMServer.renderToString(
|
||||
<MantineProvider>
|
||||
<Avatar variant='filled' color={color} radius={'xl'} size={size}>
|
||||
{tag}
|
||||
</Avatar>
|
||||
</MantineProvider>
|
||||
),
|
||||
className: 'metar-marker-icon'
|
||||
});
|
||||
}
|
||||
let iconUrl = '/icons/unkn.svg';
|
||||
if (airport.latest_metar?.flight_category == 'VFR') {
|
||||
return innerIcon({ tag: 'V', color: 'green' });
|
||||
} else if (airport.latest_metar?.flight_category == 'MVFR') {
|
||||
return innerIcon({ tag: 'M', color: 'blue' });
|
||||
iconUrl = '/icons/vfr.svg';
|
||||
} else if (airport.latest_metar?.flight_category == 'MVFR') {
|
||||
iconUrl = '/icons/mvfr.svg';
|
||||
} else if (airport.latest_metar?.flight_category == 'IFR') {
|
||||
return innerIcon({ tag: 'I', color: 'red' });
|
||||
iconUrl = '/icons/ifr.svg';
|
||||
} else if (airport.latest_metar?.flight_category == 'LIFR') {
|
||||
return innerIcon({ tag: 'L', color: 'purple' });
|
||||
} else if (airport.latest_metar?.flight_category == 'UNKN') {
|
||||
return innerIcon({ tag: 'U', color: 'black', size: 'xs' });
|
||||
} else {
|
||||
return innerIcon({tag: ' ', color: 'grey', size: 'xs' });
|
||||
iconUrl = '/icons/lifr.svg';
|
||||
}
|
||||
return icon({
|
||||
iconUrl: iconUrl,
|
||||
iconSize: [20, 20]
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@@ -6,6 +6,11 @@ export const userState = atom({
|
||||
default: undefined as User | undefined
|
||||
});
|
||||
|
||||
export const refreshIdState = atom({
|
||||
key: 'refreshIdState',
|
||||
default: undefined as NodeJS.Timeout | undefined
|
||||
});
|
||||
|
||||
export const isAuthenticatedState = atom({
|
||||
key: 'isAuthenticatedState',
|
||||
default: false
|
||||
|
||||
@@ -4,3 +4,8 @@ export const favoritesState = atom({
|
||||
key: 'favoritesState',
|
||||
default: [] as string[]
|
||||
});
|
||||
|
||||
export const profilePictureState = atom({
|
||||
key: 'profilePictureState',
|
||||
default: undefined as File | undefined
|
||||
});
|
||||
|
||||
@@ -30,7 +30,6 @@
|
||||
"@api/*": ["src/api"],
|
||||
"@app/*": ["./src/app/*"],
|
||||
"@components/*": ["src/components/*"],
|
||||
"@lib/*": ["src/components/*"]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
|
||||
Reference in New Issue
Block a user