Merge pull request #27 from LucasPatenaude/favorites-in-navigation-bar

Favorites in Navigation Bar Implemented

ProjectSourceCode/src/index.js

@@ -303,6 +303,7 @@ app.post('/favteam/add', async (req, res, next) => {
       return res.status(500).json({ error: 'Error adding favorite team' });
   }
 });
+
 app.post('/favteam/remove', async (req, res) => {
   try {
     const { userID, teamID } = req.body;
@@ -355,7 +356,6 @@ async function getFavoriteTeamsForUser(userId) {
   }
 }
 
-
 // *****************************************************
 // <!-- Section 5 : Start Server-->
 // *****************************************************

ProjectSourceCode/src/resources/css/generated-pages/club-pages/club-page-styling.css

@@ -16,3 +16,8 @@
 {
     cursor: pointer;
 }
+
+#competition-logo {
+    width: 60px;
+    margin-right: 10px;
+}

ProjectSourceCode/src/resources/css/navigation-bar/navigation-bar.css

@@ -33,6 +33,27 @@
     font-size: 30px;
 }
 
+#favorite-teams-container {
+    margin-right: 25px;
+
+    a {
+        text-decoration: none; 
+    }
+    
+    img {
+        width: 28px;
+        height: auto;
+        margin: 0 4px;
+        cursor: pointer;
+
+        transition: width 0.3s ease; /* Adding transition for smooth effect */
+    }
+
+    img:hover {
+        width: 32px;
+    }
+}
+
 #user {
     width: 25px;
     cursor: pointer;

ProjectSourceCode/src/resources/css/navigation-bar/scoreboard-header/game-card.css

@@ -13,7 +13,6 @@
     overflow: hidden; /* Hide the overflowing skewed content */
     transform: skewX(-20deg); /* Skew the banner to create a triangular side */
     transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition for smooth transformation and box-shadow */
-    cursor: pointer; /* Change cursor to pointer on hover */
     
     transition: transform 0.4s ease; /* Add transition for smooth effect */
 }
@@ -61,11 +60,17 @@
 
 /* Container for each team in card's information */
 .team {
-    display: flex; /* Keeps all items in a row */
     align-items: center; /* Center items vertically */
     padding: 5px;
 }
 
+.team a {
+    color: black;
+    display: flex;
+    text-decoration: none;
+    margin: 0;
+}
+
 
 .team p {
     margin: 0; /* Remove default margin */

ProjectSourceCode/src/resources/js/club-page/favorite-button.js

@@ -8,10 +8,9 @@ document.addEventListener("DOMContentLoaded", function() {
             var teamLogo = document.getElementById("teamLogo").value;
             
             if (favoriteButton.src.includes("/favorited.png")) {
-                removeFavoriteTeam(userID, teamID)
-            }
-            else {
-                addFavoriteTeam(userID, teamID, teamName, teamLogo)
+                removeFavoriteTeam(userID, teamID);
+            } else {
+                addFavoriteTeam(userID, teamID, teamName, teamLogo);
             }
         });
     }
@@ -35,16 +34,19 @@ async function addFavoriteTeam(userID, teamID, teamName, teamLogo){
         if (!response.ok) {
             throw new Error('Failed to add favorite team');
         }
-        //Changes button if favorite team is added//
-        console.log('New favorite team added successfully.');
-        var favoriteButton = document.getElementById("club-favorite-button");
-        favoriteButton.src = "/img/club-page/favorited.png";
+
+        if (response.status === 200) {
+            console.log('New favorite team added successfully.');
+            var favoriteButton = document.getElementById("club-favorite-button");
+            favoriteButton.src = "/img/club-page/favorited.png";
+            location.reload(); // Refresh the page
+        }
 
     } catch (error) {
         console.error('Error adding favorite team:', error);
-
     }
 }
+
 async function removeFavoriteTeam(userID, teamID) {
     try {
         const response = await fetch('/favteam/remove', {
@@ -57,10 +59,13 @@ async function removeFavoriteTeam(userID, teamID) {
                 teamID: teamID
             })
         });
-        console.log('Favorite team removed successfully.');
-        //Change button source//
-        var favoriteButton = document.getElementById("club-favorite-button");
-        favoriteButton.src = "/img/club-page/unfavorited.png";
+        
+        if (response.status === 200) {
+            console.log('Favorite team removed successfully.');
+            var favoriteButton = document.getElementById("club-favorite-button");
+            favoriteButton.src = "/img/club-page/unfavorited.png";
+            location.reload(); // Refresh the page
+        }
 
     } catch (error) {
         console.error('Error removing favorite team:', error);

ProjectSourceCode/src/resources/middleware/navigation-bar/current-match-information.js

@@ -35,10 +35,12 @@ const fetchMatchesData = async (req, res, next) => {
             // Extract relevant data from the API response
             const matches = response.data.matches.map(match => ({
                 homeTeam: {
+                    teamID: match.homeTeam.id,
                     name: match.homeTeam.tla,
                     crest: match.homeTeam.crest,
                 },
                 awayTeam: {
+                    teamID: match.awayTeam.id,
                     name: match.awayTeam.tla,
                     crest: match.awayTeam.crest,
                 },

ProjectSourceCode/src/views/pages/clubs-page.hbs

@@ -81,11 +81,13 @@
                         <thead>
                             <tr>
                                 <th>Name</th>
+                                <th></th>
                             </tr>
                         </thead>
                         <tbody>
                             {{#each club.runningCompetitions}}
                             <tr>
+                                <td><img id="competition-logo" src="{{emblem}}"></td>
                                 <td>{{name}}</td>
                             </tr>
                             {{/each}}

ProjectSourceCode/src/views/partials/footer.hbs

@@ -19,6 +19,6 @@
 
         <!-- Club Pages Scripts -->
         <script src="/js/club-page/favorite-button.js"></script>
-        <script src="/js/club-page/player-card-hover.js"></script>
+        <script src="/js/club-page/refresh-for-favorite.js"></script>
 
     </footer>

ProjectSourceCode/src/views/partials/navigation-bar/nav.hbs

@@ -41,6 +41,14 @@
       </ul>
     </div>
 
+    <div id="favorite-teams-container" class="logos-container">
+      {{#each fav_teams}}
+        <a href="/club/{{this.teamid}}">
+          <img id="teamlogo" src="{{this.teamlogo}}" alt="teamlogo">
+        </a>
+      {{/each}}
+    </div>
+
     <div id="user" class="user-icon">
       <img src="/img/navigation-bar/user.png" alt="Your Image" class="img-fluid">
     </div>

ProjectSourceCode/src/views/partials/navigation-bar/scoreboard-header/game-card.hbs

@@ -6,15 +6,19 @@
 
             <!-- Team 1 Name with Score -->
             <div class="team">
-                <img src="{{ homeTeam.crest }}" alt="{{ homeTeam.name }} Crest">
-                <p id="team-name">{{ homeTeam.name }}</p> <!-- {{team1.name}} -->
-                <p id="team-score">{{ score.homeScore }}</p>
+                <a href="/club/{{homeTeam.teamID}}">
+                    <img src="{{ homeTeam.crest }}" alt="{{ homeTeam.name }} Crest">
+                    <p id="team-name">{{ homeTeam.name }}</p> <!-- {{team1.name}} -->
+                    <p id="team-score">{{ score.homeScore }}</p>
+                </a>
             </div>
             <!-- Team 2 Name with Score -->
             <div class="team">
-                <img src="{{ awayTeam.crest }}" alt="{{ awayTeam.name }} Crest">
-                <p id="team-name">{{ awayTeam.name }}</p> <!-- {{team1.name}} -->
-                <p id="team-score">{{ score.awayScore }}</p>
+                <a href="/club/{{awayTeam.teamID}}">
+                    <img src="{{ awayTeam.crest }}" alt="{{ awayTeam.name }} Crest">
+                    <p id="team-name">{{ awayTeam.name }}</p> <!-- {{team1.name}} -->
+                    <p id="team-score">{{ score.awayScore }}</p>
+                </a>
             </div>
         </div>