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

loading metrics in Leaderboard

Browse Source
This commit is contained in:
mattyl006 2022-10-14 10:20:35 +02:00
parent 0dc3ca930d
commit c2b61bbb52
2 changed files with 27 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.js
View File

@ -65,7 +65,6 @@ const App = () => {
<Route path='/register' element={<Register/>}/> <Route path='/register' element={<Register/>}/>
<Route path={`${CHALLENGE_PAGE}/:challengeId`} element={<Challenge/>}/> <Route path={`${CHALLENGE_PAGE}/:challengeId`} element={<Challenge/>}/>
<Route path={CHALLENGES_PAGE} element={<Challenges/>}/> <Route path={CHALLENGES_PAGE} element={<Challenges/>}/>
{ {
KeyCloakService.isLoggedIn() ? <> KeyCloakService.isLoggedIn() ? <>
<Route exact path='/' element={<Challenges/>}/> <Route exact path='/' element={<Challenges/>}/>

50
src/components/sections/Leaderboard/Leaderboard.js
View File

@ -83,7 +83,11 @@ const Leaderboard = (props) => {
<H2 as='h2' margin='0 0 12px 0'> <H2 as='h2' margin='0 0 12px 0'>
Leaderboard Leaderboard
</H2> </H2>
<FlexRow width='100%' gap='16px' as='section' margin='16px 0'> <Search searchQueryHandler={tableSearchQueryHandler}/>
{/*<FilterBy header='Sort by' options={sortOptions} gridTemplateColumns='auto auto'*/}
{/* option={sortBy} textAlign='center'*/}
{/* alignmentX='center' handler={sortByHandler}/>*/}
{!loading ? <FlexRow width='100%' gap='16px' as='section' margin='16px 0'>
<H3> <H3>
Metric: Metric:
</H3> </H3>
@ -95,8 +99,7 @@ const Leaderboard = (props) => {
{metric} {metric}
</Filter>); </Filter>);
}) : ''} }) : ''}
</FlexRow> </FlexRow> : ''}
<Search searchQueryHandler={tableSearchQueryHandler}/>
<Table challengeName={props.challengeName} loading={loading} <Table challengeName={props.challengeName} loading={loading}
renderElements={renderSubmissions} headerElements={headerElements}/> renderElements={renderSubmissions} headerElements={headerElements}/>
<Pager pageNr={pageNr} width='48px' borderRadius='64px' <Pager pageNr={pageNr} width='48px' borderRadius='64px'
@ -115,30 +118,31 @@ const Leaderboard = (props) => {
</H2> </H2>
<Search searchQueryHandler={tableSearchQueryHandler}/> <Search searchQueryHandler={tableSearchQueryHandler}/>
<FlexRow gap='40px' margin='32px 0'> <FlexRow gap='40px' margin='32px 0'>
<FilterBy header='Sort by' options={sortOptions} gridTemplateColumns='auto auto auto auto' {!loading ? <>
option={sortBy} textAlign='center' <FilterBy header='Sort by' options={sortOptions} gridTemplateColumns='auto auto auto auto'
alignmentX='center' handler={sortByHandler}/> option={sortBy} textAlign='center'
<FlexColumn gap='32px' as='section'> alignmentX='center' handler={sortByHandler}/>
<H3> <FlexColumn gap='32px' as='section'>
Metric <H3>
</H3> Metric
<FlexRow gap='32px'> </H3>
{getPossibleMetrics() ? getPossibleMetrics().map((metric, index) => { <FlexRow gap='32px'>
return ( {getPossibleMetrics() ? getPossibleMetrics().map((metric, index) => {
<Filter option={metricChoose} index={index} borderRadius='4px' width='200px' return (
height='40px' <Filter option={metricChoose} index={index} borderRadius='4px' width='200px'
key={`metric-${index}`} handler={metricChooseHandler} height='40px'
id={`metric-${index}`} name={`metric-${index}`}> key={`metric-${index}`} handler={metricChooseHandler}
{metric} id={`metric-${index}`} name={`metric-${index}`}>
</Filter>); {metric}
}) : ''} </Filter>);
</FlexRow> }) : ''}
</FlexColumn> </FlexRow>
</FlexColumn>
</> : ''}
</FlexRow> </FlexRow>
<Table challengeName={props.challengeName} loading={loading} <Table challengeName={props.challengeName} loading={loading}
renderElements={renderSubmissions} renderElements={renderSubmissions}
headerElements={headerElements}/> headerElements={headerElements}/>
<Pager pageNr={pageNr} width='72px' borderRadius='64px' <Pager pageNr={pageNr} width='72px' borderRadius='64px'
pages={CALC_PAGES(entries ? entries : [])} pages={CALC_PAGES(entries ? entries : [])}
nextPage={nextPage} previousPage={previousPage} nextPage={nextPage} previousPage={previousPage}