From bde20ff73b04ff12e6a6b891e5c44552b7de2018 Mon Sep 17 00:00:00 2001 From: Noah Spannbauer Date: Sat, 21 Mar 2026 20:25:21 -0500 Subject: [PATCH 1/2] fixing logbook page responsiveness --- .../interfaces/customJwtPayload.interface.ts | 5 -- api/src/log/log.controller.ts | 13 ++- api/src/log/log.interceptor.ts | 70 +++++++++------- api/src/log/log.service.ts | 11 ++- api/src/log/logs.interface.ts | 7 ++ api/src/track/track.service.ts | 1 + client/src/components/flights/Flights.tsx | 6 +- client/src/components/logForm/LogForm.tsx | 2 +- client/src/components/logbook/Logbook.tsx | 83 +++++++++++++++---- 9 files changed, 128 insertions(+), 70 deletions(-) delete mode 100644 api/src/interfaces/customJwtPayload.interface.ts create mode 100644 api/src/log/logs.interface.ts diff --git a/api/src/interfaces/customJwtPayload.interface.ts b/api/src/interfaces/customJwtPayload.interface.ts deleted file mode 100644 index a4dc6f0..0000000 --- a/api/src/interfaces/customJwtPayload.interface.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { JwtPayload } from "jwt-decode"; - -export interface CustomJwtPayload extends JwtPayload { - permissions: string[]; -} \ No newline at end of file diff --git a/api/src/log/log.controller.ts b/api/src/log/log.controller.ts index 3d2eab7..4f05169 100644 --- a/api/src/log/log.controller.ts +++ b/api/src/log/log.controller.ts @@ -20,6 +20,7 @@ import { LogInterceptor } from './log.interceptor'; import { FileService } from '../file/file.service'; import { DeleteResult, InsertResult, UpdateResult } from 'typeorm'; import { Reflector } from '@nestjs/core'; +import { Logs } from './logs.interface'; const reflector = new Reflector(); @@ -31,9 +32,9 @@ export class LogController { private readonly logService: LogService ) {} - @Get() + @Get() @Public() - async findLogsWithCount(@Query('skip') skip?, @Query('take') take?: number,): Promise<{ entities: LogEntity[], total: number, hasNextPage: boolean }> { + async findLogsWithCount(@Query('skip') skip?, @Query('take') take?: number,): Promise { try { return await this.logService.findLogsWithCount(skip, take) } catch (error) { @@ -43,13 +44,11 @@ export class LogController { } } - @Get('tracks') + @Get('flights') @Public() - async findLogsWithTracks(@Query('skip') skip?, @Query('take') take?: number,): Promise<{ entities: LogEntity[], total: number, hasNextPage: boolean }> { + async findLogsWithTracks(@Query('skip') skip?, @Query('take') take?: number,): Promise { try { - const result = await this.logService.findLogsWithTracks(skip, take) - console.log(result); - return result + return await this.logService.findLogsWithTracks(skip, take) } catch (error) { const customError = error as CustomError; diff --git a/api/src/log/log.interceptor.ts b/api/src/log/log.interceptor.ts index a431cb2..5918b73 100644 --- a/api/src/log/log.interceptor.ts +++ b/api/src/log/log.interceptor.ts @@ -15,23 +15,21 @@ export class LogInterceptor implements NestInterceptor { ]); return handler.handle().pipe( - map((data: { entities: LogEntity[], total: number, hasNextPage: boolean }) => { + map((data: any) => { const req = context.switchToHttp().getRequest(); - const limitData = (entities: LogEntity[]) => { - return entities.map((log: LogEntity) => { - return { - id: log.id, - pilot: { - name: log.pilot.name - }, - date: log.date, - aircraftMakeModel: log.aircraftMakeModel, - routeFrom: log.routeFrom, - routeTo: log.routeTo, - durationOfFlight: log.durationOfFlight, - tracks: log.tracks, - }; - }); + const limitData = (log: LogEntity) => { + return { + id: log.id, + pilot: { + name: log.pilot.name + }, + date: log.date, + aircraftMakeModel: log.aircraftMakeModel, + routeFrom: log.routeFrom, + routeTo: log.routeTo, + durationOfFlight: log.durationOfFlight, + tracks: log.tracks, + }; } if (req.headers.authorization) { @@ -41,25 +39,39 @@ export class LogInterceptor implements NestInterceptor { const rolesKeyName = Object.keys(jwtPayload).find((key) => key.includes('roles')); if (jwtPayload[rolesKeyName].includes('Flying.Read')) { - const logs = limitData(data.entities); + if (data.entities) { + const logs = data.entities.map((entity) => limitData(data.entities)); - return { - entities: logs, - total: data.total, - hasNextPage: data.hasNextPage - }; + return { + entities: logs, + total: data.total, + hasNextPage: data.hasNextPage + }; + } else { + const log = limitData(data); + + return log; + } + } else { return data; } } else if (!req.headers.authorization && isPublic) { - const publicData = limitData(data.entities) - const logs = publicData.slice(0, 5) + if (data.entities) { + const publicData = data.entities.map((entity) => limitData(entity)) + const logs = publicData.slice(0, 5) - return { - entities: logs, - total: data.total, - hasNextPage: data.hasNextPage - }; + return { + entities: publicData, + total: data.total, + hasNextPage: false + }; + } else { + const publicData = limitData(data); + + return publicData + } + } }) ); diff --git a/api/src/log/log.service.ts b/api/src/log/log.service.ts index dae0604..02ee535 100644 --- a/api/src/log/log.service.ts +++ b/api/src/log/log.service.ts @@ -7,6 +7,7 @@ import { PilotService } from '../pilot/pilot.service'; import { PilotEntity } from '../pilot/pilot.entity'; import { CustomError } from '../error/customError'; import { FileService } from '../file/file.service'; +import { Logs } from './logs.interface'; @Injectable() export class LogService { @@ -17,15 +18,13 @@ export class LogService { ) {} async find(id: string): Promise { - const logEntity: LogEntity = await this.logRepository.findOne({ + return await this.logRepository.findOne({ where: { id: id }, relations: ['pilot', 'tracks'] }); - - return logEntity; } - async findLogsWithCount(skip?: number, take?: number): Promise<{entities: LogEntity[], total: number, hasNextPage: boolean}> { + async findLogsWithCount(skip?: number, take?: number): Promise { const [entities, total] = await this.logRepository.findAndCount({ take, skip, @@ -39,14 +38,14 @@ export class LogService { } } - async findLogsWithTracks(skip?: number, take?: number): Promise<{entities: LogEntity[], total: number, hasNextPage: boolean}> { + async findLogsWithTracks(skip?: number, take?: number): Promise { const [entities, total] = await this.logRepository .createQueryBuilder('logs') .innerJoinAndSelect('logs.tracks', 'track') .innerJoinAndSelect('logs.pilot', 'pilot') .orderBy('date') .getManyAndCount(); - + return { entities, total, diff --git a/api/src/log/logs.interface.ts b/api/src/log/logs.interface.ts new file mode 100644 index 0000000..9530bd3 --- /dev/null +++ b/api/src/log/logs.interface.ts @@ -0,0 +1,7 @@ +import { LogEntity } from "src/log/log.entity"; + +export interface Logs { + entities: LogEntity[], + total: number, + hasNextPage: boolean +} \ No newline at end of file diff --git a/api/src/track/track.service.ts b/api/src/track/track.service.ts index 16c579b..53921ae 100644 --- a/api/src/track/track.service.ts +++ b/api/src/track/track.service.ts @@ -7,6 +7,7 @@ import { LogService } from "../log/log.service"; import { LogEntity } from "../log/log.entity"; import { CustomError } from "../error/customError"; import { FileService } from "../file/file.service"; +import { Logs } from "src/log/logs.interface"; @Injectable() export class TrackService { diff --git a/client/src/components/flights/Flights.tsx b/client/src/components/flights/Flights.tsx index 73fe6d2..1dcf7a2 100644 --- a/client/src/components/flights/Flights.tsx +++ b/client/src/components/flights/Flights.tsx @@ -60,11 +60,7 @@ const Flights = () => { useEffect(() => { getFlights(state.pageIndex, state.pageSize); }, []) - - useEffect(() => { - console.log(screenSize) - }, [screenSize]) - + return (
diff --git a/client/src/components/logForm/LogForm.tsx b/client/src/components/logForm/LogForm.tsx index 3834625..4db774f 100644 --- a/client/src/components/logForm/LogForm.tsx +++ b/client/src/components/logForm/LogForm.tsx @@ -32,7 +32,7 @@ const LogForm = () => { const response: AxiosResponse = await httpClient.get( `api/logs/${logbookContext.state.selectedLogId}` ); - const log = response.data; + const log = response.data.entities[0]; reset(log); } catch (error) { diff --git a/client/src/components/logbook/Logbook.tsx b/client/src/components/logbook/Logbook.tsx index e80742f..ed18830 100644 --- a/client/src/components/logbook/Logbook.tsx +++ b/client/src/components/logbook/Logbook.tsx @@ -17,6 +17,11 @@ import { CellContext, ColumnDef, flexRender, getCoreRowModel, HeaderContext, Pag import { useLogbookContext } from '../../hooks/logbookContext/UseLogbookContext'; import LogbookDrawer from '../logbookDrawer/LogbookDrawer'; import Alert from '../alert/Alert'; +import TrackMap from '../trackMap/TrackMap'; + +interface ActionsProps { + id: string; +} const Logbook: React.FC = () => { const [state, dispatch] = useReducer(reducer, initialState); @@ -25,6 +30,22 @@ const Logbook: React.FC = () => { const { isUserLoggedIn } = useOidc(); const { userRole } = useUserRole(); const { screenSize } = useBreakpoints(); + const Actions = ({ id }: ActionsProps) => { + return ( +
+
+ +
+ ) + } const columnTotal = (info: HeaderContext): number => { const values: number[] = info.table.getPaginationRowModel().rows.map((row: any) => Number(row.getValue(info.column.id))).filter((value: any) => !Number.isNaN(value)); let total: number = 0; @@ -116,18 +137,7 @@ const Logbook: React.FC = () => { }, cell: (info: CellContext) => { return ( -
-
- -
+ ) } } @@ -489,12 +499,11 @@ const Logbook: React.FC = () => { }; const onRowsPerPageChanged = (event: any) => { - console.log(event.target.value) const newPaginationState: PaginationState = { pageIndex: 0, pageSize: event.target.value !== 'All' ? Number(event.target.value) : state.totalEntries }; - console.log(newPaginationState) + dispatch({ type: 'SET_PAGINATION', payload: newPaginationState }) } @@ -520,7 +529,7 @@ const Logbook: React.FC = () => { return ( <> -
+

Logbook

@@ -547,7 +556,7 @@ const Logbook: React.FC = () => {
)} - {!state.isLoading && state.entries.length > 0 && screenSize !== ScreenSize.SM && ( + {!state.isLoading && state.entries.length > 0 && screenSize !== ScreenSize.SM && screenSize !== ScreenSize.MD && (
@@ -696,7 +705,47 @@ const Logbook: React.FC = () => {
)} {state.entries.length > 0 && screenSize === ScreenSize.SM && - +
+ <> + {table.getRowModel().rows.map((row) => { + const date = new Date(row.original.date.replace('Z', '')); + const formattedDate: string = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`; + + return ( +
+
+
+ <> +
+

{formattedDate}

+
+
+ +
+ {row.getVisibleCells().map((cell) => { + return ( + <> + {cell.column.columnDef.header !== 'Actions' && cell.column.columnDef.header !== 'Date' && cell.column.columnDef.header !== 'Pilot' && + <> +
+ {cell.getContext().column.columnDef.header?.toString()} +
+
+ {flexRender(cell.column.columnDef.cell, cell.getContext())} +
+ + } + + ) + })} + +
+
+
+ ) + })} + +
} {state.isLoading && !state.alert && (
-- 2.49.1 From 5950cef79e36f0e62d611a5365ff1acedd3053ce Mon Sep 17 00:00:00 2001 From: Noah Spannbauer Date: Sat, 21 Mar 2026 20:28:20 -0500 Subject: [PATCH 2/2] fixing logbook page responsiveness --- client/src/components/logForm/LogForm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/logForm/LogForm.tsx b/client/src/components/logForm/LogForm.tsx index 4db774f..3834625 100644 --- a/client/src/components/logForm/LogForm.tsx +++ b/client/src/components/logForm/LogForm.tsx @@ -32,7 +32,7 @@ const LogForm = () => { const response: AxiosResponse = await httpClient.get( `api/logs/${logbookContext.state.selectedLogId}` ); - const log = response.data.entities[0]; + const log = response.data; reset(log); } catch (error) { -- 2.49.1