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

leaderboard corrections

Browse Source
This commit is contained in:
mattyl006 2022-08-12 13:24:23 +02:00
parent ac4ad5b0db
commit b4298612b6
6 changed files with 124 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
package-lock.json generated
View File

@ -11,6 +11,8 @@
"@testing-library/jest-dom": "^5.16.4", "@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0", "@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"keycloak-js": "^19.0.1",
"markdown": "^0.5.0", "markdown": "^0.5.0",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"react": "^18.2.0", "react": "^18.2.0",
@ -21,6 +23,9 @@
"styled-components": "^5.3.5", "styled-components": "^5.3.5",
"util": "^0.12.4", "util": "^0.12.4",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
},
"engines": {
"node": "18.4.0"
} }
}, },
"node_modules/@ampproject/remapping": { "node_modules/@ampproject/remapping": {
@ -4816,6 +4821,28 @@
"node": ">=12" "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": { "node_modules/axobject-query": {
"version": "2.2.0", "version": "2.2.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", "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", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" "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": { "node_modules/batch": {
"version": "0.6.1", "version": "0.6.1",
"resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz", "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
@ -11305,6 +11351,11 @@
"url": "https://github.com/chalk/supports-color?sponsor=1" "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": { "node_modules/js-tokens": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@ -11448,6 +11499,15 @@
"node": ">=4.0" "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": { "node_modules/kind-of": {
"version": "6.0.3", "version": "6.0.3",
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", "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", "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.2.tgz",
"integrity": "sha512-LVAaGp/wkkgYJcjmHsoKx4juT1aQvJyPcW09MLCjVTh3V2cc6PnyempiLMNH5iMdfIX/zdbjUx2KDjMLCTdPeA==" "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": { "axobject-query": {
"version": "2.2.0", "version": "2.2.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", "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", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" "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": { "batch": {
"version": "0.6.1", "version": "0.6.1",
"resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz", "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": { "js-tokens": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@ -25166,6 +25257,15 @@
"object.assign": "^4.1.2" "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": { "kind-of": {
"version": "6.0.3", "version": "6.0.3",
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",

2
package.json
View File

@ -9,6 +9,8 @@
"@testing-library/jest-dom": "^5.16.4", "@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0", "@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"keycloak-js": "^19.0.1",
"markdown": "^0.5.0", "markdown": "^0.5.0",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"react": "^18.2.0", "react": "^18.2.0",

2
src/components/elements/DesktopChallengeMenu.js
View File

@ -9,7 +9,7 @@ const DesktopChallengeMenuStyle = styled(FlexColumn)`
position: fixed; position: fixed;
left: 0; left: 0;
overflow-y: auto; overflow-y: auto;
width: 310px; width: 280px;
height: 100vh; height: 100vh;
top: 50px; top: 50px;
padding: 64px 0 0 0; padding: 64px 0 0 0;

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

@ -13,7 +13,7 @@ import _tableSearchQueryHandler from './_tableSearchQueryHandler';
import Search from '../Search'; import Search from '../Search';
const Table = (props) => { const Table = (props) => {
const headerElements = ['#', 'submitter', 'when', 'result', 'entries']; const headerElements = ['#', 'submitter', 'result', 'entries', 'when'];
const [entriesFromApi, setEntriesFromApi] = React.useState([]); const [entriesFromApi, setEntriesFromApi] = React.useState([]);
const [entries, setEntries] = React.useState([]); const [entries, setEntries] = React.useState([]);
const [pageNr, setPageNr] = React.useState(1); const [pageNr, setPageNr] = React.useState(1);
@ -28,9 +28,9 @@ const Table = (props) => {
getChallengeLeaderboard(setEntries, challengeName, setLoading); getChallengeLeaderboard(setEntries, challengeName, setLoading);
}; };
const renderSubmissions = () => { const renderSubmissions = (gridGap) => {
return _renderSubmissions(pageNr, entries return _renderSubmissions(pageNr, entries
? entries : []); ? entries : [], gridGap);
}; };
const tableSearchQueryHandler = (event) => { const tableSearchQueryHandler = (event) => {
@ -56,18 +56,18 @@ const Table = (props) => {
<> <>
<Search searchQueryHandler={tableSearchQueryHandler}/> <Search searchQueryHandler={tableSearchQueryHandler}/>
<FlexColumn as='table' margin='20px 0 32px 0' minHeight='380px'> <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%'> gridGap='10px' width='100%'>
{headerElements.map((elem, index) => { {headerElements.map((elem, index) => {
return ( return (
<FlexRow as='tr' key={`leaderboard-header-${index}`} <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> <Medium as='th'>{elem}</Medium>
</FlexRow> </FlexRow>
); );
})} })}
</Grid> </Grid>
{renderSubmissions()} {renderSubmissions('10px')}
</FlexColumn> </FlexColumn>
<Pager pageNr={pageNr} width='48px' borderRadius='64px' <Pager pageNr={pageNr} width='48px' borderRadius='64px'
pages={CALC_PAGES(entries ? entries : [])} pages={CALC_PAGES(entries ? entries : [])}
@ -81,19 +81,19 @@ const Table = (props) => {
return ( return (
<> <>
<Search searchQueryHandler={tableSearchQueryHandler}/> <Search searchQueryHandler={tableSearchQueryHandler}/>
<FlexColumn as='table' margin='32px 0 72px 0' minHeight='438px'> <FlexColumn as='table' margin='32px 0 72px 0' minHeight='438px' width='100%'>
<Grid as='thead' gridTemplateColumns='1fr 3fr 3fr 1fr 1fr' <Grid as='thead' gridTemplateColumns='1fr 3fr 1fr 1fr 2fr'
gridGap='10px' width='100%' margin='0 0 28px 0'> gridGap='32px' width='100%' margin='0 0 28px 0'>
{headerElements.map((elem, index) => { {headerElements.map((elem, index) => {
return ( return (
<FlexRow as='tr' key={`leaderboard-header-${index}`} <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> <H3 as='th'>{elem}</H3>
</FlexRow> </FlexRow>
); );
})} })}
</Grid> </Grid>
{renderSubmissions()} {renderSubmissions('32px')}
</FlexColumn> </FlexColumn>
<Pager pageNr={pageNr} width='72px' borderRadius='64px' <Pager pageNr={pageNr} width='72px' borderRadius='64px'
pages={CALC_PAGES(entries ? entries : [])} pages={CALC_PAGES(entries ? entries : [])}

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

@ -12,31 +12,31 @@ const Line = styled(FlexRow)`
height: 1px; height: 1px;
`; `;
const _renderSubmissions = (pageNr, submissions) => { const _renderSubmissions = (pageNr, submissions, gridGap) => {
const n = (pageNr - 1) * ELEMENTS_PER_PAGE; const n = (pageNr - 1) * ELEMENTS_PER_PAGE;
if (submissions) { if (submissions) {
return ( return (
<FlexColumn as='tbody' width='100%'> <FlexColumn as='tbody' width='100%'>
{submissions.slice(n, n + ELEMENTS_PER_PAGE).map(({submitter, when, evaluations, times}, index) => { {submissions.slice(n, n + ELEMENTS_PER_PAGE).map(({submitter, when, evaluations, times}, 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 1fr 1fr 2fr'
gridGap='10px' margin='10px 0 0 0' position='relative' width='100%'> gridGap={gridGap} margin='10px 0 0 0' position='relative' width='100%' padding='4px'>
<Body as='td'> <Body as='td'>
{index + n + 1} {index + n + 1}
</Body> </Body>
<Body as='td'> <Body as='td'>
{submitter ? submitter : '[anonymous]'} {submitter ? submitter : '[anonymous]'}
</Body> </Body>
<Body as='td'> <Body as='td' textAlign='right'>
{when ? `${when.slice(11, 16)} ${when.slice(0, 10)}`
: 'xxx'}
</Body>
<Body as='td'>
{evaluations[0] ? evaluations[0].score : 'xxx'} {evaluations[0] ? evaluations[0].score : 'xxx'}
</Body> </Body>
<Body as='td' textAlign='right' padding='0 2px 0 0'> <Body as='td' padding='0 2px 0 0' textAlign='right'>
{times ? times : 1} {times ? times : 1}
</Body> </Body>
<Body as='td' textAlign='right'>
{when ? `${when.slice(11, 16)} ${when.slice(0, 10)}`
: 'xxx'}
</Body>
<Line as='td'/> <Line as='td'/>
</Grid> </Grid>
); );

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

@ -68,7 +68,7 @@ const Leaderboard = (props) => {
const desktopRender = () => { const desktopRender = () => {
return ( return (
<FlexColumn padding='24px' as='section'> <FlexColumn padding='24px' as='section' width='100%' maxWidth='800px'>
<H2 as='h2' margin='0 0 32px 0'> <H2 as='h2' margin='0 0 32px 0'>
Leaderboard Leaderboard
</H2> </H2>