321 lines
9.9 KiB
JavaScript
321 lines
9.9 KiB
JavaScript
import Head from 'next/head';
|
|
import React from 'react';
|
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
|
import { connect } from 'react-redux';
|
|
import { notify } from 'react-notify-toast';
|
|
|
|
import { requestTournament } from '../js/api';
|
|
import { BigImage, Footer, TurniereNavigation, Login, UserRestrictor, Option } from '../js/CommonComponents.js';
|
|
import { ErrorPageComponent } from '../js/components/ErrorComponents.js';
|
|
|
|
import {
|
|
Container,
|
|
Button,
|
|
Card,
|
|
CardBody,
|
|
Table
|
|
} from 'reactstrap';
|
|
|
|
import {
|
|
verifyCredentials,
|
|
updateTeamName
|
|
} from '../js/api';
|
|
|
|
import '../static/everypage.css';
|
|
import '../static/css/index.css';
|
|
|
|
class EditTournamentPage extends React.Component {
|
|
|
|
static async getInitialProps({query}) {
|
|
return {query};
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
validCode: true
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
verifyCredentials();
|
|
requestTournament(this.props.query.code, () => {
|
|
this.setState({ validCode: true });
|
|
|
|
if(this._edittournamentcontent != null) {
|
|
this._edittournamentcontent.notifyOfContentUpdate();
|
|
}
|
|
}, () => {
|
|
this.setState({ validCode: false });
|
|
});
|
|
}
|
|
|
|
render() {
|
|
const { validCode } = this.state;
|
|
const { tournamentname, ownerUsername, isSignedIn, username } = this.props;
|
|
|
|
return (
|
|
<UserRestrictor>
|
|
<Option condition={ validCode && isSignedIn && ownerUsername === username }>
|
|
<div className='pb-5'>
|
|
<Head>
|
|
<title>Turnie.re - Turnier bearbeiten</title>
|
|
</Head>
|
|
<TurniereNavigation/>
|
|
|
|
<BigImage text={ tournamentname }/>
|
|
<EditTournamentContent ref={(edittournamentcontent) => { this._edittournamentcontent = edittournamentcontent; }}/>
|
|
<Footer/>
|
|
</div>
|
|
</Option>
|
|
<Option condition={ validCode && isSignedIn }>
|
|
<div className='pb-5'>
|
|
<Head>
|
|
<title>Turnie.re - Turnier bearbeiten</title>
|
|
</Head>
|
|
<TurniereNavigation/>
|
|
|
|
<BigImage text="TODO: Not allowed to edit tournament"/>
|
|
|
|
<Footer/>
|
|
</div>
|
|
</Option>
|
|
<Option condition={ validCode }>
|
|
<div className="main generic-fullpage-bg">
|
|
<Head>
|
|
<title>Turnie.re - Turnier bearbeiten</title>
|
|
</Head>
|
|
<TurniereNavigation/>
|
|
|
|
<div>
|
|
<Login hint="Sie müssen angemeldet sein, um ein Turnier zu bearbeiten."/>
|
|
</div>
|
|
|
|
<Footer/>
|
|
</div>
|
|
</Option>
|
|
<Option condition={true}>
|
|
<ErrorPageComponent statusCode={ 404 }/>
|
|
</Option>
|
|
</UserRestrictor>
|
|
);
|
|
}
|
|
}
|
|
|
|
function mapStateToTournamentInfo(state) {
|
|
const { tournamentname, ownerUsername } = state.tournamentinfo;
|
|
const { isSignedIn, username } = state.userinfo;
|
|
return { tournamentname, ownerUsername, isSignedIn, username };
|
|
}
|
|
|
|
export default connect(
|
|
mapStateToTournamentInfo
|
|
)(EditTournamentPage);
|
|
|
|
class EditTournamentContent extends React.Component {
|
|
|
|
render() {
|
|
return (
|
|
<div className='mb-5'>
|
|
<ReturnToTournamentButton/>
|
|
<EditTournamentPropertiesField ref={(field) => { this._edittournamentpropertiesfield = field; }}/>
|
|
<EditTeamField ref={(field) => { this._editteamfield = field; }}/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
notifyOfContentUpdate() {
|
|
this._edittournamentpropertiesfield.notifyOfContentUpdate();
|
|
this._editteamfield.notifyOfContentUpdate();
|
|
}
|
|
}
|
|
|
|
function ReturnToTournamentButton() {
|
|
return (
|
|
<Container className="px-0">
|
|
<Button color="secondary" className="mb-5 w-100" href="./">Zurück zum Turnier</Button>
|
|
</Container>
|
|
);
|
|
}
|
|
|
|
class EditTournamentPropertiesField extends React.Component {
|
|
|
|
render() {
|
|
return (
|
|
<Card className="container">
|
|
<CardBody>
|
|
<h2>Turnier-Eigenschaften ändern</h2>
|
|
<VisibleEditTournamentForm ref={(form) => { this._visibleedittournamentform = form; }}/>
|
|
</CardBody>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
notifyOfContentUpdate() {
|
|
this._visibleedittournamentform.getWrappedInstance().notifyOfContentUpdate();
|
|
}
|
|
}
|
|
|
|
class EditTournamentForm extends React.Component {
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
name : '',
|
|
description : '',
|
|
isPublic : false
|
|
};
|
|
}
|
|
|
|
render() {
|
|
const { name, description, isPublic } = this.state;
|
|
|
|
return (
|
|
<div>
|
|
<div className="form-group">
|
|
<label htmlFor="name">Turnier-Name</label>
|
|
<input className="form-control" type="text" name="name" id="edittournament-textfield-name" value={ name } placeholder={ name } onChange={ this.handleNameInput.bind(this) } />
|
|
</div>
|
|
<div className="form-group">
|
|
<label htmlFor="name">Turnier-Beschreibung</label>
|
|
<input className="form-control" type="text" name="name" id="edittournament-textfield-description" value={ description } placeholder={ description } onChange={ this.handleDescriptionInput.bind(this) } />
|
|
</div>
|
|
<div className="form-group custom-control custom-checkbox">
|
|
<input className="custom-control-input" type="checkbox" name="isPublic" id="edittournament-checkbox-isPublic" value={ isPublic } onChange={ this.handlePublicInput.bind(this) } />
|
|
<label htmlFor="isPublic" className="custom-control-label">Das Turnier öffentlich anzeigen</label>
|
|
</div>
|
|
<div className="form-group">
|
|
<div className="input-group">
|
|
<Button color="success" className="px-5" id="edittournament-button" onClick={ this.handleClick.bind(this) }>Ändern</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
notifyOfContentUpdate() {
|
|
const { name, description, isPublic } = this.props;
|
|
|
|
this.setState({
|
|
name : name? name : '',
|
|
description : description? description : '',
|
|
isPublic : isPublic
|
|
});
|
|
}
|
|
|
|
handleClick() {
|
|
// TODO: Apply changes to the tournament properties
|
|
}
|
|
|
|
handleNameInput(input) {
|
|
this.setState({ name : input.target.value });
|
|
}
|
|
|
|
handleDescriptionInput(input) {
|
|
this.setState({ description : input.target.value });
|
|
}
|
|
|
|
handlePublicInput(input) {
|
|
this.setState({ public : input.target.value });
|
|
}
|
|
}
|
|
|
|
function mapStateToTournamentFormProps(state) {
|
|
const { name, description, isPublic } = state.tournamentinfo;
|
|
return { name, description, isPublic };
|
|
}
|
|
|
|
const VisibleEditTournamentForm = connect(
|
|
mapStateToTournamentFormProps,
|
|
null, null, { withRef : true}
|
|
)(EditTournamentForm);
|
|
|
|
class EditTeamField extends React.Component {
|
|
|
|
render() {
|
|
return (
|
|
<Card className="container my-4">
|
|
<CardBody>
|
|
<h2>Team-Namen ändern</h2>
|
|
<VisibleEditTeamNamesForm ref={(form) => { this._visibleeditteamnamesform = form; }}/>
|
|
</CardBody>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
notifyOfContentUpdate() {
|
|
this._visibleeditteamnamesform.getWrappedInstance().notifyOfContentUpdate();
|
|
}
|
|
}
|
|
|
|
class EditTeamNamesForm extends React.Component {
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
teams : []
|
|
};
|
|
}
|
|
|
|
render() {
|
|
const { teams } = this.state;
|
|
|
|
return (
|
|
<div>
|
|
<Table className="table-striped mt-3">
|
|
<tbody>
|
|
{
|
|
teams.map((team, index) =>
|
|
<tr key={index}>
|
|
<td><Button outline size="sm" className="changeTeamnameButton" id={ 'editteam-button-team_' + team.id } onClick={ this.handleClick.bind(this, index) }>Ändern</Button></td>
|
|
<td className="w-100"><input className="form-control" type="text" id={ 'editteam-textfield-team_' + team.id } value={ team.name } placeholder={ team.name } onChange={ this.handleNameInput.bind(this, index) } /></td>
|
|
</tr>
|
|
)
|
|
}
|
|
</tbody>
|
|
</Table>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
notifyOfContentUpdate() {
|
|
const { teams } = this.props;
|
|
|
|
this.setState({
|
|
teams : teams
|
|
});
|
|
}
|
|
|
|
handleNameInput(index, input) {
|
|
var team = this.state.teams.slice();
|
|
|
|
team[index].name = input.target.value;
|
|
|
|
this.setState({
|
|
teams : team
|
|
});
|
|
}
|
|
|
|
handleClick(index) {
|
|
updateTeamName(this.state.teams[index], () => {
|
|
notify.show('Team Name wurde erfolgreich geändert.', 'success', 5000);
|
|
}, () => {
|
|
notify.show('Team Name konnte nicht geändert werden.', 'warning', 5000);
|
|
});
|
|
}
|
|
}
|
|
|
|
function mapStateToTeamFormProps(state) {
|
|
const { teams } = state.tournamentinfo;
|
|
return { teams };
|
|
}
|
|
|
|
const VisibleEditTeamNamesForm = connect(
|
|
mapStateToTeamFormProps,
|
|
null, null, { withRef : true }
|
|
)(EditTeamNamesForm);
|
|
|