mirror of
https://gitlab.com/megazordpobeda/DataRush.git
synced 2026-05-22 22:07:10 +00:00
feat: added templates for user profile + competition constructor (if will be), started working on synchronizing front and back session
This commit is contained in:
rngsurrounded
@@ -6,6 +6,8 @@
|
||||
"dependencies": {
|
||||
"@monaco-editor/react": "^4.7.0",
|
||||
"@radix-ui/react-dialog": "^1.1.6",
|
||||
"@radix-ui/react-label": "^2.1.2",
|
||||
"@radix-ui/react-radio-group": "^1.2.3",
|
||||
"@radix-ui/react-slot": "^1.1.2",
|
||||
"@radix-ui/react-tabs": "^1.1.3",
|
||||
"@tailwindcss/vite": "^4.0.9",
|
||||
@@ -157,12 +159,16 @@
|
||||
|
||||
"@radix-ui/react-id": ["@radix-ui/react-id@1.1.0", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA=="],
|
||||
|
||||
"@radix-ui/react-label": ["@radix-ui/react-label@2.1.2", "", { "dependencies": { "@radix-ui/react-primitive": "2.0.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-zo1uGMTaNlHehDyFQcDZXRJhUPDuukcnHz0/jnrup0JA6qL+AFpAnty+7VKa9esuU5xTblAZzTGYJKSKaBxBhw=="],
|
||||
|
||||
"@radix-ui/react-portal": ["@radix-ui/react-portal@1.1.4", "", { "dependencies": { "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-use-layout-effect": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-sn2O9k1rPFYVyKd5LAJfo96JlSGVFpa1fS6UuBJfrZadudiw5tAmru+n1x7aMRQ84qDM71Zh1+SzK5QwU0tJfA=="],
|
||||
|
||||
"@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.2", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg=="],
|
||||
|
||||
"@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.0.2", "", { "dependencies": { "@radix-ui/react-slot": "1.1.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w=="],
|
||||
|
||||
"@radix-ui/react-radio-group": ["@radix-ui/react-radio-group@1.2.3", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-direction": "1.1.0", "@radix-ui/react-presence": "1.1.2", "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-roving-focus": "1.1.2", "@radix-ui/react-use-controllable-state": "1.1.0", "@radix-ui/react-use-previous": "1.1.0", "@radix-ui/react-use-size": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-xtCsqt8Rp09FK50ItqEqTJ7Sxanz8EM8dnkVIhJrc/wkMMomSmXHvYbhv3E7Zx4oXh98aaLt9W679SUYXg4IDA=="],
|
||||
|
||||
"@radix-ui/react-roving-focus": ["@radix-ui/react-roving-focus@1.1.2", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-collection": "1.1.2", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-direction": "1.1.0", "@radix-ui/react-id": "1.1.0", "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-use-callback-ref": "1.1.0", "@radix-ui/react-use-controllable-state": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-zgMQWkNO169GtGqRvYrzb0Zf8NhMHS2DuEB/TiEmVnpr5OqPU3i8lfbxaAmC2J/KYuIQxyoQQ6DxepyXp61/xw=="],
|
||||
|
||||
"@radix-ui/react-slot": ["@radix-ui/react-slot@1.1.2", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ=="],
|
||||
@@ -177,6 +183,10 @@
|
||||
|
||||
"@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.0", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w=="],
|
||||
|
||||
"@radix-ui/react-use-previous": ["@radix-ui/react-use-previous@1.1.0", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og=="],
|
||||
|
||||
"@radix-ui/react-use-size": ["@radix-ui/react-use-size@1.1.0", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw=="],
|
||||
|
||||
"@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.34.9", "", { "os": "android", "cpu": "arm" }, "sha512-qZdlImWXur0CFakn2BJ2znJOdqYZKiedEPEVNTBrpfPjc/YuTGcaYZcdmNFTkUj3DU0ZM/AElcM8Ybww3xVLzA=="],
|
||||
|
||||
"@rollup/rollup-android-arm64": ["@rollup/rollup-android-arm64@4.34.9", "", { "os": "android", "cpu": "arm64" }, "sha512-4KW7P53h6HtJf5Y608T1ISKvNIYLWRKMvfnG0c44M6In4DQVU58HZFEVhWINDZKp7FZps98G3gxwC1sb0wXUUg=="],
|
||||
|
||||
@@ -12,6 +12,8 @@
|
||||
"dependencies": {
|
||||
"@monaco-editor/react": "^4.7.0",
|
||||
"@radix-ui/react-dialog": "^1.1.6",
|
||||
"@radix-ui/react-label": "^2.1.2",
|
||||
"@radix-ui/react-radio-group": "^1.2.3",
|
||||
"@radix-ui/react-slot": "^1.1.2",
|
||||
"@radix-ui/react-tabs": "^1.1.3",
|
||||
"@tailwindcss/vite": "^4.0.9",
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Routes, Route } from "react-router";
|
||||
import "./styles/globals.css";
|
||||
import { Routes, Route } from "react-router";
|
||||
|
||||
import { NavbarLayout } from "./widgets/navbar-layout";
|
||||
|
||||
@@ -8,6 +8,8 @@ import Competition from "./pages/Competition";
|
||||
import CompetitionSession from "./pages/CompetitionSession";
|
||||
import LoginPage from "./pages/Login";
|
||||
import { AuthLayout } from "./widgets/auth-layout";
|
||||
import CompetitionConstructor from "./pages/CompetitionConstructor";
|
||||
import UserProfile from "./pages/UserProfile";
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
@@ -24,6 +26,27 @@ const App = () => {
|
||||
path="/competition/:id/tasks/:taskId"
|
||||
element={<CompetitionSession />}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path="/constructor/:id"
|
||||
element={<CompetitionConstructor />}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path="/constructor/new"
|
||||
element={<CompetitionConstructor />}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path="/constructor/:id/tasks/:taskId"
|
||||
element={<CompetitionConstructor />}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path="/profile"
|
||||
element={<UserProfile />}
|
||||
/>
|
||||
|
||||
</Route>
|
||||
</Routes>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,133 @@
|
||||
import * as React from "react"
|
||||
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
||||
import { XIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/shared/lib/utils"
|
||||
|
||||
function Dialog({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
|
||||
return <DialogPrimitive.Root data-slot="dialog" {...props} />
|
||||
}
|
||||
|
||||
function DialogTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
|
||||
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
|
||||
}
|
||||
|
||||
function DialogPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
|
||||
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
|
||||
}
|
||||
|
||||
function DialogClose({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
|
||||
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
|
||||
}
|
||||
|
||||
function DialogOverlay({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
|
||||
return (
|
||||
<DialogPrimitive.Overlay
|
||||
data-slot="dialog-overlay"
|
||||
className={cn(
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogContent({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Content>) {
|
||||
return (
|
||||
<DialogPortal data-slot="dialog-portal">
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
data-slot="dialog-content"
|
||||
className={cn(
|
||||
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
|
||||
<XIcon />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-header"
|
||||
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-footer"
|
||||
className={cn(
|
||||
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogTitle({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
|
||||
return (
|
||||
<DialogPrimitive.Title
|
||||
data-slot="dialog-title"
|
||||
className={cn("text-lg leading-none font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
|
||||
return (
|
||||
<DialogPrimitive.Description
|
||||
data-slot="dialog-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogOverlay,
|
||||
DialogPortal,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import * as React from "react"
|
||||
import * as LabelPrimitive from "@radix-ui/react-label"
|
||||
|
||||
import { cn } from "@/shared/lib/utils"
|
||||
|
||||
function Label({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||
return (
|
||||
<LabelPrimitive.Root
|
||||
data-slot="label"
|
||||
className={cn(
|
||||
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Label }
|
||||
@@ -0,0 +1,43 @@
|
||||
import * as React from "react"
|
||||
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
|
||||
import { CircleIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/shared/lib/utils"
|
||||
|
||||
function RadioGroup({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
|
||||
return (
|
||||
<RadioGroupPrimitive.Root
|
||||
data-slot="radio-group"
|
||||
className={cn("grid gap-3", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function RadioGroupItem({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
|
||||
return (
|
||||
<RadioGroupPrimitive.Item
|
||||
data-slot="radio-group-item"
|
||||
className={cn(
|
||||
"border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<RadioGroupPrimitive.Indicator
|
||||
data-slot="radio-group-indicator"
|
||||
className="relative flex items-center justify-center"
|
||||
>
|
||||
<CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
|
||||
</RadioGroupPrimitive.Indicator>
|
||||
</RadioGroupPrimitive.Item>
|
||||
)
|
||||
}
|
||||
|
||||
export { RadioGroup, RadioGroupItem }
|
||||
+63
@@ -0,0 +1,63 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Task } from "@/shared/types";
|
||||
import { Settings, Plus } from 'lucide-react';
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
interface ConstructorHeaderProps {
|
||||
title: string;
|
||||
tasks: Task[];
|
||||
competitionId: string;
|
||||
onAddTaskClick: () => void;
|
||||
}
|
||||
|
||||
const ConstructorHeader: React.FC<ConstructorHeaderProps> = ({
|
||||
title,
|
||||
tasks,
|
||||
competitionId,
|
||||
onAddTaskClick
|
||||
}) => {
|
||||
return (
|
||||
<header className="bg-white shadow-sm sticky top-0 z-30 w-full">
|
||||
<div className="mx-auto max-w-6xl px-4">
|
||||
<div className="py-4 text-center">
|
||||
<h1 className="font-hse-sans text-xl font-semibold">
|
||||
{title}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center gap-4 pb-4 overflow-x-auto no-scrollbar">
|
||||
<Link
|
||||
to={`/constructor/${competitionId}/tasks/settings`}
|
||||
className="bg-gray-100 text-gray-700 rounded-lg px-3 py-1.5 font-medium text-sm font-hse-sans cursor-pointer
|
||||
transition-all hover:bg-gray-200 flex-shrink-0 flex items-center"
|
||||
>
|
||||
<Settings size={16} className="mr-1" />
|
||||
</Link>
|
||||
|
||||
{tasks.map((task) => (
|
||||
<Link
|
||||
key={task.id}
|
||||
to={`/constructor/${competitionId}/tasks/${task.id}`}
|
||||
className="bg-blue-100 text-blue-700 rounded-lg px-3 py-1.5 font-medium text-sm font-hse-sans cursor-pointer
|
||||
transition-all hover:bg-blue-200 flex-shrink-0"
|
||||
>
|
||||
{task.number}
|
||||
</Link>
|
||||
))}
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="rounded-lg flex items-center px-2 h-8"
|
||||
onClick={onAddTaskClick}
|
||||
>
|
||||
<Plus size={18} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConstructorHeader;
|
||||
@@ -0,0 +1,89 @@
|
||||
import { useState } from "react";
|
||||
import { useParams, Navigate, useNavigate } from "react-router-dom";
|
||||
import { Task, TaskStatus } from "@/shared/types";
|
||||
import ConstructorHeader from "./components/ConstructorHeader";
|
||||
import TaskCreationModal from "./modules/TaskCreationModal";
|
||||
|
||||
const CompetitionConstructor = () => {
|
||||
const { id, taskId } = useParams<{ id: string; taskId?: string }>();
|
||||
const navigate = useNavigate();
|
||||
const [competitionTitle, setCompetitionTitle] = useState("Новая олимпиада");
|
||||
const [tasks, setTasks] = useState<Task[]>([]);
|
||||
const [isTaskModalOpen, setIsTaskModalOpen] = useState(false);
|
||||
|
||||
const isSettings = taskId === "settings";
|
||||
|
||||
const handleOpenTaskModal = () => {
|
||||
setIsTaskModalOpen(true);
|
||||
};
|
||||
|
||||
const handleCloseTaskModal = () => {
|
||||
setIsTaskModalOpen(false);
|
||||
};
|
||||
|
||||
const handleCreateTask = (taskData: Partial<Task>) => {
|
||||
const newTask: Task = {
|
||||
id: `task-${Date.now()}`,
|
||||
number: taskData.number || `${tasks.length + 1}`,
|
||||
status: TaskStatus.Uncleared,
|
||||
solutionType: taskData.solutionType || "input",
|
||||
description: taskData.description || "",
|
||||
requirements: taskData.requirements,
|
||||
attachments: taskData.attachments || []
|
||||
};
|
||||
|
||||
setTasks([...tasks, newTask]);
|
||||
setIsTaskModalOpen(false);
|
||||
navigate(`/constructor/${id}/tasks/${newTask.id}`);
|
||||
};
|
||||
|
||||
if (!taskId) {
|
||||
if (tasks.length > 0) {
|
||||
return <Navigate to={`/constructor/${id}/tasks/${tasks[0].id}`} replace />;
|
||||
} else {
|
||||
return <Navigate to={`/constructor/${id}/tasks/settings`} replace />;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen">
|
||||
<ConstructorHeader
|
||||
title={competitionTitle}
|
||||
tasks={tasks}
|
||||
competitionId={id || ""}
|
||||
onAddTaskClick={handleOpenTaskModal}
|
||||
/>
|
||||
|
||||
<TaskCreationModal
|
||||
isOpen={isTaskModalOpen}
|
||||
onClose={handleCloseTaskModal}
|
||||
onCreateTask={handleCreateTask}
|
||||
taskCount={tasks.length}
|
||||
/>
|
||||
|
||||
<main className="flex-1 bg-[#F8F8F8] pb-8">
|
||||
<div className="max-w-6xl mx-auto px-4 py-6">
|
||||
{isSettings ? (
|
||||
<div className="bg-white rounded-lg p-6 shadow-sm">
|
||||
<h2 className="text-2xl font-semibold mb-6 font-hse-sans">Настройки олимпиады</h2>
|
||||
<p className="text-gray-500 font-hse-sans">
|
||||
Здесь будет форма настроек олимпиады
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white rounded-lg p-6 shadow-sm">
|
||||
<h2 className="text-2xl font-semibold mb-6 font-hse-sans">
|
||||
{`Редактирование задачи ${tasks.find(t => t.id === taskId)?.number || ""}`}
|
||||
</h2>
|
||||
<p className="text-gray-500 font-hse-sans">
|
||||
Здесь будет форма редактирования задачи
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CompetitionConstructor;
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
import React from 'react';
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
interface TaskDescriptionFieldProps {
|
||||
description: string;
|
||||
onChange: (value: string) => void;
|
||||
}
|
||||
|
||||
const TaskDescriptionField: React.FC<TaskDescriptionFieldProps> = ({ description, onChange }) => {
|
||||
return (
|
||||
<div className="grid grid-cols-4 items-start gap-4">
|
||||
<Label htmlFor="description" className="text-right pt-2">
|
||||
Описание
|
||||
</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
value={description}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
className="col-span-3 min-h-[100px]"
|
||||
placeholder="Введите описание задачи"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TaskDescriptionField;
|
||||
+92
@@ -0,0 +1,92 @@
|
||||
import React from 'react';
|
||||
import { FileIcon, X, Upload } from 'lucide-react';
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
interface TaskFileAttachmentsProps {
|
||||
files: File[];
|
||||
onChange: (files: File[]) => void;
|
||||
}
|
||||
|
||||
const TaskFileAttachments: React.FC<TaskFileAttachmentsProps> = ({ files, onChange }) => {
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.files) {
|
||||
const newFiles = Array.from(e.target.files);
|
||||
onChange([...files, ...newFiles]);
|
||||
}
|
||||
};
|
||||
|
||||
const removeFile = (index: number) => {
|
||||
onChange(files.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-4 items-start gap-4">
|
||||
<Label className="text-right pt-2">
|
||||
Файлы
|
||||
</Label>
|
||||
<div className="col-span-3">
|
||||
<div className="flex flex-col gap-2">
|
||||
{files.map((file, index) => (
|
||||
<FileListItem
|
||||
key={index}
|
||||
file={file}
|
||||
onRemove={() => removeFile(index)}
|
||||
/>
|
||||
))}
|
||||
|
||||
<FileUploadButton onChange={handleFileChange} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface FileListItemProps {
|
||||
file: File;
|
||||
onRemove: () => void;
|
||||
}
|
||||
|
||||
const FileListItem: React.FC<FileListItemProps> = ({ file, onRemove }) => {
|
||||
return (
|
||||
<div className="flex items-center justify-between p-2 border rounded-md">
|
||||
<div className="flex items-center">
|
||||
<FileIcon size={16} className="mr-2 text-gray-500" />
|
||||
<span className="text-sm">{file.name}</span>
|
||||
<span className="text-xs text-gray-500 ml-2">
|
||||
({Math.round(file.size / 1024)} KB)
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onRemove}
|
||||
>
|
||||
<X size={16} />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface FileUploadButtonProps {
|
||||
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
}
|
||||
|
||||
const FileUploadButton: React.FC<FileUploadButtonProps> = ({ onChange }) => {
|
||||
return (
|
||||
<label className="cursor-pointer">
|
||||
<div className="flex items-center gap-2 p-2 border border-dashed rounded-md hover:bg-gray-50 transition-colors">
|
||||
<Upload size={16} className="text-gray-500" />
|
||||
<span className="text-sm text-gray-700">Добавить файлы</span>
|
||||
</div>
|
||||
<input
|
||||
type="file"
|
||||
className="hidden"
|
||||
onChange={onChange}
|
||||
multiple
|
||||
/>
|
||||
</label>
|
||||
);
|
||||
};
|
||||
|
||||
export default TaskFileAttachments;
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
import React from 'react';
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
interface TaskNumberFieldProps {
|
||||
number: string;
|
||||
onChange: (value: string) => void;
|
||||
}
|
||||
|
||||
const TaskNumberField: React.FC<TaskNumberFieldProps> = ({ number, onChange }) => {
|
||||
return (
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="task-number" className="text-right">
|
||||
Номер задачи
|
||||
</Label>
|
||||
<Input
|
||||
id="task-number"
|
||||
value={number}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
className="col-span-3"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TaskNumberField;
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
import React from 'react';
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
interface TaskRequirementsFieldProps {
|
||||
requirements: string;
|
||||
onChange: (value: string) => void;
|
||||
}
|
||||
|
||||
const TaskRequirementsField: React.FC<TaskRequirementsFieldProps> = ({ requirements, onChange }) => {
|
||||
return (
|
||||
<div className="grid grid-cols-4 items-start gap-4">
|
||||
<Label htmlFor="requirements" className="text-right pt-2">
|
||||
Требования
|
||||
</Label>
|
||||
<Textarea
|
||||
id="requirements"
|
||||
value={requirements}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
className="col-span-3"
|
||||
placeholder="Введите требования к решению (необязательно)"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TaskRequirementsField;
|
||||
+41
@@ -0,0 +1,41 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
RadioGroup,
|
||||
RadioGroupItem
|
||||
} from "@/components/ui/radio-group";
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
interface TaskSolutionTypeSelectorProps {
|
||||
solutionType: 'input' | 'file' | 'code';
|
||||
onChange: (value: 'input' | 'file' | 'code') => void;
|
||||
}
|
||||
|
||||
const TaskSolutionTypeSelector: React.FC<TaskSolutionTypeSelectorProps> = ({ solutionType, onChange }) => {
|
||||
return (
|
||||
<div className="grid grid-cols-4 items-start gap-4">
|
||||
<Label className="text-right pt-2">
|
||||
Тип решения
|
||||
</Label>
|
||||
<RadioGroup
|
||||
className="col-span-3"
|
||||
value={solutionType}
|
||||
onValueChange={(value) => onChange(value as 'input' | 'file' | 'code')}
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="input" id="input" />
|
||||
<Label htmlFor="input">Ввод ответа</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="file" id="file" />
|
||||
<Label htmlFor="file">Загрузка файла</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="code" id="code" />
|
||||
<Label htmlFor="code">Программный код</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TaskSolutionTypeSelector;
|
||||
+101
@@ -0,0 +1,101 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Task } from "@/shared/types";
|
||||
import TaskNumberField from './components/TaskNumberField';
|
||||
import TaskDescriptionField from './components/TaskDescriptionField';
|
||||
import TaskRequirementsField from './components/TaskRequirementsField';
|
||||
import TaskSolutionTypeSelector from './components/TaskSolutionTypeSelector';
|
||||
import TaskFileAttachments from './components/TaskFileAttachments';
|
||||
|
||||
interface TaskCreationModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onCreateTask: (task: Partial<Task>) => void;
|
||||
taskCount: number;
|
||||
}
|
||||
|
||||
const TaskCreationModal: React.FC<TaskCreationModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
onCreateTask,
|
||||
taskCount
|
||||
}) => {
|
||||
const [number, setNumber] = useState(`${taskCount + 1}`);
|
||||
const [description, setDescription] = useState('');
|
||||
const [requirements, setRequirements] = useState('');
|
||||
const [solutionType, setSolutionType] = useState<'input' | 'file' | 'code'>('input');
|
||||
const [attachedFiles, setAttachedFiles] = useState<File[]>([]);
|
||||
|
||||
const handleSubmit = () => {
|
||||
const newTask: Partial<Task> = {
|
||||
number,
|
||||
description,
|
||||
requirements: requirements || undefined,
|
||||
solutionType,
|
||||
attachments: attachedFiles.map(file => file.name)
|
||||
};
|
||||
|
||||
onCreateTask(newTask);
|
||||
|
||||
setNumber(`${taskCount + 1}`);
|
||||
setDescription('');
|
||||
setRequirements('');
|
||||
setSolutionType('input');
|
||||
setAttachedFiles([]);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||
<DialogContent className="sm:max-w-[600px] font-hse-sans">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-xl">Создание новой задачи</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="grid gap-4 py-4">
|
||||
<TaskNumberField
|
||||
number={number}
|
||||
onChange={setNumber}
|
||||
/>
|
||||
|
||||
<TaskDescriptionField
|
||||
description={description}
|
||||
onChange={setDescription}
|
||||
/>
|
||||
|
||||
<TaskRequirementsField
|
||||
requirements={requirements}
|
||||
onChange={setRequirements}
|
||||
/>
|
||||
|
||||
<TaskSolutionTypeSelector
|
||||
solutionType={solutionType}
|
||||
onChange={setSolutionType}
|
||||
/>
|
||||
|
||||
<TaskFileAttachments
|
||||
files={attachedFiles}
|
||||
onChange={setAttachedFiles}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" onClick={onClose}>
|
||||
Отмена
|
||||
</Button>
|
||||
<Button type="button" onClick={handleSubmit}>
|
||||
Создать задачу
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default TaskCreationModal;
|
||||
+1
-1
@@ -15,7 +15,7 @@ const CompetitionHeader: React.FC<CompetitionHeaderProps> = ({
|
||||
competitionId
|
||||
}) => {
|
||||
return (
|
||||
<header className="bg-white shadow-sm">
|
||||
<header className="bg-white shadow-sm sticky top-0 z-30 w-full">
|
||||
<div className="mx-auto max-w-6xl px-4">
|
||||
<div className="py-4 text-center">
|
||||
<h1 className="font-hse-sans text-xl font-semibold">
|
||||
|
||||
@@ -1,43 +1,88 @@
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useParams, Navigate } from "react-router-dom";
|
||||
import { Task } from "@/shared/types";
|
||||
import { mockSolutions, mockTasks } from "@/shared/mocks/mocks";
|
||||
import { Task, TaskStatus } from "@/shared/types";
|
||||
import { mockSolutions } from "@/shared/mocks/mocks"; // Keep mocks for solutions for now
|
||||
import CompetitionHeader from "./components/CompetitionHeader";
|
||||
import TaskContent from "./components/TaskContent";
|
||||
import TaskSolution from "./modules/TaskSolution";
|
||||
import { getCompetitionTasks } from "@/shared/api/session";
|
||||
import { Loader2 } from "lucide-react";
|
||||
|
||||
const CompetitionSession = () => {
|
||||
const { id, taskId } = useParams<{ id: string; taskId?: string }>();
|
||||
const [tasks] = useState<Task[]>(mockTasks);
|
||||
const [tasks, setTasks] = useState<Task[]>([]);
|
||||
const [answer, setAnswer] = useState("");
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const competitionId = id || "";
|
||||
|
||||
useEffect(() => {
|
||||
const fetchTasks = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const fetchedTasks = await getCompetitionTasks(competitionId);
|
||||
setTasks(fetchedTasks);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch tasks:", err);
|
||||
setError("Не удалось загрузить задания. Пожалуйста, попробуйте позже.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (competitionId) {
|
||||
fetchTasks();
|
||||
}
|
||||
}, [competitionId]);
|
||||
|
||||
const currentTask = tasks.find(t => t.id === taskId) || null;
|
||||
|
||||
if (!taskId && tasks.length > 0) {
|
||||
return <Navigate to={`/competition/${id}/tasks/${tasks[0].id}`} replace />;
|
||||
if (!taskId && tasks.length > 0 && !loading) {
|
||||
return <Navigate to={`/competition/${competitionId}/tasks/${tasks[0].id}`} replace />;
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
console.log("Submitting answer:", answer);
|
||||
const handleSubmit = async () => {
|
||||
if (!currentTask || !competitionId) return;
|
||||
|
||||
try {
|
||||
|
||||
console.log("Solution submitted successfully");
|
||||
} catch (err) {
|
||||
console.error("Failed to submit solution:", err);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen">
|
||||
<CompetitionHeader
|
||||
title="Олимпиада DANO 2025. Индивидуальный этап"
|
||||
tasks={tasks}
|
||||
competitionId={id || ""}
|
||||
competitionId={competitionId}
|
||||
/>
|
||||
|
||||
<main className="flex-1 bg-[#F8F8F8] pb-8">
|
||||
<div className="max-w-6xl mx-auto px-4 py-6">
|
||||
{currentTask ? (
|
||||
{loading ? (
|
||||
<div className="flex flex-col items-center justify-center h-40 bg-white rounded-lg">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-gray-400 mb-2" />
|
||||
<p className="font-hse-sans text-gray-500">
|
||||
Загрузка заданий...
|
||||
</p>
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="flex justify-center items-center h-40 bg-white rounded-lg">
|
||||
<p className="font-hse-sans text-red-500">
|
||||
{error}
|
||||
</p>
|
||||
</div>
|
||||
) : currentTask ? (
|
||||
<div className="flex flex-col md:flex-row gap-6 font-hse-sans">
|
||||
<TaskContent task={currentTask} />
|
||||
<TaskSolution
|
||||
task={currentTask}
|
||||
solutions={mockSolutions}
|
||||
solutions={mockSolutions} // Still using mock solutions
|
||||
answer={answer}
|
||||
setAnswer={setAnswer}
|
||||
onSubmit={handleSubmit}
|
||||
@@ -46,7 +91,7 @@ const CompetitionSession = () => {
|
||||
) : (
|
||||
<div className="flex justify-center items-center h-40 bg-white rounded-lg">
|
||||
<p className="font-hse-sans text-gray-500">
|
||||
Загрузка задания...
|
||||
Задание не найдено
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -1,26 +0,0 @@
|
||||
import { cn } from "@/shared/lib/utils";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
interface CompetitionTagProps {
|
||||
label: string;
|
||||
variant: 'olympics' | 'status';
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const CompetitionTag = ({ label, variant, className }: CompetitionTagProps) => {
|
||||
return (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className={cn(
|
||||
"text-xs font-medium",
|
||||
variant === 'olympics' && "bg-yellow-400 text-yellow-800 hover:bg-yellow-500 font-hse-sans",
|
||||
variant === 'status' && "bg-black text-white hover:bg-gray-800 font-hse-sans",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
|
||||
export default CompetitionTag
|
||||
@@ -0,0 +1,398 @@
|
||||
import React from "react";
|
||||
import { User } from "lucide-react";
|
||||
import { useUserStore } from "@/shared/stores/user";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
|
||||
const UserProfile = () => {
|
||||
const user = useUserStore((state) => state.user);
|
||||
|
||||
return (
|
||||
<div className="container mx-auto max-w-5xl px-4 py-8">
|
||||
<div className="mb-8 flex items-center gap-6">
|
||||
<div className="flex h-24 w-24 items-center justify-center rounded-full bg-blue-100">
|
||||
{user?.avatar ? (
|
||||
<img
|
||||
src={user.avatar}
|
||||
alt={user.username}
|
||||
className="h-24 w-24 rounded-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<User size={40} className="text-blue-500" />
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="font-hse-sans text-3xl font-bold">{user?.username}</h1>
|
||||
<p className="font-hse-sans text-gray-500">
|
||||
{user?.role || "Участник"} • На платформе с{" "}
|
||||
{new Date(user?.createdAt || Date.now()).toLocaleDateString("ru-RU", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="info" className="w-full">
|
||||
<TabsList className="mb-6 w-full justify-start">
|
||||
<TabsTrigger value="info" className="font-hse-sans">
|
||||
Информация
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="statistics" className="font-hse-sans">
|
||||
Статистика
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="achievements" className="font-hse-sans">
|
||||
Достижения
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="info">
|
||||
<UserInfo />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="statistics">
|
||||
<UserStatistics />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="achievements">
|
||||
<UserAchievements />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const UserInfo = () => {
|
||||
const user = useUserStore((state) => state.user);
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="font-hse-sans">Личная информация</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
<div>
|
||||
<h3 className="font-hse-sans text-sm font-medium text-gray-500">
|
||||
Полное имя
|
||||
</h3>
|
||||
<p className="font-hse-sans mt-1">
|
||||
{user?.fullName || "Не указано"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-hse-sans text-sm font-medium text-gray-500">
|
||||
Email
|
||||
</h3>
|
||||
<p className="font-hse-sans mt-1">{user?.email || "Не указано"}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-hse-sans text-sm font-medium text-gray-500">
|
||||
Учебное заведение
|
||||
</h3>
|
||||
<p className="font-hse-sans mt-1">
|
||||
{user?.university || "Не указано"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-hse-sans text-sm font-medium text-gray-500">
|
||||
Специализация
|
||||
</h3>
|
||||
<p className="font-hse-sans mt-1">
|
||||
{user?.specialization || "Не указано"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-hse-sans text-sm font-medium text-gray-500">
|
||||
О себе
|
||||
</h3>
|
||||
<p className="font-hse-sans mt-1">
|
||||
{user?.bio || "Пользователь пока не добавил информацию о себе."}
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
const UserStatistics = () => {
|
||||
// Mock statistics data
|
||||
const statistics = {
|
||||
totalCompetitions: 12,
|
||||
completedCompetitions: 8,
|
||||
totalScore: 756,
|
||||
averageScore: 94.5,
|
||||
bestResult: {
|
||||
competition: "Олимпиада DANO 2024",
|
||||
place: 3,
|
||||
score: 97,
|
||||
},
|
||||
totalTasks: 86,
|
||||
solvedTasks: 72,
|
||||
tasksByStatus: {
|
||||
correct: 58,
|
||||
partial: 14,
|
||||
wrong: 9,
|
||||
unattempted: 5,
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<StatCard
|
||||
title="Всего соревнований"
|
||||
value={statistics.totalCompetitions}
|
||||
/>
|
||||
<StatCard
|
||||
title="Завершено соревнований"
|
||||
value={statistics.completedCompetitions}
|
||||
/>
|
||||
<StatCard title="Всего баллов" value={statistics.totalScore} />
|
||||
<StatCard
|
||||
title="Средний балл"
|
||||
value={statistics.averageScore.toFixed(1)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="font-hse-sans">Лучший результат</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
<p className="font-hse-sans text-lg font-medium">
|
||||
{statistics.bestResult.competition}
|
||||
</p>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-hse-sans text-gray-500">Место</span>
|
||||
<span className="font-hse-sans font-medium">
|
||||
{statistics.bestResult.place}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-hse-sans text-gray-500">Баллы</span>
|
||||
<span className="font-hse-sans font-medium">
|
||||
{statistics.bestResult.score}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="font-hse-sans">Решение задач</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="mb-4 space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-hse-sans">Всего задач</span>
|
||||
<span className="font-hse-sans font-medium">
|
||||
{statistics.totalTasks}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-hse-sans">Решено задач</span>
|
||||
<span className="font-hse-sans font-medium">
|
||||
{statistics.solvedTasks}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-hse-sans text-sm font-medium">
|
||||
Статусы решений
|
||||
</h4>
|
||||
<div className="h-6 w-full overflow-hidden rounded-full bg-gray-200">
|
||||
<div className="flex h-full">
|
||||
<div
|
||||
className="bg-green-500"
|
||||
style={{
|
||||
width: `${
|
||||
(statistics.tasksByStatus.correct /
|
||||
statistics.totalTasks) *
|
||||
100
|
||||
}%`,
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
className="bg-yellow-500"
|
||||
style={{
|
||||
width: `${
|
||||
(statistics.tasksByStatus.partial /
|
||||
statistics.totalTasks) *
|
||||
100
|
||||
}%`,
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
className="bg-red-500"
|
||||
style={{
|
||||
width: `${
|
||||
(statistics.tasksByStatus.wrong /
|
||||
statistics.totalTasks) *
|
||||
100
|
||||
}%`,
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
className="bg-gray-300"
|
||||
style={{
|
||||
width: `${
|
||||
(statistics.tasksByStatus.unattempted /
|
||||
statistics.totalTasks) *
|
||||
100
|
||||
}%`,
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between text-xs">
|
||||
<div className="flex items-center">
|
||||
<div className="mr-1 h-3 w-3 rounded-full bg-green-500"></div>
|
||||
<span className="font-hse-sans">
|
||||
Верно ({statistics.tasksByStatus.correct})
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="mr-1 h-3 w-3 rounded-full bg-yellow-500"></div>
|
||||
<span className="font-hse-sans">
|
||||
Частично ({statistics.tasksByStatus.partial})
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="mr-1 h-3 w-3 rounded-full bg-red-500"></div>
|
||||
<span className="font-hse-sans">
|
||||
Неверно ({statistics.tasksByStatus.wrong})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
const StatCard = ({ title, value }: { title: string; value: number | string }) => (
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<p className="font-hse-sans text-sm text-gray-500">{title}</p>
|
||||
<p className="font-hse-sans mt-2 text-3xl font-bold">{value}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
const UserAchievements = () => {
|
||||
const achievements = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Первые шаги",
|
||||
description: "Участие в первом соревновании",
|
||||
imageUrl: "/achievements/first-steps.png",
|
||||
unlocked: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Восходящая звезда",
|
||||
description: "Победа в соревновании",
|
||||
imageUrl: "/achievements/rising-star.png",
|
||||
unlocked: true,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Мастер кода",
|
||||
description: "Решите 50 задач на программирование",
|
||||
imageUrl: "/achievements/code-master.png",
|
||||
unlocked: true,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Бронзовый призер",
|
||||
description: "Займите 3 место в соревновании",
|
||||
imageUrl: "/achievements/bronze.png",
|
||||
unlocked: true,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "Серебряный призер",
|
||||
description: "Займите 2 место в соревновании",
|
||||
imageUrl: "/achievements/silver.png",
|
||||
unlocked: false,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "Золотой призер",
|
||||
description: "Займите 1 место в соревновании",
|
||||
imageUrl: "/achievements/gold.png",
|
||||
unlocked: false,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: "Марафонец",
|
||||
description: "Участвуйте в 10 соревнованиях",
|
||||
imageUrl: "/achievements/marathon.png",
|
||||
unlocked: false,
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: "Идеальное решение",
|
||||
description: "Получите максимальные баллы за все задачи в соревновании",
|
||||
imageUrl: "/achievements/perfect.png",
|
||||
unlocked: false,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h2 className="font-hse-sans text-xl font-semibold">
|
||||
Разблокировано {achievements.filter(a => a.unlocked).length} из {achievements.length}
|
||||
</h2>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4">
|
||||
{achievements.map((achievement) => (
|
||||
<div
|
||||
key={achievement.id}
|
||||
className={`flex flex-col items-center justify-center rounded-lg p-4 text-center ${
|
||||
achievement.unlocked ? "" : "opacity-40"
|
||||
}`}
|
||||
>
|
||||
<div className="mb-3 flex h-20 w-20 items-center justify-center rounded-full bg-blue-100">
|
||||
{achievement.imageUrl ? (
|
||||
<div className="relative h-16 w-16 overflow-hidden rounded-full">
|
||||
<div
|
||||
className="h-full w-full bg-cover bg-center"
|
||||
style={{ backgroundImage: `url(${achievement.imageUrl})` }}
|
||||
></div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-blue-200 text-blue-700">
|
||||
<span className="font-hse-sans text-xl font-bold">
|
||||
{achievement.name.substring(0, 1)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<h3 className="font-hse-sans text-sm font-medium">
|
||||
{achievement.name}
|
||||
</h3>
|
||||
<p className="font-hse-sans mt-1 text-xs text-gray-500">
|
||||
{achievement.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserProfile;
|
||||
@@ -0,0 +1,45 @@
|
||||
const UserAchievements = () => {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h2 className="font-hse-sans text-xl font-semibold">
|
||||
Разблокировано {achievements.filter(a => a.unlocked).length} из {achievements.length}
|
||||
</h2>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4">
|
||||
{achievements.map((achievement) => (
|
||||
<div
|
||||
key={achievement.id}
|
||||
className={`flex flex-col items-center justify-center rounded-lg p-4 text-center ${
|
||||
achievement.unlocked ? "" : "opacity-40"
|
||||
}`}
|
||||
>
|
||||
<div className="mb-3 flex h-20 w-20 items-center justify-center rounded-full bg-blue-100">
|
||||
{achievement.imageUrl ? (
|
||||
<div className="relative h-16 w-16 overflow-hidden rounded-full">
|
||||
<div
|
||||
className="h-full w-full bg-cover bg-center"
|
||||
style={{ backgroundImage: `url(${achievement.imageUrl})` }}
|
||||
></div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-blue-200 text-blue-700">
|
||||
<span className="font-hse-sans text-xl font-bold">
|
||||
{achievement.name.substring(0, 1)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<h3 className="font-hse-sans text-sm font-medium">
|
||||
{achievement.name}
|
||||
</h3>
|
||||
<p className="font-hse-sans mt-1 text-xs text-gray-500">
|
||||
{achievement.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserAchievements
|
||||
@@ -24,7 +24,6 @@ export const authFetch = ofetch.create({
|
||||
export const apiFetch = ofetch.create({
|
||||
baseURL: BASE_URL,
|
||||
async onRequest({ options }) {
|
||||
console.log(import.meta.env.VITE_API_ENDPOINT);
|
||||
options.headers.set("Authorization", "Bearer " + getToken());
|
||||
},
|
||||
async onResponseError({ response }) {
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
import { apiFetch } from './index';
|
||||
import { Task, TaskStatus } from '@/shared/types';
|
||||
|
||||
interface ApiTask {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
type: 'input' | 'file' | 'code';
|
||||
in_competition_position: number;
|
||||
points: number;
|
||||
status?: TaskStatus;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetches tasks for a specific competition
|
||||
* @param competitionId - The ID of the competition
|
||||
* @returns Promise with an array of tasks in the application's format
|
||||
*/
|
||||
export const getCompetitionTasks = async (competitionId: string): Promise<Task[]> => {
|
||||
try {
|
||||
const apiTasks: ApiTask[] = await apiFetch(`/api/v1/competitions/${competitionId}/tasks`);
|
||||
|
||||
// Transform API tasks to application Task format
|
||||
return apiTasks.map(apiTask => transformApiTask(apiTask));
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch competition tasks:', error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Transforms an API task to the application's Task format
|
||||
*/
|
||||
const transformApiTask = (apiTask: ApiTask): Task => {
|
||||
return {
|
||||
id: apiTask.id,
|
||||
number: String(apiTask.in_competition_position),
|
||||
status: apiTask.status || TaskStatus.Uncleared,
|
||||
solutionType: apiTask.type,
|
||||
description: apiTask.description,
|
||||
maxScore: apiTask.points
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
// export const submitTaskSolution = async (
|
||||
// competitionId: string,
|
||||
// taskId: string,
|
||||
// solution: string | File
|
||||
// ): Promise<void> => {
|
||||
// const endpoint = `/api/v1/competitions/${competitionId}/tasks/${taskId}/submit`;
|
||||
|
||||
// // Handle different solution types
|
||||
// if (typeof solution === 'string') {
|
||||
// // Text or code solution
|
||||
// await apiFetch(endpoint, {
|
||||
// method: 'POST',
|
||||
// body: { answer: solution }
|
||||
// });
|
||||
// } else {
|
||||
// // File solution
|
||||
// const formData = new FormData();
|
||||
// formData.append('file', solution);
|
||||
|
||||
// await apiFetch(endpoint, {
|
||||
// method: 'POST',
|
||||
// body: formData
|
||||
// });
|
||||
// }
|
||||
// };
|
||||
|
||||
/**
|
||||
* Gets the status of a task submission
|
||||
* This would be used to poll for updates after submission
|
||||
*/
|
||||
// export const getTaskSubmissionStatus = async (
|
||||
// competitionId: string,
|
||||
// taskId: string
|
||||
// ): Promise<TaskStatus> => {
|
||||
// const response = await apiFetch(`/api/v1/competitions/${competitionId}/tasks/${taskId}/status`);
|
||||
// return response.status;
|
||||
// };
|
||||
@@ -57,49 +57,70 @@ const mockTasks: Task[] = [
|
||||
id: "1",
|
||||
number: "1.1",
|
||||
status: TaskStatus.Uncleared,
|
||||
solutionType: "input"
|
||||
solutionType: "input",
|
||||
description: "123",
|
||||
maxScore: 10,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
number: "1.2",
|
||||
status: TaskStatus.Checking,
|
||||
solutionType: "file"
|
||||
solutionType: "file",
|
||||
description: "123",
|
||||
maxScore: 20,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
number: "1.3",
|
||||
status: TaskStatus.Correct,
|
||||
solutionType: "code"
|
||||
solutionType: "code",
|
||||
description: "123",
|
||||
maxScore: 20,
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
number: "2.1",
|
||||
status: TaskStatus.Partial,
|
||||
solutionType: "input"
|
||||
solutionType: "input",
|
||||
description: "123",
|
||||
maxScore: 20,
|
||||
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
number: "2.2",
|
||||
status: TaskStatus.Wrong,
|
||||
solutionType: "file"
|
||||
solutionType: "file",
|
||||
description: "123",
|
||||
maxScore: 20,
|
||||
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
number: "2.3",
|
||||
status: TaskStatus.Uncleared,
|
||||
solutionType: "code"
|
||||
solutionType: "code",
|
||||
description: "123",
|
||||
maxScore: 20,
|
||||
|
||||
},
|
||||
{
|
||||
id: "7",
|
||||
number: "3.1",
|
||||
status: TaskStatus.Checking,
|
||||
solutionType: "file"
|
||||
solutionType: "file",
|
||||
description: "123",
|
||||
maxScore: 20,
|
||||
|
||||
},
|
||||
{
|
||||
id: "8",
|
||||
number: "3.2",
|
||||
status: TaskStatus.Correct,
|
||||
solutionType: "input"
|
||||
solutionType: "input",
|
||||
description: "123",
|
||||
maxScore: 20,
|
||||
|
||||
},
|
||||
];
|
||||
|
||||
@@ -132,5 +153,84 @@ const mockSolutions: Solution[] = [
|
||||
|
||||
];
|
||||
|
||||
const mockAchievements = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Первые шаги",
|
||||
description: "Участие в первом соревновании",
|
||||
imageUrl: "/achievements/first-steps.png",
|
||||
unlocked: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Восходящая звезда",
|
||||
description: "Победа в соревновании",
|
||||
imageUrl: "/achievements/rising-star.png",
|
||||
unlocked: true,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Мастер кода",
|
||||
description: "Решите 50 задач на программирование",
|
||||
imageUrl: "/achievements/code-master.png",
|
||||
unlocked: true,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Бронзовый призер",
|
||||
description: "Займите 3 место в соревновании",
|
||||
imageUrl: "/achievements/bronze.png",
|
||||
unlocked: true,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "Серебряный призер",
|
||||
description: "Займите 2 место в соревновании",
|
||||
imageUrl: "/achievements/silver.png",
|
||||
unlocked: false,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "Золотой призер",
|
||||
description: "Займите 1 место в соревновании",
|
||||
imageUrl: "/achievements/gold.png",
|
||||
unlocked: false,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: "Марафонец",
|
||||
description: "Участвуйте в 10 соревнованиях",
|
||||
imageUrl: "/achievements/marathon.png",
|
||||
unlocked: false,
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: "Идеальное решение",
|
||||
description: "Получите максимальные баллы за все задачи в соревновании",
|
||||
imageUrl: "/achievements/perfect.png",
|
||||
unlocked: false,
|
||||
},
|
||||
];
|
||||
|
||||
export { mockCompetitions, mockTasks, mockSolutions };
|
||||
|
||||
const mockStatistics = {
|
||||
totalCompetitions: 12,
|
||||
completedCompetitions: 8,
|
||||
totalScore: 756,
|
||||
averageScore: 94.5,
|
||||
bestResult: {
|
||||
competition: "Олимпиада DANO 2024",
|
||||
place: 3,
|
||||
score: 97,
|
||||
},
|
||||
totalTasks: 86,
|
||||
solvedTasks: 72,
|
||||
tasksByStatus: {
|
||||
correct: 58,
|
||||
partial: 14,
|
||||
wrong: 9,
|
||||
unattempted: 5,
|
||||
},
|
||||
};
|
||||
|
||||
export { mockCompetitions, mockTasks, mockSolutions, mockAchievements, mockStatistics };
|
||||
|
||||
@@ -30,11 +30,16 @@ interface Solution {
|
||||
score?: number,
|
||||
maxScore?: number,
|
||||
}
|
||||
|
||||
interface Task {
|
||||
id: string;
|
||||
number: string;
|
||||
description: string;
|
||||
maxScore: number;
|
||||
status: TaskStatus;
|
||||
solutionType: SolutionType;
|
||||
requirements?: string;
|
||||
attachments?: string[];
|
||||
}
|
||||
|
||||
export { CompetitionStatus, TaskStatus };
|
||||
|
||||
Reference in New Issue
Block a user