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

Begin designing tournament page

This commit is contained in:
Felix Hamme 2018-12-03 13:02:23 +01:00
parent 9dd2466e10
commit 0de789b7e3
1 changed files with 58 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
pages/tournament.js
View File

@ -1,23 +1,75 @@
import Head from 'next/head' import Head from 'next/head'
import "../style.css" import React from 'react'
import {Container, ListGroup, ListGroupItem} from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import {BigImage, Footer, TurniereNavigation} from '../js/CommonComponents.js'
import '../static/everypage.css'
import {getRequest} from "../js/api";
class TournamentPage extends React.Component { function Tournament(props) {
return (
<Container>
<a href='edit' className='btn btn-outline-secondary'>Turnier bearbeiten</a>
<p>{props.tournament.description}</p>
<ListGroup>
<ListGroupItem>
{props.tournament.isPublic ? 'Das Turnier ist öffentlich.' : 'Das Turnier ist privat.'}
</ListGroupItem>
<ListGroupItem>Turnier-Code: <b>{props.tournament.code}</b></ListGroupItem>
</ListGroup>
</Container>
);
}
function TournamentContainer(props) {
if (props.data === null) {
return <Container>null</Container>
} else {
return <Tournament tournament={props.data.tournament}/>
}
}
class Main extends React.Component {
constructor(props) {
super(props);
const code = this.props.query.code;
getRequest('/tournaments/' + code, {})
.then(response => {
const attributes = response.data.data.attributes;
const relationships = response.data.data.relationships;
this.setState({
tournament: {
name: attributes.name,
code: attributes.code,
description: attributes.description,
isPublic: attributes.public,
teams: relationships.teams.data.map(team => team.id),
stages: relationships.stages.data.map(stage => stage.id)
}
});
})
.catch(error => console.log(error));
}
static async getInitialProps({query}) { static async getInitialProps({query}) {
return {query} return {query}
} }
render() { render() {
const tournamentName = this.state === null ? 'Turnier' : this.state.tournament.name;
return ( return (
<div> <div>
<Head> <Head>
<title>Turnie.re - Turnieranzeige</title> <title>{tournamentName}: turnie.re</title>
</Head> </Head>
<p className="example">Turnieranzeige</p> <TurniereNavigation/>
<p>Code: {this.props.query.code}</p> <BigImage text={tournamentName}/>
<TournamentContainer data={this.state}/>
{JSON.stringify(this.state)}
<Footer/>
</div> </div>
); );
} }
} }
export default TournamentPage export default Main