feat: add eet column in table (#140)

packages/app/src/components/FlightsTable/index.tsx

@@ -1,15 +1,23 @@
-"use client"
+"use client";
 
-import Flight from '@mach/common'
-import { FC, useState } from 'react'
-import { Airport } from '../../services/fetch-airports'
-import { formatAirport } from '../../utils/format-airport'
-import Button from '../Button'
-import FlightModal from '../FlightModal'
-import styles from './index.module.css'
+import Flight from "@mach/common";
+import { FC, useState } from "react";
+import { Airport } from "../../services/fetch-airports";
+import { formatAirport } from "../../utils/format-airport";
+import Button from "../Button";
+import FlightModal from "../FlightModal";
+import styles from "./index.module.css";
 
 type Props = {
-  items: Array<Flight & { departure?: Airport, arrival?: Airport }>
+  items: Array<Flight & { departure?: Airport; arrival?: Airport }>;
+};
+
+function minutesToEet(totalMinutes: number) {
+  const hours = Math.floor(totalMinutes / 60);
+  const minutes = totalMinutes % 60;
+  return `${hours.toString().padStart(2, "0")}${minutes
+    .toString()
+    .padStart(2, "0")}`;
 }
 
 const FlightsTable: FC<Props> = ({ items }) => {
@@ -18,44 +26,61 @@ const FlightsTable: FC<Props> = ({ items }) => {
 
   return (
     <div>
-        <table className={styles.table}>
-          <thead>
-            <tr>
-              <th>Callsign</th>
-              <th>Departure</th>
-              <th>Arrival</th>
-              <th>EOBT</th>
-              <th>Aircraft</th>
-              <th className="grid justify-items-center">Details</th>
+      <table className={styles.table}>
+        <thead>
+          <tr>
+            <th>Callsign</th>
+            <th>Departure</th>
+            <th>Arrival</th>
+            <th>EOBT</th>
+            <th>EET</th>
+            <th>Aircraft</th>
+            <th className="grid justify-items-center">Details</th>
+          </tr>
+        </thead>
+        <tbody>
+          {items.map((flight, key) => (
+            <tr key={key}>
+              <td>{flight.callsign}</td>
+              <td>
+                <abbr
+                  title={
+                    flight.departure
+                      ? formatAirport(flight.departure)
+                      : undefined
+                  }
+                >
+                  {flight.departureIcao}
+                </abbr>
+              </td>
+              <td>
+                <abbr
+                  title={
+                    flight.arrival ? formatAirport(flight.arrival) : undefined
+                  }
+                >
+                  {flight.arrivalIcao}
+                </abbr>
+              </td>
+              <td>{flight.estimatedOffBlockTime}</td>
+              <td>{minutesToEet(flight.estimatedEnrouteMinutes)}</td>
+              <td>{flight.aircraft.icaoCode}</td>
+              <td className="grid justify-items-center">
+                <Button variant={"primary"} onClick={() => setFlight(flight)}>
+                  View Details
+                </Button>
+              </td>
             </tr>
-          </thead>
-          <tbody>
-            {items.map((flight, key) => (
-              <tr key={key}>
-                <td>{flight.callsign}</td>
-                <td><abbr title={flight.departure ? formatAirport(flight.departure) : undefined}>{flight.departureIcao}</abbr></td>
-                <td><abbr title={flight.arrival ? formatAirport(flight.arrival) : undefined}>{flight.arrivalIcao}</abbr></td>
-                <td>{flight.estimatedOffBlockTime}</td>
-                <td>{flight.aircraft.icaoCode}</td>
-                <td className="grid justify-items-center">
-                  <Button
-                    variant={'primary'}
-                    onClick={() => setFlight(flight)}
-                  >
-                    View Details
-                  </Button>
-                </td>
-              </tr>
-            ))}
-          </tbody>
+          ))}
+        </tbody>
       </table>
       <FlightModal
         flight={flight!}
         show={showModal}
         onClose={() => setFlight(undefined)}
       />
     </div>
-  )
-}
+  );
+};
 
-export default FlightsTable
+export default FlightsTable;