Compare commits

..

2 commits

Author SHA1 Message Date
b831ab4079
Feat: responsive layout
All checks were successful
continuous-integration/drone/push Build is passing
2022-07-29 00:04:46 +02:00
b690ace6b5
Feat: busy indicator for speed flowchart 2022-07-28 23:55:18 +02:00
3 changed files with 35 additions and 7 deletions

View file

@ -1,4 +1,10 @@
import { AppBar, Toolbar, Container, Typography } from '@mui/material'; import {
AppBar,
Toolbar,
Container,
Typography,
Skeleton,
} from '@mui/material';
import { useContext } from 'react'; import { useContext } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
@ -19,6 +25,7 @@ export default function Header() {
<img src='/logo192.png' className='header-icon'></img> <img src='/logo192.png' className='header-icon'></img>
</Link> </Link>
<Typography variant='h6'>{title}</Typography> <Typography variant='h6'>{title}</Typography>
{title === '' && <Skeleton height={20} width={200}></Skeleton>}
</Toolbar> </Toolbar>
</Container> </Container>
</AppBar> </AppBar>

View file

@ -5,7 +5,7 @@ import {
convertResultsToSpeedFlowchartResult, convertResultsToSpeedFlowchartResult,
SpeedFlowchartResult, SpeedFlowchartResult,
} from '../data/SpeedFlowchart'; } from '../data/SpeedFlowchart';
import { Card, CardContent, Grid, Typography } from '@mui/material'; import { Card, CardContent, Grid, Skeleton, Typography } from '@mui/material';
/** /**
* *
@ -15,6 +15,7 @@ export default function SpeedFlowchartPage() {
const { competitionId, categoryId } = useParams(); const { competitionId, categoryId } = useParams();
const { api, setTitle } = useContext(Context); const { api, setTitle } = useContext(Context);
const [loading, setLoading] = useState(true);
const [flowchartResult, setFlowchartResult] = const [flowchartResult, setFlowchartResult] =
useState<SpeedFlowchartResult>(); useState<SpeedFlowchartResult>();
@ -22,14 +23,18 @@ export default function SpeedFlowchartPage() {
if (competitionId === undefined || categoryId === undefined) { if (competitionId === undefined || categoryId === undefined) {
return; return;
} }
setTitle('');
api.getCompetitionResults(competitionId, categoryId).then(r => { api.getCompetitionResults(competitionId, categoryId).then(r => {
setTitle( setTitle(
`${r.comp_name} - ${ `${r.comp_name} - ${
r.categorys.filter(cat => cat.GrpId === categoryId)[0].name r.categorys.filter(cat => cat.GrpId === categoryId)[0]?.name ?? ''
}`, }`,
); );
setLoading(false);
console.log('loading false');
const flowchartResult = convertResultsToSpeedFlowchartResult(r); const flowchartResult = convertResultsToSpeedFlowchartResult(r);
console.log(flowchartResult); console.log(flowchartResult);
setFlowchartResult(flowchartResult); setFlowchartResult(flowchartResult);
@ -38,9 +43,18 @@ export default function SpeedFlowchartPage() {
return ( return (
<> <>
<Grid container spacing={2}> <Grid
container
spacing={2}
direction={{ xs: 'column-reverse', md: 'row' }}
>
{flowchartResult?.rounds.map((round, roundKey) => ( {flowchartResult?.rounds.map((round, roundKey) => (
<Grid key={`flowchart-column-${roundKey}`} item xs={12 / 5}> <Grid
key={`flowchart-column-${roundKey}`}
item
xs={12}
md={12 / flowchartResult.rounds.length}
>
<h3>{round.roundName}</h3> <h3>{round.roundName}</h3>
<Grid container spacing={2}> <Grid container spacing={2}>
{round.pairs.map((pair, pairKey) => ( {round.pairs.map((pair, pairKey) => (
@ -77,11 +91,18 @@ export default function SpeedFlowchartPage() {
</Grid> </Grid>
))} ))}
{flowchartResult === undefined && ( {flowchartResult === undefined && !loading && (
<Grid item xs={12} className={'center-children'}> <Grid item xs={12} className={'center-children'}>
This competition or category does not have a speed tree! This competition or category does not have a speed tree!
</Grid> </Grid>
)} )}
{loading &&
new Array(5).fill(0).map((_, i) => (
<Grid key={`flowchart-column-skeleton-${i}`} item xs={12 / 5}>
<Skeleton height={50}></Skeleton>
</Grid>
))}
</Grid> </Grid>
</> </>
); );

View file

@ -12,7 +12,7 @@ export default function PageTemplate(props: { children: JSX.Element }) {
return ( return (
<LocalizationProviderWrapper> <LocalizationProviderWrapper>
<Container <Container
sx={{ marginTop: '16px' }} sx={{ marginTop: '16px', marginBottom: '16px' }}
className='root-container' className='root-container'
maxWidth='lg' maxWidth='lg'
> >