Merge branch 'improve_match_display' into 'master'

Improve match display

See merge request turniere/turniere-frontend!39

js/components/GroupStage.js

@@ -80,9 +80,9 @@ function GroupScoresTable(props) {
         <thead>
             <tr>
                 <th>Team</th>
-                <th>Pkt.</th>
-                <th>Gew.</th>
-                <th>Kas.</th>
+                <th><span title="Punkte">Pkt.</span></th>
+                <th><span title="Getroffene Becher (Geworfen)">Gew.</span></th>
+                <th><span title="Erhaltene Becher (Kassiert)">Kas.</span></th>
             </tr>
         </thead>
         <tbody>

js/components/Match.js

@@ -118,13 +118,21 @@ export class Match extends React.Component {
             smallMessage = 'Spiel kann gestartet werden';
             break;
         }
+
+        const groupInformation = this.state.match.group ?
+            <div className="mb-2 mt-2">Gr. {this.state.match.group.number}</div> :
+            '';
+
         return (<div className='mb-3'>
             <Card className={'shadow-sm match '} onClick={this.toggleModal}>
                 <div className="d-flex flex-row">
                     <CardBody className={borderClass + ' border py-2 ' + cardClass + ' ' + styles.match_bg}>
                         <MatchTable match={this.state.match} borderColor={borderClass}/>
                     </CardBody>
-                    <span className="badge bg-secondary align-items-center">{this.state.match.position}</span>
+                    <span className="badge bg-secondary align-items-center">
+                        {groupInformation}
+                        <div className="mb-2 mt-2">Sp. {this.state.match.position}</div>
+                    </span>
                 </div>
             </Card>
             <small className='text-muted'>{smallMessage}</small>

js/redux/tournamentApi.js

@@ -106,9 +106,12 @@ function convertGroup(apiGroup) {
 
 function convertMatch(apiMatch, allowUndecided) {
     const result = {
-        id: apiMatch.id, state: apiMatch.state, allowUndecided: allowUndecided,
+        id: apiMatch.id,
+        state: apiMatch.state,
+        allowUndecided: allowUndecided,
         winnerTeamId: apiMatch.winner === null ? null : apiMatch.winner.id,
-        position: apiMatch.position + 1
+        position: apiMatch.position + 1,
+        group: apiMatch.group ? {id: apiMatch.group.id, number: apiMatch.group.number} : null
     };
 
     if (apiMatch.match_scores.length === 2) {

pages/tournament-fullscreen.js

@@ -7,6 +7,7 @@ import {
     Spinner
 } from 'reactstrap';
 import {Match} from '../js/components/Match';
+import {sortMatchesByPositionAscending} from '../js/utils/sorting';
 
 
 function FullscreenPage(props) {
@@ -27,7 +28,9 @@ function Matches(props) {
         matches = (<div className='text-center text-secondary font-italic'>keine Matches</div>);
     } else {
         matches = (<Row>
-            {props.matches.map(match => <Col md='auto'><Match key={match.id} match={match}/></Col>)}
+            {props.matches.sort(sortMatchesByPositionAscending()).map(
+                match => <Col md='auto'><Match key={match.id} match={match}/></Col>
+            )}
         </Row>);
     }
     return (<div className='mx-4 h5'>