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

Leaderboard on desktop complete

Browse Source
This commit is contained in:
mattyl006 2022-07-26 11:29:37 +02:00
parent 98821fff5a
commit b4acc25550
8 changed files with 152 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,12 @@
import React from "react"; import React from "react";
import {FlexColumn, FlexRow, Grid} from "../../../utils/containers"; import {FlexColumn, FlexRow, Grid} from "../../../utils/containers";
import getChallengeSubmissions from "../../../api/getChallengeSubmissions"; import getChallengeSubmissions from "../../../api/getChallengeSubmissions";
import {Medium} from "../../../utils/fonts"; import {H3, Medium} from "../../../utils/fonts";
import _renderSubmissions from "./_renderSubmissions"; import _renderSubmissions from "./_renderSubmissions";
import Pager from "../Pager"; import Pager from "../Pager";
import {CALC_PAGES} from "../../../utils/globals"; import {CALC_PAGES} from "../../../utils/globals";
import Media from "react-media";
import theme from "../../../utils/theme";
const Table = (props) => { const Table = (props) => {
const headerElements = ['#', 'submitter', 'when', 'result', 'entries']; const headerElements = ['#', 'submitter', 'when', 'result', 'entries'];
@ -38,9 +40,9 @@ const Table = (props) => {
} }
} }
return ( const mobileRender = () => {
<> return (
<FlexColumn as='table' margin='0 0 32px 0'> <FlexColumn as='table' margin='0 0 32px 0' minHeight='380px'>
<Grid as='thead' gridTemplateColumns='1fr 3fr 3fr 1fr 1fr' <Grid as='thead' gridTemplateColumns='1fr 3fr 3fr 1fr 1fr'
gridGap='10px' width='100%'> gridGap='10px' width='100%'>
{headerElements.map((elem, index) => { {headerElements.map((elem, index) => {
@ -54,6 +56,37 @@ const Table = (props) => {
</Grid> </Grid>
{renderSubmissions()} {renderSubmissions()}
</FlexColumn> </FlexColumn>
);
}
const desktopRender = () => {
return (
<FlexColumn as='table' margin='0 0 72px 0' minHeight='438px'>
<Grid as='thead' gridTemplateColumns='1fr 3fr 3fr 1fr 1fr'
gridGap='10px' width='100%' margin='0 0 28px 0'>
{headerElements.map((elem, index) => {
return (
<FlexRow as='tr' key={`leaderboard-header-${index}`}
alignmentX={elem === 'entries' ? 'flex-end' : 'flex-start'}>
<H3 as='th'>{elem}</H3>
</FlexRow>
)
})}
</Grid>
{renderSubmissions()}
</FlexColumn>
);
}
return (
<>
<Media query={theme.mobile}>
{mobileRender()}
</Media>
<Media query={theme.desktop}>
{desktopRender()}
</Media>
<Pager pageNr={pageNr} nextPage={nextPage} previousPage={previousPage} <Pager pageNr={pageNr} nextPage={nextPage} previousPage={previousPage}
pages={CALC_PAGES(challengeData.submissions ? challengeData.submissions : [])}/> pages={CALC_PAGES(challengeData.submissions ? challengeData.submissions : [])}/>
</> </>

15
src/components/elements/Table/_renderSubmissions.js
View File

@ -16,27 +16,28 @@ const _renderSubmissions = (pageNr, submissions) => {
const n = (pageNr - 1) * ELEMENTS_PER_PAGE; const n = (pageNr - 1) * ELEMENTS_PER_PAGE;
if (submissions) { if (submissions) {
return ( return (
<FlexColumn as='tbody'> <FlexColumn as='tbody' width='100%'>
{submissions.slice(n, n + ELEMENTS_PER_PAGE).map((submission, index) => { {submissions.slice(n, n + ELEMENTS_PER_PAGE).map((submission, index) => {
return ( return (
<Grid as='tr' key={`leaderboard-row-${index}`} gridTemplateColumns='1fr 3fr 3fr 1fr 1fr' <Grid as='tr' key={`leaderboard-row-${index}`} gridTemplateColumns='1fr 3fr 3fr 1fr 1fr'
gridGap='10px' margin='10px 0 0 0' position='relative'> gridGap='10px' margin='10px 0 0 0' position='relative' width='100%'>
<Line as='td'/>
<Body as='td'> <Body as='td'>
{index + n + 1} {index + n + 1}
</Body> </Body>
<Body as='td'> <Body as='td'>
{submission.submitter} {submission.submitter ? submission.submitter : '[anonymized]'}
</Body> </Body>
<Body as='td'> <Body as='td'>
{submission.when.slice(11, 16)} {submission.when.slice(0, 10)} {submission.when ? `${submission.when.slice(11, 16)} ${submission.when.slice(0, 10)}`
: 'xxx'}
</Body> </Body>
<Body as='td'> <Body as='td'>
{submission.evaluations[0].score} {submission.evaluations[0] ? submission.evaluations[0].score : 'xxx'}
</Body> </Body>
<Body as='td' textAlign='right' padding='0 2px 0 0'> <Body as='td' textAlign='right' padding='0 2px 0 0'>
{submission.version.length} {submission.version ? submission.version.length : 1}
</Body> </Body>
<Line as='td'/>
</Grid> </Grid>
); );
})} })}

32
src/components/sections/Leaderboar/Leaderboard.js
View File

@ -1,32 +0,0 @@
import React from "react";
import Media from "react-media";
import theme from "../../../utils/theme";
import _mobileRender from "./_mobileRender";
import _desktopRender from "./_desktopRender";
const Leaderboard = (props) => {
const [variant, setVariant] = React.useState(0);
const mobileRender = () => {
return _mobileRender(variant, setVariant, props.challengeName);
}
const desktopRender = () => {
return _desktopRender(variant, setVariant, props.challengeName);
}
return (
<>
<Media query={theme.mobile}>
{mobileRender()}
</Media>
<Media query={theme.desktop}>
{desktopRender()}
</Media>
</>
)
}
export default Leaderboard;

44
src/components/sections/Leaderboar/_desktopRender.js
View File

@ -1,44 +0,0 @@
import {FlexColumn, FlexRow} from "../../../utils/containers";
import {H2, H3} from "../../../utils/fonts";
import theme from "../../../utils/theme";
import styled from "styled-components";
const BoardVariantDesktop = styled(FlexRow)`
transition: background-color 0.3s ease-in-out;
border: 1px solid ${({theme}) => theme.colors.green05};
background-color: ${({theme, active}) => active ? theme.colors.green05 : theme.colors.white};
&:hover {
background-color: ${({theme}) => theme.colors.green05};
}
div {
text-transform: uppercase;
}
`;
const desktopRender = (variant, setVariant) => {
return (
<FlexColumn padding='24px' as='section'>
<H2 as='h2' margin='0 0 32px 0'>
Leaderboard
</H2>
<FlexRow border={`1px solid ${theme.colors.green05}`}>
<BoardVariantDesktop as='button' width='150px' height='48px'
active={0 === variant} onClick={() => setVariant(0)}>
<H3 as='span'>
By user
</H3>
</BoardVariantDesktop>
<BoardVariantDesktop as='button' width='150px' height='48px'
active={1 === variant} onClick={() => setVariant(1)}>
<H3 as='span'>
By metric
</H3>
</BoardVariantDesktop>
</FlexRow>
</FlexColumn>
);
}
export default desktopRender;

48
src/components/sections/Leaderboar/_mobileRender.js
View File

@ -1,48 +0,0 @@
import {FlexColumn, FlexRow} from "../../../utils/containers";
import {H2} from "../../../utils/fonts";
import styled from "styled-components";
import Table from "../../elements/Table";
const BoardVariantMobile = styled(FlexRow)`
transition: color, background-color 0.3s ease-in-out;
background-color: ${({theme, active}) => active ? theme.colors.dark : theme.colors.white};
color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark};
font-size: 10px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
border-radius: 16px;
border: 1px solid ${({theme}) => theme.colors.dark};
padding: 6px 8px;
cursor: pointer;
box-shadow: ${({theme}) => theme.shadowRight};
* {
cursor: pointer;
}
&:hover {
background-color: ${({theme, active}) => active ? theme.colors.dark : theme.colors.white};
color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark};
}
`;
const mobileRender = (variant, setVariant, challengeName) => {
return (
<FlexColumn padding='24px 12px' as='section'>
<H2 as='h2' margin='0 0 12px 0'>
Leaderboard
</H2>
<FlexRow gap='12px' margin='0 0 20px 0'>
<BoardVariantMobile as='button' active={0 === variant} onClick={() => setVariant(0)}>
By user
</BoardVariantMobile>
<BoardVariantMobile as='button' active={1 === variant} onClick={() => setVariant(1)}>
By metric
</BoardVariantMobile>
</FlexRow>
<Table challengeName={challengeName}/>
</FlexColumn>
);
}
export default mobileRender;

1
src/components/sections/Leaderboar/index.js
View File

@ -1 +0,0 @@
export {default} from './Leaderboard';

105
src/components/sections/Leaderboard.js Normal file
View File

@ -0,0 +1,105 @@
import React from "react";
import Media from "react-media";
import theme from "../../utils/theme";
import {FlexColumn, FlexRow} from "../../utils/containers";
import {H2, H3} from "../../utils/fonts";
import Table from "../elements/Table";
import styled from "styled-components";
const BoardVariantMobile = styled(FlexRow)`
transition: color, background-color 0.3s ease-in-out;
background-color: ${({theme, active}) => active ? theme.colors.dark : theme.colors.white};
color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark};
font-size: 10px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
border-radius: 16px;
border: 1px solid ${({theme}) => theme.colors.dark};
padding: 6px 8px;
cursor: pointer;
box-shadow: ${({theme}) => theme.shadowRight};
* {
cursor: pointer;
}
&:hover {
background-color: ${({theme, active}) => active ? theme.colors.dark : theme.colors.white};
color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark};
}
`;
const BoardVariantDesktop = styled(FlexRow)`
transition: background-color 0.3s ease-in-out;
border: 1px solid ${({theme}) => theme.colors.green05};
background-color: ${({theme, active}) => active ? theme.colors.green05 : theme.colors.white};
&:hover {
background-color: ${({theme}) => theme.colors.green05};
}
div {
text-transform: uppercase;
}
`;
const Leaderboard = (props) => {
const [variant, setVariant] = React.useState(0);
const mobileRender = () => {
return (
<FlexColumn padding='24px 12px' as='section'>
<H2 as='h2' margin='0 0 12px 0'>
Leaderboard
</H2>
<FlexRow gap='12px' margin='0 0 20px 0'>
<BoardVariantMobile as='button' active={0 === variant} onClick={() => setVariant(0)}>
By user
</BoardVariantMobile>
<BoardVariantMobile as='button' active={1 === variant} onClick={() => setVariant(1)}>
By metric
</BoardVariantMobile>
</FlexRow>
<Table challengeName={props.challengeName}/>
</FlexColumn>
);
}
const desktopRender = () => {
return (
<FlexColumn padding='24px' as='section'>
<H2 as='h2' margin='0 0 32px 0'>
Leaderboard
</H2>
<FlexRow border={`1px solid ${theme.colors.green05}`} margin='0 0 76px 0'>
<BoardVariantDesktop as='button' width='150px' height='48px'
active={0 === variant} onClick={() => setVariant(0)}>
<H3 as='span'>
By user
</H3>
</BoardVariantDesktop>
<BoardVariantDesktop as='button' width='150px' height='48px'
active={1 === variant} onClick={() => setVariant(1)}>
<H3 as='span'>
By metric
</H3>
</BoardVariantDesktop>
</FlexRow>
<Table challengeName={props.challengeName}/>
</FlexColumn>
);
}
return (
<>
<Media query={theme.mobile}>
{mobileRender()}
</Media>
<Media query={theme.desktop}>
{desktopRender()}
</Media>
</>
)
}
export default Leaderboard;

4
src/pages/Challenge.js
View File

@ -5,7 +5,7 @@ import {H1, Medium} from "../utils/fonts";
import getChallenges from "../api/getChallenges"; import getChallenges from "../api/getChallenges";
import theme from "../utils/theme"; import theme from "../utils/theme";
import MobileChallengeMenu from "../components/elements/MobileChallengeMenu"; import MobileChallengeMenu from "../components/elements/MobileChallengeMenu";
import Leaderboard from "../components/sections/Leaderboar/Leaderboard"; import Leaderboard from "../components/sections/Leaderboard";
import Readme from "../components/sections/Readme"; import Readme from "../components/sections/Readme";
import HowTo from "../components/sections/HowTo"; import HowTo from "../components/sections/HowTo";
import MyEntries from "../components/sections/MyEntries"; import MyEntries from "../components/sections/MyEntries";
@ -47,7 +47,7 @@ const Challenge = () => {
case 4: case 4:
return <Submit/> return <Submit/>
default: default:
return <Leaderboard/> return <Leaderboard challengeName={challengeName}/>
} }
} }