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

modal upd

Browse Source
This commit is contained in:
Lanskikh
2025-03-21 14:19:48 +05:00
parent eb552cbdc8
commit cd916271cc
6 changed files with 68 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env
+1 -1
View File
@@ -1 +1 @@
VITE_API_URL=http://192.168.1.183:3000
VITE_API_URL=http://192.168.1.250:3000
.gitignore
+1
View File
@@ -11,6 +11,7 @@ node_modules
dist
dist-ssr
*.local
.env
# Editor directories and files
.vscode/*
src/components/DesktopSelect.tsx
+28
View File
@@ -0,0 +1,28 @@
import { IServer } from '../types/IServer';
interface Props {
servers: IServer[];
}
export default function DesktopSelect({ servers }: Props) {
return (
<div>
{servers.map(({ id, name, sessions }) => (
<div key={id} className="flex gap-[0.278vw] items-center">
{sessions && sessions?.length > 0 && (
<div
className="rounded-full w-[0.417vw] aspect-square"
style={{
backgroundColor:
sessions[sessions.length - 1].status === 'started'
? '#EF3C26'
: '#108C33',
}}
/>
)}
<p className="text-[0.972vw] leading-[115%]">{name}</p>
</div>
))}
</div>
);
}
src/components/ModalContainer.tsx
+14 -14
View File
@@ -1,9 +1,9 @@
/* eslint-disable react-hooks/exhaustive-deps */
import { useEffect, useRef } from "react";
import useModalStore from "../stores/useModalStore";
import { AnimatePresence, motion } from "motion/react";
import CloseIcon from "./icons/CloseIcon";
import Button from "./Button";
import { useEffect, useRef } from 'react';
import useModalStore from '../stores/useModalStore';
import { AnimatePresence, motion } from 'motion/react';
import CloseIcon from './icons/CloseIcon';
import Button from './Button';
const duration = 300;
@@ -24,7 +24,7 @@ function ModalContainer() {
}
function handleKeydown(e: KeyboardEvent) {
if (e.key !== "Escape") return;
if (e.key !== 'Escape') return;
setIsOpen(false);
}
@@ -39,12 +39,12 @@ function ModalContainer() {
}, [isOpen]);
useEffect(() => {
window.addEventListener("resize", handleResize);
window.addEventListener("keydown", handleKeydown);
window.addEventListener('resize', handleResize);
window.addEventListener('keydown', handleKeydown);
return () => {
window.removeEventListener("resize", handleResize);
window.removeEventListener("keydown", handleKeydown);
window.removeEventListener('resize', handleResize);
window.removeEventListener('keydown', handleKeydown);
};
}, []);
@@ -59,16 +59,16 @@ function ModalContainer() {
>
<div
ref={popoverRef}
className="fixed top-0 left-0 w-full h-full bg-black/70 overflow-y-auto flex flex-col items-center justify-center"
className="fixed inset-0 bg-black/70 overflow-y-auto flex flex-col items-end justify-center"
>
<div className="max-h-full">
<div ref={divRef} className="p-[0.972vw]">
<div ref={divRef} className="p-[0.972vw] h-dvh">
<div
ref={buttonRef}
className="absolute top-0 left-0 w-full h-full cursor-pointer"
className="absolute inset-0 cursor-pointer"
onClick={() => setIsOpen(false)}
/>
<div className="relative w-full">
<div className="relative w-full h-full">
{modal}
<Button
onlyIcon
src/components/modals/CreateSessionModal.tsx
+10 -22
View File
@@ -1,20 +1,18 @@
import Button from "../Button.tsx";
import SessionIcon from "../icons/SessionIcon.tsx";
import Input from "../Input.tsx";
import useQueryApps from "../../queries/useQueryApps.ts";
import useQueryServers from "../../queries/useQueryServers.ts";
import Select from "../Select.tsx";
import DisplayIcon from "../icons/DisplayIcon.tsx";
import { IServer } from '../../types/IServer.ts';
import Button from '../Button.tsx';
import Input from '../Input.tsx';
import DisplayIcon from '../icons/DisplayIcon.tsx';
export default function CreateSessionModal() {
const { data: apps } = useQueryApps();
const { data: servers } = useQueryServers();
interface Props {
servers: IServer[];
}
export default function CreateSessionModal({ servers }: Props) {
return (
<div className="w-[34.375vw] h-full rounded-[0.833vw] bg-white p-[1.667vw] flex flex-col justify-between gap-[1.111vw]">
<div className="w-[34.375vw] rounded-[0.833vw] bg-white min-h-full p-[1.667vw] flex flex-col justify-between gap-[1.111vw]">
<div className="gap-y-[1.111vw] flex flex-col justify-between">
<div className="space-y-[0.556vw]">
<div className="p-[0.833vw] ring-1 w-fit rounded-[0.556vw]">
<div className="p-[0.833vw] ring-[0.069vw] ring-[#E6E6E6] w-fit rounded-[0.556vw]">
<div className="w-[1.389vw] h-[1.389vw]">
<DisplayIcon />
</div>
@@ -47,16 +45,6 @@ export default function CreateSessionModal() {
<Input placeholder="sample@mail.ru" type="email" />
</div>
</div>
{apps && (
<div className="flex justify-between items-center">
<p className="text-[0.972vw]">Приложение</p>
<div className="outline outline-black/10 rounded-[0.556vw] w-[13.889vw]">
<Select
options={apps.map(({ id, name }) => ({ id, value: name }))}
/>
</div>
</div>
)}
<hr className="border-black/10" />
</div>
<div className="flex justify-between">
src/pages/DashboardPage.tsx
+14 -14
View File
@@ -1,22 +1,22 @@
import { useQuery } from "@tanstack/react-query";
import { IUser } from "../types/IUser";
import api from "../utils/api";
import Sidebar from "../components/Sidebar";
import { IServer } from "../types/IServer";
import DesktopCard from "../components/DesktopCard";
import Button from "../components/Button";
import useModalStore from "../stores/useModalStore";
import CreateSessionModal from "../components/modals/CreateSessionModal";
import { useQuery } from '@tanstack/react-query';
import { IUser } from '../types/IUser';
import api from '../utils/api';
import Sidebar from '../components/Sidebar';
import { IServer } from '../types/IServer';
import DesktopCard from '../components/DesktopCard';
import Button from '../components/Button';
import useModalStore from '../stores/useModalStore';
import CreateSessionModal from '../components/modals/CreateSessionModal';
function DashboardPage() {
const { data: me } = useQuery({
queryKey: ["me"],
queryFn: () => api.get("users/me").json<IUser>(),
queryKey: ['me'],
queryFn: () => api.get('users/me').json<IUser>(),
});
const { data: servers } = useQuery({
queryKey: ["servers"],
queryFn: () => api.get("servers?withLastSession=true").json<IServer[]>(),
queryKey: ['servers'],
queryFn: () => api.get('servers?withLastSession=true').json<IServer[]>(),
enabled: !!me,
refetchInterval: 1000,
});
@@ -66,7 +66,7 @@ function DashboardPage() {
</div>
<Sidebar />
</div>
<div className="border w-[38.889vw]">
<div className="w-[38.889vw]">
<div className="space-y-4">
{servers?.map((server) => (
<DesktopCard key={server.id} server={server} />