Merge branch 'ticket/TURNIERE-206' into 'master'

Implement fullscreen view See merge request turniere/turniere-frontend!25
2022-07-01 20:54:29 +00:00 · 2022-07-01 20:54:29 +00:00 · 2af0eb1d6f
parent 7af8ad66b3 e91c519560
commit 2af0eb1d6f
14 changed files with 378 additions and 24 deletions
--- a/js/components/GroupStage.js
+++ b/js/components/GroupStage.js
@ -16,9 +16,9 @@ export default class GroupStage extends Component {
    }

    render() {
-        return (<div className='py-5 px-5'>
+        return (<div className='py-2 px-1'>
            <h1 className='custom-font'>
-                Gruppenphase
+                <span className='px-2'>Gruppenphase</span>
                <ShowMatchesToggleButton show={this.state.showMatches} toggle={this.toggleShowMatches}/>
            </h1>
            <Row className='mt-3'>
@ -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;
@ -57,7 +57,7 @@ class Group extends Component {
    }

    render() {
-        return (<Col className='minw-25'>
+        return (<Col className='minw-25 py-2'>
            <Card>
                <CardBody>
                    <h3 className='custom-font'>Gruppe {this.state.number}</h3>
@ -78,9 +78,9 @@ function GroupScoresTable(props) {
        <thead>
            <tr>
                <th>Team</th>
-                <th>Punkte</th>
-                <th>Becher geworfen</th>
-                <th>Becher kassiert</th>
+                <th>Pkt.</th>
+                <th>Gew.</th>
+                <th>Kas.</th>
            </tr>
        </thead>
        <tbody>
@ -94,7 +94,7 @@ function GroupScoresTableRow(props) {
    return (<tr>
        <td>{props.score.team.name}</td>
        <td>{props.score.group_points}</td>
-        <td>{props.score.received_points}</td>
        <td>{props.score.scored_points}</td>
+        <td>{props.score.received_points}</td>
    </tr>);
 }
--- a/js/components/TournamentBigImage.js
+++ b/js/components/TournamentBigImage.js
@ -3,7 +3,7 @@ import React from 'react';

 export function TournamentBigImage(props) {
    return (<div className="big-image mb-0">
-        <h1 className="display-1">{props.name}</h1>
+        <h2 className="display-1">{props.name}</h2>
        <Container>
            <TournamentProperties {...props}/>
        </Container>
--- a/js/redux/tournamentApi.js
+++ b/js/redux/tournamentApi.js
@ -25,6 +25,27 @@ export function getStage(stageId, successCallback, errorCallback) {
        .catch(errorCallback);
 }

+export function getTournamentMeta(tournamentId, successCallback, errorCallback) {
+    getRequest(getState(), '/tournaments/' + tournamentId + '?simple=true')
+        .then(response => {
+            successCallback(response.status, response.data);
+        })
+        .catch(errorCallback);
+}
+
+export function getTournamentMatches(tournamentId, successCallback, errorCallback, matchState=null) {
+    let matchFilter = '';
+    if (matchState) {
+        matchFilter = '?state=' + matchState;
+    }
+    getRequest(getState(), '/tournaments/' + tournamentId + '/matches' + matchFilter)
+        .then(response => {
+            successCallback(response.status, response.data.sort((a, b) => a.position > b.position).map(match => convertMatch(match)));
+        })
+        .catch(errorCallback);
+}
+
+
 function convertTournament(apiTournament) {
    let groupStage = null;
    const playoffStages = [];
@ -51,7 +72,7 @@ function convertTournament(apiTournament) {

 function convertPlayoffStage(apiStage) {
    return {
-        id: apiStage.id, level: apiStage.level, matches: apiStage.matches.map(match => convertMatch(match, false))
+        id: apiStage.id, level: apiStage.level, matches: apiStage.matches.sort((a, b) => a.position > b.position).map(match => convertMatch(match, false))
    };
 }

@ -59,8 +80,8 @@ function convertGroup(apiGroup) {
    return {
        id: apiGroup.id,
        number: apiGroup.number,
-        scores: apiGroup.group_scores,
-        matches: apiGroup.matches.map(match => convertMatch(match, true))
+        scores: apiGroup.group_scores.sort((a, b) => b.group_points > a.group_points),
+        matches: apiGroup.matches.sort((a, b) => a.position > b.position).map(match => convertMatch(match, true))
    };
 }

--- a/package.json
+++ b/package.json
@ -19,6 +19,7 @@
    "eslint-config-google": "^0.14.0",
    "express": "^4.18.1",
    "next": "^12.1.6",
+    "qrcode.react": "^3.1.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-notify-toast": "^0.5.1",
--- a/pages/tournament-fullscreen-groups.js
+++ b/pages/tournament-fullscreen-groups.js
@ -0,0 +1,151 @@
+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 = <Col>
+                   <div className="d-flex justify-content-center align-items-center">
+                       <img height='300' width='300' src='/static/images/bpwstr_logo.png'></img>
+                   </div>
+               </Col>;
+    } else {
+        logo = <div />;
+    }
+    return (<div>
+        <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>
+                    <div className="d-flex justify-content-center align-items-center">
+                        <QRCodeSVG
+                            className='shadow mx-auto'
+                            value='https://qr.bpwstr.de/2'
+                            size="300"
+                        />
+                    </div>
+                </Col>
+                {logo}
+            </Row>
+        </Container>
+    </div>);
+}
+
+function FullscreenPageHeader(props) {
+    return (<Navbar color='light' className='mb-4 border-bottom py-0'>
+        <NavbarBrand>{props.title}</NavbarBrand>
+        {props.page}/{props.maxPage}
+    </Navbar>);
+}
+
+
+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.backgroundColors = ['#a8e6cf', '#dcedc1', '#ffd3b6'];
+
+        this.state = {
+            groups: [], tournament: null, loadedTournament: false, loadingStatus: null, page: 0,
+            showLogo: false, backgroundColor: 'white'
+        };
+        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,
+            backgroundColor: this.backgroundColors[this.page]
+        });
+    }
+
+    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, backgroundColor} = 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} page={page} maxPage={this.pages}
+                    showLogo={showLogo}
+                />
+                <style global jsx>{`
+                    body {
+                        background: ${backgroundColor};
+                    }
+                `}</style>
+            </div>);
+        } else {
+            return <ErrorPageComponent code={loadingStatus}/>;
+        }
+    }
+}
+
+export default Main;
--- a/pages/tournament-fullscreen.js
+++ b/pages/tournament-fullscreen.js
@ -1,20 +1,179 @@
 import Head from 'next/head';
 import React from 'react';
+import {ErrorPageComponent} from '../js/components/ErrorComponents';
+import {getTournamentMatches, getTournamentMeta} from '../js/redux/tournamentApi';
+import {
+    Col, Container, DropdownItem, DropdownMenu, DropdownToggle, Navbar, NavbarBrand, NavItem, Row, UncontrolledDropdown,
+    Spinner
+} from 'reactstrap';
+import {Match} from '../js/components/Match';

-class FullscreenTournamentPage extends React.Component {
+
+function FullscreenPage(props) {
+    return (<div>
+        <FullscreenPageHeader title={props.tournamentMeta.name} code={props.tournamentMeta.code} filter={props.filter}/>
+        <Matches matches={props.matches}/>
+    </div>);
+}
+
+function Matches(props) {
+    let matches;
+    if (props.matches == null) {
+        matches = (<div className='text-center text-secondary'>
+            <Spinner animation='border' role='status' size='sm'/>
+            <span className='ml-3'>lade Matches</span>
+        </div>);
+    } else if (props.matches.length === 0) {
+        matches = (<div className='text-center text-secondary font-italic'>keine Matches</div>);
+    } else {
+        matches = (<Row>
+            {props.matches.map(match => <Col md='auto'><Match key={match.id} match={match}/></Col>)}
+        </Row>);
+    }
+    return (<div className='mx-4 h5'>
+        {matches}
+    </div>);
+}
+
+function FilterDropdown(props) {
+    return (<UncontrolledDropdown>
+        <i>Match-Filter: </i>
+        <DropdownToggle color='light' caret>
+            {props.selected.label}
+        </DropdownToggle>
+        <DropdownMenu>
+            {Object.keys(matchFilters).map(matchFilter => <DropdownItem
+                onClick={() => props.select(matchFilters[matchFilter])}>
+                {matchFilters[matchFilter].label}
+            </DropdownItem>)}
+        </DropdownMenu>
+    </UncontrolledDropdown>);
+}
+
+
+function FullscreenPageHeader(props) {
+    return (<Navbar color='light' className='mb-4 border-bottom py-0'>
+        <NavItem><FilterDropdown {...props.filter}/></NavItem>
+        <NavbarBrand>{props.title}</NavbarBrand>
+        <NavItem className='text-secondary'>
+            Turnier-Code: <b className='text-primary text-monospace'>{props.code}</b>
+        </NavItem>
+    </Navbar>);
+}
+
+const matchFilters = {
+    'all': {backend: null, label: 'alle'},
+    'in_progress': {backend: 'in_progress', label: 'laufend'},
+    'upcoming': {backend: 'upcoming', label: 'kommend'},
+    'not_started': {backend: 'not_started', label: 'bereit zum Starten'},
+    'finished': {backend: 'finished', label: 'beendet'},
+    'single_team': {backend: 'single_team', label: 'ohne Gegner'},
+    'not_ready': {backend: 'not_ready', label: 'noch nicht festgelegt'}
+};
+
+class Main extends React.Component {
    static async getInitialProps({query}) {
        return {query};
    }

+    constructor(props) {
+        super(props);
+
+        this.state = {
+            tournamentMeta: null, matches: [], matchFilter: matchFilters.all, loadedMeta: false, loadedMatches: false
+        };
+        this.onTournamentRequestSuccess = this.onTournamentRequestSuccess.bind(this);
+        this.onTournamentRequestError = this.onTournamentRequestError.bind(this);
+        this.onTournamentMatchesRequestSuccess = this.onTournamentMatchesRequestSuccess.bind(this);
+        this.onTournamentMatchesRequestError = this.onTournamentMatchesRequestError.bind(this);
+        this.updateMatches = this.updateMatches.bind(this);
+        this.selectFilter = this.selectFilter.bind(this);
+    }
+
+    selectFilter(filter) {
+        this.setState({matchFilter: filter, loadedMatches: false});
+        this.updateMatches();
+    }
+
+    componentDidMount() {
+        const tournamentId = this.props.query.code;
+        getTournamentMeta(tournamentId, this.onTournamentRequestSuccess, this.onTournamentRequestError);
+        this.updateMatches();
+        const intervalId = setInterval(this.updateMatches, 3000);
+        this.setState({intervalId: intervalId});
+    }
+
+    componentWillUnmount() {
+        clearInterval(this.state.intervalId);
+    }
+
+    updateMatches() {
+        const tournamentId = this.props.query.code;
+        getTournamentMatches(tournamentId, this.onTournamentMatchesRequestSuccess, this.onTournamentMatchesRequestError,
+            this.state.matchFilter.backend);
+    }
+
+
+    onTournamentRequestSuccess(requestStatus, tournament) {
+        this.setState({metaStatus: requestStatus, tournamentMeta: tournament, loadedMeta: true});
+    }
+
+    onTournamentRequestError(error) {
+        if (error.response) {
+            this.setState({metaStatus: error.response.status, loadedMeta: true});
+        } else {
+            this.setState({metaStatus: -1, loadedMeta: true});
+        }
+    }
+
+    onTournamentMatchesRequestSuccess(requestStatus, matches) {
+        this.setState({matchesStatus: requestStatus, matches: matches, loadedMatches: true});
+    }
+
+    onTournamentMatchesRequestError(error) {
+        if (error.response) {
+            this.setState({matchesStatus: error.response.status, loadedMatches: true});
+        } else {
+            this.setState({matchesStatus: -1, loadedMatches: true});
+        }
+    }
+
+
    render() {
-        return (<div>
-            <Head>
-                <title>Turnie.re - Turnieranzeige (Vollbild)</title>
-            </Head>
-            <p>Turnieranzeige (Vollbild)</p>
-            <p>Code: {this.props.query.code}</p>
-        </div>);
+        const {metaStatus, matchesStatus, tournamentMeta, matches} = this.state;
+        const filter = {
+            selected: this.state.matchFilter, select: this.selectFilter
+        };
+        if (!this.state.loadedMeta) {
+            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 (!this.state.loadedMatches) {
+            return (<div>
+                <Head>
+                    <title>{tournamentMeta.name}: turnie.re</title>
+                </Head>
+                <FullscreenPage tournamentMeta={tournamentMeta} matches={null} filter={filter}/>
+            </div>);
+        }
+        if (metaStatus === 200 && matchesStatus === 200) {
+            return (<div>
+                <Head>
+                    <title>{tournamentMeta.name}: turnie.re</title>
+                </Head>
+                <FullscreenPage tournamentMeta={tournamentMeta} matches={matches} filter={filter}/>
+            </div>);
+        } else {
+            return <ErrorPageComponent code={metaStatus}/>;
+        }
    }
 }

-export default FullscreenTournamentPage;
+export default Main;
--- a/pages/tournament-statistics.js
+++ b/pages/tournament-statistics.js
@ -1,7 +1,7 @@
 import Head from 'next/head';
 import React from 'react';
 import {connect} from 'react-redux';
-import {ButtonGroup, Col, Container, Row, NavbarBrand} from 'reactstrap';
+import {ButtonGroup, Col, Container, Row} from 'reactstrap';

 import {TurniereNavigation} from '../js/components/Navigation';
 import {StandingsTable} from '../js/components/StandingsTable';
@ -44,6 +44,9 @@ class StatisticsTournamentPage extends React.Component {
                        <LinkButton href={'/t/' + tournamentStatistics.id}>
                            zurück zum Turnier
                        </LinkButton>
+                        <LinkButton href={'/t/' + tournamentStatistics.id + '/fullscreen'}>
+                            Turnier-Vollbild-Ansicht
+                        </LinkButton>
                    </ButtonGroup>
                </TournamentStatusBar>
                <div className='pb-5'>
--- a/pages/tournament.js
+++ b/pages/tournament.js
@ -41,6 +41,8 @@ function StatusBar(props) {
        <ButtonGroup className='me-auto'>
            <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>);
 }
@ -51,6 +53,12 @@ function StatisticsButton(props) {
    </LinkButton>);
 }

+function FullscreenButton(props) {
+    return (<LinkButton href={'/t/' + props.tournamentId + '/fullscreen'}>
+        Vollbild-Ansicht
+    </LinkButton>);
+}
+

 function mapStateToTournamentPageProperties(state) {
    const {isSignedIn, username} = state.userinfo;
--- a/public/static/css/everypage.css
+++ b/public/static/css/everypage.css
@ -17,7 +17,7 @@
 }

 .big-image {
-    background: url("/static/images/landingpage-background.jpg") no-repeat center;
+    background: url("/static/images/bpwstr_banner.jpg") no-repeat center;
    background-size: cover;
    padding: 3vw 5vw;
    text-align: center;
--- a/public/static/css/tournament.css
+++ b/public/static/css/tournament.css
@ -11,7 +11,7 @@
 }

 .minw-25 {
-    min-width: 25%;
+    min-width: 350px;
 }

 .match:hover {
--- a/public/static/images/bpwstr_banner.jpg
+++ b/public/static/images/bpwstr_banner.jpg
--- a/public/static/images/bpwstr_logo.png
+++ b/public/static/images/bpwstr_logo.png
--- 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};
--- a/yarn.lock
+++ b/yarn.lock
@ -5715,6 +5715,11 @@ punycode@^2.1.0:
  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==

+qrcode.react@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-3.1.0.tgz#5c91ddc0340f768316fbdb8fff2765134c2aecd8"
+  integrity sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==
+
 qs@6.10.3:
  version "6.10.3"
  resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.3.tgz#d6cde1b2ffca87b5aa57889816c5f81535e22e8e"