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

making logbook responsive

Browse Source
This commit is contained in:
Noah Spannbauer
2025-03-17 19:28:59 -05:00
parent 98cfe69afb
commit ec97770610
8 changed files with 643 additions and 530 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
api/src/log/interceptors/log.interceptor.ts
View File

@@ -15,6 +15,7 @@ export class LogInterceptor implements NestInterceptor {
return {
partitionKey: log.partitionKey,
rowKey: log.rowKey,
id: log.id,
pilotId: log.pilotId,
pilotName: log.pilotName,
date: log.date,

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",

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

File diff suppressed because it is too large Load Diff

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)