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

Add qr code to fullscreen groupview

This commit is contained in:
Thor77 2022-06-29 21:27:49 +02:00
parent a6e20a5c2a
commit cdddcf20f2
No known key found for this signature in database
GPG Key ID: 5051E71B46AA669A
3 changed files with 24 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -19,6 +19,7 @@
"eslint-config-google": "^0.14.0", "eslint-config-google": "^0.14.0",
"express": "^4.18.1", "express": "^4.18.1",
"next": "^12.1.6", "next": "^12.1.6",
"qrcode.react": "^3.1.0",
"react": "^18.1.0", "react": "^18.1.0",
"react-dom": "^18.1.0", "react-dom": "^18.1.0",
"react-notify-toast": "^0.5.1", "react-notify-toast": "^0.5.1",

32
pages/tournament-fullscreen-groups.js
View File

@ -6,16 +6,23 @@ import {
Col, Col,
Container, Navbar, NavbarBrand, NavItem, Row, Spinner Container, Navbar, NavbarBrand, NavItem, Row, Spinner
} from 'reactstrap'; } from 'reactstrap';
import {QRCodeSVG} from 'qrcode.react';
import {Group} from '../js/components/GroupStage'; import {Group} from '../js/components/GroupStage';
function FullscreenPage(props) { function FullscreenPage(props) {
return (<div> return (<div>
<FullscreenPageHeader title={props.tournament.name} code={props.tournament.code}/> <FullscreenPageHeader title={props.tournament.name} page={props.page + 1} maxPage={props.maxPage + 1}/>
<Container className='fs-5' fluid> <Container className='fs-5' fluid>
<Row className='row-cols-4'> <Row className='row-cols-4'>
{props.groups.map(group => <Col className='mb-2'><Group group={group} key={group.id}/></Col>)} {props.groups.map(group => <Col className='mb-2'><Group group={group} key={group.id}/></Col>)}
<Col>Hallo Welt</Col> <Col>
<QRCodeSVG
className='shadow'
value={'https://turnie.re/t/' + props.tournament.id}
size="300"
/>
</Col>
</Row> </Row>
</Container> </Container>
</div>); </div>);
@ -24,9 +31,7 @@ function FullscreenPage(props) {
function FullscreenPageHeader(props) { function FullscreenPageHeader(props) {
return (<Navbar color='light' className='mb-4 border-bottom py-0'> return (<Navbar color='light' className='mb-4 border-bottom py-0'>
<NavbarBrand>{props.title}</NavbarBrand> <NavbarBrand>{props.title}</NavbarBrand>
<NavItem className='text-secondary'> {props.page}/{props.maxPage}
turnie.re
</NavItem>
</Navbar>); </Navbar>);
} }
@ -38,35 +43,33 @@ class Main extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.maxPage = 2; this.groupsPerPage = 8;
this.pages = 3;
this.state = { this.state = {
groups: [], tournament: null, loadedTournament: false, loadingStatus: null, page: 0 groups: [], tournament: null, loadedTournament: false, loadingStatus: null, page: 0
}; };
this.onTournamentRequestSuccess = this.onTournamentRequestSuccess.bind(this); this.onTournamentRequestSuccess = this.onTournamentRequestSuccess.bind(this);
this.onTournamentRequestError = this.onTournamentRequestError.bind(this); this.onTournamentRequestError = this.onTournamentRequestError.bind(this);
this.updateTournament = this.updateTournament.bind(this);
this.increasePage = this.increasePage.bind(this); this.increasePage = this.increasePage.bind(this);
} }
componentDidMount() { componentDidMount() {
this.updateTournament(); this.updateTournament();
const intervalId = setInterval(this.updateTournament, 3000);
const intervalIdPage = setInterval(this.increasePage, 10000); const intervalIdPage = setInterval(this.increasePage, 10000);
this.setState({intervalId: intervalId});
this.setState({intervalIdPage: intervalIdPage}); this.setState({intervalIdPage: intervalIdPage});
} }
increasePage() { increasePage() {
if (this.state.page >= this.maxPage) { if (this.state.page >= this.pages) {
this.setState({page: 0}); this.setState({page: 0});
} else { } else {
this.setState({page: this.state.page + 1}); this.setState({page: this.state.page + 1});
} }
this.updateTournament();
} }
componentWillUnmount() { componentWillUnmount() {
clearInterval(this.state.intervalId);
clearInterval(this.state.intervalIdPage); clearInterval(this.state.intervalIdPage);
} }
@ -77,11 +80,12 @@ class Main extends React.Component {
onTournamentRequestSuccess(requestStatus, tournament) { onTournamentRequestSuccess(requestStatus, tournament) {
// filter groups by page // filter groups by page
const groups = tournament.groupStage.groups; const groups = tournament.groupStage.groups;
const offset = this.state.page * 12; const start = this.state.page * this.groupsPerPage;
const end = (this.state.page + 1) * this.groupsPerPage;
this.setState({ this.setState({
loadingStatus: requestStatus, tournament: tournament, loadingStatus: requestStatus, tournament: tournament,
groups: groups.slice(offset, offset + 11), loadedTournament: true groups: groups.slice(start, end), loadedTournament: true
}); });
} }
@ -111,7 +115,7 @@ class Main extends React.Component {
<Head> <Head>
<title>{tournament.name}: turnie.re</title> <title>{tournament.name}: turnie.re</title>
</Head> </Head>
<FullscreenPage tournament={tournament} groups={groups}/> <FullscreenPage tournament={tournament} groups={groups} page={this.state.page} maxPage={this.pages}/>
</div>); </div>);
} else { } else {
return <ErrorPageComponent code={loadingStatus}/>; return <ErrorPageComponent code={loadingStatus}/>;

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" resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A== 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: qs@6.10.3:
version "6.10.3" version "6.10.3"
resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.3.tgz#d6cde1b2ffca87b5aa57889816c5f81535e22e8e" resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.3.tgz#d6cde1b2ffca87b5aa57889816c5f81535e22e8e"