diff --git a/public/images/app_image.png b/public/images/app_image.png new file mode 100644 index 0000000..e83a62a Binary files /dev/null and b/public/images/app_image.png differ diff --git a/src/components/NewButton.tsx b/src/components/NewButton.tsx index 6c731a6..c1d38f1 100644 --- a/src/components/NewButton.tsx +++ b/src/components/NewButton.tsx @@ -14,14 +14,20 @@ function NewButton({ size = "medium", className, ref, + type, + onClick, ...props }: NewButtonProps) { return ( + {isOpen && ( +
+
+ +
+ +
+ +

Смена проекта

+ { + e.preventDefault(); + setIsOpen(false); + }} + > + + + + +
+
+
+ {projects.map((project) => ( + + ))} +
+
+ { + setSelectedProject(pointedProject); + setIsOpen(false); + }} + > + Переключиться + + { + setIsOpen(false); + }} + > + Отменить + +
+
+
+ )} + + ); } export default ProjectSelector; diff --git a/src/components/Select.tsx b/src/components/Select.tsx index 442e7bc..31291cd 100644 --- a/src/components/Select.tsx +++ b/src/components/Select.tsx @@ -1,8 +1,8 @@ /* eslint-disable react-hooks/exhaustive-deps */ import { useEffect, useState } from "react"; -import Button from "./Button"; import { useClickAway } from "@uidotdev/usehooks"; import ArrowDownIcon from "./icons/ArrowDownIcon"; +import NewButton from "./NewButton"; interface Props { options: string[]; // ["StroyProject"] @@ -31,11 +31,13 @@ export default function Select({ options, onChange }: Props) { ref={ref} className="relative outline-black/10 outline w-[13.889vw] rounded-[0.556vw]" > - + {isOpen && (
{options.map((option) => ( - + ))}
)} diff --git a/src/components/TableSelector.tsx b/src/components/TableSelector.tsx index 698c228..49d5690 100644 --- a/src/components/TableSelector.tsx +++ b/src/components/TableSelector.tsx @@ -30,9 +30,9 @@ function TableSelector({ >

{table.name}

{table.status === "offline" ? ( -

Недоступен

+

Недоступен

) : table.sessions?.[0].status === "ended" ? ( -

Свободен

+

Свободен

) : (
diff --git a/src/components/icons/CheckIcon.tsx b/src/components/icons/CheckIcon.tsx new file mode 100644 index 0000000..64af8dc --- /dev/null +++ b/src/components/icons/CheckIcon.tsx @@ -0,0 +1,14 @@ +function CheckIcon() { + return ( + + + + ); +} + +export default CheckIcon; diff --git a/src/components/icons/ChevronDownIcon.tsx b/src/components/icons/ChevronDownIcon.tsx index ca4a92e..2010e71 100644 --- a/src/components/icons/ChevronDownIcon.tsx +++ b/src/components/icons/ChevronDownIcon.tsx @@ -1,12 +1,6 @@ function ChevronDownIcon() { return ( - + + ); diff --git a/src/components/icons/StartSessionIcon.tsx b/src/components/icons/StartSessionIcon.tsx new file mode 100644 index 0000000..1ef415a --- /dev/null +++ b/src/components/icons/StartSessionIcon.tsx @@ -0,0 +1,12 @@ +function StartSessionIcon() { + return ( + + + + ); +} + +export default StartSessionIcon; diff --git a/src/components/modals/CreateSessionModal.tsx b/src/components/modals/CreateSessionModal.tsx index 5679973..bf9c822 100644 --- a/src/components/modals/CreateSessionModal.tsx +++ b/src/components/modals/CreateSessionModal.tsx @@ -1,16 +1,15 @@ import { IServer } from "../../types/IServer.ts"; -import Button from "../Button.tsx"; -import DesktopSelect from "../DesktopSelect.tsx"; -import Input from "../Input.tsx"; -import DisplayIcon from "../icons/DisplayIcon.tsx"; -import Select from "../Select.tsx"; -import { useState } from "react"; +import { useRef, useState } from "react"; import { IApp } from "../../types/IApp.ts"; import api from "../../utils/api.ts"; import { ISession } from "../../types/ISession.ts"; import { IClient } from "../../types/IClient.ts"; import useModalStore from "../../stores/useModalStore.ts"; import TableSelector from "../TableSelector.tsx"; +import NewInput from "../NewInput.tsx"; +import StartSessionIcon from "../icons/StartSessionIcon.tsx"; +import NewButton from "../NewButton.tsx"; +import ProjectSelector from "../ProjectSelector.tsx"; interface Props { servers: IServer[] | undefined; @@ -31,8 +30,6 @@ export default function CreateSessionModal({ const [selectedApp, setSelectedApp] = useState(null); async function createClient() { - console.log(name, phone, email); - return await api .post("clients", { json: { @@ -71,10 +68,13 @@ export default function CreateSessionModal({ } } + const ref = useRef(null); + return (

Новый сеанс

@@ -89,117 +89,53 @@ export default function CreateSessionModal({

Укажите данные клиента

- - - + setPhone(e.target.value)} + placeholder="Номер телефона" + required + /> + setName(e.target.value)} + placeholder="Имя" + required + /> + setEmail(e.target.value)} + placeholder="Электронная почта" + />

Выберите параметры сеанса

-
-
- - {/*
-
-
-
- -
-
-

Создание сеанса

-

- Укажите данные клиента, выберите менеджера и стол -

-
-
-
-

- Имя * -

-
- setName(e.target.value)} + {selectedServer?.apps?.length && selectedServer?.apps?.length > 0 && ( + -
+ )}
-
-

- Номер * -

-
- setPhone(e.target.value)} - /> -
-
-
-

Электронная почта

-
- setEmail(e.target.value)} - /> -
-
-
-
-

Стол

- - !sessions || - !sessions.length || - sessions[0]?.status === "ended" - )} - value={selectedServer || undefined} - onChange={setSelectedServer} - /> -
-

- При запуске нового сеанса текущий будет завершен принудительно. -

-
- {selectedServer && ( -
-

Проекты

-
-