76 lines
2.9 KiB
TypeScript
76 lines
2.9 KiB
TypeScript
import { LogbookCardProps } from "./LogbookCardProps.interface";
|
|
import TrackMap from "../trackMap/TrackMap";
|
|
|
|
const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps) => {
|
|
return (
|
|
<div>
|
|
{logs.map((log) => {
|
|
const date = new Date(log.date);
|
|
const formattedDate: string = `${date.getMonth()}/${date.getDate()}/${date.getFullYear()}`;
|
|
|
|
return (
|
|
<div className='card bg-base-100 border border-base-300 p-2'>
|
|
<div className='card-body' key={log.id}>
|
|
<h2 className='card-title font-bold text-2xl'>{formattedDate}</h2>
|
|
<div>
|
|
{mode === 'flights' && log.tracks && log.tracks.length > 0 &&
|
|
<div className='mb-5'>
|
|
<TrackMap
|
|
height='400px'
|
|
logId={log.id}
|
|
tracks={log.tracks}
|
|
/>
|
|
</div>
|
|
}
|
|
</div>
|
|
<div className='collapse collapse-arrow bg-base-100 border-base-300 border'>
|
|
<input type='radio' name='details-accordion' />
|
|
<div className='collapse-title font-semibold'>Details</div>
|
|
<div className='collapse-content'>
|
|
<div className='grid grid-cols-12 gap-3 mr-[30%] ml-[30%] mt-4 mb-4'>
|
|
<div className='col-span-6 font-bold'>
|
|
<span>Aircraft Make and Model</span>
|
|
</div>
|
|
<div className='col-span-6'>
|
|
<span>{log.aircraftMakeModel}</span>
|
|
</div>
|
|
<div className='col-span-6 font-bold'>
|
|
<span>Route From</span>
|
|
</div>
|
|
<div className='col-span-6'>
|
|
<span>{log.routeFrom}</span>
|
|
</div>
|
|
<div className='col-span-6 font-bold'>
|
|
<span>Route To</span>
|
|
</div>
|
|
<div className='col-span-6'>
|
|
<span>{log.routeTo}</span>
|
|
</div>
|
|
<div className='col-span-6 font-bold'>
|
|
<span>Duration Of Flight</span>
|
|
</div>
|
|
<div className='col-span-6'>
|
|
<span>{log.durationOfFlight}</span>
|
|
</div>
|
|
{log.notes &&
|
|
<>
|
|
<div className='col-span-6 font-bold'>
|
|
<span>Notes</span>
|
|
</div>
|
|
<div className='col-span-6'>
|
|
<span>{log.notes}</span>
|
|
</div>
|
|
</>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default LogbookCard; |