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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

471
web/app/routes/logbook.flights.$id/route.tsx
View File

@ -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,238 +25,238 @@ export default function Flight() {
const log = flight.data;
return (
<Container>
<Stack>
{flight.isError ? (
<Center h="calc(100vh - 95px)">
<ErrorDisplay error="Error Fetching Flight" />
</Center>
) : flight.isPending ? (
<Center h="calc(100vh - 95px)">
<Loader />
</Center>
) : flight.data ? (
<>
<Title order={3} py="lg" style={{ textAlign: "center" }}>
Flight Log
</Title>
<ScrollAreaAutosize mah="calc(100vh - 95px - 110px)" m="0" p="0">
<Container h="100%">
<Grid justify="center">
<Grid.Col span={6}>
<VerticalLogItem label="Date" content={log.date} date />
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem label="Aircraft" content={log.aircraft} />
</Grid.Col>
{log.waypoint_from || log.waypoint_to ? (
<>
<Grid.Col span={6}>
<VerticalLogItem
label="Waypoint From"
content={log.waypoint_from}
/>
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem
label="Waypoint To"
content={log.waypoint_to}
/>
</Grid.Col>
</>
) : null}
{log.route ? (
<>
<Grid.Col span={12}>
<VerticalLogItem label="Route" content={log.route} />
</Grid.Col>
</>
) : null}
{log.hobbs_start || log.hobbs_end ? (
<>
<Grid.Col span={6}>
<VerticalLogItem
label="Hobbs Start"
content={log.hobbs_start}
hours
/>
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem
label="Hobbs End"
content={log.hobbs_end}
hours
/>
</Grid.Col>
</>
) : null}
{log.tach_start || log.tach_end ? (
<>
<Grid.Col span={6}>
<VerticalLogItem
label="Tach Start"
content={log.tach_start}
hours
/>
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem
label="Tach End"
content={log.tach_end}
hours
/>
</Grid.Col>
</>
) : null}
{log.time_start || log.time_off ? (
<>
<Grid.Col span={6}>
<VerticalLogItem
label="Time Start"
content={log.time_start}
time
/>
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem
label="Time Off"
content={log.time_off}
time
/>
</Grid.Col>
</>
) : null}
{log.time_down || log.time_stop ? (
<>
<Grid.Col span={6}>
<VerticalLogItem
label="Time Down"
content={log.time_down}
time
/>
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem
label="Time Stop"
content={log.time_stop}
time
/>
</Grid.Col>
</>
) : null}
<Grid.Col span={4}>
<VerticalLogItem
label="Total Time"
content={log.time_total}
hours
/>
</Grid.Col>
<Grid.Col span={4}>
<VerticalLogItem
label="Time Solo"
content={log.time_solo}
hours
/>
</Grid.Col>
<Grid.Col span={4}>
<VerticalLogItem
label="Time Night"
content={log.time_night}
hours
/>
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem
label="Time PIC"
content={log.time_pic}
hours
/>
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem
label="Time SIC"
content={log.time_sic}
hours
/>
</Grid.Col>
{log.time_xc && log.dist_xc ? (
<>
<Grid.Col span={6}>
<VerticalLogItem
label="Time Cross-Country"
content={log.time_xc}
hours
/>
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem
label="Cross-Country Distance"
content={log.dist_xc}
decimal={2}
/>
</Grid.Col>
</>
) : null}
<Grid.Col span={6}>
<VerticalLogItem
label="Takeoffs (Day)"
content={log.takeoffs_day}
/>
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem
label="Landings (Day)"
content={log.landings_day}
/>
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem
label="Takeoffs (Night)"
content={log.takeoffs_night}
/>
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem
label="Landings (Night)"
content={log.landings_night}
/>
</Grid.Col>
{log.time_instrument ||
log.time_sim_instrument ||
log.holds_instrument ? (
<>
<Grid.Col span={4}>
<VerticalLogItem
label="Instrument Time"
content={log.time_instrument}
hours
/>
</Grid.Col>
<Grid.Col span={4}>
<VerticalLogItem
label="Simulated Instrument Time"
content={log.time_sim_instrument}
hours
/>
</Grid.Col>
<Grid.Col span={4}>
<VerticalLogItem
label="Instrument Holds"
content={log.holds_instrument}
/>
</Grid.Col>
</>
) : null}
</Grid>
</Container>
</ScrollAreaAutosize>
</>
) : (
<Center h="calc(100vh - 95px)">
<ErrorDisplay error="Unknown Error" />
</Center>
)}
</Stack>
</Container>
// <Container>
<Stack h="calc(100vh-95px)">
{flight.isError ? (
<Center h="calc(100vh - 95px)">
<ErrorDisplay error="Error Fetching Flight" />
</Center>
) : flight.isPending ? (
<Center h="calc(100vh - 95px)">
<Loader />
</Center>
) : flight.data ? (
<>
<Title order={3} py="lg" style={{ textAlign: "center" }}>
Flight Log
</Title>
<ScrollArea h="calc(100vh - 95px - 110px)" m="0" p="0">
<Container h="100%">
<Grid justify="center">
<Grid.Col span={6}>
<VerticalLogItem label="Date" content={log.date} date />
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem label="Aircraft" content={log.aircraft} />
</Grid.Col>
{log.waypoint_from || log.waypoint_to ? (
<>
<Grid.Col span={6}>
<VerticalLogItem
label="Waypoint From"
content={log.waypoint_from}
/>
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem
label="Waypoint To"
content={log.waypoint_to}
/>
</Grid.Col>
</>
) : null}
{log.route ? (
<>
<Grid.Col span={12}>
<VerticalLogItem label="Route" content={log.route} />
</Grid.Col>
</>
) : null}
{log.hobbs_start || log.hobbs_end ? (
<>
<Grid.Col span={6}>
<VerticalLogItem
label="Hobbs Start"
content={log.hobbs_start}
hours
/>
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem
label="Hobbs End"
content={log.hobbs_end}
hours
/>
</Grid.Col>
</>
) : null}
{log.tach_start || log.tach_end ? (
<>
<Grid.Col span={6}>
<VerticalLogItem
label="Tach Start"
content={log.tach_start}
hours
/>
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem
label="Tach End"
content={log.tach_end}
hours
/>
</Grid.Col>
</>
) : null}
{log.time_start || log.time_off ? (
<>
<Grid.Col span={6}>
<VerticalLogItem
label="Time Start"
content={log.time_start}
time
/>
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem
label="Time Off"
content={log.time_off}
time
/>
</Grid.Col>
</>
) : null}
{log.time_down || log.time_stop ? (
<>
<Grid.Col span={6}>
<VerticalLogItem
label="Time Down"
content={log.time_down}
time
/>
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem
label="Time Stop"
content={log.time_stop}
time
/>
</Grid.Col>
</>
) : null}
<Grid.Col span={4}>
<VerticalLogItem
label="Total Time"
content={log.time_total}
hours
/>
</Grid.Col>
<Grid.Col span={4}>
<VerticalLogItem
label="Time Solo"
content={log.time_solo}
hours
/>
</Grid.Col>
<Grid.Col span={4}>
<VerticalLogItem
label="Time Night"
content={log.time_night}
hours
/>
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem
label="Time PIC"
content={log.time_pic}
hours
/>
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem
label="Time SIC"
content={log.time_sic}
hours
/>
</Grid.Col>
{log.time_xc && log.dist_xc ? (
<>
<Grid.Col span={6}>
<VerticalLogItem
label="Time Cross-Country"
content={log.time_xc}
hours
/>
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem
label="Cross-Country Distance"
content={log.dist_xc}
decimal={2}
/>
</Grid.Col>
</>
) : null}
<Grid.Col span={6}>
<VerticalLogItem
label="Takeoffs (Day)"
content={log.takeoffs_day}
/>
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem
label="Landings (Day)"
content={log.landings_day}
/>
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem
label="Takeoffs (Night)"
content={log.takeoffs_night}
/>
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem
label="Landings (Night)"
content={log.landings_night}
/>
</Grid.Col>
{log.time_instrument ||
log.time_sim_instrument ||
log.holds_instrument ? (
<>
<Grid.Col span={4}>
<VerticalLogItem
label="Instrument Time"
content={log.time_instrument}
hours
/>
</Grid.Col>
<Grid.Col span={4}>
<VerticalLogItem
label="Simulated Instrument Time"
content={log.time_sim_instrument}
hours
/>
</Grid.Col>
<Grid.Col span={4}>
<VerticalLogItem
label="Instrument Holds"
content={log.holds_instrument}
/>
</Grid.Col>
</>
) : null}
</Grid>
</Container>
</ScrollArea>
</>
) : (
<Center h="calc(100vh - 95px)">
<ErrorDisplay error="Unknown Error" />
</Center>
)}
</Stack>
// </Container>
);
}

1
web/app/routes/logbook.flights.new/route.tsx
View File

@ -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) => {

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>
</>

2
web/app/ui/display/log-item.tsx
View File

@ -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>

6
web/app/ui/nav/app-shell.tsx
View File

@ -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>

10
web/app/ui/nav/navbar.tsx
View File

@ -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">

1
web/app/util/api.ts
View File

@ -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";
}