Add tournament fullscreen groups view
This commit is contained in:
parent
0af62dd39b
commit
a6e20a5c2a
|
|
@ -35,7 +35,7 @@ function ShowMatchesToggleButton(props) {
|
|||
</Button>);
|
||||
}
|
||||
|
||||
class Group extends Component {
|
||||
export class Group extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = props.group;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,122 @@
|
|||
import Head from 'next/head';
|
||||
import React from 'react';
|
||||
import {ErrorPageComponent} from '../js/components/ErrorComponents';
|
||||
import {getTournament} from '../js/redux/tournamentApi';
|
||||
import {
|
||||
Col,
|
||||
Container, Navbar, NavbarBrand, NavItem, Row, Spinner
|
||||
} from 'reactstrap';
|
||||
import {Group} from '../js/components/GroupStage';
|
||||
|
||||
|
||||
function FullscreenPage(props) {
|
||||
return (<div>
|
||||
<FullscreenPageHeader title={props.tournament.name} code={props.tournament.code}/>
|
||||
<Container className='fs-5' fluid>
|
||||
<Row className='row-cols-4'>
|
||||
{props.groups.map(group => <Col className='mb-2'><Group group={group} key={group.id}/></Col>)}
|
||||
<Col>Hallo Welt</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
</div>);
|
||||
}
|
||||
|
||||
function FullscreenPageHeader(props) {
|
||||
return (<Navbar color='light' className='mb-4 border-bottom py-0'>
|
||||
<NavbarBrand>{props.title}</NavbarBrand>
|
||||
<NavItem className='text-secondary'>
|
||||
turnie.re
|
||||
</NavItem>
|
||||
</Navbar>);
|
||||
}
|
||||
|
||||
|
||||
class Main extends React.Component {
|
||||
static async getInitialProps({query}) {
|
||||
return {query};
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.maxPage = 2;
|
||||
|
||||
this.state = {
|
||||
groups: [], tournament: null, loadedTournament: false, loadingStatus: null, page: 0
|
||||
};
|
||||
this.onTournamentRequestSuccess = this.onTournamentRequestSuccess.bind(this);
|
||||
this.onTournamentRequestError = this.onTournamentRequestError.bind(this);
|
||||
this.updateTournament = this.updateTournament.bind(this);
|
||||
this.increasePage = this.increasePage.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.updateTournament();
|
||||
const intervalId = setInterval(this.updateTournament, 3000);
|
||||
const intervalIdPage = setInterval(this.increasePage, 10000);
|
||||
this.setState({intervalId: intervalId});
|
||||
this.setState({intervalIdPage: intervalIdPage});
|
||||
}
|
||||
|
||||
increasePage() {
|
||||
if (this.state.page >= this.maxPage) {
|
||||
this.setState({page: 0});
|
||||
} else {
|
||||
this.setState({page: this.state.page + 1});
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
clearInterval(this.state.intervalId);
|
||||
clearInterval(this.state.intervalIdPage);
|
||||
}
|
||||
|
||||
updateTournament() {
|
||||
getTournament(this.props.query.code, this.onTournamentRequestSuccess, this.onTournamentRequestError);
|
||||
}
|
||||
|
||||
onTournamentRequestSuccess(requestStatus, tournament) {
|
||||
// filter groups by page
|
||||
const groups = tournament.groupStage.groups;
|
||||
const offset = this.state.page * 12;
|
||||
|
||||
this.setState({
|
||||
loadingStatus: requestStatus, tournament: tournament,
|
||||
groups: groups.slice(offset, offset + 11), loadedTournament: true
|
||||
});
|
||||
}
|
||||
|
||||
onTournamentRequestError(error) {
|
||||
if (error.response) {
|
||||
this.setState({loadingStatus: error.response.status, loadedTournament: true});
|
||||
} else {
|
||||
this.setState({loadingStatus: -1, loadedTournament: true});
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const {groups, tournament, loadedTournament, loadingStatus} = this.state;
|
||||
if (!loadedTournament) {
|
||||
return (<div>
|
||||
<Head>
|
||||
<title>Vollbild-Ansicht: turnie.re</title>
|
||||
</Head>
|
||||
<Container className='p-5 text-center text-secondary'>
|
||||
<Spinner size='sm'/>
|
||||
<span className='ml-3'>lade Vollbild-Ansicht</span>
|
||||
</Container>
|
||||
</div>);
|
||||
}
|
||||
if (loadingStatus === 200) {
|
||||
return (<div>
|
||||
<Head>
|
||||
<title>{tournament.name}: turnie.re</title>
|
||||
</Head>
|
||||
<FullscreenPage tournament={tournament} groups={groups}/>
|
||||
</div>);
|
||||
} else {
|
||||
return <ErrorPageComponent code={loadingStatus}/>;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Main;
|
||||
|
|
@ -42,6 +42,7 @@ function StatusBar(props) {
|
|||
<EditButton tournamentId={props.tournament.id} isOwner={props.isOwner} isSignedIn={props.isSignedIn}/>
|
||||
<StatisticsButton tournamentId={props.tournament.id}/>
|
||||
<FullscreenButton tournamentId={props.tournament.id}/>
|
||||
<LinkButton href={'/t/' + props.tournament.id + '/fullscreen-groups'}>Vollbild-Ansicht Gruppen</LinkButton>
|
||||
</ButtonGroup>
|
||||
</TournamentStatusBar>);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,12 @@ app.prepare()
|
|||
app.render(req, res, actualPage, queryParam);
|
||||
});
|
||||
|
||||
server.get('/t/:code/fullscreen-groups', (req, res) => {
|
||||
const actualPage = '/tournament-fullscreen-groups';
|
||||
const queryParam = {code: req.params.code};
|
||||
app.render(req, res, actualPage, queryParam);
|
||||
});
|
||||
|
||||
server.get('/t/:code/edit', (req, res) => {
|
||||
const actualPage = '/tournament-edit';
|
||||
const queryParam = {code: req.params.code};
|
||||
|
|
|
|||
Loading…
Reference in New Issue