turniere
/
turniere-frontend
mirror of https://github.com/turniere/turniere-frontend.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Add timer to normal tournament page as well

This commit is contained in:
Daniel Schädler 2025-03-13 16:46:03 +01:00
parent 42b2003336
commit 6455a3c087
5 changed files with 35 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/components/Timer.js
View File

@ -15,7 +15,7 @@ export function Timer({timerEnd}) {
}, [timerEnd]); }, [timerEnd]);
const formatTimeLeft = timeLeft => { const formatTimeLeft = timeLeft => {
if (timeLeft === null) return ''; if (timeLeft === 0) return 'Spiel vorbei!';
const hours = Math.floor(timeLeft / (1000 * 60 * 60)); const hours = Math.floor(timeLeft / (1000 * 60 * 60));
const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60)); const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000); const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

36
js/components/TournamentBigImage.js
View File

@ -1,22 +1,30 @@
import {Container, ListGroup, ListGroupItem} from 'reactstrap'; import {Container, ListGroup, ListGroupItem} from 'reactstrap';
import React from 'react'; import React from 'react';
import {Timer} from './Timer';
export function TournamentBigImage(props) { export function TournamentBigImage(props) {
return (<div className="big-image mb-0"> return (
<h2 className="display-1">{props.name}</h2> <div className="big-image mb-0">
<Container> <h2 className="display-1">{props.name}</h2>
<TournamentProperties {...props}/> <Container>
</Container> <TournamentProperties {...props}/>
</div>); </Container>
</div>
);
} }
function TournamentProperties(props) { function TournamentProperties(props) {
return (<ListGroup className='text-dark text-start shadow'> return (
{props.description && <ListGroupItem>{props.description}</ListGroupItem>} <ListGroup className="text-dark text-start shadow">
<ListGroupItem> {props.description && <ListGroupItem>{props.description}</ListGroupItem>}
{props.isPublic ? 'Das Turnier ist öffentlich.' : 'Das Turnier ist privat.'} <ListGroupItem>
</ListGroupItem> {props.isPublic ? 'Das Turnier ist öffentlich.' : 'Das Turnier ist privat.'}
<ListGroupItem>Turnier-Code: <b>{props.code}</b></ListGroupItem> </ListGroupItem>
<ListGroupItem>von <b>{props.ownerUsername}</b></ListGroupItem> <ListGroupItem>Turnier-Code: <b>{props.code}</b></ListGroupItem>
</ListGroup>); <ListGroupItem>von <b>{props.ownerUsername}</b></ListGroupItem>
{props.timerEnd &&
<ListGroupItem>Spielzeit: <Timer timerEnd={props.timerEnd} /></ListGroupItem>
}
</ListGroup>
);
} }

10
js/redux/tournamentApi.js
View File

@ -49,7 +49,12 @@ export function getTournamentMatches(tournamentId, successCallback, errorCallbac
export function getTournamentTimerEnd(tournamentId, successCallback, errorCallback) { export function getTournamentTimerEnd(tournamentId, successCallback, errorCallback) {
getRequest(getState(), '/tournaments/' + tournamentId + '/timer_end') getRequest(getState(), '/tournaments/' + tournamentId + '/timer_end')
.then(response => { .then(response => {
const timerEndDate = new Date(response.data.timer_end); let timerEndDate;
if (response.data.timer_end === null) {
timerEndDate = null;
} else {
timerEndDate = new Date(response.data.timer_end);
}
successCallback(response.status, timerEndDate); successCallback(response.status, timerEndDate);
}) })
.catch(errorCallback); .catch(errorCallback);
@ -75,7 +80,8 @@ function convertTournament(apiTournament) {
isPublic: apiTournament.public, isPublic: apiTournament.public,
ownerUsername: apiTournament.owner_username, ownerUsername: apiTournament.owner_username,
groupStage: groupStage, groupStage: groupStage,
playoffStages: playoffStages playoffStages: playoffStages,
timerEnd: apiTournament.timer_end ? new Date(apiTournament.timer_end) : null
}; };
} }

2
js/redux/tournamentInfo.js
View File

@ -25,5 +25,5 @@ export const defaultStateTournamentinfo = {
isPublic: '', isPublic: '',
stages: [], stages: [],
teams: [] teams: []
// date: null
}; };

10
pages/tournament-fullscreen.js
View File

@ -62,7 +62,8 @@ function FullscreenPageHeader(props) {
<FilterDropdown {...props.filter} /> <FilterDropdown {...props.filter} />
<NavbarBrand>{props.title}</NavbarBrand> <NavbarBrand>{props.title}</NavbarBrand>
{props.timerEnd && {props.timerEnd &&
<div className="ml-auto">Spielzeit: <NavbarBrand><Timer timerEnd={props.timerEnd}/></NavbarBrand></div>} <div className="ml-auto">Spielzeit: <NavbarBrand><Timer timerEnd={props.timerEnd}/></NavbarBrand></div>
}
</Navbar> </Navbar>
); );
} }
@ -127,12 +128,7 @@ class Main extends React.Component {
updateTimerEnd() { updateTimerEnd() {
const tournamentId = this.props.query.code; const tournamentId = this.props.query.code;
getTournamentTimerEnd(tournamentId, (status, timerEnd) => { getTournamentTimerEnd(tournamentId, (status, timerEnd) => {
const now = new Date(); this.setState({timerEnd: timerEnd});
if (timerEnd > now) {
this.setState({timerEnd: timerEnd});
} else {
this.setState({timerEnd: null});
}
}, error => { }, error => {
console.error('Failed to fetch timer end:', error); console.error('Failed to fetch timer end:', error);
}); });