bluerock/speed-flowchart-web
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/data/DigitalrockApi.tsx
View file

@ -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

5
src/index.css
View file

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

44
src/pages/CalendarPage.tsx
View file

@ -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 =>
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>
</>
);

60
src/utils/Theme.tsx
View file

@ -18,66 +18,8 @@ export default function Theme(props: { children: JSX.Element }) {
},
},
palette: {
mode: 'light',
primary: {
main: '#81a1c1',
dark: '#5e81ac',
contrastText: '#fff',
mode: 'dark',
},
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 (
<ThemeProvider theme={Theme}>