noah/noahspan-flying
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases 8 Wiki Activity

adding daisyui

Browse Source
This commit is contained in:
Noah Spannbauer
2025-12-02 19:46:06 -06:00
parent 64c94ca9f4
commit 85b9c11bf1
11 changed files with 165 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
client/src/App.tsx
View File

@@ -1,23 +1,22 @@
import { Navigate, Route, Routes } from 'react-router-dom';
import { Route, Routes } from 'react-router-dom';
import Flights from './components/flights/Flights';
import Logbook from './components/logbook/Logbook';
import Pilots from './components/pilots/Pilots';
import SiteNav from './components/siteNav/SiteNav';
import { HeroUIProvider } from '@heroui/react';
import { useHref, useNavigate } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
const App = () => {
const navigate = useNavigate();
return (
<HeroUIProvider navigate={navigate} useHref={useHref}>
<div className='bg-[#f5f5f5]' data-theme="lofi">
<SiteNav />
<Routes>
<Route path='/' element={<Flights />} />
<Route path="/logbook" element={<Logbook />} />
<Route path="/pilots" element={<Pilots />} />
</Routes>
</HeroUIProvider>
</div>
);
};

18
client/src/components/logbook/Logbook.tsx
View File

@@ -503,14 +503,20 @@ const Logbook: React.FC<unknown> = () => {
</div>
<div className='col-span-2 justify-self-end self-center'>
{userRole === UserRole.WRITE &&
<Button
color='primary'
onPress={() => onOpenCloseDrawer(FormMode.ADD)}
startContent={<FontAwesomeIcon icon={faAdd} />}
data-testid="pilot-add-button"
// <Button
// color='primary'
// onPress={() => onOpenCloseDrawer(FormMode.ADD)}
// startContent={<FontAwesomeIcon icon={faAdd} />}
// data-testid="pilot-add-button"
// >
// Add Entry
// </Button>
<button className='btn btn-primary'
onClick={() => onOpenCloseDrawer(FormMode.ADD)}
>
<FontAwesomeIcon icon={faAdd} />
Add Entry
</Button>
</button>
}
</div>
{!state.isLoading && state.alert && (

23
client/src/components/logbookCard/LogbookCard.tsx
View File

@@ -1,4 +1,3 @@
import { Accordion, AccordionItem, Card, CardBody, CardHeader } from '@heroui/react'
import { LogbookCardProps } from "./LogbookCardProps.interface";
import TrackMap from "../trackMap/TrackMap";
@@ -11,11 +10,9 @@ const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps
return (
<div>
<Card className='p-4' key={log.id}>
<CardHeader>
<h2 className='font-bold text-2xl'>{formattedDate}</h2>
</CardHeader>
<CardBody>
<div className='card bg-base-100 card-border border-base-300 p-5 z-10' key={log.id}>
<h2 className='card-title font-bold text-2xl'>{formattedDate}</h2>
<div className='card-body'>
{mode === 'flights' && log.tracks && log.tracks.length > 0 &&
<div className='mb-5'>
<TrackMap
@@ -25,8 +22,9 @@ const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps
/>
</div>
}
<Accordion variant='bordered'>
<AccordionItem key='1' title='Details'>
<div tabIndex={0} className='collapse collapse-arrow bg-base-100 border-base-300 border z-50'>
<div className='collapse-title font-semibold'>Details</div>
<div className='collapse-content'>
<div className='grid grid-cols-12 gap-3 mr-[30%] ml-[30%] mt-4 mb-4'>
<div className='col-span-6 font-bold'>
<span>Aircraft Make and Model</span>
@@ -63,11 +61,10 @@ const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps
</>
}
</div>
</AccordionItem>
</Accordion>
</CardBody>
</Card>
</div>
</div>
</div>
</div>
</div>
)
})}

6
client/src/components/logbookDrawer/LogbookDrawer.tsx
View File

@@ -74,7 +74,7 @@ const LogbookDrawer = ({ onOpenClose }: LogbookDrawerProps) => {
}
return (
<Drawer
<div className='drawer drawer-end'
closeButton={
<Button isIconOnly>
<FontAwesomeIcon icon={faXmark} />
@@ -83,13 +83,13 @@ const LogbookDrawer = ({ onOpenClose }: LogbookDrawerProps) => {
isOpen={logbookContext.state.isDrawerOpen}
onClose={onCancel}
>
<DrawerContent>
<div>
<FormProvider {...methods}>
<form className='prose max-w-none' onSubmit={methods.handleSubmit(onSubmit)} style={{ paddingBottom: '50px' }}>
<DrawerHeader>
{`${logbookContext.state.formMode.toString().toLowerCase().charAt(0).toUpperCase() + logbookContext.state.formMode.toString().slice(1).toLowerCase()} Entry`}
</DrawerHeader>
<DrawerBody>
<div className='drawer-side'>
{logbookContext.state.formAlert && (
<div className='col-span-12'>
<Alert

135
client/src/components/siteNav/SiteNav.tsx
View File

@@ -79,53 +79,94 @@ const SiteNav = () => {
}, [isUserLoggedIn]);
return (
<Navbar isBordered maxWidth='full' position='static'>
<NavbarContent>
<NavbarBrand>
<img
height={35}
width={35}
src='noahspan-logo.png'
style={{ marginRight: '5px' }}
/>
<FontAwesomeIcon icon={faPlane} size='2x' />
</NavbarBrand>
</NavbarContent>
<NavbarContent justify='center'>
{pages.length > 0 && pages.map((page, index) => {
return (
<NavbarItem isActive={pathname === page.path ? true : false} key={index}>
<Link color={pathname === page.path ? 'primary' : 'foreground'} href={page.path}>
{page.name}
</Link>
</NavbarItem>
)
})}
</NavbarContent>
<NavbarContent justify='end'>
{!isUserLoggedIn &&
<Button
color='default'
onPress={() => login()}
startContent={<FontAwesomeIcon icon={faSignIn} />}
>
Sign In
</Button>
}
{isUserLoggedIn &&
<Dropdown>
<DropdownTrigger>
<Avatar name={appContext.state.userProfile.displayName?.toString()} src={userPhoto}></Avatar>
</DropdownTrigger>
<DropdownMenu>
<DropdownItem key='signout' onPress={() => logout({redirectTo: 'specific url', url: '/'})} startContent={<FontAwesomeIcon icon={faSignOut} />}>
Sign Out
</DropdownItem>
</DropdownMenu>
</Dropdown>
}
</NavbarContent>
</Navbar>
<div className="navbar bg-base-100 shadow-sm w-full">
<div className="navbar-start">
<div className="dropdown">
<div tabIndex={0} role="button" className="btn btn-ghost lg:hidden">
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h8m-8 6h16" /> </svg>
</div>
<ul
tabIndex={-1}
className="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
<li><a>Item 1</a></li>
<li>
<a>Parent</a>
<ul className="p-2">
<li><a>Submenu 1</a></li>
<li><a>Submenu 2</a></li>
</ul>
</li>
<li><a>Item 3</a></li>
</ul>
</div>
<a className="btn btn-ghost text-xl">daisyUI</a>
</div>
<div className="navbar-center hidden lg:flex">
<ul className="menu menu-horizontal px-1">
<li><a>Item 1</a></li>
<li>
<details>
<summary>Parent</summary>
<ul className="p-2 bg-base-100 w-40 z-1">
<li><a>Submenu 1</a></li>
<li><a>Submenu 2</a></li>
</ul>
</details>
</li>
<li><a>Item 3</a></li>
</ul>
</div>
<div className="navbar-end">
<a className="btn">Button</a>
</div>
</div>
// <Navbar isBordered maxWidth='full' position='static'>
// <NavbarContent>
// <NavbarBrand>
// <img
// height={35}
// width={35}
// src='noahspan-logo.png'
// style={{ marginRight: '5px' }}
// />
// <FontAwesomeIcon icon={faPlane} size='2x' />
// </NavbarBrand>
// </NavbarContent>
// <NavbarContent justify='center'>
// {pages.length > 0 && pages.map((page, index) => {
// return (
// <NavbarItem isActive={pathname === page.path ? true : false} key={index}>
// <Link color={pathname === page.path ? 'primary' : 'foreground'} href={page.path}>
// {page.name}
// </Link>
// </NavbarItem>
// )
// })}
// </NavbarContent>
// <NavbarContent justify='end'>
// {!isUserLoggedIn &&
// <Button
// color='default'
// onPress={() => login()}
// startContent={<FontAwesomeIcon icon={faSignIn} />}
// >
// Sign In
// </Button>
// }
// {isUserLoggedIn &&
// <Dropdown>
// <DropdownTrigger>
// <Avatar name={appContext.state.userProfile.displayName?.toString()} src={userPhoto}></Avatar>
// </DropdownTrigger>
// <DropdownMenu>
// <DropdownItem key='signout' onPress={() => logout({redirectTo: 'specific url', url: '/'})} startContent={<FontAwesomeIcon icon={faSignOut} />}>
// Sign Out
// </DropdownItem>
// </DropdownMenu>
// </Dropdown>
// }
// </NavbarContent>
// </Navbar>
);
};

53
client/src/components/trackMap/TrackMap.css
View File

@@ -1,53 +0,0 @@
#app {
height: 100%;
}
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-wrapper {
margin-bottom: 20px;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.swiper-pagination-bullet {
background-color: #000000;
height: 13px;
width: 13px;
border: 2px solid #FFFFFF;
}
.swiper-pagination-bullet-active {
box-shadow: 0 0 0 1px #000000;
}

4
client/src/components/trackMap/TrackMap.tsx
View File

@@ -4,10 +4,6 @@ import { AxiosInstance, AxiosResponse } from 'axios';
import { useAuth } from 'react-oidc-context'
import { MapContainer, TileLayer } from 'react-leaflet';
import ReactLeafletKml from 'react-leaflet-kml';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css';
import './TrackMap.css';
import 'leaflet/dist/leaflet.css';
import httpClient from '../../httpClient/httpClient'

2
client/src/index.html
View File

@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flying</title>
</head>
<body>
<body style="background-color: #f5f5f5;">
<div id="root"></div>
</body>
</html>

48
client/src/styles.css
View File

@@ -1,15 +1,41 @@
@import "tailwindcss";
@plugin './hero.ts';
/* Note: You may need to change the path to fit your project structure */
@source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
@custom-variant dark (&:is(.dark *));
@plugin "@tailwindcss/typography";
@theme inline {
--color-primary: #000000;
@plugin "daisyui/theme" {
name: "lofi";
default: true;
prefersdark: false;
color-scheme: "light";
--color-base-100: oklch(100% 0 0);
--color-base-200: oklch(97% 0 0);
--color-base-300: oklch(94% 0 0);
--color-base-content: oklch(0% 0 0);
--color-primary: oklch(15.906% 0 0);
--color-primary-content: oklch(100% 0 0);
--color-secondary: oklch(21.455% 0.001 17.278);
--color-secondary-content: oklch(100% 0 0);
--color-accent: oklch(26.861% 0 0);
--color-accent-content: oklch(100% 0 0);
--color-neutral: oklch(0% 0 0);
--color-neutral-content: oklch(100% 0 0);
--color-info: oklch(79.54% 0.103 205.9);
--color-info-content: oklch(15.908% 0.02 205.9);
--color-success: oklch(90.13% 0.153 164.14);
--color-success-content: oklch(18.026% 0.03 164.14);
--color-warning: oklch(88.37% 0.135 79.94);
--color-warning-content: oklch(17.674% 0.027 79.94);
--color-error: oklch(78.66% 0.15 28.47);
--color-error-content: oklch(15.732% 0.03 28.47);
--radius-selector: 0.5rem;
--radius-field: 0.5rem;
--radius-box: 0.5rem;
--size-selector: 0.25rem;
--size-field: 0.25rem;
--border: 1px;
--depth: 0;
--noise: 0;
}
body {
background-color: #f5f5f5;
min-height: 100vh;
}

18
package-lock.json generated
View File

@@ -15,6 +15,7 @@
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^7.2.0",
"@typescript-eslint/parser": "^7.2.0",
"daisyui": "^5.5.5",
"eslint": "^8.42.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-react-hooks": "^4.6.0",
@@ -225,15 +226,6 @@
"react": "^16.3 || ^17.0.0 || ^18.0.0 || ^19.0.0"
}
},
"client/node_modules/daisyui": {
"version": "5.1.10",
"resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.1.10.tgz",
"integrity": "sha512-p1J/HME2WmaSiy6u2alIbeP3gd5PNVft3+6Bdll0BRSm/UdI4084+pD01LxFug/5wGexNewWqbcEL6nB2n2o+Q==",
"peer": true,
"funding": {
"url": "https://github.com/saadeghi/daisyui?sponsor=1"
}
},
"client/node_modules/react": {
"version": "19.1.1",
"resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
@@ -10843,6 +10835,14 @@
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
"devOptional": true
},
"node_modules/daisyui": {
"version": "5.5.5",
"resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.5.5.tgz",
"integrity": "sha512-ekvI93ZkWIJoCOtDl0D2QMxnWvTejk9V5nWBqRv+7t0xjiBXqAK5U6o6JE2RPvlIC3EqwNyUoIZSdHX9MZK3nw==",
"funding": {
"url": "https://github.com/saadeghi/daisyui?sponsor=1"
}
},
"node_modules/date-fns-jalali": {
"version": "4.1.0-0",
"resolved": "https://registry.npmjs.org/date-fns-jalali/-/date-fns-jalali-4.1.0-0.tgz",

1
package.json
View File

@@ -14,6 +14,7 @@
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^7.2.0",
"@typescript-eslint/parser": "^7.2.0",
"daisyui": "^5.5.5",
"eslint": "^8.42.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-react-hooks": "^4.6.0",