diff --git a/pages/list.js b/pages/list.js
index 8e03fa4..200e412 100644
--- a/pages/list.js
+++ b/pages/list.js
@@ -1,22 +1,37 @@
import Head from 'next/head';
-import '../static/everypage.css';
-import { Footer, TurniereNavigation } from '../js/CommonComponents';
import React from 'react';
import { Card, CardBody, Container } from 'reactstrap';
-import { getRequest, getState } from '../js/api';
-export default () => (
-
-);
+import { Footer, TurniereNavigation } from '../js/CommonComponents';
+import {
+ getRequest,
+ getState,
+ verifyCredentials
+} from '../js/api';
+
+import '../static/everypage.css';
+
+export default class ListPage extends React.Component {
+
+ componentDidMount() {
+ verifyCredentials();
+ }
+
+ render() {
+ return (
+
+ );
+ }
+}
class TournamentList extends React.Component {
constructor(props) {
diff --git a/pages/login.js b/pages/login.js
index 6acc489..1a58e49 100644
--- a/pages/login.js
+++ b/pages/login.js
@@ -6,18 +6,31 @@ import { Button, Card, CardBody, Container, Form, FormGroup, Input, Label } from
import { login } from '../js/api';
import { connect } from 'react-redux';
-export default () => (
-
-);
+import {
+ verifyCredentials
+} from '../js/api';
+
+export default class LoginPage extends React.Component {
+
+ componentDidMount() {
+ verifyCredentials();
+ }
+
+ render() {
+ return (
+
+ );
+ }
+}
function Login() {
return (
diff --git a/pages/privacy.js b/pages/privacy.js
index 9f0c2b9..e4263eb 100644
--- a/pages/privacy.js
+++ b/pages/privacy.js
@@ -5,6 +5,10 @@ import 'bootstrap/dist/css/bootstrap.min.css';
import { BigImage, Footer, TurniereNavigation } from '../js/CommonComponents.js';
import '../static/everypage.css';
+import {
+ verifyCredentials
+} from '../js/api';
+
function Main() {
return (
@@ -488,14 +492,23 @@ function PrivacyText(){
}
-export default () => (
-
-
-
Datenschutzerklärung: turnie.re
-
-
-
-
-
-
-);
+export default class PrivacyPage extends React.Component {
+
+ componentDidMount() {
+ verifyCredentials();
+ }
+
+ render() {
+ return (
+
+
+
Datenschutzerklärung: turnie.re
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/pages/register.js b/pages/register.js
index cf0365f..096d6c1 100644
--- a/pages/register.js
+++ b/pages/register.js
@@ -6,19 +6,32 @@ import { Button, Card, CardBody, Container, Form, FormGroup, FormText, Input, La
import { register } from '../js/api';
import { connect } from 'react-redux';
-export default () => (
-
-
-
Registrieren: turnie.re
-
-
-
-
-
-);
+import {
+ verifyCredentials
+} from '../js/api';
+
+export default class RegisterPage extends React.Component {
+
+ componentDidMount() {
+ verifyCredentials();
+ }
+
+ render() {
+ return (
+
+
+
Registrieren: turnie.re
+
+
+
+
+
+ );
+ }
+}
function Register() {
return (
diff --git a/pages/tournament-edit.js b/pages/tournament-edit.js
new file mode 100644
index 0000000..0c89d91
--- /dev/null
+++ b/pages/tournament-edit.js
@@ -0,0 +1,290 @@
+import Head from 'next/head';
+import React from 'react';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import { connect } from 'react-redux';
+import { notify } from 'react-notify-toast';
+
+import { requestTournament } from '../js/api';
+import { BigImage, Footer, TurniereNavigation } from '../js/CommonComponents.js';
+import { ErrorPageComponent } from '../js/components/ErrorComponents.js';
+
+import {
+ Container,
+ Button,
+ Card,
+ CardBody,
+ Table
+} from 'reactstrap';
+
+import {
+ verifyCredentials,
+ updateTeamName
+} from '../js/api';
+
+import '../static/everypage.css';
+import '../static/css/index.css';
+
+class EditTournamentPage extends React.Component {
+
+ static async getInitialProps({query}) {
+ return {query};
+ }
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ validCode: true
+ };
+ }
+
+ componentDidMount() {
+ verifyCredentials();
+ requestTournament(this.props.query.code, () => {
+ this.setState({ validCode: true });
+ this._edittournamentcontent.notifyOfContentUpdate();
+ }, () => {
+ this.setState({ validCode: false });
+ });
+ }
+
+ render() {
+ const { validCode } = this.state;
+ const { name } = this.props;
+
+ if(validCode) {
+ return (
+
+
+
Turnie.re - Turnier bearbeiten
+
+
+
+
+ { this._edittournamentcontent = edittournamentcontent; }}/>
+
+
+
+ );
+ } else {
+ return (
+
+ );
+ }
+ }
+}
+
+function mapStateToTournamentInfo(state) {
+ const { name } = state.tournamentinfo;
+ return { name };
+}
+
+export default connect(
+ mapStateToTournamentInfo
+)(EditTournamentPage);
+
+class EditTournamentContent extends React.Component {
+
+ render() {
+ return (
+
+
+ { this._edittournamentpropertiesfield = field; }}/>
+ { this._editteamfield = field; }}/>
+
+ );
+ }
+
+ notifyOfContentUpdate() {
+ this._edittournamentpropertiesfield.notifyOfContentUpdate();
+ this._editteamfield.notifyOfContentUpdate();
+ }
+}
+
+function ReturnToTournamentButton() {
+ return (
+
+
+
+ );
+}
+
+class EditTournamentPropertiesField extends React.Component {
+
+ render() {
+ return (
+
+
+ Turnier-Eigenschaften ändern
+ { this._visibleedittournamentform = form; }}/>
+
+
+ );
+ }
+
+ notifyOfContentUpdate() {
+ this._visibleedittournamentform.getWrappedInstance().notifyOfContentUpdate();
+ }
+}
+
+class EditTournamentForm extends React.Component {
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ name : '',
+ description : '',
+ isPublic : false
+ };
+ }
+
+ render() {
+ const { name, description, isPublic } = this.state;
+
+ return (
+
+ );
+ }
+
+ notifyOfContentUpdate() {
+ const { name, description, isPublic } = this.props;
+
+ this.setState({
+ name : name? name : '',
+ description : description? description : '',
+ isPublic : isPublic
+ });
+ }
+
+ handleClick() {
+ // TODO: Apply changes to the tournament properties
+ }
+
+ handleNameInput(input) {
+ this.setState({ name : input.target.value });
+ }
+
+ handleDescriptionInput(input) {
+ this.setState({ description : input.target.value });
+ }
+
+ handlePublicInput(input) {
+ this.setState({ public : input.target.value });
+ }
+}
+
+function mapStateToTournamentFormProps(state) {
+ const { name, description, isPublic } = state.tournamentinfo;
+ return { name, description, isPublic };
+}
+
+const VisibleEditTournamentForm = connect(
+ mapStateToTournamentFormProps,
+ null, null, { withRef : true}
+)(EditTournamentForm);
+
+class EditTeamField extends React.Component {
+
+ render() {
+ return (
+
+
+ Team-Namen ändern
+ { this._visibleeditteamnamesform = form; }}/>
+
+
+ );
+ }
+
+ notifyOfContentUpdate() {
+ this._visibleeditteamnamesform.getWrappedInstance().notifyOfContentUpdate();
+ }
+}
+
+class EditTeamNamesForm extends React.Component {
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ teams : []
+ };
+ }
+
+ render() {
+ const { teams } = this.state;
+
+ return (
+
+ );
+ }
+
+ notifyOfContentUpdate() {
+ const { teams } = this.props;
+
+ this.setState({
+ teams : teams
+ });
+ }
+
+ handleNameInput(index, input) {
+ var team = this.state.teams.slice();
+
+ team[index].name = input.target.value;
+
+ this.setState({
+ teams : team
+ });
+ }
+
+ handleClick(index) {
+ updateTeamName(this.state.teams[index], () => {
+ notify.show('Team Name wurde erfolgreich geändert.', 'success', 5000);
+ }, () => {
+ notify.show('Team Name konnte nicht geändert werden.', 'warning', 5000);
+ });
+ }
+}
+
+function mapStateToTeamFormProps(state) {
+ const { teams } = state.tournamentinfo;
+ return { teams };
+}
+
+const VisibleEditTeamNamesForm = connect(
+ mapStateToTeamFormProps,
+ null, null, { withRef : true }
+)(EditTeamNamesForm);
+
diff --git a/pages/tournament-fullscreen.js b/pages/tournament-fullscreen.js
index 09cde55..21fddff 100644
--- a/pages/tournament-fullscreen.js
+++ b/pages/tournament-fullscreen.js
@@ -1,11 +1,19 @@
import Head from 'next/head';
import React from 'react';
+import {
+ verifyCredentials
+} from '../js/api';
+
class FullscreenTournamentPage extends React.Component {
static async getInitialProps({query}) {
return {query};
}
+
+ componentDidMount() {
+ verifyCredentials();
+ }
render() {
return (
diff --git a/pages/tournament.js b/pages/tournament.js
index d864dd8..40753f5 100644
--- a/pages/tournament.js
+++ b/pages/tournament.js
@@ -22,29 +22,39 @@ import 'bootstrap/dist/css/bootstrap.min.css';
import {BigImage, Footer, TurniereNavigation} from '../js/CommonComponents.js';
import '../static/everypage.css';
import '../static/css/tournament.css';
-import { getRequest, getState } from '../js/api';
-function Tournament(props) {
- // TODO: Change href-prop of the anchor tag to contain the tournament code
- return (
-
-
- Turnier bearbeiten
- {props.tournament.description}
-
-
- {props.tournament.isPublic ? 'Das Turnier ist öffentlich.' : 'Das Turnier ist privat.'}
-
- Turnier-Code: {props.tournament.code}
- von {props.tournament.ownerUsername}
-
-
-
- {props.tournament.playoffStages.map(stage =>
-
)}
+import {
+ getRequest,
+ getState,
+ verifyCredentials
+} from '../js/api';
+
+class TournamentPage extends React.Component {
+
+ render() {
+ const { id, description, isPublic, code, ownerUsername, playoffStages } = this.props.tournament;
+
+ // TODO: Change href-prop of the anchor tag to contain the tournament code
+ return (
+
+
+ Turnier bearbeiten
+ {description}
+
+
+ {isPublic ? 'Das Turnier ist öffentlich.' : 'Das Turnier ist privat.'}
+
+ Turnier-Code: {code}
+ von {ownerUsername}
+
+
+
+ {playoffStages.map(stage =>
+ )}
+
- );
+ );
+ }
}
function getLevelName(levelNumber) {
@@ -57,10 +67,12 @@ function getLevelName(levelNumber) {
}
function TournamentContainer(props) {
- if (props.data === null) {
+ const { tournament } = props.data;
+
+ if (tournament === null) {
return
null;
} else {
- return
;
+ return ;
}
}
@@ -339,9 +351,24 @@ function convertMatch(apiMatch) {
}
class Main extends React.Component {
+
+ static async getInitialProps({query}) {
+ return {query};
+ }
+
constructor(props) {
super(props);
+
+ this.state = {
+ tournament : null
+ };
+ }
+
+ componentDidMount() {
+ verifyCredentials();
+
const code = this.props.query.code;
+
getRequest(getState(), '/tournaments/' + code)
.then(response => {
this.setState({tournament: convertTournament(response.data)});
@@ -349,12 +376,9 @@ class Main extends React.Component {
.catch(() => { /* TODO: Show some kind of error or smth */ });
}
- static async getInitialProps({query}) {
- return {query};
- }
render() {
- const tournamentName = this.state === null ? 'Turnier' : this.state.tournament.name;
+ const tournamentName = this.state.tournament === null ? 'Turnier' : this.state.tournament.name;
return (
diff --git a/server.js b/server.js
index daccc7d..188d268 100644
--- a/server.js
+++ b/server.js
@@ -8,7 +8,7 @@ const handle = app.getRequestHandler();
app.prepare()
.then(() => {
const server = express();
-
+
server.get('/t/:code', (req, res) => {
const actualPage = '/tournament';
const queryParam = { code: req.params.code };
@@ -21,6 +21,12 @@ app.prepare()
app.render(req, res, actualPage, queryParam);
});
+ server.get('/t/:code/edit', (req, res) => {
+ const actualPage = '/tournament-edit';
+ const queryParam = { code: req.params.code };
+ app.render(req, res, actualPage, queryParam);
+ });
+
server.get('*', (req, res) => {
return handle(req, res);
});
diff --git a/static/css/index.css b/static/css/index.css
index 0ae4d38..665ccab 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -1,4 +1,8 @@
.index-cards {
background: url("/static/images/tennis-blurred.jpg") no-repeat center;
background-size: cover;
+}
+
+h2, h3, h4 {
+ font-family: Halt, sans-serif;
}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 042a220..912caed 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5635,7 +5635,7 @@ number-is-nan@^1.0.0:
resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
-object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
+object-assign@^4.0.0, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
@@ -6388,6 +6388,14 @@ react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
+react-notify-toast@^0.5.0:
+ version "0.5.0"
+ resolved "https://registry.yarnpkg.com/react-notify-toast/-/react-notify-toast-0.5.0.tgz#b00cf50a3cc97a1d222ecd7d7a8e7f14bef5fa67"
+ integrity sha1-sAz1CjzJeh0iLs19eo5/FL71+mc=
+ dependencies:
+ object-assign "^4.0.0"
+ prop-types "^15.5.8"
+
react-popper@^0.10.4:
version "0.10.4"
resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-0.10.4.tgz#af2a415ea22291edd504678d7afda8a6ee3295aa"
+