79 lines
2.6 KiB
TypeScript
79 lines
2.6 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) => {
|
|
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>
|
|
);
|
|
};
|