diff --git a/js/EditableStringList.js b/js/EditableStringList.js
new file mode 100644
index 0000000..a7cfda0
--- /dev/null
+++ b/js/EditableStringList.js
@@ -0,0 +1,110 @@
+import React from "react";
+import {Alert, Button, Input, InputGroup, InputGroupAddon} from "reactstrap";
+
+export default class EditableStringList extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ entries: props.entries
+ };
+ this.add = this.add.bind(this);
+ this.remove = this.remove.bind(this);
+ }
+
+ add(text) {
+ if (text === '' || this.state.entries.includes(text)) {
+ return false;
+ }
+ this.state.entries.push(text);
+ this.setState({entries: this.state.entries});
+ this.props.onChange(this.state.entries);
+ return true;
+ }
+
+ remove(text) {
+ let tmp = this.state.entries.filter(item => item !== text);
+ this.setState({entries: tmp});
+ this.props.onChange(tmp);
+ }
+
+ render() {
+ if ((typeof this.state.entries !== 'undefined') && this.state.entries.length > 0) {
+ return (
+
+
+ {this.state.entries.map((text) => - )}
+
+ );
+ } else {
+ return (
+
+
+ {this.props.placeholder}
+
+ );
+ }
+ }
+}
+
+class StringInput extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {value: ''};
+ this.handleChange = this.handleChange.bind(this);
+ this.submit = this.submit.bind(this);
+ }
+
+ handleChange(event) {
+ this.setState({value: event.target.value});
+ }
+
+ render() {
+ return (
+
+ {
+ if (e.key === 'Enter') {
+ this.submit();
+ return false;
+ }
+ }}/>
+
+
+
+
+ )
+ }
+
+ submit() {
+ if (this.props.submit(this.state.value)) {
+ this.setState({value: ''});
+ }
+ }
+}
+
+class Item extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ visible: true
+ };
+ this.onDismiss = this.onDismiss.bind(this);
+ }
+
+ onDismiss() {
+ this.setState({visible: false});
+ this.props.removeItem(this.props.text);
+ }
+
+ render() {
+ return (
+
+ {this.props.text}
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index e004588..2808543 100644
--- a/package.json
+++ b/package.json
@@ -21,5 +21,8 @@
"react": "^16.6.1",
"react-dom": "^16.6.1",
"reactstrap": "^6.5.0"
+ },
+ "devDependencies": {
+ "react-editable-list": "0.0.3"
}
}
diff --git a/pages/create.js b/pages/create.js
index 91a2af0..fbe38f9 100644
--- a/pages/create.js
+++ b/pages/create.js
@@ -2,19 +2,8 @@ import Head from 'next/head'
import '../static/everypage.css'
import {Footer, TurniereNavigation} from "../js/CommonComponents";
import React from "react";
-import {
- Button,
- Card,
- CardBody,
- Container,
- CustomInput, Fade,
- Form,
- FormGroup,
- Input,
- InputGroup,
- InputGroupAddon,
- Label
-} from "reactstrap";
+import {Button, Card, CardBody, Container, CustomInput, Fade, Form, FormGroup, Input, Label} from "reactstrap";
+import EditableStringList from "../js/EditableStringList";
export default () => (
@@ -45,62 +34,57 @@ function CreateTournamentCard() {
class CreateTournamentForm extends React.Component {
constructor(props) {
super(props);
- this.state = { fadeIn: false };
+ this.state = {fadeIn: false, teams: []};
this.toggle = this.toggle.bind(this);
+ this.teamListUpdate = this.teamListUpdate.bind(this);
}
render() {
return (
-