import Head from 'next/head';
import React from 'react';
import {notify} from 'react-notify-toast';
import {connect} from 'react-redux';
import posed from 'react-pose';
import {Button, Card, CardBody, Container, CustomInput, Form, FormGroup, Input, Label} 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 '../static/css/everypage.css';
import RequireLogin from '../js/components/RequireLogin';
class CreatePage extends React.Component {
render() {
return (
);
}
teamListUpdate(list) {
this.setState({teams: list});
}
groupListUpdate(list) {
this.setState({groups: list});
}
handleGroupSizeInput(input) {
const newSize = input.target.value;
if (newSize === undefined || newSize < 2) {
return;
}
if (newSize <= this.state.groupAdvance) {
this.setState({
groupSize: newSize, groupAdvance: newSize - 1
});
} else {
this.setState({groupSize: newSize});
}
}
handleGroupAdvanceInput(input) {
const newAdvance = input.target.value;
if (newAdvance === undefined || newAdvance <= 0 ||
newAdvance >= this.state.groupSize) {
return;
}
this.setState({groupAdvance: newAdvance});
}
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() {
createTournament(this.generateTournamentCreationObject(), () => {
notify.show('Das Turnier wurde erfolgreich erstellt.', 'success', 5000);
}, () => {
notify.show('Das Turnier konnte nicht erstellt werden.', 'warning', 5000);
});
}
generateTournamentCreationObject() {
let 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;
}