s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

semantic html for leaderboard table

Browse Source
This commit is contained in:
mattyl006 2022-07-18 15:34:57 +02:00
parent 86ce0edef6
commit eade652339
1 changed files with 38 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/elements/Table.js
View File

@ -1,10 +1,10 @@
import React from "react";
import {Grid} from "../../utils/containers";
import {FlexColumn, FlexRow, Grid} from "../../utils/containers";
import getChallengeSubmissions from "../../api/getChallengeSubmissions";
import {Body, Medium} from "../../utils/fonts";
const Table = (props) => {
const headerElements = ['#', 'submitter', 'when', 'entries', 'result'];
const headerElements = ['#', 'submitter', 'when', 'result', 'entries'];
const [challengeData, setChallengeData] = React.useState({});
React.useEffect(() => {
@ -19,43 +19,49 @@ const Table = (props) => {
const submissions = challengeData.submissions;
if (submissions) {
return (
submissions.map((submission, index) => {
return (
<React.Fragment key={`leaderboard-row-${index}`}>
<Body>
{index}
</Body>
<Body>
{submission.submitter}
</Body>
<Body>
{submission.when.slice(11, 16)} {submission.when.slice(0, 10)}
</Body>
<Body>
{submission.version.length}
</Body>
<Body>
{submission.evaluations[0].score}
</Body>
</React.Fragment>
);
})
<FlexColumn as='tbody'>
{submissions.map((submission, index) => {
return (
<Grid as='tr' gridTemplateColumns='1fr 3fr 3fr 1fr 1fr' gridGap='10px'
key={`leaderboard-row-${index}`}>
<Body as='td'>
{index}
</Body>
<Body as='td'>
{submission.submitter}
</Body>
<Body as='td'>
{submission.when.slice(11, 16)} {submission.when.slice(0, 10)}
</Body>
<Body as='td'>
{submission.evaluations[0].score.slice(0, 7)}
</Body>
<Body as='td' textAlign='right' padding='0 2px 0 0'>
{submission.version.length}
</Body>
</Grid>
);
})}
</FlexColumn>
);
}
}
return (
<>
<Grid gridTemplateColumns='1fr 3fr 3fr 1fr 1fr' gridGap='10px'>
{headerElements.map((elem, index) => {
return (
<Medium key={`leaderboard-header-${index}`}>
{elem}
</Medium>
)
})}
<FlexColumn as='table'>
<Grid as='thead' gridTemplateColumns='1fr 3fr 3fr 1fr 1fr' gridGap='10px' width='100%'>
{headerElements.map((elem, index) => {
return (
<FlexRow as='tr' key={`leaderboard-header-${index}`}
alignmentX={elem === 'entries' ? 'flex-end' : 'flex-start'}>
<Medium as='th'>{elem}</Medium>
</FlexRow>
)
})}
</Grid>
{renderSubmissions()}
</Grid>
</FlexColumn>
</>
);
}