Club routes early prototype in place

ProjectSourceCode/src/index.js

@@ -109,11 +109,11 @@ app.get('/league/:leagueID', [fetchLeaguesData, fetchLeagueScorerData], (req, re
 
 const fetchClubsData = require('./resources/middleware/clubs-page/get-current-club-information');
 
-app.get('/league/:leagueID', [fetchLeaguesData, fetchLeagueScorerData], (req, res) => {
+app.get('/club/:clubID', [fetchClubsData], (req, res) => {
     // Render the Handlebars view with league data
     res.render('pages/clubs-page', {
         clubID: req.params.clubID,
-        clubs: res.locals.clubs,
+        clubs: res.locals.club
     });
 });
 
@@ -215,6 +215,14 @@ app.get('/home', (req, res) => {
 const generateLeagueRoutes = require('./resources/routes/league-pages/generate-league-routes');
 generateLeagueRoutes(app);
 
+/************************ 
+ Club Page Routes
+*************************/
+
+// Import and call generateLeagueRoutes function
+const generateClubRoutes = require('./resources/routes/club-pages/generate-club-routes');
+generateClubRoutes(app);
+
 // *****************************************************
 // <!-- Section 5 : Start Server-->
 // *****************************************************

ProjectSourceCode/src/resources/routes/club-pages/generate-club-routes.js

@@ -4,7 +4,7 @@ const app = express();
 // generate-league-routes.js
 
 // Define a function to generate league routes
-module.exports = function generateLeagueRoutes(app) {
+module.exports = function generateClubRoutes(app) {
     // Define a route to handle requests to "/league/:leagueName"
     app.get('/club/:clubID', (req, res) => {
         // Extract the league name from the URL parameters

ProjectSourceCode/src/resources/routes/club-pages/redirect-to-club-url.js

@@ -0,0 +1,16 @@
+// Add click event listener to club logos
+document.querySelectorAll('.club-logo').forEach(logo => {
+  logo.addEventListener('click', (event) => {
+      const clubId = event.target.dataset.team_id;
+      redirectToClubPage(clubId);
+  });
+});
+
+// Function to redirect to the league page
+function redirectToClubPage(clubID) {
+  // Append the league name to the URL
+  var url = "/club/" + clubID;
+
+  // Redirect to the league page
+  window.location.href = url;
+}

ProjectSourceCode/src/resources/routes/club-pages/redirect-to-league-url.js

@@ -1,7 +0,0 @@
-function redirectToLeaguePage(clubID) {
-  // Append the league name to the URL
-  var url = "/club/" + clubID;
-  
-  // Redirect to the league page
-  window.location.href = url;
-}

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

@@ -0,0 +1,22 @@
+<div class="container" id="league-page-body">
+
+    <!-- Container for all league information (logo, name, country, etc. ) <- top 100px -->
+    <div class="container" id="league-information-container">
+
+    </div>
+
+    <!-- Container to display all stats for league <- bottom rest of the container -->
+    <div class="container" id="league-stats-container">
+
+        <!-- Container to display league table <- split 50% -->
+        <div class="container" id="league-table-container">
+
+        </div>
+
+        <!-- Container to display top scorers for league <- Split 50% -->
+        <div class="container" id="top-scorers-container">
+            
+        </div>
+
+    </div>
+</div>

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

@@ -32,7 +32,7 @@
                     {{#each league.standings}}
                     <tr>
                         <td>{{table.league_position}}</td>
-                        <td><img src="{{table.team_crest}}" alt="{{table.team_name}} Crest" id="table-logo"></td>
+                        <td><img src="{{table.team_crest}}" alt="{{table.team_name}} Crest" id="table-logo" class="club-logo" data-club-id="{{table.team_id}}"></td>
                         <td>{{table.team_name}}</td>
                         <td>{{games_played}}</td>
                         <td>{{wins}}</td>

ProjectSourceCode/src/views/partials/footer.hbs

@@ -13,6 +13,7 @@
         <!-- Homepage Scripts -->
         <script src="/routes/league-pages/redirect-to-league-url.js"></script>
 
-
+        <!-- League Pages Scripts -->
+        <script src="/routes/club-pages/redirect-to-club-url.js"></script>
 
     </footer>