90 lines
2.6 KiB
JavaScript
90 lines
2.6 KiB
JavaScript
import React from 'react';
|
|
|
|
import ScheduleRow from './ScheduleRow';
|
|
import ScheduleCell from './ScheduleCell';
|
|
|
|
const widths = [85, 85, 85, 85, 400, 150];
|
|
const colours = {
|
|
LANDED: '#6FB165',
|
|
ENROUTE: '#3197E5',
|
|
CANCELLED: '#E54331',
|
|
};
|
|
|
|
const Schedule = ({ data }) => {
|
|
return (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
margin: '1rem 0',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
minHeight: '662px',
|
|
maxHeight: '662px',
|
|
minWidth: '1015px',
|
|
backgroundColor: '#23252A',
|
|
borderRadius: '8px',
|
|
overflow: 'scroll',
|
|
}}
|
|
>
|
|
<ScheduleRow bg="0" border="true">
|
|
<ScheduleCell width={widths[0]} color="white">
|
|
Pilot
|
|
</ScheduleCell>
|
|
<ScheduleCell width={widths[1]} color="white">
|
|
Date
|
|
</ScheduleCell>
|
|
<ScheduleCell width={widths[2]} color="white">
|
|
Depart
|
|
</ScheduleCell>
|
|
<ScheduleCell width={widths[3]} color="white">
|
|
Arrive
|
|
</ScheduleCell>
|
|
<ScheduleCell width={widths[4]} color="white">
|
|
Destination
|
|
</ScheduleCell>
|
|
<ScheduleCell width="15" color="white"></ScheduleCell>
|
|
<ScheduleCell width={widths[5]} color="white">
|
|
Gate
|
|
</ScheduleCell>
|
|
<ScheduleCell end="true" color="white">
|
|
Status
|
|
</ScheduleCell>
|
|
</ScheduleRow>
|
|
|
|
{data?.length > 0 &&
|
|
data.map((row, i) => {
|
|
return (
|
|
<ScheduleRow bg={i % 2 === 1} key={row.id}>
|
|
<ScheduleCell width={widths[0]}>{row.name}</ScheduleCell>
|
|
<ScheduleCell width={widths[1]}>{row.date}</ScheduleCell>
|
|
<ScheduleCell width={widths[2]}>{row.startTime}</ScheduleCell>
|
|
<ScheduleCell width={widths[3]}>{row.endTime}</ScheduleCell>
|
|
<ScheduleCell width={widths[4]}>
|
|
{row.description?.length
|
|
? row.description
|
|
: row.backseat
|
|
? 'backseat'
|
|
: undefined}
|
|
</ScheduleCell>
|
|
<ScheduleCell width="15" color="white"></ScheduleCell>
|
|
<ScheduleCell width={widths[5]}>{row.location}</ScheduleCell>
|
|
<ScheduleCell
|
|
end="true"
|
|
color={colours[row.status.toUpperCase()]}
|
|
>
|
|
{row.status}
|
|
</ScheduleCell>
|
|
</ScheduleRow>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Schedule;
|