update display of referenced flight numbers in flight detail

explore-flights · Oct 7, 2024 · 35c715c · 35c715c
1 parent b32b6a4
commit 35c715c
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 22 deletions.
diff --git a/ui/src/components/common/join.tsx b/ui/src/components/common/join.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-export function Join({ seperator, items }: { seperator: () => React.ReactNode, items: Iterable<React.ReactNode> }): React.ReactNode {
+export function Join({ seperator, items }: { seperator: () => React.ReactNode, items: Iterable<React.ReactNode> }) {
   const result: Array<React.ReactNode> = [];
   for (const item of items) {
     result.push(item);
@@ -11,7 +11,9 @@ export function Join({ seperator, items }: { seperator: () => React.ReactNode, i
     result.pop();
   }
 
-  return result;
+  return (
+    <>{...result}</>
+  );
 }
 
 export function BulletSeperator() {

diff --git a/ui/src/pages/flight.tsx b/ui/src/pages/flight.tsx
@@ -22,6 +22,7 @@ import {
 } from '@cloudscape-design/collection-hooks';
 import { ApiError } from '../lib/api/api';
 import { FlightLink } from '../components/common/flight-link';
+import { BulletSeperator, Join } from '../components/common/join';
 
 export function FlightView() {
   const { id } = useParams();
@@ -92,6 +93,7 @@ interface FlightScheduleSummary {
     min: Duration<true>,
     max: Duration<true>,
   },
+  operatedAs: ReadonlyArray<string>,
   codeShares: ReadonlyArray<string>,
 }
 
@@ -197,18 +199,18 @@ function FlightScheduleContent({ flightSchedule }: { flightSchedule: FlightSched
                 </ColumnLayout>
               ),
             },
-            {
-              label: 'Codeshares',
-              value: (
-                <ColumnLayout columns={summary.codeShares.length} variant={'text-grid'}>
-                  {...summary.codeShares.toSorted().map((v) => <FlightLink flightNumber={v} />)}
-                </ColumnLayout>
-              ),
-            },
             {
               label: 'Operating Days',
               value: <OperatingDaysCell operatingDays={summary.operatingDays} />,
             },
+            {
+              label: 'Operated As',
+              value: <FlightNumberList flightNumbers={summary.operatedAs} exclude={flightNumber} />,
+            },
+            {
+              label: 'Codeshares',
+              value: <FlightNumberList flightNumbers={summary.codeShares} exclude={flightNumber} />,
+            },
             {
               label: 'Links',
               value: (
@@ -243,13 +245,7 @@ function FlightScheduleContent({ flightSchedule }: { flightSchedule: FlightSched
           {
             id: 'operated_as',
             header: 'Operated As',
-            cell: (v) => {
-              if (v.operatedAs !== flightNumber) {
-                return <FlightLink flightNumber={v.operatedAs} query={queryForScheduledFlight(v)} />;
-              }
-
-              return v.operatedAs;
-            },
+            cell: (v) => <InternalFlightLink flightNumber={v.operatedAs} query={queryForScheduledFlight(v)} exclude={flightNumber} />,
           },
           {
             id: 'departure_airport',
@@ -287,11 +283,7 @@ function FlightScheduleContent({ flightSchedule }: { flightSchedule: FlightSched
           {
             id: 'code_shares',
             header: 'Codeshares',
-            cell: (v) => (
-              <ColumnLayout columns={v.codeShares.length} variant={'text-grid'}>
-                {...v.codeShares.toSorted().map((fn) => <FlightLink flightNumber={fn} query={queryForScheduledFlight(v)} />)}
-              </ColumnLayout>
-            ),
+            cell: (v) => <FlightNumberList flightNumbers={v.codeShares} query={queryForScheduledFlight(v)} exclude={flightNumber} />,
           }
         ]}
       />
@@ -380,6 +372,23 @@ function OperatingDaysCell({ operatingDays }: { operatingDays: ReadonlyArray<Wee
   );
 }
 
+function FlightNumberList({ flightNumbers, query, exclude }: { flightNumbers: ReadonlyArray<string>, query?: URLSearchParams, exclude?: string }) {
+  return (
+    <Join
+      seperator={BulletSeperator}
+      items={flightNumbers.toSorted().map((v) => <InternalFlightLink flightNumber={v} query={query} exclude={exclude} />)}
+    />
+  );
+}
+
+function InternalFlightLink({ flightNumber, query, exclude }: { flightNumber: string, query?: URLSearchParams, exclude?: string }) {
+  if (flightNumber === exclude) {
+    return flightNumber;
+  }
+
+  return <FlightLink flightNumber={flightNumber} query={query} />;
+}
+
 interface TableFilterProps {
   query: PropertyFilterProps.Query;
   setQuery: (query: PropertyFilterProps.Query) => void;
@@ -470,6 +479,7 @@ function processFlightSchedule(flightSchedule: FlightSchedule, airportLookup: Ma
   const routes: Array<[string, string]> = [];
   const aircraft: Array<[string, number]> = [];
   const operatingDays: Array<WeekdayNumbers> = [];
+  const operatedAs: Array<string> = [];
   const codeShares: Array<string> = [];
   const flights: Array<ScheduledFlight> = [];
 
@@ -497,6 +507,10 @@ function processFlightSchedule(flightSchedule: FlightSchedule, airportLookup: Ma
       aircraftIndex = aircraft.push([variant.data.aircraftType, 0]) - 1;
     }
 
+    if (!operatedAs.includes(variant.data.operatedAs)) {
+      operatedAs.push(variant.data.operatedAs);
+    }
+
     for (const cs of variant.data.codeShares) {
       if (!codeShares.includes(cs)) {
         codeShares.push(cs);
@@ -572,6 +586,7 @@ function processFlightSchedule(flightSchedule: FlightSchedule, airportLookup: Ma
         min: minDuration,
         max: maxDuration,
       },
+      operatedAs: operatedAs,
       codeShares: codeShares,
     },
     flights: flights,