contests

2025-11-04 19:33:47 +03:00
parent 4972836164
commit cdb5595769
18 changed files with 511 additions and 65 deletions
--- a/src/views/home/contest/Contest.tsx
+++ b/src/views/home/contest/Contest.tsx
@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
+import { setMenuActivePage } from '../../../redux/slices/store';
+import { Navigate, Route, Routes, useParams } from 'react-router-dom';
+import { fetchContestById } from '../../../redux/slices/contests';
+import ContestMissions from './Missions';
+
+export interface Article {
+    id: number;
+    name: string;
+    tags: string[];
+}
+
+const Contest = () => {
+    const { contestId } = useParams<{ contestId: string }>();
+    const contestIdNumber =
+        contestId && /^\d+$/.test(contestId) ? parseInt(contestId, 10) : null;
+    if (contestIdNumber === null) {
+        return <Navigate to="/home/contests" replace />;
+    }
+
+    const dispatch = useAppDispatch();
+    const contest = useAppSelector((state) => state.contests.selectedContest);
+
+    useEffect(() => {
+        dispatch(setMenuActivePage('contest'));
+    }, []);
+
+    useEffect(() => {
+        dispatch(fetchContestById(contestIdNumber));
+    }, [contestIdNumber]);
+
+    return (
+        <div>
+            <Routes>
+                <Route
+                    path="*"
+                    element={<ContestMissions contest={contest} />}
+                />
+            </Routes>
+        </div>
+    );
+};
+
+export default Contest;
--- a/src/views/home/contest/MissionItem.tsx
+++ b/src/views/home/contest/MissionItem.tsx
@@ -0,0 +1,65 @@
+import { cn } from '../../../lib/cn';
+import { IconError, IconSuccess } from '../../../assets/icons/missions';
+import { useNavigate } from 'react-router-dom';
+
+export interface MissionItemProps {
+    id: number;
+    name: string;
+    timeLimit?: number;
+    memoryLimit?: number;
+    type?: 'first' | 'second';
+    status?: 'empty' | 'success' | 'error';
+}
+
+export function formatMilliseconds(ms: number): string {
+    const rounded = Math.round(ms) / 1000;
+    const formatted = rounded.toString().replace(/\.?0+$/, '');
+    return `${formatted} c`;
+}
+
+export function formatBytesToMB(bytes: number): string {
+    const megabytes = Math.floor(bytes / (1024 * 1024));
+    return `${megabytes} МБ`;
+}
+
+const MissionItem: React.FC<MissionItemProps> = ({
+    id,
+    name,
+    timeLimit = 1000,
+    memoryLimit = 256 * 1024 * 1024,
+    type,
+    status,
+}) => {
+    const navigate = useNavigate();
+
+    return (
+        <div
+            className={cn(
+                'min-h-[44px] w-full relative rounded-[10px] text-liquid-white',
+                type == 'first' ? 'bg-liquid-lighter' : 'bg-liquid-background',
+                'grid grid-cols-[80px,2fr,300px,24px] grid-flow-col gap-[20px] px-[20px] box-border items-center',
+                status == 'error' &&
+                    'border-l-[11px] border-l-liquid-red pl-[9px]',
+                status == 'success' &&
+                    'border-l-[11px] border-l-liquid-green pl-[9px]',
+                'cursor-pointer brightness-100 hover:brightness-125 transition-all duration-300',
+            )}
+            onClick={() => {
+                navigate(`/mission/${id}`);
+            }}
+        >
+            <div className="text-[18px] font-bold">#{id}</div>
+            <div className="text-[18px] font-bold">{name}</div>
+            <div className="text-[12px] text-right">
+                стандартный ввод/вывод {formatMilliseconds(timeLimit)},{' '}
+                {formatBytesToMB(memoryLimit)}
+            </div>
+            <div className="h-[24px] w-[24px]">
+                {status == 'error' && <img src={IconError} />}
+                {status == 'success' && <img src={IconSuccess} />}
+            </div>
+        </div>
+    );
+};
+
+export default MissionItem;
--- a/src/views/home/contest/Missions.tsx
+++ b/src/views/home/contest/Missions.tsx
@@ -0,0 +1,42 @@
+import { FC } from 'react';
+import { useAppDispatch } from '../../../redux/hooks';
+import MissionItem, { MissionItemProps } from './MissionItem';
+import { Contest } from '../../../redux/slices/contests';
+
+export interface Article {
+    id: number;
+    name: string;
+    tags: string[];
+}
+
+interface ContestMissionsProps {
+    contest: Contest | null;
+}
+
+const ContestMissions: FC<ContestMissionsProps> = ({ contest }) => {
+    if (!contest) {
+        return <></>;
+    }
+
+    return (
+        <div className=" h-screen grid grid-rows-[74px,1fr] p-[20px] gap-[20px]">
+            <div className=""></div>
+            <div className="h-full min-h-0 overflow-y-scroll medium-scrollbar flex flex-col gap-[20px]">
+                <div className="h-[40px] w-ufll ">
+                    {contest?.name} {contest.id}
+                </div>
+                <div className="w-full">
+                    {contest.missions.map((v, i) => (
+                        <MissionItem
+                            id={v.missionId}
+                            name={v.name}
+                            type={i % 2 ? 'second' : 'first'}
+                        />
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ContestMissions;
--- a/src/views/home/contest/Submissions.tsx
+++ b/src/views/home/contest/Submissions.tsx
--- a/src/views/home/contests/ContestItem.tsx
+++ b/src/views/home/contests/ContestItem.tsx
@@ -2,8 +2,10 @@ import { cn } from '../../../lib/cn';
 import { Account } from '../../../assets/icons/auth';
 import { PrimaryButton } from '../../../components/button/PrimaryButton';
 import { ReverseButton } from '../../../components/button/ReverseButton';
+import { useNavigate } from 'react-router-dom';

 export interface ContestItemProps {
+    id: number;
    name: string;
    startAt: string;
    duration: number;
@@ -46,6 +48,7 @@ function formatWaitTime(ms: number): string {
 }

 const ContestItem: React.FC<ContestItemProps> = ({
+    id,
    name,
    startAt,
    duration,
@@ -53,6 +56,8 @@ const ContestItem: React.FC<ContestItemProps> = ({
    statusRegister,
    type,
 }) => {
+    const navigate = useNavigate();
+
    const now = new Date();

    const waitTime = new Date(startAt).getTime() - now.getTime();
@@ -60,13 +65,16 @@ const ContestItem: React.FC<ContestItemProps> = ({
    return (
        <div
            className={cn(
-                'w-full box-border relative rounded-[10px] px-[20px] py-[10px] text-liquid-white  text-[16px] leading-[20px]',
+                'w-full box-border relative rounded-[10px] px-[20px] py-[10px] text-liquid-white  text-[16px] leading-[20px] cursor-pointer',
                waitTime <= 0 ? 'grid grid-cols-6' : 'grid grid-cols-7',
                'items-center font-bold text-liquid-white',
                type == 'first'
                    ? ' bg-liquid-lighter'
                    : ' bg-liquid-background',
            )}
+            onClick={() => {
+                navigate(`/contest/${id}`);
+            }}
        >
            <div className="text-left font-bold text-[18px]">{name}</div>
            <div className="text-center text-liquid-brightmain font-normal ">
@@ -90,12 +98,22 @@ const ContestItem: React.FC<ContestItemProps> = ({
                {statusRegister == 'reg' ? (
                    <>
                        {' '}
-                        <PrimaryButton onClick={() => {}} text="Регистрация" />
+                        <PrimaryButton
+                            onClick={(e) => {
+                                e.stopPropagation();
+                            }}
+                            text="Регистрация"
+                        />
                    </>
                ) : (
                    <>
                        {' '}
-                        <ReverseButton onClick={() => {}} text="Вы записаны" />
+                        <ReverseButton
+                            onClick={(e) => {
+                                e.stopPropagation();
+                            }}
+                            text="Вы записаны"
+                        />
                    </>
                )}
            </div>
--- a/src/views/home/contests/Contests.tsx
+++ b/src/views/home/contests/Contests.tsx
@@ -1,18 +1,21 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { SecondaryButton } from '../../../components/button/SecondaryButton';
 import { cn } from '../../../lib/cn';
 import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
 import ContestsBlock from './ContestsBlock';
 import { setMenuActivePage } from '../../../redux/slices/store';
 import { fetchContests } from '../../../redux/slices/contests';
+import ModalCreateContest from './ModalCreate';

 const Contests = () => {
    const dispatch = useAppDispatch();
    const now = new Date();

+    const [modalActive, setModalActive] = useState<boolean>(false);
+
    // Берём данные из Redux
    const contests = useAppSelector((state) => state.contests.contests);
-    const loading = useAppSelector((state) => state.contests.status);
+    const status = useAppSelector((state) => state.contests.statuses.create);
    const error = useAppSelector((state) => state.contests.error);

    // При загрузке страницы — выставляем активную вкладку и подгружаем контесты
@@ -21,7 +24,7 @@ const Contests = () => {
        dispatch(fetchContests({}));
    }, []);

-    if (loading == 'loading') {
+    if (status == 'loading') {
        return (
            <div className="text-liquid-white p-4">Загрузка контестов...</div>
        );
@@ -43,8 +46,10 @@ const Contests = () => {
                        Контесты
                    </div>
                    <SecondaryButton
-                        onClick={() => {}}
-                        text="Создать группу"
+                        onClick={() => {
+                            setModalActive(true);
+                        }}
+                        text="Создать контест"
                        className="absolute right-0"
                    />
                </div>
@@ -69,6 +74,11 @@ const Contests = () => {
                    })}
                />
            </div>
+
+            <ModalCreateContest
+                active={modalActive}
+                setActive={setModalActive}
+            />
        </div>
    );
 };
--- a/src/views/home/contests/ContestsBlock.tsx
+++ b/src/views/home/contests/ContestsBlock.tsx
@@ -53,6 +53,7 @@ const ContestsBlock: FC<ContestsBlockProps> = ({
                        {contests.map((v, i) => (
                            <ContestItem
                                key={i}
+                                id={v.id}
                                name={v.name}
                                startAt={v.startsAt}
                                statusRegister={'reg'}
--- a/src/views/home/contests/ModalCreate.tsx
+++ b/src/views/home/contests/ModalCreate.tsx
@@ -0,0 +1,191 @@
+import { FC, useEffect, useState } from 'react';
+import { Modal } from '../../../components/modal/Modal';
+import { PrimaryButton } from '../../../components/button/PrimaryButton';
+import { SecondaryButton } from '../../../components/button/SecondaryButton';
+import { Input } from '../../../components/input/Input';
+import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
+import { createContest } from '../../../redux/slices/contests';
+import { CreateContestBody } from '../../../redux/slices/contests';
+import DateRangeInput from '../../../components/input/DateRangeInput';
+
+interface ModalCreateContestProps {
+    active: boolean;
+    setActive: (value: boolean) => void;
+}
+
+const ModalCreateContest: FC<ModalCreateContestProps> = ({
+    active,
+    setActive,
+}) => {
+    const dispatch = useAppDispatch();
+    const status = useAppSelector((state) => state.contests.statuses.create);
+
+    const [form, setForm] = useState<CreateContestBody>({
+        name: '',
+        description: '',
+        scheduleType: 'AlwaysOpen',
+        visibility: 'Public',
+        startsAt: null,
+        endsAt: null,
+        attemptDurationMinutes: null,
+        maxAttempts: null,
+        allowEarlyFinish: false,
+        groupId: null,
+        missionIds: null,
+        articleIds: null,
+        participantIds: null,
+        organizerIds: null,
+    });
+
+    useEffect(() => {
+        if (status === 'successful') {
+            setActive(false);
+        }
+    }, [status]);
+
+    const handleChange = (key: keyof CreateContestBody, value: any) => {
+        setForm((prev) => ({ ...prev, [key]: value }));
+    };
+
+    const handleSubmit = () => {
+        dispatch(createContest(form));
+    };
+
+    return (
+        <Modal
+            className="bg-liquid-background border-liquid-lighter border-[2px] p-[25px] rounded-[20px] text-liquid-white"
+            onOpenChange={setActive}
+            open={active}
+            backdrop="blur"
+        >
+            <div className="w-[550px]">
+                <div className="font-bold text-[30px] mb-[10px]">
+                    Создать контест
+                </div>
+
+                <Input
+                    name="name"
+                    type="text"
+                    label="Название"
+                    className="mt-[10px]"
+                    placeholder="Введите название"
+                    onChange={(v) => handleChange('name', v)}
+                />
+
+                <Input
+                    name="description"
+                    type="text"
+                    label="Описание"
+                    className="mt-[10px]"
+                    placeholder="Введите описание"
+                    onChange={(v) => handleChange('description', v)}
+                />
+
+                <div className="grid grid-cols-2 gap-[10px] mt-[10px]">
+                    <div>
+                        <label className="block text-sm mb-1">
+                            Тип расписания
+                        </label>
+                        <select
+                            className="w-full p-2 rounded-md bg-liquid-darker border border-liquid-lighter"
+                            value={form.scheduleType}
+                            onChange={(e) =>
+                                handleChange(
+                                    'scheduleType',
+                                    e.target
+                                        .value as CreateContestBody['scheduleType'],
+                                )
+                            }
+                        >
+                            <option value="AlwaysOpen">Всегда открыт</option>
+                            <option value="FixedWindow">
+                                Фиксированные даты
+                            </option>
+                            <option value="RollingWindow">
+                                Скользящее окно
+                            </option>
+                        </select>
+                    </div>
+
+                    <div>
+                        <label className="block text-sm mb-1">Видимость</label>
+                        <select
+                            className="w-full p-2 rounded-md bg-liquid-darker border border-liquid-lighter"
+                            value={form.visibility}
+                            onChange={(e) =>
+                                handleChange(
+                                    'visibility',
+                                    e.target
+                                        .value as CreateContestBody['visibility'],
+                                )
+                            }
+                        >
+                            <option value="Public">Публичный</option>
+                            <option value="GroupPrivate">Групповой</option>
+                        </select>
+                    </div>
+                </div>
+
+                {/* Даты начала и конца */}
+                <div className="grid grid-cols-2 gap-[10px] mt-[10px]">
+                    <DateRangeInput
+                        startValue={form.startsAt || ''}
+                        endValue={form.endsAt || ''}
+                        onChange={handleChange}
+                        className="mt-[10px]"
+                    />
+                </div>
+
+                {/* Продолжительность и лимиты */}
+                <div className="grid grid-cols-2 gap-[10px] mt-[10px]">
+                    <Input
+                        name="attemptDurationMinutes"
+                        type="number"
+                        label="Длительность попытки (мин)"
+                        placeholder="Например: 60"
+                        onChange={(v) =>
+                            handleChange('attemptDurationMinutes', Number(v))
+                        }
+                    />
+                    <Input
+                        name="maxAttempts"
+                        type="number"
+                        label="Макс. попыток"
+                        placeholder="Например: 3"
+                        onChange={(v) => handleChange('maxAttempts', Number(v))}
+                    />
+                </div>
+
+                {/* Разрешить раннее завершение */}
+                <div className="flex items-center gap-[10px] mt-[15px]">
+                    <input
+                        id="allowEarlyFinish"
+                        type="checkbox"
+                        checked={!!form.allowEarlyFinish}
+                        onChange={(e) =>
+                            handleChange('allowEarlyFinish', e.target.checked)
+                        }
+                    />
+                    <label htmlFor="allowEarlyFinish">
+                        Разрешить раннее завершение
+                    </label>
+                </div>
+
+                {/* Кнопки */}
+                <div className="flex flex-row w-full items-center justify-end mt-[20px] gap-[20px]">
+                    <PrimaryButton
+                        onClick={handleSubmit}
+                        text="Создать"
+                        disabled={status === 'loading'}
+                    />
+                    <SecondaryButton
+                        onClick={() => setActive(false)}
+                        text="Отмена"
+                    />
+                </div>
+            </div>
+        </Modal>
+    );
+};
+
+export default ModalCreateContest;
--- a/src/views/home/missions/MissionItem.tsx
+++ b/src/views/home/missions/MissionItem.tsx
@@ -4,16 +4,16 @@ import { useNavigate } from 'react-router-dom';

 export interface MissionItemProps {
    id: number;
-    authorId: number;
+    authorId?: number;
    name: string;
    difficulty: 'Easy' | 'Medium' | 'Hard';
-    tags: string[];
-    timeLimit: number;
-    memoryLimit: number;
-    createdAt: string;
-    updatedAt: string;
-    type: 'first' | 'second';
-    status: 'empty' | 'success' | 'error';
+    tags?: string[];
+    timeLimit?: number;
+    memoryLimit?: number;
+    createdAt?: string;
+    updatedAt?: string;
+    type?: 'first' | 'second';
+    status?: 'empty' | 'success' | 'error';
 }

 export function formatMilliseconds(ms: number): string {
@@ -31,8 +31,8 @@ const MissionItem: React.FC<MissionItemProps> = ({
    id,
    name,
    difficulty,
-    timeLimit,
-    memoryLimit,
+    timeLimit = 1000,
+    memoryLimit = 256 * 1024 * 1024,
    type,
    status,
 }) => {
@@ -41,7 +41,7 @@ const MissionItem: React.FC<MissionItemProps> = ({
    return (
        <div
            className={cn(
-                'h-[44px] w-full relative rounded-[10px] text-liquid-white',
+                'min-h-[44px] w-full relative rounded-[10px] text-liquid-white',
                type == 'first' ? 'bg-liquid-lighter' : 'bg-liquid-background',
                'grid grid-cols-[80px,1fr,1fr,60px,24px] grid-flow-col gap-[20px] px-[20px] box-border items-center',
                status == 'error' &&
--- a/src/views/home/missions/Missions.tsx
+++ b/src/views/home/missions/Missions.tsx
@@ -3,7 +3,6 @@ import { SecondaryButton } from '../../../components/button/SecondaryButton';
 import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
 import { useEffect, useState } from 'react';
 import { setMenuActivePage } from '../../../redux/slices/store';
-import { useNavigate } from 'react-router-dom';
 import { fetchMissions } from '../../../redux/slices/missions';
 import ModalCreate from './ModalCreate';

--- a/src/views/home/missions/ModalCreate.tsx
+++ b/src/views/home/missions/ModalCreate.tsx
@@ -97,12 +97,15 @@ const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {

                <div className="mt-4">
                    <label className="block mb-2">Файл задачи</label>
-                    <input
-                        type="file"
-                        onChange={handleFileChange}
-                        accept=".zip"
-                        required
-                    />
+                    <label className="cursor-pointer inline-flex items-center justify-center px-4 py-2 bg-liquid-lighter hover:bg-liquid-dark transition-colors rounded-[10px] text-liquid-white font-medium shadow-md">
+                        {file ? file.name : 'Выбрать файл'}
+                        <input
+                            type="file"
+                            onChange={handleFileChange}
+                            accept=".zip"
+                            className="hidden"
+                        />
+                    </label>
                </div>

                {/* Теги */}