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

correct submit request, some new styles to leaderboard and myEntries

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.js
View File

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

34
src/api/challengeSubmissionPost.js
View File

@ -1,29 +1,27 @@
import KeyCloakService from '../services/KeyCloakService';
import {API} from '../utils/globals';
async function postData(url = '', data = {}) {
const response = await fetch(url, {
const challengeSubmission = (challengeName, repoUrl, repoBranch, description) => {
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',
mode: 'no-cors',
cache: 'no-cache',
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json',
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
'Authorization': `Bearer ${KeyCloakService.getToken()}`
},
redirect: 'follow',
referrerPolicy: 'no-referrer',
body: JSON.stringify(data)
body: formBody
});
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);
});
};
export default challengeSubmission;

6
src/assets/filter_direction.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 304 B

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

@ -129,7 +129,7 @@ const Leaderboard = (props) => {
const desktopRender = () => {
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'>
Leaderboard
</H2>

22
src/components/sections/Leaderboard/_renderSubmissions.js
View File

@ -2,17 +2,19 @@ import {ELEMENTS_PER_PAGE, IS_MOBILE} from '../../../utils/globals';
import {FlexColumn, FlexRow, Grid} from '../../../utils/containers';
import {Body, Medium} from '../../../utils/fonts';
import styled from 'styled-components';
import theme from '../../../utils/theme';
const Line = styled(FlexRow)`
position: absolute;
top: -6px;
top: ${({top}) => top ? top : 'auto'};
bottom: ${({bottom}) => bottom ? bottom : 'auto'};
left: 0;
width: 100%;
background-color: ${({theme}) => theme.colors.dark04};
height: 1px;
height: ${({height}) => height ? height : '1px'};
`;
const sortBySwitch = (submissions, metricChoose, sortBy) => {
switch (sortBy) {
case 0:
@ -24,7 +26,6 @@ const sortBySwitch = (submissions, metricChoose, sortBy) => {
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));
@ -35,7 +36,6 @@ const sortBySwitch = (submissions, metricChoose, sortBy) => {
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);
@ -58,17 +58,19 @@ const _renderSubmissions = (pageNr, submissions, gridGap, metricChoose, sortBy,
}, index) => {
return (
<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'}
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) => {
return (
<Medium key={`leaderboard-header-${i}`}
textAlign={elem === 'entries' || elem === 'when' ? 'right' : 'left'}
minWidth={elem === 'result' ? '72px' : 'none'}
fontSize='18px'
as='td'>{elem}</Medium>
minWidth={elem === 'result' ? '72px' : 'none'} fontSize='18px' as='td'>
{elem}
</Medium>
);
}) : ''}
{index === 0 ? <Line height='2px' top='40px'/> : ''}
<Body as='td'>
{index + n}
</Body>
@ -91,7 +93,7 @@ const _renderSubmissions = (pageNr, submissions, gridGap, metricChoose, sortBy,
{when ? `${when.slice(11, 16)} ${when.slice(0, 10)}`
: 'xxx'}
</Body>
{index !== 0 ? <Line as='td'/> : ''}
{index !== 0 ? <Line top='0' as='td'/> : ''}
</Grid>
);
})}

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

@ -92,7 +92,7 @@ const MyEntries = (props) => {
);
} else {
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'>
My entries
</H2>

61
src/components/sections/MyEntries/_renderMySubmissions.js
View File

@ -1,44 +1,21 @@
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 styled from 'styled-components';
import React from 'react';
import theme from '../../../utils/theme';
import arrow from '../../../assets/arrow.svg';
const Line = styled(FlexRow)`
position: absolute;
top: -6px;
top: ${({top}) => top ? top : 'auto'};
bottom: ${({bottom}) => bottom ? bottom : 'auto'};
left: 0;
width: 100%;
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) => {
for (let myEval of evaluations) {
if (myEval.test.name === test.name && myEval.test.metric === test.metric) {
@ -65,22 +42,32 @@ const _renderMySubmissions = (pageNr, myEntries, gridGap, metricChoose, sortBy,
}, index) => {
return (
<Grid as='tr' key={`leaderboard-row-${index}`}
gridTemplateColumns={!IS_MOBILE() ? '1fr ' + '4fr '.repeat(headerElements.length - 2) + '2fr' : '1fr 3fr 1fr 1fr 2fr'}
gridGap={gridGap} margin='10px 0 0 0' position='relative' width='100%' padding='4px'>
backgroundColor={index % 2 === 1 ? theme.colors.dark01 : 'transparent'}
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) => {
return (
<Medium key={`leaderboard-header-${i}`}
textAlign={elem === 'entries' || elem === 'when' ? 'right' : 'left'}
minWidth={elem === 'result' ? '72px' : 'none'}
fontSize='18px'
as='td'>{elem}</Medium>
<FlexRow alignmentX='flex-start'>
<Medium key={`leaderboard-header-${i}`} fontSize='16px' as='td'
textAlign={elem === 'when' ? 'right' : 'left'}
width={elem === 'when' ? '100%' : 'auto'} padding='0 6px 0 0'>
{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'>
{index + n + 1}
</Body>
{myEntries.tests.map((test, i) => {
console.log(description);
return (
<Body key={`eval-result-${i}`} width='80px' as='td' textAlign='left'
minWidth='72px'>

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

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