Implement group stage

js/components/GroupStage.js

@@ -0,0 +1,52 @@
+import {Card, CardBody, Col, Row, Table} from 'reactstrap';
+import {Match} from './Match';
+import React from 'react';
+
+export default function GroupStage(props) {
+    return (<div className='py-5 px-5'>
+        <h1 className='custom-font'>Gruppenphase</h1>
+        <Row>
+            {props.groups.map(group => <Group group={group} key={group.id} isSignedIn={props.isSignedIn}
+                isOwner={props.isOwner}/>)}
+        </Row>
+    </div>);
+}
+
+function Group(props) {
+    return (<Col className='minw-25'>
+        <Card>
+            <CardBody>
+                <h3 className='custom-font'>Gruppe {props.group.id + 1}</h3>
+                {props.group.matches.map((match => (
+                    <Match match={match} isSignedIn={props.isSignedIn} isOwner={props.isOwner} key={match.id}/>)))}
+                <GroupScoresTable scores={props.group.scores}/>
+            </CardBody>
+        </Card>
+    </Col>);
+}
+
+function GroupScoresTable(props) {
+    return (<Table className='mt-4' striped size='sm' responsive>
+        <thead>
+            <tr>
+                <th>Team</th>
+                <th>Punkte</th>
+                <th>erzielt</th>
+                <th>kassiert</th>
+            </tr>
+        </thead>
+        <tbody>
+            {props.scores.map(groupScore => <GroupScoresTableRow score={groupScore} key={groupScore.id}/>)}
+        </tbody>
+    </Table>);
+}
+
+
+function GroupScoresTableRow(props) {
+    return (<tr>
+        <td>{props.score.team.name}</td>
+        <td>{props.score.group_points}</td>
+        <td>{props.score.received_points}</td>
+        <td>{props.score.scored_points}</td>
+    </tr>);
+}

pages/tournament.js

@@ -14,11 +14,13 @@ import '../static/css/everypage.css';
 import '../static/css/tournament.css';
 import {getTournament} from '../js/redux/tournamentApi';
 import {PlayoffStages} from '../js/components/PlayoffStages';
+import GroupStage from '../js/components/GroupStage';
 
 class PrivateTournamentPage extends React.Component {
     render() {
-        const {id, description, isPublic, code, ownerUsername, playoffStages} = this.props.tournament;
+        const {id, description, isPublic, code, ownerUsername, playoffStages, groupStage} = this.props.tournament;
         const {isSignedIn, username} = this.props;
+        const isOwner = username === ownerUsername;
 
         // TODO: Change href-prop of the anchor tag to contain the tournament code
         return (<div className='pb-5'>
@@ -34,8 +36,10 @@ class PrivateTournamentPage extends React.Component {
                 </ListGroup>
             </Container>
             <div className='stages pt-5'>
+                {groupStage != null &&
+                <div><GroupStage groups={groupStage.groups} isSignedIn={isSignedIn} isOwner={isOwner}/></div>}
                 <PlayoffStages playoffStages={playoffStages} isSignedIn={isSignedIn}
-                    isOwner={username === ownerUsername}/>
+                    isOwner={isOwner}/>
             </div>
         </div>);
     }