diff --git a/web/app/routes/logbook.flights.$id/route.tsx b/web/app/routes/logbook.flights.$id/route.tsx
index 2130f02..dc7ee76 100644
--- a/web/app/routes/logbook.flights.$id/route.tsx
+++ b/web/app/routes/logbook.flights.$id/route.tsx
@@ -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 ? (
<>
-
- Flight Log
-
+
+
+ Flight Log
+
+
-
-
-
-
-
-
- {log.waypoint_from || log.waypoint_to ? (
- <>
-
+
+
+
+
+
+ {(log.pax || log.crew) &&
+ (log.pax.length > 0 || log.crew.length > 0) ? (
+
+
-
-
+
+ ) : null}
+ {log.tags && log.tags.length > 0 ? (
+
-
-
+
+ ) : null}
+ {log.comments?.length > 0 ? (
+
+
+
+ ) : null}
+
+ {log.waypoint_from || log.waypoint_to || log.route ? (
+
+ {log.waypoint_from || log.waypoint_to ? (
+
+
+
+
+ ) : null}
+ {log.route ? (
+
+
+
+ ) : null}
+
) : null}
- {log.route ? (
- <>
-
-
-
-
+ {log.hobbs_start ||
+ log.hobbs_end ||
+ log.tach_start ||
+ log.tach_end ? (
+
+ {log.hobbs_start || log.hobbs_end ? (
+
+
+
+
+ ) : null}
+ {log.tach_start || log.tach_end ? (
+
+
+
+
+ ) : null}
+
) : null}
- {log.hobbs_start || log.hobbs_end ? (
- <>
-
-
-
-
-
-
-
+ {log.time_start ||
+ log.time_off ||
+ log.time_down ||
+ log.time_stop ? (
+
+ {log.time_start || log.time_off ? (
+
+
+
+
+ ) : null}
+ {log.time_down || log.time_stop ? (
+
+
+
+
+ ) : null}
+
) : null}
- {log.tach_start || log.tach_end ? (
- <>
-
-
-
-
-
-
-
- ) : null}
- {log.time_start || log.time_off ? (
- <>
-
-
-
-
-
-
-
- ) : null}
- {log.time_down || log.time_stop ? (
- <>
-
-
-
-
-
-
-
- ) : null}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {log.time_xc && log.dist_xc ? (
- <>
-
+
+
+
+
+
+
+
+
+
+
+
+ {log.time_xc || log.dist_xc ? (
+
+
-
-
-
-
+
+
) : null}
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
{log.time_instrument ||
log.time_sim_instrument ||
log.holds_instrument ? (
- <>
-
+
+
-
-
-
-
-
-
+
+
) : null}
diff --git a/web/app/ui/display/collapsible-fieldset.tsx b/web/app/ui/display/collapsible-fieldset.tsx
new file mode 100644
index 0000000..c009071
--- /dev/null
+++ b/web/app/ui/display/collapsible-fieldset.tsx
@@ -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 (
+
+ );
+}
diff --git a/web/app/ui/display/log-item.tsx b/web/app/ui/display/log-item.tsx
index 7ad8795..e3cc554 100644
--- a/web/app/ui/display/log-item.tsx
+++ b/web/app/ui/display/log-item.tsx
@@ -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,36 +26,48 @@ 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 (
-
+
{label}
-
- {content === "" ? : content}
-
+ {list ? (
+
+ {(content as string[]).map((item) => (
+
+ {item}
+
+ ))}
+
+ ) : (
+
+ {content === "" ? : content}
+
+ )}
);