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

Add basic scroll to favorite behaviour

This commit is contained in:
Daniel Schädler 2025-03-14 22:13:28 +01:00
parent b44d7cb673
commit 416a4fbc86
2 changed files with 39 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
js/components/FavoriteBar.js
View File

@ -1,11 +1,11 @@
import React, { useState, useEffect } from 'react'; import React, {useState, useEffect} from 'react';
import { Button } from 'reactstrap'; import {Button} from 'reactstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import { faStar as filledStar } from '@fortawesome/free-solid-svg-icons'; import {faStar as filledStar} from '@fortawesome/free-solid-svg-icons';
import { faStar as emptyStar } from '@fortawesome/free-regular-svg-icons'; import {faStar as emptyStar} from '@fortawesome/free-regular-svg-icons';
import { faHeartCirclePlus } from '@fortawesome/free-solid-svg-icons'; import {faHeartCirclePlus} from '@fortawesome/free-solid-svg-icons';
export function FavoriteBar({ teams }) { export function FavoriteBar({teams}) {
const [favorite, setFavorite] = useState(null); const [favorite, setFavorite] = useState(null);
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
@ -31,32 +31,46 @@ export function FavoriteBar({ teams }) {
} }
}; };
const scrollToFavorite = () => {
if (favorite) {
const el = document.getElementById(`favorite-team-groupstage-${favorite.id}`);
if (el) {
el.scrollIntoView({behavior: 'smooth', block: 'end'});
}
}
};
if (isLoading) { if (isLoading) {
return <div>Loading...</div>; return <div>Loading...</div>;
} }
return ( return (
<div> <div>
<div style={{ display: 'flex', alignItems: 'center' }}> <div style={{display: 'flex', alignItems: 'center'}}>
<h2 style={{ marginRight: '10px' }}>Favorit:</h2> <h2>Favorit:</h2>
<p style={{ marginRight: '10px' }}>{favorite ? favorite.name : ''}</p> <p>{favorite ? favorite.name : ''}</p>
<Button onClick={() => setIsVisible(!isVisible)}> <Button onClick={() => setIsVisible(!isVisible)}>
<FontAwesomeIcon icon={faHeartCirclePlus} /> <FontAwesomeIcon icon={faHeartCirclePlus}/>
</Button> </Button>
{favorite && (
<Button onClick={scrollToFavorite}>
Jump to Favorite Team's Last Game
</Button>
)}
</div> </div>
{isVisible && ( {isVisible && (
<div className="favorite-bar"> <div className="favorite-bar">
<h3>All Teams</h3> <h3>All Teams</h3>
<div> <div>
{teams.map(team => ( {teams.map(team => (
<div key={team.id} style={{ display: 'flex', alignItems: 'center' }}> <div key={team.id} style={{display: 'flex', alignItems: 'center'}}>
<Button onClick={() => toggleFavorite(team)} style={{ marginRight: '10px' }}> <Button onClick={() => toggleFavorite(team)} style={{marginRight: '10px'}}>
<FontAwesomeIcon <FontAwesomeIcon
icon={favorite && favorite.id === team.id ? filledStar : emptyStar} icon={favorite && favorite.id === team.id ? filledStar : emptyStar}
/> />
</Button> </Button>
<span> <span>
{team.name} {favorite && favorite.id === team.id && <span>(Favorite)</span>} {team.name}
</span> </span>
</div> </div>
))} ))}
@ -65,4 +79,4 @@ export function FavoriteBar({ teams }) {
)} )}
</div> </div>
); );
} }

17
js/components/GroupStage.js
View File

@ -94,11 +94,14 @@ function GroupScoresTable(props) {
function GroupScoresTableRow(props) { function GroupScoresTableRow(props) {
return (<tr> const teamId = `favorite-team-groupstage-${props.score.team.id}`;
<td>{props.score.position}</td> return (
<td>{props.score.team.name}</td> <tr id={teamId}>
<td>{props.score.group_points}</td> <td>{props.score.position}</td>
<td>{props.score.difference_in_points}</td> <td>{props.score.team.name}</td>
<td>{props.score.scored_points}</td> <td>{props.score.group_points}</td>
</tr>); <td>{props.score.difference_in_points}</td>
<td>{props.score.scored_points}</td>
</tr>
);
} }