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

Compare commits

base: s444498:3e66cfa3a9a40b228b27be102107aa0cbb8603d2
Branches Tags
s444498:master
s444498:submit_tags
..
compare: s444498:45601ce05cd52d84defc744a8835d48a4e1fc39a
Branches Tags
s444498:master
s444498:submit_tags

No commits in common. "3e66cfa3a9a40b228b27be102107aa0cbb8603d2" and "45601ce05cd52d84defc744a8835d48a4e1fc39a" have entirely different histories.
3e66cfa3a9 ... 45601ce05c

12 changed files with 243 additions and 638 deletions
Show Stats Expand all files Collapse all files

12
src/App.js
View File

@ -127,30 +127,26 @@ const App = () => {
path={`${CHALLENGE_PAGE}/:challengeId/leaderboard`} path={`${CHALLENGE_PAGE}/:challengeId/leaderboard`}
element={<Challenge section={0} />} element={<Challenge section={0} />}
/> />
<Route
path={`${CHALLENGE_PAGE}/:challengeId/allentries`}
element={<Challenge section={1} />}
/>
<Route <Route
path={`${CHALLENGE_PAGE}/:challengeId/readme`} path={`${CHALLENGE_PAGE}/:challengeId/readme`}
element={<Challenge section={2} />} element={<Challenge section={1} />}
/> />
<Route <Route
path={`${CHALLENGE_PAGE}/:challengeId/howto`} path={`${CHALLENGE_PAGE}/:challengeId/howto`}
element={ element={
<Challenge <Challenge
popUpMessageHandler={popUpMessageHandler} popUpMessageHandler={popUpMessageHandler}
section={3} section={2}
/> />
} }
/> />
<Route <Route
path={`${CHALLENGE_PAGE}/:challengeId/myentries`} path={`${CHALLENGE_PAGE}/:challengeId/myentries`}
element={<Challenge section={4} />} element={<Challenge section={3} />}
/> />
<Route <Route
path={`${CHALLENGE_PAGE}/:challengeId/submit`} path={`${CHALLENGE_PAGE}/:challengeId/submit`}
element={<Challenge section={5} />} element={<Challenge section={4} />}
/> />
<Route path={CHALLENGES_PAGE} element={<Challenges />} /> <Route path={CHALLENGES_PAGE} element={<Challenges />} />
<Route <Route

66
src/api/getAllEntries.js
View File

@ -1,66 +0,0 @@
import { API } from '../utils/globals';
import KeyCloakService from '../services/KeyCloakService';
const getAllEntries = (
challengeName,
setDataOriginalState,
setDataState,
setLoadingState,
setScoreSorted
) => {
fetch(`${API}/challenge-all-submissions/${challengeName}`, {
headers: { Authorization: `Bearer ${KeyCloakService.getToken()}` },
})
.then((response) => response.json())
.then((data) => {
if (setDataOriginalState) setDataOriginalState(data);
let item = {};
let result = [];
let initSetScoreSorted = [];
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 (item.evaluations) {
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 = {};
}
// eslint-disable-next-line no-unused-vars
for (let _ of tests) {
initSetScoreSorted.push(false);
}
setDataState(result);
if (setScoreSorted) setScoreSorted(initSetScoreSorted);
if (setLoadingState) setLoadingState(false);
});
};
export default getAllEntries;

210
src/components/specific_challenge/AllEntries/AllEntries.js
View File

@ -1,210 +0,0 @@
import React from 'react';
import theme from '../../../utils/theme';
import Media from 'react-media';
import { FlexColumn } from '../../../utils/containers';
import { H2 } from '../../../utils/fonts';
import {
CALC_PAGES,
EVALUATIONS_FORMAT,
RENDER_WHEN,
} from '../../../utils/globals';
import Loading from '../../generic/Loading';
import Pager from '../../generic/Pager';
import Table from '../Table';
import Search from '../../generic/Search';
import allEntriesSearchQueryHandler from './allEntriesSearchQueryHandler';
import getAllEntries from '../../../api/getAllEntries';
const AllEntries = (props) => {
const [entriesFromApi, setEntriesFromApi] = React.useState([]);
const [entriesAll, setEntriesAll] = React.useState([]);
const [entries, setEntries] = React.useState([]);
const [pageNr, setPageNr] = React.useState(1);
const [loading, setLoading] = React.useState(true);
const [scoresSorted, setScoresSorted] = React.useState([]);
const [submitterSorted, setSubmitterSorted] = React.useState(false);
const [whenSorted, setWhenSorted] = React.useState(false);
React.useEffect(() => {
if (props.challengeName) challengeDataRequest(props.challengeName);
}, [props.challengeName]);
const challengeDataRequest = (challengeName) => {
getAllEntries(challengeName, setEntriesFromApi, setEntriesAll);
getAllEntries(
challengeName,
undefined,
setEntries,
setLoading,
setScoresSorted
);
};
const getPossibleMetrics = () => {
let metrics = [];
if (entriesFromApi.tests) {
for (let test of entriesFromApi.tests) {
let myEval = `${test.metric}.${test.name}`;
if (myEval && !metrics.includes(myEval)) {
metrics.push(myEval);
}
}
}
return metrics;
};
const getAllEntriesHeader = () => {
let header = ['#', 'submitter'];
for (let metric of getPossibleMetrics()) {
header.push(metric);
}
header.push('when');
return header;
};
const searchQueryHandler = (event) => {
allEntriesSearchQueryHandler(event, entriesAll, setPageNr, setEntries);
};
const nextPage = () => {
if (pageNr !== CALC_PAGES(entries ? entries : [])) {
let newPage = pageNr + 1;
setPageNr(newPage);
}
};
const previousPage = () => {
if (pageNr !== 1) {
let newPage = pageNr - 1;
setPageNr(newPage);
}
};
const sortByUpdate = (elem, i) => {
let newEntries = entries;
switch (elem) {
case '#':
break;
case 'submitter':
if (submitterSorted) {
setSubmitterSorted(false);
newEntries = newEntries.sort((a, b) =>
a.submitter.toLowerCase() < b.submitter.toLowerCase()
? 1
: b.submitter.toLowerCase() < a.submitter.toLowerCase()
? -1
: 0
);
} else {
setSubmitterSorted(true);
newEntries = newEntries.sort((a, b) =>
a.submitter.toLowerCase() > b.submitter.toLowerCase()
? 1
: b.submitter.toLowerCase() > a.submitter.toLowerCase()
? -1
: 0
);
}
break;
case 'when':
if (whenSorted) {
setWhenSorted(false);
newEntries = newEntries.sort((a, b) =>
a.when < b.when ? 1 : b.when < a.when ? -1 : 0
);
} else {
setWhenSorted(true);
newEntries = newEntries.sort((a, b) =>
a.when > b.when ? 1 : b.when > a.when ? -1 : 0
);
}
break;
default:
// eslint-disable-next-line no-case-declarations
let metricIndex = getPossibleMetrics().indexOf(elem);
// eslint-disable-next-line no-case-declarations
let newScoresSorted = scoresSorted;
if (scoresSorted[metricIndex]) {
newEntries = newEntries.sort(
(a, b) =>
(b.evaluations ? b.evaluations[elem] : -1) -
(a.evaluations ? a.evaluations[elem] : -1)
);
newScoresSorted[metricIndex] = false;
setScoresSorted(newScoresSorted);
} else {
newEntries = newEntries.sort(
(a, b) =>
(a.evaluations ? a.evaluations[elem] : -1) -
(b.evaluations ? b.evaluations[elem] : -1)
);
newScoresSorted[metricIndex] = true;
setScoresSorted(newScoresSorted);
}
break;
}
setEntries(newEntries);
};
const mobileRender = () => {
return <></>;
};
const desktopRender = () => {
return (
<FlexColumn padding="24px" as="section" width="100%" maxWidth="1400px">
<H2 as="h2" margin="0 0 32px 0">
All Entries
</H2>
{!loading ? (
<>
<Search searchQueryHandler={searchQueryHandler} />
<Table
challengeName={props.challengeName}
headerElements={getAllEntriesHeader()}
possibleMetrics={getPossibleMetrics()}
gridTemplateColumns={
'1fr 3fr ' + '3fr '.repeat(getPossibleMetrics().length) + ' 3fr'
}
user={props.user}
staticColumnElements={[
{ name: 'id', format: null, order: 1, align: 'left' },
{ name: 'submitter', format: null, order: 2, align: 'left' },
{ name: 'when', format: RENDER_WHEN, order: 5, align: 'right' },
]}
metrics={getPossibleMetrics()}
iterableColumnElement={{
name: 'evaluations',
format: EVALUATIONS_FORMAT,
order: 3,
align: 'left',
}}
pageNr={pageNr}
elements={entries}
sortByUpdate={sortByUpdate}
/>
<Pager
pageNr={pageNr}
width="72px"
borderRadius="64px"
pages={CALC_PAGES(entries, 2)}
nextPage={nextPage}
previousPage={previousPage}
number={`${pageNr} / ${CALC_PAGES(entries, 2)}`}
/>
</>
) : (
<Loading />
)}
</FlexColumn>
);
};
return (
<>
<Media query={theme.mobile}>{mobileRender()}</Media>
<Media query={theme.desktop}>{desktopRender()}</Media>
</>
);
};
export default AllEntries;

32
src/components/specific_challenge/AllEntries/allEntriesSearchQueryHandler.js
View File

@ -1,32 +0,0 @@
const allEntriesSearchQueryHandler = (
event,
entriesFromApi,
setPageNr,
setEntries
) => {
let searchQuery = event.target.value;
let submissionsToRender = [];
setPageNr(1);
if (searchQuery === '') setEntries(entriesFromApi);
else {
for (let entry of entriesFromApi) {
const { id, when, submitter } = entry;
console.log(entry);
let evaluations = '';
if (entry.evaluations) {
for (let evaluation of Object.values(entry.evaluations)) {
evaluations += ` ${evaluation}`;
}
}
const str = `${id} ${submitter} ${when.slice(11, 16)} ${when.slice(
0,
10
)} ${evaluations}`;
if (str.toLowerCase().includes(searchQuery.toLowerCase()))
submissionsToRender.push(entry);
}
setEntries(submissionsToRender);
}
};
export default allEntriesSearchQueryHandler;

1
src/components/specific_challenge/AllEntries/index.js
View File

@ -1 +0,0 @@
export { default } from './AllEntries';

11
src/components/specific_challenge/Challenge.js
View File

@ -16,7 +16,6 @@ import textIco from '../../assets/text_ico.svg';
import getChallengeInfo from '../../api/getChallengeInfo'; import getChallengeInfo from '../../api/getChallengeInfo';
import Loading from '../generic/Loading'; import Loading from '../generic/Loading';
import getUser from '../../api/getUser'; import getUser from '../../api/getUser';
import AllEntries from './AllEntries/AllEntries';
const Challenge = (props) => { const Challenge = (props) => {
const challengeName = useParams().challengeId; const challengeName = useParams().challengeId;
@ -40,10 +39,6 @@ const Challenge = (props) => {
/> />
); );
case 1: case 1:
return (
<AllEntries challengeName={challengeName} setLoading={setLoading} />
);
case 2:
return ( return (
<Readme <Readme
challengeName={challengeName} challengeName={challengeName}
@ -52,7 +47,7 @@ const Challenge = (props) => {
deadline={challenge.deadline} deadline={challenge.deadline}
/> />
); );
case 3: case 2:
return ( return (
<HowTo <HowTo
popUpMessageHandler={props.popUpMessageHandler} popUpMessageHandler={props.popUpMessageHandler}
@ -60,9 +55,9 @@ const Challenge = (props) => {
user={user} user={user}
/> />
); );
case 4: case 3:
return <MyEntries challengeName={challengeName} />; return <MyEntries challengeName={challengeName} />;
case 5: case 4:
return <Submit challengeName={challengeName} setLoading={setLoading} />; return <Submit challengeName={challengeName} setLoading={setLoading} />;
default: default:
return ( return (

61
src/components/specific_challenge/ColumnFilterIcon.js
View File

@ -1,48 +1,31 @@
import React from 'react'; import React from 'react';
import { Svg } from '../../utils/containers'; import {Svg} from '../../utils/containers';
import arrow from '../../assets/arrow.svg'; import arrow from '../../assets/arrow.svg';
import filterIco from '../../assets/filter_direction.svg'; import filterIco from '../../assets/filter_direction.svg';
import theme from '../../utils/theme'; import theme from '../../utils/theme';
const ColumnFilterIcon = (props) => { const ColumnFilterIcon = (props) => {
const renderSecondIcon = () => { const renderSecondIcon = () => {
if (props.index === props.active) { if (props.index === props.active) {
return ( return (
<Svg <Svg width='8px' src={filterIco} backgroundColor={theme.colors.dark}
width="8px" margin='0 0 0 2px' rotate={props.rotateIcon ? '0' : '180deg'}/>
src={filterIco} );
cursor={props.cursor} } else {
backgroundColor={theme.colors.dark} return (
margin="0 0 0 2px" <Svg width='8px' src={arrow} backgroundColor={theme.colors.dark}
rotate={props.rotateIcon ? '0' : '180deg'} margin='0 0 2px 0'/>
/> );
); }
} else { };
return (
<Svg
width="8px"
src={arrow}
cursor={props.cursor}
backgroundColor={theme.colors.dark}
margin="0 0 2px 0"
/>
);
}
};
return ( return (
<> <>
<Svg <Svg width='8px' rotate='180deg' src={arrow}
width="8px" backgroundColor={theme.colors.dark} margin='2px 0 0 0'/>
rotate="180deg" {renderSecondIcon()}
src={arrow} </>
cursor={props.cursor} );
backgroundColor={theme.colors.dark}
margin="2px 0 0 0"
/>
{renderSecondIcon()}
</>
);
}; };
export default ColumnFilterIcon; export default ColumnFilterIcon;

11
src/components/specific_challenge/DesktopChallengeMenu.js
View File

@ -38,16 +38,9 @@ const Option = styled(FlexColumn)`
`; `;
const DesktopChallengeMenu = (props) => { const DesktopChallengeMenu = (props) => {
let options = ['Leaderboard', 'All entries', 'Readme', 'How to']; let options = ['Leaderboard', 'Readme', 'How to'];
if (KeyCloakService.isLoggedIn()) if (KeyCloakService.isLoggedIn())
options = [ options = ['Leaderboard', 'Readme', 'How to', 'My entries', 'Submit'];
'Leaderboard',
'All entries',
'Readme',
'How to',
'My entries',
'Submit',
];
return ( return (
<DesktopChallengeMenuStyle> <DesktopChallengeMenuStyle>
{options.map((option, index) => { {options.map((option, index) => {

49
src/components/specific_challenge/MyEntries/myEntriesSearchQueryHandler.js
View File

@ -1,33 +1,24 @@
const myEntriesSearchQueryHandler = ( const myEntriesSearchQueryHandler = (event, entriesFromApi, setPageNr, setEntries) => {
event, let searchQuery = event.target.value;
entriesFromApi, let submissionsToRender = [];
setPageNr, setPageNr(1);
setEntries if (searchQuery === '')
) => { setEntries(entriesFromApi);
let searchQuery = event.target.value; else {
let submissionsToRender = []; for (let entry of entriesFromApi) {
setPageNr(1); const {id, when} = entry;
if (searchQuery === '') setEntries(entriesFromApi); let evaluations = '';
else { for (let evaluation of Object.values(entry.evaluations)) {
for (let entry of entriesFromApi) { evaluations += ` ${evaluation}`;
const { id, when } = entry; }
let evaluations = ''; const str = `${id} ${when.slice(11, 16)} ${when.slice(0, 10)} ${evaluations}`;
if (entry.evaluations) { console.log(entry);
for (let evaluation of Object.values(entry.evaluations)) { console.log(str);
evaluations += ` ${evaluation}`; if (str.toLowerCase().includes(searchQuery.toLowerCase()))
submissionsToRender.push(entry);
} }
} setEntries(submissionsToRender);
const str = `${id} ${when.slice(11, 16)} ${when.slice(
0,
10
)} ${evaluations}`;
console.log(entry);
console.log(str);
if (str.toLowerCase().includes(searchQuery.toLowerCase()))
submissionsToRender.push(entry);
} }
setEntries(submissionsToRender);
}
}; };
export default myEntriesSearchQueryHandler; export default myEntriesSearchQueryHandler;

424
src/components/specific_challenge/Table.js
View File

@ -1,20 +1,20 @@
import React from 'react'; import React from 'react';
import { Container, FlexColumn, FlexRow, Grid } from '../../utils/containers'; import {Container, FlexColumn, FlexRow, Grid} from '../../utils/containers';
import Media from 'react-media'; import Media from 'react-media';
import theme from '../../utils/theme'; import theme from '../../utils/theme';
import { ELEMENTS_PER_PAGE } from '../../utils/globals'; import {ELEMENTS_PER_PAGE} from '../../utils/globals';
import { Body, Medium } from '../../utils/fonts'; import {Body, Medium} from '../../utils/fonts';
import styled from 'styled-components'; import styled from 'styled-components';
import ColumnFilterIcon from './ColumnFilterIcon'; import ColumnFilterIcon from './ColumnFilterIcon';
const Line = styled(FlexRow)` const Line = styled(FlexRow)`
position: absolute; position: absolute;
top: ${({ top }) => (top ? top : 'auto')}; top: ${({top}) => top ? top : 'auto'};
bottom: ${({ bottom }) => (bottom ? bottom : '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: ${({ height }) => (height ? height : '1px')}; height: ${({height}) => height ? height : '1px'};
`; `;
const MobileTableStyle = styled(Container)` const MobileTableStyle = styled(Container)`
@ -23,27 +23,23 @@ const MobileTableStyle = styled(Container)`
margin: 32px 0; margin: 32px 0;
tr:nth-of-type(odd) { tr:nth-of-type(odd) {
background: ${({ theme }) => theme.colors.dark03}; background: ${({theme}) => theme.colors.dark03};
} }
th { th {
background: ${({ theme }) => theme.colors.dark05}; background: ${({theme}) => theme.colors.dark05};
color: ${({ theme }) => theme.colors.white}; color: ${({theme}) => theme.colors.white};
} }
td, td, th {
th {
padding: 6px; padding: 6px;
border: 1px solid ${({ theme }) => theme.colors.white}; border: 1px solid ${({theme}) => theme.colors.white};
text-align: left; text-align: left;
} }
display: block; display: block;
thead, thead, tbody, th, td {
tbody,
th,
td {
display: block; display: block;
} }
@ -55,7 +51,7 @@ const MobileTableStyle = styled(Container)`
td { td {
border: none; border: none;
border-bottom: 1px solid ${({ theme }) => theme.colors.dark01}; border-bottom: 1px solid ${({theme}) => theme.colors.dark01};
position: relative; position: relative;
padding-left: 50%; padding-left: 50%;
@ -71,260 +67,222 @@ const MobileTableStyle = styled(Container)`
} }
td:nth-of-type(1):before { td:nth-of-type(1):before {
content: ${({ headerElements }) => content: ${({headerElements}) => headerElements[0] ? `'${headerElements[0]}'` : ''};
headerElements[0] ? `'${headerElements[0]}'` : ''};
} }
td:nth-of-type(2):before { td:nth-of-type(2):before {
content: ${({ headerElements }) => content: ${({headerElements}) => headerElements[1] ? `'${headerElements[1]}'` : ''};
headerElements[1] ? `'${headerElements[1]}'` : ''};
} }
td:nth-of-type(3):before { td:nth-of-type(3):before {
content: ${({ headerElements }) => content: ${({headerElements}) => headerElements[2] ? `'${headerElements[2]}'` : ''};
headerElements[2] ? `'${headerElements[2]}'` : ''};
} }
td:nth-of-type(4):before { td:nth-of-type(4):before {
content: ${({ headerElements }) => content: ${({headerElements}) => headerElements[3] ? `'${headerElements[3]}'` : ''};
headerElements[3] ? `'${headerElements[3]}'` : ''};
} }
td:nth-of-type(5):before { td:nth-of-type(5):before {
content: ${({ headerElements }) => content: ${({headerElements}) => headerElements[4] ? `'${headerElements[4]}'` : ''};
headerElements[4] ? `'${headerElements[4]}'` : ''};
} }
td:nth-of-type(6):before { td:nth-of-type(6):before {
content: ${({ headerElements }) => content: ${({headerElements}) => headerElements[5] ? `'${headerElements[5]}'` : ''};
headerElements[5] ? `'${headerElements[5]}'` : ''};
} }
td:nth-of-type(7):before { td:nth-of-type(7):before {
content: ${({ headerElements }) => content: ${({headerElements}) => headerElements[6] ? `'${headerElements[6]}'` : ''};
headerElements[6] ? `'${headerElements[6]}'` : ''};
} }
td:nth-of-type(8):before { td:nth-of-type(8):before {
content: ${({ headerElements }) => content: ${({headerElements}) => headerElements[7] ? `'${headerElements[7]}'` : ''};
headerElements[7] ? `'${headerElements[7]}'` : ''};
} }
td:nth-of-type(9):before { td:nth-of-type(9):before {
content: ${({ headerElements }) => content: ${({headerElements}) => headerElements[8] ? `'${headerElements[8]}'` : ''};
headerElements[8] ? `'${headerElements[8]}'` : ''};
} }
td:nth-of-type(10):before { td:nth-of-type(10):before {
content: ${({ headerElements }) => content: ${({headerElements}) => headerElements[9] ? `'${headerElements[9]}'` : ''};
headerElements[9] ? `'${headerElements[9]}'` : ''};
} }
`; `;
const Table = (props) => { const Table = (props) => {
const [, updateState] = React.useState(); const [, updateState] = React.useState();
const forceUpdate = React.useCallback(() => updateState({}), []); const forceUpdate = React.useCallback(() => updateState({}), []);
const [activeIcon, setActiveIcon] = React.useState(null); const [activeIcon, setActiveIcon] = React.useState(null);
const [rotateActiveIcon, setRotateActiveIcon] = React.useState(false); const [rotateActiveIcon, setRotateActiveIcon] = React.useState(false);
const metricsRender = (elem) => { const metricsRender = (elem) => {
if (!props.iterableColumnElement) return <></>; if (!props.iterableColumnElement)
if (Array.isArray(elem[props.iterableColumnElement.name])) return <></>;
elem = elem[props.iterableColumnElement.name]; if (Array.isArray(elem[props.iterableColumnElement.name]))
else { elem = elem[props.iterableColumnElement.name];
let newElem = []; else {
for (let metric of props.possibleMetrics) { let newElem = [];
if (Object.hasOwn(elem, props.iterableColumnElement.name)) { for (let metric of props.possibleMetrics) {
if (elem[props.iterableColumnElement.name][metric] === '-1') if (Object.hasOwn(elem, props.iterableColumnElement.name)) {
newElem.push('N/A'); if (elem[props.iterableColumnElement.name][metric] === '-1')
else newElem.push(elem[props.iterableColumnElement.name][metric]); newElem.push('N/A');
} else { else
newElem.push('N/A'); newElem.push(elem[props.iterableColumnElement.name][metric]);
} else {
newElem.push('N/A');
}
}
elem = newElem;
} }
}
elem = newElem;
}
return elem.map((iterableElem, i) => {
return (
<Body
key={`metric-result-${i}`}
as="td"
order={props.iterableColumnElement.order}
textAlign={props.iterableColumnElement.align}
minWidth="72px"
>
{props.iterableColumnElement.format
? props.iterableColumnElement.format(iterableElem)
: iterableElem}
</Body>
);
});
};
const rowRender = (elem) => {
if (elem.submitter === props.user) {
return props.staticColumnElements.map((elemName, i) => {
return ( return (
<Medium elem.map((iterableElem, i) => {
key={`leaderboard-static-elemName-${i}-${elem[elemName.name]}`} return (
as="td" <Body key={`metric-result-${i}`} as='td'
order={elemName.order} order={props.iterableColumnElement.order}
textAlign={elemName.align} textAlign={props.iterableColumnElement.align} minWidth='72px'>
> {props.iterableColumnElement.format ?
{elemName.format props.iterableColumnElement.format(iterableElem) : iterableElem}
? elemName.format(elem[elemName.name]) </Body>
: elem[elemName.name]} );
</Medium> })
); );
}); };
}
return props.staticColumnElements.map((elemName, i) => {
return (
<Body
key={`leaderboard-static-elemName-${i}-${elem[elemName.name]}`}
as="td"
order={elemName.order}
textAlign={elemName.align}
>
{elemName.format
? elemName.format(elem[elemName.name])
: elem[elemName.name]}
</Body>
);
});
};
const desktopRender = () => { const rowRender = (elem) => {
const n = (props.pageNr - 1) * (ELEMENTS_PER_PAGE * 2); if (elem.submitter === props.user) {
let elementsToMap = props.elements.slice(n, n + ELEMENTS_PER_PAGE * 2); return (
if (elementsToMap.length > 0) { props.staticColumnElements.map((elemName, i) => {
return ( return (
<FlexColumn as="table" margin="32px 0 72px 0" width="100%"> <Medium key={`leaderboard-static-elemName-${i}-${elem[elemName.name]}`}
<FlexColumn as="tbody" width="100%"> as='td'
<Grid order={elemName.order} textAlign={elemName.align}>
as="tr" {elemName.format ? elemName.format(elem[elemName.name]) : elem[elemName.name]}
gridGap="20px" </Medium>
position="relative" );
width="100%" })
padding="4px" );
margin="0 0 6px 0" }
gridTemplateColumns={props.gridTemplateColumns} return (
> props.staticColumnElements.map((elemName, i) => {
{props.headerElements.map((elem, i) => {
return ( return (
<FlexRow <Body key={`leaderboard-static-elemName-${i}-${elem[elemName.name]}`}
key={`table-header-${i}`} as='td'
alignmentX="flex-start" order={elemName.order} textAlign={elemName.align}>
as="td" {elemName.format ? elemName.format(elem[elemName.name]) : elem[elemName.name]}
cursor="pointer" </Body>
onClick={() => {
if (activeIcon === i) {
let newRotateActiveIcon = !rotateActiveIcon;
setRotateActiveIcon(newRotateActiveIcon);
} else {
setRotateActiveIcon(false);
}
setActiveIcon(i);
props.sortByUpdate(elem, i);
forceUpdate();
}}
>
<Medium
cursor={elem !== '#' ? 'pointer' : ''}
textAlign={elem === 'when' ? 'right' : 'left'}
width={elem === 'when' ? '100%' : 'auto'}
padding="0 6px 0 0"
overflowWrap="break-word"
minWidth={elem === 'result' ? '72px' : 'none'}
>
{elem.replace('.', ' ')}
</Medium>
{elem !== '#' ? (
<ColumnFilterIcon
cursor="pointer"
index={i}
active={activeIcon}
rotateIcon={rotateActiveIcon}
/>
) : (
''
)}
</FlexRow>
); );
})} })
<Line height="2px" top="100%" as="td" shadow={theme.shadow} /> );
</Grid> };
{elementsToMap.map((elem, index) => {
return (
<Grid
as="tr"
key={`leaderboard-row-${index}`}
backgroundColor={
index % 2 === 1 ? theme.colors.dark01 : 'transparent'
}
gridTemplateColumns={props.gridTemplateColumns}
gridGap="20px"
position="relative"
width="100%"
padding="4px"
>
{rowRender(elem)}
{props.headerElements ? metricsRender(elem) : ''}
</Grid>
);
})}
</FlexColumn>
</FlexColumn>
);
} else {
return <Medium margin="72px 0">No results ;c</Medium>;
}
};
const mobileRender = () => { const desktopRender = () => {
const n = (props.pageNr - 1) * ELEMENTS_PER_PAGE; const n = (props.pageNr - 1) * (ELEMENTS_PER_PAGE * 2);
let elementsToMap = props.elements.slice(n, n + ELEMENTS_PER_PAGE); let elementsToMap = props.elements.slice(n, n + (ELEMENTS_PER_PAGE * 2));
if (elementsToMap.length > 0) { if (elementsToMap.length > 0) {
return ( return (
<MobileTableStyle <FlexColumn as='table' margin='32px 0 72px 0' width='100%'>
as="table" <FlexColumn as='tbody' width='100%'>
staticColumnElements={props.staticColumnElements} <Grid as='tr'
headerElements={props.headerElements} gridGap='20px' position='relative' width='100%' padding='4px' margin='0 0 6px 0'
> gridTemplateColumns={props.gridTemplateColumns}>
<Container as="thead"> {props.headerElements.map((elem, i) => {
<Container as="tr"> return (
{props.headerElements.map((elem, i) => { <FlexRow key={`table-header-${i}`} alignmentX='flex-start' as='td'
return ( onClick={() => {
<Medium key={`table-header-${i}`} as="th"> if (activeIcon === i) {
{elem} let newRotateActiveIcon = !rotateActiveIcon;
</Medium> setRotateActiveIcon(newRotateActiveIcon);
); } else {
})} setRotateActiveIcon(false);
</Container> }
</Container> setActiveIcon(i);
<Container as="tbody"> props.sortByUpdate(elem, i);
{elementsToMap.map((elem, index) => { forceUpdate();
return ( }}>
<Grid as="tr" key={`leaderboard-row-${index}`}> <Medium textAlign={elem === 'submitter' ? 'left' : 'right'}
{rowRender(elem)} width={elem === 'when' ? '100%' : 'auto'} padding='0 6px 0 0'
{props.headerElements ? metricsRender(elem) : ''} minWidth={elem === 'result' ? '72px' : 'none'}>
</Grid> {elem}
); </Medium>
})} {elem !== '#' ?
</Container> <ColumnFilterIcon index={i} active={activeIcon}
</MobileTableStyle> rotateIcon={rotateActiveIcon}/>
); : ''}
} else { </FlexRow>
return <Medium margin="72px 0">No results ;c</Medium>; );
} })}
}; <Line height='2px' top='32px' as='td' shadow={theme.shadow}/>
</Grid>
{elementsToMap.map((elem, index) => {
return (
<Grid as='tr' key={`leaderboard-row-${index}`}
backgroundColor={index % 2 === 1 ? theme.colors.dark01 : 'transparent'}
gridTemplateColumns={props.gridTemplateColumns}
gridGap='20px' position='relative' width='100%' padding='4px'>
{rowRender(elem)}
{props.headerElements ? metricsRender(elem) : ''}
</Grid>
);
})}
</FlexColumn>
</FlexColumn>
);
} else {
return (
<Medium margin='72px 0'>
No results ;c
</Medium>
);
}
};
return ( const mobileRender = () => {
<> const n = (props.pageNr - 1) * ELEMENTS_PER_PAGE;
<Media query={theme.mobile}>{mobileRender()}</Media> let elementsToMap = props.elements.slice(n, n + ELEMENTS_PER_PAGE);
<Media query={theme.desktop}>{desktopRender()}</Media> if (elementsToMap.length > 0) {
</> return (
); <MobileTableStyle as='table' staticColumnElements={props.staticColumnElements}
headerElements={props.headerElements}>
<Container as='thead'>
<Container as='tr'>
{props.headerElements.map((elem, i) => {
return (
<Medium key={`table-header-${i}`} as='th'>
{elem}
</Medium>
);
})}
</Container>
</Container>
<Container as='tbody'>
{elementsToMap.map((elem, index) => {
return (
<Grid as='tr' key={`leaderboard-row-${index}`}>
{rowRender(elem)}
{props.headerElements ? metricsRender(elem) : ''}
</Grid>
);
})}
</Container>
</MobileTableStyle>
);
} else {
return (
<Medium margin='72px 0'>
No results ;c
</Medium>
);
}
};
return (
<>
<Media query={theme.mobile}>
{mobileRender()}
</Media>
<Media query={theme.desktop}>
{desktopRender()}
</Media>
</>
);
}; };
export default Table; export default Table;

2
src/utils/containers.js
View File

@ -35,8 +35,6 @@ const Container = styled.div`
order: ${({ order }) => (order ? order : '0')}; order: ${({ order }) => (order ? order : '0')};
z-index: ${({ zIndex }) => (zIndex ? zIndex : '0')}; z-index: ${({ zIndex }) => (zIndex ? zIndex : '0')};
list-style: ${({ listStyle }) => (listStyle ? listStyle : 'none')}; list-style: ${({ listStyle }) => (listStyle ? listStyle : 'none')};
overflow-wrap: ${({ overflowWrap }) =>
overflowWrap ? overflowWrap : 'normal'};
`; `;
const FlexRow = styled(Container)` const FlexRow = styled(Container)`

2
src/utils/globals.js
View File

@ -16,7 +16,7 @@ const POLICY_PRIVACY_PAGE = '/policy-privacy';
const CSI_LINK = 'https://csi.amu.edu.pl/'; const CSI_LINK = 'https://csi.amu.edu.pl/';
const ROOT_URL = window.location.origin; const ROOT_URL = window.location.origin;
const LOGIN_REQUIRED_PAGES = ['myentries', 'submit']; const LOGIN_REQUIRED_PAGES = ['myentries', 'submit', 'howto'];
const MINI_DESCRIPTION_RENDER = (description) => { const MINI_DESCRIPTION_RENDER = (description) => {
if (description) { if (description) {