Add a collapse button for all matches in a group stage

The button defaults to show if the playoff hasn't started, otherwise to hide.

js/components/GroupStage.js

@@ -1,15 +1,36 @@
-import {Card, CardBody, Col, Row, Table} from 'reactstrap';
+import {Button, Card, CardBody, Col, Collapse, Row, Table} from 'reactstrap';
 import {Match} from './Match';
-import React from 'react';
+import React, {Component} from 'react';
 
-export default function GroupStage(props) {
+export default class GroupStage extends Component {
-    return (<div className='py-5 px-5'>
+    constructor(props) {
-        <h1 className='custom-font'>Gruppenphase</h1>
+        super(props);
-        <Row>
+        this.state = {showMatches: this.props.showMatches};
-            {props.groups.map(group => <Group group={group} key={group.id} isSignedIn={props.isSignedIn}
+        this.toggleShowMatches = this.toggleShowMatches.bind(this);
-                isOwner={props.isOwner}/>)}
+    }
-        </Row>
+
-    </div>);
+    toggleShowMatches() {
+        this.setState({showMatches: !this.state.showMatches});
+    }
+
+    render() {
+        return (<div className='py-5 px-5'>
+            <h1 className='custom-font'>
+                Gruppenphase
+                <ShowMatchesToggleButton show={this.state.showMatches} toggle={this.toggleShowMatches}/>
+            </h1>
+            <Row className='mt-3'>
+                {this.props.groups.map(group => <Group group={group} key={group.id} isSignedIn={this.props.isSignedIn}
+                    isOwner={this.props.isOwner} showMatches={this.state.showMatches}/>)}
+            </Row>
+        </div>);
+    }
+}
+
+function ShowMatchesToggleButton(props) {
+    return (<Button onClick={props.toggle} className='float-right default-font-family'>
+        {props.show ? 'Spiele ausblenden' : 'Spiele anzeigen'}
+    </Button>);
 }
 
 function Group(props) {
@@ -17,8 +38,10 @@ function Group(props) {
         <Card>
             <CardBody>
                 <h3 className='custom-font'>Gruppe {props.group.id + 1}</h3>
-                {props.group.matches.map((match => (
+                <Collapse isOpen={props.showMatches}>
-                    <Match match={match} isSignedIn={props.isSignedIn} isOwner={props.isOwner} key={match.id}/>)))}
+                    {props.group.matches.map((match => (
+                        <Match match={match} isSignedIn={props.isSignedIn} isOwner={props.isOwner} key={match.id}/>)))}
+                </Collapse>
                 <GroupScoresTable scores={props.group.scores}/>
             </CardBody>
         </Card>

pages/tournament.js

@@ -37,7 +37,8 @@ class PrivateTournamentPage extends React.Component {
             </Container>
             <div className='stages pt-5'>
                 {groupStage != null &&
-                <div><GroupStage groups={groupStage.groups} isSignedIn={isSignedIn} isOwner={isOwner}/></div>}
+                <div><GroupStage groups={groupStage.groups} isSignedIn={isSignedIn} isOwner={isOwner}
+                    showMatches={playoffStages !== null}/></div>}
                 <PlayoffStages playoffStages={playoffStages} isSignedIn={isSignedIn}
                     isOwner={isOwner}/>
             </div>

static/css/everypage.css

@@ -7,6 +7,10 @@
     font-family: Halt, sans-serif;
 }
 
+.default-font-family {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
 .navbar-brand {
     font-family: Halt, sans-serif;
     font-size: 2em;
@@ -67,4 +71,4 @@ footer {
     background: url("/static/images/tennis-blurred.jpg") no-repeat top;
     background-size: cover;
     min-height: 100vh;
-}
+}