92 lines
3.1 KiB
TypeScript
92 lines
3.1 KiB
TypeScript
import { asPublicUser, 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="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> */}
|
|
<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>{asPublicUser(d.publicUser).fullName}</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>
|
|
);
|
|
};
|