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

minor fixes

Browse Source
This commit is contained in:
Noah Spannbauer
2026-01-11 10:51:28 -06:00
parent 41e9ae33dc
commit 51de91f8d4
16 changed files with 558 additions and 1440 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/package.json
View File

@@ -14,7 +14,6 @@
"@fortawesome/fontawesome-svg-core": "^7.1.0",
"@fortawesome/free-solid-svg-icons": "^7.1.0",
"@fortawesome/react-fontawesome": "^3.1.0",
"@noahspan/noahspan-components": "^2.0.0-alpha-14",
"@tailwindcss/typography": "^0.5.19",
"@tailwindcss/vite": "^4.1.13",
"@tanstack/react-table": "^8.21.3",

93
client/src/components/actionMenu/ActionMenu.tsx
View File

@@ -1,93 +0,0 @@
import { useState } from 'react';
import { IActionMenuProps } from './IActionMenuProps';
import {
IconButton,
Icon,
IconName,
Dropdown
} from '@noahspan/noahspan-components';
import { FormMode } from '../../enums/formMode';
import { useAuth } from 'react-oidc-context';
const ActionMenu = ({ id, onDelete, onOpenCloseForm, onOpenCloseTracks }: IActionMenuProps) => {
// const [anchorElAction, setAnchorElAction] = useState<null | HTMLElement>(
// null
// );
// const auth = useAuth();
// const onOpenActionMenu = (event: React.MouseEvent<HTMLElement>) => {
// setAnchorElAction(event.currentTarget);
// };
// const onCloseActionMenu = () => {
// setAnchorElAction(null);
// };
const options = [
'Item 1',
'Item 2'
]
return (
<>
<Dropdown
onOptionSelected={() => console.log('clicked!')}
options={options}
>
<IconButton>
<Icon className='text-2xl' iconName={IconName.ELLIPSIS_VERTICAL} />
</IconButton>
</Dropdown>
</>
// <div>
// <IconButton onClick={onOpenActionMenu}>
// <Icon iconName={IconName.ELLIPSIS_VERTICAL} size="sm" />
// </IconButton>
// <Menu
// anchorEl={anchorElAction}
// keepMounted
// open={Boolean(anchorElAction)}
// onClose={onCloseActionMenu}
// >
// {auth.isAuthenticated &&
// <>
// <MenuItem onClick={() => onOpenCloseForm(FormMode.EDIT, id)}>
// <ListItemIcon>
// <Icon iconName={IconName.PEN} size="lg" />
// </ListItemIcon>
// <ListItemText>Edit</ListItemText>
// </MenuItem>
// {onOpenCloseTracks &&
// <MenuItem onClick={() => onOpenCloseTracks!(FormMode.EDIT, id)}>
// <ListItemIcon>
// <Icon iconName={IconName.MAP_LOCATION_DOT} size="lg" />
// </ListItemIcon>
// <ListItemText>Tracks</ListItemText>
// </MenuItem>
// }
// </>
// }
// <MenuItem onClick={() => onOpenCloseForm(FormMode.VIEW, id)}>
// <ListItemIcon>
// <Icon iconName={IconName.EYE} size="lg" />
// </ListItemIcon>
// <ListItemText>View</ListItemText>
// </MenuItem>
// {auth.isAuthenticated &&
// <>
// <hr className="my-3" />
// <MenuItem onClick={() => onDelete(id)}>
// <ListItemIcon>
// <Icon iconName={IconName.TRASH} size="lg" />
// </ListItemIcon>
// <ListItemText>Delete</ListItemText>
// </MenuItem>
// </>
// }
// </Menu>
// </div>
);
};
export default ActionMenu;

8
client/src/components/actionMenu/IActionMenuProps.tsx
View File

@@ -1,8 +0,0 @@
import { FormMode } from '../../enums/formMode';
export interface IActionMenuProps {
id: string;
onDelete: (entryId: string) => void;
onOpenCloseForm: (formMode: FormMode, id: string) => void;
onOpenCloseTracks?: (formMode: FormMode, id: string) => void;
}

28
client/src/components/flights/Flights.tsx
View File

@@ -48,29 +48,17 @@ const Flights = () => {
<LogbookCard logs={state.flights} mode='flights' />
</div>
}
{/* {logsLoading && [...Array(6)].map((_element, index) => {
{logsLoading && [...Array(5)].map((_element, index) => {
return (
<div className='mb-5'>
<Card
key={index}
>
<div className='p-5'>
<div className='mb-2'><Skeleton height='h-[60px]' width='w-[200px]' /></div>
<div className='mb-2'><Skeleton height='h-[30px]' width='w-[200px]' /></div>
<div className='mb-2'><Skeleton height='h-[300px]' width='w-[300px]' /></div>
{[...Array(4)].map((_element, index) => {
return (
<>
<div className='mb-2'><Skeleton height='h-[20px]' width='w-[300px]' /></div>
<div className='mb-2'><Skeleton height='h-[20px]' width='w-[300px]' /></div>
</>
)
})}
</div>
</Card>
<div className='card bg-base-100 border border-base-300 p-2 mb-7'>
<div className='card-body' key={index}>
<div className='skeleton h-10 w-[150px]' />
<div className='skeleton h-[350px]' />
<div className='skeleton h-[65px]' />
</div>
</div>
)
})} */}
})}
</div>
)
}

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

@@ -1,8 +1,7 @@
import { useEffect, useReducer } from 'react';
import { useEffect, useReducer, useState } from 'react';
import { initialState, reducer } from './reducer';
import { AxiosError, AxiosResponse } from 'axios';
import { FormMode } from '../../enums/formMode';
import { authColumns, unauthColumns } from './columns';
import ConfirmationDialog from '../confirmationDialog/ConfirmationDialog';
import { LogbookEntry } from './LogbookEntry.interface';
import LogbookCard from '../logbookCard/LogbookCard';
@@ -21,6 +20,7 @@ import Alert from '../alert/Alert';
const Logbook: React.FC<unknown> = () => {
const [state, dispatch] = useReducer(reducer, initialState);
const [columnVisibility, setColumnVisibility] = useState({})
const logbookContext = useLogbookContext()
const { isUserLoggedIn } = useOidc();
const { userRole } = useUserRole();
@@ -51,7 +51,7 @@ const Logbook: React.FC<unknown> = () => {
accessorKey: 'date',
header: 'Date',
cell: (info: CellContext<LogbookEntry, unknown>) => {
const date = new Date(info.getValue() as string);
const date = new Date((info.getValue() as string).replace('Z', ''));
const formattedDate = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`
return formattedDate;
@@ -118,7 +118,7 @@ const Logbook: React.FC<unknown> = () => {
return (
<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">
<ul tabIndex={-1} className="dropdown-content menu bg-base-100 rounded-box w-52 p-2 shadow-sm border border-base-300 !z-[100]">
{isUserLoggedIn && userRole === UserRole.WRITE &&
<li><a onClick={() => onOpenCloseDrawer(FormMode.EDIT, info.row.original.id)}><FontAwesomeIcon icon={faPen} />Edit</a></li>
}
@@ -132,16 +132,7 @@ const Logbook: React.FC<unknown> = () => {
}
}
const unauthColumns: ColumnDef<LogbookEntry>[] = [
pilotName,
date,
aircraftMakeModel,
route,
durationOfFlight,
notes
]
const authColumns: ColumnDef<LogbookEntry>[] = [
const columns: ColumnDef<LogbookEntry>[] = [
pilotName,
date,
aircraftMakeModel,
@@ -345,18 +336,46 @@ const Logbook: React.FC<unknown> = () => {
},
notes,
actions
]
];
const table = useReactTable({
data: state.entries,
columns: columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
onColumnVisibilityChange: setColumnVisibility,
state: {
columnVisibility: columnVisibility
}
});
const getLogbookEntries = async () => {
try {
dispatch({ type: 'SET_IS_LOADING', payload: true });
const response: AxiosResponse = await httpClient.get(`api/logs`);
const entries: LogbookEntry[] = response.data;
entries.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
if (response.data.length > 0) {
dispatch({ type: 'SET_ENTRIES', payload: response.data });
const entries: LogbookEntry[] = response.data;
const entryColumns: string[] = Object.keys(entries[0]);
const columnVisibility: {[key: string]: boolean} = {}
for (const column of table.getAllLeafColumns()) {
const entryColumnExists = entryColumns.find((entryColumn) => entryColumn === column.id);
if (entryColumnExists) {
columnVisibility[column.id] = true
} else {
columnVisibility[column.id] = false
}
}
columnVisibility['pilotName'] = true
columnVisibility['actions'] = true
entries.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
setColumnVisibility(columnVisibility)
dispatch({ type: 'SET_ENTRIES', payload: entries });
if (state.alert) {
dispatch({ type: 'SET_ALERT', payload: undefined})
@@ -441,44 +460,6 @@ const Logbook: React.FC<unknown> = () => {
});
};
// useEffect(() => {
// let newColumns: ColumnDef<LogbookEntry>[];
// if (userRole === UserRole.WRITE) {
// newColumns = [...authColumns];
// } else {
// newColumns = [...unauthColumns];
// }
// const actionsColumnExists = newColumns.find((column) => column.id === 'actions');
// const tracksColumnExists = newColumns.find((column) => column.id === 'actions');
// if (!actionsColumnExists) {
// newColumns.push(actionsColumn);
// }
// if (!tracksColumnExists) {
// const notesColumnIndex = newColumns.findIndex((column) => column.id === 'notes')
// newColumns.splice(notesColumnIndex, 0, tracksColumn)
// }
// dispatch({ type: 'SET_COLUMNS', payload: newColumns })
// }, [isUserLoggedIn])
const table = useReactTable({
data: state.entries,
columns: authColumns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel()
});
const textAlignment = {
center: 'text-center',
left: 'text-start',
right: 'text-end'
};
useEffect(() => {
if (!logbookContext.state.isDrawerOpen) {
getLogbookEntries();
@@ -493,14 +474,6 @@ 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"
// >
// Add Entry
// </Button>
<button className='btn btn-primary'
onClick={() => onOpenCloseDrawer(FormMode.ADD)}
>
@@ -522,111 +495,109 @@ const Logbook: React.FC<unknown> = () => {
</Alert>
</div>
)}
{!state.isLoading && (
{!state.isLoading && state.entries.length > 0 && screenSize !== ScreenSize.SM && (
<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='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?.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 className={`${header.column.columnDef.meta?.headerAlign ? header.column.columnDef.meta?.headerAlign : ''}`}>
{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) => {
<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 (
<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={`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}
>
<div className={`${cell.column.columnDef.meta?.align ? cell.column.columnDef.meta?.align : ''}`}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
<th
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 className={`${header.column.columnDef.meta?.headerAlign ? header.column.columnDef.meta?.headerAlign : ''}`}>
{flexRender(
header.column.columnDef.header,
header.getContext()
)}
{/* {header.column.getCanFilter() ? (
<div>
<Filter column={header.column} table={table} />
</div>
</td>
);
})}
</tr>
) : null} */}
</div>
)}
</th>
);
})}
</>
</tbody>
<thead className='[&>tr]:first:rounded-lg bg-base-200'>
{table.getFooterGroups().map((footerGroup, index) => {
if (index === 0) {
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={footerGroup.id}>
{footerGroup.headers.map((header) => {
return (
<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}
>
<div className={`${header.column.columnDef.meta?.headerAlign ? header.column.columnDef.meta?.headerAlign : ''}`}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.footer,
header.getContext()
)
}
</div>
</td>
);
})}
</tr>
);
}
</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={`py-2 px-3 relative align-middle whitespace-normal text-small font-normal [&>*]: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}
>
<div className={`${cell.column.columnDef.meta?.align ? cell.column.columnDef.meta?.align : ''}`}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</div>
</td>
);
})}
</tr>
);
})}
</thead>
</table>
</div>
)}
{state.entries.length > 0 && screenSize === ScreenSize.SM &&
<LogbookCard logs={state.entries} onDelete={onDeleteLog} mode='logbook' onOpenCloseForm={onOpenCloseDrawer} />
}
</>
</tbody>
<thead className='[&>tr]:first:rounded-lg bg-base-200'>
{table.getFooterGroups().map((footerGroup, index) => {
if (index === 0) {
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={footerGroup.id}>
{footerGroup.headers.map((header) => {
return (
<td
className='roup/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}
>
<div className={`${header.column.columnDef.meta?.headerAlign ? header.column.columnDef.meta?.headerAlign : ''}`}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.footer,
header.getContext()
)
}
</div>
</td>
);
})}
</tr>
);
}
})}
</thead>
</table>
</div>
</div>
)}
{/* {state.isLoading && !state.alert && (
<>
<div>
<Loading size='xl' />
{state.entries.length > 0 && screenSize === ScreenSize.SM &&
<LogbookCard logs={state.entries} onDelete={onDeleteLog} mode='logbook' onOpenCloseForm={onOpenCloseDrawer} />
}
{state.isLoading && !state.alert && (
<div className='col-span-12 p-5 bg-base-100 border border-base-100 rounded-lg'>
<div className='col-span-12 justify-self-center'>
<span className='loading loading-spinner loading-xl' />
</div>
<div>
<div className='col-span-12 justify-self-center'>
Loading...
</div>
</>
)} */}
</div>
)}
</div>
{logbookContext.state.isDrawerOpen && (
<LogbookDrawer

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

@@ -1,291 +0,0 @@
import {
CellContext,
ColumnDef,
HeaderContext,
} from '@noahspan/noahspan-components';
import { LogbookEntry } from './LogbookEntry.interface';
const columnTotal = (info: HeaderContext<LogbookEntry, unknown>): number => {
const blah = info.table
const values: number[] = info.table.getPaginationRowModel().rows.map((row: any) => Number(row.getValue(info.column.id))).filter((value: any) => !Number.isNaN(value));
let total: number = 0;
if (values.length > 0) {
total = values.reduce((accumulator, currentValue) => accumulator + currentValue, total)
}
return total;
}
const pilotName: ColumnDef<LogbookEntry> = {
id: 'pilotName',
accessorKey: 'pilot',
header: 'Pilot',
footer: 'PAGE TOTALS',
cell: (info: CellContext<LogbookEntry, unknown>) => {
const pilot: any = info.getValue();
return pilot.name
}
}
const date: ColumnDef<LogbookEntry> = {
id: 'date',
accessorKey: 'date',
header: 'Date',
cell: (info: CellContext<LogbookEntry, unknown>) => {
const date = new Date(info.getValue() as string);
const formattedDate = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`
return formattedDate;
}
}
const aircraftMakeModel: ColumnDef<LogbookEntry> = {
id: 'aircraftMakeModel',
accessorKey: 'aircraftMakeModel',
header: 'Aircraft Make & Model'
}
const route: ColumnDef<LogbookEntry> = {
id: 'route',
header: 'Route of Flight',
meta: {
headerAlign: 'text-center',
className: 'border-l border-base-400'
},
columns: [
{
id: 'routeFrom',
accessorKey: 'routeFrom',
header: 'From'
},
{
id: 'routeTo',
accessorKey: 'routeTo',
header: 'To'
}
]
}
const durationOfFlight: ColumnDef<LogbookEntry> = {
id: 'durationOfFlight',
accessorKey: 'durationOfFlight',
header: 'Duration Of Flight',
meta: {
align: 'text-right',
headerAlign: 'text-right'
},
cell: (info: CellContext<LogbookEntry, unknown>) =>
info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : '',
footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : ''
}
const notes: ColumnDef<LogbookEntry> = {
id: 'notes',
accessorKey: 'notes',
header: 'Notes'
}
export const unauthColumns: ColumnDef<LogbookEntry>[] = [
pilotName,
date,
aircraftMakeModel,
route,
durationOfFlight,
notes
]
export const authColumns: ColumnDef<LogbookEntry>[] = [
pilotName,
date,
aircraftMakeModel,
{
id: 'aircraftIdentity',
accessorKey: 'aircraftIdentity',
header: 'Aircraft Identity',
},
route,
durationOfFlight,
{
id: 'singleEngineLand',
accessorKey: 'singleEngineLand',
header: 'Single Engine Land',
meta: {
align: 'text-right',
headerAlign: 'text-right'
},
cell: (info: CellContext<LogbookEntry, unknown>) =>
info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : '',
footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : ''
},
{
id: 'landings',
header: 'Landings',
meta: {
headerAlign: 'text-center'
},
columns: [
{
id: 'landingsDay',
accessorKey: 'landingsDay',
header: 'Day',
footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info) : '',
meta: {
align: 'text-right',
headerAlign: 'text-right'
}
},
{
id: 'landingsNight',
accessorKey: 'landingsNight',
header: 'Night',
footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info) : '',
meta: {
align: 'text-right',
headerAlign: 'text-right'
}
}
]
},
{
id: 'instrument',
header: 'Instrument',
meta: {
headerAlign: 'text-center'
},
columns: [
{
id: 'instrumentActual',
accessorKey: 'instrumentActual',
header: 'Actual',
footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
meta: {
align: 'text-right',
headerAlign: 'text-right'
},
cell: (info: CellContext<LogbookEntry, unknown>) =>
info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : '',
},
{
id: 'instrumentSimulated',
accessorKey: 'instrumentSimulated',
header: 'Simulated',
footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
meta: {
align: 'text-right',
headerAlign: 'text-right'
},
cell: (info: CellContext<LogbookEntry, unknown>) =>
info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
},
{
id: 'instrumentApproaches',
accessorKey: 'instrumentApproaches',
header: 'Approaches',
footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
meta: {
align: 'text-right',
headerAlign: 'text-right'
}
},
{
id: 'instrumentHolds',
accessorKey: 'instrumentHolds',
header: 'Holds',
footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
meta: {
align: 'text-right',
headerAlign: 'text-right'
}
},
{
id: 'instrumentNavTrack',
accessorKey: 'instrumentNavTrack',
header: 'Nav/Track',
footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
meta: {
align: 'text-right',
headerAlign: 'text-right'
}
}
]
},
{
id: 'experienceTraining',
header: 'Type of pilot experience or training',
meta: {
headerAlign: 'text-center'
},
columns: [
{
id: 'groundTrainingReceived',
accessorKey: 'groundTrainingReceived',
header: 'Ground Training Received',
footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
meta: {
align: 'text-right',
headerAlign: 'text-right'
},
cell: (info: CellContext<LogbookEntry, unknown>) =>
info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
},
{
id: 'flightTrainingReceived',
accessorKey: 'flightTrainingReceived',
header: 'Flight Training Received',
footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
meta: {
align: 'text-right',
headerAlign: 'text-right'
},
cell: (info: CellContext<LogbookEntry, unknown>) =>
info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
},
{
id: 'crossCountry',
accessorKey: 'crossCountry',
header: 'Cross Country',
footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
meta: {
align: 'text-right',
headerAlign: 'text-right'
},
cell: (info: CellContext<LogbookEntry, unknown>) =>
info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
},
{
id: 'night',
accessorKey: 'night',
header: 'Night',
footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
meta: {
align: 'text-right',
headerAlign: 'text-right'
},
cell: (info: CellContext<LogbookEntry, unknown>) =>
info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
},
{
id: 'solo',
accessorKey: 'solo',
header: 'Solo',
footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
meta: {
align: 'text-right',
headerAlign: 'text-right'
},
cell: (info: CellContext<LogbookEntry, unknown>) =>
info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
},
{
id: 'pilotInCommand',
accessorKey: 'pilotInCommand',
header: 'Pilot In Command',
footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
meta: {
align: 'text-right',
headerAlign: 'text-right'
},
cell: (info: CellContext<LogbookEntry, unknown>) =>
info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
}
]
},
notes
]

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

@@ -5,8 +5,8 @@ const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps
return (
<div>
{logs.map((log) => {
const date = new Date(log.date);
const formattedDate: string = `${date.getMonth()}/${date.getDate()}/${date.getFullYear()}`;
const date = new Date(log.date.replace('Z', ''));
const formattedDate: string = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;
return (
<div className='card bg-base-100 border border-base-300 p-2'>

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

@@ -9,7 +9,7 @@ import { FormMode } from "../../enums/formMode";
import httpClient from "../../httpClient/httpClient";
import { AxiosError } from "axios";
import { useLogbookContext } from "../../hooks/logbookContext/UseLogbookContext";
import { useState } from "react";
import { ChangeEventHandler, MouseEventHandler, useState } from "react";
const LogbookDrawer = ({ onOpenClose }: LogbookDrawerProps) => {
const [activeTab, setActiveTab] = useState<string>('time');
@@ -73,16 +73,12 @@ const LogbookDrawer = ({ onOpenClose }: LogbookDrawerProps) => {
setActiveTab(tab)
}
const onTabClicked = (event: any) => {
setActiveTab(event.target.ariaLabel)
}
return (
<div className='drawer drawer-end'
// closeButton={
// <Button isIconOnly>
// <FontAwesomeIcon icon={faXmark} />
// </Button>
// }
// isOpen={logbookContext.state.isDrawerOpen}
// onClose={onCancel}
>
<div className='drawer drawer-end'>
<input type='checkbox' className='drawer-toggle' onChange={() => {}} checked={logbookContext.state.isDrawerOpen} />
<div className="drawer-side">
<label
@@ -93,9 +89,18 @@ const LogbookDrawer = ({ onOpenClose }: LogbookDrawerProps) => {
<div className='menu bg-base-100 text-base-content min-h-full p-4' style={{ width: '25%' }}>
<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>
<div className='grid grid-cols-12 mb-6'>
<div className="col-span-10">
<h2 className="mt-0 mb-0 self-center">
{`${logbookContext.state.formMode.toString().toLowerCase().charAt(0).toUpperCase() + logbookContext.state.formMode.toString().slice(1).toLowerCase()} Entry`}
</h2>
</div>
<div className="col-span-2 justify-self-end self-center">
<button className="btn btn-ghost" onClick={onCancel}>
<FontAwesomeIcon icon={faXmark} />
</button>
</div>
</div>
{logbookContext.state.formAlert && (
<Alert
className='mb-5'
@@ -109,7 +114,7 @@ const LogbookDrawer = ({ onOpenClose }: LogbookDrawerProps) => {
)}
<div className='tabs tabs-lift mb-5'>
<label className='tab'>
<input type='radio' name='my_tabs' defaultChecked={true} />
<input aria-label='time' type='radio' name='logbook_drawer_tabs' onChange={onTabClicked} checked={activeTab === 'time' ? true : false} />
<FontAwesomeIcon className='mr-1'icon={faClock} />
Time
</label>
@@ -119,7 +124,7 @@ const LogbookDrawer = ({ onOpenClose }: LogbookDrawerProps) => {
{logbookContext.state.formMode !== FormMode.ADD &&
<>
<label className='tab'>
<input type='radio' name='my_tabs'/>
<input aria-label='tracks' type='radio' name='logbook_drawer_tabs' onChange={onTabClicked} checked={activeTab === 'tracks' ? true : false} />
<FontAwesomeIcon className='mr-1' icon={faMapLocationDot} />
Tracks
</label>

48
client/src/components/pilotCard/PilotCard.tsx
View File

@@ -1,26 +1,26 @@
import { Card, CardActions, CardBody, CardHeader} from "@noahspan/noahspan-components"
import { PilotCardProps } from "./PilotCardProps.interface"
import ActionMenu from "../actionMenu/ActionMenu"
// import { Card, CardActions, CardBody, CardHeader} from "@noahspan/noahspan-components"
// import { PilotCardProps } from "./PilotCardProps.interface"
// import ActionMenu from "../actionMenu/ActionMenu"
const PilotCard = ({ pilots, onDelete, onOpenCloseForm }: PilotCardProps) => {
return (
<div>
{pilots.map((pilot) => {
return (
<div>
<Card key={pilot.id}>
<CardBody>
<CardHeader>{pilot.name}</CardHeader>
<CardActions>
<ActionMenu id={pilot.id} onDelete={onDelete} onOpenCloseForm={onOpenCloseForm} />
</CardActions>
</CardBody>
</Card>
</div>
)
})}
</div>
)
}
// const PilotCard = ({ pilots, onDelete, onOpenCloseForm }: PilotCardProps) => {
// return (
// <div>
// {pilots.map((pilot) => {
// return (
// <div>
// <Card key={pilot.id}>
// <CardBody>
// <CardHeader>{pilot.name}</CardHeader>
// <CardActions>
// <ActionMenu id={pilot.id} onDelete={onDelete} onOpenCloseForm={onOpenCloseForm} />
// </CardActions>
// </CardBody>
// </Card>
// </div>
// )
// })}
// </div>
// )
// }
export default PilotCard;
// export default PilotCard;

32
client/src/components/pilotForm/PilotForm.tsx
View File

@@ -4,9 +4,9 @@ import { IPilotFormProps } from './IPilotFormProps';
import { AxiosError, AxiosResponse } from 'axios';
import { FormMode } from '../../enums/formMode';
import { Person } from '@microsoft/microsoft-graph-types';
import PilotFormCertificates from '../pilotFormCertificates/PilotFormCertificates';
import PilotFormEndorsements from '../pilotFormEndorsements/PilotFormEndorsements';
import PilotFormMedical from '../pilotFormMedical/PilotFormMedical';
// import PilotFormCertificates from '../pilotFormCertificates/PilotFormCertificates';
// import PilotFormEndorsements from '../pilotFormEndorsements/PilotFormEndorsements';
// import PilotFormMedical from '../pilotFormMedical/PilotFormMedical';
import { useOidc } from '../../auth/oidcConfig';
import httpClient from '../../httpClient/httpClient';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -104,18 +104,7 @@ const PilotForm: React.FC<IPilotFormProps> = ({
}, [pilotId]);
return (
<div className='drawer drawer-end'
// closeButton={
// <Button isIconOnly>
// <FontAwesomeIcon icon={faXmark} />
// </Button>
// }
// isOpen={isDrawerOpen}
// placement='right'
// data-testid="pilot-drawer"
// onClose={onCancel}
// size='xl'
>
<div className='drawer drawer-end'>
<input type='checkbox' className='drawer-toggle' onChange={() => {}} checked={isDrawerOpen} />
<div className='drawer-side'>
<label
@@ -126,10 +115,17 @@ const PilotForm: React.FC<IPilotFormProps> = ({
<div className='menu bg-base-100 text-base-content min-h-full p-4' style={{ width: '25%' }}>
<FormProvider {...methods}>
<form className='prose max-w-none' onSubmit={methods.handleSubmit(onSubmit)} style={{ paddingBottom: '50px' }}>
<h2>
{`${mode.toString().toLowerCase().charAt(0).toUpperCase() + mode.toString().slice(1).toLowerCase()} Pilot`}
</h2>
<div className='grid grid-cols-12 gap-3'>
<div className="col-span-10">
<h2 className="mt-0 mb-0 self-center">
{`${mode.toString().toLowerCase().charAt(0).toUpperCase() + mode.toString().slice(1).toLowerCase()} Pilot`}
</h2>
</div>
<div className="col-span-2 justify-self-end self-center">
<button className="btn btn-ghost" onClick={onCancel}>
<FontAwesomeIcon icon={faXmark} />
</button>
</div>
<div className='col-span-3 self-center'>
<span>Name *</span>
</div>

298
client/src/components/pilotFormCertificates/PilotFormCertificates.tsx
View File

@@ -1,153 +1,153 @@
import { PilotFormCertificatesProps } from './PilotFormCertificatesProps.interface';
import {
Button,
DatePicker,
Icon,
IconButton,
IconName,
Input,
Select
} from '@noahspan/noahspan-components';
import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
import { FormMode } from '../../enums/formMode';
// import { PilotFormCertificatesProps } from './PilotFormCertificatesProps.interface';
// import {
// Button,
// DatePicker,
// Icon,
// IconButton,
// IconName,
// Input,
// Select
// } from '@noahspan/noahspan-components';
// import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
// import { FormMode } from '../../enums/formMode';
const PilotFormCertificates = ({
isDisabled,
mode
}: PilotFormCertificatesProps ) => {
const {
control,
formState: { errors },
} = useFormContext();
// const PilotFormCertificates = ({
// isDisabled,
// mode
// }: PilotFormCertificatesProps ) => {
// const {
// control,
// formState: { errors },
// } = useFormContext();
const { fields, append, remove } = useFieldArray({
name: 'certificates',
control
});
// const { fields, append, remove } = useFieldArray({
// name: 'certificates',
// control
// });
return (
<div>
{fields.length > 0 || mode !== FormMode.VIEW &&
<div>
<h5>Certificates</h5>
</div>
}
{fields.length > 0 && (
<>
<div>
<h6>Type</h6>
</div>
<div>
<h6>Number</h6>
</div>
<div>
<h6>Date of Issue</h6>
</div>
<div>
</div>
{fields.map((field, index) => {
return (
<>
<div>
<Controller
name={`certificates.${index}.type`}
control={control}
render={({ field: { onChange, value } }) => {
return (
<Select
disabled={isDisabled}
onChange={onChange}
options={
[
{
label: 'Student',
value: 'student'
},
{
label: 'Private',
value: 'private'
},
{
label: 'Instrument',
value: 'instrument'
},
{
label: 'Recreational',
value: 'recreational'
},
{
label: 'Sport',
value: 'sport'
}
]
}
value={value}
/>
);
}}
/>
</div>
<div>
<Controller
name={`certificates.${index}.number`}
control={control}
render={({ field: { onChange, value } }) => {
return (
<Input
disabled={isDisabled}
onChange={onChange}
value={value}
/>
)
}}
/>
</div>
<div>
<Controller
name={`certificates.${index}.dateOfIssue`}
control={control}
render={({ field: { onChange, value } }) => {
return (
<DatePicker
disabled={isDisabled}
onChange={onChange}
value={value}
/>
);
}}
/>
</div>
<div>
<IconButton
disabled={isDisabled}
onClick={() => remove(index)}
>
<Icon iconName={IconName.TRASH} size='sm' />
</IconButton>
</div>
</>
);
})}
</>
)}
{!isDisabled &&
<div>
<Button
onClick={() => {
append({
type: '',
number: '',
dateOfIssue: null
});
}}
startContent={<Icon iconName={IconName.PLUS} />}
>
Add Certificate
</Button>
</div>
}
</div>
);
};
// return (
// <div>
// {fields.length > 0 || mode !== FormMode.VIEW &&
// <div>
// <h5>Certificates</h5>
// </div>
// }
// {fields.length > 0 && (
// <>
// <div>
// <h6>Type</h6>
// </div>
// <div>
// <h6>Number</h6>
// </div>
// <div>
// <h6>Date of Issue</h6>
// </div>
// <div>
// </div>
// {fields.map((field, index) => {
// return (
// <>
// <div>
// <Controller
// name={`certificates.${index}.type`}
// control={control}
// render={({ field: { onChange, value } }) => {
// return (
// <Select
// disabled={isDisabled}
// onChange={onChange}
// options={
// [
// {
// label: 'Student',
// value: 'student'
// },
// {
// label: 'Private',
// value: 'private'
// },
// {
// label: 'Instrument',
// value: 'instrument'
// },
// {
// label: 'Recreational',
// value: 'recreational'
// },
// {
// label: 'Sport',
// value: 'sport'
// }
// ]
// }
// value={value}
// />
// );
// }}
// />
// </div>
// <div>
// <Controller
// name={`certificates.${index}.number`}
// control={control}
// render={({ field: { onChange, value } }) => {
// return (
// <Input
// disabled={isDisabled}
// onChange={onChange}
// value={value}
// />
// )
// }}
// />
// </div>
// <div>
// <Controller
// name={`certificates.${index}.dateOfIssue`}
// control={control}
// render={({ field: { onChange, value } }) => {
// return (
// <DatePicker
// disabled={isDisabled}
// onChange={onChange}
// value={value}
// />
// );
// }}
// />
// </div>
// <div>
// <IconButton
// disabled={isDisabled}
// onClick={() => remove(index)}
// >
// <Icon iconName={IconName.TRASH} size='sm' />
// </IconButton>
// </div>
// </>
// );
// })}
// </>
// )}
// {!isDisabled &&
// <div>
// <Button
// onClick={() => {
// append({
// type: '',
// number: '',
// dateOfIssue: null
// });
// }}
// startContent={<Icon iconName={IconName.PLUS} />}
// >
// Add Certificate
// </Button>
// </div>
// }
// </div>
// );
// };
export default PilotFormCertificates;
// export default PilotFormCertificates;

250
client/src/components/pilotFormEndorsements/PilotFormEndorsements.tsx
View File

@@ -1,129 +1,129 @@
import { PilotFormEndorsementsProps } from './PilotFormEndorsementsProps.interface';
import {
Button,
DatePicker,
Icon,
IconButton,
IconName,
Select
} from '@noahspan/noahspan-components';
import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
import { FormMode } from '../../enums/formMode';
// import { PilotFormEndorsementsProps } from './PilotFormEndorsementsProps.interface';
// import {
// Button,
// DatePicker,
// Icon,
// IconButton,
// IconName,
// Select
// } from '@noahspan/noahspan-components';
// import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
// import { FormMode } from '../../enums/formMode';
const PilotFormEndorsements = ({
mode,
isDisabled
}: PilotFormEndorsementsProps) => {
const {
control,
formState: { errors },
setValue
} = useFormContext();
// const PilotFormEndorsements = ({
// mode,
// isDisabled
// }: PilotFormEndorsementsProps) => {
// const {
// control,
// formState: { errors },
// setValue
// } = useFormContext();
const { fields, append, remove } = useFieldArray({
name: 'endorsements',
control
});
// const { fields, append, remove } = useFieldArray({
// name: 'endorsements',
// control
// });
return (
<div>
{fields.length > 0 || mode !== FormMode.VIEW &&
<div>
<h5>Endorsements</h5>
</div>
}
{fields.length > 0 && (
<>
<div>
<h6>Type</h6>
</div>
<div>
<h6>Date of Issue</h6>
</div>
<div></div>
{fields.map((field, index) => {
return (
<>
<div>
<Controller
name={`endorsements.${index}.type`}
control={control}
render={({ field: { onChange, value } }) => {
return (
<Select
disabled={isDisabled}
onChange={onChange}
options={
[
{
label: 'Complex',
value: 'complex'
},
{
label: 'High Performance',
value: 'highPerfomance'
},
{
label: 'High Altitude',
value: 'highAltitude'
},
{
label: 'Tailwheel',
value: 'tailwheel'
}
]
}
value={value ? value : ''}
/>
);
}}
/>
</div>
<div>
<Controller
name={`endorsements.${index}.dateOfIssue`}
control={control}
render={({ field: { onChange, value } }) => {
return (
<DatePicker
disabled={isDisabled}
onChange={onChange}
value={value}
/>
);
}}
/>
</div>
<div>
<IconButton
disabled={isDisabled}
onClick={() => remove(index)}
>
<Icon iconName={IconName.TRASH} size="sm" />
</IconButton>
</div>
</>
);
})}
</>
)}
{!isDisabled &&
<div>
<Button
onClick={() => {
append({
type: '',
dateOfIssue: null
});
}}
startContent={<Icon iconName={IconName.PLUS} />}
>
Add Endorsement
</Button>
</div>
}
</div>
);
};
// return (
// <div>
// {fields.length > 0 || mode !== FormMode.VIEW &&
// <div>
// <h5>Endorsements</h5>
// </div>
// }
// {fields.length > 0 && (
// <>
// <div>
// <h6>Type</h6>
// </div>
// <div>
// <h6>Date of Issue</h6>
// </div>
// <div></div>
// {fields.map((field, index) => {
// return (
// <>
// <div>
// <Controller
// name={`endorsements.${index}.type`}
// control={control}
// render={({ field: { onChange, value } }) => {
// return (
// <Select
// disabled={isDisabled}
// onChange={onChange}
// options={
// [
// {
// label: 'Complex',
// value: 'complex'
// },
// {
// label: 'High Performance',
// value: 'highPerfomance'
// },
// {
// label: 'High Altitude',
// value: 'highAltitude'
// },
// {
// label: 'Tailwheel',
// value: 'tailwheel'
// }
// ]
// }
// value={value ? value : ''}
// />
// );
// }}
// />
// </div>
// <div>
// <Controller
// name={`endorsements.${index}.dateOfIssue`}
// control={control}
// render={({ field: { onChange, value } }) => {
// return (
// <DatePicker
// disabled={isDisabled}
// onChange={onChange}
// value={value}
// />
// );
// }}
// />
// </div>
// <div>
// <IconButton
// disabled={isDisabled}
// onClick={() => remove(index)}
// >
// <Icon iconName={IconName.TRASH} size="sm" />
// </IconButton>
// </div>
// </>
// );
// })}
// </>
// )}
// {!isDisabled &&
// <div>
// <Button
// onClick={() => {
// append({
// type: '',
// dateOfIssue: null
// });
// }}
// startContent={<Icon iconName={IconName.PLUS} />}
// >
// Add Endorsement
// </Button>
// </div>
// }
// </div>
// );
// };
export default PilotFormEndorsements;
// export default PilotFormEndorsements;

148
client/src/components/pilotFormMedical/PilotFormMedical.tsx
View File

@@ -1,77 +1,77 @@
import { DatePicker, Select } from '@noahspan/noahspan-components';
import { Controller, useFormContext } from "react-hook-form"
import { PilotFormMedicalProps } from "./PilotFormMedicalProps.interface";
// import { DatePicker, Select } from '@noahspan/noahspan-components';
// import { Controller, useFormContext } from "react-hook-form"
// import { PilotFormMedicalProps } from "./PilotFormMedicalProps.interface";
const PilotFormMedical = ({ isDisabled }: PilotFormMedicalProps) => {
const {
control,
formState: { errors },
setValue
} = useFormContext();
// const PilotFormMedical = ({ isDisabled }: PilotFormMedicalProps) => {
// const {
// control,
// formState: { errors },
// setValue
// } = useFormContext();
return (
<div>
<div>
<h5>Medical</h5>
</div>
<div>
<h6>Class</h6>
</div>
<div>
<Controller
name="medicalClass"
control={control}
render={({ field: { onChange, value } }) => {
return (
<Select
disabled={isDisabled}
onChange={onChange}
options={
[
{
label: 'First',
value: 'first'
},
{
label: 'Second',
value: 'second'
},
{
label: 'Third',
value: 'third'
},
{
label: 'Basic Med',
value: 'basicMed'
}
]
}
value={value ? value : ''}
/>
);
}}
/>
</div>
<div>
<h6>Expiration</h6>
</div>
<div>
<Controller
name="medicalExpiration"
control={control}
render={({ field: { onChange, value } }) => {
return (
<DatePicker
disabled={isDisabled}
onChange={onChange}
value={value}
/>
);
}}
/>
</div>
</div>
)
}
// return (
// <div>
// <div>
// <h5>Medical</h5>
// </div>
// <div>
// <h6>Class</h6>
// </div>
// <div>
// <Controller
// name="medicalClass"
// control={control}
// render={({ field: { onChange, value } }) => {
// return (
// <Select
// disabled={isDisabled}
// onChange={onChange}
// options={
// [
// {
// label: 'First',
// value: 'first'
// },
// {
// label: 'Second',
// value: 'second'
// },
// {
// label: 'Third',
// value: 'third'
// },
// {
// label: 'Basic Med',
// value: 'basicMed'
// }
// ]
// }
// value={value ? value : ''}
// />
// );
// }}
// />
// </div>
// <div>
// <h6>Expiration</h6>
// </div>
// <div>
// <Controller
// name="medicalExpiration"
// control={control}
// render={({ field: { onChange, value } }) => {
// return (
// <DatePicker
// disabled={isDisabled}
// onChange={onChange}
// value={value}
// />
// );
// }}
// />
// </div>
// </div>
// )
// }
export default PilotFormMedical
// export default PilotFormMedical

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

@@ -4,7 +4,7 @@ import { AxiosError, AxiosResponse } from 'axios';
import { FormMode } from '../../enums/formMode';
import { initialState, reducer } from './reducer';
import ConfirmationDialog from '../confirmationDialog/ConfirmationDialog';
import PilotCard from '../pilotCard/PilotCard';
// import PilotCard from '../pilotCard/PilotCard';
import { useUserRole } from '../../hooks/userRole/UseUserRole';
import { UserRole } from '../../enums/userRole';
import httpClient from '../../httpClient/httpClient'
@@ -177,7 +177,7 @@ const Pilots: React.FC<unknown> = () => {
<h1>Pilots</h1>
</div>
<div className='col-span-2 justify-self-end self-center'>
{userRole === UserRole.WRITE &&
{!state.isLoading && userRole === UserRole.WRITE &&
<button
className='btn btn-primary'
onClick={() => onOpenClosePilotForm(FormMode.ADD)}
@@ -201,8 +201,8 @@ const Pilots: React.FC<unknown> = () => {
</Alert>
</div>
)}
<div className='col-span-12 bg-base-100 p-5 border border-base-100 rounded-lg'>
{state.pilots.length > 0 && screenSize !== ScreenSize.SM &&
{state.pilots.length > 0 && screenSize !== ScreenSize.SM &&
<div className='col-span-12 bg-base-100 p-5 border border-base-100 rounded-lg'>
<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) => (
@@ -257,11 +257,11 @@ const Pilots: React.FC<unknown> = () => {
</>
</tbody>
</table>
}
{state.pilots.length > 0 && screenSize === ScreenSize.SM &&
<PilotCard pilots={state.pilots} onDelete={onDeletePilot} onOpenCloseForm={onOpenClosePilotForm} />
}
</div>
</div>
}
{/* {state.pilots.length > 0 && screenSize === ScreenSize.SM &&
<PilotCard pilots={state.pilots} onDelete={onDeletePilot} onOpenCloseForm={onOpenClosePilotForm} />
} */}
</div>
{state.isFormOpen && (
<PilotForm

2
client/src/components/tracksForm/TracksForm.tsx
View File

@@ -122,7 +122,7 @@ const TracksForm = () => {
</>
)
})}
{logbookContext.state.formMode === FormMode.ADD &&
{logbookContext.state.formMode === FormMode.EDIT &&
<div className='col-span-12'>
<label
className='btn cursor-pointer w-full'