import Head from 'next/head';
import React from 'react';
import {connect} from 'react-redux';
import {notify} from 'react-notify-toast';
import {
Col, Container, Button, Card, CardBody, Table, FormGroup, Label
} from 'reactstrap';
import {requestTournament} from '../js/api';
import {TurniereNavigation} from '../js/components/Navigation';
import {BigImage} from '../js/components/BigImage';
import {UserRestrictor, Option} from '../js/components/UserRestrictor';
import {Footer} from '../js/components/Footer';
import {Login} from '../js/components/Login';
import {ErrorPageComponent} from '../js/components/ErrorComponents';
import {updateTournament, updateTeamName} from '../js/api';
import NumericInput from '../js/components/NumericInput';
import {WarningPopup} from '../js/components/WarningPopup';
import 'bootstrap/dist/css/bootstrap.min.css';
import '../static/css/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: false
};
}
componentDidMount() {
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 (
);
}
}
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 (
{
this._edittournamentpropertiesfield = field;
}}/>
{
this._editteamfield = field;
}}/>
);
}
notifyOfContentUpdate() {
this._edittournamentpropertiesfield.notifyOfContentUpdate();
this._editteamfield.notifyOfContentUpdate();
}
}
function ReturnToTournamentButton() {
return (
);
}
class EditTournamentPropertiesField extends React.Component {
render() {
return (
Turnier-Eigenschaften ändern
{
this._visibleedittournamentform = form;
}}/>
);
}
notifyOfContentUpdate() {
this._visibleedittournamentform.getWrappedInstance().notifyOfContentUpdate();
}
}
class EditTournamentForm extends React.Component {
constructor(props) {
super(props);
this.state = {
name: '',
description: '',
isPublic: false,
playoffTeamsAmount: 0,
instantFinalistAmount: 0,
intermediateRoundParticipants: 0
};
this.increasePlayoffTeamsAmount = this.increasePlayoffTeamsAmount.bind(this);
this.decreasePlayoffTeamsAmount = this.decreasePlayoffTeamsAmount.bind(this);
this.increaseInstantFinalistsAmount = this.increaseInstantFinalistsAmount.bind(this);
this.decreaseInstantFinalistsAmount = this.decreaseInstantFinalistsAmount.bind(this);
this.increaseIntermediateRoundParticipants = this.increaseIntermediateRoundParticipants.bind(this);
this.decreaseIntermediateRoundParticipants = this.decreaseIntermediateRoundParticipants.bind(this);
}
render() {
const {name, description, isPublic} = this.state;
return ();
}
notifyOfContentUpdate() {
const {name, description, isPublic, playoffTeamsAmount, instantFinalistAmount,
intermediateRoundParticipants} = this.props;
this.setState({
playoffTeamsAmount: playoffTeamsAmount,
instantFinalistAmount: instantFinalistAmount,
intermediateRoundParticipants: intermediateRoundParticipants,
name: name ? name : '', description: description ? description : '', isPublic: isPublic
});
}
handleClick() {
if (this.state.name !== '' && this.state.playoffTeamsAmount === this.state.instantFinalistAmount +
(this.state.intermediateRoundParticipants / 2)) {
updateTournament(this.generateUpdatedTeam(), () => {
notify.show('Turnier wurde erfolgreich geändert.', 'success', 5000);
}, () => {
notify.show('Turnier konnte nicht aktualisiert werden.', 'warning', 5000);
});
} else {
notify.show('Bitte korrigiere deine Eingaben zuerst.', 'warning', 5000);
}
}
generateUpdatedTeam() {
return {
id: this.props.id,
name: this.state.name,
description: this.state.description,
public: this.state.isPublic,
playoff_teams_amount: this.state.playoffTeamsAmount,
instant_finalists_amount: this.state.instantFinalistAmount,
intermediate_round_participants_amount: this.state.intermediateRoundParticipants
};
}
handleNameInput(input) {
this.setState({name: input.target.value});
}
handleDescriptionInput(input) {
this.setState({description: input.target.value});
}
handlePublicInput(input) {
this.setState({public: input.target.value});
}
increasePlayoffTeamsAmount() {
this.setState({playoffTeamsAmount: this.state.playoffTeamsAmount * 2});
}
decreasePlayoffTeamsAmount() {
if (this.state.playoffTeamsAmount > 1) {
this.setState({playoffTeamsAmount: Math.floor(this.state.playoffTeamsAmount / 2)});
}
}
increaseInstantFinalistsAmount() {
this.setState({instantFinalistAmount: this.state.instantFinalistAmount + 1});
}
decreaseInstantFinalistsAmount() {
if (this.state.instantFinalistAmount > 0) {
this.setState({instantFinalistAmount: this.state.instantFinalistAmount - 1});
}
}
increaseIntermediateRoundParticipants() {
this.setState({intermediateRoundParticipants: this.state.intermediateRoundParticipants + 1});
}
decreaseIntermediateRoundParticipants() {
if (this.state.intermediateRoundParticipants > 0) {
this.setState({intermediateRoundParticipants: this.state.intermediateRoundParticipants - 1});
}
}
}
function mapStateToTournamentFormProps(state) {
const {name, id, description, isPublic, stages, playoffTeamsAmount, instantFinalistAmount,
intermediateRoundParticipants} = state.tournamentinfo;
return {name, id, description, isPublic, stages, playoffTeamsAmount, instantFinalistAmount,
intermediateRoundParticipants};
}
const VisibleEditTournamentForm = connect(mapStateToTournamentFormProps, null, null,
{withRef: true})(EditTournamentForm);
class EditTeamField extends React.Component {
render() {
return (
Team-Namen ändern
{
this._visibleeditteamnamesform = form;
}}/>
);
}
notifyOfContentUpdate() {
this._visibleeditteamnamesform.getWrappedInstance().notifyOfContentUpdate();
}
}
class EditTeamNamesForm extends React.Component {
constructor(props) {
super(props);
this.state = {
teams: []
};
}
render() {
const {teams} = this.state;
return ();
}
notifyOfContentUpdate() {
const {teams} = this.props;
this.setState({
teams: teams
});
}
handleNameInput(index, input) {
const 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);