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

fixing logbook page responsiveness (#116)

Browse Source 
* fixing logbook page responsiveness

* fixing logbook page responsiveness
This commit was merged in pull request #116.
This commit is contained in:
noahspannbauer
2026-03-21 20:30:05 -05:00
committed by GitHub
parent a9abb5863c
commit 9c96774f7b
8 changed files with 127 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
api/src/interfaces/customJwtPayload.interface.ts
View File

@@ -1,5 +0,0 @@
import { JwtPayload } from "jwt-decode";
export interface CustomJwtPayload extends JwtPayload {
permissions: string[];
}

13
api/src/log/log.controller.ts
View File

@@ -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<Logs> {
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<Logs> {
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;

70
api/src/log/log.interceptor.ts
View File

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

11
api/src/log/log.service.ts
View File

@@ -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<LogEntity> {
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<Logs> {
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<Logs> {
const [entities, total] = await this.logRepository
.createQueryBuilder('logs')
.innerJoinAndSelect('logs.tracks', 'track')
.innerJoinAndSelect('logs.pilot', 'pilot')
.orderBy('date')
.getManyAndCount();
return {
entities,
total,

7
api/src/log/logs.interface.ts Normal file
View File

@@ -0,0 +1,7 @@
import { LogEntity } from "src/log/log.entity";
export interface Logs {
entities: LogEntity[],
total: number,
hasNextPage: boolean
}

1
api/src/track/track.service.ts
View File

@@ -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 {

6
client/src/components/flights/Flights.tsx
View File

@@ -60,11 +60,7 @@ const Flights = () => {
useEffect(() => {
getFlights(state.pageIndex, state.pageSize);
}, [])
useEffect(() => {
console.log(screenSize)
}, [screenSize])
return (
<div className={`max-w-screen-lg mx-auto ${screenSize === ScreenSize.SM || screenSize === ScreenSize.MD? 'mr-4 ml-4' : ''}`}>
<div className='prose mt-5 mb-5'>

83
client/src/components/logbook/Logbook.tsx
View File

@@ -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<unknown> = () => {
const [state, dispatch] = useReducer(reducer, initialState);
@@ -25,6 +30,22 @@ const Logbook: React.FC<unknown> = () => {
const { isUserLoggedIn } = useOidc();
const { userRole } = useUserRole();
const { screenSize } = useBreakpoints();
const Actions = ({ id }: ActionsProps) => {
return (
<div className='dropdown dropdown-end'>
<div tabIndex={0} role='button' className='btn btn-ghost p-0'><FontAwesomeIcon icon={faEllipsisVertical} /></div>
<ul tabIndex={-1} className="dropdown-content menu bg-base-100 rounded-box w-52 p-2 shadow-sm border border-base-300 !z-[100]">
{isUserLoggedIn && userRole === UserRole.WRITE &&
<li><a onClick={() => onOpenCloseDrawer(FormMode.EDIT, id)}><FontAwesomeIcon icon={faPen} />Edit</a></li>
}
<li><a onClick={() => onOpenCloseDrawer(FormMode.VIEW, id)}><FontAwesomeIcon icon={faEye} />View</a></li>
{isUserLoggedIn && userRole === UserRole.WRITE &&
<li><a onClick={() => onDeleteLog(id)}><FontAwesomeIcon icon={faTrash} />Delete</a></li>
}
</ul>
</div>
)
}
const columnTotal = (info: HeaderContext<LogbookEntry, unknown>): 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<unknown> = () => {
},
cell: (info: CellContext<LogbookEntry, unknown>) => {
return (
<div className='dropdown dropdown-end'>
<div tabIndex={0} role='button' className='btn btn-ghost'><FontAwesomeIcon icon={faEllipsisVertical} /></div>
<ul tabIndex={-1} className="dropdown-content menu bg-base-100 rounded-box w-52 p-2 shadow-sm border border-base-300 !z-[100]">
{isUserLoggedIn && userRole === UserRole.WRITE &&
<li><a onClick={() => onOpenCloseDrawer(FormMode.EDIT, info.row.original.id)}><FontAwesomeIcon icon={faPen} />Edit</a></li>
}
<li><a onClick={() => onOpenCloseDrawer(FormMode.VIEW, info.row.original.id)}><FontAwesomeIcon icon={faEye} />View</a></li>
{isUserLoggedIn && userRole === UserRole.WRITE &&
<li><a onClick={() => onDeleteLog(info.row.original.id)}><FontAwesomeIcon icon={faTrash} />Delete</a></li>
}
</ul>
</div>
<Actions id={info.row.original.id} />
)
}
}
@@ -489,12 +499,11 @@ const Logbook: React.FC<unknown> = () => {
};
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<unknown> = () => {
return (
<>
<div className='mr-10 ml-10 grid grid-cols-12'>
<div className={`${screenSize === ScreenSize.SM ? 'mr-4 ml-4' : 'mr-10 ml-10'} grid grid-cols-12`}>
<div className='prose max-w-none col-span-10 mt-5 mb-5'>
<h1>Logbook</h1>
</div>
@@ -547,7 +556,7 @@ const Logbook: React.FC<unknown> = () => {
</Alert>
</div>
)}
{!state.isLoading && state.entries.length > 0 && screenSize !== ScreenSize.SM && (
{!state.isLoading && state.entries.length > 0 && screenSize !== ScreenSize.SM && screenSize !== ScreenSize.MD && (
<div className='col-span-12 pr-5 pb-5 pl-5 bg-base-100 border border-base-100 rounded-lg '>
<div className='overflow-x-auto mb-5'>
<div className='col-span-12 justify-self-end self-center mt-1 mr-1 mb-2'>
@@ -696,7 +705,47 @@ const Logbook: React.FC<unknown> = () => {
</div>
)}
{state.entries.length > 0 && screenSize === ScreenSize.SM &&
<LogbookCard logs={state.entries} onDelete={onDeleteLog} mode='logbook' onOpenCloseForm={onOpenCloseDrawer} />
<div className='col-span-12'>
<>
{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 (
<div className='card bg-base-100 border border-base-300 mb-5'>
<div className={`card-body ${screenSize === ScreenSize.SM || screenSize === ScreenSize.MD ? 'p-4' : ''}`} key={row.id}>
<div className={`grid grid-cols-12 gap-3`}>
<>
<div className='col-span-8'>
<h2 className='card-title font-bold text-2xl'>{formattedDate}</h2>
</div>
<div className='col-span-4 justify-self-end self-center'>
<Actions id={row.original.id} />
</div>
{row.getVisibleCells().map((cell) => {
return (
<>
{cell.column.columnDef.header !== 'Actions' && cell.column.columnDef.header !== 'Date' && cell.column.columnDef.header !== 'Pilot' &&
<>
<div className='col-span-8 font-bold'>
<span>{cell.getContext().column.columnDef.header?.toString()}</span>
</div>
<div className='col-span-4'>
<span>{flexRender(cell.column.columnDef.cell, cell.getContext())}</span>
</div>
</>
}
</>
)
})}
</>
</div>
</div>
</div>
)
})}
</>
</div>
}
{state.isLoading && !state.alert && (
<div className='col-span-12 p-5 bg-base-100 border border-base-100 rounded-lg'>