Merge branch 'master' of gitlab.prodcontest.ru:team-15/project

services/frontend/src/pages/Competition/components/CompetitionResultModal/index.tsx

@@ -0,0 +1,88 @@
+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="text-yellow-600">На проверке</span>;
+    } else if (result === -2) {
+      return <span className="text-gray-500">Нет ответа</span>;
+    } else {
+      return (
+        <span className="text-green-600">
+          Зачтено {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 font-semibold">
+                  {renderResultValue(result.result, result.max_points)}
+                </div>
+              </div>
+            ))
+          ) : (
+            <div className="text-center py-6 text-gray-500">
+              Нет доступных результатов
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};

services/frontend/src/pages/Competition/index.tsx

@@ -1,20 +1,23 @@
+import { useState } from "react";
 import { useParams, Link, useNavigate } from "react-router-dom";
 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 { 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 { Loading } from "@/components/ui/loading";
 import { CompetitionType } from "@/shared/types/competition";
 import remarkMath from "remark-math";
 import remarkGfm from "remark-gfm";
 import rehypeKatex from "rehype-katex";
+import { CompetitionResultsModal } from "./components/CompetitionResultModal";
 
 const CompetitionPage = () => {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
   const competitionId = id || "";
+  const [isResultsModalOpen, setIsResultsModalOpen] = useState(false);
 
   const competitionQuery = useQuery({
     queryKey: ["competition", competitionId],
@@ -22,6 +25,12 @@ const CompetitionPage = () => {
     enabled: !!competitionId,
   });
 
+  const resultsQuery = useQuery({
+    queryKey: ["competitionResults", competitionId],
+    queryFn: () => getCompetitionResults(competitionId),
+    enabled: !!competitionId,
+  });
+
   const startMutation = useMutation({
     mutationFn: () => startCompetition(competitionId),
     onSuccess: async () => {
@@ -61,9 +70,9 @@ const CompetitionPage = () => {
     startMutation.mutate();
   };
 
-  const handleViewResults = () => {
-    console.log("sorryan");
-  };
+  const hasResults = resultsQuery.data && 
+                     resultsQuery.data.length > 0 && 
+                     resultsQuery.data.some(result => result.result !== -2);
 
   if (competitionQuery.isLoading) {
     return <Loading />;
@@ -75,15 +84,6 @@ const CompetitionPage = () => {
 
   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 = () => {
     if (!competition?.start_date) return false;
     
@@ -93,8 +93,18 @@ const CompetitionPage = () => {
     return now < startDate;
   };
   
-  const competitionEnded = isCompetitionEnded();
+  // Check if competition has ended
+  const isCompetitionEnded = () => {
+    if (!competition?.end_date) return false;
+    
+    const endDate = new Date(competition.end_date);
+    const now = new Date();
+    
+    return now > endDate;
+  };
+
   const competitionNotStarted = isCompetitionNotStarted();
+  const competitionEnded = isCompetitionEnded();
 
   return (
     <div className="flex flex-col gap-4">
@@ -133,17 +143,17 @@ const CompetitionPage = () => {
                   )}
                 </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 && (
                   <div className="bg-yellow-100 text-yellow-700 px-3 py-1 rounded-full text-sm font-medium">
                     Скоро начнется
                   </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>
               
               <h1 className="text-[34px] leading-11 font-semibold text-balance">
@@ -178,17 +188,8 @@ const CompetitionPage = () => {
             </div>
           </div>
           
-          <div className="w-full *:w-full md:w-96">
-            {competitionEnded && 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 ? (
+          <div className="w-full *:w-full md:w-96 flex flex-col gap-3">
+            {competitionNotStarted && competition.type === CompetitionType.COMPETITIVE ? (
               <Button 
                 size={"lg"} 
                 disabled={true}
@@ -197,7 +198,7 @@ const CompetitionPage = () => {
                 <AlertCircle size={18} className="mr-2" />
                 Скоро начнется
               </Button>
-            ) : (
+            ) : !competitionEnded ? (
               <Button 
                 size={"lg"} 
                 onClick={handleStart} 
@@ -205,10 +206,36 @@ const CompetitionPage = () => {
               >
                 {startMutation.isPending ? "Загрузка..." : "Приступить к выполнению"}
               </Button>
+            ) : null}
+            
+            {hasResults && (
+              <Button 
+                size={"lg"} 
+                onClick={() => setIsResultsModalOpen(true)}
+                className="bg-indigo-600 hover:bg-indigo-700"
+              >
+                <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>
+
+      <CompetitionResultsModal
+        competitionTitle={competition.title}
+        results={resultsQuery.data}
+        isLoading={resultsQuery.isLoading}
+        error={resultsQuery.error}
+        isOpen={isResultsModalOpen}
+        onOpenChange={setIsResultsModalOpen}
+      />
     </div>
   );
 };

services/frontend/src/shared/api/competitions.ts

@@ -14,7 +14,7 @@ export const getCompetition = 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) => {

services/frontend/src/shared/types/competition.ts

@@ -28,4 +28,5 @@ export enum CompetitionParticipationType {
 export interface CompetitionResult {
   task_name: string;
   result: number;
+  max_points: number;
 }