From c12ca27ac9e48cf7690e88006857679ba6ef4965 Mon Sep 17 00:00:00 2001
From: Malaber <git@schaedler.rocks>
Date: Fri, 15 Sep 2023 15:25:24 +0200
Subject: [PATCH] Render group information per match

---
 js/components/Match.js    | 10 +++++++++-
 js/redux/tournamentApi.js |  3 ++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/js/components/Match.js b/js/components/Match.js
index d9f3211..7396122 100644
--- a/js/components/Match.js
+++ b/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>
diff --git a/js/redux/tournamentApi.js b/js/redux/tournamentApi.js
index 50bb15c..a216d1d 100644
--- a/js/redux/tournamentApi.js
+++ b/js/redux/tournamentApi.js
@@ -110,7 +110,8 @@ function convertMatch(apiMatch, allowUndecided) {
         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) {