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

Replace "Spiele Ausblenden" with Chevron

This commit is contained in:
Daniel Schädler 2025-03-17 15:26:47 +01:00
parent dcf516020b
commit 49a2a27e4c
1 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
js/components/GroupStage.js
View File

@ -4,6 +4,7 @@ import React, {Component} from 'react';
import {getGroup} from '../redux/tournamentApi';
import {notify} from 'react-notify-toast';
import {sortMatchesByPositionAscending} from '../utils/sorting';
import {FaChevronDown, FaChevronUp} from 'react-icons/fa6';
export default class GroupStage extends Component {
constructor(props) {
@ -20,23 +21,27 @@ export default class GroupStage extends Component {
return (<div className='py-2 px-1'>
<h1 className='custom-font'>
<span className='px-2'>Gruppenphase</span>
<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}/>)}
{this.props.groups.map(group => <Group
group={group}
key={group.id}
isSignedIn={this.props.isSignedIn}
isOwner={this.props.isOwner}
showMatches={this.state.showMatches}
showMatchesToggle={this.toggleShowMatches}
/>)}
</Row>
</div>);
}
}
function ShowMatchesToggleButton(props) {
return (<Button onClick={props.toggle} className='float-right default-font-family'>
{props.show ? 'Spiele ausblenden' : 'Spiele anzeigen'}
function ShowMatchesToggleChevron(props) {
return (<Button color='link' onClick={props.toggle} className="position-absolute top-0 end-0 m-2">
{props.show ? <FaChevronUp /> : <FaChevronDown />}
</Button>);
}
export class Group extends Component {
constructor(props) {
super(props);
@ -61,8 +66,11 @@ export class Group extends Component {
render() {
return (<Col className='minw-25 py-2'>
<Card>
<CardBody>
<h3 className='custom-font'>Gruppe {this.state.number}</h3>
<CardBody className="position-relative">
<h3 className='custom-font'>
Gruppe {this.state.number}
</h3>
<ShowMatchesToggleChevron show={this.props.showMatches} toggle={this.props.showMatchesToggle}/>
<Collapse isOpen={this.props.showMatches}>
{this.state.matches.sort(sortMatchesByPositionAscending()).map((match => (
<Match match={match} isSignedIn={this.props.isSignedIn} isOwner={this.props.isOwner}