Compare commits

..

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

14 changed files with 30 additions and 118 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 128 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

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>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 170 KiB

After

Width:  |  Height:  |  Size: 9.4 KiB

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>
);
}

View file

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

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;
},
}); });

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 {

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;
} }

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) => {

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

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>
);
} }

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>
); );
} }

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>
); );
} }