Merge branch 'master' into ticket/TURNIERE-141

README.md

@@ -15,7 +15,7 @@ $ git clone https://github.com/turniere/turniere-frontend.git
 Afterwards you'll have to install the used libraries using following command:
 
 ```
-yarn install
+$ yarn install
 ```
 
 Afterwards you may simply run the developer version of the project:

js/api.js

@@ -199,7 +199,7 @@ const reducer_userinfo = (state = defaultstate_userinfo, action) => {
             __store.dispatch({
                 type : actiontypes_userinfo.LOGIN_RESULT_SUCCESS,
                 parameters : {
-                    username : resp.data.data.username,
+                    username : resp.data.username,
                 }
             });
             storeOptionalToken(resp);

js/components/Login.js

@@ -8,6 +8,8 @@ import {
     clearErrors
 } from '../api';
 
+import '../../static/css/errormessages.css';
+
 export function Login(props) {
     return (
         <Container className="py-5">
@@ -31,14 +33,9 @@ class LoginErrorList extends React.Component {
         const { error, errorMessages } = this.props;
         if(error) {
             return (
-                <ul>
+                <ul className='mt-3 error-box'>
                     { errorMessages.map((message, index) => 
                         <li key={index}>
-                            <style jsx>{`
-                                li {
-                                    color:red;
-                                }
-                            `}</style>
                             {message}
                         </li>
 

pages/create.js

@@ -217,7 +217,8 @@ class CreateTournamentForm extends React.Component {
             'name': this.state.name,
             'description': this.state.description,
             'public': this.state.public,
-            'teams': this.createTeamArray(this.state.teams)
+            'group_stage': this.state.groupPhaseEnabled,
+            'teams': createTeamArray(this.state.groupPhaseEnabled, this.state.groups, this.state.teams)
         }, () => {
             notify.show('Das Turnier wurde erfolgreich erstellt.', 'success', 5000);
         }, () => {
@@ -225,13 +226,41 @@ class CreateTournamentForm extends React.Component {
         });
     }
 
-    createTeamArray(teamnames) {
-        var result = [];
-
-        for(var i = 0; i < teamnames.length; i++) {
-            result[i] = { 'name': teamnames[i] };
-        }
-
-        return result;
-    }
+}
+
+/**
+ * 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) {
+    let 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;
 }

pages/register.js

@@ -20,10 +20,10 @@ import {
     clearErrors
 }  from '../js/api';
 
+import '../static/css/errormessages.css';
 import '../static/everypage.css';
 
 export default class RegisterPage extends React.Component {
-
     render() {
         return (
             <div className="main generic-fullpage-bg">
@@ -42,7 +42,6 @@ export default class RegisterPage extends React.Component {
 }
 
 class Register extends React.Component {
-
     componentDidMount() {
         clearErrors();
     }
@@ -69,17 +68,9 @@ class RegisterErrorList extends React.Component {
         const { error, errorMessages } = this.props;
         if(error) {
             return (
-                <ul>
+                <ul className="mt-3 error-box">
                     { errorMessages.map((message, index) => 
-                        <li key={index}>
-                            <style jsx>{`
-                                li {
-                                    color:red;
-                                }
-                            `}</style>
-                            {message}
-                        </li>
-
+                        <li key={index}>{message}</li>
                     ) }
                 </ul>
             );
@@ -99,7 +90,6 @@ const VisibleRegisterErrorList = connect(
 )(RegisterErrorList);
 
 class RegisterForm extends React.Component {
-
     constructor(props) {
         super(props);
 

pages/tournament-edit.js

@@ -279,7 +279,7 @@ class EditTeamNamesForm extends React.Component {
     }
 
     handleNameInput(index, input) {
-        var team = this.state.teams.slice();
+        let team = this.state.teams.slice();
 
         team[index].name = input.target.value;
 

pages/tournament.js

@@ -56,7 +56,7 @@ class PrivateTournamentPage extends React.Component {
                 </Container>
                 <div className='stages pt-5'>
                     {playoffStages.map(stage =>
-                        <Stage isSignedIn={isSignedIn} isOwner={username == ownerUsername} level={getLevelName(stage.level)} matches={stage.matches} key={stage.level}/>)}
+                        <Stage isSignedIn={isSignedIn} isOwner={username === ownerUsername} level={getLevelName(stage.level)} matches={stage.matches} key={stage.level}/>)}
                 </div>
             </div>
         );
@@ -363,17 +363,17 @@ function convertGroup(apiGroup) {
 }
 
 function convertMatch(apiMatch) {
-    var result = {
+    let result = {
         id: apiMatch.id,
         state: apiMatch.state
     };
 
-    if(apiMatch.match_scores.length == 2) {
+    if(apiMatch.match_scores.length === 2) {
         result.team1 = apiMatch.match_scores[0].team.name;
         result.scoreTeam1 = apiMatch.match_scores[0].points;
         result.team2 = apiMatch.match_scores[1].team.name;
         result.scoreTeam2 = apiMatch.match_scores[1].points;
-    } else if(apiMatch.match_scores.length == 1) {
+    } else if(apiMatch.match_scores.length === 1) {
         result.team1 = apiMatch.match_scores[0].team.name;
         result.scoreTeam1 = apiMatch.match_scores[0].points;
         result.team2 = 'TBD';
@@ -424,7 +424,7 @@ class Main extends React.Component {
 
         const { status, tournament } = this.state;
 
-        if (status == 200) {
+        if (status === 200) {
             return (
                 <div>
                     <Head>

static/css/errormessages.css

@@ -0,0 +1,12 @@
+
+.error-box {
+    border: 2px solid #dc3545;
+    border-radius: 4px;
+    padding: 8px 16px;
+}
+
+.error-box > li {
+    color: #dc3545;
+    margin-right: 36px;
+    list-style-type: none;
+}