PxlLoewe/var-monorepo
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

cleanded up ConenctedDispatcher, added modeSwitch to Tracker

Browse Source
This commit is contained in:
PxlLoewe
2025-06-08 18:27:45 -07:00
parent 1d63368172
commit b3bf256324
5 changed files with 15 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/dispatch/app/_components/navbar/ModeSwitchDropdown.tsx
View File

@@ -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"}

96
apps/dispatch/app/pilot/_components/ConnectedDispatcher.tsx
View File

@@ -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>
);
};

7
apps/dispatch/app/pilot/page.tsx
View File

@@ -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,11 +23,13 @@ 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 />
<div className="absolute top-5 right-10 z-99999">
<ConnectedDispatcher />
</div>
</div>
</div>
<div className="flex w-1/3 h-full">
<div className="flex flex-col w-full h-full p-4 bg-base-300">
<h2 className="card-title mb-2">MRT & DME</h2>

2
apps/dispatch/app/tracker/_components/ConnectedDispatcher.tsx
View File

@@ -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> */}

4
apps/dispatch/app/tracker/page.tsx
View File

@@ -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 />
<div className="flex gap-3 absolute top-5 right-10 z-99999">
<ConnectedDispatcher />
<ModeSwitchDropdown className="dropdown-end" />
</div>
</>
);
};