Statusaufforderung zu Aircraft hinzugefügt

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

@@ -109,47 +109,70 @@ const FMSStatusSelector = ({
 	});
 
 	return (
-		<div className="flex gap-2 p-4 justify-center items-center min-h-[136px] h-full">
-			{Array.from({ length: 9 }, (_, i) => (i + 1).toString())
-				.filter((status) => status !== "5") // Exclude status 5
-				.map((status) => (
+		<div className="flex flex-col gap-2 mt-2 p-4 text-base-content">
+			<div className="flex gap-2 justify-center items-center h-full">
+				{Array.from({ length: 9 }, (_, i) => (i + 1).toString())
+					.filter((status) => status !== "5") // Exclude status 5
+					.map((status) => (
+						<button
+							disabled={!dispatcherConnected}
+							key={status}
+							className={cn(
+								"flex justify-center items-center min-w-13 min-h-13 cursor-pointer text-4xl font-bold",
+								!dispatcherConnected && "cursor-not-allowed",
+							)}
+							style={{
+								backgroundColor:
+									hoveredStatus === status
+										? FMS_STATUS_COLORS[status]
+										: 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 () => {
+								// Handle status change logic here
+								await changeAircraftMutation.mutateAsync({
+									id: aircraft.id,
+									update: {
+										fmsStatus: status,
+									},
+								});
+								toast.success(`Status changed to ${status}`);
+							}}
+						>
+							{status}
+						</button>
+					))}
+			</div>
+			<div className="flex gap-1 p-2 justify-center items-center">
+				{["E", "C", "F", "J", "L", "c", "d", "h", "o", "u"].map((char) => (
 					<button
 						disabled={!dispatcherConnected}
-						key={status}
+						key={char}
 						className={cn(
-							"flex justify-center items-center min-w-13 min-h-13 cursor-pointer text-4xl font-bold",
+							"flex justify-center items-center min-w-10 min-h-10 cursor-pointer text-lg font-bold",
 							!dispatcherConnected && "cursor-not-allowed",
 						)}
 						style={{
-							backgroundColor:
-								hoveredStatus === status
-									? FMS_STATUS_COLORS[status]
-									: aircraft.fmsStatus === status
-										? FMS_STATUS_COLORS[status]
-										: "var(--color-base-200)",
-							color:
-								aircraft.fmsStatus === status
-									? "white"
-									: hoveredStatus === status
-										? "white"
-										: "gray",
+							backgroundColor: "var(--color-base-200)",
+							color: "gray",
 						}}
-						onMouseEnter={() => setHoveredStatus(status)}
-						onMouseLeave={() => setHoveredStatus(null)}
-						onClick={async () => {
-							// Handle status change logic here
-							await changeAircraftMutation.mutateAsync({
-								id: aircraft.id,
-								update: {
-									fmsStatus: status,
-								},
-							});
-							toast.success(`Status changed to ${status}`);
+						onClick={() => {
+							toast.success(`Button ${char} clicked`);
 						}}
 					>
-						{status}
+						{char}
 					</button>
 				))}
+			</div>
 		</div>
 	);
 };