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

Automatically apply eslint rules

This commit is contained in:
Felix Hamme 2019-05-08 18:26:54 +02:00 committed by Felix Hamme
parent f93f9a57ce
commit b40c0382a8
24 changed files with 439 additions and 458 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

286
js/api.js
View File

@ -3,74 +3,74 @@ import {
applyMiddleware, applyMiddleware,
combineReducers combineReducers
} from 'redux'; } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension'; import {composeWithDevTools} from 'redux-devtools-extension';
import thunkMiddleware from 'redux-thunk'; import thunkMiddleware from 'redux-thunk';
import { errorMessages } from './constants'; import {errorMessages} from './constants';
import getConfig from 'next/config'; import getConfig from 'next/config';
const { publicRuntimeConfig } = getConfig(); const {publicRuntimeConfig} = getConfig();
const api_url = publicRuntimeConfig.api_url; const api_url = publicRuntimeConfig.api_url;
const axios = require('axios'); const axios = require('axios');
const actiontypes_userinfo = { const actiontypes_userinfo = {
'REGISTER' : 'REGISTER', 'REGISTER': 'REGISTER',
'REGISTER_RESULT_SUCCESS' : 'REGISTER_RESULT_SUCCESS', 'REGISTER_RESULT_SUCCESS': 'REGISTER_RESULT_SUCCESS',
'REGISTER_RESULT_ERROR' : 'REGISTER_RESULT_ERROR', 'REGISTER_RESULT_ERROR': 'REGISTER_RESULT_ERROR',
'LOGIN' : 'LOGIN', 'LOGIN': 'LOGIN',
'LOGIN_RESULT_SUCCESS' : 'LOGIN_RESULT_SUCCESS', 'LOGIN_RESULT_SUCCESS': 'LOGIN_RESULT_SUCCESS',
'LOGIN_RESULT_ERROR' : 'LOGIN_RESULT_ERROR', 'LOGIN_RESULT_ERROR': 'LOGIN_RESULT_ERROR',
'LOGOUT' : 'LOGOUT', 'LOGOUT': 'LOGOUT',
'VERIFY_CREDENTIALS' : 'VERIFY_CREDENTIALS', 'VERIFY_CREDENTIALS': 'VERIFY_CREDENTIALS',
'VERIFY_CREDENTIALS_SUCCESS' : 'VERIFY_CREDENTIALS_SUCCESS', 'VERIFY_CREDENTIALS_SUCCESS': 'VERIFY_CREDENTIALS_SUCCESS',
'VERIFY_CREDENTIALS_ERROR' : 'VERIFY_CREDENTIALS_ERROR', 'VERIFY_CREDENTIALS_ERROR': 'VERIFY_CREDENTIALS_ERROR',
'STORE_AUTH_HEADERS' : 'STORE_AUTH_HEADERS', 'STORE_AUTH_HEADERS': 'STORE_AUTH_HEADERS',
'REHYDRATE' : 'USERINFO_REHYDRATE', 'REHYDRATE': 'USERINFO_REHYDRATE',
'CLEAR' : 'USERINFO_CLEAR' 'CLEAR': 'USERINFO_CLEAR'
}; };
const defaultstate_userinfo = { const defaultstate_userinfo = {
isSignedIn : false, isSignedIn: false,
username : null, username: null,
error : false, error: false,
errorMessages : [], errorMessages: [],
accesstoken : null, accesstoken: null,
client : null, client: null,
expiry : null, expiry: null,
uid : null uid: null
}; };
const actiontypes_tournamentinfo = { const actiontypes_tournamentinfo = {
'REQUEST_TOURNAMENT' : 'REQUEST_TOURNAMENT', 'REQUEST_TOURNAMENT': 'REQUEST_TOURNAMENT',
'REQUEST_TOURNAMENT_SUCCESS' : 'REQUEST_TOURNAMENT_SUCCESS', 'REQUEST_TOURNAMENT_SUCCESS': 'REQUEST_TOURNAMENT_SUCCESS',
'CREATE_TOURNAMENT' : 'CREATE_TOURNAMENT', 'CREATE_TOURNAMENT': 'CREATE_TOURNAMENT',
'MODIFY_TOURNAMENT' : 'MODIFY_TOURNAMENT', 'MODIFY_TOURNAMENT': 'MODIFY_TOURNAMENT',
'MODIFY_TOURNAMENT_SUCCESS' : 'MODIFY_TOURNAMENT_SUCCESS', 'MODIFY_TOURNAMENT_SUCCESS': 'MODIFY_TOURNAMENT_SUCCESS',
'MODIFY_TOURNAMENT_ERROR' : 'MODIFY_TOURNAMENT_ERROR', 'MODIFY_TOURNAMENT_ERROR': 'MODIFY_TOURNAMENT_ERROR',
'REHYDRATE' : 'TOURNAMENTINFO_REHYDRATE', 'REHYDRATE': 'TOURNAMENTINFO_REHYDRATE',
'CLEAR' : 'TOURNAMENTINFO_CLEAR', 'CLEAR': 'TOURNAMENTINFO_CLEAR'
}; };
const defaultstate_tournamentinfo = { const defaultstate_tournamentinfo = {
code : '', code: '',
description : '', description: '',
id : -1, id: -1,
name : '', name: '',
ownerUsername : '', ownerUsername: '',
isPublic : '', isPublic: '',
stages: [], stages: [],
teams : [] teams: []
}; };
const actiontypes_tournamentlist = { const actiontypes_tournamentlist = {
@ -85,34 +85,34 @@ const defaultstate_tournamentlist = {
export function postRequest(state, url, data) { export function postRequest(state, url, data) {
return axios.post(api_url + url, data, { return axios.post(api_url + url, data, {
headers : generateHeaders(state) headers: generateHeaders(state)
}); });
} }
export function getRequest(state, url) { export function getRequest(state, url) {
return axios.get(api_url + url, { return axios.get(api_url + url, {
headers : generateHeaders(state) headers: generateHeaders(state)
}); });
} }
export function deleteRequest(state, url) { export function deleteRequest(state, url) {
return axios.delete(api_url + url, { return axios.delete(api_url + url, {
headers : generateHeaders(state) headers: generateHeaders(state)
}); });
} }
export function patchRequest(state, url, data) { export function patchRequest(state, url, data) {
return axios.patch(api_url + url, data, { return axios.patch(api_url + url, data, {
headers : generateHeaders(state) headers: generateHeaders(state)
}); });
} }
function generateHeaders(state) { function generateHeaders(state) {
if(state.userinfo.isSignedIn) { if (state.userinfo.isSignedIn) {
return { return {
'access-token' : state.userinfo.accesstoken, 'access-token': state.userinfo.accesstoken,
'client' : state.userinfo.client, 'client': state.userinfo.client,
'uid' : state.userinfo.uid 'uid': state.userinfo.uid
}; };
} else { } else {
return {}; return {};
@ -120,26 +120,26 @@ function generateHeaders(state) {
} }
function storeOptionalToken(response) { function storeOptionalToken(response) {
if(checkForAuthenticationHeaders(response)) { if (checkForAuthenticationHeaders(response)) {
__store.dispatch({ __store.dispatch({
type : actiontypes_userinfo.STORE_AUTH_HEADERS, type: actiontypes_userinfo.STORE_AUTH_HEADERS,
parameters : { parameters: {
accesstoken : response.headers['access-token'], accesstoken: response.headers['access-token'],
client : response.headers['client'], client: response.headers['client'],
expiry : response.headers['expiry'], expiry: response.headers['expiry'],
uid : response.headers['uid'] uid: response.headers['uid']
} }
}); });
} }
} }
function checkForAuthenticationHeaders(response) { function checkForAuthenticationHeaders(response) {
if(response.headers) { if (response.headers) {
const requiredHeaders = [ const requiredHeaders = [
'access-token', 'client', 'uid', 'expiry' 'access-token', 'client', 'uid', 'expiry'
]; ];
for(var i = 0; i < requiredHeaders.length; i++) { for (let i = 0; i < requiredHeaders.length; i++) {
if(!response.headers[requiredHeaders[i]]) { if (!response.headers[requiredHeaders[i]]) {
return false; return false;
} }
} }
@ -149,31 +149,31 @@ function checkForAuthenticationHeaders(response) {
} }
const reducer_userinfo = (state = defaultstate_userinfo, action) => { const reducer_userinfo = (state = defaultstate_userinfo, action) => {
switch(action.type) { switch (action.type) {
case actiontypes_userinfo.REGISTER: case actiontypes_userinfo.REGISTER:
postRequest(action.state, '/users', { postRequest(action.state, '/users', {
'username' : action.parameters.username, 'username': action.parameters.username,
'email' : action.parameters.email, 'email': action.parameters.email,
'password' : action.parameters.password 'password': action.parameters.password
}).then((resp) => { }).then(resp => {
__store.dispatch({ __store.dispatch({
type : actiontypes_userinfo.REGISTER_RESULT_SUCCESS type: actiontypes_userinfo.REGISTER_RESULT_SUCCESS
}); });
storeOptionalToken(resp); storeOptionalToken(resp);
}).catch((error) => { }).catch(error => {
if (error.response) { if (error.response) {
__store.dispatch({ __store.dispatch({
'type' : actiontypes_userinfo.REGISTER_RESULT_ERROR, 'type': actiontypes_userinfo.REGISTER_RESULT_ERROR,
'parameters' : { 'parameters': {
'errorMessages' : error.response.data.errors.full_messages 'errorMessages': error.response.data.errors.full_messages
} }
}); });
storeOptionalToken(error.response); storeOptionalToken(error.response);
} else { } else {
__store.dispatch({ __store.dispatch({
'type' : actiontypes_userinfo.REGISTER_RESULT_ERROR, 'type': actiontypes_userinfo.REGISTER_RESULT_ERROR,
'parameters' : { 'parameters': {
'errorMessages' : [ 'errorMessages': [
errorMessages['registration_errorunknown']['en'] errorMessages['registration_errorunknown']['en']
] ]
} }
@ -183,41 +183,41 @@ const reducer_userinfo = (state = defaultstate_userinfo, action) => {
return Object.assign({}, state, {}); return Object.assign({}, state, {});
case actiontypes_userinfo.REGISTER_RESULT_SUCCESS: case actiontypes_userinfo.REGISTER_RESULT_SUCCESS:
return Object.assign({}, state, { return Object.assign({}, state, {
error : false, error: false,
errorMessages : [] errorMessages: []
}); });
case actiontypes_userinfo.REGISTER_RESULT_ERROR: case actiontypes_userinfo.REGISTER_RESULT_ERROR:
return Object.assign({}, state, { return Object.assign({}, state, {
error : true, error: true,
errorMessages : action.parameters.errorMessages errorMessages: action.parameters.errorMessages
}); });
case actiontypes_userinfo.LOGIN: case actiontypes_userinfo.LOGIN:
postRequest(action.state, '/users/sign_in', { postRequest(action.state, '/users/sign_in', {
email : action.parameters.email, email: action.parameters.email,
password : action.parameters.password password: action.parameters.password
}).then((resp) => { }).then(resp => {
__store.dispatch({ __store.dispatch({
type : actiontypes_userinfo.LOGIN_RESULT_SUCCESS, type: actiontypes_userinfo.LOGIN_RESULT_SUCCESS,
parameters : { parameters: {
username : resp.data.username, username: resp.data.username,
successCallback: action.parameters.successCallback successCallback: action.parameters.successCallback
} }
}); });
storeOptionalToken(resp); storeOptionalToken(resp);
}).catch((error) => { }).catch(error => {
if(error.response) { if (error.response) {
__store.dispatch({ __store.dispatch({
'type' : actiontypes_userinfo.LOGIN_RESULT_ERROR, 'type': actiontypes_userinfo.LOGIN_RESULT_ERROR,
'parameters' : { 'parameters': {
'errorMessages' : error.response.data.errors 'errorMessages': error.response.data.errors
} }
}); });
storeOptionalToken(error.response); storeOptionalToken(error.response);
} else { } else {
__store.dispatch({ __store.dispatch({
'type' : actiontypes_userinfo.LOGIN_RESULT_ERROR, 'type': actiontypes_userinfo.LOGIN_RESULT_ERROR,
'parameters' : { 'parameters': {
'errorMessages' : [ errorMessages['login_errorunknown']['en'] ] 'errorMessages': [errorMessages['login_errorunknown']['en']]
} }
}); });
} }
@ -226,60 +226,60 @@ const reducer_userinfo = (state = defaultstate_userinfo, action) => {
case actiontypes_userinfo.LOGIN_RESULT_SUCCESS: case actiontypes_userinfo.LOGIN_RESULT_SUCCESS:
action.parameters.successCallback(action.parameters.username); action.parameters.successCallback(action.parameters.username);
return Object.assign({}, state, { return Object.assign({}, state, {
isSignedIn : true, isSignedIn: true,
error : false, error: false,
errorMessages : [], errorMessages: [],
username : action.parameters.username, username: action.parameters.username
}); });
case actiontypes_userinfo.LOGIN_RESULT_ERROR: case actiontypes_userinfo.LOGIN_RESULT_ERROR:
return Object.assign({}, state, { return Object.assign({}, state, {
error : true, error: true,
errorMessages : action.parameters.errorMessages errorMessages: action.parameters.errorMessages
}); });
case actiontypes_userinfo.LOGOUT: case actiontypes_userinfo.LOGOUT:
deleteRequest(action.state, '/users/sign_out').then(() => { deleteRequest(action.state, '/users/sign_out').then(() => {
action.parameters.successCallback(); action.parameters.successCallback();
__store.dispatch({ type : actiontypes_userinfo.CLEAR }); __store.dispatch({type: actiontypes_userinfo.CLEAR});
}).catch(() => { }).catch(() => {
__store.dispatch({ type : actiontypes_userinfo.CLEAR }); __store.dispatch({type: actiontypes_userinfo.CLEAR});
}); });
return Object.assign({}, state, {}); return Object.assign({}, state, {});
case actiontypes_userinfo.STORE_AUTH_HEADERS: case actiontypes_userinfo.STORE_AUTH_HEADERS:
return Object.assign({}, state, { return Object.assign({}, state, {
accesstoken : action.parameters.accesstoken, accesstoken: action.parameters.accesstoken,
client : action.parameters.client, client: action.parameters.client,
expiry : action.parameters.expiry, expiry: action.parameters.expiry,
uid : action.parameters.uid uid: action.parameters.uid
}); });
case actiontypes_userinfo.VERIFY_CREDENTIALS: case actiontypes_userinfo.VERIFY_CREDENTIALS:
getRequest(action.state, '/users/validate_token').then((resp) => { getRequest(action.state, '/users/validate_token').then(resp => {
storeOptionalToken(resp); storeOptionalToken(resp);
}).catch(() => { }).catch(() => {
__store.dispatch({ type: actiontypes_userinfo.CLEAR }); __store.dispatch({type: actiontypes_userinfo.CLEAR});
}); });
return Object.assign({}, state, {}); return Object.assign({}, state, {});
case actiontypes_userinfo.REHYDRATE: case actiontypes_userinfo.REHYDRATE:
return Object.assign({}, state, action.parameters, { error: false, errorMessages: [] }); return Object.assign({}, state, action.parameters, {error: false, errorMessages: []});
case actiontypes_userinfo.CLEAR: case actiontypes_userinfo.CLEAR:
return Object.assign({}, state, { return Object.assign({}, state, {
isSignedIn : false, isSignedIn: false,
username : null, username: null,
error : false, error: false,
errorMessages : [], errorMessages: [],
accesstoken : null, accesstoken: null,
client : null, client: null,
expiry : null, expiry: null,
uid : null uid: null
}); });
default: return state; default: return state;
} }
}; };
const reducer_tournamentinfo = (state = defaultstate_tournamentinfo, action) => { const reducer_tournamentinfo = (state = defaultstate_tournamentinfo, action) => {
switch(action.type) { switch (action.type) {
case actiontypes_tournamentinfo.CREATE_TOURNAMENT: case actiontypes_tournamentinfo.CREATE_TOURNAMENT:
postRequest(action.state, '/tournaments', action.parameters.tournament).then((resp) => { postRequest(action.state, '/tournaments', action.parameters.tournament).then(resp => {
storeOptionalToken(resp); storeOptionalToken(resp);
action.parameters.successCallback(); action.parameters.successCallback();
}).catch(() => { }).catch(() => {
@ -287,7 +287,7 @@ const reducer_tournamentinfo = (state = defaultstate_tournamentinfo, action) =>
}); });
return Object.assign({}, state, {}); return Object.assign({}, state, {});
case actiontypes_tournamentinfo.REQUEST_TOURNAMENT: case actiontypes_tournamentinfo.REQUEST_TOURNAMENT:
getRequest(action.state, '/tournaments/' + action.parameters.code).then((resp) => { getRequest(action.state, '/tournaments/' + action.parameters.code).then(resp => {
__store.dispatch({ __store.dispatch({
type: actiontypes_tournamentinfo.REQUEST_TOURNAMENT_SUCCESS, type: actiontypes_tournamentinfo.REQUEST_TOURNAMENT_SUCCESS,
parameters: resp.data parameters: resp.data
@ -300,23 +300,23 @@ const reducer_tournamentinfo = (state = defaultstate_tournamentinfo, action) =>
return Object.assign({}, state, {}); return Object.assign({}, state, {});
case actiontypes_tournamentinfo.REQUEST_TOURNAMENT_SUCCESS: case actiontypes_tournamentinfo.REQUEST_TOURNAMENT_SUCCESS:
return Object.assign({}, state, { return Object.assign({}, state, {
code : action.parameters.code, code: action.parameters.code,
description : action.parameters.description, description: action.parameters.description,
id : action.parameters.id, id: action.parameters.id,
name : action.parameters.name, name: action.parameters.name,
ownerUsername : action.parameters.owner_username, ownerUsername: action.parameters.owner_username,
isPublic : action.parameters.public, isPublic: action.parameters.public,
stages: action.parameters.stages, stages: action.parameters.stages,
teams : action.parameters.teams teams: action.parameters.teams
}); });
case actiontypes_tournamentinfo.MODIFY_TOURNAMENT: case actiontypes_tournamentinfo.MODIFY_TOURNAMENT:
patchRequest(action.state, '/teams/' + action.parameters.teamid, { patchRequest(action.state, '/teams/' + action.parameters.teamid, {
name: action.parameters.name name: action.parameters.name
}).then((resp) => { }).then(resp => {
storeOptionalToken(resp); storeOptionalToken(resp);
action.parameters.onSuccess(); action.parameters.onSuccess();
}).catch((error) => { }).catch(error => {
if(error.response) { if (error.response) {
storeOptionalToken(error.response); storeOptionalToken(error.response);
} }
action.parameters.onError(); action.parameters.onError();
@ -341,15 +341,15 @@ const reducer_tournamentinfo = (state = defaultstate_tournamentinfo, action) =>
const reducer_tournamentlist = (state = defaultstate_tournamentlist, action) => { const reducer_tournamentlist = (state = defaultstate_tournamentlist, action) => {
switch (action.type) { switch (action.type) {
case actiontypes_tournamentlist.FETCH: case actiontypes_tournamentlist.FETCH:
getRequest(action.state, '/tournaments?type=' + action.parameters.type).then((resp) => { getRequest(action.state, '/tournaments?type=' + action.parameters.type).then(resp => {
__store.dispatch({ __store.dispatch({
type: actiontypes_tournamentlist.FETCH_SUCCESS, type: actiontypes_tournamentlist.FETCH_SUCCESS,
parameters: resp.data parameters: resp.data
}); });
storeOptionalToken(resp); storeOptionalToken(resp);
action.parameters.successCallback(resp.data); action.parameters.successCallback(resp.data);
}).catch((error) => { }).catch(error => {
if(error.response) { if (error.response) {
storeOptionalToken(error.response); storeOptionalToken(error.response);
} }
action.parameters.errorCallback(); action.parameters.errorCallback();
@ -369,13 +369,13 @@ const reducers = {
}; };
const default_applicationstate = { const default_applicationstate = {
userinfo : defaultstate_userinfo, userinfo: defaultstate_userinfo,
tournamentinfo: defaultstate_tournamentinfo, tournamentinfo: defaultstate_tournamentinfo,
tournamentlist: defaultstate_tournamentlist tournamentlist: defaultstate_tournamentlist
}; };
var __store; let __store;
var applicationHydrated = false; let applicationHydrated = false;
export function initializeStore(initialState = default_applicationstate) { export function initializeStore(initialState = default_applicationstate) {
__store = createStore( __store = createStore(
@ -384,7 +384,7 @@ export function initializeStore(initialState = default_applicationstate) {
composeWithDevTools(applyMiddleware(thunkMiddleware)) composeWithDevTools(applyMiddleware(thunkMiddleware))
); );
__store.subscribe(() => { __store.subscribe(() => {
if(applicationHydrated) { if (applicationHydrated) {
localStorage.setItem('reduxState', JSON.stringify(__store.getState())); localStorage.setItem('reduxState', JSON.stringify(__store.getState()));
} }
}); });
@ -394,7 +394,7 @@ export function initializeStore(initialState = default_applicationstate) {
export function verifyCredentials() { export function verifyCredentials() {
rehydrateApplicationState(); rehydrateApplicationState();
if(__store.getState().userinfo.isSignedIn) { if (__store.getState().userinfo.isSignedIn) {
__store.dispatch({ __store.dispatch({
type: actiontypes_userinfo.VERIFY_CREDENTIALS, type: actiontypes_userinfo.VERIFY_CREDENTIALS,
state: __store.getState() state: __store.getState()
@ -428,7 +428,7 @@ export function login(email, password, successCallback) {
export function logout(successCallback) { export function logout(successCallback) {
__store.dispatch({ __store.dispatch({
type : actiontypes_userinfo.LOGOUT, type: actiontypes_userinfo.LOGOUT,
parameters: { parameters: {
successCallback: successCallback successCallback: successCallback
}, },
@ -466,8 +466,8 @@ export function updateTeamName(team, successCB, errorCB) {
parameters: { parameters: {
teamid: team.id, teamid: team.id,
name: team.name, name: team.name,
onSuccess : successCB, onSuccess: successCB,
onError : errorCB onError: errorCB
}, },
state: __store.getState() state: __store.getState()
}); });
@ -494,18 +494,18 @@ function rehydrateApplicationState() {
JSON.parse(localStorage.getItem('reduxState')) : JSON.parse(localStorage.getItem('reduxState')) :
undefined; undefined;
if(persistedState) { if (persistedState) {
__store.dispatch({ __store.dispatch({
type : actiontypes_userinfo.REHYDRATE, type: actiontypes_userinfo.REHYDRATE,
parameters : Object.assign({}, persistedState.userinfo) parameters: Object.assign({}, persistedState.userinfo)
}); });
__store.dispatch({ __store.dispatch({
type : actiontypes_tournamentinfo.REHYDRATE, type: actiontypes_tournamentinfo.REHYDRATE,
parameters : Object.assign({}, persistedState.tournamentinfo) parameters: Object.assign({}, persistedState.tournamentinfo)
}); });
__store.dispatch({ __store.dispatch({
type : actiontypes_tournamentlist.REHYDRATE, type: actiontypes_tournamentlist.REHYDRATE,
parameters : Object.assign({}, persistedState.tournamentlist) parameters: Object.assign({}, persistedState.tournamentlist)
}); });
applicationHydrated = true; applicationHydrated = true;
} }

72
js/components/EditableStringList.js
View File

@ -1,19 +1,18 @@
import React from 'react'; import React from 'react';
import { import {
Alert, Alert,
Button, Button,
Card, Card,
CardBody, CardBody,
CardTitle, CardTitle,
Input, Input,
InputGroup, InputGroup,
InputGroupAddon InputGroupAddon
} from 'reactstrap'; } from 'reactstrap';
import '../../static/css/editablestringlist.css'; import '../../static/css/editablestringlist.css';
export default class EditableStringList extends React.Component { export default class EditableStringList extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
@ -31,9 +30,9 @@ export default class EditableStringList extends React.Component {
return false; return false;
} }
this.state.teams.push(text); this.state.teams.push(text);
var lastGroup = this.state.groups[this.state.groups.length - 1]; let lastGroup = this.state.groups[this.state.groups.length - 1];
if(lastGroup === undefined || lastGroup.length >= this.state.groupSize) { if (lastGroup === undefined || lastGroup.length >= this.state.groupSize) {
this.state.groups[this.state.groups.length] = []; this.state.groups[this.state.groups.length] = [];
} }
lastGroup = this.state.groups[this.state.groups.length - 1]; lastGroup = this.state.groups[this.state.groups.length - 1];
@ -51,7 +50,7 @@ export default class EditableStringList extends React.Component {
} }
remove(text) { remove(text) {
if(this.removeTeamFromGroup(text) === false) { if (this.removeTeamFromGroup(text) === false) {
return false; return false;
} }
@ -67,20 +66,20 @@ export default class EditableStringList extends React.Component {
removeTeamFromGroup(text) { removeTeamFromGroup(text) {
this.state.teams = this.state.teams.filter(item => item !== text); this.state.teams = this.state.teams.filter(item => item !== text);
let teamIndex = this.findTeam(text); const teamIndex = this.findTeam(text);
if(teamIndex === null) { if (teamIndex === null) {
return false; return false;
} }
// Move every first team to the next group // Move every first team to the next group
this.state.groups[teamIndex.group].splice(teamIndex.team, 1); this.state.groups[teamIndex.group].splice(teamIndex.team, 1);
for(var group = teamIndex.group; group < this.state.groups.length - 1; group++) { for (let group = teamIndex.group; group < this.state.groups.length - 1; group++) {
let currentGroup = this.state.groups[group]; const currentGroup = this.state.groups[group];
currentGroup[currentGroup.length] = this.state.groups[group + 1].splice(0, 1)[0]; currentGroup[currentGroup.length] = this.state.groups[group + 1].splice(0, 1)[0];
} }
// delete the last group in case it is empty // delete the last group in case it is empty
if(this.state.groups[this.state.groups.length - 1].length === 0) { if (this.state.groups[this.state.groups.length - 1].length === 0) {
this.state.groups.splice(this.state.groups.length - 1, 1); this.state.groups.splice(this.state.groups.length - 1, 1);
} }
@ -88,9 +87,9 @@ export default class EditableStringList extends React.Component {
} }
findTeam(text) { findTeam(text) {
for(var group = 0; group < this.state.groups.length; group++) { for (let group = 0; group < this.state.groups.length; group++) {
for(var team = 0; team < this.state.groups[group].length; team++) { for (let team = 0; team < this.state.groups[group].length; team++) {
if(this.state.groups[group][team] === text) { if (this.state.groups[group][team] === text) {
return { return {
group: group, group: group,
team: team team: team
@ -102,17 +101,17 @@ export default class EditableStringList extends React.Component {
} }
resizeGroups(newSize) { resizeGroups(newSize) {
let oldGroups = this.state.groups; const oldGroups = this.state.groups;
var rearrangedGroups = []; const rearrangedGroups = [];
for(var oldGroupIndex = 0; oldGroupIndex < oldGroups.length; oldGroupIndex++) { for (let oldGroupIndex = 0; oldGroupIndex < oldGroups.length; oldGroupIndex++) {
for(var oldTeamIndex = 0; oldTeamIndex < oldGroups[oldGroupIndex].length; oldTeamIndex++) { for (let oldTeamIndex = 0; oldTeamIndex < oldGroups[oldGroupIndex].length; oldTeamIndex++) {
let index = oldGroupIndex * this.state.groupSize + oldTeamIndex; const index = oldGroupIndex * this.state.groupSize + oldTeamIndex;
let newGroupIndex = Math.floor(index / newSize); const newGroupIndex = Math.floor(index / newSize);
let newTeamIndex = index % newSize; const newTeamIndex = index % newSize;
if(newTeamIndex === 0) { if (newTeamIndex === 0) {
rearrangedGroups[newGroupIndex] = []; rearrangedGroups[newGroupIndex] = [];
} }
@ -143,11 +142,11 @@ export default class EditableStringList extends React.Component {
} }
render() { render() {
if(this.props.groupSize !== this.state.groupSize) { if (this.props.groupSize !== this.state.groupSize) {
this.resizeGroups(this.props.groupSize); this.resizeGroups(this.props.groupSize);
} }
if(this.props.groupPhaseEnabled) { if (this.props.groupPhaseEnabled) {
if ((typeof this.state.teams !== 'undefined') && this.state.teams.length > 0) { if ((typeof this.state.teams !== 'undefined') && this.state.teams.length > 0) {
return ( return (
<div className="bg-light p-3 text-secondary font-italic"> <div className="bg-light p-3 text-secondary font-italic">
@ -168,7 +167,7 @@ export default class EditableStringList extends React.Component {
return ( return (
<div className="bg-light p-3 text-secondary font-italic"> <div className="bg-light p-3 text-secondary font-italic">
<StringInput submit={this.add} placeholder={this.props.inputPlaceholder} addButtonText={this.props.addButtonText}/> <StringInput submit={this.add} placeholder={this.props.inputPlaceholder} addButtonText={this.props.addButtonText}/>
{this.state.teams.map((text) => <Item text={text} key={text} removeItem={this.remove}/>)} {this.state.teams.map(text => <Item text={text} key={text} removeItem={this.remove}/>)}
</div> </div>
); );
} else { } else {
@ -184,7 +183,6 @@ export default class EditableStringList extends React.Component {
} }
class GroupView extends React.Component { class GroupView extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
} }
@ -199,9 +197,9 @@ class GroupView extends React.Component {
{group.map((team, teamindex) => ( {group.map((team, teamindex) => (
<div key={team} draggable droppable="droppable" <div key={team} draggable droppable="droppable"
className="grouped-team-item" className="grouped-team-item"
onDragStart={(e) => this.onDragStart(e, groupindex,teamindex)} onDragStart={e => this.onDragStart(e, groupindex, teamindex)}
onDragOver={(e) => this.onDragOver(e)} onDragOver={e => this.onDragOver(e)}
onDrop={(e) => this.onDrop(e, groupindex, teamindex)}> onDrop={e => this.onDrop(e, groupindex, teamindex)}>
<Item text={team} removeItem={this.props.removeTeam}/> <Item text={team} removeItem={this.props.removeTeam}/>
@ -231,8 +229,8 @@ class GroupView extends React.Component {
onDrop(e, group, team) { onDrop(e, group, team) {
e.preventDefault(); e.preventDefault();
let src = JSON.parse(e.dataTransfer.getData('text')); const src = JSON.parse(e.dataTransfer.getData('text'));
let dest = { const dest = {
group: group, group: group,
team: team team: team
}; };
@ -256,7 +254,7 @@ class StringInput extends React.Component {
render() { render() {
return ( return (
<InputGroup className="mb-3"> <InputGroup className="mb-3">
<Input placeholder={this.props.placeholder} type="text" size="255" value={this.state.value} required onChange={this.handleChange} onKeyPress={(e) => { <Input placeholder={this.props.placeholder} type="text" size="255" value={this.state.value} required onChange={this.handleChange} onKeyPress={e => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
this.submit(); this.submit();
return false; return false;
@ -298,4 +296,4 @@ class Item extends React.Component {
</Alert> </Alert>
); );
} }
} }

17
js/components/ErrorComponents.js
View File

@ -1,9 +1,9 @@
import Head from 'next/head'; import Head from 'next/head';
import React from 'react'; import React from 'react';
import { Container } from 'reactstrap'; import {Container} from 'reactstrap';
import { TurniereNavigation } from './Navigation'; import {TurniereNavigation} from './Navigation';
import { Footer } from './Footer'; import {Footer} from './Footer';
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
@ -11,9 +11,8 @@ import '../../static/everypage.css';
import '../../static/css/error.css'; import '../../static/css/error.css';
export class ErrorPageComponent extends React.Component { export class ErrorPageComponent extends React.Component {
static getInitialProps({statusCode}) {
static getInitialProps({ statusCode }) { return {statusCode};
return { statusCode };
} }
render() { render() {
@ -30,7 +29,7 @@ export class ErrorPageComponent extends React.Component {
} }
} }
export function ErrorPage(props){ export function ErrorPage(props) {
return ( return (
<Container className="mb-5"> <Container className="mb-5">
<div className="row mb-5"> <div className="row mb-5">

29
js/components/Login.js
View File

@ -3,7 +3,7 @@ import React from 'react';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import Router from 'next/router'; import Router from 'next/router';
import { login } from '../api'; import {login} from '../api';
import '../../static/css/errormessages.css'; import '../../static/css/errormessages.css';
import {notify} from 'react-notify-toast'; import {notify} from 'react-notify-toast';
@ -28,11 +28,11 @@ export function Login(props) {
class LoginErrorList extends React.Component { class LoginErrorList extends React.Component {
render() { render() {
const { error, errorMessages } = this.props; const {error, errorMessages} = this.props;
if(error) { if (error) {
return ( return (
<ul className='mt-3 error-box'> <ul className='mt-3 error-box'>
{ errorMessages.map((message, index) => { errorMessages.map((message, index) =>
<li key={index}> <li key={index}>
{message} {message}
</li> </li>
@ -46,9 +46,9 @@ class LoginErrorList extends React.Component {
} }
} }
const mapStateToErrorMessages = (state) => { const mapStateToErrorMessages = state => {
const { errorMessages, error } = state.userinfo; const {errorMessages, error} = state.userinfo;
return { errorMessages, error }; return {errorMessages, error};
}; };
const VisibleLoginErrorList = connect( const VisibleLoginErrorList = connect(
@ -64,7 +64,7 @@ class LoginSuccessRedirectComponent extends React.Component {
} }
} }
const mapLoginState = (state) => { const mapLoginState = state => {
const {isSignedIn} = state.userinfo; const {isSignedIn} = state.userinfo;
return {isSignedIn}; return {isSignedIn};
}; };
@ -72,19 +72,18 @@ const mapLoginState = (state) => {
const LoginSuccessRedirect = connect(mapLoginState)(LoginSuccessRedirectComponent); const LoginSuccessRedirect = connect(mapLoginState)(LoginSuccessRedirectComponent);
class LoginForm extends React.Component { class LoginForm extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
email : '', email: '',
password : '' password: ''
}; };
} }
tryLogin(event) { tryLogin(event) {
event.preventDefault(); event.preventDefault();
login(this.state.email, this.state.password, (username) => notify.show('Willkommen, ' + username + '!', 'success', 2500)); login(this.state.email, this.state.password, username => notify.show('Willkommen, ' + username + '!', 'success', 2500));
} }
render() { render() {
@ -106,16 +105,16 @@ class LoginForm extends React.Component {
} }
handlePasswordInput(input) { handlePasswordInput(input) {
this.setState({ password : input.target.value }); this.setState({password: input.target.value});
} }
handleEmailInput(input) { handleEmailInput(input) {
this.setState({ email : input.target.value }); this.setState({email: input.target.value});
} }
} }
function Hint(props) { function Hint(props) {
if(props.hint != null) { if (props.hint != null) {
return ( return (
<h3>{ props.hint }</h3> <h3>{ props.hint }</h3>
); );

25
js/components/Navigation.js
View File

@ -10,14 +10,13 @@ import {
NavItem, NavItem,
NavLink NavLink
} from 'reactstrap'; } from 'reactstrap';
import { connect } from 'react-redux'; import {connect} from 'react-redux';
import React from 'react'; import React from 'react';
import { logout } from '../api'; import {logout} from '../api';
import {notify} from 'react-notify-toast'; import {notify} from 'react-notify-toast';
export class TurniereNavigation extends React.Component { export class TurniereNavigation extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -58,7 +57,6 @@ function Navlink(props) {
} }
class SmartNavLinks extends React.Component { class SmartNavLinks extends React.Component {
render() { render() {
return (<Nav navbar className="mr-auto"> return (<Nav navbar className="mr-auto">
<Navlink target="/create" text="Turnier erstellen"/> <Navlink target="/create" text="Turnier erstellen"/>
@ -74,18 +72,17 @@ function Betabadge() {
} }
class InvisibleLoginLogoutButtons extends React.Component { class InvisibleLoginLogoutButtons extends React.Component {
logout() {
logout(){
logout(() => notify.show('Du bist jetzt abgemeldet.', 'success', 2500)); logout(() => notify.show('Du bist jetzt abgemeldet.', 'success', 2500));
} }
render() { render() {
const { isSignedIn, username } = this.props; const {isSignedIn, username} = this.props;
if(isSignedIn) { if (isSignedIn) {
return ( return (
<ButtonGroup className="nav-item"> <ButtonGroup className="nav-item">
<Button outline color="success" href="/profile" className="navbar-btn my-2 my-sm-0 px-5">{ username }</Button> <Button outline color="success" href="/profile" className="navbar-btn my-2 my-sm-0 px-5">{ username }</Button>
<Button outline color="success" onClick={this.logout.bind(this)} className="navbar-btn my-2 my-sm-0 px-5">Logout</Button> <Button outline color="success" onClick={this.logout.bind(this)} className="navbar-btn my-2 my-sm-0 px-5">Logout</Button>
</ButtonGroup> </ButtonGroup>
); );
@ -100,9 +97,9 @@ class InvisibleLoginLogoutButtons extends React.Component {
} }
} }
const mapStateToUserinfo = (state) => { const mapStateToUserinfo = state => {
const { isSignedIn, username } = state.userinfo; const {isSignedIn, username} = state.userinfo;
return { isSignedIn, username }; return {isSignedIn, username};
}; };
const LoginLogoutButtons = connect( const LoginLogoutButtons = connect(
@ -111,4 +108,4 @@ const LoginLogoutButtons = connect(
const NavLinks = connect( const NavLinks = connect(
mapStateToUserinfo mapStateToUserinfo
)(SmartNavLinks); )(SmartNavLinks);

4
js/components/TournamentList.js
View File

@ -23,7 +23,7 @@ export default class TournamentList extends React.Component {
Turniere vorhanden</p>; Turniere vorhanden</p>;
} else { } else {
return this.state.tournaments.map(item => ( return this.state.tournaments.map(item => (
//The code should be item.code but the api just supports it this way by now // The code should be item.code but the api just supports it this way by now
<TournamentListEntry name={item.name} code={item.id} key={item.id}/> <TournamentListEntry name={item.name} code={item.id} key={item.id}/>
)); ));
} }
@ -36,4 +36,4 @@ function TournamentListEntry(props) {
{props.name} {props.name}
</a> </a>
); );
} }

15
js/components/UserRestrictor.js
View File

@ -3,7 +3,7 @@ import React from 'react';
/** /**
* This component works just like a switch statement, although the conditions of the first items * This component works just like a switch statement, although the conditions of the first items
* are checked first, and the first component with a condition that is true will be shown. * are checked first, and the first component with a condition that is true will be shown.
* *
* For single conditions and options any kind of component can be taken, while the Option-component * For single conditions and options any kind of component can be taken, while the Option-component
* is dedicated for this job. The only important thing is that this component has to have a condition property. * is dedicated for this job. The only important thing is that this component has to have a condition property.
* *
@ -13,7 +13,7 @@ import React from 'react';
* *
* function SomeRestrictedContent(props) { * function SomeRestrictedContent(props) {
* const { isSignedIn } = props; * const { isSignedIn } = props;
* *
* return ( * return (
* <UserRestrictor> * <UserRestrictor>
* <Option condition={isSignedIn}> * <Option condition={isSignedIn}>
@ -30,14 +30,13 @@ import React from 'react';
* since it would always be taken otherwise (the options' conditions are checked from top to bottom) * since it would always be taken otherwise (the options' conditions are checked from top to bottom)
*/ */
export class UserRestrictor extends React.Component { export class UserRestrictor extends React.Component {
render() { render() {
const { children } = this.props; const {children} = this.props;
for(var i in children) { for (const i in children) {
var c = children[i]; const c = children[i];
if(c.props.condition) { if (c.props.condition) {
return c; return c;
} }
} }

8
js/constants.js
View File

@ -1,11 +1,11 @@
export const errorMessages = { export const errorMessages = {
registration_errorunknown : { registration_errorunknown: {
en : 'An unknown error prevented a successful registration.' en: 'An unknown error prevented a successful registration.'
}, },
login_errorunknown : { login_errorunknown: {
en : 'An unknown error prevented a successful login.' en: 'An unknown error prevented a successful login.'
} }
}; };

14
js/redux/reduxStoreBinder.js
View File

@ -1,10 +1,10 @@
import React from 'react'; import React from 'react';
import { initializeStore } from '../api'; import {initializeStore} from '../api';
const isServer = typeof window === 'undefined'; const isServer = typeof window === 'undefined';
const __NEXT_REDUX_STORE__ = '__NEXT_REDUX_STORE__'; const __NEXT_REDUX_STORE__ = '__NEXT_REDUX_STORE__';
function getOrCreateStore (initialState) { function getOrCreateStore(initialState) {
// Always make a new store if server, otherwise state is shared between requests // Always make a new store if server, otherwise state is shared between requests
if (isServer) { if (isServer) {
return initializeStore(initialState); return initializeStore(initialState);
@ -17,9 +17,9 @@ function getOrCreateStore (initialState) {
return window[__NEXT_REDUX_STORE__]; return window[__NEXT_REDUX_STORE__];
} }
export default (App) => { export default App => {
return class AppWithRedux extends React.Component { return class AppWithRedux extends React.Component {
static async getInitialProps (appContext) { static async getInitialProps(appContext) {
// Get or Create the store with `undefined` as initialState // Get or Create the store with `undefined` as initialState
// This allows you to set a custom default initialState // This allows you to set a custom default initialState
const reduxStore = getOrCreateStore(); const reduxStore = getOrCreateStore();
@ -38,12 +38,12 @@ export default (App) => {
}; };
} }
constructor (props) { constructor(props) {
super(props); super(props);
this.reduxStore = getOrCreateStore(props.initialReduxState); this.reduxStore = getOrCreateStore(props.initialReduxState);
} }
render () { render() {
return <App {...this.props} reduxStore={this.reduxStore} />; return <App {...this.props} reduxStore={this.reduxStore} />;
} }
}; };

17
pages/_app.js
View File

@ -1,19 +1,18 @@
import App, { Container } from 'next/app'; import App, {Container} from 'next/app';
import React from 'react'; import React from 'react';
import { Provider } from 'react-redux'; import {Provider} from 'react-redux';
import Notifications from 'react-notify-toast'; import Notifications from 'react-notify-toast';
import Favicon from 'react-favicon'; import Favicon from 'react-favicon';
import withReduxStore from '../js/redux/reduxStoreBinder'; import withReduxStore from '../js/redux/reduxStoreBinder';
import { verifyCredentials } from '../js/api.js'; import {verifyCredentials} from '../js/api.js';
class TurniereApp extends App { class TurniereApp extends App {
componentDidMount() { componentDidMount() {
verifyCredentials(); verifyCredentials();
} }
render () { render() {
const {Component, pageProps, reduxStore} = this.props; const {Component, pageProps, reduxStore} = this.props;
return ( return (
<Container> <Container>

10
pages/_error.js
View File

@ -1,12 +1,12 @@
import React from 'react'; import React from 'react';
import { ErrorPageComponent } from '../js/components/ErrorComponents'; import {ErrorPageComponent} from '../js/components/ErrorComponents';
import { verifyCredentials } from '../js/api'; import {verifyCredentials} from '../js/api';
export default class Error extends React.Component { export default class Error extends React.Component {
static getInitialProps({ res, err }) { static getInitialProps({res, err}) {
const statusCode = res ? res.statusCode : err ? err.statusCode : 400; const statusCode = res ? res.statusCode : err ? err.statusCode : 400;
return { statusCode }; return {statusCode};
} }
componentDidMount() { componentDidMount() {

64
pages/create.js
View File

@ -1,8 +1,8 @@
import Head from 'next/head'; import Head from 'next/head';
import React from 'react'; import React from 'react';
import { notify } from 'react-notify-toast'; import {notify} from 'react-notify-toast';
import { connect } from 'react-redux'; import {connect} from 'react-redux';
import posed from 'react-pose'; import posed from 'react-pose';
import { import {
Button, Button,
@ -16,19 +16,18 @@ import {
Label Label
} from 'reactstrap'; } from 'reactstrap';
import { TurniereNavigation } from '../js/components/Navigation'; import {TurniereNavigation} from '../js/components/Navigation';
import { Footer } from '../js/components/Footer'; import {Footer} from '../js/components/Footer';
import { UserRestrictor, Option } from '../js/components/UserRestrictor'; import {UserRestrictor, Option} from '../js/components/UserRestrictor';
import { Login } from '../js/components/Login'; import {Login} from '../js/components/Login';
import EditableStringList from '../js/components/EditableStringList'; import EditableStringList from '../js/components/EditableStringList';
import { createTournament } from '../js/api'; import {createTournament} from '../js/api';
import '../static/everypage.css'; import '../static/everypage.css';
class CreatePage extends React.Component { class CreatePage extends React.Component {
render() { render() {
const { isSignedIn } = this.props; const {isSignedIn} = this.props;
return ( return (
<UserRestrictor> <UserRestrictor>
@ -62,8 +61,8 @@ class CreatePage extends React.Component {
} }
function mapStateToCreatePageProperties(state) { function mapStateToCreatePageProperties(state) {
const { isSignedIn } = state.userinfo; const {isSignedIn} = state.userinfo;
return { isSignedIn }; return {isSignedIn};
} }
export default connect( export default connect(
@ -97,13 +96,13 @@ const GroupphaseFader = posed.div({
class CreateTournamentForm extends React.Component { class CreateTournamentForm extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
groupPhaseEnabled: false, groupPhaseEnabled: false,
name: '', name: '',
description: '', description: '',
public: false, public: false,
groupSize: 4, groupSize: 4,
groupAdvance: 1, groupAdvance: 1,
teams: [], teams: [],
@ -156,7 +155,7 @@ class CreateTournamentForm extends React.Component {
</GroupphaseFader> </GroupphaseFader>
</Form> </Form>
<h3 className="custom-font mt-4">Teams</h3> <h3 className="custom-font mt-4">Teams</h3>
<EditableStringList <EditableStringList
addButtonText="hinzufügen" addButtonText="hinzufügen"
teamPlaceholder="Keine Teams hinzugefügt!" teamPlaceholder="Keine Teams hinzugefügt!"
groupPlaceHolder="Keine Gruppen verfügbar!" groupPlaceHolder="Keine Gruppen verfügbar!"
@ -181,35 +180,35 @@ class CreateTournamentForm extends React.Component {
} }
handleGroupSizeInput(input) { handleGroupSizeInput(input) {
let newSize = input.target.value; const newSize = input.target.value;
if(newSize <= this.state.groupAdvance) { if (newSize <= this.state.groupAdvance) {
this.setState({ this.setState({
groupSize: newSize, groupSize: newSize,
groupAdvance: newSize - 1 groupAdvance: newSize - 1
}); });
} else { } else {
this.setState({ groupSize: newSize }); this.setState({groupSize: newSize});
} }
} }
handleGroupAdvanceInput(input) { handleGroupAdvanceInput(input) {
this.setState({ groupAdvance: input.target.value }); this.setState({groupAdvance: input.target.value});
} }
handleGroupPhaseEnabledInput(input) { handleGroupPhaseEnabledInput(input) {
this.setState({ groupPhaseEnabled: input.target.checked }); this.setState({groupPhaseEnabled: input.target.checked});
} }
handleNameInput(input) { handleNameInput(input) {
this.setState({ name: input.target.value }); this.setState({name: input.target.value});
} }
handleDescriptionInput(input) { handleDescriptionInput(input) {
this.setState({ description: input.target.value }); this.setState({description: input.target.value});
} }
handlePublicInput(input) { handlePublicInput(input) {
this.setState({ public: input.target.checked }); this.setState({public: input.target.checked});
} }
create() { create() {
@ -225,7 +224,6 @@ class CreateTournamentForm extends React.Component {
notify.show('Das Turnier konnte nicht erstellt werden.', 'warning', 5000); notify.show('Das Turnier konnte nicht erstellt werden.', 'warning', 5000);
}); });
} }
} }
/** /**
@ -245,11 +243,11 @@ class CreateTournamentForm extends React.Component {
* backend * backend
*/ */
function createTeamArray(groupphase, groups, teams) { function createTeamArray(groupphase, groups, teams) {
let result = []; const result = [];
if(groupphase) { if (groupphase) {
for(let groupNumber = 0; groupNumber < groups.length; groupNumber++) { for (let groupNumber = 0; groupNumber < groups.length; groupNumber++) {
for(let groupMember = 0; groupMember < groups[groupNumber].length; groupMember++) { for (let groupMember = 0; groupMember < groups[groupNumber].length; groupMember++) {
result[result.length] = { result[result.length] = {
'name': groups[groupNumber][groupMember], 'name': groups[groupNumber][groupMember],
'group': groupNumber 'group': groupNumber
@ -257,8 +255,8 @@ function createTeamArray(groupphase, groups, teams) {
} }
} }
} else { } else {
for(let i = 0; i < teams.length; i++) { for (let i = 0; i < teams.length; i++) {
result[i] = { 'name': teams[i] }; result[i] = {'name': teams[i]};
} }
} }

13
pages/faq.js
View File

@ -1,10 +1,10 @@
import Head from 'next/head'; import Head from 'next/head';
import React from 'react'; import React from 'react';
import { Col, Container, Row } from 'reactstrap'; import {Col, Container, Row} from 'reactstrap';
import { TurniereNavigation } from '../js/components/Navigation'; import {TurniereNavigation} from '../js/components/Navigation';
import { BigImage } from '../js/components/BigImage'; import {BigImage} from '../js/components/BigImage';
import { Footer } from '../js/components/Footer'; import {Footer} from '../js/components/Footer';
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
@ -222,7 +222,6 @@ function TournamentFaq() {
} }
export default class FaqPage extends React.Component { export default class FaqPage extends React.Component {
render() { render() {
return ( return (
<div> <div>

15
pages/imprint.js
View File

@ -1,10 +1,10 @@
import Head from 'next/head'; import Head from 'next/head';
import React from 'react'; import React from 'react';
import { Container } from 'reactstrap'; import {Container} from 'reactstrap';
import { TurniereNavigation } from '../js/components/Navigation'; import {TurniereNavigation} from '../js/components/Navigation';
import { BigImage } from '../js/components/BigImage'; import {BigImage} from '../js/components/BigImage';
import { Footer } from '../js/components/Footer'; import {Footer} from '../js/components/Footer';
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
import '../static/everypage.css'; import '../static/everypage.css';
@ -17,7 +17,7 @@ function Main() {
); );
} }
function ImprintText(){ function ImprintText() {
return ( return (
<Container> <Container>
<h3> <h3>
@ -74,7 +74,6 @@ function ImprintText(){
export default class ImprintPage extends React.Component { export default class ImprintPage extends React.Component {
render() { render() {
return ( return (
<div> <div>

15
pages/index.js
View File

@ -1,6 +1,6 @@
import Head from 'next/head'; import Head from 'next/head';
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import {connect} from 'react-redux';
import { import {
Alert, Alert,
Button, Button,
@ -8,9 +8,9 @@ import {
CardBody CardBody
} from 'reactstrap'; } from 'reactstrap';
import { TurniereNavigation } from '../js/components/Navigation'; import {TurniereNavigation} from '../js/components/Navigation';
import { BigImage } from '../js/components/BigImage'; import {BigImage} from '../js/components/BigImage';
import { Footer } from '../js/components/Footer'; import {Footer} from '../js/components/Footer';
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
@ -170,8 +170,7 @@ function PromotedLinkCreateTournament() {
class Index extends React.Component { class Index extends React.Component {
render() {
render () {
return ( return (
<div> <div>
<Head> <Head>

2
pages/list.js
View File

@ -10,7 +10,6 @@ import TournamentList from '../js/components/TournamentList';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
export default class PublicTournamentsPage extends React.Component { export default class PublicTournamentsPage extends React.Component {
render() { render() {
return ( return (
<div className="main generic-fullpage-bg"> <div className="main generic-fullpage-bg">
@ -46,7 +45,6 @@ function PublicTournaments(props) {
<a href='/private' className="btn btn-success shadow">zu den privaten Turnieren</a> <a href='/private' className="btn btn-success shadow">zu den privaten Turnieren</a>
</Container> </Container>
</div>); </div>);
} else { } else {
return (<Container className='py-5'> return (<Container className='py-5'>
<PublicTournamentsCard/> <PublicTournamentsCard/>

11
pages/login.js
View File

@ -1,14 +1,13 @@
import Head from 'next/head'; import Head from 'next/head';
import React from 'react'; import React from 'react';
import { TurniereNavigation } from '../js/components/Navigation'; import {TurniereNavigation} from '../js/components/Navigation';
import { Footer } from '../js/components/Footer'; import {Footer} from '../js/components/Footer';
import { Login } from '../js/components/Login'; import {Login} from '../js/components/Login';
import '../static/everypage.css'; import '../static/everypage.css';
export default class LoginPage extends React.Component { export default class LoginPage extends React.Component {
render() { render() {
return ( return (
<div className="main generic-fullpage-bg"> <div className="main generic-fullpage-bg">

15
pages/privacy.js
View File

@ -1,10 +1,10 @@
import Head from 'next/head'; import Head from 'next/head';
import React from 'react'; import React from 'react';
import { Container } from 'reactstrap'; import {Container} from 'reactstrap';
import { TurniereNavigation } from '../js/components/Navigation'; import {TurniereNavigation} from '../js/components/Navigation';
import { BigImage } from '../js/components/BigImage'; import {BigImage} from '../js/components/BigImage';
import { Footer } from '../js/components/Footer'; import {Footer} from '../js/components/Footer';
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
@ -18,7 +18,7 @@ function Main() {
); );
} }
function PrivacyText(){ function PrivacyText() {
return ( return (
<Container> <Container>
<p> <p>
@ -494,7 +494,6 @@ function PrivacyText(){
export default class PrivacyPage extends React.Component { export default class PrivacyPage extends React.Component {
render() { render() {
return ( return (
<div> <div>

5
pages/private.js
View File

@ -2,7 +2,7 @@ import Head from 'next/head';
import React from 'react'; import React from 'react';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import {Card, CardBody, Container,} from 'reactstrap'; import {Card, CardBody, Container} from 'reactstrap';
import {TurniereNavigation} from '../js/components/Navigation'; import {TurniereNavigation} from '../js/components/Navigation';
import {Footer} from '../js/components/Footer'; import {Footer} from '../js/components/Footer';
@ -13,7 +13,6 @@ import '../static/everypage.css';
import TournamentList from '../js/components/TournamentList'; import TournamentList from '../js/components/TournamentList';
class PrivateTournamentsPage extends React.Component { class PrivateTournamentsPage extends React.Component {
render() { render() {
const {isSignedIn} = this.props; const {isSignedIn} = this.props;
@ -80,4 +79,4 @@ class PrivateTournamentsCard extends React.Component {
</Card> </Card>
); );
} }
} }

37
pages/register.js
View File

@ -1,6 +1,6 @@
import Head from 'next/head'; import Head from 'next/head';
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import {connect} from 'react-redux';
import { import {
Button, Button,
Card, Card,
@ -13,9 +13,9 @@ import {
Label Label
} from 'reactstrap'; } from 'reactstrap';
import { TurniereNavigation } from '../js/components/Navigation'; import {TurniereNavigation} from '../js/components/Navigation';
import { Footer } from '../js/components/Footer'; import {Footer} from '../js/components/Footer';
import { register } from '../js/api'; import {register} from '../js/api';
import '../static/css/errormessages.css'; import '../static/css/errormessages.css';
import '../static/everypage.css'; import '../static/everypage.css';
@ -39,7 +39,6 @@ export default class RegisterPage extends React.Component {
} }
class Register extends React.Component { class Register extends React.Component {
render() { render() {
return ( return (
<Container className="py-5"> <Container className="py-5">
@ -59,11 +58,11 @@ class Register extends React.Component {
class RegisterErrorList extends React.Component { class RegisterErrorList extends React.Component {
render() { render() {
const { error, errorMessages } = this.props; const {error, errorMessages} = this.props;
if(error) { if (error) {
return ( return (
<ul className="mt-3 error-box"> <ul className="mt-3 error-box">
{ errorMessages.map((message, index) => { errorMessages.map((message, index) =>
<li key={index}>{message}</li> <li key={index}>{message}</li>
) } ) }
</ul> </ul>
@ -74,9 +73,9 @@ class RegisterErrorList extends React.Component {
} }
} }
const mapStateToErrorMessages = (state) => { const mapStateToErrorMessages = state => {
const { errorMessages, error } = state.userinfo; const {errorMessages, error} = state.userinfo;
return { errorMessages, error }; return {errorMessages, error};
}; };
const VisibleRegisterErrorList = connect( const VisibleRegisterErrorList = connect(
@ -88,9 +87,9 @@ class RegisterForm extends React.Component {
super(props); super(props);
this.state = { this.state = {
username : '', username: '',
email : '', email: '',
password : '' password: ''
}; };
} }
@ -122,15 +121,15 @@ class RegisterForm extends React.Component {
} }
handlePasswordInput(input) { handlePasswordInput(input) {
this.setState({ password : input.target.value }); this.setState({password: input.target.value});
} }
handleEmailInput(input) { handleEmailInput(input) {
this.setState({ email : input.target.value }); this.setState({email: input.target.value});
} }
handleUsernameInput(input) { handleUsernameInput(input) {
this.setState({ username : input.target.value }); this.setState({username: input.target.value});
} }
} }

120
pages/tournament-edit.js
View File

@ -1,7 +1,7 @@
import Head from 'next/head'; import Head from 'next/head';
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import {connect} from 'react-redux';
import { notify } from 'react-notify-toast'; import {notify} from 'react-notify-toast';
import { import {
Container, Container,
Button, Button,
@ -10,14 +10,14 @@ import {
Table Table
} from 'reactstrap'; } from 'reactstrap';
import { requestTournament } from '../js/api'; import {requestTournament} from '../js/api';
import { TurniereNavigation } from '../js/components/Navigation'; import {TurniereNavigation} from '../js/components/Navigation';
import { BigImage } from '../js/components/BigImage'; import {BigImage} from '../js/components/BigImage';
import { UserRestrictor, Option } from '../js/components/UserRestrictor'; import {UserRestrictor, Option} from '../js/components/UserRestrictor';
import { Footer } from '../js/components/Footer'; import {Footer} from '../js/components/Footer';
import { Login } from '../js/components/Login'; import {Login} from '../js/components/Login';
import { ErrorPageComponent } from '../js/components/ErrorComponents'; import {ErrorPageComponent} from '../js/components/ErrorComponents';
import { updateTeamName } from '../js/api'; import {updateTeamName} from '../js/api';
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
@ -25,7 +25,6 @@ import '../static/everypage.css';
import '../static/css/index.css'; import '../static/css/index.css';
class EditTournamentPage extends React.Component { class EditTournamentPage extends React.Component {
static async getInitialProps({query}) { static async getInitialProps({query}) {
return {query}; return {query};
} }
@ -40,19 +39,19 @@ class EditTournamentPage extends React.Component {
componentDidMount() { componentDidMount() {
requestTournament(this.props.query.code, () => { requestTournament(this.props.query.code, () => {
this.setState({ validCode: true }); this.setState({validCode: true});
if(this._edittournamentcontent != null) { if (this._edittournamentcontent != null) {
this._edittournamentcontent.notifyOfContentUpdate(); this._edittournamentcontent.notifyOfContentUpdate();
} }
}, () => { }, () => {
this.setState({ validCode: false }); this.setState({validCode: false});
}); });
} }
render() { render() {
const { validCode } = this.state; const {validCode} = this.state;
const { tournamentname, ownerUsername, isSignedIn, username } = this.props; const {tournamentname, ownerUsername, isSignedIn, username} = this.props;
return ( return (
<UserRestrictor> <UserRestrictor>
@ -64,7 +63,9 @@ class EditTournamentPage extends React.Component {
<TurniereNavigation/> <TurniereNavigation/>
<BigImage text={ tournamentname }/> <BigImage text={ tournamentname }/>
<EditTournamentContent ref={(edittournamentcontent) => { this._edittournamentcontent = edittournamentcontent; }}/> <EditTournamentContent ref={edittournamentcontent => {
this._edittournamentcontent = edittournamentcontent;
}}/>
<Footer/> <Footer/>
</div> </div>
</Option> </Option>
@ -82,7 +83,7 @@ class EditTournamentPage extends React.Component {
<Login hint="Sie müssen angemeldet sein, um ein Turnier zu bearbeiten."/> <Login hint="Sie müssen angemeldet sein, um ein Turnier zu bearbeiten."/>
</div> </div>
<Footer/> <Footer/>
</div> </div>
</Option> </Option>
<Option condition={true}> <Option condition={true}>
<ErrorPageComponent statusCode={ 404 }/> <ErrorPageComponent statusCode={ 404 }/>
@ -93,9 +94,9 @@ class EditTournamentPage extends React.Component {
} }
function mapStateToTournamentInfo(state) { function mapStateToTournamentInfo(state) {
const { tournamentname, ownerUsername } = state.tournamentinfo; const {tournamentname, ownerUsername} = state.tournamentinfo;
const { isSignedIn, username } = state.userinfo; const {isSignedIn, username} = state.userinfo;
return { tournamentname, ownerUsername, isSignedIn, username }; return {tournamentname, ownerUsername, isSignedIn, username};
} }
export default connect( export default connect(
@ -103,13 +104,16 @@ export default connect(
)(EditTournamentPage); )(EditTournamentPage);
class EditTournamentContent extends React.Component { class EditTournamentContent extends React.Component {
render() { render() {
return ( return (
<div className='mb-5'> <div className='mb-5'>
<ReturnToTournamentButton/> <ReturnToTournamentButton/>
<EditTournamentPropertiesField ref={(field) => { this._edittournamentpropertiesfield = field; }}/> <EditTournamentPropertiesField ref={field => {
<EditTeamField ref={(field) => { this._editteamfield = field; }}/> this._edittournamentpropertiesfield = field;
}}/>
<EditTeamField ref={field => {
this._editteamfield = field;
}}/>
</div> </div>
); );
} }
@ -129,13 +133,14 @@ function ReturnToTournamentButton() {
} }
class EditTournamentPropertiesField extends React.Component { class EditTournamentPropertiesField extends React.Component {
render() { render() {
return ( return (
<Card className="container"> <Card className="container">
<CardBody> <CardBody>
<h2>Turnier-Eigenschaften ändern</h2> <h2>Turnier-Eigenschaften ändern</h2>
<VisibleEditTournamentForm ref={(form) => { this._visibleedittournamentform = form; }}/> <VisibleEditTournamentForm ref={form => {
this._visibleedittournamentform = form;
}}/>
</CardBody> </CardBody>
</Card> </Card>
); );
@ -147,19 +152,18 @@ class EditTournamentPropertiesField extends React.Component {
} }
class EditTournamentForm extends React.Component { class EditTournamentForm extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
name : '', name: '',
description : '', description: '',
isPublic : false isPublic: false
}; };
} }
render() { render() {
const { name, description, isPublic } = this.state; const {name, description, isPublic} = this.state;
return ( return (
<div> <div>
@ -185,12 +189,12 @@ class EditTournamentForm extends React.Component {
} }
notifyOfContentUpdate() { notifyOfContentUpdate() {
const { name, description, isPublic } = this.props; const {name, description, isPublic} = this.props;
this.setState({ this.setState({
name : name? name : '', name: name? name : '',
description : description? description : '', description: description? description : '',
isPublic : isPublic isPublic: isPublic
}); });
} }
@ -199,36 +203,37 @@ class EditTournamentForm extends React.Component {
} }
handleNameInput(input) { handleNameInput(input) {
this.setState({ name : input.target.value }); this.setState({name: input.target.value});
} }
handleDescriptionInput(input) { handleDescriptionInput(input) {
this.setState({ description : input.target.value }); this.setState({description: input.target.value});
} }
handlePublicInput(input) { handlePublicInput(input) {
this.setState({ public : input.target.value }); this.setState({public: input.target.value});
} }
} }
function mapStateToTournamentFormProps(state) { function mapStateToTournamentFormProps(state) {
const { name, description, isPublic } = state.tournamentinfo; const {name, description, isPublic} = state.tournamentinfo;
return { name, description, isPublic }; return {name, description, isPublic};
} }
const VisibleEditTournamentForm = connect( const VisibleEditTournamentForm = connect(
mapStateToTournamentFormProps, mapStateToTournamentFormProps,
null, null, { withRef : true} null, null, {withRef: true}
)(EditTournamentForm); )(EditTournamentForm);
class EditTeamField extends React.Component { class EditTeamField extends React.Component {
render() { render() {
return ( return (
<Card className="container my-4"> <Card className="container my-4">
<CardBody> <CardBody>
<h2>Team-Namen ändern</h2> <h2>Team-Namen ändern</h2>
<VisibleEditTeamNamesForm ref={(form) => { this._visibleeditteamnamesform = form; }}/> <VisibleEditTeamNamesForm ref={form => {
this._visibleeditteamnamesform = form;
}}/>
</CardBody> </CardBody>
</Card> </Card>
); );
@ -240,24 +245,23 @@ class EditTeamField extends React.Component {
} }
class EditTeamNamesForm extends React.Component { class EditTeamNamesForm extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
teams : [] teams: []
}; };
} }
render() { render() {
const { teams } = this.state; const {teams} = this.state;
return ( return (
<div> <div>
<Table className="table-striped mt-3"> <Table className="table-striped mt-3">
<tbody> <tbody>
{ {
teams.map((team, index) => teams.map((team, index) =>
<tr key={index}> <tr key={index}>
<td><Button outline size="sm" className="changeTeamnameButton" id={ 'editteam-button-team_' + team.id } onClick={ this.handleClick.bind(this, index) }>Ändern</Button></td> <td><Button outline size="sm" className="changeTeamnameButton" id={ 'editteam-button-team_' + team.id } onClick={ this.handleClick.bind(this, index) }>Ändern</Button></td>
<td className="w-100"><input className="form-control" type="text" id={ 'editteam-textfield-team_' + team.id } value={ team.name } placeholder={ team.name } onChange={ this.handleNameInput.bind(this, index) } /></td> <td className="w-100"><input className="form-control" type="text" id={ 'editteam-textfield-team_' + team.id } value={ team.name } placeholder={ team.name } onChange={ this.handleNameInput.bind(this, index) } /></td>
@ -271,20 +275,20 @@ class EditTeamNamesForm extends React.Component {
} }
notifyOfContentUpdate() { notifyOfContentUpdate() {
const { teams } = this.props; const {teams} = this.props;
this.setState({ this.setState({
teams : teams teams: teams
}); });
} }
handleNameInput(index, input) { handleNameInput(index, input) {
let team = this.state.teams.slice(); const team = this.state.teams.slice();
team[index].name = input.target.value; team[index].name = input.target.value;
this.setState({ this.setState({
teams : team teams: team
}); });
} }
@ -298,12 +302,12 @@ class EditTeamNamesForm extends React.Component {
} }
function mapStateToTeamFormProps(state) { function mapStateToTeamFormProps(state) {
const { teams } = state.tournamentinfo; const {teams} = state.tournamentinfo;
return { teams }; return {teams};
} }
const VisibleEditTeamNamesForm = connect( const VisibleEditTeamNamesForm = connect(
mapStateToTeamFormProps, mapStateToTeamFormProps,
null, null, { withRef : true } null, null, {withRef: true}
)(EditTeamNamesForm); )(EditTeamNamesForm);

3
pages/tournament-fullscreen.js
View File

@ -1,8 +1,7 @@
import Head from 'next/head'; import Head from 'next/head';
import React from 'react'; import React from 'react';
class FullscreenTournamentPage extends React.Component { class FullscreenTournamentPage extends React.Component {
static async getInitialProps({query}) { static async getInitialProps({query}) {
return {query}; return {query};
} }

90
pages/tournament.js
View File

@ -1,6 +1,6 @@
import Head from 'next/head'; import Head from 'next/head';
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import {connect} from 'react-redux';
import { import {
Button, Button,
Card, Card,
@ -20,10 +20,10 @@ import {
Table Table
} from 'reactstrap'; } from 'reactstrap';
import { ErrorPageComponent } from '../js/components/ErrorComponents'; import {ErrorPageComponent} from '../js/components/ErrorComponents';
import { Footer } from '../js/components/Footer'; import {Footer} from '../js/components/Footer';
import { TurniereNavigation } from '../js/components/Navigation'; import {TurniereNavigation} from '../js/components/Navigation';
import { BigImage } from '../js/components/BigImage'; import {BigImage} from '../js/components/BigImage';
import { import {
getRequest, getRequest,
getState getState
@ -35,11 +35,10 @@ import '../static/everypage.css';
import '../static/css/tournament.css'; import '../static/css/tournament.css';
class PrivateTournamentPage extends React.Component { class PrivateTournamentPage extends React.Component {
render() { render() {
const { id, description, isPublic, code, ownerUsername, playoffStages } = this.props.tournament; const {id, description, isPublic, code, ownerUsername, playoffStages} = this.props.tournament;
const { isSignedIn, username } = this.props; const {isSignedIn, username} = this.props;
// TODO: Change href-prop of the anchor tag to contain the tournament code // TODO: Change href-prop of the anchor tag to contain the tournament code
return ( return (
<div className='pb-5'> <div className='pb-5'>
@ -64,8 +63,8 @@ class PrivateTournamentPage extends React.Component {
} }
function mapStateToTournamentPageProperties(state) { function mapStateToTournamentPageProperties(state) {
const { isSignedIn, username } = state.userinfo; const {isSignedIn, username} = state.userinfo;
return { isSignedIn, username }; return {isSignedIn, username};
} }
const TournamentPage = connect( const TournamentPage = connect(
@ -73,9 +72,9 @@ const TournamentPage = connect(
)(PrivateTournamentPage); )(PrivateTournamentPage);
function EditButton(props) { function EditButton(props) {
const { id, ownerName, isSignedIn, username } = props; const {id, ownerName, isSignedIn, username} = props;
if(isSignedIn && ownerName === username) { if (isSignedIn && ownerName === username) {
return ( return (
<a href={'/t/' + id + '/edit'} className='btn btn-outline-secondary'>Turnier bearbeiten</a> <a href={'/t/' + id + '/edit'} className='btn btn-outline-secondary'>Turnier bearbeiten</a>
); );
@ -86,15 +85,15 @@ function EditButton(props) {
function getLevelName(levelNumber) { function getLevelName(levelNumber) {
const names = ['Finale', 'Halbfinale', 'Viertelfinale', 'Achtelfinale']; const names = ['Finale', 'Halbfinale', 'Viertelfinale', 'Achtelfinale'];
if(levelNumber < names.length){ if (levelNumber < names.length) {
return names[levelNumber]; return names[levelNumber];
}else { } else {
return Math.pow(2, levelNumber) + 'tel-Finale'; return Math.pow(2, levelNumber) + 'tel-Finale';
} }
} }
function Stage(props) { function Stage(props) {
const { isSignedIn, isOwner } = props; const {isSignedIn, isOwner} = props;
return (<div> return (<div>
<Container className='py-5'> <Container className='py-5'>
@ -118,16 +117,16 @@ class Match extends React.Component {
} }
toggleModal() { toggleModal() {
const { isSignedIn, isOwner } = this.props; const {isSignedIn, isOwner} = this.props;
if(isSignedIn && isOwner) { if (isSignedIn && isOwner) {
this.setState({modal: !this.state.modal}); this.setState({modal: !this.state.modal});
} }
} }
render() { render() {
let cardClass, smallMessage, borderClass; let cardClass; let smallMessage; let borderClass;
//possible states: single_team not_ready not_started in_progress team1_won team2_won undecided // possible states: single_team not_ready not_started in_progress team1_won team2_won undecided
switch (this.props.match.state) { switch (this.props.match.state) {
case 'in_progress': case 'in_progress':
cardClass = 'table-warning'; cardClass = 'table-warning';
@ -178,7 +177,7 @@ class Match extends React.Component {
function MatchModal(props) { function MatchModal(props) {
let title; let title;
let actionButton = ''; let actionButton = '';
//possible states: single_team not_ready not_started in_progress team1_won team2_won undecided // possible states: single_team not_ready not_started in_progress team1_won team2_won undecided
switch (props.match.state) { switch (props.match.state) {
case 'in_progress': case 'in_progress':
title = 'Spiel läuft'; title = 'Spiel läuft';
@ -220,8 +219,8 @@ function MatchModal(props) {
} }
function MatchTable(props) { function MatchTable(props) {
let team1Class, team2Class; let team1Class; let team2Class;
//possible states: single_team not_ready not_started in_progress team1_won team2_won undecided // possible states: single_team not_ready not_started in_progress team1_won team2_won undecided
switch (props.match.state) { switch (props.match.state) {
case 'in_progress': case 'in_progress':
break; break;
@ -243,7 +242,7 @@ function MatchTable(props) {
case 'undecided': case 'undecided':
break; break;
} }
if(props.match.state === 'single_team'){ if (props.match.state === 'single_team') {
return ( return (
<Table className='mb-0'> <Table className='mb-0'>
<tbody> <tbody>
@ -304,15 +303,15 @@ class ScoreInput extends React.Component {
this.decreaseScore = this.decreaseScore.bind(this); this.decreaseScore = this.decreaseScore.bind(this);
} }
updateScore(event){ updateScore(event) {
this.setState({score: event.target.value}); this.setState({score: event.target.value});
} }
increaseScore(){ increaseScore() {
this.setState({score: Number(this.state.score) + 1}); this.setState({score: Number(this.state.score) + 1});
} }
decreaseScore(){ decreaseScore() {
this.setState({score: Number(this.state.score) - 1}); this.setState({score: Number(this.state.score) - 1});
} }
@ -327,13 +326,13 @@ class ScoreInput extends React.Component {
function convertTournament(apiTournament) { function convertTournament(apiTournament) {
let groupStage = null; let groupStage = null;
let playoffStages = []; const playoffStages = [];
for (let stage of apiTournament.stages) { for (const stage of apiTournament.stages) {
if(stage.groups.length > 0){ if (stage.groups.length > 0) {
//group stage // group stage
groupStage = {groups: stage.groups.map(group => convertGroup(group))}; groupStage = {groups: stage.groups.map(group => convertGroup(group))};
}else{ } else {
//playoff stage // playoff stage
playoffStages.push({ playoffStages.push({
id: stage.id, id: stage.id,
level: stage.level, level: stage.level,
@ -363,17 +362,17 @@ function convertGroup(apiGroup) {
} }
function convertMatch(apiMatch) { function convertMatch(apiMatch) {
let result = { const result = {
id: apiMatch.id, id: apiMatch.id,
state: apiMatch.state state: apiMatch.state
}; };
if(apiMatch.match_scores.length === 2) { if (apiMatch.match_scores.length === 2) {
result.team1 = apiMatch.match_scores[0].team.name; result.team1 = apiMatch.match_scores[0].team.name;
result.scoreTeam1 = apiMatch.match_scores[0].points; result.scoreTeam1 = apiMatch.match_scores[0].points;
result.team2 = apiMatch.match_scores[1].team.name; result.team2 = apiMatch.match_scores[1].team.name;
result.scoreTeam2 = apiMatch.match_scores[1].points; 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.team1 = apiMatch.match_scores[0].team.name;
result.scoreTeam1 = apiMatch.match_scores[0].points; result.scoreTeam1 = apiMatch.match_scores[0].points;
result.team2 = 'TBD'; result.team2 = 'TBD';
@ -389,7 +388,6 @@ function convertMatch(apiMatch) {
} }
class Main extends React.Component { class Main extends React.Component {
static async getInitialProps({query}) { static async getInitialProps({query}) {
return {query}; return {query};
} }
@ -398,7 +396,7 @@ class Main extends React.Component {
super(props); super(props);
this.state = { this.state = {
tournament : null tournament: null
}; };
} }
@ -407,13 +405,13 @@ class Main extends React.Component {
getRequest(getState(), '/tournaments/' + code) getRequest(getState(), '/tournaments/' + code)
.then(response => { .then(response => {
this.setState({ status : response.status, tournament : convertTournament(response.data)}); this.setState({status: response.status, tournament: convertTournament(response.data)});
}) })
.catch((err) => { .catch(err => {
if(err.response) { if (err.response) {
this.setState({ status : err.response.status }); this.setState({status: err.response.status});
} else { } else {
this.setState({ status : -1 }); this.setState({status: -1});
} }
}); });
} }
@ -422,7 +420,7 @@ class Main extends React.Component {
render() { render() {
const tournamentName = this.state.tournament === null ? 'Turnier' : this.state.tournament.name; const tournamentName = this.state.tournament === null ? 'Turnier' : this.state.tournament.name;
const { status, tournament } = this.state; const {status, tournament} = this.state;
if (status === 200) { if (status === 200) {
return ( return (

10
server.js
View File

@ -2,7 +2,7 @@ const express = require('express');
const next = require('next'); const next = require('next');
const dev = process.env.NODE_ENV !== 'production'; const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev }); const app = next({dev});
const handle = app.getRequestHandler(); const handle = app.getRequestHandler();
app.prepare() app.prepare()
@ -11,19 +11,19 @@ app.prepare()
server.get('/t/:code', (req, res) => { server.get('/t/:code', (req, res) => {
const actualPage = '/tournament'; const actualPage = '/tournament';
const queryParam = { code: req.params.code }; const queryParam = {code: req.params.code};
app.render(req, res, actualPage, queryParam); app.render(req, res, actualPage, queryParam);
}); });
server.get('/t/:code/fullscreen', (req, res) => { server.get('/t/:code/fullscreen', (req, res) => {
const actualPage = '/tournament-fullscreen'; const actualPage = '/tournament-fullscreen';
const queryParam = { code: req.params.code }; const queryParam = {code: req.params.code};
app.render(req, res, actualPage, queryParam); app.render(req, res, actualPage, queryParam);
}); });
server.get('/t/:code/edit', (req, res) => { server.get('/t/:code/edit', (req, res) => {
const actualPage = '/tournament-edit'; const actualPage = '/tournament-edit';
const queryParam = { code: req.params.code }; const queryParam = {code: req.params.code};
app.render(req, res, actualPage, queryParam); app.render(req, res, actualPage, queryParam);
}); });
@ -31,7 +31,7 @@ app.prepare()
return handle(req, res); return handle(req, res);
}); });
server.listen(dev ? 3000 : 80, (err) => { server.listen(dev ? 3000 : 80, err => {
if (err) throw err; if (err) throw err;
}); });
}) })