test: history

This commit is contained in:
rngsurrounded
2025-03-03 03:15:19 +09:00
parent 17858f1e45
commit 86f68619cb
4 changed files with 67 additions and 19 deletions
@@ -1,17 +1,19 @@
import React from 'react';
import { FileIcon } from 'lucide-react';
import { FileIcon, Download } from 'lucide-react';
import { Button } from "@/components/ui/button";
interface FileSolutionProps {
selectedFile: File | null;
setSelectedFile: (file: File | null) => void;
fileInputRef: React.RefObject<HTMLInputElement>;
fileUrl?: string | null;
}
const FileSolution: React.FC<FileSolutionProps> = ({
selectedFile,
setSelectedFile,
fileInputRef
fileInputRef,
fileUrl = null
}) => {
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
if (event.target.files && event.target.files[0]) {
@@ -42,6 +44,8 @@ const FileSolution: React.FC<FileSolutionProps> = ({
}
};
const fileName = selectedFile ? selectedFile.name : fileUrl ? fileUrl.split('/').pop() || 'file' : '';
return (
<>
<input
@@ -52,19 +56,31 @@ const FileSolution: React.FC<FileSolutionProps> = ({
accept=".jpg,.jpeg,.png,.pptx,.docx,.pdf,.xlsx,.txt"
/>
{selectedFile ? (
{(selectedFile || fileUrl) ? (
<div className="bg-white rounded-lg p-6 flex flex-col items-center justify-center min-h-[180px]">
<div className="flex flex-col items-center">
<FileIcon size={28} className="text-black mb-2" />
<span className="text-sm text-gray-700 font-medium mb-1 font-hse-sans">{selectedFile.name}</span>
<span className="text-xs text-gray-500 font-hse-sans">{(selectedFile.size / 1024).toFixed(1)} KB</span>
<Button
variant="ghost"
className="text-blue-500 text-sm mt-2 p-0 h-auto hover:bg-transparent hover:text-blue-600 font-hse-sans"
onClick={() => setSelectedFile(null)}
>
Выбрать другой файл
</Button>
<span className="text-sm text-gray-700 font-medium mb-1 font-hse-sans">{fileName}</span>
<div className="flex items-center mt-2">
{fileUrl && (
<a
href={fileUrl}
download
className="flex items-center text-blue-500 text-sm mr-3 hover:text-blue-600"
>
<Download size={16} className="mr-1" />
Скачать
</a>
)}
<Button
variant="ghost"
className="text-blue-500 text-sm p-0 h-auto hover:bg-transparent hover:text-blue-600 font-hse-sans"
onClick={() => setSelectedFile(null)}
>
{fileUrl ? "Выбрать другой файл" : "Очистить"}
</Button>
</div>
</div>
</div>
) : (
@@ -82,7 +98,7 @@ const FileSolution: React.FC<FileSolutionProps> = ({
Загрузить файл
</span>
<p className="text-xs text-gray-500 text-center font-hse-sans">
Доступные форматы: jpg, jpeg, png
Доступные форматы: jpg, jpeg, png, pptx, docx, pdf, xlsx, txt
</p>
</div>
)}
@@ -3,20 +3,22 @@ import { Sheet, SheetClose, SheetContent, SheetHeader, SheetTitle } from "@/comp
import { Button } from "@/components/ui/button";
import { X } from "lucide-react";
import SolutionStatus from '../SolutionStatus';
import { Solution } from '@/shared/types/task';
import { Solution, TaskType } from '@/shared/types/task';
interface SolutionHistorySheetProps {
isOpen: boolean;
onOpenChange: (open: boolean) => void;
solutions: Solution[];
maxPoints: number
maxPoints: number;
onSolutionSelect: (solution: Solution) => void;
}
const SolutionHistorySheet: React.FC<SolutionHistorySheetProps> = ({
isOpen,
onOpenChange,
solutions,
maxPoints
maxPoints,
onSolutionSelect
}) => {
return (
<Sheet open={isOpen} onOpenChange={onOpenChange}>
@@ -32,10 +34,17 @@ const SolutionHistorySheet: React.FC<SolutionHistorySheetProps> = ({
</div>
</SheetHeader>
<div className="flex flex-col mt-3 space-y-2.5 overflow-y-auto max-h-[calc(100vh-80px)] px-4">
<div className="flex flex-col mt-3 space-y-2.5 overflow-y-auto max-h-[calc(100vh-80px)] px-4 pb-4">
{solutions.length > 0 ? (
solutions.map((solution, index) => (
<div key={index} className="w-full">
<div
key={solution.id || index}
className="w-full cursor-pointer transition-transform hover:scale-[1.01]"
onClick={() => {
onSolutionSelect(solution);
onOpenChange(false);
}}
>
<SolutionStatus solution={solution} maxPoints={maxPoints} />
</div>
))
@@ -29,6 +29,7 @@ const TaskSolution: React.FC<TaskSolutionProps> = ({
}) => {
const fileInputRef = useRef<HTMLInputElement>(null);
const [isHistoryOpen, setIsHistoryOpen] = useState(false);
const [selectedSolutionUrl, setSelectedSolutionUrl] = useState<string | null>(null);
const { id: competitionId } = useParams<{ id: string }>();
const solutionsQuery = useQuery({
@@ -45,6 +46,25 @@ const TaskSolution: React.FC<TaskSolutionProps> = ({
const latestSolution = solutionHistory && solutionHistory.length > 0 ? solutionHistory[solutionHistory.length - 1] : null;
const handleSolutionSelect = async (solution: Solution) => {
if (!solution.content) return;
setSelectedSolutionUrl(solution.content);
try {
if (task.type !== TaskType.FILE) {
const response = await fetch(solution.content);
if (!response.ok) {
throw new Error(`Failed to fetch solution content: ${response.status}`);
}
const text = await response.text();
setAnswer(text);
}
} catch (error) {
console.error('Error loading solution content:', error);
}
};
return (
<div className="md:w-[500px] flex flex-col gap-4">
{latestSolution ? (
@@ -64,6 +84,7 @@ const TaskSolution: React.FC<TaskSolutionProps> = ({
selectedFile={selectedFile}
setSelectedFile={setSelectedFile}
fileInputRef={fileInputRef}
existingFileUrl={selectedSolutionUrl}
/>
)}
@@ -81,6 +102,7 @@ const TaskSolution: React.FC<TaskSolutionProps> = ({
onOpenChange={setIsHistoryOpen}
solutions={solutionHistory}
maxPoints={task.points}
onSolutionSelect={handleSolutionSelect}
/>
</div>
);
+2 -1
View File
@@ -29,7 +29,8 @@ interface Solution {
id: string,
status: SolutionStatus,
timestamp: string,
earned_points: number
earned_points: number,
content: string
}
export type {Task, Solution}