Begin designing tournament page

2018-12-03 13:02:23 +01:00 · 2018-12-03 13:02:23 +01:00 · 0de789b7e3
parent 9dd2466e10
commit 0de789b7e3
1 changed files with 58 additions and 6 deletions
--- a/pages/tournament.js
+++ b/pages/tournament.js
@ -1,23 +1,75 @@
 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}) {
        return {query}
    }

    render() {
+        const tournamentName = this.state === null ? 'Turnier' : this.state.tournament.name;
        return (
            <div>
                <Head>
-                    <title>Turnie.re - Turnieranzeige</title>
+                    <title>{tournamentName}: turnie.re</title>
                </Head>
-                <p className="example">Turnieranzeige</p>
-                <p>Code: {this.props.query.code}</p>
+                <TurniereNavigation/>
+                <BigImage text={tournamentName}/>
+                <TournamentContainer data={this.state}/>
+                {JSON.stringify(this.state)}
+                <Footer/>
            </div>
        );
    }
 }

-export default TournamentPage
+export default Main