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

making logbook responsive (#65)

Browse Source 
* making logbook responsive

* making logbook responsive
This commit was merged in pull request #65.
This commit is contained in:
noahspannbauer
2025-03-17 19:32:53 -05:00
committed by GitHub
parent 98cfe69afb
commit 09f19b178f
7 changed files with 642 additions and 530 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/package.json
View File

@@ -13,7 +13,7 @@
"dependencies": {
"@azure/msal-browser": "^4.0.1",
"@azure/msal-react": "^3.0.1",
"@noahspan/noahspan-components": "^1.4.0",
"@noahspan/noahspan-components": "^1.5.1",
"axios": "^1.7.2",
"dotenv": "^16.4.7",
"react": "^18.3.1",

113
app/src/components/logForm/LogForm.tsx
View File

@@ -13,7 +13,9 @@ import {
IconName,
Select,
TextField,
theme,
Typography,
useMediaQuery
} from '@noahspan/noahspan-components';
import { useForm, Controller, FormProvider } from 'react-hook-form';
import { ILogFormProps } from './ILogFormProps';
@@ -63,6 +65,7 @@ const LogForm: React.FC<ILogFormProps> = ({
};
const methods = useForm();
const { pilots } = usePilots();
const isMedium = useMediaQuery(theme.breakpoints.up('md'));
const onCancel = () => {
methods.reset(defaultValues);
@@ -166,7 +169,7 @@ const LogForm: React.FC<ILogFormProps> = ({
PaperProps={{
sx: {
padding: '30px',
width: '33%'
width: isMedium ? '33%' : '75%'
}
}}
>
@@ -194,10 +197,10 @@ const LogForm: React.FC<ILogFormProps> = ({
</Alert>
</Grid>
)}
<Grid alignItems="center" display="flex" size={4}>
<Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
<Typography variant="body1">Pilot *</Typography>
</Grid>
<Grid size={8}>
<Grid size={isMedium ? 8 : 12}>
<Controller
name="pilotId"
control={methods.control}
@@ -229,10 +232,10 @@ const LogForm: React.FC<ILogFormProps> = ({
}}
/>
</Grid>
<Grid alignItems="center" display="flex" size={4}>
<Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
<Typography variant="body1">Date *</Typography>
</Grid>
<Grid size={8}>
<Grid size={isMedium ? 8 : 12}>
<Controller
name="date"
control={methods.control}
@@ -245,10 +248,10 @@ const LogForm: React.FC<ILogFormProps> = ({
)}
/>
</Grid>
<Grid alignItems="center" display="flex" size={4}>
<Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
<Typography variant="body1">Aircraft Make and Model *</Typography>
</Grid>
<Grid size={8}>
<Grid size={isMedium ? 8 : 12}>
<Controller
name="aircraftMakeModel"
control={methods.control}
@@ -268,10 +271,12 @@ const LogForm: React.FC<ILogFormProps> = ({
)}
/>
</Grid>
<Grid alignItems="center" display="flex" size={4}>
{isAuthenticated &&
<>
<Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
<Typography variant="body1">Aircraft Identity *</Typography>
</Grid>
<Grid size={8}>
<Grid size={isMedium ? 8 : 12}>
<Controller
name="aircraftIdentity"
control={methods.control}
@@ -291,10 +296,12 @@ const LogForm: React.FC<ILogFormProps> = ({
)}
/>
</Grid>
<Grid alignItems="center" display="flex" size={4}>
</>
}
<Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
<Typography variant="body1">Route From</Typography>
</Grid>
<Grid size={8}>
<Grid size={isMedium ? 8 : 12}>
<Controller
name="routeFrom"
control={methods.control}
@@ -314,10 +321,10 @@ const LogForm: React.FC<ILogFormProps> = ({
)}
/>
</Grid>
<Grid alignItems="center" display="flex" size={4}>
<Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
<Typography variant="body1">Route To</Typography>
</Grid>
<Grid size={8}>
<Grid size={isMedium ? 8 : 12}>
<Controller
name="routeTo"
control={methods.control}
@@ -337,10 +344,10 @@ const LogForm: React.FC<ILogFormProps> = ({
)}
/>
</Grid>
<Grid alignItems="center" display="flex" size={4}>
<Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
<Typography variant="body1">Duration Of Flight</Typography>
</Grid>
<Grid size={8}>
<Grid size={isMedium ? 8 : 12}>
<Controller
name="durationOfFlight"
control={methods.control}
@@ -366,10 +373,12 @@ const LogForm: React.FC<ILogFormProps> = ({
)}
/>
</Grid>
<Grid alignItems="center" display="flex" size={4}>
{isAuthenticated &&
<>
<Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
<Typography variant="body1">Single Engine Land</Typography>
</Grid>
<Grid size={8}>
<Grid size={isMedium ? 8 : 12}>
<Controller
name="singleEngineLand"
control={methods.control}
@@ -395,10 +404,14 @@ const LogForm: React.FC<ILogFormProps> = ({
)}
/>
</Grid>
<Grid alignItems="center" display="flex" size={4}>
</>
}
{isAuthenticated &&
<>
<Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
<Typography variant="body1">Simulator or ATD</Typography>
</Grid>
<Grid size={8}>
<Grid size={isMedium ? 8 : 12}>
<Controller
name="simulatorAtd"
control={methods.control}
@@ -424,6 +437,9 @@ const LogForm: React.FC<ILogFormProps> = ({
)}
/>
</Grid>
</>
}
{isAuthenticated &&
<Grid size={12}>
<Accordion defaultExpanded>
<AccordionSummary expandIcon={<Icon iconName={IconName.CHEVRON_DOWN} />}>
@@ -431,10 +447,10 @@ const LogForm: React.FC<ILogFormProps> = ({
</AccordionSummary>
<AccordionDetails>
<Grid container spacing={2}>
<Grid alignItems="center" display="flex" size={4}>
<Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
<Typography variant="body1">Day</Typography>
</Grid>
<Grid size={8}>
<Grid size={isMedium ? 8 : 12}>
<Controller
name="landingsDay"
control={methods.control}
@@ -462,10 +478,10 @@ const LogForm: React.FC<ILogFormProps> = ({
)}
/>
</Grid>
<Grid alignItems="center" display="flex" size={4}>
<Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
<Typography variant="body1">Night</Typography>
</Grid>
<Grid size={8}>
<Grid size={isMedium ? 8 : 12}>
<Controller
name="landingsNight"
control={methods.control}
@@ -497,6 +513,8 @@ const LogForm: React.FC<ILogFormProps> = ({
</AccordionDetails>
</Accordion>
</Grid>
}
{isAuthenticated &&
<Grid size={12}>
<Accordion>
<AccordionSummary expandIcon={<Icon iconName={IconName.CHEVRON_DOWN} />}>
@@ -504,10 +522,10 @@ const LogForm: React.FC<ILogFormProps> = ({
</AccordionSummary>
<AccordionDetails>
<Grid container spacing={2}>
<Grid alignItems="center" display="flex" size={4}>
<Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
<Typography variant="body1">Actual</Typography>
</Grid>
<Grid size={8}>
<Grid size={isMedium ? 8 : 12}>
<Controller
name="instrumentActual"
control={methods.control}
@@ -535,10 +553,10 @@ const LogForm: React.FC<ILogFormProps> = ({
)}
/>
</Grid>
<Grid alignItems="center" display="flex" size={4}>
<Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
<Typography variant="body1">Simulated</Typography>
</Grid>
<Grid size={8}>
<Grid size={isMedium ? 8 : 12}>
<Controller
name="instrumentSimulated"
control={methods.control}
@@ -566,12 +584,12 @@ const LogForm: React.FC<ILogFormProps> = ({
)}
/>
</Grid>
<Grid alignItems="center" display="flex" size={4}>
<Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
<Typography variant="body1">
Instrument Approaches
</Typography>
</Grid>
<Grid size={8}>
<Grid size={isMedium ? 8 : 12}>
<Controller
name="instrumentApproaches"
control={methods.control}
@@ -602,7 +620,7 @@ const LogForm: React.FC<ILogFormProps> = ({
<Grid alignItems="center" display="flex" size={4}>
<Typography variant="body1">Holds</Typography>
</Grid>
<Grid size={8}>
<Grid size={isMedium ? 8 : 12}>
<Controller
name="instrumentHolds"
control={methods.control}
@@ -630,10 +648,10 @@ const LogForm: React.FC<ILogFormProps> = ({
)}
/>
</Grid>
<Grid alignItems="center" display="flex" size={4}>
<Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
<Typography variant="body1">Nav / Track</Typography>
</Grid>
<Grid size={8}>
<Grid size={isMedium ? 8 : 12}>
<Controller
name="instrumentNavTrack"
control={methods.control}
@@ -665,6 +683,8 @@ const LogForm: React.FC<ILogFormProps> = ({
</AccordionDetails>
</Accordion>
</Grid>
}
{isAuthenticated &&
<Grid size={12}>
<Accordion defaultExpanded>
<AccordionSummary expandIcon={<Icon iconName={IconName.CHEVRON_DOWN} />}>
@@ -672,12 +692,12 @@ const LogForm: React.FC<ILogFormProps> = ({
</AccordionSummary>
<AccordionDetails>
<Grid container spacing={2}>
<Grid alignItems="center" display="flex" size={4}>
<Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
<Typography variant="body1">
Ground Training Received
</Typography>
</Grid>
<Grid size={8}>
<Grid size={isMedium ? 8 : 12}>
<Controller
name="groundTrainingReceived"
control={methods.control}
@@ -705,12 +725,12 @@ const LogForm: React.FC<ILogFormProps> = ({
)}
/>
</Grid>
<Grid alignItems="center" display="flex" size={4}>
<Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
<Typography variant="body1">
Flight Training Received
</Typography>
</Grid>
<Grid size={8}>
<Grid size={isMedium ? 8 : 12}>
<Controller
name="flightTrainingReceived"
control={methods.control}
@@ -738,10 +758,10 @@ const LogForm: React.FC<ILogFormProps> = ({
)}
/>
</Grid>
<Grid alignItems="center" display="flex" size={4}>
<Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
<Typography variant="body1">Cross Country</Typography>
</Grid>
<Grid size={8}>
<Grid size={isMedium ? 8 : 12}>
<Controller
name="crossCountry"
control={methods.control}
@@ -769,10 +789,10 @@ const LogForm: React.FC<ILogFormProps> = ({
)}
/>
</Grid>
<Grid alignItems="center" display="flex" size={4}>
<Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
<Typography variant="body1">Night</Typography>
</Grid>
<Grid size={8}>
<Grid size={isMedium ? 8 : 12}>
<Controller
name="night"
control={methods.control}
@@ -800,10 +820,10 @@ const LogForm: React.FC<ILogFormProps> = ({
)}
/>
</Grid>
<Grid alignItems="center" display="flex" size={4}>
<Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
<Typography variant="body1">Solo</Typography>
</Grid>
<Grid size={8}>
<Grid size={isMedium ? 8 : 12}>
<Controller
name="solo"
control={methods.control}
@@ -831,10 +851,10 @@ const LogForm: React.FC<ILogFormProps> = ({
)}
/>
</Grid>
<Grid alignItems="center" display="flex" size={4}>
<Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
<Typography variant="body1">Pilot in Command</Typography>
</Grid>
<Grid size={8}>
<Grid size={isMedium ? 8 : 12}>
<Controller
name="pilotInCommand"
control={methods.control}
@@ -866,10 +886,11 @@ const LogForm: React.FC<ILogFormProps> = ({
</AccordionDetails>
</Accordion>
</Grid>
<Grid size={4}>
}
<Grid size={isMedium ? 4 : 12}>
<Typography variant="body1">Notes</Typography>
</Grid>
<Grid size={8}>
<Grid size={isMedium ? 8 : 12}>
<Controller
name="notes"
control={methods.control}

2
app/src/components/logbook/ILogbookEntry.ts
View File

@@ -3,6 +3,7 @@ export interface ILogbookEntry {
rowKey: string;
id: string;
pilotId: string;
pilotName: string;
date: string;
aircraftMakeModel: string;
aircraftIdentity: string;
@@ -24,4 +25,5 @@ export interface ILogbookEntry {
night: number | null;
solo: number | null;
pilotInCommand: number | null;
notes: string;
}

15
app/src/components/logbook/Logbook.tsx
View File

@@ -10,7 +10,9 @@ import {
IconName,
Spinner,
Table,
Typography
theme,
Typography,
useMediaQuery
} from '@noahspan/noahspan-components';
import { initialState, reducer } from './reducer';
import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
@@ -21,12 +23,14 @@ import { FormMode } from '../../enums/formMode';
import ActionMenu from '../actionMenu/ActionMenu';
import ConfirmationDialog from '../confirmationDialog/ConfirmationDialog';
import { ILogbookEntry } from './ILogbookEntry';
import LogbookCard from '../logbookCard/LogbookCard';
const Logbook: React.FC<unknown> = () => {
const [state, dispatch] = useReducer(reducer, initialState);
const httpClient: AxiosInstance = useHttpClient();
const isAuthenticated = useIsAuthenticated();
const { getAccessToken } = useAccessToken();
const isMedium = useMediaQuery(theme.breakpoints.up('md'));
const getLogbookEntries = async () => {
try {
@@ -405,10 +409,10 @@ const Logbook: React.FC<unknown> = () => {
return (
<Box sx={{ margin: '20px' }}>
<Grid container spacing={2}>
<Grid size={11}>
<Grid size={isMedium ? 11 : 6}>
<Typography variant="h4">Logbook</Typography>
</Grid>
<Grid display="flex" justifyContent="right" size={1}>
<Grid display="flex" justifyContent="right" size={isMedium ? 1 : 6}>
{isAuthenticated &&
<Button
onClick={() => onOpenCloseEntryForm(FormMode.ADD)}
@@ -435,9 +439,12 @@ const Logbook: React.FC<unknown> = () => {
)}
{!state.isLoading && (
<Grid size={12}>
{state.entries.length > 0 && (
{isMedium && state.entries.length > 0 && (
<Table columns={isAuthenticated ? authColumns : unauthColumns} data={state.entries} />
)}
{!isMedium && state.entries.length > 0 &&
<LogbookCard logs={state.entries} onDelete={onDeleteEntry} onOpenCloseForm={onOpenCloseEntryForm} />
}
</Grid>
)}
{state.isLoading && !state.alert && (

74
app/src/components/logbookCard/LogbookCard.tsx Normal file
View File

@@ -0,0 +1,74 @@
import { Card, CardContent, CardHeader, Grid, Typography } from "@noahspan/noahspan-components";
import { LogbookCardProps } from "./LogbookCardProps.interface";
import { useEffect } from "react";
import ActionMenu from "../actionMenu/ActionMenu";
const LogbookCard = ({ logs, onDelete, onOpenCloseForm }: LogbookCardProps) => {
return (
<Grid container spacing={2}>
{logs.map((log) => {
return (
<Grid size={12}>
<Card key={log.rowKey}>
<CardHeader
action={<ActionMenu id={log.rowKey} onDelete={onDelete} onOpenCloseForm={onOpenCloseForm} />}
subheader={log.pilotName}
title={log.date}
slotProps={{
subheader: {
fontSize: '16px'
},
title: {
fontSize: '24px',
}
}}
/>
<CardContent>
<Grid container spacing={1}>
<Grid size={12}>
<Typography variant="subtitle2">Aircraft Make and Model</Typography>
</Grid>
<Grid size={12}>
<Typography variant="body1">{log.aircraftMakeModel}</Typography>
</Grid>
<Grid size={12}>
<Typography variant="subtitle2">Route From</Typography>
</Grid>
<Grid size={12}>
<Typography variant="body1">{log.routeFrom}</Typography>
</Grid>
<Grid size={12}>
<Typography variant="subtitle2">Route To</Typography>
</Grid>
<Grid size={12}>
<Typography variant="body1">{log.routeTo}</Typography>
</Grid>
<Grid size={12}>
<Typography variant="subtitle2">Duration Of Flight</Typography>
</Grid>
<Grid size={12}>
<Typography variant="body1">{log.durationOfFlight}</Typography>
</Grid>
{log.notes &&
<>
<Grid size={12}>
<Typography variant="subtitle2">Notes</Typography>
</Grid>
<Grid size={12}>
<Typography variant="body1">{log.notes}</Typography>
</Grid>
</>
}
</Grid>
</CardContent>
</Card>
</Grid>
)
})}
</Grid>
)
}
export default LogbookCard;

8
app/src/components/logbookCard/LogbookCardProps.interface.ts Normal file
View File

@@ -0,0 +1,8 @@
import { FormMode } from "../../enums/formMode";
import { ILogbookEntry } from "../logbook/ILogbookEntry";
export interface LogbookCardProps {
logs: ILogbookEntry[];
onDelete: (entryId: string) => void;
onOpenCloseForm: (formMode: FormMode, id: string) => void;
}

10
pnpm-lock.yaml generated
View File

@@ -149,8 +149,8 @@ importers:
specifier: ^3.0.1
version: 3.0.1(@azure/msal-browser@4.0.1)(react@18.3.1)
'@noahspan/noahspan-components':
specifier: ^1.4.0
version: 1.4.0(@mui/system@6.4.6(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(less@4.2.2)(moment@2.30.1)(postcss@8.5.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.3(prettier@3.2.5))(typescript@5.7.3)(webpack@5.97.1(esbuild@0.18.20))
specifier: ^1.5.1
version: 1.5.1(@mui/system@6.4.6(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(less@4.2.2)(moment@2.30.1)(postcss@8.5.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.3(prettier@3.2.5))(typescript@5.7.3)(webpack@5.97.1(esbuild@0.18.20))
axios:
specifier: ^1.7.2
version: 1.7.9
@@ -1564,8 +1564,8 @@ packages:
'@nestjs/common': ^9.0.0 || ^10.0.0
'@nestjs/core': ^9.0.0 || ^10.0.0
'@noahspan/noahspan-components@1.4.0':
resolution: {integrity: sha512-Urq/hHr3KCbmnKO6NhruZQhJnFjiycQ8yReV/JFoxNdlN7WTWGIGEca9MnqNH11WmRK+RtecU4ByehrHqqqK3Q==}
'@noahspan/noahspan-components@1.5.1':
resolution: {integrity: sha512-GDowrEyxP/uZ1esrJVXWNKCzmG8s/OHra7JVudBKfQhDzxWE9o+RDqIHhX78YwbMsE1cu4BEvNAM8oa6jTaAuQ==}
engines: {node: '>=18.0.0'}
peerDependencies:
react: ^18.2.0
@@ -7289,7 +7289,7 @@ snapshots:
- stream-browserify
- supports-color
'@noahspan/noahspan-components@1.4.0(@mui/system@6.4.6(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(less@4.2.2)(moment@2.30.1)(postcss@8.5.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.3(prettier@3.2.5))(typescript@5.7.3)(webpack@5.97.1(esbuild@0.18.20))':
'@noahspan/noahspan-components@1.5.1(@mui/system@6.4.6(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(less@4.2.2)(moment@2.30.1)(postcss@8.5.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.3(prettier@3.2.5))(typescript@5.7.3)(webpack@5.97.1(esbuild@0.18.20))':
dependencies:
'@emotion/react': 11.14.0(@types/react@18.3.18)(react@18.3.1)
'@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)