Added autoFocus on Sds and MissionLog

apps/dispatch/app/_components/left/SituationBoard.tsx

@@ -12,7 +12,11 @@ import { useDispatchConnectionStore } from "_store/dispatch/connectionStore";
 
 export const SituationBoard = () => {
 	const { setSituationTabOpen, situationTabOpen } = useLeftMenuStore();
-	const dispatcherConnected = useDispatchConnectionStore((state) => state.status === "connected");
+	const { status, setHideDraftMissions, hideDraftMissions } = useDispatchConnectionStore(
+		(state) => state,
+	);
+	const dispatcherConnected = status === "connected";
+
 	const { data: missions } = useQuery({
 		queryKey: ["missions", "missions-on-stations"],
 		queryFn: () =>
@@ -34,6 +38,11 @@ export const SituationBoard = () => {
 				},
 			),
 	});
+
+	const filteredMissions = missions?.filter(
+		(mission) => !hideDraftMissions || mission.state !== "draft",
+	);
+
 	const { data: connectedAircrafts } = useQuery({
 		queryKey: ["aircrafts"],
 		queryFn: () => getConnectedAircraftsAPI(),
@@ -60,8 +69,21 @@ export const SituationBoard = () => {
 					<div className="card-body flex flex-row gap-4">
 						<div className="flex-1">
 							<h2 className="inline-flex items-center gap-2 text-lg font-bold mb-2">
-								<ListCollapse /> Einsatzliste
+								<ListCollapse /> Einsatzliste{" "}
 							</h2>
+							<div>
+								<div className="form-control mb-2">
+									<label className="label cursor-pointer">
+										<input
+											type="checkbox"
+											className="checkbox checkbox-sm"
+											checked={hideDraftMissions}
+											onChange={() => setHideDraftMissions(!hideDraftMissions)}
+										/>
+										<span className="label-text text-sm">vorgeplante Einsätze verbergen</span>
+									</label>
+								</div>
+							</div>
 							<div className="overflow-x-auto">
 								<table className="table table-xs">
 									{/* head */}
@@ -74,8 +96,7 @@ export const SituationBoard = () => {
 										</tr>
 									</thead>
 									<tbody>
-										{/* row 1 */}
-										{missions?.map(
+										{filteredMissions?.map(
 											(mission) =>
 												(dispatcherConnected || mission.state !== "draft") && (
 													<tr

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

@@ -365,7 +365,9 @@ const MissionMarker = ({ mission }: { mission: Mission }) => {
 };
 
 export const MissionLayer = () => {
-	const dispatcherConnected = useDispatchConnectionStore((s) => s.status) === "connected";
+	const dispatchState = useDispatchConnectionStore((s) => s);
+	const dispatcherConnected = dispatchState.status === "connected";
+
 	const { data: missions = [] } = useQuery({
 		queryKey: ["missions"],
 		queryFn: () =>
@@ -377,10 +379,15 @@ export const MissionLayer = () => {
 
 	const filteredMissions = useMemo(() => {
 		if (!dispatcherConnected) {
-			return missions.filter((m: Mission) => m.state === "running");
+			return missions.filter((m: Mission) => {
+				m.state === "running";
+			});
+		}
+		if (dispatchState.hideDraftMissions) {
+			return missions.filter((m: Mission) => m.state !== "draft");
 		}
 		return missions;
-	}, [missions, dispatcherConnected]);
+	}, [missions, dispatcherConnected, dispatchState.hideDraftMissions]);
 
 	// IDEA:  Add Marker to Map Layer / LayerGroup
 	return (

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

@@ -334,6 +334,7 @@ const SDSTab = ({
 	const [isChatOpen, setIsChatOpen] = useState(false);
 	const [note, setNote] = useState("");
 	const queryClient = useQueryClient();
+	const textInputRef = React.useRef<HTMLInputElement>(null);
 
 	const dispatcherConnected = useDispatchConnectionStore((s) => s.status) === "connected";
 
@@ -352,13 +353,23 @@ const SDSTab = ({
 		},
 	});
 
-	const log =
-		(mission?.missionLog as unknown as MissionLog[])
-			?.slice()
-			.reverse()
-			.filter(
-				(entry) => entry.type === "sds-log" && entry.data.stationId === aircraft.Station.id,
-			) || [];
+	const log = useMemo(
+		() =>
+			(mission?.missionLog as unknown as MissionLog[])
+				?.slice()
+				.reverse()
+				.filter(
+					(entry) => entry.type === "sds-log" && entry.data.stationId === aircraft.Station.id,
+				) || [],
+		[mission?.missionLog, aircraft.Station.id],
+	);
+
+	useEffect(() => {
+		const interval = setInterval(() => {
+			textInputRef.current?.focus();
+		}, 100);
+		return () => clearInterval(interval);
+	});
 
 	return (
 		<div className="p-4">
@@ -377,11 +388,13 @@ const SDSTab = ({
 						) : (
 							<div className="flex items-center gap-2 w-full">
 								<input
+									autoFocus
 									type="text"
 									placeholder=""
 									className="input input-sm text-base-content flex-1"
 									value={note}
 									onChange={(e) => setNote(e.target.value)}
+									ref={textInputRef}
 								/>
 								<button
 									className="btn btn-sm btn-primary btn-outline"

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

@@ -591,6 +591,7 @@ const FMSStatusHistory = ({ mission }: { mission: Mission }) => {
 	const [isAddingNote, setIsAddingNote] = useState(false);
 	const [note, setNote] = useState("");
 	const queryClient = useQueryClient();
+	const textInputRef = React.useRef<HTMLInputElement>(null);
 
 	const dispatcherConnected = useDispatchConnectionStore((s) => s.status) === "connected";
 
@@ -603,6 +604,13 @@ const FMSStatusHistory = ({ mission }: { mission: Mission }) => {
 		},
 	});
 
+	useEffect(() => {
+		const interval = setInterval(() => {
+			textInputRef.current?.focus();
+		}, 100);
+		return () => clearInterval(interval);
+	});
+
 	if (!session.data?.user) return null;
 	return (
 		<div className="p-4">
@@ -626,6 +634,7 @@ const FMSStatusHistory = ({ mission }: { mission: Mission }) => {
 									className="input input-sm text-base-content flex-1"
 									value={note}
 									onChange={(e) => setNote(e.target.value)}
+									ref={textInputRef}
 								/>
 								<button
 									className="btn btn-sm btn-primary btn-outline"