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

Merge pull request #26 from turniere/ticket/TURNIERE-177 

Choose and apply consistent code style rules: Ticket/turniere 177
This commit is contained in:
Jonny 2019-05-12 12:01:11 +02:00 committed by GitHub
parent 4627a30ec0 24b9c09970
commit cea1ceb081
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 1700 additions and 2016 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.eslintrc.json
View File

@ -7,7 +7,7 @@
"plugins": [
"react"
],
"extends": "eslint:recommended",
"extends": ["eslint:recommended", "google"],
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
@ -16,6 +16,8 @@
}
},
"rules": {
"arrow-parens": ["error", "as-needed"],
"comma-dangle": ["error", "never"],
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error",
"indent": [
@ -26,10 +28,16 @@
"error",
"unix"
],
"max-len": [
"error",
{"code": 120}
],
"quotes": [
"error",
"single"
],
"require-jsdoc": "off",
"valid-jsdoc": "off",
"semi": [
"error",
"always"

164
js/api.js
View File

@ -11,11 +11,11 @@ import { errorMessages } from './constants';
import getConfig from 'next/config';
const {publicRuntimeConfig} = getConfig();
const api_url = publicRuntimeConfig.api_url;
const apiUrl = publicRuntimeConfig.api_url;
const axios = require('axios');
const actiontypes_userinfo = {
const actionTypesUserinfo = {
'REGISTER': 'REGISTER',
'REGISTER_RESULT_SUCCESS': 'REGISTER_RESULT_SUCCESS',
'REGISTER_RESULT_ERROR': 'REGISTER_RESULT_ERROR',
@ -36,7 +36,7 @@ const actiontypes_userinfo = {
'CLEAR': 'USERINFO_CLEAR'
};
const defaultstate_userinfo = {
const defaultStateUserinfo = {
isSignedIn: false,
username: null,
error: false,
@ -48,7 +48,7 @@ const defaultstate_userinfo = {
uid: null
};
const actiontypes_tournamentinfo = {
const actionTypesTournamentinfo = {
'REQUEST_TOURNAMENT': 'REQUEST_TOURNAMENT',
'REQUEST_TOURNAMENT_SUCCESS': 'REQUEST_TOURNAMENT_SUCCESS',
@ -59,10 +59,10 @@ const actiontypes_tournamentinfo = {
'MODIFY_TOURNAMENT_ERROR': 'MODIFY_TOURNAMENT_ERROR',
'REHYDRATE': 'TOURNAMENTINFO_REHYDRATE',
'CLEAR' : 'TOURNAMENTINFO_CLEAR',
'CLEAR': 'TOURNAMENTINFO_CLEAR'
};
const defaultstate_tournamentinfo = {
const defaultStateTournamentinfo = {
code: '',
description: '',
id: -1,
@ -73,36 +73,36 @@ const defaultstate_tournamentinfo = {
teams: []
};
const actiontypes_tournamentlist = {
const actionTypesTournamentlist = {
'FETCH': 'FETCH',
'FETCH_SUCCESS': 'FETCH_SUCCESS',
'REHYDRATE': 'REHYDRATE'
};
const defaultstate_tournamentlist = {
const defaultStateTournamentlist = {
tournaments: []
};
export function postRequest(state, url, data) {
return axios.post(api_url + url, data, {
return axios.post(apiUrl + url, data, {
headers: generateHeaders(state)
});
}
export function getRequest(state, url) {
return axios.get(api_url + url, {
return axios.get(apiUrl + url, {
headers: generateHeaders(state)
});
}
export function deleteRequest(state, url) {
return axios.delete(api_url + url, {
return axios.delete(apiUrl + url, {
headers: generateHeaders(state)
});
}
export function patchRequest(state, url, data) {
return axios.patch(api_url + url, data, {
return axios.patch(apiUrl + url, data, {
headers: generateHeaders(state)
});
}
@ -122,7 +122,7 @@ function generateHeaders(state) {
function storeOptionalToken(response) {
if (checkForAuthenticationHeaders(response)) {
__store.dispatch({
type : actiontypes_userinfo.STORE_AUTH_HEADERS,
type: actionTypesUserinfo.STORE_AUTH_HEADERS,
parameters: {
accesstoken: response.headers['access-token'],
client: response.headers['client'],
@ -138,7 +138,7 @@ function checkForAuthenticationHeaders(response) {
const requiredHeaders = [
'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]]) {
return false;
}
@ -148,22 +148,22 @@ function checkForAuthenticationHeaders(response) {
return false;
}
const reducer_userinfo = (state = defaultstate_userinfo, action) => {
const reducerUserinfo = (state = defaultStateUserinfo, action) => {
switch (action.type) {
case actiontypes_userinfo.REGISTER:
case actionTypesUserinfo.REGISTER:
postRequest(action.state, '/users', {
'username': action.parameters.username,
'email': action.parameters.email,
'password': action.parameters.password
}).then((resp) => {
}).then(resp => {
__store.dispatch({
type : actiontypes_userinfo.REGISTER_RESULT_SUCCESS
type: actionTypesUserinfo.REGISTER_RESULT_SUCCESS
});
storeOptionalToken(resp);
}).catch((error) => {
}).catch(error => {
if (error.response) {
__store.dispatch({
'type' : actiontypes_userinfo.REGISTER_RESULT_ERROR,
'type': actionTypesUserinfo.REGISTER_RESULT_ERROR,
'parameters': {
'errorMessages': error.response.data.errors.full_messages
}
@ -171,7 +171,7 @@ const reducer_userinfo = (state = defaultstate_userinfo, action) => {
storeOptionalToken(error.response);
} else {
__store.dispatch({
'type' : actiontypes_userinfo.REGISTER_RESULT_ERROR,
'type': actionTypesUserinfo.REGISTER_RESULT_ERROR,
'parameters': {
'errorMessages': [
errorMessages['registration_errorunknown']['en']
@ -181,33 +181,33 @@ const reducer_userinfo = (state = defaultstate_userinfo, action) => {
}
});
return Object.assign({}, state, {});
case actiontypes_userinfo.REGISTER_RESULT_SUCCESS:
case actionTypesUserinfo.REGISTER_RESULT_SUCCESS:
return Object.assign({}, state, {
error: false,
errorMessages: []
});
case actiontypes_userinfo.REGISTER_RESULT_ERROR:
case actionTypesUserinfo.REGISTER_RESULT_ERROR:
return Object.assign({}, state, {
error: true,
errorMessages: action.parameters.errorMessages
});
case actiontypes_userinfo.LOGIN:
case actionTypesUserinfo.LOGIN:
postRequest(action.state, '/users/sign_in', {
email: action.parameters.email,
password: action.parameters.password
}).then((resp) => {
}).then(resp => {
__store.dispatch({
type : actiontypes_userinfo.LOGIN_RESULT_SUCCESS,
type: actionTypesUserinfo.LOGIN_RESULT_SUCCESS,
parameters: {
username: resp.data.username,
successCallback: action.parameters.successCallback
}
});
storeOptionalToken(resp);
}).catch((error) => {
}).catch(error => {
if (error.response) {
__store.dispatch({
'type' : actiontypes_userinfo.LOGIN_RESULT_ERROR,
'type': actionTypesUserinfo.LOGIN_RESULT_ERROR,
'parameters': {
'errorMessages': error.response.data.errors
}
@ -215,7 +215,7 @@ const reducer_userinfo = (state = defaultstate_userinfo, action) => {
storeOptionalToken(error.response);
} else {
__store.dispatch({
'type' : actiontypes_userinfo.LOGIN_RESULT_ERROR,
'type': actionTypesUserinfo.LOGIN_RESULT_ERROR,
'parameters': {
'errorMessages': [errorMessages['login_errorunknown']['en']]
}
@ -223,44 +223,44 @@ const reducer_userinfo = (state = defaultstate_userinfo, action) => {
}
});
return Object.assign({}, state, {});
case actiontypes_userinfo.LOGIN_RESULT_SUCCESS:
case actionTypesUserinfo.LOGIN_RESULT_SUCCESS:
action.parameters.successCallback(action.parameters.username);
return Object.assign({}, state, {
isSignedIn: true,
error: false,
errorMessages: [],
username : action.parameters.username,
username: action.parameters.username
});
case actiontypes_userinfo.LOGIN_RESULT_ERROR:
case actionTypesUserinfo.LOGIN_RESULT_ERROR:
return Object.assign({}, state, {
error: true,
errorMessages: action.parameters.errorMessages
});
case actiontypes_userinfo.LOGOUT:
case actionTypesUserinfo.LOGOUT:
deleteRequest(action.state, '/users/sign_out').then(() => {
action.parameters.successCallback();
__store.dispatch({ type : actiontypes_userinfo.CLEAR });
__store.dispatch({type: actionTypesUserinfo.CLEAR});
}).catch(() => {
__store.dispatch({ type : actiontypes_userinfo.CLEAR });
__store.dispatch({type: actionTypesUserinfo.CLEAR});
});
return Object.assign({}, state, {});
case actiontypes_userinfo.STORE_AUTH_HEADERS:
case actionTypesUserinfo.STORE_AUTH_HEADERS:
return Object.assign({}, state, {
accesstoken: action.parameters.accesstoken,
client: action.parameters.client,
expiry: action.parameters.expiry,
uid: action.parameters.uid
});
case actiontypes_userinfo.VERIFY_CREDENTIALS:
getRequest(action.state, '/users/validate_token').then((resp) => {
case actionTypesUserinfo.VERIFY_CREDENTIALS:
getRequest(action.state, '/users/validate_token').then(resp => {
storeOptionalToken(resp);
}).catch(() => {
__store.dispatch({ type: actiontypes_userinfo.CLEAR });
__store.dispatch({type: actionTypesUserinfo.CLEAR});
});
return Object.assign({}, state, {});
case actiontypes_userinfo.REHYDRATE:
case actionTypesUserinfo.REHYDRATE:
return Object.assign({}, state, action.parameters, {error: false, errorMessages: []});
case actiontypes_userinfo.CLEAR:
case actionTypesUserinfo.CLEAR:
return Object.assign({}, state, {
isSignedIn: false,
username: null,
@ -276,20 +276,20 @@ const reducer_userinfo = (state = defaultstate_userinfo, action) => {
}
};
const reducer_tournamentinfo = (state = defaultstate_tournamentinfo, action) => {
const reducerTournamentinfo = (state = defaultStateTournamentinfo, action) => {
switch (action.type) {
case actiontypes_tournamentinfo.CREATE_TOURNAMENT:
postRequest(action.state, '/tournaments', action.parameters.tournament).then((resp) => {
case actionTypesTournamentinfo.CREATE_TOURNAMENT:
postRequest(action.state, '/tournaments', action.parameters.tournament).then(resp => {
storeOptionalToken(resp);
action.parameters.successCallback();
}).catch(() => {
action.parameters.errorCallback();
});
return Object.assign({}, state, {});
case actiontypes_tournamentinfo.REQUEST_TOURNAMENT:
getRequest(action.state, '/tournaments/' + action.parameters.code).then((resp) => {
case actionTypesTournamentinfo.REQUEST_TOURNAMENT:
getRequest(action.state, '/tournaments/' + action.parameters.code).then(resp => {
__store.dispatch({
type: actiontypes_tournamentinfo.REQUEST_TOURNAMENT_SUCCESS,
type: actionTypesTournamentinfo.REQUEST_TOURNAMENT_SUCCESS,
parameters: resp.data
});
storeOptionalToken(resp);
@ -298,7 +298,7 @@ const reducer_tournamentinfo = (state = defaultstate_tournamentinfo, action) =>
action.parameters.errorCallback();
});
return Object.assign({}, state, {});
case actiontypes_tournamentinfo.REQUEST_TOURNAMENT_SUCCESS:
case actionTypesTournamentinfo.REQUEST_TOURNAMENT_SUCCESS:
return Object.assign({}, state, {
code: action.parameters.code,
description: action.parameters.description,
@ -309,53 +309,53 @@ const reducer_tournamentinfo = (state = defaultstate_tournamentinfo, action) =>
stages: action.parameters.stages,
teams: action.parameters.teams
});
case actiontypes_tournamentinfo.MODIFY_TOURNAMENT:
case actionTypesTournamentinfo.MODIFY_TOURNAMENT:
patchRequest(action.state, '/teams/' + action.parameters.teamid, {
name: action.parameters.name
}).then((resp) => {
}).then(resp => {
storeOptionalToken(resp);
action.parameters.onSuccess();
}).catch((error) => {
}).catch(error => {
if (error.response) {
storeOptionalToken(error.response);
}
action.parameters.onError();
});
return Object.assign({}, state, {});
case actiontypes_tournamentinfo.MODIFY_TOURNAMENT_SUCCESS:
case actionTypesTournamentinfo.MODIFY_TOURNAMENT_SUCCESS:
return Object.assign({}, state, {});
case actiontypes_tournamentinfo.MODIFY_TOURNAMENT_ERROR:
case actionTypesTournamentinfo.MODIFY_TOURNAMENT_ERROR:
return Object.assign({}, state, {});
case actiontypes_tournamentinfo.REHYDRATE:
case actionTypesTournamentinfo.REHYDRATE:
return Object.assign({}, state, {});
case actiontypes_tournamentinfo.CLEAR:
case actionTypesTournamentinfo.CLEAR:
return Object.assign({}, state, {});
default: return state;
}
};
const reducer_tournamentlist = (state = defaultstate_tournamentlist, action) => {
const reducerTournamentlist = (state = defaultStateTournamentlist, action) => {
switch (action.type) {
case actiontypes_tournamentlist.FETCH:
getRequest(action.state, '/tournaments?type=' + action.parameters.type).then((resp) => {
case actionTypesTournamentlist.FETCH:
getRequest(action.state, '/tournaments?type=' + action.parameters.type).then(resp => {
__store.dispatch({
type: actiontypes_tournamentlist.FETCH_SUCCESS,
type: actionTypesTournamentlist.FETCH_SUCCESS,
parameters: resp.data
});
storeOptionalToken(resp);
action.parameters.successCallback(resp.data);
}).catch((error) => {
}).catch(error => {
if (error.response) {
storeOptionalToken(error.response);
}
action.parameters.errorCallback();
});
return state;
case actiontypes_tournamentlist.FETCH_SUCCESS:
case actionTypesTournamentlist.FETCH_SUCCESS:
return Object.assign({}, state, {tournaments: action.parameters});
default:
return state;
@ -363,21 +363,21 @@ const reducer_tournamentlist = (state = defaultstate_tournamentlist, action) =>
};
const reducers = {
userinfo: reducer_userinfo,
tournamentinfo: reducer_tournamentinfo,
tournamentlist: reducer_tournamentlist
userinfo: reducerUserinfo,
tournamentinfo: reducerTournamentinfo,
tournamentlist: reducerTournamentlist
};
const default_applicationstate = {
userinfo : defaultstate_userinfo,
tournamentinfo: defaultstate_tournamentinfo,
tournamentlist: defaultstate_tournamentlist
const defaultApplicationState = {
userinfo: defaultStateUserinfo,
tournamentinfo: defaultStateTournamentinfo,
tournamentlist: defaultStateTournamentlist
};
var __store;
var applicationHydrated = false;
let __store;
let applicationHydrated = false;
export function initializeStore(initialState = default_applicationstate) {
export function initializeStore(initialState = defaultApplicationState) {
__store = createStore(
combineReducers(reducers),
initialState,
@ -396,7 +396,7 @@ export function verifyCredentials() {
if (__store.getState().userinfo.isSignedIn) {
__store.dispatch({
type: actiontypes_userinfo.VERIFY_CREDENTIALS,
type: actionTypesUserinfo.VERIFY_CREDENTIALS,
state: __store.getState()
});
}
@ -404,7 +404,7 @@ export function verifyCredentials() {
export function register(username, email, password) {
__store.dispatch({
type: actiontypes_userinfo.REGISTER,
type: actionTypesUserinfo.REGISTER,
parameters: {
username: username,
email: email,
@ -416,7 +416,7 @@ export function register(username, email, password) {
export function login(email, password, successCallback) {
__store.dispatch({
type: actiontypes_userinfo.LOGIN,
type: actionTypesUserinfo.LOGIN,
parameters: {
email: email,
password: password,
@ -428,7 +428,7 @@ export function login(email, password, successCallback) {
export function logout(successCallback) {
__store.dispatch({
type : actiontypes_userinfo.LOGOUT,
type: actionTypesUserinfo.LOGOUT,
parameters: {
successCallback: successCallback
},
@ -438,7 +438,7 @@ export function logout(successCallback) {
export function createTournament(data, successCallback, errorCallback) {
__store.dispatch({
type: actiontypes_tournamentinfo.CREATE_TOURNAMENT,
type: actionTypesTournamentinfo.CREATE_TOURNAMENT,
parameters: {
tournament: data,
successCallback: successCallback,
@ -450,7 +450,7 @@ export function createTournament(data, successCallback, errorCallback) {
export function requestTournament(code, successCallback, errorCallback) {
__store.dispatch({
type: actiontypes_tournamentinfo.REQUEST_TOURNAMENT,
type: actionTypesTournamentinfo.REQUEST_TOURNAMENT,
parameters: {
code: code,
successCallback: successCallback,
@ -462,7 +462,7 @@ export function requestTournament(code, successCallback, errorCallback) {
export function updateTeamName(team, successCB, errorCB) {
__store.dispatch({
type: actiontypes_tournamentinfo.MODIFY_TOURNAMENT,
type: actionTypesTournamentinfo.MODIFY_TOURNAMENT,
parameters: {
teamid: team.id,
name: team.name,
@ -479,7 +479,7 @@ export function getState() {
export function requestTournamentList(type, successCallback, errorCallback) {
__store.dispatch({
type: actiontypes_tournamentlist.FETCH,
type: actionTypesTournamentlist.FETCH,
parameters: {
type: type,
successCallback: successCallback,
@ -496,15 +496,15 @@ function rehydrateApplicationState() {
if (persistedState) {
__store.dispatch({
type : actiontypes_userinfo.REHYDRATE,
type: actionTypesUserinfo.REHYDRATE,
parameters: Object.assign({}, persistedState.userinfo)
});
__store.dispatch({
type : actiontypes_tournamentinfo.REHYDRATE,
type: actionTypesTournamentinfo.REHYDRATE,
parameters: Object.assign({}, persistedState.tournamentinfo)
});
__store.dispatch({
type : actiontypes_tournamentlist.REHYDRATE,
type: actionTypesTournamentlist.REHYDRATE,
parameters: Object.assign({}, persistedState.tournamentlist)
});
applicationHydrated = true;

150
js/components/EditableStringList.js
View File

@ -1,25 +1,15 @@
import React from 'react';
import {
Alert,
Button,
Card,
CardBody,
CardTitle,
Input,
InputGroup,
InputGroupAddon
Alert, Button, Card, CardBody, CardTitle, Input, InputGroup, InputGroupAddon
} from 'reactstrap';
import '../../static/css/editablestringlist.css';
export default class EditableStringList extends React.Component {
constructor(props) {
super(props);
this.state = {
groupSize: props.groupSize,
teams: props.teams,
groups: props.groups
groupSize: props.groupSize, teams: props.teams, groups: props.groups
};
this.add = this.add.bind(this);
this.remove = this.remove.bind(this);
@ -32,7 +22,7 @@ export default class EditableStringList extends React.Component {
}
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) {
this.state.groups[this.state.groups.length] = [];
}
@ -40,8 +30,7 @@ export default class EditableStringList extends React.Component {
lastGroup[lastGroup.length] = text;
this.setState({
teams: this.state.teams,
groups: this.state.groups
teams: this.state.teams, groups: this.state.groups
});
this.props.onTeamsChange(this.state.teams);
@ -56,8 +45,7 @@ export default class EditableStringList extends React.Component {
}
this.setState({
teams: this.state.teams,
groups: this.state.groups
teams: this.state.teams, groups: this.state.groups
});
this.props.onTeamsChange(this.state.teams);
@ -67,15 +55,15 @@ export default class EditableStringList extends React.Component {
removeTeamFromGroup(text) {
this.state.teams = this.state.teams.filter(item => item !== text);
let teamIndex = this.findTeam(text);
const teamIndex = this.findTeam(text);
if (teamIndex === null) {
return false;
}
// Move every first team to the next group
this.state.groups[teamIndex.group].splice(teamIndex.team, 1);
for(var group = teamIndex.group; group < this.state.groups.length - 1; group++) {
let currentGroup = this.state.groups[group];
for (let group = teamIndex.group; group < this.state.groups.length - 1; group++) {
const currentGroup = this.state.groups[group];
currentGroup[currentGroup.length] = this.state.groups[group + 1].splice(0, 1)[0];
}
@ -88,12 +76,11 @@ export default class EditableStringList extends React.Component {
}
findTeam(text) {
for(var group = 0; group < this.state.groups.length; group++) {
for(var team = 0; team < this.state.groups[group].length; team++) {
for (let group = 0; group < this.state.groups.length; group++) {
for (let team = 0; team < this.state.groups[group].length; team++) {
if (this.state.groups[group][team] === text) {
return {
group: group,
team: team
group: group, team: team
};
}
}
@ -102,15 +89,15 @@ export default class EditableStringList extends React.Component {
}
resizeGroups(newSize) {
let oldGroups = this.state.groups;
var rearrangedGroups = [];
const oldGroups = this.state.groups;
const rearrangedGroups = [];
for(var oldGroupIndex = 0; oldGroupIndex < oldGroups.length; oldGroupIndex++) {
for(var oldTeamIndex = 0; oldTeamIndex < oldGroups[oldGroupIndex].length; oldTeamIndex++) {
let index = oldGroupIndex * this.state.groupSize + oldTeamIndex;
for (let oldGroupIndex = 0; oldGroupIndex < oldGroups.length; oldGroupIndex++) {
for (let oldTeamIndex = 0; oldTeamIndex < oldGroups[oldGroupIndex].length; oldTeamIndex++) {
const index = oldGroupIndex * this.state.groupSize + oldTeamIndex;
let newGroupIndex = Math.floor(index / newSize);
let newTeamIndex = index % newSize;
const newGroupIndex = Math.floor(index / newSize);
const newTeamIndex = index % newSize;
if (newTeamIndex === 0) {
rearrangedGroups[newGroupIndex] = [];
@ -121,8 +108,7 @@ export default class EditableStringList extends React.Component {
}
this.setState({
groupSize: newSize,
groups: rearrangedGroups
groupSize: newSize, groups: rearrangedGroups
});
this.props.onGroupsChange(this.state.groups);
}
@ -149,79 +135,65 @@ export default class EditableStringList extends React.Component {
if (this.props.groupPhaseEnabled) {
if ((typeof this.state.teams !== 'undefined') && this.state.teams.length > 0) {
return (
<div className="bg-light p-3 text-secondary font-italic">
<StringInput submit={this.add} placeholder={this.props.inputPlaceholder} addButtonText={this.props.addButtonText}/>
<GroupView groups={this.state.groups} removeTeam={this.remove} onGroupSwitched={this.onGroupSwitch}/>
</div>
);
return (<div className="bg-light p-3 text-secondary font-italic">
<StringInput submit={this.add} placeholder={this.props.inputPlaceholder}
addButtonText={this.props.addButtonText}/>
<GroupView groups={this.state.groups} removeTeam={this.remove}
onGroupSwitched={this.onGroupSwitch}/>
</div>);
} else {
return (
<div className="bg-light p-3 text-secondary text-center font-italic">
<StringInput submit={this.add} placeholder={this.props.inputPlaceholder} addButtonText={this.props.addButtonText}/>
return (<div className="bg-light p-3 text-secondary text-center font-italic">
<StringInput submit={this.add} placeholder={this.props.inputPlaceholder}
addButtonText={this.props.addButtonText}/>
{this.props.groupPlaceHolder}
</div>
);
</div>);
}
} else {
if ((typeof this.state.teams !== 'undefined') && this.state.teams.length > 0) {
return (
<div className="bg-light p-3 text-secondary font-italic">
<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}/>)}
</div>
);
return (<div className="bg-light p-3 text-secondary font-italic">
<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}/>)}
</div>);
} else {
return (
<div className="bg-light p-3 text-secondary text-center font-italic">
<StringInput submit={this.add} placeholder={this.props.inputPlaceholder} addButtonText={this.props.addButtonText}/>
return (<div className="bg-light p-3 text-secondary text-center font-italic">
<StringInput submit={this.add} placeholder={this.props.inputPlaceholder}
addButtonText={this.props.addButtonText}/>
{this.props.teamPlaceholder}
</div>
);
</div>);
}
}
}
}
class GroupView extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
{this.props.groups.map((group, groupindex) => (
<Card className="group-card" key={groupindex}>
return (<div>
{this.props.groups.map((group, groupindex) => (<Card className="group-card" key={groupindex}>
<CardBody>
<CardTitle>Group {groupindex + 1}</CardTitle>
{group.map((team, teamindex) => (
<div key={team} draggable droppable="droppable"
{group.map((team, teamindex) => (<div key={team} draggable droppable="droppable"
className="grouped-team-item"
onDragStart={(e) => this.onDragStart(e, groupindex,teamindex)}
onDragOver={(e) => this.onDragOver(e)}
onDrop={(e) => this.onDrop(e, groupindex, teamindex)}>
onDragStart={e => this.onDragStart(e, groupindex, teamindex)}
onDragOver={e => this.onDragOver(e)}
onDrop={e => this.onDrop(e, groupindex, teamindex)}>
<Item text={team} removeItem={this.props.removeTeam}/>
</div>
))}
</div>))}
</CardBody>
</Card>
))}
</div>
);
</Card>))}
</div>);
}
onDragStart(e, group, team) {
e.dataTransfer.setData(
'text/plain',
JSON.stringify({
group: group,
team: team
})
);
e.dataTransfer.setData('text/plain', JSON.stringify({
group: group, team: team
}));
}
onDragOver(e) {
@ -231,10 +203,9 @@ class GroupView extends React.Component {
onDrop(e, group, team) {
e.preventDefault();
let src = JSON.parse(e.dataTransfer.getData('text'));
let dest = {
group: group,
team: team
const src = JSON.parse(e.dataTransfer.getData('text'));
const dest = {
group: group, team: team
};
this.props.onGroupSwitched(src, dest);
@ -254,9 +225,9 @@ class StringInput extends React.Component {
}
render() {
return (
<InputGroup className="mb-3">
<Input placeholder={this.props.placeholder} type="text" size="255" value={this.state.value} required onChange={this.handleChange} onKeyPress={(e) => {
return (<InputGroup className="mb-3">
<Input placeholder={this.props.placeholder} type="text" size="255" value={this.state.value} required
onChange={this.handleChange} onKeyPress={e => {
if (e.key === 'Enter') {
this.submit();
return false;
@ -266,8 +237,7 @@ class StringInput extends React.Component {
<Button color="success" outline={true}
onClick={() => this.submit()}>{this.props.addButtonText}</Button>
</InputGroupAddon>
</InputGroup>
);
</InputGroup>);
}
submit() {
@ -292,10 +262,8 @@ class Item extends React.Component {
}
render() {
return (
<Alert className="team-item m-2" color="info" isOpen={this.state.visible} toggle={this.onDismiss}>
return (<Alert className="team-item m-2" color="info" isOpen={this.state.visible} toggle={this.onDismiss}>
{this.props.text}
</Alert>
);
</Alert>);
}
}

1
js/components/ErrorComponents.js
View File

@ -11,7 +11,6 @@ import '../../static/everypage.css';
import '../../static/css/error.css';
export class ErrorPageComponent extends React.Component {
static getInitialProps({statusCode}) {
return {statusCode};
}

50
js/components/Login.js
View File

@ -9,8 +9,7 @@ import '../../static/css/errormessages.css';
import {notify} from 'react-notify-toast';
export function Login(props) {
return (
<Container className="py-5">
return (<Container className="py-5">
<Card className="shadow">
<CardBody>
<h1 className="custom-font">Login</h1>
@ -22,38 +21,30 @@ export function Login(props) {
</div>
</CardBody>
</Card>
</Container>
);
</Container>);
}
class LoginErrorList extends React.Component {
render() {
const {error, errorMessages} = this.props;
if (error) {
return (
<ul className='mt-3 error-box'>
{ errorMessages.map((message, index) =>
<li key={index}>
return (<ul className='mt-3 error-box'>
{errorMessages.map((message, index) => <li key={index}>
{message}
</li>
) }
</ul>
);
</li>)}
</ul>);
} else {
return null;
}
}
}
const mapStateToErrorMessages = (state) => {
const mapStateToErrorMessages = state => {
const {errorMessages, error} = state.userinfo;
return {errorMessages, error};
};
const VisibleLoginErrorList = connect(
mapStateToErrorMessages
)(LoginErrorList);
const VisibleLoginErrorList = connect(mapStateToErrorMessages)(LoginErrorList);
class LoginSuccessRedirectComponent extends React.Component {
render() {
@ -64,7 +55,7 @@ class LoginSuccessRedirectComponent extends React.Component {
}
}
const mapLoginState = (state) => {
const mapLoginState = state => {
const {isSignedIn} = state.userinfo;
return {isSignedIn};
};
@ -72,37 +63,36 @@ const mapLoginState = (state) => {
const LoginSuccessRedirect = connect(mapLoginState)(LoginSuccessRedirectComponent);
class LoginForm extends React.Component {
constructor(props) {
super(props);
this.state = {
email : '',
password : ''
email: '', password: ''
};
}
tryLogin(event) {
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() {
return (
<Form onSubmit={this.tryLogin.bind(this)}>
return (<Form onSubmit={this.tryLogin.bind(this)}>
<FormGroup>
<Label for="username">E-Mail-Adresse</Label>
<Input type="email" name="username" value={this.state.email} onChange={ this.handleEmailInput.bind(this) } />
<Input type="email" name="username" value={this.state.email}
onChange={this.handleEmailInput.bind(this)}/>
</FormGroup>
<FormGroup>
<Label for="password">Passwort</Label>
<Input type="password" name="password" value={this.state.password} onChange={ this.handlePasswordInput.bind(this) } />
<Input type="password" name="password" value={this.state.password}
onChange={this.handlePasswordInput.bind(this)}/>
</FormGroup>
<input type="submit" className="btn btn-lg btn-success w-100 shadow-sm" value="Anmelden"/>
<VisibleLoginErrorList/>
<LoginSuccessRedirect/>
</Form>
);
</Form>);
}
handlePasswordInput(input) {
@ -116,9 +106,7 @@ class LoginForm extends React.Component {
function Hint(props) {
if (props.hint != null) {
return (
<h3>{ props.hint }</h3>
);
return (<h3>{props.hint}</h3>);
} else {
return null;
}

60
js/components/Navigation.js
View File

@ -1,14 +1,5 @@
import {
Badge,
Button,
ButtonGroup,
Collapse,
Nav,
Navbar,
NavbarBrand,
NavbarToggler,
NavItem,
NavLink
Badge, Button, ButtonGroup, Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink
} from 'reactstrap';
import {connect} from 'react-redux';
import React from 'react';
@ -17,7 +8,6 @@ import { logout } from '../api';
import {notify} from 'react-notify-toast';
export class TurniereNavigation extends React.Component {
constructor(props) {
super(props);
@ -35,8 +25,7 @@ export class TurniereNavigation extends React.Component {
}
render() {
return (
<Navbar color="light" light expand="lg">
return (<Navbar color="light" light expand="lg">
<NavbarBrand href="/">turnie.re</NavbarBrand>
<Betabadge/>
<NavbarToggler onClick={this.toggle}/>
@ -44,21 +33,17 @@ export class TurniereNavigation extends React.Component {
<NavLinks/>
<LoginLogoutButtons/>
</Collapse>
</Navbar>
);
</Navbar>);
}
}
function Navlink(props) {
return (
<NavItem active={true}>
return (<NavItem active={true}>
<NavLink href={props.target}>{props.text}</NavLink>
</NavItem>
);
</NavItem>);
}
class SmartNavLinks extends React.Component {
render() {
return (<Nav navbar className="mr-auto">
<Navlink target="/create" text="Turnier erstellen"/>
@ -74,7 +59,6 @@ function Betabadge() {
}
class InvisibleLoginLogoutButtons extends React.Component {
logout() {
logout(() => notify.show('Du bist jetzt abgemeldet.', 'success', 2500));
}
@ -83,32 +67,28 @@ class InvisibleLoginLogoutButtons extends React.Component {
const {isSignedIn, username} = this.props;
if (isSignedIn) {
return (
<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" onClick={this.logout.bind(this)} className="navbar-btn my-2 my-sm-0 px-5">Logout</Button>
</ButtonGroup>
);
return (<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" onClick={this.logout.bind(this)}
className="navbar-btn my-2 my-sm-0 px-5">Logout</Button>
</ButtonGroup>);
} else {
return (
<ButtonGroup className="nav-item">
<Button outline color="success" href="/login" className="navbar-btn my-2 my-sm-0 px-5">Login</Button>
<Button outline color="success" href="/register" className="navbar-btn my-2 my-sm-0 px-5">Registrieren</Button>
</ButtonGroup>
);
return (<ButtonGroup className="nav-item">
<Button outline color="success" href="/login"
className="navbar-btn my-2 my-sm-0 px-5">Login</Button>
<Button outline color="success" href="/register"
className="navbar-btn my-2 my-sm-0 px-5">Registrieren</Button>
</ButtonGroup>);
}
}
}
const mapStateToUserinfo = (state) => {
const mapStateToUserinfo = state => {
const {isSignedIn, username} = state.userinfo;
return {isSignedIn, username};
};
const LoginLogoutButtons = connect(
mapStateToUserinfo
)(InvisibleLoginLogoutButtons);
const LoginLogoutButtons = connect(mapStateToUserinfo)(InvisibleLoginLogoutButtons);
const NavLinks = connect(
mapStateToUserinfo
)(SmartNavLinks);
const NavLinks = connect(mapStateToUserinfo)(SmartNavLinks);

9
js/components/UserRestrictor.js
View File

@ -30,15 +30,12 @@ import React from 'react';
* since it would always be taken otherwise (the options' conditions are checked from top to bottom)
*/
export class UserRestrictor extends React.Component {
render() {
const {children} = this.props;
for(var i in children) {
var c = children[i];
if(c.props.condition) {
return c;
for (const child of children) {
if (child.props.condition) {
return child;
}
}

2
js/redux/reduxStoreBinder.js
View File

@ -17,7 +17,7 @@ function getOrCreateStore (initialState) {
return window[__NEXT_REDUX_STORE__];
}
export default (App) => {
export default App => {
return class AppWithRedux extends React.Component {
static async getInitialProps(appContext) {
// Get or Create the store with `undefined` as initialState

4
package.json
View File

@ -16,6 +16,7 @@
"@zeit/next-css": "^1.0.1",
"axios": "^0.18.0",
"bootstrap": "^4.1.3",
"eslint-config-google": "^0.12.0",
"express": "^4.16.4",
"next": "^7.0.2",
"react": "^16.6.1",
@ -30,7 +31,8 @@
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"eslint": "^5.9.0",
"eslint": "^5.16.0",
"eslint-config-google": "^0.12.0",
"eslint-plugin-react": "^7.11.1",
"react-editable-list": "0.0.3"
}

7
pages/_app.js
View File

@ -8,22 +8,19 @@ import withReduxStore from '../js/redux/reduxStoreBinder';
import {verifyCredentials} from '../js/api.js';
class TurniereApp extends App {
componentDidMount() {
verifyCredentials();
}
render() {
const {Component, pageProps, reduxStore} = this.props;
return (
<Container>
return (<Container>
<Notifications/>
<Favicon url="../static/icons/favicon.ico"/>
<Provider store={reduxStore}>
<Component {...pageProps} />
</Provider>
</Container>
);
</Container>);
}
}

4
pages/_error.js
View File

@ -14,8 +14,6 @@ export default class Error extends React.Component {
}
render() {
return (
<ErrorPageComponent statusCode={this.props.statusCode}/>
);
return (<ErrorPageComponent statusCode={this.props.statusCode}/>);
}
}

80
pages/create.js
View File

@ -5,15 +5,7 @@ import { connect } from 'react-redux';
import posed from 'react-pose';
import {
Button,
Card,
CardBody,
Container,
CustomInput,
Form,
FormGroup,
Input,
Label
Button, Card, CardBody, Container, CustomInput, Form, FormGroup, Input, Label
} from 'reactstrap';
import {TurniereNavigation} from '../js/components/Navigation';
@ -26,12 +18,10 @@ import { createTournament } from '../js/api';
import '../static/everypage.css';
class CreatePage extends React.Component {
render() {
const {isSignedIn} = this.props;
return (
<UserRestrictor>
return (<UserRestrictor>
<Option condition={isSignedIn}>
<div className="main generic-fullpage-bg">
<Head>
@ -56,8 +46,7 @@ class CreatePage extends React.Component {
<Footer/>
</div>
</Option>
</UserRestrictor>
);
</UserRestrictor>);
}
}
@ -66,31 +55,24 @@ function mapStateToCreatePageProperties(state) {
return {isSignedIn};
}
export default connect(
mapStateToCreatePageProperties
)(CreatePage);
export default connect(mapStateToCreatePageProperties)(CreatePage);
function CreateTournamentCard() {
return (
<Container className="py-5">
return (<Container className="py-5">
<Card className="shadow">
<CardBody>
<h1 className="custom-font">Turnier erstellen</h1>
<CreateTournamentForm/>
</CardBody>
</Card>
</Container>
);
</Container>);
}
const GroupphaseFader = posed.div({
visible: {
opacity: 1,
height: 150
},
hidden: {
opacity: 0,
height: 0
opacity: 1, height: 150
}, hidden: {
opacity: 0, height: 0
}
});
@ -100,14 +82,9 @@ class CreateTournamentForm extends React.Component {
this.state = {
groupPhaseEnabled: false,
name: '',
description: '',
public: false,
name: '', description: '', public: false,
groupSize: 4,
groupAdvance: 1,
teams: [],
groups: []
groupSize: 4, groupAdvance: 1, teams: [], groups: []
};
this.handleGroupPhaseEnabledInput = this.handleGroupPhaseEnabledInput.bind(this);
this.teamListUpdate = this.teamListUpdate.bind(this);
@ -123,25 +100,29 @@ class CreateTournamentForm extends React.Component {
}
render() {
return (
<div>
return (<div>
<Form>
<FormGroup>
<Label for="name">Name des Turniers</Label>
<Input type="text" name="name" size="255" required value={this.state.name} onChange={this.handleNameInput}/>
<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" value={this.state.description} onChange={this.handleDescriptionInput}/>
<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)" checked={this.state.public} onChange={this.handlePublicInput}/>
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"
checked={this.state.groupPhaseEnabled} onChange={this.handleGroupPhaseEnabledInput}/>
checked={this.state.groupPhaseEnabled}
onChange={this.handleGroupPhaseEnabledInput}/>
</FormGroup>
<GroupphaseFader pose={this.state.groupPhaseEnabled? 'visible' : 'hidden'} className="groupphasefader">
<GroupphaseFader pose={this.state.groupPhaseEnabled ? 'visible' : 'hidden'}
className="groupphasefader">
<FormGroup>
<Label for="teams-per-group">Anzahl Teams pro Gruppe</Label>
<Input type="number" name="teams-per-group" min="3"
@ -167,9 +148,9 @@ class CreateTournamentForm extends React.Component {
onTeamsChange={this.teamListUpdate}
onGroupsChange={this.groupListUpdate}
inputPlaceholder="Teamname"/>
<Button color="success" size="lg" className="w-100 shadow-sm mt-4" onClick={this.create}>Turnier erstellen</Button>
</div>
);
<Button color="success" size="lg" className="w-100 shadow-sm mt-4" onClick={this.create}>Turnier
erstellen</Button>
</div>);
}
teamListUpdate(list) {
@ -181,11 +162,10 @@ class CreateTournamentForm extends React.Component {
}
handleGroupSizeInput(input) {
let newSize = input.target.value;
const newSize = input.target.value;
if (newSize <= this.state.groupAdvance) {
this.setState({
groupSize: newSize,
groupAdvance: newSize - 1
groupSize: newSize, groupAdvance: newSize - 1
});
} else {
this.setState({groupSize: newSize});
@ -225,7 +205,6 @@ class CreateTournamentForm extends React.Component {
notify.show('Das Turnier konnte nicht erstellt werden.', 'warning', 5000);
});
}
}
/**
@ -245,14 +224,13 @@ class CreateTournamentForm extends React.Component {
* backend
*/
function createTeamArray(groupphase, groups, teams) {
let result = [];
const 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
'name': groups[groupNumber][groupMember], 'group': groupNumber
};
}
}

175
pages/faq.js
View File

@ -11,8 +11,7 @@ import 'bootstrap/dist/css/bootstrap.min.css';
import '../static/everypage.css';
function Main() {
return (
<div className="main">
return (<div className="main">
<Container className="pb-5">
<GeneralFaq/>
<hr className="mb-5"/>
@ -20,13 +19,11 @@ function Main() {
<hr className="mb-5"/>
<TournamentFaq/>
</Container>
</div>
);
</div>);
}
function GeneralFaq() {
return (
<div className="running-text">
return (<div className="running-text">
<h1>Allgemein</h1>
<Row>
<Col sm="4">
@ -34,97 +31,83 @@ function GeneralFaq() {
<p>
turnie.re ist ein Online-Turnier&shy;planer.</p>
<p>
Allein aus den Team-Namen berechnen wir dir einen kompletten Spielplan, den du auch gleich
mit allen Leuten teilen kannst, ohne dir Gedanken machen zu müssen, wer gegen wen spielen
muss. Du trägst ein, wer gewonnen hat, und turnie.re sagt, wer als nächstes spielt.
</p>
Allein aus den Team-Namen berechnen wir dir einen kompletten Spielplan, den du auch gleich mit allen
Leuten teilen kannst, ohne dir Gedanken machen zu müssen, wer gegen wen spielen muss. Du trägst ein,
wer gewonnen hat, und turnie.re sagt, wer als nächstes spielt. </p>
</Col>
<Col sm="4">
<h4>Für welche Sportarten ist turnie.re geeignet?</h4>
<p>
turnie.re ist prinzipiell für jede Sportart geeignet. Die einzige Vor&shy;aus&shy;setzung ist, dass
in jedem Spiel zwei Mannschaften oder Spieler gegeinander antreten und dass derjenige mit
den meisten Punkten gewinnt.
</p>
turnie.re ist prinzipiell für jede Sportart geeignet. Die einzige Vor&shy;aus&shy;setzung ist,
dass in jedem Spiel zwei Mannschaften oder Spieler gegeinander antreten und dass derjenige mit den
meisten Punkten gewinnt. </p>
</Col>
<Col sm="4">
<h4>Für welche Anzahl an Teams ist turnie.re geeignet?</h4>
<p>
turnie.re ist unabhängig von der Anzahl der Teams nutzbar.
</p>
turnie.re ist unabhängig von der Anzahl der Teams nutzbar. </p>
</Col>
<Col sm="4">
<h4>Fallen für die Nutzung von turnie.re Kosten an?</h4>
<p>
turnie.re ist ein kostenloser Service! Wir erheben keine Kosten und sind nur darauf aus,
dein Turnier-Management so einfach wie möglich zu gestalten.
</p>
dein Turnier-Management so einfach wie möglich zu gestalten. </p>
</Col>
</Row>
</div>
);
</div>);
}
function AccountFaq() {
return (
<div className="running-text">
return (<div className="running-text">
<h1>Account</h1>
<Row>
<Col sm="4">
<h4>Warum brauche ich einen Account für turnie.re?</h4>
<p>
Wir wollen sicherstellen, dass nur berechtigte Nutzer Turnierdaten ändern können. Damit wir
dich als berechtigt verifizieren können, benötigst du einen Acoount, sodass wir dir die
entsprechenden Bearbeitungsrechte zuteilen können.
</p>
Wir wollen sicherstellen, dass nur berechtigte Nutzer Turnierdaten ändern können. Damit wir dich als
berechtigt verifizieren können, benötigst du einen Acoount, sodass wir dir die entsprechenden
Bearbeitungsrechte zuteilen können. </p>
</Col>
<Col sm="4">
<h4>Welche Daten muss ich bei der Accounterstellung angeben?</h4>
<p>
Um einen Account anzulegen musst du einen Nutzernamen, eine gültige E-Mailadresse sowie ein
Passwort angeben.
</p>
Um einen Account anzulegen musst du einen Nutzernamen, eine gültige E-Mailadresse sowie ein Passwort
angeben. </p>
</Col>
<Col sm="4">
<h4>Wie werden meine Daten verarbeitet?</h4>
<p>
Deine Daten werden in unserer Datenbank gespeichert. Eine Weitergabe dieser Daten an Dritte
erfolgt nicht!
Deine Daten werden in unserer Datenbank gespeichert. Eine Weitergabe dieser Daten an Dritte erfolgt
nicht!
</p>
<p>
Zusätlich wird dein Passwort verschlüsselt gespeichert, das bedeutet auch wir kennen dein
Passwort nicht und dein Account wird zuverlässig geschützt.
</p>
Zusätlich wird dein Passwort verschlüsselt gespeichert, das bedeutet auch wir kennen dein Passwort
nicht und dein Account wird zuverlässig geschützt. </p>
</Col>
<Col sm="4">
<h4>Wie kann ich meinen Nutzernamen ändern?</h4>
<p>
Über deinen Nutzernamen, der in der Kopfzeile angezeigt wird, gelangst du auf deine
Profilseite. Hier kannst du deinen Nutzernamen ändern.
</p>
Über deinen Nutzernamen, der in der Kopfzeile angezeigt wird, gelangst du auf deine Profilseite.
Hier kannst du deinen Nutzernamen ändern. </p>
</Col>
<Col sm="4">
<h4>Wie kann ich meine E-Mailadresse ändern?</h4>
<p>
Über deinen Nutzernamen, der in der Kopfzeile angezeigt wird, gelangst du auf deine
Profilseite. Hier kannst du deine E-Mailadresse ändern ändern.
</p>
Über deinen Nutzernamen, der in der Kopfzeile angezeigt wird, gelangst du auf deine Profilseite.
Hier kannst du deine E-Mailadresse ändern ändern. </p>
</Col>
<Col sm="4">
<h4>Wie kann ich mein Passwort ändern?</h4>
<p>
Auf deiner Profilseite findest du einen "Passwort ändern" Button. Auf der sich dann
öffnenden Seite kannst du dein Passwort ändern.
</p>
Auf deiner Profilseite findest du einen "Passwort ändern" Button. Auf der sich dann öffnenden Seite
kannst du dein Passwort ändern. </p>
</Col>
</Row>
</div>
);
</div>);
}
function TournamentFaq() {
return (
<div className="running-text">
return (<div className="running-text">
<h1>Turnier</h1>
<Row>
<Col sm="4">
@ -132,100 +115,85 @@ function TournamentFaq() {
<p>
Um ein Turnier zu erstellen musst du dich zuerst anmelden.</p>
<p>
Über "Turnier erstellen" gelangst du auf die "Turnier erstellen" Seite. Auf dieser kannst du
deinem Turnier einen Namen geben und eine (optionale) Beschreibung hinzufügen. Dann kannst
du dein Turnier <a href="#public-tournament">öffentlich oder privat</a> erstellen, die Teams
für die Spielpaarungen <a href="#randomize-teams">mischen</a> lassen und eine <a href="#groupstage">Gruppenphase</a>
hinzufügen. Im Feld "Teams" kannst du die
teilnehmenden <a href="#add-teams">Teams
eintragen</a> und hinzufügen. </p>
Über "Turnier erstellen" gelangst du auf die "Turnier erstellen" Seite. Auf dieser kannst du deinem
Turnier einen Namen geben und eine (optionale) Beschreibung hinzufügen. Dann kannst du dein
Turnier <a href="#public-tournament">öffentlich oder privat</a> erstellen, die Teams für die
Spielpaarungen <a href="#randomize-teams">mischen</a> lassen und eine <a
href="#groupstage">Gruppenphase</a>
hinzufügen. Im Feld "Teams" kannst du die teilnehmenden <a href="#add-teams">Teams eintragen</a> und
hinzufügen. </p>
<p>
Wenn du die Option Gruppenphase aktiviert hast, kannst du zusätzlich noch die Größe der
Gruppen angeben.
</p>
Wenn du die Option Gruppenphase aktiviert hast, kannst du zusätzlich noch die Größe der Gruppen
angeben. </p>
</Col>
<Col sm="4">
<h4 id="public-tournament">Was ist der Unterschied zwischen einem öffentlichen und einem
privaten Turnier?</h4>
<h4 id="public-tournament">Was ist der Unterschied zwischen einem öffentlichen und einem privaten
Turnier?</h4>
<p>
Standardmäßig ist ein Turnier privat, das bedeutet, dass nur der Turnierersteller und
Zuschauer, die den entsprechenden Turniercode erhalten haben, das Turnier, seine
teilnehmenden Mannschaften, sowie die Spielpaarungen und die jeweiligen Spielstände sehen
können.
</p>
Standardmäßig ist ein Turnier privat, das bedeutet, dass nur der Turnierersteller und Zuschauer, die
den entsprechenden Turniercode erhalten haben, das Turnier, seine teilnehmenden Mannschaften, sowie
die Spielpaarungen und die jeweiligen Spielstände sehen können. </p>
<p>
Wenn du dich entscheidest dein Turnier öffentlich zu erstellen, wird der Turniercode nicht
mehr benötigt, um das Turnier und all seine Informationen einzusehen. Das Turnier wird dann
in der Liste der öffentlichen Turniere angezeigt und kann auch über seinen Namen von jedem
gefunden werden. </p>
Wenn du dich entscheidest dein Turnier öffentlich zu erstellen, wird der Turniercode nicht mehr
benötigt, um das Turnier und all seine Informationen einzusehen. Das Turnier wird dann in der Liste
der öffentlichen Turniere angezeigt und kann auch über seinen Namen von jedem gefunden werden. </p>
<p>
Trotzdem bleibt der Turnierersteller der Einzige, der die Turnierinformationen bearbeiten
und Spielstände eintragen kann.
</p>
Trotzdem bleibt der Turnierersteller der Einzige, der die Turnierinformationen bearbeiten und
Spielstände eintragen kann. </p>
</Col>
<Col sm="4">
<h4 id="randomize-teams">Was bedeutet "Teams mischen"?</h4>
<p>
Die Spielpaarungen werden anhand der Eingabereihenfolge der Teams erstellt. So spielt z.B.
das zuerst eingegebene Team gegen das als zweites eingegebene Team, das als drittes
eingegebene gegen das als viertes eingegebene, und so weiter. </p>
Die Spielpaarungen werden anhand der Eingabereihenfolge der Teams erstellt. So spielt z.B. das
zuerst eingegebene Team gegen das als zweites eingegebene Team, das als drittes eingegebene gegen
das als viertes eingegebene, und so weiter. </p>
<p>
Wenn du das nicht möchtest kannst du die Option "Teams mischen" aktivieren und die
Spielpaarungen werden in einer zufälligen Reihenfolge erstellt.
</p>
Wenn du das nicht möchtest kannst du die Option "Teams mischen" aktivieren und die Spielpaarungen
werden in einer zufälligen Reihenfolge erstellt. </p>
</Col>
<Col sm="4">
<h4 id="groupstage">Was passiert wenn ich die Gruppenphase aktiviere?</h4>
<p>
Grundsätzlich erstellt turnie.re dir einen Spielplan für ein Turnier <strong>ohne</strong>
Gruppenphase und <strong>nur</strong> einer K.O.-Phase. Wenn du eine Gruppenphase spielen
lassen willst, kannst du das aber auch tun. Wenn die Gruppenphase aktiviert ist, werden
deine eingegeben Teams automatisch in Gruppen eingeteilt und auch die Spielpläne für die
einzelnen Gruppen berechnet. </p>
<p>
Bitte beachte, dass die Anzahl der Teams durch die Gruppengröße teilbar sein muss.
Gruppenphase und <strong>nur</strong> einer K.O.-Phase. Wenn du eine Gruppenphase spielen lassen
willst, kannst du das aber auch tun. Wenn die Gruppenphase aktiviert ist, werden deine eingegeben
Teams automatisch in Gruppen eingeteilt und auch die Spielpläne für die einzelnen Gruppen berechnet.
</p>
<p>
Bitte beachte, dass die Anzahl der Teams durch die Gruppengröße teilbar sein muss. </p>
</Col>
<Col sm="4">
<h4 id="add-teams">Wie kann ich Teams hinzufügen?</h4>
<p>
Auf der "Turnier erstellen" Seite kannst du im Feld "Teams" deine Teams eintragen. </p>
<p>
Du kannst die Teamnamen einzeln eingeben und dann über drücken der Entertaste oder über den
Button "Team hinzufügen" das Team deinem Turnier hinzufügen. Du kannst aber auch deine Teams
als eine mit Kommas getrennte Liste eingeben und dann hinzufügen.
</p>
Du kannst die Teamnamen einzeln eingeben und dann über drücken der Entertaste oder über den Button
"Team hinzufügen" das Team deinem Turnier hinzufügen. Du kannst aber auch deine Teams als eine mit
Kommas getrennte Liste eingeben und dann hinzufügen. </p>
</Col>
<Col sm="4">
<h4>Wie starte ich ein Spiel?</h4>
<p>
Auf der Turnierübersicht Seite gibt es für jede Partie einen "Spiel starten" Button. Über
diesen kannst du einfach das jeweilige Spiel starten.
</p>
Auf der Turnierübersicht Seite gibt es für jede Partie einen "Spiel starten" Button. Über diesen
kannst du einfach das jeweilige Spiel starten. </p>
</Col>
<Col sm="4">
<h4>Wie trage ich einen Spielstand für eine Partie ein?</h4>
<p>
Auf der Turnierübersicht Seite gibt es für jede Partie einen "Spielstand ändern" Button.
Über diesen kannst du einfach den Spielstand eintragen. In dem Popup, das sich öffnet kannst
du den aktuellen Spielstand eintragen und angeben, ob das Spiel noch läuft oder schon
beendet ist.
</p>
Auf der Turnierübersicht Seite gibt es für jede Partie einen "Spielstand ändern" Button. Über diesen
kannst du einfach den Spielstand eintragen. In dem Popup, das sich öffnet kannst du den aktuellen
Spielstand eintragen und angeben, ob das Spiel noch läuft oder schon beendet ist. </p>
<h4>Gibt es in der Gruppenphase eine Blitztabelle?</h4>
<p>
Ja, die in der Gruppenphase dargestellte Tabelle stellt eine Blitztabelle dar.
</p>
Ja, die in der Gruppenphase dargestellte Tabelle stellt eine Blitztabelle dar. </p>
</Col>
</Row>
</div>
);
</div>);
}
export default class FaqPage extends React.Component {
render() {
return (
<div>
return (<div>
<Head>
<title>FAQ: turnie.re</title>
</Head>
@ -233,7 +201,6 @@ export default class FaqPage extends React.Component {
<BigImage text="FAQ"/>
<Main/>
<Footer/>
</div>
);
</div>);
}
}

76
pages/imprint.js
View File

@ -10,16 +10,13 @@ import 'bootstrap/dist/css/bootstrap.min.css';
import '../static/everypage.css';
function Main() {
return (
<div className="main running-text">
return (<div className="main running-text">
<ImprintText/>
</div>
);
</div>);
}
function ImprintText() {
return (
<Container>
return (<Container>
<h3>
Angaben gemäß §5 TMG:
</h3>
@ -40,44 +37,60 @@ function ImprintText(){
<h3>Haftungsausschluss</h3>
<h4>Haftung für Inhalte</h4>
<p>
Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität
der Inhalte können wir jedoch keine Gewähr übernehmen. Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene
Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als
Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach
Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen zur Entfernung oder Sperrung
der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist
jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von
Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit
und Aktualität
der Inhalte können wir jedoch keine Gewähr übernehmen. Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG
für eigene
Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir
als
Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu
überwachen oder nach
Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen zur Entfernung
oder Sperrung
der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine
diesbezügliche Haftung ist
jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden
von
entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.
</p>
<h4>Haftung für Links</h4>
<p>
Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können
wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der
jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung
auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar. Eine
permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung
Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss haben.
Deshalb können
wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist
stets der
jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt
der Verlinkung
auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht
erkennbar. Eine
permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte einer
Rechtsverletzung
nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Links umgehend entfernen.
</p>
<h4>Urheberrecht</h4>
<p>
Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht.
Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes
bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind
nur für den privaten, nicht kommerziellen Gebrauch gestattet. Soweit die Inhalte auf dieser Seite nicht vom Betreiber
erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche
gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen
entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.
Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen
Urheberrecht.
Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des
Urheberrechtes
bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser
Seite sind
nur für den privaten, nicht kommerziellen Gebrauch gestattet. Soweit die Inhalte auf dieser Seite nicht
vom Betreiber
erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als
solche
gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um
einen
entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend
entfernen.
</p>
</Container>
);
</Container>);
}
export default class ImprintPage extends React.Component {
render() {
return (
<div>
return (<div>
<Head>
<title>Impressum: turnie.re</title>
</Head>
@ -85,7 +98,6 @@ export default class ImprintPage extends React.Component {
<BigImage text="Impressum / Haftungs&shy;ausschluss"/>
<Main/>
<Footer/>
</div>
);
</div>);
}
}

81
pages/index.js
View File

@ -2,10 +2,7 @@ import Head from 'next/head';
import React from 'react';
import {connect} from 'react-redux';
import {
Alert,
Button,
Card,
CardBody
Alert, Button, Card, CardBody
} from 'reactstrap';
import {TurniereNavigation} from '../js/components/Navigation';
@ -18,60 +15,49 @@ import '../static/everypage.css';
import '../static/css/index.css';
function Main() {
return (
<div className="main">
return (<div className="main">
<Marketing/>
<MainPromotedLinks/>
<MainBottomSummary/>
</div>
);
</div>);
}
function Marketing() {
return (
<div className="container marketing my-5">
return (<div className="container marketing my-5">
<div className="row">
<div className="col-lg-4">
<h2>Für jede Sportart</h2>
<p>
Egal, um welche Sportart es geht: Solange du mit mehreren Mannschaften ein Turnier veranstalten
willst, kann
turnie.re dir ein Turnier berechnen!
willst, kann turnie.re dir ein Turnier berechnen!
</p>
</div>
<div className="col-lg-4">
<h2>Beliebige Anzahl Teams</h2>
<p>
Egal, wie viele Teams du gerne in deinem Turnier hast, wir regeln das. Füge einfach deine Teams
hinzu
und schon sagen wir dir, wer gegen wen spielt.
</p>
hinzu und schon sagen wir dir, wer gegen wen spielt. </p>
</div>
<div className="col-lg-4">
<h2>Kostenlos</h2>
<p>
turnie.re ist ein kostenloser Service! Wir erheben keine Kosten und sind nur darauf aus, dein
Turnier-Management so einfach wie möglich zu gestalten.
</p>
Turnier-Management so einfach wie möglich zu gestalten. </p>
</div>
</div>
<Betawarning/>
</div>
);
</div>);
}
function Betawarning() {
return (
<Alert color="danger" className="shadow-sm mt-4" fade={false}>
return (<Alert color="danger" className="shadow-sm mt-4" fade={false}>
<h4 className="alert-heading custom-font">Public Beta</h4>
<p>
Diese Website ist noch in der Entwicklung.<br/>
Bei Problemen fülle bitte <a href="#" id="bugLink" className="alert-link">dieses </a>
und für Feedback <a href="#" id="feedbackLink" className="alert-link">dieses</a> Formular aus.
</p>
</Alert>
);
und für Feedback <a href="#" id="feedbackLink" className="alert-link">dieses</a> Formular aus. </p>
</Alert>);
}
function MainBottomSummary() {
@ -84,17 +70,15 @@ function MainBottomSummary() {
turnie.re berechnet dir ein Turnier. Allein aus den Team-Namen berechnen wir dir einen kompletten
Spielplan,
den du auch gleich mit allen Leuten teilen kannst, ohne dir Gedanken machen zu müssen, wer gegen wen
spielen
muss.<br/>
Du trägst ein, wer gewonnen hat, und turnie.re sagt, wer als nächstes spielt.
</p>
spielen muss.<br/>
Du trägst ein, wer gewonnen hat, und turnie.re sagt, wer als nächstes spielt. </p>
</div>
<div className="col-lg-6">
<h2>Ich habe einen Turniercode bekommen. Was nun?</h2>
<p>
Der Turniercode führt dich direkt zu einem Turnier. Gebe dafür den Code
<a className="text-success" href="#turniercode-form">oben</a> ein, dann wirst du sofort weitergeleitet.
</p>
Der Turniercode führt dich direkt zu einem Turnier. Gebe dafür den Code <a className="text-success"
href="#turniercode-form">oben</a> ein,
dann wirst du sofort weitergeleitet. </p>
</div>
</div>
<div className="my-5 text-center">
@ -114,8 +98,7 @@ function MainPromotedLinks() {
}
function PromotedLinkTournamentCode() {
return (
<Card className="container shadow-lg mt-3">
return (<Card className="container shadow-lg mt-3">
<CardBody className="row">
<form id="turniercode-form" className="col-lg-4" action="/t" method="get">
<input className="form-control" type="search" name="code" placeholder="Turnier-Code"/>
@ -125,30 +108,24 @@ function PromotedLinkTournamentCode() {
<p>Gib hier einen Turnier Code ein, um direkt zum entsprechenden Turnier zu gelangen.</p>
</div>
</CardBody>
</Card>
);
</Card>);
}
function PromotedLinkListTournaments() {
return (
<Card className="container shadow-lg my-4">
return (<Card className="container shadow-lg my-4">
<CardBody className="row">
<div className="col-lg-4 pb-3">
<Button outline color="success" className="w-100" href="/list">Alle Turniere anzeigen</Button>
</div>
<div className="col-lg-8">
<p>
Hier findest du alle öffentlichen Turniere. Wenn du ein Turnier suchst, den Turniercode aber
nicht hast, wirst
du wahrscheinlich hier fündig.
</p>
Hier findest du alle öffentlichen Turniere. Wenn du ein Turnier suchst, den Turniercode aber nicht
hast, wirst du wahrscheinlich hier fündig. </p>
<p>
Wenn du eingeloggt bist, findest du hier auch deine eigenen Turniere.
</p>
Wenn du eingeloggt bist, findest du hier auch deine eigenen Turniere. </p>
</div>
</CardBody>
</Card>
);
</Card>);
}
function PromotedLinkCreateTournament() {
@ -156,9 +133,8 @@ function PromotedLinkCreateTournament() {
<CardBody className="row">
<div className="col-lg-8">
<p>
<strong>Einfach ausprobieren:</strong> Einen Turnier-Namen, ein paar Team-Namen, und schon
kriegst du ein
komplettes Turnier!
<strong>Einfach ausprobieren:</strong> Einen Turnier-Namen, ein paar Team-Namen, und schon kriegst
du ein komplettes Turnier!
</p>
</div>
<div className="col-lg-4">
@ -170,10 +146,8 @@ function PromotedLinkCreateTournament() {
class Index extends React.Component {
render() {
return (
<div>
return (<div>
<Head>
<title>turnie.re</title>
</Head>
@ -181,8 +155,7 @@ class Index extends React.Component {
<BigImage text="Einfach Turniere organisieren"/>
<Main/>
<Footer/>
</div>
);
</div>);
}
}

12
pages/list.js
View File

@ -10,10 +10,8 @@ import TournamentList from '../js/components/TournamentList';
import {connect} from 'react-redux';
export default class PublicTournamentsPage extends React.Component {
render() {
return (
<div className="main generic-fullpage-bg">
return (<div className="main generic-fullpage-bg">
<Head>
<title>Öffentliche Turniere: turnie.re</title>
</Head>
@ -22,8 +20,7 @@ export default class PublicTournamentsPage extends React.Component {
<PublicTournamentPageContent/>
</div>
<Footer/>
</div>
);
</div>);
}
}
@ -32,9 +29,7 @@ function mapStateToProperties(state) {
return {isSignedIn};
}
const PublicTournamentPageContent = connect(
mapStateToProperties,
)(PublicTournaments);
const PublicTournamentPageContent = connect(mapStateToProperties)(PublicTournaments);
function PublicTournaments(props) {
if (props.isSignedIn) {
@ -46,7 +41,6 @@ function PublicTournaments(props) {
<a href='/private' className="btn btn-success shadow">zu den privaten Turnieren</a>
</Container>
</div>);
} else {
return (<Container className='py-5'>
<PublicTournamentsCard/>

7
pages/login.js
View File

@ -8,10 +8,8 @@ import { Login } from '../js/components/Login';
import '../static/everypage.css';
export default class LoginPage extends React.Component {
render() {
return (
<div className="main generic-fullpage-bg">
return (<div className="main generic-fullpage-bg">
<Head>
<title>Login: turnie.re</title>
</Head>
@ -20,7 +18,6 @@ export default class LoginPage extends React.Component {
<Login/>
</div>
<Footer/>
</div>
);
</div>);
}
}

412
pages/privacy.js
View File

@ -11,31 +11,23 @@ import 'bootstrap/dist/css/bootstrap.min.css';
import '../static/everypage.css';
function Main() {
return (
<div className="main running-text">
return (<div className="main running-text">
<PrivacyText/>
</div>
);
</div>);
}
function PrivacyText() {
return (
<Container>
return (<Container>
<p>
Die nachfolgende Datenschutzerklärung gilt für die Nutzung unseres Online-Angebots turnie.re (nachfolgend
„Website“).<br/>
Wir messen dem Datenschutz große Bedeutung bei. Die Erhebung und Verarbeitung Ihrer personenbezogenen Daten
geschieht
unter Beachtung der geltenden datenschutzrechtlichen Vorschriften, insbesondere der
Datenschutzgrundverordnung
(DSGVO).
</p>
geschieht unter Beachtung der geltenden datenschutzrechtlichen Vorschriften, insbesondere der
Datenschutzgrundverordnung (DSGVO). </p>
<h3>1 Verantwortlicher</h3>
<p>
Verantwortlicher für die Erhebung, Verarbeitung und Nutzung Ihrer personenbezogenen Daten im Sinne von Art.
4 Nr. 7
DSGVO ist
</p>
4 Nr. 7 DSGVO ist </p>
<p>
Jonas Seydel<br/>
August-Euler-Weg 3<br/>
@ -45,16 +37,12 @@ function PrivacyText(){
</p>
<p>
Sofern Sie der Erhebung, Verarbeitung oder Nutzung Ihrer Daten durch uns nach Maßgabe dieser
Datenschutzbestimmungen
insgesamt oder für einzelne Maßnahmen widersprechen wollen, können Sie Ihren Widerspruch an den
Verantwortlichen
richten.<br/>
Sie können diese Datenschutzerklärung jederzeit speichern und ausdrucken.
</p>
Datenschutzbestimmungen insgesamt oder für einzelne Maßnahmen widersprechen wollen, können Sie Ihren
Widerspruch an den Verantwortlichen richten.<br/>
Sie können diese Datenschutzerklärung jederzeit speichern und ausdrucken. </p>
<h3>2 Allgemeine Zwecke der Verarbeitung</h3>
<p>
Wir verwenden personenbezogene Daten zum Zweck des Betriebs der Website.
</p>
Wir verwenden personenbezogene Daten zum Zweck des Betriebs der Website. </p>
<h3>3 Welche Daten wir verwenden und warum</h3>
<h4>3.1 Hosting</h4>
<p>
@ -66,20 +54,15 @@ function PrivacyText(){
Hierbei verarbeiten wir, bzw. unser Hostinganbieter Bestandsdaten, Kontaktdaten, Inhaltsdaten,
Vertragsdaten,
Nutzungsdaten, Meta- und Kommunikationsdaten von Kunden, Interessenten und Besuchern dieser Website auf
Grundlage
unserer berechtigten Interessen an einer effizienten und sicheren Zurverfügungstellung unserer Website gem.
Art. 6
Abs. 1 S. 1 f) DSGVO i.V.m. Art. 28 DSGVO.
</p>
Grundlage unserer berechtigten Interessen an einer effizienten und sicheren Zurverfügungstellung unserer
Website gem. Art. 6 Abs. 1 S. 1 f) DSGVO i.V.m. Art. 28 DSGVO. </p>
<h4>3.2 Zugriffsdaten</h4>
<p>
Wir sammeln Informationen über Sie, wenn Sie diese Website nutzen. Wir erfassen automatisch Informationen
über Ihr
Nutzungsverhalten und Ihre Interaktion mit uns und registrieren Daten zu Ihrem Computer oder Mobilgerät. Wir
erheben,
über Ihr Nutzungsverhalten und Ihre Interaktion mit uns und registrieren Daten zu Ihrem Computer oder
Mobilgerät. Wir erheben,
speichern und nutzen Daten über jeden Zugriff auf unsere Website (sogenannte Serverlogfiles). Zu den
Zugriffsdaten
gehören:
Zugriffsdaten gehören:
</p>
<ul>
<li>Name und URL der abgerufenen Datei</li>
@ -95,60 +78,40 @@ function PrivacyText(){
</ul>
<p>
Wir nutzen diese Protokolldaten ohne Zuordnung zu Ihrer Person oder sonstiger Profilerstellung für
statistische
Auswertungen zum Zweck des Betriebs, der Sicherheit und der Optimierung unserer Website, aber auch zur
anonymen
Erfassung der Anzahl der Besucher auf unserer Website (traffic) sowie zum Umfang und zur Art der Nutzung
unserer
Website und Dienste, ebenso zu Abrechnungszwecken, um die Anzahl der von Kooperationspartnern erhaltenen
Clicks zu
messen. Aufgrund dieser Informationen können wir personalisierte und standortbezogene Inhalte zur Verfügung
stellen
und den Datenverkehr analysieren, Fehler suchen und beheben und unsere Dienste verbessern.<br/>
statistische Auswertungen zum Zweck des Betriebs, der Sicherheit und der Optimierung unserer Website, aber
auch zur anonymen Erfassung der Anzahl der Besucher auf unserer Website (traffic) sowie zum Umfang und zur
Art der Nutzung unserer Website und Dienste, ebenso zu Abrechnungszwecken, um die Anzahl der von
Kooperationspartnern erhaltenen Clicks zu messen. Aufgrund dieser Informationen können wir personalisierte
und standortbezogene Inhalte zur Verfügung stellen und den Datenverkehr analysieren, Fehler suchen und
beheben und unsere Dienste verbessern.<br/>
Hierin liegt auch unser berechtigtes Interesse gemäß Art 6 Abs. 1 S. 1 f) DSGVO.<br/>
Wir behalten uns vor, die Protokolldaten nachträglich zu überprüfen, wenn aufgrund konkreter Anhaltspunkte
der
berechtigte Verdacht einer rechtswidrigen Nutzung besteht. IP-Adressen speichern wir für einen begrenzten
Zeitraum in
den Logfiles, wenn dies für Sicherheitszwecke erforderlich oder für die Leistungserbringung oder die
Abrechnung einer
Leistung nötig ist, z. B. wenn Sie eines unserer Angebote nutzen. Nach Abbruch des Vorgangs der Bestellung
oder nach
Zahlungseingang löschen wir die IP-Adresse, wenn diese für Sicherheitszwecke nicht mehr erforderlich ist.
IP-Adressen
speichern wir auch dann, wenn wir den konkreten Verdacht einer Straftat im Zusammenhang mit der Nutzung
unserer
Website haben. Außerdem speichern wir als Teil Ihres Accounts das Datum Ihres letzten Besuchs (z.B. bei
Registrierung,
Login, Klicken von Links etc.).
</p>
der berechtigte Verdacht einer rechtswidrigen Nutzung besteht. IP-Adressen speichern wir für einen
begrenzten Zeitraum in den Logfiles, wenn dies für Sicherheitszwecke erforderlich oder für die
Leistungserbringung oder die Abrechnung einer Leistung nötig ist, z. B. wenn Sie eines unserer Angebote
nutzen. Nach Abbruch des Vorgangs der Bestellung oder nach Zahlungseingang löschen wir die IP-Adresse, wenn
diese für Sicherheitszwecke nicht mehr erforderlich ist. IP-Adressen speichern wir auch dann, wenn wir den
konkreten Verdacht einer Straftat im Zusammenhang mit der Nutzung unserer Website haben. Außerdem speichern
wir als Teil Ihres Accounts das Datum Ihres letzten Besuchs (z.B. bei Registrierung,
Login, Klicken von Links etc.). </p>
<h4>3.3 Cookies</h4>
<p>
Wir verwenden sogenannte Session-Cookies, um unsere Website zu optimieren. Ein Session-Cookie ist eine
kleine
Textdatei, die von den jeweiligen Servern beim Besuch einer Internetseite verschickt und auf Ihrer
Festplatte
zwischengespeichert wird. Diese Datei als solche enthält eine sogenannte Session-ID, mit welcher sich
verschiedene
Anfragen Ihres Browsers der gemeinsamen Sitzung zuordnen lassen. Dadurch kann Ihr Rechner wiedererkannt
werden, wenn
Sie auf unsere Website zurückkehren. Diese Cookies werden gelöscht, nachdem Sie Ihren Browser schließen. Sie
dienen z.
B. dazu, dass Sie die Warenkorbfunktion über mehrere Seiten hinweg nutzen können.<br/>
kleine Textdatei, die von den jeweiligen Servern beim Besuch einer Internetseite verschickt und auf Ihrer
Festplatte zwischengespeichert wird. Diese Datei als solche enthält eine sogenannte Session-ID, mit welcher
sich verschiedene Anfragen Ihres Browsers der gemeinsamen Sitzung zuordnen lassen. Dadurch kann Ihr Rechner
wiedererkannt werden, wenn Sie auf unsere Website zurückkehren. Diese Cookies werden gelöscht, nachdem Sie
Ihren Browser schließen. Sie dienen z. B. dazu, dass Sie die Warenkorbfunktion über mehrere Seiten hinweg
nutzen können.<br/>
Wir verwenden in geringem Umfang auch persistente Cookies (ebenfalls kleine Textdateien, die auf Ihrem
Endgerät
abgelegt werden), die auf Ihrem Endgerät verbleiben und es uns ermöglichen, Ihren Browser beim nächsten
Besuch
wiederzuerkennen. Diese Cookies werden auf Ihrer Festplatte gespeichert und löschen sich nach der
vorgegebenen Zeit
von allein. Ihre Lebensdauer beträgt 1 Monat bis 10 Jahre. So können wir Ihnen unser Angebot
nutzerfreundlicher,
Endgerät abgelegt werden), die auf Ihrem Endgerät verbleiben und es uns ermöglichen, Ihren Browser beim
nächsten Besuch wiederzuerkennen. Diese Cookies werden auf Ihrer Festplatte gespeichert und löschen sich
nach der vorgegebenen Zeit von allein. Ihre Lebensdauer beträgt 1 Monat bis 10 Jahre. So können wir Ihnen
unser Angebot nutzerfreundlicher,
effektiver und sicherer präsentieren und Ihnen beispielsweise speziell auf Ihre Interessen abgestimmte
Informationen
auf der Seite anzeigen.<br/>
Unser berechtigtes Interesse an der Nutzung der Cookies gemäß Art 6 Abs. 1 S. 1 f) DSGVO liegt darin, unsere
Website
nutzerfreundlicher, effektiver und sicherer zu machen.<br/>
Informationen auf der Seite anzeigen.<br/>
Unser berechtigtes Interesse an der Nutzung der Cookies gemäß Art 6 Abs. 1 S. 1 f) DSGVO liegt darin,
unsere Website nutzerfreundlicher, effektiver und sicherer zu machen.<br/>
In den Cookies werden etwa folgende Daten und Informationen gespeichert:
</p>
<ul>
@ -162,74 +125,53 @@ function PrivacyText(){
<p>
Bei Aktivierung des Cookies wird diesem eine Identifikationsnummer zugewiesen und eine Zuordnung Ihrer
personenbezogenen Daten zu dieser Identifikationsnummer wird nicht vorgenommen. Ihr Name, Ihre IP-Adresse
oder
ähnliche Daten, die eine Zuordnung des Cookies zu Ihnen ermöglichen würden, werden nicht in den Cookie
eingelegt. Auf
Basis der Cookie-Technologie erhalten wir lediglich pseudonymisierte Informationen, beispielsweise darüber,
welche
Seiten unseres Shops besucht wurden, welche Produkte angesehen wurden, etc.<br/>
oder ähnliche Daten, die eine Zuordnung des Cookies zu Ihnen ermöglichen würden, werden nicht in den Cookie
eingelegt. Auf Basis der Cookie-Technologie erhalten wir lediglich pseudonymisierte Informationen,
beispielsweise darüber,
welche Seiten unseres Shops besucht wurden, welche Produkte angesehen wurden, etc.<br/>
Sie können Ihren Browser so einstellen, dass Sie über das Setzen von Cookies vorab informiert werden und im
Einzelfall
entscheiden können, ob Sie die Annahme von Cookies für bestimmte Fälle oder generell ausschließen, oder dass
Cookies
komplett verhindert werden. Dadurch kann die Funktionalität der Website eingeschränkt werden.
</p>
Einzelfall entscheiden können, ob Sie die Annahme von Cookies für bestimmte Fälle oder generell
ausschließen, oder dass Cookies komplett verhindert werden. Dadurch kann die Funktionalität der Website
eingeschränkt werden. </p>
<h4>3.4 Nutzerkonto</h4>
<p>Sie können auf unserer Website ein Nutzerkonto anlegen. Wünschen Sie dies, so benötigen wir die beim Login
abgefragten
personenbezogenen Daten. Beim späteren Einloggen werden nur Ihre Email bzw. Benutzername und das von Ihnen
gewählte
Passwort benötigt.<br/>
abgefragten personenbezogenen Daten. Beim späteren Einloggen werden nur Ihre Email bzw. Benutzername und das
von Ihnen gewählte Passwort benötigt.<br/>
Für die Neuregistrierung erheben wir Stammdaten (z. B. Name, Adresse), Kommunikationsdaten (z. B.
E-Mail-Adresse)
sowie Zugangsdaten (Benutzername u. Passwort).<br/>
Sie können ein einmal angelegtes Nutzerkonto jederzeit von uns löschen lassen, ohne dass hierfür andere
als die
Übermittlungskosten nach den Basistarifen entstehen. Eine Mitteilung in Textform an die unter Ziffer 1
genannten
Kontaktdaten (z.B. E-Mail, Fax, Brief) reicht hierfür aus. Wir werden dann Ihre gespeicherten
personenbezogenen Daten
löschen, soweit wir diese nicht noch zur Abwicklung von Bestellungen oder aufgrund gesetzlicher
Aufbewahrungspflichten
speichern müssen.<br/>
Sie können ein einmal angelegtes Nutzerkonto jederzeit von uns löschen lassen, ohne dass hierfür andere als
die Übermittlungskosten nach den Basistarifen entstehen. Eine Mitteilung in Textform an die unter Ziffer 1
genannten Kontaktdaten (z.B. E-Mail, Fax, Brief) reicht hierfür aus. Wir werden dann Ihre gespeicherten
personenbezogenen Daten löschen, soweit wir diese nicht noch zur Abwicklung von Bestellungen oder aufgrund
gesetzlicher Aufbewahrungspflichten speichern müssen.<br/>
Rechtgrundlage für die Verarbeitung dieser Daten ist Ihre Einwilligung gemäß Art. 6 Abs. 1 S. 1 a)
DSGVO.
</p>
DSGVO. </p>
<h4>3.5 E-Mail Kontakt</h4>
<p>
Wenn Sie mit uns in Kontakt treten (z. B. per Kontaktformular oder E-Mail), verarbeiten wir Ihre Angaben zur
Bearbeitung der Anfrage sowie für den Fall, dass Anschlussfragen entstehen.
Erfolgt die Datenverarbeitung zur Durchführung vorvertraglicher Maßnahmen, die auf Ihre Anfrage hin
erfolgen, bzw.,
Bearbeitung der Anfrage sowie für den Fall, dass Anschlussfragen entstehen. Erfolgt die Datenverarbeitung
zur Durchführung vorvertraglicher Maßnahmen, die auf Ihre Anfrage hin erfolgen, bzw.,
wenn Sie bereits unser Kunde sind, zur Durchführung des Vertrages, ist Rechtsgrundlage für diese
Datenverarbeitung
Art. 6 Abs. 1 S. 1 b) DSGVO.
Weitere personenbezogene Daten verarbeiten wir nur, wenn Sie dazu einwilligen (Art. 6 Abs. 1 S. 1 a) DSGVO)
oder wir
ein berechtigtes Interesse an der Verarbeitung Ihrer Daten haben (Art. 6 Abs. 1 S. 1 f) DSGVO). Ein
berechtigtes
Interesse liegt z. B. darin, auf Ihre E-Mail zu antworten.
</p>
Datenverarbeitung Art. 6 Abs. 1 S. 1 b) DSGVO. Weitere personenbezogene Daten verarbeiten wir nur, wenn Sie
dazu einwilligen (Art. 6 Abs. 1 S. 1 a)
DSGVO)
oder wir ein berechtigtes Interesse an der Verarbeitung Ihrer Daten haben (Art. 6 Abs. 1 S. 1 f) DSGVO). Ein
berechtigtes Interesse liegt z. B. darin, auf Ihre E-Mail zu antworten. </p>
<h3>4 Speicherdauer</h3>
<p>
Sofern nicht spezifisch angegeben speichern wir personenbezogene Daten nur so lange, wie dies zur Erfüllung
der
verfolgten Zwecke notwendig ist.<br/>
der verfolgten Zwecke notwendig ist.<br/>
In einigen Fällen sieht der Gesetzgeber die Aufbewahrung von personenbezogenen Daten vor, etwa im Steuer-
oder
Handelsrecht. In diesen Fällen werden die Daten von uns lediglich für diese gesetzlichen Zwecke weiter
oder Handelsrecht. In diesen Fällen werden die Daten von uns lediglich für diese gesetzlichen Zwecke weiter
gespeichert,
aber nicht anderweitig verarbeitet und nach Ablauf der gesetzlichen Aufbewahrungsfrist gelöscht.
</p>
aber nicht anderweitig verarbeitet und nach Ablauf der gesetzlichen Aufbewahrungsfrist gelöscht. </p>
<h3>5 Ihre Rechte als von der Datenverarbeitung Betroffener</h3>
<p>
Nach den anwendbaren Gesetzen haben Sie verschiedene Rechte bezüglich Ihrer personenbezogenen Daten. Möchten
Sie diese
Rechte geltend machen, so richten Sie Ihre Anfrage bitte per E-Mail oder per Post unter eindeutiger
Identifizierung
Ihrer Person an die in Ziffer 1 genannte Adresse.<br/>
Nachfolgend finden Sie eine Übersicht über Ihre Rechte.
</p>
Sie diese Rechte geltend machen, so richten Sie Ihre Anfrage bitte per E-Mail oder per Post unter
eindeutiger Identifizierung Ihrer Person an die in Ziffer 1 genannte Adresse.<br/>
Nachfolgend finden Sie eine Übersicht über Ihre Rechte. </p>
<h4>5.1 Recht auf Bestätigung und Auskunft</h4>
<p>
@ -238,58 +180,46 @@ function PrivacyText(){
Im Einzelnen:<br/>
Sie haben jederzeit das Recht, von uns eine Bestätigung darüber zu erhalten, ob Sie betreffende
personenbezogene Daten
verarbeitet werden. Ist dies der Fall, so haben Sie das Recht, von uns eine unentgeltliche Auskunft über die
zu Ihnen
gespeicherten personenbezogenen Daten nebst einer Kopie dieser Daten zu verlangen. Des Weiteren besteht ein
Recht auf
folgende Informationen:
personenbezogene Daten verarbeitet werden. Ist dies der Fall, so haben Sie das Recht, von uns eine
unentgeltliche Auskunft über die zu Ihnen gespeicherten personenbezogenen Daten nebst einer Kopie dieser
Daten zu verlangen. Des Weiteren besteht ein Recht auf folgende Informationen:
</p>
<ol>
<li>die Verarbeitungszwecke;</li>
<li>die Kategorien personenbezogener Daten, die verarbeitet werden;</li>
<li>die Empfänger oder Kategorien von Empfängern, gegenüber denen die personenbezogenen Daten offengelegt
worden sind
oder noch offengelegt werden, insbesondere bei Empfängern in Drittländern oder bei internationalen
Organisationen;
worden sind oder noch offengelegt werden, insbesondere bei Empfängern in Drittländern oder bei
internationalen Organisationen;
</li>
<li>falls möglich, die geplante Dauer, für die die personenbezogenen Daten gespeichert werden, oder, falls
dies nicht
möglich ist, die Kriterien für die Festlegung dieser Dauer;
<li>falls möglich, die geplante Dauer, für die die personenbezogenen Daten gespeichert werden, oder,
falls dies nicht möglich ist, die Kriterien für die Festlegung dieser Dauer;
</li>
<li>das Bestehen eines Rechts auf Berichtigung oder Löschung der Sie betreffenden personenbezogenen Daten
oder auf
Einschränkung der Verarbeitung durch den Verantwortlichen oder eines Widerspruchsrechts gegen diese
Verarbeitung;
oder auf Einschränkung der Verarbeitung durch den Verantwortlichen oder eines Widerspruchsrechts gegen
diese Verarbeitung;
</li>
<li>das Bestehen eines Beschwerderechts bei einer Aufsichtsbehörde;</li>
<li>wenn die personenbezogenen Daten nicht bei Ihnen erhoben werden, alle verfügbaren Informationen über die
Herkunft
der Daten;
Herkunft der Daten;
</li>
<li>das Bestehen einer automatisierten Entscheidungsfindung einschließlich Profiling gemäß Art. 22 Abs. 1
und 4 DSGVO
und – zumindest in diesen Fällen – aussagekräftige Informationen über die involvierte Logik sowie die
Tragweite
und die angestrebten Auswirkungen einer derartigen Verarbeitung für Sie.
und 4 DSGVO und – zumindest in diesen Fällen – aussagekräftige Informationen über die involvierte Logik
sowie die Tragweite und die angestrebten Auswirkungen einer derartigen Verarbeitung für Sie.
</li>
</ol>
<p>
Werden personenbezogene Daten an ein Drittland oder an eine internationale Organisation übermittelt, so
haben Sie das
Recht, über die geeigneten Garantien gemäß Art. 46 DSGVO im Zusammenhang mit der Übermittlung unterrichtet
zu werden.
</p>
haben Sie das Recht, über die geeigneten Garantien gemäß Art. 46 DSGVO im Zusammenhang mit der Übermittlung
unterrichtet zu werden. </p>
<h4>5.2 Recht auf Berichtigung</h4>
<p>
Sie haben das Recht, von uns die Berichtigung und ggf. auch Vervollständigung Sie betreffender
personenbezogener Daten
zu verlangen.<br/>
personenbezogener Daten zu verlangen.<br/>
Im Einzelnen:<br/>
Sie haben das Recht, von uns unverzüglich die Berichtigung Sie betreffender unrichtiger personenbezogener
Daten zu
verlangen. Unter Berücksichtigung der Zwecke der Verarbeitung haben Sie das Recht, die Vervollständigung
unvollständiger personenbezogener Daten – auch mittels einer ergänzenden Erklärung – zu verlangen.<br/>
Daten zu verlangen. Unter Berücksichtigung der Zwecke der Verarbeitung haben Sie das Recht, die
Vervollständigung unvollständiger personenbezogener Daten – auch mittels einer ergänzenden Erklärung – zu
verlangen.<br/>
</p>
<h4>5.3 Recht auf Löschung ("Recht auf Vergessenwerden")</h4>
@ -297,10 +227,9 @@ function PrivacyText(){
In einer Reihe von Fällen sind wir verpflichtet, Sie betreffende personenbezogene Daten zu löschen.<br/>
Im Einzelnen:<br/>
Sie haben gemäß Art. 17 Abs. 1 DSGVO das Recht, von uns zu verlangen, dass Sie betreffende personenbezogene
Daten
unverzüglich gelöscht werden, und wir sind verpflichtet, personenbezogene Daten unverzüglich zu löschen,
sofern einer
der folgenden Gründe zutrifft:
Daten unverzüglich gelöscht werden, und wir sind verpflichtet, personenbezogene Daten unverzüglich zu
löschen,
sofern einer der folgenden Gründe zutrifft:
</p>
<ol>
<li>Die personenbezogenen Daten sind für die Zwecke, für die sie erhoben oder auf sonstige Weise verarbeitet
@ -308,58 +237,45 @@ function PrivacyText(){
nicht mehr notwendig.
</li>
<li>Sie widerrufen Ihre Einwilligung, auf die sich die Verarbeitung gemäß Art. 6 Abs. 1 S. 1 a) DSGVO oder
Art. 9 Abs.
2 a) DSGVO stützte, und es fehlt an einer anderweitigen Rechtsgrundlage für die Verarbeitung.
Art. 9 Abs. 2 a) DSGVO stützte, und es fehlt an einer anderweitigen Rechtsgrundlage für die
Verarbeitung.
</li>
<li>Sie legen gemäß Art. 21 Abs. 1 DSGVO Widerspruch gegen die Verarbeitung ein und es liegen keine
vorrangigen
berechtigten Gründe für die Verarbeitung vor, oder Sie legen gemäß Art. 21 Abs. 2 DSGVO Widerspruch
gegen die
Verarbeitung ein.
vorrangigen berechtigten Gründe für die Verarbeitung vor, oder Sie legen gemäß Art. 21 Abs. 2 DSGVO
Widerspruch gegen die Verarbeitung ein.
</li>
<li>Die personenbezogenen Daten wurden unrechtmäßig verarbeitet.</li>
<li>Die Löschung der personenbezogenen Daten ist zur Erfüllung einer rechtlichen Verpflichtung nach dem
Unionsrecht
oder dem Recht der Mitgliedstaaten erforderlich, dem wir unterliegen.
Unionsrecht oder dem Recht der Mitgliedstaaten erforderlich, dem wir unterliegen.
</li>
<li>Die personenbezogenen Daten wurden in Bezug auf angebotene Dienste der Informationsgesellschaft gemäß
Art. 8 Abs.
1 DSGVO erhoben.
Art. 8 Abs. 1 DSGVO erhoben.
</li>
</ol>
<p>
Haben wir die personenbezogenen Daten öffentlich gemacht und sind wir gemäß Art. 17 Abs. 1 DSGVO zu deren
Löschung
verpflichtet, so treffen wir unter Berücksichtigung der verfügbaren Technologie und der
Implementierungskosten
angemessene Maßnahmen, auch technischer Art, um für die Datenverarbeitung Verantwortliche, die die
personenbezogenen
Daten verarbeiten, darüber zu informieren, dass Sie von ihnen die Löschung aller Links zu diesen
personenbezogenen
Daten oder von Kopien oder Replikationen dieser personenbezogenen Daten verlangt haben.
</p>
Löschung verpflichtet, so treffen wir unter Berücksichtigung der verfügbaren Technologie und der
Implementierungskosten angemessene Maßnahmen, auch technischer Art, um für die Datenverarbeitung
Verantwortliche, die die personenbezogenen Daten verarbeiten, darüber zu informieren, dass Sie von ihnen die
Löschung aller Links zu diesen personenbezogenen Daten oder von Kopien oder Replikationen dieser
personenbezogenen Daten verlangt haben. </p>
<h4>5.4 Recht auf Einschränkung der Verarbeitung</h4>
<p>
In einer Reihe von Fällen sind Sie berechtigt, von uns eine Einschränkung der Verarbeitung Ihrer
personenbezogenen
Daten zu verlangen.<br/>
personenbezogenen Daten zu verlangen.<br/>
Im Einzelnen:<br/>
Sie haben das Recht, von uns die Einschränkung der Verarbeitung zu verlangen, wenn eine der folgenden
Voraussetzungen
gegeben ist:
Voraussetzungen gegeben ist:
</p>
<ol>
<li>die Richtigkeit der personenbezogenen Daten wird von Ihnen bestritten, und zwar für eine Dauer, die es
uns
ermöglicht, die Richtigkeit der personenbezogenen Daten zu überprüfen,
uns ermöglicht, die Richtigkeit der personenbezogenen Daten zu überprüfen,
</li>
<li>die Verarbeitung unrechtmäßig ist und Sie die Löschung der personenbezogenen Daten ablehnten und
stattdessen die
Einschränkung der Nutzung der personenbezogenen Daten verlangt haben;
stattdessen die Einschränkung der Nutzung der personenbezogenen Daten verlangt haben;
</li>
<li>wir die personenbezogenen Daten für die Zwecke der Verarbeitung nicht länger benötigen, Sie die Daten
jedoch zur
Geltendmachung, Ausübung oder Verteidigung von Rechtsansprüchen benötigen, oder
jedoch zur Geltendmachung, Ausübung oder Verteidigung von Rechtsansprüchen benötigen, oder
</li>
<li>Sie Widerspruch gegen die Verarbeitung gemäß Art. 21 Abs. 1 DSGVO eingelegt haben, solange noch nicht
feststeht,
@ -369,29 +285,21 @@ function PrivacyText(){
<h4>5.5 Recht auf Datenübertragbarkeit</h4>
<p>
Sie haben das Recht, Sie betreffende personenbezogene Daten maschinenlesbar zu erhalten, zu übermitteln,
oder von uns
übermitteln zu lasen.<br/>
oder von uns übermitteln zu lasen.<br/>
Im Einzelnen:<br/>
Sie haben das Recht, die Sie betreffenden personenbezogenen Daten, die Sie uns bereitgestellt haben, in
einem
strukturierten, gängigen und maschinenlesbaren Format zu erhalten, und Sie haben das Recht, diese Daten
einem anderen
Verantwortlichen ohne Behinderung durch uns zu übermitteln, sofern
</p>
einem strukturierten, gängigen und maschinenlesbaren Format zu erhalten, und Sie haben das Recht, diese
Daten einem anderen Verantwortlichen ohne Behinderung durch uns zu übermitteln, sofern </p>
<ol>
<li>die Verarbeitung auf einer Einwilligung gemäß Art. 6 Abs. 1 S. 1 a) DSGVO oder Art. 9 Abs. 2 a) DSGVO
oder auf
einem Vertrag gemäß Art. 6 Abs. 1 S. 1 b) DSGVO beruht und
<li>die Verarbeitung auf einer Einwilligung gemäß Art. 6 Abs. 1 S. 1 a) DSGVO oder Art. 9 Abs. 2 a)
DSGVO oder auf einem Vertrag gemäß Art. 6 Abs. 1 S. 1 b) DSGVO beruht und
</li>
<li>die Verarbeitung mithilfe automatisierter Verfahren erfolgt.</li>
</ol>
<p>
Bei der Ausübung Ihres Rechts auf Datenübertragbarkeit gemäß Absatz 1 haben Sie das Recht, zu erwirken, dass
die
personenbezogenen Daten direkt von uns einem anderen Verantwortlichen übermittelt werden, soweit dies
technisch
machbar ist.
</p>
Bei der Ausübung Ihres Rechts auf Datenübertragbarkeit gemäß Absatz 1 haben Sie das Recht, zu erwirken,
dass die personenbezogenen Daten direkt von uns einem anderen Verantwortlichen übermittelt werden, soweit
dies technisch machbar ist. </p>
<h4>5.6 Widerspruchsrecht</h4>
<p>
Sie haben das Recht, auch einer rechtmäßigen Verarbeitung Ihrer personenbezogenen Daten durch uns zu
@ -400,82 +308,67 @@ function PrivacyText(){
überwiegen.<br/>
Im Einzelnen:<br/>
Sie haben das Recht, aus Gründen, die sich aus Ihrer besonderen Situation ergeben, jederzeit gegen die
Verarbeitung
Sie betreffender personenbezogener Daten, die aufgrund von Art. 6 Abs. 1 S. 1 e) oder f) DSGVO erfolgt,
Widerspruch
einzulegen; dies gilt auch für ein auf diese Bestimmungen gestütztes Profiling. Wir verarbeiten die
personenbezogenen
Daten nicht mehr, es sei denn, wir können zwingende schutzwürdige Gründe für die Verarbeitung nachweisen,
die Ihre
Interessen, Rechte und Freiheiten überwiegen, oder die Verarbeitung dient der Geltendmachung, Ausübung oder
Verteidigung von Rechtsansprüchen.<br/>
Verarbeitung Sie betreffender personenbezogener Daten, die aufgrund von Art. 6 Abs. 1 S. 1 e) oder f) DSGVO
erfolgt,
Widerspruch einzulegen; dies gilt auch für ein auf diese Bestimmungen gestütztes Profiling. Wir verarbeiten
die personenbezogenen Daten nicht mehr, es sei denn, wir können zwingende schutzwürdige Gründe für die
Verarbeitung nachweisen,
die Ihre Interessen, Rechte und Freiheiten überwiegen, oder die Verarbeitung dient der Geltendmachung,
Ausübung oder Verteidigung von Rechtsansprüchen.<br/>
Werden personenbezogene Daten von uns verarbeitet, um Direktwerbung zu betreiben, so haben Sie das Recht,
jederzeit
Widerspruch gegen die Verarbeitung Sie betreffender personenbezogener Daten zum Zwecke derartiger Werbung
einzulegen;
jederzeit Widerspruch gegen die Verarbeitung Sie betreffender personenbezogener Daten zum Zwecke derartiger
Werbung einzulegen;
dies gilt auch für das Profiling, soweit es mit solcher Direktwerbung in Verbindung steht.<br/>
Sie haben das Recht, aus Gründen, die sich aus Ihrer besonderen Situation ergeben, gegen die Sie betreffende
Verarbeitung Sie betreffender personenbezogener Daten, die zu wissenschaftlichen oder historischen
Forschungszwecken
oder zu statistischen Zwecken gemäß Art. 89 Abs. 1 DSGVO erfolgt, Widerspruch einzulegen, es sei denn, die
Verarbeitung ist zur Erfüllung einer im öffentlichen Interesse liegenden Aufgabe erforderlich.<br/>
Forschungszwecken oder zu statistischen Zwecken gemäß Art. 89 Abs. 1 DSGVO erfolgt, Widerspruch einzulegen,
es sei denn,
die Verarbeitung ist zur Erfüllung einer im öffentlichen Interesse liegenden Aufgabe erforderlich.<br/>
</p>
<h4>5.7 Automatisierte Entscheidungen einschließlich Profiling</h4>
<p>
Sie haben das Recht, nicht einer ausschließlich auf einer automatisierten Verarbeitung – einschließlich
Profiling –
beruhenden Entscheidung unterworfen zu werden, die Ihnen gegenüber rechtliche Wirkung entfaltet oder Sie in
ähnlicher
Weise erheblich beeinträchtigt.<br/>
ähnlicher Weise erheblich beeinträchtigt.<br/>
Eine automatisierte Entscheidungsfindung auf der Grundlage der erhobenen personenbezogenen Daten findet
nicht statt.
</p>
nicht statt. </p>
<h4>5.8 Recht auf Widerruf einer datenschutzrechtlichen Einwilligung</h4>
<p>
Sie haben das Recht, eine Einwilligung zur Verarbeitung personenbezogener Daten jederzeit zu widerrufen.
</p>
Sie haben das Recht, eine Einwilligung zur Verarbeitung personenbezogener Daten jederzeit zu
widerrufen. </p>
<h4>5.9 Recht auf Beschwerde bei einer Aufsichtsbehörde</h4>
<p>
Sie haben das Recht auf Beschwerde bei einer Aufsichtsbehörde, insbesondere in dem Mitgliedstaat Ihres
Aufenthaltsorts, Ihres Arbeitsplatzes oder des Orts des mutmaßlichen Verstoßes, wenn Sie der Ansicht sind,
dass die
Verarbeitung der Sie betreffenden personenbezogenen Daten rechtswidrig ist.
</p>
dass die Verarbeitung der Sie betreffenden personenbezogenen Daten rechtswidrig ist. </p>
<h3>6 Datensicherheit</h3>
<p>
Wir sind um die Sicherheit Ihrer Daten im Rahmen der geltenden Datenschutzgesetze und technischen
Möglichkeiten
maximal bemüht.<br/>
Möglichkeiten maximal bemüht.<br/>
Ihre persönlichen Daten werden bei uns verschlüsselt übertragen. Dies gilt für Ihre Bestellungen und auch
für das
Kundenlogin. Wir nutzen das Codierungssystem SSL (Secure Socket Layer), weisen jedoch darauf hin, dass die
Datenübertragung im Internet (z.B. bei der Kommunikation per E-Mail) Sicherheitslücken aufweisen kann. Ein
lückenloser
Schutz der Daten vor dem Zugriff durch Dritte ist nicht möglich.<br/>
für das Kundenlogin. Wir nutzen das Codierungssystem SSL (Secure Socket Layer), weisen jedoch darauf hin,
dass die Datenübertragung im Internet (z.B. bei der Kommunikation per E-Mail) Sicherheitslücken aufweisen
kann. Ein lückenloser Schutz der Daten vor dem Zugriff durch Dritte ist nicht möglich.<br/>
Zur Sicherung Ihrer Daten unterhalten wir technische und organisatorische Sicherungsmaßnahmen entsprechend
Art. 32
DSGVO, die wir immer wieder dem Stand der Technik anpassen.<br/>
Wir gewährleisten außerdem nicht, dass unser Angebot zu bestimmten Zeiten zur Verfügung steht; Störungen,
Art. 32 DSGVO, die wir immer wieder dem Stand der Technik anpassen.<br/>
Wir gewährleisten außerdem nicht, dass unser Angebot zu bestimmten Zeiten zur Verfügung steht;
Störungen,
Unterbrechungen oder Ausfälle können nicht ausgeschlossen werden. Die von uns verwendeten Server werden
regelmäßig
sorgfältig gesichert.
</p>
regelmäßig sorgfältig gesichert. </p>
<h3>7 Weitergabe von Daten an Dritte, keine Datenübertragung ins Nicht-EU-Ausland</h3>
<p>
Grundsätzlich verwenden wir Ihre personenbezogenen Daten nur innerhalb unseres Unternehmens.<br/>
Wenn und soweit wir Dritte im Rahmen der Erfüllung von Verträgen einschalten (etwa Logistik-Dienstleister),
erhalten
diese personenbezogene Daten nur in dem Umfang, in welchem die Übermittlung für die entsprechende Leistung
erforderlich ist.<br/>
erhalten diese personenbezogene Daten nur in dem Umfang, in welchem die Übermittlung für die entsprechende
Leistung erforderlich ist.<br/>
Für den Fall, dass wir bestimmte Teile der Datenverarbeitung auslagern („Auftragsverarbeitung“),
verpflichten wir
Auftragsverarbeiter vertraglich dazu, personenbezogene Daten nur im Einklang mit den Anforderungen der
Datenschutzgesetze zu verwenden und den Schutz der Rechte der betroffenen Person zu gewährleisten.<br/>
verpflichten wir Auftragsverarbeiter vertraglich dazu, personenbezogene Daten nur im Einklang mit den
Anforderungen der Datenschutzgesetze zu verwenden und den Schutz der Rechte der betroffenen Person zu
gewährleisten.<br/>
Eine Datenübertragung an Stellen oder Personen außerhalb der EU außerhalb des in dieser Erklärung in Ziffer
4
genannten Falls findet nicht statt und ist nicht geplant.
</p>
4 genannten Falls findet nicht statt und ist nicht geplant. </p>
<h3>8 Datenschutzbeauftragter</h3>
<p>
Sollten Sie noch Fragen oder Bedenken zum Datenschutz haben, so wenden Sie sich bitte an unseren
@ -486,18 +379,14 @@ function PrivacyText(){
August-Euler-Weg 3<br/>
76133 Karlsruhe<br/>
Germany<br/>
jon@s-seydel.de
</p>
</Container>
);
jon@s-seydel.de </p>
</Container>);
}
export default class PrivacyPage extends React.Component {
render() {
return (
<div>
return (<div>
<Head>
<title>Datenschutzerklärung: turnie.re</title>
</Head>
@ -505,7 +394,6 @@ export default class PrivacyPage extends React.Component {
<BigImage text="Datenschutzerklärung"/>
<Main/>
<Footer/>
</div>
);
</div>);
}
}

19
pages/private.js
View File

@ -2,7 +2,7 @@ import Head from 'next/head';
import React from 'react';
import {connect} from 'react-redux';
import {Card, CardBody, Container,} from 'reactstrap';
import {Card, CardBody, Container} from 'reactstrap';
import {TurniereNavigation} from '../js/components/Navigation';
import {Footer} from '../js/components/Footer';
@ -13,12 +13,10 @@ import '../static/everypage.css';
import TournamentList from '../js/components/TournamentList';
class PrivateTournamentsPage extends React.Component {
render() {
const {isSignedIn} = this.props;
return (
<UserRestrictor>
return (<UserRestrictor>
<Option condition={isSignedIn}>
<div className="main generic-fullpage-bg">
<Head>
@ -42,8 +40,7 @@ class PrivateTournamentsPage extends React.Component {
<Footer/>
</div>
</Option>
</UserRestrictor>
);
</UserRestrictor>);
}
}
@ -52,9 +49,7 @@ function mapStateToProperties(state) {
return {isSignedIn};
}
const PrivateTournamentListPage = connect(
mapStateToProperties,
)(PrivateTournamentsPage);
const PrivateTournamentListPage = connect(mapStateToProperties)(PrivateTournamentsPage);
export default PrivateTournamentListPage;
@ -71,13 +66,11 @@ function PrivateTournamentsPageContent() {
class PrivateTournamentsCard extends React.Component {
render() {
return (
<Card className="shadow">
return (<Card className="shadow">
<CardBody>
<h1 className="custom-font">Private Turniere</h1>
<TournamentList type='private'/>
</CardBody>
</Card>
);
</Card>);
}
}

64
pages/register.js
View File

@ -2,15 +2,7 @@ import Head from 'next/head';
import React from 'react';
import {connect} from 'react-redux';
import {
Button,
Card,
CardBody,
Container,
Form,
FormGroup,
FormText,
Input,
Label
Button, Card, CardBody, Container, Form, FormGroup, FormText, Input, Label
} from 'reactstrap';
import {TurniereNavigation} from '../js/components/Navigation';
@ -22,8 +14,7 @@ import '../static/everypage.css';
export default class RegisterPage extends React.Component {
render() {
return (
<div className="main generic-fullpage-bg">
return (<div className="main generic-fullpage-bg">
<Head>
<title>Registrieren: turnie.re</title>
</Head>
@ -33,16 +24,13 @@ export default class RegisterPage extends React.Component {
<AccountRequirementMarketing/>
</div>
<Footer/>
</div>
);
</div>);
}
}
class Register extends React.Component {
render() {
return (
<Container className="py-5">
return (<Container className="py-5">
<Card className="shadow">
<CardBody>
<h1 className="custom-font">Account anlegen</h1>
@ -52,8 +40,7 @@ class Register extends React.Component {
</div>
</CardBody>
</Card>
</Container>
);
</Container>);
}
}
@ -61,42 +48,33 @@ class RegisterErrorList extends React.Component {
render() {
const {error, errorMessages} = this.props;
if (error) {
return (
<ul className="mt-3 error-box">
{ errorMessages.map((message, index) =>
<li key={index}>{message}</li>
) }
</ul>
);
return (<ul className="mt-3 error-box">
{errorMessages.map((message, index) => <li key={index}>{message}</li>)}
</ul>);
} else {
return null;
}
}
}
const mapStateToErrorMessages = (state) => {
const mapStateToErrorMessages = state => {
const {errorMessages, error} = state.userinfo;
return {errorMessages, error};
};
const VisibleRegisterErrorList = connect(
mapStateToErrorMessages
)(RegisterErrorList);
const VisibleRegisterErrorList = connect(mapStateToErrorMessages)(RegisterErrorList);
class RegisterForm extends React.Component {
constructor(props) {
super(props);
this.state = {
username : '',
email : '',
password : ''
username: '', email: '', password: ''
};
}
render() {
return (
<Form>
return (<Form>
<FormGroup>
<Label for="username">Benutzername</Label>
<Input name="username" value={this.state.username} onChange={this.handleUsernameInput.bind(this)}/>
@ -104,21 +82,23 @@ class RegisterForm extends React.Component {
</FormGroup>
<FormGroup>
<Label for="email">E-Mail-Adresse</Label>
<Input type="email" name="email" value={this.state.email} onChange={ this.handleEmailInput.bind(this) } />
<Input type="email" name="email" value={this.state.email}
onChange={this.handleEmailInput.bind(this)}/>
<FormText>Deine E-Mail-Adresse kann nur von dir gesehen werden.</FormText>
</FormGroup>
<FormGroup>
<Label for="password">Passwort</Label>
<Input type="password" name="password" value={this.state.password} onChange={ this.handlePasswordInput.bind(this) } />
<Input type="password" name="password" value={this.state.password}
onChange={this.handlePasswordInput.bind(this)}/>
<FormText>Dein Passwort muss mindestens 12 Zeichen lang sein. Alle Zeichen sind erlaubt.</FormText>
</FormGroup>
<FormText className="mb-2 mt-4">
Du akzeptierst die <a href="/privacy">Datenschutzbestimmungen</a>, wenn du auf Registrieren klickst.
</FormText>
<Button onClick={ register.bind(this, this.state.username, this.state.email, this.state.password) } color="success" size="lg" className="w-100 shadow-sm">Registrieren</Button>
<Button onClick={register.bind(this, this.state.username, this.state.email, this.state.password)}
color="success" size="lg" className="w-100 shadow-sm">Registrieren</Button>
<VisibleRegisterErrorList/>
</Form>
);
</Form>);
}
handlePasswordInput(input) {
@ -135,14 +115,12 @@ class RegisterForm extends React.Component {
}
function AccountRequirementMarketing() {
return (
<Container>
return (<Container>
<Card id="account-requirement">
<CardBody>
<h3 className="custom-font">Warum ein Account nötig ist</h3>
<p>Du benötigst deinen Account, damit nur du dein Turnier bearbeiten kannst.</p>
</CardBody>
</Card>
</Container>
);
</Container>);
}

130
pages/tournament-edit.js
View File

@ -3,11 +3,7 @@ import React from 'react';
import {connect} from 'react-redux';
import {notify} from 'react-notify-toast';
import {
Container,
Button,
Card,
CardBody,
Table
Container, Button, Card, CardBody, Table
} from 'reactstrap';
import {requestTournament} from '../js/api';
@ -25,7 +21,6 @@ import '../static/everypage.css';
import '../static/css/index.css';
class EditTournamentPage extends React.Component {
static async getInitialProps({query}) {
return {query};
}
@ -54,8 +49,7 @@ class EditTournamentPage extends React.Component {
const {validCode} = this.state;
const {tournamentname, ownerUsername, isSignedIn, username} = this.props;
return (
<UserRestrictor>
return (<UserRestrictor>
<Option condition={validCode && isSignedIn && ownerUsername === username}>
<div className='pb-5'>
<Head>
@ -64,7 +58,9 @@ class EditTournamentPage extends React.Component {
<TurniereNavigation/>
<BigImage text={tournamentname}/>
<EditTournamentContent ref={(edittournamentcontent) => { this._edittournamentcontent = edittournamentcontent; }}/>
<EditTournamentContent ref={edittournamentcontent => {
this._edittournamentcontent = edittournamentcontent;
}}/>
<Footer/>
</div>
</Option>
@ -87,8 +83,7 @@ class EditTournamentPage extends React.Component {
<Option condition={true}>
<ErrorPageComponent statusCode={404}/>
</Option>
</UserRestrictor>
);
</UserRestrictor>);
}
}
@ -98,20 +93,19 @@ function mapStateToTournamentInfo(state) {
return {tournamentname, ownerUsername, isSignedIn, username};
}
export default connect(
mapStateToTournamentInfo
)(EditTournamentPage);
export default connect(mapStateToTournamentInfo)(EditTournamentPage);
class EditTournamentContent extends React.Component {
render() {
return (
<div className='mb-5'>
return (<div className='mb-5'>
<ReturnToTournamentButton/>
<EditTournamentPropertiesField ref={(field) => { this._edittournamentpropertiesfield = field; }}/>
<EditTeamField ref={(field) => { this._editteamfield = field; }}/>
</div>
);
<EditTournamentPropertiesField ref={field => {
this._edittournamentpropertiesfield = field;
}}/>
<EditTeamField ref={field => {
this._editteamfield = field;
}}/>
</div>);
}
notifyOfContentUpdate() {
@ -121,24 +115,21 @@ class EditTournamentContent extends React.Component {
}
function ReturnToTournamentButton() {
return (
<Container className="px-0">
return (<Container className="px-0">
<Button color="secondary" className="mb-5 w-100" href="./">Zurück zum Turnier</Button>
</Container>
);
</Container>);
}
class EditTournamentPropertiesField extends React.Component {
render() {
return (
<Card className="container">
return (<Card className="container">
<CardBody>
<h2>Turnier-Eigenschaften ändern</h2>
<VisibleEditTournamentForm ref={(form) => { this._visibleedittournamentform = form; }}/>
<VisibleEditTournamentForm ref={form => {
this._visibleedittournamentform = form;
}}/>
</CardBody>
</Card>
);
</Card>);
}
notifyOfContentUpdate() {
@ -147,50 +138,49 @@ class EditTournamentPropertiesField extends React.Component {
}
class EditTournamentForm extends React.Component {
constructor(props) {
super(props);
this.state = {
name : '',
description : '',
isPublic : false
name: '', description: '', isPublic: false
};
}
render() {
const {name, description, isPublic} = this.state;
return (
<div>
return (<div>
<div className="form-group">
<label htmlFor="name">Turnier-Name</label>
<input className="form-control" type="text" name="name" id="edittournament-textfield-name" value={ name } placeholder={ name } onChange={ this.handleNameInput.bind(this) } />
<input className="form-control" type="text" name="name" id="edittournament-textfield-name"
value={name} placeholder={name} onChange={this.handleNameInput.bind(this)}/>
</div>
<div className="form-group">
<label htmlFor="name">Turnier-Beschreibung</label>
<input className="form-control" type="text" name="name" id="edittournament-textfield-description" value={ description } placeholder={ description } onChange={ this.handleDescriptionInput.bind(this) } />
<input className="form-control" type="text" name="name" id="edittournament-textfield-description"
value={description} placeholder={description}
onChange={this.handleDescriptionInput.bind(this)}/>
</div>
<div className="form-group custom-control custom-checkbox">
<input className="custom-control-input" type="checkbox" name="isPublic" id="edittournament-checkbox-isPublic" value={ isPublic } onChange={ this.handlePublicInput.bind(this) } />
<input className="custom-control-input" type="checkbox" name="isPublic"
id="edittournament-checkbox-isPublic" value={isPublic}
onChange={this.handlePublicInput.bind(this)}/>
<label htmlFor="isPublic" className="custom-control-label">Das Turnier öffentlich anzeigen</label>
</div>
<div className="form-group">
<div className="input-group">
<Button color="success" className="px-5" id="edittournament-button" onClick={ this.handleClick.bind(this) }>Ändern</Button>
<Button color="success" className="px-5" id="edittournament-button"
onClick={this.handleClick.bind(this)}>Ändern</Button>
</div>
</div>
</div>
);
</div>);
}
notifyOfContentUpdate() {
const {name, description, isPublic} = this.props;
this.setState({
name : name? name : '',
description : description? description : '',
isPublic : isPublic
name: name ? name : '', description: description ? description : '', isPublic: isPublic
});
}
@ -216,22 +206,19 @@ function mapStateToTournamentFormProps(state) {
return {name, description, isPublic};
}
const VisibleEditTournamentForm = connect(
mapStateToTournamentFormProps,
null, null, { withRef : true}
)(EditTournamentForm);
const VisibleEditTournamentForm = connect(mapStateToTournamentFormProps, null, null,
{withRef: true})(EditTournamentForm);
class EditTeamField extends React.Component {
render() {
return (
<Card className="container my-4">
return (<Card className="container my-4">
<CardBody>
<h2>Team-Namen ändern</h2>
<VisibleEditTeamNamesForm ref={(form) => { this._visibleeditteamnamesform = form; }}/>
<VisibleEditTeamNamesForm ref={form => {
this._visibleeditteamnamesform = form;
}}/>
</CardBody>
</Card>
);
</Card>);
}
notifyOfContentUpdate() {
@ -240,7 +227,6 @@ class EditTeamField extends React.Component {
}
class EditTeamNamesForm extends React.Component {
constructor(props) {
super(props);
@ -252,22 +238,21 @@ class EditTeamNamesForm extends React.Component {
render() {
const {teams} = this.state;
return (
<div>
return (<div>
<Table className="table-striped mt-3">
<tbody>
{
teams.map((team, 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 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>
</tr>
)
}
{teams.map((team, 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 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>
</tr>)}
</tbody>
</Table>
</div>
);
</div>);
}
notifyOfContentUpdate() {
@ -279,7 +264,7 @@ class EditTeamNamesForm extends React.Component {
}
handleNameInput(index, input) {
let team = this.state.teams.slice();
const team = this.state.teams.slice();
team[index].name = input.target.value;
@ -302,8 +287,5 @@ function mapStateToTeamFormProps(state) {
return {teams};
}
const VisibleEditTeamNamesForm = connect(
mapStateToTeamFormProps,
null, null, { withRef : true }
)(EditTeamNamesForm);
const VisibleEditTeamNamesForm = connect(mapStateToTeamFormProps, null, null, {withRef: true})(EditTeamNamesForm);

7
pages/tournament-fullscreen.js
View File

@ -2,21 +2,18 @@ import Head from 'next/head';
import React from 'react';
class FullscreenTournamentPage extends React.Component {
static async getInitialProps({query}) {
return {query};
}
render() {
return (
<div>
return (<div>
<Head>
<title>Turnie.re - Turnieranzeige (Vollbild)</title>
</Head>
<p>Turnieranzeige (Vollbild)</p>
<p>Code: {this.props.query.code}</p>
</div>
);
</div>);
}
}

95
pages/tournament.js
View File

@ -25,8 +25,7 @@ import { Footer } from '../js/components/Footer';
import {TurniereNavigation} from '../js/components/Navigation';
import {BigImage} from '../js/components/BigImage';
import {
getRequest,
getState
getRequest, getState
} from '../js/api';
import 'bootstrap/dist/css/bootstrap.min.css';
@ -35,14 +34,12 @@ import '../static/everypage.css';
import '../static/css/tournament.css';
class PrivateTournamentPage extends React.Component {
render() {
const {id, description, isPublic, code, ownerUsername, playoffStages} = this.props.tournament;
const {isSignedIn, username} = this.props;
// TODO: Change href-prop of the anchor tag to contain the tournament code
return (
<div className='pb-5'>
return (<div className='pb-5'>
<Container>
<EditButton id={id} ownerName={ownerUsername} isSignedIn={isSignedIn} username={username}/>
<p>{description}</p>
@ -55,11 +52,11 @@ class PrivateTournamentPage extends React.Component {
</ListGroup>
</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}/>)}
{playoffStages.map(stage => <Stage isSignedIn={isSignedIn} isOwner={username === ownerUsername}
level={getLevelName(stage.level)} matches={stage.matches}
key={stage.level}/>)}
</div>
</div>
);
</div>);
}
}
@ -68,17 +65,13 @@ function mapStateToTournamentPageProperties(state) {
return {isSignedIn, username};
}
const TournamentPage = connect(
mapStateToTournamentPageProperties
)(PrivateTournamentPage);
const TournamentPage = connect(mapStateToTournamentPageProperties)(PrivateTournamentPage);
function EditButton(props) {
const {id, ownerName, isSignedIn, username} = props;
if (isSignedIn && ownerName === username) {
return (
<a href={'/t/' + id + '/edit'} className='btn btn-outline-secondary'>Turnier bearbeiten</a>
);
return (<a href={'/t/' + id + '/edit'} className='btn btn-outline-secondary'>Turnier bearbeiten</a>);
} else {
return null;
}
@ -101,8 +94,8 @@ function Stage(props) {
<h1 className='custom-font'>{props.level}</h1>
<Row>
{props.matches.map((match => (
<Col className='minw-25' key={match.id}><Match match={match} isSignedIn={isSignedIn} isOwner={isOwner}/></Col>
)))}
<Col className='minw-25' key={match.id}><Match match={match} isSignedIn={isSignedIn}
isOwner={isOwner}/></Col>)))}
</Row>
</Container>
</div>);
@ -126,7 +119,9 @@ class Match extends React.Component {
}
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
switch (this.props.match.state) {
case 'in_progress':
@ -161,8 +156,7 @@ class Match extends React.Component {
smallMessage = 'Spiel beendet, unentschieden';
break;
}
return (
<div className='mb-3'>
return (<div className='mb-3'>
<Card className='shadow-sm match' onClick={this.toggleModal}>
<CardBody className={borderClass + ' border py-2 ' + cardClass}>
<MatchTable match={this.props.match} borderColor={borderClass}/>
@ -170,8 +164,7 @@ class Match extends React.Component {
</Card>
<small className='text-muted'>{smallMessage}</small>
<MatchModal title='Match' isOpen={this.state.modal} toggle={this.toggleModal} match={this.props.match}/>
</div>
);
</div>);
}
}
@ -204,8 +197,7 @@ function MatchModal(props) {
title = 'Spiel beendet';
break;
}
return (
<Modal isOpen={props.isOpen} toggle={props.toggle}>
return (<Modal isOpen={props.isOpen} toggle={props.toggle}>
<ModalHeader toggle={props.toggle}>{title}</ModalHeader>
<ModalBody>
{props.match.state === 'in_progress' ? <EditableMatchTable match={props.match}/> :
@ -215,12 +207,12 @@ function MatchModal(props) {
{actionButton}
<Button color='secondary' onClick={props.toggle}>Abbrechen</Button>
</ModalFooter>
</Modal>
);
</Modal>);
}
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
switch (props.match.state) {
case 'in_progress':
@ -244,8 +236,7 @@ function MatchTable(props) {
break;
}
if (props.match.state === 'single_team') {
return (
<Table className='mb-0'>
return (<Table className='mb-0'>
<tbody>
<tr>
<td className={'border-top-0 ' + team1Class}>{props.match.team1}</td>
@ -254,11 +245,9 @@ function MatchTable(props) {
<td className={props.borderColor + ' ' + team2Class}>kein Gegner</td>
</tr>
</tbody>
</Table>
);
</Table>);
} else {
return (
<Table className='mb-0'>
return (<Table className='mb-0'>
<tbody>
<tr>
<th className='stage border-top-0'>{props.match.scoreTeam1}</th>
@ -269,14 +258,12 @@ function MatchTable(props) {
<td className={props.borderColor + ' ' + team2Class}>{props.match.team2}</td>
</tr>
</tbody>
</Table>
);
</Table>);
}
}
function EditableMatchTable(props) {
return (
<Table className='mb-0'>
return (<Table className='mb-0'>
<tbody>
<tr>
<td className='scoreInput border-top-0'>
@ -291,8 +278,7 @@ function EditableMatchTable(props) {
<td className='align-middle'>{props.match.team2}</td>
</tr>
</tbody>
</Table>
);
</Table>);
}
class ScoreInput extends React.Component {
@ -318,26 +304,27 @@ class ScoreInput extends React.Component {
render() {
return (<InputGroup>
<InputGroupAddon addonType="prepend"><Button onClick={this.decreaseScore} color='danger' outline={true}>-1</Button></InputGroupAddon>
<Input className='font-weight-bold' value={this.state.score} onChange={this.updateScore} type='number' step='1' placeholder='0'/>
<InputGroupAddon addonType="append"><Button onClick={this.increaseScore} color='success'>+1</Button></InputGroupAddon>
<InputGroupAddon addonType="prepend"><Button onClick={this.decreaseScore} color='danger'
outline={true}>-1</Button></InputGroupAddon>
<Input className='font-weight-bold' value={this.state.score} onChange={this.updateScore} type='number'
step='1' placeholder='0'/>
<InputGroupAddon addonType="append"><Button onClick={this.increaseScore}
color='success'>+1</Button></InputGroupAddon>
</InputGroup>);
}
}
function convertTournament(apiTournament) {
let groupStage = null;
let playoffStages = [];
for (let stage of apiTournament.stages) {
const playoffStages = [];
for (const stage of apiTournament.stages) {
if (stage.groups.length > 0) {
// group stage
groupStage = {groups: stage.groups.map(group => convertGroup(group))};
} else {
// playoff stage
playoffStages.push({
id: stage.id,
level: stage.level,
matches: stage.matches.map(match => convertMatch(match))
id: stage.id, level: stage.level, matches: stage.matches.map(match => convertMatch(match))
});
}
}
@ -363,9 +350,8 @@ function convertGroup(apiGroup) {
}
function convertMatch(apiMatch) {
let result = {
id: apiMatch.id,
state: apiMatch.state
const result = {
id: apiMatch.id, state: apiMatch.state
};
if (apiMatch.match_scores.length === 2) {
@ -389,7 +375,6 @@ function convertMatch(apiMatch) {
}
class Main extends React.Component {
static async getInitialProps({query}) {
return {query};
}
@ -409,7 +394,7 @@ class Main extends React.Component {
.then(response => {
this.setState({status: response.status, tournament: convertTournament(response.data)});
})
.catch((err) => {
.catch(err => {
if (err.response) {
this.setState({status: err.response.status});
} else {
@ -425,8 +410,7 @@ class Main extends React.Component {
const {status, tournament} = this.state;
if (status === 200) {
return (
<div>
return (<div>
<Head>
<title>{tournamentName}: turnie.re</title>
</Head>
@ -434,8 +418,7 @@ class Main extends React.Component {
<BigImage text={tournamentName}/>
<TournamentPage tournament={tournament}/>
<Footer/>
</div>
);
</div>);
} else {
return <ErrorPageComponent code={status}/>;
}

2
server.js
View File

@ -31,7 +31,7 @@ app.prepare()
return handle(req, res);
});
server.listen(dev ? 3000 : 80, (err) => {
server.listen(dev ? 3000 : 80, err => {
if (err) throw err;
});
})

5
yarn.lock
View File

@ -3255,6 +3255,11 @@ escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
eslint-config-google@^0.12.0:
version "0.12.0"
resolved "https://registry.yarnpkg.com/eslint-config-google/-/eslint-config-google-0.12.0.tgz#b9bcc52d0f24cf946e862fe8b09c773ad21e511b"
integrity sha512-SHDM3nIRCJBACjf8c/H6FvCwRmKbphESNl3gJFBNbw4KYDLCONB3ABYLXDGF+iaVP9XSTND/Q5/PuGoFkp4xbg==
eslint-plugin-react@^7.11.1:
version "7.12.4"
resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.12.4.tgz#b1ecf26479d61aee650da612e425c53a99f48c8c"