Extract the tournament information view for more consisten looks
This commit is contained in:
Jonny
JP1998
parent
dd7168da4f
commit
9fc909e257
|
|
@ -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 (
|
||||
<Container>
|
||||
|
||||
<ButtonsBadge
|
||||
id={tournament.id}
|
||||
ownerName={tournament.owner_username}
|
||||
isSignedIn={isSignedIn}
|
||||
username={username}
|
||||
currentpage={currentpage}/>
|
||||
|
||||
<p>{tournament.description}</p>
|
||||
<ListGroup>
|
||||
<ListGroupItem>
|
||||
{tournament.isPublic ? 'Das Turnier ist öffentlich.' : 'Das Turnier ist privat.'}
|
||||
</ListGroupItem>
|
||||
<ListGroupItem>Turnier-Code: <b>{tournament.code}</b></ListGroupItem>
|
||||
<ListGroupItem>von <b>{tournament.owner_username}</b></ListGroupItem>
|
||||
</ListGroup>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
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 (
|
||||
<ButtonGroup>
|
||||
<EditButton id={id} ownerName={ownerName} isSignedIn={isSignedIn} username={username}/>
|
||||
<TournamentButton id={id}/>
|
||||
</ButtonGroup>
|
||||
);
|
||||
case 'tournament':
|
||||
return (
|
||||
<ButtonGroup>
|
||||
<EditButton id={id} ownerName={ownerName} isSignedIn={isSignedIn} username={username}/>
|
||||
<StatisticsButton id={id}/>
|
||||
</ButtonGroup>
|
||||
);
|
||||
case 'edit':
|
||||
return (
|
||||
<ButtonGroup>
|
||||
<StatisticsButton id={id}/>
|
||||
<TournamentButton id={id}/>
|
||||
</ButtonGroup>
|
||||
);
|
||||
default: return null;
|
||||
}
|
||||
}
|
||||
|
||||
function TournamentButton(props) {
|
||||
const { id } = props;
|
||||
return <Button href={'/t/' + id} color='secondary'>Zum Turnier</Button>;
|
||||
}
|
||||
|
||||
function EditButton(props) {
|
||||
const { id, ownerName, isSignedIn, username } = props;
|
||||
|
||||
if(isSignedIn && ownerName === username) {
|
||||
return (
|
||||
<Button href={'/t/' + id + '/edit'} color='secondary'>Turnier bearbeiten</Button>
|
||||
);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function StatisticsButton(props) {
|
||||
const { id } = props;
|
||||
return <Button href={'/t/' + id + '/statistics'} color='secondary'>Statistiken zum Turnier</Button>;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
<Container>
|
||||
<ButtonsBadge id={id} ownerName={ownerUsername} isSignedIn={isSignedIn} username={username}/>
|
||||
<p>{description}</p>
|
||||
<ListGroup>
|
||||
<ListGroupItem>
|
||||
{isPublic ? 'Das Turnier ist öffentlich.' : 'Das Turnier ist privat.'}
|
||||
</ListGroupItem>
|
||||
<ListGroupItem>Turnier-Code: <b>{code}</b></ListGroupItem>
|
||||
<ListGroupItem>von <b>{ownerUsername}</b></ListGroupItem>
|
||||
</ListGroup>
|
||||
</Container>
|
||||
|
||||
*/
|
||||
|
|
@ -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 {
|
|||
<TurniereNavigation/>
|
||||
<BigImage text={tournamentStatistics.tournament.name}/>
|
||||
<div className='pb-5'>
|
||||
<TournamentInformationView tournament={tournamentStatistics.tournament}/>
|
||||
<TournamentInformationView tournament={tournamentStatistics.tournament} currentpage='statistics'/>
|
||||
<Container className="py-5">
|
||||
<Row>
|
||||
<Col xs="6">
|
||||
|
|
@ -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 (
|
||||
<Container>
|
||||
<TournamentButton id={tournament.id} ownerName={tournament.owner_username} isSignedIn={isSignedIn} username={username}/>
|
||||
<p>{tournament.description}</p>
|
||||
<ListGroup>
|
||||
<ListGroupItem>
|
||||
{tournament.isPublic ? 'Das Turnier ist öffentlich.' : 'Das Turnier ist privat.'}
|
||||
</ListGroupItem>
|
||||
<ListGroupItem>Turnier-Code: <b>{tournament.code}</b></ListGroupItem>
|
||||
<ListGroupItem>von <b>{tournament.owner_username}</b></ListGroupItem>
|
||||
</ListGroup>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
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 <Button href={'/t/' + id} outline color='secondary'>Zum Turnier</Button>;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (<div className='pb-5'>
|
||||
<Container>
|
||||
<ButtonsBadge id={id} ownerName={ownerUsername} isSignedIn={isSignedIn} username={username}/>
|
||||
<p>{description}</p>
|
||||
<ListGroup>
|
||||
<ListGroupItem>
|
||||
{isPublic ? 'Das Turnier ist öffentlich.' : 'Das Turnier ist privat.'}
|
||||
</ListGroupItem>
|
||||
<ListGroupItem>Turnier-Code: <b>{code}</b></ListGroupItem>
|
||||
<ListGroupItem>von <b>{ownerUsername}</b></ListGroupItem>
|
||||
</ListGroup>
|
||||
</Container>
|
||||
<TournamentInformationView tournament={this.props.tournament} currentpage='tournament'/>
|
||||
<div className='stages pt-5'>
|
||||
{playoffStages.map(stage => <Stage isSignedIn={isSignedIn} isOwner={username === ownerUsername}
|
||||
level={getLevelName(stage.level)} matches={stage.matches}
|
||||
|
|
@ -84,31 +41,6 @@ function mapStateToTournamentPageProperties(state) {
|
|||
|
||||
const TournamentPage = connect(mapStateToTournamentPageProperties)(PrivateTournamentPage);
|
||||
|
||||
function ButtonsBadge(props) {
|
||||
const { id, ownerName, isSignedIn, username } = props;
|
||||
return (
|
||||
<ButtonGroup>
|
||||
<EditButton id={id} ownerName={ownerName} isSignedIn={isSignedIn} username={username}/>
|
||||
<StatisticsButton id={id}/>
|
||||
</ButtonGroup>
|
||||
);
|
||||
}
|
||||
|
||||
function EditButton(props) {
|
||||
const {id, ownerName, isSignedIn, username} = props;
|
||||
|
||||
if(isSignedIn && ownerName === username) {
|
||||
return (<Button href={'/t/' + id + '/edit'} outline color='secondary'>Turnier bearbeiten</Button>);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function StatisticsButton(props) {
|
||||
const { id } = props;
|
||||
return <Button href={'/t/' + id + '/statistics'} outline color='secondary'>Statistiken zum Turnier</Button>;
|
||||
}
|
||||
|
||||
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
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue