Added Data to SituationsBoard

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

@@ -3,10 +3,45 @@ import { useLeftMenuStore } from "_store/leftMenuStore";
 import { useSession } from "next-auth/react";
 import { cn } from "_helpers/cn";
 import { ListCollapse, Plane } from "lucide-react";
+import { useQuery } from "@tanstack/react-query";
+import { getMissionsAPI } from "_querys/missions";
+import { MissionsOnStations, Station } from "@repo/db";
+import { getConnectedAircraftsAPI } from "_querys/aircrafts";
+import { FMS_STATUS_COLORS, FMS_STATUS_TEXT_COLORS } from "_components/map/AircraftMarker";
+import { useMapStore } from "_store/mapStore";
+import { useDispatchConnectionStore } from "_store/dispatch/connectionStore";
 
 export const SituationBoard = () => {
 	const { setSituationTabOpen, situationTabOpen } = useLeftMenuStore();
-	const session = useSession();
+	const dispatcherConnected = useDispatchConnectionStore((state) => state.status === "connected");
+	const { data: missions } = useQuery({
+		queryKey: ["missions", "missions-on-stations"],
+		queryFn: () =>
+			getMissionsAPI(
+				{
+					state: {
+						not: "finished",
+					},
+				},
+				{
+					MissionsOnStations: {
+						include: {
+							Station: true,
+						},
+					},
+				},
+				{
+					createdAt: "desc",
+				},
+			),
+	});
+	const { data: connectedAircrafts } = useQuery({
+		queryKey: ["aircrafts"],
+		queryFn: () => getConnectedAircraftsAPI(),
+	});
+	const { setOpenAircraftMarker, setOpenMissionMarker, setMap } = useMapStore((state) => state);
+
+	console.log("station", connectedAircrafts);
 
 	return (
 		<div className={cn("dropdown dropdown-top", situationTabOpen && "dropdown-open")}>
@@ -23,19 +58,117 @@ export const SituationBoard = () => {
 			{situationTabOpen && (
 				<div
 					tabIndex={0}
-					className="dropdown-content card bg-base-200 w-150 shadow-md z-[1100] ml-2 border-1 border-info"
+					className="dropdown-content card bg-base-200 shadow-md z-[1100] ml-2 border-1 border-info"
 				>
 					<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
 							</h2>
+							<div className="overflow-x-auto">
+								<table className="table table-xs">
+									{/* head */}
+									<thead>
+										<tr>
+											<th>ID</th>
+											<th>Stichwort</th>
+											<th>Stadt</th>
+											<th>Stationen</th>
+										</tr>
+									</thead>
+									<tbody>
+										{/* row 1 */}
+										{missions?.map((mission) => (
+											<tr
+												onDoubleClick={() => {
+													setOpenMissionMarker({
+														open: [
+															{
+																id: mission.id,
+																tab: "home",
+															},
+														],
+														close: [],
+													});
+													setMap({
+														center: {
+															lat: mission.addressLat,
+															lng: mission.addressLng,
+														},
+														zoom: 14,
+													});
+												}}
+												key={mission.id}
+												className={cn(mission.state === "draft" && "bg-base-300")}
+											>
+												<td>{mission.publicId}</td>
+												<td>{mission.missionKeywordAbbreviation}</td>
+												<td>{mission.addressCity}</td>
+												<td>
+													{(mission as any).MissionsOnStations?.map(
+														(mos: { Station: Station }) => mos.Station?.bosCallsignShort,
+													).join(", ")}
+												</td>
+											</tr>
+										))}
+									</tbody>
+								</table>
+							</div>
 						</div>
 						<div className="w-px bg-gray-400 mx-2" />
 						<div className="flex-1">
 							<h2 className="inline-flex items-center gap-2 text-lg font-bold mb-2">
 								<Plane /> Stationen
 							</h2>
+							<div className="overflow-x-auto">
+								<table className="table table-xs">
+									<thead>
+										<tr>
+											<th>BOS Name</th>
+											<th>Status</th>
+											<th>LST</th>
+										</tr>
+									</thead>
+									<tbody>
+										{connectedAircrafts?.map((station) => (
+											<tr
+												key={station.id}
+												onDoubleClick={() => {
+													setOpenAircraftMarker({
+														open: [
+															{
+																id: station.id,
+																tab: "home",
+															},
+														],
+														close: [],
+													});
+													if (station.posLat === null || station.posLng === null) return;
+													setMap({
+														center: {
+															lat: station.posLat,
+															lng: station.posLng,
+														},
+														zoom: 14,
+													});
+												}}
+											>
+												<td>{station.Station.bosCallsignShort}</td>
+												<td
+													className="text-center font-lg font-semibold"
+													style={{
+														color: FMS_STATUS_TEXT_COLORS[station.fmsStatus],
+														backgroundColor: FMS_STATUS_COLORS[station.fmsStatus],
+													}}
+												>
+													{station.fmsStatus}
+												</td>
+												<td className="whitespace-nowrap">{station.Station.bosRadioArea}</td>
+											</tr>
+										))}
+									</tbody>
+								</table>
+							</div>
 						</div>
 					</div>
 				</div>