correct submit request, some new styles to leaderboard and myEntries

This commit is contained in:
mattyl006 2022-10-28 16:45:06 +02:00
parent 9c4455863a
commit 83e3e67864
8 changed files with 62 additions and 69 deletions

View File

@ -35,7 +35,7 @@ const App = () => {
KeyCloakService.doLogin(); KeyCloakService.doLogin();
} }
} }
}, 500); }, 1500);
}); });
const loggedBarVisibleHandler = () => { const loggedBarVisibleHandler = () => {

View File

@ -1,28 +1,26 @@
import KeyCloakService from '../services/KeyCloakService'; import KeyCloakService from '../services/KeyCloakService';
import {API} from '../utils/globals'; import {API} from '../utils/globals';
async function postData(url = '', data = {}) { const challengeSubmission = (challengeName, repoUrl, repoBranch, description) => {
const response = await fetch(url, { const details = {
'f1': description,
'f3': repoUrl,
'f4': repoBranch
};
let formBody = [];
for (let property in details) {
let encodedKey = encodeURIComponent(property);
let encodedValue = encodeURIComponent(details[property]);
formBody.push(encodedKey + '=' + encodedValue);
}
formBody = formBody.join('&');
return fetch(`${API}/challenge-submission/${challengeName}`, {
method: 'POST', method: 'POST',
mode: 'no-cors',
cache: 'no-cache',
credentials: 'same-origin',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
'Authorization': `Bearer ${KeyCloakService.getToken()}` 'Authorization': `Bearer ${KeyCloakService.getToken()}`
}, },
redirect: 'follow', body: formBody
referrerPolicy: 'no-referrer',
body: JSON.stringify(data)
});
return response.json();
}
const challengeSubmission = (challengeName, repoUrl, repoBranch, description) => {
postData(`${API}/challenge-submission/${challengeName}`,
{f1: description, f3: repoUrl, f4: repoBranch})
.then((data) => {
console.log(data);
}); });
}; };

View File

@ -0,0 +1,6 @@
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<line y1="0.5" x2="10" y2="0.5" stroke="#343434"/>
<line y1="9.5" x2="4" y2="9.5" stroke="#343434"/>
<line y1="6.5" x2="6" y2="6.5" stroke="#343434"/>
<line y1="3.5" x2="8" y2="3.5" stroke="#343434"/>
</svg>

After

Width:  |  Height:  |  Size: 304 B

View File

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

View File

@ -2,17 +2,19 @@ import {ELEMENTS_PER_PAGE, IS_MOBILE} from '../../../utils/globals';
import {FlexColumn, FlexRow, Grid} from '../../../utils/containers'; import {FlexColumn, FlexRow, Grid} from '../../../utils/containers';
import {Body, Medium} from '../../../utils/fonts'; import {Body, Medium} from '../../../utils/fonts';
import styled from 'styled-components'; import styled from 'styled-components';
import theme from '../../../utils/theme';
const Line = styled(FlexRow)` const Line = styled(FlexRow)`
position: absolute; position: absolute;
top: -6px; top: ${({top}) => top ? top : 'auto'};
bottom: ${({bottom}) => bottom ? bottom : 'auto'};
left: 0; left: 0;
width: 100%; width: 100%;
background-color: ${({theme}) => theme.colors.dark04}; background-color: ${({theme}) => theme.colors.dark04};
height: 1px; height: ${({height}) => height ? height : '1px'};
`; `;
const sortBySwitch = (submissions, metricChoose, sortBy) => { const sortBySwitch = (submissions, metricChoose, sortBy) => {
switch (sortBy) { switch (sortBy) {
case 0: case 0:
@ -24,7 +26,6 @@ const sortBySwitch = (submissions, metricChoose, sortBy) => {
case 2: case 2:
return submissions.sort((a, b) => a.times - b.times); return submissions.sort((a, b) => a.times - b.times);
case 3: case 3:
console.log(submissions[0].when);
return submissions.sort((a, b) => (a.when > b.when) ? 1 : ((b.when > a.when) ? -1 : 0)); return submissions.sort((a, b) => (a.when > b.when) ? 1 : ((b.when > a.when) ? -1 : 0));
case 4: case 4:
return submissions.sort((a, b) => (a.submitter > b.submitter) ? 1 : ((b.submitter > a.submitter) ? -1 : 0)); return submissions.sort((a, b) => (a.submitter > b.submitter) ? 1 : ((b.submitter > a.submitter) ? -1 : 0));
@ -35,7 +36,6 @@ const sortBySwitch = (submissions, metricChoose, sortBy) => {
case 6: case 6:
return submissions.sort((a, b) => b.times - a.times); return submissions.sort((a, b) => b.times - a.times);
case 7: case 7:
console.log(submissions[0].when);
return submissions.sort((a, b) => (a.when < b.when) ? 1 : ((b.when < a.when) ? -1 : 0)); return submissions.sort((a, b) => (a.when < b.when) ? 1 : ((b.when < a.when) ? -1 : 0));
default: default:
return submissions.sort((a, b) => b.evaluations[metricChoose].score - a.evaluations[metricChoose].score); return submissions.sort((a, b) => b.evaluations[metricChoose].score - a.evaluations[metricChoose].score);
@ -58,17 +58,19 @@ const _renderSubmissions = (pageNr, submissions, gridGap, metricChoose, sortBy,
}, index) => { }, index) => {
return ( return (
<Grid as='tr' key={`leaderboard-row-${index}`} <Grid as='tr' key={`leaderboard-row-${index}`}
backgroundColor={index % 2 === 1 ? theme.colors.dark01 : 'transparent'}
gridTemplateColumns={!IS_MOBILE() ? '1fr 3fr ' + '1fr '.repeat(evaluations.length) + '1fr 2fr' : '1fr 3fr 1fr 1fr 2fr'} 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'> gridGap='20px' position='relative' width='100%' padding='4px'>
{index === 0 ? headerElements.map((elem, i) => { {index === 0 ? headerElements.map((elem, i) => {
return ( return (
<Medium key={`leaderboard-header-${i}`} <Medium key={`leaderboard-header-${i}`}
textAlign={elem === 'entries' || elem === 'when' ? 'right' : 'left'} textAlign={elem === 'entries' || elem === 'when' ? 'right' : 'left'}
minWidth={elem === 'result' ? '72px' : 'none'} minWidth={elem === 'result' ? '72px' : 'none'} fontSize='18px' as='td'>
fontSize='18px' {elem}
as='td'>{elem}</Medium> </Medium>
); );
}) : ''} }) : ''}
{index === 0 ? <Line height='2px' top='40px'/> : ''}
<Body as='td'> <Body as='td'>
{index + n} {index + n}
</Body> </Body>
@ -91,7 +93,7 @@ const _renderSubmissions = (pageNr, submissions, gridGap, metricChoose, sortBy,
{when ? `${when.slice(11, 16)} ${when.slice(0, 10)}` {when ? `${when.slice(11, 16)} ${when.slice(0, 10)}`
: 'xxx'} : 'xxx'}
</Body> </Body>
{index !== 0 ? <Line as='td'/> : ''} {index !== 0 ? <Line top='0' as='td'/> : ''}
</Grid> </Grid>
); );
})} })}

View File

@ -92,7 +92,7 @@ const MyEntries = (props) => {
); );
} else { } else {
return ( return (
<FlexColumn padding='24px' as='section' width='100%' maxWidth='1000px'> <FlexColumn padding='24px' as='section' width='100%' maxWidth='1400px'>
<H2 as='h2' margin='0 0 32px 0'> <H2 as='h2' margin='0 0 32px 0'>
My entries My entries
</H2> </H2>

View File

@ -1,44 +1,21 @@
import {ELEMENTS_PER_PAGE, IS_MOBILE} from '../../../utils/globals'; import {ELEMENTS_PER_PAGE, IS_MOBILE} from '../../../utils/globals';
import {FlexColumn, FlexRow, Grid} from '../../../utils/containers'; import {FlexColumn, FlexRow, Grid, Svg} from '../../../utils/containers';
import {Body, Medium} from '../../../utils/fonts'; import {Body, Medium} from '../../../utils/fonts';
import styled from 'styled-components'; import styled from 'styled-components';
import React from 'react'; import React from 'react';
import theme from '../../../utils/theme';
import arrow from '../../../assets/arrow.svg';
const Line = styled(FlexRow)` const Line = styled(FlexRow)`
position: absolute; position: absolute;
top: -6px; top: ${({top}) => top ? top : 'auto'};
bottom: ${({bottom}) => bottom ? bottom : 'auto'};
left: 0; left: 0;
width: 100%; width: 100%;
background-color: ${({theme}) => theme.colors.dark04}; background-color: ${({theme}) => theme.colors.dark04};
height: 1px; height: ${({height}) => height ? height : '1px'};
`; `;
// const sortBySwitch = (submissions, metricChoose, sortBy) => {
// switch (sortBy) {
// case 0:
// return submissions.sort((a, b) => (a.submitter < b.submitter) ? 1 : ((b.submitter < a.submitter) ? -1 : 0));
// case 1:
// return submissions.sort((a, b) => a.evaluations[metricChoose].score - b.evaluations[metricChoose].score);
// case 2:
// return submissions.sort((a, b) => a.times - b.times);
// case 3:
// console.log(submissions[0].when);
// return submissions.sort((a, b) => (a.when > b.when) ? 1 : ((b.when > a.when) ? -1 : 0));
// case 4:
// return submissions.sort((a, b) => (a.submitter > b.submitter) ? 1 : ((b.submitter > a.submitter) ? -1 : 0));
// case 5:
// return submissions.sort((a, b) => b.evaluations[metricChoose].score - a.evaluations[metricChoose].score);
// case 6:
// return submissions.sort((a, b) => b.times - a.times);
// case 7:
// console.log(submissions[0].when);
// return submissions.sort((a, b) => (a.when < b.when) ? 1 : ((b.when < a.when) ? -1 : 0));
// default:
// return submissions.sort((a, b) => b.evaluations[metricChoose].score - a.evaluations[metricChoose].score);
// }
// };
const renderEvalResult = (evaluations, test) => { const renderEvalResult = (evaluations, test) => {
for (let myEval of evaluations) { for (let myEval of evaluations) {
if (myEval.test.name === test.name && myEval.test.metric === test.metric) { if (myEval.test.name === test.name && myEval.test.metric === test.metric) {
@ -65,22 +42,32 @@ const _renderMySubmissions = (pageNr, myEntries, gridGap, metricChoose, sortBy,
}, index) => { }, index) => {
return ( return (
<Grid as='tr' key={`leaderboard-row-${index}`} <Grid as='tr' key={`leaderboard-row-${index}`}
gridTemplateColumns={!IS_MOBILE() ? '1fr ' + '4fr '.repeat(headerElements.length - 2) + '2fr' : '1fr 3fr 1fr 1fr 2fr'} backgroundColor={index % 2 === 1 ? theme.colors.dark01 : 'transparent'}
gridGap={gridGap} margin='10px 0 0 0' position='relative' width='100%' padding='4px'> gridTemplateColumns={!IS_MOBILE() ? '1fr ' + '4fr '.repeat(headerElements.length - 1) : '1fr 3fr 1fr 1fr 2fr'}
gridGap='20px' position='relative' width='100%' padding='4px'>
{index === 0 ? headerElements.map((elem, i) => { {index === 0 ? headerElements.map((elem, i) => {
return ( return (
<Medium key={`leaderboard-header-${i}`} <FlexRow alignmentX='flex-start'>
textAlign={elem === 'entries' || elem === 'when' ? 'right' : 'left'} <Medium key={`leaderboard-header-${i}`} fontSize='16px' as='td'
minWidth={elem === 'result' ? '72px' : 'none'} textAlign={elem === 'when' ? 'right' : 'left'}
fontSize='18px' width={elem === 'when' ? '100%' : 'auto'} padding='0 6px 0 0'>
as='td'>{elem}</Medium> {elem}
</Medium>
{elem !== '#' ?
<>
<Svg width='8px' rotate='180deg' src={arrow}
backgroundColor={theme.colors.dark} margin='2px 0 0 0'/>
<Svg width='8px' src={arrow} backgroundColor={theme.colors.dark}
margin='0 0 2px 0'/>
</> : ''}
</FlexRow>
); );
}) : ''} }) : ''}
{index === 0 ? <Line height='2px' top='50%'/> : ''}
<Body as='td'> <Body as='td'>
{index + n + 1} {index + n + 1}
</Body> </Body>
{myEntries.tests.map((test, i) => { {myEntries.tests.map((test, i) => {
console.log(description);
return ( return (
<Body key={`eval-result-${i}`} width='80px' as='td' textAlign='left' <Body key={`eval-result-${i}`} width='80px' as='td' textAlign='left'
minWidth='72px'> minWidth='72px'>

View File

@ -24,7 +24,7 @@ const Submit = (props) => {
}; };
const challengeSubmissionSubmit = () => { const challengeSubmissionSubmit = () => {
challengeSubmission(props.challengeName, repoUrl, repoBranch, description); challengeSubmission(props.challengeName, repoUrl, repoBranch, description).then(r => console.log(r));
}; };
return ( return (