azpsen/tailfin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix flight list ordering

Browse Source
This commit is contained in:
april 2024-01-05 13:36:39 -06:00
parent 918a705c4c
commit 40108d1070
1 changed files with 110 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

208
web/app/routes/logbook.flights/flights-list.tsx
View File

@ -27,7 +27,7 @@ function useFlights() {
const flights = useQuery({ const flights = useQuery({
queryKey: ["flights-list"], queryKey: ["flights-list"],
queryFn: async () => queryFn: async () =>
await client.get(`/flights/by-date`).then((res) => res.data), await client.get(`/flights/by-date?order=1`).then((res) => res.data),
}); });
return flights; return flights;
@ -62,104 +62,116 @@ function FlightsListDisplay({
return ( return (
<> <>
{flights.data ? ( {flights.data ? (
Object.entries(flights.data).map(([year, months]) => ( Object.entries(flights.data)
<> .reverse()
<NavLink .map(([year, months]) => (
key={randomId()} <>
label={`-- ${year} --`} <NavLink
fw={700} key={randomId()}
style={{ textAlign: "center" }} label={`-- ${year} --`}
defaultOpened fw={700}
childrenOffset={0} style={{ textAlign: "center" }}
> defaultOpened
<> childrenOffset={0}
<Divider /> >
{Object.entries(months).map(([month, days]) => ( <>
<NavLink <Divider />
key={randomId()} {Object.entries(months)
label={monthNames[Number(month) - 1]} .reverse()
fw={500} .map(([month, days]) => (
style={{ textAlign: "center" }} <NavLink
defaultOpened key={randomId()}
> label={monthNames[Number(month) - 1]}
<Divider /> fw={500}
{Object.entries(days).map(([, logs]) => ( style={{ textAlign: "center" }}
<> defaultOpened
{logs.map((flight: FlightConciseSchema) => ( >
<> <Divider />
<NavLink {Object.entries(days)
key={randomId()} .reverse()
component={Link} .map(([, logs]) => (
to={`/logbook/flights/${flight.id}`} <>
label={ {logs
<Group> .reverse()
<Badge .map((flight: FlightConciseSchema) => (
color="gray" <>
size="lg" <NavLink
radius="sm" key={randomId()}
px="xs" component={Link}
> to={`/logbook/flights/${flight.id}`}
{flight.date} label={
</Badge> <Group>
<Text fw={500}> <Badge
{`${Number(flight.time_total).toFixed( color="gray"
1 size="lg"
)} hr`} radius="sm"
</Text> px="xs"
{flight.waypoint_from || >
flight.waypoint_to ? ( {flight.date}
<Text>/</Text> </Badge>
) : null} <Text fw={500}>
<Group gap="xs"> {`${Number(
{flight.waypoint_from ? ( flight.time_total
<Text>{flight.waypoint_from}</Text> ).toFixed(1)} hr`}
) : ( </Text>
"" {flight.waypoint_from ||
)} flight.waypoint_to ? (
{flight.waypoint_from && <Text>/</Text>
flight.waypoint_to ? ( ) : null}
<IconArrowRightTail /> <Group gap="xs">
) : null} {flight.waypoint_from ? (
{flight.waypoint_to ? ( <Text>
<Text>{flight.waypoint_to}</Text> {flight.waypoint_from}
) : ( </Text>
"" ) : (
)} ""
</Group> )}
</Group> {flight.waypoint_from &&
} flight.waypoint_to ? (
description={ <IconArrowRightTail />
<Text lineClamp={1}> ) : null}
{flight.comments {flight.waypoint_to ? (
? flight.comments <Text>{flight.waypoint_to}</Text>
: "(No Comment)"} ) : (
</Text> ""
} )}
rightSection={ </Group>
flight.aircraft ? ( </Group>
<Badge }
key={randomId()} description={
leftSection={<IconPlaneTilt size="1rem" />} <Text lineClamp={1}>
color="gray" {flight.comments
size="lg" ? flight.comments
> : "(No Comment)"}
{flight.aircraft} </Text>
</Badge> }
) : null rightSection={
} flight.aircraft ? (
active={page === flight.id} <Badge
/> key={randomId()}
<Divider /> leftSection={
</> <IconPlaneTilt size="1rem" />
))} }
</> color="gray"
size="lg"
>
{flight.aircraft}
</Badge>
) : null
}
active={page === flight.id}
/>
<Divider />
</>
))}
</>
))}
</NavLink>
))} ))}
</NavLink> </>
))} </NavLink>
</> </>
</NavLink> ))
</>
))
) : flights.isLoading ? ( ) : flights.isLoading ? (
<Center h="calc(100vh - 95px - 50px)"> <Center h="calc(100vh - 95px - 50px)">
<Loader /> <Loader />