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

Finish flight information display

Browse Source
This commit is contained in:
april 2024-01-08 12:50:20 -06:00
parent 352172487a
commit 8bc3639d89
3 changed files with 267 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,4 @@
import CollapsibleFieldset from "@/ui/display/collapsible-fieldset";
import { VerticalLogItem } from "@/ui/display/log-item"; import { VerticalLogItem } from "@/ui/display/log-item";
import ErrorDisplay from "@/ui/error-display"; import ErrorDisplay from "@/ui/error-display";
import { useApi } from "@/util/api"; import { useApi } from "@/util/api";
@ -15,10 +16,18 @@ import {
Text, Text,
Modal, Modal,
Button, Button,
Badge,
Fieldset,
Collapse,
} from "@mantine/core"; } from "@mantine/core";
import { useDisclosure } from "@mantine/hooks"; import { useDisclosure } from "@mantine/hooks";
import { useNavigate, useParams } from "@remix-run/react"; import { useNavigate, useParams } from "@remix-run/react";
import { IconPencil, IconTrash } from "@tabler/icons-react"; import {
IconPencil,
IconPlaneTilt,
IconPlus,
IconTrash,
} from "@tabler/icons-react";
import { useMutation, useQuery } from "@tanstack/react-query"; import { useMutation, useQuery } from "@tanstack/react-query";
export default function Flight() { export default function Flight() {
@ -87,9 +96,11 @@ export default function Flight() {
) : flight.data ? ( ) : flight.data ? (
<> <>
<Group justify="space-between" px="xl"> <Group justify="space-between" px="xl">
<Group>
<Title order={2} py="lg" style={{ textAlign: "center" }}> <Title order={2} py="lg" style={{ textAlign: "center" }}>
Flight Log Flight Log
</Title> </Title>
</Group>
<Group> <Group>
<Tooltip <Tooltip
label="Edit Flight" label="Edit Flight"
@ -116,212 +127,233 @@ export default function Flight() {
<ScrollArea h="calc(100vh - 95px - 110px)" m="0" p="0"> <ScrollArea h="calc(100vh - 95px - 110px)" m="0" p="0">
<Container h="100%"> <Container h="100%">
<Grid justify="center"> <Grid justify="center">
<Grid.Col span={6}> <CollapsibleFieldset legend="About" mt="sm" w="100%">
<Group grow>
<VerticalLogItem label="Date" content={log.date} date /> <VerticalLogItem label="Date" content={log.date} date />
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem <VerticalLogItem
label="Aircraft" label="Aircraft"
content={log.aircraft} content={log.aircraft}
/> />
</Grid.Col> </Group>
{(log.pax || log.crew) &&
(log.pax.length > 0 || log.crew.length > 0) ? (
<Group grow mt="sm">
<VerticalLogItem label="Pax" content={log.pax} list />
<VerticalLogItem
label="Crew"
content={log.crew}
list
/>
</Group>
) : null}
{log.tags && log.tags.length > 0 ? (
<Group grow mt="sm">
<VerticalLogItem
label="Tags"
content={log.tags}
list
/>
</Group>
) : null}
{log.comments?.length > 0 ? (
<Group grow mt="sm">
<VerticalLogItem
label="Comments"
content={log.comments}
/>
</Group>
) : null}
</CollapsibleFieldset>
{log.waypoint_from || log.waypoint_to || log.route ? (
<CollapsibleFieldset legend="Route" w="100%" mt="sm">
{log.waypoint_from || log.waypoint_to ? ( {log.waypoint_from || log.waypoint_to ? (
<> <Group grow>
<Grid.Col span={6}>
<VerticalLogItem <VerticalLogItem
label="Waypoint From" label="Waypoint From"
content={log.waypoint_from} content={log.waypoint_from}
/> />
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem <VerticalLogItem
label="Waypoint To" label="Waypoint To"
content={log.waypoint_to} content={log.waypoint_to}
/> />
</Grid.Col> </Group>
</>
) : null} ) : null}
{log.route ? ( {log.route ? (
<> <Group grow>
<Grid.Col span={12}> <VerticalLogItem
<VerticalLogItem label="Route" content={log.route} /> label="Route"
</Grid.Col> content={log.route}
</> />
</Group>
) : null} ) : null}
</CollapsibleFieldset>
) : null}
{log.hobbs_start ||
log.hobbs_end ||
log.tach_start ||
log.tach_end ? (
<CollapsibleFieldset legend="Times" w="100%" mt="sm">
{log.hobbs_start || log.hobbs_end ? ( {log.hobbs_start || log.hobbs_end ? (
<> <Group grow>
<Grid.Col span={6}>
<VerticalLogItem <VerticalLogItem
label="Hobbs Start" label="Hobbs Start"
content={log.hobbs_start} content={log.hobbs_start}
hours hours
/> />
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem <VerticalLogItem
label="Hobbs End" label="Hobbs End"
content={log.hobbs_end} content={log.hobbs_end}
hours hours
/> />
</Grid.Col> </Group>
</>
) : null} ) : null}
{log.tach_start || log.tach_end ? ( {log.tach_start || log.tach_end ? (
<> <Group grow mt="sm">
<Grid.Col span={6}>
<VerticalLogItem <VerticalLogItem
label="Tach Start" label="Tach Start"
content={log.tach_start} content={log.tach_start}
hours hours
/> />
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem <VerticalLogItem
label="Tach End" label="Tach End"
content={log.tach_end} content={log.tach_end}
hours hours
/> />
</Grid.Col> </Group>
</>
) : null} ) : null}
</CollapsibleFieldset>
) : null}
{log.time_start ||
log.time_off ||
log.time_down ||
log.time_stop ? (
<CollapsibleFieldset legend="Start/Stop" w="100%" mt="sm">
{log.time_start || log.time_off ? ( {log.time_start || log.time_off ? (
<> <Group grow>
<Grid.Col span={6}>
<VerticalLogItem <VerticalLogItem
label="Time Start" label="Time Start"
content={log.time_start} content={log.time_start}
time time
/> />
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem <VerticalLogItem
label="Time Off" label="Time Off"
content={log.time_off} content={log.time_off}
time time
/> />
</Grid.Col> </Group>
</>
) : null} ) : null}
{log.time_down || log.time_stop ? ( {log.time_down || log.time_stop ? (
<> <Group grow mt="sm">
<Grid.Col span={6}>
<VerticalLogItem <VerticalLogItem
label="Time Down" label="Time Down"
content={log.time_down} content={log.time_down}
time time
/> />
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem <VerticalLogItem
label="Time Stop" label="Time Stop"
content={log.time_stop} content={log.time_stop}
time time
/> />
</Grid.Col> </Group>
</>
) : null} ) : null}
<Grid.Col span={4}> </CollapsibleFieldset>
) : null}
<CollapsibleFieldset legend="Hours" w="100%" mt="sm">
<Group grow>
<VerticalLogItem <VerticalLogItem
label="Total Time" label="Total Time"
content={log.time_total} content={log.time_total}
hours hours
/> />
</Grid.Col>
<Grid.Col span={4}>
<VerticalLogItem <VerticalLogItem
label="Time Solo" label="Time Solo"
content={log.time_solo} content={log.time_solo}
hours hours
/> />
</Grid.Col>
<Grid.Col span={4}>
<VerticalLogItem <VerticalLogItem
label="Time Night" label="Time Night"
content={log.time_night} content={log.time_night}
hours hours
/> />
</Grid.Col> </Group>
<Grid.Col span={6}> <Group grow mt="sm">
<VerticalLogItem <VerticalLogItem
label="Time PIC" label="Time PIC"
content={log.time_pic} content={log.time_pic}
hours hours
/> />
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem <VerticalLogItem
label="Time SIC" label="Time SIC"
content={log.time_sic} content={log.time_sic}
hours hours
/> />
</Grid.Col> </Group>
{log.time_xc && log.dist_xc ? ( </CollapsibleFieldset>
<> {log.time_xc || log.dist_xc ? (
<Grid.Col span={6}> <CollapsibleFieldset
legend="Cross-Country"
w="100%"
mt="sm"
>
<Group grow>
<VerticalLogItem <VerticalLogItem
label="Time Cross-Country" label="Time Cross-Country"
content={log.time_xc} content={log.time_xc}
hours hours
/> />
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem <VerticalLogItem
label="Cross-Country Distance" label="Cross-Country Distance"
content={log.dist_xc} content={log.dist_xc}
decimal={2} decimal={2}
/> />
</Grid.Col> </Group>
</> </CollapsibleFieldset>
) : null} ) : null}
<Grid.Col span={6}> <CollapsibleFieldset
legend="Takeoffs/Landings"
w="100%"
mt="sm"
>
<Group grow>
<VerticalLogItem <VerticalLogItem
label="Takeoffs (Day)" label="Takeoffs (Day)"
content={log.takeoffs_day} content={log.takeoffs_day}
/> />
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem <VerticalLogItem
label="Landings (Day)" label="Landings (Day)"
content={log.landings_day} content={log.landings_day}
/> />
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem <VerticalLogItem
label="Takeoffs (Night)" label="Takeoffs (Night)"
content={log.takeoffs_night} content={log.takeoffs_night}
/> />
</Grid.Col>
<Grid.Col span={6}>
<VerticalLogItem <VerticalLogItem
label="Landings (Night)" label="Landings (Night)"
content={log.landings_night} content={log.landings_night}
/> />
</Grid.Col> </Group>
</CollapsibleFieldset>
{log.time_instrument || {log.time_instrument ||
log.time_sim_instrument || log.time_sim_instrument ||
log.holds_instrument ? ( log.holds_instrument ? (
<> <CollapsibleFieldset legend="Instrument" mt="sm" w="100%">
<Grid.Col span={4}> <Group grow>
<VerticalLogItem <VerticalLogItem
label="Instrument Time" label="Instrument Time"
content={log.time_instrument} content={log.time_instrument}
hours hours
/> />
</Grid.Col>
<Grid.Col span={4}>
<VerticalLogItem <VerticalLogItem
label="Simulated Instrument Time" label="Simulated Instrument Time"
content={log.time_sim_instrument} content={log.time_sim_instrument}
hours hours
/> />
</Grid.Col>
<Grid.Col span={4}>
<VerticalLogItem <VerticalLogItem
label="Instrument Holds" label="Instrument Holds"
content={log.holds_instrument} content={log.holds_instrument}
/> />
</Grid.Col> </Group>
</> </CollapsibleFieldset>
) : null} ) : null}
</Grid> </Grid>
</Container> </Container>

35
web/app/ui/display/collapsible-fieldset.tsx Normal file
View File

@ -0,0 +1,35 @@
import { ActionIcon, Collapse, Fieldset, Group, Text } from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { IconMinus, IconPlus } from "@tabler/icons-react";
import { ReactNode } from "react";
export default function CollapsibleFieldset({
children,
legend,
w = "",
mt = "",
}: {
children: ReactNode;
legend?: string;
w?: string;
mt?: string;
}) {
const [open, { toggle }] = useDisclosure(true);
return (
<Fieldset
legend={
<Group gap="xs">
{legend ? <Text>{legend}</Text> : null}
<ActionIcon variant="transparent" onClick={toggle} color="gray">
{open ? <IconMinus /> : <IconPlus />}
</ActionIcon>
</Group>
}
w={w}
mt={mt}
>
<Collapse in={open}>{children}</Collapse>
</Fieldset>
);
}

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

@ -1,4 +1,5 @@
import { Card, Group, Stack, Text } from "@mantine/core"; import { Badge, Card, Group, Stack, Text } from "@mantine/core";
import { randomId } from "@mantine/hooks";
import { IconX } from "@tabler/icons-react"; import { IconX } from "@tabler/icons-react";
export function LogItem({ export function LogItem({
@ -25,29 +26,40 @@ export function VerticalLogItem({
hours = false, hours = false,
time = false, time = false,
date = false, date = false,
list = false,
}: { }: {
label: string; label: string;
content: string | null; content: string | string[] | null;
decimal?: number; decimal?: number;
hours?: boolean; hours?: boolean;
time?: boolean; time?: boolean;
date?: boolean; date?: boolean;
list?: boolean;
}) { }) {
if (content === null) content = ""; if (content === null) content = "";
if (decimal > 0) content = Number(content).toFixed(decimal); if (decimal > 0) content = Number(content).toFixed(decimal);
if (hours) content = Number(content).toFixed(1); if (hours) content = Number(content).toFixed(1);
if (time) { if (time) {
const time = content.split("T")[1].split(":"); const time = (content as string).split("T")[1].split(":");
content = `${time[0]}:${time[1]}`; content = `${time[0]}:${time[1]}`;
} }
if (date) content = content.split("T")[0]; if (date) content = (content as string).split("T")[0];
return ( return (
<Card> <Card shadow="sm" withBorder>
<Stack gap="xs" align="center" h="100%"> <Stack gap="xs" align="center" h="100%">
<Text c="dimmed" style={{ textalign: "center" }}> <Text c="dimmed" style={{ textalign: "center" }}>
{label} {label}
</Text> </Text>
{list ? (
<Group>
{(content as string[]).map((item) => (
<Badge key={randomId()} size="lg">
{item}
</Badge>
))}
</Group>
) : (
<Text <Text
size="lg" size="lg"
style={{ textalign: "center" }} style={{ textalign: "center" }}
@ -55,6 +67,7 @@ export function VerticalLogItem({
> >
{content === "" ? <IconX /> : content} {content === "" ? <IconX /> : content}
</Text> </Text>
)}
</Stack> </Stack>
</Card> </Card>
); );