Merge branch 'main' of https://github.com/VAR-Virtual-Air-Rescue/var-monorepo

2025-05-18 23:21:14 -07:00
parent 1b16b365bd 0983ca2320
commit 46c58ae127
6 changed files with 365 additions and 132 deletions
--- a/apps/dispatch/app/dispatch/_components/map/AircraftMarker.tsx
+++ b/apps/dispatch/app/dispatch/_components/map/AircraftMarker.tsx
@@ -42,6 +42,16 @@ export const FMS_STATUS_COLORS: { [key: string]: string } = {
 	"7": "rgb(140,10,10)",
 	"8": "rgb(186,105,0)",
 	"9": "rgb(10,134,25)",
+	E: "rgb(186,105,0)",
+	C: "rgb(186,105,0)",
+	F: "rgb(186,105,0)",
+	J: "rgb(186,105,0)",
+	L: "rgb(186,105,0)",
+	c: "rgb(186,105,0)",
+	d: "rgb(186,105,0)",
+	h: "rgb(186,105,0)",
+	o: "rgb(186,105,0)",
+	u: "rgb(186,105,0)",
 };

 export const FMS_STATUS_TEXT_COLORS: { [key: string]: string } = {
@@ -55,7 +65,17 @@ export const FMS_STATUS_TEXT_COLORS: { [key: string]: string } = {
 	"7": "rgb(243,27,25)",
 	"8": "rgb(255,143,0)",
 	"9": "rgb(9,212,33)",
-	N: "rgb(153,153,153)",
+	N: "rgb(9,212,33)",
+	E: "rgb(255,143,0)",
+	C: "rgb(255,143,0)",
+	F: "rgb(255,143,0)",
+	J: "rgb(255,143,0)",
+	L: "rgb(255,143,0)",
+	c: "rgb(255,143,0)",
+	d: "rgb(255,143,0)",
+	h: "rgb(255,143,0)",
+	o: "rgb(255,143,0)",
+	u: "rgb(255,143,0)",
 };

 const AircraftPopupContent = ({
--- a/apps/dispatch/app/dispatch/_components/map/ContextMenu.tsx
+++ b/apps/dispatch/app/dispatch/_components/map/ContextMenu.tsx
@@ -2,8 +2,16 @@
 import { OSMWay } from "@repo/db";
 import { useMapStore } from "_store/mapStore";
 import { usePannelStore } from "_store/pannelStore";
-import { MapPinned, Search } from "lucide-react";
-import { useEffect } from "react";
+import {
+	MapPin,
+	MapPinned,
+	Radius,
+	Ruler,
+	Search,
+	RulerDimensionLine,
+	Scan,
+} from "lucide-react";
+import { useEffect, useState } from "react";
 import { Popup, useMap } from "react-leaflet";

 export const ContextMenu = () => {
@@ -11,11 +19,19 @@ export const ContextMenu = () => {
 	const { contextMenu, setContextMenu, setSearchElements, setSearchPopup } =
 		useMapStore();
 	const { setMissionFormValues, setOpen } = usePannelStore((state) => state);
+	const [showRulerOptions, setShowRulerOptions] = useState(false);
+	const [rulerHover, setRulerHover] = useState(false);
+	const [rulerOptionsHover, setRulerOptionsHover] = useState(false);
+
+	useEffect(() => {
+		setShowRulerOptions(rulerHover || rulerOptionsHover);
+	}, [rulerHover, rulerOptionsHover]);
+
 	useEffect(() => {
 		const handleContextMenu = (e: any) => {
 			setContextMenu({ lat: e.latlng.lat, lng: e.latlng.lng });
 		};
-		const handleClick = (e: any) => {
+		const handleClick = () => {
 			setContextMenu(null);
 			setSearchPopup(null);
 		};
@@ -27,7 +43,7 @@ export const ContextMenu = () => {
 			map.off("contextmenu", handleContextMenu);
 			map.off("click", handleClick);
 		};
-	}, [contextMenu]);
+	}, [map, contextMenu, setContextMenu, setSearchPopup]);

 	if (!contextMenu) return null;

@@ -76,9 +92,16 @@ export const ContextMenu = () => {
 			autoPan={false}
 		>
 			{/* // TODO: maske: */}
-			<div className="absolute transform -translate-y-1/2 z-1000 opacity-100 pointer-events-auto p-3">
+			<div
+				className="absolute opacity-100 pointer-events-none p-3 flex items-center justify-center"
+				style={{ left: "-13px", top: "-13px" }}
+			>
+				<div className="relative w-38 h-38 flex items-center justify-center -translate-x-1/2 -translate-y-1/2 pointer-events-none">
+					{/* Top Button */}
 					<button
-					className="btn btn-sm rounded-full bg-rescuetrack aspect-square"
+						className="btn btn-circle bg-rescuetrack w-10 h-10 absolute left-1/2 top-0 pointer-events-auto opacity-80 tooltip tooltip-top tooltip-accent"
+						data-tip="Nächstes Element übernehmen"
+						style={{ transform: "translateX(-50%)" }}
 						onClick={async () => {
 							const address = await fetch(
 								`https://nominatim.openstreetmap.org/reverse?lat=${contextMenu.lat}&lon=${contextMenu.lng}&format=json`,
@@ -148,14 +171,163 @@ export const ContextMenu = () => {
 					>
 						<MapPinned size={20} />
 					</button>
+					{/* Left Button */}
 					<button
-					className="btn btn-sm rounded-full bg-rescuetrack aspect-square"
+						className="btn btn-circle bg-rescuetrack w-10 h-10 absolute top-1/2 left-0 pointer-events-auto opacity-80"
+						style={{ transform: "translateY(-50%)" }}
+						onMouseEnter={() => setRulerHover(true)}
+						onMouseLeave={() => setRulerHover(false)}
+					>
+						<Ruler size={20} />
+					</button>
+					{/* Bottom Button */}
+					<button
+						className="btn btn-circle bg-rescuetrack w-10 h-10 absolute left-1/2 bottom-0 pointer-events-auto opacity-80 tooltip tooltip-bottom tooltip-accent"
+						data-tip="Koordinaten kopieren"
+						style={{ transform: "translateX(-50%)" }}
+						onClick={async () => {
+							const address = await fetch(
+								`https://nominatim.openstreetmap.org/reverse?lat=${contextMenu.lat}&lon=${contextMenu.lng}&format=json`,
+							);
+							const data = (await address.json()) as {
+								address: {
+									ISO3166_2_lvl4: string;
+									country: string;
+									country_code: string;
+									county: string;
+									house_number: string;
+									municipality: string;
+									postcode: string;
+									road: string;
+									state: string;
+									city: string;
+									town: string;
+								};
+								display_name: string;
+								importance: number;
+								lat: string;
+								licence: string;
+								lon: string;
+								name: string;
+								osm_id: number;
+								osm_type: string;
+								place_id: number;
+								place_rank: number;
+								type: string;
+							};
+							const objects = await addOSMobjects();
+							const exactAddress = objects.find((object) => {
+								return (
+									object.tags["addr:street"] == data.address.road &&
+									object.tags["addr:housenumber"]?.includes(
+										data.address.house_number,
+									)
+								);
+							});
+							const closestToContext = objects.reduce((prev, curr) => {
+								const prevLat = prev.nodes?.[0]?.lat ?? 0;
+								const prevLon = prev.nodes?.[0]?.lon ?? 0;
+								const currLat = curr.nodes?.[0]?.lat ?? 0;
+								const currLon = curr.nodes?.[0]?.lon ?? 0;
+								const prevDistance = Math.sqrt(
+									Math.pow(prevLat - contextMenu.lat, 2) +
+										Math.pow(prevLon - contextMenu.lng, 2),
+								);
+								const currDistance = Math.sqrt(
+									Math.pow(currLat - contextMenu.lat, 2) +
+										Math.pow(currLon - contextMenu.lng, 2),
+								);
+								return prevDistance < currDistance ? prev : curr;
+							});
+
+							setOpen(true);
+							setMissionFormValues({
+								addressLat: contextMenu.lat,
+								addressLng: contextMenu.lng,
+								addressCity: data.address.city || data.address.town,
+								addressStreet: `${data.address.road}, ${data.address.house_number || "keine HN"}`,
+								addressZip: data.address.postcode,
+								state: "draft",
+								addressOSMways: [(exactAddress || closestToContext) as any],
+							});
+						}}
+					>
+						<MapPin size={20} />
+					</button>
+					{/* Right Button (original Search button) */}
+					<button
+						className="btn btn-circle bg-rescuetrack w-10 h-10 absolute top-1/2 right-0 pointer-events-auto opacity-80 tooltip tooltip-right tooltip-accent"
+						data-tip="Gebäude suchen"
+						style={{ transform: "translateY(-50%)" }}
 						onClick={async () => {
 							addOSMobjects();
 						}}
 					>
 						<Search size={20} />
 					</button>
+					{/* Ruler Options - shown when Ruler button is hovered or options are hovered */}
+					{showRulerOptions && (
+						<div
+							className="absolute flex flex-col items-center pointer-events-auto"
+							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",
+							}}
+							onMouseEnter={() => setRulerOptionsHover(true)}
+							onMouseLeave={() => setRulerOptionsHover(false)}
+						>
+							<div
+								style={{
+									display: "flex",
+									flexDirection: "column",
+									width: "100%",
+								}}
+							>
+								<button
+									className="btn btn-circle bg-rescuetrack w-10 h-10 mb-2 opacity-80 tooltip tooltip-left tooltip-accent"
+									data-tip="Strecke Messen"
+									style={{
+										transform: "translateX(100%)",
+									}}
+									onClick={() => {
+										/* ... */
+									}}
+								>
+									<RulerDimensionLine size={20} />
+								</button>
+								<button
+									className="btn btn-circle bg-rescuetrack w-10 h-10 mb-2 opacity-80 tooltip tooltip-left tooltip-accent"
+									data-tip="Radius Messen"
+									onClick={() => {
+										/* ... */
+									}}
+								>
+									<Radius size={20} />
+								</button>
+								<button
+									className="btn btn-circle bg-rescuetrack w-10 h-10 opacity-80 tooltip tooltip-left tooltip-accent"
+									data-tip="Fläche Messen"
+									style={{
+										transform: "translateX(100%)",
+									}}
+									onClick={() => {
+										/* ... */
+									}}
+								>
+									<Scan size={20} />
+								</button>
+							</div>
+						</div>
+					)}
+				</div>
 			</div>
 		</Popup>
 	);
--- a/apps/dispatch/app/dispatch/_components/map/_components/AircraftMarkerTabs.tsx
+++ b/apps/dispatch/app/dispatch/_components/map/_components/AircraftMarkerTabs.tsx
@@ -161,9 +161,21 @@ const FMSStatusSelector = ({
 							!dispatcherConnected && "cursor-not-allowed",
 						)}
 						style={{
-							backgroundColor: "var(--color-base-200)",
-							color: "gray",
+							backgroundColor:
+								hoveredStatus === status
+									? FMS_STATUS_COLORS[6]
+									: aircraft.fmsStatus === status
+										? FMS_STATUS_COLORS[status]
+										: "var(--color-base-200)",
+							color:
+								aircraft.fmsStatus === status
+									? "white"
+									: hoveredStatus === status
+										? "white"
+										: "gray",
 						}}
+						onMouseEnter={() => setHoveredStatus(status)}
+						onMouseLeave={() => setHoveredStatus(null)}
 						onClick={async () => {
 							await changeAircraftMutation.mutateAsync({
 								id: aircraft.id,
--- a/apps/dispatch/app/dispatch/_components/map/_components/MissionMarkerTabs.tsx
+++ b/apps/dispatch/app/dispatch/_components/map/_components/MissionMarkerTabs.tsx
@@ -61,9 +61,36 @@ const Einsatzdetails = ({ mission }: { mission: Mission }) => {
 	const { setMissionFormValues, setOpen } = usePannelStore((state) => state);
 	return (
 		<div className="p-4 text-base-content">
-			<h2 className="flex items-center gap-2 text-lg font-bold mb-3">
+			<div className="flex items-center justify-between mb-3">
+				<h2 className="flex items-center gap-2 text-lg font-bold">
 					<Flag /> Einsatzdetails
 				</h2>
+				{mission.state !== "draft" && (
+					<div
+						className="tooltip tooltip-primary tooltip-left font-semibold"
+						data-tip="Einsatzdaten übernehmen"
+					>
+						<button
+							className="btn btn-xs btn-primary btn-dash flex items-center gap-2"
+							onClick={() => {
+								setMissionFormValues({
+									...mission,
+									id: undefined,
+									hpgAmbulanceState: null,
+									hpgFireEngineState: null,
+									hpgPoliceState: null,
+									hpgLocationLat: undefined,
+									hpgLocationLng: undefined,
+									state: "draft",
+								});
+								setOpen(true);
+							}}
+						>
+							<Repeat2 size={16} />
+						</button>
+					</div>
+				)}
+			</div>
 			<ul className="text-base-content font-semibold">
 				<li className="flex items-center gap-2 mb-1">
 					<BellRing size={16} /> {mission.missionKeywordCategory}
@@ -90,6 +117,8 @@ const Einsatzdetails = ({ mission }: { mission: Mission }) => {
 					<LocateFixed size={16} /> {mission.addressZip} {mission.addressCity}
 				</p>
 			</div>
+			{mission.state === "draft" && (
+				<div>
 					<div className="divider mt-0 mb-0" />
 					<div className="flex items-center gap-2 w-full">
 						<button
@@ -119,7 +148,6 @@ const Einsatzdetails = ({ mission }: { mission: Mission }) => {
 						>
 							<Repeat2 size={18} /> Daten übernehmen
 						</button>
-				{mission.state === "draft" && (
 						<button
 							className="btn btn-sm btn-error btn-outline"
 							onClick={() => {
@@ -128,9 +156,10 @@ const Einsatzdetails = ({ mission }: { mission: Mission }) => {
 						>
 							<Trash size={18} />
 						</button>
-				)}
 					</div>
 				</div>
+			)}
+		</div>
 	);
 };

--- a/apps/dispatch/package.json
+++ b/apps/dispatch/package.json
@@ -22,7 +22,7 @@
 		"leaflet": "^1.9.4",
 		"livekit-client": "^2.9.7",
 		"livekit-server-sdk": "^2.10.2",
-		"lucide-react": "^0.482.0",
+		"lucide-react": "^0.511.0",
 		"next": "^15.1.0",
 		"next-auth": "^4.24.11",
 		"postcss": "^8.5.1",
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,7 +32,7 @@
 				"leaflet": "^1.9.4",
 				"livekit-client": "^2.9.7",
 				"livekit-server-sdk": "^2.10.2",
-				"lucide-react": "^0.482.0",
+				"lucide-react": "^0.511.0",
 				"next": "^15.1.0",
 				"next-auth": "^4.24.11",
 				"postcss": "^8.5.1",
@@ -84,9 +84,9 @@
 			}
 		},
 		"apps/dispatch/node_modules/lucide-react": {
-			"version": "0.482.0",
-			"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.482.0.tgz",
-			"integrity": "sha512-XM8PzHzSrg8ATmmO+fzf+JyYlVVdQnJjuyLDj2p4V2zEtcKeBNAqAoJIGFv1x2HSBa7kT8gpYUxwdQ0g7nypfw==",
+			"version": "0.511.0",
+			"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.511.0.tgz",
+			"integrity": "sha512-VK5a2ydJ7xm8GvBeKLS9mu1pVK6ucef9780JVUjw6bAjJL/QXnd4Y0p7SPeOUMC27YhzNCZvm5d/QX0Tp3rc0w==",
 			"license": "ISC",
 			"peerDependencies": {
 				"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"