Feat: search for comps and dark mode
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
cedd2a74ef
commit
1f99528511
4 changed files with 48 additions and 67 deletions
|
@ -14,8 +14,8 @@ interface CompetitionList {
|
|||
* A class for dealing with the digitalrock api
|
||||
*/
|
||||
export class DigitalrockAPi {
|
||||
// private BASE_URL = 'https://www.digitalrock.de/egroupware/ranking/json.php?';
|
||||
private BASE_URL = '/test.json?';
|
||||
private BASE_URL = 'https://www.digitalrock.de/egroupware/ranking/json.php?';
|
||||
// private BASE_URL = '/test.json?';
|
||||
|
||||
/**
|
||||
* function to get competitions
|
||||
|
|
|
@ -11,3 +11,8 @@ code {
|
|||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
|
||||
.center-children {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
|
@ -4,6 +4,7 @@ import {
|
|||
CardActions,
|
||||
CardContent,
|
||||
Grid,
|
||||
Skeleton,
|
||||
TextField,
|
||||
Typography,
|
||||
} from '@mui/material';
|
||||
|
@ -17,21 +18,35 @@ import { Competiton } from '../models/Competition';
|
|||
* @return {JSX.Element} calendar page
|
||||
*/
|
||||
export default function CalendarPage() {
|
||||
const [competitions, setCompetitions] = React.useState<Competiton[]>([]);
|
||||
const competitions = React.useRef<Competiton[]>([]);
|
||||
const [filteredCompetitions, setFilteredCompetitions] =
|
||||
React.useState<Competiton[]>();
|
||||
const [filter, setFilter] = React.useState<string>();
|
||||
|
||||
const { api } = React.useContext(Context);
|
||||
const navigate = useNavigate();
|
||||
|
||||
React.useEffect(() => {
|
||||
api.getCompetitions('GER').then(result => {
|
||||
console.log(result.competitions.filter);
|
||||
setCompetitions(
|
||||
result.competitions.filter(competition =>
|
||||
competition.discipline?.includes('speed'),
|
||||
),
|
||||
competitions.current = result.competitions.filter(competition =>
|
||||
competition.discipline?.includes('speed'),
|
||||
);
|
||||
setFilteredCompetitions(filterCompetitions(competitions.current));
|
||||
});
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (competitions.current.length > 0)
|
||||
setFilteredCompetitions(filterCompetitions(competitions.current));
|
||||
}, [filter]);
|
||||
|
||||
const filterCompetitions = (competitions: Competiton[]) => {
|
||||
return competitions.filter(c =>
|
||||
c.name.toLowerCase().includes(filter?.toLocaleLowerCase() ?? ''),
|
||||
);
|
||||
};
|
||||
|
||||
const openCompetition = (competitionId: string, categoryId: string) => {
|
||||
navigate(`/speed-flowchart/${competitionId}/${categoryId}`);
|
||||
};
|
||||
|
@ -43,10 +58,11 @@ export default function CalendarPage() {
|
|||
<TextField
|
||||
label='search for competition'
|
||||
variant='outlined'
|
||||
onChange={e => setFilter(e.target.value)}
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
{competitions.map(competition => (
|
||||
{filteredCompetitions?.map(competition => (
|
||||
<Grid item key={`competition-card-${competition.WetId}`} xs={12}>
|
||||
<Card>
|
||||
<CardContent>
|
||||
|
@ -82,6 +98,24 @@ export default function CalendarPage() {
|
|||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
{filteredCompetitions === undefined && (
|
||||
<Grid item xs={12}>
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Skeleton height={50}></Skeleton>
|
||||
<Skeleton></Skeleton>
|
||||
</CardContent>
|
||||
<CardActions>
|
||||
<Skeleton width={200}></Skeleton>
|
||||
</CardActions>
|
||||
</Card>
|
||||
</Grid>
|
||||
)}
|
||||
{filteredCompetitions?.length === 0 && (
|
||||
<Grid item xs={12} className={'center-children'}>
|
||||
Nothing found!
|
||||
</Grid>
|
||||
)}
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
|
|
|
@ -18,66 +18,8 @@ export default function Theme(props: { children: JSX.Element }) {
|
|||
},
|
||||
},
|
||||
palette: {
|
||||
mode: 'light',
|
||||
primary: {
|
||||
main: '#81a1c1',
|
||||
dark: '#5e81ac',
|
||||
contrastText: '#fff',
|
||||
},
|
||||
secondary: {
|
||||
main: '#88c0d0',
|
||||
light: '#8fbcbb',
|
||||
contrastText: '#3b4252',
|
||||
},
|
||||
error: {
|
||||
main: '#bf616a',
|
||||
},
|
||||
warning: {
|
||||
main: '#d08770',
|
||||
},
|
||||
info: {
|
||||
main: '#ebcb8b',
|
||||
},
|
||||
success: {
|
||||
main: '#a3be8c',
|
||||
},
|
||||
text: {
|
||||
primary: '#2e3440',
|
||||
secondary: '#4c566a',
|
||||
},
|
||||
grey: {
|
||||
A200: '#eceff4',
|
||||
A400: '#e5e9f0',
|
||||
A700: '#d8dee9',
|
||||
},
|
||||
mode: 'dark',
|
||||
},
|
||||
shadows: [
|
||||
'none',
|
||||
'rgba(50, 50, 93, 0.125) 0px 3px 8px -1px,rgba(0, 0, 0, 0.13) 0px 2px 4px -2px;',
|
||||
'rgba(50, 50, 93, 0.125) 0px 2px 5px -1px,rgba(0, 0, 0, 0.13) 0px 1px 3px -1px;',
|
||||
'rgba(50, 50, 93, 0.125) 0px 4px 11px -2px,rgba(0, 0, 0, 0.13) 0px 3px 6px -3px;',
|
||||
'rgba(50, 50, 93, 0.125) 0px 5px 14px -2px,rgba(0, 0, 0, 0.13) 0px 4px 7px -4px;',
|
||||
'rgba(50, 50, 93, 0.125) 0px 6px 17px -3px,rgba(0, 0, 0, 0.13) 0px 5px 9px -5px;',
|
||||
'rgba(50, 50, 93, 0.125) 0px 7px 20px -3px,rgba(0, 0, 0, 0.13) 0px 6px 10px -6px;',
|
||||
'rgba(50, 50, 93, 0.125) 0px 8px 22px -4px,rgba(0, 0, 0, 0.13) 0px 7px 12px -7px;',
|
||||
'rgba(50, 50, 93, 0.125) 0px 8px 24px -5px,rgba(0, 0, 0, 0.13) 0px 8px 13px -7px;',
|
||||
'rgba(50, 50, 93, 0.125) 0px 8px 27px -5px,rgba(0, 0, 0, 0.13) 0px 8px 15px -8px;',
|
||||
'rgba(50, 50, 93, 0.125) 0px 13px 27px -5px,rgba(0, 0, 0, 0.13) 0px 8px 16px -8px;',
|
||||
'rgba(50, 50, 93, 0.125) 0px 25px 35px -5px,rgba(0, 0, 0, 0.13) 0px 15px 20px -12px;',
|
||||
'rgba(50, 50, 93, 0.125) 0px 30px 45px -7px,rgba(0, 0, 0, 0.13) 0px 20px 25px -15px;',
|
||||
'rgba(50, 50, 93, 0.125) 0px 35px 55px -10px,rgba(0, 0, 0, 0.13) 0px 25px 30px -18px;',
|
||||
'rgba(50, 50, 93, 0.125) 0px 40px 65px -12px,rgba(0, 0, 0, 0.13) 0px 30px 35px -21px;',
|
||||
'rgba(50, 50, 93, 0.125) 0px 45px 75px -15px,rgba(0, 0, 0, 0.13) 0px 35px 40px -24px;',
|
||||
'rgba(50, 50, 93, 0.125) 0px 50px 85px -17px,rgba(0, 0, 0, 0.13) 0px 40px 45px -27px;',
|
||||
'rgba(50, 50, 93, 0.125) 0px 55px 95px -20px,rgba(0, 0, 0, 0.13) 0px 45px 50px -30px;',
|
||||
'rgba(50, 50, 93, 0.125) 0px 60px 105px -22px,rgba(0, 0, 0, 0.13) 0px 50px 55px -33px;',
|
||||
'rgba(50, 50, 93, 0.125) 0px 65px 110px -25px,rgba(0, 0, 0, 0.13) 0px 55px 60px -36px;',
|
||||
'rgba(50, 50, 93, 0.125) 0px 70px 115px -27px,rgba(0, 0, 0, 0.13) 0px 60px 65px -39px;',
|
||||
'none',
|
||||
'none',
|
||||
'none',
|
||||
'none',
|
||||
],
|
||||
});
|
||||
return (
|
||||
<ThemeProvider theme={Theme}>
|
||||
|
|
Loading…
Reference in a new issue