Group flight list by date
This commit is contained in:
april
parent
7fa749a5de
commit
05fefd40b1
@ -1,13 +1,12 @@
|
||||
import { LogItem, VerticalLogItem } from "@/ui/display/log-item";
|
||||
import { VerticalLogItem } from "@/ui/display/log-item";
|
||||
import ErrorDisplay from "@/ui/error-display";
|
||||
import { client } from "@/util/api";
|
||||
import {
|
||||
Center,
|
||||
Container,
|
||||
Divider,
|
||||
Grid,
|
||||
Loader,
|
||||
ScrollAreaAutosize,
|
||||
ScrollArea,
|
||||
Stack,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
@ -26,8 +25,8 @@ export default function Flight() {
|
||||
const log = flight.data;
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Stack>
|
||||
// <Container>
|
||||
<Stack h="calc(100vh-95px)">
|
||||
{flight.isError ? (
|
||||
<Center h="calc(100vh - 95px)">
|
||||
<ErrorDisplay error="Error Fetching Flight" />
|
||||
@ -41,7 +40,7 @@ export default function Flight() {
|
||||
<Title order={3} py="lg" style={{ textAlign: "center" }}>
|
||||
Flight Log
|
||||
</Title>
|
||||
<ScrollAreaAutosize mah="calc(100vh - 95px - 110px)" m="0" p="0">
|
||||
<ScrollArea h="calc(100vh - 95px - 110px)" m="0" p="0">
|
||||
<Container h="100%">
|
||||
<Grid justify="center">
|
||||
<Grid.Col span={6}>
|
||||
@ -250,7 +249,7 @@ export default function Flight() {
|
||||
) : null}
|
||||
</Grid>
|
||||
</Container>
|
||||
</ScrollAreaAutosize>
|
||||
</ScrollArea>
|
||||
</>
|
||||
) : (
|
||||
<Center h="calc(100vh - 95px)">
|
||||
@ -258,6 +257,6 @@ export default function Flight() {
|
||||
</Center>
|
||||
)}
|
||||
</Stack>
|
||||
</Container>
|
||||
// </Container>
|
||||
);
|
||||
}
|
||||
|
||||
@ -86,7 +86,6 @@ export default function NewFlight() {
|
||||
mutationFn: async (values: FlightFormSchema) => {
|
||||
const newFlight = flightCreateHelper(values);
|
||||
const res = await client.post("/flights", newFlight);
|
||||
console.log(res);
|
||||
return res.data;
|
||||
},
|
||||
retry: (failureCount, error: AxiosError) => {
|
||||
|
||||
@ -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,42 +35,128 @@ 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}
|
||||
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={`${
|
||||
!(flight.waypoint_from || flight.waypoint_to)
|
||||
? "No Route"
|
||||
: ""
|
||||
}${flight.waypoint_from ? flight.waypoint_from : ""} ${
|
||||
flight.waypoint_to ? flight.waypoint_to : ""
|
||||
}`}
|
||||
description={`${flight.date}`}
|
||||
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={"aircraft" + index} color="gray">
|
||||
<Badge
|
||||
key={randomId()}
|
||||
leftSection={<IconPlaneTilt size="1rem" />}
|
||||
color="gray"
|
||||
size="lg"
|
||||
>
|
||||
{flight.aircraft}
|
||||
</Badge>
|
||||
) : null
|
||||
}
|
||||
active={page === flight.id}
|
||||
/>
|
||||
<Divider />
|
||||
</>
|
||||
))}
|
||||
</>
|
||||
))}
|
||||
</NavLink>
|
||||
))}
|
||||
</>
|
||||
</NavLink>
|
||||
</>
|
||||
))
|
||||
) : flights.isLoading ? (
|
||||
<Center h="calc(100vh - 95px - 50px)">
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
|
||||
@ -40,7 +40,7 @@ export function VerticalLogItem({
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<Stack gap="xs" align="center">
|
||||
<Stack gap="xs" align="center" h="100%">
|
||||
<Text c="dimmed" style={{ textalign: "center" }}>
|
||||
{label}
|
||||
</Text>
|
||||
|
||||
@ -19,7 +19,7 @@ export function TailfinAppShell({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<AppShell
|
||||
header={{ height: 60 }}
|
||||
navbar={{ width: 300, breakpoint: "sm", collapsed: { mobile: !opened } }}
|
||||
navbar={{ width: 300, breakpoint: "xl", collapsed: { mobile: !opened } }}
|
||||
padding="md"
|
||||
>
|
||||
<AppShell.Header>
|
||||
@ -28,7 +28,7 @@ export function TailfinAppShell({ children }: { children: React.ReactNode }) {
|
||||
<Burger
|
||||
opened={opened}
|
||||
onClick={toggle}
|
||||
hiddenFrom="sm"
|
||||
hiddenFrom="xl"
|
||||
size="sm"
|
||||
/>
|
||||
</Group>
|
||||
@ -44,7 +44,7 @@ export function TailfinAppShell({ children }: { children: React.ReactNode }) {
|
||||
</Group>
|
||||
</AppShell.Header>
|
||||
<AppShell.Navbar>
|
||||
<Navbar />
|
||||
<Navbar opened={opened} toggle={toggle} />
|
||||
</AppShell.Navbar>
|
||||
<AppShell.Main>{children}</AppShell.Main>
|
||||
</AppShell>
|
||||
|
||||
@ -8,7 +8,13 @@ import {
|
||||
IconUser,
|
||||
} from "@tabler/icons-react";
|
||||
|
||||
export default function Navbar() {
|
||||
export default function Navbar({
|
||||
opened,
|
||||
toggle,
|
||||
}: {
|
||||
opened: boolean;
|
||||
toggle: () => void;
|
||||
}) {
|
||||
const location = useLocation();
|
||||
const page = location.pathname.split("/")[2];
|
||||
|
||||
@ -24,6 +30,7 @@ export default function Navbar() {
|
||||
label="Dashboard"
|
||||
leftSection={<IconPlaneDeparture />}
|
||||
active={page == null}
|
||||
onClick={() => (opened ? toggle() : null)}
|
||||
/>
|
||||
<NavLink
|
||||
p="md"
|
||||
@ -32,6 +39,7 @@ export default function Navbar() {
|
||||
label="Flights"
|
||||
leftSection={<IconBook2 />}
|
||||
active={page === "flights"}
|
||||
onClick={() => (opened ? toggle() : null)}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack gap="0">
|
||||
|
||||
@ -27,7 +27,6 @@ client.interceptors.request.use(
|
||||
error.config.headers.Authorization = `Bearer ${newAccessToken}`;
|
||||
return client(error.config);
|
||||
} catch (err) {
|
||||
console.log("ERRORRRRRRRRRRRRRR");
|
||||
clearUser();
|
||||
window.location.href = "/login";
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user