inmake/graff-mate-client
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

upd

Browse Source
This commit is contained in:
c00b3r
2025-06-04 16:43:21 +05:00
parent 411281c574
commit 931e468e75
5 changed files with 164 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/DesktopCard.tsx
+25 -35
View File
@@ -1,5 +1,4 @@
import { useMutation, useQueryClient } from "@tanstack/react-query";
import api from "../utils/api";
import { useQueryClient } from "@tanstack/react-query";
import { IServer } from "../types/IServer";
import useModalStore from "../stores/useModalStore";
import CreateSessionModal from "./modals/CreateSessionModal";
@@ -33,22 +32,13 @@ export default function DesktopCard({ server }: IDesktopCardProps) {
// onMutate: () => queryClient.invalidateQueries({ queryKey: ["sessions"] }),
// });
const { mutate: endSession } = useMutation({
mutationKey: ["sessions", server.sessions?.[0]?.id],
mutationFn: () =>
api.put(`sessions/${server.sessions?.[0]?.id}`, {
json: { status: "ending" },
}),
onMutate: () => queryClient.invalidateQueries({ queryKey: ["sessions"] }),
});
async function handleClickCreateSession() {
setPosition("right");
setModal(<CreateSessionModal servers={servers} targetServer={server} />);
}
return (
<div className='flex flex-col gap-[0.833vw] aspect-[300/211] w-[20.833vw] h-[14.653vw]'>
<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]',
@@ -56,62 +46,62 @@ export default function DesktopCard({ server }: IDesktopCardProps) {
)}
>
<NewButton
variant='secondary'
size='medium'
className='absolute top-[0.347vw] right-[0.347vw] cursor-pointer flex items-center justify-center'
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]'>
<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'>
<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>
<p className="caption-s text-[#7D7D7D]">{server.location}</p>
</div>
</div>
<div className='flex gap-[0.278vw] justify-center -mt-[0.278vw]'>
<div className="flex gap-[0.278vw] justify-center -mt-[0.278vw]">
{server.sessions?.[0]?.status === "started" ? (
<div className='flex items-center gap-[0.278vw]'>
<div className="flex items-center gap-[0.278vw]">
<NewButton
variant='primary'
variant="primary"
onClick={() => {
setModal(<CurrentSessionModal server={server} />);
}}
className='flex gap-[0.556vw] items-center'
className="flex gap-[0.556vw] items-center"
>
<span className='w-[0.972vw] h-[0.972vw] flex items-center justify-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'>
<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]'>
<NewButton variant="critical">
<span className="text-[#FF4517] size-[0.972vw]">
<UnlinkIcon />
</span>
<span>Проверьте соединение</span>
</NewButton>
) : (
<NewButton
variant='cta'
size='medium'
className='self-center'
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'>
<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>
<p className="button-s">Создать сеанс</p>
</div>
</NewButton>
)}