109 lines
4.0 KiB
TypeScript
109 lines
4.0 KiB
TypeScript
import { IServer } from "../types/IServer";
|
||
import useModalStore from "../stores/useModalStore";
|
||
import CreateSessionModal from "./modals/CreateSessionModal";
|
||
import NewButton from "./NewButton";
|
||
import FlashIcon from "./icons/FlashIcon";
|
||
import CogIcon from "./icons/CogIcon";
|
||
import PlusIcon from "./icons/PlusIcon";
|
||
import EditTable from "./modals/EditTableModal";
|
||
import UnlinkIcon from "./icons/UnlinkIcon";
|
||
import clsx from "clsx";
|
||
import ChevronRightIcon from "./icons/ChevronRightIcon";
|
||
import CurrentSessionModal from "./modals/CurrentSessionModal";
|
||
interface IDesktopCardProps {
|
||
server: IServer;
|
||
}
|
||
|
||
export default function DesktopCard({ server }: IDesktopCardProps) {
|
||
const { setModal, setPosition } = useModalStore();
|
||
|
||
// const { mutate: createSession } = useMutation({
|
||
// mutationFn: () =>
|
||
// api.post(`sessions`, {
|
||
// json: {
|
||
// serverId: server.id,
|
||
// clientId: "abcfd570-2fa8-4f55-957b-5007f84f8f96",
|
||
// appId: "b8a9995c-a799-4593-8f96-03942050cb21",
|
||
// },
|
||
// }),
|
||
// onMutate: () => queryClient.invalidateQueries({ queryKey: ["sessions"] }),
|
||
// });
|
||
|
||
async function handleClickCreateSession() {
|
||
setPosition("right");
|
||
setModal(<CreateSessionModal targetServerId={server.id} />);
|
||
}
|
||
|
||
return (
|
||
<div className="flex flex-col gap-[0.833vw] aspect-[300/211] w-[20.833vw] h-[14.653vw]">
|
||
<div
|
||
className={clsx(
|
||
'relative w-full h-[8.056vw] aspect-[300/116] bg-[#F6F6F6] rounded-3xl bg-[url("/images/Table.png")] bg-no-repeat bg-[top_1.111vw_left_50%] bg-[length:8.125vw]',
|
||
server.status === "offline" && "opacity-40"
|
||
)}
|
||
>
|
||
<NewButton
|
||
variant="secondary"
|
||
size="medium"
|
||
className="absolute top-[0.347vw] right-[0.347vw] cursor-pointer flex items-center justify-center"
|
||
onClick={() => setModal(<EditTable table={server} />)}
|
||
>
|
||
<span className="text-[#7D7D7D] w-[0.972vw] h-[0.972vw]">
|
||
<CogIcon />
|
||
</span>
|
||
</NewButton>
|
||
</div>
|
||
<div className="flex self-center justify-between items-start">
|
||
<div className="space-y-[0.278vw] text-center">
|
||
<p className="leading-none font-[500] text-[1.111vw] title-s">
|
||
{server.name}
|
||
</p>
|
||
<p className="caption-s text-[#7D7D7D]">{server.location}</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex gap-[0.278vw] justify-center -mt-[0.278vw]">
|
||
{server.sessions?.[0]?.status === "started" ? (
|
||
<div className="flex items-center gap-[0.278vw]">
|
||
<NewButton
|
||
variant="primary"
|
||
onClick={() => {
|
||
setModal(<CurrentSessionModal server={server} />);
|
||
}}
|
||
className="flex gap-[0.556vw] items-center"
|
||
>
|
||
<span className="w-[0.972vw] h-[0.972vw] flex items-center justify-center">
|
||
<FlashIcon />
|
||
</span>
|
||
<p className="button-s font-medium">Идёт сеанс</p>
|
||
<span className="w-[0.972vw] h-[0.972vw] flex items-center justify-center">
|
||
<ChevronRightIcon />
|
||
</span>
|
||
</NewButton>
|
||
</div>
|
||
) : server.status === "offline" ? (
|
||
<NewButton variant="critical">
|
||
<span className="text-[#FF4517] size-[0.972vw]">
|
||
<UnlinkIcon />
|
||
</span>
|
||
<span>Проверьте соединение</span>
|
||
</NewButton>
|
||
) : (
|
||
<NewButton
|
||
variant="cta"
|
||
size="medium"
|
||
className="self-center"
|
||
onClick={handleClickCreateSession}
|
||
>
|
||
<div className="flex gap-[0.556vw] items-center justify-center">
|
||
<span className="w-[0.972vw] h-[0.972vw] flex items-center justify-center">
|
||
<PlusIcon />
|
||
</span>
|
||
<p className="button-s">Создать сеанс</p>
|
||
</div>
|
||
</NewButton>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|