Updated versions

ui/.env

@@ -2,4 +2,4 @@ SERVICE_HOST=service
 SERVICE_PORT=5000
 
 UI_PORT=3000
-NODE_ENV=development
+NODE_ENV=development

ui/Makefile

@@ -4,6 +4,8 @@ SHELL := /bin/bash
 GIT_HASH ?= $(shell git log --format="%h" -n 1)
 
 include .env
+-include .env.local
+export
 
 .PHONY: help build start stop lint
 

ui/src/api/airport.ts

@@ -17,6 +17,7 @@ interface GetAirportsProps {
   name?: string;
   order_field?: AirportOrderField;
   order_by?: 'asc' | 'desc';
+  has_metar?: boolean;
   page?: number;
   limit?: number;
 }
@@ -28,6 +29,7 @@ export async function getAirports({
   name,
   order_field,
   order_by,
+  has_metar,
   limit = 10,
   page = 1
 }: GetAirportsProps): Promise<GetAirportsResponse> {
@@ -40,6 +42,7 @@ export async function getAirports({
     name: name ?? undefined,
     order_field: order_field ?? undefined,
     order_by: order_by ?? undefined,
+    has_metar: has_metar ?? undefined,
     limit,
     page
   });

ui/src/components/Header/UserMenu.tsx

@@ -0,0 +1,114 @@
+import { User } from "@/api/auth.types";
+import { setPicture } from "@/api/users";
+import {
+  Menu,
+  UnstyledButton,
+  Group,
+  Avatar,
+  Card,
+  FileButton,
+  Grid,
+  Button,
+  Text
+} from "@mantine/core";
+import Link from "next/link";
+import { SetterOrUpdater } from "recoil";
+import './styles.css';
+
+interface UserMenuProps {
+  user: User;
+  profilePicture: File | undefined;
+  setProfilePicture: SetterOrUpdater<File | undefined>;
+  toggle: (type: string) => void;
+  logout: () => Promise<void>;
+}
+
+export default function UserMenu({ user, profilePicture, setProfilePicture, logout, toggle }: UserMenuProps) {
+
+  return (
+    <Menu shadow='md' width={200} openDelay={100} closeDelay={400}>
+      <Menu.Target>
+        <UnstyledButton>
+          <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/svg+xml,image/webp,image/gif,image/apng,image/avif'
+            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'>
+                    Administration
+                  </Button>
+                </Link>
+              </Grid.Col>
+            )}
+          </Grid>
+        </Card>
+      </Menu.Dropdown>
+    </Menu>
+  )
+}

ui/src/components/Header/index.tsx

@@ -3,10 +3,8 @@
 import Link from 'next/link';
 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 { Autocomplete, Button, Group, UnstyledButton } from '@mantine/core';
 import { SetterOrUpdater, useRecoilState } from 'recoil';
-import { setPicture } from '@/api/users';
 import { useToggle } from '@mantine/hooks';
 import { HeaderModal } from './HeaderModal';
 import { coordinatesState } from '@/state/map';
@@ -14,6 +12,8 @@ import { User } from '@/api/auth.types';
 import { usePathname, useRouter } from 'next/navigation';
 import { FaMoon } from "react-icons/fa6";
 import { FaSun } from "react-icons/fa6";
+import UserMenu from './UserMenu';
+import './styles.css';
 
 interface HeaderProps {
   user: User | undefined;
@@ -77,13 +77,28 @@ export default function Header({ user, profilePicture, setProfilePicture, login,
             />
           </div>
         </div>
-        <UserSection
-          user={user}
-          profilePicture={profilePicture}
-          setProfilePicture={setProfilePicture}
-          toggle={toggle}
-          logout={logout}
-        />
+        <div className='right'>
+          <UnstyledButton style={{ paddingRight: '1em', margin: 'auto' }}>
+            <FaMoon />
+            {/* <FaSun /> */}
+          </UnstyledButton>
+          {user ? (
+            <UserMenu
+              user={user}
+              profilePicture={profilePicture}
+              setProfilePicture={setProfilePicture}
+              toggle={toggle}
+              logout={logout}
+            />
+          ) : (
+            <Group className='user'>
+              <Button onClick={() => toggle('login')}>Login</Button>
+              <Button variant='outline' onClick={() => toggle('register')}>
+                Sign up
+              </Button>
+            </Group>
+          )}
+        </div>
       </nav>
       <HeaderModal
         type={modalType}
@@ -94,118 +109,3 @@ export default function Header({ user, profilePicture, setProfilePicture, login,
     </>
   );
 }
-
-interface UserSectionProps {
-  user: User | undefined;
-  profilePicture: File | undefined;
-  setProfilePicture: SetterOrUpdater<File | undefined>;
-  toggle: (type: string) => void;
-  logout: () => Promise<void>;
-}
-
-function UserSection({ user, profilePicture, setProfilePicture, logout, toggle }: UserSectionProps) {
-
-  return (
-    <div className='user-section'>
-      <>
-        {/* <UnstyledButton> */}
-          {/* <FaMoon /> */}
-          {/* <FaSun /> */}
-        {/* </UnstyledButton> */}
-        {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/svg+xml,image/webp,image/gif,image/apng,image/avif'
-                  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'>
-                          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>
-        )}
-      </>
-    </div>
-  )
-}

ui/src/components/Header/styles.css

@@ -6,27 +6,21 @@
   color: white;
 }
 
-.navbar .left {
+.left {
   display: flex;
 }
 
-.navbar .title {
+.title {
   padding-left: 2em;
   padding-right: 2em;
   margin: auto;
 }
 
-.navbar .left .search {
+.search {
   margin: auto;
 }
 
-.navbar .avatar {
-  padding-right: 2em;
-  margin-top: auto;
-  margin-bottom: auto;
-}
-
-.navbar .user-section {
+.right {
   display: flex;
   align-items: center;
   padding-right: 2em;

ui/src/components/Metars/MapTiles.tsx

@@ -3,7 +3,7 @@
 import { getAirports, updateAirport } from '@/api/airport';
 import { Airport, AirportOrderField } from '@/api/airport.types';
 import { getMetars } from '@/api/metar';
-import { LatLngBounds, icon } from 'leaflet';
+import { LatLngBounds, PointTuple, icon } from 'leaflet';
 import { useEffect, useState } from 'react';
 import { Marker, TileLayer, Tooltip, useMap, useMapEvents } from 'react-leaflet';
 import MetarModal from './MetarModal';
@@ -70,8 +70,10 @@ export default function MapTiles() {
 
   function metarIcon(airport: Airport) {
     let iconUrl = '/icons/unkn.svg';
+    let iconSize: PointTuple = [20, 20];
     if (!airport.has_metar && airport.latest_metar == undefined) {
       iconUrl = '/icons/nometar.svg';
+      iconSize = [10, 10];
     } else if (airport.latest_metar?.flight_category == 'VFR') {
       iconUrl = '/icons/vfr.svg';
     }  else if (airport.latest_metar?.flight_category == 'MVFR') {
@@ -81,10 +83,7 @@ export default function MapTiles() {
     } else if (airport.latest_metar?.flight_category == 'LIFR') {
       iconUrl = '/icons/lifr.svg';
     }
-    return icon({
-      iconUrl: iconUrl,
-      iconSize: [20, 20]
-    })
+    return icon({ iconUrl, iconSize })
   }
 
   useEffect(() => {