120 lines
4.4 KiB
TypeScript
120 lines
4.4 KiB
TypeScript
import { intervalToDuration } from "date-fns";
|
||
import FlashIcon from "../icons/FlashIcon";
|
||
import Button from "../Button";
|
||
import useModalStore from "../../stores/useModalStore";
|
||
import { Session } from "../../types/Session";
|
||
import { useEffect, useState } from "react";
|
||
import EndSessionModal from "./EndSessionModal";
|
||
import ClientCard from "../ClientCard";
|
||
import { useQuery } from "@tanstack/react-query";
|
||
import api from "../../utils/api";
|
||
import { Client } from "../../types/Client";
|
||
|
||
function CurrentSessionModal({ session }: { session: Session }) {
|
||
const { setModal } = useModalStore();
|
||
|
||
const [now, setNow] = useState(Date.now());
|
||
|
||
useEffect(() => {
|
||
const interval = setInterval(() => {
|
||
setNow(Date.now());
|
||
}, 1000);
|
||
return () => clearInterval(interval);
|
||
}, []);
|
||
|
||
const { data: client } = useQuery({
|
||
queryKey: ["client", session.clientId],
|
||
queryFn: () => api.get(`clients/${session.clientId}`).json<Client>(),
|
||
});
|
||
|
||
if (!session) return null;
|
||
|
||
return (
|
||
<div className="w-[25vw] bg-[#FFFFFF] rounded-[2.222vw] px-[1.389vw] pb-[1.389vw]">
|
||
<h2 className="title-s font-medium text-center py-[1.806vw]">
|
||
Текущий сеанс
|
||
</h2>
|
||
<div className="flex flex-col gap-[1.667vw]">
|
||
<div className="py-[1.389vw] flex gap-[0.833vw] border border-b-[#F6F6F6] border-t-0 border-r-0 border-l-0">
|
||
<div className='size-[4.444vw] bg-[#F6F6F6] rounded-[0.833vw] bg-[url("/images/super-table.png")] bg-no-repeat bg-[length:2.222vw] bg-center'></div>
|
||
<div className="flex flex-col gap-[0.278vw] self-center ">
|
||
<div className="flex gap-[0.278vw]">
|
||
<p className="title-s font-medium">{session.server.name}</p>
|
||
<p className="flex justify-center items-center gap-[0.139vw] caption-s font-medium text-[#7B60F3]">
|
||
<span className="size-[0.833vw] text-[#7B60F3]">
|
||
<FlashIcon />
|
||
</span>
|
||
Сеанс идёт{" "}
|
||
{(() => {
|
||
const duration = intervalToDuration({
|
||
start: session.createdAt,
|
||
end: now,
|
||
});
|
||
const hours = (duration.hours || 0)
|
||
.toString()
|
||
.padStart(2, "0");
|
||
const minutes = (duration.minutes || 0)
|
||
.toString()
|
||
.padStart(2, "0");
|
||
const seconds = (duration.seconds || 0)
|
||
.toString()
|
||
.padStart(2, "0");
|
||
return `${hours}:${minutes}:${seconds}`;
|
||
})()}
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<p className="caption-s font-medium text-[#BDBDBD]">
|
||
{session.server.description}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-col gap-[0.833vw]">
|
||
<h2 className="title-s font-medium">Параметры сеанса</h2>
|
||
{client && <ClientCard client={client} />}
|
||
</div>
|
||
<div className="flex flex-col gap-[0.833vw]">
|
||
<h2 className="title-s font-medium">Детали</h2>
|
||
<div className="flex flex-col gap-[0.556vw]">
|
||
<div className="flex gap-[0.556vw]">
|
||
<p className="caption-s font-medium text-[#BDBDBD]">Менеджер:</p>
|
||
<p className="caption-s font-medium">
|
||
{session.manager.fullname}
|
||
</p>
|
||
</div>
|
||
<div className="flex gap-[0.556vw]">
|
||
<p className="caption-s font-medium text-[#BDBDBD]">
|
||
Сценарии проживания:
|
||
</p>
|
||
<p className="caption-s font-medium">Добавить в бэкенд</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-col gap-[0.556vw]">
|
||
<Button
|
||
size="large"
|
||
variant="critical"
|
||
className="w-full"
|
||
onClick={() => {
|
||
setModal(<EndSessionModal session={session} />);
|
||
}}
|
||
>
|
||
Завершить сеанс
|
||
</Button>
|
||
<Button
|
||
size="large"
|
||
variant="primary"
|
||
className="w-full"
|
||
onClick={() => setModal(null)}
|
||
>
|
||
Закрыть
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default CurrentSessionModal;
|