Finish flight information display
This commit is contained in:
april
parent
352172487a
commit
8bc3639d89
@ -1,3 +1,4 @@
|
||||
import CollapsibleFieldset from "@/ui/display/collapsible-fieldset";
|
||||
import { VerticalLogItem } from "@/ui/display/log-item";
|
||||
import ErrorDisplay from "@/ui/error-display";
|
||||
import { useApi } from "@/util/api";
|
||||
@ -15,10 +16,18 @@ import {
|
||||
Text,
|
||||
Modal,
|
||||
Button,
|
||||
Badge,
|
||||
Fieldset,
|
||||
Collapse,
|
||||
} from "@mantine/core";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
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";
|
||||
|
||||
export default function Flight() {
|
||||
@ -87,9 +96,11 @@ export default function Flight() {
|
||||
) : flight.data ? (
|
||||
<>
|
||||
<Group justify="space-between" px="xl">
|
||||
<Group>
|
||||
<Title order={2} py="lg" style={{ textAlign: "center" }}>
|
||||
Flight Log
|
||||
</Title>
|
||||
</Group>
|
||||
<Group>
|
||||
<Tooltip
|
||||
label="Edit Flight"
|
||||
@ -116,212 +127,233 @@ export default function Flight() {
|
||||
<ScrollArea h="calc(100vh - 95px - 110px)" m="0" p="0">
|
||||
<Container h="100%">
|
||||
<Grid justify="center">
|
||||
<Grid.Col span={6}>
|
||||
<CollapsibleFieldset legend="About" mt="sm" w="100%">
|
||||
<Group grow>
|
||||
<VerticalLogItem label="Date" content={log.date} date />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="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 ? (
|
||||
<>
|
||||
<Grid.Col span={6}>
|
||||
<Group grow>
|
||||
<VerticalLogItem
|
||||
label="Waypoint From"
|
||||
content={log.waypoint_from}
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<VerticalLogItem
|
||||
label="Waypoint To"
|
||||
content={log.waypoint_to}
|
||||
/>
|
||||
</Grid.Col>
|
||||
</>
|
||||
</Group>
|
||||
) : null}
|
||||
{log.route ? (
|
||||
<>
|
||||
<Grid.Col span={12}>
|
||||
<VerticalLogItem label="Route" content={log.route} />
|
||||
</Grid.Col>
|
||||
</>
|
||||
<Group grow>
|
||||
<VerticalLogItem
|
||||
label="Route"
|
||||
content={log.route}
|
||||
/>
|
||||
</Group>
|
||||
) : 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 ? (
|
||||
<>
|
||||
<Grid.Col span={6}>
|
||||
<Group grow>
|
||||
<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>
|
||||
</>
|
||||
</Group>
|
||||
) : null}
|
||||
{log.tach_start || log.tach_end ? (
|
||||
<>
|
||||
<Grid.Col span={6}>
|
||||
<Group grow mt="sm">
|
||||
<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>
|
||||
</>
|
||||
</Group>
|
||||
) : 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 ? (
|
||||
<>
|
||||
<Grid.Col span={6}>
|
||||
<Group grow>
|
||||
<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>
|
||||
</>
|
||||
</Group>
|
||||
) : null}
|
||||
{log.time_down || log.time_stop ? (
|
||||
<>
|
||||
<Grid.Col span={6}>
|
||||
<Group grow mt="sm">
|
||||
<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>
|
||||
</>
|
||||
</Group>
|
||||
) : null}
|
||||
<Grid.Col span={4}>
|
||||
</CollapsibleFieldset>
|
||||
) : null}
|
||||
<CollapsibleFieldset legend="Hours" w="100%" mt="sm">
|
||||
<Group grow>
|
||||
<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}>
|
||||
</Group>
|
||||
<Group grow mt="sm">
|
||||
<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}>
|
||||
</Group>
|
||||
</CollapsibleFieldset>
|
||||
{log.time_xc || log.dist_xc ? (
|
||||
<CollapsibleFieldset
|
||||
legend="Cross-Country"
|
||||
w="100%"
|
||||
mt="sm"
|
||||
>
|
||||
<Group grow>
|
||||
<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>
|
||||
</>
|
||||
</Group>
|
||||
</CollapsibleFieldset>
|
||||
) : null}
|
||||
<Grid.Col span={6}>
|
||||
<CollapsibleFieldset
|
||||
legend="Takeoffs/Landings"
|
||||
w="100%"
|
||||
mt="sm"
|
||||
>
|
||||
<Group grow>
|
||||
<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>
|
||||
</Group>
|
||||
</CollapsibleFieldset>
|
||||
{log.time_instrument ||
|
||||
log.time_sim_instrument ||
|
||||
log.holds_instrument ? (
|
||||
<>
|
||||
<Grid.Col span={4}>
|
||||
<CollapsibleFieldset legend="Instrument" mt="sm" w="100%">
|
||||
<Group grow>
|
||||
<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>
|
||||
</>
|
||||
</Group>
|
||||
</CollapsibleFieldset>
|
||||
) : null}
|
||||
</Grid>
|
||||
</Container>
|
||||
|
||||
35
web/app/ui/display/collapsible-fieldset.tsx
Normal file
35
web/app/ui/display/collapsible-fieldset.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@ -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";
|
||||
|
||||
export function LogItem({
|
||||
@ -25,29 +26,40 @@ export function VerticalLogItem({
|
||||
hours = false,
|
||||
time = false,
|
||||
date = false,
|
||||
list = false,
|
||||
}: {
|
||||
label: string;
|
||||
content: string | null;
|
||||
content: string | string[] | null;
|
||||
decimal?: number;
|
||||
hours?: boolean;
|
||||
time?: boolean;
|
||||
date?: boolean;
|
||||
list?: boolean;
|
||||
}) {
|
||||
if (content === null) content = "";
|
||||
if (decimal > 0) content = Number(content).toFixed(decimal);
|
||||
if (hours) content = Number(content).toFixed(1);
|
||||
if (time) {
|
||||
const time = content.split("T")[1].split(":");
|
||||
const time = (content as string).split("T")[1].split(":");
|
||||
content = `${time[0]}:${time[1]}`;
|
||||
}
|
||||
if (date) content = content.split("T")[0];
|
||||
if (date) content = (content as string).split("T")[0];
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<Card shadow="sm" withBorder>
|
||||
<Stack gap="xs" align="center" h="100%">
|
||||
<Text c="dimmed" style={{ textalign: "center" }}>
|
||||
{label}
|
||||
</Text>
|
||||
{list ? (
|
||||
<Group>
|
||||
{(content as string[]).map((item) => (
|
||||
<Badge key={randomId()} size="lg">
|
||||
{item}
|
||||
</Badge>
|
||||
))}
|
||||
</Group>
|
||||
) : (
|
||||
<Text
|
||||
size="lg"
|
||||
style={{ textalign: "center" }}
|
||||
@ -55,6 +67,7 @@ export function VerticalLogItem({
|
||||
>
|
||||
{content === "" ? <IconX /> : content}
|
||||
</Text>
|
||||
)}
|
||||
</Stack>
|
||||
</Card>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user