Feat: search for comps and dark mode
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
Dorian Zedler 2022-07-28 18:59:28 +02:00
parent cedd2a74ef
commit 1f99528511
Signed by: dorian
GPG key ID: 989DE36109AFA354
4 changed files with 48 additions and 67 deletions

View file

@ -14,8 +14,8 @@ interface CompetitionList {
* A class for dealing with the digitalrock api * A class for dealing with the digitalrock api
*/ */
export class DigitalrockAPi { export class DigitalrockAPi {
// private BASE_URL = 'https://www.digitalrock.de/egroupware/ranking/json.php?'; private BASE_URL = 'https://www.digitalrock.de/egroupware/ranking/json.php?';
private BASE_URL = '/test.json?'; // private BASE_URL = '/test.json?';
/** /**
* function to get competitions * function to get competitions

View file

@ -11,3 +11,8 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace; monospace;
} }
.center-children {
display: flex;
justify-content: center;
}

View file

@ -4,6 +4,7 @@ import {
CardActions, CardActions,
CardContent, CardContent,
Grid, Grid,
Skeleton,
TextField, TextField,
Typography, Typography,
} from '@mui/material'; } from '@mui/material';
@ -17,21 +18,35 @@ import { Competiton } from '../models/Competition';
* @return {JSX.Element} calendar page * @return {JSX.Element} calendar page
*/ */
export default function CalendarPage() { 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 { api } = React.useContext(Context);
const navigate = useNavigate(); const navigate = useNavigate();
React.useEffect(() => { React.useEffect(() => {
api.getCompetitions('GER').then(result => { api.getCompetitions('GER').then(result => {
console.log(result.competitions.filter); console.log(result.competitions.filter);
setCompetitions( competitions.current = result.competitions.filter(competition =>
result.competitions.filter(competition => competition.discipline?.includes('speed'),
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) => { const openCompetition = (competitionId: string, categoryId: string) => {
navigate(`/speed-flowchart/${competitionId}/${categoryId}`); navigate(`/speed-flowchart/${competitionId}/${categoryId}`);
}; };
@ -43,10 +58,11 @@ export default function CalendarPage() {
<TextField <TextField
label='search for competition' label='search for competition'
variant='outlined' variant='outlined'
onChange={e => setFilter(e.target.value)}
fullWidth fullWidth
/> />
</Grid> </Grid>
{competitions.map(competition => ( {filteredCompetitions?.map(competition => (
<Grid item key={`competition-card-${competition.WetId}`} xs={12}> <Grid item key={`competition-card-${competition.WetId}`} xs={12}>
<Card> <Card>
<CardContent> <CardContent>
@ -82,6 +98,24 @@ export default function CalendarPage() {
</Card> </Card>
</Grid> </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> </Grid>
</> </>
); );

View file

@ -18,66 +18,8 @@ export default function Theme(props: { children: JSX.Element }) {
}, },
}, },
palette: { palette: {
mode: 'light', mode: 'dark',
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',
},
}, },
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 ( return (
<ThemeProvider theme={Theme}> <ThemeProvider theme={Theme}>