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 { UserRestrictor, Option } from '../js/components/UserRestrictor';
import { Login } from '../js/components/Login';
import EditableStringList from '../js/components/EditableStringList';
import { createTournament } from '../js/api';
import '../static/everypage.css';
class PrivateCreatePage extends React.Component {
render() {
const { isSignedIn } = this.props;
return (
);
}
}
function mapStateToCreatePageProperties(state) {
const { isSignedIn } = state.userinfo;
return { isSignedIn };
}
const CreatePage = connect(
mapStateToCreatePageProperties
)(PrivateCreatePage);
export default CreatePage;
function CreateTournamentCard() {
return (
Turnier erstellen
);
}
const GroupphaseFader = posed.div({
visible: {
opacity: 1,
height: 150
},
hidden: {
opacity: 0,
height: 0
}
});
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.handleGroupSizeInput = this.handleGroupSizeInput.bind(this);
this.handleGroupAdvanceInput = this.handleGroupAdvanceInput.bind(this);
this.create = this.create.bind(this);
}
render() {
return (
Teams
);
}
teamListUpdate(list) {
this.setState({teams: list});
}
groupListUpdate(list) {
this.setState({groups: list});
}
handleGroupSizeInput(input) {
let newSize = input.target.value;
if(newSize <= this.state.groupAdvance) {
this.setState({
groupSize: newSize,
groupAdvance: newSize - 1
});
} else {
this.setState({ groupSize: newSize });
}
}
handleGroupAdvanceInput(input) {
this.setState({ groupAdvance: input.target.value });
}
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({
'name': this.state.name,
'description': this.state.description,
'public': this.state.public,
'teams': this.createTeamArray(this.state.teams)
}, () => {
notify.show('Das Turnier wurde erfolgreich erstellt.', 'success', 5000);
}, () => {
notify.show('Das Turnier konnte nicht erstellt werden.', 'warning', 5000);
});
}
createTeamArray(teamnames) {
var result = [];
for(var i = 0; i < teamnames.length; i++) {
result[i] = { 'name': teamnames[i] };
}
return result;
}
}