Merge pull request #27 from turniere/ticket/TURNIERE-178

Refactoring: Ticket/turniere 178

Dockerfile

@@ -4,7 +4,7 @@ WORKDIR /srv
 COPY js /srv/js
 COPY pages /srv/pages
 COPY static /srv/static
-COPY next.config.js package.json package-lock.json server.js style.css yarn.lock /srv/
+COPY next.config.js package.json package-lock.json server.js yarn.lock /srv/
 RUN yarn install
 RUN yarn build
 RUN yarn cache clean

js/api.js

@@ -1,123 +1,14 @@
-import {
+import {applyMiddleware, combineReducers, createStore} from 'redux';
-    createStore,
-    applyMiddleware,
-    combineReducers
-} from 'redux';
 import {composeWithDevTools} from 'redux-devtools-extension';
 import thunkMiddleware from 'redux-thunk';
 
 import {errorMessages} from './constants';
 
-import getConfig from 'next/config';
+import {actionTypesUserinfo, defaultStateUserinfo} from './redux/userInfo';
-const {publicRuntimeConfig} = getConfig();
+import {actionTypesTournamentinfo, defaultStateTournamentinfo} from './redux/tournamentInfo';
+import {actionTypesTournamentlist, defaultStateTournamentlist} from './redux/tournamentList';
+import {deleteRequest, getRequest, patchRequest, postRequest} from './redux/backendApi';
 
-const apiUrl = publicRuntimeConfig.api_url;
-
-const axios = require('axios');
-
-const actionTypesUserinfo = {
-    'REGISTER': 'REGISTER',
-    'REGISTER_RESULT_SUCCESS': 'REGISTER_RESULT_SUCCESS',
-    'REGISTER_RESULT_ERROR': 'REGISTER_RESULT_ERROR',
-
-    'LOGIN': 'LOGIN',
-    'LOGIN_RESULT_SUCCESS': 'LOGIN_RESULT_SUCCESS',
-    'LOGIN_RESULT_ERROR': 'LOGIN_RESULT_ERROR',
-
-    'LOGOUT': 'LOGOUT',
-
-    'VERIFY_CREDENTIALS': 'VERIFY_CREDENTIALS',
-    'VERIFY_CREDENTIALS_SUCCESS': 'VERIFY_CREDENTIALS_SUCCESS',
-    'VERIFY_CREDENTIALS_ERROR': 'VERIFY_CREDENTIALS_ERROR',
-
-    'STORE_AUTH_HEADERS': 'STORE_AUTH_HEADERS',
-
-    'REHYDRATE': 'USERINFO_REHYDRATE',
-    'CLEAR': 'USERINFO_CLEAR'
-};
-
-const defaultStateUserinfo = {
-    isSignedIn: false,
-    username: null,
-    error: false,
-    errorMessages: [],
-
-    accesstoken: null,
-    client: null,
-    expiry: null,
-    uid: null
-};
-
-const actionTypesTournamentinfo = {
-    'REQUEST_TOURNAMENT': 'REQUEST_TOURNAMENT',
-    'REQUEST_TOURNAMENT_SUCCESS': 'REQUEST_TOURNAMENT_SUCCESS',
-
-    'CREATE_TOURNAMENT': 'CREATE_TOURNAMENT',
-
-    'MODIFY_TOURNAMENT': 'MODIFY_TOURNAMENT',
-    'MODIFY_TOURNAMENT_SUCCESS': 'MODIFY_TOURNAMENT_SUCCESS',
-    'MODIFY_TOURNAMENT_ERROR': 'MODIFY_TOURNAMENT_ERROR',
-
-    'REHYDRATE': 'TOURNAMENTINFO_REHYDRATE',
-    'CLEAR': 'TOURNAMENTINFO_CLEAR'
-};
-
-const defaultStateTournamentinfo = {
-    code: '',
-    description: '',
-    id: -1,
-    name: '',
-    ownerUsername: '',
-    isPublic: '',
-    stages: [],
-    teams: []
-};
-
-const actionTypesTournamentlist = {
-    'FETCH': 'FETCH',
-    'FETCH_SUCCESS': 'FETCH_SUCCESS',
-    'REHYDRATE': 'REHYDRATE'
-};
-
-const defaultStateTournamentlist = {
-    tournaments: []
-};
-
-export function postRequest(state, url, data) {
-    return axios.post(apiUrl + url, data, {
-        headers: generateHeaders(state)
-    });
-}
-
-export function getRequest(state, url) {
-    return axios.get(apiUrl + url, {
-        headers: generateHeaders(state)
-    });
-}
-
-export function deleteRequest(state, url) {
-    return axios.delete(apiUrl + url, {
-        headers: generateHeaders(state)
-    });
-}
-
-export function patchRequest(state, url, data) {
-    return axios.patch(apiUrl + url, data, {
-        headers: generateHeaders(state)
-    });
-}
-
-function generateHeaders(state) {
-    if (state.userinfo.isSignedIn) {
-        return {
-            'access-token': state.userinfo.accesstoken,
-            'client': state.userinfo.client,
-            'uid': state.userinfo.uid
-        };
-    } else {
-        return {};
-    }
-}
 
 function storeOptionalToken(response) {
     if (checkForAuthenticationHeaders(response)) {

js/components/ErrorComponents.js

@@ -7,7 +7,7 @@ import {Footer} from './Footer';
 
 import 'bootstrap/dist/css/bootstrap.min.css';
 
-import '../../static/everypage.css';
+import '../../static/css/everypage.css';
 import '../../static/css/error.css';
 
 export class ErrorPageComponent extends React.Component {
@@ -46,44 +46,36 @@ export function ErrorPage(props) {
 }
 
 function ErrorMessage(props) {
-    switch (props.code) {
+    const errors = {};
-    case 400:
+    errors[400] = {title: 'Deine Anfrage ist fehlerhaft.', message: '', showTryStartpage: true};
-        return (<div className="running-text">
+    errors[403] = {
-            <h2>Deine Anfrage ist fehlerhaft.</h2>
+        title: 'Du bist nicht autorisiert, diese Seite aufzurufen.',
-            <p>
+        message: 'Bitte stelle sicher, dass Du angemeldet bist und auf dieses Turnier oder dieses Match zugreifen' +
+            ' darfst.',
+        showTryStartpage: true
+    };
+    errors[404] = {
+        title: 'Die aufgerufene Seite wurde leider nicht gefunden.',
+        message: 'Entweder hast Du dich vertippt, oder die gesuchte Seite gibt es nicht.',
+        showTryStartpage: true
+    };
+    errors[500] = {
+        title: 'Diese Seite funktioniert nicht.',
+        message: 'turnie.re kann Deine Anfrage im Moment nicht verarbeiten. Bitte versuche es später erneut.',
+        showTryStartpage: false
+    };
+    errors['unknown'] = {title: 'Ein unbekannter Fehler ist aufgetreten.', message: '', showTryStartpage: true};
+    const error = errors[props.code] === undefined ? errors['unknown'] : errors[props.code];
+
+    return <ErrorText title={error.title} message={error.message} showTryStartpage={error.showTryStartpage}/>;
+}
+
+function ErrorText(props) {
+    return (<div className='running-text'>
+        {props.title && <h2>{props.title}</h2>}
+        {props.message && <p>{props.message}</p>}
+        {props.showTryStartpage && <p>
             Wir empfehlen, die eingegebene Seite über die <a href="/">Startseite</a> zu suchen.
-            </p>
+        </p>}
-        </div>);
-    case 403:
-        return (<div className="running-text">
-            <h2>Du bist nicht autorisiert, diese Seite aufzurufen.</h2>
-            <p>
-                Bitte stelle sicher, dass Du angemeldet bist und auf dieses Turnier oder dieses Match zugreifen darfst.
-            </p>
-            <p>
-                Wir empfehlen, die eingegebene Seite über die <a href="/">Startseite</a> zu suchen.
-            </p>
-        </div>);
-    case 404:
-        return (<div className="running-text">
-            <h2>Die aufgerufene Seite wurde leider nicht gefunden.</h2>
-            <p>
-                Entweder hast Du dich vertippt, oder die gesuchte Seite gibt es nicht.
-            </p>
-            <p>
-                Wir empfehlen, die eingegebene Seite über die <a href="/">Startseite</a> zu suchen.
-            </p>
-        </div>);
-    case 500:
-        return (<div className="running-text">
-            <h2>Diese Seite funktioniert nicht.</h2>
-            <p>
-                turnie.re kann Deine Anfrage im Moment nicht verarbeiten. Bitte versuche es später erneut.
-            </p>
-        </div>);
-    default:
-        return (<div>
-            <h2>Ein unbekannter Fehler ist aufgetreten.</h2>
     </div>);
 }
-}

js/components/Footer.js

@@ -1,19 +1,30 @@
-
-
 export function Footer() {
     return (
         <footer className="footer mt-5 bg-dark text-light">
             <div className="container py-3">
                 <div className="row">
                     <div className="col-md-6 text-center">
-                        &copy; 2018 turnie.re &middot;
+                        <Copyright/> &middot; <Privacy/> &middot; <Imprint/>
-                        <a className="text-white" href="/privacy"> Datenschutzerklärung </a>
-                        &middot;
-                        <a className="text-white" href="/imprint"> Impressum</a>
                     </div>
-                    <div className="col-md-6 text-center"><a href="#" className="text-white">zurück nach oben</a></div>
+                    <div className="col-md-6 text-center"><MoveToTop/></div>
                 </div>
             </div>
         </footer>
     );
 }
+
+function Copyright() {
+    return <span>&copy; 2019 turnie.re</span>;
+}
+
+function Privacy() {
+    return <a className="text-white" href="/privacy">Datenschutzerklärung</a>;
+}
+
+function Imprint() {
+    return <a className="text-white" href="/imprint">Impressum</a>;
+}
+
+function MoveToTop() {
+    return <a href="#" className="text-white">zurück nach oben</a>;
+}

js/components/Match.js

@@ -0,0 +1,228 @@
+import {
+    Button,
+    Card,
+    CardBody,
+    Input,
+    InputGroup,
+    InputGroupAddon,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    ModalHeader,
+    Table
+} from 'reactstrap';
+import React from 'react';
+
+
+export class Match extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            modal: false
+        };
+        this.toggleModal = this.toggleModal.bind(this);
+    }
+
+    toggleModal() {
+        const {isSignedIn, isOwner} = this.props;
+
+        if (isSignedIn && isOwner) {
+            this.setState({modal: !this.state.modal});
+        }
+    }
+
+    render() {
+        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':
+            cardClass = 'table-warning';
+            borderClass = 'border-warning';
+            smallMessage = 'Spiel läuft';
+            break;
+        case 'team1_won':
+            cardClass = 'table-success';
+            borderClass = 'border-success';
+            smallMessage = 'Gewinner: ' + this.props.match.team1;
+            break;
+        case 'team2_won':
+            cardClass = 'table-success';
+            borderClass = 'border-success';
+            smallMessage = 'Gewinner: ' + this.props.match.team2;
+            break;
+        case 'single_team':
+            cardClass = 'table-success';
+            borderClass = 'border-success';
+            smallMessage = 'kein Gegner, Team kommt weiter';
+            break;
+        case 'not_ready':
+            smallMessage = 'Spiel kann noch nicht gestartet werden';
+            break;
+        case 'not_started':
+            smallMessage = 'Spiel kann gestartet werden';
+            break;
+        case 'undecided':
+            cardClass = 'table-success';
+            borderClass = 'border-success';
+            smallMessage = 'Spiel beendet, unentschieden';
+            break;
+        }
+        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}/>
+                </CardBody>
+            </Card>
+            <small className='text-muted'>{smallMessage}</small>
+            <MatchModal title='Match' isOpen={this.state.modal} toggle={this.toggleModal} match={this.props.match}/>
+        </div>);
+    }
+}
+
+function MatchModal(props) {
+    let title;
+    let actionButton = '';
+    // possible states: single_team not_ready not_started in_progress team1_won team2_won undecided
+    switch (props.match.state) {
+    case 'in_progress':
+        title = 'Spiel läuft';
+        actionButton = <Button color='primary' onClick={props.toggle}>Spiel beenden</Button>;
+        break;
+    case 'team1_won':
+        title = 'Spiel beendet';
+        break;
+    case 'team2_won':
+        title = 'Spiel beendet';
+        break;
+    case 'single_team':
+        title = 'kein Gegner, Team kommt weiter';
+        break;
+    case 'not_ready':
+        title = 'Spiel kann noch nicht gestartet werden';
+        break;
+    case 'not_started':
+        title = 'Spiel kann gestartet werden';
+        actionButton = <Button color='primary' onClick={props.toggle}>Spiel starten</Button>;
+        break;
+    case 'undecided':
+        title = 'Spiel beendet';
+        break;
+    }
+    return (<Modal isOpen={props.isOpen} toggle={props.toggle}>
+        <ModalHeader toggle={props.toggle}>{title}</ModalHeader>
+        <ModalBody>
+            {props.match.state === 'in_progress' ? <EditableMatchTable match={props.match}/> :
+                <MatchTable match={props.match}/>}
+        </ModalBody>
+        <ModalFooter>
+            {actionButton}
+            <Button color='secondary' onClick={props.toggle}>Abbrechen</Button>
+        </ModalFooter>
+    </Modal>);
+}
+
+function MatchTable(props) {
+    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':
+        break;
+    case 'team1_won':
+        team1Class = 'font-weight-bold';
+        team2Class = 'lost-team';
+        break;
+    case 'team2_won':
+        team1Class = 'lost-team';
+        team2Class = 'font-weight-bold';
+        break;
+    case 'single_team':
+        team2Class = 'text-muted';
+        break;
+    case 'not_ready':
+        break;
+    case 'not_started':
+        break;
+    case 'undecided':
+        break;
+    }
+    if (props.match.state === 'single_team') {
+        return (<Table className='mb-0'>
+            <tbody>
+                <tr>
+                    <td className={'border-top-0 ' + team1Class}>{props.match.team1}</td>
+                </tr>
+                <tr>
+                    <td className={props.borderColor + ' ' + team2Class}>kein Gegner</td>
+                </tr>
+            </tbody>
+        </Table>);
+    } else {
+        return (<Table className='mb-0'>
+            <tbody>
+                <tr>
+                    <th className='stage border-top-0'>{props.match.scoreTeam1}</th>
+                    <td className={'border-top-0 ' + team1Class}>{props.match.team1}</td>
+                </tr>
+                <tr>
+                    <th className={'stage ' + props.borderColor}>{props.match.scoreTeam2}</th>
+                    <td className={props.borderColor + ' ' + team2Class}>{props.match.team2}</td>
+                </tr>
+            </tbody>
+        </Table>);
+    }
+}
+
+function EditableMatchTable(props) {
+    return (<Table className='mb-0'>
+        <tbody>
+            <tr>
+                <td className='scoreInput border-top-0'>
+                    <ScoreInput score={props.match.scoreTeam1}/>
+                </td>
+                <td className='align-middle border-top-0'>{props.match.team1}</td>
+            </tr>
+            <tr>
+                <td className='scoreInput'>
+                    <ScoreInput score={props.match.scoreTeam2}/>
+                </td>
+                <td className='align-middle'>{props.match.team2}</td>
+            </tr>
+        </tbody>
+    </Table>);
+}
+
+class ScoreInput extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {score: this.props.score};
+        this.updateScore = this.updateScore.bind(this);
+        this.increaseScore = this.increaseScore.bind(this);
+        this.decreaseScore = this.decreaseScore.bind(this);
+    }
+
+    updateScore(event) {
+        this.setState({score: event.target.value});
+    }
+
+    increaseScore() {
+        this.setState({score: Number(this.state.score) + 1});
+    }
+
+    decreaseScore() {
+        this.setState({score: Number(this.state.score) - 1});
+    }
+
+    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>
+        </InputGroup>);
+    }
+}

js/redux/backendApi.js

@@ -0,0 +1,42 @@
+import getConfig from 'next/config';
+const {publicRuntimeConfig} = getConfig();
+
+const apiUrl = publicRuntimeConfig.api_url;
+
+const axios = require('axios');
+
+export function postRequest(state, url, data) {
+    return axios.post(apiUrl + url, data, {
+        headers: generateHeaders(state)
+    });
+}
+
+export function getRequest(state, url) {
+    return axios.get(apiUrl + url, {
+        headers: generateHeaders(state)
+    });
+}
+
+export function deleteRequest(state, url) {
+    return axios.delete(apiUrl + url, {
+        headers: generateHeaders(state)
+    });
+}
+
+export function patchRequest(state, url, data) {
+    return axios.patch(apiUrl + url, data, {
+        headers: generateHeaders(state)
+    });
+}
+
+function generateHeaders(state) {
+    if (state.userinfo.isSignedIn) {
+        return {
+            'access-token': state.userinfo.accesstoken,
+            'client': state.userinfo.client,
+            'uid': state.userinfo.uid
+        };
+    } else {
+        return {};
+    }
+}

js/redux/tournamentInfo.js

@@ -0,0 +1,25 @@
+export const actionTypesTournamentinfo = {
+    'REQUEST_TOURNAMENT': 'REQUEST_TOURNAMENT',
+    'REQUEST_TOURNAMENT_SUCCESS': 'REQUEST_TOURNAMENT_SUCCESS',
+
+    'CREATE_TOURNAMENT': 'CREATE_TOURNAMENT',
+
+    'MODIFY_TOURNAMENT': 'MODIFY_TOURNAMENT',
+    'MODIFY_TOURNAMENT_SUCCESS': 'MODIFY_TOURNAMENT_SUCCESS',
+    'MODIFY_TOURNAMENT_ERROR': 'MODIFY_TOURNAMENT_ERROR',
+
+    'REHYDRATE': 'TOURNAMENTINFO_REHYDRATE',
+    'CLEAR': 'TOURNAMENTINFO_CLEAR'
+};
+
+export const defaultStateTournamentinfo = {
+    code: '',
+    description: '',
+    id: -1,
+    name: '',
+    ownerUsername: '',
+    isPublic: '',
+    stages: [],
+    teams: []
+};
+

js/redux/tournamentList.js

@@ -0,0 +1,9 @@
+export const actionTypesTournamentlist = {
+    'FETCH': 'FETCH',
+    'FETCH_SUCCESS': 'FETCH_SUCCESS',
+    'REHYDRATE': 'REHYDRATE'
+};
+
+export const defaultStateTournamentlist = {
+    tournaments: []
+};

js/redux/userInfo.js

@@ -0,0 +1,32 @@
+export const actionTypesUserinfo = {
+    'REGISTER': 'REGISTER',
+    'REGISTER_RESULT_SUCCESS': 'REGISTER_RESULT_SUCCESS',
+    'REGISTER_RESULT_ERROR': 'REGISTER_RESULT_ERROR',
+
+    'LOGIN': 'LOGIN',
+    'LOGIN_RESULT_SUCCESS': 'LOGIN_RESULT_SUCCESS',
+    'LOGIN_RESULT_ERROR': 'LOGIN_RESULT_ERROR',
+
+    'LOGOUT': 'LOGOUT',
+
+    'VERIFY_CREDENTIALS': 'VERIFY_CREDENTIALS',
+    'VERIFY_CREDENTIALS_SUCCESS': 'VERIFY_CREDENTIALS_SUCCESS',
+    'VERIFY_CREDENTIALS_ERROR': 'VERIFY_CREDENTIALS_ERROR',
+
+    'STORE_AUTH_HEADERS': 'STORE_AUTH_HEADERS',
+
+    'REHYDRATE': 'USERINFO_REHYDRATE',
+    'CLEAR': 'USERINFO_CLEAR'
+};
+
+export const defaultStateUserinfo = {
+    isSignedIn: false,
+    username: null,
+    error: false,
+    errorMessages: [],
+
+    accesstoken: null,
+    client: null,
+    expiry: null,
+    uid: null
+};

pages/create.js

@@ -15,7 +15,7 @@ import {Login} from '../js/components/Login';
 import EditableStringList from '../js/components/EditableStringList';
 import {createTournament} from '../js/api';
 
-import '../static/everypage.css';
+import '../static/css/everypage.css';
 
 class CreatePage extends React.Component {
     render() {

pages/faq.js

@@ -8,7 +8,7 @@ import {Footer} from '../js/components/Footer';
 
 import 'bootstrap/dist/css/bootstrap.min.css';
 
-import '../static/everypage.css';
+import '../static/css/everypage.css';
 
 function Main() {
     return (<div className="main">

pages/imprint.js

@@ -7,7 +7,7 @@ import {BigImage} from '../js/components/BigImage';
 import {Footer} from '../js/components/Footer';
 
 import 'bootstrap/dist/css/bootstrap.min.css';
-import '../static/everypage.css';
+import '../static/css/everypage.css';
 
 function Main() {
     return (<div className="main running-text">

pages/index.js

@@ -11,7 +11,7 @@ import {Footer} from '../js/components/Footer';
 
 import 'bootstrap/dist/css/bootstrap.min.css';
 
-import '../static/everypage.css';
+import '../static/css/everypage.css';
 import '../static/css/index.css';
 
 function Main() {

pages/list.js

@@ -5,7 +5,7 @@ import {Card, CardBody, Container} from 'reactstrap';
 import {TurniereNavigation} from '../js/components/Navigation';
 import {Footer} from '../js/components/Footer';
 
-import '../static/everypage.css';
+import '../static/css/everypage.css';
 import TournamentList from '../js/components/TournamentList';
 import {connect} from 'react-redux';
 

pages/login.js

@@ -5,7 +5,7 @@ import {TurniereNavigation} from '../js/components/Navigation';
 import {Footer} from '../js/components/Footer';
 import {Login} from '../js/components/Login';
 
-import '../static/everypage.css';
+import '../static/css/everypage.css';
 
 export default class LoginPage extends React.Component {
     render() {

pages/privacy.js

@@ -8,7 +8,7 @@ import {Footer} from '../js/components/Footer';
 
 import 'bootstrap/dist/css/bootstrap.min.css';
 
-import '../static/everypage.css';
+import '../static/css/everypage.css';
 
 function Main() {
     return (<div className="main running-text">

pages/private.js

@@ -9,7 +9,7 @@ import {Footer} from '../js/components/Footer';
 import {Option, UserRestrictor} from '../js/components/UserRestrictor';
 import {Login} from '../js/components/Login';
 
-import '../static/everypage.css';
+import '../static/css/everypage.css';
 import TournamentList from '../js/components/TournamentList';
 
 class PrivateTournamentsPage extends React.Component {

pages/register.js

@@ -10,7 +10,7 @@ import {Footer} from '../js/components/Footer';
 import {register} from '../js/api';
 
 import '../static/css/errormessages.css';
-import '../static/everypage.css';
+import '../static/css/everypage.css';
 
 export default class RegisterPage extends React.Component {
     render() {

pages/tournament-edit.js

@@ -17,7 +17,7 @@ import {updateTeamName} from '../js/api';
 
 import 'bootstrap/dist/css/bootstrap.min.css';
 
-import '../static/everypage.css';
+import '../static/css/everypage.css';
 import '../static/css/index.css';
 
 class EditTournamentPage extends React.Component {

pages/tournament.js

@@ -1,37 +1,20 @@
 import Head from 'next/head';
 import React from 'react';
 import {connect} from 'react-redux';
-import {
+import {Col, Container, ListGroup, ListGroupItem, Row} from 'reactstrap';
-    Button,
-    Card,
-    CardBody,
-    Col,
-    Container,
-    Input,
-    InputGroup,
-    InputGroupAddon,
-    ListGroup,
-    ListGroupItem,
-    Modal,
-    ModalBody,
-    ModalFooter,
-    ModalHeader,
-    Row,
-    Table
-} from 'reactstrap';
 
 import {ErrorPageComponent} from '../js/components/ErrorComponents';
 import {Footer} from '../js/components/Footer';
 import {TurniereNavigation} from '../js/components/Navigation';
 import {BigImage} from '../js/components/BigImage';
-import {
+import {getState} from '../js/api';
-    getRequest, getState
+import {getRequest} from '../js/redux/backendApi';
-} from '../js/api';
 
 import 'bootstrap/dist/css/bootstrap.min.css';
 
-import '../static/everypage.css';
+import '../static/css/everypage.css';
 import '../static/css/tournament.css';
+import {Match} from '../js/components/Match';
 
 class PrivateTournamentPage extends React.Component {
     render() {
@@ -101,219 +84,6 @@ function Stage(props) {
     </div>);
 }
 
-class Match extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            modal: false
-        };
-        this.toggleModal = this.toggleModal.bind(this);
-    }
-
-    toggleModal() {
-        const {isSignedIn, isOwner} = this.props;
-
-        if (isSignedIn && isOwner) {
-            this.setState({modal: !this.state.modal});
-        }
-    }
-
-    render() {
-        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':
-            cardClass = 'table-warning';
-            borderClass = 'border-warning';
-            smallMessage = 'Spiel läuft';
-            break;
-        case 'team1_won':
-            cardClass = 'table-success';
-            borderClass = 'border-success';
-            smallMessage = 'Gewinner: ' + this.props.match.team1;
-            break;
-        case 'team2_won':
-            cardClass = 'table-success';
-            borderClass = 'border-success';
-            smallMessage = 'Gewinner: ' + this.props.match.team2;
-            break;
-        case 'single_team':
-            cardClass = 'table-success';
-            borderClass = 'border-success';
-            smallMessage = 'kein Gegner, Team kommt weiter';
-            break;
-        case 'not_ready':
-            smallMessage = 'Spiel kann noch nicht gestartet werden';
-            break;
-        case 'not_started':
-            smallMessage = 'Spiel kann gestartet werden';
-            break;
-        case 'undecided':
-            cardClass = 'table-success';
-            borderClass = 'border-success';
-            smallMessage = 'Spiel beendet, unentschieden';
-            break;
-        }
-        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}/>
-                </CardBody>
-            </Card>
-            <small className='text-muted'>{smallMessage}</small>
-            <MatchModal title='Match' isOpen={this.state.modal} toggle={this.toggleModal} match={this.props.match}/>
-        </div>);
-    }
-}
-
-function MatchModal(props) {
-    let title;
-    let actionButton = '';
-    // possible states: single_team not_ready not_started in_progress team1_won team2_won undecided
-    switch (props.match.state) {
-    case 'in_progress':
-        title = 'Spiel läuft';
-        actionButton = <Button color='primary' onClick={props.toggle}>Spiel beenden</Button>;
-        break;
-    case 'team1_won':
-        title = 'Spiel beendet';
-        break;
-    case 'team2_won':
-        title = 'Spiel beendet';
-        break;
-    case 'single_team':
-        title = 'kein Gegner, Team kommt weiter';
-        break;
-    case 'not_ready':
-        title = 'Spiel kann noch nicht gestartet werden';
-        break;
-    case 'not_started':
-        title = 'Spiel kann gestartet werden';
-        actionButton = <Button color='primary' onClick={props.toggle}>Spiel starten</Button>;
-        break;
-    case 'undecided':
-        title = 'Spiel beendet';
-        break;
-    }
-    return (<Modal isOpen={props.isOpen} toggle={props.toggle}>
-        <ModalHeader toggle={props.toggle}>{title}</ModalHeader>
-        <ModalBody>
-            {props.match.state === 'in_progress' ? <EditableMatchTable match={props.match}/> :
-                <MatchTable match={props.match}/>}
-        </ModalBody>
-        <ModalFooter>
-            {actionButton}
-            <Button color='secondary' onClick={props.toggle}>Abbrechen</Button>
-        </ModalFooter>
-    </Modal>);
-}
-
-function MatchTable(props) {
-    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':
-        break;
-    case 'team1_won':
-        team1Class = 'font-weight-bold';
-        team2Class = 'lost-team';
-        break;
-    case 'team2_won':
-        team1Class = 'lost-team';
-        team2Class = 'font-weight-bold';
-        break;
-    case 'single_team':
-        team2Class = 'text-muted';
-        break;
-    case 'not_ready':
-        break;
-    case 'not_started':
-        break;
-    case 'undecided':
-        break;
-    }
-    if (props.match.state === 'single_team') {
-        return (<Table className='mb-0'>
-            <tbody>
-                <tr>
-                    <td className={'border-top-0 ' + team1Class}>{props.match.team1}</td>
-                </tr>
-                <tr>
-                    <td className={props.borderColor + ' ' + team2Class}>kein Gegner</td>
-                </tr>
-            </tbody>
-        </Table>);
-    } else {
-        return (<Table className='mb-0'>
-            <tbody>
-                <tr>
-                    <th className='stage border-top-0'>{props.match.scoreTeam1}</th>
-                    <td className={'border-top-0 ' + team1Class}>{props.match.team1}</td>
-                </tr>
-                <tr>
-                    <th className={'stage ' + props.borderColor}>{props.match.scoreTeam2}</th>
-                    <td className={props.borderColor + ' ' + team2Class}>{props.match.team2}</td>
-                </tr>
-            </tbody>
-        </Table>);
-    }
-}
-
-function EditableMatchTable(props) {
-    return (<Table className='mb-0'>
-        <tbody>
-            <tr>
-                <td className='scoreInput border-top-0'>
-                    <ScoreInput score={props.match.scoreTeam1}/>
-                </td>
-                <td className='align-middle border-top-0'>{props.match.team1}</td>
-            </tr>
-            <tr>
-                <td className='scoreInput'>
-                    <ScoreInput score={props.match.scoreTeam2}/>
-                </td>
-                <td className='align-middle'>{props.match.team2}</td>
-            </tr>
-        </tbody>
-    </Table>);
-}
-
-class ScoreInput extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {score: this.props.score};
-        this.updateScore = this.updateScore.bind(this);
-        this.increaseScore = this.increaseScore.bind(this);
-        this.decreaseScore = this.decreaseScore.bind(this);
-    }
-
-    updateScore(event) {
-        this.setState({score: event.target.value});
-    }
-
-    increaseScore() {
-        this.setState({score: Number(this.state.score) + 1});
-    }
-
-    decreaseScore() {
-        this.setState({score: Number(this.state.score) - 1});
-    }
-
-    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>
-        </InputGroup>);
-    }
-}
-
 function convertTournament(apiTournament) {
     let groupStage = null;
     const playoffStages = [];

style.css

@@ -1,4 +0,0 @@
-
-.example {
-    font-size: 50px;
-}