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

Togglescroll?

This commit is contained in:
Daniel Schädler 2025-03-17 16:07:41 +01:00
parent 01f8a8e34f
commit e1bfa05b9f
1 changed files with 78 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
js/components/GroupStage.js
View File

@ -11,6 +11,10 @@ export default class GroupStage extends Component {
super(props); super(props);
this.state = {showMatches: this.props.showMatches}; this.state = {showMatches: this.props.showMatches};
this.toggleShowMatches = this.toggleShowMatches.bind(this); this.toggleShowMatches = this.toggleShowMatches.bind(this);
this.groupRefs = this.props.groups.reduce((acc, group) => {
acc[group.id] = React.createRef();
return acc;
}, {});
} }
toggleShowMatches() { toggleShowMatches() {
@ -18,21 +22,26 @@ export default class GroupStage extends Component {
} }
render() { render() {
return (<div className='py-2 px-1'> return (
<h1 className='custom-font m-2'> <div className="py-2 px-1">
<span className='px-2'>Gruppenphase</span> <h1 className="custom-font m-2">
</h1> <span className="px-2">Gruppenphase</span>
<Row className=''> </h1>
{this.props.groups.map(group => <Group <Row className="">
group={group} {this.props.groups.map(group => (
key={group.id} <Group
isSignedIn={this.props.isSignedIn} group={group}
isOwner={this.props.isOwner} key={group.id}
showMatches={this.state.showMatches} isSignedIn={this.props.isSignedIn}
showMatchesToggle={this.toggleShowMatches} isOwner={this.props.isOwner}
/>)} showMatches={this.state.showMatches}
</Row> showMatchesToggle={this.toggleShowMatches}
</div>); groupRef={this.groupRefs[group.id]}
/>
))}
</Row>
</div>
);
} }
} }
@ -40,11 +49,11 @@ function ShowMatchesToggleChevron(props) {
const toggleClass = props.show ? 'rotate' : ''; const toggleClass = props.show ? 'rotate' : '';
return ( return (
<Button <Button
color='link' color="link"
onClick={props.toggle} onClick={props.toggle}
className='position-absolute top-0 end-0 m-2 mt-1 button-no-focus' className="position-absolute top-0 end-0 m-2 mt-1 button-no-focus"
> >
<FaChevronDown className={`my-chevron ${toggleClass}`} /> <FaChevronDown className={`my-chevron ${toggleClass}`}/>
</Button> </Button>
); );
} }
@ -54,10 +63,18 @@ export class Group extends Component {
super(props); super(props);
this.state = props.group; this.state = props.group;
this.reload = this.reload.bind(this); this.reload = this.reload.bind(this);
this.handleToggle = this.handleToggle.bind(this);
this.onReloadSuccess = this.onReloadSuccess.bind(this); this.onReloadSuccess = this.onReloadSuccess.bind(this);
this.onReloadError = this.onReloadError.bind(this); this.onReloadError = this.onReloadError.bind(this);
} }
handleToggle() {
this.props.showMatchesToggle();
if (this.props.groupRef.current) {
this.props.groupRef.current.scrollIntoView({behavior: 'smooth', block: 'center'});
}
}
reload() { reload() {
getGroup(this.state.id, this.onReloadSuccess, this.onReloadError); getGroup(this.state.id, this.onReloadSuccess, this.onReloadError);
} }
@ -71,43 +88,55 @@ export class Group extends Component {
} }
render() { render() {
return (<Col className='minw-25 py-2'> return (
<Card> <Col className="minw-25 py-2" ref={this.props.groupRef}>
<CardBody className="position-relative"> <Card>
<h3 className='custom-font'> <CardBody className="position-relative">
Gruppe {this.state.number} <h3 className="custom-font">
</h3> Gruppe {this.state.number}
<ShowMatchesToggleChevron show={this.props.showMatches} toggle={this.props.showMatchesToggle}/> </h3>
<Collapse isOpen={this.props.showMatches}> <ShowMatchesToggleChevron
{this.state.matches.sort(sortMatchesByPositionAscending()).map((match => ( show={this.props.showMatches}
<Match match={match} isSignedIn={this.props.isSignedIn} isOwner={this.props.isOwner} toggle={this.handleToggle}
onChange={this.reload} key={match.id}/>)))} />
</Collapse> <Collapse isOpen={this.props.showMatches}>
<GroupScoresTable scores={this.state.scores}/> {this.state.matches.sort(sortMatchesByPositionAscending()).map(match => (
</CardBody> <Match
</Card> match={match}
</Col>); isSignedIn={this.props.isSignedIn}
isOwner={this.props.isOwner}
onChange={this.reload}
key={match.id}
/>
))}
</Collapse>
<GroupScoresTable scores={this.state.scores}/>
</CardBody>
</Card>
</Col>
);
} }
} }
function GroupScoresTable(props) { function GroupScoresTable(props) {
return (<Table className='mt-4' striped size='sm' responsive> return (
<thead> <Table className="mt-4" striped size="sm" responsive>
<tr> <thead>
<th>#</th> <tr>
<th>Team</th> <th>#</th>
<th><span title="Punkte">Pkt.</span></th> <th>Team</th>
<th><span title="Becherdifferenz">Dif.</span></th> <th><span title="Punkte">Pkt.</span></th>
<th><span title="Getroffene Becher (Geworfen)">Gew.</span></th> <th><span title="Becherdifferenz">Dif.</span></th>
</tr> <th><span title="Getroffene Becher (Geworfen)">Gew.</span></th>
</thead> </tr>
<tbody> </thead>
{props.scores.map(groupScore => <GroupScoresTableRow score={groupScore} key={groupScore.id}/>)} <tbody>
</tbody> {props.scores.map(groupScore => <GroupScoresTableRow score={groupScore} key={groupScore.id}/>)}
</Table>); </tbody>
</Table>
);
} }
function GroupScoresTableRow(props) { function GroupScoresTableRow(props) {
const teamId = `favorite-team-groupstage-${props.score.team.id}`; const teamId = `favorite-team-groupstage-${props.score.team.id}`;
return ( return (