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

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

Implement fullscreen view

See merge request turniere/turniere-frontend!25
This commit is contained in:
Daniel Schädler 2022-07-01 20:54:29 +00:00
parent 7af8ad66b3 e91c519560
commit 2af0eb1d6f
14 changed files with 378 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
js/components/GroupStage.js
View File

@ -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>);
}

2
js/components/TournamentBigImage.js
View File

@ -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>

27
js/redux/tournamentApi.js
View File

@ -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))
};
}

1
package.json
View File

@ -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",

151
pages/tournament-fullscreen-groups.js Normal file
View File

@ -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;

177
pages/tournament-fullscreen.js
View File

@ -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;

5
pages/tournament-statistics.js
View File

@ -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'>

8
pages/tournament.js
View File

@ -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;

2
public/static/css/everypage.css
View File

@ -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;

2
public/static/css/tournament.css
View File

@ -11,7 +11,7 @@
}
.minw-25 {
min-width: 25%;
min-width: 350px;
}
.match:hover {

BIN
public/static/images/bpwstr_banner.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
public/static/images/bpwstr_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 85 KiB

6
server.js
View File

@ -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};

5
yarn.lock
View File

@ -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"