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

Implement flight log creation

Browse Source
This commit is contained in:
april
2024-01-03 15:27:58 -06:00
parent 8e03e3dccf
commit a52eab9105
12 changed files with 742 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
web/app/ui/form/hour-input.tsx Normal file
View File

@@ -0,0 +1,77 @@
import { FlightFormSchema } from "@/util/types";
import { CloseButton, NumberInput } from "@mantine/core";
import { UseFormReturnType } from "@mantine/form";
function HourInput({
form,
field,
label,
}: {
form: UseFormReturnType<
FlightFormSchema,
(values: FlightFormSchema) => FlightFormSchema
>;
field: string;
label: string;
}) {
const field_key = field as keyof typeof form.getTransformedValues;
return (
<NumberInput
label={label}
decimalScale={1}
min={0}
fixedDecimalScale
leftSection={
<CloseButton
aria-label="Clear input"
onClick={() => form.setFieldValue(field, "")}
style={{
display:
["", null].indexOf(form.getTransformedValues()[field_key]) > -1
? "none"
: undefined,
}}
/>
}
{...form.getInputProps(field)}
/>
);
}
function ZeroHourInput({
form,
field,
label,
}: {
form: UseFormReturnType<
FlightFormSchema,
(values: FlightFormSchema) => FlightFormSchema
>;
field: string;
label: string;
}) {
const field_key = field as keyof typeof form.getTransformedValues;
return (
<NumberInput
label={label}
decimalScale={1}
min={0}
fixedDecimalScale
leftSection={
<CloseButton
aria-label="Clear input"
onClick={() => form.setFieldValue(field, 0)}
style={{
display:
form.getTransformedValues()[field_key] === 0 ? "none" : undefined,
}}
/>
}
{...form.getInputProps(field)}
/>
);
}
export { HourInput, ZeroHourInput };

75
web/app/ui/form/int-input.tsx Normal file
View File

@@ -0,0 +1,75 @@
import { FlightFormSchema } from "@/util/types";
import { CloseButton, NumberInput } from "@mantine/core";
import { UseFormReturnType } from "@mantine/form";
function IntInput({
form,
field,
label,
}: {
form: UseFormReturnType<
FlightFormSchema,
(values: FlightFormSchema) => FlightFormSchema
>;
field: string;
label: string;
}) {
const field_key = field as keyof typeof form.getTransformedValues;
return (
<NumberInput
label={label}
min={0}
allowDecimal={false}
leftSection={
<CloseButton
aria-label="Clear input"
onClick={() => form.setFieldValue(field, "")}
style={{
display:
["", null].indexOf(form.getTransformedValues()[field_key]) > -1
? "none"
: undefined,
}}
/>
}
{...form.getInputProps(field)}
/>
);
}
function ZeroIntInput({
form,
field,
label,
}: {
form: UseFormReturnType<
FlightFormSchema,
(values: FlightFormSchema) => FlightFormSchema
>;
field: string;
label: string;
}) {
const field_key = field as keyof typeof form.getTransformedValues;
return (
<NumberInput
label={label}
min={0}
allowDecimal={false}
leftSection={
<CloseButton
aria-label="Clear input"
onClick={() => form.setFieldValue(field, 0)}
style={{
display:
form.getTransformedValues()[field_key] > 0 ? "none" : undefined,
}}
/>
}
{...form.getInputProps(field)}
/>
);
}
export { IntInput, ZeroIntInput };

69
web/app/ui/form/list-input.tsx Normal file
View File

@@ -0,0 +1,69 @@
import { FlightFormSchema } from "@/util/types";
import { Pill, PillsInput } from "@mantine/core";
import { UseFormReturnType } from "@mantine/form";
import { useState } from "react";
export default function ListInput({
form,
field,
label,
}: {
form: UseFormReturnType<
FlightFormSchema,
(values: FlightFormSchema) => FlightFormSchema
>;
field: string;
label: string;
}) {
const field_key = field as keyof typeof form.getTransformedValues;
const [inputValue, setInputValue] = useState<string>("");
const handleKeyDown = (event: React.KeyboardEvent) => {
if (event.key === "Enter" || event.key === ",") {
event.preventDefault();
const values = form.getTransformedValues()[field_key] as string[];
const newItem = inputValue.trim();
if (newItem && values.indexOf(newItem) == -1) {
form.setFieldValue(field, [...values, newItem]);
setInputValue("");
}
} else if (event.key === "Backspace") {
const values = form.getTransformedValues()[field_key] as string[];
const newItem = inputValue.trim();
if (newItem === "") {
form.setFieldValue(field, values.slice(0, -1));
}
}
};
return (
<PillsInput label={label}>
<Pill.Group>
{(form.getTransformedValues()[field_key] as string[]).map(
(item: string) => (
<Pill
radius="sm"
key={item}
withRemoveButton
onRemove={() =>
form.setFieldValue(
field,
(form.getTransformedValues()[field_key] as string[]).filter(
(value: string) => value !== item
)
)
}
>
{item}
</Pill>
)
)}
<PillsInput.Field
value={inputValue}
onChange={(event) => setInputValue(event.currentTarget.value)}
onKeyDown={handleKeyDown}
/>
</Pill.Group>
</PillsInput>
);
}

52
web/app/ui/form/time-input.tsx Normal file
View File

@@ -0,0 +1,52 @@
import { FlightFormSchema } from "@/util/types";
import { ActionIcon, CloseButton, NumberInput, Tooltip } from "@mantine/core";
import { UseFormReturnType } from "@mantine/form";
import { IconClock } from "@tabler/icons-react";
import dayjs from "dayjs";
export default function TimeInput({
form,
label,
field,
}: {
form: UseFormReturnType<FlightFormSchema>;
field: string;
label: string;
}) {
const field_key = field as keyof typeof form.getTransformedValues;
return (
<NumberInput
label={label}
allowDecimal={false}
min={0}
max={2359}
leftSection={
<CloseButton
aria-label="Clear input"
onClick={() => form.setFieldValue(field, "")}
style={{
display:
["", null].indexOf(form.getTransformedValues()[field_key]) > -1
? "none"
: undefined,
}}
/>
}
rightSection={
<Tooltip label="Now">
<ActionIcon
variant="transparent"
mr="sm"
onClick={() => {
form.setFieldValue(field, dayjs().format("HHmm"));
}}
>
<IconClock style={{ width: "70%", height: "70%" }} />
</ActionIcon>
</Tooltip>
}
{...form.getInputProps(field)}
/>
);
}