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 {QRCodeSVG} from 'qrcode.react';
import {Group} from '../js/components/GroupStage';
function FullscreenPage(props) {
let logo;
if (props.showLogo) {
logo = 
;
} else {
logo = ;
}
return (
{props.groups.map(group => )}
{logo}
);
}
function FullscreenPageHeader(props) {
return (
{props.title}
{props.page}/{props.maxPage}
);
}
class Main extends React.Component {
static async getInitialProps({query}) {
return {query};
}
constructor(props) {
super(props);
this.groupsPerPage = 11;
this.pages = 2;
this.page = 0;
this.state = {
groups: [], tournament: null, loadedTournament: false, loadingStatus: null, page: 0, showLogo: false
};
this.onTournamentRequestSuccess = this.onTournamentRequestSuccess.bind(this);
this.onTournamentRequestError = this.onTournamentRequestError.bind(this);
this.increasePage = this.increasePage.bind(this);
}
componentDidMount() {
this.updateTournament();
const intervalIdPage = setInterval(this.increasePage, 3000);
this.setState({intervalIdPage: intervalIdPage});
}
increasePage() {
if (this.page >= this.pages) {
this.page = 0;
} else {
this.page = this.page + 1;
}
this.updateTournament();
}
componentWillUnmount() {
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 start = this.page * this.groupsPerPage;
const end = (this.page + 1) * this.groupsPerPage;
this.setState({
loadingStatus: requestStatus, tournament: tournament,
groups: groups.slice(start, end), loadedTournament: true,
page: this.page, showLogo: this.page == this.pages
});
}
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, page, showLogo} = this.state;
if (!loadedTournament) {
return (
Vollbild-Ansicht: turnie.re
lade Vollbild-Ansicht
);
}
if (loadingStatus === 200) {
return (
{tournament.name}: turnie.re
);
} else {
return ;
}
}
}
export default Main;