dev

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

@@ -3,15 +3,32 @@ import { OSMWay } from "@repo/db";
 import { useDispatchConnectionStore } from "_store/dispatch/connectionStore";
 import { useMapStore } from "_store/mapStore";
 import { usePannelStore } from "_store/pannelStore";
-import { MapPin, MapPinned, Radius, Ruler, Search, RulerDimensionLine, Scan } from "lucide-react";
+import { XplaneObject } from "@repo/db";
+import {
+	MapPin,
+	MapPinned,
+	Radius,
+	Search,
+	RulerDimensionLine,
+	Scan,
+	Car,
+	Ambulance,
+} from "lucide-react";
 import { getOsmAddress } from "_querys/osm";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { Popup, useMap } from "react-leaflet";
 import { findClosestPolygon } from "_helpers/findClosestPolygon";
+import { xPlaneObjectsAvailable } from "_helpers/xPlaneObjectsAvailable";
+import { useQuery } from "@tanstack/react-query";
+import { getConnectedAircraftsAPI } from "_querys/aircrafts";
 
 export const ContextMenu = () => {
 	const map = useMap();
+	const { data: aircrafts } = useQuery({
+		queryKey: ["connectedAircrafts"],
+		queryFn: getConnectedAircraftsAPI,
+	});
 	const {
 		contextMenu,
 		searchElements,
@@ -150,9 +167,12 @@ export const ContextMenu = () => {
 						style={{ transform: "translateY(-50%)" }}
 						onMouseEnter={() => setRulerHover(true)}
 						onMouseLeave={() => setRulerHover(false)}
-						disabled
+						disabled={
+							!isPannelOpen ||
+							!xPlaneObjectsAvailable(missionFormValues?.missionStationIds, aircrafts)
+						}
 					>
-						<Ruler size={20} />
+						<Car size={20} />
 					</button>
 					{/* Bottom Button */}
 					<button
@@ -181,40 +201,31 @@ export const ContextMenu = () => {
 					{/* Ruler Options - shown when Ruler button is hovered or options are hovered */}
 					{showRulerOptions && (
 						<div
-							className="pointer-events-auto absolute flex flex-col items-center"
-							style={{
-								left: "-100px", // position to the right of the left button
-								top: "50%",
-								transform: "translateY(-50%)",
-								zIndex: 10,
-								width: "120px", // Make the hover area wider
-								height: "200px", // Make the hover area taller
-								padding: "20px 0", // Add vertical padding
-								display: "flex",
-								justifyContent: "center",
-								pointerEvents: "auto",
-							}}
+							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)}
 							onMouseLeave={() => setRulerOptionsHover(false)}
 						>
-							<div
-								style={{
-									display: "flex",
-									flexDirection: "column",
-									width: "100%",
-								}}
-							>
+							<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 opacity-80"
-									data-tip="Strecke Messen"
-									style={{
-										transform: "translateX(100%)",
-									}}
+									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"
 									onClick={() => {
-										/* ... */
+										console.log("Add Ambulance");
+										setMissionFormValues({
+											...missionFormValues,
+											xPlaneObjects: [
+												...(missionFormValues?.xPlaneObjects ?? []),
+												{
+													objectName: "test",
+													alt: 0,
+													lat: contextMenu.lat,
+													lon: contextMenu.lng,
+												},
+											],
+										});
 									}}
 								>
-									<RulerDimensionLine size={20} />
+									<Ambulance size={20} />
 								</button>
 								<button
 									className="btn btn-circle bg-rescuetrack tooltip tooltip-left tooltip-accent mb-2 h-10 w-10 opacity-80"
@@ -226,11 +237,8 @@ export const ContextMenu = () => {
 									<Radius size={20} />
 								</button>
 								<button
-									className="btn btn-circle bg-rescuetrack tooltip tooltip-left tooltip-accent h-10 w-10 opacity-80"
+									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"
-									style={{
-										transform: "translateX(100%)",
-									}}
 									onClick={() => {
 										/* ... */
 									}}

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

@@ -0,0 +1,3 @@
+export const XPlaneObjects = () => {
+	return <div>XPlaneObjects</div>;
+};