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

Compare commits

base: bluerock:f6b4af7f04c4dabcf9c8551f2d5459a58ac0384d
Branches Tags
bluerock:main
bluerock:pages
..
compare: bluerock:1f99528511865ce54ecf29acc9dd9a4b38c4f650
Branches Tags
bluerock:pages
bluerock:main

No commits in common. "f6b4af7f04c4dabcf9c8551f2d5459a58ac0384d" and "1f99528511865ce54ecf29acc9dd9a4b38c4f650" have entirely different histories.
f6b4af7f04 ... 1f99528511

14 changed files with 30 additions and 118 deletions
Show stats Expand all files Collapse all files

BIN
public/favicon.ico
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 128 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

4
public/index.html
View file

@ -7,7 +7,7 @@
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta
name="description" name="description"
content="Web site to view flowcharts of german speedclimbing competitions" content="Web site created using create-react-app"
/> />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!-- <!--
@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>blueROCK speed-flowchart</title> <title>React App</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

BIN
public/logo192.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
public/logo512.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 170 KiB

After

Width:  |  Height:  |  Size: 9.4 KiB

35
src/components/Header.tsx
View file

@ -1,35 +0,0 @@
import {
AppBar,
Toolbar,
Stepper,
Step,
Box,
Container,
StepButton,
Typography,
} from '@mui/material';
import { useContext, useEffect, useState } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import '../css/Header.css';
import { Context } from '../data/Context';
/**
* Creates a Header Component that displays the reservation steps
* @return {JSX.Element}
*/
export default function Header() {
const { title } = useContext(Context);
return (
<AppBar position='sticky'>
<Container maxWidth='lg'>
<Toolbar className='header-container'>
<Link to='/' style={{ textDecoration: 'none', color: 'inherit' }}>
<img src='/logo192.png' className='header-icon'></img>
</Link>
<Typography variant='h6'>{title}</Typography>
</Toolbar>
</Container>
</AppBar>
);
}

9
src/css/Header.css
View file

@ -1,9 +0,0 @@
.header-container {
gap: 40px;
flex-direction: row;
}
.header-icon {
height: 50px;
display: block;
}

8
src/data/Context.tsx
View file

@ -7,14 +7,6 @@ import { DigitalrockAPi } from './DigitalrockApi';
*/ */
export const Context = createContext<{ export const Context = createContext<{
api: DigitalrockAPi; api: DigitalrockAPi;
title: string;
setTitle: (title: string) => void;
}>({ }>({
api: new DigitalrockAPi(), api: new DigitalrockAPi(),
title: '',
setTitle: () => {
return;
},
}); });

3
src/data/SpeedFlowchart.tsx
View file

@ -212,12 +212,11 @@ export function convertResultsToSpeedFlowchartResult(
// - 1, 4, 2, 3 for firstRoundNumber=4 // - 1, 4, 2, 3 for firstRoundNumber=4
// - 1, 2 for firstRoundNumber=2 // - 1, 2 for firstRoundNumber=2
// TODO: come up with a proper alogorithm maybe // TODO: come up with a proper alogorithm maybe
console.log('First round rank: ', firstRoundRank);
const ranksOfLaneAInOrder = [ const ranksOfLaneAInOrder = [
[1, 2], [1, 2],
[1, 4, 2, 3], [1, 4, 2, 3],
[1, 8, 4, 5, 2, 7, 3, 6], [1, 8, 4, 5, 2, 7, 3, 6],
][Math.floor(firstRoundRank / 4)]; ][firstRoundRank / 4];
const firstRoundPairs = ranksOfLaneAInOrder.map(rank => { const firstRoundPairs = ranksOfLaneAInOrder.map(rank => {
return { return {

4
src/models/Competition.tsx
View file

@ -5,12 +5,9 @@ export interface Competiton {
WetId: string; WetId: string;
rkey: string; rkey: string;
name: string; name: string;
comp_name: string;
date_span: string; date_span: string;
discipline?: string; discipline?: string;
cats: Category[]; cats: Category[];
categorys: Category[];
date: string;
} }
export interface RouteNames { export interface RouteNames {
@ -28,5 +25,4 @@ export interface RouteNames {
export interface SpeedCompetitionCategoryResult extends Competiton { export interface SpeedCompetitionCategoryResult extends Competiton {
route_names: RouteNames; route_names: RouteNames;
participants: ParticipantFromApi[]; participants: ParticipantFromApi[];
route_order: string;
} }

17
src/pages/CalendarPage.tsx
View file

@ -23,13 +23,9 @@ export default function CalendarPage() {
React.useState<Competiton[]>(); React.useState<Competiton[]>();
const [filter, setFilter] = React.useState<string>(); const [filter, setFilter] = React.useState<string>();
const { api, setTitle } = React.useContext(Context); const { api } = React.useContext(Context);
const navigate = useNavigate(); const navigate = useNavigate();
React.useEffect(() => {
setTitle('DAV calendar');
}, []);
React.useEffect(() => { React.useEffect(() => {
api.getCompetitions('GER').then(result => { api.getCompetitions('GER').then(result => {
console.log(result.competitions.filter); console.log(result.competitions.filter);
@ -46,14 +42,9 @@ export default function CalendarPage() {
}, [filter]); }, [filter]);
const filterCompetitions = (competitions: Competiton[]) => { const filterCompetitions = (competitions: Competiton[]) => {
return competitions.filter(c => { return competitions.filter(c =>
const queryMatches = c.name c.name.toLowerCase().includes(filter?.toLocaleLowerCase() ?? ''),
.toLowerCase() );
.includes(filter?.toLocaleLowerCase() ?? '');
const date = new Date(c.date).getTime();
const currentDate = new Date().getTime();
return queryMatches && currentDate - date > 24 * 60 * 60 * 1000;
});
}; };
const openCompetition = (competitionId: string, categoryId: string) => { const openCompetition = (competitionId: string, categoryId: string) => {

15
src/pages/SpeedFlowchartPage.tsx
View file

@ -13,7 +13,7 @@ import { Card, CardContent, Grid, Typography } from '@mui/material';
*/ */
export default function SpeedFlowchartPage() { export default function SpeedFlowchartPage() {
const { competitionId, categoryId } = useParams(); const { competitionId, categoryId } = useParams();
const { api, setTitle } = useContext(Context); const { api } = useContext(Context);
const [flowchartResult, setFlowchartResult] = const [flowchartResult, setFlowchartResult] =
useState<SpeedFlowchartResult>(); useState<SpeedFlowchartResult>();
@ -24,12 +24,6 @@ export default function SpeedFlowchartPage() {
} }
api.getCompetitionResults(competitionId, categoryId).then(r => { api.getCompetitionResults(competitionId, categoryId).then(r => {
setTitle(
`${r.comp_name} - ${
r.categorys.filter(cat => cat.GrpId === categoryId)[0].name
}`,
);
const flowchartResult = convertResultsToSpeedFlowchartResult(r); const flowchartResult = convertResultsToSpeedFlowchartResult(r);
console.log(flowchartResult); console.log(flowchartResult);
setFlowchartResult(flowchartResult); setFlowchartResult(flowchartResult);
@ -38,6 +32,7 @@ export default function SpeedFlowchartPage() {
return ( return (
<> <>
<h1>RESULT:</h1>
<Grid container spacing={2}> <Grid container spacing={2}>
{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 / 5}>
@ -76,12 +71,6 @@ export default function SpeedFlowchartPage() {
</Grid> </Grid>
</Grid> </Grid>
))} ))}
{flowchartResult === undefined && (
<Grid item xs={12} className={'center-children'}>
This competition or category does not have a speed tree!
</Grid>
)}
</Grid> </Grid>
</> </>
); );

8
src/utils/ContextWrapper.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import { Context } from '../data/Context'; import { Context } from '../data/Context';
import { DigitalrockAPi } from '../data/DigitalrockApi'; import { DigitalrockAPi } from '../data/DigitalrockApi';
@ -11,11 +10,6 @@ export default function ContextWrapper(props: { children: JSX.Element }) {
const { children } = props; const { children } = props;
const api = new DigitalrockAPi(); const api = new DigitalrockAPi();
const [title, setTitle] = React.useState('');
return ( return <Context.Provider value={{ api }}>{children}</Context.Provider>;
<Context.Provider value={{ api, title, setTitle }}>
{children}
</Context.Provider>
);
} }

20
src/utils/PageTemplate.tsx
View file

@ -11,14 +11,16 @@ export default function PageTemplate(props: { children: JSX.Element }) {
const { children } = props; const { children } = props;
return ( return (
<LocalizationProviderWrapper> <ContextWrapper>
<Container <LocalizationProviderWrapper>
sx={{ marginTop: '16px' }} <Container
className='root-container' sx={{ marginTop: '50px' }}
maxWidth='lg' className='root-container'
> maxWidth='lg'
{children} >
</Container> {children}
</LocalizationProviderWrapper> </Container>
</LocalizationProviderWrapper>
</ContextWrapper>
); );
} }

25
src/utils/Routing.tsx
View file

@ -1,8 +1,6 @@
import { Routes, Route, HashRouter } from 'react-router-dom'; import { Routes, Route, HashRouter } from 'react-router-dom';
import Header from '../components/Header';
import CalendarPage from '../pages/CalendarPage'; import CalendarPage from '../pages/CalendarPage';
import SpeedFlowchartPage from '../pages/SpeedFlowchartPage'; import SpeedFlowchartPage from '../pages/SpeedFlowchartPage';
import ContextWrapper from './ContextWrapper';
import PageTemplate from './PageTemplate'; import PageTemplate from './PageTemplate';
/** /**
@ -12,20 +10,15 @@ import PageTemplate from './PageTemplate';
export default function Routing() { export default function Routing() {
return ( return (
<HashRouter> <HashRouter>
<ContextWrapper> <PageTemplate>
<> <Routes>
<Header /> <Route path='/' element={<CalendarPage />} />
<PageTemplate> <Route
<Routes> path='/speed-flowchart/:competitionId/:categoryId'
<Route path='/' element={<CalendarPage />} /> element={<SpeedFlowchartPage />}
<Route ></Route>
path='/speed-flowchart/:competitionId/:categoryId' </Routes>
element={<SpeedFlowchartPage />} </PageTemplate>
></Route>
</Routes>
</PageTemplate>
</>
</ContextWrapper>
</HashRouter> </HashRouter>
); );
} }