allentries on desktop
This commit is contained in:
parent
27bbe74dd0
commit
3e66cfa3a9
14
src/App.js
14
src/App.js
@ -128,28 +128,28 @@ const App = () => {
|
||||
element={<Challenge section={0} />}
|
||||
/>
|
||||
<Route
|
||||
path={`${CHALLENGE_PAGE}/:challengeId/readme`}
|
||||
path={`${CHALLENGE_PAGE}/:challengeId/allentries`}
|
||||
element={<Challenge section={1} />}
|
||||
/>
|
||||
<Route
|
||||
path={`${CHALLENGE_PAGE}/:challengeId/readme`}
|
||||
element={<Challenge section={2} />}
|
||||
/>
|
||||
<Route
|
||||
path={`${CHALLENGE_PAGE}/:challengeId/howto`}
|
||||
element={
|
||||
<Challenge
|
||||
popUpMessageHandler={popUpMessageHandler}
|
||||
section={2}
|
||||
section={3}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path={`${CHALLENGE_PAGE}/:challengeId/myentries`}
|
||||
element={<Challenge section={3} />}
|
||||
/>
|
||||
<Route
|
||||
path={`${CHALLENGE_PAGE}/:challengeId/submit`}
|
||||
element={<Challenge section={4} />}
|
||||
/>
|
||||
<Route
|
||||
path={`${CHALLENGE_PAGE}/:challengeId/allentries`}
|
||||
path={`${CHALLENGE_PAGE}/:challengeId/submit`}
|
||||
element={<Challenge section={5} />}
|
||||
/>
|
||||
<Route path={CHALLENGES_PAGE} element={<Challenges />} />
|
||||
|
||||
@ -1,16 +1,66 @@
|
||||
import { API } from '../utils/globals';
|
||||
import KeyCloakService from '../services/KeyCloakService';
|
||||
|
||||
const getAllEntries = async (setDataState, challengeName, setLoading) => {
|
||||
await fetch(`${API}/challenge-all-submissions/${challengeName}`)
|
||||
const getAllEntries = (
|
||||
challengeName,
|
||||
setDataOriginalState,
|
||||
setDataState,
|
||||
setLoadingState,
|
||||
setScoreSorted
|
||||
) => {
|
||||
fetch(`${API}/challenge-all-submissions/${challengeName}`, {
|
||||
headers: { Authorization: `Bearer ${KeyCloakService.getToken()}` },
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
console.log(data);
|
||||
setDataState(data.entries);
|
||||
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);
|
||||
});
|
||||
|
||||
if (setLoading) {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
export default getAllEntries;
|
||||
|
||||
@ -4,7 +4,7 @@ import Media from 'react-media';
|
||||
import { FlexColumn } from '../../../utils/containers';
|
||||
import { H2 } from '../../../utils/fonts';
|
||||
import {
|
||||
// CALC_PAGES,
|
||||
CALC_PAGES,
|
||||
EVALUATIONS_FORMAT,
|
||||
RENDER_WHEN,
|
||||
} from '../../../utils/globals';
|
||||
@ -17,31 +17,39 @@ 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 [submitterSorted, setSubmitterSorted] = React.useState(false);
|
||||
// const [entriesSorted, setEntriesSorted] = React.useState(false);
|
||||
const [whenSorted, setWhenSorted] = React.useState(false);
|
||||
const [scoresSorted, setScoresSorted] = React.useState([]);
|
||||
const [submitterSorted, setSubmitterSorted] = React.useState(false);
|
||||
const [whenSorted, setWhenSorted] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
challengeDataRequest(props.challengeName);
|
||||
if (props.challengeName) challengeDataRequest(props.challengeName);
|
||||
}, [props.challengeName]);
|
||||
|
||||
const challengeDataRequest = (challengeName) => {
|
||||
getAllEntries(setEntriesFromApi, challengeName);
|
||||
getAllEntries(setEntries, challengeName, setLoading);
|
||||
getAllEntries(challengeName, setEntriesFromApi, setEntriesAll);
|
||||
getAllEntries(
|
||||
challengeName,
|
||||
undefined,
|
||||
setEntries,
|
||||
setLoading,
|
||||
setScoresSorted
|
||||
);
|
||||
};
|
||||
|
||||
const getPossibleMetrics = () => {
|
||||
let metrics = [];
|
||||
// for (let test of entriesFromApi.tests) {
|
||||
// let myEval = `${test.metric}.${test.name}`;
|
||||
// if (myEval && !metrics.includes(myEval)) {
|
||||
// metrics.push(myEval);
|
||||
// }
|
||||
// }
|
||||
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;
|
||||
};
|
||||
|
||||
@ -50,20 +58,19 @@ const AllEntries = (props) => {
|
||||
for (let metric of getPossibleMetrics()) {
|
||||
header.push(metric);
|
||||
}
|
||||
header.push('entries');
|
||||
header.push('when');
|
||||
return header;
|
||||
};
|
||||
|
||||
const searchQueryHandler = (event) => {
|
||||
allEntriesSearchQueryHandler(event, entriesFromApi, setPageNr, setEntries);
|
||||
allEntriesSearchQueryHandler(event, entriesAll, setPageNr, setEntries);
|
||||
};
|
||||
|
||||
const nextPage = () => {
|
||||
// if (pageNr !== CALC_PAGES(entries ? entries : [])) {
|
||||
// let newPage = pageNr + 1;
|
||||
// setPageNr(newPage);
|
||||
// }
|
||||
if (pageNr !== CALC_PAGES(entries ? entries : [])) {
|
||||
let newPage = pageNr + 1;
|
||||
setPageNr(newPage);
|
||||
}
|
||||
};
|
||||
|
||||
const previousPage = () => {
|
||||
@ -78,17 +85,38 @@ const AllEntries = (props) => {
|
||||
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
|
||||
);
|
||||
setWhenSorted(false);
|
||||
} else {
|
||||
setWhenSorted(true);
|
||||
newEntries = newEntries.sort((a, b) =>
|
||||
a.when > b.when ? 1 : b.when > a.when ? -1 : 0
|
||||
);
|
||||
setWhenSorted(true);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
@ -124,7 +152,7 @@ const AllEntries = (props) => {
|
||||
|
||||
const desktopRender = () => {
|
||||
return (
|
||||
<FlexColumn padding="24px" as="section" width="100%" maxWidth="1200px">
|
||||
<FlexColumn padding="24px" as="section" width="100%" maxWidth="1400px">
|
||||
<H2 as="h2" margin="0 0 32px 0">
|
||||
All Entries
|
||||
</H2>
|
||||
@ -134,18 +162,14 @@ const AllEntries = (props) => {
|
||||
<Table
|
||||
challengeName={props.challengeName}
|
||||
headerElements={getAllEntriesHeader()}
|
||||
// gridTemplateColumns={
|
||||
// entries[0]
|
||||
// ? '1fr 3fr ' +
|
||||
// '2fr '.repeat(entries[0].evaluations.length) +
|
||||
// '1fr 2fr'
|
||||
// : ''
|
||||
// }
|
||||
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: 'times', format: null, order: 4, align: 'left' },
|
||||
{ name: 'when', format: RENDER_WHEN, order: 5, align: 'right' },
|
||||
]}
|
||||
metrics={getPossibleMetrics()}
|
||||
@ -156,17 +180,17 @@ const AllEntries = (props) => {
|
||||
align: 'left',
|
||||
}}
|
||||
pageNr={pageNr}
|
||||
elements={[]}
|
||||
elements={entries}
|
||||
sortByUpdate={sortByUpdate}
|
||||
/>
|
||||
<Pager
|
||||
pageNr={pageNr}
|
||||
width="72px"
|
||||
borderRadius="64px"
|
||||
pages={2} //CALC_PAGES(entries, 2)
|
||||
pages={CALC_PAGES(entries, 2)}
|
||||
nextPage={nextPage}
|
||||
previousPage={previousPage}
|
||||
number={1} //`${pageNr} / ${CALC_PAGES(entries, 2)}`}
|
||||
number={`${pageNr} / ${CALC_PAGES(entries, 2)}`}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
|
||||
@ -10,15 +10,18 @@ const allEntriesSearchQueryHandler = (
|
||||
if (searchQuery === '') setEntries(entriesFromApi);
|
||||
else {
|
||||
for (let entry of entriesFromApi) {
|
||||
const { id, submitter, when, times } = entry;
|
||||
const { id, when, submitter } = entry;
|
||||
console.log(entry);
|
||||
let evaluations = '';
|
||||
for (let evaluation of entry.evaluations) {
|
||||
evaluations += ` ${evaluation.score}`;
|
||||
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} ${times}`;
|
||||
)} ${evaluations}`;
|
||||
if (str.toLowerCase().includes(searchQuery.toLowerCase()))
|
||||
submissionsToRender.push(entry);
|
||||
}
|
||||
|
||||
@ -40,6 +40,10 @@ const Challenge = (props) => {
|
||||
/>
|
||||
);
|
||||
case 1:
|
||||
return (
|
||||
<AllEntries challengeName={challengeName} setLoading={setLoading} />
|
||||
);
|
||||
case 2:
|
||||
return (
|
||||
<Readme
|
||||
challengeName={challengeName}
|
||||
@ -48,7 +52,7 @@ const Challenge = (props) => {
|
||||
deadline={challenge.deadline}
|
||||
/>
|
||||
);
|
||||
case 2:
|
||||
case 3:
|
||||
return (
|
||||
<HowTo
|
||||
popUpMessageHandler={props.popUpMessageHandler}
|
||||
@ -56,14 +60,10 @@ const Challenge = (props) => {
|
||||
user={user}
|
||||
/>
|
||||
);
|
||||
case 3:
|
||||
return <MyEntries challengeName={challengeName} />;
|
||||
case 4:
|
||||
return <Submit challengeName={challengeName} setLoading={setLoading} />;
|
||||
return <MyEntries challengeName={challengeName} />;
|
||||
case 5:
|
||||
return (
|
||||
<AllEntries challengeName={challengeName} setLoading={setLoading} />
|
||||
);
|
||||
return <Submit challengeName={challengeName} setLoading={setLoading} />;
|
||||
default:
|
||||
return (
|
||||
<Leaderboard
|
||||
|
||||
@ -1,31 +1,48 @@
|
||||
import React from 'react';
|
||||
import {Svg} from '../../utils/containers';
|
||||
import { Svg } from '../../utils/containers';
|
||||
import arrow from '../../assets/arrow.svg';
|
||||
import filterIco from '../../assets/filter_direction.svg';
|
||||
import theme from '../../utils/theme';
|
||||
|
||||
const ColumnFilterIcon = (props) => {
|
||||
const renderSecondIcon = () => {
|
||||
if (props.index === props.active) {
|
||||
return (
|
||||
<Svg width='8px' src={filterIco} backgroundColor={theme.colors.dark}
|
||||
margin='0 0 0 2px' rotate={props.rotateIcon ? '0' : '180deg'}/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Svg width='8px' src={arrow} backgroundColor={theme.colors.dark}
|
||||
margin='0 0 2px 0'/>
|
||||
);
|
||||
}
|
||||
};
|
||||
const renderSecondIcon = () => {
|
||||
if (props.index === props.active) {
|
||||
return (
|
||||
<Svg
|
||||
width="8px"
|
||||
src={filterIco}
|
||||
cursor={props.cursor}
|
||||
backgroundColor={theme.colors.dark}
|
||||
margin="0 0 0 2px"
|
||||
rotate={props.rotateIcon ? '0' : '180deg'}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Svg
|
||||
width="8px"
|
||||
src={arrow}
|
||||
cursor={props.cursor}
|
||||
backgroundColor={theme.colors.dark}
|
||||
margin="0 0 2px 0"
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Svg width='8px' rotate='180deg' src={arrow}
|
||||
backgroundColor={theme.colors.dark} margin='2px 0 0 0'/>
|
||||
{renderSecondIcon()}
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<Svg
|
||||
width="8px"
|
||||
rotate="180deg"
|
||||
src={arrow}
|
||||
cursor={props.cursor}
|
||||
backgroundColor={theme.colors.dark}
|
||||
margin="2px 0 0 0"
|
||||
/>
|
||||
{renderSecondIcon()}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ColumnFilterIcon;
|
||||
export default ColumnFilterIcon;
|
||||
|
||||
@ -38,15 +38,15 @@ const Option = styled(FlexColumn)`
|
||||
`;
|
||||
|
||||
const DesktopChallengeMenu = (props) => {
|
||||
let options = ['Leaderboard', 'Readme', 'How to'];
|
||||
let options = ['Leaderboard', 'All entries', 'Readme', 'How to'];
|
||||
if (KeyCloakService.isLoggedIn())
|
||||
options = [
|
||||
'Leaderboard',
|
||||
'All entries',
|
||||
'Readme',
|
||||
'How to',
|
||||
'My entries',
|
||||
'Submit',
|
||||
'All entries',
|
||||
];
|
||||
return (
|
||||
<DesktopChallengeMenuStyle>
|
||||
|
||||
@ -1,24 +1,33 @@
|
||||
const myEntriesSearchQueryHandler = (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} = entry;
|
||||
let evaluations = '';
|
||||
for (let evaluation of Object.values(entry.evaluations)) {
|
||||
evaluations += ` ${evaluation}`;
|
||||
}
|
||||
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);
|
||||
const myEntriesSearchQueryHandler = (
|
||||
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 } = entry;
|
||||
let evaluations = '';
|
||||
if (entry.evaluations) {
|
||||
for (let evaluation of Object.values(entry.evaluations)) {
|
||||
evaluations += ` ${evaluation}`;
|
||||
}
|
||||
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;
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
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 theme from '../../utils/theme';
|
||||
import {ELEMENTS_PER_PAGE} from '../../utils/globals';
|
||||
import {Body, Medium} from '../../utils/fonts';
|
||||
import { ELEMENTS_PER_PAGE } from '../../utils/globals';
|
||||
import { Body, Medium } from '../../utils/fonts';
|
||||
import styled from 'styled-components';
|
||||
import ColumnFilterIcon from './ColumnFilterIcon';
|
||||
|
||||
const Line = styled(FlexRow)`
|
||||
position: absolute;
|
||||
top: ${({top}) => top ? top : 'auto'};
|
||||
bottom: ${({bottom}) => bottom ? bottom : 'auto'};
|
||||
top: ${({ top }) => (top ? top : 'auto')};
|
||||
bottom: ${({ bottom }) => (bottom ? bottom : 'auto')};
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: ${({theme}) => theme.colors.dark04};
|
||||
height: ${({height}) => height ? height : '1px'};
|
||||
background-color: ${({ theme }) => theme.colors.dark04};
|
||||
height: ${({ height }) => (height ? height : '1px')};
|
||||
`;
|
||||
|
||||
const MobileTableStyle = styled(Container)`
|
||||
@ -23,23 +23,27 @@ const MobileTableStyle = styled(Container)`
|
||||
margin: 32px 0;
|
||||
|
||||
tr:nth-of-type(odd) {
|
||||
background: ${({theme}) => theme.colors.dark03};
|
||||
background: ${({ theme }) => theme.colors.dark03};
|
||||
}
|
||||
|
||||
th {
|
||||
background: ${({theme}) => theme.colors.dark05};
|
||||
color: ${({theme}) => theme.colors.white};
|
||||
background: ${({ theme }) => theme.colors.dark05};
|
||||
color: ${({ theme }) => theme.colors.white};
|
||||
}
|
||||
|
||||
td, th {
|
||||
td,
|
||||
th {
|
||||
padding: 6px;
|
||||
border: 1px solid ${({theme}) => theme.colors.white};
|
||||
border: 1px solid ${({ theme }) => theme.colors.white};
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
display: block;
|
||||
|
||||
thead, tbody, th, td {
|
||||
thead,
|
||||
tbody,
|
||||
th,
|
||||
td {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -51,7 +55,7 @@ const MobileTableStyle = styled(Container)`
|
||||
|
||||
td {
|
||||
border: none;
|
||||
border-bottom: 1px solid ${({theme}) => theme.colors.dark01};
|
||||
border-bottom: 1px solid ${({ theme }) => theme.colors.dark01};
|
||||
position: relative;
|
||||
padding-left: 50%;
|
||||
|
||||
@ -67,222 +71,260 @@ const MobileTableStyle = styled(Container)`
|
||||
}
|
||||
|
||||
td:nth-of-type(1):before {
|
||||
content: ${({headerElements}) => headerElements[0] ? `'${headerElements[0]}'` : ''};
|
||||
content: ${({ headerElements }) =>
|
||||
headerElements[0] ? `'${headerElements[0]}'` : ''};
|
||||
}
|
||||
|
||||
td:nth-of-type(2):before {
|
||||
content: ${({headerElements}) => headerElements[1] ? `'${headerElements[1]}'` : ''};
|
||||
content: ${({ headerElements }) =>
|
||||
headerElements[1] ? `'${headerElements[1]}'` : ''};
|
||||
}
|
||||
|
||||
td:nth-of-type(3):before {
|
||||
content: ${({headerElements}) => headerElements[2] ? `'${headerElements[2]}'` : ''};
|
||||
content: ${({ headerElements }) =>
|
||||
headerElements[2] ? `'${headerElements[2]}'` : ''};
|
||||
}
|
||||
|
||||
td:nth-of-type(4):before {
|
||||
content: ${({headerElements}) => headerElements[3] ? `'${headerElements[3]}'` : ''};
|
||||
content: ${({ headerElements }) =>
|
||||
headerElements[3] ? `'${headerElements[3]}'` : ''};
|
||||
}
|
||||
|
||||
td:nth-of-type(5):before {
|
||||
content: ${({headerElements}) => headerElements[4] ? `'${headerElements[4]}'` : ''};
|
||||
content: ${({ headerElements }) =>
|
||||
headerElements[4] ? `'${headerElements[4]}'` : ''};
|
||||
}
|
||||
|
||||
td:nth-of-type(6):before {
|
||||
content: ${({headerElements}) => headerElements[5] ? `'${headerElements[5]}'` : ''};
|
||||
content: ${({ headerElements }) =>
|
||||
headerElements[5] ? `'${headerElements[5]}'` : ''};
|
||||
}
|
||||
|
||||
td:nth-of-type(7):before {
|
||||
content: ${({headerElements}) => headerElements[6] ? `'${headerElements[6]}'` : ''};
|
||||
content: ${({ headerElements }) =>
|
||||
headerElements[6] ? `'${headerElements[6]}'` : ''};
|
||||
}
|
||||
|
||||
td:nth-of-type(8):before {
|
||||
content: ${({headerElements}) => headerElements[7] ? `'${headerElements[7]}'` : ''};
|
||||
content: ${({ headerElements }) =>
|
||||
headerElements[7] ? `'${headerElements[7]}'` : ''};
|
||||
}
|
||||
|
||||
td:nth-of-type(9):before {
|
||||
content: ${({headerElements}) => headerElements[8] ? `'${headerElements[8]}'` : ''};
|
||||
content: ${({ headerElements }) =>
|
||||
headerElements[8] ? `'${headerElements[8]}'` : ''};
|
||||
}
|
||||
|
||||
td:nth-of-type(10):before {
|
||||
content: ${({headerElements}) => headerElements[9] ? `'${headerElements[9]}'` : ''};
|
||||
content: ${({ headerElements }) =>
|
||||
headerElements[9] ? `'${headerElements[9]}'` : ''};
|
||||
}
|
||||
`;
|
||||
|
||||
const Table = (props) => {
|
||||
const [, updateState] = React.useState();
|
||||
const forceUpdate = React.useCallback(() => updateState({}), []);
|
||||
const [activeIcon, setActiveIcon] = React.useState(null);
|
||||
const [rotateActiveIcon, setRotateActiveIcon] = React.useState(false);
|
||||
const [, updateState] = React.useState();
|
||||
const forceUpdate = React.useCallback(() => updateState({}), []);
|
||||
const [activeIcon, setActiveIcon] = React.useState(null);
|
||||
const [rotateActiveIcon, setRotateActiveIcon] = React.useState(false);
|
||||
|
||||
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 (Object.hasOwn(elem, props.iterableColumnElement.name)) {
|
||||
if (elem[props.iterableColumnElement.name][metric] === '-1')
|
||||
newElem.push('N/A');
|
||||
else
|
||||
newElem.push(elem[props.iterableColumnElement.name][metric]);
|
||||
} else {
|
||||
newElem.push('N/A');
|
||||
}
|
||||
}
|
||||
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 (
|
||||
<Medium 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]}
|
||||
</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 n = (props.pageNr - 1) * (ELEMENTS_PER_PAGE * 2);
|
||||
let elementsToMap = props.elements.slice(n, n + (ELEMENTS_PER_PAGE * 2));
|
||||
if (elementsToMap.length > 0) {
|
||||
return (
|
||||
<FlexColumn as='table' margin='32px 0 72px 0' width='100%'>
|
||||
<FlexColumn as='tbody' width='100%'>
|
||||
<Grid as='tr'
|
||||
gridGap='20px' position='relative' width='100%' padding='4px' margin='0 0 6px 0'
|
||||
gridTemplateColumns={props.gridTemplateColumns}>
|
||||
{props.headerElements.map((elem, i) => {
|
||||
return (
|
||||
<FlexRow key={`table-header-${i}`} alignmentX='flex-start' as='td'
|
||||
onClick={() => {
|
||||
if (activeIcon === i) {
|
||||
let newRotateActiveIcon = !rotateActiveIcon;
|
||||
setRotateActiveIcon(newRotateActiveIcon);
|
||||
} else {
|
||||
setRotateActiveIcon(false);
|
||||
}
|
||||
setActiveIcon(i);
|
||||
props.sortByUpdate(elem, i);
|
||||
forceUpdate();
|
||||
}}>
|
||||
<Medium textAlign={elem === 'submitter' ? 'left' : 'right'}
|
||||
width={elem === 'when' ? '100%' : 'auto'} padding='0 6px 0 0'
|
||||
minWidth={elem === 'result' ? '72px' : 'none'}>
|
||||
{elem}
|
||||
</Medium>
|
||||
{elem !== '#' ?
|
||||
<ColumnFilterIcon index={i} active={activeIcon}
|
||||
rotateIcon={rotateActiveIcon}/>
|
||||
: ''}
|
||||
</FlexRow>
|
||||
);
|
||||
})}
|
||||
<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>
|
||||
);
|
||||
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 (Object.hasOwn(elem, props.iterableColumnElement.name)) {
|
||||
if (elem[props.iterableColumnElement.name][metric] === '-1')
|
||||
newElem.push('N/A');
|
||||
else newElem.push(elem[props.iterableColumnElement.name][metric]);
|
||||
} else {
|
||||
return (
|
||||
<Medium margin='72px 0'>
|
||||
No results ;c
|
||||
</Medium>
|
||||
);
|
||||
newElem.push('N/A');
|
||||
}
|
||||
};
|
||||
}
|
||||
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 mobileRender = () => {
|
||||
const n = (props.pageNr - 1) * ELEMENTS_PER_PAGE;
|
||||
let elementsToMap = props.elements.slice(n, n + ELEMENTS_PER_PAGE);
|
||||
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>
|
||||
);
|
||||
}
|
||||
};
|
||||
const rowRender = (elem) => {
|
||||
if (elem.submitter === props.user) {
|
||||
return props.staticColumnElements.map((elemName, i) => {
|
||||
return (
|
||||
<Medium
|
||||
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]}
|
||||
</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>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Media query={theme.mobile}>
|
||||
{mobileRender()}
|
||||
</Media>
|
||||
<Media query={theme.desktop}>
|
||||
{desktopRender()}
|
||||
</Media>
|
||||
</>
|
||||
);
|
||||
const desktopRender = () => {
|
||||
const n = (props.pageNr - 1) * (ELEMENTS_PER_PAGE * 2);
|
||||
let elementsToMap = props.elements.slice(n, n + ELEMENTS_PER_PAGE * 2);
|
||||
if (elementsToMap.length > 0) {
|
||||
return (
|
||||
<FlexColumn as="table" margin="32px 0 72px 0" width="100%">
|
||||
<FlexColumn as="tbody" width="100%">
|
||||
<Grid
|
||||
as="tr"
|
||||
gridGap="20px"
|
||||
position="relative"
|
||||
width="100%"
|
||||
padding="4px"
|
||||
margin="0 0 6px 0"
|
||||
gridTemplateColumns={props.gridTemplateColumns}
|
||||
>
|
||||
{props.headerElements.map((elem, i) => {
|
||||
return (
|
||||
<FlexRow
|
||||
key={`table-header-${i}`}
|
||||
alignmentX="flex-start"
|
||||
as="td"
|
||||
cursor="pointer"
|
||||
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 n = (props.pageNr - 1) * ELEMENTS_PER_PAGE;
|
||||
let elementsToMap = props.elements.slice(n, n + ELEMENTS_PER_PAGE);
|
||||
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;
|
||||
|
||||
@ -35,6 +35,8 @@ const Container = styled.div`
|
||||
order: ${({ order }) => (order ? order : '0')};
|
||||
z-index: ${({ zIndex }) => (zIndex ? zIndex : '0')};
|
||||
list-style: ${({ listStyle }) => (listStyle ? listStyle : 'none')};
|
||||
overflow-wrap: ${({ overflowWrap }) =>
|
||||
overflowWrap ? overflowWrap : 'normal'};
|
||||
`;
|
||||
|
||||
const FlexRow = styled(Container)`
|
||||
|
||||
@ -16,7 +16,7 @@ const POLICY_PRIVACY_PAGE = '/policy-privacy';
|
||||
const CSI_LINK = 'https://csi.amu.edu.pl/';
|
||||
const ROOT_URL = window.location.origin;
|
||||
|
||||
const LOGIN_REQUIRED_PAGES = ['myentries', 'submit', 'howto'];
|
||||
const LOGIN_REQUIRED_PAGES = ['myentries', 'submit'];
|
||||
|
||||
const MINI_DESCRIPTION_RENDER = (description) => {
|
||||
if (description) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user