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

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

Refactoring: Ticket/turniere 178
This commit is contained in:
Jonny 2019-05-28 13:43:44 +02:00 committed by GitHub
parent d07678e0d7 2e223a7bb7
commit e651a53125
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 409 additions and 413 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Dockerfile
View File

@ -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
@ -16,4 +16,4 @@ COPY --from=build /srv /srv
RUN apk --no-cache add yarn && rm -rf /var/cache/apk/*
EXPOSE 80
ENV TURNIERE_API_URL=https://api.turnie.re
CMD yarn start
CMD yarn start

119
js/api.js
View File

@ -1,123 +1,14 @@
import {
createStore,
applyMiddleware,
combineReducers
} from 'redux';
import {applyMiddleware, combineReducers, createStore} from 'redux';
import {composeWithDevTools} from 'redux-devtools-extension';
import thunkMiddleware from 'redux-thunk';
import {errorMessages} from './constants';
import getConfig from 'next/config';
const {publicRuntimeConfig} = getConfig();
import {actionTypesUserinfo, defaultStateUserinfo} from './redux/userInfo';
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)) {

74
js/components/ErrorComponents.js
View File

@ -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) {
case 400:
return (<div className="running-text">
<h2>Deine Anfrage ist fehlerhaft.</h2>
<p>
Wir empfehlen, die eingegebene Seite über die <a href="/">Startseite</a> zu suchen.
</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>);
}
const errors = {};
errors[400] = {title: 'Deine Anfrage ist fehlerhaft.', message: '', showTryStartpage: true};
errors[403] = {
title: 'Du bist nicht autorisiert, diese Seite aufzurufen.',
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>}
</div>);
}

25
js/components/Footer.js
View File

@ -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;
<a className="text-white" href="/privacy"> Datenschutzerklärung </a>
&middot;
<a className="text-white" href="/imprint"> Impressum</a>
<Copyright/> &middot; <Privacy/> &middot; <Imprint/>
</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>;
}

228
js/components/Match.js Normal file
View File

@ -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>);
}
}

42
js/redux/backendApi.js Normal file
View File

@ -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 {};
}
}

25
js/redux/tournamentInfo.js Normal file
View File

@ -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: []
};

9
js/redux/tournamentList.js Normal file
View File

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

32
js/redux/userInfo.js Normal file
View File

@ -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
};

2
pages/create.js
View File

@ -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() {

2
pages/faq.js
View File

@ -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">

2
pages/imprint.js
View File

@ -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">

2
pages/index.js
View File

@ -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() {

2
pages/list.js
View File

@ -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';

2
pages/login.js
View File

@ -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() {

2
pages/privacy.js
View File

@ -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">

2
pages/private.js
View File

@ -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 {

2
pages/register.js
View File

@ -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() {

2
pages/tournament-edit.js
View File

@ -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 {

240
pages/tournament.js
View File

@ -1,37 +1,20 @@
import Head from 'next/head';
import React from 'react';
import {connect} from 'react-redux';
import {
Button,
Card,
CardBody,
Col,
Container,
Input,
InputGroup,
InputGroupAddon,
ListGroup,
ListGroupItem,
Modal,
ModalBody,
ModalFooter,
ModalHeader,
Row,
Table
} from 'reactstrap';
import {Col, Container, ListGroup, ListGroupItem, Row} 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 {
getRequest, getState
} from '../js/api';
import {getState} from '../js/api';
import {getRequest} from '../js/redux/backendApi';
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 = [];

0
static/everypage.css → static/css/everypage.css
View File

4
style.css
View File

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