Weitere Felder zur Einsatzmaske hinzugefügt

This commit is contained in:
nocnico
2025-04-21 20:22:33 +02:00
parent e81d4a918a
commit 8084ef72c4

View File

@@ -4,7 +4,6 @@ import { useForm, Controller } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod"; import { z } from "zod";
import { MissionSchema } from "@repo/db/zod"; import { MissionSchema } from "@repo/db/zod";
import { Mission } from "@repo/db/zod";
import { Trash2 } from "lucide-react"; import { Trash2 } from "lucide-react";
import { Select } from "_components/Select"; import { Select } from "_components/Select";
@@ -31,6 +30,9 @@ const missionFormSchema = MissionSchema.pick({
type MissionFormValues = z.infer<typeof missionFormSchema>; type MissionFormValues = z.infer<typeof missionFormSchema>;
const dummyRettungsmittel = [ const dummyRettungsmittel = [
"RTW",
"Feuerwehr",
"Polizei",
"Christoph 31", "Christoph 31",
"Christoph 100", "Christoph 100",
"Christoph Berlin", "Christoph Berlin",
@@ -41,6 +43,15 @@ export const MissionForm: React.FC = () => {
const [missionCategory, setMissionCategory] = useState<"PRIMÄR" | "SEKUNDÄR">( const [missionCategory, setMissionCategory] = useState<"PRIMÄR" | "SEKUNDÄR">(
"PRIMÄR", "PRIMÄR",
); );
const [missionKeyword, setMissionKeyword] = useState<
"AB_ATMUNG" | "C_BLUTUNG"
>("AB_ATMUNG");
const [missionType, setMissionType] = useState<"typ1" | "typ2" | "typ3">(
"typ1",
);
const [selectedRettungsmittel, setSelectedRettungsmittel] = useState<
{ label: string; value: string }[]
>([]);
const form = useForm<MissionFormValues>({ const form = useForm<MissionFormValues>({
resolver: zodResolver(missionFormSchema), resolver: zodResolver(missionFormSchema),
defaultValues: { defaultValues: {
@@ -49,10 +60,12 @@ export const MissionForm: React.FC = () => {
missionCategory: "PRIMÄR", missionCategory: "PRIMÄR",
}, },
}); });
const { control, register, handleSubmit, watch } = form;
const onSubmit = (data: MissionFormValues) => { const onSubmit = (data: MissionFormValues) => {
console.log(data); console.log({
...data,
rettungsmittel: selectedRettungsmittel.map((item) => item.value),
});
}; };
return ( return (
@@ -110,20 +123,15 @@ export const MissionForm: React.FC = () => {
{/* Rettungsmittel Section */} {/* Rettungsmittel Section */}
<div className="form-control"> <div className="form-control">
<h2 className="text-lg font-bold mb-2">Rettungsmittel</h2> <h2 className="text-lg font-bold mb-2">Rettungsmittel</h2>
<Controller <Select
name="rettungsmittel" name="rettungsmittel"
control={form.control} label={""}
render={({ field }) => ( isMulti
<Select form={form}
isMulti options={dummyRettungsmittel.map((key, val) => ({
form={form} label: key,
name="rettungsmittel" value: val,
label={""} }))}
options={dummyRettungsmittel.map((item) => ({
label: item,
}))}
/>
)}
/> />
</div> </div>
@@ -140,12 +148,30 @@ export const MissionForm: React.FC = () => {
<option value="PRIMÄR">PRIMÄR</option> <option value="PRIMÄR">PRIMÄR</option>
<option value="SEKUNDÄR">SEKUNDÄR</option> <option value="SEKUNDÄR">SEKUNDÄR</option>
</select> </select>
<input <select
type="text"
{...form.register("missionKeyword")} {...form.register("missionKeyword")}
placeholder="Stichwort" className="select select-primary select-bordered w-full mb-4"
className="input input-primary input-bordered w-full mb-4" onChange={(e) =>
/> setMissionKeyword(e.target.value as "AB_ATMUNG" | "C_BLUTUNG")
}
>
<option value="AB_ATMUNG">AB_ATMUNG</option>
<option value="C_BLUTUNG">C_BLUTUNG</option>
</select>
<select
/* {...form.register("missionKeyword")} */
className="select select-primary select-bordered w-full mb-4"
onChange={(e) =>
setMissionType(e.target.value as "typ1" | "typ2" | "typ3")
}
>
<option defaultChecked disabled value="">
Einsatz Szenerie auswählen...
</option>
<option value="typ1">typ1</option>
<option value="typ2">typ2</option>
<option value="typ3">typ3</option>
</select>
<textarea <textarea
{...form.register("missionAdditionalInfo")} {...form.register("missionAdditionalInfo")}
placeholder="Einsatzinformationen" placeholder="Einsatzinformationen"
@@ -170,8 +196,12 @@ export const MissionForm: React.FC = () => {
/> />
</div> </div>
<p className="text-sm text-error">
Du musst noch ein Gebäude auswählen, um den Einsatz zu erstellen.
</p>
<div className="min-h-[140px]"> <div className="min-h-[140px]">
<button type="submit" className="btn btn-primary mt-4"> <button type="submit" className="btn btn-primary">
Alarmieren Alarmieren
</button> </button>
</div> </div>