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 { Button } from 'reactstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faStar as filledStar } from '@fortawesome/free-solid-svg-icons';
import { faStar as emptyStar } from '@fortawesome/free-regular-svg-icons';
import { faHeartCirclePlus } from '@fortawesome/free-solid-svg-icons';
import React, {useState, useEffect} from 'react';
import {Button} from 'reactstrap';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faStar as filledStar} from '@fortawesome/free-solid-svg-icons';
import {faStar as emptyStar} from '@fortawesome/free-regular-svg-icons';
import {faHeartCirclePlus} from '@fortawesome/free-solid-svg-icons';
export function FavoriteBar({ teams }) {
export function FavoriteBar({teams}) {
const [favorite, setFavorite] = useState(null);
const [isVisible, setIsVisible] = useState(false);
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) {
return <div>Loading...</div>;
}
return (
<div>
<div style={{ display: 'flex', alignItems: 'center' }}>
<h2 style={{ marginRight: '10px' }}>Favorit:</h2>
<p style={{ marginRight: '10px' }}>{favorite ? favorite.name : ''}</p>
<div style={{display: 'flex', alignItems: 'center'}}>
<h2>Favorit:</h2>
<p>{favorite ? favorite.name : ''}</p>
<Button onClick={() => setIsVisible(!isVisible)}>
<FontAwesomeIcon icon={faHeartCirclePlus} />
<FontAwesomeIcon icon={faHeartCirclePlus}/>
</Button>
{favorite && (
<Button onClick={scrollToFavorite}>
Jump to Favorite Team's Last Game
</Button>
)}
</div>
{isVisible && (
<div className="favorite-bar">
<h3>All Teams</h3>
<div>
{teams.map(team => (
<div key={team.id} style={{ display: 'flex', alignItems: 'center' }}>
<Button onClick={() => toggleFavorite(team)} style={{ marginRight: '10px' }}>
<div key={team.id} style={{display: 'flex', alignItems: 'center'}}>
<Button onClick={() => toggleFavorite(team)} style={{marginRight: '10px'}}>
<FontAwesomeIcon
icon={favorite && favorite.id === team.id ? filledStar : emptyStar}
/>
</Button>
<span>
{team.name} {favorite && favorite.id === team.id && <span>(Favorite)</span>}
{team.name}
</span>
</div>
))}
@ -65,4 +79,4 @@ export function FavoriteBar({ teams }) {
)}
</div>
);
}
}

17
js/components/GroupStage.js
View File

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