diff --git a/js/components/FavoriteBar.js b/js/components/FavoriteBar.js
new file mode 100644
index 0000000..c3c5371
--- /dev/null
+++ b/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 (
+
+
+ {isVisible && (
+
+
Favorite Team
+ {favorite ?
{favorite.name}
:
No favorite team selected
}
+
All Teams
+
+ {teams.map(team => (
+ -
+ {team.name} {favorite && favorite.id === team.id && (Favorite)}
+
+
+ ))}
+
+
+ )}
+
+ );
+}
diff --git a/js/redux/tournamentApi.js b/js/redux/tournamentApi.js
index 7d9576d..2bca5cb 100644
--- a/js/redux/tournamentApi.js
+++ b/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
};
}
diff --git a/pages/tournament.js b/pages/tournament.js
index b5b656c..a686e21 100644
--- a/pages/tournament.js
+++ b/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 (
+
{groupStage != null &&
- Vollbild-Ansicht Gruppen
);
}