Add mockup for favorites

js/components/FavoriteBar.js

@@ -0,0 +1,52 @@
+import React, {useState, useEffect} from 'react';
+import {Button} from 'reactstrap';
+
+export function FavoriteBar({teams}) {
+    const [favorite, setFavorite] = useState(null);
+    const [isVisible, setIsVisible] = useState(false);
+
+    useEffect(() => {
+        const savedFavorite = localStorage.getItem('favoriteTeam');
+        if (savedFavorite) {
+            const team = teams.find(team => team.id === parseInt(savedFavorite, 10));
+            if (team) {
+                setFavorite(team);
+            }
+        }
+    }, [teams]);
+
+    const toggleFavorite = team => {
+        if (favorite && favorite.id === team.id) {
+            setFavorite(null);
+            localStorage.removeItem('favoriteTeam');
+        } else {
+            setFavorite(team);
+            localStorage.setItem('favoriteTeam', team.id);
+        }
+    };
+
+    return (
+        <div>
+            <Button onClick={() => setIsVisible(!isVisible)}>
+                {isVisible ? 'Hide Favorite Bar' : 'Show Favorite Bar'}
+            </Button>
+            {isVisible && (
+                <div className="favorite-bar">
+                    <h2>Favorite Team</h2>
+                    {favorite ? <p>{favorite.name}</p> : <p>No favorite team selected</p>}
+                    <h3>All Teams</h3>
+                    <ul>
+                        {teams.map(team => (
+                            <li key={team.id}>
+                                {team.name} {favorite && favorite.id === team.id && <span>(Favorite)</span>}
+                                <Button onClick={() => toggleFavorite(team)}>
+                                    {favorite && favorite.id === team.id ? 'Remove from Favorites' : 'Add to Favorites'}
+                                </Button>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            )}
+        </div>
+    );
+}

js/redux/tournamentApi.js

@@ -67,7 +67,8 @@ function convertTournament(apiTournament) {
         isPublic: apiTournament.public,
         ownerUsername: apiTournament.owner_username,
         groupStage: groupStage,
-        playoffStages: playoffStages
+        playoffStages: playoffStages,
+        teams: apiTournament.teams
     };
 }
 

pages/tournament.js

@@ -15,6 +15,7 @@ import {EditButton, TournamentStatusBar} from '../js/components/TournamentStatus
 import {LinkButton} from '../js/components/LinkButton';
 import {LoadingPage} from '../js/components/LoadingPage';
 import {getTournament} from '../js/redux/tournamentApi';
+import {FavoriteBar} from '../js/components/FavoriteBar';
 
 class PrivateTournamentPage extends React.Component {
     render() {
@@ -25,6 +26,7 @@ class PrivateTournamentPage extends React.Component {
         return (<div className='pb-5'>
             <TournamentBigImage {...this.props.tournament}/>
             <StatusBar tournament={this.props.tournament} isOwner={isOwner} isSignedIn={isSignedIn}/>
+            <FavoriteBar teams={this.props.tournament.teams}/>
             <div className='stages'>
                 {groupStage != null &&
                 <div><GroupStage groups={groupStage.groups} isSignedIn={isSignedIn} isOwner={isOwner}
@@ -42,7 +44,6 @@ function StatusBar(props) {
             <EditButton tournamentId={props.tournament.id} isOwner={props.isOwner} isSignedIn={props.isSignedIn}/>
             <StatisticsButton tournamentId={props.tournament.id}/>
             <FullscreenButton tournamentId={props.tournament.id}/>
-            <LinkButton href={'/t/' + props.tournament.id + '/fullscreen-groups'}>Vollbild-Ansicht Gruppen</LinkButton>
         </ButtonGroup>
     </TournamentStatusBar>);
 }