diff --git a/web/app/routes/logbook.flights.$id/route.tsx b/web/app/routes/logbook.flights.$id/route.tsx index fe8bcdc..a4eb8cb 100644 --- a/web/app/routes/logbook.flights.$id/route.tsx +++ b/web/app/routes/logbook.flights.$id/route.tsx @@ -1,13 +1,12 @@ -import { LogItem, VerticalLogItem } from "@/ui/display/log-item"; +import { VerticalLogItem } from "@/ui/display/log-item"; import ErrorDisplay from "@/ui/error-display"; import { client } from "@/util/api"; import { Center, Container, - Divider, Grid, Loader, - ScrollAreaAutosize, + ScrollArea, Stack, Title, } from "@mantine/core"; @@ -26,238 +25,238 @@ export default function Flight() { 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} - - - - - ) : ( -
- -
- )} - - + // + + {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} + + + + + ) : ( +
+ +
+ )} + + // ); } diff --git a/web/app/routes/logbook.flights.new/route.tsx b/web/app/routes/logbook.flights.new/route.tsx index 2ea7744..6dfb9ca 100644 --- a/web/app/routes/logbook.flights.new/route.tsx +++ b/web/app/routes/logbook.flights.new/route.tsx @@ -86,7 +86,6 @@ export default function NewFlight() { mutationFn: async (values: FlightFormSchema) => { const newFlight = flightCreateHelper(values); const res = await client.post("/flights", newFlight); - console.log(res); return res.data; }, retry: (failureCount, error: AxiosError) => { diff --git a/web/app/routes/logbook.flights/flights-list.tsx b/web/app/routes/logbook.flights/flights-list.tsx index b681f66..c0e490e 100644 --- a/web/app/routes/logbook.flights/flights-list.tsx +++ b/web/app/routes/logbook.flights/flights-list.tsx @@ -8,30 +8,24 @@ import { Stack, Loader, Center, - Divider, Badge, + Group, + Divider, } from "@mantine/core"; +import { randomId } from "@mantine/hooks"; import { Link, useLocation, useNavigate } from "@remix-run/react"; -import { IconPlus } from "@tabler/icons-react"; +import { + IconArrowRightTail, + IconPlaneTilt, + IconPlus, +} from "@tabler/icons-react"; import { UseQueryResult, useQuery } from "@tanstack/react-query"; function useFlights() { const flights = useQuery({ queryKey: ["flights-list"], - queryFn: async () => { - const res = await client.get(`/flights`); - const groupedFlights: { [date: string]: FlightConciseSchema[] } = {}; - res.data.map((log: FlightConciseSchema) => { - const dateStr = log.date; - - if (!groupedFlights[dateStr]) { - groupedFlights[dateStr] = []; - } - - groupedFlights[dateStr].push(log); - }); - return groupedFlights; - }, + queryFn: async () => + await client.get(`/flights/by-date`).then((res) => res.data), }); return flights; @@ -41,41 +35,127 @@ function FlightsListDisplay({ flights, page, }: { - flights: UseQueryResult<{ [date: string]: FlightConciseSchema[] }>; + flights: UseQueryResult<{ + [year: string]: { + [month: string]: { [day: string]: FlightConciseSchema[] }; + }; + }>; page: string; }) { + const monthNames = [ + "January", + "February", + "March", + "April", + "May", + "June", + "July", + "August", + "September", + "October", + "November", + "December", + ]; + return ( <> {flights.data ? ( - Object.entries(flights.data).map(([date, logs], index: number) => ( + Object.entries(flights.data).map(([year, months]) => ( <> - - {date} - - - {logs.map((flight: FlightConciseSchema) => ( - - {flight.aircraft} - - ) : null - } - active={page === flight.id} - /> - ))} + + <> + + {Object.entries(months).map(([month, days]) => ( + + + {Object.entries(days).map(([, logs]) => ( + <> + {logs.map((flight: FlightConciseSchema) => ( + <> + + + {flight.date} + + + {`${Number(flight.time_total).toFixed( + 1 + )} hr`} + + {flight.waypoint_from || + flight.waypoint_to ? ( + / + ) : null} + + {flight.waypoint_from ? ( + {flight.waypoint_from} + ) : ( + "" + )} + {flight.waypoint_from && + flight.waypoint_to ? ( + + ) : null} + {flight.waypoint_to ? ( + {flight.waypoint_to} + ) : ( + "" + )} + + + } + description={ + + {flight.comments + ? flight.comments + : "(No Comment)"} + + } + rightSection={ + flight.aircraft ? ( + } + color="gray" + size="lg" + > + {flight.aircraft} + + ) : null + } + active={page === flight.id} + /> + + + ))} + + ))} + + ))} + + )) ) : flights.isLoading ? ( diff --git a/web/app/routes/logbook.flights/route.tsx b/web/app/routes/logbook.flights/route.tsx index 1879f00..6dd4153 100644 --- a/web/app/routes/logbook.flights/route.tsx +++ b/web/app/routes/logbook.flights/route.tsx @@ -1,22 +1,22 @@ -import { Divider, Grid, Container, ScrollAreaAutosize } from "@mantine/core"; +import { Divider, Grid, Container, ScrollArea } from "@mantine/core"; import { Outlet } from "@remix-run/react"; import { FlightsList } from "./flights-list"; export default function FlightsLayout() { return ( <> - - + + - + - + - + diff --git a/web/app/ui/display/log-item.tsx b/web/app/ui/display/log-item.tsx index 15c6746..479a2c1 100644 --- a/web/app/ui/display/log-item.tsx +++ b/web/app/ui/display/log-item.tsx @@ -40,7 +40,7 @@ export function VerticalLogItem({ return ( - + {label} diff --git a/web/app/ui/nav/app-shell.tsx b/web/app/ui/nav/app-shell.tsx index 955a852..392e65a 100644 --- a/web/app/ui/nav/app-shell.tsx +++ b/web/app/ui/nav/app-shell.tsx @@ -19,7 +19,7 @@ export function TailfinAppShell({ children }: { children: React.ReactNode }) { return ( @@ -28,7 +28,7 @@ export function TailfinAppShell({ children }: { children: React.ReactNode }) { @@ -44,7 +44,7 @@ export function TailfinAppShell({ children }: { children: React.ReactNode }) { - + {children} diff --git a/web/app/ui/nav/navbar.tsx b/web/app/ui/nav/navbar.tsx index f9cf64c..6b8e1ef 100644 --- a/web/app/ui/nav/navbar.tsx +++ b/web/app/ui/nav/navbar.tsx @@ -8,7 +8,13 @@ import { IconUser, } from "@tabler/icons-react"; -export default function Navbar() { +export default function Navbar({ + opened, + toggle, +}: { + opened: boolean; + toggle: () => void; +}) { const location = useLocation(); const page = location.pathname.split("/")[2]; @@ -24,6 +30,7 @@ export default function Navbar() { label="Dashboard" leftSection={} active={page == null} + onClick={() => (opened ? toggle() : null)} /> } active={page === "flights"} + onClick={() => (opened ? toggle() : null)} /> diff --git a/web/app/util/api.ts b/web/app/util/api.ts index 8d8e16a..d0e612a 100644 --- a/web/app/util/api.ts +++ b/web/app/util/api.ts @@ -27,7 +27,6 @@ client.interceptors.request.use( error.config.headers.Authorization = `Bearer ${newAccessToken}`; return client(error.config); } catch (err) { - console.log("ERRORRRRRRRRRRRRRR"); clearUser(); window.location.href = "/login"; }