improved OSM Element selection

This commit is contained in:
PxlLoewe
2025-06-03 15:50:20 -07:00
parent 56856664a7
commit 0f50bf1db8
10 changed files with 118 additions and 154 deletions

View File

@@ -5,7 +5,11 @@ import { zodResolver } from "@hookform/resolvers/zod";
import { BellRing, BookmarkPlus } from "lucide-react";
import { Select } from "_components/Select";
import { KEYWORD_CATEGORY, Mission, missionType, Prisma } from "@repo/db";
import { MissionOptionalDefaults, MissionOptionalDefaultsSchema } from "@repo/db/zod";
import {
JsonValueType,
MissionOptionalDefaults,
MissionOptionalDefaultsSchema,
} from "@repo/db/zod";
import { usePannelStore } from "_store/pannelStore";
import { useSession } from "next-auth/react";
import { toast } from "react-hot-toast";
@@ -23,11 +27,12 @@ import { getConnectedAircraftsAPI } from "_querys/aircrafts";
import { HPGValidationRequired } from "_helpers/hpgValidationRequired";
import { selectRandomHPGMissionSzenery } from "_helpers/selectRandomHPGMission";
import { AxiosError } from "axios";
import { cn } from "_helpers/cn";
export const MissionForm = () => {
const { isEditingMission, editingMissionId, setEditingMission } = usePannelStore();
const queryClient = useQueryClient();
const setSeachOSMElements = useMapStore((s) => s.setSearchElements);
const { setSearchElements, searchElements } = useMapStore((s) => s);
const { data: keywords } = useQuery({
queryKey: ["keywords"],
@@ -120,6 +125,13 @@ export const MissionForm = () => {
}
}, [session.data?.user.id, form]);
useEffect(() => {
form.setValue(
"addressOSMways",
searchElements.filter((e) => e.isSelected) as unknown as JsonValueType[],
);
}, [searchElements, form]);
useEffect(() => {
if (missionFormValues) {
if (Object.keys(missionFormValues).length === 0) {
@@ -135,8 +147,6 @@ export const MissionForm = () => {
}
}, [missionFormValues, form, defaultFormValues]);
console.log("Mission HPG String", form.watch("hpgMissionString"));
const saveMission = async (
mission: MissionOptionalDefaults,
{ alertWhenValid = false, createNewMission = false } = {},
@@ -265,7 +275,7 @@ export const MissionForm = () => {
onChange={(e) => {
form.setValue("type", e.target.value as missionType);
form.setValue("missionKeywordName", KEYWORD_CATEGORY.AB_ATMUNG);
form.setValue("missionKeywordAbbreviation", "");
form.setValue("missionKeywordAbbreviation", null as any);
form.setValue("hpgMissionString", null);
}}
>
@@ -278,15 +288,9 @@ export const MissionForm = () => {
{...form.register("missionKeywordCategory")}
className="select select-primary select-bordered w-full mb-4"
onChange={(e) => {
const firstKeyword = keywords?.find(
(k) => k.category === form.watch("missionKeywordCategory"),
);
form.setValue("missionKeywordCategory", e.target.value as string);
form.setValue("missionKeywordName", firstKeyword?.name || (null as any));
form.setValue(
"missionKeywordAbbreviation",
firstKeyword?.abreviation || (null as any),
);
form.setValue("missionKeywordName", null as any);
form.setValue("missionKeywordAbbreviation", null as any);
form.setValue("hpgMissionString", "");
}}
value={form.watch("missionKeywordCategory") || "please_select"}
@@ -310,7 +314,7 @@ export const MissionForm = () => {
const keyword = keywords?.find((k) => k.abreviation === e.target.value);
form.setValue("missionKeywordName", keyword?.name || (null as any));
form.setValue("missionKeywordAbbreviation", keyword?.abreviation || (null as any));
form.setValue("hpgMissionString", "default");
form.setValue("hpgMissionString", null);
}}
value={form.watch("missionKeywordAbbreviation") || "please_select"}
>
@@ -332,8 +336,18 @@ export const MissionForm = () => {
<div className="mb-4">
<select
{...form.register("hpgMissionString")}
onChange={(e) => {
form.setValue("hpgMissionString", e.target.value);
if (
form.watch("missionAdditionalInfo").length === 0 ||
form.watch("missionAdditionalInfo").startsWith("HPG-Szenario:")
) {
const [name] = e.target.value.split(":");
form.setValue("missionAdditionalInfo", `HPG-Szenario: ${name}`);
}
}}
className="select select-primary select-bordered w-full mb-2"
value={form.watch("hpgMissionString") || ""}
value={form.watch("hpgMissionString") || "please_select"}
>
<option disabled value="please_select">
Einsatz Szenario auswählen...
@@ -379,11 +393,11 @@ export const MissionForm = () => {
/>
</div>
{missionFormValues?.addressOSMways?.length && (
<p className="text-sm text-info">
In diesem Einsatz gibt es {missionFormValues?.addressOSMways?.length} Gebäude
</p>
)}
<p
className={cn("text-sm text-gray-500", form.watch("addressOSMways").length && "text-info")}
>
In diesem Einsatz gibt es {form.watch("addressOSMways").length} Gebäude
</p>
<div className="form-control min-h-[140px]">
<div className="flex gap-2">
@@ -395,7 +409,7 @@ export const MissionForm = () => {
try {
const newMission = await saveMission(mission);
toast.success(`Einsatz ${newMission.id} erfolgreich aktualisiert`);
setSeachOSMElements([]); // Reset search elements
setSearchElements([]); // Reset search elements
setEditingMission(false, null); // Reset editing state
form.reset(); // Reset the form
setOpen(false);
@@ -425,7 +439,7 @@ export const MissionForm = () => {
if (!validationRequired) {
await sendAlertMutation.mutateAsync(newMission.id);
}
setSeachOSMElements([]); // Reset search elements
setSearchElements([]); // Reset search elements
setOpen(false);
} catch (error) {
if (error instanceof AxiosError) {
@@ -451,7 +465,7 @@ export const MissionForm = () => {
createNewMission: true,
});
setSeachOSMElements([]); // Reset search elements
setSearchElements([]); // Reset search elements
toast.success(`Einsatz ${newMission.publicId} erstellt`);
form.reset();
setOpen(false);