From 0de789b7e3aff18c07093fa54d425176fa8e2997 Mon Sep 17 00:00:00 2001 From: Felix Hamme Date: Mon, 3 Dec 2018 13:02:23 +0100 Subject: [PATCH 01/13] Begin designing tournament page --- pages/tournament.js | 64 ++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 58 insertions(+), 6 deletions(-) diff --git a/pages/tournament.js b/pages/tournament.js index a2010b7..efe7116 100644 --- a/pages/tournament.js +++ b/pages/tournament.js @@ -1,23 +1,75 @@ import Head from 'next/head' -import "../style.css" +import React from 'react' +import {Container, ListGroup, ListGroupItem} from 'reactstrap'; +import 'bootstrap/dist/css/bootstrap.min.css'; +import {BigImage, Footer, TurniereNavigation} from '../js/CommonComponents.js' +import '../static/everypage.css' +import {getRequest} from "../js/api"; -class TournamentPage extends React.Component { +function Tournament(props) { + return ( + + Turnier bearbeiten +

{props.tournament.description}

+ + + {props.tournament.isPublic ? 'Das Turnier ist öffentlich.' : 'Das Turnier ist privat.'} + + Turnier-Code: {props.tournament.code} + + + ); +} + +function TournamentContainer(props) { + if (props.data === null) { + return null + } else { + return + } +} + +class Main extends React.Component { + constructor(props) { + super(props); + const code = this.props.query.code; + getRequest('/tournaments/' + code, {}) + .then(response => { + const attributes = response.data.data.attributes; + const relationships = response.data.data.relationships; + this.setState({ + tournament: { + name: attributes.name, + code: attributes.code, + description: attributes.description, + isPublic: attributes.public, + teams: relationships.teams.data.map(team => team.id), + stages: relationships.stages.data.map(stage => stage.id) + } + }); + }) + .catch(error => console.log(error)); + } static async getInitialProps({query}) { return {query} } render() { + const tournamentName = this.state === null ? 'Turnier' : this.state.tournament.name; return (
- Turnie.re - Turnieranzeige + {tournamentName}: turnie.re -

Turnieranzeige

-

Code: {this.props.query.code}

+ + + + {JSON.stringify(this.state)} +
); } } -export default TournamentPage \ No newline at end of file +export default Main \ No newline at end of file From 2e9d6353c42dee5090e9b79d5ab3f71ed7a38976 Mon Sep 17 00:00:00 2001 From: Felix Hamme Date: Mon, 3 Dec 2018 13:41:28 +0100 Subject: [PATCH 02/13] Design public tournament list --- pages/list.js | 69 ++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 66 insertions(+), 3 deletions(-) diff --git a/pages/list.js b/pages/list.js index 0425ab5..6e9574a 100644 --- a/pages/list.js +++ b/pages/list.js @@ -1,10 +1,73 @@ 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} from "../js/api"; export default () => ( -
+
- Turnie.re - Turnierliste + Öffentliche Turniere: turnie.re -

Turnierliste

+ +
+ +
+
) + +class TournamentList extends React.Component { + constructor(props) { + super(props); + this.state = { + error: null, + isLoaded: false, + items: [] + }; + } + + componentDidMount() { + getRequest('/tournaments?type=public',{}) + .then( + response => { + console.log('response:'); + console.log(response); + this.setState({ + isLoaded: true, + items: response.data.data + }); + }, + error => { + this.setState({ + isLoaded: true, + error + }); + } + ) + } + + render() { + return ( + + + +

Öffentliche Turniere

+ {this.state.items.map(item => ( + + ))} + + + + ); + } +} + +function TournamentListEntry(props) { + return ( + + {props.name} + + ); +} \ No newline at end of file From 7bbeee9e25c2babcc6e192c6c8c3a56f3a8724a8 Mon Sep 17 00:00:00 2001 From: Felix Hamme Date: Fri, 7 Dec 2018 14:49:47 +0100 Subject: [PATCH 03/13] Design matches on the tournament page --- pages/tournament.js | 220 +++++++++++++++++++++++++++++++++++--- static/css/tournament.css | 15 +++ 2 files changed, 223 insertions(+), 12 deletions(-) create mode 100644 static/css/tournament.css diff --git a/pages/tournament.js b/pages/tournament.js index efe7116..610ccd6 100644 --- a/pages/tournament.js +++ b/pages/tournament.js @@ -1,23 +1,52 @@ import Head from 'next/head' import React from 'react' -import {Container, ListGroup, ListGroupItem} from 'reactstrap'; +import { + Button, + Card, + CardBody, + Col, + Container, + ListGroup, + ListGroupItem, + Modal, + ModalBody, + ModalFooter, + ModalHeader, + Row, + Table +} from 'reactstrap'; import 'bootstrap/dist/css/bootstrap.min.css'; import {BigImage, Footer, TurniereNavigation} from '../js/CommonComponents.js' import '../static/everypage.css' -import {getRequest} from "../js/api"; +import '../static/css/tournament.css' +import {getRequest} from '../js/api'; function Tournament(props) { + let matches = [ + {scoreTeam1: 1, team1: 'Eins', scoreTeam2: 2, team2: 'Zwei', state: 'in_progress'}, + {scoreTeam1: 3, team1: 'Eins', scoreTeam2: 2, team2: 'Zwei', state: 'team1_won'}, + {scoreTeam1: 1, team1: 'Eins', scoreTeam2: 3, team2: 'Zwei', state: 'team2_won'}, + {scoreTeam1: 1, team1: 'Eins', scoreTeam2: 0, team2: 'Zwei', state: 'single_team'}, + {scoreTeam1: 1, team1: 'Eins', scoreTeam2: 0, team2: 'Zwei', state: 'not_ready'}, + {scoreTeam1: 1, team1: 'Eins', scoreTeam2: 0, team2: 'Zwei', state: 'not_started'}, + {scoreTeam1: 2, team1: 'Eins', scoreTeam2: 2, team2: 'Zwei', state: 'undecided'}]; return ( - - Turnier bearbeiten -

{props.tournament.description}

- - - {props.tournament.isPublic ? 'Das Turnier ist öffentlich.' : 'Das Turnier ist privat.'} - - Turnier-Code: {props.tournament.code} - - +
+ + Turnier bearbeiten +

{props.tournament.description}

+ + + {props.tournament.isPublic ? 'Das Turnier ist öffentlich.' : 'Das Turnier ist privat.'} + + Turnier-Code: {props.tournament.code} + + +
+ + +
+
); } @@ -29,6 +58,173 @@ function TournamentContainer(props) { } } +function Stage(props) { + return (
+ +

{props.level}

+ + {props.matches.map((match => ( + + )))} + + +
); +} + +class Match extends React.Component { + constructor(props) { + super(props); + this.state = { + isHovered: false, + modal: false + }; + this.handleHover = this.handleHover.bind(this); + this.toggleModal = this.toggleModal.bind(this); + } + + handleHover() { + this.setState({isHovered: !this.state.isHovered}); + } + + toggleModal() { + this.setState({modal: !this.state.modal}) + } + + render() { + let cardClass, team1Class, team2Class, smallMessage; + //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 border-warning'; + smallMessage = 'Spiel läuft'; + break; + case 'team1_won': + team1Class = 'font-weight-bold'; + team2Class = 'lost-team'; + cardClass = 'table-success border-success'; + smallMessage = 'Gewinner: ' + this.props.match.team1; + break; + case 'team2_won': + team1Class = 'lost-team'; + team2Class = 'font-weight-bold'; + cardClass = 'table-success border-success'; + smallMessage = 'Gewinner: ' + this.props.match.team2; + break; + case 'single_team': + team2Class = 'text-muted'; + cardClass = 'table-success 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 border-success'; + smallMessage = 'Spiel beendet, unentschieden'; + break; + } + return ( +
+ + + + + + {smallMessage} + +
+ ); + } +} + +function MatchModal(props) { + let title; + //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'; + 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'; + break; + case 'undecided': + title = 'Spiel beendet'; + break; + } + return ( + + {title} + + + + + {props.match.state === 'not_started' ? + : ''}{' '} + + + + ); +} + +function MatchTable(props) { + let team1Class, 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; + } + return ( + + + + {props.match.state !== 'single_team' ? + : ''} + + + + {props.match.state !== 'single_team' ? + : ''} + + + +
{props.match.scoreTeam1}{props.match.team1}
{props.match.scoreTeam2}{props.match.state === 'single_team' ? 'kein Gegner' : props.match.team2}
+ ) +} + + class Main extends React.Component { constructor(props) { super(props); diff --git a/static/css/tournament.css b/static/css/tournament.css new file mode 100644 index 0000000..91d8965 --- /dev/null +++ b/static/css/tournament.css @@ -0,0 +1,15 @@ +.stage { + width: 1em; +} + +.lost-team { + text-decoration: line-through; +} + +.stages > div:nth-child(odd) { + background-color: #f8f8f8; +} + +.minw-25 { + min-width: 25%; +} \ No newline at end of file From 0bbaaa4d3bf08170927d870e7967b8934391adee Mon Sep 17 00:00:00 2001 From: Felix Hamme Date: Sat, 8 Dec 2018 00:44:49 +0100 Subject: [PATCH 04/13] Change match hover design --- pages/tournament.js | 9 +-------- static/css/tournament.css | 9 +++++++++ 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/pages/tournament.js b/pages/tournament.js index 610ccd6..d8a0181 100644 --- a/pages/tournament.js +++ b/pages/tournament.js @@ -75,17 +75,11 @@ class Match extends React.Component { constructor(props) { super(props); this.state = { - isHovered: false, modal: false }; - this.handleHover = this.handleHover.bind(this); this.toggleModal = this.toggleModal.bind(this); } - handleHover() { - this.setState({isHovered: !this.state.isHovered}); - } - toggleModal() { this.setState({modal: !this.state.modal}) } @@ -128,8 +122,7 @@ class Match extends React.Component { } return (
- + diff --git a/static/css/tournament.css b/static/css/tournament.css index 91d8965..47a987e 100644 --- a/static/css/tournament.css +++ b/static/css/tournament.css @@ -12,4 +12,13 @@ .minw-25 { min-width: 25%; +} + +.match:hover { + box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; +} + +.match:hover > div { + border-width: 3px !important; + margin: -2px; } \ No newline at end of file From 8cc264725828b6ef8703dfa31a2c2fbb4105601c Mon Sep 17 00:00:00 2001 From: Felix Hamme Date: Sun, 9 Dec 2018 00:48:35 +0100 Subject: [PATCH 05/13] Design score edit input fields in tournament view --- pages/tournament.js | 62 ++++++++++++++++++++++++++++++++++++--- static/css/tournament.css | 4 +++ 2 files changed, 62 insertions(+), 4 deletions(-) diff --git a/pages/tournament.js b/pages/tournament.js index d8a0181..98a42d3 100644 --- a/pages/tournament.js +++ b/pages/tournament.js @@ -5,7 +5,7 @@ import { Card, CardBody, Col, - Container, + Container, Input, InputGroup, InputGroupAddon, ListGroup, ListGroupItem, Modal, @@ -136,10 +136,12 @@ class Match extends React.Component { 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'; @@ -155,6 +157,7 @@ function MatchModal(props) { break; case 'not_started': title = 'Spiel kann gestartet werden'; + actionButton = ; break; case 'undecided': title = 'Spiel beendet'; @@ -164,11 +167,11 @@ function MatchModal(props) { {title} - + {props.match.state === 'in_progress' ? : + } - {props.match.state === 'not_started' ? - : ''}{' '} + {actionButton} @@ -217,6 +220,57 @@ function MatchTable(props) { ) } +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 ( + + + + ); + } +} + class Main extends React.Component { constructor(props) { diff --git a/static/css/tournament.css b/static/css/tournament.css index 47a987e..b00bdef 100644 --- a/static/css/tournament.css +++ b/static/css/tournament.css @@ -21,4 +21,8 @@ .match:hover > div { border-width: 3px !important; margin: -2px; +} + +.scoreInput { + width: 11rem; } \ No newline at end of file From a9f38ce6f6ad3cf305c38b6233ef632910d50bb9 Mon Sep 17 00:00:00 2001 From: Felix Hamme Date: Tue, 11 Dec 2018 13:52:39 +0100 Subject: [PATCH 06/13] In tournament view: Iterate over stages and write method for level name --- pages/tournament.js | 31 ++++++++++++++++++++----------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/pages/tournament.js b/pages/tournament.js index 98a42d3..388f9f5 100644 --- a/pages/tournament.js +++ b/pages/tournament.js @@ -22,14 +22,15 @@ import '../static/css/tournament.css' import {getRequest} from '../js/api'; function Tournament(props) { - let matches = [ - {scoreTeam1: 1, team1: 'Eins', scoreTeam2: 2, team2: 'Zwei', state: 'in_progress'}, - {scoreTeam1: 3, team1: 'Eins', scoreTeam2: 2, team2: 'Zwei', state: 'team1_won'}, - {scoreTeam1: 1, team1: 'Eins', scoreTeam2: 3, team2: 'Zwei', state: 'team2_won'}, - {scoreTeam1: 1, team1: 'Eins', scoreTeam2: 0, team2: 'Zwei', state: 'single_team'}, - {scoreTeam1: 1, team1: 'Eins', scoreTeam2: 0, team2: 'Zwei', state: 'not_ready'}, - {scoreTeam1: 1, team1: 'Eins', scoreTeam2: 0, team2: 'Zwei', state: 'not_started'}, - {scoreTeam1: 2, team1: 'Eins', scoreTeam2: 2, team2: 'Zwei', state: 'undecided'}]; + let demoMatches = [ + {scoreTeam1: 1, team1: 'Eins', scoreTeam2: 2, team2: 'Zwei', state: 'in_progress', id: 0}, + {scoreTeam1: 3, team1: 'Eins', scoreTeam2: 2, team2: 'Zwei', state: 'team1_won', id: 1}, + {scoreTeam1: 1, team1: 'Eins', scoreTeam2: 3, team2: 'Zwei', state: 'team2_won', id: 2}, + {scoreTeam1: 1, team1: 'Eins', scoreTeam2: 0, team2: 'Zwei', state: 'single_team', id: 3}, + {scoreTeam1: 1, team1: 'Eins', scoreTeam2: 0, team2: 'Zwei', state: 'not_ready', id: 4}, + {scoreTeam1: 1, team1: 'Eins', scoreTeam2: 0, team2: 'Zwei', state: 'not_started', id: 5}, + {scoreTeam1: 2, team1: 'Eins', scoreTeam2: 2, team2: 'Zwei', state: 'undecided', id: 6}]; + let stages = [{level: 0, matches: demoMatches}, {level: 1, matches: demoMatches}]; return (
@@ -43,13 +44,21 @@ function Tournament(props) {
- - + {stages.map(stage => )}
); } +function getLevelName(levelNumber) { + const names = ['Finale', 'Halbfinale', 'Viertelfinale', 'Achtelfinale']; + if(levelNumber < names.length){ + return names[levelNumber] + }else { + return Math.pow(2, levelNumber) + 'tel-Finale' + } +} + function TournamentContainer(props) { if (props.data === null) { return null @@ -64,7 +73,7 @@ function Stage(props) {

{props.level}

{props.matches.map((match => ( - + )))} From b30971385f1c08d91beaa4aaa2586f3454269ebd Mon Sep 17 00:00:00 2001 From: Felix Hamme Date: Tue, 11 Dec 2018 15:56:56 +0100 Subject: [PATCH 07/13] Fetch single tournaments from the api in tournament view --- pages/tournament.js | 77 +++++++++++++++++++++++++++++++-------------- 1 file changed, 53 insertions(+), 24 deletions(-) diff --git a/pages/tournament.js b/pages/tournament.js index 388f9f5..36908cf 100644 --- a/pages/tournament.js +++ b/pages/tournament.js @@ -5,7 +5,10 @@ import { Card, CardBody, Col, - Container, Input, InputGroup, InputGroupAddon, + Container, + Input, + InputGroup, + InputGroupAddon, ListGroup, ListGroupItem, Modal, @@ -22,15 +25,6 @@ import '../static/css/tournament.css' import {getRequest} from '../js/api'; function Tournament(props) { - let demoMatches = [ - {scoreTeam1: 1, team1: 'Eins', scoreTeam2: 2, team2: 'Zwei', state: 'in_progress', id: 0}, - {scoreTeam1: 3, team1: 'Eins', scoreTeam2: 2, team2: 'Zwei', state: 'team1_won', id: 1}, - {scoreTeam1: 1, team1: 'Eins', scoreTeam2: 3, team2: 'Zwei', state: 'team2_won', id: 2}, - {scoreTeam1: 1, team1: 'Eins', scoreTeam2: 0, team2: 'Zwei', state: 'single_team', id: 3}, - {scoreTeam1: 1, team1: 'Eins', scoreTeam2: 0, team2: 'Zwei', state: 'not_ready', id: 4}, - {scoreTeam1: 1, team1: 'Eins', scoreTeam2: 0, team2: 'Zwei', state: 'not_started', id: 5}, - {scoreTeam1: 2, team1: 'Eins', scoreTeam2: 2, team2: 'Zwei', state: 'undecided', id: 6}]; - let stages = [{level: 0, matches: demoMatches}, {level: 1, matches: demoMatches}]; return (
@@ -44,7 +38,8 @@ function Tournament(props) {
- {stages.map(stage => )} + {props.tournament.playoffStages.map(stage => + )}
); @@ -280,6 +275,52 @@ class ScoreInput extends React.Component { } } +function convertTournament(apiTournament) { + let groupStage = null; + let playoffStages = []; + for (let stage of apiTournament.stages) { + if(stage.groups.length > 0){ + //group stage + groupStage = {groups: stage.groups.map(group => convertGroup(group))}; + }else{ + //playoff stage + playoffStages.push({ + id: stage.id, + level: stage.level, + matches: stage.matches.map(match => convertMatch(match)) + }) + } + } + return { + id: apiTournament.id, + code: apiTournament.code, + description: apiTournament.description, + name: apiTournament.name, + public: apiTournament.public, + groupStage: groupStage, + playoffStages: playoffStages + }; +} + +function convertGroup(apiGroup) { + return { + id: apiGroup.id, + number: apiGroup.number, + scores: apiGroup.group_scores, + matches: apiGroup.matches.map(match => convertMatch(match)) + } +} + +function convertMatch(apiMatch) { + return { + id: apiMatch.id, + state: apiMatch.state, + team1: apiMatch.match_scores[0].team.name, + team2: apiMatch.match_scores[1].team.name, + scoreTeam1: apiMatch.match_scores[0].points, + scoreTeam2: apiMatch.match_scores[1].points + } +} class Main extends React.Component { constructor(props) { @@ -287,18 +328,7 @@ class Main extends React.Component { const code = this.props.query.code; getRequest('/tournaments/' + code, {}) .then(response => { - const attributes = response.data.data.attributes; - const relationships = response.data.data.relationships; - this.setState({ - tournament: { - name: attributes.name, - code: attributes.code, - description: attributes.description, - isPublic: attributes.public, - teams: relationships.teams.data.map(team => team.id), - stages: relationships.stages.data.map(stage => stage.id) - } - }); + this.setState({tournament: convertTournament(response.data)}); }) .catch(error => console.log(error)); } @@ -317,7 +347,6 @@ class Main extends React.Component { - {JSON.stringify(this.state)}
); From 115df26572e6f6f460982d3ffa5c1e565c3f8c19 Mon Sep 17 00:00:00 2001 From: Felix Hamme Date: Tue, 11 Dec 2018 16:01:25 +0100 Subject: [PATCH 08/13] Make code for MatchTable in tournament view more readable (fFix react error message) --- pages/tournament.js | 47 +++++++++++++++++++++++++++++---------------- 1 file changed, 30 insertions(+), 17 deletions(-) diff --git a/pages/tournament.js b/pages/tournament.js index 36908cf..49f88d5 100644 --- a/pages/tournament.js +++ b/pages/tournament.js @@ -145,7 +145,7 @@ function MatchModal(props) { switch (props.match.state) { case 'in_progress': title = 'Spiel läuft'; - actionButton = + actionButton = ; break; case 'team1_won': title = 'Spiel beendet'; @@ -206,22 +206,35 @@ function MatchTable(props) { case 'undecided': break; } - return ( - - - - {props.match.state !== 'single_team' ? - : ''} - - - - {props.match.state !== 'single_team' ? - : ''} - - - -
{props.match.scoreTeam1}{props.match.team1}
{props.match.scoreTeam2}{props.match.state === 'single_team' ? 'kein Gegner' : props.match.team2}
- ) + 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) { From 0eb4df58cfbd828c3d1ec7a311c9d397c0bfb5a1 Mon Sep 17 00:00:00 2001 From: Felix Hamme Date: Tue, 11 Dec 2018 16:05:44 +0100 Subject: [PATCH 09/13] Write the name of the tournament owner in the tournament view --- pages/tournament.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/pages/tournament.js b/pages/tournament.js index 49f88d5..f5c92ff 100644 --- a/pages/tournament.js +++ b/pages/tournament.js @@ -35,6 +35,7 @@ function Tournament(props) { {props.tournament.isPublic ? 'Das Turnier ist öffentlich.' : 'Das Turnier ist privat.'} Turnier-Code: {props.tournament.code} + von {props.tournament.ownerUsername}
@@ -310,6 +311,7 @@ function convertTournament(apiTournament) { description: apiTournament.description, name: apiTournament.name, public: apiTournament.public, + ownerUsername: apiTournament.owner_username, groupStage: groupStage, playoffStages: playoffStages }; From 21d43ab6412280b8874d406ab150e150271fe2fa Mon Sep 17 00:00:00 2001 From: Felix Hamme Date: Tue, 11 Dec 2018 22:04:36 +0100 Subject: [PATCH 10/13] Minor design tweak for matches --- pages/tournament.js | 29 +++++++++++++++++------------ 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/pages/tournament.js b/pages/tournament.js index f5c92ff..94d0da0 100644 --- a/pages/tournament.js +++ b/pages/tournament.js @@ -26,7 +26,7 @@ import {getRequest} from '../js/api'; function Tournament(props) { return ( -
+
Turnier bearbeiten

{props.tournament.description}

@@ -90,28 +90,32 @@ class Match extends React.Component { } render() { - let cardClass, team1Class, team2Class, smallMessage; + let cardClass, team1Class, team2Class, smallMessage, 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 border-warning'; + cardClass = 'table-warning'; + borderClass = 'border-warning'; smallMessage = 'Spiel läuft'; break; case 'team1_won': team1Class = 'font-weight-bold'; team2Class = 'lost-team'; - cardClass = 'table-success border-success'; + cardClass = 'table-success'; + borderClass = 'border-success'; smallMessage = 'Gewinner: ' + this.props.match.team1; break; case 'team2_won': team1Class = 'lost-team'; team2Class = 'font-weight-bold'; - cardClass = 'table-success border-success'; + cardClass = 'table-success'; + borderClass = 'border-success'; smallMessage = 'Gewinner: ' + this.props.match.team2; break; case 'single_team': team2Class = 'text-muted'; - cardClass = 'table-success border-success'; + cardClass = 'table-success'; + borderClass = 'border-success'; smallMessage = 'kein Gegner, Team kommt weiter'; break; case 'not_ready': @@ -121,15 +125,16 @@ class Match extends React.Component { smallMessage = 'Spiel kann gestartet werden'; break; case 'undecided': - cardClass = 'table-success border-success'; + cardClass = 'table-success'; + borderClass = 'border-success'; smallMessage = 'Spiel beendet, unentschieden'; break; } return (
- - + + {smallMessage} @@ -215,7 +220,7 @@ function MatchTable(props) { {props.match.team1} - kein Gegner + kein Gegner @@ -229,8 +234,8 @@ function MatchTable(props) { {props.match.team1} - {props.match.scoreTeam2} - {props.match.team2} + {props.match.scoreTeam2} + {props.match.team2} From 5c55ff025b1e52600852d390e218dc1c061944bb Mon Sep 17 00:00:00 2001 From: Felix Hamme Date: Wed, 12 Dec 2018 18:43:53 +0100 Subject: [PATCH 11/13] Update data processing in public tournament list due to changed api --- pages/list.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/pages/list.js b/pages/list.js index 6e9574a..9b92722 100644 --- a/pages/list.js +++ b/pages/list.js @@ -36,7 +36,7 @@ class TournamentList extends React.Component { console.log(response); this.setState({ isLoaded: true, - items: response.data.data + items: response.data }); }, error => { @@ -55,7 +55,8 @@ class TournamentList extends React.Component {

Öffentliche Turniere

{this.state.items.map(item => ( - + //The code should be item.code but the api just supports it this way by now + ))} From 8612b88ff748252dacf163732078487e9e41c650 Mon Sep 17 00:00:00 2001 From: JP1998 Date: Wed, 12 Dec 2018 21:25:01 +0100 Subject: [PATCH 12/13] Resolve conflicts and style issues --- pages/list.js | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/pages/list.js b/pages/list.js index 1005258..8e03fa4 100644 --- a/pages/list.js +++ b/pages/list.js @@ -1,9 +1,9 @@ -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} from "../js/api"; +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 () => (
@@ -16,7 +16,7 @@ export default () => (
-) +); class TournamentList extends React.Component { constructor(props) { @@ -29,11 +29,9 @@ class TournamentList extends React.Component { } componentDidMount() { - getRequest('/tournaments?type=public',{}) + getRequest(getState(), '/tournaments?type=public') .then( response => { - console.log('response:'); - console.log(response); this.setState({ isLoaded: true, items: response.data @@ -45,7 +43,7 @@ class TournamentList extends React.Component { error }); } - ) + ); } render() { @@ -67,7 +65,7 @@ class TournamentList extends React.Component { function TournamentListEntry(props) { return ( - + {props.name} ); From 498e0353c15bb5584bb55c0cbaaa5b1ca3010993 Mon Sep 17 00:00:00 2001 From: JP1998 Date: Wed, 12 Dec 2018 21:54:07 +0100 Subject: [PATCH 13/13] Resolve conflicts and fix style issues --- pages/tournament.js | 250 ++++++++++++++++++++++---------------------- 1 file changed, 123 insertions(+), 127 deletions(-) diff --git a/pages/tournament.js b/pages/tournament.js index 46e9d04..d864dd8 100644 --- a/pages/tournament.js +++ b/pages/tournament.js @@ -1,5 +1,5 @@ -import Head from 'next/head' -import React from 'react' +import Head from 'next/head'; +import React from 'react'; import { Button, Card, @@ -19,16 +19,17 @@ import { Table } from 'reactstrap'; 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} from '../js/api'; +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 + Turnier bearbeiten

{props.tournament.description}

@@ -49,17 +50,17 @@ function Tournament(props) { function getLevelName(levelNumber) { const names = ['Finale', 'Halbfinale', 'Viertelfinale', 'Achtelfinale']; if(levelNumber < names.length){ - return names[levelNumber] + return names[levelNumber]; }else { - return Math.pow(2, levelNumber) + 'tel-Finale' + return Math.pow(2, levelNumber) + 'tel-Finale'; } } function TournamentContainer(props) { if (props.data === null) { - return null + return null; } else { - return + return ; } } @@ -86,49 +87,44 @@ class Match extends React.Component { } toggleModal() { - this.setState({modal: !this.state.modal}) + this.setState({modal: !this.state.modal}); } render() { - let cardClass, team1Class, team2Class, smallMessage, borderClass; + let cardClass, smallMessage, 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': - team1Class = 'font-weight-bold'; - team2Class = 'lost-team'; - cardClass = 'table-success'; - borderClass = 'border-success'; - smallMessage = 'Gewinner: ' + this.props.match.team1; - break; - case 'team2_won': - team1Class = 'lost-team'; - team2Class = 'font-weight-bold'; - cardClass = 'table-success'; - borderClass = 'border-success'; - smallMessage = 'Gewinner: ' + this.props.match.team2; - break; - case 'single_team': - team2Class = 'text-muted'; - 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; + 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 (
@@ -149,29 +145,29 @@ function MatchModal(props) { 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; + 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 ( @@ -192,54 +188,54 @@ function MatchTable(props) { let team1Class, 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; + 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
{props.match.team1}
kein Gegner
- ) - }else{ + ); + } else { return ( - - - - - - - - + + + + + + + +
{props.match.scoreTeam1}{props.match.team1}
{props.match.scoreTeam2}{props.match.team2}
{props.match.scoreTeam1}{props.match.team1}
{props.match.scoreTeam2}{props.match.team2}
- ) + ); } } @@ -247,21 +243,21 @@ function EditableMatchTable(props) { return ( - - - - - - - - + + + + + + + +
- - {props.match.team1}
- - {props.match.team2}
+ + {props.match.team1}
+ + {props.match.team2}
- ) + ); } class ScoreInput extends React.Component { @@ -307,7 +303,7 @@ function convertTournament(apiTournament) { id: stage.id, level: stage.level, matches: stage.matches.map(match => convertMatch(match)) - }) + }); } } return { @@ -328,7 +324,7 @@ function convertGroup(apiGroup) { number: apiGroup.number, scores: apiGroup.group_scores, matches: apiGroup.matches.map(match => convertMatch(match)) - } + }; } function convertMatch(apiMatch) { @@ -339,18 +335,18 @@ function convertMatch(apiMatch) { team2: apiMatch.match_scores[1].team.name, scoreTeam1: apiMatch.match_scores[0].points, scoreTeam2: apiMatch.match_scores[1].points - } + }; } class Main extends React.Component { constructor(props) { super(props); const code = this.props.query.code; - getRequest('/tournaments/' + code, {}) + getRequest(getState(), '/tournaments/' + code) .then(response => { this.setState({tournament: convertTournament(response.data)}); }) - .catch(error => console.log(error)); + .catch(() => { /* TODO: Show some kind of error or smth */ }); } static async getInitialProps({query}) { @@ -373,4 +369,4 @@ class Main extends React.Component { } } -export default Main +export default Main;