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

104 switch to daisyui #106

Merged
noahspannbauer merged 6 commits from 104-switch-to-daisyui into main 2025-12-29 20:43:27 -05:00
Conversation 0 Commits 6 Files Changed 41 +404 -264
8 changed files with 404 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 9a502df48d - Show all commits

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

@@ -69,13 +69,17 @@ const Logbook: React.FC<unknown> = () => {
id: 'route',
header: 'Route of Flight',
meta: {
headerAlign: 'center'
className: 'border-l border-base-300',
headerAlign: 'text-center'
},
columns: [
{
id: 'routeFrom',
accessorKey: 'routeFrom',
header: 'From'
header: 'From',
meta: {
className: 'border-l border-base-300',
}
},
{
id: 'routeTo',
@@ -89,8 +93,9 @@ const Logbook: React.FC<unknown> = () => {
accessorKey: 'durationOfFlight',
header: 'Duration Of Flight',
meta: {
align: 'right',
headerAlign: 'right'
align: 'text-right',
className: 'border-l border-base-300',
headerAlign: 'text-right'
},
cell: (info: CellContext<LogbookEntry, unknown>) =>
info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : '',
@@ -99,51 +104,63 @@ const Logbook: React.FC<unknown> = () => {
const notes: ColumnDef<LogbookEntry> = {
id: 'notes',
accessorKey: 'notes',
header: 'Notes'
header: 'Notes',
meta: {
className: 'border-l border-base-300',
}
}
const actions: ColumnDef<LogbookEntry> = {
id: 'actions',
header: 'Actions',
meta: {
align: 'center',
headerAlign: 'center'
align: 'text-center',
className: 'border-l border-base-300',
headerAlign: 'text-center'
},
cell: (info: CellContext<LogbookEntry, unknown>) => {
return (
<Dropdown>
<DropdownTrigger>
<Button isIconOnly variant='light' size='lg'>
<FontAwesomeIcon icon={faEllipsisVertical} />
</Button>
</DropdownTrigger>
<DropdownMenu>
<DropdownSection showDivider>
<DropdownItem
key='edit'
onPress={() => onOpenCloseDrawer(FormMode.EDIT, info.row.original.id)}
startContent={<FontAwesomeIcon icon={faPen} />}
>
Edit
</DropdownItem>
<DropdownItem
key='view'
onPress={() => onOpenCloseDrawer(FormMode.VIEW, info.row.original.id)}
startContent={<FontAwesomeIcon icon={faEye} />}
>
View
</DropdownItem>
</DropdownSection>
<DropdownSection>
<DropdownItem
key='Delete'
onPress={() => onDeleteLog(info.row.original.id)}
startContent={<FontAwesomeIcon icon={faTrash} />}
>
Delete
</DropdownItem>
</DropdownSection>
</DropdownMenu>
</Dropdown>
<div className='dropdown dropdown-end'>
<div tabIndex={0} role='button' className='btn btn-ghost'><FontAwesomeIcon icon={faEllipsisVertical} /></div>
<ul tabIndex={-1} className="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm border border-base-300">
<li><a onClick={() => onOpenCloseDrawer(FormMode.EDIT, info.row.original.id)}><FontAwesomeIcon icon={faPen} />Edit</a></li>
<li><a onClick={() => onOpenCloseDrawer(FormMode.VIEW, info.row.original.id)}><FontAwesomeIcon icon={faEye} />View</a></li>
<li><a onClick={() => onDeleteLog(info.row.original.id)}><FontAwesomeIcon icon={faTrash} />View</a></li>
</ul>
</div>
// <Dropdown>
// <DropdownTrigger>
// <Button isIconOnly variant='light' size='lg'>
// <FontAwesomeIcon icon={faEllipsisVertical} />
// </Button>
// </DropdownTrigger>
// <DropdownMenu>
// <DropdownSection showDivider>
// <DropdownItem
// key='edit'
// onPress={() => onOpenCloseDrawer(FormMode.EDIT, info.row.original.id)}
// startContent={<FontAwesomeIcon icon={faPen} />}
// >
// Edit
// </DropdownItem>
// <DropdownItem
// key='view'
// onPress={() => onOpenCloseDrawer(FormMode.VIEW, info.row.original.id)}
// startContent={<FontAwesomeIcon icon={faEye} />}
// >
// View
// </DropdownItem>
// </DropdownSection>
// <DropdownSection>
// <DropdownItem
// key='Delete'
// onPress={() => onDeleteLog(info.row.original.id)}
// startContent={<FontAwesomeIcon icon={faTrash} />}
// >
// Delete
// </DropdownItem>
// </DropdownSection>
// </DropdownMenu>
// </Dropdown>
)
}
}
@@ -173,8 +190,8 @@ const Logbook: React.FC<unknown> = () => {
accessorKey: 'singleEngineLand',
header: 'Single Engine Land',
meta: {
align: 'right',
headerAlign: 'right'
align: 'text-right',
headerAlign: 'text-right'
},
cell: (info: CellContext<LogbookEntry, unknown>) =>
info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : '',
@@ -184,7 +201,8 @@ const Logbook: React.FC<unknown> = () => {
id: 'landings',
header: 'Landings',
meta: {
headerAlign: 'center'
className: 'border-l border-base-300',
headerAlign: 'text-center'
},
columns: [
{
@@ -193,8 +211,9 @@ const Logbook: React.FC<unknown> = () => {
header: 'Day',
footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info) : '',
meta: {
align: 'right',
headerAlign: 'right'
align: 'text-right',
className: 'border-l border-base-300',
headerAlign: 'text-right'
}
},
{
@@ -203,8 +222,8 @@ const Logbook: React.FC<unknown> = () => {
header: 'Night',
footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info) : '',
meta: {
align: 'right',
headerAlign: 'right'
align: 'text-right',
headerAlign: 'text-right'
}
}
]
@@ -213,7 +232,8 @@ const Logbook: React.FC<unknown> = () => {
id: 'instrument',
header: 'Instrument',
meta: {
headerAlign: 'center'
className: 'border-l border-base-300',
headerAlign: 'text-center'
},
columns: [
{
@@ -222,8 +242,9 @@ const Logbook: React.FC<unknown> = () => {
header: 'Actual',
footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
meta: {
align: 'right',
headerAlign: 'right'
align: 'text-right',
className: 'border-l border-base-300',
headerAlign: 'text-right'
},
cell: (info: CellContext<LogbookEntry, unknown>) =>
info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : '',
@@ -234,8 +255,8 @@ const Logbook: React.FC<unknown> = () => {
header: 'Simulated',
footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
meta: {
align: 'right',
headerAlign: 'right'
align: 'text-right',
headerAlign: 'text-right'
},
cell: (info: CellContext<LogbookEntry, unknown>) =>
info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
@@ -246,8 +267,8 @@ const Logbook: React.FC<unknown> = () => {
header: 'Approaches',
footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
meta: {
align: 'right',
headerAlign: 'right'
align: 'text-right',
headerAlign: 'text-right'
}
},
{
@@ -256,8 +277,8 @@ const Logbook: React.FC<unknown> = () => {
header: 'Holds',
footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
meta: {
align: 'right',
headerAlign: 'right'
align: 'text-right',
headerAlign: 'text-right'
}
},
{
@@ -266,8 +287,8 @@ const Logbook: React.FC<unknown> = () => {
header: 'Nav/Track',
footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
meta: {
align: 'right',
headerAlign: 'right'
align: 'text-right',
headerAlign: 'text-right'
}
}
]
@@ -276,7 +297,8 @@ const Logbook: React.FC<unknown> = () => {
id: 'experienceTraining',
header: 'Type of pilot experience or training',
meta: {
headerAlign: 'center'
className: 'border-l border-base-300',
headerAlign: 'text-center'
},
columns: [
{
@@ -285,8 +307,9 @@ const Logbook: React.FC<unknown> = () => {
header: 'Ground Training Received',
footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
meta: {
align: 'right',
headerAlign: 'right'
align: 'text-right',
className: 'border-l border-base-300',
headerAlign: 'text-right'
},
cell: (info: CellContext<LogbookEntry, unknown>) =>
info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
@@ -297,8 +320,8 @@ const Logbook: React.FC<unknown> = () => {
header: 'Flight Training Received',
footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
meta: {
align: 'right',
headerAlign: 'right'
align: 'text-right',
headerAlign: 'text-right'
},
cell: (info: CellContext<LogbookEntry, unknown>) =>
info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
@@ -309,8 +332,8 @@ const Logbook: React.FC<unknown> = () => {
header: 'Cross Country',
footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
meta: {
align: 'right',
headerAlign: 'right'
align: 'text-right',
headerAlign: 'text-right'
},
cell: (info: CellContext<LogbookEntry, unknown>) =>
info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
@@ -321,8 +344,8 @@ const Logbook: React.FC<unknown> = () => {
header: 'Night',
footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
meta: {
align: 'right',
headerAlign: 'right'
align: 'text-right',
headerAlign: 'text-right'
},
cell: (info: CellContext<LogbookEntry, unknown>) =>
info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
@@ -333,8 +356,8 @@ const Logbook: React.FC<unknown> = () => {
header: 'Solo',
footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
meta: {
align: 'right',
headerAlign: 'right'
align: 'text-right',
headerAlign: 'text-right'
},
cell: (info: CellContext<LogbookEntry, unknown>) =>
info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
@@ -345,8 +368,8 @@ const Logbook: React.FC<unknown> = () => {
header: 'Pilot In Command',
footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
meta: {
align: 'right',
headerAlign: 'right'
align: 'text-right',
headerAlign: 'text-right'
},
cell: (info: CellContext<LogbookEntry, unknown>) =>
info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
@@ -531,22 +554,22 @@ const Logbook: React.FC<unknown> = () => {
</div>
)}
{!state.isLoading && (
<div className='col-span-12'>
<div className='col-span-12 p-5 bg-base-100 border border-base-100 rounded-lg'>
{state.entries.length > 0 && screenSize !== ScreenSize.SM && (
<div className='p-4 z-0 flex flex-col relative justify-between gap-4 bg-content1 overflow-auto shadow-small rounded-large w-full'>
<table className='min-w-full h-auto table-auto w-full'>
<thead className='[&>tr]:first:rounded-lg'>
{table.getHeaderGroups().map((headerGroup) => (
<tr className='group/tr outline-solid outline-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2' key={headerGroup.id}>
{headerGroup.headers.map((header) => {
<div className='overflow-x-auto'>
<table className='table min-w-full h-auto table-auto w-full'>
<thead className='bg-base-200'>
{table.getHeaderGroups().map((headerGroup, headerGroupIndex) => (
<tr className='group/tr outline-solid outline-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2' key={headerGroup.id}>
{headerGroup.headers.map((header, headerIndex) => {
return (
<th
className={`${header.column.columnDef.meta?.align ? textAlignment[header.column.columnDef.meta?.align] : ''} group/th px-3 h-10 align-middle bg-default-100 whitespace-nowrap text-foreground-500 text-tiny font-semibold first:rounded-s-lg last:rounded-e-lg data-[sortable=true]:cursor-pointer data-[hover=true]:text-foreground-400 outline-solid outline-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 text-start`}
className={`${header.column.columnDef.meta?.className ? header.column.columnDef.meta?.className : ''} group/th px-3 h-10 align-middle whitespace-nowrap text-foreground-500 text-tiny font-semibold ${headerGroupIndex === 0 ? 'first:rounded-tl-lg last:rounded-tr-lg' : ''} ${headerGroupIndex === table.getHeaderGroups().length - 1 ? 'first:rounded-bl-lg last:rounded-br-lg' : ''} data-[sortable=true]:cursor-pointer data-[hover=true]:text-foreground-400 outline-solid outline-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 text-start`}
colSpan={header.colSpan}
key={header.id}
>
{header.isPlaceholder ? null : (
<div>
<div className={`${header.column.columnDef.meta?.headerAlign ? header.column.columnDef.meta?.headerAlign : ''}`}>
{flexRender(
header.column.columnDef.header,
header.getContext()
@@ -572,13 +595,15 @@ const Logbook: React.FC<unknown> = () => {
{row.getVisibleCells().map((cell) => {
return (
<td
className={`${cell.column.columnDef.meta?.align ? textAlignment[cell.column.columnDef.meta?.align] : ''} py-2 px-3 relative align-middle whitespace-normal text-small font-normal [&>*]:z-1 [&>*]:relative outline-solid outline-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 before:pointer-events-none before:content-[''] before:absolute before:z-0 before:inset-0 before:opacity-0 data-[selected=true]:before:opacity-100 group-data-[disabled=true]/tr:text-foreground-300 group-data-[disabled=true]/tr:cursor-not-allowed before:bg-default/60 data-[selected=true]:text-default-foreground first:before:rounded-s-lg last:before:rounded-e-lg text-start`}
className={`py-2 px-3 relative align-middle whitespace-normal text-small font-normal [&>*]:z-1 [&>*]:relative outline-solid outline-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 before:pointer-events-none before:content-[''] before:absolute before:z-0 before:inset-0 before:opacity-0 data-[selected=true]:before:opacity-100 group-data-[disabled=true]/tr:text-foreground-300 group-data-[disabled=true]/tr:cursor-not-allowed before:bg-default/60 data-[selected=true]:text-default-foreground first:before:rounded-s-lg last:before:rounded-e-lg text-start`}
key={cell.id}
>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
<div className={`${cell.column.columnDef.meta?.align ? cell.column.columnDef.meta?.align : ''}`}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</div>
</td>
);
})}
@@ -587,7 +612,7 @@ const Logbook: React.FC<unknown> = () => {
})}
</>
</tbody>
<thead className='[&>tr]:first:rounded-lg'>
<thead className='[&>tr]:first:rounded-lg bg-base-200'>
{table.getFooterGroups().map((footerGroup, index) => {
if (index === 0) {
return (
@@ -597,14 +622,16 @@ const Logbook: React.FC<unknown> = () => {
<td
className='group/th px-3 h-10 align-middle bg-default-100 whitespace-nowrap text-foreground-500 text-tiny font-semibold first:rounded-s-lg last:rounded-e-lg data-[sortable=true]:cursor-pointer data-[hover=true]:text-foreground-400 outline-solid outline-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 text-start'
key={header.id}
align={header.column.columnDef.meta?.align}
>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.footer,
header.getContext()
)}
<div className={`${header.column.columnDef.meta?.headerAlign ? header.column.columnDef.meta?.headerAlign : ''}`}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.footer,
header.getContext()
)
}
</div>
</td>
);
})}

3
client/src/components/logbook/columns.tsx
View File

@@ -48,7 +48,8 @@ const route: ColumnDef<LogbookEntry> = {
id: 'route',
header: 'Route of Flight',
meta: {
headerAlign: 'center'
headerAlign: 'center',
className: 'border-l border-base-400'
},
columns: [
{

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

@@ -1,5 +1,6 @@
import { LogbookCardProps } from "./LogbookCardProps.interface";
import TrackMap from "../trackMap/TrackMap";
import { Button, Collapse, CollapseContent, CollapseTitle } from '@noahspan/noahspan-components'
const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps) => {
return (
@@ -9,10 +10,10 @@ const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps
const formattedDate: string = `${date.getMonth()}/${date.getDate()}/${date.getFullYear()}`;
return (
<div>
<div className='card bg-base-100 card-border border-base-300 p-5 z-10' key={log.id}>
<div className='card bg-base-100 border border-base-300 p-2'>
<div className='card-body' key={log.id}>
<h2 className='card-title font-bold text-2xl'>{formattedDate}</h2>
<div className='card-body'>
<div>
{mode === 'flights' && log.tracks && log.tracks.length > 0 &&
<div className='mb-5'>
<TrackMap
@@ -22,45 +23,46 @@ const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps
/>
</div>
}
<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>
</div>
<div className='col-span-6'>
<span>{log.aircraftMakeModel}</span>
</div>
<div className='col-span-6 font-bold'>
<span>Route From</span>
</div>
<div className='col-span-6'>
<span>{log.routeFrom}</span>
</div>
<div className='col-span-6 font-bold'>
<span>Route To</span>
</div>
<div className='col-span-6'>
<span>{log.routeTo}</span>
</div>
<div className='col-span-6 font-bold'>
<span>Duration Of Flight</span>
</div>
<div className='col-span-6'>
<span>{log.durationOfFlight}</span>
</div>
{log.notes &&
<>
<div className='col-span-6 font-bold'>
<span>Notes</span>
</div>
<div className='col-span-6'>
<span>{log.notes}</span>
</div>
</>
}
</div>
<div className='collapse collapse-arrow bg-base-100 border-base-300 border'>
<input type='radio' name='details-accordion' />
<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>
</div>
<div className='col-span-6'>
<span>{log.aircraftMakeModel}</span>
</div>
<div className='col-span-6 font-bold'>
<span>Route From</span>
</div>
<div className='col-span-6'>
<span>{log.routeFrom}</span>
</div>
<div className='col-span-6 font-bold'>
<span>Route To</span>
</div>
<div className='col-span-6'>
<span>{log.routeTo}</span>
</div>
<div className='col-span-6 font-bold'>
<span>Duration Of Flight</span>
</div>
<div className='col-span-6'>
<span>{log.durationOfFlight}</span>
</div>
{log.notes &&
<>
<div className='col-span-6 font-bold'>
<span>Notes</span>
</div>
<div className='col-span-6'>
<span>{log.notes}</span>
</div>
</>
}
</div>
</div>
</div>

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

@@ -75,99 +75,117 @@ const LogbookDrawer = ({ onOpenClose }: LogbookDrawerProps) => {
return (
<div className='drawer drawer-end'
closeButton={
<Button isIconOnly>
<FontAwesomeIcon icon={faXmark} />
</Button>
}
isOpen={logbookContext.state.isDrawerOpen}
onClose={onCancel}
// closeButton={
// <Button isIconOnly>
// <FontAwesomeIcon icon={faXmark} />
// </Button>
// }
// isOpen={logbookContext.state.isDrawerOpen}
// onClose={onCancel}
>
<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>
<div className='drawer-side'>
{logbookContext.state.formAlert && (
<div className='col-span-12'>
<Alert
onClose={() =>
logbookContext.dispatch({ type: 'SET_FORM_ALERT', payload: undefined })
}
color={logbookContext.state.formAlert.severity}
title={logbookContext.state.formAlert.message}
/>
</div>
)}
<Tabs
color='default'
fullWidth={true}
onSelectionChange={onSelectedKeyChanged}
selectedKey={activeTab as string}
variant='solid'
>
<Tab
key='time'
title={
<div className="flex items-center space-x-2">
<FontAwesomeIcon icon={faClock} />
<span>Time</span>
</div>
}
>
<LogForm />
</Tab>
{logbookContext.state.formMode !== FormMode.ADD &&
<Tab
key='tracks'
<input type='checkbox' className='drawer-toggle' onChange={() => {}} checked={logbookContext.state.isDrawerOpen} />
<div className="drawer-side">
<label
htmlFor='my-drawer-1'
aria-label='close-sidebar'
className='drawer-overlay'
></label>
<div className='menu bg-base-100 text-base-content min-h-full p-4' style={{ width: '50%' }}>
<FormProvider {...methods}>
<form className='prose max-w-none' onSubmit={methods.handleSubmit(onSubmit)} style={{ paddingBottom: '50px' }}>
<h2>
{`${logbookContext.state.formMode.toString().toLowerCase().charAt(0).toUpperCase() + logbookContext.state.formMode.toString().slice(1).toLowerCase()} Entry`}
</h2>
{/* {logbookContext.state.formAlert && (
<div className='col-span-12'>
<Alert
onClose={() =>
logbookContext.dispatch({ type: 'SET_FORM_ALERT', payload: undefined })
}
color={logbookContext.state.formAlert.severity}
title={logbookContext.state.formAlert.message}
/>
</div>
)} */}
<LogForm />
{/* <div className='tabs tabs-lift'>
<label className='tab'>
<input type='radio' name='my_tabs_1' />
<FontAwesomeIcon icon={faClock} />
Time
</label>
<div className="tab-content bg-base-100 border-base-300 p-6">
<LogForm />
</div>
<label className='tab'>
<input type='radio' name='my_tabs_1' />
<FontAwesomeIcon icon={faMapLocationDot} />
Tracks
</label>
<div className="tab-content bg-base-100 border-base-300 p-6">
<TracksForm />
</div> */}
{/* <input type='radio' name='my_tabs_1' className='tab' aria-label='Tracks' /> */}
{/* <input
key='time'
title={
<div className="flex items-center space-x-2">
<FontAwesomeIcon icon={faMapLocationDot} />
<span>Tracks</span>
<FontAwesomeIcon icon={faClock} />
<span>Time</span>
</div>
}
>
<TracksForm />
</Tab>
}
</Tabs>
</DrawerBody>
{activeTab !== 'tracks' &&
<DrawerFooter>
<div className='grid grid-cols-12 gap-3'>
<div className='col-span-12 justify-self-end self-center'>
<Button
disabled={
logbookContext.state.isFormDisabled && logbookContext.state.formMode.toString() !== FormMode.VIEW
? logbookContext.state.isFormDisabled
: false
{logbookContext.state.formMode !== FormMode.ADD &&
<Tab
key='tracks'
title={
<div className="flex items-center space-x-2">
<FontAwesomeIcon icon={faMapLocationDot} />
<span>Tracks</span>
</div>
}
startContent={<FontAwesomeIcon icon={faXmark} />}
onPress={onCancel}
>
{logbookContext.state.formMode.toString() !== FormMode.VIEW ? 'Cancel' : 'Close'}
</Button>
{logbookContext.state.formMode.toString() !== FormMode.VIEW && (
<Button
className='ml-[10px]'
color='primary'
disabled={logbookContext.state.isFormDisabled}
startContent={<FontAwesomeIcon icon={faSave} />}
type="submit"
>
Save
</Button>
)}
</div>
<TracksForm />
</Tab>
} */}
</div>
</DrawerFooter>
}
</form>
</FormProvider>
</DrawerContent>
</Drawer>
{activeTab !== 'tracks' &&
<div>
<div className='grid grid-cols-12 gap-3'>
<div className='col-span-12 justify-self-end self-center'>
<button
className='btn'
disabled={
logbookContext.state.isFormDisabled && logbookContext.state.formMode.toString() !== FormMode.VIEW
? logbookContext.state.isFormDisabled
: false
}
onClick={onCancel}
>
<FontAwesomeIcon icon={faXmark} />
{logbookContext.state.formMode.toString() !== FormMode.VIEW ? 'Cancel' : 'Close'}
</button>
{logbookContext.state.formMode.toString() !== FormMode.VIEW && (
<button
className='btn btn-primary ml-[10px]'
disabled={logbookContext.state.isFormDisabled}
type="submit"
>
<FontAwesomeIcon icon={faSave} />
Save
</button>
)}
</div>
</div>
</div>
}
</form>
</FormProvider>
</div>
</div>
</div>
)
}

119
client/src/components/pilots/Pilots.tsx
View File

@@ -12,7 +12,9 @@ import { ScreenSize } from '../../enums/screenSize';
import { useBreakpoints } from '../../hooks/useBreakpoints/UseBreakpoints';
import { Alert, Button, Dropdown, DropdownItem, DropdownSection, Table, TableHeader, TableBody, TableColumn, TableRow, TableCell, DropdownTrigger, DropdownMenu } from '@heroui/react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faEllipsisVertical, faPen, faEye, faTrash, faPlus } from '@fortawesome/free-solid-svg-icons'
import { faEllipsisVertical, faPen, faEye, faTrash, faPlus } from '@fortawesome/free-solid-svg-icons';
import { CellContext, ColumnDef, flexRender, getCoreRowModel, getPaginationRowModel, HeaderContext, useReactTable } from '@tanstack/react-table';
import { Pilot } from './Pilot.interface';
const Pilots: React.FC<unknown> = () => {
const [state, dispatch] = useReducer(reducer, initialState);
@@ -27,6 +29,8 @@ const Pilots: React.FC<unknown> = () => {
`api/pilots`
);
console.log(response)
if (response.data.length > 0) {
dispatch({ type: 'SET_PILOTS', payload: response.data });
@@ -115,14 +119,19 @@ const Pilots: React.FC<unknown> = () => {
});
};
const columns = [
const columns: ColumnDef<Pilot>[]= [
{
id: 'name',
name: 'Name'
accessorKey: 'name',
header: 'Name'
},
{
id: 'actions',
name: 'Actions'
header: 'Actions',
meta: {
align: 'text-center',
headerAlign: 'text-center'
}
}
]
@@ -174,6 +183,19 @@ const Pilots: React.FC<unknown> = () => {
}
}
const textAlignment = {
center: 'text-center',
left: 'text-start',
right: 'text-end'
};
const table = useReactTable({
data: state.pilots,
columns: columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel()
});
useEffect(() => {
if (!state.isFormOpen) {
getPilots();
@@ -188,14 +210,14 @@ const Pilots: React.FC<unknown> = () => {
</div>
<div className='col-span-2 justify-self-end self-center'>
{userRole === UserRole.WRITE &&
<Button
color='primary'
onPress={() => onOpenClosePilotForm(FormMode.ADD)}
startContent={<FontAwesomeIcon icon={faPlus} />}
<button
className='btn btn-primary'
onClick={() => onOpenClosePilotForm(FormMode.ADD)}
data-testid="pilot-add-button"
>
<FontAwesomeIcon icon={faPlus} />
Add Pilot
</Button>
</button>
}
</div>
{!state.isLoading && state.alert && (
@@ -209,31 +231,62 @@ const Pilots: React.FC<unknown> = () => {
/>
</div>
)}
<div className='col-span-12'>
<div className='col-span-12 bg-base-100 p-5 border border-base-100 rounded-lg'>
{state.pilots.length > 0 && screenSize !== ScreenSize.SM &&
<Table>
<TableHeader columns={columns}>
{(column) => (
<TableColumn
key={column.id}
align={column.id === "actions" ? "center" : "start"}
>
{column.name}
</TableColumn>
)}
</TableHeader>
<TableBody items={state.pilots}>
{(item) => (
<TableRow key={item.id}>
{(columnKey => (
<TableCell>
{renderCell(item, columnKey)}
</TableCell>
))}
</TableRow>
)}
</TableBody>
</Table>
<table className='table min-w-full h-auto table-auto w-full'>
<thead className='[&>tr]:first:rounded-lg bg-base-200'>
{table.getHeaderGroups().map((headerGroup) => (
<tr className='group/tr outline-solid outline-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2' key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<th
className={`${header.column.columnDef.meta?.headerAlign ? header.column.columnDef.meta?.headerAlign : ''} group/th px-3 h-10 align-middle bg-default-100 whitespace-nowrap text-foreground-500 text-tiny font-semibold rounded data-[sortable=true]:cursor-pointer data-[hover=true]:text-foreground-400 outline-solid outline-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 text-start`}
colSpan={header.colSpan}
key={header.id}
>
{header.isPlaceholder ? null : (
<div>
{flexRender(
header.column.columnDef.header,
header.getContext()
)}
{/* {header.column.getCanFilter() ? (
<div>
<Filter column={header.column} table={table} />
</div>
) : null} */}
</div>
)}
</th>
);
})}
</tr>
))}
</thead>
<tbody>
<>
{table.getRowModel().rows.map((row) => {
return (
<tr className='group/tr outline-solid outline-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2' key={row.id}>
{row.getVisibleCells().map((cell) => {
return (
<td
className={`${cell.column.columnDef.meta?.align ? cell.column.columnDef.meta?.align : ''} py-2 px-3 relative align-middle whitespace-normal text-small font-normal [&>*]:z-1 [&>*]:relative outline-solid outline-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 before:pointer-events-none before:content-[''] before:absolute before:z-0 before:inset-0 before:opacity-0 data-[selected=true]:before:opacity-100 group-data-[disabled=true]/tr:text-foreground-300 group-data-[disabled=true]/tr:cursor-not-allowed before:bg-default/60 data-[selected=true]:text-default-foreground first:before:rounded-s-lg last:before:rounded-e-lg text-start`}
key={cell.id}
>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</td>
);
})}
</tr>
);
})}
</>
</tbody>
</table>
}
{state.pilots.length > 0 && screenSize === ScreenSize.SM &&
<PilotCard pilots={state.pilots} onDelete={onDeletePilot} onOpenCloseForm={onOpenClosePilotForm} />

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

@@ -7,7 +7,7 @@ import { Avatar, Button, Link, Navbar, NavbarBrand, NavbarContent, NavbarItem, D
import httpClient from '../../httpClient/httpClient'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlane, faSignIn, faSignOut } from '@fortawesome/free-solid-svg-icons'
import { useLocation } from 'react-router-dom';
import { NavLink, useLocation } from 'react-router-dom';
const SiteNav = () => {
const [userPhoto, setUserPhoto] = useState<string>();
@@ -58,8 +58,8 @@ const SiteNav = () => {
try {
const userProfile = await getUserProfile();
const userPhoto = await getUserPhoto();
setUserPhoto(userPhoto);
console.log(userPhoto)
// setUserPhoto(userPhoto);
appContext.dispatch({
type: 'SET_USER_PROFILE',
@@ -80,7 +80,7 @@ const SiteNav = () => {
return (
<div className="navbar bg-base-100 shadow-sm w-full">
<div className="navbar-start">
<div className="navbar-start ml-8">
<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>
@@ -99,11 +99,17 @@ const SiteNav = () => {
<li><a>Item 3</a></li>
</ul>
</div>
<a className="btn btn-ghost text-xl">daisyUI</a>
<img
height={35}
width={35}
src='noahspan-logo.png'
style={{ marginRight: '5px' }}
/>
<FontAwesomeIcon icon={faPlane} size='2x' />
</div>
<div className="navbar-center hidden lg:flex">
<ul className="menu menu-horizontal px-1">
<li><a>Item 1</a></li>
{/* <li><a>Item 1</a></li>
<li>
<details>
<summary>Parent</summary>
@@ -113,11 +119,42 @@ const SiteNav = () => {
</ul>
</details>
</li>
<li><a>Item 3</a></li>
<li><a>Item 3</a></li> */}
{pages.length > 0 && pages.map((page, index) => {
return (
<li><NavLink to={page.path}>{page.name}</NavLink></li>
)
})}
</ul>
</div>
<div className="navbar-end">
<a className="btn">Button</a>
<div className="navbar-end mr-8">
{!isUserLoggedIn &&
<button className='btn btn-ghost' onClick={() => login()}><FontAwesomeIcon icon={faSignIn} />Sign In</button>
}
{isUserLoggedIn &&
<div className='dropdown dropdown-end'>
<div tabIndex={0} role='button'>
<div className={`avatar ${userPhoto ? userPhoto : 'avatar-placeholder'}`}>
{userPhoto &&
<div className='w-12 rounded-full'>
<img src={userPhoto} />
</div>
}
{!userPhoto &&
<div className='bg-neutral text-neutral-content w-10 rounded-full'>
<span>NS</span>
</div>
}
</div>
</div>
<ul
tabIndex={0}
className='dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm border border-base-300'
>
<li><a onClick={() => logout({redirectTo: 'specific url', url: '/'})}><FontAwesomeIcon icon={faSignOut} />Sign Out</a></li>
</ul>
</div>
}
</div>
</div>
// <Navbar isBordered maxWidth='full' position='static'>

3
client/src/styles.css
View File

@@ -1,5 +1,5 @@
@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "daisyui";
@plugin "daisyui/theme" {
name: "lofi";
default: true;
@@ -34,6 +34,7 @@
--depth: 0;
--noise: 0;
}
@plugin "@tailwindcss/typography";
body {
background-color: #f5f5f5;

5
client/src/tanstack.d.ts vendored
View File

@@ -3,8 +3,9 @@ import '@tanstack/react-table';
/* eslint-disable */
declare module '@tanstack/react-table' {
interface ColumnMeta<TData extends RowData, TValue> {
align?: 'left' | 'center' | 'right';
headerAlign?: 'left' | 'center' | 'right';
align?: 'text-left' | 'text-center' | 'text-right';
className?: string;
headerAlign?: 'text-left' | 'text-center' | 'text-right';
}
}
/* eslint-enable */