From 88b7f77809dfc247d3bbe50fcba131ae0e9d33fc Mon Sep 17 00:00:00 2001 From: Noah Spannbauer Date: Sun, 23 Mar 2025 10:23:30 -0500 Subject: [PATCH 1/2] adding flights page --- app/src/App.tsx | 7 ++-- app/src/components/flights/Flights.tsx | 32 ++++++++++++++++++ .../components/logTrackMaps/LogTrackMaps.tsx | 5 +-- app/src/components/logbook/Logbook.tsx | 2 +- .../components/logbookCard/LogbookCard.tsx | 33 +++++++++++++++++-- .../logbookCard/LogbookCardProps.interface.ts | 5 +-- app/src/components/siteNav/SiteNav.tsx | 7 ++-- app/src/index.css | 1 + 8 files changed, 78 insertions(+), 14 deletions(-) create mode 100644 app/src/components/flights/Flights.tsx diff --git a/app/src/App.tsx b/app/src/App.tsx index d9607ea..bb2fac4 100644 --- a/app/src/App.tsx +++ b/app/src/App.tsx @@ -1,6 +1,7 @@ import { Navigate, Route, Routes } from 'react-router-dom'; -import Pilots from './components/pilots/Pilots'; +import Flights from './components/flights/Flights'; import Logbook from './components/logbook/Logbook'; +import Pilots from './components/pilots/Pilots'; import SiteNav from './components/siteNav/SiteNav'; import { useIsAuthenticated } from '@azure/msal-react'; @@ -19,8 +20,10 @@ const App = () => { <> + } /> + } /> } /> - } /> + ); diff --git a/app/src/components/flights/Flights.tsx b/app/src/components/flights/Flights.tsx new file mode 100644 index 0000000..fe42991 --- /dev/null +++ b/app/src/components/flights/Flights.tsx @@ -0,0 +1,32 @@ +import { Box, Container } from "@noahspan/noahspan-components"; +import LogbookCard from "../logbookCard/LogbookCard"; +import { useEffect, useState } from "react"; +import { useLogs } from "../../hooks/logs/UseLogs"; +import { ILogbookEntry } from "../logbook/ILogbookEntry"; + +const Flights = () => { + const [flights, setFlights] = useState([]) + const { logs } = useLogs(); + + useEffect(() => { + const flights = logs?.filter((log) => { + if (log.tracks && JSON.parse(log.tracks).length > 0) { + return log; + } + }) + console.log(flights) + if (flights && flights.length > 0) { + setFlights(flights) + } + }, [logs]) + + return ( + + + + + + ) +} + +export default Flights; \ No newline at end of file diff --git a/app/src/components/logTrackMaps/LogTrackMaps.tsx b/app/src/components/logTrackMaps/LogTrackMaps.tsx index e10ea56..f50be45 100644 --- a/app/src/components/logTrackMaps/LogTrackMaps.tsx +++ b/app/src/components/logTrackMaps/LogTrackMaps.tsx @@ -35,10 +35,7 @@ const LogTrackMaps = ({ rowKey, trackUrls }: LogTrackMapsProps) => { config ); const kml = new DOMParser().parseFromString(response.data, 'text/xml') - // const converted = toGeoJSON.kml(dom); - - // rewind(converted, false); - + convertedTracks.push(kml); } diff --git a/app/src/components/logbook/Logbook.tsx b/app/src/components/logbook/Logbook.tsx index 03e7d03..33e5646 100644 --- a/app/src/components/logbook/Logbook.tsx +++ b/app/src/components/logbook/Logbook.tsx @@ -261,7 +261,7 @@ const Logbook: React.FC = () => { )} {!isMedium && state.entries.length > 0 && - + } )} diff --git a/app/src/components/logbookCard/LogbookCard.tsx b/app/src/components/logbookCard/LogbookCard.tsx index a8b9c07..3cbea20 100644 --- a/app/src/components/logbookCard/LogbookCard.tsx +++ b/app/src/components/logbookCard/LogbookCard.tsx @@ -1,18 +1,19 @@ import { Card, CardContent, CardHeader, Grid, Typography } from "@noahspan/noahspan-components"; import { LogbookCardProps } from "./LogbookCardProps.interface"; -import { useEffect } from "react"; import ActionMenu from "../actionMenu/ActionMenu"; +import LogTrackMaps from "../logTrackMaps/LogTrackMaps"; -const LogbookCard = ({ logs, onDelete, onOpenCloseForm }: LogbookCardProps) => { +const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps) => { return ( {logs.map((log) => { + console.log(log) return ( } + action={mode === 'logbook' ? : null} subheader={log.pilotName} title={log.date} slotProps={{ @@ -26,6 +27,14 @@ const LogbookCard = ({ logs, onDelete, onOpenCloseForm }: LogbookCardProps) => { /> + {mode === 'flights' && log.tracks && JSON.parse(log.tracks).length > 0 && + + + + } Aircraft Make and Model @@ -50,6 +59,24 @@ const LogbookCard = ({ logs, onDelete, onOpenCloseForm }: LogbookCardProps) => { {log.durationOfFlight} + {mode === 'logbook' && log.tracks && JSON.parse(log.tracks).length > 0 && + <> + + Tracks + + {JSON.parse(log.tracks).map((track: string) => { + const trackSplit = track.split('/') + const filename = trackSplit[trackSplit.length - 1]; + + return ( + + {filename} + + ) + + })} + + } {log.notes && <> diff --git a/app/src/components/logbookCard/LogbookCardProps.interface.ts b/app/src/components/logbookCard/LogbookCardProps.interface.ts index 5f57c21..1797638 100644 --- a/app/src/components/logbookCard/LogbookCardProps.interface.ts +++ b/app/src/components/logbookCard/LogbookCardProps.interface.ts @@ -3,6 +3,7 @@ import { ILogbookEntry } from "../logbook/ILogbookEntry"; export interface LogbookCardProps { logs: ILogbookEntry[]; - onDelete: (entryId: string) => void; - onOpenCloseForm: (formMode: FormMode, id: string) => void; + mode: 'flights' | 'logbook'; + onDelete?: (entryId: string) => void; + onOpenCloseForm?: (formMode: FormMode, id: string) => void; } \ No newline at end of file diff --git a/app/src/components/siteNav/SiteNav.tsx b/app/src/components/siteNav/SiteNav.tsx index 629953c..a447015 100644 --- a/app/src/components/siteNav/SiteNav.tsx +++ b/app/src/components/siteNav/SiteNav.tsx @@ -32,9 +32,13 @@ const SiteNav = () => { const getPages = () => { const pages = [ { - name: 'Logbook', + name: 'Flights', url: '/' }, + { + name: 'Logbook', + url: '/logbook' + }, { name: 'Pilots', url: '/pilots' @@ -79,7 +83,6 @@ const SiteNav = () => { return imageUrl; } catch (error) { - console.log(error); throw new Error(); } }; diff --git a/app/src/index.css b/app/src/index.css index 690f168..26e49ae 100644 --- a/app/src/index.css +++ b/app/src/index.css @@ -1,3 +1,4 @@ body { background-color: #f2f2f2; + margin: 8px; } -- 2.49.1 From eb1bfb53c5ad02c30de5f7058a9e59c62e569bdc Mon Sep 17 00:00:00 2001 From: Noah Spannbauer Date: Sun, 23 Mar 2025 10:28:04 -0500 Subject: [PATCH 2/2] adding flights page --- app/.gitignore | 1 - app/src/components/flights/Flights.tsx | 6 ++-- app/src/hooks/logs/UseLogs.tsx | 40 ++++++++++++++++++++++++++ 3 files changed, 43 insertions(+), 4 deletions(-) create mode 100644 app/src/hooks/logs/UseLogs.tsx diff --git a/app/.gitignore b/app/.gitignore index a547bf3..019e1dc 100644 --- a/app/.gitignore +++ b/app/.gitignore @@ -1,5 +1,4 @@ # Logs -logs *.log npm-debug.log* yarn-debug.log* diff --git a/app/src/components/flights/Flights.tsx b/app/src/components/flights/Flights.tsx index fe42991..2ceee39 100644 --- a/app/src/components/flights/Flights.tsx +++ b/app/src/components/flights/Flights.tsx @@ -5,16 +5,16 @@ import { useLogs } from "../../hooks/logs/UseLogs"; import { ILogbookEntry } from "../logbook/ILogbookEntry"; const Flights = () => { - const [flights, setFlights] = useState([]) + const [flights, setFlights] = useState([]) const { logs } = useLogs(); useEffect(() => { - const flights = logs?.filter((log) => { + const flights: ILogbookEntry[] | undefined = logs?.filter((log: ILogbookEntry) => { if (log.tracks && JSON.parse(log.tracks).length > 0) { return log; } }) - console.log(flights) + if (flights && flights.length > 0) { setFlights(flights) } diff --git a/app/src/hooks/logs/UseLogs.tsx b/app/src/hooks/logs/UseLogs.tsx new file mode 100644 index 0000000..65ebc84 --- /dev/null +++ b/app/src/hooks/logs/UseLogs.tsx @@ -0,0 +1,40 @@ +import { useEffect, useState } from "react"; +import { useHttpClient } from "../httpClient/UseHttpClient"; +import { useAccessToken } from "../accessToken/UseAcessToken"; +import { useIsAuthenticated } from "@azure/msal-react"; +import { AxiosInstance, AxiosResponse } from "axios"; +import { ILogbookEntry } from "../../components/logbook/ILogbookEntry"; + +export const useLogs = () => { + const [logs, setLogs] = useState(); + const httpClient: AxiosInstance = useHttpClient(); + const { getAccessToken } = useAccessToken(); + const isAuthenticated = useIsAuthenticated(); + + useEffect(() => { + const getLogs = async () => { + try { + const config = isAuthenticated + ? { headers: { Authorization: await getAccessToken() } } + : {}; + const response: AxiosResponse = await httpClient.get( + `api/logs`, + config + ); + const logs: ILogbookEntry[] = response.data; + + logs.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()) + + setLogs(logs) + } catch (error) { + return error; + } + } + + getLogs(); + }, []) + + return { + logs + } +} \ No newline at end of file -- 2.49.1