Skip to content

Commit

Permalink
SubmissionTable completed
Browse files Browse the repository at this point in the history
  • Loading branch information
@dbence2002
dbence2002 committed Sep 20, 2023
1 parent 723b12a commit 392af35
Show file tree
Hide file tree
Showing 6 changed files with 175 additions and 46 deletions.
2 changes: 1 addition & 1 deletion frontend/public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<title>React App</title>
</head>

<body class="bg-grey-900 antialiased" style="font-family: 'Roboto', sans-serif;">
<body class="bg-grey-900 antialiased" style="font-family: 'Roboto', sans-serif; min-width: 440px;">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div class="h-full" id="root"></div>
</body>
Expand Down
5 changes: 4 additions & 1 deletion frontend/public/locales/en/translation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,10 @@
"test": "Test",
"verdict": "Verdict",
"time": "Time",
"memory": "Memory"
"memory": "Memory",
"output": "Output",
"expected_output": "Expected output",
"checker_output": "Checker's output"
},
"profile": {
"profile": "Profile",
Expand Down
5 changes: 4 additions & 1 deletion frontend/public/locales/hu/translation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,10 @@
"test": "Teszt",
"verdict": "Verdikt",
"time": "Idő",
"memory": "Memória"
"memory": "Memória",
"output": "Kimenet",
"expected_output": "Elvárt kimenet",
"checker_output": "Ellenőrző kimenet"
},
"profile": {
"profile": "Profil",
Expand Down
166 changes: 140 additions & 26 deletions frontend/src/components/concrete/table/SubmissionTable.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import RoundedTable from "../../container/RoundedTable";
import {SVGCorrectSimple, SVGSpinner, SVGWrongSimple} from "../../../svg/SVGs";
import {useState} from "react";
import {SVGClock, SVGCopy, SVGCorrectSimple, SVGHDD, SVGSpinner, SVGWrong, SVGWrongSimple} from "../../../svg/SVGs";
import React, {useState} from "react";
import {useTranslation} from "react-i18next";
import RoundedFrame from "../../container/RoundedFrame";
import MapDataFrame from "../../container/MapDataFrame";

function TestCase({index, numCases, testCase, group, isLastGroup, isLastCase}) {
function TestCase_1_3({index, numCases, testCase, group, isLastGroup, isLastCase}) {
const bottomBorderCase = isLastGroup && isLastCase ? "border-b-0" : ""
const bottomBorderGroup = isLastGroup ? "border-b-0" : ""
return (
Expand All @@ -13,62 +15,161 @@ function TestCase({index, numCases, testCase, group, isLastGroup, isLastCase}) {
rowSpan={numCases}>
<div className="flex flex-col justify-center">
<div className="flex items-center justify-center mb-2">
{group["failed"] && <SVGWrongSimple cls="w-7 h-7 text-red-500"/>}
{!group["failed"] && group["completed"] &&
{group.failed && <SVGWrongSimple cls="w-7 h-7 text-red-500"/>}
{!group.failed && group.completed &&
<SVGCorrectSimple cls="w-7 h-7 text-indigo-500"/>}
{!group["failed"] && !group["completed"] && <SVGSpinner cls="w-7 h-7"/>}
{!group.failed && !group.completed && <SVGSpinner cls="w-7 h-7"/>}
</div>
{group["name"]}
{group.name}
</div>
</td>
<td className={`padding-td-default border border-t-0 border-divide-col text-center ${bottomBorderGroup}`}
rowSpan={numCases}>
{`${group["score"]} / ${group["maxScore"]}`}
{`${group.score} / ${group.maxScore}`}
</td>
</>}
<td className={`padding-td-default border border-t-0 border-divide-col ${bottomBorderCase}`}>{testCase["index"]}</td>
{group["scoring"] !== 1 &&
<td className={`padding-td-default border border-t-0 border-divide-col ${bottomBorderCase}`}>{testCase.index}</td>
{group.scoring !== 1 &&
<td className={`padding-td-default border border-t-0 border-divide-col ${bottomBorderCase}`}
colSpan={2}>
<div className="flex">
<SVGSpinner cls="mr-2 w-5 h-5"/>
<span className="whitespace-nowrap">{testCase["verdictName"]}</span>
{testCase.verdictType === 0 && <SVGSpinner cls="w-5 h-5 mr-2 shrink-0"/>}
{testCase.verdictType === 1 && <SVGWrongSimple cls="w-5 h-5 text-red-500 mr-2 shrink-0"/>}
{testCase.verdictType === 2 && <SVGCorrectSimple cls="w-5 h-5 text-green-500 mr-2 shrink-0"/>}
<span className="whitespace-nowrap">{testCase.verdictName}</span>
</div>
</td>
}
{group["scoring"] === 1 && <>
{group.scoring === 1 && <>
<td className={`padding-td-default border border-t-0 border-divide-col ${bottomBorderCase}`}>
<div className="flex items-center">
<SVGWrongSimple cls="mr-2 w-5 h-5 text-red-500"/>
<span className="whitespace-nowrap">{testCase["verdictName"]}</span>
<span className="whitespace-nowrap">{testCase.verdictName}</span>
</div>
</td>
<td className={`padding-td-default border border-t-0 border-divide-col whitespace-nowrap ${bottomBorderCase}`}>{testCase["score"]} / {testCase["maxScore"]}</td>
<td className={`padding-td-default border border-t-0 border-divide-col whitespace-nowrap ${bottomBorderCase}`}>{testCase.score} / {testCase.maxScore}</td>
</>}
<td className={`padding-td-default border border-t-0 border-divide-col ${bottomBorderCase}`}>{testCase["timeSpent"]}</td>
<td className={`padding-td-default border border-t-0 border-r-0 border-divide-col ${bottomBorderCase}`}>{testCase["memoryUsed"]}</td>
<td className={`padding-td-default border border-t-0 border-divide-col ${bottomBorderCase}`}>{testCase.timeSpent}</td>
<td className={`padding-td-default border border-t-0 border-r-0 border-divide-col ${bottomBorderCase}`}>{testCase.memoryUsed}</td>
</tr>
)
}

function TestGroup({group, isLast}) {
const testCases = group["testCases"]
const testCaseContents = testCases.map((testCase, index) =>
<TestCase index={index} numCases={testCases.length} testCase={testCase} group={group} key={index}
const testCases = group.testCases
const testCasesContent = testCases.map((testCase, index) =>
<TestCase_1_3 index={index} numCases={testCases.length} testCase={testCase} group={group} key={index}
isLastGroup={isLast} isLastCase={index === testCases.length - 1}/>
)
return (
<>
{testCaseContents}
{testCasesContent}
</>
)
}

function SubmissionTable({status}) {
function TestCase_0({testCase, index}) {
const {t} = useTranslation()
const testSet = status["testSets"][0]
const groups = testSet["groups"]
const groupContents = groups.map((group, index) =>
const titleComponent =
<div className="py-3 px-5 border-b border-default flex items-center text-table">
{testCase.verdictType === 0 && <SVGSpinner cls="mr-3 w-6 h-6 shrink-0"/>}
{testCase.verdictType === 1 && <SVGWrongSimple cls="mr-3 w-6 h-6 text-red-500 shrink-0"/>}
{testCase.verdictType === 2 && <SVGCorrectSimple cls="mr-3 w-6 h-6 text-green-500 shrink-0"/>}
<span>{index + 1}</span>
<span className="mx-2">–</span>
<span>{testCase.verdictName}</span>
</div>
return (
<RoundedFrame titleComponent={titleComponent}>
<div className="py-3 px-5 flex justify-between border-b border-default">
<div className="mr-2 whitespace-nowrap truncate flex items-center">
<SVGClock cls="w-5 h-5 mr-2"/>
<span className="hidden sm:inline">{t("submission_table.time")}:&nbsp;</span>
<span>{testCase.timeSpent}</span>
</div>
<div className="ml-2 whitespace-nowrap truncate flex items-center">
<SVGHDD cls="w-5 h-5 mr-2"/>
<span className="hidden sm:inline">{t("submission_table.memory")}:&nbsp;</span>
<span>{testCase.memoryUsed}</span>
</div>
</div>
<div className="overflow-x-auto">
<table className="w-full text-table bg-grey-850 rounded-b-md">
<tbody className="divide-y divide-default">
<tr className="divide-x divide-default">
<td className="padding-td-default whitespace-nowrap sm:w-52">{t("submission_table.output")}</td>
<td className="font-mono">
<div className="flex py-2 px-3 items-center">
<button
className="h-9 w-9 mr-2 rounded-md border-1 bg-grey-800 border-grey-725 hover:bg-grey-775 transition duration-200 relative"
aria-label="Copy">
<SVGCopy
cls={`absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-4 h-4 `}/>
</button>
<div className="w-full flex items-center px-3 py-2 border-1 border-grey-725 rounded-md bg-grey-875 font-mono">
{testCase.output}
</div>
</div>
</td>
</tr>
<tr className="divide-x divide-default">
<td className="padding-td-default whitespace-nowrap sm:w-52">{t("submission_table.expected_output")}</td>
<td className="font-mono">
<div className="flex py-2 px-3 items-center">
<button
className="h-9 w-9 mr-2 rounded-md border-1 bg-grey-800 border-grey-725 hover:bg-grey-775 transition duration-200 relative"
aria-label="Copy">
<SVGCopy
cls={`absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-4 h-4 `}/>
</button>
<div className="w-full flex items-center px-3 py-2 border-1 border-grey-725 rounded-md bg-grey-875 font-mono">
{testCase.expectedOutput}
</div>
</div>
</td>
</tr>
<tr className="divide-x divide-default">
<td className="padding-td-default whitespace-nowrap sm:w-52">{t("submission_table.checker_output")}</td>
<td className="font-mono">
<div className="flex py-2 px-3 items-center">
<button
className="h-9 w-9 mr-2 rounded-md border-1 bg-grey-800 border-grey-725 hover:bg-grey-775 transition duration-200 relative"
aria-label="Copy">
<SVGCopy
cls={`absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-4 h-4 `}/>
</button>
<div className="w-full flex items-center px-3 py-2 border-1 border-grey-725 rounded-md bg-grey-875 font-mono">
{testCase.checkerOutput}
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</RoundedFrame>
)
}

function SubmissionTable_0({testSet}) {
const {t} = useTranslation()
const testCases = testSet.testCases
const testCasesContent = testCases.map((testCase, index) =>
<div className="mb-3">
<TestCase_0 testCase={testCase} index={index} key={index}/>
</div>
)
return (
<>
{testCasesContent}
</>
)
}

function SubmissionTable_1_3({testSet}) {
const {t} = useTranslation()
const groups = testSet.groups
const groupsContent = groups.map((group, index) =>
<TestGroup group={group} isLast={index === groups.length - 1} key={index}/>
)
return (
Expand All @@ -84,10 +185,23 @@ function SubmissionTable({status}) {
</tr>
</thead>
<tbody>
{groupContents}
{groupsContent}
</tbody>
</RoundedTable>
)
}

function SubmissionTable({status}) {
const testSet = status.testSets[0]
if (status.feedbackType === 0) {
return (
<SubmissionTable_0 testSet={testSet} />
)
} else {
return (
<SubmissionTable_1_3 testSet={testSet} />
)
}
}

export default SubmissionTable
4 changes: 2 additions & 2 deletions frontend/src/pages/Info.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ function CompilerOption({lang, command}) {
<SVGCopy
cls={`absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-4 h-4 `}/>
</button>
<div className="flex items-center px-3 py-2 border-1 border-grey-725 rounded-md bg-grey-875">
<pre>{command}</pre>
<div className="w-full flex items-center px-3 py-2 border-1 border-grey-725 rounded-md bg-grey-875 font-mono">
{command}
</div>
</div>
</td>
Expand Down
39 changes: 24 additions & 15 deletions frontend/src/svg/SVGs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -265,7 +265,7 @@ export function SVGConfirm({cls}) {

export function SVGSpinner({cls}) {
return (
<svg className={`${cls} text-grey-700 animate-spin-slow fill-indigo-600`} viewBox="0 0 100 101" fill="none"
<svg className={`${cls} text-grey-675 animate-spin-slow fill-indigo-600`} viewBox="-6 -6 112 113" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
Expand Down Expand Up @@ -384,21 +384,30 @@ export function SVGCorrectSimple({cls}) {
)
}

export function SVGKey({cls}) {
export function SVGHDD({cls}) {
return (
<svg className={`${cls}`} version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="796 796 200 200" enableBackground="new 796 796 200 200" xmlSpace="preserve">
<path className="fill-current" d="M975.253,834.755l-26.093-26.092C940.994,800.497,930.138,796,918.591,796c-11.549,0-22.405,4.498-30.571,12.664
c-16.855,16.855-16.856,44.282,0,61.14l1.594,1.594c1.717,1.718,1.717,4.502,0,6.22l-82.075,82.074
c-4.608,4.609-4.608,12.078,0,16.688c2.304,2.303,5.323,3.455,8.343,3.455c3.02,0,6.04-1.152,8.343-3.455l3.724-3.725l20.121,20.119
c4.301,4.303,11.272,4.303,15.573,0c4.301-4.299,4.301-11.271,0-15.572l-4.451-4.451c-1.528-1.527-2.387-3.6-2.387-5.762
s0.858-4.234,2.387-5.762l0.446-0.445c3.182-3.184,8.341-3.184,11.522,0l4.452,4.449c4.301,4.303,11.273,4.303,15.574,0
c4.301-4.299,4.3-11.273,0-15.572l-20.121-20.119l35.234-35.236c1.718-1.718,4.503-1.718,6.221,0l1.592,1.593
c8.166,8.165,19.022,12.663,30.569,12.663s22.404-4.498,30.569-12.663c8.167-8.167,12.666-19.024,12.666-30.572
C987.915,853.777,983.418,842.92,975.253,834.755z M958.567,879.209c-3.711,3.709-8.641,5.751-13.886,5.751
s-10.175-2.042-13.884-5.751l-26.092-26.092c-7.656-7.656-7.656-20.112,0-27.768c3.708-3.709,8.64-5.752,13.885-5.752
s10.175,2.042,13.884,5.751l26.093,26.092c3.708,3.709,5.752,8.64,5.752,13.884S962.275,875.5,958.567,879.209z"/>
<svg className={`${cls}`} version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512 512" xmlSpace="preserve">
<path className="fill-current" d="M481.798,203.986l-85.257-69.984c-15.802-12.967-35.629-20.067-56.089-20.067H256h-84.457
c-20.452,0-40.28,7.1-56.085,20.067l-85.258,69.984C11.938,217.201,0.012,238.638,0,262.916v62.38
c0.016,40.199,32.579,72.762,72.77,72.77H256h183.23c40.191-0.008,72.762-32.571,72.77-72.77v-62.38
C511.992,238.638,500.066,217.201,481.798,203.986z M41.584,262.916c0.008-8.677,3.458-16.345,9.137-22.044
c5.703-5.676,13.372-9.134,22.049-9.141H256h183.23c8.677,0.008,16.345,3.466,22.053,9.141c5.675,5.699,9.125,13.367,9.134,22.044
v62.38c-0.008,8.677-3.458,16.345-9.134,22.052c-5.708,5.676-13.376,9.126-22.053,9.134H256H72.77
c-8.677-0.008-16.346-3.458-22.049-9.134c-5.679-5.707-9.129-13.375-9.137-22.052V262.916z"/>
<path className="fill-current" d="M326.168,319.444c12.924,0,23.393-10.478,23.393-23.39c0-12.912-10.47-23.389-23.393-23.389
c-12.919,0-23.394,10.478-23.394,23.389C302.775,308.966,313.249,319.444,326.168,319.444z"/>
<path className="fill-current" d="M404.578,319.444c12.912,0,23.39-10.478,23.39-23.39c0-12.912-10.478-23.389-23.39-23.389
c-12.919,0-23.397,10.478-23.397,23.389C381.181,308.966,391.659,319.444,404.578,319.444z"/>
</svg>
)
}

export function SVGClock({cls}) {
return (
<svg className={`${cls}`} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path className="fill-current" d="M23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12ZM3.00683 12C3.00683 16.9668 7.03321 20.9932 12 20.9932C16.9668 20.9932 20.9932 16.9668 20.9932 12C20.9932 7.03321 16.9668 3.00683 12 3.00683C7.03321 3.00683 3.00683 7.03321 3.00683 12Z" fill="#0F0F0F"/>
<path className="fill-current" d="M12 5C11.4477 5 11 5.44771 11 6V12.4667C11 12.4667 11 12.7274 11.1267 12.9235C11.2115 13.0898 11.3437 13.2343 11.5174 13.3346L16.1372 16.0019C16.6155 16.278 17.2271 16.1141 17.5032 15.6358C17.7793 15.1575 17.6155 14.5459 17.1372 14.2698L13 11.8812V6C13 5.44772 12.5523 5 12 5Z" fill="#0F0F0F"/>
</svg>
)
}
Expand Down

0 comments on commit 392af35

Please sign in to comment.