mirror of
https://gitlab.com/megazordpobeda/DataRush.git
synced 2026-05-22 23:17:09 +00:00
Merge branch 'master' of gitlab.prodcontest.ru:team-15/project
This commit is contained in:
@@ -15,6 +15,7 @@ def analyze_data_task(self, submission_id):
|
|||||||
submission = CompetitionTaskSubmission.objects.get(id=submission_id)
|
submission = CompetitionTaskSubmission.objects.get(id=submission_id)
|
||||||
try:
|
try:
|
||||||
code = submission.content.read()
|
code = submission.content.read()
|
||||||
|
print("YA SSF")
|
||||||
files = [
|
files = [
|
||||||
{
|
{
|
||||||
"url": (
|
"url": (
|
||||||
@@ -32,7 +33,7 @@ def analyze_data_task(self, submission_id):
|
|||||||
f"{settings.CHECKER_API_ENDPOINT}/execute",
|
f"{settings.CHECKER_API_ENDPOINT}/execute",
|
||||||
json={
|
json={
|
||||||
"files": files,
|
"files": files,
|
||||||
"code": base64.encode(code),
|
"code": base64.b64encode(code).decode("utf-8"),
|
||||||
"answer_file_path": submission.task.answer_file_path,
|
"answer_file_path": submission.task.answer_file_path,
|
||||||
"expected_hash": hashlib.sha256(
|
"expected_hash": hashlib.sha256(
|
||||||
submission.task.correct_answer_file.read()
|
submission.task.correct_answer_file.read()
|
||||||
@@ -42,6 +43,7 @@ def analyze_data_task(self, submission_id):
|
|||||||
)
|
)
|
||||||
response.raise_for_status()
|
response.raise_for_status()
|
||||||
result = response.json()
|
result = response.json()
|
||||||
|
print("HOHOHO")
|
||||||
|
|
||||||
submission.stdout.save("output.txt", ContentFile(result["output"]))
|
submission.stdout.save("output.txt", ContentFile(result["output"]))
|
||||||
submission.result = {
|
submission.result = {
|
||||||
|
|||||||
@@ -0,0 +1,134 @@
|
|||||||
|
// src/components/competition/CompetitionResultsModal.tsx
|
||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogDescription,
|
||||||
|
} from "@/components/ui/dialog";
|
||||||
|
import { Loader2 } from 'lucide-react';
|
||||||
|
|
||||||
|
export interface CompetitionResult {
|
||||||
|
task_name: string;
|
||||||
|
result: number;
|
||||||
|
max_points: number
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CompetitionResultsModalProps {
|
||||||
|
competitionTitle: string;
|
||||||
|
results: CompetitionResult[] | undefined;
|
||||||
|
isLoading: boolean;
|
||||||
|
error: unknown;
|
||||||
|
isOpen: boolean;
|
||||||
|
onOpenChange: (open: boolean) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const CompetitionResultsModal: React.FC<CompetitionResultsModalProps> = ({
|
||||||
|
competitionTitle,
|
||||||
|
results,
|
||||||
|
isLoading,
|
||||||
|
error,
|
||||||
|
isOpen,
|
||||||
|
onOpenChange,
|
||||||
|
}) => {
|
||||||
|
const renderResultValue = (result: number, maxPoints: number) => {
|
||||||
|
if (result === -1) {
|
||||||
|
return (
|
||||||
|
<span className="font-semibold" style={{
|
||||||
|
color: 'var(--color-task-text-checking)',
|
||||||
|
backgroundColor: 'var(--color-task-checking)',
|
||||||
|
padding: '4px 8px',
|
||||||
|
borderRadius: '4px'
|
||||||
|
}}>
|
||||||
|
На проверке
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
} else if (result === -2) {
|
||||||
|
return (
|
||||||
|
<span className="font-semibold" style={{
|
||||||
|
color: 'var(--color-task-text-uncleared)',
|
||||||
|
backgroundColor: 'var(--color-task-uncleared)',
|
||||||
|
padding: '4px 8px',
|
||||||
|
borderRadius: '4px'
|
||||||
|
}}>
|
||||||
|
Нет ответа
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
} else if (result === 0) {
|
||||||
|
return (
|
||||||
|
<span className="font-semibold" style={{
|
||||||
|
color: 'var(--color-task-text-wrong)',
|
||||||
|
backgroundColor: 'var(--color-task-wrong)',
|
||||||
|
padding: '4px 8px',
|
||||||
|
borderRadius: '4px'
|
||||||
|
}}>
|
||||||
|
Неверно (0/{maxPoints})
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
} else if (result < maxPoints) {
|
||||||
|
return (
|
||||||
|
<span className="font-semibold" style={{
|
||||||
|
color: 'var(--color-task-text-partial)',
|
||||||
|
backgroundColor: 'var(--color-task-partial)',
|
||||||
|
padding: '4px 8px',
|
||||||
|
borderRadius: '4px'
|
||||||
|
}}>
|
||||||
|
Частично верно ({result}/{maxPoints})
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
<span className="font-semibold" style={{
|
||||||
|
color: 'var(--color-task-text-correct)',
|
||||||
|
backgroundColor: 'var(--color-task-correct)',
|
||||||
|
padding: '4px 8px',
|
||||||
|
borderRadius: '4px'
|
||||||
|
}}>
|
||||||
|
Верно ({result}/{maxPoints})
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={isOpen} onOpenChange={onOpenChange}>
|
||||||
|
<DialogContent className="sm:max-w-md md:max-w-lg">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Результаты</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Ваши результаты по соревнованию "{competitionTitle}"
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<div className="mt-4 space-y-4">
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="flex justify-center py-8">
|
||||||
|
<Loader2 className="h-8 w-8 animate-spin text-gray-400" />
|
||||||
|
</div>
|
||||||
|
) : error ? (
|
||||||
|
<div className="text-center py-6 text-red-500">
|
||||||
|
Произошла ошибка при загрузке результатов
|
||||||
|
</div>
|
||||||
|
) : results && results.length > 0 ? (
|
||||||
|
results.map((result, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="flex flex-col md:flex-row justify-between items-start md:items-center p-4 bg-gray-50 rounded-lg border"
|
||||||
|
>
|
||||||
|
<div className="font-medium mb-2 md:mb-0">{result.task_name}</div>
|
||||||
|
<div className="text-right">
|
||||||
|
{renderResultValue(result.result, result.max_points)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<div className="text-center py-6 text-gray-500">
|
||||||
|
Нет доступных результатов
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -1,20 +1,23 @@
|
|||||||
|
import { useState } from "react";
|
||||||
import { useParams, Link, useNavigate } from "react-router-dom";
|
import { useParams, Link, useNavigate } from "react-router-dom";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { ArrowLeft, Clock, Trophy, BookOpen, BarChart2, AlertCircle } from "lucide-react";
|
import { ArrowLeft, Clock, Trophy, BookOpen, AlertCircle, BarChart2 } from "lucide-react";
|
||||||
import ReactMarkdown from "react-markdown";
|
import ReactMarkdown from "react-markdown";
|
||||||
import { useQuery, useMutation } from "@tanstack/react-query";
|
import { useQuery, useMutation } from "@tanstack/react-query";
|
||||||
import { getCompetition, startCompetition } from "@/shared/api/competitions";
|
import { getCompetition, startCompetition, getCompetitionResults } from "@/shared/api/competitions";
|
||||||
import { getCompetitionTasks } from "@/shared/api/session";
|
import { getCompetitionTasks } from "@/shared/api/session";
|
||||||
import { Loading } from "@/components/ui/loading";
|
import { Loading } from "@/components/ui/loading";
|
||||||
import { CompetitionType } from "@/shared/types/competition";
|
import { CompetitionType } from "@/shared/types/competition";
|
||||||
import remarkMath from "remark-math";
|
import remarkMath from "remark-math";
|
||||||
import remarkGfm from "remark-gfm";
|
import remarkGfm from "remark-gfm";
|
||||||
import rehypeKatex from "rehype-katex";
|
import rehypeKatex from "rehype-katex";
|
||||||
|
import { CompetitionResultsModal } from "./components/CompetitionResultModal";
|
||||||
|
|
||||||
const CompetitionPage = () => {
|
const CompetitionPage = () => {
|
||||||
const { id } = useParams<{ id: string }>();
|
const { id } = useParams<{ id: string }>();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const competitionId = id || "";
|
const competitionId = id || "";
|
||||||
|
const [isResultsModalOpen, setIsResultsModalOpen] = useState(false);
|
||||||
|
|
||||||
const competitionQuery = useQuery({
|
const competitionQuery = useQuery({
|
||||||
queryKey: ["competition", competitionId],
|
queryKey: ["competition", competitionId],
|
||||||
@@ -22,6 +25,12 @@ const CompetitionPage = () => {
|
|||||||
enabled: !!competitionId,
|
enabled: !!competitionId,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const resultsQuery = useQuery({
|
||||||
|
queryKey: ["competitionResults", competitionId],
|
||||||
|
queryFn: () => getCompetitionResults(competitionId),
|
||||||
|
enabled: !!competitionId,
|
||||||
|
});
|
||||||
|
|
||||||
const startMutation = useMutation({
|
const startMutation = useMutation({
|
||||||
mutationFn: () => startCompetition(competitionId),
|
mutationFn: () => startCompetition(competitionId),
|
||||||
onSuccess: async () => {
|
onSuccess: async () => {
|
||||||
@@ -60,10 +69,10 @@ const CompetitionPage = () => {
|
|||||||
const handleStart = () => {
|
const handleStart = () => {
|
||||||
startMutation.mutate();
|
startMutation.mutate();
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleViewResults = () => {
|
const hasResults = resultsQuery.data &&
|
||||||
console.log("sorryan");
|
resultsQuery.data.length > 0 &&
|
||||||
};
|
resultsQuery.data.some(result => result.result !== -2);
|
||||||
|
|
||||||
if (competitionQuery.isLoading) {
|
if (competitionQuery.isLoading) {
|
||||||
return <Loading />;
|
return <Loading />;
|
||||||
@@ -75,15 +84,6 @@ const CompetitionPage = () => {
|
|||||||
|
|
||||||
const competition = competitionQuery.data;
|
const competition = competitionQuery.data;
|
||||||
|
|
||||||
const isCompetitionEnded = () => {
|
|
||||||
if (!competition?.end_date) return false;
|
|
||||||
|
|
||||||
const endDate = new Date(competition.end_date);
|
|
||||||
const now = new Date();
|
|
||||||
|
|
||||||
return now > endDate;
|
|
||||||
};
|
|
||||||
|
|
||||||
const isCompetitionNotStarted = () => {
|
const isCompetitionNotStarted = () => {
|
||||||
if (!competition?.start_date) return false;
|
if (!competition?.start_date) return false;
|
||||||
|
|
||||||
@@ -92,9 +92,18 @@ const CompetitionPage = () => {
|
|||||||
|
|
||||||
return now < startDate;
|
return now < startDate;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const isCompetitionEnded = () => {
|
||||||
|
if (!competition?.end_date) return false;
|
||||||
|
|
||||||
|
const endDate = new Date(competition.end_date);
|
||||||
|
const now = new Date();
|
||||||
|
|
||||||
|
return now > endDate;
|
||||||
|
};
|
||||||
|
|
||||||
const competitionEnded = isCompetitionEnded();
|
|
||||||
const competitionNotStarted = isCompetitionNotStarted();
|
const competitionNotStarted = isCompetitionNotStarted();
|
||||||
|
const competitionEnded = isCompetitionEnded();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col gap-4">
|
<div className="flex flex-col gap-4">
|
||||||
@@ -133,17 +142,17 @@ const CompetitionPage = () => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{competitionEnded && competition.type === CompetitionType.COMPETITIVE && (
|
|
||||||
<div className="bg-red-100 text-red-700 px-3 py-1 rounded-full text-sm font-medium">
|
|
||||||
Завершено
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{competitionNotStarted && competition.type === CompetitionType.COMPETITIVE && (
|
{competitionNotStarted && competition.type === CompetitionType.COMPETITIVE && (
|
||||||
<div className="bg-yellow-100 text-yellow-700 px-3 py-1 rounded-full text-sm font-medium">
|
<div className="bg-yellow-100 text-yellow-700 px-3 py-1 rounded-full text-sm font-medium">
|
||||||
Скоро начнется
|
Скоро начнется
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{competitionEnded && competition.type === CompetitionType.COMPETITIVE && (
|
||||||
|
<div className="bg-red-100 text-red-700 px-3 py-1 rounded-full text-sm font-medium">
|
||||||
|
Завершено
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h1 className="text-[34px] leading-11 font-semibold text-balance">
|
<h1 className="text-[34px] leading-11 font-semibold text-balance">
|
||||||
@@ -178,17 +187,8 @@ const CompetitionPage = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="w-full *:w-full md:w-96">
|
<div className="w-full *:w-full md:w-96 flex flex-col gap-3">
|
||||||
{competitionEnded && competition.type === CompetitionType.COMPETITIVE ? (
|
{competitionNotStarted && competition.type === CompetitionType.COMPETITIVE ? (
|
||||||
<Button
|
|
||||||
size={"lg"}
|
|
||||||
onClick={handleViewResults}
|
|
||||||
className="bg-indigo-600 hover:bg-indigo-700"
|
|
||||||
>
|
|
||||||
<BarChart2 size={18} className="mr-2" />
|
|
||||||
Смотреть результаты
|
|
||||||
</Button>
|
|
||||||
) : competitionNotStarted && competition.type === CompetitionType.COMPETITIVE ? (
|
|
||||||
<Button
|
<Button
|
||||||
size={"lg"}
|
size={"lg"}
|
||||||
disabled={true}
|
disabled={true}
|
||||||
@@ -197,7 +197,7 @@ const CompetitionPage = () => {
|
|||||||
<AlertCircle size={18} className="mr-2" />
|
<AlertCircle size={18} className="mr-2" />
|
||||||
Скоро начнется
|
Скоро начнется
|
||||||
</Button>
|
</Button>
|
||||||
) : (
|
) : !competitionEnded ? (
|
||||||
<Button
|
<Button
|
||||||
size={"lg"}
|
size={"lg"}
|
||||||
onClick={handleStart}
|
onClick={handleStart}
|
||||||
@@ -205,10 +205,35 @@ const CompetitionPage = () => {
|
|||||||
>
|
>
|
||||||
{startMutation.isPending ? "Загрузка..." : "Приступить к выполнению"}
|
{startMutation.isPending ? "Загрузка..." : "Приступить к выполнению"}
|
||||||
</Button>
|
</Button>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{hasResults && (
|
||||||
|
<Button
|
||||||
|
size={"lg"}
|
||||||
|
onClick={() => setIsResultsModalOpen(true)}
|
||||||
|
>
|
||||||
|
<BarChart2 size={18} className="mr-2" />
|
||||||
|
Посмотреть результаты
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{competitionEnded && !hasResults && competition.type === CompetitionType.COMPETITIVE && !resultsQuery.isLoading && (
|
||||||
|
<div className="text-center p-4 border rounded-md bg-gray-50">
|
||||||
|
<p className="text-gray-600">Соревнование завершено. Увы</p>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<CompetitionResultsModal
|
||||||
|
competitionTitle={competition.title}
|
||||||
|
results={resultsQuery.data}
|
||||||
|
isLoading={resultsQuery.isLoading}
|
||||||
|
error={resultsQuery.error}
|
||||||
|
isOpen={isResultsModalOpen}
|
||||||
|
onOpenChange={setIsResultsModalOpen}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
+59
-18
@@ -1,8 +1,9 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import { Link, useNavigate } from 'react-router-dom';
|
import { Link, useNavigate, useParams } from 'react-router-dom';
|
||||||
import { Task } from '@/shared/types/task';
|
import { Task } from '@/shared/types/task';
|
||||||
import { ArrowLeft, Clock } from 'lucide-react';
|
import { ArrowLeft } from 'lucide-react';
|
||||||
import { CompetitionType } from '@/shared/types/competition';
|
import { CompetitionType } from '@/shared/types/competition';
|
||||||
|
import { CompetitionResult } from '@/shared/types/competition';
|
||||||
|
|
||||||
interface CompetitionHeaderProps {
|
interface CompetitionHeaderProps {
|
||||||
title: string;
|
title: string;
|
||||||
@@ -11,8 +12,9 @@ interface CompetitionHeaderProps {
|
|||||||
setAnswer: (value: string) => void;
|
setAnswer: (value: string) => void;
|
||||||
setSelectedFile: (file: File | null) => void;
|
setSelectedFile: (file: File | null) => void;
|
||||||
competitionType?: CompetitionType;
|
competitionType?: CompetitionType;
|
||||||
startDate?: Date;
|
startDate?: Date | string;
|
||||||
endDate?: Date;
|
endDate?: Date | string;
|
||||||
|
taskResults?: CompetitionResult[];
|
||||||
}
|
}
|
||||||
|
|
||||||
const CompetitionHeader: React.FC<CompetitionHeaderProps> = ({
|
const CompetitionHeader: React.FC<CompetitionHeaderProps> = ({
|
||||||
@@ -23,9 +25,11 @@ const CompetitionHeader: React.FC<CompetitionHeaderProps> = ({
|
|||||||
setSelectedFile,
|
setSelectedFile,
|
||||||
competitionType,
|
competitionType,
|
||||||
startDate,
|
startDate,
|
||||||
endDate
|
endDate,
|
||||||
|
taskResults = []
|
||||||
}) => {
|
}) => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
const { taskId } = useParams<{ taskId?: string }>();
|
||||||
const [timeLeft, setTimeLeft] = useState<string>('');
|
const [timeLeft, setTimeLeft] = useState<string>('');
|
||||||
|
|
||||||
const handleTaskSelect = (taskId: string) => {
|
const handleTaskSelect = (taskId: string) => {
|
||||||
@@ -34,7 +38,7 @@ const CompetitionHeader: React.FC<CompetitionHeaderProps> = ({
|
|||||||
navigate(`/competition/${competitionId}/tasks/${taskId}`);
|
navigate(`/competition/${competitionId}/tasks/${taskId}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
const formatDate = (date?: Date) => {
|
const formatDate = (date?: Date | string) => {
|
||||||
if (!date) return '';
|
if (!date) return '';
|
||||||
|
|
||||||
const dateObj = typeof date === 'string' ? new Date(date) : date;
|
const dateObj = typeof date === 'string' ? new Date(date) : date;
|
||||||
@@ -74,6 +78,42 @@ const CompetitionHeader: React.FC<CompetitionHeaderProps> = ({
|
|||||||
return () => clearInterval(timerInterval);
|
return () => clearInterval(timerInterval);
|
||||||
}, [endDate, competitionId, navigate, competitionType]);
|
}, [endDate, competitionId, navigate, competitionType]);
|
||||||
|
|
||||||
|
const getTaskStatus = (task: Task) => {
|
||||||
|
const result = taskResults.find(r => r.task_name === task.title);
|
||||||
|
|
||||||
|
let bgColor = 'var(--color-task-uncleared)';
|
||||||
|
let textColor = 'var(--color-task-text-uncleared)';
|
||||||
|
|
||||||
|
if (result) {
|
||||||
|
if (result.result === -1) {
|
||||||
|
bgColor = 'var(--color-task-checking)';
|
||||||
|
textColor = 'var(--color-task-text-checking)';
|
||||||
|
} else if (result.result === -2) {
|
||||||
|
bgColor = 'var(--color-task-uncleared)';
|
||||||
|
textColor = 'var(--color-task-text-uncleared)';
|
||||||
|
} else if (result.result === 0) {
|
||||||
|
bgColor = 'var(--color-task-wrong)';
|
||||||
|
textColor = 'var(--color-task-text-wrong)';
|
||||||
|
} else if (result.result < result.max_points) {
|
||||||
|
bgColor = 'var(--color-task-partial)';
|
||||||
|
textColor = 'var(--color-task-text-partial)';
|
||||||
|
} else if (result.result === result.max_points) {
|
||||||
|
bgColor = 'var(--color-task-correct)';
|
||||||
|
textColor = 'var(--color-task-text-correct)';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const isActive = task.id === taskId;
|
||||||
|
const activeBorder = isActive ? 'border-2 border-blue-500' : '';
|
||||||
|
|
||||||
|
return {
|
||||||
|
backgroundColor: bgColor,
|
||||||
|
color: textColor,
|
||||||
|
className: `rounded-lg px-3 py-1.5 font-medium text-sm font-hse-sans cursor-pointer
|
||||||
|
transition-all hover:brightness-95 flex-shrink-0 ${activeBorder}`
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
const showTimeSection = competitionType === CompetitionType.COMPETITIVE && (startDate || endDate);
|
const showTimeSection = competitionType === CompetitionType.COMPETITIVE && (startDate || endDate);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -120,18 +160,19 @@ const CompetitionHeader: React.FC<CompetitionHeaderProps> = ({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center justify-center gap-4 pb-4 overflow-x-auto no-scrollbar">
|
<div className="flex items-center justify-center gap-4 pb-4 overflow-x-auto no-scrollbar">
|
||||||
{tasks.map((task) => (
|
{tasks.map((task) => {
|
||||||
<button
|
const { backgroundColor, color, className } = getTaskStatus(task);
|
||||||
key={task.id}
|
return (
|
||||||
className={`text-[var(--color-task-text-uncleared)] bg-[var(--color-task-uncleared)]
|
<button
|
||||||
rounded-lg px-3 py-1.5 font-medium text-sm font-hse-sans cursor-pointer
|
key={task.id}
|
||||||
transition-all hover:brightness-95 flex-shrink-0
|
style={{ backgroundColor, color }}
|
||||||
`}
|
className={className}
|
||||||
onClick={() => handleTaskSelect(task.id)}
|
onClick={() => handleTaskSelect(task.id)}
|
||||||
>
|
>
|
||||||
{task.in_competition_position}
|
{task.in_competition_position}
|
||||||
</button>
|
</button>
|
||||||
))}
|
);
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
import { useState, useEffect } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import { useParams, Navigate, useNavigate } from "react-router-dom";
|
import { useParams, Navigate } from "react-router-dom";
|
||||||
import CompetitionHeader from "./components/CompetitionHeader";
|
import CompetitionHeader from "./components/CompetitionHeader";
|
||||||
import TaskContent from "./components/TaskContent";
|
import TaskContent from "./components/TaskContent";
|
||||||
import TaskSolution from "./modules/TaskSolution";
|
import TaskSolution from "./modules/TaskSolution";
|
||||||
import { getCompetitionTasks, submitTaskSolution } from "@/shared/api/session";
|
import { getCompetitionTasks, submitTaskSolution } from "@/shared/api/session";
|
||||||
import { getCompetition } from "@/shared/api/competitions";
|
import { getCompetition, getCompetitionResults } from "@/shared/api/competitions";
|
||||||
import { Loader2 } from "lucide-react";
|
import { Loader2 } from "lucide-react";
|
||||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||||
import { TaskType } from "@/shared/types/task";
|
import { TaskType } from "@/shared/types/task";
|
||||||
@@ -16,7 +16,6 @@ const CompetitionSession = () => {
|
|||||||
const [isReloading, setIsReloading] = useState(false);
|
const [isReloading, setIsReloading] = useState(false);
|
||||||
const competitionId = id || "";
|
const competitionId = id || "";
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
const competitionQuery = useQuery({
|
const competitionQuery = useQuery({
|
||||||
queryKey: ["competition", competitionId],
|
queryKey: ["competition", competitionId],
|
||||||
@@ -30,6 +29,12 @@ const CompetitionSession = () => {
|
|||||||
enabled: !!competitionId,
|
enabled: !!competitionId,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const resultsQuery = useQuery({
|
||||||
|
queryKey: ["competitionResults", competitionId],
|
||||||
|
queryFn: () => getCompetitionResults(competitionId),
|
||||||
|
enabled: !!competitionId,
|
||||||
|
});
|
||||||
|
|
||||||
const submitMutation = useMutation({
|
const submitMutation = useMutation({
|
||||||
mutationFn: () => {
|
mutationFn: () => {
|
||||||
if (!currentTask || !competitionId) throw new Error("Missing task or competition ID");
|
if (!currentTask || !competitionId) throw new Error("Missing task or competition ID");
|
||||||
@@ -47,10 +52,14 @@ const CompetitionSession = () => {
|
|||||||
queryKey: ['solutionHistory', competitionId, taskId]
|
queryKey: ['solutionHistory', competitionId, taskId]
|
||||||
});
|
});
|
||||||
|
|
||||||
|
queryClient.invalidateQueries({
|
||||||
|
queryKey: ['competitionResults', competitionId]
|
||||||
|
});
|
||||||
|
|
||||||
setIsReloading(true);
|
setIsReloading(true);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
window.location.reload()
|
window.location.reload();
|
||||||
setIsReloading(false);
|
setIsReloading(false);
|
||||||
}, 2500);
|
}, 2500);
|
||||||
},
|
},
|
||||||
@@ -61,6 +70,7 @@ const CompetitionSession = () => {
|
|||||||
|
|
||||||
const competition = competitionQuery.data;
|
const competition = competitionQuery.data;
|
||||||
const tasks = tasksQuery.data || [];
|
const tasks = tasksQuery.data || [];
|
||||||
|
const results = resultsQuery.data || [];
|
||||||
const isLoading = tasksQuery.isLoading || competitionQuery.isLoading;
|
const isLoading = tasksQuery.isLoading || competitionQuery.isLoading;
|
||||||
const error = tasksQuery.error || competitionQuery.error
|
const error = tasksQuery.error || competitionQuery.error
|
||||||
? "Не удалось загрузить данные. Пожалуйста, попробуйте позже."
|
? "Не удалось загрузить данные. Пожалуйста, попробуйте позже."
|
||||||
@@ -113,6 +123,7 @@ const CompetitionSession = () => {
|
|||||||
competitionType={competition?.type}
|
competitionType={competition?.type}
|
||||||
startDate={competition?.start_date}
|
startDate={competition?.start_date}
|
||||||
endDate={competition?.end_date}
|
endDate={competition?.end_date}
|
||||||
|
taskResults={results}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<main className="flex-1 bg-[#F8F8F8] pb-8">
|
<main className="flex-1 bg-[#F8F8F8] pb-8">
|
||||||
@@ -138,6 +149,16 @@ const CompetitionSession = () => {
|
|||||||
onSubmit={handleSubmit}
|
onSubmit={handleSubmit}
|
||||||
isSubmitting={isSubmitting}
|
isSubmitting={isSubmitting}
|
||||||
/>
|
/>
|
||||||
|
{isReloading && (
|
||||||
|
<div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
|
||||||
|
<div className="bg-white p-6 rounded-lg shadow-xl text-center">
|
||||||
|
<Loader2 className="h-8 w-8 animate-spin text-blue-500 mx-auto mb-4" />
|
||||||
|
<p className="font-hse-sans text-gray-700">
|
||||||
|
Решение отправлено! Страница обновится через несколько секунд...
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex h-40 items-center justify-center rounded-lg bg-white">
|
<div className="flex h-40 items-center justify-center rounded-lg bg-white">
|
||||||
|
|||||||
-2
@@ -30,10 +30,8 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
|
|||||||
|
|
||||||
{isCleared ? (
|
{isCleared ? (
|
||||||
<Button
|
<Button
|
||||||
className="font-hse-sans flex-grow bg-green-600 hover:bg-green-700"
|
|
||||||
disabled={true}
|
disabled={true}
|
||||||
>
|
>
|
||||||
<CheckCircle className="mr-2 h-4 w-4" />
|
|
||||||
Задача сдана!
|
Задача сдана!
|
||||||
</Button>
|
</Button>
|
||||||
) : hasSubmissionsLeft ? (
|
) : hasSubmissionsLeft ? (
|
||||||
|
|||||||
@@ -0,0 +1,14 @@
|
|||||||
|
export const UserStatBlock = ({
|
||||||
|
value,
|
||||||
|
description,
|
||||||
|
}: {
|
||||||
|
value: number;
|
||||||
|
description: string;
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div className="bg-card flex flex-col items-center gap-4 rounded-xl px-5 py-8 text-center">
|
||||||
|
<h2 className="text-5xl font-bold">{value}</h2>
|
||||||
|
<p className="text-muted-foreground font-semibold">{description}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
import { UserInfo } from "./widgets/user-info";
|
import { UserInfo } from "./widgets/user-info";
|
||||||
import { UserAchievements } from "./widgets/user-achievements";
|
import { UserAchievements } from "./widgets/user-achievements";
|
||||||
import { UserStats } from "./widgets/user-stats";
|
import { UserStatsSections } from "./widgets/user-stats";
|
||||||
import { useQuery } from "@tanstack/react-query";
|
import { useQuery } from "@tanstack/react-query";
|
||||||
import { getCurrentUser } from "@/shared/api/user";
|
import { getCurrentUser } from "@/shared/api/user";
|
||||||
import { Loading } from "@/components/ui/loading";
|
import { Loading } from "@/components/ui/loading";
|
||||||
@@ -25,11 +25,11 @@ const ProfilePage = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col items-stretch gap-14">
|
<div className="flex flex-col items-stretch gap-14">
|
||||||
<div className="flex">
|
<div className="flex flex-col gap-5 md:flex-row md:gap-0">
|
||||||
<UserInfo user={user} />
|
<UserInfo user={user} />
|
||||||
<UserAchievements achievements={user.achievements} />
|
<UserAchievements achievements={user.achievements} />
|
||||||
</div>
|
</div>
|
||||||
<UserStats />
|
<UserStatsSections />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ export const UserAchievements = ({
|
|||||||
<section className="flex flex-1 flex-col gap-5">
|
<section className="flex flex-1 flex-col gap-5">
|
||||||
<h2 className="text-3xl font-semibold">Достижения</h2>
|
<h2 className="text-3xl font-semibold">Достижения</h2>
|
||||||
{achievements && (
|
{achievements && (
|
||||||
<div className="grid grid-cols-2 gap-6">
|
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||||||
{achievements.map((a) => (
|
{achievements.map((a) => (
|
||||||
<AchievementDialog key={a.name} achievement={a}>
|
<AchievementDialog key={a.name} achievement={a}>
|
||||||
<AchievementCard achievement={a} />
|
<AchievementCard achievement={a} />
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import { User } from "@/shared/types/user";
|
|||||||
|
|
||||||
export const UserInfo = ({ user }: { user: User }) => {
|
export const UserInfo = ({ user }: { user: User }) => {
|
||||||
return (
|
return (
|
||||||
<section className="flex max-w-[420px] flex-1 flex-col gap-6">
|
<section className="flex flex-1 flex-col items-center gap-6 text-center md:max-w-[420px] md:items-start md:text-ellipsis">
|
||||||
{user.avatar && (
|
{user.avatar && (
|
||||||
<div className="aspect-square h-auto w-full max-w-[300px] overflow-hidden rounded-full border">
|
<div className="aspect-square h-auto w-full max-w-[300px] overflow-hidden rounded-full border">
|
||||||
<img
|
<img
|
||||||
|
|||||||
@@ -1,7 +1,39 @@
|
|||||||
export const UserStats = () => {
|
import { Loading } from "@/components/ui/loading";
|
||||||
|
import { UserStatBlock } from "../components/user-stat-block";
|
||||||
|
import { getCurrentUserStats } from "@/shared/api/user";
|
||||||
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
|
||||||
|
export const UserStatsSections = () => {
|
||||||
|
const { data: stats, isLoading } = useQuery({
|
||||||
|
queryKey: ["user-stats"],
|
||||||
|
queryFn: getCurrentUserStats,
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<section className="flex flex-col gap-6">
|
||||||
<h2 className="text-3xl font-semibold">Аналитика</h2>
|
<h2 className="text-3xl font-semibold">Аналитика</h2>
|
||||||
</div>
|
{isLoading ? (
|
||||||
|
<div className="relative h-20 w-full">
|
||||||
|
<Loading />
|
||||||
|
</div>
|
||||||
|
) : stats ? (
|
||||||
|
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
|
||||||
|
<UserStatBlock
|
||||||
|
value={stats.solved_tasks}
|
||||||
|
description="Задач решено"
|
||||||
|
/>
|
||||||
|
<UserStatBlock
|
||||||
|
value={stats.total_attempts}
|
||||||
|
description="Попыток выполнено"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="text-center">
|
||||||
|
<h3 className="w-full text-2xl font-semibold">
|
||||||
|
Что-то пошло не так 😔
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ export const getCompetition = async (id: string) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const getCompetitionResults = async (id: string) => {
|
export const getCompetitionResults = async (id: string) => {
|
||||||
return await userFetch<CompetitionResult>(`/competitions/${id}/results`);
|
return await userFetch<CompetitionResult[]>(`/competitions/${id}/results`);
|
||||||
}
|
}
|
||||||
|
|
||||||
export const startCompetition = async (competitionId: string) => {
|
export const startCompetition = async (competitionId: string) => {
|
||||||
|
|||||||
@@ -1,6 +1,10 @@
|
|||||||
import { userFetch } from ".";
|
import { userFetch } from ".";
|
||||||
import { User } from "../types/user";
|
import { User, UserStats } from "../types/user";
|
||||||
|
|
||||||
export const getCurrentUser = async () => {
|
export const getCurrentUser = async () => {
|
||||||
return await userFetch<User>("/me");
|
return await userFetch<User>("/me");
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const getCurrentUserStats = async () => {
|
||||||
|
return await userFetch<UserStats>("/me/stat");
|
||||||
|
};
|
||||||
|
|||||||
@@ -28,4 +28,5 @@ export enum CompetitionParticipationType {
|
|||||||
export interface CompetitionResult {
|
export interface CompetitionResult {
|
||||||
task_name: string;
|
task_name: string;
|
||||||
result: number;
|
result: number;
|
||||||
|
max_points: number;
|
||||||
}
|
}
|
||||||
@@ -12,3 +12,8 @@ export interface Achievement {
|
|||||||
received_at: Date;
|
received_at: Date;
|
||||||
icon?: string;
|
icon?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface UserStats {
|
||||||
|
total_attempts: number;
|
||||||
|
solved_tasks: number;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user