82 lines
3.2 KiB
TypeScript
82 lines
3.2 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { useFetchDeparture } from "../../hooks/useFetchDeparture";
|
|
import { Flight } from "../../Types";
|
|
import './Page.css'
|
|
import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table';
|
|
import 'react-super-responsive-table/dist/SuperResponsiveTableStyle.css';
|
|
|
|
interface Props {
|
|
flights?: Flight[];
|
|
}
|
|
|
|
export const Departure: React.FC<Props> = (props) => {
|
|
let origin = process.env.REACT_APP_ORIGIN;
|
|
|
|
const { zones, error } = useFetchDeparture(origin);
|
|
const [startIndex, setStartIndex] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
if (zones.length <= 10) {
|
|
return;
|
|
}
|
|
setStartIndex((prevIndex) => (prevIndex + 10) >= zones.length ? 0 : (prevIndex + 10));
|
|
}, 5000);
|
|
|
|
return () => clearInterval(interval);
|
|
}, [zones]);
|
|
|
|
|
|
return (
|
|
<div >
|
|
<h2>Departure</h2>
|
|
<div className="Items">
|
|
<Table>
|
|
<Thead>
|
|
<Tr>
|
|
<Th>Code</Th>
|
|
<Th>Time</Th>
|
|
<Th>Destination</Th>
|
|
<Th>Gate</Th>
|
|
<Th>Status</Th>
|
|
</Tr>
|
|
</Thead>
|
|
<Tbody>
|
|
{zones.length > 0 && (
|
|
<>
|
|
{zones.slice(startIndex, startIndex + 10).map((flight) => (
|
|
<Tr key={flight.id} className={flight.status === 'Delayed' ? 'delayed-flight' : ''}>
|
|
<Td>{flight.flight_code}</Td>
|
|
<Td>{flight.departure_time}</Td>
|
|
<Td>{flight.destination}</Td>
|
|
<Td>{flight.gate}</Td>
|
|
<Td>{flight.status}</Td>
|
|
</Tr>
|
|
// );
|
|
))}
|
|
{startIndex + 10 >= zones.length && (
|
|
<>
|
|
{Array.from({ length: startIndex + 10 - zones.length }).map((_, index) => {
|
|
return (
|
|
<Tr key={index}>
|
|
<Td></Td>
|
|
<Td></Td>
|
|
<Td></Td>
|
|
<Td></Td>
|
|
<Td></Td>
|
|
</Tr>
|
|
)
|
|
})}
|
|
</>
|
|
)
|
|
}
|
|
</>
|
|
)}
|
|
</Tbody>
|
|
</Table>
|
|
{error ? <div className="Disconnected">{error}</div> : <></>}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|