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

Create blank fullscreen page with header

This commit is contained in:
Felix Hamme 2019-11-06 10:08:55 +01:00
parent 6205187bd4
commit 1371d8d207
3 changed files with 75 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
js/redux/tournamentApi.js
View File

@ -25,6 +25,15 @@ 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);
}
function convertTournament(apiTournament) {
let groupStage = null;
const playoffStages = [];

72
pages/tournament-fullscreen.js
View File

@ -1,20 +1,74 @@
import Head from 'next/head';
import React from 'react';
import {ErrorPageComponent} from '../js/components/ErrorComponents';
import 'bootstrap/dist/css/bootstrap.min.css';
import '../static/css/everypage.css';
import '../static/css/tournament-fullscreen.css';
import {getTournamentMeta} from '../js/redux/tournamentApi';
import {Navbar, NavbarBrand, NavItem} from 'reactstrap';
class FullscreenTournamentPage extends React.Component {
function FullscreenPage(props) {
return (<div>
<FullscreenPageHeader title={props.tournamentMeta.name} code={props.tournamentMeta.code}/>
</div>);
}
function FullscreenPageHeader(props) {
return (<Navbar color='light' className='mb-4 border-bottom py-0'>
<NavItem className='font-weight-bold'>{props.levelName}</NavItem>
<NavbarBrand>{props.title}</NavbarBrand>
<NavItem className='text-secondary'>
Turnier-Code: <b className='text-primary text-monospace'>{props.code}</b>
</NavItem>
</Navbar>);
}
class Main extends React.Component {
static async getInitialProps({query}) {
return {query};
}
constructor(props) {
super(props);
this.state = {
tournamentMeta: null
};
this.onTournamentRequestSuccess = this.onTournamentRequestSuccess.bind(this);
this.onTournamentRequestError = this.onTournamentRequestError.bind(this);
}
componentDidMount() {
getTournamentMeta(this.props.query.code, this.onTournamentRequestSuccess, this.onTournamentRequestError);
}
onTournamentRequestSuccess(requestStatus, tournament) {
this.setState({metaStatus: requestStatus, tournamentMeta: tournament});
}
onTournamentRequestError(error) {
if (error.response) {
this.setState({metaStatus: error.response.status});
} else {
this.setState({metaStatus: -1});
}
}
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, tournamentMeta} = this.state;
if (metaStatus === 200) {
return (<div>
<Head>
<title>{tournamentMeta.name}: turnie.re</title>
</Head>
<FullscreenPage tournamentMeta={tournamentMeta}/>
</div>);
} else {
return <ErrorPageComponent code={metaStatus}/>;
}
}
}
export default FullscreenTournamentPage;
export default Main;

3
static/css/tournament-fullscreen.css Normal file
View File

@ -0,0 +1,3 @@
nav li {
list-style-type: none;
}