Dispatch Router-Struktur; AddPenalty Layout gefixed
This commit is contained in:
PxlLoewe
@@ -0,0 +1,49 @@
|
||||
import { Connection } from "./_components/Connection";
|
||||
/* import { ThemeSwap } from "./_components/ThemeSwap"; */
|
||||
import { Audio } from "../../../../_components/Audio/Audio";
|
||||
/* import { useState } from "react"; */
|
||||
import { ExitIcon, ExternalLinkIcon } from "@radix-ui/react-icons";
|
||||
import Link from "next/link";
|
||||
import { Settings } from "_components/navbar/Settings";
|
||||
import ModeSwitchDropdown from "_components/navbar/ModeSwitchDropdown";
|
||||
import AdminPanel from "_components/navbar/AdminPanel";
|
||||
import { getServerSession } from "api/auth/[...nextauth]/auth";
|
||||
|
||||
export default async function Navbar() {
|
||||
const session = await getServerSession();
|
||||
|
||||
return (
|
||||
<div className="navbar bg-base-100 shadow-sm flex gap-5 justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<ModeSwitchDropdown />
|
||||
{session?.user.permissions.includes("ADMIN_KICK") && <AdminPanel />}
|
||||
</div>
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="flex items-center gap-2">
|
||||
<Audio />
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Connection />
|
||||
</div>
|
||||
{/* <ThemeSwap isDark={isDark} toggleTheme={toggleTheme} /> */}
|
||||
<div className="flex items-center">
|
||||
<Settings />
|
||||
<Link
|
||||
href={process.env.NEXT_PUBLIC_HUB_URL || "#!"}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<button className="btn btn-ghost">
|
||||
<ExternalLinkIcon className="w-4 h-4" /> HUB
|
||||
</button>
|
||||
</Link>
|
||||
<Link href={"/logout"}>
|
||||
<button className="btn btn-ghost">
|
||||
<ExitIcon className="w-4 h-4" />
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,162 @@
|
||||
"use client";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useDispatchConnectionStore } from "../../../../../_store/dispatch/connectionStore";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import { Prisma } from "@repo/db";
|
||||
import { changeDispatcherAPI } from "_querys/dispatcher";
|
||||
|
||||
export const ConnectionBtn = () => {
|
||||
const modalRef = useRef<HTMLDialogElement>(null);
|
||||
const connection = useDispatchConnectionStore((state) => state);
|
||||
const [form, setForm] = useState({
|
||||
logoffTime: "",
|
||||
selectedZone: "LST_01",
|
||||
});
|
||||
const changeDispatcherMutation = useMutation({
|
||||
mutationFn: ({ id, data }: { id: number; data: Prisma.ConnectedDispatcherUpdateInput }) =>
|
||||
changeDispatcherAPI(id, data),
|
||||
});
|
||||
const [logoffDebounce, setLogoffDebounce] = useState<NodeJS.Timeout | null>(null);
|
||||
const session = useSession();
|
||||
const uid = session.data?.user?.id;
|
||||
if (!uid) return null;
|
||||
|
||||
// useEffect für die Logoff-Zeit
|
||||
useEffect(() => {
|
||||
if (logoffDebounce) clearTimeout(logoffDebounce);
|
||||
|
||||
const timeout = setTimeout(async () => {
|
||||
if (!form.logoffTime || !connection.connectedDispatcher) return;
|
||||
await changeDispatcherMutation.mutateAsync({
|
||||
id: connection.connectedDispatcher?.id,
|
||||
data: {
|
||||
esimatedLogoutTime: new Date(
|
||||
new Date().toDateString() + " " + form.logoffTime,
|
||||
).toISOString(),
|
||||
},
|
||||
});
|
||||
toast.success("Änderung gespeichert!");
|
||||
modalRef.current?.close();
|
||||
}, 2000);
|
||||
|
||||
setLogoffDebounce(timeout);
|
||||
|
||||
// Cleanup function
|
||||
return () => {
|
||||
if (logoffDebounce) clearTimeout(logoffDebounce);
|
||||
};
|
||||
}, [form.logoffTime, connection.connectedDispatcher]);
|
||||
|
||||
useEffect(() => {
|
||||
// Disconnect the socket when the component unmounts
|
||||
return () => {
|
||||
connection.disconnect();
|
||||
};
|
||||
}, [connection.disconnect]);
|
||||
|
||||
return (
|
||||
<div className="rounded-box bg-base-200 flex justify-center items-center gap-2 p-1">
|
||||
{connection.message.length > 0 && (
|
||||
<span className="mx-2 text-error">{connection.message}</span>
|
||||
)}
|
||||
|
||||
{connection.status == "connected" ? (
|
||||
<button
|
||||
className="btn btn-sm btn-soft btn-success"
|
||||
type="submit"
|
||||
onSubmit={() => false}
|
||||
onClick={() => {
|
||||
modalRef.current?.showModal();
|
||||
}}
|
||||
>
|
||||
Verbunden
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="submit"
|
||||
onSubmit={() => false}
|
||||
onClick={() => {
|
||||
modalRef.current?.showModal();
|
||||
}}
|
||||
className="btn btn-sm btn-soft btn-info"
|
||||
>
|
||||
{connection.status == "disconnected" ? "Verbinden" : connection.status}
|
||||
</button>
|
||||
)}
|
||||
|
||||
<dialog ref={modalRef} className="modal">
|
||||
<div className="modal-box flex flex-col items-center justify-center">
|
||||
{connection.status == "connected" ? (
|
||||
<h3 className="text-lg font-bold mb-5">
|
||||
Verbunden als <span className="text-info"><{connection.selectedZone}></span>
|
||||
</h3>
|
||||
) : (
|
||||
<h3 className="text-lg font-bold mb-5">Als Disponent anmelden</h3>
|
||||
)}
|
||||
<fieldset className="fieldset w-full">
|
||||
<label className="floating-label w-full text-base">
|
||||
<span>Logoff Zeit (UTC+1)</span>
|
||||
<input
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
setForm({
|
||||
...form,
|
||||
logoffTime: value,
|
||||
});
|
||||
}}
|
||||
value={form.logoffTime}
|
||||
type="time"
|
||||
className="input w-full"
|
||||
/>
|
||||
</label>
|
||||
{connection.status == "disconnected" && (
|
||||
<p className="fieldset-label">Du kannst diese Zeit später noch anpassen.</p>
|
||||
)}
|
||||
</fieldset>
|
||||
<div className="modal-action flex justify-between w-full">
|
||||
<form method="dialog" className="w-full flex justify-between">
|
||||
<button className="btn btn-soft">Zurück</button>
|
||||
{connection.status == "connected" ? (
|
||||
<button
|
||||
className="btn btn-soft btn-error"
|
||||
type="submit"
|
||||
onSubmit={() => false}
|
||||
onClick={() => {
|
||||
connection.disconnect();
|
||||
}}
|
||||
>
|
||||
Verbindung Trennen
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="submit"
|
||||
onSubmit={() => false}
|
||||
onClick={() => {
|
||||
connection.connect(uid, form.selectedZone, form.logoffTime);
|
||||
}}
|
||||
className="btn btn-soft btn-info"
|
||||
>
|
||||
{connection.status == "disconnected" ||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
(connection.status as any) === ""
|
||||
? "Verbinden"
|
||||
: connection.status}
|
||||
</button>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Connection = () => {
|
||||
return (
|
||||
<div>
|
||||
<ConnectionBtn />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,26 @@
|
||||
"use client";
|
||||
|
||||
import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
|
||||
|
||||
interface ThemeSwapProps {
|
||||
isDark: boolean;
|
||||
toggleTheme: () => void;
|
||||
}
|
||||
|
||||
export const ThemeSwap: React.FC<ThemeSwapProps> = ({
|
||||
isDark,
|
||||
toggleTheme,
|
||||
}) => {
|
||||
return (
|
||||
<label className="swap swap-rotate">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="theme-controller"
|
||||
checked={isDark}
|
||||
onChange={toggleTheme}
|
||||
/>
|
||||
<MoonIcon className="swap-off h-5 w-5 fill-current" />
|
||||
<SunIcon className="swap-on h-5 w-5 fill-current" />
|
||||
</label>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,522 @@
|
||||
"use client";
|
||||
import React, { useEffect } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { BellRing, BookmarkPlus, Radio } from "lucide-react";
|
||||
import { Select } from "_components/Select";
|
||||
import { KEYWORD_CATEGORY, Mission, missionType, Prisma } from "@repo/db";
|
||||
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";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import {
|
||||
createMissionAPI,
|
||||
editMissionAPI,
|
||||
sendMissionAPI,
|
||||
startHpgValidation,
|
||||
} from "_querys/missions";
|
||||
import { getKeywordsAPI } from "_querys/keywords";
|
||||
import { getStationsAPI } from "_querys/stations";
|
||||
import { useMapStore } from "_store/mapStore";
|
||||
import { getConnectedAircraftsAPI } from "_querys/aircrafts";
|
||||
import { HPGValidationRequired } from "_helpers/hpgValidationRequired";
|
||||
import { selectRandomHPGMissionSzenery } from "_helpers/selectRandomHPGMission";
|
||||
import { AxiosError } from "axios";
|
||||
import { cn } from "@repo/shared-components";
|
||||
|
||||
export const MissionForm = () => {
|
||||
const { editingMissionId, setEditingMission } = usePannelStore();
|
||||
const queryClient = useQueryClient();
|
||||
const { setSearchElements, searchElements, setContextMenu } = useMapStore((s) => s);
|
||||
|
||||
const { data: keywords } = useQuery({
|
||||
queryKey: ["keywords"],
|
||||
queryFn: () => getKeywordsAPI(),
|
||||
});
|
||||
|
||||
const { data: aircrafts } = useQuery({
|
||||
queryKey: ["aircrafts"],
|
||||
queryFn: getConnectedAircraftsAPI,
|
||||
refetchInterval: 10000,
|
||||
});
|
||||
|
||||
const { data: stations } = useQuery({
|
||||
queryKey: ["stations"],
|
||||
queryFn: () => getStationsAPI(),
|
||||
});
|
||||
|
||||
const createMissionMutation = useMutation({
|
||||
mutationFn: createMissionAPI,
|
||||
mutationKey: ["missions"],
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["missions"],
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const editMissionMutation = useMutation({
|
||||
mutationFn: ({ id, mission }: { id: number; mission: Partial<Prisma.MissionUpdateInput> }) =>
|
||||
editMissionAPI(id, mission),
|
||||
mutationKey: ["missions"],
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["missions"],
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const sendAlertMutation = useMutation({
|
||||
mutationKey: ["missions"],
|
||||
mutationFn: (id: number) => sendMissionAPI(id, {}),
|
||||
onError: (error) => {
|
||||
console.error(error);
|
||||
toast.error("Fehler beim Alarmieren");
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
toast.success(data.message);
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["missions"],
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const session = useSession();
|
||||
const defaultFormValues = React.useMemo(
|
||||
() =>
|
||||
({
|
||||
createdUserId: session.data?.user.id,
|
||||
type: "primär",
|
||||
addressOSMways: [],
|
||||
missionKeywordAbbreviation: null as any,
|
||||
missionKeywordCategory: null as any,
|
||||
missionKeywordName: null as any,
|
||||
hpgAmbulanceState: "NOT_REQUESTED",
|
||||
hpgFireEngineState: "NOT_REQUESTED",
|
||||
hpgPoliceState: "NOT_REQUESTED",
|
||||
hpgMissionString: null,
|
||||
hpgSelectedMissionString: null,
|
||||
hpg: null,
|
||||
missionLog: [],
|
||||
}) as Partial<MissionOptionalDefaults>,
|
||||
[session.data?.user.id],
|
||||
);
|
||||
|
||||
const form = useForm<MissionOptionalDefaults>({
|
||||
resolver: zodResolver(MissionOptionalDefaultsSchema),
|
||||
defaultValues: defaultFormValues,
|
||||
});
|
||||
const { missionFormValues, setOpen } = usePannelStore((state) => state);
|
||||
|
||||
const validationRequired = HPGValidationRequired(
|
||||
form.watch("missionStationIds"),
|
||||
aircrafts,
|
||||
form.watch("hpgMissionString"),
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (session.data?.user.id) {
|
||||
form.setValue("createdUserId", session.data.user.id);
|
||||
}
|
||||
}, [session.data?.user.id, form]);
|
||||
|
||||
useEffect(() => {
|
||||
form.setValue(
|
||||
"addressOSMways",
|
||||
searchElements.filter((e) => e.isSelected) as unknown as JsonValueType[],
|
||||
);
|
||||
}, [searchElements, form, missionFormValues]);
|
||||
|
||||
useEffect(() => {
|
||||
if (missionFormValues) {
|
||||
if (Object.keys(missionFormValues).length === 0) {
|
||||
form.reset();
|
||||
return;
|
||||
}
|
||||
for (const key in missionFormValues) {
|
||||
if (key === "addressOSMways") continue; // Skip addressOSMways as it is handled separately
|
||||
form.setValue(
|
||||
key as keyof MissionOptionalDefaults,
|
||||
missionFormValues[key as keyof MissionOptionalDefaults],
|
||||
);
|
||||
}
|
||||
}
|
||||
}, [missionFormValues, form, defaultFormValues]);
|
||||
|
||||
const saveMission = async (
|
||||
mission: MissionOptionalDefaults,
|
||||
{ alertWhenValid = false, createNewMission = false } = {},
|
||||
) => {
|
||||
const [hpgSzenario, hpgSzenarioCode] = mission.hpgMissionString?.split(":") || [];
|
||||
const szenarioCode = selectRandomHPGMissionSzenery(hpgSzenarioCode || "");
|
||||
let newMission: Mission;
|
||||
if (createNewMission) {
|
||||
newMission = await createMissionMutation.mutateAsync({
|
||||
...(mission as unknown as Prisma.MissionCreateInput),
|
||||
missionAdditionalInfo:
|
||||
!mission.missionAdditionalInfo.length && hpgSzenario
|
||||
? `HPG-Szenario: ${hpgSzenario}`
|
||||
: mission.missionAdditionalInfo,
|
||||
hpgSelectedMissionString: szenarioCode,
|
||||
});
|
||||
if (validationRequired) {
|
||||
await startHpgValidation(newMission.id, {
|
||||
alertWhenValid,
|
||||
}).catch((error) => {
|
||||
toast.error(`Fehler beim Starten der HPG-Validierung: ${error.message}`);
|
||||
});
|
||||
} else if (alertWhenValid) {
|
||||
await sendAlertMutation.mutateAsync(newMission.id);
|
||||
}
|
||||
return newMission;
|
||||
} else {
|
||||
newMission = await editMissionMutation.mutateAsync({
|
||||
id: Number(editingMissionId),
|
||||
mission: {
|
||||
...(mission as unknown as Prisma.MissionCreateInput),
|
||||
state: undefined, // state should not be updated
|
||||
missionAdditionalInfo:
|
||||
!mission.missionAdditionalInfo.length && hpgSzenario
|
||||
? `HPG-Szenario: ${hpgSzenario}`
|
||||
: mission.missionAdditionalInfo,
|
||||
hpgSelectedMissionString: szenarioCode,
|
||||
},
|
||||
});
|
||||
}
|
||||
if (validationRequired) {
|
||||
await startHpgValidation(newMission.id, {}).catch((error) => {
|
||||
toast.error(`Fehler beim Starten der HPG-Validierung: ${error.message}`);
|
||||
});
|
||||
}
|
||||
return newMission;
|
||||
};
|
||||
|
||||
return (
|
||||
<form className="space-y-4">
|
||||
{/* Koorinaten Section */}
|
||||
<div className="form-control">
|
||||
<h2 className="text-lg font-bold mb-2">Koordinaten</h2>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<input
|
||||
type="text"
|
||||
{...form.register("addressLat")}
|
||||
className="input input-sm input-neutral input-bordered w-full"
|
||||
disabled
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
{...form.register("addressLng")}
|
||||
className="input input-sm input-neutral input-bordered w-full"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
{(form.formState.errors.addressLat || form.formState.errors.addressLng) && (
|
||||
<p className="text-error">
|
||||
Bitte wähle eine Postion übder das Context-Menu über der Karte aus.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Adresse Section */}
|
||||
<div className="form-control">
|
||||
<h2 className="text-lg font-bold mb-2">Adresse</h2>
|
||||
<input
|
||||
type="text"
|
||||
{...form.register("addressStreet")}
|
||||
placeholder="Straße"
|
||||
className="input input-primary input-bordered w-full mb-4"
|
||||
/>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<input
|
||||
type="text"
|
||||
{...form.register("addressCity")}
|
||||
placeholder="Stadt"
|
||||
className="input input-primary input-bordered w-full"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
{...form.register("addressZip")}
|
||||
placeholder="PLZ"
|
||||
className="input input-primary input-bordered w-full"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
{...form.register("addressAdditionalInfo")}
|
||||
placeholder="Zusätzliche Adressinformationen"
|
||||
className="input input-primary input-bordered w-full mt-4"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Rettungsmittel Section */}
|
||||
<div className="form-control">
|
||||
<h2 className="text-lg font-bold mb-2">Rettungsmittel</h2>
|
||||
<Select
|
||||
name="missionStationIds"
|
||||
label={""}
|
||||
placeholder="Wähle ein oder mehrere Rettungsmittel aus"
|
||||
isMulti
|
||||
form={form}
|
||||
options={stations
|
||||
?.sort((a, b) => {
|
||||
const aHasAircraft = aircrafts?.some((ac) => ac.stationId === a.id) ? 0 : 1;
|
||||
const bHasAircraft = aircrafts?.some((ac) => ac.stationId === b.id) ? 0 : 1;
|
||||
return aHasAircraft - bHasAircraft;
|
||||
})
|
||||
.map((s) => ({
|
||||
label: (
|
||||
<span className="flex items-center gap-2">
|
||||
{aircrafts?.some((a) => a.stationId === s.id) && (
|
||||
<Radio className="text-success" size={15} />
|
||||
)}
|
||||
{s.bosCallsign}
|
||||
</span>
|
||||
),
|
||||
value: s.id,
|
||||
}))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Einsatzdaten Section */}
|
||||
<div className="form-control">
|
||||
<h2 className="text-lg font-bold mb-2">Einsatzdaten</h2>
|
||||
<select
|
||||
{...form.register("type")}
|
||||
className="select select-primary select-bordered w-full mb-4"
|
||||
onChange={(e) => {
|
||||
form.setValue("type", e.target.value as missionType);
|
||||
if (e.target.value === "sekundär") {
|
||||
form.setValue("missionKeywordName", KEYWORD_CATEGORY.Z_SONSTIGES);
|
||||
form.setValue("missionKeywordAbbreviation", "VL_S");
|
||||
form.setValue("hpgMissionString", "Verlegung:4_1_1_1-4_1");
|
||||
} else {
|
||||
form.setValue("missionKeywordAbbreviation", null as any);
|
||||
form.setValue("hpgMissionString", null);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<option value="primär">PRIMÄR</option>
|
||||
<option value="sekundär">SEKUNDÄR</option>
|
||||
</select>
|
||||
{form.watch("type") === "primär" && (
|
||||
<>
|
||||
<select
|
||||
{...form.register("missionKeywordCategory")}
|
||||
className="select select-primary select-bordered w-full mb-4"
|
||||
onChange={(e) => {
|
||||
form.setValue("missionKeywordCategory", e.target.value as string);
|
||||
form.setValue("missionKeywordName", null as any);
|
||||
form.setValue("missionKeywordAbbreviation", null as any);
|
||||
form.setValue("hpgMissionString", "");
|
||||
}}
|
||||
value={form.watch("missionKeywordCategory") || "please_select"}
|
||||
>
|
||||
<option disabled value="please_select">
|
||||
Einsatz Kategorie auswählen...
|
||||
</option>
|
||||
{Object.keys(KEYWORD_CATEGORY).map((use) => (
|
||||
<option key={use} value={use}>
|
||||
{use}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{form.formState.errors.missionKeywordCategory && (
|
||||
<p className="text-error text-sm mb-4">Bitte wähle eine Kategorie aus.</p>
|
||||
)}
|
||||
<select
|
||||
{...form.register("missionKeywordAbbreviation")}
|
||||
className="select select-primary select-bordered w-full mb-4"
|
||||
onChange={(e) => {
|
||||
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", null);
|
||||
}}
|
||||
value={form.watch("missionKeywordAbbreviation") || "please_select"}
|
||||
>
|
||||
<option disabled value={"please_select"}>
|
||||
Einsatzstichwort auswählen...
|
||||
</option>
|
||||
{keywords &&
|
||||
keywords
|
||||
.filter((k) => k.category === form.watch("missionKeywordCategory"))
|
||||
.map((keyword) => (
|
||||
<option key={keyword.id} value={keyword.abreviation}>
|
||||
{keyword.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{form.formState.errors.missionKeywordAbbreviation && (
|
||||
<p className="text-error text-sm mb-4">Bitte wähle ein Stichwort aus.</p>
|
||||
)}
|
||||
<div className="mb-4">
|
||||
<select
|
||||
{...form.register("hpgMissionString")}
|
||||
onChange={(e) => {
|
||||
form.setValue("hpgMissionString", e.target.value);
|
||||
const [name] = e.target.value.split(":");
|
||||
const allHpgMissionTypes = keywords?.map((k) => k.hpgMissionTypes).flat();
|
||||
if (
|
||||
!form.watch("missionAdditionalInfo") ||
|
||||
allHpgMissionTypes?.find((t) => {
|
||||
const [hpgName] = t.split(":");
|
||||
return hpgName === form.watch("missionAdditionalInfo");
|
||||
})
|
||||
) {
|
||||
form.setValue("missionAdditionalInfo", name || "");
|
||||
}
|
||||
}}
|
||||
className="select select-primary select-bordered w-full mb-2"
|
||||
value={form.watch("hpgMissionString") || "please_select"}
|
||||
>
|
||||
<option disabled value="please_select">
|
||||
Einsatz Szenario auswählen...
|
||||
</option>
|
||||
{keywords &&
|
||||
keywords
|
||||
.find((k) => k.name === form.watch("missionKeywordName"))
|
||||
?.hpgMissionTypes?.map((missionString) => {
|
||||
const [name] = missionString.split(":");
|
||||
return (
|
||||
<option key={missionString} value={missionString}>
|
||||
{name}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</select>
|
||||
{validationRequired && (
|
||||
<p className="text-sm text-warning">Szenario wird vor Alarmierung HPG-Validiert.</p>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<textarea
|
||||
{...form.register("missionAdditionalInfo")}
|
||||
placeholder="Einsatzinformationen"
|
||||
className="textarea textarea-primary textarea-bordered w-full mb-4"
|
||||
/>
|
||||
{form.watch("type") === "sekundär" && (
|
||||
<input
|
||||
{...form.register("addressMissionDestination")}
|
||||
type="text"
|
||||
placeholder="Zielkrankenhaus"
|
||||
className="input input-primary input-bordered w-full"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="form-control">
|
||||
<h2 className="text-lg font-bold mb-2">Patienteninformationen</h2>
|
||||
<textarea
|
||||
{...form.register("missionPatientInfo")}
|
||||
placeholder="Patienteninformationen"
|
||||
className="textarea textarea-primary textarea-bordered w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
{editingMissionId ? (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary flex-1"
|
||||
onClick={form.handleSubmit(async (mission: MissionOptionalDefaults) => {
|
||||
try {
|
||||
console.log("Saving mission", mission.addressOSMways);
|
||||
const newMission = await saveMission(mission);
|
||||
toast.success(`Einsatz ${newMission.id} erfolgreich aktualisiert`);
|
||||
setSearchElements([]); // Reset search elements
|
||||
setEditingMission(null); // Reset editing state
|
||||
form.reset(); // Reset the form
|
||||
setOpen(false);
|
||||
} catch (error) {
|
||||
if (error instanceof AxiosError) {
|
||||
toast.error(
|
||||
`Fehler beim Erstellen des Einsatzes: ${error.response?.data.error}`,
|
||||
);
|
||||
} else {
|
||||
toast.error(`Fehler beim Erstellen des Einsatzes: ${(error as Error).message}`);
|
||||
}
|
||||
}
|
||||
})}
|
||||
>
|
||||
Änderungen speichern
|
||||
</button>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-warning"
|
||||
onClick={form.handleSubmit(async (mission: MissionOptionalDefaults) => {
|
||||
try {
|
||||
const newMission = await saveMission(mission, {
|
||||
createNewMission: true,
|
||||
alertWhenValid: true,
|
||||
});
|
||||
|
||||
setSearchElements([]); // Reset search elements
|
||||
setContextMenu(null);
|
||||
toast.success(`Einsatz ${newMission.publicId} erstellt`);
|
||||
form.reset();
|
||||
setOpen(false);
|
||||
} catch (error) {
|
||||
if (error instanceof AxiosError) {
|
||||
toast.error(
|
||||
`Fehler beim Erstellen des Einsatzes: ${error.response?.data.error}`,
|
||||
);
|
||||
} else {
|
||||
toast.error(
|
||||
`Fehler beim Erstellen des Einsatzes: ${(error as Error).message}`,
|
||||
);
|
||||
}
|
||||
}
|
||||
})}
|
||||
>
|
||||
<BellRing className="h-4 w-4" /> Alarmieren
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary flex-1"
|
||||
onClick={form.handleSubmit(async (mission: MissionOptionalDefaults) => {
|
||||
try {
|
||||
const newMission = await saveMission(mission, {
|
||||
createNewMission: true,
|
||||
});
|
||||
|
||||
setSearchElements([]); // Reset search elements
|
||||
setContextMenu(null);
|
||||
toast.success(`Einsatz ${newMission.publicId} erstellt`);
|
||||
form.reset();
|
||||
setOpen(false);
|
||||
} catch (error) {
|
||||
if (error instanceof AxiosError) {
|
||||
toast.error(
|
||||
`Fehler beim Erstellen des Einsatzes: ${error.response?.data.error}`,
|
||||
);
|
||||
} else {
|
||||
toast.error(
|
||||
`Fehler beim Erstellen des Einsatzes: ${(error as Error).message}`,
|
||||
);
|
||||
}
|
||||
}
|
||||
})}
|
||||
>
|
||||
<BookmarkPlus className="h-5 w-5" /> Einsatz vorbereiten
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,67 @@
|
||||
import { usePannelStore } from "_store/pannelStore";
|
||||
import { cn } from "@repo/shared-components";
|
||||
import { MissionForm } from "./MissionForm";
|
||||
import { Rss, Trash2Icon } from "lucide-react";
|
||||
import { useEffect } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { getMissionsAPI } from "_querys/missions";
|
||||
|
||||
export const Pannel = () => {
|
||||
const { setOpen, setMissionFormValues } = usePannelStore();
|
||||
const { editingMissionId, setEditingMission, missionFormValues } = usePannelStore();
|
||||
const missions = useQuery({
|
||||
queryKey: ["missions"],
|
||||
queryFn: () =>
|
||||
getMissionsAPI({
|
||||
OR: [{ state: "draft" }, { state: "running" }],
|
||||
}),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (editingMissionId && missionFormValues) {
|
||||
const mission = missions.data?.find((mission) => mission.id === missionFormValues.id);
|
||||
if (!mission) {
|
||||
setEditingMission(null);
|
||||
setMissionFormValues({});
|
||||
setOpen(false);
|
||||
}
|
||||
}
|
||||
}, [missions, setMissionFormValues, setEditingMission, setOpen, missionFormValues]);
|
||||
|
||||
return (
|
||||
<div className={cn("flex-1 max-w-[600px] z-9999999")}>
|
||||
<div className="bg-base-100 min-h-screen h-full max-h-screen w-full overflow-auto">
|
||||
<div className="flex flex-row justify-between items-center p-4">
|
||||
<h1 className="text-xl font-bold flex items-center gap-2">
|
||||
<Rss /> {editingMissionId ? "Einsatz bearbeiten" : "Neuer Einsatz"}
|
||||
</h1>
|
||||
<div>
|
||||
<button
|
||||
className="btn btn-ghost btn-sm mr-2 btn-warning"
|
||||
onClick={() => {
|
||||
setMissionFormValues({});
|
||||
setEditingMission(null);
|
||||
}}
|
||||
>
|
||||
<Trash2Icon size={18} />
|
||||
</button>
|
||||
<button
|
||||
className="btn"
|
||||
onClick={() => {
|
||||
setOpen(false);
|
||||
setEditingMission(null);
|
||||
setMissionFormValues({});
|
||||
}}
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="divider m-0" />
|
||||
<div className="p-4">
|
||||
<MissionForm />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
27
apps/dispatch/app/(app)/dispatch/layout.tsx
Normal file
27
apps/dispatch/app/(app)/dispatch/layout.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import type { Metadata } from "next";
|
||||
import Navbar from "./_components/navbar/Navbar";
|
||||
import { getServerSession } from "api/auth/[...nextauth]/auth";
|
||||
import { Error } from "_components/Error";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "VAR: Disponent",
|
||||
description: "Die neue VAR Leitstelle.",
|
||||
};
|
||||
|
||||
export default async function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
const session = await getServerSession();
|
||||
|
||||
if (!session?.user.permissions.includes("DISPO"))
|
||||
return <Error title="Zugriff verweigert" statusCode={403} />;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Navbar />
|
||||
{children}
|
||||
</>
|
||||
);
|
||||
}
|
||||
47
apps/dispatch/app/(app)/dispatch/page.tsx
Normal file
47
apps/dispatch/app/(app)/dispatch/page.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
"use client";
|
||||
|
||||
import { Pannel } from "(app)/dispatch/_components/pannel/Pannel";
|
||||
import { usePannelStore } from "_store/pannelStore";
|
||||
import { cn } from "@repo/shared-components";
|
||||
import dynamic from "next/dynamic";
|
||||
import { Chat } from "../../_components/left/Chat";
|
||||
import { Report } from "../../_components/left/Report";
|
||||
import { SituationBoard } from "_components/left/SituationBoard";
|
||||
|
||||
const Map = dynamic(() => import("../../_components/map/Map"), { ssr: false });
|
||||
|
||||
const DispatchPage = () => {
|
||||
const { isOpen } = usePannelStore();
|
||||
/* return null; */
|
||||
return (
|
||||
<div className="relative flex-1 flex transition-all duration-500 ease w-full">
|
||||
{/* <MapToastCard2 /> */}
|
||||
<div className="flex flex-1 relative">
|
||||
<div className="absolute left-0 top-1/2 transform -translate-y-1/2 pl-4 z-999999">
|
||||
<Chat />
|
||||
<div className="mt-2">
|
||||
<Report />
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute left-0 top-19/20 transform -translate-y-1/2 pl-4 z-999999">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<SituationBoard />
|
||||
</div>
|
||||
</div>
|
||||
<Map />
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
"absolute right-0 w-[500px] z-999 transition-transform",
|
||||
isOpen ? "translate-x-0" : "translate-x-full",
|
||||
)}
|
||||
>
|
||||
<Pannel />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
DispatchPage.displayName = "DispatchPage";
|
||||
|
||||
export default DispatchPage;
|
||||
7
apps/dispatch/app/(app)/dispatch/socket.ts
Normal file
7
apps/dispatch/app/(app)/dispatch/socket.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
"use client";
|
||||
import { io, Socket } from "socket.io-client";
|
||||
|
||||
export const dispatchSocket: Socket = io(process.env.NEXT_PUBLIC_DISPATCH_SERVER_URL, {
|
||||
autoConnect: false,
|
||||
transports: ["websocket"],
|
||||
});
|
||||
Reference in New Issue
Block a user