diff --git a/web/app/routes/logbook.flights.$id/route.tsx b/web/app/routes/logbook.flights.$id/route.tsx index 28815e6..fe8bcdc 100644 --- a/web/app/routes/logbook.flights.$id/route.tsx +++ b/web/app/routes/logbook.flights.$id/route.tsx @@ -1,8 +1,17 @@ +import { LogItem, VerticalLogItem } from "@/ui/display/log-item"; import ErrorDisplay from "@/ui/error-display"; import { client } from "@/util/api"; -import { Center, Container, List, Loader, Stack, Text } from "@mantine/core"; +import { + Center, + Container, + Divider, + Grid, + Loader, + ScrollAreaAutosize, + Stack, + Title, +} from "@mantine/core"; import { useParams } from "@remix-run/react"; -import { IconAlertTriangle } from "@tabler/icons-react"; import { useQuery } from "@tanstack/react-query"; export default function Flight() { @@ -14,30 +23,239 @@ export default function Flight() { await client.get(`/flights/${params.id}`).then((res) => res.data), }); + const log = flight.data; + return ( - + {flight.isError ? ( - +
+ +
) : flight.isPending ? ( -
+
+ ) : flight.data ? ( + <> + + Flight Log + + + + + + + + + + + {log.waypoint_from || log.waypoint_to ? ( + <> + + + + + + + + ) : null} + {log.route ? ( + <> + + + + + ) : null} + {log.hobbs_start || log.hobbs_end ? ( + <> + + + + + + + + ) : 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 ? ( + <> + + + + + + + + ) : null} + + + + + + + + + + + + + {log.time_instrument || + log.time_sim_instrument || + log.holds_instrument ? ( + <> + + + + + + + + + + + ) : null} + + + + ) : ( - - {Object.entries(flight.data).map(([key, value]) => - value && value.length !== 0 ? ( - - - - {key} - - : {value} - - - ) : null - )} - +
+ +
)} diff --git a/web/app/routes/logbook.flights.new/route.tsx b/web/app/routes/logbook.flights.new/route.tsx index 95430f3..2ea7744 100644 --- a/web/app/routes/logbook.flights.new/route.tsx +++ b/web/app/routes/logbook.flights.new/route.tsx @@ -111,7 +111,7 @@ export default function NewFlight() { New Flight
createFlight.mutate(values))}> - + {/* Date and Aircraft */} diff --git a/web/app/ui/display/log-item.tsx b/web/app/ui/display/log-item.tsx new file mode 100644 index 0000000..15c6746 --- /dev/null +++ b/web/app/ui/display/log-item.tsx @@ -0,0 +1,53 @@ +import { Card, Group, Stack, Text } from "@mantine/core"; + +export function LogItem({ + label, + content, +}: { + label: string; + content: string | null; +}) { + if (content === null) content = ""; + + return ( + + {label} + {content} + + ); +} + +export function VerticalLogItem({ + label, + content, + decimal = 0, + hours = false, + time = false, + date = false, +}: { + label: string; + content: string | null; + decimal?: number; + hours?: boolean; + time?: boolean; + date?: boolean; +}) { + if (content === null) content = ""; + if (decimal > 0) content = Number(content).toFixed(decimal); + if (hours) content = Number(content).toFixed(1); + if (time) content = content.split("T")[1]; + if (date) content = content.split("T")[0]; + + return ( + + + + {label} + + + {content} + + + + ); +} diff --git a/web/app/util/types.ts b/web/app/util/types.ts index 02531dd..3523bfd 100644 --- a/web/app/util/types.ts +++ b/web/app/util/types.ts @@ -14,11 +14,6 @@ type FlightBaseSchema = { tach_start: number | null; tach_end: number | null; - time_start: number | null; - time_off: number | null; - time_down: number | null; - time_stop: number | null; - time_total: number; time_pic: number; time_sic: number; @@ -52,16 +47,31 @@ type FlightBaseSchema = { type FlightFormSchema = FlightBaseSchema & { date: dayjs.Dayjs; + + time_start: number | null; + time_off: number | null; + time_down: number | null; + time_stop: number | null; }; type FlightCreateSchema = FlightBaseSchema & { date: string; + + time_start: dayjs.Dayjs; + time_off: dayjs.Dayjs; + time_down: dayjs.Dayjs; + time_stop: dayjs.Dayjs; }; type FlightDisplaySchema = FlightBaseSchema & { id: string; user: string; date: dayjs.Dayjs; + + time_start: number | null; + time_off: number | null; + time_down: number | null; + time_stop: number | null; }; type FlightConciseSchema = { @@ -86,6 +96,22 @@ const flightCreateHelper = (values: FlightFormSchema): FlightCreateSchema => { hobbs_end: Number(values.hobbs_end), tach_start: Number(values.tach_start), tach_end: Number(values.tach_end), + time_start: values.date + .utc() + .hour(values.time_start ?? 0 / 100) + .minute(values.time_start ?? 0 % 100), + time_off: values.date + .utc() + .hour(values.time_off ?? 0 / 100) + .minute(values.time_off ?? 0 % 100), + time_down: values.date + .utc() + .hour(values.time_down ?? 0 / 100) + .minute(values.time_down ?? 0 % 100), + time_stop: values.date + .utc() + .hour(values.time_stop ?? 0 / 100) + .minute(values.time_stop ?? 0 % 100), }; };