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

Compare commits

base: bluerock:62f9d3c5d9a85576994e43514064ee8b17372c9c
Branches Tags
bluerock:main
bluerock:pages
..
compare: bluerock:c730b182a9a26512f988bf909a28ff634de808d4
Branches Tags
bluerock:pages
bluerock:main

No commits in common. "62f9d3c5d9a85576994e43514064ee8b17372c9c" and "c730b182a9a26512f988bf909a28ff634de808d4" have entirely different histories.
62f9d3c5d9 ... c730b182a9

7 changed files with 25 additions and 161 deletions
Show stats Expand all files Collapse all files

43
package-lock.json generated
View file

@ -23,7 +23,6 @@
"date-fns": "^2.29.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-qrcode-logo": "^2.7.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"typescript": "^4.7.4",
@ -11973,11 +11972,6 @@
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
},
"node_modules/lodash.isequal": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
"integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
},
"node_modules/lodash.memoize": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@ -14244,11 +14238,6 @@
"teleport": ">=0.2.0"
}
},
"node_modules/qrcode-generator": {
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/qrcode-generator/-/qrcode-generator-1.4.4.tgz",
"integrity": "sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw=="
},
"node_modules/qs": {
"version": "6.10.3",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
@ -14516,19 +14505,6 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
},
"node_modules/react-qrcode-logo": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/react-qrcode-logo/-/react-qrcode-logo-2.7.0.tgz",
"integrity": "sha512-79Ce+1GlETAbu8fQGAoHczjvXjsm044+FeVAutu9lwJ/w0hRKRRPPHQRkPmXZK4aPi/H9Fqv+7P29VYQ9Yo2dA==",
"dependencies": {
"lodash.isequal": "^4.5.0",
"qrcode-generator": "^1.4.1"
},
"peerDependencies": {
"react": ">=16.4.1",
"react-dom": ">=16.4.1"
}
},
"node_modules/react-refresh": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@ -25844,11 +25820,6 @@
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
},
"lodash.isequal": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
"integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
},
"lodash.memoize": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@ -27302,11 +27273,6 @@
"resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
"integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw=="
},
"qrcode-generator": {
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/qrcode-generator/-/qrcode-generator-1.4.4.tgz",
"integrity": "sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw=="
},
"qs": {
"version": "6.10.3",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
@ -27498,15 +27464,6 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
},
"react-qrcode-logo": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/react-qrcode-logo/-/react-qrcode-logo-2.7.0.tgz",
"integrity": "sha512-79Ce+1GlETAbu8fQGAoHczjvXjsm044+FeVAutu9lwJ/w0hRKRRPPHQRkPmXZK4aPi/H9Fqv+7P29VYQ9Yo2dA==",
"requires": {
"lodash.isequal": "^4.5.0",
"qrcode-generator": "^1.4.1"
}
},
"react-refresh": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",

1
package.json
View file

@ -18,7 +18,6 @@
"date-fns": "^2.29.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-qrcode-logo": "^2.7.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"typescript": "^4.7.4",

BIN
public/badge-white.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 49 KiB

BIN
public/badge.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 46 KiB

2
src/components/Header.tsx
View file

@ -22,7 +22,7 @@ export default function Header() {
<Container maxWidth={containerMaxWidth} className='header-container'>
<Toolbar className='header-container'>
<Link to='/' style={{ textDecoration: 'none', color: 'inherit' }}>
<img src='/badge-white.png' className='header-icon'></img>
<img src='/logo192.png' className='header-icon'></img>
</Link>
<Typography variant='h6'>{title}</Typography>
{title === '' && <Skeleton height={20} width={200}></Skeleton>}

3
src/models/Participant.tsx
View file

@ -5,7 +5,6 @@ export interface ParticipantFromApi {
PerId: string;
firstname: string;
lastname: string;
start_number: string;
result_rank?: number;
['result_rank0']?: string;
['result_rank1']?: string;
@ -22,7 +21,6 @@ export interface Participant {
lastName: string;
results: Result[];
overallRank?: number;
startNumber: number;
}
export interface Result {
@ -75,6 +73,5 @@ export function participantFromApiParticipant(
lastName: fromApi.lastname,
results: results,
overallRank: fromApi.result_rank,
startNumber: parseInt(fromApi.start_number),
};
}

137
src/pages/SpeedFlowchartPage.tsx
View file

@ -4,19 +4,11 @@ import { useParams } from 'react-router-dom';
import {
convertResultsToSpeedFlowchartResult,
SpeedFlowchartResult,
SpeedLane,
SpeedRoundPair,
} from '../data/SpeedFlowchart';
import {
Card,
CardContent,
Chip,
Grid,
Skeleton,
Typography,
} from '@mui/material';
import { Card, CardContent, Grid, Skeleton, Typography } from '@mui/material';
import { theme } from '../utils/Theme';
import { QRCode } from 'react-qrcode-logo';
interface SpeedRoundPairDummy extends SpeedRoundPair {
dummy: boolean;
}
@ -98,36 +90,9 @@ export default function SpeedFlowchartPage() {
<Grid
container
spacing={2}
sx={{
height: '100%',
justifyContent: 'space-around',
position: 'relative',
}}
sx={{ height: '100%', justifyContent: 'space-around' }}
direction={'column'}
>
{round.pairs.length === 2 && (
<div
style={{
position: 'absolute',
width: '100%',
display: 'flex',
justifyContent: 'center',
}}
>
<QRCode
value={`https://l.bluerock.dev/?comp=${competitionId}&cat=${categoryId}`}
logoImage={'/logo192.png'}
logoWidth={100}
logoHeight={100}
bgColor={theme.palette.background.default}
fgColor={theme.palette.text.secondary}
size={250}
ecLevel={'H'}
eyeRadius={5}
qrStyle={'dots'}
/>
</div>
)}
{round.pairs.map((pair, pairKey) => (
<Grid key={`flowchart-column-${roundKey}-pair-${pairKey}`} item>
<Card
@ -142,81 +107,27 @@ export default function SpeedFlowchartPage() {
: undefined,
}}
>
<CardContent
sx={{
padding: '10px !important',
}}
>
<Grid container spacing={2}>
{[
['A', pair.laneA],
['B', pair.laneB],
].map(([letter, lane]) => {
lane = lane as SpeedLane;
const textStyle = {
fontWeight:
pair.winner === letter ? 'bold' : 'plain',
color: pair.winner === letter ? '#4CAF50' : '',
fontSize: '25px',
};
const gridItemStyle = {
paddingTop:
letter === 'B' ? '0 !important' : undefined,
};
return (
<>
<Grid sx={gridItemStyle} xs={1} item>
<Typography sx={textStyle}>
{lane?.participant.results[0].rank}{' '}
</Typography>
</Grid>
<Grid
sx={{ ...gridItemStyle, display: 'flex' }}
xs={8.5}
item
>
<Typography
sx={{
...textStyle,
overflow: 'clip',
whiteSpace: 'nowrap',
maxWidth: '80%',
textOverflow: 'ellipsis',
}}
>
{lane?.participant.firstName}{' '}
{lane?.participant.lastName}
</Typography>
<Chip
label={lane?.participant.startNumber}
sx={{
height: '26px',
marginLeft: '10px',
}}
variant='outlined'
/>
</Grid>
<Grid sx={gridItemStyle} xs={2} item>
<Typography sx={textStyle}>
{' '}
{lane?.result?.result}
</Typography>
</Grid>
{letter === 'A' && (
<Grid
xs={12}
item
sx={{ height: 0, paddingTop: '0 !important' }}
></Grid>
)}
</>
);
})}
</Grid>
<CardContent>
<Typography
sx={{
fontWeight: pair.winner === 'A' ? 'bold' : 'plain',
color: pair.winner === 'A' ? '#4CAF50' : '',
}}
>
A: {pair.laneA?.participant.firstName}{' '}
{pair.laneA?.participant.lastName}:{' '}
{pair.laneA?.result?.result}
</Typography>
<Typography
sx={{
fontWeight: pair.winner === 'B' ? 'bold' : 'plain',
color: pair.winner === 'B' ? '#4CAF50' : '',
}}
>
B: {pair.laneB?.participant.firstName}{' '}
{pair.laneB?.participant.lastName}:{' '}
{pair.laneB?.result?.result}
</Typography>
</CardContent>
</Card>
</Grid>