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

Group flight list by date

Browse Source
This commit is contained in:
april
2024-01-05 11:13:21 -06:00
parent 7fa749a5de
commit 05fefd40b1
8 changed files with 379 additions and 294 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,30 +8,24 @@ import {
Stack,
Loader,
Center,
Divider,
Badge,
Group,
Divider,
} from "@mantine/core";
import { randomId } from "@mantine/hooks";
import { Link, useLocation, useNavigate } from "@remix-run/react";
import { IconPlus } from "@tabler/icons-react";
import {
IconArrowRightTail,
IconPlaneTilt,
IconPlus,
} from "@tabler/icons-react";
import { UseQueryResult, useQuery } from "@tanstack/react-query";
function useFlights() {
const flights = useQuery({
queryKey: ["flights-list"],
queryFn: async () => {
const res = await client.get(`/flights`);
const groupedFlights: { [date: string]: FlightConciseSchema[] } = {};
res.data.map((log: FlightConciseSchema) => {
const dateStr = log.date;
if (!groupedFlights[dateStr]) {
groupedFlights[dateStr] = [];
}
groupedFlights[dateStr].push(log);
});
return groupedFlights;
},
queryFn: async () =>
await client.get(`/flights/by-date`).then((res) => res.data),
});
return flights;
@@ -41,41 +35,127 @@ function FlightsListDisplay({
flights,
page,
}: {
flights: UseQueryResult<{ [date: string]: FlightConciseSchema[] }>;
flights: UseQueryResult<{
[year: string]: {
[month: string]: { [day: string]: FlightConciseSchema[] };
};
}>;
page: string;
}) {
const monthNames = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
return (
<>
{flights.data ? (
Object.entries(flights.data).map(([date, logs], index: number) => (
Object.entries(flights.data).map(([year, months]) => (
<>
<Text key={date} mt="md" mb="xs" fw={700}>
{date}
</Text>
<Divider key={date + index} />
{logs.map((flight: FlightConciseSchema) => (
<NavLink
key={flight.id}
component={Link}
to={`/logbook/flights/${flight.id}`}
label={`${
!(flight.waypoint_from || flight.waypoint_to)
? "No Route"
: ""
}${flight.waypoint_from ? flight.waypoint_from : ""} ${
flight.waypoint_to ? flight.waypoint_to : ""
}`}
description={`${flight.date}`}
rightSection={
flight.aircraft ? (
<Badge key={"aircraft" + index} color="gray">
{flight.aircraft}
</Badge>
) : null
}
active={page === flight.id}
/>
))}
<NavLink
key={randomId()}
label={`-- ${year} --`}
fw={700}
style={{ textAlign: "center" }}
defaultOpened
childrenOffset={0}
>
<>
<Divider />
{Object.entries(months).map(([month, days]) => (
<NavLink
key={randomId()}
label={monthNames[Number(month) - 1]}
fw={500}
style={{ textAlign: "center" }}
defaultOpened
>
<Divider />
{Object.entries(days).map(([, logs]) => (
<>
{logs.map((flight: FlightConciseSchema) => (
<>
<NavLink
key={randomId()}
component={Link}
to={`/logbook/flights/${flight.id}`}
label={
<Group>
<Badge
color="gray"
size="lg"
radius="sm"
px="xs"
>
{flight.date}
</Badge>
<Text fw={500}>
{`${Number(flight.time_total).toFixed(
1
)} hr`}
</Text>
{flight.waypoint_from ||
flight.waypoint_to ? (
<Text>/</Text>
) : null}
<Group gap="xs">
{flight.waypoint_from ? (
<Text>{flight.waypoint_from}</Text>
) : (
""
)}
{flight.waypoint_from &&
flight.waypoint_to ? (
<IconArrowRightTail />
) : null}
{flight.waypoint_to ? (
<Text>{flight.waypoint_to}</Text>
) : (
""
)}
</Group>
</Group>
}
description={
<Text lineClamp={1}>
{flight.comments
? flight.comments
: "(No Comment)"}
</Text>
}
rightSection={
flight.aircraft ? (
<Badge
key={randomId()}
leftSection={<IconPlaneTilt size="1rem" />}
color="gray"
size="lg"
>
{flight.aircraft}
</Badge>
) : null
}
active={page === flight.id}
/>
<Divider />
</>
))}
</>
))}
</NavLink>
))}
</>
</NavLink>
</>
))
) : flights.isLoading ? (

12
web/app/routes/logbook.flights/route.tsx
View File

@@ -1,22 +1,22 @@
import { Divider, Grid, Container, ScrollAreaAutosize } from "@mantine/core";
import { Divider, Grid, Container, ScrollArea } from "@mantine/core";
import { Outlet } from "@remix-run/react";
import { FlightsList } from "./flights-list";
export default function FlightsLayout() {
return (
<>
<Grid h="100%" visibleFrom="md">
<Grid.Col span={3}>
<Grid h="100%" visibleFrom="lg">
<Grid.Col span={4}>
<FlightsList />
</Grid.Col>
<Divider orientation="vertical" m="sm" />
<Grid.Col span="auto">
<ScrollAreaAutosize mah="calc(100vh - 95px)">
<ScrollArea.Autosize mah="calc(100vh - 95px)">
<Outlet />
</ScrollAreaAutosize>
</ScrollArea.Autosize>
</Grid.Col>
</Grid>
<Container hiddenFrom="md">
<Container hiddenFrom="lg" style={{ paddingLeft: 0, paddingRight: 0 }}>
<Outlet />
</Container>
</>