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

Fix spacing issue and rearrange log display

Browse Source
This commit is contained in:
april 2024-01-08 13:07:04 -06:00
parent 8bc3639d89
commit c4f990ea19
2 changed files with 57 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,18 +16,10 @@ 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 { import { IconPencil, IconTrash } from "@tabler/icons-react";
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() {
@ -169,11 +161,11 @@ export default function Flight() {
{log.waypoint_from || log.waypoint_to ? ( {log.waypoint_from || log.waypoint_to ? (
<Group grow> <Group grow>
<VerticalLogItem <VerticalLogItem
label="Waypoint From" label="From"
content={log.waypoint_from} content={log.waypoint_from}
/> />
<VerticalLogItem <VerticalLogItem
label="Waypoint To" label="To"
content={log.waypoint_to} content={log.waypoint_to}
/> />
</Group> </Group>
@ -261,29 +253,29 @@ export default function Flight() {
<CollapsibleFieldset legend="Hours" w="100%" mt="sm"> <CollapsibleFieldset legend="Hours" w="100%" mt="sm">
<Group grow> <Group grow>
<VerticalLogItem <VerticalLogItem
label="Total Time" label="Total"
content={log.time_total} content={log.time_total}
hours hours
/> />
<VerticalLogItem <VerticalLogItem
label="Time Solo" label="Solo"
content={log.time_solo} content={log.time_solo}
hours hours
/> />
<VerticalLogItem <VerticalLogItem
label="Time Night" label="Night"
content={log.time_night} content={log.time_night}
hours hours
/> />
</Group> </Group>
<Group grow mt="sm"> <Group grow mt="sm">
<VerticalLogItem <VerticalLogItem
label="Time PIC" label="PIC"
content={log.time_pic} content={log.time_pic}
hours hours
/> />
<VerticalLogItem <VerticalLogItem
label="Time SIC" label="SIC"
content={log.time_sic} content={log.time_sic}
hours hours
/> />
@ -297,42 +289,48 @@ export default function Flight() {
> >
<Group grow> <Group grow>
<VerticalLogItem <VerticalLogItem
label="Time Cross-Country" label="Hours"
content={log.time_xc} content={log.time_xc}
hours hours
/> />
<VerticalLogItem <VerticalLogItem
label="Cross-Country Distance" label="Distance"
content={log.dist_xc} content={log.dist_xc}
decimal={2} decimal={2}
/> />
</Group> </Group>
</CollapsibleFieldset> </CollapsibleFieldset>
) : null} ) : null}
<CollapsibleFieldset <Grid w="100%" mt="sm">
legend="Takeoffs/Landings" <Grid.Col span={6}>
w="100%" <CollapsibleFieldset legend="Takeoffs" w="100%">
mt="sm"
>
<Group grow> <Group grow>
<VerticalLogItem <VerticalLogItem
label="Takeoffs (Day)" label="Day"
content={log.takeoffs_day} content={log.takeoffs_day}
/> />
<VerticalLogItem <VerticalLogItem
label="Landings (Day)" label="Night"
content={log.takeoffs_night}
/>
</Group>
</CollapsibleFieldset>
</Grid.Col>
<Grid.Col span={6}>
<CollapsibleFieldset legend="Landings" w="100%">
<Group grow>
<VerticalLogItem
label="Day"
content={log.landings_day} content={log.landings_day}
/> />
<VerticalLogItem <VerticalLogItem
label="Takeoffs (Night)" label="Night"
content={log.takeoffs_night}
/>
<VerticalLogItem
label="Landings (Night)"
content={log.landings_night} content={log.landings_night}
/> />
</Group> </Group>
</CollapsibleFieldset> </CollapsibleFieldset>
</Grid.Col>
</Grid>
{log.time_instrument || {log.time_instrument ||
log.time_sim_instrument || log.time_sim_instrument ||
log.holds_instrument ? ( log.holds_instrument ? (

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

@ -46,23 +46,31 @@ export function VerticalLogItem({
if (date) content = (content as string).split("T")[0]; if (date) content = (content as string).split("T")[0];
return ( return (
<Card shadow="sm" withBorder> <Card shadow="sm" withBorder h="100%">
<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 ? ( {list ? (
<Group> <>
{(content as string[]).length > 0 ? (
<Text size="lg">
{(content as string[]).map((item) => ( {(content as string[]).map((item) => (
<Badge key={randomId()} size="lg"> <Badge key={randomId()} size="lg" mx="xs">
{item} {item}
</Badge> </Badge>
))} ))}
</Group> </Text>
) : (
<Text size="lg" style={{ textAlign: "center" }} c="dimmed">
<IconX />
</Text>
)}
</>
) : ( ) : (
<Text <Text
size="lg" size="lg"
style={{ textalign: "center" }} style={{ textAlign: "center" }}
c={content === "" ? "dimmed" : ""} c={content === "" ? "dimmed" : ""}
> >
{content === "" ? <IconX /> : content} {content === "" ? <IconX /> : content}