Compare commits

..

7 Commits

Author SHA1 Message Date
d0f15ee160 adding skeleton loader to flights page 2025-05-16 11:14:21 -05:00
294766b8da add totals to logbook table (#90)
* adding logbook page totals

* adding logbook page totals

* adding logbook page totals

* adding logbook page totals
2025-05-16 10:24:27 -05:00
c5f9dcce73 adding logbook page totals (#89)
* adding logbook page totals

* adding logbook page totals

* adding logbook page totals
2025-05-16 10:14:28 -05:00
a185abf6d8 display multiple kml files on same leaflet map component (#88)
* display multiple kml files on same leaflet map component

* display multiple kml files on same leaflet map component
2025-05-12 19:18:03 -05:00
9f13cc20a5 Upating version number to 1.3.1 2025-05-06 13:06:57 -05:00
3ab9024152 fixing track parsing error for new log entries (#85) 2025-05-06 12:58:00 -05:00
f15008a8db Feature/73 add flights page (#78)
* adding flights page

* adding flights page

* adding flights page

* adding flights page

* removing unused dependencies

* adding flights page
2025-03-23 11:48:41 -05:00
8 changed files with 781 additions and 318 deletions

View File

@@ -1,6 +1,6 @@
{ {
"name": "api", "name": "api",
"version": "1.3.0", "version": "1.3.1",
"description": "", "description": "",
"author": "", "author": "",
"private": true, "private": true,

View File

@@ -2,9 +2,9 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/png" href="/noahspan-logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title> <title>Flying</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

View File

@@ -1,7 +1,7 @@
{ {
"name": "app", "name": "app",
"private": true, "private": true,
"version": "1.3.0", "version": "1.3.1",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
@@ -13,7 +13,7 @@
"dependencies": { "dependencies": {
"@azure/msal-browser": "^4.0.1", "@azure/msal-browser": "^4.0.1",
"@azure/msal-react": "^3.0.1", "@azure/msal-react": "^3.0.1",
"@noahspan/noahspan-components": "1.6.0", "@noahspan/noahspan-components": "^1.9.1",
"axios": "^1.7.2", "axios": "^1.7.2",
"dotenv": "^16.4.7", "dotenv": "^16.4.7",
"leaflet": "^1.9.4", "leaflet": "^1.9.4",

View File

@@ -1,4 +1,4 @@
import { Box, Container, Grid, Spinner } from "@noahspan/noahspan-components"; import { Box, Card, CardContent, Container, Grid, Skeleton, Spinner, Stack, theme, Typography, useMediaQuery } from "@noahspan/noahspan-components";
import LogbookCard from "../logbookCard/LogbookCard"; import LogbookCard from "../logbookCard/LogbookCard";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useLogs } from "../../hooks/logs/UseLogs"; import { useLogs } from "../../hooks/logs/UseLogs";
@@ -7,6 +7,7 @@ import { ILogbookEntry } from "../logbook/ILogbookEntry";
const Flights = () => { const Flights = () => {
const [flights, setFlights] = useState<ILogbookEntry[]>([]); const [flights, setFlights] = useState<ILogbookEntry[]>([]);
const { logs, isLoading } = useLogs(); const { logs, isLoading } = useLogs();
const isMedium = useMediaQuery(theme.breakpoints.up('md'));
useEffect(() => { useEffect(() => {
const flights: ILogbookEntry[] | undefined = logs?.filter((log: ILogbookEntry) => { const flights: ILogbookEntry[] | undefined = logs?.filter((log: ILogbookEntry) => {
@@ -24,21 +25,48 @@ const Flights = () => {
<Container> <Container>
<Box sx={{ margin: '20px' }}> <Box sx={{ margin: '20px' }}>
<Grid container spacing={2}> <Grid container spacing={2}>
{isLoading && <Grid size={isMedium ? 11 : 6}>
<> <Typography variant="h4">Flights</Typography>
<Grid display="flex" justifyContent="center" size={12}> </Grid>
<Spinner />
</Grid>
<Grid display="flex" justifyContent="center" size={12}>
Loading...
</Grid>
</>
}
{!isLoading && {!isLoading &&
<Grid size={12}> <Grid size={12}>
<LogbookCard logs={flights} mode='flights' /> <LogbookCard logs={flights} mode='flights' />
</Grid> </Grid>
} }
{isLoading && [...Array(6)].map((_element, index) => {
return (
<Grid display='flex' justifyContent='center' size={12}>
<Card
key={index}
sx={{
width: '100%'
}}
>
<CardContent>
<Grid container>
<Grid size={12}>
<Skeleton height={60} width={200} />
<Skeleton height={30} width={200} />
</Grid>
<Grid size={12}>
<Skeleton height={300} />
</Grid>
<Grid size={12}>
{[...Array(6)].map((_element, index) => {
return (
<>
<Skeleton height={20} width={300} />
<Skeleton height={40} width={300} />
</>
)
})}
</Grid>
</Grid>
</CardContent>
</Card>
</Grid>
)
})}
</Grid> </Grid>
</Box> </Box>
</Container> </Container>

View File

@@ -4,8 +4,6 @@ import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
import { AxiosInstance, AxiosResponse } from 'axios'; import { AxiosInstance, AxiosResponse } from 'axios';
import { useAccessToken } from '../../hooks/accessToken/UseAcessToken'; import { useAccessToken } from '../../hooks/accessToken/UseAcessToken';
import { useIsAuthenticated } from '@azure/msal-react'; import { useIsAuthenticated } from '@azure/msal-react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination } from 'swiper/modules';
import { MapContainer, TileLayer } from 'react-leaflet'; import { MapContainer, TileLayer } from 'react-leaflet';
import ReactLeafletKml from 'react-leaflet-kml'; import ReactLeafletKml from 'react-leaflet-kml';
import 'swiper/css'; import 'swiper/css';
@@ -46,35 +44,20 @@ const LogTrackMaps = ({ rowKey, trackUrls }: LogTrackMapsProps) => {
}, [trackUrls]) }, [trackUrls])
return ( return (
<> <MapContainer
<Swiper center={[45.14489, -93.21019]}
spaceBetween={30} scrollWheelZoom={false}
pagination={{ style={{ height: '500px', width: '100%' }}
clickable: true, zoom={8}
}} >
modules={[Pagination]} <TileLayer
className="mySwiper" attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
> url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
{tracks.length > 0 && tracks.map((track) => { />
return ( {tracks.length > 0 && tracks.map((track) => (
<SwiperSlide> <ReactLeafletKml kml={track} />
<MapContainer ))}
center={[45.14489, -93.21019]} </MapContainer>
scrollWheelZoom={false}
style={{ height: '500px', width: '100%' }}
zoom={8}
>
<TileLayer
attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<ReactLeafletKml kml={track} />
</MapContainer>
</SwiperSlide>
)
})}
</Swiper>
</>
); );
} }

View File

@@ -56,7 +56,7 @@ const LogTracks = ({ isDrawerOpen, mode, onOpenClose, selectedRowKey }: LogTrack
const uploadResponse: AxiosResponse = await httpClient.post(`api/logs/log/${selectedRowKey}/track`, formData, formDataConfig); const uploadResponse: AxiosResponse = await httpClient.post(`api/logs/log/${selectedRowKey}/track`, formData, formDataConfig);
const uploadUrl = uploadResponse.data.url; const uploadUrl = uploadResponse.data.url;
const log = await getLog(); const log = await getLog();
const tracks: string[] = JSON.parse(log.tracks!); const tracks: string[] = log.tracks ? JSON.parse(log.tracks!) : [];
tracks.push(uploadUrl) tracks.push(uploadUrl)
log.tracks = JSON.stringify(tracks); log.tracks = JSON.stringify(tracks);
@@ -171,7 +171,7 @@ const LogTracks = ({ isDrawerOpen, mode, onOpenClose, selectedRowKey }: LogTrack
onClick={onCancel} onClick={onCancel}
size="small" size="small"
> >
{mode.toString() !== FormMode.VIEW ? 'Cancel' : 'Close'} Close
</Button> </Button>
{mode.toString() !== FormMode.VIEW && ( {mode.toString() !== FormMode.VIEW && (
<Button <Button

View File

@@ -1,15 +1,26 @@
import { import {
CellContext,
ColumnDef, ColumnDef,
Icon, HeaderContext,
IconButton,
IconName
} from '@noahspan/noahspan-components'; } from '@noahspan/noahspan-components';
import { ILogbookEntry } from './ILogbookEntry'; import { ILogbookEntry } from './ILogbookEntry';
const columnTotal = (info: HeaderContext<ILogbookEntry, unknown>): number => {
const values: number[] = info.table.getFilteredRowModel().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<ILogbookEntry> = { const pilotName: ColumnDef<ILogbookEntry> = {
id: 'pilotName', id: 'pilotName',
accessorKey: 'pilotName', accessorKey: 'pilotName',
header: 'Pilot' header: 'Pilot',
footer: 'PAGE TOTALS'
} }
const date: ColumnDef<ILogbookEntry> = { const date: ColumnDef<ILogbookEntry> = {
id: 'date', id: 'date',
@@ -48,8 +59,9 @@ const durationOfFlight: ColumnDef<ILogbookEntry> = {
align: 'right', align: 'right',
headerAlign: 'right' headerAlign: 'right'
}, },
cell: (info: any) => cell: (info: CellContext<ILogbookEntry, unknown>) =>
info.getValue() ? parseFloat(info.getValue()).toFixed(1) : '' info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : '',
footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : ''
} }
const notes: ColumnDef<ILogbookEntry> = { const notes: ColumnDef<ILogbookEntry> = {
id: 'notes', id: 'notes',
@@ -85,8 +97,9 @@ export const authColumns: ColumnDef<ILogbookEntry>[] = [
align: 'right', align: 'right',
headerAlign: 'right' headerAlign: 'right'
}, },
cell: (info: any) => cell: (info: CellContext<ILogbookEntry, unknown>) =>
info.getValue() ? parseFloat(info.getValue()).toFixed(1) : '' info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : '',
footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : ''
}, },
{ {
id: 'landings', id: 'landings',
@@ -99,6 +112,7 @@ export const authColumns: ColumnDef<ILogbookEntry>[] = [
id: 'landingsDay', id: 'landingsDay',
accessorKey: 'landingsDay', accessorKey: 'landingsDay',
header: 'Day', header: 'Day',
footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info) : '',
meta: { meta: {
align: 'right', align: 'right',
headerAlign: 'right' headerAlign: 'right'
@@ -108,6 +122,7 @@ export const authColumns: ColumnDef<ILogbookEntry>[] = [
id: 'landingsNight', id: 'landingsNight',
accessorKey: 'landingsNight', accessorKey: 'landingsNight',
header: 'Night', header: 'Night',
footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info) : '',
meta: { meta: {
align: 'right', align: 'right',
headerAlign: 'right' headerAlign: 'right'
@@ -126,28 +141,31 @@ export const authColumns: ColumnDef<ILogbookEntry>[] = [
id: 'instrumentActual', id: 'instrumentActual',
accessorKey: 'instrumentActual', accessorKey: 'instrumentActual',
header: 'Actual', header: 'Actual',
footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
meta: { meta: {
align: 'right', align: 'right',
headerAlign: 'right' headerAlign: 'right'
}, },
cell: (info: any) => cell: (info: CellContext<ILogbookEntry, unknown>) =>
info.getValue() ? parseFloat(info.getValue()).toFixed(1) : '' info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : '',
}, },
{ {
id: 'instrumentSimulated', id: 'instrumentSimulated',
accessorKey: 'instrumentSimulated', accessorKey: 'instrumentSimulated',
header: 'Simulated', header: 'Simulated',
footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
meta: { meta: {
align: 'right', align: 'right',
headerAlign: 'right' headerAlign: 'right'
}, },
cell: (info: any) => cell: (info: CellContext<ILogbookEntry, unknown>) =>
info.getValue() ? parseFloat(info.getValue()).toFixed(1) : '' info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
}, },
{ {
id: 'instrumentApproaches', id: 'instrumentApproaches',
accessorKey: 'instrumentApproaches', accessorKey: 'instrumentApproaches',
header: 'Approaches', header: 'Approaches',
footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
meta: { meta: {
align: 'right', align: 'right',
headerAlign: 'right' headerAlign: 'right'
@@ -157,6 +175,7 @@ export const authColumns: ColumnDef<ILogbookEntry>[] = [
id: 'instrumentHolds', id: 'instrumentHolds',
accessorKey: 'instrumentHolds', accessorKey: 'instrumentHolds',
header: 'Holds', header: 'Holds',
footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
meta: { meta: {
align: 'right', align: 'right',
headerAlign: 'right' headerAlign: 'right'
@@ -166,6 +185,7 @@ export const authColumns: ColumnDef<ILogbookEntry>[] = [
id: 'instrumentNavTrack', id: 'instrumentNavTrack',
accessorKey: 'instrumentNavTrack', accessorKey: 'instrumentNavTrack',
header: 'Nav/Track', header: 'Nav/Track',
footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
meta: { meta: {
align: 'right', align: 'right',
headerAlign: 'right' headerAlign: 'right'
@@ -184,67 +204,73 @@ export const authColumns: ColumnDef<ILogbookEntry>[] = [
id: 'groundTrainingReceived', id: 'groundTrainingReceived',
accessorKey: 'groundTrainingReceived', accessorKey: 'groundTrainingReceived',
header: 'Ground Training Received', header: 'Ground Training Received',
footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
meta: { meta: {
align: 'right', align: 'right',
headerAlign: 'right' headerAlign: 'right'
}, },
cell: (info: any) => cell: (info: CellContext<ILogbookEntry, unknown>) =>
info.getValue() ? parseFloat(info.getValue()).toFixed(1) : '' info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
}, },
{ {
id: 'flightTrainingReceived', id: 'flightTrainingReceived',
accessorKey: 'flightTrainingReceived', accessorKey: 'flightTrainingReceived',
header: 'Flight Training Received', header: 'Flight Training Received',
footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
meta: { meta: {
align: 'right', align: 'right',
headerAlign: 'right' headerAlign: 'right'
}, },
cell: (info: any) => cell: (info: CellContext<ILogbookEntry, unknown>) =>
info.getValue() ? parseFloat(info.getValue()).toFixed(1) : '' info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
}, },
{ {
id: 'crossCountry', id: 'crossCountry',
accessorKey: 'crossCountry', accessorKey: 'crossCountry',
header: 'Cross Country', header: 'Cross Country',
footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
meta: { meta: {
align: 'right', align: 'right',
headerAlign: 'right' headerAlign: 'right'
}, },
cell: (info: any) => cell: (info: CellContext<ILogbookEntry, unknown>) =>
info.getValue() ? parseFloat(info.getValue()).toFixed(1) : '' info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
}, },
{ {
id: 'night', id: 'night',
accessorKey: 'night', accessorKey: 'night',
header: 'Night', header: 'Night',
footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
meta: { meta: {
align: 'right', align: 'right',
headerAlign: 'right' headerAlign: 'right'
}, },
cell: (info: any) => cell: (info: CellContext<ILogbookEntry, unknown>) =>
info.getValue() ? parseFloat(info.getValue()).toFixed(1) : '' info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
}, },
{ {
id: 'solo', id: 'solo',
accessorKey: 'solo', accessorKey: 'solo',
header: 'Solo', header: 'Solo',
footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
meta: { meta: {
align: 'right', align: 'right',
headerAlign: 'right' headerAlign: 'right'
}, },
cell: (info: any) => cell: (info: CellContext<ILogbookEntry, unknown>) =>
info.getValue() ? parseFloat(info.getValue()).toFixed(1) : '' info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
}, },
{ {
id: 'pilotInCommand', id: 'pilotInCommand',
accessorKey: 'pilotInCommand', accessorKey: 'pilotInCommand',
header: 'Pilot In Command', header: 'Pilot In Command',
footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
meta: { meta: {
align: 'right', align: 'right',
headerAlign: 'right' headerAlign: 'right'
}, },
cell: (info: any) => cell: (info: CellContext<ILogbookEntry, unknown>) =>
info.getValue() ? parseFloat(info.getValue()).toFixed(1) : '' info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
} }
] ]
}, },

916
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff