feat: implement flexible feeding intervals and fix layout alignment
This commit is contained in:
@@ -43,21 +43,33 @@ export function CreatePlanForm({ dict, lang }: CreatePlanFormProps) {
|
||||
password: z.string().min(4, {
|
||||
message: dict.passwordError,
|
||||
}),
|
||||
feedingPerDay: z.coerce.number().min(1).max(10),
|
||||
feedingInterval: z.coerce.number().min(1).max(30),
|
||||
litterInterval: z.coerce.number().min(1).max(30),
|
||||
instructions: z.string().optional(),
|
||||
})
|
||||
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
type FormValues = z.infer<typeof formSchema>
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(formSchema) as any,
|
||||
defaultValues: {
|
||||
title: "",
|
||||
password: "",
|
||||
instructions: "",
|
||||
feedingPerDay: 2,
|
||||
feedingInterval: 1,
|
||||
litterInterval: 2,
|
||||
dateRange: {
|
||||
from: undefined,
|
||||
to: undefined,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const dateLocale = lang === "de" ? de : enUS
|
||||
|
||||
async function onSubmit(values: z.infer<typeof formSchema>) {
|
||||
async function onSubmit(values: FormValues) {
|
||||
try {
|
||||
const response = await fetch("/api/plan", {
|
||||
method: "POST",
|
||||
@@ -68,6 +80,9 @@ export function CreatePlanForm({ dict, lang }: CreatePlanFormProps) {
|
||||
endDate: values.dateRange.to,
|
||||
password: values.password,
|
||||
instructions: values.instructions,
|
||||
feedingPerDay: values.feedingPerDay,
|
||||
feedingInterval: values.feedingInterval,
|
||||
litterInterval: values.litterInterval,
|
||||
}),
|
||||
})
|
||||
|
||||
@@ -153,6 +168,52 @@ export function CreatePlanForm({ dict, lang }: CreatePlanFormProps) {
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="feedingInterval"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="min-h-[3.5rem] flex items-end pb-2">{dict.feedingInterval}</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="number" {...field} />
|
||||
</FormControl>
|
||||
<FormDescription className="min-h-[4rem]">{dict.feedingIntervalDesc}</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="feedingPerDay"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="min-h-[3.5rem] flex items-end pb-2">{dict.feedingPerDay}</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="number" {...field} />
|
||||
</FormControl>
|
||||
<FormDescription className="min-h-[4rem]">{dict.feedingDesc}</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="litterInterval"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="min-h-[3.5rem] flex items-end pb-2">{dict.litterInterval}</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="number" {...field} />
|
||||
</FormControl>
|
||||
<FormDescription className="min-h-[4rem]">{dict.litterDesc}</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="password"
|
||||
|
||||
Reference in New Issue
Block a user