60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
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/connected-user";
|
|
|
|
export const ConnectedDispatcher = () => {
|
|
const { data: dispatcher } = useQuery({
|
|
queryKey: ["dispatcher"],
|
|
queryFn: () => getConnectedDispatcherAPI(),
|
|
refetchInterval: 10000,
|
|
});
|
|
const { data: aircrafts } = useQuery({
|
|
queryKey: ["aircrafts"],
|
|
queryFn: () => getConnectedAircraftsAPI(),
|
|
refetchInterval: 10000,
|
|
});
|
|
|
|
return (
|
|
<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">
|
|
{(aircrafts?.length || 0) + (dispatcher?.length || 0)} Verbundene Mitglieder
|
|
</div>
|
|
<div className="collapse-content">
|
|
<ul className="list bg-base-100 rounded-box shadow-md">
|
|
<li className="text-xs opacity-60 tracking-wide">
|
|
Disponenten: {dispatcher?.length || 0}
|
|
</li>
|
|
<li className="pb-2 text-xs opacity-60 tracking-wide">
|
|
Piloten: {aircrafts?.length || 0}
|
|
</li>
|
|
|
|
{dispatcher?.map((d) => {
|
|
console.log("dispatcher", d);
|
|
return (
|
|
<li className="flex list-row justify-between items-center" key={d.id}>
|
|
<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>
|
|
);
|
|
};
|