all metrics in Leaderboard on desktop
This commit is contained in:
parent
41fc6e4503
commit
25df7f51a9
11
src/App.js
11
src/App.js
@ -5,7 +5,7 @@ import Challenges from './pages/Challanges/Challenges';
|
||||
import {BrowserRouter, Route, Routes} from 'react-router-dom';
|
||||
import NavBar from './components/elements/NavBar';
|
||||
// import Footer from './components/sections/Footer';
|
||||
import {CHALLENGE_PAGE, CHALLENGES_PAGE} from './utils/globals';
|
||||
import {CHALLENGE_PAGE, CHALLENGES_PAGE, IS_MOBILE} from './utils/globals';
|
||||
import Challenge from './pages/Challenge';
|
||||
import Register from './pages/auth/Register';
|
||||
import Login from './pages/auth/Login';
|
||||
@ -34,7 +34,7 @@ const App = () => {
|
||||
KeyCloakService.doLogin();
|
||||
}
|
||||
}
|
||||
}, 200);
|
||||
}, 500);
|
||||
});
|
||||
|
||||
const loggedBarVisibleHandler = () => {
|
||||
@ -55,9 +55,10 @@ const App = () => {
|
||||
<BrowserRouter>
|
||||
<ThemeProvider theme={theme}>
|
||||
<NavBar loggedBarVisibleHandler={loggedBarVisibleHandler}/>
|
||||
<LoggedBar visible={loggedBarVisible} loggedBarVisibleHandler={loggedBarVisibleHandler}
|
||||
loggedBarHoverTrue={loggedBarHoverTrue} loggedBarHoverFalse={loggedBarHoverFalse}
|
||||
username={KeyCloakService.getUsername()}/>
|
||||
{!IS_MOBILE() ? <LoggedBar visible={loggedBarVisible} loggedBarVisibleHandler={loggedBarVisibleHandler}
|
||||
loggedBarHoverTrue={loggedBarHoverTrue}
|
||||
loggedBarHoverFalse={loggedBarHoverFalse}
|
||||
username={KeyCloakService.getUsername()}/> : ''}
|
||||
<Routes>
|
||||
<Route path='/register-email' element={<RegisterWithEmail/>}/>
|
||||
<Route path='/login-email' element={<LoginWithEmail/>}/>
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import React from 'react';
|
||||
import {FlexColumn, FlexRow, Grid} from '../../utils/containers';
|
||||
import {H3, Medium} from '../../utils/fonts';
|
||||
import {FlexColumn} from '../../utils/containers';
|
||||
import Media from 'react-media';
|
||||
import theme from '../../utils/theme';
|
||||
import Loading from './Loading';
|
||||
@ -10,37 +9,15 @@ const Table = (props) => {
|
||||
const mobileRender = () => {
|
||||
return (
|
||||
<FlexColumn as='table' margin='20px 0 32px 0' minHeight='380px'>
|
||||
<Grid as='thead' gridTemplateColumns='1fr 3fr 1fr 1fr 2fr'
|
||||
gridGap='10px' width='100%'>
|
||||
{props.headerElements.map((elem, index) => {
|
||||
return (
|
||||
<FlexRow as='tr' key={`leaderboard-header-${index}`}
|
||||
alignmentX={(elem === '#' || elem === 'submitter') ? 'flex-start' : 'flex-end'}>
|
||||
<Medium as='th'>{elem}</Medium>
|
||||
</FlexRow>
|
||||
);
|
||||
})}
|
||||
</Grid>
|
||||
{props.renderElements('10px')}
|
||||
{props.renderElements('10px', props.headerElements)}
|
||||
</FlexColumn>
|
||||
);
|
||||
};
|
||||
|
||||
const desktopRender = () => {
|
||||
return (
|
||||
<FlexColumn as='table' margin='32px 0 72px 0' minHeight='438px' width='100%'>
|
||||
<Grid as='thead' gridTemplateColumns='1fr 3fr 1fr 1fr 2fr'
|
||||
gridGap='32px' width='100%' margin='0 0 28px 0'>
|
||||
{props.headerElements.map((elem, index) => {
|
||||
return (
|
||||
<FlexRow as='tr' key={`leaderboard-header-${index}`}
|
||||
alignmentX={(elem === '#' || elem === 'submitter') ? 'flex-start' : 'flex-end'}>
|
||||
<H3 as='th'>{elem}</H3>
|
||||
</FlexRow>
|
||||
);
|
||||
})}
|
||||
</Grid>
|
||||
{props.renderElements('32px')}
|
||||
<FlexColumn as='table' margin='32px 0 72px 0' width='100%'>
|
||||
{props.renderElements('32px', props.headerElements)}
|
||||
</FlexColumn>
|
||||
);
|
||||
};
|
||||
|
||||
@ -16,7 +16,6 @@ import FilterBy from '../FilterBy';
|
||||
import sortOptions from './sortOptions';
|
||||
|
||||
const Leaderboard = (props) => {
|
||||
const headerElements = ['#', 'submitter', 'result', 'entries', 'when'];
|
||||
const [entriesFromApi, setEntriesFromApi] = React.useState([]);
|
||||
const [entries, setEntries] = React.useState([]);
|
||||
const [pageNr, setPageNr] = React.useState(1);
|
||||
@ -33,9 +32,9 @@ const Leaderboard = (props) => {
|
||||
getChallengeLeaderboard(setEntries, challengeName, setLoading);
|
||||
};
|
||||
|
||||
const renderSubmissions = (gridGap) => {
|
||||
const renderSubmissions = (gridGap, headerElements) => {
|
||||
return _renderSubmissions(pageNr, entries
|
||||
? entries : [], gridGap, metricChoose, sortBy);
|
||||
? entries : [], gridGap, metricChoose, sortBy, headerElements);
|
||||
};
|
||||
|
||||
const tableSearchQueryHandler = (event) => {
|
||||
@ -69,6 +68,16 @@ const Leaderboard = (props) => {
|
||||
return metrics;
|
||||
};
|
||||
|
||||
const getLeaderboardHeader = () => {
|
||||
let header = ['#', 'submitter'];
|
||||
for (let metric of getPossibleMetrics()) {
|
||||
header.push(metric);
|
||||
}
|
||||
header.push('entries');
|
||||
header.push('when');
|
||||
return header;
|
||||
};
|
||||
|
||||
const metricChooseHandler = (value) => {
|
||||
setMetricChoose(value);
|
||||
};
|
||||
@ -98,7 +107,8 @@ const Leaderboard = (props) => {
|
||||
}) : ''}
|
||||
</FlexRow> : ''}
|
||||
<Table challengeName={props.challengeName} loading={loading}
|
||||
renderElements={renderSubmissions} headerElements={headerElements}/>
|
||||
renderElements={renderSubmissions}
|
||||
headerElements={['#', 'submitter', 'result', 'entries', 'when']}/>
|
||||
<Pager pageNr={pageNr} width='48px' borderRadius='64px'
|
||||
pages={CALC_PAGES(entries ? entries : [])}
|
||||
nextPage={nextPage} previousPage={previousPage}
|
||||
@ -114,32 +124,12 @@ const Leaderboard = (props) => {
|
||||
Leaderboard
|
||||
</H2>
|
||||
<Search searchQueryHandler={tableSearchQueryHandler}/>
|
||||
<FlexRow gap='40px' margin='32px 0'>
|
||||
{!loading ? <>
|
||||
<FilterBy header='Sort by' options={sortOptions} gridTemplateColumns='auto auto auto auto'
|
||||
option={sortBy} textAlign='center'
|
||||
option={sortBy} textAlign='center' margin='32px 0 0 0'
|
||||
alignmentX='center' handler={sortByHandler}/>
|
||||
<FlexColumn gap='32px' as='section'>
|
||||
<H3>
|
||||
Metric
|
||||
</H3>
|
||||
<FlexRow gap='32px'>
|
||||
{getPossibleMetrics() ? getPossibleMetrics().map((metric, index) => {
|
||||
return (
|
||||
<Filter option={metricChoose} index={index} borderRadius='4px' width='200px'
|
||||
height='40px'
|
||||
key={`metric-${index}`} handler={metricChooseHandler}
|
||||
id={`metric-${index}`} name={`metric-${index}`}>
|
||||
{metric}
|
||||
</Filter>);
|
||||
}) : ''}
|
||||
</FlexRow>
|
||||
</FlexColumn>
|
||||
</> : ''}
|
||||
</FlexRow>
|
||||
<Table challengeName={props.challengeName} loading={loading}
|
||||
renderElements={renderSubmissions}
|
||||
headerElements={headerElements}/>
|
||||
headerElements={getLeaderboardHeader()}/>
|
||||
<Pager pageNr={pageNr} width='72px' borderRadius='64px'
|
||||
pages={CALC_PAGES(entries ? entries : [])}
|
||||
nextPage={nextPage} previousPage={previousPage}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import {ELEMENTS_PER_PAGE} from '../../../utils/globals';
|
||||
import {ELEMENTS_PER_PAGE, IS_MOBILE} from '../../../utils/globals';
|
||||
import {FlexColumn, FlexRow, Grid} from '../../../utils/containers';
|
||||
import {Body} from '../../../utils/fonts';
|
||||
import {Body, Medium} from '../../../utils/fonts';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Line = styled(FlexRow)`
|
||||
@ -38,7 +38,7 @@ const sortBySwitch = (submissions, metricChoose, sortBy) => {
|
||||
}
|
||||
};
|
||||
|
||||
const _renderSubmissions = (pageNr, submissions, gridGap, metricChoose, sortBy) => {
|
||||
const _renderSubmissions = (pageNr, submissions, gridGap, metricChoose, sortBy, headerElements) => {
|
||||
const n = (pageNr - 1) * ELEMENTS_PER_PAGE;
|
||||
|
||||
if (submissions) {
|
||||
@ -53,17 +53,34 @@ const _renderSubmissions = (pageNr, submissions, gridGap, metricChoose, sortBy)
|
||||
times
|
||||
}, index) => {
|
||||
return (
|
||||
<Grid as='tr' key={`leaderboard-row-${index}`} gridTemplateColumns='1fr 3fr 1fr 1fr 2fr'
|
||||
<Grid as='tr' key={`leaderboard-row-${index}`}
|
||||
gridTemplateColumns={!IS_MOBILE() ? '1fr 3fr ' + '1fr '.repeat(evaluations.length) + '1fr 2fr' : '1fr 3fr 1fr 1fr 2fr'}
|
||||
gridGap={gridGap} margin='10px 0 0 0' position='relative' width='100%' padding='4px'>
|
||||
{index === 0 ? headerElements.map((elem, i) => {
|
||||
return (
|
||||
<Medium key={`leaderboard-header-${i}`}
|
||||
textAlign={elem === 'entries' || elem === 'when' ? 'right' : 'left'}
|
||||
minWidth={elem === 'result' ? '72px' : 'none'}
|
||||
fontSize='18px'
|
||||
as='td'>{elem}</Medium>
|
||||
);
|
||||
}) : ''}
|
||||
{index > 0 ? <>
|
||||
<Body as='td'>
|
||||
{index + n + 1}
|
||||
{index + n}
|
||||
</Body>
|
||||
<Body as='td'>
|
||||
{submitter ? submitter : '[anonymous]'}
|
||||
</Body>
|
||||
<Body as='td' textAlign='right'>
|
||||
{evaluations[metricChoose] ? evaluations[metricChoose].score : 'xxx'}
|
||||
{!IS_MOBILE() ? evaluations.map((metric, i) => {
|
||||
return (
|
||||
<Body key={`metric-result-${i}`} as='td' textAlign='left' minWidth='72px'>
|
||||
{metric.score.slice(0, 7)}
|
||||
</Body>
|
||||
);
|
||||
}) : <Body as='td' textAlign='left' minWidth='72px'>
|
||||
{evaluations[metricChoose] ? evaluations[metricChoose].score.slice(0, 7) : 'xxx'}
|
||||
</Body>}
|
||||
<Body as='td' padding='0 2px 0 0' textAlign='right'>
|
||||
{times ? times : 1}
|
||||
</Body>
|
||||
@ -72,6 +89,7 @@ const _renderSubmissions = (pageNr, submissions, gridGap, metricChoose, sortBy)
|
||||
: 'xxx'}
|
||||
</Body>
|
||||
<Line as='td'/>
|
||||
</> : ''}
|
||||
</Grid>
|
||||
);
|
||||
})}
|
||||
|
||||
@ -29,7 +29,7 @@ const Challenge = () => {
|
||||
const sectionRender = () => {
|
||||
switch (section) {
|
||||
case 0:
|
||||
return <Leaderboard challengeName={challengeName}/>;
|
||||
return <Leaderboard challengeName={challengeName} mainMetric={challenge.mainMetric}/>;
|
||||
case 1:
|
||||
return <Readme challengeName={challengeName} metric={challenge.mainMetric}
|
||||
description={challenge.description} deadline={challenge.deadline}/>;
|
||||
@ -40,7 +40,7 @@ const Challenge = () => {
|
||||
case 4:
|
||||
return <Submit challengeName={challengeName}/>;
|
||||
default:
|
||||
return <Leaderboard challengeName={challengeName}/>;
|
||||
return <Leaderboard challengeName={challengeName} mainMetric={challenge.mainMetric}/>;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -47,6 +47,7 @@ const Medium = styled(Body)`
|
||||
font-weight: 400;
|
||||
@media (min-width: ${({theme}) => theme.overMobile}) {
|
||||
font-weight: 500;
|
||||
font-size: ${({fontSize}) => fontSize ? fontSize : '16px'}
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user