diff --git a/js/components/TournamentInformationView.js b/js/components/TournamentInformationView.js new file mode 100644 index 0000000..3d6622b --- /dev/null +++ b/js/components/TournamentInformationView.js @@ -0,0 +1,116 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import { + Button, + ButtonGroup, + Col, + Container, + ListGroup, + ListGroupItem +} from 'reactstrap'; + + +class PrivateTournamentInformationView extends React.Component { + + render() { + const { tournament, isSignedIn, username, currentpage } = this.props; + + return ( + + + + +

{tournament.description}

+ + + {tournament.isPublic ? 'Das Turnier ist öffentlich.' : 'Das Turnier ist privat.'} + + Turnier-Code: {tournament.code} + von {tournament.owner_username} + +
+ ); + } +} + +function mapStateToPrivateTournamentInformationViewProps(state) { + const { isSignedIn, username } = state.userinfo; + return { isSignedIn, username }; +} + +export const TournamentInformationView = connect( + mapStateToPrivateTournamentInformationViewProps +)(PrivateTournamentInformationView); + +function ButtonsBadge(props) { + const { id, ownerName, isSignedIn, username, currentpage } = props; + + switch(currentpage) { + case 'statistics': + return ( + + + + + ); + case 'tournament': + return ( + + + + + ); + case 'edit': + return ( + + + + + ); + default: return null; + } +} + +function TournamentButton(props) { + const { id } = props; + return ; +} + +function EditButton(props) { + const { id, ownerName, isSignedIn, username } = props; + + if(isSignedIn && ownerName === username) { + return ( + + ); + } else { + return null; + } +} + +function StatisticsButton(props) { + const { id } = props; + return ; +} + + + +/* + + +

{description}

+ + + {isPublic ? 'Das Turnier ist öffentlich.' : 'Das Turnier ist privat.'} + + Turnier-Code: {code} + von {ownerUsername} + +
+ +*/ diff --git a/pages/tournament-statistics.js b/pages/tournament-statistics.js index 18ae0ea..6ef8f0e 100644 --- a/pages/tournament-statistics.js +++ b/pages/tournament-statistics.js @@ -16,6 +16,7 @@ import { } from 'reactstrap'; import { TurniereNavigation } from '../js/components/Navigation'; +import { TournamentInformationView } from '../js/components/TournamentInformationView'; import { BigImage } from '../js/components/BigImage'; import { Footer } from '../js/components/Footer'; import { Order, sort } from '../js/utils/sort'; @@ -332,7 +333,7 @@ class StatisticsTournamentPage extends React.Component {
- + @@ -354,40 +355,3 @@ class StatisticsTournamentPage extends React.Component { } export default connect()(StatisticsTournamentPage); - -class PrivateTournamentInformationView extends React.Component { - - render() { - const { tournament, isSignedIn, username } = this.props; - - return ( - - -

{tournament.description}

- - - {tournament.isPublic ? 'Das Turnier ist öffentlich.' : 'Das Turnier ist privat.'} - - Turnier-Code: {tournament.code} - von {tournament.owner_username} - -
- ); - } -} - -function mapStateToPrivateTournamentInformationViewProps(state) { - const { isSignedIn, username } = state.userinfo; - return { isSignedIn, username }; -} - -const TournamentInformationView = connect( - mapStateToPrivateTournamentInformationViewProps -)(PrivateTournamentInformationView); - -class TournamentButton extends React.Component { - render() { - const { id } = this.props; - return ; - } -} diff --git a/pages/tournament.js b/pages/tournament.js index ba65366..6066739 100644 --- a/pages/tournament.js +++ b/pages/tournament.js @@ -1,4 +1,3 @@ -<<<<<<< HEAD import Head from 'next/head'; import React from 'react'; import {connect} from 'react-redux'; @@ -8,41 +7,9 @@ import {ErrorPageComponent} from '../js/components/ErrorComponents'; import {Footer} from '../js/components/Footer'; import {TurniereNavigation} from '../js/components/Navigation'; import {BigImage} from '../js/components/BigImage'; +import {TournamentInformationView} from '../js/components/TournamentInformationView'; import {getState} from '../js/api'; import {getRequest} from '../js/redux/backendApi'; -======= -import Head from 'next/head'; -import React from 'react'; -import { connect } from 'react-redux'; -import { - Button, - ButtonGroup, - Card, - CardBody, - Col, - Container, - Input, - InputGroup, - InputGroupAddon, - ListGroup, - ListGroupItem, - Modal, - ModalBody, - ModalFooter, - ModalHeader, - Row, - Table -} from 'reactstrap'; - -import { ErrorPageComponent } from '../js/components/ErrorComponents'; -import { Footer } from '../js/components/Footer'; -import { TurniereNavigation } from '../js/components/Navigation'; -import { BigImage } from '../js/components/BigImage'; -import { - getRequest, - getState -} from '../js/api'; ->>>>>>> Properly style the buttons on the tournament and its statistics import 'bootstrap/dist/css/bootstrap.min.css'; @@ -57,17 +24,7 @@ class PrivateTournamentPage extends React.Component { // TODO: Change href-prop of the anchor tag to contain the tournament code return (
- - -

{description}

- - - {isPublic ? 'Das Turnier ist öffentlich.' : 'Das Turnier ist privat.'} - - Turnier-Code: {code} - von {ownerUsername} - -
+
{playoffStages.map(stage => - - - - ); -} - -function EditButton(props) { - const {id, ownerName, isSignedIn, username} = props; - - if(isSignedIn && ownerName === username) { - return (); - } else { - return null; - } -} - -function StatisticsButton(props) { - const { id } = props; - return ; -} - function getLevelName(levelNumber) { const names = ['Finale', 'Halbfinale', 'Viertelfinale', 'Achtelfinale']; if (levelNumber < names.length) { @@ -153,7 +85,7 @@ function convertTournament(apiTournament) { description: apiTournament.description, name: apiTournament.name, isPublic: apiTournament.public, - ownerUsername: apiTournament.owner_username, + owner_username: apiTournament.owner_username, groupStage: groupStage, playoffStages: playoffStages };