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