turniere
/
turniere-frontend
mirror of https://github.com/turniere/turniere-frontend.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Make the create-page actually send the data to the api

This commit is contained in:
JP1998 2019-04-10 20:10:48 +02:00
parent e2569b30c8
commit 0a1678ed51
2 changed files with 49 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/api.js
View File

@ -444,7 +444,3 @@ function rehydrateApplicationState() {
});
}
}

56
pages/create.js
View File

@ -1,5 +1,6 @@
import Head from 'next/head';
import React from 'react';
import { notify } from 'react-notify-toast';
import { connect } from 'react-redux';
import {
@ -19,8 +20,11 @@ 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 { verifyCredentials } from '../js/api';
import EditableStringList from '../js/components/EditableStringList';
import {
verifyCredentials,
createTournament
} from '../js/api';
import '../static/everypage.css';
@ -91,9 +95,22 @@ function CreateTournamentCard() {
class CreateTournamentForm extends React.Component {
constructor(props) {
super(props);
this.state = {fadeIn: false, teams: []};
this.state = {
fadeIn: false,
name: '',
description: '',
public: false,
teams: []
};
this.toggle = this.toggle.bind(this);
this.teamListUpdate = this.teamListUpdate.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.create = this.create.bind(this);
}
render() {
@ -102,15 +119,15 @@ class CreateTournamentForm extends React.Component {
<Form>
<FormGroup>
<Label for="name">Name des Turniers</Label>
<Input type="text" name="name" size="255" required/>
<Input type="text" name="name" size="255" required value={this.state.name} onChange={this.handleNameInput}/>
</FormGroup>
<FormGroup>
<Label for="description">Beschreibung (optional)</Label>
<Input type="text" name="description" size="255"/>
<Input type="text" name="description" size="255" value={this.state.description} onChange={this.handleDescriptionInput}/>
</FormGroup>
<FormGroup>
<CustomInput type="checkbox" id="public"
label="Turnier öffentlich anzeigen (schreibgeschützt)"/>
label="Turnier öffentlich anzeigen (schreibgeschützt)" checked={this.state.public} onChange={this.handlePublicInput}/>
<CustomInput type="checkbox" id="mix-teams" label="Teams mischen"/>
<CustomInput type="checkbox" id="group-phase" label="Gruppenphase" onClick={this.toggle}/>
</FormGroup>
@ -130,7 +147,7 @@ class CreateTournamentForm extends React.Component {
<h3 className="custom-font mt-4">Teams</h3>
<EditableStringList addButtonText="hinzufügen" placeholder="Keine Teams hinzugefügt!" entries={[]}
onChange={this.teamListUpdate} inputPlaceholder="Teamname"/>
<Button color="success" size="lg" className="w-100 shadow-sm mt-4">Turnier erstellen</Button>
<Button color="success" size="lg" className="w-100 shadow-sm mt-4" onClick={this.create}>Turnier erstellen</Button>
</div>
);
}
@ -144,4 +161,29 @@ class CreateTournamentForm extends React.Component {
fadeIn: !this.state.fadeIn
});
}
}
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.state.teams
}, () => {
notify.show('Das Turnier wurde erfolgreich erstellt.', 'success', 5000);
}, () => {
notify.show('Das Turnier konnte nicht erstellt werden.', 'warning', 5000);
});
}
}