Plazierung von X Plane Objekten

apps/dispatch/app/_components/map/ContextMenu.tsx

@@ -13,6 +13,8 @@ import {
 	Scan,
 	Car,
 	Ambulance,
+	Siren,
+	Flame,
 } from "lucide-react";
 import { getOsmAddress } from "_querys/osm";
 import { useEffect, useState } from "react";
@@ -43,15 +45,16 @@ export const ContextMenu = () => {
 		setOpen,
 		isOpen: isPannelOpen,
 	} = usePannelStore((state) => state);
-	const [showRulerOptions, setShowRulerOptions] = useState(false);
+	const [showObjectOptions, setShowObjectOptions] = useState(false);
 	const [rulerHover, setRulerHover] = useState(false);
 	const [rulerOptionsHover, setRulerOptionsHover] = useState(false);
 
 	const dispatcherConnected = useDispatchConnectionStore((s) => s.status) === "connected";
 
 	useEffect(() => {
-		setShowRulerOptions(rulerHover || rulerOptionsHover);
-	}, [rulerHover, rulerOptionsHover]);
+		const showObjectOptions = rulerHover || rulerOptionsHover;
+		setShowObjectOptions(showObjectOptions);
+	}, [isPannelOpen, rulerHover, rulerOptionsHover, setOpen]);
 
 	useEffect(() => {
 		const handleContextMenu = (e: any) => {
@@ -198,8 +201,8 @@ export const ContextMenu = () => {
 					>
 						<Search size={20} />
 					</button>
-					{/* Ruler Options - shown when Ruler button is hovered or options are hovered */}
-					{showRulerOptions && (
+					{/* XPlane Object Options - shown when Ruler button is hovered or options are hovered */}
+					{showObjectOptions && (
 						<div
 							className="pointer-events-auto absolute -left-[100px] top-1/2 z-10 flex h-[200px] w-[120px] -translate-y-1/2 flex-col items-center justify-center py-5"
 							onMouseEnter={() => setRulerOptionsHover(true)}
@@ -207,8 +210,8 @@ export const ContextMenu = () => {
 						>
 							<div className="flex w-full flex-col">
 								<button
-									className="btn btn-circle bg-rescuetrack tooltip tooltip-left tooltip-accent mb-2 h-10 w-10 translate-x-full opacity-80"
-									data-tip="Rettungswagen Platzieren"
+									className="btn btn-circle bg-rescuetrack tooltip tooltip-left tooltip-accent mb-2 ml-[30px] h-10 w-10 opacity-80"
+									data-tip="Rettungswagen platzieren"
 									onClick={() => {
 										console.log("Add Ambulance");
 										setMissionFormValues({
@@ -216,7 +219,7 @@ export const ContextMenu = () => {
 											xPlaneObjects: [
 												...(missionFormValues?.xPlaneObjects ?? []),
 												{
-													objectName: "test",
+													objectName: "ambulance",
 													alt: 0,
 													lat: contextMenu.lat,
 													lon: contextMenu.lng,
@@ -229,21 +232,45 @@ export const ContextMenu = () => {
 								</button>
 								<button
 									className="btn btn-circle bg-rescuetrack tooltip tooltip-left tooltip-accent mb-2 h-10 w-10 opacity-80"
-									data-tip="Radius Messen"
+									data-tip="LF platzieren"
 									onClick={() => {
-										/* ... */
+										console.log("Add fire engine");
+										setMissionFormValues({
+											...missionFormValues,
+											xPlaneObjects: [
+												...(missionFormValues?.xPlaneObjects ?? []),
+												{
+													objectName: "fire_engine",
+													alt: 0,
+													lat: contextMenu.lat,
+													lon: contextMenu.lng,
+												},
+											],
+										});
 									}}
 								>
-									<Radius size={20} />
+									<Flame size={20} />
 								</button>
 								<button
-									className="btn btn-circle bg-rescuetrack tooltip tooltip-left tooltip-accent h-10 w-10 translate-x-full opacity-80"
-									data-tip="Fläche Messen"
+									className="btn btn-circle bg-rescuetrack tooltip tooltip-left tooltip-accent ml-[30px] h-10 w-10 opacity-80"
+									data-tip="Streifenwagen platzieren"
 									onClick={() => {
-										/* ... */
+										console.log("Add police");
+										setMissionFormValues({
+											...missionFormValues,
+											xPlaneObjects: [
+												...(missionFormValues?.xPlaneObjects ?? []),
+												{
+													objectName: "police",
+													alt: 0,
+													lat: contextMenu.lat,
+													lon: contextMenu.lng,
+												},
+											],
+										});
 									}}
 								>
-									<Scan size={20} />
+									<Siren size={20} />
 								</button>
 							</div>
 						</div>

apps/dispatch/app/_components/map/MapAdditionals.tsx

@@ -8,6 +8,8 @@ import { HPGValidationRequired } from "_helpers/hpgValidationRequired";
 import { getConnectedAircraftsAPI } from "_querys/aircrafts";
 import { useMapStore } from "_store/mapStore";
 import { useDispatchConnectionStore } from "_store/dispatch/connectionStore";
+import { is } from "date-fns/locale";
+import { XplaneObject } from "@repo/db";
 
 export const MapAdditionals = () => {
 	const { isOpen, missionFormValues } = usePannelStore((state) => state);
@@ -53,6 +55,20 @@ export const MapAdditionals = () => {
 					interactive={false}
 				/>
 			)}
+			{isOpen &&
+				missionFormValues?.xPlaneObjects &&
+				(missionFormValues.xPlaneObjects as unknown as XplaneObject[]).map((obj, index) => (
+					<Marker
+						key={index}
+						position={[obj.lat, obj.lon]}
+						icon={L.icon({
+							iconUrl: `/icons/${obj.objectName}.png`,
+							iconSize: [40, 40],
+							iconAnchor: [20, 35],
+						})}
+						interactive={false}
+					/>
+				))}
 			{markersNeedingAttention.map((mission) => (
 				<Marker
 					key={mission.id}