import Head from 'next/head'; import React from 'react'; import {notify} from 'react-notify-toast'; import {connect} from 'react-redux'; import { Button, Card, CardBody, Col, Collapse, Container, CustomInput, Form, FormGroup, Input, Label, Row } from 'reactstrap'; import {TurniereNavigation} from '../js/components/Navigation'; import {Footer} from '../js/components/Footer'; import EditableStringList from '../js/components/EditableStringList'; import {createTournament} from '../js/api'; import {WarningPopup} from '../js/components/WarningPopup'; import Router from 'next/router'; import '../static/css/everypage.css'; import RequireLogin from '../js/components/RequireLogin'; import NumericInput from '../js/components/NumericInput'; class CreatePage extends React.Component { render() { return (
Turnier erstellen: turnie.re
); } } function mapStateToCreatePageProperties(state) { const {isSignedIn} = state.userinfo; return {isSignedIn}; } export default connect(mapStateToCreatePageProperties)(CreatePage); function CreateTournamentCard() { return (

Turnier erstellen

); } class CreateTournamentForm extends React.Component { constructor(props) { super(props); this.state = { groupPhaseEnabled: false, name: '', description: '', public: false, groupSize: 4, groupAdvance: 1, teams: [], groups: [] }; this.handleGroupPhaseEnabledInput = this.handleGroupPhaseEnabledInput.bind(this); this.teamListUpdate = this.teamListUpdate.bind(this); this.groupListUpdate = this.groupListUpdate.bind(this); this.create = this.create.bind(this); this.handleNameInput = this.handleNameInput.bind(this); this.handleDescriptionInput = this.handleDescriptionInput.bind(this); this.handlePublicInput = this.handlePublicInput.bind(this); this.increaseGroupAdvance = this.increaseGroupAdvance.bind(this); this.decreaseGroupAdvance = this.decreaseGroupAdvance.bind(this); this.increaseGroupSize = this.increaseGroupSize.bind(this); this.decreaseGroupSize = this.decreaseGroupSize.bind(this); this.generateTournamentCreationObject = this.generateTournamentCreationObject.bind(this); this.valuesAreCredible = this.valuesAreCredible.bind(this); this.create = this.create.bind(this); } render() { return (

Teams

); } areGroupsIncomplete() { return this.state.groups.filter(group => group.length !== this.state.groupSize).length !== 0; } teamListUpdate(list) { this.setState({teams: list}); } groupListUpdate(list) { this.setState({groups: list}); } increaseGroupAdvance() { const newGroupAdvance = this.state.groupAdvance * 2; this.setState({ groupAdvance: newGroupAdvance }); } decreaseGroupAdvance() { const newGroupAdvance = Math.floor(this.state.groupAdvance / 2); if (newGroupAdvance >= 1) { this.setState({ groupAdvance: newGroupAdvance }); } } increaseGroupSize() { this.setState({groupSize: this.state.groupSize + 1}); } decreaseGroupSize() { const newGroupSize = this.state.groupSize - 1; if (newGroupSize >= 3) { this.setState({groupSize: newGroupSize}); } } handleGroupPhaseEnabledInput(input) { this.setState({groupPhaseEnabled: input.target.checked}); } handleNameInput(input) { this.setState({name: input.target.value}); } handleDescriptionInput(input) { this.setState({description: input.target.value}); } handlePublicInput(input) { this.setState({public: input.target.checked}); } create() { if (this.valuesAreCredible()) { createTournament(this.generateTournamentCreationObject(), data => { Router.push('/t/' + data.id); }, () => { notify.show('Das Turnier konnte nicht erstellt werden.', 'warning', 5000); }); } else { notify.show('Bitte korrigiere deine Eingaben zuerst.', 'warning', 5000); } } valuesAreCredible() { return this.state.teams.length >= this.state.groupAdvance && !this.areGroupsIncomplete(); } generateTournamentCreationObject() { const tournament = { 'name': this.state.name, 'description': this.state.description, 'public': this.state.public, 'group_stage': this.state.groupPhaseEnabled, 'teams': createTeamArray(this.state.groupPhaseEnabled, this.state.groups, this.state.teams) }; if (this.state.groupPhaseEnabled) { tournament.playoff_teams_amount = this.state.groupAdvance; } return tournament; } } /** * This method creates an array of team objects that conform to the currently * api specs available at https://apidoc.turnie.re/ * * @param {boolean} groupphase Whether a group phase is to be created * @param {string[][]} groups The teams split into the groups that are * to be used in the group phase of the tournament. Please note that * according to the api every team can only occur once (not enforced * by this method) and that every team from {@param teams} will have * to be in one of the groups (also not enforced by this method, but * might lead to inconsistencies) * @param {string[]} teams An array containing all names of the teams * that are to be created for the tournament * @return {Object[]} an array of teams that can be directly sent to the * backend */ function createTeamArray(groupphase, groups, teams) { const result = []; if (groupphase) { for (let groupNumber = 0; groupNumber < groups.length; groupNumber++) { for (let groupMember = 0; groupMember < groups[groupNumber].length; groupMember++) { result[result.length] = { 'name': groups[groupNumber][groupMember], 'group': groupNumber }; } } } else { for (let i = 0; i < teams.length; i++) { result[i] = {'name': teams[i]}; } } return result; }