turniere
/
turniere-frontend
mirror of https://github.com/turniere/turniere-frontend.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge branch 'improve_match_display' into 'master' 

Improve match display

See merge request turniere/turniere-frontend!39
This commit is contained in:
Daniel Schädler 2023-09-15 13:34:00 +00:00
parent 9ad65e06bc 9966bb0d18
commit 95f77864ad
4 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
js/components/GroupStage.js
View File

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

10
js/components/Match.js
View File

@ -118,13 +118,21 @@ export class Match extends React.Component {
smallMessage = 'Spiel kann gestartet werden'; smallMessage = 'Spiel kann gestartet werden';
break; 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'> return (<div className='mb-3'>
<Card className={'shadow-sm match '} onClick={this.toggleModal}> <Card className={'shadow-sm match '} onClick={this.toggleModal}>
<div className="d-flex flex-row"> <div className="d-flex flex-row">
<CardBody className={borderClass + ' border py-2 ' + cardClass + ' ' + styles.match_bg}> <CardBody className={borderClass + ' border py-2 ' + cardClass + ' ' + styles.match_bg}>
<MatchTable match={this.state.match} borderColor={borderClass}/> <MatchTable match={this.state.match} borderColor={borderClass}/>
</CardBody> </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> </div>
</Card> </Card>
<small className='text-muted'>{smallMessage}</small> <small className='text-muted'>{smallMessage}</small>

7
js/redux/tournamentApi.js
View File

@ -106,9 +106,12 @@ function convertGroup(apiGroup) {
function convertMatch(apiMatch, allowUndecided) { function convertMatch(apiMatch, allowUndecided) {
const result = { 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, 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) { if (apiMatch.match_scores.length === 2) {

5
pages/tournament-fullscreen.js
View File

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