diff --git a/js/components/GroupStage.js b/js/components/GroupStage.js
index 4959cd1..7072d22 100644
--- a/js/components/GroupStage.js
+++ b/js/components/GroupStage.js
@@ -35,7 +35,7 @@ function ShowMatchesToggleButton(props) {
);
}
-class Group extends Component {
+export class Group extends Component {
constructor(props) {
super(props);
this.state = props.group;
diff --git a/pages/tournament-fullscreen-groups.js b/pages/tournament-fullscreen-groups.js
new file mode 100644
index 0000000..d494789
--- /dev/null
+++ b/pages/tournament-fullscreen-groups.js
@@ -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 (
+
+
+
+ {props.groups.map(group => )}
+ Hallo Welt
+
+
+
);
+}
+
+function FullscreenPageHeader(props) {
+ return (
+ {props.title}
+
+ turnie.re
+
+ );
+}
+
+
+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 (
+
+
Vollbild-Ansicht: turnie.re
+
+
+
+ lade Vollbild-Ansicht
+
+ );
+ }
+ if (loadingStatus === 200) {
+ return (
+
+
{tournament.name}: turnie.re
+
+
+ );
+ } else {
+ return ;
+ }
+ }
+}
+
+export default Main;
diff --git a/pages/tournament.js b/pages/tournament.js
index b2d3d1f..b5b656c 100644
--- a/pages/tournament.js
+++ b/pages/tournament.js
@@ -42,6 +42,7 @@ function StatusBar(props) {
+ Vollbild-Ansicht Gruppen
);
}
diff --git a/server.js b/server.js
index 7dc0784..d17d936 100644
--- a/server.js
+++ b/server.js
@@ -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};