110 lines
3.8 KiB
TypeScript
110 lines
3.8 KiB
TypeScript
import { asPublicUser, BADGES, PublicUser } from "@repo/db";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { getConnectedAircraftsAPI } from "_querys/aircrafts";
|
|
import { getConnectedDispatcherAPI } from "_querys/dispatcher";
|
|
import { Plane, Workflow } from "lucide-react";
|
|
import { formatDistance } from "date-fns";
|
|
import { de } from "date-fns/locale";
|
|
import { Badge } from "@repo/shared-components";
|
|
|
|
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-arrow bg-base-100 border-base-300 collapse border">
|
|
<input type="checkbox" />
|
|
{/* <div className="collapse-title font-semibold">Kein Disponent Online</div> */}
|
|
<div className="collapse-title flex items-center justify-between font-semibold">
|
|
<span>
|
|
{connections} {connections == 1 ? "Verbundenes Mitglied" : "Verbundene Mitglieder"}
|
|
</span>
|
|
<div className="flex items-center gap-2">
|
|
<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={`vorraussichtliche Abmeldung in ${formatDistance(new Date(), new Date(d.esimatedLogoutTime), { locale: de })}`}
|
|
>
|
|
<p className="font-thin text-gray-500">
|
|
{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 font-semibold uppercase opacity-60">{d.zone}</div>
|
|
</div>
|
|
<div className="mr-2 flex flex-col justify-center">
|
|
{d.settingsUseHPGAsDispatcher ? (
|
|
<span className="badge badge-sm badge-success badge-outline">HPG aktiv</span>
|
|
) : (
|
|
<span className="badge badge-sm badge-info badge-outline">
|
|
HPG deaktiviert
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div>
|
|
{(() => {
|
|
const badges = (d.publicUser as unknown as PublicUser).badges
|
|
.filter((b) => b.startsWith("D") && b.length == 2)
|
|
.sort((a, b) => a.localeCompare(b));
|
|
const lastBadge = badges[badges.length - 1];
|
|
return lastBadge ? (
|
|
<Badge badge={lastBadge as BADGES} className="h-8 w-12" />
|
|
) : null;
|
|
})()}
|
|
</div>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|