cleanded up ConenctedDispatcher, added modeSwitch to Tracker

apps/dispatch/app/_components/navbar/ModeSwitchDropdown.tsx

@@ -1,16 +1,17 @@
 "use client";
 
+import { cn } from "_helpers/cn";
 import { ArrowLeftRight, Plane, Radar, Workflow } from "lucide-react";
 import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 
-export default function ModeSwitchDropdown() {
+export default function ModeSwitchDropdown({ className }: { className?: string }) {
 	const path = usePathname();
 	const session = useSession();
 
 	return (
-		<div className="dropdown z-[9999]">
+		<div className={cn("dropdown", className)}>
 			<div tabIndex={0} role="button" className="btn m-1">
 				<ArrowLeftRight size={22} /> {path.includes("pilot") && "Pilot"}
 				{path.includes("dispatch") && "Leitstelle"}

apps/dispatch/app/pilot/_components/ConnectedDispatcher.tsx

@@ -1,96 +0,0 @@
-import { BADGES, PublicUser } from "@repo/db";
-import { useQuery } from "@tanstack/react-query";
-import { Badge } from "_components/Badge/Badge";
-import { getConnectedAircraftsAPI } from "_querys/aircrafts";
-import { getConnectedDispatcherAPI } from "_querys/dispatcher";
-import { Plane, Workflow } from "lucide-react";
-
-export const ConnectedDispatcher = () => {
-	const { data: dispatcher } = useQuery({
-		queryKey: ["dispatcher"],
-		queryFn: () => getConnectedDispatcherAPI(),
-		refetchInterval: 10000,
-	});
-	const { data: aircrafts } = useQuery({
-		queryKey: ["aircrafts"],
-		queryFn: () => getConnectedAircraftsAPI(),
-		refetchInterval: 10000,
-	});
-
-	const connections = (aircrafts?.length || 0) + (dispatcher?.length || 0);
-
-	return (
-		<div className="relative">
-			<div className="absolute top-5 right-10 min-w-120 z-99999">
-				<div className="collapse collapse-arrow bg-base-100 border-base-300 border">
-					<input type="checkbox" />
-					{/* <div className="collapse-title font-semibold">Kein Disponent Online</div> */}
-					<div className="collapse-title font-semibold flex items-center justify-between">
-						<span>
-							{connections} {connections == 1 ? "Verbundenes Mitglied" : "Verbundene Mitglieder"}
-						</span>
-						<div className="gap-2 flex items-center">
-							<div
-								className={`badge badge-outline ${
-									(dispatcher?.length || 0) > 0 ? "badge-success" : "badge-error"
-								}`}
-							>
-								<Workflow size={14} /> {dispatcher?.length || 0}
-							</div>
-							<div className="badge badge-outline badge-primary">
-								<Plane size={14} /> {aircrafts?.length || 0}
-							</div>
-						</div>
-					</div>
-					<div className="collapse-content">
-						{!dispatcher?.length && (
-							<p className="text-center text-gray-500">Aktuell sind keine Disponenten verbunden</p>
-						)}
-						<ul className="list bg-base-100 rounded-box shadow-md">
-							{dispatcher?.map((d) => {
-								return (
-									<li className="list-row" key={d.id}>
-										<div className="w-[100px tabular-nums] flex flex-col items-center text-center">
-											<div className="tooltip tooltip-right" data-tip="Online seit">
-												<p>
-													{new Date(d.loginTime).toLocaleTimeString([], {
-														hour: "2-digit",
-														minute: "2-digit",
-													})}
-												</p>
-											</div>
-											{d.esimatedLogoutTime && (
-												<div
-													className="tooltip tooltip-right"
-													data-tip="Vorrausichtliche Abmeldung"
-												>
-													<p className="text-gray-500 font-thin ">
-														{new Date(d.esimatedLogoutTime).toLocaleTimeString([], {
-															hour: "2-digit",
-															minute: "2-digit",
-														})}
-													</p>
-												</div>
-											)}
-										</div>
-										<div>
-											<div>{(d.publicUser as unknown as PublicUser)?.firstname}</div>
-											<div className="text-xs uppercase font-semibold opacity-60">{d.zone}</div>
-										</div>
-										<div>
-											{(d.publicUser as unknown as PublicUser).badges
-												.filter((b) => b.startsWith("D"))
-												.map((b) => (
-													<Badge name={b as BADGES} className="h-8 w-12" />
-												))}
-										</div>
-									</li>
-								);
-							})}
-						</ul>
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-};

apps/dispatch/app/pilot/page.tsx

@@ -5,7 +5,8 @@ import { Chat } from "../_components/left/Chat";
 import { Report } from "../_components/left/Report";
 import { Dme } from "pilot/_components/dme/Dme";
 import dynamic from "next/dynamic";
-import { ConnectedDispatcher } from "./_components/ConnectedDispatcher";
+import { ConnectedDispatcher } from "tracker/_components/ConnectedDispatcher";
+
 const Map = dynamic(() => import("../_components/map/Map"), {
 	ssr: false,
 });
@@ -22,9 +23,11 @@ const DispatchPage = () => {
 					</div>
 				</div>
 				<div className="flex w-2/3 h-full">
-					<div className="flex flex-1 h-full">
+					<div className="relative flex flex-1 h-full">
 						<Map />
-						<ConnectedDispatcher />
+						<div className="absolute top-5 right-10 z-99999">
+							<ConnectedDispatcher />
+						</div>
 					</div>
 				</div>
 				<div className="flex w-1/3 h-full">

apps/dispatch/app/tracker/_components/ConnectedDispatcher.tsx

@@ -20,7 +20,7 @@ export const ConnectedDispatcher = () => {
 	const connections = (aircrafts?.length || 0) + (dispatcher?.length || 0);
 
 	return (
-		<div className="absolute top-5 right-10 min-w-120 z-99999">
+		<div className="min-w-120">
 			<div className="collapse collapse-arrow bg-base-100 border-base-300 border">
 				<input type="checkbox" />
 				{/* <div className="collapse-title font-semibold">Kein Disponent Online</div> */}

apps/dispatch/app/tracker/page.tsx

@@ -1,4 +1,5 @@
 "use client";
+import ModeSwitchDropdown from "_components/navbar/ModeSwitchDropdown";
 import dynamic from "next/dynamic";
 import { ConnectedDispatcher } from "tracker/_components/ConnectedDispatcher";
 
@@ -10,7 +11,10 @@ const Page = () => {
 	return (
 		<>
 			<Map />
-			<ConnectedDispatcher />
+			<div className="flex gap-3 absolute top-5 right-10 z-99999">
+				<ConnectedDispatcher />
+				<ModeSwitchDropdown className="dropdown-end" />
+			</div>
 		</>
 	);
 };