diff --git a/Dockerfile b/Dockerfile index bffce91..dfb5e75 100644 --- a/Dockerfile +++ b/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 @@ -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 \ No newline at end of file +CMD yarn start diff --git a/js/api.js b/js/api.js index 7af1396..3510c72 100644 --- a/js/api.js +++ b/js/api.js @@ -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)) { diff --git a/js/components/ErrorComponents.js b/js/components/ErrorComponents.js index 69e5745..fb55c75 100644 --- a/js/components/ErrorComponents.js +++ b/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) { - case 400: - return (
-

Deine Anfrage ist fehlerhaft.

-

- Wir empfehlen, die eingegebene Seite über die Startseite zu suchen. -

-
); - case 403: - return (
-

Du bist nicht autorisiert, diese Seite aufzurufen.

-

- Bitte stelle sicher, dass Du angemeldet bist und auf dieses Turnier oder dieses Match zugreifen darfst. -

-

- Wir empfehlen, die eingegebene Seite über die Startseite zu suchen. -

-
); - case 404: - return (
-

Die aufgerufene Seite wurde leider nicht gefunden.

-

- Entweder hast Du dich vertippt, oder die gesuchte Seite gibt es nicht. -

-

- Wir empfehlen, die eingegebene Seite über die Startseite zu suchen. -

-
); - case 500: - return (
-

Diese Seite funktioniert nicht.

-

- turnie.re kann Deine Anfrage im Moment nicht verarbeiten. Bitte versuche es später erneut. -

-
); - default: - return (
-

Ein unbekannter Fehler ist aufgetreten.

-
); - } + 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 ; +} + +function ErrorText(props) { + return (
+ {props.title &&

{props.title}

} + {props.message &&

{props.message}

} + {props.showTryStartpage &&

+ Wir empfehlen, die eingegebene Seite über die Startseite zu suchen. +

} +
); } diff --git a/js/components/Footer.js b/js/components/Footer.js index 9d39ad7..54bd2d1 100644 --- a/js/components/Footer.js +++ b/js/components/Footer.js @@ -1,19 +1,30 @@ - - export function Footer() { return ( ); } + +function Copyright() { + return © 2019 turnie.re; +} + +function Privacy() { + return Datenschutzerklärung; +} + +function Imprint() { + return Impressum; +} + +function MoveToTop() { + return zurück nach oben; +} diff --git a/js/components/Match.js b/js/components/Match.js new file mode 100644 index 0000000..eb99e63 --- /dev/null +++ b/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 (
+ + + + + + {smallMessage} + +
); + } +} + +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 = ; + 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 = ; + break; + case 'undecided': + title = 'Spiel beendet'; + break; + } + return ( + {title} + + {props.match.state === 'in_progress' ? : + } + + + {actionButton} + + + ); +} + +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 ( + + + + + + + + +
{props.match.team1}
kein Gegner
); + } else { + return ( + + + + + + + + + + +
{props.match.scoreTeam1}{props.match.team1}
{props.match.scoreTeam2}{props.match.team2}
); + } +} + +function EditableMatchTable(props) { + return ( + + + + + + + + + + +
+ + {props.match.team1}
+ + {props.match.team2}
); +} + +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 ( + + + + ); + } +} diff --git a/js/redux/backendApi.js b/js/redux/backendApi.js new file mode 100644 index 0000000..2653edd --- /dev/null +++ b/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 {}; + } +} diff --git a/js/redux/tournamentInfo.js b/js/redux/tournamentInfo.js new file mode 100644 index 0000000..3322f04 --- /dev/null +++ b/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: [] +}; + diff --git a/js/redux/tournamentList.js b/js/redux/tournamentList.js new file mode 100644 index 0000000..7e86545 --- /dev/null +++ b/js/redux/tournamentList.js @@ -0,0 +1,9 @@ +export const actionTypesTournamentlist = { + 'FETCH': 'FETCH', + 'FETCH_SUCCESS': 'FETCH_SUCCESS', + 'REHYDRATE': 'REHYDRATE' +}; + +export const defaultStateTournamentlist = { + tournaments: [] +}; diff --git a/js/redux/userInfo.js b/js/redux/userInfo.js new file mode 100644 index 0000000..a8172b4 --- /dev/null +++ b/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 +}; diff --git a/pages/create.js b/pages/create.js index e70c10c..5cfa2ec 100644 --- a/pages/create.js +++ b/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() { diff --git a/pages/faq.js b/pages/faq.js index f778a71..c23cad2 100644 --- a/pages/faq.js +++ b/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 (
diff --git a/pages/imprint.js b/pages/imprint.js index f2b5ff0..5bd65d0 100644 --- a/pages/imprint.js +++ b/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 (
diff --git a/pages/index.js b/pages/index.js index 2f36dfd..307b7b6 100644 --- a/pages/index.js +++ b/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() { diff --git a/pages/list.js b/pages/list.js index c7bfcf2..3d410e1 100644 --- a/pages/list.js +++ b/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'; diff --git a/pages/login.js b/pages/login.js index 8ca1f53..20d17a9 100644 --- a/pages/login.js +++ b/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() { diff --git a/pages/privacy.js b/pages/privacy.js index 391aa1b..dc775f2 100644 --- a/pages/privacy.js +++ b/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 (
diff --git a/pages/private.js b/pages/private.js index 0ae79a0..9a21ba0 100644 --- a/pages/private.js +++ b/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 { diff --git a/pages/register.js b/pages/register.js index 13ef5d5..b7fc0ca 100644 --- a/pages/register.js +++ b/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() { diff --git a/pages/tournament-edit.js b/pages/tournament-edit.js index 1baf0ef..d1eaeaf 100644 --- a/pages/tournament-edit.js +++ b/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 { diff --git a/pages/tournament.js b/pages/tournament.js index 78a7cf1..8cf898c 100644 --- a/pages/tournament.js +++ b/pages/tournament.js @@ -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) {
); } -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 (
- - - - - - {smallMessage} - -
); - } -} - -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 = ; - 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 = ; - break; - case 'undecided': - title = 'Spiel beendet'; - break; - } - return ( - {title} - - {props.match.state === 'in_progress' ? : - } - - - {actionButton} - - - ); -} - -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 ( - - - - - - - - -
{props.match.team1}
kein Gegner
); - } else { - return ( - - - - - - - - - - -
{props.match.scoreTeam1}{props.match.team1}
{props.match.scoreTeam2}{props.match.team2}
); - } -} - -function EditableMatchTable(props) { - return ( - - - - - - - - - - -
- - {props.match.team1}
- - {props.match.team2}
); -} - -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 ( - - - - ); - } -} - function convertTournament(apiTournament) { let groupStage = null; const playoffStages = []; diff --git a/static/everypage.css b/static/css/everypage.css similarity index 100% rename from static/everypage.css rename to static/css/everypage.css diff --git a/style.css b/style.css deleted file mode 100644 index ec59852..0000000 --- a/style.css +++ /dev/null @@ -1,4 +0,0 @@ - -.example { - font-size: 50px; -} \ No newline at end of file