upd

2025-03-20 14:26:57 +05:00
commit eb552cbdc8
55 changed files with 2212 additions and 0 deletions
@@ -0,0 +1,118 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import Button from "./Button";
+import MoreIcon from "./icons/MoreIcon";
+import api from "../utils/api";
+import PlusIcon from "./icons/PlusIcon";
+import { IServer } from "../types/IServer";
+
+interface IDesktopCardProps {
+  server: IServer;
+}
+
+export default function DesktopCard({ server }: IDesktopCardProps) {
+  const queryClient = useQueryClient();
+
+  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"] }),
+  });
+
+  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"] }),
+  });
+
+  return (
+    <div className="p-[1.111vw] rounded-[0.833vw] flex flex-col justify-between gap-[1.111vw] aspect-[272/149] w-[25.208vw] border border-[#00000014]">
+      <div className="flex justify-between items-start">
+        <div className="space-y-[0.278vw]">
+          <p className="leading-none text-[1.111vw]">{server.name}</p>
+          <p className="opacity-50 leading-none text-[0.694vw]">
+            {server.location}
+          </p>
+        </div>
+        <Button
+          onlyIcon
+          size="small"
+          className="rounded-[0.278vw] bg-[#F5F5F5]"
+        >
+          <div className="min-w-[0.833vw] min-h-[0.833vw] text-black">
+            <MoreIcon />
+          </div>
+        </Button>
+      </div>
+      <div className="flex justify-between items-center">
+        <div className="space-y-[0.556vw]">
+          <div className="px-[0.556vw] py-[0.278vw] flex gap-[0.278vw] items-center bg-[#108C330D] rounded-[0.278vw] w-fit">
+            {server.sessions?.[0]?.status === "started" && (
+              <div className="rounded-full w-[0.278vw] h-[0.278vw] bg-[#108C33]" />
+            )}
+            <p className="font-medium leading-none text-[#108C33] text-[0.556vw]">
+              {server.sessions?.[0]?.status === "started"
+                ? "Сеанс запущен"
+                : "Свободен"}
+            </p>
+          </div>
+          {server.sessions?.[0]?.status === "started" && (
+            <>
+              <p className="leading-none">
+                {server.sessions?.[0]?.client?.fullname}
+              </p>
+              <p className="opacity-40 leading-none">
+                {server.sessions?.[0]?.app?.name}
+              </p>
+            </>
+          )}
+        </div>
+        <p className="opacity-40">0 мин</p>
+      </div>
+      <div className="flex gap-[0.278vw]">
+        {server.sessions?.[0]?.status === "started" ? (
+          <div className="flex items-center gap-[0.278vw]">
+            {/* <Button
+              variant="secondary"
+              className="py-[0.694vw] border rounded-lg border-[#2D68F6] w-full"
+            >
+              <p className="text-center leading-none font-medium text-[#2D68F6]">
+                Подробнее о сеансе
+              </p>
+            </Button> */}
+            <Button
+              variant="secondary"
+              className="py-[0.694vw] border rounded-lg border-[#DC0404] w-full"
+              onClick={() => endSession()}
+            >
+              <p className="text-center leading-none font-medium text-[#DC0404]">
+                Завершить сеанс
+              </p>
+            </Button>
+          </div>
+        ) : (
+          <Button
+            variant="primary"
+            className="bg-[#798FFF] w-full rounded-[0.556vw]"
+            onClick={() => createSession()}
+          >
+            <div className="flex gap-1 items-center">
+              <span className="w-[1.389vw] h-[1.389vw]">
+                <PlusIcon />
+              </span>
+              <p className="font-medium leading-[115%]">Начать сеанс</p>
+            </div>
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}