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

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;
}