diff --git a/src/api/getMyEntries.js b/src/api/getMyEntries.js index 6b53a24..b1f6454 100644 --- a/src/api/getMyEntries.js +++ b/src/api/getMyEntries.js @@ -1,15 +1,47 @@ import {API} from '../utils/globals'; import KeyCloakService from '../services/KeyCloakService'; -const getMyEntries = (challengeName, setDataState, setLoadingState) => { +const getMyEntries = (challengeName, setDataOriginalState, setDataState, setLoadingState) => { fetch(`${API}/challenge-my-submissions/${challengeName}`, { headers: {'Authorization': `Bearer ${KeyCloakService.getToken()}`} }) .then(response => response.json()) .then(data => { - setDataState(data); - if (setLoadingState) - console.log(data); + setDataOriginalState(data); + let item = {}; + let result = []; + let tests = data.tests; + for (let submission of data.submissions) { + for (let evaluation of submission.evaluations) { + item = { + ...item, + evaluations: { + ...item.evaluations, + [`${evaluation.test.metric}.${evaluation.test.name}`]: evaluation.score + } + }; + } + for (let test of tests) { + if (!Object.hasOwn(item.evaluations, `${test.metric}.${test.name}`)) { + item = { + ...item, + evaluations: { + ...item.evaluations, + [`${test.metric}.${test.name}`]: '-1' + } + }; + } + } + item = { + ...item, + id: submission.id, + submitter: submission.submitter, + when: submission.when, + }; + result.push(item); + item = {}; + } + setDataState(result); setLoadingState(false); }); }; diff --git a/src/components/elements/Table.js b/src/components/elements/Table.js index 9c377c6..15f3b0f 100644 --- a/src/components/elements/Table.js +++ b/src/components/elements/Table.js @@ -29,9 +29,37 @@ const Table = (props) => { ); }; + const metricsRender = (elem) => { + if (!props.iterableColumnElement) + return <>; + if (Array.isArray(elem[props.iterableColumnElement.name])) + elem = elem[props.iterableColumnElement.name]; + else { + let newElem = []; + for (let metric of props.possibleMetrics) { + if (elem[props.iterableColumnElement.name][metric] === '-1') + newElem.push('N/A'); + else + newElem.push(elem[props.iterableColumnElement.name][metric]); + } + elem = newElem; + } + return ( + elem.map((iterableElem, i) => { + return ( + + {props.iterableColumnElement.format ? + props.iterableColumnElement.format(iterableElem) : iterableElem} + + ); + }) + ); + }; + const desktopRender = () => { const n = (props.pageNr - 1) * (ELEMENTS_PER_PAGE * 2); - console.log(props.elements); let elementsToMap = props.elements.slice(n, n + (ELEMENTS_PER_PAGE * 2)); return ( @@ -41,7 +69,7 @@ const Table = (props) => { gridTemplateColumns={props.gridTemplateColumns}> {props.headerElements.map((elem, i) => { return ( - { props.sortByUpdate(elem); forceUpdate(); @@ -77,24 +105,7 @@ const Table = (props) => { ); })} - {props.iterableColumnElement ? elem[props.iterableColumnElement.name].map((iterableElem, i) => { - return ( - - {props.iterableColumnElement.format ? - props.iterableColumnElement.format(iterableElem) : iterableElem} - - ); - }) : ''} - {props.myEntries ? props.myEntries.tests.map((test, i) => { - return ( - - {props.renderEvalResult(elem.evaluations, test)} - - ); - }) : ''} + {props.headerElements ? metricsRender(elem) : ''} ); })} diff --git a/src/components/sections/Leaderboard/Leaderboard.js b/src/components/sections/Leaderboard/Leaderboard.js index ef51306..7cc1234 100644 --- a/src/components/sections/Leaderboard/Leaderboard.js +++ b/src/components/sections/Leaderboard/Leaderboard.js @@ -7,7 +7,7 @@ import Table from '../../elements/Table'; import PropsTypes from 'prop-types'; import getChallengeLeaderboard from '../../../api/getChallengeLeaderboard'; import _tableSearchQueryHandler from './_tableSearchQueryHandler'; -import {CALC_PAGES, RENDER_WHEN} from '../../../utils/globals'; +import {CALC_PAGES, EVALUATIONS_FORMAT, RENDER_WHEN} from '../../../utils/globals'; import Search from '../../elements/Search'; import Pager from '../../elements/Pager'; import Loading from '../../elements/Loading'; @@ -85,7 +85,6 @@ const Leaderboard = (props) => { const sortByUpdate = (elem) => { let metricIndex = 0; let newEntries = entries; - console.log(elem); switch (elem) { case 'submitter': if (submitterSorted) { @@ -125,6 +124,7 @@ const Leaderboard = (props) => { } break; } + console.log(newEntries); setEntries(newEntries); }; @@ -146,10 +146,6 @@ const Leaderboard = (props) => { ); }; - const evaluationsFormat = (evaluate) => { - return evaluate.score.slice(0, 7); - }; - const desktopRender = () => { return ( @@ -172,7 +168,7 @@ const Leaderboard = (props) => { metrics={getPossibleMetrics()} iterableColumnElement={{ name: 'evaluations', - format: evaluationsFormat, + format: EVALUATIONS_FORMAT, order: 3, align: 'left' }} diff --git a/src/components/sections/MyEntries.js b/src/components/sections/MyEntries.js index 5825876..4fab9b7 100644 --- a/src/components/sections/MyEntries.js +++ b/src/components/sections/MyEntries.js @@ -3,7 +3,7 @@ import {FlexColumn} from '../../utils/containers'; import {H2} from '../../utils/fonts'; import getMyEntries from '../../api/getMyEntries'; import Pager from '../elements/Pager'; -import {CALC_PAGES, RENDER_WHEN} from '../../utils/globals'; +import {CALC_PAGES, EVALUATIONS_FORMAT, RENDER_WHEN} from '../../utils/globals'; import Media from 'react-media'; import theme from '../../utils/theme'; import _tableSearchQueryHandler from './Leaderboard/_tableSearchQueryHandler'; @@ -15,9 +15,9 @@ const MyEntries = (props) => { const [myEntries, setMyEntries] = React.useState({}); const [loading, setLoading] = React.useState(true); const [pageNr, setPageNr] = React.useState(1); + const [whenSorted, setWhenSorted] = React.useState(false); + const [scoreSorted, setScoreSorted] = React.useState(false); /* eslint-disable */ - const [metricChoose, setMetricChoose] = React.useState(0); - const [sortBy, setSortBy] = React.useState(5); React.useEffect(() => { challengesRequest(); @@ -30,7 +30,7 @@ const MyEntries = (props) => { const getPossibleMetrics = () => { let metrics = []; for (let test of myEntriesFromAPI.tests) { - let myEval = `${test.metric} ${test.name}`; + let myEval = `${test.metric}.${test.name}`; if (myEval && !metrics.includes(myEval)) { metrics.push(myEval); } @@ -62,63 +62,74 @@ const MyEntries = (props) => { }; const challengesRequest = () => { - getMyEntries(props.challengeName, setMyEntriesFromAPI, setLoading); - getMyEntries(props.challengeName, setMyEntries, setLoading); + getMyEntries(props.challengeName, setMyEntriesFromAPI, setMyEntries, setLoading); }; const mobileRender = () => { } - const renderEvalResult = (evaluations, test) => { - for (let myEval of evaluations) { - if (myEval.test.name === test.name && myEval.test.metric === test.metric) { - return myEval.score.slice(0, 7); - } - } - return 'xxx'; - }; - const sortByUpdate = (elem) => { let newEntries = myEntries; - return myEntries; + switch (elem) { + case '#': + break; + case 'when': + if (whenSorted) { + newEntries = newEntries.sort((a, b) => (a.when > b.when) ? 1 : ((b.when > a.when) ? -1 : 0)); + setWhenSorted(false); + } else { + newEntries = newEntries.sort((a, b) => (a.when < b.when) ? 1 : ((b.when < a.when) ? -1 : 0)); + setWhenSorted(true); + } + break; + default: + if (scoreSorted) { + newEntries = newEntries.sort((a, b) => b.evaluations[elem] - a.evaluations[elem]); + setScoreSorted(false); + } else { + newEntries = newEntries.sort((a, b) => a.evaluations[elem] - b.evaluations[elem]); + setScoreSorted(true); + } + break; + } + console.log(newEntries); + setMyEntries(newEntries); }; const desktopRender = () => { - if (loading) { - return ( - - ); - } else { - return ( - -

- My entries -

- {myEntries.submissions ? - <> - - - - : } - - ); - } + return ( + +

+ My entries +

+ {myEntries && !loading ? + <> +
+ + + : } + + ); }; return ( diff --git a/src/utils/globals.js b/src/utils/globals.js index 32c6332..3e92c05 100644 --- a/src/utils/globals.js +++ b/src/utils/globals.js @@ -64,6 +64,12 @@ const RENDER_WHEN = (when) => { return `${when.slice(0, 10)} ${when.slice(11, 16)}`; }; +const EVALUATIONS_FORMAT = (evaluate) => { + if (Object.hasOwn(evaluate, 'score')) + return evaluate.score.slice(0, 7); + return evaluate.slice(0, 7); +}; + const IS_MOBILE = () => { return document.body.clientWidth <= 768; }; @@ -80,5 +86,6 @@ export { CALC_PAGES, RENDER_DEADLINE_TIME, IS_MOBILE, - RENDER_WHEN + RENDER_WHEN, + EVALUATIONS_FORMAT }; \ No newline at end of file