From 7ef769d8f441e33d247d4aad5f06146d66a19d12 Mon Sep 17 00:00:00 2001
From: Lucas Patenaude <LUPA7501@colorado.edu>
Date: Wed, 24 Apr 2024 21:16:15 -0600
Subject: [PATCH] Account pane finished

---
 .../css/login-and-registration/account.css    | 30 +++++++++++++---
 .../user/delete-account-favorite-club.js      | 36 +++++++++++++++++++
 .../src/views/partials/footer.hbs             |  1 +
 .../user-menu/account-screen.hbs              | 22 ++++++------
 4 files changed, 75 insertions(+), 14 deletions(-)
 create mode 100644 ProjectSourceCode/src/resources/js/navigation-bar/user/delete-account-favorite-club.js

diff --git a/ProjectSourceCode/src/resources/css/login-and-registration/account.css b/ProjectSourceCode/src/resources/css/login-and-registration/account.css
index 0029df2..cf85d6a 100644
--- a/ProjectSourceCode/src/resources/css/login-and-registration/account.css
+++ b/ProjectSourceCode/src/resources/css/login-and-registration/account.css
@@ -50,10 +50,32 @@
 }
 
 
-.account-delete-favorite-team-button-container {
+/* Delete Button CSS */
+
+#account-delete-favorite-team-button-container {
     margin-left: auto; /* Align the container all the way to the right */
+    display: inline-block;
+    position: relative;
 }
 
-#account-delete-favorite-team-account-button {
-    width: 20px;
-}
\ No newline at end of file
+#account-delete-favorite-team-button-hover {
+    display: none; /* Initially hide the hover image */
+}
+
+#account-delete-favorite-team-button-container:hover #account-delete-favorite-team-button {
+    display: none; /* Hide the default image when hovered over */
+}
+
+#account-delete-favorite-team-button-container:hover #account-delete-favorite-team-button-hover {
+    display: inline-block; /* Display the hover image when hovered over */
+    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
+}
+
+#account-delete-favorite-team-button,
+#account-delete-favorite-team-button-hover {
+    width: 15px;
+    cursor: pointer;
+    width: 18px;
+    height: auto;
+    
+}
diff --git a/ProjectSourceCode/src/resources/js/navigation-bar/user/delete-account-favorite-club.js b/ProjectSourceCode/src/resources/js/navigation-bar/user/delete-account-favorite-club.js
new file mode 100644
index 0000000..5953307
--- /dev/null
+++ b/ProjectSourceCode/src/resources/js/navigation-bar/user/delete-account-favorite-club.js
@@ -0,0 +1,36 @@
+document.addEventListener("DOMContentLoaded", function() {
+    var deleteButtons = document.querySelectorAll("#account-delete-favorite-team-button-hover");
+    deleteButtons.forEach(function(deleteButton) {
+        deleteButton.addEventListener("click", function() {
+            var userID = deleteButton.getAttribute("userID");
+            var teamID = deleteButton.getAttribute("teamID");
+            
+            if (deleteButton.src.includes("/delete-club-hover.png")) {
+                removeAccountFavoriteTeam(userID, teamID);
+            }
+        });
+    });
+});
+
+async function removeAccountFavoriteTeam(userID, teamID) {
+    try {
+        const response = await fetch('/favteam/remove', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                userID: userID,
+                teamID: teamID
+            })
+        });
+        
+        if (response.status === 200) {
+            console.log('Favorite team removed successfully.');
+            location.reload(); // Refresh the page
+        }
+
+    } catch (error) {
+        console.error('Error removing favorite team:', error);
+    }
+}
diff --git a/ProjectSourceCode/src/views/partials/footer.hbs b/ProjectSourceCode/src/views/partials/footer.hbs
index 309435c..6368556 100644
--- a/ProjectSourceCode/src/views/partials/footer.hbs
+++ b/ProjectSourceCode/src/views/partials/footer.hbs
@@ -6,6 +6,7 @@
         <!-- Navigation Bar Scripts -->
         <script src="/js/navigation-bar/navigation-bar-follow.js"></script>
         <script src="/js/navigation-bar/user/login-and-register-page-linking.js"></script>
+        <script src="/js/navigation-bar/user/delete-account-favorite-club.js"></script>
 
         <!-- Homepage Scripts -->
         <script src="/routes/league-pages/redirect-to-league-url.js"></script>
diff --git a/ProjectSourceCode/src/views/partials/navigation-bar/user-menu/account-screen.hbs b/ProjectSourceCode/src/views/partials/navigation-bar/user-menu/account-screen.hbs
index cec51cc..cb4b58d 100644
--- a/ProjectSourceCode/src/views/partials/navigation-bar/user-menu/account-screen.hbs
+++ b/ProjectSourceCode/src/views/partials/navigation-bar/user-menu/account-screen.hbs
@@ -13,17 +13,19 @@
             <a id="account-favorite-teams-header">Favorite Teams:</a>
 
             {{#each fav_teams}}
-                <div class="account-favorite-teams-card">
-                    <div class="account-favorite-teams-card-logo-container">
-                        <img id="account-favorite-teams-card-logo" src="{{this.teamlogo}}" alt="teamlogo">
-                    </div>
-
-                    <span id="account-favorite-teams-card-title">{{this.teamname}}</span>
-
-                    <div class="account-delete-favorite-team-button-container">
-                        <img id="account-delete-favorite-team-account-button" src="/img/navigation-bar/user-menu/account-pane/delete-club.png" alt="Delete Favorite Team">
-                    </div>
+            <div class="account-favorite-teams-card">
+                <div id="account-favorite-teams-card-logo-container">
+                    <img id="account-favorite-teams-card-logo" src="{{this.teamlogo}}" alt="teamlogo">
                 </div>
+
+                <span id="account-favorite-teams-card-title">{{this.teamname}}</span>
+
+                <div id="account-delete-favorite-team-button-container">
+                    <!-- Add a different image for hover effect -->
+                    <img id="account-delete-favorite-team-button" src="/img/navigation-bar/user-menu/account-pane/delete-club.png" alt="Delete Favorite Team">
+                    <img id="account-delete-favorite-team-button-hover" src="/img/navigation-bar/user-menu/account-pane/delete-club-hover.png" userID={{this.userid}} teamID="{{this.teamid}}" alt="Delete Favorite Team Hover" >
+                </div>
+            </div>
             {{/each}}
         </div>