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

Remove tach from aircraft

Browse Source
This commit is contained in:
april 2024-01-10 13:55:54 -06:00
parent 9e4520b218
commit 1958f6dc5f
8 changed files with 392 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

321
web/app/routes/logbook.aircraft/route.tsx Normal file
View File

@ -0,0 +1,321 @@
import ErrorDisplay from "@/ui/error-display";
import { useApi } from "@/util/api";
import { AircraftFormSchema, AircraftSchema } from "@/util/types";
import {
ActionIcon,
Button,
Card,
Center,
Container,
Group,
Loader,
Modal,
NumberInput,
ScrollArea,
Select,
Stack,
Text,
TextInput,
Title,
Tooltip,
} from "@mantine/core";
import { useForm } from "@mantine/form";
import { randomId, useDisclosure } from "@mantine/hooks";
import { IconPencil, IconPlus, IconTrash, IconX } from "@tabler/icons-react";
import {
UseQueryResult,
useMutation,
useQuery,
useQueryClient,
} from "@tanstack/react-query";
import { AxiosError } from "axios";
import { useState } from "react";
function useAircraft() {
const client = useApi();
const aircraft = useQuery({
queryKey: ["aircraft-list"],
queryFn: async () => await client.get(`/aircraft`).then((res) => res.data),
});
return aircraft;
}
function AircraftCard({ aircraft }: { aircraft: AircraftSchema }) {
const [deleteOpened, { open: openDelete, close: closeDelete }] =
useDisclosure(false);
const client = useApi();
const queryClient = useQueryClient();
const deleteAircraft = useMutation({
mutationFn: async () =>
await client.delete(`/aircraft/${aircraft.id}`).then((res) => res.data),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["aircraft-list"] });
},
});
return (
<>
<Modal
opened={deleteOpened}
onClose={closeDelete}
title="Delete Aircraft?"
centered
>
<Stack>
<Text>
Are you sure you want to delete this aircraft? This action cannot be
undone.
</Text>
{deleteAircraft.isError ? (
<Text c="red" fw={700}>
{deleteAircraft.error.message}
</Text>
) : null}
<Group justify="flex-end">
<Button color="red" onClick={() => deleteAircraft.mutate()}>
Delete
</Button>
<Button color="gray" onClick={closeDelete}>
Cancel
</Button>
</Group>
</Stack>
</Modal>
<Card key={randomId()}>
<Stack>
<Group grow justify="space-between">
<Title order={4}>{aircraft.tail_no}</Title>
<Group justify="flex-end">
<ActionIcon variant="transparent">
<IconPencil />
</ActionIcon>
<ActionIcon
variant="transparent"
color="red"
onClick={openDelete}
>
<IconTrash />
</ActionIcon>
</Group>
</Group>
<Group>
<Text>{aircraft.make}</Text>
<Text>{aircraft.model}</Text>
</Group>
<Group>
<Text>{aircraft.aircraft_category}</Text>
<Text>/</Text>
<Text>{aircraft.aircraft_class}</Text>
</Group>
{aircraft.hobbs ? <Text>Hobbs: {aircraft.hobbs}</Text> : null}
</Stack>
</Card>
</>
);
}
function NewAircraftModal({
opened,
close,
}: {
opened: boolean;
close: () => void;
}) {
const newForm = useForm<AircraftFormSchema>({
initialValues: {
tail_no: "",
make: "",
model: "",
aircraft_category: "",
aircraft_class: "",
hobbs: 0.0,
},
validate: {
tail_no: (value) =>
value === null || value.trim() === ""
? "Please enter a tail number"
: null,
make: (value) =>
value === null || value.trim() === "" ? "Please enter a make" : null,
model: (value) =>
value === null || value.trim() === "" ? "Please enter a model" : null,
aircraft_category: (value) =>
value === null || value.trim() === ""
? "Please select a category"
: null,
aircraft_class: (value) =>
value === null || value.trim() === "" ? "Please select a class" : null,
},
});
const client = useApi();
const queryClient = useQueryClient();
const categories = useQuery({
queryKey: ["categories"],
queryFn: async () =>
await client.get(`/aircraft/categories`).then((res) => res.data),
});
const [category, setCategory] = useState("");
const [classSelection, setClassSelection] = useState("");
const classes = useQuery({
queryKey: ["classes", category],
queryFn: async () =>
await client
.get(`/aircraft/class?category=${category}`)
.then((res) => res.data),
enabled: !!category,
});
const addAircraft = useMutation({
mutationFn: async (values: AircraftFormSchema) => {
const newAircraft = values;
if (newAircraft) {
const res = await client.post("/aircraft", newAircraft);
return res.data;
}
throw new Error("Aircraft creation failed");
},
onSuccess: async () => {
await queryClient.invalidateQueries({ queryKey: ["aircraft-list"] });
close();
},
});
return (
<Modal opened={opened} onClose={close} title="New Aircraft" centered>
<form onSubmit={newForm.onSubmit((values) => addAircraft.mutate(values))}>
<Container>
<Stack>
<TextInput
label="Tail Number"
withAsterisk
{...newForm.getInputProps("tail_no")}
/>
<TextInput
label="Make"
{...newForm.getInputProps("make")}
withAsterisk
/>
<TextInput
label="Model"
{...newForm.getInputProps("model")}
withAsterisk
/>
<Select
{...newForm.getInputProps("aircraft_category")}
label="Category"
placeholder="Pick a value"
name="aircraft_category"
withAsterisk
data={
categories.isFetched && !categories.isError
? categories.data.categories
: []
}
onChange={(_value, option) => {
setCategory(option.value);
setClassSelection("");
queryClient.invalidateQueries({
queryKey: ["classes", option.value],
});
newForm.setFieldValue("aircraft_category", option.value);
}}
/>
<Select
label="Class"
placeholder="Pick a value"
withAsterisk
data={
classes.isFetched && !classes.isError && classes.data
? classes.data.classes
: []
}
value={classSelection}
{...newForm.getInputProps("aircraft_class")}
/>
<NumberInput
label="Hobbs"
min={0.0}
suffix=" hrs"
decimalScale={1}
fixedDecimalScale
{...newForm.getInputProps("hobbs")}
/>
<Group justify="flex-end">
{addAircraft.isError ? (
<Text c="red">
{(addAircraft.error as AxiosError)?.response?.data?.detail ??
"Error adding aircraft"}
</Text>
) : addAircraft.isPending ? (
<Text c="yellow">Adding aircraft...</Text>
) : null}
<Button
type="submit"
leftSection={<IconPencil />}
onClick={() => null}
>
Create
</Button>
</Group>
</Stack>
</Container>
</form>
</Modal>
);
}
export default function Aircraft() {
const aircraft: UseQueryResult<AircraftSchema[]> = useAircraft();
const [newOpened, { open: openNew, close: closeNew }] = useDisclosure(false);
return (
<>
<NewAircraftModal opened={newOpened} close={closeNew} />
<Container>
<Group justify="space-between" align="center" grow my="lg">
<Title order={2}>Aircraft</Title>
<Group justify="flex-end">
<Tooltip label="Add Aircraft">
<ActionIcon variant="subtle" onClick={openNew}>
<IconPlus />
</ActionIcon>
</Tooltip>
</Group>
</Group>
<ScrollArea h="calc(100vh - 95px - 75px)">
{aircraft.isLoading ? (
<Center h="calc(100vh - 95px - 75px)">
<Loader />
</Center>
) : aircraft.isError ? (
<Center h="calc(100vh - 95px - 75px)">
<ErrorDisplay error={aircraft.error?.message} />
</Center>
) : aircraft.data && aircraft.data.length === 0 ? (
<Center h="calc(100vh - 95px - 75px)">
<Stack align="center">
<IconX size="3rem" />
<Text c="dimmed">No Aircraft</Text>
</Stack>
</Center>
) : (
<Stack justify="center">
{aircraft.data?.map((item) => (
<AircraftCard key={randomId()} aircraft={item} />
))}
</Stack>
)}
</ScrollArea>
</Container>
</>
);
}

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

@ -88,11 +88,9 @@ 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>
<Title order={2} py="lg" style={{ textAlign: "center" }}>
Flight Log
</Title>
<Group>
<Tooltip
label="Edit Flight"
@ -186,39 +184,20 @@ export default function Flight() {
) : null}
</CollapsibleFieldset>
) : null}
{log.hobbs_start ||
log.hobbs_end ||
log.tach_start ||
log.tach_end ? (
{log.hobbs_start || log.hobbs_end ? (
<CollapsibleFieldset legend="Times" w="100%" mt="sm">
{log.hobbs_start || log.hobbs_end ? (
<Group grow>
<VerticalLogItem
label="Hobbs Start"
content={log.hobbs_start}
hours
/>
<VerticalLogItem
label="Hobbs End"
content={log.hobbs_end}
hours
/>
</Group>
) : null}
{log.tach_start || log.tach_end ? (
<Group grow mt="sm">
<VerticalLogItem
label="Tach Start"
content={log.tach_start}
hours
/>
<VerticalLogItem
label="Tach End"
content={log.tach_end}
hours
/>
</Group>
) : null}
<Group grow>
<VerticalLogItem
label="Hobbs Start"
content={log.hobbs_start}
hours
/>
<VerticalLogItem
label="Hobbs End"
content={log.hobbs_end}
hours
/>
</Group>
</CollapsibleFieldset>
) : null}
{log.time_start ||

4
web/app/routes/logbook.flights.new/route.tsx
View File

@ -3,7 +3,6 @@ import { FlightFormSchema, flightCreateHelper } from "@/util/types";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useApi } from "@/util/api";
import { useNavigate } from "@remix-run/react";
import { AxiosError } from "axios";
import FlightForm from "@/ui/form/flight-form";
export default function NewFlight() {
@ -21,9 +20,6 @@ export default function NewFlight() {
}
throw new Error("Flight creation failed");
},
retry: (failureCount, error: AxiosError) => {
return !error || error.response?.status !== 401;
},
onSuccess: async (data: { id: string }) => {
await queryClient.invalidateQueries({ queryKey: ["flights-list"] });
navigate(`/logbook/flights/${data.id}`);

13
web/app/routes/logbook.me/route.tsx
View File

@ -31,11 +31,16 @@ export default function Me() {
current_psk: string;
new_psk: string;
confirm_new_psk: string;
}) =>
}) => {
console.log({
current_password: values.current_psk,
new_password: values.new_psk,
});
await client.put(`/users/me/password`, {
current_password: values.current_psk,
new_password: values.new_psk,
}),
});
},
});
const updatePskForm = useForm({
@ -95,14 +100,16 @@ export default function Me() {
{...updatePskForm.getInputProps("current_psk")}
/>
<PasswordInput
mt="sm"
label="New Password"
{...updatePskForm.getInputProps("new_psk")}
/>
<PasswordInput
mt="sm"
label="Confirm New Password"
{...updatePskForm.getInputProps("confirm_new_psk")}
/>
<Group justify="flex-end" mt="md">
<Group justify="flex-end" mt="lg">
{updatePassword.isPending ? (
<Text>Updating...</Text>
) : updatePassword.isError ? (

8
web/app/routes/logbook/route.tsx
View File

@ -1,7 +1,7 @@
import { TailfinAppShell } from "@/ui/nav/app-shell";
import { useAuth } from "@/util/auth";
import type { MetaFunction } from "@remix-run/node";
import { Outlet, useNavigate } from "@remix-run/react";
import { Outlet, useLocation, useNavigate } from "@remix-run/react";
import {
QueryCache,
QueryClient,
@ -22,13 +22,15 @@ export default function Index() {
const { user, loading } = useAuth();
const navigate = useNavigate();
const location = useLocation();
useEffect(() => {
if (!loading && !user) {
navigate("/login");
} else {
} else if (location.pathname === "/logbook") {
navigate("/logbook/dashboard");
}
}, [user, loading, navigate]);
}, [user, loading, navigate, location]);
const [queryClient] = useState(
() =>

6
web/app/ui/form/flight-form.tsx
View File

@ -50,8 +50,6 @@ export default function FlightForm({
hobbs_start: null,
hobbs_end: null,
tach_start: null,
tach_end: null,
time_start: null,
time_off: null,
@ -124,10 +122,6 @@ export default function FlightForm({
<HourInput form={form} field="hobbs_start" label="Hobbs Start" />
<HourInput form={form} field="hobbs_end" label="Hobbs End" />
</Group>
<Group justify="center" grow mt="md">
<HourInput form={form} field="tach_start" label="Tach Start" />
<HourInput form={form} field="tach_end" label="Tach End" />
</Group>
</Fieldset>
{/* Start/Stop */}

14
web/app/ui/nav/navbar.tsx
View File

@ -3,8 +3,9 @@ import { Stack, NavLink } from "@mantine/core";
import { Link, useLocation } from "@remix-run/react";
import {
IconBook2,
IconDashboard,
IconLogout,
IconPlaneDeparture,
IconPlaneTilt,
IconUser,
} from "@tabler/icons-react";
@ -28,7 +29,7 @@ export default function Navbar({
component={Link}
to="/logbook/dashboard"
label="Dashboard"
leftSection={<IconPlaneDeparture />}
leftSection={<IconDashboard />}
active={page == "dashboard"}
onClick={() => (opened ? toggle() : null)}
/>
@ -41,6 +42,15 @@ export default function Navbar({
active={page === "flights"}
onClick={() => (opened ? toggle() : null)}
/>
<NavLink
p="md"
component={Link}
to="/logbook/aircraft"
label="Aircraft"
leftSection={<IconPlaneTilt />}
active={page === "aircraft"}
onClick={() => (opened ? toggle() : null)}
/>
</Stack>
<Stack gap="0">
<NavLink

32
web/app/util/types.ts
View File

@ -3,6 +3,8 @@ import utc from "dayjs/plugin/utc.js";
dayjs.extend(utc);
/* FLIGHTS */
type FlightBaseSchema = {
aircraft: string | null;
waypoint_from: string | null;
@ -11,8 +13,6 @@ type FlightBaseSchema = {
hobbs_start: number | null;
hobbs_end: number | null;
tach_start: number | null;
tach_end: number | null;
time_total: number;
time_pic: number;
@ -96,8 +96,6 @@ const flightCreateHelper = (
date: date.utc().startOf("day").toISOString(),
hobbs_start: values.hobbs_start ? Number(values.hobbs_start) : null,
hobbs_end: values.hobbs_end ? Number(values.hobbs_end) : null,
tach_start: values.tach_start ? Number(values.tach_start) : null,
tach_end: values.tach_end ? Number(values.tach_end) : null,
time_start: date
.utc()
.hour(Math.floor((values.time_start ?? 0) / 100))
@ -159,6 +157,30 @@ const flightEditHelper = (
}
};
/* AIRCRAFT */
type AircraftSchema = {
id: string;
tail_no: string;
make: string;
model: string;
aircraft_category: string;
aircraft_class: string;
hobbs: number;
};
type AircraftFormSchema = {
tail_no: string;
make: string;
model: string;
aircraft_category: string;
aircraft_class: string;
hobbs: number;
};
export {
flightEditHelper,
flightCreateHelper,
@ -166,4 +188,6 @@ export {
type FlightCreateSchema,
type FlightDisplaySchema,
type FlightConciseSchema,
type AircraftSchema,
type AircraftFormSchema,
};