leaderboard corrections
This commit is contained in:
parent
ac4ad5b0db
commit
b4298612b6
100
package-lock.json
generated
100
package-lock.json
generated
@ -11,6 +11,8 @@
|
||||
"@testing-library/jest-dom": "^5.16.4",
|
||||
"@testing-library/react": "^13.3.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"axios": "^0.27.2",
|
||||
"keycloak-js": "^19.0.1",
|
||||
"markdown": "^0.5.0",
|
||||
"prop-types": "^15.8.1",
|
||||
"react": "^18.2.0",
|
||||
@ -21,6 +23,9 @@
|
||||
"styled-components": "^5.3.5",
|
||||
"util": "^0.12.4",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": "18.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@ampproject/remapping": {
|
||||
@ -4816,6 +4821,28 @@
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "0.27.2",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
|
||||
"integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.14.9",
|
||||
"form-data": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/axios/node_modules/form-data": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
|
||||
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
|
||||
"dependencies": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"mime-types": "^2.1.12"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/axobject-query": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
|
||||
@ -5134,6 +5161,25 @@
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
|
||||
},
|
||||
"node_modules/base64-js": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
|
||||
"integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/feross"
|
||||
},
|
||||
{
|
||||
"type": "patreon",
|
||||
"url": "https://www.patreon.com/feross"
|
||||
},
|
||||
{
|
||||
"type": "consulting",
|
||||
"url": "https://feross.org/support"
|
||||
}
|
||||
]
|
||||
},
|
||||
"node_modules/batch": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
|
||||
@ -11305,6 +11351,11 @@
|
||||
"url": "https://github.com/chalk/supports-color?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/js-sha256": {
|
||||
"version": "0.9.0",
|
||||
"resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.9.0.tgz",
|
||||
"integrity": "sha512-sga3MHh9sgQN2+pJ9VYZ+1LPwXOxuBJBA5nrR5/ofPfuiJBE2hnjsaN8se8JznOmGLN2p49Pe5U/ttafcs/apA=="
|
||||
},
|
||||
"node_modules/js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
@ -11448,6 +11499,15 @@
|
||||
"node": ">=4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/keycloak-js": {
|
||||
"version": "19.0.1",
|
||||
"resolved": "https://registry.npmjs.org/keycloak-js/-/keycloak-js-19.0.1.tgz",
|
||||
"integrity": "sha512-/GNJcgCb4OsMW+pI2EEQU8PWd4tkXCABqLHkVHbfU+r7XaU9E+zFkD960TItIEarCR0JP6iD8fhKchgxkV+W8w==",
|
||||
"dependencies": {
|
||||
"base64-js": "^1.5.1",
|
||||
"js-sha256": "^0.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/kind-of": {
|
||||
"version": "6.0.3",
|
||||
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
|
||||
@ -20343,6 +20403,27 @@
|
||||
"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.2.tgz",
|
||||
"integrity": "sha512-LVAaGp/wkkgYJcjmHsoKx4juT1aQvJyPcW09MLCjVTh3V2cc6PnyempiLMNH5iMdfIX/zdbjUx2KDjMLCTdPeA=="
|
||||
},
|
||||
"axios": {
|
||||
"version": "0.27.2",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
|
||||
"integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
|
||||
"requires": {
|
||||
"follow-redirects": "^1.14.9",
|
||||
"form-data": "^4.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"form-data": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
|
||||
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
|
||||
"requires": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"mime-types": "^2.1.12"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"axobject-query": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
|
||||
@ -20590,6 +20671,11 @@
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
|
||||
},
|
||||
"base64-js": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
|
||||
"integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
|
||||
},
|
||||
"batch": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
|
||||
@ -25057,6 +25143,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"js-sha256": {
|
||||
"version": "0.9.0",
|
||||
"resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.9.0.tgz",
|
||||
"integrity": "sha512-sga3MHh9sgQN2+pJ9VYZ+1LPwXOxuBJBA5nrR5/ofPfuiJBE2hnjsaN8se8JznOmGLN2p49Pe5U/ttafcs/apA=="
|
||||
},
|
||||
"js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
@ -25166,6 +25257,15 @@
|
||||
"object.assign": "^4.1.2"
|
||||
}
|
||||
},
|
||||
"keycloak-js": {
|
||||
"version": "19.0.1",
|
||||
"resolved": "https://registry.npmjs.org/keycloak-js/-/keycloak-js-19.0.1.tgz",
|
||||
"integrity": "sha512-/GNJcgCb4OsMW+pI2EEQU8PWd4tkXCABqLHkVHbfU+r7XaU9E+zFkD960TItIEarCR0JP6iD8fhKchgxkV+W8w==",
|
||||
"requires": {
|
||||
"base64-js": "^1.5.1",
|
||||
"js-sha256": "^0.9.0"
|
||||
}
|
||||
},
|
||||
"kind-of": {
|
||||
"version": "6.0.3",
|
||||
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
|
||||
|
||||
@ -9,6 +9,8 @@
|
||||
"@testing-library/jest-dom": "^5.16.4",
|
||||
"@testing-library/react": "^13.3.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"axios": "^0.27.2",
|
||||
"keycloak-js": "^19.0.1",
|
||||
"markdown": "^0.5.0",
|
||||
"prop-types": "^15.8.1",
|
||||
"react": "^18.2.0",
|
||||
|
||||
@ -9,7 +9,7 @@ const DesktopChallengeMenuStyle = styled(FlexColumn)`
|
||||
position: fixed;
|
||||
left: 0;
|
||||
overflow-y: auto;
|
||||
width: 310px;
|
||||
width: 280px;
|
||||
height: 100vh;
|
||||
top: 50px;
|
||||
padding: 64px 0 0 0;
|
||||
|
||||
@ -13,7 +13,7 @@ import _tableSearchQueryHandler from './_tableSearchQueryHandler';
|
||||
import Search from '../Search';
|
||||
|
||||
const Table = (props) => {
|
||||
const headerElements = ['#', 'submitter', 'when', 'result', 'entries'];
|
||||
const headerElements = ['#', 'submitter', 'result', 'entries', 'when'];
|
||||
const [entriesFromApi, setEntriesFromApi] = React.useState([]);
|
||||
const [entries, setEntries] = React.useState([]);
|
||||
const [pageNr, setPageNr] = React.useState(1);
|
||||
@ -28,9 +28,9 @@ const Table = (props) => {
|
||||
getChallengeLeaderboard(setEntries, challengeName, setLoading);
|
||||
};
|
||||
|
||||
const renderSubmissions = () => {
|
||||
const renderSubmissions = (gridGap) => {
|
||||
return _renderSubmissions(pageNr, entries
|
||||
? entries : []);
|
||||
? entries : [], gridGap);
|
||||
};
|
||||
|
||||
const tableSearchQueryHandler = (event) => {
|
||||
@ -56,18 +56,18 @@ const Table = (props) => {
|
||||
<>
|
||||
<Search searchQueryHandler={tableSearchQueryHandler}/>
|
||||
<FlexColumn as='table' margin='20px 0 32px 0' minHeight='380px'>
|
||||
<Grid as='thead' gridTemplateColumns='1fr 3fr 3fr 1fr 1fr'
|
||||
<Grid as='thead' gridTemplateColumns='1fr 3fr 1fr 1fr 2fr'
|
||||
gridGap='10px' width='100%'>
|
||||
{headerElements.map((elem, index) => {
|
||||
return (
|
||||
<FlexRow as='tr' key={`leaderboard-header-${index}`}
|
||||
alignmentX={elem === 'entries' ? 'flex-end' : 'flex-start'}>
|
||||
alignmentX={(elem === '#' || elem === 'submitter') ? 'flex-start' : 'flex-end'}>
|
||||
<Medium as='th'>{elem}</Medium>
|
||||
</FlexRow>
|
||||
);
|
||||
})}
|
||||
</Grid>
|
||||
{renderSubmissions()}
|
||||
{renderSubmissions('10px')}
|
||||
</FlexColumn>
|
||||
<Pager pageNr={pageNr} width='48px' borderRadius='64px'
|
||||
pages={CALC_PAGES(entries ? entries : [])}
|
||||
@ -81,19 +81,19 @@ const Table = (props) => {
|
||||
return (
|
||||
<>
|
||||
<Search searchQueryHandler={tableSearchQueryHandler}/>
|
||||
<FlexColumn as='table' margin='32px 0 72px 0' minHeight='438px'>
|
||||
<Grid as='thead' gridTemplateColumns='1fr 3fr 3fr 1fr 1fr'
|
||||
gridGap='10px' width='100%' margin='0 0 28px 0'>
|
||||
<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'>
|
||||
{headerElements.map((elem, index) => {
|
||||
return (
|
||||
<FlexRow as='tr' key={`leaderboard-header-${index}`}
|
||||
alignmentX={elem === 'entries' ? 'flex-end' : 'flex-start'}>
|
||||
alignmentX={(elem === '#' || elem === 'submitter') ? 'flex-start' : 'flex-end'}>
|
||||
<H3 as='th'>{elem}</H3>
|
||||
</FlexRow>
|
||||
);
|
||||
})}
|
||||
</Grid>
|
||||
{renderSubmissions()}
|
||||
{renderSubmissions('32px')}
|
||||
</FlexColumn>
|
||||
<Pager pageNr={pageNr} width='72px' borderRadius='64px'
|
||||
pages={CALC_PAGES(entries ? entries : [])}
|
||||
|
||||
@ -12,31 +12,31 @@ const Line = styled(FlexRow)`
|
||||
height: 1px;
|
||||
`;
|
||||
|
||||
const _renderSubmissions = (pageNr, submissions) => {
|
||||
const _renderSubmissions = (pageNr, submissions, gridGap) => {
|
||||
const n = (pageNr - 1) * ELEMENTS_PER_PAGE;
|
||||
if (submissions) {
|
||||
return (
|
||||
<FlexColumn as='tbody' width='100%'>
|
||||
{submissions.slice(n, n + ELEMENTS_PER_PAGE).map(({submitter, when, evaluations, times}, index) => {
|
||||
return (
|
||||
<Grid as='tr' key={`leaderboard-row-${index}`} gridTemplateColumns='1fr 3fr 3fr 1fr 1fr'
|
||||
gridGap='10px' margin='10px 0 0 0' position='relative' width='100%'>
|
||||
<Grid as='tr' key={`leaderboard-row-${index}`} gridTemplateColumns='1fr 3fr 1fr 1fr 2fr'
|
||||
gridGap={gridGap} margin='10px 0 0 0' position='relative' width='100%' padding='4px'>
|
||||
<Body as='td'>
|
||||
{index + n + 1}
|
||||
</Body>
|
||||
<Body as='td'>
|
||||
{submitter ? submitter : '[anonymous]'}
|
||||
</Body>
|
||||
<Body as='td'>
|
||||
{when ? `${when.slice(11, 16)} ${when.slice(0, 10)}`
|
||||
: 'xxx'}
|
||||
</Body>
|
||||
<Body as='td'>
|
||||
<Body as='td' textAlign='right'>
|
||||
{evaluations[0] ? evaluations[0].score : 'xxx'}
|
||||
</Body>
|
||||
<Body as='td' textAlign='right' padding='0 2px 0 0'>
|
||||
<Body as='td' padding='0 2px 0 0' textAlign='right'>
|
||||
{times ? times : 1}
|
||||
</Body>
|
||||
<Body as='td' textAlign='right'>
|
||||
{when ? `${when.slice(11, 16)} ${when.slice(0, 10)}`
|
||||
: 'xxx'}
|
||||
</Body>
|
||||
<Line as='td'/>
|
||||
</Grid>
|
||||
);
|
||||
|
||||
@ -68,7 +68,7 @@ const Leaderboard = (props) => {
|
||||
|
||||
const desktopRender = () => {
|
||||
return (
|
||||
<FlexColumn padding='24px' as='section'>
|
||||
<FlexColumn padding='24px' as='section' width='100%' maxWidth='800px'>
|
||||
<H2 as='h2' margin='0 0 32px 0'>
|
||||
Leaderboard
|
||||
</H2>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user